Recette

htmx

htmx échange du HTML venu du serveur, et chaque format glyphfox est du HTML : du SVG inline rendu côté serveur, des éléments <glyph-fox> ou des placeholders data-glyph.

Générer le SVG côté serveur

server.js

import express from 'express';
import { toSvg } from 'glyphfox';

const app = express();
let liked = false;

app.post('/like', (req, res) => {
  liked = !liked;
  const icon = toSvg(liked ? 'heart/solid' : 'heart', { size: 20, animate: 'pop', title: liked ? 'Liked' : 'Like' });
  res.send(`<button hx-post="/like" hx-swap="outerHTML">${icon}</button>`);
});

toSvg renvoie l'icône sous forme de balisage avec toutes les props, et les styles d'animation voyagent à l'intérieur : le fragment échangé joue donc le pop dès son arrivée. N'importe quel serveur Node ou edge function fonctionne de la même façon.

Composants web dans le contenu échangé

index.html

<script src="https://cdn.jsdelivr.net/npm/glyphfox@1"></script>

<div hx-get="/notifications" hx-trigger="every 30s">
  <glyph-fox name="bell" animate="shake" trigger="state" active></glyph-fox>
</div>

Les custom elements se mettent à niveau d'eux-mêmes quand htmx les insère : les fragments peuvent donc renvoyer des balises <glyph-fox>. Avec un swap qui conserve les éléments et met à jour leurs attributs, comme l'extension idiomorph, un élément <glyph-fox morph> s'anime quand le serveur change son name.

Le runtime data-glyph

index.html

<script type="module">import 'https://cdn.jsdelivr.net/npm/glyphfox@1/dist/runtime/auto.js';</script>

<ul hx-get="/files" hx-trigger="load">
  <li><i data-glyph="file" data-modifier="check"></i> report.pdf</li>
</ul>

app.js

import { replaceGlyphs } from 'glyphfox';

document.body.addEventListener('htmx:afterSwap', (event) => replaceGlyphs(event.detail.target));

Le runtime remplace chaque élément data-glyph par du SVG inline et continue d'observer : les placeholders du contenu échangé sont donc remplacés eux aussi. Avec un bundler, appelez plutôt replaceGlyphs après chaque swap.