zudoku 0.0.0-eb4182d → 0.0.0-eeace45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.0.0-eb4182d",
+  "version": "0.0.0-eeace45",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -27,12 +27,17 @@
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
+    "./ui/*": {
+      "import": "./lib/ui/*.js",
+      "types": "./dist/lib/ui/*.d.ts"
+    },
+    "./ui/*.js": {
+      "import": "./lib/ui/*.js",
+      "types": "./dist/lib/ui/*.d.ts"
+    },
     "./client": {
       "types": "./client.d.ts"
     },
-    "./internal": {
-      "import": "./dist/internal.js"
-    },
     "./auth/clerk": {
       "import": "./lib/zudoku.auth-clerk.js",
       "types": "./dist/lib/authentication/providers/clerk.d.ts"
@@ -49,6 +54,10 @@
       "import": "./lib/zudoku.plugin-api-keys.js",
       "types": "./dist/lib/plugins/api-keys/index.d.ts"
     },
+    "./plugins/api-catalog": {
+      "import": "./lib/zudoku.plugin-api-catalog.js",
+      "types": "./dist/lib/plugins/api-catalog/index.d.ts"
+    },
     "./plugins/markdown": {
       "import": "./lib/zudoku.plugin-markdown.js",
       "types": "./dist/lib/plugins/markdown/index.d.ts"
@@ -61,9 +70,9 @@
       "import": "./lib/zudoku.plugin-redirect.js",
       "types": "./dist/lib/plugins/redirect/index.d.ts"
     },
