zudoku 0.0.0-eff6f9b → 0.0.0-f1a6fd4

package/src/lib/oas/graphql/index.ts

@@ -1,10 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import SchemaBuilder from "@pothos/core";
+import {
+  slugifyWithCounter,
+  type CountableSlugify,
+} from "@sindresorhus/slugify";
 import { GraphQLJSON, GraphQLJSONObject } from "graphql-type-json";
 import { createYoga, type YogaServerOptions } from "graphql-yoga";
 import { LRUCache } from "lru-cache";
 import hashit from "object-hash";
-import slugify from "../../util/slugify.js";
 import {
   HttpMethods,
   validate,
@@ -15,6 +18,7 @@ import {
   type ParameterObject,
   type PathsObject,
   type SchemaObject,
+  type ServerObject,
   type TagObject,
 } from "../parser/index.js";
 
@@ -35,7 +39,12 @@ type OperationLike = {
   path: string;
   method: string;
 };
-export const slugifyOperation = (operation: OperationLike, tag?: string) => {
+
+export const createOperationSlug = (
+  slugify: CountableSlugify,
+  operation: OperationLike,
+  tag?: string,
+) => {
   const summary =
     (operation.summary ?? "") +
     (operation.operationId
@@ -46,13 +55,13 @@ export const slugifyOperation = (operation: OperationLike, tag?: string) => {
   return slugify(
     (tag ? tag + "-" : "") +
       (summary || `${operation.method}-${operation.path}`),
-    { lower: true, trim: true },
   );
 };
 
-const cache = new LRUCache<string, Promise<OpenAPIDocument>>({
+const cache = new LRUCache<string, OpenAPIDocument>({
   ttl: 60 * 10 * 1000,
   ttlAutopurge: true,
+  fetchMethod: (_key, _oldValue, { context }) => validate(context as string),
 });
 
 const builder = new SchemaBuilder<{
@@ -88,6 +97,8 @@ const getAllTags = (schema: OpenAPIDocument): TagObject[] => {
 };
 
 const getAllOperations = (paths?: PathsObject, tag?: string) => {
+  const slugify = slugifyWithCounter();
+
   return Object.entries(paths ?? {}).flatMap(([path, value]) =>
     HttpMethods.flatMap((method) => {
       if (!value?.[method]) return [];
@@ -109,21 +120,20 @@ const getAllOperations = (paths?: PathsObject, tag?: string) => {
         ...operationParameters,
       ];
 
+      const slugData = {
+        summary: operation.summary,
+        operationId: operation.operationId,
+        path,
+        method,
+      };
+
       return {
         ...operation,
         method,
         path,
         parameters,
         tags: operation.tags ?? [],
-        slug: slugifyOperation(
-          {
-            summary: operation.summary,
-            operationId: operation.operationId,
-            path,
-            method,
-          },
-          tag,
-        ),
+        slug: createOperationSlug(slugify, slugData, tag),
       };
     }),
   );
@@ -150,6 +160,13 @@ const SchemaTag = builder.objectRef<TagObject>("SchemaTag").implement({
   }),
 });
 
+const ServerItem = builder.objectRef<ServerObject>("Server").implement({
+  fields: (t) => ({
+    url: t.exposeString("url"),
+    description: t.exposeString("description", { nullable: true }),
+  }),
+});
+
 const PathItem = builder
   .objectRef<{
     path: string;
@@ -363,6 +380,10 @@ const Schema = builder.objectRef<OpenAPIDocument>("Schema").implement({
   fields: (t) => ({
     openapi: t.string({ resolve: (root) => root.openapi }),
     url: t.string({ resolve: (root) => root.servers?.at(0)?.url ?? "/" }),
+    servers: t.field({
+      type: [ServerItem],
+      resolve: (root) => root.servers ?? [],
+    }),
     title: t.string({ resolve: (root) => root.info.title }),
     version: t.string({ resolve: (root) => root.info.version }),
     description: t.string({
@@ -409,16 +430,7 @@ const Schema = builder.objectRef<OpenAPIDocument>("Schema").implement({
 
 const loadOpenAPISchema = async (input: NonNullable<unknown>) => {
   const hash = hashit(input);
-
-  if (cache.has(hash)) {
-    return cache.get(hash)!;
-  }
-
-  const schema = validate(input);
-
-  cache.set(hash, schema);
-
-  return schema;
+  return await cache.forceFetch(hash, { context: input });
 };
 
 const SchemaSource = builder.enumType("SchemaType", {

package/src/lib/oas/parser/index.ts

@@ -20,6 +20,7 @@ export type TagObject = DeepOmitReference<OpenAPIV3_1.TagObject>;
 export type ExampleObject = DeepOmitReference<OpenAPIV3_1.ExampleObject>;
 export type EncodingObject = DeepOmitReference<OpenAPIV3_1.EncodingObject>;
 export type SchemaObject = DeepOmitReference<OpenAPIV3_1.SchemaObject>;
+export type ServerObject = DeepOmitReference<OpenAPIV3_1.ServerObject>;
 
 export const HttpMethods = Object.values(OpenAPIV3.HttpMethods);
 

package/src/lib/plugins/custom-pages/CustomPage.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { ProseClasses } from "../../components/Markdown.js";
+import { cn } from "../../util/cn.js";
+import { useExposedProps } from "../../util/useExposedProps.js";
+import type { CustomPageConfig } from "./index.js";
+
+export const CustomPage = ({
+  element,
+  render,
+  prose = true,
+}: Omit<CustomPageConfig, "path">) => {
+  const slotletProps = useExposedProps();
+  const content = render ? React.createElement(render, slotletProps) : element;
+
+  return (
+    <div className={cn(prose && ProseClasses, "max-w-full")}>{content}</div>
+  );
+};

package/src/lib/plugins/custom-pages/index.tsx

@@ -0,0 +1,24 @@
+import { type ComponentType, type ReactNode } from "react";
+import type { RouteObject } from "react-router-dom";
+import { type ExposedComponentProps } from "../../components/SlotletProvider.js";
+import type { DevPortalPlugin, NavigationPlugin } from "../../core/plugins.js";
+import { CustomPage } from "./CustomPage.js";
+
+export type CustomPageConfig = {
+  path: string;
+  prose?: boolean;
+  element?: ReactNode;
+  render?: ComponentType<ExposedComponentProps>;
+};
+
+export const customPagesPlugin = (
+  config: CustomPageConfig[],
+): DevPortalPlugin & NavigationPlugin => {
+  return {
+    getRoutes: (): RouteObject[] =>
+      config.map(({ path, ...props }) => ({
+        path,
+        element: <CustomPage {...props} />,
+      })),
+  };
+};

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

@@ -1,4 +1,5 @@
 import { useMDXComponents } from "@mdx-js/react";
+import slugify from "@sindresorhus/slugify";
 import { Helmet } from "@zudoku/react-helmet-async";
 import { type PropsWithChildren } from "react";
 import { Link } from "react-router-dom";
@@ -11,7 +12,6 @@ import {
 } from "../../components/navigation/utils.js";
 import type { MdxComponentsType } from "../../util/MdxComponents.js";
 import { cn } from "../../util/cn.js";
-import slugify from "../../util/slugify.js";
 import { Toc } from "./Toc.js";
 import { MarkdownPluginDefaultOptions, MDXImport } from "./index.js";
 
@@ -71,7 +71,7 @@ export const MdxPage = ({
         <header>
           {category && <CategoryHeading>{category}</CategoryHeading>}
           {title && (
-            <Heading level={1} id={slugify(title, { lower: true })}>
+            <Heading level={1} id={slugify(title)}>
               {title}
             </Heading>
           )}

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/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/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>

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/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.
  */