@geektech/tsone 0.0.1 → 0.0.2

package/dist/{index-3j2jsdpc.js → index-ycmc7ga1.js}

@@ -1,10 +1,11 @@
 import {
   StyleManager
-} from "./index-dgv88dz4.js";
+} from "./index-8wjswsye.js";
 
 // lib/core/reactive/types.ts
 var IS_REACTIVE = Symbol("is_reactive");
 var IS_READONLY = Symbol("is_readonly");
+var IS_REF = Symbol("is_ref");
 var MUTATING_ARRAY_METHODS = [
   "push",
   "pop",
@@ -62,7 +63,7 @@ class ReactiveSystem {
         }
         this.track(target2, key);
         const value = Reflect.get(target2, key);
-        if (value && typeof value === "object" && !Array.isArray(value)) {
+        if (isObject(value) && !hasReactiveFlag(value, IS_READONLY)) {
           return this.reactive(value);
         }
         return value;
@@ -73,7 +74,7 @@ class ReactiveSystem {
           return false;
         }
         const oldValue = Reflect.get(target2, key);
-        if (value && typeof value === "object" && !Array.isArray(value) && !hasReactiveFlag(value, IS_REACTIVE)) {
+        if (isObject(value) && !hasReactiveFlag(value, IS_REACTIVE) && !hasReactiveFlag(value, IS_READONLY)) {
           value = this.reactive(value);
         }
         const result = Reflect.set(target2, key, value);
@@ -121,6 +122,9 @@ class ReactiveSystem {
             return result;
           };
         }
+        if (isObject(value) && !hasReactiveFlag(value, IS_READONLY)) {
+          return this.reactive(value);
+        }
         return value;
       },
       set: (target2, key, value) => {
@@ -129,7 +133,7 @@ class ReactiveSystem {
           return false;
         }
         const oldValue = Reflect.get(target2, key);
-        if (value && typeof value === "object" && !Array.isArray(value) && !hasReactiveFlag(value, IS_REACTIVE)) {
+        if (isObject(value) && !hasReactiveFlag(value, IS_REACTIVE) && !hasReactiveFlag(value, IS_READONLY)) {
           value = this.reactive(value);
         }
         const result = Reflect.set(target2, key, value);
@@ -171,11 +175,14 @@ class ReactiveSystem {
     }
     const proxy = new Proxy(target, {
       get: (target2, key) => {
-        if (key === IS_REACTIVE || key === IS_READONLY) {
+        if (key === IS_REACTIVE) {
+          return false;
+        }
+        if (key === IS_READONLY) {
           return true;
         }
         const value = Reflect.get(target2, key);
-        if (value && typeof value === "object" && !Array.isArray(value)) {
+        if (isObject(value)) {
           return this.readonly(value);
         }
         return value;
@@ -193,7 +200,7 @@ class ReactiveSystem {
     return proxy;
   }
   effect(fn, options) {
-    const { lazy = false, scheduler } = options || {};
+    const { lazy = false, scheduler, throwOnError = false } = options || {};
     const effectFn = () => {
       if (!effectFn.active) {
         return fn();
@@ -204,6 +211,9 @@ class ReactiveSystem {
         this.activeEffect = effectFn;
         return fn();
       } catch (error) {
+        if (throwOnError) {
+          throw error;
+        }
         console.error("Effect error:", error);
         return;
       } finally {
@@ -310,6 +320,21 @@ function effect(fn, options) {
 function computed(getter) {
   return ReactiveSystem.getInstance().computed(getter);
 }
+function ref(value) {
+  const wrapper = { value };
+  Object.defineProperty(wrapper, IS_REF, {
+    configurable: false,
+    enumerable: false,
+    value: true
+  });
+  return reactive(wrapper);
+}
+function isRef(value) {
+  return isObject(value) && Boolean(Reflect.get(value, IS_REF));
+}
+function unref(value) {
+  return isRef(value) ? value.value : value;
+}
 function stop(effect2) {
   ReactiveSystem.getInstance().stop(effect2);
 }
@@ -354,6 +379,187 @@ function setStyleValue(style, property, value) {
   style.setProperty(cssProperty, String(value));
 }
 
+// lib/core/model.ts
+function pathSegments(path) {
+  const segments = path.split(".");
+  if (path.length === 0 || segments.some((segment) => segment.length === 0 || segment === "__proto__" || segment === "prototype" || segment === "constructor")) {
+    throw new Error(`Invalid model path "${path}"`);
+  }
+  return segments;
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function hasOwn(value, key) {
+  return Object.prototype.hasOwnProperty.call(value, key);
+}
+function modelPath(binding) {
+  return typeof binding === "string" ? binding : binding.path;
+}
+function getModelValue(state, path) {
+  let value = state;
+  for (const segment of pathSegments(path)) {
+    if (!isRecord(value)) {
+      throw new Error(`Invalid model path "${path}"`);
+    }
+    if (!hasOwn(value, segment)) {
+      if (segment in value) {
+        throw new Error(`Invalid model path "${path}"`);
+      }
+      return;
+    }
+    value = value[segment];
+  }
+  return value;
+}
+function setModelValue(state, path, value) {
+  const segments = pathSegments(path);
+  let target = state;
+  for (const segment of segments.slice(0, -1)) {
+    if (!hasOwn(target, segment)) {
+      if (segment in target) {
+        throw new Error(`Invalid model path "${path}"`);
+      }
+      target[segment] = {};
+    } else if (!isRecord(target[segment])) {
+      throw new Error(`Invalid model path "${path}"`);
+    }
+    const nextTarget = target[segment];
+    if (!isRecord(nextTarget)) {
+      throw new Error(`Invalid model path "${path}"`);
+    }
+    target = nextTarget;
+  }
+  const lastSegment = segments[segments.length - 1];
+  target[lastSegment] = value;
+}
+function displayValue(binding, value) {
+  if (typeof binding !== "string" && binding.format) {
+    return binding.format(value);
+  }
+  return value === undefined || value === null ? "" : String(value);
+}
+function toModelValue(binding, value) {
+  if (typeof binding !== "string" && binding.parse) {
+    return binding.parse(value);
+  }
+  return value;
+}
+function syncControl(element, binding, value) {
+  if (element instanceof HTMLInputElement) {
+    if (element.type === "checkbox") {
+      element.checked = Array.isArray(value) ? value.some((item) => String(item) === element.value) : Boolean(value);
+      return;
+    }
+    if (element.type === "radio") {
+      element.checked = value === element.value;
+      return;
+    }
+    element.value = displayValue(binding, value);
+    return;
+  }
+  if (element instanceof HTMLTextAreaElement) {
+    element.value = displayValue(binding, value);
+    return;
+  }
+  if (element instanceof HTMLSelectElement) {
+    if (element.multiple) {
+      const selected = Array.isArray(value) ? new Set(value.map(String)) : new Set;
+      for (let index = 0;index < element.options.length; index += 1) {
+        const option = element.options.item(index);
+        if (!option) {
+          continue;
+        }
+        option.selected = selected.has(option.value);
+      }
+      return;
+    }
+    element.value = displayValue(binding, value);
+  }
+}
+function controlValue(element, currentValue) {
+  if (element instanceof HTMLInputElement) {
+    if (element.type === "checkbox") {
+      if (Array.isArray(currentValue)) {
+        const values = currentValue.filter((value) => String(value) !== element.value);
+        return element.checked ? [...values, element.value] : values;
+      }
+      return element.checked;
+    }
+    if (element.type === "radio") {
+      return element.checked ? element.value : currentValue;
+    }
+    return element.value;
+  }
+  if (element instanceof HTMLTextAreaElement) {
+    return element.value;
+  }
+  if (element instanceof HTMLSelectElement) {
+    if (!element.multiple) {
+      return element.value;
+    }
+    const values = [];
+    for (let index = 0;index < element.selectedOptions.length; index += 1) {
+      const option = element.selectedOptions.item(index);
+      if (option) {
+        values.push(option.value);
+      }
+    }
+    return values;
+  }
+  return;
+}
+
+class ModelBindingController {
+  bindings = new WeakMap;
+  bind(element, binding, state) {
+    if (!this.isSupportedControl(element)) {
+      return;
+    }
+    const existing = this.bindings.get(element);
+    if (existing && this.sameBinding(existing, binding)) {
+      return;
+    }
+    this.cleanup(element);
+    const path = modelPath(binding);
+    const sync = () => syncControl(element, binding, getModelValue(state, path));
+    const eventName = element instanceof HTMLTextAreaElement || element instanceof HTMLInputElement && !["checkbox", "radio"].includes(element.type) ? "input" : "change";
+    const listener = () => {
+      const currentValue = getModelValue(state, path);
+      setModelValue(state, path, toModelValue(binding, controlValue(element, currentValue)));
+    };
+    element.addEventListener(eventName, listener);
+    const effectRef = effect(sync);
+    this.bindings.set(element, {
+      binding,
+      path,
+      parse: typeof binding === "string" ? undefined : binding.parse,
+      format: typeof binding === "string" ? undefined : binding.format,
+      eventName,
+      listener,
+      effect: effectRef
+    });
+  }
+  cleanup(element) {
+    const existing = this.bindings.get(element);
+    if (!existing) {
+      return;
+    }
+    element.removeEventListener(existing.eventName, existing.listener);
+    stop(existing.effect);
+    this.bindings.delete(element);
+  }
+  isSupportedControl(element) {
+    return element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement;
+  }
+  sameBinding(record, binding) {
+    if (typeof record.binding === "string" || typeof binding === "string") {
+      return record.binding === binding;
+    }
+    return record.path === binding.path && record.parse === binding.parse && record.format === binding.format;
+  }
+}
+
 // lib/core/vnode.ts
 function isComponentNode(vnode) {
   return typeof vnode === "object" && vnode !== null && "component" in vnode;
@@ -374,6 +580,17 @@ function h(tag, props, children, listeners, key, directions) {
     directions
   };
 }
+function createElementFactory(tag) {
+  return (options = {}) => ({
+    tag,
+    ...options
+  });
+}
+var Div = createElementFactory("div");
+var Span = createElementFactory("span");
+var P = createElementFactory("p");
+var Button = createElementFactory("button");
+var Input = createElementFactory("input");
 function createComponent(componentClass, props, children, key, directions) {
   return {
     component: componentClass,
@@ -391,6 +608,15 @@ function slot(name, key, directions) {
     directions
   };
 }
+function each(items, render, key) {
+  return items.map((item, index) => {
+    const vnode = render(item, index);
+    if (typeof vnode === "string") {
+      throw new Error("each render callback must return a VNode");
+    }
+    return { ...vnode, key: key(item, index) };
+  });
+}
 
 // lib/core/renderer.ts
 class RendererContext {
@@ -449,44 +675,62 @@ class TextRenderStrategy {
 
 class ComponentRenderStrategy {
   instances = new WeakMap;
+  instanceNodes = new Map;
+  emitterUnsubscribers = new WeakMap;
   matches(vnode) {
     return typeof vnode === "object" && vnode !== null && isComponentNode(vnode);
   }
   mount(vnode, context) {
+    if (vnode.directions?.if === false) {
+      return document.createComment("if");
+    }
     const ComponentClass = vnode.component;
     const instance = new ComponentClass(this.createProps(vnode));
     if (context.appContext && instance.setAppContext) {
       instance.setAppContext(context.appContext);
     }
-    if (vnode.emitters) {
-      Object.entries(vnode.emitters).forEach(([eventName, listener]) => {
-        instance.on(eventName, listener);
-      });
-    }
+    this.syncEmitters(instance, vnode.emitters ?? {});
     context.registerChild(instance);
     const node = instance.mountToNode();
-    this.instances.set(node, instance);
+    this.trackInstanceNode(instance, node);
+    instance.setElementChangeListener?.((previousNode, nextNode) => {
+      this.trackInstanceNode(instance, previousNode);
+      this.trackInstanceNode(instance, nextNode);
+    });
     return node;
   }
   patch(oldVNode, newVNode, currentNode, context) {
+    if (currentNode.nodeType === Node.COMMENT_NODE) {
+      const nextNode2 = this.mount(newVNode, context);
+      currentNode.parentNode?.replaceChild(nextNode2, currentNode);
+      return nextNode2;
+    }
+    if (newVNode.directions?.if === false) {
+      const nextNode2 = document.createComment("if");
+      currentNode.parentNode?.replaceChild(nextNode2, currentNode);
+      this.unmount(oldVNode, currentNode, context);
+      return nextNode2;
+    }
     const instance = this.instances.get(currentNode);
     if (instance && oldVNode.component === newVNode.component) {
+      this.syncEmitters(instance, newVNode.emitters ?? {});
       instance.setProps(this.createProps(newVNode));
-      instance.update();
       const nextNode2 = instance.getElement() ?? currentNode;
-      this.instances.set(nextNode2, instance);
+      this.trackInstanceNode(instance, nextNode2);
       return nextNode2;
     }
     const nextNode = this.mount(newVNode, context);
     currentNode.parentNode?.replaceChild(nextNode, currentNode);
-    this.unmount(oldVNode, currentNode);
+    this.unmount(oldVNode, currentNode, context);
     return nextNode;
   }
-  unmount(_vnode, currentNode) {
+  unmount(_vnode, currentNode, context) {
     const instance = this.instances.get(currentNode);
     if (instance) {
+      this.clearEmitters(instance);
       instance.unmount();
-      this.instances.delete(currentNode);
+      this.clearInstanceNodes(instance);
+      context.unregisterChild(instance);
     }
   }
   createProps(vnode) {
@@ -495,6 +739,44 @@ class ComponentRenderStrategy {
       children: vnode.children ?? []
     };
   }
+  syncEmitters(instance, emitters) {
+    const current = this.emitterUnsubscribers.get(instance) ?? new Map;
+    current.forEach(({ listener: currentListener, unsubscribe }, eventName) => {
+      const listener = emitters[eventName];
+      if (!listener || listener !== currentListener) {
+        unsubscribe();
+        current.delete(eventName);
+      }
+    });
+    Object.entries(emitters).forEach(([eventName, listener]) => {
+      if (current.get(eventName)?.listener === listener) {
+        return;
+      }
+      current.set(eventName, {
+        listener,
+        unsubscribe: instance.on(eventName, listener)
+      });
+    });
+    this.emitterUnsubscribers.set(instance, current);
+  }
+  clearEmitters(instance) {
+    this.emitterUnsubscribers.get(instance)?.forEach(({ unsubscribe }) => {
+      unsubscribe();
+    });
+    this.emitterUnsubscribers.delete(instance);
+  }
+  trackInstanceNode(instance, node) {
+    this.instances.set(node, instance);
+    const nodes = this.instanceNodes.get(instance) ?? new Set;
+    nodes.add(node);
+    this.instanceNodes.set(instance, nodes);
+  }
+  clearInstanceNodes(instance) {
+    this.instanceNodes.get(instance)?.forEach((node) => {
+      this.instances.delete(node);
+    });
+    this.instanceNodes.delete(instance);
+  }
 }
 
 class SlotRenderStrategy {
@@ -503,12 +785,26 @@ class SlotRenderStrategy {
     return typeof vnode === "object" && vnode !== null && isSlotProvider(vnode);
   }
   mount(vnode, context) {
+    if (vnode.directions?.if === false) {
+      return document.createComment("if");
+    }
     const slotContainer = document.createElement("div");
     slotContainer.setAttribute("data-slot", vnode.props.name);
     this.mountSlotChildren(slotContainer, this.resolveChildren(vnode, context), context);
     return slotContainer;
   }
   patch(oldVNode, newVNode, currentNode, context) {
+    if (currentNode.nodeType === Node.COMMENT_NODE) {
+      const nextNode = this.mount(newVNode, context);
+      currentNode.parentNode?.replaceChild(nextNode, currentNode);
+      return nextNode;
+    }
+    if (newVNode.directions?.if === false) {
+      const nextNode = document.createComment("if");
+      currentNode.parentNode?.replaceChild(nextNode, currentNode);
+      this.unmount(oldVNode, currentNode, context);
+      return nextNode;
+    }
     if (currentNode instanceof HTMLElement) {
       currentNode.setAttribute("data-slot", newVNode.props.name);
       this.replaceSlotChildren(currentNode, oldVNode, newVNode, context);
@@ -550,7 +846,7 @@ class SlotRenderStrategy {
 class ElementRenderStrategy {
   listeners = new WeakMap;
   effects = new WeakMap;
-  modelBindings = new WeakMap;
+  modelBindings = new ModelBindingController;
   matches(vnode) {
     return typeof vnode === "object" && vnode !== null && isHTMLNode(vnode);
   }
@@ -560,11 +856,11 @@ class ElementRenderStrategy {
     }
     const element = document.createElement(vnode.tag);
     this.applyProps(element, {}, vnode.props ?? {}, context);
-    this.applyDirections(element, undefined, vnode.directions, context);
     this.updateListeners(element, {}, this.collectListeners(vnode));
     (vnode.children ?? []).forEach((child) => {
       element.appendChild(context.renderer.mount(child, context));
     });
+    this.applyDirections(element, undefined, vnode.directions, context);
     return element;
   }
   patch(oldVNode, newVNode, currentNode, context) {
@@ -584,9 +880,9 @@ class ElementRenderStrategy {
       return nextNode;
     }
     this.applyProps(currentNode, oldVNode.props ?? {}, newVNode.props ?? {}, context);
-    this.applyDirections(currentNode, oldVNode.directions, newVNode.directions, context);
     this.updateListeners(currentNode, this.collectListeners(oldVNode), this.collectListeners(newVNode));
     this.updateChildren(currentNode, oldVNode.children ?? [], newVNode.children ?? [], context);
+    this.applyDirections(currentNode, oldVNode.directions, newVNode.directions, context);
     return currentNode;
   }
   unmount(vnode, currentNode, context) {
@@ -599,7 +895,7 @@ class ElementRenderStrategy {
       currentNode.removeEventListener(eventName, listener);
     });
     this.listeners.delete(currentNode);
-    this.modelBindings.delete(currentNode);
+    this.modelBindings.cleanup(currentNode);
     (vnode.children ?? []).forEach((child, index) => {
       const childNode = currentNode.childNodes[index];
       if (childNode) {
@@ -656,12 +952,16 @@ class ElementRenderStrategy {
     } else if (oldDirections && "show" in oldDirections) {
       element.style.display = "";
     }
-    if (newDirections?.model) {
-      this.setupTwoWayBinding(element, newDirections.model, context);
+    if (!newDirections?.model) {
+      this.modelBindings.cleanup(element);
+      return;
     }
+    this.modelBindings.bind(element, newDirections.model, context.templateEngine.state);
   }
   updateChildren(element, oldChildren, newChildren, context) {
-    if (this.hasKeyedChildren(oldChildren, newChildren)) {
+    this.assertNoDuplicateKeys(oldChildren);
+    this.assertNoDuplicateKeys(newChildren);
+    if (this.hasOnlyKeyedChildren(oldChildren, newChildren)) {
       this.updateKeyedChildren(element, oldChildren, newChildren, context);
       return;
     }
@@ -730,8 +1030,21 @@ class ElementRenderStrategy {
       }
     });
   }
-  hasKeyedChildren(oldChildren, newChildren) {
-    return [...oldChildren, ...newChildren].some((child) => this.getVNodeKey(child) !== undefined);
+  hasOnlyKeyedChildren(oldChildren, newChildren) {
+    return [...oldChildren, ...newChildren].every((child) => this.getVNodeKey(child) !== undefined);
+  }
+  assertNoDuplicateKeys(children) {
+    const keys = new Set;
+    children.forEach((child) => {
+      const key = this.getVNodeKey(child);
+      if (key === undefined) {
+        return;
+      }
+      if (keys.has(key)) {
+        throw new Error(`Duplicate key "${key}"`);
+      }
+      keys.add(key);
+    });
   }
   getVNodeKey(vnode) {
     if (typeof vnode === "string") {
@@ -780,55 +1093,6 @@ class ElementRenderStrategy {
     });
     this.trackEffect(element, effectRef);
   }
-  setupTwoWayBinding(element, modelKey, context) {
-    if (!(element instanceof HTMLInputElement) && !(element instanceof HTMLTextAreaElement) && !(element instanceof HTMLSelectElement)) {
-      return;
-    }
-    if (this.modelBindings.get(element) === modelKey) {
-      return;
-    }
-    this.modelBindings.set(element, modelKey);
-    const getValue = () => {
-      const value = this.getStateValue(context, modelKey);
-      return value === undefined || value === null ? "" : String(value);
-    };
-    const setValue = (value) => {
-      const keys = modelKey.split(".");
-      let target = context.templateEngine.state;
-      for (let index = 0;index < keys.length - 1; index += 1) {
-        const key = keys[index];
-        if (!target[key] || typeof target[key] !== "object") {
-          target[key] = {};
-        }
-        target = target[key];
-      }
-      target[keys[keys.length - 1]] = value;
-    };
-    element.value = getValue();
-    const eventName = element instanceof HTMLSelectElement ? "change" : "input";
-    const inputListener = () => {
-      setValue(element.value);
-    };
-    element.addEventListener(eventName, inputListener);
-    const store = this.listeners.get(element) ?? new Map;
-    store.set(`model:${modelKey}`, { eventName, listener: inputListener });
-    this.listeners.set(element, store);
-    const effectRef = effect(() => {
-      const nextValue = getValue();
-      if (element.value !== nextValue) {
-        element.value = nextValue;
-      }
-    });
-    this.trackEffect(element, effectRef);
-  }
-  getStateValue(context, modelKey) {
-    return modelKey.split(".").reduce((value, key) => {
-      if (!value || typeof value !== "object") {
-        return;
-      }
-      return value[key];
-    }, context.templateEngine.state);
-  }
   trackEffect(element, effectRef) {
     const effects = this.effects.get(element) ?? new Set;
     effects.add(effectRef);
@@ -889,8 +1153,8 @@ class TemplateEngine {
       if (key) {
         keys.add(key);
         const value = this.getValueFromState(key);
-        const displayValue = value === undefined || value === null ? "" : String(value);
-        result = result.replace(match[0], displayValue);
+        const displayValue2 = value === undefined || value === null ? "" : String(value);
+        result = result.replace(match[0], displayValue2);
       }
     });
     return result;
@@ -910,7 +1174,7 @@ class TemplateEngine {
   }
   clearBindings() {
     this.bindings.forEach((binding) => {
-      binding.effect.active = false;
+      stop(binding.effect);
     });
     this.bindings = [];
   }
@@ -953,8 +1217,11 @@ class Component {
   templateEngine;
   childComponents = new Set;
   eventListeners = {};
+  providers = new Map;
   updateEffect;
   appContext = null;
+  parentComponent = null;
+  elementChangeListener = null;
   styleManager;
   state;
   mounted = false;
@@ -969,7 +1236,7 @@ class Component {
       if (this.mounted) {
         this.update();
       }
-    });
+    }, { throwOnError: true });
   }
   mount(container) {
     if (!container || !(container instanceof HTMLElement)) {
@@ -997,15 +1264,15 @@ class Component {
     if (!this.el || !this.vnode) {
       return;
     }
-    try {
-      this.beforeUpdate();
-      const newVNode = this.render();
-      this.el = this.renderer.patch(this.vnode, newVNode, this.el, this.createRenderContext());
-      this.vnode = newVNode;
-      this.onUpdated();
-    } catch (error) {
-      console.error("组件更新错误:", error);
+    this.beforeUpdate();
+    const newVNode = this.render();
+    const previousElement = this.el;
+    this.el = this.renderer.patch(this.vnode, newVNode, this.el, this.createRenderContext());
+    if (previousElement !== this.el) {
+      this.elementChangeListener?.(previousElement, this.el);
     }
+    this.vnode = newVNode;
+    this.onUpdated();
   }
   unmount() {
     if (!this.mounted) {
@@ -1016,8 +1283,15 @@ class Component {
       this.renderer.unmount(this.vnode, this.el, this.createRenderContext());
     }
     this.childComponents.clear();
+    Object.keys(this.eventListeners).forEach((eventName) => {
+      this.eventListeners[eventName].clear();
+      delete this.eventListeners[eventName];
+    });
+    this.providers.clear();
+    this.parentComponent = null;
+    this.elementChangeListener = null;
     this.templateEngine.clearBindings();
-    this.styleManager.clearStyles();
+    this.styleManager.destroy();
     stop(this.updateEffect);
     if (this.el?.parentNode) {
       this.el.parentNode.removeChild(this.el);
@@ -1045,6 +1319,28 @@ class Component {
       child.setAppContext?.(context);
     });
   }
+  setParentComponent(parent) {
+    this.parentComponent = parent;
+  }
+  setElementChangeListener(listener) {
+    this.elementChangeListener = listener;
+  }
+  provide(key, value) {
+    this.providers.set(key, value);
+  }
+  inject(key, fallback) {
+    const result = this.resolveInjection(key);
+    return result.found ? result.value : fallback;
+  }
+  resolveInjection(key) {
+    if (this.providers.has(key)) {
+      return { found: true, value: this.providers.get(key) };
+    }
+    if (this.parentComponent?.resolveInjection) {
+      return this.parentComponent.resolveInjection(key);
+    }
+    return this.resolveAppInjection(key);
+  }
   getElement() {
     return this.el;
   }
@@ -1070,6 +1366,7 @@ class Component {
       this.eventListeners[eventName] = new Set;
     }
     this.eventListeners[eventName].add(listener);
+    return () => this.off(eventName, listener);
   }
   off(eventName, listener) {
     this.eventListeners[eventName]?.delete(listener);
@@ -1082,7 +1379,12 @@ class Component {
       slots: this.collectSlots(),
       registerChild: (component) => {
         this.childComponents.add(component);
+        component.setParentComponent?.(this);
         component.setAppContext?.(this.appContext);
+      },
+      unregisterChild: (component) => {
+        this.childComponents.delete(component);
+        component.setParentComponent?.(null);
       }
     };
   }
@@ -1125,6 +1427,13 @@ class Component {
     const globalApp = globalThis.__APP__;
     return this.getRouterFrom(globalApp);
   }
+  resolveAppInjection(key) {
+    if (!this.appContext || typeof this.appContext !== "object") {
+      return { found: false, value: undefined };
+    }
+    const app = this.appContext.app;
+    return app?.resolveInjection?.(key) ?? { found: false, value: undefined };
+  }
   trackReactiveValue(value, seen) {
     if (!value || typeof value !== "object" || seen.has(value)) {
       return;
@@ -1147,6 +1456,12 @@ function setRouter(r) {
   }
   router = r;
 }
+function useRouter() {
+  if (!router) {
+    throw new Error("Router is not initialized. Please make sure you have installed the router plugin.");
+  }
+  return router;
+}
 
 // lib/router/matcher.ts
 function normalizePath(path) {
@@ -1207,13 +1522,18 @@ function createRouterHref(path, mode, base) {
 function getBrowserLocation(mode, base) {
   let path;
   let fullPath;
+  let queryString;
   if (mode === "history") {
     fullPath = window.location.pathname + window.location.search;
     path = window.location.pathname;
+    queryString = window.location.search;
   } else {
     const hash = window.location.hash;
     fullPath = hash || "#/";
     path = fullPath.startsWith("#") ? fullPath.slice(1) : fullPath;
+    const queryStart = path.indexOf("?");
+    queryString = queryStart >= 0 ? path.slice(queryStart + 1) : "";
+    path = queryStart >= 0 ? path.slice(0, queryStart) : path;
   }
   if (path.startsWith(base) && base !== "/" && path !== "/") {
     path = path.slice(base.length);
@@ -1222,7 +1542,7 @@ function getBrowserLocation(mode, base) {
   return {
     path,
     fullPath,
-    query: parseQuery(mode === "hash" ? path.split("?")[1] ?? "" : window.location.search),
+    query: parseQuery(queryString),
     params: {}
   };
 }
@@ -1492,7 +1812,7 @@ function createRouter(options) {
   return new Router(options);
 }
 
-export { ReactiveSystem, reactive, readonly, effect, computed, stop, isReactive, isReadonly, TemplateEngine, isComponentNode, isHTMLNode, isSlotProvider, h, createComponent, slot, RendererContext, TextRenderStrategy, ComponentRenderStrategy, SlotRenderStrategy, ElementRenderStrategy, Component, Router, RouterLink, RouterView, createRouter };
+export { ReactiveSystem, reactive, readonly, effect, computed, ref, isRef, unref, stop, isReactive, isReadonly, TemplateEngine, modelPath, getModelValue, setModelValue, ModelBindingController, isComponentNode, isHTMLNode, isSlotProvider, h, Div, Span, P, Button, Input, createComponent, slot, each, RendererContext, TextRenderStrategy, ComponentRenderStrategy, SlotRenderStrategy, ElementRenderStrategy, Component, useRouter, Router, RouterLink, RouterView, createRouter };
 
-//# debugId=97822D95A36A4F3E64756E2164756E21
-//# sourceMappingURL=index-3j2jsdpc.js.map
+//# debugId=EA20D7B3780F196864756E2164756E21
+//# sourceMappingURL=index-ycmc7ga1.js.map