feat: add shiki support for .tsx and .jsx and add graceful fallba…

…ck (text display) (#335)

clients/web/src/components/sources/source-pane.tsx

@@ -5,7 +5,7 @@ import { useParams, useSearchParams } from "@solidjs/router";
 import { decodeFileName, guessContentType } from "~/lib/sources/file-entries";
 import CodeView from "./code-view";
 import { Loader } from "~/components/loader";
-import { HighlighterLang } from "~/lib/code-highlight";
+import type { SupportedLanguages } from "~/lib/code-highlight";
 import { Heading } from "../heading";
 import { useLocation } from "@solidjs/router";
 
@@ -15,7 +15,7 @@ export function SourcePane() {
   const [searchParams] = useSearchParams();
 
   const contentType = () => guessContentType(filePath());
-  const sizeHint = () => parseInt(searchParams.sizeHint);
+  const sizeHint = () => parseInt(searchParams.sizeHint ?? "0");
 
   const location = useLocation();
 
@@ -46,7 +46,7 @@ export function SourcePane() {
                     resolvedContentType().replace(
                       "code/",
                       "",
-                    ) as HighlighterLang
+                    ) as SupportedLanguages
                   }
                   highlightedLine={highlightedLine()}
                 />

clients/web/src/lib/code-highlight.ts

@@ -1,32 +1,40 @@
 import {
   BundledTheme,
   CodeToHastOptions,
-  Highlighter,
   getHighlighter,
+  Highlighter,
 } from "shiki";
 import { transformerCompactLineOptions } from "@shikijs/transformers";
 import { type BundledLanguage } from "shiki/langs";
 import { SourcesClient } from "~/lib/proto/sources.client";
 import { getEntryBytes } from "~/lib/sources/file-entries";
 
 type HighlighterCodeParamsForSources = Readonly<
-  [string, Highlighter, BundledLanguage, number?]
+  [string, Highlighter, SupportedLanguages, number?]
 >;
 
 type HighlighterCodeParamsForSpans = Readonly<{
-  lang: BundledLanguage;
+  lang: SupportedLanguages;
   highlighter: Highlighter;
 }>;
 
+export type AvailableLanguages = BundledLanguage | "text";
+
 export const SUPPORTED_LANGS = [
   "js",
+  "jsx",
+  "ts",
+  "tsx",
+  "typescript",
+  "javascript",
   "rust",
   "toml",
   "html",
   "json",
   "md",
   "yaml",
-] satisfies BundledLanguage[];
+  "text",
+] satisfies AvailableLanguages[];
 
 export type SupportedLanguages = (typeof SUPPORTED_LANGS)[number];
 
@@ -39,12 +47,15 @@ export function bytesToText(bytes: Uint8Array | undefined): string {
 export function textToHtml(
   text: string,
   highlighter: Highlighter | undefined,
-  lang: BundledLanguage,
+  lang: SupportedLanguages,
   highlightedLine?: number,
 ) {
   if (!highlighter) return "";
 
-  const options: CodeToHastOptions<BundledLanguage, BundledTheme> = {
+  if (!SUPPORTED_LANGS.find((supportedLang) => supportedLang === lang))
+    lang = "text";
+
+  const options: CodeToHastOptions<AvailableLanguages, BundledTheme> = {
     lang,
     theme: "material-theme-ocean",
   };
@@ -92,7 +103,10 @@ export function getHighlightedCode(
   if ("lang" in arg) {
     const { lang } = arg;
     return (code: string) =>
-      highlighter.codeToHtml(code, { lang, theme: "material-theme-ocean" });
+      highlighter.codeToHtml(code, {
+        lang,
+        theme: "material-theme-ocean",
+      });
   }
 
   const [text, highlighter, lang, highlightedLine] = arg;

clients/web/src/lib/sources/file-entries.ts

@@ -114,16 +114,17 @@ export function guessContentType(path: string): string | undefined {
 
   return {
     rs: "code/rust",
+    txt: "code/txt",
     toml: "code/toml",
     lock: "code/toml",
-    js: "code/javascript",
-    jsx: "code/javascript",
-    ts: "code/typescript",
-    tsx: "code/typescript",
+    js: "code/js",
+    jsx: "code/jsx",
+    ts: "code/ts",
+    tsx: "code/tsx",
     json: "code/json",
     html: "code/html",
     css: "code/css",
-    md: "code/markdown",
+    md: "code/md",
     yml: "code/yaml",
     yaml: "code/yaml",