@reidelsaltres/pureper 0.2.14 → 0.2.17

package/src/foundation/engine/Expression.ts

@@ -19,6 +19,9 @@ export default class Expression {
     private readonly isAsync: boolean;
     private readonly hasReturn: boolean;
 
+    private static fnCache = new Map<string, Function>();
+    private static readonly FN_CACHE_MAX = 500;
+
     constructor(code: string) {
         this.code = code.trim();
         this.isAsync = this.detectAsync(this.code);
@@ -79,7 +82,7 @@ export default class Expression {
         const identifiers: string[] = [];
         // Regex для идентификаторов (не после точки)
         const regex = /(?<![.\w])([a-zA-Z_$][a-zA-Z0-9_$]*)/g;
-        
+
         // Список встроенных глобальных объектов, которые нужно игнорировать
         const builtins = new Set([
             'true', 'false', 'null', 'undefined', 'NaN', 'Infinity',
@@ -110,7 +113,7 @@ export default class Expression {
     public transformCode(scope: Scope): string {
         const context = scope.getVariables();
         let transformedCode = this.code;
-        
+
         // Находим Observable переменные
         const observableVars = new Set<string>();
         for (const [key, value] of Object.entries(context)) {
@@ -178,7 +181,7 @@ export default class Expression {
         // Handle reserved keywords used as variable names (e.g., "super")
         const reservedKeywords = ['super', 'this', 'arguments'];
         const keyMapping: Record<string, string> = {};
-        
+
         const keys = Object.keys(context).map(key => {
             if (reservedKeywords.includes(key)) {
                 const safeKey = `__${key}__`;
@@ -188,9 +191,9 @@ export default class Expression {
             return key;
         });
         const values = Object.values(context);
-        
+
         let codeToExecute = codeOverride ?? this.code;
-        
+
         // Replace reserved keywords in code with safe alternatives
         for (const [original, safe] of Object.entries(keyMapping)) {
             const regex = new RegExp(`\\b${original}\\b`, 'g');
@@ -208,19 +211,30 @@ export default class Expression {
         }
 
         try {
-            // Create function with context variables as parameters
-            const fn = new Function(...keys, functionBody);
-            return fn.apply(null, values);
-        } catch (syntaxError) {
-            // If implicit return fails, try without it (for statements)
-            if (!this.hasReturn) {
+            const cacheKey = keys.join('\0') + '\0' + functionBody;
+            let fn = Expression.fnCache.get(cacheKey);
+            if (!fn) {
                 try {
-                    const fn = new Function(...keys, codeToExecute);
-                    return fn.apply(null, values);
-                } catch {
-                    throw syntaxError;
+                    fn = new Function(...keys, functionBody);
+                } catch (syntaxError) {
+                    if (!this.hasReturn) {
+                        try {
+                            fn = new Function(...keys, codeToExecute);
+                        } catch {
+                            throw syntaxError;
+                        }
+                    } else {
+                        throw syntaxError;
+                    }
                 }
+                if (Expression.fnCache.size >= Expression.FN_CACHE_MAX) {
+                    const firstKey = Expression.fnCache.keys().next().value;
+                    Expression.fnCache.delete(firstKey);
+                }
+                Expression.fnCache.set(cacheKey, fn);
             }
+            return fn.apply(null, values);
+        } catch (syntaxError) {
             throw syntaxError;
         }
     }
@@ -232,7 +246,7 @@ export default class Expression {
         // Handle reserved keywords used as variable names (e.g., "super")
         const reservedKeywords = ['super', 'this', 'arguments'];
         const keyMapping: Record<string, string> = {};
-        
+
         const keys = Object.keys(context).map(key => {
             if (reservedKeywords.includes(key)) {
                 const safeKey = `__${key}__`;
@@ -242,9 +256,9 @@ export default class Expression {
             return key;
         });
         const values = Object.values(context);
-        
+
         let codeToExecute = codeOverride ?? this.code;
-        
+
         // Replace reserved keywords in code with safe alternatives
         for (const [original, safe] of Object.entries(keyMapping)) {
             const regex = new RegExp(`\\b${original}\\b`, 'g');
@@ -261,13 +275,13 @@ export default class Expression {
 
         try {
             // Create async function
-            const AsyncFunction = Object.getPrototypeOf(async function(){}).constructor;
+            const AsyncFunction = Object.getPrototypeOf(async function () { }).constructor;
             const fn = new AsyncFunction(...keys, functionBody);
             return await fn.apply(null, values);
         } catch (syntaxError) {
             if (!this.hasReturn) {
                 try {
-                    const AsyncFunction = Object.getPrototypeOf(async function(){}).constructor;
+                    const AsyncFunction = Object.getPrototypeOf(async function () { }).constructor;
                     const fn = new AsyncFunction(...keys, codeToExecute);
                     return await fn.apply(null, values);
                 } catch {

package/src/foundation/engine/StylePreprocessor.ts

@@ -160,7 +160,7 @@ export default class StylePreprocessor {
                 ast.push(result.node);
 
                 result = rule.walk(walker, tokens, data);
-                tokens = result.tokens;
+                if (result) tokens = result.tokens;
             }
         }
 

package/src/foundation/engine/TemplateEngine.ts

@@ -25,7 +25,7 @@ export default class TemplateEngine {
             context!.data!.set(context!.refName, context!.element);
             this.globalScope!.set(context!.refName, context!.element);
 
-            this.engine.bindings.set(context!.element, () => {
+            this.engine.addBinding(context!.element, () => {
                 context!.data!.delete(context!.refName);
                 this.globalScope!.delete(context!.refName);
             });
@@ -46,10 +46,12 @@ export default class TemplateEngine {
                 const of = valueExpression.eval(data!);
                 const value = of instanceof Observable ? of.getObject() : of;
                 if (of instanceof Observable) {
-                    of.subscribe((newValue: any) => {
+                    const handler = (newValue: any) => {
                         this.engine.change();
                         this.doWork({ element, name: attributeName, value: newValue });
-                    });
+                    };
+                    of.subscribe(handler);
+                    this.engine.addBinding(element, () => of.unsubscribe(handler));
                 }
                 this.doWork({ element, name: attributeName, value });
             }
@@ -82,6 +84,7 @@ export default class TemplateEngine {
                 };
 
                 element.addEventListener(eventName, listener);
+                this.engine.addBinding(element, () => element.removeEventListener(eventName, listener));
             }
             return false;
         }
@@ -140,11 +143,13 @@ export default class TemplateEngine {
 
                 const value = of instanceof Observable ? of.getObject() : of;
                 if (of instanceof Observable) {
-                    of.subscribe((newValue: any[]) => {
+                    const handler = (newValue: any[]) => {
                         element.textContent = "";
                         this.engine.change();
                         this.doWork({ element, value: newValue, allowHtmlInjection: allowHtmlInjection });
-                    });
+                    };
+                    of.subscribe(handler);
+                    this.engine.addBinding(element, () => of.unsubscribe(handler));
                 }
                 this.doWork({ element, value, allowHtmlInjection: allowHtmlInjection });
 
@@ -179,10 +184,12 @@ export default class TemplateEngine {
 
                 const iterable = of instanceof Observable ? of.getObject() : of;
                 if (of instanceof Observable) {
-                    of.subscribe((newValue: any[]) => {
+                    const handler = (newValue: any[]) => {
                         this.engine.change();
                         this.doWork({ element, iterable: newValue, index, value, walker, shadow, data });
-                    });
+                    };
+                    of.subscribe(handler);
+                    this.engine.addBinding(element, () => of.unsubscribe(handler));
                 }
                 this.doWork({ element, iterable: iterable, index, value, walker, shadow, data });
             }
@@ -204,6 +211,7 @@ export default class TemplateEngine {
             const data = context!.data;
 
             element.childNodes.forEach(n => this.engine.fullCleanup(n));
+            while (element.firstChild) element.removeChild(element.firstChild);
 
             const lenght = typeof iterable === "number" ? iterable : iterable.length;
 
@@ -258,10 +266,12 @@ export default class TemplateEngine {
                     const condition = new Expression(conditionAtt).eval(data!);
 
                     if (condition instanceof Observable) {
-                        condition.subscribe((newValue: boolean) => {
+                        const handler = (newValue: boolean) => {
                             this.engine.change();
                             this.doWork({ walker, data, allParts: allParts });
-                        });
+                        };
+                        condition.subscribe(handler);
+                        this.engine.addBinding(part.element, () => condition.unsubscribe(handler));
                     }
                 }
 
@@ -278,9 +288,8 @@ export default class TemplateEngine {
             const { walker, data, allParts } = context!;
 
             allParts.forEach(part => {
-                this.engine.fullCleanup(part.element);
-                /*part.element.childNodes.forEach(n =>
-                    this.engine.fullCleanup(n));*/
+                part.element.childNodes.forEach(n => this.engine.fullCleanup(n));
+                while (part.element.firstChild) part.element.removeChild(part.element.firstChild);
             });
 
             for (const part of allParts) {
@@ -316,9 +325,24 @@ export default class TemplateEngine {
         this.if_component
     ];
 
-    public readonly bindings: Map<Element, () => void> = new Map();
+    public readonly bindings: Map<Node, (() => void)[]> = new Map();
     private readonly onChangeCallbacks: (() => void)[] = [];
     public processLogs: string[] = [];
+    public addBinding(node: Node, cleanup: () => void): void {
+        const existing = this.bindings.get(node);
+        if (existing) {
+            existing.push(cleanup);
+        } else {
+            this.bindings.set(node, [cleanup]);
+        }
+    }
+    public dispose(): void {
+        for (const [, cleanups] of this.bindings) {
+            cleanups.forEach(cleanup => cleanup());
+        }
+        this.bindings.clear();
+        this.onChangeCallbacks.length = 0;
+    }
     public static fullProcess(root: Node, scope: Scope): string[] {
         const engine = new TemplateEngine();
         engine.fullProcess(root, scope);
@@ -379,8 +403,11 @@ export default class TemplateEngine {
         let i = 0;
         walker.onEnterNode((node: Node, data?: Scope) => {
             const element = node as Element;
-            const binding = this.bindings.get(element);
-            if (binding) binding();
+            const bindings = this.bindings.get(element);
+            if (bindings) {
+                bindings.forEach(b => b());
+                this.bindings.delete(element);
+            }
 
             this.processLogs.push((" ").repeat(i) + "layer " + i + " Cleaning up Starting: " + node.nodeName);
             i++;

package/src/foundation/worker/Router.ts

@@ -50,14 +50,21 @@ export abstract class Router {
       window.location.replace(url.href);
     }
   }
-  
+
   public static tryRouteTo(url: URL, pushState: boolean = true) {
     const urlH = new URL(Fetcher.resolveUrl(url.href));
     try {
       const found: Route = this.tryFindRoute(urlH);
-      
+
       let pageContainer = document.getElementById('page');
-      
+
+      if (this.currentPage) {
+        this.currentPage.dispose();
+      }
+      while (pageContainer.firstChild) {
+        pageContainer.removeChild(pageContainer.firstChild);
+      }
+
       const page: UniHtml = this.createPage(found, urlH.searchParams);
       this.currentPage = page;
 

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;
+    }
 }