TypeScript 与 Source Map

TSX 两阶段处理

1. 本插件使用 Oxc Parser 解析 TSX，并只转换 JSX 与 Vue 2 语法糖。
2. 类型标注保留在输出中。
3. 返回 moduleType: 'ts'。
4. Vite 8 内置 Oxc 继续清除类型和转换目标语法。

<script lang="tsx">
type DemoState = { count: number; message: string }

export default {
  name: 'OptionsRenderTsx',
  data(): DemoState {
    return { count: 1, message: 'TypeScript 类型会保留给 Vite Oxc 处理' }
  },
  render(this: any) {
    const doubled: number = this.count * 2
    return (
      <article class="demo-card">
        <span class="case-label">Options API / TSX</span>
        <h3>script lang="tsx"</h3>
        <p>{this.message}</p>
        <button class="button" onClick={() => { this.count += 1 }}>
          {this.count} × 2 = {doubled}
        </button>
      </article>
    )
  }
}
</script>

Source Map

开发模式和开启 build.sourcemap 时使用 MagicString 生成高精度 Source Map。因为只覆盖外层 JSX root，嵌套 JSX 的位置映射不会因重叠修改而损坏。