65 lines
2.7 KiB
Markdown
65 lines
2.7 KiB
Markdown
# libs/ — les dépendances, versionnées et autonomes
|
|
|
|
Trois fichiers, aucun accès réseau au runtime. Ils sont commités tels quels : c'est
|
|
le prix à payer pour qu'un `python3 -m http.server` suffise à servir l'appli, et pour
|
|
qu'elle fonctionne encore dans dix ans sans npm, sans bundler et sans CDN debout.
|
|
|
|
| Fichier | Module exposé | Origine |
|
|
|---|---|---|
|
|
| `preact.js` | `preact` | `https://esm.sh/preact@10.27.2/es2022/preact.bundle.mjs` |
|
|
| `preact-hooks.js` | `preact/hooks` | `https://esm.sh/preact@10.27.2/X-ZXByZWFjdA/es2022/hooks.bundle.mjs` |
|
|
| `htm-preact.js` | `htm/preact` | `https://esm.sh/htm@3.1.1/X-ZXByZWFjdA/es2022/preact.bundle.mjs` |
|
|
|
|
Versions : preact 10.27.2, htm 3.1.1.
|
|
|
|
## Pourquoi l'URL profonde et pas `esm.sh/preact?bundle`
|
|
|
|
L'URL courte ne renvoie **pas** la librairie : c'est un shim de 88 octets qui se
|
|
contente de ré-exporter depuis le CDN.
|
|
|
|
```js
|
|
/* esm.sh - preact@10.27.2 */
|
|
export * from "https://esm.sh/preact@10.27.2/es2022/preact.mjs"
|
|
```
|
|
|
|
Enregistrer ce fichier dans `libs/` donnerait l'illusion d'une dépendance locale
|
|
alors que le navigateur irait chercher le vrai code sur esm.sh à chaque
|
|
chargement : dépendance réseau au runtime, donc inacceptable ici. L'URL profonde
|
|
`…/es2022/<nom>.bundle.mjs` est le bundle autonome, tout le code inclus.
|
|
|
|
## Pourquoi le segment `X-ZXByZWFjdA`
|
|
|
|
C'est l'encodage esm.sh des drapeaux de build : `X-` suivi de `base64("epreact")`,
|
|
c'est-à-dire `e` (*external*) appliqué à `preact`. Il demande à esm.sh de **ne pas**
|
|
inliner preact dans le bundle et de laisser le specifier `preact` nu dans les
|
|
imports :
|
|
|
|
```js
|
|
/* esm.sh - preact@10.27.2/hooks */
|
|
import { options as V } from "preact";
|
|
```
|
|
|
|
Ce specifier nu est alors résolu par l'import map de `index.html` vers notre
|
|
`./libs/preact.js`. C'est ce qui garantit **une seule instance de Preact** partagée
|
|
par les hooks et par htm — sans ce drapeau, chaque bundle embarquerait sa propre
|
|
copie, et les hooks cesseraient de fonctionner (deux registres d'options distincts).
|
|
|
|
`preact.js` lui-même n'a pas de dépendance à externaliser : son URL n'a donc pas de
|
|
segment `X-`.
|
|
|
|
## Régénérer
|
|
|
|
```sh
|
|
curl -fsSL https://esm.sh/preact@10.27.2/es2022/preact.bundle.mjs -o libs/preact.js
|
|
curl -fsSL https://esm.sh/preact@10.27.2/X-ZXByZWFjdA/es2022/hooks.bundle.mjs -o libs/preact-hooks.js
|
|
curl -fsSL https://esm.sh/htm@3.1.1/X-ZXByZWFjdA/es2022/preact.bundle.mjs -o libs/htm-preact.js
|
|
```
|
|
|
|
Après régénération, vérifier que les fichiers font plusieurs kilo-octets (un fichier
|
|
de ~100 octets est un shim, voir plus haut) et que `preact-hooks.js` et
|
|
`htm-preact.js` importent bien depuis `"preact"` nu :
|
|
|
|
```sh
|
|
wc -c libs/*.js
|
|
head -n 2 libs/preact-hooks.js libs/htm-preact.js
|
|
```
|