From cc1d9679dcc0a9847dd8527f2229dedda00dd2e7 Mon Sep 17 00:00:00 2001
From: John60676 <John60676@qq.com>
Date: Wed, 28 Oct 2020 22:05:13 +0800
Subject: [PATCH] fix: `model` can be v-model argument (#153)

---
 packages/babel-plugin-jsx/src/buildProps.ts               | 6 +++---
 packages/babel-plugin-jsx/src/parseDirectives.ts          | 8 ++++----
 .../test/__snapshots__/snapshot.test.ts.snap              | 8 ++++++++
 packages/babel-plugin-jsx/test/snapshot.test.ts           | 4 ++++
 4 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/babel-plugin-jsx/src/buildProps.ts b/packages/babel-plugin-jsx/src/buildProps.ts
index 790f2de..3d68f18 100644
--- a/packages/babel-plugin-jsx/src/buildProps.ts
+++ b/packages/babel-plugin-jsx/src/buildProps.ts
@@ -235,8 +235,8 @@ const buildProps = (path: NodePath<t.JSXElement>, state: State) => {
 
           if (['models', 'model'].includes(directiveName)) {
             values.forEach((value, index) => {
-              const argVal = args[index].value;
-              const propName = argVal === 'model' ? 'modelValue' : argVal;
+              const argVal = (args[index] as t.StringLiteral)?.value;
+              const propName = argVal || 'modelValue';
 
               // must be v-model or v-models and is a component
               if (!directive) {
@@ -248,7 +248,7 @@ const buildProps = (path: NodePath<t.JSXElement>, state: State) => {
                 if (modifiers[index]?.size) {
                   properties.push(
                     t.objectProperty(
-                      t.stringLiteral(`${argVal}Modifiers`),
+                      t.stringLiteral(`${argVal || 'model'}Modifiers`),
                       t.objectExpression(
                         [...modifiers[index]].map((modifier) => t.objectProperty(
                           t.stringLiteral(modifier),
diff --git a/packages/babel-plugin-jsx/src/parseDirectives.ts b/packages/babel-plugin-jsx/src/parseDirectives.ts
index f6850ec..59ecf73 100644
--- a/packages/babel-plugin-jsx/src/parseDirectives.ts
+++ b/packages/babel-plugin-jsx/src/parseDirectives.ts
@@ -42,7 +42,7 @@ const parseDirectives = (params: {
   const {
     name, path, value, state, tag, isComponent,
   } = params;
-  const args: t.StringLiteral[] = [];
+  const args: Array<t.StringLiteral| t.NullLiteral> = [];
   const vals: t.Expression[] = [];
   const modifiersSet: Set<string>[] = [];
   const underscoreModifiers = name.split('_');
@@ -81,18 +81,18 @@ const parseDirectives = (params: {
           args.push(second);
           modifiers = parseModifiers(third as t.ArrayExpression);
         } else if (t.isArrayExpression(second)) {
-          args.push(t.stringLiteral('model'));
+          args.push(t.nullLiteral());
           modifiers = parseModifiers(second);
         } else {
           // work as v-model={[value]} or v-models={[[value]]}
-          args.push(t.stringLiteral('model'));
+          args.push(t.nullLiteral());
         }
         modifiersSet.push(new Set(modifiers));
         vals.push(first as t.Expression);
       });
     } else if (isVModel) {
       // work as v-model={value}
-      args.push(t.stringLiteral('model'));
+      args.push(t.nullLiteral());
       modifiersSet.push(new Set(underscoreModifiers));
     }
   } else {
diff --git a/packages/babel-plugin-jsx/test/__snapshots__/snapshot.test.ts.snap b/packages/babel-plugin-jsx/test/__snapshots__/snapshot.test.ts.snap
index f68fe83..862b1fd 100644
--- a/packages/babel-plugin-jsx/test/__snapshots__/snapshot.test.ts.snap
+++ b/packages/babel-plugin-jsx/test/__snapshots__/snapshot.test.ts.snap
@@ -159,6 +159,14 @@ withDirectives(createVNode(\\"textarea\\", {
 }, 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`] = `
 "import { createTextVNode, vShow, createVNode, withDirectives } from \\"vue\\";
 withDirectives(createVNode(\\"div\\", null, [createTextVNode(\\"vShow\\")], 512), [[vShow, x]]);"
diff --git a/packages/babel-plugin-jsx/test/snapshot.test.ts b/packages/babel-plugin-jsx/test/snapshot.test.ts
index b774c6d..60abfca 100644
--- a/packages/babel-plugin-jsx/test/snapshot.test.ts
+++ b/packages/babel-plugin-jsx/test/snapshot.test.ts
@@ -138,6 +138,10 @@ const tests = [
     name: 'vModels',
     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((