implement better data management

Author: christian-bromann

packages/app/package.json

@@ -26,6 +26,7 @@
   "author": "Christian Bromann <[email protected]>",
   "license": "MIT",
   "devDependencies": {
-    "@wdio/devtools-service": "workspace:^"
+    "@wdio/devtools-service": "workspace:^",
+    "@wdio/reporter": "^8.23.0"
   }
 }

packages/app/src/app.ts

@@ -1,10 +1,9 @@
 import { css, html, nothing } from 'lit'
-import { provide } from '@lit/context'
-import { customElement, query, property } from 'lit/decorators.js'
-import { type TraceLog } from '@wdio/devtools-service/types'
+import { customElement, query } from 'lit/decorators.js'
+import { TraceType, type TraceLog } from '@wdio/devtools-service/types'
 
 import { Element } from '@core/element'
-import { context, cacheTraceData } from './context.js'
+import { DataManagerController } from './controller/DataManager.js'
 import { DragController, Direction } from './utils/DragController.js'
 
 import './components/header.js'
@@ -16,9 +15,7 @@ const SIDEBAR_MIN_WIDTH = 200
 
 @customElement('wdio-devtools')
 export class WebdriverIODevtoolsApplication extends Element {
-  @provide({ context })
-  @property({ type: Object })
-  data: Partial<TraceLog> = {}
+  dataManager = new DataManagerController(this)
 
   static styles = [...Element.styles, css`
     :host {
@@ -59,21 +56,20 @@ export class WebdriverIODevtoolsApplication extends Element {
   }
 
   #loadTrace ({ detail }: { detail: TraceLog }) {
-    this.data = detail
-    cacheTraceData(detail)
+    this.dataManager.loadTraceFile(detail)
     this.requestUpdate()
   }
 
   #mainContent () {
-    if (!this.data) {
+    if (!this.dataManager.hasConnection) {
       return html`<wdio-devtools-start></wdio-devtools-start>`
     }
 
     return html`
       <section class="flex h-[calc(100%-40px)] w-full relative">
         ${
           // only render sidebar if trace file is captured using testrunner
-          this.data?.suites
+          this.dataManager.traceType === TraceType.Testrunner
             ? html`<wdio-devtools-sidebar style="${this.#drag.getPosition()}"></wdio-devtools-sidebar>`
             : nothing
         }

packages/app/src/components/browser/snapshot.ts

@@ -5,7 +5,7 @@ import { consume } from '@lit/context'
 import { type ComponentChildren, h, render, type VNode } from 'preact'
 import { customElement, query } from 'lit/decorators.js'
 
-import { context, type TraceLog } from '../../context.js'
+import { mutationContext, type TraceMutation, metadataContext, type Metadata } from '../../controller/DataManager.js'
 
 import '~icons/mdi/world.js'
 import '../placeholder.js'
@@ -38,8 +38,11 @@ export class DevtoolsBrowser extends Element {
   #vdom = document.createDocumentFragment()
   #activeUrl = ''
 
-  @consume({ context })
-  data: Partial<TraceLog> = {}
+  @consume({ context: metadataContext })
+  metadata: Metadata | undefined = undefined
+
+  @consume({ context: mutationContext })
+  mutations: TraceMutation[] = []
 
   static styles = [...Element.styles, css`
     :host {
@@ -85,7 +88,7 @@ export class DevtoolsBrowser extends Element {
   }
 
   #setIframeSize () {
-    const metadata = this.data.metadata
+    const metadata = this.metadata
     if (!this.section || !this.iframe || !this.header || !metadata) {
       return
     }
@@ -190,7 +193,7 @@ export class DevtoolsBrowser extends Element {
 
   #handleChildListMutation (mutation: TraceMutation) {
     if (mutation.addedNodes.length === 1 && !mutation.target) {
-      const baseUrl = this.data.metadata?.url || 'unknown'
+      const baseUrl = this.metadata?.url || 'unknown'
       this.#renderNewDocument(mutation.addedNodes[0] as SimplifiedVNode, baseUrl)
       return this.#renderVdom()
     }
@@ -254,7 +257,7 @@ export class DevtoolsBrowser extends Element {
   }
 
   async #renderBrowserState (mutationEntry?: TraceMutation) {
-    const mutations = this.data.mutations
+    const mutations = this.mutations
     if (!mutations) {
       return
     }
@@ -274,7 +277,7 @@ export class DevtoolsBrowser extends Element {
       .map(([, i]) => i)
       .pop() || 0
 
-    this.#activeUrl = mutations[rootIndex].url || this.data.metadata?.url || 'unknown'
+    this.#activeUrl = mutations[rootIndex].url || this.metadata?.url || 'unknown'
     for (let i = rootIndex; i <= mutationIndex; i++) {
       await this.#handleMutation(mutations[i]).catch(
         (err) => console.warn(`Failed to render mutation: ${err.message}`))
@@ -306,9 +309,9 @@ export class DevtoolsBrowser extends Element {
             ${this.#activeUrl}
           </div>
         </header>
-        ${this.data.mutations
+        ${this.mutations
           ? html`<iframe class="origin-top-left"></iframe>`
-          : html`<wdio-devtools-placeholder style="height: 500px"></wdio-devtools-placeholder>`
+          : html`<wdio-devtools-placeholder style="height: 100%"></wdio-devtools-placeholder>`
         }
       </section>
     `

packages/app/src/components/sidebar/explorer.ts

@@ -2,9 +2,10 @@ import { Element } from '@core/element'
 import { html, css, nothing, type TemplateResult } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import { consume } from '@lit/context'
+import { type SuiteStats } from '@wdio/reporter'
 
 import { TestState } from './test-suite.js'
-import { context, type TraceLog } from '../../context.js'
+import { suiteContext } from '../../controller/DataManager.js'
 
 import '~icons/mdi/play.js'
 import '~icons/mdi/stop.js'
@@ -35,8 +36,8 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
     }
   `]
 
-  @consume({ context })
-  data: TraceLog = {} as TraceLog
+  @consume({ context: suiteContext })
+  suites: Record<string, SuiteStats> = {}
 
   connectedCallback(): void {
     super.connectedCallback()
@@ -84,10 +85,10 @@ export class DevtoolsSidebarExplorer extends CollapseableEntry {
   }
 
   render() {
-    if (typeof this.data.suites !== 'object') {
+    if (typeof this.suites !== 'object') {
       return
     }
-    const suites = Object.values(this.data.suites[0]).map((suite) => {
+    const suites = Object.values(this.suites[0]).map((suite: SuiteStats) => {
       const state = !suite.tests.find((t) => t.end)
         ? TestState.RUNNING
         : suite.tests.find((t) => t.state === 'failed')

packages/app/src/components/workbench/actions.ts

@@ -3,7 +3,7 @@ import { html, css } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import { consume } from '@lit/context'
 
-import { context, type TraceLog } from '../../context.js'
+import { mutationContext, type TraceMutation, commandContext, type CommandLog } from '../../controller/DataManager.js'
 import { type ActionEntry } from './actionItems/item.js'
 
 import '~icons/mdi/pencil.js'
@@ -30,17 +30,20 @@ export class DevtoolsActions extends Element {
     }
   `]
 
-  @consume({ context })
-  data: Partial<TraceLog> = {}
+  @consume({ context: mutationContext })
+  mutations: TraceMutation[] = []
+
+  @consume({ context: commandContext })
+  commands: CommandLog[] = []
 
   connectedCallback(): void {
     super.connectedCallback()
-    this.#entries = [...this.data.mutations || [], ...this.data.commands || []]
+    this.#entries = [...this.mutations || [], ...this.commands || []]
       .sort((a, b) => a.timestamp - b.timestamp)
   }
 
   render() {
-    const mutations = this.data.mutations || []
+    const mutations = this.mutations || []
     if (!this.#entries.length || !mutations.length) {
       return html`<wdio-devtools-placeholder></wdio-devtools-placeholder>`
     }

packages/app/src/components/workbench/console.ts

@@ -5,7 +5,7 @@ import { html, css } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import { consume } from '@lit/context'
 
-import { context, type TraceLog } from '../../context.js'
+import { consoleLogContext } from '../../controller/DataManager.js'
 
 import '~icons/mdi/chevron-right.js'
 import '../placeholder.js'
@@ -30,16 +30,16 @@ export class DevtoolsConsoleLogs extends Element {
     }
   `]
 
-  @consume({ context })
-  data: Partial<TraceLog> = {}
+  @consume({ context: consoleLogContext })
+  logs: Partial<ConsoleLogs> = {}
 
   render() {
-    if (!this.data.consoleLogs || this.data.consoleLogs.length === 0) {
+    if (!this.logs || this.logs.length === 0) {
       return html`<wdio-devtools-placeholder></wdio-devtools-placeholder>`
     }
 
     return html`
-      ${Object.values(this.data.consoleLogs).map((log) => html`
+      ${Object.values(this.logs).map((log: any) => html`
         <dl class="w-full flex grow-0">
           <dt class="flex">
             <icon-mdi-chevron-right class="text-base transition-transform block"></icon-mdi-chevron-right>

packages/app/src/components/workbench/metadata.ts

@@ -3,7 +3,7 @@ import { html, css } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import { consume } from '@lit/context'
 
-import { context, type TraceLog } from '../../context.js'
+import { metadataContext, type Metadata } from '../../controller/DataManager.js'
 
 import './list.js'
 import '../placeholder.js'
@@ -12,8 +12,8 @@ import '~icons/mdi/chevron-right.js'
 const SOURCE_COMPONENT = 'wdio-devtools-metadata'
 @customElement(SOURCE_COMPONENT)
 export class DevtoolsMetadata extends Element {
-  @consume({ context })
-  data: Partial<TraceLog> = {}
+  @consume({ context: metadataContext })
+  metadata: Partial<Metadata> = {}
 
   static styles = [...Element.styles, css`
     :host {
@@ -26,21 +26,21 @@ export class DevtoolsMetadata extends Element {
   `]
 
   render() {
-    if (!this.data.metadata) {
-      return html`<wdio-devtools-placeholder style="height: 500px"></wdio-devtools-placeholder>`
+    if (!this.metadata) {
+      return html`<wdio-devtools-placeholder></wdio-devtools-placeholder>`
     }
 
-    const { url } = this.data.metadata
+    const { url } = this.metadata
     return html`
       <wdio-devtools-list
         label="Metadata"
         .list="${({ url })}"></wdio-devtools-list>
       <wdio-devtools-list
         label="Capabilities"
-        .list="${this.data.metadata.capabilities}"></wdio-devtools-list>
+        .list="${this.metadata.capabilities}"></wdio-devtools-list>
       <wdio-devtools-list
         label="Options"
-        .list="${this.data.metadata.options}"></wdio-devtools-list>
+        .list="${this.metadata.options}"></wdio-devtools-list>
     `
   }
 }

packages/app/src/components/workbench/source.ts

@@ -8,7 +8,7 @@ import type { EditorViewConfig } from '@codemirror/view'
 import { javascript } from '@codemirror/lang-javascript'
 import { oneDark } from '@codemirror/theme-one-dark'
 
-import { context, type TraceLog } from '../../context.js'
+import { sourceContext } from '../../controller/DataManager.js'
 
 import '../placeholder.js'
 
@@ -31,21 +31,21 @@ export class DevtoolsSource extends Element {
     }
   `]
 
-  @consume({ context })
-  data: Partial<TraceLog> = {}
+  @consume({ context: sourceContext })
+  sources: Record<string, string> = {}
 
   connectedCallback(): void {
     super.connectedCallback()
     window.addEventListener('app-source-highlight', this.#highlightCallSource.bind(this))
-    setTimeout(() => this.#renderEditor(Object.keys(this.data.sources || {})[0]))
+    setTimeout(() => this.#renderEditor(Object.keys(this.sources || {})[0]))
   }
 
   #renderEditor (filePath: string, highlightLine?: number) {
-    if (!this.data.sources) {
+    if (!this.sources) {
       return
     }
 
-    const source = this.data.sources[filePath]
+    const source = this.sources[filePath]
     if (!source) {
       return
     }