webhanger-front 1.0.1 → 1.0.6

package/browser.min.js

@@ -0,0 +1 @@
+!function(e){const t="components",n="wh_";function r(e,t,n){if(!e)return"";const r=t+n,o=Uint8Array.from(atob(e),e=>e.charCodeAt(0)),a=(new TextEncoder).encode(r),s=new Uint8Array(o.length);for(let e=0;e<o.length;e++)s[e]=o[e]^a[e%a.length];return(new TextDecoder).decode(s)}function o(){return new Promise((e,n)=>{const r=indexedDB.open("webhanger_cache",1);r.onupgradeneeded=e=>e.target.result.createObjectStore(t),r.onsuccess=t=>e(t.target.result),r.onerror=()=>n(r.error)})}function a(e){return new Promise(t=>{if("style"===e.type?document.querySelector(`link[href="${e.url}"]`):document.querySelector(`script[src="${e.url}"]`))return t();if("style"===e.type){const n=document.createElement("link");n.rel="stylesheet",n.href=e.url,n.onload=t,n.onerror=t,document.head.appendChild(n)}else{const n=document.createElement("script");n.src=e.url,e.defer&&(n.defer=!0),e.async&&(n.async=!0),n.onload=t,n.onerror=t,document.head.appendChild(n)}})}e.WebHangerFront={load:async function(e,s,c,i,d="[data-wh]",l=null){if(!e||!s||!c||null==i)return void console.error("[WebHanger] Missing required params: cdnUrl, projectId, token, expires");if(0!==i&&Math.floor(Date.now()/1e3)>i)return void console.warn("[WebHanger] Token expired.");const u=function(e){return function(t,n={}){"function"==typeof e&&e({stage:t,...n})}}(l),h=function(e){const t=document.querySelector(e||"[data-wh]");if(!t)return{show:()=>{},hide:()=>{}};const n=document.createElement("div");return n.setAttribute("data-wh-loader",""),n.style.cssText="\n            display:flex; align-items:center; justify-content:center;\n            padding: 24px; width:100%; box-sizing:border-box;\n        ",n.innerHTML='\n            <div style="\n                width:28px; height:28px;\n                border:3px solid #e5e7eb;\n                border-top-color:#6366f1;\n                border-radius:50%;\n                animation:wh-spin 0.7s linear infinite;\n            "></div>\n            <style>\n                @keyframes wh-spin { to { transform: rotate(360deg); } }\n            </style>\n        ',{show(){t.appendChild(n)},hide(){n.parentNode&&n.parentNode.removeChild(n)}}}(d);u("start",{cdnUrl:e,selector:d}),h.show();const f=`${e}@${i}`;try{u("fetching");let l,m=await async function(e){try{const t=localStorage.getItem(n+e);if(t)return t}catch(e){}return await async function(e){const n=await o();return new Promise((r,o)=>{const a=n.transaction(t,"readonly").objectStore(t).get(e);a.onsuccess=()=>r(a.result),a.onerror=()=>o(a.error)})}(e)}(f);m||(m=await async function(e,t,n){const r=n?`${e}?token=${t}&expires=${n}`:`${e}?token=${t}`,o=await fetch(r);if(!o.ok)throw Error("Failed to fetch component: "+o.status);return await o.text()}(e,c,i),await async function(e,r){try{if(r.length<51200)return void localStorage.setItem(n+e,r)}catch(e){}await async function(e,n){const r=await o();return new Promise((o,a)=>{const s=r.transaction(t,"readwrite").objectStore(t).put(n,e);s.onsuccess=()=>o(),s.onerror=()=>a(s.error)})}(e,r)}(f,m));try{l=JSON.parse(m)}catch(e){l={}}l.assets&&l.assets.length&&(u("assets",{count:l.assets.length,assets:l.assets}),await async function(e=[]){for(const t of e)await a(t)}(l.assets)),u("injecting"),h.hide(),function(e,t,n){const o=document.querySelector(n||"[data-wh]");if(!o)return void console.warn("[WebHanger] No mount target found.");let a;try{a=JSON.parse(e)}catch(e){return void console.error("[WebHanger] Invalid component payload.")}const s=r(a.c,t,"::css");if(s){const e=document.createElement("style");e.textContent=s,document.head.appendChild(e)}const c=r(a.h,t,"::html");c&&(o.innerHTML=c);const i=r(a.j,t,"::js");if(i){const e=document.createElement("script");e.textContent=i,document.head.appendChild(e),document.head.removeChild(e)}}(m,s,d),u("done")}catch(e){h.hide(),u("error",{message:e.message}),console.error("[WebHanger] Load failed:",e.message)}},clearCache:async function(){Object.keys(localStorage).filter(e=>e.startsWith(n)).forEach(e=>localStorage.removeItem(e));try{(await o()).transaction(t,"readwrite").objectStore(t).clear()}catch(e){}if("caches"in window){const e=await caches.keys();await Promise.all(e.map(e=>caches.delete(e)))}if("serviceWorker"in navigator){const e=await navigator.serviceWorker.getRegistrations();await Promise.all(e.map(e=>e.unregister()))}Object.keys(sessionStorage).filter(e=>e.startsWith(n)).forEach(e=>sessionStorage.removeItem(e))},version:"1.0.0"}}(window);

package/package.json

@@ -1,11 +1,20 @@
 {
   "name": "webhanger-front",
-  "version": "1.0.1",
+  "version": "1.0.6",
   "description": "WebHanger browser SDK — load encrypted UI components from CDN",
   "main": "index.js",
   "module": "index.js",
-  "browser": "browser.js",
+  "browser": "browser.min.js",
   "type": "module",
+  "files": [
+    "browser.min.js",
+    "index.js",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "node build.js",
+    "prepublishOnly": "node build.js"
+  },
   "keywords": [
     "webhanger",
     "cdn",
@@ -13,5 +22,8 @@
     "frontend",
     "sdk"
   ],
-  "license": "ISC"
+  "license": "ISC",
+  "devDependencies": {
+    "terser": "^5.0.0"
+  }
 }

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);