@lark.js/mvc 0.0.10 → 0.0.12

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,22 +43,23 @@ __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,
   markRouterBooted: () => markRouterBooted,
   nextCounter: () => nextCounter,
   registerViewClass: () => registerViewClass,
+  reloadViews: () => reloadViews,
   resetProjectsMap: () => resetProjectsMap,
   safeguard: () => safeguard,
-  serializeFrameTree: () => serializeFrameTree,
   unmark: () => unmark,
   use: () => use,
-  useUrlState: () => useUrlState
+  useUrlState: () => useUrlState,
+  vdomCreate: () => vdomCreate
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -85,6 +85,11 @@ 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 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,465 @@ 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") && !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 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) {
+    if (lastVDom.attrs === newVDom.attrs && lastVDom.html === newVDom.html) {
+      if (newVDom.hasSpecials) {
+        vdomSyncFormState(realNode, newVDom);
+      }
+      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 computeLIS(sequence) {
+  const len = sequence.length;
+  if (len === 0) return [];
+  const result = [];
+  const tails = [];
+  const predecessors = new Array(len);
+  let lisLength = 0;
+  for (let i = 0; i < len; i++) {
+    const value = sequence[i];
+    if (value < 0) continue;
+    let lo = 0;
+    let hi = lisLength;
+    while (lo < hi) {
+      const mid = lo + hi >>> 1;
+      if (sequence[tails[mid]] < value) lo = mid + 1;
+      else hi = mid;
+    }
+    tails[lo] = i;
+    predecessors[i] = lo > 0 ? tails[lo - 1] : -1;
+    if (lo === lisLength) lisLength++;
+  }
+  let cursor = tails[lisLength - 1];
+  for (let i = lisLength - 1; i >= 0; i--) {
+    result[i] = cursor;
+    cursor = predecessors[cursor];
+  }
+  return result;
+}
+function vdomSetChildNodes(realNode, lastVDom, newVDom, ref, frame, keys2, view, ready) {
+  if (!lastVDom) {
+    ref.changed = 1;
+    realNode.innerHTML = newVDom.html;
+    callFunction(ready, []);
+    return;
+  }
+  if (lastVDom.html === newVDom.html) {
+    callFunction(ready, []);
+    return;
+  }
+  const oldChildren = lastVDom.children;
+  const newChildren = newVDom.children;
+  const oldLen = oldChildren?.length || 0;
+  const newLen = newChildren?.length || 0;
+  if (oldLen === 0 && newLen === 0) {
+    callFunction(ready, []);
+    return;
+  }
+  const nodes = realNode.childNodes;
+  const oldDomNodes = new Array(oldLen);
+  for (let i = 0; i < oldLen; i++) {
+    oldDomNodes[i] = nodes[i];
+  }
+  const usedOldDomNodes = /* @__PURE__ */ new Set();
+  let headIdx = 0;
+  let tailIdx = oldLen - 1;
+  let newHead = 0;
+  let newTail = newLen - 1;
+  while (headIdx <= tailIdx && newHead <= newTail) {
+    const oc = oldChildren[headIdx];
+    const nc = newChildren[newHead];
+    if (!isSameVDomNode(nc, oc)) break;
+    if (nc.tag === SPLITTER || oc.tag === SPLITTER) break;
+    vdomSetNode(
+      oldDomNodes[headIdx],
+      realNode,
+      oc,
+      nc,
+      ref,
+      frame,
+      keys2,
+      view,
+      ready
+    );
+    usedOldDomNodes.add(oldDomNodes[headIdx]);
+    headIdx++;
+    newHead++;
+  }
+  while (headIdx <= tailIdx && newHead <= newTail) {
+    const oc = oldChildren[tailIdx];
+    const nc = newChildren[newTail];
+    if (!isSameVDomNode(nc, oc)) break;
+    if (nc.tag === SPLITTER || oc.tag === SPLITTER) break;
+    vdomSetNode(
+      oldDomNodes[tailIdx],
+      realNode,
+      oc,
+      nc,
+      ref,
+      frame,
+      keys2,
+      view,
+      ready
+    );
+    usedOldDomNodes.add(oldDomNodes[tailIdx]);
+    tailIdx--;
+    newTail--;
+  }
+  if (headIdx > tailIdx && newHead > newTail) {
+    if (ref.asyncCount === 0) callFunction(ready, []);
+    return;
+  }
+  const keyMap = {};
+  for (let i = headIdx; i <= tailIdx; i++) {
+    const c = oldChildren[i];
+    if (c?.compareKey) {
+      if (!keyMap[c.compareKey]) keyMap[c.compareKey] = [];
+      keyMap[c.compareKey].push({ domNode: oldDomNodes[i], vdomNode: c });
+    }
+  }
+  const newRemaining = newTail - newHead + 1;
+  const sequence = new Array(newRemaining);
+  for (let i = 0; i < newRemaining; i++) {
+    const nc = newChildren[newHead + i];
+    const cKey = nc.compareKey;
+    const entries = cKey ? keyMap[cKey] : void 0;
+    if (entries && entries.length > 0) {
+      const entry = entries.shift();
+      if (entries.length === 0) delete keyMap[cKey];
+      const oldIdx = oldChildren.indexOf(entry.vdomNode, headIdx);
+      sequence[i] = oldIdx >= 0 ? oldIdx : -1;
+      usedOldDomNodes.add(entry.domNode);
+    } else {
+      sequence[i] = -1;
+    }
+  }
+  if (newHead > newTail) {
+    for (let i = 0; i < oldLen; i++) {
+      const domNode = oldDomNodes[i];
+      if (domNode && !usedOldDomNodes.has(domNode) && domNode.parentNode === realNode) {
+        domUnmountFrames(frame, domNode);
+        ref.changed = 1;
+        realNode.removeChild(domNode);
+      }
+    }
+    if (ref.asyncCount === 0) callFunction(ready, []);
+    return;
+  }
+  if (headIdx > tailIdx) {
+    const insertRef = tailIdx < oldLen ? oldDomNodes[tailIdx + 1] ?? null : null;
+    for (let i = newHead; i <= newTail; i++) {
+      ref.changed = 1;
+      const newNode = vdomCreateNode(newChildren[i], realNode, ref);
+      realNode.insertBefore(newNode, insertRef);
+    }
+    if (ref.asyncCount === 0) callFunction(ready, []);
+    return;
+  }
+  const lis = computeLIS(sequence);
+  let lisCursor = lis.length - 1;
+  let nextNode = tailIdx + 1 < oldLen ? oldDomNodes[tailIdx + 1] : null;
+  for (let j = newRemaining - 1; j >= 0; j--) {
+    const newIdx = newHead + j;
+    const nc = newChildren[newIdx];
+    if (lisCursor >= 0 && lis[lisCursor] === j) {
+      const oldIdx = sequence[j];
+      vdomSetNode(
+        oldDomNodes[oldIdx],
+        realNode,
+        oldChildren[oldIdx],
+        nc,
+        ref,
+        frame,
+        keys2,
+        view,
+        ready
+      );
+      nextNode = oldDomNodes[oldIdx];
+      lisCursor--;
+    } else if (sequence[j] >= 0) {
+      const oldIdx = sequence[j];
+      ref.changed = 1;
+      realNode.insertBefore(oldDomNodes[oldIdx], nextNode);
+      vdomSetNode(
+        oldDomNodes[oldIdx],
+        realNode,
+        oldChildren[oldIdx],
+        nc,
+        ref,
+        frame,
+        keys2,
+        view,
+        ready
+      );
+      nextNode = oldDomNodes[oldIdx];
+    } else {
+      ref.changed = 1;
+      const newNode = vdomCreateNode(nc, realNode, ref);
+      realNode.insertBefore(newNode, nextNode);
+      nextNode = newNode;
+    }
+  }
+  for (let i = 0; i < oldLen; i++) {
+    const domNode = oldDomNodes[i];
+    if (domNode && !usedOldDomNodes.has(domNode) && domNode.parentNode === realNode) {
+      domUnmountFrames(frame, domNode);
+      ref.changed = 1;
+      realNode.removeChild(domNode);
+    }
+  }
+  if (ref.asyncCount === 0) {
+    callFunction(ready, []);
+  }
+}
+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 +2306,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 +2387,58 @@ 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
+          );
+        } 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);
         }
       }
     }
