@schema-element-editor/host-sdk 2.0.0

package/dist/core.d.ts

@@ -0,0 +1,107 @@
+/**
+ * Schema Element Editor Host SDK - Core
+ * 纯 JS 核心逻辑，无框架依赖
+ */
+/**
+ * Schema 数据类型
+ * 支持所有 JSON.parse 可返回的类型
+ */
+type SchemaValue = Record<string, unknown> | unknown[] | string | number | boolean | null;
+/** postMessage 消息标识配置 */
+interface PostMessageSourceConfig {
+    /** 插件端发送消息的 source 标识 */
+    contentSource: string;
+    /** 宿主端响应消息的 source 标识 */
+    hostSource: string;
+}
+/** postMessage 消息类型配置 */
+interface PostMessageTypeConfig {
+    getSchema: string;
+    updateSchema: string;
+    checkPreview: string;
+    renderPreview: string;
+    cleanupPreview: string;
+    startRecording: string;
+    stopRecording: string;
+    schemaPush: string;
+}
+/**
+ * Schema Element Editor 配置接口
+ */
+interface SchemaElementEditorConfig {
+    /**
+     * 获取 Schema 数据
+     * @param params - 元素参数（通常是 data-id 的值）
+     * @returns Schema 数据（支持所有 JSON 类型）
+     */
+    getSchema: (params: string) => SchemaValue;
+    /**
+     * 更新 Schema 数据
+     * @param schema - 新的 Schema 数据（支持所有 JSON 类型）
+     * @param params - 元素参数
+     * @returns 是否更新成功
+     */
+    updateSchema: (schema: SchemaValue, params: string) => boolean;
+    /**
+     * 渲染预览（可选）
+     * @param schema - Schema 数据（支持所有 JSON 类型）
+     * @param containerId - 预览容器 ID
+     * @returns 清理函数（可选）
+     */
+    renderPreview?: (schema: SchemaValue, containerId: string) => (() => void) | void;
+    /** 消息标识配置（可选，有默认值） */
+    sourceConfig?: Partial<PostMessageSourceConfig>;
+    /** 消息类型配置（可选，有默认值） */
+    messageTypes?: Partial<PostMessageTypeConfig>;
+}
+/**
+ * 录制相关方法
+ */
+interface SchemaElementEditorRecording {
+    /**
+     * 推送 Schema 数据（SDK 内部判断是否在录制，未录制时静默忽略）
+     * @param params - 元素参数（data-id 的值）
+     * @param data - Schema 数据
+     */
+    push: (params: string, data: SchemaValue) => void;
+}
+/**
+ * Schema Element Editor 桥接器返回值
+ */
+interface SchemaElementEditorBridge {
+    /** 清理桥接器，移除事件监听 */
+    cleanup: () => void;
+    /** 录制相关方法 */
+    recording: SchemaElementEditorRecording;
+}
+/**
+ * 创建 Schema Element Editor 桥接器
+ * 纯 JS 函数，返回桥接器对象
+ *
+ * @param config - Schema Element Editor 配置
+ * @returns 桥接器对象，包含 cleanup 和 pushSchema 方法
+ *
+ * @example
+ * ```js
+ * // 最简用法：只需配置基本的 getSchema 和 updateSchema
+ * const bridge = createSchemaElementEditorBridge({
+ *   getSchema: (params) => dataStore[params],
+ *   updateSchema: (schema, params) => {
+ *     dataStore[params] = schema
+ *     return true
+ *   },
+ * })
+ *
+ * // 数据变化时调用 pushSchema 推送数据（录制功能自动可用）
+ * sseHandler.onData = (params, data) => {
+ *   bridge.pushSchema(params, data)
+ * }
+ *
+ * // 如需在录制开始/停止时执行额外逻辑，可配置回调（可选）
+ * // onStartRecording: (params) => console.log('开始录制:', params),
+ * // onStopRecording: (params) => console.log('停止录制:', params),
+ * ```
+ */
+declare function createSchemaElementEditorBridge(config: SchemaElementEditorConfig): SchemaElementEditorBridge;
+
+export { type PostMessageSourceConfig, type PostMessageTypeConfig, type SchemaElementEditorBridge, type SchemaElementEditorConfig, type SchemaElementEditorRecording, type SchemaValue, createSchemaElementEditorBridge };

package/dist/core.js

@@ -0,0 +1,6 @@
+import {
+  createSchemaElementEditorBridge
+} from "./chunk-KMNKOOWF.js";
+export {
+  createSchemaElementEditorBridge
+};

package/dist/index.cjs

@@ -0,0 +1,237 @@
+"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, {
+  createSchemaElementEditorBridge: () => createSchemaElementEditorBridge,
+  useSchemaElementEditor: () => useSchemaElementEditor
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/react.ts
+var import_react = require("react");
+
+// src/core.ts
+var DEFAULT_SOURCE_CONFIG = {
+  contentSource: "schema-element-editor-content",
+  hostSource: "schema-element-editor-host"
+};
+var DEFAULT_MESSAGE_TYPES = {
+  getSchema: "GET_SCHEMA",
+  updateSchema: "UPDATE_SCHEMA",
+  checkPreview: "CHECK_PREVIEW",
+  renderPreview: "RENDER_PREVIEW",
+  cleanupPreview: "CLEANUP_PREVIEW",
+  // 录制模式相关
+  startRecording: "START_RECORDING",
+  stopRecording: "STOP_RECORDING",
+  schemaPush: "SCHEMA_PUSH"
+};
+function createSchemaElementEditorBridge(config) {
+  const { getSchema, updateSchema, renderPreview, sourceConfig, messageTypes } = config;
+  const mergedSourceConfig = {
+    ...DEFAULT_SOURCE_CONFIG,
+    ...sourceConfig
+  };
+  const mergedMessageTypes = {
+    ...DEFAULT_MESSAGE_TYPES,
+    ...messageTypes
+  };
+  let previewCleanupFn = null;
+  const recordingParams = /* @__PURE__ */ new Set();
+  const currentConfig = { getSchema, updateSchema, renderPreview };
+  const sendResponse = (requestId, result) => {
+    const message = {
+      source: mergedSourceConfig.hostSource,
+      requestId,
+      ...result
+    };
+    const isInIframe = window !== window.top;
+    const targetWindow = isInIframe ? window.parent : window;
+    targetWindow.postMessage(message, "*");
+  };
+  const pushSchema = (params, data) => {
+    if (!recordingParams.has(params)) {
+      return;
+    }
+    const message = {
+      source: mergedSourceConfig.hostSource,
+      type: mergedMessageTypes.schemaPush,
+      payload: {
+        success: true,
+        data,
+        params
+      }
+    };
+    const isInIframe = window !== window.top;
+    const targetWindow = isInIframe ? window.parent : window;
+    targetWindow.postMessage(message, "*");
+  };
+  const handleMessage = (event) => {
+    const isFromSelf = event.source === window;
+    const isFromParent = window !== window.top && event.source === window.parent;
+    if (!isFromSelf && !isFromParent) return;
+    if (!event.data || event.data.source !== mergedSourceConfig.contentSource) return;
+    const { type, payload, requestId } = event.data;
+    if (!requestId) return;
+    const { getSchema: getSchema2, updateSchema: updateSchema2, renderPreview: renderPreview2 } = currentConfig;
+    let result;
+    switch (type) {
+      case mergedMessageTypes.getSchema: {
+        const params = String(payload?.params ?? "");
+        try {
+          const data = getSchema2(params);
+          result = { success: true, data };
+        } catch (error) {
+          result = {
+            success: false,
+            error: error instanceof Error ? error.message : "\u83B7\u53D6 Schema \u5931\u8D25"
+          };
+        }
+        break;
+      }
+      case mergedMessageTypes.updateSchema: {
+        const schema = payload?.schema;
+        const params = String(payload?.params ?? "");
+        try {
+          const success = updateSchema2(schema, params);
+          result = { success };
+        } catch (error) {
+          result = {
+            success: false,
+            error: error instanceof Error ? error.message : "\u66F4\u65B0 Schema \u5931\u8D25"
+          };
+        }
+        break;
+      }
+      case mergedMessageTypes.checkPreview: {
+        result = { exists: typeof renderPreview2 === "function" };
+        break;
+      }
+      case mergedMessageTypes.renderPreview: {
+        if (typeof renderPreview2 !== "function") {
+          result = { success: false, error: "\u9884\u89C8\u529F\u80FD\u672A\u914D\u7F6E" };
+          break;
+        }
+        const schema = payload?.schema;
+        const containerId = String(payload?.containerId ?? "");
+        try {
+          if (previewCleanupFn) {
+            previewCleanupFn();
+            previewCleanupFn = null;
+          }
+          const cleanup = renderPreview2(schema, containerId);
+          if (typeof cleanup === "function") {
+            previewCleanupFn = cleanup;
+          }
+          result = { success: true };
+        } catch (error) {
+          result = {
+            success: false,
+            error: error instanceof Error ? error.message : "\u6E32\u67D3\u9884\u89C8\u5931\u8D25"
+          };
+        }
+        break;
+      }
+      case mergedMessageTypes.cleanupPreview: {
+        try {
+          if (previewCleanupFn) {
+            previewCleanupFn();
+            previewCleanupFn = null;
+          }
+          result = { success: true };
+        } catch (error) {
+          result = {
+            success: false,
+            error: error instanceof Error ? error.message : "\u6E05\u7406\u9884\u89C8\u5931\u8D25"
+          };
+        }
+        break;
+      }
+      case mergedMessageTypes.startRecording: {
+        const params = String(payload?.params ?? "");
+        recordingParams.add(params);
+        result = { success: true };
+        break;
+      }
+      case mergedMessageTypes.stopRecording: {
+        const params = String(payload?.params ?? "");
+        recordingParams.delete(params);
+        result = { success: true };
+        break;
+      }
+      default:
+        return;
+    }
+    sendResponse(requestId, result);
+  };
+  window.addEventListener("message", handleMessage);
+  return {
+    cleanup: () => {
+      window.removeEventListener("message", handleMessage);
+      if (previewCleanupFn) {
+        previewCleanupFn();
+        previewCleanupFn = null;
+      }
+      recordingParams.clear();
+    },
+    recording: {
+      push: pushSchema
+    }
+  };
+}
+
+// src/react.ts
+function useSchemaElementEditor(config) {
+  const { getSchema, updateSchema, renderPreview, sourceConfig, messageTypes, enabled } = config;
+  const configRef = (0, import_react.useRef)({ getSchema, updateSchema, renderPreview });
+  const bridgeRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    configRef.current = { getSchema, updateSchema, renderPreview };
+  }, [getSchema, updateSchema, renderPreview]);
+  (0, import_react.useEffect)(() => {
+    if (enabled === false) {
+      return;
+    }
+    const proxyConfig = {
+      getSchema: (params) => configRef.current.getSchema(params),
+      updateSchema: (schema, params) => configRef.current.updateSchema(schema, params),
+      renderPreview: configRef.current.renderPreview ? (schema, containerId) => configRef.current.renderPreview?.(schema, containerId) : void 0,
+      sourceConfig,
+      messageTypes
+    };
+    const bridge = createSchemaElementEditorBridge(proxyConfig);
+    bridgeRef.current = bridge;
+    return () => {
+      bridge.cleanup();
+      bridgeRef.current = null;
+    };
+  }, [enabled, configRef, sourceConfig, messageTypes]);
+  const push = (0, import_react.useCallback)((params, data) => {
+    bridgeRef.current?.recording.push(params, data);
+  }, []);
+  const recording = (0, import_react.useMemo)(() => ({ push }), [push]);
+  return { recording };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createSchemaElementEditorBridge,
+  useSchemaElementEditor
+});

package/dist/index.d.cts

@@ -0,0 +1,2 @@
+export { useSchemaElementEditor } from './react.cjs';
+export { PostMessageSourceConfig, PostMessageTypeConfig, SchemaElementEditorBridge, SchemaElementEditorConfig, SchemaValue, createSchemaElementEditorBridge } from './core.cjs';

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { useSchemaElementEditor } from './react.js';
+export { PostMessageSourceConfig, PostMessageTypeConfig, SchemaElementEditorBridge, SchemaElementEditorConfig, SchemaValue, createSchemaElementEditorBridge } from './core.js';

package/dist/index.js

@@ -0,0 +1,10 @@
+import {
+  useSchemaElementEditor
+} from "./chunk-MU6HL5E3.js";
+import {
+  createSchemaElementEditorBridge
+} from "./chunk-KMNKOOWF.js";
+export {
+  createSchemaElementEditorBridge,
+  useSchemaElementEditor
+};

package/dist/react.cjs

@@ -0,0 +1,233 @@
+"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/react.ts
+var react_exports = {};
+__export(react_exports, {
+  useSchemaElementEditor: () => useSchemaElementEditor
+});
+module.exports = __toCommonJS(react_exports);
+var import_react = require("react");
+
+// src/core.ts
+var DEFAULT_SOURCE_CONFIG = {
+  contentSource: "schema-element-editor-content",
+  hostSource: "schema-element-editor-host"
+};
+var DEFAULT_MESSAGE_TYPES = {
+  getSchema: "GET_SCHEMA",
+  updateSchema: "UPDATE_SCHEMA",
+  checkPreview: "CHECK_PREVIEW",
+  renderPreview: "RENDER_PREVIEW",
+  cleanupPreview: "CLEANUP_PREVIEW",
+  // 录制模式相关
+  startRecording: "START_RECORDING",
+  stopRecording: "STOP_RECORDING",
+  schemaPush: "SCHEMA_PUSH"
+};
+function createSchemaElementEditorBridge(config) {
+  const { getSchema, updateSchema, renderPreview, sourceConfig, messageTypes } = config;
+  const mergedSourceConfig = {
+    ...DEFAULT_SOURCE_CONFIG,
+    ...sourceConfig
+  };
+  const mergedMessageTypes = {
+    ...DEFAULT_MESSAGE_TYPES,
+    ...messageTypes
+  };
+  let previewCleanupFn = null;
+  const recordingParams = /* @__PURE__ */ new Set();
+  const currentConfig = { getSchema, updateSchema, renderPreview };
+  const sendResponse = (requestId, result) => {
+    const message = {
+      source: mergedSourceConfig.hostSource,
+      requestId,
+      ...result
+    };
+    const isInIframe = window !== window.top;
+    const targetWindow = isInIframe ? window.parent : window;
+    targetWindow.postMessage(message, "*");
+  };
+  const pushSchema = (params, data) => {
+    if (!recordingParams.has(params)) {
+      return;
+    }
+    const message = {
+      source: mergedSourceConfig.hostSource,
+      type: mergedMessageTypes.schemaPush,
+      payload: {
+        success: true,
+        data,
+        params
+      }
+    };
+    const isInIframe = window !== window.top;
+    const targetWindow = isInIframe ? window.parent : window;
+    targetWindow.postMessage(message, "*");
+  };
+  const handleMessage = (event) => {
+    const isFromSelf = event.source === window;
+    const isFromParent = window !== window.top && event.source === window.parent;
+    if (!isFromSelf && !isFromParent) return;
+    if (!event.data || event.data.source !== mergedSourceConfig.contentSource) return;
+    const { type, payload, requestId } = event.data;
+    if (!requestId) return;
+    const { getSchema: getSchema2, updateSchema: updateSchema2, renderPreview: renderPreview2 } = currentConfig;
+    let result;
+    switch (type) {
+      case mergedMessageTypes.getSchema: {
+        const params = String(payload?.params ?? "");
+        try {
+          const data = getSchema2(params);
+          result = { success: true, data };
+        } catch (error) {
+          result = {
+            success: false,
+            error: error instanceof Error ? error.message : "\u83B7\u53D6 Schema \u5931\u8D25"
+          };
+        }
+        break;
+      }
+      case mergedMessageTypes.updateSchema: {
+        const schema = payload?.schema;
+        const params = String(payload?.params ?? "");
+        try {
+          const success = updateSchema2(schema, params);
+          result = { success };
+        } catch (error) {
+          result = {
+            success: false,
+            error: error instanceof Error ? error.message : "\u66F4\u65B0 Schema \u5931\u8D25"
+          };
+        }
+        break;
+      }
+      case mergedMessageTypes.checkPreview: {
+        result = { exists: typeof renderPreview2 === "function" };
+        break;
+      }
+      case mergedMessageTypes.renderPreview: {
+        if (typeof renderPreview2 !== "function") {
+          result = { success: false, error: "\u9884\u89C8\u529F\u80FD\u672A\u914D\u7F6E" };
+          break;
+        }
+        const schema = payload?.schema;
+        const containerId = String(payload?.containerId ?? "");
+        try {
+          if (previewCleanupFn) {
+            previewCleanupFn();
+            previewCleanupFn = null;
+          }
+          const cleanup = renderPreview2(schema, containerId);
+          if (typeof cleanup === "function") {
+            previewCleanupFn = cleanup;
+          }
+          result = { success: true };
+        } catch (error) {
+          result = {
+            success: false,
+            error: error instanceof Error ? error.message : "\u6E32\u67D3\u9884\u89C8\u5931\u8D25"
+          };
+        }
+        break;
+      }
+      case mergedMessageTypes.cleanupPreview: {
+        try {
+          if (previewCleanupFn) {
+            previewCleanupFn();
+            previewCleanupFn = null;
+          }
+          result = { success: true };
+        } catch (error) {
+          result = {
+            success: false,
+            error: error instanceof Error ? error.message : "\u6E05\u7406\u9884\u89C8\u5931\u8D25"
+          };
+        }
+        break;
+      }
+      case mergedMessageTypes.startRecording: {
+        const params = String(payload?.params ?? "");
+        recordingParams.add(params);
+        result = { success: true };
+        break;
+      }
+      case mergedMessageTypes.stopRecording: {
+        const params = String(payload?.params ?? "");
+        recordingParams.delete(params);
+        result = { success: true };
+        break;
+      }
+      default:
+        return;
+    }
+    sendResponse(requestId, result);
+  };
+  window.addEventListener("message", handleMessage);
+  return {
+    cleanup: () => {
+      window.removeEventListener("message", handleMessage);
+      if (previewCleanupFn) {
+        previewCleanupFn();
+        previewCleanupFn = null;
+      }
+      recordingParams.clear();
+    },
+    recording: {
+      push: pushSchema
+    }
+  };
+}
+
+// src/react.ts
+function useSchemaElementEditor(config) {
+  const { getSchema, updateSchema, renderPreview, sourceConfig, messageTypes, enabled } = config;
+  const configRef = (0, import_react.useRef)({ getSchema, updateSchema, renderPreview });
+  const bridgeRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    configRef.current = { getSchema, updateSchema, renderPreview };
+  }, [getSchema, updateSchema, renderPreview]);
+  (0, import_react.useEffect)(() => {
+    if (enabled === false) {
+      return;
+    }
+    const proxyConfig = {
+      getSchema: (params) => configRef.current.getSchema(params),
+      updateSchema: (schema, params) => configRef.current.updateSchema(schema, params),
+      renderPreview: configRef.current.renderPreview ? (schema, containerId) => configRef.current.renderPreview?.(schema, containerId) : void 0,
+      sourceConfig,
+      messageTypes
+    };
+    const bridge = createSchemaElementEditorBridge(proxyConfig);
+    bridgeRef.current = bridge;
+    return () => {
+      bridge.cleanup();
+      bridgeRef.current = null;
+    };
+  }, [enabled, configRef, sourceConfig, messageTypes]);
+  const push = (0, import_react.useCallback)((params, data) => {
+    bridgeRef.current?.recording.push(params, data);
+  }, []);
+  const recording = (0, import_react.useMemo)(() => ({ push }), [push]);
+  return { recording };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useSchemaElementEditor
+});

package/dist/react.d.cts

@@ -0,0 +1,54 @@
+import { SchemaElementEditorConfig, SchemaElementEditorRecording } from './core.cjs';
+export { PostMessageSourceConfig, PostMessageTypeConfig, SchemaElementEditorBridge, SchemaValue } from './core.cjs';
+
+/**
+ * Schema Element Editor Host SDK - React
+ * React hooks 包装
+ */
+
+/** React 版本的 Schema Element Editor 配置 */
+interface ReactSchemaElementEditorConfig extends SchemaElementEditorConfig {
+    /**
+     * 是否启用桥接（默认 true）
+     * 设为 false 时不创建桥接器，不监听消息
+     */
+    enabled?: boolean;
+}
+/** React hooks 返回值 */
+interface UseSchemaElementEditorReturn {
+    /** 录制相关方法 */
+    recording: SchemaElementEditorRecording;
+}
+/**
+ * Schema Element Editor 插件接入 hooks（React）
+ * 用于在宿主页面接入 Schema Element Editor 插件，通过 postMessage 接收插件请求并返回响应
+ *
+ * @param config - Schema Element Editor 配置
+ * @returns 桥接器方法，包含 recording
+ *
+ * @example
+ * ```tsx
+ * import { useSchemaElementEditor } from '@schema-element-editor/host-sdk'
+ *
+ * function App() {
+ *   const { recording } = useSchemaElementEditor({
+ *     getSchema: (params) => dataStore[params],
+ *     updateSchema: (schema, params) => {
+ *       dataStore[params] = schema
+ *       return true
+ *     },
+ *   })
+ *
+ *   // 数据变化时推送数据（SDK 内部管理录制状态，未录制时静默忽略）
+ *   sseHandler.onData = (params, data) => recording.push(params, data)
+ *
+ *   // 检查是否正在录制
+ *   if (recording.isActive('chat-1')) { ... }
+ *
+ *   return <div>...</div>
+ * }
+ * ```
+ */
+declare function useSchemaElementEditor(config: ReactSchemaElementEditorConfig): UseSchemaElementEditorReturn;
+
+export { type ReactSchemaElementEditorConfig, SchemaElementEditorConfig, SchemaElementEditorRecording, type UseSchemaElementEditorReturn, useSchemaElementEditor };