webhanger 1.0.0

package/bin/cli.js

@@ -0,0 +1,281 @@
+#!/usr/bin/env node
+import inquirer from "inquirer";
+import fs from "fs-extra";
+import chalk from "chalk";
+import path from "path";
+import { generateSecretKey } from "../helper/signer.js";
+import { deploy } from "../core/registry.js";
+import loadConfig from "../helper/loadConfig.js";
+import { provisionBucket, provisionCloudFront } from "../helper/awsProvisioner.js";
+
+const args = process.argv.slice(2);
+const command = args[0];
+
+const BANNER = `
+ ██╗    ██╗███████╗██████╗ ██╗  ██╗ █████╗ ███╗   ██╗ ██████╗ ███████╗██████╗ 
+ ██║    ██║██╔════╝██╔══██╗██║  ██║██╔══██╗████╗  ██║██╔════╝ ██╔════╝██╔══██╗
+ ██║ █╗ ██║█████╗  ██████╔╝███████║███████║██╔██╗ ██║██║  ███╗█████╗  ██████╔╝
+ ██║███╗██║██╔══╝  ██╔══██╗██╔══██║██╔══██║██║╚██╗██║██║   ██║██╔══╝  ██╔══██╗
+ ╚███╔███╔╝███████╗██████╔╝██║  ██║██║  ██║██║ ╚████║╚██████╔╝███████╗██║  ██║
+  ╚══╝╚══╝ ╚══════╝╚═════╝ ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═══╝ ╚═════╝ ╚══════╝╚═╝  ╚═╝
+`;
+
+async function init() {
+    console.log(chalk.cyan(BANNER));
+
+    console.log(chalk.bold.white("\n📦 Storage Providers:"));
+    console.log(chalk.gray("  r2     — Cloudflare R2 (zero egress fees, global edge)"));
+    console.log(chalk.gray("  s3     — AWS S3 (industry standard, global regions)"));
+    console.log(chalk.gray("  minio  — Self-hosted MinIO (full control, S3-compatible)"));
+    console.log(chalk.gray("  local  — Local disk (dev/testing only, no CDN)\n"));
+
+    console.log(chalk.bold.white("🗄️  Database Providers:"));
+    console.log(chalk.gray("  firebase   — Firebase Firestore (free tier, real-time, globally distributed)"));
+    console.log(chalk.gray("  supabase   — Supabase Postgres (open source, free tier, REST + realtime)"));
+    console.log(chalk.gray("  mongodb    — MongoDB Atlas (flexible documents, free tier)\n"));
+
+    const answers = await inquirer.prompt([
+        {
+            type: "input",
+            name: "projectName",
+            message: "Project name:",
+            default: "my-webhanger-app"
+        },
+
+        // ── STORAGE ──────────────────────────────────────────────────────────
+        {
+            type: "list",
+            name: "storageProvider",
+            message: "Select storage provider:",
+            choices: [
+                { name: "r2     — Cloudflare R2", value: "r2" },
+                { name: "s3     — AWS S3", value: "s3" },
+                { name: "minio  — Self-hosted MinIO", value: "minio" },
+                { name: "local  — Local disk (dev only)", value: "local" }
+            ]
+        },
+        {
+            type: "input",
+            name: "localPath",
+            message: "Local storage path:",
+            default: "./storage",
+            when: (a) => a.storageProvider === "local"
+        },
+        {
+            type: "input",
+            name: "endpoint",
+            message: "Endpoint URL (e.g. https://<id>.r2.cloudflarestorage.com or http://localhost:9000):",
+            when: (a) => a.storageProvider === "r2" || a.storageProvider === "minio"
+        },
+        {
+            type: "input",
+            name: "accessKey",
+            message: "Storage Access Key:",
+            when: (a) => a.storageProvider !== "local"
+        },
+        {
+            type: "password",
+            name: "storageSecret",
+            message: "Storage Secret Key:",
+            when: (a) => a.storageProvider !== "local"
+        },
+        {
+            type: "input",
+            name: "bucket",
+            message: "Bucket name:",
+            when: (a) => a.storageProvider !== "local"
+        },
+        {
+            type: "input",
+            name: "region",
+            message: "Region (e.g. us-east-1):",
+            default: "us-east-1",
+            when: (a) => a.storageProvider === "s3"
+        },
+
+        // ── CDN ───────────────────────────────────────────────────────────────
+        {
+            type: "input",
+            name: "cdnBase",
+            message: "CDN base URL (your edge URL pointing to storage):",
+            when: (a) => a.storageProvider !== "local" && a.storageProvider !== "s3"
+        },
+
+        // ── DATABASE ──────────────────────────────────────────────────────────
+        {
+            type: "list",
+            name: "dbProvider",
+            message: "Select database provider:",
+            choices: [
+                { name: "firebase  — Firebase Firestore", value: "firebase" },
+                { name: "supabase  — Supabase Postgres", value: "supabase" },
+                { name: "mongodb   — MongoDB Atlas", value: "mongodb" }
+            ]
+        },
+
+        // Firebase
+        {
+            type: "input",
+            name: "firebaseServiceAccount",
+            message: "Path to Firebase service account JSON:",
+            default: "./firebase-service-account.json",
+            when: (a) => a.dbProvider === "firebase"
+        },
+
+        // Supabase
+        {
+            type: "input",
+            name: "supabaseUrl",
+            message: "Supabase project URL (https://xxx.supabase.co):",
+            when: (a) => a.dbProvider === "supabase"
+        },
+        {
+            type: "password",
+            name: "supabaseKey",
+            message: "Supabase service role key:",
+            when: (a) => a.dbProvider === "supabase"
+        },
+
+        // MongoDB
+        {
+            type: "input",
+            name: "mongoUri",
+            message: "MongoDB connection URI:",
+            when: (a) => a.dbProvider === "mongodb"
+        }
+    ]);
+
+    const projectId = `wh_${Date.now()}`;
+    const secretKey = generateSecretKey();
+
+    // Auto-provision S3 bucket + CloudFront
+    let cdnUrl = answers.storageProvider === "local" ? "http://localhost" : answers.cdnBase?.replace(/\/$/, "");
+    let distributionId = null;
+    const bucketName = answers.bucket || `webhanger-${projectId}`;
+
+    if (answers.storageProvider === "s3") {
+        console.log(chalk.cyan("\n⚙️  Provisioning AWS infrastructure..."));
+        try {
+            await provisionBucket(answers.accessKey, answers.storageSecret, answers.region, bucketName);
+            const cf = await provisionCloudFront(answers.accessKey, answers.storageSecret, bucketName, answers.region);
+            cdnUrl = cf.cdnUrl;
+            distributionId = cf.distributionId;
+        } catch (err) {
+            console.log(chalk.red(`\n❌ AWS provisioning failed: ${err.message}`));
+            console.log(chalk.yellow("Check your IAM permissions (S3FullAccess + CloudFrontFullAccess required)."));
+            process.exit(1);
+        }
+    }
+
+    // Build DB config based on provider
+    const dbConfig = answers.dbProvider === "firebase"
+        ? { provider: "firebase", serviceAccountPath: answers.firebaseServiceAccount }
+        : answers.dbProvider === "supabase"
+        ? { provider: "supabase", url: answers.supabaseUrl, key: answers.supabaseKey }
+        : { provider: "mongodb", uri: answers.mongoUri };
+
+    const config = {
+        project: answers.projectName,
+        projectId,
+        secretKey,
+        webHangerVersion: "1.0.0",
+        storage: {
+            provider: answers.storageProvider,
+            ...(answers.storageProvider === "local"
+                ? { localPath: answers.localPath }
+                : {
+                    accessKey: answers.accessKey,
+                    secretKey: answers.storageSecret,
+                    bucket: bucketName,
+                    region: answers.region || "auto",
+                    ...(answers.endpoint ? { endpoint: answers.endpoint } : {}),
+                    ...(distributionId ? { distributionId } : {})
+                })
+        },
+        cdn: { url: cdnUrl },
+        db: dbConfig
+    };
+
+    await fs.writeJson("./webhanger.config.json", config, { spaces: 2 });
+    console.log(chalk.green("\n✅ webhanger.config.json created."));
+    console.log(chalk.yellow(`🔑 Project ID: ${projectId}`));
+    console.log(chalk.gray("Keep your secretKey safe — it signs all your component URLs.\n"));
+}
+
+async function deployCommand() {
+    const [, , , componentDir, name, version] = process.argv;
+
+    if (!componentDir || !name || !version) {
+        console.log(chalk.red("Usage: wh deploy <component-dir> <name> <version>"));
+        console.log(chalk.gray("Example: wh deploy ./components/navbar navbar 1.0.0"));
+        process.exit(1);
+    }
+
+    const config = loadConfig();
+
+    // Ask user about token + expiry
+    const options = await inquirer.prompt([
+        {
+            type: "confirm",
+            name: "useCustomToken",
+            message: "Set a custom token? (No = auto-generate):",
+            default: false
+        },
+        {
+            type: "input",
+            name: "customToken",
+            message: "Enter your custom token:",
+            when: (a) => a.useCustomToken
+        },
+        {
+            type: "confirm",
+            name: "setExpiry",
+            message: "Set an expiry for this component token?",
+            default: false
+        },
+        {
+            type: "input",
+            name: "expirySeconds",
+            message: "Expiry in seconds (e.g. 3600 = 1hr, 86400 = 1day, 2592000 = 30days):",
+            when: (a) => a.setExpiry,
+            validate: (v) => !isNaN(parseInt(v)) || "Please enter a valid number"
+        }
+    ]);
+
+    const expiresInSeconds = options.setExpiry ? parseInt(options.expirySeconds) : null;
+    const customToken = options.useCustomToken ? options.customToken : null;
+
+    console.log(chalk.cyan(`\n🚀 Deploying ${name}@${version}...`));
+
+    try {
+        const result = await deploy(config, componentDir, name, version, [], expiresInSeconds, customToken);
+        console.log(chalk.green(`\n✅ Deployed successfully!`));
+        console.log(chalk.white(`📦 CDN URL : ${result.cdnUrl}`));
+        console.log(chalk.white(`🔐 Token   : ${result.token}`));
+        if (result.expires === 0) {
+            console.log(chalk.gray(`⏱  Expires : never`));
+        } else {
+            console.log(chalk.white(`⏱  Expires : ${result.expires}`));
+            console.log(chalk.gray(`            (${new Date(result.expires * 1000).toISOString()})`));
+        }
+    } catch (err) {
+        console.log(chalk.red(`\n❌ Deploy failed: ${err.message}`));
+        process.exit(1);
+    }
+}
+
+// Router
+switch (command) {
+    case "init":
+        init();
+        break;
+    case "deploy":
+        deployCommand();
+        break;
+    default:
+        console.log(chalk.cyan(BANNER));
+        console.log(chalk.white("Commands:"));
+        console.log(chalk.gray("  wh init                                  — setup your project"));
+        console.log(chalk.gray("  wh deploy <dir> <name> <version>         — bundle & deploy a component"));
+        break;
+}

