# Reflection: JSX Template Ternary Nesting Syntax Error

> Date: 2026-06-05 | Severity: P0 | Recurrence: 1

## Context
Frontend Builder Agent (SF-03) — fallback page 模板中的三元表达式产生了语法错误。模板生成代码如 `{loading ? {<Spinner />} : {<div>No data</div>}}`。

## Root Cause
生成器模板中 JSX 三元表达式嵌套了多余的 `{}`。模板本身输出 `{` 字符，内嵌的 JSX 也带 `{` — 双层花括号导致 React 解析失败。

Incorrect output pattern: `{condition ? {<JSX />} : {<AnotherJSX />}}`
Correct: `{condition ? <JSX /> : <AnotherJSX />}` 或 `{condition ? (<JSX />) : null}`

## Fix
Fixed template to not wrap JSX branches in extra `{}`. The outer `{}` (JSX expression) already handles one level; inner JSX elements don't get re-wrapped.

## Pattern Class
**Template Code Generation Syntax** — 代码生成器的模板本身使用目标语言语法时，转义/嵌套层次需仔细处理。

## Future Trigger
- Any code generator that outputs JSX/TSX
- Any template-based code generation
- Any string-template code with nested braces/quotes

## Checklist
- [ ] 生成器模板验证：输出后立即 `tsc --noEmit` 检查语法
- [ ] JSX 三元表达式：禁止 `{cond ? {<X />} : {<Y />}}` 模式
- [ ] 模板中使用 `\`` 或字符串拼接替代包含反引号的模板字面量
- [ ] Benchmark smoke test 覆盖所有生成项目的 build

## Recurrence Count
1