chore(ext): added theme toggling features

Author: BOCOVO

packages/dbml-vs-code-extension/extension/index.ts

@@ -1,13 +1,21 @@
-import { commands, ExtensionContext } from 'vscode';
-import { MainPanel } from './views/panel';
+import { commands, ExtensionContext } from "vscode";
+import { MainPanel } from "./views/panel";
+import { EXTENSION_CONFIG_SESSION } from "./constants";
 
 export function activate(context: ExtensionContext) {
   // Add command to the extension context
   context.subscriptions.push(
-    commands.registerCommand('dbml-erd-visualizer.previewDiagrams', async () => {
-      MainPanel.render(context);
-    }),
+    commands.registerCommand(
+      "dbml-erd-visualizer.previewDiagrams",
+      async () => {
+        lunchExtension(context);
+      },
+    ),
   );
 }
 
+const lunchExtension = (context: ExtensionContext) => {
+  MainPanel.render(context, EXTENSION_CONFIG_SESSION);
+};
+
 export function deactivate() {}

packages/dbml-vs-code-extension/extension/types/webviewCommand.ts

@@ -0,0 +1,8 @@
+export enum WebviewCommand {
+  SET_THEME_PREFERENCES = "SET_THEME_PREFERENCES",
+}
+
+export interface WebviewPostMessage {
+  command: WebviewCommand;
+  message: string;
+}

packages/dbml-vs-code-extension/extension/views/helper.ts

