@nutin/cli 1.2.3 → 1.3.0

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

@@ -31,6 +31,54 @@ export class PopoverView extends View {
     );
   }
 
+  public override shouldUpdateMetaContent(): boolean {
+    return false;
+  }
+
+  public override render(): HTMLElement {
+    document.body.classList.add('no-scroll');
+    this.overlay = this.createOverlay();
+
+    const wrapper = this.createWrapper();
+    const content = this.createContent();
+
+    this.appendCloseButton(content);
+    this.appendFooterButtons(content);
+
+    wrapper.appendChild(content);
+    this.overlay.appendChild(wrapper);
+    document.body.appendChild(this.overlay);
+
+    this.autoBindEvents();
+    this.parseDataAttributes();
+    this.animateIn(wrapper);
+
+    this.bindOverlayClose();
+
+    return this.overlay;
+  }
+
+  public override destroy(): void {
+    if (this.overlay) {
+      const wrapper = this.overlay.querySelector('.popover-wrapper');
+      this.overlay.classList.remove('show');
+      wrapper?.classList.remove('show');
+
+      setTimeout(() => {
+        wrapper?.remove()
+        this.overlay?.remove();
+        this.overlay = null;
+      }, 250); // match transition duration
+    }
+
+    document.body.classList.remove('no-scroll');
+    super.destroy();
+
+    if (typeof this.onClose === 'function') {
+      this.onClose();
+    }
+  }
+
 // Wraps button callbacks to include destroy() call
   private wrapButtonCallbacks(buttons: PopoverButton[]): PopoverButton[] {
     return buttons.map(btn => ({
@@ -94,52 +142,4 @@ export class PopoverView extends View {
       wrapper.classList.add('show');
     });
   }
-
-  public override shouldUpdateMetaContent(): boolean {
-    return false;
-  }
-
-  public override render(): HTMLElement {
-    document.body.classList.add('no-scroll');
-    this.overlay = this.createOverlay();
-
-    const wrapper = this.createWrapper();
-    const content = this.createContent();
-
-    this.appendCloseButton(content);
-    this.appendFooterButtons(content);
-
-    wrapper.appendChild(content);
-    this.overlay.appendChild(wrapper);
-    document.body.appendChild(this.overlay);
-
-    this.autoBindEvents();
-    this.parseDataAttributes();
-    this.animateIn(wrapper);
-
-    this.bindOverlayClose();
-
-    return this.overlay;
-  }
-
-  public override destroy(): void {
-    if (this.overlay) {
-      const wrapper = this.overlay.querySelector('.popover-wrapper');
-      this.overlay.classList.remove('show');
-      wrapper?.classList.remove('show');
-
-      setTimeout(() => {
-        wrapper?.remove()
-        this.overlay?.remove();
-        this.overlay = null;
-      }, 250); // match transition duration
-    }
-
-    document.body.classList.remove('no-scroll');
-    super.destroy();
-
-    if (typeof this.onClose === 'function') {
-      this.onClose();
-    }
-  }
 }

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

@@ -37,7 +37,7 @@ export function notify(message: string, options: NotifyOptions = {}): void {
   }
 }
 
