webhanger 1.0.0 → 1.0.1

package/README.md

@@ -0,0 +1,204 @@
+# webhanger
+
+Component-as-a-Service platform. Bundle UI components once, deliver them securely across any website via edge CDN.
+
+---
+
+## Install
+
+```bash
+# CLI (global)
+npm install -g webhanger
+
+# Node.js library
+npm install webhanger
+```
+
+---
+
+## CLI
+
+### `wh init`
+
+Interactive setup. Provisions your storage + CDN + database.
+
+```bash
+wh init
+```
+
+Prompts:
+- Project name
+- Storage provider: `s3` | `r2` | `minio` | `local`
+- Database provider: `firebase` | `supabase` | `mongodb`
+- Credentials for each
+
+For `s3` — automatically creates the S3 bucket, configures CORS, versioning, and spins up a CloudFront distribution. No manual AWS Console steps needed.
+
+Generates `webhanger.config.json` in your project root.
+
+---
+
+### `wh deploy`
+
+Bundle and deploy a component.
+
+```bash
+wh deploy <component-dir> <name> <version>
+```
+
+```bash
+wh deploy ./components/navbar navbar 1.0.0
+```
+
+Your component folder should contain any of:
+- `index.html` — markup
+- `style.css` — styles
+- `script.js` — behaviour
+
+All three are bundled into a single encrypted payload, uploaded to your storage, and registered in your database.
+
+You'll be asked:
+- Custom token? (or auto-generate)
+- Set expiry? (or never expire)
+
+Output:
+```
+✅ Deployed successfully!
+📦 CDN URL : https://xxx.cloudfront.net/components/navbar@1.0.0.js
+🔐 Token   : abc123...
+⏱  Expires : 0 (never)
+```
+
+---
+
+## Node.js API
+
+```js
+import { WebHanger } from "webhanger";
+
+const wh = new WebHanger();
+```
+
+### `wh.deploy(componentDir, name, version, options?)`
+
+```js
+const result = await wh.deploy("./components/navbar", "navbar", "1.0.0", {
+    expiresInSeconds: 86400,  // optional — omit for no expiry
+    token: "my-custom-token", // optional — omit to auto-generate
+    dependencies: ["sidebar@1.0.0"] // optional
+});
+
+// result: { cdnUrl, token, expires }
+```
+
+### `wh.resolve(name, version?)`
+
+Fetch component metadata and verify token.
+
+```js
+const component = await wh.resolve("navbar", "1.0.0");
+// { cdnUrl, token, expires, dependencies }
+```
+
+### `wh.resign(name, version, options?)`
+
+Rotate token without redeploying the component.
+
+```js
+const result = await wh.resign("navbar", "1.0.0", {
+    expiresInSeconds: 3600
+});
+// { cdnUrl, token, expires }
+```
+
+### `wh.remove(name, version)`
+
+Delete a component from storage.
+
+```js
+await wh.remove("navbar", "1.0.0");
+```
+
+### `wh.getConfig()`
+
+Returns the loaded `webhanger.config.json`.
+
+```js
+const config = wh.getConfig();
+```
+
+---
+
+## Named exports
+
+Use individual functions directly without instantiation.
+
+```js
+import {
+    bundle,
+    signUrl,
+    verifyToken,
+    generateSecretKey,
+    upload,
+    remove,
+    registerComponent,
+    getComponent,
+    provisionBucket,
+    provisionCloudFront,
+    deploy,
+    loadConfig
+} from "webhanger";
+```
+
+---
+
+## webhanger.config.json
+
+Generated by `wh init`. Keep this file private — never commit it.
+
+```json
+{
+  "project": "my-app",
+  "projectId": "wh_1234567890",
+  "secretKey": "your-secret-key",
+  "webHangerVersion": "1.0.0",
+  "storage": {
+    "provider": "s3",
+    "accessKey": "...",
+    "secretKey": "...",
+    "bucket": "my-bucket",
+    "region": "ap-south-1"
+  },
+  "cdn": {
+    "url": "https://xxx.cloudfront.net"
+  },
+  "db": {
+    "provider": "firebase",
+    "serviceAccountPath": "./firebase-service-account.json"
+  }
+}
+```
+
+---
+
+## Component folder structure
+
+```
+components/
+  navbar/
+    index.html
+    style.css
+    script.js
+```
+
+All files are optional except at least one of `index.html` or `script.js`.
+
+---
+
+## Security
+
+- Every component is encrypted using XOR cipher with `projectId` as the key
+- Each chunk (html/css/js) uses a different salt — `::html`, `::css`, `::js`
+- CDN URLs are HMAC-SHA256 signed and scoped to your project
+- Tokens can carry expiry or be permanent — your choice
+- CloudFront forces HTTPS only

