zudoku 0.42.0 → 0.42.1

package/src/lib/components/Markdown.tsx

@@ -1,42 +1,37 @@
 import { memo } from "react";
-import { MarkdownHooks, type Components } from "react-markdown";
+import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
-import { createConfiguredShikiRehypePlugins } from "../shiki.js";
+import { visit } from "unist-util-visit";
 import { MdxComponents } from "../util/MdxComponents.js";
-import { useZudoku } from "./context/ZudokuContext.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");
+    }
+  });
+};
 
 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,
-    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>
-    );
-  },
+  ({ content, className }: { content: string; className?: string }) => (
+    <ReactMarkdown
+      remarkPlugins={remarkPlugins}
+      rehypePlugins={rehypePlugins}
+      components={MdxComponents}
+      className={className}
+    >
+      {content}
+    </ReactMarkdown>
+  ),
 );
 
 Markdown.displayName = "Markdown";

package/src/lib/core/ZudokuContext.ts

@@ -2,7 +2,6 @@ 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 } from "shiki";
 import type { z } from "zod";
 import type {
   FooterSchema,
@@ -90,9 +89,6 @@ export type ZudokuContextOptions = {
   };
   overrides?: ComponentsContextType;
   protectedRoutes?: string[];
-  syntaxHighlighting?: {
-    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="js"
+            language="jsstacktrace"
             code={stringError}
           />
         </div>

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 transition-all 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 group-hover:to-transparent"></div>
         )}
         <div ref={contentRef}>{children}</div>
         {!open && isOverflowing && (
@@ -68,10 +68,7 @@ export const CollapsibleCode = ({
       </CollapsibleContent>
       {isOverflowing && (
         <div
-          className={cn(
-            "flex justify-center w-full py-2 bg-muted/50",
-            !open && "hidden",
-          )}
+          className={cn("flex justify-center w-full mb-2", !open && "hidden")}
         >
           <CollapsibleTrigger asChild>
             <Button variant="outline" size="sm">

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

@@ -225,7 +225,7 @@ export const Sidecar = ({
                 <SyntaxHighlight
                   language={selectedLang}
                   noBackground
-                  className="[--scrollbar-color:gray] rounded-none text-xs max-h-[500px] p-2"
+                  className="[--scrollbar-color:gray] 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 { type SchemaObject } from "../../oas/parser/index.js";
+import { 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] rounded-none text-xs max-h-[500px] p-2"
+              className="[--scrollbar-color:gray] text-xs max-h-[500px] p-2"
               code={formattedExample}
             />
           </CollapsibleCode>

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-block-wrapper]:border",
+        "[&_code]:!bg-gray-50 [&_code]:dark:!bg-gray-800 [&_code]:!border-none",
         "[&_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/SyntaxHighlight.tsx

@@ -1,22 +1,186 @@
-import { memo } from "react";
-import { useZudoku } from "../components/context/ZudokuContext.js";
-import { highlight } from "../shiki.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;
-    const highlightedCode = highlight(
-      code ?? children,
-      props.language,
-      syntaxHighlighting?.themes,
+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 right-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 right-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>
     );
+  }
+
+  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>
+  );
+};
 
-    return <CodeBlock {...props}>{highlightedCode}</CodeBlock>;
-  },
-);
+export const SyntaxHighlight = memo(SyntaxHighlightInner);
 
 SyntaxHighlight.displayName = "SyntaxHighlight";

package/src/lib/util/MdxComponents.tsx

@@ -1,5 +1,4 @@
 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";
@@ -7,7 +6,6 @@ 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;
 
@@ -64,37 +62,26 @@ export const MdxComponents = {
   caution: (props) => <Callout type="caution" {...props} />,
   warning: (props) => <Callout type="caution" {...props} />,
   danger: (props) => <Callout type="danger" {...props} />,
-  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+)/);
+  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>;
 
-    if (inline === "true" || inline === true) {
-      return (
-        <InlineCode className={cn(className, "inline")}>{children}</InlineCode>
-      );
+    if (inline === true || inline === "true") {
+      return <InlineCode className={className}>{children}</InlineCode>;
     }
 
+    const match = className?.match(/language?-(\w+)/);
+
     return (
-      <CodeBlock
+      <SyntaxHighlight
         language={match?.[1]}
+        className="rounded-xl p-4 border dark:!bg-foreground/10 dark:border-transparent"
         showLanguageIndicator
-        showLineNumbers={showLineNumbers}
-        title={title}
-      >
-        <code className={cn(className, "not-inline")} {...props}>
-          {children}
-        </code>
-      </CodeBlock>
+        code={String(children).trim()}
+        title={typeof title === "string" ? title : undefined}
+      />
     );
   },
 } satisfies MdxComponentsType;