-function displayNext() {
+function displayNext(): void {
   if (queue.length === 0) {
     isDisplaying = false;
     return;

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

@@ -3,7 +3,7 @@
 import path from 'path';
 import { print, isProd, runScript } from '../utils/index.js';
 
-const scriptsDir = path.join(process.cwd(),'tools', 'builder', 'core');
+const scriptsDir = path.join(process.cwd(), 'tools', 'builder', 'core');
 
 if (!isProd) print.boldInfo('For production, use build:prod.\n');
 print.boldHead(`Starting build...\n`);
@@ -21,9 +21,15 @@ runScript(path.join(scriptsDir, 'minify-html.js'), 'Minifying inline templates..
 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...');
+runScript(path.join(scriptsDir, 'validate-html.js'), 'Adding and validating tags in index.html...');
 
-if (isProd) runScript(path.join(scriptsDir, 'esbuild.js'), 'Running esbuild...');
+if (isProd) {
+	runScript(path.join(scriptsDir, 'esbuild.js'), 'Running esbuild...');
+	runScript(path.join(scriptsDir, 'hash-files.js'), 'Hashing files...');
+{{#if deployHelper}}
+	runScript(path.join(scriptsDir, 'compress-files.js'), 'Compressing files...');
+{{/if}}
+}
 
 runScript(path.join(scriptsDir, 'finalize-build.js'), 'Finalizing build...')
 

package/templates/base/tools/builder/core/add-tags.js.hbs

@@ -0,0 +1,46 @@
+import { print, isProd } from '../../utils/index.js';
+import { writeFile } from 'fs/promises';
+
+export async function addTags(htmlContent, filePath) {
+  const scriptSrc = isProd ? "bundle.js" : "app/main.js";
+  
+  const tags = [
+    { type: 'stylesheet', href: 'main.css', position: 'head' },
+    { type: 'script', src: scriptSrc, position: 'body' }
+  ];
+
+  let modifiedHtml = htmlContent;
+  
+  for (const tag of tags) {
+    modifiedHtml = addTag(modifiedHtml, tag);
+  }
+
+  await writeFile(filePath, modifiedHtml, "utf8");
+
+  return modifiedHtml;
+}
+
+function addTag(htmlContent, { type, src, href, position }) {
+  if (type !== 'stylesheet' && type !== 'script') return htmlContent;
+
+  const tagMap = {
+    script: `<script type="module" src="/${src}"></script>`,
+    stylesheet: `<link rel="stylesheet" href="/${href}">`
+  };
+
+  const positionMap = {
+    body: { regex: /<\/body>/i, replacement: (tag) => `${tag}</body>` },
+    head: { regex: /<\/head>/i, replacement: (tag) => `${tag}</head>`, fallback: /<title>/i }
+  };
+
+  const tag = tagMap[type];
+  const pos = positionMap[position];
+
+  if (pos.regex.test(htmlContent)) {
+    return htmlContent.replace(pos.regex, pos.replacement(tag));
+  } else if (pos.fallback && pos.fallback.test(htmlContent)) {
+    return htmlContent.replace(pos.fallback, `${tag}<title>`);
+  }
+  
+  return htmlContent + tag;
+}

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

@@ -5,6 +5,41 @@ import { getFilesRecursive, print, isVerbose, isProd } from '../../utils/index.j
 import { BINARY_EXTENSIONS } from '../variables/binary-extensions.js';
 import { PATHS } from './paths.js';
 
+async function copyStatic() {
+  const extensions = [...BINARY_EXTENSIONS, 'html'];
+  if (isProd) extensions.push('.ts');
+
+  if (isVerbose) print.info(`File types that will be copied: ${Array.from(extensions)}`);
+
+  await ensureDir(PATHS.tempSource);
+
+  await copyFavicon();
+  {{#if i18n}}
+  await copyConfig();
+  {{/if}}
+
+  for (const extension of extensions) {
+    const files = await getFilesRecursive(PATHS.source, extension);
+
+    for (const file of files) {
+      const relative = path.relative(PATHS.source, file);
+      const dest = path.join(PATHS.tempSource, relative);
+
+      try {
+        await copyFile(file, dest);
+        if (isVerbose) print.info(`✅ Copied: ${file} → ${dest}`);
+      } catch (err) {
+        print.error(`❌ Failed to copy: ${file}. ${err.message}`);
+        exit(1);
+      }
+    }
+  }
+
+  if (isProd) await copyJsonFiles(PATHS.source, PATHS.tempSource);
+
+  if (isVerbose) print.boldInfo(`Copy complete.\n`);
+}
+
 async function ensureDir(dir) {
   await fs.mkdir(dir, { recursive: true });
 }
@@ -45,41 +80,6 @@ async function copyConfig() {
 }
 
 {{/if}}
-async function copyStatic() {
-  const extensions = [...BINARY_EXTENSIONS, 'html'];
-  if (isProd) extensions.push('.ts');
-
-  if (isVerbose) print.info(`File types that will be copied: ${Array.from(extensions)}`);
-
-  await ensureDir(PATHS.tempSource);
-
-  await copyFavicon();
-  {{#if i18n}}
-  await copyConfig();
-  {{/if}}
-
-  for (const extension of extensions) {
-    const files = await getFilesRecursive(PATHS.source, extension);
-
-    for (const file of files) {
-      const relative = path.relative(PATHS.source, file);
-      const dest = path.join(PATHS.tempSource, relative);
-
-      try {
-        await copyFile(file, dest);
-        if (isVerbose) print.info(`✅ Copied: ${file} → ${dest}`);
-      } catch (err) {
-        print.error(`❌ Failed to copy: ${file}. ${err.message}`);
-        exit(1);
-      }
-    }
-  }
-
-  if (isProd) await copyJsonFiles(PATHS.source, PATHS.tempSource);
-
-  if (isVerbose) print.boldInfo(`Copy complete.\n`);
-}
-
 async function copyJsonFiles(sourceDir, destDir) {
   
   const items = await fs.readdir(sourceDir, { withFileTypes: true });

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

@@ -3,6 +3,12 @@ import fs from 'fs';
 import path from 'path';
 import { PATHS } from "./paths.js";
 
+function finalizeBuild() {
+  if (isProd) removeFoldersAfterBundle();
+  replaceDir(PATHS.temp, PATHS.build);
+  if (isVerbose) print.boldInfo('Build finalized.\n');
+}
+
 function removeFoldersAfterBundle() {
   const foldersToRemove = ['core', 'libs', 'app'];
   const pathToFolder = (folder) => path.join(PATHS.tempSource, folder);
@@ -15,10 +21,4 @@ function replaceDir(src, dest) {
   fs.renameSync(src, dest);
 }
 
-function finalizeBuild() {
-  if (isProd) removeFoldersAfterBundle();
-  replaceDir(PATHS.temp, PATHS.build);
-  if (isVerbose) print.boldInfo('Build finalized.\n');
-}
-
 finalizeBuild();

package/templates/base/tools/builder/core/hash-files.js.hbs

@@ -0,0 +1,52 @@
+import fs from 'fs';
+import path from 'path';
+import crypto from 'crypto';
+import { PATHS } from './paths.js';
+import { print, isVerbose, getFilesRecursive } from '../../utils/index.js';
+
+function addHashToFiles(distDir) {
+  const files = getFilesRecursive(distDir, ['.js', '.css']);
+
+  const fileMap = {}; // Track old → new filenames
+
+  files.forEach(fullPath => {
+    const ext = path.extname(fullPath);
+    const dirOfFile = path.dirname(fullPath);
+    const name = path.basename(fullPath, ext);
+
+    const hash = hashFile(fullPath);
+    const newName = `${name}.${hash}${ext}`;
+    const newPath = path.join(dirOfFile, newName);
+
+    fs.renameSync(fullPath, newPath);
+
+    const oldRel = path.relative(distDir, fullPath).replace(/\\/g, '/');
+    const newRel = path.relative(distDir, newPath).replace(/\\/g, '/');
+
+    fileMap[oldRel] = newRel;
+
+    if (isVerbose) {
+      print.info(`Renamed: ${oldRel} → ${newRel}`);
+    }
+  });
+
+  updateHtmlReferences(path.join(distDir, 'index.html'), fileMap);
+}
+
+function hashFile(filePath) {
+  const content = fs.readFileSync(filePath);
+  return crypto.createHash('sha256').update(content).digest('hex').substring(0, 8);
+}
+
+function updateHtmlReferences(htmlPath, fileMap) {
+  let html = fs.readFileSync(htmlPath, 'utf8');
+  
+  Object.entries(fileMap).forEach(([oldName, newName]) => {
+    html = html.replace(new RegExp(oldName, 'g'), newName);
+  });
+  
+  fs.writeFileSync(htmlPath, html);
+  if (isVerbose) print.info('Updated index.html references');
+}
+
+addHashToFiles(PATHS.tempSource);

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

@@ -1,33 +1,9 @@
-import { readFile, writeFile } from 'fs/promises';
+import { readFile } from 'fs/promises';
 import { exit } from 'process';
-import { print, isProd, isVerbose } from '../../utils/index.js';
+import { print, isVerbose } from '../../utils/index.js';
 import { PATHS } from './paths.js';
 import path from 'path';
-
-function errorExit(message) {
-  print.boldError(`[ERROR] ${message}`);
-  exit(1);
-}
-
-async function addEntrypoint(htmlContent, filePath) {
-  if (isVerbose) print.info('Adding script in HTML...');
-
-  const scriptSrc = isProd ? "bundle.js" : "app/main.js";
-  const scriptTag = `<script type="module" src="/${scriptSrc}"></script>`;
-
-  let modifiedHtml;
-  if (/<\/body>/i.test(htmlContent)) {
-    modifiedHtml = htmlContent.replace(/<\/body>/i, `${scriptTag}</body>`);
-  } else {
-    modifiedHtml = htmlContent + scriptTag;
-  }
-
-  const minified = modifiedHtml.replace(/>\s+</g, '><');
-
-  writeFile(filePath, minified, "utf8");
-
-  return modifiedHtml;
-}
+import { addTags } from './add-tags.js';
 
 async function validateHtml() {
   const filePath = path.join(PATHS.tempSource, 'index.html');
@@ -43,17 +19,21 @@ async function validateHtml() {
     errorExit('Missing #app container in HTML');
   }
 
-  if (!/<link[^>]*rel=["']stylesheet["']/.test(htmlContent)) {
-    errorExit('No stylesheet found in HTML');
-  }
-
-  htmlContent = await addEntrypoint(htmlContent, filePath).catch(err => errorExit(err.message));
+  htmlContent = await addTags(htmlContent, filePath).catch(err => errorExit(err.message));
 
   if (!/<script[^>]*type=["']module["']/.test(htmlContent)) {
     errorExit('No module scripts found in HTML');
   }
+  if (!/<link[^>]*rel=["']stylesheet["']/.test(htmlContent)) {
+    errorExit('No stylesheet found in HTML');
+  }
 
   if (isVerbose) print.boldInfo('HTML validation passed\n');
 }
 
+function errorExit(message) {
+  print.boldError(`[ERROR] ${message}`);
+  exit(1);
+}
+
 validateHtml();

package/templates/base/tools/utils/get-files-recursive.js.hbs

@@ -3,25 +3,34 @@ import * as path from 'path';
 
 export function getFilesRecursive(dir, extension) {
   const fullDir = path.resolve(dir);
-
   if (!fs.existsSync(fullDir)) return [];
-  
+
+  // Normalize to an array of extensions, with leading dots
+  const exts = Array.isArray(extension)
+    ? extension
+    : [extension];
+
+  const normalizedExts = exts.map(ext =>
+    ext.startsWith('.') ? ext : `.${ext}`
+  );
+
   function findFilesRecursively(currentDir) {
     const files = [];
     const items = fs.readdirSync(currentDir, { withFileTypes: true });
-    
+
     for (const item of items) {
       const fullPath = path.join(currentDir, item.name);
-      
+
       if (item.isDirectory()) {
         files.push(...findFilesRecursively(fullPath));
-      } else if (item.isFile() && item.name.endsWith(extension)) {
-        files.push(fullPath);
+      } else if (item.isFile()) {
+        if (normalizedExts.some(ext => item.name.endsWith(ext))) {
+          files.push(fullPath);
+        }
       }
     }
-    
     return files;
   }
-  
+
   return findFilesRecursively(fullDir);
 }

package/templates/features/deployHelper/tools/builder/core/compress-files.js.hbs

@@ -0,0 +1,56 @@
+import { readFileSync, writeFileSync } from 'fs';
+import { gzipSync
+// BROTLI OPTIONAL
+//, brotliCompressSync, constants 
+} from 'zlib';
+import { print, getFilesRecursive, isVerbose } from '../../utils/index.js';
+import { PATHS } from './paths.js';
+import builderConfig from '../../../builder.config.js';
+
+const compress = {
+  gzip: builderConfig.compression.gzip,
+  // BROTLI OPTIONAL
+  // brotli: builderConfig.compression.brotli,
+};
+
+function compressStaticAssets() {
+  if (
+    !compress.gzip 
+    // BROTLI OPTIONAL
+    // && !compress.brotli
+  ) return;
+
+  const files = getFilesRecursive(PATHS.tempSource, ['.js', '.css', '.json', '.svg', 'ttf', 'otf', 'eot']);
+  
+  files.forEach(file => {
+    const content = readFileSync(file);
+    
+    if (compress.gzip) {
+      const gzipped = gzipSync(content, {
+        level: 9,
+        memLevel: 9,
+        windowBits: 15
+      });
+      writeFileSync(`${file}.gz`, gzipped);
+      if (isVerbose) print.info(`Gzip compression: ${file}`);
+    }
+
+    // BROTLI OPTIONAL
+    /*
+    if (compress.brotli) {
+     const brotlied = brotliCompressSync(content, {
+       params: {
+         [constants.BROTLI_PARAM_QUALITY]: 11,
+         [constants.BROTLI_PARAM_LGWIN]: 22,
+         [constants.BROTLI_PARAM_MODE]: constants.BROTLI_MODE_GENERIC,
+         [constants.BROTLI_PARAM_SIZE_HINT]: content.length
+       }
+     });
+     writeFileSync(`${file}.br`, brotlied);
+     if (isVerbose) print.info(`Brotli compression: ${file}`);
+    }
+    */
+  });
+}
+
+compressStaticAssets();

package/templates/{base → features/deployHelper}/tools/deployment/Dockerfile.hbs

@@ -1,9 +1,18 @@
 ARG NODE_VERSION=22.3.0
 ARG NGINX_VERSION=1.27-alpine
+ARG PORT=9090
 
 FROM node:${NODE_VERSION} AS builder
 WORKDIR /usr/src/app
-COPY . .
+COPY ./src ./src
+COPY ./package* .
+COPY ./builder.config.js .
+{{#if i18n}}
+COPY ./config ./config
+{{/if}}
+COPY ./tools/builder ./tools/builder
+COPY ./tools/deployment ./tools/deployment
+COPY ./tools/utils ./tools/utils
 RUN {{ciCommand}} && \
     {{packageManager}} run build:prod
 
@@ -11,12 +20,11 @@ FROM nginx:${NGINX_VERSION}
 
 RUN rm /etc/nginx/conf.d/default.conf
 COPY --from=builder /usr/src/app/tools/deployment/nginx.conf /etc/nginx/conf.d/default.conf
-COPY --from=builder /usr/src/app/tools/deployment/gzip.conf /etc/nginx/conf.d/gzip.conf
 COPY --from=builder /usr/src/app/dist/src /usr/share/nginx/html
 
-EXPOSE 9090
+EXPOSE ${PORT}
 
 HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
-    CMD curl -f http://localhost:9090/health || exit 1
+    CMD curl -f http://localhost:${PORT}/health || exit 1
 
 CMD ["nginx", "-g", "daemon off;"]

package/templates/{base → features/deployHelper}/tools/deployment/nginx.conf.hbs

@@ -1,5 +1,5 @@
 # ---------------------------
-# HEADER VARIABLES (define outside server block)
+# HEADER VARIABLES (outside server block)
 # ---------------------------
 map $uri $frame_options {
     default "SAMEORIGIN";
@@ -25,12 +25,19 @@ map $uri $csp_policy {
     default "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self'; connect-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none';";
 }
 
+# ---------------------------
+# COMPRESSION (applies globally)
+# ---------------------------
+gzip on;
+gzip_static on;
+gzip_vary on;
+gzip_proxied any;
+
 server {
     # ---------------------------
     # LISTEN PORTS
     # ---------------------------
     listen 9090;
-    listen 9091;
     server_name _;
 
     # ---------------------------
@@ -94,6 +101,27 @@ server {
     location /health {
         access_log off;
         add_header Content-Type text/plain always;
+        add_header Cache-Control "no-store" always;
         return 200 "healthy\n";
     }
+    
+    # ---------------------------
+    # ERROR PAGE 404 (rare but possible for SPAs)
+    # --------------------------
+    error_page 404 /404.html;
+
+    location = /404.html {
+        internal;
+        try_files /404.html =404;
+        expires -1;
+        add_header Cache-Control "no-cache, no-store, must-revalidate" always;
+        
+        # Security headers
+        add_header X-Frame-Options $frame_options always;
+        add_header X-Content-Type-Options $content_type_options always;
+        add_header X-XSS-Protection $xss_protection always;
+        add_header Referrer-Policy $referrer_policy always;
+        add_header Permissions-Policy $permissions_policy always;
+        add_header Content-Security-Policy $csp_policy always;
+    }
 }

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

@@ -4,20 +4,18 @@ export class I18nHelper {
   public static parseI18nAttributes(element: HTMLElement): void {
     element.querySelectorAll('[data-i18n]').forEach(el => {
       const key = el.getAttribute('data-i18n')!;
-      const params = JSON.parse(el.getAttribute('data-i18n-params') || '{}');
-      this.setTranslatedContent(el, key, params);
+      this.setTranslatedContent(el, key);
     });
   }
 
   private static setTranslatedContent(
     el: Element, 
-    key: string, 
-    params: Record<string, string> = {}
+    key: string
   ): void {
     if (el instanceof HTMLInputElement) {
-      el.placeholder = I18nService.translate(key, params);
+      el.placeholder = I18nService.translate(key, el.textContent);
     } else {
-      el.textContent = I18nService.translate(key, params);
+      el.textContent = I18nService.translate(key, el.textContent);
     }
   }
 }