1c7d737cc8
Also allows render function usage like the following:
```js
h({
'.prop': 1, // force set as property
'^attr': 'foo' // force set as attribute
})
```
75 lines
2.0 KiB
TypeScript
75 lines
2.0 KiB
TypeScript
import { DirectiveTransform } from '../transform'
|
|
import {
|
|
createObjectProperty,
|
|
createSimpleExpression,
|
|
ExpressionNode,
|
|
NodeTypes
|
|
} from '../ast'
|
|
import { createCompilerError, ErrorCodes } from '../errors'
|
|
import { camelize } from '@vue/shared'
|
|
import { CAMELIZE } from '../runtimeHelpers'
|
|
|
|
// v-bind without arg is handled directly in ./transformElements.ts due to it affecting
|
|
// codegen for the entire props object. This transform here is only for v-bind
|
|
// *with* args.
|
|
export const transformBind: DirectiveTransform = (dir, _node, context) => {
|
|
const { exp, modifiers, loc } = dir
|
|
const arg = dir.arg!
|
|
|
|
if (arg.type !== NodeTypes.SIMPLE_EXPRESSION) {
|
|
arg.children.unshift(`(`)
|
|
arg.children.push(`) || ""`)
|
|
} else if (!arg.isStatic) {
|
|
arg.content = `${arg.content} || ""`
|
|
}
|
|
|
|
// .sync is replaced by v-model:arg
|
|
if (modifiers.includes('camel')) {
|
|
if (arg.type === NodeTypes.SIMPLE_EXPRESSION) {
|
|
if (arg.isStatic) {
|
|
arg.content = camelize(arg.content)
|
|
} else {
|
|
arg.content = `${context.helperString(CAMELIZE)}(${arg.content})`
|
|
}
|
|
} else {
|
|
arg.children.unshift(`${context.helperString(CAMELIZE)}(`)
|
|
arg.children.push(`)`)
|
|
}
|
|
}
|
|
|
|
if (modifiers.includes('prop')) {
|
|
injectPrefix(arg, '.')
|
|
}
|
|
|
|
if (modifiers.includes('attr')) {
|
|
injectPrefix(arg, '^')
|
|
}
|
|
|
|
if (
|
|
!exp ||
|
|
(exp.type === NodeTypes.SIMPLE_EXPRESSION && !exp.content.trim())
|
|
) {
|
|
context.onError(createCompilerError(ErrorCodes.X_V_BIND_NO_EXPRESSION, loc))
|
|
return {
|
|
props: [createObjectProperty(arg!, createSimpleExpression('', true, loc))]
|
|
}
|
|
}
|
|
|
|
return {
|
|
props: [createObjectProperty(arg!, exp)]
|
|
}
|
|
}
|
|
|
|
const injectPrefix = (arg: ExpressionNode, prefix: string) => {
|
|
if (arg.type === NodeTypes.SIMPLE_EXPRESSION) {
|
|
if (arg.isStatic) {
|
|
arg.content = prefix + arg.content
|
|
} else {
|
|
arg.content = `\`${prefix}\${${arg.content}}\``
|
|
}
|
|
} else {
|
|
arg.children.unshift(`'${prefix}' + (`)
|
|
arg.children.push(`)`)
|
|
}
|
|
}
|