@vobs/compiler 1.0.0 → 1.2.0

package/src/compile.ts

@@ -10,16 +10,36 @@ import type {
   VobsCompiler
 } from './plugin'
 
-let generatedId = 0
-let currentFilename = 'component.tsx'
-let currentSourceFile: ts.SourceFile | null = null
-let statementSources = new WeakMap<ts.Statement, SourcePosition>()
-/** 源文件中已声明的绑定名（含嵌套作用域）：注入运行时 import 与生成临时变量时避开命名冲突。 */
-let takenNames = new Set<string>()
-/** 运行时 helper 的规范名 → 产物中的引用名（无冲突时与规范名相同）。 */
-let helperAliases = new Map<string, string>()
-/** 编译器自身产出的诊断（如不支持的 JSX 形态），与 TypeScript 解析诊断合并返回。 */
-let compileDiagnostics: CompilerDiagnostic[] = []
+/**
+ * 单次编译的全部可变状态。
+ *
+ * 此前这些字段是模块级变量，编译器因此不可重入：嵌套调用 compile()
+ * （如插件内部再次编译片段）会互相污染状态。现在每次 compile 调用
+ * 创建独立的 CompileState 并显式穿参，编译器对并发与嵌套完全安全。
+ */
+interface CompileState {
+  /** 临时标识符计数器（_el0、_el1…）。 */
+  generatedId: number
+  filename: string
+  /** 最初解析出的源文件。插件 program 变换后的树节点无法回溯原始位置时，用它兜底取行列。 */
+  sourceFile: ts.SourceFile
+  /** 生成语句 → 原始源码位置，用于 source map 生成。 */
+  statementSources: WeakMap<ts.Statement, SourcePosition>
+  /** 源文件中已声明的绑定名（含嵌套作用域）：注入运行时 import 与生成临时变量时避开命名冲突。 */
+  takenNames: Set<string>
+  /** 运行时 helper 的规范名 → 产物中的引用名（无冲突时与规范名相同）。 */
+  helperAliases: Map<string, string>
+  /** 静态模板声明：HTML → 模块级模板变量，按内容去重，输出在 import 之后。 */
+  templates: Map<string, ts.Identifier>
+  /** 是否为组件调用生成源码位置（生产构建传 false 剔除，减小产物体积）。 */
+  sourceLocation: boolean
+  /** 从 @vobs/reactivity / @vobs/vobs 导入的 `state` 别名（含 as 别名），用于 debugName 自动推断。 */
+  stateAliases: ReadonlySet<string>
+  /** 非 import 的本地声明绑定名：`state` 被本地声明遮蔽时禁用 debugName 推断。 */
+  localBindings: ReadonlySet<string>
+  /** 编译器自身产出的诊断（如不支持的 JSX 形态），与 TypeScript 解析诊断合并返回。 */
+  diagnostics: CompilerDiagnostic[]
+}
 
 interface SourcePosition {
   readonly line: number
@@ -62,10 +82,7 @@ export function compile(code: string, options: CompileOptions = {}): string {
 }
 
 export function compileWithSourceMap(code: string, options: CompileOptions = {}): CompileResult {
-  generatedId = 0
   const filename = options.filename ?? 'component.tsx'
-  currentFilename = filename
-  statementSources = new WeakMap()
   let sourceFile = ts.createSourceFile(
     filename,
     code,
@@ -73,10 +90,19 @@ export function compileWithSourceMap(code: string, options: CompileOptions = {})
     true,
     ts.ScriptKind.TSX
   )
-  currentSourceFile = sourceFile
-  takenNames = collectDeclaredNames(sourceFile)
-  helperAliases = new Map()
-  compileDiagnostics = []
+  const state: CompileState = {
+    generatedId: 0,
+    filename,
+    sourceFile,
+    statementSources: new WeakMap(),
+    takenNames: collectDeclaredNames(sourceFile),
+    helperAliases: new Map(),
+    templates: new Map(),
+    sourceLocation: options.sourceLocation ?? true,
+    stateAliases: collectStateAliases(sourceFile),
+    localBindings: collectLocallyDeclaredNames(sourceFile),
+    diagnostics: []
+  }
   const cleanFilename = filename.split(/[?#]/u, 1)[0] || filename
   const diagnostics = ts.transpileModule(code, {
     // Vite appends query strings (for example `?direct`) to module IDs;
@@ -92,9 +118,9 @@ export function compileWithSourceMap(code: string, options: CompileOptions = {})
     filename,
     factory: ts.factory,
     addRuntimeImport(name: string): void {
-      resolveHelperName(name)
+      resolveHelperName(state, name)
     },
-    helperRef
+    helperRef: (name: string) => helperRef(state, name)
   }
 
   for (const plugin of plugins) plugin.analyze?.(sourceFile, context)
@@ -104,15 +130,22 @@ export function compileWithSourceMap(code: string, options: CompileOptions = {})
   for (const plugin of plugins) sourceFile = transformPluginNodes(sourceFile, plugin, context)
 
   const statements = sourceFile.statements.map(statement =>
-    ts.isImportDeclaration(statement) ? rebuildImport(statement) : transformStatement(statement)
+    ts.isImportDeclaration(statement) ? rebuildImport(state, statement) : transformStatement(state, statement)
   )
-  const resultFile = ts.factory.updateSourceFile(sourceFile, [...createRuntimeImports(), ...statements])
+  // 模板声明必须先于 runtime import 生成：声明里的 createTemplate 依赖
+  // helperRef 注册别名，import 需要在别名全部就绪后再构建。
+  const templateDeclarations = createTemplateDeclarations(state)
+  const resultFile = ts.factory.updateSourceFile(sourceFile, [
+    ...createRuntimeImports(state),
+    ...templateDeclarations,
+    ...statements
+  ])
 
   const generated = ts.createPrinter().printFile(resultFile)
   return {
     code: generated,
-    map: buildSourceMap(filename, code, generated, resultFile),
-    diagnostics: [...diagnostics, ...compileDiagnostics]
+    map: buildSourceMap(state, filename, code, generated, resultFile),
+    diagnostics: [...diagnostics, ...state.diagnostics]
   }
 }
 
@@ -153,17 +186,17 @@ function buildCodeFrame(
  * 不支持的 JSX 标签形态（成员表达式 `<Foo.Bar>`、命名空间 `<svg:rect>` 等）。
  * 诊断以 error 级返回，compile() 与 Vite 插件会直接失败，不再静默产出无效 DOM 标签。
  */
-function reportUnsupportedTag(tagName: ts.JsxTagNameExpression): void {
-  const sourceFile = tagName.getSourceFile() ?? currentSourceFile
+function reportUnsupportedTag(state: CompileState, tagName: ts.JsxTagNameExpression): void {
+  const sourceFile = tagName.getSourceFile() ?? state.sourceFile
   if (!sourceFile) return
   const label = tagName.getText()
   const kindNote = tagName.kind === ts.SyntaxKind.JsxNamespacedName ? '（JSX 命名空间标签）' : ''
   const { line, column, codeFrame } = buildCodeFrame(sourceFile, tagName.getStart(sourceFile), tagName.getWidth(sourceFile))
-  compileDiagnostics.push({
+  state.diagnostics.push({
     code: 'VOBS_C101',
     severity: 'error',
     message: `不支持的 JSX 标签形态：<${label}>${kindNote}。组件必须是大写开头的标识符，DOM 元素必须是小写标签名。`,
-    location: { file: currentFilename, line, column },
+    location: { file: state.filename, line, column },
     codeFrame,
     fix: `把 <${label}> 改为 <Component /> 形式的组件或小写 DOM 标签；Fragment 请使用 <Fragment> 或 <>...</>。`
   })
@@ -183,6 +216,7 @@ interface MappingSegment {
  * statement it was produced from.
  */
 function buildSourceMap(
+  state: CompileState,
   filename: string,
   source: string,
   generated: string,
@@ -190,7 +224,7 @@ function buildSourceMap(
 ): import('./plugin').VobsSourceMap {
   const reparsed = ts.createSourceFile(filename, generated, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX)
   const segments: MappingSegment[] = []
-  walkPairedTrees(resultFile, reparsed, reparsed, segments)
+  walkPairedTrees(state, resultFile, reparsed, reparsed, segments)
   segments.sort((a, b) => a.genLine - b.genLine || a.genCol - b.genCol)
   return {
     version: 3,
@@ -215,6 +249,7 @@ function statementLists(node: ts.Node): readonly ts.Statement[] | null {
  * any divergence (length mismatch) simply abandons that subtree.
  */
 function walkPairedTrees(
+  state: CompileState,
   original: ts.Node,
   generated: ts.Node,
   reparsed: ts.SourceFile,
@@ -227,8 +262,8 @@ function walkPairedTrees(
     for (let index = 0; index < originalStatements.length; index++) {
       const originalStatement = originalStatements[index]
       const generatedStatement = generatedStatements[index]
-      recordSegment(originalStatement, generatedStatement, reparsed, segments)
-      walkPairedTrees(originalStatement, generatedStatement, reparsed, segments)
+      recordSegment(state, originalStatement, generatedStatement, reparsed, segments)
+      walkPairedTrees(state, originalStatement, generatedStatement, reparsed, segments)
     }
     return
   }
@@ -239,17 +274,18 @@ function walkPairedTrees(
   ts.forEachChild(generated, node => { generatedChildren.push(node) })
   if (originalChildren.length !== generatedChildren.length) return
   for (let index = 0; index < originalChildren.length; index++) {
-    walkPairedTrees(originalChildren[index], generatedChildren[index], reparsed, segments)
+    walkPairedTrees(state, originalChildren[index], generatedChildren[index], reparsed, segments)
   }
 }
 
 function recordSegment(
+  state: CompileState,
   originalStatement: ts.Statement,
   generatedStatement: ts.Statement,
   reparsed: ts.SourceFile,
   segments: MappingSegment[]
 ): void {
-  const source = statementSources.get(originalStatement) ?? positionOfOriginalStatement(originalStatement)
+  const source = state.statementSources.get(originalStatement) ?? positionOfOriginalStatement(state, originalStatement)
   if (!source) return
   const position = reparsed.getLineAndCharacterOfPosition(generatedStatement.getStart(reparsed))
   segments.push({
@@ -260,10 +296,10 @@ function recordSegment(
   })
 }
 
-function positionOfOriginalStatement(statement: ts.Statement): SourcePosition | null {
-  if (statement.pos < 0 || !currentSourceFile) return null
-  const { line, character } = currentSourceFile.getLineAndCharacterOfPosition(
-    statement.getStart(currentSourceFile)
+function positionOfOriginalStatement(state: CompileState, statement: ts.Statement): SourcePosition | null {
+  if (statement.pos < 0 || !state.sourceFile) return null
+  const { line, character } = state.sourceFile.getLineAndCharacterOfPosition(
+    statement.getStart(state.sourceFile)
   )
   return { line, column: character }
 }
@@ -357,6 +393,36 @@ function collectDeclaredNames(sourceFile: ts.SourceFile): Set<string> {
   return names
 }
 
+/** 收集从 @vobs/reactivity / @vobs/vobs 导入的 `state` 绑定名（含 `as` 别名）。 */
+function collectStateAliases(sourceFile: ts.SourceFile): Set<string> {
+  const aliases = new Set<string>()
+  for (const statement of sourceFile.statements) {
+    if (!ts.isImportDeclaration(statement) || !ts.isStringLiteral(statement.moduleSpecifier)) continue
+    const module = statement.moduleSpecifier.text
+    if (module !== '@vobs/reactivity' && module !== '@vobs/vobs') continue
+    const clause = statement.importClause
+    if (!clause?.namedBindings || !ts.isNamedImports(clause.namedBindings)) continue
+    for (const element of clause.namedBindings.elements) {
+      if (element.propertyName ? element.propertyName.text === 'state' : element.name.text === 'state') {
+        aliases.add(element.name.text)
+      }
+    }
+  }
+  return aliases
+}
+
+/** 与 collectDeclaredNames 相同，但跳过 import 声明：用于判断 helper 名是否被本地声明遮蔽。 */
+function collectLocallyDeclaredNames(sourceFile: ts.SourceFile): Set<string> {
+  const names = new Set<string>()
+  const visit = (node: ts.Node): void => {
+    if (ts.isImportDeclaration(node)) return
+    if (ts.isIdentifier(node) && isBindingName(node)) names.add(node.text)
+    ts.forEachChild(node, visit)
+  }
+  visit(sourceFile)
+  return names
+}
+
 /** 标识符是否为某个声明的绑定名（import、变量、函数、参数、类成员等）。 */
 function isBindingName(node: ts.Identifier): boolean {
   const parent = node.parent
@@ -373,27 +439,27 @@ function isBindingName(node: ts.Identifier): boolean {
  * the source never binds it; otherwise a collision-free alias is allocated and
  * the injected import uses the same alias (`import { createElement as _vobs_createElement }`).
  */
-function resolveHelperName(name: string): string {
-  const existing = helperAliases.get(name)
+function resolveHelperName(state: CompileState, name: string): string {
+  const existing = state.helperAliases.get(name)
   if (existing) return existing
   let alias = name
-  if (takenNames.has(alias)) {
+  if (state.takenNames.has(alias)) {
     alias = `_vobs_${name}`
     let suffix = 1
-    while (takenNames.has(alias)) alias = `_vobs_${name}_${suffix++}`
+    while (state.takenNames.has(alias)) alias = `_vobs_${name}_${suffix++}`
   }
-  helperAliases.set(name, alias)
+  state.helperAliases.set(name, alias)
   return alias
 }
 
 /** Create a reference to a runtime helper in generated code, matching the injected import. */
-function helperRef(name: string): ts.Identifier {
-  return ts.factory.createIdentifier(resolveHelperName(name))
+function helperRef(state: CompileState, name: string): ts.Identifier {
+  return ts.factory.createIdentifier(resolveHelperName(state, name))
 }
 
-function createRuntimeImports(): ts.ImportDeclaration[] {
+function createRuntimeImports(state: CompileState): ts.ImportDeclaration[] {
   const modules = new Map<string, ts.ImportSpecifier[]>()
-  for (const [name, alias] of helperAliases) {
+  for (const [name, alias] of state.helperAliases) {
     const module = name === 'insertResourceBoundary' ? '@vobs/resource' : '@vobs/vobs'
     const imported = modules.get(module) ?? []
     imported.push(ts.factory.createImportSpecifier(
@@ -414,9 +480,9 @@ function createRuntimeImports(): ts.ImportDeclaration[] {
   ))
 }
 
-function rebuildImport(node: ts.ImportDeclaration): ts.ImportDeclaration {
+function rebuildImport(state: CompileState, node: ts.ImportDeclaration): ts.ImportDeclaration {
   if (!ts.isStringLiteral(node.moduleSpecifier)) return node
-  return tagStatement(ts.factory.createImportDeclaration(
+  return tagStatement(state, ts.factory.createImportDeclaration(
     node.modifiers,
     node.importClause,
     ts.factory.createStringLiteral(node.moduleSpecifier.text),
@@ -424,9 +490,9 @@ function rebuildImport(node: ts.ImportDeclaration): ts.ImportDeclaration {
   ), node)
 }
 
-function transformStatement(node: ts.Statement): ts.Statement {
+function transformStatement(state: CompileState, node: ts.Statement): ts.Statement {
   if (ts.isFunctionDeclaration(node) && node.body) {
-    return tagStatement(ts.factory.updateFunctionDeclaration(
+    return tagStatement(state, ts.factory.updateFunctionDeclaration(
       node,
       node.modifiers,
       node.asteriskToken,
@@ -434,48 +500,84 @@ function transformStatement(node: ts.Statement): ts.Statement {
       node.typeParameters,
       node.parameters,
       node.type,
-      transformBlock(node.body)
+      transformBlock(state, node.body)
     ), node)
   }
 
-  if (ts.isVariableStatement(node)) return transformVariableStatement(node)
+  if (ts.isVariableStatement(node)) return transformVariableStatement(state, node)
   if (ts.isExportAssignment(node) && containsJsx(node.expression)) {
-    return tagStatement(ts.factory.updateExportAssignment(node, node.modifiers, transformEmbeddedExpression(node.expression)), node)
+    return tagStatement(state, ts.factory.updateExportAssignment(node, node.modifiers, transformEmbeddedExpression(state, node.expression)), node)
   }
   if (ts.isExpressionStatement(node) && containsJsx(node.expression)) {
-    return tagStatement(ts.factory.updateExpressionStatement(node, transformEmbeddedExpression(node.expression)), node)
+    return tagStatement(state, ts.factory.updateExpressionStatement(node, transformEmbeddedExpression(state, node.expression)), node)
   }
   if (ts.isReturnStatement(node) && node.expression && containsJsx(node.expression)) {
-    return tagStatement(ts.factory.updateReturnStatement(node, transformEmbeddedExpression(node.expression)), node)
+    return tagStatement(state, ts.factory.updateReturnStatement(node, transformEmbeddedExpression(state, node.expression)), node)
   }
   return node
 }
 
-function transformVariableStatement(node: ts.VariableStatement): ts.VariableStatement {
+function transformVariableStatement(state: CompileState, node: ts.VariableStatement): ts.VariableStatement {
+  let changed = false
   const declarations = node.declarationList.declarations.map(declaration => {
     const initializer = declaration.initializer
-    if (!initializer || !containsJsx(initializer)) return declaration
+    if (!initializer) return declaration
+
+    let nextInitializer = inferStateDebugName(state, declaration, initializer) ?? initializer
+    if (containsJsx(nextInitializer)) {
+      nextInitializer = transformEmbeddedExpression(state, nextInitializer)
+    }
+    if (nextInitializer === initializer) return declaration
 
+    changed = true
     return ts.factory.updateVariableDeclaration(
       declaration,
       declaration.name,
       declaration.exclamationToken,
       declaration.type,
-      transformEmbeddedExpression(initializer)
+      nextInitializer
     )
   })
 
-  if (declarations.every((declaration, index) => declaration === node.declarationList.declarations[index])) {
-    return node
-  }
+  if (!changed) return node
 
-  return tagStatement(ts.factory.updateVariableStatement(
+  return tagStatement(state, ts.factory.updateVariableStatement(
     node,
     node.modifiers,
     ts.factory.updateVariableDeclarationList(node.declarationList, declarations)
   ), node)
 }
 
+/**
+ * `const name = state(initial)` 在未显式传入 debugName 时从变量名推断：
+ * `const username = state('')` → `state('', 'username')`，使 DevTools 信号名称与源码命名一致。
+ * 仅当 `state` 确认来自 @vobs/reactivity / @vobs/vobs、未被本地声明遮蔽、
+ * 且调用只带一个参数时启用；其余形态保持原样。
+ */
+function inferStateDebugName(
+  state: CompileState,
+  declaration: ts.VariableDeclaration,
+  initializer: ts.Expression
+): ts.Expression | undefined {
+  if (state.stateAliases.size === 0) return undefined
+  if (!ts.isIdentifier(declaration.name)) return undefined
+
+  let call = initializer
+  while (ts.isParenthesizedExpression(call) || ts.isAsExpression(call) || ts.isTypeAssertionExpression(call) || ts.isSatisfiesExpression(call)) {
+    call = call.expression
+  }
+  if (!ts.isCallExpression(call)) return undefined
+  const callee = call.expression
+  if (!ts.isIdentifier(callee) || !state.stateAliases.has(callee.text)) return undefined
+  if (state.localBindings.has(callee.text)) return undefined
+  if (call.arguments.length !== 1) return undefined
+
+  return ts.factory.createCallExpression(callee, call.typeArguments, [
+    ...call.arguments,
+    ts.factory.createStringLiteral(declaration.name.text)
+  ])
+}
+
 function containsJsx(expression: ts.Expression): boolean {
   let found = false
   const visit = (node: ts.Node): void => {
@@ -489,14 +591,14 @@ function containsJsx(expression: ts.Expression): boolean {
   return found
 }
 
-function transformBlock(block: ts.Block): ts.Block {
+function transformBlock(state: CompileState, block: ts.Block): ts.Block {
   const statements = block.statements.map(statement => {
-    if (!ts.isReturnStatement(statement) || !statement.expression) return transformStatement(statement)
+    if (!ts.isReturnStatement(statement) || !statement.expression) return transformStatement(state, statement)
     const expression = ts.isParenthesizedExpression(statement.expression)
       ? statement.expression.expression
       : statement.expression
     return isJsxExpression(expression)
-      ? tagStatement(ts.factory.updateReturnStatement(statement, transformJsxExpression(expression)), statement)
+      ? tagStatement(state, ts.factory.updateReturnStatement(statement, transformJsxExpression(state, expression)), statement)
       : statement
   })
   return ts.factory.updateBlock(block, statements)
@@ -506,61 +608,71 @@ function isJsxExpression(node: ts.Expression): node is ts.JsxElement | ts.JsxSel
   return ts.isJsxElement(node) || ts.isJsxSelfClosingElement(node) || ts.isJsxFragment(node)
 }
 
-function transformJsxExpression(node: ts.JsxElement | ts.JsxSelfClosingElement | ts.JsxFragment): ts.Expression {
-  if (ts.isJsxFragment(node)) return transformFragment(node.children)
+function transformJsxExpression(state: CompileState, node: ts.JsxElement | ts.JsxSelfClosingElement | ts.JsxFragment): ts.Expression {
+  if (ts.isJsxFragment(node)) return transformFragment(state, node.children)
   if (ts.isJsxElement(node)) {
-    return transformElement(node, node.openingElement.tagName, node.openingElement.attributes, node.children)
+    return transformElement(state, node, node.openingElement.tagName, node.openingElement.attributes, node.children)
   }
-  return transformElement(node, node.tagName, node.attributes, [])
+  return transformElement(state, node, node.tagName, node.attributes, [])
 }
 
 function transformElement(
+  state: CompileState,
   node: ts.JsxElement | ts.JsxSelfClosingElement,
   tagName: ts.JsxTagNameExpression,
   attributes: ts.JsxAttributes,
   children: readonly ts.JsxChild[]
 ): ts.Expression {
-  if (isFragmentTag(tagName)) return transformFragment(children)
+  if (isFragmentTag(tagName)) return transformFragment(state, children)
   if (!ts.isIdentifier(tagName)) {
     // <Foo.Bar>、<svg:rect> 等形态此前会静默编译成无效 DOM 标签（createElement("Foo.Bar")）。
     // 报结构化诊断后按原路径继续，保证产物结构稳定；compile()/Vite 插件会因 error 诊断直接失败。
-    reportUnsupportedTag(tagName)
+    reportUnsupportedTag(state, tagName)
   }
   if (ts.isIdentifier(tagName) && tagName.text === 'ResourceBoundary') {
-    return transformResourceBoundary(node, attributes, children)
+    return transformResourceBoundary(state, node, attributes, children)
   }
   if (ts.isIdentifier(tagName) && tagName.text === 'AsyncBoundary') {
-    return transformAsyncBoundary(node, attributes, children)
+    return transformAsyncBoundary(state, node, attributes, children)
   }
   if (ts.isIdentifier(tagName) && tagName.text === 'ErrorBoundary') {
-    return transformErrorBoundary(node, attributes, children)
+    return transformErrorBoundary(state, node, attributes, children)
   }
   if (ts.isIdentifier(tagName) && tagName.text === 'Profiler') {
-    return transformProfiler(node, attributes, children)
+    return transformProfiler(state, node, attributes, children)
   }
   if (ts.isIdentifier(tagName) && /^[A-Z]/.test(tagName.text)) {
+    const args: ts.Expression[] = [
+      ts.factory.createCallExpression(helperRef(state, 'resolveComponent'), undefined, [
+        tagName,
+        ts.factory.createStringLiteral(state.filename),
+        ts.factory.createStringLiteral(tagName.text)
+      ]),
+      createComponentProps(state, attributes, children)
+    ]
+    // 源码位置仅用于错误定位与 DevTools；生产构建可整体剔除（错误仍带组件名，定位走 source map）。
+    if (state.sourceLocation) args.push(createSourceLocation(tagName))
+    return ts.factory.createCallExpression(helperRef(state, 'createComponent'), undefined, args)
+  }
+
+  // 静态模板提升：完全静态的 DOM 子树（无事件/动态绑定/spread/property 属性）序列化为
+  // 模块级模板，运行时一次 cloneNode 替代 createElement + setStaticProps + 逐子插入。
+  if (isStaticElement(tagName, attributes, children)) {
     return ts.factory.createCallExpression(
-      helperRef('createComponent'),
+      helperRef(state, 'cloneTemplate'),
       undefined,
-      [
-        ts.factory.createCallExpression(helperRef('resolveComponent'), undefined, [
-          tagName,
-          ts.factory.createStringLiteral(currentFilename),
-          ts.factory.createStringLiteral(tagName.text)
-        ]),
-        createComponentProps(attributes, children),
-        createSourceLocation(tagName)
-      ]
+      [registerTemplate(state, serializeStaticHtml(node))]
     )
   }
 
   const elementName = tagName.getText()
-  const elementId = nextIdentifier('_el')
+  const elementId = nextIdentifier(state, '_el')
   const statements: ts.Statement[] = [
     createConstStatement(
+      state,
       elementId,
       ts.factory.createCallExpression(
-        helperRef('createElement'),
+        helperRef(state, 'createElement'),
         undefined,
         [ts.factory.createStringLiteral(elementName)]
       ),
@@ -568,9 +680,9 @@ function transformElement(
     )
   ]
 
-  appendAttributes(statements, elementId, attributes)
-  appendChildren(statements, elementId, children)
-  statements.push(tagStatement(ts.factory.createReturnStatement(elementId), node))
+  appendAttributes(state, statements, elementId, attributes)
+  appendChildren(state, statements, elementId, children)
+  statements.push(tagStatement(state, ts.factory.createReturnStatement(elementId), node))
 
   return ts.factory.createCallExpression(
     ts.factory.createArrowFunction(
@@ -590,13 +702,13 @@ function isFragmentTag(tagName: ts.JsxTagNameExpression): boolean {
   return tagName.getText() === 'Fragment' || tagName.getText() === 'Vobs.Fragment'
 }
 
-function transformFragment(children: readonly ts.JsxChild[]): ts.Expression {
-  const parent = nextIdentifier('_fragmentParent')
-  const anchor = nextIdentifier('_fragmentAnchor')
+function transformFragment(state: CompileState, children: readonly ts.JsxChild[]): ts.Expression {
+  const parent = nextIdentifier(state, '_fragmentParent')
+  const anchor = nextIdentifier(state, '_fragmentAnchor')
   const statements: ts.Statement[] = []
-  appendChildren(statements, parent, children, anchor)
+  appendChildren(state, statements, parent, children, anchor)
   return ts.factory.createCallExpression(
-    helperRef('createFragment'),
+    helperRef(state, 'createFragment'),
     undefined,
     [ts.factory.createArrowFunction(
       undefined,
@@ -613,6 +725,7 @@ function transformFragment(children: readonly ts.JsxChild[]): ts.Expression {
 }
 
 function transformResourceBoundary(
+  state: CompileState,
   node: ts.JsxElement | ts.JsxSelfClosingElement,
   attributes: ts.JsxAttributes,
   children: readonly ts.JsxChild[]
@@ -620,29 +733,31 @@ function transformResourceBoundary(
   const resource = getAttributeExpression(attributes, 'resource')
   if (!resource) throw new VobsError({ code: 'VOBS_C002', layer: 'compiler', message: 'ResourceBoundary 必须提供 resource 属性', fix: '为 ResourceBoundary 添加 resource={resource}。' })
   const options: ts.ObjectLiteralElementLike[] = [
-    ts.factory.createPropertyAssignment('resource', transformEmbeddedExpression(resource)),
-    ts.factory.createPropertyAssignment('children', createBoundaryFactory(children))
+    ts.factory.createPropertyAssignment('resource', transformEmbeddedExpression(state, resource)),
+    ts.factory.createPropertyAssignment('children', createBoundaryFactory(state, children))
   ]
-  appendBoundaryOptionalProperty(options, attributes, 'loading')
-  appendBoundaryOptionalProperty(options, attributes, 'empty')
-  appendBoundaryOptionalProperty(options, attributes, 'fallback')
-  return createBoundaryFragment(node, 'insertResourceBoundary', options)
+  appendBoundaryOptionalProperty(state, options, attributes, 'loading')
+  appendBoundaryOptionalProperty(state, options, attributes, 'empty')
+  appendBoundaryOptionalProperty(state, options, attributes, 'fallback')
+  return createBoundaryFragment(state, node, 'insertResourceBoundary', options)
 }
 
 function transformErrorBoundary(
+  state: CompileState,
   node: ts.JsxElement | ts.JsxSelfClosingElement,
   attributes: ts.JsxAttributes,
   children: readonly ts.JsxChild[]
 ): ts.Expression {
   const fallback = getAttributeExpression(attributes, 'fallback')
   if (!fallback) throw new VobsError({ code: 'VOBS_C002', layer: 'compiler', message: 'ErrorBoundary 必须提供 fallback 属性', fix: '为 ErrorBoundary 添加 fallback={(error, retry) => ...}。' })
-  return createBoundaryFragment(node, 'insertErrorBoundary', [
-    ts.factory.createPropertyAssignment('children', createBoundaryFactory(children)),
-    ts.factory.createPropertyAssignment('fallback', transformEmbeddedExpression(fallback))
+  return createBoundaryFragment(state, node, 'insertErrorBoundary', [
+    ts.factory.createPropertyAssignment('children', createBoundaryFactory(state, children)),
+    ts.factory.createPropertyAssignment('fallback', transformEmbeddedExpression(state, fallback))
   ])
 }
 
 function transformAsyncBoundary(
+  state: CompileState,
   node: ts.JsxElement | ts.JsxSelfClosingElement,
   attributes: ts.JsxAttributes,
   children: readonly ts.JsxChild[]
@@ -650,17 +765,18 @@ function transformAsyncBoundary(
   const promise = getAttributeExpression(attributes, 'promise')
   if (!promise) throw new VobsError({ code: 'VOBS_C002', layer: 'compiler', message: 'AsyncBoundary 必须提供 promise 属性', fix: '为 AsyncBoundary 添加 promise={promise}。' })
   const options: ts.ObjectLiteralElementLike[] = [
-    ts.factory.createPropertyAssignment('promise', transformEmbeddedExpression(promise)),
-    ts.factory.createPropertyAssignment('children', createAsyncFactory(children))
+    ts.factory.createPropertyAssignment('promise', transformEmbeddedExpression(state, promise)),
+    ts.factory.createPropertyAssignment('children', createAsyncFactory(state, children))
   ]
-  appendBoundaryOptionalProperty(options, attributes, 'loading')
-  appendBoundaryOptionalProperty(options, attributes, 'fallback')
+  appendBoundaryOptionalProperty(state, options, attributes, 'loading')
+  appendBoundaryOptionalProperty(state, options, attributes, 'fallback')
   const resetKey = getAttributeExpression(attributes, 'resetKey')
   if (resetKey) options.push(ts.factory.createPropertyAssignment('resetKey', createGetter(resetKey)))
-  return createBoundaryFragment(node, 'insertAsyncBoundary', options)
+  return createBoundaryFragment(state, node, 'insertAsyncBoundary', options)
 }
 
 function transformProfiler(
+  state: CompileState,
   node: ts.JsxElement | ts.JsxSelfClosingElement,
   attributes: ts.JsxAttributes,
   children: readonly ts.JsxChild[]
@@ -673,22 +789,23 @@ function transformProfiler(
       : null
   if (!id) throw new VobsError({ code: 'VOBS_C002', layer: 'compiler', message: 'Profiler 必须提供 id 属性', fix: '为 Profiler 添加 id="ComponentName"。' })
   const options: ts.ObjectLiteralElementLike[] = [
-    ts.factory.createPropertyAssignment('id', transformEmbeddedExpression(id)),
-    ts.factory.createPropertyAssignment('children', createBoundaryFactory(children))
+    ts.factory.createPropertyAssignment('id', transformEmbeddedExpression(state, id)),
+    ts.factory.createPropertyAssignment('children', createBoundaryFactory(state, children))
   ]
-  appendBoundaryOptionalProperty(options, attributes, 'onRender')
-  return createBoundaryFragment(node, 'insertProfiler', options)
+  appendBoundaryOptionalProperty(state, options, attributes, 'onRender')
+  return createBoundaryFragment(state, node, 'insertProfiler', options)
 }
 
 function createBoundaryFragment(
+  state: CompileState,
   node: ts.JsxElement | ts.JsxSelfClosingElement,
   helper: 'insertResourceBoundary' | 'insertErrorBoundary' | 'insertAsyncBoundary' | 'insertProfiler',
   options: readonly ts.ObjectLiteralElementLike[]
 ): ts.Expression {
-  const parent = nextIdentifier('_boundaryParent')
-  const anchor = nextIdentifier('_boundaryAnchor')
+  const parent = nextIdentifier(state, '_boundaryParent')
+  const anchor = nextIdentifier(state, '_boundaryAnchor')
   return ts.factory.createCallExpression(
-    helperRef('createFragment'),
+    helperRef(state, 'createFragment'),
     undefined,
     [ts.factory.createArrowFunction(
       undefined,
@@ -699,7 +816,7 @@ function createBoundaryFragment(
       ],
       undefined,
       ts.factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken),
-      ts.factory.createBlock([callStatement(helper, [
+      ts.factory.createBlock([callStatement(state, helper, [
         parent,
         anchor,
         ts.factory.createObjectLiteralExpression(options, true)
@@ -708,8 +825,8 @@ function createBoundaryFragment(
   )
 }
 
-function createBoundaryFactory(children: readonly ts.JsxChild[]): ts.ArrowFunction {
-  const content = transformFragment(children)
+function createBoundaryFactory(state: CompileState, children: readonly ts.JsxChild[]): ts.ArrowFunction {
+  const content = transformFragment(state, children)
   return ts.factory.createArrowFunction(
     undefined,
     undefined,
@@ -720,29 +837,30 @@ function createBoundaryFactory(children: readonly ts.JsxChild[]): ts.ArrowFuncti
   )
 }
 
-function createAsyncFactory(children: readonly ts.JsxChild[]): ts.ArrowFunction {
+function createAsyncFactory(state: CompileState, children: readonly ts.JsxChild[]): ts.ArrowFunction {
   const value = ts.factory.createIdentifier('value')
   const expressionChild = children.length === 1 && children[0].kind === ts.SyntaxKind.JsxExpression
     ? (children[0] as ts.JsxExpression).expression
     : undefined
   if (expressionChild && ts.isArrowFunction(expressionChild)) {
-    const transformed = transformEmbeddedExpression(expressionChild)
+    const transformed = transformEmbeddedExpression(state, expressionChild)
     return transformed as ts.ArrowFunction
   }
-  const content = transformFragment(children)
+  const content = transformFragment(state, children)
   return ts.factory.createArrowFunction(undefined, undefined, [
     ts.factory.createParameterDeclaration(undefined, undefined, value)
   ], undefined, ts.factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken), content)
 }
 
 function appendBoundaryOptionalProperty(
+  state: CompileState,
   properties: ts.ObjectLiteralElementLike[],
   attributes: ts.JsxAttributes,
   name: string
 ): void {
   const expression = getAttributeExpression(attributes, name)
   if (expression) {
-    const transformed = transformEmbeddedExpression(expression)
+    const transformed = transformEmbeddedExpression(state, expression)
     const value = isJsxExpression(unwrapExpression(expression))
       ? createGetter(transformed)
       : transformed
@@ -760,11 +878,11 @@ function getAttributeExpression(attributes: ts.JsxAttributes, name: string): ts.
   return null
 }
 
-function transformEmbeddedExpression(expression: ts.Expression): ts.Expression {
+function transformEmbeddedExpression(state: CompileState, expression: ts.Expression): ts.Expression {
   const result = ts.transform(expression, [context => root => {
     const visit: ts.Visitor = node => {
       if (ts.isJsxElement(node) || ts.isJsxSelfClosingElement(node) || ts.isJsxFragment(node)) {
-        return transformJsxExpression(node)
+        return transformJsxExpression(state, node)
       }
       return ts.visitEachChild(node, visit, context)
     }
@@ -777,7 +895,125 @@ function transformEmbeddedExpression(expression: ts.Expression): ts.Expression {
   }
 }
 
+/**
+ * 静态元素判定：DOM 标签 + 全部属性为字符串字面量或无值 + 全部子节点为文本或递归静态元素。
+ * 保守排除项（语义或序列化等价性无把握，走原路径）：
+ * - property 属性（value/checked/disabled 等）：HTML attribute 与 setProperty 初始语义存在差异；
+ * - 事件（on*）、ref、spread、key：本身是动态行为；
+ * - 嵌套组件/Fragment/Boundary：不是纯 DOM 子树。
+ */
+function isStaticElement(
+  tagName: ts.JsxTagNameExpression,
+  attributes: ts.JsxAttributes,
+  children: readonly ts.JsxChild[]
+): boolean {
+  if (!ts.isIdentifier(tagName) || !/^[a-z]/.test(tagName.text)) return false
+  for (const attribute of attributes.properties) {
+    if (ts.isJsxSpreadAttribute(attribute)) return false
+    if (!ts.isJsxAttribute(attribute)) return false
+    const name = attribute.name.getText()
+    if (name === 'key' || name === 'ref' || name.startsWith('on')) return false
+    if (isPropertyAttribute(name)) return false
+    const initializer = attribute.initializer
+    if (initializer && !ts.isStringLiteral(initializer)) return false
+  }
+  for (const child of children) {
+    if (ts.isJsxText(child)) continue
+    if (ts.isJsxElement(child) || ts.isJsxSelfClosingElement(child)) {
+      const nested = ts.isJsxElement(child)
+        ? { tagName: child.openingElement.tagName, attributes: child.openingElement.attributes, children: child.children }
+        : { tagName: child.tagName, attributes: child.attributes, children: [] as readonly ts.JsxChild[] }
+      if (!isStaticElement(nested.tagName, nested.attributes, nested.children)) return false
+      continue
+    }
+    return false
+  }
+  return true
+}
+
+/** Serialize a fully-static JSX element to HTML, preserving the compiler's text normalization. */
+function serializeStaticHtml(node: ts.JsxElement | ts.JsxSelfClosingElement): string {
+  const { tagName, attributes, children } = ts.isJsxElement(node)
+    ? { tagName: node.openingElement.tagName, attributes: node.openingElement.attributes, children: node.children }
+    : { tagName: node.tagName, attributes: node.attributes, children: [] as readonly ts.JsxChild[] }
+  return serializeStaticElement(tagName, attributes, children)
+}
+
+function serializeStaticElement(
+  tagName: ts.JsxTagNameExpression,
+  attributes: ts.JsxAttributes,
+  children: readonly ts.JsxChild[]
+): string {
+  const name = tagName.getText()
+  let html = `<${name}`
+  for (const attribute of attributes.properties) {
+    if (!ts.isJsxAttribute(attribute)) continue
+    const attributeName = attribute.name.getText() === 'className' ? 'class' : attribute.name.getText()
+    const initializer = attribute.initializer
+    if (!initializer) {
+      html += ` ${attributeName}=""`
+      continue
+    }
+    if (ts.isStringLiteral(initializer)) {
+      html += ` ${attributeName}="${escapeHtmlAttribute(initializer.text)}"`
+    }
+  }
+  html += '>'
+
+  for (const child of children) {
+    if (ts.isJsxText(child)) {
+      // 与 appendChildren 的文本规范化保持一致，保证提升前后 DOM 文本逐字相同。
+      const text = child.text.replace(/\s+/g, ' ').trimStart()
+      if (text.trim()) html += escapeHtmlText(text)
+      continue
+    }
+    if (ts.isJsxElement(child)) {
+      html += serializeStaticElement(
+        child.openingElement.tagName,
+        child.openingElement.attributes,
+        child.children
+      )
+      continue
+    }
+    if (ts.isJsxSelfClosingElement(child)) {
+      html += serializeStaticElement(child.tagName, child.attributes, [])
+    }
+  }
+  html += `</${name}>`
+  return html
+}
+
+function escapeHtmlAttribute(value: string): string {
+  return value.replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;')
+}
+
+function escapeHtmlText(value: string): string {
+  return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
+}
+
+/** Register a hoisted template declaration; identical HTML shares one declaration. */
+function registerTemplate(state: CompileState, html: string): ts.Expression {
+  const existing = state.templates.get(html)
+  if (existing) return existing
+  const identifier = nextIdentifier(state, '_tpl')
+  state.templates.set(html, identifier)
+  return identifier
+}
+
+function createTemplateDeclarations(state: CompileState): ts.Statement[] {
+  return [...state.templates.entries()].map(([html, identifier]) =>
+    ts.factory.createVariableStatement(undefined, ts.factory.createVariableDeclarationList([
+      ts.factory.createVariableDeclaration(identifier, undefined, undefined, ts.factory.createCallExpression(
+        helperRef(state, 'createTemplate'),
+        undefined,
+        [ts.factory.createStringLiteral(html)]
+      ))
+    ], ts.NodeFlags.Const))
+  )
+}
+
 function appendAttributes(
+  state: CompileState,
   statements: ts.Statement[],
   element: ts.Identifier,
   attributes: ts.JsxAttributes
@@ -786,7 +1022,7 @@ function appendAttributes(
   const hasSpread = attributes.properties.some(attribute => ts.isJsxSpreadAttribute(attribute))
   for (const attribute of attributes.properties) {
     if (ts.isJsxSpreadAttribute(attribute)) {
-      statements.push(callStatement('spreadProps', [element, transformEmbeddedExpression(attribute.expression)], attribute))
+      statements.push(callStatement(state, 'spreadProps', [element, transformEmbeddedExpression(state, attribute.expression)], attribute))
       continue
     }
     if (!ts.isJsxAttribute(attribute)) continue
@@ -795,14 +1031,14 @@ function appendAttributes(
     if (name === 'ref') {
       const initializer = attribute.initializer
       if (initializer && ts.isJsxExpression(initializer) && initializer.expression) {
-        statements.push(callStatement('setRef', [element, transformEmbeddedExpression(initializer.expression)], attribute))
+        statements.push(callStatement(state, 'setRef', [element, transformEmbeddedExpression(state, initializer.expression)], attribute))
       }
       continue
     }
     const initializer = attribute.initializer
 
     if (name.startsWith('on') && initializer && ts.isJsxExpression(initializer) && initializer.expression) {
-      statements.push(callStatement('addEventListener', [
+      statements.push(callStatement(state, 'addEventListener', [
         element,
         ts.factory.createStringLiteral(name.slice(2).toLowerCase()),
         initializer.expression
@@ -812,7 +1048,7 @@ function appendAttributes(
 
     if (!initializer) {
       if (hasSpread) {
-        statements.push(callStatement(isPropertyAttribute(name) ? 'setProperty' : 'setAttribute', [element, ts.factory.createStringLiteral(isPropertyAttribute(name) ? name : name === 'className' ? 'class' : name), isPropertyAttribute(name) ? ts.factory.createTrue() : ts.factory.createStringLiteral('')], attribute))
+        statements.push(callStatement(state, isPropertyAttribute(name) ? 'setProperty' : 'setAttribute', [element, ts.factory.createStringLiteral(isPropertyAttribute(name) ? name : name === 'className' ? 'class' : name), isPropertyAttribute(name) ? ts.factory.createTrue() : ts.factory.createStringLiteral('')], attribute))
         continue
       }
       if (isPropertyAttribute(name)) staticProps.push(createStaticProperty(name, ts.factory.createTrue()))
@@ -821,7 +1057,7 @@ function appendAttributes(
     }
     if (ts.isStringLiteral(initializer)) {
       if (hasSpread) {
-        statements.push(callStatement(isPropertyAttribute(name) ? 'setProperty' : 'setAttribute', [element, ts.factory.createStringLiteral(isPropertyAttribute(name) ? name : name === 'className' ? 'class' : name), ts.factory.createStringLiteral(initializer.text)], attribute))
+        statements.push(callStatement(state, isPropertyAttribute(name) ? 'setProperty' : 'setAttribute', [element, ts.factory.createStringLiteral(isPropertyAttribute(name) ? name : name === 'className' ? 'class' : name), ts.factory.createStringLiteral(initializer.text)], attribute))
         continue
       }
       staticProps.push(createStaticProperty(isPropertyAttribute(name) ? name : name === 'className' ? 'class' : name,
@@ -832,14 +1068,14 @@ function appendAttributes(
     const attributeName = name === 'className' ? 'class' : name
     const propertyAttribute = isPropertyAttribute(name)
     if (ts.isJsxExpression(initializer) && initializer.expression) {
-      statements.push(callStatement(propertyAttribute ? 'bindProperty' : 'bindAttribute', [
+      statements.push(callStatement(state, propertyAttribute ? 'bindProperty' : 'bindAttribute', [
         element,
         ts.factory.createStringLiteral(propertyAttribute ? name : attributeName),
         createGetter(initializer.expression)
       ], attribute))
     }
   }
-  if (staticProps.length) statements.splice(1, 0, callStatement('setStaticProps', [
+  if (staticProps.length) statements.splice(1, 0, callStatement(state, 'setStaticProps', [
     element,
     ts.factory.createObjectLiteralExpression(staticProps, true)
   ], attributes))
@@ -856,6 +1092,7 @@ function isPropertyAttribute(name: string): boolean {
 }
 
 function appendChildren(
+  state: CompileState,
   statements: ts.Statement[],
   element: ts.Identifier,
   children: readonly ts.JsxChild[],
@@ -865,9 +1102,9 @@ function appendChildren(
     if (ts.isJsxText(child)) {
       const text = child.text.replace(/\s+/g, ' ').trimStart()
       if (text.trim()) {
-        statements.push(callStatement('insertBefore', [
+        statements.push(callStatement(state, 'insertBefore', [
         element,
-        ts.factory.createCallExpression(helperRef('createText'), undefined, [
+        ts.factory.createCallExpression(helperRef(state, 'createText'), undefined, [
           ts.factory.createStringLiteral(text)
         ]),
         anchor
@@ -877,9 +1114,9 @@ function appendChildren(
     }
 
     if (ts.isJsxElement(child) || ts.isJsxSelfClosingElement(child) || ts.isJsxFragment(child)) {
-      statements.push(callStatement('insertBefore', [
+      statements.push(callStatement(state, 'insertBefore', [
         element,
-        transformJsxExpression(child),
+        transformJsxExpression(state, child),
         anchor
       ], child))
       continue
@@ -888,30 +1125,31 @@ function appendChildren(
     if (child.kind === ts.SyntaxKind.JsxExpression) {
       const expression = (child as ts.JsxExpression).expression
       if (!expression) continue
-      const list = transformListExpression(element, expression, anchor)
+      const list = transformListExpression(state, element, expression, anchor)
       if (list) {
-        statements.push(callStatement('insertList', list, child))
+        statements.push(callStatement(state, 'insertList', list, child))
         continue
       }
-      const dynamic = transformDynamicExpression(expression)
+      const dynamic = transformDynamicExpression(state, expression)
       if (dynamic) {
-        statements.push(callStatement('insertDynamic', [element, anchor, dynamic], child))
+        statements.push(callStatement(state, 'insertDynamic', [element, anchor, dynamic], child))
         continue
       }
       if (!containsJsx(expression) && !ts.isIdentifier(expression)) {
-        const textId = nextIdentifier('_text')
-        statements.push(createConstStatement(textId, ts.factory.createCallExpression(helperRef('createText'), undefined, [ts.factory.createStringLiteral('')]), child))
-        statements.push(callStatement('insertBefore', [element, textId, anchor], child))
-        statements.push(callStatement('bindText', [textId, createGetter(expression)], child))
+        const textId = nextIdentifier(state, '_text')
+        statements.push(createConstStatement(state, textId, ts.factory.createCallExpression(helperRef(state, 'createText'), undefined, [ts.factory.createStringLiteral('')]), child))
+        statements.push(callStatement(state, 'insertBefore', [element, textId, anchor], child))
+        statements.push(callStatement(state, 'bindText', [textId, createGetter(expression)], child))
         continue
       }
-      const value = transformEmbeddedExpression(expression)
-      statements.push(callStatement('insertDynamicValue', [element, anchor, createGetter(value)], child))
+      const value = transformEmbeddedExpression(state, expression)
+      statements.push(callStatement(state, 'insertDynamicValue', [element, anchor, createGetter(value)], child))
     }
   }
 }
 
 function createComponentProps(
+  state: CompileState,
   attributes: ts.JsxAttributes,
   children: readonly ts.JsxChild[]
 ): ts.ObjectLiteralExpression {
@@ -931,11 +1169,11 @@ function createComponentProps(
     } else if (ts.isStringLiteral(initializer)) {
       properties.push(ts.factory.createPropertyAssignment(name, ts.factory.createStringLiteral(initializer.text)))
     } else if (ts.isJsxExpression(initializer) && initializer.expression) {
-      properties.push(createGetterProperty(name, transformEmbeddedExpression(initializer.expression)))
+      properties.push(createGetterProperty(name, transformEmbeddedExpression(state, initializer.expression)))
     }
   }
 
-  const childExpressions = children.flatMap(childToComponentExpression)
+  const childExpressions = children.flatMap(child => childToComponentExpression(state, child))
   if (childExpressions.length === 1) {
     properties.push(createGetterProperty('children', childExpressions[0]))
   } else if (childExpressions.length > 1) {
@@ -955,22 +1193,22 @@ function createSourceLocation(node: ts.Node): ts.ObjectLiteralExpression {
   ], true)
 }
 
-function transformDynamicExpression(expression: ts.Expression): ts.ArrowFunction | null {
+function transformDynamicExpression(state: CompileState, expression: ts.Expression): ts.ArrowFunction | null {
   if (ts.isBinaryExpression(expression) && expression.operatorToken.kind === ts.SyntaxKind.AmpersandAmpersandToken) {
     const right = unwrapExpression(expression.right)
     if (!isJsxExpression(right)) return null
     return createGetter(ts.factory.createConditionalExpression(
       expression.left,
       ts.factory.createToken(ts.SyntaxKind.QuestionToken),
-      transformJsxExpression(right),
+      transformJsxExpression(state, right),
       ts.factory.createToken(ts.SyntaxKind.ColonToken),
       ts.factory.createNull()
     ))
   }
 
   if (ts.isConditionalExpression(expression)) {
-    const whenTrue = transformDynamicBranch(expression.whenTrue)
-    const whenFalse = transformDynamicBranch(expression.whenFalse)
+    const whenTrue = transformDynamicBranch(state, expression.whenTrue)
+    const whenFalse = transformDynamicBranch(state, expression.whenFalse)
     if (!whenTrue && !whenFalse) return null
     return createGetter(ts.factory.createConditionalExpression(
       expression.condition,
@@ -984,14 +1222,15 @@ function transformDynamicExpression(expression: ts.Expression): ts.ArrowFunction
   return null
 }
 
-function transformDynamicBranch(expression: ts.Expression): ts.Expression | null {
+function transformDynamicBranch(state: CompileState, expression: ts.Expression): ts.Expression | null {
   const branch = unwrapExpression(expression)
-  if (isJsxExpression(branch)) return transformJsxExpression(branch)
+  if (isJsxExpression(branch)) return transformJsxExpression(state, branch)
   if (branch.kind === ts.SyntaxKind.NullKeyword || branch.kind === ts.SyntaxKind.FalseKeyword) return branch
   return null
 }
 
 function transformListExpression(
+  state: CompileState,
   parent: ts.Identifier,
   expression: ts.Expression,
   anchor: ts.Expression
@@ -1005,7 +1244,7 @@ function transformListExpression(
   if (!isJsxExpression(body) || ts.isJsxFragment(body)) return null
 
   const key = findKeyExpression(body)
-  const renderItem = transformListCallback(callback, transformJsxExpression(body))
+  const renderItem = transformListCallback(callback, transformJsxExpression(state, body))
   const args: ts.Expression[] = [
     parent,
     anchor,
@@ -1073,17 +1312,17 @@ function unwrapExpression(node: ts.Expression | ts.ConciseBody): ts.Expression {
   return ts.isParenthesizedExpression(node) ? node.expression : node as ts.Expression
 }
 
-function childToComponentExpression(child: ts.JsxChild): ts.Expression[] {
+function childToComponentExpression(state: CompileState, child: ts.JsxChild): ts.Expression[] {
   if (ts.isJsxText(child)) {
     const text = child.text.replace(/\s+/g, ' ').trim()
     return text ? [ts.factory.createStringLiteral(text)] : []
   }
   if (ts.isJsxElement(child) || ts.isJsxSelfClosingElement(child) || ts.isJsxFragment(child)) {
-    return [transformJsxExpression(child)]
+    return [transformJsxExpression(state, child)]
   }
   if (child.kind === ts.SyntaxKind.JsxExpression) {
     const expression = (child as ts.JsxExpression).expression
-    return expression ? [transformEmbeddedExpression(expression)] : []
+    return expression ? [transformEmbeddedExpression(state, expression)] : []
   }
   return []
 }
@@ -1115,42 +1354,42 @@ function createGetterProperty(name: string | ts.PropertyName, expression: ts.Exp
   )
 }
 
-function callStatement(name: string, args: ts.Expression[], source?: ts.Node): ts.ExpressionStatement {
+function callStatement(state: CompileState, name: string, args: ts.Expression[], source?: ts.Node): ts.ExpressionStatement {
   const statement = ts.factory.createExpressionStatement(
-    ts.factory.createCallExpression(helperRef(name), undefined, args)
+    ts.factory.createCallExpression(helperRef(state, name), undefined, args)
   )
-  return source ? tagStatement(statement, source) : statement
+  return source ? tagStatement(state, statement, source) : statement
 }
 
-function createConstStatement(name: ts.Identifier, initializer: ts.Expression, source?: ts.Node): ts.VariableStatement {
+function createConstStatement(state: CompileState, name: ts.Identifier, initializer: ts.Expression, source?: ts.Node): ts.VariableStatement {
   const statement = ts.factory.createVariableStatement(
     undefined,
     ts.factory.createVariableDeclarationList([
       ts.factory.createVariableDeclaration(name, undefined, undefined, initializer)
     ], ts.NodeFlags.Const)
   )
-  return source ? tagStatement(statement, source) : statement
+  return source ? tagStatement(state, statement, source) : statement
 }
 
 /** Record where an emitted statement originated from, for source map generation. */
-function tagStatement<T extends ts.Statement>(statement: T, source: ts.Node): T {
-  const position = positionOfNode(source)
-  if (position) statementSources.set(statement, position)
+function tagStatement<T extends ts.Statement>(state: CompileState, statement: T, source: ts.Node): T {
+  const position = positionOfNode(state, source)
+  if (position) state.statementSources.set(statement, position)
   return statement
 }
 
-function positionOfNode(node: ts.Node): SourcePosition | null {
+function positionOfNode(state: CompileState, node: ts.Node): SourcePosition | null {
   // ts.transform 产生的节点副本可能丢失 sourceFile 引用，回退到当前编译的源文件。
-  const sourceFile = node.getSourceFile() ?? currentSourceFile
+  const sourceFile = node.getSourceFile() ?? state.sourceFile
   if (!sourceFile || node.pos < 0) return null
   const { line, character } = sourceFile.getLineAndCharacterOfPosition(node.getStart(sourceFile))
   return { line, column: character }
 }
 
-function nextIdentifier(prefix: string): ts.Identifier {
+function nextIdentifier(state: CompileState, prefix: string): ts.Identifier {
   let name: string
   do {
-    name = `${prefix}${generatedId++}`
-  } while (takenNames.has(name))
+    name = `${prefix}${state.generatedId++}`
+  } while (state.takenNames.has(name))
   return ts.factory.createIdentifier(name)
 }