package/bin/cli.js

@@ -272,10 +272,55 @@ switch (command) {
     case "deploy":
         deployCommand();
         break;
+    case "convert": {
+        const [,,,convertDir, convertName, convertTarget, convertOut] = process.argv;
+        if (!convertDir || !convertName || !convertTarget) {
+            console.log(chalk.red("Usage: wh convert <component-dir> <name> <target> [output-dir]"));
+            console.log(chalk.gray("Targets: react, next, vue, svelte, angular, astro"));
+            console.log(chalk.gray("Example: wh convert ./components/navbar navbar react ./output"));
+            process.exit(1);
+        }
+        const { convert } = await import("../helper/converter.js");
+        console.log(chalk.cyan(`\n🔄 Converting "${convertName}" to ${convertTarget}...`));
+        try {
+            const result = await convert(convertDir, convertName, convertTarget, convertOut || "./converted");
+            console.log(chalk.green(`\n✅ Converted successfully!`));
+            console.log(chalk.white(`📄 Output : ${result.outPath}`));
+            console.log(chalk.gray(`\n--- Preview ---\n`));
+            console.log(chalk.gray(result.code.split("\n").slice(0, 20).join("\n")));
+            if (result.code.split("\n").length > 20) console.log(chalk.gray("... (truncated)"));
+        } catch (err) {
+            console.log(chalk.red(`\n❌ Conversion failed: ${err.message}`));
+            process.exit(1);
+        }
+        break;
+    }
+    case "analyze": {
+        const dir = args[1];
+        if (!dir) {
+            console.log(chalk.red("Usage: wh analyze <component-dir>"));
+            process.exit(1);
+        }
+        const { analyzeComponent } = await import("../helper/analyzer.js");
+        const result = await analyzeComponent(dir);
+        console.log(chalk.cyan("\n🔍 Component Analysis\n"));
+        console.log(chalk.white(`Framework : ${result.framework}`));
+        console.log(chalk.white(`Styling   : ${result.styling.join(", ")}`));
+        console.log(chalk.white(`Imports   : ${result.imports.join(", ") || "none"}`));
+        console.log(chalk.white(`CDN Assets resolved:`));
+        if (result.assets.length) {
+            result.assets.forEach(a => console.log(chalk.gray(`  [${a.type}] ${a.url}`)));
+        } else {
+            console.log(chalk.gray("  none"));
+        }
+        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"));
+        console.log(chalk.gray("  wh init                                        — setup your project"));
+        console.log(chalk.gray("  wh deploy <dir> <name> <version>               — bundle & deploy a component"));
+        console.log(chalk.gray("  wh analyze <dir>                               — detect framework, styling & CDN deps"));
+        console.log(chalk.gray("  wh convert <dir> <name> <target> [output-dir]  — convert to react/next/vue/svelte/angular/astro"));
         break;
 }

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/bundler.js

@@ -1,5 +1,6 @@
 import fs from "fs-extra";
 import path from "path";
+import { autoGenerateComponentMeta } from "./analyzer.js";
 
 function xorEncode(str, key) {
     let out = "";
@@ -11,13 +12,22 @@ function xorEncode(str, key) {
 
 /**
  * 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-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 +37,33 @@ 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") : "";
+    // UTF-8 safe XOR — operate on bytes not char codes
+    // Fixes special chars (©, accents, emoji) breaking atob in browser
+    const encrypt = (content, salt) => {
+        if (!content) return "";
+        const key = projectId + salt;
+        const bytes = Buffer.from(content, "utf-8");
+        const keyBytes = Buffer.from(key, "utf-8");
+        const out = Buffer.alloc(bytes.length);
+        for (let i = 0; i < bytes.length; i++) {
+            out[i] = bytes[i] ^ keyBytes[i % keyBytes.length];
+        }
+        return out.toString("base64");
+    };
 
     const payload = {
         v: 1,
         h: encrypt(html, "::html"),
         c: encrypt(css,  "::css"),
-        j: encrypt(js,   "::js")
+        j: encrypt(js,   "::js"),
+        assets: meta.assets || []  // CDN assets passed in plaintext — they're public URLs
     };
 
     return JSON.stringify(payload);

package/helper/converter.js

@@ -0,0 +1,190 @@
+import fs from "fs-extra";
+import path from "path";
+
+/**
+ * Reads html/css/js from a component folder.
+ */
+async function readComponent(componentDir) {
+    const files = await fs.readdir(componentDir);
+    let html = "", css = "", js = "";
+
+    for (const file of files) {
+        const ext = path.extname(file).toLowerCase();
+        const content = await fs.readFile(path.join(componentDir, file), "utf-8");
+        if (ext === ".html") html = content.trim();
+        else if (ext === ".css") css = content.trim();
+        else if (ext === ".js") js = content.trim();
+    }
+
+    return { html, css, js };
+}
+
+// ─── Converters ───────────────────────────────────────────────────────────────
+
+function toReact(name, html, css, js) {
+    const componentName = name.charAt(0).toUpperCase() + name.slice(1);
+    // Convert class= to className= for JSX
+    const jsx = html.replace(/\bclass=/g, "className=");
+
+    return `import React, { useEffect } from 'react';
+
+const styles = \`
+${css}
+\`;
+
+export default function ${componentName}() {
+  useEffect(() => {
+    // Injected from original script.js
+    ${js || "// no script"}
+  }, []);
+
+  return (
+    <>
+      <style>{\`\${styles}\`}</style>
+      <div dangerouslySetInnerHTML={{ __html: \`${jsx.replace(/`/g, "\\`")}\` }} />
+    </>
+  );
+}
+`;
+}
+
+function toVue(name, html, css, js) {
+    return `<template>
+  <div v-html="markup" />
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+
+const markup = \`${html.replace(/`/g, "\\`")}\`;
+
+onMounted(() => {
+  ${js || "// no script"}
+});
+</script>
+
+<style scoped>
+${css}
+</style>
+`;
+}
+
+function toSvelte(name, html, css, js) {
+    return `<script>
+  import { onMount } from 'svelte';
+
+  onMount(() => {
+    ${js || "// no script"}
+  });
+</script>
+
+${html}
+
+<style>
+${css}
+</style>
+`;
+}
+
+function toNext(name, html, css, js) {
+    const componentName = name.charAt(0).toUpperCase() + name.slice(1);
+    const jsx = html.replace(/\bclass=/g, "className=");
+
+    return `'use client';
+import { useEffect } from 'react';
+
+const styles = \`
+${css}
+\`;
+
+export default function ${componentName}() {
+  useEffect(() => {
+    ${js || "// no script"}
+  }, []);
+
+  return (
+    <>
+      <style>{\`\${styles}\`}</style>
+      <div dangerouslySetInnerHTML={{ __html: \`${jsx.replace(/`/g, "\\`")}\` }} />
+    </>
+  );
+}
+`;
+}
+
+function toAngular(name, html, css, js) {
+    const componentName = name.charAt(0).toUpperCase() + name.slice(1);
+    const selector = `wh-${name.toLowerCase()}`;
+
+    return `import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: '${selector}',
+  template: \`${html.replace(/`/g, "\\`")}\`,
+  styles: [\`
+${css}
+  \`]
+})
+export class ${componentName}Component implements OnInit {
+  ngOnInit(): void {
+    ${js || "// no script"}
+  }
+}
+`;
+}
+
+function toAstro(name, html, css, js) {
+    return `---
+// ${name} component — converted by WebHanger
+${js ? `
+// Script logic moved to client-side
+` : ""}
+---
+
+${html}
+
+<style>
+${css}
+</style>
+
+${js ? `<script>
+${js}
+</script>` : ""}
+`;
+}
+
+// ─── Extension map ────────────────────────────────────────────────────────────
+
+const CONVERTERS = {
+    react:   { fn: toReact,   ext: ".jsx" },
+    next:    { fn: toNext,    ext: ".jsx" },
+    vue:     { fn: toVue,     ext: ".vue" },
+    svelte:  { fn: toSvelte,  ext: ".svelte" },
+    angular: { fn: toAngular, ext: ".component.ts" },
+    astro:   { fn: toAstro,   ext: ".astro" },
+};
+
+/**
+ * Converts a vanilla html/css/js component to a target framework component.
+ *
+ * @param {string} componentDir  - source folder with html/css/js
+ * @param {string} name          - component name e.g. "navbar"
+ * @param {string} target        - "react" | "vue" | "svelte" | "next" | "angular" | "astro"
+ * @param {string} outputDir     - where to write the converted file
+ */
+export async function convert(componentDir, name, target, outputDir = "./converted") {
+    const converter = CONVERTERS[target.toLowerCase()];
+    if (!converter) {
+        throw new Error(`Unknown target: "${target}". Supported: ${Object.keys(CONVERTERS).join(", ")}`);
+    }
+
+    const { html, css, js } = await readComponent(componentDir);
+    const code = converter.fn(name, html, css, js);
+    const fileName = `${name}${converter.ext}`;
+    const outPath = path.join(outputDir, fileName);
+
+    await fs.ensureDir(outputDir);
+    await fs.writeFile(outPath, code, "utf-8");
+
+    return { outPath, fileName, target, code };
+}

