zudoku 0.3.0-dev.7 → 0.3.0-dev.71

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

@@ -8,7 +8,7 @@ type BaseComponentProps<T = unknown> = PropsWithChildren<
 export const Root = ({ children, className }: BaseComponentProps) => (
   <div
     className={cn(
-      "rounded-lg overflow-hidden border border-border dark:border-transparent",
+      "rounded-lg overflow-hidden border dark:border-transparent",
       className,
     )}
   >
@@ -19,7 +19,7 @@ export const Root = ({ children, className }: BaseComponentProps) => (
 export const Head = ({ children, className }: BaseComponentProps) => (
   <div
     className={cn(
-      "border-b border-b-border dark:border-b-zinc-600 bg-zinc-100 dark:bg-zinc-700 p-2",
+      "border-b dark:border-zinc-600 bg-zinc-100 dark:bg-zinc-700 p-2",
       className,
     )}
   >
@@ -34,3 +34,14 @@ export const Body = ({ children, className }: BaseComponentProps) => (
     {children}
   </div>
 );
+
+export const Footer = ({ children, className }: BaseComponentProps) => (
+  <div
+    className={cn(
+      "border-t dark:border-zinc-600 bg-zinc-100 dark:bg-zinc-700 p-2",
+      className,
+    )}
+  >
+    {children}
+  </div>
+);

package/src/lib/plugins/openapi/{Select.tsx → SimpleSelect.tsx}

@@ -1,13 +1,15 @@
+import { ChevronsUpDownIcon } from "lucide-react";
 import type { ChangeEventHandler } from "react";
-import { ChevronsUpDownIcon } from "../../core/icons.js";
 import { cn } from "../../util/cn.js";
 
-export const Select = ({
+export const SimpleSelect = ({
+  value,
   onChange,
   className,
   options,
 }: {
-  onChange?: ChangeEventHandler<HTMLSelectElement>;
+  value: string;
+  onChange: ChangeEventHandler<HTMLSelectElement>;
   className?: string;
   options: {
     value: string;
@@ -20,6 +22,7 @@ export const Select = ({
         "row-start-1 col-start-1 border border-input text-foreground px-2 py-1 pe-6",
         "rounded-md appearance-none bg-zinc-50 hover:bg-white dark:bg-zinc-800 hover:dark:bg-zinc-800/75",
       )}
+      value={value}
       onChange={onChange}
     >
       {options.map((option) => (

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

@@ -0,0 +1,31 @@
+import {
+  Children,
+  createContext,
+  ReactNode,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+
+export const StaggeredRenderContext = createContext({ stagger: false });
+
+const StaggeredRender = ({ children }: { children: ReactNode[] }) => {
+  const { stagger } = useContext(StaggeredRenderContext);
+  const [renderAll, setRenderAll] = useState(!stagger);
+
+  useEffect(() => {
+    if (renderAll) {
+      return;
+    }
+
+    const idle = requestIdleCallback(() => {
+      setRenderAll(true);
+    });
+
+    return () => cancelIdleCallback(idle);
+  }, [renderAll]);
+
+  return !renderAll ? Children.toArray(children).slice(0, 3) : children;
+};
+
+export default StaggeredRender;

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

@@ -0,0 +1,56 @@
+/* eslint-disable no-console */
+import {
+  cacheExchange,
+  Client,
+  fetchExchange,
+  mapExchange,
+} from "../util/urql.js";
+import { createServer } from "./createServer.js";
+import { CreateClientFunction } from "./interfaces.js";
+
+export type WorkerGraphQLMessage = { id: string; body: string };
+
+const localServer = createServer();
+
+/**
+ * Creates an in memory Client that does not use Workers. This allows
+ * developers to run the simple standalone version of zudoku using the CDN
+ * hosted scripts. Worker's cannot be loaded cross domain so in this case
+ * we sacrifice performance for making it work cross domain.
+ */
+export const createClient: CreateClientFunction = () => {
+  return new Client({
+    url: "/__z/graphql",
+    // Custom fetch to send the GraphQL request to the worker and convert the response back to a `Response` object
+    fetch: async (req, init) => {
+      if (!init?.body) throw new Error("No body");
+      const response = await localServer.fetch(
+        new Request("http://localhost/__z/graphql", {
+          method: "POST",
+          body: init.body,
+          headers: {
+            "Content-Type": "application/json",
+          },
+        }),
+      );
+      return response;
+      // port.postMessage({
+      //   id: e.data.id,
+      //   body: await response.text(),
+      // } satisfies WorkerGraphQLMessage);
+    },
+    exchanges: [
+      cacheExchange,
+      mapExchange({
+        onError(error, operation) {
+          console.error(error);
+          console.groupCollapsed("Operation info");
+          console.log("body", operation.query.loc?.source.body.trim());
+          console.log("variables", operation.variables);
+          console.groupEnd();
+        },
+      }),
+      fetchExchange,
+    ],
+  });
+};

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

@@ -0,0 +1,33 @@
+import { useLogger } from "@envelop/core";
+import { createGraphQLServer } from "../../../oas/graphql/index.js";
+
+const map = new Map<string, number>();
+
+/**
+ * Creates the GraphQL server
+ */
+export const createServer = () =>
+  createGraphQLServer({
+    plugins: [
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      useLogger({
+        logFn: (eventName, { args }) => {
+          if (import.meta.env.PROD) return;
+
+          if (eventName.endsWith("-start")) {
+            map.set(`${eventName}-${args.operationName}`, performance.now());
+          } else if (eventName.endsWith("-end")) {
+            const startEvent = eventName.replace("-end", "-start");
+            const start = map.get(`${startEvent}-${args.operationName}`);
+            if (start) {
+              // eslint-disable-next-line no-console
+              console.log(
+                `${args.operationName} query took ${performance.now() - start}ms`,
+              );
+              map.delete(`${startEvent}-${args.operationName}`);
+            }
+          }
+        },
+      }),
+    ],
+  });

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

@@ -7,15 +7,34 @@ import {
   fetchExchange,
   mapExchange,
 } from "../util/urql.js";
+import { createClient as createMemoryClient } from "./createMemoryClient.js";
+import { CreateClientFunction } from "./interfaces.js";
 
 export type WorkerGraphQLMessage = { id: string; body: string };
-
 const ulid = monotonicFactory();
-export const createSharedWorkerClient = () => {
+
+/**
+ * This loads the client from a worker and uses mess port to send requests
+ * and responses between the main thread and the worker.
+ */
+export const createClient: CreateClientFunction = ({
+  useMemoryClient,
+}: {
+  useMemoryClient: boolean;
+}) => {
+  if (useMemoryClient || typeof SharedWorker === "undefined") {
+    return createMemoryClient({ useMemoryClient });
+  }
+  // NOTE: This URL needs to be inline with the SharedWorker otherwse
+  // vite build does not recognize the worker file as a module.
   const worker = new SharedWorker(new URL("./worker.ts", import.meta.url), {
     type: "module",
   });
 
+  worker.onerror = (e) => {
+    console.error(e);
+  };
+
   worker.port.start();
 
   const [waitFor, notify] = createWaitForNotify<string>();

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

@@ -0,0 +1,5 @@
+import { Client } from "urql";
+
+export type CreateClientFunction = (config: {
+  useMemoryClient: boolean;
+}) => Client;

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/PathParams.tsx

@@ -1,30 +1,16 @@
-import { forwardRef, InputHTMLAttributes } from "react";
-import { Control, useFieldArray, UseFormRegister } from "react-hook-form";
+import { EraserIcon } from "lucide-react";
+import {
+  Control,
+  Controller,
+  useFieldArray,
+  useFormContext,
+  UseFormRegister,
+} from "react-hook-form";
+import { Button } from "../../../ui/Button.js";
+import { Input } from "../../../ui/Input.js";
 import { cn } from "../../../util/cn.js";
-import { DATA_ATTR, usePastellizedColor } from "../ColorizedParam.js";
-import { InlineInput } from "./InlineInput.js";
-import { PlaygroundForm } from "./Playground.js";
-
-type ParameterValueProps = {
-  part: string;
-} & InputHTMLAttributes<HTMLInputElement>;
-
-const ParameterValue = forwardRef<HTMLInputElement, ParameterValueProps>(
-  function ParameterValue({ part, className, ...props }, ref) {
-    const color = usePastellizedColor(part);
-    return (
-      <InlineInput
-        {...props}
-        ref={ref}
-        className={cn(className, "opacity-80 data-[active=true]:opacity-100")}
-        style={{
-          // color: `hsl(${color})`,
-          outlineColor: `hsl(${color})`,
-        }}
-      />
-    );
-  },
-);
+import { ColorizedParam } from "../ColorizedParam.js";
+import type { PlaygroundForm } from "./Playground.js";
 
 export const PathParams = ({
   control,
@@ -33,31 +19,77 @@ export const PathParams = ({
   register: UseFormRegister<PlaygroundForm>;
   control: Control<PlaygroundForm>;
 }) => {
+  const form = useFormContext<PlaygroundForm>();
   const { fields } = useFieldArray<PlaygroundForm>({
     control,
     name: "pathParams",
   });
 
-  return fields.map((part, i) => (
-    <div
-      key={part.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(`pathParams.${i}.name`)}
-        disabled
-        placeholder="Name"
-        className="peer"
-      />
-      <ParameterValue
-        {...register(`pathParams.${i}.value`)}
-        part={part.name}
-        {...{ [DATA_ATTR]: part.name }}
-        placeholder="Value"
-        className="peer"
-      />
-
-      <div className="col-span-full border-b border-border"></div>
-    </div>
-  ));
+  return (
+    <table className="w-full table-auto [&_td]:border [&_td]:py-1 [&_td]:px-2">
+      <tbody>
+        {fields.map((part, i) => (
+          <tr key={part.id} className="hover:bg-accent/40">
+            <td>
+              <Controller
+                control={control}
+                name={`pathParams.${i}.value`}
+                render={({ field }) => (
+                  <ColorizedParam
+                    slug={part.name}
+                    name={part.name}
+                    backgroundOpacity="25%"
+                    borderOpacity={field.value ? "100%" : "0"}
+                    className={cn(
+                      "font-mono text-xs m-2",
+                      !field.value && "opacity-60",
+                    )}
+                  />
+                )}
+              />
+            </td>
+            <td>
+              <div className="flex justify-between items-center">
+                <Controller
+                  control={control}
+                  name={`pathParams.${i}.value`}
+                  render={({ field }) => (
+                    <Input
+                      {...field}
+                      placeholder="Enter value"
+                      className={cn(
+                        "border-0 shadow-none ring-0 font-mono text-xs",
+                      )}
+                    />
+                  )}
+                />
+                <Controller
+                  control={control}
+                  name={`pathParams.${i}.value`}
+                  render={({ field }) => (
+                    <Button
+                      size="icon"
+                      type="button"
+                      variant="ghost"
+                      aria-label="Clear value"
+                      className={cn(
+                        "ms-2",
+                        field.value.length === 0
+                          ? "opacity-0 pointer-events-none"
+                          : "opacity-100",
+                      )}
+                      title="Clear value"
+                      onClick={() => field.onChange("")}
+                    >
+                      <EraserIcon size={16} />
+                    </Button>
+                  )}
+                />
+              </div>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
 };