@nano-app/frontend 0.3.1 → 0.3.3

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/StateManager.d.ts

@@ -0,0 +1,4 @@
+export declare class StateManager {
+    private state;
+    constructor(initialState?: Record<string, any>);
+}

package/dist/store/StateManager.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StateManager = void 0;
+class StateManager {
+    state = {};
+    constructor(initialState = {}) {
+        this.state = initialState;
+    }
+}
+exports.StateManager = StateManager;

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/store/stores.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    name: string;
+    type: string;
+    data: {};
+}[];
+export default _default;

package/dist/store/stores.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    {
+        name: "app",
+        type: "app",
+        data: {},
+    }
+];

package/dist/ui/Controller.d.ts

@@ -1,17 +1,16 @@
-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;
+import { ReactParams } from "./createComponent";
+import { ApiResponse } from "@nano-app/backend";
+export declare abstract class Controller {
+    private componentId;
+    params: ReactParams;
+    constructor(params: ReactParams);
+    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(): void;
     onRender(): void;
 }

package/dist/ui/Controller.js

@@ -1,18 +1,51 @@
 "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;
+    componentId;
+    params;
+    // public router!: ReturnType<typeof useRouter>;
+    // public pathname!: string | null;
+    constructor(params) {
+        // Registra el componente para reactividad
+        this.componentId = Symbol();
+        RenderManager_1.default.register(this.componentId, params.hook || (() => { }));
+        // Inicializa los parámetros
         this.params = params;
+        // Inicializa el controller
         this.onInit();
     }
-    getStore(name) {
-        return this.storeManager.getStore(name);
+    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, "api");
+        // 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() { }
     onRender() { }

package/dist/ui/createComponent.d.ts

@@ -1,5 +1,18 @@
+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 ReactParams = Record<string, unknown> & {
+    children?: ReactNode;
+    hook?: () => void;
+};
+export type CreateComponentProps<C> = {
+    controller?: new (params: ReactParams) => C;
+    view?: (controller: C) => ReactNode;
+    hooks?: (controller: C) => void;
+};
+/**
+ * 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, hooks }: CreateComponentProps<C>): (params?: ReactParams) => ReactNode;

package/dist/ui/createComponent.js

@@ -1,24 +1,31 @@
 "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 = ({ params: { 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, hooks }) {
+    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)({ ...params, hook: () => setTick((t) => t + 1) });
+        }
+        // Ejecuta las hooks del usuario
+        if (hooks)
+            hooks(controllerRef.current);
+        // Cleanup del componente
+        (0, react_1.useEffect)(() => () => controllerRef.current?.destroy(), []);
+        return view ? view(controllerRef.current) : BaseView(controllerRef.current);
     };
 }

package/dist/utils/pathUtils.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Resuelve un path slash-based sobre un objeto y retorna el valor en esa ruta.
+ * Retorna undefined de forma segura si algún segmento no existe.
+ *
+ * Ejemplo: resolvePath(state, "/user/profile/name")
+ */
+export declare function resolvePath(obj: unknown, path: string): unknown;
+/**
+ * Retorna un nuevo objeto con el valor en el path slash-based asignado de forma inmutable.
+ * Los objetos intermedios se clonan superficialmente. Los nodos intermedios faltantes se crean.
+ *
+ * Ejemplo: setPath(state, "/user/profile/name", "Alice")
+ */
+export declare function setPath(obj: unknown, path: string, value: unknown): Record<string, unknown>;

package/dist/utils/pathUtils.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolvePath = resolvePath;
+exports.setPath = setPath;
+/**
+ * Resuelve un path slash-based sobre un objeto y retorna el valor en esa ruta.
+ * Retorna undefined de forma segura si algún segmento no existe.
+ *
+ * Ejemplo: resolvePath(state, "/user/profile/name")
+ */
+function resolvePath(obj, path) {
+    const segments = path.split("/").filter((s) => s !== "");
+    let current = obj;
+    for (const segment of segments) {
+        if (current === null || current === undefined || typeof current !== "object") {
+            return undefined;
+        }
+        current = current[segment];
+    }
+    return current;
+}
+/**
+ * Retorna un nuevo objeto con el valor en el path slash-based asignado de forma inmutable.
+ * Los objetos intermedios se clonan superficialmente. Los nodos intermedios faltantes se crean.
+ *
+ * Ejemplo: setPath(state, "/user/profile/name", "Alice")
+ */
+function setPath(obj, path, value) {
+    const segments = path.split("/").filter((s) => s !== "");
+    const root = obj && typeof obj === "object" ? { ...obj } : {};
+    if (segments.length === 0)
+        return root;
+    let node = root;
+    for (let i = 0; i < segments.length - 1; i++) {
+        const key = segments[i];
+        const child = node[key];
+        const cloned = child && typeof child === "object" ? { ...child } : {};
+        node[key] = cloned;
+        node = cloned;
+    }
+    node[segments[segments.length - 1]] = value;
+    return root;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nano-app/frontend",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "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",
@@ -33,7 +37,8 @@
     "next": ">=14.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
-    "zustand": ">=5.0.0"
+    "zustand": ">=5.0.0",
+    "fs": "^0.0.1-security"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",
@@ -43,8 +48,5 @@
     "react-dom": "^18.0.0",
     "typescript": "^5.3.0",
     "zustand": "^5.0.0"
-  },
-  "dependencies": {
-    "fs": "^0.0.1-security"
   }
 }

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;