Major upgrades: vite@6, react@19, react-router@7 (#432)

* Major upgrades: vite@6, react@19, react-router@7
zuplo · Dec 28, 2024 · 3650195 · 3650195
1 parent 61a1b8a
commit 3650195
Show file tree

Hide file tree

Showing 65 changed files with 2,098 additions and 1,584 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -8,11 +8,8 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
   },
   "devDependencies": {
-    "@mdx-js/react": "3.0.1",
-    "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "catalog:",
+    "react-dom": "catalog:",
     "zudoku": "workspace:*"
   }
 }
diff --git a/examples/godzilla-inc/package.json b/examples/godzilla-inc/package.json
@@ -21,9 +21,9 @@
   },
   "devDependencies": {
     "@mdx-js/react": "3.0.1",
-    "@types/react": "18.3.11",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "@types/react": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
     "zudoku": "workspace:*",
     "@clerk/clerk-js": "5.11.0"
   }

diff --git a/examples/many-apis/package.json b/examples/many-apis/package.json
@@ -3,20 +3,17 @@
   "version": "0.0.1",
   "type": "module",
   "scripts": {
-    "dev": "serve --cors -p 5942 apis & zudoku dev",
     "build": "echo 'Not implemented yet'",
     "disabled_build": "zudoku build",
     "download": "node download.js",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
   },
   "dependencies": {
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "zudoku": "workspace:*"
   },
   "devDependencies": {
-    "@mdx-js/react": "3.0.1",
-    "@types/react": "18.3.11",
     "js-yaml": "4.1.0",
     "serve": "14.2.3"
   }

diff --git a/examples/with-auth0/package.json b/examples/with-auth0/package.json
@@ -20,9 +20,8 @@
     }
   },
   "devDependencies": {
-    "@mdx-js/react": "3.0.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "zudoku": "workspace:*"
   }
 }
diff --git a/examples/with-config/package.json b/examples/with-config/package.json
@@ -20,10 +20,8 @@
     }
   },
   "devDependencies": {
-    "@mdx-js/react": "3.0.1",
-    "@types/react": "18.3.11",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "zudoku": "workspace:*",
     "@clerk/clerk-js": "5.11.0"
   }

diff --git a/examples/with-openapi-json/package.json b/examples/with-openapi-json/package.json
@@ -20,11 +20,8 @@
     }
   },
   "devDependencies": {
-    "@mdx-js/react": "3.0.1",
-    "@types/react": "18.3.11",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "zudoku": "workspace:*",
-    "@clerk/clerk-js": "5.11.0"
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "zudoku": "workspace:*"
   }
 }
diff --git a/examples/with-openapi-yaml/package.json b/examples/with-openapi-yaml/package.json
@@ -20,11 +20,8 @@
     }
   },
   "devDependencies": {
-    "@mdx-js/react": "3.0.1",
-    "@types/react": "18.3.11",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "zudoku": "workspace:*",
-    "@clerk/clerk-js": "5.11.0"
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "zudoku": "workspace:*"
   }
 }
diff --git a/examples/with-vite-config/package.json b/examples/with-vite-config/package.json
@@ -20,11 +20,9 @@
     }
   },
   "devDependencies": {
-    "@mdx-js/react": "3.0.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "rollup-plugin-visualizer": "5.12.0",
-    "vite-plugin-dynamic-import": "1.5.0",
     "zudoku": "workspace:*"
   }
 }
diff --git a/examples/with-vite-config/vite.config.ts b/examples/with-vite-config/vite.config.ts
@@ -1,22 +1,10 @@
 import { visualizer } from "rollup-plugin-visualizer";
-import dynImport from "vite-plugin-dynamic-import";
 
 /** @type {import('vite').UserConfig} */
 export default {
   build: {
     rollupOptions: {
-      plugins: [
-        dynImport({
-          filter(id) {
-            // `node_modules` is exclude by default, so we need to include it explicitly
-            // https://github.com/vite-plugin/vite-plugin-dynamic-import/blob/v1.3.0/src/index.ts#L133-L135
-            if (id.includes("rollup-plugin-visualizer")) {
-              return true;
-            }
-          },
-        }),
-        visualizer(),
-      ],
+      plugins: [visualizer()],
     },
   },
 };
