micra.js 2.2.0 → 2.3.0

package/dist/micra.esm.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 */
 
 // src/utils/fetch.ts
 function getCSRF() {
@@ -141,27 +141,32 @@ function safeStateHas(state, key) {
   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);
@@ -187,8 +192,9 @@ function off(event, handler) {
   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);
@@ -199,11 +205,12 @@ function emit(event, payload) {
 }
 
 // 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;
     }
@@ -229,7 +236,8 @@ function applyText(el, expr, state) {
 }
 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;
@@ -246,7 +254,9 @@ function applyIf(binding, state) {
   }
 }
 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) {
@@ -491,23 +501,9 @@ function scanComponent(root) {
   }
   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;
@@ -524,22 +520,40 @@ function renderList(templates, state, rawState, instance) {
     }
     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 = [];
@@ -558,26 +572,19 @@ function renderKeyed(tmpl, items, keyAttr, marker, keyMap, parent, state, rawSta
     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);
@@ -588,40 +595,113 @@ function renderKeyed(tmpl, items, keyAttr, marker, keyMap, parent, state, rawSta
       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;
   }
-  parent.insertBefore(frag, marker.nextSibling);
+  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);
+  }
+  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"];
@@ -664,8 +744,12 @@ function mount(selector, definition) {
     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) {
@@ -689,6 +773,8 @@ function mount(selector, definition) {
   instance.render = function() {
     var _a2;
     if (instance.__micraDestroyed) return;
+    const triggerKey = _triggerKey;
+    _triggerKey = null;
     if (isRendering) {
       if (!warnedReentry) {
         warn(
@@ -703,7 +789,7 @@ function mount(selector, definition) {
       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);