@nutin/cli 2.1.1 → 3.0.0

package/templates/base/GETTING_STARTED.md.hbs

@@ -27,9 +27,13 @@ src/
 
 tools/    -- build, development, generator and testing
 
-nutin.config.js   -- features and configuration
+nutin.config.js   -- options and configuration
 ```
 
+* Views **orchestrate application flow**
+* Components **encapsulate UI behavior**
+* Services **handle application concerns** through shared instances
+
 ### Imports
 
 - Imports use **relative paths** and end with `.js` extension.
@@ -39,6 +43,9 @@ import { Foo } from 'relative/path/to/foo.js';
 ```
 
 - Use Nutin's code barrel file (`src/core/index.js`) to import Nutin's modules.
+{{#if (eq lang "ts")}}
+- Nutin's types (`Nutin.ComponentConfig`, `Nutin.Routes`, `Nutin.Template`, …) live in the global `Nutin` namespace declared in `src/core/internals.d.ts`: no import needed.
+{{/if}}
 
 ## How do I run my app?
 
@@ -46,6 +53,7 @@ import { Foo } from 'relative/path/to/foo.js';
 # Development
 {{packageManager}} run serve # build and serve
 {{packageManager}} run dev   # build and serve with live reload
+{{packageManager}} run dev -- --port 3000 # serve on another port (default 9090; PORT=3000 also works)
 
 # Build
 {{packageManager}} run build      # build the application
@@ -60,13 +68,10 @@ Elements are generated in `src/app/<path>/`, so you choose the project structure
 {{packageManager}} run generate <component|view|service> PATH/TO/ELEMENT_NAME
 
 # Examples
-{{packageManager}} run generate component components/my-component # Target dir: src/app/components/my-component/
-{{packageManager}} run generate view user/user-view                # Target dir: src/app/user/user-view/
-{{packageManager}} run generate service user/user-service          # Target dir: src/app/user/user-service/
+{{packageManager}} run generate component components/hello-world # generates src/app/components/hello-world/hello-world.component.ts|html|scss
+{{packageManager}} run generate view user/dashboard # generates src/app/user/dashboard/dashboard.view.ts|html|scss
 ```
 
-Import generated elements by their file path (e.g. `./views/home/home.view.js`). 
-
 ## What does a typical component look like?
 
 ```bash
@@ -78,8 +83,8 @@ components/
 ```
 
 ```ts
-// The builder injects the component's .html template here.
-const templateFn = (product: Product) => `__TEMPLATE_PLACEHOLDER__`;
+// The component's .html template is injected here.
+const templateFn = (product: Product) => html`__TEMPLATE_PLACEHOLDER__`;
 
 export class ProductCardComponent extends Component {
   private _product: Product;
@@ -90,7 +95,7 @@ export class ProductCardComponent extends Component {
   }
 
   // Declares children mounted into the data-component / data-catalog placeholders below.
-  public registerChildren(): ComponentConfig[] {
+  public registerChildren(): Nutin.ComponentConfig[] {
     // Single child, matched to <div data-component="product-details">
     const detailsComponent = {
       selector: `product-details`,
@@ -123,7 +128,8 @@ export class ProductCardComponent extends Component {
 
 ```html
 <div
-  data-event="click:_goToProductPage:${product.id}"
+  data-product-id="${product.id}"
+  data-event="click:_goToProductPage:@dataset:productId"
   class="product-card"
 >
   <h2 class="product-card__name">${product.name}</h2>
@@ -150,12 +156,12 @@ Defining both an inline template and an external `.html` file, or neither, fails
 
 ### Main file
 
-`nutin.config.js` - Main Nutin configuration and tool options. See the inline comments for details.
+`nutin.config.js` - Main Nutin configuration and tool options. See the inline comments and [How do I configure Nutin?](https://www.nutin.dev/docs/options-and-features/configure-nutin) for details.
+
+This is where you can:
 
-- `tailwind`, `i18n`, `generateSEOFiles` — top-level features, `false` by default. 
-See [Options and features](https://github.com/LoisKOUNINEF/nutin/tree/main/docs/OPTIONS_AND_FEATURES.md).
-- `builder.*` — controls build behavior.
-- `testinNutin.*` — controls Nutin's built-in testing toolkit.
+- Toggle options ([Tailwind CSS](https://www.nutin.dev/docs/options-and-features/use-tailwind-css), [i18n](https://www.nutin.dev/docs/options-and-features/use-i18n), [SEO file generation](https://www.nutin.dev/docs/options-and-features/use-seo-file-generation)). 
+- Configure the builder and the built-in testing toolkit.
 
 ### Specialized files
 
@@ -174,7 +180,7 @@ See [Options and features](https://github.com/LoisKOUNINEF/nutin/tree/main/docs/
 
 You can use any testing tool you prefer for application code.
 
-This project includes [testin-nutin](https://github.com/LoisKOUNINEF/nutin/tree/main/docs/TESTING.md), Nutin's lightweight testing toolkit. Nutin itself is tested exclusively with it, and the tests are included in the generated project so you can:
+This project includes [testin-nutin](https://www.nutin.dev/docs/testing), Nutin's small testing toolkit. Nutin itself is tested exclusively with it, and the tests are included in the generated project so you can:
 - use them as executable documentation;
 - run and modify Nutin's tests when modifying its code.
 
@@ -190,13 +196,13 @@ testinNutin: {
   includeApp: true,
 }
 ```
-*Note:* TestinNutin files use root imports.
+*Note:* TestinNutin files are plain JavaScript and use root imports{{#if (eq lang "ts")}}: they test the compiled output, so they aren't type-checked{{/if}}.
 ```js
 import { MyModule } from '#root/dist/src/path/to/my-module.js';
 ```
 
 ## Go further
 
-- [Repository documentation](https://github.com/LoisKOUNINEF/nutin/tree/main/docs/API.md)
-- [First app tutorial](https://www.nutin.org/tutorial)
-- [Nutin website](https://www.nutin.org)
+- [Documentation](https://www.nutin.dev/docs)
+- [First app tutorial](https://www.nutin.dev/tutorial)
+- [Nutin website](https://www.nutin.dev)

package/templates/base/README.md.hbs

@@ -2,13 +2,16 @@
 
 ## Development
 
-- `{{packageManager}} run serve` — build and serve
-- `{{packageManager}} run dev` — build and serve with live reload
+Requires Node.js 24 or later.
+
+- `{{packageManager}} run serve`: build and serve
+- `{{packageManager}} run dev`: build and serve with live reload
+- Both serve on port 9090 by default. Pass `-- --port 3000` (or set `PORT=3000`) to change it
 
 ## Build
 
-- `{{packageManager}} run build` — build the application
-- `{{packageManager}} run build:prod` — build the application for production
+- `{{packageManager}} run build`: build the application
+- `{{packageManager}} run build:prod`: build the application for production
 
 ## Getting started
 

package/templates/base/src/app/globals.d.ts.hbs

@@ -1,4 +1,7 @@
-declare interface AppEventMap {
+declare namespace Nutin {
+  interface AppEventMap {
     // Add app-specific event types here
-    // 'event': { /* payload? */ }
-};
+    // 'task-saved': { taskId: number };  // emit('task-saved', { taskId }) — payload required
+    // 'tasks-cleared': undefined;        // emit('tasks-cleared') — no payload
+  }
+}

package/templates/base/src/app/guards.ts.hbs

@@ -1,10 +1,8 @@
-import { RouteGuard } from "../core/index.js";
-
 export const Guards = {
   /**
    * Basic example
    */
-  requireAuth: (redirectTo: string = '/login'): RouteGuard => {
+  requireAuth: (redirectTo: string = '/login'): Nutin.RouteGuard => {
     return () => {
       const isAuthenticated = !!localStorage.getItem('user_token');
       return isAuthenticated || redirectTo;

package/templates/base/src/app/main.ts.hbs

@@ -1,5 +1,4 @@
-import nutinConfig from '../../nutin.config.js';
-import { AppRouter, Service, I18nService, registerPipes } from '../core/index.js';
+import { AppRouter, initI18n, registerPipes } from '../core/index.js';
 import { appRoutes } from './routes.js';
 
 class App {
@@ -10,12 +9,6 @@ class App {
 }
 
 document.addEventListener('DOMContentLoaded', async () => {
-  if (nutinConfig.i18n) {
-    await I18nService.initTranslations();
-  }
+  await initI18n();
   new App();
 });
-
-window.addEventListener('beforeunload', async () => {
-  await Service.destroyAll();
-});

package/templates/base/src/app/routes.ts.hbs

@@ -1,8 +1,13 @@
-import { Routes } from '../core/index.js';
 import { HomeView } from './views/home/home.view.js';
 import { NotFoundView } from './views/not-found/not-found.view.js';
+{{#if markdown}}
+import { markdownRoutes } from './markdown/markdown-routes.js';
+{{/if}}
 
-export const appRoutes: Routes = {
+export const appRoutes: Nutin.Routes = {
   '/': () => new HomeView(),
+{{#if markdown}}
+  ...markdownRoutes(),
+{{/if}}
   '/404': () => new NotFoundView(),
 }

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

@@ -3,5 +3,5 @@
   <span style="font-style:italic;font-size:clamp(.6875rem,2vw,1rem);">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 style="color:#C56648;font-size:clamp(1.125rem,4vw,1.5rem);">Happy Coding 🎉</div>
-  <div style="font-size:clamp(.75rem,2vw,1rem);font-style:italic;position:fixed;bottom:0;">so lightweight it's <span style="font-weight:bold;">nutin</span>.</div>
+  <div style="font-size:clamp(.75rem,2vw,1rem);font-style:italic;position:fixed;bottom:0;padding-bottom:.2rem;">it's <span style="font-weight:bold;"><a style="text-decoration:none;color:#6C8359;" href="https://nutin.dev">nutin</a></span>.</div>
 </div>

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

@@ -1,6 +1,6 @@
-import { View } from '../../../core/index.js';
+import { View, html } from '../../../core/index.js';
 
-const template = `__TEMPLATE_PLACEHOLDER__`;
+const template = html`__TEMPLATE_PLACEHOLDER__`;
 
 export class HomeView extends View {
   constructor() {

package/templates/base/src/app/views/not-found/not-found.view.ts.hbs

@@ -1,6 +1,6 @@
-import { Navigation, View } from '../../../core/index.js';
+import { Navigation, View, html } from '../../../core/index.js';
 
-const template = `__TEMPLATE_PLACEHOLDER__`;
+const template = html`__TEMPLATE_PLACEHOLDER__`;
 
 export class NotFoundView extends View {
   constructor() {