@@ -1926,6 +2513,63 @@ var Updater = class {
   }
 };
 
+// src/view-registry.ts
+var viewClassRegistry = {};
+function getViewClass(path) {
+  return viewClassRegistry[path];
+}
+function registerViewClass(viewPath, ViewClass) {
+  const parsed = parseUri(viewPath);
+  const path = parsed.path;
+  if (path) {
+    viewClassRegistry[path] = ViewClass;
+  }
+}
+function invalidateViewClass(viewPath) {
+  const parsed = parseUri(viewPath);
+  const path = parsed.path;
+  if (path) {
+    Reflect.deleteProperty(viewClassRegistry, path);
+  }
+}
+function getViewClassRegistry() {
+  return viewClassRegistry;
+}
+
+// src/hmr.ts
+function reloadViews(viewPath) {
+  const allFrames = Frame.getAll();
+  const toReload = [];
+  for (const [, frame] of allFrames) {
+    if (frame.viewPath) {
+      const parsed = parseUri(frame.viewPath);
+      if (parsed.path === viewPath) {
+        toReload.push({ frame, fullPath: frame.viewPath });
+      }
+    }
+  }
+  for (const { frame, fullPath } of toReload) {
+    frame.mountView(fullPath);
+  }
+}
+function acceptView(hot, viewPath) {
+  hot.accept((newModule) => {
+    const candidate = newModule?.default ?? newModule;
+    if (typeof candidate === "function") {
+      const NewViewClass = candidate;
+      registerViewClass(viewPath, NewViewClass);
+      reloadViews(viewPath);
+    } else {
+      hot.invalidate();
+    }
+  });
+}
+function disposeView(hot, viewPath) {
+  hot.dispose(() => {
+    invalidateViewClass(viewPath);
+  });
+}
+
 // src/view.ts
 var VIEW_GLOBALS = {};
 if (typeof window !== "undefined") {
@@ -2202,17 +2846,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 +2897,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 +3011,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 +3047,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 +3138,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]);
         }
       }
     }
