chore: enhance

vuejs · Dec 18, 2023 · 6b33d71 · 6b33d71
1 parent bb9407b
commit 6b33d71
Show file tree

Hide file tree

Showing 13 changed files with 76 additions and 19 deletions.
diff --git a/packages/client/src/components/WaitForConnection.vue b/packages/client/src/components/WaitForConnection.vue
@@ -1,5 +1,21 @@
 <script setup lang="ts">
+import { VueInput } from '@vue-devtools-next/ui'
 import AppConnecting from '~/components/AppConnecting.vue'
+
+const props = defineProps<{
+  local?: string
+  network?: string
+}>()
+
+function scriptWrapper(str: string) {
+  return `\<script src="${str}"\>\</script\>`
+}
+
+const _local = scriptWrapper(props.local!)
+const _network = scriptWrapper(props.network!)
+
+const local = ref(_local)
+const network = ref(_network)
 </script>
 
 <template>
@@ -8,6 +24,17 @@ import AppConnecting from '~/components/AppConnecting.vue'
       <p class="pt-5 font-bold text-base">
         Waiting for connection...
       </p>
+      <div v-if="props.local && props.network" class="mt-5">
+        <p class="text-center text-sm op80 text-base">
+          Add one of the following to the top of your page 👇:
+        </p>
+        <div class="mt-3 $ui-fcc flex-row">
+          <VueInput v-model="local" left-icon="i-carbon-copy" class="w-400px!" />
+        </div>
+        <div class="mt-3 $ui-fcc flex-row">
+          <VueInput v-model="network" left-icon="i-carbon-copy" class="w-400px!" />
+        </div>
+      </div>
     </AppConnecting>
   </div>
 </template>

diff --git a/packages/client/src/composables/state-tab.ts b/packages/client/src/composables/state-tab.ts
@@ -1,6 +1,8 @@
 import { useDevToolsBridgeRpc, useDevToolsState } from '@vue-devtools-next/core'
 import type { MaybeRef } from 'vue'
 import type { CustomTab } from '@vue-devtools-next/kit'
+import { isInElectron } from '@vue-devtools-next/shared'
+
 import type { ModuleBuiltinTab } from '~/types/tab'
 
 export interface TabSettings {
@@ -31,7 +33,9 @@ export function useAllTabs() {
       if (currentTab) {
         if (currentTab[1].some(t => t.name === tab.name))
           return
-        if (!vitePluginDetected && viteOnlyTabs.includes(tab.name))
+
+        // @TODO: electron app support vite only tabs
+        if ((!vitePluginDetected || isInElectron) && viteOnlyTabs.includes(tab.name))
           return
 
         currentTab[1].push({

diff --git a/packages/client/src/constants/tab.ts b/packages/client/src/constants/tab.ts
@@ -1,5 +1,5 @@
 import type { DevtoolsBridgeAppRecord } from '@vue-devtools-next/core'
-import { deepClone } from '@vue-devtools-next/shared'
+import { deepClone, isInElectron } from '@vue-devtools-next/shared'
 import type { ModuleBuiltinTab } from '~/types'
 
 // @unocss-include
@@ -93,7 +93,9 @@ export function getBuiltinTab(viteDetected: boolean, moduleDetectives?: Devtools
     if (item[0] === 'modules')
       item[1] = item[1].filter(t => moduleDetectives ? isDetected(moduleDetectives, t) : true)
   })
-  return viteDetected
+
+  // @TODO: electron app support vite only tabs
+  return (viteDetected && !isInElectron)
     ? tab
     : tab.map(([_, tabs]) => [_, tabs.filter(t => !viteOnlyTabs.includes(t.name))])
 }
diff --git a/packages/client/src/main.ts b/packages/client/src/main.ts
@@ -105,8 +105,10 @@ export async function initDevTools(shell, options: { viewMode?: 'overlay' | 'pan
   })
 }
 
-export function createConnectionApp(container: string = '#app') {
-  const app = createApp(WaitForConnection)
+export function createConnectionApp(container: string = '#app', props?: Record<string, string>) {
+  const app = createApp(WaitForConnection, {
+    ...props,
+  })
   app.mount(container)
   return app
 }

diff --git a/packages/electron/app.html b/packages/electron/app.html
@@ -11,6 +11,14 @@
         display: flex;
         height: 100%;
       }
+      .loading {
+        width: 100vw;
+        height: 100vh;
+        font-weight: bold;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
     </style>
     <link rel="stylesheet" type="text/css" href="./client/devtools-panel.css" />
     <script>
@@ -19,7 +27,9 @@
   </head>
   <body>
     <div id="container">
-      <div id="app"></div>
+      <div id="app">
+        <p class="loading">Loading DevTools Client...</p>
+      </div>
     </div>
     <script src="./dist/devtools.js"></script>
   </body>

diff --git a/packages/electron/package.json b/packages/electron/package.json
@@ -34,6 +34,7 @@
     "electron": "^28.0.0",
     "execa": "^8.0.1",
     "h3": "^1.9.0",
+    "ip": "^1.1.8",
     "socket.io": "^4.7.2",
     "socket.io-client": "^4.7.2"
   },

diff --git a/packages/electron/src/app.ts b/packages/electron/src/app.ts
@@ -15,7 +15,8 @@ function createWindow() {
       webSecurity: false,
       nodeIntegration: true,
       contextIsolation: false,
-      devTools: true,
+      // @TODO: enabled in dev mode
+      devTools: false,
     },
   })
   const appEntryPath = path.join(__dirname, '../app.html')

