@nutin/cli 1.2.3 → 1.3.1

package/lib/src/prompts.mjs

@@ -1,103 +1,44 @@
 import inquirer from 'inquirer';
+import { defaults } from './context-builder.mjs';
 
 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: 'my-nutin-app',
-        validate: validateProjectName
-      }
+        default: defaults.projectName,
+        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: 'npm'
-      }
+        default: defaults.packageManager,
+      },
     ]);
-    packageManager = pmAnswer.packageManager;
-  }
-
-  if (cliOptions.defaults) {
-    return {
-      projectName,
-      packageManager,
-      stylinNutin: cliOptions.stylinNutin || true,
-      template: cliOptions.template || true,
-      i18n: cliOptions.i18n || true,
-      testinNutin: cliOptions.testinNutin || false,
-      transition: cliOptions.transitions || false
-    };
-  }
-
-  const questions = [];
-
-  if (cliOptions.stylinNutin === undefined) {
-    questions.push({
-      type: 'confirm',
-      name: 'stylinNutin',
-      message: 'Use built-in SCSS utility classes ?',
-      default: true
-    });
-  }
-
-  if (cliOptions.template === undefined) {
-    questions.push({
-      type: 'confirm',
-      name: 'template',
-      message: 'Use external templates ?',
-      default: true
-    });
+    packageManager = pmPreference.packageManager;
   }
 
-  if (cliOptions.i18n === undefined) {
-    questions.push({
-      type: 'confirm',
-      name: 'i18n',
-      message: 'Use i18n with json-based content ?',
-      default: true
-    });
-  }
-
-  if (cliOptions.transition === undefined) {
-    questions.push({
-      type: 'confirm',
-      name: 'transition',
-      message: 'Use animated view transitions?',
-      default: false
-    });
-  }
-
-  if (cliOptions.testinNutin === undefined) {
-    questions.push({
-      type: 'confirm',
-      name: 'testinNutin',
-      message: 'Use testin-nutin toolkit?',
-      default: true
-    });
-  }
-
-  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,
-    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/template-compiler.mjs

@@ -36,7 +36,7 @@ export class TemplateCompiler {
 
     Handlebars.registerHelper('hasAnyFeature', function(options) {
       const context = options.data.root;
-      return context.i18n || context.template || context.testing
+      return context.i18n || context.template || context.testinNutin || context.stylinNutin
     });
   }
 

package/lib/src/utils.mjs

@@ -5,14 +5,14 @@ import { print } from './print.mjs';
 export const promiseExec = promisify(exec);
 
 export function displaySuccessMessage(answers) {
-  const { projectName } = answers;
-  
+  const { projectName, packageManager, deployHelper } = 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');
-}
+  print.boldInfo(`Documentation on https://www.nutin.org`);
+
+  if (packageManager === 'pnpm' || packageManager === 'bun') {
+    if (deployHelper) print.boldError(`You'll need to modify the Dockerfile to support ${packageManager}`)
+  }
 
-export const packageVersion = '1.2.1';
+  print.info('Next steps:');
+  print.info(`  cd ${projectName} && ${packageManager} run serve\n`);
+}

package/lib/src/version.mjs

@@ -0,0 +1 @@
+export const packageVersion = '1.3.1';

package/package.json

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

@@ -6,6 +6,7 @@ pnpm-debug.log*
 .yarn-integrity
 
 /dist/
+/dist-build/
 
 .DS_Store
 .DS_Store?

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'],
@@ -24,5 +25,12 @@ export default {
 {{/if}}
     ], // in styles/
   },
