JSX Renderer

1import { cva } from "class-variance-authority";
2import type { ComponentProps } from "react";
3import * as React from "react";
4import { ErrorBoundary } from "react-error-boundary";
5import JsxParser from "react-jsx-parser";
6import { cn } from "@/lib/utils";
7import { completeJsxTag } from "@/registry/lib/jsx-utils";
8 
9const jsxRendererVariants = cva("", {
10	variants: {
11		state: {
12			disabled: "opacity-50 cursor-not-allowed pointer-events-none",
13			"read-only": "pointer-events-none",
14			streaming:
15				"opacity-65 cursor-not-allowed pointer-events-none animate-pulse",
16			interactive: "",
17			error: "border-2 border-destructive",
18		},
19	},
20	defaultVariants: {
21		state: "interactive",
22	},
23});
24 
25type JsxRendererProps = ComponentProps<typeof JsxParser> & {
26	fixIncompleteJsx?: boolean;
27	jsx: string;
28	state?: "disabled" | "read-only" | "interactive" | "streaming" | "error";
29	fallback?: React.ComponentType;
30	onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
31};
32 
33function JsxRendererInner({
34	className,
35	jsx,
36	fixIncompleteJsx = true,
37	state,
38	...props
39}: Omit<JsxRendererProps, "fallback" | "onError">) {
40	const processedJsx = React.useMemo(() => {
41		return fixIncompleteJsx ? completeJsxTag(jsx) : jsx;
42	}, [jsx, fixIncompleteJsx]);
43 
44	return (
45		<JsxParser
46			className={cn(jsxRendererVariants({ state }), className)}
47			jsx={processedJsx}
48			{...props}
49		/>
50	);
51}
52 
53export function ErrorFallback() {
54	return (
55		<div className="flex items-center justify-center h-32 bg-destructive/10 border border-destructive/20 rounded-md text-destructive text-sm font-medium">
56			Error rendering
57		</div>
58	);
59}
60 
61interface JsxRendererErrorBoundaryProps {
62	children: React.ReactNode;
63	fallback?: React.ComponentType;
64	onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
65}
66 
67function JsxRendererErrorBoundary({
68	children,
69	fallback = ErrorFallback,
70	onError,
71}: JsxRendererErrorBoundaryProps) {
72	const Fallback = fallback;
73	return (
74		<ErrorBoundary fallback={<Fallback />} onError={onError}>
75			{children}
76		</ErrorBoundary>
77	);
78}
79 
80export const JsxRenderer = React.memo(function JsxRenderer(
81	props: JsxRendererProps,
82) {
83	const { fallback, onError, ...innerProps } = props;
84	return (
85		<JsxRendererErrorBoundary fallback={fallback} onError={onError}>
86			<JsxRendererInner {...innerProps} />
87		</JsxRendererErrorBoundary>
88	);
89});