feat(formatting) add ident & inline options to formatFunction

Author: Gabriela Seabra

src/formatter/formatComplexDataStructure.js

@@ -31,7 +31,7 @@ export default (
       }
 
       if (typeof currentValue === 'function') {
-        return formatFunction(currentValue, options);
+        return formatFunction(currentValue, true, lvl, options);
       }
 
       return originalResult;

src/formatter/formatFunction.js

@@ -1,4 +1,5 @@
 import type { Options } from './../options';
+import spacer from './spacer';
 
 function noRefCheck() {}
 
@@ -11,13 +12,20 @@ export const inlineFunction = (fn: any): string =>
 
 export const preserveFunctionLineBreak = (fn: any): string => fn.toString();
 
-const defaultFunctionValue = inlineFunction;
+export default (
+  fn: Function,
+  inline: boolean,
+  lvl: number,
+  options: Options
+): string => {
+  const { functionValue, showFunctions } = options;
+  const functionFn =
+    functionValue || (inline ? inlineFunction : preserveFunctionLineBreak);
+  const shouldShowFunction = showFunctions || functionValue;
 
-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))
+    .split('\n')
+    .map(ln => spacer(lvl, options.tabStop) + ln)
+    .join('\n')
+    .trim();
 };

src/formatter/formatFunction.spec.js

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

src/formatter/formatPropValue.js

@@ -41,7 +41,7 @@ const formatPropValue = (
   }
 
   if (typeof propValue === 'function') {
-    return `{${formatFunction(propValue, options)}}`;
+    return `{${formatFunction(propValue, true, lvl, options)}}`;
   }
 
   if (isValidElement(propValue)) {

src/formatter/formatTreeNode.js

@@ -48,7 +48,7 @@ export default (
   }
 
   if (node.type === 'function') {
-    return `{${formatFunction(node.value, options)}}`;
+    return `{${formatFunction(node.value, inline, lvl, options)}}`;
   }
 
   if (node.type === 'ReactElement') {

src/index.spec.js

@@ -903,6 +903,29 @@ describe('reactElementToJSXString(ReactElement)', () => {
     ).toEqual(`<div fn={function fn() {return 'value';}} />`);
   });
 
+  it('should ident deeply nested multi-line functions correctly', () => {
+    /* eslint-disable arrow-body-style */
+    const fn = () => {
+      return 'value';
+    };
+
+    expect(
+      reactElementToJSXString(
+        <div fn={fn}>
+          <div fn={fn}>
+            <div fn={fn} />
+          </div>
+        </div>,
+        {
+          showFunctions: true,
+          functionValue: preserveFunctionLineBreak,
+        }
+      )
+    ).toEqual(
+      "<div\n  fn={function fn() {\n      return 'value';\n    }}\n>\n  <div\n    fn={function fn() {\n        return 'value';\n      }}\n  >\n    <div\n      fn={function fn() {\n          return 'value';\n        }}\n     />\n  </div>\n</div>"
+    );
+  });
+
   it('should expose the multiline "functionValue" formatter', () => {
     /* eslint-disable arrow-body-style */
     const fn = () => {