feat(formatting) add FunctionTreeNode

Author: Gabriela Seabra

src/formatter/formatTreeNode.js

@@ -2,6 +2,7 @@
 
 import formatReactElementNode from './formatReactElementNode';
 import formatReactFragmentNode from './formatReactFragmentNode';
+import formatFunction from './formatFunction';
 import type { Options } from './../options';
 import type { TreeNode } from './../tree';
 
@@ -46,6 +47,10 @@ export default (
       : '';
   }
 
+  if (node.type === 'function') {
+    return `{${formatFunction(node.value, options)}}`;
+  }
+
   if (node.type === 'ReactElement') {
     return formatReactElementNode(node, inline, lvl, options);
   }

src/formatter/formatTreeNode.spec.js

@@ -19,6 +19,25 @@ describe('formatTreeNode', () => {
     );
   });
 
+  it('should format function tree node', () => {
+    function fun(a) {
+      return a + 1;
+    }
+    expect(
+      formatTreeNode(
+        {
+          type: 'function',
+          value: fun,
+        },
+        true,
+        0,
+        {
+          showFunctions: true,
+        }
+      )
+    ).toBe('{function fun(a) {return a + 1;}}');
+  });
+
   it('should format react element tree node', () => {
     expect(
       formatTreeNode(

src/parser/parseReactElement.js

@@ -5,6 +5,7 @@ import type { Options } from './../options';
 import {
   createStringTreeNode,
   createNumberTreeNode,
+  createFunctionTreeNode,
   createReactElementTreeNode,
   createReactFragmentTreeNode,
 } from './../tree';
@@ -67,9 +68,15 @@ const parseReactElement = (
   }
 
   const defaultProps = filterProps(element.type.defaultProps || {}, noChildren);
-  const childrens = React.Children.toArray(element.props.children)
-    .filter(onlyMeaningfulChildren)
-    .map(child => parseReactElement(child, options));
+
+  let childrens;
+  if (typeof element.props.children === 'function') {
+    childrens = [createFunctionTreeNode(element.props.children)];
+  } else {
+    childrens = React.Children.toArray(element.props.children)
+      .filter(onlyMeaningfulChildren)
+      .map(child => parseReactElement(child, options));
+  }
 
   if (supportFragment && element.type === Fragment) {
     return createReactFragmentTreeNode(key, childrens);

src/parser/parseReactElement.spec.js

@@ -182,4 +182,25 @@ describe('parseReactElement', () => {
       ],
     });
   });
+
+  it('should parse children function', () => {
+    const RenderProp = ({ children }) => children({});
+    const fun = () => <div />;
+    expect(
+      parseReactElement(<RenderProp key="foo">{fun}</RenderProp>, options)
+    ).toEqual({
+      type: 'ReactElement',
+      displayName: 'RenderProp',
+      defaultProps: {},
+      props: {
+        key: 'foo',
+      },
+      childrens: [
+        {
+          type: 'function',
+          value: fun,
+        },
+      ],
+    });
+  });
 });

src/tree.js

@@ -16,6 +16,11 @@ export type NumberTreeNode = {|
   value: number,
 |};
 
+export type FunctionTreeNode = {|
+  type: 'function',
+  value: Function,
+|};
+
 export type ReactElementTreeNode = {|
   type: 'ReactElement',
   displayName: string,
@@ -33,6 +38,7 @@ export type ReactFragmentTreeNode = {|
 export type TreeNode =
   | StringTreeNode
   | NumberTreeNode
+  | FunctionTreeNode
   | ReactElementTreeNode
   | ReactFragmentTreeNode;
 
@@ -46,6 +52,11 @@ export const createNumberTreeNode = (value: number): NumberTreeNode => ({
   value,
 });
 
+export const createFunctionTreeNode = (value: Function): FunctionTreeNode => ({
+  type: 'function',
+  value,
+});
+
 export const createReactElementTreeNode = (
   displayName: string,
   props: PropsType,

src/tree.spec.js

@@ -3,6 +3,7 @@
 import {
   createStringTreeNode,
   createNumberTreeNode,
+  createFunctionTreeNode,
   createReactElementTreeNode,
   createReactFragmentTreeNode,
 } from './tree';
@@ -25,6 +26,16 @@ describe('createNumberTreeNode', () => {
   });
 });
 
+describe('createFunctionTreeNode', () => {
+  it('generate a number typed node payload', () => {
+    const fun = () => null;
+    expect(createFunctionTreeNode(fun)).toEqual({
+      type: 'function',
+      value: fun,
+    });
+  });
+});
+
 describe('createReactElementTreeNode', () => {
   it('generate a react element typed node payload', () => {
     expect(