fix(electron): use esm instead of iife to load script (#157)

Author: webfansplz

docs/guide/standalone.md

@@ -101,17 +101,17 @@ Then import it directly in your app:
 import { devtools } from '@vue/devtools'
 ```
 
-:::tip Important
-Make sure you import devtools before Vue, otherwise it might not work as expected.
-:::
-
 And connect to host:
 
 ```ts
 if (process.env.NODE_ENV === 'development')
   devtools.connect(/* host, port */)
 ```
 
+:::tip Important
+Make sure to invoke devtools connect function before creating Vue App, otherwise it might not work as expected.
+:::
+
 **host** - is an optional argument that tells your application where devtools middleware server is running, if you debug your app on your computer you don't have to set this (the default is `http://localhost`), but if you want to debug your app on mobile devices, you might want to pass your local IP (e.g. `http://192.168.1.12`).
 
 **port** - is an optional argument that tells your application on what port devtools middleware server is running. If you use proxy server, you might want to set it to `null` so the port won't be added to connection URL.

packages/electron/package.json

@@ -27,7 +27,8 @@
   "scripts": {
     "build": "tsx scripts/build.ts",
     "dev": "tsx scripts/build.ts --watch",
-    "prepare:type": "tsup src/index.ts --dts-only --format cjs,esm"
+    "prepare:type": "tsup src/index.ts --dts-only --format cjs,esm",
+    "stub": "pnpm dev"
   },
   "dependencies": {
     "@vue/devtools-core": "workspace:^",

packages/electron/src/index.ts

@@ -1,14 +1,10 @@
-import { isBrowser, target } from '@vue/devtools-shared'
+import { target } from '@vue/devtools-shared'
 import { devtools } from '../../devtools-kit/src/index'
 
 export async function connect(host: string, port: number) {
   devtools.init()
   target.__VUE_DEVTOOLS_HOST__ = host
   target.__VUE_DEVTOOLS_PORT__ = port
-  if (isBrowser)
-    import('./user-app.js')
-
-  else
   // @ts-expect-error skip
-    import('./user-app.mjs')
+  import('./user-app.mjs')
 }