@nutin/cli 1.3.0 → 1.3.1

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Changelog
 
+## V1.3.1
+
+- Minor features:
+    - New BaseComponent protected method.
+    Register events that will trigger re-render. Call this in component's constructor.
+    ```ts
+    // force = true: calls forceRender() instead of render()
+    listenToRenderEvents(events: EventKey[], force: boolean = false): void
+    ```
+    - data-optional now supports JS values
+    ```html
+    data-optional="${myValue}"
+    ```
+    - PopoverView and AnchorComponents now have accessibility features
+    - ButtonManager now handles checkboxes as well
+    - i18nService now emits `language-changed` event and exposes related methods
+
+- Fixes:
+    - CatalogConfig no longer renders multiple containers when render() or forceRender() are triggered by events
+    - Event Listeners are now destroyed properly before triggering a re-render
+    - Router now correctly redirects to 404 page when URL starts with two slashes `//`.
+    - Popover no longer flickers on close
+    - Snackbar messages are now properly sanitized
+
+- CLI
+    - Rework: App creation flow
+        - No features enabled by default
+        - Presets `--preset <minimal|standard|full|cicd>`
+            Minimal: External templates
+            Standard: Minimal + i18n & built-in SCSS utilities.
+            Full: Standard + deployment helpers & built-in testing toolkit
+            CI/CD: Minimal + deployment helpers
+        - Remaining flags: `--i18n`, `--deploy-helper`, `--testin-nutin`, `--transition`
+
 ## V1.3.0
 
 Version 1.3.0 marks a stability milestone with various improvements and refinements, making this the recommended version for new projects.

package/README.md

@@ -39,19 +39,18 @@ npx @nutin/cli
 # Package manager
 -pm --package-manager <manager> # npm (Default), yarn, pnpm, bun
 
+# Presets
+--preset <minimal|standard|full|cicd>
+	# minimal: external templates
+	# standard: minimal + i18n & built-in SCSS classes
+	# full: standard + deployment helpers & built-in testing toolkit
+	# cicd: minimal + deployment helpers
+
 # Features
---template # (Default) Use external templates
---no-template # Use inline templates
---stylin-nutin # (Default) Use built-in SCSS utility classes & mixins
---no-stylin-nutin # Do not use built-in SCSS utility
---testin-nutin # Use testin-nutin toolkit
---no-testin-nutin # (Default) Do not use testin-nutin toolkit
 --i18n # Use i18n & json-based content
---no-i18n # (Default) Do not use i18n & json-based content
 --deploy-helper # Use Docker & deployment helpers
---no-deploy-helper, # (Default) Do not use Docker & deployment helpers
+--testin-nutin # Use testin-nutin toolkit
 --transition # Use animated view transitions. Note: May interfere with CSS `position: fixed`, `z-index`...
