Bug Summary
extractHtmlFromRegistry in src/data/components.ts uses a single regex to extract the JSX return value from registry component source code:
const returnMatch = reactCode.match(/return\s*\(\s*([\s\S]*?)\s*\);/);
This regex has two failure modes that affect real-world registry components:
1. Wrong match on early return statements:
Any component that uses an early return (for example, a guard clause) before the main JSX return will match the first return (...) found in the source, capturing the wrong content:
const MyComponent = () => {
if (!data) return (<div>Loading...</div>); // ← regex matches this
return (
<div className="main-component">...</div> // ← this is never reached
);
};The lazy [\s\S]*? quantifier stops at the first );\n it encounters, which may be the early return rather than the main component JSX.
2. Nested parentheses break the match:
JSX components frequently contain nested function calls with parentheses (for example, Array.map(), Object.entries(), String.split(), ternary ? (a) : (b)). The regex stops at the first ); token it finds, truncating the returned JSX mid-expression:
return (
<div>
{items.map((item) => ( // ← the `);` here ends the match prematurely
<span>{item}</span>
))}
</div>
);Both failure modes silently produce malformed HTML strings. These are then rendered into the code display panels and used to generate HTML, Vue, and Angular template strings for all components in the registry.
Expected Behavior
The JSX extraction should use a parenthesis-counting approach (tracking depth) or an AST-based parser rather than a regex, so nested parentheses are handled correctly and only the final top-level return (...) statement is extracted.
Actual Behavior
The regex fails on any component with early returns or nested parentheses, producing truncated or incorrect HTML output in the code tab.
Affected File
src/data/components.ts, extractHtmlFromRegistry function.
@singhtrivendra I would like to work on this issue. Could you please assign/ it to me? Contributing under NSoC '26.
Bug Summary
extractHtmlFromRegistryinsrc/data/components.tsuses a single regex to extract the JSX return value from registry component source code:This regex has two failure modes that affect real-world registry components:
1. Wrong match on early return statements:
Any component that uses an early return (for example, a guard clause) before the main JSX return will match the first
return (...)found in the source, capturing the wrong content:The lazy
[\s\S]*?quantifier stops at the first);\nit encounters, which may be the early return rather than the main component JSX.2. Nested parentheses break the match:
JSX components frequently contain nested function calls with parentheses (for example,
Array.map(),Object.entries(),String.split(),ternary ? (a) : (b)). The regex stops at the first);token it finds, truncating the returned JSX mid-expression:Both failure modes silently produce malformed HTML strings. These are then rendered into the code display panels and used to generate HTML, Vue, and Angular template strings for all components in the registry.
Expected Behavior
The JSX extraction should use a parenthesis-counting approach (tracking depth) or an AST-based parser rather than a regex, so nested parentheses are handled correctly and only the final top-level
return (...)statement is extracted.Actual Behavior
The regex fails on any component with early returns or nested parentheses, producing truncated or incorrect HTML output in the code tab.
Affected File
src/data/components.ts,extractHtmlFromRegistryfunction.@singhtrivendra I would like to work on this issue. Could you please assign/ it to me? Contributing under NSoC '26.