diff --git a/packages/zudoku/package.json b/packages/zudoku/package.json
@@ -154,14 +154,13 @@
   "dependencies": {
     "@envelop/core": "5.0.2",
     "@graphql-typed-document-node/core": "3.2.0",
-    "@hiogawa/vite-plugin-ssr-css": "0.0.1",
     "@hookform/resolvers": "3.9.1",
     "@lekoarts/rehype-meta-as-attributes": "3.0.1",
-    "@mdx-js/react": "3.0.1",
-    "@mdx-js/rollup": "3.0.1",
+    "@mdx-js/react": "3.1.0",
+    "@mdx-js/rollup": "3.1.0",
     "@pothos/core": "3.41.0",
     "@radix-ui/react-accordion": "1.2.1",
-    "@radix-ui/react-alert-dialog": "1.1.2",
+    "@radix-ui/react-alert-dialog": "1.1.4",
     "@radix-ui/react-aspect-ratio": "1.1.0",
     "@radix-ui/react-checkbox": "1.1.2",
     "@radix-ui/react-collapsible": "1.1.1",
@@ -180,52 +179,53 @@
     "@radix-ui/react-tabs": "1.1.1",
     "@radix-ui/react-toggle": "1.1.0",
     "@radix-ui/react-toggle-group": "1.1.0",
-    "@radix-ui/react-tooltip": "1.1.3",
+    "@radix-ui/react-tooltip": "1.1.4",
     "@radix-ui/react-visually-hidden": "1",
-    "@sentry/node": "8.34.0",
+    "@sentry/node": "8.42.0",
     "@sindresorhus/slugify": "2.2.1",
     "@stefanprobst/rehype-extract-toc": "2.2.0",
     "@tailwindcss/typography": "0.5.15",
-    "@tanstack/react-query": "5.61.0",
-    "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.1",
+    "@tanstack/react-query": "5.62.3",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
     "@vitejs/plugin-react": "4.3.4",
     "@zudoku/httpsnippet": "10.0.9",
     "@zudoku/react-helmet-async": "2.0.4",
     "autoprefixer": "10.4.20",
     "chokidar": "3.6.0",
-    "class-variance-authority": "0.7.0",
+    "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "cmdk": "1.0.4",
     "devlop": "^1.1.0",
-    "embla-carousel-react": "8.3.1",
+    "dotenv": "16.4.7",
+    "embla-carousel-react": "8.5.1",
     "estree-util-value-to-estree": "3.2.1",
-    "express": "4.21.1",
+    "express": "4.21.2",
     "glob": "11.0.0",
     "graphql": "16.9.0",
     "graphql-type-json": "0.3.2",
-    "graphql-yoga": "5.7.0",
+    "graphql-yoga": "5.10.4",
     "gray-matter": "4.0.3",
     "hast-util-to-jsx-runtime": "^2.3.2",
     "hast-util-to-string": "3.0.1",
     "html-url-attributes": "^3.0.1",
     "http-terminator": "3.2.0",
     "loglevel": "1.9.2",
-    "lru-cache": "11.0.1",
-    "lucide-react": "0.452.0",
-    "next-themes": "0.4.3",
+    "lru-cache": "11.0.2",
+    "lucide-react": "0.468.0",
+    "next-themes": "0.4.4",
     "oauth4webapi": "2.17.0",
     "object-hash": "3.0.0",
     "openapi-types": "12.1.3",
-    "picocolors": "1.1.0",
-    "postcss": "8.4.47",
-    "posthog-node": "4.2.1",
+    "picocolors": "1.1.1",
+    "postcss": "8.4.49",
+    "posthog-node": "4.3.1",
     "prism-react-renderer": "2.4.0",
     "prismjs": "1.29.0",
     "react-error-boundary": "4.1.2",
-    "react-hook-form": "7.53.0",
-    "react-is": "18.3.1",
-    "react-router-dom": "6.27.0",
+    "react-hook-form": "7.54.0",
+    "react-is": "catalog:",
+    "react-router": "7.0.2",
     "rehype-raw": "7.0.0",
     "rehype-slug": "6.0.0",
     "remark-comment": "1.0.0",
@@ -236,47 +236,47 @@
     "remark-mdx-frontmatter": "5.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.1",
-    "rollup": "4.24.0",
+    "rollup": "4.28.1",
     "semver": "7.6.3",
     "sitemap": "8.0.0",
     "spin-delay": "2.0.1",
     "strip-ansi": "7.1.0",
-    "tailwind-merge": "2.5.4",
-    "tailwindcss": "3.4.13",
+    "tailwind-merge": "2.5.5",
+    "tailwindcss": "3.4.16",
     "tsx": "^4.19.2",
     "ulidx": "2.4.1",
     "unified": "^11.0.5",
     "unist-util-visit": "5.0.0",
-    "urql": "4.1.0",
+    "urql": "4.2.1",
     "vaul": "1.1.1",
     "vfile": "6.0.3",
-    "vite": "5.4.9",
-    "yaml": "2.6.0",
+    "vite": "6.0.3",
+    "yaml": "2.6.1",
     "yargs": "17.7.2",
     "zod": "3.23.8",
     "zod-validation-error": "3.4.0",
-    "zustand": "5.0.0"
+    "zustand": "5.0.2"
   },
   "devDependencies": {
     "@graphql-codegen/cli": "5.0.3",
-    "@graphql-codegen/client-preset": "4.5.0",
+    "@graphql-codegen/client-preset": "4.5.1",
     "@types/estree": "1.0.6",
     "@types/express": "5.0.0",
-    "@types/har-format": "1.2.15",
+    "@types/har-format": "1.2.16",
     "@types/hast": "^3.0.4",
     "@types/json-schema": "7.0.15",
     "@types/mdast": "4.0.4",
     "@types/mdx": "2.0.13",
     "@types/node": "20.16.11",
     "@types/object-hash": "3.0.6",
-    "@types/react-is": "18.3.0",
+    "@types/react-is": "catalog:",
     "@types/semver": "7.5.8",
     "@types/unist": "^3.0.3",
     "@types/yargs": "17.0.33",
     "@vitest/coverage-v8": "2.1.8",
     "mdast-util-mdx": "3.0.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "catalog:",
+    "react-dom": "catalog:",
     "rollup-plugin-visualizer": "5.12.0",
     "typescript": "5.7.2",
     "vitest": "2.1.8"

diff --git a/packages/zudoku/src/app/demo.tsx b/packages/zudoku/src/app/demo.tsx
@@ -1,6 +1,6 @@
 import logger from "loglevel";
 import { createRoot } from "react-dom/client";
-import { createBrowserRouter } from "react-router-dom";
+import { createBrowserRouter } from "react-router";
 import { Bootstrap } from "zudoku/components";
 import type { ZudokuConfig } from "../config/validators/validate.js";
 import DemoAnnouncement from "../lib/demo/DemoAnnouncement.js";

diff --git a/packages/zudoku/src/app/entry.client.tsx b/packages/zudoku/src/app/entry.client.tsx
@@ -3,7 +3,7 @@ import {
   createBrowserRouter,
   matchRoutes,
   type RouteObject,
-} from "react-router-dom";
+} from "react-router";
 import config from "virtual:zudoku-config";
 import "virtual:zudoku-theme.css";
 import "vite/modulepreload-polyfill";
