@v-ibe/core 0.1.0

package/dist/reactivity/signals/reactive-array.js

@@ -0,0 +1,490 @@
+import { reactiveContext } from "../reactive-context.js";
+import { phaseScheduler } from "../phase-scheduler.js";
+import { getOrCreateReactive } from "../reactive-cache.js";
+import { OwnedArrayStrategy, DerivedArrayStrategy, FilteredArrayStrategy } from "./array-strategies.js";
+class ReactiveArray {
+  constructor(itemsOrConfig) {
+    this.subscribers = /* @__PURE__ */ new Map();
+    this.mapCache = /* @__PURE__ */ new Map();
+    if (Array.isArray(itemsOrConfig) || itemsOrConfig === void 0) {
+      const items = itemsOrConfig || [];
+      this.ownedStrategy = new OwnedArrayStrategy([...items]);
+      this.strategy = this.ownedStrategy;
+    } else {
+      const { source } = itemsOrConfig;
+      if ("transform" in itemsOrConfig) {
+        this.strategy = new DerivedArrayStrategy(
+          source,
+          itemsOrConfig.transform,
+          () => this._notifyMutation()
+        );
+      } else if ("predicate" in itemsOrConfig) {
+        this.strategy = new FilteredArrayStrategy(
+          source,
+          itemsOrConfig.predicate,
+          () => this._notifyMutation()
+        );
+      } else {
+        throw new Error("Config must contain either transform or predicate");
+      }
+    }
+  }
+  /**
+   * Registra un callback que se llama síncronamente antes de notificar subscribers
+   */
+  onChange(callback) {
+    this.onChangeCallback = callback;
+  }
+  /**
+   * Retorna el array plano subyacente (sin reactividad)
+   * Útil para serialización o interoperación con código no reactivo
+   */
+  getPlainValue() {
+    return this.strategy.getItems();
+  }
+  /**
+   * Getter reactivo para la longitud del array
+   */
+  get length() {
+    if (reactiveContext.currentComputation && reactiveContext.isTracking) {
+      this._subscribe("length", reactiveContext.currentComputation);
+    }
+    return this.strategy.getLength();
+  }
+  /**
+   * Método at() reactivo que soporta índices negativos
+   * Similar a array.at() pero con tracking granular por índice
+   */
+  at(index) {
+    const normalizedIndex = index < 0 ? this.strategy.getLength() + index : index;
+    if (reactiveContext.currentComputation && reactiveContext.isTracking) {
+      this._subscribe(normalizedIndex, reactiveContext.currentComputation);
+    }
+    const value = this.strategy.getAt(index);
+    if (value !== null && value !== void 0 && (typeof value === "object" || Array.isArray(value))) {
+      const wrapped = getOrCreateReactive(value);
+      return wrapped;
+    }
+    return value;
+  }
+  /**
+   * Asegura que el array esté en modo owned (tiene datos propios)
+   * Lanza error si se intenta mutar un array derivado
+   */
+  ensureOwned() {
+    if (!this.ownedStrategy) {
+      throw new Error("Cannot mutate a derived array. Derived arrays are read-only.");
+    }
+    return this.ownedStrategy;
+  }
+  // --- MÉTODOS MUTADORES ---
+  push(...items) {
+    const owned = this.ensureOwned();
+    const oldLength = this.strategy.getLength();
+    const result = owned.push(...items);
+    if (this.onChangeCallback) {
+      this.onChangeCallback("push", items);
+    }
+    this._notifyMutation();
+    if (result !== oldLength) {
+      this._notifyLength();
+    }
+    return result;
+  }
+  pop() {
+    const owned = this.ensureOwned();
+    const oldLength = this.strategy.getLength();
+    const result = owned.pop();
+    if (this.onChangeCallback) {
+      this.onChangeCallback("pop", result);
+    }
+    if (oldLength !== this.strategy.getLength()) {
+      this._notifyLength();
+      this._notify(oldLength - 1);
+    }
+    this._notifyMutation();
+    return result;
+  }
+  shift() {
+    const owned = this.ensureOwned();
+    const oldLength = this.strategy.getLength();
+    const result = owned.shift();
+    if (this.onChangeCallback) {
+      this.onChangeCallback("shift");
+    }
+    if (oldLength !== this.strategy.getLength()) {
+      this._notifyLength();
+    }
+    this._notifyAllIndices();
+    this._notifyMutation();
+    return result;
+  }
+  unshift(...items) {
+    const owned = this.ensureOwned();
+    const oldLength = this.strategy.getLength();
+    const result = owned.unshift(...items);
+    if (this.onChangeCallback) {
+      this.onChangeCallback("unshift", items);
+    }
+    this._notifyMutation();
+    if (result !== oldLength) {
+      this._notifyLength();
+    }
+    this._notifyAllIndices();
+    return result;
+  }
+  splice(start, deleteCount, ...items) {
+    const owned = this.ensureOwned();
+    const oldLength = this.strategy.getLength();
+    const actualDeleteCount = deleteCount ?? oldLength - start;
+    const result = owned.splice(start, actualDeleteCount, ...items);
+    if (this.onChangeCallback) {
+      this.onChangeCallback("splice", start, actualDeleteCount, ...items);
+    }
+    const itemsAdded = items.length;
+    this._notifyMutation();
+    if (oldLength !== this.strategy.getLength()) {
+      this._notifyLength();
+    }
+    if (actualDeleteCount > 0 || itemsAdded > 0) {
+      const startIndex = Math.max(0, start);
+      if (actualDeleteCount === itemsAdded) {
+        for (let i = startIndex; i < startIndex + itemsAdded; i++) {
+          this._notify(i);
+        }
+      } else {
+        this._notifyIndicesFrom(startIndex);
+      }
+    }
+    return result;
+  }
+  sort(compareFn) {
+    const owned = this.ensureOwned();
+    if (this.onChangeCallback) {
+      this.onChangeCallback("sort", compareFn);
+    }
+    owned.sort(compareFn);
+    this._notifyMutation();
+    this._notifyAllIndices();
+    return this;
+  }
+  reverse() {
+    const owned = this.ensureOwned();
+    if (this.onChangeCallback) {
+      this.onChangeCallback("reverse");
+    }
+    owned.reverse();
+    this._notifyMutation();
+    this._notifyAllIndices();
+    return this;
+  }
+  fill(value, start, end) {
+    const owned = this.ensureOwned();
+    if (this.onChangeCallback) {
+      this.onChangeCallback("fill", value, start, end);
+    }
+    owned.fill(value, start, end);
+    this._notifyMutation();
+    const actualStart = start ?? 0;
+    const actualEnd = end ?? this.strategy.getLength();
+    if (actualStart < actualEnd) {
+      this._notifyIndicesFrom(actualStart);
+    }
+    return this;
+  }
+  // --- MÉTODOS NO-MUTADORES (LECTURA) ---
+  /**
+   * map() ahora retorna un ReactiveArray derivado, no un array plano
+   * Este es el corazón de tu insight: mantener la reactividad en la cadena
+   *
+   * MEMOIZACIÓN INTELIGENTE:
+   * - Cachea el array derivado por toString() del callback
+   * - Captura dependencias externas (signals que el callback lee)
+   * - Si las dependencias no cambiaron, retorna el MISMO array derivado
+   * - Esto permite granularidad: push/pop solo afectan nuevos elementos
+   */
+  map(callback) {
+    if (reactiveContext.currentComputation && reactiveContext.isTracking) {
+      this._subscribe("mutation", reactiveContext.currentComputation);
+    }
+    const callbackStr = callback.toString();
+    if (this.mapCache.has(callbackStr)) {
+      const cached = this.mapCache.get(callbackStr);
+      const currentDepsValues = Array.from(cached.externalDeps).map((dep) => {
+        try {
+          return dep.get ? dep.get() : dep;
+        } catch {
+          return dep;
+        }
+      });
+      const depsChanged = cached.depsValues.length !== currentDepsValues.length || cached.depsValues.some((v, i) => v !== currentDepsValues[i]);
+      if (!depsChanged) {
+        return cached.derived;
+      }
+      this.mapCache.delete(callbackStr);
+    }
+    const externalDeps = /* @__PURE__ */ new Set();
+    reactiveContext.onTrack;
+    const wrappedCallback = (value, index) => {
+      const originalOnTrack = reactiveContext.onTrack;
+      reactiveContext.onTrack = (signal) => {
+        externalDeps.add(signal);
+        if (originalOnTrack) originalOnTrack(signal);
+      };
+      try {
+        return callback(value, index, this.strategy.getItems());
+      } finally {
+        reactiveContext.onTrack = originalOnTrack;
+      }
+    };
+    const derived = new ReactiveArray({
+      source: this,
+      transform: wrappedCallback
+    });
+    if (this.length > 0) {
+      const prevTracking = reactiveContext.isTracking;
+      reactiveContext.setTracking(true);
+      try {
+        derived.at(0);
+      } finally {
+        reactiveContext.setTracking(prevTracking);
+      }
+    }
+    const depsValues = Array.from(externalDeps).map((dep) => {
+      try {
+        return dep.get ? dep.get() : dep;
+      } catch {
+        return dep;
+      }
+    });
+    this.mapCache.set(callbackStr, {
+      derived,
+      externalDeps,
+      depsValues
+    });
+    return derived;
+  }
+  /**
+   * filter() también retorna un ReactiveArray derivado
+   * Implementación especial que necesita manejar índices no lineales
+   */
+  filter(callback) {
+    if (reactiveContext.currentComputation && reactiveContext.isTracking) {
+      this._subscribe("mutation", reactiveContext.currentComputation);
+    }
+    return new ReactiveArray({
+      source: this,
+      predicate: callback
+    });
+  }
+  slice(start, end) {
+    if (reactiveContext.currentComputation && reactiveContext.isTracking) {
+      this._subscribe("mutation", reactiveContext.currentComputation);
+    }
+    return this.strategy.getItems().slice(start, end);
+  }
+  concat(...items) {
+    if (reactiveContext.currentComputation && reactiveContext.isTracking) {
+      this._subscribe("mutation", reactiveContext.currentComputation);
+    }
+    const base = this.strategy.getItems();
+    const result = [...base];
+    for (const item of items) {
+      if (Array.isArray(item)) {
+        result.push(...item);
+      } else {
+        result.push(item);
+      }
+    }
+    return result;
+  }
+  find(callback) {
+    if (reactiveContext.currentComputation && reactiveContext.isTracking) {
+      this._subscribe("mutation", reactiveContext.currentComputation);
+    }
+    return this.strategy.getItems().find(callback);
+  }
+  findIndex(callback) {
+    if (reactiveContext.currentComputation && reactiveContext.isTracking) {
+      this._subscribe("mutation", reactiveContext.currentComputation);
+    }
+    return this.strategy.getItems().findIndex(callback);
+  }
+  indexOf(searchElement, fromIndex) {
+    if (reactiveContext.currentComputation && reactiveContext.isTracking) {
+      this._subscribe("mutation", reactiveContext.currentComputation);
+    }
+    return this.strategy.getItems().indexOf(searchElement, fromIndex);
+  }
+  includes(searchElement, fromIndex) {
+    if (reactiveContext.currentComputation && reactiveContext.isTracking) {
+      this._subscribe("mutation", reactiveContext.currentComputation);
+    }
+    return this.strategy.getItems().includes(searchElement, fromIndex);
+  }
+  forEach(callback) {
+    if (reactiveContext.currentComputation && reactiveContext.isTracking) {
+      this._subscribe("mutation", reactiveContext.currentComputation);
+    }
+    this.strategy.getItems().forEach(callback);
+  }
+  some(callback) {
+    if (reactiveContext.currentComputation && reactiveContext.isTracking) {
+      this._subscribe("mutation", reactiveContext.currentComputation);
+    }
+    return this.strategy.getItems().some(callback);
+  }
+  every(callback) {
+    if (reactiveContext.currentComputation && reactiveContext.isTracking) {
+      this._subscribe("mutation", reactiveContext.currentComputation);
+    }
+    return this.strategy.getItems().every(callback);
+  }
+  reduce(callback, initialValue) {
+    if (reactiveContext.currentComputation && reactiveContext.isTracking) {
+      this._subscribe("mutation", reactiveContext.currentComputation);
+    }
+    return this.strategy.getItems().reduce(callback, initialValue);
+  }
+  reduceRight(callback, initialValue) {
+    if (reactiveContext.currentComputation && reactiveContext.isTracking) {
+      this._subscribe("mutation", reactiveContext.currentComputation);
+    }
+    return this.strategy.getItems().reduceRight(callback, initialValue);
+  }
+  // --- MÉTODOS DE CONVERSIÓN ---
+  join(separator) {
+    if (reactiveContext.currentComputation && reactiveContext.isTracking) {
+      this._subscribe("mutation", reactiveContext.currentComputation);
+    }
+    return this.strategy.getItems().join(separator);
+  }
+  toString() {
+    return this.strategy.getItems().toString();
+  }
+  toLocaleString() {
+    return this.strategy.getItems().toLocaleString();
+  }
+  // --- ITERADORES ---
+  [Symbol.iterator]() {
+    if (reactiveContext.currentComputation && reactiveContext.isTracking) {
+      this._subscribe("mutation", reactiveContext.currentComputation);
+    }
+    return this.strategy.getItems()[Symbol.iterator]();
+  }
+  entries() {
+    if (reactiveContext.currentComputation && reactiveContext.isTracking) {
+      this._subscribe("mutation", reactiveContext.currentComputation);
+    }
+    return this.strategy.getItems().entries();
+  }
+  keys() {
+    if (reactiveContext.currentComputation && reactiveContext.isTracking) {
+      this._subscribe("mutation", reactiveContext.currentComputation);
+    }
+    return this.strategy.getItems().keys();
+  }
+  values() {
+    if (reactiveContext.currentComputation && reactiveContext.isTracking) {
+      this._subscribe("mutation", reactiveContext.currentComputation);
+    }
+    return this.strategy.getItems().values();
+  }
+  // --- GESTIÓN INTERNA DE SUBSCRIPTIONS ---
+  /**
+   * Registra un subscriber para un tipo específico de cambio
+   */
+  _subscribe(key, subscriber) {
+    if (!this.subscribers.has(key)) {
+      this.subscribers.set(key, /* @__PURE__ */ new Set());
+    }
+    this.subscribers.get(key).add(subscriber);
+  }
+  /**
+   * Notifica a subscribers de un tipo específico de cambio
+   */
+  _notify(key) {
+    const subs = this.subscribers.get(key);
+    if (subs && subs.size > 0) {
+      subs.forEach((subscriber) => {
+        if (subscriber._isComputation) {
+          subscriber();
+        } else {
+          phaseScheduler.schedule(subscriber);
+        }
+      });
+    }
+  }
+  /**
+   * Notifica que el array mutó (cualquier cambio en contenido)
+   */
+  _notifyMutation() {
+    this._notify("mutation");
+  }
+  /**
+   * Notifica que la longitud cambió
+   */
+  _notifyLength() {
+    this._notify("length");
+  }
+  /**
+   * Notifica a todos los índices numéricos suscritos
+   * Se usa cuando operaciones como shift/unshift/splice afectan múltiples índices
+   */
+  _notifyAllIndices() {
+    for (const key of this.subscribers.keys()) {
+      if (typeof key === "number") {
+        this._notify(key);
+      }
+    }
+  }
+  /**
+   * Notifica todos los índices desde start hacia adelante
+   * Útil cuando splice/insert afecta índices posteriores
+   */
+  _notifyIndicesFrom(start) {
+    for (const key of this.subscribers.keys()) {
+      if (typeof key === "number" && key >= start) {
+        this._notify(key);
+      }
+    }
+  }
+  // --- MÉTODOS DE DEBUG/INSPECCIÓN ---
+  getSubscribers(key) {
+    return this.subscribers.get(key);
+  }
+  getSubscribedKeys() {
+    return Array.from(this.subscribers.keys());
+  }
+}
+function collection(items) {
+  return new ReactiveArray(items);
+}
+function isObservableArray(value) {
+  return value instanceof ReactiveArray;
+}
+function isCollection(value) {
+  return value instanceof ReactiveArray;
+}
+function isReactiveArrayLike(value) {
+  if (value instanceof ReactiveArray) return true;
+  if (value && typeof value === "object" && value.__isReactive && value.__getReactiveArray) {
+    return true;
+  }
+  return false;
+}
+function unwrapReactiveArray(value) {
+  if (value instanceof ReactiveArray) return value;
+  if (value && typeof value === "object" && value.__isReactive && value.__getReactiveArray) {
+    return value.__getReactiveArray;
+  }
+  return null;
+}
+export {
+  ReactiveArray,
+  collection,
+  isCollection,
+  isObservableArray,
+  isReactiveArrayLike,
+  unwrapReactiveArray
+};

