JSX Transformer
@dathra/transformeris a custom JSX/TSX compiler that transforms JSX into
efficient DOM or SSR render calls. It usesoxc-parserfor parsing,zimmerframefor AST walking, and esrapfor code generation.
Transformer APIs are for build-tool integrations and Dathra contributors. For exact signatures, see theTransformer API Reference.
Usage
ts
import { transform } from "@dathra/transformer";
const result = transform({
code: "const el = <div>Hello</div>;",
mode: "csr",
});Hello
;",
mode: "csr",
});Modes
- CSR mode— Generates client-side rendering code using the DOM runtime
- SSR mode— Generates server-side rendering code that produces HTML strings with hydration markers
Features
- JSX element and component transformation
- Static tree optimization — hoists static trees to module scope
- Runtime import injection
- Collision-safe variable renaming
- Client directive (
client:*) normalization - Branching flattening for conditional rendering
- Helper inlining for frequently used patterns
Architecture
The compiler pipeline:
- Parse— oxc-parser produces an AST
- Transform— Walk the AST and replace JSX with runtime calls
- Generate— esrap produces the final code string
- Inject— Add runtime import statements