micra.js 2.1.0 → 2.2.1

package/dist/micra.js

@@ -1,4 +1,4 @@
-/* Micra.js v2.1.0 — https://github.com/micra-js/micra — MIT */
+/* Micra.js v2.2.1 — 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);
@@ -234,11 +239,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;
       }
@@ -256,27 +262,6 @@ var Micra = (() => {
     };
   }
 
-  // src/dom/query.ts
-  function queryAll(root, sel) {
-    return Array.from(root.querySelectorAll(sel));
-  }
-  function queryOwn(root, attr) {
-    return filterOwn(root, queryAll(root, `[${attr}]`));
-  }
-  function queryOwnAll(root, sel) {
-    return filterOwn(root, queryAll(root, sel));
-  }
-  function filterOwn(root, els) {
-    return els.filter((el) => {
-      let node = el.parentElement;
-      while (node && node !== root) {
-        if (node.hasAttribute("data-component")) return false;
-        node = node.parentElement;
-      }
-      return true;
-    });
-  }
-
   // src/dom/directives.ts
   function applyText(el, expr, state) {
     var _a;
@@ -285,7 +270,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;
@@ -302,7 +288,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) {
@@ -330,92 +318,37 @@ var Micra = (() => {
       el.classList.toggle(cls, Boolean(evalExpr(valExpr, state)));
     }
   }
-  function parsePairs(expr) {
-    const out = [];
-    for (const part of expr.split(",")) {
-      const colonIdx = part.indexOf(":");
-      if (colonIdx === -1) continue;
-      const left = part.slice(0, colonIdx).trim();
-      const right = part.slice(colonIdx + 1).trim();
-      if (!left) continue;
-      out.push([left, right]);
-    }
-    return out;
-  }
   function applyModel(el, key, rawState) {
     const html = el;
     const stateVal = rawState[key];
     const desired = stateVal == null ? "" : String(stateVal);
     if (html.value !== desired) html.value = desired;
   }
-  function buildCache(root) {
-    const pick = (attr) => {
-      var _a;
-      const els = queryOwn(root, attr);
-      if ((_a = root.hasAttribute) == null ? void 0 : _a.call(root, attr)) els.unshift(root);
-      return els.filter((el) => !el.closest("template")).map((el) => ({ el, expr: el.getAttribute(attr) }));
-    };
-    const pickPairs = (attr) => pick(attr).map((b) => ({ ...b, pairs: parsePairs(b.expr) }));
-    return {
-      text: pick("data-text"),
-      html: pick("data-html"),
-      if: pick("data-if"),
-      show: pick("data-show"),
-      bind: pickPairs("data-bind"),
-      model: pick("data-model"),
-      class: pickPairs("data-class")
-    };
-  }
-  function applyDirectives(root, state, rawState, _instance) {
-    if (root.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
-      applyFromList(buildFragmentList(root), state, rawState);
-      return;
-    }
-    const el = root;
-    if (!el.__micraCache) el.__micraCache = buildCache(el);
-    applyFromList(el.__micraCache, state, rawState);
-  }
-  function applyFromList(cache, state, rawState) {
-    cache.if.forEach((b) => applyIf(b, state));
-    cache.text.forEach((b) => applyText(b.el, b.expr, state));
-    cache.html.forEach((b) => applyHtml(b.el, b.expr, state));
-    cache.show.forEach((b) => applyShow(b.el, b.expr, state));
-    cache.bind.forEach((b) => applyBind(b.el, b.pairs, state));
-    cache.model.forEach((b) => applyModel(b.el, b.expr.trim(), rawState));
-    cache.class.forEach((b) => applyClass(b.el, b.pairs, state));
-  }
-  function buildFragmentList(frag) {
-    const pick = (attr) => queryAll(frag, `[${attr}]`).filter((el) => !el.closest("template")).map((el) => ({ el, expr: el.getAttribute(attr) }));
-    const pickPairs = (attr) => pick(attr).map((b) => ({ ...b, pairs: parsePairs(b.expr) }));
-    return {
-      text: pick("data-text"),
-      html: pick("data-html"),
-      if: pick("data-if"),
-      show: pick("data-show"),
-      bind: pickPairs("data-bind"),
-      model: pick("data-model"),
-      class: pickPairs("data-class")
-    };
-  }
-  function validateDirectives(root) {
-    var _a, _b;
-    queryOwn(root, "data-each").forEach((el) => {
+  function applyDirectives(scan, state, rawState, _instance) {
+    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);
+    for (const b of scan.show) applyShow(b.el, b.expr, state);
+    for (const b of scan.bind) applyBind(b.el, b.pairs, state);
+    for (const b of scan.model) applyModel(b.el, b.expr.trim(), rawState);
+    for (const b of scan.class) applyClass(b.el, b.pairs, state);
+  }
+  function validateDirectives(scan) {
+    for (const el of scan.each) {
       const tmpl = el;
       if (!el.hasAttribute("data-key") && !tmpl.__micraNoKeyWarned) {
         tmpl.__micraNoKeyWarned = true;
-        warn(`data-each="${el.getAttribute("data-each")}" has no data-key \u2014 keyed diff disabled. Add data-key="id" for better performance.`);
+        warn(
+          `data-each="${el.getAttribute("data-each")}" has no data-key \u2014 keyed diff disabled. Add data-key="id" for better performance.`
+        );
       }
-    });
-    const bindEls = queryOwn(root, "data-bind");
-    if (((_a = root.hasAttribute) == null ? void 0 : _a.call(root, "data-bind")) && !bindEls.includes(root)) bindEls.unshift(root);
-    for (const el of bindEls) {
-      const spec = (_b = el.getAttribute("data-bind")) != null ? _b : "";
-      const hasClassBind = spec.split(",").some((p) => {
-        var _a2;
-        return ((_a2 = p.trim().split(":")[0]) == null ? void 0 : _a2.trim()) === "class";
-      });
-      if (hasClassBind && el.hasAttribute("data-class")) {
-        warn(`element has both data-bind="class:..." and data-class \u2014 they fight on every render. Use one.`);
+    }
+    for (const b of scan.bind) {
+      const hasClassBind = b.pairs.some((p) => p[0] === "class");
+      if (hasClassBind && b.el.hasAttribute("data-class")) {
+        warn(
+          `element has both data-bind="class:..." and data-class \u2014 they fight on every render. Use one.`
+        );
       }
     }
   }
@@ -426,17 +359,13 @@ var Micra = (() => {
     el.addEventListener(type, fn);
     ((_a = instance.__micraListeners) != null ? _a : instance.__micraListeners = []).push({ el, type, fn });
   }
-  function bindDataOn(root, instance) {
-    var _a, _b;
-    const isFragment = root.nodeType === 11;
-    const els = isFragment ? queryAll(root, "[data-on]") : queryOwn(root, "data-on");
-    if (!isFragment && ((_a = root.hasAttribute) == null ? void 0 : _a.call(root, "data-on")) && !els.includes(root))
-      els.unshift(root);
+  function bindDataOn(els, instance) {
+    var _a;
     for (const el of els) {
       const mEl = el;
       if (mEl.__micraEvents) continue;
       mEl.__micraEvents = true;
-      const spec = (_b = mEl.dataset["on"]) != null ? _b : "";
+      const spec = (_a = mEl.dataset["on"]) != null ? _a : "";
       for (const part of spec.split(",")) {
         const [evSpec, method] = part.trim().split(":");
         if (!evSpec || !method) continue;
@@ -452,11 +381,8 @@ var Micra = (() => {
       }
     }
   }
-  function bindAtEvents(root, instance) {
-    const isFragment = root.nodeType === 11;
-    const all = isFragment ? queryAll(root, "*") : queryOwnAll(root, "*");
-    if (!isFragment && !all.includes(root)) all.unshift(root);
-    for (const el of all) {
+  function bindAtEvents(els, instance) {
+    for (const el of els) {
       const mEl = el;
       if (mEl.__micraAtBound) continue;
       let bound = false;
@@ -477,15 +403,12 @@ var Micra = (() => {
       if (bound) mEl.__micraAtBound = true;
     }
   }
-  function bindModels(root, instance) {
-    var _a;
-    const isFragment = root.nodeType === 11;
-    const els = isFragment ? queryAll(root, "[data-model]") : queryOwn(root, "data-model");
-    for (const el of els) {
+  function bindModels(bindings, instance) {
+    for (const { el, expr } of bindings) {
       const mEl = el;
       if (mEl.__micraModel) continue;
       mEl.__micraModel = true;
-      const key = (_a = el.dataset["model"]) != null ? _a : "";
+      const key = expr.trim();
       const tag = el.tagName;
       const inputEl = el;
       const inputType = inputEl.type;
@@ -506,11 +429,132 @@ var Micra = (() => {
     }
   }
 
+  // src/dom/scan.ts
+  function emptyScan() {
+    return {
+      text: [],
+      html: [],
+      if: [],
+      show: [],
+      bind: [],
+      model: [],
+      class: [],
+      each: [],
+      on: [],
+      atEvents: [],
+      refs: []
+    };
+  }
+  function parsePairs(expr) {
+    const out = [];
+    for (const part of expr.split(",")) {
+      const colon = part.indexOf(":");
+      if (colon === -1) continue;
+      const left = part.slice(0, colon).trim();
+      const right = part.slice(colon + 1).trim();
+      if (!left) continue;
+      out.push([left, right]);
+    }
+    return out;
+  }
+  function classify(el, scan) {
+    if (el.tagName === "TEMPLATE") {
+      if (el.hasAttribute("data-each")) scan.each.push(el);
+      return;
+    }
+    const attrs = el.attributes;
+    let atEventSeen = false;
+    for (let i = 0; i < attrs.length; i++) {
+      const a = attrs[i];
+      const name = a.name;
+      const first = name.charCodeAt(0);
+      if (first === 64) {
+        if (!atEventSeen) {
+          scan.atEvents.push(el);
+          atEventSeen = true;
+        }
+        continue;
+      }
+      if (first === 100 && name.length >= 6 && name.charCodeAt(4) === 45) {
+        const rest = name.slice(5);
+        switch (rest) {
+          case "text":
+            scan.text.push({ el, expr: a.value });
+            break;
+          case "html":
+            scan.html.push({ el, expr: a.value });
+            break;
+          case "if":
+            scan.if.push({ el, expr: a.value });
+            break;
+          case "show":
+            scan.show.push({ el, expr: a.value });
+            break;
+          case "bind": {
+            const pairs = parsePairs(a.value);
+            scan.bind.push({ el, expr: a.value, pairs });
+            break;
+          }
+          case "model":
+            scan.model.push({ el, expr: a.value });
+            break;
+          case "class": {
+            const pairs = parsePairs(a.value);
+            scan.class.push({ el, expr: a.value, pairs });
+            break;
+          }
+          case "on":
+            scan.on.push(el);
+            break;
+          case "ref":
+            scan.refs.push(el);
+            break;
+        }
+      }
+    }
+  }
+  var NESTED_COMPONENT_FILTER = {
+    acceptNode(node) {
+      if (node.hasAttribute("data-component"))
+        return NodeFilter.FILTER_REJECT;
+      return NodeFilter.FILTER_ACCEPT;
+    }
+  };
+  function scanComponent(root) {
+    const scan = emptyScan();
+    classify(root, scan);
+    const walker = document.createTreeWalker(
+      root,
+      NodeFilter.SHOW_ELEMENT,
+      NESTED_COMPONENT_FILTER
+    );
+    let node = walker.nextNode();
+    while (node) {
+      classify(node, scan);
+      node = walker.nextNode();
+    }
+    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(root, state, rawState, instance) {
-    queryOwn(root, "data-each").forEach((tmplEl) => {
-      var _a;
-      if (tmplEl.tagName !== "TEMPLATE") return;
+  function renderList(templates, state, rawState, instance, triggerKey) {
+    var _a;
+    for (const tmplEl of templates) {
+      if (tmplEl.tagName !== "TEMPLATE") continue;
       const tmpl = tmplEl;
       const itemsExpr = tmpl.getAttribute("data-each");
       const keyAttr = (_a = tmpl.getAttribute("data-key")) != null ? _a : null;
@@ -524,22 +568,23 @@ var Micra = (() => {
       }
       const marker = tmpl.__micraMarker;
       const keyMap = tmpl.__micraNodes;
-      const parent = marker.parentNode;
-      if (!parent) return;
+      if (!marker.parentNode) continue;
       if (!Array.isArray(items)) {
         tmpl.__micraList.forEach((n) => n.remove());
         tmpl.__micraList = [];
         keyMap.clear();
-        return;
+        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);
       }
-    });
+    }
   }
-  function renderKeyed(tmpl, items, keyAttr, marker, keyMap, parent, state, rawState, instance) {
+  function renderKeyed(tmpl, items, keyAttr, marker, keyMap, state, rawState, instance, canSkipUnchanged) {
+    var _a;
     const nextKeys = /* @__PURE__ */ new Set();
     const nextNodes = [];
     let warnedNullKey = false;
