@v-ibe/core 0.1.0

package/dist/styles/decorators/useStyles.js

@@ -0,0 +1,29 @@
+function UseStyles(StylesConstructor) {
+  return function(target, context) {
+    if (context.kind !== "class") {
+      throw new Error(
+        "@UseStyles solo puede aplicarse a clases de componentes."
+      );
+    }
+    return class extends target {
+      constructor(...args) {
+        super(...args);
+        try {
+          const stylesInstance = new StylesConstructor();
+          stylesInstance.setHost(this);
+          Object.defineProperty(this, "styles", {
+            value: stylesInstance,
+            writable: false,
+            enumerable: true,
+            configurable: false
+          });
+        } catch (error) {
+          console.error("❌ [UseStyles] Error inicializando estilos:", error);
+        }
+      }
+    };
+  };
+}
+export {
+  UseStyles
+};

package/dist/styles/global-styles-registry.d.ts

@@ -0,0 +1,72 @@
+import { BaseComponent } from '../components/base-component';
+import { Constructor } from '../components/types';
+declare class GlobalStylesheetsRegistry {
+    /**
+     * Array de estilos @Shared para shadow roots.
+     * El orden es importante: las primeras en el array son las primeras
+     * en aplicarse (menor especificidad en la cascada CSS).
+     */
+    private sharedEntries;
+    /**
+     * Array de estilos @ForDocument para el documento.
+     */
+    private documentEntries;
+    /**
+     * NUEVO: Registra estilos @Shared (para shadow roots).
+     * Este método es llamado cuando un componente con estilos @Shared se inicializa.
+     *
+     * @param styleClasses Array de clases decoradas con @Shared
+     * @param ownerComponent El componente que está registrando estos estilos
+     * @returns Array de símbolos que identifican cada registro
+     */
+    registerShared(styleClasses: Constructor<any>[], ownerComponent: BaseComponent): symbol[];
+    /**
+     * NUEVO: Registra estilos @ForDocument (para el documento real).
+     *
+     * @param styleClasses Array de clases decoradas con @ForDocument
+     * @param ownerComponent El componente que está registrando estos estilos
+     * @returns Array de símbolos que identifican cada registro
+     */
+    registerDocument(styleClasses: Constructor<any>[], ownerComponent: BaseComponent): symbol[];
+    /**
+     * Método universal de registro que categoriza automáticamente por scope.
+     *
+     * @param styleClasses Array de clases de estilos (pueden tener diferentes scopes)
+     * @param ownerComponent El componente que está registrando estos estilos
+     * @returns Array de símbolos que identifican cada registro
+     */
+    register(styleClasses: Constructor<any>[], ownerComponent: BaseComponent): symbol[];
+    /**
+     * Elimina estilos globales registrados por un componente.
+     *
+     * @param ids Array de símbolos que identifican qué registros eliminar
+     */
+    unregister(ids: symbol[]): void;
+    /**
+     * Alias para unregister - mantiene compatibilidad con código antiguo
+     */
+    unregisterDocumentStyles(ids: symbol[]): void;
+    /**
+     * Obtiene todas las stylesheets @Shared activas.
+     * Este método es llamado por cada componente para adoptar estilos compartidos.
+     *
+     * @returns Array de CSSStyleSheet instances listas para ser adoptadas
+     */
+    getSharedStylesheets(): CSSStyleSheet[];
+    /**
+     * DEPRECATED: Usa getSharedStylesheets() en su lugar.
+     * Mantenido por compatibilidad temporal.
+     */
+    getStylesheets(): CSSStyleSheet[];
+    /**
+     * Información de debug para desarrollo.
+     */
+    getDebugInfo(): {
+        sharedCount: number;
+        documentCount: number;
+        sharedOwners: string[];
+        documentOwners: string[];
+    };
+}
+export declare const globalStylesheets: GlobalStylesheetsRegistry;
+export {};

package/dist/styles/global-styles-registry.js

