@kohi9noor/hotloop 1.3.7 → 1.3.10

package/dist/cli.js

@@ -89,24 +89,35 @@ __export(builder_exports, {
 import * as esbuild from "esbuild";
 import * as fs from "fs/promises";
 import * as path from "path";
-var HMR_CLIENT_NAME, ExtensionBuilder;
+var ExtensionBuilder;
 var init_builder = __esm({
   "src/builder.ts"() {
     init_logger();
-    HMR_CLIENT_NAME = "__hotloop_hmr__.js";
     ExtensionBuilder = class {
       constructor(cwd = process.cwd()) {
         this.cwd = cwd;
       }
-      async build(entries) {
+      async build(entries, hmrPort) {
         const start = Date.now();
         try {
           logger.info(`Building ${entries.length} entry(ies)...`);
+          let hmrCode = null;
+          if (hmrPort) {
+            const hmrPath = path.join(
+              path.dirname(new URL(import.meta.url).pathname),
+              "hotloop-hmr.js"
+            );
+            hmrCode = await fs.readFile(hmrPath, "utf-8");
+          }
           for (const entry of entries) {
             const inputPath = path.join(this.cwd, entry.input);
             const outputPath = path.join(this.cwd, entry.output);
             const outputDir = path.dirname(outputPath);
             await fs.mkdir(outputDir, { recursive: true });
+            const define = {};
+            if (hmrPort && entry.input.toLowerCase().includes("background")) {
+              define.__HOTLOOP_PORT__ = hmrPort.toString();
+            }
             await esbuild.build({
               entryPoints: [inputPath],
               bundle: true,
@@ -114,8 +125,14 @@ var init_builder = __esm({
               target: "es2020",
               outfile: outputPath,
               sourcemap: false,
-              logLevel: "silent"
+              logLevel: "silent",
+              define
             });
+            if (hmrPort && hmrCode && entry.input.toLowerCase().includes("background")) {
+              const builtCode = await fs.readFile(outputPath, "utf-8");
+              const finalCode = builtCode + "\n\n" + hmrCode;
+              await fs.writeFile(outputPath, finalCode, "utf-8");
+            }
             logger.success(`${entry.input} \u2192 ${entry.output}`);
           }
           const elapsed = Date.now() - start;
@@ -138,7 +155,7 @@ var init_builder = __esm({
       }
       /**
        * Writes the manifest file to the destination.
-       * If injectHmr is true, it automatically injects the HMR client script into content_scripts.
+       * HMR is now handled directly in the background service worker.
        */
       async writeManifest(options, injectHmr = false) {
         const srcPath = path.join(this.cwd, options.src);
@@ -146,45 +163,9 @@ var init_builder = __esm({
         const destDir = path.dirname(destPath);
         const raw = await fs.readFile(srcPath, "utf-8");
         const manifest = JSON.parse(raw);
-        if (injectHmr) {
-          const hmrMatches = options.hmrMatches || ["<all_urls>"];
-          const existing = Array.isArray(manifest.content_scripts) ? manifest.content_scripts : [];
-          const alreadyInjected = existing.some((entry) => {
-            const scripts = entry.js || [];
-            return scripts.includes(HMR_CLIENT_NAME);
-          });
-          if (!alreadyInjected) {
-            existing.push({
-              matches: hmrMatches,
-              js: [HMR_CLIENT_NAME],
-              run_at: "document_start"
-            });
-          }
-          manifest.content_scripts = existing;
-        }
         await fs.mkdir(destDir, { recursive: true });
         await fs.writeFile(destPath, JSON.stringify(manifest, null, 2), "utf-8");
       }
-      async buildHmrClient(port, manifestDest) {
-        const hmrClientPath = path.join(import.meta.dirname, "hmr-client.js");
-        const outputDir = path.dirname(path.join(this.cwd, manifestDest));
-        const outputPath = path.join(outputDir, HMR_CLIENT_NAME);
-        try {
-          await fs.mkdir(outputDir, { recursive: true });
-          await esbuild.build({
-            entryPoints: [hmrClientPath],
-            bundle: true,
-            format: "iife",
-            logLevel: "silent",
-            outfile: outputPath,
-            define: {
-              __HOTLOOP_PORT__: port.toString()
-            }
-          });
-        } catch (error) {
-          logger.error(`Failed to build HMR client: ${error}`);
-        }
-      }
     };
   }
 });
@@ -322,10 +303,8 @@ async function runBuild(cwd, options) {
   const watchDir = config.watchDir || "src";
   const server = options?.watch === false ? null : new HmrServer2(port);
   const builder = new ExtensionBuilder2(cwd);
-  if (injectHmr && config.manifest) {
-    await builder.buildHmrClient(port, config.manifest.dest);
-  }
-  await builder.build(config.entries);
+  const hmrPort = options?.watch === true ? port : 8e3;
+  await builder.build(config.entries, hmrPort);
   if (config.manifest) {
     await builder.writeManifest(config.manifest, injectHmr);
   }
@@ -341,7 +320,7 @@ async function runBuild(cwd, options) {
   const watcher = new FileWatcher2(watchDir, async () => {
     config.onBuildStart?.();
     try {
-      await builder.build(config.entries);
+      await builder.build(config.entries, hmrPort);
       if (config.manifest) {
         await builder.writeManifest(config.manifest, injectHmr);
       }
@@ -399,7 +378,13 @@ async function scaffold(options) {
       action: {
         default_popup: "ui/popup.html",
         default_title: projectName2
-      }
+      },
+      content_scripts: [
+        {
+          matches: ["<all_urls>"],
+          js: ["content/index.js"]
+        }
+      ]
     };
     await fs3.writeFile(
       path3.join(targetDir, "src", "manifest.json"),

package/dist/hotloop-hmr.js

@@ -0,0 +1,53 @@
+/**
+ * HMR Client for Background Service Worker
+ * This code runs only in the background script and manages the entire extension reload.
+ * When __HOTLOOP_PORT__ is defined (development mode), it connects to the HMR server.
+ * On reload signal, it calls chrome.runtime.reload() which:
+ * - Restarts the background script
+ * - Re-injects all content scripts
+ * - Reloads the popup
+ * - Synchronizes everything in one shot
+ */
+
+(function setupHMR() {
+  // __HOTLOOP_PORT__ is injected by esbuild during the build
+  // Default to 8000 if not defined (for development fallback)
+  const port =
+    typeof __HOTLOOP_PORT__ !== "undefined" ? __HOTLOOP_PORT__ : 8000;
+
+  function connectHMR() {
+    const host = "localhost";
+    const ws = new WebSocket(`ws://${host}:${port}`);
+
+    ws.onopen = () => {
+      console.log("[hotloop] HMR connected in background");
+    };
+
+    ws.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.type === "reload") {
+          console.log(
+            "[hotloop] Reload signal received, reloading entire extension...",
+          );
+          // This is the magic: one reload triggers everything
+          chrome.runtime.reload();
+        }
+      } catch (err) {
+        console.error("[hotloop] Failed to parse HMR message:", err);
+      }
+    };
+
+    ws.onclose = () => {
+      console.log("[hotloop] HMR disconnected. Retrying in 2s...");
+      setTimeout(connectHMR, 2000);
+    };
+
+    ws.onerror = (error) => {
+      console.error("[hotloop] HMR WebSocket error:", error);
+    };
+  }
+
+  // Only connect to HMR in development
+  connectHMR();
+})();

package/dist/index.js

@@ -88,24 +88,35 @@ __export(builder_exports, {
 import * as esbuild from "esbuild";
 import * as fs from "fs/promises";
 import * as path from "path";
-var HMR_CLIENT_NAME, ExtensionBuilder;
+var ExtensionBuilder;
 var init_builder = __esm({
   "src/builder.ts"() {
     init_logger();
-    HMR_CLIENT_NAME = "__hotloop_hmr__.js";
     ExtensionBuilder = class {
       constructor(cwd = process.cwd()) {
         this.cwd = cwd;
       }
-      async build(entries) {
+      async build(entries, hmrPort) {
         const start = Date.now();
         try {
           logger.info(`Building ${entries.length} entry(ies)...`);
+          let hmrCode = null;
+          if (hmrPort) {
+            const hmrPath = path.join(
+              path.dirname(new URL(import.meta.url).pathname),
+              "hotloop-hmr.js"
+            );
+            hmrCode = await fs.readFile(hmrPath, "utf-8");
+          }
           for (const entry of entries) {
             const inputPath = path.join(this.cwd, entry.input);
             const outputPath = path.join(this.cwd, entry.output);
             const outputDir = path.dirname(outputPath);
             await fs.mkdir(outputDir, { recursive: true });
+            const define = {};
+            if (hmrPort && entry.input.toLowerCase().includes("background")) {
+              define.__HOTLOOP_PORT__ = hmrPort.toString();
+            }
             await esbuild.build({
               entryPoints: [inputPath],
               bundle: true,
@@ -113,8 +124,14 @@ var init_builder = __esm({
               target: "es2020",
               outfile: outputPath,
               sourcemap: false,
-              logLevel: "silent"
+              logLevel: "silent",
+              define
             });
+            if (hmrPort && hmrCode && entry.input.toLowerCase().includes("background")) {
+              const builtCode = await fs.readFile(outputPath, "utf-8");
+              const finalCode = builtCode + "\n\n" + hmrCode;
+              await fs.writeFile(outputPath, finalCode, "utf-8");
+            }
             logger.success(`${entry.input} \u2192 ${entry.output}`);
           }
           const elapsed = Date.now() - start;
@@ -137,7 +154,7 @@ var init_builder = __esm({
       }
       /**
        * Writes the manifest file to the destination.
-       * If injectHmr is true, it automatically injects the HMR client script into content_scripts.
+       * HMR is now handled directly in the background service worker.
        */
       async writeManifest(options, injectHmr = false) {
         const srcPath = path.join(this.cwd, options.src);
@@ -145,45 +162,9 @@ var init_builder = __esm({
         const destDir = path.dirname(destPath);
         const raw = await fs.readFile(srcPath, "utf-8");
         const manifest = JSON.parse(raw);
-        if (injectHmr) {
-          const hmrMatches = options.hmrMatches || ["<all_urls>"];
-          const existing = Array.isArray(manifest.content_scripts) ? manifest.content_scripts : [];
-          const alreadyInjected = existing.some((entry) => {
-            const scripts = entry.js || [];
-            return scripts.includes(HMR_CLIENT_NAME);
-          });
-          if (!alreadyInjected) {
-            existing.push({
-              matches: hmrMatches,
-              js: [HMR_CLIENT_NAME],
-              run_at: "document_start"
-            });
-          }
-          manifest.content_scripts = existing;
-        }
         await fs.mkdir(destDir, { recursive: true });
         await fs.writeFile(destPath, JSON.stringify(manifest, null, 2), "utf-8");
       }
-      async buildHmrClient(port, manifestDest) {
-        const hmrClientPath = path.join(import.meta.dirname, "hmr-client.js");
-        const outputDir = path.dirname(path.join(this.cwd, manifestDest));
-        const outputPath = path.join(outputDir, HMR_CLIENT_NAME);
-        try {
-          await fs.mkdir(outputDir, { recursive: true });
-          await esbuild.build({
-            entryPoints: [hmrClientPath],
-            bundle: true,
-            format: "iife",
-            logLevel: "silent",
-            outfile: outputPath,
-            define: {
-              __HOTLOOP_PORT__: port.toString()
-            }
-          });
-        } catch (error) {
-          logger.error(`Failed to build HMR client: ${error}`);
-        }
-      }
     };
   }
 });
@@ -321,10 +302,8 @@ async function runBuild(cwd, options) {
   const watchDir = config.watchDir || "src";
   const server = options?.watch === false ? null : new HmrServer2(port);
   const builder = new ExtensionBuilder2(cwd);
-  if (injectHmr && config.manifest) {
-    await builder.buildHmrClient(port, config.manifest.dest);
-  }
-  await builder.build(config.entries);
+  const hmrPort = options?.watch === true ? port : 8e3;
+  await builder.build(config.entries, hmrPort);
   if (config.manifest) {
     await builder.writeManifest(config.manifest, injectHmr);
   }
@@ -340,7 +319,7 @@ async function runBuild(cwd, options) {
   const watcher = new FileWatcher2(watchDir, async () => {
     config.onBuildStart?.();
     try {
-      await builder.build(config.entries);
+      await builder.build(config.entries, hmrPort);
       if (config.manifest) {
         await builder.writeManifest(config.manifest, injectHmr);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kohi9noor/hotloop",
-  "version": "1.3.7",
+  "version": "1.3.10",
   "description": "Minimal, framework-free development tool for small-scale browser extensions. TypeScript, HMR, and Node module support—nothing else.",
   "author": "kohi9noor",
   "license": "MIT",
@@ -23,7 +23,7 @@
     "development-tool"
   ],
   "scripts": {
-    "build": "esbuild src/index.ts --bundle --platform=node --format=esm --external:ws --external:esbuild --external:fs --external:fs/promises --external:path --external:child_process --external:url --outdir=dist && esbuild src/cli.ts --bundle --platform=node --format=esm --external:ws --external:esbuild --external:fs --external:fs/promises --external:path --external:child_process --external:url --outfile=dist/cli.js && cp src/hmr-client.js dist/",
+    "build": "esbuild src/index.ts --bundle --platform=node --format=esm --external:ws --external:esbuild --external:fs --external:fs/promises --external:path --external:child_process --external:url --outdir=dist && esbuild src/cli.ts --bundle --platform=node --format=esm --external:ws --external:esbuild --external:fs --external:fs/promises --external:path --external:child_process --external:url --outfile=dist/cli.js && cp src/hotloop-hmr.js dist/",
     "prepare": "npm run build"
   },
   "files": [
@@ -35,6 +35,7 @@
   },
   "devDependencies": {
     "@types/node": "^25.3.2",
+    "@types/ws": "^8.18.1",
     "typescript": "^5.9.3"
   }
 }

package/dist/hmr-client.js

@@ -1,31 +0,0 @@
-/* src/hmr-client.js */
-
-// These constants will be replaced by esbuild during the build process
-const port = __HOTLOOP_PORT__ || 8000;
-const host = "localhost";
-
-const socket = new WebSocket(`ws://${host}:${port}`);
-
-socket.onopen = () => {
-  console.log("[hotloop] HMR connected");
-};
-
-socket.onmessage = (event) => {
-  try {
-    const data = JSON.parse(event.data);
-    if (data.type === "reload") {
-      console.log("[hotloop] Change detected, reloading extension...");
-      chrome.runtime.reload();
-    }
-  } catch (err) {
-    console.error("[hotloop] Failed to parse HMR message:", err);
-  }
-};
-
-socket.onclose = () => {
-  console.log("[hotloop] HMR disconnected. Refresh the page to reconnect.");
-};
-
-socket.onerror = (error) => {
-  console.error("[hotloop] HMR WebSocket error:", error);
-};