new tests and bundling changes

src/components/blog/PostBodyClient.tsx

@@ -9,87 +9,7 @@ export interface PostBodyClientProps {
 }
 
 async function loadHighlightJS(): Promise<HLJSApi> {
-  const [
-    hljsModule,
-    javascript,
-    typescript,
-    python,
-    rust,
-    c,
-    cpp,
-    csharp,
-    ocaml,
-    lua,
-    swift,
-    bash,
-    css,
-    xml, // handles HTML
-    go,
-    glsl,
-    json,
-    markdown,
-    yaml,
-    sql,
-    diff,
-    toml
-  ] = await Promise.all([
-    import("highlight.js/lib/core"),
-    import("highlight.js/lib/languages/javascript"),
-    import("highlight.js/lib/languages/typescript"),
-    import("highlight.js/lib/languages/python"),
-    import("highlight.js/lib/languages/rust"),
-    import("highlight.js/lib/languages/c"),
-    import("highlight.js/lib/languages/cpp"),
-    import("highlight.js/lib/languages/csharp"),
-    import("highlight.js/lib/languages/ocaml"),
-    import("highlight.js/lib/languages/lua"),
-    import("highlight.js/lib/languages/swift"),
-    import("highlight.js/lib/languages/bash"),
-    import("highlight.js/lib/languages/css"),
-    import("highlight.js/lib/languages/xml"),
-    import("highlight.js/lib/languages/go"),
-    import("highlight.js/lib/languages/glsl"),
-    import("highlight.js/lib/languages/json"),
-    import("highlight.js/lib/languages/markdown"),
-    import("highlight.js/lib/languages/yaml"),
-    import("highlight.js/lib/languages/sql"),
-    import("highlight.js/lib/languages/diff"),
-    import("highlight.js/lib/languages/ini"), // handles TOML
-    import("highlight.js/styles/github-dark.css")
-  ]);
-
-  const hljs = hljsModule.default;
-
-  hljs.registerLanguage("javascript", javascript.default);
-  hljs.registerLanguage("typescript", typescript.default);
-  hljs.registerLanguage("python", python.default);
-  hljs.registerLanguage("rust", rust.default);
-  hljs.registerLanguage("c", c.default);
-  hljs.registerLanguage("cpp", cpp.default);
-  hljs.registerLanguage("csharp", csharp.default);
-  hljs.registerLanguage("ocaml", ocaml.default);
-  hljs.registerLanguage("lua", lua.default);
-  hljs.registerLanguage("swift", swift.default);
-  hljs.registerLanguage("bash", bash.default);
-  hljs.registerLanguage("sh", bash.default); // alias
-  hljs.registerLanguage("css", css.default);
-  hljs.registerLanguage("html", xml.default);
-  hljs.registerLanguage("xml", xml.default);
-  hljs.registerLanguage("go", go.default);
-  hljs.registerLanguage("glsl", glsl.default);
-  hljs.registerLanguage("json", json.default);
-  hljs.registerLanguage("markdown", markdown.default);
-  hljs.registerLanguage("yaml", yaml.default);
-  hljs.registerLanguage("yml", yaml.default); // alias
-  hljs.registerLanguage("sql", sql.default);
-  hljs.registerLanguage("diff", diff.default);
-  hljs.registerLanguage("toml", toml.default);
-
-  hljs.registerLanguage("js", javascript.default);
-  hljs.registerLanguage("ts", typescript.default);
-  hljs.registerLanguage("jsx", javascript.default);
-  hljs.registerLanguage("tsx", typescript.default);
-
+  const hljs = (await import("~/lib/highlight-bundle")).default;
   return hljs;
 }
 

src/components/blog/TextEditor.tsx

@@ -24,7 +24,7 @@ import Details from "@tiptap/extension-details";
 import DetailsSummary from "@tiptap/extension-details-summary";
 import DetailsContent from "@tiptap/extension-details-content";
 import { Node } from "@tiptap/core";
-import { createLowlight, common } from "lowlight";
+import { createConfiguredLowlight } from "~/lib/lowlight-bundle";
 import { Mermaid } from "./extensions/Mermaid";
 import { ConditionalBlock } from "./extensions/ConditionalBlock";
 import { ConditionalInline } from "./extensions/ConditionalInline";
@@ -32,69 +32,9 @@ import TextAlign from "@tiptap/extension-text-align";
 import Superscript from "@tiptap/extension-superscript";
 import Subscript from "@tiptap/extension-subscript";
 import type { default as MermaidType } from "mermaid";
