diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformTemplateRef.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformTemplateRef.spec.ts.snap index f2eade4bcdf..d823c4ed0af 100644 --- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformTemplateRef.spec.ts.snap +++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/transformTemplateRef.spec.ts.snap @@ -43,6 +43,24 @@ export function render(_ctx) { }" `; +exports[`compiler: template ref transform > static ref (PROD) 1`] = ` +" + const _setTemplateRef = _createTemplateRefSetter() + const n0 = t0() + _setTemplateRef(n0, foo) + return n0 +" +`; + +exports[`compiler: template ref transform > static ref (inline mode) 1`] = ` +" + const _setTemplateRef = _createTemplateRefSetter() + const n0 = t0() + _setTemplateRef(n0, foo) + return n0 +" +`; + exports[`compiler: template ref transform > static ref 1`] = ` "import { createTemplateRefSetter as _createTemplateRefSetter, template as _template } from 'vue'; const t0 = _template("
", true) diff --git a/packages/compiler-vapor/__tests__/transforms/transformTemplateRef.spec.ts b/packages/compiler-vapor/__tests__/transforms/transformTemplateRef.spec.ts index 6be8f18779c..3dc9c80876b 100644 --- a/packages/compiler-vapor/__tests__/transforms/transformTemplateRef.spec.ts +++ b/packages/compiler-vapor/__tests__/transforms/transformTemplateRef.spec.ts @@ -1,3 +1,4 @@ +import { BindingTypes } from '@vue/compiler-dom' import { DynamicFlag, type ForIRNode, @@ -48,6 +49,16 @@ describe('compiler: template ref transform', () => { expect(code).contains('_setTemplateRef(n0, "foo")') }) + test('static ref (inline mode)', () => { + const { code } = compileWithTransformRef(`
`, { + inline: true, + bindingMetadata: { foo: BindingTypes.SETUP_REF }, + }) + expect(code).matchSnapshot() + // pass the actual ref + expect(code).contains('_setTemplateRef(n0, foo)') + }) + test('dynamic ref', () => { const { ir, code } = compileWithTransformRef(`
`) diff --git a/packages/compiler-vapor/src/generators/templateRef.ts b/packages/compiler-vapor/src/generators/templateRef.ts index a4d6d546ed3..af8facc57b1 100644 --- a/packages/compiler-vapor/src/generators/templateRef.ts +++ b/packages/compiler-vapor/src/generators/templateRef.ts @@ -2,6 +2,7 @@ import { genExpression } from './expression' import type { CodegenContext } from '../generate' import type { DeclareOldRefIRNode, SetTemplateRefIRNode } from '../ir' import { type CodeFragment, NEWLINE, genCall } from './utils' +import { BindingTypes, type SimpleExpressionNode } from '@vue/compiler-dom' export const setTemplateRefIdent = `_setTemplateRef` @@ -15,7 +16,7 @@ export function genSetTemplateRef( ...genCall( setTemplateRefIdent, // will be generated in root scope `n${oper.element}`, - genExpression(oper.value, context), + genRefValue(oper.value, context), oper.effect ? `r${oper.element}` : oper.refFor ? 'void 0' : undefined, oper.refFor && 'true', ), @@ -25,3 +26,20 @@ export function genSetTemplateRef( 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 + // actual ref instead. + if (!__BROWSER__ && value && context.options.inline) { + const binding = context.options.bindingMetadata[value.content] + if ( + binding === BindingTypes.SETUP_LET || + binding === BindingTypes.SETUP_REF || + binding === BindingTypes.SETUP_MAYBE_REF + ) { + return [value.content] + } + } + return genExpression(value, context) +}