webhanger 1.0.0 → 1.0.4

package/core/registry.js

@@ -16,14 +16,23 @@ export async function deploy(config, componentDir, name, version, dependencies =
     // 1. Bundle + encode
     const bundledJs = await bundle(componentDir, projectId);
 
-    // 2. Upload
+    // 2. Extract dependencies declared in webhanger.component.json
+    let parsedPayload = {};
+    try { parsedPayload = JSON.parse(bundledJs); } catch (_) {}
+    const resolvedDeps = dependencies.length ? dependencies : (parsedPayload.dependencies || []);
+
+    // 3. Upload
     const storageKey = `components/${name}@${version}.js`;
     await upload(storage, storageKey, bundledJs);
 
-    // 3. Sign — use custom token if provided, otherwise HMAC-generate
+    // 4. Generate CDN URLs — primary + fallbacks for multi-CDN failover
     const cdnUrl = `${cdn.url}/${storageKey}`;
-    let token, expires;
+    const cdnUrls = [cdnUrl];
+    if (cdn.fallbacks && cdn.fallbacks.length) {
+        cdn.fallbacks.forEach(fb => cdnUrls.push(`${fb}/${storageKey}`));
+    }
 
+    let token, expires;
     if (customToken) {
         expires = expiresInSeconds ? Math.floor(Date.now() / 1000) + expiresInSeconds : 0;
         token = customToken;
@@ -31,8 +40,8 @@ export async function deploy(config, componentDir, name, version, dependencies =
         ({ token, expires } = signUrl(storageKey, projectId, secretKey, expiresInSeconds));
     }
 
-    // 4. Register in DB
-    await registerComponent(db, projectId, { name, version, cdnUrl, token, expires, dependencies });
+    // 5. Register with all CDN URLs
+    await registerComponent(db, projectId, { name, version, cdnUrl, cdnUrls, token, expires, dependencies: resolvedDeps });
 
-    return { cdnUrl, token, expires };
+    return { cdnUrl, cdnUrls, token, expires, dependencies: resolvedDeps };
 }

package/core/resolver.js

@@ -0,0 +1,63 @@
+import { getComponent } from "../helper/dbHandler.js";
+
+/**
+ * Resolves a full dependency graph for a component.
+ * Returns a flat ordered array of components to load — deps first, then the component.
+ * Detects circular dependencies and throws.
+ *
+ * @param {object} dbConfig
+ * @param {string} projectId
+ * @param {string} name
+ * @param {string} version
+ * @returns {Array<{name, version, cdnUrl, token, expires}>}
+ */
+export async function resolve(dbConfig, projectId, name, version) {
+    const visited = new Set();
+    const order = [];
+
+    async function walk(n, v, chain = []) {
+        const key = `${n}@${v}`;
+
+        // Circular dependency check
+        if (chain.includes(key)) {
+            throw new Error(`Circular dependency detected: ${[...chain, key].join(" → ")}`);
+        }
+
+        // Already resolved
+        if (visited.has(key)) return;
+        visited.add(key);
+
+        const meta = await getComponent(dbConfig, projectId, n, v);
+        if (!meta) throw new Error(`Component ${key} not found in registry.`);
+
+        // Walk dependencies first (depth-first)
+        if (meta.dependencies && meta.dependencies.length) {
+            for (const dep of meta.dependencies) {
+                const [depName, depVersion] = parseDep(dep);
+                await walk(depName, depVersion, [...chain, key]);
+            }
+        }
+
+        order.push({
+            name: n,
+            version: v,
+            cdnUrl: meta.cdnUrl,
+            token: meta.token,
+            expires: meta.expires,
+            assets: meta.assets || []
+        });
+    }
+
+    await walk(name, version);
+    return order;
+}
+
+/**
+ * Parses "navbar@1.2.0" → ["navbar", "1.2.0"]
+ * Parses "navbar" → ["navbar", "latest"]
+ */
+export function parseDep(dep) {
+    const atIndex = dep.lastIndexOf("@");
+    if (atIndex <= 0) return [dep, "latest"];
+    return [dep.slice(0, atIndex), dep.slice(atIndex + 1)];
+}

package/helper/accessControl.js

@@ -0,0 +1,112 @@
+/**
+ * WebHanger Access Control
+ * Role-based permissions stored in DB per project.
+ *
+ * Roles:    owner | admin | deployer | viewer
+ * Actions:  deploy | read | delete | manage_access
+ *
+ * Storage: projects/{projectId}/access/{apiKey}
+ * {
+ *   role: "deployer",
+ *   permissions: ["deploy", "read"],
+ *   createdAt: ...,
+ *   label: "CI/CD key"
+ * }
+ */
+
+import crypto from "crypto";
+
+// ─── Permission matrix ────────────────────────────────────────────────────────
+
+const ROLE_PERMISSIONS = {
+    owner:    ["deploy", "read", "delete", "manage_access"],
+    admin:    ["deploy", "read", "delete", "manage_access"],
+    deployer: ["deploy", "read"],
+    viewer:   ["read"]
+};
+
+// ─── Key generation ───────────────────────────────────────────────────────────
+
+export function generateApiKey() {
+    return `wh_key_${crypto.randomBytes(24).toString("hex")}`;
+}
+
+// ─── Firebase RBAC ───────────────────────────────────────────────────────────
+
+async function getFirestore(serviceAccountPath) {
+    const admin = (await import("firebase-admin")).default;
+    const fs = (await import("fs-extra")).default;
+    const serviceAccount = fs.readJsonSync(serviceAccountPath);
+    if (!admin.apps.length) {
+        admin.initializeApp({ credential: admin.credential.cert(serviceAccount) });
+    }
+    return admin.firestore();
+}
+
+/**
+ * Grant a role to an API key for a project.
+ */
+export async function grantAccess(dbConfig, projectId, apiKey, role, label = "") {
+    if (!ROLE_PERMISSIONS[role]) throw new Error(`Unknown role: ${role}. Valid: ${Object.keys(ROLE_PERMISSIONS).join(", ")}`);
+
+    if (dbConfig.provider === "firebase") {
+        const db = await getFirestore(dbConfig.serviceAccountPath);
+        await db.collection("projects").doc(projectId)
+            .collection("access").doc(apiKey)
+            .set({
+                role,
+                permissions: ROLE_PERMISSIONS[role],
+                label,
+                createdAt: new Date().toISOString()
+            });
+        return { apiKey, role, permissions: ROLE_PERMISSIONS[role] };
+    }
+    throw new Error(`Access control not yet supported for provider: ${dbConfig.provider}`);
+}
+
+/**
+ * Revoke access for an API key.
+ */
+export async function revokeAccess(dbConfig, projectId, apiKey) {
+    if (dbConfig.provider === "firebase") {
+        const db = await getFirestore(dbConfig.serviceAccountPath);
+        await db.collection("projects").doc(projectId)
+            .collection("access").doc(apiKey).delete();
+        return true;
+    }
+    throw new Error(`Access control not yet supported for provider: ${dbConfig.provider}`);
+}
+
+/**
+ * Check if an API key has permission to perform an action.
+ * Returns the access record or throws if unauthorized.
+ */
+export async function checkPermission(dbConfig, projectId, apiKey, action) {
+    if (dbConfig.provider === "firebase") {
+        const db = await getFirestore(dbConfig.serviceAccountPath);
+        const snap = await db.collection("projects").doc(projectId)
+            .collection("access").doc(apiKey).get();
+
+        if (!snap.exists) throw new Error("Unauthorized: API key not found.");
+
+        const access = snap.data();
+        if (!access.permissions.includes(action)) {
+            throw new Error(`Forbidden: role "${access.role}" cannot perform "${action}".`);
+        }
+        return access;
+    }
+    throw new Error(`Access control not yet supported for provider: ${dbConfig.provider}`);
+}
+
+/**
+ * List all access entries for a project.
+ */
+export async function listAccess(dbConfig, projectId) {
+    if (dbConfig.provider === "firebase") {
+        const db = await getFirestore(dbConfig.serviceAccountPath);
+        const snap = await db.collection("projects").doc(projectId)
+            .collection("access").get();
+        return snap.docs.map(d => ({ apiKey: d.id, ...d.data() }));
+    }
+    throw new Error(`Access control not yet supported for provider: ${dbConfig.provider}`);
+}

package/helper/analyzer.js

@@ -0,0 +1,184 @@
+import fs from "fs-extra";
+import path from "path";
+
+// Known CDN mappings for popular npm packages
+const CDN_MAP = {
+    // CSS Frameworks
+    "tailwindcss":        { type: "script", url: "https://cdn.tailwindcss.com" },
+    "bootstrap":          { type: "style",  url: "https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css" },
+    "bootstrap/dist/js/bootstrap.bundle.min.js": { type: "script", url: "https://cdn.jsdelivr.net/npm/bootstrap@5/dist/js/bootstrap.bundle.min.js" },
+    "@mui/material":      { type: "style",  url: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" },
+    "bulma":              { type: "style",  url: "https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" },
+    "animate.css":        { type: "style",  url: "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" },
+
+    // Animation / 3D
+    "gsap":               { type: "script", url: "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" },
+    "three":              { type: "script", url: "https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" },
+    "animejs":            { type: "script", url: "https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" },
+    "lottie-web":         { type: "script", url: "https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js" },
+    "framer-motion":      null, // SSR only, skip
+
+    // Utility
+    "alpinejs":           { type: "script", url: "https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js", defer: true },
+    "htmx.org":           { type: "script", url: "https://unpkg.com/htmx.org@1.9.10" },
+    "axios":              { type: "script", url: "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js" },
+    "lodash":             { type: "script", url: "https://cdn.jsdelivr.net/npm/lodash@4/lodash.min.js" },
+    "dayjs":              { type: "script", url: "https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js" },
+    "chart.js":           { type: "script", url: "https://cdn.jsdelivr.net/npm/chart.js" },
+    "d3":                 { type: "script", url: "https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js" },
+    "swiper":             { type: "style",  url: "https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" },
+
+    // Fonts
+    "@fontsource":        { type: "style",  url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" },
+};
+
+// Framework detection patterns
+const FRAMEWORK_PATTERNS = {
+    react:   ["import React", "from 'react'", "from \"react\"", "jsx", ".tsx", ".jsx"],
+    vue:     ["defineComponent", "from 'vue'", "from \"vue\"", "<template>", ".vue"],
+    svelte:  ["<script>", "<style>", ".svelte", "export let"],
+    next:    ["from 'next'", "from \"next\"", "getServerSideProps", "getStaticProps"],
+    nuxt:    ["defineNuxtComponent", "useNuxtApp", "from '#app'"],
+    astro:   [".astro", "Astro.props"],
+    angular: ["@Component", "@NgModule", "from '@angular'"],
+};
+
+/**
+ * Detects framework from file contents + extensions.
+ */
+function detectFramework(files, contents) {
+    for (const [framework, patterns] of Object.entries(FRAMEWORK_PATTERNS)) {
+        for (const pattern of patterns) {
+            if (files.some(f => f.includes(pattern.replace(".", "")))) return framework;
+            if (contents.some(c => c.includes(pattern))) return framework;
+        }
+    }
+    return "vanilla";
+}
+
+/**
+ * Scans import statements and package.json to find used npm packages.
+ */
+function extractImports(contents) {
+    const imports = new Set();
+    const importRegex = /from\s+['"]([^'"./][^'"]*)['"]/g;
+    const requireRegex = /require\s*\(\s*['"]([^'"./][^'"]*)['"]\s*\)/g;
+
+    for (const content of contents) {
+        let match;
+        while ((match = importRegex.exec(content)) !== null) {
+            imports.add(match[1].split("/")[0]); // get root package name
+        }
+        while ((match = requireRegex.exec(content)) !== null) {
+            imports.add(match[1].split("/")[0]);
+        }
+    }
+    return [...imports];
+}
+
+/**
+ * Detects styling approach from file contents + extensions.
+ */
+function detectStyling(files, contents) {
+    const styling = [];
+
+    if (contents.some(c => c.includes("tailwind") || c.includes("className=\"") || c.includes("class=\""))) {
+        if (contents.some(c => c.includes("tw-") || c.includes("bg-") || c.includes("text-") || c.includes("flex "))) {
+            styling.push("tailwind");
+        }
+    }
+    if (files.some(f => f.endsWith(".css") || f.endsWith(".scss"))) styling.push("css");
+    if (contents.some(c => c.includes("styled-components") || c.includes("css`"))) styling.push("styled-components");
+    if (contents.some(c => c.includes("@emotion"))) styling.push("emotion");
+    if (contents.some(c => c.includes("module.css") || c.includes(".module."))) styling.push("css-modules");
+
+    return styling.length ? styling : ["css"];
+}
+
+/**
+ * Maps detected npm packages to CDN URLs.
+ */
+function resolveCdnAssets(imports, styling) {
+    const assets = [];
+    const seen = new Set();
+
+    // Add styling CDN assets first
+    if (styling.includes("tailwind")) {
+        assets.push(CDN_MAP["tailwindcss"]);
+        seen.add("tailwindcss");
+    }
+    if (styling.includes("bootstrap")) {
+        assets.push(CDN_MAP["bootstrap"]);
+        seen.add("bootstrap");
+    }
+
+    // Map imports to CDN
+    for (const pkg of imports) {
+        if (seen.has(pkg)) continue;
+        if (CDN_MAP[pkg] && CDN_MAP[pkg] !== null) {
+            assets.push(CDN_MAP[pkg]);
+            seen.add(pkg);
+        }
+    }
+
+    return assets;
+}
+
+/**
+ * Main analyzer — scans a component directory and returns:
+ * { framework, styling, imports, assets, meta }
+ */
+export async function analyzeComponent(componentDir) {
+    const files = await fs.readdir(componentDir);
+    const contents = [];
+
+    for (const file of files) {
+        if (file === "webhanger.component.json") continue;
+        const filePath = path.join(componentDir, file);
+        const stat = await fs.stat(filePath);
+        if (stat.isFile()) {
+            try {
+                contents.push(await fs.readFile(filePath, "utf-8"));
+            } catch (_) {}
+        }
+    }
+
+    // Check if project has package.json for deeper dep scanning
+    const pkgPath = path.join(process.cwd(), "package.json");
+    let projectDeps = [];
+    if (await fs.pathExists(pkgPath)) {
+        const pkg = await fs.readJson(pkgPath);
+        projectDeps = Object.keys({ ...pkg.dependencies, ...pkg.devDependencies });
+    }
+
+    const framework = detectFramework(files, contents);
+    const styling = detectStyling(files, contents);
+    const imports = extractImports(contents);
+    const allDeps = [...new Set([...imports, ...projectDeps.filter(d => imports.includes(d))])];
+    const assets = resolveCdnAssets(allDeps, styling);
+
+    return { framework, styling, imports: allDeps, assets };
+}
+
+/**
+ * Auto-generates webhanger.component.json if it doesn't exist.
+ * If it exists, merges new assets without overwriting manual ones.
+ */
+export async function autoGenerateComponentMeta(componentDir) {
+    const metaPath = path.join(componentDir, "webhanger.component.json");
+    const analysis = await analyzeComponent(componentDir);
+
+    let existing = { assets: [] };
+    if (await fs.pathExists(metaPath)) {
+        existing = await fs.readJson(metaPath);
+    }
+
+    // Merge — don't duplicate URLs
+    const existingUrls = new Set(existing.assets.map(a => a.url));
+    const newAssets = analysis.assets.filter(a => !existingUrls.has(a.url));
+    const merged = { ...existing, assets: [...existing.assets, ...newAssets] };
+
+    await fs.writeJson(metaPath, merged, { spaces: 2 });
+
+    return { analysis, meta: merged };
+}

package/helper/breakdown.js

@@ -0,0 +1,63 @@
+import fs from "fs-extra";
+import path from "path";
+
+/**
+ * Breakdown Engine
+ * Detects a single HTML file with embedded <style> and <script> tags.
+ * Extracts them into separate index.html, style.css, script.js files.
+ * Works on component folders OR standalone HTML files.
+ */
+export async function breakdown(componentDir) {
+    const files = await fs.readdir(componentDir);
+    const htmlFiles = files.filter(f => f.endsWith(".html"));
+    const hasCSS = files.some(f => f.endsWith(".css"));
+    const hasJS  = files.some(f => f.endsWith(".js") && f !== "webhanger.component.json");
+
+    // Only run if there's exactly one HTML file and no separate css/js yet
+    if (htmlFiles.length !== 1 || (hasCSS && hasJS)) return false;
+
+    const htmlPath = path.join(componentDir, htmlFiles[0]);
+    const raw = await fs.readFile(htmlPath, "utf-8");
+
+    // Extract all <style> blocks
+    const styleMatches = [...raw.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/gi)];
+    const css = styleMatches.map(m => m[1].trim()).join("\n\n");
+
+    // Extract all <script> blocks (non-src)
+    const scriptMatches = [...raw.matchAll(/<script(?![^>]*src)[^>]*>([\s\S]*?)<\/script>/gi)];
+    const js = scriptMatches.map(m => m[1].trim()).join("\n\n");
+
+    // Strip <style> and <script> from HTML, clean up blank lines
+    let html = raw
+        .replace(/<style[^>]*>[\s\S]*?<\/style>/gi, "")
+        .replace(/<script(?![^>]*src)[^>]*>[\s\S]*?<\/script>/gi, "")
+        .replace(/\n{3,}/g, "\n\n")
+        .trim();
+
+    // Strip outer <html><head><body> wrapper if present — keep inner content only
+    const bodyMatch = html.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
+    if (bodyMatch) html = bodyMatch[1].trim();
+
+    const changed = css || js;
+    if (!changed) return false;
+
+    // Write extracted files
+    await fs.writeFile(path.join(componentDir, "index.html"), html, "utf-8");
+    if (css) await fs.writeFile(path.join(componentDir, "style.css"), css, "utf-8");
+    if (js)  await fs.writeFile(path.join(componentDir, "script.js"), js, "utf-8");
+
+    // Rename original if it wasn't index.html
+    if (htmlFiles[0] !== "index.html") {
+        await fs.remove(htmlPath);
+    }
+
+    return {
+        extracted: {
+            html: !!html,
+            css: !!css,
+            js: !!js
+        },
+        cssLines: css.split("\n").length,
+        jsLines:  js.split("\n").length
+    };
+}

package/helper/bundler.js

@@ -1,23 +1,34 @@
 import fs from "fs-extra";
 import path from "path";
+import { autoGenerateComponentMeta } from "./analyzer.js";
+import { encrypt, integrityHash } from "./crypto.js";
+import { breakdown } from "./breakdown.js";
 
-function xorEncode(str, key) {
-    let out = "";
-    for (let i = 0; i < str.length; i++) {
-        out += String.fromCharCode(str.charCodeAt(i) ^ key.charCodeAt(i % key.length));
-    }
-    return out;
-}
 
 /**
  * Bundles html+css+js into an encrypted JSON payload.
+ * Reads webhanger.component.json for CDN asset declarations.
  * Each chunk is XOR-encoded with projectId + chunk-type salt, then base64.
- * No eval needed — SDK decrypts and applies each chunk directly to DOM.
  */
 export async function bundle(componentDir, projectId) {
+    // Auto-breakdown: extract <style>/<script> from single HTML file if needed
+    const broke = await breakdown(componentDir);
+    if (broke) {
+        console.log(`  ✓ Breakdown: extracted CSS (${broke.cssLines} lines) + JS (${broke.jsLines} lines) from single file`);
+    }
+
+    // Auto-detect + generate webhanger.component.json before bundling
+    const { analysis } = await autoGenerateComponentMeta(componentDir);
+    console.log(`  ✓ Framework detected: ${analysis.framework}`);
+    console.log(`  ✓ Styling: ${analysis.styling.join(", ")}`);
+    if (analysis.assets.length) {
+        console.log(`  ✓ CDN assets resolved: ${analysis.assets.map(a => a.url).join(", ")}`);
+    }
+
     const files = await fs.readdir(componentDir);
 
     let html = "", css = "", js = "";
+    let meta = { assets: [] };
 
     for (const file of files) {
         const filePath = path.join(componentDir, file);
@@ -27,21 +38,24 @@ export async function bundle(componentDir, projectId) {
         if (ext === ".html") html = content.trim();
         else if (ext === ".css") css = content.trim();
         else if (ext === ".js") js = content.trim();
+        else if (file === "webhanger.component.json") meta = JSON.parse(content);
     }
 
     if (!html && !js) {
         throw new Error("Component must have at least an .html or .js file.");
     }
 
-    // Each chunk encrypted with projectId + salt — different key per chunk type
-    const encrypt = (content, salt) =>
-        content ? Buffer.from(xorEncode(content, projectId + salt)).toString("base64") : "";
+    // AES-256-GCM encrypt each chunk with per-chunk salt
+    const encryptChunk = (content, salt) => encrypt(content, projectId, salt);
 
     const payload = {
-        v: 1,
-        h: encrypt(html, "::html"),
-        c: encrypt(css,  "::css"),
-        j: encrypt(js,   "::js")
+        v: 2,                                    // version 2 = AES encrypted
+        h: encryptChunk(html, "::html"),
+        c: encryptChunk(css,  "::css"),
+        j: encryptChunk(js,   "::js"),
+        assets: meta.assets || [],
+        dependencies: meta.dependencies || [],
+        integrity: integrityHash(html + css + js) // tamper detection
     };
 
     return JSON.stringify(payload);