JSX to React.createElement Compiler

JSX (JavaScript XML) is a syntax extension to JavaScript that allows you to write HTML-like code within your JavaScript files. React uses JSX to make UI development more intuitive. This challenge asks you to build a simplified compiler that transforms JSX expressions into equivalent React.createElement calls, a core component of React's rendering process. This is a fundamental concept in understanding how React works under the hood.

Problem Description

You are tasked with creating a TypeScript function jsxToReactCreateElement that takes a JSX expression (represented as a string) and converts it into a string containing the equivalent React.createElement calls. The compiler should handle basic JSX elements, attributes, and child elements.

What needs to be achieved:

The function should parse the JSX string and generate a corresponding string of React.createElement calls. The generated code should be valid JavaScript and functionally equivalent to the original JSX.

Key Requirements:

• Element Parsing: Identify and extract element names (tags).
• Attribute Parsing: Extract attributes from the opening tag. Attributes should be converted to key-value pairs within the React.createElement call.
• Child Element Parsing: Handle nested JSX elements and text nodes as children of the parent element.
• Text Node Handling: Treat text nodes (plain text between elements) as strings.
• Self-Closing Tags: Handle self-closing tags (e.g., <img src="url" />).

Expected Behavior:

The function should return a string containing the compiled React.createElement calls. The output should be a valid JavaScript expression that, when executed, would produce the same UI as the original JSX.

Edge Cases to Consider:

• Empty elements (e.g., <MyComponent />).
• Nested elements with multiple children.
• Attributes with special characters (e.g., quotes).
• Text nodes containing special characters.
• Invalid JSX syntax (the compiler doesn't need to validate the syntax, but should attempt to produce a reasonable output even with minor errors).

Examples

Example 1:

Input: "<div><span>Hello</span>World</div>"
Output: "React.createElement(\"div\", null, React.createElement(\"span\", null, \"Hello\"), \"World\")"
Explanation: The input JSX is a `div` containing a `span` with the text "Hello" and the text "World". The output is the equivalent `React.createElement` calls.

Example 2:

Input: "<img src=\"image.jpg\" alt=\"My Image\" />"
Output: "React.createElement(\"img\", {src: \"image.jpg\", alt: \"My Image\"}, null)"
Explanation: This is a self-closing `img` tag with `src` and `alt` attributes. The output reflects this structure.

Example 3:

Input: "<MyComponent name=\"John Doe\" age={30} />"
Output: "React.createElement(\"MyComponent\", {name: \"John Doe\", age: 30}, null)"
Explanation: This demonstrates handling attributes with string and numeric values.

Constraints

• Input String Length: The input JSX string will be no longer than 500 characters.
• Attribute Names: Attribute names will consist of alphanumeric characters and underscores.
• Attribute Values: Attribute values will be strings enclosed in double quotes. Numeric values are also allowed.
• Performance: The compiler should execute in a reasonable time (under 100ms for the given input length). Optimization is not the primary focus, but excessively slow code will be considered a failure.
• No External Libraries: You are not allowed to use any external libraries for parsing or string manipulation. Only built-in JavaScript/TypeScript features are permitted.

Notes

• This is a simplified JSX compiler. It does not need to handle all possible JSX features (e.g., conditional rendering, expressions within attributes, fragments).
• Focus on correctly translating the basic structure of JSX elements, attributes, and children into React.createElement calls.
• Consider using regular expressions or string manipulation techniques to parse the JSX string.
• The output string should be a valid JavaScript expression that can be evaluated.
• Error handling is not required; the function should attempt to produce a reasonable output even if the input is slightly malformed.
• Assume React and React.createElement are globally available.