experiment: try Shiki highlighting in the homepage loader

apps/docs/__tests__/LandingPageBehavior_.test.res

@@ -29,7 +29,7 @@ let getOpenGraphImageUrl = () => {
 test("landing page Open Graph image targets its absolute page URL", async () => {
   let _screen = await render(
     <MemoryRouter initialEntries=["/"]>
-      <LandingPage />
+      <LandingPage highlightedExample={LandingPageFixture.highlightedExample} />
     </MemoryRouter>,
   )
   let pageUrl = WebAPI.URL.make(~url=Env.root_url)
@@ -52,7 +52,7 @@ test(
   async () => {
     let screen = await render(
       <MemoryRouter initialEntries=["/"]>
-        <LandingPage />
+        <LandingPage highlightedExample={LandingPageFixture.highlightedExample} />
       </MemoryRouter>,
     )
 
@@ -89,7 +89,7 @@ test(
 test("landing page playground hero renders highlighted code tokens", async () => {
   let screen = await render(
     <MemoryRouter initialEntries=["/"]>
-      <LandingPage />
+      <LandingPage highlightedExample={LandingPageFixture.highlightedExample} />
     </MemoryRouter>,
   )
 
@@ -120,7 +120,7 @@ test(
 
     let screen = await render(
       <MemoryRouter initialEntries=["/"]>
-        <LandingPage />
+        <LandingPage highlightedExample={LandingPageFixture.highlightedExample} />
       </MemoryRouter>,
     )
 

apps/docs/__tests__/visual/LandingPage_.test.res

@@ -6,7 +6,7 @@ let snapshotSection = async (~width, ~height, ~sectionTestId, ~screenshotName) =
 
   let screen = await render(
     <MemoryRouter initialEntries=["/"]>
-      <LandingPage />
+      <LandingPage highlightedExample={LandingPageFixture.highlightedExample} />
     </MemoryRouter>,
   )
 

apps/docs/app/routes/LandingPage.res

@@ -34,15 +34,18 @@ module Intro = {
   }
 }
 
-module PlaygroundHero = {
-  type example = {
-    res: string,
-    js: string,
-  }
+type example = {
+  res: string,
+  js: string,
+}
 
-  let examples = [
-    {
-      res: `module Button = {
+type highlightedExample = {
+  res: string,
+  js: string,
+}
+
+let playgroundExample: example = {
+  res: `module Button = {
   @react.component
   let make = (~count) => {
     let times = switch count {
@@ -55,7 +58,7 @@ module PlaygroundHero = {
     <button> {text->React.string} </button>
   }
 }`,
-      js: `import * as JsxRuntime from "react/jsx-runtime";
+  js: `import * as JsxRuntime from "react/jsx-runtime";
 
 function Playground$Button(props) {
   let count = props.count;
@@ -75,13 +78,11 @@ let Button = {
 export {
   Button,
 }`,
-    },
-  ]
+}
 
+module PlaygroundHero = {
   @react.component
-  let make = () => {
-    let (example, _setExample) = React.useState(_ => examples->Array.getUnsafe(0))
-
+  let make = (~highlightedExample: highlightedExample) => {
     //Playground Section & Background
     <section dataTestId="landing-playground-hero" className="relative mt-20 bg-gray-10">
       <div className="relative mx-auto w-full pt-6 pb-8 sm:px-8 md:px-16 max-w-[1400px]">
@@ -98,7 +99,10 @@ export {
               {React.string("Write in ReScript")}
             </div>
             <pre className="text-14 px-8 pt-6 pb-12 whitespace-pre-wrap">
-              {HighlightJs.renderHLJS(~darkmode=true, ~code=example.res, ~lang="res", ())}
+              <code
+                className="hljs lang-res dark"
+                dangerouslySetInnerHTML={"__html": highlightedExample.res}
+              />
             </pre>
           </div>
           //Right Side (JavaScript)
@@ -109,14 +113,17 @@ export {
               {React.string("Compile to JavaScript")}
             </div>
             <pre className="text-14 px-8 pt-6 pb-14 md:border-l border-gray-80 whitespace-pre-wrap">
-              {HighlightJs.renderHLJS(~darkmode=true, ~code=example.js, ~lang="js", ())}
+              <code
+                className="hljs lang-js dark"
+                dangerouslySetInnerHTML={"__html": highlightedExample.js}
+              />
             </pre>
           </div>
         </div>
 
         /* ---Link to Playground--- */
         <ReactRouter.Link.String
-          to={`/try?code=${LzString.lzString.compressToEncodedURIComponent(example.res)}`}
+          to={`/try?code=${LzString.lzString.compressToEncodedURIComponent(playgroundExample.res)}`}
           className="captions md:px-0 border-b border-gray-40 hover:border-gray-60 text-gray-60"
         >
           {React.string("Edit this example in Playground")}
@@ -683,7 +690,7 @@ module CuratedResources = {
 }
 
 @react.component
-let make = (~components=MarkdownComponents.default) => {
+let make = (~components=MarkdownComponents.default, ~highlightedExample: highlightedExample) => {
   <>
     <Meta
       title="The ReScript Programming Language"
@@ -709,7 +716,7 @@ let make = (~components=MarkdownComponents.default) => {
           <div className="mt-16 md:mt-32 lg:mt-40 mb-12">
             <Intro />
           </div>
-          <PlaygroundHero />
+          <PlaygroundHero highlightedExample />
           <QuickInstall />
           <MainUSP />
           <OtherSellingPoints />

apps/docs/app/routes/LandingPage.resi

@@ -1,2 +1,17 @@
+type example = {
+  res: string,
+  js: string,
+}
+
+type highlightedExample = {
+  res: string,
+  js: string,
+}
+
+let playgroundExample: example
+
 @react.component
-let make: (~components: MarkdownComponents.t=?) => React.element
+let make: (
+  ~components: MarkdownComponents.t=?,
+  ~highlightedExample: highlightedExample,
+) => React.element

apps/docs/app/routes/LandingPageRoute.res

@@ -1,5 +1,17 @@
+type loaderData = LandingPage.highlightedExample
+
+let loader: ReactRouter.Loader.t<loaderData> = async _ => {
+  let {res, js} = LandingPage.playgroundExample
+  let highlightedExample: LandingPage.highlightedExample = {
+    res: ShikiHighlighter.highlight(~code=res, ~language="rescript"),
+    js: ShikiHighlighter.highlight(~code=js, ~language="javascript"),
+  }
+  highlightedExample
+}
+
 let default = () => {
+  let highlightedExample = ReactRouter.useLoaderData()
   <>
-    <LandingPage />
+    <LandingPage highlightedExample />
   </>
 }

apps/docs/app/routes/LandingPageRoute.resi

@@ -1 +1,5 @@
+type loaderData = LandingPage.highlightedExample
+
+let loader: ReactRouter.Loader.t<loaderData>
+
 let default: unit => React.element

apps/docs/package.json

@@ -68,6 +68,7 @@
     "remark-gfm": "^4.0.1",
     "remark-validate-links": "^13.1.0",
     "rescript": "^12.2.0",
+    "shiki": "^4.4.3",
     "tinyglobby": "^0.2.15",
     "unified": "^11.0.5",
     "vfile-matter": "^5.0.1"

apps/docs/src/bindings/ShikiHighlighter.res

@@ -0,0 +1,2 @@
+@module("../server/ShikiHighlighter.js")
+external highlight: (~code: string, ~language: string) => string = "highlight"

apps/docs/src/server/ShikiHighlighter.js

@@ -0,0 +1,32 @@
+import { createHighlighterCoreSync, hastToHtml } from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+import javascript from "@shikijs/langs/javascript";
+import githubDark from "@shikijs/themes/github-dark";
+
+// Vendored from rescript-vscode at commit 76d30468cb05401c10dd1e9dcf5a2993f8fc7140.
+// https://github.com/rescript-lang/rescript-vscode/blob/76d30468cb05401c10dd1e9dcf5a2993f8fc7140/grammars/rescript.tmLanguage.json
+import rescriptGrammar from "./rescript.tmLanguage.json" with { type: "json" };
+
+const highlighter = createHighlighterCoreSync({
+  engine: createJavaScriptRegexEngine(),
+  langs: [
+    javascript,
+    {
+      ...rescriptGrammar,
+      name: "rescript",
+      aliases: ["res"],
+    },
+  ],
+  themes: [githubDark],
+});
+
+export const highlight = (code, language) => {
+  const tree = highlighter.codeToHast(code, {
+    lang: language,
+    theme: "github-dark",
+  });
+  const pre = tree.children[0];
+  const codeElement = pre.children[0];
+
+  return codeElement.children.map((child) => hastToHtml(child)).join("");
+};