From d352b5849f0767a99ba32119bbc1cae699179e3b Mon Sep 17 00:00:00 2001
From: zhiyuanzmj <32807958+zhiyuanzmj@users.noreply.github.com>
Date: Sat, 13 Jan 2024 02:56:44 +0800
Subject: [PATCH] fix(plugin-jsx): v-model argument and modifier co-usage
 (#668)

---
 packages/babel-plugin-jsx/README-zh_CN.md     |  4 ++
 packages/babel-plugin-jsx/README.md           |  4 ++
 .../babel-plugin-jsx/src/parseDirectives.ts   |  2 +-
 .../babel-plugin-jsx/test/v-model.test.tsx    | 45 +++++++++++++++++++
 4 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/packages/babel-plugin-jsx/README-zh_CN.md b/packages/babel-plugin-jsx/README-zh_CN.md
index cb8c2314..0cbeaa5d 100644
--- a/packages/babel-plugin-jsx/README-zh_CN.md
+++ b/packages/babel-plugin-jsx/README-zh_CN.md
@@ -162,10 +162,14 @@ const App = {
 
 ```jsx
 <input v-model={[val, ['modifier']]} />
+// 或者
+<input v-model_modifier={val} />
 ```
 
 ```jsx
 <A v-model={[val, 'argument', ['modifier']]} />
+// 或者
+<input v-model:argument_modifier={val} />
 ```
 
 会编译成：
diff --git a/packages/babel-plugin-jsx/README.md b/packages/babel-plugin-jsx/README.md
index 7e7ddb69..a67ea457 100644
--- a/packages/babel-plugin-jsx/README.md
+++ b/packages/babel-plugin-jsx/README.md
@@ -166,10 +166,14 @@ const App = {
 
 ```jsx
 <input v-model={[val, ['modifier']]} />
+// Or
+<input v-model_modifier={val} />
 ```
 
 ```jsx
 <A v-model={[val, 'argument', ['modifier']]} />
+// Or
+<input v-model:argument_modifier={val} />
 ```
 
 Will compile to:
diff --git a/packages/babel-plugin-jsx/src/parseDirectives.ts b/packages/babel-plugin-jsx/src/parseDirectives.ts
index d6e5b9de..3395ab99 100644
--- a/packages/babel-plugin-jsx/src/parseDirectives.ts
+++ b/packages/babel-plugin-jsx/src/parseDirectives.ts
@@ -67,7 +67,7 @@ const parseDirectives = (params: {
     .replace(/^\S/, (s: string) => s.toLowerCase());
 
   if (directiveArgument) {
-    args.push(t.stringLiteral(directiveArgument));
+    args.push(t.stringLiteral(directiveArgument.split('_')[0]));
   }
 
   const isVModels = directiveName === 'models';
diff --git a/packages/babel-plugin-jsx/test/v-model.test.tsx b/packages/babel-plugin-jsx/test/v-model.test.tsx
index 2b7b9022..32880111 100644
--- a/packages/babel-plugin-jsx/test/v-model.test.tsx
+++ b/packages/babel-plugin-jsx/test/v-model.test.tsx
@@ -286,3 +286,48 @@ test('Named model', async () => {
   await wrapper.trigger('click');
   expect(wrapper.html()).toBe('<div>2</div>');
 });
+
+test('named model and underscore modifier should work in custom component', async () => {
+  const Child = defineComponent({
+    emits: ['update:value'],
+    props: {
+      value: {
+        type: Number,
+        default: 0,
+      },
+      valueModifiers: {
+        default: () => ({ double: false }),
+      },
+    },
+    setup(props, { emit }) {
+      const handleClick = () => {
+        emit('update:value', 3);
+      };
+      return () => (
+        <div onClick={handleClick}>
+          {props.valueModifiers.double ? props.value * 2 : props.value}
+        </div>
+      );
+    },
+  });
+
+  const wrapper = mount(
+    defineComponent({
+      data() {
+        return {
+          foo: 1,
+        };
+      },
+      render() {
+        return <Child v-model:value_double={this.foo} />;
+      },
+    })
+  );
+
+  expect(wrapper.html()).toBe('<div>2</div>');
+  wrapper.vm.$data.foo += 1;
+  await wrapper.vm.$nextTick();
+  expect(wrapper.html()).toBe('<div>4</div>');
+  await wrapper.trigger('click');
+  expect(wrapper.html()).toBe('<div>6</div>');
+});