Silently fails with HTML comments #79
Description
Hi there,
Neat library! I really like developing components but don't like shipping large bundle files to the browser. For simple apps, it would be nice to do server-side components that get rendered as strings.
I've been playing around with htm recently (inspired by @timarney's htm-ssr-demo), and got a pretty minimal proof-of-concept up and running. (Most of the code is from a preact-render-to-string example.)
package.json
{
"name": "ssr-htm-hello-world",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"express": "^4.16.4",
"htm": "^2.1.1",
"preact": "^8.4.2",
"preact-render-to-string": "^4.1.0"
},
"scripts": {
"start": "node index.js"
}
}index.js
const express = require("express");
const { h, Component } = require("preact");
const render = require("preact-render-to-string");
const htm = require("htm");
const html = htm.bind(h);
const Page = ({ name }) => {
return html`
<div class="page">
<h1>${name}</h1>
<p>This page is all about ${name}.</p>
</div>
`;
};
const app = express();
app.get("/:page", (req, res) => {
let markup = render(
html`
<${Page} name=${req.params.page} />
`
);
res.send(`<!DOCTYPE html><html><body>${markup}</body></html>`);
});
app.listen(3000);So that works well enough to prove the concept.
However, if I change Page to this:
const Page = ({ name }) => {
return html`
<div class="page">
<!-- html comment -->
<h1>${name}</h1>
<p>This page is all about ${name}.</p>
</div>
`;
};then I just get a white page, and if I open devtools, I see <undefined></undefined> in the markup.
There's no warning message or anything, so I'm wondering
- if this is a bug
- if I'm using this library in a way it's not supposed to be used
- or if there's any eslint config or anything that I can set up to catch this kind of thing
Any help or suggestions would be appreciated! I'd like to build a little prototype using htm, but if it fails silently on syntax issues then it probably won't scale very well once you started nesting components inside each other.