@v-ibe/core 0.1.0

package/dist/index.js

@@ -0,0 +1,121 @@
+import { BaseComponent } from "./components/base-component.js";
+import { Component } from "./components/decorators/component.js";
+import { Prop } from "./components/decorators/prop.js";
+import { Route } from "./router/decorators/route.js";
+import { Param, Params, Query, QueryParams } from "./router/decorators/params.js";
+import { Allow, Block, Redirect, Skip, getPolicyRules } from "./router/decorators/base-policy.js";
+import { State } from "./reactivity/decorators/state.js";
+import { Effect } from "./reactivity/decorators/effect.js";
+import { Computed } from "./reactivity/decorators/computed.js";
+import { Resource } from "./reactivity/decorators/resource.js";
+import { Store } from "./reactivity/decorators/store.js";
+import { RouteMetadata } from "./router/decorators/route-metadata.js";
+import { Ctx } from "./reactivity/decorators/ctx.js";
+import { ReactiveArray, collection, isCollection, isObservableArray, isReactiveArrayLike, unwrapReactiveArray } from "./reactivity/signals/reactive-array.js";
+import { Emit } from "./events-handler/decorators/emit.js";
+import { BaseStyleSheet } from "./styles/base-style-sheet.js";
+import { Style } from "./styles/decorators/style.js";
+import { Service } from "./DI/decorators/service.js";
+import { Inject } from "./DI/decorators/inject.js";
+import { DIContainer } from "./DI/di-container.js";
+import { ScopedContainer } from "./DI/scoped-container.js";
+import { clearServiceMetadata, getAllServiceMetadata, getServiceMetadata, registerServiceMetadata } from "./DI/service-metadata.js";
+import { core } from "./core.js";
+import { Rule } from "./styles/decorators/rule.js";
+import { UseStyles } from "./styles/decorators/useStyles.js";
+import { Behavior, ComponentHost, Host } from "./behaviors/decorators.js";
+import "./behaviors/behavior-registry.js";
+import { MediaQuery } from "./styles/decorators/factories.js";
+import { ForDocument, Shared } from "./styles/decorators/scope.js";
+import { Keyframes } from "./styles/decorators/keyframes.js";
+import { jsxContextualPlugin } from "./vite-plugins/jsx-contextual.js";
+import { jsxSignalsPlugin } from "./vite-plugins/jsx-signals.js";
+import { Router } from "./router/router.js";
+import { Trie } from "./router/trie.js";
+import { RouteView } from "./router/route-view.js";
+import { Link } from "./router/link.behavior.js";
+import { EntityStore } from "./data-management/store/store.js";
+import { Model } from "./data-management/decorators/model.js";
+import { Id } from "./data-management/decorators/id.js";
+import { Prop as Prop2 } from "./data-management/decorators/prop.js";
+import { Consume } from "./data-management/decorators/consume.js";
+import { MemoryCache } from "./data-management/cache/memory-cache.js";
+import { LocalStorageCache } from "./data-management/cache/local-storage-cache.js";
+import { SessionStorageCache } from "./data-management/cache/session-storage-cache.js";
+import { Cache } from "./data-management/cache/cache.decorator.js";
+import { TTL } from "./data-management/cache/ttl.decorator.js";
+import { CacheTags } from "./data-management/cache/cache-tags.decorator.js";
+import { CacheUpdate } from "./data-management/cache/cache-update.decorator.js";
+import { CacheInvalidate } from "./data-management/cache/cache-invalidate.decorator.js";
+import { For } from "./custom-components/for.js";
+import { Show } from "./custom-components/show.js";
+export {
+  Allow,
+  BaseComponent,
+  BaseStyleSheet,
+  Behavior,
+  Block,
+  Cache,
+  CacheInvalidate,
+  CacheTags,
+  CacheUpdate,
+  Component,
+  ComponentHost,
+  Computed,
+  Consume,
+  Ctx,
+  DIContainer,
+  Effect,
+  Emit,
+  EntityStore,
+  Prop2 as Field,
+  For,
+  ForDocument,
+  Host,
+  Id,
+  Inject,
+  Keyframes,
+  Link,
+  LocalStorageCache,
+  MediaQuery,
+  MemoryCache,
+  Model,
+  Param,
+  Params,
+  Prop,
+  Query,
+  QueryParams,
+  ReactiveArray,
+  Redirect,
+  Resource,
+  Route,
+  RouteMetadata,
+  RouteView,
+  Router,
+  Rule,
+  ScopedContainer,
+  Service,
+  SessionStorageCache,
+  Shared,
+  Show,
+  Skip,
+  State,
+  Store,
+  Style,
+  TTL,
+  Trie,
+  UseStyles,
+  clearServiceMetadata,
+  collection,
+  core,
+  getAllServiceMetadata,
+  getPolicyRules,
+  getServiceMetadata,
+  isCollection,
+  isObservableArray,
+  isReactiveArrayLike,
+  jsxContextualPlugin,
+  jsxSignalsPlugin,
+  registerServiceMetadata,
+  unwrapReactiveArray
+};

