developit / htm

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

Improve transpilation error handling for missing closing tags #168

Open dfabulich opened 4 years ago

dfabulich commented 4 years ago

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 ```sh #!/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 < .babelrc { "plugins": [ ["htm", { "pragma": "h" }] ] } EOF cat < index.js import htm from 'htm' const h = (type, props, ...children) => ({type, props, children}); const html = htm.bind(h) console.log(JSON.stringify(html\`

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.)