@nutin/cli 1.0.1 → 1.2.0

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();

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

@@ -1,18 +1,35 @@
-import { readFile } from 'fs/promises';
+import { readFile, writeFile } from 'fs/promises';
+import { JSDOM } from 'jsdom';
 import { exit } from 'process';
-import { print } from '../../utils/index.js';
+import { print, isProd } 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) {
+  print.info('Adding script in HTML...');
+
+  const dom = new JSDOM(htmlContent);
+  const document = dom.window.document;
+
+  const newScript = document.createElement("script");
+  newScript.type = "module";
+  newScript.src = isProd ? "/bundle.js" : "/app/main.js";
+
+  document.body.appendChild(newScript);
+  const serialized = dom.serialize().replace(/>\s+</g, '><')
+
+  writeFile(filePath, serialized, "utf8");
+
+  return htmlContent;
+}
+
 async function validateHtml() {
-  {{#if template}}
-  const filePath = 'dist-build/src/index.html';
-  {{else}}
-  const filePath = 'dist/src/index.html';
-  {{/if}}
+  const filePath = path.join(PATHS.tempSource, 'index.html');
 
   let htmlContent;
   try {
@@ -25,14 +42,12 @@ async function validateHtml() {
     errorExit('Missing #app container in HTML');
   }
 
-  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');
   }
 
+  await addEntrypoint(htmlContent, filePath);
+
   print.info('HTML validation passed');
 }
 

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

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+
+import { spawn } from 'child_process';
+import { print, runCommand } from './utils/index.js';
+
+function run(command, args = [], label = '') {
+  return new Promise((resolve, reject) => {
+    print.info(`\n▶ ${label || command}...`);
+
+    const child = spawn(command, args, { stdio: 'inherit', shell: true });
+
+    child.on('close', (code) => {
+      if (code === 0) resolve();
+      else reject(new Error(`${command} exited with code ${code}`));
+    });
+  });
+}
+
+async function startDev() {
+  try {
+    console.clear();
+    print.boldHead('🚀 Starting Dev Environment...');
+
+    await run('{{packageManager}}', ['run', 'build'], 'Running initial build');
+
+    const serve = spawn('{{packageManager}}', ['run', 'serve:only'], { stdio: 'inherit', shell: true });
+    const watcher = spawn('node', ['tools/watcher.js'], { stdio: 'inherit', shell: true });
+
+    print.boldSuccess('\nDev server and watcher running!\n');
+
+    serve.on('close', (code) => {
+      print.error(`live-server exited with code ${code}`);
+      process.exit(code);
+    });
+    watcher.on('close', (code) => {
+      print.error(`watcher exited with code ${code}`);
+    });
+  } catch (err) {
+    print.boldError(`Dev startup failed: ${err.message}`);
+  }
+}
+
+startDev();

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

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 
-import { allFormats, getLastWord, print } from "../utils/index.js";
-import { generateFile, appendToIndex{{#if i18n}}, generateJson{{/if}} } from "./handle-file.js";
+import { allFormats, getLastWord, print{{#if stylinNutin}}, promptBoolean{{/if}} } from "../utils/index.js";
+import { generateFile, appendToIndex{{#if i18n}}, generateJson{{/if}}{{#if stylinNutin}}, generateStylesheet{{/if}} } from "./handle-file.js";
 import { serviceTemplate, componentTemplate, viewTemplate{{#if template}}, htmlTemplate{{/if}} } from "./templates/index.js";
 
 // Constants and Setup
@@ -29,6 +29,10 @@ const creators = {
   },
   component: (name, targetPath) => {
     print.section(`Creating component: ${name.capitalized}`);
+    {{#if stylinNutin}}
+    const doCreateStylesheet = await promptBoolean('Create component\'s stylesheet in styles/components ?');
+    {{/if}}
+
     try {
       generateFile({ name, targetPath, templateFn: componentTemplate, suffix: 'component' });
       {{#if template}}
@@ -37,6 +41,9 @@ const creators = {
       {{#if i18n}}
       generateJson({ targetPath, name });
       {{/if}}
+      {{#if stylinNutin}}
+      if (doCreateStylesheet) generateStylesheet(name);
+      {{/if}}
       appendToIndex({ name, targetPath, suffix: 'component' });
     } catch (err) {
       handleError("Failed to generate component", err);

package/templates/base/tools/generator/handle-file.js.hbs

@@ -59,4 +59,27 @@ export function generateJson({ targetPath, name }) {
   });
 }
 
+{{/if}}
+{{#if stylinNutin}}
+export function generateStylesheet(name) {
+  const template = scssTemplate();
+  const componentsStylePath = path.join('src', 'styles', 'components');
+  const filePath = path.join(componentsStylePath, `_${name.kebab}.scss`);
+  const indexPath = path.join(componentsStylePath, `_index.scss`);
+
+  if (fs.existsSync(filePath)) {
+    print.boldError('A file with this name already exists');
+    process.exit(1);
+  }
+  fs.writeFileSync(filePath, template);
+
+  const lineToAppend = `@forward "${name.kebab}";\n`;
+
+  try {
+    fs.appendFileSync(indexPath, lineToAppend, 'utf8');
+  } catch (err) {
+    print.error(`Error appending line: ${err}`);
+  }
+}
+
 {{/if}}

package/templates/base/tools/generator/templates/index.js.hbs

@@ -7,3 +7,6 @@ export * from './html.template.js';
 {{#if i18n}}
 export * from './json.template.js';
 {{/if}}
+{{#if stylinNutin}}
+export * from './scss.template.js';
+{{/if}}

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

@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+
+import liveServer from 'live-server';
+
+const params = {
+  port: 9090,
+  root: 'dist/src',
+  open: false, // set to true to open a new window in browser
+  logLevel: 0, // 0 = errors only, 1 = some info, 2 = verbose
+  entryFile: 'index.html',
+  wait: 100, // debounce reloads
+  middleware: [
+    function(req, res, next) {
+      if (req.url.includes('.') && !req.url.endsWith('/')) {
+        return next();
+      }
+      req.url = '/index.html';
+      next();
+    }
+  ]
+};
+
+liveServer.start(params);

package/templates/base/tools/utils/export-flags.js.hbs

@@ -0,0 +1,5 @@
+import process from 'process';
+
+export const isProd = process.env.npm_config_bundle || process.env.NODE_ENV === 'production';
+
+export const isVerbose = process.env.npm_config_log;

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

@@ -2,7 +2,7 @@ import * as fs from 'fs';
 import * as path from 'path';
 
 export function getFilesRecursive(dir, extension) {
-  const fullDir = path.resolve(process.cwd(), dir);
+  const fullDir = path.resolve(dir);
 
   if (!fs.existsSync(fullDir)) return [];
   
@@ -14,10 +14,8 @@ export function getFilesRecursive(dir, extension) {
       const fullPath = path.join(currentDir, item.name);
       
       if (item.isDirectory()) {
-        // Recursively search subdirectories
         files.push(...findFilesRecursively(fullPath));
       } else if (item.isFile() && item.name.endsWith(extension)) {
-        // Add  files to the results
         files.push(fullPath);
       }
     }

package/templates/base/tools/utils/index.js.hbs

@@ -1,3 +1,7 @@
 export * from './print.js';
 export * from './format.js';
-export * from './get-files-recursive.js';
+export * from './get-files-recursive.js';
+export * from './run-command.js';
+export * from './run-script.js';
+export * from './export-flags.js';
+export * from './prompt-boolean.js';

package/templates/base/tools/utils/prompt-boolean.js.hbs

@@ -0,0 +1,15 @@
+import readline from 'readline';
+
+export const promptBoolean = (question) => {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+  });
+
+  return new Promise((resolve) => {
+    rl.question(`${question} (y/n): `, (answer) => {
+      rl.close();
+      resolve(answer.toLowerCase() === 'y' || answer.toLowerCase() === 'yes');
+    });
+  });
+};

package/templates/base/tools/utils/run-command.js.hbs

@@ -0,0 +1,5 @@
+export function runCommand(cmd) {
+  import('child_process').then(({ execSync }) => {
+    execSync(cmd, { stdio: 'inherit' });
+  });
+}

package/templates/base/tools/utils/run-script.js.hbs

@@ -0,0 +1,22 @@
+import { resolve } from 'path';
+import { spawnSync } from 'child_process';
+import process from 'process';
+import { print } from './index.js';
+
+export function runScript(path, message) {
+  print.boldSection(`\n${message}`);
+
+  const args = [resolve(path)];
+
+  const result = spawnSync('node', args, 
+    { 
+      stdio: 'inherit',
+      env: { ...process.env }, 
+    }
+  );
+
+  if (result.status !== 0) {
+    print.boldError(`\nScript ${path} failed.`);
+    process.exit(result.status ?? 1);
+  }
+}

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

@@ -0,0 +1,44 @@
+import chokidar from 'chokidar';
+import { exec } from 'child_process';
+import path from 'path';
+import { print } from './utils/index.js'
+
+const watcher = chokidar.watch(['src'], {
+  ignored: /(^|[/\\])\../,
+  persistent: true,
+});
+
+let isBuilding = false;
+let buildTimeout = null;
+
+watcher.on('change', (filePath) => {
+  if (buildTimeout) {
+    clearTimeout(buildTimeout);
+  }
+  
+  buildTimeout = setTimeout(() => {
+    if (isBuilding) return;
+    isBuilding = true;
+
+    console.clear();
+    print.boldInfo(`\n🔄 File changed: ${path.relative(process.cwd(), filePath)}\n`);
+    print.info('\nRebuilding...');
+
+    const command = '{{packageManager}} run build';
+    
+    exec(command, (err, stdout, stderr) => {
+      if (stdout) process.stdout.write(stdout);
+      if (stderr) process.stderr.write(stderr);
+      if (err) {
+        print.error(`\n❌ Build failed: ${err.message}`);
+      } else {
+        print.boldHead('Watching for changes...');
+      }
+      isBuilding = false;
+    });
+  }, 100);
+});
+
+watcher.on('ready', () => {
+  print.boldHead('\nWatching for changes...\n');
+});

package/templates/features/i18n/tools/builder/core/build-i18n.js.hbs

@@ -1,19 +1,13 @@
 import * as fs from 'fs';
 import * as path from 'path';
 import { exit } from 'process';
-import { getFilesRecursive, print } from '../../utils/index.js';
+import { getFilesRecursive, print, isVerbose } from '../../utils/index.js';
+import { PATHS } from './paths.js';
 
-const sourceRoot = './src/app';
-{{#if template}}
-const destDir = './dist-build/src/locales';
-const cleanupDir = './dist-build/src/app';
-{{else}}
-const destDir = './dist/src/locales';
-const cleanupDir = './dist/src/app';
-{{/if}}
+const destDir = path.join(PATHS.tempSource, 'locales');
 
 function findLocaleFiles() {
-  const allFiles = getFilesRecursive(sourceRoot, '.json');
+  const allFiles = getFilesRecursive(PATHS.sourceApp, '.json');
   const localeFileMap = {};
 
   allFiles.forEach(file => {
@@ -66,18 +60,19 @@ async function removeJsonFiles(directory) {
     if (file.includes(`${path.sep}locales${path.sep}`)) {
       try {
         await fs.promises.unlink(file);
-        print.info(`Deleted locale JSON file: ${file}`);
+        if (isVerbose) print.info(`Deleted locale JSON file: ${file}`);
       } catch (err) {
         print.error(`Failed to remove ${file}: ${err.message}`);
       }
-    } else {
+    } 
+    else if (isVerbose) {
       print.info(`Skipping non-locale JSON file: ${file}`);
     }
   }
 
   await removeEmptyDirectories(directory);
 
-  print.info(`✅ JSON files cleanup complete.`);
+  if (isVerbose) print.info(`✅ JSON files cleanup complete.`);
 }
 
 async function removeEmptyDirectories(directory) {
@@ -102,12 +97,12 @@ async function removeEmptyDirectories(directory) {
     }
   }
 
-  if (directory !== cleanupDir) {
+  if (directory !== PATHS.tempApp) {
     try {
       const updatedItems = await fs.promises.readdir(directory);
       if (updatedItems.length === 0) {
         await fs.promises.rmdir(directory, { recursive: false });
-        print.info(`📁 Removed empty directory: ${directory}`);
+        if (isVerbose) print.info(`📁 Removed empty directory: ${directory}`);
       }
     } catch (err) {
       print.error(`Failed to remove empty directory ${directory}: ${err.message}`);
@@ -128,7 +123,7 @@ async function mergeJson() {
     );
     print.info(`✅ Json files for locale ${locale} merged successfully`);
   }
-  removeJsonFiles(cleanupDir);
+  removeJsonFiles(PATHS.tempApp);
 }
 
 mergeJson().catch((err) => {

package/templates/features/stylinNutin/src/styles/_custom-classes.scss.hbs

@@ -5,5 +5,5 @@
 /*
 	 Add your classes here
 	 Custom classes prefix : 'c-'
-	 Component- or view-specific classes prefix : '/name/__'
+	 ( prefix view-specific classes with viewname__ )
 */

package/templates/features/stylinNutin/src/styles/components/_index.scss.hbs

@@ -0,0 +1,3 @@
+// global components style export
+
+// @forward "my-component";

package/templates/features/stylinNutin/tools/generator/templates/scss.template.js.hbs

@@ -0,0 +1,4 @@
+export const scssTemplate = () => `@use "sass:map";
+@use "variables" as *;
+@use "mixins";
+`;

package/templates/features/template/src/app/views/home/home.view.html.hbs

@@ -21,7 +21,7 @@
   {{else}}
     style="font-style:italic;font-size:0.75rem;"
   {{/if}}
-  >nutin v1.0.0</span>
+  >nutin v{{version}}</span>
   <img src="/assets/images/logo-trans.avif" width=250 height=250 alt="nutin's logo. A frame opened on the top left through which a plant grows.">
   <div 
   {{#if i18n}}

package/templates/features/template/tools/builder/core/merge-templates.js.hbs

@@ -1,52 +1,38 @@
 import fs from 'fs/promises';
 import path from 'path';
 import { exit } from 'process';
-import { print } from '../../utils/index.js';
+import { getFilesRecursive, print, isVerbose, isProd } from '../../utils/index.js';
+import { minifyHTML } from './minify-html.js';
+import { PATHS } from './paths.js';
 
-const JS_DIR = 'dist-build/src/app';
 const PLACEHOLDER = '__TEMPLATE_PLACEHOLDER__';
 
-async function findHtmlFiles(dir) {
-  const entries = await fs.readdir(dir, { withFileTypes: true });
-  const files = await Promise.all(
-    entries.map(async (entry) => {
-      const fullPath = path.join(dir, entry.name);
-      if (entry.isDirectory()) {
-        return findHtmlFiles(fullPath);
-      } else if (entry.isFile() && fullPath.endsWith('.html')) {
-        return [fullPath];
-      }
-      return [];
-    })
-  );
-  return files.flat();
-}
-
 async function mergeTemplates() {
-  const htmlFiles = await findHtmlFiles(JS_DIR);
+  const htmlFiles = await getFilesRecursive(PATHS.tempApp, 'html');
+  const fileExtension = isProd ? '.ts' : '.js';
 
   for (const htmlPath of htmlFiles) {
-    const jsPath = htmlPath.replace(/\.html$/, '.js');
+    const jsPath = htmlPath.replace(/\.html$/, fileExtension);
     const htmlFilename = path.basename(htmlPath);
     const jsFilename = path.basename(jsPath);
 
     try {
       const htmlContent = await fs.readFile(htmlPath, 'utf-8');
-      const minified = htmlContent.replace(/\n/g, '');
-      const escaped = minified.replace(/([\\/&`"])/g, '\\$1');
+      const minifiedHtml = await minifyHTML(htmlContent);
+      if (isVerbose) print.info(`Minified HTML: ${file}`);
 
       try {
         let jsContent = await fs.readFile(jsPath, 'utf-8');
         if (!jsContent.includes(PLACEHOLDER)) {
           print.boldError(`WARNING: No matching placeholder in ${jsFilename}`);
-          print.error(`If you're using external templates, make sure the template const is \`${PLACEHOLDER}\`.`);
-          print.error(`If using inline templates, remove ${htmlFilename}.`);
+          print.error(`Make sure the template const is \`${PLACEHOLDER}\`.`);
           exit(1);
         }
 
-        jsContent = jsContent.replace(PLACEHOLDER, escaped);
+        jsContent = jsContent.replace(PLACEHOLDER, minifiedHtml);
         await fs.writeFile(jsPath, jsContent);
-        print.info(`✅ Updated ${jsFilename} with template from ${htmlFilename}.`);
+        await fs.unlink(htmlPath);
+        if (isVerbose) print.info(`✅ Updated ${jsFilename} with template from ${htmlFilename}.`);
       } catch (err) {
         print.boldError(`ERROR: Cannot update ${jsFilename}. ${err.message}`);
       }
@@ -54,6 +40,7 @@ async function mergeTemplates() {
       print.boldError(`ERROR: Failed to read ${htmlFilename}. ${err.message}`);
     }
   }
+  print.info(`HTML templates minified and merged in scripts.`)
 }
 
 mergeTemplates().catch((err) => {

package/templates/features/template/tools/watcher.js.hbs

@@ -1,27 +0,0 @@
-import chokidar from 'chokidar';
-import { exec } from 'child_process';
-import path from 'path';
-import { print } from './utils/index.js'
-
-const watcher = chokidar.watch(['src'], {
-  ignored: /(^|[/\\])\../,
-  persistent: true,
-});
-
-let isBuilding = false;
-
-watcher.on('change', (filePath) => {
-  if (isBuilding) return;
-  isBuilding = true;
-
-  console.clear();
-  print.boldInfo(`\n🔄 File changed: ${path.relative(process.cwd(), filePath)}\n`);
-  print.info('\nRebuilding...')
-
-  exec('npm run build', (err, stdout, stderr) => {
-    if (stderr) process.stderr.write(stderr);
-    print.boldHead('\nWaiting for changes...');
-  });
-
-  isBuilding = false;
-});