refactor(templateRef): simplify template ref handling and remove old ref declarations (#13842)

Author: edison1105

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

@@ -385,14 +385,11 @@ export function render(_ctx, $props, $emit, $attrs, $slots) {
   const n1 = t0()
   const n3 = t0()
   const n4 = t0()
-  let r1
-  let r3
-  let r4
   _renderEffect(() => {
     const _bar = _ctx.bar
-    r1 = _setTemplateRef(n1, _bar, r1)
-    r3 = _setTemplateRef(n3, _bar, r3)
-    r4 = _setTemplateRef(n4, _bar, r4)
+    _setTemplateRef(n1, _bar)
+    _setTemplateRef(n3, _bar)
+    _setTemplateRef(n4, _bar)
   })
   return [n1, n3, n4]
 }"

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

@@ -334,12 +334,9 @@ describe('compile', () => {
       expect(code).matchSnapshot()
       expect(code).not.contains('let r0')
       expect(code).not.contains('let r2')
-      expect(code).contains('let r1')
-      expect(code).contains('let r3')
-      expect(code).contains('let r4')
-      expect(code).contains('r1 = _setTemplateRef(n1, _bar, r1)')
-      expect(code).contains('r3 = _setTemplateRef(n3, _bar, r3)')
-      expect(code).contains('r4 = _setTemplateRef(n4, _bar, r4)')
+      expect(code).contains('_setTemplateRef(n1, _bar)')
+      expect(code).contains('_setTemplateRef(n3, _bar)')
+      expect(code).contains('_setTemplateRef(n4, _bar)')
     })
 
     test('should bump template var (t*) on conflict', () => {

packages/compiler-vapor/__tests__/transforms/__snapshots__/transformTemplateRef.spec.ts.snap

@@ -7,8 +7,7 @@ const t0 = _template("<div>", true)
 export function render(_ctx) {
   const _setTemplateRef = _createTemplateRefSetter()
   const n0 = t0()
-  let r0
-  _renderEffect(() => r0 = _setTemplateRef(n0, _ctx.foo, r0))
+  _renderEffect(() => _setTemplateRef(n0, _ctx.foo))
   return n0
 }"
 `;
@@ -20,14 +19,13 @@ const t0 = _template("<div>", true)
 export function render(_ctx) {
   const _setTemplateRef = _createTemplateRefSetter()
   const n0 = t0()
-  let r0
   _renderEffect(() => {
     const _foo = _ctx.foo
-    r0 = _setTemplateRef(n0, bar => {
+    _setTemplateRef(n0, bar => {
         _foo.value = bar
         ;({ baz: _ctx.baz } = bar)
         console.log(_foo.value, _ctx.baz)
-      }, r0)
+      })
   })
   return n0
 }"
@@ -41,7 +39,7 @@ export function render(_ctx) {
   const _setTemplateRef = _createTemplateRefSetter()
   const n0 = _createFor(() => ([1,2,3]), (_for_item0) => {
     const n2 = t0()
-    _setTemplateRef(n2, "foo", void 0, true)
+    _setTemplateRef(n2, "foo", true)
     return n2
   }, undefined, 4)
   return n0
@@ -67,7 +65,7 @@ exports[`compiler: template ref transform > static ref (inline mode) 1`] = `
 "
   const _setTemplateRef = _createTemplateRefSetter()
   const n0 = t0()
-  _setTemplateRef(n0, foo, null, null, "foo")
+  _setTemplateRef(n0, foo, null, "foo")
   return n0
 "
 `;

packages/compiler-vapor/__tests__/transforms/transformTemplateRef.spec.ts

@@ -56,7 +56,7 @@ describe('compiler: template ref transform', () => {
     })
     expect(code).matchSnapshot()
     // pass the actual ref and ref key
-    expect(code).contains('_setTemplateRef(n0, foo, null, null, "foo")')
+    expect(code).contains('_setTemplateRef(n0, foo, null, "foo")')
   })
 
   test('dynamic ref', () => {
@@ -67,12 +67,6 @@ describe('compiler: template ref transform', () => {
       flags: DynamicFlag.REFERENCED,
     })
     expect([...ir.template.keys()]).toEqual(['<div>'])
-    expect(ir.block.operation).toMatchObject([
-      {
-        type: IRNodeTypes.DECLARE_OLD_REF,
-        id: 0,
-      },
-    ])
     expect(ir.block.effect).toMatchObject([
       {
         operations: [
@@ -89,7 +83,7 @@ describe('compiler: template ref transform', () => {
     ])
     expect(code).matchSnapshot()
     expect(code).contains('const _setTemplateRef = _createTemplateRefSetter()')
-    expect(code).contains('_setTemplateRef(n0, _ctx.foo, r0)')
+    expect(code).contains('_setTemplateRef(n0, _ctx.foo)')
   })
 
   test('function ref', () => {
@@ -105,12 +99,6 @@ describe('compiler: template ref transform', () => {
       flags: DynamicFlag.REFERENCED,
     })
     expect([...ir.template.keys()]).toEqual(['<div>'])
-    expect(ir.block.operation).toMatchObject([
-      {
-        type: IRNodeTypes.DECLARE_OLD_REF,
-        id: 0,
-      },
-    ])
     expect(ir.block.effect).toMatchObject([
       {
         operations: [
@@ -130,7 +118,7 @@ describe('compiler: template ref transform', () => {
         _foo.value = bar
         ;({ baz: _ctx.baz } = bar)
         console.log(_foo.value, _ctx.baz)
-      }, r0)`)
+      })`)
   })
 
   test('ref + v-if', () => {
@@ -178,6 +166,6 @@ describe('compiler: template ref transform', () => {
     ])
     expect(code).matchSnapshot()
     expect(code).contains('const _setTemplateRef = _createTemplateRefSetter()')
-    expect(code).contains('_setTemplateRef(n2, "foo", void 0, true)')
+    expect(code).contains('_setTemplateRef(n2, "foo", true)')
   })
 })

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

@@ -12,7 +12,7 @@ import { genFor } from './for'
 import { genSetHtml } from './html'
 import { genIf } from './if'
 import { genDynamicProps, genSetProp } from './prop'
-import { genDeclareOldRef, genSetTemplateRef } from './templateRef'
+import { genSetTemplateRef } from './templateRef'
 import { genGetTextChild, genSetText } from './text'
 import {
   type CodeFragment,
@@ -79,8 +79,6 @@ export function genOperation(
       return genFor(oper, context)
     case IRNodeTypes.CREATE_COMPONENT_NODE:
       return genCreateComponent(oper, context)
-    case IRNodeTypes.DECLARE_OLD_REF:
-      return genDeclareOldRef(oper)
     case IRNodeTypes.SLOT_OUTLET_NODE:
       return genSlotOutlet(oper, context)
     case IRNodeTypes.DIRECTIVE:

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

@@ -1,6 +1,6 @@
 import { genExpression } from './expression'
 import type { CodegenContext } from '../generate'
-import type { DeclareOldRefIRNode, SetTemplateRefIRNode } from '../ir'
+import type { SetTemplateRefIRNode } from '../ir'
 import { type CodeFragment, NEWLINE, genCall } from './utils'
 import { BindingTypes, type SimpleExpressionNode } from '@vue/compiler-dom'
 
@@ -13,22 +13,16 @@ export function genSetTemplateRef(
   const [refValue, refKey] = genRefValue(oper.value, context)
   return [
     NEWLINE,
-    oper.effect && `r${oper.element} = `,
     ...genCall(
       setTemplateRefIdent, // will be generated in root scope
       `n${oper.element}`,
       refValue,
-      oper.effect ? `r${oper.element}` : oper.refFor ? 'void 0' : undefined,
       oper.refFor && 'true',
       refKey,
     ),
   ]
 }
 
-export function genDeclareOldRef(oper: DeclareOldRefIRNode): CodeFragment[] {
-  return [NEWLINE, `let r${oper.id}`]
-}
-
 function genRefValue(value: SimpleExpressionNode, context: CodegenContext) {
   // in inline mode there is no setupState object, so we can't use string
   // keys to set the ref. Instead, we need to transform it to pass the

packages/compiler-vapor/src/ir/index.ts

@@ -29,7 +29,6 @@ export enum IRNodeTypes {
   SLOT_OUTLET_NODE,
 
   DIRECTIVE,
-  DECLARE_OLD_REF, // consider make it more general
 
   IF,
   FOR,
@@ -209,11 +208,6 @@ export interface CreateComponentIRNode extends BaseIRNode {
   last?: boolean
 }
 
-export interface DeclareOldRefIRNode extends BaseIRNode {
-  type: IRNodeTypes.DECLARE_OLD_REF
-  id: number
-}
-
 export interface SlotOutletIRNode extends BaseIRNode {
   type: IRNodeTypes.SLOT_OUTLET_NODE
   id: number
@@ -248,7 +242,6 @@ export type OperationNode =
   | IfIRNode
   | ForIRNode
   | CreateComponentIRNode
-  | DeclareOldRefIRNode
   | SlotOutletIRNode
   | GetTextChildIRNode
 

packages/compiler-vapor/src/transforms/transformTemplateRef.ts

@@ -29,11 +29,6 @@ export const transformTemplateRef: NodeTransform = (node, context) => {
   return () => {
     const id = context.reference()
     const effect = !isConstantExpression(value)
-    effect &&
-      context.registerOperation({
-        type: IRNodeTypes.DECLARE_OLD_REF,
-        id,
-      })
     context.registerEffect([value], {
       type: IRNodeTypes.SET_TEMPLATE_REF,
       element: id,

packages/runtime-vapor/__tests__/components/Teleport.spec.ts

@@ -720,15 +720,15 @@ function runSharedTests(deferMode: boolean): void {
               {
                 default: () => {
                   const n3 = template('<circle></circle>', false, 1)() as any
-                  _setTemplateRef(n3, circle, undefined, undefined, 'circle')
+                  _setTemplateRef(n3, circle, undefined, 'circle')
                   return n3
                 },
               },
             )
             return n4
           },
         )
-        _setTemplateRef(n0, svg, undefined, undefined, 'svg')
+        _setTemplateRef(n0, svg, undefined, 'svg')
         return [n0, n1]
       },
     }).render()