enhance structure

Author: rphlmr

vscode-extension/.gitignore

@@ -1 +1 @@
-visualizer
+apps/visualizer

vscode-extension/build.ts

@@ -29,13 +29,17 @@ async function main() {
   console.log("Building drizzle-lab...");
   execSync("npm run -w drizzle-lab build-all", { cwd: "..", stdio: "inherit" });
 
+  const visualizerDir = "apps/visualizer";
   // copy bundled drizzle-lab visualizer to dist
-  if (fs.existsSync("visualizer")) {
-    fs.rmSync("visualizer", { recursive: true, force: true });
+  if (fs.existsSync(visualizerDir)) {
+    fs.rmSync(visualizerDir, { recursive: true, force: true });
   }
-  fs.mkdirSync("visualizer");
-  fs.cpSync("../apps/cli/dist/visualizer", "visualizer", { recursive: true });
-  fs.copyFileSync("../apps/cli/dist/package.json", "visualizer/package.json");
+  fs.mkdirSync(visualizerDir, { recursive: true });
+  fs.cpSync("../apps/cli/dist/visualizer", visualizerDir, { recursive: true });
+  fs.copyFileSync(
+    "../apps/cli/dist/package.json",
+    `${visualizerDir}/package.json`,
+  );
 
   const ctx = await esbuild.context({
     entryPoints: ["src/extension.ts"],

vscode-extension/src/extension.ts

@@ -1,11 +1,11 @@
 import * as vscode from "vscode";
 
-import visualizerPkg from "../visualizer/package.json";
+import visualizerPkg from "../apps/visualizer/package.json";
 import { setExtensionContext } from "./context";
-import { OpenVisualizerCodeLens } from "./modules/open-visualizer/codelens";
-import { OpenVisualizerCommand } from "./modules/open-visualizer/command";
-import { StopVisualizerCommand } from "./modules/stop-visualizer/command";
-import { stop } from "./server";
+import { OpenVisualizerCodeLens } from "./modules/visualizer/open-visualizer/codelens";
+import { OpenVisualizerCommand } from "./modules/visualizer/open-visualizer/command";
+import { StopVisualizerCommand } from "./modules/visualizer/stop-visualizer/command";
+import { stopVisualizer } from "./modules/visualizer/server";
 import { outputChannel } from "./utils";
 
 export function activate(context: vscode.ExtensionContext) {
@@ -22,7 +22,7 @@ export function activate(context: vscode.ExtensionContext) {
 
 // This method is called when your extension is deactivated
 export function deactivate() {
-  stop();
+  stopVisualizer();
 }
 
 function checkNodeVersion() {

vscode-extension/src/modules/open-visualizer/codelens.ts vscode-extension/src/modules/visualizer/open-visualizer/codelens.ts

@@ -1,8 +1,8 @@
 import * as vscode from "vscode";
 
-import { getDrizzleVisualizerPanel } from "../../panel";
-import { start } from "../../server";
-import { outputChannel, render } from "../../utils";
+import { createDrizzleVisualizerPanel } from "../panel";
+import { startVisualizer } from "../server";
+import { outputChannel, render } from "../../../utils";
 
 export const command = "drizzle.visualizer:open";
 
@@ -23,8 +23,8 @@ export const OpenVisualizerCommand = vscode.commands.registerCommand(
     }
 
     try {
-      const panel = getDrizzleVisualizerPanel();
-      const { port } = await start(configPath);
+      const panel = createDrizzleVisualizerPanel();
+      const { port } = await startVisualizer(configPath);
 
       panel.webview.html = render(`
 				<iframe 
@@ -37,9 +37,7 @@ export const OpenVisualizerCommand = vscode.commands.registerCommand(
 
       panel.reveal();
     } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : String(error);
-      const msg = `${OutputKey} Failed to start Drizzle Visualizer: ${errorMessage}`;
+      const msg = `${OutputKey} Failed to start Drizzle Visualizer: ${error instanceof Error ? error.message : String(error)}`;
 
       vscode.window.showErrorMessage(msg);
       outputChannel.appendLine(msg);

vscode-extension/src/modules/open-visualizer/command.ts vscode-extension/src/modules/visualizer/open-visualizer/command.ts

@@ -0,0 +1,32 @@
+import * as vscode from "vscode";
+
+import { createPanel, render } from "../../utils";
+
+/* Local state */
+let $panel: vscode.WebviewPanel | undefined = undefined;
+
+export function createDrizzleVisualizerPanel() {
+  if ($panel) {
+    return $panel;
+  }
+
+  $panel = createPanel({
+    id: "DrizzleVisualizer",
+    title: "Drizzle Visualizer",
+    onDispose: () => {
+      $panel = undefined;
+    },
+  });
+
+  $panel.webview.html = render(`
+		<p style="display: flex; justify-content: center; align-items: center; height: 100%; margin: 0; font-size: 1.5rem; font-weight: bold;">
+      Starting Drizzle Visualizer...
+    </p>
+  `);
+
+  return $panel;
+}
+
+export function closeDrizzleVisualizerPanel() {
+  $panel?.dispose();
+}

vscode-extension/src/modules/visualizer/panel.ts

@@ -1,8 +1,8 @@
 import { ChildProcessWithoutNullStreams, spawn } from "node:child_process";
 import path from "node:path";
 
-import { getProjectWorkingDir } from "./context";
-import { outputChannel } from "./utils";
+import { getProjectWorkingDir } from "../../context";
+import { outputChannel } from "../../utils";
 
 /* Local state */
 let $port: string | undefined = undefined;
@@ -13,14 +13,16 @@ let $configPath: string | undefined = undefined;
 /* Constants */
 const OutputKey = "[App]";
 const extensionCwd = path.dirname(__dirname);
-const binPath = path.join(extensionCwd, "visualizer", "server", "index.mjs");
+const appsCwd = path.join(extensionCwd, "apps");
+const binPath = path.join(appsCwd, "visualizer", "server", "index.mjs");
 
 interface ServerStartResult {
   port: string;
 }
 
-export async function start(configPath: string) {
+export async function startVisualizer(configPath: string) {
   outputChannel.appendLine(`${OutputKey} extension cwd: ${extensionCwd}`);
+  outputChannel.appendLine(`${OutputKey} apps cwd: ${appsCwd}`);
   outputChannel.appendLine(
     `${OutputKey} Using drizzle visualizer from: ${binPath}`,
   );
@@ -31,7 +33,7 @@ export async function start(configPath: string) {
       outputChannel.appendLine(
         `${OutputKey} Config path changed. Killing server and restarting on port ${$port} with new config path: ${configPath}`,
       );
-      stop();
+      stopVisualizer();
     }
 
     if (!$port) {
@@ -66,7 +68,7 @@ export async function start(configPath: string) {
       stdio: "pipe",
       detached: true,
       shell: false,
-      cwd: extensionCwd,
+      cwd: appsCwd,
       env: {
         ...process.env,
         ...drizzleEnvs,
@@ -92,12 +94,17 @@ export async function start(configPath: string) {
 
     // error from the server
     $app.stderr.on("data", (error) => {
-      return reject(error);
+      outputChannel.appendLine(`${OutputKey} [stderr] ${String(error)}`);
+      reject(error);
+    });
+
+    $app.on("error", (error) => {
+      console.error("app error", error);
     });
   });
 }
 
-export function stop() {
+export function stopVisualizer() {
   outputChannel.appendLine(
     `${OutputKey} Stopping Drizzle Visualizer server...`,
   );

vscode-extension/src/server.ts vscode-extension/src/modules/visualizer/server.ts

@@ -1,14 +1,14 @@
 import * as vscode from "vscode";
 
-import { closeDrizzleVisualizerPanel } from "../../panel";
-import { stop } from "../../server";
+import { closeDrizzleVisualizerPanel } from "../panel";
+import { stopVisualizer } from "../server";
 
 export const command = "drizzle.visualizer:stop";
 
 export const StopVisualizerCommand = vscode.commands.registerCommand(
   command,
   () => {
-    stop();
+    stopVisualizer();
     closeDrizzleVisualizerPanel();
   },
 );

vscode-extension/src/modules/stop-visualizer/command.ts vscode-extension/src/modules/visualizer/stop-visualizer/command.ts

@@ -1,9 +1,41 @@
 import path from "node:path";
 import * as vscode from "vscode";
+import { getExtensionContext } from "./context";
 
 export const outputChannel =
   vscode.window.createOutputChannel("Drizzle Visualizer");
 
+export function createPanel({
+  id,
+  title,
+  onDispose = () => {},
+}: {
+  id: string;
+  title: string;
+  onDispose?: () => void;
+}) {
+  const context = getExtensionContext();
+
+  const panel = vscode.window.createWebviewPanel(
+    id,
+    title,
+    vscode.ViewColumn.One,
+    {
+      enableScripts: true,
+      retainContextWhenHidden: true,
+    },
+  );
+
+  panel.iconPath = {
+    light: vscode.Uri.joinPath(context.extensionUri, "media", "drizzle.png"),
+    dark: vscode.Uri.joinPath(context.extensionUri, "media", "drizzle.png"),
+  };
+
+  panel.onDidDispose(onDispose);
+
+  return panel;
+}
+
 export function render(children: string) {
   return `
   <!DOCTYPE html>