@nutin/cli 1.3.1 → 2.0.0

package/templates/base/src/core/services/router/helpers/view-render-manager.helper.test.js.hbs

@@ -26,24 +26,11 @@ describe('ViewRenderManager', () => {
         return el;
       },
       destroy: () => {},
+      onEnter: () => {},
+      onExit: () => {},
     };
   };
 
-{{#if animation}}
-  it('should add exit class and destroy current view on transition out', async () => {
-    const view = mockView();
-    const el = view.render();
-    container.appendChild(el);
-
-    // Spy on destroy
-    const spy = spyOn(view, 'destroy');
-
-    await ViewRenderManager.transitionOutCurrentView(view);
-
-    expect(spy).toHaveBeenCalled();
-  });
-
-{{/if}}
   it('should do nothing if no current view is passed to transitionOutCurrentView', async () => {
     const result = await ViewRenderManager.transitionOutCurrentView(null);
     expect(result).toBe(null);
@@ -51,7 +38,8 @@ describe('ViewRenderManager', () => {
 
   it('should emit view-unmount event on transition out', async () => {
     const emitted = [];
-    AppEventBus.emit = (event, data) => emitted.push({ event, data });
+    const emitSpy = spyOn(AppEventBus, 'emit');
+    emitSpy.andCallFake((event, data) => emitted.push({ event, data }));
 
     const view = mockView('SettingsView');
     const el = view.render();
@@ -59,6 +47,84 @@ describe('ViewRenderManager', () => {
 
     await ViewRenderManager.transitionOutCurrentView(view);
 
-    expect(JSON.stringify(emitted)).toContain(JSON.stringify({ event: 'view-unmount', data: 'SettingsView' }));
+    expect(JSON.stringify(emitted)).toContain(JSON.stringify({ event: 'view-unmount', data: { viewName: 'SettingsView' } }));
+    emitSpy.restore();
+  });
+
+  it('should call destroy() and onExit() on the current view when transitioning out', async () => {
+    let destroyed = false;
+    let exited = false;
+    const view = mockView('SettingsView');
+    view.destroy = () => { destroyed = true; };
+    view.onExit = () => { exited = true; };
+
+    await ViewRenderManager.transitionOutCurrentView(view);
+
+    expect(destroyed).toBe(true);
+    expect(exited).toBe(true);
+  });
+
+  it('should set route params, render, call onEnter and emit view-mount when rendering a new view', () => {
+    const emitted = [];
+    const emitSpy = spyOn(AppEventBus, 'emit');
+    emitSpy.andCallFake((event, data) => emitted.push({ event, data }));
+
+    const calls = [];
+    const viewElement = document.createElement('div');
+    const view = {
+      viewName: 'HomeView',
+      getElement: () => viewElement,
+      setRouteParams: (params) => calls.push(['setRouteParams', params]),
+      render: () => { calls.push(['render']); return viewElement; },
+      onEnter: () => calls.push(['onEnter']),
+    };
+
+    ViewRenderManager.renderNewView(() => view, { id: '42' });
+
+    expect(calls).toEqual([
+      ['setRouteParams', { id: '42' }],
+      ['render'],
+      ['onEnter'],
+    ]);
+    expect(JSON.stringify(emitted)).toContain(JSON.stringify({ event: 'view-mount', data: { viewName: 'HomeView' } }));
+    emitSpy.restore();
+  });
+
+  it('should not attempt to clear stale content when the new view has no parent element yet', () => {
+    const viewElement = document.createElement('div');
+    // Note: viewElement is intentionally never attached to the container.
+    const view = {
+      viewName: 'HomeView',
+      getElement: () => viewElement,
+      setRouteParams: () => {},
+      render: () => viewElement,
+      onEnter: () => {},
+    };
+
+    expect(() => ViewRenderManager.renderNewView(() => view)).not.toThrow();
+  });
+
+  it('should clear stale mount content before rendering the new view', () => {
+    const stale = document.createElement('div');
+    stale.className = 'stale-seo-content';
+    container.appendChild(stale);
+
+    const viewElement = document.createElement('div');
+    viewElement.className = 'mock-view';
+    container.appendChild(viewElement);
+
+    const view = {
+      viewName: 'HomeView',
+      getElement: () => viewElement,
+      setRouteParams: () => {},
+      render: () => viewElement,
+      onEnter: () => {},
+    };
+
+    ViewRenderManager.renderNewView(() => view);
+
+    expect(container.children.length).toBe(1);
+    expect(container.contains(stale)).toBe(false);
+    expect(container.contains(viewElement)).toBe(true);
   });
 });

package/templates/base/src/core/services/router/helpers/view-render-manager.helper.ts.hbs

@@ -1,35 +1,14 @@
-import { View, AppEventBus } from '../../../index.js';
+import { View, Lifecycle } from '../../../index.js';
 
 /**
- * handles all view rendering{{#if transition}} and transition animation logic{{/if}}.
+ * handles all view rendering.
  */
 export class ViewRenderManager {
-  {{#if transition}}
-  public static renderAnimatedView(view: View): void {
-    const container = document.getElementById('app');
-    const el = view.render();
-    el.classList.add('app-view-transition');
-    container?.appendChild(el);
-    
-    requestAnimationFrame(() => {
-      el.classList.add('enter-active');
-    });
-  }
-
-  {{/if}}
   public static async transitionOutCurrentView(currentView: View | null): Promise<null> {
     if (!currentView) return null;
-    {{#if transition}}
-    const container = document.getElementById('app');
-    const el = container?.firstElementChild as HTMLElement;
-
-    if (el) {
-      el.classList.add('exit-active');
-      await this.delay(300); // match transition duration in _libs.scss
-    }
-    {{/if}}
     currentView.destroy();
-    this.emitEvent('view-unmount', currentView.viewName);
+    currentView.onExit();
+    Lifecycle.viewUnmount(currentView.viewName);
     return null;
   }
 
@@ -38,28 +17,25 @@ export class ViewRenderManager {
     params: Record<string, string> = {}
   ): View {
     const view = viewConstructor();
+    ViewRenderManager.clearStaleMountContent(view);
 
     // Set route parameters before rendering
     view.setRouteParams(params);
 
-    {{#if transition}}
-    this.renderAnimatedView(view);
-
-    {{else}}
     view.render();
+    view.onEnter();
 
-    {{/if}}
-    this.emitEvent('view-mount', view.viewName);
+    Lifecycle.viewMount(view.viewName);
     return view;
   }
 
-  private static emitEvent(event: EventKey, viewName: string): void {
-    AppEventBus.emit(event, viewName);
-  }
-  {{#if transition}}
+  private static clearStaleMountContent(view: View): void {
+    const viewElement = view.getElement();
+    const container = viewElement.parentElement;
+    if (!container) return;
 
-  private static delay(ms: number): Promise<void> {
-    return new Promise(res => setTimeout(res, ms));
+    Array.from(container.childNodes).forEach((node) => {
+      if (node !== viewElement) node.remove();
+    });
   }
-  {{/if}}
 }

package/templates/base/src/core/services/router/router.test.js.hbs

@@ -1,7 +1,231 @@
-import { AppRouter } from '#root/dist/src/core/services/index.js'
+import { AppRouter, Navigation, I18nService } from '#root/dist/src/core/services/index.js';
+import { CONFIG } from '#root/dist/src/core/config.js';
+
+function makeView(name) {
+  const calls = [];
+  const el = document.createElement('div');
+  return {
+    viewName: name,
+    calls,
+    getElement: () => el,
+    setRouteParams: (params) => calls.push(['setRouteParams', params]),
+    render: () => { calls.push(['render']); return el; },
+    onEnter: () => calls.push(['onEnter']),
+    onExit: () => calls.push(['onExit']),
+    destroy: () => calls.push(['destroy']),
+  };
+}
 
 describe('Router', () => {
+  let router = null;
+
+  beforeEach(() => {
+    CONFIG.i18n = false;
+    window.history.pushState({}, '', '/');
+  });
+
+  afterEach(() => {
+    if (router) {
+      router.dispose();
+      router = null;
+    }
+    CONFIG.i18n = false;
+    window.history.pushState({}, '', '/');
+  });
+
   it('should be defined', () => {
     expect(AppRouter).toBeDefined();
   });
-})
+
+  it('AppRouter returns the same singleton instance on repeated getInstance() calls', async () => {
+    const home = makeView('home');
+    router = AppRouter({ '/': () => home });
+    await flushPromises();
+
+    const again = router.constructor.getInstance();
+    expect(again).toBe(router);
+  });
+
+  it('navigate() matches a route and renders its view (via the initial construction-time navigate)', async () => {
+    const home = makeView('home');
+    router = AppRouter({ '/': () => home });
+    await flushPromises();
+
+    expect(home.calls).toEqual([
+      ['setRouteParams', {}],
+      ['render'],
+      ['onEnter'],
+    ]);
+  });
+
+  it('navigate() passes matched route params to the rendered view', async () => {
+    const home = makeView('home');
+    const userView = makeView('user');
+    router = AppRouter({ '/': () => home, '/users/:id': () => userView });
+    await flushPromises();
+
+    await router.navigate('/users/42');
+
+    expect(userView.calls[0]).toEqual(['setRouteParams', { id: '42' }]);
+    expect(router.getCurrentParams()).toEqual({ id: '42' });
+    expect(router.getParam('id')).toBe('42');
+  });
+
+  it('navigate() renders the /404 route when no pattern matches', async () => {
+    const home = makeView('home');
+    const notFound = makeView('not-found');
+    router = AppRouter({ '/': () => home, '/404': () => notFound });
+    await flushPromises();
+
+    await router.navigate('/nope');
+
+    expect(notFound.calls.some(c => c[0] === 'render')).toBe(true);
+  });
+
+  it('navigate() logs an error and renders nothing when no route matches and there is no /404 route', async () => {
+    const home = makeView('home');
+    router = AppRouter({ '/': () => home });
+    await flushPromises();
+
+    const errSpy = spyOn(console, 'error');
+    errSpy.andCallFake(() => {});
+
+    await router.navigate('/nope');
+
+    expect(errSpy.callCount).toBe(1);
+    errSpy.restore();
+  });
+
+  it('navigate() blocks navigation when a guard returns false', async () => {
+    const home = makeView('home');
+    const secret = makeView('secret');
+    router = AppRouter({
+      '/': () => home,
+      '/secret': { view: () => secret, guards: [() => false] },
+    });
+    await flushPromises();
+
+    await router.navigate('/secret');
+
+    expect(secret.calls.length).toBe(0);
+  });
+
+  it('navigate() redirects when a guard returns a redirect path', async () => {
+    const home = makeView('home');
+    const login = makeView('login');
+    const secret = makeView('secret');
+    router = AppRouter({
+      '/': () => home,
+      '/login': () => login,
+      '/secret': { view: () => secret, guards: [() => '/login'] },
+    });
+    await flushPromises();
+
+    await router.navigate('/secret');
+
+    expect(login.calls.some(c => c[0] === 'render')).toBe(true);
+    expect(secret.calls.length).toBe(0);
+  });
+
+  it('navigate() renders the view when all guards pass', async () => {
+    const home = makeView('home');
+    const dashboard = makeView('dashboard');
+    router = AppRouter({
+      '/': () => home,
+      '/dashboard': { view: () => dashboard, guards: [() => true] },
+    });
+    await flushPromises();
+
+    await router.navigate('/dashboard');
+
+    expect(dashboard.calls.some(c => c[0] === 'render')).toBe(true);
+  });
+
+  it('reload() re-navigates to the current path without pushing a new history entry', async () => {
+    const home = makeView('home');
+    router = AppRouter({ '/': () => home });
+    await flushPromises();
+    home.calls.length = 0;
+
+    await router.reload();
+
+    expect(home.calls.some(c => c[0] === 'render')).toBe(true);
+  });
+
+  it('responds to a popstate event by re-navigating to the new current path', async () => {
+    const home = makeView('home');
+    const about = makeView('about');
+    router = AppRouter({ '/': () => home, '/about': () => about });
+    await flushPromises();
+
+    window.history.pushState({}, '', '/about');
+    window.dispatchEvent(new window.PopStateEvent('popstate'));
+    await flushPromises();
+
+    expect(about.calls.some(c => c[0] === 'render')).toBe(true);
+  });
+
+  it('switches the language on popstate when the URL locale differs from the current one', async () => {
+    CONFIG.i18n = true;
+    I18nService['_LANGUAGES'] = ['en', 'fr'];
+    I18nService['_currentLanguage'] = 'en';
+
+    const home = makeView('home');
+    router = AppRouter({ '/': () => home });
+    await flushPromises();
+
+    const setLangSpy = spyOn(I18nService, 'setCurrentLanguage');
+    setLangSpy.andCallFake(async (lang) => { I18nService['_currentLanguage'] = lang; });
+
+    window.history.pushState({}, '', '/fr');
+    window.dispatchEvent(new window.PopStateEvent('popstate'));
+    await flushPromises();
+
+    expect(setLangSpy).toHaveBeenCalledWith('fr');
+
+    setLangSpy.restore();
+    I18nService['_currentLanguage'] = 'en';
+  });
+
+  it('wires Navigation.navigateTo() through to router.navigate()', async () => {
+    const home = makeView('home');
+    const about = makeView('about');
+    router = AppRouter({ '/': () => home, '/about': () => about });
+    await flushPromises();
+
+    Navigation.navigateTo('/about');
+    await flushPromises();
+
+    expect(about.calls.some(c => c[0] === 'render')).toBe(true);
+  });
+
+  it('wires Navigation.reload() through to router.reload()', async () => {
+    const home = makeView('home');
+    router = AppRouter({ '/': () => home });
+    await flushPromises();
+    home.calls.length = 0;
+
+    Navigation.reload();
+    await flushPromises();
+
+    expect(home.calls.some(c => c[0] === 'render')).toBe(true);
+  });
+
+  it('removeEventListeners() stops the router from responding to further navigate/popstate events', async () => {
+    const home = makeView('home');
+    const about = makeView('about');
+    router = AppRouter({ '/': () => home, '/about': () => about });
+    await flushPromises();
+
+    router.removeEventListeners();
+
+    Navigation.navigateTo('/about');
+    await flushPromises();
+    expect(about.calls.length).toBe(0);
+
+    window.history.pushState({}, '', '/about');
+    window.dispatchEvent(new window.PopStateEvent('popstate'));
+    await flushPromises();
+    expect(about.calls.length).toBe(0);
+  });
+});

package/templates/base/src/core/services/router/router.ts.hbs

@@ -1,4 +1,5 @@
-import { View, AppEventBus } from '../../index.js';
+import { View, Navigation, Service, I18nService, AppEventBus } from '../../index.js';
+import { Language } from '../i18n/languages.js';
 import { Routes, RouteConfig, RouteGuardsManager, GuardResult } from './helpers/route-guard-manager.helper.js';
 import { ViewRenderManager } from './helpers/view-render-manager.helper.js';
 import { NavigationManager } from './helpers/navigation-manager.helper.js';
@@ -16,13 +17,27 @@ export interface RouteMatch {
   params: Record<string, string>;
 }
 
-class Router {
+class Router extends Service<Router> {
   private _currentView: View | null = null;
   private _currentParams: Record<string, string> = {};
+  private onPopState = () => this.handlePopState();
+  private onNavigate = (data: { path: string }) => this.navigate(data.path);
+  private onReload = () => this.reload();
+  private _busSubscriptions: Array<() => void> = [];
 
   constructor(private routes: Routes) {
+    super();
     this.initializeEventListeners();
     this.navigate(NavigationManager.getCurrentPath());
+    this.registerCleanup(this.removeEventListeners);
+  }
+
+  public removeEventListeners(): void {
+    this._busSubscriptions.forEach((callback) => {
+      callback();
+    });
+    this._busSubscriptions = [];
+    window.removeEventListener('popstate', this.onPopState);
   }
 
   public async reload(): Promise<void> {
@@ -58,8 +73,8 @@ class Router {
       routeMatch.params
     );
     
-    NavigationManager.updateMetaContent(this._currentView);
     NavigationManager.updateHistory(normalizedPath, currentPath, pushState);
+    window.scrollTo({ top: 0 });
   }
 
   public getCurrentParams(): Record<string, string> {
@@ -71,12 +86,29 @@ class Router {
   }
 
   private initializeEventListeners(): void {
-    window.addEventListener('popstate', () => this.handlePopState());
-    AppEventBus.subscribe('navigate', (path: string) => this.navigate(path));
-    AppEventBus.subscribe('reload', () => this.reload());
+    this.initializeNavigationEvents();
+    this.initializeI18nEvents();
+  }
+
+  private initializeNavigationEvents(): void {
+    window.addEventListener('popstate', this.onPopState);
+    const unsubOnNav = Navigation.onNavigate(this.onNavigate);
+    const unsubOnReload = Navigation.onReload(this.onReload);
+    this._busSubscriptions.push(unsubOnNav, unsubOnReload); 
   }
 
-  private handlePopState(): void {
+  private initializeI18nEvents(): void {
+    const onLangChanged = () => NavigationManager.updateLocaleInUrl();
+    AppEventBus.subscribe('language-changed', onLangChanged);
+    const unsubOnLang = () => AppEventBus.off('language-changed', onLangChanged);
+    this._busSubscriptions.push(unsubOnLang);    
+  }
+
+  private async handlePopState(): Promise<void> {
+    const newLocale = NavigationManager.getCurrentLocale();
+    if (newLocale && newLocale !== I18nService.currentLanguage) {
+      await I18nService.setCurrentLanguage(newLocale as Language);
+    }
     this.navigate(NavigationManager.getCurrentPath(), false);
   }
 
@@ -141,4 +173,4 @@ class Router {
   }
 }
 
-export const AppRouter = (routes: Routes) => new Router(routes);
+export const AppRouter = (routes: Routes) => Router.getInstance(routes);

package/templates/base/src/index.html.hbs

@@ -1,14 +1,10 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="UTF-8">
-    <meta name="description" content="{{projectName}}">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="/main.css">
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-    <title>{{projectName}}</title>
   </head>
   <body>
     <main id="app"></main>
   </body>
-</html>
+</html>

package/templates/base/src/styles/_styles.scss.hbs

@@ -1,54 +1,113 @@
 @use "variables" as *;
-{{#if stylinNutin}}
-@use "sass:map";
-@use "mixins";
-{{/if}}
 
-// css reset
-html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button, input, textarea {
+/* ===========
+   CSS Reset
+   =========== */
+
+/* Box sizing */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Remove default spacing */
+
+* {
   margin: 0;
   padding: 0;
-  border: 0;
+}
+
+/* Document */
+
+html {
   font-size: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  min-height: 100vh;
   font: inherit;
-  vertical-align: baseline;
+  line-height: 1.5;
 }
 
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
+/* Media */
+
+img,
+picture,
+svg,
+canvas,
+video {
+  display: block;
+  max-width: 100%;
+}
+
+/* Forms */
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+  color: inherit;
+}
+
+button {
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+textarea {
+  resize: vertical;
+}
+
+/* Tables */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* Lists */
+
+ul,
+ol {
+  list-style: none;
+}
+
+/* Links */
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+/* Quotes */
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
+  content: "";
+}
+
+/* Miscellaneous */
+
+hr {
+  border: none;
+}
+
+fieldset {
+  border: none;
 }
 
-// Global styles
-:root {
-	body {
-		background-color: $background-color;
-	  color: $text-color;
-		min-height: 100vh;
-		cursor: default;
-	  {{#if stylinNutin}}
-	  line-height: 1.6;
-		font-family: $primary-font;
-	  font-size: map.get($font-sizes, medium);
-		{{else}}
-		font-family: Arial, Helvetica, sans-serif;
-		font-size: 1rem;
-	  {{/if}}
-	}
-
-{{#if stylinNutin}}
-	h1 {
-		font-size: map.get($font-sizes, largest);
-		font-family: $secondary-font;
-	}
-
-	a, button {
-		cursor: pointer;
-	}
-
-	a {
-		text-decoration: none;
-	}
-{{/if}}
+:where([hidden]) {
+  display: none !important;
 }