package/dist/lib/shiki.d.ts

@@ -1,35 +0,0 @@
-import rehypeShikiFromHighlighter from "@shikijs/rehype/core";
-import type { Root } from "hast";
-import { type JSX } from "react";
-import type { BundledLanguage, BundledTheme } from "shiki";
-export declare const highlighter: import("shiki").HighlighterCore;
-export declare const defaultHighlightOptions: {
-    themes: {
-        light: "github-light";
-        dark: "github-dark";
-    };
-    defaultColor: false;
-    inline: "tailing-curly-colon";
-    addLanguageClass: true;
-    transformers: import("shiki").ShikiTransformer[];
-    parseMetaString: (str: string) => any;
-};
-export declare const defaultLanguages: BundledLanguage[];
-export declare const createConfiguredShikiRehypePlugins: (themes?: {
-    light: BundledTheme;
-    dark: BundledTheme;
-}) => ((() => (tree: Root) => void) | [typeof rehypeShikiFromHighlighter, import("shiki").HighlighterCore, {
-    themes: {
-        light: BundledTheme;
-        dark: BundledTheme;
-    };
-    defaultColor: false;
-    inline: "tailing-curly-colon";
-    addLanguageClass: true;
-    transformers: import("shiki").ShikiTransformer[];
-    parseMetaString: (str: string) => any;
-}])[];
-export declare const highlight: (code: string, lang?: string, themes?: {
-    light: BundledTheme;
-    dark: BundledTheme;
-}) => JSX.Element;

package/dist/lib/shiki.js

@@ -1,103 +0,0 @@
-import rehypeShikiFromHighlighter from "@shikijs/rehype/core";
-import { transformerMetaHighlight, transformerMetaWordHighlight, } from "@shikijs/transformers";
-import { toJsxRuntime } from "hast-util-to-jsx-runtime";
-import { Fragment } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { createHighlighterCore } from "shiki/core";
-import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
-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",
-    },
-    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];
-        }));
-    },
-};
-export const defaultLanguages = [
-    "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) => {
-    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) => {
-    return [
-        [
-            rehypeShikiFromHighlighter,
-            highlighter,
-            {
-                ...defaultHighlightOptions,
-                themes: themes ?? defaultHighlightOptions.themes,
-            },
-        ],
-        rehypeCodeBlockPlugin,
-    ];
-};
-export const highlight = (code, lang = "text", themes) => {
-    const value = highlighter.codeToHast(code, {
-        lang,
-        ...defaultHighlightOptions,
-        themes: themes ?? defaultHighlightOptions.themes,
-    });
-    return toJsxRuntime(value, { Fragment, jsx, jsxs });
-};
-//# sourceMappingURL=shiki.js.map

package/dist/lib/shiki.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"shiki.js","sourceRoot":"","sources":["../../src/lib/shiki.ts"],"names":[],"mappings":"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"}

package/dist/lib/ui/CodeBlock.d.ts

@@ -1,16 +0,0 @@
-import type { ReactNode } from "react";
-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 declare const CodeBlock: ({ children, title, language, showCopy, showCopyText, showLanguageIndicator, showLineNumbers, ...props }: CodeBlockProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/lib/ui/CodeBlock.js

@@ -1,18 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckIcon, CopyIcon } from "lucide-react";
-import { useRef, useState } from "react";
-import { cn } from "../util/cn.js";
-export const CodeBlock = ({ children, title, language, showCopy = "hover", showCopyText, showLanguageIndicator = true, showLineNumbers, ...props }) => {
-    const [isCopied, setIsCopied] = useState(false);
-    const ref = useRef(null);
-    if (!children)
-        return null;
-    return (_jsxs("div", { className: cn("code-block-wrapper relative group bg-muted/50 rounded-md", showLineNumbers && "line-numbers"), children: [title && (_jsx("div", { className: "text-xs text-muted-foreground top-2 font-mono border-b w-full py-2 px-4 ", children: title })), _jsx("div", { className: cn("code-block text-sm not-prose scrollbar overflow-x-auto scrollbar p-4", props.className), ref: ref, children: children }), showLanguageIndicator && (_jsx("span", { className: cn("absolute top-1.5 right-3 !text-[11px] font-mono text-muted-foreground transition group-hover:opacity-0", title && "top-12"), children: language })), showCopy !== "never" && (_jsxs("button", { type: "button", "aria-label": "Copy code", title: "Copy code", className: cn("absolute top-2 right-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);
-                }, children: [isCopied ? (_jsx(CheckIcon, { className: "text-emerald-600", size: 16, strokeWidth: 2.5, absoluteStrokeWidth: true })) : (_jsx(CopyIcon, { size: 16 })), showCopyText && "Copy"] }))] }));
-};
-//# sourceMappingURL=CodeBlock.js.map