@@ -2518,81 +3160,51 @@ var View = class _View {
     _View.mergeMixins(mixins, this, existingCtors);
     return this;
   }
+  // ============================================================
+  // HMR support (static accept / dispose)
+  // ============================================================
+  /**
+   * Set up HMR accept handler for this view module.
+   *
+   * When the module is hot-replaced, the new View class is extracted from
+   * the new module, registered in the view registry, and all currently
+   * mounted frames using this viewPath are re-mounted.
+   *
+   * No-op when `hot` is undefined (production / non-HMR environment).
+   *
+   * ```ts
+   * if (import.meta.hot) {
+   *   HomeView.accept(import.meta.hot, 'home');
+   * }
+   * ```
+   */
+  static accept(hot, viewPath) {
+    if (!hot) return;
+    acceptView(hot, viewPath);
+  }
+  /**
+   * Set up HMR dispose handler for this view module.
+   *
+   * When the module is about to be replaced, the old View class is removed
+   * from the registry so subsequent lookups don't return the stale class.
+   *
+   * No-op when `hot` is undefined (production / non-HMR environment).
+   *
+   * ```ts
+   * if (import.meta.hot) {
+   *   HomeView.dispose(import.meta.hot, 'home');
+   * }
+   * ```
+   */
+  static dispose(hot, viewPath) {
+    if (!hot) return;
+    disposeView(hot, viewPath);
+  }
 };
 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) {
-  return viewClassRegistry[path];
-}
-function registerViewClass(viewPath, ViewClass) {
-  const parsed = parseUri(viewPath);
-  const path = parsed.path;
-  if (path) {
-    viewClassRegistry[path] = ViewClass;
-  }
-}
-function invalidateViewClass(viewPath) {
-  const parsed = parseUri(viewPath);
-  const path = parsed.path;
-  if (path) {
-    Reflect.deleteProperty(viewClassRegistry, path);
-  }
-}
-function getViewClassRegistry() {
-  return viewClassRegistry;
-}
-
 // src/frame.ts
 var frameRegistry = /* @__PURE__ */ new Map();
 var rootFrame;
@@ -2716,9 +3328,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 +3497,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 +4052,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 +4210,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 +4228,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 +4318,7 @@ function serializeFrameTree() {
 }
 var bridgeInstalled = false;
 var lastTreeJson = "";
-function installFrameVisualizerBridge() {
+function installFrameDevtoolBridge() {
   if (bridgeInstalled) return;
   if (typeof window === "undefined") return;
   bridgeInstalled = true;
@@ -3710,22 +4326,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 +4361,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 +4374,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 +4388,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 +4520,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 +4585,7 @@ var Framework = {
     booted3 = true;
     markBooted();
     markRouterBooted();
-    installFrameVisualizerBridge();
+    installFrameDevtoolBridge();
     const rootFrame2 = Frame.createRoot(config.rootId);
     Router._bind();
     const defaultView = config.defaultView || "";
@@ -4244,7 +4860,6 @@ function bindStore(view, store, selector) {
   EventDelegator,
   EventEmitter,
   Frame,
-  FrameVisualBridge,
   Framework,
   LARK_VIEW,
   Payload,
@@ -4261,20 +4876,21 @@ function bindStore(view, store, selector) {
   bindStore,
   computed,
   create,
+  createVDomRef,
   defineView,
   frameworkConfig,
   getRouteMode,
-  installFrameVisualizerBridge,
   invalidateViewClass,
   mark,
   markBooted,
   markRouterBooted,
   nextCounter,
   registerViewClass,
+  reloadViews,
   resetProjectsMap,
   safeguard,
-  serializeFrameTree,
   unmark,
   use,
-  useUrlState
+  useUrlState,
+  vdomCreate
 });