OriaTheme
GitHub

APIリファレンス・ブラウザランタイム

@oriatheme/runtime-dom

ブラウザ外部ストア、アトミック DOM アプリケーション、永続性、Bootstrap、およびビュー遷移。

パッケージと環境

SSR を安全にインポートできます。 start、Storage、および DOM 書き込みはブラウザーでのみ実行されます。

bash
pnpm add @oriatheme/presets @oriatheme/runtime-dom

コンシューマ プロジェクトによってすでに選択されているパッケージ マネージャーとロックファイルを使用します。例では、パッケージ ルート エクスポートのみを使用します。 src、dist、またはレジストリ テンプレートからディープ インポートしないでください。

ファクトリー API とファーストペイント API

エクスポート署名説明
createOriaThemeRuntime(config: OriaThemeConfig) => OriaThemeRuntimeSSR セーフ ストアとクライアント DOM ランタイムを作成します。
bootstrapTheme(options?: BootstrapOptions) => voidフレームワークをマウントする前に、有効なアクティブなスナップショットを 1 つ適用します。
createBootstrapScript(options: BootstrapOptions) => string呼び出し元が提供したスナップショットの自己完結型スクリプトを作成します。
createBootstrapStorageScript(options?) => stringヘッドセーフな LocalStorage ブートストラップ スクリプトを作成します。
ts
import { bootstrapTheme, createOriaThemeRuntime } from "@oriatheme/runtime-dom";
import { oriaPresetThemes } from "@oriatheme/presets";

bootstrapTheme({ contract: { name: "oria-standard", version: 2 } });
const runtime = createOriaThemeRuntime({
  presets: oriaPresetThemes,
  defaultThemeId: "oria-default",
});
runtime.start();

OriaThemeRuntime

エクスポート署名説明
start / destroy() => voidブラウザー リスナーと DOM 所有権をアタッチまたは解放します。
getSnapshot / subscribe() => ThemeSnapshot / (listener) => unsubscribe外部ストアを読むか購読します。
setTheme / setAppearance(id | mode, options?) => void既存のテーマまたはユーザー設定を選択します。明示的なアクションをアニメーション化できます。
createCustomTheme({ theme }) => ThemeDefinition完全に有効なカスタム テーマを保持します。
updateCustomTheme(id, patch, options?) => ThemeDefinition既存のカスタム テーマのみを更新します。
duplicateTheme / removeCustomTheme(id, identity) => ThemeDefinition / (id) => voidプリセット/カスタム テーマをコピーするか、カスタム テーマを削除します。
previewTheme(theme, mode?) => PreviewHandle有効なメモリ内プレビューを適用します。破棄すると正式な状態が復元されます。
exportTheme / importTheme(id) => string / (json, options?) => ThemeDefinition保存したテーマをエクスポートするか、完全に検証されたカスタム テーマをインポートします。
reset() => voidランタイム設定とカスタム状態を初期構成に戻します。

重要な種類と境界

OriaThemeConfig にはプリセットとdefaultThemeIdが必要です。コントラクトのデフォルトは oria-standard@2 であり、永続化された v1 テーマは明示的に登録された移行エントリでのみ受け入れられます (そうでない場合は安全に拒否されます)。 BootstrapOptions.contract を宣言すると、完全に一致するスナップショットのみが復元されます。 ThemeSnapshot は、設定、resolvedMode、resolvedTheme、プリセット/カスタム リスト、およびエラーを公開します。 ThemeStorage はデフォルトの永続性を置き換えることができ、ThemeChangeOptions.animate は明示的なユーザー アクションのみに使用されます。外観を保持し、決して解決されないモード。