@reidelsaltres/pureper 0.2.15 → 0.2.18

package/src/foundation/TripletDecorator.ts

@@ -1,5 +1,5 @@
 import { AnyConstructor, UniHtml } from "../index.js";
-import Triplet, { AccessType, TripletStruct } from "./Triplet.js"
+import Triplet, { TripletStruct } from "./Triplet.js"
 
 export function ReComponent(settings: TripletStruct, tag: string) {
     return (ctor: Function) => {
@@ -12,9 +12,6 @@ export function ReComponent(settings: TripletStruct, tag: string) {
         const triplet: Triplet = new Triplet(settings);
 
         triplet.register("markup", tag)
-            .then(ok => {
-                if (!ok) console.error(`[ReComponent:${tag}] registration returned false`);
-            })
             .catch(err => console.error(`[ReComponent:${tag}] register failed`, err));
     }
 }
@@ -25,13 +22,40 @@ export function RePage(settings: TripletStruct, route: string) {
 
         if (settings.class === null || settings.class === undefined)
             settings.class = ctor as AnyConstructor<UniHtml>;
-        
+
         const triplet: Triplet = new Triplet(settings);
 
         triplet.register("router", route)
-            .then(ok => {
-                if (!ok) console.error(`[RePage:${route}] registration returned false`);
-            })
             .catch(err => console.error(`[RePage:${route}] register failed`, err));
     }
+}
+
+/**
+ * Register an alternative implementation for an existing placeholder.
+ *
+ * ```ts
+ * @ReImplementation({ markupURL: './Fancy.hmle', cssURL: './Fancy.css' }, "re-button")
+ * class FancyButton extends Component { ... }
+ *
+ * // Then switch: Placeholder.switchTo("re-button", "FancyButton");
+ * ```
+ */
+export function ReImplementation(settings: TripletStruct, target: string) {
+    return (ctor: Function) => {
+        if (target == null || target.length === 0)
+            throw new Error("Invalid implementation target.");
+
+        if (settings.class === null || settings.class === undefined)
+            settings.class = ctor as AnyConstructor<UniHtml>;
+
+        // Use the class name as the implementation name
+        const implName = ctor.name;
+        const triplet: Triplet = new Triplet(settings, implName);
+
+        // Register adds the implementation to the existing placeholder (or creates one)
+        triplet.register(target.includes("-") ? "markup" : "router", target)
+            .catch(err => console.error(`[ReImplementation:${target}] register failed`, err));
+
+        console.info(`[ReImplementation:${target}] registered implementation "${implName}"`);
+    }
 }

package/src/foundation/component_api/UniHtml.ts

@@ -17,10 +17,10 @@ export default class UniHtml {
      */
     public async load(element: HTMLElement | ShadowRoot): Promise<void> {
         this._status.setObject("loading");
+        (this as any)._lastRenderTarget = element;
         await this.preInit();
 
-        const preHtml: TemplateHolder = await this._init();
-        const html: TemplateHolder = await this._postInit(preHtml);
+        const html: TemplateHolder = await this._init();
 
         // ВАЖНО: preLoad() вызывается ДО монтирования в DOM/Shadow DOM.
         // Для компонентов (UniHtmlComponent) на этом этапе ещё нельзя полагаться на this.shadowRoot —
@@ -37,9 +37,6 @@ export default class UniHtml {
         this._status.setObject("ready");
     }
 
-    private async _postInit(html: TemplateHolder): Promise<TemplateHolder> {
-        throw new Error("Method not implemented.");
-    }
     private async _init(): Promise<TemplateHolder> {
         throw new Error("Method not implemented.");
     }
@@ -99,4 +96,28 @@ export default class UniHtml {
             this._templateHolder = undefined;
         }
     }
+
+    /**
+     * Reload this instance: dispose current state, then re-run the full lifecycle.
+     * Called automatically when the active Implementation is switched via Placeholder.
+     */
+    public async reload(): Promise<void> {
+        const renderTarget = (this as any).shadowRoot ?? (this as any)._lastRenderTarget;
+        await this.dispose();
+        this._status.setObject("constructed");
+
+        if (renderTarget) {
+            // Clear existing content
+            while (renderTarget.firstChild) {
+                renderTarget.removeChild(renderTarget.firstChild);
+            }
+            // Clear adopted stylesheets so the new implementation applies its own
+            if ('adoptedStyleSheets' in renderTarget) {
+                renderTarget.adoptedStyleSheets = [];
+            }
+            await this.load(renderTarget);
+        }
+
+        console.info(`[UniHtml]: Instance reloaded`);
+    }
 }

