zudoku 0.3.0-dev.6 → 0.3.0-dev.60

package/src/lib/plugins/openapi/{worker → client}/worker.ts

@@ -1,7 +1,7 @@
-import { createGraphQLServer } from "../../../oas/graphql/index.js";
-import { type WorkerGraphQLMessage } from "./createSharedWorkerClient.js";
+import { createServer } from "./createServer.js";
+import { type WorkerGraphQLMessage } from "./createWorkerClient.js";
 
-const localServer = createGraphQLServer();
+const localServer = createServer();
 
 const worker = self as unknown as SharedWorkerGlobalScope;
 

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

@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+import { OasPluginConfig } from "./interfaces.js";
+
+const OasContext = createContext<{ config: OasPluginConfig } | undefined>(
+  undefined,
+);
+
+export const OasConfigProvider = OasContext.Provider;
+
+export const useOasConfig = () => {
+  const ctx = useContext(OasContext);
+  if (!ctx) {
+    throw new Error("useOasConfig must be used within a OasConfigProvider");
+  }
+  return ctx.config;
+};

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

@@ -1,61 +1,20 @@
-import { createContext, useContext } from "react";
+import { matchPath, useRouteError, type RouteObject } from "react-router-dom";
 import {
   type DevPortalPlugin,
   type PluginNavigationCategory,
 } from "../../core/plugins.js";
-import { Outlet, matchPath, type RouteObject } from "../../core/router.js";
 import { MethodBadge } from "./MethodBadge.js";
-import { OperationList } from "./OperationList.js";
 import { graphql } from "./graphql/index.js";
 import {
-  Provider,
   Client as UrqlClient,
   cacheExchange,
   fetchExchange,
 } from "./util/urql.js";
 
