@v-ibe/core 0.1.0

package/dist/components/base-component.js

@@ -0,0 +1,438 @@
+import { RESOURCE_PROPERTY_KEYS } from "../reactivity/decorators/resource.js";
+import { reactiveContext } from "../reactivity/reactive-context.js";
+import { createResource } from "../reactivity/signals/resource.js";
+import { AppTree } from "./app-tree.js";
+import { bindProps } from "../jsx/dynamic/props-handler.js";
+import { renderChild } from "../jsx/dynamic/child-renderer.js";
+import { Fragment } from "../jsx/types.js";
+import { globalStylesheets } from "../styles/global-styles-registry.js";
+import { BehaviorManager } from "../behaviors/behavior-manager.js";
+import { ScopedContainer } from "../DI/scoped-container.js";
+import { getServiceMetadata } from "../DI/service-metadata.js";
+class BaseComponent extends HTMLElement {
+  constructor() {
+    super();
+    this.#isInitialized = false;
+    this.#globalStylesheetIds = [];
+    this.#documentStylesheetIds = [];
+    this._pendingContextInitializers = [];
+    this._pendingEffects = [];
+    this.behaviorManager = new BehaviorManager(this);
+    const metadata = AppTree.getMetadata(this.constructor);
+    const useShadowDOM = metadata?.useShadowDOM !== false;
+    if (useShadowDOM) {
+      this.attachShadow({ mode: "open" });
+    }
+  }
+  #isInitialized;
+  #globalStylesheetIds;
+  #documentStylesheetIds;
+  /**
+   * Obtiene el root donde se renderizan los elementos.
+   * Puede ser shadowRoot o el elemento mismo si no usa shadow DOM.
+   */
+  get renderRoot() {
+    return this.shadowRoot || this;
+  }
+  /**
+   * Registra un efecto pendiente que se ejecutará después de la inicialización
+   * Usado por el decorador @Effect para diferir la ejecución
+   */
+  queueEffect(effectFn) {
+    if (this.#isInitialized) {
+      queueMicrotask(effectFn);
+      return;
+    }
+    if (!this._pendingEffects) {
+      this._pendingEffects = [];
+    }
+    this._pendingEffects.push(effectFn);
+  }
+  /**
+   * Ejecuta todos los efectos pendientes
+   * Se llama al final de initializeForJSX()
+   */
+  flushPendingEffects() {
+    if (this._pendingEffects && this._pendingEffects.length > 0) {
+      const effects = this._pendingEffects;
+      this._pendingEffects = [];
+      effects.forEach((effectFn) => {
+        queueMicrotask(effectFn);
+      });
+    }
+  }
+  // Inicialización controlada por JSX
+  initializeForJSX() {
+    if (this.#isInitialized) {
+      return;
+    }
+    reactiveContext.untrack(() => {
+      this.registerSharedStylesheetsIfNeeded();
+      this.registerDocumentStylesIfNeeded();
+      this.adoptSharedStylesheets();
+      this.adoptLocalStylesheet();
+      this.initializeContexts();
+      this.initializeResources();
+      if (typeof this.onInit === "function") {
+        this.onInit();
+      }
+    });
+    this.#isInitialized = true;
+    this.flushPendingEffects();
+  }
+  connectedCallback() {
+    if (this.#isInitialized) {
+      if (typeof this.onConnected === "function") {
+        this.onConnected();
+      }
+      return;
+    }
+    this.init().catch((error) => {
+      console.error("[BaseComponent] Error durante inicialización:", error);
+      this.renderError(error);
+    });
+  }
+  /**
+   * Bootstrap services declared in @Component({ services: [...] })
+   * for a given node. Creates a ScopedContainer with parent chain resolution.
+   * Used by both init() (DOM path) and createAndRenderComponent() (JSX path).
+   */
+  static bootstrapServicesForNode(node, metadata, sync = false) {
+    if (!metadata.services?.length) return;
+    const parentContainer = node.parent ? AppTree.findContainerFor(node.parent) : void 0;
+    const container = new ScopedContainer(parentContainer);
+    for (const ServiceClass of metadata.services) {
+      container.register(ServiceClass);
+    }
+    for (const ServiceClass of metadata.services) {
+      const serviceMeta = getServiceMetadata(ServiceClass);
+      if (serviceMeta) {
+        for (const dep of serviceMeta.dependencies) {
+          if (metadata.services.includes(dep)) {
+            container.registerDependency(ServiceClass, dep);
+          }
+        }
+      }
+    }
+    if (sync) {
+      container.bootstrapSync();
+    }
+    node.container = container;
+  }
+  /**
+   * Assign __container to a component instance.
+   * Uses the node's own container if it has one, otherwise walks up the tree.
+   */
+  static assignContainer(instance, node) {
+    instance.__container = node.container ?? AppTree.findContainerFor(node) ?? void 0;
+  }
+  /**
+   * Proceso de inicialización asíncrona del componente
+   * Incluye renderizado progresivo
+   */
+  async init() {
+    const parentNode = this.findParentNode();
+    this.appNode = AppTree.registerInstance(this, parentNode);
+    const metadata = AppTree.getMetadata(this.constructor);
+    if (metadata?.services?.length) {
+      BaseComponent.bootstrapServicesForNode(this.appNode, metadata);
+      await this.appNode.container.bootstrap();
+    }
+    BaseComponent.assignContainer(this, this.appNode);
+    this.initializeForJSX();
+    this.renderRoot.innerHTML = "";
+    if (typeof this.view === "function") {
+      const viewResult = this.view();
+      const isIterable = (value) => {
+        return value && typeof value === "object" && typeof value[Symbol.iterator] === "function";
+      };
+      if (viewResult instanceof Node) {
+        this.renderRoot.appendChild(viewResult);
+      } else if (isIterable(viewResult)) {
+        for (const child of viewResult) {
+          renderChild(this.renderRoot, child);
+        }
+      } else if (viewResult != null) {
+        renderChild(this.renderRoot, viewResult);
+      }
+    }
+    if (typeof this.onConnected === "function") {
+      this.onConnected();
+    }
+    this.#isInitialized = true;
+  }
+  /**
+   * Renderiza un estado de error si la inicialización falla
+   */
+  renderError(error) {
+    this.renderRoot.innerHTML = `
+      <div style="padding: 20px; border: 2px solid #ff4444; background: #fff5f5; border-radius: 4px; margin: 10px;">
+        <h3 style="margin: 0 0 10px 0; color: #ff4444;">❌ Error de Inicialización</h3>
+        <p style="margin: 0 0 10px 0; color: #333;">El componente <strong>${this.constructor.name}</strong> falló al inicializar.</p>
+        <pre style="background: #f5f5f5; padding: 10px; overflow: auto; font-size: 12px; border-radius: 3px; color: #333;">${error.stack || error.message || String(error)}</pre>
+      </div>
+    `;
+  }
+  /**
+  * Encuentra el nodo padre de este componente en el AppTree.
+  */
+  findParentNode() {
+    let currentElement = this.parentElement;
+    while (currentElement) {
+      if (currentElement instanceof BaseComponent) {
+        const parentNode = AppTree.findByInstance(currentElement);
+        if (parentNode) {
+          return parentNode;
+        }
+        if (currentElement.appNode) {
+          return currentElement.appNode;
+        }
+      }
+      if (currentElement instanceof ShadowRoot) {
+        currentElement = currentElement.host;
+      } else {
+        currentElement = currentElement.parentElement;
+      }
+    }
+    return void 0;
+  }
+  disconnectedCallback() {
+    if (this.appNode?.container) {
+      this.appNode.container.dispose();
+    }
+    if (this.#globalStylesheetIds.length > 0) {
+      globalStylesheets.unregister(this.#globalStylesheetIds);
+      this.#globalStylesheetIds = [];
+    }
+    if (this.#documentStylesheetIds.length > 0) {
+      globalStylesheets.unregisterDocumentStyles(this.#documentStylesheetIds);
+      this.#documentStylesheetIds = [];
+    }
+    if (this.appNode) {
+      AppTree.unregisterInstance(this.appNode);
+    }
+    this.behaviorManager.disconnectAll();
+    if (typeof this.onDisconnected === "function") {
+      this.onDisconnected();
+    }
+  }
+  /**
+  * Registra las stylesheets @Shared si este componente las declara.
+  */
+  registerSharedStylesheetsIfNeeded() {
+    const metadata = AppTree.getMetadata(
+      this.constructor
+    );
+    if (metadata?.sharedStylesClasses && metadata.sharedStylesClasses.length > 0) {
+      this.#globalStylesheetIds = globalStylesheets.registerShared(
+        metadata.sharedStylesClasses,
+        this
+      );
+    }
+  }
+  /**
+   * Registra las stylesheets @ForDocument si este componente las declara.
+   */
+  registerDocumentStylesIfNeeded() {
+    const metadata = AppTree.getMetadata(
+      this.constructor
+    );
+    if (metadata?.documentStylesClasses && metadata.documentStylesClasses.length > 0) {
+      this.#documentStylesheetIds = globalStylesheets.registerDocument(
+        metadata.documentStylesClasses,
+        this
+      );
+    }
+  }
+  /**
+  * Adopta todas las stylesheets @Shared registradas en el shadow root.
+  */
+  adoptSharedStylesheets() {
+    if (!this.shadowRoot) {
+      console.warn("Cannot adopt shared stylesheets: shadow root not available");
+      return;
+    }
+    const sharedSheets = globalStylesheets.getSharedStylesheets();
+    if (sharedSheets.length > 0) {
+      const existingSheets = this.shadowRoot.adoptedStyleSheets;
+      const existingArray = Array.from(existingSheets);
+      const sharedInExisting = sharedSheets.filter((ss) => existingArray.includes(ss));
+      if (sharedInExisting.length === sharedSheets.length) {
+        return;
+      }
+      const filteredExisting = existingArray.filter((sheet) => !sharedSheets.includes(sheet));
+      const newSheets = [...sharedSheets, ...filteredExisting];
+      this.shadowRoot.adoptedStyleSheets = newSheets;
+    }
+  }
+  /**
+  * Adopta las stylesheets LOCALES de este componente específico.
+  */
+  adoptLocalStylesheet() {
+    if (!this.shadowRoot) {
+      console.warn("Cannot adopt local stylesheet: shadow root not available");
+      return;
+    }
+    const metadata = AppTree.getMetadata(
+      this.constructor
+    );
+    if (metadata?.stylesClass) {
+      const stylesInstance = new metadata.stylesClass();
+      const stylesheet = stylesInstance.getStyleSheet();
+      this.shadowRoot.adoptedStyleSheets = [
+        ...this.shadowRoot.adoptedStyleSheets,
+        stylesheet
+      ];
+      stylesInstance.setHost(this);
+    }
+  }
+  initializeContexts() {
+    if (this._pendingContextInitializers) {
+      this._pendingContextInitializers.forEach((initializer) => {
+        initializer();
+      });
+      this._pendingContextInitializers = [];
+    }
+  }
+  initializeResources() {
+    const resourceInitializers = this.constructor[RESOURCE_PROPERTY_KEYS] || [];
+    for (const { key, source } of resourceInitializers) {
+      const resource = createResource(
+        (signal) => source.call(this, signal)
+      );
+      this[key] = resource;
+    }
+  }
+  jsx(type, props) {
+    if (type == null) {
+      return null;
+    }
+    if (type === Fragment) {
+      return props.children;
+    }
+    const { children, ...restProps } = props || {};
+    if (typeof type === "function" && type.prototype instanceof BaseComponent) {
+      return this.createAndRenderComponent(type, restProps, children);
+    }
+    if (typeof type === "function") {
+      const result = type({ ...restProps, children });
+      if (typeof result === "function") {
+        return result();
+      }
+      return result;
+    }
+    if (typeof type === "string") {
+      return this.createNativeElement(
+        type,
+        restProps,
+        ...this.normalizeChildren(children)
+      );
+    }
+    throw new Error(`Unknown component type: ${typeof type} - ${type}`);
+  }
+  jsxDEV(type, props) {
+    return this.jsx(type, props);
+  }
+  jsxs(type, props) {
+    return this.jsx(type, props);
+  }
+  /**
+   * Aplica className al host element del componente.
+   */
+  applyClassNameToHost(instance, classNameValue) {
+    if (typeof classNameValue === "object" && classNameValue?.isSignal) {
+      import("../reactivity/signals/effect.js").then(({ effect }) => {
+        effect(() => {
+          const className = classNameValue.get();
+          this.setHostClassName(instance, className);
+        }, { priority: "Frame" });
+      });
+    } else if (typeof classNameValue === "function") {
+      import("../reactivity/signals/effect.js").then(({ effect }) => {
+        effect(() => {
+          const className = classNameValue();
+          this.setHostClassName(instance, className);
+        }, { priority: "Frame" });
+      });
+    } else {
+      this.setHostClassName(instance, classNameValue);
+    }
+  }
+  /**
+   * Establece las clases CSS en el host element.
+   */
+  setHostClassName(instance, className) {
+    if (!className) return;
+    const classStr = Array.isArray(className) ? className.join(" ") : String(className);
+    if (classStr.trim()) {
+      instance.className = classStr.trim();
+    }
+  }
+  createAndRenderComponent(ComponentClass, props, children) {
+    let instance;
+    reactiveContext.untrack(() => {
+      instance = new ComponentClass();
+      const tagName = this.convertClassNameToTagName(ComponentClass.name);
+      Object.defineProperty(instance, "tagName", {
+        value: tagName.toUpperCase(),
+        configurable: false,
+        enumerable: true
+      });
+      Object.defineProperty(instance, "nodeName", {
+        value: tagName.toUpperCase(),
+        configurable: false,
+        enumerable: true
+      });
+      const node = AppTree.registerInstance(instance, this.appNode);
+      instance.appNode = node;
+      const childMetadata = AppTree.getMetadata(ComponentClass);
+      if (childMetadata?.services?.length) {
+        BaseComponent.bootstrapServicesForNode(node, childMetadata, true);
+      }
+      BaseComponent.assignContainer(instance, node);
+      if (props) {
+        Object.keys(props).forEach((key) => {
+          if (key === "children") return;
+          if (key === "className" || key === "class") {
+            this.applyClassNameToHost(instance, props[key]);
+          } else {
+            instance[key] = props[key];
+          }
+        });
+      }
+      instance.initializeForJSX();
+      const view = instance.view();
+      if (view instanceof Node && instance.shadowRoot) {
+        instance.shadowRoot.appendChild(view);
+      } else if (Array.isArray(view) && instance.shadowRoot) {
+        view.forEach((child) => renderChild(instance.shadowRoot, child));
+      }
+      if (children) {
+        const normalizedChildren = this.normalizeChildren(children);
+        normalizedChildren.forEach((child) => {
+          renderChild(instance, child);
+        });
+      }
+    });
+    return instance;
+  }
+  createNativeElement(type, props, ...children) {
+    const el = document.createElement(type);
+    if (props) {
+      bindProps(el, props, this.behaviorManager);
+    }
+    const flatChildren = children.flat();
+    flatChildren.forEach((child) => renderChild(el, child));
+    return el;
+  }
+  normalizeChildren(children) {
+    if (!children) return [];
+    return Array.isArray(children) ? children : [children];
+  }
+  convertClassNameToTagName(className) {
+    return className.replace(/_/g, "-").replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+  }
+}
+export {
+  BaseComponent
+};

