chore(ext): added extension configs

BOCOVO · BOCOVO · commit bc67988341d1 · 2024-04-27T22:25:39.000+01:00
diff --git a/packages/dbml-vs-code-extension/extension/constants/index.ts b/packages/dbml-vs-code-extension/extension/constants/index.ts
@@ -1,3 +1,5 @@
 export const WEB_VIEW_NAME = "dblm-preview-webview";
 export const WEB_VIEW_TITLE = "DBLM Diagram Preview";
 export const DIAGRAM_UPDATER_DEBOUNCE_TIME = 500;
+export const EXTENSION_CONFIG_SESSION = "dbmlERDPreviewer";
+export const WEBVIEW_HTML_MARKER_FOR_DEFAULT_CONFIG = "// <%DEFAULT-SCRIPT%>";
diff --git a/packages/dbml-vs-code-extension/extension/helper/extensionConfigs.ts b/packages/dbml-vs-code-extension/extension/helper/extensionConfigs.ts
@@ -0,0 +1,32 @@
+import { Theme } from "json-table-schema-visualizer/src/types/theme";
+import { workspace, WorkspaceConfiguration } from "vscode";
+import { ConfigKeys } from "../types/configKeys";
+import { DefaultPageConfig } from "../types/defaultPageConfig";
+
+export class ExtensionConfig {
+  private config: WorkspaceConfiguration;
+
+  constructor(configSession: string) {
+    const extensionConfigs = workspace.getConfiguration(configSession);
+    this.config = extensionConfigs;
+  }
+
+  setTheme(theme: Theme) {
+    this.config.update(ConfigKeys.preferredTheme, theme);
+  }
+
+  getPreferredTheme() {
+    const preferredTheme = this.config.get(ConfigKeys.preferredTheme);
+    if (Theme.light === preferredTheme) {
+      return preferredTheme;
+    }
+
+    return Theme.dark;
+  }
+
+  getDefaultPageConfig(): DefaultPageConfig {
+    const theme = this.getPreferredTheme();
+
+    return { theme };
+  }
+}
diff --git a/packages/dbml-vs-code-extension/extension/types/configKeys.ts b/packages/dbml-vs-code-extension/extension/types/configKeys.ts
@@ -0,0 +1,3 @@
+export enum ConfigKeys {
+  preferredTheme = "preferredTheme",
+}
diff --git a/packages/dbml-vs-code-extension/extension/types/defaultPageConfig.ts b/packages/dbml-vs-code-extension/extension/types/defaultPageConfig.ts
@@ -0,0 +1,5 @@
+import { Theme } from "json-table-schema-visualizer/src/types/theme";
+
+export interface DefaultPageConfig {
+  theme: Theme;
+}
diff --git a/packages/dbml-vs-code-extension/extension/views/helper.ts b/packages/dbml-vs-code-extension/extension/views/helper.ts
@@ -1,10 +1,29 @@
 import { ExtensionContext, Webview } from "vscode";
 
 export class WebviewHelper {
-  public static setupHtml(webview: Webview, context: ExtensionContext) {
-    return process.env.VITE_DEV_SERVER_URL
+  public static setupHtml(
+    webview: Webview,
+    context: ExtensionContext,
+    defaultConfig: DefaultPageConfig,
+  ): string {
+    const html = process.env.VITE_DEV_SERVER_URL
       ? /* @ts-ignore */
         /* @ts-ignore */ __getWebviewHtml__(process.env.VITE_DEV_SERVER_URL)
       : __getWebviewHtml__(webview, context);
+
+    return WebviewHelper.injectDefaultConfig(html, defaultConfig);
+  }
+
+  public static injectDefaultConfig(
+    html: string,
+    configs: DefaultPageConfig,
+  ): string {
+    return html.replace(
+      WEBVIEW_HTML_MARKER_FOR_DEFAULT_CONFIG,
+      `
+       window.EXTENSION_DEFAULT_CONFIG = ${JSON.stringify(configs)};
+      `,
+    );
+  }
   }
 }
diff --git a/packages/dbml-vs-code-extension/index.html b/packages/dbml-vs-code-extension/index.html
@@ -9,5 +9,9 @@
   <body>
     <div id="app"></div>
     <script type="module" src="/src/index.tsx"></script>
+
+    <script type="text/javascript">
+      // <%DEFAULT-SCRIPT%>
+    </script>
   </body>
 </html>
diff --git a/packages/dbml-vs-code-extension/package.json b/packages/dbml-vs-code-extension/package.json
@@ -30,6 +30,23 @@
           "group": "navigation"
         }
       ]
+    },
+    "configuration": {
+      "title": "DBML Entity Relationship Diagram",
+      "properties": {
+        "dbmlERDPreviewer.preferredTheme": {
+          "type": "string",
+          "default": "dark",
+          "enum": [
+            "dark",
+            "light"
+          ],
+          "enumDescriptions": [
+            "To use dark mode theme colors",
+            "To use light mode theme colors"
+          ]
+        }
+      }
     }
   },
   "scripts": {

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export enum ConfigKeys {`
	`2`	`+ preferredTheme = "preferredTheme",`
	`3`	`+}`