Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(compiler): fix template ref codegen for setup-maybe-ref binding t…
…ypes (#4549)

fix #4546
  • Loading branch information
ygj6 committed Sep 16, 2021
1 parent 14fcced commit f29d061
Show file tree
Hide file tree
Showing 2 changed files with 95 additions and 6 deletions.
Expand Up @@ -1004,6 +1004,81 @@ describe('compiler: element transform', () => {
})
})

test('the binding not exists (inline maybe ref input)', () => {
const { node } = parseWithElementTransform(`<input ref="input"/>`, {
inline: true,
bindingMetadata: {
input: BindingTypes.SETUP_MAYBE_REF
}
})
expect(node.props).toMatchObject({
type: NodeTypes.JS_OBJECT_EXPRESSION,
properties: [
{
type: NodeTypes.JS_PROPERTY,
key: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: 'ref',
isStatic: true
},
value: {
type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: ['_value', '_refs'],
body: {
type: NodeTypes.JS_BLOCK_STATEMENT,
body: [
{
content: `_refs['input'] = _value`
},
{
content: '_isRef(input) && (input.value = _value)'
}
]
}
}
}
]
})
})

test('the binding not exists (inline let ref input)', () => {
const { node } = parseWithElementTransform(`<input ref="input"/>`, {
inline: true,
bindingMetadata: {
input: BindingTypes.SETUP_LET
}
})
expect(node.props).toMatchObject({
type: NodeTypes.JS_OBJECT_EXPRESSION,
properties: [
{
type: NodeTypes.JS_PROPERTY,
key: {
type: NodeTypes.SIMPLE_EXPRESSION,
content: 'ref',
isStatic: true
},
value: {
type: NodeTypes.JS_FUNCTION_EXPRESSION,
params: ['_value', '_refs'],
body: {
type: NodeTypes.JS_BLOCK_STATEMENT,
body: [
{
content: `_refs['input'] = _value`
},
{
content:
'_isRef(input) ? input.value = _value : input = _value'
}
]
}
}
}
]
})
})

test('HYDRATE_EVENTS', () => {
// ignore click events (has dedicated fast path)
const { node } = parseWithElementTransform(`<div @click="foo" />`, {
Expand Down
26 changes: 20 additions & 6 deletions packages/compiler-core/src/transforms/transformElement.ts
Expand Up @@ -48,7 +48,8 @@ import {
KEEP_ALIVE,
SUSPENSE,
UNREF,
GUARD_REACTIVE_PROPS
GUARD_REACTIVE_PROPS,
IS_REF
} from '../runtimeHelpers'
import {
getInnerRange,
Expand All @@ -61,7 +62,7 @@ import {
} from '../utils'
import { buildSlots } from './vSlot'
import { getConstantType } from './hoistStatic'
import { BindingMetadata, BindingTypes } from '../options'
import { BindingTypes } from '../options'
import {
checkCompatEnabled,
CompilerDeprecationTypes,
Expand Down Expand Up @@ -475,7 +476,7 @@ export function buildProps(
if (!__BROWSER__ && context.inline && value?.content) {
valueNode = createFunctionExpression(['_value', '_refs'])
valueNode.body = createBlockStatement(
processInlineRef(context.bindingMetadata, value.content)
processInlineRef(context, value.content)
)
}
}
Expand Down Expand Up @@ -894,15 +895,28 @@ function isComponentTag(tag: string) {
}

function processInlineRef(
bindings: BindingMetadata,
context: TransformContext,
raw: string
): JSChildNode[] {
const body = [createSimpleExpression(`_refs['${raw}'] = _value`)]
const type = bindings[raw]
const { bindingMetadata, helperString } = context
const type = bindingMetadata[raw]
if (type === BindingTypes.SETUP_REF) {
body.push(createSimpleExpression(`${raw}.value = _value`))
} else if (type === BindingTypes.SETUP_MAYBE_REF) {
body.push(
createSimpleExpression(
`${helperString(IS_REF)}(${raw}) && (${raw}.value = _value)`
)
)
} else if (type === BindingTypes.SETUP_LET) {
body.push(createSimpleExpression(`${raw} = _value`))
body.push(
createSimpleExpression(
`${helperString(
IS_REF
)}(${raw}) ? ${raw}.value = _value : ${raw} = _value`
)
)
}
return body
}

0 comments on commit f29d061

Please sign in to comment.