package/src/foundation/worker/ServiceWorker.ts

@@ -1,155 +1,229 @@
-/**
- * Service Worker for Pureper SPA
- * Handles client-side routing by intercepting navigation requests
- * and serving index.html for all SPA routes
- */
-import type { ExtendableEvent } from './api/ExtendableEvent.js';
-import type { FetchEvent } from './api/FetchEvent.js';
-import type { ServiceWorkerGlobalScope } from './api/ServiceWorkerGlobalScope.js';
-
-// Type assertion for Service Worker context
-declare let self: ServiceWorkerGlobalScope
-const swSelf = self;
-
-// Автоматически генерируем CACHE_NAME из base.json
-//import base from '../../../data/base.json';
-const CACHE_NAME = `pureper-v1`;
-
-const STATIC_ASSETS: string[] = [
-    '/index.html'
-];
-
-/*if ('serviceWorker' in navigator) {
-    window.addEventListener('load', () => {
-        navigator.serviceWorker.register('./serviceWorker.js', { type: 'module' })
-            .then((registration) => {
-                console.log('ServiceWorker registration successful:', registration.scope);
-            })
-            .catch((error) => {
-                console.error('ServiceWorker registration failed:', error);
-            });
-    });
-    window.addEventListener('fetch', (event: FetchEvent) => {
-        event.respondWith(
-            caches.match(event.request).then((cachedResponse) => {
-                console.log(`[ServiceWorker]: Fetching ${event.request.url}`);
-                return cachedResponse || fetch(event.request);
-            })
-        );
-    });
-}
+import Observable from "../api/Observer.js";
+
+export type ServiceWorkerConfig = {
+    scriptURL?: string;
+    scope?: string;
+};
 
 /**
- * Install event - cache static assets
+ * Client-side Service Worker manager for Purper SPA.
+ *
+ * Provides:
+ * - Registration with one call (`ServiceWorker.register()`)
+ * - Cache management: add / remove / list / clear
+ * - Connectivity detection with reactive `online` observable
+ *
+ * Usage:
+ * ```ts
+ * await ServiceWorker.register();              // defaults to './serviceworker.js'
+ * await ServiceWorker.addToCache('/data.json');
+ * await ServiceWorker.removeFromCache('/old.css');
+ * ServiceWorker.online.subscribe(v => console.log('online:', v));
+ * ```
  */