package/dist/components/decorators/component.d.ts

@@ -0,0 +1,27 @@
+import { BaseStyleSheet } from '../../styles/base-style-sheet';
+export interface ComponentConfig {
+    /**
+     * Clase(s) de estilos del componente.
+     * El scope se determina por el decorador de cada clase:
+     * - Sin decorador: Local
+     * - @Shared: Shadow roots
+     * - @ForDocument: Documento
+     */
+    styles?: (new () => BaseStyleSheet) | (new () => BaseStyleSheet)[];
+    /**
+     * Si es false, el componente no usará Shadow DOM.
+     * Por defecto es true (usa Shadow DOM).
+     * Útil para componentes que necesitan heredar estilos del documento (ej: Link con activeClass).
+     */
+    useShadowDOM?: boolean;
+    /**
+     * Servicios que este componente provee a sí mismo y a sus hijos.
+     * Los hijos resuelven servicios subiendo por el árbol de componentes.
+     */
+    services?: (new (...args: any[]) => any)[];
+}
+/**
+ * Decorador @Component para registrar componentes web.
+ * Uso: @Component() o @Component({ styles: [MyStyles] })
+ */
+export declare function Component(config?: ComponentConfig): any;

package/dist/components/decorators/component.js

@@ -0,0 +1,47 @@
+import { RESOURCE_PROPERTY_KEYS } from "../../reactivity/decorators/resource.js";
+import { AppTree } from "../app-tree.js";
+import { getStyleScope } from "../../styles/decorators/scope.js";
+function convertClassNameToTagName(className) {
+  const kebabCase = className.replace(/_/g, "-").replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+  return `use-${kebabCase}`;
+}
+function Component(config = {}) {
+  return function(ComponentClass, context) {
+    const tagName = convertClassNameToTagName(ComponentClass.name);
+    const resourceKeys = context?.metadata?.resourceKeys || [];
+    ComponentClass[RESOURCE_PROPERTY_KEYS] = resourceKeys;
+    let categorizedStyles = {
+      local: [],
+      shared: [],
+      document: []
+    };
+    if (config?.styles) {
+      const stylesArray = Array.isArray(config.styles) ? config.styles : [config.styles];
+      stylesArray.forEach((StyleClass) => {
+        const scope = getStyleScope(StyleClass);
+        categorizedStyles[scope].push(StyleClass);
+      });
+    }
+    AppTree.registerMetadata({
+      tagName,
+      componentClass: ComponentClass,
+      resourceKeys,
+      stylesClass: categorizedStyles.local[0],
+      localStyles: categorizedStyles.local.length > 0 ? categorizedStyles.local : void 0,
+      sharedStylesClasses: categorizedStyles.shared.length > 0 ? categorizedStyles.shared : void 0,
+      documentStylesClasses: categorizedStyles.document.length > 0 ? categorizedStyles.document : void 0,
+      useShadowDOM: config.useShadowDOM !== false,
+      // Por defecto true
+      services: config.services
+    });
+    if (!customElements.get(tagName)) {
+      customElements.define(tagName, ComponentClass);
+    } else {
+      console.warn(`[Component] ⚠ Tag "${tagName}" ya registrado`);
+    }
+    return ComponentClass;
+  };
+}
+export {
+  Component
+};

