refactor(ext): create package for shared extension code

Author: BOCOVO

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

@@ -1,5 +1,3 @@
 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%>";

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

@@ -1,8 +1,15 @@
-import { commands, ExtensionContext } from "vscode";
-import { MainPanel } from "@/extension/views/panel";
-import { EXTENSION_CONFIG_SESSION } from "@/extension/constants";
+import { commands, type ExtensionContext } from "vscode";
 
-export function activate(context: ExtensionContext) {
+import { parseDBMLToJSON } from "dbml-to-json-table-schema";
+
+import { MainPanel } from "extension-shared/extension/views/panel";
+import {
+  EXTENSION_CONFIG_SESSION,
+  WEB_VIEW_NAME,
+  WEB_VIEW_TITLE,
+} from "@/extension/constants";
+
+export function activate(context: ExtensionContext): void {
   // Add command to the extension context
   context.subscriptions.push(
     commands.registerCommand(
@@ -14,8 +21,18 @@ export function activate(context: ExtensionContext) {
   );
 }
 
-const lunchExtension = (context: ExtensionContext) => {
-  MainPanel.render(context, EXTENSION_CONFIG_SESSION);
+const lunchExtension = (context: ExtensionContext): void => {
+  MainPanel.render({
+    context,
+    extensionConfigSession: EXTENSION_CONFIG_SESSION,
+    webviewConfig: {
+      name: WEB_VIEW_NAME,
+      title: WEB_VIEW_TITLE,
+    },
+    parser: parseDBMLToJSON,
+    fileExt: "dbml",
+  });
 };
 
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function deactivate() {}

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

@@ -65,7 +65,6 @@
   },
   "devDependencies": {
     "@tomjs/vite-plugin-vscode": "^2.2.0",
-    "@tomjs/vscode-extension-webview": "^1.2.0",
     "@types/mocha": "^10.0.6",
     "@types/node": "18.x",
     "@types/react": "^18.2.75",

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

@@ -1,16 +1,3 @@
-import { createRoot } from "react-dom/client";
-import "@tomjs/vscode-extension-webview/client";
-import { tableCoordsStore } from "json-table-schema-visualizer/src/stores/tableCoords";
-import App from "./App";
+import { createExtensionApp } from "extension-shared/src/index";
 
-// save current table position when exiting the page
-window.addEventListener("unload", () => {
-  tableCoordsStore.saveCurrentStore();
-});
-
-const View = () => {
-  return <App />;
-};
-
-const root = createRoot(document.getElementById("app")!);
-root.render(<View />);
+createExtensionApp();

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

@@ -0,0 +1,2 @@
+export const DIAGRAM_UPDATER_DEBOUNCE_TIME = 500;
+export const WEBVIEW_HTML_MARKER_FOR_DEFAULT_CONFIG = "// <%DEFAULT-SCRIPT%>";

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

@@ -1,21 +1,26 @@
 import { Theme } from "json-table-schema-visualizer/src/types/theme";
-import { workspace, WorkspaceConfiguration } from "vscode";
-import { ConfigKeys } from "@/extension/types/configKeys";
-import { DefaultPageConfig } from "@/extension/types/defaultPageConfig";
+import { workspace, type WorkspaceConfiguration } from "vscode";
+
+import { ConfigKeys } from "../types/configKeys";
+import { type DefaultPageConfig } from "../types/defaultPageConfig";
 
 export class ExtensionConfig {
-  private config: WorkspaceConfiguration;
+  private readonly config: WorkspaceConfiguration;
 
   constructor(configSession: string) {
     const extensionConfigs = workspace.getConfiguration(configSession);
     this.config = extensionConfigs;
   }
 
-  setTheme(theme: Theme) {
-    this.config.update(ConfigKeys.preferredTheme, theme);
+  async setTheme(theme: Theme): Promise<void> {
+    try {
+      await this.config.update(ConfigKeys.preferredTheme, theme);
+    } catch (error) {
+      console.error("Failed to set theme preference", error);
+    }
   }
 
-  getPreferredTheme() {
+  getPreferredTheme(): Theme {
     const preferredTheme = this.config.get(ConfigKeys.preferredTheme);
     if (Theme.light === preferredTheme) {
       return preferredTheme;

packages/extension-shared/extension/constants/index.ts

@@ -0,0 +1,5 @@
+import { type Theme } from "json-table-schema-visualizer/src/types/theme";
+
+export interface DefaultPageConfig {
+  theme: Theme;
+}