webhanger-front 1.0.5 → 1.0.6

package/package.json

@@ -1,11 +1,16 @@
 {
   "name": "webhanger-front",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "WebHanger browser SDK — load encrypted UI components from CDN",
   "main": "index.js",
   "module": "index.js",
   "browser": "browser.min.js",
   "type": "module",
+  "files": [
+    "browser.min.js",
+    "index.js",
+    "README.md"
+  ],
   "scripts": {
     "build": "node build.js",
     "prepublishOnly": "node build.js"

package/browser.js

@@ -1,259 +0,0 @@
-// WebHanger Frontend SDK — IIFE browser build
-// Use via <script src="browser.js"> or from a CDN
-
-(function (global) {
-    const VERSION = "1.0.0";
-    const IDB_NAME = "webhanger_cache";
-    const IDB_STORE = "components";
-    const LS_PREFIX = "wh_";
-    const SIZE_THRESHOLD = 50 * 1024;
-
-    // UTF-8 safe XOR decrypt — mirrors bundler byte-level encoding
-    function decrypt(b64, projectId, salt) {
-        if (!b64) return "";
-        const key = projectId + salt;
-        const bytes = Uint8Array.from(atob(b64), c => c.charCodeAt(0));
-        const keyBytes = new TextEncoder().encode(key);
-        const out = new Uint8Array(bytes.length);
-        for (let i = 0; i < bytes.length; i++) {
-            out[i] = bytes[i] ^ keyBytes[i % keyBytes.length];
-        }
-        return new TextDecoder().decode(out);
-    }
-
-    function openIDB() {
-        return new Promise((resolve, reject) => {
-            const req = indexedDB.open(IDB_NAME, 1);
-            req.onupgradeneeded = (e) => e.target.result.createObjectStore(IDB_STORE);
-            req.onsuccess = (e) => resolve(e.target.result);
-            req.onerror = () => reject(req.error);
-        });
-    }
-
-    async function idbGet(key) {
-        const db = await openIDB();
-        return new Promise((resolve, reject) => {
-            const tx = db.transaction(IDB_STORE, "readonly");
-            const req = tx.objectStore(IDB_STORE).get(key);
-            req.onsuccess = () => resolve(req.result);
-            req.onerror = () => reject(req.error);
-        });
-    }
-
-    async function idbSet(key, value) {
-        const db = await openIDB();
-        return new Promise((resolve, reject) => {
-            const tx = db.transaction(IDB_STORE, "readwrite");
-            const req = tx.objectStore(IDB_STORE).put(value, key);
-            req.onsuccess = () => resolve();
-            req.onerror = () => reject(req.error);
-        });
-    }
-
-    async function cacheGet(key) {
-        try {
-            const ls = localStorage.getItem(LS_PREFIX + key);
-            if (ls) return ls;
-        } catch (_) {}
-        return await idbGet(key);
-    }
-
-    async function cacheSet(key, value) {
-        try {
-            if (value.length < SIZE_THRESHOLD) {
-                localStorage.setItem(LS_PREFIX + key, value);
-                return;
-            }
-        } catch (_) {}
-        await idbSet(key, value);
-    }
-
-    async function fetchComponent(cdnUrl, token, expires) {
-        const url = expires
-            ? `${cdnUrl}?token=${token}&expires=${expires}`
-            : `${cdnUrl}?token=${token}`;
-        const res = await fetch(url);
-        if (!res.ok) throw new Error(`Failed to fetch component: ${res.status}`);
-        return await res.text();
-    }
-
-    // ─── Load external CDN assets ─────────────────────────────────────────────
-
-    function loadAsset(asset) {
-        return new Promise((resolve) => {
-            const existing = asset.type === "style"
-                ? document.querySelector(`link[href="${asset.url}"]`)
-                : document.querySelector(`script[src="${asset.url}"]`);
-            if (existing) return resolve();
-
-            if (asset.type === "style") {
-                const link = document.createElement("link");
-                link.rel = "stylesheet";
-                link.href = asset.url;
-                link.onload = resolve;
-                link.onerror = resolve;
-                document.head.appendChild(link);
-            } else {
-                const script = document.createElement("script");
-                script.src = asset.url;
-                if (asset.defer) script.defer = true;
-                if (asset.async) script.async = true;
-                script.onload = resolve;
-                script.onerror = resolve;
-                document.head.appendChild(script);
-            }
-        });
-    }
-
-    async function loadAssets(assets = []) {
-        for (const asset of assets) await loadAsset(asset);
-    }
-
-    function injectComponent(encryptedPayload, projectId, targetSelector) {
-        const target = document.querySelector(targetSelector || "[data-wh]");
-        if (!target) { console.warn("[WebHanger] No mount target found."); return; }
-
-        let payload;
-        try { payload = JSON.parse(encryptedPayload); }
-        catch (_) { console.error("[WebHanger] Invalid component payload."); return; }
-
-        const css = decrypt(payload.c, projectId, "::css");
-        if (css) {
-            const style = document.createElement("style");
-            style.textContent = css;
-            document.head.appendChild(style);
-        }
-
-        const html = decrypt(payload.h, projectId, "::html");
-        if (html) target.innerHTML = html;
-
-        const js = decrypt(payload.j, projectId, "::js");
-        if (js) {
-            const script = document.createElement("script");
-            script.textContent = js;
-            document.head.appendChild(script);
-            document.head.removeChild(script);
-        }
-    }
-
-    // ─── Loading Signaler ─────────────────────────────────────────────────────
-    // Fires callbacks at each stage of the load lifecycle.
-    // Stages: "start" | "fetching" | "assets" | "injecting" | "done" | "error"
-
-    function createSignaler(onSignal) {
-        return function signal(stage, detail = {}) {
-            if (typeof onSignal === "function") {
-                onSignal({ stage, ...detail });
-            }
-        };
-    }
-
-    // ─── Built-in preloader ───────────────────────────────────────────────────
-
-    function createPreloader(selector) {
-        const target = document.querySelector(selector || "[data-wh]");
-        if (!target) return { show: () => {}, hide: () => {} };
-
-        const loader = document.createElement("div");
-        loader.setAttribute("data-wh-loader", "");
-        loader.style.cssText = `
-            display:flex; align-items:center; justify-content:center;
-            padding: 24px; width:100%; box-sizing:border-box;
-        `;
-        loader.innerHTML = `
-            <div style="
-                width:28px; height:28px;
-                border:3px solid #e5e7eb;
-                border-top-color:#6366f1;
-                border-radius:50%;
-                animation:wh-spin 0.7s linear infinite;
-            "></div>
-            <style>
-                @keyframes wh-spin { to { transform: rotate(360deg); } }
-            </style>
-        `;
-
-        return {
-            show() { target.appendChild(loader); },
-            hide() { if (loader.parentNode) loader.parentNode.removeChild(loader); }
-        };
-    }
-
-    async function load(cdnUrl, projectId, token, expires, selector = "[data-wh]", onSignal = null) {
-        if (!cdnUrl || !projectId || !token || expires === undefined || expires === null) {
-            console.error("[WebHanger] Missing required params: cdnUrl, projectId, token, expires");
-            return;
-        }
-        if (expires !== 0 && Math.floor(Date.now() / 1000) > expires) {
-            console.warn("[WebHanger] Token expired.");
-            return;
-        }
-
-        const signal = createSignaler(onSignal);
-        const preloader = createPreloader(selector);
-
-        signal("start", { cdnUrl, selector });
-        preloader.show();
-
-        const cacheKey = `${cdnUrl}@${expires}`;
-        try {
-            signal("fetching");
-            let payload = await cacheGet(cacheKey);
-            if (!payload) {
-                payload = await fetchComponent(cdnUrl, token, expires);
-                await cacheSet(cacheKey, payload);
-            }
-
-            let parsed;
-            try { parsed = JSON.parse(payload); } catch (_) { parsed = {}; }
-
-            if (parsed.assets && parsed.assets.length) {
-                signal("assets", { count: parsed.assets.length, assets: parsed.assets });
-                await loadAssets(parsed.assets);
-            }
-
-            signal("injecting");
-            preloader.hide();
-            injectComponent(payload, projectId, selector);
-            signal("done");
-        } catch (err) {
-            preloader.hide();
-            signal("error", { message: err.message });
-            console.error("[WebHanger] Load failed:", err.message);
-        }
-    }
-
-    async function clearCache() {
-        // 1. Clear all wh_ keys from localStorage
-        Object.keys(localStorage)
-            .filter(k => k.startsWith(LS_PREFIX))
-            .forEach(k => localStorage.removeItem(k));
-
-        // 2. Clear IndexedDB store
-        try {
-            const db = await openIDB();
-            const tx = db.transaction(IDB_STORE, "readwrite");
-            tx.objectStore(IDB_STORE).clear();
-        } catch (_) {}
-
-        // 3. Clear service worker caches
-        if ("caches" in window) {
-            const keys = await caches.keys();
-            await Promise.all(keys.map(k => caches.delete(k)));
-        }
-
-        // 4. Unregister service workers
-        if ("serviceWorker" in navigator) {
-            const regs = await navigator.serviceWorker.getRegistrations();
-            await Promise.all(regs.map(r => r.unregister()));
-        }
-
-        // 5. Clear sessionStorage wh_ keys
-        Object.keys(sessionStorage)
-            .filter(k => k.startsWith(LS_PREFIX))
-            .forEach(k => sessionStorage.removeItem(k));
-    }
-
-    global.WebHangerFront = { load, clearCache, version: VERSION };
-
-})(window);

package/build.js

@@ -1,29 +0,0 @@
-import { minify } from "terser";
-import fs from "fs-extra";
-
-const src = await fs.readFile("./browser.js", "utf-8");
-
-const result = await minify(src, {
-    compress: {
-        dead_code: true,
-        drop_console: false,
-        passes: 3,
-        unsafe: true,
-        unsafe_math: true,
-        pure_getters: true
-    },
-    mangle: {
-        toplevel: true,       // mangle top-level names
-        properties: false     // keep property names (needed for API surface)
-    },
-    format: {
-        comments: false,      // strip all comments
-        ascii_only: true      // ensure safe output
-    }
-});
-
-await fs.writeFile("./browser.min.js", result.code, "utf-8");
-
-const orig = (await fs.stat("./browser.js")).size;
-const mini = Buffer.byteLength(result.code);
-console.log(`✅ Minified: ${(orig/1024).toFixed(1)}kB → ${(mini/1024).toFixed(1)}kB (${Math.round((1-mini/orig)*100)}% reduction)`);