refactor(compiler-vapor): add unique variable generation to avoid binding conflicts

Author: edison1105

packages/compiler-vapor/__tests__/__snapshots__/compile.spec.ts.snap

@@ -280,6 +280,42 @@ export function render(_ctx) {
 }"
 `;
 
+exports[`compile > gen unique variables > should avoid binding conflicts for node vars (n*/x*) 1`] = `
+"
+  const n1 = t0()
+  const x1 = _child(n1)
+  _renderEffect(() => _setText(x1, _toDisplayString(foo)))
+  return n1
+"
+`;
+
+exports[`compile > gen unique variables > should bump old ref var (r*) on conflict 1`] = `
+"
+  const _setTemplateRef = _createTemplateRefSetter()
+  const n1 = t0()
+  let r1
+  _renderEffect(() => r1 = _setTemplateRef(n1, bar, r1))
+  return n1
+"
+`;
+
+exports[`compile > gen unique variables > should bump placeholder var (p*) on conflict 1`] = `
+"
+  const n1 = t0()
+  const p1 = _child(n1)
+  const n0 = _child(p1)
+  _renderEffect(() => _setProp(n0, "id", foo.value))
+  return n1
+"
+`;
+
+exports[`compile > gen unique variables > should bump template var (t*) on conflict 1`] = `
+"
+  const n0 = t1()
+  return n0
+"
+`;
+
 exports[`compile > setInsertionState > next, child and nthChild should be above the setInsertionState 1`] = `
 "import { resolveComponent as _resolveComponent, child as _child, next as _next, setInsertionState as _setInsertionState, createComponentWithFallback as _createComponentWithFallback, nthChild as _nthChild, createIf as _createIf, setProp as _setProp, renderEffect as _renderEffect, template as _template } from 'vue';
 const t0 = _template("<div></div>")

packages/compiler-vapor/__tests__/compile.spec.ts

@@ -268,4 +268,59 @@ describe('compile', () => {
       expect(code).matchSnapshot()
     })
   })
+
+  describe('gen unique variables', () => {
+    test('should avoid binding conflicts for node vars (n*/x*)', () => {
+      const code = compile(`<div>{{ foo }}</div>`, {
+        inline: true,
+        bindingMetadata: {
+          n0: BindingTypes.SETUP_REACTIVE_CONST,
+          x0: BindingTypes.SETUP_MAYBE_REF,
+        },
+      })
+
+      expect(code).matchSnapshot()
+      expect(code).contains('const n1 = t0()')
+      expect(code).contains('const x1 = _child(n1)')
+    })
+
+    test('should bump old ref var (r*) on conflict', () => {
+      const code = compile(`<div :ref="bar" />`, {
+        inline: true,
+        bindingMetadata: {
+          r0: BindingTypes.SETUP_REF,
+          bar: BindingTypes.SETUP_REF,
+        },
+      })
+
+      expect(code).matchSnapshot()
+      expect(code).contains('let r1')
+      expect(code).contains('_setTemplateRef(n1, bar, r1)')
+    })
+
+    test('should bump template var (t*) on conflict', () => {
+      const code = compile(`<div />`, {
+        inline: true,
+        bindingMetadata: {
+          t0: BindingTypes.SETUP_REF,
+        },
+      })
+
+      expect(code).matchSnapshot()
+      expect(code).contains('const n0 = t1()')
+    })
+
+    test('should bump placeholder var (p*) on conflict', () => {
+      const code = compile(`<div><div><span :id="foo" /></div></div>`, {
+        inline: true,
+        bindingMetadata: {
+          p0: BindingTypes.SETUP_REF,
+          foo: BindingTypes.SETUP_REF,
+        },
+      })
+
+      expect(code).matchSnapshot()
+      expect(code).contains('const p1 = ')
+    })
+  })
 })

packages/compiler-vapor/src/generate.ts

@@ -26,6 +26,8 @@ export class CodegenContext {
 
   helpers: Set<string> = new Set<string>([])
 
+  bindingNames: Set<string> = new Set<string>()
+
   helper = (name: CoreHelper | VaporHelper) => {
     this.helpers.add(name)
     return `_${name}`
@@ -68,6 +70,30 @@ export class CodegenContext {
     return [this.scopeLevel++, () => this.scopeLevel--] as const
   }
 
+  seenVarNames: Set<string> = new Set()
+  templateVars: Map<number, string> = new Map()
+  genVarName(prefix: string, baseNum: number): string {
+    let num = baseNum
+    let name = `${prefix}${num}`
+    while (this.bindingNames.has(name) || this.seenVarNames.has(name)) {
+      name = `${prefix}${++num}`
+    }
+    this.seenVarNames.add(name)
+    return name
+  }
+
+  tName(i: number): string {
+    let name = this.templateVars.get(i)
+    if (!name) {
+      this.templateVars.set(i, (name = this.genVarName('t', i)))
+    }
+    return name
+  }
+
+  pName(i: number): string {
+    return this.genVarName('p', i)
+  }
+
   constructor(
     public ir: RootIRNode,
     options: CodegenOptions,
@@ -90,6 +116,11 @@ export class CodegenContext {
     }
     this.options = extend(defaultOptions, options)
     this.block = ir.block
+    this.bindingNames = new Set<string>(
+      this.options.bindingMetadata
+        ? Object.keys(this.options.bindingMetadata)
+        : [],
+    )
   }
 }
 

packages/compiler-vapor/src/generators/template.ts

@@ -7,12 +7,12 @@ import { type CodeFragment, NEWLINE, buildCodeFragment, genCall } from './utils'
 export function genTemplates(
   templates: string[],
   rootIndex: number | undefined,
-  { helper }: CodegenContext,
+  context: CodegenContext,
 ): string {
   return templates
     .map(
       (template, i) =>
-        `const t${i} = ${helper('template')}(${JSON.stringify(
+        `const ${context.tName(i)} = ${context.helper('template')}(${JSON.stringify(
           template,
         )}${i === rootIndex ? ', true' : ''})\n`,
     )
@@ -27,7 +27,7 @@ export function genSelf(
   const { id, template, operation, hasDynamicChild } = dynamic
 
   if (id !== undefined && template !== undefined) {
-    push(NEWLINE, `const n${id} = t${template}()`)
+    push(NEWLINE, `const n${id} = ${context.tName(template)}()`)
     push(...genDirectivesForElement(id, context))
   }
 
@@ -75,7 +75,8 @@ export function genChildren(
     const elementIndex = Number(index) + offset
     // p for "placeholder" variables that are meant for possible reuse by
     // other access paths
-    const variable = id === undefined ? `p${context.block.tempId++}` : `n${id}`
+    const variable =
+      id === undefined ? context.pName(context.block.tempId++) : `n${id}`
     pushBlock(NEWLINE, `const ${variable} = `)
 
     if (prev) {

packages/compiler-vapor/src/transform.ts

@@ -117,7 +117,20 @@ export class TransformContext<T extends AllNode = AllNode> {
     }
   }
 
-  increaseId = (): number => this.globalId++
+  increaseId = (): number => {
+    // allocate an id that won't conflict with user-defined bindings when used
+    // as generated identifiers with n/x/r prefixes (e.g., n1, x1, r1)
+    const binding = this.root.options.bindingMetadata
+    let id = this.globalId
+    while (
+      binding &&
+      ('n' + id in binding || 'x' + id in binding || 'r' + id in binding)
+    ) {
+      id++
+    }
+    this.globalId = id + 1
+    return id
+  }
   reference(): number {
     if (this.dynamic.id !== undefined) return this.dynamic.id
     this.dynamic.flags |= DynamicFlag.REFERENCED