@nano-app/frontend 0.3.5 → 0.4.0

package/build/stores/Store.js

@@ -0,0 +1,33 @@
+import { observable, runInAction } from "mobx";
+//#region src/stores/Store.ts
+/** State of one store, read and written by path (`/drawer/isOpen`) */
+var Store = class Store {
+	oState;
+	/** Makes the store's initial data observable, so reads are tracked and writes notify them */
+	constructor(oData = {}) {
+		this.oState = observable(oData);
+	}
+	/** Value at a path: an object comes back observable, so reading its fields stays tracked */
+	get(sPath) {
+		return Store.keys(sPath).reduce((oValue, sKey) => oValue?.[sKey], this.oState);
+	}
+	/** Writes a value at a path, creating the levels that are missing */
+	set(sPath, oValue) {
+		const aKeys = Store.keys(sPath);
+		const sLast = aKeys.pop();
+		if (!sLast) return;
+		runInAction(() => {
+			const oParent = aKeys.reduce((oLevel, sKey) => {
+				oLevel[sKey] ??= {};
+				return oLevel[sKey];
+			}, this.oState);
+			oParent[sLast] = oValue;
+		});
+	}
+	/** Keys of a path, with or without the leading slash */
+	static keys(sPath) {
+		return sPath.split("/").filter(Boolean);
+	}
+};
+//#endregion
+export { Store as default };

package/build/types/component.d.ts

@@ -0,0 +1,19 @@
+import { NanoObject } from "../core/types/objects.js";
+import { Stores } from "./store.js";
+import { ReactNode } from "react";
+//#region src/types/component.d.ts
+/** Props a component receives from its parent */
+export type ComponentProps = NanoObject<any>;
+/** What a controller and its views receive: the props and the stores */
+export type ComponentContext = {
+  props: ComponentProps;
+  stores: Stores;
+};
+/** Renders a component with the controller's methods; the context wins over a method's name */
+export type View<M extends NanoObject> = (params: Omit<M, keyof ComponentContext> & ComponentContext) => ReactNode;
+/** Returned by `createController`: binds views to its methods */
+export type Controller<M extends NanoObject> = {
+  /** Creates a component that renders the view with the controller's methods */
+  bindView(view: View<M>): (props: ComponentProps) => ReactNode;
+};
+//#endregion

package/build/types/store.d.ts

@@ -0,0 +1,9 @@
+import { APP_NAME } from "../core/const.js";
+import { NanoObject } from "../core/types/objects.js";
+import Store from "../stores/Store.js";
+//#region src/types/store.d.ts
+/** Stores of a React tree by name: a `Store` per `app` file, an `ApiStore` per `api` file */
+export type Stores = NanoObject<any> & {
+  [APP_NAME]: Store;
+};
+//#endregion

package/package.json

@@ -1,52 +1,73 @@
 {
   "name": "@nano-app/frontend",
-  "version": "0.3.5",
-  "description": "View + Controller frontend architecture for React/Next.js",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "version": "0.4.0",
+  "description": "React provider for Next.js apps on top of @nano-app/backend",
+  "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "types": "./build/index.d.ts",
+      "import": "./build/index.js"
+    },
+    "./next": {
+      "types": "./build/next.d.ts",
+      "import": "./build/next.js",
+      "default": "./build/next.js"
+    },
+    "./proxy": {
+      "types": "./build/proxy.d.ts",
+      "import": "./build/proxy.js"
     }
   },
-  "bin":{
-    "generate-stores": "./bin/generate-stores.mjs"
-  },
   "files": [
-    "dist",
-    "bin"
+    "build",
+    "LICENSE"
   ],
   "scripts": {
-    "build": "tsc",
-    "publish": "npm run build && npm publish --access public"
+    "build": "tsdown",
+    "prepublishOnly": "pnpm run build",
+    "test": "tsx --test tests/*.test.ts tests/*.test.tsx ../core/tests/*.test.ts"
   },
   "keywords": [
-    "architecture",
-    "typescript",
-    "react",
+    "nano-app",
     "next",
-    "controller",
-    "view"
+    "react",
+    "store"
   ],
   "author": "Cristian Serrano",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Nano-Nathan/nano-app.git",
+    "directory": "frontend"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=22"
+  },
   "peerDependencies": {
-    "@nano-app/backend": "file:../backend",
-    "next": ">=14.0.0",
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
-    "zustand": ">=5.0.0",
-    "fs": "^0.0.1-security"
+    "next": ">=16.3.0",
+    "react": ">=19.0.0"
+  },
+  "dependencies": {
+    "glob": "^13.0.6",
+    "jiti": "^2.7.0",
+    "mobx": "^7.1.0",
+    "mobx-react-lite": "^5.1.0"
   },
   "devDependencies": {
-    "@types/node": "^20.0.0",
-    "@types/react": "^18.0.0",
-    "next": "^14.0.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "typescript": "^5.3.0",
-    "zustand": "^5.0.0"
+    "@happy-dom/global-registrator": "^21.0.3",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/react": "^16.3.3",
+    "@types/node": "^26.6.5",
+    "@types/react": "^19.3.0",
+    "happy-dom": "^21.0.3",
+    "next": "^16.4.2",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "tsdown": "^0.23.1",
+    "tsx": "^4.23.15",
+    "typescript": "^7.0.2"
   }
 }

package/bin/generate-stores.mjs

@@ -1,128 +0,0 @@
-#!/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

@@ -1,327 +0,0 @@
-// 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,10 +0,0 @@
-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";
-export * from "./utils/Toast";
-export * from "./utils/TokenHelper";
-export type { ApiResponse } from "@nano-app/backend";

package/dist/index.js

@@ -1,34 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-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 });
-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/ApiStore.d.ts

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