zudoku 0.0.0-fed343e → 0.0.0-ff3751f

package/src/lib/plugins/markdown/index.tsx

@@ -1,12 +1,13 @@
 import type { Toc } from "@stefanprobst/rehype-extract-toc";
 import type { MDXProps } from "mdx/types.js";
+import { RouteObject } from "react-router-dom";
+import { ZudokuDocsConfig } from "../../../config/validators/validate.js";
 import type { DevPortalPlugin } from "../../core/plugins.js";
-import { generateRoutes } from "./generateRoutes.js";
+import { DocResolver } from "./resolver.js";
 
-export type MarkdownPluginOptions = {
-  markdownFiles: Record<string, () => Promise<MDXImport>>;
-  defaultOptions?: MarkdownPluginDefaultOptions;
-};
+export interface MarkdownPluginOptions extends ZudokuDocsConfig {
+  fileImports: Record<string, () => Promise<MDXImport>>;
+}
 export type MarkdownPluginDefaultOptions = Pick<
   Frontmatter,
   "toc" | "disablePager"
@@ -26,9 +27,47 @@ export type MDXImport = {
   default: (props: MDXProps) => JSX.Element;
 };
 
-export const markdownPlugin = ({
-  markdownFiles,
-  defaultOptions,
-}: MarkdownPluginOptions): DevPortalPlugin => ({
-  getRoutes: () => generateRoutes(markdownFiles, defaultOptions),
+export const markdownPlugin = (
+  options: MarkdownPluginOptions[],
+): DevPortalPlugin => ({
+  getRoutes: () => {
+    const routeMap = new Map<string, RouteObject>();
+    options.forEach(({ fileImports, files, defaultOptions }) =>
+      Object.entries(fileImports).flatMap(([file, importPromise]) => {
+        const routePath = DocResolver.resolveRoutePath({
+          filesGlob: files,
+          fsPath: file,
+        });
+
+        if (!routePath) return [];
+
+        if (routeMap.has(routePath)) {
+          // eslint-disable-next-line no-console
+          console.warn(
+            `Duplicate route path found for ${routePath}. Skipping file at '${file}'.`,
+          );
+          return [];
+        }
+
+        const route: RouteObject = {
+          path: routePath,
+          lazy: async () => {
+            const { MdxPage } = await import("./MdxPage.js");
+            const { default: Component, ...props } = await importPromise();
+            return {
+              element: (
+                <MdxPage
+                  mdxComponent={Component}
+                  {...props}
+                  defaultOptions={defaultOptions}
+                />
+              ),
+            };
+          },
+        };
+        routeMap.set(routePath, route);
+      }),
+    );
+    return [...routeMap.values()];
+  },
 });

package/src/lib/plugins/markdown/resolver.ts

@@ -0,0 +1,92 @@
+import fs from "fs";
+import path from "path";
+import {
+  ZudokuConfig,
+  ZudokuDocsConfig,
+} from "../../../config/validators/validate.js";
+
+const DEFAULT_DOCS_FILES = "/pages/**/*.{md,mdx}";
+
+// TODO: This should be dynamic based on the glob selector
+const SUPPORTED_EXTENSIONS = [".md", ".mdx"];
+
+/**
+ * Utilities for resolving markdown file paths and routes
+ */
+export class DocResolver {
+  constructor(private config: ZudokuConfig) {}
+
+  fileMap = new Map<string, string>();
+
+  /**
+   * Gets the default docs config from the zudoku config
+   */
+  getDocsConfigs() {
+    const docsConfigs: ZudokuDocsConfig[] = this.config.docs
+      ? Array.isArray(this.config.docs)
+        ? this.config.docs
+        : [this.config.docs]
+      : [{ files: DEFAULT_DOCS_FILES }];
+
+    return docsConfigs;
+  }
+
+  /**
+   * Resolves the first matching file system path for a given docId
+   * @param docId - The docId to resolve
+   * @returns
+   */
+  resolveFilePath(docId: string) {
+    const docsConfigs = this.getDocsConfigs();
+    let fsPath: string | undefined;
+
+    docsConfigs.forEach(({ files: fileGlob }) => {
+      if (fsPath) {
+        return;
+      }
+      const rootDir = DocResolver.getRootDir(fileGlob);
+      for (const ext of SUPPORTED_EXTENSIONS) {
+        if (fsPath) {
+          return;
+        }
+        const checkPath = path.join(rootDir, `${docId}${ext}`);
+        if (fs.existsSync(checkPath)) {
+          fsPath = checkPath;
+        }
+      }
+    });
+
+    return fsPath;
+  }
+
+  /**
+   * Gets the root directory from a files glob
+   */
+  private static getRootDir(filesGlob: string) {
+    let rootDir = filesGlob.split("**")[0];
+    if (!rootDir) {
+      throw new Error("Invalid files glob. Must have '**' in the path.");
+    }
+    rootDir = rootDir.replace("/**", "/");
+    return rootDir;
+  }
+
+  /**
+   * Resolves the route path for a given file system path
+   * @param options - The options to resolve the route path
+   * @returns The string route path
+   */
+  static resolveRoutePath({
+    filesGlob,
+    fsPath,
+  }: {
+    filesGlob: string;
+    fsPath: string;
+  }) {
+    const rootDir = this.getRootDir(filesGlob);
+    const re = new RegExp(`^${rootDir}(.*).mdx?`);
+    const match = fsPath.match(re);
+    const routePath = match?.at(1);
+    return routePath;
+  }
+}

package/src/lib/plugins/openapi/Endpoint.tsx

@@ -1,31 +1,95 @@
 import { CheckIcon, CopyIcon } from "lucide-react";
-import { useState } from "react";
+import { useState, useTransition } from "react";
+import { useQuery } from "urql";
+import { useSelectedServerStore } from "../../authentication/state.js";
 import { InlineCode } from "../../components/InlineCode.js";
+import { Button } from "../../ui/Button.js";
+import { useOasConfig } from "./context.js";
+import { graphql } from "./graphql/index.js";
+import { SimpleSelect } from "./SimpleSelect.js";
 
-export const Endpoint = ({ url }: { url: string }) => {
+const ServersQuery = graphql(/* GraphQL */ `
+  query ServersQuery($input: JSON!, $type: SchemaType!) {
+    schema(input: $input, type: $type) {
+      url
+      servers {
+        url
+      }
+    }
+  }
+`);
+
+const CopyButton = ({ url }: { url: string }) => {
   const [isCopied, setIsCopied] = useState(false);
 
   return (
-    <div className="my-4 flex items-center justify-end gap-2 text-sm">
-      <span className="font-medium">Endpoint:</span>
-      <InlineCode className="p-1.5 flex gap-2.5 items-center text-xs">
-        {url}
-        <button
-          onClick={() => {
-            void navigator.clipboard.writeText(url).then(() => {
-              setIsCopied(true);
-              setTimeout(() => setIsCopied(false), 2000);
-            });
-          }}
-          type="button"
-        >
-          {isCopied ? (
-            <CheckIcon className="text-green-600" size={14} />
-          ) : (
-            <CopyIcon size={14} strokeWidth={1.3} />
-          )}
-        </button>
-      </InlineCode>
+    <Button
+      onClick={() => {
+        void navigator.clipboard.writeText(url).then(() => {
+          setIsCopied(true);
+          setTimeout(() => setIsCopied(false), 2000);
+        });
+      }}
+      variant="ghost"
+      size="icon"
+    >
+      {isCopied ? (
+        <CheckIcon className="text-green-600" size={14} />
+      ) : (
+        <CopyIcon size={14} strokeWidth={1.3} />
+      )}
+    </Button>
+  );
+};
+
+const context = { suspense: true } as const;
+
+export const Endpoint = () => {
+  const [result] = useQuery({
+    query: ServersQuery,
+    variables: useOasConfig(),
+    context,
+  });
+  const [, startTransition] = useTransition();
+  const { selectedServer, setSelectedServer } = useSelectedServerStore();
+
+  if (!result.data) return null;
+
+  const { servers } = result.data.schema;
+
+  if (servers.length === 1) {
+    return (
+      <div className="flex items-center gap-2">
+        <span className="font-medium text-sm">Endpoint:</span>
+        <InlineCode className="text-xs px-2 py-1.5" selectOnClick>
+          {servers[0]!.url}
+        </InlineCode>
+        <CopyButton url={servers[0]!.url} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <span className="font-medium text-sm">
+        {servers.length > 1 ? "Endpoints" : "Endpoint"}:
+      </span>
+
+      <SimpleSelect
+        className="font-mono text-xs bg-border/50 dark:bg-border/70 py-1.5 max-w-[450px] truncate"
+        onChange={(e) =>
+          startTransition(() => {
+            setSelectedServer(e.target.value);
+          })
+        }
+        value={selectedServer ?? result.data.schema.url}
+        showChevrons={servers.length > 1}
+        options={servers.map((server) => ({
+          value: server.url,
+          label: server.url,
+        }))}
+      />
+      <CopyButton url={selectedServer ?? result.data.schema.url} />
     </div>
   );
 };

package/src/lib/plugins/openapi/OperationList.tsx

@@ -1,4 +1,5 @@
 import { ResultOf } from "@graphql-typed-document-node/core";
+import { useQuery } from "urql";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
 import { DeveloperHint } from "../../components/DeveloperHint.js";
 import { ErrorPage } from "../../components/ErrorPage.js";
@@ -12,7 +13,6 @@ import { OperationListItem } from "./OperationListItem.js";
 import StaggeredRender from "./StaggeredRender.js";
 import { useOasConfig } from "./context.js";
 import { graphql } from "./graphql/index.js";
-import { useQuery } from "./util/urql.js";
 
 export const OperationsFragment = graphql(/* GraphQL */ `
   fragment OperationsFragment on OperationItem {
@@ -133,7 +133,9 @@ export const OperationList = () => {
         <Markdown content={result.data.schema.description ?? ""} />
       </div>
       <hr />
-      <Endpoint url={result.data.schema.url} />
+      <div className="my-4 flex justify-end">
+        <Endpoint />
+      </div>
 
       {result.data.schema.tags
         .filter((tag) => tag.operations.length > 0)

package/src/lib/plugins/openapi/OperationListItem.tsx

@@ -91,7 +91,7 @@ export const OperationListItem = ({
                     <TabsTrigger
                       value={response.statusCode}
                       key={response.statusCode}
-                      title={response.description}
+                      title={response.description ?? undefined}
                     >
                       {response.statusCode}
                     </TabsTrigger>

package/src/lib/plugins/openapi/PlaygroundDialogWrapper.tsx

@@ -3,9 +3,11 @@ import { PlaygroundDialog } from "./playground/PlaygroundDialog.js";
 
 export const PlaygroundDialogWrapper = ({
   server,
+  servers,
   operation,
 }: {
   server: string;
+  servers?: string[];
   operation: OperationListItemResult;
 }) => {
   const headers = operation.parameters
@@ -29,6 +31,7 @@ export const PlaygroundDialogWrapper = ({
   return (
     <PlaygroundDialog
       server={server}
+      servers={servers}
       method={operation.method}
       url={operation.path}
       headers={headers}

package/src/lib/plugins/openapi/RequestBodySidecarBox.tsx

@@ -26,7 +26,7 @@ export const RequestBodySidecarBox = ({ content }: { content: Content }) => {
             className="text-xs max-h-[450px] p-2"
             code={JSON.stringify(
               content.at(0)?.schema
-                ? generateSchemaExample(content[0].schema as SchemaObject)
+                ? generateSchemaExample(content[0]!.schema as SchemaObject)
                 : "",
               null,
               2,

package/src/lib/plugins/openapi/Route.tsx

@@ -1,9 +1,8 @@
 import { Outlet } from "react-router-dom";
+import { Provider, Client as UrqlClient } from "urql";
 import { OasConfigProvider } from "./context.js";
 import { OasPluginConfig } from "./interfaces.js";
 
-import { Provider, Client as UrqlClient } from "./util/urql.js";
-
 export function OpenApiRoute({
   config,
   client,

package/src/lib/plugins/openapi/Sidecar.tsx

@@ -1,6 +1,8 @@
 import { HTTPSnippet } from "@zudoku/httpsnippet";
 import { Fragment, useMemo, useTransition } from "react";
 import { useSearchParams } from "react-router-dom";
+import { useQuery } from "urql";
+import { useSelectedServerStore } from "../../authentication/state.js";
 import { TextColorMap } from "../../components/navigation/SidebarBadge.js";
 import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
 import type { SchemaObject } from "../../oas/parser/index.js";
@@ -15,7 +17,6 @@ import { ResponsesSidecarBox } from "./ResponsesSidecarBox.js";
 import * as SidecarBox from "./SidecarBox.js";
 import { SimpleSelect } from "./SimpleSelect.js";
 import { generateSchemaExample } from "./util/generateSchemaExample.js";
-import { useQuery } from "./util/urql.js";
 
 const getConverted = (snippet: HTTPSnippet, option: string) => {
   let converted;
@@ -65,6 +66,9 @@ export const GetServerQuery = graphql(/* GraphQL */ `
   query getServerQuery($input: JSON!, $type: SchemaType!) {
     schema(input: $input, type: $type) {
       url
+      servers {
+        url
+      }
     }
   }
 `);
@@ -135,6 +139,8 @@ export const Sidecar = ({
     );
   });
 
+  const { selectedServer } = useSelectedServerStore();
+
   const code = useMemo(() => {
     const example = requestBodyContent?.[0]?.schema
       ? generateSchemaExample(requestBodyContent[0].schema as SchemaObject)
@@ -143,7 +149,7 @@ export const Sidecar = ({
     const snippet = new HTTPSnippet({
       method: operation.method.toLocaleUpperCase(),
       url:
-        (result.data?.schema.url ?? "") +
+        (selectedServer ?? result.data?.schema.url ?? "") +
         operation.path.replaceAll("{", ":").replaceAll("}", ""),
       postData: example
         ? {
@@ -160,7 +166,13 @@ export const Sidecar = ({
     });
 
     return getConverted(snippet, selectedLang);
-  }, [selectedLang, operation.method, operation.path, requestBodyContent]);
+  }, [
+    selectedServer,
+    selectedLang,
+    operation.method,
+    operation.path,
+    requestBodyContent,
+  ]);
 
   return (
     <aside className="flex flex-col overflow-hidden sticky top-[--scroll-padding] gap-4">
@@ -175,6 +187,9 @@ export const Sidecar = ({
           </span>
           <PlaygroundDialogWrapper
             server={result.data?.schema.url ?? ""}
+            servers={
+              result.data?.schema.servers.map((server) => server.url) ?? []
+            }
             operation={operation}
           />
         </SidecarBox.Head>
@@ -183,7 +198,7 @@ export const Sidecar = ({
             language={selectedLang}
             noBackground
             className="text-xs p-2"
-            code={code}
+            code={code!}
           />
         </SidecarBox.Body>
         <SidecarBox.Footer className="flex items-center text-xs gap-2 justify-end py-1">
@@ -201,13 +216,13 @@ export const Sidecar = ({
             }}
             options={[
               { value: "shell", label: "cURL" },
-              { value: "js", label: "Javascript" },
+              { value: "js", label: "JavaScript" },
               { value: "python", label: "Python" },
               { value: "java", label: "Java" },
               { value: "go", label: "Go" },
               { value: "csharp", label: "C#" },
               { value: "kotlin", label: "Kotlin" },
-              { value: "objc", label: "Objective C" },
+              { value: "objc", label: "Objective-C" },
               { value: "php", label: "PHP" },
               { value: "ruby", label: "Ruby" },
               { value: "swift", label: "Swift" },

package/src/lib/plugins/openapi/SimpleSelect.tsx

@@ -7,6 +7,7 @@ export const SimpleSelect = ({
   onChange,
   className,
   options,
+  showChevrons = true,
 }: {
   value: string;
   onChange: ChangeEventHandler<HTMLSelectElement>;
@@ -15,12 +16,14 @@ export const SimpleSelect = ({
     value: string;
     label: string;
   }[];
+  showChevrons?: boolean;
 }) => (
-  <div className={cn("grid", className)}>
+  <div className="grid">
     <select
       className={cn(
         "row-start-1 col-start-1 border border-input text-foreground px-2 py-1 pe-6",
         "rounded-md appearance-none bg-zinc-50 hover:bg-white dark:bg-zinc-800 hover:dark:bg-zinc-800/75",
+        className,
       )}
       value={value}
       onChange={onChange}
@@ -31,7 +34,12 @@ export const SimpleSelect = ({
         </option>
       ))}
     </select>
-    <div className="row-start-1 col-start-1 self-center justify-self-end relative end-2 pointer-events-none">
+    <div
+      className={cn(
+        !showChevrons && "hidden",
+        "row-start-1 col-start-1 self-center justify-self-end relative end-2 pointer-events-none",
+      )}
+    >
       <ChevronsUpDownIcon size={14} />
     </div>
   </div>

package/src/lib/plugins/openapi/client/createMemoryClient.ts

@@ -1,10 +1,5 @@
 /* eslint-disable no-console */
-import {
-  cacheExchange,
-  Client,
-  fetchExchange,
-  mapExchange,
-} from "../util/urql.js";
+import { cacheExchange, Client, fetchExchange, mapExchange } from "urql";
 import { createServer } from "./createServer.js";
 import { CreateClientFunction } from "./interfaces.js";
 

package/src/lib/plugins/openapi/client/createWorkerClient.ts

@@ -1,12 +1,7 @@
 /* eslint-disable no-console */
 import { monotonicFactory } from "ulidx";
+import { cacheExchange, Client, fetchExchange, mapExchange } from "urql";
 import { createWaitForNotify } from "../../../util/createWaitForNotify.js";
-import {
-  cacheExchange,
-  Client,
-  fetchExchange,
-  mapExchange,
-} from "../util/urql.js";
 import { createClient as createMemoryClient } from "./createMemoryClient.js";
 import { CreateClientFunction } from "./interfaces.js";
 

package/src/lib/plugins/openapi/client/worker.ts

@@ -10,7 +10,7 @@ worker.addEventListener(
   function (event: MessageEvent<{ id: string; body: string }>) {
     const port = event.ports[0];
 
-    port.onmessage = async function (e) {
+    port!.onmessage = async function (e) {
       const response = await localServer.fetch(
         new Request("/__z/graphql", {
           method: "POST",
@@ -21,7 +21,7 @@ worker.addEventListener(
         }),
       );
 
-      port.postMessage({
+      port!.postMessage({
         id: e.data.id,
         body: await response.text(),
       } satisfies WorkerGraphQLMessage);

package/src/lib/plugins/openapi/graphql/gql.ts

@@ -13,11 +13,13 @@ import * as types from "./graphql.js";
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
+  "\n  query ServersQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n":
+    types.ServersQueryDocument,
   "\n  fragment OperationsFragment on OperationItem {\n    slug\n    summary\n    method\n    description\n    operationId\n    contentTypes\n    path\n    parameters {\n      name\n      in\n      description\n      required\n      schema\n      style\n      examples {\n        name\n        description\n        externalValue\n        value\n        summary\n      }\n    }\n    requestBody {\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n      description\n      required\n    }\n    responses {\n      statusCode\n      links\n      description\n      content {\n        mediaType\n        encoding {\n          name\n        }\n        schema\n      }\n    }\n  }\n":
     types.OperationsFragmentFragmentDoc,
   "\n  query AllOperations($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      description\n      title\n      url\n      version\n      tags {\n        name\n        description\n        operations {\n          slug\n          ...OperationsFragment\n        }\n      }\n    }\n  }\n":
     types.AllOperationsDocument,
-  "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n    }\n  }\n":
+  "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n":
     types.GetServerQueryDocument,
   "\n  query GetCategories($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      tags {\n        __typename\n        name\n        operations {\n          __typename\n          slug\n          deprecated\n          method\n          summary\n          operationId\n          path\n        }\n      }\n    }\n  }\n":
     types.GetCategoriesDocument,
@@ -37,6 +39,12 @@ const documents = {
  */
 export function graphql(source: string): unknown;
 
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function graphql(
+  source: "\n  query ServersQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n",
+): (typeof documents)["\n  query ServersQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
@@ -53,8 +61,8 @@ export function graphql(
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export function graphql(
-  source: "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n    }\n  }\n",
-): (typeof documents)["\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n    }\n  }\n"];
+  source: "\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n",
+): (typeof documents)["\n  query getServerQuery($input: JSON!, $type: SchemaType!) {\n    schema(input: $input, type: $type) {\n      url\n      servers {\n        url\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */