feat: Remove badly designed error handling code

Author: trillium

packages/test-case-component/src/generateHtml.ts

@@ -3,7 +3,7 @@ import type { BundledLanguage } from "shiki";
 import type { StepNameType, DataFixture } from "./types";
 import type { ExtendedTestCaseSnapshot } from "./types";
 
-import { renderClipboard, renderError } from "./renderHtml";
+import { renderClipboard } from "./renderHtml";
 import { getDecorations } from "./helpers/decorations";
 
 /**
@@ -44,38 +44,23 @@ function createHtmlGenerator(data: DataFixture) {
       console.error(`Error in ${stepName} ${raw.command.spokenForm}`);
       return "Error";
     }
-    const decorations = await getDecorations({ snapshot: state, command });
+    const extendedState = { ...state, stepName };
+    const decorations = await getDecorations({ snapshot: extendedState, command });
     const { documentContents } = state;
     const htmlArray: string[] = [];
     let codeBody;
-    const errorLevels = [
-      "excludes thatMarks sourceMarks selectionRanges ideFlashes",
-      "excludes thatMarks sourceMarks selectionRanges",
-      "excludes thatMarks sourceMarks",
-      "excludes thatMarks",
-      "success",
-    ];
-    let errorLevel = errorLevels.length - 1;
-    for (let i = decorations.length - 1; i >= 0; i--) {
-      const fallbackDecoration = decorations.slice(0, i).flat();
-      errorLevel = i;
-      try {
-        const marker = await createHighlighter();
-        const options = {
-          theme: "css-variables",
-          lang,
-          decorations: fallbackDecoration
-        };
-        codeBody = marker.codeToHtml(documentContents, options);
-        htmlArray.push(codeBody);
-        break;
-      } catch (error) {
-        console.warn(`"Failed with decorations level ${i}:"`, command);
-        console.warn(fallbackDecoration, error);
-      }
-    }
-    if (!codeBody) {
-      console.error("All fallback levels failed. Unable to generate code body.");
+    // Simplified: just try rendering once with all decorations
+    try {
+      const marker = await createHighlighter();
+      const options = {
+        theme: "css-variables",
+        lang,
+        decorations,
+      };
+      codeBody = marker.codeToHtml(documentContents, options);
+      htmlArray.push(codeBody);
+    } catch (error) {
+      console.error("Failed to generate code body:", error);
       codeBody = "";
     }
 
@@ -84,11 +69,6 @@ function createHtmlGenerator(data: DataFixture) {
       htmlArray.push(clipboardRendered);
     }
 
-    const errorRendered = renderError(errorLevel, errorLevels);
-    if (errorRendered !== "") {
-      htmlArray.push(errorRendered);
-    }
-
     return { html: htmlArray.join(""), data: [decorations] };
   }
 

packages/test-case-component/src/helpers/decorations/createDecorations.ts

@@ -12,7 +12,9 @@ import { getIdeFlashDecorations } from "./getIdeFlashDecorations";
 import { getSelections } from "./getSelections";
 import { getSourceMarks } from "./getSourceMarks";
 import { getThatMarks } from "./getThatMarks";
+
 import type { StepNameType } from "../../types";
+import { mergeOverlappingDecorations } from "./mergeOverlappingDecorations";
 
 export function createDecorations(
     options: {
@@ -29,8 +31,8 @@ export function createDecorations(
             thatMark?: TargetPlainObject[]
         }
     } = {}
-): DecorationItem[][] {
-    const { marks, ide, lines, selections, thatMark, sourceMark, stepName } = options
+): DecorationItem[] {
+    const { marks, ide, lines, selections, thatMark, sourceMark } = options
 
     const decorations: DecorationItem[][] = [];
 
@@ -50,7 +52,7 @@ export function createDecorations(
     } else {
         decorations.push([])
     }
-
-    return decorations
+    const merged = mergeOverlappingDecorations(decorations.flat());
+    return merged;
 }
 

packages/test-case-component/src/helpers/decorations/getDecorations.ts

@@ -16,8 +16,8 @@ export async function getDecorations({
 }: {
     snapshot: ExtendedTestCaseSnapshot;
     command: Command;
-}): Promise<DecorationItem[][]> {
-    const { messages, flashes, highlights, finalStateMarkHelpers } = snapshot;
+}): Promise<DecorationItem[]> {
+    const { messages, flashes, highlights } = snapshot;
     const potentialMarks = snapshot.marks || {};
     const lines = snapshot.documentContents.split("\n");
     // Use StepNameType for stepName, and provide a fallback if undefined