@nutin/cli 1.0.1 → 1.2.0

package/CHANGELOG.md

@@ -0,0 +1,58 @@
+# Changelog
+
+## V1.0.1
+
+- Fixed typo issue when using i18n feature
+
+## 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.1.0
+
+- Added index access in CatalogConfig. Use with `config.index`.
+```typescript
+interface CatalogItemBase {
+  index: number;
+}
+type CatalogItemObject<T extends object> = T & CatalogItemBase;
+interface CatalogItemPrimitive extends CatalogItemBase {
+  value: string | number | boolean | null | undefined;
+}
+
+// type safety
+type CatalogItemConfig<T = any> =
+  T extends object ? CatalogItemObject<T> : CatalogItemPrimitive;
+```
+
+**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`.                            
+
+  *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 default Dockerfile (nginx conf + gzip)
+
+  **NOTE :***Update nginx.conf as needed. Example: CSP connect-src if the app makes API calls.*

package/README.md

@@ -2,4 +2,50 @@
 
 **A lightweight, highly tweakable frontend toolkit, crafted for building lean, dynamic single-page applications without the complexity of full-scale frameworks.**                    
 Includes essential features out of the box, with zero runtime dependencies.                          
-*TypeScript/Javascript,SASS,HTML*
+*TypeScript / Javascript, SASS, HTML*
+
+## 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
+
+--template # Use external templates
+--no-stylin-nutin # Do not use built-in SCSS utility
+--testin-nutin # Use testin-nutin toolkit
+--i18n # 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
+--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
+--no-testin-nutin # (Default) Do not use testin-nutin toolkit
+
+# 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

@@ -6,20 +6,20 @@ import { displaySuccessMessage } from './src/utils.mjs';
 
 export async function createApp() {
   program
-    .version('1.0.0')
+    .version('1.1.0')
     .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('--testin-nutin', '(Default) Use testin-nutin toolkit')
+    .option('--no-testin-nutin', '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')
-    .option('--testin-nutin', 'Use testin-nutin toolkit')
-    .option('--no-testin-nutin', '(Default) Do not use testin-nutin toolkit')
     .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,7 @@ 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';
 
 const fs = fsExtra.default;
 const __filename = fileURLToPath(import.meta.url);
@@ -54,7 +54,10 @@ export class ProjectGenerator {
     await this.processFeatureTemplates(projectPath, context);
   }
 
-  buildContext(answers) {
+  buildContext(answers) {  
+    const version = '1.2.0';
+    const ciCommand = getCiCommand(answers.packageManager);
+
     return {
       projectName: answers.projectName,
       description: answers.description || `A modern web application`,
@@ -68,7 +71,9 @@ export class ProjectGenerator {
       hasFeatures: answers.template || answers.stylinNutin || answers.i18n || answers.transition || answers.testinNutin,
       
       year: new Date().getFullYear(),
-      packageManager: answers.packageManager || 'npm'
+      packageManager: answers.packageManager || 'npm',
+      ciCommand: ciCommand,
+      version: version
     };
   }
 
@@ -108,7 +113,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', '');
@@ -117,7 +122,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;
@@ -125,7 +130,7 @@ export class ProjectGenerator {
     } else {
       const outputPath = path.join(outputDir, fileName);
       await fs.copy(templatePath, outputPath);
-      print.info(`📄 Copied: ${fileName}`);
+      // print.info(`📄 Copied: ${fileName}`);
     }
   }
 

package/lib/src/package-manager.mjs

@@ -12,88 +12,92 @@ 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 } = 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",
+    "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/serve.js",
+    "serve": `${packageManager} run build && ${packageManager} run serve:only`,
+    "dev": "node tools/dev.js",
     "generate": "node tools/generator/generator.js"
-  }
+  };
 
-  let scripts = testinNutin
-    ? {
-      ...baseScripts,
+  const testinNutinScripts = {
       "test": "node test/runner.js",
-      "test--rebuild": "npm run build && npm run test",
-      "test:watch": "npm run build && node test/watch-tests.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`
     }
-    : baseScripts;
 
-  scripts = template
+  return testinNutin
     ? {
-      ...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",
-      "serve:only": "live-server dist/src --port=9090 --entry-file=index.html --open",
-      "serve": "npm run build && npm run serve:only",
-      "dev": "concurrently \"node tools/watcher.js\" \"npm run build && npm run serve:only > /dev/null 2>&1\"",
+      ...baseScripts,
+      ...testinNutinScripts
     }
-    : {
-      ...scripts,
-      "build:clear": "rm -rf dist",
-      "build": "npm run build:clear && npm run build:ts && npm run build-static",
-      "dev": "concurrently \"npm run watch\" \"npm run serve\"",
-      "watch:ts": "tsc --watch",
-      "watch:sass": "sass --watch src/styles:dist/css",
-      "watch": "concurrently \"npm:watch:*\""
-    };
+    : baseScripts;
+}
+
+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"
+  };
+
+  const scripts = getScripts(answers);
 
   const packageJson = {
     "name": projectName,
     "version": "0.1.0",
-    "main": "index.js",
     "type": "module",
     "imports": testinNutin ? {
       "#root/*.js": "./*.js"
     } : {},
     scripts,
-    devDependencies
+    devDependencies,
+    "packageManager": `${packageManager}@latest`
   };
   
   await fs.writeJSON(path.join(projectPath, 'package.json'), packageJson, { spaces: 2 });
 }
 
 export async function generateTsconfigJson(projectPath, answers) {
-  const { template } = answers;
-
   const tsconfig = {
       "compilerOptions": {
       "baseUrl": "./",
@@ -102,12 +106,13 @@ export async function generateTsconfigJson(projectPath, answers) {
       "module": "NodeNext",
       "moduleResolution": "NodeNext",
       "rootDir": ".",
-      "outDir": template ? "dist-build" : 'dist',
+      "outDir": "dist-build",
       "strict": 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 || true,
+      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
     });
   }
 
@@ -84,7 +84,7 @@ export async function promptUser(initialName, cliOptions = {}) {
       type: 'confirm',
       name: 'testinNutin',
       message: 'Use testin-nutin toolkit?',
-      default: false
+      default: true
     });
   }
 

