Un contexte React ne franchit pas une frontière d'îlot

Chaque îlot Astro est sa propre racine de rendu. Deux îlots sur la même page sont donc deux arbres distincts, montés séparément, qui ne partagent rien.

C’est ce qui rend le piège coûteux : un contexte React placé autour d’un îlot fonctionne parfaitement — tant qu’il n’y en a qu’un. Le jour où un second îlot a besoin de la même valeur, il ne la reçoit pas, et rien ne le signale. Pas d’erreur, pas d’avertissement : juste une bascule de thème dans le pied de page qui ignore celle de la barre de navigation.

Ce qui franchit la frontière

Un module. Le bundler ne l’évalue qu’une fois, donc tous les îlots qui l’importent obtiennent la même instance. C’est vrai d’un store nanostores comme d’un simple objet exporté.

// theme.ts — un module, donc une seule instance pour toute la page.
import { atom } from "nanostores";

export const $theme = atom<"dark" | "light">("dark");

Chaque îlot importe ce fichier et s’abonne :

import { $theme } from "./theme";

$theme.subscribe((theme) => {
  document.documentElement.dataset.theme = theme;
});

Comment on le vérifie

En rendant la même bascule deux fois, à deux endroits de la page, et en écrivant un test qui clique sur l’une pour vérifier que l’autre a suivi. Une propriété qu’on n’exerce pas n’est pas une propriété : c’est une intention.