webhanger 1.0.5 → 1.0.6

package/bin/cli.js

@@ -345,6 +345,159 @@ switch (command) {
         console.log(chalk.gray(`  "cdn": { "url": "https://webhanger-edge.your-subdomain.workers.dev" }`));
         break;
     }
+    case "release": {
+        const releaseType = args[1] || "patch"; // patch | minor | major
+        const { execSync } = await import("child_process");
+        const { default: fsExtra } = await import("fs-extra");
+        const { default: pathMod } = await import("path");
+
+        console.log(chalk.cyan(`\n🚀 Releasing webhanger + webhanger-front (${releaseType})...\n`));
+
+        try {
+            // 1. Bump + publish webhanger
+            console.log(chalk.white("  [1/4] Publishing webhanger..."));
+            execSync(`npm version ${releaseType} --no-git-tag-version`, { stdio: "inherit" });
+            execSync("npm publish --access public", { stdio: "inherit" });
+            const whPkg = await fsExtra.readJson("./package.json");
+            console.log(chalk.green(`  ✅ webhanger@${whPkg.version} published`));
+
+            // 2. Build + bump + publish webhanger-front
+            console.log(chalk.white("\n  [2/4] Building webhanger-front..."));
+            execSync("npm run build", { cwd: "./webhanger-front", stdio: "inherit" });
+            execSync(`npm version ${releaseType} --no-git-tag-version`, { cwd: "./webhanger-front", stdio: "inherit" });
+            execSync("npm publish --access public", { cwd: "./webhanger-front", stdio: "inherit" });
+            const whfPkg = await fsExtra.readJson("./webhanger-front/package.json");
+            console.log(chalk.green(`  ✅ webhanger-front@${whfPkg.version} published`));
+
+            // 3. Update all HTML files to use new unpkg version
+            console.log(chalk.white("\n  [3/4] Updating unpkg references..."));
+            const newUrl = `https://unpkg.com/webhanger-front@${whfPkg.version}/browser.min.js`;
+            const oldPattern = /https:\/\/unpkg\.com\/webhanger-front@[^/]+\/browser(?:\.min)?\.js/g;
+
+            const htmlFiles = [];
+            async function findHtml(dir) {
+                const entries = await fsExtra.readdir(dir, { withFileTypes: true });
+                for (const e of entries) {
+                    if (e.name === "node_modules" || e.name === ".git") continue;
+                    const full = pathMod.join(dir, e.name);
+                    if (e.isDirectory()) await findHtml(full);
+                    else if (e.name.endsWith(".html") || e.name.endsWith(".js")) htmlFiles.push(full);
+                }
+            }
+            await findHtml(".");
+
+            let updated = 0;
+            for (const file of htmlFiles) {
+                const content = await fsExtra.readFile(file, "utf-8");
+                if (oldPattern.test(content)) {
+                    await fsExtra.writeFile(file, content.replace(oldPattern, newUrl), "utf-8");
+                    console.log(chalk.gray(`    → ${file}`));
+                    updated++;
+                }
+            }
+            console.log(chalk.green(`  ✅ Updated ${updated} files to ${newUrl}`));
+
+            // 4. Summary
+            console.log(chalk.green(`\n✅ Release complete!`));
+            console.log(chalk.white(`  webhanger        : v${whPkg.version}`));
+            console.log(chalk.white(`  webhanger-front  : v${whfPkg.version}`));
+            console.log(chalk.gray(`  unpkg URL        : ${newUrl}\n`));
+
+        } catch (err) {
+            console.log(chalk.red(`\n❌ Release failed: ${err.message}`));
+            process.exit(1);
+        }
+        break;
+    }
+    case "atomize": {
+        const atomFile = args[1];
+        const atomOut  = args[2] || "./atomized";
+        const atomVer  = args[3] || "1.0.0";
+
+        if (!atomFile) {
+            console.log(chalk.red("Usage: wh atomize <html-file> [components-dir] [version]"));
+            console.log(chalk.gray("Example: wh atomize ./docs/index.html ./atomized 1.0.0"));
+            process.exit(1);
+        }
+
+        const { atomize } = await import("../core/atomizer.js");
+        const { deploy: registryDeploy } = await import("../core/registry.js");
+        const { default: fsExtra } = await import("fs-extra");
+        const { default: pathMod } = await import("path");
+        const loadConfigFn = (await import("../helper/loadConfig.js")).default;
+        const config = loadConfigFn();
+        const { projectId } = config;
+
+        console.log(chalk.cyan(`\n⚛️  Atomizing ${atomFile}...\n`));
+
+        // Step 1: Split into components
+        const { components, cdnAssets, globalJs } = await atomize(atomFile, atomOut);
+        console.log(chalk.green(`  ✅ Split into ${components.length} components:`));
+        components.forEach(c => console.log(chalk.gray(`    → ${c.name}`)));
+
+        // Step 2: Deploy each component
+        console.log(chalk.cyan(`\n🚀 Deploying components...\n`));
+        const deployed = {};
+        for (const comp of components) {
+            process.stdout.write(`  ${comp.name}@${atomVer}... `);
+            try {
+                deployed[comp.name] = await registryDeploy(config, comp.dir, comp.name, atomVer);
+                console.log(chalk.green("✅"));
+            } catch (err) {
+                console.log(chalk.red(`❌ ${err.message}`));
+            }
+        }
+
+        // Step 3: Write manifest
+        const manifest = {
+            pid: projectId,
+            components: Object.fromEntries(
+                Object.entries(deployed).map(([name, d]) => [
+                    name, { url: d.cdnUrl, urls: d.cdnUrls || [d.cdnUrl], token: d.token, expires: d.expires }
+                ])
+            )
+        };
+        const manifestPath = pathMod.join(pathMod.dirname(atomFile), "wh-manifest.json");
+        await fsExtra.writeJson(manifestPath, manifest, { spaces: 2 });
+
+        // Step 4: Write globalJs to a separate file to avoid template literal conflicts
+        const globalJsFile = pathMod.join(pathMod.dirname(atomFile), "wh-global.js");
+        if (globalJs) {
+            await fsExtra.writeFile(globalJsFile, globalJs, "utf-8");
+        }
+
+        // Step 5: Generate production-ready CDN-powered HTML
+        const mounts = components.map(c => `  <wh-component name="${c.name}"></wh-component>`).join("\n");
+        const outHtml = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>WebHanger</title>
+  ${cdnAssets.filter(a => a.type === "style").map(a => `<link rel="stylesheet" href="${a.url}">`).join("\n  ")}
+</head>
+<body>
+${mounts}
+  ${cdnAssets.filter(a => a.type === "script").map(a => `<script src="${a.url}"></script>`).join("\n  ")}
+  <script src="https://unpkg.com/webhanger-front@latest/browser.min.js"></script>
+  <script>
+    WebHangerFront.initialize("./wh-manifest.json");
+  </script>
+  ${globalJs ? `<script src="./wh-global.js"></script>` : ""}
+</body>
+</html>`;
+
+        const outHtmlPath = pathMod.join(pathMod.dirname(atomFile), "atomized.html");
+        await fsExtra.writeFile(outHtmlPath, outHtml, "utf-8");
+
+        console.log(chalk.green(`\n✅ Atomize complete!`));
+        console.log(chalk.white(`  Components : ${components.length}`));
+        console.log(chalk.white(`  Manifest   : ${manifestPath}`));
+        console.log(chalk.white(`  Output     : ${outHtmlPath}`));
+        if (globalJs) console.log(chalk.white(`  Global JS  : ${globalJsFile}`));
+        console.log(chalk.gray(`\n  Open atomized.html — entire page loads from CDN.\n`));
+        break;
+    }
     case "breakdown": {
         const bdDir = args[1];
         if (!bdDir) {
@@ -510,6 +663,7 @@ switch (command) {
             buildResult.pages.forEach(p => {
                 const kb = (p.size / 1024).toFixed(1);
                 console.log(chalk.gray(`  ${p.fileName.padEnd(25)} ${kb} kB`));
+                (p.assets || []).forEach(a => console.log(chalk.gray(`    ↳ ${a}`)));
             });
         } catch (err) {
             console.log(chalk.yellow(`  Build warning: ${err.message}`));
@@ -714,6 +868,7 @@ ${mounts}
             result.pages.forEach(p => {
                 const kb = (p.size / 1024).toFixed(1);
                 console.log(chalk.white(`  ${p.fileName.padEnd(25)} ${kb} kB`));
+                (p.assets || []).forEach(a => console.log(chalk.gray(`    ↳ ${a}`)));
             });
             console.log(chalk.gray(`\n  Output: ${result.outDir}`));
         } catch (err) {
@@ -769,11 +924,13 @@ ${mounts}
         console.log(chalk.cyan(BANNER));
         console.log(chalk.white("Commands:"));
         console.log(chalk.gray("  wh init                                              — setup your project"));
+        console.log(chalk.gray("  wh release [patch|minor|major]                       — publish both packages + update all unpkg refs"));
         console.log(chalk.gray("  wh ship <comp-dir> <site-dir> [version] [out-dir]    — deploy + build + zip in one shot"));
         console.log(chalk.gray("  wh deploy <dir> <name> <version>                     — deploy a single component"));
         console.log(chalk.gray("  wh graph-deploy <comp-dir> [version] [out-dir]       — deploy all + resolve dep graph"));
         console.log(chalk.gray("  wh build <src-dir> [out-dir]                         — production build"));
         console.log(chalk.gray("  wh zip <src-dir> [out-file]                          — zip for deployment"));
+        console.log(chalk.gray("  wh atomize <html-file> [out-dir] [version]           — split page into CDN components"));
         console.log(chalk.gray("  wh breakdown <dir>                               — extract CSS/JS from single HTML file"));
         console.log(chalk.gray("  wh access grant|revoke|list                      — role-based access control"));
         console.log(chalk.gray("  wh convert <dir> <name> <target> [out-dir]           — convert to react/vue/svelte/next/astro"));

package/core/atomizer.js

@@ -0,0 +1,95 @@
+import fs from "fs-extra";
+import path from "path";
+
+/**
+ * Atomizer — splits a single HTML page into section-based WebHanger components.
+ * Each component gets the full CSS (encrypted on CDN) + its own HTML.
+ * Global JS runs once in the host page after all components mount.
+ */
+export async function atomize(htmlFile, outputDir) {
+    const raw = await fs.readFile(htmlFile, "utf-8");
+
+    // ── Extract global <style> ────────────────────────────────────────────────
+    const styleBlocks = [];
+    let stripped = raw.replace(/<style[^>]*>([\s\S]*?)<\/style>/gi, (_, css) => {
+        styleBlocks.push(css.trim());
+        return "";
+    });
+    const globalCss = styleBlocks.join("\n");
+
+    // ── Extract global <script> blocks ────────────────────────────────────────
+    const scriptBlocks = [];
+    stripped = stripped.replace(/<script(?![^>]*src)[^>]*>([\s\S]*?)<\/script>/gi, (_, js) => {
+        scriptBlocks.push(js.trim());
+        return "";
+    });
+    const globalJs = scriptBlocks.join("\n");
+
+    // ── Extract external CDN assets ───────────────────────────────────────────
+    const cdnAssets = [];
+    stripped = stripped.replace(/<link[^>]+href="(https?:[^"]+\.css)"[^>]*>/gi, (_, url) => {
+        cdnAssets.push({ type: "style", url });
+        return "";
+    });
+    stripped = stripped.replace(/<script[^>]+src="(https?:[^"]+)"[^>]*><\/script>/gi, (_, url) => {
+        cdnAssets.push({ type: "script", url });
+        return "";
+    });
+
+    // ── Extract body ──────────────────────────────────────────────────────────
+    const bodyMatch = stripped.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
+    const body = (bodyMatch ? bodyMatch[1] : stripped).trim();
+
+    // ── Split into top-level semantic sections ────────────────────────────────
+    const found = [];
+    const topLevelRegex = /<(nav|header|section|footer|div)(\s[^>]*?)?>([\s\S]*?)<\/\1>/gi;
+    let m;
+    while ((m = topLevelRegex.exec(body)) !== null) {
+        const tag   = m[1];
+        const attrs = m[2] || "";
+        const content = m[3];
+
+        const idMatch    = attrs.match(/id="([^"]+)"/);
+        const classMatch = attrs.match(/class="([^\s"]+)/);
+        const name = idMatch     ? idMatch[1]
+                   : classMatch  ? classMatch[1].replace(/[^a-z0-9]/gi, "-")
+                   : `${tag}-${found.length + 1}`;
+
+        found.push({
+            name: name.toLowerCase().replace(/[^a-z0-9-]/g, "-").replace(/-+/g, "-"),
+            tag,
+            attrs,
+            html: `<${tag}${attrs}>${content}</${tag}>`,
+        });
+    }
+
+    if (!found.length) {
+        found.push({ name: "main", tag: "div", attrs: "", html: body });
+    }
+
+    // ── Write component folders ───────────────────────────────────────────────
+    await fs.ensureDir(outputDir);
+    const components = [];
+
+    for (const section of found) {
+        const compDir = path.join(outputDir, section.name);
+        await fs.ensureDir(compDir);
+
+        await fs.writeFile(path.join(compDir, "index.html"), section.html.trim(), "utf-8");
+
+        // Full CSS per component — encrypted on CDN, correct rendering guaranteed
+        if (globalCss) {
+            await fs.writeFile(path.join(compDir, "style.css"), globalCss, "utf-8");
+        }
+
+        // No JS per component — global JS runs once in host page after mount
+        await fs.writeJson(path.join(compDir, "webhanger.component.json"), {
+            assets: cdnAssets,
+            dependencies: []
+        }, { spaces: 2 });
+
+        components.push({ name: section.name, dir: compDir });
+    }
+
+    return { components, cdnAssets, globalJs };
+}

package/core/builder.js

@@ -25,10 +25,9 @@ function minifyCss(css) {
 
 function minifyJs(js) {
     return js
-        .replace(/\/\/[^\n]*/g, "")                // remove single line comments
-        .replace(/\/\*[\s\S]*?\*\//g, "")          // remove block comments
-        .replace(/\s+/g, " ")                       // collapse whitespace
-        .replace(/\s*([=+\-*/{};:,()[\]])\s*/g, "$1") // spaces around operators
+        .replace(/\/\*[\s\S]*?\*\//g, "")          // remove block comments only
+        .replace(/[ \t]+/g, " ")                    // collapse spaces/tabs (not newlines)
+        .replace(/^\s+/gm, "")                      // trim line starts
         .trim();
 }
 
@@ -42,34 +41,71 @@ function hashContent(content) {
 
 async function processHtml(filePath, outDir, assetMap) {
     let html = await fs.readFile(filePath, "utf-8");
+    const baseName = path.basename(filePath, ".html");
+
+    // ── Extract embedded <style> blocks → separate .css file ─────────────────
+    const styleBlocks = [];
+    html = html.replace(/<style[^>]*>([\s\S]*?)<\/style>/gi, (_, css) => {
+        styleBlocks.push(css.trim());
+        return "";
+    });
+
+    if (styleBlocks.length) {
+        const css = minifyCss(styleBlocks.join("\n"));
+        const hash = hashContent(css);
+        const cssFile = `${baseName}.${hash}.css`;
+        await fs.writeFile(path.join(outDir, cssFile), css, "utf-8");
+        // Inject <link> before </head>
+        html = html.replace("</head>", `<link rel="stylesheet" href="./${cssFile}"></head>`);
+        assetMap[baseName + ".css"] = cssFile;
+    }
+
+    // ── Extract embedded <script> blocks (non-src) → separate .js file ───────
+    const scriptBlocks = [];
+    html = html.replace(/<script(?![^>]*src)[^>]*>([\s\S]*?)<\/script>/gi, (_, js) => {
+        const trimmed = js.trim();
+        if (trimmed) scriptBlocks.push(trimmed);
+        return "";
+    });
 
-    // Inline local <link rel="stylesheet"> files
+    if (scriptBlocks.length) {
+        const js = minifyJs(scriptBlocks.join("\n"));
+        const hash = hashContent(js);
+        const jsFile = `${baseName}.${hash}.js`;
+        await fs.writeFile(path.join(outDir, jsFile), js, "utf-8");
+        // Inject <script> before </body>
+        html = html.replace("</body>", `<script src="./${jsFile}"></script></body>`);
+        assetMap[baseName + ".js"] = jsFile;
+    }
+
+    // ── Inline external local <link> CSS files ────────────────────────────────
     html = await replaceAsync(html, /<link[^>]+href="([^"]+\.css)"[^>]*>/g, async (match, href) => {
-        if (href.startsWith("http")) return match; // skip external
+        if (href.startsWith("http") || href.startsWith("./") && href.includes(".")) {
+            // Already a hashed file we just wrote — keep it
+            if (Object.values(assetMap).some(v => href.includes(v))) return match;
+        }
+        if (href.startsWith("http")) return match;
         const cssPath = path.resolve(path.dirname(filePath), href);
         if (!await fs.pathExists(cssPath)) return match;
         const css = minifyCss(await fs.readFile(cssPath, "utf-8"));
-        return `<style>${css}</style>`;
+        const hash = hashContent(css);
+        const cssFile = path.basename(href, ".css") + "." + hash + ".css";
+        await fs.writeFile(path.join(outDir, cssFile), css, "utf-8");
+        return match.replace(href, "./" + cssFile);
     });
 
-    // Inline local <script src="..."> files (non-module, non-external)
-    html = await replaceAsync(html, /<script[^>]+src="([^"]+\.js)"[^>]*><\/script>/g, async (match, src) => {
-        if (src.startsWith("http") || src.includes("unpkg") || src.includes("cdn")) return match;
-        const jsPath = path.resolve(path.dirname(filePath), src);
-        if (!await fs.pathExists(jsPath)) return match;
-        const js = minifyJs(await fs.readFile(jsPath, "utf-8"));
-        return `<script>${js}</script>`;
-    });
-
-    // Minify the HTML itself
+    // ── Minify HTML ───────────────────────────────────────────────────────────
     html = minifyHtml(html);
 
-    // Write to dist
     const fileName = path.basename(filePath);
     const outPath = path.join(outDir, fileName);
     await fs.writeFile(outPath, html, "utf-8");
 
-    return { fileName, size: Buffer.byteLength(html, "utf-8") };
+    return {
+        fileName,
+        size: Buffer.byteLength(html, "utf-8"),
+        assets: Object.values(assetMap)
+    };
 }
 
 // ─── Async replace helper ─────────────────────────────────────────────────────

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webhanger",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Component-as-a-Service platform — bundle, sign, and deliver UI components via edge CDN",
   "type": "module",
   "main": "index.js",