@yaoxiu/marketing-dsl 1.0.0 → 1.2.0

package/README.md

@@ -47,7 +47,7 @@ import { createRuntime } from '@yaoxiu/marketing-dsl';
 
 const runtime = createRuntime(dsl, {
   user: { shopName: '麦爆了旗舰店', version: '专业版' },
-  sources: { listRenewTiers: (params) => api.getTiers(params) },
+  sources: { listRenewTiers: params => api.getTiers(params) },
   handlers: { setNeverRemind: () => localStorage.setItem('never', '1') },
   emit: (event, payload) => console.log(event, payload),
 });
@@ -56,11 +56,18 @@ const unsubscribe = runtime.subscribe(() => {
   render(runtime.getTree()); // 每次通知后重新取树画一遍
 });
 
+// 用户信息异步到了、或者要切换编辑态，用 update 就地更新。
+// 不要为此重建 runtime——重建会重新拉数据源、重放曝光埋点，
+// 还会把用户已经切到的 tab 打回默认值。
+runtime.update({ user: { shopName: '麦爆了旗舰店' } });
+
 // 卸载时必须调，否则倒计时定时器不会停
 runtime.destroy();
 unsubscribe();
 ```
 
+`update` 能改 `user` / `handlers` / `editMode`。换 `dsl` 本身要重建 runtime。
+
 ## 渲染树
 
 `getTree()` 返回的是纯数据，所有解释工作都已经做完：插值算完了、条件判断过了、循环展开了、样式转成 CSS 了、坐标换算好了、动作绑好了。
@@ -97,14 +104,14 @@ unsubscribe();
 
 这几条是设计红线，不会因为「就差一点点」而放开：
 
-| 边界 | 做法 |
-| --- | --- |
-| 不执行任意代码 | 手写解析器，不用 `eval` / `new Function`；不支持函数调用和赋值 |
-| 不能沿原型链逃逸 | `constructor` / `__proto__` / `prototype` 一律读不到，函数值也读不到 |
-| 不能通过样式作恶 | 只有白名单里的属性会输出，`position: fixed` 这类会被丢弃 |
-| 不能执行 `javascript:` | 链接只允许 `http` / `https` / `mailto` / `tel` 和相对路径 |
-| 不能打任意接口 | 数据源用注册名引用，配置里写不了 URL |
-| 不能调任意方法 | `call` 只能调宿主注册在 `handlers` 里的方法 |
+| 边界                   | 做法                                                                 |
+| ---------------------- | -------------------------------------------------------------------- |
+| 不执行任意代码         | 手写解析器，不用 `eval` / `new Function`；不支持函数调用和赋值       |
+| 不能沿原型链逃逸       | `constructor` / `__proto__` / `prototype` 一律读不到，函数值也读不到 |
+| 不能通过样式作恶       | 只有白名单里的属性会输出，`position: fixed` 这类会被丢弃             |
+| 不能执行 `javascript:` | 链接只允许 `http` / `https` / `mailto` / `tel` 和相对路径            |
+| 不能打任意接口         | 数据源用注册名引用，配置里写不了 URL                                 |
+| 不能调任意方法         | `call` 只能调宿主注册在 `handlers` 里的方法                          |
 
 ## 完整 DSL 语法
 

package/dist/index.cjs

@@ -326,9 +326,11 @@ function safeImageUrl(input) {
 
 // src/actions.ts
 function createDispatcher(options) {
-  const { setState, emit, openView, closeTop, closeAll, handlers = {}, editMode = false } = options;
+  const { setState, emit, openView, closeTop, closeAll } = options;
   function dispatch(action, context) {
     if (!action || !action.type) return;
+    const handlers = options.handlers || {};
+    const editMode = !!options.editMode;
     switch (action.type) {
       case "sequence":
         (action.actions || []).forEach((item) => dispatch(item, context));
@@ -608,7 +610,13 @@ function resolveTree(input) {
   );
   const countdowns = { endTimes: [], precision: "s" };
   const renderLayers = ready ? layers.map(
-    (item, index) => resolveLayer(item.name, item.view, index === layers.length - 1, input, countdowns)
+    (item, index) => resolveLayer(
+      item.name,
+      item.view,
+      index === layers.length - 1,
+      input,
+      countdowns
+    )
   ) : [];
   return {
     ready: ready && layers.length > 0,
@@ -627,7 +635,9 @@ function resolveLayer(name, view, isTop, input, countdowns) {
   const rootLayout = stage.layout === "flow" ? "flow" : "absolute";
   const maskClosable = !!stage.maskClosable;
   const onMaskClick = maskClosable ? () => closeTop("mask") : void 0;
-  const nodes = (view.nodes || []).map((node, index) => resolveNode(node, `${name}-${index}`, rootLayout, context, input, countdowns)).filter((el) => !!el);
+  const nodes = (view.nodes || []).map(
+    (node, index) => resolveNode(node, `${name}-${index}`, rootLayout, context, input, countdowns)
+  ).filter((el) => !!el);
   return {
     name,
     type: view.type,
@@ -690,8 +700,12 @@ function resolveStageStyle(stage, isPopup, context) {
     base,
     {
       // width / height 支持数字（px）、'100%' / 'auto' / calc(...) 等相对单位，也支持 {{ }}
-      width: toLength(interpolate(stage.width === void 0 ? 320 : stage.width, context)),
-      height: toLength(interpolate(stage.height === void 0 ? 400 : stage.height, context))
+      width: toLength(
+        interpolate(stage.width === void 0 ? 320 : stage.width, context)
+      ),
+      height: toLength(
+        interpolate(stage.height === void 0 ? 400 : stage.height, context)
+      )
     },
     // stage.style 也走一遍插值，这样切 tab 时弹窗本身的背景能跟着变
     toCssStyle(interpolateDeep(stage.style, context))
@@ -737,14 +751,21 @@ function resolveCloseButton(config, layerName, closeTop) {
     return {
       key: `${layerName}-close`,
       tag: "div",
+      className: "dsl-close",
       style,
       onClick,
       children: [
         {
           key: `${layerName}-close-img`,
           tag: "img",
+          className: "dsl-close-img",
           src: image,
-          style: { width: "100%", height: "100%", objectFit: "contain", display: "block" }
+          style: {
+            width: "100%",
+            height: "100%",
+            objectFit: "contain",
+            display: "block"
+          }
         }
       ]
     };
@@ -752,12 +773,27 @@ function resolveCloseButton(config, layerName, closeTop) {
   return {
     key: `${layerName}-close`,
     tag: "div",
+    className: "dsl-close",
     style,
     onClick,
     text: config.icon || "\xD7"
   };
 }
 var BASE_STYLE = { boxSizing: "border-box" };
+var NODE_CLASS = {
+  box: "dsl-box",
+  flex: "dsl-flex",
+  repeat: "dsl-flex",
+  tabs: "dsl-tabs",
+  image: "dsl-image",
+  text: "dsl-text",
+  button: "dsl-button",
+  countdown: "dsl-flex"
+};
+function nodeClass(type, clickable) {
+  const base = `dsl-node ${NODE_CLASS[type] || ""}`.trim();
+  return clickable ? `${base} is-clickable` : base;
+}
 function resolveNode(node, key, layout, context, input, countdowns) {
   if (!node || typeof node !== "object") return void 0;
   if (node.visibleWhen && !evaluate(node.visibleWhen, context)) return void 0;
@@ -776,14 +812,23 @@ function resolveNode(node, key, layout, context, input, countdowns) {
       return {
         key,
         tag: "div",
+        className: nodeClass("box", !!onClick),
         style: Object.assign({ position: "relative" }, style),
         onClick,
-        children: resolveChildren(node.children, key, "absolute", context, input, countdowns)
+        children: resolveChildren(
+          node.children,
+          key,
+          "absolute",
+          context,
+          input,
+          countdowns
+        )
       };
     case "flex":
       return {
         key,
         tag: "div",
+        className: nodeClass("flex", !!onClick),
         style: Object.assign({ display: "flex" }, style),
         onClick,
         children: resolveChildren(node.children, key, "flow", context, input, countdowns)
@@ -792,6 +837,7 @@ function resolveNode(node, key, layout, context, input, countdowns) {
       return {
         key,
         tag: "div",
+        className: nodeClass("repeat", !!onClick),
         style: Object.assign({ display: "flex" }, style),
         onClick,
         children: resolveRepeat(node, key, context, input, countdowns)
@@ -800,6 +846,7 @@ function resolveNode(node, key, layout, context, input, countdowns) {
       return {
         key,
         tag: "div",
+        className: nodeClass("tabs", false),
         style: Object.assign({ display: "flex" }, style),
         children: resolveTabs(node, key, context, input)
       };
@@ -807,6 +854,7 @@ function resolveNode(node, key, layout, context, input, countdowns) {
       return {
         key,
         tag: "img",
+        className: nodeClass("image", !!onClick),
         src: safeImageUrl(interpolate(node.src, context)),
         style: Object.assign({ display: "block", objectFit: "cover" }, style),
         onClick
@@ -815,6 +863,7 @@ function resolveNode(node, key, layout, context, input, countdowns) {
       return {
         key,
         tag: "div",
+        className: nodeClass("text", !!onClick),
         style: Object.assign({ wordBreak: "break-word" }, style),
         text: toText(interpolate(node.content, context)),
         onClick
@@ -823,6 +872,7 @@ function resolveNode(node, key, layout, context, input, countdowns) {
       return {
         key,
         tag: "div",
+        className: nodeClass("button", true),
         style: Object.assign(
           {
             display: "flex",
@@ -857,7 +907,14 @@ function resolveRepeat(node, key, context, input, countdowns) {
       [node.itemName || "item"]: item,
       [node.indexName || "index"]: index
     });
-    return resolveNode(node.template, `${key}-${index}`, "flow", itemContext, input, countdowns);
+    return resolveNode(
+      node.template,
+      `${key}-${index}`,
+      "flow",
+      itemContext,
+      input,
+      countdowns
+    );
   }).filter((el) => !!el);
 }
 function resolveTabs(node, key, context, input) {
@@ -873,6 +930,7 @@ function resolveTabs(node, key, context, input) {
     return {
       key: `${key}-${index}`,
       tag: "div",
+      className: index === active ? "dsl-tab-item is-active" : "dsl-tab-item",
       style: Object.assign(
         {
           display: "flex",
@@ -909,6 +967,7 @@ function resolveCountdown(node, key, style, context, input, countdowns) {
     return {
       key,
       tag: "div",
+      className: "dsl-node dsl-text dsl-countdown",
       style: Object.assign({ wordBreak: "break-word" }, style),
       text: node.endText || "\u5DF2\u7ED3\u675F"
     };
@@ -917,6 +976,7 @@ function resolveCountdown(node, key, style, context, input, countdowns) {
     return {
       key,
       tag: "div",
+      className: "dsl-node dsl-text dsl-countdown",
       style: Object.assign({ wordBreak: "break-word" }, style),
       text: formatParts(parts, node.format)
     };
@@ -925,8 +985,16 @@ function resolveCountdown(node, key, style, context, input, countdowns) {
   return {
     key,
     tag: "div",
+    className: "dsl-node dsl-flex dsl-countdown",
     style: Object.assign({ display: "flex" }, style),
-    children: resolveChildren(node.children, key, "flow", childContext, input, countdowns)
+    children: resolveChildren(
+      node.children,
+      key,
+      "flow",
+      childContext,
+      input,
+      countdowns
+    )
   };
 }
 function toText(value) {
@@ -937,7 +1005,12 @@ function toText(value) {
 var noopEmit = () => {
 };
 function createRuntime(dsl, options = {}) {
-  const { user = {}, sources = {}, handlers = {}, editMode = false, emit = noopEmit } = options;
+  const { sources = {}, emit = noopEmit } = options;
+  const live = {
+    user: options.user || {},
+    handlers: options.handlers || {},
+    editMode: !!options.editMode
+  };
   const normalized = normalizeViews(dsl);
   let state = Object.assign({}, dsl.state || {});
   let resolvedData = {};
@@ -953,7 +1026,10 @@ function createRuntime(dsl, options = {}) {
   };
   const ticker = createTicker({ onTick: notify });
   function buildContext() {
-    const context = Object.assign({}, resolvedData, { state, user });
+    const context = Object.assign({}, resolvedData, {
+      state,
+      user: live.user
+    });
     const derived = dsl.derived || {};
     Object.keys(derived).forEach((name) => {
       const config = derived[name] || {};
@@ -1014,8 +1090,12 @@ function createRuntime(dsl, options = {}) {
     // 配置里 close 可以自带 reason（如 'never-remind'），要透传给埋点，不能吞掉
     closeTop: (reason) => closeTop(reason),
     closeAll: (reason) => closeAll(reason),
-    handlers,
-    editMode
+    get handlers() {
+      return live.handlers;
+    },
+    get editMode() {
+      return live.editMode;
+    }
   });
   function fireLifecycle(viewName, hook, extra) {
     const view = normalized.views[viewName];
@@ -1042,7 +1122,7 @@ function createRuntime(dsl, options = {}) {
         return;
       }
       pending.push(
-        Promise.resolve(source(ref.params || {}, user)).then((result) => {
+        Promise.resolve(source(ref.params || {}, live.user)).then((result) => {
           resolved[key] = result;
         })
       );
@@ -1080,6 +1160,12 @@ function createRuntime(dsl, options = {}) {
   }
   return {
     getTree,
+    update(patch) {
+      if (patch.user !== void 0) live.user = patch.user;
+      if (patch.handlers !== void 0) live.handlers = patch.handlers;
+      if (patch.editMode !== void 0) live.editMode = patch.editMode;
+      notify();
+    },
     subscribe(listener) {
       listeners.add(listener);
       return () => listeners.delete(listener);
@@ -1158,7 +1244,10 @@ function validate(dsl) {
   }
   const doc = dsl;
   if (doc.version !== DSL_VERSION) {
-    add("version", `version \u5FC5\u987B\u662F ${DSL_VERSION}\uFF0C\u5F53\u524D\u4E3A ${JSON.stringify(doc.version)}`);
+    add(
+      "version",
+      `version \u5FC5\u987B\u662F ${DSL_VERSION}\uFF0C\u5F53\u524D\u4E3A ${JSON.stringify(doc.version)}`
+    );
   }
   const dataKeys = validateData(doc.data, add);
   const stateKeys = validateState(doc.state, add);
@@ -1258,7 +1347,10 @@ function validateStage(stage, add, warn, ctx, prefix) {
   if (stage.onShow !== void 0) validateAction(stage.onShow, at("onShow"), ctx);
   if (stage.onClose !== void 0) validateAction(stage.onClose, at("onClose"), ctx);
   if (stage.height === "auto" && stage.layout !== "flow") {
-    add("stage.height", "height: 'auto' \u9700\u8981\u540C\u65F6\u8BBE\u7F6E stage.layout: 'flow'\uFF0C\u5426\u5219\u9AD8\u5EA6\u4F1A\u584C\u6210 0");
+    add(
+      "stage.height",
+      "height: 'auto' \u9700\u8981\u540C\u65F6\u8BBE\u7F6E stage.layout: 'flow'\uFF0C\u5426\u5219\u9AD8\u5EA6\u4F1A\u584C\u6210 0"
+    );
   }
 }
 function validateCloseButton(config, add, warn) {
@@ -1272,7 +1364,10 @@ function validateCloseButton(config, add, warn) {
   }
   if (config.offset !== void 0) {
     if (!Array.isArray(config.offset) || config.offset.length !== 2) {
-      add("stage.closeButton.offset", "offset \u5FC5\u987B\u662F [x, y] \u4E24\u9879\u6570\u7EC4\uFF0C\u8D1F\u503C\u4F1A\u628A\u6309\u94AE\u79FB\u5230\u5F39\u7A97\u5916\u9762");
+      add(
+        "stage.closeButton.offset",
+        "offset \u5FC5\u987B\u662F [x, y] \u4E24\u9879\u6570\u7EC4\uFF0C\u8D1F\u503C\u4F1A\u628A\u6309\u94AE\u79FB\u5230\u5F39\u7A97\u5916\u9762"
+      );
     } else {
       config.offset.forEach((value, index) => {
         if (!checkLength(value)) {
@@ -1293,7 +1388,10 @@ function validateCloseButton(config, add, warn) {
   if (config.style) {
     Object.keys(config.style).forEach((key) => {
       if (ALLOWED_STYLE_KEYS.indexOf(key) === -1) {
-        warn(`stage.closeButton.style.${key}`, `\u6837\u5F0F\u5C5E\u6027 "${key}" \u4E0D\u5728\u767D\u540D\u5355\u5185\uFF0C\u6E32\u67D3\u65F6\u4F1A\u88AB\u5FFD\u7565`);
+        warn(
+          `stage.closeButton.style.${key}`,
+          `\u6837\u5F0F\u5C5E\u6027 "${key}" \u4E0D\u5728\u767D\u540D\u5355\u5185\uFF0C\u6E32\u67D3\u65F6\u4F1A\u88AB\u5FFD\u7565`
+        );
       }
     });
   }
@@ -1364,7 +1462,10 @@ function validateNode(node, path, layout, ctx) {
     } else {
       node.rect.forEach((value, index) => {
         if (value !== void 0 && value !== null && !checkLength(value)) {
-          add(`${path}.rect[${index}]`, `"${value}" \u4E0D\u662F\u5408\u6CD5\u957F\u5EA6\uFF0C\u652F\u6301\u6570\u5B57(px) / '100%' / 'auto' \u7B49`);
+          add(
+            `${path}.rect[${index}]`,
+            `"${value}" \u4E0D\u662F\u5408\u6CD5\u957F\u5EA6\uFF0C\u652F\u6301\u6570\u5B57(px) / '100%' / 'auto' \u7B49`
+          );
         }
       });
     }
@@ -1382,7 +1483,10 @@ function validateNode(node, path, layout, ctx) {
         );
       }
       if (key === "aspectRatio" && !checkAspectRatio(node.style[key])) {
-        add(`${path}.style.aspectRatio`, "aspectRatio \u8981\u5199\u6210 '750 / 200' \u6216 1.5 \u8FD9\u6837\u7684\u5BBD\u9AD8\u6BD4");
+        add(
+          `${path}.style.aspectRatio`,
+          "aspectRatio \u8981\u5199\u6210 '750 / 200' \u6216 1.5 \u8FD9\u6837\u7684\u5BBD\u9AD8\u6BD4"
+        );
       }
     });
   }
@@ -1412,7 +1516,8 @@ function validateNodeByType(node, path, ctx) {
     if (typeof node.bind !== "string") {
       add(`${path}.bind`, "tabs \u5FC5\u987B\u63D0\u4F9B bind\uFF08data \u4E2D\u7684\u6570\u7EC4\u5B57\u6BB5\u540D\uFF09");
     }
-    if (typeof node.stateKey !== "string") add(`${path}.stateKey`, "tabs \u5FC5\u987B\u63D0\u4F9B stateKey");
+    if (typeof node.stateKey !== "string")
+      add(`${path}.stateKey`, "tabs \u5FC5\u987B\u63D0\u4F9B stateKey");
     if (node.labelField !== void 0 && typeof node.labelField !== "string") {
       add(`${path}.labelField`, "labelField \u5FC5\u987B\u662F\u5B57\u7B26\u4E32");
     }
@@ -1478,7 +1583,10 @@ function validateAction(action, path, ctx) {
       add(`${path}.view`, `views \u91CC\u4E0D\u5B58\u5728\u89C6\u56FE "${action.view}"`);
     }
     if (action.mode !== void 0 && ["stack", "replace"].indexOf(action.mode) === -1) {
-      add(`${path}.mode`, "mode \u53EA\u80FD\u662F 'stack'\uFF08\u9ED8\u8BA4\uFF0C\u53E0\u4E00\u5C42\uFF09\u6216 'replace'\uFF08\u6362\u6389\u5F53\u524D\u5C42\uFF09");
+      add(
+        `${path}.mode`,
+        "mode \u53EA\u80FD\u662F 'stack'\uFF08\u9ED8\u8BA4\uFF0C\u53E0\u4E00\u5C42\uFF09\u6216 'replace'\uFF08\u6362\u6389\u5F53\u524D\u5C42\uFF09"
+      );
     }
   }
   if (action.type === "sequence") {

package/dist/index.d.cts

@@ -153,6 +153,12 @@ interface RenderElement {
     key: string;
     /** 画成什么。div 带 text 就是文本节点，带 children 就是容器 */
     tag: 'div' | 'img';
+    /**
+     * 类名，如 "dsl-node dsl-text is-clickable"。
+     * 不参与样式（样式全在 style 里），纯粹是留给调试和宿主微调的钩子。
+     * 由 core 统一生成，不让各框架壳各拼一套，否则 DOM 结构会慢慢跑偏。
+     */
+    className: string;
     style: CssStyle;
     text?: string;
     src?: string;
@@ -287,6 +293,16 @@ interface RuntimeOptions {
 interface DslRuntime {
     /** 当前渲染树。每次 subscribe 回调后重新取 */
     getTree: () => RenderTree;
+    /**
+     * 更新宿主传进来的东西。
+     *
+     * user 常常是异步到的（弹窗先挂载、用户信息后到），
+     * 不给更新入口的话文案就永远停在初始值。
+     * editMode / handlers 同理，宿主可能中途换。
+     *
+     * 不会重新拉数据源，也不会重放 onShow 曝光埋点——那些是一次性的。
+     */
+    update: (patch: Pick<RuntimeOptions, 'user' | 'handlers' | 'editMode'>) => void;
     /** 状态变化时回调，返回取消订阅的函数 */
     subscribe: (listener: () => void) => () => void;
     /** 供调试台等外部读取，正常渲染不需要 */

package/dist/index.d.ts

@@ -153,6 +153,12 @@ interface RenderElement {
     key: string;
     /** 画成什么。div 带 text 就是文本节点，带 children 就是容器 */
     tag: 'div' | 'img';
+    /**
+     * 类名，如 "dsl-node dsl-text is-clickable"。
+     * 不参与样式（样式全在 style 里），纯粹是留给调试和宿主微调的钩子。
+     * 由 core 统一生成，不让各框架壳各拼一套，否则 DOM 结构会慢慢跑偏。
+     */
+    className: string;
     style: CssStyle;
     text?: string;
     src?: string;
@@ -287,6 +293,16 @@ interface RuntimeOptions {
 interface DslRuntime {
     /** 当前渲染树。每次 subscribe 回调后重新取 */
     getTree: () => RenderTree;
+    /**
+     * 更新宿主传进来的东西。
+     *
+     * user 常常是异步到的（弹窗先挂载、用户信息后到），
+     * 不给更新入口的话文案就永远停在初始值。
+     * editMode / handlers 同理，宿主可能中途换。
+     *
+     * 不会重新拉数据源，也不会重放 onShow 曝光埋点——那些是一次性的。
+     */
+    update: (patch: Pick<RuntimeOptions, 'user' | 'handlers' | 'editMode'>) => void;
     /** 状态变化时回调，返回取消订阅的函数 */
     subscribe: (listener: () => void) => () => void;
     /** 供调试台等外部读取，正常渲染不需要 */

package/dist/index.js

@@ -324,9 +324,11 @@ function safeImageUrl(input) {
 
 // src/actions.ts
 function createDispatcher(options) {
-  const { setState, emit, openView, closeTop, closeAll, handlers = {}, editMode = false } = options;
+  const { setState, emit, openView, closeTop, closeAll } = options;
   function dispatch(action, context) {
     if (!action || !action.type) return;
+    const handlers = options.handlers || {};
+    const editMode = !!options.editMode;
     switch (action.type) {
       case "sequence":
         (action.actions || []).forEach((item) => dispatch(item, context));
@@ -606,7 +608,13 @@ function resolveTree(input) {
   );
   const countdowns = { endTimes: [], precision: "s" };
   const renderLayers = ready ? layers.map(
-    (item, index) => resolveLayer(item.name, item.view, index === layers.length - 1, input, countdowns)
+    (item, index) => resolveLayer(
+      item.name,
+      item.view,
+      index === layers.length - 1,
+      input,
+      countdowns
+    )
   ) : [];
   return {
     ready: ready && layers.length > 0,
@@ -625,7 +633,9 @@ function resolveLayer(name, view, isTop, input, countdowns) {
   const rootLayout = stage.layout === "flow" ? "flow" : "absolute";
   const maskClosable = !!stage.maskClosable;
   const onMaskClick = maskClosable ? () => closeTop("mask") : void 0;
-  const nodes = (view.nodes || []).map((node, index) => resolveNode(node, `${name}-${index}`, rootLayout, context, input, countdowns)).filter((el) => !!el);
+  const nodes = (view.nodes || []).map(
+    (node, index) => resolveNode(node, `${name}-${index}`, rootLayout, context, input, countdowns)
+  ).filter((el) => !!el);
   return {
     name,
     type: view.type,
@@ -688,8 +698,12 @@ function resolveStageStyle(stage, isPopup, context) {
     base,
     {
       // width / height 支持数字（px）、'100%' / 'auto' / calc(...) 等相对单位，也支持 {{ }}
-      width: toLength(interpolate(stage.width === void 0 ? 320 : stage.width, context)),
-      height: toLength(interpolate(stage.height === void 0 ? 400 : stage.height, context))
+      width: toLength(
+        interpolate(stage.width === void 0 ? 320 : stage.width, context)
+      ),
+      height: toLength(
+        interpolate(stage.height === void 0 ? 400 : stage.height, context)
+      )
     },
     // stage.style 也走一遍插值，这样切 tab 时弹窗本身的背景能跟着变
     toCssStyle(interpolateDeep(stage.style, context))
@@ -735,14 +749,21 @@ function resolveCloseButton(config, layerName, closeTop) {
     return {
       key: `${layerName}-close`,
       tag: "div",
+      className: "dsl-close",
       style,
       onClick,
       children: [
         {
           key: `${layerName}-close-img`,
           tag: "img",
+          className: "dsl-close-img",
           src: image,
-          style: { width: "100%", height: "100%", objectFit: "contain", display: "block" }
+          style: {
+            width: "100%",
+            height: "100%",
+            objectFit: "contain",
+            display: "block"
+          }
         }
       ]
     };
@@ -750,12 +771,27 @@ function resolveCloseButton(config, layerName, closeTop) {
   return {
     key: `${layerName}-close`,
     tag: "div",
+    className: "dsl-close",
     style,
     onClick,
     text: config.icon || "\xD7"
   };
 }
 var BASE_STYLE = { boxSizing: "border-box" };
+var NODE_CLASS = {
+  box: "dsl-box",
+  flex: "dsl-flex",
+  repeat: "dsl-flex",
+  tabs: "dsl-tabs",
+  image: "dsl-image",
+  text: "dsl-text",
+  button: "dsl-button",
+  countdown: "dsl-flex"
+};
+function nodeClass(type, clickable) {
+  const base = `dsl-node ${NODE_CLASS[type] || ""}`.trim();
+  return clickable ? `${base} is-clickable` : base;
+}
 function resolveNode(node, key, layout, context, input, countdowns) {
   if (!node || typeof node !== "object") return void 0;
   if (node.visibleWhen && !evaluate(node.visibleWhen, context)) return void 0;
@@ -774,14 +810,23 @@ function resolveNode(node, key, layout, context, input, countdowns) {
       return {
         key,
         tag: "div",
+        className: nodeClass("box", !!onClick),
         style: Object.assign({ position: "relative" }, style),
         onClick,
-        children: resolveChildren(node.children, key, "absolute", context, input, countdowns)
+        children: resolveChildren(
+          node.children,
+          key,
+          "absolute",
+          context,
+          input,
+          countdowns
+        )
       };
     case "flex":
       return {
         key,
         tag: "div",
+        className: nodeClass("flex", !!onClick),
         style: Object.assign({ display: "flex" }, style),
         onClick,
         children: resolveChildren(node.children, key, "flow", context, input, countdowns)
@@ -790,6 +835,7 @@ function resolveNode(node, key, layout, context, input, countdowns) {
       return {
         key,
         tag: "div",
+        className: nodeClass("repeat", !!onClick),
         style: Object.assign({ display: "flex" }, style),
         onClick,
         children: resolveRepeat(node, key, context, input, countdowns)
@@ -798,6 +844,7 @@ function resolveNode(node, key, layout, context, input, countdowns) {
       return {
         key,
         tag: "div",
+        className: nodeClass("tabs", false),
         style: Object.assign({ display: "flex" }, style),
         children: resolveTabs(node, key, context, input)
       };
@@ -805,6 +852,7 @@ function resolveNode(node, key, layout, context, input, countdowns) {
       return {
         key,
         tag: "img",
+        className: nodeClass("image", !!onClick),
         src: safeImageUrl(interpolate(node.src, context)),
         style: Object.assign({ display: "block", objectFit: "cover" }, style),
         onClick
@@ -813,6 +861,7 @@ function resolveNode(node, key, layout, context, input, countdowns) {
       return {
         key,
         tag: "div",
+        className: nodeClass("text", !!onClick),
         style: Object.assign({ wordBreak: "break-word" }, style),
         text: toText(interpolate(node.content, context)),
         onClick
@@ -821,6 +870,7 @@ function resolveNode(node, key, layout, context, input, countdowns) {
       return {
         key,
         tag: "div",
+        className: nodeClass("button", true),
         style: Object.assign(
           {
             display: "flex",
@@ -855,7 +905,14 @@ function resolveRepeat(node, key, context, input, countdowns) {
       [node.itemName || "item"]: item,
       [node.indexName || "index"]: index
     });
-    return resolveNode(node.template, `${key}-${index}`, "flow", itemContext, input, countdowns);
+    return resolveNode(
+      node.template,
+      `${key}-${index}`,
+      "flow",
+      itemContext,
+      input,
+      countdowns
+    );
   }).filter((el) => !!el);
 }
 function resolveTabs(node, key, context, input) {
@@ -871,6 +928,7 @@ function resolveTabs(node, key, context, input) {
     return {
       key: `${key}-${index}`,
       tag: "div",
+      className: index === active ? "dsl-tab-item is-active" : "dsl-tab-item",
       style: Object.assign(
         {
           display: "flex",
@@ -907,6 +965,7 @@ function resolveCountdown(node, key, style, context, input, countdowns) {
     return {
       key,
       tag: "div",
+      className: "dsl-node dsl-text dsl-countdown",
       style: Object.assign({ wordBreak: "break-word" }, style),
       text: node.endText || "\u5DF2\u7ED3\u675F"
     };
@@ -915,6 +974,7 @@ function resolveCountdown(node, key, style, context, input, countdowns) {
     return {
       key,
       tag: "div",
+      className: "dsl-node dsl-text dsl-countdown",
       style: Object.assign({ wordBreak: "break-word" }, style),
       text: formatParts(parts, node.format)
     };
@@ -923,8 +983,16 @@ function resolveCountdown(node, key, style, context, input, countdowns) {
   return {
     key,
     tag: "div",
+    className: "dsl-node dsl-flex dsl-countdown",
     style: Object.assign({ display: "flex" }, style),
-    children: resolveChildren(node.children, key, "flow", childContext, input, countdowns)
+    children: resolveChildren(
+      node.children,
+      key,
+      "flow",
+      childContext,
+      input,
+      countdowns
+    )
   };
 }
 function toText(value) {
@@ -935,7 +1003,12 @@ function toText(value) {
 var noopEmit = () => {
 };
 function createRuntime(dsl, options = {}) {
-  const { user = {}, sources = {}, handlers = {}, editMode = false, emit = noopEmit } = options;
+  const { sources = {}, emit = noopEmit } = options;
+  const live = {
+    user: options.user || {},
+    handlers: options.handlers || {},
+    editMode: !!options.editMode
+  };
   const normalized = normalizeViews(dsl);
   let state = Object.assign({}, dsl.state || {});
   let resolvedData = {};
@@ -951,7 +1024,10 @@ function createRuntime(dsl, options = {}) {
   };
   const ticker = createTicker({ onTick: notify });
   function buildContext() {
-    const context = Object.assign({}, resolvedData, { state, user });
+    const context = Object.assign({}, resolvedData, {
+      state,
+      user: live.user
+    });
     const derived = dsl.derived || {};
     Object.keys(derived).forEach((name) => {
       const config = derived[name] || {};
@@ -1012,8 +1088,12 @@ function createRuntime(dsl, options = {}) {
     // 配置里 close 可以自带 reason（如 'never-remind'），要透传给埋点，不能吞掉
     closeTop: (reason) => closeTop(reason),
     closeAll: (reason) => closeAll(reason),
-    handlers,
-    editMode
+    get handlers() {
+      return live.handlers;
+    },
+    get editMode() {
+      return live.editMode;
+    }
   });
   function fireLifecycle(viewName, hook, extra) {
     const view = normalized.views[viewName];
@@ -1040,7 +1120,7 @@ function createRuntime(dsl, options = {}) {
         return;
       }
       pending.push(
-        Promise.resolve(source(ref.params || {}, user)).then((result) => {
+        Promise.resolve(source(ref.params || {}, live.user)).then((result) => {
           resolved[key] = result;
         })
       );
@@ -1078,6 +1158,12 @@ function createRuntime(dsl, options = {}) {
   }
   return {
     getTree,
+    update(patch) {
+      if (patch.user !== void 0) live.user = patch.user;
+      if (patch.handlers !== void 0) live.handlers = patch.handlers;
+      if (patch.editMode !== void 0) live.editMode = patch.editMode;
+      notify();
+    },
     subscribe(listener) {
       listeners.add(listener);
       return () => listeners.delete(listener);
@@ -1156,7 +1242,10 @@ function validate(dsl) {
   }
   const doc = dsl;
   if (doc.version !== DSL_VERSION) {
-    add("version", `version \u5FC5\u987B\u662F ${DSL_VERSION}\uFF0C\u5F53\u524D\u4E3A ${JSON.stringify(doc.version)}`);
+    add(
+      "version",
+      `version \u5FC5\u987B\u662F ${DSL_VERSION}\uFF0C\u5F53\u524D\u4E3A ${JSON.stringify(doc.version)}`
+    );
   }
   const dataKeys = validateData(doc.data, add);
   const stateKeys = validateState(doc.state, add);
@@ -1256,7 +1345,10 @@ function validateStage(stage, add, warn, ctx, prefix) {
   if (stage.onShow !== void 0) validateAction(stage.onShow, at("onShow"), ctx);
   if (stage.onClose !== void 0) validateAction(stage.onClose, at("onClose"), ctx);
   if (stage.height === "auto" && stage.layout !== "flow") {
-    add("stage.height", "height: 'auto' \u9700\u8981\u540C\u65F6\u8BBE\u7F6E stage.layout: 'flow'\uFF0C\u5426\u5219\u9AD8\u5EA6\u4F1A\u584C\u6210 0");
+    add(
+      "stage.height",
+      "height: 'auto' \u9700\u8981\u540C\u65F6\u8BBE\u7F6E stage.layout: 'flow'\uFF0C\u5426\u5219\u9AD8\u5EA6\u4F1A\u584C\u6210 0"
+    );
   }
 }
 function validateCloseButton(config, add, warn) {
@@ -1270,7 +1362,10 @@ function validateCloseButton(config, add, warn) {
   }
   if (config.offset !== void 0) {
     if (!Array.isArray(config.offset) || config.offset.length !== 2) {
-      add("stage.closeButton.offset", "offset \u5FC5\u987B\u662F [x, y] \u4E24\u9879\u6570\u7EC4\uFF0C\u8D1F\u503C\u4F1A\u628A\u6309\u94AE\u79FB\u5230\u5F39\u7A97\u5916\u9762");
+      add(
+        "stage.closeButton.offset",
+        "offset \u5FC5\u987B\u662F [x, y] \u4E24\u9879\u6570\u7EC4\uFF0C\u8D1F\u503C\u4F1A\u628A\u6309\u94AE\u79FB\u5230\u5F39\u7A97\u5916\u9762"
+      );
     } else {
       config.offset.forEach((value, index) => {
         if (!checkLength(value)) {
@@ -1291,7 +1386,10 @@ function validateCloseButton(config, add, warn) {
   if (config.style) {
     Object.keys(config.style).forEach((key) => {
       if (ALLOWED_STYLE_KEYS.indexOf(key) === -1) {
-        warn(`stage.closeButton.style.${key}`, `\u6837\u5F0F\u5C5E\u6027 "${key}" \u4E0D\u5728\u767D\u540D\u5355\u5185\uFF0C\u6E32\u67D3\u65F6\u4F1A\u88AB\u5FFD\u7565`);
+        warn(
+          `stage.closeButton.style.${key}`,
+          `\u6837\u5F0F\u5C5E\u6027 "${key}" \u4E0D\u5728\u767D\u540D\u5355\u5185\uFF0C\u6E32\u67D3\u65F6\u4F1A\u88AB\u5FFD\u7565`
+        );
       }
     });
   }
@@ -1362,7 +1460,10 @@ function validateNode(node, path, layout, ctx) {
     } else {
       node.rect.forEach((value, index) => {
         if (value !== void 0 && value !== null && !checkLength(value)) {
-          add(`${path}.rect[${index}]`, `"${value}" \u4E0D\u662F\u5408\u6CD5\u957F\u5EA6\uFF0C\u652F\u6301\u6570\u5B57(px) / '100%' / 'auto' \u7B49`);
+          add(
+            `${path}.rect[${index}]`,
+            `"${value}" \u4E0D\u662F\u5408\u6CD5\u957F\u5EA6\uFF0C\u652F\u6301\u6570\u5B57(px) / '100%' / 'auto' \u7B49`
+          );
         }
       });
     }
@@ -1380,7 +1481,10 @@ function validateNode(node, path, layout, ctx) {
         );
       }
       if (key === "aspectRatio" && !checkAspectRatio(node.style[key])) {
-        add(`${path}.style.aspectRatio`, "aspectRatio \u8981\u5199\u6210 '750 / 200' \u6216 1.5 \u8FD9\u6837\u7684\u5BBD\u9AD8\u6BD4");
+        add(
+          `${path}.style.aspectRatio`,
+          "aspectRatio \u8981\u5199\u6210 '750 / 200' \u6216 1.5 \u8FD9\u6837\u7684\u5BBD\u9AD8\u6BD4"
+        );
       }
     });
   }
@@ -1410,7 +1514,8 @@ function validateNodeByType(node, path, ctx) {
     if (typeof node.bind !== "string") {
       add(`${path}.bind`, "tabs \u5FC5\u987B\u63D0\u4F9B bind\uFF08data \u4E2D\u7684\u6570\u7EC4\u5B57\u6BB5\u540D\uFF09");
     }
-    if (typeof node.stateKey !== "string") add(`${path}.stateKey`, "tabs \u5FC5\u987B\u63D0\u4F9B stateKey");
+    if (typeof node.stateKey !== "string")
+      add(`${path}.stateKey`, "tabs \u5FC5\u987B\u63D0\u4F9B stateKey");
     if (node.labelField !== void 0 && typeof node.labelField !== "string") {
       add(`${path}.labelField`, "labelField \u5FC5\u987B\u662F\u5B57\u7B26\u4E32");
     }
@@ -1476,7 +1581,10 @@ function validateAction(action, path, ctx) {
       add(`${path}.view`, `views \u91CC\u4E0D\u5B58\u5728\u89C6\u56FE "${action.view}"`);
     }
     if (action.mode !== void 0 && ["stack", "replace"].indexOf(action.mode) === -1) {
-      add(`${path}.mode`, "mode \u53EA\u80FD\u662F 'stack'\uFF08\u9ED8\u8BA4\uFF0C\u53E0\u4E00\u5C42\uFF09\u6216 'replace'\uFF08\u6362\u6389\u5F53\u524D\u5C42\uFF09");
+      add(
+        `${path}.mode`,
+        "mode \u53EA\u80FD\u662F 'stack'\uFF08\u9ED8\u8BA4\uFF0C\u53E0\u4E00\u5C42\uFF09\u6216 'replace'\uFF08\u6362\u6389\u5F53\u524D\u5C42\uFF09"
+      );
     }
   }
   if (action.type === "sequence") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yaoxiu/marketing-dsl",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "type": "module",
   "description": "营销弹窗 DSL 解释器核心，纯逻辑无框架依赖",
   "license": "MIT",