htm
htm copied to clipboard
No build tools route debugging
I've started developing using the stand-alone module from https://unpkg.com/htm/preact/standalone.module.js but realize that I really need the debugging tools.
The documentation says to import "preact/debug", but that's not a valid module specifier. There doesn't seem to be a debug standalone bundle on unpkg.
So alternatively, I might be able to adapt the following example code:
import { h, Component, render } from 'https://unpkg.com/preact?module';
import htm from 'https://unpkg.com/htm?module';
const html = htm.bind(h);
https://unpkg.com/preact/debug?module is not a thing, but the package preact/debug/dist/debug.module.js looks promising. However, it starts of with import "preact";, which doesn't work.
So my question is, is there a way to use and debug Preact + HTM without build tools?
If so, I'd love to make a PR for the docs.
Hiya! The standalone.module.js build is super convenient, but this is its achilles heel.
The current easiest solution is to use a CDN that fixes this by precompiling bare specifiers to valid URLs, like Skypack:
// you can skip this since htm/preact returns it:
// import { h, Component, render } from 'https://cdn.skypack.dev/preact';
import { html, h Component, render } from 'https://cdn.skypack.dev/htm/preact';
import 'https://cdn.skypack.dev/preact/debug';
render(html`<h1>Hi!</h1`, document.body);