developit / htm

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

Ensure that template literals generated by JSX-to-HTM transform has a balanced amount of quasis and expressions #199

Closed jviide closed 3 years ago

jviide commented 3 years ago

This pull request fixes the babel-plugin-transform-jsx-to-htm plugin output for JSX inputs like this:

<>
  <Foo />
  {Bar}
</>

Before the fix the plugin crashes with the following error message:

Number of TemplateLiteral quasis should be exactly one more than the number of expressions.
Expected 3 quasis but got 2

The fix is to always ensure that a template literal expression ends with a quasi, even when the quasi is an empty string. New static string content is then always applied to the (currently) last quasi in the template. When an expression is added a new empty quasi is immediately appended after that.

Kudos to @cristianbote for noticing a problem on wmr output that was caused by this issue. It appears that this fix also fixes the wmr problem.

This pull request also adds a test illustrating the problem.