feat: Print function children

README.md

@@ -84,18 +84,24 @@ console.log(reactElementToJSXString(<div a="1" b="2">Hello, world!</div>));
 
   If false, default props are omitted unless they differ from from the default value.
 
-**options.showFunctions: boolean, default false**
+**options.showFunctions: boolean | (fn: Function, prop: string) => boolean, default false**
 
   If true, functions bodies are shown.
 
   If false, functions bodies are replaced with `function noRefCheck() {}`.
 
-**options.functionValue: function, default `(fn) => fn`**
+  If a function is passed, it will be called for each function prop with its value and key, and will not print bodies of functions that return false.
+
+**options.functionValue: (fn: Function, prop: string) => Function | string, default undefined**
 
   Allows you to override the default formatting of function values.
 
   `functionValue` receives the original function reference as input
-  and should send any value as output.
+  and should return a new function or formatted string.
+
+  Pre-defined inline and multi-line formatters are exported as `inlineFunction` and `preserveFunctionLineBreak` respectively.
+
+  The default formatting depends on context: multi-line for function children and inline for props.
 
 **options.tabStop: number, default 2**
 

src/formatter/formatComplexDataStructure.js

@@ -11,6 +11,7 @@ import type { Options } from './../options';
 
 export default (
   value: Object | Array<any>,
+  name: string,
   inline: boolean,
   lvl: number,
   options: Options
@@ -31,7 +32,7 @@ export default (
       }
 
       if (typeof currentValue === 'function') {
-        return formatFunction(currentValue, options);
+        return formatFunction(currentValue, name, true, lvl, options);
       }
 
       return originalResult;

src/formatter/formatComplexDataStructure.spec.js

@@ -15,7 +15,9 @@ describe('formatComplexDataStructure', () => {
   it('should format an object', () => {
     const fixture = { a: 1, b: { c: 'ccc' } };
 
-    expect(formatComplexDataStructure(fixture, false, 0, options)).toEqual(
+    expect(
+      formatComplexDataStructure(fixture, 'foo', false, 0, options)
+    ).toEqual(
       `{
     a: 1,
     b: {
@@ -28,19 +30,23 @@ describe('formatComplexDataStructure', () => {
   it('should format inline an object', () => {
     const fixture = { a: 1, b: { c: 'ccc' } };
 
-    expect(formatComplexDataStructure(fixture, true, 0, options)).toEqual(
-      "{a: 1, b: {c: 'ccc'}}"
-    );
+    expect(
+      formatComplexDataStructure(fixture, 'foo', true, 0, options)
+    ).toEqual("{a: 1, b: {c: 'ccc'}}");
   });
 
   it('should format an empty object', () => {
-    expect(formatComplexDataStructure({}, false, 0, options)).toEqual('{}');
+    expect(formatComplexDataStructure({}, 'foo', false, 0, options)).toEqual(
+      '{}'
+    );
   });
 
   it('should order the object keys', () => {
     const fixture = { b: { d: 'ddd', c: 'ccc' }, a: 1 };
 
-    expect(formatComplexDataStructure(fixture, false, 0, options)).toEqual(
+    expect(
+      formatComplexDataStructure(fixture, 'foo', false, 0, options)
+    ).toEqual(
       `{
     a: 1,
     b: {
@@ -54,7 +60,9 @@ describe('formatComplexDataStructure', () => {
   it('should format an array', () => {
     const fixture = [1, '2', true, false, null];
 
-    expect(formatComplexDataStructure(fixture, false, 0, options)).toEqual(
+    expect(
+      formatComplexDataStructure(fixture, 'foo', false, 0, options)
+    ).toEqual(
       `[
     1,
     '2',
@@ -68,39 +76,43 @@ describe('formatComplexDataStructure', () => {
   it('should format inline an array ', () => {
     const fixture = [1, '2', true, false, null];
 
-    expect(formatComplexDataStructure(fixture, true, 0, options)).toEqual(
-      "[1, '2', true, false, null]"
-    );
+    expect(
+      formatComplexDataStructure(fixture, 'foo', true, 0, options)
+    ).toEqual("[1, '2', true, false, null]");
   });
 
   it('should format an object that contains a react element', () => {
     const fixture = { a: createFakeReactElement('BarBar') };
 
-    expect(formatComplexDataStructure(fixture, false, 0, options)).toEqual(
+    expect(
+      formatComplexDataStructure(fixture, 'foo', false, 0, options)
+    ).toEqual(
       `{
     a: <BarBar />
   }`
     );
   });
 
   it('should format an empty array', () => {
-    expect(formatComplexDataStructure([], false, 0, options)).toEqual('[]');
+    expect(formatComplexDataStructure([], 'foo', false, 0, options)).toEqual(
+      '[]'
+    );
   });
 
   it('should format an object that contains a date', () => {
     const fixture = { a: new Date('2017-11-13T00:00:00.000Z') };
 
-    expect(formatComplexDataStructure(fixture, true, 0, options)).toEqual(
-      `{a: new Date('2017-11-13T00:00:00.000Z')}`
-    );
+    expect(
+      formatComplexDataStructure(fixture, 'foo', true, 0, options)
+    ).toEqual(`{a: new Date('2017-11-13T00:00:00.000Z')}`);
   });
 
   it('should format an object that contains a regexp', () => {
     const fixture = { a: /test/g };
 
-    expect(formatComplexDataStructure(fixture, true, 0, options)).toEqual(
-      `{a: /test/g}`
-    );
+    expect(
+      formatComplexDataStructure(fixture, 'foo', true, 0, options)
+    ).toEqual(`{a: /test/g}`);
   });
 
   it('should replace a function with noRefCheck', () => {
@@ -110,9 +122,9 @@ describe('formatComplexDataStructure', () => {
       },
     };
 
-    expect(formatComplexDataStructure(fixture, true, 0, options)).toEqual(
-      '{a: function noRefCheck() {}}'
-    );
+    expect(
+      formatComplexDataStructure(fixture, 'foo', true, 0, options)
+    ).toEqual('{a: function noRefCheck() {}}');
   });
 
   it('should format a function', () => {
@@ -123,7 +135,7 @@ describe('formatComplexDataStructure', () => {
     };
 
     expect(
-      formatComplexDataStructure(fixture, true, 0, {
+      formatComplexDataStructure(fixture, 'foo', true, 0, {
         ...options,
         showFunctions: true,
       })
@@ -138,7 +150,7 @@ describe('formatComplexDataStructure', () => {
     };
 
     expect(
-      formatComplexDataStructure(fixture, true, 0, {
+      formatComplexDataStructure(fixture, 'foo', true, 0, {
         ...options,
         functionValue: () => '<Test />',
       })

src/formatter/formatFunction.js

@@ -1,4 +1,5 @@
 import type { Options } from './../options';
+import spacer from './spacer';
 
 function noRefCheck() {}
 
@@ -11,13 +12,26 @@ export const inlineFunction = (fn: any): string =>
 
 export const preserveFunctionLineBreak = (fn: any): string => fn.toString();
 
-const defaultFunctionValue = inlineFunction;
+export default (
+  fn: Function,
+  prop: string,
+  inline: boolean,
+  lvl: number,
+  options: Options
+): string => {
+  const { functionValue, showFunctions } = options;
+  const functionFn =
+    functionValue || (inline ? inlineFunction : preserveFunctionLineBreak);
+  const shouldShowFunction = Boolean(
+    functionValue ||
+      (typeof showFunctions === 'function'
+        ? showFunctions(fn, prop)
+        : showFunctions)
+  );
 
-export default (fn: Function, options: Options): string => {
-  const { functionValue = defaultFunctionValue, showFunctions } = options;
-  if (!showFunctions && functionValue === defaultFunctionValue) {
-    return functionValue(noRefCheck);
-  }
-
-  return functionValue(fn);
+  return String(functionFn(shouldShowFunction ? fn : noRefCheck, prop))
+    .split('\n')
+    .map(ln => spacer(lvl, options.tabStop) + ln)
+    .join('\n')
+    .trim();
 };

src/formatter/formatFunction.spec.js

@@ -12,36 +12,40 @@ function hello() {
 
 describe('formatFunction', () => {
   it('should replace a function with noRefCheck without showFunctions option', () => {
-    expect(formatFunction(hello, {})).toEqual('function noRefCheck() {}');
+    expect(formatFunction(hello, 'prop', true, 0, {})).toEqual(
+      'function noRefCheck() {}'
+    );
   });
 
   it('should replace a function with noRefCheck if showFunctions is false', () => {
-    expect(formatFunction(hello, { showFunctions: false })).toEqual(
-      'function noRefCheck() {}'
-    );
+    expect(
+      formatFunction(hello, 'prop', true, 0, { showFunctions: false })
+    ).toEqual('function noRefCheck() {}');
   });
 
   it('should format a function if showFunctions is true', () => {
-    expect(formatFunction(hello, { showFunctions: true })).toEqual(
-      'function hello() {return 1;}'
-    );
+    expect(
+      formatFunction(hello, 'prop', true, 0, { showFunctions: true })
+    ).toEqual('function hello() {return 1;}');
   });
 
   it('should format a function without name if showFunctions is true', () => {
-    expect(formatFunction(() => 1, { showFunctions: true })).toEqual(
-      'function () {return 1;}'
-    );
+    expect(
+      formatFunction(() => 1, 'prop', true, 0, { showFunctions: true })
+    ).toEqual('function () {return 1;}');
   });
 
   it('should use the functionValue option', () => {
-    expect(formatFunction(hello, { functionValue: () => '<Test />' })).toEqual(
-      '<Test />'
-    );
+    expect(
+      formatFunction(hello, 'prop', true, 0, {
+        functionValue: () => '<Test />',
+      })
+    ).toEqual('<Test />');
   });
 
   it('should use the functionValue option even if showFunctions is true', () => {
     expect(
-      formatFunction(hello, {
+      formatFunction(hello, 'prop', true, 0, {
         showFunctions: true,
         functionValue: () => '<Test />',
       })
@@ -50,10 +54,28 @@ describe('formatFunction', () => {
 
   it('should use the functionValue option even if showFunctions is false', () => {
     expect(
-      formatFunction(hello, {
+      formatFunction(hello, 'prop', true, 0, {
         showFunctions: false,
         functionValue: () => '<Test />',
       })
     ).toEqual('<Test />');
   });
+
+  it('should format multi-line function', () => {
+    expect(
+      formatFunction(hello, 'prop', false, 0, {
+        showFunctions: true,
+        tabStop: 2,
+      })
+    ).toEqual('function hello() {\n  return 1;\n}');
+  });
+
+  it('should format multi-line function with indentation', () => {
+    expect(
+      formatFunction(hello, 'prop', false, 1, {
+        showFunctions: true,
+        tabStop: 2,
+      })
+    ).toEqual('function hello() {\n    return 1;\n  }');
+  });
 });

src/formatter/formatProp.js

@@ -28,7 +28,13 @@ export default (
 
   const { useBooleanShorthandSyntax, tabStop } = options;
 
-  const formattedPropValue = formatPropValue(usedValue, inline, lvl, options);
+  const formattedPropValue = formatPropValue(
+    usedValue,
+    name,
+    inline,
+    lvl,
+    options
+  );
 
   let attributeFormattedInline = ' ';
   let attributeFormattedMultiline = `\n${spacer(lvl + 1, tabStop)}`;