Skip to content

JSX/TSX plugin on the TypeScript target #30

@danfma

Description

@danfma

Priority: Future

Background: A long-running idea — let users write React / Solid / Vue components in C# and have them transpiled to `.tsx` / `.jsx` that ships through the framework's own compiler (SWC, Babel, Vite). This avoids building a framework-specific target for each JSX flavour; instead, the TypeScript target grows a plugin hook that knows how to emit JSX element syntax, and the framework's toolchain handles the rest.

Goal

Extend the TypeScript target with a JSX/TSX plugin path:

  • A `[JsxComponent]` attribute marks a C# class or static method as a component
  • A new `JsxComponentTransformer` handler lowers the component body into JSX AST nodes
  • New `Tsx*` AST node kinds (`TsxElement`, `TsxAttribute`, `TsxFragment`) — parallel to the existing TS AST but with the JSX extension
  • The Printer emits `.tsx` files instead of `.ts` when any component is present in a file
  • Downstream: Vite / SWC / Babel + the framework's JSX plugin (Solid, React) picks it up and compiles it into framework-specific output

Scope

  • `[JsxComponent]` attribute definition
  • `JsxComponentTransformer` handler
  • `TsxElement`, `TsxAttribute`, `TsxFragment`, `TsxSpreadAttribute` AST nodes
  • Printer extensions for `.tsx` output
  • Mapping C# method-body constructs to JSX (conditionals → ternaries, loops → `.map`, string interpolation → JSX text)
  • One sample per framework (React, Solid) to validate the flow
  • Framework-agnostic by design — the plugin emits generic JSX, the framework's own compiler is responsible for `createElement` / `h()` / `jsx()` lowering

Notes

The win is that Metano stays framework-agnostic: the TypeScript target emits JSX, and the consumer picks which framework to use via their Vite / SWC / Babel config. No need for per-framework Metano targets.

Part of #14.

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