work towards using bidi and electron side by side

Author: toddtarsi

packages/selenium-ide/package.json

@@ -99,8 +99,8 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.8",
-    "@mui/icons-material": "^5.14.9",
-    "@mui/material": "^5.14.10",
+    "@mui/icons-material": "^5.15.0",
+    "@mui/material": "^5.15.0",
     "@seleniumhq/code-export-csharp-nunit": "^4.0.0-alpha.1",
     "@seleniumhq/code-export-csharp-xunit": "^4.0.0-alpha.1",
     "@seleniumhq/code-export-java-junit": "^4.0.0-alpha.1",

packages/selenium-ide/src/browser/api/driver.ts renamed to packages/selenium-ide/src/browser/api/bidi.ts

@@ -11,6 +11,7 @@ const api: Api = processApi((path: string) => {
   return Handler()(path)
 })
 
+export { BrowserApiMutators } from './mutator'
 export { Api } from '@seleniumhq/side-api'
 
 export default api

packages/selenium-ide/src/browser/api/classes/DriverEventListener.ts

@@ -1,5 +1,4 @@
 import { BaseListener, VariadicArgs } from '@seleniumhq/side-api'
-import { sendMessage } from './DriverUtils'
 
 type DriverEventShape<PARAMS> = {
   path: string
@@ -13,12 +12,12 @@ const baseListener = <ARGS extends VariadicArgs>(
   return {
     addListener(listener) {
       console.debug(path, 'listener added')
-      sendMessage(`${path}.addListener`)
       listeners.push(listener)
     },
     dispatchEvent(...args) {
       console.debug(path, 'dispatching event')
-      listeners.forEach((fn) => fn(...args))
+      const results = listeners.map((fn) => fn(...args))
+      return results;
     },
     hasListener(listener) {
       return listeners.includes(listener)
@@ -29,7 +28,6 @@ const baseListener = <ARGS extends VariadicArgs>(
       if (index === -1) {
         throw new Error(`Unable to remove listener for ${path} ${listener}`)
       }
-      sendMessage(`${path}.removeListener`)
       console.debug(path, 'listener removed')
       listeners.splice(index, 1)
     },

packages/selenium-ide/src/browser/api/classes/DriverHandler.ts

@@ -5,6 +5,8 @@ import {
 } from '@seleniumhq/side-api'
 import { sendMessage } from './DriverUtils'
 
+export const resolversByID: Record<string, (...args: any[]) => void> = {}
+
 const doAPI = async <HANDLER extends ApiPromiseHandler>(
   path: string,
   ...args: Parameters<HANDLER>
@@ -18,7 +20,8 @@ const doAPI = async <HANDLER extends ApiPromiseHandler>(
       }
     }
     console.debug('Emitting to server', path, 'with args', args)
-    sendMessage({ path, args })
+    const id = sendMessage({ path, args })
+    resolversByID[id] = resolve
   })
 
 const Handler =
@@ -28,6 +31,7 @@ const Handler =
       ...args: Parameters<HANDLER>
     ): Promise<ThenArg<ReturnType<HANDLER>>> => {
       console.debug(path, 'api called', ...(args as any))
+      console.info('SELENIUM_IDE_COMMAND:', path, ...(args as any))
       const result = await doAPI<HANDLER>(path, ...args)
       console.debug(path, 'api complete', result)
       return result

packages/selenium-ide/src/browser/api/classes/DriverUtils.ts

@@ -1,5 +1,13 @@
 export const UniqueIdentifier = '!!!SELENIUM_IDE_IDENTIFIER_HERE!!!'
 
-export const sendMessage = (message: any) => {
-  console.log(UniqueIdentifier + JSON.stringify(message))
+type Message = {
+  path: string
+  args: any[]
+}
+
+let id = 0
+export const sendMessage = (message: Message) => {
+  const nextID = id++
+  console.log(UniqueIdentifier + JSON.stringify({ ...message, id: nextID }))
+  return nextID
 }

packages/selenium-ide/src/browser/api/index.ts

@@ -1,7 +1,7 @@
 import type { Api } from '@seleniumhq/side-api'
 import { processApi } from '@seleniumhq/side-api'
-import EventListener from './classes/DriverEventListener'
-import Handler from './classes/DriverHandler'
+import EventListener from './classes/EventListener'
+import Handler from './classes/Handler'
 
 const api: Api = processApi((path: string) => {
   const trailingSegment: string = path.split('.').pop() as string

packages/selenium-ide/src/browser/helpers/preload-bidi.ts

@@ -0,0 +1,4 @@
+import preload from './preload'
+import api from 'browser/api/bidi'
+
+export default preload(api)

packages/selenium-ide/src/browser/helpers/preload-electron.ts

@@ -0,0 +1,15 @@
+import api from 'browser/api'
+import { contextBridge } from 'electron'
+import preload from './preload'
+
+export default preload(api, () => {
+  /**
+   * Binds our API on initialization
+   */
+  process.once('loaded', async () => {
+    /**
+     * Expose it in the main context
+     */
+    contextBridge.exposeInMainWorld('sideAPI', window.sideAPI)
+  })
+})

packages/selenium-ide/src/browser/helpers/preload.ts

@@ -15,34 +15,25 @@
 // specific language governing permissions and limitations
 // under the License.
 import type { Api } from '@seleniumhq/side-api'
-import api, { BrowserApiMutators } from 'browser/api'
+import { BrowserApiMutators } from 'browser/api'
 import mutators from 'browser/api/mutator'
-import { contextBridge } from 'electron'
+import { noop } from 'lodash/fp'
 
 export type NestedPartial<API> = {
   [K in keyof API]?: API[K] extends Record<string, unknown>
     ? NestedPartial<API[K]>
     : API[K]
 }
 
-export default (
-  apiSubset: NestedPartial<Api> & { mutators: NestedPartial<BrowserApiMutators> } = {
-    ...api,
-    mutators,
-  },
-  isElectron: boolean = true
-) => {
-  window.sideAPI = apiSubset as Api & { mutators: BrowserApiMutators }
-
-  /**
-   * Binds our API on initialization
-   */
-  process.once('loaded', async () => {
-    /**
-     * Expose it in the main context
-     */
-    if (isElectron) {
-      contextBridge.exposeInMainWorld('sideAPI', window.sideAPI)
-    }
-  })
-}
+export default (api: Api, cb = noop) =>
+  (
+    apiSubset: NestedPartial<Api> & {
+      mutators: NestedPartial<BrowserApiMutators>
+    } = {
+      ...api,
+      mutators,
+    },
+  ) => {
+    window.sideAPI = apiSubset as Api & { mutators: BrowserApiMutators }
+    cb()
+  }

packages/selenium-ide/src/browser/helpers/renderWhenReady.ts

@@ -1,9 +1,10 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import {createRoot} from 'react-dom/client'
 
 export default (Component: React.FC | React.ComponentClass) => {
   document.addEventListener('DOMContentLoaded', () => {
     const domContainer = document.querySelector('#root')
-    ReactDOM.render(React.createElement(Component), domContainer)
+    const root = createRoot(domContainer!)
+    root.render(React.createElement(Component))
   });
 }