Runtime, Bootstrap et transitions

Le runtime est la source d’état unique du navigateur

import { migrateOriaStandardV1ToV2 } from "@oriatheme/core";
import { createOriaThemeRuntime } from "@oriatheme/runtime-dom";
import { oriaPresetThemes } from "@oriatheme/presets";

const runtime = createOriaThemeRuntime({
  presets: oriaPresetThemes,
  defaultThemeId: "oria-default",
  migrations: [migrateOriaStandardV1ToV2],
  transition: { type: "view-transition", respectReducedMotion: true },
});

runtime.start();
runtime.setTheme("oria-ocean", { animate: true });
runtime.setAppearance("system");

Après le démarrage, le runtime surveille le mode système, la persistance et les mises à jour des tableaux croisés. Appelez destroy lorsqu’un SPA supprime le runtime. Le champ migrations dans l’exemple est le seul moyen d’accepter les thèmes personnalisés v1 persistants ; sans cela, les données v1 sont rejetées en toute sécurité. Voir « Migrer depuis la v1 ».

Trois premières couches de peinture

1. SSR/SSG génère d'abord des variables statiques générées à partir d'un thème par défaut fiable et entièrement résolu.
2. Exécutez createBootstrapStorageScript dans head ou appelez bootstrapTheme avant un montage Vite.
3. Le fournisseur de framework ou le runtime revalide tous les états et en prend possession après le démarrage.

import { createBootstrapStorageScript } from "@oriatheme/runtime-dom";

const bootstrapScript = createBootstrapStorageScript({ contract: { name: "oria-standard", version: 2 } });
// In a Next Server Component head:
<script id="oria-theme-bootstrap" dangerouslySetInnerHTML={{ __html: bootstrapScript }} />

Seules les actions explicites sont animées

Transmettez l’animation pour les appels setTheme ou setAppearance déclenchés par l’utilisateur. Bootstrap, la restauration, les modifications du système et la synchronisation des tableaux croisés commutent toujours de manière atomique sans animation ; respecter les mouvements réduits.