developit / htm

Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.
Apache License 2.0
8.64k stars 169 forks source link

Marking static or dynamic attributes as such #224

Closed fabiospampinato closed 2 years ago

fabiospampinato commented 2 years ago

It'd be really useful if something like this:

htm` <div foo=123 bar=${123}></div>`

Didn't just produce something like this:

h ( 'div', { foo: 123, bar: 123 } )

But something similar to this instead:

h ( 'div', { foo: 123, $bar: 123 } )

Where basically one can tell apart static attributes from dynamic ones.

To give some context I'm considering automatically applying a Solid-like template cloning trick for nodes creation in a new framework by doing something like this: jsx to tagged template literal via the provided babel transform -> template to clone generated for the tagged template literal at runtime. But the issue is that if I have to consider every attribute as potentially dynamic then this leaves some performance on the table, ideally I'd just generate a template with all the static stuff in, clone it, and simply apply only the dynamic parts to it.

fabiospampinato commented 2 years ago

It'll probably be better if I maintain a little dedicated fork for this, I'll probably need to have props values for dynamic props mapped to the array of dynamic values that the function that tags the template literal gets: https://github.com/vobyjs/voby/blob/master/src/utils/htm.ts