fix(vscode-extension): Resolved startup issues

Author: sullivanpj

apps/cli/src/program/cli-program.ts

@@ -10,7 +10,7 @@ export const createCLIAcidicProgram = async (): Promise<number> => {
       "The Acidic Engine CLI is an application used to build full-stack apps with a design-first approach.",
     documentationUrl: "https://acidic.io/docs",
     licenseUrl: "https://acidic.io/license",
-    title: {
+    banner: {
       name: "Acidic CLI"
     },
     by: {

apps/vscode-extension/client/app/App.tsx

@@ -1,15 +1,13 @@
 //import { SchemaTreeView } from "@acidic/vscode-components";
 import { ServiceGraph } from "@acidic/service-graph";
+import { MemoExoticComponent, memo } from "react";
 import "../style/global.css";
 
-export function App() {
+export const App: MemoExoticComponent<() => JSX.Element> = memo(() => {
   return (
-    <div>
-      {/*<SchemaTreeView repository="Acidic Repository" />*/}
+    <div className="h-full w-full">
       <h1>Acidic Service Graph</h1>
-      <ServiceGraph />
+      <ServiceGraph className="h-full w-full" />
     </div>
   );
-}
-
-export default App;
+});

apps/vscode-extension/client/app/index.ts

@@ -0,0 +1 @@
+export * from "./App";

apps/vscode-extension/client/main.tsx

@@ -1,7 +1,6 @@
 import { StrictMode } from "react";
 import * as ReactDOM from "react-dom/client";
-
-import App from "./app/App";
+import { App } from "./app";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement

apps/vscode-extension/client/style/global.css

@@ -1,3 +1,18 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+html {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-color: #fff;
+  height: 100vh;
+  width: 100vw;
+  margin: 0;
+  padding: 0;
+}

apps/vscode-extension/docs/getting-started/1-generate.md

@@ -0,0 +1,19 @@
+ 
+
+# Generate
+
+The `Generate` action allows you to choose a generator and then opens a form listing out all the options for that generator. As you make changes to the form, the generator is executed in `--dry-run` mode in a terminal so you can preview the results of running the generator in real time.
+
+[See the Demo](https://youtu.be/-nUr66MWRiE)
+
+ 
+
+## From the Command Palette
+
+You can also launch the `Generate` action from the Command Palette (`⇧⌘P`) by selecting `nx: generate (ui)`.
+
+[See the Demo](https://youtu.be/Sk2XjFwF8Zo)
+
+You can even construct the generator options while staying entirely within the Command Palette. Use `⇧⌘P` to open the Command Palette, then select `nx: generate`. After choosing a generator, select any of the listed options to modify the generator command. When you're satisfied with the constructed command, choose the `Execute` command at the top of the list.
+
+[See the Demo](https://youtu.be/q5NTTqRYq9c)

apps/vscode-extension/docs/getting-started/2-run.md

@@ -0,0 +1,15 @@
+ 
+
+# Run
+
+The `Run` action allows you to choose an executor command and then opens a form listing out all the options for that builder. The frequently used executor commands `build`, `serve`, `test`, `e2e` and `lint` also have their own dedicated actions.
+
+[See the Demo](https://youtu.be/rNImFxo9gYs)
+
+ 
+
+## From the Command Palette
+
+You can also construct the executor command options while staying entirely within the Command Palette. Use `⇧⌘P` to open the Command Palette, then select `nx: test`. After choosing a project, select any of the listed options to modify the executor command options. When you're satisfied with the constructed command, choose the `Execute` command at the top of the list.
+
+[See the Demo](https://youtu.be/CsUkSyQcxwQ)

apps/vscode-extension/docs/getting-started/3-common-nx-commands.md

@@ -0,0 +1,10 @@
+nbsp;
+
+# Common Nx Commands
+
+You can also launch other common Nx commands with the options listed out in the Command Palette.
+
+- `run-many`: Run task for multiple projects
+- `affected`: Run task for affected projects
+
+[See the Demo](https://youtu.be/v6Tso0lB6S4)

apps/vscode-extension/docs/getting-started/4-projects.md

@@ -0,0 +1,13 @@
+ 
+
+# Projects
+
+- Clicking on the name of any project will navigate to that project's definition in the `workspace.json` (or `angular.json`) file. Clicking on the name of any builder command will navigate to that builder command's definition in the `workspace.json` (or `angular.json`) file.
+
+- Clicking the ![Refresh](https://raw.githubusercontent.com/nrwl/nx-console/ba40a1c4a53d48b89a05a2f0d77a4139f9de6cc2/apps/vscode/src/assets/refresh-light.svg) Refresh icon next to the `PROJECTS` header will repopulate the Projects pane from the `workspace.json` (or `angular.json`) file.
+
+- Clicking the ![Folder](https://raw.githubusercontent.com/nrwl/nx-console/ba40a1c4a53d48b89a05a2f0d77a4139f9de6cc2/apps/vscode/src/assets/folder-light.svg) Folder icon next to a project will reveal that project's folder in the VSCode Explorer pane.
+
+- Clicking the ![Execute](https://raw.githubusercontent.com/nrwl/nx-console/ba40a1c4a53d48b89a05a2f0d77a4139f9de6cc2/apps/vscode/src/assets/continue-light.svg) Execute icon next to an executor command will execute that command without prompting for options.
+
+[See the Demo](https://youtu.be/ve_N3unDqAg)

apps/vscode-extension/docs/getting-started/5-streamlining.md

@@ -0,0 +1,39 @@
+ 
+
+# Streamlining
+
+If you find yourself running the same command many times, here are few tips to save yourself some key strokes.
+
+## Rerun Last Task
+
+If you want to rerun the last task with all the same options specified, bring up the Command Palette (`⇧⌘P`) and choose `Rerun Last Task`.
+
+ 
+
+## Keyboard Shortcuts
+
+You can also set up custom tasks and assign keyboard shortcuts to them. In .vscode/tasks.json add a task like this:
+
+```json
+{
+  "label": "Test Affected",
+  "type": "shell",
+  "command": "nx affected --target=test"
+}
+```
+
+Then from the Command Palette (`⇧⌘P`) choose `Preferences: Open Keyboard Shortcuts (JSON)`. Then add the following shortcut:
+
+```json
+{
+  "key": "ctrl+cmd+t",
+  "command": "workbench.action.tasks.runTask",
+  "args": "Test Affected"
+}
+```
+
+Now, pressing `^⌘T` will run `nx affected --target=test`.
+
+ 
+
+Here is more information on [VSCode tasks](https://code.visualstudio.com/docs/editor/tasks) and [keyboard shortcuts](https://code.visualstudio.com/docs/getstarted/keybindings).

apps/vscode-extension/esbuild.extension.config.js

@@ -1,5 +1,4 @@
 const { esbuildDecorators } = require("@anatine/esbuild-decorators");
-const esbuildPluginPino = require("esbuild-plugin-pino");
 
 module.exports = {
   mainFields: ["module", "main"],
@@ -19,7 +18,6 @@ module.exports = {
   plugins: [
     esbuildDecorators({
       tsconfig: "apps/vscode-extension/tsconfig.extension.json"
-    }),
-    esbuildPluginPino({ transports: ["pino-pretty"] })
+    })
   ]
 };

apps/vscode-extension/extension/main.ts

@@ -2,10 +2,11 @@ import { createAcidicConfig } from "@acidic/config";
 import {
   CommandName,
   LOCATE_YOUR_WORKSPACE,
-  ServiceTreeProvider,
   SupportTreeProvider,
   WorkspaceConfigStore,
-  getCommandId
+  createLogger,
+  getCommandId,
+  initServiceTree
 } from "@acidic/vscode-state";
 import {
   findWorkspaceRootSafe,
@@ -18,7 +19,6 @@ import {
   ExtensionContext,
   FileSystemWatcher,
   RelativePattern,
-  WebviewPanel,
   commands,
   window,
   workspace
@@ -38,17 +38,18 @@ let logger: StormLog;
 let hasWorkspaceRoot = false;
 let workspaceFileWatcher: FileSystemWatcher | undefined;
 
-export function activate(_context: ExtensionContext) {
+export async function activate(_context: ExtensionContext) {
   try {
     window.setStatusBarMessage("Starting Acidic Workspace");
     commands.executeCommand("setContext", "hasWorkspaceRoot", false);
+    commands.executeCommand("setContext", "isWorkspaceLoading", true);
 
     context = _context;
 
     context.subscriptions.push(
       commands.registerCommand(
         LOCATE_YOUR_WORKSPACE.command?.command || "",
-        () => manuallySelectWorkspaceDefinition()
+        async () => manuallySelectWorkspaceDefinition()
       )
     );
 
@@ -64,7 +65,7 @@ export function activate(_context: ExtensionContext) {
         : undefined
     );
     if (workspaceRoot) {
-      loadAcidicWorkspace(workspaceRoot);
+      await loadAcidicWorkspace(workspaceRoot);
     } else {
       writeStatusBarMessage("Acidic Workspace is ready");
     }
@@ -174,6 +175,15 @@ async function loadAcidicWorkspace(workspaceRoot: string) {
   }
 }
 
+function handleWorkspaceReady() {
+  commands.executeCommand("setContext", "isWorkspaceLoading", false);
+  ReactPanel.createOrShow(context, "Acidic Workspace");
+
+  window.showInformationMessage(
+    "Acidic Workspace successfully loaded services"
+  );
+}
+
 async function loadWorkspaceRoot(workspacePath: string): Promise<boolean> {
   try {
     if (
@@ -191,37 +201,27 @@ async function loadWorkspaceRoot(workspacePath: string): Promise<boolean> {
     const workspaceRoot = findWorkspaceRootSafe(workspacePath);
     if (workspaceRoot) {
       process.env.STORM_WORKSPACE_ROOT = workspaceRoot;
+
       hasWorkspaceRoot = true;
+      commands.executeCommand("setContext", "hasWorkspaceRoot", true);
 
       await loadStormConfig(workspaceRoot);
       const config = createAcidicConfig(workspaceRoot);
-      // logger = createLogger(config);
+      logger = createLogger(config);
 
       WorkspaceConfigStore.fromContext(context, logger);
       WorkspaceConfigStore.instance.setWorkspaceRoot(workspaceRoot);
 
-      client = startLanguageClient(context);
-
-      const serviceExplorerProvider = new ServiceTreeProvider(workspaceRoot);
-      window.registerTreeDataProvider(
-        "acidicWorkspace.views.services",
-        serviceExplorerProvider
-      );
-      commands.registerCommand(
-        getCommandId(CommandName.REFRESH_SCHEMA_START),
-        () => serviceExplorerProvider.refresh()
-      );
+      // client = startLanguageClient(context);
 
-      let panel: WebviewPanel | undefined = undefined;
       context.subscriptions.push(
         commands.registerCommand(
-          getCommandId(CommandName.OPEN_SCHEMA_EXPLORER),
-          () => {
-            ReactPanel.createOrShow({ ...context, logger }, "Acidic Workspace");
-          }
+          getCommandId(CommandName.SET_WORKSPACE_READY),
+          handleWorkspaceReady
         )
       );
 
+      initServiceTree(context, config, logger, handleWorkspaceReady);
       if (workspaceFileWatcher) {
         workspaceFileWatcher.dispose();
       }
@@ -243,9 +243,7 @@ async function loadWorkspaceRoot(workspacePath: string): Promise<boolean> {
       );
 
       if (workspaceRoot === workspacePath) {
-        window.showInformationMessage(
-          `Acidic Workspace successfully initialized from ${workspaceRoot}`
-        );
+        writeStatusBarMessage("Acidic Workspace successfully initialized");
       } else {
         window.showWarningMessage(
           `Acidic Workspace could not use "${workspacePath}" as a workspace root directory; however, parent folder "${workspaceRoot}" was successfully use to initialize.`
@@ -256,8 +254,6 @@ async function loadWorkspaceRoot(workspacePath: string): Promise<boolean> {
     } else {
       window.showErrorMessage(`Unable to load workspace from ${workspacePath}`);
     }
-
-    commands.executeCommand("setContext", "hasWorkspaceRoot", hasWorkspaceRoot);
   } catch (error) {
     console.error(error);
     window.showErrorMessage(