package/dist/reactivity/signals/reactive-proxy.d.ts

@@ -0,0 +1,54 @@
+import { CompositeSignal } from './composite.js';
+import { ReactiveArray } from './reactive-array.js';
+/**
+ * Crea un Proxy para un CompositeSignal que permite acceso y modificación
+ * usando sintaxis nativa de JavaScript.
+ *
+ * Características:
+ * - Lectura de propiedades: proxy.name accede a composite.get('name')
+ * - Escritura de propiedades: proxy.name = 'value' ejecuta composite.set('name', 'value')
+ * - Composición automática: valores nested son automáticamente envueltos en Proxies
+ * - Propiedades especiales: __isReactive, __getCompositeSignal
+ *
+ * @param composite - El CompositeSignal a envolver
+ * @returns Un Proxy que se comporta como un objeto plano pero mantiene reactividad
+ */
+export declare function createObjectProxy<T extends Record<string, any>>(composite: CompositeSignal<T>): T;
+/**
+ * Crea un Proxy para un ReactiveArray que permite acceso y modificación
+ * usando sintaxis nativa de Arrays de JavaScript.
+ *
+ * Características:
+ * - Acceso por índice: proxy[0] accede a reactiveArray.at(0)
+ * - Métodos nativos: push, pop, map, filter, etc. funcionan como en arrays normales
+ * - Iteración: for...of, forEach, etc. funcionan nativamente
+ * - Composición automática: elementos nested son automáticamente envueltos en Proxies
+ * - Propiedades especiales: __isReactive, __getReactiveArray
+ *
+ * @param reactiveArray - El ReactiveArray a envolver
+ * @returns Un Proxy que se comporta como un Array plano pero mantiene reactividad
+ */
+export declare function createArrayProxy<T>(reactiveArray: ReactiveArray<T>): T[];
+/**
+ * API principal para crear stores reactivos con sintaxis nativa de JavaScript.
+ *
+ * Esta función es el punto de entrada recomendado para usuarios del framework.
+ * Automáticamente detecta si el estado inicial es un objeto o array y crea
+ * el tipo de Proxy apropiado.
+ *
+ * Ejemplos:
+ * ```typescript
+ * // Objeto reactivo
+ * const app = createStore({ user: { name: 'Julian' } });
+ * app.user.name = 'Julián'; // Sintaxis nativa con reactividad completa
+ *
+ * // Array reactivo
+ * const items = createStore([1, 2, 3]);
+ * items.push(4); // Métodos nativos de Array
+ * items[0] = 10; // Asignación por índice
+ * ```
+ *
+ * @param initialState - El estado inicial (objeto o array)
+ * @returns Un Proxy que permite sintaxis nativa con reactividad completa
+ */
+export declare function createStore<T extends Record<string, any> | any[]>(initialState: T): T;