React JSX to Svelte AST Conversion Overview

Background: Svelte is a UI framework similar to React and Vue that uses compile‑time transformation, offering smaller bundle size and simpler reactivity, but lacks the runtime flexibility of React.

Main idea: To replace the rendering engine without affecting the DSL, the conversion works at the AST level, transforming React AST to Svelte AST while stripping framework‑specific features (hooks, function JSX) and keeping only plain JSX, JS, and CSS.

JSX conversion: JSX is split into four parts – element节点 , attribute属性 , mustache模板系统 , and 函数JSX . Element and attribute mapping is straightforward. The mustache system handles variable output, logical &&, ternary, and function calls; cases 2 and 3 are mapped to Svelte’s {#if …} syntax. Function JSX is broken into 上下文 , 逻辑控制 , and JSX .

Logic control: Typical control structures (if‑else, switch, loops, ternary, &&) are translated to Svelte’s compiled HTML control syntax, e.g., {#if condition}…{/if}.

Hook system: React hooks are largely unnecessary in Svelte because the compiler injects state handling. The conversion adopts “svelte‑hooks”, a compatibility layer that mirrors React hook APIs.

ECMA‑AST differences: Babel’s parser provides an ESTree‑based AST with additional node types useful for inference. The tool uses this richer AST and normalizes differences after conversion.

CSS conversion: Both frameworks use standard CSS; Svelte’s CSS is a superset with compile‑time capabilities. Minor adjustments are made to align component class selectors.

Result: The transformed UI‑only business code compiles to a larger bundle than the original due to AST expansion, but the approach leaves room for further optimization, especially in component‑level on‑demand packaging.

Future work: Improve 100 % static compilation of JSX, reduce bundle size for complex pages, and extend performance measurements.