package/dist/jsx/dynamic/__tests__/granular-array-renderer.test.d.ts

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

package/dist/jsx/dynamic/__tests__/jsx-array-rendering.test.d.ts

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

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

@@ -0,0 +1,2 @@
+import { ChildValue } from '../types.js';
+export declare function renderArrayChild(parent: Element | ShadowRoot, children: ChildValue[]): void;

package/dist/jsx/dynamic/array-renderer.js

@@ -0,0 +1,133 @@
+import { effect } from "../../reactivity/signals/effect.js";
+import { isDOMNode, replaceNode } from "./dom-utils.js";
+function renderArrayChild(parent, children) {
+  const anchor = document.createComment("array-child");
+  parent.appendChild(anchor);
+  const getter = typeof children === "function" ? children : () => children;
+  let arrayState = {
+    keyMap: /* @__PURE__ */ new Map(),
+    nodeOrder: [],
+    reactiveEntries: /* @__PURE__ */ new Map()
+  };
+  effect(
+    () => {
+      const items = getter();
+      if (!items || typeof items[Symbol.iterator] !== "function") return;
+      const newNodeOrder = [];
+      const usedNodes = /* @__PURE__ */ new Set();
+      let index = 0;
+      for (const item of items) {
+        if (item == null || typeof item === "boolean") {
+          index++;
+          continue;
+        }
+        const key = extractKey(item, index);
+        newNodeOrder.push(key);
+        const node = reuseOrCreateNode(parent, arrayState, key, item);
+        usedNodes.add(node);
+        index++;
+      }
+      removeUnusedNodes(arrayState, usedNodes);
+      reorderNodes(anchor, arrayState.keyMap, newNodeOrder);
+      arrayState.nodeOrder = newNodeOrder;
+    }
+  );
+}
+function extractKey(item, index) {
+  if (item?.getAttribute?.("key")) {
+    return String(item.getAttribute("key"));
+  }
+  if (item?.props?.key != null) {
+    return String(item.props.key);
+  }
+  if (item?.key != null) {
+    return String(item.key);
+  }
+  return `__index_${index}`;
+}
+function reuseOrCreateNode(parent, arrayState, key, item) {
+  const { keyMap } = arrayState;
+  if (typeof item === "function") {
+    return reuseOrCreateReactiveNode(parent, arrayState, key, item);
+  }
+  if (keyMap.has(key)) {
+    const existingNode = keyMap.get(key);
+    if (isDOMNode(item) && existingNode !== item) {
+      const newNode = item;
+      existingNode.parentNode?.replaceChild(newNode, existingNode);
+      keyMap.set(key, newNode);
+      return newNode;
+    }
+    return existingNode;
+  }
+  const node = isDOMNode(item) ? item : document.createTextNode(String(item));
+  keyMap.set(key, node);
+  return node;
+}
+function reuseOrCreateReactiveNode(parent, arrayState, key, fn) {
+  const { keyMap, reactiveEntries } = arrayState;
+  if (reactiveEntries.has(key)) {
+    const entry2 = reactiveEntries.get(key);
+    return entry2.anchor;
+  }
+  const anchor = document.createComment(`reactive-array-child-${key}`);
+  const entry = { anchor, currentNode: null };
+  reactiveEntries.set(key, entry);
+  keyMap.set(key, anchor);
+  effect(() => {
+    const value = fn();
+    if (value == null || typeof value === "boolean") {
+      if (entry.currentNode) {
+        entry.currentNode.parentNode?.removeChild(entry.currentNode);
+        entry.currentNode = null;
+      }
+      return;
+    }
+    if (isDOMNode(value)) {
+      const newNode = value;
+      if (entry.currentNode !== newNode) {
+        replaceNode(anchor, entry.currentNode, newNode);
+        entry.currentNode = newNode;
+      }
+      return;
+    }
+    const text = String(value);
+    if (entry.currentNode && entry.currentNode.nodeType === Node.TEXT_NODE) {
+      entry.currentNode.nodeValue = text;
+    } else {
+      const newNode = document.createTextNode(text);
+      replaceNode(anchor, entry.currentNode, newNode);
+      entry.currentNode = newNode;
+    }
+  });
+  return anchor;
+}
+function removeUnusedNodes(arrayState, usedNodes) {
+  const { keyMap, reactiveEntries } = arrayState;
+  for (const [key, node] of keyMap.entries()) {
+    if (!usedNodes.has(node)) {
+      node.parentNode?.removeChild(node);
+      keyMap.delete(key);
+      if (reactiveEntries.has(key)) {
+        const entry = reactiveEntries.get(key);
+        if (entry.currentNode) {
+          entry.currentNode.parentNode?.removeChild(entry.currentNode);
+        }
+        reactiveEntries.delete(key);
+      }
+    }
+  }
+}
+function reorderNodes(anchor, keyMap, newOrder) {
+  let previousNode = anchor;
+  newOrder.forEach((key) => {
+    const node = keyMap.get(key);
+    if (previousNode.nextSibling !== node) {
+      previousNode.parentNode?.insertBefore(node, previousNode.nextSibling);
+    }
+    previousNode = node;
+  });
+}
+export {
+  renderArrayChild
+};

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

