TSRX Enables JSX with Native JS Control Flow

The Breakthrough

TSRX compiles UI components written with normal JavaScript control flow—including if statements, for-of loops, switch statements, and try-catch blocks—directly into JSX for React, Solid, Vue, Preact, and Ripple, without requiring a return statement.

What Actually Worked

• Components declare component instead of function; JSX statements render linearly wherever placed, with bare return only for early exits.
• Conditional rendering uses standard if/else if/else or switch with JSX in blocks; compiler handles framework equivalents.
• Lists render via extended for-of loop that exposes index and key, supports continue to skip items; other loops unsupported.
• Error boundaries use try/catch; async adds pending block, compiled to lazy in React/Preact/Solid or Ripple equivalent.
• Hooks place after conditions/loops/returns; compiler hoists them to top for stable order.
• Lexical scoping per element/if/for/switch/try prevents variable conflicts.
• Scoped styles via <style> block attach unique hash to classes; style keyword passes hash to child components.
• Text requires double quotes or template literals; text keyword escapes HTML strings safely, html keyword renders them (Ripple fully, Vue subset).
• Lazy destructuring uses &props for per-access reactivity in Solid/Vue/Ripple.
• Prop shorthand omits value for same-name props, like {onchange}.

Context

JSX forces expression-based control flow, leading to nested ternaries for conditions, map for lists, strict hook ordering, and function wrappers for switches. TSRX extracts Ripple's syntax into a compiler (Vite plugin) for multiple frameworks, prioritizing linear readability and colocation of logic/UI/styles. It adds compiler magic like hook hoisting and scoping, which aids ergonomics but may complicate debugging.

The author demos features via code blocks, notes personal preference for React/JSX/Tailwind despite Claude generating TSRX code, and sees appeal for Ripple/Svelte users.

Notable Quotes

• "TSRX uses statementbased JSX so you don't need to return a component tree you just write your markup wherever you want it to render."
• "The compiler just quietly hoists every hook to the top of the generated function so React still sees them in a stable order but you get to write them where they actually belong."
• "Every nested element is creating its own scope so we're able to declare a const label in three different div blocks here and they don't collide."