fix(vite+overlay): using mjs overlay bundle for vite plugin (#408)

Co-authored-by: arlo <[email protected]>

Author: alexzhang1030

packages/overlay/vite.config.ts

@@ -38,13 +38,32 @@ export default defineConfig({
       async closeBundle() {
         // copy
         const overlayFile = resolve(__dirname, './dist')
+
+        const overlayJsFile = resolve(__dirname, './dist/devtools-overlay.js')
+        const overlayMjsFile = resolve(__dirname, './dist/devtools-overlay.mjs')
+
+        fse.copyFileSync(overlayJsFile, overlayMjsFile)
+
+        // Browser extension keep using js file
         fse.copySync(
           overlayFile,
           resolve(__dirname, '../browser-extension/overlay'),
+          {
+            filter: (file) => {
+              return !file.endsWith('.mjs')
+            },
+          },
         )
+
+        // Vite using mjs file to skip some commonjs -> es6 plugins
         fse.copySync(
           overlayFile,
           resolve(__dirname, '../vite/src/overlay'),
+          {
+            filter: (file) => {
+              return !file.endsWith('.js')
+            },
+          },
         )
       },
     },

packages/playground/basic/package.json

@@ -17,6 +17,7 @@
     "vuex": "^4.1.0"
   },
   "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.8",
     "@tanstack/vue-query-devtools": "^5.38.0",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/devtools": "workspace:^",

packages/playground/basic/vite.config.ts

@@ -1,14 +1,16 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import VueDevTools from 'vite-plugin-vue-devtools'
-
+import commonjs from '@rollup/plugin-commonjs'
 import Unocss from 'unocss/vite'
 import AutoImport from 'unplugin-auto-import/vite'
+import inspect from 'vite-plugin-inspect'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
+    commonjs(),
     VueDevTools({
       launchEditor: 'code',
     }),
@@ -20,6 +22,7 @@ export default defineConfig({
         '@vueuse/core',
       ],
     }),
+    inspect(),
   ],
   server: {
     port: 3000,

packages/vite/src/overlay.js

@@ -41,7 +41,7 @@ link.href = `${overlayDir}/devtools-overlay.css`
 
 // create script
 const script = document.createElement('script')
-script.src = `${overlayDir}/devtools-overlay.js`
+script.src = `${overlayDir}/devtools-overlay.mjs`
 script.type = 'module'
 
 // append to head