images/babel-plugin-jsx
2
0
Fork 0
mirror of https://github.com/vuejs/babel-plugin-jsx.git synced 2024-11-10 09:39:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: model can be v-model argument (#153)

Browse Source
This commit is contained in:
John60676 2020-10-28 22:05:13 +08:00 committed by GitHub
parent 604d53b956
commit cc1d9679dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -235,8 +235,8 @@ const buildProps = (path: NodePath<t.JSXElement>, state: State) => {
if (['models', 'model'].includes(directiveName)) { if (['models', 'model'].includes(directiveName)) {
values.forEach((value, index) => { values.forEach((value, index) => {
const argVal = args[index].value; const argVal = (args[index] as t.StringLiteral)?.value;
const propName = argVal === 'model' ? 'modelValue' : argVal; const propName = argVal || 'modelValue';
// must be v-model or v-models and is a component // must be v-model or v-models and is a component
if (!directive) { if (!directive) {
@ -248,7 +248,7 @@ const buildProps = (path: NodePath<t.JSXElement>, state: State) => {
if (modifiers[index]?.size) { if (modifiers[index]?.size) {
properties.push( properties.push(
t.objectProperty( t.objectProperty(
t.stringLiteral(`${argVal}Modifiers`), t.stringLiteral(`${argVal || 'model'}Modifiers`),
t.objectExpression( t.objectExpression(
[...modifiers[index]].map((modifier) => t.objectProperty( [...modifiers[index]].map((modifier) => t.objectProperty(
t.stringLiteral(modifier), t.stringLiteral(modifier),

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

@ -42,7 +42,7 @@ const parseDirectives = (params: {
const { const {
name, path, value, state, tag, isComponent, name, path, value, state, tag, isComponent,
} = params; } = params;
const args: t.StringLiteral[] = []; const args: Array<t.StringLiteral| t.NullLiteral> = [];
const vals: t.Expression[] = []; const vals: t.Expression[] = [];
const modifiersSet: Set<string>[] = []; const modifiersSet: Set<string>[] = [];
const underscoreModifiers = name.split('_'); const underscoreModifiers = name.split('_');
@ -81,18 +81,18 @@ const parseDirectives = (params: {
args.push(second); args.push(second);
modifiers = parseModifiers(third as t.ArrayExpression); modifiers = parseModifiers(third as t.ArrayExpression);
} else if (t.isArrayExpression(second)) { } else if (t.isArrayExpression(second)) {
args.push(t.stringLiteral('model')); args.push(t.nullLiteral());
modifiers = parseModifiers(second); modifiers = parseModifiers(second);
} else { } else {
// work as v-model={[value]} or v-models={[[value]]} // work as v-model={[value]} or v-models={[[value]]}
args.push(t.stringLiteral('model')); args.push(t.nullLiteral());
} }
modifiersSet.push(new Set(modifiers)); modifiersSet.push(new Set(modifiers));
vals.push(first as t.Expression); vals.push(first as t.Expression);
}); });
} else if (isVModel) { } else if (isVModel) {
// work as v-model={value} // work as v-model={value}
args.push(t.stringLiteral('model')); args.push(t.nullLiteral());
modifiersSet.push(new Set(underscoreModifiers)); modifiersSet.push(new Set(underscoreModifiers));
} }
} else { } else {

8
packages/babel-plugin-jsx/test/__snapshots__/snapshot.test.ts.snap
View File

@ -159,6 +159,14 @@ withDirectives(createVNode(\\"textarea\\", {
}, null, 8, [\\"onUpdate:modelValue\\"]), [[vModelText, test]]);" }, null, 8, [\\"onUpdate:modelValue\\"]), [[vModelText, test]]);"
`; `;
exports[`use "model" as the prop name: use "model" as the prop name 1`] = `
"import { resolveComponent, createVNode } from \\"vue\\";
createVNode(resolveComponent(\\"C\\"), {
\\"model\\": foo,
\\"onUpdate:model\\": $event => foo = $event
}, null, 8, [\\"model\\", \\"onUpdate:model\\"]);"
`;
exports[`v-show: v-show 1`] = ` exports[`v-show: v-show 1`] = `
"import { createTextVNode, vShow, createVNode, withDirectives } from \\"vue\\"; "import { createTextVNode, vShow, createVNode, withDirectives } from \\"vue\\";
withDirectives(createVNode(\\"div\\", null, [createTextVNode(\\"vShow\\")], 512), [[vShow, x]]);" withDirectives(createVNode(\\"div\\", null, [createTextVNode(\\"vShow\\")], 512), [[vShow, x]]);"

4
packages/babel-plugin-jsx/test/snapshot.test.ts
View File

@ -138,6 +138,10 @@ const tests = [
name: 'vModels', name: 'vModels',
from: '<C v-models={[[foo, ["modifier"]], [bar, "bar", ["modifier1", "modifier2"]]]} />', from: '<C v-models={[[foo, ["modifier"]], [bar, "bar", ["modifier1", "modifier2"]]]} />',
}, },
{
name: 'use "model" as the prop name',
from: '<C v-model={[foo, "model"]} />',
},
]; ];
tests.forEach(( tests.forEach((