webhanger 1.0.8 → 1.1.0

package/core/devServer.js

@@ -0,0 +1,337 @@
+/**
+ * WebHanger Dev Server
+ * - Watches component files for changes
+ * - Auto-deploys on save (bundle → encrypt → upload → register)
+ * - Serves a live preview with hot reload
+ * - Auto-refreshes wh-manifest.json
+ * - Tests dependency graph on every change
+ */
+
+import http from "http";
+import path from "path";
+import fs from "fs-extra";
+import { fileURLToPath } from "url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// ─── File watcher (no deps — uses fs.watch) ───────────────────────────────────
+
+function watchDir(dir, onChange) {
+    const watchers = new Map();
+
+    function watchRecursive(d) {
+        if (!fs.existsSync(d)) return;
+        const watcher = fs.watch(d, { recursive: false }, (event, filename) => {
+            if (filename) onChange(path.join(d, filename), event);
+        });
+        watchers.set(d, watcher);
+
+        for (const entry of fs.readdirSync(d)) {
+            const full = path.join(d, entry);
+            if (fs.statSync(full).isDirectory()) watchRecursive(full);
+        }
+    }
+
+    watchRecursive(dir);
+    return () => watchers.forEach(w => w.close());
+}
+
+// ─── SSE broadcaster (for hot reload) ────────────────────────────────────────
+
+function createSSE() {
+    const clients = new Set();
+
+    function addClient(res) {
+        res.writeHead(200, {
+            "Content-Type":  "text/event-stream",
+            "Cache-Control": "no-cache",
+            "Connection":    "keep-alive",
+            "Access-Control-Allow-Origin": "*"
+        });
+        res.write("data: connected\n\n");
+        clients.add(res);
+        res.on("close", () => clients.delete(res));
+    }
+
+    function broadcast(event, data) {
+        const msg = `event: ${event}\ndata: ${JSON.stringify(data)}\n\n`;
+        clients.forEach(res => { try { res.write(msg); } catch (_) {} });
+    }
+
+    return { addClient, broadcast, clientCount: () => clients.size };
+}
+
+// ─── Dev server ───────────────────────────────────────────────────────────────
+
+export async function startDevServer(config, componentsDir, options = {}) {
+    const PORT        = options.port || 4242;
+    const manifestOut = options.manifestOut || path.join(process.cwd(), "wh-manifest.json");
+
+    const { deploy } = await import("./registry.js");
+    const { resolveGraph } = await import("./resolver.js");
+
+    const sse = createSSE();
+    const deployQueue = new Map(); // debounce per component
+    const deployedComponents = new Map();
+
+    // ── Scan component folders ────────────────────────────────────────────────
+    async function scanComponents() {
+        const entries = await fs.readdir(componentsDir);
+        const comps = [];
+        for (const entry of entries) {
+            const full = path.join(componentsDir, entry);
+            const stat = await fs.stat(full);
+            if (stat.isDirectory()) comps.push({ name: entry, dir: full });
+        }
+        return comps;
+    }
+
+    // ── Deploy a single component ─────────────────────────────────────────────
+    async function deployComponent(name, dir, version = "dev") {
+        const start = Date.now();
+        try {
+            const result = await deploy(config, dir, name, version);
+            deployedComponents.set(name, result);
+            await refreshManifest();
+
+            const elapsed = Date.now() - start;
+            sse.broadcast("component-updated", {
+                name, version, cdnUrl: result.cdnUrl,
+                time: elapsed, ts: Date.now()
+            });
+
+            return { success: true, name, elapsed };
+        } catch (err) {
+            sse.broadcast("deploy-error", { name, message: err.message });
+            return { success: false, name, error: err.message };
+        }
+    }
+
+    // ── Refresh manifest ──────────────────────────────────────────────────────
+    async function refreshManifest() {
+        const manifest = {
+            pid: config.projectId,
+            components: {}
+        };
+        for (const [name, d] of deployedComponents) {
+            manifest.components[name] = {
+                url:     d.cdnUrl,
+                urls:    d.cdnUrls || [d.cdnUrl],
+                token:   d.token,
+                expires: d.expires
+            };
+        }
+        await fs.writeJson(manifestOut, manifest, { spaces: 2 });
+        sse.broadcast("manifest-updated", { componentCount: deployedComponents.size, ts: Date.now() });
+        return manifest;
+    }
+
+    // ── Test dependency graph ─────────────────────────────────────────────────
+    async function testDependencyGraph(rootName) {
+        try {
+            const graph = await resolveGraph(config.db, config.projectId, rootName, "dev");
+            sse.broadcast("dep-graph", { root: rootName, graph: graph.map(c => `${c.name}@${c.version}`) });
+            return graph;
+        } catch (err) {
+            sse.broadcast("dep-error", { root: rootName, message: err.message });
+            return null;
+        }
+    }
+
+    // ── Watch for file changes ────────────────────────────────────────────────
+    const stopWatching = watchDir(componentsDir, (filePath, event) => {
+        const rel = path.relative(componentsDir, filePath);
+        const compName = rel.split(path.sep)[0];
+        if (!compName) return;
+
+        // Debounce — wait 300ms after last change before deploying
+        if (deployQueue.has(compName)) clearTimeout(deployQueue.get(compName));
+        deployQueue.set(compName, setTimeout(async () => {
+            deployQueue.delete(compName);
+            const compDir = path.join(componentsDir, compName);
+            if (!fs.existsSync(compDir)) return;
+            console.log(`[wh dev] 🔄 ${compName} changed — redeploying...`);
+            const result = await deployComponent(compName, compDir);
+            if (result.success) {
+                console.log(`[wh dev] ✅ ${compName} deployed in ${result.elapsed}ms`);
+            } else {
+                console.log(`[wh dev] ❌ ${compName}: ${result.error}`);
+            }
+        }, 300));
+    });
+
+    // ── HTTP server ───────────────────────────────────────────────────────────
+    const server = http.createServer(async (req, res) => {
+        const url = new URL(req.url, `http://localhost:${PORT}`);
+        const p   = url.pathname;
+
+        // CORS
+        res.setHeader("Access-Control-Allow-Origin", "*");
+
+        // SSE endpoint — browser connects for hot reload
+        if (p === "/__wh_dev__/events") {
+            sse.addClient(res); return;
+        }
+
+        // Status
+        if (p === "/__wh_dev__/status") {
+            res.writeHead(200, { "Content-Type": "application/json" });
+            res.end(JSON.stringify({
+                running: true,
+                components: [...deployedComponents.keys()],
+                clients: sse.clientCount(),
+                manifestPath: manifestOut
+            })); return;
+        }
+
+        // Trigger manual redeploy
+        if (p === "/__wh_dev__/redeploy" && req.method === "POST") {
+            const comps = await scanComponents();
+            const results = [];
+            for (const comp of comps) {
+                const r = await deployComponent(comp.name, comp.dir);
+                results.push(r);
+            }
+            res.writeHead(200, { "Content-Type": "application/json" });
+            res.end(JSON.stringify({ results })); return;
+        }
+
+        // Serve preview page
+        if (p === "/" || p === "/index.html") {
+            const manifest = await refreshManifest().catch(() => ({ components: {} }));
+            const mounts = Object.keys(manifest.components)
+                .map(name => `  <wh-component name="${name}"></wh-component>`)
+                .join("\n");
+
+            res.writeHead(200, { "Content-Type": "text/html" });
+            res.end(previewPage(mounts, PORT)); return;
+        }
+
+        // Serve manifest
+        if (p === "/wh-manifest.json") {
+            if (fs.existsSync(manifestOut)) {
+                const data = await fs.readFile(manifestOut, "utf-8");
+                res.writeHead(200, { "Content-Type": "application/json" });
+                res.end(data);
+            } else {
+                res.writeHead(404); res.end("{}");
+            }
+            return;
+        }
+
+        res.writeHead(404); res.end("Not found");
+    });
+
+    // ── Initial deploy ────────────────────────────────────────────────────────
+    console.log(`[wh dev] 🔍 Scanning ${componentsDir}...`);
+    const comps = await scanComponents();
+    console.log(`[wh dev] Found ${comps.length} components — deploying...\n`);
+
+    for (const comp of comps) {
+        process.stdout.write(`  ${comp.name}... `);
+        const r = await deployComponent(comp.name, comp.dir);
+        console.log(r.success ? `✅ (${r.elapsed}ms)` : `❌ ${r.error}`);
+    }
+
+    server.listen(PORT, () => {
+        console.log(`\n[wh dev] 🚀 Dev server running`);
+        console.log(`  Preview  : http://localhost:${PORT}`);
+        console.log(`  Manifest : http://localhost:${PORT}/wh-manifest.json`);
+        console.log(`  Status   : http://localhost:${PORT}/__wh_dev__/status`);
+        console.log(`\n[wh dev] 👀 Watching ${componentsDir} for changes...\n`);
+    });
+
+    return { server, stopWatching };
+}
+
+// ─── Preview page HTML ────────────────────────────────────────────────────────
+
+function previewPage(mounts, port) {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>wh dev — Live Preview</title>
+  <style>
+    *{margin:0;padding:0;box-sizing:border-box}
+    body{background:#030712;color:#e8eaf0;font-family:system-ui,sans-serif}
+    #wh-dev-bar{
+      position:fixed;bottom:0;left:0;right:0;z-index:9999;
+      background:#0d0e12;border-top:1px solid #1e2028;
+      padding:8px 16px;display:flex;align-items:center;gap:12px;
+      font-family:monospace;font-size:11px;
+    }
+    .dev-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;animation:pulse 2s infinite}
+    @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
+    .dev-status{color:#4ade80;font-weight:600}
+    .dev-log{color:#6b7280;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+    .dev-reload{background:none;border:1px solid #374151;color:#9ca3af;padding:4px 10px;border-radius:4px;cursor:pointer;font-size:11px;font-family:monospace}
+    .dev-reload:hover{border-color:#6366f1;color:#818cf8}
+  </style>
+</head>
+<body>
+
+${mounts}
+
+<div id="wh-dev-bar">
+  <div class="dev-dot" id="dev-dot"></div>
+  <span class="dev-status" id="dev-status">wh dev</span>
+  <span class="dev-log" id="dev-log">Connected — watching for changes</span>
+  <button class="dev-reload" onclick="location.reload()">↻ Reload</button>
+</div>
+
+<script src="https://unpkg.com/webhanger-front@latest/browser.min.js"></script>
+<script>
+  WebHangerFront.initialize("/wh-manifest.json");
+
+  // ── Hot reload via SSE
+  var es = new EventSource("/__wh_dev__/events");
+  var dot = document.getElementById("dev-dot");
+  var status = document.getElementById("dev-status");
+  var log = document.getElementById("dev-log");
+
+  function setLog(msg, color) {
+    log.textContent = msg;
+    if (color) log.style.color = color;
+  }
+
+  es.addEventListener("component-updated", function(e) {
+    var d = JSON.parse(e.data);
+    dot.style.background = "#fbbf24";
+    setLog("🔄 " + d.name + " updated (" + d.time + "ms) — reloading...", "#fbbf24");
+    setTimeout(function() { location.reload(); }, 500);
+  });
+
+  es.addEventListener("deploy-error", function(e) {
+    var d = JSON.parse(e.data);
+    dot.style.background = "#f87171";
+    setLog("❌ " + d.name + ": " + d.message, "#f87171");
+  });
+
+  es.addEventListener("manifest-updated", function(e) {
+    var d = JSON.parse(e.data);
+    setLog("📋 Manifest updated — " + d.componentCount + " components", "#60a5fa");
+  });
+
+  es.addEventListener("dep-graph", function(e) {
+    var d = JSON.parse(e.data);
+    setLog("🔗 Dep graph: " + d.graph.join(" → "), "#c084fc");
+  });
+
+  es.onopen = function() {
+    dot.style.background = "#4ade80";
+    status.textContent = "wh dev";
+    setLog("Connected — watching for changes", "#4ade80");
+  };
+
+  es.onerror = function() {
+    dot.style.background = "#f87171";
+    status.textContent = "disconnected";
+    setLog("Dev server disconnected — retrying...", "#f87171");
+  };
+</script>
+
+</body>
+</html>`;
+}

package/helper/analyzer.js

@@ -162,21 +162,48 @@ export async function analyzeComponent(componentDir) {
 
 /**
  * Auto-generates webhanger.component.json if it doesn't exist.
- * If it exists, merges new assets without overwriting manual ones.
+ * If it exists, merges new assets + props 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: [] };
+    // Extract {{wh.propName}} placeholders from HTML
+    const htmlPath = path.join(componentDir, "index.html");
+    const props = {};
+    if (await fs.pathExists(htmlPath)) {
+        const html = await fs.readFile(htmlPath, "utf-8");
+        const matches = [...html.matchAll(/\{\{wh\.([a-zA-Z0-9_]+)\}\}/g)];
+        for (const m of matches) {
+            const propName = m[1];
+            if (!props[propName]) {
+                props[propName] = { type: "string", default: "" };
+            }
+        }
+    }
+
+    let existing = { assets: [], dependencies: [], props: {} };
     if (await fs.pathExists(metaPath)) {
         existing = await fs.readJson(metaPath);
+        if (!existing.props) existing.props = {};
     }
 
-    // Merge — don't duplicate URLs
-    const existingUrls = new Set(existing.assets.map(a => a.url));
+    // Merge assets — 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] };
+
+    // Merge props — don't overwrite existing defaults
+    const mergedProps = { ...props };
+    for (const [key, val] of Object.entries(existing.props || {})) {
+        mergedProps[key] = val; // existing props take priority
+    }
+
+    const merged = {
+        ...existing,
+        assets: [...(existing.assets || []), ...newAssets],
+        dependencies: existing.dependencies || [],
+        props: mergedProps
+    };
 
     await fs.writeJson(metaPath, merged, { spaces: 2 });
 

package/helper/authConfig.js

@@ -0,0 +1,68 @@
+import fs from "fs-extra";
+import path from "path";
+import crypto from "crypto";
+
+const CONFIG_FILE = "wh-auth.config.json";
+
+export const PROVIDERS = {
+    google: {
+        authUrl:    "https://accounts.google.com/o/oauth2/v2/auth",
+        tokenUrl:   "https://oauth2.googleapis.com/token",
+        profileUrl: "https://www.googleapis.com/oauth2/v2/userinfo",
+        scopes:     ["openid", "email", "profile"],
+        fields:     ["id", "email", "name", "picture"]
+    },
+    github: {
+        authUrl:    "https://github.com/login/oauth/authorize",
+        tokenUrl:   "https://github.com/login/oauth/access_token",
+        profileUrl: "https://api.github.com/user",
+        emailUrl:   "https://api.github.com/user/emails",
+        scopes:     ["user:email", "read:user"],
+        fields:     ["id", "email", "name", "avatar_url", "login"]
+    },
+    facebook: {
+        authUrl:    "https://www.facebook.com/v18.0/dialog/oauth",
+        tokenUrl:   "https://graph.facebook.com/v18.0/oauth/access_token",
+        profileUrl: "https://graph.facebook.com/me",
+        scopes:     ["email", "public_profile"],
+        fields:     ["id", "email", "name", "picture"]
+    }
+};
+
+export function loadAuthConfig(configPath = null) {
+    const candidates = [
+        configPath,
+        path.join(process.cwd(), CONFIG_FILE),
+    ].filter(Boolean);
+
+    for (const c of candidates) {
+        if (fs.existsSync(c)) return fs.readJsonSync(c);
+    }
+    throw new Error(`${CONFIG_FILE} not found. Run: wh auth init`);
+}
+
+export async function saveAuthConfig(config, configPath = null) {
+    const dest = configPath || path.join(process.cwd(), CONFIG_FILE);
+    await fs.writeJson(dest, config, { spaces: 2 });
+    return dest;
+}
+
+export function generateSessionSecret() {
+    return crypto.randomBytes(32).toString("hex");
+}
+
+export function buildCallbackUrl(baseUrl, callbackPath, provider, port = null) {
+    let base = baseUrl.replace(/\/$/, "");
+
+    // If port is provided and not already in the URL, inject it
+    if (port) {
+        try {
+            const u = new URL(base);
+            if (!u.port) u.port = String(port);
+            base = u.origin;
+        } catch (_) {}
+    }
+
+    const cb = callbackPath.replace(/\/$/, "");
+    return `${base}${cb}/${provider}`;
+}

package/helper/bundler.js

@@ -49,13 +49,14 @@ export async function bundle(componentDir, projectId) {
     const encryptChunk = (content, salt) => encrypt(content, projectId, salt);
 
     const payload = {
-        v: 2,                                    // version 2 = AES encrypted
+        v: 2,
         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
+        props: meta.props || {},
+        integrity: integrityHash(html + css + js)
     };
 
     return JSON.stringify(payload);

package/helper/dbHandler.js

@@ -31,10 +31,17 @@ function getFirestore(serviceAccountPath) {
 
 async function firebaseRegister(db, projectId, meta) {
     const { name, version, cdnUrl, token, expires, dependencies = [] } = meta;
-    await db
-        .collection("projects").doc(projectId)
-        .collection("components").doc(name)
-        .collection("versions").doc(version)
+
+    // Ensure parent project document exists (required for Firestore queries)
+    const projectRef = db.collection("projects").doc(projectId);
+    await projectRef.set({ projectId, updatedAt: admin.firestore.FieldValue.serverTimestamp() }, { merge: true });
+
+    // Ensure component document exists
+    const compRef = projectRef.collection("components").doc(name);
+    await compRef.set({ name, updatedAt: admin.firestore.FieldValue.serverTimestamp() }, { merge: true });
+
+    // Write version
+    await compRef.collection("versions").doc(version)
         .set({ name, version, cdnUrl, token, expires, dependencies, createdAt: admin.firestore.FieldValue.serverTimestamp() });
 }
 

package/helper/oauthHandler.js

@@ -0,0 +1,149 @@
+import crypto from "crypto";
+import { PROVIDERS } from "./authConfig.js";
+
+/**
+ * Build the OAuth redirect URL for a provider.
+ */
+export function buildAuthUrl(provider, config, state) {
+    const p = PROVIDERS[provider];
+    const providerConfig = config.providers[provider];
+    if (!p || !providerConfig) throw new Error(`Provider "${provider}" not configured.`);
+
+    const params = new URLSearchParams({
+        client_id:     providerConfig.clientId,
+        redirect_uri:  providerConfig.callbackUrl,
+        response_type: "code",
+        scope:         p.scopes.join(" "),
+        state
+    });
+
+    if (provider === "google") params.set("access_type", "offline");
+
+    return `${p.authUrl}?${params.toString()}`;
+}
+
+/**
+ * Exchange authorization code for access token.
+ */
+export async function exchangeCode(provider, code, config) {
+    const p = PROVIDERS[provider];
+    const providerConfig = config.providers[provider];
+
+    const body = new URLSearchParams({
+        client_id:     providerConfig.clientId,
+        client_secret: providerConfig.clientSecret,
+        code,
+        redirect_uri:  providerConfig.callbackUrl,
+        grant_type:    "authorization_code"
+    });
+
+    const res = await fetch(p.tokenUrl, {
+        method:  "POST",
+        headers: { "Content-Type": "application/x-www-form-urlencoded", "Accept": "application/json" },
+        body:    body.toString()
+    });
+
+    const data = await res.json();
+    if (data.error) throw new Error(`Token exchange failed: ${data.error_description || data.error}`);
+    return data.access_token;
+}
+
+/**
+ * Fetch user profile from provider.
+ */
+export async function fetchProfile(provider, accessToken) {
+    const p = PROVIDERS[provider];
+
+    const res = await fetch(
+        provider === "facebook"
+            ? `${p.profileUrl}?fields=${p.fields.join(",")}&access_token=${accessToken}`
+            : p.profileUrl,
+        { headers: { Authorization: `Bearer ${accessToken}`, "User-Agent": "WebHanger-Auth/1.0" } }
+    );
+
+    const profile = await res.json();
+
+    // GitHub: email may need separate request
+    if (provider === "github" && !profile.email) {
+        const emailRes = await fetch(p.emailUrl, {
+            headers: { Authorization: `Bearer ${accessToken}`, "User-Agent": "WebHanger-Auth/1.0" }
+        });
+        const emails = await emailRes.json();
+        const primary = emails.find(e => e.primary && e.verified);
+        if (primary) profile.email = primary.email;
+    }
+
+    // Normalize profile across providers
+    return normalizeProfile(provider, profile);
+}
+
+function normalizeProfile(provider, raw) {
+    switch (provider) {
+        case "google":
+            return {
+                id:       raw.id,
+                email:    raw.email,
+                name:     raw.name,
+                avatar:   raw.picture,
+                provider: "google"
+            };
+        case "github":
+            return {
+                id:       String(raw.id),
+                email:    raw.email || "",
+                name:     raw.name || raw.login,
+                avatar:   raw.avatar_url,
+                username: raw.login,
+                provider: "github"
+            };
+        case "facebook":
+            return {
+                id:       raw.id,
+                email:    raw.email || "",
+                name:     raw.name,
+                avatar:   raw.picture?.data?.url || "",
+                provider: "facebook"
+            };
+        default:
+            return { ...raw, provider };
+    }
+}
+
+/**
+ * Issue a signed JWT for the user.
+ */
+export function issueJWT(user, sessionSecret, expiresIn = "7d") {
+    const header  = btoa(JSON.stringify({ alg: "HS256", typ: "JWT" }));
+    const exp     = Math.floor(Date.now() / 1000) + parseDuration(expiresIn);
+    const payload = btoa(JSON.stringify({ ...user, exp, iat: Math.floor(Date.now() / 1000) }));
+    const sig     = crypto.createHmac("sha256", sessionSecret)
+                          .update(`${header}.${payload}`).digest("base64url");
+    return `${header}.${payload}.${sig}`;
+}
+
+/**
+ * Verify and decode a JWT.
+ */
+export function verifyJWT(token, sessionSecret) {
+    const [header, payload, sig] = token.split(".");
+    const expected = crypto.createHmac("sha256", sessionSecret)
+                           .update(`${header}.${payload}`).digest("base64url");
+    if (sig !== expected) throw new Error("Invalid token signature.");
+    const data = JSON.parse(Buffer.from(payload, "base64").toString("utf-8"));
+    if (data.exp && Date.now() / 1000 > data.exp) throw new Error("Token expired.");
+    return data;
+}
+
+function parseDuration(str) {
+    const units = { s: 1, m: 60, h: 3600, d: 86400 };
+    const match = str.match(/^(\d+)([smhd])$/);
+    if (!match) return 604800; // default 7d
+    return parseInt(match[1]) * (units[match[2]] || 1);
+}
+
+/**
+ * Generate a random state token for CSRF protection.
+ */
+export function generateState() {
+    return crypto.randomBytes(16).toString("hex");
+}