add backend

christian-bromann · christian-bromann · commit ab296c3d2a48 · 2023-11-14T18:00:33.000-08:00
diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
     "eslint": "^8.52.0",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-unicorn": "^48.0.1",
+    "npm-run-all": "^4.1.5",
     "postcss": "^8.4.31",
     "postcss-lit": "^1.1.0",
     "tailwindcss": "^3.3.3",
diff --git a/packages/app/package.json b/packages/app/package.json
@@ -1,8 +1,9 @@
 {
-  "name": "@devtools/app",
+  "name": "@wdio/devtools-app",
   "version": "0.0.0",
   "description": "Browser devtools extension for debugging WebdriverIO tests.",
   "type": "module",
+  "exports": "./src/index.ts",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -13,7 +14,7 @@
     "@codemirror/lang-javascript": "^6.2.1",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.22.0",
-    "@devtools/hook": "workspace:^",
+    "@wdio/devtools-hook": "workspace:^",
     "@iconify-json/mdi": "^1.1.54",
     "@lit/context": "^1.0.1",
     "codemirror": "^6.0.1",
diff --git a/packages/app/src/app.ts b/packages/app/src/app.ts
@@ -1,7 +1,7 @@
 import { css, html, nothing } from 'lit'
 import { provide } from '@lit/context'
 import { customElement, query, property } from 'lit/decorators.js'
-import { type TraceLog } from '@devtools/hook/types'
+import { type TraceLog } from '@wdio/devtools-hook/types'
 
 import { Element } from '@core/element'
 import { context } from './context.js'
diff --git a/packages/app/src/components/onboarding/start.ts b/packages/app/src/components/onboarding/start.ts
@@ -1,7 +1,7 @@
 import { Element } from '@core/element'
 import { html, css } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
-import type { TraceLog } from '@devtools/hook/types'
+import type { TraceLog } from '@wdio/devtools-hook/types'
 
 const CONFIG_CODE_EXAMPLE = `export const config = {
   // ...
diff --git a/packages/app/src/components/workbench/actions.ts b/packages/app/src/components/workbench/actions.ts
@@ -2,7 +2,7 @@ import { Element } from '@core/element'
 import { html, css, nothing } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import { consume } from '@lit/context'
-import type { CommandLog } from '@devtools/hook/types'
+import type { CommandLog } from '@wdio/devtools-hook/types'
 
 import { context, type TraceLog } from '../../context.js'
 
diff --git a/packages/app/src/components/workbench/metadata.ts b/packages/app/src/components/workbench/metadata.ts
@@ -25,11 +25,11 @@ export class DevtoolsMetadata extends Element {
   `]
 
   render() {
-    const { id, url } = this.data.metadata
+    const { url } = this.data.metadata
     return html`
       <wdio-devtools-list
         label="Metadata"
-        list="${JSON.stringify({ id, url })}"></wdio-devtools-list>
+        list="${JSON.stringify({ url })}"></wdio-devtools-list>
       <wdio-devtools-list
         label="Capabilities"
         list="${JSON.stringify(this.data.metadata.capabilities)}"></wdio-devtools-list>
diff --git a/packages/app/src/context.ts b/packages/app/src/context.ts
@@ -1,5 +1,5 @@
 import { createContext } from '@lit/context'
-import { type TraceLog } from '@devtools/hook/types'
+import { type TraceLog } from '@wdio/devtools-hook/types'
 
 const contextKey = Symbol('contextKey')
 export const context = createContext<TraceLog>(contextKey)
diff --git a/packages/backend/README.md b/packages/backend/README.md
@@ -0,0 +1,3 @@
+# WebdriverIO DevTools Backend
+
+
diff --git a/packages/backend/package.json b/packages/backend/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@wdio/devtools-backend",
+  "version": "0.0.0",
+  "description": "Backend service to spin up WebdriverIO Devtools",
+  "author": "Christian Bromann <mail@bromann.dev>",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "types": "./dist/index.d.ts",
+  "typeScriptVersion": "^5.0.0",
+  "scripts": {
+    "dev": "run-p dev:*",
+    "dev:ts": "tsc --watch",
+    "dev:app": "nodemon --watch ./dist ./dist/index.js",
+    "build": "tsc -p ./tsconfig.json",
+    "test": "eslint ."
+  },
+  "dependencies": {
+    "@fastify/static": "^6.12.0",
+    "@wdio/devtools-app": "workspace:^",
+    "fastify": "^4.24.3",
+    "get-port": "^7.0.0",
+    "import-meta-resolve": "^4.0.0"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.1"
+  }
+}
diff --git a/packages/backend/src/constants.ts b/packages/backend/src/constants.ts
@@ -0,0 +1 @@
+export const DEFAULT_PORT = 3000
diff --git a/packages/backend/src/index.ts b/packages/backend/src/index.ts
@@ -0,0 +1,48 @@
+import url from 'node:url'
+
+import Fastify, { type FastifyInstance } from 'fastify'
+import staticServer from '@fastify/static'
+import getPort from 'get-port'
+
+import { getDevtoolsApp } from './utils.js'
+import { DEFAULT_PORT } from './constants.js'
+
+let server: FastifyInstance | undefined
+
+interface DevtoolsBackendOptions {
+  port?: number
+}
+
+export async function start (opts: DevtoolsBackendOptions = {}) {
+  const port = opts.port || await getPort({ port: DEFAULT_PORT })
+  const appPath = await getDevtoolsApp()
+
+  server = Fastify({ logger: true })
+  server.register(staticServer, {
+    root: appPath
+  })
+
+  // Run the server!
+  try {
+    await server.listen({ port })
+    console.log(`WebdriverIO Devtools started on port ${port}`)
+  } catch (err) {
+    server.log.error(err)
+    process.exit(1)
+  }
+}
+
+export async function stop () {
+  if (!server) {
+    return
+  }
+
+  await server.close()
+}
+
+if (import.meta.url.startsWith('file:')) {
+  const modulePath = url.fileURLToPath(import.meta.url)
+  if (process.argv[1] === modulePath) {
+    start()
+  }
+}
diff --git a/packages/backend/src/utils.ts b/packages/backend/src/utils.ts
@@ -0,0 +1,12 @@
+import url from 'node:url'
+import path from 'node:path'
+import { resolve } from 'import-meta-resolve'
+
+export async function getDevtoolsApp () {
+  try {
+    const appPkg = await resolve('@wdio/devtools-app', import.meta.url)
+    return path.resolve(url.fileURLToPath(appPkg), '..', '..', 'dist')
+  } catch (err) {
+    throw new Error('Couldn\'t find @wdio/devtools-app package, do you have it installed?')
+  }
+}
diff --git a/packages/backend/tsconfig.json b/packages/backend/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "outDir": "dist",
+    "rootDir": "src",
+    "noEmit": false,
+    "allowImportingTsExtensions": false
+  },
+  "include": ["src/**/*"]
+}
diff --git a/packages/hook/README.md b/packages/hook/README.md
@@ -16,7 +16,7 @@ When initiating a standalone WebdriverIO session, just wrap the `remote` call wi
 
 ```ts
 import { remote } from 'webdriverio'
-import { setupForDevtools } from '@devtools/hook'
+import { setupForDevtools } from '@wdio/devtools-hook'
 
 const browser = await remote(setupForDevtools({
     capabilities: {
diff --git a/packages/hook/package.json b/packages/hook/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@devtools/hook",
+  "name": "@wdio/devtools-hook",
   "version": "0.0.0",
   "description": "Hook up WebdriverIO with DevTools",
   "author": "Christian Bromann <mail@bromann.dev>",
@@ -21,7 +21,7 @@
     "test": "eslint ."
   },
   "dependencies": {
-    "@devtools/script": "workspace:^",
+    "@wdio/devtools-script": "workspace:^",
     "@wdio/types": "^8.21.0",
     "import-meta-resolve": "^4.0.0"
   },
diff --git a/packages/hook/src/session.ts b/packages/hook/src/session.ts
@@ -88,7 +88,7 @@ export class SessionCapturer {
     }
 
     this.#isInjected = true
-    const script = await resolve('@devtools/script', import.meta.url)
+    const script = await resolve('@wdio/devtools-script', import.meta.url)
     const source = (await fs.readFile(url.fileURLToPath(script))).toString()
     const functionDeclaration = `async () => { ${source} }`
 
diff --git a/packages/script/package.json b/packages/script/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@devtools/script",
+  "name": "@wdio/devtools-script",
   "version": "0.0.0",
   "description": "Script to be injected into a page to trace the page",
   "author": "Christian Bromann <mail@bromann.dev>",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# WebdriverIO DevTools Backend`
	`2`	`+`
	`3`	`+`