@v-ibe/core 0.1.0

package/dist/jsx/dynamic/props-handler.js

@@ -0,0 +1,281 @@
+import { isSignal } from "../../reactivity/signals/signal.js";
+import { effect } from "../../reactivity/signals/effect.js";
+import { isCustomElement } from "./dom-utils.js";
+function bindProps(el, props, behaviorManager) {
+  let domProps = props;
+  if (behaviorManager) {
+    const consumed = behaviorManager.attachBehaviors(el, props);
+    if (consumed.size > 0) {
+      domProps = Object.fromEntries(
+        Object.entries(props).filter(([key]) => !consumed.has(key))
+      );
+    }
+  }
+  Object.entries(domProps).forEach(([key, value]) => {
+    bindSingleProp(el, key, value);
+  });
+}
+function bindSingleProp(el, key, value) {
+  if (key === "ref") {
+    bindRefProp(el, value);
+    return;
+  }
+  if (isEventProp(key)) {
+    bindEventProp(el, key, value);
+    return;
+  }
+  if (key === "className") {
+    bindClassNameProp(el, value);
+    return;
+  }
+  if (key === "style") {
+    bindStyleProp(el, value);
+    return;
+  }
+  if (isSignal(value)) {
+    bindSignalProp(el, key, value);
+  } else if (typeof value === "function") {
+    bindComputedProp(el, key, value);
+  } else {
+    bindStaticProp(el, key, value);
+  }
+}
+function bindRefProp(el, value) {
+  if (typeof value === "function") {
+    value(el);
+  } else if (isSignal(value)) {
+    value.set(el);
+  } else if (value && typeof value === "object" && "current" in value) {
+    value.current = el;
+  }
+}
+function isEventProp(key) {
+  return key.startsWith("on") && key.length > 2;
+}
+function bindEventProp(el, key, value) {
+  const eventName = key.substring(2).toLowerCase();
+  if (typeof value === "function") {
+    el.addEventListener(eventName, value);
+  }
+}
+function bindClassNameProp(el, value) {
+  if (isSignal(value)) {
+    effect(
+      () => {
+        const currentValue = getSignalValue(value);
+        applyClassName(el, currentValue);
+      }
+    );
+  } else if (typeof value === "function") {
+    effect(
+      () => {
+        const resolvedValue = value();
+        applyClassName(el, resolvedValue);
+      }
+    );
+  } else {
+    applyClassName(el, value);
+  }
+}
+function bindStyleProp(el, value) {
+  if (isSignal(value)) {
+    effect(
+      () => {
+        const currentValue = getSignalValue(value);
+        applyStyle(el, currentValue);
+      }
+    );
+  } else if (typeof value === "function") {
+    effect(
+      () => {
+        const resolvedValue = value();
+        applyStyle(el, resolvedValue);
+      }
+    );
+  } else {
+    applyStyle(el, value);
+  }
+}
+function bindSignalProp(el, key, signal) {
+  if (isCustomElement(el)) {
+    el[key] = signal;
+  } else {
+    effect(
+      () => {
+        const currentValue = getSignalValue(signal);
+        setElementProperty(el, key, currentValue);
+      }
+    );
+  }
+}
+function bindComputedProp(el, key, fn) {
+  effect(
+    () => {
+      const resolvedValue = fn();
+      if (isCustomElement(el)) {
+        el[key] = resolvedValue;
+      } else {
+        setElementProperty(el, key, resolvedValue);
+      }
+    }
+  );
+}
+function bindStaticProp(el, key, value) {
+  if (isCustomElement(el)) {
+    el[key] = value;
+  } else {
+    setElementProperty(el, key, value);
+  }
+}
+function getSignalValue(signal) {
+  try {
+    return typeof signal.get === "function" ? signal.get() : signal.valueOf?.() ?? signal;
+  } catch {
+    return String(signal);
+  }
+}
+function applyClassName(el, value) {
+  let classString = "";
+  if (typeof value === "string") {
+    classString = value;
+  } else if (Array.isArray(value)) {
+    classString = value.filter((cls) => cls != null && cls !== false && cls !== "").join(" ");
+  } else if (typeof value === "object" && value !== null) {
+    classString = Object.entries(value).filter(([className, condition]) => {
+      if (typeof condition === "function") {
+        return condition();
+      }
+      if (isSignal(condition)) {
+        return getSignalValue(condition);
+      }
+      return Boolean(condition);
+    }).map(([className]) => className).join(" ");
+  }
+  if (classString.trim()) {
+    el.setAttribute("class", classString.trim());
+  } else {
+    el.removeAttribute("class");
+  }
+}
+function applyStyle(el, value) {
+  const htmlEl = el;
+  if (typeof value === "string") {
+    htmlEl.style.cssText = value;
+  } else if (typeof value === "object" && value !== null) {
+    htmlEl.style.cssText = "";
+    Object.entries(value).forEach(([property, propValue]) => {
+      if (propValue == null || propValue === "") {
+        htmlEl.style.removeProperty(kebabCase(property));
+      } else {
+        const cssProperty = kebabCase(property);
+        const cssValue = typeof propValue === "number" ? addUnitIfNeeded(property, propValue) : String(propValue);
+        htmlEl.style.setProperty(cssProperty, cssValue);
+      }
+    });
+  } else if (value == null) {
+    htmlEl.style.cssText = "";
+  }
+}
+function kebabCase(str) {
+  return str.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function addUnitIfNeeded(property, value) {
+  const pxProperties = /* @__PURE__ */ new Set([
+    "width",
+    "height",
+    "top",
+    "left",
+    "right",
+    "bottom",
+    "margin",
+    "marginTop",
+    "marginRight",
+    "marginBottom",
+    "marginLeft",
+    "padding",
+    "paddingTop",
+    "paddingRight",
+    "paddingBottom",
+    "paddingLeft",
+    "fontSize",
+    "lineHeight",
+    "borderWidth",
+    "borderRadius",
+    "maxWidth",
+    "maxHeight",
+    "minWidth",
+    "minHeight"
+  ]);
+  return pxProperties.has(property) ? `${value}px` : String(value);
+}
+const BOOLEAN_ATTRIBUTES = /* @__PURE__ */ new Set([
+  "autofocus",
+  "checked",
+  "defaultchecked",
+  "defer",
+  "disabled",
+  "hidden",
+  "loop",
+  "multiple",
+  "muted",
+  "open",
+  "readonly",
+  "required",
+  "reversed",
+  "selected",
+  "autoplay",
+  "controls",
+  "draggable",
+  "contenteditable",
+  "spellcheck",
+  "translate"
+]);
+const PROPERTY_NAMES = /* @__PURE__ */ new Set([
+  "value",
+  "checked",
+  "selected",
+  "disabled",
+  "readOnly",
+  "multiple",
+  "draggable",
+  "hidden",
+  "innerHTML",
+  "textContent",
+  "className"
+]);
+function setElementProperty(el, key, value) {
+  const htmlEl = el;
+  if (key === "class") {
+    key = "className";
+  }
+  if (BOOLEAN_ATTRIBUTES.has(key.toLowerCase())) {
+    if (value === false || value == null || value === "") {
+      el.removeAttribute(key);
+      if (key in htmlEl) {
+        htmlEl[key] = false;
+      }
+    } else {
+      el.setAttribute(key, key);
+      if (key in htmlEl) {
+        htmlEl[key] = true;
+      }
+    }
+    return;
+  }
+  if (PROPERTY_NAMES.has(key) || key in htmlEl) {
+    try {
+      htmlEl[key] = value;
+    } catch (e) {
+      el.setAttribute(key, String(value));
+    }
+    return;
+  }
+  if (value == null || value === false) {
+    el.removeAttribute(key);
+  } else {
+    el.setAttribute(key, String(value));
+  }
+}
+export {
+  bindProps
+};

package/dist/jsx/dynamic/text-renderer.d.ts

@@ -0,0 +1,2 @@
+import { ChildValue } from '../types.js';
+export declare function renderTextChild(parent: Element, child: ChildValue): void;

package/dist/jsx/jsx-dev-runtime.d.ts

@@ -0,0 +1,2 @@
+import { jsx, Fragment } from './jsx-runtime';
+export { jsx, jsx as jsxs, jsx as jsxDEV, Fragment };

package/dist/jsx/jsx-runtime.d.ts

@@ -0,0 +1,3 @@
+import { Fragment } from './types';
+declare function jsx(..._args: any[]): any;
+export { Fragment, jsx, jsx as jsxs };

package/dist/jsx/types.d.ts

@@ -0,0 +1,35 @@
+import { Signal } from '../reactivity/signals/signal';
+export type PropValue = string | number | boolean | Function | Signal<any> | PropObject | PropArray | ClassNameProp | StyleProp | null | undefined;
+export type PropObject = {
+    [key: string]: string | number | boolean | null | undefined;
+};
+export type PropArray = (string | number | boolean | null | undefined)[];
+export type ClassNameProp = string | string[] | {
+    [className: string]: boolean | Signal<boolean> | (() => boolean);
+} | Signal<string | string[] | {
+    [className: string]: boolean;
+}> | (() => string | string[] | {
+    [className: string]: boolean;
+});
+export type StyleProp = string | {
+    [property: string]: string | number | null | undefined;
+} | Signal<string | {
+    [property: string]: string | number | null | undefined;
+}> | (() => string | {
+    [property: string]: string | number | null | undefined;
+});
+export type EventHandler<T = Event> = (event: T) => void;
+export type CustomEventHandler<T = any> = (data: T) => void;
+export type ChildValue = string | number | Element | Function | Signal<any> | ChildValue[] | null | undefined | boolean;
+export interface ComponentProps {
+    className?: ClassNameProp;
+    style?: StyleProp;
+    key?: string | number;
+    onClick?: EventHandler<MouseEvent>;
+    onInput?: EventHandler<InputEvent>;
+    onChange?: EventHandler<Event>;
+    onSubmit?: EventHandler<SubmitEvent>;
+    [eventName: `on${string}`]: CustomEventHandler<any> | EventHandler<any> | undefined;
+    [propName: string]: PropValue;
+}
+export declare const Fragment: unique symbol;

package/dist/jsx/types.js

@@ -0,0 +1,4 @@
+const Fragment = Symbol.for("v-ibe.fragment");
+export {
+  Fragment
+};

package/dist/jsx-dev-runtime.d.ts

@@ -0,0 +1,2 @@
+export * from './jsx/jsx-dev-runtime'
+export {}

package/dist/jsx-dev-runtime.js

@@ -0,0 +1,8 @@
+import { jsx, jsx as jsx2, jsx as jsx3 } from "./jsx-runtime.js";
+import { Fragment } from "./jsx/types.js";
+export {
+  Fragment,
+  jsx,
+  jsx2 as jsxDEV,
+  jsx3 as jsxs
+};

package/dist/jsx-runtime.d.ts

@@ -0,0 +1,2 @@
+export * from './jsx/jsx-runtime'
+export {}

package/dist/jsx-runtime.js

@@ -0,0 +1,11 @@
+import { Fragment } from "./jsx/types.js";
+function jsx(..._args) {
+  throw new Error(
+    "[v-ibe] jsx() should never be called directly. Ensure jsxContextualPlugin is enabled in your vite.config.ts"
+  );
+}
+export {
+  Fragment,
+  jsx,
+  jsx as jsxs
+};

package/dist/reactivity/__tests__/context-stack.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/reactivity/__tests__/nested-effects-untrack.test.d.ts

@@ -0,0 +1,22 @@
+/**
+ * TEST: Bug de suscripciones en effects anidados dentro de untrack
+ *
+ * Este test reproduce el bug encontrado en RouteView con Shows anidados:
+ *
+ * ESCENARIO:
+ * - Effect padre (L0) crea children dentro de untrack()
+ * - Los children contienen múltiples effects (L1)
+ * - Cada effect L1 debería tener su propia suscripción a la señal
+ *
+ * BUG:
+ * - Con dos stacks separados (computationStack y contextStack),
+ *   el contextStack tiene prioridad
+ * - Cuando untrack() pone tracking=false en contextStack, los effects hijos
+ *   leen la computation del padre en lugar de la propia
+ * - Resultado: Solo 1 de N effects queda suscrito
+ *
+ * ESPERADO:
+ * - Cada effect debe tener su propia suscripción
+ * - Cuando la señal cambia, TODOS los effects deben re-ejecutarse
+ */
+export {};

package/dist/reactivity/context-scope.d.ts

@@ -0,0 +1,57 @@
+import { Subscriber } from './types';
+/**
+ * ContextScope - RAII wrapper para gestionar contextos reactivos
+ *
+ * Garantiza que el contexto se restaure automáticamente cuando el scope
+ * sale de su bloque, incluso si hay errores.
+ *
+ * Usa el stack unificado de ReactiveContext internamente.
+ *
+ * USO CON ES2024 (using statement):
+ * ```typescript
+ * {
+ *   using scope = new ContextScope(subscriber, true);
+ *   // ... código que usa el contexto ...
+ * } // ← scope se limpia automáticamente aquí
+ * ```
+ *
+ * USO SIN ES2024 (helper function):
+ * ```typescript
+ * withContext(subscriber, true, () => {
+ *   // ... código que usa el contexto ...
+ * });
+ * ```
+ */
+export declare class ContextScope {
+    private exitFn;
+    constructor(computation: Subscriber | null, tracking: boolean);
+    /**
+     * Libera el contexto manualmente.
+     * Idempotente: puede llamarse múltiples veces sin efecto.
+     */
+    dispose(): void;
+    /**
+     * ES2024: Auto-cleanup cuando el objeto sale de scope.
+     * Se llama automáticamente cuando se usa con `using`.
+     */
+    [Symbol.dispose](): void;
+}
+/**
+ * Helper function para usar ContextScope sin ES2024.
+ *
+ * Garantiza que el contexto se restaure automáticamente incluso si hay errores.
+ *
+ * @param computation - La computación a establecer como contexto actual
+ * @param tracking - Si el tracking está activo
+ * @param fn - Función a ejecutar con el contexto establecido
+ * @returns El resultado de la función
+ *
+ * @example
+ * ```typescript
+ * withContext(structuralSubscriber, true, () => {
+ *   void this.sourceArray.length;
+ *   this.sourceArray._subscribe('mutation', structuralSubscriber);
+ * });
+ * ```
+ */
+export declare function withContext<T>(computation: Subscriber | null, tracking: boolean, fn: () => T): T;

package/dist/reactivity/context-scope.js

@@ -0,0 +1,35 @@
+import { reactiveContext } from "./reactive-context.js";
+class ContextScope {
+  constructor(computation, tracking) {
+    this.exitFn = reactiveContext.enter(computation, tracking, "legacy");
+  }
+  /**
+   * Libera el contexto manualmente.
+   * Idempotente: puede llamarse múltiples veces sin efecto.
+   */
+  dispose() {
+    if (this.exitFn) {
+      this.exitFn();
+      this.exitFn = null;
+    }
+  }
+  /**
+   * ES2024: Auto-cleanup cuando el objeto sale de scope.
+   * Se llama automáticamente cuando se usa con `using`.
+   */
+  [Symbol.dispose]() {
+    this.dispose();
+  }
+}
+function withContext(computation, tracking, fn) {
+  const scope = new ContextScope(computation, tracking);
+  try {
+    return fn();
+  } finally {
+    scope.dispose();
+  }
+}
+export {
+  ContextScope,
+  withContext
+};

package/dist/reactivity/decorators/__tests__/ctx-integration.test.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Test de integración para @Ctx con el ciclo de vida completo
+ * Simula exactamente lo que pasa en el navegador
+ */
+export {};

package/dist/reactivity/decorators/__tests__/ctx-loop.test.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Test para reproducir el bug de loop infinito con @Ctx
+ *
+ * El bug ocurre cuando:
+ * 1. Un RouteView usa @Ctx navigationLevel
+ * 2. Hay RouteViews anidados (padre e hijo)
+ * 3. El hijo busca $navigationLevel del padre y crea un derived
+ * 4. Algo en esta cadena causa un loop infinito
+ */
+export {};

package/dist/reactivity/decorators/__tests__/state-intelligent.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/reactivity/decorators/computed.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @Computed es un decorador para getters que los convierte en señales computadas.
+ * El valor se calcula la primera vez que se accede y se memoriza.
+ * Se recalcula automáticamente solo cuando sus dependencias (@State) cambian.
+ */
+export declare function Computed<This extends object, Value>(target: (this: This) => Value, context: ClassGetterDecoratorContext<This, Value>): (this: This) => Value;

package/dist/reactivity/decorators/computed.js

@@ -0,0 +1,17 @@
+import { computed } from "../signals/computed.js";
+function Computed(target, context) {
+  if (context.kind !== "getter") {
+    throw new Error("@Computed solo se puede aplicar a getters de clase.");
+  }
+  const signalKey = Symbol(`computed_signal_${String(context.name)}`);
+  return function() {
+    if (!this[signalKey]) {
+      const getter = target.bind(this);
+      this[signalKey] = computed(getter);
+    }
+    return this[signalKey].get();
+  };
+}
+export {
+  Computed
+};

package/dist/reactivity/decorators/create-event-decorator.d.ts

@@ -0,0 +1,5 @@
+import { Signal } from '../signals/signal';
+export declare function createEventDecorator<TParams extends any[], TValue>(eventSignalFactory: (...params: TParams) => {
+    signal: Signal<TValue>;
+    cleanup: () => void;
+}): (...params: TParams) => <This extends object>(target: undefined, context: ClassFieldDecoratorContext<This, TValue>) => (this: This, initialValue: TValue) => TValue;

package/dist/reactivity/decorators/create-event-decorator.js

@@ -0,0 +1,28 @@
+function createEventDecorator(eventSignalFactory) {
+  return function(...params) {
+    return function(target, context) {
+      if (context.kind !== "field") {
+        throw new Error("Solo se puede aplicar a campos de clase.");
+      }
+      const signalKey = Symbol(`event_signal_${String(context.name)}`);
+      return function(initialValue) {
+        if (!this[signalKey]) {
+          const eventSignal = eventSignalFactory(...params);
+          this[signalKey] = eventSignal.signal;
+          this.registerCleanup(eventSignal.cleanup);
+        }
+        Object.defineProperty(this, context.name, {
+          get: () => this[signalKey].get(),
+          set: () => {
+          },
+          enumerable: true,
+          configurable: false
+        });
+        return this[signalKey].get();
+      };
+    };
+  };
+}
+export {
+  createEventDecorator
+};

package/dist/reactivity/decorators/ctx.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @Ctx es un decorador que crea una propiedad reactiva contextual.
+ * La propiedad hereda su valor del primer componente padre que provea
+ * un contexto con el mismo nombre. Si no encuentra un padre, usa su
+ * valor inicial.
+ *
+ * @param mapper Una función opcional para transformar el valor recibido del padre.
+ */
+export declare function Ctx<This extends object, Value>(mapper?: (value: Value | undefined, self: This) => Value): (target: undefined, context: ClassFieldDecoratorContext<This, Value>) => (this: This, initialValue: Value) => Value;

package/dist/reactivity/decorators/ctx.js

@@ -0,0 +1,91 @@
+import { Signal } from "../signals/signal.js";
+import { derived } from "../signals/derived.js";
+import { AppTree } from "../../components/app-tree.js";
+function Ctx(mapper) {
+  return function(target, context) {
+    if (context.kind !== "field") {
+      throw new Error("@Ctx solo se puede aplicar a campos de clase.");
+    }
+    const propName = context.name;
+    const signalPropName = `$${String(propName)}`;
+    return function(initialValue) {
+      const self = this;
+      let finalSignal = null;
+      let isContextInitialized = false;
+      const safeMapper = (v) => mapper ? mapper(v, self) : v;
+      const initializeContext = () => {
+        if (isContextInitialized) return;
+        const currentAppNode = self.appNode;
+        const parentNode = currentAppNode?.parent;
+        const sourceSignal = AppTree.findContextSignalFor(
+          signalPropName,
+          parentNode
+        );
+        if (sourceSignal) {
+          finalSignal = derived(sourceSignal, safeMapper);
+        } else {
+          const mappedInitialValue = safeMapper(initialValue);
+          finalSignal = new Signal(mappedInitialValue);
+        }
+        Object.defineProperty(self, signalPropName, {
+          get: () => finalSignal,
+          enumerable: false,
+          // No queremos que aparezca en un `for...in`
+          configurable: true
+        });
+        const propertyDescriptor = {
+          get: () => finalSignal.get(),
+          enumerable: true,
+          configurable: true,
+          set: (newValue) => {
+            const currentAppNode2 = self.appNode;
+            const parentNode2 = currentAppNode2?.parent;
+            const sourceSignal2 = AppTree.findContextSignalFor(
+              signalPropName,
+              parentNode2
+            );
+            if (!sourceSignal2) {
+              finalSignal.set(newValue);
+            }
+          }
+        };
+        Object.defineProperty(self, propName, propertyDescriptor);
+        isContextInitialized = true;
+      };
+      if (!self._pendingContextInitializers) {
+        self._pendingContextInitializers = [];
+      }
+      self._pendingContextInitializers.push(initializeContext);
+      Object.defineProperty(self, propName, {
+        get: () => {
+          if (!isContextInitialized) {
+            throw new Error(
+              `Context property '${String(propName)}' accessed before context initialization. Make sure the component is properly initialized via JSX.`
+            );
+          }
+          return finalSignal.get();
+        },
+        enumerable: true,
+        configurable: true,
+        set: (newValue) => {
+          if (!isContextInitialized) {
+            return;
+          }
+          const currentAppNode = self.appNode;
+          const parentNode = currentAppNode?.parent;
+          const sourceSignal = AppTree.findContextSignalFor(
+            signalPropName,
+            parentNode
+          );
+          if (!sourceSignal) {
+            finalSignal.set(newValue);
+          }
+        }
+      });
+      return safeMapper(initialValue);
+    };
+  };
+}
+export {
+  Ctx
+};

package/dist/reactivity/decorators/effect.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @Effect es un decorador para métodos que los convierte en una operación reactiva.
+ * El método se ejecutará una vez inicialmente y luego cada vez que una de las
+ * señales de las que depende cambie su valor.
+ *
+ * Para componentes (BaseComponent), los efectos se difieren hasta después de la
+ * inicialización completa para que las dependencias inyectadas estén disponibles.
+ */
+export declare function Effect<This extends object>(target: (this: This, onCleanup: (cb: () => void) => void) => void, context: ClassMethodDecoratorContext<This, (this: This, onCleanup: (cb: () => void) => void) => void>): void;