@@ -0,0 +1,155 @@
+import { getStyleScope } from "./decorators/scope.js";
+class GlobalStylesheetsRegistry {
+  constructor() {
+    this.sharedEntries = [];
+    this.documentEntries = [];
+  }
+  /**
+   * NUEVO: Registra estilos @Shared (para shadow roots).
+   * Este método es llamado cuando un componente con estilos @Shared se inicializa.
+   *
+   * @param styleClasses Array de clases decoradas con @Shared
+   * @param ownerComponent El componente que está registrando estos estilos
+   * @returns Array de símbolos que identifican cada registro
+   */
+  registerShared(styleClasses, ownerComponent) {
+    const registeredIds = [];
+    for (const StyleClass of styleClasses) {
+      const styleInstance = new StyleClass();
+      styleInstance.setHost(ownerComponent);
+      const stylesheet = styleInstance.getStyleSheet();
+      const id = Symbol(`shared-stylesheet-${StyleClass.name}`);
+      const entry = {
+        stylesheet,
+        ownerComponent,
+        styleClass: StyleClass,
+        id,
+        styleInstance
+      };
+      this.sharedEntries.push(entry);
+      registeredIds.push(id);
+    }
+    return registeredIds;
+  }
+  /**
+   * NUEVO: Registra estilos @ForDocument (para el documento real).
+   *
+   * @param styleClasses Array de clases decoradas con @ForDocument
+   * @param ownerComponent El componente que está registrando estos estilos
+   * @returns Array de símbolos que identifican cada registro
+   */
+  registerDocument(styleClasses, ownerComponent) {
+    const registeredIds = [];
+    for (const StyleClass of styleClasses) {
+      const styleInstance = new StyleClass();
+      styleInstance.setHost(ownerComponent);
+      styleInstance.applyToDocument();
+      const id = Symbol(`document-stylesheet-${StyleClass.name}`);
+      const entry = {
+        styleInstance,
+        ownerComponent,
+        styleClass: StyleClass,
+        id
+      };
+      this.documentEntries.push(entry);
+      registeredIds.push(id);
+    }
+    return registeredIds;
+  }
+  /**
+   * Método universal de registro que categoriza automáticamente por scope.
+   *
+   * @param styleClasses Array de clases de estilos (pueden tener diferentes scopes)
+   * @param ownerComponent El componente que está registrando estos estilos
+   * @returns Array de símbolos que identifican cada registro
+   */
+  register(styleClasses, ownerComponent) {
+    const categorized = {
+      shared: [],
+      document: []
+    };
+    for (const StyleClass of styleClasses) {
+      const scope = getStyleScope(StyleClass);
+      if (scope === "shared") {
+        categorized.shared.push(StyleClass);
+      } else if (scope === "document") {
+        categorized.document.push(StyleClass);
+      } else {
+        console.warn(
+          `[GlobalStyles] ⚠️ ${StyleClass.name} no tiene decorador @Shared ni @ForDocument. Los estilos globales deben usar uno de estos decoradores.`
+        );
+      }
+    }
+    const ids = [];
+    if (categorized.shared.length > 0) {
+      ids.push(...this.registerShared(categorized.shared, ownerComponent));
+    }
+    if (categorized.document.length > 0) {
+      ids.push(...this.registerDocument(categorized.document, ownerComponent));
+    }
+    return ids;
+  }
+  /**
+   * Elimina estilos globales registrados por un componente.
+   *
+   * @param ids Array de símbolos que identifican qué registros eliminar
+   */
+  unregister(ids) {
+    for (const id of ids) {
+      const sharedIndex = this.sharedEntries.findIndex((entry) => entry.id === id);
+      if (sharedIndex !== -1) {
+        const entry = this.sharedEntries[sharedIndex];
+        if (entry.styleInstance && typeof entry.styleInstance.dispose === "function") {
+          entry.styleInstance.dispose();
+        }
+        this.sharedEntries.splice(sharedIndex, 1);
+        continue;
+      }
+      const docIndex = this.documentEntries.findIndex((entry) => entry.id === id);
+      if (docIndex !== -1) {
+        const entry = this.documentEntries[docIndex];
+        if (entry.styleInstance && typeof entry.styleInstance.dispose === "function") {
+          entry.styleInstance.dispose();
+        }
+        this.documentEntries.splice(docIndex, 1);
+      }
+    }
+  }
+  /**
+   * Alias para unregister - mantiene compatibilidad con código antiguo
+   */
+  unregisterDocumentStyles(ids) {
+    this.unregister(ids);
+  }
+  /**
+   * Obtiene todas las stylesheets @Shared activas.
+   * Este método es llamado por cada componente para adoptar estilos compartidos.
+   *
+   * @returns Array de CSSStyleSheet instances listas para ser adoptadas
+   */
+  getSharedStylesheets() {
+    return this.sharedEntries.map((entry) => entry.stylesheet);
+  }
+  /**
+   * DEPRECATED: Usa getSharedStylesheets() en su lugar.
+   * Mantenido por compatibilidad temporal.
+   */
+  getStylesheets() {
+    return this.getSharedStylesheets();
+  }
+  /**
+   * Información de debug para desarrollo.
+   */
+  getDebugInfo() {
+    return {
+      sharedCount: this.sharedEntries.length,
+      documentCount: this.documentEntries.length,
+      sharedOwners: this.sharedEntries.map((e) => e.ownerComponent.constructor.name),
+      documentOwners: this.documentEntries.map((e) => e.ownerComponent.constructor.name)
+    };
+  }
+}
+const globalStylesheets = new GlobalStylesheetsRegistry();
+export {
+  globalStylesheets
+};