package/lib/src/utils.mjs

@@ -5,11 +5,12 @@ 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');
 }

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@nutin/cli",
-  "version": "1.0.1",
+  "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.",
+  "preferGlobal": true,
   "main": "lib/index.mjs",
   "bin": {
     "create-nutin-app": "./bin/create-app.mjs",

package/templates/base/.dockerignore.hbs

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

package/templates/base/Dockerfile.hbs

@@ -1,13 +1,33 @@
-FROM node:22.3.0 AS builder
+ARG NODE_VERSION=22.3.0
+ARG NGINX_VERSION=1.27-alpine
+
+FROM node:${NODE_VERSION} AS builder
 WORKDIR /usr/src/app
 COPY . .
-RUN	npm ci && \
-	npm run build
+RUN {{ciCommand}} && \
+    {{packageManager}} run build:prod
+
+FROM nginx:${NGINX_VERSION}
+
+RUN rm /etc/nginx/conf.d/default.conf
+COPY --from=builder /usr/src/app/nginx.conf /etc/nginx/conf.d/default.conf
+
+RUN sed -i '/http {/a \
+    # Gzip compression\n\
+    gzip on;\n\
+    gzip_vary on;\n\
+    gzip_proxied any;\n\
+    gzip_comp_level 6;\n\
+    gzip_types text/plain text/css text/xml text/javascript application/json application/javascript application/xml+rss application/rss+xml font/truetype font/opentype application/vnd.ms-fontobject image/svg+xml;\n\
+    gzip_min_length 1000;\n\
+' /etc/nginx/nginx.conf && \
+	touch /var/run/nginx.pid
 
-FROM nginx:1.21-alpine
-RUN sed -i 's/listen  .*/listen 9090;/' /etc/nginx/conf.d/default.conf  && \
-    sed -i 's|index  index.html index.htm;|index  index.html index.htm;\n    try_files \$uri /index.html;|' /etc/nginx/conf.d/default.conf && \
-		mkdir -p /usr/share/nginx/html
 COPY --from=builder /usr/src/app/dist/src /usr/share/nginx/html
 
-CMD ["nginx", "-g", "daemon off;"]
+EXPOSE 9090
+
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+    CMD curl -f http://localhost:9090/health || exit 1
+
+CMD ["nginx", "-g", "daemon off;"]

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/nginx.conf.hbs

@@ -0,0 +1,43 @@
+server {
+    listen 9090;
+    server_name _;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Security headers
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-XSS-Protection "1; mode=block" always;
+    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+    add_header Permissions-Policy "geolocation=(), microphone=(), camera=()" always;
+    
+    # Content Security Policy - ADJUST BASED ON YOUR APP'S NEEDS
+    add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self'; connect-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self';" always;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Static assets with long cache
+    location ~* \.(js|css|png|jpg|jpeg|gif|avif|ico|svg|woff|woff2|ttf|eot)$ {
+        expires 1y;
+        add_header Cache-Control "public, immutable";
+    }
+
+    # HTML files - no cache
+    location ~* \.html$ {
+        expires -1;
+        add_header Cache-Control "no-cache, no-store, must-revalidate";
+        add_header Pragma "no-cache";
+    }
+
+    # Health check endpoint
+    location /health {
+        access_log off;
+        return 200 "healthy\n";
+        add_header Content-Type text/plain;
+    }
+
+    # Hide nginx version
+    server_tokens off;
+}

package/templates/base/src/app/views/home/home.view.ts.hbs

@@ -23,7 +23,7 @@ const template = `{{#if template}}__TEMPLATE_PLACEHOLDER__{{else}}<div
   {{else}}
     style="font-style:italic;font-size:0.75rem;"
   {{/if}}
-  >nutin v1.0.0</span>
+  >nutin v{{version}}</span>
   <img src="/assets/images/logo-trans.avif" width=250 height=250 alt="nutin's logo. A frame opened on the top left through which a plant grows.">
   <div 
   {{#if i18n}}

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

@@ -6,6 +6,7 @@ import { I18nHelper } from './helpers/i18n.helper.js';
 import { PipeHelper } from './helpers/pipe.helper.js';
 import { ChildrenHelper } from './helpers/children.helper.js';
 import { CatalogHelper, CatalogConfig } from './helpers/catalog.helper.js';
+export { CatalogItemConfig } from './helpers/catalog.helper.js';
 
 /**```typescript
  * export interface ComponentConfig {
@@ -59,7 +60,7 @@ export abstract class BaseComponent<T extends HTMLElement = HTMLElement> {
 /**
  * ```typescript
 interface CatalogConfig {
-  array: any[];
+  array: CatalogItemConfig[];
   elementName: string;
   elementTag?: keyof HTMLElementTagNameMap;
   selector: string;