@@ -1,4 +1,13 @@
-import { ExtensionContext, Webview } from "vscode";
+import {
+  Disposable,
+  ExtensionContext,
+  Webview,
+} from "vscode";
+import { WebviewCommand, WebviewPostMessage } from "@/extension/types/webviewCommand";
+import { WEBVIEW_HTML_MARKER_FOR_DEFAULT_CONFIG } from "../constants";
+import { DefaultPageConfig } from "../types/defaultPageConfig";
+import { ExtensionConfig } from "../helper/extensionConfigs";
+import { Theme } from "json-table-schema-visualizer/src/types/theme";
 
 export class WebviewHelper {
   public static setupHtml(
@@ -25,5 +34,39 @@ export class WebviewHelper {
       `,
     );
   }
+
+  public static handleWebviewMessage(
+    command: string,
+    message: string,
+    extensionConfig: ExtensionConfig,
+  ): void {
+    switch (command) {
+      case WebviewCommand.SET_THEME_PREFERENCES:
+        extensionConfig.setTheme(message as Theme);
+        return;
+      default:
+        return;
+    }
+  }
+
+  public static setupWebviewHooks(
+    webview: Webview,
+    extensionConfig: ExtensionConfig,
+    disposables: Disposable[],
+  ) {
+    webview.onDidReceiveMessage(
+      (message: WebviewPostMessage) => {
+        const command = message.command;
+        const textMessage = message.message;
+        console.log("Received message", command, textMessage);
+        WebviewHelper.handleWebviewMessage(
+          command,
+          textMessage,
+          extensionConfig,
+        );
+      },
+      undefined,
+      disposables,
+    );
   }
 }

packages/dbml-vs-code-extension/extension/views/panel.ts

@@ -14,21 +14,39 @@ import {
   WEB_VIEW_NAME,
   WEB_VIEW_TITLE,
 } from "../constants";
+import { ExtensionConfig } from "../helper/extensionConfigs";
 
 export class MainPanel {
   public static currentPanel: MainPanel | undefined;
   private readonly _panel: WebviewPanel;
+  public static extensionConfig: ExtensionConfig;
   private _disposables: Disposable[] = [];
   // to add debouncing on diagram update after a file change
   private _lastTimeout: NodeJS.Timeout | null = null;
 
-  private constructor(panel: WebviewPanel, context: ExtensionContext) {
+  private constructor(
+    panel: WebviewPanel,
+    context: ExtensionContext,
+    extensionConfigSession: string,
+  ) {
     this._panel = panel;
-
     this._panel.onDidDispose(() => this.dispose(), null, this._disposables);
-    this._panel.webview.html = WebviewHelper.setupHtml(
+
+    const extensionConfig = new ExtensionConfig(extensionConfigSession);
+    const defaultPageConfig = extensionConfig.getDefaultPageConfig();
+
+    const html = WebviewHelper.setupHtml(
       this._panel.webview,
       context,
+      defaultPageConfig,
+    );
+
+    this._panel.webview.html = html;
+
+    WebviewHelper.setupWebviewHooks(
+      this._panel.webview,
+      extensionConfig,
+      this._disposables,
     );
   }
 
@@ -51,7 +69,10 @@ export class MainPanel {
     MainPanel.currentPanel?._disposables.push(disposable);
   }
 
-  public static render(context: ExtensionContext) {
+  public static render(
+    context: ExtensionContext,
+    extensionConfigSession: string,
+  ) {
     const editor = window.activeTextEditor;
     if (!editor) {
       window.showErrorMessage(
@@ -77,7 +98,11 @@ export class MainPanel {
         },
       );
 
-      MainPanel.currentPanel = new MainPanel(panel, context);
+      MainPanel.currentPanel = new MainPanel(
+        panel,
+        context,
+        extensionConfigSession,
+      );
       MainPanel.registerDiagramUpdaterOnfFileChange();
     }
 

packages/dbml-vs-code-extension/index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" crossorigin href="/assets/index.css" />
     <title>Document</title>
   </head>
   <body>
@@ -13,5 +14,11 @@
     <script type="text/javascript">
       // <%DEFAULT-SCRIPT%>
     </script>
+
+    <script>
+      // I add this because calling acquireVsCodeApi from the don't work
+      // i getting error that the parent is not defined on window object
+      var vsCodeWebviewAPI = acquireVsCodeApi();
+    </script>
   </body>
 </html>

packages/dbml-vs-code-extension/package.json

@@ -56,8 +56,9 @@
     "pretest": "yarn run compile-tests && yarn run build && yarn run lint",
     "lint": "eslint src --ext ts",
     "test": "vscode-test",
-    "build": "vite build",
-    "preview": "vite preview"
+    "build": "vite build && yarn run generate:css",
+    "preview": "vite preview",
+    "generate:css": "cd ../json-table-schema-visualizer && npx tailwindcss -i ./src/styles/index.css >  ../dbml-vs-code-extension/dist/webview/assets/index.css --minify"
   },
   "devDependencies": {
     "@tomjs/vite-plugin-vscode": "^2.2.0",

packages/dbml-vs-code-extension/src/App.tsx

@@ -1,10 +1,19 @@
 import { useEffect, useState } from "react";
 import { JSONTableSchema } from "shared/types/tableSchema";
 import DiagramViewer from "json-table-schema-visualizer/src/components/DiagramViewer/DiagramViewer";
-import { defaultThemeConfig } from "json-table-schema-visualizer/src/constants/theme";
+import { useCreateTheme } from "json-table-schema-visualizer/src/hooks/theme";
+import ThemeProvider from "json-table-schema-visualizer/src/providers/ThemeProvider";
+import { Theme } from "json-table-schema-visualizer/src/types/theme";
+import {
+  WebviewCommand,
+  WebviewPostMessage,
+} from "@/extension/types/webviewCommand";
 
 const App = () => {
   const [schema, setSchema] = useState<JSONTableSchema | null>(null);
+  const { setTheme, theme, themeColors } = useCreateTheme(
+    window.EXTENSION_DEFAULT_CONFIG?.theme,
+  );
 
   useEffect(() => {
     window.addEventListener("message", (e: MessageEvent) => {
@@ -19,7 +28,32 @@ const App = () => {
     return "Loading...";
   }
 
-  return <DiagramViewer {...schema} theme={defaultThemeConfig} />;
+  // update the preference in the extension settings
+  const saveThemePreference = (theme: Theme) => {
+    setTheme(theme);
+    const updateThemeMessage: WebviewPostMessage = {
+      command: WebviewCommand.SET_THEME_PREFERENCES,
+      message: theme,
+    };
+
+    if (!window.vsCodeWebviewAPI) {
+      console.error(
+        "can't send message to extension due vsCodeWebviewAPI global variable is not defined",
+      );
+    } else {
+      window.vsCodeWebviewAPI?.postMessage(updateThemeMessage);
+    }
+  };
+
+  return (
+    <ThemeProvider
+      theme={theme}
+      setTheme={saveThemePreference}
+      themeColors={themeColors}
+    >
+      <DiagramViewer {...schema} />
+    </ThemeProvider>
+  );
 };
 
 export default App;

packages/dbml-vs-code-extension/src/globals.d.ts

@@ -0,0 +1,14 @@
+import { DefaultPageConfig } from "../extension/types/defaultPageConfig";
+
+export interface WebviewApi<StateType> {
+  postMessage(message: unknown): void;
+  getState(): StateType | undefined;
+  setState<T extends StateType | undefined>(newState: T): T;
+}
+
+declare global {
+  interface Window {
+    EXTENSION_DEFAULT_CONFIG?: DefaultPageConfig;
+    vsCodeWebviewAPI: WebviewApi;
+  }
+}

packages/dbml-vs-code-extension/tsconfig.json

@@ -6,7 +6,7 @@
     "lib": ["ES2022", "DOM"],
     "sourceMap": true,
     "rootDir": "./",
-    "baseUrl": "./src",
+    "baseUrl": "./",
     "strict": true,
     "jsx": "react-jsx",
     "paths": {