DrSensor / nusa

incremental runtime that bring both simplicity and power into webdev (buildless, cross-language, data-driven)
MIT License
4 stars 0 forks source link

ESX #43

Open DrSensor opened 1 year ago

DrSensor commented 1 year ago

Structure both #38 and #32 implementation so that it support both standard JSX and the experimental ESX

DrSensor commented 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))

DrSensor commented 1 year ago

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> 🤔

DrSensor commented 1 year ago

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).

DrSensor commented 1 year ago

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}