@reidelsaltres/pureper 0.1.49

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@reidelsaltres/pureper",
+  "version": "0.1.49",
+  "description": "Minimal library extracted from the Pureper SPA foundation — utilities and base classes for components/pages.",
+  "type": "module",
+  "main": "out/src/index.js",
+  "module": "out/src/index.js",
+  "types": "out/src/index.d.ts",
+  "files": [
+    "out",
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "publish:npm": "npm publish --registry=https://registry.npmjs.org/",
+    "publish:gh": "npm publish",
+    "prepack": "tsc",
+    "types:check": "tsc --noEmit",
+    "build": "tsc -p tsconfig.json",
+    "prepare": "npm run build",
+    "test": "npx tsc -p tests/tsconfig.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ReiDelsAltres/Pureper.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ReiDelsAltres/Pureper/issues"
+  },
+  "homepage": "https://github.com/ReiDelsAltres/Pureper#readme",
+  "keywords": [
+    "spa",
+    "components",
+    "typescript"
+  ],
+  "author": "ReiDelsAltres",
+  "license": "MIT"
+}

package/src/foundation/Fetcher.ts

@@ -0,0 +1,20 @@
+export default class Fetcher {
+    static async fetchText(url: string): Promise<string> {
+        const response = await this.internalFetch(url);
+
+        return await response.text();
+    }
+    static async fetchJSON(url: string): Promise<any> {
+        const response = await this.internalFetch(url);
+
+        return await response.json();
+    }
+
+    private static async internalFetch(url: string): Promise<Response> {
+        const response = await fetch(url, { cache: 'default' });
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        return response;
+    }
+}

package/src/foundation/Theme.ts

@@ -0,0 +1,37 @@
+import Fetcher from "./Fetcher.js";
+
+export type IconName = 'home' | 'user' | 'settings' | 'copy' | 'menu' | 'close' | 'arrow-left' | 
+                'arrow-right' | 'search' | 'heart' | 'star' | 'palette' | string;
+
+export type SizeClass = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export type ThemeColor = 'primary' | 'secondary' | 'tertiary' | 'additional' | 
+    'success' | 'warning' | 'error' | 'info' | 'text';
+
+export let ACTIVE_THEME_KEY = "Empty";
+
+export async function loadTheme(name: string) : Promise<string> {
+    return Fetcher.fetchText(`../../../resources/${name}.theme.css`);
+}
+export async function loadThemeAsInstant(name: string) : Promise<CSSStyleSheet> {
+    let theme: string = await loadTheme(name);
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(theme);
+    return sheet;
+}
+export async function init() {
+    ACTIVE_THEME_KEY = localStorage.getItem("theme");
+    if (ACTIVE_THEME_KEY) {
+        await setTheme(ACTIVE_THEME_KEY);
+    } else {
+        await setTheme("Blazor");
+    }
+}
+export async function setTheme(name: string) {
+    let theme: string = await loadTheme(name);
+    theme = theme.replace(/\.[\w-]+-theme/g, ":root");
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(theme);
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+}
+

package/src/foundation/Triplet.ts

