@nutin/cli 1.2.3 → 1.3.0

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.0';

package/package.json

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

@@ -24,5 +24,12 @@ export default {
 {{/if}}
     ], // in styles/
   },
+{{#if deployHelper}}
+  compression: {
+    gzip: true,
+    // BROTLI OPTIONAL
+    // brotli: false,
+  },
+{{/if}}
 	verbose: false,
 }

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,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';
+import { TrustLevel } from './helpers/security.helper.js';
 export { CatalogItemConfig } from './helpers/catalog.helper.js';
 
 /**```typescript
@@ -24,6 +25,7 @@ export interface BaseComponentOptions {
   template?: string;
   mountTarget?: string | HTMLElement;
   tagName?: keyof HTMLElementTagNameMap;
+  trustLevel?: TrustLevel;
 }
 
 export abstract class BaseComponent<T extends HTMLElement = HTMLElement> {
@@ -34,27 +36,28 @@ export abstract class BaseComponent<T extends HTMLElement = HTMLElement> {
   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.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.element, this.eventListeners);
+    ChildrenHelper.destroyChildren(this._children);
+    this.element.remove();
   }
 
-  protected addChildren(): void {
-    ChildrenHelper.addChildren(this, this.element, this._children);
+  public render(): HTMLElement {
+    this.addChildren();
+    return this.element;
   }
 
 /**
@@ -72,18 +75,18 @@ interface CatalogConfig {
     return CatalogHelper.generateCatalog(config);
   }
 
-  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.bindEvents(this, this.element, this.eventListeners);
   }
 
-  public render(): HTMLElement {
-    this.addChildren();
-    return this.element;
+  protected addChildren(): void {
+    ChildrenHelper.addChildren(this, this.element, this._children);
   }
 }

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

@@ -53,14 +53,14 @@ export class CatalogHelper {
     return componentConfigs;
   }
 
-  private static createElements(index: number, config: CatalogConfig, container: HTMLElement) {
+  private static createElements(index: number, config: CatalogConfig, container: HTMLElement): void {
     const el = document.createElement(config.elementTag || 'div');
     el.setAttribute('data-component', `${config.elementName}-${index}`);
     el.dataset.index = String(index);
     container?.appendChild(el);
   }
 
-  private static pushConfig(index: number, componentConfigs: ComponentConfig[], config: CatalogConfig) {
+  private static pushConfig(index: number, componentConfigs: ComponentConfig[], config: CatalogConfig): void {
     const item = config.array[index];
 
     const configWithIndex: CatalogItemConfig = (item && typeof item === 'object')

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,41 @@
+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;
   }
+
+  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);
+    }
+  }
 }

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

@@ -23,6 +23,15 @@ export class EventHelper {
     });
   }
 
+  public static destroyEvents(
+    element: HTMLElement, 
+    eventListeners: Array<[string, EventListener]>
+  ): void {
+    eventListeners.forEach(([event, listener]) => {
+      element.removeEventListener(event, listener);
+    });
+  }
+
   private static createBoundHandler(
     el: Element, 
     component: BaseComponent, 
@@ -45,13 +54,4 @@ export class EventHelper {
     target.addEventListener(event, listener);
     eventListeners.push([event, listener]);
   }
-
-  public static destroyEvents(
-    element: HTMLElement, 
-    eventListeners: Array<[string, EventListener]>
-  ): void {
-    eventListeners.forEach(([event, listener]) => {
-      element.removeEventListener(event, listener);
-    });
-  }
 }

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

@@ -1,13 +1,11 @@
+export type TrustLevel = 'strict' | 'normal' | 'trusted';
+
 export class SecurityHelper {
-  public static escapeHtml(value: unknown): string {
+  public static sanitizeTemplate(value: unknown, trustLevel: TrustLevel = 'normal'): string {
     if (value === null || value === undefined) return '';
-    const str = String(value);
-    return str
-      .replace(/&/g, "&")
-      .replace(/</g, "&lt;")
-      .replace(/>/g, "&gt;")
-      .replace(/"/g, "&quot;")
-      .replace(/'/g, "&#039;");
+    let template = String(value);
+
+    return this.sanitizeInputTemplate(template, trustLevel);
   }
 
   public static sanitizeInputElement(
@@ -21,4 +19,38 @@ export class SecurityHelper {
     }
     return '';
   }
+
+  public static escapeHtml(value: unknown): string {
+    if (value === null || value === undefined) return '';
+    const str = String(value);
+    return str
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;");
+  }
+
+  private static sanitizeInputTemplate(template: string, trustLevel: TrustLevel): string {
+    // Trusted: no tamplate sanitization
+    if (trustLevel === 'trusted') {
+      return template;
+    }
+
+    // Always remove scripts and inline event handlers
+    template = template
+      .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
+      .replace(/\son\w+\s*=\s*["'][^"']*["']/gi, '');
+    
+    // Strict: remove iframe, object, embed, href, data: protocol
+    if (trustLevel === 'strict') {
+      template = template
+        .replace(/<iframe\b[^<]*(?:(?!<\/iframe>)<[^<]*)*<\/iframe>/gi, '')
+        .replace(/<object\b[^<]*(?:(?!<\/object>)<[^<]*)*<\/object>/gi, '')
+        .replace(/<embed\b[^>]*>/gi, '')
+        .replace(/href\s*=\s*["']javascript:[^"']*["']/gi, '')
+        .replace(/src\s*=\s*["']data:[^"']*["']/gi, '');
+    }
+    return template;
+  }
 }

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

@@ -47,6 +47,22 @@ export class TokenHelper {
     );
   }
 
+/** Register a new exact token like "@foo" */
+  public static registerCustomToken(
+    name: string,
+    resolver: (el: HTMLElement, ev: Event) => any
+  ): void {
+    this.customResolvers[name] = resolver;
+  }
+
+/** Register a new prefixed token like "@style:" */
+  public static registerPrefixedToken(
+    prefix: string,
+    resolver: (suffix: string, el: HTMLElement) => any
+  ): void {
+    PREFIXED_TOKEN_RESOLVERS[prefix] = resolver;
+  }
+
   private static resolveExact(token: string, el: HTMLElement, ev: Event): any | null {
     const resolver = EXACT_TOKEN_RESOLVERS[token];
     return resolver ? resolver(el, ev) : null;
@@ -80,20 +96,4 @@ export class TokenHelper {
     }
     return null;
   }
-
-/** Register a new exact token like "@foo" */
-  public static registerCustomToken(
-    name: string,
-    resolver: (el: HTMLElement, ev: Event) => any
-  ) {
-    this.customResolvers[name] = resolver;
-  }
-
-/** Register a new prefixed token like "@style:" */
-  public static registerPrefixedToken(
-    prefix: string,
-    resolver: (suffix: string, el: HTMLElement) => any
-  ) {
-    PREFIXED_TOKEN_RESOLVERS[prefix] = resolver;
-  }
 }

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

