@kohi9noor/hotloop 1.3.5 → 1.3.7

package/dist/cli.js

@@ -89,10 +89,11 @@ __export(builder_exports, {
 import * as esbuild from "esbuild";
 import * as fs from "fs/promises";
 import * as path from "path";
-var ExtensionBuilder;
+var HMR_CLIENT_NAME, 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;
@@ -135,26 +136,28 @@ var init_builder = __esm({
           await fs.copyFile(srcPath, destPath);
         }
       }
-      async writeManifest(options) {
+      /**
+       * Writes the manifest file to the destination.
+       * If injectHmr is true, it automatically injects the HMR client script into content_scripts.
+       */
+      async writeManifest(options, injectHmr = false) {
         const srcPath = path.join(this.cwd, options.src);
         const destPath = path.join(this.cwd, options.dest);
         const destDir = path.dirname(destPath);
         const raw = await fs.readFile(srcPath, "utf-8");
         const manifest = JSON.parse(raw);
-        if (options.injectHmr) {
-          const hmrScript = options.hmrScript || "content/hmr.js";
+        if (injectHmr) {
           const hmrMatches = options.hmrMatches || ["<all_urls>"];
-          const hmrRunAt = options.hmrRunAt || "document_start";
           const existing = Array.isArray(manifest.content_scripts) ? manifest.content_scripts : [];
           const alreadyInjected = existing.some((entry) => {
             const scripts = entry.js || [];
-            return Array.isArray(scripts) && scripts.includes(hmrScript);
+            return scripts.includes(HMR_CLIENT_NAME);
           });
           if (!alreadyInjected) {
             existing.push({
               matches: hmrMatches,
-              js: [hmrScript],
-              run_at: hmrRunAt
+              js: [HMR_CLIENT_NAME],
+              run_at: "document_start"
             });
           }
           manifest.content_scripts = existing;
@@ -162,6 +165,26 @@ var init_builder = __esm({
         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}`);
+        }
+      }
     };
   }
 });
@@ -260,11 +283,9 @@ async function runBuild(cwd, options) {
   const { FileWatcher: FileWatcher2 } = await Promise.resolve().then(() => (init_watcher(), watcher_exports));
   const config = await loadConfig2(cwd);
   validateConfig2(config);
-  if (config.manifest && options?.injectHmr === false) {
-    config.manifest = { ...config.manifest, injectHmr: false };
-  }
   const outDir = config.outDir || "dist";
   const buildOutDir = config.buildOutDir || outDir;
+  const injectHmr = options?.injectHmr ?? false;
   const replaceOutDir = (target) => {
     const normalized = target.replace(/\\/g, "/");
     const prefix = `${outDir.replace(/\\/g, "/")}/`;
@@ -297,13 +318,16 @@ async function runBuild(cwd, options) {
       }));
     }
   }
-  const port = config.port || 3e3;
+  const port = config.port || 8e3;
   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);
   if (config.manifest) {
-    await builder.writeManifest(config.manifest);
+    await builder.writeManifest(config.manifest, injectHmr);
   }
   if (config.assets) {
     await builder.copy(config.assets);
@@ -319,7 +343,7 @@ async function runBuild(cwd, options) {
     try {
       await builder.build(config.entries);
       if (config.manifest) {
-        await builder.writeManifest(config.manifest);
+        await builder.writeManifest(config.manifest, injectHmr);
       }
       if (config.assets) {
         await builder.copy(config.assets);
@@ -441,24 +465,28 @@ p {
       path3.join(targetDir, "src", "ui", "popup.ts"),
       popupScript
     );
+    const contentScript = `console.log("Content script loaded");
+`;
+    await fs3.writeFile(
+      path3.join(targetDir, "src", "content", "index.ts"),
+      contentScript
+    );
     const configFile = `export default {
-  port: 3000,
-  watchDir: "src",
-  outDir: "dist",
-  buildOutDir: "build",
+  port: 8000,
   entries: [
     { input: "src/background/index.ts", output: "dist/background/index.js" },
+    { input: "src/content/index.ts", output: "dist/content/index.js" },
     { input: "src/ui/popup.ts", output: "dist/ui/popup.js" },
   ],
+
   manifest: {
     src: "src/manifest.json",
     dest: "dist/manifest.json",
-    injectHmr: true,
-    hmrScript: "content/hmr.js",
+    // Injects HMR client only in development mode
     hmrMatches: ["<all_urls>"],
-    hmrRunAt: "document_start",
   },
-  assets: [
+
+  copy: [
     { src: "src/ui/popup.html", dest: "dist/ui/popup.html" },
     { src: "src/ui/popup.css", dest: "dist/ui/popup.css" },
   ],
@@ -475,6 +503,7 @@ p {
         build: "hotloop build"
       },
       devDependencies: {
+        "@kohi9noor/hotloop": "latest",
         "@types/chrome": "^0.1.37",
         typescript: "^5.9.3"
       }
@@ -487,10 +516,11 @@ p {
       compilerOptions: {
         target: "ES2020",
         module: "ESNext",
-        lib: ["ES2020"],
+        lib: ["ES2020", "DOM", "WebWorker"],
         skipLibCheck: true,
         esModuleInterop: true,
         resolveJsonModule: true,
+        moduleResolution: "node",
         strict: true
       },
       include: ["src"]

package/dist/hmr-client.js

@@ -0,0 +1,31 @@
+/* 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);
+};

package/dist/index.js

@@ -88,10 +88,11 @@ __export(builder_exports, {
 import * as esbuild from "esbuild";
 import * as fs from "fs/promises";
 import * as path from "path";
-var ExtensionBuilder;
+var HMR_CLIENT_NAME, 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;
@@ -134,26 +135,28 @@ var init_builder = __esm({
           await fs.copyFile(srcPath, destPath);
         }
       }
-      async writeManifest(options) {
+      /**
+       * Writes the manifest file to the destination.
+       * If injectHmr is true, it automatically injects the HMR client script into content_scripts.
+       */
+      async writeManifest(options, injectHmr = false) {
         const srcPath = path.join(this.cwd, options.src);
         const destPath = path.join(this.cwd, options.dest);
         const destDir = path.dirname(destPath);
         const raw = await fs.readFile(srcPath, "utf-8");
         const manifest = JSON.parse(raw);
-        if (options.injectHmr) {
-          const hmrScript = options.hmrScript || "content/hmr.js";
+        if (injectHmr) {
           const hmrMatches = options.hmrMatches || ["<all_urls>"];
-          const hmrRunAt = options.hmrRunAt || "document_start";
           const existing = Array.isArray(manifest.content_scripts) ? manifest.content_scripts : [];
           const alreadyInjected = existing.some((entry) => {
             const scripts = entry.js || [];
-            return Array.isArray(scripts) && scripts.includes(hmrScript);
+            return scripts.includes(HMR_CLIENT_NAME);
           });
           if (!alreadyInjected) {
             existing.push({
               matches: hmrMatches,
-              js: [hmrScript],
-              run_at: hmrRunAt
+              js: [HMR_CLIENT_NAME],
+              run_at: "document_start"
             });
           }
           manifest.content_scripts = existing;
@@ -161,6 +164,26 @@ var init_builder = __esm({
         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}`);
+        }
+      }
     };
   }
 });
@@ -259,11 +282,9 @@ async function runBuild(cwd, options) {
   const { FileWatcher: FileWatcher2 } = await Promise.resolve().then(() => (init_watcher(), watcher_exports));
   const config = await loadConfig2(cwd);
   validateConfig2(config);
-  if (config.manifest && options?.injectHmr === false) {
-    config.manifest = { ...config.manifest, injectHmr: false };
-  }
   const outDir = config.outDir || "dist";
   const buildOutDir = config.buildOutDir || outDir;
+  const injectHmr = options?.injectHmr ?? false;
   const replaceOutDir = (target) => {
     const normalized = target.replace(/\\/g, "/");
     const prefix = `${outDir.replace(/\\/g, "/")}/`;
@@ -296,13 +317,16 @@ async function runBuild(cwd, options) {
       }));
     }
   }
-  const port = config.port || 3e3;
+  const port = config.port || 8e3;
   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);
   if (config.manifest) {
-    await builder.writeManifest(config.manifest);
+    await builder.writeManifest(config.manifest, injectHmr);
   }
   if (config.assets) {
     await builder.copy(config.assets);
@@ -318,7 +342,7 @@ async function runBuild(cwd, options) {
     try {
       await builder.build(config.entries);
       if (config.manifest) {
-        await builder.writeManifest(config.manifest);
+        await builder.writeManifest(config.manifest, injectHmr);
       }
       if (config.assets) {
         await builder.copy(config.assets);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kohi9noor/hotloop",
-  "version": "1.3.5",
+  "version": "1.3.7",
   "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",
+    "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/",
     "prepare": "npm run build"
   },
   "files": [