@mimi-ng/cli 0.3.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

@@ -1,12 +1,71 @@
 "use strict";
 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;
 exports.majorOf = majorOf;
 const schematics_1 = require("@angular-devkit/schematics");
+const paths_1 = require("../init/paths");
 /** Nombre de esta colección (el paquete). */
 exports.MIMI_COLLECTION = '@mimi-ng/cli';
+/**
+ * Carpeta de los Blocks si mimi.json no la dice: la hermana de `components/` cuando la de
+ * componentes es la de siempre (`src/app/components/ui` → `src/app/blocks`), o si no, la hermana
+ * 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);
+    }
+    else {
+        parts.pop();
+    }
+    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`, `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', 'pages']) {
+        const value = config.aliases?.[name];
+        if (value === undefined)
+            continue;
+        assertRelative(`aliases.${name}`, value, ALIAS_EXAMPLES[name]);
+    }
+    for (const [item, entry] of Object.entries(config.blocks ?? {})) {
+        if (entry?.path === undefined)
+            continue;
+        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

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tailwindSupportsSourceNot = tailwindSupportsSourceNot;
+exports.withFolderSource = withFolderSource;
+exports.mimiSourceNotLine = mimiSourceNotLine;
+exports.mimiSourceNotPath = mimiSourceNotPath;
+exports.missingMimiExclusion = missingMimiExclusion;
+const css_1 = require("../init/css");
+const paths_1 = require("../init/paths");
+/** La carpeta de las copias originales (`.mimi/base/`), en la raíz del workspace. */
+const MIMI_DIR = '.mimi';
+/**
+ * ¿El Tailwind del proyecto entiende `@source not` (4.1 o superior)? Manda la versión instalada
+ * (`node_modules`, la que corre de verdad); si no está instalado, el rango de package.json: solo
+ * un rango que no puede pasar de la 4.0 (`4.0.5`, `~4.0.17`) cuenta como 4.0. `^4.0.17` instala
+ * la última 4.x, así que sí lo entiende.
+ */
+function tailwindSupportsSourceNot(tree, declared) {
+    const file = tree.read('node_modules/tailwindcss/package.json');
+    const installed = file
+        ? JSON.parse(file.toString('utf-8')).version
+        : undefined;
+    if (installed)
+        return atLeast41(installed);
+    if (!declared)
+        return true;
+    // Solo un rango exacto o con `~` fija el minor; `^4.0.17`, `>=4`, `^4`, `latest`: la última 4.x.
+    const match = /^\s*(?:~|=|v)?\s*(\d+)\.(\d+)/.exec(declared);
+    if (!match)
+        return true;
+    const [major, minor] = [Number(match[1]), Number(match[2])];
+    return major > 4 || (major === 4 && minor >= 1);
+}
+function atLeast41(version) {
+    const [major, minor] = version.split('.').map((n) => Number.parseInt(n, 10) || 0);
+    return major > 4 || (major === 4 && minor >= 1);
+}
+/**
+ * Con `source(none)`, Tailwind solo escanea lo que dice un `@source`: la carpeta de los Blocks
+ * (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 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, dir);
+    if ((0, css_1.hasDirective)(css, '@source', path))
+        return null;
+    const line = `@source "${path}";`;
+    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 };
+    }
+    const updated = (0, css_1.insertAfterTheme)(css, [line]);
+    return updated === null ? null : { css: updated, line };
+}
+/** La línea que excluye `.mimi/` del escaneo de Tailwind, relativa al CSS global. */
+function mimiSourceNotLine(cssPath) {
+    return `@source not "${mimiSourceNotPath(cssPath)}";`;
+}
+function mimiSourceNotPath(cssPath) {
+    return (0, paths_1.relativePath)((0, paths_1.dirnameOf)(cssPath), MIMI_DIR);
+}
+/**
+ * ¿Falta la exclusión de `.mimi/` en este CSS? No hace falta con `source(none)` (Tailwind no
+ * escanea nada por su cuenta) ni si ya está, con comillas simples o dobles.
+ */
+function missingMimiExclusion(css, cssPath) {
+    const tailwind = (0, css_1.findTailwindImport)(css);
+    if (!tailwind || tailwind.sourceNone)
+        return false;
+    return !(0, css_1.hasDirective)(css, '@source not', mimiSourceNotPath(cssPath));
+}

package/dist/utils/write-files.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
 exports.writeTemplates = writeTemplates;
 exports.blockedMessages = blockedMessages;
@@ -9,6 +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. */
@@ -34,7 +43,33 @@ exports.hasFileChanges = hasFileChanges;
 function projectPathOf(file) {
     return file.replace(/^components\//, '');
 }
-/** Copia original en .mimi/base, con la misma estructura (`.mimi/base/button/button.ts`). */
+/** Prefijo de los archivos de un Block en las plantillas (`blocks/login-01/login-01.ts`). */
+const BLOCKS_PREFIX = 'blocks/';
+/** ¿Es un archivo de un Block? */
+const isBlockFile = (file) => file.startsWith(BLOCKS_PREFIX);
+exports.isBlockFile = isBlockFile;
+/**
+ * Ruta en el proyecto de un archivo de las plantillas: los Blocks van a su carpeta, sin
+ * `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, 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)}`;
+}
+/**
+ * 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. 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)}`;
 }
@@ -74,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).
@@ -86,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) => `${options.componentsDir}/${projectPathOf(file)}`;
+        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))
@@ -109,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) })),
         ]));
@@ -219,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) {
-    const path = (file) => `${componentsDir}/${projectPathOf(file)}`;
+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}).`;
@@ -228,9 +274,18 @@ function blockedMessages(report, componentsDir, version) {
                 ? `${item} no se actualizó a ${version}: ${needs}`
                 : `${item} no se agregó: ${needs}`;
         }
-        const isTheme = registry_1.registry.items[item]?.type === 'theme';
-        const label = isTheme ? 'El tema' : item;
+        const type = registry_1.registry.items[item]?.type;
         const dir = projectPathOf(files[0]).split('/').slice(0, -1).join('/');
+        if (type === 'block') {
+            // Lo normal es editar un Block (es una pantalla del usuario): el aviso no alarma (B.1-b).
+            return (`${item} no se actualizó a ${version}: es tu pantalla y la modificaste ` +
+                `(${files.map(path).join(', ')}), así que no se tocó ninguno de sus archivos. Es lo ` +
+                `normal con un Block. La versión de Mimi que modificaste está en ${exports.BASE_DIR}/${dir}/, ` +
+                'para comparar. Si quieres la nueva, guarda tus cambios (por ejemplo, en git) y vuelve ' +
+                'a ejecutar el comando con --overwrite: reemplaza tu pantalla entera.');
+        }
+        const isTheme = type === 'theme';
+        const label = isTheme ? 'El tema' : item;
         return (`${label} no se actualizó a ${version} porque modificaste ${files.map(path).join(', ')}. ` +
             'No se cambió ninguno de sus archivos, para no mezclar versiones.' +
             (isTheme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mimi-ng/cli",
-  "version": "0.3.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",