@nutin/cli 1.2.0 → 1.2.1

package/CHANGELOG.md

@@ -1,12 +1,67 @@
 # Changelog
 
-## V1.0.1
+## V1.2.1
 
-- Fixed typo issue when using i18n feature
+- Builder
 
-## V1.0.2
+    - Added config file `builder.config.js` file (esbuild, verbose)
 
-- Partially fixed `npm run dev` script when using internal templates. *Page still needs to be reload manually from time to time.*
+- I18N
+
+    - Added JSON config file for centralized languages (`config/languages.json`)
+
+- testin-nutin
+
+    - Added config file `test.config.js` (origins array, verbose boolean)
+    - Added assertions + automated 'not' counterparts
+    - Improved spyOn
+    - Improved JSDOM setup & global registration
+
+- Improved deployment tools Dockerfile (nginx conf + gzip)
+
+    - Fixed typo and added comments in `nginx.conf`.
+    - Extracted gzip config from Dockerfile (removed `sed` command)
+    - Moved Dockerfile and deployment config files (`nginx.conf`, `gzip.conf`) into their own folder `tools/deployment`.
+    - Added `docker:build` and `docker:run` scripts in package.json.
+
+  See [DEPLOYMENT.md file](../../docs/DEPLOYMENT_HELPERS.md) for details.
+
+- Moved dev tools (`serve.js`, `dev-serve.js`, `watcher.js`) into their own `tools/dev` folder.
+
+- Added explicit chokidar devDependency (sass & live-server transitive).
+
+## V1.2.0
+
+- Fixed `npm run dev` command. Added middleware to reload nested routes.
+
+- Improved `data-optional` tag:
+    - Can now specify which attribute to check with `data-optional="attrName"` (`src`, `href`, ...)                           
+    - Now works for `img`, `input`, etc
+
+- Event Bus : 
+    - Tracks both event name + callback.                           
+    - cleanupEventListeners now works correctly.                           
+    - New property: `once`. `once` subscriptions automatically remove themselves after first call.
+
+- HTTP client : 
+    - Optional request / response interceptors.                           
+    - Full timeout / abort controller support preserved.                           
+    - onDestroy now clears interceptors to prevent memory leaks.
+
+- Improved builder
+
+    - Implemented `esbuild` & `html-minifier-terser`.                                 
+    - Added flags `--bundle` (for production-ready build. *`npm run build --bundle` is equivalent to `npm run build:prod`)* and `--log` (verbose output). **Doesn't work with yarn or bun**.                                
+    - Commands: `npm run build`, `npm run build:prod`,  `npm run serve:only`, `npm run serve`, `npm run dev`.                            
+
+  *Note: `--prod` or `--production` will set NODE_ENV to production, and have the same effect as `--bundle`.* `const isProd = process.env.npm_config_bundle || process.env.NODE_ENV === 'production';`
+
+- Improved deployment tools Dockerfile (nginx conf + gzip)
+
+  See [DEPLOYMENT.md file](../../docs/DEPLOYMENT_HELPERS.md) for details.
+
+- stylin-nutin (generator)
+    - When generating a component, prompts (boolean) to generate a `_component-name.scss` file in `styles/components` (forwarded by `stymes/components/_index.scss`).
 
 ## V1.1.0
 
@@ -27,32 +82,10 @@ type CatalogItemConfig<T = any> =
 
 **Notes:** *Primitive data arrays (string, number, etc) needs to be accessed with `config.value`.*
 
-## V1.2.0
-
-- Fixed `Cannot GET '/'` ponctual issue on changes with `npm run dev` command. Added middleware to reload nested routes.
-
-- Improved `data-optional` tag:
-  > Can now specify which attribute to check with `data-optional="attrName"` (`src`, `href`, ...)                           
-  > Now works for `img`, `input`, etc
-
-- Event Bus : 
-  > Tracks both event name + callback.                           
-  > cleanupEventListeners now works correctly.                           
-  > New property: `once`. `once` subscriptions automatically remove themselves after first call.
-
-- HTTP client : 
-  > Optional request / response interceptors.                           
-  > Full timeout / abort controller support preserved.                           
-  > onDestroy now clears interceptors to prevent memory leaks.
-
-- Improved builder
-
-  Implemented esbuild.                                 
-  Added flags `--bundle` (for production-ready build - equivalent to `npm run build:prod`) and `--log` (verbose output).                                 
-  Commands: `npm run build`, `npm run build:prod`,  `npm run serve:only`, `npm run serve`, `npm run dev`.                            
+## V1.0.2
 
