@lark.js/mvc 0.0.9 → 0.0.11

package/dist/index.cjs

@@ -27,7 +27,6 @@ __export(index_exports, {
   EventDelegator: () => EventDelegator,
   EventEmitter: () => EventEmitter,
   Frame: () => Frame,
-  FrameVisualBridge: () => FrameVisualBridge,
   Framework: () => Framework,
   LARK_VIEW: () => LARK_VIEW,
   Payload: () => Payload,
@@ -40,65 +39,30 @@ __export(index_exports, {
   Updater: () => Updater,
   VIEW_EVENT_METHOD_REGEXP: () => VIEW_EVENT_METHOD_REGEXP,
   View: () => View,
-  applyDomOps: () => applyDomOps,
-  applyIdUpdates: () => applyIdUpdates,
   applyStyle: () => applyStyle,
-  assign: () => assign,
   bindStore: () => bindStore,
   computed: () => computed,
   create: () => create,
-  createDomRef: () => createDomRef,
-  defineStore: () => defineStore,
+  createVDomRef: () => createVDomRef,
   defineView: () => defineView,
-  domGetCompareKey: () => domGetCompareKey,
-  domGetNode: () => domGetNode,
-  domSetAttributes: () => domSetAttributes,
-  domSetChildNodes: () => domSetChildNodes,
-  domSetNode: () => domSetNode,
-  domSpecialDiff: () => domSpecialDiff,
-  domUnmountFrames: () => domUnmountFrames,
-  encodeHTML: () => encodeHTML,
-  encodeQ: () => encodeQ,
-  encodeSafe: () => encodeSafe,
-  encodeURIExtra: () => encodeURIExtra,
-  ensureElementId: () => ensureElementId,
   frameworkConfig: () => config,
-  funcWithTry: () => funcWithTry,
-  generateId: () => generateId,
-  getAttribute: () => getAttribute,
-  getById: () => getById,
   getRouteMode: () => getRouteMode,
-  hasOwnProperty: () => hasOwnProperty,
-  installFrameVisualizerBridge: () => installFrameVisualizerBridge,
   invalidateViewClass: () => invalidateViewClass,
-  isPlainObject: () => isPlainObject,
-  isPrimitive: () => isPrimitive,
-  isPrimitiveOrFunc: () => isPrimitiveOrFunc,
-  keys: () => keys,
   mark: () => mark,
   markBooted: () => markBooted,
   markRouterBooted: () => markRouterBooted,
   nextCounter: () => nextCounter,
-  nodeInside: () => nodeInside,
-  noop: () => noop,
-  now: () => now,
-  parseUri: () => parseUri,
   registerViewClass: () => registerViewClass,
   resetProjectsMap: () => resetProjectsMap,
   safeguard: () => safeguard,
-  serializeFrameTree: () => serializeFrameTree,
-  setData: () => setData,
-  syncCounter: () => syncCounter,
-  toMap: () => toMap,
-  toUri: () => toUri,
-  translateData: () => translateData,
   unmark: () => unmark,
   use: () => use,
-  useUrlState: () => useUrlState
+  useUrlState: () => useUrlState,
+  vdomCreate: () => vdomCreate
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/constants.ts
+// src/common.ts
 var globalCounter = 0;
 var SPLITTER = String.fromCharCode(30);
 var RouterEvents = {
@@ -114,21 +78,136 @@ var VIEW_EVENT_METHOD_REGEXP = /^(\$?)([\w]*)<(.*?)>(?:<([\w ,]*)>)?$/;
 var URL_TRIM_HASH_REGEXP = /(?:^.*\/\/[^/]+|#.*$)/gi;
 var URL_TRIM_QUERY_REGEXP = /^[^#]*#?!?/;
 var URL_PARAM_REGEXP = /([^=&?/#]+)=?([^&#?]*)/g;
+var IS_URL_PARAMS = /(?!^)=|&/;
 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_REGEXP = /<([a-z][^/\0>\x20\t\r\n\f]+)/i;
 var CALL_BREAK_TIME = 48;
+var V_TEXT_NODE = 0;
+var TAG_STATIC_KEY = "_";
+var VDOM_NS_MAP = {
+  svg: SVG_NS,
+  math: MATH_NS
+};
 function nextCounter() {
   return ++globalCounter;
 }
+var HTML_ENT_MAP = {
+  "&": "amp",
+  "<": "lt",
+  ">": "gt",
+  '"': "#34",
+  "'": "#39",
+  "`": "#96"
+};
+var HTML_ENT_REGEXP = /[&<>"'`]/g;
+function strSafe(v) {
+  return String(v == null ? "" : v);
+}
+function encodeHTML(v) {
+  return String(v == null ? "" : v).replace(
+    HTML_ENT_REGEXP,
+    (m) => "&" + HTML_ENT_MAP[m] + ";"
+  );
+}
+var URI_ENT_MAP = {
+  "!": "%21",
+  "'": "%27",
+  "(": "%28",
+  ")": "%29",
+  "*": "%2A"
+};
+var URI_ENT_REGEXP = /[!')(*]/g;
+function encodeURIExtra(v) {
+  return encodeURIComponent(strSafe(v)).replace(
+    URI_ENT_REGEXP,
+    (m) => URI_ENT_MAP[m]
+  );
+}
+var QUOTE_ENT_REGEXP = /['"\\]/g;
+function encodeQuote(v) {
+  return strSafe(v).replace(QUOTE_ENT_REGEXP, "\\$&");
+}
+function refFn(ref, value, key) {
+  const counter = ref[SPLITTER];
+  for (let i = counter; --i; ) {
+    key = SPLITTER + i;
+    if (ref[key] === value) return key;
+  }
+  key = SPLITTER + ref[SPLITTER]++;
+  ref[key] = value;
+  return key;
+}
+function isRefToken(s) {
+  if (s.length < 2 || s[0] !== SPLITTER) return false;
+  for (let i = 1; i < s.length; i++) {
+    const c = s.charCodeAt(i);
+    if (c < "0".charCodeAt(0) || c > "9".charCodeAt(0)) return false;
+  }
+  return true;
+}
 
 // src/utils.ts
+var CALL_BREAK_TIME2 = 9;
+var callQueue = [];
+var callScheduled = false;
+var schedulerYield = (() => {
+  try {
+    if (typeof globalThis?.scheduler?.yield === "function") {
+      return globalThis.scheduler.yield.bind(globalThis.scheduler);
+    }
+  } catch {
+  }
+  return void 0;
+})();
+async function startCall() {
+  callScheduled = false;
+  const startTime = performance.now();
+  while (callQueue.length > 0) {
+    const task2 = callQueue.shift();
+    try {
+      task2();
+    } catch (e) {
+      console.error("scheduler task error:", e);
+    }
+    if (callQueue.length > 0 && performance.now() - startTime > CALL_BREAK_TIME2) {
+      if (schedulerYield) {
+        await schedulerYield();
+      } else {
+        scheduleNextChunk();
+        return;
+      }
+    }
+  }
+}
+function scheduleNextChunk() {
+  setTimeout(() => startCall(), 0);
+  callScheduled = true;
+}
+function callFunction(fn, args) {
+  callQueue.push(() => fn(...args));
+  if (!callScheduled) {
+    scheduleNextChunk();
+  }
+}
 function isPlainObject(value) {
   if (typeof value !== "object" || value === null) return false;
   const proto = Object.getPrototypeOf(value);
-  if (proto === null) return true;
-  return proto === Object.prototype || proto === null;
+  return proto === null || proto === Object.prototype;
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null;
+}
+function asRecord(value) {
+  if (isRecord(value)) {
+    return value;
+  }
+  console.error("fallback to Object.fromEntries, even an empty object {}.");
+  if (Array.isArray(value)) {
+    return Object.fromEntries(value.entries());
+  }
+  return {};
 }
 function isPrimitiveOrFunc(value) {
   return !value || typeof value !== "object" && typeof value !== "function";
@@ -140,9 +219,6 @@ var _localCounter = 0;
 function generateId(prefix) {
   return (prefix || "lark_") + _localCounter++;
 }
-function syncCounter(val) {
-  _localCounter = val;
-}
 function noop() {
 }
 function hasOwnProperty(owner, prop) {
@@ -186,25 +262,17 @@ function setData(newData, oldData, changedKeys2, excludes) {
   let changed = false;
   for (const p in newData) {
     if (hasOwnProperty(newData, p)) {
-      const now2 = newData[p];
+      const now = newData[p];
       const old = oldData[p];
-      if ((!isPrimitiveOrFunc(now2) || old !== now2) && !excludes.has(p)) {
+      if ((!isPrimitiveOrFunc(now) || old !== now) && !excludes.has(p)) {
         changedKeys2.add(p);
         changed = true;
       }
-      oldData[p] = now2;
+      oldData[p] = now;
     }
   }
   return changed;
 }
-function isRefToken(s) {
-  if (s.length < 2 || s[0] !== SPLITTER) return false;
-  for (let i = 1; i < s.length; i++) {
-    const c = s.charCodeAt(i);
-    if (c < 48 || c > 57) return false;
-  }
-  return true;
-}
 function translateData(data, value) {
   if (isPrimitive(value)) {
     const prop = String(value);
@@ -233,11 +301,11 @@ function getById(id) {
 function getAttribute(element, attr) {
   return Element.prototype.getAttribute.call(element, attr) ?? "";
 }
-function ensureElementId(element) {
+function ensureElementId(element, prefix) {
   const id = element.getAttribute("id");
   if (id) return id;
   element.autoId = 1;
-  const newId = generateId();
+  const newId = generateId(prefix);
   element.id = newId;
   return newId;
 }
@@ -267,11 +335,6 @@ function parseUri(uri) {
   });
   return { path: actualPath, params };
 }
-var IS_URL_PARAMS = {
-  test(s) {
-    return /(?!^)=|&/.test(s);
-  }
-};
 function toUri(path, params, keepEmpty) {
   const pairs = [];
   let hasParams = false;
@@ -298,9 +361,6 @@ function toMap(list, key) {
   }
   return map;
 }
-function now() {
-  return Date.now ? Date.now() : (/* @__PURE__ */ new Date()).getTime();
-}
 
 // src/apply-style.ts
 var injectedStyleIds = /* @__PURE__ */ new Set();
@@ -938,14 +998,12 @@ function getChanged(oldLoc, newLoc) {
   setDiff("path", oldLoc["path"], newLoc["path"]);
   if (changedParams["path"]) {
     result["path"] = changedParams["path"];
-    hasChanged = true;
     result.changed = true;
   }
   const viewKey = "view";
   setDiff(viewKey, oldLoc.view, newLoc.view);
   if (changedParams[viewKey]) {
     result.view = changedParams[viewKey];
-    hasChanged = true;
     result.changed = true;
   }
   const finalResult = {
@@ -1054,10 +1112,7 @@ var Router = {
       if (lastChanged["path"]) {
         document.title = defaultTitle || document.title;
       }
-      emitter2.fire(
-        RouterEvents.CHANGED,
-        lastChanged
-      );
+      emitter2.fire(RouterEvents.CHANGED, asRecord(lastChanged));
     }
     silent = 0;
     if (typeof window.__lark_Debug !== "undefined" && window.__lark_Debug && lastChanged) {
@@ -1188,10 +1243,7 @@ var Router = {
             suspend = 1;
           }
         };
-        Router.fire(
-          RouterEvents.CHANGE,
-          changeEvent
-        );
+        Router.fire(RouterEvents.CHANGE, changeEvent);
         if (suspend || changeEvent.p) {
           return;
         }
@@ -1465,6 +1517,53 @@ var EventDelegator = {
   }
 };
 
+// src/module-loader.ts
+var config = {
+  rootId: "root",
+  routeMode: "history",
+  hashbang: "#!",
+  error: (error) => {
+    throw error;
+  }
+};
+function use(names, callback) {
+  const nameList = typeof names === "string" ? [names] : names;
+  const loadPromise = (() => {
+    if (config.require) {
+      const result = config.require(nameList);
+      if (result && typeof result.then === "function") {
+        return result;
+      }
+      return Promise.resolve([]);
+    }
+    return Promise.all(
+      nameList.map((name) => {
+        const importPath = name.startsWith(".") || name.startsWith("/") ? name : `./${name}`;
+        return import(
+          /* @vite-ignore */
+          /* webpackIgnore: true */
+          importPath
+        ).then((mod) => {
+          return mod && (mod["__esModule"] || // For Webpack
+          typeof mod["default"] === "function") ? mod["default"] : mod;
+        }).catch((err) => {
+          const errorHandler = config.error;
+          if (errorHandler) {
+            errorHandler(err instanceof Error ? err : new Error(String(err)));
+          }
+          return void 0;
+        });
+      })
+    );
+  })();
+  if (callback) {
+    loadPromise.then((modules) => {
+      callback(...modules);
+    });
+  }
+  return loadPromise;
+}
+
 // src/dom.ts
 var wrapMeta = {
   option: [1, "<select multiple>"],
@@ -1540,13 +1639,11 @@ function domGetCompareKey(node) {
 function domSpecialDiff(oldNode, newNode) {
   const specials = DomSpecials[oldNode.nodeName];
   if (!specials) return 0;
-  const oldEl = oldNode;
-  const newEl = newNode;
   let result = 0;
   for (const prop of specials) {
-    if (oldEl[prop] !== newEl[prop]) {
+    if (Reflect.get(oldNode, prop) !== Reflect.get(newNode, prop)) {
       result = 1;
-      oldEl[prop] = newEl[prop];
+      Reflect.set(oldNode, prop, Reflect.get(newNode, prop));
     }
   }
   return result;
@@ -1727,57 +1824,530 @@ function applyIdUpdates(updates) {
     }
   }
 }
-var EncoderMap = {
-  "&": "amp",
-  "<": "lt",
-  ">": "gt",
-  '"': "#34",
-  "'": "#39",
-  "`": "#96"
+
+// src/vdom.ts
+var DOM_SPECIALS = {
+  INPUT: ["value", "checked"],
+  TEXTAREA: ["value"],
+  OPTION: ["selected"]
 };
-var ENCODE_REGEXP = /[&<>"'`]/g;
-function encodeHTML(v) {
-  return String(v == null ? "" : v).replace(
-    ENCODE_REGEXP,
-    (m) => "&" + EncoderMap[m] + ";"
-  );
+function vdomCreate(tag, props, children, specials) {
+  if (!tag) {
+    return {
+      tag: children ? SPLITTER : V_TEXT_NODE,
+      html: String(props ?? "")
+    };
+  }
+  const propsObj = props || {};
+  const specialsObj = specials || {};
+  const unary = children === 1;
+  let compareKey;
+  let innerHTML = "";
+  let newChildren;
+  let reused;
+  let reusedTotal = 0;
+  let viewList;
+  let isLarkView2;
+  let attrs = `<${tag}`;
+  let hasSpecials;
+  let prevChild;
+  if (children && children !== 1) {
+    for (const c of children) {
+      if (c.attrs !== void 0) {
+        innerHTML += c.attrs + (c.selfClose ? "/>" : `>${c.html}</${c.tag}>`);
+      } else {
+        if (c.tag === V_TEXT_NODE) {
+          innerHTML += encodeHTML(c.html);
+        } else {
+          innerHTML += c.html;
+        }
+      }
+      if (c.tag === V_TEXT_NODE && prevChild && prevChild.tag === V_TEXT_NODE) {
+        prevChild.html += c.html;
+      } else {
+        if (!newChildren) newChildren = [];
+        newChildren.push(c);
+        prevChild = c;
+      }
+      if (c.compareKey) {
+        if (!reused) reused = {};
+        reused[c.compareKey] = (reused[c.compareKey] || 0) + 1;
+        reusedTotal++;
+      }
+      if (c.views) {
+        if (!viewList) viewList = [];
+        viewList.push(...c.views);
+      }
+    }
+  }
+  hasSpecials = specials || void 0;
+  for (const prop in propsObj) {
+    let value = propsObj[prop];
+    if (value === false || value == null) {
+      if (!specialsObj[prop]) {
+        delete propsObj[prop];
+      }
+      continue;
+    } else if (value === true) {
+      propsObj[prop] = value = specialsObj[prop] ? value : "";
+    }
+    if ((prop === "#" || prop === "id" || prop === TAG_STATIC_KEY) && !compareKey) {
+      compareKey = value;
+      if (prop !== "id") {
+        delete propsObj[prop];
+        continue;
+      }
+    }
+    if (prop === LARK_VIEW && value) {
+      const parsed = parseUri(value);
+      isLarkView2 = parsed.path;
+      if (!viewList) viewList = [];
+      viewList.push([
+        isLarkView2,
+        propsObj["lark-owner"],
+        value,
+        parsed.params
+      ]);
+      if (!compareKey) {
+        compareKey = tag + SPLITTER + isLarkView2;
+      }
+    }
+    if (prop === "value" && tag === "textarea") {
+      innerHTML = String(value);
+      delete propsObj[prop];
+      continue;
+    }
+    attrs += ` ${prop}="${value && encodeHTML(value)}"`;
+  }
+  return {
+    tag,
+    html: innerHTML,
+    attrs,
+    attrsMap: propsObj,
+    attrsSpecials: specialsObj,
+    hasSpecials,
+    children: newChildren,
+    compareKey,
+    reused,
+    reusedTotal,
+    views: viewList,
+    selfClose: unary,
+    isLarkView: isLarkView2
+  };
 }
-function encodeSafe(v) {
-  return String(v == null ? "" : v);
+function isSameVDomNode(a, b) {
+  return a.compareKey && b.compareKey === a.compareKey || !a.compareKey && !b.compareKey && a.tag === b.tag || a.tag === SPLITTER || b.tag === SPLITTER;
 }
-var URIMap = {
-  "!": "%21",
-  "'": "%27",
-  "(": "%28",
-  ")": "%29",
-  "*": "%2A"
-};
-var URI_ENCODE_REGEXP = /[!')(*]/g;
-function encodeURIExtra(v) {
-  return encodeURIComponent(encodeSafe(v)).replace(
-    URI_ENCODE_REGEXP,
-    (m) => URIMap[m]
-  );
+function getKeyNodes(list, nodes, start, end, realEnd) {
+  const keyedNodes = {};
+  for (let i = end, re = realEnd; i >= start; i--, re--) {
+    const oc = list[i];
+    const cKey = oc.compareKey;
+    if (cKey) {
+      const bucket = keyedNodes[cKey] || (keyedNodes[cKey] = []);
+      bucket.push(nodes[re]);
+    }
+  }
+  return keyedNodes;
 }
-var QUOTE_REGEXP = /['"\\]/g;
-function encodeQ(v) {
-  return encodeSafe(v).replace(QUOTE_REGEXP, "\\$&");
+function vdomCreateNode(vnode, owner, ref) {
+  const tag = vnode.tag;
+  if (tag === V_TEXT_NODE) {
+    return document.createTextNode(vnode.html);
+  }
+  const sTag = typeof tag === "string" ? tag : tag.toString();
+  const ns = VDOM_NS_MAP[sTag] || owner.namespaceURI;
+  const el = document.createElementNS(ns, sTag);
+  vdomSetAttributes(el, vnode, ref);
+  el.innerHTML = vnode.html;
+  return el;
 }
-
-// src/updater.ts
-function updaterRef(refDataIn, value, key) {
-  const refData = refDataIn;
-  const counter = refData[SPLITTER];
-  for (let i = counter; --i; ) {
-    key = SPLITTER + i;
-    if (refData[key] === value) {
-      return key;
+function vdomSetAttributes(realNode, newVDom, ref, lastVDom) {
+  let changed = 0;
+  const nMap = newVDom.attrsMap || {};
+  const nsMap = newVDom.attrsSpecials || {};
+  if (lastVDom) {
+    const oMap = lastVDom.attrsMap || {};
+    const osMap = lastVDom.attrsSpecials || {};
+    for (const key in oMap) {
+      if (!hasOwnProperty(nMap, key)) {
+        changed = 1;
+        const sValue = osMap[key];
+        if (sValue) {
+          if (ref) {
+            ref.nodeProps.push([realNode, sValue, ""]);
+          } else {
+            Reflect.set(realNode, sValue, "");
+          }
+        } else {
+          realNode.removeAttribute(key);
+        }
+      }
     }
   }
-  key = SPLITTER + refData[SPLITTER]++;
-  refData[key] = value;
-  return key;
+  for (const key in nMap) {
+    const value = nMap[key];
+    const sKey = nsMap[key];
+    if (sKey) {
+      if (Reflect.get(realNode, sKey) !== value) {
+        changed = 1;
+        if (ref) {
+          ref.nodeProps.push([realNode, sKey, value]);
+        } else {
+          Reflect.set(realNode, sKey, value);
+        }
+      }
+    } else {
+      const oldMap = lastVDom?.attrsMap;
+      if (!oldMap || oldMap[key] !== value) {
+        changed = 1;
+        realNode.setAttribute(key, String(value ?? ""));
+      }
+    }
+  }
+  return changed;
+}
+function vdomSyncFormState(realNode, newVDom) {
+  const specials = DOM_SPECIALS[realNode.nodeName];
+  if (!specials) return 0;
+  const nMap = newVDom.attrsMap || {};
+  let result = 0;
+  for (const prop of specials) {
+    const newVal = nMap[prop];
+    if (newVal !== void 0 && Reflect.get(realNode, prop) !== newVal) {
+      result = 1;
+      Reflect.set(realNode, prop, newVal);
+    }
+  }
+  return result;
+}
+function vdomSetNode(realNode, oldParent, lastVDom, newVDom, ref, frame, keys2, rootView, ready) {
+  const lastTag = lastVDom.tag;
+  const newTag = newVDom.tag;
+  if (lastTag === V_TEXT_NODE || newTag === V_TEXT_NODE) {
+    if (lastTag === newTag) {
+      if (lastVDom.html !== newVDom.html) {
+        ref.changed = 1;
+        realNode.nodeValue = newVDom.html;
+      }
+    } else {
+      ref.changed = 1;
+      domUnmountFrames(frame, realNode);
+      oldParent.replaceChild(vdomCreateNode(newVDom, oldParent, ref), realNode);
+    }
+    return;
+  }
+  if (lastTag === newTag) {
+    const lastAMap = lastVDom.attrsMap || {};
+    const newAMap = newVDom.attrsMap || {};
+    if (lastVDom.compareKey && lastVDom.compareKey === newVDom.compareKey && !lastAMap["id"] && !newAMap["id"]) {
+      return;
+    }
+    let attrChanged = 0;
+    if (lastVDom.attrs !== newVDom.attrs || newVDom.hasSpecials) {
+      attrChanged = vdomSetAttributes(
+        realNode,
+        newVDom,
+        ref,
+        lastVDom
+      );
+      if (attrChanged) ref.changed = 1;
+    }
+    let updateChildren = true;
+    if (newVDom.isLarkView) {
+      const oldFrameId = realNode.getAttribute("id") || "";
+      const newViewPath = newVDom.isLarkView;
+      const oldViewPath = lastVDom.isLarkView || "";
+      if (oldFrameId && newViewPath === oldViewPath) {
+        updateChildren = false;
+      }
+    }
+    vdomSyncFormState(realNode, newVDom);
+    if (updateChildren && !newVDom.selfClose) {
+      vdomSetChildNodes(
+        realNode,
+        lastVDom,
+        newVDom,
+        ref,
+        frame,
+        keys2,
+        rootView,
+        ready
+      );
+    }
+  } else {
+    ref.changed = 1;
+    domUnmountFrames(frame, realNode);
+    oldParent.replaceChild(vdomCreateNode(newVDom, oldParent, ref), realNode);
+  }
+}
+function vdomSetChildNodes(realNode, lastVDom, newVDom, ref, frame, keys2, view, ready) {
+  if (!lastVDom) {
+    ref.changed = 1;
+    realNode.innerHTML = newVDom.html;
+    return;
+  }
+  if (lastVDom.html === newVDom.html) {
+    return;
+  }
+  const oldChildren = lastVDom.children;
+  const newChildren = newVDom.children;
+  const oldLen = oldChildren?.length || 0;
+  const newLen = newChildren?.length || 0;
+  if (oldLen === 0 && newLen === 0) return;
+  const nodes = realNode.childNodes;
+  let oldStart = 0;
+  let oldEnd = oldLen - 1;
+  let newStart = 0;
+  let newEnd = newLen - 1;
+  let realStart = oldStart;
+  let realEnd = oldEnd;
+  let keyedNodes;
+  const oldReusedTotal = lastVDom.reusedTotal || 0;
+  const newReusedTotal = newVDom.reusedTotal || 0;
+  let oldStartNode = oldChildren?.[oldStart];
+  let oldEndNode = oldChildren?.[oldEnd];
+  let newStartNode = newChildren?.[newStart];
+  let newEndNode = newChildren?.[newEnd];
+  while (oldStart <= oldEnd && newStart <= newEnd) {
+    if (!oldStartNode) {
+      oldStartNode = oldChildren?.[++oldStart];
+      realStart++;
+      continue;
+    }
+    if (!oldEndNode) {
+      oldEndNode = oldChildren?.[--oldEnd];
+      realEnd--;
+      continue;
+    }
+    if (isSameVDomNode(newStartNode, oldStartNode)) {
+      if (newStartNode.tag === SPLITTER || oldStartNode.tag === SPLITTER) {
+        ref.changed = 1;
+        domUnmountFrames(frame, realNode);
+        if (newStartNode.tag === SPLITTER) {
+          realNode.innerHTML = newStartNode.html;
+        } else {
+          realNode.innerHTML = "";
+          realNode.appendChild(vdomCreateNode(newStartNode, realNode, ref));
+        }
+      } else {
+        vdomSetNode(
+          nodes[realStart],
+          realNode,
+          oldStartNode,
+          newStartNode,
+          ref,
+          frame,
+          keys2,
+          view,
+          ready
+        );
+      }
+      reduceCached(keyedNodes, oldStartNode, nodes[realStart]);
+      realStart++;
+      oldStartNode = oldChildren?.[++oldStart];
+      newStartNode = newChildren?.[++newStart];
+    } else if (isSameVDomNode(newEndNode, oldEndNode)) {
+      if (newEndNode.tag === SPLITTER || oldEndNode.tag === SPLITTER) {
+        ref.changed = 1;
+        domUnmountFrames(frame, realNode);
+        realNode.innerHTML = newEndNode.tag === SPLITTER ? newEndNode.html : "";
+        if (newEndNode.tag !== SPLITTER) {
+          realNode.appendChild(vdomCreateNode(newEndNode, realNode, ref));
+        }
+      } else {
+        vdomSetNode(
+          nodes[realEnd],
+          realNode,
+          oldEndNode,
+          newEndNode,
+          ref,
+          frame,
+          keys2,
+          view,
+          ready
+        );
+      }
+      reduceCached(keyedNodes, oldEndNode, nodes[realEnd]);
+      realEnd--;
+      oldEndNode = oldChildren?.[--oldEnd];
+      newEndNode = newChildren?.[--newEnd];
+    } else if (isSameVDomNode(newEndNode, oldStartNode)) {
+      if (newEndNode.tag === SPLITTER || oldStartNode.tag === SPLITTER) {
+        ref.changed = 1;
+        domUnmountFrames(frame, realNode);
+        realNode.innerHTML = newEndNode.tag === SPLITTER ? newEndNode.html : "";
+        if (newEndNode.tag !== SPLITTER) {
+          realNode.appendChild(vdomCreateNode(newEndNode, realNode, ref));
+        }
+      } else {
+        const oi = nodes[realStart];
+        realNode.insertBefore(oi, nodes[realEnd + 1] || null);
+        vdomSetNode(
+          oi,
+          realNode,
+          oldStartNode,
+          newEndNode,
+          ref,
+          frame,
+          keys2,
+          view,
+          ready
+        );
+      }
+      reduceCached(keyedNodes, oldStartNode, nodes[realStart]);
+      realStart++;
+      oldStartNode = oldChildren?.[++oldStart];
+      newEndNode = newChildren?.[--newEnd];
+    } else if (isSameVDomNode(newStartNode, oldEndNode)) {
+      if (newStartNode.tag === SPLITTER || oldEndNode.tag === SPLITTER) {
+        ref.changed = 1;
+        domUnmountFrames(frame, realNode);
+        realNode.innerHTML = newStartNode.tag === SPLITTER ? newStartNode.html : "";
+        if (newStartNode.tag !== SPLITTER) {
+          realNode.appendChild(vdomCreateNode(newStartNode, realNode, ref));
+        }
+      } else {
+        const oi = nodes[realEnd];
+        realNode.insertBefore(oi, nodes[realStart]);
+        vdomSetNode(
+          oi,
+          realNode,
+          oldEndNode,
+          newStartNode,
+          ref,
+          frame,
+          keys2,
+          view,
+          ready
+        );
+      }
+      reduceCached(keyedNodes, oldEndNode, nodes[realEnd]);
+      realEnd--;
+      oldEndNode = oldChildren?.[--oldEnd];
+      newStartNode = newChildren?.[++newStart];
+    } else {
+      if (!keyedNodes && newReusedTotal > 0 && oldReusedTotal > 0) {
+        keyedNodes = getKeyNodes(
+          oldChildren,
+          nodes,
+          oldStart,
+          oldEnd,
+          realEnd
+        );
+      }
+      const cKey = newStartNode.compareKey;
+      let found;
+      let compareKey;
+      if (cKey && keyedNodes) {
+        found = keyedNodes[cKey];
+        compareKey = void 0;
+        while (found && found.length > 0) {
+          compareKey = found.pop();
+          if (compareKey) break;
+        }
+        if (found && found.length === 0) delete keyedNodes[cKey];
+      }
+      if (compareKey) {
+        if (compareKey !== nodes[realStart]) {
+          for (let j = oldStart + 1; j <= oldEnd; j++) {
+            const oc = oldChildren?.[j];
+            if (oc && nodes[realStart + (j - oldStart)] === compareKey) {
+              oldChildren[j] = void 0;
+              break;
+            }
+          }
+          realNode.insertBefore(compareKey, nodes[realStart]);
+        }
+        vdomSetNode(
+          compareKey,
+          realNode,
+          oldStartNode,
+          newStartNode,
+          ref,
+          frame,
+          keys2,
+          view,
+          ready
+        );
+      } else if (oldStartNode.compareKey && lastVDom.reused?.[oldStartNode.compareKey] && newVDom.reused?.[oldStartNode.compareKey] || nodes[realStart]?.id && realNode.querySelectorAll?.(
+        `#${nodes[realStart].id}`
+      )?.length && !newStartNode.isLarkView) {
+        ref.changed = 1;
+        const newNode = vdomCreateNode(newStartNode, realNode, ref);
+        realNode.insertBefore(newNode, nodes[realStart]);
+        realStart--;
+        realEnd++;
+      } else {
+        vdomSetNode(
+          nodes[realStart],
+          realNode,
+          oldStartNode,
+          newStartNode,
+          ref,
+          frame,
+          keys2,
+          view,
+          ready
+        );
+      }
+      realStart++;
+      oldStartNode = oldChildren?.[++oldStart];
+      newStartNode = newChildren?.[++newStart];
+    }
+  }
+  if (newStart <= newEnd) {
+    const refNode = nodes[realEnd + 1] || null;
+    for (let i = newStart; i <= newEnd; i++) {
+      ref.changed = 1;
+      const nc = newChildren[i];
+      if (nc.tag === SPLITTER) {
+        domUnmountFrames(frame, realNode);
+        realNode.innerHTML = nc.html;
+        return;
+      }
+      const newNode = vdomCreateNode(nc, realNode, ref);
+      realNode.insertBefore(newNode, refNode);
+    }
+  }
+  if (oldStart <= oldEnd) {
+    for (let i = realEnd; i >= realStart; i--) {
+      const node = nodes[i];
+      if (node) {
+        domUnmountFrames(frame, node);
+        ref.changed = 1;
+        realNode.removeChild(node);
+      }
+    }
+  }
+  if (ref.asyncCount === 0) {
+    callFunction(ready, []);
+  }
 }
+function reduceCached(keyedNodes, node, compared) {
+  if (!keyedNodes || !node.compareKey) return;
+  const bucket = keyedNodes[node.compareKey];
+  if (bucket) {
+    for (let i = bucket.length; i--; ) {
+      if (bucket[i] === compared) {
+        bucket[i] = void 0;
+        break;
+      }
+    }
+  }
+}
+function createVDomRef(viewId) {
+  return {
+    viewId,
+    viewRenders: [],
+    nodeProps: [],
+    asyncCount: 0,
+    changed: 0,
+    domOps: []
+  };
+}
+
+// src/updater.ts
 var Updater = class {
   /** View ID (same as owner frame ID) */
   viewId;
@@ -1799,6 +2369,8 @@ var Updater = class {
   version = 0;
   /** Snapshot of `version` taken by `snapshot()`, used by `altered()`. */
   snapshotVersion;
+  /** Last rendered VDOM tree (only used when virtualDom is enabled) */
+  vdom;
   constructor(viewId) {
     this.viewId = viewId;
     this.data = { vId: viewId };
@@ -1878,28 +2450,61 @@ var Updater = class {
     if (changed && view && node && view.signature > 0 && frame) {
       const template = view.template;
       if (typeof template === "function") {
-        const html = template(
-          this.data,
-          this.viewId,
-          this.refData,
-          encodeHTML,
-          encodeSafe,
-          encodeURIExtra,
-          updaterRef,
-          encodeQ
-        );
-        const newDom = domGetNode(html, node);
-        const ref = createDomRef();
-        domSetChildNodes(node, newDom, ref, frame, keys2);
-        applyIdUpdates(ref.idUpdates);
-        applyDomOps(ref.domOps);
-        for (const v of ref.views) {
-          if (v.render) {
-            funcWithTry(v.render, [], v, noop);
+        if (config.virtualDom) {
+          const vdomTemplate = template;
+          const newVDom = vdomTemplate(this.data, this.viewId, this.refData);
+          const ref = createVDomRef(this.viewId);
+          const ready = () => {
+            this.vdom = newVDom;
+            if (ref.changed || !view.rendered) {
+              view.endUpdate(this.viewId);
+            }
+            for (const [el, prop, val] of ref.nodeProps) {
+              Reflect.set(el, prop, val);
+            }
+            for (const v of ref.viewRenders) {
+              if (v.render) {
+                funcWithTry(v.render, [], v, noop);
+              }
+            }
+          };
+          vdomSetChildNodes(
+            node,
+            this.vdom,
+            newVDom,
+            ref,
+            frame,
+            keys2,
+            view,
+            ready
+          );
+          if (ref.asyncCount === 0) {
+            ready();
+          }
+        } else {
+          const html = template(
+            this.data,
+            this.viewId,
+            this.refData,
+            encodeHTML,
+            strSafe,
+            encodeURIExtra,
+            refFn,
+            encodeQuote
+          );
+          const newDom = domGetNode(html, node);
+          const ref = createDomRef();
+          domSetChildNodes(node, newDom, ref, frame, keys2);
+          applyIdUpdates(ref.idUpdates);
+          applyDomOps(ref.domOps);
+          for (const v of ref.views) {
+            if (v.render) {
+              funcWithTry(v.render, [], v, noop);
+            }
+          }
+          if (ref.hasChanged || !view.rendered) {
+            view.endUpdate(this.viewId);
           }
-        }
-        if (ref.hasChanged || !view.rendered) {
-          view.endUpdate(this.viewId);
         }
       }
     }
@@ -1933,17 +2538,12 @@ var Updater = class {
    * Translate a refData reference back to its original value.
    *
    * The ref protocol is `SPLITTER` + ascii decimal digits — the exact format
-   * emitted by `updaterRef`. We require that exact shape so a user-supplied
+   * emitted by `refFn`. We require that exact shape so a user-supplied
    * string that merely begins with SPLITTER is never accidentally resolved
    * (or mishandled as a "missing ref").
    */
   translate(data) {
-    if (typeof data !== "string") return data;
-    if (data.length < 2 || data[0] !== SPLITTER) return data;
-    for (let i = 1; i < data.length; i++) {
-      const c = data.charCodeAt(i);
-      if (c < 48 || c > 57) return data;
-    }
+    if (typeof data !== "string" || !isRefToken(data)) return data;
     return hasOwnProperty(this.refData, data) ? this.refData[data] : data;
   }
   /**
@@ -2010,8 +2610,6 @@ var View = class _View {
   observedStateKeys;
   /** Resource map */
   resources = {};
-  /** Assign method reference */
-  assignMethod;
   /** Whether endUpdate pending */
   endUpdatePending;
   /** Internal event storage */
@@ -2088,7 +2686,7 @@ var View = class _View {
    */
   beginUpdate(id) {
     if (this.signature > 0 && this.endUpdatePending !== void 0) {
-      this.ownerFrame.unmountZone(id, true);
+      this.ownerFrame.unmountZone(id);
     }
   }
   /**
@@ -2107,7 +2705,7 @@ var View = class _View {
         this.rendered = true;
       }
       const ownerFrame = this.ownerFrame;
-      ownerFrame.mountZone(updateId, inner);
+      ownerFrame.mountZone(updateId);
       if (!flag) {
         setTimeout(
           this.wrapAsync(() => {
@@ -2257,17 +2855,16 @@ var View = class _View {
     }
     const makes = [];
     oView.makes = makes;
-    const proto = oView.prototype;
     const eventsObject = {};
     const eventsList = [];
     const selectorObject = {};
-    const mixins = proto["mixins"];
+    const mixins = Reflect.get(oView.prototype, "mixins");
     if (mixins && Array.isArray(mixins)) {
       _View.mergeMixins(mixins, oView, makes);
     }
-    for (const p in proto) {
-      if (!hasOwnProperty(proto, p)) continue;
-      const currentFn = proto[p];
+    for (const p in oView.prototype) {
+      if (!hasOwnProperty(oView.prototype, p)) continue;
+      const currentFn = Reflect.get(oView.prototype, p);
       if (typeof currentFn !== "function") continue;
       const matches = p.match(VIEW_EVENT_METHOD_REGEXP);
       if (!matches) continue;
@@ -2309,30 +2906,30 @@ var View = class _View {
         }
         eventsObject[item] = (eventsObject[item] || 0) | mask;
         const combinedKey = selectorOrCallback + SPLITTER + item;
-        const existingFn = proto[combinedKey];
+        const existingFn = Reflect.get(oView.prototype, combinedKey);
         if (!existingFn) {
-          proto[combinedKey] = currentFn;
+          Reflect.set(oView.prototype, combinedKey, currentFn);
         } else if (typeof existingFn === "function") {
           const mixinFn = currentFn;
           const existingMixin = existingFn;
           if (existingMixin.marker) {
             if (mixinFn.marker) {
-              proto[combinedKey] = _View.processMixinsSameEvent(
-                mixinFn,
-                existingMixin
+              Reflect.set(
+                oView.prototype,
+                combinedKey,
+                _View.processMixinsSameEvent(mixinFn, existingMixin)
               );
-            } else if (hasOwnProperty(proto, p)) {
-              proto[combinedKey] = currentFn;
+            } else if (hasOwnProperty(oView.prototype, p)) {
+              Reflect.set(oView.prototype, combinedKey, currentFn);
             }
           }
         }
       }
     }
-    _View.wrapMethod(proto, "render", "$renderWrap");
-    proto["$evtObjMap"] = eventsObject;
-    proto["$globalEvtList"] = eventsList;
-    proto["$selMap"] = selectorObject;
-    proto["$assignFn"] = proto["assign"];
+    _View.wrapMethod(asRecord(oView.prototype), "render", "$renderWrap");
+    Reflect.set(oView.prototype, "$evtObjMap", eventsObject);
+    Reflect.set(oView.prototype, "$globalEvtList", eventsList);
+    Reflect.set(oView.prototype, "$selMap", selectorObject);
     return makes;
   }
   /**
@@ -2423,7 +3020,7 @@ var View = class _View {
         this.signature++;
         this.fire("render");
         _View.destroyAllResources(this, false);
-        const lookup = this;
+        const lookup = asRecord(this);
         const candidate = lookup[fnName];
         const instanceFn = typeof candidate === "function" ? candidate : originalAsFn;
         const fnToCall = instanceFn === wrapped ? originalAsFn : instanceFn;
@@ -2459,7 +3056,7 @@ var View = class _View {
    * Merge an array of mixin objects into the view prototype.
    */
   static mergeMixins(mixins, viewClass, makes) {
-    const proto = viewClass.prototype;
+    const proto = asRecord(viewClass.prototype);
     const temp = {};
     for (const node of mixins) {
       for (const p in node) {
@@ -2550,17 +3147,15 @@ var View = class _View {
         }
       }
     };
-    const proto = ChildView.prototype;
     for (const key in definedProps) {
       if (hasOwnProperty(definedProps, key) && key !== "make") {
-        proto[key] = definedProps[key];
+        Reflect.set(ChildView.prototype, key, definedProps[key]);
       }
     }
     if (statics) {
-      const staticTarget = ChildView;
       for (const key in statics) {
         if (hasOwnProperty(statics, key)) {
-          staticTarget[key] = statics[key];
+          Reflect.set(ChildView, key, statics[key]);
         }
       }
     }
@@ -2579,53 +3174,6 @@ function defineView(props, statics) {
   return View.extend(props, statics);
 }
 
-// src/module-loader.ts
-var config = {
-  rootId: "root",
-  routeMode: "history",
-  hashbang: "#!",
-  error: (error) => {
-    throw error;
-  }
-};
-function use(names, callback) {
-  const nameList = typeof names === "string" ? [names] : names;
-  const loadPromise = (() => {
-    if (config.require) {
-      const result = config.require(nameList);
-      if (result && typeof result.then === "function") {
-        return result;
-      }
-      return Promise.resolve([]);
-    }
-    return Promise.all(
-      nameList.map((name) => {
-        const importPath = name.startsWith(".") || name.startsWith("/") ? name : `./${name}`;
-        return import(
-          /* @vite-ignore */
-          /* webpackIgnore: true */
-          importPath
-        ).then((mod) => {
-          return mod && (mod["__esModule"] || // For Webpack
-          typeof mod["default"] === "function") ? mod["default"] : mod;
-        }).catch((err) => {
-          const errorHandler = config.error;
-          if (errorHandler) {
-            errorHandler(err instanceof Error ? err : new Error(String(err)));
-          }
-          return void 0;
-        });
-      })
-    );
-  })();
-  if (callback) {
-    loadPromise.then((modules) => {
-      callback(...modules);
-    });
-  }
-  return loadPromise;
-}
-
 // src/view-registry.ts
 var viewClassRegistry = {};
 function getViewClass(path) {
@@ -2772,9 +3320,15 @@ var Frame = class _Frame extends EventEmitter {
    */
   doMountView(ViewClass, params, node, sign) {
     if (sign !== this.signature) return;
-    const mixinCtors = View.prepare(ViewClass);
-    const Ctor = ViewClass;
-    const view = new Ctor(this.id, this, params, node, mixinCtors);
+    const mixinConstructors = View.prepare(ViewClass);
+    const Constructor = ViewClass;
+    const view = new Constructor(
+      this.id,
+      this,
+      params,
+      node,
+      mixinConstructors
+    );
     this.viewInstance = view;
     view.signature = 1;
     View.delegateEvents(view);
@@ -2846,7 +3400,7 @@ var Frame = class _Frame extends EventEmitter {
   /**
    * Unmount a child frame.
    */
-  unmountFrame(id, _inner) {
+  unmountFrame(id) {
     const targetId = id ? this.childrenMap[id] : this.id;
     const frame = frameRegistry.get(targetId);
     if (!frame) return;
@@ -2868,7 +3422,7 @@ var Frame = class _Frame extends EventEmitter {
   /**
    * Mount all views in a zone.
    */
-  mountZone(zoneId, _inner) {
+  mountZone(zoneId) {
     const targetZone = zoneId || this.id;
     this.holdFireCreated = 1;
     const rootEl = document.getElementById(targetZone);
@@ -2878,7 +3432,7 @@ var Frame = class _Frame extends EventEmitter {
     viewElements.forEach((el) => {
       if (!(el instanceof HTMLElement)) return;
       if (htmlElIsBound(el)) return;
-      const elId = ensureElementId2(el);
+      const elId = ensureElementId(el, "frame_");
       el.frameBound = 1;
       const viewPath = getAttribute(el, LARK_VIEW);
       frames.push([elId, viewPath]);
@@ -2892,7 +3446,7 @@ var Frame = class _Frame extends EventEmitter {
   /**
    * Unmount all views in a zone.
    */
-  unmountZone(zoneId, _inner) {
+  unmountZone(zoneId) {
     for (const childId in this.childrenMap) {
       if (hasOwnProperty(this.childrenMap, childId)) {
         if (!zoneId || childId !== zoneId) {
@@ -2935,8 +3489,7 @@ var Frame = class _Frame extends EventEmitter {
     let result;
     const view = this.view;
     if (view && view.rendered) {
-      const lookup = view;
-      const fn = lookup[name];
+      const fn = Reflect.get(view, name);
       if (typeof fn === "function") {
         result = funcWithTry(fn, args || [], view, noop);
       }
@@ -3021,17 +3574,6 @@ var Frame = class _Frame extends EventEmitter {
     }
     return rootFrame;
   }
-  /**
-   * @deprecated Use `Frame.getRoot()` for read-only access or
-   * `Frame.createRoot(id)` to create the root explicitly. The single-method
-   * `root()` blurred the distinction and was a common source of bugs in
-   * Micro-Frontend hosts.
-   *
-   * Kept for backward compatibility — behavior unchanged.
-   */
-  static root(rootId) {
-    return _Frame.createRoot(rootId);
-  }
   /** Bind event listener (static) */
   static on(event, handler) {
     staticEmitter.on(event, handler);
@@ -3050,14 +3592,6 @@ var Frame = class _Frame extends EventEmitter {
 function htmlElIsBound(element) {
   return !!element.frameBound;
 }
-function ensureElementId2(element) {
-  const id = element.getAttribute("id");
-  if (id) return id;
-  element.autoId = 1;
-  const newId = generateId("frame_");
-  element.id = newId;
-  return newId;
-}
 function removeFrame(id, wasCreated) {
   const frameInstance = frameRegistry.get(id);
   if (!frameInstance) return;
@@ -3510,7 +4044,7 @@ var Service = class {
       }
       const cached = this._payloadCache.get(cacheKey);
       if (cached && cached.cacheInfo) {
-        if (now() - cached.cacheInfo.time > cache) {
+        if (Date.now() - cached.cacheInfo.time > cache) {
           this._payloadCache.del(cacheKey);
           return void 0;
         }
@@ -3668,7 +4202,7 @@ function serviceSend(service, attrs, done, flag, save) {
           const list = pendingCacheKeys[cacheKey];
           const entity = list.entity;
           if (entity instanceof Payload && entity.cacheInfo) {
-            entity.cacheInfo.time = now();
+            entity.cacheInfo.time = Date.now();
             internals.payloadCache.set(cacheKey, entity);
           }
           Reflect.deleteProperty(pendingCacheKeys, cacheKey);
@@ -3686,20 +4220,19 @@ function serviceSend(service, attrs, done, flag, save) {
   }
 }
 
-// src/frame-visual.ts
-var FrameVisualBridge = {
-  MSG_PING: "LARK_VIS_PING",
-  MSG_PONG: "LARK_VIS_PONG",
-  MSG_REQUEST_TREE: "LARK_VIS_REQUEST_TREE",
-  MSG_TREE: "LARK_VIS_TREE",
-  MSG_TREE_DELTA: "LARK_VIS_TREE_DELTA"
+// src/devtool.ts
+var FrameDevtoolBridge = {
+  MSG_PING: "LARK_DEVTOOL_PING",
+  MSG_PONG: "LARK_DEVTOOL_PONG",
+  MSG_REQUEST_TREE: "LARK_DEVTOOL_REQUEST_TREE",
+  MSG_TREE: "LARK_DEVTOOL_TREE",
+  MSG_TREE_DELTA: "LARK_DEVTOOL_TREE_DELTA"
 };
 function serializeView(view) {
   const evtMap = view.eventObjectMap;
   const eventMethodKeys = evtMap ? Object.keys(evtMap) : [];
   const resourceKeys = view.resources ? Object.keys(view.resources) : [];
-  const lookup = view;
-  const hasAssign = typeof lookup["assign"] === "function";
+  const hasAssign = typeof view["assign"] === "function";
   let updaterData = null;
   try {
     const ref = view.updater?.refData;
@@ -3777,7 +4310,7 @@ function serializeFrameTree() {
 }
 var bridgeInstalled = false;
 var lastTreeJson = "";
-function installFrameVisualizerBridge() {
+function installFrameDevtoolBridge() {
   if (bridgeInstalled) return;
   if (typeof window === "undefined") return;
   bridgeInstalled = true;
@@ -3785,22 +4318,22 @@ function installFrameVisualizerBridge() {
     const data = event.data;
     if (!data || typeof data !== "object") return;
     const type = data.type;
-    if (type === FrameVisualBridge.MSG_PING) {
+    if (type === FrameDevtoolBridge.MSG_PING) {
       const source = event.source;
       if (source) {
         source.postMessage(
-          { type: FrameVisualBridge.MSG_PONG },
+          { type: FrameDevtoolBridge.MSG_PONG },
           { targetOrigin: "*" }
         );
       }
       return;
     }
-    if (type === FrameVisualBridge.MSG_REQUEST_TREE) {
+    if (type === FrameDevtoolBridge.MSG_REQUEST_TREE) {
       const tree = serializeFrameTree();
       const source = event.source;
       if (source) {
         source.postMessage(
-          { type: FrameVisualBridge.MSG_TREE, data: tree },
+          { type: FrameDevtoolBridge.MSG_TREE, data: tree },
           { targetOrigin: "*" }
         );
       }
@@ -3820,7 +4353,7 @@ function pushTreeUpdate() {
   if (treeJson !== lastTreeJson) {
     lastTreeJson = treeJson;
     window.parent.postMessage(
-      { type: FrameVisualBridge.MSG_TREE_DELTA, data: tree },
+      { type: FrameDevtoolBridge.MSG_TREE_DELTA, data: tree },
       "*"
     );
   }
@@ -3833,7 +4366,7 @@ var taskIndex = 0;
 var taskScheduled = false;
 function executeTaskChunk(deadline) {
   const hasDeadline = !!deadline;
-  const startTime = now();
+  const startTime = Date.now();
   while (true) {
     const fn = taskList[taskIndex];
     if (!fn) {
@@ -3847,7 +4380,7 @@ function executeTaskChunk(deadline) {
         scheduleTaskChunk();
         return;
       }
-    } else if (now() - startTime > CALL_BREAK_TIME && taskList.length > taskIndex + 3) {
+    } else if (Date.now() - startTime > CALL_BREAK_TIME && taskList.length > taskIndex + 3) {
       scheduleTaskChunk();
       return;
     }
@@ -3979,10 +4512,10 @@ function waitZoneViewsRendered(viewId, timeout) {
     timeout = 30 * 1e3;
   }
   const checkFrame = Frame.get(viewId);
-  const endTime = now() + timeout;
+  const endTime = Date.now() + timeout;
   return new Promise((resolve) => {
     const check = () => {
-      const currentTime = now();
+      const currentTime = Date.now();
       if (currentTime > endTime || !checkFrame) {
         resolve(WAIT_TIMEOUT_OR_NOT_FOUND);
       } else if (checkFrame.childrenCount === checkFrame.readyCount) {
@@ -4044,7 +4577,7 @@ var Framework = {
     booted3 = true;
     markBooted();
     markRouterBooted();
-    installFrameVisualizerBridge();
+    installFrameDevtoolBridge();
     const rootFrame2 = Frame.createRoot(config.rootId);
     Router._bind();
     const defaultView = config.defaultView || "";
@@ -4238,18 +4771,14 @@ function create(name, creator) {
         changedKeys2.add(key);
       }
     }
-    let recomputed = false;
     for (const [key, def] of computedDefs) {
       if (def.deps.some((dep) => changedKeys2.has(dep))) {
         const newVal = def.fn();
         if (!Object.is(state[key], newVal)) {
           state[key] = newVal;
-          recomputed = true;
         }
       }
     }
-    if (recomputed) {
-    }
   };
   const subscribe = (listener) => {
     listeners.add(listener);
@@ -4314,7 +4843,6 @@ function bindStore(view, store, selector) {
   view.on("destroy", off);
   return off;
 }
-var defineStore = create;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CALL_BREAK_TIME,
@@ -4324,7 +4852,6 @@ var defineStore = create;
   EventDelegator,
   EventEmitter,
   Frame,
-  FrameVisualBridge,
   Framework,
   LARK_VIEW,
   Payload,
@@ -4337,59 +4864,24 @@ var defineStore = create;
   Updater,
   VIEW_EVENT_METHOD_REGEXP,
   View,
-  applyDomOps,
-  applyIdUpdates,
   applyStyle,
-  assign,
   bindStore,
   computed,
   create,
-  createDomRef,
-  defineStore,
+  createVDomRef,
   defineView,
-  domGetCompareKey,
-  domGetNode,
-  domSetAttributes,
-  domSetChildNodes,
-  domSetNode,
-  domSpecialDiff,
-  domUnmountFrames,
-  encodeHTML,
-  encodeQ,
-  encodeSafe,
-  encodeURIExtra,
-  ensureElementId,
   frameworkConfig,
-  funcWithTry,
-  generateId,
-  getAttribute,
-  getById,
   getRouteMode,
-  hasOwnProperty,
-  installFrameVisualizerBridge,
   invalidateViewClass,
-  isPlainObject,
-  isPrimitive,
-  isPrimitiveOrFunc,
-  keys,
   mark,
   markBooted,
   markRouterBooted,
   nextCounter,
-  nodeInside,
-  noop,
-  now,
-  parseUri,
   registerViewClass,
   resetProjectsMap,
   safeguard,
-  serializeFrameTree,
-  setData,
-  syncCounter,
-  toMap,
-  toUri,
-  translateData,
   unmark,
   use,
-  useUrlState
+  useUrlState,
+  vdomCreate
 });