build(extension): migrate to esm to pass the firefox addon file size limit

Author: webfansplz

packages/client/src/main.ts

@@ -7,17 +7,6 @@ import { getViteClient } from 'vite-hot-client'
 import { createApp } from 'vue'
 import { createMemoryHistory, createRouter } from 'vue-router'
 import WaitForConnection from '~/components/WaitForConnection.vue'
-import Assets from '~/pages/assets.vue'
-import Components from '~/pages/components.vue'
-import CustomInspectorTabView from '~/pages/custom-inspector-tab-view.vue'
-import CustomTabView from '~/pages/custom-tab-view.vue'
-import Graph from '~/pages/graph.vue'
-import Overview from '~/pages/overview.vue'
-import Pages from '~/pages/pages.vue'
-import PiniaPage from '~/pages/pinia.vue'
-import RouterPage from '~/pages/router.vue'
-import Settings from '~/pages/settings.vue'
-import Timeline from '~/pages/timeline.vue'
 import App from './App.vue'
 import '@unocss/reset/tailwind.css'
 import 'uno.css'
@@ -27,17 +16,17 @@ import '~/assets/styles/main.css'
 
 const routes = [
   { path: '/', redirect: '/components' },
-  { path: '/overview', component: Overview },
-  { path: '/components', component: Components },
-  { path: '/pinia', component: PiniaPage },
-  { path: '/router', component: RouterPage },
-  { path: '/pages', component: Pages },
-  { path: '/timeline', component: Timeline },
-  { path: '/assets', component: Assets },
-  { path: '/graph', component: Graph },
-  { path: '/settings', component: Settings },
-  { path: `/${CUSTOM_TAB_VIEW}/:name`, component: CustomTabView },
-  { path: `/${CUSTOM_INSPECTOR_TAB_VIEW}/:name`, component: CustomInspectorTabView },
+  { path: '/overview', component: () => import('~/pages/overview.vue') },
+  { path: '/components', component: () => import('~/pages/components.vue') },
+  { path: '/pinia', component: () => import('~/pages/pinia.vue') },
+  { path: '/router', component: () => import('~/pages/router.vue') },
+  { path: '/pages', component: () => import('~/pages/pages.vue') },
+  { path: '/timeline', component: () => import('~/pages/timeline.vue') },
+  { path: '/assets', component: () => import('~/pages/assets.vue') },
+  { path: '/graph', component: () => import('~/pages/graph.vue') },
+  { path: '/settings', component: () => import('~/pages/settings.vue') },
+  { path: `/${CUSTOM_TAB_VIEW}/:name`, component: () => import('~/pages/custom-tab-view.vue') },
+  { path: `/${CUSTOM_INSPECTOR_TAB_VIEW}/:name`, component: () => import('~/pages/custom-inspector-tab-view.vue') },
 ]
 
 const router = createRouter({

packages/firefox-extension/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/firefox-extension/tsup.config.ts

@@ -1,8 +1,9 @@
 import { defineConfig } from 'tsup'
 
-export default defineConfig({
+export default defineConfig([{
   entryPoints: [
     'src/*.ts',
+    '!src/devtools-panel.ts',
   ],
   esbuildOptions(options) {
     if (options.format === 'iife')
@@ -16,4 +17,17 @@ export default defineConfig({
   clean: true,
   format: ['iife'],
   minify: true,
-})
+}, {
+  entryPoints: [
+    'src/devtools-panel.ts',
+  ],
+  define: {
+    'process.env': JSON.stringify(process.env),
+    '__VUE_OPTIONS_API__': 'true',
+    '__VUE_PROD_DEVTOOLS__': 'true',
+  },
+  clean: true,
+  format: ['esm'],
+  minify: true,
+  noExternal: ['@vue/devtools-core', '@vue/devtools-kit', '@vue/devtools-shared'],
+}])