Open DrSensor opened 1 year ago
With the way how current implementation is abstracted, tag literal (lit-html) is far easier to implement than jsx.[^1] It also has potential to make the syntax and convention 1-1 with the current semantics which rely on colon (i.e ::
and :=
).
[^1]: the implementation most likely would be bind((<template>.innerHTML = concat(interpolated, string)).content.cloneNode(true))
Bring it up again since ESX literal has potential to bridge the gap. The question is if it support <tag :=ref value=0 :: value:=count>
🤔
Unfortunately ESX literal share the same limitation with JSX. So attribute name like <tag :=ref :: value:=accessor>
are not supported.
I fork it here. Adding support for that attribute names seems trivial. Heck I can add my own Token to make things easier (and maybe make the binding faster).
Redefining the tag literal can be tricky when the DOM tag name is case-insensitive since how the data binding work is by traversing the DOM after the string inserted into \<template>. The solution is to always hash the function/class name on every tag literal definition.
const html = ESX({MyComponent}) // hash every keys
const hash = s=>{for(let i=s.length,h=9;i;)h=Math.imul(h^s.charCodeAt(--i),9**9);return h^h>>>9}
Structure both #38 and #32 implementation so that it support both standard JSX and the experimental ESX