feat(electron): work on node envioronments (#1780)

Co-authored-by: Guillaume Chau <[email protected]>

Author: posva

.eslintrc.js

@@ -54,6 +54,7 @@ module.exports = {
     '/packages/*/lib/',
     'dist/',
     'build/',
+    'build-node/',
     '/legacy',
   ],
   overrides: [

.gitignore

@@ -13,3 +13,4 @@ yarn-error.log
 
 /packages/*/lib
 .amo.env.json
+build-node

packages/app-backend-core/src/app.ts

@@ -5,7 +5,7 @@ import {
   BackendContext,
   DevtoolsBackend,
 } from '@vue-devtools/app-backend-api'
-import { BridgeEvents, SharedData } from '@vue-devtools/shared-utils'
+import { BridgeEvents, isBrowser, SharedData } from '@vue-devtools/shared-utils'
 import { App } from '@vue/devtools-api'
 import slug from 'speakingurl'
 import { JobQueue } from './util/queue'
@@ -72,7 +72,7 @@ async function createAppRecord (options: AppRecordOptions, backend: DevtoolsBack
       instanceMap: new Map(),
       rootInstance,
       perfGroupIds: new Map(),
-      iframe: document !== el.ownerDocument ? el.ownerDocument?.location?.pathname : null,
+      iframe: isBrowser && document !== el.ownerDocument ? el.ownerDocument?.location?.pathname : null,
       meta: options.meta ?? {},
     }
 

packages/app-backend-core/src/hook.ts

@@ -1,4 +1,5 @@
 // this script is injected into every page.
+import { isBrowser, target } from '@vue-devtools/shared-utils'
 
 /**
  * Install the hook on window, which is an event emitter.
@@ -36,6 +37,8 @@ export function installHook (target, isIframe = false) {
 
   let iframeChecks = 0
   function injectToIframes () {
+    if (!isBrowser) return
+
     const iframes = document.querySelectorAll<HTMLIFrameElement>('iframe:not([data-vue-devtools-ignore])')
     for (const iframe of iframes) {
       injectIframeHook(iframe)
@@ -549,7 +552,7 @@ export function installHook (target, isIframe = false) {
       }
 
       // DOM objects
-      if (object instanceof HTMLElement) {
+      if (typeof HTMLElement !== 'undefined' && object instanceof HTMLElement) {
         return object.cloneNode(false)
       }
 

packages/app-backend-core/src/index.ts

@@ -17,6 +17,8 @@ import {
   target,
   getPluginSettings,
   SharedData,
+  isBrowser,
+  raf,
 } from '@vue-devtools/shared-utils'
 import debounce from 'lodash/debounce'
 import throttle from 'lodash/throttle'
@@ -54,6 +56,8 @@ export async function initBackend (bridge: Bridge) {
     persist: false,
   })
 
+  SharedData.isBrowser = isBrowser
+
   initOnPageConfig()
 
   if (!connected) {
@@ -180,7 +184,7 @@ async function connect () {
           for (let i = 0; i < parentInstances.length; i++) {
             const parentId = await getComponentId(app, parentUid, parentInstances[i], ctx)
             if (i < 2 && isSubscribed(BridgeSubscriptions.COMPONENT_TREE, sub => sub.payload.instanceId === parentId)) {
-              requestAnimationFrame(() => {
+              raf(() => {
                 sendComponentTreeData(appRecord, parentId, appRecord.componentFilter, null, ctx)
               })
             }
@@ -221,7 +225,7 @@ async function connect () {
         if (parentInstances.length) {
           const parentId = await getComponentId(app, parentUid, parentInstances[0], ctx)
           if (isSubscribed(BridgeSubscriptions.COMPONENT_TREE, sub => sub.payload.instanceId === parentId)) {
-            requestAnimationFrame(async () => {
+            raf(async () => {
               try {
                 sendComponentTreeData(await getAppRecord(app, ctx), parentId, appRecord.componentFilter, null, ctx)
               } catch (e) {
@@ -449,13 +453,14 @@ function connectBridge () {
       const [el] = await ctx.currentAppRecord.backend.api.getComponentRootElements(instance)
       if (el) {
         // @ts-ignore
-        window.__VUE_DEVTOOLS_INSPECT_TARGET__ = el
+        target.__VUE_DEVTOOLS_INSPECT_TARGET__ = el
         ctx.bridge.send(BridgeEvents.TO_FRONT_COMPONENT_INSPECT_DOM, null)
       }
     }
   })
 
   ctx.bridge.on(BridgeEvents.TO_BACK_COMPONENT_SCROLL_TO, async ({ instanceId }) => {
+    if (!isBrowser) return
     const instance = getComponentInstance(ctx.currentAppRecord, instanceId, ctx)
     if (instance) {
       const [el] = await ctx.currentAppRecord.backend.api.getComponentRootElements(instance)
@@ -494,6 +499,7 @@ function connectBridge () {
   })
 
   ctx.bridge.on(BridgeEvents.TO_BACK_COMPONENT_RENDER_CODE, async ({ instanceId }) => {
+    if (!isBrowser) return
     const instance = getComponentInstance(ctx.currentAppRecord, instanceId, ctx)
     if (instance) {
       const { code } = await ctx.currentAppRecord.backend.api.getComponentRenderCode(instance)

packages/app-backend-core/src/perf.ts

@@ -1,6 +1,6 @@
 import { BackendContext, DevtoolsBackend } from '@vue-devtools/app-backend-api'
 import { App, ComponentInstance } from '@vue/devtools-api'
-import { BridgeSubscriptions, SharedData } from '@vue-devtools/shared-utils'
+import { BridgeSubscriptions, raf, SharedData } from '@vue-devtools/shared-utils'
 import { addTimelineEvent } from './timeline'
 import { getAppRecord } from './app'
 import { getComponentId, sendComponentTreeData } from './component'
@@ -144,7 +144,7 @@ export async function performanceMarkEnd (
         // Update component tree
         const id = await getComponentId(app, uid, instance, ctx)
         if (isSubscribed(BridgeSubscriptions.COMPONENT_TREE, sub => sub.payload.instanceId === id)) {
-          requestAnimationFrame(() => {
+          raf(() => {
             sendComponentTreeData(appRecord, id, ctx.currentAppRecord.componentFilter, null, ctx)
           })
         }

packages/app-backend-core/src/timeline.ts

@@ -1,5 +1,5 @@
 import { BackendContext, AppRecord } from '@vue-devtools/app-backend-api'
-import { BridgeEvents, HookEvents, stringify, SharedData } from '@vue-devtools/shared-utils'
+import { BridgeEvents, HookEvents, stringify, SharedData, isBrowser } from '@vue-devtools/shared-utils'
 import { App, ID, TimelineEventOptions, WithId, now, isPerformanceSupported } from '@vue/devtools-api'
 import { hook } from './global-hook'
 import { getAppRecord, getAppRecordId } from './app'
@@ -21,50 +21,52 @@ export function addBuiltinLayers (appRecord: AppRecord, ctx: BackendContext) {
 }
 
 function setupBuiltinLayers (ctx: BackendContext) {
-  ['mousedown', 'mouseup', 'click', 'dblclick'].forEach(eventType => {
-    // @ts-ignore
-    window.addEventListener(eventType, async (event: MouseEvent) => {
-      await addTimelineEvent({
-        layerId: 'mouse',
-        event: {
-          time: now(),
-          data: {
-            type: eventType,
-            x: event.clientX,
-            y: event.clientY,
+  if (isBrowser) {
+    ['mousedown', 'mouseup', 'click', 'dblclick'].forEach(eventType => {
+      // @ts-ignore
+      window.addEventListener(eventType, async (event: MouseEvent) => {
+        await addTimelineEvent({
+          layerId: 'mouse',
+          event: {
+            time: now(),
+            data: {
+              type: eventType,
+              x: event.clientX,
+              y: event.clientY,
+            },
+            title: eventType,
           },
-          title: eventType,
-        },
-      }, null, ctx)
-    }, {
-      capture: true,
-      passive: true,
+        }, null, ctx)
+      }, {
+        capture: true,
+        passive: true,
+      })
     })
-  })
 
-  ;['keyup', 'keydown', 'keypress'].forEach(eventType => {
-    // @ts-ignore
-    window.addEventListener(eventType, async (event: KeyboardEvent) => {
-      await addTimelineEvent({
-        layerId: 'keyboard',
-        event: {
-          time: now(),
-          data: {
-            type: eventType,
-            key: event.key,
-            ctrlKey: event.ctrlKey,
-            shiftKey: event.shiftKey,
-            altKey: event.altKey,
-            metaKey: event.metaKey,
+    ;['keyup', 'keydown', 'keypress'].forEach(eventType => {
+      // @ts-ignore
+      window.addEventListener(eventType, async (event: KeyboardEvent) => {
+        await addTimelineEvent({
+          layerId: 'keyboard',
+          event: {
+            time: now(),
+            data: {
+              type: eventType,
+              key: event.key,
+              ctrlKey: event.ctrlKey,
+              shiftKey: event.shiftKey,
+              altKey: event.altKey,
+              metaKey: event.metaKey,
+            },
+            title: event.key,
           },
-          title: event.key,
-        },
-      }, null, ctx)
-    }, {
-      capture: true,
-      passive: true,
+        }, null, ctx)
+      }, {
+        capture: true,
+        passive: true,
+      })
     })
-  })
+  }
 
   hook.on(HookEvents.COMPONENT_EMIT, async (app, instance, event, params) => {
     try {

packages/app-frontend/src/util/keyboard.ts

@@ -4,7 +4,7 @@ type KeyboardHandler = (event: KeyboardEvent) => boolean | void | Promise<boolea
 
 function handleKeyboard (type: 'keyup' | 'keydown', cb: KeyboardHandler) {
   function handler (event: KeyboardEvent) {
-    if (event.target instanceof HTMLElement && (
+    if (typeof HTMLElement !== 'undefined' && event.target instanceof HTMLElement && (
       event.target.tagName === 'INPUT' ||
       event.target.tagName === 'TEXTAREA'
     )) {

packages/shared-utils/src/bridge.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from 'events'
+import { raf } from './raf'
 
 const BATCH_DURATION = 100
 
@@ -118,6 +119,6 @@ export class Bridge extends EventEmitter {
       }
     }
     this._sending = false
-    requestAnimationFrame(() => this._nextSend())
+    raf(() => this._nextSend())
   }
 }

packages/shared-utils/src/index.ts

@@ -10,3 +10,4 @@ export * from './shell'
 export * from './storage'
 export * from './transfer'
 export * from './util'
+export * from './raf'

packages/shared-utils/src/raf.ts

@@ -0,0 +1,21 @@
+
+let pendingCallbacks: Array<(time: number) => void> = []
+
+/**
+ * requestAnimationFrame that also works on non-browser environments like Node.
+ */
+export const raf = typeof requestAnimationFrame === 'function'
+  ? requestAnimationFrame
+  : (fn: (time: number) => void) => {
+      if (!pendingCallbacks.length) {
+        setImmediate(() => {
+          const now = performance.now()
+          const cbs = pendingCallbacks
+          // in case cbs add new callbacks
+          pendingCallbacks = []
+          cbs.forEach(cb => cb(now))
+        })
+      }
+
+      pendingCallbacks.push(fn)
+    }

packages/shared-utils/src/shared-data.ts

@@ -1,6 +1,6 @@
 import { setStorage, getStorage } from './storage'
 import { Bridge } from './bridge'
-import { isMac } from './env'
+import { isBrowser, isMac } from './env'
 
 // Initial state
 const internalSharedData = {
@@ -31,6 +31,7 @@ const internalSharedData = {
   trackUpdates: true,
   flashUpdates: false,
   debugInfo: false,
+  isBrowser,
 }
 
 type TSharedData = typeof internalSharedData

packages/shared-utils/src/util.ts

@@ -233,7 +233,7 @@ function replacer (key) {
       return encodeCache.cache(val, () => getCustomComponentDefinitionDetails(val))
     } else if (val.constructor && val.constructor.name === 'VNode') {
       return `[native VNode <${val.tag}>]`
-    } else if (val instanceof HTMLElement) {
+    } else if (typeof HTMLElement !== 'undefined' && val instanceof HTMLElement) {
       return encodeCache.cache(val, () => getCustomHTMLElementDetails(val))
     }
     const customDetails = getCustomObjectDetails(val, proto)
@@ -474,7 +474,7 @@ export function revive (val) {
     return Symbol.for(string)
   } else if (specialTypeRE.test(val)) {
     const [, type, string,, details] = specialTypeRE.exec(val)
-    const result = new window[type](string)
+    const result = new target[type](string)
     if (type === 'Error' && details) {
       result.stack = details
     }

packages/shell-electron/index.js

@@ -1,4 +1,10 @@
-require('./build/hook.js')
+const isBrowser = typeof window !== 'undefined'
+
+if (isBrowser) {
+  require('./build/hook.js')
+} else {
+  require('./build-node/hook.js')
+}
 
 const target = typeof window !== 'undefined'
   ? window
@@ -14,7 +20,11 @@ module.exports = {
     if (showToast) target.__VUE_DEVTOOLS_TOAST__ = showToast
     if (app) target.__VUE_ROOT_INSTANCES__ = Array.isArray(app) ? app : [app]
 
-    require('./build/backend.js')
+    if (isBrowser) {
+      require('./build/backend.js')
+    } else {
+      require('./build-node/backend.js')
+    }
   },
   init: (Vue) => {
     const tools = target.__VUE_DEVTOOLS_GLOBAL_HOOK__

packages/shell-electron/package.json

@@ -14,9 +14,11 @@
   "types": "types/index.d.ts",
   "scripts": {
     "start": "node bin.js",
-    "dev": "webpack --watch",
-    "build": "rm -rf ./build && cross-env NODE_ENV=production webpack",
-    "prepublishOnly": "npm run build"
+    "dev:client": "webpack --watch",
+    "dev:node": "webpack --watch --config webpack.node.config.js",
+    "build": "npm run build:client && npm run build:node",
+    "build:client": "rm -rf ./build && cross-env NODE_ENV=production webpack",
+    "build:node": "rm -rf ./build-node && cross-env NODE_ENV=production webpack --config webpack.node.config.js"
   },
   "author": "",
   "license": "MIT",
@@ -28,7 +30,9 @@
     "electron": "^12.0.6",
     "express": "^4.17.1",
     "ip": "^1.1.5",
-    "socket.io": "^2.0.4"
+    "socket.io": "^4.4.0",
+    "socket.io-client": "^4.4.1",
+    "utf-8-validate": "^5.0.9"
   },
   "devDependencies": {
     "@vue-devtools/app-backend-core": "^0.0.0",
@@ -38,4 +42,4 @@
     "webpack": "^5.35.1",
     "webpack-cli": "^4.6.0"
   }
-}
+}

packages/shell-electron/server.js

@@ -1,11 +1,14 @@
-const app = require('express')()
-const http = require('http').Server(app)
-const io = require('socket.io')(http)
 const path = require('path')
 const fs = require('fs')
+const app = require('express')()
+const { createServer } = require('http')
+const { Server } = require('socket.io')
 
 const port = process.env.PORT || 8098
 
+const httpServer = createServer(app)
+const io = new Server(httpServer, {})
+
 app.get('/', function (req, res) {
   const hookContent = fs.readFileSync(path.join(__dirname, '/build/hook.js'), 'utf8')
   const backendContent = fs.readFileSync(path.join(__dirname, '/build/backend.js'), 'utf8')
@@ -32,7 +35,7 @@ io.on('connection', function (socket) {
   })
 })
 
-http.listen(port, '0.0.0.0', () => {
+httpServer.listen(port, '0.0.0.0', () => {
   // eslint-disable-next-line no-console
   console.log('listening on 0.0.0.0:' + port)
 })