@djvlc/sandbox 1.0.0

package/dist/index.js

@@ -0,0 +1,598 @@
+// src/protocol.ts
+var MessageType = /* @__PURE__ */ ((MessageType2) => {
+  MessageType2["READY"] = "ready";
+  MessageType2["INIT"] = "init";
+  MessageType2["DESTROY"] = "destroy";
+  MessageType2["LOAD_PAGE"] = "load_page";
+  MessageType2["UPDATE_SCHEMA"] = "update_schema";
+  MessageType2["REFRESH"] = "refresh";
+  MessageType2["SELECT_COMPONENT"] = "select_component";
+  MessageType2["HOVER_COMPONENT"] = "hover_component";
+  MessageType2["UPDATE_COMPONENT"] = "update_component";
+  MessageType2["DELETE_COMPONENT"] = "delete_component";
+  MessageType2["ADD_COMPONENT"] = "add_component";
+  MessageType2["MOVE_COMPONENT"] = "move_component";
+  MessageType2["SYNC_STATE"] = "sync_state";
+  MessageType2["SYNC_VARIABLES"] = "sync_variables";
+  MessageType2["COMPONENT_CLICK"] = "component_click";
+  MessageType2["COMPONENT_HOVER"] = "component_hover";
+  MessageType2["COMPONENT_CONTEXT_MENU"] = "component_context_menu";
+  MessageType2["COMPONENT_DRAG_START"] = "component_drag_start";
+  MessageType2["COMPONENT_DRAG_END"] = "component_drag_end";
+  MessageType2["ERROR"] = "error";
+  MessageType2["LOG"] = "log";
+  return MessageType2;
+})(MessageType || {});
+function generateMessageId() {
+  return `msg_${Date.now()}_${Math.random().toString(36).slice(2, 9)}`;
+}
+function createMessage(type, data) {
+  return {
+    type,
+    id: generateMessageId(),
+    data,
+    timestamp: Date.now()
+  };
+}
+function createResponse(requestId, type, success, data, error) {
+  return {
+    type,
+    id: generateMessageId(),
+    requestId,
+    success,
+    data,
+    error,
+    timestamp: Date.now()
+  };
+}
+function isDjvlcMessage(data) {
+  if (!data || typeof data !== "object") return false;
+  const msg = data;
+  return typeof msg.type === "string" && typeof msg.id === "string" && typeof msg.timestamp === "number";
+}
+
+// src/sandbox-host.ts
+var SandboxHost = class {
+  constructor(options) {
+    this.pendingRequests = /* @__PURE__ */ new Map();
+    this.isReady = false;
+    // ==================== 私有方法 ====================
+    this.handleMessage = (event) => {
+      if (event.source !== this.options.iframe.contentWindow) {
+        return;
+      }
+      if (this.options.targetOrigin !== "*" && event.origin !== this.options.targetOrigin) {
+        return;
+      }
+      const message = event.data;
+      if (!isDjvlcMessage(message)) {
+        return;
+      }
+      this.log("debug", "Received message:", message.type, message);
+      if ("requestId" in message) {
+        const pending = this.pendingRequests.get(message.requestId);
+        if (pending) {
+          clearTimeout(pending.timer);
+          this.pendingRequests.delete(message.requestId);
+          if (message.success) {
+            pending.resolve(message.data);
+          } else {
+            pending.reject(new Error(message.error || "Unknown error"));
+          }
+          return;
+        }
+      }
+      switch (message.type) {
+        case "ready" /* READY */:
+          this.isReady = true;
+          this.readyResolve();
+          this.options.onReady?.();
+          break;
+        case "component_click" /* COMPONENT_CLICK */:
+          this.options.onComponentClick?.(
+            message.data.componentId,
+            message.data
+          );
+          break;
+        case "component_hover" /* COMPONENT_HOVER */:
+          this.options.onComponentHover?.(
+            message.data.componentId,
+            message.data
+          );
+          break;
+        case "component_context_menu" /* COMPONENT_CONTEXT_MENU */:
+          this.options.onComponentContextMenu?.(
+            message.data.componentId,
+            message.data
+          );
+          break;
+        case "sync_state" /* SYNC_STATE */:
+          this.options.onSyncState?.(message.data);
+          break;
+        case "error" /* ERROR */:
+          this.options.onError?.(message.data);
+          break;
+        case "log" /* LOG */: {
+          const logData = message.data;
+          this.options.onLog?.(logData.level, logData.message, ...logData.args || []);
+          break;
+        }
+      }
+    };
+    this.options = {
+      timeout: 3e4,
+      debug: false,
+      ...options
+    };
+    this.readyPromise = new Promise((resolve) => {
+      this.readyResolve = resolve;
+    });
+  }
+  /**
+   * 连接到 iframe
+   */
+  connect() {
+    window.addEventListener("message", this.handleMessage);
+    this.log("debug", "SandboxHost connected");
+  }
+  /**
+   * 断开连接
+   */
+  disconnect() {
+    window.removeEventListener("message", this.handleMessage);
+    this.pendingRequests.forEach(({ timer }) => clearTimeout(timer));
+    this.pendingRequests.clear();
+    this.isReady = false;
+    this.log("debug", "SandboxHost disconnected");
+  }
+  /**
+   * 等待就绪
+   */
+  async waitReady() {
+    return this.readyPromise;
+  }
+  /**
+   * 检查是否就绪
+   */
+  get ready() {
+    return this.isReady;
+  }
+  // ==================== 页面操作 ====================
+  /**
+   * 初始化
+   */
+  async init(data) {
+    await this.send("init" /* INIT */, data);
+  }
+  /**
+   * 加载页面
+   */
+  async loadPage(data) {
+    await this.send("load_page" /* LOAD_PAGE */, data);
+  }
+  /**
+   * 更新 Schema
+   */
+  async updateSchema(data) {
+    await this.send("update_schema" /* UPDATE_SCHEMA */, data);
+  }
+  /**
+   * 刷新
+   */
+  async refresh() {
+    await this.send("refresh" /* REFRESH */, {});
+  }
+  // ==================== 组件操作 ====================
+  /**
+   * 选择组件
+   */
+  async selectComponent(componentId, multi = false) {
+    await this.send("select_component" /* SELECT_COMPONENT */, {
+      componentId,
+      multi
+    });
+  }
+  /**
+   * 悬停组件
+   */
+  async hoverComponent(componentId) {
+    await this.send("hover_component" /* HOVER_COMPONENT */, {
+      componentId
+    });
+  }
+  /**
+   * 更新组件
+   */
+  async updateComponent(data) {
+    await this.send("update_component" /* UPDATE_COMPONENT */, data);
+  }
+  /**
+   * 添加组件
+   */
+  async addComponent(data) {
+    await this.send("add_component" /* ADD_COMPONENT */, data);
+  }
+  /**
+   * 移动组件
+   */
+  async moveComponent(data) {
+    await this.send("move_component" /* MOVE_COMPONENT */, data);
+  }
+  /**
+   * 删除组件
+   */
+  async deleteComponent(componentId) {
+    await this.send("delete_component" /* DELETE_COMPONENT */, {
+      componentId
+    });
+  }
+  // ==================== 状态同步 ====================
+  /**
+   * 同步变量
+   */
+  async syncVariables(variables) {
+    await this.send("sync_variables" /* SYNC_VARIABLES */, { variables });
+  }
+  send(type, data) {
+    return new Promise((resolve, reject) => {
+      const message = createMessage(type, data);
+      const timer = setTimeout(() => {
+        this.pendingRequests.delete(message.id);
+        reject(new Error(`Request timeout: ${type}`));
+      }, this.options.timeout);
+      this.pendingRequests.set(message.id, { resolve, reject, timer });
+      this.log("debug", "Sending message:", type, message);
+      this.options.iframe.contentWindow?.postMessage(message, this.options.targetOrigin);
+    });
+  }
+  log(level, message, ...args) {
+    if (this.options.debug || level !== "debug") {
+      console[level](`[SandboxHost] ${message}`, ...args);
+    }
+  }
+};
+
+// src/sandbox-client.ts
+var SandboxClient = class {
+  constructor(options = {}) {
+    this.runtime = null;
+    this.selectedComponents = /* @__PURE__ */ new Set();
+    this.hoveredComponent = null;
+    // ==================== 私有方法 ====================
+    this.handleMessage = async (event) => {
+      const message = event.data;
+      if (!isDjvlcMessage(message)) {
+        return;
+      }
+      this.log("debug", "Received message:", message.type, message);
+      try {
+        let responseData;
+        switch (message.type) {
+          case "init" /* INIT */:
+            responseData = await this.handleInit(message.data);
+            break;
+          case "load_page" /* LOAD_PAGE */:
+            responseData = await this.handleLoadPage(message.data);
+            break;
+          case "update_schema" /* UPDATE_SCHEMA */:
+            responseData = await this.handleUpdateSchema(message.data);
+            break;
+          case "refresh" /* REFRESH */:
+            responseData = await this.handleRefresh();
+            break;
+          case "select_component" /* SELECT_COMPONENT */:
+            responseData = this.handleSelectComponent(message.data);
+            break;
+          case "hover_component" /* HOVER_COMPONENT */:
+            responseData = this.handleHoverComponent(message.data);
+            break;
+          case "update_component" /* UPDATE_COMPONENT */:
+            responseData = this.handleUpdateComponent(message.data);
+            break;
+          case "add_component" /* ADD_COMPONENT */:
+            responseData = this.handleAddComponent(message.data);
+            break;
+          case "move_component" /* MOVE_COMPONENT */:
+            responseData = this.handleMoveComponent(message.data);
+            break;
+          case "delete_component" /* DELETE_COMPONENT */:
+            responseData = this.handleDeleteComponent(message.data);
+            break;
+          case "sync_variables" /* SYNC_VARIABLES */:
+            responseData = this.handleSyncVariables(message.data);
+            break;
+          default:
+            this.log("warn", "Unknown message type:", message.type);
+            return;
+        }
+        this.sendResponse(message.id, message.type, true, responseData);
+      } catch (error) {
+        this.sendResponse(
+          message.id,
+          message.type,
+          false,
+          void 0,
+          error instanceof Error ? error.message : "Unknown error"
+        );
+      }
+    };
+    this.options = {
+      targetOrigin: "*",
+      debug: false,
+      ...options
+    };
+  }
+  /**
+   * 设置运行时实例
+   */
+  setRuntime(runtime) {
+    this.runtime = runtime;
+  }
+  /**
+   * 连接到父窗口
+   */
+  connect() {
+    window.addEventListener("message", this.handleMessage);
+    this.log("debug", "SandboxClient connected");
+    this.sendReady();
+  }
+  /**
+   * 断开连接
+   */
+  disconnect() {
+    window.removeEventListener("message", this.handleMessage);
+    this.log("debug", "SandboxClient disconnected");
+  }
+  /**
+   * 初始化组件事件监听
+   */
+  initComponentEventListeners() {
+    document.addEventListener("click", (e) => {
+      const target = e.target;
+      const componentEl = this.findComponentElement(target);
+      if (componentEl) {
+        e.preventDefault();
+        e.stopPropagation();
+        const componentId = componentEl.getAttribute("data-component-id");
+        const componentType = componentEl.getAttribute("data-component-type");
+        if (componentId) {
+          this.sendComponentEvent("component_click" /* COMPONENT_CLICK */, {
+            componentId,
+            componentType: componentType || "unknown",
+            bounds: componentEl.getBoundingClientRect(),
+            position: { x: e.clientX, y: e.clientY }
+          });
+        }
+      }
+    }, true);
+    document.addEventListener("mouseover", (e) => {
+      const target = e.target;
+      const componentEl = this.findComponentElement(target);
+      if (componentEl) {
+        const componentId = componentEl.getAttribute("data-component-id");
+        const componentType = componentEl.getAttribute("data-component-type");
+        if (componentId && componentId !== this.hoveredComponent) {
+          this.hoveredComponent = componentId;
+          this.sendComponentEvent("component_hover" /* COMPONENT_HOVER */, {
+            componentId,
+            componentType: componentType || "unknown",
+            bounds: componentEl.getBoundingClientRect()
+          });
+        }
+      }
+    });
+    document.addEventListener("mouseout", (e) => {
+      const relatedTarget = e.relatedTarget;
+      if (!relatedTarget || !this.findComponentElement(relatedTarget)) {
+        if (this.hoveredComponent) {
+          this.hoveredComponent = null;
+          this.sendComponentEvent("component_hover" /* COMPONENT_HOVER */, {
+            componentId: "",
+            componentType: ""
+          });
+        }
+      }
+    });
+    document.addEventListener("contextmenu", (e) => {
+      const target = e.target;
+      const componentEl = this.findComponentElement(target);
+      if (componentEl) {
+        e.preventDefault();
+        const componentId = componentEl.getAttribute("data-component-id");
+        const componentType = componentEl.getAttribute("data-component-type");
+        if (componentId) {
+          this.sendComponentEvent("component_context_menu" /* COMPONENT_CONTEXT_MENU */, {
+            componentId,
+            componentType: componentType || "unknown",
+            bounds: componentEl.getBoundingClientRect(),
+            position: { x: e.clientX, y: e.clientY }
+          });
+        }
+      }
+    });
+  }
+  /**
+   * 注入编辑器样式
+   */
+  injectEditorStyles() {
+    const style = document.createElement("style");
+    style.textContent = `
+      /* \u9009\u4E2D\u72B6\u6001 */
+      [data-component-id].djvlc-selected {
+        outline: 2px solid #1890ff !important;
+        outline-offset: 2px;
+      }
+
+      /* \u60AC\u505C\u72B6\u6001 */
+      [data-component-id].djvlc-hovered {
+        outline: 1px dashed #1890ff !important;
+        outline-offset: 1px;
+      }
+
+      /* \u7981\u7528\u4EA4\u4E92 */
+      [data-component-id] * {
+        pointer-events: none;
+      }
+
+      [data-component-id] {
+        cursor: pointer;
+        pointer-events: auto;
+      }
+
+      /* \u62D6\u62FD\u5360\u4F4D\u7B26 */
+      .djvlc-drop-indicator {
+        position: absolute;
+        background: #1890ff;
+        opacity: 0.5;
+        pointer-events: none;
+        z-index: 10000;
+      }
+
+      .djvlc-drop-indicator.horizontal {
+        height: 4px;
+        width: 100%;
+      }
+
+      .djvlc-drop-indicator.vertical {
+        width: 4px;
+        height: 100%;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+  async handleInit(data) {
+    this.log("info", "Init with config:", data);
+  }
+  async handleLoadPage(data) {
+    this.log("info", "Load page:", data.pageUid);
+  }
+  async handleUpdateSchema(data) {
+    this.log("info", "Update schema", data.fullUpdate ? "(full)" : "(partial)");
+  }
+  async handleRefresh() {
+    this.log("info", "Refresh page");
+    window.location.reload();
+  }
+  handleSelectComponent(data) {
+    if (data.componentId) {
+      if (data.multi) {
+        if (this.selectedComponents.has(data.componentId)) {
+          this.selectedComponents.delete(data.componentId);
+        } else {
+          this.selectedComponents.add(data.componentId);
+        }
+      } else {
+        this.selectedComponents.clear();
+        this.selectedComponents.add(data.componentId);
+      }
+    } else {
+      this.selectedComponents.clear();
+    }
+    this.updateSelectionStyles();
+    this.syncState();
+  }
+  handleHoverComponent(data) {
+    document.querySelectorAll(".djvlc-hovered").forEach((el) => {
+      el.classList.remove("djvlc-hovered");
+    });
+    if (data.componentId) {
+      const el = document.querySelector(`[data-component-id="${data.componentId}"]`);
+      if (el && !this.selectedComponents.has(data.componentId)) {
+        el.classList.add("djvlc-hovered");
+      }
+    }
+  }
+  handleUpdateComponent(data) {
+    this.log("info", "Update component:", data.componentId);
+    this.runtime?.updateComponent(data.componentId, data.props || {});
+  }
+  handleAddComponent(data) {
+    this.log("info", "Add component:", data.component.type);
+  }
+  handleMoveComponent(data) {
+    this.log("info", "Move component:", data.componentId, "to", data.targetIndex);
+  }
+  handleDeleteComponent(data) {
+    this.log("info", "Delete component:", data.componentId);
+  }
+  handleSyncVariables(data) {
+    Object.entries(data.variables).forEach(([key, value]) => {
+      this.runtime?.setVariable(key, value);
+    });
+  }
+  updateSelectionStyles() {
+    document.querySelectorAll(".djvlc-selected").forEach((el) => {
+      el.classList.remove("djvlc-selected");
+    });
+    this.selectedComponents.forEach((id) => {
+      const el = document.querySelector(`[data-component-id="${id}"]`);
+      if (el) {
+        el.classList.add("djvlc-selected");
+      }
+    });
+  }
+  syncState() {
+    const state = {
+      phase: this.runtime?.getState().phase || "idle",
+      page: this.runtime?.getState().page ? {
+        pageUid: this.runtime.getState().page.pageUid,
+        pageVersionId: this.runtime.getState().page.pageVersionId
+      } : void 0,
+      selectedComponents: Array.from(this.selectedComponents),
+      hoveredComponent: this.hoveredComponent
+    };
+    this.send("sync_state" /* SYNC_STATE */, state);
+  }
+  sendReady() {
+    const data = {
+      runtimeVersion: "0.1.0",
+      capabilities: [
+        "select",
+        "hover",
+        "update",
+        "add",
+        "move",
+        "delete",
+        "drag"
+      ]
+    };
+    this.send("ready" /* READY */, data);
+  }
+  sendComponentEvent(type, data) {
+    this.send(type, data);
+  }
+  send(type, data) {
+    const message = createMessage(type, data);
+    this.log("debug", "Sending message:", type, message);
+    window.parent.postMessage(message, this.options.targetOrigin || "*");
+  }
+  sendResponse(requestId, type, success, data, error) {
+    const response = createResponse(requestId, type, success, data, error);
+    this.log("debug", "Sending response:", type, response);
+    window.parent.postMessage(response, this.options.targetOrigin || "*");
+  }
+  findComponentElement(target) {
+    let current = target;
+    while (current) {
+      if (current.hasAttribute("data-component-id")) {
+        return current;
+      }
+      current = current.parentElement;
+    }
+    return null;
+  }
+  log(level, message, ...args) {
+    if (this.options.debug || level !== "debug") {
+      console[level](`[SandboxClient] ${message}`, ...args);
+    }
+  }
+};
+export {
+  MessageType,
+  SandboxClient,
+  SandboxHost,
+  createMessage,
+  createResponse,
+  generateMessageId,
+  isDjvlcMessage
+};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@djvlc/sandbox",
+  "version": "1.0.0",
+  "description": "DJV 低代码平台沙箱通信模块",
+  "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",
+    "dev": "tsup src/index.ts --format esm,cjs --dts --watch",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest",
+    "lint": "eslint src --ext .ts",
+    "typecheck": "tsc --noEmit",
+    "clean": "rimraf dist"
+  },
+  "dependencies": {
+    "@djvlc/contracts-types": "^1.4.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.0",
+    "eslint": "^8.55.0",
+    "rimraf": "^5.0.5",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0",
+    "vitest": "^1.0.0"
+  },
+  "keywords": [
+    "lowcode",
+    "sandbox",
+    "iframe",
+    "postmessage",
+    "djv"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT"
+}