@@ -0,0 +1 @@
+export declare function renderChild(parent: Element | ShadowRoot, child: any): void;

package/dist/jsx/dynamic/child-renderer.js

@@ -0,0 +1,180 @@
+import { isSignal } from "../../reactivity/signals/signal.js";
+import { effect } from "../../reactivity/signals/effect.js";
+import { isValidChild, isDOMNode, replaceNode } from "./dom-utils.js";
+import { renderArrayChild } from "./array-renderer.js";
+import { isReactiveArrayLike } from "../../reactivity/signals/reactive-array.js";
+import { renderArrayChildGranular } from "./granular-array-renderer.js";
+function isIterable(value) {
+  if (!value || typeof value !== "object") return false;
+  return typeof value[Symbol.iterator] === "function" && typeof value.length === "number";
+}
+function renderChild(parent, child) {
+  if (!isValidChild(child)) return;
+  if (isReactiveArrayLike(child)) {
+    renderArrayChildGranular(parent, child);
+    return;
+  }
+  if (isIterable(child)) {
+    renderArrayChild(parent, child);
+  } else if (isDOMNode(child)) {
+    parent.appendChild(child);
+  } else if (isSignal(child)) {
+    renderSignalChild(parent, child);
+  } else if (typeof child === "function") {
+    renderReactiveChild(parent, child);
+  } else {
+    const textNode = document.createTextNode(String(child));
+    parent.appendChild(textNode);
+  }
+}
+function renderSignalChild(parent, signal) {
+  const anchor = document.createComment("signal-child");
+  parent.appendChild(anchor);
+  let currentNode = null;
+  effect(
+    () => {
+      const value = signal.get();
+      if (value == null || typeof value === "boolean") {
+        if (currentNode) {
+          currentNode.parentNode?.removeChild(currentNode);
+          currentNode = null;
+        }
+        return;
+      }
+      const text = String(value);
+      if (currentNode && currentNode.nodeType === Node.TEXT_NODE) {
+        currentNode.nodeValue = text;
+      } else {
+        const newNode = document.createTextNode(text);
+        replaceNode(anchor, currentNode, newNode);
+        currentNode = newNode;
+      }
+    }
+  );
+}
+function renderReactiveChild(parent, child) {
+  const anchor = document.createComment("reactive-child");
+  parent.appendChild(anchor);
+  let currentNode = null;
+  let currentType = "empty";
+  Math.random().toString(36).substring(7);
+  let executionCount = 0;
+  effect(() => {
+    executionCount++;
+    const value = child();
+    if (value == null || typeof value === "boolean") {
+      if (currentNode) {
+        currentNode.parentNode?.removeChild(currentNode);
+        currentNode = null;
+        currentType = "empty";
+      }
+      return;
+    }
+    if (isIterable(value)) {
+      if (currentType !== "array" && currentNode) {
+        currentNode.parentNode?.removeChild(currentNode);
+        currentNode = null;
+      }
+      reconcileArrayNodes(anchor, value);
+      currentType = "array";
+      return;
+    }
+    if (typeof value === "function") {
+      const result = value();
+      if (isDOMNode(result)) {
+        const newNode = result;
+        if (currentType !== "node" || currentNode !== newNode) {
+          replaceNode(anchor, currentNode, newNode);
+          currentNode = newNode;
+          currentType = "node";
+        }
+        return;
+      }
+      if (typeof result === "function") {
+        const finalResult = result();
+        if (isDOMNode(finalResult)) {
+          const newNode = finalResult;
+          if (currentType !== "node" || currentNode !== newNode) {
+            replaceNode(anchor, currentNode, newNode);
+            currentNode = newNode;
+            currentType = "node";
+          }
+          return;
+        }
+      }
+    }
+    if (isDOMNode(value)) {
+      const newNode = value;
+      if (currentType !== "node" || currentNode !== newNode) {
+        replaceNode(anchor, currentNode, newNode);
+        currentNode = newNode;
+        currentType = "node";
+      }
+      return;
+    }
+    const text = String(value);
+    if (currentType === "text" && currentNode) {
+      currentNode.nodeValue = text;
+    } else {
+      const newNode = document.createTextNode(text);
+      replaceNode(anchor, currentNode, newNode);
+      currentNode = newNode;
+      currentType = "text";
+    }
+  });
+}
+const arrayEndMarkers = /* @__PURE__ */ new WeakMap();
+function reconcileArrayNodes(anchor, items) {
+  const parent = anchor.parentNode;
+  if (!parent) return;
+  let endMarker = arrayEndMarkers.get(anchor);
+  if (!endMarker) {
+    endMarker = document.createComment("array-end");
+    parent.insertBefore(endMarker, anchor.nextSibling);
+    arrayEndMarkers.set(anchor, endMarker);
+  }
+  const existingNodes = [];
+  let node = anchor.nextSibling;
+  while (node && node !== endMarker) {
+    existingNodes.push(node);
+    node = node.nextSibling;
+  }
+  const newNodes = [];
+  for (const item of items) {
+    if (item == null || typeof item === "boolean") {
+      continue;
+    }
+    if (isDOMNode(item)) {
+      newNodes.push(item);
+    } else if (typeof item === "function") {
+      const result = item();
+      if (result != null && typeof result !== "boolean") {
+        if (isDOMNode(result)) {
+          newNodes.push(result);
+        } else {
+          newNodes.push(document.createTextNode(String(result)));
+        }
+      }
+    } else {
+      newNodes.push(document.createTextNode(String(item)));
+    }
+  }
+  const maxLen = Math.max(existingNodes.length, newNodes.length);
+  for (let i = 0; i < maxLen; i++) {
+    const existingNode = existingNodes[i];
+    const newNode = newNodes[i];
+    if (i < existingNodes.length && i < newNodes.length) {
+      if (existingNode === newNode) ;
+      else {
+        parent.replaceChild(newNode, existingNode);
+      }
+    } else if (i >= existingNodes.length) {
+      parent.insertBefore(newNode, endMarker);
+    } else {
+      parent.removeChild(existingNode);
+    }
+  }
+}
+export {
+  renderChild
+};

