🥅 Handle errors for tokenizing process

src/domain/errors.ts

@@ -0,0 +1,9 @@
+export class LexicalError extends Error {
+  constructor(message: string, public position: number) {
+    super(message);
+  }
+
+  public toString() {
+    return `${this.message} at index ${this.position}`;
+  }
+}

src/domain/tokenize.ts

@@ -1,4 +1,5 @@
 import { Result, err, ok } from "neverthrow";
+import { LexicalError } from "./errors";
 
 type TokenType =
   | "NUMBER"
@@ -48,7 +49,10 @@ export interface Token {
   endIndex: number;
 }
 
-export function tokenize(code: string, startIndex = 0): Result<Token[], Error> {
+export function tokenize(
+  code: string,
+  startIndex = 0
+): Result<Token[], LexicalError> {
   if (code.length === 0) {
     return ok([{ type: "EOF", value: "", startIndex, endIndex: startIndex }]);
   }
@@ -306,7 +310,9 @@ export function tokenize(code: string, startIndex = 0): Result<Token[], Error> {
         newToken = null;
         restIndex += 1;
       } else {
-        return err(new Error("Unexpected character: " + char));
+        return err(
+          new LexicalError(`Unexpected character "${char}"`, startIndex)
+        );
       }
   }
 

src/web/components/CodeViewer.tsx

@@ -8,18 +8,23 @@ export function CodeViewer(
     class?: string;
   }>
 ) {
-  let previousBreakpoint = 0;
   let spans = new Array<{ value: string; id: number | null }>();
-  for (const token of props.tokens) {
-    spans.push({
-      value: props.source.slice(previousBreakpoint, token.startIndex),
-      id: null,
-    });
-    spans.push({
-      value: props.source.slice(token.startIndex, token.endIndex),
-      id: token.startIndex,
-    });
-    previousBreakpoint = token.endIndex;
+
+  if (props.tokens.length === 0) {
+    spans.push({ value: props.source, id: null });
+  } else {
+    let previousBreakpoint = 0;
+    for (const token of props.tokens) {
+      spans.push({
+        value: props.source.slice(previousBreakpoint, token.startIndex),
+        id: null,
+      });
+      spans.push({
+        value: props.source.slice(token.startIndex, token.endIndex),
+        id: token.startIndex,
+      });
+      previousBreakpoint = token.endIndex;
+    }
   }
 
   return (

src/web/components/TokensViewer.tsx

@@ -1,18 +1,28 @@
 import type { PropsWithChildren } from "@kitajs/html";
 
 import { TokenViewer } from "./TokenViewer";
-import type { TokenWithId } from "../utils";
+import { codeCss, type TokenWithId } from "../utils";
+import type { Result } from "neverthrow";
+import type { LexicalError } from "../../domain/errors";
 
 export function TokensViewer(
   props: PropsWithChildren<{
     source: string;
-    tokens: TokenWithId[];
+    tokens: Result<TokenWithId[], LexicalError>;
     class?: string;
   }>
 ) {
+  if (props.tokens.isErr()) {
+    console.error(props.tokens.error);
+
+    return (
+      <p class={codeCss + " text-red-400"}>{props.tokens.error.toString()}</p>
+    );
+  }
+
   return (
     <div class="flex-grow flex flex-col space-y-4 overflow-auto">
-      {props.tokens.map((token) => (
+      {props.tokens.value.map((token) => (
         <TokenViewer
           source={props.source.slice(token.startIndex, token.endIndex)}
           token={token}

src/web/pages/ASTViewer.tsx

@@ -2,13 +2,20 @@ import { type Ast } from "../../domain/parse";
 import { codeCss, type TokenWithId } from "../utils";
 import { type PropsWithChildren } from "@kitajs/html";
 import { NodeViewer } from "../components/NodeViewer";
+import type { Result } from "neverthrow";
 
 export function ASTViewer(
-  props: PropsWithChildren<{ parsed: Ast<TokenWithId>; class?: string }>
+  props: PropsWithChildren<{
+    parsed: Result<Ast<TokenWithId>, Error>;
+    class?: string;
+  }>
 ) {
+  if (props.parsed.isErr())
+    return <div class={codeCss + " overflow-auto grow " + props.class}></div>;
+
   return (
     <div class={codeCss + " overflow-auto grow " + props.class}>
-      <NodeViewer node={props.parsed} />
+      <NodeViewer node={props.parsed.value} />
     </div>
   );
 }

src/web/pages/parsed.tsx

@@ -9,6 +9,7 @@ import { randomUUID } from "crypto";
 import { Link } from "../components/Button";
 import { Nav } from "../components/Nav";
 import { ASTViewer } from "./ASTViewer";
+import type { TokenWithId } from "../utils";
 
 export default new Elysia().get(
   "/parsed",
@@ -17,14 +18,17 @@ export default new Elysia().get(
     // https://stackoverflow.com/a/16587536
     const source = decodeURIComponent(req.query.source.replace(/\+/g, "%20"));
 
-    const tokens = tokenize(source)
-      ._unsafeUnwrap()
-      .map((token) => ({
-        ...token,
-        id: randomUUID(),
-      }));
+    const tokens = tokenize(source).map((tokens) =>
+      tokens.map(
+        (token) =>
+          ({
+            ...token,
+            id: randomUUID(),
+          } as TokenWithId)
+      )
+    );
 
-    const parsed = parse(tokens);
+    const parsed = tokens.map(parse);
 
     return (
       <App class="grid gap-6 h-auto lg:grid-rows-layout lg:grid-cols-3 auto-rows-auto">
@@ -38,7 +42,7 @@ export default new Elysia().get(
         </Nav>
         <CodeViewer
           source={source}
-          tokens={tokens}
+          tokens={tokens.unwrapOr([])}
           class="lg:row-start-2 lg:col-start-1"
         />