@@ -0,0 +1,208 @@
+import Fetcher from "./Fetcher.js";
+import UniHtml from "./component_api/UniHtml.js";
+import { Router } from "./worker/Router.js";
+import ServiceWorker from "./worker/ServiceWorker.js";
+import Page from "./component_api/Page.js";
+import Component from "./component_api/Component.js";
+import { AnyConstructor, Constructor } from "./component_api/mixin/Proto.js";
+import "./UrlExtensions.js";
+
+export default class Triplet<T extends UniHtml> implements ITriplet {
+    private uni?: AnyConstructor<UniHtml>;
+    private readonly access: AccessType;
+
+    public readonly html?: string;
+    public readonly css?: string;
+    public readonly js?: string;
+
+    public readonly additionalFiles: Map<string, string> = new Map();
+
+    public constructor(builder: TripletBuilder<T>) {
+        this.html = builder.html;
+        this.css = builder.css;
+        this.js = builder.js;
+
+        this.additionalFiles = builder.additionalFiles;
+
+        this.uni = builder.uni;;
+        this.access = builder.access;
+    }
+
+    public async init(): Promise<boolean> {
+        const isOnline: boolean = await ServiceWorker.isOnline();
+
+        if (this.access === AccessType.NONE) return false;
+        if (this.access === AccessType.BOTH) {
+            await this.cache();
+            return true
+        };
+        if (this.access === AccessType.OFFLINE && isOnline) return false;
+        if (this.access === AccessType.ONLINE && !isOnline) return false;
+
+        return true;
+    }
+
+    public async cache(): Promise<void> {
+        if (this.html)
+            await ServiceWorker.addToCache(this.html);
+        if (this.css)
+            await ServiceWorker.addToCache(this.css);
+        if (this.js)
+            await ServiceWorker.addToCache(this.js);
+        if (this.additionalFiles.size > 0) {
+            for (const [type, filePath] of this.additionalFiles) {
+                await ServiceWorker.addToCache(filePath);
+            }
+        }
+    }
+
+    private createLink(cssPath: string): HTMLLinkElement {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        ///
+        link.href = cssPath;
+        ///
+        return link;
+    }
+
+
+    public async register(type: "router" | "markup", name: string): Promise<boolean> {
+        if (!this.uni) {
+            switch (type) {
+                case "router":
+                    this.uni = Page;
+                    break;
+                case "markup":
+                    this.uni = Component;
+                    break;
+            }
+        }
+
+        for (const [type, filePath] of this.additionalFiles) {
+            if (type !== 'light-dom') continue;
+            if (!filePath.endsWith(".css")) continue;
+
+            const link = this.createLink(filePath);
+            document.head.appendChild(link);
+
+            console.info(`[Triplet]: Additional light-dom CSS file '${filePath}' added to document head.`);
+        }
+
+        let ori = this.createInjectedClass(this.uni);
+
+        if (type === "router") {
+            var reg = Router.registerRoute(this.html!, name, (search) => {
+                const paramNames = (() => {
+                    const ctor = this.uni.prototype.constructor;
+                    const fnStr = ctor.toString();
+                    const argsMatch = fnStr.match(/constructor\s*\(([^)]*)\)/);
+                    if (!argsMatch) return [];
+                    return argsMatch[1].split(',').map(s => s.trim()).filter(Boolean);
+                })();
+
+
+                const args = paramNames.map(name => {
+                    const string = search?.get(name);
+
+                    return search?.get(name)
+                });
+                const unn : UniHtml = new ori(...args);
+
+                return unn;
+            });
+
+            console.info(`[Triplet]` + `: Router route '${name}' registered for path '${this.html}' by class ${ori}.`);
+            return reg.then(() => true).catch(() => false);
+        } else if (type === "markup") {
+            if (customElements.get(name)) throw new Error(`Custom element '${name}' is already defined.`);
+            customElements.define(name, ori.prototype.constructor as CustomElementConstructor);
+
+            console.info(`[Triplet]: Custom element '${name}' defined.`);
+            return Promise.resolve(true);
+        }
+        return Promise.resolve(false);
+    }
+    private createInjectedClass(c: AnyConstructor<UniHtml>): any {
+        let that = this;
+        let ori = class extends c {
+            constructor(...args: any[]) {
+                super(...args);
+            }
+        };
+        let proto = ori.prototype as any;
+        proto._init = async function () {
+            ///
+            const fullPath = that.html!;
+            ///
+            return Fetcher.fetchText(fullPath);
+        }
+        proto._postInit = async function (preHtml: string): Promise<string> {
+            if (that.css) {
+                const link = that.createLink(that.css);
+                preHtml = link.outerHTML + "\n" + preHtml;
+            }
+            for (const [type, filePath] of that.additionalFiles) {
+                if (!filePath.endsWith(".css")) continue;
+                if (type !== 'light-dom') {
+                    const link = that.createLink(filePath);
+                    preHtml = link.outerHTML + "\n" + preHtml;
+                }
+            }
+            return preHtml;
+        }
+        return ori;
+    }
+
+}
+
+interface ITriplet {
+    readonly html?: string;
+    readonly css?: string;
+    readonly js?: string;
+}
+
+export enum AccessType {
+    NONE = 0,
+    OFFLINE = 1 << 0,
+    ONLINE = 1 << 1,
+    BOTH = OFFLINE | ONLINE
+}
+
+export class TripletBuilder<T extends UniHtml> implements ITriplet {
+    public uni?: AnyConstructor<UniHtml>;
+    public access: AccessType = AccessType.BOTH;
+
+    public readonly additionalFiles: Map<string, string> = new Map();
+
+    private constructor(
+        public readonly html?: string,
+        public readonly css?: string,
+        public readonly js?: string
+    ) { }
+
+    public static create<T extends UniHtml>(html?: string, css?: string, js?: string): TripletBuilder<T> {
+        let urlHtml: URL = html ? new URL(html, window.location.origin) : null;
+        let urlCss: URL = css ? new URL(css, window.location.origin) : null;
+        let urlJs: URL = js ? new URL(js, window.location.origin) : null;
+
+        return new TripletBuilder(urlHtml?.href, urlCss?.href, urlJs?.href);
+    }
+
+    public withUni(cls: AnyConstructor<UniHtml>): TripletBuilder<T> {
+        this.uni = cls;
+        return this;
+    }
+    public withAccess(access: AccessType): TripletBuilder<T> {
+        this.access = access;
+        return this;
+    }
+    public withLightDOMCss(css: string): TripletBuilder<T> {
+        let urlCss: URL = css ? new URL(css, window.location.origin) : null;
+        this.additionalFiles.set('light-dom', urlCss?.href);
+        return this;
+    }
+
+    public build(): Triplet<T> {
+        return new Triplet<T>(this);
+    }
+}