package/dist/components/decorators/prop.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @Prop decorator for component properties that may receive reactive expressions.
+ *
+ * When a prop receives a zero-argument function (a reactive getter from the parent),
+ * this decorator automatically unwraps it on access, creating a direct reactive
+ * subscription from the child to the parent's signals.
+ *
+ * For non-function values or callback functions (with parameters), the value is
+ * returned as-is.
+ *
+ * When used in a @Behavior class, this decorator also registers the prop name
+ * in the behavior's metadata for the PropertyRegistry to resolve.
+ */
+export declare function Prop<This extends object, Value>(target: undefined, context: ClassFieldDecoratorContext<This, Value>): (this: This, initialValue: Value) => Value;

package/dist/components/decorators/prop.js

@@ -0,0 +1,37 @@
+import { BEHAVIOR_PROPS } from "../../behaviors/constants.js";
+function Prop(target, context) {
+  if (context.kind !== "field") {
+    throw new Error("@Prop can only be applied to class fields.");
+  }
+  const storageKey = Symbol(`prop_storage_${String(context.name)}`);
+  const metadata = context.metadata;
+  if (!metadata[BEHAVIOR_PROPS]) {
+    metadata[BEHAVIOR_PROPS] = /* @__PURE__ */ new Set();
+  }
+  metadata[BEHAVIOR_PROPS].add(String(context.name));
+  return function(initialValue) {
+    this[storageKey] = initialValue;
+    Object.defineProperty(this, context.name, {
+      get: () => {
+        const storedValue = this[storageKey];
+        const propName = String(context.name);
+        if (propName.startsWith("on") && propName.length > 2) {
+          return storedValue;
+        }
+        if (typeof storedValue === "function" && storedValue.length === 0) {
+          return storedValue();
+        }
+        return storedValue;
+      },
+      set: (newValue) => {
+        this[storageKey] = newValue;
+      },
+      enumerable: true,
+      configurable: true
+    });
+    return initialValue;
+  };
+}
+export {
+  Prop
+};

