@nutin/cli 1.1.0 → 1.2.1

package/CHANGELOG.md

@@ -1,19 +1,74 @@
 # 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
 
 - Added index access in CatalogConfig. Use with `config.index`.
 ```typescript
 interface CatalogItemBase {
-  idx: number;
+  index: number;
 }
 type CatalogItemObject<T extends object> = T & CatalogItemBase;
 interface CatalogItemPrimitive extends CatalogItemBase {
@@ -25,4 +80,12 @@ type CatalogItemConfig<T = any> =
   T extends object ? CatalogItemObject<T> : CatalogItemPrimitive;
 ```
 
-**Notes:** *Primitive data arrays (string, number, etc) needs to be accessed with `config.value`.*
+**Notes:** *Primitive data arrays (string, number, etc) needs to be accessed with `config.value`.*
+
+## V1.0.2
+
+- Partially fixed `npm run dev` script when using internal templates. *Page still needs to be reload manually from time to time.*
+
+## V1.0.1
+
+- Fixed typo issue when using i18n feature

package/README.md

@@ -1,5 +1,52 @@
 # [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*
+*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
+# install package globally
+npm install -g @nutin/cli
+```
+
+## New App
+
+```bash
+# create a new app
+create-nutin-app # or
+nutin-new
+```
+
+- Flags
+
+```bash
+# argument: project-name
+
+-d --defaults
+-pm --package-manager <manager> # npm (Default), yarn, pnpm, bun
+
+--no-template # Use inline templates
+--no-stylin-nutin # Do not use built-in SCSS utility
+--testin-nutin # Use testin-nutin toolkit
+--no-i18n # Do not use i18n & json-based content
+--transition # Use animated view transitions. Note: May interfere with CSS `position: fixed`, `z-index`...
+
+# Defaults
+--template # (Default) Use external templates
+--stylin-nutin # (Default) Use built-in SCSS utility classes & mixins
+--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
+```
+
+## [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,24 +2,24 @@ 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.0.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)')
-    .option('--template', 'Use external templates')
-    .option('--no-template', '(Default) Do not use external templates')
+    .option('-pm, --package-manager <manager>', 'Specify package manager (npm, yarn, pnpm, bun)')
+    .option('--template', '(Default) Use external templates')
+    .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('--transition', 'Use animated view transitions\nNote: May interfere with CSS `position: fixed`, `z-index`...')
-    .option('--no-transition', '(Default) Do not use animated view transitions')
+    .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')
     .action(async (projectName, cliOptions) => {
       print.blue('🚀 Welcome to nutin !');

package/lib/src/file-generator.mjs

@@ -4,7 +4,8 @@ import * as fsExtra from 'fs-extra';
 import { TemplateCompiler } from './template-compiler.mjs';
 import { print } from './print.mjs';
 import { initializeGit } from './git-manager.mjs';
-import { installDependencies, generatePackageJson, generateTsconfigJson } from './package-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,15 @@ 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.1.0';
+    const version = packageVersion;
+    const ciCommand = getCiCommand(answers.packageManager);
 
     return {
       projectName: answers.projectName,
@@ -71,6 +73,7 @@ export class ProjectGenerator {
       
       year: new Date().getFullYear(),
       packageManager: answers.packageManager || 'npm',
+      ciCommand: ciCommand,
       version: version
     };
   }
@@ -111,7 +114,7 @@ export class ProjectGenerator {
     if (BINARY_EXTENSIONS.has(fileExt)) {
       const outputPath = path.join(outputDir, fileName);
       await fs.copy(templatePath, outputPath);
-      print.info(`📄 Copied: ${fileName}`);
+      // print.info(`📄 Copied: ${fileName}`);
     } else if (fileName.endsWith('.hbs')) {
 
       const outputFileName = fileName.replace('.hbs', '');
@@ -120,7 +123,7 @@ export class ProjectGenerator {
       try {
         const compiledContent = await this.compiler.compileFile(templatePath, context);
         await fs.writeFile(outputPath, compiledContent);
-        print.info(`📝 Generated: ${outputFileName}`);
+        // print.info(`📝 Generated: ${outputFileName}`);
       } catch (error) {
         print.boldError(`❌ Failed to process template: ${fileName}`);
         throw error;
@@ -128,7 +131,7 @@ export class ProjectGenerator {
     } else {
       const outputPath = path.join(outputDir, fileName);
       await fs.copy(templatePath, outputPath);
-      print.info(`📄 Copied: ${fileName}`);
+      // print.info(`📄 Copied: ${fileName}`);
     }
   }
 
@@ -146,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);
         }
       }
@@ -156,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) {
@@ -168,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

@@ -12,84 +12,102 @@ export async function installDependencies(projectPath, packageManager) {
   await promiseExec(installCommand, { cwd: projectPath });
 }
 
-export function getInstallCommand(packageManager) {
+export function getCiCommand(packageManager) {
+  switch (packageManager) {
+    case 'yarn':
+      return 'yarn install --frozen-lockfile';
+    case 'pnpm':
+      return 'pnpm install --frozen-lockfile';
+    case 'bun':
+      return 'bun install --frozen-lockfile'
+    default:
+      return 'npm ci';
+  }
+}
+
+function getInstallCommand(packageManager) {
   switch (packageManager) {
     case 'yarn':
       return 'yarn install';
     case 'pnpm':
       return 'pnpm install';
+    case 'bun':
+      return 'bun install'
     default:
       return 'npm install';
   }
 }
 
-export async function generatePackageJson(projectPath, answers) {
-  const { testinNutin, projectName, template } = answers;
-
-  const baseDevDeps = {
-    "concurrently": "^9.1.2",
-    "live-server": "^1.2.2",
-    "sass": "^1.89.0",
-    "typescript": "^5.8.3"
-  }; 
-
-  const devDependencies = testinNutin 
-    ? { ...baseDevDeps, "jsdom": "^26.1.0" } 
-    : baseDevDeps;
+function getScripts(answers) {
+  const { testinNutin, packageManager, projectName } = answers;
 
   const baseScripts = {
-    "patch": "npm version patch -m 'CI/CD: Bump version to %s'",
-    "minor": "npm version minor -m 'CI/CD: Bump version to %s'",
-    "major": "npm version major -m 'CI/CD: Bump version to %s'",
-    "build:ts": "tsc --project tsconfig.json",
-    "build-static": "node tools/builder/builder.js",
-    "serve": "npm run build && live-server dist/src --port=9090 --entry-file=index.html",
-    "generate": "node tools/generator/generator.js"
-  }
+    "patch": `${packageManager} version patch -m 'CI/CD: Bump version to %s'`,
+    "minor": `${packageManager} version minor -m 'CI/CD: Bump version to %s'`,
+    "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/dev/serve.js",
+    "serve": `${packageManager} run build && ${packageManager} run serve:only`,
+    "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 testin-nutin/runner.js",
+    "test:rebuild": `${packageManager} run build && ${packageManager} run test`,
+    "test:watch": `${packageManager} run build && node testin-nutin/watch-tests.js`
+    }
 
-  let scripts = testinNutin
+  return testinNutin
     ? {
       ...baseScripts,
-      "test": "node test/runner.js",
-      "test--rebuild": "npm run build && npm run test",
-      "test:watch": "npm run build && node test/watch-tests.js",
-      "serve": "npm run build && npm run serve:only",
-      "serve:only": "live-server dist/src --port=9090 --entry-file=index.html --open",
-      "dev": "concurrently \"node tools/watcher.js\" \"npm run build && npm run serve:only > /dev/null 2>&1\""
+      ...testinNutinScripts
     }
     : baseScripts;
+}
 
-  scripts = template
-    ? {
-      ...scripts,
-      "build:clear": "rm -rf dist/src/* dist-build",
-      "build:finalize": "mkdir -p dist && mv dist-build/src dist/ && rm -rf dist-build",
-      "build": "npm run build:clear && npm run build:ts && npm run build-static && npm run build:finalize"
-    }
-    : {
-      ...scripts,
-      "build:clear": "rm -rf dist",
-      "build": "npm run build:clear && npm run build:ts && npm run build-static"
-    };
+export async function generatePackageJson(projectPath, answers) {
+  const { testinNutin, projectName, packageManager } = answers;
+
+  const devDependencies = {
+    "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);
 
   const packageJson = {
     "name": projectName,
     "version": "0.1.0",
-    "main": "index.js",
     "type": "module",
-    "imports": testinNutin ? {
-      "#root/*.js": "./*.js"
-    } : {},
+    ...(testinNutin && {
+      "imports": {
+        "#root/*.js": "./*.js"
+      }
+    }),
     scripts,
-    devDependencies
+    devDependencies,
+    ...(testinNutin && {
+      "engines": {
+        "node": ">=20.19.0"
+      }
+    })
   };
   
   await fs.writeJSON(path.join(projectPath, 'package.json'), packageJson, { spaces: 2 });
 }
 
 export async function generateTsconfigJson(projectPath, answers) {
-  const { template } = answers;
-
   const tsconfig = {
       "compilerOptions": {
       "baseUrl": "./",
@@ -97,13 +115,16 @@ export async function generateTsconfigJson(projectPath, answers) {
       "target": "ESNext",
       "module": "NodeNext",
       "moduleResolution": "NodeNext",
-      "rootDir": ".",
-      "outDir": template ? "dist-build" : 'dist',
+      "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

@@ -22,7 +22,7 @@ export async function promptUser(initialName, cliOptions = {}) {
         type: 'list',
         name: 'packageManager',
         message: 'Package manager:',
-        choices: ['npm', 'yarn', 'pnpm'],
+        choices: ['npm', 'yarn', 'pnpm', 'bun'],
         default: 'npm'
       }
     ]);
@@ -34,10 +34,10 @@ export async function promptUser(initialName, cliOptions = {}) {
       projectName,
       packageManager,
       stylinNutin: cliOptions.stylinNutin || true,
-      template: cliOptions.template || false,
-      i18n: cliOptions.i18n || false,
-      transition: cliOptions.transitions || false,
-      testinNutin: cliOptions.testinNutin || false
+      template: cliOptions.template || true,
+      i18n: cliOptions.i18n || true,
+      testinNutin: cliOptions.testinNutin || false,
+      transition: cliOptions.transitions || false
     };
   }
 
@@ -47,7 +47,7 @@ export async function promptUser(initialName, cliOptions = {}) {
     questions.push({
       type: 'confirm',
       name: 'stylinNutin',
-      message: 'Use built-in SCSS utility classes?',
+      message: 'Use built-in SCSS utility classes ?',
       default: true
     });
   }
@@ -56,8 +56,8 @@ export async function promptUser(initialName, cliOptions = {}) {
     questions.push({
       type: 'confirm',
       name: 'template',
-      message: 'Use external templates?',
-      default: false
+      message: 'Use external templates ?',
+      default: true
     });
   }
 
@@ -65,8 +65,8 @@ export async function promptUser(initialName, cliOptions = {}) {
     questions.push({
       type: 'confirm',
       name: 'i18n',
-      message: 'Use i18n & json-based content?',
-      default: false
+      message: 'Use i18n with json-based content ?',
+      default: true
     });
   }
 

package/lib/src/utils.mjs

@@ -5,11 +5,14 @@ import { print } from './print.mjs';
 export const promiseExec = promisify(exec);
 
 export function displaySuccessMessage(answers) {
-  const { projectName, installDeps, packageManager } = answers;
+  const { projectName } = answers;
   
   print.boldSuccess('\n🎉 Your project is ready!');
   print.info('\nNext steps:');
   print.info(`  cd ${projectName} && npm run serve`);
+  print.boldInfo(`\nDocumentation on https://www.nutin.org`);
   
   print.success('\nHappy coding! 🚀\n');
 }