package/dist/types.d.ts

@@ -0,0 +1 @@
+type Constructor<T = {}> = new (...args: any[]) => T;

package/dist/vite-plugins/__tests__/jsx-control-flow-transform.test.d.ts

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

package/dist/vite-plugins/index.d.ts

@@ -0,0 +1,4 @@
+export { jsxContextualPlugin } from './jsx-contextual';
+export { jsxControlFlowPlugin } from './jsx-control-flow-transform';
+export { jsxSignalsPlugin } from './jsx-signals';
+export { routeGeneratorPlugin, type RouteGeneratorPluginOptions } from './router/route-generator-plugin';

package/dist/vite-plugins/index.js

@@ -0,0 +1,10 @@
+import { jsxContextualPlugin } from "./jsx-contextual.js";
+import { jsxControlFlowPlugin } from "./jsx-control-flow-transform.js";
+import { jsxSignalsPlugin } from "./jsx-signals.js";
+import { routeGeneratorPlugin } from "./router/route-generator-plugin.js";
+export {
+  jsxContextualPlugin,
+  jsxControlFlowPlugin,
+  jsxSignalsPlugin,
+  routeGeneratorPlugin
+};

package/dist/vite-plugins/jsx-contextual.d.ts

@@ -0,0 +1,7 @@
+import { Plugin } from 'vite';
+/**
+ * Transforma TODAS las llamadas a `jsx`, `jsxs`, `jsxDEV`
+ * en `this.jsx`, `this.jsxs`, `this.jsxDEV`
+ * incluso si están anidadas.
+ */
+export declare function jsxContextualPlugin(): Plugin;

package/dist/vite-plugins/jsx-contextual.js

@@ -0,0 +1,53 @@
+import ts__default from "typescript";
+function jsxContextualPlugin() {
+  return {
+    name: "vite-plugin-jsx-contextual",
+    enforce: "post",
+    // Run AFTER esbuild transforms JSX
+    transform(code, id) {
+      if (!id.endsWith(".tsx") && !id.endsWith(".jsx")) return;
+      const sourceFile = ts__default.createSourceFile(
+        id,
+        code,
+        ts__default.ScriptTarget.Latest,
+        true,
+        ts__default.ScriptKind.TSX
+      );
+      const transformerFactory = (context) => {
+        const visitor = (node) => {
+          if (ts__default.isCallExpression(node)) {
+            if (ts__default.isIdentifier(node.expression) && ["jsx", "jsxs", "jsxDEV"].includes(node.expression.text)) {
+              const newExpr = ts__default.factory.createPropertyAccessExpression(
+                ts__default.factory.createThis(),
+                ts__default.factory.createIdentifier(node.expression.text)
+              );
+              const newArgs = node.arguments.map(
+                (arg) => ts__default.visitNode(arg, visitor)
+              );
+              return ts__default.factory.updateCallExpression(
+                node,
+                newExpr,
+                node.typeArguments,
+                newArgs
+              );
+            }
+          }
+          return ts__default.visitEachChild(node, visitor, context);
+        };
+        return (sf) => ts__default.visitEachChild(sf, visitor, context);
+      };
+      const result = ts__default.transform(sourceFile, [transformerFactory]);
+      const transformed = result.transformed[0];
+      const printer = ts__default.createPrinter({ newLine: ts__default.NewLineKind.LineFeed });
+      const newCode = printer.printFile(transformed);
+      result.dispose();
+      return {
+        code: newCode,
+        map: null
+      };
+    }
+  };
+}
+export {
+  jsxContextualPlugin
+};

