Merge pull request #7 from nickmessing/feat/support-argument-and-modifiers

feat: add support for argument and modifiers for directives

Author: nickmessing

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,16 +135,21 @@ const parseAttributeJSXAttribute = (t, path, attributes, tagName, elementType) =
   const namePath = path.get('name')
   let prefix
   let name
-  /* istanbul ignore else */
-  if (t.isJSXIdentifier(namePath)) {
-    name = path.get('name.name').node
-    prefix = prefixes.find(el => name.startsWith(el)) || 'attrs'
-    name = name.replace(new RegExp(`^${prefix}\-?`), '')
-    name = name[0].toLowerCase() + name.substr(1)
+  let modifiers
+  let argument
+  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) {
@@ -156,13 +168,13 @@ const parseAttributeJSXAttribute = (t, path, attributes, tagName, elementType) =
     }
   }
 
+  value._argument = argument
+  value._modifiers = modifiers
+
   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'
     }
@@ -255,6 +267,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 && 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)),
+                  ),
+                ),
+              ),
+            ]
+          : []),
       ]),
     ),
   )

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

@@ -215,14 +215,25 @@ render(h => h("div", _mergeJSXProps([{}, spread, {
   },
   {
     name: 'Directives',
-    from: `render(h => <div v-test={ 123 } vOtherStuff={ 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
+    value: 234,
+    arg: "argument",
+    modifiers: {
+      "modifier1": true,
+      "modifier2": true
+    }
   }]
 }));`,
   },
@@ -278,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/> />)`)