Allow getMemberValuePath to get data from a TaggedTemplateExpression (#198)

Author: Jmeyering

src/utils/__tests__/getMemberExpressionValuePath-test.js

@@ -62,4 +62,15 @@ describe('getMemberExpressionValuePath', () => {
       expect(getMemberExpressionValuePath(def, 'imComputed')).not.toBeDefined();
     });
   });
+  describe('TaggedTemplateLiteral', () => {
+    it('finds "normal" property definitions', () => {
+      var def = statement(`
+        var Foo = foo\`bar\`
+        Foo.propTypes = {};
+      `);
+
+      expect(getMemberExpressionValuePath(def, 'propTypes'))
+        .toBe(def.parent.get('body', 1, 'expression', 'right'));
+      });
+  });
 });

src/utils/__tests__/getMemberValuePath-test.js

@@ -12,12 +12,14 @@
 
 jest.mock('../getPropertyValuePath');
 jest.mock('../getClassMemberValuePath');
+jest.mock('../getMemberExpressionValuePath');
 
 import {expression, statement} from '../../../tests/utils';
 
 import getPropertyValuePath from '../getPropertyValuePath';
 import getClassMemberValuePath from '../getClassMemberValuePath';
 import getMemberValuePath from '../getMemberValuePath';
+import getMemberExpressionValuePath from '../getMemberExpressionValuePath';
 
 describe('getMemberValuePath', () => {
 
@@ -35,6 +37,13 @@ describe('getMemberValuePath', () => {
     expect(getClassMemberValuePath).toBeCalledWith(path, 'foo');
   });
 
+  it('handles TaggedTemplateLiterals', () => {
+    var path = expression('foo``');
+
+    getMemberValuePath(path, 'foo');
+    expect(getMemberExpressionValuePath).toBeCalledWith(path, 'foo');
+  });
+
   it('handles ClassExpressions', () => {
     var path = expression('class {}');
 

src/utils/getMemberExpressionValuePath.js

@@ -36,7 +36,8 @@ function resolveName(path) {
 
   if (
     types.FunctionExpression.check(path.node) ||
-    types.ArrowFunctionExpression.check(path.node)
+    types.ArrowFunctionExpression.check(path.node) ||
+    types.TaggedTemplateExpression.check(path.node)
   ) {
     if (!types.VariableDeclarator.check(path.parent.node)) {
       return; // eslint-disable-line consistent-return

src/utils/getMemberValuePath.js

@@ -37,6 +37,18 @@ function isSupportedDefinitionType({node}) {
     types.ClassDeclaration.check(node) ||
     types.ClassExpression.check(node) ||
 
+   /**
+    * Adds support for libraries such as
+    * [styled components]{@link https://github.com/styled-components} that use
+    * TaggedTemplateExpression's to generate components.
+    *
+    * While react-docgen's built-in resolvers do not support resolving
+    * TaggedTemplateExpression definitiona, third-party resolvers (such as
+    * https://github.com/Jmeyering/react-docgen-annotation-resolver) could be
+    * used to add these definitions.
+    */
+    types.TaggedTemplateExpression.check(node) ||
+
     // potential stateless function component
     types.VariableDeclaration.check(node) ||
     types.ArrowFunctionExpression.check(node) ||
@@ -65,13 +77,14 @@ export default function getMemberValuePath(
     throw new TypeError(
       'Got unsupported definition type. Definition must be one of ' +
       'ObjectExpression, ClassDeclaration, ClassExpression,' +
-      'VariableDeclaration, ArrowFunctionExpression, FunctionExpression, or ' +
-      'FunctionDeclaration. Got "' + componentDefinition.node.type + '"' +
-      'instead.'
+      'VariableDeclaration, ArrowFunctionExpression, FunctionExpression, ' +
+      'TaggedTemplateExpression or FunctionDeclaration. Got "' +
+      componentDefinition.node.type + '"' + 'instead.'
     );
   }
 
-  var lookupMethod = LOOKUP_METHOD[componentDefinition.node.type];
+  var lookupMethod = LOOKUP_METHOD[componentDefinition.node.type]
+    || getMemberExpressionValuePath;
   var result = lookupMethod(componentDefinition, memberName);
   if (!result && SYNONYMS[memberName]) {
     return lookupMethod(componentDefinition, SYNONYMS[memberName]);