+
+export const packageVersion = '1.2.1';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nutin/cli",
-  "version": "1.1.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

@@ -1,5 +1,6 @@
 node_modules
 dist
+dist-build
 .github
 .gitignore
 .git
@@ -7,6 +8,15 @@ dist
 *.md
 .env
 *.txt
-{{#if i18n}}
-*.test
+{{#if testinNutin}}
+*.test.js
+testin-nutin
 {{/if}}
+*.log
+
+npm-debug.log
+.nyc_output
+coverage
+.DS_Store
+.cache
+.parcel-cache

package/templates/base/README.md.hbs

@@ -1 +1,24 @@
 # {{projectName}} - Built with nutin
+
+## Start
+
+- `{{packageManager}} run serve` (rebuild), `{{packageManager}} run serve:only` (no rebuild), `{{packageManager}} run dev` (watch).
+
+## Build
+
+- `{{packageManager}} run build` (dev) or `{{packageManager}} run build:prod` (production)
+
+	Accepts `--bundle` (= build:prod) and `--log` (verbose output) flags
+
+## Generate Component, View, Service
+
+- `{{packageManager}} run generate ELEMENT ELEMENT_NAME`
+
+	Supports nested paths.
+
+{{#if testinNutin}}
+## Test
+
+- `{{packageManager}} run test:rebuild`, `{{packageManager}} run test`, `{{packageManager}} run test:watch`.
+
+{{/if}}

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,
+}