@lark.js/mvc 0.0.1 → 0.0.3

package/dist/index.js

@@ -6,21 +6,26 @@ var ROUTER_EVENTS = {
   CHANGED: "changed",
   PAGE_UNLOAD: "page_unload"
 };
-var TAG_KEY = "lark-key";
-var TAG_ATTR_KEY = "lark-attr-key";
-var TAG_VIEW_KEY = "lark-view-key";
-var LARK_VIEW = "lark-view";
-var EVT_METHOD_REG = new RegExp(
+var LARK_KEYS = {
+  /** Attribute name: ldk (static key for skipping VDOM diff) */
+  DIFF_KEY: "ldk",
+  /** Attribute name: lak (static attribute key) */
+  ATTR_KEY: "lak",
+  /** Attribute name: lvk (view key for assign) */
+  VIEW_KEY: "lvk"
+};
+var LARK_VIEW = "v-lark";
+var EVENT_METHOD_REGEXP = new RegExp(
   `(?:([\\w-]+)${SPLITTER})?([^(]+)\\(([\\s\\S]*?)?\\)`
 );
-var VIEW_EVT_METHOD_REG = /^(\$?)([\w]*)<(.*?)>(?:<([\w ,]*)>)?$/;
-var URL_TRIM_HASH_REGEX = /(?:^.*\/\/[^/]+|#.*$)/gi;
-var URL_TRIM_QUERY_REGEX = /^[^#]*#?!?/;
-var URL_PARAM_REGEX = /([^=&?/#]+)=?([^&#?]*)/g;
-var URL_QUERY_HASH_REGEX = /[#?].*$/;
+var VIEW_EVENT_METHOD_REGEXP = /^(\$?)([\w]*)<(.*?)>(?:<([\w ,]*)>)?$/;
+var URL_TRIM_HASH_REGEXP = /(?:^.*\/\/[^/]+|#.*$)/gi;
+var URL_TRIM_QUERY_REGEXP = /^[^#]*#?!?/;
+var URL_PARAM_REGEXP = /([^=&?/#]+)=?([^&#?]*)/g;
+var URL_QUERY_HASH_REGEXP = /[#?].*$/;
 var SVG_NS = "http://www.w3.org/2000/svg";
 var MATH_NS = "http://www.w3.org/1998/Math/MathML";
-var TAG_NAME_REGEX = /<([a-z][^/\0>\x20\t\r\n\f]+)/i;
+var TAG_NAME_REGEXP = /<([a-z][^/\0>\x20\t\r\n\f]+)/i;
 var CALL_BREAK_TIME = 48;
 function nextCounter() {
   return ++globalCounter;
@@ -158,10 +163,10 @@ function paramsReplacer(_match, name, value) {
 }
 function parseUri(uri) {
   paramsTemp = {};
-  const path = uri.replace(URL_QUERY_HASH_REGEX, "");
+  const path = uri.replace(URL_QUERY_HASH_REGEXP, "");
   const pathname = path;
   const actualPath = uri === pathname && IS_URL_PARAMS.test(pathname) ? "" : pathname;
-  uri.replace(actualPath, "").replace(URL_PARAM_REGEX, paramsReplacer);
+  uri.replace(actualPath, "").replace(URL_PARAM_REGEXP, paramsReplacer);
   return {
     path: actualPath,
     params: { ...paramsTemp }
@@ -201,13 +206,13 @@ function toMap(list, key) {
 function now() {
   return Date.now ? Date.now() : (/* @__PURE__ */ new Date()).getTime();
 }
-function classExtend(ctor, base, props, statics) {
+function classExtend(make, base, props, statics) {
   const baseProto = base["prototype"] ?? {};
   const cProto = Object.create(baseProto);
   assign(cProto, props);
-  Object.assign(ctor, statics);
-  cProto.constructor = ctor;
-  ctor["prototype"] = cProto;
+  Object.assign(make, statics);
+  cProto.constructor = make;
+  make["prototype"] = cProto;
 }
 
 // src/apply-style.ts
@@ -275,7 +280,7 @@ function unmark(host) {
 var proxiesPool = /* @__PURE__ */ new Map();
 var SAFEGUARD_SENTINEL = "_sf_";
 function safeguard(data, getter, setter, isRoot) {
-  if (typeof window.__lark_debug === "undefined" || !window.__lark_debug) {
+  if (typeof window.__lark_Debug === "undefined" || !window.__lark_Debug) {
     return data;
   }
   if (typeof Proxy === "undefined") {
@@ -577,7 +582,7 @@ function teardownKeysRef(keyList) {
       if (count <= 0) {
         Reflect.deleteProperty(keyRefCounts, key);
         Reflect.deleteProperty(appData, key);
-        if (typeof window.__lark_debug !== "undefined" && window.__lark_debug) {
+        if (typeof window.__lark_Debug !== "undefined" && window.__lark_Debug) {
           Reflect.deleteProperty(dataWhereSet, key);
         }
       }
@@ -620,7 +625,7 @@ var State = {
    */
   get(key) {
     const result = key ? appData[key] : appData;
-    if (typeof window.__lark_debug !== "undefined" && window.__lark_debug) {
+    if (typeof window.__lark_Debug !== "undefined" && window.__lark_Debug) {
       return safeguard(
         result,
         (dataKey) => {
@@ -646,7 +651,7 @@ var State = {
    */
   set(data, excludes) {
     dataIsChanged = setData(data, appData, changedKeys, excludes || /* @__PURE__ */ new Set()) || dataIsChanged;
-    if (typeof window.__lark_debug !== "undefined" && window.__lark_debug && booted) {
+    if (typeof window.__lark_Debug !== "undefined" && window.__lark_Debug && booted) {
       for (const p in data) {
         dataWhereSet[p] = window.location.pathname;
       }
@@ -661,7 +666,7 @@ var State = {
       State.set(data, excludes);
     }
     if (dataIsChanged) {
-      if (typeof window.__lark_debug !== "undefined" && window.__lark_debug) {
+      if (typeof window.__lark_Debug !== "undefined" && window.__lark_Debug) {
         for (const p in changedKeys) {
           if (has(changedKeys, p)) {
             clearNotify(p);
@@ -692,7 +697,7 @@ var State = {
    */
   clean(keys2) {
     return {
-      ctor: function() {
+      make: function() {
         const keyList = setupKeysRef(keys2);
         this.on("destroy", () => {
           teardownKeysRef(keyList);
@@ -855,8 +860,8 @@ var Router = {
     if (cached) {
       return cached;
     }
-    const srcQuery = href.replace(URL_TRIM_HASH_REGEX, "");
-    const srcHash = href.replace(URL_TRIM_QUERY_REGEX, "");
+    const srcQuery = href.replace(URL_TRIM_HASH_REGEXP, "");
+    const srcHash = href.replace(URL_TRIM_QUERY_REGEXP, "");
     const query = parseUri(srcQuery);
     const hash = parseUri(srcHash);
     const params = assign({}, query["params"], hash["params"]);
@@ -873,7 +878,7 @@ var Router = {
       attachViewAndPath(location);
       hrefCache.set(href, location);
     }
-    if (typeof window.__lark_debug !== "undefined" && window.__lark_debug) {
+    if (typeof window.__lark_Debug !== "undefined" && window.__lark_Debug) {
       location["params"] = safeguard(location["params"]);
     }
     return location;
@@ -897,7 +902,7 @@ var Router = {
       );
     }
     silent = 0;
-    if (typeof window.__lark_debug !== "undefined" && window.__lark_debug && lastChanged) {
+    if (typeof window.__lark_Debug !== "undefined" && window.__lark_Debug && lastChanged) {
       lastChanged = safeguard(lastChanged);
     }
     return lastChanged;
@@ -958,9 +963,9 @@ var Router = {
   join(...paths) {
     let result = paths.join("/");
     result = result.replace(/\/\.\//g, "/");
-    const doubleDotRegex = /\/[^/]+\/\.\.\//;
-    while (doubleDotRegex.test(result)) {
-      result = result.replace(doubleDotRegex, "/");
+    const doubleDotRegExp = /\/[^/]+\/\.\.\//;
+    while (doubleDotRegExp.test(result)) {
+      result = result.replace(doubleDotRegExp, "/");
     }
     result = result.replace(/\/{2,}/g, "/");
     return result;
@@ -1062,7 +1067,7 @@ function parseEventInfo(eventInfo) {
   if (cached) {
     return assign({}, cached, { r: eventInfo });
   }
-  const match = eventInfo.match(EVT_METHOD_REG) || [];
+  const match = eventInfo.match(EVENT_METHOD_REGEXP) || [];
   const result = {
     v: match[1] || "",
     n: match[2] || "",
@@ -1074,7 +1079,7 @@ function parseEventInfo(eventInfo) {
 function findFrameInfo(current, eventType) {
   const eventInfos = [];
   let begin = current;
-  const info = current.getAttribute(`lark-${eventType}`);
+  const info = current.getAttribute(`@${eventType}`);
   let match;
   if (info) {
     match = parseEventInfo(info);
@@ -1119,7 +1124,7 @@ function findFrameInfo(current, eventType) {
               }
             }
           }
-          if (view.tmpl && !backtrace) {
+          if (view.template && !backtrace) {
             if (match && !match.v) {
               match.v = frameId;
             }
@@ -1298,7 +1303,7 @@ function vdomGetNode(html, refNode) {
   } else if (ns === MATH_NS) {
     tag = "m";
   } else {
-    const match = TAG_NAME_REGEX.exec(html);
+    const match = TAG_NAME_REGEXP.exec(html);
     tag = match ? match[1] : "";
   }
   const wrap = WrapMeta[tag] || WrapMeta["_"];
@@ -1318,7 +1323,7 @@ function vdomGetCompareKey(node) {
   }
   let key = el.autoId ? "" : el.getAttribute("id") || void 0;
   if (!key) {
-    key = el.getAttribute(TAG_KEY) || void 0;
+    key = el.getAttribute(LARK_KEYS.DIFF_KEY) || void 0;
   }
   if (!key) {
     const larkView = el.getAttribute(LARK_VIEW);
@@ -1446,17 +1451,17 @@ function vdomSetChildNodes(oldParent, newParent, ref, frame, keys_) {
   }
 }
 function vdomSetNode(oldNode, newNode, oldParent, ref, frame, keys_) {
-  if (vdomSpecialDiff(oldNode, newNode) || oldNode.nodeType === 1 && oldNode.hasAttribute(TAG_VIEW_KEY) || !(oldNode.isEqualNode && oldNode.isEqualNode(newNode))) {
+  if (vdomSpecialDiff(oldNode, newNode) || oldNode.nodeType === 1 && oldNode.hasAttribute(LARK_KEYS.VIEW_KEY) || !(oldNode.isEqualNode && oldNode.isEqualNode(newNode))) {
     if (oldNode.nodeType === newNode.nodeType && oldNode.nodeName === newNode.nodeName) {
       if (oldNode.nodeType === 1) {
         const oldEl = oldNode;
         const newEl = newNode;
-        const staticKey = newEl.getAttribute(TAG_KEY);
-        if (staticKey && staticKey === oldEl.getAttribute(TAG_KEY)) {
+        const staticKey = newEl.getAttribute(LARK_KEYS.DIFF_KEY);
+        if (staticKey && staticKey === oldEl.getAttribute(LARK_KEYS.DIFF_KEY)) {
           return;
         }
         const newLarkView = newEl.getAttribute(LARK_VIEW);
-        const updateAttribute = !newEl.getAttribute(TAG_ATTR_KEY) || newEl.getAttribute(TAG_ATTR_KEY) !== oldEl.getAttribute(TAG_ATTR_KEY);
+        const updateAttribute = !newEl.getAttribute(LARK_KEYS.ATTR_KEY) || newEl.getAttribute(LARK_KEYS.ATTR_KEY) !== oldEl.getAttribute(LARK_KEYS.ATTR_KEY);
         let updateChildren = true;
         if (newLarkView) {
           const oldFrameId = oldEl.getAttribute("id") || "";
@@ -1527,10 +1532,10 @@ var EncoderMap = {
   "'": "#39",
   "`": "#96"
 };
-var ENCODE_REGEX = /[&<>"'`]/g;
+var ENCODE_REGEXP = /[&<>"'`]/g;
 function encodeHTML(v) {
   return String(v == null ? "" : v).replace(
-    ENCODE_REGEX,
+    ENCODE_REGEXP,
     (m) => "&" + EncoderMap[m] + ";"
   );
 }
@@ -1544,16 +1549,16 @@ var URIMap = {
   ")": "%29",
   "*": "%2A"
 };
-var URI_ENCODE_REGEX = /[!')(*]/g;
+var URI_ENCODE_REGEXP = /[!')(*]/g;
 function encodeURIExtra(v) {
   return encodeURIComponent(encodeSafe(v)).replace(
-    URI_ENCODE_REGEX,
+    URI_ENCODE_REGEXP,
     (m) => URIMap[m]
   );
 }
-var QUOTE_REGEX = /['"\\]/g;
+var QUOTE_REGEXP = /['"\\]/g;
 function encodeQ(v) {
-  return encodeSafe(v).replace(QUOTE_REGEX, "\\$&");
+  return encodeSafe(v).replace(QUOTE_REGEXP, "\\$&");
 }
 
 // src/updater.ts
@@ -1601,7 +1606,7 @@ var Updater = class {
     if (key) {
       result = this.data[key];
     }
-    if (typeof window !== "undefined" && window.__lark_debug) {
+    if (typeof window !== "undefined" && window.__lark_Debug) {
       return safeguard(result);
     }
     return result;
@@ -1652,9 +1657,9 @@ var Updater = class {
     const view = frame?.view;
     const node = getById(this.viewId);
     if (changed && view && node && view.signature > 0) {
-      const tmpl = view.tmpl;
-      if (tmpl && typeof tmpl === "function") {
-        const html = tmpl(
+      const template = view.template;
+      if (template && typeof template === "function") {
+        const html = template(
           this.data,
           this.viewId,
           this.refData,
@@ -1736,10 +1741,10 @@ var Updater = class {
 // src/view.ts
 var VIEW_GLOBALS = {};
 if (typeof window !== "undefined") {
-  VIEW_GLOBALS["win"] = window;
+  VIEW_GLOBALS["window"] = window;
 }
 if (typeof document !== "undefined") {
-  VIEW_GLOBALS["doc"] = document;
+  VIEW_GLOBALS["document"] = document;
 }
 function viewPrepare(oView) {
   if (oView.ctors) {
@@ -1759,7 +1764,7 @@ function viewPrepare(oView) {
     if (!has(proto, p)) continue;
     const currentFn = proto[p];
     if (typeof currentFn !== "function") continue;
-    const matches = p.match(VIEW_EVT_METHOD_REG);
+    const matches = p.match(VIEW_EVENT_METHOD_REGEXP);
     if (!matches) continue;
     const isSelector = matches[1];
     const selectorOrCallback = matches[2];
@@ -1866,11 +1871,11 @@ function viewMergeMixins(mixins, viewClass, ctors) {
       if (!has(node, p)) continue;
       const fn = node[p];
       const exist = temp[p];
-      if (p === "ctor") {
+      if (p === "make") {
         ctors.push(fn);
         continue;
       }
-      if (VIEW_EVT_METHOD_REG.test(p)) {
+      if (VIEW_EVENT_METHOD_REGEXP.test(p)) {
         if (exist) {
           temp[p] = processMixinsSameEvent(fn, exist);
         } else {
@@ -1968,7 +1973,7 @@ var View = class _View {
   /** Whether rendered at least once */
   rendered;
   /** Whether view has template */
-  tmpl;
+  template;
   /** Location observation config */
   locationObserved = {
     flag: 0,
@@ -2203,23 +2208,23 @@ var View = class _View {
    * Extend View to create a new View subclass.
    *
    * Supports:
-   * - props.ctor: constructor-like init (called with initParams + {node, deep})
+   * - props.make: constructor-like init (called with initParams + {node, deep})
    * - props.mixins: array of mixin objects
    * - Event method patterns: `'name<click>'` etc.
    */
   static extend(props, statics) {
     props = props || {};
-    const ctor = props["ctor"];
+    const make = props["make"];
     const ctors = [];
-    if (ctor) {
-      ctors.push(ctor);
+    if (make) {
+      ctors.push(make);
     }
     const ParentView = this;
     const ChildView = class extends ParentView {
       constructor(nodeId, ownerFrame, initParams, node, mixinCtors) {
         super(nodeId, ownerFrame, initParams, node, []);
         for (const key in props) {
-          if (has(props, key) && key !== "ctor") {
+          if (has(props, key) && key !== "make") {
             this[key] = props[key];
           }
         }
@@ -2230,7 +2235,7 @@ var View = class _View {
           initParams,
           {
             node,
-            deep: !this.tmpl
+            deep: !this.template
           }
         ];
         const concatCtors = ctors.concat(mixinCtors || []);
@@ -2241,7 +2246,7 @@ var View = class _View {
     };
     const proto = ChildView.prototype;
     for (const key in props) {
-      if (has(props, key) && key !== "ctor") {
+      if (has(props, key) && key !== "make") {
         proto[key] = props[key];
       }
     }
@@ -2320,7 +2325,7 @@ var Frame = class _Frame extends EventEmitter {
   hasAltered = 0;
   /** Whether view is destroyed */
   destroyed = 0;
-  /** View path (lark-view attribute value) */
+  /** View path (v-lark attribute value) */
   viewPath;
   /** Original template before mount */
   originalTemplate;
@@ -2358,8 +2363,8 @@ var Frame = class _Frame extends EventEmitter {
    * 5. Create View instance
    * 6. View_DelegateEvents (bind DOM events)
    * 7. Call view.init()
-   * 8. If view has tmpl, call render via Updater
-   * 9. If no tmpl, call endUpdate directly
+   * 8. If view has template, call render via Updater
+   * 9. If no template, call endUpdate directly
    */
   mountView(viewPath, viewInitParams) {
     const node = document.getElementById(this.id);
@@ -2403,14 +2408,14 @@ var Frame = class _Frame extends EventEmitter {
     viewDelegateEvents(view);
     const initResult = funcWithTry(
       view.init,
-      [params, { node, deep: !view.tmpl }],
+      [params, { node, deep: !view.template }],
       view,
       noop
     );
     const nextSign = ++this.signature;
     Promise.resolve(initResult).then(() => {
       if (nextSign !== this.signature) return;
-      if (view.tmpl) {
+      if (view.template) {
         const renderFn = view.$b;
         if (renderFn) {
           renderFn.call(view);
@@ -3047,6 +3052,114 @@ function serviceSend(service, attrs, done, flag, save) {
   }
 }
 
+// src/frame-visualizer/index.ts
+var MSG_PING = "LARK_VIS_PING";
+var MSG_PONG = "LARK_VIS_PONG";
+var MSG_REQUEST_TREE = "LARK_VIS_REQUEST_TREE";
+var MSG_TREE = "LARK_VIS_TREE";
+var MSG_TREE_DELTA = "LARK_VIS_TREE_DELTA";
+function serializeView(view) {
+  return {
+    id: view.id,
+    rendered: !!view.rendered,
+    signature: view.signature,
+    observedStateKeys: view.observedStateKeys ?? null,
+    locationObserved: {
+      flag: view.locationObserved.flag,
+      keys: view.locationObserved.keys,
+      observePath: view.locationObserved.observePath
+    },
+    hasTemplate: !!view.template
+  };
+}
+function serializeFrame(frameId) {
+  const frame = Frame.get(frameId);
+  if (!frame) return null;
+  const view = frame.view;
+  const children = [];
+  for (const childId of frame.children()) {
+    const childNode = serializeFrame(childId);
+    if (childNode) {
+      children.push(childNode);
+    }
+  }
+  return {
+    id: frame.id,
+    parentId: frame.parentId ?? null,
+    viewPath: frame.viewPath ?? null,
+    childrenCount: frame.childrenCount,
+    readyCount: frame.readyCount,
+    childrenCreated: frame.childrenCreated,
+    childrenAlter: frame.childrenAlter,
+    destroyed: frame.destroyed,
+    view: view ? serializeView(view) : null,
+    children
+  };
+}
+function serializeFrameTree() {
+  const root = Frame.root();
+  const rootNode = serializeFrame(root.id);
+  let totalFrames = 0;
+  const countFrames = (node) => {
+    if (!node) return;
+    totalFrames++;
+    for (const child of node.children) {
+      countFrames(child);
+    }
+  };
+  countFrames(rootNode);
+  return {
+    root: rootNode,
+    totalFrames,
+    timestamp: Date.now(),
+    rootId: root.id
+  };
+}
+var bridgeInstalled = false;
+var lastTreeJson = "";
+function installFrameVisualizerBridge() {
+  if (bridgeInstalled) return;
+  if (typeof window === "undefined") return;
+  bridgeInstalled = true;
+  window.addEventListener("message", (event) => {
+    const data = event.data;
+    if (!data || typeof data !== "object") return;
+    const type = data.type;
+    if (type === MSG_PING) {
+      const source = event.source;
+      if (source) {
+        source.postMessage({ type: MSG_PONG }, { targetOrigin: "*" });
+      }
+      return;
+    }
+    if (type === MSG_REQUEST_TREE) {
+      const tree = serializeFrameTree();
+      const source = event.source;
+      if (source) {
+        source.postMessage(
+          { type: MSG_TREE, data: tree },
+          { targetOrigin: "*" }
+        );
+      }
+    }
+  });
+  Frame.on("add", () => {
+    pushTreeUpdate();
+  });
+  Frame.on("remove", () => {
+    pushTreeUpdate();
+  });
+}
+function pushTreeUpdate() {
+  if (window === window.parent) return;
+  const tree = serializeFrameTree();
+  const treeJson = JSON.stringify(tree);
+  if (treeJson !== lastTreeJson) {
+    lastTreeJson = treeJson;
+    window.parent.postMessage({ type: MSG_TREE_DELTA, data: tree }, "*");
+  }
+}
+
 // src/framework.ts
 var config = {
   rootId: "lark-root",
@@ -3253,10 +3366,11 @@ var Framework = {
     booted3 = true;
     markBooted();
     markRouterBooted();
+    installFrameVisualizerBridge();
     const rootFrame2 = Frame.root(config.rootId);
     Router._bind();
     const defaultView = config.defaultView || "";
-    if (defaultView) {
+    if (defaultView && !rootFrame2.view) {
       rootFrame2.mountView(defaultView);
     }
   },
@@ -3685,20 +3799,20 @@ function createState(initialData, config2) {
   lazySet(state, initialData);
   return state;
 }
-var currLazySetKey = null;
+var curLazySetKey = null;
 function lazySet(target, data) {
   if (isObject(data)) {
     Reflect.ownKeys(data).forEach((key) => {
       const strKey = key;
-      if (currLazySetKey) throw new Error("[lark-store] lazy set key conflict");
-      currLazySetKey = strKey;
+      if (curLazySetKey) throw new Error("[lark-store] lazy set key conflict");
+      curLazySetKey = strKey;
       target[strKey] = data[strKey];
     });
   }
 }
 function isLazySet(property) {
-  if (currLazySetKey === property) {
-    currLazySetKey = "";
+  if (curLazySetKey === property) {
+    curLazySetKey = "";
     return true;
   }
   return false;
@@ -4192,7 +4306,7 @@ function multi(useStore) {
     return useFn(view);
   });
   const mixinObj = {
-    ctor() {
+    make() {
       if (!rootViewPath) {
         const owner = this["owner"];
         rootViewPath = owner?.["path"] || "";
@@ -4216,9 +4330,9 @@ function jsObjectToUrlParams(paramsStr) {
   if (objMatch) {
     const inner = objMatch[1];
     const pairs = [];
-    const pairRegex = /(\w+)\s*:\s*(?:'([^']*)'|"([^"]*)"|([^,}]+))/g;
+    const pairRegExp = /(\w+)\s*:\s*(?:'([^']*)'|"([^"]*)"|([^,}]+))/g;
     let m;
-    while ((m = pairRegex.exec(inner)) !== null) {
+    while ((m = pairRegExp.exec(inner)) !== null) {
       const key = m[1];
       const value = m[2] ?? m[3] ?? m[4]?.trim() ?? "";
       pairs.push(`${key}=${value}`);
@@ -4240,19 +4354,19 @@ function restoreComments(source, comments) {
     return comments[parseInt(index, 10)];
   });
 }
-function processLarkEvents(source) {
+function processViewEvents(source) {
   return source.replace(
-    /lark-(\w+)="([^"]+)"/g,
+    /@(\w+)="([^"]+)"/g,
     (fullAttr, eventName, attrValue) => {
       const eventMatch = attrValue.match(/^(\w+)\((.*)\)$/s);
       if (!eventMatch) return fullAttr;
       const handlerName = eventMatch[1];
       const paramsStr = eventMatch[2].trim();
       if (!paramsStr) {
-        return `lark-${eventName}="${VIEW_ID_PLACEHOLDER}${SPLITTER2}${handlerName}()"`;
+        return `@${eventName}="${VIEW_ID_PLACEHOLDER}${SPLITTER2}${handlerName}()"`;
       }
       const urlParams = jsObjectToUrlParams(paramsStr);
-      return `lark-${eventName}="${VIEW_ID_PLACEHOLDER}${SPLITTER2}${handlerName}(${urlParams})"`;
+      return `@${eventName}="${VIEW_ID_PLACEHOLDER}${SPLITTER2}${handlerName}(${urlParams})"`;
     }
   );
 }
@@ -4325,7 +4439,7 @@ function convertArtSyntax(source, debug) {
   }
   if (blockStack.length > 0) {
     const unclosed = blockStack.map((b) => `"${b.ctrl}" at line ${b.line}`).join(", ");
-    throw new Error(`[Lark Error(tmpl-art)] unclosed block(s): ${unclosed}`);
+    throw new Error(`[@lark/mvc error] unclosed block(s): ${unclosed}`);
   }
   return result.join("");
 }
@@ -4424,7 +4538,7 @@ function convertArtExpression(code, debug, lineNo, blockStack = []) {
       const object = tokens[0];
       if (tokens.length > 1 && tokens[1] !== "as") {
         throw new Error(
-          `[Lark Error(tmpl-art)] bad each syntax: {{${code}}}. Expected "as" keyword, got "${tokens[1]}". Usage: {{each list as item [index]}}`
+          `[@lark/mvc error] bad each syntax: {{${code}}}. Expected "as" keyword, got "${tokens[1]}". Usage: {{each list as item [index]}}`
         );
       }
       const restTokens = tokens.slice(2);
@@ -4446,12 +4560,12 @@ function convertArtExpression(code, debug, lineNo, blockStack = []) {
       }
       return `${debugPrefix}<%for(let ${index}=0${refExpr},${refObjCount}=${refObj}.length${lastCount};${index}<${refObjCount};${index}++){${firstAndLast}${valueDecl}%>`;
     }
-    case "forin": {
-      blockStack.push({ ctrl: "forin", line: lineNo });
+    case "parse": {
+      blockStack.push({ ctrl: "parse", line: lineNo });
       const object = tokens[0];
       if (tokens.length > 1 && tokens[1] !== "as") {
         throw new Error(
-          `[Lark Error(tmpl-art)] bad forin syntax: {{${code}}}. Expected "as" keyword, got "${tokens[1]}". Usage: {{forin obj as val [key]}}`
+          `[@lark/mvc error] bad parse syntax: {{${code}}}. Expected "as" keyword, got "${tokens[1]}". Usage: {{for-in obj as val [key]}}`
         );
       }
       const restTokens2 = tokens.slice(2);
@@ -4472,18 +4586,18 @@ function convertArtExpression(code, debug, lineNo, blockStack = []) {
       return `${debugPrefix}<%let ${tokens.join(" ")};%>`;
     case "/if":
     case "/each":
-    case "/forin":
+    case "/parse":
     case "/for": {
       const expectedCtrl = keyword.substring(1);
       const last = blockStack.pop();
       if (!last) {
         throw new Error(
-          `[Lark Error(tmpl-art)] unexpected {{${code}}}: no matching open block`
+          `[@lark/mvc error] unexpected {{${code}}}: no matching open block`
         );
       }
       if (last.ctrl !== expectedCtrl) {
         throw new Error(
-          `[Lark Error(tmpl-art)] unexpected {{${code}}}: expected {{/${last.ctrl}}} to close block opened at line ${last.line}`
+          `[@lark/mvc error] unexpected {{${code}}}: expected {{/${last.ctrl}}} to close block opened at line ${last.line}`
         );
       }
       return `${debugPrefix}<%}%>`;
@@ -4560,12 +4674,12 @@ function compileToFunction(source, debug, file) {
         index - 2
       );
       const x11 = String.fromCharCode(17);
-      const artReg = new RegExp(`^'(\\d+)${x11}([^${x11}]+)${x11}'$`);
-      const artM = expr.match(artReg);
+      const artRegExp = new RegExp(`^'(\\d+)${x11}([^${x11}]+)${x11}'$`);
+      const artM = expr.match(artRegExp);
       let art = "";
       let line = -1;
       if (artM) {
-        expr = expr.replace(artReg, "");
+        expr = expr.replace(artRegExp, "");
         art = artM[2];
         line = parseInt(artM[1], 10);
       } else {
@@ -4624,8 +4738,8 @@ function compileToFunction(source, debug, file) {
     const filePart = file ? `\\r\\n\\tat file:${file}` : "";
     funcSource = `let $expr,$art,$line;try{${funcSource}}catch(ex){let msg='render view error:'+(ex.message||ex);if($art)msg+='\\r\\n\\tsrc art:{{'+$art+'}}\\r\\n\\tat line:'+$line;msg+='\\r\\n\\t'+($art?'translate to:':'expr:');msg+=$expr+'${filePart}';throw msg;}`;
   }
-  const viewIdReg = new RegExp(String.fromCharCode(31), "g");
-  funcSource = funcSource.replace(viewIdReg, `'+$viewId+'`);
+  const viewIdRegExp = new RegExp(String.fromCharCode(31), "g");
+  funcSource = funcSource.replace(viewIdRegExp, `'+$viewId+'`);
   const atRule = hasAtRule ? `if(!$i){$i=(ref,v,k,f)=>{for(f=ref[$g];--f;)if(ref[k=$g+f]===v)return k;ref[k=$g+ref[$g]++]=v;return k;}}` : "";
   const encode = `if(!$n){let $em={'&':'amp','<':'lt','>':'gt','"':'#34','\\'':'#39','\`':'#96'},$er=/[&<>"'\`]/g,$ef=m=>'&'+$em[m]+';';$n=v=>''+(v==null?'':v);$e=v=>$n(v).replace($er,$ef)}`;
   const encodeURIMore = `if(!$eu){let $um={'!':'%21','\\'':'%27','(':'%28',')':'%29','*':'%2A'},$uf=m=>$um[m],$uq=/[!')(*]/g;$eu=v=>encodeURIComponent($n(v)).replace($uq,$uf)}`;
@@ -4639,8 +4753,8 @@ function compileTemplate(source, options = {}) {
   const { debug = false, globalVars = [], file } = options;
   const { protectedSource, comments } = protectComments(source);
   const converted = convertArtSyntax(protectedSource, debug);
-  const larkEventProcessed = processLarkEvents(converted);
-  const finalSource = restoreComments(larkEventProcessed, comments);
+  const viewEventProcessed = processViewEvents(converted);
+  const finalSource = restoreComments(viewEventProcessed, comments);
   const funcBody = compileToFunction(finalSource, debug, file);
   const varDeclarations = globalVars.map((key) => `,${key}=$$.${key}`).join("");
   const funcWithVars = funcBody.replace("{{VARS}}", () => varDeclarations);
@@ -4658,20 +4772,20 @@ function compileTemplate(source, options = {}) {
 }
 function extractGlobalVars(source) {
   const { protectedSource, comments: _comments } = protectComments(source);
-  const larkEventProcessed = processLarkEvents(protectedSource);
-  const converted = convertArtSyntax(larkEventProcessed, false);
-  const tmpl = restoreComments(converted, _comments);
-  const tmplCmdReg = /<%([@=!:])?([\s\S]*?)%>|$/g;
+  const viewEventProcessed = processViewEvents(protectedSource);
+  const converted = convertArtSyntax(viewEventProcessed, false);
+  const template = restoreComments(converted, _comments);
+  const templateCmdRegExp = /<%([@=!:])?([\s\S]*?)%>|$/g;
   const fnParts = [];
   const htmlStore = {};
   let htmlIndex = 0;
   let lastIndex = 0;
   const htmlKey = "";
-  tmpl.replace(
-    tmplCmdReg,
+  template.replace(
+    templateCmdRegExp,
     (match, operate, content, offset) => {
       const start = operate ? 3 : 2;
-      const htmlText = tmpl.substring(lastIndex, offset + start);
+      const htmlText = template.substring(lastIndex, offset + start);
       const key = htmlKey + htmlIndex++ + htmlKey;
       htmlStore[key] = htmlText;
       lastIndex = offset + match.length - 2;
@@ -4756,17 +4870,17 @@ function extractGlobalVars(source) {
 }
 function fallbackExtractVariables(source) {
   const vars = /* @__PURE__ */ new Set();
-  const outputReg = /\{\{[:=!@]\s*([a-zA-Z_$][\w$]*)[^}]*\}\}/g;
+  const outputRegExp = /\{\{[:=!@]\s*([a-zA-Z_$][\w$]*)[^}]*\}\}/g;
   let m;
-  while ((m = outputReg.exec(source)) !== null) {
+  while ((m = outputRegExp.exec(source)) !== null) {
     vars.add(m[1]);
   }
-  const eachReg = /\{\{each\s+([a-zA-Z_$][\w$]*)\s+as/g;
-  while ((m = eachReg.exec(source)) !== null) {
+  const eachRegExp = /\{\{each\s+([a-zA-Z_$][\w$]*)\s+as/g;
+  while ((m = eachRegExp.exec(source)) !== null) {
     vars.add(m[1]);
   }
-  const ifReg = /\{\{(?:else\s+)?if\s+([a-zA-Z_$][\w$]*)[^}]*\}\}/g;
-  while ((m = ifReg.exec(source)) !== null) {
+  const ifRegExp = /\{\{(?:else\s+)?if\s+([a-zA-Z_$][\w$]*)[^}]*\}\}/g;
+  while ((m = ifRegExp.exec(source)) !== null) {
     vars.add(m[1]);
   }
   return Array.from(vars).filter((v) => !BUILTIN_GLOBAL_SET.has(v));
@@ -4829,7 +4943,7 @@ var BUILTIN_GLOBALS = {
   //   {'&':'amp','<':'gt','>':'gt','"':'#34','\'':'#39','`':'#96'}
   // Not a standalone function; referenced inside $e's closure.
   $em: 1,
-  // HTML entity RegExp — internal regex used by $e:
+  // HTML entity RegExp — internal regexp used by $e:
   //   /[&<>"'`]/g
   $er: 1,
   // HTML entity replacer function — internal helper used by $e:
@@ -4843,19 +4957,18 @@ var BUILTIN_GLOBALS = {
   // Reference lookup: (refData, value) => key
   // Finds or allocates a SPLITTER-prefixed key in refData for a given
   // object reference. Used by {{@ref}} operator for passing object
-  // references to child views via lark-view attributes.
-  // Aligned with mx.js Updater_Ref.
+  // references to child views via v-lark attributes.
   $i: 1,
   // URI encoder: v => encodeURIComponent($n(v)).replace(/[!')(*]/g, extraMap)
   // Extends encodeURIComponent with encoding of ! ' ( ) *.
-  // Applied to values in lark-event URL parameters and {{!uri}} contexts.
+  // Applied to values in @event URL parameters and {{!uri}} contexts.
   $eu: 1,
   // Quote encoder: v => $n(v).replace(/['"\\]/g, '\\$&')
   // Escapes quotes and backslashes for safe embedding in HTML attribute
   // values (e.g. data-json='...').
   $eq: 1,
   // View ID — the unique identifier of the owning View instance.
-  // Injected into lark-event attribute values at render time so that
+  // Injected into @event attribute values at render time so that
   // EventDelegator can dispatch events to the correct View handler.
   // The \x1f placeholder in compiled output is replaced with '+$viewId+'.
   $viewId: 1,
@@ -4945,7 +5058,7 @@ export {
   Bag,
   CALL_BREAK_TIME,
   Cache,
-  EVT_METHOD_REG,
+  EVENT_METHOD_REGEXP,
   EventDelegator,
   EventEmitter,
   Frame,
@@ -4957,12 +5070,9 @@ export {
   SPLITTER,
   Service,
   State,
-  TAG_ATTR_KEY,
-  TAG_KEY,
-  TAG_NAME_REGEX,
-  TAG_VIEW_KEY,
+  TAG_NAME_REGEXP,
   Updater,
-  VIEW_EVT_METHOD_REG,
+  VIEW_EVENT_METHOD_REGEXP,
   View,
   applyIdUpdates,
   applyStyle,
@@ -4991,6 +5101,7 @@ export {
   getStore,
   getUseStore,
   has,
+  installFrameVisualizerBridge,
   isArray,
   isPlainObject,
   isPrimitive,
@@ -5011,6 +5122,7 @@ export {
   parseUri,
   registerViewClass,
   safeguard,
+  serializeFrameTree,
   setData,
   shallowSet,
   mark2 as storeMark,