Allow formatting compiled code files, and configure whether code ligatures are used

.oxfmtrc.jsonc

@@ -9,5 +9,5 @@
     "website/**/routeTree.gen.ts",
     "website/src/routes/blog/-content/assets/**/*.json",
   ],
-  "experimentalSortImports": {},
+  "sortImports": {},
 }

package.json

@@ -25,7 +25,7 @@
     "@types/node": "catalog:",
     "knip": "^6.26.0",
     "lefthook": "^2.1.10",
-    "oxfmt": "^0.59.0",
+    "oxfmt": "catalog:",
     "oxlint": "^1.74.0",
     "oxlint-tsgolint": "^0.24.0",
     "playwright": "catalog:",

pnpm-workspace.yaml

@@ -13,6 +13,7 @@ allowBuilds:
   sharp: false
 
 catalog:
+  "@oxfmt/binding-linux-x64-gnu": ^0.59.0
   "@standard-schema/spec": ^1.1.0
   "@ttsc/unplugin": "^0.18.4"
   "@types/node": 24.0.0
@@ -24,6 +25,7 @@ catalog:
   "@vitest/pretty-format": ^4.1.10
   dedent: ^1.7.2
   "mix-n-matchers": "^2.3.0"
+  oxfmt: "^0.59.0"
   playwright: ^1.61.1
   react: ^19.2.7
   react-dom: ^19.2.7

utils/src/index.ts

@@ -423,3 +423,25 @@ export function* range(
 export function identity<T>(value: T): T {
   return value;
 }
+
+/**
+ * Hash function that returns a 53-bit hash of a string, with an optional prefix (defaulting to the string length).
+ * @remarks Fast and deterministic. Not suitable for cryptographic purposes.
+ */
+export function getCyrb53Hash(str: string, prefix = str.length.toString()): string {
+  let h1 = 0xdeadbeef ^ str.length;
+  let h2 = 0x41c6ce57 ^ str.length;
+
+  for (let i = 0; i < str.length; i++) {
+    const ch = str.charCodeAt(i);
+    h1 = Math.imul(h1 ^ ch, 2654435761);
+    h2 = Math.imul(h2 ^ ch, 1597334677);
+  }
+
+  h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909);
+  h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909);
+
+  const hash53 = 4294967296 * (2097151 & h2) + (h1 >>> 0);
+
+  return `${prefix}-${hash53.toString(36)}`;
+}

website/netlify.toml

@@ -2,6 +2,17 @@
 command = "pnpm install && cd ./website && pnpm build"
 publish = "website/dist/client"
 
+[functions]
+# oxfmt resolves native bindings dynamically (@oxfmt/binding-*).
+# Keep runtime bindings explicit for Linux glibc targets.
+external_node_modules = ["oxfmt", "@oxfmt/binding-linux-x64-gnu"]
+included_files = [
+  "node_modules/@oxfmt/binding-linux-x64-gnu/**",
+  "node_modules/.pnpm/@oxfmt+binding-linux-x64-gnu@*/node_modules/@oxfmt/binding-linux-x64-gnu/**",
+  "website/node_modules/@oxfmt/binding-linux-x64-gnu/**",
+  "website/node_modules/.pnpm/@oxfmt+binding-linux-x64-gnu@*/node_modules/@oxfmt/binding-linux-x64-gnu/**",
+]
+
 [build.environment]
 NODE_VERSION = "24"
 AWS_LAMBDA_JS_RUNTIME = "nodejs24.x"

website/package.json

@@ -39,6 +39,7 @@
     "dedent": "catalog:",
     "mutative": "^1.3.0",
     "normalize.css": "^8.0.1",
+    "oxfmt": "catalog:",
     "prismjs": "^1.30.0",
     "rad-event-listeners": "^1.1.0",
     "react": "catalog:",
@@ -103,6 +104,9 @@
     "vitest-browser-react": "^2.2.0",
     "workbox-window": "^7.4.1"
   },
