@chamn/render 0.9.3 → 0.10.1

package/dist/index.es.js

@@ -0,0 +1,1785 @@
+var Se = Object.defineProperty;
+var ye = (n, e, t) => e in n ? Se(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
+var p = (n, e, t) => ye(n, typeof e != "symbol" ? e + "" : e, t);
+import { capitalize as Ce, isArray as te, isPlainObject as k, isEqual as Ee, merge as Ne } from "lodash-es";
+import N, { Component as be, createElement as ve, useEffect as ne, useRef as re, useMemo as se } from "react";
+import { createStore as xe } from "zustand/vanilla";
+import { isPropModel as U, isExpression as w, isFunction as oe, isSlotModel as Re, isAction as Me, isNodeModel as Oe, getRandomStr as W, InnerComponentNameEnum as j, ENGEnvEnum as De, CPage as Y, checkPage as we } from "@chamn/model";
+import { htmlTagNames as Ae } from "html-tag-names";
+import { findCurrentHostFiber as Ie } from "react-reconciler/reflection";
+import J from "loadjs";
+const Le = (n) => () => {
+  console.warn(`${n} need to be implement getComponent`);
+}, Te = ["customPageRootRender"], K = [
+  // 页面渲染
+  "pageRender",
+  // 渲染一个组件
+  "render",
+  // 将一个 组件 model 节点 转换为一个可被运行的渲染函数
+  "convertModelToComponent",
+  "getComponent",
+  "getContext",
+  "getUtils",
+  "transformProps",
+  "errorCatch",
+  "requestAPI",
+  "clear"
+], Pe = (n) => [...K, ...Te].reduce((t, r) => {
+  var s;
+  return n != null && n[r] ? t[r] = (s = n[r]) == null ? void 0 : s.bind(n) : K.includes(r) && (t[r] = Le), t;
+}, {}), X = (n, e = {
+  keyListVar: "ALL_NODE_IDS",
+  getReadValCode: ""
+}) => {
+  let t = n;
+  return t[0] === String(Number(t[0])) && (t = `_${t}`), `
+var ${n} = {};
+
+${e.keyListVar}.forEach(function (key) {
+  var tempK = /^\\d/.test(key) ? ('_' + key) : key;
+  Object.defineProperty(${n}, tempK, {
+    get: function () {
+      ${e.getReadValCode}
+    },
+    set: function (value) {},
+    enumerable: true
+  });
+});
+`;
+}, vt = function(n) {
+  return !(!n || typeof n != "function" || !n.prototype);
+};
+function je(n) {
+  const e = n == null ? void 0 : n.prototype;
+  return !!(e && e.isReactComponent);
+}
+function Ve(n) {
+  var r, s;
+  const t = typeof Symbol == "function" && Symbol.for ? Symbol.for("react.forward_ref") : 60112;
+  return (n == null ? void 0 : n.$$typeof) === t || ((r = n == null ? void 0 : n.prototype) == null ? void 0 : r.isReactComponent) || ((s = n == null ? void 0 : n.prototype) == null ? void 0 : s.setState) || n._forwardRef;
+}
+function ke(n) {
+  class e extends be {
+    render() {
+      return ve(n, this.props);
+    }
+  }
+  return e.displayName = n.displayName, e;
+}
+const I = (n, e) => {
+  const t = (r) => {
+    let s = `function run () { return ${r}; }`;
+    return String(r).includes("return ") && (s = `function runExp () { ${r} }`), B({
+      funcBody: s,
+      funcName: "run",
+      nodeContext: e.nodeContext,
+      storeManager: e.storeManager,
+      nodeModel: e.nodeModel
+    })();
+  };
+  try {
+    return t(n);
+  } catch (r) {
+    console.warn(r);
+    const s = `[${n}] expression run failed`;
+    return console.warn(s), null;
+  }
+}, B = (n) => {
+  const {
+    funcBody: e,
+    funcName: t,
+    nodeContext: r,
+    storeManager: s,
+    $$response: o,
+    nodeModel: c,
+    actionVariableSpace: l
+  } = n, i = t || "anonymous";
+  return {
+    [i]: function(...y) {
+      let h;
+      const $ = Object.keys(l || {}).map((C) => `var ${C} = $ACTION_VAR_SPACE[${JSON.stringify(C)}];`);
+      try {
+        return h = `
+  var $$$__args__$$$ = Array.from(arguments);
+  function $$_run_$$() {
+    var __extraParams = $$$__args__$$$.pop();
+    var __$$storeManager__ = __extraParams.storeManager;
+    var $ALL_NODE_IDS = Array.from(__$$storeManager__.storeMap.keys().filter(Boolean));;
+    var $RESPONSE = __extraParams.$$response;;
+    var $CTX =  __extraParams.$$context;
+    var $$context = $CTX;
+    var $PARAMS = $$context.params || {};
+    var $EVENT_PARAMS = $$$__args__$$$[0];
+    var $Event = $$$__args__$$$[0];
+    var $EVENT = $$$__args__$$$[0];
+    var $ARGS = $$$__args__$$$;
+
+    var $ACTION_VAR_SPACE = __extraParams.actionVariableSpace;
+    // 新增的变量
+    var $N_ID = ${JSON.stringify(c.id)};
+    var $NODE_MODAL = __extraParams.nodeModel;
+    var $IDS = $ALL_NODE_IDS.reduce(function (res, id) {
+        res[id] = id;
+        return res;
+    }, {});
+    var $M = {};
+    var $G_STATE = __$$storeManager__.getState('globalState');
+    var $STATE = __$$storeManager__.getState($N_ID);
+    var $LOOP_DATA = $CTX.loopData;
+
+
+${X("$ALL_STATE", {
+          keyListVar: "$ALL_NODE_IDS ",
+          getReadValCode: "return __$$storeManager__.getState(key);"
+        })}
+
+${X("$U_STATE", {
+          keyListVar: "$ALL_NODE_IDS ",
+          getReadValCode: "return function (newVal) { __$$storeManager__.setState(key, newVal); }"
+        })}
+
+    $$context.stateManager = __$$storeManager__.getStateSnapshot();
+    // action flowACTION_VAR_SPACE 中定义的变量
+    ${$.join(`;
+`)}
+
+    var $$_f_$$ = ${e.trim() || "function () {}"};
+
+    return $$_f_$$.apply($$_f_$$, $$$__args__$$$);
+  }
+  return $$_run_$$();
+        `, new Function(h)(...y, { $$context: r, storeManager: s, $$response: o, actionVariableSpace: l, nodeModel: c });
+      } catch (C) {
+        console.warn(C);
+      }
+    }
+  }[i];
+}, ae = (n, e) => {
+  const t = {};
+  return e.forEach((r, s) => {
+    t[r] = n[s];
+  }), t;
+}, Be = (n = []) => {
+  const e = {};
+  return n.forEach(({ property: t, value: r }) => {
+    let s = t.replace("-webkit", "Webkit");
+    s = s.replace("-ms", "ms"), s = s.replace("-moz", "Moz"), s = s.replace("-o", "O");
+    let o = s.split("-");
+    o.length >= 2 && (o = o.map((c, l) => l !== 0 ? Ce(c) : c)), e[o.join("")] = r;
+  }), e;
+}, xt = (n) => {
+  let e = "";
+  return Object.keys(n || {}).forEach((t) => {
+    e += `${t}:${n[t]};`;
+  }), e;
+}, Rt = (n, e) => {
+  const t = {};
+  return n.forEach((r) => {
+    if (r.globalName) {
+      const s = e[r.globalName];
+      s && (t[r.globalName] = s, s.__esModule && s.default && (t[r.globalName] = s.default));
+    }
+  }), t;
+}, Mt = (n, e = 1) => {
+  let t = 0, r = n, s = {}, o = {};
+  for (; t < e; )
+    Object.keys(r).forEach((c) => {
+      s = {
+        ...s,
+        ...r[c]
+      };
+    }), o = s, r = s, s = {}, t += 1;
+  return o;
+}, Ge = (n, e) => {
+  const t = [];
+  return e.forEach((r) => {
+    const o = r.exec(n);
+    o != null && o.length && t.push(o[1]);
+  }), t;
+}, ce = (n, e) => {
+  const t = {};
+  return e.forEach((r) => {
+    n[r.name] && (t[r.name] = n[r.name]);
+  }), t;
+}, Ot = (n, e) => ce(n, e), Dt = (n, e) => ce(n, e), Q = (n) => {
+  var t;
+  return ((t = n.value.css) == null ? void 0 : t.class) || `c_${n.id}`;
+}, Fe = (n, e) => {
+  const t = n.split(".");
+  let r, s = e;
+  return t.forEach((o) => {
+    r = s == null ? void 0 : s[o], s = r;
+  }), r || (() => `Component [${n}] not found`);
+}, Z = (n, e) => {
+  const t = {
+    ...n
+  };
+  return t.__proto__ = e, t;
+};
+class Ue {
+  constructor() {
+    p(this, "storeMap", /* @__PURE__ */ new Map());
+  }
+  addStore(e, t) {
+    const r = xe(t);
+    return this.storeMap.set(e, r), r.name = e, r;
+  }
+  setStore(e, t) {
+    this.storeMap.set(e, t);
+  }
+  removeStore(e) {
+    this.storeMap.delete(e);
+  }
+  getStore(e) {
+    return this.storeMap.get(e);
+  }
+  getState(e) {
+    var t;
+    return (t = this.storeMap.get(e)) == null ? void 0 : t.getState();
+  }
+  getStateObj(e) {
+    return {
+      state: this.getState(e),
+      updateState: (t) => {
+        this.setState(e, t);
+      }
+    };
+  }
+  setState(e, t) {
+    var r;
+    return (r = this.storeMap.get(e)) == null ? void 0 : r.setState(t);
+  }
+  connect(e, t) {
+    const r = this.storeMap.get(e);
+    return r ? r.subscribe(t) : (console.warn("store not exits"), () => {
+    });
+  }
+  /**
+   * storeManger 赋值以及 获取需要做转换
+   */
+  getStateSnapshot() {
+    const e = {};
+    return this.storeMap.forEach((t, r) => {
+      e[r] = this.getStateObj(r);
+    }), e;
+  }
+  destroy() {
+    this.storeMap = /* @__PURE__ */ new Map();
+  }
+}
+class He {
+  constructor() {
+    p(this, "varSpace", /* @__PURE__ */ new Map());
+  }
+  get(e) {
+    return this.varSpace.get(e);
+  }
+  add(e, t) {
+    this.varSpace.set(e, t);
+  }
+  remove(e) {
+    this.varSpace.delete(e);
+  }
+  destroy() {
+    this.varSpace.clear();
+  }
+  getStateSnapshot() {
+    const e = {};
+    return this.varSpace.forEach((t, r) => {
+      e[r] = t;
+    }), e;
+  }
+}
+class ie {
+  constructor() {
+    p(this, "refMap", /* @__PURE__ */ new Map());
+  }
+  get(e) {
+    return this.refMap.get(e);
+  }
+  add(e, t) {
+    this.refMap.set(e, t);
+  }
+  remove(e) {
+    this.refMap.delete(e);
+  }
+  destroy() {
+    this.refMap.clear();
+  }
+}
+const F = "DYNAMIC", We = ["$$context", "$$nodeModel"], le = "ON_DID_RENDER", ue = "ON_WILL_DESTROY", qe = [le, ue], H = (n, e) => {
+  let t = n;
+  return e && (t = {
+    ...n
+  }, t.__proto__ = e || null), t;
+}, V = (n, e = {}, ...t) => typeof n == "string" || typeof n == "number" ? String(n) : (We.forEach((s) => {
+  s in e && n.__CP_TYPE__ !== F && delete e[s];
+}), N.createElement(n, e, ...t)), ee = (n = {}, e) => {
+  const t = [], r = (s, o) => {
+    let c = o;
+    U(o) && (c = o.value), e(c) ? t.push({
+      keyPath: s,
+      val: c
+    }) : te(c) ? c.forEach((l, i) => {
+      r([...s, String(i)], l);
+    }) : k(c) && Object.keys(c).forEach((l) => {
+      r([...s, l], c[l]);
+    });
+  };
+  return r(["$root"], n), t;
+}, L = (n, e) => {
+  const t = n.handler, { context: r, storeManager: s } = e;
+  return e.actionVariableSpace || (e.actionVariableSpace = {}), async function(...o) {
+    const c = {}, l = async (y) => {
+      const h = y;
+      if (h.type === "RUN_CODE") {
+        const _ = B({
+          funcName: "",
+          funcBody: `function() {
+${h.value}
+}`,
+          nodeContext: r,
+          storeManager: s,
+          $$response: e.$$response,
+          actionVariableSpace: e.actionVariableSpace,
+          nodeModel: e.nodeModel
+        });
+        let $;
+        e.$$response !== void 0 ? $ = _(e.$$response, ...o) : $ = _(...o), $ != null && $.then ? c[h.id] = await $ : c[h.id] = $;
+      }
+      if (h.type === "JUMP_LINK") {
+        const $ = ze(h, e)(...o);
+        $ != null && $.then ? c[h.id] = await $ : c[h.id] = $;
+      }
+      if (h.type === "REQUEST_API") {
+        const { run: _, afterFailedResponse: $, afterSuccessResponse: C } = Ye(h, e);
+        try {
+          const v = _(...o);
+          v != null && v.then ? c[h.id] = await v : c[h.id] = v, h.responseVarName && (e.actionVariableSpace[h.responseVarName] = c[h.id]);
+          const a = C(c[h.id], ...o);
+          return a != null && a.then ? await a : a;
+        } catch (v) {
+          const a = await $(v);
+          return a != null && a.then ? await a : a;
+        }
+      }
+      if (h.type === "CALL_NODE_METHOD") {
+        const $ = Je(h, e)(...o);
+        $ != null && $.then ? c[h.id] = await $ : c[h.id] = $, h.returnVarName && (e.actionVariableSpace[h.returnVarName] = c[h.id]);
+      }
+      if (h.type === "ASSIGN_VALUE") {
+        const _ = Ke(h, e);
+        let $ = [...o];
+        e.$$response !== void 0 && ($ = [e.$$response, $]);
+        const C = _(...$);
+        c[h.id] = await C;
+      }
+    };
+    let i = t[0];
+    const S = /* @__PURE__ */ new Set();
+    for (; i; ) {
+      if (S.has(i.id))
+        return;
+      await l(i), S.add(i.id), i = t.find((h) => (i == null ? void 0 : i.next) && h.id === (i == null ? void 0 : i.next));
+    }
+  };
+};
+function ze(n, e) {
+  return A(n.link, e);
+}
+const A = (n, e) => function(...t) {
+  return w(n) ? I(n.value, {
+    ...e.context,
+    nodeContext: e.context,
+    storeManager: e.storeManager,
+    $$response: e.$$response,
+    actionVariableSpace: e.actionVariableSpace,
+    nodeModel: e.nodeModel
+  }) : oe(n) ? B({
+    funcName: n.name || "",
+    funcBody: n.value,
+    nodeContext: e.context,
+    storeManager: e.storeManager,
+    $$response: e.$$response,
+    actionVariableSpace: e.actionVariableSpace,
+    nodeModel: e.nodeModel
+  })(...t) : n;
+}, Ye = (n, e) => ({
+  run: function(...o) {
+    var _, $;
+    let c = "";
+    n.apiPath && (c = A(n.apiPath, e)(...o));
+    const l = n.body || {};
+    Object.keys(l).forEach((C) => {
+      l[C] = A(l[C], e)(...o);
+    });
+    const i = n.query || {};
+    Object.keys(i).forEach((C) => {
+      i[C] = A(i[C], e)(...o);
+    });
+    const S = n.header || {};
+    Object.keys(S).forEach((C) => {
+      S[C] = A(S[C], e)(...o);
+    });
+    const y = n.method || "GET";
+    return ($ = (_ = e.context).requestAPI) == null ? void 0 : $.call(_, {
+      url: c,
+      method: y,
+      header: S,
+      body: l,
+      query: i
+    });
+  },
+  afterSuccessResponse: async (o, ...c) => {
+    if (!n.afterSuccessResponse)
+      return o;
+    const l = [...n.afterSuccessResponse || [], ...n.afterFailedResponse || []];
+    return L(
+      {
+        handler: l
+      },
+      {
+        ...e,
+        $$response: o
+      }
+    )(...c);
+  },
+  afterFailedResponse: async (o, ...c) => {
+    if (!n.afterFailedResponse)
+      return o;
+    const l = [...n.afterFailedResponse || [], ...n.afterSuccessResponse || []];
+    return L(
+      {
+        handler: l
+      },
+      {
+        ...e,
+        $$response: o
+      }
+    )(...c);
+  }
+}), Je = (n, e) => (...t) => {
+  const r = B({
+    funcName: "",
+    funcBody: `
+      function () {
+        var args  = arguments;
+        var nodeRef = $$context.nodeRefs.get(${JSON.stringify(n.nodeId)});
+        if(nodeRef && nodeRef.current) {
+          var func = nodeRef.current[${JSON.stringify(n.methodName)}]?.bind(nodeRef.current);
+          var isDev = Boolean(nodeRef.current?.getTargetComponentRef);
+          if (isDev) {
+            const ins = nodeRef.current.getTargetComponentRef()?.current;
+            func = ins?.[${JSON.stringify(n.methodName)}]?.bind(ins);
+          }
+          if (func) {
+            func.apply(null, args);
+          }
+        }
+      }`,
+    nodeContext: e.context,
+    storeManager: e.storeManager,
+    $$response: e.$$response,
+    nodeModel: e.nodeModel
+  });
+  let s = t;
+  return Array.isArray(n.args) && (s = n.args.map((o) => {
+    const c = [e.$$response, ...t].filter(Boolean);
+    return A(o, e)(...c);
+  })), r(...s);
+}, Ke = (n, e) => async (...t) => {
+  const s = A(n.currentValue, e)(...t);
+  let o;
+  if (s != null && s.then ? o = await s : o = s, n.valueType === "STATE") {
+    const c = n.targetValueName, l = e.storeManager.getStore(c.nodeId);
+    l && l.setState({
+      [c.keyPath]: o
+    });
+  } else n.valueType === "MEMORY" && (e.actionVariableSpace[n.targetValueName] = o);
+  return o;
+}, G = (n = {}, e) => {
+  const { $$context: t, getComponent: r, storeManager: s } = e, o = n, c = (i) => {
+    if (Array.isArray(i))
+      return i.map((S) => c(S));
+    if (U(i))
+      return c(i.value);
+    if (Re(i)) {
+      const S = i.value, y = S.value;
+      if (!y)
+        return console.warn("slot value is null, this maybe cause some error, pls check it", n), () => {
+        };
+      const h = (_) => {
+        const $ = `${_.id}-${F}`, C = r(_), v = q(C, _, {
+          ...e
+        }), a = S.params || [];
+        return {
+          component: (...d) => {
+            const m = ae(d, a), g = H(
+              {
+                params: m,
+                nodeRefs: t.nodeRefs,
+                // 使用空函数，避免获取到父节点的方法或者函数
+                getProps: function() {
+                },
+                callEventMethod: function() {
+                }
+              },
+              t
+            );
+            return V(v, {
+              $$context: g,
+              key: $
+            });
+          },
+          key: $
+        };
+      };
+      if (Array.isArray(y)) {
+        const _ = y == null ? void 0 : y.map(($) => h($));
+        return (...$) => _.map((C) => {
+          if (je(C.component)) {
+            const a = C.component;
+            return N.createElement(a, {
+              $$context: t,
+              key: C.key
+            });
+          } else {
+            const a = C.component;
+            return a == null ? void 0 : a(...$);
+          }
+        });
+      } else
+        return h(y).component;
+    } else {
+      if (w(i))
+        return I(i.value, {
+          nodeContext: t,
+          storeManager: e.storeManager,
+          nodeModel: e.nodeModel
+        });
+      if (oe(i)) {
+        const S = i;
+        return B({
+          funcBody: S.value,
+          funcName: S.name || "",
+          nodeContext: t,
+          storeManager: s,
+          nodeModel: e.nodeModel
+        });
+      } else {
+        if (Me(i))
+          return L(i, {
+            context: t,
+            storeManager: s,
+            actionVariableSpace: {},
+            nodeModel: e.nodeModel
+          });
+        if (k(i)) {
+          let S = i;
+          U(i) && (S = i.value);
+          const y = S, h = {};
+          return Object.keys(S).forEach((_) => {
+            h[_] = c(y[_]);
+          }), h;
+        } else
+          return i;
+      }
+    }
+  }, l = {};
+  return Object.keys(o).forEach((i) => {
+    const S = o[i];
+    l[i] = c(S);
+  }), l;
+}, Xe = (n, e) => {
+  const { runtimeComponentCache: t, $$context: r = {}, getComponent: s, renderMode: o } = e, { $$context: c, idx: l, ...i } = e;
+  return typeof n == "string" ? V(n) : Oe(n) ? (({ currentNode: y }) => {
+    const h = y.value.id;
+    let _ = null;
+    if (t.get(h)) {
+      const v = t.get(h);
+      _ = v == null ? void 0 : v.component;
+    } else {
+      const v = s(y);
+      _ = q(v, y, {
+        ...i
+      }), !t.get(h) && o !== "design" && t.set(h, {
+        component: _
+      });
+    }
+    const $ = `${h}-${F}`;
+    return V(_, {
+      $$context: r,
+      $$nodeModel: n,
+      key: $
+    });
+  })({
+    currentNode: n
+  }) : void 0;
+}, q = (n, e, t) => {
+  const {
+    storeManager: r,
+    variableManager: s,
+    onGetRef: o,
+    onComponentMount: c,
+    onComponentDestroy: l,
+    refManager: i,
+    processNodeConfigHook: S,
+    requestAPI: y,
+    doc: h
+  } = t, { ..._ } = t;
+  class $ extends N.Component {
+    constructor(a) {
+      super(a);
+      p(this, "_CONDITION", !0);
+      p(this, "_DESIGN_BOX", !1);
+      p(this, "_NODE_MODEL", e);
+      p(this, "_NODE_ID", e.id);
+      p(this, "UNIQUE_ID", `${e.id}_${W()}`);
+      p(this, "targetComponentRef");
+      p(this, "listenerHandler", []);
+      p(this, "storeState");
+      /** 存储清理 store 的监听函数 */
+      p(this, "storeListenDisposeList", []);
+      /** save dom and media css */
+      p(this, "domHeader");
+      p(this, "mediaStyleDomMap", {});
+      /** 存储当前节点的一些变量和方法，不具有响应性 */
+      p(this, "variableSpace");
+      p(this, "nodeName");
+      // 是否已挂载
+      p(this, "isMounted", !1);
+      p(this, "updateState", (a) => {
+        this.isMounted && (e.value.componentName === j.ROOT_CONTAINER ? this.setState(a) : this.storeState.setState(a));
+      });
+      p(this, "getStyleDomById", (a) => {
+        const u = this.mediaStyleDomMap;
+        let f = u[a];
+        return f || (f = h.createElement("style"), u[a] = f), f.id = a, f;
+      });
+      p(this, "addMediaCSS", () => {
+        var f;
+        let a = this.domHeader;
+        if (a || (a = (f = h.getElementsByTagName("head")) == null ? void 0 : f[0], this.domHeader = a), !this.domHeader) {
+          console.warn("not found header dom");
+          return;
+        }
+        const u = this._NODE_MODEL.value.css;
+        u && u.value.forEach((d) => {
+          var b;
+          const m = `${this.UNIQUE_ID}_${d.state}`;
+          let g = Q(this._NODE_MODEL);
+          if (d.state !== "normal" && (g = `${g}:${d.state}`), d.text) {
+            const E = this.getStyleDomById(m);
+            E.innerText = `.${g} { ${d.text} }`, a == null || a.appendChild(E);
+          }
+          (b = d.media) != null && b.length && d.media.forEach((E) => {
+            const x = `${m}_${E.type}_${E.value}`, M = this.getStyleDomById(x);
+            M.media = `screen and (${E.type}:${E.value}px)`, M.innerHTML = `.${g} { ${E.text} }`, a == null || a.appendChild(M);
+          });
+        });
+      });
+      p(this, "removeMediaCSS", () => {
+        const a = this.mediaStyleDomMap;
+        Object.keys(a).forEach((u) => {
+          var f;
+          (f = this.domHeader) == null || f.removeChild(a[u]);
+        }), this.mediaStyleDomMap = {};
+      });
+      p(this, "rebuildNode", () => {
+        this.storeListenDisposeList.forEach((a) => a()), this.removeMediaCSS(), this.connectStore(), this.addMediaCSS(), this.forceUpdate();
+      });
+      this.targetComponentRef = N.createRef(), this.listenerHandler = [], this.state = e.value.state || {};
+      let u = e.value.nodeName || e.id;
+      e.value.componentName === j.ROOT_CONTAINER && (u = "globalState"), this.nodeName = u;
+      const f = r.getStore(u);
+      f ? (this.storeState = f, f.setState({
+        ...e.value.state || {}
+      })) : this.storeState = r.addStore(u, () => ({
+        ...e.value.state || {}
+      }));
+      const d = this.storeState.subscribe((g) => {
+        this.setStateIfChanged(g);
+      });
+      this.storeListenDisposeList.push(d), this.connectStore();
+      const m = s.get(u);
+      m ? this.variableSpace = m : (this.variableSpace = {
+        staticVar: {},
+        methods: {}
+      }, s.add(u, this.variableSpace));
+    }
+    /** 如果值和当前 state 一样了就不触发更新 */
+    setStateIfChanged(a) {
+      this.isMounted && e.value.componentName !== j.ROOT_CONTAINER && this.setState((u) => {
+        const f = typeof a == "function" ? a(u) : a;
+        return Ee(u, { ...u, ...f }) ? null : f;
+      });
+    }
+    connectStore() {
+      const a = ee(e.props, (g) => !!w(g)), u = ee(
+        {
+          css: e.value.css,
+          class: e.value.classNames
+        },
+        (g) => !!w(g)
+      );
+      let f = [];
+      [...a, ...u].map((g) => {
+        const b = g.val, E = [
+          // 匹配 $$context.stateManger.xxx.state
+          new RegExp(`(?<=context\\.stateManager(?:\\.|\\[["'])?)\\w+(?=(?:["']?\\])?(?:\\.|\\[)?["']?state)`, "gim"),
+          // 匹配 $ALL_STATE.xxx;
+          /\$ALL_STATE(?:\.|(?:\[\s*["']))(\w+)(?=(?:["']\s*\])?)/gim,
+          // 匹配 getStateObj("xxx")
+          /getStateObj\(["']([^"']+)["']\)/gim
+        ], x = Ge(b.value, E);
+        f = [...f, ...x], /\$CTX\.globalState|\$G_STATE/.test(b.value) && f.push("globalState");
+      }).filter(Boolean);
+      const d = Array.from(new Set(f)), m = [];
+      d.length && d.forEach((g) => {
+        if (!g)
+          return;
+        r.getStore(g) || (r.addStore(g, () => ({})), console.warn(r, g, "not exits, auto create"));
+        const E = r.connect(g, (x) => {
+          this.setStateIfChanged(x);
+        });
+        m.push(E);
+      }), this.storeListenDisposeList = m;
+    }
+    componentDidMount() {
+      var f;
+      this.isMounted = !0, this.addMediaCSS(), o == null || o(this.targetComponentRef, e, this), c == null || c(this, e);
+      const a = (f = e.value.eventListener) == null ? void 0 : f.find((d) => d.name === le);
+      a && L(a.func, {
+        context: this.createCurrentNodeCtx(),
+        storeManager: r,
+        actionVariableSpace: {},
+        nodeModel: e
+      })();
+      const u = () => {
+        this.isMounted && (r.setStore(e.value.nodeName || e.id, this.storeState), this.storeState.setState({
+          ...this.state,
+          ...e.value.state || {}
+        }), this.rebuildNode());
+      };
+      e.onChange(u);
+    }
+    componentWillUnmount() {
+      var f;
+      this.storeListenDisposeList.forEach((d) => d()), this.removeMediaCSS(), l == null || l(this, e);
+      const a = ue, u = (f = e.value.eventListener) == null ? void 0 : f.find((d) => d.name === a);
+      u && L(u.func, {
+        context: this.createCurrentNodeCtx(),
+        storeManager: r,
+        actionVariableSpace: {},
+        nodeModel: e
+      })();
+    }
+    /** 转换节点的 methods */
+    transformMethods(a) {
+      const { context: u } = a, f = G(
+        {
+          methods: e.value.methods
+        },
+        {
+          $$context: u,
+          ..._,
+          nodeModel: e
+        }
+      ), d = e.value.methods || [], m = f.methods, g = d.reduce((b, E, x) => (b[E.name] = m[x], b), {});
+      u.methods = g, this.variableSpace.methods = Object.assign(this.variableSpace.methods, g);
+    }
+    /** 处理根节点的 context */
+    processRootContext(a) {
+      e.value.componentName === j.ROOT_CONTAINER && (a.globalState = this.state, a.updateGlobalState = this.updateState, a.requestAPI = y, a.getGlobalState = () => this.state);
+    }
+    processNodeClassName(a, u) {
+      var m;
+      const f = ((m = e.value.classNames) == null ? void 0 : m.map((g) => {
+        var x;
+        const b = g.name;
+        return (w(g.status) ? I(((x = g.status) == null ? void 0 : x.value) || "", {
+          nodeContext: u,
+          nodeModel: e,
+          storeManager: r
+        }) : !1) ? b : "";
+      })) || [];
+      let d = `${a ?? ""} ${f.join(" ")}`.trim();
+      return e.value.css && (d = `${Q(e)} ${d}`.trim()), d;
+    }
+    processNodeStyle(a) {
+      if (!e.value.style)
+        return {};
+      const u = G(
+        { style: e.value.style },
+        {
+          $$context: a,
+          ..._,
+          nodeModel: e
+        }
+      );
+      return Be(u.style || []);
+    }
+    processNodeChild(a, u) {
+      let f = [];
+      if (a !== void 0)
+        f = Array.isArray(a) ? a : [a];
+      else {
+        const d = [];
+        e.value.children.forEach((g, b) => {
+          const E = Xe(g, {
+            $$context: u,
+            idx: b,
+            ..._
+          });
+          d.push(E);
+        }), f = d;
+      }
+      return f;
+    }
+    processNodeConditionAndConfigHook(a, u, f) {
+      let d = e.value.condition ?? !0;
+      typeof d != "boolean" && (d = I(d.value, {
+        nodeContext: f || {},
+        nodeModel: e,
+        storeManager: r
+      }));
+      let m = {
+        condition: d,
+        props: a
+      };
+      S && (m = S(m, e));
+      const g = V(n, m.props, ...u);
+      return this._CONDITION = m.condition, m.condition ? g : N.createElement(
+        "div",
+        {
+          key: a.key,
+          style: {
+            display: "none"
+          }
+        },
+        g
+      );
+    }
+    processNodeEventListener(a) {
+      const u = e.value.eventListener, f = {};
+      return u == null || u.forEach((d) => {
+        if (qe.includes(d.name))
+          return;
+        const m = L(d.func, {
+          context: a,
+          storeManager: r,
+          actionVariableSpace: {},
+          nodeModel: e
+        });
+        f[d.name] = m;
+      }), f;
+    }
+    createCurrentNodeCtx() {
+      const { $$context: a } = this.props, u = e.value.nodeName || e.id, f = e.id, d = {
+        state: this.state || {},
+        staticVar: this.variableSpace.staticVar,
+        updateState: this.updateState,
+        storeManager: r,
+        getState: () => r.getStateObj(u),
+        getStateObj: () => r.getStateObj(u),
+        getStateObjById: (g) => r.getStateObj(g),
+        stateManager: r.getStateSnapshot(),
+        getMethods: () => {
+          const g = s.get(f).methods, b = i.get(f).current;
+          return Z(g, b);
+        },
+        getMethodsById: (g) => {
+          const b = s.get(g).methods, E = i.get(g).current;
+          return Z(b, E);
+        },
+        getStaticVar: () => s.get(u).staticVar,
+        getStaticVarById: (g) => s.get(g).staticVar,
+        /** 获取当前节点的事件函数 */
+        callEventMethod: (g, b) => {
+          var x, M;
+          const E = i.get(f).current;
+          (M = E == null ? void 0 : (x = E.props)[g]) == null || M.call(x, b);
+        },
+        /** 获取当前 node 的 props  */
+        getProps: () => {
+          const g = i.get(f).current;
+          return g == null ? void 0 : g.props;
+        },
+        nodeRefs: a.nodeRefs
+      };
+      return this.processRootContext(d), H(d, a);
+    }
+    injectEngEnv() {
+      const a = {}, u = e.value.injectEnvList || [];
+      if (Array.isArray(e.value.injectEnvList)) {
+        const f = {
+          [De.COMPONENTS]: t.components
+        };
+        u.reduce((d, m) => (d[m] = f[m], d), a);
+      }
+      return a;
+    }
+    renderCore() {
+      const { $$context: a, ...u } = this.props, f = {
+        key: e.id,
+        ...e.props,
+        ...u
+      }, d = this.createCurrentNodeCtx();
+      this.transformMethods({ context: d });
+      let m = G(f, {
+        $$context: d,
+        ..._,
+        nodeModel: e
+      });
+      const g = this.injectEngEnv();
+      Object.assign(m, g);
+      const b = this.processNodeClassName(m.className, d);
+      m.className = b;
+      const E = this.processNodeStyle(d);
+      m.style = {
+        ...(m == null ? void 0 : m.style) || {},
+        ...E || {}
+      };
+      const { children: x } = m;
+      delete m.children;
+      const M = this.processNodeChild(x, d);
+      if (m.ref = this.targetComponentRef, e.value.eventListener) {
+        const T = this.processNodeEventListener(d);
+        m = {
+          ...m,
+          ...T
+        };
+      }
+      return this.processNodeConditionAndConfigHook(m, M, d);
+    }
+    renderLoop() {
+      const { $$context: a, ...u } = this.props, f = {
+        key: e.id,
+        ...e.props,
+        ...u
+      }, d = this.createCurrentNodeCtx();
+      this.transformMethods({ context: d });
+      const m = e.value.loop;
+      let g = [];
+      if (m && m.open) {
+        this.targetComponentRef.current = [];
+        let b = m.data || [];
+        if (w(m.data)) {
+          const E = m.data;
+          b = I(E.value, {
+            nodeContext: d || {},
+            storeManager: r,
+            nodeModel: e
+          }) || [];
+        }
+        return g = b.map((...E) => {
+          const x = E[1], M = [m.forName || "item", m.forIndex || "index"], z = ae(E, M);
+          let T = "loopData";
+          m.name && (T = `${T}${m.name}`);
+          const D = H(
+            {
+              [T]: z,
+              nodeRefs: d.nodeRefs,
+              // 使用空函数，避免获取到父节点的方法或者函数
+              getProps: function() {
+              },
+              callEventMethod: function() {
+              }
+            },
+            d
+          );
+          let R = G(f, {
+            $$context: D,
+            ..._,
+            nodeModel: e
+          });
+          const pe = this.injectEngEnv();
+          Object.assign(R, pe);
+          const he = this.processNodeClassName(R.className, D);
+          R.className = he;
+          const me = this.processNodeStyle(D);
+          R.style = {
+            ...(R == null ? void 0 : R.style) || {},
+            ...me || {}
+          };
+          const { children: ge } = R;
+          delete R.children;
+          const $e = this.processNodeChild(ge, D);
+          if (R.key = `${R.key}-${x}`, w(m.key)) {
+            const P = m.key, _e = I(P.value, {
+              nodeContext: D || {},
+              storeManager: r,
+              nodeModel: e
+            });
+            R.key += `-${_e}`;
+          }
+          if (R.ref = (P) => {
+            this.targetComponentRef.current = this.targetComponentRef.current || [], this.targetComponentRef.current[x] = P;
+          }, e.value.eventListener) {
+            const P = this.processNodeEventListener(D);
+            R = {
+              ...R,
+              ...P
+            };
+          }
+          return this.processNodeConditionAndConfigHook(R, $e, D);
+        }), g;
+      }
+    }
+    render() {
+      const a = e.value.loop;
+      return a && a.open ? this.renderLoop() : this.renderCore();
+    }
+  }
+  return p($, "__CP_TYPE__", F), $.displayName = `${e.value.componentName}Dynamic`, $;
+};
+class Qe {
+  constructor() {
+    p(this, "renderMode", "normal");
+    p(this, "components", {});
+    p(this, "storeManager", new Ue());
+    // 存储节点的变量或者方法
+    p(this, "variableManager", new He());
+    p(this, "runtimeComponentCache", /* @__PURE__ */ new Map());
+    p(this, "onGetRef");
+    p(this, "onGetComponent");
+    p(this, "onComponentMount");
+    p(this, "refManager", new ie());
+    p(this, "onComponentDestroy");
+    /**
+     * 处理 props 钩子, 可以统一拦截 node 的处理，并修改其值
+     */
+    p(this, "processNodeConfigHook");
+    /** 请求 API */
+    p(this, "requestAPI", async (e) => {
+      throw console.log(e), new Error("Need to implement requestAPI for Render");
+    });
+  }
+  /**
+   * 根据 node 获取对应渲染的组件
+   * @param currentNode
+   * @returns
+   */
+  getComponent(e) {
+    var s;
+    const t = e.value.componentName;
+    let r = Fe(t, this.components);
+    return Ve(r) || (r = ke(r), this.components[t] = r), this.onGetComponent && (r = (s = this.onGetComponent) == null ? void 0 : s.call(this, r, e)), r;
+  }
+  pageRender(e, {
+    components: t,
+    onGetRef: r,
+    refManager: s,
+    $$context: o = {
+      nodeRefs: s,
+      // 使用空函数，避免获取到父节点的方法或者函数
+      getProps: function() {
+      },
+      callEventMethod: function() {
+      }
+    },
+    onGetComponent: c,
+    onComponentMount: l,
+    onComponentDestroy: i,
+    renderMode: S,
+    processNodeConfigHook: y,
+    requestAPI: h,
+    doc: _
+  }) {
+    this.renderMode = S, this.components = t, this.onGetRef = r, this.onGetComponent = c, this.onComponentMount = l, this.onComponentDestroy = i, this.processNodeConfigHook = y, this.refManager = s, this.requestAPI = h;
+    const $ = e.value.componentsTree, C = this.getComponent($), v = q(C, e.value.componentsTree, {
+      storeManager: this.storeManager,
+      variableManager: this.variableManager,
+      runtimeComponentCache: this.runtimeComponentCache,
+      getComponent: this.getComponent.bind(this),
+      refManager: this.refManager,
+      onGetRef: this.onGetRef,
+      processNodeConfigHook: y,
+      onComponentMount: l,
+      onComponentDestroy: i,
+      renderMode: S,
+      requestAPI: h,
+      components: this.components,
+      doc: _
+    }), a = {}, u = $.props;
+    return Object.keys(u).forEach((f) => {
+      a[f] = u[f].value;
+    }), a.$$context = o, V(v, a);
+  }
+  clear() {
+    this.runtimeComponentCache.clear(), this.storeManager.destroy();
+  }
+}
+const wt = Pe(new Qe()), O = (n) => {
+  const e = {};
+  return n.forEach((t) => {
+    e[t.key] = t.value;
+  }), e;
+}, Ze = Ae.reduce((n, e) => (n[e] = ({ children: t, $$attributes: r = [], ...s }) => {
+  let o = t;
+  Array.isArray(t) || (o = [t]);
+  const c = {
+    boxSizing: "border-box",
+    ...s.style || {}
+  };
+  return N.createElement(
+    e,
+    {
+      ...s,
+      ...O(r),
+      style: c
+    },
+    ...o
+  );
+}, n), {}), et = ({ children: n, width: e, height: t, $$attributes: r = [], ...s }) => {
+  let o = n;
+  Array.isArray(n) || (o = [n]), o = o.filter((S) => S !== void 0);
+  const { style: c = {}, ...l } = O(r), i = {
+    height: t,
+    width: e,
+    boxSizing: "border-box",
+    ...c,
+    ...s.style || {}
+  };
+  return N.createElement(
+    "div",
+    {
+      ...s,
+      ...l,
+      style: i
+    },
+    ...o
+  );
+}, tt = ({ afterMount: n, beforeDestroy: e, $$attributes: t = [], ...r }) => {
+  ne(() => (n == null || n(r), () => {
+    e == null || e(r);
+  }), []);
+  const s = {
+    boxSizing: "border-box",
+    ...r.style || {}
+  };
+  return N.createElement("canvas", {
+    ...r,
+    ...O(t),
+    style: s
+  });
+}, nt = ({ children: n, $$attributes: e = [], ...t }) => {
+  let r = n;
+  Array.isArray(n) || (r = [n]);
+  const s = {
+    boxSizing: "border-box",
+    ...t.style || {}
+  };
+  return N.createElement(
+    "img",
+    {
+      ...t,
+      ...O(e),
+      style: s
+    },
+    ...r
+  );
+}, rt = ({ children: n, $$attributes: e = [], ...t }) => {
+  let r = n;
+  Array.isArray(n) || (r = [n]);
+  const s = {
+    boxSizing: "border-box",
+    ...t.style || {}
+  };
+  return N.createElement(
+    "video",
+    {
+      ...t,
+      ...O(e),
+      style: s
+    },
+    ...r
+  );
+}, st = ({ children: n, $$attributes: e = [], ...t }) => {
+  let r = n;
+  Array.isArray(n) || (r = [n]);
+  const s = {
+    boxSizing: "border-box",
+    ...t.style || {}
+  };
+  return N.createElement(
+    "audio",
+    {
+      ...t,
+      ...O(e),
+      style: s
+    },
+    ...r
+  );
+}, ot = ({ $$attributes: n = [], content: e, ...t }) => {
+  const r = {
+    boxSizing: "border-box",
+    ...t.style || {}
+  };
+  return N.createElement(
+    "span",
+    {
+      ...t,
+      ...O(n),
+      style: r
+    },
+    e
+  );
+}, at = ({ children: n, $$attributes: e = [], afterMount: t, beforeDestroy: r, style: s, ...o }) => {
+  let c = n;
+  Array.isArray(n) || (c = [n]), ne(() => (t == null || t(o), () => {
+    r == null || r(o);
+  }), []);
+  const l = {
+    boxSizing: "border-box",
+    ...s || {}
+  };
+  return N.createElement(
+    "div",
+    {
+      ...o,
+      ...O(e),
+      style: l
+    },
+    ...c
+  );
+}, ct = ({ children: n, $$attributes: e = [], htmlTag: t = "div", ...r }) => {
+  let s = n;
+  Array.isArray(n) || (s = [n]);
+  const { style: o = {}, ...c } = O(e), l = {
+    boxSizing: "border-box",
+    ...o,
+    ...r.style || {}
+  };
+  return N.createElement(
+    t,
+    {
+      ...r,
+      ...c,
+      style: l
+    },
+    ...s
+  );
+}, it = {
+  RootContainer: ({ children: n }) => n,
+  ...Ze,
+  CContainer: at,
+  CVideo: rt,
+  CAudio: st,
+  CBlock: et,
+  CImage: nt,
+  CText: ot,
+  CCanvas: tt,
+  CNativeTag: ct
+};
+class lt extends N.Component {
+  constructor(t) {
+    super(t);
+    p(this, "refManager");
+    // save component instance
+    p(this, "dynamicComponentInstanceMap", /* @__PURE__ */ new Map());
+    p(this, "onGetRef", (t, r, s) => {
+      var o, c;
+      (c = (o = this.props).onGetRef) == null || c.call(o, t, r, s), this.dynamicComponentInstanceMap.set(r.id, s), this.refManager.add(r.value.refId || r.id, t);
+    });
+    p(this, "rerender", (t) => {
+      if (this.props.adapter.clear(), (t == null ? void 0 : t.nodeType) === "PAGE" && t)
+        this.setState({
+          pageModel: t
+        });
+      else if (k(t) && we(t)) {
+        const r = t;
+        this.setState({
+          pageModel: new Y(r, {
+            materials: this.state.pageModel.materialsModel.rawValue
+          })
+        });
+      }
+    });
+    this.state = {
+      pageModel: t.pageModel || new Y(t.page)
+    }, this.refManager = new ie();
+  }
+  getPageModel() {
+    return this.state.pageModel;
+  }
+  componentDidMount() {
+    const { render: t } = this.props;
+    t && (t.ref.current = this), window.parent && (window.parent.__CB_RENDER_WIN__ = window);
+  }
+  componentWillUnmount() {
+    this.refManager.destroy();
+  }
+  render() {
+    const { props: t } = this, { adapter: r, onGetComponent: s, onComponentDestroy: o, onComponentMount: c } = t, { pageModel: l } = this.state;
+    if (!l)
+      return console.warn("pageModel is null"), null;
+    const i = {
+      ...it,
+      ...t.components
+    }, S = this.props.$$context || {};
+    let y = this.props.doc;
+    return typeof window < "u" && (y = this.props.doc || window.document), r.pageRender(l, {
+      libs: {},
+      components: i,
+      refManager: this.refManager,
+      onGetRef: this.onGetRef,
+      onGetComponent: s,
+      onComponentMount: c,
+      onComponentDestroy: o,
+      $$context: {
+        ...S,
+        nodeRefs: this.refManager
+      },
+      renderMode: t.renderMode || "normal",
+      requestAPI: t.requestAPI ?? r.requestAPI,
+      processNodeConfigHook: t.processNodeConfigHook,
+      doc: y
+    });
+  }
+}
+const At = () => {
+  const n = re(null);
+  return se(() => ({
+    ref: n,
+    rerender: function(...t) {
+      n.current && n.current.rerender(...t);
+    }
+  }), []);
+};
+class ut extends N.Component {
+  constructor(t) {
+    super(t);
+    p(this, "onDoubleClick", () => {
+      this.setState({
+        hasError: !1,
+        error: null
+      });
+    });
+    this.state = { hasError: !1, error: "" };
+  }
+  static getDerivedStateFromError(t) {
+    return { hasError: !0, error: t };
+  }
+  componentDidCatch(t, r) {
+    var s, o;
+    (o = (s = this.props).onError) == null || o.call(s, r);
+  }
+  render() {
+    if (this.state.hasError) {
+      const { onDoubleClick: t } = this, r = this.props.node.value;
+      console.error(this.props.node, this.props.children);
+      const s = N.createElement(
+        "div",
+        {
+          style: {
+            backgroundColor: "rgb(255 206 215 / 13%)",
+            padding: "5px",
+            color: "#ff0000b0",
+            textAlign: "center",
+            fontSize: "12px"
+          }
+        },
+        "Render error, node id: ",
+        r.id,
+        ", node name：",
+        r.title,
+        " component name：",
+        r.title || r.componentName,
+        N.createElement("p", null, "msg: ", String(this.state.error)),
+        N.createElement(
+          "button",
+          {
+            onDoubleClick: t,
+            style: {
+              border: "1px solid rgba(100,100,100,0.1)",
+              backgroundColor: "#fff",
+              padding: "5px 10px",
+              borderRadius: "2px",
+              color: "gray",
+              cursor: "pointer",
+              marginTop: "5px"
+            }
+          },
+          "double click to refresh"
+        ),
+        N.createElement("div", {
+          style: {
+            display: "none"
+          }
+        })
+      );
+      return N.createElement(this.props.targetComponent, { onlyRenderChild: !0 }, s);
+    }
+    return this.props.children;
+  }
+}
+function dt(n) {
+  return n._reactInternals;
+}
+function ft(n) {
+  const e = dt(n);
+  if (e === void 0) {
+    if (typeof n.render == "function")
+      throw new Error("Unable to find node on an unmounted component.");
+    {
+      const r = Object.keys(n).join(",");
+      throw new Error(`Argument appears to not be a ReactComponent. Keys: ${r}`);
+    }
+  }
+  const t = Ie(e);
+  return t === null ? null : t.stateNode;
+}
+function pt(n) {
+  return ft(n);
+}
+class ht {
+  constructor() {
+    p(this, "instanceMap", /* @__PURE__ */ new Map());
+  }
+  get(e) {
+    return this.instanceMap.get(e);
+  }
+  add(e, t) {
+    const r = this.instanceMap.get(e);
+    r ? r.push(t) : this.instanceMap.set(e, [t]);
+  }
+  remove(e, t) {
+    const r = this.instanceMap.get(e);
+    if (t !== void 0 && Array.isArray(r)) {
+      const s = r.filter((o) => o !== t);
+      this.instanceMap.set(e, s);
+    } else
+      this.instanceMap.delete(e);
+  }
+  destroy() {
+    this.instanceMap.clear();
+  }
+}
+const mt = (n) => {
+  const { node: e } = n, t = se(() => {
+    const l = e.isContainer();
+    return k(l) ? l : {
+      placeholder: "Drag the component to place it",
+      width: "100%",
+      height: "100%",
+      style: {}
+    };
+  }, [e]), { placeholder: r, height: s, width: o, style: c } = t;
+  return N.createElement(
+    "div",
+    {
+      style: {
+        margin: 0,
+        padding: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "rgba(200,200,200,0.1)",
+        border: "1px solid rgba(0,0,0,0.1)",
+        borderRadius: "2px",
+        fontSize: "14px",
+        color: "gray",
+        cursor: "default",
+        minHeight: "50px",
+        width: o,
+        height: s,
+        boxSizing: "border-box",
+        ...c
+      }
+    },
+    r
+  );
+};
+class It extends N.Component {
+  constructor(t) {
+    super(t);
+    p(this, "instanceManager", new ht());
+    p(this, "renderRef");
+    p(this, "dropPlaceholder", mt);
+    p(this, "_components", {});
+    p(this, "onGetComponent", (t, r) => {
+      var i, S;
+      const s = this;
+      let o = t;
+      const c = (S = (i = r.material) == null ? void 0 : i.value.advanceCustom) == null ? void 0 : S.wrapComponent;
+      c && (o = c(t, {
+        node: r,
+        ctx: window.__C_ENGINE_DESIGNER_PLUGIN_CTX__
+      }));
+      class l extends N.Component {
+        constructor() {
+          super(...arguments);
+          p(this, "_DESIGN_BOX", !0);
+          p(this, "_NODE_MODEL", r);
+          p(this, "_NODE_ID", r.id);
+          p(this, "_UNIQUE_ID", `${r.id}_${W()}`);
+          p(this, "_STATUS");
+          p(this, "_design_target_component", N.createRef());
+          p(this, "_dom");
+        }
+        componentDidMount() {
+          s.instanceManager.add(r.id, this);
+        }
+        getTargetComponentRef() {
+          return this._design_target_component;
+        }
+        componentWillUnmount() {
+          this._STATUS = "DESTROY", s.instanceManager.remove(r.id, this);
+        }
+        getDom() {
+          var $, C, v, a;
+          if (((C = ($ = r.material) == null ? void 0 : $.value.advanceCustom) == null ? void 0 : C.autoGetDom) ?? !0) {
+            const u = pt(this), f = (v = r.material) == null ? void 0 : v.value.rootSelector;
+            return f && ((a = u == null ? void 0 : u.querySelector) == null ? void 0 : a.call(u, f)) || u;
+          } else
+            return this._dom;
+        }
+        render() {
+          var d, m, g, b;
+          const { children: _ = [], onlyRenderChild: $, ...C } = this.props, v = {
+            ...C,
+            ref: (E) => {
+              this._design_target_component.current = E;
+            }
+          };
+          let a = _;
+          if (te(_) || (a = [_]), !!!a.filter(Boolean).length && (r.isContainer() || r.value.componentName === j.ROOT_CONTAINER)) {
+            const E = (m = (d = r.material) == null ? void 0 : d.value.advanceCustom) == null ? void 0 : m.dropPlaceholder;
+            a.push(
+              N.createElement(E || s.dropPlaceholder, {
+                node: r
+              })
+            );
+          }
+          return $ ? a : ((b = (g = r.material) == null ? void 0 : g.value.advanceCustom) == null ? void 0 : b.autoGetDom) ?? !0 ? N.createElement(o, v, ...a) : N.createElement(
+            o,
+            {
+              ...v,
+              //  注入到组件中, 配合设计器使用
+              $SET_DOM: (x) => {
+                this._dom = x;
+              }
+            },
+            ...a
+          );
+        }
+      }
+      return N.forwardRef(function(h, _) {
+        return N.createElement(
+          ut,
+          {
+            node: r,
+            targetComponent: l
+          },
+          N.createElement(l, {
+            ref: _,
+            ...h
+          })
+        );
+      });
+    });
+    this._components = Object.assign(this._components, this.props.components), this.renderRef = N.createRef(), t.dropPlaceholder && (this.dropPlaceholder = t.dropPlaceholder);
+  }
+  updateComponents(t = {}) {
+    this._components = Object.assign(this._components, t), this.forceUpdate();
+  }
+  componentDidMount() {
+    var t, r;
+    window.__CHAMN_RENDER_MODE = "DESIGN", this.updateComponents(this.props.components), (r = (t = this.props).onMount) == null || r.call(t, this);
+  }
+  getPageModel() {
+    var t;
+    return (t = this.renderRef.current) == null ? void 0 : t.state.pageModel;
+  }
+  rerender(t) {
+    var r;
+    return (r = this.renderRef.current) == null ? void 0 : r.rerender(t);
+  }
+  getInstancesById(t, r) {
+    let s = [...this.instanceManager.get(t) || []];
+    return r !== void 0 && (s = s.filter((o) => r === (o == null ? void 0 : o._UNIQUE_ID))), s;
+  }
+  getInstanceByDom(t) {
+    const r = de(t);
+    if (!r)
+      return null;
+    const s = fe(r);
+    return (s == null ? void 0 : s.stateNode) || null;
+  }
+  getDomsById(t, r) {
+    const s = this.getInstancesById(t), o = [];
+    return s == null || s.forEach((c) => {
+      var i;
+      if ((c == null ? void 0 : c._STATUS) === "DESTROY")
+        return;
+      const l = c.getDom();
+      if (l && !(l instanceof Text))
+        if (r) {
+          const S = Array.from(((i = l.querySelectorAll) == null ? void 0 : i.call(l, r)) || []);
+          o.push(...S);
+        } else
+          o.push(l);
+    }), o;
+  }
+  getDomRectById(t, r) {
+    return this.getDomsById(t, r).map((c) => c == null ? void 0 : c.getBoundingClientRect()).filter(Boolean);
+  }
+  render() {
+    const { props: t, onGetComponent: r } = this, { render: s, ...o } = t;
+    return s && (s.ref.current = this), N.createElement(lt, {
+      onGetComponent: r,
+      ...o,
+      components: this._components,
+      // 拦截特殊属性配置, 配合设计模式使用
+      /**
+       * 可以对节点的一些配置数据做统一处理
+       * 比如: fixedProps 强制将 fixedProps 内的值覆盖 node 本省的配置
+       * 比如： 统一处理节点的 Condition 属性，控制节点是否显示
+       * @param config
+       * @param node
+       * @returns
+       */
+      processNodeConfigHook: (c, l) => {
+        var C, v;
+        if (l.nodeType !== "NODE")
+          return c;
+        const { props: i, condition: S } = c;
+        let y = { ...i };
+        const h = ((C = l.value.configure) == null ? void 0 : C.devState) || {}, _ = (v = l.material) == null ? void 0 : v.value.fixedProps;
+        if (_ !== void 0) {
+          if (k(_))
+            y = {
+              ...y,
+              ..._
+            };
+          else if (typeof _ == "function") {
+            const a = _(y);
+            y = {
+              ...y,
+              ...a
+            };
+          }
+        }
+        let $ = S;
+        return h.condition === !1 && ($ = h.condition), {
+          props: Ne(y, h.props || {}),
+          condition: $
+        };
+      },
+      renderMode: "design",
+      ref: this.renderRef
+    });
+  }
+}
+const de = (n) => {
+  if (!n)
+    return null;
+  const e = Object.keys(n).find((t) => t.startsWith("__reactInternalInstance$") || t.startsWith("__reactFiber$")) || "";
+  return e ? n[e] : de(n.parentElement);
+}, fe = (n) => {
+  var e;
+  return n ? (e = n == null ? void 0 : n.stateNode) != null && e._DESIGN_BOX ? n : fe(n.return) : null;
+}, Lt = () => {
+  const n = re(null);
+  return {
+    ref: n,
+    rerender: function(...e) {
+      n.current && n.current.rerender(...e);
+    },
+    getInstancesById(e, t) {
+      var r;
+      return ((r = n.current) == null ? void 0 : r.getInstancesById(e, t)) || [];
+    },
+    getInstanceByDom(e) {
+      var t;
+      return ((t = n.current) == null ? void 0 : t.getInstanceByDom(e)) || null;
+    },
+    getDomsById(e, t) {
+      var r;
+      return ((r = n.current) == null ? void 0 : r.getDomsById(e, t)) || [];
+    },
+    getDomRectById(e, t) {
+      var r;
+      return ((r = n.current) == null ? void 0 : r.getDomRectById(e, t)) || [];
+    }
+  };
+};
+class Tt {
+  constructor(e, t) {
+    p(this, "assets");
+    p(this, "loadStatus");
+    p(this, "win", window);
+    p(this, "_onSuccessList", []);
+    p(this, "_onErrorList", []);
+    this.assets = JSON.parse(JSON.stringify(e || [])), this.loadStatus = "INIT", t != null && t.window && (this.win = t.window);
+  }
+  load(e) {
+    const t = this.assets || [], r = [];
+    for (let s = 0; s < t.length; s++) {
+      const o = t[s];
+      o.id || (o.id = W()), r.push(o.id);
+      const c = o.resources.map((l) => l.src);
+      c.length && J(c, o.id, {
+        async: (e == null ? void 0 : e.async) ?? !1,
+        before: (l, i) => (this.win.document.body.appendChild(i), !1)
+      });
+    }
+    return new Promise((s, o) => {
+      if (t.length === 0) {
+        this._onSuccessList.forEach((c) => c()), s("");
+        return;
+      }
+      J.ready(r, {
+        success: () => {
+          this._onSuccessList.forEach((c) => c()), s("");
+        },
+        error: (c) => {
+          this._onErrorList.forEach((l) => l(c)), o(c);
+        }
+      });
+    });
+  }
+  onSuccess(e) {
+    return this._onSuccessList.push(e), this;
+  }
+  onError(e) {
+    return this._onErrorList.push(e), this;
+  }
+}
+export {
+  Tt as AssetLoader,
+  ht as ComponentInstanceManager,
+  F as DYNAMIC_COMPONENT_TYPE,
+  mt as DefaultDropPlaceholder,
+  Qe as DefineReactAdapter,
+  It as DesignRender,
+  qe as INNER_EVENT_LIST,
+  We as InnerPropList,
+  le as ON_DID_RENDER,
+  ue as ON_WILL_DESTROY,
+  wt as ReactAdapter,
+  ie as RefManager,
+  lt as Render,
+  Ve as canAcceptsRef,
+  Rt as collectVariable,
+  ke as compWrapper,
+  B as convertCodeStringToFunction,
+  Fe as findComponentByChainRefer,
+  Mt as flatObject,
+  Be as formatSourceStylePropertyName,
+  Pe as getAdapter,
+  xt as getCSSTextValue,
+  Ot as getComponentsLibs,
+  Z as getInheritObj,
+  Ge as getMatchVal,
+  Q as getNodeCssClassName,
+  ae as getObjFromArrayMap,
+  Dt as getThirdLibs,
+  vt as isClass,
+  I as runExpression,
+  je as shouldConstruct,
+  Lt as useDesignRender,
+  At as useRender
+};
+//# sourceMappingURL=index.es.js.map