OriaTheme
GitHub

アプリケーション開発者向け

Runtime、Bootstrap、およびトランジション

検証されたテーマを DOM にアトミックに適用し、再訪問者の最初のペイント設定を復元します。

ランタイムはブラウザの単一状態ソースです

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

開始後、ランタイムはシステム モード、永続性、およびクロス集計の更新を監視します。 SPA がランタイムを削除するときに destroy を呼び出します。この例の移行フィールドは、永続化された v1 カスタム テーマを受け入れる唯一の方法です。これがないと、v1 データは安全に拒否されます。 「v1 からの移行」を参照してください。

最初のペイント層は 3 層

  1. SSR/SSG は、信頼できる完全に解決されたデフォルトのテーマから生成された静的変数を最初に出力します。
  2. ヘッド内で createBootstrapStorageScript を実行するか、Vite マウントの前に bootstrapTheme を呼び出します。
  3. フレームワークのプロバイダーまたはランタイムはすべての状態を再検証し、開始後に所有権を取得します。
tsx
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 }} />

明示的なアクションのみがアニメーション化されます

ユーザーがトリガーした setTheme または setAppearance 呼び出しには animate を渡します。 Bootstrap、復元、システム変更、クロス集計同期は常にアニメーションなしでアトミックに切り替わります。動作の軽減を尊重します。

続行: カスタムテーマのライフサイクル