component meta-compiler

[leeoniya]

so here's a fun one. not really ivi specifc.

let's say i want to make an interface that renders arbitray CSV files into html tables. this doesnt fit the nice static Row template approach in js-framework-benchmark.

https://github.com/krausest/js-framework-benchmark/blob/master/frameworks/keyed/ivi/src/main.ts#L66

insteadd you end up having to do nested tr/td loops, which is not great. ideally you could dynamically compile a static Row template probably using new Function to avoid the inner td loop and rely on cloneNode of the mostly complete whole row dom.

would typings need to go out the window in this case? maybe not? 🤔

not sure if there's anything that can be done on the ivi side to help with this use case but figured i'd start a convo.

[localvoid]

ideally you could dynamically compile a static Row template probably using new Function to avoid the inner td loop and rely on cloneNode of the mostly complete whole row dom.

I think that it is possible to generate intermediate template representation without any html parsing steps and compile it with compileTemplate(ir) at runtime.

[leeoniya]

@localvoid can you provide an example of how this would work in userland?

let's say i wanted to compile this on the fly (after parsing an arbitrary CSV and detecting the column schema):

const Row = (aVal, bVal) => html`
  <tr>
    <td>${aVal}</td>
    <td>${bVal}</td>
  </tr>
`;

the issue here is of course that we need to build the IR without having static tagged template literal string.

i'd like to have something super fast for use cases like dbmon[ster], where you have rapid cell updates that only needs to diff aVal and bVal:

[leeoniya]

i wonder if something like this is feasible?

let rowTplStr = [
  '<tr>',
    '<td>${aVal}</td>',
    '<td>${bVal}</td>',
  '</tr>',
].join(''));

const RowTpl = compile(rowTplStr);

[localvoid]

const result = compileTemplate({
  type: TEMPLATE_TYPE_HTM,
  children: [
    {
      type: NODE_TYPE_ELEMENT,
      tag: "tr",
      properties: [],
      children: [
        {
          type: NODE_TYPE_ELEMENT,
          tag: "td",
          properties: [],
          children: [
            { type: NODE_TYPE_EXPR, value: 0 },
          ]
        },
        {
          type: NODE_TYPE_ELEMENT,
          tag: "td",
          properties: [],
          children: [
            { type: NODE_TYPE_EXPR, value: 1 },
          ]
        },
      ]
    }
  ]
});

const root = result.roots[0];
const tpl_descriptor = _T(
  _hN(root.template.join("")),
  root.flags,
  root.props,
  root.child,
  root.state,
  root.data,
);

const Row = component(() => {
  return () => _t(tpl_descriptor, [aVal, bVal]);
});

[leeoniya]

can ivi export compileTemplate and required consts for doing the above?

[localvoid]

ivi/packages/ivi/package.json

Lines 8 to 10 in e1bd512

	"./template/compiler": "./dist/template/compiler.js",
	"./template/parser": "./dist/template/parser.js",
	"./template/ir": "./dist/template/ir.js",

• compileTemplate in ivi/template/compiler
• consts in ivi/template/ir