micra.js 2.2.0 → 2.3.0

package/dist/micra.js

@@ -1,4 +1,4 @@
-/* Micra.js v2.2.0 — https://github.com/micra-js/micra — MIT */
+/* Micra.js v2.3.0 — https://github.com/micra-js/micra — MIT */
 "use strict";
 var Micra = (() => {
   var __defProp = Object.defineProperty;
@@ -176,27 +176,32 @@ var Micra = (() => {
     return false;
   }
   function evalExpr(expr, state) {
-    if (SIMPLE_PATH.test(expr)) {
-      const parts = expr.split(".");
-      if (!safeStateHas(state, parts[0])) return void 0;
-      return parts.reduce(
+    let cached = exprCache.get(expr);
+    if (!cached) {
+      if (SIMPLE_PATH.test(expr)) {
+        cached = { kind: "path", parts: expr.split(".") };
+      } else {
+        try {
+          cached = {
+            kind: "fn",
+            fn: new Function("$s", "$safe", `with($safe){with($s){return (${expr})}}`)
+          };
+        } catch {
+          warn(`invalid expression "${expr}"`);
+          cached = { kind: "fn", fn: () => void 0 };
+        }
+      }
+      exprCache.set(expr, cached);
+    }
+    if (cached.kind === "path") {
+      if (!safeStateHas(state, cached.parts[0])) return void 0;
+      return cached.parts.reduce(
         (obj, key) => obj != null ? obj[key] : void 0,
         state
       );
     }
-    if (!exprCache.has(expr)) {
-      try {
-        exprCache.set(
-          expr,
-          new Function("$s", "$safe", `with($safe){with($s){return (${expr})}}`)
-        );
-      } catch {
-        warn(`invalid expression "${expr}"`);
-        exprCache.set(expr, () => void 0);
-      }
-    }
     try {
-      return exprCache.get(expr)(safeStateWrap(state), SAFE_OUTER);
+      return cached.fn(safeStateWrap(state), SAFE_OUTER);
     } catch (e) {
       if (!warnedRuntime.has(expr)) {
         warnedRuntime.add(expr);
@@ -222,8 +227,9 @@ var Micra = (() => {
     set.delete(handler);
     if (set.size === 0) _bus.delete(event);
   }
-  function emit(event, payload) {
+  function emit(event, ...args) {
     var _a;
+    const payload = args[0];
     (_a = _bus.get(event)) == null ? void 0 : _a.forEach((h) => {
       try {
         h(payload);
@@ -234,11 +240,12 @@ var Micra = (() => {
   }
 
   // src/core/reactive.ts
-  function createReactiveState(obj, schedule) {
+  function createReactiveState(obj, schedule, onKey) {
     return new Proxy(obj, {
       set(target, key, value) {
         ;
         target[key] = value;
+        onKey == null ? void 0 : onKey(key);
         schedule();
         return true;
       }
@@ -264,7 +271,8 @@ var Micra = (() => {
   }
   function applyHtml(el, expr, state) {
     var _a;
-    el.innerHTML = String((_a = evalExpr(expr, state)) != null ? _a : "");
+    const html = String((_a = evalExpr(expr, state)) != null ? _a : "");
+    if (el.innerHTML !== html) el.innerHTML = html;
   }
   function applyIf(binding, state) {
     const el = binding.el;
@@ -281,7 +289,9 @@ var Micra = (() => {
     }
   }
   function applyShow(el, expr, state) {
-    el.style.display = evalExpr(expr, state) ? "" : "none";
+    const desired = evalExpr(expr, state) ? "" : "none";
+    const htmlEl = el;
+    if (htmlEl.style.display !== desired) htmlEl.style.display = desired;
   }
   function applyBind(el, pairs, state) {
     for (const [attr, valExpr] of pairs) {
@@ -526,23 +536,9 @@ var Micra = (() => {
     }
     return scan;
   }
-  function scanFragment(frag) {
-    const scan = emptyScan();
-    const walker = document.createTreeWalker(
-      frag,
-      NodeFilter.SHOW_ELEMENT,
-      NESTED_COMPONENT_FILTER
-    );
-    let node = walker.nextNode();
-    while (node) {
-      classify(node, scan);
-      node = walker.nextNode();
-    }
-    return scan;
-  }
 
   // src/dom/each.ts
-  function renderList(templates, state, rawState, instance) {
+  function renderList(templates, state, rawState, instance, triggerKey) {
     var _a;
     for (const tmplEl of templates) {
       if (tmplEl.tagName !== "TEMPLATE") continue;
@@ -559,22 +555,40 @@ var Micra = (() => {
       }
       const marker = tmpl.__micraMarker;
       const keyMap = tmpl.__micraNodes;
-      const parent = marker.parentNode;
-      if (!parent) continue;
+      if (!marker.parentNode) continue;
       if (!Array.isArray(items)) {
         tmpl.__micraList.forEach((n) => n.remove());
         tmpl.__micraList = [];
         keyMap.clear();
         continue;
       }
+      const canSkipUnchanged = triggerKey !== null && triggerKey !== "MULTIPLE" && triggerKey === itemsExpr;
       if (keyAttr) {
-        renderKeyed(tmpl, items, keyAttr, marker, keyMap, parent, state, rawState, instance);
+        renderKeyed(tmpl, items, keyAttr, marker, keyMap, state, rawState, instance, canSkipUnchanged);
       } else {
-        renderNoKey(tmpl, items, marker, parent, state, rawState, instance);
+        renderNoKey(tmpl, items, marker, state, rawState, instance, canSkipUnchanged);
       }
     }
   }
-  function renderKeyed(tmpl, items, keyAttr, marker, keyMap, parent, state, rawState, instance) {
+  function createRowNode(tmpl, state, instance) {
+    const frag = tmpl.content.cloneNode(true);
+    let node;
+    if (frag.childNodes.length === 1) {
+      node = frag.firstElementChild;
+    } else {
+      node = document.createElement("micra-each-item");
+      node.style.display = "contents";
+      node.append(frag);
+    }
+    const rowScan = scanComponent(node);
+    node.__micraScan = rowScan;
+    node._itemState = Object.create(state);
+    bindDataOn(rowScan.on, instance);
+    bindAtEvents(rowScan.atEvents, instance);
+    bindModels(rowScan.model, instance);
+    return node;
+  }
+  function renderKeyed(tmpl, items, keyAttr, marker, keyMap, state, rawState, instance, canSkipUnchanged) {
     var _a;
     const nextKeys = /* @__PURE__ */ new Set();
     const nextNodes = [];
@@ -593,26 +607,19 @@ var Micra = (() => {
       nextKeys.add(key);
       let node = keyMap.get(key);
       if (!node) {
-        const frag = tmpl.content.cloneNode(true);
-        if (frag.childNodes.length === 1) {
-          node = frag.firstElementChild;
-        } else {
-          node = document.createElement("micra-each-item");
-          node.style.display = "contents";
-          node.append(frag);
-        }
+        node = createRowNode(tmpl, state, instance);
         node.__micraKey = key;
         keyMap.set(key, node);
-        const rowScan2 = scanComponent(node);
-        node.__micraScan = rowScan2;
-        bindDataOn(rowScan2.on, instance);
-        bindAtEvents(rowScan2.atEvents, instance);
-        bindModels(rowScan2.model, instance);
+      } else if (canSkipUnchanged && node.__micraItem === item && node.__micraIndex === index) {
+        nextNodes.push(node);
+        continue;
       }
-      const itemState = Object.assign(
-        Object.create(state),
-        { item, index, $index: index }
-      );
+      node.__micraItem = item;
+      node.__micraIndex = index;
+      const itemState = node._itemState;
+      itemState.item = item;
+      itemState.index = index;
+      itemState.$index = index;
       const rowScan = (_a = node.__micraScan) != null ? _a : node.__micraScan = scanComponent(node);
       applyDirectives(rowScan, itemState, rawState, instance);
       nextNodes.push(node);
@@ -623,40 +630,113 @@ var Micra = (() => {
         keyMap.delete(key);
       }
     }
-    let cursor = marker;
-    for (const node of nextNodes) {
-      if (cursor.nextSibling !== node) parent.insertBefore(node, cursor.nextSibling);
-      cursor = node;
+    const prevList = tmpl.__micraList;
+    if (prevList.length === 0) {
+      if (nextNodes.length) {
+        const frag = document.createDocumentFragment();
+        for (const node of nextNodes) frag.append(node);
+        marker.after(frag);
+      }
+    } else {
+      let orderChanged = nextNodes.length !== prevList.length;
+      if (!orderChanged) {
+        for (let i = 0; i < nextNodes.length; i++) {
+          if (nextNodes[i] !== prevList[i]) {
+            orderChanged = true;
+            break;
+          }
+        }
+      }
+      if (orderChanged) reorderKeyed(nextNodes, prevList, marker);
     }
     tmpl.__micraList = nextNodes;
   }
-  function renderNoKey(tmpl, items, marker, parent, state, rawState, instance) {
-    tmpl.__micraList.forEach((n) => n.remove());
-    tmpl.__micraList = [];
-    const frag = document.createDocumentFragment();
-    for (const [index, item] of items.entries()) {
-      const clone = tmpl.content.cloneNode(true);
-      const itemState = Object.assign(
-        Object.create(state),
-        { item, index, $index: index }
-      );
-      const fragScan = scanFragment(clone);
-      applyDirectives(fragScan, itemState, rawState, instance);
-      bindDataOn(fragScan.on, instance);
-      bindAtEvents(fragScan.atEvents, instance);
-      bindModels(fragScan.model, instance);
-      const nodes = Array.from(clone.childNodes);
-      nodes.forEach((n) => {
-        n.__micraEach = true;
-        frag.append(n);
-      });
-      tmpl.__micraList.push(...nodes);
+  function reorderKeyed(nextNodes, prevList, marker) {
+    const prevPos = /* @__PURE__ */ new Map();
+    for (let i = 0; i < prevList.length; i++) prevPos.set(prevList[i], i);
+    const n = nextNodes.length;
+    const tails = [];
+    const tailIdx = [];
+    const prev = new Array(n).fill(-1);
+    for (let i = 0; i < n; i++) {
+      const p = prevPos.get(nextNodes[i]);
+      if (p === void 0) continue;
+      let lo = 0, hi = tails.length;
+      while (lo < hi) {
+        const m = lo + hi >> 1;
+        tails[m] < p ? lo = m + 1 : hi = m;
+      }
+      if (lo > 0) prev[i] = tailIdx[lo - 1];
+      tails[lo] = p;
+      tailIdx[lo] = i;
+    }
+    const stable = /* @__PURE__ */ new Set();
+    let idx = tailIdx[tails.length - 1];
+    while (idx >= 0) {
+      stable.add(idx);
+      idx = prev[idx];
+    }
+    let anchor = marker;
+    for (let i = 0; i < n; i++) {
+      const node = nextNodes[i];
+      if (stable.has(i)) {
+        anchor = node;
+        continue;
+      }
+      anchor.after(node);
+      anchor = node;
+    }
+  }
+  function renderNoKey(tmpl, items, marker, state, rawState, instance, canSkipUnchanged) {
+    const prevList = tmpl.__micraList;
+    const prevLen = prevList.length;
+    const nextLen = items.length;
+    const reuseLen = nextLen < prevLen ? nextLen : prevLen;
+    const nextList = new Array(nextLen);
+    for (let i = 0; i < reuseLen; i++) {
+      const node = prevList[i];
+      const item = items[i];
+      if (canSkipUnchanged && node.__micraItem === item && node.__micraIndex === i) {
+        nextList[i] = node;
+        continue;
+      }
+      node.__micraItem = item;
+      node.__micraIndex = i;
+      const itemState = node._itemState;
+      itemState.item = item;
+      itemState.index = i;
+      itemState.$index = i;
+      applyDirectives(node.__micraScan, itemState, rawState, instance);
+      nextList[i] = node;
+    }
+    for (let i = nextLen; i < prevLen; i++) {
+      prevList[i].remove();
+    }
+    if (nextLen > prevLen) {
+      const frag = document.createDocumentFragment();
+      for (let i = prevLen; i < nextLen; i++) {
+        const node = createRowNode(tmpl, state, instance);
+        const item = items[i];
+        const itemState = node._itemState;
+        itemState.item = item;
+        itemState.index = i;
+        itemState.$index = i;
+        node.__micraEach = true;
+        node.__micraItem = item;
+        node.__micraIndex = i;
+        applyDirectives(node.__micraScan, itemState, rawState, instance);
+        nextList[i] = node;
+        frag.append(node);
+      }
+      const anchor = prevLen > 0 ? nextList[prevLen - 1] : marker;
+      anchor.after(frag);
     }
-    parent.insertBefore(frag, marker.nextSibling);
+    tmpl.__micraList = nextList;
   }
 
   // src/dom/refs.ts
   function collectRefs(els, instance) {
+    if (!els.length) return;
     instance.refs = {};
     for (const el of els) {
       const name = el.dataset["ref"];
@@ -699,8 +779,12 @@ var Micra = (() => {
       return unsub;
     };
     let isRendering = false;
+    let _triggerKey = null;
     const schedule = createScheduler(() => instance.render());
-    instance.state = createReactiveState(rawState, schedule);
+    instance.state = createReactiveState(rawState, schedule, (key) => {
+      if (_triggerKey === null) _triggerKey = key;
+      else if (_triggerKey !== key) _triggerKey = "MULTIPLE";
+    });
     const boundMethods = /* @__PURE__ */ new Map();
     const exprState = new Proxy(rawState, {
       get(target, key) {
@@ -724,6 +808,8 @@ var Micra = (() => {
     instance.render = function() {
       var _a2;
       if (instance.__micraDestroyed) return;
+      const triggerKey = _triggerKey;
+      _triggerKey = null;
       if (isRendering) {
         if (!warnedReentry) {
           warn(
@@ -738,7 +824,7 @@ var Micra = (() => {
         const mRoot2 = root;
         const scan = (_a2 = mRoot2.__micraScan) != null ? _a2 : mRoot2.__micraScan = scanComponent(root);
         applyDirectives(scan, exprState, rawState, instance);
-        renderList(scan.each, exprState, rawState, instance);
+        renderList(scan.each, exprState, rawState, instance, triggerKey);
         bindDataOn(scan.on, instance);
         bindAtEvents(scan.atEvents, instance);
         bindModels(scan.model, instance);