chore: display schema error in the diagram viewport

Author: BOCOVO

.vscode/launch.json

@@ -27,7 +27,7 @@
       "outFiles": [
         "${workspaceFolder}/packages/dbml-vs-code-extension/dist/extension/*.js"
       ],
-      "preLaunchTask": "yarn: build"
+      "preLaunchTask": "npm: build"
     },
     {
       "name": "Preview Prisma Extension",
@@ -39,7 +39,7 @@
       "outFiles": [
         "${workspaceFolder}/packages/prisma-vs-code-extension/dist/extension/*.js"
       ],
-      "preLaunchTask": "yarn: build:prisma"
+      "preLaunchTask": "npm: build:prisma"
     }
   ]
 }

.vscode/tasks.json

@@ -45,8 +45,6 @@
         "cwd": "${workspaceFolder}/packages/dbml-vs-code-extension"
       }
     },
-
-    // prisma
     {
       "type": "npm",
       "script": "build:prisma",
@@ -58,6 +56,15 @@
       "options": {
         "cwd": "${workspaceFolder}/packages/prisma-vs-code-extension"
       }
+    },
+    {
+      "type": "npm",
+      "script": "build",
+      "path": "packages/dbml-vs-code-extension",
+      "group": "build",
+      "problemMatcher": [],
+      "label": "npm: build - packages/dbml-vs-code-extension",
+      "detail": "npx vite build && yarn run generate:css"
     }
   ]
 }

.yarn/install-state.gz

@@ -12,5 +12,6 @@ export interface WebviewPostMessage {
 export interface SetSchemaCommandPayload {
   type: string;
   payload: JSONTableSchema;
+  message?: string;
   key: string;
 }

packages/extension-shared/extension/types/webviewCommand.ts

@@ -176,7 +176,15 @@ export class MainPanel {
       MainPanel.diagnosticCollection.clear();
     } catch (error) {
       console.error(JSON.stringify(error));
+
       if (error instanceof DiagnosticError) {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        this.currentPanel?._panel.webview.postMessage({
+          type: "setSchemaErrorMessage",
+          message: `${error.message}\n Line : ${error.location.start.line}:${error.location.start.column}`,
+          key: document.uri.toString(),
+        });
+
         MainPanel.diagnosticCollection.set(document.uri, [
           new Diagnostic(
             new Range(

packages/extension-shared/extension/views/panel.ts

@@ -2,6 +2,7 @@ import DiagramViewer from "json-table-schema-visualizer/src/components/DiagramVi
 import { useCreateTheme } from "json-table-schema-visualizer/src/hooks/theme";
 import ThemeProvider from "json-table-schema-visualizer/src/providers/ThemeProvider";
 import NoSchemaMessage from "json-table-schema-visualizer/src/components/Messages/NoSchemaMessage";
+import ErrorMessage from "json-table-schema-visualizer/src/components/Messages/ErrorMessage";
 import { type Theme } from "json-table-schema-visualizer/src/types/theme";
 import ScrollDirectionProvider from "json-table-schema-visualizer/src/providers/ScrollDirectionProvider";
 
@@ -16,7 +17,11 @@ const App = () => {
   const { setTheme, theme, themeColors } = useCreateTheme(
     window.EXTENSION_DEFAULT_CONFIG?.theme,
   );
-  const { schema, key } = useSchema();
+  const { schema, key, schemaErrorMessage } = useSchema();
+
+  if (schemaErrorMessage !== null && schema === null) {
+    return <ErrorMessage message={schemaErrorMessage} />;
+  }
 
   if (schema === null) {
     return <NoSchemaMessage />;

packages/extension-shared/src/App.tsx

@@ -9,12 +9,26 @@ import { type SetSchemaCommandPayload } from "../../extension/types/webviewComma
 export const useSchema = (): {
   schema: JSONTableSchema | null;
   key: string | null;
+  schemaErrorMessage: string | null;
 } => {
+  const [schemaErrorMessage, setSchemaErrorMessage] = useState<string | null>(
+    null,
+  );
   const [schema, setSchema] = useState<JSONTableSchema | null>(null);
   const [schemaKey, setSchemaKey] = useState<string | null>(null);
 
   const updater = (e: MessageEvent): void => {
     const message = e.data as SetSchemaCommandPayload;
+
+    if (
+      message.type === "setSchemaErrorMessage" &&
+      typeof message.message === "string"
+    ) {
+      setSchemaErrorMessage(message.message);
+
+      return;
+    }
+
     if (
       !(message.type === "setSchema" && typeof message.payload === "object")
     ) {
@@ -35,6 +49,7 @@ export const useSchema = (): {
     }
 
     setSchema(message.payload);
+    setSchemaErrorMessage(null);
   };
 
   useEffect(() => {
@@ -47,5 +62,5 @@ export const useSchema = (): {
     };
   }, []);
 
-  return { schema, key: schemaKey };
+  return { schema, key: schemaKey, schemaErrorMessage };
 };

packages/extension-shared/src/hooks/schema.ts

@@ -0,0 +1,14 @@
+import MessageWrapper from "./MessageWrapper";
+
+interface ErrorMessageProps {
+  message: string;
+}
+const ErrorMessage = ({ message }: ErrorMessageProps) => {
+  return (
+    <MessageWrapper>
+      <p>{message}</p>
+    </MessageWrapper>
+  );
+};
+
+export default ErrorMessage;