zudoku 0.25.1 → 0.25.3

package/lib/zudoku.plugin-openapi.js

@@ -1,6 +1,6 @@
 import "./jsx-runtime-Dx-03ztt.js";
 import "./chunk-D52XG6IA-Dl7HLe6j.js";
-import { o as a } from "./index-BNx95gkf.js";
+import { o as a } from "./index-sD8L1_Dl.js";
 import "./ZudokuContext-hmLMUdf2.js";
 import "lucide-react";
 import "./hook-CHq7pFyz.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.25.1",
+  "version": "0.25.3",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -78,10 +78,6 @@
       "import": "./lib/zudoku.plugin-search-inkeep.js",
       "types": "./dist/lib/plugins/search-inkeep/index.d.ts"
     },
-    "./openapi-worker": {
-      "import": "./lib/zudoku.openapi-worker.js",
-      "types": "./dist/lib/plugins/openapi-worker.d.ts"
-    },
     "./components": {
       "import": "./lib/zudoku.components.js",
       "types": "./dist/lib/components/index.d.ts"
@@ -258,7 +254,6 @@
     "generate:icon-types": "tsx ./scripts/generate-icon-types.ts",
     "build:standalone:vite": "vite build --mode standalone --config vite.standalone.config.ts",
     "build:standalone:html": "cp ./src/app/standalone.html ./standalone/standalone.html && cp ./src/app/demo.html ./standalone/demo.html && cp ./src/app/demo-cdn.html ./standalone/index.html",
-    "hack:fix-worker-paths": "node ./scripts/hack-worker.mjs",
     "clean": "tsc --build --clean",
     "codegen": "graphql-codegen --config ./src/codegen.ts",
     "test": "vitest run"

package/src/app/demo.tsx

@@ -48,7 +48,6 @@ const config = {
       type: "url",
       input: apiUrl,
       navigationId: "/",
-      inMemory: true,
     }),
   ],
 } satisfies ZudokuConfig;

package/src/app/standalone.tsx

@@ -43,7 +43,6 @@ const config = {
       type: "url",
       input: apiUrl!,
       navigationId: "/",
-      inMemory: true,
     }),
   ],
 } satisfies ZudokuConfig;

package/src/lib/authentication/providers/openid.tsx

@@ -307,7 +307,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     }
 
     const redirectUrl = new URL(url);
-    redirectUrl.pathname = this.redirectToAfterSignIn;
+    redirectUrl.pathname = this.callbackUrlPath;
     redirectUrl.search = "";
 
     const response = await oauth.authorizationCodeGrantRequest(

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

@@ -6,8 +6,6 @@ import {
 } from "@sindresorhus/slugify";
 import { GraphQLJSON, GraphQLJSONObject } from "graphql-type-json";
 import { createYoga, type YogaServerOptions } from "graphql-yoga";
-import { LRUCache } from "lru-cache";
-import hashit from "object-hash";
 import {
   HttpMethods,
   validate,
@@ -58,11 +56,10 @@ export const createOperationSlug = (
   );
 };
 
-const cache = new LRUCache<string, OpenAPIDocument>({
-  ttl: 60 * 10 * 1000,
-  ttlAutopurge: true,
-  fetchMethod: (_key, _oldValue, { context }) => validate(context as string),
-});
+export type SchemaImports = Record<
+  string,
+  () => Promise<{ schema: OpenAPIDocument }>
+>;
 
 const builder = new SchemaBuilder<{
   Scalars: {
@@ -71,6 +68,7 @@ const builder = new SchemaBuilder<{
   };
   Context: {
     schema: OpenAPIDocument;
+    schemaImports?: SchemaImports;
   };
 }>({});
 
@@ -441,11 +439,6 @@ const Schema = builder.objectRef<OpenAPIDocument>("Schema").implement({
   }),
 });
 
-const loadOpenAPISchema = async (input: NonNullable<unknown>) => {
-  const hash = hashit(input);
-  return await cache.forceFetch(hash, { context: input });
-};
-
 const SchemaSource = builder.enumType("SchemaType", {
   values: ["url", "file", "raw"] as const,
 });
@@ -459,10 +452,21 @@ builder.queryType({
         input: t.arg({ type: JSONScalar, required: true }),
       },
       resolve: async (_, args, ctx) => {
-        const schema = await loadOpenAPISchema(args.input!);
-        // for easier access of the whole schema in children resolvers
-        ctx.schema = schema;
+        let schema: OpenAPIDocument;
 
+        if (args.type === "file" && typeof args.input === "string") {
+          const loadSchema = ctx.schemaImports?.[args.input];
+
+          if (!loadSchema) {
+            throw new Error(`No schema loader found for path: ${args.input}`);
+          }
+          const module = await loadSchema();
+          schema = module.schema;
+        } else {
+          schema = await validate(args.input as string);
+        }
+
+        ctx.schema = schema;
         return schema;
       },
     }),

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

