@lisergia/core 24.0.0 → 25.0.0

package/dist/Page.js

@@ -0,0 +1,133 @@
+import Lenis from 'lenis';
+import { makeObservable, observable } from 'mobx';
+import Tempus from 'tempus';
+import { Component } from './Component.js';
+export class Page extends Component {
+    datasets = [];
+    scroll = 0;
+    scrollEnabled = true;
+    scrollOptions = {};
+    constructor({ application, classes, datasets, element, elements, scrollEnabled = true, scrollOptions = {}, }) {
+        super({
+            autoMount: false,
+            autoListeners: false,
+            classes,
+            element,
+            elements,
+        });
+        this.application = application;
+        this.datasets = datasets;
+        this.scrollEnabled = scrollEnabled;
+        this.scrollOptions = scrollOptions;
+        makeObservable(this, {
+            element: observable,
+            elements: observable,
+            components: observable,
+            scroll: observable,
+        });
+    }
+    create() {
+        super.create();
+        this.createResizeObserver();
+        this.createComponents();
+        this.createScroll();
+        this.addEventListeners();
+    }
+    createResizeObserver() {
+        this.resizeObserver = new ResizeObserver(() => {
+            this.onResize();
+        });
+        this.resizeObserver.observe(this.elements.wrapper);
+    }
+    destroyResizeObserver() {
+        this.resizeObserver.disconnect();
+    }
+    //
+    // Components.
+    //
+    components = new Set();
+    createComponents() {
+        this.datasets.forEach(({ component: Component, selector }) => {
+            const elements = this.element.querySelectorAll(selector);
+            const components = Array.from(elements).map((element) => {
+                const component = new Component({
+                    application: this.application,
+                    element: element,
+                });
+                return component;
+            });
+            components.forEach((component) => {
+                this.application.addComponent(component);
+                this.components.add(component);
+            });
+        });
+    }
+    destroyComponents() {
+        this.components.forEach((component) => {
+            this.application.removeComponent(component);
+        });
+        this.components.clear();
+    }
+    createScroll() {
+        if (!this.scrollEnabled) {
+            this.element.addEventListener('scroll', this.onScrollFallback);
+            return;
+        }
+        this.lenis = new Lenis({
+            content: this.elements.wrapper,
+            wrapper: this.element,
+            ...this.scrollOptions,
+        });
+        this.lenis.on('scroll', this.onLenisScroll);
+    }
+    onLenisScroll(event) {
+        this.onScroll(event.scroll);
+        this.emitter.emit('scroll', event);
+    }
+    destroyScroll() {
+        if (!this.scrollEnabled) {
+            this.element.removeEventListener('scroll', this.onScrollFallback);
+            return;
+        }
+        this.lenis.off('scroll', this.onLenisScroll);
+        this.lenis?.destroy();
+        this.lenis = undefined;
+    }
+    //
+    // Events.
+    //
+    onResize() {
+        this.lenis?.resize();
+    }
+    onRAF({ time }) {
+        this.lenis?.raf(time);
+    }
+    onScroll(scroll) {
+        this.scroll = scroll;
+    }
+    onScrollFallback() {
+        this.scroll = this.element.scrollTop;
+        this.emitter.emit('scroll', { scroll: this.scroll });
+    }
+    //
+    // Events.
+    //
+    addEventListeners() {
+        super.addEventListeners();
+        this.unsubscribeRaf = Tempus.add(this.onRAF);
+    }
+    removeEventListeners() {
+        super.removeEventListeners();
+        this.unsubscribeRaf?.();
+        this.unsubscribeRaf = undefined;
+    }
+    //
+    // Destroy.
+    //
+    destroy() {
+        this.destroyResizeObserver();
+        this.destroyComponents();
+        this.destroyScroll();
+        super.destroy();
+    }
+}

package/dist/index.d.ts