@@ -567,14 +612,24 @@ var Micra = (() => {
         }
         node.__micraKey = key;
         keyMap.set(key, node);
-        bindDataOn(node, instance);
-        bindAtEvents(node, instance);
+        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;
       }
-      const itemState = Object.assign(
-        Object.create(state),
-        { item, index, $index: index }
-      );
-      applyDirectives(node, itemState, rawState, instance);
+      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);
     }
     for (const [key, node] of keyMap) {
@@ -583,14 +638,64 @@ 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) {
+  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) {
     tmpl.__micraList.forEach((n) => n.remove());
     tmpl.__micraList = [];
     const frag = document.createDocumentFragment();
@@ -600,9 +705,11 @@ var Micra = (() => {
         Object.create(state),
         { item, index, $index: index }
       );
-      applyDirectives(clone, itemState, rawState, instance);
-      bindDataOn(clone, instance);
-      bindAtEvents(clone, instance);
+      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;
@@ -610,13 +717,14 @@ var Micra = (() => {
       });
       tmpl.__micraList.push(...nodes);
     }
-    parent.insertBefore(frag, marker.nextSibling);
+    marker.after(frag);
   }
 
   // src/dom/refs.ts
-  function collectRefs(root, instance) {
+  function collectRefs(els, instance) {
+    if (!els.length) return;
     instance.refs = {};
-    for (const el of queryOwn(root, "data-ref")) {
+    for (const el of els) {
       const name = el.dataset["ref"];
       if (name) instance.refs[name] = el;
     }
@@ -630,10 +738,13 @@ var Micra = (() => {
       warn(`"${selector}" not found`);
       return null;
     }
-    if (_instances.has(root)) return _instances.get(root);
+    if (_instances.has(root))
+      return _instances.get(root);
     const rawState = { ...(_a = definition.state) != null ? _a : {} };
     const instance = { $el: root, refs: {} };
-    for (const [key, val] of Object.entries(definition)) {
+    for (const [key, val] of Object.entries(
+      definition
+    )) {
       if (key === "state" || key === "onCreate" || key === "onDestroy") continue;
       if (typeof val === "function") instance[key] = val;
     }
@@ -654,8 +765,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) {
@@ -677,22 +792,29 @@ var Micra = (() => {
     });
     let warnedReentry = false;
     instance.render = function() {
+      var _a2;
       if (instance.__micraDestroyed) return;
+      const triggerKey = _triggerKey;
+      _triggerKey = null;
       if (isRendering) {
         if (!warnedReentry) {
-          warn("render() re-entry detected \u2014 mutation inside a directive expression is ignored. Move state writes to a method.");
+          warn(
+            "render() re-entry detected \u2014 mutation inside a directive expression is ignored. Move state writes to a method."
+          );
           warnedReentry = true;
         }
         return;
       }
       isRendering = true;
       try {
-        applyDirectives(root, exprState, rawState, instance);
-        renderList(root, exprState, rawState, instance);
-        bindDataOn(root, instance);
-        bindAtEvents(root, instance);
-        bindModels(root, instance);
-        collectRefs(root, instance);
+        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, triggerKey);
+        bindDataOn(scan.on, instance);
+        bindAtEvents(scan.atEvents, instance);
+        bindModels(scan.model, instance);
+        collectRefs(scan.refs, instance);
       } finally {
         isRendering = false;
       }
@@ -701,14 +823,16 @@ var Micra = (() => {
       var _a2, _b;
       if (instance.__micraDestroyed) return;
       instance.__micraDestroyed = true;
-      (_a2 = instance.__micraListeners) == null ? void 0 : _a2.forEach(({ el, type, fn }) => el.removeEventListener(type, fn));
+      (_a2 = instance.__micraListeners) == null ? void 0 : _a2.forEach(
+        ({ el, type, fn }) => el.removeEventListener(type, fn)
+      );
       instance.__micraListeners = [];
       const clearFlags = (el) => {
         const m = el;
         delete m.__micraEvents;
         delete m.__micraAtBound;
         delete m.__micraModel;
-        delete m.__micraCache;
+        delete m.__micraScan;
       };
       clearFlags(root);
       root.querySelectorAll("*").forEach(clearFlags);
@@ -720,7 +844,8 @@ var Micra = (() => {
     };
     _instances.set(root, instance);
     instance.render();
-    validateDirectives(root);
+    const mRoot = root;
+    if (mRoot.__micraScan) validateDirectives(mRoot.__micraScan);
     if (typeof definition.onCreate === "function")
       Promise.resolve().then(
         () => definition.onCreate.call(instance)