-  *Note: `--prod` or `--production` will set NODE_ENV to production, and have the same effect as `--bundle`.* `const isProd = process.env.npm_config_bundle || process.env.NODE_ENV === 'production';`
+- Partially fixed `npm run dev` script when using internal templates. *Page still needs to be reload manually from time to time.*
 
-- Improved default Dockerfile (nginx conf + gzip)
+## V1.0.1
 
-  **NOTE :***Update nginx.conf as needed. Example: CSP connect-src if the app makes API calls.*
+- Fixed typo issue when using i18n feature

package/README.md

@@ -1,9 +1,11 @@
 # [nutin](https://www.nutin.org)
 
-**A lightweight, highly tweakable frontend toolkit, crafted for building lean, dynamic single-page applications without the complexity of full-scale frameworks.**                    
+**Build SPAs by understanding SPAs. A minimal frontend toolkit crafted for learning and lean applications.**                    
 Includes essential features out of the box, with zero runtime dependencies.                          
 *TypeScript / Javascript, SASS, HTML*
 
+- Required : Node >=18 **If using testin-nutin: Node >=20.19.0 (JSDOM requirement : `{ node: '^20.19.0 || ^22.12.0 || >=24.0.0' }`)**
+
 ## Install
 
 ```bash
@@ -25,20 +27,20 @@ nutin-new
 # argument: project-name
 
 -d --defaults
--pm --package-manager <manager> # npm (default), yarn, pnpm
+-pm --package-manager <manager> # npm (Default), yarn, pnpm, bun
 
---template # Use external templates
+--no-template # Use inline templates
 --no-stylin-nutin # Do not use built-in SCSS utility
 --testin-nutin # Use testin-nutin toolkit
---i18n # Use i18n & json-based content
+--no-i18n # Do not use i18n & json-based content
 --transition # Use animated view transitions. Note: May interfere with CSS `position: fixed`, `z-index`...
 
 # Defaults
---no-template # (Default) Do not use external templates
+--template # (Default) Use external templates
 --stylin-nutin # (Default) Use built-in SCSS utility classes & mixins
---no-i18n # (Default) Do not use i18n & json-based content
---no-transition # (Default) Do not use animated view transitions
+--i18n # (Default) Use i18n & json-based content
 --no-testin-nutin # (Default) Do not use testin-nutin toolkit
+--no-transition # (Default) Do not use animated view transitions
 
 # Help
 -h --help
@@ -46,6 +48,5 @@ nutin-new
 
 ## [First app tutorial](https://www.nutin.org/tutorial)
 
-
 - Visit the [website](https://www.nutin.org)
 - [Project repository](https://github.com/LoisKOUNINEF/nutin)

package/lib/index.mjs

@@ -2,11 +2,11 @@ import { program } from 'commander';
 import { print } from './src/print.mjs';
 import { promptUser } from './src/prompts.mjs';
 import { createProject } from './src/file-generator.mjs';
-import { displaySuccessMessage } from './src/utils.mjs';
+import { displaySuccessMessage, packageVersion } from './src/utils.mjs';
 
 export async function createApp() {
   program
-    .version('1.1.0')
+    .version(packageVersion)
     .argument('[projectName]', 'Name of the project')
     .option('-d, --defaults', 'Use default options')
     .option('-pm, --package-manager <manager>', 'Specify package manager (npm, yarn, pnpm, bun)')
@@ -14,10 +14,10 @@ export async function createApp() {
     .option('--no-template', 'Do not use external templates')
     .option('--stylin-nutin', '(Default) Use built-in SCSS utility classes & mixins')
     .option('--no-stylin-nutin', 'Do not use built-in SCSS utility')
-    .option('--i18n', 'Use i18n & json-based content')
-    .option('--no-i18n', '(Default) Do not use i18n & json-based content')
-    .option('--testin-nutin', '(Default) Use testin-nutin toolkit')
-    .option('--no-testin-nutin', 'Do not use testin-nutin toolkit')
+    .option('--i18n', '(Default) Use i18n & json-based content')
+    .option('--no-i18n', 'Do not use i18n & json-based content')
+    .option('--testin-nutin', 'Use testin-nutin toolkit')
+    .option('--no-testin-nutin', '(Default) Do not use testin-nutin toolkit')
     .option('--transition', 'Use animated view transitions\nNote: May interfere with CSS `position: fixed`, `z-index`...')
     .option('--no-transition', '(Default) Do not use animated view transitions')
     .addHelpText('afterAll', '\nChaining options :\nExample: -d -pm npm --i18n --testinNutin')

package/lib/src/file-generator.mjs

@@ -5,6 +5,7 @@ import { TemplateCompiler } from './template-compiler.mjs';
 import { print } from './print.mjs';
 import { initializeGit } from './git-manager.mjs';
 import { installDependencies, generatePackageJson, generateTsconfigJson, getCiCommand } from './package-manager.mjs';
+import { packageVersion } from './utils.mjs';
 
 const fs = fsExtra.default;
 const __filename = fileURLToPath(import.meta.url);
@@ -48,14 +49,14 @@ export class ProjectGenerator {
     const context = this.buildContext(answers);
     const templateDir = this.getTemplateDirectory(answers);
     
-    print.section('\n📝 Processing templates...');
+    print.section('📝 Processing templates...');
     await this.processTemplateDirectory(templateDir, projectPath, context);
     
     await this.processFeatureTemplates(projectPath, context);
   }
 
   buildContext(answers) {  
-    const version = '1.2.0';
+    const version = packageVersion;
     const ciCommand = getCiCommand(answers.packageManager);
 
     return {
@@ -148,7 +149,7 @@ export class ProjectGenerator {
         const featureTemplateDir = path.join(featuresDir, feature);
         
         if (await fs.pathExists(featureTemplateDir)) {
-          print.info(`\n🔧 Adding ${feature} feature...`);
+          print.info(`🔧 Adding ${feature} feature...`);
           await this.processTemplateDirectory(featureTemplateDir, projectPath, context);
         }
       }
@@ -158,6 +159,18 @@ export class ProjectGenerator {
   async generateJsonFiles(projectPath, answers) {
     await generatePackageJson(projectPath, answers);
     await generateTsconfigJson(projectPath, answers);
+    if (answers.i18n) this.generateConfigFiles(projectPath);
+  }
+
+  async generateConfigFiles(projectPath) {
+    const configPath = path.join(projectPath, 'config');
+    await fs.ensureDir(configPath);
+    const languages = {
+      "languages": ["en"],
+      "defaultLanguage": "en"
+    };
+
+    await fs.writeJSON(path.join(configPath, 'languages.json'), languages, { spaces: 2 });
   }
 
   async runPostSetupTasks(projectPath, answers) {
@@ -170,10 +183,10 @@ export class ProjectGenerator {
   }
 
   async runSetupScripts(projectPath, answers) {
-    print.section('\n⚙️ Running setup scripts...');
+    print.section('⚙️ Running setup scripts...');
     
     try {
-      const setupScriptsTemplate = path.join(__dirname, '../../templates/scripts');
+      const setupScriptsTemplate = path.join(__dirname, '..', '..', 'templates', 'scripts');
       
       if (await fs.pathExists(setupScriptsTemplate)) {
         const scriptsDir = path.join(projectPath, 'scripts');

package/lib/src/package-manager.mjs

@@ -39,7 +39,7 @@ function getInstallCommand(packageManager) {
 }
 
 function getScripts(answers) {
-  const { testinNutin, packageManager } = answers;
+  const { testinNutin, packageManager, projectName } = answers;
 
   const baseScripts = {
     "patch": `${packageManager} version patch -m 'CI/CD: Bump version to %s'`,
@@ -47,17 +47,18 @@ function getScripts(answers) {
     "major": `${packageManager} version major -m 'CI/CD: Bump version to %s'`,
     "build": "node tools/builder/builder.js",
     "build:prod": "NODE_ENV=production node tools/builder/builder.js",
-    "serve:only": "node tools/serve.js",
+    "serve:only": "node tools/dev/serve.js",
     "serve": `${packageManager} run build && ${packageManager} run serve:only`,
-    "dev": "node tools/dev.js",
-    "generate": "node tools/generator/generator.js"
+    "dev": "node tools/dev/dev-serve.js",
+    "generate": "node tools/generator/generator.js",
+    "docker:build": `docker build -t ${projectName} -f tools/deployment/Dockerfile .`,
+    "docker:run": `docker run -p 9090:9090 ${projectName}:latest`
   };
 
   const testinNutinScripts = {
-      "test": "node test/runner.js",
-      "test:rebuild": `${packageManager} run build && ${packageManager} run test`,
-      "test:watch": `${packageManager} run build && node test/watch-tests.js`,
-      "serve": `${packageManager} run build && ${packageManager} run serve:only`
+    "test": "node testin-nutin/runner.js",
+    "test:rebuild": `${packageManager} run build && ${packageManager} run test`,
+    "test:watch": `${packageManager} run build && node testin-nutin/watch-tests.js`
     }
 
   return testinNutin
@@ -72,12 +73,15 @@ export async function generatePackageJson(projectPath, answers) {
   const { testinNutin, projectName, packageManager } = answers;
 
   const devDependencies = {
-    "esbuild": "0.25.12",
-    "html-minifier-terser": "7.2.0",
-    "jsdom": "26.1.0",
-    "live-server": "1.2.2",
-    "sass": "1.89.0",
-    "typescript": "5.8.3"
+    "chokidar": "^4.0.3",
+    "esbuild": "^0.25.12",
+    "html-minifier-terser": "^7.2.0",
+    "live-server": "^1.2.2",
+    "sass": "^1.89.0",
+    "typescript": "^5.8.3",
+    ...(testinNutin && {
+      "jsdom": "^26.1.0",
+    })
   };
 
   const scripts = getScripts(answers);
@@ -86,12 +90,18 @@ export async function generatePackageJson(projectPath, answers) {
     "name": projectName,
     "version": "0.1.0",
     "type": "module",
-    "imports": testinNutin ? {
-      "#root/*.js": "./*.js"
-    } : {},
+    ...(testinNutin && {
+      "imports": {
+        "#root/*.js": "./*.js"
+      }
+    }),
     scripts,
     devDependencies,
-    "packageManager": `${packageManager}@latest`
+    ...(testinNutin && {
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    })
   };
   
   await fs.writeJSON(path.join(projectPath, 'package.json'), packageJson, { spaces: 2 });
@@ -105,13 +115,15 @@ export async function generateTsconfigJson(projectPath, answers) {
       "target": "ESNext",
       "module": "NodeNext",
       "moduleResolution": "NodeNext",
-      "rootDir": ".",
-      "outDir": "dist-build",
+      "rootDir": "src",
+      "outDir": "dist-build/src",
       "strict": true,
+      "skipLibCheck": true,
+      "forceConsistentCasingInFileNames": true,
+      "noUncheckedIndexedAccess": true,
       "esModuleInterop": true,
       "allowSyntheticDefaultImports": true,
       "lib": ["es2022", "DOM"],
-      "types": [],
       "removeComments": true,
       "resolveJsonModule": true,
       "typeRoots": ["src/types", "node_modules/@types"]

package/lib/src/prompts.mjs

@@ -36,7 +36,7 @@ export async function promptUser(initialName, cliOptions = {}) {
       stylinNutin: cliOptions.stylinNutin || true,
       template: cliOptions.template || true,
       i18n: cliOptions.i18n || true,
-      testinNutin: cliOptions.testinNutin || true,
+      testinNutin: cliOptions.testinNutin || false,
       transition: cliOptions.transitions || false
     };
   }
@@ -84,7 +84,7 @@ export async function promptUser(initialName, cliOptions = {}) {
       type: 'confirm',
       name: 'testinNutin',
       message: 'Use testin-nutin toolkit?',
-      default: true
+      default: false
     });
   }
 

package/lib/src/utils.mjs

@@ -14,3 +14,5 @@ export function displaySuccessMessage(answers) {
   
   print.success('\nHappy coding! 🚀\n');
 }
+
+export const packageVersion = '1.2.1';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nutin/cli",
-  "version": "1.2.0",
-  "description": "A lightweight, highly tweakable frontend toolkit, crafted for building lean, dynamic single-page applications without the complexity of full-scale frameworks.",
+  "version": "1.2.1",
+  "description": "Build SPAs by understanding SPAs. A minimal frontend toolkit crafted for learning and lean applications.",
   "preferGlobal": true,
   "main": "lib/index.mjs",
   "bin": {
@@ -19,6 +19,7 @@
     "nutin",
     "Frontend",
     "SPA",
+    "Learning",
     "Minimalist",
     "Lighweight",
     "Customizable"
@@ -32,7 +33,7 @@
     "inquirer": "^9.0.0"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=18"
   },
   "repository": {
     "type": "git",

package/templates/base/.dockerignore.hbs

@@ -9,7 +9,8 @@ dist-build
 .env
 *.txt
 {{#if testinNutin}}
-*.test
+*.test.js
+testin-nutin
 {{/if}}
 *.log
 

package/templates/base/builder.config.js.hbs

@@ -0,0 +1,28 @@
+export default {
+	esbuild: {
+    bundle: true,
+    minify: true,
+    sourcemap: false,
+    platform: 'browser',
+    format: 'esm',
+    target: ['es2015'],
+    legalComments: 'none',
+    loader: {
+      '.json': 'json',
+    },
+    define: {
+      'process.env.NODE_ENV': '"production"',
+    },
+	},
+  sass: {
+    paths: [ 
+      'base', 
+      'core',
+{{#if stylinNutin}}
+      'components',
+      'views',
+{{/if}}
+    ], // in styles/
+  },
+	verbose: false,
+}

package/templates/base/src/app/components/common/anchor/anchor.component.ts.hbs

@@ -2,21 +2,19 @@ import { AnchorManager, Component, IAnchorConfig } from '../../../../core/index.
 
 /**
  * ```typescript
