JSX Compiler for React

This challenge involves building a simplified compiler that transforms JSX syntax into standard JavaScript calls compatible with React. Understanding this process is crucial for comprehending how React renders UIs and for potentially building custom component libraries or development tools.

Problem Description

Your task is to implement a TypeScript function that takes a JSX string as input and outputs the equivalent JavaScript code that React would understand. This compiler should handle basic JSX elements (like div, span), attribute assignments, and nested elements.

Key Requirements:

1. Element Transformation: Convert JSX opening and closing tags into React.createElement() calls.
2. Attribute Handling: Translate JSX attributes (e.g., className="my-class", id="unique") into the props object argument of React.createElement().
3. Children Handling: Recursively handle nested JSX elements and string literals as children within the React.createElement() call.
4. Root Element: Assume all input JSX represents a single root element.

Expected Behavior:

The compiler should parse the JSX string and output a string representing JavaScript code.

For example, the JSX <div className="container">Hello</div> should be compiled to React.createElement("div", { className: "container" }, "Hello").

Edge Cases to Consider:

• Empty JSX elements (e.g., <div />).
• JSX with no attributes.
• JSX with only text content.
• Nested JSX structures.
• String literals as children.
• Special attributes like key or ref (though for this simplified challenge, we can treat them as regular props).

Examples

Example 1:

Input: <div>Hello World</div>

Output: React.createElement("div", null, "Hello World")

Explanation: The div element has no attributes, so the second argument to React.createElement is null. The text "Hello World" is passed as the third argument (children).

Example 2:

Input: <button className="btn" onClick={handleClick}>Click Me</button>

Output: React.createElement("button", { className: "btn", onClick: handleClick }, "Click Me")

Explanation: The button element has className and onClick attributes, which are translated into the props object. handleClick is treated as a variable reference.

Example 3:

Input: <div className="parent"><span id="child">Nested</span></div>

Output: React.createElement("div", { className: "parent" }, React.createElement("span", { id: "child" }, "Nested"))

Explanation: This demonstrates nested elements. The outer div's children argument contains the React.createElement call for the inner span.

Constraints

• The input JSX string will be syntactically valid for this simplified compiler.
• The compiler only needs to handle standard HTML-like elements (lowercase names) and their common attributes. Component names (PascalCase) are out of scope for this challenge.
• Attribute values will be either strings enclosed in double quotes or JavaScript variable/function names.
• The output JavaScript should be a single string representing the compiled code.
• No external libraries for parsing should be used; implement the parsing logic yourself.

Notes

• This is a simplified compiler. Real-world JSX compilers (like Babel) handle many more features, including component syntax, fragments, dynamic attributes, and more complex error handling.
• Think about how you would parse the string to identify elements, attributes, and children. Regular expressions might be a starting point, but a more robust parsing approach might be necessary for nested structures.
• The output should be valid JavaScript that, when executed in a React environment, would create the corresponding React elements.
• Consider how to handle the recursive nature of nested JSX.