zudoku 0.35.5 → 0.36.0

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

@@ -160,8 +160,10 @@ export type SchemaTagsArgs = {
 export type SchemaTag = {
   __typename?: "SchemaTag";
   description?: Maybe<Scalars["String"]["output"]>;
-  name: Scalars["String"]["output"];
+  extensions?: Maybe<Scalars["JSONObject"]["output"]>;
+  name?: Maybe<Scalars["String"]["output"]>;
   operations: Array<OperationItem>;
+  slug?: Maybe<Scalars["String"]["output"]>;
 };
 
 export type SchemaType = "file" | "raw" | "url";
@@ -263,14 +265,24 @@ export type OperationsFragmentFragment = {
   }>;
 } & { " $fragmentName"?: "OperationsFragmentFragment" };
 
-export type AllOperationsQueryVariables = Exact<{
+export type SchemaWarmupQueryVariables = Exact<{
+  input: Scalars["JSON"]["input"];
+  type: SchemaType;
+}>;
+
+export type SchemaWarmupQuery = {
+  __typename?: "Query";
+  schema: { __typename?: "Schema"; openapi: string };
+};
+
+export type OperationsForTagQueryVariables = Exact<{
   input: Scalars["JSON"]["input"];
   type: SchemaType;
   tag?: InputMaybe<Scalars["String"]["input"]>;
   untagged?: InputMaybe<Scalars["Boolean"]["input"]>;
 }>;
 
-export type AllOperationsQuery = {
+export type OperationsForTagQuery = {
   __typename?: "Query";
   schema: {
     __typename?: "Schema";
@@ -282,7 +294,7 @@ export type AllOperationsQuery = {
     servers: Array<{ __typename?: "Server"; url: string }>;
     tags: Array<{
       __typename?: "SchemaTag";
-      name: string;
+      name?: string | null;
       description?: string | null;
     }>;
     operations: Array<
@@ -309,48 +321,28 @@ export type GetServerQueryQuery = {
   };
 };
 
-export type GetCategoriesQueryVariables = Exact<{
-  input: Scalars["JSON"]["input"];
-  type: SchemaType;
-}>;
-
-export type GetCategoriesQuery = {
-  __typename?: "Query";
-  schema: {
-    __typename?: "Schema";
-    url?: string | null;
-    tags: Array<{ __typename?: "SchemaTag"; name: string }>;
-  };
-};
-
-export type GetOperationsQueryVariables = Exact<{
+export type GetSidebarOperationsQueryVariables = Exact<{
   input: Scalars["JSON"]["input"];
   type: SchemaType;
-  tag?: InputMaybe<Scalars["String"]["input"]>;
 }>;
 
-export type GetOperationsQuery = {
+export type GetSidebarOperationsQuery = {
   __typename?: "Query";
   schema: {
     __typename?: "Schema";
-    operations: Array<{
-      __typename?: "OperationItem";
-      slug: string;
-      deprecated?: boolean | null;
-      method: string;
-      summary?: string | null;
-      operationId?: string | null;
-      path: string;
-      tags?: Array<{ __typename?: "TagItem"; name: string }> | null;
-    }>;
-    untagged: Array<{
-      __typename?: "OperationItem";
-      slug: string;
-      deprecated?: boolean | null;
-      method: string;
-      summary?: string | null;
-      operationId?: string | null;
-      path: string;
+    tags: Array<{
+      __typename?: "SchemaTag";
+      slug?: string | null;
+      name?: string | null;
+      extensions?: any | null;
+      operations: Array<{
+        __typename?: "OperationItem";
+        summary?: string | null;
+        slug: string;
+        method: string;
+        operationId?: string | null;
+        path: string;
+      }>;
     }>;
   };
 };
@@ -360,12 +352,13 @@ export class TypedDocumentString<TResult, TVariables>
   implements DocumentTypeDecoration<TResult, TVariables>
 {
   __apiType?: DocumentTypeDecoration<TResult, TVariables>["__apiType"];
+  private value: string;
+  public __meta__?: Record<string, any> | undefined;
 
-  constructor(
-    private value: string,
-    public __meta__?: Record<string, any> | undefined,
-  ) {
+  constructor(value: string, __meta__?: Record<string, any> | undefined) {
     super(value);
+    this.value = value;
+    this.__meta__ = __meta__;
   }
 
   toString(): string & DocumentTypeDecoration<TResult, TVariables> {
@@ -454,8 +447,18 @@ export const ServersQueryDocument = new TypedDocumentString(`
   ServersQueryQuery,
   ServersQueryQueryVariables
 >;
-export const AllOperationsDocument = new TypedDocumentString(`
-    query AllOperations($input: JSON!, $type: SchemaType!, $tag: String, $untagged: Boolean) {
+export const SchemaWarmupDocument = new TypedDocumentString(`
+    query SchemaWarmup($input: JSON!, $type: SchemaType!) {
+  schema(input: $input, type: $type) {
+    openapi
+  }
+}
+    `) as unknown as TypedDocumentString<
+  SchemaWarmupQuery,
+  SchemaWarmupQueryVariables
+>;
+export const OperationsForTagDocument = new TypedDocumentString(`
+    query OperationsForTag($input: JSON!, $type: SchemaType!, $tag: String, $untagged: Boolean) {
   schema(input: $input, type: $type) {
     servers {
       url
@@ -539,8 +542,8 @@ export const AllOperationsDocument = new TypedDocumentString(`
     }
   }
 }`) as unknown as TypedDocumentString<
-  AllOperationsQuery,
-  AllOperationsQueryVariables
+  OperationsForTagQuery,
+  OperationsForTagQueryVariables
 >;
 export const GetServerQueryDocument = new TypedDocumentString(`
     query getServerQuery($input: JSON!, $type: SchemaType!) {
@@ -555,44 +558,24 @@ export const GetServerQueryDocument = new TypedDocumentString(`
   GetServerQueryQuery,
   GetServerQueryQueryVariables
 >;
-export const GetCategoriesDocument = new TypedDocumentString(`
-    query GetCategories($input: JSON!, $type: SchemaType!) {
+export const GetSidebarOperationsDocument = new TypedDocumentString(`
+    query GetSidebarOperations($input: JSON!, $type: SchemaType!) {
   schema(input: $input, type: $type) {
-    url
     tags {
-      name
-    }
-  }
-}
-    `) as unknown as TypedDocumentString<
-  GetCategoriesQuery,
-  GetCategoriesQueryVariables
->;
-export const GetOperationsDocument = new TypedDocumentString(`
-    query GetOperations($input: JSON!, $type: SchemaType!, $tag: String) {
-  schema(input: $input, type: $type) {
-    operations(tag: $tag) {
       slug
-      deprecated
-      method
-      summary
-      operationId
-      path
-      tags {
-        name
+      name
+      extensions
+      operations {
+        summary
+        slug
+        method
+        operationId
+        path
       }
     }
-    untagged: operations(untagged: true) {
-      slug
-      deprecated
-      method
-      summary
-      operationId
-      path
-    }
   }
 }
     `) as unknown as TypedDocumentString<
-  GetOperationsQuery,
-  GetOperationsQueryVariables
+  GetSidebarOperationsQuery,
+  GetSidebarOperationsQueryVariables
 >;

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

@@ -1,14 +1,12 @@
-import type { ResultOf } from "@graphql-typed-document-node/core";
-import slugify from "@sindresorhus/slugify";
 import { CirclePlayIcon, LogInIcon } from "lucide-react";
 import { type ReactNode } from "react";
 import { matchPath } from "react-router";
 import { useAuth } from "../../authentication/hook.js";
 import { type ZudokuPlugin } from "../../core/plugins.js";
-import type { SchemaImports } from "../../oas/graphql/index.js";
 import { Button } from "../../ui/Button.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import { GraphQLClient } from "./client/GraphQLClient.js";
+import type { GetSidebarOperationsQuery } from "./graphql/graphql.js";
 import { graphql } from "./graphql/index.js";
 import { type OasPluginConfig } from "./interfaces.js";
 import type { PlaygroundContentProps } from "./playground/Playground.js";
@@ -16,54 +14,33 @@ import { PlaygroundDialog } from "./playground/PlaygroundDialog.js";
 import { createSidebarCategory } from "./util/createSidebarCategory.js";
 import { getRoutes, getVersions } from "./util/getRoutes.js";
 
-const GetCategoriesQuery = graphql(`
-  query GetCategories($input: JSON!, $type: SchemaType!) {
+const GetSidebarOperationsQuery = graphql(`
+  query GetSidebarOperations($input: JSON!, $type: SchemaType!) {
     schema(input: $input, type: $type) {
-      url
       tags {
-        name
-      }
-    }
-  }
-`);
-
-const GetOperationsQuery = graphql(`
-  query GetOperations($input: JSON!, $type: SchemaType!, $tag: String) {
-    schema(input: $input, type: $type) {
-      operations(tag: $tag) {
         slug
-        deprecated
-        method
-        summary
-        operationId
-        path
-        tags {
-          name
+        name
+        extensions
+        operations {
+          summary
+          slug
+          method
+          operationId
+          path
         }
       }
-      untagged: operations(untagged: true) {
-        slug
-        deprecated
-        method
-        summary
-        operationId
-        path
-      }
     }
   }
 `);
 
-export type OperationResult = ResultOf<
-  typeof GetOperationsQuery
->["schema"]["operations"][number];
-
-type InternalOasPluginConfig = { schemaImports?: SchemaImports };
+export type OperationResult =
+  GetSidebarOperationsQuery["schema"]["tags"][number]["operations"][number];
 
-export type OpenApiPluginOptions = OasPluginConfig & InternalOasPluginConfig;
+export type OpenApiPluginOptions = OasPluginConfig;
 
 export const UNTAGGED_PATH = "~endpoints";
 
-export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
+export const openApiPlugin = (config: OasPluginConfig): ZudokuPlugin => {
   const basePath = joinUrl(config.navigationId ?? "/reference");
   const client = new GraphQLClient(config);
 
@@ -134,7 +111,7 @@ export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
         );
       },
     }),
-    getSidebar: async (path: string) => {
+    getSidebar: async (path, context) => {
       if (!matchPath({ path: basePath, end: false }, path)) {
         return [];
       }
@@ -147,67 +124,46 @@ export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
       try {
         const versionParam = match?.params.version;
         const version = versionParam ?? getVersions(config).at(0);
-        const { type, options } = config;
+        const { type } = config;
         const input = type === "file" ? config.input[version!] : config.input;
 
-        const collapsible = options?.loadTags === true || config.type === "url";
-        const collapsed = !options?.loadTags && config.type !== "url";
-
-        // find  tag name by slug in config.tagPages
-        const tagName = config.tagPages?.find(
-          (tag) => slugify(tag) === match?.params.tag,
-        );
+        const data = await context.queryClient.ensureQueryData({
+          queryKey: ["sidebar-operations-query", input],
+          queryFn: () =>
+            client.fetch(GetSidebarOperationsQuery, { type, input }),
+        });
 
-        const [tagData, operationsData] = await Promise.all([
-          client.fetch(GetCategoriesQuery, { type, input }),
-          client.fetch(GetOperationsQuery, {
-            type,
-            input,
-            tag: !options?.loadTags ? tagName : undefined,
-          }),
-        ]);
-
-        const categories = tagData.schema.tags.flatMap((tag) => {
-          const categoryPath = joinUrl(
-            basePath,
-            versionParam,
-            slugify(tag.name),
-          );
+        const categories = data.schema.tags.flatMap((tag) => {
+          if (!tag.name || tag.operations.length === 0) return [];
 
-          const operations = operationsData.schema.operations.filter(
-            (operation) =>
-              operation.tags?.length !== 0 &&
-              operation.tags?.map((t) => t.name).includes(tag.name),
-          );
+          const categoryPath = joinUrl(basePath, versionParam, tag.slug);
 
-          // skip empty categories
-          if (options?.loadTags && operations.length === 0) {
-            return [];
-          }
+          const isCollapsed =
+            tag.extensions?.["x-zudoku-collapsed"] ??
+            !config.options?.expandAllTags;
+          const isCollapsible =
+            tag.extensions?.["x-zudoku-collapsible"] ?? true;
 
           return createSidebarCategory({
             label: tag.name,
             path: categoryPath,
-            operations:
-              match?.params.tag !== UNTAGGED_PATH || options?.loadTags
-                ? operations
-                : [],
-            collapsible,
-            collapsed,
+            operations: tag.operations,
+            collapsed: isCollapsed,
+            collapsible: isCollapsible,
           });
         });
 
-        if (operationsData.schema.untagged.length > 0) {
+        const untaggedOperations = data.schema.tags.find(
+          (tag) => !tag.name,
+        )?.operations;
+
+        if (untaggedOperations) {
           categories.push(
             createSidebarCategory({
               label: "Other endpoints",
               path: joinUrl(basePath, versionParam, UNTAGGED_PATH),
-              operations:
-                match?.params.tag === UNTAGGED_PATH || options?.loadTags
-                  ? operationsData.schema.untagged
-                  : [],
-              collapsible,
-              collapsed,
+              operations: untaggedOperations,
+              collapsed: !config.options?.expandAllTags,
             }),
           );
         }

package/src/lib/plugins/openapi/interfaces.ts

@@ -1,3 +1,5 @@
+import type { SchemaImports } from "../../oas/graphql/index.js";
+
 type DynamicInput = () => Promise<unknown>;
 
 type OasSource =
@@ -15,11 +17,12 @@ type BaseOasConfig = {
   navigationId?: string;
   skipPreload?: boolean;
   tagPages?: Array<string>;
+  schemaImports?: SchemaImports;
   options?: {
     examplesLanguage?: string;
     disablePlayground?: boolean;
-    loadTags?: boolean;
     showVersionSelect?: "always" | "if-available" | "hide";
+    expandAllTags?: boolean;
   };
 };
 

package/src/lib/plugins/openapi/util/createSidebarCategory.tsx

@@ -28,12 +28,10 @@ export const createSidebarCategory = ({
     type: "link" as const,
     label: operation.summary ?? operation.path,
     href: `${path}#${operation.slug}`,
-    ...(operation.method && {
-      badge: {
-        label: operation.method,
-        color: MethodColorMap[operation.method.toLowerCase()]!,
-        invert: true,
-      } as const,
-    }),
+    badge: {
+      label: operation.method,
+      color: MethodColorMap[operation.method.toLowerCase()]!,
+      invert: true,
+    },
   })),
 });

package/src/lib/util/traverse.ts

@@ -20,11 +20,11 @@ export const traverse = <T extends JsonValue = RecordAny>(
   for (const [key, value] of Object.entries(transformed)) {
     if (Array.isArray(value)) {
       result[key] = value.map((item) =>
-        typeof item === "object" && item !== null
+        typeof item === "object" && item != null
           ? traverse(item, transform)
           : item,
       );
-    } else if (typeof value === "object" && value !== null) {
+    } else if (typeof value === "object" && value != null) {
       result[key] = traverse(value, transform);
     } else {
       result[key] = value;

package/src/lib/util/useScrollToAnchor.ts

@@ -23,6 +23,8 @@ export const useScrollToHash = () => {
       if (element) {
         element.scrollIntoView();
         scrollIntoViewIfNeeded(link);
+        // Set the active anchor after the scroll has happened
+        // so the intersection observer doesn't trigger wrong items
         requestIdleCallback(() => setActiveAnchor(linkHash));
         return true;
       }