Compile Chrome extension scripts using Vite

With this change, `content-script`, `devtools` and `fetch-patch` are compiled using Vite. This will make it possible to import things into them, and have better linting.
alvarlagerlof · May 10, 2024 · fbc1c08 · fbc1c08
1 parent 69a1ca4
commit fbc1c08
Show file tree

Hide file tree

Showing 8 changed files with 91 additions and 9 deletions.
diff --git a/.changeset/beige-stingrays-doubt.md b/.changeset/beige-stingrays-doubt.md
@@ -0,0 +1,10 @@
+---
+"@rsc-parser/chrome-extension": minor
+"@rsc-parser/embedded-example": minor
+"@rsc-parser/core": minor
+"@rsc-parser/embedded": minor
+"@rsc-parser/storybook": minor
+"@rsc-parser/website": minor
+---
+
+Compile Chrome extension scripts using Vite
diff --git a/packages/chrome-extension/public/devtools-page.html b/packages/chrome-extension/public/devtools-page.html
@@ -1,3 +1,3 @@
 <body>
-  <script src="devtools.js"></script>
+  <script src="assets/devtools.js"></script>
 </body>
diff --git a/packages/chrome-extension/public/manifest.json b/packages/chrome-extension/public/manifest.json
@@ -10,13 +10,13 @@
   "content_scripts": [
     {
       "matches": ["http://*/*", "https://*/*"],
-      "js": ["content-script.js"],
+      "js": ["assets/content-script.js"],
       "all_frames": true
     }
   ],
   "web_accessible_resources": [
     {
-      "resources": ["fetch-patch.js"],
+      "resources": ["assets/fetch-patch.js"],
       "matches": ["http://*/*", "https://*/*"]
     }
   ]

