zudoku 0.44.1 → 0.45.1

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

@@ -15,7 +15,9 @@ import { LogicalGroup } from "./LogicalGroup/LogicalGroup.js";
 import { SchemaExampleAndDefault } from "./SchemaExampleAndDefault.js";
 import { SchemaView } from "./SchemaView.js";
 import {
+  extractCircularRefInfo,
   hasLogicalGroupings,
+  isArrayCircularRef,
   isArrayType,
   isCircularRef,
   isComplexType,
@@ -40,13 +42,13 @@ export const SchemaLogicalGroup = ({ schema }: { schema: SchemaObject }) => {
   }
 };
 
-const RecursiveIndicator = () => (
+const RecursiveIndicator = ({ circularProp }: { circularProp?: string }) => (
   <InlineCode
     className="inline-flex items-center gap-1.5 italic text-xs translate-y-0.5"
     selectOnClick={false}
   >
     <RefreshCcwDotIcon size={13} />
-    <span>circular</span>
+    <span>{circularProp ? `${circularProp} (circular)` : "circular"}</span>
   </InlineCode>
 );
 
@@ -82,6 +84,16 @@ export const SchemaPropertyItem = ({
     );
   }
 
+  const isCollapsible = Boolean(
+    (hasLogicalGroupings(schema) ||
+      isComplexType(schema) ||
+      (isArrayType(schema) &&
+        "items" in schema &&
+        isComplexType(schema.items)) ||
+      schema.additionalProperties) &&
+      !isArrayCircularRef(schema),
+  );
+
   return (
     <li className="p-4 bg-border/20 hover:bg-border/30">
       <div className="flex flex-col gap-2.5 justify-between text-sm">
@@ -95,9 +107,11 @@ export const SchemaPropertyItem = ({
               group !== "optional" && (
                 <span className="text-primary">required</span>
               ),
-              isArrayType(schema) &&
-                "items" in schema &&
-                isCircularRef(schema.items) && <RecursiveIndicator />,
+              isArrayCircularRef(schema) && (
+                <RecursiveIndicator
+                  circularProp={extractCircularRefInfo(schema.items)}
+                />
+              ),
             ]}
           />
         </div>
@@ -113,10 +127,7 @@ export const SchemaPropertyItem = ({
         {schema.const && <ConstValue schema={schema} hideDescription />}
         {schema.enum && <EnumValues values={schema.enum} />}
         <SchemaExampleAndDefault schema={schema} />
-        {(hasLogicalGroupings(schema) ||
-          isComplexType(schema) ||
-          isArrayType(schema) ||
-          schema.additionalProperties) && (
+        {isCollapsible && (
           <Collapsible.Root
             defaultOpen={defaultOpen}
             open={isOpen}
@@ -136,14 +147,9 @@ export const SchemaPropertyItem = ({
                   <SchemaLogicalGroup schema={schema} />
                 ) : schema.type === "object" ? (
                   <SchemaView schema={schema} />
-                ) : (
-                  isArrayType(schema) &&
-                  "items" in schema &&
-                  typeof schema.items === "object" &&
-                  !isCircularRef(schema.items) && (
-                    <SchemaView schema={schema.items} />
-                  )
-                )}
+                ) : isArrayType(schema) && "items" in schema ? (
+                  <SchemaView schema={schema.items} />
+                ) : null}
               </div>
             </Collapsible.Content>
           </Collapsible.Root>

package/src/lib/plugins/openapi/schema/utils.ts

@@ -12,11 +12,13 @@ export const isArrayType = (value: SchemaObject) =>
   // schema.type might be an array of types, so we need to check if "array" is one of them
   (Array.isArray(value.type) && value.type.includes("array"));
 
-export const isComplexType = (value: SchemaObject) =>
-  (value.type === "object" && Object.keys(value.properties ?? {}).length > 0) ||
-  (value.type === "array" &&
-    typeof value.items === "object" &&
-    (!value.items.type || value.items.type === "object"));
+export const isComplexType = (value?: SchemaObject) =>
+  value &&
+  ((value.type === "object" &&
+    Object.keys(value.properties ?? {}).length > 0) ||
+    (value.type === "array" &&
+      typeof value.items === "object" &&
+      (!value.items.type || value.items.type === "object")));
 
 export const hasLogicalGroupings = (value: SchemaObject) =>
   Boolean(value.oneOf ?? value.allOf ?? value.anyOf);
@@ -30,4 +32,14 @@ export const LogicalSchemaTypeMap = {
 export type LogicalGroupType = "AND" | "OR" | "ONE";
 
 export const isCircularRef = (schema: unknown): schema is string =>
-  schema === CIRCULAR_REF;
+  typeof schema === "string" && schema.startsWith(CIRCULAR_REF);
+
+export const isArrayCircularRef = (
+  schema: SchemaObject,
+): schema is SchemaObject & { items: SchemaObject } =>
+  isArrayType(schema) && "items" in schema && isCircularRef(schema.items);
+
+export const extractCircularRefInfo = (
+  ref?: string | SchemaObject,
+): string | undefined =>
+  typeof ref === "string" ? ref.split(":")[1] : undefined;

package/src/lib/plugins/openapi/util/generateSchemaExample.ts

@@ -1,10 +1,15 @@
 import { type SchemaObject } from "../../../oas/graphql/index.js";
+import { isCircularRef } from "../schema/utils.js";
 
 export const generateSchemaExample = (
-  schema: SchemaObject,
+  schema?: SchemaObject,
   name?: string,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 ): any => {
+  if (!schema || isCircularRef(schema)) {
+    return null;
+  }
+
   // Check for schema-level example first
   if (schema.example !== undefined) {
     return schema.example;

package/src/lib/shiki.ts

@@ -0,0 +1,133 @@
+import rehypeShikiFromHighlighter, {
+  type RehypeShikiCoreOptions,
+} from "@shikijs/rehype/core";
+import {
+  transformerMetaHighlight,
+  transformerMetaWordHighlight,
+} from "@shikijs/transformers";
+import type { Root } from "hast";
+import { toJsxRuntime } from "hast-util-to-jsx-runtime";
+import { Fragment, type JSX } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import type { BundledLanguage, BundledTheme, HighlighterCore } from "shiki";
+import { createHighlighterCore } from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+import type { Pluggable } from "unified";
+import { visit } from "unist-util-visit";
+import { cn } from "./util/cn.js";
+
+const engine = createJavaScriptRegexEngine({ forgiving: true });
+export const highlighter = await createHighlighterCore({
+  engine,
+  langAlias: {
+    markup: "html",
+    svg: "xml",
+    mathml: "xml",
+    atom: "xml",
+    ssml: "xml",
+    rss: "xml",
+    webmanifest: "json",
+  },
+});
+
+export const defaultHighlightOptions = {
+  themes: {
+    light: "github-light",
+    dark: "github-dark",
+  } satisfies { light: BundledTheme; dark: BundledTheme },
+  defaultColor: false,
+  inline: "tailing-curly-colon",
+  addLanguageClass: true,
+  transformers: [transformerMetaHighlight(), transformerMetaWordHighlight()],
+  parseMetaString: (str) => {
+    // Matches key="value", key=value, or key attributes
+    const matches = str.matchAll(
+      /([a-z0-9]+)(?:=(["'])(.*?)\2|=(.*?)(?:\s|$)|(?:\s|$))/gi,
+    );
+    return Object.fromEntries(
+      Array.from(matches).map((match) => {
+        const key = match[1];
+        const value = match[3] || match[4] || true;
+        return [key, value];
+      }),
+    );
+  },
+} satisfies RehypeShikiCoreOptions;
+
+export const defaultLanguages: BundledLanguage[] = [
+  "shellscript",
+  "javascript",
+  "jsx",
+  "typescript",
+  "tsx",
+  "json",
+  "python",
+  "java",
+  "go",
+  "csharp",
+  "kotlin",
+  "objective-c",
+  "php",
+  "ruby",
+  "swift",
+  "css",
+  "html",
+  "xml",
+  "yaml",
+  "markdown",
+  "mdx",
+];
+
+const rehypeCodeBlockPlugin = () => (tree: Root) => {
+  visit(tree, "element", (node, _index, parent) => {
+    if (node.tagName !== "code") return;
+
+    const isCodeBlock = parent?.type === "element" && parent.tagName === "pre";
+    node.properties.inline = JSON.stringify(!isCodeBlock);
+
+    // Pass through properties from <pre> to <code> so we can handle it in `code` only
+    if (isCodeBlock) {
+      node.properties = {
+        ...node.properties,
+        ...structuredClone(parent.properties),
+        class: cn(node.properties.class, parent.properties.class),
+      };
+      parent.properties = {};
+    }
+  });
+};
+
+export const createConfiguredShikiRehypePlugins = (themes?: {
+  light: BundledTheme;
+  dark: BundledTheme;
+}) => {
+  return [
+    [
+      rehypeShikiFromHighlighter,
+      highlighter,
+      {
+        ...defaultHighlightOptions,
+        themes: themes ?? defaultHighlightOptions.themes,
+      } satisfies RehypeShikiCoreOptions,
+    ] satisfies Pluggable,
+    rehypeCodeBlockPlugin,
+  ];
+};
+
+export const highlight = (
+  highlighter: HighlighterCore,
+  code: string,
+  lang = "text",
+  themes: {
+    light: BundledTheme;
+    dark: BundledTheme;
+  } = defaultHighlightOptions.themes,
+) => {
+  const value = highlighter.codeToHast(code, {
+    lang,
+    ...defaultHighlightOptions,
+    themes,
+  });
+
+  return toJsxRuntime(value, { Fragment, jsx, jsxs }) as JSX.Element;
+};

package/src/lib/ui/Callout.tsx

@@ -77,7 +77,7 @@ export const Callout = ({
           "grid grid-cols-[min-content_1fr] items-baseline grid-rows-[fit-content_1fr] gap-x-4 gap-y-2",
         !icon && title && "flex flex-col gap-2",
         "[&_a]:underline [&_a]:decoration-current [&_a]:decoration-from-font [&_a]:underline-offset-4 hover:[&_a]:decoration-1",
-        "[&_code]:!bg-gray-50 [&_code]:dark:!bg-gray-800 [&_code]:!border-none",
+        "[&_.code-block-wrapper]:border",
         "[&_ul]:list-disc [&_ol]:list-decimal [&_ul]:ps-4 [&_ul>li]:ps-1 [&_ul>li]:my-1",
         icon && title && "items-center",
         border,

package/src/lib/ui/CodeBlock.tsx

@@ -0,0 +1,102 @@
+import { CheckIcon, CopyIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { useRef, useState } from "react";
+import { cn } from "../util/cn.js";
+
+export type CodeBlockProps = {
+  className?: string;
+  noBackground?: boolean;
+  wrapLines?: boolean;
+  showLanguageIndicator?: boolean;
+  language?: string;
+  title?: string;
+  children?: ReactNode;
+  code?: ReactNode;
+  showCopy?: "hover" | "always" | "never";
+  showCopyText?: boolean;
+  disabled?: boolean;
+  showLineNumbers?: boolean;
+};
+
+export const CodeBlock = ({
+  children,
+  title,
+  language,
+  showCopy = "hover",
+  showCopyText,
+  showLanguageIndicator = true,
+  showLineNumbers,
+  ...props
+}: CodeBlockProps) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  if (!children) return null;
+
+  return (
+    <div
+      className={cn(
+        "code-block-wrapper relative group bg-muted/50 rounded-md",
+        showLineNumbers && "line-numbers",
+      )}
+    >
+      {title && (
+        <div className="text-xs text-muted-foreground top-2 font-mono border-b w-full py-2 px-4 ">
+          {title}
+        </div>
+      )}
+      <div
+        className={cn(
+          "code-block text-sm not-prose scrollbar overflow-x-auto scrollbar p-4",
+          props.className,
+        )}
+        ref={ref}
+      >
+        {children}
+      </div>
+      {showLanguageIndicator && (
+        <span
+          className={cn(
+            "absolute top-1.5 end-3 !text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0",
+            title && "top-12",
+          )}
+        >
+          {language}
+        </span>
+      )}
+      {showCopy !== "never" && (
+        <button
+          type="button"
+          aria-label="Copy code"
+          title="Copy code"
+          className={cn(
+            "absolute top-2 end-2 p-2 hover:outline hover:outline-border/75 dark:hover:outline-border rounded-md text-sm text-muted-foreground transition",
+            title && "top-10",
+            showCopy === "hover" && "opacity-0 group-hover:opacity-100",
+            showCopyText && "flex gap-2 items-center font-medium",
+          )}
+          disabled={isCopied}
+          onClick={() => {
+            if (!ref.current?.textContent) return;
+
+            setIsCopied(true);
+            void navigator.clipboard.writeText(ref.current.textContent);
+            setTimeout(() => setIsCopied(false), 2000);
+          }}
+        >
+          {isCopied ? (
+            <CheckIcon
+              className="text-emerald-600"
+              size={16}
+              strokeWidth={2.5}
+              absoluteStrokeWidth
+            />
+          ) : (
+            <CopyIcon size={16} />
+          )}
+          {showCopyText && "Copy"}
+        </button>
+      )}
+    </div>
+  );
+};

package/src/lib/ui/SyntaxHighlight.tsx

@@ -1,186 +1,27 @@
-import {
-  Highlight,
-  Prism,
-  themes,
-  type HighlightProps,
-} from "prism-react-renderer";
-
-import { CheckIcon, CopyIcon } from "lucide-react";
-
-globalThis.Prism = Prism;
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-bash.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-ruby.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-markup.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-json.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-java.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-csharp.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-objectivec.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-markdown.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-javascript.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-typescript.min.js");
-// @ts-expect-error This is untyped
-void import("prismjs/components/prism-jsstacktrace.min.js");
-
-import { useTheme } from "next-themes";
-import { memo, useState } from "react";
-import { ClientOnly } from "../components/ClientOnly.js";
-import { cn } from "../util/cn.js";
-
-export type SyntaxHighlightProps = {
-  className?: string;
-  noBackground?: boolean;
-  wrapLines?: boolean;
-  showLanguageIndicator?: boolean;
-  language?: string;
-  title?: string;
-  children?: string;
-  code?: string;
-  showCopy?: "hover" | "always" | "never";
-  showCopyText?: boolean;
-  disabled?: boolean;
-} & Omit<HighlightProps, "children" | "language">;
-
-const remapLang = {
-  mdx: "md",
-} as Record<string, string>;
-
-const SyntaxHighlightInner = ({
-  language = "plain",
-  showCopy = "hover",
-  showCopyText,
-  title,
-  children,
-  disabled,
-  ...props
-}: SyntaxHighlightProps) => {
-  const { resolvedTheme } = useTheme();
-  const [isCopied, setIsCopied] = useState(false);
-
-  const code = children ?? props.code;
-
-  if (!code) {
-    return null;
-  }
-
-  const highlightTheme =
-    resolvedTheme === "dark" ? themes.vsDark : themes.github;
-
-  // hardcoded values from the themes to avoid color flash in SSR
-  const themeColorClasses =
-    "bg-[#f6f8fa] text-[#393a34] dark:bg-[#1e1e1e] dark:text-[#9cdcfe]";
-
-  const Wrapper = ({
-    children,
-    className,
-    style,
-  }: {
-    children: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
-  }) => (
-    <div className="relative group">
-      {title && (
-        <div className="text-xs text-muted-foreground absolute top-2 font-mono border-b w-full pb-2 px-4 ">
-          {title}
-        </div>
-      )}
-      <pre
-        className={cn(
-          "relative scrollbar overflow-x-auto",
-          props.className,
-          props.noBackground ? "!bg-transparent" : themeColorClasses,
-          props.wrapLines && "whitespace-pre-wrap break-words",
-          title && "pt-10",
-          className,
-        )}
-        style={style}
-      >
-        {children}
-      </pre>
-      {props.showLanguageIndicator && (
-        <span className="absolute top-1.5 end-3 text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0">
-          {language}
-        </span>
-      )}
-      {showCopy !== "never" && (
-        <button
-          type="button"
-          aria-label="Copy code"
-          title="Copy code"
-          className={cn(
-            "absolute top-2 end-2 p-2  hover:outline hover:outline-border/75 dark:hover:outline-border rounded-md text-sm text-muted-foreground transition",
-            showCopy === "hover"
-              ? "opacity-0 group-hover:opacity-100 group-hover:bg-zinc-100 group-hover:dark:bg-zinc-700"
-              : "bg-zinc-100 dark:bg-zinc-700",
-            showCopyText && "flex gap-2 items-center font-medium",
-          )}
-          disabled={isCopied}
-          onClick={() => {
-            setIsCopied(true);
-            void navigator.clipboard.writeText(code);
-            setTimeout(() => setIsCopied(false), 2000);
-          }}
-        >
-          {isCopied ? (
-            <CheckIcon
-              className="text-emerald-600"
-              size={16}
-              strokeWidth={2.5}
-              absoluteStrokeWidth
-            />
-          ) : (
-            <CopyIcon size={16} />
-          )}
-          {showCopyText && "Copy"}
-        </button>
-      )}
-    </div>
-  );
-
-  if (disabled) {
-    return (
-      <ClientOnly fallback={<Wrapper>{code}</Wrapper>}>
-        <Wrapper>{code}</Wrapper>
-      </ClientOnly>
+import { memo } from "react";
+import { useZudoku } from "../components/context/ZudokuContext.js";
+import { highlight } from "../shiki.js";
+import invariant from "../util/invariant.js";
+import { CodeBlock, type CodeBlockProps } from "./CodeBlock.js";
+
+type SyntaxHighlightProps = CodeBlockProps &
+  ({ code: string; children?: never } | { code?: never; children: string });
+
+export const SyntaxHighlight = memo(
+  ({ code, children, ...props }: SyntaxHighlightProps) => {
+    const { syntaxHighlighting } = useZudoku().options;
+
+    invariant(syntaxHighlighting?.highlighter, "Highlighter not found");
+
+    const highlightedCode = highlight(
+      syntaxHighlighting.highlighter,
+      code ?? children,
+      props.language,
+      syntaxHighlighting.themes,
     );
-  }
-
-  return (
-    <ClientOnly fallback={<Wrapper>{code}</Wrapper>}>
-      <Highlight
-        theme={highlightTheme}
-        language={remapLang[language] ?? language}
-        {...props}
-        code={code}
-      >
-        {({ className, style, tokens, getLineProps, getTokenProps }) => (
-          <Wrapper className={className} style={style}>
-            {tokens.map((line, i) => (
-              // eslint-disable-next-line react/no-array-index-key
-              <div key={i} {...getLineProps({ line })}>
-                {line.map((token, key) => (
-                  // eslint-disable-next-line react/no-array-index-key
-                  <span key={key} {...getTokenProps({ token })} />
-                ))}
-              </div>
-            ))}
-          </Wrapper>
-        )}
-      </Highlight>
-    </ClientOnly>
-  );
-};
 
-export const SyntaxHighlight = memo(SyntaxHighlightInner);
+    return <CodeBlock {...props}>{highlightedCode}</CodeBlock>;
+  },
+);
 
 SyntaxHighlight.displayName = "SyntaxHighlight";

package/src/lib/util/MdxComponents.tsx

@@ -1,4 +1,5 @@
 import { type MDXComponents } from "mdx/types.js";
+import { CodeBlock } from "zudoku/ui/CodeBlock.js";
 import { AnchorLink } from "../components/AnchorLink.js";
 import { Heading } from "../components/Heading.js";
 import { InlineCode } from "../components/InlineCode.js";
@@ -6,6 +7,7 @@ import { Button } from "../ui/Button.js";
 import { Callout } from "../ui/Callout.js";
 import { Stepper } from "../ui/Stepper.js";
 import { SyntaxHighlight } from "../ui/SyntaxHighlight.js";
+import { cn } from "./cn.js";
 
 export type MdxComponentsType = Readonly<MDXComponents> | null | undefined;
 
@@ -62,26 +64,37 @@ export const MdxComponents = {
   caution: (props) => <Callout type="caution" {...props} />,
   warning: (props) => <Callout type="caution" {...props} />,
   danger: (props) => <Callout type="danger" {...props} />,
-  pre: ({ children }) => <>{children}</>,
-  code: ({ className, children, ...props }) => {
-    // `inline` provided by the rehype plugin, as react-markdown removed support for that
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const { inline, title } = props as Record<string, unknown>;
+  pre: (props) => (
+    <pre className={cn("not-prose my-4", props.className)} {...props} />
+  ),
+  code: ({
+    className,
+    node: _node,
+    children,
+    title,
+    inline,
+    showLineNumbers,
+    ...props
+  }) => {
+    const match = className?.match(/language?-(\w+)/);
 
-    if (inline === true || inline === "true") {
-      return <InlineCode className={className}>{children}</InlineCode>;
+    if (inline === "true" || inline === true) {
+      return (
+        <InlineCode className={cn(className, "inline")}>{children}</InlineCode>
+      );
     }
 
-    const match = className?.match(/language?-(\w+)/);
-
     return (
-      <SyntaxHighlight
+      <CodeBlock
         language={match?.[1]}
-        className="rounded-xl p-4 border dark:!bg-foreground/10 dark:border-transparent"
         showLanguageIndicator
-        code={String(children).trim()}
-        title={typeof title === "string" ? title : undefined}
-      />
+        showLineNumbers={showLineNumbers}
+        title={title}
+      >
+        <code className={cn(className, "not-inline")} {...props}>
+          {children}
+        </code>
+      </CodeBlock>
     );
   },
 } satisfies MdxComponentsType;

package/src/shiki/langs/abap.js

@@ -0,0 +1 @@
+export { default } from "@shikijs/langs/abap";

package/src/shiki/langs/actionscript-3.js

@@ -0,0 +1 @@
+export { default } from "@shikijs/langs/actionscript-3";

package/src/shiki/langs/ada.js

@@ -0,0 +1 @@
+export { default } from "@shikijs/langs/ada";

package/src/shiki/langs/angular-expression.js

@@ -0,0 +1 @@
+export { default } from "@shikijs/langs/angular-expression";

package/src/shiki/langs/angular-html.js

@@ -0,0 +1 @@
+export { default } from "@shikijs/langs/angular-html";

package/src/shiki/langs/angular-inline-style.js

@@ -0,0 +1 @@
+export { default } from "@shikijs/langs/angular-inline-style";

package/src/shiki/langs/angular-inline-template.js

@@ -0,0 +1 @@
+export { default } from "@shikijs/langs/angular-inline-template";