developit / htm

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

Lost static parts and fields information + top level caller #143

Open luwes opened 4 years ago

luwes commented 4 years ago

I was wondering if there is any way to retain this information from the tagged template. The static parts could be used as a cache key for the output of the html`` call.

It's also useful to know which parts are the fields/holes. Lastly knowing which h call is the root node or top caller.

For the runtime a wrapper function would do the trick I think but babel-plugin-htm compiles to raw h('div', {}, h('span')) calls.

That might need something like

wrap(() => h('div', {}, h('span')), statics, ...fields);
zaygraveyard commented 4 years ago

Since html is a template string literal tag, you can just wrap it

const whtml = (statics, ...fields) => wrap(() => html(statics, ...fields), statics, ...fields);
luwes commented 4 years ago

thanks @zaygraveyard! that would do it in the runtime yup.

luwes commented 4 years ago

I've added it to a customized HTM version here https://github.com/luwes/sinuous/commit/aff75c0e56a3bf9189c19916936bb095f751af10

I'm not sure if it's beneficial to VDOM but for some libraries it can be a powerful pattern to know exactly where the tagged template starts and ends with all the statics and fields information available, caching is one use case but also treating the fields in a special way.

If you like this in HTM let me know, I can create a PR.

developit commented 4 years ago

@luwes seems like a useful change, and should be easy to land since its under a flag.

@jviide is also working on a faster replacement for this that we believe may outperform compiled JSX in all aspects.

developit commented 3 years ago

I'm surprised I didn't point it out earlier, but FWIW HTM already does caching internally. Subsequent calls return the previous return value from h() for any static parts of the template. The staticness information is exposed to h() as a bitfield under this[0].