package/src/foundation/api/ElementHolder.ts

@@ -0,0 +1,3 @@
+export default interface IElementHolder {
+    readonly element: HTMLElement;
+}

package/src/foundation/api/EmptyConstructor.ts

@@ -0,0 +1,6 @@
+/**
+ * Helper interface for factory methods (empty constructor signature).
+ */
+export default interface EmptyConstructor<T> {
+    new(): T;
+}

package/src/foundation/api/Lazy.ts

@@ -0,0 +1,12 @@
+export default class Lazy<T, Args extends any[] = []> {
+    private _value?: T;
+
+    constructor(private readonly factory: (...args: Args) => T) { }
+
+    get(...args: Args): T {
+        if (this._value === undefined) {
+            this._value = this.factory(...args);
+        }
+        return this._value;
+    }
+}

package/src/foundation/component_api/Component.ts

@@ -0,0 +1,92 @@
+import IElementHolder from "../api/ElementHolder.js";
+import UniHtml from "../component_api/UniHtml.js";
+import { Class, Mixined } from "./mixin/Proto.js";
+
+export default interface Component extends Mixined,HTMLElement, UniHtml {}
+export default class Component extends Class(HTMLElement).extend(UniHtml).build() implements IUniHtmlComponent {
+    private _attributeChangedCallbacks?: ((name: string, oldValue: any, newValue: any) => void)[];
+    constructor() {
+        super();
+    }
+
+    onConnected(): void {
+    }
+
+    onDisconnected(): void {
+    }
+
+    onMoved(): void {
+    }
+
+    onAdopted(): void {
+    }
+
+
+    onAttributeChanged(name: string, oldValue: any, newValue: any): void {
+    }
+
+    onAttributeChangedCallback(callback: (name: string, oldValue: any, newValue: any) => void): void {
+        this._attributeChangedCallbacks = this._attributeChangedCallbacks ?? [];
+        this._attributeChangedCallbacks.push(callback);
+    }
+
+    /**
+     * @deprecated Use onConnected instead.
+     */
+    private connectedCallback(): void {
+        this.attachShadow({ mode: 'open' });
+
+        this.onConnected();
+        
+        this.load(this.shadowRoot);
+    }
+    protected render(element: IElementHolder, renderTarget: HTMLElement | ShadowRoot): Promise<void> {
+        (this.getMixin(UniHtml)?.instance.get() as any).render(element, renderTarget);
+        //super.render(element, renderTarget);
+        //this.shadowRoot!.appendChild(renderTarget);
+        return Promise.resolve();
+    }
+    /**
+     * @deprecated Use onDisconnected instead.
+     */
+    private disconnectedCallback(): void {
+        this.onDisconnected();
+    }
+    /**
+     * @deprecated Use onMoved instead.
+     */
+    private connectedMoveCallback(): void {
+        this.onMoved();
+    }
+    /**
+     * @deprecated Use onAdopted instead.
+     */
+    private adoptedCallback(): void {
+        this.onAdopted();
+    }
+    /**
+     * @deprecated Use onAttributeChanged instead.
+     */
+    private attributeChangedCallback(name: string, oldValue: any, newValue: any): void {
+        this.onAttributeChanged(name, oldValue, newValue);
+        this._attributeChangedCallbacks?.forEach(cb => cb(name, oldValue, newValue));
+    }
+}
+
+export interface IUniHtmlComponent {
+    onConnected(): void;
+    onDisconnected(): void;
+    onMoved(): void;
+    onAdopted(): void;
+
+    onAttributeChanged(name: string, oldValue: any, newValue: any): void;
+}
+
+export interface IUniHtmlVanillaComponent {
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    connectedMoveCallback(): void;
+    adoptedCallback(): void;
+
+    attributeChangedCallback(name: string, oldValue: any, newValue: any): void;
+}

