Runtime, Bootstrap und Übergänge

Die Laufzeit ist die einzelne Statusquelle des Browsers

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");

Nach dem Start überwacht die Laufzeit Systemmodus-, Persistenz- und Kreuztabellenaktualisierungen. Rufen Sie destroy auf, wenn ein SPA die Laufzeit entfernt. Das Migrationsfeld im Beispiel ist die einzige Möglichkeit, persistente benutzerdefinierte Designs der Version 1 zu akzeptieren. Ohne sie werden v1-Daten sicher abgelehnt. Siehe „Von v1 migrieren“.

Drei erste Farbschichten

1. SSR/SSG gibt zunächst statische Variablen aus, die aus einem vertrauenswürdigen, vollständig aufgelösten Standarddesign generiert wurden.
2. Führen Sie „createBootstrapStorageScript“ im Head aus oder rufen Sie „bootstrapTheme“ vor einem Vite-Mount auf.
3. Der Framework-Anbieter oder die Laufzeit validiert den gesamten Status erneut und übernimmt nach dem Start den Besitz.

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 }} />

Es werden nur explizite Aktionen animiert

Übergeben Sie animate für vom Benutzer ausgelöste setTheme- oder setAppearance-Aufrufe. Bootstrap, Wiederherstellung, Systemänderungen und Cross-Tab-Synchronisierung wechseln immer atomar ohne Animation; Respektieren Sie die reduzierte Bewegung.