zudoku 0.3.0-dev.13 → 0.3.0-dev.131

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.3.0-dev.13",
+  "version": "0.3.0-dev.131",
   "type": "module",
   "files": [
     "dist",
@@ -9,32 +9,60 @@
     "src/lib",
     "src/app"
   ],
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
   "bin": {
     "zudoku": "./cli.js"
   },
   "exports": {
     ".": {
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./internal": {
+      "import": "./dist/internal.js"
     },
     "./auth/clerk": {
-      "import": "./lib/zudoku.auth-clerk.js"
+      "import": "./lib/zudoku.auth-clerk.js",
+      "types": "./dist/lib/authentication/providers/clerk.d.ts"
     },
     "./auth/auth0": {
-      "import": "./lib/zudoku.auth-auth0.js"
+      "import": "./lib/zudoku.auth-auth0.js",
+      "types": "./dist/lib/authentication/providers/auth0.d.ts"
     },
     "./auth/openid": {
-      "import": "./lib/zudoku.auth-openid.js"
+      "import": "./lib/zudoku.auth-openid.js",
+      "types": "./dist/lib/authentication/providers/openid.d.ts"
+    },
+    "./plugins/api-keys": {
+      "import": "./lib/zudoku.plugin-api-keys.js",
+      "types": "./dist/lib/plugins/api-keys/index.d.ts"
+    },
+    "./plugins/markdown": {
+      "import": "./lib/zudoku.plugin-markdown.js",
+      "types": "./dist/lib/plugins/markdown/index.d.ts"
+    },
+    "./plugins/openapi": {
+      "import": "./lib/zudoku.plugin-openapi.js",
+      "types": "./dist/lib/plugins/openapi/index.d.ts"
     },
-    "./plugins": {
-      "import": "./lib/zudoku.plugins.js"
+    "./plugins/redirect": {
+      "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/search-inkeep": {
+      "import": "./lib/zudoku.plugin-search-inkeep.js",
+      "types": "./dist/lib/plugins/search-inkeep/index.d.ts"
     },
     "./openapi-worker": {
-      "import": "./lib/zudoku.openapi-worker.js"
+      "import": "./lib/zudoku.openapi-worker.js",
+      "types": "./dist/lib/plugins/openapi-worker.d.ts"
     },
     "./components": {
-      "import": "./lib/zudoku.components.js"
+      "import": "./lib/zudoku.components.js",
+      "types": "./dist/lib/components/index.d.ts"
     },
     "./vite": {
       "require": "./dist/vite/plugin.js",
@@ -55,25 +83,32 @@
   "dependencies": {
     "@envelop/core": "5.0.1",
     "@graphql-typed-document-node/core": "3.2.0",
+    "@hiogawa/vite-plugin-ssr-css": "0.0.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",
     "@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",
     "@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",
-    "esbuild": "0.23.0",
     "express": "4.19.2",
+    "glob": "^11.0.0",
     "graphql": "16.9.0",
     "graphql-type-json": "0.3.2",
     "graphql-yoga": "5.2.0",
+    "gray-matter": "^4.0.3",
     "loglevel": "^1.9.1",
     "lru-cache": "10.2.0",
     "mdx": "0.3.1",
@@ -86,10 +121,12 @@
     "prismjs": "1.29.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-helmet-async": "2.0.5",
+    "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.24.1",
+    "react-router-dom": "6.25.1",
+    "rehype-raw": "7.0.0",
     "rehype-slug": "6.0.0",
     "remark-comment": "1.0.0",
     "remark-directive": "3.0.0",
@@ -97,61 +134,67 @@
     "remark-frontmatter": "5.0.0",
     "remark-gfm": "4.0.0",
     "remark-mdx-frontmatter": "5.0.0",
+    "rollup": "^4.18.1",
     "semver": "7.6.2",
     "slugify": "1.6.6",
     "strip-ansi": "7.1.0",
+    "tailwind-merge": "2.3.0",
     "tailwindcss": "3.4.4",
-    "tiny-invariant": "1.3.3",
     "ulidx": "^2.3.0",
     "unist-util-visit": "5.0.0",
     "urql": "4.1.0",
     "vite": "5.3.3",
     "yaml": "2.4.1",
-    "yargs": "17.7.2"
+    "yargs": "17.7.2",
+    "zod": "3.23.8",
+    "zod-validation-error": "3.3.0",
+    "zustand": "4.5.4"
   },
   "devDependencies": {
-    "@radix-ui/react-collapsible": "1.1.0",
     "@radix-ui/react-dialog": "1.1.1",
     "@radix-ui/react-slot": "1.1.0",
     "@radix-ui/react-tabs": "1.1.0",
-    "@tanstack/react-query": "5.50.1",
     "@types/express": "^4.17.21",
     "@types/har-format": "^1.2.15",
     "@types/json-schema": "7.0.15",
-    "@types/loglevel": "^1.6.3",
     "@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",
-    "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
     "lucide-react": "0.378.0",
     "oauth4webapi": "2.11.1",
     "prism-react-renderer": "2.3.1",
     "prismjs": "1.29.0",
-    "react-helmet-async": "2.0.5",
     "react-markdown": "9.0.1",
-    "react-router-dom": "6.24.1",
-    "tailwind-merge": "2.3.0",
-    "typescript": "5.5.3",
-    "zustand": "4.5.4"
+    "react-router-dom": "6.25.1",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "tsx": "4.16.5",
+    "typescript": "5.5.3"
   },
   "peerDependencies": {
     "react": ">18.0.0",
     "react-dom": ">18.0.0"
   },
   "optionalDependencies": {
-    "@clerk/clerk-js": "5.2.2"
+    "@clerk/clerk-js": "5.11.0",
+    "@inkeep/widgets": "^0.2.289"
   },
   "scripts": {
     "build": "tsc --project tsconfig.json",
-    "build:vite": "vite build && pnpm run hack:fix-worker-paths",
+    "build:vite": "vite build && pnpm run hack:fix-worker-paths lib",
+    "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"
-  }
+  },
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts"
 }

package/src/app/App.tsx

@@ -1,44 +0,0 @@
-import "./main.css";
-
-// Virtual config
-import config from "virtual:zudoku-config";
-
-// Virtual Plugins
-import { configuredApiKeysPlugin } from "virtual:zudoku-api-keys-plugin";
-import { configuredApiPlugins } from "virtual:zudoku-api-plugins";
-import { configuredAuthProvider } from "virtual:zudoku-auth";
-import { configuredDocsPlugins } from "virtual:zudoku-docs-plugins";
-import { configuredRedirectPlugin } from "virtual:zudoku-redirect-plugin";
-
-// Base React Component
-import { DevPortal } from "zudoku/components";
-
-// IMPORTANT: This component must not contain tailwind classes
-// This directory is not processed by the tailwind plugin
-
-export default function App() {
-  return (
-    <DevPortal
-      page={{
-        logo: config.page?.logo ?? "https://cdn.zuplo.com/www/favicon.png",
-        pageTitle: "Developer Portal",
-        ...config.page,
-      }}
-      metadata={{
-        favicon: "https://cdn.zuplo.com/www/favicon.png",
-        title: "%s | Developer Portal",
-        ...config.metadata,
-      }}
-      navigation={config.navigation ?? []}
-      authentication={configuredAuthProvider}
-      mdxComponents={config.mdx?.components}
-      plugins={[
-        ...configuredDocsPlugins,
-        ...configuredApiPlugins,
-        configuredRedirectPlugin,
-        ...(configuredApiKeysPlugin ? [configuredApiKeysPlugin] : []),
-        ...(configuredAuthProvider ? [configuredAuthProvider] : []),
-      ]}
-    />
-  );
-}

package/src/app/demo-cdn.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="https://cdn.zudoku.dev/logos/favicon.svg"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Zudoku Demo</title>
+    <script
+      type="module"
+      crossorigin
+      src="https://cdn.zudoku.dev/latest/demo.js"
+    ></script>
+    <link
+      rel="stylesheet"
+      crossorigin
+      href="https://cdn.zudoku.dev/latest/style.css"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/src/app/demo.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="https://cdn.zudoku.dev/logos/favicon.svg"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Zudoku Demo</title>
+    <script type="module" crossorigin src="./demo.js"></script>
+    <link rel="stylesheet" crossorigin href="./style.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/src/app/demo.tsx

@@ -0,0 +1,59 @@
+import logger from "loglevel";
+import { createRoot } from "react-dom/client";
+import { createBrowserRouter } from "react-router-dom";
+import { Bootstrap } from "zudoku/components";
+import type { ZudokuConfig } from "../config/validators/validate.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";
+
+const apiUrl = new URL(window.location.href).searchParams.get("api-url");
+
+if (!apiUrl) {
+  throw new Error(
+    "No API URL in query parameters. Please provide an API URL using the `api-url` query parameter.",
+  );
+}
+
+themeToggle();
+
+logger.info(`API URL: ${apiUrl}`);
+
+const root =
+  document.getElementById("zudoku") ?? document.getElementById("root");
+
+if (!root) {
+  throw new Error("No div found with id root");
+}
+
+// IMPORTANT: This component must not contain tailwind classes
+// This directory is not processed by the tailwind plugin
+
+const config = {
+  page: {
+    pageTitle: "Demo",
+  },
+  topNavigation: [
+    {
+      id: "/",
+      label: "API Reference",
+    },
+  ],
+  plugins: [
+    // Using the plugin directly because there's no config file to load in the virtual plugins
+    openApiPlugin({
+      type: "url",
+      input: apiUrl,
+      navigationId: "/",
+      inMemory: true,
+    }),
+  ],
+} satisfies ZudokuConfig;
+
+const routes = getRoutesByConfig(config);
+const router = createBrowserRouter(routes, {
+  basename: window.location.pathname,
+});
+createRoot(root).render(<Bootstrap router={router} />);

package/src/app/entry.client.tsx

@@ -0,0 +1,47 @@
+import { createRoot, hydrateRoot } from "react-dom/client";
+import {
+  createBrowserRouter,
+  matchRoutes,
+  type RouteObject,
+} from "react-router-dom";
+import config from "virtual:zudoku-config";
+import "virtual:zudoku-theme.css";
+import { Bootstrap } from "zudoku/components";
+import "./main.css";
+import { getRoutesByConfig } from "./main.js";
+
+const routes = getRoutesByConfig(config);
+const root = document.getElementById("root")!;
+
+if (root.childElementCount > 0) {
+  void hydrate(routes);
+} else {
+  void render(routes);
+}
+
+async function hydrateLazyRoutes(routes: RouteObject[]) {
+  const lazyMatches = matchRoutes(routes, window.location)?.filter(
+    (m) => m.route.lazy,
+  );
+
+  if (lazyMatches?.length) {
+    await Promise.all(
+      lazyMatches.map(async (m) => {
+        const routeModule = await m.route.lazy!();
+        Object.assign(m.route, { ...routeModule, lazy: undefined });
+      }),
+    );
+  }
+}
+
+function render(routes: RouteObject[]) {
+  const router = createBrowserRouter(routes);
+  createRoot(root).render(<Bootstrap router={router} />);
+}
+
+async function hydrate(routes: RouteObject[]) {
+  await hydrateLazyRoutes(routes);
+  const router = createBrowserRouter(routes);
+
+  hydrateRoot(root, <Bootstrap hydrate router={router} />);
+}

package/src/app/entry.server.tsx

@@ -0,0 +1,160 @@
+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";
+import "virtual:zudoku-theme.css";
+import { BootstrapStatic, ServerError } from "zudoku/components";
+import type { ZudokuConfig } from "../config/config.js";
+import type { FileWritingResponse } from "../vite/prerender.js";
+import "./main.css";
+import { getRoutesByConfig } from "./main.js";
+
+export { getRoutesByConfig };
+
+export const render = async ({
+  template,
+  request: baseRequest,
+  response,
+  config,
+}: {
+  template: string;
+  request: express.Request | Request;
+  response: express.Response | FileWritingResponse;
+  config: ZudokuConfig;
+}) => {
+  const routes = getRoutesByConfig(config);
+  const { query, dataRoutes } = createStaticHandler(routes);
+
+  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;
+
+  if (context instanceof Response) {
+    if ([301, 302, 303, 307, 308].includes(context.status)) {
+      return response.redirect(
+        context.status,
+        context.headers.get("Location")!,
+      );
+    }
+
+    throw context;
+  } else if (context.errors) {
+    // when throwing a Response from a loader it will be caught here
+    // unfortunately it is not `instanceof Response` for some reason
+    const firstError = Object.values(context.errors).find(isRouteErrorResponse);
+
+    if (firstError?.status) {
+      status = firstError.status;
+    }
+  }
+
+  const router = createStaticRouter(dataRoutes, context);
+  const helmetContext = {} as HelmetData["context"];
+
+  const { pipe } = renderToPipeableStream(
+    <BootstrapStatic
+      router={router}
+      context={context}
+      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"),
+          ),
+        );
+
+        transformStream.on("finish", () => {
+          response.end(htmlEnd);
+        });
+
+        pipe(transformStream);
+      },
+      onError(error) {
+        status = 500;
+        logger.error(error);
+      },
+    },
+  );
+};
+
+export function createFetchRequest(
+  req: express.Request,
+  res: express.Response | FileWritingResponse,
+): Request {
+  const origin = `${req.protocol}://${req.get("host")}`;
+  // Note: This had to take originalUrl into account for presumably vite's proxying
+  const url = new URL(req.originalUrl || req.url, origin);
+
+  const controller = new AbortController();
+  res.on("close", () => controller.abort());
+
+  const headers = new Headers();
+
+  for (const [key, values] of Object.entries(req.headers)) {
+    if (values) {
+      if (Array.isArray(values)) {
+        for (const value of values) {
+          headers.append(key, value);
+        }
+      } else {
+        headers.set(key, values);
+      }
+    }
+  }
+
+  const init: RequestInit = {
+    method: req.method,
+    headers,
+    signal: controller.signal,
+  };
+
+  if (req.method !== "GET" && req.method !== "HEAD") {
+    init.body = req.body;
+  }
+
+  return new Request(url.href, init);
+}