micra.js 2.2.1 → 2.3.1

package/dist/micra.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 */
 "use strict";
 var Micra = (() => {
   var __defProp = Object.defineProperty;
@@ -227,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);
@@ -252,13 +253,14 @@ var Micra = (() => {
   }
   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);
     };
   }
 
@@ -324,7 +326,7 @@ var Micra = (() => {
     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);
@@ -535,20 +537,6 @@ 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, triggerKey) {
@@ -579,10 +567,28 @@ var Micra = (() => {
       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();
@@ -602,22 +608,8 @@ 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.__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;
@@ -629,7 +621,7 @@ var Micra = (() => {
       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) {
@@ -695,29 +687,50 @@ var Micra = (() => {
       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
@@ -809,7 +822,7 @@ var Micra = (() => {
       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);