package/core/registry.js

@@ -0,0 +1,38 @@
+import { bundle } from "../helper/bundler.js";
+import { upload } from "../helper/bucketHandler.js";
+import { signUrl } from "../helper/signer.js";
+import { registerComponent } from "../helper/dbHandler.js";
+
+/**
+ * Full deploy flow:
+ * 1. Bundle component folder → single JS
+ * 2. Upload to storage
+ * 3. Generate signed CDN URL
+ * 4. Register metadata in Firestore
+ */
+export async function deploy(config, componentDir, name, version, dependencies = [], expiresInSeconds = null, customToken = null) {
+    const { projectId, secretKey, storage, cdn, db } = config;
+
+    // 1. Bundle + encode
+    const bundledJs = await bundle(componentDir, projectId);
+
+    // 2. Upload
+    const storageKey = `components/${name}@${version}.js`;
+    await upload(storage, storageKey, bundledJs);
+
+    // 3. Sign — use custom token if provided, otherwise HMAC-generate
+    const cdnUrl = `${cdn.url}/${storageKey}`;
+    let token, expires;
+
+    if (customToken) {
+        expires = expiresInSeconds ? Math.floor(Date.now() / 1000) + expiresInSeconds : 0;
+        token = customToken;
+    } else {
+        ({ token, expires } = signUrl(storageKey, projectId, secretKey, expiresInSeconds));
+    }
+
+    // 4. Register in DB
+    await registerComponent(db, projectId, { name, version, cdnUrl, token, expires, dependencies });
+
+    return { cdnUrl, token, expires };
+}

