More Performant Templates Clonning

[yhdgms1]

As Ryan Carniato said here, nodes should be cloned at the first place, because this is more performant.

Unfortunately, this doesn't always work with Grim, because the values are inserted into the template, and the output looks like this:

let name = getName();
let el = template(`<div>Hello, ${name}!</div>`)

Therefore, only static solutions will be put at the beginning, and later will be copied via cloneNode.
This is how it looks in practice.

Look at the code

Input

function Greet(name) {
  const el = (
    <div>
      <span class={styles.greeting}>{name}</span>
    </div>
  );

  const emoji = (
    <span>💀</span>
  );

  el.appendChild(emoji);

  return el;
}

Before

import { template as _tmpl } from "grim-jsx/dist/runtime.js";

function Greet(name) {
  const el = _tmpl(`<div><span class="${styles.greeting}">${name}</span></div>`);

  const emoji = _tmpl(`<span>💀</span>`);

  el.appendChild(emoji);
  return el;
}

After

import { template as _template } from "grim-jsx/dist/runtime.js";

let _tmpl = _template(`<span>💀</span>`);

function Greet(name) {
  const el = _template(`<div><span class="${styles.greeting}">${name}</span></div>`);

  const emoji = _tmpl.cloneNode(true);

  el.appendChild(emoji);
  return el;
}