+  "optionalDependencies": {
+    "@oxfmt/binding-linux-x64-gnu": "catalog:"
+  },
   "msw": {
     "workerDirectory": [
       "public"

website/src/routes/__root.tsx

@@ -15,12 +15,18 @@ import { PreferencesDialog } from "#/shared/components/dialog/pref";
 import { Footer } from "#/shared/components/footer";
 import { Header } from "#/shared/components/header";
 import * as mdxComponents from "#/shared/components/mdx";
-import { NpmSiteProvider, StyleProvider, ThemeProvider } from "#/shared/components/prefs/provider";
+import {
+  NpmSiteProvider,
+  StyleProvider,
+  ThemeProvider,
+  LigatureProvider,
+} from "#/shared/components/prefs/provider";
 import { ScrollToTop } from "#/shared/components/scroll-to-top";
 import { Sidebar } from "#/shared/components/sidebar";
 import { SidebarProvider } from "#/shared/components/sidebar/context";
 import { Snackbars } from "#/shared/components/snackbar";
-import { getNpmSiteFn, getStyleFn, getThemeFn } from "#/shared/lib/prefs";
+import { Providers } from "#/shared/components/utils/provider";
+import { getNpmSiteFn, getStyleFn, getThemeFn, getLigatureFn } from "#/shared/lib/prefs";
 
 import { symbolsUrl } from "../../vite/symbols";
 
@@ -34,7 +40,12 @@ const iconSuffixes = process.env.NODE_ENV === "production" ? ["light", "dark"] :
 
 export const Route = createRootRouteWithContext<RouterContext>()({
   loader: () =>
-    promiseAllKeyed({ theme: getThemeFn(), style: getStyleFn(), npmSite: getNpmSiteFn() }),
+    promiseAllKeyed({
+      theme: getThemeFn(),
+      style: getStyleFn(),
+      npmSite: getNpmSiteFn(),
+      ligature: getLigatureFn(),
+    }),
   staticData: { crumb: undefined },
 
   head: () => {
@@ -111,38 +122,46 @@ export const Route = createRootRouteWithContext<RouterContext>()({
 });
 
 function RootDocument({ children }: { children: React.ReactNode }) {
-  const { theme, style, npmSite } = Route.useLoaderData();
+  const { theme, style, npmSite, ligature } = Route.useLoaderData();
   useRegisterSW({ immediate: true });
   const [prefsOpen, setPrefsOpen] = useState(false);
   return (
-    <html lang="en" data-theme={theme} data-style={style} suppressHydrationWarning>
+    <html
+      lang="en"
+      data-theme={theme}
+      data-style={style}
+      data-liga={ligature}
+      suppressHydrationWarning
+    >
       <head>
         <HeadContent />
       </head>
       <body>
-        <ThemeProvider theme={theme}>
-          <StyleProvider style={style}>
-            <NpmSiteProvider npmSite={npmSite}>
-              <MDXProvider components={mdxComponents}>
-                <div className="sidebar-container">
-                  <SidebarProvider>
-                    <Sidebar />
-                    <div className="header-container" id="scroll-container">
-                      <Header prefsOpen={prefsOpen} onPrefs={() => setPrefsOpen(true)} />
-                      <Banner />
-                      <main>{children}</main>
-                      <Footer />
-                      <ScrollToTop />
-                      <Snackbars />
-                      <ConfirmDialog />
-                      <PreferencesDialog open={prefsOpen} onClose={() => setPrefsOpen(false)} />
-                    </div>
-                  </SidebarProvider>
-                </div>
-              </MDXProvider>
-            </NpmSiteProvider>
-          </StyleProvider>
-        </ThemeProvider>
+        <Providers
+          providers={[
+            [LigatureProvider, { ligature }],
+            [ThemeProvider, { theme }],
+            [StyleProvider, { style }],
+            [NpmSiteProvider, { npmSite }],
+            [MDXProvider, { components: mdxComponents }],
+          ]}
+        >
+          <div className="sidebar-container">
+            <SidebarProvider>
+              <Sidebar />
+              <div className="header-container" id="scroll-container">
+                <Header prefsOpen={prefsOpen} onPrefs={() => setPrefsOpen(true)} />
+                <Banner />
+                <main>{children}</main>
+                <Footer />
+                <ScrollToTop />
+                <Snackbars />
+                <ConfirmDialog />
+                <PreferencesDialog open={prefsOpen} onClose={() => setPrefsOpen(false)} />
+              </div>
+            </SidebarProvider>
+          </div>
+        </Providers>
         <TanStackDevtools
           config={{
             triggerHidden: true,

website/src/routes/repo/-query.ts

@@ -1,26 +1,47 @@
 import { anyAbortSignal } from "@schema-benchmarks/utils";
 import { queryOptions } from "@tanstack/react-query";
+import { createServerFn } from "@tanstack/react-start";
+import { getRequest } from "@tanstack/react-start/server";
+import * as v from "valibot";
 
 import { upfetch } from "#/shared/lib/fetch";
+import { getFormattedCodeFn } from "#/shared/lib/highlight";
 
-interface RawSpecifier {
-  repo?: string;
-  branch?: string;
-  fileName: string;
-}
+const rawSpecifierSchema = v.object({
+  repo: v.optional(v.string()),
+  branch: v.optional(v.string()),
+  fileName: v.string(),
+  formatted: v.optional(v.boolean(), false),
+});
+
+type RawSpecifier = v.InferInput<typeof rawSpecifierSchema>;
 
 const getRawPath = ({
   repo = "open-circle/schema-benchmarks",
   branch = "main",
   fileName,
 }: RawSpecifier) => `https://raw.githubusercontent.com/${repo}/${branch}/${fileName}`;
 
-export const getRaw = ({ repo, branch, fileName }: RawSpecifier, signalOpt?: AbortSignal) =>
+const getRawFn = createServerFn()
+  .validator(rawSpecifierSchema)
+  .handler(async ({ data: { repo, branch, fileName, formatted } }) => {
+    const { signal } = getRequest();
+    const raw = await upfetch(getRawPath({ repo, branch, fileName }), {
+      signal,
+      parseResponse: (response) => response.text(),
+    });
+    return formatted ? getFormattedCodeFn({ data: { fileName, sourceText: raw }, signal }) : raw;
+  });
+
+export const getRaw = (
+  { repo, branch, fileName, formatted }: RawSpecifier,
+  signalOpt?: AbortSignal,
+) =>
   queryOptions({
-    queryKey: ["raw", repo, branch, fileName],
+    queryKey: ["raw", repo, branch, fileName, formatted],
     queryFn: ({ signal }) =>
-      upfetch(getRawPath({ repo, branch, fileName }), {
+      getRawFn({
+        data: { repo, branch, fileName, formatted },
         signal: anyAbortSignal(signal, signalOpt),
-        parseResponse: (response) => response.text(),
       }),
   });

website/src/routes/repo/raw.$.tsx

@@ -1,8 +1,11 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
-import { createFileRoute, notFound } from "@tanstack/react-router";
+import { createFileRoute, notFound, stripSearchParams } from "@tanstack/react-router";
 import { isResponseError } from "up-fetch";
+import * as v from "valibot";
 
+import { InternalLinkToggleButton } from "#/shared/components/button/toggle";
 import { CodeBlock } from "#/shared/components/code";
+import { MdSymbol } from "#/shared/components/symbol";
 import { generateMetadata } from "#/shared/data/meta";
 import { getHighlightedCode } from "#/shared/lib/highlight";
 
@@ -40,13 +43,43 @@ function getLibraryCrumbs(fileName: string) {
   return [`${libraryName}${note ? ` (${note})` : ""}`, fileNameMapped];
 }
 
+const searchSchema = v.object({
+  formatted: v.optional(
+    v.union([
+      v.boolean(),
+      v.pipe(
+        v.picklist(["true", "false"]),
+        v.transform((b) => b === "true"),
+      ),
+    ]),
+    false,
+  ),
+});
+
 export const Route = createFileRoute("/repo/raw/$")({
   component: RouteComponent,
+  validateSearch: searchSchema,
+  search: {
+    middlewares: [
+      stripSearchParams({
+        ...v.getFallbacks(searchSchema),
+        ...v.getDefaults(searchSchema),
+      }),
+    ],
+  },
   staticData: { crumb: undefined },
-  async loader({ context: { queryClient }, params: { _splat: fileName }, abortController }) {
+  loaderDeps: ({ search: { formatted } }) => ({ formatted }),
+  async loader({
+    context: { queryClient },
+    params: { _splat: fileName },
+    deps: { formatted },
+    abortController,
+  }) {
     if (!fileName) throw notFound();
     try {
-      const code = await queryClient.ensureQueryData(getRaw({ fileName }, abortController.signal));
+      const code = await queryClient.ensureQueryData(
+        getRaw({ fileName, formatted }, abortController.signal),
+      );
       await queryClient.prefetchQuery(
         getHighlightedCode({ code, language: getLanguage(fileName) }, abortController.signal),
       );
@@ -71,9 +104,28 @@ export const Route = createFileRoute("/repo/raw/$")({
 
 function RouteComponent() {
   const { _splat: fileName = "" } = Route.useParams();
-  const { data } = useSuspenseQuery(getRaw({ fileName }));
+  const { formatted } = Route.useSearch();
+  const { data } = useSuspenseQuery(getRaw({ fileName, formatted }));
+  const isCompiled = fileName.includes("_compiled");
   return (
-    <CodeBlock title={fileName} lineNumbers language={getLanguage(fileName)} copy>
+    <CodeBlock
+      title={fileName}
+      lineNumbers
+      language={getLanguage(fileName)}
+      showCopy
+      actions={
+        isCompiled && (
+          <InternalLinkToggleButton
+            to="/repo/raw/$"
+            params={{ _splat: fileName }}
+            search={({ formatted }) => ({ formatted: !formatted })}
+            tooltip={formatted ? "View Raw" : "View Formatted"}
+          >
+            <MdSymbol>{formatted ? "code_off" : "code"}</MdSymbol>
+          </InternalLinkToggleButton>
+        )
+      }
+    >
       {data}
     </CodeBlock>
   );