zudoku 0.31.2 → 0.31.3

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

@@ -1,9 +1,8 @@
+import type { ResultOf } from "@graphql-typed-document-node/core";
 import slugify from "@sindresorhus/slugify";
 import { CirclePlayIcon, LogInIcon } from "lucide-react";
-import { matchPath, redirect, RouteObject } from "react-router";
-import type { SidebarItem } from "../../../config/validators/SidebarSchema.js";
+import { matchPath } from "react-router";
 import { useAuth } from "../../authentication/hook.js";
-import { ColorMap } from "../../components/navigation/SidebarBadge.js";
 import { type ZudokuPlugin } from "../../core/plugins.js";
 import type { SchemaImports } from "../../oas/graphql/index.js";
 import { Button } from "../../ui/Button.js";
@@ -13,6 +12,8 @@ import { graphql } from "./graphql/index.js";
 import { OasPluginConfig } from "./interfaces.js";
 import type { PlaygroundContentProps } from "./playground/Playground.js";
 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!) {
@@ -51,26 +52,18 @@ const GetOperationsQuery = graphql(`
   }
 `);
 
-type InternalOasPluginConfig = { schemaImports?: SchemaImports };
+export type OperationResult = ResultOf<
+  typeof GetOperationsQuery
+>["schema"]["operations"][number];
 
-const MethodColorMap: Record<string, keyof typeof ColorMap> = {
-  get: "green",
-  post: "blue",
-  put: "yellow",
-  delete: "red",
-  patch: "purple",
-  options: "gray",
-  head: "gray",
-};
+type InternalOasPluginConfig = { schemaImports?: SchemaImports };
 
 export type OpenApiPluginOptions = OasPluginConfig & InternalOasPluginConfig;
 
-const UNTAGGED_PATH = "~endpoints";
+export const UNTAGGED_PATH = "~endpoints";
 
 export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
   const basePath = joinUrl(config.navigationId ?? "/reference");
-  const versions = config.type === "file" ? Object.keys(config.input) : [];
-
   const client = new GraphQLClient(config);
 
   return {
@@ -138,86 +131,78 @@ export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
         return [];
       }
 
-      try {
-        const urlVersion = versions.find((v) =>
-          path.startsWith(joinUrl(basePath, v)),
-        );
-        const version = urlVersion ?? Object.keys(config.input).at(0);
-
-        const tagData = await client.fetch(GetCategoriesQuery, {
-          type: config.type,
-          input: config.type === "file" ? config.input[version!] : config.input,
-        });
+      const match = matchPath(
+        { path: `${basePath}/:version?/:tag`, end: true },
+        path,
+      );
 
-        const tag = config.tagPages?.find(
-          (tag) => path.split("/").at(-1) === slugify(tag),
+      try {
+        const versionParam = match?.params.version;
+        const version = versionParam ?? getVersions(config).at(0);
+        const type = config.type;
+        const input =
+          config.type === "file" ? config.input[version!] : config.input;
+
+        const collapsible = config.loadTags === true || config.type === "url";
+        const collapsed = !config.loadTags && config.type !== "url";
+
+        // find  tag name by slug in config.tagPages
+        const tagName = config.tagPages?.find(
+          (tag) => slugify(tag) === match?.params.tag,
         );
 
-        const operationsData = await client.fetch(GetOperationsQuery, {
-          type: config.type,
-          input: config.type === "file" ? config.input[version!] : config.input,
-          tag: !config.loadTags ? tag : undefined,
-        });
-
-        const categories = tagData.schema.tags.flatMap<SidebarItem>((tag) => {
-          const categoryLink = joinUrl(basePath, urlVersion, slugify(tag.name));
+        const [tagData, operationsData] = await Promise.all([
+          client.fetch(GetCategoriesQuery, { type, input }),
+          client.fetch(GetOperationsQuery, {
+            type,
+            input,
+            tag: !config.loadTags ? tagName : undefined,
+          }),
+        ]);
+
+        const categories = tagData.schema.tags.flatMap((tag) => {
+          const categoryPath = joinUrl(
+            basePath,
+            versionParam,
+            slugify(tag.name),
+          );
 
-          const operations = operationsData.schema.operations
-            .filter(
-              (operation) =>
-                operation.tags?.length !== 0 &&
-                operation.tags?.map((t) => t.name).includes(tag.name),
-            )
-            .map((operation) => ({
-              type: "link" as const,
-              label: operation.summary ?? operation.path,
-              href: `${categoryLink}#${operation.slug}`,
-              badge: {
-                label: operation.method,
-                color: MethodColorMap[operation.method.toLowerCase()]!,
-                invert: true,
-              } as const,
-            }));
+          const operations = operationsData.schema.operations.filter(
+            (operation) =>
+              operation.tags?.length !== 0 &&
+              operation.tags?.map((t) => t.name).includes(tag.name),
+          );
 
+          // skip empty categories
           if (config.loadTags && operations.length === 0) {
             return [];
           }
 
-          return {
-            type: "category",
+          return createSidebarCategory({
             label: tag.name,
-            link: {
-              type: "doc" as const,
-              id: categoryLink,
-              label: tag.name,
-            },
-            collapsible: config.loadTags,
-            collapsed: !config.loadTags,
-            items: operations,
-          };
+            path: categoryPath,
+            operations:
+              match?.params.tag !== UNTAGGED_PATH || config.loadTags
+                ? operations
+                : [],
+            collapsible,
+            collapsed,
+          });
         });
 
-        const { untagged } = operationsData.schema;
-
-        if (untagged.length > 0) {
-          const categoryLink = joinUrl(basePath, urlVersion, UNTAGGED_PATH);
-
-          categories.push({
-            type: "category",
-            label: "Other endpoints",
-            link: {
-              type: "doc" as const,
-              id: categoryLink,
+        if (operationsData.schema.untagged.length > 0) {
+          categories.push(
+            createSidebarCategory({
               label: "Other endpoints",
-            },
-            collapsible: config.loadTags,
-            collapsed: !config.loadTags,
-            items: untagged.map((operation) => ({
-              type: "link" as const,
-              label: operation.summary ?? operation.path,
-              href: `${categoryLink}#${operation.slug}`,
-            })),
-          });
+              path: joinUrl(basePath, versionParam, UNTAGGED_PATH),
+              operations:
+                match?.params.tag === UNTAGGED_PATH || config.loadTags
+                  ? operationsData.schema.untagged
+                  : [],
+              collapsible,
+              collapsed,
+            }),
+          );
         }
 
         return categories;
@@ -225,62 +210,6 @@ export const openApiPlugin = (config: OpenApiPluginOptions): ZudokuPlugin => {
         return [];
       }
     },
-    getRoutes: () => {
-      const versionsInPath = versions.length > 1 ? [null, ...versions] : [null];
-
-      const tagPages = (config.tagPages ?? []).map((tag) => ({
-        tag,
-        path: slugify(tag),
-      }));
-
-      return versionsInPath.map((version) => {
-        const versionPath = joinUrl(basePath, version);
-
-        return {
-          path: versionPath,
-          async lazy() {
-            const { OpenApiRoute } = await import("./OpenApiRoute.js");
-            return {
-              element: (
-                <OpenApiRoute
-                  version={version ?? undefined}
-                  basePath={basePath}
-                  versions={versions}
-                  client={client}
-                  config={config}
-                />
-              ),
-            };
-          },
-          children: [
-            {
-              index: true,
-              loader: () =>
-                redirect(
-                  joinUrl(versionPath, tagPages.at(0)?.path ?? UNTAGGED_PATH),
-                ),
-            },
-            {
-              path: joinUrl(versionPath, UNTAGGED_PATH),
-              async lazy() {
-                const { OperationList } = await import("./OperationList.js");
-                return { element: <OperationList untagged={true} /> };
-              },
-            },
-            ...tagPages.map<RouteObject>((tag) => {
-              return {
-                path: joinUrl(versionPath, tag.path),
-                async lazy() {
-                  const { OperationList } = await import("./OperationList.js");
-                  return {
-                    element: <OperationList tag={tag.tag} />,
-                  };
-                },
-              };
-            }),
-          ],
-        };
-      });
-    },
+    getRoutes: () => getRoutes({ basePath, config, client }),
   };
 };

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

@@ -0,0 +1,39 @@
+import type { SidebarItem } from "../../../../config/validators/SidebarSchema.js";
+import type { OperationResult } from "../index.js";
+import { MethodColorMap } from "./methodColorMap.js";
+
+export const createSidebarCategory = ({
+  label,
+  path,
+  operations,
+  collapsible,
+  collapsed,
+}: {
+  label: string;
+  path: string;
+  operations: OperationResult[];
+  collapsible?: boolean;
+  collapsed?: boolean;
+}): SidebarItem => ({
+  type: "category",
+  label,
+  link: {
+    type: "doc" as const,
+    id: path,
+    label,
+  },
+  collapsible,
+  collapsed,
+  items: operations.map((operation) => ({
+    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,
+    }),
+  })),
+});

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

@@ -0,0 +1,123 @@
+import slugify from "@sindresorhus/slugify";
+import { redirect, type RouteObject } from "react-router";
+import { joinUrl } from "../../../util/joinUrl.js";
+import type { GraphQLClient } from "../client/GraphQLClient.js";
+import { type OpenApiPluginOptions, UNTAGGED_PATH } from "../index.js";
+import type { OasPluginConfig } from "../interfaces.js";
+
+// Creates the main provider route that wraps operation routes.
+const createOasProvider = (opts: {
+  routePath: string;
+  basePath: string;
+  version?: string;
+  routes: RouteObject[];
+  client: GraphQLClient;
+  config: OpenApiPluginOptions;
+}): RouteObject => ({
+  path: opts.routePath,
+  async lazy() {
+    const { OasProvider } = await import("../OasProvider.js");
+    return {
+      element: (
+        <OasProvider
+          basePath={opts.basePath}
+          version={opts.version}
+          client={opts.client}
+          config={opts.config}
+        />
+      ),
+    };
+  },
+  children: opts.routes,
+});
+
+// Creates a route for displaying the operation list used for both tagged and untagged operations.
+const createRoute = ({
+  path,
+  tag,
+  untagged,
+}: {
+  path: string;
+  tag?: string;
+  untagged?: boolean;
+}): RouteObject => ({
+  path,
+  async lazy() {
+    const { OperationList } = await import("../OperationList.js");
+    return { element: <OperationList tag={tag} untagged={untagged} /> };
+  },
+});
+
+// Creates routes for a specific version, including tag-based routes and the untagged operations route.
+const createVersionRoutes = (
+  versionPath: string,
+  tagPages: string[],
+): RouteObject[] => {
+  const firstTagRoute = joinUrl(
+    versionPath,
+    tagPages[0] ? slugify(tagPages[0]) : UNTAGGED_PATH,
+  );
+
+  return [
+    // Redirect to first tag on the index route
+    { index: true, loader: () => redirect(firstTagRoute) },
+    // Create routes for each tag
+    ...tagPages.map((tag) =>
+      createRoute({
+        path: joinUrl(versionPath, slugify(tag)),
+        tag,
+      }),
+    ),
+    // Category without tagged operations
+    createRoute({
+      path: joinUrl(versionPath, UNTAGGED_PATH),
+      untagged: true,
+    }),
+  ];
+};
+
+export const getVersions = (config: OasPluginConfig) =>
+  config.type === "file" ? Object.keys(config.input) : [];
+
+export const getRoutes = ({
+  basePath,
+  config,
+  client,
+}: {
+  client: GraphQLClient;
+  config: OpenApiPluginOptions;
+  basePath: string;
+}): RouteObject[] => {
+  const tagPages = config.tagPages;
+
+  // If the config does not provide tag pages the catch-all
+  // route handles all operations on a single page
+  if (!tagPages) {
+    return [
+      createOasProvider({
+        basePath,
+        routePath: basePath,
+        routes: [createRoute({ path: basePath + "/:tag?" })],
+        client,
+        config,
+      }),
+    ];
+  }
+
+  const versions = getVersions(config);
+  // The latest version always is added as index path
+  const versionsInPath =
+    versions.length > 1 ? [undefined, ...versions] : [undefined];
+
+  return versionsInPath.map((version) => {
+    const versionPath = joinUrl(basePath, version);
+    return createOasProvider({
+      basePath,
+      version,
+      routePath: versionPath,
+      routes: createVersionRoutes(versionPath, tagPages),
+      client,
+      config,
+    });
+  });
+};

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

@@ -0,0 +1,11 @@
+import { ColorMap } from "../../../components/navigation/SidebarBadge.js";
+
+export const MethodColorMap: Record<string, keyof typeof ColorMap> = {
+  get: "green",
+  post: "blue",
+  put: "yellow",
+  delete: "red",
+  patch: "purple",
+  options: "gray",
+  head: "gray",
+};

package/dist/lib/plugins/openapi/OpenApiRoute.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Outlet } from "react-router";
-import { joinPath } from "../../util/joinPath.js";
-import { GraphQLProvider } from "./client/GraphQLContext.js";
-import { OasConfigProvider } from "./context.js";
-export const OpenApiRoute = ({ basePath, versions, version, config, client, }) => {
-    const input = config.type === "file"
-        ? {
-            type: config.type,
-            input: version
-                ? config.input[version]
-                : Object.values(config.input).at(0),
-        }
-        : { type: config.type, input: config.input };
-    const currentVersion = version ?? versions.at(0);
-    return (_jsx(OasConfigProvider, { value: {
-            config: {
-                ...config,
-                version: currentVersion,
-                versions: Object.fromEntries(versions.map((version) => [version, joinPath(basePath, version)])),
-                ...input,
-            },
-        }, children: _jsx(GraphQLProvider, { client: client, children: _jsx(Outlet, {}) }) }));
-};
-//# sourceMappingURL=OpenApiRoute.js.map

package/dist/lib/plugins/openapi/OpenApiRoute.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"OpenApiRoute.js","sourceRoot":"","sources":["../../../../src/lib/plugins/openapi/OpenApiRoute.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGjD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,MAAM,EACN,MAAM,GAOP,EAAE,EAAE;IACH,MAAM,KAAK,GACT,MAAM,CAAC,IAAI,KAAK,MAAM;QACpB,CAAC,CAAC;YACE,IAAI,EAAE,MAAM,CAAC,IAAI;YACjB,KAAK,EAAE,OAAO;gBACZ,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAE;gBACxB,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAE;SACvC;QACH,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,CAAC;IAEjD,MAAM,cAAc,GAAG,OAAO,IAAI,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAEjD,OAAO,CACL,KAAC,iBAAiB,IAChB,KAAK,EAAE;YACL,MAAM,EAAE;gBACN,GAAG,MAAM;gBACT,OAAO,EAAE,cAAc;gBACvB,QAAQ,EAAE,MAAM,CAAC,WAAW,CAC1B,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,EAAE,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,CAClE;gBACD,GAAG,KAAK;aACT;SACF,YAED,KAAC,eAAe,IAAC,MAAM,EAAE,MAAM,YAC7B,KAAC,MAAM,KAAG,GACM,GACA,CACrB,CAAC;AACJ,CAAC,CAAC"}

package/lib/OpenApiRoute-BP9kzG5k.js

@@ -1,36 +0,0 @@
-import { j as e } from "./jsx-runtime-Bdg6XQ1m.js";
-import { O as n } from "./chunk-SYFQ2XB5-QijJrSf0.js";
-import { j as m } from "./hook-Dnj3SwPC.js";
-import { O as j, G as O } from "./context-rwLGh-6_.js";
-const h = ({
-  basePath: i,
-  versions: p,
-  version: r,
-  config: t,
-  client: a
-}) => {
-  const o = t.type === "file" ? {
-    type: t.type,
-    input: r ? t.input[r] : Object.values(t.input).at(0)
-  } : { type: t.type, input: t.input }, u = r ?? p.at(0);
-  return /* @__PURE__ */ e.jsx(
-    j,
-    {
-      value: {
-        config: {
-          ...t,
-          version: u,
-          versions: Object.fromEntries(
-            p.map((s) => [s, m(i, s)])
-          ),
-          ...o
-        }
-      },
-      children: /* @__PURE__ */ e.jsx(O, { client: a, children: /* @__PURE__ */ e.jsx(n, {}) })
-    }
-  );
-};
-export {
-  h as OpenApiRoute
-};
-//# sourceMappingURL=OpenApiRoute-BP9kzG5k.js.map

package/lib/OpenApiRoute-BP9kzG5k.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"OpenApiRoute-BP9kzG5k.js","sources":["../src/lib/plugins/openapi/OpenApiRoute.tsx"],"sourcesContent":["import { Outlet } from \"react-router\";\nimport { joinPath } from \"../../util/joinPath.js\";\nimport type { GraphQLClient } from \"./client/GraphQLClient.js\";\nimport { GraphQLProvider } from \"./client/GraphQLContext.js\";\nimport { OasConfigProvider } from \"./context.js\";\nimport { type OasPluginConfig } from \"./interfaces.js\";\n\nexport const OpenApiRoute = ({\n  basePath,\n  versions,\n  version,\n  config,\n  client,\n}: {\n  basePath: string;\n  version?: string;\n  versions: string[];\n  config: OasPluginConfig;\n  client: GraphQLClient;\n}) => {\n  const input =\n    config.type === \"file\"\n      ? {\n          type: config.type,\n          input: version\n            ? config.input[version]!\n            : Object.values(config.input).at(0)!,\n        }\n      : { type: config.type, input: config.input };\n\n  const currentVersion = version ?? versions.at(0);\n\n  return (\n    <OasConfigProvider\n      value={{\n        config: {\n          ...config,\n          version: currentVersion,\n          versions: Object.fromEntries(\n            versions.map((version) => [version, joinPath(basePath, version)]),\n          ),\n          ...input,\n        },\n      }}\n    >\n      <GraphQLProvider client={client}>\n        <Outlet />\n      </GraphQLProvider>\n    </OasConfigProvider>\n  );\n};\n"],"names":["OpenApiRoute","basePath","versions","version","config","client","input","currentVersion","jsx","OasConfigProvider","joinPath","GraphQLProvider","Outlet"],"mappings":";;;;AAOO,MAAMA,IAAe,CAAC;AAAA,EAC3B,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AACF,MAMM;AACE,QAAAC,IACJF,EAAO,SAAS,SACZ;AAAA,IACE,MAAMA,EAAO;AAAA,IACb,OAAOD,IACHC,EAAO,MAAMD,CAAO,IACpB,OAAO,OAAOC,EAAO,KAAK,EAAE,GAAG,CAAC;AAAA,EAAA,IAEtC,EAAE,MAAMA,EAAO,MAAM,OAAOA,EAAO,MAAM,GAEzCG,IAAiBJ,KAAWD,EAAS,GAAG,CAAC;AAG7C,SAAAM,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,QAAQ;AAAA,UACN,GAAGL;AAAA,UACH,SAASG;AAAA,UACT,UAAU,OAAO;AAAA,YACfL,EAAS,IAAI,CAACC,MAAY,CAACA,GAASO,EAAST,GAAUE,CAAO,CAAC,CAAC;AAAA,UAClE;AAAA,UACA,GAAGG;AAAA,QAAA;AAAA,MAEP;AAAA,MAEA,UAACE,gBAAAA,EAAAA,IAAAG,GAAA,EAAgB,QAAAN,GACf,UAAAG,gBAAAA,EAAA,IAACI,KAAO,EACV,CAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}