@nutin/cli 1.0.1 → 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,28 @@
+# Changelog
+
+## V1.0.1
+
+- Fixed typo issue when using i18n feature
+
+## V1.0.2
+
+- Partially fixed `npm run dev` script when using internal templates. *Page still needs to be reload manually from time to time.*
+
+## V1.1.0
+
+- Added index access in CatalogConfig. Use with `config.index`.
+```typescript
+interface CatalogItemBase {
+  idx: number;
+}
+type CatalogItemObject<T extends object> = T & CatalogItemBase;
+interface CatalogItemPrimitive extends CatalogItemBase {
+  value: string | number | boolean | null | undefined;
+}
+
+// type safety
+type CatalogItemConfig<T = any> =
+  T extends object ? CatalogItemObject<T> : CatalogItemPrimitive;
+```
+
+**Notes:** *Primitive data arrays (string, number, etc) needs to be accessed with `config.value`.*

package/lib/src/file-generator.mjs

@@ -54,7 +54,9 @@ export class ProjectGenerator {
     await this.processFeatureTemplates(projectPath, context);
   }
 
-  buildContext(answers) {
+  buildContext(answers) {  
+    const version = '1.1.0';
+
     return {
       projectName: answers.projectName,
       description: answers.description || `A modern web application`,
@@ -68,7 +70,8 @@ export class ProjectGenerator {
       hasFeatures: answers.template || answers.stylinNutin || answers.i18n || answers.transition || answers.testinNutin,
       
       year: new Date().getFullYear(),
-      packageManager: answers.packageManager || 'npm'
+      packageManager: answers.packageManager || 'npm',
+      version: version
     };
   }
 

package/lib/src/package-manager.mjs

@@ -52,7 +52,10 @@ export async function generatePackageJson(projectPath, answers) {
       ...baseScripts,
       "test": "node test/runner.js",
       "test--rebuild": "npm run build && npm run test",
-      "test:watch": "npm run build && node test/watch-tests.js"
+      "test:watch": "npm run build && node test/watch-tests.js",
+      "serve": "npm run build && npm run serve:only",
+      "serve:only": "live-server dist/src --port=9090 --entry-file=index.html --open",
+      "dev": "concurrently \"node tools/watcher.js\" \"npm run build && npm run serve:only > /dev/null 2>&1\""
     }
     : baseScripts;
 
@@ -61,19 +64,12 @@ export async function generatePackageJson(projectPath, answers) {
       ...scripts,
       "build:clear": "rm -rf dist/src/* dist-build",
       "build:finalize": "mkdir -p dist && mv dist-build/src dist/ && rm -rf dist-build",
-      "build": "npm run build:clear && npm run build:ts && npm run build-static && npm run build:finalize",
-      "serve:only": "live-server dist/src --port=9090 --entry-file=index.html --open",
-      "serve": "npm run build && npm run serve:only",
-      "dev": "concurrently \"node tools/watcher.js\" \"npm run build && npm run serve:only > /dev/null 2>&1\"",
+      "build": "npm run build:clear && npm run build:ts && npm run build-static && npm run build:finalize"
     }
     : {
       ...scripts,
       "build:clear": "rm -rf dist",
-      "build": "npm run build:clear && npm run build:ts && npm run build-static",
-      "dev": "concurrently \"npm run watch\" \"npm run serve\"",
-      "watch:ts": "tsc --watch",
-      "watch:sass": "sass --watch src/styles:dist/css",
-      "watch": "concurrently \"npm:watch:*\""
+      "build": "npm run build:clear && npm run build:ts && npm run build-static"
     };
 
   const packageJson = {

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@nutin/cli",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A lightweight, highly tweakable frontend toolkit, crafted for building lean, dynamic single-page applications without the complexity of full-scale frameworks.",
+  "preferGlobal": true,
   "main": "lib/index.mjs",
   "bin": {
     "create-nutin-app": "./bin/create-app.mjs",

package/templates/base/src/app/views/home/home.view.ts.hbs

@@ -23,7 +23,7 @@ const template = `{{#if template}}__TEMPLATE_PLACEHOLDER__{{else}}<div
   {{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/base/src/core/base-classes/base-component/helpers/catalog.helper.ts.hbs

@@ -8,6 +8,19 @@ export interface CatalogConfig {
   component: new (el: HTMLElement, data: any) => BaseComponent;
 };
 
+export interface CatalogItemBase {
+  idx: number;
+}
+
+export type CatalogItemObject<T extends object> = T & CatalogItemBase;
+
+export interface CatalogItemPrimitive extends CatalogItemBase {
+  value: string | number | boolean | null | undefined;
+}
+
+export type CatalogItemConfig<T = any> =
+  T extends object ? CatalogItemObject<T> : CatalogItemPrimitive;
+
 /**
  * ```typescript
 interface CatalogConfig {
@@ -17,6 +30,9 @@ interface CatalogConfig {
   selector: string;
   component: new (el: HTMLElement, data: any) => BaseComponent;
 };
+
+type CatalogItemConfig<T = any> =
+  T extends object ? CatalogItemObject<T> : CatalogItemPrimitive;
   ```
 */
 export class CatalogHelper {
@@ -40,14 +56,21 @@ export class CatalogHelper {
   private static createElements(idx: number, config: CatalogConfig, container: HTMLElement) {
     const el = document.createElement(config.elementTag || 'div');
     el.setAttribute('data-component', `${config.elementName}-${idx}`);
+    el.dataset.index = String(idx);
     container?.appendChild(el);
   }
 
   private static pushConfig(idx: number, componentConfigs: ComponentConfig[], config: CatalogConfig) {
+    const item = config.array[idx];
+
+    const configWithIndex: CatalogItemConfig = (item && typeof item === 'object')
+      ? { ...(item as object), index: idx }
+      : { value: item, index: idx };
+    
     componentConfigs.push(
       { 
         selector: `${config.elementName}-${idx}`,
-        factory: (el) => new config.component(el, config.array[idx])
+        factory: (el) => new config.component(el, configWithIndex)
       },
     )
   }

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 = {{#if template}}'npm run build'{{else}}filePath.includes('.scss') ? 'npm run build-static' : 'npm run build'{{/if}};
+    
+    exec(command, (err, stdout, stderr) => {
+      if (stdout) process.stdout.write(stdout);
+      if (stderr) process.stderr.write(stderr);
+      
+      print.boldSuccess('\n✅ Build completed!');
+      print.boldHead('\nWaiting for changes...\n');
+      
+      isBuilding = false;
+    });
+  }, 100);
+});
+
+watcher.on('ready', () => {
+  print.boldHead('\n👀 Watching for changes...\n');
+});

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/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;
-});