package/helper/awsProvisioner.js

@@ -0,0 +1,160 @@
+import {
+    S3Client,
+    CreateBucketCommand,
+    PutBucketVersioningCommand,
+    PutBucketPolicyCommand,
+    PutPublicAccessBlockCommand,
+    PutBucketCorsCommand,
+    HeadBucketCommand
+} from "@aws-sdk/client-s3";
+
+import {
+    CloudFrontClient,
+    CreateDistributionCommand,
+    GetDistributionCommand
+} from "@aws-sdk/client-cloudfront";
+
+function getS3(accessKey, secretKey, region) {
+    return new S3Client({
+        region,
+        credentials: { accessKeyId: accessKey, secretAccessKey: secretKey }
+    });
+}
+
+function getCF(accessKey, secretKey) {
+    return new CloudFrontClient({
+        region: "us-east-1", // CloudFront is always us-east-1
+        credentials: { accessKeyId: accessKey, secretAccessKey: secretKey }
+    });
+}
+
+/**
+ * Creates the S3 bucket if it doesn't exist.
+ * Enables versioning and sets a private policy.
+ */
+export async function provisionBucket(accessKey, secretKey, region, bucketName) {
+    const s3 = getS3(accessKey, secretKey, region);
+
+    // Check if bucket already exists
+    try {
+        await s3.send(new HeadBucketCommand({ Bucket: bucketName }));
+        console.log(`  ✓ Bucket "${bucketName}" already exists, skipping creation.`);
+    } catch {
+        // Create bucket
+        const createParams = { Bucket: bucketName };
+        // us-east-1 does NOT accept LocationConstraint
+        if (region !== "us-east-1") {
+            createParams.CreateBucketConfiguration = { LocationConstraint: region };
+        }
+        await s3.send(new CreateBucketCommand(createParams));
+        console.log(`  ✓ Bucket "${bucketName}" created.`);
+    }
+
+    // Disable block public access so bucket policy can allow CloudFront reads
+    await s3.send(new PutPublicAccessBlockCommand({
+        Bucket: bucketName,
+        PublicAccessBlockConfiguration: {
+            BlockPublicAcls: false,
+            IgnorePublicAcls: false,
+            BlockPublicPolicy: false,
+            RestrictPublicBuckets: false
+        }
+    }));
+    console.log(`  ✓ Public access block disabled.`);
+
+    // Enable versioning
+    await s3.send(new PutBucketVersioningCommand({
+        Bucket: bucketName,
+        VersioningConfiguration: { Status: "Enabled" }
+    }));
+    console.log(`  ✓ Versioning enabled.`);
+
+    // Allow public read for CloudFront delivery
+    const policy = JSON.stringify({
+        Version: "2012-10-17",
+        Statement: [{
+            Sid: "AllowCloudFrontRead",
+            Effect: "Allow",
+            Principal: "*",
+            Action: "s3:GetObject",
+            Resource: `arn:aws:s3:::${bucketName}/*`
+        }]
+    });
+
+    await s3.send(new PutBucketPolicyCommand({ Bucket: bucketName, Policy: policy }));
+    console.log(`  ✓ Bucket policy set (public read for CDN delivery).`);
+
+    // Set CORS so CloudFront can serve to browsers
+    await s3.send(new PutBucketCorsCommand({
+        Bucket: bucketName,
+        CORSConfiguration: {
+            CORSRules: [{
+                AllowedHeaders: ["*"],
+                AllowedMethods: ["GET", "HEAD"],
+                AllowedOrigins: ["*"],
+                ExposeHeaders: [],
+                MaxAgeSeconds: 3000
+            }]
+        }
+    }));
+    console.log(`  ✓ CORS configured.`);
+}
+
+/**
+ * Creates a CloudFront distribution pointing to the S3 bucket.
+ * Restricts access — files only served with a valid signed token (viewer policy: https only).
+ * Returns the CloudFront domain URL.
+ */
+export async function provisionCloudFront(accessKey, secretKey, bucketName, region) {
+    const cf = getCF(accessKey, secretKey);
+    const s3Origin = `${bucketName}.s3.${region}.amazonaws.com`;
+
+    const params = {
+        DistributionConfig: {
+            CallerReference: `wh-${Date.now()}`,
+            Comment: `WebHanger CDN for ${bucketName}`,
+            Enabled: true,
+            DefaultCacheBehavior: {
+                TargetOriginId: "s3-origin",
+                ViewerProtocolPolicy: "https-only",
+                CachePolicyId: "658327ea-f89d-4fab-a63d-7e88639e58f6", // CachingOptimized
+                OriginRequestPolicyId: "88a5eaf4-2fd4-4709-b370-b4c650ea3fcf", // CORS-S3Origin
+                ResponseHeadersPolicyId: "60669652-455b-4ae9-85a4-c4c02393f86c", // CORS-With-Preflight
+                AllowedMethods: {
+                    Quantity: 2,
+                    Items: ["GET", "HEAD"]
+                },
+                TrustedSigners: {
+                    Enabled: false,
+                    Quantity: 0
+                }
+            },
+            Origins: {
+                Quantity: 1,
+                Items: [{
+                    Id: "s3-origin",
+                    DomainName: s3Origin,
+                    S3OriginConfig: { OriginAccessIdentity: "" },
+                    CustomHeaders: {                       // custom header so S3 knows request is from CF
+                        Quantity: 1,
+                        Items: [{
+                            HeaderName: "x-wh-origin",
+                            HeaderValue: "cloudfront"
+                        }]
+                    }
+                }]
+            },
+            HttpVersion: "http2",
+            PriceClass: "PriceClass_All"                  // global edge nodes
+        }
+    };
+
+    const res = await cf.send(new CreateDistributionCommand(params));
+    const domain = res.Distribution.DomainName;
+    const distributionId = res.Distribution.Id;
+
+    console.log(`  ✓ CloudFront distribution created: https://${domain}`);
+    console.log(`  ⏳ Note: CloudFront takes ~10-15 min to fully deploy globally.`);
+
+    return { cdnUrl: `https://${domain}`, distributionId };
+}

