Skip to content

Implement core JSX runtime for dsl-lite #198

@rafbcampos

Description

@rafbcampos

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;
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions