refactor(output, scribbler)!: use the jsx-runtime transform (#199)

tstyche · May 16, 2024 · b210cca · b210cca
1 parent 839f313
commit b210cca
Show file tree

Hide file tree

Showing 17 changed files with 64 additions and 78 deletions.
diff --git a/cspell.config.json b/cspell.config.json
@@ -16,5 +16,15 @@
   "ignorePaths": ["**/__snapshots__/**/*"],
   "language": "en-US",
   "useGitignore": true,
-  "words": ["codacy", "biomejs", "lcovonly", "packagephobia", "tsserverlibrary", "tstyche", "typecheck", "typetests"]
+  "words": [
+    "biomejs",
+    "codacy",
+    "jsxs",
+    "lcovonly",
+    "packagephobia",
+    "tsserverlibrary",
+    "tstyche",
+    "typecheck",
+    "typetests"
+  ]
 }
diff --git a/source/output/CodeSpanText.tsx b/source/output/CodeSpanText.tsx
@@ -1,7 +1,6 @@
 import type { DiagnosticOrigin } from "#diagnostic";
 import { Path } from "#path";
-// biome-ignore lint/correctness/noUnusedImports: TODO false positive
-import { Color, Line, Scribbler, Text } from "#scribbler";
+import { Color, Line, Text } from "#scribbler";
 
 export class CodeSpanText implements JSX.ElementClass {
   constructor(readonly props: DiagnosticOrigin) {}

diff --git a/source/output/addsPackageStepText.tsx b/source/output/addsPackageStepText.tsx
@@ -1,5 +1,4 @@
-// biome-ignore lint/correctness/noUnusedImports: TODO false positive
-import { Color, Line, Scribbler, Text } from "#scribbler";
+import { Color, Line, Text } from "#scribbler";
 
 export function addsPackageStepText(compilerVersion: string, installationPath: string): JSX.Element {
   return (

diff --git a/source/output/describeNameText.tsx b/source/output/describeNameText.tsx
@@ -1,5 +1,4 @@
-// biome-ignore lint/correctness/noUnusedImports: TODO false positive
-import { Line, Scribbler } from "#scribbler";
+import { Line } from "#scribbler";
 
 export function describeNameText(name: string, indent = 0): JSX.Element {
   return <Line indent={indent + 1}>{name}</Line>;

diff --git a/source/output/diagnosticText.tsx b/source/output/diagnosticText.tsx
@@ -1,6 +1,5 @@
 import { type Diagnostic, DiagnosticCategory } from "#diagnostic";
-// biome-ignore lint/correctness/noUnusedImports: TODO false positive
-import { Color, Line, Scribbler, Text } from "#scribbler";
+import { Color, Line, Text } from "#scribbler";
 import { CodeSpanText } from "./CodeSpanText.js";
 
 class DiagnosticText implements JSX.ElementClass {

diff --git a/source/output/fileStatusText.tsx b/source/output/fileStatusText.tsx
@@ -1,8 +1,7 @@
 import type { TestFile } from "#file";
 import { Path } from "#path";
 import { type FileResultStatus, ResultStatus } from "#result";
-// biome-ignore lint/correctness/noUnusedImports: TODO false positive
-import { Color, Line, Scribbler, Text } from "#scribbler";
+import { Color, Line, Text } from "#scribbler";
 
 class FileNameText implements JSX.ElementClass {
   constructor(readonly props: { filePath: string }) {}

diff --git a/source/output/fileViewText.tsx b/source/output/fileViewText.tsx
@@ -1,5 +1,4 @@
-// biome-ignore lint/correctness/noUnusedImports: TODO false positive
-import { Line, Scribbler, Text } from "#scribbler";
+import { Line, Text } from "#scribbler";
 
 export function fileViewText(lines: Array<JSX.Element>, addEmptyFinalLine: boolean): JSX.Element {
   return (

diff --git a/source/output/formattedText.tsx b/source/output/formattedText.tsx
@@ -1,5 +1,4 @@
-// biome-ignore lint/correctness/noUnusedImports: TODO false positive
-import { Line, Scribbler } from "#scribbler";
+import { Line } from "#scribbler";
 
 export class JsonText implements JSX.ElementClass {
   constructor(readonly props: { input: Array<string> | Record<string, unknown> }) {}

diff --git a/source/output/helpText.tsx b/source/output/helpText.tsx
@@ -1,6 +1,5 @@
 import { OptionBrand, type OptionDefinition } from "#config";
-// biome-ignore lint/correctness/noUnusedImports: TODO false positive
-import { Color, Line, Scribbler, Text } from "#scribbler";
+import { Color, Line, Text } from "#scribbler";
 
 const usageExamples: Array<[commandText: string, descriptionText: string]> = [
   ["tstyche", "Run all tests."],
@@ -96,7 +95,7 @@ class CommandLineOptionNameText implements JSX.ElementClass {
 class CommandLineOptionHintText implements JSX.ElementClass {
   constructor(readonly props: { definition: OptionDefinition }) {}
 
-  render(): JSX.Element | null {
+  render(): JSX.Element {
     if (this.props.definition.brand === OptionBrand.List) {
       return (
         <Text>

diff --git a/source/output/summaryText.tsx b/source/output/summaryText.tsx
@@ -1,6 +1,5 @@
 import type { ResultCount } from "#result";
-// biome-ignore lint/correctness/noUnusedImports: TODO false positive
-import { Color, Line, Scribbler, Text } from "#scribbler";
+import { Color, Line, Text } from "#scribbler";
 
 class RowText implements JSX.ElementClass {
   constructor(readonly props: { label: string; text: JSX.Element }) {}

diff --git a/source/output/testNameText.tsx b/source/output/testNameText.tsx
@@ -1,5 +1,4 @@
-// biome-ignore lint/correctness/noUnusedImports: TODO false positive
-import { Color, Line, Scribbler, Text } from "#scribbler";
+import { Color, Line, Text } from "#scribbler";
 
 class StatusText implements JSX.ElementClass {
   constructor(readonly props: { status: "fail" | "pass" | "skip" | "todo" }) {}

diff --git a/source/output/usesCompilerStepText.tsx b/source/output/usesCompilerStepText.tsx
@@ -1,6 +1,5 @@
 import { Path } from "#path";
-// biome-ignore lint/correctness/noUnusedImports: TODO false positive
-import { Color, Line, Scribbler, Text } from "#scribbler";
+import { Color, Line, Text } from "#scribbler";
 
 class ProjectNameText implements JSX.ElementClass {
   constructor(readonly props: { filePath: string }) {}

diff --git a/source/output/watchModeUsageText.tsx b/source/output/watchModeUsageText.tsx
@@ -1,5 +1,4 @@
-// biome-ignore lint/correctness/noUnusedImports: TODO false positive
-import { Color, Line, Scribbler, Text } from "#scribbler";
+import { Color, Line, Text } from "#scribbler";
 
 export function watchModeUsageText(): JSX.Element {
   const usageText = Object.entries({ a: "run all tests", x: "exit" }).map(([key, action]) => {

diff --git a/source/scribbler/Line.tsx b/source/scribbler/Line.tsx
@@ -1,5 +1,3 @@
-// biome-ignore lint/correctness/noUnusedImports: TODO false positive
-import { Scribbler } from "./Scribbler.js";
 import { Text } from "./Text.js";
 import type { Color } from "./enums.js";
 

diff --git a/source/scribbler/Scribbler.ts b/source/scribbler/Scribbler.ts
@@ -9,15 +9,14 @@ declare global {
   namespace JSX {
     interface Element {
       $$typeof: symbol;
-      children: ElementChildren;
-      props: Record<string, unknown> | null;
+      props: Record<string, unknown>;
       type: ComponentConstructor | string;
     }
     interface ElementAttributesProperty {
-      props: Record<string, unknown> | null;
+      props: Record<string, unknown>;
     }
     interface ElementClass {
-      render: () => JSX.Element | null;
+      render: () => JSX.Element;
     }
     interface ElementChildrenAttribute {
       children: ElementChildren;
@@ -54,19 +53,6 @@ export class Scribbler {
     this.#noColor = options?.noColor ?? false;
   }
 
-  static createElement(
-    type: ComponentConstructor | string,
-    props: Record<string, unknown> | null,
-    ...children: Array<ElementChildren>
-  ): JSX.Element {
-    return {
-      $$typeof: Symbol.for("tstyche:scribbler"),
-      children: children.length > 1 ? children : children[0],
-      props,
-      type,
-    };
-  }
-
   #escapeSequence(attributes: string | Array<string>): string {
     return ["\u001B[", Array.isArray(attributes) ? attributes.join(";") : attributes, "m"].join("");
   }
@@ -75,43 +61,38 @@ export class Scribbler {
     return lines.replace(this.#notEmptyLineRegex, this.#indentStep.repeat(level));
   }
 
-  render(element: JSX.Element | null): string {
-    if (element != null) {
-      if (typeof element.type === "function") {
-        const instance = new element.type({
-          ...element.props,
-          children: element.children,
-        });
-
-        return this.render(instance.render());
-      }
+  render(element: JSX.Element): string {
+    if (typeof element.type === "function") {
+      const instance = new element.type({ ...element.props });
 
-      if (element.type === "ansi" && !this.#noColor) {
-        const flags =
-          typeof element.props?.["escapes"] === "string" || Array.isArray(element.props?.["escapes"])
-            ? element.props["escapes"]
-            : undefined;
+      return this.render(instance.render());
+    }
 
-        if (flags != null) {
-          return this.#escapeSequence(flags);
-        }
-      }
+    if (element.type === "ansi" && !this.#noColor) {
+      const flags =
+        typeof element.props?.["escapes"] === "string" || Array.isArray(element.props?.["escapes"])
+          ? element.props["escapes"]
+          : undefined;
 
-      if (element.type === "newLine") {
-        return this.#newLine;
+      if (flags != null) {
+        return this.#escapeSequence(flags);
       }
+    }
 
-      if (element.type === "text") {
-        const indentLevel = typeof element.props?.["indent"] === "number" ? element.props["indent"] : 0;
+    if (element.type === "newLine") {
+      return this.#newLine;
+    }
 
-        let text = this.#visitElementChildren(element.children);
+    if (element.type === "text") {
+      const indentLevel = typeof element.props?.["indent"] === "number" ? element.props["indent"] : 0;
 
-        if (indentLevel > 0) {
-          text = this.#indentEachLine(text, indentLevel);
-        }
+      let text = this.#visitElementChildren(element.props["children"] as ElementChildren);
 
-        return text;
+      if (indentLevel > 0) {
+        text = this.#indentEachLine(text, indentLevel);
       }
+
+      return text;
     }
 
     return "";
@@ -151,3 +132,13 @@ export class Scribbler {
     return "";
   }
 }
+
+export function jsx(type: ComponentConstructor | string, props: Record<string, unknown>): JSX.Element {
+  return {
+    $$typeof: Symbol.for("tstyche:scribbler"),
+    props,
+    type,
+  };
+}
+
+export { jsx as jsxs };
diff --git a/source/scribbler/Text.tsx b/source/scribbler/Text.tsx
@@ -1,5 +1,3 @@
-// biome-ignore lint/correctness/noUnusedImports: TODO false positive
-import { Scribbler } from "./Scribbler.js";
 import { Color } from "./enums.js";
 
 interface TextProps {

diff --git a/source/tsconfig.json b/source/tsconfig.json
@@ -4,11 +4,12 @@
     "module": "node16",
     "moduleResolution": "node16",
     "paths": {
-      "#*": ["./*/index.ts"]
+      "#*": ["./*/index.ts"],
+      "#scribbler/jsx-runtime": ["./scribbler/Scribbler.ts"]
     },
 
-    "jsx": "react",
-    "jsxFactory": "Scribbler.createElement",
+    "jsx": "react-jsx",
+    "jsxImportSource": "#scribbler",
 
     "skipLibCheck": false
   },