htm icon indicating copy to clipboard operation
htm copied to clipboard

Improve transpilation error handling for missing closing tags

Open dfabulich opened this issue 5 years ago • 0 comments

Consider this sample code, which accidentally omits a closing tag.

import htm from 'htm'
const h = (type, props, ...children) => ({type, props, children});
const html = htm.bind(h)

console.log(JSON.stringify(html`<h1>Hello, world!`));

In this case, the user intended to include a closing tag </h1>, and so the user's desired logged result is {"type":"h1","props":null,"children":["Hello, world!"]}

Transpile htm away using this script.

shell script
#!/bin/sh -ex

rm -rf babel-htm-errors
mkdir babel-htm-errors
cd babel-htm-errors
npm init -y
npm i -D @babel/cli @babel/core babel-plugin-htm
cat <<EOF > .babelrc
{
  "plugins": [
    ["htm", {
      "pragma": "h"
    }]
  ]
}
EOF
cat <<EOF > index.js
import htm from 'htm'
const h = (type, props, ...children) => ({type, props, children});
const html = htm.bind(h)

console.log(JSON.stringify(html\`<h1>Hello, world!\`));
EOF
npx babel index.js > output.mjs
node output.mjs

Expected: Transpilation should fail with an error.

Actual: The html line transpiles to:

console.log(JSON.stringify("Hello, world!"));

The <h1> tag is silently dropped.

(Note that this error behavior is different from the runtime behavior of htm with mismatching closing tags; see issue #166.)

dfabulich avatar May 13 '20 01:05 dfabulich