How to use with unpkg

[HappyStriker]

Hello there,

first of all: This is a great extension to Preact and just what has been missing to me to start using Preact in the first place, as the whole Context concept to achieve similar things seems unnecessarily complicated.

As I like to avoid using any build tools at all and since it is possible to use Preact itself just by using import { h, Component, render } from 'https://unpkg.com/preact?module'; I am wondering how to do the same with signals?

The obvious solution to be would be to import it like import { signal } from 'https://unpkg.com/@preact/[email protected]/dist/signals.module.js?module';, but this will fail, as the resource https://unpkg.com/[email protected]/hooks?module is not available.

So is there a single, or multiple, import statement(s) to completely load all the required Preact tools, including h, render, Component as well as the new functions signal, computed etc.?

Thank you very much for your support!

Sincerly,
Happy Striker

[JoviDeCroock]

An ESM compatible bundler like esm.sh should do the trick, example https://esm.sh/@preact/signals. In the Preact repo we have an issue about this preactjs/preact#2564

[HappyStriker]

Thanks @JoviDeCroock for pointing me to esm.sh 👍

Seeing that the issue you mentioned is already two years old I am not very optimistic to see an official solution coming to unkpg so soon...

In the meantime I have managed to put my own "bundler" together using the following shell script, which will suffice for my needs:

#!/bin/sh

npm i preact @preact/signals htm

mkdir -p dist src

cp node_modules/preact/dist/preact.module.js src/preact.js
cp node_modules/preact/hooks/dist/hooks.module.js src/preact-hooks.js
cp node_modules/@preact/signals/dist/signals.module.js src/signals.js
cp node_modules/@preact/signals-core/dist/signals-core.module.js src/signals-core.js
cp node_modules/htm/dist/htm.module.js src/htm.js

cd src

sed -i '' 's/"preact"/".\/preact.js"/g' preact-hooks.js

sed -i '' 's/"preact"/".\/preact.js"/g' signals.js
sed -i '' 's/"preact\/hooks"/".\/preact-hooks.js"/g' signals.js
sed -i '' 's/"@preact\/signals-core"/".\/signals-core.js"/g' signals.js

cat <<EOL | rollup --compact -o '../dist/preact.js'
import { h } from './preact.js';
import htm from './htm.js';

export * from './preact.js';
export * from './signals.js';
export const H = htm.bind(h);
EOL