support arrow with no return statement, support raw function, Do not add data-qa for <Fragment> and <React.Fragment>

Author: Tanapol Nearunchorn

src/index.js

@@ -1,27 +1,63 @@
 import checkValidOptions from './options'
 
-export default function ({ types: t }) {
+function isReactFragment (openingElement) {
+  return (
+    openingElement.node.name.name === 'Fragment' ||
+    (openingElement.node.name.type === 'JSXMemberExpression' &&
+      openingElement.node.name.object.name === 'React' &&
+      openingElement.node.name.property.name === 'Fragment')
+  );
+}
+
+function functionBodyPushAttributes (t, path, options, componentName) {
+  let openingElement = null
+  const functionBody = path.get('body').get('body')
+  if (functionBody.parent && functionBody.parent.type === 'JSXElement') {
+    const jsxElement = functionBody.find((c) => {
+      return c.type === 'JSXElement'
+    })
+    if (!jsxElement) return
+    openingElement = jsxElement.get('openingElement')
+  } else {
+    const returnStatement = functionBody.find((c) => {
+      return c.type === 'ReturnStatement'
+    })
+    if (!returnStatement) return
+
+    const arg = returnStatement.get('argument')
+    if (!arg.isJSXElement()) return
+
+    openingElement = arg.get('openingElement')
+  }
+
+  if (!openingElement) return
+  if (isReactFragment(openingElement)) return
+
+  openingElement.node.attributes.push(
+    t.jSXAttribute(
+      t.jSXIdentifier(options.attribute),
+      t.stringLiteral(options.format(componentName))
+    )
+  )
+}
+
+export default function ({types: t}) {
   return {
     visitor: {
+      FunctionDeclaration (path, state) {
+        if (!path.node.id || !path.node.id.name) return;
+
+        const options = checkValidOptions(state)
+        const componentName = path.node.id.name
+
+        functionBodyPushAttributes(t, path, options, componentName)
+      },
       ArrowFunctionExpression (path, state) {
         const options = checkValidOptions(state)
         if (!path.parent.id || !path.parent.id.name) return
         const componentName = path.parent.id.name
 
-        const functionBody = path.get('body').get('body')
-        const returnStatement = functionBody.find(
-          c => c.type === 'ReturnStatement'
-        )
-        const arg = returnStatement.get('argument')
-        if (!arg.isJSXElement()) return
-
-        let openingElement = arg.get('openingElement')
-        openingElement.node.attributes.push(
-          t.jSXAttribute(
-            t.jSXIdentifier(options.attribute),
-            t.stringLiteral(options.format(componentName))
-          )
-        )
+        functionBodyPushAttributes(t, path, options, componentName)
       },
       ClassDeclaration (path, state) {
         let name = path.get('id')
@@ -45,7 +81,9 @@ export default function ({ types: t }) {
             const arg = returnStatement.get('argument')
             if (!arg.isJSXElement()) return
 
-            let openingElement = arg.get('openingElement')
+            const openingElement = arg.get('openingElement')
+            if (isReactFragment(openingElement)) return
+
             openingElement.node.attributes.push(
               t.jSXAttribute(
                 t.jSXIdentifier(options.attribute),

test/fixtures/react/arrow-anonymous-fragment/actual.js

@@ -0,0 +1,9 @@
+import React, { Component, Fragment } from 'react';
+
+const componentName = () => {
+  return (() => <Fragment>
+    <h1>Hello world</h1>
+  </Fragment>)();
+};
+
+export default componentName;

test/fixtures/react/arrow-anonymous-fragment/expected.js

@@ -0,0 +1,9 @@
+import React, { Component, Fragment } from 'react';
+
+const componentName = () => {
+  return (() => <Fragment>
+    <h1>Hello world</h1>
+  </Fragment>)();
+};
+
+export default componentName;

test/fixtures/react/arrow-anonymous-fragment/options.json

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+      "syntax-jsx",
+      ["../../../../src"]
+  ]
+}

test/fixtures/react/arrow-anonymous-react-fragment/actual.js

@@ -0,0 +1,9 @@
+import React, { Component } from 'react';
+
+const componentName = () => {
+  return (() => <React.Fragment>
+    <h1>Hello world</h1>
+  </React.Fragment>)();
+};
+
+export default componentName;

test/fixtures/react/arrow-anonymous-react-fragment/expected.js

@@ -0,0 +1,9 @@
+import React, { Component } from 'react';
+
+const componentName = () => {
+  return (() => <React.Fragment>
+    <h1>Hello world</h1>
+  </React.Fragment>)();
+};
+
+export default componentName;

test/fixtures/react/arrow-anonymous-react-fragment/options.json

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+      "syntax-jsx",
+      ["../../../../src"]
+  ]
+}

test/fixtures/react/arrow-fragment/actual.js

@@ -0,0 +1,9 @@
+import React, { Component, Fragment } from 'react';
+
+const componentName = () => {
+  return <Fragment>
+    <h1>Hello world</h1>
+  </Fragment>;
+};
+
+export default componentName;

test/fixtures/react/arrow-fragment/expected.js

@@ -0,0 +1,9 @@
+import React, { Component, Fragment } from 'react';
+
+const componentName = () => {
+  return <Fragment>
+    <h1>Hello world</h1>
+  </Fragment>;
+};
+
+export default componentName;

test/fixtures/react/arrow-fragment/options.json

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+      "syntax-jsx",
+      ["../../../../src"]
+  ]
+}