@lisergia/core 25.0.0 → 26.0.0

package/dist/App.d.ts

@@ -1,4 +1,3 @@
-import { type IArrayDidChange, type IValueDidChange } from 'mobx';
 import { Component, type ComponentParameters } from './Component.js';
 import { Links } from './Links.js';
 import type { Page, PageParameters } from './Page.js';
@@ -26,7 +25,6 @@ export declare class ApplicationManager extends Component {
     initComponents(components: Array<ApplicationComponentData>): void;
     addComponent(component: Component): void;
     removeComponent(component: Component): void;
-    onComponentChange(_event: IArrayDidChange<Component>): void;
     datasets: Array<ApplicationComponentDatasetData>;
     initDatasets(datasets: Array<ApplicationComponentDatasetData>): void;
     pages: Map<string, new (args: PageParameters) => Page>;
@@ -41,9 +39,10 @@ export declare class ApplicationManager extends Component {
     destroyPage(): void;
     route: string;
     routeHistory: Array<string>;
-    routeRequestEnabled: boolean;
-    routePushState: boolean;
-    onRouteChange({ newValue }: IValueDidChange<string>): void;
+    setRoute(route: string): boolean;
+    navigate(href: string, { pushState }?: {
+        pushState?: boolean;
+    }): void;
     onRouteChangeRequest({ href, pushState }: {
         href: string;
         pushState: boolean;
@@ -60,6 +59,7 @@ export declare class ApplicationManager extends Component {
     }): Promise<void>;
     onPopState(): void;
     get scroll(): number;
+    onResize(): void;
     addEventListeners(): void;
     removeEventListeners(): void;
 }

package/dist/App.js

@@ -1,4 +1,3 @@
-import { autorun, computed, makeObservable, observable, observe, } from 'mobx';
 import { Component } from './Component.js';
 import { Links } from './Links.js';
 export class ApplicationManager extends Component {
@@ -8,28 +7,6 @@ export class ApplicationManager extends Component {
             autoListeners: false,
             element: '.app',
         });
-        makeObservable(this, {
-            // Application DOM Element.
-            element: observable,
-            // Components.
-            canvas: observable,
-            components: observable,
-            transition: observable,
-            // Page Information.
-            currentPage: observable,
-            nextPage: observable,
-            // Route Information.
-            route: observable,
-            routeHistory: observable,
-            // Template Information.
-            template: observable,
-            // Page Scroll.
-            scroll: computed,
-        });
-        observe(this.components, this.onComponentChange);
-        observe(this, 'route', this.onRouteChange);
-        autorun(this.onTitleUpdate);
-        autorun(this.onTemplateUpdate);
         this.addEventListeners();
     }
     onTitleUpdate() {
@@ -71,7 +48,6 @@ export class ApplicationManager extends Component {
             this.components.splice(index, 1);
         }
     }
-    onComponentChange(_event) { }
     //
     // Datasets.
     //
@@ -131,6 +107,7 @@ export class ApplicationManager extends Component {
         });
         this.currentPage = page;
         this.currentPage.create();