---no-transition # (Default) Do not use animated view transitions
 ```
 
 ## [First app tutorial](https://www.nutin.org/tutorial)

package/lib/index.mjs

@@ -1,5 +1,5 @@
 import { program } from 'commander';
-import { print } from './src/print.mjs';
+import { print, chalk } from './src/print.mjs';
 import { promptUser } from './src/prompts.mjs';
 import { createProject } from './src/project-generator.mjs';
 import { displaySuccessMessage } from './src/utils.mjs';
@@ -8,34 +8,34 @@ import { packageVersion } from './src/version.mjs';
 export async function createApp() {
   program
     .version(packageVersion)
+    .configureOutput({
+      helpWidth: 100 
+    })
     .argument('[projectName]', 'Name of the project')
-    .option('-d, --defaults', 'Use default options')
     .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('--preset <preset>', 
+      `${chalk.yellow('Project preset configuration:')}
+      ${chalk.cyan('• minimal')}${chalk.boldGray('   - external templates')}
+      ${chalk.cyan('• standard')}${chalk.boldGray('  - minimal + i18n & built-in SCSS utilities')}
+      ${chalk.cyan('• full')}${chalk.boldGray('      - standard + deployment helpers & built-in testing toolkit')}
+      ${chalk.cyan('• cicd')}${chalk.boldGray('      - minimal + deployment helpers')}`
+    )
     .option('--i18n', 'Use i18n & json-based content')
-    .option('--no-i18n', '(Default) Do not use i18n & json-based content')
     .option('--deploy-helper', 'Use Docker & deployment helpers')
-    .option('--no-deploy-helper', '(Default) Do not use Docker & deployment helpers')
-    .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')
+    .option('--testin-nutin', 'Use built-in testing toolkit')
+    .option('--transition', 'Use animated view transitions\nNote: may interfere with CSS `position: fixed`, `z-index`…')
     .action(async (projectName, cliOptions) => {
       print.blue('🚀 Welcome to nutin !');
-
       try {
-        const answers = await promptUser(projectName, cliOptions);
-        await createProject(answers);
-        displaySuccessMessage(answers);
+        const preferences = await promptUser(projectName, cliOptions);
+        await createProject(preferences);
+        displaySuccessMessage(preferences);
       } catch (error) {
-        print.boldError(`❌ Error creating project: ${error.message}`);
+        print.boldError(`❌ Error creating project: ${error.stack}`);
         process.exit(1);
       }
     });
 
   program.parse();
 }
+

package/lib/src/context-builder.mjs

@@ -1,32 +1,37 @@
 import { getCiCommand } from './package-manager.mjs';
 import { packageVersion } from './version.mjs';
 
+const PRESET_MAP = {
+  default: { template: false, stylinNutin: false, i18n: false, deployHelper: false, testinNutin: false },
+  minimal: { template: true, stylinNutin: false, i18n: false, deployHelper: false, testinNutin: false },
+  standard: { template: true, stylinNutin: true,  i18n: true,  deployHelper: false, testinNutin: false },
+  full:     { template: true, stylinNutin: true,  i18n: true,  deployHelper: true,  testinNutin: true  },
+  cicd:     { template: true, stylinNutin: false, i18n: false, deployHelper: true,  testinNutin: false },
+};
+
 export const defaults = {
   projectName: 'my-nutin-app',
   packageManager: 'npm',
-  stylinNutin: true,
-  template: true,
-  i18n: false,
-  deployHelper: false,
-  testinNutin: false,
-  transition: false
+  ...PRESET_MAP['default']
 };
 
 export class ContextBuilder {
-	buildContext(answers) { 
+	buildContext(preferences) { 
     const version = packageVersion;
-    const ciCommand = getCiCommand(answers.packageManager);
+    const ciCommand = getCiCommand(preferences.packageManager);
+
+    const preset = PRESET_MAP[preferences.preset] ?? PRESET_MAP['default'];
 
     return {
-      projectName: answers.projectName,
-      packageManager: answers.packageManager,
+      projectName: preferences.projectName,
+      packageManager: preferences.packageManager,
       
-      template: answers.template ?? defaults.template,
-      stylinNutin: answers.stylinNutin ?? defaults.stylinNutin,
-      i18n: answers.i18n ?? defaults.i18n,
-      deployHelper: answers.deployHelper ?? defaults.deployHelper,
-      testinNutin: answers.testinNutin ?? defaults.testinNutin,
-      transition: answers.transition ?? defaults.transition,
+      template: preset.template,
+      stylinNutin: preset.stylinNutin,
+      i18n: preferences.i18n ?? preset.i18n,
+      deployHelper: preferences.deployHelper ?? preset.deployHelper,
+      testinNutin: preferences.testinNutin ?? preset.testinNutin,
+      transition: preferences.transition,
 
       ciCommand: ciCommand,
       version: version

package/lib/src/print.mjs

@@ -12,6 +12,7 @@ export const chalk = {
   boldYellow: (s) => `\x1b[1;33m${s}\x1b[0m`,
   boldCyan: (s) => `\x1b[1;36m${s}\x1b[0m`,
   boldPurple: (s) => `\x1b[1;35m${s}\x1b[0m`,
+  boldGray: (s) => `\x1b[1;90m${s}\x1b[0m`,
 };
 
 export const print = {

package/lib/src/project-generator.mjs

@@ -16,10 +16,10 @@ export class ProjectGenerator {
     this.builder = new ContextBuilder();
   }
 
-	async createProject(answers) {
-    const { projectName } = answers;
+	async createProject(preferences) {
+    const { projectName } = preferences;
     const projectPath = path.join(process.cwd(), projectName);
-    const context = this.builder.buildContext(answers);
+    const context = this.builder.buildContext(preferences);
 
     await this.validateProjectPath(projectPath, projectName);
     await this.setupProjectStructure(projectPath, context);
@@ -48,6 +48,6 @@ export class ProjectGenerator {
 
 export const projectGenerator = new ProjectGenerator();
 
-export async function createProject(answers) {
-  return projectGenerator.createProject(answers);
+export async function createProject(preferences) {
+  return projectGenerator.createProject(preferences);
 }

package/lib/src/prompts.mjs

@@ -5,112 +5,40 @@ export async function promptUser(initialName, cliOptions = {}) {
 
   let projectName = initialName;
   if (!projectName) {
-    const nameAnswer = await inquirer.prompt([
+    const nameInput = await inquirer.prompt([
       {
         type: 'input',
         name: 'projectName',
         message: 'Project name:',
         default: defaults.projectName,
-        validate: validateProjectName
-      }
+        validate: validateProjectName,
+      },
     ]);
-    projectName = nameAnswer.projectName;
+    projectName = nameInput.projectName;
   }
 
   let packageManager = cliOptions.packageManager;
   if (!packageManager) {
-    const pmAnswer = await inquirer.prompt([
+    const pmPreference = await inquirer.prompt([
       {
         type: 'list',
         name: 'packageManager',
         message: 'Package manager:',
         choices: ['npm', 'yarn', 'pnpm', 'bun'],
-        default: defaults.packageManager
-      }
+        default: defaults.packageManager,
+      },
     ]);
-    packageManager = pmAnswer.packageManager;
+    packageManager = pmPreference.packageManager;
   }
 
-  if (cliOptions.defaults) {
-    return {
-      projectName,
-      packageManager,
-      stylinNutin: cliOptions.stylinNutin,
-      template: cliOptions.template,
-      i18n: cliOptions.i18n,
-      deployHelper: cliOptions.deployHelper,
-      testinNutin: cliOptions.testinNutin,
-      transition: cliOptions.transitions
-    };
-  }
-
-  const questions = [];
-
-  if (cliOptions.stylinNutin === undefined) {
-    questions.push({
-      type: 'confirm',
-      name: 'stylinNutin',
-      message: 'Use built-in SCSS utility classes ?',
-      default: defaults.stylinNutin
-    });
-  }
-
-  if (cliOptions.template === undefined) {
-    questions.push({
-      type: 'confirm',
-      name: 'template',
-      message: 'Use external templates ?',
-      default: defaults.template
-    });
-  }
-
-  if (cliOptions.i18n === undefined) {
-    questions.push({
-      type: 'confirm',
-      name: 'i18n',
-      message: 'Use i18n with json-based content ?',
-      default: defaults.i18n
-    });
-  }
-
-  if (cliOptions.deployHelper === undefined) {
-    questions.push({
-      type: 'confirm',
-      name: 'deployHelper',
-      message: 'Use Docker & deployment helpers ?',
-      default: defaults.deployHelper
-    });
-  }
-
-  if (cliOptions.testinNutin === undefined) {
-    questions.push({
-      type: 'confirm',
-      name: 'testinNutin',
-      message: 'Use testin-nutin toolkit?',
-      default: defaults.testinNutin
-    });
-  }
-
-  if (cliOptions.transition === undefined) {
-    questions.push({
-      type: 'confirm',
-      name: 'transition',
-      message: 'Use animated view transitions?',
-      default: defaults.transition
-    });
-  }
-
-  const answers = questions.length > 0 ? await inquirer.prompt(questions) : {};
-
   return {
     projectName,
     packageManager,
-    template: cliOptions.template ?? answers.template,
-    stylinNutin: cliOptions.stylinNutin ?? answers.stylinNutin,
-    i18n: cliOptions.i18n ?? answers.i18n,
-    deployHelper: cliOptions.deployHelper ?? answers.deployHelper,
-    transition: cliOptions.transition ?? answers.transition,
-    testinNutin: cliOptions.testinNutin ?? answers.testinNutin
+    preset: cliOptions.preset,
+    i18n: cliOptions.i18n,
+    deployHelper: cliOptions.deployHelper,
+    testinNutin: cliOptions.testinNutin,
+    transition:   cliOptions.transition,
   };
 }
 

package/lib/src/version.mjs

@@ -1 +1 @@
-export const packageVersion = '1.3.0';
+export const packageVersion = '1.3.1';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutin/cli",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Build SPAs by understanding SPAs. A minimal frontend toolkit crafted for learning and lean applications.",
   "preferGlobal": true,
   "main": "lib/index.mjs",

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

@@ -3,6 +3,7 @@ export default {
     bundle: true,
     minify: true,
     sourcemap: false,
+    drop: ['console', 'debugger'],
     platform: 'browser',
     format: 'esm',
     target: ['es2015'],

package/templates/base/src/app/globals.d.ts.hbs

@@ -1,12 +1,16 @@
 declare type CoreEventMap = {
-  'navigate': string;
-  'reload': string;
-  'view-mount': string;
-  'view-render': string;
-  'view-unmount': string;
-  'track-pageview': { page: string };
-
-  // Add other events and their payload types here
+    'navigate': string;
+    'reload': string;
+    'view-mount': string;
+    'view-render': string;
+    'view-unmount': string;
+    'track-pageview': { page: string };
+    'popover-opened': string;
+    'popover-close': string;
+    {{#if i18n}}
+    'language-changed': string;
+    {{/if}}
+    // Add other events and their payload types here
 };
 
 declare type StoreEventMap = {[ K in `store:${string}` ]: any; };

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

@@ -6,19 +6,20 @@ 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';
-import { TrustLevel } from './helpers/security.helper.js';
-export { CatalogItemConfig } from './helpers/catalog.helper.js';
+import { Component, ComponentOptions, AppEventBus } from '../../index.js';
+import { SecurityHelper, TrustLevel } from './helpers/security.helper.js';
+export { CatalogItemConfig, CatalogConfig, CatalogItemPrimitive } from './helpers/catalog.helper.js';
 
 /**```typescript
  * export interface ComponentConfig {
  *   selector: string;
- *   factory: (element: HTMLElement) => BaseComponent;
+ *   factory: (element: HTMLElement) => Component;
  * }
  * ```
  */ 
 export interface ComponentConfig {
   selector: string;
-  factory: (element: HTMLElement) => BaseComponent;
+  factory: (element: HTMLElement) => Component;
 }
 
 export interface BaseComponentOptions {
@@ -31,7 +32,8 @@ export interface BaseComponentOptions {
 export abstract class BaseComponent<T extends HTMLElement = HTMLElement> {
   private _children: BaseComponent[] = [];
   protected element: T;
-  protected eventListeners: Array<[string, EventListener]> = [];
+  protected eventListeners: Array<[EventTarget, string, EventListener]> = [];
+  private _options: ComponentOptions;
 
   constructor({
     template = '',
@@ -40,6 +42,7 @@ export abstract class BaseComponent<T extends HTMLElement = HTMLElement> {
     trustLevel
   }: BaseComponentOptions) {
     this.element = DomHelper.createElement<T>(tagName, template, trustLevel);
+    this._options = { template, mountTarget, tagName, trustLevel };
     this.parseDataAttributes();
     this.autoBindEvents();
     DomHelper.mountElement(this.element, mountTarget);
@@ -50,19 +53,20 @@ export abstract class BaseComponent<T extends HTMLElement = HTMLElement> {
   }
 
   public destroy(): void {
-    EventHelper.destroyEvents(this.element, this.eventListeners);
+    EventHelper.destroyEvents(this.eventListeners);
     ChildrenHelper.destroyChildren(this._children);
     this.element.remove();
   }
 
   public render(): HTMLElement {
     this.addChildren();
+    DomHelper.cleanupOptionalContent();
     return this.element;
   }
 
 /**
  * ```typescript
-interface CatalogConfig {
+interface CatalogConfig extends ComponentOptions {
   array: CatalogItemConfig[];
   elementName: string;
   elementTag?: keyof HTMLElementTagNameMap;
@@ -72,7 +76,7 @@ interface CatalogConfig {
   ```
 */
   protected catalogConfig(config: CatalogConfig): ComponentConfig[] {
-    return CatalogHelper.generateCatalog(config);
+    return CatalogHelper.generateCatalog(config, this.element);
   }
 
   protected parseDataAttributes(): void {
@@ -83,10 +87,23 @@ interface CatalogConfig {
   }
 
   protected autoBindEvents(): void {
+    EventHelper.destroyEvents(this.eventListeners);
+    this.eventListeners.length = 0;
     EventHelper.bindEvents(this, this.element, this.eventListeners);
   }
 
   protected addChildren(): void {
     ChildrenHelper.addChildren(this, this.element, this._children);
   }
+  
+  protected forceRender(): void {
+    this.element.innerHTML = SecurityHelper.sanitizeTemplate(this._options.template, this._options.trustLevel);
+    this.render();
+  }
+
+  protected listenToRenderEvents(events: EventKey[], force: boolean = false): void {
+    events.forEach((event: EventKey) => {
+      AppEventBus.subscribe(event, () => force ? this.forceRender() : this.render());
+    })
+  }
 }

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

@@ -1,11 +1,11 @@
-import { BaseComponent, ComponentConfig } from "../base-component.js";
+import { Component, ComponentConfig, ComponentOptions } from "../../index.js";
 
-export interface CatalogConfig {
+export interface CatalogConfig extends ComponentOptions {
   array: CatalogItemConfig[];
   elementName: string;
   elementTag?: keyof HTMLElementTagNameMap;
   selector: string;
-  component: new (el: HTMLElement, data: any) => BaseComponent;
+  component: new (el: HTMLElement, data: any, props?: any) => Component;
 };
 
 export interface CatalogItemBase {
@@ -23,12 +23,12 @@ export type CatalogItemConfig<T = any> =
 
 /**
  * ```typescript
-interface CatalogConfig {
+interface CatalogConfig extends ComponentOptions {
   array: CatalogItemConfig[];
   elementName: string;
   elementTag?: keyof HTMLElementTagNameMap;
   selector: string;
-  component: new (el: HTMLElement, data: any) => BaseComponent;
+  component: new (el: HTMLElement, data: any) => Component;
 };
 
 type CatalogItemConfig<T = any> =
@@ -36,42 +36,56 @@ type CatalogItemConfig<T = any> =
   ```
 */
 export class CatalogHelper {
-  public static generateCatalog(config: CatalogConfig): ComponentConfig[] {
+  public static generateCatalog(config: CatalogConfig, scope: Element = document.documentElement): ComponentConfig[] {
     if (!config.array || config.array.length < 1) return [];
 
-    const container = document.querySelector(`[data-catalog="${config.selector}"]`);
+    const componentConfigs: ComponentConfig[] = [];
+    const containers = scope.querySelectorAll(`[data-catalog="${config.selector}"]`);
 
-    if (!container || !(container instanceof HTMLElement)) return [];
+    containers.forEach((container) => {
+      if (!container || !(container instanceof HTMLElement) || (container.firstElementChild)) return;
+      componentConfigs.push(...this.getComponentConfigArray(config, container))
+    })
 
-    const componentConfigs: ComponentConfig[] = [];
+    return componentConfigs;
+  }
 
-    for (let i = 0; i < config.array.length; i++) { 
+  private static getComponentConfigArray(config: CatalogConfig, container: HTMLElement): ComponentConfig[] {
+    const componentConfigs: ComponentConfig[] = [];
+    for (let i = 0; i < config.array.length; i++) {
       this.createElements(i, config, container);
       this.pushConfig(i, componentConfigs, config);
     }
-
     return componentConfigs;
   }
 
   private static createElements(index: number, config: CatalogConfig, container: HTMLElement): void {
-    const el = document.createElement(config.elementTag || 'div');
+    const wrapper = document.createElement(config.elementTag || 'div');
+    const el = document.createElement('div');
+    wrapper.appendChild(el);
     el.setAttribute('data-component', `${config.elementName}-${index}`);
-    el.dataset.index = String(index);
-    container?.appendChild(el);
+    wrapper.dataset.index = String(index);
+    container?.appendChild(wrapper);
   }
 
   private static pushConfig(index: number, componentConfigs: ComponentConfig[], config: CatalogConfig): void {
-    const item = config.array[index];
+    const configWithIndex = this.getConfigWithIndex(config, index)
+
+    const { props, defaults, normalizeKeys } = config;
+    const options = { ...props, ...defaults, ...normalizeKeys };
 
-    const configWithIndex: CatalogItemConfig = (item && typeof item === 'object')
-      ? { ...(item as object), index: index }
-      : { value: item, index: index };
-    
     componentConfigs.push(
       { 
         selector: `${config.elementName}-${index}`,
-        factory: (el) => new config.component(el, configWithIndex)
+        factory: (el) => new config.component(el, configWithIndex, options),
       },
     )
   }
+
+  private static getConfigWithIndex(config: CatalogConfig, index: number): CatalogItemConfig {
+    const item = config.array[index];
+    return (item && typeof item === 'object')
+      ? { ...(item as object), index: index }
+      : { value: item, index: index };    
+  }
 }

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

@@ -24,6 +24,40 @@ export class DomHelper {
     element.innerHTML = SecurityHelper.sanitizeTemplate(template, trustLevel);
     return element;
   }
+  
+  public static cleanupOptionalContent(): void {
+    const isEmpty = (el: HTMLElement): boolean => {
+      if (el instanceof HTMLImageElement) {
+        return !el.src || el.src.trim() === "";
+      }
+
+      if (el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement) {
+        return !el.value?.trim();
+      }
+
+      if (el instanceof HTMLMediaElement || el instanceof HTMLSourceElement) {
+        return !el.getAttribute("src");
+      }
+
+      const content = el.textContent?.trim();
+      return !content || content === "undefined";
+    };
+
+    const isValueUndefined = (el: HTMLElement): boolean => {
+      const value = el.getAttribute("data-optional");
+      if (!value) return false;
+      return (
+        value.trim() === '' ||
+        value === "undefined" ||
+        value === "null"
+      );
+    }
+
+    document.querySelectorAll<HTMLElement>("[data-optional]").forEach(el => {
+      if (isValueUndefined(el) || isEmpty(el)) el.remove();
+      el.removeAttribute("data-optional");
+    });
+  }
 
   private static appendOrReplace(config: DomElementConfig) {
     if (config.target instanceof HTMLElement) {