package/dist/vite-plugins/jsx-control-flow-transform.d.ts

@@ -0,0 +1,60 @@
+import { Plugin } from 'vite';
+export declare function jsxControlFlowPlugin(): Plugin;
+/**
+ * EJEMPLO DE TRANSFORMACIÓN
+ *
+ * INPUT:
+ * ```tsx
+ * <For each={this.items}>
+ *   {(item, index) => (
+ *     <div key={item.id}>{item.name}</div>
+ *   )}
+ * </For>
+ * ```
+ *
+ * OUTPUT:
+ * ```tsx
+ * For({
+ *   each: this.items,
+ *   children: (item, index) => (
+ *     <div key={item.id}>{item.name}</div>
+ *   )
+ * })
+ * ```
+ *
+ * ---
+ *
+ * INPUT:
+ * ```tsx
+ * <Show when={this.isVisible} fallback={<Loading />}>
+ *   <Content />
+ * </Show>
+ * ```
+ *
+ * OUTPUT:
+ * ```tsx
+ * Show({
+ *   when: this.isVisible,
+ *   fallback: <Loading />,
+ *   children: <Content />
+ * })
+ * ```
+ *
+ * ---
+ *
+ * INPUT:
+ * ```tsx
+ * <For each={[]} fallback={<p>Empty</p>}>
+ *   {(item) => <div>{item}</div>}
+ * </For>
+ * ```
+ *
+ * OUTPUT:
+ * ```tsx
+ * For({
+ *   each: [],
+ *   fallback: <p>Empty</p>,
+ *   children: (item) => <div>{item}</div>
+ * })
+ * ```
+ */

package/dist/vite-plugins/jsx-control-flow-transform.js