package/src/foundation/component_api/Page.ts

@@ -0,0 +1,9 @@
+import UniHtml from "./UniHtml.js";
+import Fetcher from "../Fetcher.js";
+
+/**
+ * Base class for SPA pages in Pureper application
+ * Provides lifecycle hooks and template rendering functionality
+ */
+export default class Page extends UniHtml {
+}

package/src/foundation/component_api/UniHtml.ts

@@ -0,0 +1,82 @@
+
+/**
+ * Abstract base class for HTML components in Pureper SPA.
+ * Provides a unified lifecycle: init → preLoadJS → render → postLoadJS.
+ * Use static factory methods to create instances from an HTML file or string.
+ * Designed to replace legacy Page and Component base classes.
+ */
+import IElementHolder from "../api/ElementHolder.js";
+
+
+/**
+ * Universal SPA component base for pages and elements.
+ * Use static factory methods for instantiation.
+ */
+export default class UniHtml {
+    /**
+     * Unified component lifecycle entrypoint.
+     * Loads HTML, then calls preLoadJS, render, and postLoadJS hooks in order.
+     * @param element Target container (usually shadowRoot.host)
+     */
+    public async load(element: HTMLElement | ShadowRoot): Promise<void> {
+        const preHtml: string = await this._init();
+        const html: string = await this._postInit(preHtml);
+
+        const localRoot = document.createElement('div');
+        localRoot.innerHTML = html;
+
+        const holder : IElementHolder = { element: localRoot };
+
+        // ВАЖНО: preLoad() вызывается ДО монтирования в DOM/Shadow DOM.
+        // Для компонентов (UniHtmlComponent) на этом этапе ещё нельзя полагаться на this.shadowRoot —
+        // используйте переданный localRoot для подготовки DOM, данных и навешивания обработчиков.
+        // Это предпочтительный этап инициализации для компонентов.
+        await this.preLoad(holder);
+        // render() отвечает за помещение содержимого из localRoot в конечную цель (renderTarget).
+        // В UniHtmlComponent.render() после вызова базового render() происходит добавление wrapper в shadowRoot.
+        await this.render(holder, element);
+        // postLoad() вызывается ПОСЛЕ render(). Для компонентов к этому моменту содержимое уже добавлено
+        // внутрь shadowRoot, и можно безопасно работать с this.shadowRoot, измерениями layout и т.п.
+        await this.postLoad(holder);
+    }
+
+    private async _postInit(html: string): Promise<string> {
+        throw new Error("Method not implemented.");
+    }
+    private async _init(): Promise<string> {
+        throw new Error("Method not implemented.");
+    }
+    /**
+     * Hook before rendering (e.g., data preparation).
+     * Для компонентов вызывается до появления содержимого в Shadow DOM, this.shadowRoot может быть недоступен.
+     * РЕКОМЕНДАЦИЯ: предпочитайте выполнять основную подготовку, поиск элементов, навешивание обработчиков
+     * на узлы из localRoot именно здесь; затем render() вставит их в целевой контейнер/теневой DOM.
+     */
+    protected async preLoad(holder : IElementHolder) { }
+    /**
+     * Hook after rendering (e.g., event binding).
+     * Для компонентов вызывается после того, как содержимое вставлено в shadowRoot (см. UniHtmlComponent.render()).
+     * Используйте этот этап только когда необходим доступ к реально смонтированному DOM (layout/measurements,
+     * интеграции, требующие присутствия в документе). В остальных случаях предпочитайте preLoad().
+     */
+    protected async postLoad(holder: IElementHolder) { }
+    /**
+     * Main rendering step. By default, simply inserts HTML into the container.
+     * Override in subclasses for custom rendering logic.
+     * @param element Target container
+     * @param html HTML content
+     */
+    protected async render(holder: IElementHolder, renderTarget: HTMLElement | ShadowRoot): Promise<void> {
+        while (renderTarget.firstChild) {
+            renderTarget.removeChild(renderTarget.firstChild);
+        }
+
+        const children = Array.from(holder.element.childNodes);
+        for (const child of children) {
+            renderTarget.appendChild(child);
+        }
+        
+        (holder as any).element = this;
+        return Promise.resolve();
+    }
+}

