fumadocs-ui/dist/components/dynamic-codeblock.js

The Radix UI version of Fumadocs UI

'use client';

import { CodeBlock, Pre } from "./codeblock.js";
import { cn } from "@fumadocs/ui/cn";
import { jsx } from "react/jsx-runtime";
import { Suspense, createContext, use, useDeferredValue, useId } from "react";
import { useShiki } from "fumadocs-core/highlight/client";

//#region src/components/dynamic-codeblock.tsx
const PropsContext = createContext(void 0);
function DefaultPre(props) {
	const extraProps = use(PropsContext);
	return /* @__PURE__ */ jsx(CodeBlock, {
		...props,
		...extraProps,
		className: cn("my-0", props.className, extraProps?.className),
		children: /* @__PURE__ */ jsx(Pre, { children: props.children })
	});
}
function DynamicCodeBlock({ lang, code, codeblock, options, wrapInSuspense = true }) {
	const id = useId();
	const shikiOptions = {
		lang,
		...options,
		components: {
			pre: DefaultPre,
			...options?.components
		}
	};
	const children = /* @__PURE__ */ jsx(PropsContext, {
		value: codeblock,
		children: /* @__PURE__ */ jsx(Internal, {
			id,
			...useDeferredValue({
				code,
				options: shikiOptions
			})
		})
	});
	if (wrapInSuspense) return /* @__PURE__ */ jsx(Suspense, {
		fallback: /* @__PURE__ */ jsx(Placeholder, {
			code,
			components: shikiOptions.components
		}),
		children
	});
	return children;
}
function Placeholder({ code, components = {} }) {
	const { pre: Pre$1 = "pre", code: Code = "code" } = components;
	return /* @__PURE__ */ jsx(Pre$1, { children: /* @__PURE__ */ jsx(Code, { children: code.split("\n").map((line, i) => /* @__PURE__ */ jsx("span", {
		className: "line",
		children: line
	}, i)) }) });
}
function Internal({ id, code, options }) {
	return useShiki(code, options, [
		id,
		options.lang,
		code
	]);
}

//#endregion
export { DynamicCodeBlock };
//# sourceMappingURL=dynamic-codeblock.js.map