@@ -7,18 +7,29 @@ export const DATA_ATTR = "data-linked-param";
 
 export const usePastellizedColor = (name: string) => {
   const { resolvedTheme } = useTheme();
-  return pastellize(
-    name,
-    resolvedTheme === "light" ? { saturation: 85, lightness: 50 } : undefined,
-  );
+
+  return {
+    text: pastellize(
+      name,
+      resolvedTheme === "light" ? { saturation: 95, lightness: 38 } : {},
+    ),
+    background: pastellize(
+      name,
+      resolvedTheme === "light" ? { saturation: 85, lightness: 40 } : {},
+    ),
+  };
+};
+
+export const useParamColor = (name: string) => {
+  const normalized = name.replace(/[{}]/g, "");
+  return usePastellizedColor(normalized);
 };
 
 export const ColorizedParam = ({
   name,
   className,
-  backgroundOpacity = "100%",
-  borderOpacity = "100%",
   slug,
+  title,
   children,
   onClick,
 }: {
@@ -28,15 +39,17 @@ export const ColorizedParam = ({
   borderOpacity?: string;
   slug?: string;
   children?: ReactNode;
+  title?: string;
   onClick?: () => void;
 }) => {
   const ref = useRef<HTMLSpanElement>(null);
-  const normalized = name.replace(/[{}]/g, "");
   const normalizedSlug = slug?.replace(/[{}]/g, "");
-  const color = usePastellizedColor(normalized);
+  const normalized = name.replace(/[{}]/g, "");
+  const { text, background } = usePastellizedColor(normalized);
 
-  const borderColor = `hsl(${color} / ${borderOpacity})`;
-  const backgroundColor = `hsl(${color} / ${backgroundOpacity})`;
+  const textColor = `hsl(${text} / 100%)`;
+  const backgroundColor = `hsl(${background} / 10%)`;
+  const borderColor = `hsl(${background} / 50%)`;
 
   useEffect(() => {
     if (!normalizedSlug) return;
@@ -76,15 +89,19 @@ export const ColorizedParam = ({
     <span
       {...{ [DATA_ATTR]: normalizedSlug }}
       className={cn(
-        "relative after:rounded after:absolute after:inset-0 after:-bottom-0.5 after:border-b-2 after:transition-opacity after:duration-200",
-        "after:pointer-events-none after:border-[--border-color] after:opacity-30 after:data-[active=true]:opacity-100",
+        "relative inline-block rounded transition-all duration-100",
+        "rounded-lg",
+        "border border-[--border-color] p-0.5 text-[--param-color] bg-[--background-color]",
+        "data-[active=true]:border-[--param-color] data-[active=true]:shadow data-[active=true]:-translate-y-px",
         className,
       )}
+      title={title}
       suppressHydrationWarning
       ref={ref}
       onClick={onClick}
       style={
         {
+          "--param-color": textColor,
           "--border-color": borderColor,
           "--background-color": backgroundColor,
         } as CSSProperties

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

@@ -1,3 +1,4 @@
+import { Badge } from "zudoku/ui/Badge.js";
 import { Markdown } from "../../components/Markdown.js";
 import { type SchemaObject } from "../../oas/graphql/index.js";
 import { ColorizedParam } from "./ColorizedParam.js";
@@ -38,24 +39,25 @@ export const ParameterListItem = ({
             <ColorizedParam
               name={parameter.name}
               backgroundOpacity="15%"
+              className="px-1"
               slug={id + "-" + parameter.name.toLocaleLowerCase()}
             />
           ) : (
             parameter.name
           )}
         </code>
-        {parameter.required && (
-          <span className="py-px px-1.5 font-medium bg-primary/75 text-primary-foreground rounded-lg">
-            required
-          </span>
-        )}
         {paramSchema.type && (
-          <span className="text-muted-foreground">
+          <Badge variant="secondary">
             {paramSchema.type === "array"
               ? `${paramSchema.items.type}[]`
               : paramSchema.type}
-          </span>
+          </Badge>
         )}
+        {parameter.required && <Badge variant="outline">required</Badge>}
+        {/* <span className="py-px px-1.5 font-medium bg-primary/75 text-primary-foreground rounded-lg">
+            required
+          </span>
+        )} */}
       </div>
       {parameter.description && (
         <Markdown

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

@@ -23,6 +23,8 @@ export const PlaygroundDialogWrapper = ({
       name: p.name,
       defaultActive: p.required ?? false,
       isRequired: p.required ?? false,
+      enum: p.schema?.type == "array" ? p.schema?.items?.enum : p.schema?.enum,
+      type: p.schema?.type ?? "string",
     }));
   const pathParams = operation.parameters
     ?.filter((p) => p.in === "path")

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

@@ -1,18 +1,13 @@
-import { Content, useSidecarExamples } from "./ExampleDisplay.js";
 import * as SidecarBox from "./SidecarBox.js";
+import { type Content, SidecarExamples } from "./SidecarExamples.js";
 
 export const RequestBodySidecarBox = ({ content }: { content: Content }) => {
-  const { SidecarBody, SidebarFooter, hasContent } = useSidecarExamples({
-    content,
-  });
-
   return (
     <SidecarBox.Root>
       <SidecarBox.Head className="text-xs flex justify-between items-center">
         <span className="font-mono">Request Body Example</span>
       </SidecarBox.Head>
-      <SidecarBody />
-      {hasContent && <SidebarFooter />}
+      <SidecarExamples content={content} />
     </SidecarBox.Root>
   );
 };

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

@@ -1,21 +1,18 @@
 import * as Tabs from "@radix-ui/react-tabs";
 import { cn } from "../../util/cn.js";
-import { useSidecarExamples } from "./ExampleDisplay.js";
 import type { OperationListItemResult } from "./OperationList.js";
 import * as SidecarBox from "./SidecarBox.js";
+import { SidecarExamples } from "./SidecarExamples.js";
 
 type Responses = OperationListItemResult["responses"];
 
 const ResponseContent = ({ response }: { response: Responses[number] }) => {
-  const { SidecarBody, SidebarFooter, hasContent } = useSidecarExamples({
-    content: response.content ?? [],
-    description: response.description ?? undefined,
-  });
-
   return (
     <Tabs.Content value={response.statusCode}>
-      <SidecarBody />
-      {hasContent && <SidebarFooter />}
+      <SidecarExamples
+        content={response.content ?? []}
+        description={response.description ?? undefined}
+      />
     </Tabs.Content>
   );
 };

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

@@ -0,0 +1,155 @@
+import { useState } from "react";
+import { SyntaxHighlight } from "../../components/SyntaxHighlight.js";
+import { type SchemaObject } from "../../oas/graphql/index.js";
+import { CollapsibleCode } from "./CollapsibleCode.js";
+import type { OperationListItemResult } from "./OperationList.js";
+import * as SidecarBox from "./SidecarBox.js";
+import { SimpleSelect } from "./SimpleSelect.js";
+import { generateSchemaExample } from "./util/generateSchemaExample.js";
+
+export type Content = NonNullable<
+  NonNullable<OperationListItemResult["requestBody"]>["content"]
+>;
+export type Example = NonNullable<
+  NonNullable<Content[number]["examples"]>
+>[number];
+
+const formatForDisplay = (value: unknown): string => {
+  if (value == null) return "No example";
+  if (typeof value === "string") return value.trim();
+  return JSON.stringify(value, null, 2);
+};
+
+const getLanguage = (mediaType?: string): string => {
+  if (!mediaType) return "plain";
+  const languages: Record<string, string> = {
+    "application/json": "json",
+    "application/xml": "xml",
+    "application/x-yaml": "yaml",
+    "text/csv": "csv",
+    "application/javascript": "javascript",
+    "application/graphql": "graphql",
+  };
+  return languages[mediaType] ?? "plain";
+};
+
+export type SidecarExamplesProps = {
+  content: Content;
+  description?: string;
+};
+
+export const SidecarExamples = ({
+  content,
+  description,
+}: SidecarExamplesProps) => {
+  const [selectedContentTypeIndex, setSelectedContentTypeIndex] = useState(0);
+  const [selectedExampleIndex, setSelectedExampleIndex] = useState(0);
+
+  // Get the effective content (handle single item array case)
+  const effectiveContent =
+    Array.isArray(content) && content.length === 1
+      ? content[0]
+      : content[selectedContentTypeIndex];
+
+  // Get example value, with fallback to schema-generated example
+  const examples = effectiveContent?.examples ?? [];
+  const selectedExample = examples[selectedExampleIndex];
+
+  let exampleValue = undefined;
+  if (selectedExample) {
+    // If it's a wrapped example with a value field, use that
+    exampleValue =
+      "value" in selectedExample ? selectedExample.value : selectedExample;
+  } else if (effectiveContent?.schema) {
+    // No example provided, generate one from schema
+    exampleValue = generateSchemaExample(
+      effectiveContent.schema as SchemaObject,
+    );
+  }
+
+  const formattedExample = formatForDisplay(exampleValue);
+  const language = getLanguage(effectiveContent?.mediaType);
+
+  const hasContent = examples.length > 0 || content.length > 0;
+
+  return (
+    <>
+      <SidecarBox.Body className="p-0">
+        {selectedExample?.externalValue ? (
+          <div className="p-2">
+            <a
+              href={selectedExample.externalValue}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-xs text-primary hover:underline"
+            >
+              View External Example →
+            </a>
+          </div>
+        ) : (
+          <CollapsibleCode>
+            <SyntaxHighlight
+              language={language}
+              noBackground
+              copyable
+              className="[--scrollbar-color:gray] text-xs max-h-[500px] p-2"
+              code={formattedExample}
+            />
+          </CollapsibleCode>
+        )}
+        {selectedExample?.description && (
+          <div className="border-t text-xs px-3 py-1.5 text-muted-foreground">
+            {selectedExample.description}
+          </div>
+        )}
+      </SidecarBox.Body>
+      {hasContent && (
+        <SidecarBox.Footer className="flex flex-col gap-2 text-xs py-1">
+          <div className="flex items-center gap-2 justify-between min-w-0">
+            <div className="flex items-center gap-2 min-w-0">
+              {content.length > 1 ? (
+                <SimpleSelect
+                  className="max-w-[200px]"
+                  value={selectedContentTypeIndex.toString()}
+                  onChange={(e) =>
+                    setSelectedContentTypeIndex(Number(e.target.value))
+                  }
+                  options={content.map((c, index) => ({
+                    value: index.toString(),
+                    label: c.mediaType,
+                  }))}
+                />
+              ) : (
+                <span className="font-mono text-[11px]">
+                  {content[0]?.mediaType}
+                </span>
+              )}
+            </div>
+            {examples.length > 1 && (
+              <div className="flex items-center gap-1">
+                <SimpleSelect
+                  className="max-w-[180px]"
+                  value={selectedExampleIndex.toString()}
+                  onChange={(e) =>
+                    setSelectedExampleIndex(Number(e.target.value))
+                  }
+                  options={examples.map((example, index) => ({
+                    value: index.toString(),
+                    label:
+                      example.summary ||
+                      example.name ||
+                      example.description ||
+                      `Example ${index + 1}`,
+                  }))}
+                />
+              </div>
+            )}
+          </div>
+          {description && (
+            <div className="text-muted-foreground text-xs">{description}</div>
+          )}
+        </SidecarBox.Footer>
+      )}
+    </>
+  );
+};

package/src/lib/plugins/openapi/client/GraphQLClient.tsx

@@ -1,34 +1,16 @@
 import type { GraphQLError } from "graphql/error/index.js";
-import { ulid } from "ulidx";
-import { initializeWorker } from "zudoku/openapi-worker";
 import { ZudokuError } from "../../../util/invariant.js";
 import type { TypedDocumentString } from "../graphql/graphql.js";
 import type { OpenApiPluginOptions } from "../index.js";
 import type { LocalServer } from "./createServer.js";
-import type { WorkerGraphQLMessage } from "./worker.js";
 
 let localServerPromise: Promise<LocalServer> | undefined;
-let worker: SharedWorker | undefined;
 
 type GraphQLResponse<TResult> = {
   errors?: GraphQLError[];
   data: TResult;
 };
 
-const resolveVariables = async (variables?: unknown) => {
-  if (!variables) return;
-
-  if (
-    typeof variables === "object" &&
-    "type" in variables &&
-    variables.type === "file" &&
-    "input" in variables &&
-    typeof variables.input === "function"
-  ) {
-    variables.input = await variables.input();
-  }
-};
-
 const throwIfError = (response: GraphQLResponse<unknown>) => {
   if (!response.errors?.[0]) return;
 
@@ -39,119 +21,45 @@ const throwIfError = (response: GraphQLResponse<unknown>) => {
 };
 
 export class GraphQLClient {
-  readonly #mode: "remote" | "in-memory" | "worker";
-  #pendingRequests = new Map<string, (value: any) => void>();
-  #port: MessagePort | undefined;
+  constructor(private readonly config: OpenApiPluginOptions) {}
 
-  constructor(private config: OpenApiPluginOptions) {
-    if (config.server) {
-      this.#mode = "remote";
-    } else if (config.inMemory || typeof SharedWorker === "undefined") {
-      this.#mode = "in-memory";
-    } else {
-      this.#mode = "worker";
+  #getLocalServer = async () => {
+    if (!localServerPromise) {
+      localServerPromise = import("./createServer.js").then((m) =>
+        m.createServer(this.config),
+      );
     }
-  }
+    return localServerPromise;
+  };
 
-  #initializeLocalServer = () =>
-    import("./createServer.js").then((m) => m.createServer());
+  #executeFetch = async (init: RequestInit): Promise<Response> => {
+    if (this.config.server) {
+      return fetch(this.config.server, init);
+    }
+
+    const localServer = await this.#getLocalServer();
+    return localServer.fetch("http://localhost/graphql", init);
+  };
 
   fetch = async <TResult, TVariables>(
     query: TypedDocumentString<TResult, TVariables>,
     ...[variables]: TVariables extends Record<string, never> ? [] : [TVariables]
-  ) => {
+  ): Promise<TResult> => {
     const operationName = query.match(/query (\w+)/)?.[1];
 
-    await resolveVariables(variables);
-
-    const body = JSON.stringify({ query, variables, operationName });
-
-    switch (this.#mode) {
-      case "remote": {
-        const response = await fetch(this.config.server!, {
-          method: "POST",
-          body,
-          headers: { "Content-Type": "application/json" },
-        });
-
-        if (!response.ok) {
-          throw new Error("Network response was not ok");
-        }
-
-        const result = (await response.json()) as GraphQLResponse<TResult>;
-        throwIfError(result);
-
-        return result.data;
-      }
-
-      case "in-memory": {
-        if (!localServerPromise) {
-          localServerPromise = this.#initializeLocalServer();
-        }
-
-        const localServer = await localServerPromise;
-        if (!localServer) throw new Error("Local server not initialized");
+    const response = await this.#executeFetch({
+      method: "POST",
+      body: JSON.stringify({ query, variables, operationName }),
+      headers: { "Content-Type": "application/json" },
+    });
 
-        const response = await localServer.fetch(
-          new Request("http://localhost/graphql", {
-            method: "POST",
-            body,
-            headers: { "Content-Type": "application/json" },
-          }),
-        );
-
-        if (!response.ok) {
-          throw new Error("Network response was not ok");
-        }
-
-        const result = (await response.json()) as GraphQLResponse<TResult>;
-        throwIfError(result);
-
-        return result.data;
-      }
-
-      case "worker": {
-        if (!worker) {
-          worker = initializeWorker();
-        }
-
-        if (!this.#port) {
-          const channel = new MessageChannel();
-
-          worker.port.postMessage({ port: channel.port2 }, [channel.port2]);
-
-          this.#port = channel.port1;
-
-          this.#port.onmessage = (e: MessageEvent<WorkerGraphQLMessage>) => {
-            const { id, body } = e.data;
-            const resolve = this.#pendingRequests.get(id);
-            if (resolve) {
-              const result = JSON.parse(body);
-              resolve(result);
-              this.#pendingRequests.delete(id);
-            } else {
-              // eslint-disable-next-line no-console
-              console.error(`No pending request found for id: ${id}`);
-            }
-          };
-
-          this.#port.start();
-        }
-
-        const id = ulid();
-
-        const resultPromise = new Promise<GraphQLResponse<TResult>>(
-          (resolve) => {
-            this.#pendingRequests.set(id, resolve);
-            this.#port!.postMessage({ id, body } as WorkerGraphQLMessage);
-          },
-        );
+    if (!response.ok) {
+      throw new Error("Network response was not ok");
+    }
 
-        const result = await resultPromise;
-        throwIfError(result);
+    const result = (await response.json()) as GraphQLResponse<TResult>;
+    throwIfError(result);
 
-        return result.data;
-      }
-    }
+    return result.data;
   };
 }

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

@@ -1,13 +1,17 @@
 import { useLogger } from "@envelop/core";
 import { createGraphQLServer } from "../../../oas/graphql/index.js";
+import type { OpenApiPluginOptions } from "../index.js";
 
 const map = new Map<string, number>();
 
 /**
  * Creates the GraphQL server
  */
-export const createServer = () =>
+export const createServer = (config: OpenApiPluginOptions) =>
   createGraphQLServer({
+    context: {
+      schemaImports: config.schemaImports,
+    },
     plugins: [
       // eslint-disable-next-line react-hooks/rules-of-hooks
       useLogger({
@@ -22,7 +26,7 @@ export const createServer = () =>
             if (start) {
               // eslint-disable-next-line no-console
               console.log(
-                `${args.operationName} query took ${performance.now() - start}ms`,
+                `[zudoku:debug] ${args.operationName} query took ${performance.now() - start}ms`,
               );
               map.delete(`${startEvent}-${args.operationName}`);
             }