@nano-app/frontend 0.3.2 → 0.3.4

package/dist/store/RenderManager.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderManager = void 0;
+/**
+{
+  store1: {
+    path1: {
+      component1: true,
+      component2: true,
+    },
+    path2: {
+      component1: true,
+    },
+    path3: {
+      component1: true,
+    },
+  }
+}
+ */
+class RenderManager {
+    dependenciesMap = new Map();
+    hooksMap = new Map();
+    /**
+     * Registra un hook de re-render para un componente
+     * @param componentId - El id del componente
+     * @param hook - El hook de re-render
+     */
+    register(componentId, hook) {
+        this.hooksMap.set(componentId, hook);
+    }
+    /**
+     * 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, path, storeName) {
+        // Si no existe el store, crea un nuevo mapa
+        if (!this.dependenciesMap.has(storeName)) {
+            this.dependenciesMap.set(storeName, new Map());
+        }
+        // Si no existe el path, crea un nuevo conjunto
+        if (!this.dependenciesMap.get(storeName)?.has(path)) {
+            this.dependenciesMap.get(storeName)?.set(path, new Set());
+        }
+        // Agrega el componente al conjunto de dependencias
+        this.dependenciesMap.get(storeName)?.get(path)?.add(componentId);
+    }
+    /**
+     * Actualiza los componentes que dependen de este path
+     * @param path - El path del estado
+     * @param storeName - El nombre del store
+     */
+    refresh(path, storeName) {
+        // Obtiene los componentes que dependen de este path
+        const components = this.dependenciesMap.get(storeName)?.get(path);
+        // Si hay componentes que dependen de este path, actualiza cada uno
+        if (components) {
+            components.forEach((componentId) => {
+                this.hooksMap.get(componentId)?.();
+            });
+        }
+    }
+    /**
+     * Elimina un componente del manager
+     * @param componentId - El id del componente
+     */
+    unregister(componentId) {
+        this.hooksMap.delete(componentId);
+        this.dependenciesMap.forEach((store) => {
+            store.forEach((path) => {
+                path.delete(componentId);
+            });
+        });
+    }
+}
+exports.RenderManager = RenderManager;
+exports.default = new RenderManager();

package/dist/store/StoreManager.d.ts

