Source data generation fix

Author: vishnuv688

package.json

@@ -2,7 +2,7 @@
   "name": "devtools-monorepo",
   "type": "module",
   "scripts": {
-    "build": "pnpm --parallel build",
+    "build": "pnpm -r build",
     "demo": "wdio run ./example/wdio.conf.ts",
     "demo:nightwatch": "pnpm --filter @wdio/nightwatch-devtools example",
     "dev": "pnpm --parallel dev",
@@ -18,7 +18,8 @@
   "pnpm": {
     "overrides": {
       "vite": "^7.3.0",
-      "@types/node": "25.5.2"
+      "@types/node": "25.5.2",
+      "@codemirror/state": "6.5.4"
     },
     "ignoredBuiltDependencies": [
       "chromedriver"

packages/app/package.json

@@ -42,6 +42,7 @@
     "stylelint-config-recommended": "^17.0.0",
     "stylelint-config-tailwindcss": "^1.0.1",
     "tailwindcss": "~4.2.2",
+    "typescript": "6.0.2",
     "vite": "7.3.2"
   }
 }

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

@@ -1,6 +1,6 @@
 import { Element } from '@core/element'
-import { html, css } from 'lit'
-import { customElement } from 'lit/decorators.js'
+import { html, css, type PropertyValues } from 'lit'
+import { customElement, state } from 'lit/decorators.js'
 import { consume } from '@lit/context'
 
 import { EditorView, basicSetup } from 'codemirror'
@@ -28,45 +28,75 @@ export class DevtoolsSource extends Element {
         width: 100%;
         height: 100%;
         padding: 10px 0px;
+        flex: 1;
+        min-height: 0;
       }
       .cm-content {
         padding: 0 !important;
       }
 
       .source-container {
+        display: flex;
+        flex-direction: column;
         width: 100%;
         height: 100%;
+        overflow: hidden;
       }
     `
   ]
 
   @consume({ context: sourceContext, subscribe: true })
+  @state()
   sources: Record<string, string> = {}
 
   #editorView?: EditorView
   #activeFile?: string
+  #tabObserver?: MutationObserver
 
   connectedCallback(): void {
     super.connectedCallback()
     window.addEventListener(
       'app-source-highlight',
       this.#highlightCallSource.bind(this)
     )
+    // Observe when the containing tab becomes active so CodeMirror can remeasure
+    // after having been initialized while the tab was hidden (display:none).
+    requestAnimationFrame(() => {
+      const tab = this.closest('wdio-devtools-tab')
+      if (tab) {
+        this.#tabObserver = new MutationObserver(() => {
+          if (tab.hasAttribute('active') && this.#editorView) {
+            // Force CodeMirror to remeasure and re-render after becoming visible
+            requestAnimationFrame(() => {
+              this.#editorView?.requestMeasure()
+              this.#editorView?.dom.dispatchEvent(new Event('resize'))
+            })
+          }
+        })
+        this.#tabObserver.observe(tab, { attributes: true, attributeFilter: ['active'] })
+      }
+    })
   }
 
   disconnectedCallback(): void {
     super.disconnectedCallback()
     this.#editorView?.destroy()
     this.#editorView = undefined
+    this.#tabObserver?.disconnect()
+    this.#tabObserver = undefined
   }
 
-  updated() {
+  updated(_changedProperties: PropertyValues<this>) {
     const sourceFileNames = Object.keys(this.sources || {})
     if (sourceFileNames.length === 0) {
       return
     }
-    // Mount or refresh the editor for the first source file
-    this.#mountEditor(sourceFileNames[0])
+    // Respect an explicitly highlighted file; otherwise show the first available
+    const targetFile =
+      this.#activeFile && this.sources?.[this.#activeFile]
+        ? this.#activeFile
+        : sourceFileNames[0]
+    this.#mountEditor(targetFile)
   }
 
   #mountEditor(filePath: string, highlightLine?: number) {
@@ -101,6 +131,11 @@ export class DevtoolsSource extends Element {
     this.#editorView = new EditorView(opts)
     this.#activeFile = filePath
 
+    // Force a measure on the next frame so CodeMirror can calculate heights
+    // correctly — needed when the editor was created while the panel was hidden
+    // or before layout was complete.
+    requestAnimationFrame(() => this.#editorView?.requestMeasure())
+
     if (highlightLine && highlightLine > 0) {
       this.#scrollToLine(this.#editorView, highlightLine)
     }

packages/app/tsconfig.json

@@ -1,3 +1,7 @@
 {
-  "extends": "../../tsconfig.json"
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "ignoreDeprecations": "6.0",
+    "noUncheckedSideEffectImports": false
+  }
 }

packages/app/vite.config.ts

@@ -9,6 +9,13 @@ const __dirname = url.fileURLToPath(new URL('.', import.meta.url))
 export default defineConfig({
   resolve: {
     alias: {
+      // Force all codemirror packages to use the same @codemirror/state instance,
+      // preventing the "multiple instances" error when mixing codemirror meta-package
+      // with direct @codemirror/* imports under pnpm.
+      '@codemirror/state': path.resolve(
+        __dirname,
+        '../../node_modules/.pnpm/@codemirror+view@6.41.0/node_modules/@codemirror/state'
+      ),
       '@': path.resolve(__dirname, './src'),
       '@core': path.resolve(__dirname, './src/core'),
       '@components': path.resolve(__dirname, './src/components'),

packages/service/package.json

@@ -34,6 +34,8 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@babel/parser": "^7.28.4",
+    "@babel/traverse": "^7.28.4",
     "@babel/types": "^7.28.4",
     "@wdio/devtools-backend": "workspace:^",
     "@wdio/devtools-script": "workspace:^",
@@ -42,8 +44,6 @@
     "@wdio/types": "9.27.0",
     "import-meta-resolve": "^4.1.0",
     "stack-trace": "1.0.0-pre2",
-    "@babel/parser": "^7.28.4",
-    "@babel/traverse": "^7.28.4",
     "ws": "^8.18.3"
   },
   "license": "MIT",
@@ -54,8 +54,9 @@
     "@types/ws": "^8.18.1",
     "@wdio/globals": "9.27.0",
     "@wdio/protocols": "9.27.0",
+    "typescript": "6.0.2",
+    "vite": "7.3.2",
     "vite-plugin-dts": "^4.5.4"
-    ,"vite": "7.3.2"
   },
   "peerDependencies": {
     "@wdio/protocols": "9.27.0",

packages/service/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "ignoreDeprecations": "6.0",
     "moduleResolution": "NodeNext",
     "module": "NodeNext",
     "types": ["@wdio/globals/types"]