@@ -76,6 +76,18 @@ export abstract class Component<T extends HTMLElement = HTMLElement, K = any> ex
     );
   }
 
+  public getValues(): Record<string, string> {
+    return DataBindingHelper.getDataBindingValues(this.element);
+  }
+
+  public override render(): HTMLElement {
+    this.applyProps();
+    this.appendDynamicButtons();
+    this.autoBindEvents();
+    this.parseDataAttributes();
+    return super.render();
+  }
+
   private applyProps(): void {
     if (this.props.className) {
       this.element.classList.add(this.props.className);
@@ -95,16 +107,4 @@ export abstract class Component<T extends HTMLElement = HTMLElement, K = any> ex
   private applyDataBindings(): void {
     DataBindingHelper.applyDataBindings(this.element, this.props);
   }
-
-  public getValues(): Record<string, string> {
-    return DataBindingHelper.getDataBindingValues(this.element);
-  }
-
-  public override render(): HTMLElement {
-    this.applyProps();
-    this.appendDynamicButtons();
-    this.autoBindEvents();
-    this.parseDataAttributes();
-    return super.render();
-  }
 }

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

@@ -1,5 +1,5 @@
 export class ConfigHelper {
-  static normalize<T extends Record<string, any>>(
+  public static normalize<T extends Record<string, any>>(
     config: T, 
     defaults: Partial<T>
   ): T {
@@ -9,7 +9,7 @@ export class ConfigHelper {
     } as T;
   }
 
-  static normalizeStrings<T extends Record<string, any>>(
+  public static normalizeStrings<T extends Record<string, any>>(
     config: T,
     stringKeys: (keyof T)[]
   ): T {

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

@@ -1,7 +1,7 @@
 import { ComponentProps } from "../component.js";
 
 export class DataBindingHelper {
-  static applyDataBindings(element: HTMLElement, props: ComponentProps): void {
+  public static applyDataBindings(element: HTMLElement, props: ComponentProps): void {
     const bindEls = element.querySelectorAll('[data-bind]');
     bindEls.forEach(el => {
       const key = el.getAttribute('data-bind');
@@ -18,7 +18,7 @@ export class DataBindingHelper {
     });
   }
 
-  static getDataBindingValues(element: HTMLElement): Record<string, string> {
+  public static getDataBindingValues(element: HTMLElement): Record<string, string> {
     const values: Record<string, string> = {};
     element.querySelectorAll('[data-bind]').forEach(el => {
       const key = el.getAttribute('data-bind');

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

@@ -15,16 +15,10 @@ export abstract class Service<T extends Service<T>> {
         `${constructor.name} is a Service. Use ${constructor.name}.getInstance() instead.`
       );
     }
+    this.autoBindMethods();
     window.addEventListener('beforeunload', this.dispose);
   }
 
-  /**
-   * For async and custom cleanup operations
-   */
-  protected onDestroy<T extends Service<T>>(this: () => T): void {
-    console.log(`No onDestroy operations.`)
-  }
-
   public static createInstance<T extends Service<T>>(
     constructor: new (...args: any[]) => T,
     ...args: any[]
@@ -62,11 +56,7 @@ export abstract class Service<T extends Service<T>> {
     }
   }
 
-  protected registerCleanup(callback: () => void) {
-    this._cleanupCallbacks.push(callback);
-  }
-
-  public dispose = () => {
+  public dispose = (): void => {
     this._cleanupCallbacks.forEach(fn => fn());
     this._cleanupCallbacks = [];
     Service._instances.delete(this.constructor);
@@ -81,6 +71,39 @@ export abstract class Service<T extends Service<T>> {
     Service._instantiating.clear();
   }
 
+  protected registerCleanup(callback: () => void): void {
+    this._cleanupCallbacks.push(callback);
+  }
+
+  /**
+   * For async and custom cleanup operations
+   */
+  protected onDestroy<T extends Service<T>>(this: () => T): void {
+    console.log(`No onDestroy operations.`)
+  }
+
+  private autoBindMethods(): void {
+    let proto = Object.getPrototypeOf(this);
+
+    while (proto && proto !== Service.prototype) {
+      const propertyNames = Object.getOwnPropertyNames(proto);
+
+      for (const key of propertyNames) {
+        const descriptor = Object.getOwnPropertyDescriptor(proto, key);
+
+        if (
+          key !== 'constructor' &&
+          descriptor &&
+          typeof descriptor.value === 'function'
+        ) {
+          (this as any)[key] = descriptor.value.bind(this);
+        }
+      }
+
+      proto = Object.getPrototypeOf(proto);
+    }
+  }
+
   /**
    * Resets the Service instance without cleanup.
    */

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

@@ -18,12 +18,6 @@ export abstract class View<T extends HTMLElement = HTMLElement> extends BaseComp
     this.viewName = viewName || this.getKebabCaseViewName();
   }
 
-  private getKebabCaseViewName(): string {
-    const className = this.constructor.name;
-    const baseName = className.replace(/View$/, '');
-    return baseName.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-  }
-
    /**
    * Set route parameters for this view instance
    * Called by the router when the view is instantiated
@@ -74,4 +68,10 @@ export abstract class View<T extends HTMLElement = HTMLElement> extends BaseComp
     super.destroy();
     this.onExit();
   }
+
+  private getKebabCaseViewName(): string {
+    const className = this.constructor.name;
+    const baseName = className.replace(/View$/, '');
+    return baseName.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+  }
 }

package/templates/base/src/core/services/event-bus/event-bus.ts.hbs

@@ -34,18 +34,6 @@ export class EventBus extends Service<EventBus> {
     this.addHandler(event, callback, true);
   }
 
-  private addHandler<K extends EventKey>(
-    event: K,
-    callback: (data: EventMap[K]) => void,
-    once: boolean
-  ) {
-    if (!this.handlers[event]) {
-      this.handlers[event] = [];
-    }
-    this.handlers[event]!.push(callback);
-    this._subscriptions.push({ event, callback, once });
-  }
-
   public emit<K extends EventKey>(event: K, data?: EventMap[K]): void {
     const callbacks = this.handlers[event];
     if (!callbacks) return;
@@ -80,7 +68,19 @@ export class EventBus extends Service<EventBus> {
     );
   }
 
-  private cleanupEventListeners = () => {
+  private addHandler<K extends EventKey>(
+    event: K,
+    callback: (data: EventMap[K]) => void,
+    once: boolean
+  ): void {
+    if (!this.handlers[event]) {
+      this.handlers[event] = [];
+    }
+    this.handlers[event]!.push(callback);
+    this._subscriptions.push({ event, callback, once });
+  }
+
+  private cleanupEventListeners = (): void => {
     this._subscriptions.forEach(({ event, callback }) => {
       this.off(event, callback);
     });