ryansolid / dom-expressions

A Fine-Grained Runtime for Performant DOM Rendering
MIT License
885 stars 127 forks source link

Static text not present in output when using universal #155

Open victor-wm opened 2 years ago

victor-wm commented 2 years ago

Summary

When using the generate: 'universal' mode of the babel plugin, templates in the form of <element>Static text</element> will not produce the correct output, omitting the static text.

Details

When examining the output of the universal renderer, the generated code for static text is not including the raw text passed as child to the elements. The expected output for <element>Static text</element> would be similar to:

const _el$2 = renderer.createTextNode("Static text");

but since 0.33.0 (reflected in babel-plugin-solid 1.3.6), the output I see is

const _el$2 = renderer.createTextNode("");

Further investigation points to an issue with babel that won't produce the right output, and that matches the input dom-expressions started to give in 0.33.0: https://github.com/babel/babel/issues/14682, more specifically:

t.templateLiteral([t.templateElement({ raw: child.template })], [])

A workaround would be to revert that transform to use stringLiteral with the htmlentities decoding as previously done.

ryansolid commented 2 years ago

Is there something else in the toolchain doing this? More complicated example? Just wondering because I can't seem to reproduce this in the tests.

victor-wm commented 2 years ago

I believe dom expressions is doing the right thing but it hands a template literal without a cooked value to Babel which will try to transform the literals and fail.

I'm not sure how you would repro this in tests without adding the template literal plug-in to the transform chain. Maybe an end to end test.

victor-wm commented 2 years ago

@nksaraf keep me honest here, but I believe you chose template literals so you wouldn't need to safe encode the value, as uncook would be doing that automatically?

nksaraf commented 2 years ago

I think that might have been the reason.. I'm sorry I don't remember exactly..

victor-wm commented 2 years ago

universal-renderer-bug.zip

This is a repro using only Babel. npm run build will just output the babel code.

If you go to .babelrc and remove the @babel/transform-template-literals you will see the correct output. But if you keep it, you will see the empty string in the output.

So you would need a test that chains the template literal plugin into the mix.

victor-wm commented 2 years ago

@ryansolid could repro in tests if you use the transform plugin:

image
titoBouzout commented 1 year ago

This issue seems to be fixed, I tested the code provided in the zip and both versions output the desire text.