-interface IAttributesConfig {
-  {{#if i18n}}
-  i18nKey?: string;
-  {{/if}}
+ * interface IAnchorConfig {
+  // prefix href with '#' for internal anchor
+  href: string;
+  target?: string;
   textContent?: string;
+{{#if i18n}}
+  i18nKey?: string;
+{{/if}}
   className?: string;
   style?: string;
-// use regular pipe syntax for arguments / chaining
+  // use regular pipe syntax for arguments / chaining
   pipes?: string;
-}
-interface IAnchorConfig extends IAttributesConfig {
-// prefix href with '#' for internal anchor
-  href: string;
-// _blank, etc
-  target?: string;
+  tagName?: keyof HTMLElementTagNameMap;
 }
 ```
 */
@@ -25,9 +23,10 @@ export class AnchorComponent extends Component<HTMLAnchorElement, IAnchorConfig>
   constructor(mountTarget: HTMLElement, config: IAnchorConfig) {
     super({
       mountTarget,
+      tagName: config.tagName,
       config,
       normalizeKeys: ['style', 'pipes', 'className']
     });
     new AnchorManager(config, this.element);
   }
-}
+}

package/templates/base/src/app/dom.test.js.hbs

@@ -1,6 +1,13 @@
 describe('App container', () => {
-  it('should exist', () => {
+  it('should be defined', () => {
     const appContainer = document.getElementById('app');
     expect(appContainer).toBeDefined();
   });
+  it('should have title', () => {
+    expect(document.title).toEqual('{{projectName}}');
+  });
+  it('should have meta description', () => {
+    const desc = document.querySelector('meta[name="description"]').content;
+    expect(desc).toEqual('{{projectName}}');
+  });
 });

package/templates/base/src/core/base-classes/base-component/helpers/event.helper.ts.hbs

@@ -10,6 +10,9 @@ export class EventHelper {
     element.querySelectorAll('[data-event]').forEach(el => {
       const parts = el.getAttribute('data-event')!.split(':');
       const [eventName, handlerName, argsString] = parts;
+
+      if (!handlerName || !eventName) return;
+
       const handler = (component as any)[handlerName];
 
       if (typeof handler === 'function') {

package/templates/base/src/core/base-classes/base-component/helpers/pipe.helper.ts.hbs

@@ -28,6 +28,9 @@ export class PipeHelper {
 
     for (const pipe of pipes) {
       const [pipeName, ...argParts] = pipe.split(':');
+
+      if(!pipeName) return;
+
       const args = argParts.length ? argParts.join(':').split(',') : [];
       value = AppPipeRegistry.apply(pipeName.trim(), value, args.map(a => a.trim()));
     }

package/templates/base/src/core/base-classes/base-component/helpers/token.helper.ts.hbs

@@ -53,9 +53,9 @@ export class TokenHelper {
   }
 
   private static resolvePrefixed(token: string, el: HTMLElement): any | null {
-    for (const prefix in PREFIXED_TOKEN_RESOLVERS) {
+    for (const [prefix, resolver] of Object.entries(PREFIXED_TOKEN_RESOLVERS)) {
       if (token.startsWith(prefix)) {
-        return PREFIXED_TOKEN_RESOLVERS[prefix](token.slice(prefix.length), el);
+        return resolver(token.slice(prefix.length), el);
       }
     }
     return null;

package/templates/base/src/core/services/router/helpers/navigation-manager.helper.ts.hbs

@@ -68,11 +68,11 @@ export class NavigationManager {
 
     const params: Record<string, string> = {};
     paramNames.forEach((name, i) => {
-      if (match[i + 1]) {
-        params[name] = match[i + 1];
+      const value = match[i + 1];
+      if (value) {
+        params[name] = value;
       }
     });
-
     return params;
   }
 }

package/templates/base/src/core/services/router/helpers/route-guard-manager.helper.ts.hbs

@@ -58,12 +58,12 @@ export class RouteGuardsManager {
     const guardResult = await this.runGuards(guards, params);
 
     if (guardResult === false) {
-      console.log(`Navigation to ${targetPath} blocked by route guard`);
+      // console.log(`Navigation to ${targetPath} blocked by route guard`);
       return { allowed: false };
     }
 
     if (typeof guardResult === 'string') {
-      console.log(`Navigation to ${targetPath} redirected to ${guardResult} by route guard`);
+      // console.log(`Navigation to ${targetPath} redirected to ${guardResult} by route guard`);
       return { allowed: false, redirectTo: guardResult };
     }
 

package/templates/base/src/core/utils/anchor-manager/anchor-manager.utils.ts.hbs

@@ -3,9 +3,9 @@ import { AttributesHelper, IAttributesConfig } from "../helpers/attributes.helpe
 /**
  * ```typescript
 interface IAttributesConfig {
-  {{#if i18n}}
+{{#if i18n}}
   i18nKey?: string;
-  {{/if}}
+{{/if}}
   textContent?: string;
   className?: string;
   style?: string;
@@ -15,14 +15,15 @@ interface IAttributesConfig {
 interface IAnchorConfig extends IAttributesConfig {
 // prefix href with '#' for internal anchor
   href: string;
-// _blank, etc
   target?: string;
+  tagName?: keyof HTMLElementTagNameMap;
 }
 ```
 */
 export interface IAnchorConfig extends IAttributesConfig {
   href: string;
   target?: string;
+  tagName?: keyof HTMLElementTagNameMap;
 }
 
 export class AnchorManager {

package/templates/base/src/core/utils/button-manager/button-manager.utils.test.js.hbs

@@ -109,7 +109,7 @@ describe('ButtonManager', () => {
 
   it('should set button className correctly', () => {
     const mockComponent = {};    
-    const manager = new ButtonManager(mockComponent, [], options);
+    const manager = new ButtonManager(mockComponent, []);
     const btn = { 
       i18nKey: 'save',
       className: 'btn-primary'

package/templates/base/src/index.html.hbs

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="/main.css">
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <title>{{projectName}}</title>
   </head>
   <body>
     <main id="app"></main>

package/templates/base/src/styles/main.scss.hbs

@@ -14,4 +14,6 @@
 @use "custom-classes";
 // components styles
 @use "components";
+// views styles
+@use "views";
 {{/if}}