feat: change the syntax for argument and modifiers

Author: nickmessing

Diff for: packages/babel-plugin-transform-vue-jsx/src/index.js

@@ -137,19 +137,19 @@ const parseAttributeJSXAttribute = (t, path, attributes, tagName, elementType) =
   let name
   let modifiers
   let argument
-  /* istanbul ignore else */
-  if (t.isJSXNamespacedName(namePath) && isDirective(namePath.get('namespace.name').node)) {
-    ;[name, argument] = namePath.get('namespace.name').node.split('--')
-    modifiers = namePath.get('name.name').node.split('-')
-  } else if (t.isJSXIdentifier(namePath)) {
-    ;[name, argument] = path.get('name.name').node.split('--')
-    prefix = prefixes.find(el => name.startsWith(el)) || 'attrs'
-    name = name.replace(new RegExp(`^${prefix}\-?`), '')
-    name = name[0].toLowerCase() + name.substr(1)
+  if (t.isJSXNamespacedName(namePath)) {
+    name = `${namePath.get('namespace.name').node}:${namePath.get('name.name').node}`
   } else {
-    throw new Error(`getAttributes (attribute name): ${namePath.type} is not supported`)
+    name = namePath.get('name').node
   }
 
+  ;[name, ...modifiers] = name.split('_')
+  ;[name, argument] = name.split(':')
+
+  prefix = prefixes.find(el => name.startsWith(el)) || 'attrs'
+  name = name.replace(new RegExp(`^${prefix}\-?`), '')
+  name = name[0].toLowerCase() + name.substr(1)
+
   const valuePath = path.get('value')
   let value
   if (!valuePath.node) {
@@ -168,14 +168,15 @@ const parseAttributeJSXAttribute = (t, path, attributes, tagName, elementType) =
     }
   }
 
+  value._argument = argument
+  value._modifiers = modifiers
+
   if (rootAttributes.includes(name)) {
     attributes[name] = value
   } else {
     if (isDirective(name)) {
       name = kebabcase(name.substr(1))
       prefix = 'directives'
-      value._argument = argument
-      value._modifiers = modifiers
     }
     if (name.match(xlinkRE)) {
       name = name.replace(xlinkRE, (_, firstCharacter) => {
@@ -269,7 +270,7 @@ const transformDirectives = (t, directives) =>
         ...(directive.value._argument
           ? [t.objectProperty(t.identifier('arg'), t.stringLiteral(directive.value._argument))]
           : []),
-        ...(directive.value._modifiers
+        ...(directive.value._modifiers && directive.value._modifiers.length > 0
           ? [
               t.objectProperty(
                 t.identifier('modifiers'),

Diff for: packages/babel-plugin-transform-vue-jsx/test/snapshot.js

@@ -215,11 +215,17 @@ render(h => h("div", _mergeJSXProps([{}, spread, {
   },
   {
     name: 'Directives',
-    from: `render(h => <div v-test={ 123 } vOtherStuff--argument:modifier1-modifier2={ 234 } />)`,
+    from: `render(h => <div v-test={ 123 } vSomething_modifier={ 1234 } vOtherStuff:argument_modifier1_modifier2={ 234 } />)`,
     to: `render(h => h("div", {
   "directives": [{
     name: "test",
     value: 123
+  }, {
+    name: "something",
+    value: 1234,
+    modifiers: {
+      "modifier": true
+    }
   }, {
     name: "other-stuff",
     value: 234,
@@ -283,19 +289,6 @@ render(h => h("div", _mergeJSXProps([{}, spread, {
 
 tests.forEach(({ name, from, to }) => test(name, async t => t.is(await transpile(from), to)))
 
-test('JSXNamespacedName attribute name throws error', t =>
-  new Promise(resolve => {
-    transpile(`render(h => <a a:b="test" />)`)
-      .then(() => {
-        t.fail()
-        resolve()
-      })
-      .catch(e => {
-        t.is(e.message, 'getAttributes (attribute name): JSXNamespacedName is not supported')
-        resolve()
-      })
-  }))
-
 test('JSXElement attribute value throws error', t =>
   new Promise(resolve => {
     transpile(`render(h => <a key=<b/> />)`)