feat(mutliparser): add react-relay and graphql-tag parsing (#2092)

src/clean-ast.js

@@ -149,10 +149,12 @@ function massageAST(ast) {
 
       quasis.forEach(q => delete q.value);
     }
-    // styled-components
+    // styled-components and graphql
     if (
       ast.type === "TaggedTemplateExpression" &&
-      ast.tag.type === "MemberExpression"
+      (ast.tag.type === "MemberExpression" ||
+        (ast.tag.type === "Identifier" &&
+          (ast.tag.name === "gql" || ast.tag.name === "graphql")))
     ) {
       newObj.quasi.quasis.forEach(quasi => delete quasi.value);
     }

src/multiparser.js

@@ -83,6 +83,29 @@ function fromBabylonFlowOrTypeScript(path) {
         };
       }
 
+      /*
+       * react-relay and graphql-tag
+       * graphql`...`
+       * gql`...`
+       */
+      if (
+        parentParent &&
+        parentParent.type === "TaggedTemplateExpression" &&
+        parent.quasis.length === 1 &&
+        // ((parentParent.tag.type === "MemberExpression" &&
+        //   parentParent.tag.object.name === "Relay" &&
+        //   parentParent.tag.property.name === "QL") ||
+        (parentParent.tag.type === "Identifier" &&
+          (parentParent.tag.name === "gql" ||
+            parentParent.tag.name === "graphql"))
+      ) {
+        return {
+          parser: "graphql",
+          wrap: doc => concat([indent(concat([softline, doc])), softline]),
+          text: parent.quasis[0].value.raw
+        };
+      }
+
       break;
     }
   }

tests/multiparser_js_graphql/__snapshots__/jsfmt.spec.js.snap

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`graphql-tag.js 1`] = `
+import gql from "graphql-tag";
+
+const query = gql\`
+      {
+    user(   id :   5  )  {
+      firstName
+
+      lastName
+    }
+  }
+\`;
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+import gql from "graphql-tag";
+
+const query = gql\`
+  {
+    user(id: 5) {
+      firstName
+      lastName
+    }
+  }
+\`;
+
+`;
+
+exports[`react-relay.js 1`] = `
+const { graphql } = require("react-relay");
+
+graphql\`
+ mutation     MarkReadNotificationMutation(
+    $input
+    : MarkReadNotificationData!
+  )
+{ markReadNotification(data: $input ) { notification {seenState} } }
+\`;
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+const { graphql } = require("react-relay");
+
+graphql\`
+  mutation MarkReadNotificationMutation($input: MarkReadNotificationData!) {
+    markReadNotification(data: $input) {
+      notification {
+        seenState
+      }
+    }
+  }
+\`;
+
+`;

tests/multiparser_js_graphql/graphql-tag.js

@@ -0,0 +1,11 @@
+import gql from "graphql-tag";
+
+const query = gql`
+      {
+    user(   id :   5  )  {
+      firstName
+
+      lastName
+    }
+  }
+`;

tests/multiparser_js_graphql/jsfmt.spec.js

@@ -0,0 +1 @@
+run_spec(__dirname, { parser: "babylon" });

tests/multiparser_js_graphql/react-relay.js

@@ -0,0 +1,9 @@
+const { graphql } = require("react-relay");
+
+graphql`
+ mutation     MarkReadNotificationMutation(
+    $input
+    : MarkReadNotificationData!
+  )
+{ markReadNotification(data: $input ) { notification {seenState} } }
+`;