jsx-utils

1/**
2 * Finds the closing bracket (>) of a JSX tag while properly handling:
3 * - String literals (both single and double quotes)
4 * - JSX expressions with braces {}
5 * - Parentheses in arrow functions and function calls
6 * - Arrow functions (=>)
7 *
8 * @param tagCode - The tag code starting from the opening <
9 * @returns The index of the closing bracket, or -1 if not found
10 */
11function findTagClosingBracket(tagCode: string): number {
12	let inString = false;
13	let stringChar: string | null = null;
14	let braceDepth = 0;
15	let parenDepth = 0;
16 
17	for (let i = 1; i < tagCode.length; i++) {
18		const char = tagCode[i];
19		const prevChar = tagCode[i - 1];
20 
21		if (inString && prevChar === "\\") {
22			continue;
23		}
24 
25		if (char === '"' || char === "'") {
26			if (!inString) {
27				inString = true;
28				stringChar = char;
29			} else if (char === stringChar && prevChar !== "\\") {
30				inString = false;
31				stringChar = null;
32			}
33			continue;
34		}
35 
36		if (!inString) {
37			if (char === "{") {
38				braceDepth++;
39			} else if (char === "}") {
40				braceDepth--;
41			} else if (char === "(") {
42				parenDepth++;
43			} else if (char === ")") {
44				parenDepth--;
45			} else if (char === ">" && braceDepth === 0 && parenDepth === 0) {
46				return i;
47			}
48		}
49	}
50 
51	return -1;
52}
53 
54/**
55 * Matches and extracts information about JSX tags in a string of code.
56 * Handles three tag formats:
57 * 1. Opening tags: <tag attr="value">
58 * 2. Self-closing tags: <tag />
59 * 3. Closing tags: </tag>
60 *
61 * @param code - The string containing JSX code to analyze
62 * @returns Object containing tag details or null if no match is found
63 * @example
64 * matchJsxTag('<div className="container">');
65 * // Returns:
66 * // {
67 * //   tag: '<div className="container">',
68 * //   tagName: 'div',
69 * //   type: 'opening',
70 * //   attributes: 'className="container"',
71 * //   startIndex: 0,
72 * //   endIndex: 27
73 * // }
74 */
75export function matchJsxTag(code: string) {
76	if (code.trim() === "") {
77		return null;
78	}
79 
80	const tagStartMatch = code.match(/<\/?([a-zA-Z][a-zA-Z0-9]*)/);
81	if (!tagStartMatch || typeof tagStartMatch.index === "undefined") {
82		return null;
83	}
84 
85	const tagName = tagStartMatch[1];
86	const isClosingTag = tagStartMatch[0].startsWith("</");
87	const startIndex = tagStartMatch.index;
88 
89	if (isClosingTag) {
90		const closingBracketIndex = code.indexOf(">", startIndex);
91		if (closingBracketIndex === -1) {
92			return null;
93		}
94 
95		return {
96			tag: code.slice(startIndex, closingBracketIndex + 1),
97			tagName,
98			type: "closing",
99			attributes: "",
100// … truncated