zudoku 0.44.0 → 0.45.0

package/src/app/entry.client.tsx

@@ -34,31 +34,46 @@ if (root.childElementCount > 0) {
   void render(routes);
 }
 
-// eslint-disable-next-line no-console
-console.log(
-  "%cZUDOKU%c by Zuplo v" + window.ZUDOKU_VERSION,
-  [
-    "color: #FF00BD",
-    "line-height: 50px",
-    "font-weight: bolder",
-    "font-size: 30px",
-    "-webkit-text-stroke-width: 1px",
-    "-webkit-text-stroke-color: #FF00BD",
-    "text-transform: uppercase",
-    "text-align: center",
-    "letter-spacing: 5px",
-  ].join(" ;"),
-  [
-    "color: #Df0097",
-    "line-height: 50px",
-    "font-weight: bolder",
-    "font-size: 15px",
-    "text-align: center",
-    "letter-spacing: 5px",
-  ].join(" ;"),
-);
-// eslint-disable-next-line no-console
-console.log("» Learn more about Zudoku https://zudoku.dev");
+if (import.meta.env.IS_ZUPLO) {
+  // eslint-disable-next-line no-console
+  console.log(
+    `%cPowered by Zuplo v${window.ZUDOKU_VERSION}`,
+    [
+      "color: #Df0097",
+      "line-height: 50px",
+      "font-weight: bolder",
+      "font-size: 15px",
+      "text-align: center",
+      "letter-spacing: 5px",
+    ].join(" ;"),
+  );
+} else {
+  // eslint-disable-next-line no-console
+  console.log(
+    `%cZUDOKU%c by Zuplo v${window.ZUDOKU_VERSION}`,
+    [
+      "color: #FF00BD",
+      "line-height: 50px",
+      "font-weight: bolder",
+      "font-size: 30px",
+      "-webkit-text-stroke-width: 1px",
+      "-webkit-text-stroke-color: #FF00BD",
+      "text-transform: uppercase",
+      "text-align: center",
+      "letter-spacing: 5px",
+    ].join(" ;"),
+    [
+      "color: #Df0097",
+      "line-height: 50px",
+      "font-weight: bolder",
+      "font-size: 15px",
+      "text-align: center",
+      "letter-spacing: 5px",
+    ].join(" ;"),
+  );
+  // eslint-disable-next-line no-console
+  console.log("» Learn more about Zudoku https://zudoku.dev");
+}
 
 async function hydrateLazyRoutes(routes: RouteObject[]) {
   const path = window.location.pathname;

package/src/app/main.css

@@ -97,6 +97,11 @@
   html {
     /* This is to prevent layout jumping when the scrollbar appears/disappears */
     @apply -me-[--scrollbar-width] scroll-pt-[--scroll-padding];
+    --dark: -1;
+  }
+
+  html.dark {
+    --dark: 1;
   }
 
   html,
@@ -138,10 +143,11 @@
   }
 
   .prose.prose {
-    @apply prose-a:underline-offset-4 hover:prose-a:text-primary;
+    @apply prose-a:underline-offset-4 prose-a:font-normal hover:prose-a:text-primary;
     @apply prose-blockquote:not-italic prose-blockquote:text-neutral-500/75 prose-blockquote:dark:text-neutral-400;
-    @apply prose-headings:prose-code:mx-2;
-    @apply prose-code:before:content-none prose-code:after:content-none;
+    @apply prose-code:before:content-none prose-code:after:content-none prose-code:font-normal;
+    @apply prose-headings:prose-code:mx-2 prose-li:my-0.5;
+    @apply prose-hr:border-border;
 
     ul.contains-task-list {
       @apply list-none px-0;
@@ -151,6 +157,51 @@
     }
   }
 
