Preact + HTM + Preact Signals standalone

A single, standalone version of Preact, HTM and Preact Signals. No external dependencies, just one single file.

One single file that you can use via CDN or download locally for offline use.

fork

This is a fork of mujahidfa/preact-htm-signals-standalone, so that I can eliminate 1 source of trust in my dependencies.

Usage

Direct CDN import in HTML

<div id="app"></div>
<script type="module">
  import {
    html,
    render,
    signal,
  } from "https://cdn.jsdelivr.net/npm/@nichoth/preact-htm-signals-standalone/dist/standalone.js";

  const count = signal(0);

  function App() {
    return html`
      <div>
        <h1 class="hello">Hello World!</h1>
        <button onClick=${() => (count.value += 1)}>
          Increment with signal
        </button>
        <p>Counter: ${count}</p>
      </div>
    `;
  }

  render(html`<${App} />`, document.getElementById("app"));
</script>

Via npm (not recommended)

I don't recommend installing this package via NPM. It's best to install Preact, HTM and Preact Signals separately:

npm install preact htm @preact/signals
# or yarn
yarn add preact htm @preact/signals
# or pnpm
pnpm install preact htm @preact/signals

Motivation and goals

My main motivation is to be able to download the entirety of Preact + HTM + Preact Signals offline in a single file.

You can absolutely do the following (and it works fine):

<script type="module">
  import { h, render } from "https://cdn.skypack.dev/preact";
  import htm from "https://cdn.skypack.dev/htm";
  import { signal } from "https://cdn.skypack.dev/@preact/signals";
  const html = htm.bind(h);
</script>

or go shorter and do this:

<script type="module">
  import { html, render } from "https://esm.sh/htm/preact";
  import { signal } from "https://esm.sh/@preact/signals";
</script>

or even shorter (via npm.reversehttp.com, thanks Jason Miller for the tool!):

<script type="module">
  import {
    html,
    render,
    signal,
  } from "https://npm.reversehttp.com/preact,htm/preact,@preact/signals";
</script>

However, due to my work limitations (i.e. my internal Preact apps run on restricted corp intranet), having a downloadable, offline version is required, hence the need for a prebundled, no-dependency, single script that I can easily download and use offline.

Simply put, my ideal situation looks like this (made possible by this project):

<script type="module">
  // Download the prebundled scripts locally for offline use
  import { html, render, signal } from "./preact-htm-signals-standalone.js";
</script>

Inspired by the standalone version of Preact + HTM.

All rights belong to Preact, HTM and Preact Signals owners/maintainers.

Building from source

Install and bundle them (via Microbundle):

git clone https://github.com/nichoth/preact-htm-signals-standalone.git
cd preact-htm-signals-standalone
pnpm i
pnpm bundle
npm publish --dry-run # to test out publishing to npm
npm publish