feat: add explo.showView command to VS Code extension (#2)

Author: blaugold

.github/workflows/ci.yaml

@@ -10,6 +10,7 @@ on:
 
 env:
   MELOS_VERSION: 1.0.0-dev.14
+  EXPLO_CODE_DIR: explo-code
 
 jobs:
   formatting-prettier:
@@ -19,8 +20,6 @@ jobs:
 
       - name: Setup node
         uses: actions/setup-node@v2
-        with:
-          node-version: 16.0
 
       - name: Install npm dependencies
         run: npm ci
@@ -43,3 +42,57 @@ jobs:
 
       - name: Check formatting
         run: melos run formatting:check
+
+  explo-code-lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup node
+        uses: actions/setup-node@v2
+
+      - name: Install npm dependencies
+        working-directory: ${{ env.EXPLO_CODE_DIR }}
+        run: npm ci
+
+      - name: Run linter
+        working-directory: ${{ env.EXPLO_CODE_DIR }}
+        run: npm run lint
+
+  explo-code-tests:
+    strategy:
+      fail-fast: false
+      matrix:
+        runs-on: [ubuntu-latest, macos-latest, windows-latest]
+    runs-on: ${{ matrix.runs-on }}
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup node
+        uses: actions/setup-node@v2
+
+      - name: Install npm dependencies
+        working-directory: ${{ env.EXPLO_CODE_DIR }}
+        run: npm ci
+
+      - name: Setup Flutter
+        uses: subosito/flutter-action@v1
+
+      - name: Install melos
+        run: dart pub global activate melos $MELOS_VERSION
+
+      - name: Build explo_ide_view
+        shell: bash
+        run: |
+          ./tools/explo_ide_view.sh build
+          ./tools/explo_ide_view.sh copyToExploCode
+
+      - name: Start Xvfb
+        if: runner.os == 'Linux'
+        run: |
+          Xvfb :99 -screen 0 1280x1024x24 &
+          echo "DISPLAY=:99" >> "$GITHUB_ENV"
+
+      - name: Run tests
+        working-directory: ${{ env.EXPLO_CODE_DIR }}
+        run: npm test

.prettierignore

@@ -1,7 +1,9 @@
+.vscode-test
+.dart_tool
 node_modules
 build
 dist
+out
 coverage
-.dart_tool
 *.xcassets
-CHANGELOG.md
+CHANGELOG.md

README.md

@@ -1,7 +1,9 @@
 Monorepo for explo, a tool which allows you to explore the render tree of a
 Flutter app in 3D, through an exploded representation
 
-| Component     | Description                                                            | Location                                           | Published at                                                                                 |
-| ------------- | ---------------------------------------------------------------------- | -------------------------------------------------- | -------------------------------------------------------------------------------------------- |
-| explo         | Flutter package to receive captured render tree data and visualize it. | [packages/explo](./packages/explo)                 | [![pub.dev](https://badgen.net/pub/v/explo)](https://pub.dev/packages/explo)                 |
-| explo_capture | Flutter package to capture render tree data in a Flutter app.          | [packages/explo_capture](./packages/explo_capture) | [![pub.dev](https://badgen.net/pub/v/explo_capture)](https://pub.dev/packages/explo_capture) |
+| Component      | Description                                                            | Location                                             | Published at                                                                                                                                          |
+| -------------- | ---------------------------------------------------------------------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| explo          | Flutter package to receive captured render tree data and visualize it. | [packages/explo](./packages/explo)                   | [![pub.dev](https://badgen.net/pub/v/explo)](https://pub.dev/packages/explo)                                                                          |
+| explo_capture  | Flutter package to capture render tree data in a Flutter app.          | [packages/explo_capture](./packages/explo_capture)   | [![pub.dev](https://badgen.net/pub/v/explo_capture)](https://pub.dev/packages/explo_capture)                                                          |
+| explo_ide_view | Explo web view for IDE plugins.                                        | [packages/explo_ide_view](./packages/explo_ide_view) |                                                                                                                                                       |
+| explo-code     | VS Code extension to add support for Explo                             | [explo-code](./explo-code)                           | [![VS Marketplace](https://badgen.net/vs-marketplace/v/blaugold.explo-code)](https://marketplace.visualstudio.com/items?itemName=blaugold.explo-code) |

explo-code/.vscode/launch.json

@@ -11,24 +11,31 @@
       "request": "launch",
       "args": [
         "--extensionDevelopmentPath=${workspaceFolder}",
-        "${workspaceFolder}/.."
+        "${workspaceFolder}/src/test/workspaces/hello_flutter"
       ],
       "outFiles": ["${workspaceFolder}/dist/**/*.js"],
-      "preLaunchTask": "${defaultBuildTask}"
+      "preLaunchTask": "${defaultBuildTask}",
+      "env": {
+        "EXPLO_CODE_DEV_MODE": "true"
+      }
     },
     {
       "name": "Extension Tests",
       "type": "extensionHost",
       "request": "launch",
       "args": [
         "--extensionDevelopmentPath=${workspaceFolder}",
-        "--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
+        "--extensionTestsPath=${workspaceFolder}/out/test/suite/index",
+        "${workspaceFolder}/src/test/workspaces/hello_flutter"
       ],
       "outFiles": [
         "${workspaceFolder}/out/**/*.js",
         "${workspaceFolder}/dist/**/*.js"
       ],
-      "preLaunchTask": "tasks: watch-tests"
+      "preLaunchTask": "tasks: watch-tests",
+      "env": {
+        "EXPLO_CODE_DEV_MODE": "true"
+      }
     }
   ]
 }

explo-code/package.json

@@ -1,5 +1,6 @@
 {
   "name": "explo-code",
+  "publisher": "blaugold",
   "displayName": "Explo",
   "description": "",
   "version": "0.0.1",
@@ -10,20 +11,30 @@
     "Other"
   ],
   "activationEvents": [
-    "onDebug"
+    "onStartupFinished"
   ],
   "main": "./dist/extension.js",
   "contributes": {
-    "commands": []
+    "commands": [
+      {
+        "command": "explo.openView",
+        "title": "Open view",
+        "category": "Explo",
+        "enablement": "inDebugMode && debugType == 'dart'"
+      }
+    ]
   },
+  "extensionDependencies": [
+    "Dart-Code.dart-code"
+  ],
   "scripts": {
-    "vscode:prepublish": "npm run package",
+    "vscode:prepublish": "melos run explo_ide_view:vs_code &&  npm run package",
     "compile": "webpack",
     "watch": "webpack --watch",
     "package": "webpack --mode production --devtool hidden-source-map",
     "compile-tests": "tsc -p . --outDir out",
     "watch-tests": "tsc -p . -w --outDir out",
-    "pretest": "npm run compile-tests && npm run compile && npm run lint",
+    "pretest": "npm run compile-tests && npm run compile",
     "lint": "eslint src --ext ts",
     "test": "node ./out/test/runTest.js"
   },

explo-code/src/api.ts

@@ -0,0 +1 @@
+export const exploViewCommandsSymbol = Symbol.for('exploViewCommands')

explo-code/src/explo_debug_session.ts

@@ -3,11 +3,12 @@ import {
   DebugSession,
   DebugSessionCustomEvent,
   Disposable,
+  EventEmitter,
   workspace,
 } from 'vscode'
 import { isFlutterDebugSession } from './dart_debug_session'
 import { Logger } from './logging'
-import { disposeAll } from './utils/basic'
+import { disposeAll } from './utils/resources'
 
 /**
  * Coordinates debug sessions between apps that are capturing render tree data
@@ -25,20 +26,28 @@ export class ExploDebugSessionsCoordinator implements Disposable {
     this.subscriptions.push(
       debug.onDidReceiveDebugSessionCustomEvent(this.handleCustomEvent, this)
     )
+
+    this.subscriptions.push(this.didTerminateSessionEmitter)
   }
 
   private readonly subscriptions: Disposable[] = []
 
-  private activeSession: ExploDebugSession[] = []
+  readonly activeSession: ExploDebugSession[] = []
 
-  private get viewerSessions(): ExploDebugSession[] {
+  get viewerSessions(): ExploDebugSession[] {
     return this.activeSession.filter((session) => session.isViewerApp)
   }
 
-  private get nonViewerSessions(): ExploDebugSession[] {
+  get nonViewerSessions(): ExploDebugSession[] {
     return this.activeSession.filter((session) => !session.isViewerApp)
   }
 
+  private onDidMakeSessionReadyEmitter = new EventEmitter<ExploDebugSession>()
+  onDidMakeSessionReady = this.onDidMakeSessionReadyEmitter.event
+
+  private didTerminateSessionEmitter = new EventEmitter<ExploDebugSession>()
+  didTerminateSession = this.didTerminateSessionEmitter.event
+
   private handleSessionStart(session: DebugSession) {
     if (!isFlutterDebugSession(session)) {
       return
@@ -61,6 +70,7 @@ export class ExploDebugSessionsCoordinator implements Disposable {
     this.activeSession.splice(this.activeSession.indexOf(exploSession), 1)
 
     this.handleExploSessionEnd(exploSession)
+    this.didTerminateSessionEmitter.fire(exploSession)
   }
 
   private handleCustomEvent(event: DebugSessionCustomEvent) {
@@ -75,6 +85,7 @@ export class ExploDebugSessionsCoordinator implements Disposable {
       exploSession.vmServiceUri = event.body.vmServiceUri
 
       this.handleExploSessionReady(exploSession)
+      this.onDidMakeSessionReadyEmitter.fire(exploSession)
     } else if (
       event.event === 'dart.serviceExtensionAdded' &&
       event.body.extensionRPC === 'ext.explo.removeTargetApp'
@@ -145,23 +156,30 @@ export class ExploDebugSessionsCoordinator implements Disposable {
   }
 }
 
-interface TargetApp {
+export interface TargetApp {
   id: string
   label: string
   vmServiceUri: string
 }
 
-class ExploDebugSession {
+export class ExploDebugSession {
   constructor(public readonly session: DebugSession) {
     const program = this.session.configuration.program as string
     this.label = workspace
       .asRelativePath(program)
       .replace(/\/lib\/.*\.dart/g, '')
   }
 
-  label: string
+  readonly label: string
+
   vmServiceUri?: string
+
   isolateId?: string
+
+  get isReady(): boolean {
+    return this.vmServiceUri !== undefined
+  }
+
   isViewerApp?: boolean
 
   get targetApp(): TargetApp {