@mimi-ng/cli 0.4.0 → 0.5.0

package/dist/utils/pages.js

@@ -0,0 +1,138 @@
+"use strict";
+/**
+ * Blocks de tipo página (B.11): `ng g mimi login-01` no copia el Block tal cual (`Login01`,
+ * `mimi-login-01`), sino que genera una página del usuario en `aliases.pages`
+ * (`src/app/pages/login/login.ts`, clase `LoginPage`) con su archivo de rutas.
+ *
+ * Solo funciones de texto, sin schematics: lo usa también el sitio para mostrar el código como
+ * lo genera la CLI.
+ *
+ * **Seguimiento por el nombre del registro (B.11-f):** los archivos de una página se identifican
+ * con claves `pages/<ítem>/…` (`pages/login-01/login-01.ts`), que son también las de sus bases
+ * (`.mimi/base/pages/login-01/`) y las del manifiesto. La carpeta y el nombre que eligió el
+ * usuario solo deciden dónde se escriben y cómo se llaman.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isBlockLikeName = exports.pageItemOf = exports.pageKeys = exports.pageKeyOf = exports.routesKey = exports.pageSourceFiles = exports.routesConstName = exports.pageClassName = exports.defaultPageName = exports.PAGE_NAME = exports.isPageFile = exports.PAGES_PREFIX = void 0;
+exports.pageSelector = pageSelector;
+exports.pageTargetPath = pageTargetPath;
+exports.renderPageFile = renderPageFile;
+exports.routesFile = routesFile;
+exports.routeLine = routeLine;
+/** Prefijo de las claves de los archivos de una página. */
+exports.PAGES_PREFIX = 'pages/';
+/** ¿Es la clave de un archivo de una página? */
+const isPageFile = (file) => file.startsWith(exports.PAGES_PREFIX);
+exports.isPageFile = isPageFile;
+/** Nombre válido para `--name`: kebab-case, empieza con una letra (`login`, `admin-login`). */
+exports.PAGE_NAME = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/;
+/** Nombre por defecto: el del registro sin el número (`login-01` → `login`). */
+const defaultPageName = (item) => item.replace(/-\d+$/, '');
+exports.defaultPageName = defaultPageName;
+const pascal = (kebab) => kebab
+    .split('-')
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('');
+const endsWithPage = (name) => name === 'page' || name.endsWith('-page');
+/** `login` → `LoginPage`; `login-page` → `LoginPage` (sin repetir «Page»). */
+const pageClassName = (name) => endsWithPage(name) ? pascal(name) : `${pascal(name)}Page`;
+exports.pageClassName = pageClassName;
+/** `app` y `login` → `app-login-page`; sin prefijo, `login-page`. */
+function pageSelector(prefix, name) {
+    const base = endsWithPage(name) ? name : `${name}-page`;
+    return prefix ? `${prefix}-${base}` : base;
+}
+/** `login` → `LOGIN_ROUTES`; `admin-login` → `ADMIN_LOGIN_ROUTES`. */
+const routesConstName = (name) => `${name.replace(/-/g, '_').toUpperCase()}_ROUTES`;
+exports.routesConstName = routesConstName;
+const basename = (file) => file.slice(file.lastIndexOf('/') + 1);
+/** Los archivos del Block que pasan a la página: todos menos su `index.ts`. */
+const pageSourceFiles = (files) => files.filter((file) => basename(file) !== 'index.ts');
+exports.pageSourceFiles = pageSourceFiles;
+/** Clave del archivo de rutas (`pages/login-01/login-01.routes.ts`). */
+const routesKey = (item) => `${exports.PAGES_PREFIX}${item}/${item}.routes.ts`;
+exports.routesKey = routesKey;
+/** Clave de un archivo del Block en la página: `blocks/login-01/login-01.html` → `pages/login-01/login-01.html`. */
+const pageKeyOf = (item, file) => `${exports.PAGES_PREFIX}${item}/${basename(file)}`;
+exports.pageKeyOf = pageKeyOf;
+/** Las claves de los archivos de una página: los del Block (sin `index.ts`) y el de rutas. */
+const pageKeys = (item, files) => [
+    ...(0, exports.pageSourceFiles)(files).map((file) => (0, exports.pageKeyOf)(item, file)),
+    (0, exports.routesKey)(item),
+];
+exports.pageKeys = pageKeys;
+/** El ítem de una clave de página (`pages/login-01/login-01.ts` → `login-01`). */
+const pageItemOf = (key) => key.slice(exports.PAGES_PREFIX.length).split('/')[0];
+exports.pageItemOf = pageItemOf;
+/**
+ * Ruta en el workspace de un archivo de la página: `pages/login-01/login-01.ts` con
+ * `{ dir: 'src/app/pages/login', name: 'login' }` → `src/app/pages/login/login.ts`.
+ */
+function pageTargetPath(key, target) {
+    const file = basename(key);
+    const rest = file.startsWith(target.item) ? file.slice(target.item.length) : `.${file}`;
+    return `${target.dir}/${target.name}${rest}`;
+}
+const escape = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+/** `settings-01` → `SETTINGS_01`; `Login-Page` → `LOGIN_PAGE`. */
+const constantCase = (kebab) => kebab.replace(/-/g, '_').toUpperCase();
+/**
+ * ¿El nombre de página contiene el del Block (`login-01`, `login-01-x`)? La conversión no
+ * distinguiría lo viejo de lo nuevo: `ng g mimi` lo rechaza con su propio mensaje.
+ */
+const isBlockLikeName = (item, name) => name === item || name.startsWith(`${item}-`);
+exports.isBlockLikeName = isBlockLikeName;
+/**
+ * El código de un archivo del Block convertido en el de la página: el selector `mimi-login-01`
+ * (también en los `id`) pasa a `app-login-page`; la clase `Login01` y sus tipos (`Login01Value`)
+ * a `LoginPage` (`LoginPageValue`); las constantes (`SETTINGS_01_PLAN`) a `SETTINGS_PAGE_PLAN`;
+ * los archivos propios (`./login-01.html`) a `./login.html`. Lanza un error si queda algo del
+ * nombre del Block (un Block nuevo con otra forma necesita que se revise esta función; lo prueba
+ * `pages.spec.ts` con los Blocks reales). El nombre de la página no puede contener el del Block
+ * (`--name login-01`): lo rechaza antes `isBlockLikeName`.
+ */
+function renderPageFile(source, target) {
+    const { item, name } = target;
+    const fromClass = pascal(item);
+    const fromConstant = constantCase(item);
+    const result = source
+        .split(`mimi-${item}`)
+        .join(pageSelector(target.prefix, name))
+        .replace(new RegExp(`(['"\`])\\./${escape(item)}\\.`, 'g'), `$1./${name}.`)
+        .replace(new RegExp(`\\b${escape(fromClass)}`, 'g'), (0, exports.pageClassName)(name))
+        .replace(new RegExp(`\\b${escape(fromConstant)}(?=_|\\b)`, 'g'), constantCase((0, exports.pageClassName)(name).replace(/([a-z0-9])([A-Z])/g, '$1-$2')));
+    const left = [`mimi-${item}`, `./${item}.`].filter((text) => result.includes(text));
+    if (new RegExp(`\\b${escape(fromClass)}`).test(result))
+        left.push(fromClass);
+    if (new RegExp(`\\b${escape(fromConstant)}(?=_|\\b)`).test(result))
+        left.push(fromConstant);
+    if (left.length > 0) {
+        throw new Error(`No se pudo convertir ${item} en una página: quedan ${left.join(', ')}. Es un error de Mimi; ` +
+            'avísanos en https://github.com/nuki23/mimi-ng/issues.');
+    }
+    return result;
+}
+/** `login.routes.ts`: la página en carga diferida, lista para `loadChildren`. */
+function routesFile(target) {
+    const className = (0, exports.pageClassName)(target.name);
+    return [
+        "import type { Routes } from '@angular/router';",
+        '',
+        '/**',
+        ` * Rutas de la página ${target.name} (${target.item} de Mimi). La página se carga al entrar en`,
+        ' * ella. En app.routes.ts, con loadChildren (ng g mimi te dio la línea exacta).',
+        ' */',
+        `export const ${(0, exports.routesConstName)(target.name)}: Routes = [`,
+        `  { path: '', loadComponent: () => import('./${target.name}').then((m) => m.${className}) },`,
+        '];',
+        '',
+    ].join('\n');
+}
+/**
+ * La línea para `app.routes.ts` (que está en `appDir`): `{ path: 'login', loadChildren: () =>
+ * import('./pages/login/login.routes').then((m) => m.LOGIN_ROUTES) },`.
+ */
+function routeLine(target, routesImport) {
+    return (`{ path: '${target.name}', loadChildren: () => import('${routesImport}')` +
+        `.then((m) => m.${(0, exports.routesConstName)(target.name)}) },`);
+}

