micra.js 2.2.1 → 2.3.1

package/dist/micra.esm.js

@@ -1,4 +1,4 @@
-/* Micra.js v2.2.1 — https://github.com/micra-js/micra — MIT */
+/* Micra.js v2.3.1 — https://github.com/micra-js/micra — MIT */
 
 // src/utils/fetch.ts
 function getCSRF() {
@@ -192,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);
@@ -217,13 +218,14 @@ function createReactiveState(obj, schedule, onKey) {
 }
 function createScheduler(render) {
   let pending = false;
+  const flush = () => {
+    pending = false;
+    render();
+  };
   return function schedule() {
     if (pending) return;
     pending = true;
-    Promise.resolve().then(() => {
-      pending = false;
-      render();
-    });
+    queueMicrotask(flush);
   };
 }
 
@@ -289,7 +291,7 @@ function applyModel(el, key, rawState) {
   const desired = stateVal == null ? "" : String(stateVal);
   if (html.value !== desired) html.value = desired;
 }
-function applyDirectives(scan, state, rawState, _instance) {
+function applyDirectives(scan, state, rawState) {
   for (const b of scan.if) applyIf(b, state);
   for (const b of scan.text) applyText(b.el, b.expr, state);
   for (const b of scan.html) applyHtml(b.el, b.expr, state);
@@ -500,20 +502,6 @@ 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, triggerKey) {
@@ -544,10 +532,28 @@ function renderList(templates, state, rawState, instance, triggerKey) {
     if (keyAttr) {
       renderKeyed(tmpl, items, keyAttr, marker, keyMap, state, rawState, instance, canSkipUnchanged);
     } else {
-      renderNoKey(tmpl, items, marker, state, rawState, instance);
+      renderNoKey(tmpl, items, marker, state, rawState, instance, canSkipUnchanged);
     }
   }
 }
+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();
@@ -567,22 +573,8 @@ function renderKeyed(tmpl, items, keyAttr, marker, keyMap, state, rawState, inst
     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.__micraKey = key;
+      node = createRowNode(tmpl, state, instance);
       keyMap.set(key, node);
-      const rowScan2 = scanComponent(node);
-      node.__micraScan = rowScan2;
-      bindDataOn(rowScan2.on, instance);
-      bindAtEvents(rowScan2.atEvents, instance);
-      bindModels(rowScan2.model, instance);
-      node._itemState = Object.create(state);
     } else if (canSkipUnchanged && node.__micraItem === item && node.__micraIndex === index) {
       nextNodes.push(node);
       continue;
@@ -594,7 +586,7 @@ function renderKeyed(tmpl, items, keyAttr, marker, keyMap, state, rawState, inst
     itemState.index = index;
     itemState.$index = index;
     const rowScan = (_a = node.__micraScan) != null ? _a : node.__micraScan = scanComponent(node);
-    applyDirectives(rowScan, itemState, rawState, instance);
+    applyDirectives(rowScan, itemState, rawState);
     nextNodes.push(node);
   }
   for (const [key, node] of keyMap) {
@@ -660,29 +652,50 @@ function reorderKeyed(nextNodes, prevList, marker) {
     anchor = node;
   }
 }
-function renderNoKey(tmpl, items, marker, 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);
-  }
-  marker.after(frag);
+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);
+    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.__micraItem = item;
+      node.__micraIndex = i;
+      applyDirectives(node.__micraScan, itemState, rawState);
+      nextList[i] = node;
+      frag.append(node);
+    }
+    const anchor = prevLen > 0 ? nextList[prevLen - 1] : marker;
+    anchor.after(frag);
+  }
+  tmpl.__micraList = nextList;
 }
 
 // src/dom/refs.ts
@@ -774,7 +787,7 @@ function mount(selector, definition) {
     try {
       const mRoot2 = root;
       const scan = (_a2 = mRoot2.__micraScan) != null ? _a2 : mRoot2.__micraScan = scanComponent(root);
-      applyDirectives(scan, exprState, rawState, instance);
+      applyDirectives(scan, exprState, rawState);
       renderList(scan.each, exprState, rawState, instance, triggerKey);
       bindDataOn(scan.on, instance);
       bindAtEvents(scan.atEvents, instance);