Refactor Webview Diagnostics Rendering (#31)

Author: rcosta358

client/src/webview/renderers/diagnostics/errors.ts

@@ -1,4 +1,4 @@
-import { renderHeader, renderLocation, renderSection } from "./utils";
+import { renderHeader, renderLocation, renderSection, renderCustomSection } from "./utils";
 import {
     ArgumentMismatchError,
     InvalidRefinementError,
@@ -37,49 +37,35 @@ export function getErrorsView(errors: LJError[], showAll: boolean, currentFile:
     `;
 }
 
+const errorContentRenderers: Partial<Record<LJError['type'], (error: LJError) => string>> = {
+    'refinement-error': (e: RefinementError) => /*html*/`
+        ${renderSection('Expected', e.expected.value)}
+        ${renderCustomSection('Found', renderDerivationNode(e, e.found))}
+    `,
+    'state-refinement-error': (e: StateRefinementError) => /*html*/`
+        ${renderSection('Expected', e.expected)}
+        ${renderSection('Found', e.found)}
+    `,
+    'invalid-refinement-error': (e: InvalidRefinementError) => /*html*/`
+        ${renderSection('Refinement', e.refinement)}
+    `,
+    'not-found-error': (e: NotFoundError) => /*html*/`
+        ${renderSection(e.kind, e.name)}
+    `,
+    'state-conflict-error': (e: StateConflictError) => /*html*/`
+        ${renderSection('State', e.state)}
+    `,
+    'syntax-error': (e: SyntaxError) => /*html*/`
+        ${renderSection('Refinement', e.refinement)}
+    `,
+    'argument-mismatch-error': (e: ArgumentMismatchError) => /*html*/`
+        ${renderSection('Refinement', e.refinement)}
+    `
+};
+
 export function renderError(error: LJError): string {
     const header = renderHeader(error);
+    const content = errorContentRenderers[error.type]?.(error) ?? '';
     const location = renderLocation(error);
-    switch (error.type) {
-        case 'refinement-error': {
-            const e = error as RefinementError;
-            return /*html*/`
-                ${header}
-                ${renderSection('Expected', `<pre>${e.expected.value}</pre>`)}
-                ${renderSection('Found', renderDerivationNode(e, e.found))}
-                ${location}
-            `;
-        }
-        case 'state-refinement-error': {
-            const e = error as StateRefinementError;
-            return `${header}${renderSection('Expected', `<pre>${e.expected}</pre>`)}${renderSection('Found', `<pre>${e.found}</pre>`)}${location}`;
-        }
-        case 'invalid-refinement-error': {
-            const e = error as InvalidRefinementError;
-            return `${header}${renderSection('Refinement', `<pre>"${e.refinement}"</pre>`)}${location}`;
-        }
-        case 'not-found-error': {
-            const e = error as NotFoundError;
-            const content = `<p>${e.kind} <b>${e.name}</b> not found</p>`;
-            return `<h3>${error.title}</h3><div class="diagnostic-header">${content}</div>${location}`;
-        }
-        case 'state-conflict-error': {
-            const e = error as StateConflictError;
-            return `${header}${renderSection('State', `<pre>${e.state}</pre>`)}${location}`;
-        }
-        case 'syntax-error': {
-            const e = error as SyntaxError;
-            return `${header}${renderSection('Refinement', `<pre>"${e.refinement}"</pre>`)}${location}`;
-        }
-        case 'argument-mismatch-error': {
-            const e = error as ArgumentMismatchError;
-            return `${header}${renderSection('Refinement', `<pre>"${e.refinement}"</pre>`)}${location}`;
-        }
-        default:
-            return `${header}${location}`;
-    }
-}
-function renderToggleButton(showAll: boolean) {
-    throw new Error("Function not implemented.");
+    return /*html*/`${header}${content}${location}`;
 }
-

client/src/webview/renderers/diagnostics/utils.ts

@@ -1,8 +1,11 @@
 import { LJDiagnostic } from "../../../types";
 
-export const renderSection = (title: string, body: string): string =>
+export const renderCustomSection = (title: string, body: string): string =>
     `<div class="section"><strong>${title}:</strong><div>${body}</div></div>`;
 
+export const renderSection = (title: string, body: string): string =>
+    renderCustomSection(title, `<pre>${body}</pre>`);
+
 export const renderHeader = (diagnostic: LJDiagnostic): string => {
     return `<h3>${diagnostic.title}</h3><div class="diagnostic-header"><p>${diagnostic.message}</p></div>`;
 };
@@ -13,5 +16,5 @@ export const renderLocation = (diagnostic: LJDiagnostic): string => {
     const column = diagnostic.position?.colStart ?? 0;
     const simpleFile = diagnostic.file.split('/').pop() || diagnostic.file;
     const link = `<a href="#" class="link location-link" data-file="${diagnostic.file}" data-line="${line}" data-column="${column}">${simpleFile}:${line}</a>`;
-    return renderSection("Location", `<pre>${link}</pre>`);
+    return renderCustomSection("Location", `<pre>${link}</pre>`);
 };

client/src/webview/renderers/diagnostics/warnings.ts

@@ -1,5 +1,5 @@
 import { ExternalClassNotFoundWarning, ExternalMethodNotFoundWarning, LJWarning } from "../../../types";
-import { renderHeader, renderLocation, renderSection } from "./utils";
+import { renderHeader, renderLocation, renderCustomSection, renderSection } from "./utils";
 
 export function getWarningsView(warnings: LJWarning[], showAllDiagnostics: boolean, currentFile: string | undefined): string {
     return /*html*/`
@@ -17,20 +17,19 @@ export function getWarningsView(warnings: LJWarning[], showAllDiagnostics: boole
     `;
 }
 
+const warningContentRenderers: Partial<Record<LJWarning['type'], (warning: LJWarning) => string>> = {
+    'external-class-not-found-warning': (w: ExternalClassNotFoundWarning) => /*html*/`
+        ${renderSection('Class Name', w.className)}
+    `,
+    'external-method-not-found-warning': (w: ExternalMethodNotFoundWarning) => /*html*/`
+        ${renderSection('Method', w.methodName)}
+        ${w.overloads.length > 0 ? renderSection('Overloads', w.overloads.join('\n')) : ''}
+    `
+};
+
 export function renderWarning(warning: LJWarning): string {
     const header = renderHeader(warning);
+    const content = warningContentRenderers[warning.type]?.(warning) ?? '';
     const location = renderLocation(warning);
-    switch (warning.type) {
-        case 'external-class-not-found-warning': {
-            const e = warning as ExternalClassNotFoundWarning;
-            return `${header}${renderSection('Class Name', `<pre>${e.className}</pre>`)}${location}`;
-        }
-        case 'external-method-not-found-warning': {
-            const e = warning as ExternalMethodNotFoundWarning;
-            return `${header}${renderSection('Method', `<pre>${e.methodName}</pre>`)}${e.overloads.length > 0 ? renderSection("Overloads", `<pre>${e.overloads.join("\n")}</pre>`) : ""}${location}`;
-        }
-        case 'custom-warning': {
-            return `${header}${location}`;
-        }
-    }
+    return /*html*/`${header}${content}${location}`;
 }