images/babel-plugin-jsx
2
0
Fork 0
mirror of https://github.com/vuejs/babel-plugin-jsx.git synced 2025-01-10 08:19:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: v-model targe value support variable (#331)

Browse Source
This commit is contained in:
Amour1688 2021-03-03 10:23:32 +08:00
parent ec50fddc8a
commit 98b4f92f48
2 changed files with 36 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
packages/babel-plugin-jsx/src/buildProps.ts
View File

@ -81,14 +81,19 @@ const dedupeProperties = (properties: t.ObjectProperty[] = [], mergeProps?: bool
const knownProps = new Map<string, t.ObjectProperty>();
const deduped: t.ObjectProperty[] = [];
properties.forEach((prop) => {
const { value: name } = prop.key as t.StringLiteral;
const existing = knownProps.get(name);
if (existing) {
if (name === 'style' || name === 'class' || name.startsWith('on')) {
mergeAsArray(existing, prop);
if (t.isStringLiteral(prop.key)) {
const { value: name } = prop.key;
const existing = knownProps.get(name);
if (existing) {
if (name === 'style' || name === 'class' || name.startsWith('on')) {
mergeAsArray(existing, prop);
}
} else {
knownProps.set(name, prop);
deduped.push(prop);
}
} else {
knownProps.set(name, prop);
// v-model target with variable
deduped.push(prop);
}
});
@ -235,42 +240,58 @@ const buildProps = (path: NodePath<t.JSXElement>, state: State) => {
if (['models', 'model'].includes(directiveName)) {
values.forEach((value, index) => {
const argVal = (args[index] as t.StringLiteral)?.value;
const propName = argVal || 'modelValue';
const propName = args[index];
// v-model target with variable
const isIdentifierProp = t.isIdentifier(propName);
// must be v-model or v-models and is a component
if (!directive) {
properties.push(
t.objectProperty(t.stringLiteral(propName), value as any),
t.objectProperty(t.isNullLiteral(propName)
? t.stringLiteral('modelValue') : propName, value as any, isIdentifierProp),
);
dynamicPropNames.add(propName);
if (!isIdentifierProp) {
dynamicPropNames.add((propName as t.StringLiteral)?.value || 'modelValue');
}
if (modifiers[index]?.size) {
properties.push(
t.objectProperty(
t.stringLiteral(`${argVal || 'model'}Modifiers`),
isIdentifierProp
? t.binaryExpression('+', propName, t.stringLiteral('Modifiers'))
: t.stringLiteral(`${(propName as t.StringLiteral)?.value || 'model'}Modifiers`),
t.objectExpression(
[...modifiers[index]].map((modifier) => t.objectProperty(
t.stringLiteral(modifier),
t.booleanLiteral(true),
)),
),
isIdentifierProp,
),
);
}
}
const updateName = isIdentifierProp
? t.binaryExpression('+', t.stringLiteral('onUpdate'), propName)
: t.stringLiteral(`onUpdate:${(propName as t.StringLiteral)?.value || 'modelValue'}`);
properties.push(
t.objectProperty(
t.stringLiteral(`onUpdate:${propName}`),
updateName,
t.arrowFunctionExpression(
[t.identifier('$event')],
t.assignmentExpression('=', value as any, t.identifier('$event')),
),
isIdentifierProp,
),
);
dynamicPropNames.add(`onUpdate:${propName}`);
if (!isIdentifierProp) {
dynamicPropNames.add((updateName as t.StringLiteral).value);
} else {
hasDynamicKeys = true;
}
});
}
} else {

4
packages/babel-plugin-jsx/src/parseDirectives.ts
View File

@ -42,7 +42,7 @@ const parseDirectives = (params: {
const {
name, path, value, state, tag, isComponent,
} = params;
const args: Array<t.StringLiteral| t.NullLiteral> = [];
const args: Array<t.StringLiteral | t.Identifier | t.NullLiteral> = [];
const vals: t.Expression[] = [];
const modifiersSet: Set<string>[] = [];
const underscoreModifiers = name.split('_');
@ -77,7 +77,7 @@ const parseDirectives = (params: {
const [first, second, third] = elements;
let modifiers = underscoreModifiers;
if (t.isStringLiteral(second)) {
if (t.isStringLiteral(second) || t.isIdentifier(second)) {
args.push(second);
modifiers = parseModifiers(third as t.ArrayExpression);
} else if (t.isArrayExpression(second)) {