regor 1.3.4 → 1.3.6

package/dist/regor.es2015.iife.js

@@ -110,8 +110,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);
@@ -247,30 +247,105 @@ var Regor = (() => {
   // src/app/ComponentHead.ts
   var ComponentHead = class {
     constructor(props, element, ctx, start, end) {
+      /**
+       * Values provided by parent for this component instance.
+       *
+       * Sources:
+       * - declared props via `props: ['foo']` + attribute binding (`:foo="..."`)
+       * - object binding via `:context="{ ... }"`
+       */
       __publicField(this, "props");
+      /**
+       * Comment node that marks the beginning of this mounted component block.
+       * Advanced use only.
+       */
       __publicField(this, "start");
+      /**
+       * Comment node that marks the end of this mounted component block.
+       * Advanced use only.
+       */
       __publicField(this, "end");
+      /**
+       * Captured context chain used by this component instance.
+       * Used internally for lifecycle/unmount behavior.
+       */
       __publicField(this, "ctx");
-      /** Automatically assigns properties defined in the :props binding to the component context when enabled. If disabled, props should be manually assigned using head.props.
-       * Default: true */
+      /**
+       * Controls whether Regor should automatically apply incoming `head.props`
+       * values to the component context after `context(head)` returns.
+       *
+       * Think of it as "auto wire parent inputs into my component fields".
+       *
+       * - `true` (default):
+       *   - If a key exists in `head.props` but does not exist on the object
+       *     returned by `context(head)`, Regor adds that key to component context.
+       *   - Existing ref fields can receive incoming values automatically.
+       *   - Ref-to-ref inputs can be entangled when `head.entangle` is enabled.
+       * - `false`:
+       *   - Regor does not auto-apply props.
+       *   - You fully control mapping manually inside `context(head)`.
+       *
+       * Use `false` when you need strict custom mapping/validation/transforms
+       * before any value touches component state.
+       *
+       * "Missing key" is always checked against the returned component context object.
+       *
+       * Example (auto add):
+       * ```ts
+       * // Parent passes: :context="{ badge: 'pro' }"
+       * context(head) {
+       *   // Returned context has no "badge" key:
+       *   return { name: ref('Ada') }
+       * }
+       * // Resulting component context becomes:
+       * // { name: ref('Ada'), badge: 'pro' }
+       * ```
+       *
+       * Example:
+       * ```ts
+       * context(head) {
+       *   head.autoProps = false
+       *   const title = ref((head.props.title as string) ?? 'Untitled')
+       *   return { title }
+       * }
+       * ```
+       */
       __publicField(this, "autoProps", true);
-      /** When both autoProps and entangle are enabled,
-       * the refs defined in the component context (without using head.props)
-       * become entangled with the head.props refs. (parent[ref] `<==>` component[ref])
-       * This means that changes to parent[ref] reflect in component[ref], and vice versa.
-       * Disable this flag to isolate refs created within the component context.
-       * Default: true */
+      /**
+       * Enables two-way ref linking between incoming props and component context
+       * when `autoProps` is also enabled.
+       *
+       * - `true` (default): parent and component refs stay synchronized.
+       * - `false`: component keeps local ref isolation.
+       */
       __publicField(this, "entangle", true);
-      /** enables slot context switch to the parent
-       * Default: false */
+      /**
+       * Enables slot context switch behavior for advanced slot scenarios.
+       * Default: `false`.
+       */
       __publicField(this, "enableSwitch", false);
-      /** A callback invoked after auto props get assigned to the component context. */
+      /**
+       * Optional hook called after automatic prop assignment completes.
+       * Useful when post-assignment normalization is needed.
+       */
       __publicField(this, "onAutoPropsAssigned");
       /**
        * @internal
        */
       __publicField(this, "__element");
-      /** use arrow syntax to be called without using head.emit.bind(head) in Binder.ts. */
+      /**
+       * Emits a custom DOM event from the component host element.
+       *
+       * Example:
+       * ```ts
+       * head.emit('saved', { id: 42 })
+       * ```
+       *
+       * Parent markup can listen via regular event binding:
+       * ```html
+       * <MyComp @saved="onSaved"></MyComp>
+       * ```
+       */
       __publicField(this, "emit", (event, args) => {
         this.__element.dispatchEvent(
           new CustomEvent(event, { detail: args })
@@ -282,6 +357,10 @@ var Regor = (() => {
       this.start = start;
       this.end = end;
     }
+    /**
+     * Unmounts this component instance by removing nodes between `start` and `end`
+     * and calling unmount lifecycle handlers for captured contexts.
+     */
     unmount() {
       let next = this.start.nextSibling;
       const end = this.end;
@@ -383,6 +462,8 @@ var Regor = (() => {
   };
 
   // src/bind/IfBinder.ts
+  var noopStopObserving = () => {
+  };
   var mount = (nodes, binder, parent, end) => {
     const childNodes = [];
     for (const x of nodes) {
@@ -507,18 +588,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: () => {
@@ -529,8 +606,9 @@ var Regor = (() => {
             },
             isTrue: () => !!value()[0],
             isMounted: false
-          }
-        ].concat(remainingElses);
+          },
+          ...remainingElses
+        ];
       }
     }
     __bindToExpression(el, expression) {
@@ -576,29 +654,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 == null ? void 0 : 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 == null ? void 0 : 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) {
@@ -696,7 +776,9 @@ var Regor = (() => {
   });
 
   // src/directives/teleport.ts
-  var teleportDirective = {};
+  var teleportDirective = {
+    mount: () => void 0
+  };
 
   // src/composition/callMounted.ts
   var callMounted = (context) => {
@@ -731,12 +813,6 @@ var Regor = (() => {
     return scopeSymbol2 in value;
   };
 
-  // src/composition/onUnmounted.ts
-  var onUnmounted = (onUnmounted2, noThrow) => {
-    var _a;
-    (_a = peekScope(noThrow)) == null ? void 0 : _a.onUnmounted.push(onUnmounted2);
-  };
-
   // src/reactivity/refSymbols.ts
   var refSymbol = Symbol("ref");
   var srefSymbol = Symbol("sref");
@@ -747,6 +823,35 @@ 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) => {
+    var _a;
+    (_a = peekScope(noThrow)) == null ? void 0 : _a.onUnmounted.push(onUnmounted2);
+  };
+
   // src/observer/observe.ts
   var observe = (source, observer, init, trackUnmount = true) => {
     if (!isRef(source))
@@ -763,65 +868,6 @@ var Regor = (() => {
     return stop;
   };
 
-  // src/directives/props.ts
-  var propsDirective = {
-    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/directives/props-once.ts
-  var propsOnceDirective = {
-    collectRefObj: true,
-    once: true,
-    onBind: (_, parseResult) => {
-      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;
-        }
-      }
-      return () => {
-      };
-    }
-  };
-
   // src/reactivity/entangle.ts
   var entangle = (r1, r2) => {
     if (r1 === r2) return () => {
@@ -1149,8 +1195,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;
@@ -1171,44 +1217,44 @@ var Regor = (() => {
         stopEntangle = entangle(source, target);
         currentSource = source;
       };
-      const stopObserving = observe(
-        parseResult.value,
-        () => {
-          var _a;
-          const value = (_a = parseResult.refs[0]) != null ? _a : 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 = () => {
+        var _a;
+        const value = (_a = parseResult.refs[0]) != null ? _a : 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();
+        }
       };
     }
   };
@@ -1229,7 +1275,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;
@@ -1284,18 +1333,19 @@ var Regor = (() => {
         const endOfComponent = new Comment(" end component: " + component.tagName);
         componentParent.insertBefore(startOfComponent, component);
         component.remove();
-        const propsName = binder.__config.__builtInNames.props;
-        const propsOnceName = binder.__config.__builtInNames.propsOnce;
+        const contextName = binder.__config.__builtInNames.context;
+        const contextAliasName = binder.__config.__builtInNames.contextAlias;
         const bindName = binder.__config.__builtInNames.bind;
         const getProps = (component2, capturedContext2) => {
           const props = {};
-          const hasProps = component2.hasAttribute(propsName);
-          const hasPropsOnce = component2.hasAttribute(propsOnceName);
+          const hasContext = component2.hasAttribute(contextName);
           parser.__scoped(capturedContext2, () => {
             parser.__push(props);
-            if (hasProps) binder.__bind(propsDirective, component2, propsName);
-            if (hasPropsOnce)
-              binder.__bind(propsOnceDirective, component2, propsOnceName);
+            if (hasContext) {
+              binder.__bind(contextDirective, component2, contextName);
+            } else if (component2.hasAttribute(contextAliasName)) {
+              binder.__bind(contextDirective, component2, contextAliasName);
+            }
             let definedProps = registeredComponent.props;
             if (!definedProps || definedProps.length === 0) return;
             definedProps = definedProps.map(camelize);
@@ -1305,7 +1355,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;
@@ -1352,8 +1405,20 @@ var Regor = (() => {
               if (key in componentCtx2) {
                 const compValue = componentCtx2[key];
                 if (compValue === propsValue) continue;
-                if (head2.entangle && isRef(compValue) && isRef(propsValue)) {
-                  addUnbinder(startOfComponent, entangle(propsValue, compValue));
+                if (isRef(compValue)) {
+                  if (isRef(propsValue)) {
+                    if (head2.entangle) {
+                      addUnbinder(
+                        startOfComponent,
+                        entangle(propsValue, compValue)
+                      );
+                    } else {
+                      compValue(propsValue());
+                    }
+                  } else {
+                    compValue(propsValue);
+                  }
+                  continue;
                 }
               } else componentCtx2[key] = propsValue;
             }
@@ -1464,7 +1529,8 @@ var Regor = (() => {
           const inheritor = inheritorChildNodes[0];
           if (!inheritor) return;
           for (const attrName of component.getAttributeNames()) {
-            if (attrName === propsName || attrName === propsOnceName) continue;
+            if (attrName === contextName || attrName === contextAliasName)
+              continue;
             const value = component.getAttribute(attrName);
             if (attrName === "class") {
               inheritor.classList.add(...value.split(" "));
@@ -1587,18 +1653,17 @@ var Regor = (() => {
         }
       };
       const processNode = (node) => {
-        var _a, _b;
+        var _a;
         const attrs = node.attributes;
         if (!attrs || attrs.length === 0) return;
-        const attrsAny = attrs;
         for (let i = 0; i < attrs.length; ++i) {
-          const name = (_b = (_a = attrsAny[i]) != null ? _a : attrs.item(i)) == null ? void 0 : _b.name;
+          const name = (_a = attrs.item(i)) == null ? void 0 : _a.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);
@@ -1608,6 +1673,8 @@ var Regor = (() => {
   };
 
   // src/bind/DynamicBinder.ts
+  var noopStopObserving2 = () => {
+  };
   var mount2 = (nodes, parent) => {
     for (const x of nodes) {
       const node = x.cloneNode(true);
@@ -1723,19 +1790,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);
     }
   };
 
@@ -1745,6 +1808,274 @@ 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 == null ? void 0 : value.toString();
+  };
+  var htmlDirective = {
+    mount: () => ({
+      update: ({ el, values }) => {
+        updateHtml(el, values);
+      }
+    })
+  };
+
+  // src/bind/ForBinderFastPath.ts
+  var ForBinderFastPath = class _ForBinderFastPath {
+    constructor(bindings) {
+      __publicField(this, "__bindings");
+      this.__bindings = bindings;
+    }
+    static __create(binder, nodes) {
+      var _a, _b;
+      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 = (_a = attrs.item(i)) == null ? void 0 : _a.name;
+            if (!attrName) continue;
+            if (blockedBuiltIns.has(attrName)) return void 0;
+            const { terms, flags } = collector.__parseName(attrName);
+            const [name, option] = terms;
+            const directive = (_b = directiveMap[attrName]) != null ? _b : 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) => {
+    var _a;
+    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 != null ? 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 = (_a = result[u - 1]) != null ? _a : -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 {
     constructor(getKey) {
@@ -1826,6 +2157,8 @@ var Regor = (() => {
   // src/bind/ForBinder.ts
   var forMarker = Symbol("r-for");
   var noIndexRef = (_) => -1;
+  var noopStopObserving3 = () => {
+  };
   var _ForBinder = class _ForBinder {
     constructor(binder) {
       __publicField(this, "__binder");
@@ -1896,6 +2229,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}`;
@@ -1915,6 +2249,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);
@@ -1928,7 +2263,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);
@@ -1980,16 +2316,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)
               );
@@ -2039,24 +2410,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);
     }
     __parseForPath(forPath) {
       var _a, _b;
@@ -2240,105 +2608,111 @@ var Regor = (() => {
       return true;
     }
     __bindToExpression(config, el, valueExpression, option, flags) {
-      var _a;
       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 == null ? void 0 : dynamicOption.stop();
-        for (let i = 0; i < stopObserverList.length; ++i) {
-          stopObserverList[i]();
+    }
+    __createBindStops(result, dynamicOption) {
+      const stops = {
+        stop: () => {
+          var _a, _b, _c;
+          result.stop();
+          dynamicOption == null ? void 0 : dynamicOption.stop();
+          (_a = stops.result) == null ? void 0 : _a.call(stops);
+          (_b = stops.dynamic) == null ? void 0 : _b.call(stops);
+          (_c = stops.mounted) == null ? void 0 : _c.call(stops);
+          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(() => {
-          var _a2;
-          const preValues = previousValues;
-          const preOption = previousOption;
-          const nextValues = result.value();
-          const nextOption = hasDynamicOption ? dynamicOpt.value()[0] : option;
-          previousValues = nextValues;
-          previousOption = nextOption;
-          (_a2 = config.onChange) == null ? void 0 : _a2.call(
-            config,
-            el,
-            nextValues,
-            preValues,
-            nextOption,
-            preOption,
-            flags
-          );
-        }) : () => {
-        };
-        stopObserverList.push(stopObserving);
-        if (dynamicOpt) {
-          const stopObserving2 = dynamicOpt.subscribe ? dynamicOpt.subscribe(() => {
-            var _a2;
-            const preOption = previousOption;
-            const nextValues = result.value();
-            const nextOption = dynamicOpt.value()[0];
-            previousValues = nextValues;
-            previousOption = nextOption;
-            (_a2 = config.onChange) == null ? void 0 : _a2.call(
-              config,
-              el,
-              nextValues,
-              preOption,
-              nextOption,
-              preOption,
-              flags
-            );
-          }) : () => {
-          };
-          stopObserverList.push(stopObserving2);
-        }
+      if (mounted == null ? void 0 : mounted.unmount) {
+        stops.mounted = mounted.unmount;
       }
-      if (config.onBind)
-        stopObserverList.push(
-          config.onBind(
-            el,
-            result,
-            valueExpression,
-            option,
-            dynamicOption,
-            flags
-          )
-        );
-      (_a = config.onChange) == null ? void 0 : _a.call(
-        config,
-        el,
-        previousValues,
-        void 0,
-        previousOption,
-        void 0,
-        flags
-      );
+      return mounted == null ? void 0 : 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);
+      };
     }
   };
 
@@ -2375,39 +2749,51 @@ var Regor = (() => {
   function includeBooleanAttr(value) {
     return !!value || value === "";
   }
-  var attrDirective = {
-    onChange: (el, values, previousValues, option, previousOption, flags) => {
-      var _a;
-      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 = (_a = previousValues == null ? void 0 : previousValues[i]) == null ? void 0 : _a[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 == null ? void 0 : previousValues[i];
-            const previousKey = p && key in p ? key : void 0;
-            patchAttribute(el, key, value, previousKey);
-          }
-        } else {
-          const previousKey = previousValues == null ? void 0 : previousValues[i];
-          const key = values[i++];
-          const value = values[i];
+  var updateAttr = (el, values, previousValues, option, previousOption, flags) => {
+    var _a;
+    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 = (_a = previousValues == null ? void 0 : previousValues[i]) == null ? void 0 : _a[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 == null ? void 0 : previousValues[i];
+          const previousKey = p && key in p ? key : void 0;
           patchAttribute(el, key, value, previousKey);
         }
+      } else {
+        const previousKey = previousValues == null ? void 0 : 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);
@@ -2441,23 +2827,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 == null ? void 0 : previousValues[i];
-        if (isArray(next)) {
-          const len2 = next.length;
-          for (let j = 0; j < len2; ++j) {
-            patchClass(el, next[j], previous == null ? void 0 : 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 == null ? void 0 : previousValues[i];
+      if (isArray(next)) {
+        const len2 = next.length;
+        for (let j = 0; j < len2; ++j) {
+          patchClass(el, next[j], previous == null ? void 0 : 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);
@@ -2485,15 +2876,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 == null ? void 0 : value.toString();
-    }
-  };
-
   // src/common/looseEqual.ts
   function looseCompareArrays(a, b) {
     if (a.length !== b.length) return false;
@@ -2566,12 +2948,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);
@@ -2877,66 +3259,75 @@ var Regor = (() => {
     }
     return result;
   };
+  var bindOn = (el, parseResult, option, dynamicOption, flags) => {
+    var _a, _b;
+    if (dynamicOption) {
+      const values2 = parseResult.value();
+      const option2 = unref(dynamicOption.value()[0]);
+      if (!isString(option2)) return () => {
+      };
+      return attachEventListener(
+        el,
+        camelize(option2),
+        () => parseResult.value()[0],
+        (_a = flags == null ? void 0 : flags.join(",")) != null ? _a : values2[1]
+      );
+    } else if (option) {
+      const values2 = parseResult.value();
+      return attachEventListener(
+        el,
+        camelize(option),
+        () => parseResult.value()[0],
+        (_b = flags == null ? void 0 : flags.join(",")) != null ? _b : 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) => {
-      var _a, _b;
-      if (dynamicOption) {
-        const values2 = parseResult.value();
-        const option2 = unref(dynamicOption.value()[0]);
-        if (!isString(option2)) return () => {
-        };
-        return attachEventListener(
-          el,
-          camelize(option2),
-          () => parseResult.value()[0],
-          (_a = flags == null ? void 0 : flags.join(",")) != null ? _a : values2[1]
-        );
-      } else if (option) {
-        const values2 = parseResult.value();
-        return attachEventListener(
-          el,
-          camelize(option),
-          () => parseResult.value()[0],
-          (_b = flags == null ? void 0 : flags.join(",")) != null ? _b : 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 != null ? flags : 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");
@@ -3009,34 +3400,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 === "";
   }
@@ -3091,7 +3487,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];
@@ -3108,37 +3505,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 == null ? void 0 : previousValues[i];
-        if (isArray(next)) {
-          const len2 = next.length;
-          for (let j = 0; j < len2; ++j) {
-            patchStyle(el, next[j], previous == null ? void 0 : 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 == null ? void 0 : previousValues[i];
+      if (isArray(next)) {
+        const len2 = next.length;
+        for (let j = 0; j < len2; ++j) {
+          patchStyle(el, next[j], previous == null ? void 0 : 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);
@@ -3246,19 +3653,26 @@ var Regor = (() => {
   };
 
   // src/directives/text.ts
+  var updateText = (el, values) => {
+    var _a;
+    const value = values[0];
+    el.textContent = isSet(value) ? JSON.stringify(flatten([...value])) : isMap(value) ? JSON.stringify(flatten([...value])) : isObject(value) ? JSON.stringify(flatten(value)) : (_a = value == null ? void 0 : value.toString()) != null ? _a : "";
+  };
   var textDirective = {
-    onChange: (el, values) => {
-      var _a;
-      const value = values[0];
-      el.textContent = isSet(value) ? JSON.stringify(flatten([...value])) : isMap(value) ? JSON.stringify(flatten([...value])) : isObject(value) ? JSON.stringify(flatten(value)) : (_a = value == null ? void 0 : value.toString()) != null ? _a : "";
-    }
+    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
@@ -3347,6 +3761,7 @@ var Regor = (() => {
         [`${prefix}show`]: showDirective,
         [`${prefix}model`]: modelDirective,
         ":style": styleDirective,
+        [`${prefix}style`]: styleDirective,
         [`${prefix}bind:style`]: styleDirective,
         ":class": classDirective,
         [`${prefix}bind:class`]: classDirective,
@@ -3362,8 +3777,8 @@ var Regor = (() => {
         pre: `${prefix}pre`,
         inherit: `${prefix}inherit`,
         text: `${prefix}text`,
-        props: ":props",
-        propsOnce: ":props-once",
+        context: ":context",
+        contextAlias: `${prefix}context`,
         bind: `${prefix}bind`,
         on: `${prefix}on`,
         keyBind: ":key",
@@ -5073,6 +5488,7 @@ var Regor = (() => {
 
   // src/parser/Parser.ts
   var astCache = {};
+  var isComponentMap = (value) => !!value;
   var Parser = class {
     constructor(contexts, config) {
       __publicField(this, "__contexts");
@@ -5085,7 +5501,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;
         }
@@ -5096,7 +5512,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;
@@ -5108,12 +5524,12 @@ var Regor = (() => {
     }
     __parse(expression, isLazy, isLazyKey, collectRefObj, once) {
       var _a;
-      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;
       };
@@ -5123,13 +5539,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: [],
@@ -5150,7 +5566,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);
@@ -5163,36 +5579,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 == null ? void 0 : 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);
             }
           }
         };