@lisergia/core 23.0.1 → 25.0.0

package/dist/App.d.ts

@@ -0,0 +1,66 @@
+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';
+export interface ApplicationComponentData {
+    component: new (params?: ComponentParameters) => Component;
+}
+export interface ApplicationComponentDatasetData extends ApplicationComponentData {
+    selector: string;
+}
+export interface ApplicationRoute {
+    component: new (params?: PageParameters) => Page;
+    template: string;
+}
+export declare class ApplicationManager extends Component {
+    element: HTMLElement;
+    template: string;
+    constructor();
+    onTitleUpdate(): void;
+    onTemplateUpdate(): void;
+    canvas?: Component;
+    components: Array<Component>;
+    transition?: Component & {
+        onTransition?: (application: ApplicationManager) => void | 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>;
+    routeRequestEnabled: boolean;
+    routePushState: boolean;
+    onRouteChange({ newValue }: IValueDidChange<string>): void;
+    onRouteChangeRequest({ href, pushState }: {
+        href: string;
+        pushState: boolean;
+    }): Promise<void>;
+    nextPage: {
+        element?: HTMLElement;
+        template?: string;
+        title?: string;
+    };
+    onRequest({ href, response, pushState }: {
+        href: string;
+        response: string;
+        pushState: boolean;
+    }): Promise<void>;
+    onPopState(): void;
+    get scroll(): number;
+    addEventListeners(): void;
+    removeEventListeners(): void;
+}
+export declare const Application: ApplicationManager;

package/dist/App.js

@@ -0,0 +1,251 @@
+import { autorun, computed, makeObservable, observable, observe, } from 'mobx';
+import { Component } from './Component.js';
+import { Links } from './Links.js';
+export class ApplicationManager extends Component {
+    template = document.documentElement.dataset.template ?? '404';
+    constructor() {
+        super({
+            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() {
+        const title = this.nextPage?.title;
+        if (title) {
+            document.title = title;
+        }
+    }
+    onTemplateUpdate() {
+        const template = this.nextPage?.template;
+        if (template) {
+            document.documentElement.dataset.template = template;
+            this.template = template;
+        }
+    }
+    //
+    // Components.
+    //
+    canvas;
+    components = [];
+    transition;
+    initComponents(components) {
+        const classes = components.map(({ component: Component }) => new Component({
+            application: this,
+        }));
+        this.canvas = classes.find((component) => component.id === 'canvas');
+        this.transition = classes.find((component) => component.id === 'transition');
+        classes.forEach((component) => {
+            this.addComponent(component);
+        });
+    }
+    addComponent(component) {
+        this.components.push(component);
+    }
+    removeComponent(component) {
+        component.destroy();
+        const index = this.components.indexOf(component);
+        if (index !== -1) {
+            this.components.splice(index, 1);
+        }
+    }
+    onComponentChange(_event) { }
+    //
+    // Datasets.
+    //
+    datasets = [];
+    initDatasets(datasets) {
+        this.datasets = datasets;
+    }
+    //
+    // Routes.
+    //
+    pages = new Map();
+    initRoutes(routes) {
+        routes.forEach(({ component, template }) => {
+            this.pages.set(template, component);
+        });
+    }
+    //
+    // Sprites.
+    //
+    async initSprites(url = '/bundle.svg') {
+        const request = await window.fetch(url);
+        const response = await request.text();
+        const sprite = document.createElement('div');
+        sprite.innerHTML = response;
+        sprite.style.left = '-999999px';
+        sprite.style.opacity = '0';
+        sprite.style.position = 'absolute';
+        sprite.style.top = '0';
+        document.body.appendChild(sprite);
+    }
+    //
+    // Initialization.
+    //
+    IS_LINKS_ENABLED = true;
+    initPage() {
+        this.createPage();
+        this.createLinks();
+    }
+    //
+    // Links.
+    //
+    createLinks() {
+        if (!this.IS_LINKS_ENABLED) {
+            return;
+        }
+        this.links = new Links(this);
+    }
+    //
+    // Page.
+    //
+    currentPage = undefined;
+    createPage(template = this.template) {
+        const PageClass = this.pages.get(template);
+        const page = new PageClass({
+            application: this,
+            datasets: this.datasets,
+        });
+        this.currentPage = page;
+        this.currentPage.create();
+    }
+    destroyPage() {
+        if (this.currentPage) {
+            this.currentPage.destroy();
+        }
+    }
+    //
+    // Navigate.
+    //
+    route = `${window.location.pathname}${window.location.search}${window.location.hash}`;
+    routeHistory = [this.route];
+    routeRequestEnabled = true;
+    routePushState = true;
+    onRouteChange({ newValue }) {
+        if (!this.routeRequestEnabled) {
+            return;
+        }
+        const url = new URL(newValue, window.location.href);
+        if (url.origin !== window.location.origin) {
+            window.location.assign(url.href);
+            return;
+        }
+        const href = `${url.pathname}${url.search}${url.hash}`;
+        void this.onRouteChangeRequest({
+            href,
+            pushState: this.routePushState,
+        });
+    }
+    async onRouteChangeRequest({ href, pushState = true }) {
+        try {
+            const request = await window.fetch(href);
+            if (request.redirected) {
+                window.location.assign(request.url || href);
+                return;
+            }
+            const contentType = request.headers.get('content-type');
+            if (contentType && !contentType.toLowerCase().includes('text/html')) {
+                window.location.assign(href);
+                return;
+            }
+            const response = await request.text();
+            await this.onRequest({
+                href,
+                response,
+                pushState,
+            });
+        }
+        catch {
+            window.location.assign(href);
+        }
+    }
+    //
+    // Request.
+    //
+    nextPage = {};
+    async onRequest({ href, response, pushState }) {
+        const dom = new DOMParser().parseFromString(response, 'text/html');
+        const html = dom.documentElement;
+        const app = dom.querySelector('.app');
+        const page = app?.firstElementChild;
+        const template = html.dataset.template ?? this.template;
+        if (!app || !(page instanceof HTMLElement) || !this.pages.has(template)) {
+            window.location.assign(href);
+            return;
+        }
+        this.nextPage = {
+            element: app,
+            template,
+            title: dom.title || document.title,
+        };
+        if (this.transition) {
+            await this.transition.onTransition?.(this);
+        }
+        else {
+            this.currentPage.element.remove();
+            this.currentPage.destroy();
+            this.element.appendChild(this.nextPage.element.firstElementChild);
+            this.createPage(this.nextPage.template);
+        }
+        if (pushState) {
+            window.history.pushState({}, this.nextPage.title, href);
+        }
+        this.routeHistory.push(href);
+    }
+    //
+    // Pop State.
+    //
+    onPopState() {
+        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);
+        if (currentUrl.pathname === nextUrl.pathname && currentUrl.search === nextUrl.search) {
+            this.routeRequestEnabled = false;
+            this.route = route;
+            this.routeRequestEnabled = true;
+            return;
+        }
+        this.routePushState = false;
+        this.route = route;
+        this.routePushState = true;
+    }
+    //
+    // Scroll.
+    //
+    get scroll() {
+        return this.currentPage.scroll ?? 0;
+    }
+    //
+    // Listeners.
+    //
+    addEventListeners() {
+        window.addEventListener('popstate', this.onPopState);
+    }
+    removeEventListeners() {
+        window.removeEventListener('popstate', this.onPopState);
+    }
+}
+export const Application = new ApplicationManager();

package/dist/Component.d.ts

@@ -0,0 +1,44 @@
+import type { ApplicationManager } from './App.js';
+import { EventEmitter } from './EventEmitter.js';
+export interface ComponentClasses {
+    [key: string]: string;
+}
+export interface ComponentElements {
+    [key: string]: unknown[] | Element | Array<Element> | HTMLElement | Array<HTMLElement> | NodeList | Window | null;
+}
+export type ComponentSelector = string | HTMLElement;
+export interface ComponentSelectors {
+    [key: string]: string | Element | Array<Element> | HTMLElement | Array<HTMLElement> | NodeList | Window;
+}
+export interface ComponentParameters {
+    application?: ApplicationManager;
+    autoListeners?: boolean;
+    autoMount?: boolean;
+    classes?: ComponentClasses;
+    element?: ComponentSelector;
+    elements?: ComponentSelectors;
+    id?: string;
+}
+export declare class Component extends EventEmitter {
+    application?: ApplicationManager;
+    autoListeners: boolean;
+    autoMount: boolean;
+    classes?: ComponentClasses;
+    disposers: Set<() => void>;
+    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;
+    addDisposer(disposer: () => void): () => void;
+    destroyDisposers(): void;
+    addEventListeners(): void;
+    removeEventListeners(): void;
+    destroy(): void;
+}

package/dist/Component.js

@@ -0,0 +1,108 @@
+import { EventEmitter } from './EventEmitter.js';
+export class Component extends EventEmitter {
+    application;
+    autoListeners;
+    autoMount;
+    classes;
+    disposers = new Set();
+    selector;
+    selectors;
+    id;
+    element;
+    elements = {};
+    constructor({ application, autoListeners = true, autoMount = true, classes, element, elements, id, }) {
+        super();
+        this.application = application;
+        this.autoListeners = autoListeners;
+        this.autoMount = autoMount;
+        this.classes = classes;
+        this.selector = element;
+        this.selectors = elements;
+        this.id = id;
+        if (this.autoMount) {
+            this.create();
+        }
+        if (this.autoListeners) {
+            this.addEventListeners();
+        }
+    }
+    create() {
+        if (this.selector) {
+            this.initElement(this.selector);
+        }
+        if (this.selectors) {
+            this.initElements(this.selectors);
+        }
+    }
+    initElement(selector) {
+        if (selector instanceof HTMLElement) {
+            this.element = selector;
+        }
+        else {
+            this.element = document.querySelector(selector);
+        }
+    }
+    destroyElement() {
+        this.element = undefined;
+    }
+    initElements(selectors) {
+        for (const key in selectors) {
+            const selector = selectors[key];
+            if (selector === window) {
+                this.elements[key] = window;
+            }
+            else if (selector instanceof HTMLElement) {
+                this.elements[key] = selector;
+            }
+            else if (selector instanceof NodeList) {
+                this.elements[key] = selector;
+            }
+            else if (Array.isArray(selector)) {
+                this.elements[key] = selector;
+            }
+            else {
+                const elements = this.element.querySelectorAll(selector);
+                if (elements.length === 0) {
+                    const elements = document.querySelectorAll(selector);
+                    if (elements.length === 0) {
+                        this.elements[key] = null;
+                    }
+                    else if (elements.length === 1) {
+                        this.elements[key] = elements[0];
+                    }
+                    else {
+                        this.elements[key] = elements;
+                    }
+                }
+                else if (elements.length === 1) {
+                    this.elements[key] = elements[0];
+                }
+                else {
+                    this.elements[key] = elements;
+                }
+            }
+        }
+    }
+    destroyElements() {
+        this.elements = {};
+    }
+    addDisposer(disposer) {
+        this.disposers.add(disposer);
+        return disposer;
+    }
+    destroyDisposers() {
+        this.disposers.forEach((dispose) => {
+            dispose();
+        });
+        this.disposers.clear();
+    }
+    addEventListeners() { }
+    removeEventListeners() { }
+    destroy() {
+        this.destroyDisposers();
+        super.destroy();
+        this.removeEventListeners();
+        this.destroyElements();
+        this.destroyElement();
+    }
+}

package/dist/EventEmitter.d.ts

@@ -0,0 +1,10 @@
+import { type Emitter, type Unsubscribe } from 'nanoevents';
+export declare class EventEmitter {
+    emitter: Emitter;
+    entries: Map<unknown, Unsubscribe>;
+    constructor();
+    on<Arguments extends unknown[]>(event: string, callback: (...args: Arguments) => void): void | Unsubscribe;
+    off<Arguments extends unknown[]>(_event: string, callback: (...args: Arguments) => void): void;
+    fire(event: string, ...args: unknown[]): void;
+    destroy(): void;
+}

package/dist/EventEmitter.js

@@ -0,0 +1,34 @@
+import AutoBind from 'auto-bind';
+import { createNanoEvents } from 'nanoevents';
+export class EventEmitter {
+    emitter;
+    entries = new Map();
+    constructor() {
+        AutoBind(this);
+        this.emitter = createNanoEvents();
+    }
+    on(event, callback) {
+        if (!callback) {
+            return console.trace('No callback provided');
+        }
+        const emitter = this.emitter.on(event, callback);
+        this.entries.set(callback, emitter);
+        return emitter;
+    }
+    off(_event, callback) {
+        const unsubscribe = this.entries.get(callback);
+        if (unsubscribe) {
+            unsubscribe();
+        }
+        this.entries.delete(callback);
+    }
+    fire(event, ...args) {
+        this.emitter.emit(event, ...args);
+    }
+    destroy() {
+        this.entries.forEach((unsubscribe) => {
+            unsubscribe();
+        });
+        this.entries.clear();
+    }
+}

package/dist/Link.d.ts

@@ -0,0 +1,11 @@
+import { Component } from './Component.js';
+export declare class Link extends Component {
+    element: HTMLAnchorElement;
+    constructor({ element }: {
+        element: HTMLAnchorElement;
+    });
+    onClick(event: MouseEvent): void;
+    shouldHandleClick(event: MouseEvent): boolean;
+    addEventListeners(): void;
+    removeEventListeners(): void;
+}

package/dist/Link.js

@@ -0,0 +1,57 @@
+import { Component } from './Component.js';
+export class Link extends Component {
+    constructor({ element }) {
+        super({ element });
+    }
+    onClick(event) {
+        if (!this.shouldHandleClick(event)) {
+            return;
+        }
+        event.preventDefault();
+        this.fire('click', new URL(this.element.href, window.location.href).href);
+    }
+    shouldHandleClick(event) {
+        if (event.defaultPrevented ||
+            event.button !== 0 ||
+            event.metaKey ||
+            event.ctrlKey ||
+            event.shiftKey ||
+            event.altKey ||
+            this.element.hasAttribute('download')) {
+            return false;
+        }
+        const target = this.element.getAttribute('target');
+        if (target && target.toLowerCase() !== '_self') {
+            return false;
+        }
+        const url = new URL(this.element.href, window.location.href);
+        const isHttp = url.protocol === 'http:' || url.protocol === 'https:';
+        const isLocal = isHttp && url.origin === window.location.origin;
+        const hasHashReference = this.element.getAttribute('href')?.includes('#') ?? false;
+        const isSameDocumentHash = hasHashReference && url.pathname === window.location.pathname && url.search === window.location.search;
+        return isLocal && !isSameDocumentHash;
+    }
+    addEventListeners() {
+        const url = new URL(this.element.href, window.location.href);
+        const isHttp = url.protocol === 'http:' || url.protocol === 'https:';
+        const isLocal = isHttp && url.origin === window.location.origin;
+        if (isLocal) {
+            this.element.onclick = this.onClick;
+        }
+        else if (isHttp) {
+            if (!this.element.hasAttribute('target')) {
+                this.element.setAttribute('target', '_blank');
+            }
+            if (this.element.target === '_blank') {
+                const rel = new Set(this.element.rel.split(/\s+/).filter(Boolean));
+                rel.add('noopener');
+                this.element.rel = Array.from(rel).join(' ');
+            }
+        }
+    }
+    removeEventListeners() {
+        if (this.element.onclick === this.onClick) {
+            this.element.onclick = null;
+        }
+    }
+}

package/dist/Links.d.ts

@@ -0,0 +1,11 @@
+import type { ApplicationManager } from './App.js';
+import { EventEmitter } from './EventEmitter.js';
+import { Link } from './Link.js';
+export declare class Links extends EventEmitter {
+    application: ApplicationManager;
+    links: Array<Link>;
+    constructor(application: ApplicationManager);
+    addEventListeners(): void;
+    onLinkClick(href: string): void;
+    refresh(): void;
+}

package/dist/Links.js

@@ -0,0 +1,30 @@
+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 });
+    }
+    addEventListeners() {
+        this.links?.forEach((link) => {
+            link.destroy();
+        });
+        const links = document.querySelectorAll('a');
+        this.links = Array.from(links).map((element) => {
+            const link = new Link({
+                element,
+            });
+            link.on('click', this.onLinkClick);
+            return link;
+        });
+    }
+    onLinkClick(href) {
+        const url = new URL(href, window.location.href);
+        this.application.route = `${url.pathname}${url.search}${url.hash}`;
+    }
+    refresh() {
+        this.addEventListeners();
+    }
+}

package/dist/Page.d.ts

@@ -0,0 +1,52 @@
+import Lenis, { type LenisOptions } from 'lenis';
+import { type TempusState } from 'tempus';
+import type { ApplicationManager } from './App.js';
+import { Component, type ComponentClasses, type ComponentSelectors } from './Component.js';
+export interface PageParameters {
+    application: ApplicationManager;
+    classes?: ComponentClasses;
+    datasets: Array<{
+        component: typeof Component;
+        selector: string;
+    }>;
+    element?: HTMLElement | string;
+    elements?: ComponentSelectors;
+    scrollEnabled?: boolean;
+    scrollOptions?: LenisOptions;
+}
+export 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;
+    onLenisScroll(event: {
+        scroll: number;
+    }): void;
+    destroyScroll(): void;
+    onResize(): void;
+    onRAF({ time }: TempusState): void;
+    onScroll(scroll: number): void;
+    onScrollFallback(): void;
+    addEventListeners(): void;
+    removeEventListeners(): void;
+    destroy(): void;
+}