Compteur à signaux (îlot)
Le serveur rend le compteur en HTML avec des marqueurs de reprise. Le runtime d'hydratation des signaux parcourt les marqueurs, lie chaque {count.value} à son nœud texte DOM et met à jour réactivement au clic — sans DOM virtuel, sans re-rendu du balisage environnant.
Astuce
Les signaux ne re-rendent que le nœud texte exact lié à la valeur — pas le composant entier. Contrairement à un îlot « use client », les éléments frères restent intacts. Passez plusieurs valeurs de signal à un seul composant : chacune se met à jour de façon indépendante.
Résultat
count: 7 (×2 = 14)
"use signals";
/** @jsxImportSource @bext-stack/framework/signals */
import { signal, computed } from "@bext-stack/framework/signals";
export default function Counter(props: { initial?: number }) {
const count = signal(props.initial ?? 0);
const doubled = computed(() => count.value * 2);
return (
<div>
<p>count: {count.value} (×2 = {doubled.value})</p>
<button onClick={() => { count.value++; }}>+1</button>
<button onClick={() => { count.value--; }}>−1</button>
</div>
);
}import { signalsIsland } from "@bext-stack/framework/signals";
import Counter from "../../../components/Counter";
export default function Page() {
return signalsIsland("Counter", Counter, { initial: 7 });
}Un projet exécutable de cet exemple, ouvert dans l'éditeur bext play — modifiez le code, l'aperçu se met à jour.
Modifiable en direct — l'aperçu se recompile à chaque frappe.