@djvlc/runtime-host-react 1.1.0

package/dist/index.cjs

@@ -0,0 +1,485 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DJVProvider: () => DJVProvider,
+  DJVRenderer: () => DJVRenderer,
+  RuntimeContext: () => RuntimeContext,
+  RuntimeProvider: () => RuntimeProvider,
+  useAction: () => useAction,
+  useDJVRuntime: () => useDJVRuntime,
+  useData: () => useData,
+  useHostApi: () => useHostApi,
+  useQuery: () => useQuery,
+  useReactRuntime: () => useReactRuntime,
+  useRuntimeContext: () => useRuntimeContext,
+  useRuntimeEvent: () => useRuntimeEvent,
+  useRuntimeState: () => useRuntimeState,
+  useRuntimeStateWritable: () => useRuntimeStateWritable
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/react-runtime.ts
+var import_react = require("react");
+var import_runtime_core = require("@djvlc/runtime-core");
+function useReactRuntime(options) {
+  const [runtime, setRuntime] = (0, import_react.useState)(null);
+  const [loading, setLoading] = (0, import_react.useState)(true);
+  const [phase, setPhase] = (0, import_react.useState)("idle");
+  const [page, setPage] = (0, import_react.useState)(null);
+  const [error, setError] = (0, import_react.useState)(null);
+  const [hostApi, setHostApi] = (0, import_react.useState)(null);
+  const runtimeRef = (0, import_react.useRef)(null);
+  const init = (0, import_react.useCallback)(async () => {
+    const container = options.containerRef?.current;
+    if (!container) {
+      throw new Error("Container element not found");
+    }
+    const runtimeInstance = (0, import_runtime_core.createRuntime)({
+      ...options,
+      container,
+      onError: (err) => {
+        setError(err);
+        options.onError?.(err);
+      },
+      onEvent: (event) => {
+        options.onEvent?.(event);
+      }
+    });
+    runtimeRef.current = runtimeInstance;
+    setRuntime(runtimeInstance);
+    runtimeInstance.onStateChange((state) => {
+      setPhase(state.phase);
+      setLoading(state.phase !== "ready" && state.phase !== "error");
+      if (state.page) {
+        setPage(state.page);
+      }
+      if (state.error) {
+        setError(state.error);
+      }
+    });
+    await runtimeInstance.init();
+    setHostApi(runtimeInstance.getHostApi());
+  }, [options]);
+  const load = (0, import_react.useCallback)(async () => {
+    if (!runtimeRef.current) {
+      throw new Error("Runtime not initialized");
+    }
+    const result = await runtimeRef.current.load();
+    setPage(result);
+    setHostApi(runtimeRef.current.getHostApi());
+    return result;
+  }, []);
+  const render = (0, import_react.useCallback)(async () => {
+    if (!runtimeRef.current) {
+      throw new Error("Runtime not initialized");
+    }
+    await runtimeRef.current.render();
+    setLoading(false);
+  }, []);
+  const destroy = (0, import_react.useCallback)(() => {
+    runtimeRef.current?.destroy();
+    runtimeRef.current = null;
+    setRuntime(null);
+    setHostApi(null);
+    setPage(null);
+    setError(null);
+    setPhase("idle");
+    setLoading(true);
+  }, []);
+  const setVariable = (0, import_react.useCallback)((key, value) => {
+    runtimeRef.current?.setVariable(key, value);
+  }, []);
+  const refreshData = (0, import_react.useCallback)(async (queryId) => {
+    await runtimeRef.current?.refreshData(queryId);
+  }, []);
+  return {
+    runtime,
+    loading,
+    phase,
+    page,
+    error,
+    hostApi,
+    init,
+    load,
+    render,
+    destroy,
+    setVariable,
+    refreshData
+  };
+}
+
+// src/context.tsx
+var import_react2 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var defaultState = {
+  phase: "idle",
+  page: null,
+  variables: {},
+  queries: {},
+  components: /* @__PURE__ */ new Map(),
+  error: null,
+  destroyed: false
+};
+var RuntimeContext = (0, import_react2.createContext)({
+  runtime: null,
+  state: defaultState,
+  hostApi: null
+});
+function RuntimeProvider({
+  runtime,
+  state,
+  hostApi,
+  children
+}) {
+  const value = {
+    runtime,
+    state,
+    hostApi
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RuntimeContext.Provider, { value, children });
+}
+function useRuntimeContext() {
+  const context = (0, import_react2.useContext)(RuntimeContext);
+  return context;
+}
+
+// src/components/DJVRenderer.tsx
+var import_react3 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function DJVRenderer({
+  pageUid,
+  apiBaseUrl,
+  cdnBaseUrl,
+  channel = "prod",
+  userId,
+  deviceId,
+  authToken,
+  previewToken,
+  debug = false,
+  enableSRI = true,
+  onLoad,
+  onError,
+  onReady,
+  loadingComponent,
+  errorComponent,
+  children,
+  className,
+  style
+}) {
+  const containerRef = (0, import_react3.useRef)(null);
+  const [state, setState] = (0, import_react3.useState)({
+    phase: "idle",
+    page: null,
+    variables: {},
+    queries: {},
+    components: /* @__PURE__ */ new Map(),
+    error: null,
+    destroyed: false
+  });
+  const options = {
+    pageUid,
+    apiBaseUrl,
+    cdnBaseUrl,
+    channel,
+    userId,
+    deviceId,
+    authToken,
+    previewToken,
+    debug,
+    enableSRI,
+    containerRef,
+    onError: (error2) => {
+      onError?.(error2);
+    }
+  };
+  const {
+    runtime,
+    loading,
+    phase: _phase,
+    page: _page,
+    error,
+    hostApi,
+    init,
+    load,
+    render,
+    destroy
+  } = useReactRuntime(options);
+  void _phase;
+  void _page;
+  const initAndLoad = (0, import_react3.useCallback)(async () => {
+    if (!containerRef.current) return;
+    try {
+      await init();
+      const pageData = await load();
+      onLoad?.(pageData);
+      await render();
+      onReady?.();
+      if (runtime) {
+        runtime.onStateChange((newState) => {
+          setState(newState);
+        });
+      }
+    } catch (err) {
+    }
+  }, [init, load, render, runtime, onLoad, onReady]);
+  (0, import_react3.useEffect)(() => {
+    initAndLoad();
+    return () => {
+      destroy();
+    };
+  }, [pageUid]);
+  const renderLoading = () => {
+    if (!loading) return null;
+    return loadingComponent || /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "djvlc-loading", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "djvlc-loading-spinner" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "\u52A0\u8F7D\u4E2D..." })
+    ] });
+  };
+  const renderError = () => {
+    if (!error) return null;
+    if (typeof errorComponent === "function") {
+      return errorComponent(error);
+    }
+    return errorComponent || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "djvlc-error", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+      "\u52A0\u8F7D\u5931\u8D25\uFF1A",
+      error.message
+    ] }) });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RuntimeProvider, { runtime, state, hostApi, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: `djvlc-renderer ${className || ""}`,
+      style,
+      children: [
+        renderLoading(),
+        renderError(),
+        children
+      ]
+    }
+  ) });
+}
+
+// src/components/DJVProvider.tsx
+var import_react4 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function DJVProvider({
+  runtime,
+  hostApi,
+  children
+}) {
+  const [state, setState] = (0, import_react4.useState)(
+    runtime?.getState() || {
+      phase: "idle",
+      page: null,
+      variables: {},
+      queries: {},
+      components: /* @__PURE__ */ new Map(),
+      error: null,
+      destroyed: false
+    }
+  );
+  (0, import_react4.useEffect)(() => {
+    if (!runtime) return;
+    const unsubscribe = runtime.onStateChange((newState) => {
+      setState(newState);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [runtime]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RuntimeProvider, { runtime, state, hostApi, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "djvlc-provider", children }) });
+}
+
+// src/hooks/useDJVRuntime.ts
+var import_react5 = require("react");
+function useDJVRuntime() {
+  const context = useRuntimeContext();
+  const loading = (0, import_react5.useMemo)(() => {
+    const phase = context.state.phase;
+    return phase !== "ready" && phase !== "error";
+  }, [context.state.phase]);
+  return {
+    runtime: context.runtime,
+    state: context.state,
+    loading,
+    phase: context.state.phase,
+    error: context.state.error,
+    page: context.state.page
+  };
+}
+function useHostApi() {
+  const context = useRuntimeContext();
+  if (!context.hostApi) {
+    throw new Error("HostAPI not available. Make sure runtime is initialized.");
+  }
+  return context.hostApi;
+}
+function useRuntimeState(key) {
+  const context = useRuntimeContext();
+  return context.state.variables[key];
+}
+function useRuntimeStateWritable(key, defaultValue) {
+  const context = useRuntimeContext();
+  const value = context.state.variables[key] ?? defaultValue;
+  const setValue = (0, import_react5.useCallback)(
+    (newValue) => {
+      context.runtime?.setVariable(key, newValue);
+    },
+    [context.runtime, key]
+  );
+  return [value, setValue];
+}
+function useQuery(queryId) {
+  const context = useRuntimeContext();
+  const [loading, setLoading] = (0, import_react5.useState)(false);
+  const [error, setError] = (0, import_react5.useState)(null);
+  const data = context.state.queries[queryId];
+  const refetch = (0, import_react5.useCallback)(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      await context.runtime?.refreshData(queryId);
+    } catch (e) {
+      setError(e);
+    } finally {
+      setLoading(false);
+    }
+  }, [context.runtime, queryId]);
+  return {
+    data,
+    loading,
+    error,
+    refetch
+  };
+}
+function useAction(actionType) {
+  const context = useRuntimeContext();
+  const [loading, setLoading] = (0, import_react5.useState)(false);
+  const [result, setResult] = (0, import_react5.useState)();
+  const [error, setError] = (0, import_react5.useState)(null);
+  const execute = (0, import_react5.useCallback)(
+    async (params) => {
+      const hostApi = context.hostApi;
+      if (!hostApi) {
+        throw new Error("HostAPI not available");
+      }
+      setLoading(true);
+      setError(null);
+      try {
+        const response = await hostApi.executeAction(
+          actionType,
+          params
+        );
+        if (response.success) {
+          setResult(response.data);
+          return response.data;
+        } else {
+          throw new Error(response.message || "Action failed");
+        }
+      } catch (e) {
+        setError(e);
+        throw e;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [context.hostApi, actionType]
+  );
+  return {
+    execute,
+    loading,
+    result,
+    error
+  };
+}
+function useData(queryId, params, options) {
+  const context = useRuntimeContext();
+  const [data, setData] = (0, import_react5.useState)();
+  const [loading, setLoading] = (0, import_react5.useState)(false);
+  const [error, setError] = (0, import_react5.useState)(null);
+  const refetch = (0, import_react5.useCallback)(
+    async (newParams) => {
+      const hostApi = context.hostApi;
+      if (!hostApi) {
+        throw new Error("HostAPI not available");
+      }
+      setLoading(true);
+      setError(null);
+      try {
+        const response = await hostApi.requestData(
+          queryId,
+          newParams || params
+        );
+        if (response.success) {
+          setData(response.data);
+        } else {
+          throw new Error(response.message || "Query failed");
+        }
+      } catch (e) {
+        setError(e);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [context.hostApi, queryId, params]
+  );
+  (0, import_react5.useEffect)(() => {
+    if (options?.immediate !== false && context.hostApi) {
+      refetch();
+    }
+  }, [context.hostApi]);
+  return {
+    data,
+    loading,
+    error,
+    refetch
+  };
+}
+function useRuntimeEvent(eventType, handler) {
+  const context = useRuntimeContext();
+  (0, import_react5.useEffect)(() => {
+    const unsubscribe = context.runtime?.on(eventType, (event) => {
+      handler(event.data);
+    });
+    return () => {
+      unsubscribe?.();
+    };
+  }, [context.runtime, eventType, handler]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DJVProvider,
+  DJVRenderer,
+  RuntimeContext,
+  RuntimeProvider,
+  useAction,
+  useDJVRuntime,
+  useData,
+  useHostApi,
+  useQuery,
+  useReactRuntime,
+  useRuntimeContext,
+  useRuntimeEvent,
+  useRuntimeState,
+  useRuntimeStateWritable
+});

package/dist/index.d.cts

@@ -0,0 +1,221 @@
+import { RuntimeOptions, DjvlcRuntime, RuntimePhase, PageResolveResult, RuntimeError, HostAPI, RuntimeState } from '@djvlc/runtime-core';
+export { HostAPI, PageResolveResult, RuntimeError, RuntimeOptions, RuntimePhase, RuntimeState } from '@djvlc/runtime-core';
+import * as react from 'react';
+import react__default, { ReactNode } from 'react';
+
+/**
+ * React 运行时封装
+ * 将核心运行时封装为 React 友好的 API
+ */
+
+/**
+ * React 运行时选项
+ */
+interface ReactRuntimeOptions extends Omit<RuntimeOptions, 'container'> {
+    /** 容器元素引用 */
+    containerRef?: React.RefObject<HTMLElement>;
+}
+/**
+ * React 运行时返回值
+ */
+interface ReactRuntimeReturn {
+    /** 运行时实例 */
+    runtime: DjvlcRuntime | null;
+    /** 加载状态 */
+    loading: boolean;
+    /** 当前阶段 */
+    phase: RuntimePhase;
+    /** 页面数据 */
+    page: PageResolveResult | null;
+    /** 错误信息 */
+    error: RuntimeError | null;
+    /** Host API */
+    hostApi: HostAPI | null;
+    /** 初始化 */
+    init: () => Promise<void>;
+    /** 加载页面 */
+    load: () => Promise<PageResolveResult>;
+    /** 渲染页面 */
+    render: () => Promise<void>;
+    /** 销毁 */
+    destroy: () => void;
+    /** 设置变量 */
+    setVariable: (key: string, value: unknown) => void;
+    /** 刷新数据 */
+    refreshData: (queryId: string) => Promise<void>;
+}
+/**
+ * 使用 React 运行时 Hook
+ */
+declare function useReactRuntime(options: ReactRuntimeOptions): ReactRuntimeReturn;
+
+/**
+ * 运行时上下文值
+ */
+interface RuntimeContextValue {
+    runtime: DjvlcRuntime | null;
+    state: RuntimeState;
+    hostApi: HostAPI | null;
+}
+/**
+ * 运行时上下文
+ */
+declare const RuntimeContext: react.Context<RuntimeContextValue>;
+/**
+ * Runtime Provider Props
+ */
+interface RuntimeProviderProps {
+    /** 运行时实例 */
+    runtime: DjvlcRuntime | null;
+    /** 运行时状态 */
+    state: RuntimeState;
+    /** Host API */
+    hostApi: HostAPI | null;
+    /** 子元素 */
+    children: ReactNode;
+}
+/**
+ * Runtime Provider 组件
+ */
+declare function RuntimeProvider({ runtime, state, hostApi, children, }: RuntimeProviderProps): JSX.Element;
+/**
+ * 使用运行时上下文
+ */
+declare function useRuntimeContext(): RuntimeContextValue;
+
+/**
+ * DJV 渲染器组件
+ * React 组件，用于渲染低代码页面
+ */
+
+/**
+ * DJV 渲染器 Props
+ */
+interface DJVRendererProps {
+    /** 页面 UID */
+    pageUid: string;
+    /** API 基础 URL */
+    apiBaseUrl: string;
+    /** CDN 基础 URL */
+    cdnBaseUrl: string;
+    /** 渠道 */
+    channel?: 'preview' | 'prod' | 'gray';
+    /** 用户 ID */
+    userId?: string;
+    /** 设备 ID */
+    deviceId?: string;
+    /** 认证 Token */
+    authToken?: string;
+    /** 预览 Token */
+    previewToken?: string;
+    /** 调试模式 */
+    debug?: boolean;
+    /** 是否启用 SRI */
+    enableSRI?: boolean;
+    /** 加载完成回调 */
+    onLoad?: (page: PageResolveResult) => void;
+    /** 错误回调 */
+    onError?: (error: RuntimeError) => void;
+    /** 就绪回调 */
+    onReady?: () => void;
+    /** 加载中显示 */
+    loadingComponent?: ReactNode;
+    /** 错误显示 */
+    errorComponent?: ReactNode | ((error: RuntimeError) => ReactNode);
+    /** 子元素 */
+    children?: ReactNode;
+    /** 容器类名 */
+    className?: string;
+    /** 容器样式 */
+    style?: react__default.CSSProperties;
+}
+/**
+ * DJV 渲染器组件
+ */
+declare function DJVRenderer({ pageUid, apiBaseUrl, cdnBaseUrl, channel, userId, deviceId, authToken, previewToken, debug, enableSRI, onLoad, onError, onReady, loadingComponent, errorComponent, children, className, style, }: DJVRendererProps): JSX.Element;
+
+/**
+ * DJV Provider 组件
+ * 提供运行时上下文给子组件
+ */
+
+/**
+ * DJV Provider Props
+ */
+interface DJVProviderProps {
+    /** 运行时实例 */
+    runtime: DjvlcRuntime | null;
+    /** Host API */
+    hostApi: HostAPI | null;
+    /** 子元素 */
+    children: ReactNode;
+}
+/**
+ * DJV Provider 组件
+ * 用于手动控制运行时时使用
+ */
+declare function DJVProvider({ runtime, hostApi, children, }: DJVProviderProps): JSX.Element;
+
+/**
+ * React Hooks
+ * 运行时相关的 React Hooks
+ */
+
+/**
+ * 使用 DJV 运行时
+ */
+declare function useDJVRuntime(): {
+    runtime: RuntimeContextValue['runtime'];
+    state: RuntimeContextValue['state'];
+    loading: boolean;
+    phase: RuntimePhase;
+    error: RuntimeError | null;
+    page: PageResolveResult | null;
+};
+/**
+ * 使用 Host API
+ */
+declare function useHostApi(): HostAPI;
+/**
+ * 使用运行时状态
+ */
+declare function useRuntimeState<T = unknown>(key: string): T | undefined;
+/**
+ * 使用可写状态
+ */
+declare function useRuntimeStateWritable<T = unknown>(key: string, defaultValue?: T): [T, (value: T) => void];
+/**
+ * 使用查询结果
+ */
+declare function useQuery<T = unknown>(queryId: string): {
+    data: T | undefined;
+    loading: boolean;
+    error: Error | null;
+    refetch: () => Promise<void>;
+};
+/**
+ * 使用动作
+ */
+declare function useAction<T = unknown, P = Record<string, unknown>>(actionType: string): {
+    execute: (params?: P) => Promise<T | undefined>;
+    loading: boolean;
+    result: T | undefined;
+    error: Error | null;
+};
+/**
+ * 使用数据请求
+ */
+declare function useData<T = unknown, P = Record<string, unknown>>(queryId: string, params?: P, options?: {
+    immediate?: boolean;
+}): {
+    data: T | undefined;
+    loading: boolean;
+    error: Error | null;
+    refetch: (newParams?: P) => Promise<void>;
+};
+/**
+ * 使用事件监听
+ */
+declare function useRuntimeEvent<T = unknown>(eventType: string, handler: (data: T) => void): void;
+
+export { DJVProvider, type DJVProviderProps, DJVRenderer, type DJVRendererProps, type ReactRuntimeOptions, type ReactRuntimeReturn, RuntimeContext, type RuntimeContextValue, RuntimeProvider, type RuntimeProviderProps, useAction, useDJVRuntime, useData, useHostApi, useQuery, useReactRuntime, useRuntimeContext, useRuntimeEvent, useRuntimeState, useRuntimeStateWritable };

package/dist/index.d.ts

@@ -0,0 +1,221 @@
+import { RuntimeOptions, DjvlcRuntime, RuntimePhase, PageResolveResult, RuntimeError, HostAPI, RuntimeState } from '@djvlc/runtime-core';
+export { HostAPI, PageResolveResult, RuntimeError, RuntimeOptions, RuntimePhase, RuntimeState } from '@djvlc/runtime-core';
+import * as react from 'react';
+import react__default, { ReactNode } from 'react';
+
+/**
+ * React 运行时封装
+ * 将核心运行时封装为 React 友好的 API
+ */
+
+/**
+ * React 运行时选项
+ */
+interface ReactRuntimeOptions extends Omit<RuntimeOptions, 'container'> {
+    /** 容器元素引用 */
+    containerRef?: React.RefObject<HTMLElement>;
+}
+/**
+ * React 运行时返回值
+ */
+interface ReactRuntimeReturn {
+    /** 运行时实例 */
+    runtime: DjvlcRuntime | null;
+    /** 加载状态 */
+    loading: boolean;
+    /** 当前阶段 */
+    phase: RuntimePhase;
+    /** 页面数据 */
+    page: PageResolveResult | null;
+    /** 错误信息 */
+    error: RuntimeError | null;
+    /** Host API */
+    hostApi: HostAPI | null;
+    /** 初始化 */
+    init: () => Promise<void>;
+    /** 加载页面 */
+    load: () => Promise<PageResolveResult>;
+    /** 渲染页面 */
+    render: () => Promise<void>;
+    /** 销毁 */
+    destroy: () => void;
+    /** 设置变量 */
+    setVariable: (key: string, value: unknown) => void;
+    /** 刷新数据 */
+    refreshData: (queryId: string) => Promise<void>;
+}
+/**
+ * 使用 React 运行时 Hook
+ */
+declare function useReactRuntime(options: ReactRuntimeOptions): ReactRuntimeReturn;
+
+/**
+ * 运行时上下文值
+ */
+interface RuntimeContextValue {
+    runtime: DjvlcRuntime | null;
+    state: RuntimeState;
+    hostApi: HostAPI | null;
+}
+/**
+ * 运行时上下文
+ */
+declare const RuntimeContext: react.Context<RuntimeContextValue>;
+/**
+ * Runtime Provider Props
+ */
+interface RuntimeProviderProps {
+    /** 运行时实例 */
+    runtime: DjvlcRuntime | null;
+    /** 运行时状态 */
+    state: RuntimeState;
+    /** Host API */
+    hostApi: HostAPI | null;
+    /** 子元素 */
+    children: ReactNode;
+}
+/**
+ * Runtime Provider 组件
+ */
+declare function RuntimeProvider({ runtime, state, hostApi, children, }: RuntimeProviderProps): JSX.Element;
+/**
+ * 使用运行时上下文
+ */
+declare function useRuntimeContext(): RuntimeContextValue;
+
+/**
+ * DJV 渲染器组件
+ * React 组件，用于渲染低代码页面
+ */
+
+/**
+ * DJV 渲染器 Props
+ */
+interface DJVRendererProps {
+    /** 页面 UID */
+    pageUid: string;
+    /** API 基础 URL */
+    apiBaseUrl: string;
+    /** CDN 基础 URL */
+    cdnBaseUrl: string;
+    /** 渠道 */
+    channel?: 'preview' | 'prod' | 'gray';
+    /** 用户 ID */
+    userId?: string;
+    /** 设备 ID */
+    deviceId?: string;
+    /** 认证 Token */
+    authToken?: string;
+    /** 预览 Token */
+    previewToken?: string;
+    /** 调试模式 */
+    debug?: boolean;
+    /** 是否启用 SRI */
+    enableSRI?: boolean;
+    /** 加载完成回调 */
+    onLoad?: (page: PageResolveResult) => void;
+    /** 错误回调 */
+    onError?: (error: RuntimeError) => void;
+    /** 就绪回调 */
+    onReady?: () => void;
+    /** 加载中显示 */
+    loadingComponent?: ReactNode;
+    /** 错误显示 */
+    errorComponent?: ReactNode | ((error: RuntimeError) => ReactNode);
+    /** 子元素 */
+    children?: ReactNode;
+    /** 容器类名 */
+    className?: string;
+    /** 容器样式 */
+    style?: react__default.CSSProperties;
+}
+/**
+ * DJV 渲染器组件
+ */
+declare function DJVRenderer({ pageUid, apiBaseUrl, cdnBaseUrl, channel, userId, deviceId, authToken, previewToken, debug, enableSRI, onLoad, onError, onReady, loadingComponent, errorComponent, children, className, style, }: DJVRendererProps): JSX.Element;
+
+/**
+ * DJV Provider 组件
+ * 提供运行时上下文给子组件
+ */
+
+/**
+ * DJV Provider Props
+ */
+interface DJVProviderProps {
+    /** 运行时实例 */
+    runtime: DjvlcRuntime | null;
+    /** Host API */
+    hostApi: HostAPI | null;
+    /** 子元素 */
+    children: ReactNode;
+}
+/**
+ * DJV Provider 组件
+ * 用于手动控制运行时时使用
+ */
+declare function DJVProvider({ runtime, hostApi, children, }: DJVProviderProps): JSX.Element;
+
+/**
+ * React Hooks
+ * 运行时相关的 React Hooks
+ */
+
+/**
+ * 使用 DJV 运行时
+ */
+declare function useDJVRuntime(): {
+    runtime: RuntimeContextValue['runtime'];
+    state: RuntimeContextValue['state'];
+    loading: boolean;
+    phase: RuntimePhase;
+    error: RuntimeError | null;
+    page: PageResolveResult | null;
+};
+/**
+ * 使用 Host API
+ */
+declare function useHostApi(): HostAPI;
+/**
+ * 使用运行时状态
+ */
+declare function useRuntimeState<T = unknown>(key: string): T | undefined;
+/**
+ * 使用可写状态
+ */
+declare function useRuntimeStateWritable<T = unknown>(key: string, defaultValue?: T): [T, (value: T) => void];
+/**
+ * 使用查询结果
+ */
+declare function useQuery<T = unknown>(queryId: string): {
+    data: T | undefined;
+    loading: boolean;
+    error: Error | null;
+    refetch: () => Promise<void>;
+};
+/**
+ * 使用动作
+ */
+declare function useAction<T = unknown, P = Record<string, unknown>>(actionType: string): {
+    execute: (params?: P) => Promise<T | undefined>;
+    loading: boolean;
+    result: T | undefined;
+    error: Error | null;
+};
+/**
+ * 使用数据请求
+ */
+declare function useData<T = unknown, P = Record<string, unknown>>(queryId: string, params?: P, options?: {
+    immediate?: boolean;
+}): {
+    data: T | undefined;
+    loading: boolean;
+    error: Error | null;
+    refetch: (newParams?: P) => Promise<void>;
+};
+/**
+ * 使用事件监听
+ */
+declare function useRuntimeEvent<T = unknown>(eventType: string, handler: (data: T) => void): void;
+
+export { DJVProvider, type DJVProviderProps, DJVRenderer, type DJVRendererProps, type ReactRuntimeOptions, type ReactRuntimeReturn, RuntimeContext, type RuntimeContextValue, RuntimeProvider, type RuntimeProviderProps, useAction, useDJVRuntime, useData, useHostApi, useQuery, useReactRuntime, useRuntimeContext, useRuntimeEvent, useRuntimeState, useRuntimeStateWritable };

package/dist/index.js

@@ -0,0 +1,447 @@
+// src/react-runtime.ts
+import { useState, useCallback, useRef } from "react";
+import {
+  createRuntime
+} from "@djvlc/runtime-core";
+function useReactRuntime(options) {
+  const [runtime, setRuntime] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [phase, setPhase] = useState("idle");
+  const [page, setPage] = useState(null);
+  const [error, setError] = useState(null);
+  const [hostApi, setHostApi] = useState(null);
+  const runtimeRef = useRef(null);
+  const init = useCallback(async () => {
+    const container = options.containerRef?.current;
+    if (!container) {
+      throw new Error("Container element not found");
+    }
+    const runtimeInstance = createRuntime({
+      ...options,
+      container,
+      onError: (err) => {
+        setError(err);
+        options.onError?.(err);
+      },
+      onEvent: (event) => {
+        options.onEvent?.(event);
+      }
+    });
+    runtimeRef.current = runtimeInstance;
+    setRuntime(runtimeInstance);
+    runtimeInstance.onStateChange((state) => {
+      setPhase(state.phase);
+      setLoading(state.phase !== "ready" && state.phase !== "error");
+      if (state.page) {
+        setPage(state.page);
+      }
+      if (state.error) {
+        setError(state.error);
+      }
+    });
+    await runtimeInstance.init();
+    setHostApi(runtimeInstance.getHostApi());
+  }, [options]);
+  const load = useCallback(async () => {
+    if (!runtimeRef.current) {
+      throw new Error("Runtime not initialized");
+    }
+    const result = await runtimeRef.current.load();
+    setPage(result);
+    setHostApi(runtimeRef.current.getHostApi());
+    return result;
+  }, []);
+  const render = useCallback(async () => {
+    if (!runtimeRef.current) {
+      throw new Error("Runtime not initialized");
+    }
+    await runtimeRef.current.render();
+    setLoading(false);
+  }, []);
+  const destroy = useCallback(() => {
+    runtimeRef.current?.destroy();
+    runtimeRef.current = null;
+    setRuntime(null);
+    setHostApi(null);
+    setPage(null);
+    setError(null);
+    setPhase("idle");
+    setLoading(true);
+  }, []);
+  const setVariable = useCallback((key, value) => {
+    runtimeRef.current?.setVariable(key, value);
+  }, []);
+  const refreshData = useCallback(async (queryId) => {
+    await runtimeRef.current?.refreshData(queryId);
+  }, []);
+  return {
+    runtime,
+    loading,
+    phase,
+    page,
+    error,
+    hostApi,
+    init,
+    load,
+    render,
+    destroy,
+    setVariable,
+    refreshData
+  };
+}
+
+// src/context.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var defaultState = {
+  phase: "idle",
+  page: null,
+  variables: {},
+  queries: {},
+  components: /* @__PURE__ */ new Map(),
+  error: null,
+  destroyed: false
+};
+var RuntimeContext = createContext({
+  runtime: null,
+  state: defaultState,
+  hostApi: null
+});
+function RuntimeProvider({
+  runtime,
+  state,
+  hostApi,
+  children
+}) {
+  const value = {
+    runtime,
+    state,
+    hostApi
+  };
+  return /* @__PURE__ */ jsx(RuntimeContext.Provider, { value, children });
+}
+function useRuntimeContext() {
+  const context = useContext(RuntimeContext);
+  return context;
+}
+
+// src/components/DJVRenderer.tsx
+import { useRef as useRef2, useEffect, useState as useState2, useCallback as useCallback2 } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function DJVRenderer({
+  pageUid,
+  apiBaseUrl,
+  cdnBaseUrl,
+  channel = "prod",
+  userId,
+  deviceId,
+  authToken,
+  previewToken,
+  debug = false,
+  enableSRI = true,
+  onLoad,
+  onError,
+  onReady,
+  loadingComponent,
+  errorComponent,
+  children,
+  className,
+  style
+}) {
+  const containerRef = useRef2(null);
+  const [state, setState] = useState2({
+    phase: "idle",
+    page: null,
+    variables: {},
+    queries: {},
+    components: /* @__PURE__ */ new Map(),
+    error: null,
+    destroyed: false
+  });
+  const options = {
+    pageUid,
+    apiBaseUrl,
+    cdnBaseUrl,
+    channel,
+    userId,
+    deviceId,
+    authToken,
+    previewToken,
+    debug,
+    enableSRI,
+    containerRef,
+    onError: (error2) => {
+      onError?.(error2);
+    }
+  };
+  const {
+    runtime,
+    loading,
+    phase: _phase,
+    page: _page,
+    error,
+    hostApi,
+    init,
+    load,
+    render,
+    destroy
+  } = useReactRuntime(options);
+  void _phase;
+  void _page;
+  const initAndLoad = useCallback2(async () => {
+    if (!containerRef.current) return;
+    try {
+      await init();
+      const pageData = await load();
+      onLoad?.(pageData);
+      await render();
+      onReady?.();
+      if (runtime) {
+        runtime.onStateChange((newState) => {
+          setState(newState);
+        });
+      }
+    } catch (err) {
+    }
+  }, [init, load, render, runtime, onLoad, onReady]);
+  useEffect(() => {
+    initAndLoad();
+    return () => {
+      destroy();
+    };
+  }, [pageUid]);
+  const renderLoading = () => {
+    if (!loading) return null;
+    return loadingComponent || /* @__PURE__ */ jsxs("div", { className: "djvlc-loading", children: [
+      /* @__PURE__ */ jsx2("div", { className: "djvlc-loading-spinner" }),
+      /* @__PURE__ */ jsx2("span", { children: "\u52A0\u8F7D\u4E2D..." })
+    ] });
+  };
+  const renderError = () => {
+    if (!error) return null;
+    if (typeof errorComponent === "function") {
+      return errorComponent(error);
+    }
+    return errorComponent || /* @__PURE__ */ jsx2("div", { className: "djvlc-error", children: /* @__PURE__ */ jsxs("span", { children: [
+      "\u52A0\u8F7D\u5931\u8D25\uFF1A",
+      error.message
+    ] }) });
+  };
+  return /* @__PURE__ */ jsx2(RuntimeProvider, { runtime, state, hostApi, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `djvlc-renderer ${className || ""}`,
+      style,
+      children: [
+        renderLoading(),
+        renderError(),
+        children
+      ]
+    }
+  ) });
+}
+
+// src/components/DJVProvider.tsx
+import { useState as useState3, useEffect as useEffect2 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function DJVProvider({
+  runtime,
+  hostApi,
+  children
+}) {
+  const [state, setState] = useState3(
+    runtime?.getState() || {
+      phase: "idle",
+      page: null,
+      variables: {},
+      queries: {},
+      components: /* @__PURE__ */ new Map(),
+      error: null,
+      destroyed: false
+    }
+  );
+  useEffect2(() => {
+    if (!runtime) return;
+    const unsubscribe = runtime.onStateChange((newState) => {
+      setState(newState);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [runtime]);
+  return /* @__PURE__ */ jsx3(RuntimeProvider, { runtime, state, hostApi, children: /* @__PURE__ */ jsx3("div", { className: "djvlc-provider", children }) });
+}
+
+// src/hooks/useDJVRuntime.ts
+import { useCallback as useCallback3, useState as useState4, useEffect as useEffect3, useMemo } from "react";
+function useDJVRuntime() {
+  const context = useRuntimeContext();
+  const loading = useMemo(() => {
+    const phase = context.state.phase;
+    return phase !== "ready" && phase !== "error";
+  }, [context.state.phase]);
+  return {
+    runtime: context.runtime,
+    state: context.state,
+    loading,
+    phase: context.state.phase,
+    error: context.state.error,
+    page: context.state.page
+  };
+}
+function useHostApi() {
+  const context = useRuntimeContext();
+  if (!context.hostApi) {
+    throw new Error("HostAPI not available. Make sure runtime is initialized.");
+  }
+  return context.hostApi;
+}
+function useRuntimeState(key) {
+  const context = useRuntimeContext();
+  return context.state.variables[key];
+}
+function useRuntimeStateWritable(key, defaultValue) {
+  const context = useRuntimeContext();
+  const value = context.state.variables[key] ?? defaultValue;
+  const setValue = useCallback3(
+    (newValue) => {
+      context.runtime?.setVariable(key, newValue);
+    },
+    [context.runtime, key]
+  );
+  return [value, setValue];
+}
+function useQuery(queryId) {
+  const context = useRuntimeContext();
+  const [loading, setLoading] = useState4(false);
+  const [error, setError] = useState4(null);
+  const data = context.state.queries[queryId];
+  const refetch = useCallback3(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      await context.runtime?.refreshData(queryId);
+    } catch (e) {
+      setError(e);
+    } finally {
+      setLoading(false);
+    }
+  }, [context.runtime, queryId]);
+  return {
+    data,
+    loading,
+    error,
+    refetch
+  };
+}
+function useAction(actionType) {
+  const context = useRuntimeContext();
+  const [loading, setLoading] = useState4(false);
+  const [result, setResult] = useState4();
+  const [error, setError] = useState4(null);
+  const execute = useCallback3(
+    async (params) => {
+      const hostApi = context.hostApi;
+      if (!hostApi) {
+        throw new Error("HostAPI not available");
+      }
+      setLoading(true);
+      setError(null);
+      try {
+        const response = await hostApi.executeAction(
+          actionType,
+          params
+        );
+        if (response.success) {
+          setResult(response.data);
+          return response.data;
+        } else {
+          throw new Error(response.message || "Action failed");
+        }
+      } catch (e) {
+        setError(e);
+        throw e;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [context.hostApi, actionType]
+  );
+  return {
+    execute,
+    loading,
+    result,
+    error
+  };
+}
+function useData(queryId, params, options) {
+  const context = useRuntimeContext();
+  const [data, setData] = useState4();
+  const [loading, setLoading] = useState4(false);
+  const [error, setError] = useState4(null);
+  const refetch = useCallback3(
+    async (newParams) => {
+      const hostApi = context.hostApi;
+      if (!hostApi) {
+        throw new Error("HostAPI not available");
+      }
+      setLoading(true);
+      setError(null);
+      try {
+        const response = await hostApi.requestData(
+          queryId,
+          newParams || params
+        );
+        if (response.success) {
+          setData(response.data);
+        } else {
+          throw new Error(response.message || "Query failed");
+        }
+      } catch (e) {
+        setError(e);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [context.hostApi, queryId, params]
+  );
+  useEffect3(() => {
+    if (options?.immediate !== false && context.hostApi) {
+      refetch();
+    }
+  }, [context.hostApi]);
+  return {
+    data,
+    loading,
+    error,
+    refetch
+  };
+}
+function useRuntimeEvent(eventType, handler) {
+  const context = useRuntimeContext();
+  useEffect3(() => {
+    const unsubscribe = context.runtime?.on(eventType, (event) => {
+      handler(event.data);
+    });
+    return () => {
+      unsubscribe?.();
+    };
+  }, [context.runtime, eventType, handler]);
+}
+export {
+  DJVProvider,
+  DJVRenderer,
+  RuntimeContext,
+  RuntimeProvider,
+  useAction,
+  useDJVRuntime,
+  useData,
+  useHostApi,
+  useQuery,
+  useReactRuntime,
+  useRuntimeContext,
+  useRuntimeEvent,
+  useRuntimeState,
+  useRuntimeStateWritable
+};

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@djvlc/runtime-host-react",
+  "version": "1.1.0",
+  "description": "DJV 低代码平台 React 宿主适配器",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts --clean --external react",
+    "dev": "tsup src/index.ts --format esm,cjs --dts --watch --external react",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest",
+    "lint": "eslint src --ext .ts,.tsx",
+    "typecheck": "tsc --noEmit",
+    "clean": "rimraf dist"
+  },
+  "dependencies": {
+    "@djvlc/runtime-core": "1.0.0",
+    "@djvlc/contracts-types": "^1.4.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.0",
+    "@types/react": "^18.2.0",
+    "eslint": "^8.55.0",
+    "rimraf": "^5.0.5",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0",
+    "vitest": "^1.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0"
+  },
+  "keywords": [
+    "lowcode",
+    "runtime",
+    "react",
+    "djv"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT"
+}