@@ -1,16 +1,15 @@
-import { ApiClient } from "./ApiClient";
-import { StoreClient } from "./StoreClient";
-export type NanoAppConfig = Record<string, StoreEntry>;
-export type StoreEntry = {
-    type: "api" | "local";
-    baseUrl?: string;
+import { ApiStore } from "./ApiStore";
+import { AppStore } from "./AppStore";
+type StoreEntry = {
+    name: string;
+    type: "app" | "api";
     path?: string;
-    data?: any;
+    data?: Record<string, unknown>;
 };
 export declare class StoreManager {
     private stores;
-    constructor();
-    getStore(name: string): ApiClient | StoreClient;
+    init(entries: StoreEntry[]): void;
+    getStore(name: string): AppStore | ApiStore;
 }
 declare const _default: StoreManager;
 export default _default;

package/dist/store/StoreManager.js

@@ -1,43 +1,29 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StoreManager = void 0;
-const path_1 = __importDefault(require("path"));
-const fs_1 = __importDefault(require("fs"));
-const ApiClient_1 = require("./ApiClient");
-const StoreClient_1 = require("./StoreClient");
+const ApiStore_1 = require("./ApiStore");
+const AppStore_1 = require("./AppStore");
 class StoreManager {
-    stores = {};
-    constructor() {
-        // Carga la configuración
-        let config = { app: { type: "local", data: {} } };
-        try {
-            const mod = require(path_1.default.join(process.cwd(), "nano-app.config.cjs"));
-            config = mod?.default ?? mod;
+    stores = new Map();
+    init(entries) {
+        if (entries.length === 0) {
+            this.stores.set("app", new AppStore_1.AppStore({}));
+            return;
         }
-        catch { }
-        // Crea los stores
-        Object.entries(config)
-            .forEach(([name, entry]) => {
+        entries.forEach(entry => {
             if (entry.type === "api") {
-                this.stores[name] = new ApiClient_1.ApiClient(entry.baseUrl ?? "/api");
+                this.stores.set(entry.name, new ApiStore_1.ApiStore(entry.data ?? {}, entry.name, entry.path ?? "/api"));
             }
             else {
-                let data = {};
-                try {
-                    data = entry.path
-                        ? JSON.parse(fs_1.default.readFileSync(path_1.default.resolve(process.cwd(), entry.path), "utf-8"))
-                        : (entry.data ?? {});
-                }
-                catch { }
-                this.stores[name] = new StoreClient_1.StoreClient(data);
+                this.stores.set(entry.name, new AppStore_1.AppStore(entry.data ?? {}, entry.name));
             }
         });
     }
     getStore(name) {
-        return this.stores[name];
+        const store = this.stores.get(name);
+        if (!store)
+            throw new Error(`Store "${name}" no encontrado.`);
+        return store;
     }
 }
 exports.StoreManager = StoreManager;

package/dist/ui/Controller.d.ts

@@ -1,17 +1,20 @@
+import { ApiResponse } from "@nano-app/backend";
 import { ReactNode } from "react";
-import { useRouter } from "next/navigation";
-import { StoreManager } from "../store/StoreManager";
-export declare abstract class Controller<Params = {}> {
-    protected storeManager: StoreManager;
-    params: Params & {
-        children?: ReactNode;
-    };
-    router: ReturnType<typeof useRouter>;
-    pathname: string | null;
-    constructor(storeManager: StoreManager, params: Params & {
-        children?: ReactNode;
-    });
-    protected getStore(name: string): import("..").StoreClient | import("..").ApiClient;
-    onInit(): void;
-    onRender(): void;
+export type ReactParams = Record<string, any> & {
+    children?: ReactNode;
+    hook?: () => void;
+};
+export declare abstract class Controller {
+    private componentId;
+    constructor(hook: () => void, params: any);
+    get<T = any>(path: string, name?: string): T;
+    read<T = any>(path: string, params?: {}, name?: string): Promise<ApiResponse<T>>;
+    set(path: string, value: any, name?: string): void;
+    create<T = any>(path: string, body: any, name?: string): Promise<ApiResponse<T>>;
+    update<T = any>(path: string, body: any, name?: string): Promise<ApiResponse<T>>;
+    delete<T = any>(path: string, id: any, name?: string): Promise<ApiResponse<T>>;
+    destroy(): void;
+    onInit(params?: any): void;
+    onRender(params?: any): void;
+    useHooks(): void;
 }

package/dist/ui/Controller.js

@@ -1,20 +1,49 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Controller = void 0;
+const StoreManager_1 = __importDefault(require("../store/StoreManager"));
+const RenderManager_1 = __importDefault(require("../store/RenderManager"));
 class Controller {
-    storeManager;
-    params = {};
-    router;
-    pathname;
-    constructor(storeManager, params) {
-        this.storeManager = storeManager;
-        this.params = params;
-        this.onInit();
-    }
-    getStore(name) {
-        return this.storeManager.getStore(name);
-    }
-    onInit() { }
-    onRender() { }
+    componentId;
+    constructor(hook, params) {
+        // Registra el componente para reactividad
+        this.componentId = Symbol();
+        RenderManager_1.default.register(this.componentId, hook);
+        // Inicializa el controller
+        this.onInit(params);
+    }
+    get(path, name = 'app') {
+        // Registra el path como dependencia
+        RenderManager_1.default.dependsOn(this.componentId, path, name);
+        // Retorna el valor del store
+        return StoreManager_1.default.getStore(name)?.get(path) || undefined;
+    }
+    read(path, params = {}, name = 'api') {
+        // Registra el path como dependencia
+        RenderManager_1.default.dependsOn(this.componentId, path, name);
+        // Retorna el valor de la api
+        return StoreManager_1.default.getStore(name)?.read(path, params);
+    }
+    set(path, value, name = 'app') {
+        StoreManager_1.default.getStore(name)?.set(path, value);
+    }
+    create(path, body, name = 'api') {
+        return StoreManager_1.default.getStore(name)?.create(path, body);
+    }
+    update(path, body, name = 'api') {
+        return StoreManager_1.default.getStore(name)?.update(path, body);
+    }
+    delete(path, id, name = 'api') {
+        return StoreManager_1.default.getStore(name)?.delete(path, id);
+    }
+    destroy() {
+        RenderManager_1.default.unregister(this.componentId);
+    }
+    onInit(params) { }
+    onRender(params) { }
+    useHooks() { }
 }
 exports.Controller = Controller;

package/dist/ui/createComponent.d.ts

@@ -1,5 +1,17 @@
+import { ReactNode } from "react";
 import { Controller } from "./Controller";
-import storeInstance from "../store/StoreManager";
-export type ControllerClass<C extends Controller> = new (storeManager: typeof storeInstance, params: Record<string, any>) => C;
-export type ViewFn<C extends Controller> = (controller: C) => React.ReactNode;
-export declare function createComponent<C extends Controller>(stores: string[], ControllerClass: ControllerClass<C>, view: ViewFn<C>): (params?: Record<string, any>) => React.ReactNode;
+export type ViewParams = any & {
+    children?: ReactNode;
+};
+export type View<C> = (controller: C, params: ViewParams) => ReactNode;
+export type CreateComponentProps<C> = {
+    controller?: new (hook: () => void, params: any) => C;
+    view?: View<C>;
+};
+/**
+ * Crea un componente reactivo que se actualiza automáticamente cuando los datos de los stores cambian.
+ * @param ControllerClass - Clase del controller
+ * @param view - Función que renderiza el componente
+ * @returns - Función que retorna el componente reactivo
+ */
+export declare function createComponent<C extends Controller = Controller>({ controller, view }: CreateComponentProps<C>): (params: ViewParams) => ReactNode;

package/dist/ui/createComponent.js

@@ -1,24 +1,32 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createComponent = createComponent;
 const react_1 = require("react");
-const navigation_1 = require("next/navigation");
-const StoreManager_1 = __importDefault(require("../store/StoreManager"));
-function createComponent(stores, ControllerClass, view) {
-    return function (params = {}) {
-        stores.forEach((name) => StoreManager_1.default.getStore(name)?.use());
-        const router = (0, navigation_1.useRouter)();
-        const pathname = (0, navigation_1.usePathname)();
-        const ref = (0, react_1.useRef)(undefined);
-        if (!ref.current)
-            ref.current = new ControllerClass(StoreManager_1.default, params);
-        const c = ref.current;
-        c.router = router;
-        c.pathname = pathname;
-        c.onRender();
-        return view(c);
+const Controller_1 = require("./Controller");
+class BaseController extends Controller_1.Controller {
+}
+const BaseView = (_, { children }) => children;
+/**
+ * Crea un componente reactivo que se actualiza automáticamente cuando los datos de los stores cambian.
+ * @param ControllerClass - Clase del controller
+ * @param view - Función que renderiza el componente
+ * @returns - Función que retorna el componente reactivo
+ */
+function createComponent({ controller, view }) {
+    return function (params) {
+        // Hook para re-renderizar el componente
+        const [, setTick] = (0, react_1.useState)(0);
+        // Instancia el controller
+        const controllerRef = (0, react_1.useRef)();
+        if (!controllerRef.current) {
+            controllerRef.current = new (controller || BaseController)(() => setTick((t) => t + 1), params);
+        }
+        // Ejecuta el método onRender del controller
+        controllerRef.current.onRender(params);
+        // Ejecuta las hooks del usuario
+        controllerRef.current.useHooks();
+        // Cleanup del componente
+        (0, react_1.useEffect)(() => () => controllerRef.current?.destroy(), []);
+        return view ? view(controllerRef.current, params) : BaseView(controllerRef.current, params);
     };
 }

package/dist/utils/QueryBuilder.js

@@ -10,8 +10,10 @@ function buildFilters(filters) {
 }
 class QueryBuilder {
     static build(path, params = {}) {
-        const { skip, filters, expand, orderby, top } = params;
-        const queryParams = [];
+        const { skip, filters, expand, orderby, top, ...extraParams } = params;
+        const queryParams = [
+            ...Object.entries(extraParams).map(([key, value]) => `${key}=${value}`)
+        ];
         const filtersQuery = buildFilters(filters);
         if (filtersQuery)
             queryParams.push(`filter=${filtersQuery}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nano-app/frontend",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "View + Controller frontend architecture for React/Next.js",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,8 +11,12 @@
       "types": "./dist/index.d.ts"
     }
   },
+  "bin":{
+    "generate-stores": "./bin/generate-stores.mjs"
+  },
   "files": [
-    "dist"
+    "dist",
+    "bin"
   ],
   "scripts": {
     "build": "tsc",

package/dist/api/ApiClient.d.ts

@@ -1,16 +0,0 @@
-import type { ApiResponse } from "@nano-app/backend";
-import { StoreClient } from "../store/StoreClient";
-export type ApiRequest = (query: string, body?: unknown) => Promise<ApiResponse>;
-/**
- * Cliente de API que extiende StoreClient y expone CRUD.
- * @param baseUrl - Prefijo de todas las peticiones. Por defecto "/api".
- */
-export declare class ApiClient extends StoreClient {
-    private baseUrl;
-    constructor(baseUrl?: string);
-    create: ApiRequest;
-    read: ApiRequest;
-    update: ApiRequest;
-    delete: ApiRequest;
-    private request;
-}

package/dist/api/ApiClient.js

@@ -1,69 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ApiClient = void 0;
-const StoreClient_1 = require("../store/StoreClient");
-const QueryBuilder_1 = require("./QueryBuilder");
-const TokenHelper_1 = require("../utils/TokenHelper");
-const Toast_1 = require("../utils/Toast");
-/**
- * Cliente de API que extiende StoreClient y expone CRUD.
- * @param baseUrl - Prefijo de todas las peticiones. Por defecto "/api".
- */
-class ApiClient extends StoreClient_1.StoreClient {
-    baseUrl;
-    constructor(baseUrl = "/api") {
-        super();
-        this.baseUrl = baseUrl;
-    }
-    create = async (entity, body) => {
-        return 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);
-        return response;
-    };
-    update = async (entity, body) => {
-        return this.request("PUT", entity, body);
-    };
-    delete = async (entity, id) => {
-        return 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.set("/busy", true);
-        try {
-            oResponse = await fetch(`${this.baseUrl}${path}`, {
-                method,
-                headers: {
-                    "Content-Type": "application/json",
-                    Authorization: `Bearer ${TokenHelper_1.TokenHelper.get()}`,
-                },
-                body: body ? JSON.stringify(body) : undefined,
-            })
-                .then((response) => response.json())
-                .then((response) => Toast_1.Toast.apiResponse(response));
-        }
-        catch (error) {
-            console.error(error);
-        }
-        finally {
-            this.set("/busyCount", this.get("/busyCount") - 1);
-            if (this.get("/busyCount") <= 0) {
-                this.set("/busy", false);
-            }
-            if (method !== "GET") {
-                this.set("/refresh", !this.get("/refresh"));
-            }
-        }
-        return oResponse;
-    }
-}
-exports.ApiClient = ApiClient;

package/dist/api/QueryBuilder.d.ts

@@ -1,8 +0,0 @@
-export declare class QueryBuilder {
-    private static readonly ISO_DATE_REGEX;
-    private static buildFilters;
-    /**
-     * Construye una query OData a partir de un objeto de filtros.
-     */
-    static build(path: string, params?: Record<string, unknown>): string;
-}

package/dist/api/QueryBuilder.js

@@ -1,51 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.QueryBuilder = void 0;
-const DEFAULT_STEP_SKIP_TOP = 10;
-class QueryBuilder {
-    static ISO_DATE_REGEX = /^\d{4}-\d{2}-\d{2}(T\d{2}:\d{2}:\d{2}(\.\d+)?Z?)?$/;
-    static buildFilters(filters = {}) {
-        const filterParts = [];
-        Object.entries(filters).forEach(([key, value]) => {
-            if (value !== undefined && value !== null) {
-                if (typeof value === "string") {
-                    if (QueryBuilder.ISO_DATE_REGEX.test(value)) {
-                        filterParts.push(`${key} ge ${value}`);
-                    }
-                    else {
-                        filterParts.push(`${key} contains ${value}`);
-                    }
-                }
-                else {
-                    filterParts.push(`${key} eq ${value}`);
-                }
-            }
-        });
-        return filterParts.length > 0 ? filterParts.join(" and ") : "";
-    }
-    /**
-     * Construye una query OData a partir de un objeto de filtros.
-     */
-    static build(path, params = {}) {
-        const { skip, filters, expand, orderby, top = 10, ...otherParams } = params;
-        const queryParams = Object.entries(otherParams).map(([key, value]) => `${key}=${value}`);
-        const filtersQuery = this.buildFilters(filters ?? {});
-        if (filtersQuery) {
-            queryParams.push(`filter=${filtersQuery}`);
-        }
-        if (expand) {
-            queryParams.push(`expand=${expand}`);
-        }
-        if (orderby) {
-            queryParams.push(`orderby=${orderby}`);
-        }
-        if (top) {
-            queryParams.push(`top=${top}`);
-        }
-        if (skip) {
-            queryParams.push(`skip=${skip}`);
-        }
-        return `${path}?${queryParams.join("&")}`;
-    }
-}
-exports.QueryBuilder = QueryBuilder;

package/dist/components/Controller.d.ts

@@ -1,16 +0,0 @@
-import { usePathname, useRouter } from "next/navigation";
-import { ApiClient } from "../api/ApiClient";
-import { StoreClient } from "../store/StoreClient";
-export declare abstract class Controller {
-    private storeManager;
-    private isInitialized;
-    protected router?: ReturnType<typeof useRouter>;
-    protected pathname?: ReturnType<typeof usePathname>;
-    protected onInit(): void;
-    protected getStore(model: 'api'): ApiClient;
-    protected getStore(model?: 'app'): StoreClient;
-    protected getStore(model: string): ApiClient | StoreClient;
-    params: any;
-    deps(): any[];
-    render(params: any): void;
-}

package/dist/components/Controller.js

@@ -1,29 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Controller = void 0;
-const navigation_1 = require("next/navigation");
-const StoreManager_1 = require("../store/StoreManager");
-class Controller {
-    storeManager = new StoreManager_1.StoreManager();
-    isInitialized = false;
-    router;
-    pathname;
-    onInit() { }
-    getStore(model = 'app') {
-        return this.storeManager.getStore(model);
-    }
-    params = {};
-    deps() { return []; }
-    render(params) {
-        this.params = params;
-        this.router = (0, navigation_1.useRouter)();
-        this.pathname = (0, navigation_1.usePathname)();
-        // Inicializa el controlador si no ha sido inicializado
-        if (!this.isInitialized) {
-            this.isInitialized = true;
-            this.onInit();
-            this.storeManager.init();
-        }
-    }
-}
-exports.Controller = Controller;

package/dist/config/index.d.ts

@@ -1,21 +0,0 @@
-export type LocalStoreEntry = {
-    type: "local";
-    /** Path relativo a la raíz del proyecto. Ej: "src/models/app.json" */
-    path?: string;
-    /** Datos inline (alternativa a path) */
-    data?: Record<string, any>;
-};
-export type ApiStoreEntry = {
-    type: "api";
-    /** Prefijo base para todas las peticiones de este store. Ej: "/api/users" */
-    baseUrl?: string;
-};
-export type StoreEntry = LocalStoreEntry | ApiStoreEntry;
-export type NanoAppConfig = {
-    stores: Record<string, StoreEntry>;
-};
-/**
- * Define la configuración del paquete con tipado completo.
- * Usar en nano-app.config.ts en la raíz del proyecto.
- */
-export declare function defineConfig(config: NanoAppConfig): NanoAppConfig;

package/dist/config/index.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.defineConfig = defineConfig;
-/**
- * Define la configuración del paquete con tipado completo.
- * Usar en nano-app.config.ts en la raíz del proyecto.
- */
-function defineConfig(config) {
-    return config;
-}

package/dist/hooks/useComponent.d.ts

@@ -1,8 +0,0 @@
-import { Controller } from "../components/Controller";
-type useComponentParams<CI> = {
-    controller: new () => CI;
-    view: (controller: CI) => React.ReactNode;
-};
-export type useComponent = <CI extends Controller>(p: useComponentParams<CI>) => (params?: Object) => React.ReactNode;
-export declare const useComponent: useComponent;
-export {};

package/dist/hooks/useComponent.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useComponent = void 0;
-const react_1 = require("react");
-const useComponent = ({ controller, view }) => (params = {}) => {
-    const c = (0, react_1.useMemo)(() => new controller(), [controller]);
-    c.render(params);
-    return (0, react_1.useMemo)(() => view(c), c.deps());
-};
-exports.useComponent = useComponent;

package/dist/plugin/index.d.ts

@@ -1,11 +0,0 @@
-type NextConfig = Record<string, any>;
-/**
- * Envuelve la configuración de Next.js agregando el plugin de nano-app.
- * Usar en next.config.ts:
- *
- * @example
- * import { withNanoApp } from "@nano-app/frontend/plugin";
- * export default withNanoApp();
- */
-export declare function withNanoApp(nextConfig?: NextConfig): NextConfig;
-export {};