From 73e8ec7fc750b6e89d827d9a3e03d1ef6e0bcb55 Mon Sep 17 00:00:00 2001
From: cntchen <cntchen@tencent.com>
Date: Tue, 21 Jan 2020 21:03:41 +0800
Subject: [PATCH 1/3] fix: add support for jsx camel case event binding
---
packages/babel-plugin-transform-vue-jsx/src/index.js | 10 +++++++++-
1 file changed, 9 insertions(+), 1 deletion(-)
diff --git a/packages/babel-plugin-transform-vue-jsx/src/index.js b/packages/babel-plugin-transform-vue-jsx/src/index.js
index e36143a..40688fb 100644
--- a/packages/babel-plugin-transform-vue-jsx/src/index.js
+++ b/packages/babel-plugin-transform-vue-jsx/src/index.js
@@ -166,7 +166,15 @@ const parseAttributeJSXAttribute = (t, path, attributes, tagName, elementType) =
prefix = prefixes.find(el => name.startsWith(el)) || 'attrs'
name = name.replace(new RegExp(`^${prefix}\-?`), '')
- name = name[0].toLowerCase() + name.substr(1)
+
+ // in jsx, event binding use Camel case, such as `onClick`, `onMouseDown`;
+ // in HTML Specification, event binding is all lower case, such as `onclick`, `onmousedown`
+ // so for `on` and `nativeOn` attribute in jsx, transform `name` to all lower case
+ if (prefix === 'on' || prefix === 'nativeOn') {
+ name = name.toLowerCase()
+ } else {
+ name = name[0].toLowerCase() + name.substr(1)
+ }
const valuePath = path.get('value')
let value
From 7ff8f5059db3bf8ff92eb70d2ede348998474cdd Mon Sep 17 00:00:00 2001
From: cntchen <cntchen@tencent.com>
Date: Wed, 22 Jan 2020 11:35:13 +0800
Subject: [PATCH 2/3] fix: custom component attrs prefix on treat as event
---
packages/babel-plugin-transform-vue-jsx/src/index.js | 7 +++++++
1 file changed, 7 insertions(+)
diff --git a/packages/babel-plugin-transform-vue-jsx/src/index.js b/packages/babel-plugin-transform-vue-jsx/src/index.js
index 40688fb..a04ba0c 100644
--- a/packages/babel-plugin-transform-vue-jsx/src/index.js
+++ b/packages/babel-plugin-transform-vue-jsx/src/index.js
@@ -165,6 +165,13 @@ const parseAttributeJSXAttribute = (t, path, attributes, tagName, elementType) =
;[name, argument] = name.split(':')
prefix = prefixes.find(el => name.startsWith(el)) || 'attrs'
+
+ // For custom components(which tag name is not html tag), event binding need to use `nativeOn` but not `on`
+ // `on` prefix should transfrom to `attrs`
+ if (!htmlTags.includes(tagName) && prefix === 'on') {
+ prefix = 'attrs'
+ }
+
name = name.replace(new RegExp(`^${prefix}\-?`), '')
// in jsx, event binding use Camel case, such as `onClick`, `onMouseDown`;
From d1c8bfe3e680450d2ccad2cea821a32fc8dfd161 Mon Sep 17 00:00:00 2001
From: cntchen <cntchen@tencent.com>
Date: Wed, 22 Jan 2020 13:32:38 +0800
Subject: [PATCH 3/3] docs: update comment
---
packages/babel-plugin-transform-vue-jsx/src/index.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/babel-plugin-transform-vue-jsx/src/index.js b/packages/babel-plugin-transform-vue-jsx/src/index.js
index a04ba0c..686d6e8 100644
--- a/packages/babel-plugin-transform-vue-jsx/src/index.js
+++ b/packages/babel-plugin-transform-vue-jsx/src/index.js
@@ -167,7 +167,7 @@ const parseAttributeJSXAttribute = (t, path, attributes, tagName, elementType) =
prefix = prefixes.find(el => name.startsWith(el)) || 'attrs'
// For custom components(which tag name is not html tag), event binding need to use `nativeOn` but not `on`
- // `on` prefix should transfrom to `attrs`
+ // `on` prefix should transform to `attrs`
if (!htmlTags.includes(tagName) && prefix === 'on') {
prefix = 'attrs'
}