@@ -0,0 +1,180 @@
+import ts__default from "typescript";
+const CONTROL_FLOW_COMPONENTS = /* @__PURE__ */ new Set([
+  "For",
+  "ForEach",
+  "IndexFor",
+  "Show",
+  "Switch"
+]);
+function jsxControlFlowPlugin() {
+  return {
+    name: "jsx-control-flow-transform",
+    enforce: "pre",
+    // Debe ejecutarse ANTES del transform de React/JSX
+    transform(code, id) {
+      if (!id.endsWith(".tsx") && !id.endsWith(".jsx")) {
+        return null;
+      }
+      const hasControlFlow = Array.from(CONTROL_FLOW_COMPONENTS).some(
+        (name) => {
+          const regex = new RegExp(`<${name}(?:\\s|>|/)`, "g");
+          return regex.test(code);
+        }
+      );
+      if (!hasControlFlow) {
+        return null;
+      }
+      const sourceFile = ts__default.createSourceFile(
+        id,
+        code,
+        ts__default.ScriptTarget.Latest,
+        true,
+        ts__default.ScriptKind.TSX
+      );
+      const transformer = (context) => {
+        const visit = (node) => {
+          if (ts__default.isJsxElement(node) || ts__default.isJsxSelfClosingElement(node)) {
+            const tagName = getJsxTagName(node);
+            if (CONTROL_FLOW_COMPONENTS.has(tagName)) {
+              const functionCall = transformControlFlowToFunctionCall(node);
+              if (isInsideJsx(node)) {
+                return ts__default.factory.createJsxExpression(void 0, functionCall);
+              }
+              return functionCall;
+            }
+          }
+          return ts__default.visitEachChild(node, visit, context);
+        };
+        return (sf) => ts__default.visitNode(sf, visit);
+      };
+      const result = ts__default.transform(sourceFile, [transformer]);
+      const transformedFile = result.transformed[0];
+      const printer = ts__default.createPrinter({
+        newLine: ts__default.NewLineKind.LineFeed,
+        removeComments: false
+      });
+      const newCode = printer.printFile(transformedFile);
+      result.dispose();
+      return {
+        code: newCode,
+        map: null
+      };
+    }
+  };
+}
+function isInsideJsx(node) {
+  let parent = node.parent;
+  if (parent && ts__default.isJsxElement(parent)) {
+    return true;
+  }
+  while (parent) {
+    if (ts__default.isJsxElement(parent) || ts__default.isJsxFragment(parent)) {
+      return true;
+    }
+    parent = parent.parent;
+  }
+  return false;
+}
+function getJsxTagName(node) {
+  if (ts__default.isJsxElement(node)) {
+    const openingElement = node.openingElement;
+    const tagNameNode = openingElement.tagName;
+    if (ts__default.isIdentifier(tagNameNode)) {
+      return tagNameNode.text;
+    }
+  } else if (ts__default.isJsxSelfClosingElement(node)) {
+    const tagNameNode = node.tagName;
+    if (ts__default.isIdentifier(tagNameNode)) {
+      return tagNameNode.text;
+    }
+  }
+  return "";
+}
+function transformControlFlowToFunctionCall(node, context) {
+  const tagName = getJsxTagName(node);
+  const attributes = ts__default.isJsxElement(node) ? node.openingElement.attributes : node.attributes;
+  let childrenExpression;
+  if (ts__default.isJsxElement(node)) {
+    const children = node.children;
+    if (children.length > 0) {
+      const validChildren = children.filter(
+        (child) => !ts__default.isJsxText(child) || child.text.trim().length > 0
+      );
+      if (validChildren.length === 1) {
+        const child = validChildren[0];
+        if (ts__default.isJsxExpression(child) && child.expression) {
+          childrenExpression = child.expression;
+        } else if (ts__default.isJsxElement(child) || ts__default.isJsxSelfClosingElement(child)) {
+          childrenExpression = child;
+        } else if (ts__default.isJsxText(child)) {
+          childrenExpression = ts__default.factory.createStringLiteral(child.text.trim());
+        }
+      } else if (validChildren.length > 1) {
+        const childElements = validChildren.map((child) => {
+          if (ts__default.isJsxExpression(child) && child.expression) {
+            return child.expression;
+          }
+          if (ts__default.isJsxElement(child) || ts__default.isJsxSelfClosingElement(child)) {
+            return child;
+          }
+          if (ts__default.isJsxText(child)) {
+            return ts__default.factory.createStringLiteral(child.text.trim());
+          }
+          return ts__default.factory.createNull();
+        });
+        childrenExpression = ts__default.factory.createArrayLiteralExpression(
+          childElements,
+          false
+        );
+      }
+    }
+  }
+  const propsProperties = [];
+  attributes.properties.forEach((prop) => {
+    if (ts__default.isJsxAttribute(prop)) {
+      const propName = ts__default.isIdentifier(prop.name) ? prop.name.text : prop.name.getText();
+      let propValue;
+      if (prop.initializer) {
+        if (ts__default.isJsxExpression(prop.initializer) && prop.initializer.expression) {
+          propValue = prop.initializer.expression;
+        } else if (ts__default.isStringLiteral(prop.initializer)) {
+          propValue = prop.initializer;
+        } else {
+          propValue = ts__default.factory.createTrue();
+        }
+      } else {
+        propValue = ts__default.factory.createTrue();
+      }
+      propsProperties.push(
+        ts__default.factory.createPropertyAssignment(
+          ts__default.factory.createIdentifier(propName),
+          propValue
+        )
+      );
+    }
+  });
+  if (childrenExpression) {
+    propsProperties.push(
+      ts__default.factory.createPropertyAssignment(
+        ts__default.factory.createIdentifier("children"),
+        childrenExpression
+      )
+    );
+  }
+  const propsObject = ts__default.factory.createObjectLiteralExpression(
+    propsProperties,
+    true
+  );
+  const functionCall = ts__default.factory.createCallExpression(
+    ts__default.factory.createIdentifier(tagName),
+    // Function name
+    void 0,
+    // Type arguments
+    [propsObject]
+    // Arguments
+  );
+  return functionCall;
+}
+export {
+  jsxControlFlowPlugin
+};

package/dist/vite-plugins/jsx-signals.d.ts

@@ -0,0 +1,2 @@
+import { Plugin } from 'vite';
+export declare function jsxSignalsPlugin(): Plugin;