feat(vscode): add status bar items to start, stop and open server (#988)

Author: alestiago

extensions/vscode/assets/dart-frog.woff

@@ -94,6 +94,36 @@
         }
       ]
     },
+    "icons": {
+      "dart-frog": {
+        "description": "Dart Frog logo",
+        "default": {
+          "fontPath": "./assets/dart-frog.woff",
+          "fontCharacter": "\\e900"
+        }
+      },
+      "dart-frog-start": {
+        "description": "Dart Frog logo with a start sign",
+        "default": {
+          "fontPath": "./assets/dart-frog.woff",
+          "fontCharacter": "\\e901"
+        }
+      },
+      "dart-frog-stop": {
+        "description": "Dart Frog logo with a stop sign",
+        "default": {
+          "fontPath": "./assets/dart-frog.woff",
+          "fontCharacter": "\\e902"
+        }
+      },
+      "dart-frog-globe": {
+        "description": "Dart Frog logo with a globe sign",
+        "default": {
+          "fontPath": "./assets/dart-frog.woff",
+          "fontCharacter": "\\e903"
+        }
+      }
+    },
     "configuration": {
       "properties": {
         "dart-frog.enableCodeLens": {

extensions/vscode/package.json

@@ -3,6 +3,10 @@ import {
   DebugOnRequestCodeLensProvider,
   RunOnRequestCodeLensProvider,
 } from "./code-lens";
+import {
+  OpenApplicationStatusBarItem,
+  StartStopApplicationStatusBarItem,
+} from "./status-bar";
 import {
   create,
   debugDevServer,
@@ -73,8 +77,11 @@ export function activate(
     vscode.commands.registerCommand(
       "dart-frog.start-debug-dev-server",
       startDebugDevServer
-    )
+    ),
+    new StartStopApplicationStatusBarItem(),
+    new OpenApplicationStatusBarItem()
   );
+
   return context;
 }
 

extensions/vscode/src/extension.ts

@@ -0,0 +1,51 @@
+import {
+  Disposable,
+  StatusBarAlignment,
+  StatusBarItem,
+  window,
+  workspace,
+} from "vscode";
+import { resolveDartFrogProjectPathFromWorkspace } from "../utils";
+
+/**
+ * Wraps a status bar item so that is only visible when the current workspace
+ * is a Dart Frog project.
+ *
+ * Should be used as a base class for other status bar items.
+ *
+ * @see {@link StatusBarItem}, for more information on status bar items.
+ */
+export abstract class DartFrogStatusBarItem implements Disposable {
+  public readonly statusBarItem: StatusBarItem;
+
+  private onDidChangeWorkspaceFoldersDisposable: Disposable;
+  private onDidChangeActiveTextEditorDisposable: Disposable;
+
+  constructor(alignment: StatusBarAlignment, priority: number) {
+    this.statusBarItem = window.createStatusBarItem(alignment, priority);
+
+    this.onDidChangeWorkspaceFoldersDisposable =
+      workspace.onDidChangeWorkspaceFolders(this.onChangeSetup.bind(this));
+    this.onDidChangeActiveTextEditorDisposable =
+      window.onDidChangeActiveTextEditor(this.onChangeSetup.bind(this));
+
+    this.onChangeSetup();
+  }
+
+  public abstract update(): any;
+
+  private onChangeSetup(): void {
+    const isDartFrogProject = resolveDartFrogProjectPathFromWorkspace();
+    if (isDartFrogProject) {
+      this.update();
+    } else {
+      this.statusBarItem.hide();
+    }
+  }
+
+  public dispose(): void {
+    this.onDidChangeWorkspaceFoldersDisposable.dispose();
+    this.onDidChangeActiveTextEditorDisposable.dispose();
+    this.statusBarItem.dispose();
+  }
+}

extensions/vscode/src/status-bar/dart-frog-status-bar-item.ts

@@ -0,0 +1,3 @@
+export * from "./dart-frog-status-bar-item";
+export * from "./open-application-status-bar-item";
+export * from "./start-stop-application-status-bar-item";

extensions/vscode/src/status-bar/index.ts

@@ -0,0 +1,59 @@
+import { Command, StatusBarAlignment, Uri } from "vscode";
+import {
+  DartFrogApplicationRegistryEventEmitterTypes,
+  DartFrogDaemon,
+} from "../daemon";
+import { DartFrogStatusBarItem } from "./dart-frog-status-bar-item";
+
+export class OpenApplicationStatusBarItem extends DartFrogStatusBarItem {
+  private updateFunction: () => void;
+
+  constructor() {
+    super(StatusBarAlignment.Right, 10);
+
+    this.updateFunction = this.update.bind(this);
+
+    const daemon = DartFrogDaemon.instance;
+    daemon.applicationRegistry.on(
+      DartFrogApplicationRegistryEventEmitterTypes.add,
+      this.updateFunction
+    );
+    daemon.applicationRegistry.on(
+      DartFrogApplicationRegistryEventEmitterTypes.remove,
+      this.updateFunction
+    );
+  }
+
+  public update(): void {
+    const daemon = DartFrogDaemon.instance;
+    const applications = daemon.applicationRegistry.all();
+    if (applications.length === 0) {
+      this.statusBarItem.hide();
+      return;
+    }
+
+    const application = applications[0];
+    this.statusBarItem.text = `$(dart-frog-globe) localhost:${application.port}`;
+    this.statusBarItem.tooltip = "Open application in browser";
+    const openCommand: Command = {
+      title: "Open application in browser",
+      command: "vscode.open",
+      arguments: [Uri.parse(application.address!)],
+    };
+    this.statusBarItem.command = openCommand;
+    this.statusBarItem.show();
+  }
+
+  public dispose(): void {
+    const daemon = DartFrogDaemon.instance;
+    daemon.applicationRegistry.off(
+      DartFrogApplicationRegistryEventEmitterTypes.add,
+      this.updateFunction
+    );
+    daemon.applicationRegistry.off(
+      DartFrogApplicationRegistryEventEmitterTypes.remove,
+      this.updateFunction
+    );
+    super.dispose();
+  }
+}

extensions/vscode/src/status-bar/open-application-status-bar-item.ts

@@ -0,0 +1,56 @@
+import {
+  DartFrogApplicationRegistryEventEmitterTypes,
+  DartFrogDaemon,
+} from "../daemon";
+import { DartFrogStatusBarItem } from "./dart-frog-status-bar-item";
+import { StatusBarAlignment } from "vscode";
+
+export class StartStopApplicationStatusBarItem extends DartFrogStatusBarItem {
+  private updateFunction: () => void;
+
+  constructor() {
+    super(StatusBarAlignment.Left, 10);
+
+    this.updateFunction = this.update.bind(this);
+
+    const daemon = DartFrogDaemon.instance;
+    daemon.applicationRegistry.on(
+      DartFrogApplicationRegistryEventEmitterTypes.add,
+      this.updateFunction
+    );
+    daemon.applicationRegistry.on(
+      DartFrogApplicationRegistryEventEmitterTypes.remove,
+      this.updateFunction
+    );
+  }
+
+  public update(): void {
+    const daemon = DartFrogDaemon.instance;
+    const applications = daemon.applicationRegistry.all();
+
+    if (applications.length === 0) {
+      this.statusBarItem.text = "$(dart-frog-start) Start Server";
+      this.statusBarItem.tooltip = "Start development server";
+      this.statusBarItem.command = "dart-frog.start-debug-dev-server";
+    } else {
+      this.statusBarItem.text = "$(dart-frog-stop) Stop Server";
+      this.statusBarItem.tooltip = "Stop development server";
+      this.statusBarItem.command = "dart-frog.stop-dev-server";
+    }
+
+    this.statusBarItem.show();
+  }
+
+  dispose() {
+    const daemon = DartFrogDaemon.instance;
+    daemon.applicationRegistry.off(
+      DartFrogApplicationRegistryEventEmitterTypes.add,
+      this.updateFunction
+    );
+    daemon.applicationRegistry.off(
+      DartFrogApplicationRegistryEventEmitterTypes.remove,
+      this.updateFunction
+    );
+    super.dispose();
+  }
+}