-import css from "highlight.js/lib/languages/css";
-import js from "highlight.js/lib/languages/javascript";
-import ts from "highlight.js/lib/languages/typescript";
-import ocaml from "highlight.js/lib/languages/ocaml";
-import rust from "highlight.js/lib/languages/rust";
-import python from "highlight.js/lib/languages/python";
-import java from "highlight.js/lib/languages/java";
-import go from "highlight.js/lib/languages/go";
-import c from "highlight.js/lib/languages/c";
-import cpp from "highlight.js/lib/languages/cpp";
-import csharp from "highlight.js/lib/languages/csharp";
-import sql from "highlight.js/lib/languages/sql";
-import bash from "highlight.js/lib/languages/bash";
-import json from "highlight.js/lib/languages/json";
-import yaml from "highlight.js/lib/languages/yaml";
-import markdown from "highlight.js/lib/languages/markdown";
-import xml from "highlight.js/lib/languages/xml";
-import php from "highlight.js/lib/languages/php";
-import ruby from "highlight.js/lib/languages/ruby";
-import swift from "highlight.js/lib/languages/swift";
-import kotlin from "highlight.js/lib/languages/kotlin";
-import dockerfile from "highlight.js/lib/languages/dockerfile";
 import { BREAKPOINTS, MOBILE_CONFIG, TEXT_EDITOR_CONFIG } from "~/config";
 
