feat(formatting): render children as function

src/formatter/formatReactFunctionNode.js

@@ -0,0 +1,34 @@
+/* @flow */
+
+import spacer from './spacer';
+import formatTreeNode from './formatTreeNode';
+import type { Options } from './../options';
+import type { ReactFunctionTreeNode } from './../tree';
+
+export default (
+  node: ReactFunctionTreeNode,
+  inline: boolean,
+  lvl: number,
+  options: Options
+): string => {
+  const { tabStop } = options;
+  const { type, childrens } = node;
+
+  if (type !== 'ReactFunction') {
+    throw new Error(
+      `The "formatReactFunctionNode" function could only format node of type "ReactFunction". Given:  ${type}`
+    );
+  }
+
+  const functionRender = Array.isArray(childrens)
+    ? childrens
+        .map(children => formatTreeNode(children, false, lvl + 1, options))
+        .join('\n')
+    : formatTreeNode(childrens, false, lvl + 1, options);
+
+  const out = `{() => (
+${spacer(lvl + 1, tabStop)}${functionRender}
+${spacer(lvl, tabStop)})}`;
+
+  return `${out}`;
+};

src/formatter/formatTreeNode.js

@@ -2,6 +2,7 @@
 
 import formatReactElementNode from './formatReactElementNode';
 import formatReactFragmentNode from './formatReactFragmentNode';
+import formatReactFunctionNode from './formatReactFunctionNode';
 import type { Options } from './../options';
 import type { TreeNode } from './../tree';
 
@@ -54,5 +55,9 @@ export default (
     return formatReactFragmentNode(node, inline, lvl, options);
   }
 
+  if (node.type === 'ReactFunction') {
+    return formatReactFunctionNode(node, inline, lvl, options);
+  }
+
   throw new TypeError(`Unknow format type "${node.type}"`);
 };

src/index.spec.js

@@ -898,6 +898,22 @@ describe('reactElementToJSXString(ReactElement)', () => {
     );
   });
 
+  it('reactElementToJSXString(<div>{() => (<div>Hello World</div>)}</div>)', () => {
+    expect(
+      reactElementToJSXString(<div>{() => <div>Hello World</div>}</div>, {
+        showFunctions: true,
+      })
+    ).toEqual(
+      `<div>
+  {() => (
+    <div>
+      Hello World
+    </div>
+  )}
+</div>`
+    );
+  });
+
   it('reactElementToJSXString(<DisplayNamePrecedence />)', () => {
     expect(reactElementToJSXString(<DisplayNamePrecedence />)).toEqual(
       '<This should take precedence />'

src/parser/parseReactElement.js

@@ -6,6 +6,7 @@ import {
   createStringTreeNode,
   createNumberTreeNode,
   createReactElementTreeNode,
+  createReactFunctionTreeNode,
   createReactFragmentTreeNode,
 } from './../tree';
 import type { TreeNode } from './../tree';
@@ -71,6 +72,14 @@ const parseReactElement = (
     .filter(onlyMeaningfulChildren)
     .map(child => parseReactElement(child, options));
 
+  if (typeof element.props.children === 'function') {
+    const functionChildrens = parseReactElement(
+      element.props.children(),
+      options
+    );
+    childrens.push(createReactFunctionTreeNode([functionChildrens]));
+  }
+
   if (supportFragment && element.type === Fragment) {
     return createReactFragmentTreeNode(key, childrens);
   }

src/parser/parseReactElement.spec.js

@@ -21,6 +21,31 @@ describe('parseReactElement', () => {
     });
   });
 
+  it('should parse a react element with a function as children', () => {
+    expect(
+      parseReactElement(<h1>{() => <div>hello world</div>}</h1>, options)
+    ).toEqual({
+      childrens: [
+        {
+          childrens: [
+            {
+              childrens: [{ type: 'string', value: 'hello world' }],
+              defaultProps: {},
+              displayName: 'div',
+              props: {},
+              type: 'ReactElement',
+            },
+          ],
+          type: 'ReactFunction',
+        },
+      ],
+      defaultProps: {},
+      displayName: 'h1',
+      props: {},
+      type: 'ReactElement',
+    });
+  });
+
   it('should filter empty childrens', () => {
     expect(
       parseReactElement(

src/tree.js

@@ -16,6 +16,11 @@ export type NumberTreeNode = {|
   value: number,
 |};
 
+export type ReactFunctionTreeNode = {|
+  type: 'ReactFunction',
+  childrens: TreeNode[],
+|};
+
 export type ReactElementTreeNode = {|
   type: 'ReactElement',
   displayName: string,
@@ -34,7 +39,8 @@ export type TreeNode =
   | StringTreeNode
   | NumberTreeNode
   | ReactElementTreeNode
-  | ReactFragmentTreeNode;
+  | ReactFragmentTreeNode
+  | ReactFunctionTreeNode;
 
 export const createStringTreeNode = (value: string): StringTreeNode => ({
   type: 'string',
@@ -46,6 +52,13 @@ export const createNumberTreeNode = (value: number): NumberTreeNode => ({
   value,
 });
 
+export const createReactFunctionTreeNode = (
+  childrens: TreeNode[]
+): ReactFunctionTreeNode => ({
+  type: 'ReactFunction',
+  childrens,
+});
+
 export const createReactElementTreeNode = (
   displayName: string,
   props: PropsType,