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

No build tools route debugging #185

Open drjayvee opened 3 years ago

drjayvee commented 3 years ago

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.

developit commented 3 years ago

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