API參考·瀏覽器運行時

@oriatheme/runtime-dom

瀏覽器外部儲存、原子 DOM 應用程式、持久性、Bootstrap 和視圖轉換。

包裝及環境

SSR-安全進口； start、Storage 和 DOM 寫入僅在瀏覽器中運作。

bash

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

bash

npm install @oriatheme/presets @oriatheme/runtime-dom

bash

yarn add @oriatheme/presets @oriatheme/runtime-dom

bash

bun add @oriatheme/presets @oriatheme/runtime-dom

使用消費者專案已經選擇的套件管理器和鎖定檔案。範例僅使用包根匯出；不要從 src、dist 或註冊表範本深度匯入。

工廠和首次油漆 API

出口	簽名	描述
`createOriaThemeRuntime`	`(config: OriaThemeConfig) => OriaThemeRuntime`	建立 SSR 安全儲存和客戶端 DOM 執行時間。
`bootstrapTheme`	`(options?: BootstrapOptions) => void`	在框架安裝之前應用一個有效的活動快照。
`createBootstrapScript`	`(options: BootstrapOptions) => string`	為呼叫者提供的快照建立一個獨立的腳本。
`createBootstrapStorageScript`	`(options?) => string`	建立頭部安全的 LocalStorage 開機腳本。

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`	應用有效的記憶體中預覽； dispose 恢復正式狀態。
`exportTheme / importTheme`	`(id) => string / (json, options?) => ThemeDefinition`	匯出已儲存的主題或匯入經過充分驗證的自訂主題。
`reset`	`() => void`	將運行時首選項和自訂狀態返回其初始配置。

重要類型和邊界

OriaThemeConfig 需要預設和defaultThemeId；合約預設為 oria-standard@2，並且只有明確註冊的遷移條目才接受持久化的 v1 主題（否則安全拒絕）。 BootstrapOptions.contract 在聲明時僅恢復完全符合的快照。 ThemeSnapshot 公開首選項、resolvedMode、resolvedTheme、預設/自訂清單和錯誤。 ThemeStorage 可以取代預設的持久性，而 ThemeChangeOptions.animate 僅適用於明確使用者操作。堅持外觀，從未解決模式。