@lark.js/mvc 0.0.10 → 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,
@@ -44,10 +43,10 @@ __export(index_exports, {
   bindStore: () => bindStore,
   computed: () => computed,
   create: () => create,
+  createVDomRef: () => createVDomRef,
   defineView: () => defineView,
   frameworkConfig: () => config,
   getRouteMode: () => getRouteMode,
-  installFrameVisualizerBridge: () => installFrameVisualizerBridge,
   invalidateViewClass: () => invalidateViewClass,
   mark: () => mark,
   markBooted: () => markBooted,
@@ -56,10 +55,10 @@ __export(index_exports, {
   registerViewClass: () => registerViewClass,
   resetProjectsMap: () => resetProjectsMap,
   safeguard: () => safeguard,
-  serializeFrameTree: () => serializeFrameTree,
   unmark: () => unmark,
   use: () => use,
-  useUrlState: () => useUrlState
+  useUrlState: () => useUrlState,
+  vdomCreate: () => vdomCreate
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -85,6 +84,12 @@ 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;
 }
@@ -97,7 +102,7 @@ var HTML_ENT_MAP = {
   "`": "#96"
 };
 var HTML_ENT_REGEXP = /[&<>"'`]/g;
-function encodeSafe(v) {
+function strSafe(v) {
   return String(v == null ? "" : v);
 }
 function encodeHTML(v) {
@@ -115,14 +120,14 @@ var URI_ENT_MAP = {
 };
 var URI_ENT_REGEXP = /[!')(*]/g;
 function encodeURIExtra(v) {
-  return encodeURIComponent(encodeSafe(v)).replace(
+  return encodeURIComponent(strSafe(v)).replace(
     URI_ENT_REGEXP,
     (m) => URI_ENT_MAP[m]
   );
 }
 var QUOTE_ENT_REGEXP = /['"\\]/g;
-function encodeQ(v) {
-  return encodeSafe(v).replace(QUOTE_ENT_REGEXP, "\\$&");
+function encodeQuote(v) {
+  return strSafe(v).replace(QUOTE_ENT_REGEXP, "\\$&");
 }
 function refFn(ref, value, key) {
   const counter = ref[SPLITTER];
@@ -144,11 +149,66 @@ function isRefToken(s) {
 }
 
 // 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);
   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";
 }
@@ -202,13 +262,13 @@ 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;
@@ -301,9 +361,6 @@ function toMap(list, key) {
   }
   return map;
 }
-function now() {
-  return Date.now();
-}
 
 // src/apply-style.ts
 var injectedStyleIds = /* @__PURE__ */ new Set();
@@ -1055,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) {
@@ -1189,10 +1243,7 @@ var Router = {
             suspend = 1;
           }
         };
-        Router.fire(
-          RouterEvents.CHANGE,
-          changeEvent
-        );
+        Router.fire(RouterEvents.CHANGE, changeEvent);
         if (suspend || changeEvent.p) {
           return;
         }
@@ -1466,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>"],
@@ -1541,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;
@@ -1729,6 +1825,528 @@ function applyIdUpdates(updates) {
   }
 }
 
+// src/vdom.ts
+var DOM_SPECIALS = {
+  INPUT: ["value", "checked"],
+  TEXTAREA: ["value"],
+  OPTION: ["selected"]
+};
+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 isSameVDomNode(a, b) {
+  return a.compareKey && b.compareKey === a.compareKey || !a.compareKey && !b.compareKey && a.tag === b.tag || a.tag === SPLITTER || b.tag === SPLITTER;
+}
+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;
+}
+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;
+}
+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);
+        }
+      }
+    }
+  }
+  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) */
@@ -1751,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 };
@@ -1830,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,
-          refFn,
-          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);
         }
       }
     }
@@ -2202,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;
@@ -2254,29 +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;
+    _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;
   }
   /**
@@ -2367,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;
@@ -2403,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) {
@@ -2494,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]);
         }
       }
     }
@@ -2523,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) {
@@ -2716,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);
@@ -2879,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);
       }
@@ -3435,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;
         }
@@ -3593,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);
@@ -3611,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;
@@ -3702,7 +4310,7 @@ function serializeFrameTree() {
 }
 var bridgeInstalled = false;
 var lastTreeJson = "";
-function installFrameVisualizerBridge() {
+function installFrameDevtoolBridge() {
   if (bridgeInstalled) return;
   if (typeof window === "undefined") return;
   bridgeInstalled = true;
@@ -3710,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: "*" }
         );
       }
@@ -3745,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 },
       "*"
     );
   }
@@ -3758,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) {
@@ -3772,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;
     }
@@ -3904,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) {
@@ -3969,7 +4577,7 @@ var Framework = {
     booted3 = true;
     markBooted();
     markRouterBooted();
-    installFrameVisualizerBridge();
+    installFrameDevtoolBridge();
     const rootFrame2 = Frame.createRoot(config.rootId);
     Router._bind();
     const defaultView = config.defaultView || "";
@@ -4244,7 +4852,6 @@ function bindStore(view, store, selector) {
   EventDelegator,
   EventEmitter,
   Frame,
-  FrameVisualBridge,
   Framework,
   LARK_VIEW,
   Payload,
@@ -4261,10 +4868,10 @@ function bindStore(view, store, selector) {
   bindStore,
   computed,
   create,
+  createVDomRef,
   defineView,
   frameworkConfig,
   getRouteMode,
-  installFrameVisualizerBridge,
   invalidateViewClass,
   mark,
   markBooted,
@@ -4273,8 +4880,8 @@ function bindStore(view, store, selector) {
   registerViewClass,
   resetProjectsMap,
   safeguard,
-  serializeFrameTree,
   unmark,
   use,
-  useUrlState
+  useUrlState,
+  vdomCreate
 });