Question about non-changing interpolated content
CheloXL opened this issue · comments
I'm not sure if this is even possible, just asking: Sometimes I have parts of an interpolation that I know they will not change once rendered. For example <button>${translate("ui_add_button")}</button>. That call to translate will never change during the lifetime of that rendered content.
While I know uHtml will not do anything with that content on the html side, it would be nice to have a way to explicitly tell uHtml that that segment will never change, so internally it doesn't even need to get the value of translate and compare it with the old value to see if it was changed and have to update the content.
It is this even possible? Like "marking" a hole "this will never change"...
uhtml cannot possibly know that's a callback invoke ... even if there was a way to say "this hole won't ever change" (basically the whole point of using uhtml is that stuff that never changes adds nothing to render time) ... when render is invoked, how can it possibly ever prevent any callback to be executed?
What you need to do is to make your callback smarter and use a Map or any other way to know when an invoke already happened and nothing should be computed, as uhtml can't ever prevent JS execution and it won't do that any time soon as that's not possible in JS itself.
I already have a map/cache for that method, but that was not my point. I understand how uHtml works but don't know the internals, so I though like when you "parse" the string template, if there is a callback in a hole, maybe that callback could be executed and return a special class that have the value and later on the render method, you simply know that that value will not change.
Another option could be using something external to uHtml that let me render a template literal as another template literal. In that way on the first rendering I can get the things that will not change (like translations, options on a select element that will not change, etc.) and later re-render the generated template. Like some sort of server side rendering pass (but that executes on the same context as uHtml) that creates a string template that I will use as usually in uHtml. I'm not sure if this is even possible though...
when you "parse" the string template, if there is a callback in a hole, maybe that callback could be executed and return a special class that have the value and later on the render method, you simply know that that value will not change.
I parse static parts of the template, not holes ... holes are just plain JS so if you have callback(value) that's going to be executed every time ... if you have instead just callback as a hole, that's invoked passing the node and you can use a WeakMap to say "I know this node, just return the WeakMap value ... or execute it once and store it before returning".
There's no other magic in template literals, it's not JSX, it's not a Babel transformer, it's just how vanilla template literals work.
for other cases you can check https://github.com/WebReflection/static-params#readme which lets you define values of any template once and use those values as template literal tags as params ... this is the closest thing I have to offer here.
for other cases you can check https://github.com/WebReflection/static-params#readme which lets you define values of any template once and use those values as template literal tags as params ... this is the closest thing I have to offer here.
Ah!, this is perfect. Yes, it is what I was referring when talking about rendering a uHtml template into another uHtml... Thank you!.
if that solves, I recommend the /strict variant for perf reasons 👋
Yes... that's the one I'm about to try, as I don't need to update anything once the first pass is completed...