package/dist/lib/ui/CodeBlock.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CodeBlock.js","sourceRoot":"","sources":["../../../src/lib/ui/CodeBlock.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAEnD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,EAAE,EAAE,MAAM,eAAe,CAAC;AAiBnC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,QAAQ,GAAG,OAAO,EAClB,YAAY,EACZ,qBAAqB,GAAG,IAAI,EAC5B,eAAe,EACf,GAAG,KAAK,EACO,EAAE,EAAE;IACnB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzC,IAAI,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC;IAE3B,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,0DAA0D,EAC1D,eAAe,IAAI,cAAc,CAClC,aAEA,KAAK,IAAI,CACR,cAAK,SAAS,EAAC,0EAA0E,YACtF,KAAK,GACF,CACP,EACD,cACE,SAAS,EAAE,EAAE,CACX,sEAAsE,EACtE,KAAK,CAAC,SAAS,CAChB,EACD,GAAG,EAAE,GAAG,YAEP,QAAQ,GACL,EACL,qBAAqB,IAAI,CACxB,eACE,SAAS,EAAE,EAAE,CACX,wGAAwG,EACxG,KAAK,IAAI,QAAQ,CAClB,YAEA,QAAQ,GACJ,CACR,EACA,QAAQ,KAAK,OAAO,IAAI,CACvB,kBACE,IAAI,EAAC,QAAQ,gBACF,WAAW,EACtB,KAAK,EAAC,WAAW,EACjB,SAAS,EAAE,EAAE,CACX,gJAAgJ,EAChJ,KAAK,IAAI,QAAQ,EACjB,QAAQ,KAAK,OAAO,IAAI,mCAAmC,EAC3D,YAAY,IAAI,qCAAqC,CACtD,EACD,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,WAAW;wBAAE,OAAO;oBAEtC,WAAW,CAAC,IAAI,CAAC,CAAC;oBAClB,KAAK,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;oBAC5D,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;gBAC7C,CAAC,aAEA,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,SAAS,IACR,SAAS,EAAC,kBAAkB,EAC5B,IAAI,EAAE,EAAE,EACR,WAAW,EAAE,GAAG,EAChB,mBAAmB,SACnB,CACH,CAAC,CAAC,CAAC,CACF,KAAC,QAAQ,IAAC,IAAI,EAAE,EAAE,GAAI,CACvB,EACA,YAAY,IAAI,MAAM,IAChB,CACV,IACG,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/vite/plugin-shiki-register.d.ts

@@ -1,3 +0,0 @@
-import type { Plugin } from "vite";
-import type { LoadedConfig } from "../config/config.js";
-export declare const viteShikiRegisterPlugin: (getCurrentConfig: () => LoadedConfig) => Plugin;

package/dist/vite/plugin-shiki-register.js

@@ -1,38 +0,0 @@
-import { defaultHighlightOptions, defaultLanguages, highlighter, } from "../lib/shiki.js";
-export const viteShikiRegisterPlugin = (getCurrentConfig) => {
-    const virtualModuleId = "virtual:zudoku-shiki-register";
-    const resolvedVirtualModuleId = "\0" + virtualModuleId;
-    return {
-        name: "vite-plugin-shiki-register",
-        resolveId(id) {
-            if (id === virtualModuleId) {
-                return resolvedVirtualModuleId;
-            }
-        },
-        async load(id) {
-            if (id !== resolvedVirtualModuleId)
-                return;
-            const config = getCurrentConfig();
-            const languages = config.syntaxHighlighting?.languages ?? defaultLanguages;
-            const themes = Object.values(config.syntaxHighlighting?.themes ?? defaultHighlightOptions.themes);
-            await Promise.all([
-                highlighter.loadTheme(...themes.map((theme) => import(`@shikijs/themes/${theme}`))),
-                highlighter.loadLanguage(...languages.map((lang) => import(`@shikijs/langs/${lang}`))),
-            ]);
-            const code = [
-                "export const registerShiki = async (highlighter) => {",
-                "  await Promise.all([",
-                "    highlighter.loadTheme(",
-                themes.map((t) => `import('zudoku/shiki/themes/${t}')`).join(","),
-                "    ),",
-                "    highlighter.loadLanguage(",
-                languages.map((l) => `import('zudoku/shiki/langs/${l}')`).join(","),
-                "    ),",
-                "  ]);",
-                "};",
-            ];
-            return code.join("\n");
-        },
-    };
-};
-//# sourceMappingURL=plugin-shiki-register.js.map