@nutin/cli 1.1.0 → 1.2.0

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/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/index.html.hbs

@@ -8,7 +8,6 @@
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
   </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,6 @@
 {{#if stylinNutin}}
 // custom classes
 @use "custom-classes";
-
+// components styles
+@use "components";
 {{/if}}

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

@@ -1,37 +1,27 @@
 #!/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.resolve(process.cwd(),'tools', 'builder', 'core');
 
-import { BINARY_EXTENSIONS } from './variables/binary-extensions.js';
+print.boldHead(`Starting build...`);
 
-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...');
+if(!isProd) runScript(path.join(scriptsDir, 'tsc.js'), 'Running TypeScript compiler...');
 
-function runScript(path, message) {
-  print.boldSection(`\n${message}`);
-  const result = spawnSync('node', [resolve(__dirname, path)], { stdio: 'inherit' });
-
-  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 JavaScript 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...');
+
+runScript(path.join(scriptsDir, 'build-i18n.js'), 'Combining locales for production...');
+runScript(path.join(scriptsDir, 'sass.config.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`);
+
+if (!isProd) print.boldInfo('For production, use build:prod.');

package/templates/base/tools/builder/core/copy-static.js.hbs

@@ -1,16 +1,9 @@
 import fs from 'fs/promises';
 import path from 'path';
 import { exit } from 'process';
-
+import { getFilesRecursive, print, isVerbose, isProd } from '../../utils/index.js';
 import { BINARY_EXTENSIONS } from '../variables/binary-extensions.js';
-import { getFilesRecursive, print } from '../../utils/index.js';
-
-const SOURCE_FOLDER = 'src';
-{{#if template}}
-const DEST_FOLDER = `dist-build/${SOURCE_FOLDER}`;
-{{else}}
-const DEST_FOLDER = `dist/${SOURCE_FOLDER}`;
-{{/if}}
+import { PATHS } from './paths.js';
 
 async function ensureDir(dir) {
   await fs.mkdir(dir, { recursive: true });
@@ -22,33 +15,36 @@ async function copyFile(src, dest) {
 }
 
 async function copyFavicon() {
-  const srcPath = path.join('public', 'favicon.ico');
-  const destPath = path.join( DEST_FOLDER, 'favicon.ico');
+  const srcPath = path.resolve(path.join('public', 'favicon.ico'));
+  const destPath = path.join(PATHS.tempSource, 'favicon.ico');
 
   try {
     await copyFile(srcPath, destPath);
-    print.info('✅ Copied: favicon.ico');
+    if (isVerbose) print.info('✅ Copied: favicon.ico');
   } catch {
-    print.boldError('⚠️  No favicon found at public/favicon.ico\x1b[0m');
+    print.boldError('⚠️  No favicon found at public/favicon.ico');
   }
 }
 
 async function copyStatic() {
   const extensions = [...BINARY_EXTENSIONS, 'html'];
+  if (isProd) extensions.push('.ts');
+
+  print.info(`File types that will be copied: ${Array.from(extensions)}`);
 
-  await ensureDir(path.join(DEST_FOLDER));
+  await ensureDir(PATHS.tempSource);
   await copyFavicon();
 
   for (const extension of extensions) {
-    const files = await getFilesRecursive(SOURCE_FOLDER, extension);
+    const files = await getFilesRecursive(PATHS.source, extension);
 
     for (const file of files) {
-      const relative = path.relative(SOURCE_FOLDER, file);
-      const dest = path.join(DEST_FOLDER, relative);
+      const relative = path.relative(PATHS.source, file);
+      const dest = path.join(PATHS.tempSource, relative);
 
       try {
         await copyFile(file, dest);
-        print.info(`✅ Copied: ${file} → ${dest}`);
+        if (isVerbose) print.info(`✅ Copied: ${file} → ${dest}`);
       } catch (err) {
         print.error(`❌ Failed to copy: ${file}. ${err.message}`);
         exit(1);
@@ -56,7 +52,7 @@ async function copyStatic() {
     }
   }
 
-  await copyJsonFiles(SOURCE_FOLDER, DEST_FOLDER)
+  if (isProd) await copyJsonFiles(PATHS.source, PATHS.tempSource);
 }
 
 async function copyJsonFiles(sourceDir, destDir) {
@@ -72,7 +68,7 @@ async function copyJsonFiles(sourceDir, destDir) {
     } else if (item.isFile() && path.extname(item.name) === '.json') {
       await fs.mkdir(path.dirname(destPath), { recursive: true });
       await fs.copyFile(sourcePath, destPath);
-      console.log(`Copied JSON: ${sourcePath} -> ${destPath}`);
+      if (isVerbose) print.info(`Copied JSON: ${sourcePath} -> ${destPath}`);
     }
   }
 }

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

@@ -0,0 +1,36 @@
+import esbuild from 'esbuild';
+import path from 'path';
+import { exit } from 'process';
+import { print } from '../../utils/index.js';
+import { PATHS } from './paths.js';
+
+const ENTRY_FILE = path.join(PATHS.tempApp, 'main.ts');
+const OUT_FILE = path.join(PATHS.tempSource, 'bundle.js');
+
+async function build() {
+  await esbuild.build({
+    entryPoints: [ENTRY_FILE],
+    outfile: OUT_FILE,
+    bundle: true,
+    minify: true,
+    keepNames: true, // View names are used to update meta.title
+    sourcemap: false,
+    platform: 'browser',
+    format: 'esm',
+    target: ['es2015'],
+    legalComments: 'none',
+    loader: {
+      '.json': 'json',
+    },
+    define: {
+      'process.env.NODE_ENV': '"production"',
+    },
+  });
+
+  print.info(`ESBuild complete.`);
+}
+
+build().catch((err) => {
+  print.boldError(`ESBuild failed: ${err.message}`);
+  exit(1);
+});

package/templates/base/tools/builder/core/finalize-build.js.hbs

@@ -0,0 +1,24 @@
+import { print, isProd } from "../../utils/index.js";
+import fs from 'fs';
+import path from 'path';
+import { PATHS } from "./paths.js";
+
+function removeFoldersAfterBundle() {
+  const foldersToRemove = ['core', 'libs', 'app'];
+  const pathToFolder = (folder) => path.join(PATHS.tempSource, folder);
+
+  foldersToRemove.forEach(folder => fs.rmSync(pathToFolder(folder), { recursive : true }));
+}
+
+function replaceDir(src, dest) {
+  fs.rmSync(dest, { recursive: true, force: true });
+  fs.renameSync(src, dest);
+}
+
+function finalizeBuild() {
+  if (isProd) removeFoldersAfterBundle();
+  replaceDir(PATHS.temp, PATHS.build);
+  print.info('Build finalized.');
+}
+
+finalizeBuild();

package/templates/base/tools/builder/core/minify-html.js.hbs

@@ -0,0 +1,60 @@
+import { minify } from 'html-minifier-terser';
+{{#unless template}}
+import path from 'path';
+import fs from 'fs';
+import { exit } from 'process';
+import { getFilesRecursive, print, isProd, isVerbose } from '../../utils/index.js';
+import { PATHS } from './paths.js';
+{{/unless}}
+
+{{#if template}}export {{/if}}async function minifyHTML(html) {
+  return minify(html, {
+    collapseWhitespace: true,
+    removeComments: true,
+    removeRedundantAttributes: true,
+    removeScriptTypeAttributes: true,
+    removeStyleLinkTypeAttributes: true,
+    useShortDoctype: true,
+    keepClosingSlash: true,
+    minifyCSS: true,
+    minifyJS: true,
+  });
+}
+
+{{#unless template}}
+const TEMPLATE_REGEX =
+  /const\s+(template|templateFn)\s*=?\s*(?:\(.*?\)\s*=>\s*)?`([\s\S]*?)`/gm;
+
+async function minifyInlineHTML() {
+  const extension = isProd ? '.ts' : '.js';
+  const jsFiles = getFilesRecursive(PATHS.tempApp, extension);
+
+  for (const file of jsFiles) {
+    let code = fs.readFileSync(file, 'utf8');
+    let hasChanges = false;
+
+    const matches = [...code.matchAll(TEMPLATE_REGEX)];
+
+    if (matches.length) {
+      for (const match of matches) {
+        const [full, , html] = match;
+        const minified = await minifyHTML(html);
+        const minifiedBlock = full.replace(html, minified);
+        code = code.replace(full, minifiedBlock);
+        hasChanges = true;
+      }
+    }
+
+    if (hasChanges) {
+      fs.writeFileSync(file, code, 'utf8');
+      if (isVerbose) print.info(`Minified inline HTML in: ${file}`);
+    }
+  }
+  print.info('Inline templates minified.');
+}
+
+minifyInlineHTML().catch((err) => {
+  print.boldError(`Unexpected error: ${err.message}`);
+  exit(1);
+});
+{{/unless}}

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

@@ -0,0 +1,19 @@
+import path from 'path';
+
+const SRC_FOLDERNAME = 'src';
+const APP_FOLDERNAME = 'app';
+const TMP_FOLDERNAME = 'dist-build';
+const BLD_FOLDERNAME = 'dist';
+
+const BASE_PATHS = {
+  source: path.resolve(SRC_FOLDERNAME),
+  temp: path.resolve(TMP_FOLDERNAME),
+  build: path.resolve(BLD_FOLDERNAME)
+};
+
+export const PATHS = {
+  ...BASE_PATHS,
+  sourceApp: path.join(BASE_PATHS.source, APP_FOLDERNAME),
+  tempSource: path.join(BASE_PATHS.temp, SRC_FOLDERNAME),
+  tempApp: path.join(BASE_PATHS.temp, SRC_FOLDERNAME, APP_FOLDERNAME),
+};

package/templates/base/tools/builder/core/sass.config.js.hbs

@@ -1,17 +1,24 @@
 import * as sass from 'sass';
 import * as fs from 'fs';
+import path from 'path';
 import { print } from '../../utils/index.js';
-{{#if template}}
-const stylesOutput = 'dist-build/src'
-{{else}}
-const stylesOutput = 'dist/src';
-{{/if}}
-if (!fs.existsSync(stylesOutput)) fs.mkdirSync(stylesOutput);
+import { PATHS } from './paths.js';
 
-sass.compileAsync('src/styles/main.scss', {
-  loadPaths: ['src/styles/base', 'src/styles/core'],
+const stylesInput = path.join(PATHS.source, 'styles');
+const stylesOutput = path.join(PATHS.tempSource, 'main.css');
+
+const scssPath = (origin) => path.join(stylesInput, origin);
+const scssOrigins = [ 
+  'base', 
+  'core'{{#if stylinNutin}},
+  'components'{{/if}}
+];
+const pathsToLoad = scssOrigins.map(origin => scssPath(origin));
+
+sass.compileAsync(path.join(stylesInput, 'main.scss'), {
+  loadPaths: [ ...pathsToLoad ],
   style: 'compressed'
 }).then(result => {
+  fs.writeFileSync(stylesOutput, result.css);
   print.info('Global styles compiled.');
-  fs.writeFileSync(`${stylesOutput}/main.css`, result.css);
 });

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

@@ -0,0 +1,8 @@
+import { runCommand, print } from "../../utils/index.js";
+
+async function compileTS() {
+	runCommand('tsc --project tsconfig.json');
+  print.info('TypeScript compiled.');
+}
+
+compileTS();