Upgrade to React 19

.github/workflows/main.yml

@@ -10,22 +10,21 @@ jobs:
       fail-fast: false
       matrix:
         node-version:
-          - 16
+          - 24
     steps:
       - name: Checkout repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v5
         with:
           fetch-depth: 2
 
       - name: Setup Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
 
       - name: Install dependencies
         run: |
-          npm install
-          npx patch-package
+          npm ci
 
       - name: Run tests
         run: npm run test:cov

package.json

@@ -21,12 +21,13 @@
   },
   "===== SCRIPTS =====": "",
   "scripts": {
-    "dev": "vite -c vite-for-docs.config.ts",
+    "dev": "vite -c vite-for-docs.config.js",
+    "preview": "vite preview",
     "build": "npm run build:modules && npm run build:types",
     "postbuild": "node scripts/postbuild.js",
-    "build:modules": "tsc && vite build && vite build -c vite-legacy.config.ts",
+    "build:modules": "tsc && vite build && vite build -c vite-legacy.config.js",
     "build:types": "tsc -p tsconfig-to-build-types.json --outDir dist/types",
-    "build:only-docs": "tsc && vite build -c vite-for-docs.config.ts",
+    "build:only-docs": "tsc && vite build -c vite-for-docs.config.js",
     "build:docs": "npm run fill-with-old-docs && npm run build:only-docs",
     "fill-with-old-docs": "node scripts/fill-with-old-docs.js",
     "prepack": "node scripts/prepack.cjs",
@@ -54,35 +55,35 @@
   "sideEffects": false,
   "===== DEPS =====": "",
   "devDependencies": {
-    "@mdx-js/mdx": "^2.1.1",
-    "@mdx-js/react": "^2.1.1",
-    "@mdx-js/rollup": "^2.1.1",
-    "@tailwindcss/typography": "^0.5.2",
-    "@types/jest": "^29.4.0",
-    "@types/mdx": "^2.0.1",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "@vitejs/plugin-react-refresh": "^1.3.1",
-    "autoprefixer": "^10.2.6",
-    "glob": "^7.1.7",
-    "history": "^5.0.0",
-    "jest": "^29.4.3",
+    "@mdx-js/react": "^3.1.1",
+    "@mdx-js/rollup": "^3.1.1",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.1.14",
+    "@types/jest": "^30.0.0",
+    "@types/preval.macro": "^3.0.2",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^5.0.4",
+    "autoprefixer": "^10.4.21",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "glob": "^11.0.3",
+    "jest": "^30.2.0",
     "jest-expect-message": "^1.1.3",
-    "postcss": "^8.3.5",
-    "prettier": "^2.6.2",
+    "postcss": "^8.5.6",
+    "prettier": "^3.6.2",
     "preval.macro": "^5.0.0",
-    "prism-react-renderer": "^1.2.1",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "react-git-info": "^2.0.0",
-    "react-router": "^6.8.1",
-    "react-router-dom": "^6.8.1",
-    "remark-gfm": "^3.0.1",
-    "shelljs": "^0.8.4",
-    "tailwindcss": "^3.0.24",
-    "ts-jest": "^29.0.5",
-    "typescript": "^4.9.4",
-    "vite": "^2.9.13",
-    "vite-plugin-babel-macros": "^1.0.5"
+    "prism-react-renderer": "^2.4.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-git-info": "^2.0.1",
+    "react-router": "^7.9.4",
+    "react-router-dom": "^7.9.4",
+    "remark-gfm": "^4.0.1",
+    "shelljs": "^0.10.0",
+    "tailwindcss": "^4.1.14",
+    "ts-jest": "^29.4.5",
+    "typescript": "~5.9.3",
+    "vite": "^7.1.10",
+    "vite-plugin-babel-macros": "^1.0.6"
   }
 }

postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
     autoprefixer: {},
   },
 };

src/docs/app-routes.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Routes, Route } from "react-router-dom";
+import { useRoutes } from "react-router-dom";
 
 import Docs from "./views/docs.mdx";
 import { Custom } from "./views/custom";
