Description:
Implement the core JSX runtime functions that will be used by the esbuild JSX transformation. This includes createElement function and Fragment component that will serve as the foundation of our DSL compiler.
Tasks:
Tasks:
- Create jsx-runtime.ts file that exports
createElement and Fragment
- Implement
createElement function that constructs AST nodes from JSX
- Implement
Fragment component for fragment syntax support
- Create type definitions for AST nodes, generators and type guards
- Unit tests
Technical Details:
/**
* Create a JSX element (replaces React.createElement)
* @param type - Element type (function, string, or special symbol)
* @param props - Element properties
* @param children - Child elements
* @returns JSX element object
*/
export function createElement(type: any, props: any, ...children: any[]): JSXElement {
// Process children to flatten arrays and filter nulls
const processedChildren = children.length > 0
? children.flat().filter(child => child != null)
: [];
const combinedProps = props ? { ...props } : {};
if (processedChildren.length > 0) {
combinedProps.children = processedChildren.length === 1
? processedChildren[0]
: processedChildren;
}
return {
type,
props: combinedProps,
$$typeof: Symbol.for('jsx.element')
};
}
export function Fragment(props: FragmentProps) {
return props.children;
}
Description:
Implement the core JSX runtime functions that will be used by the esbuild JSX transformation. This includes createElement function and Fragment component that will serve as the foundation of our DSL compiler.
Tasks:
Tasks:
createElementandFragmentcreateElementfunction that constructs AST nodes from JSXFragmentcomponent for fragment syntax supportTechnical Details: