chore: hmr with vite-plugin-web-extension

ruifigueira · Dec 16, 2024 · 057ff93 · 057ff93
1 parent 108f6d0
commit 057ff93
Show file tree

Hide file tree

Showing 6 changed files with 2,807 additions and 320 deletions.
diff --git a/examples/recorder-crx/public/manifest.json → examples/recorder-crx/manifest.json b/examples/recorder-crx/public/manifest.json → examples/recorder-crx/manifest.json
@@ -9,7 +9,7 @@
     "128": "icon-192x192.png"
   },
   "background": {
-    "service_worker": "background.js",
+    "service_worker": "src/background.ts",
     "type": "module"
   },
   "action": {
@@ -22,13 +22,13 @@
   "commands": {
     "record": {
       "suggested_key": {
-        "default": "Shift+Alt+R"
+        "default": "Alt+Shift+R"
       },
       "description": "Start recording"
     },
     "inspect": {
       "suggested_key": {
-        "default": "Shift+Alt+C"
+        "default": "Alt+Shift+C"
       },
       "description": "Start inspecting"
     }

diff --git a/examples/recorder-crx/package.json b/examples/recorder-crx/package.json
@@ -6,7 +6,8 @@
   "author": "",
   "license": "ISC",
   "scripts": {
-    "build": "tsc && vite build"
+    "build": "vite build --config vite.build.config.ts",
+    "dev": "vite"
   },
   "dependencies": {
     "idb-keyval": "^6.2.1",
@@ -22,6 +23,7 @@
     "@types/react-dom": "^18.3.1",
     "@types/wicg-file-system-access": "^2023.10.5",
     "typescript": "^5.5.3",
-    "vite": "^5.4.6"
+    "vite": "^5.4.6",
+    "vite-plugin-web-extension": "^4.3.1"
   }
 }
diff --git a/examples/recorder-crx/vite.build.config.ts b/examples/recorder-crx/vite.build.config.ts
@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) Rui Figueira.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import path from 'path';
+import sourcemaps from 'rollup-plugin-sourcemaps';
+import { defineConfig } from 'vite';
+import webExtension from 'vite-plugin-web-extension';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    webExtension({
+      additionalInputs: [
+        'uiMode.html',
+      ],
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@isomorphic': path.resolve(__dirname, '../../playwright/packages/playwright-core/src/utils/isomorphic'),
+      '@protocol': path.resolve(__dirname, '../../playwright/packages/protocol/src'),
+      '@web': path.resolve(__dirname, '../../playwright/packages/web/src'),
+      '@recorder': path.resolve(__dirname, '../../playwright/packages/recorder/src'),
+    },
+  },
+  build: {
+    // skip code obfuscation
+    minify: false,
+    // chunk limit is not an issue, this is a browser extension
+    chunkSizeWarningLimit: 10240,
+    sourcemap: true,
+    rollupOptions: {
+      // @ts-ignore
+      plugins: [sourcemaps()],
+      input: {
+        'index': path.resolve(__dirname, 'index.html'),
+        'preferences': path.resolve(__dirname, 'preferences.html'),
+        'background': path.resolve(__dirname, 'src/background.ts'),
+      },
+      output: {
+        entryFileNames: '[name].js',
+        chunkFileNames: '[name].js',
+        assetFileNames: '[name].[ext]',
+      },
+    },
+  },
+});
diff --git a/examples/recorder-crx/vite.config.ts b/examples/recorder-crx/vite.config.ts
@@ -16,37 +16,31 @@
 
 import path from 'path';
 import { defineConfig } from 'vite';
-import sourcemaps from 'rollup-plugin-sourcemaps';
+
+import recorderBuildConfig from './vite.build.config';
+import crxConfig from '../../vite.config.mjs';
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  plugins: recorderBuildConfig.plugins,
   resolve: {
     alias: {
-      '@isomorphic': path.resolve(__dirname, '../../playwright/packages/playwright-core/src/utils/isomorphic'),
-      '@protocol': path.resolve(__dirname, '../../playwright/packages/protocol/src'),
-      '@web': path.resolve(__dirname, '../../playwright/packages/web/src'),
-      '@recorder': path.resolve(__dirname, '../../playwright/packages/recorder/src'),
+      ...crxConfig.resolve?.alias,
+      ...recorderBuildConfig.resolve?.alias,
+
+      'playwright-crx': path.resolve(__dirname, '../../src'),
     },
   },
+  define: {
+    ...crxConfig.define,
+    'process.env.CI': 'false',
+  },
   build: {
-    // skip code obfuscation
     minify: false,
-    // chunk limit is not an issue, this is a browser extension
-    chunkSizeWarningLimit: 10240,
     sourcemap: true,
-    rollupOptions: {
-      // @ts-ignore
-      plugins: [sourcemaps()],
-      input: {
-        'index': path.resolve(__dirname, 'index.html'),
-        'preferences': path.resolve(__dirname, 'preferences.html'),
-        'background': path.resolve(__dirname, 'src/background.ts'),
-      },
-      output: {
-        entryFileNames: '[name].js',
-        chunkFileNames: '[name].js',
-        assetFileNames: '[name].[ext]',
-      },
+    commonjsOptions: {
+      ...crxConfig.build?.commonjsOptions,
+      ...recorderBuildConfig.build?.commonjsOptions,
     },
   },
 });