@nutin/cli 1.1.0 → 1.2.1

package/templates/base/src/app/components/common/anchor/anchor.component.ts.hbs

@@ -2,21 +2,19 @@ import { AnchorManager, Component, IAnchorConfig } from '../../../../core/index.
 
 /**
  * ```typescript
-interface IAttributesConfig {
-  {{#if i18n}}
-  i18nKey?: string;
-  {{/if}}
+ * interface IAnchorConfig {
+  // prefix href with '#' for internal anchor
+  href: string;
+  target?: string;
   textContent?: string;
+{{#if i18n}}
+  i18nKey?: string;
+{{/if}}
   className?: string;
   style?: string;
-// use regular pipe syntax for arguments / chaining
+  // use regular pipe syntax for arguments / chaining
   pipes?: string;
-}
-interface IAnchorConfig extends IAttributesConfig {
-// prefix href with '#' for internal anchor
-  href: string;
-// _blank, etc
-  target?: string;
+  tagName?: keyof HTMLElementTagNameMap;
 }
 ```
 */
@@ -25,9 +23,10 @@ export class AnchorComponent extends Component<HTMLAnchorElement, IAnchorConfig>
   constructor(mountTarget: HTMLElement, config: IAnchorConfig) {
     super({
       mountTarget,
+      tagName: config.tagName,
       config,
       normalizeKeys: ['style', 'pipes', 'className']
     });
     new AnchorManager(config, this.element);
   }
-}
+}

package/templates/base/src/app/dom.test.js.hbs