+{{#if deployHelper}}
+  compression: {
+    gzip: true,
+    // BROTLI OPTIONAL
+    // brotli: false,
+  },
+{{/if}}
 	verbose: false,
 }

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/app/main.ts.hbs

@@ -22,6 +22,7 @@ class App {
   }
 
   private renderBaseLayout() {
+    // e
     // document.body.prepend(this.header.render());
     // document.body.append(this.footer.render());
   }
@@ -36,5 +37,5 @@ document.addEventListener('DOMContentLoaded', async () => {
 });
 
 window.addEventListener('beforeunload', async () => {
-  Service.destroyAll();
+  await Service.destroyAll();
 });

package/templates/base/src/app/views/home/home.view.test.js.hbs

@@ -0,0 +1,26 @@
+import { HomeView } from '#root/dist/src/app/views/index.js';
+
+let view;
+
+describe('HomeView', () => {
+	beforeAll(() => {
+		view = new HomeView();
+	});
+
+	it('should be defined', () => {
+		expect(view).toBeDefined();
+	});
+	{{#if i18n}}
+	it('should have title with i18n key', () => {
+		const h1 = view.element.querySelector('h1');
+		expect(h1).toBeDefined();
+		expect(h1.textContent).toBe('home.title');		
+	});
+	{{else}}
+	it('should have title', () => {
+		const h1 = view.element.querySelector('h1');
+		expect(h1).toBeDefined();
+		expect(h1.textContent).toBe('{{projectName}}');		
+	});
+	{{/if}}
+})

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

@@ -4,7 +4,7 @@ const template = `{{#if template}}__TEMPLATE_PLACEHOLDER__{{else}}<div
 {{#if stylinNutin}}
   class="u-flex-center u-flex-column u-padd-y-large"
 {{else}}
-  style="display:flex;justify-content:center;align-items:center;flex-direction:column"
+  style="display:flex;justify-content:center;align-items:center;flex-direction:column;padding-top:1rem;padding-bottom: 1rem;"
 {{/if}}>
   <h1 
   {{#if i18n}}
@@ -33,7 +33,7 @@ const template = `{{#if template}}__TEMPLATE_PLACEHOLDER__{{else}}<div
     class="u-font-large u-padd-y-medium" 
     style="margin-top:-2rem;"
   {{else}}
-    style="font-size:1.5rem;paddin-top:1rem;padding-bottom:1rem;margin-top:2rem;"
+    style="font-size:1.5rem;paddin-top:1rem;padding-bottom:1rem;margin-top:-2rem;"
   {{/if}}
   >{{#unless i18n}}You're all set !{{/unless}}</div>
   <div 

package/templates/base/src/app/views/not-found/not-found.view.ts.hbs

@@ -35,7 +35,7 @@ export class NotFoundView extends View {
     return [
       { 
         selector: 'home',
-        factory: (el) => new ButtonComponent(el, { {{#if i18n}}i18nKey: 'not-found.redirect'{{else}}textContent: 'Back to home'{{/if}}, callback: () => this.handleHome(), {{#if stylinNutin}}className: btnClass{{else}}styles: btnStyles{{/if}} })
+        factory: (el) => new ButtonComponent(el, { {{#if i18n}}i18nKey: 'not-found.redirect'{{else}}textContent: 'Back to home'{{/if}}, callback: () => this.handleHome(), {{#if stylinNutin}}className: btnClass{{else}}style: btnStyles{{/if}} })
       },
     ]
   }

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

@@ -6,60 +6,67 @@ 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';
+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 {
   template?: string;
   mountTarget?: string | HTMLElement;
   tagName?: keyof HTMLElementTagNameMap;
+  trustLevel?: TrustLevel;
 }
 
 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 = '',
     mountTarget = '#app',
-    tagName = 'div'
+    tagName = 'div',
+    trustLevel
   }: BaseComponentOptions) {
-    this.element = DomHelper.createElement<T>(tagName, template);
+    this.element = DomHelper.createElement<T>(tagName, template, trustLevel);
+    this._options = { template, mountTarget, tagName, trustLevel };
     this.parseDataAttributes();
     this.autoBindEvents();
     DomHelper.mountElement(this.element, mountTarget);
   }
 
-  protected parseDataAttributes(): void {
-    {{#if i18n}}
-    I18nHelper.parseI18nAttributes(this.element);
-    {{/if}}
-    PipeHelper.parsePipeAttributes(this.element);
+  public childConfigs(): ComponentConfig[] {
+    return [];
   }
 
-  protected autoBindEvents(): void {
-    EventHelper.bindEvents(this, this.element, this.eventListeners);
+  public destroy(): void {
+    EventHelper.destroyEvents(this.eventListeners);
+    ChildrenHelper.destroyChildren(this._children);
+    this.element.remove();
   }
 
-  protected addChildren(): void {
-    ChildrenHelper.addChildren(this, this.element, this._children);
+  public render(): HTMLElement {
+    this.addChildren();
+    DomHelper.cleanupOptionalContent();
+    return this.element;
   }
 
 /**
  * ```typescript
-interface CatalogConfig {
+interface CatalogConfig extends ComponentOptions {
   array: CatalogItemConfig[];
   elementName: string;
   elementTag?: keyof HTMLElementTagNameMap;
@@ -69,21 +76,34 @@ interface CatalogConfig {
   ```
 */
   protected catalogConfig(config: CatalogConfig): ComponentConfig[] {
-    return CatalogHelper.generateCatalog(config);
+    return CatalogHelper.generateCatalog(config, this.element);
   }
 
-  public childConfigs(): ComponentConfig[] {
-    return [];
+  protected parseDataAttributes(): void {
+    {{#if i18n}}
+    I18nHelper.parseI18nAttributes(this.element);
+    {{/if}}
+    PipeHelper.parsePipeAttributes(this.element);
   }
 
-  public destroy(): void {
-    EventHelper.destroyEvents(this.element, this.eventListeners);
-    ChildrenHelper.destroyChildren(this._children);
-    this.element.remove();
+  protected autoBindEvents(): void {
+    EventHelper.destroyEvents(this.eventListeners);
+    this.eventListeners.length = 0;
+    EventHelper.bindEvents(this, this.element, this.eventListeners);
   }
 
-  public render(): HTMLElement {
-    this.addChildren();
-    return this.element;
+  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) {
-    const el = document.createElement(config.elementTag || 'div');
+  private static createElements(index: number, config: CatalogConfig, container: HTMLElement): void {
+    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) {
-    const item = config.array[index];
+  private static pushConfig(index: number, componentConfigs: ComponentConfig[], config: CatalogConfig): void {
+    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/children.helper.ts.hbs

@@ -18,11 +18,11 @@ export class ChildrenHelper {
     });
   }
 
-  private static registerChild(child: BaseComponent, children: BaseComponent[]): void {
-    children.push(child);
-  }
-
   public static destroyChildren(children: BaseComponent[]): void {
     children.forEach(child => child.destroy());
   }
+
+  private static registerChild(child: BaseComponent, children: BaseComponent[]): void {
+    children.push(child);
+  }
 }

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

@@ -1,28 +1,75 @@
+import { SecurityHelper, TrustLevel } from "./security.helper.js";
+
+interface DomElementConfig {
+  target: Element | null;
+  mountTarget: string | HTMLElement; 
+  element: HTMLElement
+}
+
 export class DomHelper {
   public static mountElement(element: HTMLElement, mountTarget: string | HTMLElement): void {
     const target = typeof mountTarget === 'string' 
       ? document.querySelector(mountTarget) 
       : mountTarget;
 
-    if (target instanceof HTMLElement) {
-      if (typeof mountTarget === 'string') {
-        // Append mode
-        target.appendChild(element);
-      } else {
-        // Replace placeholder mode
-        target.replaceWith(element);
-      }
-    } else {
-      console.warn('Invalid mount target for component:', mountTarget);
-    }
+    this.appendOrReplace({ target, element, mountTarget });
   }
 
   public static createElement<T extends HTMLElement>(
     tagName: keyof HTMLElementTagNameMap, 
-    template: string = ''
+    template: string = '',
+    trustLevel?: TrustLevel
   ): T {
     const element = document.createElement(tagName) as T;
-    element.innerHTML = template;
+    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) {
+      if (typeof config.mountTarget === 'string') {
+        // Append mode
+        config.target.appendChild(config.element);
+      } else {
+        // Replace placeholder mode
+        config.target.replaceWith(config.element);
+      }
+    } else {
+      console.warn('Mount target not found:', config.mountTarget);
+    }
+  }
 }