package/src/foundation/component_api/mixin/Proto.ts

@@ -0,0 +1,67 @@
+import Lazy  from "../../../foundation/api/Lazy.js";
+class ClassBuilder<T extends Constructor> {
+    constructor(private base: T) { }
+
+    public extend<U extends Constructor>(extend: U): ClassBuilder<T> {
+        const proto = this.base.prototype;
+
+        Object.getOwnPropertyNames(extend.prototype).forEach(name => {
+            if (name !== 'constructor') {
+                Object.defineProperty(proto, name, Object.getOwnPropertyDescriptor(extend.prototype, name) as PropertyDescriptor);
+            }
+        });
+
+
+        this.base = class extends this.base {
+            constructor(...args: any[]) {
+                super(...args);
+
+                var map : Super = {};
+                var classHolder : ClassHolder<U> = 
+                    { class: extend, instance: new Lazy<any>(() => new extend(...args)) };
+
+                if (!this.hasOwnProperty('super'))
+                    (this as any).super = map;
+                (this as any).super[extend.name] = classHolder;
+                if (!this.hasOwnProperty('getMixin')) {
+                    (this as any).getMixin = function <T extends Constructor>(ctor : T): ClassHolder<T> | undefined {
+                        return (this as any).super?.[ctor.name];
+                    }
+                }
+
+                Object.assign(this, classHolder.instance.get());
+            }
+        };
+        return this;
+    }
+    public extendAbstract<U extends AbstractConstructor>(extend: U): ClassBuilder<T> {
+        let concrete = extend as unknown as ConcreteConstructor;
+        return this.extend(concrete);
+    }
+
+    public build() {
+        return class extends this.base {
+        };
+    }
+}
+export type Mixined = { 
+    super: Super;
+    getMixin<T extends Constructor>(ctor : T): ClassHolder<T> | undefined;
+};
+interface Super {
+    [key: string]: ClassHolder; 
+}
+interface ClassHolder<T extends Constructor = any> {
+    class: T;
+    instance: Lazy<InstanceType<T>>;
+}
+export type AnyConstructor<T = {}> = Constructor<T> | LazyConstructor<T>;
+
+export type Constructor<T = {}> = (new (...args: any[]) => T);
+export type LazyConstructor<T = {}> = (new () => T);
+export type ConcreteConstructor<T = any> = { new(...args: any[]): T } & AbstractConstructor<T>;
+export type AbstractConstructor<T = any> = Function & { prototype: T }
+
+export function Class<T extends Constructor>(Base: T) {
+    return new ClassBuilder(Base);
+}