Initial pass at pure function component implementation. Update multip…

…le functions to include parent in order to extract the identifier from Arrow Function Expressions. Include multiple checks to Arrow Function expressions to modify output of wrapComponent. Update expected test case for pure components.
joshblack · Sep 30, 2015 · 0f9a777 · 0f9a777
1 parent 6243f35
commit 0f9a777
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 14 deletions.
diff --git a/src/index.js b/src/index.js
@@ -91,10 +91,13 @@ export default function ({ Plugin, types: t }) {
   /**
    * Infers a displayName from either a class node, or a createClass() call node.
    */
-  function findDisplayName(node) {
+  function findDisplayName(node, parent) {
     if (node.id) {
       return node.id.name;
     }
+    if (t.isArrowFunctionExpression(node) && t.isVariableDeclarator(parent)) {
+      return parent.id.name;
+    }
     if (!node.arguments) {
       return;
     }
@@ -159,8 +162,8 @@ export default function ({ Plugin, types: t }) {
    * Creates a record about us having visited a valid React component.
    * Such records will later be merged into a single object.
    */
-  function createComponentRecord(node, scope, file, state) {
-    const displayName = findDisplayName(node) || undefined;
+  function createComponentRecord(node, parent, scope, file, state) {
+    const displayName = findDisplayName(node, parent) || undefined;
     const uniqueId = scope.generateUidIdentifier(
       '$' + (displayName || 'Unknown')
     ).name;
@@ -192,8 +195,8 @@ export default function ({ Plugin, types: t }) {
    * Memorizes the fact that we have visited a valid component in the plugin state.
    * We will later retrieve memorized records to compose an object out of them.
    */
-  function addComponentRecord(node, scope, file, state) {
-    const [uniqueId, definition] = createComponentRecord(node, scope, file, state);
+  function addComponentRecord(node, parent, scope, file, state) {
+    const [uniqueId, definition] = createComponentRecord(node, parent, scope, file, state);
     state[recordsKey] = state[recordsKey] || [];
     state[recordsKey].push(t.property('init',
       t.identifier(uniqueId),
@@ -308,9 +311,16 @@ export default function ({ Plugin, types: t }) {
           delete this.state[foundJSXKey];
 
           const wrapReactComponentId = this.state[wrapComponentIdKey];
-          const uniqueId = addComponentRecord(node, scope, file, this.state);
+          const uniqueId = addComponentRecord(node, parent, scope, file, this.state);
           const bindingId = node.id;
 
+          if (t.isArrowFunctionExpression(node) && t.isVariableDeclarator(parent)) {
+            return t.callExpression(
+              t.callExpression(wrapReactComponentId, [t.literal(uniqueId)]),
+              [node]
+            );
+          }
+
           return [
             node,
             t.assignmentExpression('=', bindingId,
@@ -329,7 +339,7 @@ export default function ({ Plugin, types: t }) {
         }
 
         const wrapReactComponentId = this.state[wrapComponentIdKey];
-        const uniqueId = addComponentRecord(node, scope, file, this.state);
+        const uniqueId = addComponentRecord(node, parent, scope, file, this.state);
 
         node.decorators = node.decorators || [];
         node.decorators.push(t.decorator(
@@ -345,7 +355,7 @@ export default function ({ Plugin, types: t }) {
           }
 
           const wrapReactComponentId = this.state[wrapComponentIdKey];
-          const uniqueId = addComponentRecord(node, scope, file, this.state);
+          const uniqueId = addComponentRecord(node, parent, scope, file, this.state);
 
           return t.callExpression(
             t.callExpression(wrapReactComponentId, [t.literal(uniqueId)]),

diff --git a/test/fixtures/pure/expected.js b/test/fixtures/pure/expected.js
@@ -16,6 +16,14 @@ var _components = {
   _$A: {
     displayName: 'A',
     isFunction: true
+  },
+  _$B: {
+    displayName: 'B',
+    isFunction: true
+  },
+  _$C: {
+    displayName: 'C',
+    isFunction: true
   }
 };
 
@@ -44,10 +52,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'd
 function A() {
   return _react2['default'].createElement('div', null);
 }
-A = _wrapComponent('_$A')(A)
 
-function B() {
-  function C() {
-    return _react2['default'].createElement('div', null);
-  }
-}
+A = _wrapComponent('_$A')(A)
+var B = _wrapComponent('_$B')(function () {
+  return _react2['default'].createElement('div', null);
+});
+var C = _wrapComponent('_$C')(function () {
+  return _react2['default'].createElement('div', null);
+});