package/dist/utils/project.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MIMI_COLLECTION = void 0;
 exports.defaultBlocksDir = defaultBlocksDir;
+exports.defaultPagesDir = defaultPagesDir;
 exports.assertAliases = assertAliases;
 exports.readJson = readJson;
 exports.allDependencies = allDependencies;
@@ -16,6 +17,16 @@ exports.MIMI_COLLECTION = '@mimi-ng/cli';
  * de la carpeta de componentes (`src/app/ui` → `src/app/blocks`).
  */
 function defaultBlocksDir(componentsDir) {
+    return siblingOfComponents(componentsDir, 'blocks');
+}
+/**
+ * Carpeta de las páginas si mimi.json no la dice (B.11-b), con la misma regla que la de los
+ * Blocks: `src/app/components/ui` → `src/app/pages`.
+ */
+function defaultPagesDir(componentsDir) {
+    return siblingOfComponents(componentsDir, 'pages');
+}
+function siblingOfComponents(componentsDir, folder) {
     const parts = componentsDir.split('/').filter(Boolean);
     if (parts.length >= 2 && parts.at(-1) === 'ui' && parts.at(-2) === 'components') {
         parts.splice(-2, 2);
@@ -23,25 +34,38 @@ function defaultBlocksDir(componentsDir) {
     else {
         parts.pop();
     }
-    return [...parts, 'blocks'].join('/');
+    return [...parts, folder].join('/');
 }
+const ALIAS_EXAMPLES = {
+    components: 'src/app/components/ui',
+    blocks: 'src/app/blocks',
+    pages: 'src/app/pages',
+};
 /**
- * M2: falla con un error claro (sin escribir nada) si `aliases.components` o `aliases.blocks` de
- * mimi.json es absoluto, tiene `..` o sale del proyecto.
+ * M2: falla con un error claro (sin escribir nada) si `aliases.components`, `aliases.blocks` o
+ * `aliases.pages` de mimi.json, o la carpeta de una página (`blocks.<ítem>.path`, B.11), es
+ * absoluto, tiene `..` o sale del proyecto.
  */
 function assertAliases(config) {
-    for (const name of ['components', 'blocks']) {
+    for (const name of ['components', 'blocks', 'pages']) {
         const value = config.aliases?.[name];
         if (value === undefined)
             continue;
-        const reason = (0, paths_1.invalidAliasReason)(value);
-        if (!reason)
+        assertRelative(`aliases.${name}`, value, ALIAS_EXAMPLES[name]);
+    }
+    for (const [item, entry] of Object.entries(config.blocks ?? {})) {
+        if (entry?.path === undefined)
             continue;
-        const example = name === 'blocks' ? 'src/app/blocks' : 'src/app/components/ui';
-        throw new schematics_1.SchematicsException(`mimi.json → aliases.${name} ${reason}: ${JSON.stringify(value)}. Usa una ruta relativa a ` +
-            `la raíz del workspace y dentro de ella (por ejemplo "${example}"). No se cambió nada.`);
+        assertRelative(`blocks.${item}.path`, entry.path, `${ALIAS_EXAMPLES.pages}/login`);
     }
 }
+function assertRelative(key, value, example) {
+    const reason = (0, paths_1.invalidAliasReason)(value);
+    if (!reason)
+        return;
+    throw new schematics_1.SchematicsException(`mimi.json → ${key} ${reason}: ${JSON.stringify(value)}. Usa una ruta relativa a ` +
+        `la raíz del workspace y dentro de ella (por ejemplo "${example}"). No se cambió nada.`);
+}
 function readJson(tree, path) {
     if (!tree.exists(path))
         return null;

package/dist/utils/tailwind.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.tailwindSupportsSourceNot = tailwindSupportsSourceNot;
-exports.withBlocksSource = withBlocksSource;
+exports.withFolderSource = withFolderSource;
 exports.mimiSourceNotLine = mimiSourceNotLine;
 exports.mimiSourceNotPath = mimiSourceNotPath;
 exports.missingMimiExclusion = missingMimiExclusion;
@@ -37,24 +37,28 @@ function atLeast41(version) {
 }
 /**
  * Con `source(none)`, Tailwind solo escanea lo que dice un `@source`: la carpeta de los Blocks
- * necesita el suyo (G1), como la de componentes. Devuelve el CSS con la línea agregada (después
- * del `@source` de componentes, o del tema), o `null` si no hace falta: sin `source(none)`, o si
- * ya está (comillas simples o dobles).
+ * (G1) y la de las páginas (B.11) necesitan el suyo, como la de componentes. Devuelve el CSS con
+ * la línea agregada (después del último `@source` de `afterDirs` que esté, o del tema), o `null`
+ * si no hace falta: sin `source(none)`, o si ya está (comillas simples o dobles).
  */
-function withBlocksSource(css, cssPath, componentsDir, blocksDir) {
+function withFolderSource(css, cssPath, afterDirs, dir) {
     const tailwind = (0, css_1.findTailwindImport)(css);
     if (!tailwind?.sourceNone)
         return null;
     const cssDir = (0, paths_1.dirnameOf)(cssPath);
-    const path = (0, paths_1.relativePath)(cssDir, blocksDir);
+    const path = (0, paths_1.relativePath)(cssDir, dir);
     if ((0, css_1.hasDirective)(css, '@source', path))
         return null;
     const line = `@source "${path}";`;
-    const after = new RegExp(String.raw `^[ \t]*@source\s+(["'])` +
-        (0, paths_1.relativePath)(cssDir, componentsDir).replace(/[.*+?^${}()|[\]\\]/g, '\\$&') +
-        String.raw `\1[^;\n]*;[^\n]*$`, 'm').exec(css);
-    if (after) {
-        const end = after.index + after[0].length;
+    let end = -1;
+    for (const after of afterDirs) {
+        const match = new RegExp(String.raw `^[ \t]*@source\s+(["'])` +
+            (0, paths_1.relativePath)(cssDir, after).replace(/[.*+?^${}()|[\]\\]/g, '\\$&') +
+            String.raw `\1[^;\n]*;[^\n]*$`, 'm').exec(css);
+        if (match)
+            end = Math.max(end, match.index + match[0].length);
+    }
+    if (end >= 0) {
         const eol = /\r\n/.test(css) ? '\r\n' : '\n';
         return { css: css.slice(0, end) + eol + line + css.slice(end), line };
     }

package/dist/utils/write-files.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isBlockFile = exports.hasFileChanges = exports.emptyReport = exports.MANIFEST = exports.BASE_DIR = void 0;
+exports.isBlockFile = exports.hasFileChanges = exports.emptyReport = exports.MANIFEST = exports.BASE_DIR = exports.itemFiles = void 0;
 exports.projectPathOf = projectPathOf;
 exports.targetPathOf = targetPathOf;
 exports.basePathOf = basePathOf;
@@ -10,7 +10,14 @@ exports.compareVersions = compareVersions;
 exports.updatedMessages = updatedMessages;
 const schematics_1 = require("@angular-devkit/schematics");
 const registry_1 = require("../registry");
+const pages_1 = require("./pages");
 const project_1 = require("./project");
+/**
+ * Los archivos de un ítem: los del registro o, si se genera como página, sus claves
+ * `pages/<ítem>/…` (B.11-f).
+ */
+const itemFiles = (item, pages = {}) => pages[item] ? (0, pages_1.pageKeys)(item, registry_1.registry.items[item].files) : registry_1.registry.items[item].files;
+exports.itemFiles = itemFiles;
 /** Carpeta de las copias originales, en la raíz del workspace. Debe quedar en git. */
 exports.BASE_DIR = '.mimi/base';
 /** Versión de Mimi con la que se escribió la base de cada archivo. */
@@ -46,7 +53,13 @@ exports.isBlockFile = isBlockFile;
  * `blocks/` (`blocks/login-01/login-01.ts` → `<blocksDir>/login-01/login-01.ts`); el resto, a la
  * de componentes (ver projectPathOf).
  */
-function targetPathOf(file, componentsDir, blocksDir) {
+function targetPathOf(file, componentsDir, blocksDir, pages = {}) {
+    if ((0, pages_1.isPageFile)(file)) {
+        const target = pages[(0, pages_1.pageItemOf)(file)];
+        if (!target)
+            throw new Error(`Falta la carpeta de la página de ${file}.`);
+        return (0, pages_1.pageTargetPath)(file, target);
+    }
     return (0, exports.isBlockFile)(file)
         ? `${blocksDir}/${file.slice(BLOCKS_PREFIX.length)}`
         : `${componentsDir}/${projectPathOf(file)}`;
@@ -54,7 +67,8 @@ function targetPathOf(file, componentsDir, blocksDir) {
 /**
  * Copia original en .mimi/base, con la misma estructura (`.mimi/base/button/button.ts`). Los
  * Blocks conservan `blocks/` (`.mimi/base/blocks/login-01/login-01.ts`), y esa es también su
- * clave en el manifiesto.
+ * clave en el manifiesto. Las páginas van por su nombre del registro, no por el de su carpeta
+ * (`.mimi/base/pages/login-01/login-01.ts`, B.11-f).
  */
 function basePathOf(file) {
     return `${exports.BASE_DIR}/${projectPathOf(file)}`;
@@ -95,6 +109,8 @@ function readManifest(tree) {
 function writeTemplates(options) {
     const items = [...new Set(options.items)];
     const implicit = new Set(options.implicit ?? []);
+    const pages = options.pages ?? {};
+    const filesOf = (item) => (0, exports.itemFiles)(item, pages);
     const files = new Set(items.flatMap((item) => registry_1.registry.items[item].files));
     const contents = new Map();
     // 1. Lee las plantillas (sin escribir nada: forEach devuelve null).
@@ -107,9 +123,18 @@ function writeTemplates(options) {
     ]));
     // 2. Decide por ítem y escribe.
     const write = (tree) => {
+        // Las páginas: su código sale del Block, con el nombre que eligió el usuario (B.11).
+        for (const [item, target] of Object.entries(pages)) {
+            for (const file of (0, pages_1.pageSourceFiles)(registry_1.registry.items[item].files)) {
+                const source = contents.get(file);
+                if (source !== undefined)
+                    contents.set((0, pages_1.pageKeyOf)(item, file), (0, pages_1.renderPageFile)(source, target));
+            }
+            contents.set((0, pages_1.routesKey)(item), (0, pages_1.routesFile)(target));
+        }
         const manifest = readManifest(tree);
         let manifestChanged = false;
-        const targetOf = (file) => targetPathOf(file, options.componentsDir, options.blocksDir ?? (0, project_1.defaultBlocksDir)(options.componentsDir));
+        const targetOf = (file) => targetPathOf(file, options.componentsDir, options.blocksDir ?? (0, project_1.defaultBlocksDir)(options.componentsDir), pages);
         const stateOf = (file) => {
             const target = targetOf(file);
             if (!tree.exists(target))
@@ -130,7 +155,7 @@ function writeTemplates(options) {
         };
         const states = new Map(items.map((item) => [
             item,
-            registry_1.registry.items[item].files
+            filesOf(item)
                 .filter((file) => contents.has(file))
                 .map((file) => ({ file, ...stateOf(file) })),
         ]));
@@ -240,8 +265,8 @@ function writeTemplates(options) {
  * Los avisos de los ítems que no se escribieron (`report.blocked`): qué no se actualizó, por qué
  * y qué hacer. Nunca dicen «actualizado».
  */
-function blockedMessages(report, componentsDir, version, blocksDir = (0, project_1.defaultBlocksDir)(componentsDir)) {
-    const path = (file) => targetPathOf(file, componentsDir, blocksDir);
+function blockedMessages(report, componentsDir, version, blocksDir = (0, project_1.defaultBlocksDir)(componentsDir), pages = {}) {
+    const path = (file) => targetPathOf(file, componentsDir, blocksDir, pages);
     return report.blocked.map(({ item, files, dependency, installed }) => {
         if (dependency) {
             const needs = `necesita ${dependency} ${version}, que no se actualizó (ver el aviso de ${dependency}).`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mimi-ng/cli",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Angular + Tailwind CSS 4 UI components that a CLI copies into your project, so you own the code. Schematics for ng add and ng generate.",
   "keywords": [
     "angular",