package/helper/dbHandler.js

@@ -1,5 +1,6 @@
 import admin from "firebase-admin";
 import fs from "fs-extra";
+import path from "path";
 
 // ─── Firebase ─────────────────────────────────────────────────────────────────
 
@@ -7,7 +8,20 @@ let firebaseDb = null;
 
 function getFirestore(serviceAccountPath) {
     if (firebaseDb) return firebaseDb;
-    const serviceAccount = fs.readJsonSync(serviceAccountPath);
+    // Resolve path relative to cwd first, then walk up to find it
+    let resolvedPath = path.resolve(process.cwd(), serviceAccountPath);
+    if (!fs.existsSync(resolvedPath)) {
+        // Try resolving from parent directories
+        let dir = process.cwd();
+        for (let i = 0; i < 5; i++) {
+            const candidate = path.join(dir, path.basename(serviceAccountPath));
+            if (fs.existsSync(candidate)) { resolvedPath = candidate; break; }
+            const parent = path.dirname(dir);
+            if (parent === dir) break;
+            dir = parent;
+        }
+    }
+    const serviceAccount = fs.readJsonSync(resolvedPath);
     if (!admin.apps.length) {
         admin.initializeApp({ credential: admin.credential.cert(serviceAccount) });
     }

package/helper/loadConfig.js

@@ -1,19 +1,34 @@
 import fs from "fs";
 import path from "path";
 
-export default function loadConfig() {
-    const configPath = path.join(process.cwd(), "webhanger.config.json");
+export default function loadConfig(configPath = null) {
+    // 1. Explicit path passed in
+    // 2. WEBHANGER_CONFIG env var
+    // 3. Walk up from cwd until found
+    const candidates = [];
 
-    if (!fs.existsSync(configPath)) {
-        throw new Error("webhanger.config.json not found. Run `wh init` first.");
-    }
+    if (configPath) candidates.push(path.resolve(configPath));
+    if (process.env.WEBHANGER_CONFIG) candidates.push(path.resolve(process.env.WEBHANGER_CONFIG));
 
-    const raw = fs.readFileSync(configPath, "utf-8");
-    const config = JSON.parse(raw);
+    // Walk up directory tree from cwd
+    let dir = process.cwd();
+    for (let i = 0; i < 5; i++) {
+        candidates.push(path.join(dir, "webhanger.config.json"));
+        const parent = path.dirname(dir);
+        if (parent === dir) break;
+        dir = parent;
+    }
 
-    if (!config.projectId || !config.secretKey) {
-        throw new Error("Invalid config: missing projectId or secretKey.");
+    for (const candidate of candidates) {
+        if (fs.existsSync(candidate)) {
+            const raw = fs.readFileSync(candidate, "utf-8");
+            const config = JSON.parse(raw);
+            if (!config.projectId || !config.secretKey) {
+                throw new Error(`Invalid config at ${candidate}: missing projectId or secretKey.`);
+            }
+            return config;
+        }
     }
 
-    return config;
+    throw new Error("webhanger.config.json not found. Run `wh init` first.");
 }

package/index.js

@@ -150,3 +150,5 @@ 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";
+export { analyzeComponent, autoGenerateComponentMeta } from "./helper/analyzer.js";
+export { convert } from "./helper/converter.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webhanger",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Component-as-a-Service platform — bundle, sign, and deliver UI components via edge CDN",
   "type": "module",
   "main": "index.js",
@@ -18,7 +18,13 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "keywords": ["cdn", "components", "caas", "edge", "ui"],
+  "keywords": [
+    "cdn",
+    "components",
+    "caas",
+    "edge",
+    "ui"
+  ],
   "author": "",
   "license": "ISC",
   "dependencies": {