fix: Support props with underscore, close #55

vuejs · May 8, 2019 · 852481c · 852481c
1 parent ef44334
commit 852481c
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/packages/babel-plugin-transform-vue-jsx/src/index.js b/packages/babel-plugin-transform-vue-jsx/src/index.js
@@ -163,7 +163,7 @@ const parseAttributeJSXAttribute = (t, path, attributes, tagName, elementType) =
   }
 
   ;[name, ...modifiers] = name.split('_')
-  ;[name, argument] = name.split(':')
+    ;[name, argument] = name.split(':')
 
   prefix = prefixes.find(el => name.startsWith(el)) || 'attrs'
   name = name.replace(new RegExp(`^${prefix}\-?`), '')
@@ -196,6 +196,8 @@ const parseAttributeJSXAttribute = (t, path, attributes, tagName, elementType) =
     if (isDirective(name)) {
       name = kebabcase(name.substr(1))
       prefix = 'directives'
+    } else {
+      name = [name, ...modifiers].join('_')
     }
     if (name.match(xlinkRE)) {
       name = name.replace(xlinkRE, (_, firstCharacter) => {
@@ -299,15 +301,15 @@ const transformDirectives = (t, directives) =>
           : []),
         ...(directive.value._modifiers && directive.value._modifiers.length > 0
           ? [
-              t.objectProperty(
-                t.identifier('modifiers'),
-                t.objectExpression(
-                  directive.value._modifiers.map(modifier =>
-                    t.objectProperty(t.stringLiteral(modifier), t.booleanLiteral(true)),
-                  ),
+            t.objectProperty(
+              t.identifier('modifiers'),
+              t.objectExpression(
+                directive.value._modifiers.map(modifier =>
+                  t.objectProperty(t.stringLiteral(modifier), t.booleanLiteral(true)),
                 ),
               ),
-            ]
+            ),
+          ]
           : []),
       ]),
     ),

diff --git a/packages/babel-plugin-transform-vue-jsx/test/snapshot.js b/packages/babel-plugin-transform-vue-jsx/test/snapshot.js
@@ -329,6 +329,16 @@ h("MyComponent", _mergeJSXProps([{
     name: 'JSX comments',
     from: `<div><p>jsx</p>{/* <p>comment</p> */}</div>`,
     to: `h("div", [h("p", ["jsx"])]);`
+  },
+  {
+    name: 'Underscore Props',
+    from: `const MyComp = {}; render(h => <MyComponent attrs-my_prop="test">test</MyComponent>)`,
+    to: `const MyComp = {};
+render(h => h("MyComponent", {
+  "attrs": {
+    "my_prop": "test"
+  }
+}, ["test"]));`,
   }
 ]