chore(extension): move to tsdown

Author: webfansplz

packages/chrome-extension/manifest.json

@@ -9,7 +9,8 @@
     "default_title": "Vue DevTools"
   },
   "background": {
-    "service_worker": "dist/background.js"
+    "service_worker": "dist/background.js",
+    "type": "module"
   },
   "content_scripts": [
     {

packages/chrome-extension/package.json

@@ -9,8 +9,8 @@
     "dist"
   ],
   "scripts": {
-    "build": "cross-env NODE_ENV=production tsup",
-    "dev": "cross-env NODE_ENV=development tsup --watch"
+    "build": "cross-env NODE_ENV=production tsdown",
+    "dev": "cross-env NODE_ENV=development tsdown --watch"
   },
   "dependencies": {
     "@vue/devtools-core": "workspace:^",

packages/chrome-extension/pages/devtools-panel.html

@@ -19,6 +19,6 @@
     <div id="container">
       <div id="app"></div>
     </div>
-    <script src="../dist/devtools-panel.js"></script>
+    <script type="module" src="../dist/devtools-panel.js"></script>
   </body>
 </html>

packages/chrome-extension/src/devtools-overlay.ts

@@ -4,6 +4,7 @@ if (document instanceof HTMLDocument) {
   // create detector script
   const detector = document.createElement('script')
   detector.src = chrome.runtime.getURL('dist/detector.js')
+  detector.type = 'module'
   detector.onload = () => {
     detector.parentNode!.removeChild(detector)
   }

packages/chrome-extension/src/devtools-panel.ts

@@ -1,44 +1,7 @@
-// import { Bridge } from '../../core/src/bridge'
 import { functions, onRpcConnected } from '@vue/devtools-core'
 import { createRpcClient } from '@vue/devtools-kit'
 import { disconnectDevToolsClient, initDevTools, reloadDevToolsClient } from '../client/devtools-panel'
 
-const connectionInfo: {
-  retryTimer: NodeJS.Timeout | null
-  count: number
-  disconnected: boolean
-  port: chrome.runtime.Port
-  listeners: Array<() => void>
-} = {
-  retryTimer: null,
-  count: 0,
-  disconnected: false,
-  port: null!,
-  listeners: [],
-}
-
-// function connect() {
-//   try {
-//     clearTimeout(connectionInfo.retryTimer!)
-//     connectionInfo.count++
-//     connectionInfo.port = chrome.runtime.connect({
-//       name: `${chrome.devtools.inspectedWindow.tabId}`,
-//     })
-
-//     connectionInfo.disconnected = false
-//     connectionInfo.port.onDisconnect.addListener(() => {
-//       connectionInfo.disconnected = true
-//       connectionInfo.retryTimer = setTimeout(connect, 1000)
-//     })
-//     if (connectionInfo.count > 1)
-//       connectionInfo.listeners.forEach(fn => connectionInfo.port.onMessage.addListener(fn))
-//   }
-//   catch (e) {
-//     connectionInfo.disconnected = true
-//     connectionInfo.retryTimer = setTimeout(connect, 5000)
-//   }
-// }
-
 function init() {
   injectScript(chrome.runtime.getURL('dist/user-app.js'), () => {
     initDevTools()
@@ -64,6 +27,7 @@ function injectScript(scriptName: string, cb: () => void) {
     (function() {
       var script = document.constructor.prototype.createElement.call(document, 'script');
       script.src = "${scriptName}";
+      script.type = "module";
       document.documentElement.appendChild(script);
       script.parentNode.removeChild(script);
     })()

packages/chrome-extension/src/proxy.ts

@@ -8,32 +8,3 @@ import { createRpcProxy } from '@vue/devtools-kit'
 createRpcProxy({
   preset: 'extension',
 })
-
-// const port = chrome.runtime.connect({
-//   name: 'content-script',
-// })
-
-// function sendMessageToUserApp(payload) {
-//   window.postMessage({
-//     source: '__VUE_DEVTOOLS_PROXY__',
-//     payload,
-//   }, '*')
-// }
-
-// function sendMessageToDevTools(e) {
-//   if (e.data && e.data.source === '__VUE_DEVTOOLS_USER_APP__')
-//     port.postMessage(e.data.payload)
-// }
-
-// port.onMessage.addListener(sendMessageToUserApp)
-// window.addEventListener('message', sendMessageToDevTools)
-// port.onDisconnect.addListener(() => {
-//   window.removeEventListener('message', sendMessageToDevTools)
-//   sendMessageToUserApp({
-//     event: 'shutdown',
-//   })
-// })
-
-// sendMessageToUserApp({
-//   event: 'init',
-// })

packages/chrome-extension/src/user-app.ts

@@ -10,18 +10,5 @@ createRpcServer(functions, {
 function handshake(e: MessageEvent) {
   if (e.data.source === 'proxy->server' && e.data.payload.event === 'init') {
     window.removeEventListener('message', handshake)
-
-    const listeners: ((event: unknown) => void)[] = []
   }
 }
-
-// window.addEventListener('message', toggleOverlay)
-
-// function toggleOverlay(e) {
-//   const data = e.data
-//   const payload = data.payload
-//   if (data.source === '__VUE_DEVTOOLS_OVERLAY__' && payload.event === 'toggle-view-mode') {
-//     // @TODO: refactor
-//     target?.__VUE_DEVTOOLS_TOGGLE_OVERLAY__?.(payload.data === 'overlay')
-//   }
-// }

packages/chrome-extension/tsdown.config.ts

@@ -0,0 +1,38 @@
+import { defineConfig } from 'tsdown'
+
+const NO_EXTERNAL = ['@vue/devtools-core', '@vue/devtools-kit', '@vue/devtools-shared']
+function createIIFEConfig(entry: string) {
+  return {
+    entry: [entry],
+    clean: false,
+    format: 'iife' as const,
+    outputOptions: {
+      entryFileNames: '[name].js',
+    },
+    define: {
+      'process.env': JSON.stringify({
+        NODE_ENV: 'production',
+      }),
+      '__VUE_OPTIONS_API__': 'true',
+      '__VUE_PROD_DEVTOOLS__': 'true',
+    },
+    noExternal: NO_EXTERNAL,
+  }
+}
+export default defineConfig([{
+  entry: [
+    'src/*.ts',
+    '!src/proxy.ts',
+    '!src/prepare.ts',
+    '!src/devtools-overlay.ts',
+  ],
+  define: {
+    'process.env': JSON.stringify({
+      NODE_ENV: 'production',
+    }),
+    '__VUE_OPTIONS_API__': 'true',
+    '__VUE_PROD_DEVTOOLS__': 'true',
+  },
+  clean: false,
+  noExternal: NO_EXTERNAL,
+}, createIIFEConfig('src/proxy.ts'), createIIFEConfig('src/prepare.ts'), createIIFEConfig('src/devtools-overlay.ts')])

packages/chrome-extension/tsup.config.ts

@@ -3,7 +3,8 @@
     "persistent": true,
     "scripts": [
       "dist/background.js"
-    ]
+    ],
+    "type": "module"
   },
   "browser_action": {
     "default_icon": {