@geektech/tsone 0.0.1

package/dist/index-3j2jsdpc.js

@@ -0,0 +1,1498 @@
+import {
+  StyleManager
+} from "./index-dgv88dz4.js";
+
+// lib/core/reactive/types.ts
+var IS_REACTIVE = Symbol("is_reactive");
+var IS_READONLY = Symbol("is_readonly");
+var MUTATING_ARRAY_METHODS = [
+  "push",
+  "pop",
+  "shift",
+  "unshift",
+  "splice",
+  "sort",
+  "reverse"
+];
+function hasReactiveFlag(value, flag) {
+  return Boolean(Reflect.get(value, flag));
+}
+function isObject(value) {
+  return value !== null && typeof value === "object";
+}
+
+// lib/core/reactive.ts
+var effectId = 0;
+
+class ReactiveSystem {
+  static instance;
+  activeEffect = null;
+  effectStack = [];
+  targetMap = new WeakMap;
+  reactiveMap = new WeakMap;
+  readonlyMap = new WeakMap;
+  constructor() {}
+  static getInstance() {
+    if (!ReactiveSystem.instance) {
+      ReactiveSystem.instance = new ReactiveSystem;
+    }
+    return ReactiveSystem.instance;
+  }
+  reactive(target) {
+    if (!isObject(target)) {
+      console.warn("reactive: target must be an object");
+      return target;
+    }
+    if (isReactive(target)) {
+      return target;
+    }
+    if (this.reactiveMap.has(target)) {
+      return this.reactiveMap.get(target);
+    }
+    if (Array.isArray(target)) {
+      return this.createReactiveArray(target);
+    }
+    const proxy = new Proxy(target, {
+      get: (target2, key) => {
+        if (key === IS_REACTIVE) {
+          return true;
+        }
+        if (key === IS_READONLY) {
+          return false;
+        }
+        this.track(target2, key);
+        const value = Reflect.get(target2, key);
+        if (value && typeof value === "object" && !Array.isArray(value)) {
+          return this.reactive(value);
+        }
+        return value;
+      },
+      set: (target2, key, value) => {
+        if (hasReactiveFlag(target2, IS_READONLY)) {
+          console.warn(`Cannot set property ${String(key)} on readonly object`);
+          return false;
+        }
+        const oldValue = Reflect.get(target2, key);
+        if (value && typeof value === "object" && !Array.isArray(value) && !hasReactiveFlag(value, IS_REACTIVE)) {
+          value = this.reactive(value);
+        }
+        const result = Reflect.set(target2, key, value);
+        if (oldValue !== value) {
+          this.trigger(target2, key);
+        }
+        return result;
+      },
+      deleteProperty: (target2, key) => {
+        if (hasReactiveFlag(target2, IS_READONLY)) {
+          console.warn(`Cannot delete property ${String(key)} on readonly object`);
+          return false;
+        }
+        const hadKey = key in target2;
+        const result = Reflect.deleteProperty(target2, key);
+        if (hadKey) {
+          this.trigger(target2, key);
+        }
+        return result;
+      }
+    });
+    this.reactiveMap.set(target, proxy);
+    return proxy;
+  }
+  createReactiveArray(target) {
+    if (this.reactiveMap.has(target)) {
+      return this.reactiveMap.get(target);
+    }
+    const proxy = new Proxy(target, {
+      get: (target2, key) => {
+        if (key === IS_REACTIVE) {
+          return true;
+        }
+        if (key === IS_READONLY) {
+          return false;
+        }
+        this.track(target2, key);
+        const value = Reflect.get(target2, key);
+        if (typeof key === "string" && MUTATING_ARRAY_METHODS.includes(key)) {
+          return (...args) => {
+            const arrayMethod = value;
+            const result = arrayMethod.apply(target2, args);
+            this.trigger(target2, "length");
+            this.trigger(target2, key);
+            return result;
+          };
+        }
+        return value;
+      },
+      set: (target2, key, value) => {
+        if (hasReactiveFlag(target2, IS_READONLY)) {
+          console.warn(`Cannot set property ${String(key)} on readonly object`);
+          return false;
+        }
+        const oldValue = Reflect.get(target2, key);
+        if (value && typeof value === "object" && !Array.isArray(value) && !hasReactiveFlag(value, IS_REACTIVE)) {
+          value = this.reactive(value);
+        }
+        const result = Reflect.set(target2, key, value);
+        if (oldValue !== value) {
+          this.trigger(target2, key);
+          if (typeof key === "string" && !isNaN(Number(key))) {
+            this.trigger(target2, "length");
+          }
+        }
+        return result;
+      },
+      deleteProperty: (target2, key) => {
+        if (hasReactiveFlag(target2, IS_READONLY)) {
+          console.warn(`Cannot delete property ${String(key)} on readonly object`);
+          return false;
+        }
+        const hadKey = key in target2;
+        const result = Reflect.deleteProperty(target2, key);
+        if (hadKey) {
+          this.trigger(target2, key);
+          this.trigger(target2, "length");
+        }
+        return result;
+      }
+    });
+    this.reactiveMap.set(target, proxy);
+    return proxy;
+  }
+  readonly(target) {
+    if (!isObject(target)) {
+      console.warn("readonly: target must be an object");
+      return target;
+    }
+    if (hasReactiveFlag(target, IS_READONLY)) {
+      return target;
+    }
+    if (this.readonlyMap.has(target)) {
+      return this.readonlyMap.get(target);
+    }
+    const proxy = new Proxy(target, {
+      get: (target2, key) => {
+        if (key === IS_REACTIVE || key === IS_READONLY) {
+          return true;
+        }
+        const value = Reflect.get(target2, key);
+        if (value && typeof value === "object" && !Array.isArray(value)) {
+          return this.readonly(value);
+        }
+        return value;
+      },
+      set: () => {
+        console.warn("Cannot set property on readonly object");
+        return false;
+      },
+      deleteProperty: () => {
+        console.warn("Cannot delete property on readonly object");
+        return false;
+      }
+    });
+    this.readonlyMap.set(target, proxy);
+    return proxy;
+  }
+  effect(fn, options) {
+    const { lazy = false, scheduler } = options || {};
+    const effectFn = () => {
+      if (!effectFn.active) {
+        return fn();
+      }
+      try {
+        this.cleanup(effectFn);
+        this.effectStack.push(effectFn);
+        this.activeEffect = effectFn;
+        return fn();
+      } catch (error) {
+        console.error("Effect error:", error);
+        return;
+      } finally {
+        this.effectStack.pop();
+        this.activeEffect = this.effectStack[this.effectStack.length - 1] ?? null;
+      }
+    };
+    effectFn.id = effectId++;
+    effectFn.deps = [];
+    effectFn.active = true;
+    effectFn.scheduler = scheduler;
+    if (!lazy) {
+      effectFn();
+    }
+    return effectFn;
+  }
+  computed(getter) {
+    let dirty = true;
+    let value;
+    const computedTarget = {};
+    const trackComputedValue = () => {
+      this.track(computedTarget, "value");
+    };
+    const runner = this.effect(() => {
+      value = getter();
+      dirty = false;
+    }, {
+      lazy: true,
+      scheduler: () => {
+        if (!dirty) {
+          dirty = true;
+          this.trigger(computedTarget, "value");
+        }
+      }
+    });
+    return {
+      get value() {
+        if (dirty) {
+          runner();
+        }
+        trackComputedValue();
+        return value;
+      }
+    };
+  }
+  cleanup(effect) {
+    effect.deps.forEach((dep) => {
+      dep.delete(effect);
+    });
+    effect.deps.length = 0;
+  }
+  track(target, key) {
+    if (!this.activeEffect || !this.activeEffect.active)
+      return;
+    let depsMap = this.targetMap.get(target);
+    if (!depsMap) {
+      depsMap = new Map;
+      this.targetMap.set(target, depsMap);
+    }
+    let dep = depsMap.get(key);
+    if (!dep) {
+      dep = new Set;
+      depsMap.set(key, dep);
+    }
+    if (!dep.has(this.activeEffect)) {
+      dep.add(this.activeEffect);
+      this.activeEffect.deps.push(dep);
+    }
+  }
+  trigger(target, key) {
+    const depsMap = this.targetMap.get(target);
+    if (!depsMap)
+      return;
+    const dep = depsMap.get(key);
+    if (!dep)
+      return;
+    const effects = new Set(dep);
+    effects.forEach((effect) => {
+      if (effect.active) {
+        if (effect.scheduler) {
+          effect.scheduler(effect);
+        } else {
+          effect();
+        }
+      }
+    });
+  }
+  stop(effect) {
+    if (effect.active) {
+      this.cleanup(effect);
+      effect.active = false;
+    }
+  }
+}
+function reactive(target) {
+  return ReactiveSystem.getInstance().reactive(target);
+}
+function readonly(target) {
+  return ReactiveSystem.getInstance().readonly(target);
+}
+function effect(fn, options) {
+  return ReactiveSystem.getInstance().effect(fn, options);
+}
+function computed(getter) {
+  return ReactiveSystem.getInstance().computed(getter);
+}
+function stop(effect2) {
+  ReactiveSystem.getInstance().stop(effect2);
+}
+function isReactive(value) {
+  return isObject(value) && hasReactiveFlag(value, IS_REACTIVE);
+}
+function isReadonly(value) {
+  return isObject(value) && hasReactiveFlag(value, IS_READONLY);
+}
+
+// lib/core/renderer/props.ts
+function isEventProp(key) {
+  return /^on[A-Z]/.test(key) || /^on[a-z]/.test(key);
+}
+function eventNameFromProp(key) {
+  return key.slice(2).toLowerCase();
+}
+function parseEventName(event) {
+  const [eventName, ...modifiers] = event.split(".");
+  return { eventName, modifiers: new Set(modifiers) };
+}
+function wrapEventHandler(handler, modifiers) {
+  const eventHandler = (event) => {
+    if (modifiers.has("stop")) {
+      event.stopPropagation();
+    }
+    if (modifiers.has("prevent")) {
+      event.preventDefault();
+    }
+    if (modifiers.has("self") && event.currentTarget !== event.target) {
+      return;
+    }
+    if (modifiers.has("once")) {
+      event.currentTarget.removeEventListener(event.type, eventHandler);
+    }
+    handler(event);
+  };
+  return eventHandler;
+}
+function setStyleValue(style, property, value) {
+  const cssProperty = property.includes("-") ? property : property.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+  style.setProperty(cssProperty, String(value));
+}
+
+// lib/core/vnode.ts
+function isComponentNode(vnode) {
+  return typeof vnode === "object" && vnode !== null && "component" in vnode;
+}
+function isHTMLNode(vnode) {
+  return typeof vnode === "object" && vnode !== null && "tag" in vnode && vnode.tag !== "slot";
+}
+function isSlotProvider(vnode) {
+  return typeof vnode === "object" && vnode !== null && "tag" in vnode && vnode.tag === "slot";
+}
+function h(tag, props, children, listeners, key, directions) {
+  return {
+    tag,
+    props,
+    children,
+    listeners,
+    key,
+    directions
+  };
+}
+function createComponent(componentClass, props, children, key, directions) {
+  return {
+    component: componentClass,
+    props,
+    children,
+    key,
+    directions
+  };
+}
+function slot(name, key, directions) {
+  return {
+    tag: "slot",
+    props: { name },
+    key,
+    directions
+  };
+}
+
+// lib/core/renderer.ts
+class RendererContext {
+  strategies;
+  constructor() {
+    this.strategies = [
+      new TextRenderStrategy,
+      new ComponentRenderStrategy,
+      new SlotRenderStrategy,
+      new ElementRenderStrategy
+    ];
+  }
+  mount(vnode, context) {
+    return this.findStrategy(vnode).mount(vnode, context);
+  }
+  patch(oldVNode, newVNode, currentNode, context) {
+    const oldStrategy = this.findStrategy(oldVNode);
+    const newStrategy = this.findStrategy(newVNode);
+    if (oldStrategy !== newStrategy) {
+      const nextNode = newStrategy.mount(newVNode, context);
+      currentNode.parentNode?.replaceChild(nextNode, currentNode);
+      oldStrategy.unmount(oldVNode, currentNode, context);
+      return nextNode;
+    }
+    return oldStrategy.patch(oldVNode, newVNode, currentNode, context);
+  }
+  unmount(vnode, currentNode, context) {
+    this.findStrategy(vnode).unmount(vnode, currentNode, context);
+  }
+  findStrategy(vnode) {
+    const strategy = this.strategies.find((item) => item.matches(vnode));
+    if (!strategy) {
+      throw new Error("No render strategy found for vnode");
+    }
+    return strategy;
+  }
+}
+
+class TextRenderStrategy {
+  matches(vnode) {
+    return typeof vnode === "string";
+  }
+  mount(vnode, context) {
+    return context.templateEngine.parseTemplate(vnode);
+  }
+  patch(oldVNode, newVNode, currentNode, context) {
+    if (oldVNode === newVNode) {
+      return currentNode;
+    }
+    const nextNode = this.mount(newVNode, context);
+    currentNode.parentNode?.replaceChild(nextNode, currentNode);
+    return nextNode;
+  }
+  unmount() {}
+}
+
+class ComponentRenderStrategy {
+  instances = new WeakMap;
+  matches(vnode) {
+    return typeof vnode === "object" && vnode !== null && isComponentNode(vnode);
+  }
+  mount(vnode, context) {
+    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);
+      });
+    }
+    context.registerChild(instance);
+    const node = instance.mountToNode();
+    this.instances.set(node, instance);
+    return node;
+  }
+  patch(oldVNode, newVNode, currentNode, context) {
+    const instance = this.instances.get(currentNode);
+    if (instance && oldVNode.component === newVNode.component) {
+      instance.setProps(this.createProps(newVNode));
+      instance.update();
+      const nextNode2 = instance.getElement() ?? currentNode;
+      this.instances.set(nextNode2, instance);
+      return nextNode2;
+    }
+    const nextNode = this.mount(newVNode, context);
+    currentNode.parentNode?.replaceChild(nextNode, currentNode);
+    this.unmount(oldVNode, currentNode);
+    return nextNode;
+  }
+  unmount(_vnode, currentNode) {
+    const instance = this.instances.get(currentNode);
+    if (instance) {
+      instance.unmount();
+      this.instances.delete(currentNode);
+    }
+  }
+  createProps(vnode) {
+    return {
+      ...vnode.props ?? {},
+      children: vnode.children ?? []
+    };
+  }
+}
+
+class SlotRenderStrategy {
+  renderedChildren = new WeakMap;
+  matches(vnode) {
+    return typeof vnode === "object" && vnode !== null && isSlotProvider(vnode);
+  }
+  mount(vnode, context) {
+    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 instanceof HTMLElement) {
+      currentNode.setAttribute("data-slot", newVNode.props.name);
+      this.replaceSlotChildren(currentNode, oldVNode, newVNode, context);
+    }
+    return currentNode;
+  }
+  unmount(_vnode, currentNode, context) {
+    if (!(currentNode instanceof HTMLElement)) {
+      return;
+    }
+    this.unmountSlotChildren(currentNode, context);
+    this.renderedChildren.delete(currentNode);
+  }
+  resolveChildren(vnode, context) {
+    return context.slots[vnode.props.name] ?? vnode.children ?? [];
+  }
+  replaceSlotChildren(element, _oldVNode, newVNode, context) {
+    this.unmountSlotChildren(element, context);
+    element.textContent = "";
+    this.mountSlotChildren(element, this.resolveChildren(newVNode, context), context);
+  }
+  mountSlotChildren(element, children, context) {
+    children.forEach((child) => {
+      element.appendChild(context.renderer.mount(child, context));
+    });
+    this.renderedChildren.set(element, children);
+  }
+  unmountSlotChildren(element, context) {
+    const children = this.renderedChildren.get(element) ?? [];
+    children.forEach((child, index) => {
+      const childNode = element.childNodes[index];
+      if (childNode) {
+        context.renderer.unmount(child, childNode, context);
+      }
+    });
+  }
+}
+
+class ElementRenderStrategy {
+  listeners = new WeakMap;
+  effects = new WeakMap;
+  modelBindings = new WeakMap;
+  matches(vnode) {
+    return typeof vnode === "object" && vnode !== null && isHTMLNode(vnode);
+  }
+  mount(vnode, context) {
+    if (vnode.directions?.if === false) {
+      return document.createComment("if");
+    }
+    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));
+    });
+    return element;
+  }
+  patch(oldVNode, newVNode, currentNode, context) {
+    if (oldVNode.tag !== newVNode.tag || currentNode.nodeType === Node.COMMENT_NODE) {
+      const nextNode = this.mount(newVNode, context);
+      currentNode.parentNode?.replaceChild(nextNode, currentNode);
+      this.unmount(oldVNode, currentNode, context);
+      return nextNode;
+    }
+    if (!(currentNode instanceof HTMLElement)) {
+      return currentNode;
+    }
+    if (newVNode.directions?.if === false) {
+      const nextNode = document.createComment("if");
+      currentNode.parentNode?.replaceChild(nextNode, currentNode);
+      this.unmount(oldVNode, currentNode, context);
+      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);
+    return currentNode;
+  }
+  unmount(vnode, currentNode, context) {
+    if (!(currentNode instanceof HTMLElement)) {
+      return;
+    }
+    this.effects.get(currentNode)?.forEach((item) => stop(item));
+    this.effects.delete(currentNode);
+    this.listeners.get(currentNode)?.forEach(({ eventName, listener }) => {
+      currentNode.removeEventListener(eventName, listener);
+    });
+    this.listeners.delete(currentNode);
+    this.modelBindings.delete(currentNode);
+    (vnode.children ?? []).forEach((child, index) => {
+      const childNode = currentNode.childNodes[index];
+      if (childNode) {
+        context.renderer.unmount(child, childNode, context);
+      }
+    });
+  }
+  applyProps(element, oldProps, newProps, context) {
+    Object.keys(oldProps).forEach((key) => {
+      if (isEventProp(key) || key in newProps) {
+        return;
+      }
+      if (key === "className" || key === "class") {
+        element.removeAttribute("class");
+      } else if (key === "style") {
+        element.removeAttribute("style");
+      } else {
+        element.removeAttribute(key);
+      }
+    });
+    Object.entries(newProps).forEach(([key, value]) => {
+      if (isEventProp(key)) {
+        return;
+      }
+      if (key === "className" || key === "class") {
+        element.className = String(value ?? "");
+        return;
+      }
+      if (key === "style" && typeof value === "object" && value !== null) {
+        element.removeAttribute("style");
+        Object.entries(value).forEach(([cssKey, cssValue]) => {
+          setStyleValue(element.style, cssKey, cssValue);
+        });
+        return;
+      }
+      if (value === false || value === undefined || value === null) {
+        element.removeAttribute(key);
+        return;
+      }
+      if (value === true) {
+        element.setAttribute(key, "");
+        return;
+      }
+      if (typeof value === "string" && context.templateEngine.hasExpressions(value)) {
+        this.setupReactiveAttribute(element, key, value, context);
+        return;
+      }
+      element.setAttribute(key, String(value));
+    });
+  }
+  applyDirections(element, oldDirections, newDirections, context) {
+    if (newDirections && "show" in newDirections) {
+      element.style.display = newDirections.show ? "" : "none";
+    } else if (oldDirections && "show" in oldDirections) {
+      element.style.display = "";
+    }
+    if (newDirections?.model) {
+      this.setupTwoWayBinding(element, newDirections.model, context);
+    }
+  }
+  updateChildren(element, oldChildren, newChildren, context) {
+    if (this.hasKeyedChildren(oldChildren, newChildren)) {
+      this.updateKeyedChildren(element, oldChildren, newChildren, context);
+      return;
+    }
+    const sharedLength = Math.min(oldChildren.length, newChildren.length);
+    for (let index = 0;index < sharedLength; index += 1) {
+      const childNode = element.childNodes[index];
+      if (!childNode) {
+        element.appendChild(context.renderer.mount(newChildren[index], context));
+        continue;
+      }
+      context.renderer.patch(oldChildren[index], newChildren[index], childNode, context);
+    }
+    for (let index = sharedLength;index < newChildren.length; index += 1) {
+      element.appendChild(context.renderer.mount(newChildren[index], context));
+    }
+    for (let index = oldChildren.length - 1;index >= newChildren.length; index -= 1) {
+      const childNode = element.childNodes[index];
+      if (childNode) {
+        context.renderer.unmount(oldChildren[index], childNode, context);
+        if (childNode.parentNode === element) {
+          element.removeChild(childNode);
+        }
+      }
+    }
+  }
+  updateKeyedChildren(element, oldChildren, newChildren, context) {
+    const oldEntries = oldChildren.map((vnode, index) => ({
+      vnode,
+      node: element.childNodes[index],
+      index
+    }));
+    const keyedOldEntries = new Map;
+    const usedOldIndexes = new Set;
+    oldEntries.forEach((entry) => {
+      const key = this.getVNodeKey(entry.vnode);
+      if (key !== undefined && entry.node) {
+        keyedOldEntries.set(key, {
+          vnode: entry.vnode,
+          node: entry.node,
+          index: entry.index
+        });
+      }
+    });
+    newChildren.forEach((newChild, newIndex) => {
+      const key = this.getVNodeKey(newChild);
+      const oldEntry = key === undefined ? undefined : keyedOldEntries.get(key);
+      let nextNode;
+      if (oldEntry) {
+        nextNode = context.renderer.patch(oldEntry.vnode, newChild, oldEntry.node, context);
+        usedOldIndexes.add(oldEntry.index);
+      } else {
+        nextNode = context.renderer.mount(newChild, context);
+      }
+      const referenceNode = element.childNodes[newIndex] ?? null;
+      if (nextNode !== referenceNode) {
+        element.insertBefore(nextNode, referenceNode);
+      }
+    });
+    oldEntries.forEach((entry) => {
+      if (!entry.node || usedOldIndexes.has(entry.index)) {
+        return;
+      }
+      context.renderer.unmount(entry.vnode, entry.node, context);
+      if (entry.node.parentNode === element) {
+        element.removeChild(entry.node);
+      }
+    });
+  }
+  hasKeyedChildren(oldChildren, newChildren) {
+    return [...oldChildren, ...newChildren].some((child) => this.getVNodeKey(child) !== undefined);
+  }
+  getVNodeKey(vnode) {
+    if (typeof vnode === "string") {
+      return;
+    }
+    return vnode.key;
+  }
+  collectListeners(vnode) {
+    const listeners = {};
+    Object.entries(vnode.props ?? {}).forEach(([key, value]) => {
+      if (isEventProp(key) && typeof value === "function") {
+        listeners[eventNameFromProp(key)] = value;
+      }
+    });
+    return {
+      ...listeners,
+      ...vnode.listeners ?? {}
+    };
+  }
+  updateListeners(element, oldListeners, newListeners) {
+    const store = this.listeners.get(element) ?? new Map;
+    const oldKeys = new Set(Object.keys(oldListeners));
+    const newKeys = new Set(Object.keys(newListeners));
+    oldKeys.forEach((event) => {
+      if (!newKeys.has(event) || oldListeners[event] !== newListeners[event]) {
+        const stored = store.get(event);
+        if (stored) {
+          element.removeEventListener(stored.eventName, stored.listener);
+          store.delete(event);
+        }
+      }
+    });
+    newKeys.forEach((event) => {
+      if (!oldKeys.has(event) || oldListeners[event] !== newListeners[event]) {
+        const { eventName, modifiers } = parseEventName(event);
+        const listener = wrapEventHandler(newListeners[event], modifiers);
+        element.addEventListener(eventName, listener);
+        store.set(event, { eventName, listener });
+      }
+    });
+    this.listeners.set(element, store);
+  }
+  setupReactiveAttribute(element, attrName, attrValue, context) {
+    const effectRef = effect(() => {
+      element.setAttribute(attrName, context.templateEngine.evaluateTemplateValue(attrValue));
+    });
+    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);
+    this.effects.set(element, effects);
+  }
+}
+
+// lib/core/template.ts
+class TemplateEngine {
+  state;
+  bindings = [];
+  templateRegex = /{{(.*?)}}/g;
+  constructor(state) {
+    this.state = state;
+    if (!state || typeof state !== "object") {
+      throw new Error("TemplateEngine requires a valid state object");
+    }
+  }
+  parseTemplate(text) {
+    if (typeof text !== "string") {
+      text = String(text);
+    }
+    const textNode = document.createTextNode("");
+    this.templateRegex.lastIndex = 0;
+    const matches = Array.from(text.matchAll(this.templateRegex));
+    if (matches && matches.length > 0) {
+      this.setupReactiveBindings(textNode, text, matches);
+    } else {
+      textNode.textContent = text;
+    }
+    return textNode;
+  }
+  setupReactiveBindings(node, originalText, matches) {
+    const keys = new Set;
+    const initialText = this.evaluateTemplate(originalText, matches, keys);
+    node.textContent = initialText;
+    const effectFn = effect(() => {
+      try {
+        const updatedText = this.evaluateTemplate(originalText, matches, keys);
+        if (node.textContent !== updatedText) {
+          node.textContent = updatedText;
+        }
+      } catch (error) {
+        console.error("Template update error:", error);
+        node.textContent = `Error: ${error instanceof Error ? error.message : "Unknown error"}`;
+      }
+    });
+    this.bindings.push({
+      node,
+      originalText,
+      effect: effectFn
+    });
+  }
+  evaluateTemplate(text, matches, keys) {
+    let result = text;
+    matches.forEach((match) => {
+      const key = match[1]?.trim();
+      if (key) {
+        keys.add(key);
+        const value = this.getValueFromState(key);
+        const displayValue = value === undefined || value === null ? "" : String(value);
+        result = result.replace(match[0], displayValue);
+      }
+    });
+    return result;
+  }
+  getValueFromState(keyPath) {
+    if (!keyPath)
+      return;
+    const keys = keyPath.split(".");
+    let value = this.state;
+    for (const key of keys) {
+      if (!value || typeof value !== "object") {
+        return;
+      }
+      value = value[key];
+    }
+    return value;
+  }
+  clearBindings() {
+    this.bindings.forEach((binding) => {
+      binding.effect.active = false;
+    });
+    this.bindings = [];
+  }
+  getBindingCount() {
+    return this.bindings.length;
+  }
+  hasExpressions(text) {
+    this.templateRegex.lastIndex = 0;
+    return this.templateRegex.test(text);
+  }
+  extractKeys(text) {
+    const keys = [];
+    let match;
+    const regex = new RegExp(this.templateRegex, "g");
+    while ((match = regex.exec(text)) !== null) {
+      const key = match[1]?.trim();
+      if (key) {
+        keys.push(key);
+      }
+    }
+    return keys;
+  }
+  evaluateTemplateValue(text) {
+    this.templateRegex.lastIndex = 0;
+    const matches = Array.from(text.matchAll(this.templateRegex));
+    if (!matches || matches.length === 0) {
+      return text;
+    }
+    const keys = new Set;
+    return this.evaluateTemplate(text, matches, keys);
+  }
+}
+
+// lib/core/component/base.ts
+class Component {
+  props;
+  vnode = null;
+  el = null;
+  renderer = new RendererContext;
+  templateEngine;
+  childComponents = new Set;
+  eventListeners = {};
+  updateEffect;
+  appContext = null;
+  styleManager;
+  state;
+  mounted = false;
+  constructor(props = {}) {
+    this.props = props;
+    this.styleManager = new StyleManager;
+    this.state = reactive(this.initState() ?? {});
+    this.templateEngine = new TemplateEngine(this.state);
+    this.initStyles();
+    this.updateEffect = effect(() => {
+      this.trackStateProperties();
+      if (this.mounted) {
+        this.update();
+      }
+    });
+  }
+  mount(container) {
+    if (!container || !(container instanceof HTMLElement)) {
+      throw new Error("Invalid container element");
+    }
+    try {
+      container.appendChild(this.mountToNode());
+    } catch (error) {
+      console.error("组件渲染错误:", error);
+      throw error;
+    }
+  }
+  mountToNode() {
+    if (this.mounted && this.el) {
+      return this.el;
+    }
+    this.beforeMount();
+    this.vnode = this.render();
+    this.el = this.renderer.mount(this.vnode, this.createRenderContext());
+    this.mounted = true;
+    this.onMounted();
+    return this.el;
+  }
+  update() {
+    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);
+    }
+  }
+  unmount() {
+    if (!this.mounted) {
+      return;
+    }
+    this.beforeUnmount();
+    if (this.vnode && this.el) {
+      this.renderer.unmount(this.vnode, this.el, this.createRenderContext());
+    }
+    this.childComponents.clear();
+    this.templateEngine.clearBindings();
+    this.styleManager.clearStyles();
+    stop(this.updateEffect);
+    if (this.el?.parentNode) {
+      this.el.parentNode.removeChild(this.el);
+    }
+    this.el = null;
+    this.vnode = null;
+    this.mounted = false;
+    this.onUnmounted();
+  }
+  setProps(props) {
+    this.props = {
+      ...this.props,
+      ...props
+    };
+    if (this.mounted) {
+      this.update();
+    }
+  }
+  setState(state) {
+    Object.assign(this.state, state);
+  }
+  setAppContext(context) {
+    this.appContext = context;
+    this.childComponents.forEach((child) => {
+      child.setAppContext?.(context);
+    });
+  }
+  getElement() {
+    return this.el;
+  }
+  beforeMount() {}
+  onMounted() {}
+  beforeUpdate() {}
+  onUpdated() {}
+  beforeUnmount() {}
+  onUnmounted() {}
+  getContext() {
+    return this.appContext;
+  }
+  get router() {
+    return this.getRouterFrom(this.appContext) ?? this.getRouterFromGlobalApp();
+  }
+  emit(eventName, ...args) {
+    this.eventListeners[eventName]?.forEach((listener) => {
+      listener(...args);
+    });
+  }
+  on(eventName, listener) {
+    if (!this.eventListeners[eventName]) {
+      this.eventListeners[eventName] = new Set;
+    }
+    this.eventListeners[eventName].add(listener);
+  }
+  off(eventName, listener) {
+    this.eventListeners[eventName]?.delete(listener);
+  }
+  createRenderContext() {
+    return {
+      appContext: this.appContext,
+      templateEngine: this.templateEngine,
+      renderer: this.renderer,
+      slots: this.collectSlots(),
+      registerChild: (component) => {
+        this.childComponents.add(component);
+        component.setAppContext?.(this.appContext);
+      }
+    };
+  }
+  collectSlots() {
+    const slots = { default: [] };
+    const children = this.props.children ?? [];
+    children.forEach((child) => {
+      const slotName = this.getSlotName(child);
+      if (!slots[slotName]) {
+        slots[slotName] = [];
+      }
+      slots[slotName].push(this.normalizeSlotChild(child));
+    });
+    return slots;
+  }
+  getSlotName(child) {
+    if (typeof child === "string") {
+      return "default";
+    }
+    return "slot" in child && typeof child.slot === "string" ? child.slot : "default";
+  }
+  normalizeSlotChild(child) {
+    if (typeof child === "string" || !("slot" in child)) {
+      return child;
+    }
+    const clone = { ...child };
+    delete clone.slot;
+    return clone;
+  }
+  trackStateProperties() {
+    this.trackReactiveValue(this.state, new Set);
+  }
+  getRouterFrom(value) {
+    if (!value || typeof value !== "object" || !("router" in value)) {
+      return;
+    }
+    return value.router;
+  }
+  getRouterFromGlobalApp() {
+    const globalApp = globalThis.__APP__;
+    return this.getRouterFrom(globalApp);
+  }
+  trackReactiveValue(value, seen) {
+    if (!value || typeof value !== "object" || seen.has(value)) {
+      return;
+    }
+    seen.add(value);
+    if (Array.isArray(value)) {
+      value.length;
+    }
+    Object.keys(value).forEach((key) => {
+      const child = value[key];
+      this.trackReactiveValue(child, seen);
+    });
+  }
+}
+// lib/router/instance.ts
+var router = null;
+function setRouter(r) {
+  if (!r || !(r instanceof Router)) {
+    throw new Error("Invalid router instance");
+  }
+  router = r;
+}
+
+// lib/router/matcher.ts
+function normalizePath(path) {
+  if (!path.startsWith("/")) {
+    return `/${path}`;
+  }
+  return path || "/";
+}
+function matchRoute(routes, path) {
+  const normalizedPath = normalizePath(path.split("?")[0]);
+  for (const route of routes) {
+    const params = matchRoutePath(route.path, normalizedPath);
+    if (params) {
+      return { route, params };
+    }
+  }
+  const fallback = routes.find((route) => route.path === "/");
+  return fallback ? { route: fallback, params: {} } : null;
+}
+function matchRoutePath(routePath, currentPath) {
+  const routeSegments = getPathSegments(routePath);
+  const currentSegments = getPathSegments(currentPath);
+  if (routeSegments.length !== currentSegments.length) {
+    return null;
+  }
+  const params = {};
+  for (let index = 0;index < routeSegments.length; index += 1) {
+    const routeSegment = routeSegments[index];
+    const currentSegment = currentSegments[index];
+    if (routeSegment.startsWith(":")) {
+      const paramName = routeSegment.slice(1);
+      if (!paramName) {
+        return null;
+      }
+      params[decodeURIComponent(paramName)] = decodeURIComponent(currentSegment);
+      continue;
+    }
+    if (routeSegment !== currentSegment) {
+      return null;
+    }
+  }
+  return params;
+}
+function getPathSegments(path) {
+  const normalizedPath = normalizePath(path);
+  if (normalizedPath === "/") {
+    return [];
+  }
+  return normalizedPath.split("/").filter(Boolean);
+}
+
+// lib/router/history.ts
+function createRouterHref(path, mode, base) {
+  const normalizedPath = normalizePath(path);
+  const fullPath = base === "/" ? normalizedPath : base + normalizedPath;
+  return mode === "hash" ? `#${fullPath}` : fullPath;
+}
+function getBrowserLocation(mode, base) {
+  let path;
+  let fullPath;
+  if (mode === "history") {
+    fullPath = window.location.pathname + window.location.search;
+    path = window.location.pathname;
+  } else {
+    const hash = window.location.hash;
+    fullPath = hash || "#/";
+    path = fullPath.startsWith("#") ? fullPath.slice(1) : fullPath;
+  }
+  if (path.startsWith(base) && base !== "/" && path !== "/") {
+    path = path.slice(base.length);
+  }
+  path = normalizePath(path);
+  return {
+    path,
+    fullPath,
+    query: parseQuery(mode === "hash" ? path.split("?")[1] ?? "" : window.location.search),
+    params: {}
+  };
+}
+function navigateBrowser(path, replace, mode, base) {
+  const normalizedPath = normalizePath(path);
+  const fullPath = base === "/" ? normalizedPath : base + normalizedPath;
+  if (mode === "history") {
+    if (replace) {
+      window.history.replaceState({}, "", fullPath);
+    } else {
+      window.history.pushState({}, "", fullPath);
+    }
+    return;
+  }
+  if (replace) {
+    const href = window.location.href.split("#")[0];
+    window.location.replace(`${href}#${fullPath}`);
+    return;
+  }
+  window.location.hash = fullPath;
+}
+function parseQuery(queryString) {
+  const query = {};
+  const normalizedQuery = queryString.startsWith("?") ? queryString.slice(1) : queryString;
+  if (!normalizedQuery) {
+    return query;
+  }
+  normalizedQuery.split("&").forEach((param) => {
+    const [key, value] = param.split("=");
+    if (key) {
+      query[decodeURIComponent(key)] = value ? decodeURIComponent(value) : "";
+    }
+  });
+  return query;
+}
+
+// lib/router/index.ts
+class Router {
+  currentRoute = null;
+  currentLocation = null;
+  routes = [];
+  app = null;
+  mode;
+  base;
+  routeChangeListeners = [];
+  removeWindowListener;
+  constructor(options) {
+    const resolvedOptions = Array.isArray(options) ? { routes: options } : options;
+    this.routes = resolvedOptions.routes || [];
+    this.mode = resolvedOptions.mode || "history";
+    this.base = resolvedOptions.base || "/";
+    this.validateRoutes();
+    this.initEvents();
+    this.resolveCurrentRoute();
+  }
+  install(app) {
+    this.app = app;
+    app.router = this;
+    setRouter(this);
+    const context = app.getContext();
+    context.router = this;
+    this.resolveCurrentRoute();
+  }
+  push(path) {
+    this.navigate(path, false);
+  }
+  replace(path) {
+    this.navigate(path, true);
+  }
+  forward() {
+    window.history.forward();
+  }
+  back() {
+    window.history.back();
+  }
+  go(delta) {
+    window.history.go(delta);
+  }
+  getCurrentRoute() {
+    if (!this.currentLocation) {
+      this.resolveCurrentRoute();
+    }
+    return this.currentLocation;
+  }
+  getCurrentRouteRecord() {
+    if (!this.currentRoute) {
+      this.resolveCurrentRoute();
+    }
+    return this.currentRoute;
+  }
+  onRouteChange(listener) {
+    this.routeChangeListeners.push(listener);
+    return () => {
+      const index = this.routeChangeListeners.indexOf(listener);
+      if (index > -1) {
+        this.routeChangeListeners.splice(index, 1);
+      }
+    };
+  }
+  getRoutes() {
+    return [...this.routes];
+  }
+  addRoute(route) {
+    if (this.routes.some((item) => item.path === route.path)) {
+      throw new Error(`Route already exists: ${route.path}`);
+    }
+    this.routes.push(route);
+    const location = this.getCurrentLocation();
+    if (location.path === route.path) {
+      this.handleRouteChange();
+    }
+  }
+  createHref(path) {
+    return createRouterHref(path, this.mode, this.base);
+  }
+  destroy() {
+    this.removeWindowListener?.();
+    this.removeWindowListener = undefined;
+    if (this.app?.router === this) {
+      this.app.router = undefined;
+    }
+    this.app = null;
+  }
+  navigate(path, replace) {
+    if (!path || typeof path !== "string") {
+      throw new Error("Path must be a non-empty string");
+    }
+    navigateBrowser(path, replace, this.mode, this.base);
+    this.handleRouteChange();
+  }
+  validateRoutes() {
+    if (!Array.isArray(this.routes)) {
+      throw new Error("Router routes must be an array");
+    }
+    const paths = new Set;
+    this.routes.forEach((route) => {
+      if (paths.has(route.path)) {
+        throw new Error(`Duplicate route path: ${route.path}`);
+      }
+      paths.add(route.path);
+    });
+  }
+  initEvents() {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const eventName = this.mode === "history" ? "popstate" : "hashchange";
+    const listener = () => {
+      this.handleRouteChange();
+    };
+    window.addEventListener(eventName, listener);
+    this.removeWindowListener = () => {
+      window.removeEventListener(eventName, listener);
+    };
+  }
+  handleRouteChange() {
+    const fromLocation = this.currentLocation;
+    const nextLocation = this.resolveCurrentRoute();
+    if (!this.isSameLocation(fromLocation, nextLocation)) {
+      this.triggerRouteChangeListeners(nextLocation, fromLocation);
+    }
+  }
+  resolveCurrentRoute() {
+    const location = this.getCurrentLocation();
+    const match = matchRoute(this.routes, location.path);
+    const route = match?.route ?? null;
+    this.currentRoute = route;
+    this.currentLocation = {
+      ...location,
+      params: match?.params ?? {},
+      name: route?.name,
+      meta: route?.meta
+    };
+    return this.currentLocation;
+  }
+  getCurrentLocation() {
+    return getBrowserLocation(this.mode, this.base);
+  }
+  isSameLocation(from, to) {
+    return from?.fullPath === to?.fullPath && from?.name === to?.name;
+  }
+  triggerRouteChangeListeners(to, from) {
+    this.routeChangeListeners.forEach((listener) => {
+      try {
+        listener(to, from);
+      } catch (error) {
+        console.error("Route change listener error:", error);
+      }
+    });
+  }
+}
+
+class RouterLink extends Component {
+  unsubscribe;
+  initState() {
+    const router2 = this.router;
+    return {
+      currentPath: router2?.getCurrentRoute()?.path ?? window.location.pathname
+    };
+  }
+  initStyles() {}
+  onMounted() {
+    const router2 = this.router;
+    this.unsubscribe = router2?.onRouteChange((to) => {
+      this.state.currentPath = to.path;
+    });
+  }
+  onUnmounted() {
+    this.unsubscribe?.();
+  }
+  render() {
+    const router2 = this.router;
+    const activeClass = this.props.activeClass ?? "active";
+    const isActive = this.state.currentPath === this.props.to;
+    const className = [this.props.className, isActive ? activeClass : undefined].filter(Boolean).join(" ");
+    return {
+      tag: "a",
+      props: {
+        href: router2?.createHref(this.props.to) ?? this.props.to,
+        className
+      },
+      listeners: {
+        click: (event) => {
+          event.preventDefault();
+          if (this.props.replace) {
+            router2?.replace(this.props.to);
+          } else {
+            router2?.push(this.props.to);
+          }
+        }
+      },
+      children: this.props.children && this.props.children.length > 0 ? this.props.children : [this.props.to]
+    };
+  }
+}
+
+class RouterView extends Component {
+  unsubscribe;
+  initState() {
+    const router2 = this.router;
+    return {
+      route: router2?.getCurrentRoute() ?? null,
+      record: router2?.getCurrentRouteRecord() ?? null
+    };
+  }
+  initStyles() {}
+  onMounted() {
+    const router2 = this.router;
+    this.unsubscribe = router2?.onRouteChange((to) => {
+      this.state.route = to;
+      this.state.record = router2.getCurrentRouteRecord();
+    });
+  }
+  onUnmounted() {
+    this.unsubscribe?.();
+  }
+  render() {
+    const routeRecord = this.state.record ?? this.router?.getCurrentRouteRecord();
+    return {
+      tag: "div",
+      props: { "data-router-view": "" },
+      children: routeRecord ? [{ component: routeRecord.component }] : []
+    };
+  }
+}
+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 };
+
+//# debugId=97822D95A36A4F3E64756E2164756E21
+//# sourceMappingURL=index-3j2jsdpc.js.map