UIBUILDER v7 (dev) - new feature landed - Apply Templates

Hi all, as I don't like football at the best of times and in any case, England seem to have fallen to pieces in the Euro's this year, I thought I sneak another new feature into V7 development.

A new built-in web component <apply-template> has been added. This takes the content of a <template> tag (standard HTML) and appends that content to its own children.

Here is some simple example HTML to demonstrate its use:

<!doctype html><html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="../uibuilder/images/node-blue.ico">
  <title>Apply-Template example - Node-RED uibuilder</title>
  <meta name="description" content="Node-RED uibuilder - Apply-Template example">
  <link type="text/css" rel="stylesheet" href="./index.css" media="all">
  <script defer src="../uibuilder/uibuilder.iife.min.js"></script>

  <!-- Define some templates -->
  <template id="template-1">
    <!-- Templates are not "live" on a page. Styles and scripts
         are not active. The content does not show. -->
    <style>
      /* styles become global once applied */
      .t1-green {
        color:chartreuse
      }
    </style>
    <h1 class="t1-green">Template 1</h1>
    <p class="warn">This is the content of template 1.</p>
    <script>
      /** Scripts are run in order of application of the template
       * to the live page. They are run EVERY TIME the template
       * is applied so may run more than once. */
      console.log('template-1')
      if (!window['template1']) {
        /** This will only ever run once */
        const myvar = 1
        window['template1'] = true
      }
    </script>
  </template>
</head><body>
  <h1 class="with-subtitle">Apply-Template Example</h1>
  <div role="doc-subtitle">Using the uibuilder IIFE library.</div>

  <div id="more">
    <apply-template template-id="template-1">
      <p>Something interesting within - template content added after this...</p>
    </apply-template>
    <apply-template template-id="template-1">
      <p>
        ... Yes, you can apply a template >1 time as long as 
        you haven't used the "once" attribute...
      </p>
    </apply-template>
  </div>
</body></html>

A template can be applied as many times as you like unless you use the optional once attribute.

I've never understood why this wasn't a standard HTML feature! But hey, that's one of the reasons and benefits of using UIBUILDER! :grin: UIBUILDER is designed to reduce and simplify web coding - even to make it disappear sometimes!

There is also a matching new function in the UI and uibuilder front-end library that lets you do the same thing from JavaScript. This is rather technical to do manually, the function and web component make it trivial.

Who needs frameworks like REACT when you have UIBUILDER and Node-RED!

Anyway, the new feature has been pushed to GitHub on the v7 branch if you want to try it out.