zudoku 0.3.0-dev.10 → 0.3.0-dev.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.3.0-dev.10",
+  "version": "0.3.0-dev.11",
   "type": "module",
   "files": [
     "dist",
@@ -53,6 +53,7 @@
     }
   },
   "dependencies": {
+    "@envelop/core": "5.0.1",
     "@graphql-typed-document-node/core": "3.2.0",
     "@lekoarts/rehype-meta-as-attributes": "3.0.1",
     "@mdx-js/react": "3.0.1",

package/src/lib/authentication/authentication.ts

@@ -1,9 +1,6 @@
-import {
-  InitializationPlugin,
-  NavigationPlugin,
-} from "../../lib/core/plugins.js";
+import { CommonPlugin, NavigationPlugin } from "../../lib/core/plugins.js";
 
-type AuthenticationPlugin = NavigationPlugin & InitializationPlugin;
+type AuthenticationPlugin = NavigationPlugin & CommonPlugin;
 
 export interface AuthenticationProvider extends AuthenticationPlugin {
   login(): Promise<void>;

package/src/lib/components/DevPortal.tsx

@@ -1,13 +1,13 @@
 import { MDXProvider } from "@mdx-js/react";
 import { QueryClientProvider } from "@tanstack/react-query";
-import { memo, Suspense, useEffect, useMemo } from "react";
+import { Fragment, memo, Suspense, useEffect, useMemo } from "react";
 import {
   DevPortalContext,
   queryClient,
   type NavigationItem,
 } from "../core/DevPortalContext.js";
-import { HelmetProvider } from "../core/helmet.js";
-import { type DevPortalPlugin } from "../core/plugins.js";
+import { Helmet, HelmetProvider } from "../core/helmet.js";
+import { hasHead, type DevPortalPlugin } from "../core/plugins.js";
 
 import { AuthenticationProvider } from "../authentication/authentication.js";
 import {
@@ -64,9 +64,15 @@ const DevPortalInner = (props: DevPortalProps) => {
     void devPortalContext.initialize();
   }, [devPortalContext]);
 
+  const heads = props.plugins
+    ?.filter(hasHead)
+    // eslint-disable-next-line react/no-array-index-key
+    .map((plugin, i) => <Fragment key={i}>{plugin.getHead?.()}</Fragment>);
+
   return (
     <QueryClientProvider client={queryClient}>
       <HelmetProvider>
+        <Helmet>{heads}</Helmet>
         <DevPortalProvider value={devPortalContext}>
           <MDXProvider components={mdxComponents}>
             <ThemeProvider>

package/src/lib/components/context/DevPortalProvider.ts

@@ -1,4 +1,4 @@
-import { useSuspenseQuery } from "@tanstack/react-query";
+import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
 import { createContext, useContext } from "react";
 import { matchPath, useLocation } from "react-router-dom";
 import { DevPortalContext } from "../../core/DevPortalContext.js";
@@ -21,7 +21,7 @@ export const useDevPortal = () => {
 
 export const useApiIdentities = () => {
   const { getApiIdentities } = useDevPortal();
-  return useSuspenseQuery({
+  return useQuery({
     queryFn: getApiIdentities,
     queryKey: ["api-identities"],
   });

package/src/lib/core/DevPortalContext.ts

@@ -88,7 +88,7 @@ export class DevPortalContext {
     await Promise.all([
       this.plugins
         .filter(needsInitialization)
-        .map((plugin) => plugin.initialize(this)),
+        .map((plugin) => plugin.initialize?.(this)),
     ]);
   };
 

package/src/lib/core/plugins.ts

@@ -1,3 +1,4 @@
+import { type ReactElement } from "react";
 import { type RouteObject } from "react-router-dom";
 import {
   DevPortalContext,
@@ -10,9 +11,9 @@ export type PluginNavigationCategory = {
 } & NavigationCategory;
 
 export type DevPortalPlugin =
+  | CommonPlugin
   | NavigationPlugin
-  | ApiIdentityPlugin
-  | InitializationPlugin;
+  | ApiIdentityPlugin;
 
 export interface NavigationPlugin {
   getRoutes: () => RouteObject[];
@@ -23,8 +24,9 @@ export interface ApiIdentityPlugin {
   getIdentities: (context: DevPortalContext) => Promise<ApiIdentity[]>;
 }
 
-export interface InitializationPlugin {
-  initialize: (context: DevPortalContext) => Promise<void> | void;
+export interface CommonPlugin {
+  initialize?: (context: DevPortalContext) => Promise<void> | void;
+  getHead?: () => ReactElement | undefined;
 }
 
 export const isNavigationPlugin = (
@@ -34,9 +36,12 @@ export const isNavigationPlugin = (
 
 export const needsInitialization = (
   obj: DevPortalPlugin,
-): obj is InitializationPlugin =>
+): obj is CommonPlugin =>
   "initialize" in obj && typeof obj.initialize === "function";
 
+export const hasHead = (obj: DevPortalPlugin): obj is CommonPlugin =>
+  "getHead" in obj && typeof obj.getHead === "function";
+
 export const isApiIdentityPlugin = (
   obj: DevPortalPlugin,
 ): obj is ApiIdentityPlugin =>

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

@@ -45,7 +45,7 @@ export const slugifyOperation = (operation: OperationLike, tag?: string) => {
   );
 };
 
-const cache = new LRUCache<string, OpenAPIDocument>({
+const cache = new LRUCache<string, Promise<OpenAPIDocument>>({
   ttl: 60 * 10 * 1000,
   ttlAutopurge: true,
 });
@@ -384,7 +384,7 @@ const loadOpenAPISchema = async (input: NonNullable<unknown>) => {
     return cache.get(hash)!;
   }
 
-  const schema = await validate(input);
+  const schema = validate(input);
 
   cache.set(hash, schema);
 

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

@@ -54,7 +54,9 @@ const parseSchemaInput = async (
       return JSON.parse(schemaInput);
     }
     if (schemaInput.includes("://")) {
-      const response = await fetch(schemaInput);
+      const response = await fetch(schemaInput, {
+        cache: "force-cache",
+      });
       return (await response.json()) as JSONSchema;
     }
     const yaml = await import("yaml");

package/src/lib/plugins/openapi/{MakeRequest.tsx → PlaygroundDialogWrapper.tsx}

@@ -1,7 +1,7 @@
 import { graphql } from "./graphql/index.js";
 import { useOasConfig } from "./index.js";
 import type { OperationListItemResult } from "./OperationList.js";
-import { Playground } from "./playground/Playground.js";
+import { PlaygroundDialog } from "./playground/PlaygroundDialog.js";
 
 import { useQuery } from "urql";
 
@@ -13,7 +13,7 @@ const GetServerQuery = graphql(/* GraphQL */ `
   }
 `);
 
-export const MakeRequest = ({
+export const PlaygroundDialogWrapper = ({
   operation,
 }: {
   operation: OperationListItemResult;
@@ -50,7 +50,7 @@ export const MakeRequest = ({
     false;
 
   return (
-    <Playground
+    <PlaygroundDialog
       host={server.data?.schema.url ?? ""}
       method={operation.method}
       url={operation.path}

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

@@ -5,9 +5,9 @@ import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
 import type { SchemaObject } from "../../oas/parser/index.js";
 import { cn } from "../../util/cn.js";
 import { ColorizedParam } from "./ColorizedParam.js";
-import { MakeRequest } from "./MakeRequest.js";
 import { MethodTextColorMap } from "./MethodBadge.js";
 import type { OperationListItemResult } from "./OperationList.js";
+import { PlaygroundDialogWrapper } from "./PlaygroundDialogWrapper.js";
 import { RequestBodySidecarBox } from "./RequestBodySidecarBox.js";
 import { ResponsesSidecarBox } from "./ResponsesSidecarBox.js";
 import * as SidecarBox from "./SidecarBox.js";
@@ -142,7 +142,7 @@ export const Sidecar = ({
                 { value: "swift", label: "Swift" },
               ]}
             />
-            <MakeRequest operation={operation} />
+            <PlaygroundDialogWrapper operation={operation} />
           </div>
         </SidecarBox.Head>
         <SidecarBox.Body>

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

@@ -15,7 +15,6 @@ import {
 } 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,
@@ -85,11 +84,25 @@ export const openApiPlugin = (config: OasPluginConfig): DevPortalPlugin => {
         url: config.server,
         exchanges: [cacheExchange, fetchExchange],
       })
-    : (createSharedWorkerClient() as ReturnType<
-        typeof createSharedWorkerClientType
-      >);
+    : createSharedWorkerClient();
 
   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 [];

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

@@ -1,15 +1,7 @@
-import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { useMutation } from "@tanstack/react-query";
-import { CirclePlayIcon } from "lucide-react";
 import { Fragment } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { useApiIdentities } from "../../../components/context/DevPortalProvider.js";
-import {
-  Dialog,
-  DialogContent,
-  DialogTitle,
-  DialogTrigger,
-} from "../../../components/Dialog.js";
 import {
   Select,
   SelectContent,
@@ -28,6 +20,8 @@ import { Headers } from "./Headers.js";
 import { PathParams } from "./PathParams.js";
 import { QueryParams } from "./QueryParams.js";
 
+export const NO_IDENTITY = "__none";
+
 function mimeTypeToLanguage(mimeType: string) {
   const mimeTypeMapping = {
     "application/json": "json",
@@ -81,17 +75,7 @@ export type PlaygroundForm = {
   identity?: string;
 };
 
-export const NO_IDENTITY = "__none";
-
-const Playground = ({
-  url,
-  host,
-  method,
-  headers = [{ name: "", value: "" }],
-  queryParams = [],
-  pathParams = [],
-  hasParams,
-}: {
+export type PlaygroundContentProps = {
   host: string;
   url: string;
   method: string;
@@ -99,7 +83,17 @@ const Playground = ({
   queryParams?: QueryParam[];
   pathParams?: PathParam[];
   hasParams: boolean;
-}) => {
+};
+
+export const Playground = ({
+  host,
+  url,
+  method,
+  headers = [{ name: "", value: "" }],
+  queryParams = [],
+  pathParams = [],
+  hasParams,
+}: PlaygroundContentProps) => {
   const { register, control, handleSubmit, watch, ...form } =
     useForm<PlaygroundForm>({
       defaultValues: {
@@ -129,7 +123,7 @@ const Playground = ({
 
       if (data.identity !== NO_IDENTITY) {
         identities.data
-          .find((i) => i.id === data.identity)
+          ?.find((i) => i.id === data.identity)
           ?.authorizeRequest(request);
       }
       const response = await fetch(request);
@@ -181,181 +175,157 @@ const Playground = ({
         <wbr />
       </Fragment>
     ));
-
   return (
-    <Dialog>
-      <DialogTrigger asChild>
-        <CirclePlayIcon
-          className="cursor-pointer text-primary hover:text-primary/80"
-          size={16}
-        />
-      </DialogTrigger>
-
-      <DialogContent
-        className="max-w-screen-xl w-full h-5/6 overflow-auto p-0"
-        aria-describedby={undefined}
-      >
-        <VisuallyHidden>
-          <DialogTitle>Playground</DialogTitle>
-        </VisuallyHidden>
-        <FormProvider {...{ register, control, handleSubmit, watch, ...form }}>
-          <form
-            onSubmit={handleSubmit((data) => queryMutation.mutateAsync(data))}
-          >
-            <div className="grid grid-cols-2 text-sm h-full">
-              <div className="flex flex-col gap-4 p-8 bg-muted/50 after:bg-muted-foreground/20 relative after:absolute after:w-px after:inset-0 after:left-auto">
-                <div className="flex gap-2 items-stretch">
-                  <div className="flex flex-1 items-center w-full border rounded-md border-border">
-                    <div className="border-r border-border p-2 bg-muted rounded-l-md self-stretch font-semibold font-mono">
-                      {method.toUpperCase()}
-                    </div>
-                    <div className="p-2 font-mono text-xs">
-                      {path}
-                      {urlQueryParams.length > 0 ? "?" : ""}
-                      {urlQueryParams}
+    <FormProvider {...{ register, control, handleSubmit, watch, ...form }}>
+      <form onSubmit={handleSubmit((data) => queryMutation.mutateAsync(data))}>
+        <div className="grid grid-cols-2 text-sm h-full">
+          <div className="flex flex-col gap-4 p-8 bg-muted/50 after:bg-muted-foreground/20 relative after:absolute after:w-px after:inset-0 after:left-auto">
+            <div className="flex gap-2 items-stretch">
+              <div className="flex flex-1 items-center w-full border rounded-md border-border">
+                <div className="border-r border-border p-2 bg-muted rounded-l-md self-stretch font-semibold font-mono">
+                  {method.toUpperCase()}
+                </div>
+                <div className="p-2 font-mono text-xs">
+                  {path}
+                  {urlQueryParams.length > 0 ? "?" : ""}
+                  {urlQueryParams}
+                </div>
+              </div>
+              <Button type="submit" className="h-auto flex gap-1">
+                Send
+              </Button>
+            </div>
+            <Tabs defaultValue={hasParams ? "parameters" : "headers"}>
+              <div className="flex justify-between">
+                <TabsList>
+                  {hasParams && (
+                    <TabsTrigger value="parameters">Parameters</TabsTrigger>
+                  )}
+                  <TabsTrigger value="headers">
+                    Headers{" "}
+                    {formState.headers.length > 0 &&
+                      `(${formState.headers.length})`}
+                  </TabsTrigger>
+                  <TabsTrigger
+                    value="body"
+                    disabled={["POST", "PUT", "PATCH", "DELETE"].includes(
+                      method.toUpperCase(),
+                    )}
+                  >
+                    Body
+                  </TabsTrigger>
+                </TabsList>
+                <div className="flex gap-2 items-center">
+                  Auth:
+                  <Select
+                    onValueChange={(value) => form.setValue("identity", value)}
+                    defaultValue={formState.identity}
+                  >
+                    <SelectTrigger className="w-[180px] flex">
+                      {identities.isPending ? <Spinner /> : <SelectValue />}
+                    </SelectTrigger>
+                    <SelectContent align="center">
+                      <SelectItem value={NO_IDENTITY}>None</SelectItem>
+                      {identities.data?.map((identity) => (
+                        <SelectItem key={identity.id} value={identity.id}>
+                          {identity.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+              <TabsContent value="headers">
+                <Headers control={control} register={register} />
+              </TabsContent>
+              <TabsContent value="parameters">
+                <div className="grid grid-cols-[min-content_1fr_1fr_auto]">
+                  {pathParams.length > 0 && (
+                    <div className="font-semibold my-3 col-span-3">
+                      Path Parameters
                     </div>
-                  </div>
-                  <Button type="submit" className="h-auto flex gap-1">
-                    Send
-                  </Button>
+                  )}
+                  <PathParams control={control} register={register} />
+                  {queryParams.length > 0 && (
+                    <span className="font-semibold my-3 col-span-3">
+                      Query Parameters
+                    </span>
+                  )}
+                  <QueryParams control={control} />
                 </div>
-                <Tabs defaultValue={hasParams ? "parameters" : "headers"}>
-                  <div className="flex justify-between">
-                    <TabsList>
-                      {hasParams && (
-                        <TabsTrigger value="parameters">Parameters</TabsTrigger>
-                      )}
-                      <TabsTrigger value="headers">
-                        Headers{" "}
-                        {formState.headers.length > 0 &&
-                          `(${formState.headers.length})`}
-                      </TabsTrigger>
-                      <TabsTrigger
-                        value="body"
-                        disabled={["POST", "PUT", "PATCH", "DELETE"].includes(
-                          method.toUpperCase(),
-                        )}
-                      >
-                        Body
-                      </TabsTrigger>
-                    </TabsList>
-                    <div className="flex gap-2 items-center">
-                      Auth:
-                      <Select
-                        onValueChange={(value) =>
-                          form.setValue("identity", value)
-                        }
-                        defaultValue={formState.identity}
-                      >
-                        <SelectTrigger className="w-[180px]">
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent align="center">
-                          <SelectItem value={NO_IDENTITY}>None</SelectItem>
-                          {identities.data.map((identity) => (
-                            <SelectItem key={identity.id} value={identity.id}>
-                              {identity.label}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
+              </TabsContent>
+              <TabsContent value="body">
+                <textarea
+                  {...register("body")}
+                  className="border border-border w-full rounded p-2 bg-muted h-40"
+                />
+              </TabsContent>
+            </Tabs>
+          </div>
+          <div className="flex flex-col gap-4 p-8 bg-muted/70">
+            {queryMutation.error ? (
+              <div>{queryMutation.error.message}</div>
+            ) : queryMutation.data ? (
+              <div className="flex flex-col gap-2">
+                <div className="flex gap-2">
+                  <div className="flex text-xs gap-6">
+                    <div>
+                      Status: {queryMutation.data.status}{" "}
+                      {statusCodeMap[queryMutation.data.status] ?? ""}
                     </div>
+                    <div>Time: {queryMutation.data.time.toFixed(0)}ms</div>
+                    <div>Size: {queryMutation.data.size} B</div>
                   </div>
-                  <TabsContent value="headers">
-                    <Headers control={control} register={register} />
-                  </TabsContent>
-                  <TabsContent value="parameters">
-                    <div className="grid grid-cols-[min-content_1fr_1fr_auto]">
-                      {pathParams.length > 0 && (
-                        <div className="font-semibold my-3 col-span-3">
-                          Path Parameters
-                        </div>
-                      )}
-                      <PathParams control={control} register={register} />
-                      {queryParams.length > 0 && (
-                        <span className="font-semibold my-3 col-span-3">
-                          Query Parameters
-                        </span>
-                      )}
-                      <QueryParams control={control} />
-                    </div>
+                </div>
+                {/*<UrlDisplay host={host} path={url} />*/}
+                <Tabs defaultValue="response">
+                  <TabsList>
+                    <TabsTrigger value="response">Response</TabsTrigger>
+                    <TabsTrigger value="headers">
+                      {headerEntries.length
+                        ? `Headers (${headerEntries.length})`
+                        : "No headers"}
+                    </TabsTrigger>
+                  </TabsList>
+
+                  <TabsContent value="response">
+                    <Card className="shadow-none p-4">
+                      <SyntaxHighlight
+                        language={lang ?? "json"}
+                        noBackground
+                        className="overflow-x-auto "
+                        code={queryMutation.data.body ?? JSON.stringify("")}
+                      />
+                    </Card>
                   </TabsContent>
-                  <TabsContent value="body">
-                    <textarea
-                      {...register("body")}
-                      className="border border-border w-full rounded p-2 bg-muted h-40"
-                    />
+                  <TabsContent value="headers">
+                    <Card className="grid grid-cols-2 w-full gap-2.5 font-mono text-xs shadow-none p-4">
+                      <div className="font-semibold">Key</div>
+                      <div className="font-semibold">Value</div>
+                      {headerEntries.map(([key, value]) => (
+                        <Fragment key={key}>
+                          <div>{key}</div>
+                          <div>{value}</div>
+                        </Fragment>
+                      ))}
+                    </Card>
                   </TabsContent>
                 </Tabs>
               </div>
-              <div className="flex flex-col gap-4 p-8 bg-muted/70">
-                {queryMutation.error ? (
-                  <div>{queryMutation.error.message}</div>
-                ) : queryMutation.data ? (
-                  <div className="flex flex-col gap-2">
-                    <div className="flex gap-2">
-                      <div className="flex text-xs gap-6">
-                        <div>
-                          Status: {queryMutation.data.status}{" "}
-                          {statusCodeMap[queryMutation.data.status] ?? ""}
-                        </div>
-                        <div>Time: {queryMutation.data.time.toFixed(0)}ms</div>
-                        <div>Size: {queryMutation.data.size} B</div>
-                      </div>
-                    </div>
-                    {/*<UrlDisplay host={host} path={url} />*/}
-                    <Tabs defaultValue="response">
-                      <TabsList>
-                        <TabsTrigger value="response">Response</TabsTrigger>
-                        <TabsTrigger value="headers">
-                          {headerEntries.length
-                            ? `Headers (${headerEntries.length})`
-                            : "No headers"}
-                        </TabsTrigger>
-                      </TabsList>
-
-                      <TabsContent value="response">
-                        <Card className="shadow-none p-4">
-                          <SyntaxHighlight
-                            language={lang ?? "json"}
-                            noBackground
-                            className="overflow-x-auto "
-                            code={queryMutation.data.body ?? JSON.stringify("")}
-                          />
-                        </Card>
-                      </TabsContent>
-                      <TabsContent value="headers">
-                        <Card className="grid grid-cols-2 w-full gap-2.5 font-mono text-xs shadow-none p-4">
-                          <div className="font-semibold">Key</div>
-                          <div className="font-semibold">Value</div>
-                          {headerEntries.map(([key, value]) => (
-                            <Fragment key={key}>
-                              <div>{key}</div>
-                              <div>{value}</div>
-                            </Fragment>
-                          ))}
-                        </Card>
-                      </TabsContent>
-                    </Tabs>
-                  </div>
-                ) : (
-                  <div className="grid place-items-center h-full">
-                    <span className="text-[16px] font-semibold text-muted-foreground">
-                      {queryMutation.isPending ? (
-                        <Spinner />
-                      ) : (
-                        "Send a request first to see the response here"
-                      )}
-                    </span>
-                  </div>
-                )}
+            ) : (
+              <div className="grid place-items-center h-full">
+                <span className="text-[16px] font-semibold text-muted-foreground">
+                  {queryMutation.isPending ? (
+                    <Spinner />
+                  ) : (
+                    "Send a request first to see the response here"
+                  )}
+                </span>
               </div>
-            </div>
-          </form>
-        </FormProvider>
-      </DialogContent>
-    </Dialog>
+            )}
+          </div>
+        </div>
+      </form>
+    </FormProvider>
   );
 };
-
-export { Playground };