-/*window.addEventListener('install', (event: ExtendableEvent) => {
-    console.log('ServiceWorker: Installing...');
-    const assetsToCache = [
-        ...STATIC_ASSETS
-    ];
-    // Remove duplicates
-    const uniqueAssets = Array.from(new Set(assetsToCache));
-    event.waitUntil(
-        caches.open(CACHE_NAME)
-            .then((cache: Cache) => {
-                console.log('ServiceWorker: Caching static assets and SPA routes');
-                return cache.addAll(uniqueAssets);
-            })
-            .then(() => {
-                console.log('ServiceWorker: Installation complete');
-                return swSelf.skipWaiting();
-            })
-    );
-});*/
-
 export default class ServiceWorker {
-    /**
-     * Sends a message to the service worker to cache a specific URL.
-     * @param url The URL of the resource to cache.
-     */
-    static async addToCache(url: string): Promise<void> {
-        if ('serviceWorker' in navigator && navigator.serviceWorker.controller) {
-            navigator.serviceWorker.controller.postMessage({
-                type: 'CACHE_URL',
-                url: url
+    private static _registration?: ServiceWorkerRegistration;
+
+    /** Observable connectivity state — subscribe for real-time changes. */
+    static readonly online: Observable<boolean> = new Observable(navigator.onLine);
+
+    // ── Connectivity listeners (bound once) ─────────────────────────
+    private static _connectivityBound = false;
+    private static _bindConnectivity(): void {
+        if (this._connectivityBound) return;
+        this._connectivityBound = true;
+
+        window.addEventListener('online', () => {
+            console.log('[ServiceWorker]: Browser went online');
+            this.online.setObject(true);
+        });
+        window.addEventListener('offline', () => {
+            console.log('[ServiceWorker]: Browser went offline');
+            this.online.setObject(false);
+        });
+    }
+
+    // ── Registration ────────────────────────────────────────────────
+    static async register(config?: ServiceWorkerConfig): Promise<ServiceWorkerRegistration | undefined> {
+        if (!('serviceWorker' in navigator)) {
+            console.warn('[ServiceWorker]: Service Workers are not supported in this browser');
+            return undefined;
+        }
+
+        this._bindConnectivity();
+
+        const scriptURL = config?.scriptURL ?? './serviceworker.js';
+        const scope = config?.scope ?? '/';
+
+        try {
+            const reg = await navigator.serviceWorker.register(scriptURL, { scope });
+            this._registration = reg;
+            console.log(`[ServiceWorker]: Registered "${scriptURL}" with scope "${reg.scope}"`);
+
+            reg.addEventListener('updatefound', () => {
+                const newWorker = reg.installing;
+                if (!newWorker) return;
+                console.log('[ServiceWorker]: New version installing...');
+                newWorker.addEventListener('statechange', () => {
+                    if (newWorker.state === 'activated') {
+                        console.log('[ServiceWorker]: New version activated');
+                    }
+                });
             });
-        } else {
-            // Fallback: try to cache directly using the Cache API
-            try {
-                const cache = await caches.open('pureper-v1');
-                const response = await fetch(url);
-                if (response.ok) {
-                    await cache.put(url, response);
-                    console.log('[ServiceWorker]: Resource cached directly:', url);
-                }
-            } catch (e) {
-                console.warn('[ServiceWorker]: Failed to cache resource:', url, e);
+
+            // Wait for the controller to be available
+            if (!navigator.serviceWorker.controller) {
+                await new Promise<void>((resolve) => {
+                    navigator.serviceWorker.addEventListener('controllerchange', () => resolve(), { once: true });
+                });
             }
+
+            return reg;
+        } catch (err) {
+            console.error('[ServiceWorker]: Registration failed', err);
+            return undefined;
         }
     }
 
-    /**
-     * Asks the service worker to skip waiting and activate the new version.
-     */
-    static skipWaiting(): void {
-        if ('serviceWorker' in navigator && navigator.serviceWorker.controller) {
-            navigator.serviceWorker.controller.postMessage({ type: 'SKIP_WAITING' });
-        }
+    // ── Helpers ─────────────────────────────────────────────────────
+    private static _postMessage(msg: object): void {
+        navigator.serviceWorker?.controller?.postMessage(msg);
     }
 
-    /**
-     * Gets the version of the currently active service worker.
-     * @returns A promise that resolves with the version string.
-     */
-    static getVersion(): Promise<string> {
+    private static _request<T>(msg: object): Promise<T> {
         return new Promise((resolve, reject) => {
-            if ('serviceWorker' in navigator && navigator.serviceWorker.controller) {
-                const messageChannel = new MessageChannel();
-                messageChannel.port1.onmessage = (event) => {
-                    if (event.data.error) {
-                        reject(event.data.error);
-                    } else {
-                        resolve(event.data.version);
-                    }
-                };
-                navigator.serviceWorker.controller.postMessage({ type: 'GET_VERSION' }, [messageChannel.port2]);
-            } else {
-                reject('Service worker not available.');
+            if (!navigator.serviceWorker?.controller) {
+                reject('[ServiceWorker]: No active controller');
+                return;
             }
+            const mc = new MessageChannel();
+            mc.port1.onmessage = (ev) => resolve(ev.data as T);
+            navigator.serviceWorker.controller.postMessage(msg, [mc.port2]);
         });
     }
 
-    /**
-     * Checks if the given URL is present in the Service Worker's cache.
-     */
-    static isCached(url: string): Promise<boolean> {
-        return new Promise((resolve) => {
-            if ('serviceWorker' in navigator && navigator.serviceWorker.controller) {
-                const mc = new MessageChannel();
-                mc.port1.onmessage = (ev) => {
-                    if (ev.data && typeof ev.data.cached === 'boolean') {
-                        resolve(ev.data.cached);
-                    } else {
-                        resolve(false);
-                    }
-                };
-                navigator.serviceWorker.controller.postMessage({ type: 'HAS_URL', url }, [mc.port2]);
-            } else {
-                // Fallback: try CacheStorage directly (same-origin only)
-                caches.match(url).then(match => resolve(!!match)).catch(() => resolve(false));
+    // ── Cache Management ────────────────────────────────────────────
+
+    /** Add a single URL to the SW cache. */
+    static async addToCache(url: string): Promise<void> {
+        if (navigator.serviceWorker?.controller) {
+            this._postMessage({ type: 'CACHE_URL', url });
+            return;
+        }
+        // Fallback: use Cache API directly
+        try {
+            const cache = await caches.open('purper-v1');
+            const response = await fetch(url);
+            if (response.ok) {
+                await cache.put(url, response);
+                console.log('[ServiceWorker]: Resource cached directly:', url);
             }
-        });
+        } catch (e) {
+            console.warn('[ServiceWorker]: Failed to cache resource:', url, e);
+        }
     }
 
+    /** Add multiple URLs to the SW cache in one batch. */
+    static addAllToCache(urls: string[]): void {
+        this._postMessage({ type: 'CACHE_URLS', urls });
+    }
+
+    /** Remove a URL from the SW cache. Returns true if it was found and deleted. */
+    static async removeFromCache(url: string): Promise<boolean> {
+        try {
+            const data = await this._request<{ deleted: boolean }>({ type: 'REMOVE_URL', url });
+            return data.deleted;
+        } catch {
+            // Fallback
+            try {
+                const cache = await caches.open('purper-v1');
+                return await cache.delete(url);
+            } catch {
+                return false;
+            }
+        }
+    }
+
+    /** Return all URLs currently in the SW cache. */
+    static async getCacheKeys(): Promise<string[]> {
+        try {
+            const data = await this._request<{ keys: string[] }>({ type: 'GET_CACHE_KEYS' });
+            return data.keys;
+        } catch {
+            return [];
+        }
+    }
+
+    /** Wipe the entire SW cache. */
+    static async clearCache(): Promise<boolean> {
+        try {
+            const data = await this._request<{ cleared: boolean }>({ type: 'CLEAR_CACHE' });
+            return data.cleared;
+        } catch {
+            return false;
+        }
+    }
+
+    /** Check whether a URL exists in the SW cache. */
+    static async isCached(url: string): Promise<boolean> {
+        try {
+            const data = await this._request<{ cached: boolean }>({ type: 'HAS_URL', url });
+            return data.cached;
+        } catch {
+            // Fallback: CacheStorage directly
+            try {
+                return !!(await caches.match(url));
+            } catch {
+                return false;
+            }
+        }
+    }
+
+    // ── Version & lifecycle ─────────────────────────────────────────
+
+    /** Ask the waiting SW to activate immediately. */
+    static skipWaiting(): void {
+        this._postMessage({ type: 'SKIP_WAITING' });
+    }
+
+    /** Get the version string from the running SW. */
+    static async getVersion(): Promise<string> {
+        const data = await this._request<{ version: string }>({ type: 'GET_VERSION' });
+        return data.version;
+    }
+
+    // ── Connectivity ────────────────────────────────────────────────
+
     /**
-     * Checks if the browser is online.
+     * Active connectivity probe — makes a real network request.
+     * Unlike `online` observable (which relies on browser events), this
+     * detects captive portals and lie-fi.
      */
-    static async isOnline(): Promise<boolean> {
+    static async isOnline(probeURL?: string): Promise<boolean> {
         try {
-            const response = await fetch('./index.html', { cache: 'no-store' });
-            return response && response.ok;
+            // Try SW-side probe first
+            const data = await this._request<{ online: boolean }>({
+                type: 'IS_ONLINE',
+                url: probeURL ?? '/index.html'
+            });
+            this.online.setObject(data.online);
+            return data.online;
         } catch {
-            return false;
+            // Fallback: client-side probe
+            try {
+                const response = await fetch(probeURL ?? './index.html', { cache: 'no-store', method: 'HEAD' });
+                const result = response.ok;
+                this.online.setObject(result);
+                return result;
+            } catch {
+                this.online.setObject(false);
+                return false;
+            }
         }
     }
+
+    /** Current registration, if any. */
+    static get registration(): ServiceWorkerRegistration | undefined {
+        return this._registration;
+    }
 }

package/src/foundation/worker/serviceworker.js

@@ -0,0 +1,191 @@
+/**
+ * Purper Service Worker
+ * Handles caching, offline support, and connectivity detection.
+ *
+ * Message API (postMessage from client):
+ *   CACHE_URL        { url }              — add a URL to cache
+ *   CACHE_URLS       { urls }             — add multiple URLs to cache
+ *   REMOVE_URL       { url }              — remove a URL from cache
+ *   CLEAR_CACHE      —                    — wipe entire cache
+ *   GET_CACHE_KEYS   —                    — list all cached URLs
+ *   HAS_URL          { url }              — check if URL is cached
+ *   SKIP_WAITING     —                    — activate new SW immediately
+ *   GET_VERSION      —                    — return SW version string
+ *   IS_ONLINE        —                    — connectivity check from SW context
+ */
+
+const CACHE_VERSION = 'purper-v1';
+const SW_VERSION = '1.0.0';
+
+// ── Install ─────────────────────────────────────────────────────────
+self.addEventListener('install', (event) => {
+    console.log(`[ServiceWorker ${SW_VERSION}]: Installing...`);
+    event.waitUntil(
+        caches.open(CACHE_VERSION)
+            .then(() => {
+                console.log(`[ServiceWorker ${SW_VERSION}]: Cache "${CACHE_VERSION}" opened`);
+                return self.skipWaiting();
+            })
+    );
+});
+
+// ── Activate ────────────────────────────────────────────────────────
+self.addEventListener('activate', (event) => {
+    console.log(`[ServiceWorker ${SW_VERSION}]: Activating...`);
+    event.waitUntil(
+        caches.keys()
+            .then((keys) => {
+                return Promise.all(
+                    keys
+                        .filter((key) => key !== CACHE_VERSION)
+                        .map((key) => {
+                            console.log(`[ServiceWorker ${SW_VERSION}]: Deleting old cache "${key}"`);
+                            return caches.delete(key);
+                        })
+                );
+            })
+            .then(() => {
+                console.log(`[ServiceWorker ${SW_VERSION}]: Claiming clients`);
+                return self.clients.claim();
+            })
+    );
+});
+
+// ── Fetch ───────────────────────────────────────────────────────────
+// Network-first for navigation, cache-first for assets.
+self.addEventListener('fetch', (event) => {
+    const request = event.request;
+
+    // Only handle GET requests
+    if (request.method !== 'GET') return;
+
+    // Navigation requests (HTML pages) — network-first, fall back to cache
+    if (request.mode === 'navigate') {
+        event.respondWith(
+            fetch(request)
+                .then((response) => {
+                    if (response.ok) {
+                        const clone = response.clone();
+                        caches.open(CACHE_VERSION).then((cache) => cache.put(request, clone));
+                    }
+                    return response;
+                })
+                .catch(() => {
+                    return caches.match(request).then((cached) => {
+                        return cached || caches.match('/index.html');
+                    });
+                })
+        );
+        return;
+    }
+
+    // Sub-resources (CSS, JS, images, fonts, JSON) — cache-first, fall back to network
+    event.respondWith(
+        caches.match(request).then((cached) => {
+            if (cached) return cached;
+
+            return fetch(request).then((response) => {
+                if (response.ok && response.type === 'basic') {
+                    const clone = response.clone();
+                    caches.open(CACHE_VERSION).then((cache) => cache.put(request, clone));
+                }
+                return response;
+            });
+        })
+    );
+});
+
+// ── Message handling ────────────────────────────────────────────────
+self.addEventListener('message', (event) => {
+    const { type, url, urls } = event.data || {};
+    const port = event.ports?.[0];
+
+    switch (type) {
+        case 'CACHE_URL':
+            caches.open(CACHE_VERSION)
+                .then((cache) => cache.add(url))
+                .then(() => console.log(`[ServiceWorker]: Cached "${url}"`))
+                .catch((err) => console.warn(`[ServiceWorker]: Failed to cache "${url}"`, err));
+            break;
+
+        case 'CACHE_URLS':
+            if (Array.isArray(urls)) {
+                caches.open(CACHE_VERSION)
+                    .then((cache) => cache.addAll(urls))
+                    .then(() => console.log(`[ServiceWorker]: Cached ${urls.length} URLs`))
+                    .catch((err) => console.warn('[ServiceWorker]: Failed to cache URLs', err));
+            }
+            break;
+
+        case 'REMOVE_URL':
+            caches.open(CACHE_VERSION)
+                .then((cache) => cache.delete(url))
+                .then((deleted) => {
+                    console.log(`[ServiceWorker]: ${deleted ? 'Removed' : 'Not found'} "${url}" from cache`);
+                    if (port) port.postMessage({ deleted });
+                })
+                .catch((err) => {
+                    console.warn(`[ServiceWorker]: Failed to remove "${url}"`, err);
+                    if (port) port.postMessage({ deleted: false });
+                });
+            break;
+
+        case 'CLEAR_CACHE':
+            caches.delete(CACHE_VERSION)
+                .then(() => caches.open(CACHE_VERSION))
+                .then(() => {
+                    console.log('[ServiceWorker]: Cache cleared');
+                    if (port) port.postMessage({ cleared: true });
+                })
+                .catch((err) => {
+                    console.warn('[ServiceWorker]: Failed to clear cache', err);
+                    if (port) port.postMessage({ cleared: false });
+                });
+            break;
+
+        case 'GET_CACHE_KEYS':
+            caches.open(CACHE_VERSION)
+                .then((cache) => cache.keys())
+                .then((requests) => {
+                    const keys = requests.map((r) => r.url);
+                    if (port) port.postMessage({ keys });
+                })
+                .catch(() => {
+                    if (port) port.postMessage({ keys: [] });
+                });
+            break;
+
+        case 'HAS_URL':
+            caches.match(url)
+                .then((match) => {
+                    if (port) port.postMessage({ cached: !!match });
+                })
+                .catch(() => {
+                    if (port) port.postMessage({ cached: false });
+                });
+            break;
+
+        case 'SKIP_WAITING':
+            console.log('[ServiceWorker]: Skip waiting requested');
+            self.skipWaiting();
+            break;
+
+        case 'GET_VERSION':
+            if (port) port.postMessage({ version: SW_VERSION });
+            break;
+
+        case 'IS_ONLINE': {
+            fetch(url || '/index.html', { cache: 'no-store', method: 'HEAD' })
+                .then((res) => {
+                    if (port) port.postMessage({ online: res.ok });
+                })
+                .catch(() => {
+                    if (port) port.postMessage({ online: false });
+                });
+            break;
+        }
+
+        default:
+            console.warn(`[ServiceWorker]: Unknown message type "${type}"`);
+    }
+});