package/helper/bucketHandler.js

@@ -0,0 +1,61 @@
+import { S3Client, PutObjectCommand, DeleteObjectCommand } from "@aws-sdk/client-s3";
+import fs from "fs-extra";
+import path from "path";
+
+function getS3Client(storage) {
+    const config = {
+        region: storage.region || "auto",
+        credentials: {
+            accessKeyId: storage.accessKey,
+            secretAccessKey: storage.secretKey
+        }
+    };
+
+    // R2 and MinIO need a custom endpoint
+    if (storage.provider === "r2" || storage.provider === "minio") {
+        config.endpoint = storage.endpoint;
+        config.forcePathStyle = true; // required for MinIO
+    }
+
+    return new S3Client(config);
+}
+
+/**
+ * Uploads a file buffer to the configured storage provider.
+ * Returns the storage path (key) of the uploaded file.
+ */
+export async function upload(storage, key, content) {
+    if (storage.provider === "local") {
+        const dest = path.join(storage.localPath, key);
+        await fs.ensureDir(path.dirname(dest));
+        await fs.writeFile(dest, content, "utf-8");
+        return key;
+    }
+
+    const client = getS3Client(storage);
+    await client.send(new PutObjectCommand({
+        Bucket: storage.bucket,
+        Key: key,
+        Body: content,
+        ContentType: "application/javascript"
+    }));
+
+    return key;
+}
+
+/**
+ * Deletes a file from storage.
+ */
+export async function remove(storage, key) {
+    if (storage.provider === "local") {
+        const dest = path.join(storage.localPath, key);
+        await fs.remove(dest);
+        return;
+    }
+
+    const client = getS3Client(storage);
+    await client.send(new DeleteObjectCommand({
+        Bucket: storage.bucket,
+        Key: key
+    }));
+}

