zudoku 0.1.1-dev.9 → 0.3.0-dev.100

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "zudoku",
-  "version": "0.1.1-dev.9",
+  "version": "0.3.0-dev.100",
   "type": "module",
   "files": [
     "dist",
-    "src/app",
-    "cli.js"
+    "lib",
+    "cli.js",
+    "src/lib",
+    "src/app"
   ],
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -14,13 +16,55 @@
   },
   "exports": {
     ".": {
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
     },
-    "./auth": {
-      "import": "./dist/auth.js"
+    "./internal": {
+      "import": "./dist/internal.js"
     },
-    "./plugins": {
-      "import": "./dist/plugins.js"
+    "./auth/clerk": {
+      "import": "./lib/zudoku.auth-clerk.js",
+      "types": "./dist/lib/authentication/providers/clerk.d.ts"
+    },
+    "./auth/auth0": {
+      "import": "./lib/zudoku.auth-auth0.js",
+      "types": "./dist/lib/authentication/providers/auth0.d.ts"
+    },
+    "./auth/openid": {
+      "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/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",
+      "types": "./dist/lib/plugins/openapi-worker.d.ts"
+    },
+    "./components": {
+      "import": "./lib/zudoku.components.js",
+      "types": "./dist/lib/components/index.d.ts"
     },
     "./vite": {
       "require": "./dist/vite/plugin.js",
@@ -30,81 +74,87 @@
       "require": "./dist/app/tailwind.js",
       "import": "./dist/app/tailwind.js"
     },
-    "./icons": {
-      "require": "./dist/app/core/icons.js",
-      "import": "./dist/app/core/icons.js"
-    },
     "./main.css": {
       "require": "./src/app/main.css",
       "import": "./src/app/main.css"
+    },
+    "./app/*": {
+      "import": "./src/app/*"
     }
   },
   "dependencies": {
-    "@cfworker/json-schema": "1.12.8",
-    "@clerk/clerk-js": "5.2.2",
+    "@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.0.3",
-    "@radix-ui/react-dialog": "1.1.1",
-    "@radix-ui/react-slot": "1.1.0",
-    "@radix-ui/react-tabs": "1.1.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.35.1",
-    "@vitejs/plugin-react": "4.3.0",
-    "@zudoku/httpsnippet": "10.0.9",
+    "@tanstack/react-query": "5.50.1",
+    "@vitejs/plugin-react": "4.3.1",
+    "@zudoku/react-helmet-async": "2.0.4",
     "autoprefixer": "10.4.19",
-    "chalk": "5.3.0",
+    "chokidar": "^3.6.0",
     "class-variance-authority": "0.7.0",
-    "clsx": "2.1.1",
     "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",
-    "lucide-react": "0.378.0",
     "mdx": "0.3.1",
-    "oauth4webapi": "2.10.4",
     "object-hash": "3.0.0",
     "openapi-types": "12.1.3",
-    "postcss": "8.4.38",
+    "picocolors": "^1.0.1",
+    "postcss": "8.4.39",
     "posthog-node": "^4.0.1",
     "prism-react-renderer": "2.3.1",
     "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.23.0",
+    "react-router-dom": "6.25.1",
     "rehype-slug": "6.0.0",
     "remark-comment": "1.0.0",
     "remark-directive": "3.0.0",
     "remark-directive-rehype": "0.4.2",
     "remark-frontmatter": "5.0.0",
     "remark-gfm": "4.0.0",
-    "remark-mdx-frontmatter": "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.3",
-    "ulid": "2.3.0",
+    "tailwindcss": "3.4.4",
+    "ulidx": "^2.3.0",
     "unist-util-visit": "5.0.0",
     "urql": "4.1.0",
-    "vite": "5.3.1",
-    "vite-plugin-dts": "3.9.1",
+    "vite": "5.3.3",
     "yaml": "2.4.1",
     "yargs": "17.7.2",
+    "zod": "3.23.8",
+    "zod-validation-error": "3.3.0",
     "zustand": "4.5.4"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "^5.0.2",
+    "@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",
     "@types/json-schema": "7.0.15",
@@ -113,13 +163,37 @@
     "@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",
+    "lucide-react": "0.378.0",
+    "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",
+    "tsx": "4.16.5",
     "typescript": "5.5.3"
   },
+  "peerDependencies": {
+    "react": ">18.0.0",
+    "react-dom": ">18.0.0"
+  },
+  "optionalDependencies": {
+    "@clerk/clerk-js": "5.11.0",
+    "@inkeep/widgets": "^0.2.289"
+  },
   "scripts": {
-    "build": "tsc --project tsconfig.node.json",
-    "test": "node --test --enable-source-maps",
-    "codegen": "graphql-codegen --config ./scripts/codegen.ts"
+    "build": "tsc --project tsconfig.json",
+    "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"
   }
 }

package/src/app/App.tsx

@@ -1,30 +0,0 @@
-import "./main.css";
-
-// Virtual config
-import config from "virtual:zudoku-config";
-
-// Virtual Plugins
-import { configuredApiPlugins } from "virtual:zudoku-api-plugins";
-import { configuredAuthProvider } from "virtual:zudoku-auth";
-import { configuredDocsPlugins } from "virtual:zudoku-docs-plugins";
-
-// Base React Component
-import DevPortal from "./DevPortal.js";
-
-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]}
-    />
-  );
-}

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,61 @@
+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 "../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.",
+  );
+}
+
+logger.info(`API URL: ${apiUrl}`);
+
+const root = 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: {
+    logo: {
+      src: {
+        light: "https://cdn.zudoku.dev/logos/icon.svg",
+        dark: "https://cdn.zudoku.dev/logos/icon.svg",
+      },
+    },
+    pageTitle: "Developer Portal",
+  },
+  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: "/demo",
+});
+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);
+}