package/dist/jsx/dynamic/dom-utils.d.ts

@@ -0,0 +1,5 @@
+import { ChildValue } from '../types';
+export declare function isCustomElement(el: Element): boolean;
+export declare function isValidChild(child: any): child is ChildValue;
+export declare function isDOMNode(value: any): value is Node;
+export declare function replaceNode(anchor: Comment, oldNode: Node | null, newNode: Node): void;

package/dist/jsx/dynamic/dom-utils.js

@@ -0,0 +1,22 @@
+function isCustomElement(el) {
+  return el.tagName.includes("-");
+}
+function isValidChild(child) {
+  return child != null && typeof child !== "boolean";
+}
+function isDOMNode(value) {
+  return value && value.nodeType;
+}
+function replaceNode(anchor, oldNode, newNode) {
+  if (oldNode) {
+    oldNode.parentNode?.replaceChild(newNode, oldNode);
+  } else {
+    anchor.parentNode?.insertBefore(newNode, anchor.nextSibling);
+  }
+}
+export {
+  isCustomElement,
+  isDOMNode,
+  isValidChild,
+  replaceNode
+};

package/dist/jsx/dynamic/granular-array-renderer.d.ts

@@ -0,0 +1,16 @@
+/**
+ * GRANULAR ARRAY RENDERER - Acceso por índice en lugar de iteración
+ *
+ * La clave es NO iterar con for...of sino acceder a elementos por índice.
+ * Esto permite que cada elemento tenga su propio effect que solo se suscribe
+ * a cambios en ese índice específico.
+ *
+ * Reconciliación:
+ * 1. Leer length (se suscribe a cambios de longitud)
+ * 2. Para cada índice 0..length-1, crear/reutilizar un effect individual
+ * 3. Cada effect accede a array.at(i), suscribiéndose solo a ese índice
+ * 4. Cuando array[i] cambia, solo ese effect se re-ejecuta
+ *
+ * IMPORTANTE: Requiere que el array sea un ReactiveArray real, no un array plano.
+ */
+export declare function renderArrayChildGranular(parent: Element | ShadowRoot, arrayLike: any): void;

