@nano-app/frontend 0.1.0 → 0.3.0

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-export * from "./api/ApiClient";
-export * from "./api/QueryBuilder";
-export { default as StoreManager } from "./store/StoreManager";
+export * from "./store/ApiClient";
 export * from "./store/StoreClient";
-export * from "./ui/createComponent";
+export * from "./store/StoreManager";
 export * from "./ui/Controller";
+export * from "./ui/createComponent";
+export * from "./utils/QueryBuilder";
 export * from "./utils/Toast";
 export * from "./utils/TokenHelper";
 export type { ApiResponse } from "@nano-app/backend";

package/dist/index.js

@@ -13,17 +13,12 @@ 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 });
-exports.StoreManager = void 0;
-__exportStar(require("./api/ApiClient"), exports);
-__exportStar(require("./api/QueryBuilder"), exports);
-var StoreManager_1 = require("./store/StoreManager");
-Object.defineProperty(exports, "StoreManager", { enumerable: true, get: function () { return __importDefault(StoreManager_1).default; } });
+__exportStar(require("./store/ApiClient"), exports);
 __exportStar(require("./store/StoreClient"), exports);
-__exportStar(require("./ui/createComponent"), exports);
+__exportStar(require("./store/StoreManager"), 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);

package/dist/store/ApiClient.d.ts

@@ -0,0 +1,12 @@
+import type { ApiResponse } from "@nano-app/backend";
+import { StoreClient } from "./StoreClient";
+export type ApiRequest = (query: string, body?: unknown) => Promise<ApiResponse>;
+export declare class ApiClient extends StoreClient {
+    private baseUrl;
+    constructor(baseUrl?: string);
+    create: ApiRequest;
+    read: ApiRequest;
+    update: ApiRequest;
+    delete: ApiRequest;
+    private request;
+}

package/dist/store/ApiClient.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ApiClient = void 0;
+const StoreClient_1 = require("./StoreClient");
+const QueryBuilder_1 = require("../utils/QueryBuilder");
+const TokenHelper_1 = require("../utils/TokenHelper");
+const Toast_1 = require("../utils/Toast");
+class ApiClient extends StoreClient_1.StoreClient {
+    baseUrl;
+    constructor(baseUrl = "/api") {
+        super();
+        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);
+        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.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((res) => res.json())
+                .then((res) => Toast_1.Toast.apiResponse(res));
+        }
+        catch (error) {
+            console.error(error);
+        }
+        finally {
+            const remaining = this.get("/busyCount") - 1;
+            this.set("/busyCount", remaining);
+            if (remaining < 1)
+                this.set("/busy", false);
+        }
+        return oResponse;
+    }
+}
+exports.ApiClient = ApiClient;

package/dist/store/StoreClient.d.ts

@@ -1,25 +1,11 @@
 export type StoreData = Record<string, any>;
-/**
- * Clase base para manejar el estado de Zustand
- * Zustand solo almacena valores, los métodos se ejecutan desde la clase
- */
 export declare class StoreClient {
     private getStore;
     private setFn;
     private getFn;
     constructor(initialData?: StoreData);
-    /**
-     * Ejecuta el hook para suscribirse al store (reactividad)
-     */
     use: () => StoreData;
-    /**
-     * Setter y Getter del store
-     */
     set(path: string, value: any): void;
     get(path: string): any;
-    /**
-     * Maneja el estado (Set o Get) navegando por el path
-     * @private
-     */
     private manageState;
 }

package/dist/store/StoreClient.js

@@ -2,14 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StoreClient = void 0;
 const zustand_1 = require("zustand");
