regor 1.3.4 → 1.3.6

package/dist/regor.es2022.esm.js

@@ -4,8 +4,8 @@ var bindDataSymbol = Symbol(":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);
@@ -139,24 +139,87 @@ var callUnmounted = (context) => {
 
 // src/app/ComponentHead.ts
 var ComponentHead = class {
+  /**
+   * Values provided by parent for this component instance.
+   *
+   * Sources:
+   * - declared props via `props: ['foo']` + attribute binding (`:foo="..."`)
+   * - object binding via `:context="{ ... }"`
+   */
   props;
+  /**
+   * Comment node that marks the beginning of this mounted component block.
+   * Advanced use only.
+   */
   start;
+  /**
+   * Comment node that marks the end of this mounted component block.
+   * Advanced use only.
+   */
   end;
+  /**
+   * Captured context chain used by this component instance.
+   * Used internally for lifecycle/unmount behavior.
+   */
   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 }
+   * }
+   * ```
+   */
   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.
+   */
   entangle = true;
-  /** enables slot context switch to the parent
-   * Default: false */
+  /**
+   * Enables slot context switch behavior for advanced slot scenarios.
+   * Default: `false`.
+   */
   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.
+   */
   onAutoPropsAssigned;
   /**
    * @internal
@@ -169,12 +232,28 @@ var ComponentHead = class {
     this.start = start;
     this.end = end;
   }
-  /** 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>
+   * ```
+   */
   emit = (event, args) => {
     this.__element.dispatchEvent(
       new CustomEvent(event, { detail: args })
     );
   };
+  /**
+   * 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;
@@ -276,6 +355,8 @@ var setSwitchOwner = (owner, switchNodes) => {
 };
 
 // src/bind/IfBinder.ts
+var noopStopObserving = () => {
+};
 var mount = (nodes, binder, parent, end) => {
   const childNodes = [];
   for (const x of nodes) {
@@ -400,18 +481,14 @@ var IfBinder = class {
       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: () => {
@@ -422,8 +499,9 @@ var IfBinder = class {
           },
           isTrue: () => !!value()[0],
           isMounted: false
-        }
-      ].concat(remainingElses);
+        },
+        ...remainingElses
+      ];
     }
   }
   __bindToExpression(el, expression) {
@@ -469,29 +547,31 @@ var IfBinder = class {
       });
     };
     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) {
@@ -588,7 +668,9 @@ var capitalize = cacheStringFunction((str) => {
 });
 
 // src/directives/teleport.ts
-var teleportDirective = {};
+var teleportDirective = {
+  mount: () => void 0
+};
 
 // src/composition/callMounted.ts
 var callMounted = (context) => {
@@ -622,11 +704,6 @@ var isScope = (value) => {
   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");
@@ -637,6 +714,34 @@ var isRef = (value) => {
   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))
@@ -653,65 +758,6 @@ var observe = (source, observer, init, trackUnmount = true) => {
   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 () => {
@@ -1038,8 +1084,8 @@ var createModelBridge = (source) => {
 };
 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;
@@ -1060,43 +1106,43 @@ var singlePropDirective = {
       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();
+      }
     };
   }
 };
@@ -1117,7 +1163,10 @@ var ComponentBinder = class {
   __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;
@@ -1170,18 +1219,19 @@ var ComponentBinder = class {
       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);
@@ -1191,7 +1241,10 @@ var ComponentBinder = class {
               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;
@@ -1236,8 +1289,20 @@ var ComponentBinder = class {
             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;
           }
@@ -1348,7 +1413,8 @@ var ComponentBinder = class {
         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(" "));
@@ -1471,15 +1537,14 @@ var DirectiveCollector = class {
     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);
@@ -1489,6 +1554,8 @@ var DirectiveCollector = class {
 };
 
 // src/bind/DynamicBinder.ts
+var noopStopObserving2 = () => {
+};
 var mount2 = (nodes, parent) => {
   for (const x of nodes) {
     const node = x.cloneNode(true);
@@ -1603,19 +1670,15 @@ var DynamicBinder = class {
         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);
   }
 };
 
@@ -1625,6 +1688,272 @@ var unref = (value) => {
   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 = [];
@@ -1704,6 +2033,8 @@ var MountList = class {
 // src/bind/ForBinder.ts
 var forMarker = Symbol("r-for");
 var noIndexRef = (_) => -1;
+var noopStopObserving3 = () => {
+};
 var ForBinder = class _ForBinder {
   __binder;
   __for;
@@ -1773,6 +2104,7 @@ var ForBinder = class _ForBinder {
     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}`;
@@ -1792,6 +2124,7 @@ var ForBinder = class _ForBinder {
     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);
@@ -1804,7 +2137,8 @@ var ForBinder = class _ForBinder {
           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);
@@ -1856,16 +2190,51 @@ var ForBinder = class _ForBinder {
         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)
             );
@@ -1915,24 +2284,21 @@ var ForBinder = class _ForBinder {
       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) {
@@ -2111,97 +2477,108 @@ var Binder = class {
   __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);
+    };
   }
 };
 
@@ -2238,38 +2615,50 @@ var booleanAttributes = {
 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);
@@ -2303,23 +2692,28 @@ var patchAttribute = (el, key, value, previousKey) => {
 };
 
 // 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);
@@ -2347,15 +2741,6 @@ var patchClass = (el, next, prev) => {
   }
 };
 
-// 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;
@@ -2428,12 +2813,12 @@ var resume = (source) => {
 
 // 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);
@@ -2739,65 +3124,74 @@ var getFlags2 = (flags) => {
   }
   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");
@@ -2870,34 +3264,39 @@ var attachEventListener = (el, eventType, method, flags) => {
 };
 
 // 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 === "";
 }
@@ -2952,7 +3351,8 @@ var patchProp = (el, key, value) => {
 // 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];
@@ -2969,37 +3369,47 @@ var refDirective = {
 };
 
 // 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);
@@ -3107,18 +3517,25 @@ var flattenContent = (value, weakMap = /* @__PURE__ */ new WeakMap()) => {
 };
 
 // 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
@@ -3214,6 +3631,7 @@ var RegorConfig = class _RegorConfig {
       [`${prefix}show`]: showDirective,
       [`${prefix}model`]: modelDirective,
       ":style": styleDirective,
+      [`${prefix}style`]: styleDirective,
       [`${prefix}bind:style`]: styleDirective,
       ":class": classDirective,
       [`${prefix}bind:class`]: classDirective,
@@ -3229,8 +3647,8 @@ var RegorConfig = class _RegorConfig {
       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",
@@ -4921,6 +5339,7 @@ var regorEval = (expr, contexts, globalContext, isLazy, isLazyKey, context, coll
 
 // src/parser/Parser.ts
 var astCache = {};
+var isComponentMap = (value) => !!value;
 var Parser = class {
   __contexts;
   __config;
@@ -4932,7 +5351,7 @@ var Parser = class {
     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;
       }
@@ -4943,7 +5362,7 @@ var Parser = class {
   __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;
@@ -4954,12 +5373,12 @@ var Parser = class {
     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;
     };
@@ -4969,13 +5388,13 @@ var Parser = class {
     };
     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: [],
@@ -4996,7 +5415,7 @@ var Parser = class {
           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);
@@ -5009,36 +5428,37 @@ var Parser = class {
       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);
           }
         }
       };