@nano-app/frontend 0.3.2 → 0.3.4

package/bin/generate-stores.mjs

@@ -0,0 +1,128 @@
+#!/usr/bin/env node
+
+import { createRequire } from "module";
+import { readdirSync, mkdirSync, writeFileSync, existsSync } from "fs";
+import { resolve, join } from "path";
+
+const cwd = process.cwd();
+const srcDir = join(cwd, "src");
+const outDir = join(cwd, "node_modules", "@nano-app", "frontend", "dist");
+const outFile = join(outDir, "auto-register.mjs");
+
+// Busca recursivamente archivos *.store.ts
+function findStoreFiles(dir) {
+  const results = [];
+  if (!existsSync(dir)) return results;
+
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) {
+      results.push(...findStoreFiles(fullPath));
+    } else if (entry.isFile() && entry.name.endsWith(".store.ts")) {
+      results.push(fullPath);
+    }
+  }
+  return results;
+}
+
+// Importa un archivo .ts usando jiti (transpilador de Next.js)
+function loadStoreFile(filePath) {
+  try {
+    const jitiPath = resolve(cwd, "node_modules", "jiti", "lib", "jiti.cjs");
+    const require = createRequire(import.meta.url);
+    const jiti = require(jitiPath);
+    const load = jiti(filePath, { interopDefault: true });
+    const mod = load(filePath);
+    return mod?.default ?? mod;
+  } catch (err) {
+    console.error(`  [ERROR] No se pudo cargar ${filePath}: ${err.message}`);
+    return null;
+  }
+}
+
+// Valida que el objeto tenga la forma correcta
+function validateEntry(entry, filePath) {
+  if (!entry || typeof entry !== "object") {
+    console.warn(`  [WARN] ${filePath}: el export default no es un objeto, se ignora.`);
+    return false;
+  }
+  if (entry.type !== "app" && entry.type !== "api") {
+    console.warn(`  [WARN] ${filePath}: type debe ser "app" o "api", se ignora.`);
+    return false;
+  }
+  if (entry.type === "api" && !entry.path) {
+    console.warn(`  [WARN] ${filePath}: type "api" requiere un campo "path", se ignora.`);
+    return false;
+  }
+  return true;
+}
+
+// Serializa el objeto de datos a string JS (soporta funciones)
+function serialize(value, indent = 0) {
+  const pad = "  ".repeat(indent);
+  const padInner = "  ".repeat(indent + 1);
+
+  if (value === null) return "null";
+  if (value === undefined) return "undefined";
+  if (typeof value === "function") return value.toString();
+  if (typeof value === "string") return JSON.stringify(value);
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+
+  if (Array.isArray(value)) {
+    if (value.length === 0) return "[]";
+    const items = value.map((v) => `${padInner}${serialize(v, indent + 1)}`).join(",\n");
+    return `[\n${items}\n${pad}]`;
+  }
+
+  if (typeof value === "object") {
+    const entries = Object.entries(value);
+    if (entries.length === 0) return "{}";
+    const lines = entries
+      .map(([k, v]) => `${padInner}${JSON.stringify(k)}: ${serialize(v, indent + 1)}`)
+      .join(",\n");
+    return `{\n${lines}\n${pad}}`;
+  }
+
+  return String(value);
+}
+
+// ─── Main ────────────────────────────────────────────────────────────────────
+
+const storeFiles = findStoreFiles(srcDir);
+console.log(`\n[nano-app] Buscando archivos *.store.ts en ${srcDir}`);
+console.log(`[nano-app] Encontrados: ${storeFiles.length}\n`);
+
+const entries = [];
+
+for (const filePath of storeFiles) {
+  console.log(`  Procesando: ${filePath.replace(cwd, ".")}`);
+  const mod = loadStoreFile(filePath);
+  if (mod && validateEntry(mod, filePath)) {
+    const name = filePath
+      .replace(srcDir, "")
+      .replace(/\\/g, "/")
+      .replace(/^\//, "")
+      .replace(/\.store\.ts$/, "")
+      .split("/")
+      .pop();
+
+    entries.push({ name, ...mod });
+    console.log(`  ✓ Store "${name}" (${mod.type})`);
+  }
+}
+
+// Genera el archivo de salida
+mkdirSync(outDir, { recursive: true });
+
+const serializedEntries = entries
+  .map((entry) => `  ${serialize(entry, 1)}`)
+  .join(",\n");
+
+const output = `// Auto-generado por @nano-app
+// No editar manualmente.
+export default [\n${serializedEntries}\n];\n`;
+
+writeFileSync(outFile, output, "utf-8");
+
+console.log(`\n[nano-app] Archivo generado: ${outFile.replace(cwd, ".")}`);
+console.log(`[nano-app] Stores registrados: ${entries.map((e) => `"${e.name}"`).join(", ") || "(ninguno — se usará store app vacío)"}\n`);

package/dist/auto-register.mjs

@@ -0,0 +1,327 @@
+// Auto-generado por @nano-app
+// No editar manualmente.
+export default [
+  {
+    "name": "api",
+    "type": "api",
+    "path": "/api",
+    "data": {
+      "busy": true,
+      "DefaultItems": [],
+      "UserStatusItems": [
+        {
+          "key": "SUSPENDED",
+          "text": "Suspendido"
+        },
+        {
+          "key": "PENDING",
+          "text": "Pendiente"
+        },
+        {
+          "key": "ACTIVE",
+          "text": "Activo"
+        }
+      ]
+    }
+  },
+  {
+    "name": "app",
+    "type": "app",
+    "data": {
+      "login": {
+        "isRegister": false
+      },
+      "navbar": {
+        "tabs": [],
+        "selectedTabKey": "home",
+        "selectedTab": {},
+        "isMenuOpen": false
+      },
+      "form": {
+        "data": {},
+        "validate": []
+      },
+      "drawer": {
+        "isOpen": false,
+        "formType": "",
+        "title": ""
+      },
+      "config": {
+        "theme": "dark"
+      }
+    }
+  },
+  {
+    "name": "const",
+    "type": "app",
+    "data": {
+      "alias": "42974117.prex",
+      "stepSkipTop": 20,
+      "tabs": (rolId = 0) => [
+    { key: "home", href: "/", label: "Home", minRole: -1 },
+    { key: "resumen", href: "/resumen", label: "Resumen", minRole: -1 },
+    { key: "admin", href: "/admin", label: "Administración", minRole: -1 },
+    { key: "uli", href: "/", label: "Uli :v", minRole: -1 },
+    { key: "luka", href: "/", label: "Lucas :v", minRole: -1 }].
+    filter((tab) => tab.minRole <= rolId),
+      "initialForms": {
+        "User": {
+          "rolId": 1,
+          "status": "PENDING"
+        },
+        "Collection": {
+          "total_months": 1,
+          "start_date": "2026-03-01T00:00:00.000Z"
+        }
+      },
+      "tableColumns": {
+        "Users": [
+          "name",
+          "phone",
+          "mail",
+          "pending",
+          "favor",
+          "rol.name",
+          "status"
+        ],
+        "Collections": [
+          "user.name",
+          "price",
+          "description",
+          "start_date",
+          "total_months",
+          "subscription.description"
+        ],
+        "Subscriptions": [
+          "description",
+          "price"
+        ]
+      },
+      "formField": {
+        "pay": [
+          {
+            "fieldName": "total",
+            "valueType": "price",
+            "isRequired": true
+          }
+        ],
+        "login": [
+          {
+            "fieldName": "mail",
+            "inputType": "email",
+            "isRequired": true
+          },
+          {
+            "fieldName": "password",
+            "inputType": "password",
+            "isRequired": true,
+            "validateFn": (oForm) =>
+  (oForm.password?.length || 0) < 4 ?
+  "La contraseña debe tener al menos 4 caracteres" :
+  ""
+          }
+        ],
+        "register": [
+          {
+            "fieldName": "name",
+            "isRequired": true
+          },
+          {
+            "fieldName": "phone",
+            "isRequired": true
+          },
+          {
+            "fieldName": "mail",
+            "inputType": "email",
+            "isRequired": true
+          },
+          {
+            "fieldName": "password",
+            "inputType": "password",
+            "isRequired": true,
+            "validateFn": (oForm) =>
+  (oForm.password?.length || 0) < 4 ?
+  "La contraseña debe tener al menos 4 caracteres" :
+  ""
+          },
+          {
+            "fieldName": "confirmPassword",
+            "inputType": "password",
+            "isRequired": true,
+            "validateFn": (oForm) =>
+  oForm.confirmPassword != oForm.password ?
+  'Las contraseñas no coinciden' :
+  ''
+          }
+        ],
+        "Users": [
+          {
+            "fieldName": "name",
+            "isRequired": true
+          },
+          {
+            "fieldName": "mail",
+            "inputType": "email",
+            "isRequired": true
+          },
+          {
+            "fieldName": "rolId",
+            "valueType": "number",
+            "isRequired": true,
+            "inputType": "select",
+            "select": {
+              "items": "/Roles",
+              "itemKey": "id",
+              "showValues": [
+                "name"
+              ]
+            }
+          },
+          {
+            "fieldName": "status",
+            "inputType": "select",
+            "isRequired": true,
+            "select": {
+              "items": "/UserStatusItems",
+              "itemKey": "key",
+              "showValues": [
+                "text"
+              ]
+            }
+          },
+          {
+            "fieldName": "pending",
+            "valueType": "price"
+          },
+          {
+            "fieldName": "favor",
+            "valueType": "price"
+          }
+        ],
+        "Collections": [
+          {
+            "fieldName": "userId",
+            "valueType": "number",
+            "inputType": "select",
+            "isRequired": true,
+            "select": {
+              "items": "Users",
+              "itemKey": "id",
+              "showValues": [
+                "name"
+              ]
+            }
+          },
+          {
+            "fieldName": "price",
+            "valueType": "price",
+            "isRequired": true
+          },
+          {
+            "fieldName": "description",
+            "isRequired": true
+          },
+          {
+            "fieldName": "total_months",
+            "valueType": "number",
+            "isRequired": true
+          },
+          {
+            "fieldName": "start_date",
+            "valueType": "date",
+            "inputType": "date",
+            "isRequired": true
+          },
+          {
+            "fieldName": "subscriptionId",
+            "valueType": "number",
+            "inputType": "select",
+            "select": {
+              "items": "Subscriptions",
+              "itemKey": "id",
+              "showValues": [
+                "description"
+              ]
+            }
+          }
+        ],
+        "Subscriptions": [
+          {
+            "fieldName": "description",
+            "isRequired": true
+          },
+          {
+            "fieldName": "price",
+            "valueType": "price",
+            "isRequired": true
+          }
+        ]
+      },
+      "expandFields": {
+        "Users": "rol",
+        "Collections": "user,subscription"
+      }
+    }
+  },
+  {
+    "name": "i18n",
+    "type": "app",
+    "data": {
+      "loginTexts": (isRegister) => ({
+      headerText: isRegister ? "REGISTRARSE" : "INICIAR SESIÓN",
+      footerText: isRegister ? "o iniciar sesión" : "o registrarse",
+      buttonText: isRegister ? "Crear" : "Ingresar",
+      formType: isRegister ? "register" : "login"
+    }),
+      "button": {
+        "confirm": "Confirmar"
+      },
+      "create": (entity) => `Crear ${entity}`,
+      "edit": (entity) => `Editar ${entity}`,
+      "mapping": {
+        "name": "Nombre",
+        "phone": "Teléfono",
+        "mail": "Mail",
+        "pending": "Pendiente",
+        "favor": "A favor",
+        "rolId": "Rol",
+        "rol.name": "Rol",
+        "status": "Estado",
+        "password": "Contraseña",
+        "confirmPassword": "Repetir contraseña",
+        "user.name": "Usuario",
+        "userId": "Usuario",
+        "price": "Precio",
+        "description": "Descripción",
+        "start_date": "Fecha de inicio",
+        "total_months": "Meses totales",
+        "subscription.description": "Subscripción",
+        "subscriptionId": "Subscripción",
+        "last_pay": "Último pago",
+        "first_month": "Mes de inicio",
+        "current_month": "Último mes pagado",
+        "payed_months": "Meses pagados",
+        "actions": "Acciones",
+        "created_at": "Creado",
+        "Users": "Usuarios",
+        "Collections": "Cuotas",
+        "Subscriptions": "Subscripciones",
+        "total": "TOTAL"
+      },
+      "months": {
+        "1": "Enero",
+        "2": "Febrero",
+        "3": "Marzo",
+        "4": "Abril",
+        "5": "Mayo",
+        "6": "Junio",
+        "7": "Julio",
+        "8": "Agosto",
+        "9": "Septiembre",
+        "10": "Octubre",
+        "11": "Noviembre",
+        "12": "Diciembre"
+      }
+    }
+  }
+];

package/dist/index.d.ts

@@ -1,6 +1,7 @@
-export * from "./store/ApiClient";
-export * from "./store/StoreClient";
+export * from "./store/ApiStore";
+export * from "./store/AppStore";
 export * from "./store/StoreManager";
+export * from "./store/RenderManager";
 export * from "./ui/Controller";
 export * from "./ui/createComponent";
 export * from "./utils/QueryBuilder";

package/dist/index.js

@@ -13,12 +13,22 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./store/ApiClient"), exports);
-__exportStar(require("./store/StoreClient"), exports);
+const StoreManager_1 = __importDefault(require("./store/StoreManager"));
+__exportStar(require("./store/ApiStore"), exports);
+__exportStar(require("./store/AppStore"), exports);
 __exportStar(require("./store/StoreManager"), exports);
+__exportStar(require("./store/RenderManager"), exports);
 __exportStar(require("./ui/Controller"), exports);
 __exportStar(require("./ui/createComponent"), exports);
 __exportStar(require("./utils/QueryBuilder"), exports);
 __exportStar(require("./utils/Toast"), exports);
 __exportStar(require("./utils/TokenHelper"), exports);
+// Inicializa los stores si existen
+try {
+    StoreManager_1.default.init(require('./auto-register.mjs').default);
+}
+catch (e) { }

package/dist/store/{ApiClient.d.ts → ApiStore.d.ts}

@@ -1,9 +1,10 @@
 import type { ApiResponse } from "@nano-app/backend";
-import { StoreClient } from "./StoreClient";
+import { AppStore, StoreData } from "./AppStore";
 export type ApiRequest = (query: string, body?: unknown) => Promise<ApiResponse>;
-export declare class ApiClient extends StoreClient {
+export declare class ApiStore extends AppStore {
     private baseUrl;
-    constructor(baseUrl?: string);
+    private busyCount;
+    constructor(initialData?: StoreData, storeName?: string, baseUrl?: string);
     create: ApiRequest;
     read: ApiRequest;
     update: ApiRequest;

package/dist/store/{ApiClient.js → ApiStore.js}

@@ -1,28 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ApiClient = void 0;
-const StoreClient_1 = require("./StoreClient");
+exports.ApiStore = void 0;
+const AppStore_1 = require("./AppStore");
 const QueryBuilder_1 = require("../utils/QueryBuilder");
 const TokenHelper_1 = require("../utils/TokenHelper");
 const Toast_1 = require("../utils/Toast");
-class ApiClient extends StoreClient_1.StoreClient {
+class ApiStore extends AppStore_1.AppStore {
     baseUrl;
-    constructor(baseUrl = "/api") {
-        super();
+    busyCount = 0;
+    constructor(initialData = {}, storeName = "", baseUrl = "/api") {
+        super({}, storeName);
         this.baseUrl = baseUrl;
     }
     create = (entity, body) => this.request("POST", entity, body);
     read = async (query, params = {}) => {
         const path = query.split("?")[0];
         const response = await this.request("GET", QueryBuilder_1.QueryBuilder.build(query, params));
-        this.set(`/${path}`, response.result);
+        this.set(`${path}`, response.result);
         return response;
     };
     update = (entity, body) => this.request("PUT", entity, body);
     delete = (entity, id) => this.request("DELETE", entity, id);
     async request(method, path, body) {
         let oResponse = { result: null, success: false, message: "", warning: false };
-        this.set("/busyCount", (this.get("/busyCount") || 0) + 1);
+        this.busyCount++;
         this.set("/busy", true);
         try {
             oResponse = await fetch(`${this.baseUrl}${path}`, {
@@ -40,12 +41,11 @@ class ApiClient extends StoreClient_1.StoreClient {
             console.error(error);
         }
         finally {
-            const remaining = this.get("/busyCount") - 1;
-            this.set("/busyCount", remaining);
-            if (remaining < 1)
+            this.busyCount--;
+            if (this.busyCount < 1)
                 this.set("/busy", false);
         }
         return oResponse;
     }
 }
-exports.ApiClient = ApiClient;
+exports.ApiStore = ApiStore;

package/dist/store/AppStore.d.ts

@@ -0,0 +1,25 @@
+export type StoreData = Record<string, any>;
+export declare class AppStore {
+    protected name: string;
+    private state;
+    constructor(initialData?: StoreData, name?: string);
+    /**
+     * Gestiona el estado de la store
+     * @param path - El path del estado
+     * @param value - El valor a asignar
+     * @returns El valor del estado
+     */
+    private manageState;
+    /**
+     * Obtiene el valor del estado
+     * @param path - El path del estado
+     * @returns El valor del estado
+     */
+    get(path: string): any;
+    /**
+     * Asigna un valor al estado
+     * @param path - El path del estado
+     * @param value - El valor a asignar
+     */
+    set(path: string, value: any): void;
+}

package/dist/store/AppStore.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AppStore = void 0;
+const RenderManager_1 = __importDefault(require("./RenderManager"));
+class AppStore {
+    name;
+    state;
+    constructor(initialData = {}, name = "app") {
+        this.name = name;
+        this.state = initialData;
+    }
+    /**
+     * Gestiona el estado de la store
+     * @param path - El path del estado
+     * @param value - El valor a asignar
+     * @returns El valor del estado
+     */
+    manageState(path, value) {
+        // Divide el path en segmentos y obtiene el ultimo segmento
+        const segments = path.split("/").filter(Boolean);
+        if (segments.length === 0)
+            return this.state;
+        const last = segments.pop();
+        // Recorre los segmentos y crea el objeto si no existe
+        let current = this.state;
+        for (const seg of segments) {
+            if (current[seg] == null)
+                current[seg] = {};
+            current = current[seg];
+        }
+        // Si se proporciona un valor, lo asigna al ultimo segmento
+        if (arguments.length >= 2) {
+            current[last] = value;
+        }
+        // Retorna el valor del ultimo segmento
+        return current[last];
+    }
+    /**
+     * Obtiene el valor del estado
+     * @param path - El path del estado
+     * @returns El valor del estado
+     */
+    get(path) {
+        return this.manageState(path);
+    }
+    /**
+     * Asigna un valor al estado
+     * @param path - El path del estado
+     * @param value - El valor a asignar
+     */
+    set(path, value) {
+        this.manageState(path, value);
+        RenderManager_1.default.refresh(path, this.name);
+    }
+}
+exports.AppStore = AppStore;

package/dist/store/RenderManager.d.ts

@@ -0,0 +1,47 @@
+type ComponentId = symbol;
+/**
+{
+  store1: {
+    path1: {
+      component1: true,
+      component2: true,
+    },
+    path2: {
+      component1: true,
+    },
+    path3: {
+      component1: true,
+    },
+  }
+}
+ */
+export declare class RenderManager {
+    private dependenciesMap;
+    private hooksMap;
+    /**
+     * Registra un hook de re-render para un componente
+     * @param componentId - El id del componente
+     * @param hook - El hook de re-render
+     */
+    register(componentId: ComponentId, hook: () => void): void;
+    /**
+     * Agrega una dependencia de path a un componente
+     * @param componentId - El id del componente
+     * @param path - El path del estado
+     * @param storeName - El nombre del store
+     */
+    dependsOn(componentId: ComponentId, path: string, storeName: string): void;
+    /**
+     * Actualiza los componentes que dependen de este path
+     * @param path - El path del estado
+     * @param storeName - El nombre del store
+     */
+    refresh(path: string, storeName: string): void;
+    /**
+     * Elimina un componente del manager
+     * @param componentId - El id del componente
+     */
+    unregister(componentId: ComponentId): void;
+}
+declare const _default: RenderManager;
+export default _default;