regor 1.3.5 → 1.3.7

package/dist/regor.es2022.iife.js

@@ -30,7 +30,7 @@ var Regor = (() => {
     computeRef: () => computeRef,
     computed: () => computed,
     createApp: () => createApp,
-    createComponent: () => createComponent,
+    defineComponent: () => defineComponent,
     drainUnbind: () => drainUnbind,
     endBatch: () => endBatch,
     entangle: () => entangle,
@@ -71,8 +71,8 @@ var Regor = (() => {
   // src/cleanup/unbind.ts
   var unbind = (node) => {
     const stack = [node];
-    while (stack.length > 0) {
-      const currentNode = stack.pop();
+    for (let i = 0; i < stack.length; ++i) {
+      const currentNode = stack[i];
       unbindSingle(currentNode);
       for (let child = currentNode.lastChild; child != null; child = child.previousSibling) {
         stack.push(child);
@@ -422,6 +422,8 @@ var Regor = (() => {
   };
 
   // src/bind/IfBinder.ts
+  var noopStopObserving = () => {
+  };
   var mount = (nodes, binder, parent, end) => {
     const childNodes = [];
     for (const x of nodes) {
@@ -546,18 +548,14 @@ var Regor = (() => {
         const parseResult = this.__binder.__parser.__parse(expression);
         const value = parseResult.value;
         const remainingElses = this.__collectElses(nextElement, refresh);
-        const stopObserverList = [];
+        let stopObserver = noopStopObserving;
         const unbinder = () => {
           parseResult.stop();
-          for (const stopObserver of stopObserverList) {
-            stopObserver();
-          }
-          stopObserverList.length = 0;
+          stopObserver();
+          stopObserver = noopStopObserving;
         };
         addUnbinder(commentBegin, unbinder);
-        const stopObserving = parseResult.subscribe ? parseResult.subscribe(refresh) : () => {
-        };
-        stopObserverList.push(stopObserving);
+        stopObserver = parseResult.subscribe(refresh);
         return [
           {
             mount: () => {
@@ -568,8 +566,9 @@ var Regor = (() => {
             },
             isTrue: () => !!value()[0],
             isMounted: false
-          }
-        ].concat(remainingElses);
+          },
+          ...remainingElses
+        ];
       }
     }
     __bindToExpression(el, expression) {
@@ -615,29 +614,31 @@ var Regor = (() => {
         });
       };
       const collectedElses = this.__collectElses(nextElement, refresh);
-      const stopObserverList = [];
+      let stopObserver = noopStopObserving;
       const unbinder = () => {
         parseResult.stop();
-        for (const stopObserver of stopObserverList) {
-          stopObserver();
-        }
-        stopObserverList.length = 0;
+        stopObserver();
+        stopObserver = noopStopObserving;
       };
       addUnbinder(commentBegin, unbinder);
       refresh();
-      const stopObserving = parseResult.subscribe ? parseResult.subscribe(refresh) : () => {
-      };
-      stopObserverList.push(stopObserving);
+      stopObserver = parseResult.subscribe(refresh);
     }
   };
 
   // src/common/common.ts
   var getNodes = (el) => {
-    const childNodes = isTemplate(el) ? el.content.childNodes : [el];
-    return Array.from(childNodes).filter((x) => {
-      const tagName = x?.tagName;
-      return tagName !== "SCRIPT" && tagName !== "STYLE";
-    });
+    const source = isTemplate(el) ? el.content.childNodes : [el];
+    const result = [];
+    for (let i = 0; i < source.length; ++i) {
+      const node = source[i];
+      if (node.nodeType === 1) {
+        const tagName = node?.tagName;
+        if (tagName === "SCRIPT" || tagName === "STYLE") continue;
+      }
+      result.push(node);
+    }
+    return result;
   };
   var bindChildNodes = (binder, childNodes) => {
     for (let i = 0; i < childNodes.length; ++i) {
@@ -734,7 +735,9 @@ var Regor = (() => {
   });
 
   // src/directives/teleport.ts
-  var teleportDirective = {};
+  var teleportDirective = {
+    mount: () => void 0
+  };
 
   // src/composition/callMounted.ts
   var callMounted = (context) => {
@@ -768,11 +771,6 @@ var Regor = (() => {
     return scopeSymbol2 in value;
   };
 
-  // src/composition/onUnmounted.ts
-  var onUnmounted = (onUnmounted2, noThrow) => {
-    peekScope(noThrow)?.onUnmounted.push(onUnmounted2);
-  };
-
   // src/reactivity/refSymbols.ts
   var refSymbol = Symbol("ref");
   var srefSymbol = Symbol("sref");
@@ -783,6 +781,34 @@ var Regor = (() => {
     return value != null && value[srefSymbol] === 1;
   };
 
+  // src/directives/context.ts
+  var contextDirective = {
+    collectRefObj: true,
+    mount: ({ parseResult }) => ({
+      update: ({ values }) => {
+        const ctx = parseResult.context;
+        const obj = values[0];
+        if (!isObject(obj)) return;
+        for (const item of Object.entries(obj)) {
+          const key = item[0];
+          const nextValue = item[1];
+          const ctxKey = ctx[key];
+          if (ctxKey === nextValue) continue;
+          if (isRef(ctxKey)) {
+            ctxKey(nextValue);
+          } else {
+            ctx[key] = nextValue;
+          }
+        }
+      }
+    })
+  };
+
+  // src/composition/onUnmounted.ts
+  var onUnmounted = (onUnmounted2, noThrow) => {
+    peekScope(noThrow)?.onUnmounted.push(onUnmounted2);
+  };
+
   // src/observer/observe.ts
   var observe = (source, observer, init, trackUnmount = true) => {
     if (!isRef(source))
@@ -799,37 +825,6 @@ var Regor = (() => {
     return stop;
   };
 
-  // src/directives/context.ts
-  var contextDirective = {
-    collectRefObj: true,
-    onBind: (_, parseResult) => {
-      const stopObserving = observe(
-        parseResult.value,
-        () => {
-          const value = parseResult.value();
-          const ctx = parseResult.context;
-          const obj = value[0];
-          if (!isObject(obj)) {
-            return;
-          }
-          for (const item of Object.entries(obj)) {
-            const key = item[0];
-            const value2 = item[1];
-            const ctxKey = ctx[key];
-            if (ctxKey === value2) continue;
-            if (isRef(ctxKey)) {
-              ctxKey(value2);
-            } else {
-              ctx[key] = value2;
-            }
-          }
-        },
-        true
-      );
-      return stopObserving;
-    }
-  };
-
   // src/reactivity/entangle.ts
   var entangle = (r1, r2) => {
     if (r1 === r2) return () => {
@@ -1156,8 +1151,8 @@ var Regor = (() => {
   };
   var singlePropDirective = {
     collectRefObj: true,
-    onBind: (_, parseResult, _expr, option, _dynamicOption, _flags) => {
-      if (!option) return noop;
+    mount: ({ parseResult, option }) => {
+      if (typeof option !== "string" || !option) return noop;
       const key = camelize(option);
       let currentSource;
       let bridge;
@@ -1178,43 +1173,43 @@ var Regor = (() => {
         stopEntangle = entangle(source, target);
         currentSource = source;
       };
-      const stopObserving = observe(
-        parseResult.value,
-        () => {
-          const value = parseResult.refs[0] ?? parseResult.value()[0];
-          const ctx = parseResult.context;
-          const ctxKey = ctx[key];
-          if (!isRef(value)) {
-            if (bridge && ctxKey === bridge) {
-              bridge(value);
-              return;
-            }
-            resetSync();
-            if (isRef(ctxKey)) {
-              ctxKey(value);
-              return;
-            }
-            ctx[key] = value;
+      const apply = () => {
+        const value = parseResult.refs[0] ?? parseResult.value()[0];
+        const ctx = parseResult.context;
+        const ctxKey = ctx[key];
+        if (!isRef(value)) {
+          if (bridge && ctxKey === bridge) {
+            bridge(value);
             return;
           }
-          if (isModelBridge(value)) {
-            if (ctxKey === value) return;
-            if (isRef(ctxKey)) {
-              syncRefs(value, ctxKey);
-            } else {
-              ctx[key] = value;
-            }
+          resetSync();
+          if (isRef(ctxKey)) {
+            ctxKey(value);
             return;
           }
-          if (!bridge) bridge = createModelBridge(value);
-          ctx[key] = bridge;
-          syncRefs(value, bridge);
+          ctx[key] = value;
+          return;
+        }
+        if (isModelBridge(value)) {
+          if (ctxKey === value) return;
+          if (isRef(ctxKey)) {
+            syncRefs(value, ctxKey);
+          } else {
+            ctx[key] = value;
+          }
+          return;
+        }
+        if (!bridge) bridge = createModelBridge(value);
+        ctx[key] = bridge;
+        syncRefs(value, bridge);
+      };
+      return {
+        update: () => {
+          apply();
         },
-        true
-      );
-      return () => {
-        stopEntangle();
-        stopObserving();
+        unmount: () => {
+          stopEntangle();
+        }
       };
     }
   };
@@ -1235,7 +1230,10 @@ var Regor = (() => {
     __getRegisteredComponentSelector(registeredComponents) {
       if (this.__registeredComponentSize !== registeredComponents.size) {
         const names = [...registeredComponents.keys()];
-        this.__registeredComponentSelector = names.concat(names.map(hyphenate)).join(",");
+        this.__registeredComponentSelector = [
+          ...names,
+          ...names.map(hyphenate)
+        ].join(",");
         this.__registeredComponentSize = registeredComponents.size;
       }
       return this.__registeredComponentSelector;
@@ -1310,7 +1308,10 @@ var Regor = (() => {
                 definedProp
               ])
             );
-            for (const name of definedProps.concat(definedProps.map(hyphenate))) {
+            for (const name of [
+              ...definedProps,
+              ...definedProps.map(hyphenate)
+            ]) {
               const value = component2.getAttribute(name);
               if (value === null) continue;
               props[camelize(name)] = value;
@@ -1603,15 +1604,14 @@ var Regor = (() => {
       const processNode = (node) => {
         const attrs = node.attributes;
         if (!attrs || attrs.length === 0) return;
-        const attrsAny = attrs;
         for (let i = 0; i < attrs.length; ++i) {
-          const name = (attrsAny[i] ?? attrs.item(i))?.name;
+          const name = attrs.item(i)?.name;
           if (!name) continue;
           appendDirective(node, name);
         }
       };
       processNode(element);
-      if (!isRecursive) return map;
+      if (!isRecursive || !element.firstElementChild) return map;
       const nodes = element.querySelectorAll("*");
       for (const node of nodes) {
         processNode(node);
@@ -1621,6 +1621,8 @@ var Regor = (() => {
   };
 
   // src/bind/DynamicBinder.ts
+  var noopStopObserving2 = () => {
+  };
   var mount2 = (nodes, parent) => {
     for (const x of nodes) {
       const node = x.cloneNode(true);
@@ -1735,19 +1737,15 @@ var Regor = (() => {
           mounted.name = name;
         });
       };
-      const stopObserverList = [];
+      let stopObserver = noopStopObserving2;
       const unbinder = () => {
         parseResult.stop();
-        for (const stopObserver of stopObserverList) {
-          stopObserver();
-        }
-        stopObserverList.length = 0;
+        stopObserver();
+        stopObserver = noopStopObserving2;
       };
       addUnbinder(commentBegin, unbinder);
       refresh();
-      const stopObserving = parseResult.subscribe ? parseResult.subscribe(refresh) : () => {
-      };
-      stopObserverList.push(stopObserving);
+      stopObserver = parseResult.subscribe(refresh);
     }
   };
 
@@ -1757,6 +1755,272 @@ var Regor = (() => {
     return anyValue != null && anyValue[srefSymbol] === 1 ? anyValue() : anyValue;
   };
 
+  // src/directives/html.ts
+  var updateHtml = (el, values) => {
+    const [value, replacer] = values;
+    if (isFunction(replacer)) replacer(el, value);
+    else el.innerHTML = value?.toString();
+  };
+  var htmlDirective = {
+    mount: () => ({
+      update: ({ el, values }) => {
+        updateHtml(el, values);
+      }
+    })
+  };
+
+  // src/bind/ForBinderFastPath.ts
+  var ForBinderFastPath = class _ForBinderFastPath {
+    __bindings;
+    constructor(bindings) {
+      this.__bindings = bindings;
+    }
+    static __create(binder, nodes) {
+      const parser = binder.__parser;
+      const config = binder.__config;
+      const builtInNames = config.__builtInNames;
+      const blockedBuiltIns = /* @__PURE__ */ new Set([
+        builtInNames.for,
+        builtInNames.if,
+        builtInNames.else,
+        builtInNames.elseif,
+        builtInNames.pre
+      ]);
+      const directiveMap = config.__directiveMap;
+      const contextComponents = parser.__getComponents();
+      if (Object.keys(contextComponents).length > 0 || config.__componentsUpperCase.size > 0) {
+        return void 0;
+      }
+      const collector = binder.__directiveCollector;
+      const bindings = [];
+      let nodeIndex = 0;
+      const stack = [];
+      for (let i = nodes.length - 1; i >= 0; --i) {
+        stack.push(nodes[i]);
+      }
+      while (stack.length > 0) {
+        const node = stack.pop();
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          const el = node;
+          if (el.tagName === "TEMPLATE") return void 0;
+          if (el.tagName.includes("-")) return void 0;
+          const tagNameUpper = camelize(el.tagName).toUpperCase();
+          if (config.__componentsUpperCase.has(tagNameUpper) || contextComponents[tagNameUpper]) {
+            return void 0;
+          }
+          const attrs = el.attributes;
+          for (let i = 0; i < attrs.length; ++i) {
+            const attrName = attrs.item(i)?.name;
+            if (!attrName) continue;
+            if (blockedBuiltIns.has(attrName)) return void 0;
+            const { terms, flags } = collector.__parseName(attrName);
+            const [name, option] = terms;
+            const directive = directiveMap[attrName] ?? directiveMap[name];
+            if (!directive) continue;
+            if (directive === htmlDirective) return void 0;
+            bindings.push({
+              nodeIndex,
+              attrName,
+              directive,
+              option,
+              flags
+            });
+          }
+          ++nodeIndex;
+        }
+        const children = node.childNodes;
+        for (let i = children.length - 1; i >= 0; --i) {
+          stack.push(children[i]);
+        }
+      }
+      if (bindings.length === 0) return void 0;
+      return new _ForBinderFastPath(bindings);
+    }
+    __bind(binder, nodes) {
+      const elements = [];
+      const stack = [];
+      for (let i = nodes.length - 1; i >= 0; --i) {
+        stack.push(nodes[i]);
+      }
+      while (stack.length > 0) {
+        const node = stack.pop();
+        if (node.nodeType === Node.ELEMENT_NODE) {
+          elements.push(node);
+        }
+        const children = node.childNodes;
+        for (let i = children.length - 1; i >= 0; --i) {
+          stack.push(children[i]);
+        }
+      }
+      for (let i = 0; i < this.__bindings.length; ++i) {
+        const binding = this.__bindings[i];
+        const el = elements[binding.nodeIndex];
+        if (!el) continue;
+        binder.__bind(
+          binding.directive,
+          el,
+          binding.attrName,
+          false,
+          binding.option,
+          binding.flags
+        );
+      }
+    }
+  };
+
+  // src/bind/ForBinderKeyedDiff.ts
+  var moveMountItemBefore = (item, anchor) => {
+    const parent = anchor.parentNode;
+    if (!parent) return;
+    for (let i = 0; i < item.items.length; ++i) {
+      parent.insertBefore(item.items[i], anchor);
+    }
+  };
+  var getSequence = (arr) => {
+    const len = arr.length;
+    const p = arr.slice();
+    const result = [];
+    let u;
+    let v;
+    let c;
+    for (let i = 0; i < len; ++i) {
+      const value = arr[i];
+      if (value === 0) continue;
+      const j = result[result.length - 1];
+      if (j === void 0 || arr[j] < value) {
+        p[i] = j ?? -1;
+        result.push(i);
+        continue;
+      }
+      u = 0;
+      v = result.length - 1;
+      while (u < v) {
+        c = u + v >> 1;
+        if (arr[result[c]] < value) u = c + 1;
+        else v = c;
+      }
+      if (value < arr[result[u]]) {
+        if (u > 0) p[i] = result[u - 1];
+        result[u] = i;
+      }
+    }
+    u = result.length;
+    v = result[u - 1] ?? -1;
+    while (u-- > 0) {
+      result[u] = v;
+      v = p[v];
+    }
+    return result;
+  };
+  var ForBinderKeyedDiff = class {
+    /**
+     * Applies keyed patch and returns the next ordered mount list.
+     * Returns `undefined` when keyed mode is not safe for this update.
+     */
+    static __patch(options) {
+      const {
+        oldItems,
+        newValues,
+        getKey,
+        isSameValue,
+        mountNewValue,
+        removeMountItem,
+        endAnchor
+      } = options;
+      const oldLen = oldItems.length;
+      const newLen = newValues.length;
+      const newKeys = new Array(newLen);
+      const keySeen = /* @__PURE__ */ new Set();
+      for (let i2 = 0; i2 < newLen; ++i2) {
+        const key = getKey(newValues[i2]);
+        if (key === void 0 || keySeen.has(key)) return void 0;
+        keySeen.add(key);
+        newKeys[i2] = key;
+      }
+      const newMountItems = new Array(newLen);
+      let i = 0;
+      let e1 = oldLen - 1;
+      let e2 = newLen - 1;
+      while (i <= e1 && i <= e2) {
+        const oldItem = oldItems[i];
+        if (getKey(oldItem.value) !== newKeys[i]) break;
+        if (!isSameValue(oldItem.value, newValues[i])) break;
+        oldItem.value = newValues[i];
+        newMountItems[i] = oldItem;
+        ++i;
+      }
+      while (i <= e1 && i <= e2) {
+        const oldItem = oldItems[e1];
+        if (getKey(oldItem.value) !== newKeys[e2]) break;
+        if (!isSameValue(oldItem.value, newValues[e2])) break;
+        oldItem.value = newValues[e2];
+        newMountItems[e2] = oldItem;
+        --e1;
+        --e2;
+      }
+      if (i > e1) {
+        for (let k = e2; k >= i; --k) {
+          const anchor = k + 1 < newLen ? newMountItems[k + 1].items[0] : endAnchor;
+          newMountItems[k] = mountNewValue(k, newValues[k], anchor);
+        }
+        return newMountItems;
+      }
+      if (i > e2) {
+        for (let k = i; k <= e1; ++k) removeMountItem(oldItems[k]);
+        return newMountItems;
+      }
+      const s1 = i;
+      const s2 = i;
+      const toBePatched = e2 - s2 + 1;
+      const newIndexToOldIndexMap = new Array(toBePatched).fill(0);
+      const keyToNewIndexMap = /* @__PURE__ */ new Map();
+      for (let k = s2; k <= e2; ++k) {
+        keyToNewIndexMap.set(newKeys[k], k);
+      }
+      let moved = false;
+      let maxNewIndexSoFar = 0;
+      for (let k = s1; k <= e1; ++k) {
+        const oldItem = oldItems[k];
+        const newIndex = keyToNewIndexMap.get(getKey(oldItem.value));
+        if (newIndex === void 0) {
+          removeMountItem(oldItem);
+          continue;
+        }
+        if (!isSameValue(oldItem.value, newValues[newIndex])) {
+          removeMountItem(oldItem);
+          continue;
+        }
+        oldItem.value = newValues[newIndex];
+        newMountItems[newIndex] = oldItem;
+        newIndexToOldIndexMap[newIndex - s2] = k + 1;
+        if (newIndex >= maxNewIndexSoFar) maxNewIndexSoFar = newIndex;
+        else moved = true;
+      }
+      const increasingNewIndexSequence = moved ? getSequence(newIndexToOldIndexMap) : [];
+      let seqIdx = increasingNewIndexSequence.length - 1;
+      for (let k = toBePatched - 1; k >= 0; --k) {
+        const newIndex = s2 + k;
+        const anchor = newIndex + 1 < newLen ? newMountItems[newIndex + 1].items[0] : endAnchor;
+        if (newIndexToOldIndexMap[k] === 0) {
+          newMountItems[newIndex] = mountNewValue(
+            newIndex,
+            newValues[newIndex],
+            anchor
+          );
+          continue;
+        }
+        const item = newMountItems[newIndex];
+        if (!moved) continue;
+        if (seqIdx >= 0 && increasingNewIndexSequence[seqIdx] === k) {
+          --seqIdx;
+        } else if (item) {
+          moveMountItemBefore(item, anchor);
+        }
+      }
+      return newMountItems;
+    }
+  };
+
   // src/bind/MountList.ts
   var MountList = class {
     __list = [];
@@ -1836,6 +2100,8 @@ var Regor = (() => {
   // src/bind/ForBinder.ts
   var forMarker = Symbol("r-for");
   var noIndexRef = (_) => -1;
+  var noopStopObserving3 = () => {
+  };
   var ForBinder = class _ForBinder {
     __binder;
     __for;
@@ -1905,6 +2171,7 @@ var Regor = (() => {
       el.removeAttribute(nameKey);
       el.removeAttribute(nameKeyBind);
       const nodes = getNodes(el);
+      const fastPath = ForBinderFastPath.__create(this.__binder, nodes);
       const parent = el.parentNode;
       if (!parent) return;
       const title = `${this.__for} => ${forPath}`;
@@ -1924,6 +2191,7 @@ var Regor = (() => {
       const rowContexts = singleCapturedContext ? [void 0, capturedContext[0]] : void 0;
       const getKey = this.__createKeyGetter(keyExpression);
       const areEqual = (a, b) => getKey(a) === getKey(b);
+      const isSameValue = (a, b) => a === b;
       const mountNewValue = (i2, newValue, nextSibling) => {
         const result = config.createContext(newValue, i2);
         const mountItem = MountList.__createItem(result.index, newValue);
@@ -1936,7 +2204,8 @@ var Regor = (() => {
             insertParent.insertBefore(node, nextSibling);
             childNodes.push(node);
           }
-          bindChildNodes(binder, childNodes);
+          if (fastPath) fastPath.__bind(binder, childNodes);
+          else bindChildNodes(binder, childNodes);
           start = start.nextSibling;
           while (start !== nextSibling) {
             mountItem.items.push(start);
@@ -1988,16 +2257,51 @@ var Regor = (() => {
           mountList.__removeAllAfter(0);
           return;
         }
+        const iterableValues = [];
+        for (const value2 of this.__getIterable(newValues[0])) {
+          iterableValues.push(value2);
+        }
+        const patched = ForBinderKeyedDiff.__patch({
+          oldItems: mountList.__list,
+          newValues: iterableValues,
+          getKey,
+          isSameValue,
+          mountNewValue: (index, value2, nextSibling) => mountNewValue(index, value2, nextSibling),
+          removeMountItem: (item) => {
+            for (let k = 0; k < item.items.length; ++k) {
+              removeNode(item.items[k]);
+            }
+          },
+          endAnchor: commentEnd
+        });
+        if (patched) {
+          mountList.__list = patched;
+          mountList.__valueMap.clear();
+          for (let k = 0; k < patched.length; ++k) {
+            const item = patched[k];
+            item.order = k;
+            item.index(k);
+            const key = getKey(item.value);
+            if (key !== void 0) {
+              mountList.__valueMap.set(key, item);
+            }
+          }
+          return;
+        }
         let i2 = 0;
         let firstRemovalOrInsertionIndex = Number.MAX_SAFE_INTEGER;
         const initialLength = len;
         const forGrowThreshold = this.__binder.__config.forGrowThreshold;
         const shouldGrowList = () => mountList.__length < initialLength + forGrowThreshold;
-        for (const newValue of this.__getIterable(newValues[0])) {
+        for (const newValue of iterableValues) {
           const modify = () => {
             if (i2 < len) {
               const mountItem = mountList.__get(i2++);
-              if (areEqual(mountItem.value, newValue)) return;
+              if (areEqual(mountItem.value, newValue)) {
+                if (isSameValue(mountItem.value, newValue)) return;
+                replace(i2 - 1, newValue);
+                return;
+              }
               const newValueMountPosition = mountList.__lookupValueOrderIfMounted(
                 getKey(newValue)
               );
@@ -2047,24 +2351,21 @@ var Regor = (() => {
         mountList.__removeAllAfter(j);
         updateIndexes(firstRemovalOrInsertionIndex);
       };
-      const observeTailChanges = () => {
-        stopObserving = parseResult.subscribe ? parseResult.subscribe(updateDom) : () => {
-        };
-      };
       const unbinder = () => {
         parseResult.stop();
         stopObserving();
+        stopObserving = noopStopObserving3;
       };
       const parseResult = parser.__parse(config.list);
       const value = parseResult.value;
-      let stopObserving;
+      let stopObserving = noopStopObserving3;
       let i = 0;
       const mountList = new MountList(getKey);
       for (const item of this.__getIterable(value()[0])) {
         mountList.__push(mountNewValue(i++, item, commentEnd));
       }
       addUnbinder(commentBegin, unbinder);
-      observeTailChanges();
+      stopObserving = parseResult.subscribe(updateDom);
     }
     static __forPathRegex = /\{?\[?\(?([^)}\]]+)\)?\]?\}?([^)]+)?\s+\b(?:in|of)\b\s+(.*)\s*$/;
     __parseForPath(forPath) {
@@ -2243,97 +2544,108 @@ var Regor = (() => {
     __bindToExpression(config, el, valueExpression, option, flags) {
       if (el.nodeType !== Node.ELEMENT_NODE || valueExpression == null) return;
       if (this.__handleTeleport(config, el, valueExpression)) return;
-      const result = this.__parser.__parse(
+      const dynamicOption = this.__parseDynamicOption(option, config.once);
+      const result = this.__parseExpression(config, valueExpression);
+      const stops = this.__createBindStops(result, dynamicOption);
+      addUnbinder(el, stops.stop);
+      const payload = this.__createDirectivePayload(
+        el,
+        valueExpression,
+        result,
+        dynamicOption,
+        option,
+        flags
+      );
+      const mountedUpdate = this.__mountDirective(config, payload, stops);
+      if (!mountedUpdate) return;
+      const emitChange = this.__createEmitter(
+        payload,
+        result,
+        dynamicOption,
+        option,
+        mountedUpdate
+      );
+      emitChange();
+      if (!config.once) {
+        stops.result = result.subscribe(emitChange);
+        if (dynamicOption) {
+          stops.dynamic = dynamicOption.subscribe(emitChange);
+        }
+      }
+    }
+    __parseDynamicOption(option, once) {
+      const dynamicOptionExpression = isOptionDynamic(option, this.__dynamic);
+      if (!dynamicOptionExpression) return void 0;
+      return this.__parser.__parse(
+        camelize(dynamicOptionExpression),
+        void 0,
+        void 0,
+        void 0,
+        once
+      );
+    }
+    __parseExpression(config, valueExpression) {
+      return this.__parser.__parse(
         valueExpression,
         config.isLazy,
         config.isLazyKey,
         config.collectRefObj,
         config.once
       );
-      const stopObserverList = [];
-      const hasOnChange = !!config.onChange;
-      const unbinder = () => {
-        result.stop();
-        dynamicOption?.stop();
-        for (let i = 0; i < stopObserverList.length; ++i) {
-          stopObserverList[i]();
+    }
+    __createBindStops(result, dynamicOption) {
+      const stops = {
+        stop: () => {
+          result.stop();
+          dynamicOption?.stop();
+          stops.result?.();
+          stops.dynamic?.();
+          stops.mounted?.();
+          stops.result = void 0;
+          stops.dynamic = void 0;
+          stops.mounted = void 0;
         }
-        stopObserverList.length = 0;
       };
-      addUnbinder(el, unbinder);
-      const dynamicOptionExpression = isOptionDynamic(option, this.__dynamic);
-      let dynamicOption;
-      if (dynamicOptionExpression) {
-        dynamicOption = this.__parser.__parse(
-          camelize(dynamicOptionExpression),
-          void 0,
-          void 0,
-          void 0,
-          config.once
-        );
+      return stops;
+    }
+    __createDirectivePayload(el, expr, result, dynamicOption, option, flags) {
+      return {
+        el,
+        expr,
+        values: result.value(),
+        previousValues: void 0,
+        option: dynamicOption ? dynamicOption.value()[0] : option,
+        previousOption: void 0,
+        flags,
+        parseResult: result,
+        dynamicOption
+      };
+    }
+    __mountDirective(config, payload, stops) {
+      const mounted = config.mount(payload);
+      if (typeof mounted === "function") {
+        stops.mounted = mounted;
+        return void 0;
       }
-      const dynamicOpt = dynamicOption;
-      const hasDynamicOption = dynamicOpt != null;
-      let previousValues = result.value();
-      let previousOption = hasDynamicOption ? dynamicOption.value()[0] : option;
-      if (!config.once && hasOnChange) {
-        const stopObserving = result.subscribe ? result.subscribe(() => {
-          const preValues = previousValues;
-          const preOption = previousOption;
-          const nextValues = result.value();
-          const nextOption = hasDynamicOption ? dynamicOpt.value()[0] : option;
-          previousValues = nextValues;
-          previousOption = nextOption;
-          config.onChange?.(
-            el,
-            nextValues,
-            preValues,
-            nextOption,
-            preOption,
-            flags
-          );
-        }) : () => {
-        };
-        stopObserverList.push(stopObserving);
-        if (dynamicOpt) {
-          const stopObserving2 = dynamicOpt.subscribe ? dynamicOpt.subscribe(() => {
-            const preOption = previousOption;
-            const nextValues = result.value();
-            const nextOption = dynamicOpt.value()[0];
-            previousValues = nextValues;
-            previousOption = nextOption;
-            config.onChange?.(
-              el,
-              nextValues,
-              preOption,
-              nextOption,
-              preOption,
-              flags
-            );
-          }) : () => {
-          };
-          stopObserverList.push(stopObserving2);
-        }
+      if (mounted?.unmount) {
+        stops.mounted = mounted.unmount;
       }
-      if (config.onBind)
-        stopObserverList.push(
-          config.onBind(
-            el,
-            result,
-            valueExpression,
-            option,
-            dynamicOption,
-            flags
-          )
-        );
-      config.onChange?.(
-        el,
-        previousValues,
-        void 0,
-        previousOption,
-        void 0,
-        flags
-      );
+      return mounted?.update;
+    }
+    __createEmitter(payload, result, dynamicOption, option, mountedUpdate) {
+      let previousValues;
+      let previousOption;
+      return () => {
+        const nextValues = result.value();
+        const nextOption = dynamicOption ? dynamicOption.value()[0] : option;
+        payload.values = nextValues;
+        payload.previousValues = previousValues;
+        payload.option = nextOption;
+        payload.previousOption = previousOption;
+        previousValues = nextValues;
+        previousOption = nextOption;
+        mountedUpdate(payload);
+      };
     }
   };
 
@@ -2370,38 +2682,50 @@ var Regor = (() => {
   function includeBooleanAttr(value) {
     return !!value || value === "";
   }
-  var attrDirective = {
-    onChange: (el, values, previousValues, option, previousOption, flags) => {
-      if (option) {
-        if (flags && flags.includes("camel")) option = camelize(option);
-        patchAttribute(el, option, values[0], previousOption);
-        return;
-      }
-      const len = values.length;
-      for (let i = 0; i < len; ++i) {
-        const next = values[i];
-        if (isArray(next)) {
-          const previousKey = previousValues?.[i]?.[0];
-          const key = next[0];
-          const value = next[1];
-          patchAttribute(el, key, value, previousKey);
-        } else if (isObject(next)) {
-          for (const item of Object.entries(next)) {
-            const key = item[0];
-            const value = item[1];
-            const p = previousValues?.[i];
-            const previousKey = p && key in p ? key : void 0;
-            patchAttribute(el, key, value, previousKey);
-          }
-        } else {
-          const previousKey = previousValues?.[i];
-          const key = values[i++];
-          const value = values[i];
+  var updateAttr = (el, values, previousValues, option, previousOption, flags) => {
+    if (option) {
+      if (flags && flags.includes("camel")) option = camelize(option);
+      patchAttribute(el, option, values[0], previousOption);
+      return;
+    }
+    const len = values.length;
+    for (let i = 0; i < len; ++i) {
+      const next = values[i];
+      if (isArray(next)) {
+        const previousKey = previousValues?.[i]?.[0];
+        const key = next[0];
+        const value = next[1];
+        patchAttribute(el, key, value, previousKey);
+      } else if (isObject(next)) {
+        for (const item of Object.entries(next)) {
+          const key = item[0];
+          const value = item[1];
+          const p = previousValues?.[i];
+          const previousKey = p && key in p ? key : void 0;
           patchAttribute(el, key, value, previousKey);
         }
+      } else {
+        const previousKey = previousValues?.[i];
+        const key = values[i++];
+        const value = values[i];
+        patchAttribute(el, key, value, previousKey);
       }
     }
   };
+  var attrDirective = {
+    mount: () => ({
+      update: ({ el, values, previousValues, option, previousOption, flags }) => {
+        updateAttr(
+          el,
+          values,
+          previousValues,
+          option,
+          previousOption,
+          flags
+        );
+      }
+    })
+  };
   var patchAttribute = (el, key, value, previousKey) => {
     if (previousKey && previousKey !== key) {
       el.removeAttribute(previousKey);
@@ -2435,23 +2759,28 @@ var Regor = (() => {
   };
 
   // src/directives/class.ts
-  var classDirective = {
-    onChange: (el, values, previousValues) => {
-      const len = values.length;
-      for (let i = 0; i < len; ++i) {
-        const next = values[i];
-        const previous = previousValues?.[i];
-        if (isArray(next)) {
-          const len2 = next.length;
-          for (let j = 0; j < len2; ++j) {
-            patchClass(el, next[j], previous?.[j]);
-          }
-        } else {
-          patchClass(el, next, previous);
+  var updateClass = (el, values, previousValues) => {
+    const len = values.length;
+    for (let i = 0; i < len; ++i) {
+      const next = values[i];
+      const previous = previousValues?.[i];
+      if (isArray(next)) {
+        const len2 = next.length;
+        for (let j = 0; j < len2; ++j) {
+          patchClass(el, next[j], previous?.[j]);
         }
+      } else {
+        patchClass(el, next, previous);
       }
     }
   };
+  var classDirective = {
+    mount: () => ({
+      update: ({ el, values, previousValues }) => {
+        updateClass(el, values, previousValues);
+      }
+    })
+  };
   var patchClass = (el, next, prev) => {
     const classList = el.classList;
     const isClassString = isString(next);
@@ -2479,15 +2808,6 @@ var Regor = (() => {
     }
   };
 
-  // src/directives/html.ts
-  var htmlDirective = {
-    onChange: (el, values) => {
-      const [value, replacer] = values;
-      if (isFunction(replacer)) replacer(el, value);
-      else el.innerHTML = value?.toString();
-    }
-  };
-
   // src/common/looseEqual.ts
   function looseCompareArrays(a, b) {
     if (a.length !== b.length) return false;
@@ -2560,12 +2880,12 @@ var Regor = (() => {
 
   // src/directives/model.ts
   var modelDirective = {
-    onChange: (el, values) => {
-      updateDomElementValue(el, values[0]);
-    },
-    onBind: (el, parseResult, _expr, _option, _dynamicOption, flags) => {
-      return attachDOMChangeListener(el, parseResult, flags);
-    }
+    mount: ({ el, parseResult, flags }) => ({
+      update: ({ values }) => {
+        updateDomElementValue(el, values[0]);
+      },
+      unmount: attachDOMChangeListener(el, parseResult, flags)
+    })
   };
   var updateDomElementValue = (el, value) => {
     const isAnInput = isInput(el);
@@ -2871,65 +3191,74 @@ var Regor = (() => {
     }
     return result;
   };
+  var bindOn = (el, parseResult, option, dynamicOption, flags) => {
+    if (dynamicOption) {
+      const values2 = parseResult.value();
+      const option2 = unref(dynamicOption.value()[0]);
+      if (!isString(option2)) return () => {
+      };
+      return attachEventListener(
+        el,
+        camelize(option2),
+        () => parseResult.value()[0],
+        flags?.join(",") ?? values2[1]
+      );
+    } else if (option) {
+      const values2 = parseResult.value();
+      return attachEventListener(
+        el,
+        camelize(option),
+        () => parseResult.value()[0],
+        flags?.join(",") ?? values2[1]
+      );
+    }
+    const unbinders = [];
+    const unbinder = () => {
+      unbinders.forEach((x) => x());
+    };
+    const values = parseResult.value();
+    const len = values.length;
+    for (let i = 0; i < len; ++i) {
+      let next = values[i];
+      if (isFunction(next)) next = next();
+      if (isObject(next)) {
+        for (const item of Object.entries(next)) {
+          const eventType = item[0];
+          const method = () => {
+            let obj = parseResult.value()[i];
+            if (isFunction(obj)) obj = obj();
+            obj = obj[eventType];
+            if (isFunction(obj)) obj = obj();
+            return obj;
+          };
+          const flags2 = next[eventType + "_flags"];
+          unbinders.push(attachEventListener(el, eventType, method, flags2));
+        }
+      } else {
+        warning(2 /* BindingRequiresObjectExpressions */, "r-on", el);
+      }
+    }
+    return unbinder;
+  };
   var onDirective = {
     isLazy: (i, d) => d === -1 && i % 2 === 0,
     isLazyKey: (key, d) => d === 0 && !key.endsWith("_flags"),
     once: false,
     collectRefObj: true,
-    onBind: (el, parseResult, _expr, option, dynamicOption, flags) => {
-      if (dynamicOption) {
-        const values2 = parseResult.value();
-        const option2 = unref(dynamicOption.value()[0]);
-        if (!isString(option2)) return () => {
-        };
-        return attachEventListener(
-          el,
-          camelize(option2),
-          () => parseResult.value()[0],
-          flags?.join(",") ?? values2[1]
-        );
-      } else if (option) {
-        const values2 = parseResult.value();
-        return attachEventListener(
-          el,
-          camelize(option),
-          () => parseResult.value()[0],
-          flags?.join(",") ?? values2[1]
-        );
-      }
-      const unbinders = [];
-      const unbinder = () => {
-        unbinders.forEach((x) => x());
-      };
-      const values = parseResult.value();
-      const len = values.length;
-      for (let i = 0; i < len; ++i) {
-        let next = values[i];
-        if (isFunction(next)) next = next();
-        if (isObject(next)) {
-          for (const item of Object.entries(next)) {
-            const eventType = item[0];
-            const method = () => {
-              let obj = parseResult.value()[i];
-              if (isFunction(obj)) obj = obj();
-              obj = obj[eventType];
-              if (isFunction(obj)) obj = obj();
-              return obj;
-            };
-            const flags2 = next[eventType + "_flags"];
-            unbinders.push(attachEventListener(el, eventType, method, flags2));
-          }
-        } else {
-          warning(2 /* BindingRequiresObjectExpressions */, "r-on", el);
-        }
-      }
-      return unbinder;
+    mount: ({ el, parseResult, option, dynamicOption, flags }) => {
+      return bindOn(
+        el,
+        parseResult,
+        option,
+        dynamicOption,
+        flags
+      );
     }
   };
   var getShouldExecuteEvent = (eventType, flags) => {
     if (eventType.startsWith("keydown") || eventType.startsWith("keyup") || eventType.startsWith("keypress")) {
       flags ??= "";
-      const parts = eventType.split(".").concat(flags.split(","));
+      const parts = [...eventType.split("."), ...flags.split(",")];
       eventType = parts[0];
       const keyType = parts[1];
       const isCtrl = parts.includes("ctrl");
@@ -3002,34 +3331,39 @@ var Regor = (() => {
   };
 
   // src/directives/prop.ts
-  var propDirective = {
-    onChange: (el, values, _previousValues, option, _previousOption, flags) => {
-      if (option) {
-        if (flags && flags.includes("camel")) option = camelize(option);
-        patchProp(el, option, values[0]);
-        return;
-      }
-      const len = values.length;
-      for (let i = 0; i < len; ++i) {
-        const next = values[i];
-        if (isArray(next)) {
-          const key = next[0];
-          const value = next[1];
-          patchProp(el, key, value);
-        } else if (isObject(next)) {
-          for (const item of Object.entries(next)) {
-            const key = item[0];
-            const value = item[1];
-            patchProp(el, key, value);
-          }
-        } else {
-          const key = values[i++];
-          const value = values[i];
+  var updatePropBinding = (el, values, option, flags) => {
+    if (option) {
+      if (flags && flags.includes("camel")) option = camelize(option);
+      patchProp(el, option, values[0]);
+      return;
+    }
+    const len = values.length;
+    for (let i = 0; i < len; ++i) {
+      const next = values[i];
+      if (isArray(next)) {
+        const key = next[0];
+        const value = next[1];
+        patchProp(el, key, value);
+      } else if (isObject(next)) {
+        for (const item of Object.entries(next)) {
+          const key = item[0];
+          const value = item[1];
           patchProp(el, key, value);
         }
+      } else {
+        const key = values[i++];
+        const value = values[i];
+        patchProp(el, key, value);
       }
     }
   };
+  var propDirective = {
+    mount: () => ({
+      update: ({ el, values, option, flags }) => {
+        updatePropBinding(el, values, option, flags);
+      }
+    })
+  };
   function includeBooleanAttr2(value) {
     return !!value || value === "";
   }
@@ -3084,7 +3418,8 @@ var Regor = (() => {
   // src/directives/ref.ts
   var refDirective = {
     once: true,
-    onBind: (el, result, expr) => {
+    mount: ({ el, parseResult, expr }) => {
+      const result = parseResult;
       const value = result.value()[0];
       const isAnArray = isArray(value);
       const sref2 = result.refs[0];
@@ -3101,37 +3436,47 @@ var Regor = (() => {
   };
 
   // src/directives/show.ts
+  var updateShow = (el, values) => {
+    const data = getBindData(el).data;
+    let originalDisplay = data._ord;
+    if (isUndefined(originalDisplay)) {
+      originalDisplay = data._ord = el.style.display;
+    }
+    const isVisible = !!values[0];
+    if (isVisible) el.style.display = originalDisplay;
+    else el.style.display = "none";
+  };
   var showDirective = {
-    onChange: (el, values) => {
-      const data = getBindData(el).data;
-      let originalDisplay = data._ord;
-      if (isUndefined(originalDisplay)) {
-        originalDisplay = data._ord = el.style.display;
+    mount: () => ({
+      update: ({ el, values }) => {
+        updateShow(el, values);
       }
-      const isVisible = !!values[0];
-      if (isVisible) el.style.display = originalDisplay;
-      else el.style.display = "none";
-    }
+    })
   };
 
   // src/directives/style.ts
-  var styleDirective = {
-    onChange: (el, values, previousValues) => {
-      const len = values.length;
-      for (let i = 0; i < len; ++i) {
-        const next = values[i];
-        const previous = previousValues?.[i];
-        if (isArray(next)) {
-          const len2 = next.length;
-          for (let j = 0; j < len2; ++j) {
-            patchStyle(el, next[j], previous?.[j]);
-          }
-        } else {
-          patchStyle(el, next, previous);
+  var updateStyle = (el, values, previousValues) => {
+    const len = values.length;
+    for (let i = 0; i < len; ++i) {
+      const next = values[i];
+      const previous = previousValues?.[i];
+      if (isArray(next)) {
+        const len2 = next.length;
+        for (let j = 0; j < len2; ++j) {
+          patchStyle(el, next[j], previous?.[j]);
         }
+      } else {
+        patchStyle(el, next, previous);
       }
     }
   };
+  var styleDirective = {
+    mount: () => ({
+      update: ({ el, values, previousValues }) => {
+        updateStyle(el, values, previousValues);
+      }
+    })
+  };
   var patchStyle = (el, next, prev) => {
     const style = el.style;
     const isCssString = isString(next);
@@ -3239,18 +3584,25 @@ var Regor = (() => {
   };
 
   // src/directives/text.ts
+  var updateText = (el, values) => {
+    const value = values[0];
+    el.textContent = isSet(value) ? JSON.stringify(flatten([...value])) : isMap(value) ? JSON.stringify(flatten([...value])) : isObject(value) ? JSON.stringify(flatten(value)) : value?.toString() ?? "";
+  };
   var textDirective = {
-    onChange: (el, values) => {
-      const value = values[0];
-      el.textContent = isSet(value) ? JSON.stringify(flatten([...value])) : isMap(value) ? JSON.stringify(flatten([...value])) : isObject(value) ? JSON.stringify(flatten(value)) : value?.toString() ?? "";
-    }
+    mount: () => ({
+      update: ({ el, values }) => {
+        updateText(el, values);
+      }
+    })
   };
 
   // src/directives/value.ts
   var valueDirective = {
-    onChange: (el, values) => {
-      patchProp(el, "value", values[0]);
-    }
+    mount: () => ({
+      update: ({ el, values }) => {
+        patchProp(el, "value", values[0]);
+      }
+    })
   };
 
   // src/app/RegorConfig.ts
@@ -5054,6 +5406,7 @@ var Regor = (() => {
 
   // src/parser/Parser.ts
   var astCache = {};
+  var isComponentMap = (value) => !!value;
   var Parser = class {
     __contexts;
     __config;
@@ -5065,7 +5418,7 @@ var Regor = (() => {
       this.__contexts = [context, ...this.__contexts];
     }
     __getComponents() {
-      const obj = this.__contexts.map((x) => x.components).filter((x) => !!x).reverse().reduce((p, c) => {
+      const obj = this.__contexts.map((x) => x.components).filter(isComponentMap).reverse().reduce((p, c) => {
         for (const [key, value] of Object.entries(c)) {
           p[key.toUpperCase()] = value;
         }
@@ -5076,7 +5429,7 @@ var Regor = (() => {
     __getComponentSelectors() {
       const selectors = [];
       const seen = /* @__PURE__ */ new Set();
-      const componentsList = this.__contexts.map((x) => x.components).filter((x) => !!x).reverse();
+      const componentsList = this.__contexts.map((x) => x.components).filter(isComponentMap).reverse();
       for (const components of componentsList) {
         for (const key of Object.keys(components)) {
           if (seen.has(key)) continue;
@@ -5087,12 +5440,12 @@ var Regor = (() => {
       return selectors;
     }
     __parse(expression, isLazy, isLazyKey, collectRefObj, once) {
-      const value = sref([]);
+      let currentValues = [];
       const stopObserverList = [];
       const subscribers = /* @__PURE__ */ new Set();
       const clearObservers = () => {
-        for (const stopObserver of stopObserverList) {
-          stopObserver();
+        for (let i = 0; i < stopObserverList.length; ++i) {
+          stopObserverList[i]();
         }
         stopObserverList.length = 0;
       };
@@ -5102,13 +5455,13 @@ var Regor = (() => {
       };
       const subscribe = (observer, init) => {
         subscribers.add(observer);
-        if (init) observer(value());
+        if (init) observer(currentValues);
         return () => {
           subscribers.delete(observer);
         };
       };
       const result = {
-        value,
+        value: () => currentValues,
         stop: unbinder,
         subscribe,
         refs: [],
@@ -5129,7 +5482,7 @@ var Regor = (() => {
             context,
             collectRefObj
           );
-          if (collectRefs2) refs.push(...r.refs);
+          if (collectRefs2 && r.refs.length > 0) refs.push(...r.refs);
           return { value: r.value, refs: r.refs, ref: r.ref };
         } catch (e) {
           warning(6 /* ErrorLog */, `evaluation error: ${expression}`, e);
@@ -5142,36 +5495,37 @@ var Regor = (() => {
         const contexts = this.__contexts.slice();
         const elements = ast.elements;
         const len = elements.length;
+        const expressionRefs = new Array(len);
+        result.refs = expressionRefs;
         const refresh = () => {
           refs.length = 0;
-          uniqueRefs.clear();
-          clearObservers();
-          const values = new Array(len);
-          const expressionRefs = new Array(len);
+          if (!once) {
+            uniqueRefs.clear();
+            clearObservers();
+          }
+          const nextValues = new Array(len);
           for (let i = 0; i < len; ++i) {
             const expr = elements[i];
             if (isLazy?.(i, -1)) {
-              values[i] = (e) => evaluate(expr, contexts, false, { $event: e }).value;
+              nextValues[i] = (e) => evaluate(expr, contexts, false, { $event: e }).value;
               continue;
             }
             const evaluated = evaluate(expr, contexts, true);
-            values[i] = evaluated.value;
+            nextValues[i] = evaluated.value;
             expressionRefs[i] = evaluated.ref;
           }
           if (!once) {
             for (const r of refs) {
               if (uniqueRefs.has(r)) continue;
               uniqueRefs.add(r);
-              const stopObserving = observe(r, refresh);
-              stopObserverList.push(stopObserving);
+              stopObserverList.push(observe(r, refresh));
             }
           }
-          result.refs = expressionRefs;
-          value(values);
+          currentValues = nextValues;
           if (subscribers.size !== 0) {
             for (const subscriber of subscribers) {
               if (!subscribers.has(subscriber)) continue;
-              subscriber(values);
+              subscriber(currentValues);
             }
           }
         };
@@ -5480,8 +5834,8 @@ var Regor = (() => {
     return json;
   };
 
-  // src/app/createComponent.ts
-  var createComponent = (template, options = {}) => {
+  // src/app/defineComponent.ts
+  var defineComponent = (template, options = {}) => {
     if (isArray(options)) options = { props: options };
     if (isString(template)) template = { template };
     const context = options.context ?? (() => ({}));