From fb1b261f89b4ef8bd56b6ccbbaa884432283f204 Mon Sep 17 00:00:00 2001
From: Arlo <webfansplz@gmail.com>
Date: Sat, 6 Jan 2024 16:09:47 +0800
Subject: [PATCH] fix(electron): use esm instead of iife to load script (#157)

---
 docs/guide/standalone.md       | 8 ++++----
 packages/electron/package.json | 3 ++-
 packages/electron/src/index.ts | 8 ++------
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/docs/guide/standalone.md b/docs/guide/standalone.md
index 0d0d160b..0c090768 100644
--- a/docs/guide/standalone.md
+++ b/docs/guide/standalone.md
@@ -101,10 +101,6 @@ 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
@@ -112,6 +108,10 @@ 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.
diff --git a/packages/electron/package.json b/packages/electron/package.json
index c016d5fc..c1573e76 100644
--- a/packages/electron/package.json
+++ b/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:^",
diff --git a/packages/electron/src/index.ts b/packages/electron/src/index.ts
index 08bce5ed..77296761 100644
--- a/packages/electron/src/index.ts
+++ b/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')
 }