-    "./plugins/custom-page": {
-      "import": "./lib/zudoku.plugin-custom-page.js",
-      "types": "./dist/lib/plugins/custom-page/index.d.ts"
+    "./plugins/custom-pages": {
+      "import": "./lib/zudoku.plugin-custom-pages.js",
+      "types": "./dist/lib/plugins/custom-pages/index.d.ts"
     },
     "./plugins/search-inkeep": {
       "import": "./lib/zudoku.plugin-search-inkeep.js",
@@ -77,6 +86,10 @@
       "import": "./lib/zudoku.components.js",
       "types": "./dist/lib/components/index.d.ts"
     },
+    "./post-processors/*": {
+      "import": "./lib/post-processors/*.js",
+      "types": "./dist/lib/plugins/openapi/post-processors/*.d.ts"
+    },
     "./icons": {
       "import": "./lib/zudoku.icons.js",
       "types": "./dist/lib/icons.d.ts"
@@ -95,57 +108,87 @@
     },
     "./app/*": {
       "import": "./src/app/*"
+    },
+    "./with-zuplo": {
+      "require": "./dist/zuplo/with-zuplo.js",
+      "import": "./dist/zuplo/with-zuplo.js"
     }
   },
   "dependencies": {
-    "@envelop/core": "5.0.1",
+    "@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",
-    "@monaco-editor/react": "^4.6.0",
+    "@mdx-js/react": "3.1.0",
+    "@mdx-js/rollup": "3.1.0",
     "@pothos/core": "3.41.0",
-    "@radix-ui/react-collapsible": "1.1.0",
-    "@radix-ui/react-dropdown-menu": "^2.1.1",
-    "@radix-ui/react-select": "2.1.1",
-    "@radix-ui/react-visually-hidden": "1.1.0",
-    "@sentry/node": "8.11.0",
+    "@radix-ui/react-accordion": "1.2.1",
+    "@radix-ui/react-alert-dialog": "1.1.4",
+    "@radix-ui/react-aspect-ratio": "1.1.1",
+    "@radix-ui/react-checkbox": "1.1.2",
+    "@radix-ui/react-collapsible": "1.1.1",
+    "@radix-ui/react-dialog": "1.1.2",
+    "@radix-ui/react-dropdown-menu": "2.1.2",
+    "@radix-ui/react-hover-card": "1.1.2",
+    "@radix-ui/react-label": "2.1.0",
+    "@radix-ui/react-popover": "1.1.2",
+    "@radix-ui/react-progress": "1.1.0",
+    "@radix-ui/react-radio-group": "1.2.1",
+    "@radix-ui/react-scroll-area": "1.2.1",
+    "@radix-ui/react-select": "2.1.2",
+    "@radix-ui/react-slider": "1.2.1",
+    "@radix-ui/react-slot": "1.1.0",
+    "@radix-ui/react-switch": "1.1.1",
+    "@radix-ui/react-tabs": "1.1.1",
+    "@radix-ui/react-toggle": "1.1.0",
+    "@radix-ui/react-toggle-group": "1.1.1",
+    "@radix-ui/react-tooltip": "1.1.4",
+    "@radix-ui/react-visually-hidden": "1",
+    "@sentry/node": "8.42.0",
     "@sindresorhus/slugify": "2.2.1",
     "@stefanprobst/rehype-extract-toc": "2.2.0",
-    "@tailwindcss/typography": "0.5.13",
-    "@tanstack/react-query": "5.50.1",
-    "@vitejs/plugin-react": "4.3.1",
-    "@zudoku/react-helmet-async": "2.0.4",
-    "autoprefixer": "10.4.19",
-    "chokidar": "^3.6.0",
-    "class-variance-authority": "0.7.0",
-    "dotenv": "16.4.5",
-    "express": "4.20.0",
-    "glob": "^11.0.0",
-    "graphql": "16.9.0",
+    "@tailwindcss/typography": "0.5.15",
+    "@tanstack/react-query": "5.62.3",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.1",
+    "@vitejs/plugin-react": "4.3.4",
+    "@zudoku/httpsnippet": "10.0.9",
+    "@zudoku/react-helmet-async": "2.0.5",
+    "autoprefixer": "10.4.20",
+    "chokidar": "3.6.0",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "cmdk": "1.0.4",
+    "devlop": "^1.1.0",
+    "dotenv": "16.4.7",
+    "embla-carousel-react": "8.5.1",
+    "estree-util-value-to-estree": "3.2.1",
+    "express": "4.21.2",
+    "glob": "11.0.0",
+    "graphql": "16.10.0",
     "graphql-type-json": "0.3.2",
-    "graphql-yoga": "5.2.0",
-    "gray-matter": "^4.0.3",
-    "http-terminator": "^3.2.0",
-    "loglevel": "^1.9.1",
-    "lru-cache": "11.0.0",
-    "lucide-react": "0.438.0",
-    "mdx": "0.3.1",
+    "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.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.0.1",
-    "postcss": "8.4.39",
-    "posthog-node": "^4.1.1",
-    "prism-react-renderer": "2.3.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": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-error-boundary": "^4.0.13",
-    "react-hook-form": "^7.52.1",
-    "react-is": "18.3.1",
-    "react-markdown": "9.0.1",
-    "react-router-dom": "6.25.1",
+    "react-error-boundary": "4.1.2",
+    "react-hook-form": "7.54.0",
+    "react-is": "19.0.0",
+    "react-router": "7.0.2",
     "rehype-raw": "7.0.0",
     "rehype-slug": "6.0.0",
     "remark-comment": "1.0.0",
@@ -154,66 +197,71 @@
     "remark-frontmatter": "5.0.0",
     "remark-gfm": "4.0.0",
     "remark-mdx-frontmatter": "5.0.0",
-    "rollup": "^4.21.2",
-    "semver": "7.6.2",
-    "sitemap": "^8.0.0",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.1",
+    "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.2",
-    "tailwindcss": "3.4.4",
-    "tsx": "4.19.0",
-    "ulidx": "^2.3.0",
+    "tailwind-merge": "2.6.0",
+    "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",
-    "vaul": "0.9.2",
-    "vite": "5.3.6",
-    "yaml": "2.5.0",
+    "urql": "4.2.1",
+    "vaul": "1.1.1",
+    "vfile": "6.0.3",
+    "vite": "6.0.3",
+    "yaml": "2.6.1",
     "yargs": "17.7.2",
     "zod": "3.23.8",
-    "zod-validation-error": "3.3.1",
-    "zustand": "4.5.5"
+    "zod-validation-error": "3.4.0",
+    "zustand": "5.0.2"
   },
   "devDependencies": {
-    "@radix-ui/react-dialog": "1.1.1",
-    "@radix-ui/react-slot": "1.1.0",
-    "@radix-ui/react-tabs": "1.1.0",
-    "@types/express": "^4.17.21",
-    "@types/har-format": "^1.2.15",
+    "@graphql-codegen/cli": "5.0.3",
+    "@graphql-codegen/client-preset": "4.5.1",
+    "@types/estree": "1.0.6",
+    "@types/express": "5.0.0",
+    "@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.12.10",
-    "@types/object-hash": "^3.0.6",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "18.3.0",
-    "@types/react-is": "18.3.0",
-    "@types/rollup": "^0.54.0",
-    "@types/semver": "^7.5.8",
-    "@types/yargs": "^17.0.32",
-    "@zudoku/httpsnippet": "10.0.9",
-    "clsx": "2.1.1",
-    "oauth4webapi": "2.11.1",
-    "prism-react-renderer": "2.3.1",
-    "prismjs": "1.29.0",
-    "react-markdown": "9.0.1",
-    "react-router-dom": "6.25.1",
-    "rollup-plugin-visualizer": "^5.12.0",
-    "typescript": "5.5.3"
+    "@types/node": "20.16.11",
+    "@types/object-hash": "3.0.6",
+    "@types/react-is": "19.0.0",
+    "@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": "19.0.0",
+    "react-dom": "19.0.0",
+    "rollup-plugin-visualizer": "5.12.0",
+    "typescript": "5.7.2",
+    "vitest": "2.1.8"
   },
   "peerDependencies": {
-    "react": ">18.0.0",
-    "react-dom": ">18.0.0"
+    "react": ">=19",
+    "react-dom": ">=19"
   },
   "optionalDependencies": {
-    "@clerk/clerk-js": "5.11.0",
-    "@inkeep/widgets": "^0.2.289"
+    "@clerk/clerk-js": "^5.43.4",
+    "@sentry/react": "^8.48.0"
   },
   "scripts": {
     "build": "tsc --project tsconfig.json",
-    "build:vite": "vite build && pnpm run hack:fix-worker-paths lib",
+    "build:vite": "vite build",
+    "generate:icon-types": "tsx ./scripts/generate-icon-types.ts",
     "build:standalone:vite": "vite build --mode standalone --config vite.standalone.config.ts",
     "build:standalone:html": "cp ./src/app/standalone.html ./standalone/standalone.html && cp ./src/app/demo.html ./standalone/demo.html && cp ./src/app/demo-cdn.html ./standalone/index.html",
     "hack:fix-worker-paths": "node ./scripts/hack-worker.mjs",
     "clean": "tsc --build --clean",
-    "test": "node --test --enable-source-maps"
+    "codegen": "graphql-codegen --config ./src/codegen.ts",
+    "test": "vitest run"
   },
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts"