@@ -1,6 +1,13 @@
 describe('App container', () => {
-  it('should exist', () => {
+  it('should be defined', () => {
     const appContainer = document.getElementById('app');
     expect(appContainer).toBeDefined();
   });
+  it('should have title', () => {
+    expect(document.title).toEqual('{{projectName}}');
+  });
+  it('should have meta description', () => {
+    const desc = document.querySelector('meta[name="description"]').content;
+    expect(desc).toEqual('{{projectName}}');
+  });
 });

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;

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

@@ -1,7 +1,7 @@
 import { BaseComponent, ComponentConfig } from "../base-component.js";
 
 export interface CatalogConfig {
-  array: any[];
+  array: CatalogItemConfig[];
   elementName: string;
   elementTag?: keyof HTMLElementTagNameMap;
   selector: string;
@@ -9,7 +9,7 @@ export interface CatalogConfig {
 };
 
 export interface CatalogItemBase {
-  idx: number;
+  index: number;
 }
 
 export type CatalogItemObject<T extends object> = T & CatalogItemBase;
@@ -24,7 +24,7 @@ export type CatalogItemConfig<T = any> =
 /**
  * ```typescript
 interface CatalogConfig {
-  array: any[];
+  array: CatalogItemConfig[];
   elementName: string;
   elementTag?: keyof HTMLElementTagNameMap;
   selector: string;
@@ -53,23 +53,23 @@ export class CatalogHelper {
     return componentConfigs;
   }
 
-  private static createElements(idx: number, config: CatalogConfig, container: HTMLElement) {
+  private static createElements(index: number, config: CatalogConfig, container: HTMLElement) {
     const el = document.createElement(config.elementTag || 'div');
-    el.setAttribute('data-component', `${config.elementName}-${idx}`);
-    el.dataset.index = String(idx);
+    el.setAttribute('data-component', `${config.elementName}-${index}`);
+    el.dataset.index = String(index);
     container?.appendChild(el);
   }
 
-  private static pushConfig(idx: number, componentConfigs: ComponentConfig[], config: CatalogConfig) {
-    const item = config.array[idx];
+  private static pushConfig(index: number, componentConfigs: ComponentConfig[], config: CatalogConfig) {
+    const item = config.array[index];
 
     const configWithIndex: CatalogItemConfig = (item && typeof item === 'object')
-      ? { ...(item as object), index: idx }
-      : { value: item, index: idx };
+      ? { ...(item as object), index: index }
+      : { value: item, index: index };
     
     componentConfigs.push(
       { 
-        selector: `${config.elementName}-${idx}`,
+        selector: `${config.elementName}-${index}`,
         factory: (el) => new config.component(el, configWithIndex)
       },
     )

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

@@ -10,6 +10,9 @@ export class EventHelper {
     element.querySelectorAll('[data-event]').forEach(el => {
       const parts = el.getAttribute('data-event')!.split(':');
       const [eventName, handlerName, argsString] = parts;
+
+      if (!handlerName || !eventName) return;
+
       const handler = (component as any)[handlerName];
 
       if (typeof handler === 'function') {

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

@@ -28,6 +28,9 @@ export class PipeHelper {
 
     for (const pipe of pipes) {
       const [pipeName, ...argParts] = pipe.split(':');
+
+      if(!pipeName) return;
+
       const args = argParts.length ? argParts.join(':').split(',') : [];
       value = AppPipeRegistry.apply(pipeName.trim(), value, args.map(a => a.trim()));
     }

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

@@ -36,6 +36,7 @@ export class TokenHelper {
 
   public static resolve(token: string, el: Element, event: Event): any {
     const htmlEl = el as HTMLElement;
+    event.preventDefault();
 
     return (
       this.resolveExact(token, htmlEl, event) ??
@@ -52,9 +53,9 @@ export class TokenHelper {
   }
 
   private static resolvePrefixed(token: string, el: HTMLElement): any | null {
-    for (const prefix in PREFIXED_TOKEN_RESOLVERS) {
+    for (const [prefix, resolver] of Object.entries(PREFIXED_TOKEN_RESOLVERS)) {
       if (token.startsWith(prefix)) {
-        return PREFIXED_TOKEN_RESOLVERS[prefix](token.slice(prefix.length), el);
+        return resolver(token.slice(prefix.length), el);
       }
     }
     return null;
@@ -81,7 +82,7 @@ export class TokenHelper {
   }
 
 /** Register a new exact token like "@foo" */
-  public static registerToken(
+  public static registerCustomToken(
     name: string,
     resolver: (el: HTMLElement, ev: Event) => any
   ) {
@@ -89,7 +90,7 @@ export class TokenHelper {
   }
 
 /** Register a new prefixed token like "@style:" */
-  public static registerPrefixed(
+  public static registerPrefixedToken(
     prefix: string,
     resolver: (suffix: string, el: HTMLElement) => any
   ) {

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

@@ -1,63 +1,91 @@
 import { Service } from "../../index.js";
 
-/**
-  IEventBus is a type alias for the instance of EventBus, not a true interface 
-*/
 export type IEventBus = InstanceType<typeof EventBus>;
 
+type Subscription<K extends EventKey = EventKey> = {
+  event: K;
+  callback: (data: EventMap[K]) => void;
+  once?: boolean;
+};
+
 export class EventBus extends Service<EventBus> {
-  private _subscriptions: EventKey[] = [];
-  
+  private _subscriptions: Subscription[] = [];
+
   constructor() {
     super();
     this.registerCleanup(this.cleanupEventListeners);
   }
 
   private handlers: {
-    [K in EventKey]?: Array<(data: EventMap[K]) => void>
+    [K in EventKey]?: Array<(data: EventMap[K]) => void>;
   } = {};
-  
-  public subscribe<K extends EventKey>(event: K, callback: (data: EventMap[K]) => void): void {
-    AppEventBus.on(event, callback);
-    this._subscriptions.push(event);
+
+  public subscribe<K extends EventKey>(
+    event: K,
+    callback: (data: EventMap[K]) => void
+  ): void {
+    this.addHandler(event, callback, false);
   }
 
-  private on<K extends EventKey>(event: K, callback: (data: EventMap[K]) => void): void {
+  public once<K extends EventKey>(
+    event: K,
+    callback: (data: EventMap[K]) => void
+  ): void {
+    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;
-  public emit<K extends EventKey>(event: K): void;
   public emit<K extends EventKey>(event: K, data?: EventMap[K]): void {
-    this._subscriptions.push(event);
     const callbacks = this.handlers[event];
-    if (callbacks) {
-      callbacks.forEach(callback => callback(data!));
-    }
+    if (!callbacks) return;
+
+    callbacks.slice().forEach(callback => {
+      callback(data!);
+
+      const subIndex = this._subscriptions.findIndex(
+        sub => sub.event === event && sub.callback === callback && sub.once
+      );
+      if (subIndex > -1) {
+        this.off(event, callback);
+      }
+    });
   }
 
-  public off<K extends EventKey>(event: K, callback: (data: EventMap[K]) => void): void {
+  public off<K extends EventKey>(
+    event: K,
+    callback?: (data: EventMap[K]) => void
+  ): void {
     const handlers = this.handlers[event];
     if (!handlers) return;
 
-    this.handlers[event] = handlers.filter(handler => 
-      handler !== callback
-    ) as typeof handlers;
+    if (callback) {
+      this.handlers[event] = handlers.filter(h => h !== callback);
+    } else {
+      delete this.handlers[event];
+    }
+
+    this._subscriptions = this._subscriptions.filter(
+      sub => sub.event !== event || (callback && sub.callback !== callback)
+    );
   }
 
   private cleanupEventListeners = () => {
-    this._subscriptions.forEach(event => {
-      AppEventBus.off(event, () => {});
+    this._subscriptions.forEach(({ event, callback }) => {
+      this.off(event, callback);
     });
     this._subscriptions = [];
   };
-
-  onDestroy<T extends Service<T>>(this: () => T): void {
-    
-  }
 }
 
 export const AppEventBus = EventBus.getInstance();

package/templates/base/src/core/services/http-client/http-client.ts.hbs

@@ -2,27 +2,34 @@ import { Service } from "../../index.js";
 import { HttpBuilder, HttpMethod, IRequestConfig } from "./helpers/http-builder.helper.js";
 import { HttpManager } from "./helpers/http-manager.helper.js";
 
-/**
- * IHttpClient is a type alias for the instance of HttpClient, not a true interface 
- */
 export type IHttpClient = InstanceType<typeof HttpClient>;
 
 export class HttpClient extends Service<HttpClient> {
   private _baseUrl: string;
   private _defaultHeaders: Record<string, string>;
 
+  private _requestInterceptors: Array<(url: string, options: RequestInit) => void> = [];
+  private _responseInterceptors: Array<(response: Response) => void> = [];
+
   constructor(baseUrl: string = '', defaultHeaders: Record<string, string> = {}) {
     super();
     this._baseUrl = baseUrl;
-    this._defaultHeaders = {
-      'Content-Type': 'application/json',
-      ...defaultHeaders
-    };
+    this._defaultHeaders = { 'Content-Type': 'application/json', ...defaultHeaders };
+  }
+
+  public addRequestInterceptor(fn: (url: string, options: RequestInit) => void) {
+    this._requestInterceptors.push(fn);
+  }
+
+  public addResponseInterceptor(fn: (response: Response) => void) {
+    this._responseInterceptors.push(fn);
   }
 
   onDestroy(): void {
     this._baseUrl = '';
     this._defaultHeaders = {};
+    this._requestInterceptors = [];
+    this._responseInterceptors = [];
   }
 
   private async request<T>(
@@ -39,8 +46,12 @@ export class HttpClient extends Service<HttpClient> {
       const url = HttpBuilder.buildRequestUrl(fullUrl, config?.queryParams);
       const requestOptions = HttpBuilder.buildRequestOptions(method, data, mergedConfig, controller.signal);
 
+      this._requestInterceptors.forEach(fn => fn(url.toString(), requestOptions));
+
       const response = await fetch(url.toString(), requestOptions);
-      
+
+      this._responseInterceptors.forEach(fn => fn(response));
+
       await HttpManager.validateResponse(response);
       return await HttpManager.parseSuccessResponse<T>(response);
     } catch (error) {
@@ -50,23 +61,19 @@ export class HttpClient extends Service<HttpClient> {
     }
   }
 
-  public async get<T = unknown>(endpoint: string, config?: IRequestConfig): Promise<T> {
+  public get<T = unknown>(endpoint: string, config?: IRequestConfig) { 
     return this.request<T>('GET', endpoint, null, config);
   }
-
-  public async post<T = unknown>(endpoint: string, data?: unknown, config?: IRequestConfig): Promise<T> {
+  public post<T = unknown>(endpoint: string, data?: unknown, config?: IRequestConfig) { 
     return this.request<T>('POST', endpoint, data, config);
   }
-
-  public async put<T = unknown>(endpoint: string, data?: unknown, config?: IRequestConfig): Promise<T> {
+  public put<T = unknown>(endpoint: string, data?: unknown, config?: IRequestConfig) { 
     return this.request<T>('PUT', endpoint, data, config);
   }
-
-  public async patch<T = unknown>(endpoint: string, data?: unknown, config?: IRequestConfig): Promise<T> {
+  public patch<T = unknown>(endpoint: string, data?: unknown, config?: IRequestConfig) { 
     return this.request<T>('PATCH', endpoint, data, config);
   }
-
-  public async delete<T = unknown>(endpoint: string, config?: IRequestConfig): Promise<T> {
+  public delete<T = unknown>(endpoint: string, config?: IRequestConfig) { 
     return this.request<T>('DELETE', endpoint, undefined, config);
   }
 }

package/templates/base/src/core/services/router/helpers/navigation-manager.helper.ts.hbs

@@ -68,11 +68,11 @@ export class NavigationManager {
 
     const params: Record<string, string> = {};
     paramNames.forEach((name, i) => {
-      if (match[i + 1]) {
-        params[name] = match[i + 1];
+      const value = match[i + 1];
+      if (value) {
+        params[name] = value;
       }
     });
-
     return params;
   }
 }

package/templates/base/src/core/services/router/helpers/route-guard-manager.helper.ts.hbs

@@ -58,12 +58,12 @@ export class RouteGuardsManager {
     const guardResult = await this.runGuards(guards, params);
 
     if (guardResult === false) {
-      console.log(`Navigation to ${targetPath} blocked by route guard`);
+      // console.log(`Navigation to ${targetPath} blocked by route guard`);
       return { allowed: false };
     }
 
     if (typeof guardResult === 'string') {
-      console.log(`Navigation to ${targetPath} redirected to ${guardResult} by route guard`);
+      // console.log(`Navigation to ${targetPath} redirected to ${guardResult} by route guard`);
       return { allowed: false, redirectTo: guardResult };
     }
 

package/templates/base/src/core/services/router/helpers/view-render-manager.helper.ts.hbs

@@ -56,25 +56,40 @@ export class ViewRenderManager {
   }
 
   static cleanupOptionalContent() {
-    const isEmpty = (content: string | undefined | null): boolean => {
-    if (!content?.trim() || content === 'undefined') return true;
-      return false;
-    };
+    const isEmpty = (el: HTMLElement): boolean => {
+      const attrName = el.dataset.optional?.trim();
 
-    document.querySelectorAll<HTMLElement>('[data-optional]').forEach(el => {
-      const content = el.textContent?.trim();
-          
-      if (isEmpty(content)) {
-        el.remove();
+      if (attrName && attrName !== "") {
+        const attrValue = el.getAttribute(attrName);
+        return !attrValue || attrValue.trim() === "" || attrValue === "undefined";
+      }
+
+      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";
+    };
+
+    document.querySelectorAll<HTMLElement>("[data-optional]").forEach(el => {
+      if (isEmpty(el)) el.remove();
     });
   }
 
   static emitEvent(event: EventKey, viewName: string): void {
     AppEventBus.emit(event, viewName);
   }
-
   {{#if transition}}
+
   private static delay(ms: number): Promise<void> {
     return new Promise(res => setTimeout(res, ms));
   }

package/templates/base/src/core/services/router/router.ts.hbs

@@ -5,6 +5,7 @@ import { NavigationManager } from './helpers/navigation-manager.helper.js';
 
 // centralized export
 export { Routes, RouteGuard } from './helpers/route-guard-manager.helper.js';
+export { ViewRenderManager } from './helpers/view-render-manager.helper.js';
 
 /**
  * IRouter is a type alias for the instance of Router, not a true interface 

package/templates/base/src/core/utils/anchor-manager/anchor-manager.utils.ts.hbs

@@ -3,9 +3,9 @@ import { AttributesHelper, IAttributesConfig } from "../helpers/attributes.helpe
 /**
  * ```typescript
 interface IAttributesConfig {
-  {{#if i18n}}
+{{#if i18n}}
   i18nKey?: string;
-  {{/if}}
+{{/if}}
   textContent?: string;
   className?: string;
   style?: string;
@@ -15,14 +15,15 @@ interface IAttributesConfig {
 interface IAnchorConfig extends IAttributesConfig {
 // prefix href with '#' for internal anchor
   href: string;
-// _blank, etc
   target?: string;
+  tagName?: keyof HTMLElementTagNameMap;
 }
 ```
 */
 export interface IAnchorConfig extends IAttributesConfig {
   href: string;
   target?: string;
+  tagName?: keyof HTMLElementTagNameMap;
 }
 
 export class AnchorManager {

package/templates/base/src/core/utils/button-manager/button-manager.utils.test.js.hbs

@@ -109,7 +109,7 @@ describe('ButtonManager', () => {
 
   it('should set button className correctly', () => {
     const mockComponent = {};    
-    const manager = new ButtonManager(mockComponent, [], options);
+    const manager = new ButtonManager(mockComponent, []);
     const btn = { 
       i18nKey: 'save',
       className: 'btn-primary'

package/templates/base/src/index.html.hbs

@@ -6,9 +6,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="/main.css">
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <title>{{projectName}}</title>
   </head>
   <body>
-    <main id="app"></main>  
-    <script type="module" src="/app/main.js"></script>
+    <main id="app"></main>
   </body>
 </html>

package/templates/base/src/libs/popover/popover.ts.hbs

@@ -1,4 +1,4 @@
-import { View, ButtonManager, BaseButton } from '../../core/index.js';
+import { View, ButtonManager, BaseButton, ViewRenderManager } from '../../core/index.js';
 
 export interface PopoverButton extends BaseButton {
   // if needed for Popover-specific properties
@@ -59,6 +59,7 @@ export class PopoverView extends View {
   private createContent(): HTMLElement {
     const content = super.render();
     content.classList.add('popover-content');
+    ViewRenderManager.cleanupOptionalContent();
     return content;
   }
 

package/templates/base/src/styles/main.scss.hbs

@@ -12,5 +12,8 @@
 {{#if stylinNutin}}
 // custom classes
 @use "custom-classes";
-
+// components styles
+@use "components";
+// views styles
+@use "views";
 {{/if}}

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

@@ -1,37 +1,30 @@
 #!/usr/bin/env node
 
-import { fileURLToPath } from 'url';
-import { dirname, resolve } from 'path';
-import { spawnSync } from 'child_process';
-import process from 'process';
-import { print } from '../utils/index.js';
+import path from 'path';
+import { print, isProd, runScript } from '../utils/index.js';
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
+const scriptsDir = path.join(process.cwd(),'tools', 'builder', 'core');
 
-import { BINARY_EXTENSIONS } from './variables/binary-extensions.js';
+if (!isProd) print.boldInfo('For production, use build:prod.\n');
+print.boldHead(`Starting build...\n`);
 
-print.boldHead(`Building static files...`);
-print.info(`File types that will be copied: ${Array.from(BINARY_EXTENSIONS)}`);
+runScript(path.join(scriptsDir, 'copy-static.js'), 'Copying files...');
 
-function runScript(path, message) {
-  print.boldSection(`\n${message}`);
-  const result = spawnSync('node', [resolve(__dirname, path)], { stdio: 'inherit' });
+if(!isProd) runScript(path.join(scriptsDir, 'tsc.js'), 'Running TypeScript compiler...');
 
-  if (result.status !== 0) {
-    print.boldError(`\nScript ${path} failed.`);
-    process.exit(result.status ?? 1);
-  }
-}
-
-runScript('./core/copy-static.js', 'Copying files...');
-{{#if i18n}}
-runScript('./core/build-i18n.js', 'Combining locales for production...');
-{{/if}}
 {{#if template}}
-runScript('./core/merge-templates.js', 'Merging HTML templates in JavaScript files...');
+runScript(path.join(scriptsDir, 'merge-templates.js'), 'Merging HTML templates in temp files...');
+{{else}}
+runScript(path.join(scriptsDir, 'minify-html.js'), 'Minifying inline templates...');
 {{/if}}
-runScript('./core/sass.config.js', 'Compiling styles from main.scss...');
-runScript('./core/validate-html.js', 'Validating tags in index.html...');
+{{#if i18n}}
+runScript(path.join(scriptsDir, 'build-i18n.js'), 'Combining locales for production...');
+{{/if}}
+runScript(path.join(scriptsDir, 'sass.js'), 'Compiling styles from main.scss...');
+runScript(path.join(scriptsDir, 'validate-html.js'), 'Validating tags in index.html...');
+
+if (isProd) runScript(path.join(scriptsDir, 'esbuild.js'), 'Running esbuild...');
+
+runScript(path.join(scriptsDir, 'finalize-build.js'), 'Finalizing build...')
 
 print.boldSuccess(`\nBuild successful!\n`);