package/helper/bundler.js

@@ -0,0 +1,48 @@
+import fs from "fs-extra";
+import path from "path";
+
+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.
+ * 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) {
+    const files = await fs.readdir(componentDir);
+
+    let html = "", css = "", js = "";
+
+    for (const file of files) {
+        const filePath = path.join(componentDir, file);
+        const ext = path.extname(file).toLowerCase();
+        const content = await fs.readFile(filePath, "utf-8");
+
+        if (ext === ".html") html = content.trim();
+        else if (ext === ".css") css = content.trim();
+        else if (ext === ".js") js = content.trim();
+    }
+
+    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") : "";
+
+    const payload = {
+        v: 1,
+        h: encrypt(html, "::html"),
+        c: encrypt(css,  "::css"),
+        j: encrypt(js,   "::js")
+    };
+
+    return JSON.stringify(payload);
+}

package/helper/dbHandler.js

@@ -0,0 +1,122 @@
+import admin from "firebase-admin";
+import fs from "fs-extra";
+
+// ─── Firebase ─────────────────────────────────────────────────────────────────
+
+let firebaseDb = null;
+
+function getFirestore(serviceAccountPath) {
+    if (firebaseDb) return firebaseDb;
+    const serviceAccount = fs.readJsonSync(serviceAccountPath);
+    if (!admin.apps.length) {
+        admin.initializeApp({ credential: admin.credential.cert(serviceAccount) });
+    }
+    firebaseDb = admin.firestore();
+    return firebaseDb;
+}
+
+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)
+        .set({ name, version, cdnUrl, token, expires, dependencies, createdAt: admin.firestore.FieldValue.serverTimestamp() });
+}
+
+async function firebaseGet(db, projectId, name, version) {
+    const snap = await db
+        .collection("projects").doc(projectId)
+        .collection("components").doc(name)
+        .collection("versions").doc(version)
+        .get();
+    return snap.exists ? snap.data() : null;
+}
+
+// ─── Supabase ─────────────────────────────────────────────────────────────────
+
+async function getSupabase(url, key) {
+    const { createClient } = await import("@supabase/supabase-js");
+    return createClient(url, key);
+}
+
+async function supabaseRegister(client, projectId, meta) {
+    const { error } = await client.from("wh_components").upsert({
+        project_id: projectId,
+        name: meta.name,
+        version: meta.version,
+        cdn_url: meta.cdnUrl,
+        token: meta.token,
+        expires: meta.expires,
+        dependencies: meta.dependencies || [],
+        created_at: new Date().toISOString()
+    });
+    if (error) throw new Error(`Supabase error: ${error.message}`);
+}
+
+async function supabaseGet(client, projectId, name, version) {
+    const { data, error } = await client
+        .from("wh_components")
+        .select("*")
+        .eq("project_id", projectId)
+        .eq("name", name)
+        .eq("version", version)
+        .single();
+    if (error) return null;
+    return data ? { ...data, cdnUrl: data.cdn_url } : null;
+}
+
+// ─── MongoDB ──────────────────────────────────────────────────────────────────
+
+async function getMongo(uri) {
+    const { MongoClient } = await import("mongodb");
+    const client = new MongoClient(uri);
+    await client.connect();
+    return client.db("webhanger");
+}
+
+async function mongoRegister(db, projectId, meta) {
+    await db.collection("components").updateOne(
+        { projectId, name: meta.name, version: meta.version },
+        { $set: { ...meta, projectId, createdAt: new Date() } },
+        { upsert: true }
+    );
+}
+
+async function mongoGet(db, projectId, name, version) {
+    return await db.collection("components").findOne({ projectId, name, version });
+}
+
+// ─── Public API ───────────────────────────────────────────────────────────────
+
+export async function registerComponent(dbConfig, projectId, meta) {
+    if (dbConfig.provider === "firebase") {
+        const db = getFirestore(dbConfig.serviceAccountPath);
+        return firebaseRegister(db, projectId, meta);
+    }
+    if (dbConfig.provider === "supabase") {
+        const client = await getSupabase(dbConfig.url, dbConfig.key);
+        return supabaseRegister(client, projectId, meta);
+    }
+    if (dbConfig.provider === "mongodb") {
+        const db = await getMongo(dbConfig.uri);
+        return mongoRegister(db, projectId, meta);
+    }
+    throw new Error(`Unknown DB provider: ${dbConfig.provider}`);
+}
+
+export async function getComponent(dbConfig, projectId, name, version) {
+    if (dbConfig.provider === "firebase") {
+        const db = getFirestore(dbConfig.serviceAccountPath);
+        return firebaseGet(db, projectId, name, version);
+    }
+    if (dbConfig.provider === "supabase") {
+        const client = await getSupabase(dbConfig.url, dbConfig.key);
+        return supabaseGet(client, projectId, name, version);
+    }
+    if (dbConfig.provider === "mongodb") {
+        const db = await getMongo(dbConfig.uri);
+        return mongoGet(db, projectId, name, version);
+    }
+    throw new Error(`Unknown DB provider: ${dbConfig.provider}`);
+}