@@ -45,13 +45,6 @@ async function hydrateLazyRoutes(routes: RouteObject[]) {
 function render(routes: RouteObject[]) {
   const router = createBrowserRouter(routes, {
     basename: config.basePath,
-    future: {
-      v7_relativeSplatPath: true,
-      v7_fetcherPersist: true,
-      v7_partialHydration: true,
-      v7_skipActionErrorRevalidation: true,
-      v7_normalizeFormMethod: true,
-    },
   });
   createRoot(root).render(<Bootstrap router={router} />);
 }
@@ -60,13 +53,6 @@ async function hydrate(routes: RouteObject[]) {
   await hydrateLazyRoutes(routes);
   const router = createBrowserRouter(routes, {
     basename: config.basePath,
-    future: {
-      v7_relativeSplatPath: true,
-      v7_fetcherPersist: true,
-      v7_partialHydration: true,
-      v7_skipActionErrorRevalidation: true,
-      v7_normalizeFormMethod: true,
-    },
   });
 
   hydrateRoot(root, <Bootstrap hydrate router={router} />);

diff --git a/packages/zudoku/src/app/entry.server.tsx b/packages/zudoku/src/app/entry.server.tsx
@@ -4,11 +4,11 @@ import type express from "express";
 import logger from "loglevel";
 import { Transform } from "node:stream";
 import { renderToPipeableStream, renderToStaticMarkup } from "react-dom/server";
-import { isRouteErrorResponse } from "react-router-dom";
 import {
   createStaticHandler,
   createStaticRouter,
-} from "react-router-dom/server.js";
+  isRouteErrorResponse,
+} from "react-router";
 import "virtual:zudoku-theme.css";
 import "vite/modulepreload-polyfill";
 import { BootstrapStatic, ServerError } from "zudoku/components";

diff --git a/packages/zudoku/src/app/main.tsx b/packages/zudoku/src/app/main.tsx
@@ -1,4 +1,4 @@
-import { type RouteObject } from "react-router-dom";
+import { type RouteObject } from "react-router";
 import { configuredApiKeysPlugin } from "virtual:zudoku-api-keys-plugin";
 import {
   configuredApiCatalogPlugins,

diff --git a/packages/zudoku/src/app/sentry.ts b/packages/zudoku/src/app/sentry.ts
@@ -5,7 +5,7 @@ import {
   matchRoutes,
   useLocation,
   useNavigationType,
-} from "react-router-dom";
+} from "react-router";
 
 export const initSentry = ({ dsn }: { dsn: string }) => {
   Sentry.init({

diff --git a/packages/zudoku/src/app/standalone.tsx b/packages/zudoku/src/app/standalone.tsx
@@ -1,5 +1,5 @@
 import { createRoot } from "react-dom/client";
-import { createBrowserRouter } from "react-router-dom";
+import { createBrowserRouter } from "react-router";
 import { Bootstrap } from "zudoku/components";
 import type { ZudokuConfig } from "../config/validators/validate.js";
 import { openApiPlugin } from "../lib/plugins/openapi/index.js";

diff --git a/packages/zudoku/src/cli/cmds/build.ts b/packages/zudoku/src/cli/cmds/build.ts
@@ -19,6 +19,7 @@ export default {
       argv,
       event: "zudoku build",
     });
+    process.env.NODE_ENV = "production";
     await build(argv as Arguments);
   },
 };