+  .shiki {
+    counter-reset: line;
+    @apply leading-normal;
+  }
+  .code-block .shiki {
+    @apply grid;
+  }
+
+  .shiki,
+  .shiki span {
+    color: var(--shiki-light);
+    font-style: var(--shiki-light-font-style) !important;
+    font-weight: var(--shiki-light-font-weight) !important;
+    text-decoration: var(--shiki-light-text-decoration) !important;
+  }
+
+  html.dark .shiki,
+  html.dark .shiki span {
+    color: var(--shiki-dark);
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+  }
+
+  .line-numbers .shiki .line::before {
+    counter-increment: line;
+    content: counter(line);
+    @apply tabular-nums inline-flex items-baseline justify-end me-4 w-3 text-muted-foreground/25;
+  }
+
+  .shiki.not-inline .line {
+    @apply inline-flex items-baseline -mx-4 px-4 w-[calc(100%+2rem)];
+    --highlighted-bg: hsl(
+      from hsl(var(--muted)) h s calc(l + 4 * var(--dark)) / 50%
+    );
+  }
+  .shiki .line.highlighted {
+    @apply bg-[--highlighted-bg];
+  }
+
+  .shiki .highlighted-word {
+    @apply bg-[--highlighted-bg] px-0.5 rounded;
+    box-shadow: 0 0 0 4px var(--highlighted-bg);
+  }
+
   select {
     @apply focus-visible:ring-primary focus-visible:ring-[1.5px] focus:outline-none;
   }

package/src/app/main.tsx

@@ -9,6 +9,7 @@ import { configuredCustomPagesPlugin } from "virtual:zudoku-custom-pages-plugin"
 import { configuredDocsPlugins } from "virtual:zudoku-docs-plugins";
 import { configuredRedirectPlugin } from "virtual:zudoku-redirect-plugin";
 import { configuredSearchPlugin } from "virtual:zudoku-search-plugin";
+import { registerShiki } from "virtual:zudoku-shiki-register";
 import { configuredSidebar } from "virtual:zudoku-sidebar";
 import "virtual:zudoku-theme.css";
 import {
@@ -22,8 +23,11 @@ import {
 import type { ZudokuConfig } from "../config/config.js";
 import type { ZudokuContextOptions } from "../lib/core/ZudokuContext.js";
 import { isNavigationPlugin } from "../lib/core/plugins.js";
+import { highlighter } from "../lib/shiki.js";
 import { ZuploEnv } from "./env.js";
 
+await registerShiki(highlighter);
+
 export const convertZudokuConfigToOptions = (
   config: ZudokuConfig,
 ): ZudokuContextOptions => {
@@ -80,6 +84,10 @@ export const convertZudokuConfigToOptions = (
         : []),
       ...(config.plugins ?? []),
     ],
+    syntaxHighlighting: {
+      highlighter,
+      themes: config.syntaxHighlighting?.themes,
+    },
   };
 };
 

package/src/lib/components/Header.tsx

@@ -105,7 +105,7 @@ export const Header = memo(function HeaderInner() {
                     />
                   </>
                 )}
-                <span className="font-bold text-2xl text-foreground/85 tracking-wide">
+                <span className="font-semibold text-2xl">
                   {page?.pageTitle}
                 </span>
               </div>

package/src/lib/components/Markdown.tsx

@@ -1,37 +1,42 @@
 import { memo } from "react";