package/helper/firebaseHandler.js

@@ -0,0 +1,59 @@
+import admin from "firebase-admin";
+import fs from "fs-extra";
+
+let db = null;
+
+export function initFirebase(serviceAccountPath) {
+    if (db) return db; // already initialized
+
+    const serviceAccount = fs.readJsonSync(serviceAccountPath);
+
+    if (!admin.apps.length) {
+        admin.initializeApp({
+            credential: admin.credential.cert(serviceAccount)
+        });
+    }
+
+    db = admin.firestore();
+    return db;
+}
+
+/**
+ * Registers a component in Firestore under:
+ * projects/{projectId}/components/{name}/versions/{version}
+ */
+export async function registerComponent(serviceAccountPath, projectId, componentMeta) {
+    const db = initFirebase(serviceAccountPath);
+    const { name, version, cdnUrl, token, expires, dependencies = [] } = componentMeta;
+
+    const ref = db
+        .collection("projects").doc(projectId)
+        .collection("components").doc(name)
+        .collection("versions").doc(version);
+
+    await ref.set({
+        name,
+        version,
+        cdnUrl,
+        token,
+        expires,
+        dependencies,
+        createdAt: admin.firestore.FieldValue.serverTimestamp()
+    });
+}
+
+/**
+ * Fetches a specific component version metadata.
+ */
+export async function getComponent(serviceAccountPath, projectId, name, version) {
+    const db = initFirebase(serviceAccountPath);
+
+    const ref = db
+        .collection("projects").doc(projectId)
+        .collection("components").doc(name)
+        .collection("versions").doc(version);
+
+    const snap = await ref.get();
+    if (!snap.exists) return null;
+    return snap.data();
+}

package/helper/loadConfig.js

@@ -0,0 +1,19 @@
+import fs from "fs";
+import path from "path";
+
+export default function loadConfig() {
+    const configPath = path.join(process.cwd(), "webhanger.config.json");
+
+    if (!fs.existsSync(configPath)) {
+        throw new Error("webhanger.config.json not found. Run `wh init` first.");
+    }
+
+    const raw = fs.readFileSync(configPath, "utf-8");
+    const config = JSON.parse(raw);
+
+    if (!config.projectId || !config.secretKey) {
+        throw new Error("Invalid config: missing projectId or secretKey.");
+    }
+
+    return config;
+}

package/helper/signer.js

@@ -0,0 +1,30 @@
+import crypto from "crypto";
+
+/**
+ * Signs a component URL with HMAC-SHA256.
+ * expiresInSeconds is optional — if not provided, token never expires.
+ */
+export function signUrl(componentPath, projectId, secretKey, expiresInSeconds = null) {
+    const expires = expiresInSeconds ? Math.floor(Date.now() / 1000) + expiresInSeconds : 0; // 0 = no expiry
+    const payload = `${projectId}:${componentPath}:${expires}`;
+    const token = crypto.createHmac("sha256", secretKey).update(payload).digest("hex");
+    return { token, expires };
+}
+
+/**
+ * Verifies a signed token.
+ * If expires is 0, token never expires.
+ */
+export function verifyToken(componentPath, projectId, secretKey, token, expires) {
+    if (expires !== 0 && Date.now() / 1000 > expires) return false;
+    const payload = `${projectId}:${componentPath}:${expires}`;
+    const expected = crypto.createHmac("sha256", secretKey).update(payload).digest("hex");
+    return crypto.timingSafeEqual(Buffer.from(token), Buffer.from(expected));
+}
+
+/**
+ * Generates a one-time project secret key on init.
+ */
+export function generateSecretKey() {
+    return crypto.randomBytes(32).toString("hex");
+}

package/index.js