@@ -8,22 +8,21 @@ const Basic = React.lazy(() => import("./views/basic").then((mod) => ({ default:
 
 const Loading = () => <div className="mt-3 text-center">Loading...</div>;
 
+const BasicWithSuspense = () => (
+  <React.Suspense fallback={<Loading />}>
+    <Basic />
+  </React.Suspense>
+);
+
 const AppRoutes = () => {
-  return (
-    <Routes>
-      <Route path="" element={<Docs />} />
-      <Route
-        path="basic"
-        element={
-          <React.Suspense fallback={<Loading />}>
-            <Basic />
-          </React.Suspense>
-        }
-      />
-      <Route path="custom" element={<Custom />} />
-      <Route path="*" element={<div>not found</div>} />
-    </Routes>
-  );
+  const routes = useRoutes([
+    { path: "", element: <Docs /> },
+    { path: "basic", element: <BasicWithSuspense /> },
+    { path: "custom", element: <Custom /> },
+    { path: "*", element: <div>not found</div> },
+  ]);
+
+  return routes;
 };
 
 export default AppRoutes;

src/docs/app.css

@@ -1,6 +1,5 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@plugin "@tailwindcss/typography";
 
 .heading-link img {
   visibility: hidden;
@@ -13,3 +12,8 @@
 .docs-hidden {
   display: none;
 }
+
+pre, .lang-box {
+  border-color: rgb(229, 231, 235);
+  font-size: 0.95em;
+}

src/docs/app.tsx

@@ -1,7 +1,12 @@
 import React from "react";
-import { BrowserRouter as Router, Navigate, Route, Routes } from "react-router-dom";
+import {
+  createBrowserRouter,
+  createRoutesFromElements,
+  Navigate,
+  Route,
+  RouterProvider,
+} from "react-router-dom";
 import { MDXProvider } from "@mdx-js/react";
-// @ts-ignore missing types
 import preval from "preval.macro";
 
 import "./app.css";
@@ -18,39 +23,51 @@ const {
   fileVersions: string[];
 } = preval`module.exports = require('./old-docs-list')`;
 
+// Create a wrapper component for lazy-loaded routes
+const createLazyRoute = (version: string) => {
+  const LazyComponent = React.lazy(() => import(`./old-docs/${version}/src/docs/app-routes.tsx`));
+
+  return function LazyRouteWrapper() {
+    return (
+      <React.Suspense fallback={<div className="mt-3 text-center">Loading...</div>}>
+        <LazyComponent />
+      </React.Suspense>
+    );
+  };
+};
+
 const oldDocs = docsVersions.map((version) => {
   return {
     version,
-    Component: React.lazy(() => import(`./old-docs/${version}/src/docs/app-routes.tsx`)),
+    Component: createLazyRoute(version),
   };
 });
 
+// Create the router configuration
+const router = createBrowserRouter(
+  createRoutesFromElements(
+    <Route>
+      <Route path="/" element={<Navigate to="docs/latest" replace />} />
+      <Route path="docs/latest/*" element={<AppRoutes />} />
+      <Route path="migrate" element={<Migrate />} />
+      <Route path="docs" element={<DocsVersions versions={docsVersions} />} />
+      {oldDocs.map((v) => (
+        <Route
+          key={v.version}
+          path={`docs/${v.version.replace(/\./g, "-")}/*`}
+          element={<v.Component />}
+        />
+      ))}
+      <Route path="*" element={<div>not found</div>} />
+    </Route>,
+  ),
+);
+
 export function App() {
   return (
     <div className="min-h-screen antialiased break-words py-6">
       <MDXProvider components={mdxComponents}>
-        <Router>
-          <Routes>
-            <Route path="/" element={<Navigate to="docs/latest" replace />} />
-            <Route path="docs/latest/*" element={<AppRoutes />} />
-            <Route path="migrate" element={<Migrate />} />
-            <Route path="*" element={<div>not found</div>} />
-            <Route path="docs" element={<DocsVersions versions={docsVersions} />} />
-            {oldDocs.map((v) => {
-              return (
-                <Route
-                  key={v.version}
-                  path={`docs/${v.version.replace(/\./g, "-")}/*`}
-                  element={
-                    <React.Suspense fallback={<div className="mt-3 text-center">Loading...</div>}>
-                      <v.Component />
-                    </React.Suspense>
-                  }
-                />
-              );
-            })}
-          </Routes>
-        </Router>
+        <RouterProvider router={router} />
       </MDXProvider>
     </div>
   );

src/docs/components/code-block.tsx

@@ -1,9 +1,5 @@
-import React, { ReactNode } from "react";
-import Highlight, {
-  defaultProps as prismDefaultProps,
-  Language,
-  PrismTheme,
-} from "prism-react-renderer";
+import React from "react";
+import { Highlight, Language, PrismTheme } from "prism-react-renderer";
 
 import { theme as lightTheme } from "./customized-night-owl-light";
 
@@ -15,9 +11,10 @@ export const CodeBlock = ({ children, ...rest }: React.HTMLAttributes<HTMLPreEle
   const codeProps = children.props as React.HTMLAttributes<HTMLElement>;
   const lang = String(codeProps.className ?? "").replace(/language-/, "");
 
+  console.log('BOSH: code-block: ', codeProps.style);
+
   return (
     <Highlight
-      {...prismDefaultProps}
       theme={lightTheme as PrismTheme}
       code={codeProps.children?.toString().trim() ?? ""}
       language={lang as Language}
@@ -29,7 +26,7 @@ export const CodeBlock = ({ children, ...rest }: React.HTMLAttributes<HTMLPreEle
               style={{
                 backgroundColor: "#fdfdfd",
               }}
-              className="relative z-10 -mb-3 inline-block font-mono text-sm border text-gray-400 px-3 py-1 rounded leading-none mr-4"
+              className="lang-box relative z-10 -mb-3 inline-block font-mono text-sm border text-gray-400 px-3 py-1 rounded leading-none mr-4"
             >
               {lang.toUpperCase()}
             </div>
@@ -42,13 +39,17 @@ export const CodeBlock = ({ children, ...rest }: React.HTMLAttributes<HTMLPreEle
               marginBottom: 0,
             }}
           >
-            {tokens.map((line, i) => (
-              <div key={i} {...getLineProps({ line, key: i })}>
-                {line.map((token, key) => (
-                  <span key={key} {...getTokenProps({ token, key })} />
-                ))}
-              </div>
-            ))}
+            {tokens.map((line, i) => {
+              const { key: lineKey, ...lineProps } = getLineProps({ line, key: i });
+              return (
+                <div key={lineKey as string} {...lineProps}>
+                  {line.map((token, key) => {
+                    const { key: tokenKey, ...tokenProps } = getTokenProps({ token, key });
+                    return <span key={tokenKey as string} {...tokenProps} />;
+                  })}
+                </div>
+              );
+            })}
           </pre>
         </div>
       )}

src/docs/main.tsx

@@ -1,10 +1,12 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { App } from "./app";
 
-ReactDOM.render(
+const container = document.getElementById("root");
+const root = createRoot(container!);
+
+root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById("root")
 );

src/docs/utils/mdx-setup.tsx

@@ -21,6 +21,7 @@ const getHeading = (level: number) => {
     if (!anchor) {
       if (isValidElement(props.children)) {
         const elProps = props.children.props;
+        // @ts-expect-error children exists on elProps
         const children = elProps["children"];
         if (typeof children === "string") {
           anchor = getAnchor(children);

vite-for-docs.config.js

@@ -0,0 +1,29 @@
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import macrosPlugin from "vite-plugin-babel-macros";
+import mdx from "@mdx-js/rollup";
+import remarkGfm from "remark-gfm";
+
+export default defineConfig({
+  plugins: [
+    react({
+      babel: {
+        plugins: ["babel-plugin-react-compiler"],
+      },
+    }),
+    mdx({
+      providerImportSource: "@mdx-js/react",
+      remarkPlugins: [remarkGfm],
+    }),
+    macrosPlugin(),
+    tailwindcss(),
+  ],
+  define: {
+    // this is required for macrosPlugin to work
+    "process.env": {},
+  },
+  optimizeDeps: {
+    include: ["react", "react-dom"],
+  },
+});