-import rehypeRaw from "rehype-raw";
+import { MarkdownHooks, type Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { visit } from "unist-util-visit";
+import { createConfiguredShikiRehypePlugins } from "../shiki.js";
 import { MdxComponents } from "../util/MdxComponents.js";
-import { ReactMarkdown } from "./ReactMarkdown.js";
-
-// same as in packages/dev-portal/framework/vite.ts
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const rehypeCodeBlockPlugin = () => (tree: any) => {
-  visit(tree, "element", (node, _index, parent) => {
-    if (node.tagName === "code") {
-      node.properties.inline = String(parent?.tagName !== "pre");
-    }
-  });
-};
+import { useZudoku } from "./context/ZudokuContext.js";
 
 const remarkPlugins = [remarkGfm];
-const rehypePlugins = [rehypeCodeBlockPlugin, rehypeRaw];
 
 // other styles are defined in main.css .prose
 export const ProseClasses = "prose dark:prose-invert prose-neutral";
 
 export const Markdown = memo(
-  ({ content, className }: { content: string; className?: string }) => (
-    <ReactMarkdown
-      remarkPlugins={remarkPlugins}
-      rehypePlugins={rehypePlugins}
-      components={MdxComponents}
-      className={className}
-    >
-      {content}
-    </ReactMarkdown>
-  ),
+  ({
+    content,
+    className,
+    components,
+  }: {
+    content: string;
+    className?: string;
+    components?: Components;
+  }) => {
+    const { syntaxHighlighting } = useZudoku().options;
+    const rehypePlugins = createConfiguredShikiRehypePlugins(
+      syntaxHighlighting?.themes,
+    );
+
+    return (
+      <div className={className}>
+        <MarkdownHooks
+          remarkPlugins={remarkPlugins}
+          rehypePlugins={rehypePlugins}
+          components={{ ...MdxComponents, ...components }}
+        >
+          {content}
+        </MarkdownHooks>
+      </div>
+    );
+  },
 );
 
 Markdown.displayName = "Markdown";

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

@@ -4,7 +4,7 @@ import { matchPath, useLocation } from "react-router";
 import { useAuth } from "../../authentication/hook.js";
 import type { ZudokuContext } from "../../core/ZudokuContext.js";
 import { joinUrl } from "../../util/joinUrl.js";
-import { CACHE_KEYS, NO_DEHYDRATE } from "../cache.js";
+import { CACHE_KEYS } from "../cache.js";
 import { traverseSidebar } from "../navigation/utils.js";
 
 export const ZudokuReactContext = createContext<ZudokuContext | undefined>(
@@ -67,8 +67,7 @@ export const useCurrentNavigation = () => {
 
   const { data } = useSuspenseQuery({
     queryFn: () => getPluginSidebar(location.pathname),
-    // We just want to suspend here and don't store in SSR dehydrated state
-    queryKey: ["plugin-sidebar", NO_DEHYDRATE, location.pathname],
+    queryKey: ["plugin-sidebar", location.pathname],
   });
 
   const hideSidebar =

package/src/lib/core/ZudokuContext.ts

@@ -2,6 +2,7 @@ import type { QueryClient } from "@tanstack/react-query";
 import { createNanoEvents } from "nanoevents";
 import type { ReactNode } from "react";
 import type { Location } from "react-router";
+import type { BundledTheme, HighlighterCore } from "shiki";
 import type { z } from "zod";
 import type {
   FooterSchema,
@@ -90,6 +91,10 @@ export type ZudokuContextOptions = {
   };
   overrides?: ComponentsContextType;
   protectedRoutes?: string[];
+  syntaxHighlighting?: {
+    highlighter: HighlighterCore;
+    themes?: { light: BundledTheme; dark: BundledTheme };
+  };
 };
 
 export class ZudokuContext {

package/src/lib/errors/ErrorAlert.tsx

@@ -32,7 +32,7 @@ export function ErrorAlert({ error }: { error: unknown }) {
         <div>
           <SyntaxHighlight
             className="max-h-[400px] border mt-2"
-            language="jsstacktrace"
+            language="js"
             code={stringError}
           />
         </div>

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

@@ -1,43 +1,51 @@
 import { GraphQLJSON } from "graphql-type-json";
 import { GraphQLScalarType } from "graphql/index.js";
-import { RecordAny } from "../../util/traverse.js";
+import type { RecordAny } from "../../util/traverse.js";
 
 export const CIRCULAR_REF = "$[Circular Reference]";
 
+const OPENAPI_PROPS = new Set([
+  "properties",
+  "items",
+  "additionalProperties",
+  "allOf",
+  "anyOf",
+  "oneOf",
+]);
+
 const handleCircularRefs = (
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   obj: any,
-  visited = new Map<string, string[]>(),
+  visited = new WeakSet(),
+  refs = new WeakMap(),
   path: string[] = [],
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
 ): any => {
-  if (obj === CIRCULAR_REF) return CIRCULAR_REF;
   if (obj === null || typeof obj !== "object") return obj;
 
-  const currentPath = path.join(".");
-
-  if (obj.type === "object" && obj.properties) {
-    const schemaKey = Object.keys(obj.properties).sort().join("-");
+  if (visited.has(obj)) {
+    const cached = refs.get(obj);
+    if (cached) return cached;
+    const circularProp = path.find((p) => !OPENAPI_PROPS.has(p)) || path[0];
 
-    if (visited.has(schemaKey)) {
-      const prevPaths = visited.get(schemaKey)!;
-      if (prevPaths.some((prev) => currentPath.startsWith(prev))) {
-        return CIRCULAR_REF;
-      }
-      visited.set(schemaKey, [...prevPaths, currentPath]);
-    } else {
-      visited.set(schemaKey, [currentPath]);
-    }
+    return [CIRCULAR_REF, circularProp].filter(Boolean).join(":");
   }
 
+  visited.add(obj);
+
   if (Array.isArray(obj)) {
-    return obj.map((item, index) =>
-      handleCircularRefs(item, visited, [...path, `${index}`]),
+    const result = obj.map((item, index) =>
+      handleCircularRefs(item, visited, refs, [...path, index.toString()]),
     );
+    refs.set(obj, result);
+    return result;
   }
 
   const result: RecordAny = {};
   for (const [key, value] of Object.entries(obj)) {
-    result[key] = handleCircularRefs(value, visited, [...path, key]);
+    result[key] = handleCircularRefs(value, visited, refs, [...path, key]);
   }
+  refs.set(obj, result);
   return result;
 };
 

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

@@ -1,3 +1,4 @@
+import { merge as mergeAllOf } from "allof-merge";
 import { GraphQLError } from "graphql/error/index.js";
 import { OpenAPIV3, type OpenAPIV3_1 } from "openapi-types";
 import { dereference, type JSONSchema } from "./dereference/index.js";
@@ -87,6 +88,9 @@ const parseSchemaInput = async (
 
 /**
  * Validates, dereferences and upgrades the OpenAPI schema (to v3.1) if necessary.
+ *
+ * This only happens for URL schemas (or in standalone mode).
+ * File schemas are pre-processed by the SchemaManager
  */
 export const validate = async (schemaInput: unknown) => {
   const schema = await parseSchemaInput(schemaInput);
@@ -97,6 +101,7 @@ export const validate = async (schemaInput: unknown) => {
 
   const dereferenced = await dereference(schema);
   const upgraded = upgradeSchema(dereferenced);
+  const merged = mergeAllOf(upgraded) as OpenAPIDocument;
 
-  return upgraded;
+  return merged;
 };

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

@@ -49,7 +49,7 @@ export const CollapsibleCode = ({
         )}
       >
         {!open && isOverflowing && (
-          <div className=" absolute inset-0 bg-gradient-to-b from-transparent to-zinc-50/60 dark:to-zinc-950/90 z-10 group-hover:to-transparent"></div>
+          <div className=" absolute inset-0 bg-gradient-to-b from-transparent to-zinc-50/60 dark:to-zinc-950/90 z-10 transition-all group-hover:to-transparent"></div>
         )}
         <div ref={contentRef}>{children}</div>
         {!open && isOverflowing && (
@@ -68,7 +68,10 @@ export const CollapsibleCode = ({
       </CollapsibleContent>
       {isOverflowing && (
         <div
-          className={cn("flex justify-center w-full mb-2", !open && "hidden")}
+          className={cn(
+            "flex justify-center w-full py-2 bg-muted/50",
+            !open && "hidden",
+          )}
         >
           <CollapsibleTrigger asChild>
             <Button variant="outline" size="sm">

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

@@ -30,7 +30,9 @@ const getSchemaInfos = (schema?: SchemaObject) => {
 
   return [
     schema.type === "array" && schema.items.type
-      ? `${schema.items.type}[]`
+      ? Array.isArray(schema.items.type)
+        ? `(${schema.items.type.join(" | ")})[]`
+        : `${schema.items.type}[]`
       : Array.isArray(schema.type)
         ? schema.type.join(" | ")
         : schema.type,

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

@@ -168,8 +168,40 @@ export const Sidecar = ({
             mimeType: "application/json",
           }
         : ({} as any),
-      headers: [{ name: "Content-Type", value: "application/json" }],
-      queryString: [],
+      headers: [
+        { name: "Content-Type", value: "application/json" },
+        ...(operation.parameters
+          ?.filter((p) => p.in === "header" && p.required === true)
+          .map((p) => ({
+            name: p.name,
+            value:
+              p.examples?.find((x) => x.value)?.value ??
+              p.schema?.default ??
+              (p.schema?.type === "string"
+                ? "string"
+                : p.schema?.type === "number" || p.schema?.type === "integer"
+                  ? "0"
+                  : p.schema?.type === "boolean"
+                    ? "true"
+                    : ""),
+          })) ?? []),
+      ],
+      queryString:
+        operation.parameters
+          ?.filter((p) => p.in === "query" && p.required === true)
+          .map((p) => ({
+            name: p.name,
+            value:
+              p.examples?.find((x) => x.value)?.value ??
+              p.schema?.default ??
+              (p.schema?.type === "string"
+                ? "string"
+                : p.schema?.type === "number" || p.schema?.type === "integer"
+                  ? "0"
+                  : p.schema?.type === "boolean"
+                    ? "true"
+                    : ""),
+          })) ?? [],
       httpVersion: "",
       cookies: [],
       headersSize: 0,
@@ -184,6 +216,7 @@ export const Sidecar = ({
     operation.path,
     selectedServer,
     selectedLang,
+    operation.parameters,
   ]);
   const [ref, isOnScreen] = useOnScreen({ rootMargin: "200px 0px 200px 0px" });
 
@@ -225,7 +258,7 @@ export const Sidecar = ({
                 <SyntaxHighlight
                   language={selectedLang}
                   noBackground
-                  className="[--scrollbar-color:gray] text-xs max-h-[500px] p-2"
+                  className="[--scrollbar-color:gray] rounded-none text-xs max-h-[500px] p-2"
                   code={code!}
                 />
               </CollapsibleCode>

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

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
-import { SchemaObject } from "../../oas/parser/index.js";
+import { type SchemaObject } from "../../oas/parser/index.js";
 import { SyntaxHighlight } from "../../ui/SyntaxHighlight.js";
 import { CollapsibleCode } from "./CollapsibleCode.js";
 import type { OperationListItemResult } from "./OperationList.js";
@@ -97,7 +97,7 @@ export const SidecarExamples = ({
             <SyntaxHighlight
               language={language}
               noBackground
-              className="[--scrollbar-color:gray] text-xs max-h-[500px] p-2"
+              className="[--scrollbar-color:gray] rounded-none text-xs max-h-[500px] p-2"
               code={formattedExample}
             />
           </CollapsibleCode>

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

@@ -113,7 +113,7 @@ export const Headers = ({
                       <Autocomplete
                         {...field}
                         placeholder="Name"
-                        className="border-0 shadow-none bg-transparent text-xs font-mono"
+                        className="border-0 shadow-none focus-visible:ring-0 bg-transparent hover:bg-transparent text-xs font-mono"
                         options={[...missingHeaders, ...headerOptions]}
                         onEnterPress={() => handleHeaderEnter(i)}
                         onChange={(e) => {
@@ -166,7 +166,7 @@ export const Headers = ({
                             field.onChange(e);
                             setValue(`headers.${i}.active`, true);
                           }}
-                          className="font-mono text-xs border-0"
+                          className="border-0 shadow-none focus-visible:ring-0 bg-transparent hover:bg-transparent text-xs font-mono"
                         />
                       );
                     }}

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

@@ -12,43 +12,30 @@ const IdentitySelector = ({
   identities?: ApiIdentity[];
   setValue: (value: string) => void;
   value?: string;
-}) => {
-  return (
-    <Card className="w-full overflow-hidden">
-      <RadioGroup
-        onValueChange={(value) => setValue(value)}
-        value={value}
-        defaultValue={NO_IDENTITY}
-        className="gap-0"
-        disabled={identities?.length === 0}
-      >
+}) => (
+  <Card className="w-full overflow-hidden">
+    <RadioGroup
+      onValueChange={(value) => setValue(value)}
+      value={value}
+      defaultValue={NO_IDENTITY}
+      className="gap-0"
+      disabled={identities?.length === 0}
+    >
+      <Label className="h-12 border-b items-center flex gap-2 p-4 cursor-pointer hover:bg-accent">
+        <RadioGroupItem value={NO_IDENTITY} id="none" />
+        <span>None</span>
+      </Label>
+      {identities?.map((identity) => (
         <Label
-          className="h-12 border-b items-center flex p-4 cursor-pointer hover:bg-accent"
-          htmlFor="none"
+          key={identity.id}
+          className="h-12 border-b items-center flex gap-2 p-4 cursor-pointer hover:bg-accent"
         >
-          <RadioGroupItem value={NO_IDENTITY} id="none">
-            None
-          </RadioGroupItem>
-          <Label htmlFor="none" className="ms-2">
-            None
-          </Label>
+          <RadioGroupItem value={identity.id} id={identity.id} />
+          <span>{identity.label}</span>
         </Label>
-        {identities?.map((identity) => (
-          <Label
-            key={identity.id}
-            className="h-12 border-b items-center flex p-4 cursor-pointer hover:bg-accent"
-          >
-            <RadioGroupItem value={identity.id} id={identity.id}>
-              {identity.label}
-            </RadioGroupItem>
-            <Label htmlFor={identity.id} className="ms-2">
-              {identity.label}
-            </Label>
-          </Label>
-        ))}
-      </RadioGroup>
-    </Card>
-  );
-};
+      ))}
+    </RadioGroup>
+  </Card>
+);
 
 export default IdentitySelector;

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

@@ -60,7 +60,7 @@ export const QueryParams = ({
                           onChange={(e) => {
                             field.onChange(e);
                           }}
-                          className="border-0 font-mono text-xs bg-transparent hover:bg-transparent"
+                          className="border-0 shadow-none focus-visible:ring-0 bg-transparent hover:bg-transparent text-xs font-mono"
                         />
                       ) : (
                         <InlineInput asChild>
@@ -111,7 +111,7 @@ export const QueryParams = ({
                             field.onChange(e);
                             form.setValue(`queryParams.${i}.active`, true);
                           }}
-                          className="font-mono text-xs border-0 shadow-none"
+                          className="border-0 shadow-none focus-visible:ring-0 bg-transparent hover:bg-transparent text-xs font-mono"
                         />
                       );
                     }}

package/src/lib/plugins/openapi/schema/SchemaExampleAndDefault.tsx

@@ -17,7 +17,9 @@ export const SchemaExampleAndDefault = ({
         <div>
           <span className="text-muted-foreground">Example: </span>
           <SelectOnClick className="border rounded px-1 font-mono">
-            {typeof example === "object" ? JSON.stringify(example) : example}
+            {typeof example === "object" || typeof example === "boolean"
+              ? JSON.stringify(example)
+              : example}
           </SelectOnClick>
         </div>
       )}
@@ -25,7 +27,8 @@ export const SchemaExampleAndDefault = ({
         <div>
           <span className="text-muted-foreground">Default: </span>
           <SelectOnClick className="border rounded px-1 font-mono">
-            {typeof defaultValue === "object"
+            {typeof defaultValue === "object" ||
+            typeof defaultValue === "boolean"
               ? JSON.stringify(defaultValue)
               : defaultValue}
           </SelectOnClick>