-import { createSharedWorkerClient } from "virtual:zudoku-openapi-worker";
-import type { createSharedWorkerClient as createSharedWorkerClientType } from "./worker/createSharedWorkerClient.js";
-
-const OasContext = createContext<{ config: OasPluginConfig } | undefined>(
-  undefined,
-);
-
-export const OasConfigProvider = OasContext.Provider;
-
-export const useOasConfig = () => {
-  const ctx = useContext(OasContext);
-  if (!ctx) {
-    throw new Error("useOasConfig must be used within a OasConfigProvider");
-  }
-  return ctx.config;
-};
-
-type OasSource =
-  | { type: "url"; input: string }
-  | { type: "yaml"; input: string }
-  | { type: "json"; input: object };
-
-export type OasPluginConfig = {
-  server?: string;
-  path?: string;
-} & OasSource;
-
-const OasContextProvider = ({
-  config,
-  client,
-}: {
-  config: OasPluginConfig;
-  client: typeof UrqlClient;
-}) => {
-  return (
-    <Provider value={client}>
-      <OasConfigProvider value={{ config }}>
-        <Outlet />
-      </OasConfigProvider>
-    </Provider>
-  );
-};
+import { createClient } from "zudoku/openapi-worker";
+import { ErrorPage } from "../../components/ErrorPage.js";
+import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
+import { OasPluginConfig } from "./interfaces.js";
 
 const GetCategoriesQuery = graphql(`
   query GetCategories($input: JSON!, $type: SchemaType!) {
@@ -77,7 +36,25 @@ const GetCategoriesQuery = graphql(`
   }
 `);
 
-export const openApiPlugin = (config: OasPluginConfig): DevPortalPlugin => {
+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} />
+  );
+};
+
+type InternalOasPluginConfig = { inMemory?: boolean };
+
+export const openApiPlugin = (
+  config: OasPluginConfig & InternalOasPluginConfig,
+): DevPortalPlugin => {
   const basePath = config.path ?? "/reference";
 
   const client = config.server
@@ -85,11 +62,25 @@ export const openApiPlugin = (config: OasPluginConfig): DevPortalPlugin => {
         url: config.server,
         exchanges: [cacheExchange, fetchExchange],
       })
-    : (createSharedWorkerClient() as ReturnType<
-        typeof createSharedWorkerClientType
-      >);
+    : createClient({ useMemoryClient: config.inMemory ?? false });
 
   return {
+    getHead: () => {
+      if (config.type === "url") {
+        return (
+          <link
+            rel="preload"
+            href={config.input}
+            as="fetch"
+            crossOrigin="anonymous"
+          />
+        );
+      }
+
+      if (config.server) {
+        return <link rel="preconnect" href={config.server} />;
+      }
+    },
     getNavigation: async (path: string) => {
       if (!matchPath({ path: basePath, end: false }, path)) {
         return [];
@@ -135,11 +126,27 @@ export const openApiPlugin = (config: OasPluginConfig): DevPortalPlugin => {
     getRoutes: () =>
       [
         {
-          element: <OasContextProvider config={config} client={client} />,
+          async lazy() {
+            const { OpenApiRoute } = await import("./Route.js");
+            return {
+              element: <OpenApiRoute client={client} config={config} />,
+            };
+          },
+          errorElement: <OpenApiErrorPage />,
           children: [
             {
               path: basePath,
-              children: [{ index: true, element: <OperationList /> }],
+              children: [
+                {
+                  index: true,
+                  async lazy() {
+                    const { OperationList } = await import(
+                      "./OperationList.js"
+                    );
+                    return { element: <OperationList /> };
+                  },
+                },
+              ],
             },
           ],
         },

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

@@ -0,0 +1,9 @@
+type OasSource =
+  | { type: "url"; input: string }
+  | { type: "yaml"; input: string }
+  | { type: "json"; input: object };
+
+export type OasPluginConfig = {
+  server?: string;
+  path?: string;
+} & OasSource;

package/src/lib/plugins/openapi/playground/Headers.tsx

@@ -1,53 +1,80 @@
-import { XIcon } from "lucide-react";
-import { Control, useFieldArray, UseFormRegister } from "react-hook-form";
+import { TriangleAlertIcon, XIcon } from "lucide-react";
+import {
+  Control,
+  useFieldArray,
+  UseFormRegister,
+  useWatch,
+} from "react-hook-form";
 import { Button } from "../../../ui/Button.js";
+import { cn } from "../../../util/cn.js";
 import { InlineInput } from "./InlineInput.js";
-import type { Header, PlaygroundForm } from "./Playground.js";
+import { NO_IDENTITY, type PlaygroundForm } from "./Playground.js";
 
 export const Headers = ({
   control,
   register,
-  headers,
 }: {
   register: UseFormRegister<PlaygroundForm>;
   control: Control<PlaygroundForm>;
-  headers: Header[];
 }) => {
   const { fields, append, remove } = useFieldArray<PlaygroundForm>({
     control,
     name: "headers",
   });
+  const selectedIdentity = useWatch({ name: "identity", control });
+  const liveHeaders = useWatch({ name: "headers", control });
+
+  const disableAuth = selectedIdentity !== NO_IDENTITY;
+
   return (
     <div className="grid grid-cols-[1fr_1fr_auto]">
-      {fields.map((header, i) => (
-        <div
-          key={header.id}
-          className="grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-muted rounded overflow-hidden group"
-        >
-          <InlineInput
-            {...register(`headers.${i}.name`)}
-            placeholder="Name"
-            className="peer"
-            autoComplete="off"
-          />
-          <InlineInput
-            placeholder={"Value"}
-            className="peer"
-            {...register(`headers.${i}.value`)}
-            autoComplete="off"
-          />
-          <button
-            className="hover:bg-black/5 p-1 rounded mr-2 text-muted-foreground invisible group-hover:visible peer-focus:visible"
-            onClick={() => {
-              remove(i);
-            }}
-            type="button"
+      {fields.map((header, i) => {
+        const isDisabledByAuth =
+          disableAuth && liveHeaders.at(i)?.name === "Authorization";
+
+        return (
+          <div
+            key={header.id}
+            className={cn(
+              "grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-muted rounded overflow-hidden group",
+              isDisabledByAuth && "line-through",
+            )}
+            title={
+              isDisabledByAuth
+                ? "This header is disabled because authentication was selected"
+                : undefined
+            }
           >
-            <XIcon size={16} />
-          </button>
-          <div className="col-span-full border-b border-border"></div>
-        </div>
-      ))}
+            <div className="flex gap-2 items-center">
+              <InlineInput
+                {...register(`headers.${i}.name`)}
+                placeholder="Name"
+                className="peer"
+                autoComplete="off"
+              />
+              {isDisabledByAuth && (
+                <TriangleAlertIcon size={16} className="text-amber-500" />
+              )}
+            </div>
+            <InlineInput
+              placeholder={"Value"}
+              className="peer"
+              {...register(`headers.${i}.value`)}
+              autoComplete="off"
+            />
+            <button
+              className="hover:bg-black/5 p-1 rounded mr-2 text-muted-foreground invisible group-hover:visible peer-focus:visible"
+              onClick={() => {
+                remove(i);
+              }}
+              type="button"
+            >
+              <XIcon size={16} />
+            </button>
+            <div className="col-span-full border-b border-border"></div>
+          </div>
+        );
+      })}
       <Button
         className="col-span-full mt-4"
         onClick={() => append({ name: "", value: "" })}

package/src/lib/plugins/openapi/playground/PathParams.tsx

@@ -3,7 +3,7 @@ import { Control, useFieldArray, UseFormRegister } from "react-hook-form";
 import { cn } from "../../../util/cn.js";
 import { DATA_ATTR, usePastellizedColor } from "../ColorizedParam.js";
 import { InlineInput } from "./InlineInput.js";
-import { PlaygroundForm } from "./Playground.js";
+import type { PlaygroundForm } from "./Playground.js";
 
 type ParameterValueProps = {
   part: string;