@nutin/cli 1.3.1 → 2.1.0

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

@@ -1,7 +1,309 @@
-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;
+    CONFIG.generateSEOFiles = false;
+    window.history.pushState({}, '', '/');
+  });
+
+  afterEach(() => {
+    if (router) {
+      router.dispose();
+      router = null;
+    }
+    CONFIG.i18n = false;
+    CONFIG.generateSEOFiles = 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('sets document.title to the view\'s viewName when generateSEOFiles is disabled', async () => {
+    CONFIG.generateSEOFiles = false;
+    CONFIG.seo = { routes: [{ path: '/', title: 'Should not be used' }] };
+
+    const home = makeView('home');
+    router = AppRouter({ '/': () => home });
+    await flushPromises();
+
+    expect(document.title).toBe('home');
+  });
+
+  it('falls back to the view\'s viewName when generateSEOFiles is enabled but no seo.json route matches', async () => {
+    CONFIG.generateSEOFiles = true;
+    CONFIG.seo = { routes: [] };
+
+    const home = makeView('home');
+    router = AppRouter({ '/': () => home });
+    await flushPromises();
+
+    expect(document.title).toBe('home');
+  });
+
+  it('sets document.title from config/seo.json when generateSEOFiles is enabled and a route matches', async () => {
+    CONFIG.generateSEOFiles = true;
+    CONFIG.seo = { routes: [{ path: '/', title: 'My App — Home' }] };
+
+    const home = makeView('home');
+    router = AppRouter({ '/': () => home });
+    await flushPromises();
+
+    expect(document.title).toBe('My App — Home');
+  });
+
+  it('sets document.title for the /404 route', async () => {
+    CONFIG.generateSEOFiles = true;
+    CONFIG.seo = { routes: [{ path: '/404', title: 'Not Found' }] };
+
+    const home = makeView('home');
+    const notFound = makeView('not-found');
+    router = AppRouter({ '/': () => home, '/404': () => notFound });
+    await flushPromises();
+
+    await router.navigate('/nope');
+
+    expect(document.title).toBe('Not Found');
+  });
+
+  it('resolves a per-language title when i18n is enabled', async () => {
+    CONFIG.i18n = true;
+    CONFIG.generateSEOFiles = true;
+    CONFIG.seo = { routes: [{ path: '/', title: { en: 'Home', fr: 'Accueil' } }] };
+    I18nService['_LANGUAGES'] = ['en', 'fr'];
+    I18nService['_currentLanguage'] = 'fr';
+
+    const home = makeView('home');
+    router = AppRouter({ '/': () => home });
+    await flushPromises();
+
+    expect(document.title).toBe('Accueil');
+
+    I18nService['_currentLanguage'] = 'en';
+  });
+
+  it('falls back to the view\'s locale title when i18n is enabled and no seo.json route matches', async () => {
+    CONFIG.i18n = true;
+    I18nService['_translations'] = { home: { title: 'Accueil' } };
+
+    const home = makeView('home');
+    router = AppRouter({ '/': () => home });
+    await flushPromises();
+
+    expect(document.title).toBe('Accueil');
+
+    I18nService['_translations'] = {};
+  });
+
+  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';
@@ -14,15 +15,30 @@ export type IRouter = InstanceType<typeof Router>;
 export interface RouteMatch {
   route: RouteConfig;
   params: Record<string, string>;
+  pattern: 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> {
@@ -54,12 +70,13 @@ class Router {
     this._currentView = await ViewRenderManager.transitionOutCurrentView(this._currentView);
     this._currentParams = routeMatch.params;
     this._currentView = ViewRenderManager.renderNewView(
-      guardResult.viewConstructor!, 
+      guardResult.viewConstructor!,
       routeMatch.params
     );
-    
-    NavigationManager.updateMetaContent(this._currentView);
+
+    NavigationManager.updateDocumentTitle(this._currentView, routeMatch.pattern);
     NavigationManager.updateHistory(normalizedPath, currentPath, pushState);
+    window.scrollTo({ top: 0 });
   }
 
   public getCurrentParams(): Record<string, string> {
@@ -71,12 +88,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);
   }
 
@@ -90,7 +124,7 @@ class Router {
     for (const [pattern, routeConfig] of Object.entries(this.routes)) {
       const match = NavigationManager.matchPattern(pattern, path);
       if (match) {
-        return { route: routeConfig, params: match };
+        return { route: routeConfig, params: match, pattern };
       }
     }
     return null;
@@ -113,7 +147,8 @@ class Router {
     this._currentView = await ViewRenderManager.transitionOutCurrentView(this._currentView);
     this._currentParams = {};
     this._currentView = ViewRenderManager.renderNewView(notFoundConstructor, {});
-    
+
+    NavigationManager.updateDocumentTitle(this._currentView, '/404');
     NavigationManager.updateHistory(normalizedPath, currentPath, pushState);
   }
 
@@ -141,4 +176,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;
 }

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

@@ -1,86 +1 @@
-/* 
-	Variables used in libs (snackbar, popover){{#if stylinNutin}} and utility classes{{/if}}
-	Adapt to customize
-*/
-
-// colours (RGB)
-$background-color: rgb(255 255 255); // WHITE
-$text-color: rgb(0 0 0); // BLACK
-$primary-color: rgb(0 0 0); // BLACK
-$secondary-color: rgb(0 0 0); // BLACK
-$accent-color: rgb(0 0 0); // BLACK
-
-// snackbar colours
-$snack-success: rgb(76 175 80);
-$snack-error: rgb(244 67 54);
-$snack-info: rgb(33 150 243);
-$snack-default: rgb(153 153 153);
-
-{{#if stylinNutin}}
-/* 
-	Variables used in utility classes
-	Adapt to customize
-*/
-
-// fonts
-$primary-font: Arial, Helvetica, sans-serif;
-$secondary-font: Arial, Helvetica, sans-serif;
-
-// font sizes
-$font-sizes: (
-	smallest: 0.75rem,    // 12px
-	small: 0.875rem,      // 14px
-	medium: 1rem,         // 16px (base)
-	large: 1.5rem,       // 24px
-	largest: 2rem,      // 32px
-);
-
-// spacing (margin / padding / gap)
-$spacings: (
-	smallest: 0.25rem,   // 4px
-	small: 0.5rem,       // 8px
-	medium: 1rem,        // 16px
-	large: 1.5rem,       // 24px
-	largest: 2rem,       // 32px
-);
-
-// border radius
-$border-radius: (
-	small: 2px,
-	medium: 4px,
-	large: 8px,
-	pill: 9999px,
-);
-
-// box sizes
-$box-sizes: (
-	small: 32px,
-	medium: 64px,
-	large: 128px,
-	largest: 256px,
-);
-
-// shadows
-$shadows: (
-	small: 0 1px 2px rgba(0, 0, 0, 0.05),
-	medium: 0 4px 6px rgba(0, 0, 0, 0.1),
-	large: 0 10px 15px rgba(0, 0, 0, 0.15),
-);
-
-// breakpoints
-$breakpoints: (
-	small: 576px,
-	medium: 768px,
-	large: 992px,
-	largest: 1201px,
-);
-
-// animations
-// transition Duration
-$transitions: (
-	fast: 0.2s,
-	normal: 0.3s,
-	slow: 0.5s,
-);
-
-{{/if}}
+// variables

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

@@ -1,19 +1,2 @@
-// Libraries styles (snackbar, popover){{#if transition}}, view transition styles{{/if}}.
-@use "core";
-
-{{#if stylinNutin}}
-// built-in classes
-@use "utilities";
-
-{{/if}}
-// global styles
+// CSS reset & global styles
 @use "styles";
-
-{{#if stylinNutin}}
-// custom classes
-@use "custom-classes";
-// components styles
-@use "components";
-// views styles
-@use "views";
-{{/if}}