package/src/app/demo.tsx

@@ -1,11 +1,10 @@
 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";
 import { openApiPlugin } from "../lib/plugins/openapi/index.js";
-import { themeToggle } from "../lib/themeToggle.js";
 import "../lib/util/logInit.js";
 import "./main.css";
 import { getRoutesByConfig } from "./main.js";
@@ -18,8 +17,6 @@ if (!apiUrl) {
   );
 }
 
-themeToggle();
-
 logger.info(`API URL: ${apiUrl}`);
 
 const root =

package/src/app/entry.client.tsx

@@ -3,9 +3,10 @@ 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";
 import { Bootstrap } from "zudoku/components";
 import "./main.css";
 import { getRoutesByConfig } from "./main.js";
@@ -13,6 +14,12 @@ import { getRoutesByConfig } from "./main.js";
 const routes = getRoutesByConfig(config);
 const root = document.getElementById("root")!;
 
+if (process.env.SENTRY_DSN) {
+  void import("./sentry.js").then((mod) => {
+    mod.initSentry({ dsn: process.env.SENTRY_DSN as string });
+  });
+}
+
 if (root.childElementCount > 0) {
   void hydrate(routes);
 } else {
@@ -20,8 +27,10 @@ if (root.childElementCount > 0) {
 }
 
 async function hydrateLazyRoutes(routes: RouteObject[]) {
-  const path = window.location.pathname.slice(config.basePath?.length ?? 0);
-  const lazyMatches = matchRoutes(routes, path)?.filter((m) => m.route.lazy);
+  const path = window.location.pathname;
+  const lazyMatches = matchRoutes(routes, path, config.basePath)?.filter(
+    (m) => m.route.lazy,
+  );
 
   if (lazyMatches?.length) {
     await Promise.all(
@@ -48,3 +57,11 @@ async function hydrate(routes: RouteObject[]) {
 
   hydrateRoot(root, <Bootstrap hydrate router={router} />);
 }
+
+// This is a workaround to avoid version skewing
+// See https://vite.dev/guide/build.html#load-error-handling
+// TODO: Implement a more advanced solution if there are CDN urls or e.g. Vercel Skew Protection
+window.addEventListener("vite:preloadError", (e) => {
+  e.preventDefault();
+  window.location.reload();
+});

package/src/app/entry.server.tsx

@@ -1,14 +1,16 @@
+import { dehydrate, QueryClient } from "@tanstack/react-query";
 import { type HelmetData } from "@zudoku/react-helmet-async";
 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";
 import type { ZudokuConfig } from "../config/config.js";
 import type { FileWritingResponse } from "../vite/prerender.js";
@@ -32,15 +34,13 @@ export const render = async ({
   const { query, dataRoutes } = createStaticHandler(routes, {
     basename: config.basePath,
   });
+  const queryClient = new QueryClient();
 
   const request =
     baseRequest instanceof Request
       ? baseRequest
       : createFetchRequest(baseRequest, response);
 
-  if (!request) {
-    throw new Error("Either fetchRequest or expressRequest must be provided");
-  }
   const context = await query(request);
   let status = 200;
 
@@ -66,61 +66,72 @@ export const render = async ({
   const router = createStaticRouter(dataRoutes, context);
   const helmetContext = {} as HelmetData["context"];
 
-  const { pipe } = renderToPipeableStream(
+  const App = (
     <BootstrapStatic
       router={router}
       context={context}
+      queryClient={queryClient}
       helmetContext={helmetContext}
-    />,
-    {
-      onShellError(error) {
-        response.status(500);
-        response.set({ "Content-Type": "text/html" });
-
-        const html = renderToStaticMarkup(<ServerError error={error} />);
-
-        response.send(html);
-      },
-      // for SSG we could use onAllReady instead of onShellReady
-      // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
-      onShellReady() {
-        response.set({ "Content-Type": "text/html" });
-        response.status(status);
-
-        const transformStream = new Transform({
-          transform(chunk, encoding, callback) {
-            response.write(chunk, encoding);
-            callback();
-          },
-        });
-
-        const [htmlStart, htmlEnd] = template.split("<!--app-html-->");
-
-        response.write(
-          htmlStart.replace(
-            "<!--app-helmet-->",
-            [
-              helmetContext.helmet.title.toString(),
-              helmetContext.helmet.meta.toString(),
-              helmetContext.helmet.link.toString(),
-              helmetContext.helmet.style.toString(),
-              helmetContext.helmet.script.toString(),
-            ].join("\n"),
+    />
+  );
+
+  const { pipe } = renderToPipeableStream(App, {
+    onShellError(error) {
+      response.status(500);
+      response.set({ "Content-Type": "text/html" });
+
+      const html = renderToStaticMarkup(<ServerError error={error} />);
+
+      response.send(html);
+    },
+    // for SSG we could use onAllReady instead of onShellReady
+    // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
+    onAllReady() {
+      response.set({ "Content-Type": "text/html" });
+      response.status(status);
+
+      const transformStream = new Transform({
+        transform(chunk, encoding, callback) {
+          response.write(chunk, encoding);
+          callback();
+        },
+      });
+
+      const [htmlStart, htmlEnd] = template.split("<!--app-html-->");
+
+      if (!htmlStart) {
+        throw new Error("No <!--app-html--> found in template");
+      }
+
+      response.write(
+        htmlStart.replace(
+          "<!--app-helmet-->",
+          [
+            helmetContext.helmet.title.toString(),
+            helmetContext.helmet.meta.toString(),
+            helmetContext.helmet.link.toString(),
+            helmetContext.helmet.style.toString(),
+            helmetContext.helmet.script.toString(),
+          ].join("\n"),
+        ),
+      );
+
+      transformStream.on("finish", () => {
+        response.end(
+          htmlEnd?.replace(
+            "</body>",
+            `<script>window.DATA = ${JSON.stringify(dehydrate(queryClient))}</script></body>`,
           ),
         );
+      });
 
-        transformStream.on("finish", () => {
-          response.end(htmlEnd);
-        });
-
-        pipe(transformStream);
-      },
-      onError(error) {
-        status = 500;
-        logger.error(error);
-      },
+      pipe(transformStream);
     },
-  );
+    onError(error) {
+      status = 500;
+      logger.error(error);
+    },
+  });
 };
 
 export function createFetchRequest(

package/src/app/main.css

@@ -103,6 +103,10 @@
     @apply h-full overscroll-none;
   }
 
+  details summary {
+    @apply cursor-pointer;
+  }
+
   #root {
     @apply min-h-screen w-full;
   }
@@ -142,7 +146,6 @@
   .CollapsibleContent {
     --easing: cubic-bezier(0.4, 0, 0.2, 1);
     --slide-offset: -0.75rem;
-    @apply overflow-hidden;
   }
   .CollapsibleContent[data-state="open"] {
     animation: slideDown 300ms var(--easing);
@@ -184,7 +187,7 @@
   }
 
   .scrollbar:hover {
-    scrollbar-color: hsla(var(--border)) transparent;
+    scrollbar-color: var(--scrollbar-color, hsla(var(--border))) transparent;
   }
 
   .scrollbar::-webkit-scrollbar {