package/dist/components/types.d.ts

@@ -0,0 +1,26 @@
+import { BaseComponent } from './base-component';
+import { BaseStyleSheet } from '../styles/base-style-sheet';
+import { ScopedContainer } from '../DI/scoped-container';
+export type Constructor<T = {}> = new (...args: any[]) => T;
+export type ComponentMetadata = {
+    tagName: string;
+    componentClass: Constructor<any>;
+    routePath?: string;
+    viewPropertyName?: string;
+    resourceKeys: string[];
+    stylesClass?: new () => BaseStyleSheet;
+    localStyles?: Constructor<any>[];
+    sharedStylesClasses?: Constructor<any>[];
+    documentStylesClasses?: Constructor<any>[];
+    useShadowDOM?: boolean;
+    services?: Constructor[];
+};
+export interface INode {
+    id: string;
+    metadata: ComponentMetadata;
+    instance: BaseComponent;
+    parent?: INode;
+    children: INode[];
+    contextStore?: object;
+    container?: ScopedContainer;
+}

package/dist/core.d.ts

@@ -0,0 +1,23 @@
+import { Router } from './router/router';
+import { Trie } from './router/trie';
+import { PolicyEvaluator } from './router/policy-evaluator';
+import { EventEmitter } from './events-handler/event-emitter.service';
+/**
+ * Core framework services.
+ * Include these in your root component's services array.
+ *
+ * @example
+ * ```typescript
+ * import { BaseComponent, Component, core, RouteView } from '@v-ibe/core';
+ *
+ * @Component({
+ *   services: [...core, AuthService, MyPolicy]
+ * })
+ * export class App extends BaseComponent {
+ *   view() {
+ *     return <RouteView />;
+ *   }
+ * }
+ * ```
+ */
+export declare const core: (typeof Trie | typeof PolicyEvaluator | typeof Router | typeof EventEmitter)[];

