@estjs/template 0.0.15-beta.1 → 0.0.15-beta.5

package/dist/template.dev.esm.js

@@ -1,9 +1,9 @@
-import { isObject, isFunction, hasChanged, startsWith, isHTMLElement, isString, error, isNil, isArray, camelCase, capitalize, isSpecialBooleanAttr, isBooleanAttr, includeBooleanAttr, isSymbol, isUndefined, isPromise, warn, coerceArray, isFalsy, isNumber, isPrimitive, kebabCase } from '@estjs/shared';
+import { isObject, startsWith, isHTMLElement, isString, error, isArray, camelCase, capitalize, warn, isSpecialBooleanAttr, isBooleanAttr, includeBooleanAttr, isSymbol, isUndefined, isPromise, isFunction, coerceArray, isFalsy, isNumber, isPrimitive, isNil, kebabCase } from '@estjs/shared';
 export { escapeHTML } from '@estjs/shared';
-import { shallowReactive, isSignal, isComputed, signal, effect } from '@estjs/signals';
+import { effect, shallowReactive, isSignal, signal, isComputed } from '@estjs/signals';
 
 /**
-* @estjs/template v0.0.15-beta.1
+* @estjs/template v0.0.15-beta.5
 * (c) 2023-Present jiangxd <jiangxd2016@gmail.com>
 * @license MIT
 **/
@@ -43,125 +43,117 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-var activeContext = null;
-var contextStack = [];
-var contextId = 0;
-function createContext(parent = null) {
-  const context = {
-    id: ++contextId,
+var activeScope = null;
+var scopeId = 0;
+var scopeStack = [];
+function getActiveScope() {
+  return activeScope;
+}
+function setActiveScope(scope) {
+  activeScope = scope;
+}
+function createScope(parent = activeScope) {
+  const scope = {
+    id: ++scopeId,
     parent,
-    provides: /* @__PURE__ */ new Map(),
-    cleanup: /* @__PURE__ */ new Set(),
-    mount: /* @__PURE__ */ new Set(),
-    update: /* @__PURE__ */ new Set(),
-    destroy: /* @__PURE__ */ new Set(),
-    isMount: false,
-    isDestroy: false,
-    children: /* @__PURE__ */ new Set()
+    children: null,
+    // Lazy initialized
+    provides: null,
+    // Lazy initialized
+    cleanup: null,
+    // Lazy initialized
+    onMount: null,
+    // Lazy initialized
+    onUpdate: null,
+    // Lazy initialized
+    onDestroy: null,
+    // Lazy initialized
+    isMounted: false,
+    isDestroyed: false
   };
   if (parent) {
-    parent.children.add(context);
-  }
-  return context;
-}
-function getActiveContext() {
-  return activeContext;
-}
-function pushContextStack(context) {
-  if (activeContext) {
-    contextStack.push(activeContext);
-  }
-  activeContext = context;
-}
-function popContextStack() {
-  activeContext = contextStack.pop() || null;
-}
-function destroyContext(context) {
-  if (!context || context.isDestroy) {
-    return;
+    if (!parent.children) {
+      parent.children = /* @__PURE__ */ new Set();
+    }
+    parent.children.add(scope);
   }
-  const childrenToDestroy = Array.from(context.children);
-  childrenToDestroy.forEach(destroyContext);
-  cleanupContext(context);
+  return scope;
 }
-function cleanupContext(context) {
-  if (!context || context.isDestroy) {
-    return;
-  }
-  if (context.parent) {
-    context.parent.children.delete(context);
-    context.parent = null;
+function runWithScope(scope, fn) {
+  const prevScope = activeScope;
+  if (prevScope) {
+    scopeStack.push(prevScope);
   }
+  activeScope = scope;
   try {
-    context.cleanup.forEach((fn) => fn());
-    context.cleanup.clear();
-    context.mount.clear();
-    context.update.clear();
-    context.destroy.clear();
-    context.provides.clear();
-    context.children.clear();
-  } catch (error_) {
-    error("Error during context cleanup:", error_);
+    return fn();
+  } finally {
+    activeScope = scopeStack.length > 0 ? scopeStack.pop() : prevScope;
   }
-  context.isDestroy = true;
 }
-var LIFECYCLE = {
-  mount: "mount",
-  destroy: "destroy",
-  update: "update"
-};
-function registerLifecycleHook(type, hook) {
-  const context = getActiveContext();
-  if (!context) {
-    error(`Cannot register ${type} hook outside component context`);
+function disposeScope(scope) {
+  var _a2, _b, _c, _d, _e;
+  if (!scope || scope.isDestroyed) {
     return;
   }
-  if (!LIFECYCLE[type]) {
-    error(`Invalid lifecycle type: ${type}`);
-    return;
+  if (scope.children) {
+    const children = Array.from(scope.children);
+    for (const child of children) {
+      disposeScope(child);
+    }
   }
-  if (type === LIFECYCLE.mount && context.isMount) {
-    try {
-      hook();
-    } catch (error_) {
-      error(`Error in ${type} hook:`, error_);
+  if (scope.onDestroy) {
+    for (const hook of scope.onDestroy) {
+      try {
+        hook();
+      } catch (error_) {
+        {
+          error(`Scope(${scope.id}): Error in destroy hook:`, error_);
+        }
+      }
     }
-    return;
+    scope.onDestroy.clear();
   }
-  context[type].add(hook);
+  if (scope.cleanup) {
+    for (const fn of scope.cleanup) {
+      try {
+        fn();
+      } catch (error_) {
+        {
+          error(`Scope(${scope.id}): Error in cleanup:`, error_);
+        }
+      }
+    }
+    scope.cleanup.clear();
+  }
+  if ((_a2 = scope.parent) == null ? void 0 : _a2.children) {
+    scope.parent.children.delete(scope);
+  }
+  (_b = scope.children) == null ? void 0 : _b.clear();
+  (_c = scope.provides) == null ? void 0 : _c.clear();
+  (_d = scope.onMount) == null ? void 0 : _d.clear();
+  (_e = scope.onUpdate) == null ? void 0 : _e.clear();
+  setActiveScope(scope.parent);
+  scope.parent = null;
+  scope.isDestroyed = true;
 }
-function triggerLifecycleHook(type) {
-  const context = getActiveContext();
-  if (!context) {
-    error(`Cannot trigger ${type} hook outside component context`);
+function onCleanup(fn) {
+  const scope = activeScope;
+  if (!scope) {
+    {
+      error("onCleanup() must be called within a scope");
+    }
     return;
   }
-  const hooks = context[type];
-  if (!(hooks == null ? void 0 : hooks.size)) {
-    return;
+  if (!scope.cleanup) {
+    scope.cleanup = /* @__PURE__ */ new Set();
   }
-  hooks.forEach((hook) => {
-    try {
-      hook();
-    } catch (error_) {
-      {
-        error(`Error in ${type} lifecycle hook:`, error_);
-      }
-    }
-  });
-}
-function onMount(hook) {
-  registerLifecycleHook(LIFECYCLE.mount, hook);
-}
-function onDestroy(hook) {
-  registerLifecycleHook(LIFECYCLE.destroy, hook);
-}
-function onUpdate(hook) {
-  registerLifecycleHook(LIFECYCLE.update, hook);
+  scope.cleanup.add(fn);
 }
 
 // src/constants.ts
 var EVENT_PREFIX = "on";
+var SPREAD_NAME = "_$spread$";
 var REF_KEY = "ref";
 var KEY_PROP = "key";
 var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
@@ -251,6 +243,36 @@ function getNodeKey(node) {
 }
 
 // src/utils.ts
+function omitProps(target, keys) {
+  const excludeSet = new Set(keys);
+  return new Proxy(target, {
+    // Intercept property reads
+    get(obj, prop) {
+      if (excludeSet.has(prop)) {
+        return void 0;
+      }
+      return Reflect.get(obj, prop);
+    },
+    // Intercept property enumeration (for...in, Object.keys, etc.)
+    ownKeys(obj) {
+      return Reflect.ownKeys(obj).filter((key) => !excludeSet.has(key));
+    },
+    // Intercept property descriptor retrieval
+    getOwnPropertyDescriptor(obj, prop) {
+      if (excludeSet.has(prop)) {
+        return void 0;
+      }
+      return Reflect.getOwnPropertyDescriptor(obj, prop);
+    },
+    // Intercept the 'in' operator
+    has(obj, prop) {
+      if (excludeSet.has(prop)) {
+        return false;
+      }
+      return Reflect.has(obj, prop);
+    }
+  });
+}
 function removeNode(node) {
   if (!node) return;
   try {
@@ -266,7 +288,7 @@ function removeNode(node) {
     error("Failed to remove node:", _error);
   }
 }
-function insertNode(parent, child, before = null) {
+function insertNode(parent, child, before) {
   if (!parent || !child) return;
   try {
     const beforeNode = isComponent(before) ? before.firstChild : before;
@@ -291,19 +313,23 @@ function insertNode(parent, child, before = null) {
 function replaceNode(parent, newNode, oldNode) {
   if (!parent || !newNode || !oldNode || newNode === oldNode) return;
   try {
-    insertNode(parent, newNode, oldNode);
+    const beforeNode = isComponent(oldNode) ? oldNode.beforeNode : oldNode.nextSibling;
     removeNode(oldNode);
+    insertNode(parent, newNode, beforeNode);
   } catch (_error) {
     error("Failed to replace node:", _error);
   }
 }
 function getFirstDOMNode(node) {
   if (!node) {
-    return null;
+    return;
   }
   if (isComponent(node)) {
     return node.firstChild;
   }
+  if (isPrimitive(node)) {
+    return void 0;
+  }
   return node;
 }
 function isSameNode(a, b) {
@@ -320,6 +346,9 @@ function isSameNode(a, b) {
   if (aIsComponent !== bIsComponent) {
     return false;
   }
+  if (isPrimitive(a) || isPrimitive(b)) {
+    return a === b;
+  }
   const aNode = a;
   const bNode = b;
   if (aNode.nodeType !== bNode.nodeType) {
@@ -426,11 +455,9 @@ function patchChildren(parent, oldChildren, newChildren, anchor) {
     return [];
   }
   if (oldLength === 0) {
-    const fragment = document.createDocumentFragment();
     for (let i = 0; i < newLength; i++) {
-      insertNode(fragment, newChildren[i]);
+      insertNode(parent, newChildren[i], anchor);
     }
-    insertNode(parent, fragment, anchor);
     return newChildren;
   }
   if (newLength === 0) {
@@ -662,12 +689,9 @@ function getSequence(arr) {
 // src/binding.ts
 function addEventListener(element, event, handler, options) {
   element.addEventListener(event, handler, options);
-  const context = getActiveContext();
-  if (context) {
-    context.cleanup.add(() => {
-      element.removeEventListener(event, handler, options);
-    });
-  }
+  onCleanup(() => {
+    element.removeEventListener(event, handler, options);
+  });
 }
 function bindElement(node, key, defaultValue, setter) {
   if (isHtmlInputElement(node)) {
@@ -723,23 +747,28 @@ function bindElement(node, key, defaultValue, setter) {
     });
   }
 }
-function insert(parent, nodeFactory, before, options) {
+function insert(parent, nodeFactory, before) {
   if (!parent) return;
-  const context = getActiveContext();
-  if (!context) return;
+  const ownerScope = getActiveScope();
   let renderedNodes = [];
   const cleanup = effect(() => {
-    const rawNodes = isFunction(nodeFactory) ? nodeFactory() : nodeFactory;
-    const nodes = coerceArray(rawNodes).map(normalizeNode);
-    renderedNodes = patchChildren(parent, renderedNodes, nodes, before);
+    const executeUpdate = () => {
+      const rawNodes = isFunction(nodeFactory) ? nodeFactory() : nodeFactory;
+      const nodes = coerceArray(rawNodes).map((item) => isFunction(item) ? item() : item).flatMap((i) => i).map(normalizeNode);
+      renderedNodes = patchChildren(parent, renderedNodes, nodes, before);
+    };
+    if (ownerScope && !ownerScope.isDestroyed) {
+      runWithScope(ownerScope, executeUpdate);
+    } else {
+      executeUpdate();
+    }
   });
-  context.cleanup.add(() => {
+  onCleanup(() => {
     cleanup();
-    if (!(options == null ? void 0 : options.preserveOnCleanup)) {
-      renderedNodes.forEach((node) => removeNode(node));
-    }
+    renderedNodes.forEach((node) => removeNode(node));
     renderedNodes.length = 0;
   });
+  return renderedNodes;
 }
 function mapNodes(template2, indexes) {
   const len = indexes.length;
@@ -765,6 +794,99 @@ function mapNodes(template2, indexes) {
   walk(template2);
   return tree;
 }
+function registerMountHook(hook) {
+  const scope = getActiveScope();
+  if (!scope) {
+    {
+      error("onMount() must be called within a scope");
+    }
+    return;
+  }
+  if (scope.isMounted) {
+    try {
+      hook();
+    } catch (error_) {
+      {
+        error(`Scope(${scope.id}): Error in mount hook:`, error_);
+      }
+    }
+    return;
+  }
+  if (!scope.onMount) {
+    scope.onMount = /* @__PURE__ */ new Set();
+  }
+  scope.onMount.add(hook);
+}
+function registerUpdateHook(hook) {
+  const scope = getActiveScope();
+  if (!scope) {
+    {
+      error("onUpdate() must be called within a scope");
+    }
+    return;
+  }
+  if (!scope.onUpdate) {
+    scope.onUpdate = /* @__PURE__ */ new Set();
+  }
+  scope.onUpdate.add(hook);
+}
+function registerDestroyHook(hook) {
+  const scope = getActiveScope();
+  if (!scope) {
+    {
+      error("onDestroy() must be called within a scope");
+    }
+    return;
+  }
+  if (!scope.onDestroy) {
+    scope.onDestroy = /* @__PURE__ */ new Set();
+  }
+  scope.onDestroy.add(hook);
+}
+function triggerMountHooks(scope) {
+  if (!scope || scope.isDestroyed || scope.isMounted) {
+    return;
+  }
+  scope.isMounted = true;
+  if (scope.onMount) {
+    runWithScope(scope, () => {
+      for (const hook of scope.onMount) {
+        try {
+          hook();
+        } catch (error_) {
+          if (true) {
+            error(`Scope(${scope.id}): Error in mount hook:`, error_);
+          }
+        }
+      }
+    });
+  }
+}
+function triggerUpdateHooks(scope) {
+  if (!scope || scope.isDestroyed) {
+    return;
+  }
+  if (scope.onUpdate) {
+    for (const hook of scope.onUpdate) {
+      try {
+        hook();
+      } catch (error_) {
+        {
+          error(`Scope(${scope.id}): Error in update hook:`, error_);
+        }
+      }
+    }
+  }
+}
+function onMount(hook) {
+  registerMountHook(hook);
+}
+function onDestroy(hook) {
+  registerDestroyHook(hook);
+}
+function onUpdate(hook) {
+  registerUpdateHook(hook);
+}
 
 // src/component.ts
 var _a;
@@ -773,71 +895,74 @@ var Component = class {
   constructor(component, props) {
     this.component = component;
     this.props = props;
-    // component rendered node
-    this.renderedNode = null;
-    // component context
-    this.componentContext = null;
+    // component rendered nodes (supports arrays and fragments)
+    this.renderedNodes = [];
+    // component scope (unified context management)
+    this.scope = null;
     // component parent node
-    this.parentNode = null;
+    this.parentNode = void 0;
     // component before node
-    this.beforeNode = null;
+    this.beforeNode = void 0;
     // component props
     this.reactiveProps = {};
-    this._propSnapshots = {};
     // component state
     this.state = 0 /* INITIAL */;
-    // component context
-    this.context = null;
-    // component parent context
-    this.parentContext = null;
+    // parent scope captured at construction time
+    this.parentScope = null;
     // component type
     // @ts-ignore
     this[_a] = true;
     this.key = (props == null ? void 0 : props.key) ? normalizeKey(props.key) : getComponentKey(component);
     this.reactiveProps = shallowReactive(__spreadValues({}, this.props || {}));
-    this.parentContext = getActiveContext();
-    if (this.props) {
-      for (const key in this.props) {
-        const val = this.props[key];
-        if (isObject(val) && val !== null) {
-          this._propSnapshots[key] = Array.isArray(val) ? [...val] : __spreadValues({}, val);
-        }
-      }
-    }
+    this.parentScope = getActiveScope();
   }
   get isConnected() {
     return this.state === 2 /* MOUNTED */;
   }
   get firstChild() {
-    var _a2;
-    return (_a2 = this.renderedNode) != null ? _a2 : null;
+    for (const node of this.renderedNodes) {
+      const dom = getFirstDOMNode(node);
+      if (dom) {
+        return dom;
+      }
+    }
+    return void 0;
   }
   mount(parentNode, beforeNode) {
+    var _a2;
     this.parentNode = parentNode;
-    this.beforeNode = beforeNode || null;
+    this.beforeNode = beforeNode;
     this.state = 1 /* MOUNTING */;
-    if (this.renderedNode) {
-      insertNode(parentNode, this.renderedNode, beforeNode);
-      return this.renderedNode;
-    }
-    this.componentContext = createContext(this.parentContext);
-    pushContextStack(this.componentContext);
-    let result = this.component(this.reactiveProps);
-    if (isFunction(result)) {
-      result = result(this.reactiveProps);
-    }
-    if (isSignal(result) || isComputed(result)) {
-      result = result.value;
-    }
-    this.renderedNode = result;
-    insertNode(parentNode, this.renderedNode, beforeNode);
-    this.applyProps(this.props || {});
+    if (this.renderedNodes.length > 0) {
+      for (const node of this.renderedNodes) {
+        insertNode(parentNode, node, beforeNode);
+      }
+      this.state = 2 /* MOUNTED */;
+      return this.renderedNodes;
+    }
+    const parent = (_a2 = this.parentScope) != null ? _a2 : getActiveScope();
+    this.scope = createScope(parent);
+    const renderedNodes = runWithScope(this.scope, () => {
+      var _a3;
+      let result = this.component(this.reactiveProps);
+      if (isFunction(result)) {
+        result = result(this.reactiveProps);
+      }
+      if (isSignal(result) || isComputed(result)) {
+        result = result.value;
+      }
+      const nodes = (_a3 = insert(parentNode, result, beforeNode)) != null ? _a3 : [];
+      return nodes;
+    });
+    this.renderedNodes = renderedNodes;
+    runWithScope(this.scope, () => {
+      this.applyProps(this.props || {});
+    });
     this.state = 2 /* MOUNTED */;
-    if (this.componentContext) {
-      this.componentContext.isMount = true;
+    if (this.scope) {
+      triggerMountHooks(this.scope);
     }
-    triggerLifecycleHook(LIFECYCLE.mount);
-    return this.renderedNode;
+    return this.renderedNodes;
   }
   update(prevNode) {
     if (this.key !== prevNode.key) {
@@ -846,76 +971,79 @@ var Component = class {
     }
     this.parentNode = prevNode.parentNode;
     this.beforeNode = prevNode.beforeNode;
-    this.componentContext = prevNode.componentContext;
-    this.renderedNode = prevNode.renderedNode;
+    this.scope = prevNode.scope;
+    this.parentScope = prevNode.parentScope;
+    this.renderedNodes = prevNode.renderedNodes;
     this.state = prevNode.state;
     this.reactiveProps = prevNode.reactiveProps;
-    this._propSnapshots = prevNode._propSnapshots;
     if (this.props) {
       for (const key in this.props) {
         if (key === "key") continue;
         const newValue = this.props[key];
         const oldValue = this.reactiveProps[key];
-        if (isObject(newValue) && newValue !== null) {
-          const snapshot = this._propSnapshots[key];
-          if (!snapshot || !shallowCompare(newValue, snapshot)) {
-            const newSnapshot = Array.isArray(newValue) ? newValue.slice() : Object.assign({}, newValue);
-            this.reactiveProps[key] = newSnapshot;
-            this._propSnapshots[key] = newSnapshot;
-          }
-        } else {
-          if (hasChanged(newValue, oldValue)) {
-            this.reactiveProps[key] = newValue;
-            if (this._propSnapshots[key]) {
-              delete this._propSnapshots[key];
-            }
+        if (Object.is(oldValue, newValue)) {
+          continue;
+        }
+        if (isObject(oldValue) && isObject(newValue)) {
+          if (shallowCompare(oldValue, newValue)) {
+            continue;
           }
         }
+        this.reactiveProps[key] = newValue;
       }
     }
     if (!this.isConnected && this.parentNode) {
       this.mount(this.parentNode, this.beforeNode);
     }
-    if (this.componentContext) {
-      pushContextStack(this.componentContext);
-      this.applyProps(this.props || {});
-      triggerLifecycleHook(LIFECYCLE.update);
-      popContextStack();
+    if (this.scope) {
+      runWithScope(this.scope, () => {
+        this.applyProps(this.props || {});
+      });
+      triggerUpdateHooks(this.scope);
     }
     return this;
   }
   forceUpdate() {
     return __async(this, null, function* () {
-      if (this.state === 5 /* DESTROYED */ || !this.parentNode || !this.componentContext) {
+      yield Promise.resolve();
+      if (this.state === 5 /* DESTROYED */ || !this.parentNode || !this.scope) {
         return;
       }
-      const prevNode = this.renderedNode;
-      let newNode;
+      const originalNodes = [...this.renderedNodes];
       try {
-        if (this.componentContext) {
-          pushContextStack(this.componentContext);
-        }
-        newNode = this.component(this.reactiveProps);
-        if (isFunction(newNode)) {
-          newNode = newNode(this.reactiveProps);
-        }
-        if (isSignal(newNode) || isComputed(newNode)) {
-          newNode = newNode.value;
-        }
-        if (prevNode && newNode && prevNode !== newNode) {
+        runWithScope(this.scope, () => {
+          let result = this.component(this.reactiveProps);
+          if (isFunction(result)) {
+            result = result(this.reactiveProps);
+          }
+          if (isSignal(result) || isComputed(result)) {
+            result = result.value;
+          }
+          const newNodes = coerceArray(result);
           if (this.parentNode) {
-            replaceNode(this.parentNode, newNode, prevNode);
-            this.renderedNode = newNode;
+            let anchor = this.beforeNode;
+            if (!anchor && this.renderedNodes.length > 0) {
+              const lastNode = this.renderedNodes[this.renderedNodes.length - 1];
+              const lastDom = getFirstDOMNode(lastNode);
+              if (lastDom) {
+                anchor = lastDom.nextSibling;
+              }
+            }
+            for (const node of this.renderedNodes) {
+              removeNode(node);
+            }
+            for (const node of newNodes) {
+              insertNode(this.parentNode, node, anchor);
+            }
+            this.renderedNodes = newNodes;
           }
+        });
+        if (this.scope) {
+          triggerUpdateHooks(this.scope);
         }
-        yield triggerLifecycleHook(LIFECYCLE.update);
-      } catch (_error) {
-        error("Force update failed:", _error);
-        throw _error;
-      } finally {
-        if (this.componentContext) {
-          popContextStack();
-        }
+      } catch (error10) {
+        this.renderedNodes = originalNodes;
+        throw error10;
       }
     });
   }
@@ -927,21 +1055,18 @@ var Component = class {
       return;
     }
     this.state = 4 /* DESTROYING */;
-    const context = this.componentContext;
-    if (context) {
-      pushContextStack(context);
-      triggerLifecycleHook(LIFECYCLE.destroy);
-      destroyContext(context);
-      this.componentContext = null;
-      popContextStack();
-    }
-    const rendered = this.renderedNode;
-    if (rendered) {
-      removeNode(rendered);
-    }
-    this.renderedNode = null;
-    this.parentNode = null;
-    this.beforeNode = null;
+    const scope = this.scope;
+    if (scope) {
+      disposeScope(scope);
+      this.scope = null;
+    }
+    for (const node of this.renderedNodes) {
+      removeNode(node);
+    }
+    this.renderedNodes = [];
+    this.parentNode = void 0;
+    this.beforeNode = void 0;
+    this.parentScope = null;
     this.reactiveProps = {};
     this.props = void 0;
     this.state = 5 /* DESTROYED */;
@@ -950,14 +1075,15 @@ var Component = class {
     if (!props) {
       return;
     }
+    const firstElement = this.firstChild;
     for (const [propName, propValue] of Object.entries(props)) {
-      if (startsWith(propName, EVENT_PREFIX) && this.renderedNode) {
+      if (startsWith(propName, EVENT_PREFIX) && firstElement) {
         const eventName = propName.slice(2).toLowerCase();
-        if (isHTMLElement(this.renderedNode)) {
-          addEventListener(this.renderedNode, eventName, propValue);
+        if (isHTMLElement(firstElement)) {
+          addEventListener(firstElement, eventName, propValue);
         }
       } else if (propName === REF_KEY && isSignal(propValue)) {
-        propValue.value = this.renderedNode;
+        propValue.value = firstElement;
       }
     }
     this.props = props;
@@ -1003,26 +1129,37 @@ function createApp(component, target) {
   return rootComponent;
 }
 function provide(key, value) {
-  const context = getActiveContext();
-  if (!context) {
-    error("provide must be called within a template");
+  const scope = getActiveScope();
+  if (!scope) {
+    {
+      error("provide() must be called within a scope");
+    }
     return;
   }
-  context.provides.set(key, value);
+  if (!scope.provides) {
+    scope.provides = /* @__PURE__ */ new Map();
+  }
+  scope.provides.set(key, value);
 }
 function inject(key, defaultValue) {
-  const context = getActiveContext();
-  if (!context) {
-    error("inject must be called within a template");
+  const scope = getActiveScope();
+  console.log(scope);
+  if (!scope) {
+    {
+      error("inject() must be called within a scope");
+    }
     return defaultValue;
   }
-  let currentContext = context;
-  while (currentContext) {
-    const value = currentContext.provides.get(key);
-    if (!isNil(value)) {
-      return value;
+  let current = scope;
+  while (current) {
+    if (current.provides) {
+      console.log(current.provides);
+      const value = current.provides.get(key);
+      if (value) {
+        return value;
+      }
     }
-    currentContext = currentContext.parent;
+    current = current.parent;
   }
   return defaultValue;
 }
@@ -1208,10 +1345,6 @@ function autoPrefix(style, rawName) {
   return rawName;
 }
 function patchAttr(el, key, prev, next) {
-  if (key === REF_KEY) {
-    prev.value = el;
-    return;
-  }
   if (key === KEY_PROP) {
     if (next == null) {
       setNodeKey(el, void 0);
@@ -1220,6 +1353,17 @@ function patchAttr(el, key, prev, next) {
     }
     return;
   }
+  if (key === SPREAD_NAME) {
+    {
+      if (!isObject(next)) {
+        warn("spread attribute must be an object");
+      }
+    }
+    Object.keys(next).forEach((k) => {
+      patchAttr(el, k, prev == null ? void 0 : prev[k], next == null ? void 0 : next[k]);
+    });
+    return;
+  }
   const elementIsSVG = (el == null ? void 0 : el.namespaceURI) === SVG_NAMESPACE;
   const isXlink = elementIsSVG && key.startsWith("xlink:");
   const isXmlns = elementIsSVG && key.startsWith("xmlns:");
@@ -1304,29 +1448,18 @@ function addEvent(el, event, handler, options) {
     el.removeEventListener(event, wrappedHandler, cleanOptions);
   };
 }
-
-// src/components/Fragment.ts
 function Fragment(props) {
-  if (typeof document === "undefined") {
-    const children2 = props.children;
-    if (!children2) return "";
-    const childArray = Array.isArray(children2) ? children2 : [children2];
-    return childArray.map((child) => String(child || "")).join("");
-  }
-  const fragment = document.createDocumentFragment();
-  const children = props.children;
-  if (children) {
-    const childArray = Array.isArray(children) ? children : [children];
-    childArray.forEach((child) => {
-      if (child != null) {
-        const normalized = normalizeNode(child);
-        if (normalized) {
-          insertNode(fragment, normalized);
-        }
-      }
-    });
+  {
+    if (!props) {
+      error("Fragment component requires props");
+      return null;
+    }
+    if (!props.children) {
+      error("Fragment component requires children");
+      return null;
+    }
   }
-  return fragment;
+  return props == null ? void 0 : props.children;
 }
 Fragment["fragment" /* FRAGMENT */] = true;
 function isFragment(node) {
@@ -1334,34 +1467,43 @@ function isFragment(node) {
 }
 function Portal(props) {
   if (typeof document === "undefined") {
-    const children = props.children;
-    if (!children) return "";
-    const childArray = isArray(children) ? children : [children];
+    const children2 = props.children;
+    if (!children2) return "";
+    const childArray = isArray(children2) ? children2 : [children2];
     return childArray.map((child) => String(child || "")).join("");
   }
   const placeholder = document.createComment("portal");
   placeholder["portal" /* PORTAL */] = true;
-  onMount(() => {
-    const targetElement = isString(props.target) ? document.querySelector(props.target) : props.target;
-    if (!targetElement) {
-      {
-        warn(`[Portal] Target element not found: ${props.target}`);
+  const children = props.children;
+  if (children) {
+    const childArray = isArray(children) ? children : [children];
+    const nodes = [];
+    onMount(() => {
+      const targetElement = isString(props.target) ? document.querySelector(props.target) : props.target;
+      if (!targetElement) {
+        {
+          warn(`[Portal] Target element not found: ${props.target}`);
+        }
+        return;
       }
-      return;
-    }
-    const children = props.children;
-    if (children) {
-      const childArray = isArray(children) ? children : [children];
       childArray.forEach((child) => {
         if (child != null) {
           const normalized = normalizeNode(child);
           if (normalized) {
             insertNode(targetElement, normalized);
+            nodes.push(normalized);
           }
         }
       });
-    }
-  });
+      onCleanup(() => {
+        nodes.forEach((node) => {
+          if (typeof node !== "string" && node.parentNode === targetElement) {
+            targetElement.removeChild(node);
+          }
+        });
+      });
+    });
+  }
   return placeholder;
 }
 Portal["portal" /* PORTAL */] = true;
@@ -1417,12 +1559,12 @@ function Suspense(props) {
       container.removeChild(container.firstChild);
     }
     if (children2 == null) return;
-    const currentContext = getActiveContext();
+    const currentScope = getActiveScope();
     const childArray = isArray(children2) ? children2 : [children2];
     childArray.forEach((child) => {
       if (child != null) {
         if (isComponent(child)) {
-          child.parentContext = currentContext;
+          child.parentContext = currentScope;
         }
         const normalized = normalizeNode(child);
         if (normalized) {
@@ -1794,4 +1936,4 @@ function hydrate(component, container, props = {}) {
   }
 }
 
-export { Component, Fragment, Portal, Suspense, SuspenseContext, addEvent, addEventListener, bindElement, createApp, createComponent, createResource, createSSGComponent, delegateEvents, getHydrationKey, getRenderedElement, hydrate, inject, insert, isComponent, isFragment, isPortal, isSuspense, mapNodes, mapSSRNodes, normalizeClass, onDestroy, onMount, onUpdate, patchAttr, patchClass, patchStyle, provide, render, renderToString, setSSGAttr, setStyle, template };
+export { Component, Fragment, Portal, Suspense, SuspenseContext, addEvent, addEventListener, bindElement, createApp, createComponent, createResource, createSSGComponent, delegateEvents, getHydrationKey, getRenderedElement, hydrate, inject, insert, isComponent, isFragment, isPortal, isSuspense, mapNodes, mapSSRNodes, normalizeClass, omitProps, onDestroy, onMount, onUpdate, patchAttr, patchClass, patchStyle, provide, render, renderToString, setSSGAttr, setStyle, template };