-const lowlight = createLowlight(common);
-
-lowlight.register("css", css);
-lowlight.register("js", js);
-lowlight.register("javascript", js);
-lowlight.register("ts", ts);
-lowlight.register("typescript", ts);
-lowlight.register("ocaml", ocaml);
-lowlight.register("rust", rust);
-
-lowlight.register("python", python);
-lowlight.register("py", python);
-lowlight.register("java", java);
-lowlight.register("go", go);
-lowlight.register("golang", go);
-lowlight.register("c", c);
-lowlight.register("cpp", cpp);
-lowlight.register("c++", cpp);
-lowlight.register("csharp", csharp);
-lowlight.register("cs", csharp);
-lowlight.register("sql", sql);
-lowlight.register("bash", bash);
-lowlight.register("shell", bash);
-lowlight.register("sh", bash);
-lowlight.register("json", json);
-lowlight.register("yaml", yaml);
-lowlight.register("yml", yaml);
-lowlight.register("markdown", markdown);
-lowlight.register("md", markdown);
-lowlight.register("xml", xml);
-lowlight.register("html", xml);
-lowlight.register("php", php);
-lowlight.register("ruby", ruby);
-lowlight.register("rb", ruby);
-lowlight.register("swift", swift);
-lowlight.register("kotlin", kotlin);
-lowlight.register("kt", kotlin);
-lowlight.register("dockerfile", dockerfile);
-lowlight.register("docker", dockerfile);
+const lowlight = createConfiguredLowlight();
 
 const AVAILABLE_LANGUAGES = [
   { value: null, label: "Plain Text" },

src/lib/highlight-bundle.ts

@@ -0,0 +1,72 @@
+import hljs from "highlight.js/lib/core";
+import javascript from "highlight.js/lib/languages/javascript";
+import typescript from "highlight.js/lib/languages/typescript";
+import python from "highlight.js/lib/languages/python";
+import rust from "highlight.js/lib/languages/rust";
+import c from "highlight.js/lib/languages/c";
+import cpp from "highlight.js/lib/languages/cpp";
+import csharp from "highlight.js/lib/languages/csharp";
+import ocaml from "highlight.js/lib/languages/ocaml";
+import lua from "highlight.js/lib/languages/lua";
+import swift from "highlight.js/lib/languages/swift";
+import bash from "highlight.js/lib/languages/bash";
+import css from "highlight.js/lib/languages/css";
+import xml from "highlight.js/lib/languages/xml";
+import go from "highlight.js/lib/languages/go";
+import glsl from "highlight.js/lib/languages/glsl";
+import json from "highlight.js/lib/languages/json";
+import markdown from "highlight.js/lib/languages/markdown";
+import yaml from "highlight.js/lib/languages/yaml";
+import sql from "highlight.js/lib/languages/sql";
+import diff from "highlight.js/lib/languages/diff";
+import ini from "highlight.js/lib/languages/ini";
+import java from "highlight.js/lib/languages/java";
+import php from "highlight.js/lib/languages/php";
+import ruby from "highlight.js/lib/languages/ruby";
+import kotlin from "highlight.js/lib/languages/kotlin";
+import dockerfile from "highlight.js/lib/languages/dockerfile";
+import "highlight.js/styles/github-dark.css";
+
+hljs.registerLanguage("javascript", javascript);
+hljs.registerLanguage("js", javascript);
+hljs.registerLanguage("typescript", typescript);
+hljs.registerLanguage("ts", typescript);
+hljs.registerLanguage("python", python);
+hljs.registerLanguage("py", python);
+hljs.registerLanguage("rust", rust);
+hljs.registerLanguage("c", c);
+hljs.registerLanguage("cpp", cpp);
+hljs.registerLanguage("c++", cpp);
+hljs.registerLanguage("csharp", csharp);
+hljs.registerLanguage("cs", csharp);
+hljs.registerLanguage("ocaml", ocaml);
+hljs.registerLanguage("lua", lua);
+hljs.registerLanguage("swift", swift);
+hljs.registerLanguage("bash", bash);
+hljs.registerLanguage("sh", bash);
+hljs.registerLanguage("shell", bash);
+hljs.registerLanguage("css", css);
+hljs.registerLanguage("html", xml);
+hljs.registerLanguage("xml", xml);
+hljs.registerLanguage("go", go);
+hljs.registerLanguage("golang", go);
+hljs.registerLanguage("glsl", glsl);
+hljs.registerLanguage("json", json);
+hljs.registerLanguage("markdown", markdown);
+hljs.registerLanguage("md", markdown);
+hljs.registerLanguage("yaml", yaml);
+hljs.registerLanguage("yml", yaml);
+hljs.registerLanguage("sql", sql);
+hljs.registerLanguage("diff", diff);
+hljs.registerLanguage("toml", ini);
+hljs.registerLanguage("ini", ini);
+hljs.registerLanguage("java", java);
+hljs.registerLanguage("php", php);
+hljs.registerLanguage("ruby", ruby);
+hljs.registerLanguage("rb", ruby);
+hljs.registerLanguage("kotlin", kotlin);
+hljs.registerLanguage("kt", kotlin);
+hljs.registerLanguage("dockerfile", dockerfile);
+hljs.registerLanguage("docker", dockerfile);
+
+export default hljs;

src/lib/lowlight-bundle.ts

@@ -0,0 +1,66 @@
+import { createLowlight } from "lowlight";
+import css from "highlight.js/lib/languages/css";
+import js from "highlight.js/lib/languages/javascript";
+import ts from "highlight.js/lib/languages/typescript";
+import ocaml from "highlight.js/lib/languages/ocaml";
+import rust from "highlight.js/lib/languages/rust";
+import python from "highlight.js/lib/languages/python";
+import java from "highlight.js/lib/languages/java";
+import go from "highlight.js/lib/languages/go";
+import c from "highlight.js/lib/languages/c";
+import cpp from "highlight.js/lib/languages/cpp";
+import csharp from "highlight.js/lib/languages/csharp";
+import sql from "highlight.js/lib/languages/sql";
+import bash from "highlight.js/lib/languages/bash";
+import json from "highlight.js/lib/languages/json";
+import yaml from "highlight.js/lib/languages/yaml";
+import markdown from "highlight.js/lib/languages/markdown";
+import xml from "highlight.js/lib/languages/xml";
+import php from "highlight.js/lib/languages/php";
+import ruby from "highlight.js/lib/languages/ruby";
+import swift from "highlight.js/lib/languages/swift";
+import kotlin from "highlight.js/lib/languages/kotlin";
+import dockerfile from "highlight.js/lib/languages/dockerfile";
+
+export function createConfiguredLowlight() {
+  const lowlight = createLowlight();
+
+  lowlight.register("css", css);
+  lowlight.register("js", js);
+  lowlight.register("javascript", js);
+  lowlight.register("ts", ts);
+  lowlight.register("typescript", ts);
+  lowlight.register("ocaml", ocaml);
+  lowlight.register("rust", rust);
+  lowlight.register("python", python);
+  lowlight.register("py", python);
+  lowlight.register("java", java);
+  lowlight.register("go", go);
+  lowlight.register("golang", go);
+  lowlight.register("c", c);
+  lowlight.register("cpp", cpp);
+  lowlight.register("c++", cpp);
+  lowlight.register("csharp", csharp);
+  lowlight.register("cs", csharp);
+  lowlight.register("sql", sql);
+  lowlight.register("bash", bash);
+  lowlight.register("shell", bash);
+  lowlight.register("sh", bash);
+  lowlight.register("json", json);
+  lowlight.register("yaml", yaml);
+  lowlight.register("yml", yaml);
+  lowlight.register("markdown", markdown);
+  lowlight.register("md", markdown);
+  lowlight.register("xml", xml);
+  lowlight.register("html", xml);
+  lowlight.register("php", php);
+  lowlight.register("ruby", ruby);
+  lowlight.register("rb", ruby);
+  lowlight.register("swift", swift);
+  lowlight.register("kotlin", kotlin);
+  lowlight.register("kt", kotlin);
+  lowlight.register("dockerfile", dockerfile);
+  lowlight.register("docker", dockerfile);
+
+  return lowlight;
+}