package/dist/core.js

@@ -0,0 +1,8 @@
+import { Router } from "./router/router.js";
+import { Trie } from "./router/trie.js";
+import { PolicyEvaluator } from "./router/policy-evaluator.js";
+import { EventEmitter } from "./events-handler/event-emitter.service.js";
+const core = [Router, Trie, PolicyEvaluator, EventEmitter];
+export {
+  core
+};

package/dist/custom-components/__tests__/for.test.d.ts

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

package/dist/custom-components/__tests__/show.test.d.ts

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

package/dist/custom-components/for.d.ts

@@ -0,0 +1,58 @@
+import { ISignal } from '../reactivity/signals/signal';
+import { ReactiveArray } from '../reactivity/signals/reactive-array';
+/**
+ * Props del componente For
+ */
+export interface ForProps<T> {
+    /**
+     * Array de items a renderizar.
+     * Para granularidad fina óptima, debe ser un ReactiveArray (via @State).
+     * También acepta: Signal<T[]>, función, o array plano.
+     */
+    each: T[] | (() => T[]) | ISignal<T[]> | ReactiveArray<T>;
+    /**
+     * Función de render para cada item.
+     * IMPORTANTE: Esta función se ejecuta DENTRO de un effect individual por item.
+     * Cambios en array[i] solo re-ejecutan el effect del índice i.
+     */
+    children: (item: T, index: number) => any;
+    /**
+     * Elemento a mostrar cuando el array está vacío.
+     */
+    fallback?: any;
+    /**
+     * Función para extraer key única de cada item.
+     * Si no se provee, usa auto-keying (id, key, _id, uuid).
+     * Para granularidad óptima, es mejor que los items tengan IDs estables.
+     */
+    getKey?: (item: T, index: number) => string | number;
+}
+/**
+ * For - Helper con granularidad fina para listas
+ *
+ * @example Granularidad fina con @State
+ * ```tsx
+ * @Component
+ * class TodoList extends BaseComponent {
+ *   @State todos: Todo[] = [...];
+ *
+ *   view() {
+ *     return (
+ *       <For each={this.todos}>
+ *         {(todo) => <TodoItem key={todo.id} todo={todo} />}
+ *       </For>
+ *     );
+ *   }
+ * }
+ * // Solo los TodoItem que cambian se re-renderizan
+ * ```
+ *
+ * @example Con array plano (sin granularidad fina)
+ * ```tsx
+ * <For each={[1, 2, 3]}>
+ *   {(n) => <div>{n}</div>}
+ * </For>
+ * // Funciona, pero re-renderiza todo cuando cambia
+ * ```
+ */
+export declare function For<T>(props: ForProps<T>): DocumentFragment;