diff --git a/...chrome-extension/public/content-script.js → ...es/chrome-extension/src/content-script.ts b/...chrome-extension/public/content-script.js → ...es/chrome-extension/src/content-script.ts
@@ -5,7 +5,7 @@
  * @param  {type} tag The tag as string, where the script will be append (default: 'body').
  * @see    {@link http://stackoverflow.com/questions/20499994/access-window-variable-from-content-script}
  */
-function injectScript(file_path, tag) {
+function injectScript(file_path: string, tag: string) {
   const node = document.getElementsByTagName(tag)[0];
   const script = document.createElement("script");
   script.setAttribute("type", "text/javascript");
@@ -14,18 +14,19 @@ function injectScript(file_path, tag) {
 }
 
 // This is used in the devtools panel to only accept messages from the current tab
+// @ts-expect-error TODO: Fix type
 let tabId = undefined;
 
 // Only inject the fetch patch script when the START_RECORDING message
 // is received from the devtools panel
-// eslint-disable-next-line no-undef
+
 chrome.runtime.onMessage.addListener(function (request) {
   if (request.type === "START_RECORDING") {
     // Store the tabId so that the devtools panel can filter messages to
     // only show the ones from the current tab
     tabId = request.tabId;
-    // eslint-disable-next-line no-undef
-    injectScript(chrome.runtime.getURL("fetch-patch.js"), "body");
+
+    injectScript(chrome.runtime.getURL("assets/fetch-patch.js"), "body");
   }
 
   return true;
@@ -41,7 +42,7 @@ window.addEventListener(
     }
 
     if (event.data.type && event.data.type == "RSC_CHUNK") {
-      // eslint-disable-next-line no-undef
+      // @ts-expect-error TODO: Fix type
       chrome.runtime.sendMessage({ ...event.data, tabId });
     }
   },
@@ -50,6 +51,6 @@ window.addEventListener(
 
 // When the content script is unloaded (like for a refresh), send a message to the devtools panel to reset it
 window.addEventListener("beforeunload", () => {
-  // eslint-disable-next-line no-undef
+  // @ts-expect-error TODO: Fix type
   chrome.runtime.sendMessage({ type: "CONTENT_SCRIPT_UNLOADED", tabId });
 });
diff --git a/packages/chrome-extension/public/devtools.js → packages/chrome-extension/src/devtools.ts b/packages/chrome-extension/public/devtools.js → packages/chrome-extension/src/devtools.ts
diff --git a/...es/chrome-extension/public/fetch-patch.js → packages/chrome-extension/src/fetch-patch.ts b/...es/chrome-extension/public/fetch-patch.js → packages/chrome-extension/src/fetch-patch.ts
@@ -1,10 +1,13 @@
+// @ts-expect-error TODO: Fix type
 if (typeof window.originalFetch === "undefined") {
+  // @ts-expect-error TODO: Fix type
   window.originalFetch = window.fetch;
 }
 
 window.fetch = async (...args) => {
   const fetchStartTime = Date.now();
 
+  // @ts-expect-error TODO: Fix type
   const response = await window.originalFetch(...args);
 
   if (typeof response.headers === "undefined") {

diff --git a/packages/chrome-extension/vite.config.ts b/packages/chrome-extension/vite.config.ts
@@ -1,6 +1,7 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import htmlPlugin, { Options, ScriptTag } from "vite-plugin-html-config";
+import { resolve } from "path";
 
 const dev = {
   headScripts: [
@@ -37,6 +38,19 @@ export default defineConfig(({ mode }) => {
       build: {
         outDir: "./dist",
         minify: false,
+        rollupOptions: {
+          input: {
+            main: resolve(__dirname, "index.html"),
+            "fetch-patch": resolve(__dirname, "src/fetch-patch.ts"),
+            "content-script": resolve(__dirname, "src/content-script.ts"),
+            devtools: resolve(__dirname, "src/devtools.ts"),
+          },
+          output: {
+            entryFileNames: `assets/[name].js`,
+            chunkFileNames: `assets/[name].js`,
+            assetFileNames: `assets/[name].[ext]`,
+          },
+        },
       },
       server: {
         port: 6020,
@@ -50,6 +64,19 @@ export default defineConfig(({ mode }) => {
     build: {
       outDir: "./dist",
       minify: false,
+      rollupOptions: {
+        input: {
+          main: resolve(__dirname, "index.html"),
+          "fetch-patch": resolve(__dirname, "src/fetch-patch.ts"),
+          "content-script": resolve(__dirname, "src/content-script.ts"),
+          devtools: resolve(__dirname, "src/devtools.ts"),
+        },
+        output: {
+          entryFileNames: `assets/[name].js`,
+          chunkFileNames: `assets/[name].js`,
+          assetFileNames: `assets/[name].[ext]`,
+        },
+      },
     },
     server: {
       port: 6020,

diff --git a/packages/embedded/vite.config.ts.timestamp-1715330062214-d930edb122cc3.mjs b/packages/embedded/vite.config.ts.timestamp-1715330062214-d930edb122cc3.mjs
@@ -0,0 +1,41 @@
+// vite.config.ts
+import { resolve } from "path";
+import { defineConfig } from "file:///Users/alvar/Code/alvarlagerlof/rsc-parser/node_modules/vite/dist/node/index.js";
+import react from "file:///Users/alvar/Code/alvarlagerlof/rsc-parser/node_modules/@vitejs/plugin-react/dist/index.mjs";
+import dts from "file:///Users/alvar/Code/alvarlagerlof/rsc-parser/node_modules/vite-plugin-dts/dist/index.mjs";
+import preserveDirectives from "file:///Users/alvar/Code/alvarlagerlof/rsc-parser/node_modules/rollup-plugin-preserve-directives/dist/index.js";
+var __vite_injected_original_dirname = "/Users/alvar/Code/alvarlagerlof/rsc-parser/packages/embedded";
+var vite_config_default = defineConfig({
+  plugins: [react(), dts()],
+  build: {
+    outDir: "./dist/js",
+    emptyOutDir: false,
+    lib: {
+      // Could also be a dictionary or array of multiple entry points
+      entry: resolve(__vite_injected_original_dirname, "RscDevtoolsPanel.tsx"),
+      name: "embedded",
+      // the proper extensions will be added
+      fileName: "embedded",
+      formats: ["es"]
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: ["react"],
+      output: {
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          react: "React"
+        },
+        preserveModules: true
+      },
+      plugins: [preserveDirectives()]
+    },
+    minify: false
+  }
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvYWx2YXIvQ29kZS9hbHZhcmxhZ2VybG9mL3JzYy1wYXJzZXIvcGFja2FnZXMvZW1iZWRkZWRcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIi9Vc2Vycy9hbHZhci9Db2RlL2FsdmFybGFnZXJsb2YvcnNjLXBhcnNlci9wYWNrYWdlcy9lbWJlZGRlZC92aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvYWx2YXIvQ29kZS9hbHZhcmxhZ2VybG9mL3JzYy1wYXJzZXIvcGFja2FnZXMvZW1iZWRkZWQvdml0ZS5jb25maWcudHNcIjsvLyB2aXRlLmNvbmZpZy5qc1xuaW1wb3J0IHsgcmVzb2x2ZSB9IGZyb20gXCJwYXRoXCI7XG5pbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tIFwidml0ZVwiO1xuaW1wb3J0IHJlYWN0IGZyb20gXCJAdml0ZWpzL3BsdWdpbi1yZWFjdFwiO1xuaW1wb3J0IGR0cyBmcm9tIFwidml0ZS1wbHVnaW4tZHRzXCI7XG5pbXBvcnQgcHJlc2VydmVEaXJlY3RpdmVzIGZyb20gXCJyb2xsdXAtcGx1Z2luLXByZXNlcnZlLWRpcmVjdGl2ZXNcIjtcblxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcbiAgcGx1Z2luczogW3JlYWN0KCksIGR0cygpXSxcbiAgYnVpbGQ6IHtcbiAgICBvdXREaXI6IFwiLi9kaXN0L2pzXCIsXG4gICAgZW1wdHlPdXREaXI6IGZhbHNlLFxuICAgIGxpYjoge1xuICAgICAgLy8gQ291bGQgYWxzbyBiZSBhIGRpY3Rpb25hcnkgb3IgYXJyYXkgb2YgbXVsdGlwbGUgZW50cnkgcG9pbnRzXG4gICAgICBlbnRyeTogcmVzb2x2ZShfX2Rpcm5hbWUsIFwiUnNjRGV2dG9vbHNQYW5lbC50c3hcIiksXG4gICAgICBuYW1lOiBcImVtYmVkZGVkXCIsXG4gICAgICAvLyB0aGUgcHJvcGVyIGV4dGVuc2lvbnMgd2lsbCBiZSBhZGRlZFxuICAgICAgZmlsZU5hbWU6IFwiZW1iZWRkZWRcIixcbiAgICAgIGZvcm1hdHM6IFtcImVzXCJdLFxuICAgIH0sXG4gICAgcm9sbHVwT3B0aW9uczoge1xuICAgICAgLy8gbWFrZSBzdXJlIHRvIGV4dGVybmFsaXplIGRlcHMgdGhhdCBzaG91bGRuJ3QgYmUgYnVuZGxlZFxuICAgICAgLy8gaW50byB5b3VyIGxpYnJhcnlcbiAgICAgIGV4dGVybmFsOiBbXCJyZWFjdFwiXSxcbiAgICAgIG91dHB1dDoge1xuICAgICAgICAvLyBQcm92aWRlIGdsb2JhbCB2YXJpYWJsZXMgdG8gdXNlIGluIHRoZSBVTUQgYnVpbGRcbiAgICAgICAgLy8gZm9yIGV4dGVybmFsaXplZCBkZXBzXG4gICAgICAgIGdsb2JhbHM6IHtcbiAgICAgICAgICByZWFjdDogXCJSZWFjdFwiLFxuICAgICAgICB9LFxuICAgICAgICBwcmVzZXJ2ZU1vZHVsZXM6IHRydWUsXG4gICAgICB9LFxuICAgICAgcGx1Z2luczogW3ByZXNlcnZlRGlyZWN0aXZlcygpXSxcbiAgICB9LFxuICAgIG1pbmlmeTogZmFsc2UsXG4gIH0sXG59KTtcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFDQSxTQUFTLGVBQWU7QUFDeEIsU0FBUyxvQkFBb0I7QUFDN0IsT0FBTyxXQUFXO0FBQ2xCLE9BQU8sU0FBUztBQUNoQixPQUFPLHdCQUF3QjtBQUwvQixJQUFNLG1DQUFtQztBQU96QyxJQUFPLHNCQUFRLGFBQWE7QUFBQSxFQUMxQixTQUFTLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQztBQUFBLEVBQ3hCLE9BQU87QUFBQSxJQUNMLFFBQVE7QUFBQSxJQUNSLGFBQWE7QUFBQSxJQUNiLEtBQUs7QUFBQTtBQUFBLE1BRUgsT0FBTyxRQUFRLGtDQUFXLHNCQUFzQjtBQUFBLE1BQ2hELE1BQU07QUFBQTtBQUFBLE1BRU4sVUFBVTtBQUFBLE1BQ1YsU0FBUyxDQUFDLElBQUk7QUFBQSxJQUNoQjtBQUFBLElBQ0EsZUFBZTtBQUFBO0FBQUE7QUFBQSxNQUdiLFVBQVUsQ0FBQyxPQUFPO0FBQUEsTUFDbEIsUUFBUTtBQUFBO0FBQUE7QUFBQSxRQUdOLFNBQVM7QUFBQSxVQUNQLE9BQU87QUFBQSxRQUNUO0FBQUEsUUFDQSxpQkFBaUI7QUFBQSxNQUNuQjtBQUFBLE1BQ0EsU0FBUyxDQUFDLG1CQUFtQixDQUFDO0FBQUEsSUFDaEM7QUFBQSxJQUNBLFFBQVE7QUFBQSxFQUNWO0FBQ0YsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K