+        this.fire('page', page);
     }
     destroyPage() {
         if (this.currentPage) {
@@ -142,21 +119,27 @@ export class ApplicationManager extends Component {
     //
     route = `${window.location.pathname}${window.location.search}${window.location.hash}`;
     routeHistory = [this.route];
-    routeRequestEnabled = true;
-    routePushState = true;
-    onRouteChange({ newValue }) {
-        if (!this.routeRequestEnabled) {
-            return;
+    setRoute(route) {
+        if (route === this.route) {
+            return false;
         }
-        const url = new URL(newValue, window.location.href);
+        this.route = route;
+        this.fire('route', route);
+        return true;
+    }
+    navigate(href, { pushState = true } = {}) {
+        const url = new URL(href, window.location.href);
         if (url.origin !== window.location.origin) {
             window.location.assign(url.href);
             return;
         }
-        const href = `${url.pathname}${url.search}${url.hash}`;
+        const route = `${url.pathname}${url.search}${url.hash}`;
+        if (!this.setRoute(route)) {
+            return;
+        }
         void this.onRouteChangeRequest({
-            href,
-            pushState: this.routePushState,
+            href: route,
+            pushState,
         });
     }
     async onRouteChangeRequest({ href, pushState = true }) {
@@ -201,6 +184,8 @@ export class ApplicationManager extends Component {
             template,
             title: dom.title || document.title,
         };
+        this.onTitleUpdate();
+        this.onTemplateUpdate();
         if (this.transition) {
             await this.transition.onTransition?.(this);
         }
@@ -222,15 +207,12 @@ export class ApplicationManager extends Component {
         const route = `${document.location.pathname}${document.location.search}${document.location.hash}`;
         const currentUrl = new URL(this.route, window.location.origin);
         const nextUrl = new URL(route, window.location.origin);
+        // Hash-only change: update the route without requesting a new page.
         if (currentUrl.pathname === nextUrl.pathname && currentUrl.search === nextUrl.search) {
-            this.routeRequestEnabled = false;
-            this.route = route;
-            this.routeRequestEnabled = true;
+            this.setRoute(route);
             return;
         }
-        this.routePushState = false;
-        this.route = route;
-        this.routePushState = true;
+        this.navigate(route, { pushState: false });
     }
     //
     // Scroll.
@@ -239,13 +221,21 @@ export class ApplicationManager extends Component {
         return this.currentPage.scroll ?? 0;
     }
     //
+    // Resize.
+    //
+    onResize() {
+        this.fire('resize');
+    }
+    //
     // Listeners.
     //
     addEventListeners() {
         window.addEventListener('popstate', this.onPopState);
+        window.addEventListener('resize', this.onResize);
     }
     removeEventListeners() {
         window.removeEventListener('popstate', this.onPopState);
+        window.removeEventListener('resize', this.onResize);
     }
 }
 export const Application = new ApplicationManager();

package/dist/Component.d.ts

@@ -40,5 +40,7 @@ export declare class Component extends EventEmitter {
     destroyDisposers(): void;
     addEventListeners(): void;
     removeEventListeners(): void;
+    onResize(): void;
+    onScroll(_scroll: number): void;
     destroy(): void;
 }

package/dist/Component.js

@@ -19,6 +19,14 @@ export class Component extends EventEmitter {
         this.selector = element;
         this.selectors = elements;
         this.id = id;
+        if (this.application) {
+            this.application.on('scroll', this.onScroll);
+            this.application.on('resize', this.onResize);
+            this.addDisposer(() => {
+                this.application?.off('scroll', this.onScroll);
+                this.application?.off('resize', this.onResize);
+            });
+        }
         if (this.autoMount) {
             this.create();
         }
@@ -98,6 +106,14 @@ export class Component extends EventEmitter {
     }
     addEventListeners() { }
     removeEventListeners() { }
+    //
+    // Hooks.
+    //
+    // Called whenever the application page scrolls or resizes. Wired automatically
+    // when the component receives an `application`; override in subclasses.
+    //
+    onResize() { }
+    onScroll(_scroll) { }
     destroy() {
         this.destroyDisposers();
         super.destroy();

package/dist/Links.d.ts

@@ -8,4 +8,5 @@ export declare class Links extends EventEmitter {
     addEventListeners(): void;
     onLinkClick(href: string): void;
     refresh(): void;
+    destroy(): void;
 }

package/dist/Links.js

@@ -1,11 +1,11 @@
-import { reaction } from 'mobx';
 import { EventEmitter } from './EventEmitter.js';
 import { Link } from './Link.js';
 export class Links extends EventEmitter {
     constructor(application) {
         super();
         this.application = application;
-        reaction(() => application.currentPage, () => this.refresh(), { fireImmediately: true });
+        this.application.on('page', this.refresh);
+        this.refresh();
     }
     addEventListeners() {
         this.links?.forEach((link) => {
@@ -21,10 +21,16 @@ export class Links extends EventEmitter {
         });
     }
     onLinkClick(href) {
-        const url = new URL(href, window.location.href);
-        this.application.route = `${url.pathname}${url.search}${url.hash}`;
+        this.application.navigate(href);
     }
     refresh() {
         this.addEventListeners();
     }
+    destroy() {
+        this.application.off('page', this.refresh);
+        this.links?.forEach((link) => {
+            link.destroy();
+        });
+        super.destroy();
+    }
 }

package/dist/Page.js

@@ -1,5 +1,4 @@
 import Lenis from 'lenis';
-import { makeObservable, observable } from 'mobx';
 import Tempus from 'tempus';
 import { Component } from './Component.js';
 export class Page extends Component {
@@ -19,12 +18,6 @@ export class Page extends Component {
         this.datasets = datasets;
         this.scrollEnabled = scrollEnabled;
         this.scrollOptions = scrollOptions;
-        makeObservable(this, {
-            element: observable,
-            elements: observable,
-            components: observable,
-            scroll: observable,
-        });
     }
     create() {
         super.create();
@@ -98,15 +91,17 @@ export class Page extends Component {
     //
     onResize() {
         this.lenis?.resize();
+        this.application.fire('resize');
     }
     onRAF({ time }) {
         this.lenis?.raf(time);
     }
     onScroll(scroll) {
         this.scroll = scroll;
+        this.application.fire('scroll', scroll);
     }
     onScrollFallback() {
-        this.scroll = this.element.scrollTop;
+        this.onScroll(this.element.scrollTop);
         this.emitter.emit('scroll', { scroll: this.scroll });
     }
     //

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lisergia/core",
-  "version": "25.0.0",
+  "version": "26.0.0",
   "files": [
     "dist"
   ],
@@ -12,10 +12,9 @@
     "dev": "tsc --build --watch"
   },
   "dependencies": {
-    "@lisergia/config-tsconfig": "25.0.0",
+    "@lisergia/config-tsconfig": "26.0.0",
     "auto-bind": "^5.0.1",
     "lenis": "^1.3.26",
-    "mobx": "^7.0.3",
     "nanoevents": "^10.0.0",
     "tempus": "^1.0.0"
   }