zudoku 0.3.0-dev.31 → 0.3.0-dev.32

package/src/lib/components/SyntaxHighlight.tsx

@@ -7,25 +7,23 @@ import {
 
 import { CheckIcon, CopyIcon } from "lucide-react";
 
-if (!import.meta.env.SSR) {
-  globalThis.Prism = Prism;
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-bash.min.js");
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-ruby.min.js");
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-markup-templating.js");
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-php.min.js");
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-json.min.js");
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-java.min.js");
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-csharp.min.js");
-  // @ts-expect-error This is untyped
-  import("prismjs/components/prism-objectivec.min.js");
-}
+globalThis.Prism = Prism;
+// @ts-expect-error This is untyped
+import("prismjs/components/prism-bash.min.js");
+// @ts-expect-error This is untyped
+import("prismjs/components/prism-ruby.min.js");
+// @ts-expect-error This is untyped
+import("prismjs/components/prism-markup-templating.js");
+// @ts-expect-error This is untyped
+import("prismjs/components/prism-php.min.js");
+// @ts-expect-error This is untyped
+import("prismjs/components/prism-json.min.js");
+// @ts-expect-error This is untyped
+import("prismjs/components/prism-java.min.js");
+// @ts-expect-error This is untyped
+import("prismjs/components/prism-csharp.min.js");
+// @ts-expect-error This is untyped
+import("prismjs/components/prism-objectivec.min.js");
 
 import { useState } from "react";
 import { cn } from "../util/cn.js";
@@ -37,10 +35,12 @@ type SyntaxHighlightProps = {
   wrapLines?: boolean;
   copyable?: boolean;
   showLanguageIndicator?: boolean;
-} & Omit<HighlightProps, "children">;
+  language?: string;
+} & Omit<HighlightProps, "children" | "language">;
 
 export const SyntaxHighlight = ({
   copyable = true,
+  language = "plain",
   ...props
 }: SyntaxHighlightProps) => {
   const [isDark] = useTheme();
@@ -51,7 +51,11 @@ export const SyntaxHighlight = ({
   }
 
   return (
-    <Highlight theme={isDark ? themes.vsDark : themes.github} {...props}>
+    <Highlight
+      theme={isDark ? themes.vsDark : themes.github}
+      language={language}
+      {...props}
+    >
       {({ className, style, tokens, getLineProps, getTokenProps }) => (
         <pre
           className={cn(
@@ -88,7 +92,7 @@ export const SyntaxHighlight = ({
           )}
           {props.showLanguageIndicator && (
             <span className="absolute top-1.5 right-3 text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0">
-              {props.language}
+              {language}
             </span>
           )}
           {tokens.map((line, i) => (

package/src/lib/errors/RouterError.tsx

@@ -1,12 +1,13 @@
-import { useRouteError } from "react-router-dom";
-import { Layout } from "../components/Layout.js";
+import { isRouteErrorResponse, useRouteError } from "react-router-dom";
+import { NotFoundPage } from "../components/NotFoundPage.js";
 import { ErrorAlert } from "./ErrorAlert.js";
 
 export function RouterError() {
   const error = useRouteError();
-  return (
-    <Layout>
-      <ErrorAlert error={error} />
-    </Layout>
-  );
+
+  if (isRouteErrorResponse(error) && error.status === 404) {
+    return <NotFoundPage />;
+  }
+
+  return <ErrorAlert error={error} />;
 }

package/src/lib/errors/ServerError.tsx

@@ -0,0 +1,5 @@
+import { ErrorAlert } from "./ErrorAlert.js";
+
+export function ServerError({ error }: { error: unknown }) {
+  return <ErrorAlert error={error} />;
+}

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

@@ -1,3 +1,4 @@
+import { GraphQLError } from "graphql/error/index.js";
 import { OpenAPIV3, type OpenAPIV3_1 } from "openapi-types";
 import { dereference, type JSONSchema } from "./dereference/index.js";
 import { upgradeSchema } from "./upgrade/index.js";
@@ -9,10 +10,6 @@ type DeepOmitReference<T> = T extends ReferenceObject
     ? { [K in keyof T]: DeepOmitReference<T[K]> }
     : T;
 
-// type Prettify<T> = {
-//   [K in keyof T]: T[K];
-// } & {};
-
 export type OpenAPIDocument = DeepOmitReference<OpenAPIV3_1.Document>;
 export type ResponseObject = DeepOmitReference<OpenAPIV3_1.ResponseObject>;
 export type OperationObject = DeepOmitReference<OpenAPIV3_1.OperationObject>;
@@ -46,37 +43,63 @@ export const HttpMethods = Object.values(OpenAPIV3.HttpMethods);
 // };
 
 const parseSchemaInput = async (
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  schemaInput: any,
+  schemaInput: unknown,
 ): Promise<JSONSchema & { openapi?: string }> => {
   if (typeof schemaInput === "string") {
     if (schemaInput.trim().startsWith("{")) {
-      return JSON.parse(schemaInput);
+      try {
+        return JSON.parse(schemaInput);
+      } catch (err) {
+        throw new GraphQLError("Invalid JSON schema", {
+          originalError: err,
+        });
+      }
     }
     if (schemaInput.includes("://")) {
-      const response = await fetch(schemaInput, {
-        cache: "force-cache",
-      });
-      return (await response.json()) as JSONSchema;
+      let response;
+      try {
+        response = await fetch(schemaInput, {
+          cache: "force-cache",
+        });
+      } catch (err) {
+        throw new GraphQLError("Failed to fetch schema", {
+          originalError: err,
+        });
+      }
+
+      if (!response.ok) {
+        throw new GraphQLError(
+          `Failed to fetch schema: ${response.statusText}`,
+        );
+      }
+
+      try {
+        return (await response.json()) as JSONSchema;
+      } catch (err) {
+        throw new GraphQLError("Fetched invalid JSON schema", {
+          originalError: err,
+        });
+      }
     }
     const yaml = await import("yaml");
-    return yaml.parse(schemaInput);
+    const parsed = yaml.parse(schemaInput);
+
+    if (typeof parsed === "object") return parsed;
   }
 
-  if (typeof schemaInput === "object") return schemaInput;
+  if (typeof schemaInput === "object") return schemaInput as JSONSchema;
 
-  throw new Error("Unsupported schema input");
+  throw new GraphQLError("Unsupported schema input: " + schemaInput);
 };
 
 /**
  * Validates, dereferences and upgrades the OpenAPI schema (to v3.1) if necessary.
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const validate = async (schemaInput: any) => {
+export const validate = async (schemaInput: unknown) => {
   const schema = await parseSchemaInput(schemaInput);
 
   if (!schema.openapi) {
-    throw new Error("OpenAPI version is not defined");
+    throw new GraphQLError("OpenAPI version is not defined");
   }
 
   // const validator = await getValidator(schema.openapi);
@@ -88,9 +111,5 @@ export const validate = async (schemaInput: any) => {
 
   const dereferenced = await dereference(schema);
 
-  const upgraded = upgradeSchema(
-    dereferenced as OpenAPIV3_1.Document | OpenAPIV3.Document,
-  );
-
-  return upgraded;
+  return upgradeSchema(dereferenced);
 };

package/src/lib/plugins/api-keys/index.tsx

@@ -1,5 +1,4 @@
-import logger from "loglevel";
-import { Outlet, useRouteError } from "react-router-dom";
+import { Outlet, type RouteObject } from "react-router-dom";
 import invariant from "tiny-invariant";
 import { useAuth } from "../../authentication/hook.js";
 import { DevPortalContext } from "../../core/DevPortalContext.js";
@@ -7,6 +6,7 @@ import {
   type ApiIdentityPlugin,
   type DevPortalPlugin,
 } from "../../core/plugins.js";
+import { RouterError } from "../../errors/RouterError.js";
 import { Button } from "../../ui/Button.js";
 import { CreateApiKey } from "./CreateApiKey.js";
 import { SettingsApiKeys } from "./SettingsApiKeys.js";
@@ -100,18 +100,6 @@ const ProtectedRoute = () => {
   );
 };
 
-const SettingsErrorBoundary = () => {
-  const error = useRouteError();
-  logger.error(String(error));
-
-  return (
-    <div className="flex flex-col justify-center gap-2 items-center h-1/2 my-12">
-      <h1>Something went wrong</h1>
-      {error instanceof Error && <p>{error.message}</p>}
-    </div>
-  );
-};
-
 export const apiKeyPlugin = (
   options: ApiKeyPluginOptions,
 ): DevPortalPlugin & ApiIdentityPlugin => {
@@ -138,12 +126,12 @@ export const apiKeyPlugin = (
         return [];
       }
     },
-    getRoutes: () => {
+    getRoutes: (): RouteObject[] => {
       // TODO: Make lazy
       return [
         {
           element: <ProtectedRoute />,
-          errorElement: <SettingsErrorBoundary />,
+          errorElement: <RouterError />,
           children: [
             {
               path: "/settings/api-keys",

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

@@ -45,7 +45,7 @@ export const generateRoutes = (
     },
   );
 
-  const rootRoutes = Array.from(
+  const rootRoutes: RouteObject[] = Array.from(
     new Set(routes.map((route) => route.path.split("/").at(0))),
   ).map((dir) => ({
     path: `/${dir}`,

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

@@ -29,10 +29,6 @@ export type MDXImport = {
 export const markdownPlugin = ({
   markdownFiles,
   defaultOptions,
-}: MarkdownPluginOptions): DevPortalPlugin => {
-  return {
-    getRoutes() {
-      return generateRoutes(markdownFiles, defaultOptions);
-    },
-  };
-};
+}: MarkdownPluginOptions): DevPortalPlugin => ({
+  getRoutes: () => generateRoutes(markdownFiles, defaultOptions),
+});

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

@@ -1,7 +1,11 @@
 import { ResultOf } from "@graphql-typed-document-node/core";
 import { CategoryHeading } from "../../components/CategoryHeading.js";
+import { ErrorPage } from "../../components/ErrorPage.js";
 import { Heading } from "../../components/Heading.js";
+import { InlineCode } from "../../components/InlineCode.js";
 import { Markdown } from "../../components/Markdown.js";
+import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
+import { Callout } from "../../ui/Callout.js";
 import { cn } from "../../util/cn.js";
 import { OperationListItem } from "./OperationListItem.js";
 import { useOasConfig } from "./context.js";
@@ -91,6 +95,32 @@ export const OperationList = () => {
     context: suspenseContext,
   });
 
+  const error = result.error?.graphQLErrors.at(0);
+
+  // Looks like there is no Suspense level error handling (yet)?
+  // So we handle the error case in the component directly
+  if (error) {
+    return (
+      <ErrorPage
+        category="Error"
+        title="Schema cannot be displayed"
+        message={
+          <>
+            {import.meta.env.DEV && (
+              <Callout type="danger" title="Developer hint" className="mb-4">
+                Check your configuration value{" "}
+                <InlineCode>apis.type</InlineCode> and{" "}
+                <InlineCode>apis.input</InlineCode> in the Zudoku config.
+              </Callout>
+            )}
+            An error occurred while trying to fetch the API reference:
+            <SyntaxHighlight code={error.toString()} language="plain" />
+          </>
+        }
+      />
+    );
+  }
+
   if (!result.data) return null;
 
   return (

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

@@ -1,6 +1,7 @@
 import { Heading } from "../../components/Heading.js";
 import { Markdown } from "../../components/Markdown.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../ui/Tabs.js";
+import { groupBy } from "../../util/groupBy.js";
 import { renderIf } from "../../util/renderIf.js";
 import { OperationsFragment } from "./OperationList.js";
 import { ParameterList } from "./ParameterList.js";
@@ -18,10 +19,11 @@ export const OperationListItem = ({
   operationFragment: FragmentType<typeof OperationsFragment>;
 }) => {
   const operation = useFragment(OperationsFragment, operationFragment);
-  const groupedParameters = Object.groupBy(
+  const groupedParameters = groupBy(
     operation.parameters ?? [],
     (param) => param.in,
   );
+
   const first = operation.responses.at(0);
   return (
     <div

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

@@ -1,5 +1,6 @@
 import { Markdown } from "../../components/Markdown.js";
 import { SchemaObject } from "../../oas/parser/index.js";
+import { groupBy } from "../../util/groupBy.js";
 import { objectEntries } from "../../util/objectEntries.js";
 import { SchemaListViewItemGroup } from "./SchemaListViewItemGroup.js";
 import { SchemaProseClasses } from "./util/prose.js";
@@ -25,16 +26,13 @@ export const SchemaListView = ({
     Array.isArray(additionalProperties) ? additionalProperties : [],
   );
 
-  const groups = Object.groupBy(
-    combinedProperties,
-    ([propertyName, property]) => {
-      return property.deprecated
-        ? "deprecated"
-        : schema.required?.includes(propertyName)
-          ? "required"
-          : "optional";
-    },
-  );
+  const groups = groupBy(combinedProperties, ([propertyName, property]) => {
+    return property.deprecated
+      ? "deprecated"
+      : schema.required?.includes(propertyName)
+        ? "required"
+        : "optional";
+  });
 
   return (
     <div className="flex flex-col gap-2.5">

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

@@ -25,7 +25,7 @@ export const createClient: CreateClientFunction = () => {
     fetch: async (req, init) => {
       if (!init?.body) throw new Error("No body");
       const response = await localServer.fetch(
-        new Request("/__z/graphql", {
+        new Request("http://localhost/__z/graphql", {
           method: "POST",
           body: init.body,
           headers: {

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

@@ -1,4 +1,4 @@
-import { matchPath, type RouteObject } from "react-router-dom";
+import { matchPath, useRouteError, type RouteObject } from "react-router-dom";
 import {
   type DevPortalPlugin,
   type PluginNavigationCategory,
@@ -12,6 +12,8 @@ import {
 } from "./util/urql.js";
 
 import { createClient } from "virtual:zudoku-openapi-worker";
+import { ErrorPage } from "../../components/ErrorPage.js";
+import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
 import { OasPluginConfig } from "./interfaces.js";
 
 const GetCategoriesQuery = graphql(`
@@ -34,6 +36,20 @@ const GetCategoriesQuery = graphql(`
   }
 `);
 
+const OpenApiErrorPage = () => {
+  const error = useRouteError();
+  const message =
+    error instanceof Error ? (
+      <SyntaxHighlight code={error.message} />
+    ) : (
+      "An unknown error occurred"
+    );
+
+  return (
+    <ErrorPage category="Error" title="An error occurred" message={message} />
+  );
+};
+
 export const openApiPlugin = (config: OasPluginConfig): DevPortalPlugin => {
   const basePath = config.path ?? "/reference";
 
@@ -112,6 +128,7 @@ export const openApiPlugin = (config: OasPluginConfig): DevPortalPlugin => {
               element: <OpenApiRoute client={client} config={config} />,
             };
           },
+          errorElement: <OpenApiErrorPage />,
           children: [
             {
               path: basePath,

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

@@ -1,4 +1,4 @@
-import { Navigate } from "react-router-dom";
+import { redirect } from "react-router-dom";
 import type { DevPortalPlugin } from "../../core/plugins.js";
 
 export type Redirect = {
@@ -14,7 +14,7 @@ export const redirectPlugin = (options: {
     getRoutes: () =>
       options.redirects.map(({ from, to, replace }) => ({
         path: from,
-        element: <Navigate to={to} replace={replace} />,
+        loader: () => redirect(to),
       })),
   };
 };

package/src/lib/ui/Callout.tsx

@@ -64,9 +64,9 @@ export const Callout = ({ type, children, title, className }: CalloutProps) => {
   return (
     <div
       className={cn(
-        "not-prose grid grid-cols-[fit-content_1fr] grid-rows-[fit-content_1fr] gap-x-4 gap-y-2 text-md rounded-md border p-4",
+        "not-prose grid grid-cols-[min-content_1fr] grid-rows-[fit-content_1fr] gap-x-4 gap-y-2 text-md rounded-md border p-4",
         "[&_a]:underline [&_a]:decoration-current [&_a]:decoration-from-font [&_a]:underline-offset-4 hover:[&_a]:decoration-1",
-        "[&_code]:!bg-transparent [&_code]:!border-none",
+        "[&_code]:!bg-gray-50 [&_code]:dark:!bg-gray-800 [&_code]:!border-none",
         title && "items-center",
         border,
         bg,

package/src/lib/util/MdxComponents.tsx

@@ -2,9 +2,9 @@ import { MDXProvider } from "@mdx-js/react";
 import type { ComponentProps } from "react";
 import { Link } from "react-router-dom";
 import { Heading } from "../components/Heading.js";
+import { InlineCode } from "../components/InlineCode.js";
 import { SyntaxHighlight } from "../components/SyntaxHighlight.js";
 import { Callout } from "../ui/Callout.js";
-import { cn } from "./cn.js";
 
 export type MdxComponentsType = ComponentProps<
   typeof MDXProvider
@@ -80,15 +80,6 @@ export const MdxComponents = {
       );
     }
 
-    return (
-      <code
-        className={cn(
-          className,
-          "font-mono border border-border p-1 py-0.5 rounded bg-border/50 dark:bg-border/70 whitespace-nowrap",
-        )}
-      >
-        {children}
-      </code>
-    );
+    return <InlineCode className={className}>{children}</InlineCode>;
   },
 } satisfies MdxComponentsType;

package/src/lib/util/groupBy.ts

@@ -1,24 +1,19 @@
-type MapValuesToKeysIfAllowed<T> = {
-  [K in keyof T]: T[K] extends PropertyKey ? K : never;
-};
-type Filter<T> = MapValuesToKeysIfAllowed<T>[keyof T];
-
 export const groupBy = <
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   T extends Record<PropertyKey, any>,
-  Key extends Filter<T>,
+  KeySelector extends (item: T) => PropertyKey,
 >(
   arr: T[],
-  key: Key,
-): Record<T[Key], T[]> =>
-  arr.reduce(
+  keySelector: KeySelector,
+): Partial<Record<ReturnType<KeySelector>, T[]>> => {
+  return arr.reduce(
     (accumulator, val) => {
-      const groupedKey = val[key];
+      const groupedKey = keySelector(val) as ReturnType<KeySelector>;
       if (!accumulator[groupedKey]) {
         accumulator[groupedKey] = [];
       }
       accumulator[groupedKey].push(val);
       return accumulator;
     },
-    {} as Record<T[Key], T[]>,
+    {} as Record<ReturnType<KeySelector>, T[]>,
   );
+};

package/dist/lib/components/Router.d.ts

@@ -1,4 +0,0 @@
-import { DevPortalPlugin } from "../core/plugins.js";
-export declare function Router({ plugins }: {
-    plugins?: DevPortalPlugin[];
-}): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/Router.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import { isNavigationPlugin } from "../core/plugins.js";
-import { RouterError } from "../errors/RouterError.js";
-import { Layout } from "./Layout.js";
-export function Router({ plugins }) {
-    const router = useMemo(() => {
-        const routes = (plugins ?? []).flatMap((plugin) => isNavigationPlugin(plugin) ? plugin.getRoutes() : []);
-        return createBrowserRouter([
-            {
-                path: "/",
-                element: _jsx(Layout, {}),
-                errorElement: _jsx(RouterError, {}),
-                children: routes,
-            },
-        ]);
-    }, [plugins]);
-    return _jsx(RouterProvider, { router: router });
-}
-//# sourceMappingURL=Router.js.map

package/dist/lib/components/Router.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Router.js","sourceRoot":"","sources":["../../../src/lib/components/Router.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvE,OAAO,EAAmB,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAEzE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,MAAM,UAAU,MAAM,CAAC,EAAE,OAAO,EAAmC;IACjE,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,MAAM,MAAM,GAAG,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE,CAChD,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CACrD,CAAC;QAEF,OAAO,mBAAmB,CAAC;YACzB;gBACE,IAAI,EAAE,GAAG;gBACT,OAAO,EAAE,KAAC,MAAM,KAAG;gBACnB,YAAY,EAAE,KAAC,WAAW,KAAG;gBAC7B,QAAQ,EAAE,MAAM;aACjB;SACF,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IACd,OAAO,KAAC,cAAc,IAAC,MAAM,EAAE,MAAM,GAAI,CAAC;AAC5C,CAAC"}