@@ -0,0 +1,152 @@
+import loadConfig from "./helper/loadConfig.js";
+import { getComponent, registerComponent } from "./helper/dbHandler.js";
+import { verifyToken, signUrl, generateSecretKey } from "./helper/signer.js";
+import { deploy as registryDeploy } from "./core/registry.js";
+import { provisionBucket, provisionCloudFront } from "./helper/awsProvisioner.js";
+import { upload, remove } from "./helper/bucketHandler.js";
+import { bundle } from "./helper/bundler.js";
+
+export class WebHanger {
+    constructor(configPath = null) {
+        this.config = loadConfig(configPath);
+    }
+
+    /**
+     * Bundle + upload + sign + register a component.
+     * @param {string} componentDir - path to folder with html/css/js
+     * @param {string} name         - component name e.g. "navbar"
+     * @param {string} version      - semver string e.g. "1.0.0"
+     * @param {object} options      - { expiresInSeconds, token, dependencies }
+     */
+    async deploy(componentDir, name, version, options = {}) {
+        const { expiresInSeconds = null, token = null, dependencies = [] } = options;
+        return await registryDeploy(
+            this.config,
+            componentDir,
+            name,
+            version,
+            dependencies,
+            expiresInSeconds,
+            token
+        );
+    }
+
+    /**
+     * Resolve a component — fetch metadata + verify token.
+     * Returns { cdnUrl, token, expires, dependencies }
+     */
+    async resolve(name, version = "latest") {
+        const { projectId, secretKey, db } = this.config;
+        const meta = await getComponent(db, projectId, name, version);
+        if (!meta) throw new Error(`Component ${name}@${version} not found.`);
+
+        if (meta.expires !== 0) {
+            const valid = verifyToken(
+                `components/${name}@${version}.js`,
+                projectId,
+                secretKey,
+                meta.token,
+                meta.expires
+            );
+            if (!valid) throw new Error(`Token for ${name}@${version} is invalid or expired.`);
+        }
+
+        return {
+            cdnUrl: meta.cdnUrl,
+            token: meta.token,
+            expires: meta.expires,
+            dependencies: meta.dependencies
+        };
+    }
+
+    /**
+     * Delete a component from storage.
+     */
+    async remove(name, version) {
+        const { storage } = this.config;
+        const key = `components/${name}@${version}.js`;
+        await remove(storage, key);
+    }
+
+    /**
+     * Re-sign an existing component with a new token/expiry.
+     * Useful for rotating tokens without redeploying.
+     */
+    async resign(name, version, options = {}) {
+        const { expiresInSeconds = null, token = null } = options;
+        const { projectId, secretKey, cdn, db } = this.config;
+        const key = `components/${name}@${version}.js`;
+
+        let newToken, expires;
+        if (token) {
+            expires = expiresInSeconds ? Math.floor(Date.now() / 1000) + expiresInSeconds : 0;
+            newToken = token;
+        } else {
+            ({ token: newToken, expires } = signUrl(key, projectId, secretKey, expiresInSeconds));
+        }
+
+        const cdnUrl = `${cdn.url}/${key}`;
+        const existing = await getComponent(db, projectId, name, version);
+
+        await registerComponent(db, projectId, {
+            name,
+            version,
+            cdnUrl,
+            token: newToken,
+            expires,
+            dependencies: existing?.dependencies || []
+        });
+
+        return { cdnUrl, token: newToken, expires };
+    }
+
+    /**
+     * List all versions of a component from DB.
+     */
+    async versions(name) {
+        const { projectId, db } = this.config;
+
+        if (db.provider === "firebase") {
+            const admin = (await import("firebase-admin")).default;
+            const { initFirebase } = await import("./helper/dbHandler.js");
+            const firestore = initFirebase ? null : null; // handled inside dbHandler
+            // Use raw firestore for listing subcollection
+            const { getComponent: _ , ...rest } = await import("./helper/dbHandler.js");
+            const dbInstance = await getFirestoreInstance(db.serviceAccountPath);
+            const snap = await dbInstance
+                .collection("projects").doc(projectId)
+                .collection("components").doc(name)
+                .collection("versions").get();
+            return snap.docs.map(d => d.data());
+        }
+
+        throw new Error(`versions() not yet supported for provider: ${db.provider}`);
+    }
+
+    /**
+     * Returns the config loaded for this instance.
+     */
+    getConfig() {
+        return this.config;
+    }
+}
+
+// Helper for versions() firebase path
+async function getFirestoreInstance(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();
+}
+
+// Named exports for direct use without instantiation
+export { signUrl, verifyToken, generateSecretKey } from "./helper/signer.js";
+export { bundle } from "./helper/bundler.js";
+export { upload, remove } from "./helper/bucketHandler.js";
+export { registerComponent, getComponent } from "./helper/dbHandler.js";
+export { provisionBucket, provisionCloudFront } from "./helper/awsProvisioner.js";
+export { deploy } from "./core/registry.js";
+export { default as loadConfig } from "./helper/loadConfig.js";

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "webhanger",
+  "version": "1.0.0",
+  "description": "Component-as-a-Service platform — bundle, sign, and deliver UI components via edge CDN",
+  "type": "module",
+  "main": "index.js",
+  "files": [
+    "index.js",
+    "bin/",
+    "core/",
+    "helper/",
+    "sdk/"
+  ],
+  "bin": {
+    "webhanger": "./bin/cli.js",
+    "wh": "./bin/cli.js"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": ["cdn", "components", "caas", "edge", "ui"],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@aws-sdk/client-s3": "^3.0.0",
+    "@aws-sdk/client-cloudfront": "^3.0.0",
+    "@aws-sdk/s3-request-presigner": "^3.0.0",
+    "chalk": "^5.6.2",
+    "firebase-admin": "^12.0.0",
+    "fs-extra": "^11.3.4",
+    "inquirer": "^13.4.1"
+  }
+}