diff --git a/packages/electron/src/devtools.ts b/packages/electron/src/devtools.ts
@@ -1,13 +1,19 @@
 import io from 'socket.io-client/dist/socket.io.js'
+import ip from 'ip'
 import { createConnectionApp, initDevTools } from '../client/devtools-panel'
 import { Bridge } from '../../core/src/bridge'
 
 const port = window.process.env.PORT || 8098
 
 function init() {
-  const socket = io(`http://localhost:${port}`)
+  const localhost = `http://localhost:${port}`
+  const socket = io(localhost)
   let reload: Function | null = null
-  const app = createConnectionApp()
+
+  const app = createConnectionApp('#app', {
+    local: localhost,
+    network: `http://${ip.address()}:${port}`,
+  })
 
   socket.on('vue-devtools:init', () => {
     app.unmount()

diff --git a/packages/electron/src/server.ts b/packages/electron/src/server.ts
@@ -11,7 +11,8 @@ export function init() {
     '/',
     eventHandler(() => {
       const userAppContent = fs.readFileSync(path.join(__dirname, './user-app.js'), 'utf-8')
-      return userAppContent
+      const processSyntaxPolyfill = `if(!window.process){window.process={env:{}}};`
+      return processSyntaxPolyfill + userAppContent
     }),
   )
 

diff --git a/packages/electron/src/user-app.ts b/packages/electron/src/user-app.ts
@@ -4,13 +4,6 @@ import { Bridge } from '../../core/src/bridge'
 import { prepareInjection } from '../../core/src/injection'
 import { devtools } from '../../devtools-kit/src/index'
 
-if (!window.process) {
-// @ts-expect-error expected type
-  window.process = {
-    env: {},
-  }
-}
-
 const createSocket = io
 const host = target.__VUE_DEVTOOLS_HOST__ || 'http://localhost'
 const port = target.__VUE_DEVTOOLS_PORT__ !== undefined ? target.__VUE_DEVTOOLS_PORT__ : 8098

diff --git a/packages/playground/index.html b/packages/playground/index.html
@@ -5,7 +5,10 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vue DevTools Playground</title>
-    <!-- <script src="http://localhost:8098"></script> -->
+    <!-- <script>
+      window.__VUE_DEVTOOLS_PORT__ = 8080
+    </script>
+    <script src="http://localhost:8080"></script> -->
   </head>
   <body>
     <div id="app2"></div>

diff --git a/packages/playground/src/main.ts b/packages/playground/src/main.ts
@@ -12,7 +12,7 @@ import Hey from './pages/Hey.vue'
 import './style.css'
 
 // connect to remote devtools
-// devtools.connect('http://localhost', 8098)
+// devtools.connect('http://localhost', 8080)
 
 const pinia = createPinia()
 const pinia2 = createPinia()

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml