zudoku 0.3.0-dev.8 → 0.3.0-dev.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.3.0-dev.8",
+  "version": "0.3.0-dev.80",
   "type": "module",
   "files": [
     "dist",
@@ -16,25 +16,51 @@
   },
   "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"
     },
     "./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",
@@ -53,22 +79,28 @@
     }
   },
   "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",
     "graphql": "16.9.0",
     "graphql-type-json": "0.3.2",
@@ -85,10 +117,11 @@
     "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-slug": "6.0.0",
     "remark-comment": "1.0.0",
     "remark-directive": "3.0.0",
@@ -96,59 +129,61 @@
     "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",
+    "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"
   },
   "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 --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"

package/src/app/App.tsx

@@ -1,41 +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
-      meta={{
-        headerTitle: config.ui?.headerTitle ?? "Developer Portal",
-        pageTitle: config.ui?.pageTitle ?? "%s | Dev Portal",
-        logo: config.ui?.logo ?? "https://cdn.zuplo.com/www/favicon.png",
-        favicon:
-          config.ui?.metadata?.favicon ??
-          "https://cdn.zuplo.com/www/favicon.png",
-      }}
-      navigation={config.navigation ?? []}
-      authentication={configuredAuthProvider}
-      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/icon.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/icon.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,45 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+
+// Styles
+import "./main.css";
+
+// Logger
+import logger from "loglevel";
+import "../lib/util/logInit.js";
+
+// Base React Component
+import { DevPortal } from "../lib/components/DevPortal.js";
+
+// Plugins
+import { openApiPlugin } from "../lib/plugins/openapi/index.js";
+
+const apiUrl = new URL(window.location.href).searchParams.get("api-url");
+logger.info(`API URL: ${apiUrl}`);
+
+// IMPORTANT: This component must not contain tailwind classes
+// This directory is not processed by the tailwind plugin
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <DevPortal
+      page={{
+        logo: {
+          src: {
+            light: "https://cdn.zudoku.dev/logos/icon.svg",
+            dark: "https://cdn.zudoku.dev/logos/icon.svg",
+          },
+        },
+        pageTitle: "Developer Portal",
+      }}
+      navigation={[
+        {
+          label: "API Reference",
+          path: "/demo",
+          categories: [],
+        },
+      ]}
+      plugins={[openApiPlugin({ type: "url", input: apiUrl!, path: "/demo" })]}
+    />
+  </StrictMode>,
+);

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);
+}

package/src/app/main.css

@@ -2,6 +2,80 @@
 @tailwind components;
 @tailwind utilities;
 
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Thin.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-UltraLight.woff2")
+    format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Light.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Medium.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-SemiBold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Bold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-Black.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: Geist;
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url("https://cdn.zudoku.dev/geist/Geist-UltraBlack.woff2")
+    format("woff2");
+}
+
 @layer base {
   :root {
     --top-header-height: 65px;
@@ -20,6 +94,9 @@
   #root {
     @apply h-full min-h-screen;
   }
+  * {
+    @apply border-border;
+  }
 
   html {
     scroll-padding-block: var(--scroll-padding);
@@ -28,6 +105,9 @@
 
   body {
     @apply antialiased bg-background text-foreground;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
   }
 
   .dark {
@@ -35,7 +115,7 @@
   }
 
   .prose.prose {
-    @apply prose-a:decoration-primary/60 hover:prose-a:decoration-primary prose-a:underline-offset-4 hover:prose-a:decoration-2;
+    @apply prose-a:underline-offset-4 hover:prose-a:text-primary;
     @apply prose-blockquote:not-italic prose-blockquote:text-neutral-500/75 prose-blockquote:dark:text-neutral-400;
     @apply prose-headings:prose-code:mx-2;
     @apply prose-code:before:content-none prose-code:after:content-none;
@@ -57,10 +137,10 @@
     --slide-offset: -0.75rem;
     @apply overflow-hidden;
   }
-  .CollapsibleContent[data-state="open"] {
+  [data-animate="true"] .CollapsibleContent[data-state="open"] {
     animation: slideDown 300ms var(--easing);
   }
-  .CollapsibleContent[data-state="closed"] {
+  [data-animate="true"] .CollapsibleContent[data-state="closed"] {
     animation: slideUp 300ms var(--easing);
   }
 
@@ -110,7 +190,7 @@
     --destructive-foreground: 210 40% 98%;
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
-    --ring: 221.2 83.2% 53.3%;
+    --ring: var(--primary);
     --radius: 0.5rem;
   }
 
@@ -133,6 +213,6 @@
     --destructive-foreground: 210 40% 98%;
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
-    --ring: 224.3 76.3% 48%;
+    --ring: var(--primary);
   }
 }