package/dist/jsx/dynamic/granular-array-renderer.js

@@ -0,0 +1,153 @@
+import { effect } from "../../reactivity/signals/effect.js";
+import { isDOMNode, replaceNode } from "./dom-utils.js";
+import { unwrapReactiveArray } from "../../reactivity/signals/reactive-array.js";
+import { CompositeSignal } from "../../reactivity/signals/composite.js";
+function renderArrayChildGranular(parent, arrayLike) {
+  const anchor = document.createComment("array-child-granular");
+  parent.appendChild(anchor);
+  const reactiveArray = unwrapReactiveArray(arrayLike);
+  if (!reactiveArray) {
+    console.warn("[Granular Renderer] Value is not a ReactiveArray, cannot use granular rendering");
+    return;
+  }
+  let arrayState = {
+    keyMap: /* @__PURE__ */ new Map(),
+    nodeOrder: [],
+    reactiveEntries: /* @__PURE__ */ new Map()
+  };
+  const effectCleanups = /* @__PURE__ */ new Map();
+  effect(
+    () => {
+      const currentLength = reactiveArray.length;
+      const newNodeOrder = [];
+      const keysToCreate = /* @__PURE__ */ new Set();
+      const existingKeys = new Set(arrayState.nodeOrder);
+      for (let i = 0; i < currentLength; i++) {
+        const key = `__index_${i}`;
+        newNodeOrder.push(key);
+        if (!existingKeys.has(key)) {
+          keysToCreate.add(key);
+        }
+      }
+      for (const oldKey of existingKeys) {
+        if (!newNodeOrder.includes(oldKey)) {
+          removeKey(arrayState, effectCleanups, oldKey);
+        }
+      }
+      for (const key of keysToCreate) {
+        const index = newNodeOrder.indexOf(key);
+        if (!arrayState.reactiveEntries.has(key)) {
+          createKeyEffect(
+            parent,
+            arrayState,
+            effectCleanups,
+            key,
+            index,
+            reactiveArray
+          );
+        }
+      }
+      reorderNodes(anchor, arrayState.keyMap, newNodeOrder);
+      arrayState.nodeOrder = newNodeOrder;
+    }
+  );
+}
+function createKeyEffect(parent, arrayState, effectCleanups, key, index, reactiveArray) {
+  const anchor = document.createComment(`reactive-array-child-${key}`);
+  parent.appendChild(anchor);
+  const entry = { anchor, currentNode: null };
+  arrayState.reactiveEntries.set(key, entry);
+  arrayState.keyMap.set(key, anchor);
+  const effectHandle = effect(() => {
+    let item = reactiveArray.at(index);
+    if (item instanceof CompositeSignal) {
+      const plainValue = item.getPlainValue();
+      if (isDOMNode(plainValue)) {
+        item = plainValue;
+      }
+    }
+    if (item == null || typeof item === "boolean") {
+      if (entry.currentNode) {
+        entry.currentNode.parentNode?.removeChild(entry.currentNode);
+        entry.currentNode = null;
+      }
+      return;
+    }
+    if (typeof item === "function") {
+      const value = item();
+      if (value == null || typeof value === "boolean") {
+        if (entry.currentNode) {
+          entry.currentNode.parentNode?.removeChild(entry.currentNode);
+          entry.currentNode = null;
+        }
+        return;
+      }
+      if (isDOMNode(value)) {
+        const newNode = value;
+        if (entry.currentNode !== newNode) {
+          replaceNode(anchor, entry.currentNode, newNode);
+          entry.currentNode = newNode;
+        }
+        return;
+      }
+      const text2 = String(value);
+      if (entry.currentNode && entry.currentNode.nodeType === Node.TEXT_NODE) {
+        entry.currentNode.nodeValue = text2;
+      } else {
+        const newNode = document.createTextNode(text2);
+        replaceNode(anchor, entry.currentNode, newNode);
+        entry.currentNode = newNode;
+      }
+      return;
+    }
+    if (isDOMNode(item)) {
+      const newNode = item;
+      if (entry.currentNode !== newNode) {
+        replaceNode(anchor, entry.currentNode, newNode);
+        entry.currentNode = newNode;
+      }
+      return;
+    }
+    const text = String(item);
+    if (entry.currentNode && entry.currentNode.nodeType === Node.TEXT_NODE) {
+      entry.currentNode.nodeValue = text;
+    } else {
+      const newNode = document.createTextNode(text);
+      replaceNode(anchor, entry.currentNode, newNode);
+      entry.currentNode = newNode;
+    }
+  });
+  effectCleanups.set(key, effectHandle.dispose);
+}
+function removeKey(arrayState, effectCleanups, key) {
+  const cleanup = effectCleanups.get(key);
+  if (cleanup) {
+    cleanup();
+    effectCleanups.delete(key);
+  }
+  const entry = arrayState.reactiveEntries.get(key);
+  if (entry) {
+    if (entry.currentNode) {
+      entry.currentNode.parentNode?.removeChild(entry.currentNode);
+    }
+    if (entry.anchor && entry.anchor.parentNode) {
+      entry.anchor.parentNode.removeChild(entry.anchor);
+    }
+    arrayState.reactiveEntries.delete(key);
+  }
+  arrayState.keyMap.delete(key);
+}
+function reorderNodes(anchor, keyMap, newOrder) {
+  let previousNode = anchor;
+  newOrder.forEach((key) => {
+    const node = keyMap.get(key);
+    if (!node) return;
+    if (previousNode.nextSibling !== node) {
+      previousNode.parentNode?.insertBefore(node, previousNode.nextSibling);
+    }
+    previousNode = node;
+  });
+}
+export {
+  renderArrayChildGranular
+};

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

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

package/dist/jsx/dynamic/props-handler.d.ts

@@ -0,0 +1,3 @@
+import { PropValue } from '../types';
+import { BehaviorManager } from '../../behaviors/behavior-manager';
+export declare function bindProps(el: Element, props: Record<string, PropValue>, behaviorManager?: BehaviorManager): void;