-/**
- * Clase base para manejar el estado de Zustand
- * Zustand solo almacena valores, los métodos se ejecutan desde la clase
- */
 class StoreClient {
     getStore;
-    setFn = () => { };
-    getFn = () => ({});
+    setFn;
+    getFn;
     constructor(initialData = {}) {
         this.getStore = (0, zustand_1.create)()((set, get) => {
             this.setFn = set;
@@ -17,48 +13,27 @@ class StoreClient {
             return initialData;
         });
     }
-    /**
-     * Ejecuta el hook para suscribirse al store (reactividad)
-     */
     use = () => this.getStore();
-    /**
-     * Setter y Getter del store
-     */
     set(path, value) {
-        if (!this.setFn)
-            return;
         const { oNewState } = this.manageState(path, true, value);
         this.setFn((state) => ({ ...state, ...oNewState }));
     }
     get(path) {
-        if (!this.getFn)
-            return undefined;
         const { value } = this.manageState(path);
         return value;
     }
-    /**
-     * Maneja el estado (Set o Get) navegando por el path
-     * @private
-     */
     manageState(sPath, isSet = false, value) {
-        // Obtiene el path y el último valor
         const aPath = sPath.split("/").filter(s => s !== "");
         const lastProp = aPath.pop() || "";
-        // Valida si es el path inicial (Utiliza todo el objeto)
         const oNewState = aPath.length === 0
             ? this.getFn()
-            : // Llega al final del path generando objetos si es necesario
-                aPath.reduce((oObject, sKey) => {
-                    if (!oObject[sKey]) {
-                        oObject[sKey] = {};
-                    }
-                    return oObject[sKey];
-                }, this.getFn());
-        // Setea el nuevo valor si debe
-        if (isSet) {
+            : aPath.reduce((oObject, sKey) => {
+                if (!oObject[sKey])
+                    oObject[sKey] = {};
+                return oObject[sKey];
+            }, this.getFn());
+        if (isSet)
             oNewState[lastProp] = value;
-        }
-        // Retorna el nuevo estado y el valor de la property enviada
         return { oNewState, value: lastProp ? oNewState[lastProp] : oNewState };
     }
 }

package/dist/store/StoreManager.d.ts

@@ -1,10 +1,15 @@
-import { ApiClient } from "../api/ApiClient";
+import { ApiClient } from "./ApiClient";
 import { StoreClient } from "./StoreClient";
-export type StoresMap = Record<string, ApiClient | StoreClient>;
+export type NanoAppConfig = Record<string, StoreEntry>;
+export type StoreEntry = {
+    type: "api" | "local";
+    baseUrl?: string;
+    path?: string;
+    data?: any;
+};
 export declare class StoreManager {
     private stores;
     constructor();
-    addStore(name: string, store: ApiClient | StoreClient): void;
     getStore(name: string): ApiClient | StoreClient;
 }
 declare const _default: StoreManager;

package/dist/store/StoreManager.js

@@ -5,54 +5,37 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StoreManager = void 0;
 const path_1 = __importDefault(require("path"));
-const ApiClient_1 = require("../api/ApiClient");
+const fs_1 = __importDefault(require("fs"));
+const ApiClient_1 = require("./ApiClient");
 const StoreClient_1 = require("./StoreClient");
-let userConfig = {};
-try {
-    // Carga nano-app.config.cjs desde la raíz del proyecto del usuario.
-    // .cjs es CommonJS puro — Node.js lo ejecuta sincrónicamente sin compilador.
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-    const mod = require(path_1.default.join(process.cwd(), "nano-app.config.cjs"));
-    userConfig = mod?.default ?? mod;
-}
-catch {
-    // sin config → el manager empieza vacío
-}
-function readJsonPath(filePath) {
-    try {
-        // fs solo existe en Node.js — en el browser este bloque nunca se ejecuta
-        // porque el StoreManager ya fue inicializado en el servidor
-        // eslint-disable-next-line @typescript-eslint/no-require-imports
-        const fs = require("fs");
-        // eslint-disable-next-line @typescript-eslint/no-require-imports
-        const path = require("path");
-        const abs = path.resolve(process.cwd(), filePath);
-        return JSON.parse(fs.readFileSync(abs, "utf-8"));
-    }
-    catch {
-        return {};
-    }
-}
 class StoreManager {
     stores = {};
     constructor() {
-        if (!userConfig?.stores)
-            return;
-        Object.entries(userConfig.stores).forEach(([name, entry]) => {
+        // 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;
+        }
+        catch { }
+        // Crea los stores
+        Object.entries(config)
+            .forEach(([name, entry]) => {
             if (entry.type === "api") {
                 this.stores[name] = new ApiClient_1.ApiClient(entry.baseUrl ?? "/api");
             }
             else {
-                const data = entry.path
-                    ? readJsonPath(entry.path)
-                    : (entry.data ?? {});
+                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);
             }
         });
     }
-    addStore(name, store) {
-        this.stores[name] = store;
-    }
     getStore(name) {
         return this.stores[name];
     }

package/dist/ui/Controller.d.ts

@@ -1,14 +1,17 @@
 import { ReactNode } from "react";
-import { usePathname, useRouter } from "next/navigation";
-import { ApiClient } from "../api/ApiClient";
-import { StoreClient } from "../store/StoreClient";
+import { useRouter } from "next/navigation";
+import { StoreManager } from "../store/StoreManager";
 export declare abstract class Controller<Params = {}> {
-    router: ReturnType<typeof useRouter>;
-    pathname: ReturnType<typeof usePathname>;
+    protected storeManager: StoreManager;
     params: Params & {
         children?: ReactNode;
     };
-    store: Record<string, ApiClient | StoreClient>;
+    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;
 }

package/dist/ui/Controller.js

@@ -2,10 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Controller = void 0;
 class Controller {
+    storeManager;
+    params = {};
     router;
     pathname;
-    params = {};
-    store = {};
+    constructor(storeManager, params) {
+        this.storeManager = storeManager;
+        this.params = params;
+        this.onInit();
+    }
+    getStore(name) {
+        return this.storeManager.getStore(name);
+    }
     onInit() { }
     onRender() { }
 }

package/dist/ui/createComponent.d.ts

@@ -1,11 +1,5 @@
 import { Controller } from "./Controller";
-export type ControllerClass<C extends Controller> = new () => C;
+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;
-/**
- * Crea un componente React uniendo stores, controller y view.
- *
- * @param stores     - Nombres de los stores a los que se suscribe el componente.
- * @param ControllerClass - Clase del controller (se instancia una vez al montar).
- * @param view       - Función que recibe la instancia del controller y retorna JSX.
- */
 export declare function createComponent<C extends Controller>(stores: string[], ControllerClass: ControllerClass<C>, view: ViewFn<C>): (params?: Record<string, any>) => React.ReactNode;

package/dist/ui/createComponent.js

@@ -7,33 +7,17 @@ exports.createComponent = createComponent;
 const react_1 = require("react");
 const navigation_1 = require("next/navigation");
 const StoreManager_1 = __importDefault(require("../store/StoreManager"));
-/**
- * Crea un componente React uniendo stores, controller y view.
- *
- * @param stores     - Nombres de los stores a los que se suscribe el componente.
- * @param ControllerClass - Clase del controller (se instancia una vez al montar).
- * @param view       - Función que recibe la instancia del controller y retorna JSX.
- */
 function createComponent(stores, ControllerClass, view) {
     return function (params = {}) {
-        // Suscribe reactivamente a cada store declarado — Zustand re-renderiza cuando cambian
         stores.forEach((name) => StoreManager_1.default.getStore(name)?.use());
-        // Instancia el controller una sola vez por montaje
-        const ref = (0, react_1.useRef)(null);
-        if (!ref.current) {
-            ref.current = new ControllerClass();
-            ref.current.onInit();
-        }
+        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;
-        // Inyecta hooks de Next.js y params en cada render
-        c.router = (0, navigation_1.useRouter)();
-        c.pathname = (0, navigation_1.usePathname)();
-        c.params = params;
-        // Inyecta el mapa de stores en cada render para que los métodos lean valores frescos
-        stores.forEach((name) => {
-            c.store[name] = StoreManager_1.default.getStore(name);
-        });
-        // Ejecuta onRender en cada render
+        c.router = router;
+        c.pathname = pathname;
         c.onRender();
         return view(c);
     };

package/dist/utils/QueryBuilder.d.ts

@@ -0,0 +1,19 @@
+type Filter = {
+    op: string;
+    value: any;
+};
+export type Filters = {
+    and?: boolean;
+    filters?: Record<string, Filter>;
+};
+export type QueryParams = {
+    skip?: number;
+    top?: number;
+    filters?: Filters;
+    expand?: string;
+    orderby?: string;
+};
+export declare class QueryBuilder {
+    static build(path: string, params?: QueryParams): string;
+}
+export {};

package/dist/utils/QueryBuilder.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QueryBuilder = void 0;
+function buildFilters(filters) {
+    if (!filters)
+        return "";
+    return Object.entries(filters.filters ?? {})
+        .map(([key, { op, value }]) => `${key} ${op} ${value}`)
+        .join(filters.and ? " and " : " or ");
+}
+class QueryBuilder {
+    static build(path, params = {}) {
+        const { skip, filters, expand, orderby, top } = params;
+        const queryParams = [];
+        const filtersQuery = buildFilters(filters);
+        if (filtersQuery)
+            queryParams.push(`filter=${filtersQuery}`);
+        if (expand)
+            queryParams.push(`expand=${expand}`);
+        if (orderby)
+            queryParams.push(`orderby=${orderby}`);
+        if (top != null)
+            queryParams.push(`top=${top}`);
+        if (skip != null)
+            queryParams.push(`skip=${skip}`);
+        return queryParams.length ? `${path}?${queryParams.join("&")}` : path;
+    }
+}
+exports.QueryBuilder = QueryBuilder;

package/package.json

@@ -1,40 +1,39 @@
 {
   "name": "@nano-app/frontend",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "View + Controller frontend architecture for React/Next.js",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
+      "import": "./dist/index.js",
       "require": "./dist/index.js",
       "types": "./dist/index.d.ts"
-    },
-    "./plugin": {
-      "require": "./dist/plugin/index.js",
-      "types": "./dist/plugin/index.d.ts"
     }
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "tsc",
-    "prepublishOnly": "npm run build"
+    "publish": "npm run build && npm publish --access public"
   },
-  "keywords": ["architecture", "typescript", "react", "next", "controller", "view"],
+  "keywords": [
+    "architecture",
+    "typescript",
+    "react",
+    "next",
+    "controller",
+    "view"
+  ],
   "author": "Cristian Serrano",
   "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Nano-Nathan/nano-app.git"
-  },
   "peerDependencies": {
+    "@nano-app/backend": "file:../backend",
     "next": ">=14.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
-    "zustand": ">=5.0.0",
-    "@nano-app/backend": "file:../backend"
-  },
-  "dependencies": {
-    "jiti": "^1.21.0"
+    "zustand": ">=5.0.0"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",
@@ -44,5 +43,8 @@
     "react-dom": "^18.0.0",
     "typescript": "^5.3.0",
     "zustand": "^5.0.0"
+  },
+  "dependencies": {
+    "fs": "^0.0.1-security"
   }
 }