feat: add support for argument and modifiers for directives

Author: nickmessing

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

@@ -24,6 +24,13 @@ const mustUseDomProps = (tag, type, attributeName) => {
   )
 }
 
+/**
+ * Checks if string is describing a directive
+ * @param src string
+ */
+const isDirective = src =>
+  src.startsWith(`v-`) || (src.startsWith('v') && src.length >= 2 && src[1] >= 'A' && src[1] <= 'Z')
+
 /**
  * Get tag (first attribute for h) from JSXOpeningElement
  * @param t
@@ -128,9 +135,14 @@ const parseAttributeJSXAttribute = (t, path, attributes, tagName, elementType) =
   const namePath = path.get('name')
   let prefix
   let name
+  let modifiers
+  let argument
   /* istanbul ignore else */
-  if (t.isJSXIdentifier(namePath)) {
-    name = path.get('name.name').node
+  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)
@@ -159,12 +171,11 @@ const parseAttributeJSXAttribute = (t, path, attributes, tagName, elementType) =
   if (rootAttributes.includes(name)) {
     attributes[name] = value
   } else {
-    if (name.startsWith(`v-`)) {
-      name = name.replace(directiveRE, '')
-      prefix = 'directives'
-    } else if (name.startsWith('v') && name.length >= 2 && name[1] >= 'A' && name[1] <= 'Z') {
+    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) => {
@@ -255,6 +266,21 @@ const transformDirectives = (t, directives) =>
       t.objectExpression([
         t.objectProperty(t.identifier('name'), directive.key),
         t.objectProperty(t.identifier('value'), directive.value),
+        ...(directive.value._argument
+          ? [t.objectProperty(t.identifier('arg'), t.stringLiteral(directive.value._argument))]
+          : []),
+        ...(directive.value._modifiers
+          ? [
+              t.objectProperty(
+                t.identifier('modifiers'),
+                t.objectExpression(
+                  directive.value._modifiers.map(modifier =>
+                    t.objectProperty(t.stringLiteral(modifier), t.booleanLiteral(true)),
+                  ),
+                ),
+              ),
+            ]
+          : []),
       ]),
     ),
   )

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

@@ -215,14 +215,19 @@ render(h => h("div", _mergeJSXProps([{}, spread, {
   },
   {
     name: 'Directives',
-    from: `render(h => <div v-test={ 123 } vOtherStuff={ 234 } />)`,
+    from: `render(h => <div v-test={ 123 } vOtherStuff--argument:modifier1-modifier2={ 234 } />)`,
     to: `render(h => h("div", {
   "directives": [{
     name: "test",
     value: 123
   }, {
     name: "other-stuff",
-    value: 234
+    value: 234,
+    arg: "argument",
+    modifiers: {
+      "modifier1": true,
+      "modifier2": true
+    }
   }]
 }));`,
   },