Jsx Preview

1import * as React from "react"
2import JsxParser from "react-jsx-parser"
3import type { TProps as JsxParserProps } from "react-jsx-parser"
4 
5function matchJsxTag(code: string) {
6  if (code.trim() === "") {
7    return null
8  }
9 
10  const tagRegex = /<\/?([a-zA-Z][a-zA-Z0-9]*)\s*([^>]*?)(\/)?>/
11  const match = code.match(tagRegex)
12 
13  if (!match || typeof match.index === "undefined") {
14    return null
15  }
16 
17  const [fullMatch, tagName, attributes, selfClosing] = match
18 
19  const type = selfClosing
20    ? "self-closing"
21    : fullMatch.startsWith("</")
22      ? "closing"
23      : "opening"
24 
25  return {
26    tag: fullMatch,
27    tagName,
28    type,
29    attributes: attributes.trim(),
30    startIndex: match.index,
31    endIndex: match.index + fullMatch.length,
32  }
33}
34 
35function completeJsxTag(code: string) {
36  const stack: string[] = []
37  let result = ""
38  let currentPosition = 0
39 
40  while (currentPosition < code.length) {
41    const match = matchJsxTag(code.slice(currentPosition))
42    if (!match) break
43    const { tagName, type, endIndex } = match
44 
45    if (type === "opening") {
46      stack.push(tagName)
47    } else if (type === "closing") {
48      stack.pop()
49    }
50 
51    result += code.slice(currentPosition, currentPosition + endIndex)
52    currentPosition += endIndex
53  }
54 
55  return (
56    result +
57    stack
58      .reverse()
59      .map((tag) => `</${tag}>`)
60      .join("")
61  )
62}
63 
64export type JSXPreviewProps = {
65  jsx: string
66  isStreaming?: boolean
67} & JsxParserProps
68 
69function JSXPreview({ jsx, isStreaming = false, ...props }: JSXPreviewProps) {
70  const processedJsx = React.useMemo(
71    () => (isStreaming ? completeJsxTag(jsx) : jsx),
72    [jsx, isStreaming]
73  )
74 
75  // Cast JsxParser to any to work around the type incompatibility
76  const Parser = JsxParser as unknown as React.ComponentType<JsxParserProps>
77 
78  return <Parser jsx={processedJsx} {...props} />
79}
80 
81export { JSXPreview }