@@ -1,187 +1,8 @@
-import { IArrayDidChange, IValueDidChange } from 'mobx';
-import { Emitter, Unsubscribe } from 'nanoevents';
-import Lenis, { LenisOptions } from 'lenis';
-export { default as Tempus } from 'tempus';
-
-declare class EventEmitter {
-    emitter: Emitter;
-    entries: Map<Function, Unsubscribe>;
-    constructor();
-    on(event: string, callback: (...args: any) => void): void | Unsubscribe;
-    off(event: string, callback: (...args: any) => void): void;
-    fire(event: string, ...args: any[]): void;
-    destroy(): void;
-}
-
-interface ComponentClasses {
-    [key: string]: string;
-}
-interface ComponentElements {
-    [key: string]: Array<any> | Element | Array<Element> | HTMLElement | Array<HTMLElement> | NodeList | Window | null;
-}
-type ComponentSelector = string | HTMLElement;
-interface ComponentSelectors {
-    [key: string]: string | Element | Array<Element> | HTMLElement | Array<HTMLElement> | NodeList | Window;
-}
-interface ComponentParameters {
-    application?: ApplicationManager;
-    autoListeners?: boolean;
-    autoMount?: boolean;
-    classes?: ComponentClasses;
-    element?: ComponentSelector;
-    elements?: ComponentSelectors;
-    id?: string;
-}
-declare class Component extends EventEmitter {
-    application?: ApplicationManager;
-    autoListeners: boolean;
-    autoMount: boolean;
-    classes?: ComponentClasses;
-    selector?: ComponentSelector;
-    selectors?: ComponentSelectors;
-    id?: string;
-    element?: HTMLElement;
-    elements: ComponentElements;
-    constructor({ application, autoListeners, autoMount, classes, element, elements, id, }: ComponentParameters);
-    create(): void;
-    initElement(selector: ComponentSelector): void;
-    destroyElement(): void;
-    initElements(selectors?: ComponentSelectors): void;
-    destroyElements(): void;
-    addEventListeners(): void;
-    removeEventListeners(): void;
-    destroy(): void;
-}
-
-declare class Link extends Component {
-    element: HTMLLinkElement;
-    constructor({ element }: {
-        element: HTMLAnchorElement;
-    });
-    onClick(event: MouseEvent): void;
-    addEventListeners(): void;
-    removeEventListeners(): void;
-}
-
-declare class Links extends EventEmitter {
-    application: ApplicationManager;
-    links: Array<Link>;
-    constructor(application: ApplicationManager);
-    addEventListeners(): void;
-    onLinkClick(href: string): void;
-    refresh(): void;
-}
-
-interface PageParameters {
-    application: ApplicationManager;
-    classes?: ComponentClasses;
-    datasets: Array<{
-        component: typeof Component;
-        selector: string;
-    }>;
-    element?: HTMLElement | string;
-    elements?: ComponentSelectors;
-    scrollEnabled?: boolean;
-    scrollOptions?: LenisOptions;
-}
-declare class Page extends Component {
-    element: HTMLElement;
-    elements: {
-        wrapper: HTMLElement;
-    };
-    application: ApplicationManager;
-    datasets: Array<{
-        component: typeof Component;
-        selector: string;
-    }>;
-    scroll: number;
-    scrollEnabled: boolean;
-    scrollOptions: LenisOptions;
-    unsubscribeRaf: (() => void) | undefined;
-    constructor({ application, classes, datasets, element, elements, scrollEnabled, scrollOptions, }: PageParameters);
-    create(): void;
-    resizeObserver: ResizeObserver;
-    createResizeObserver(): void;
-    destroyResizeObserver(): void;
-    components: Set<Component>;
-    createComponents(): void;
-    destroyComponents(): void;
-    lenis: Lenis;
-    createScroll(): void;
-    onGSAPTicker(time: number): void;
-    onLenisScroll(event: {
-        scroll: number;
-    }): void;
-    destroyScroll(): void;
-    onResize(): void;
-    onRAF(time: number): void;
-    onScroll(scroll: number): void;
-    onScrollFallback(): void;
-    addEventListeners(): void;
-    removeEventListeners(): void;
-    destroy(): void;
-}
-
-interface ApplicationComponentData {
-    component: new (params?: ComponentParameters) => Component;
-}
-interface ApplicationComponentDatasetData extends ApplicationComponentData {
-    selector: string;
-}
-interface ApplicationRoute {
-    component: new (params?: PageParameters) => Page;
-    template: string;
-}
-declare class ApplicationManager extends Component {
-    element: HTMLElement;
-    template: string;
-    constructor();
-    onTitleUpdate(): void;
-    onTemplateUpdate(): void;
-    canvas?: Component;
-    components: Array<Component>;
-    transition?: Component & {
-        onTransition?: (args: any) => Promise<void>;
-    };
-    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>;
-    initRoutes(routes: Array<ApplicationRoute>): void;
-    initSprites(url?: string): Promise<void>;
-    IS_LINKS_ENABLED: boolean;
-    links: Links;
-    initPage(): void;
-    createLinks(): void;
-    currentPage?: Page;
-    createPage(template?: string): void;
-    destroyPage(): void;
-    route: string;
-    routeHistory: Array<string>;
-    routePushState: boolean;
-    onRouteChange({ oldValue, newValue }: IValueDidChange<string>): void;
-    onRouteChangeRequest({ href, pushState }: {
-        href: string;
-        pushState: boolean;
-    }): Promise<void>;
-    nextPage: {
-        element?: Element;
-        template?: string;
-        title?: string;
-    };
-    onRequest({ href, response, pushState }: {
-        href: string;
-        response: string;
-        pushState: boolean;
-    }): Promise<void>;
-    onPopState(event: PopStateEvent): void;
-    get scroll(): number;
-    addEventListeners(): void;
-    removeEventListeners(): void;
-}
-declare const Application: ApplicationManager;
-
-export { Application, type ApplicationComponentData, type ApplicationComponentDatasetData, ApplicationManager, type ApplicationRoute, Component, type ComponentClasses, type ComponentElements, type ComponentParameters, type ComponentSelector, type ComponentSelectors, EventEmitter, Link, Links, Page, type PageParameters };
+export * from './App.js';
+export * from './Component.js';
+export * from './EventEmitter.js';
+export * from './Link.js';
+export * from './Links.js';
+export * from './Page.js';
+import Tempus from 'tempus';
+export { Tempus };