package/sdk/webhanger.sdk.js

@@ -0,0 +1,170 @@
+/**
+ * WebHanger Browser SDK
+ * Fetches encrypted component payload from CDN.
+ * Decrypts each chunk (html/css/js) and applies directly to DOM — no eval.
+ * Handles caching (localStorage / IndexedDB) and offline fallback.
+ */
+(function (global) {
+    const VERSION = "1.0.0";
+    const IDB_NAME = "webhanger_cache";
+    const IDB_STORE = "components";
+    const LS_PREFIX = "wh_";
+
+    // ─── XOR decrypt (mirrors bundler) ───────────────────────────────────────
+
+    function xorDecode(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;
+    }
+
+    function decrypt(b64, projectId, salt) {
+        if (!b64) return "";
+        const decoded = atob(b64);
+        return xorDecode(decoded, projectId + salt);
+    }
+
+    // ─── IndexedDB helpers ───────────────────────────────────────────────────
+
+    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);
+        });
+    }
+
+    // ─── Cache layer ─────────────────────────────────────────────────────────
+
+    const SIZE_THRESHOLD = 50 * 1024;
+
+    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);
+    }
+
+    // ─── Fetch from CDN ───────────────────────────────────────────────────────
+
+    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();
+    }
+
+    // ─── Decrypt + inject directly into DOM (no eval) ─────────────────────────
+
+    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;
+        }
+
+        // Decrypt CSS → inject into <head>
+        const css = decrypt(payload.c, projectId, "::css");
+        if (css) {
+            const style = document.createElement("style");
+            style.textContent = css;
+            document.head.appendChild(style);
+        }
+
+        // Decrypt HTML → inject into mount target
+        const html = decrypt(payload.h, projectId, "::html");
+        if (html) target.innerHTML = html;
+
+        // Decrypt JS → inject as <script> (no eval, browser parses it natively)
+        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);
+        }
+    }
+
+    // ─── Main loader ──────────────────────────────────────────────────────────
+
+    /**
+     * @param {string} cdnUrl      - Full CDN URL of the component
+     * @param {string} projectId   - Your WebHanger project ID (used as decrypt key)
+     * @param {string} token       - HMAC signed token
+     * @param {number} expires     - Token expiry unix timestamp (0 = never)
+     * @param {string} [selector]  - CSS selector of mount element (default: [data-wh])
+     */
+    async function load(cdnUrl, projectId, token, expires, selector = "[data-wh]") {
+        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 cacheKey = `${cdnUrl}@${expires}`;
+
+        try {
+            let payload = await cacheGet(cacheKey);
+
+            if (!payload) {
+                payload = await fetchComponent(cdnUrl, token, expires);
+                await cacheSet(cacheKey, payload);
+            }
+
+            injectComponent(payload, projectId, selector);
+        } catch (err) {
+            console.error("[WebHanger] Load failed:", err.message);
+        }
+    }
+
+    global.WebHanger = { load, version: VERSION };
+
+})(window);

package/sdk/webhanger.sw.js

@@ -0,0 +1,44 @@
+/**
+ * WebHanger Service Worker
+ * Caches component responses for offline use.
+ * Register this in your app: navigator.serviceWorker.register('/webhanger.sw.js')
+ */
+
+const CACHE_NAME = "webhanger_sw_v1";
+
+// Cache component fetch requests
+self.addEventListener("fetch", (event) => {
+    const url = new URL(event.request.url);
+
+    // Only intercept requests to component paths
+    if (!url.pathname.includes("/components/")) return;
+
+    event.respondWith(
+        caches.open(CACHE_NAME).then(async (cache) => {
+            const cached = await cache.match(event.request);
+            if (cached) return cached;
+
+            try {
+                const response = await fetch(event.request);
+                if (response.ok) {
+                    cache.put(event.request, response.clone());
+                }
+                return response;
+            } catch (_) {
+                // Offline and not cached
+                return new Response("/* [WebHanger] Component unavailable offline */", {
+                    headers: { "Content-Type": "application/javascript" }
+                });
+            }
+        })
+    );
+});
+
+// Clean old caches on SW update
+self.addEventListener("activate", (event) => {
+    event.waitUntil(
+        caches.keys().then((keys) =>
+            Promise.all(keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k)))
+        )
+    );
+});