1 files changed, 131 insertions, 0 deletions
diff --git a/packages/web-inspector-bun/build.ts b/packages/web-inspector-bun/build.ts
new file mode 100644
index 000000000..4b1eb50e1
--- /dev/null
+++ b/packages/web-inspector-bun/build.ts
@@ -0,0 +1,131 @@
+import { build } from "esbuild";
+import { copyFileSync, mkdirSync, readdirSync, rmSync, statSync } from "fs";
+import { join } from "path";
+
+try {
+  const basePath = join(import.meta.dir, "../../src/bun.js/WebKit/Source/WebInspectorUI/UserInterface");
+  const htmlPath = join(basePath, "Main.html");
+  const backendCommands = join(
+    import.meta.dir,
+    "../../src/bun.js/WebKit/WebKitBuild/Release/JavaScriptCore/DerivedSources/inspector/InspectorBackendCommands.js",
+  );
+  const scriptsToBundle = [];
+  const stylesToBundle = [];
+  const jsReplacementId = crypto.randomUUID() + ".js";
+  const cssReplacementId = crypto.randomUUID() + ".css";
+  const html = new HTMLRewriter()
+    .on("script", {
+      element(element) {
+        const src = element.getAttribute("src");
+        if (src && !src?.includes("External") && !src?.includes("WebKitAdditions")) {
+          if (scriptsToBundle.length === 0) {
+            element.replace("<script>var WI = {};\n</script>", { html: true });
+          } else {
+            element.remove();
+          }
+
+          scriptsToBundle.push(src);
+        }
+      },
+    })
+    .on("script:not([src])", {
+      element(element) {
+        element.remove();
+      },
+    })
+    .on("head", {
+      element(element) {
+        element.prepend(` <base href="/" /> `, { html: true });
+
+        element.append(
+          `
+        <style>
+            body {
+                --undocked-title-area-height: 0px !important;
+            }
+        </style>
+        <script src="${jsReplacementId}"></script>
+
+        <script>
+            WI.sharedApp = new WI.AppController;
+            WI.sharedApp.initialize();
+        </script>`,
+          { html: true },
+        );
+      },
+    })
+    //   .on("link[rel=stylesheet]", {
+    //     element(element) {
+    //       const href = element.getAttribute("href");
+    //       if (href && !href?.includes("External") && !href?.includes("WebKitAdditions")) {
+    //         element.remove();
+    //         stylesToBundle.push(href);
+    //       }
+    //     },
+    //   })
+    .transform(new Response(Bun.file(htmlPath)));
+  let htmlText = await html.text();
+  rmSync(join(import.meta.dir, "out"), { recursive: true, force: true });
+  mkdirSync(join(import.meta.dir, "out", "Protocol"), { recursive: true });
+
+  const javascript = scriptsToBundle.map(a => `import '${join(basePath, a)}';`).join("\n") + "\n";
+  // const css = stylesToBundle.map(a => `@import "${join(basePath, a)}";`).join("\n") + "\n";
+  await Bun.write(join(import.meta.dir, "out/manifest.js"), javascript);
+  // await Bun.write(join(import.meta.dir, "manifest.css"), css);
+  const jsBundle = await Bun.build({
+    entrypoints: [join(import.meta.dir, "out/manifest.js")],
+    outdir: "out",
+    minify: true,
+  });
+  const jsFilename = "manifest-" + jsBundle.outputs[0].hash + ".js";
+  // const cssBundle = await build({
+  //   bundle: true,
+  //   minify: true,
+  //   write: false,
+  //   entryPoints: [join(import.meta.dir, "manifest.css")],
+  //   outdir: "out",
+  //   loader: {
+  //     ".css": "css",
+  //     ".svg": "dataurl",
+  //   },
+  //   external: ["*.png"],
+  //   plugins: [
+  //     {
+  //       name: "css",
+  //       setup(build) {
+  //         build.onResolve({ filter: new RegExp("/Images/Warning.svg") }, args => ({
+  //           path: join(basePath, "Images/Warning.svg"),
+  //         }));
+  //       },
+  //     },
+  //   ],
+  // });
+
+  // const cssFilename = "manifest-" + cssBundle.outputFiles[0].hash.replaceAll("/", "_") + ".css";
+  htmlText = htmlText.replace(jsReplacementId, jsFilename);
+  // htmlText = htmlText.replace(cssReplacementId, cssFilename);
+  await Bun.write(join(import.meta.dir, "out", jsFilename), jsBundle.outputs[0]);
+  // await Bun.write(join(import.meta.dir, "out", cssFilename), cssBundle.outputFiles[0].text);
+  await Bun.write(join(import.meta.dir, "out", "index.html"), htmlText);
+  await Bun.write(join(import.meta.dir, "out", "index.html"), htmlText);
+  await Bun.write(join(import.meta.dir, "out", "Protocol", "InspectorBackendCommands.js"), Bun.file(backendCommands));
+
+  function recursiveCopy(src, dest) {
+    readdirSync(src).forEach(file => {
+      const srcPath = join(src, file);
+      const destPath = join(dest, file);
+      if (statSync(srcPath).isDirectory()) {
+        mkdirSync(destPath, { recursive: true });
+        recursiveCopy(srcPath, destPath);
+      } else {
+        rmSync(destPath, { force: true });
+        copyFileSync(srcPath, destPath);
+      }
+    });
+  }
+
+  recursiveCopy(basePath, join(import.meta.dir, "out"));
+} catch (e) {
+  console.error("Failed to build. Please make sure you've ran `make jsc` locally.");
+  throw e;
+}