Improve Function Name and Multiline Object Formatting

[kohlmannj]

Two little improvements in this PR:

Function Name Formatting: prefer displayName if set

I'm trying to use jsx-to-string with some JSX code that involves passing a React component function as a prop to a React component instance, along with options { useFunctionCode: true, functionNameOnly: true }.

Our use case is a little more complicated than that, insofar as B is a React component that is generated by a Higher-Order Component. Long story short, printing the function's displayName property offers greater clarity than printing its name, which for this HOC, is generic.

Before

Note the ambiguous Themed prop name above. That's the name property of an HOC we're using.

<Responsive as={Themed}
  title='Shared Figure Title'
  breakpoints={{
"(max-width: 539px)": {
  "src": "http://placehold.it/320x160",
  "caption": "For some reason, this is just a captioned image on mobile."
},
"(min-width: 540px)": {
  "caption": "On desktop, this is a looping video. Try resizing the window to see what happens on mobile.",
  "children": <FrameAnimation src='https://video1.nytimes.com/paidpost/belvedere/the-view-from-here/tabletop.mp4' />
}
  }} />

After

Turns out that function has a displayName, based on the wrapped component's displayName. Hence, we can print that instead to offer a bit more clarity.

<Responsive as={ThemedFigure}
  title='Shared Figure Title'
  breakpoints={{
"(max-width: 539px)": {
  "src": "http://placehold.it/320x160",
  "caption": "For some reason, this is just a captioned image on mobile."
},
"(min-width: 540px)": {
  "caption": "On desktop, this is a looping video. Try resizing the window to see what happens on mobile.",
  "children": <FrameAnimation src='https://video1.nytimes.com/paidpost/belvedere/the-view-from-here/tabletop.mp4' />
}
  }} />

Object Formatting: add indents to multi-line formatted object strings

Depending on its content, an object might be stringified as a multi-line string. I noticed this and added a bit of code to conditionally add indentation to all but the first line of the multi-string value in this case.

Before

The breakpoints prop is a multi-line object, but it doesn't have the correct indentation below.

<Responsive as={ThemedFigure}
  title='Shared Figure Title'
  breakpoints={{
"(max-width: 539px)": {
  "src": "http://placehold.it/320x160",
  "caption": "For some reason, this is just a captioned image on mobile."
},
"(min-width: 540px)": {
  "caption": "On desktop, this is a looping video. Try resizing the window to see what happens on mobile.",
  "children": <FrameAnimation src='https://video1.nytimes.com/paidpost/belvedere/the-view-from-here/tabletop.mp4' />
}
  }} />

After

Now the multi-line object is correctly indented.

<Responsive as={ThemedFigure}
  title='Shared Figure Title'
  breakpoints={{
    "(max-width: 539px)": {
      "src": "http://placehold.it/320x160",
      "caption": "For some reason, this is just a captioned image on mobile."
    },
    "(min-width: 540px)": {
      "caption": "On desktop, this is a looping video. Try resizing the window to see what happens on mobile.",
      "children": <FrameAnimation src='https://video1.nytimes.com/paidpost/belvedere/the-view-from-here/tabletop.mp4' />
    }
  }} />

[alansouzati]

Thanks for your contribution. This looks good. Although, I believe the tests should be updated. The CI failed for this reason.

You can run npm run test to see what is failing locally.

This is what is failing in CI:

---
    operator: equal
    expected: |-
      '<Basic test1={function _testCallBack1() {\n    //no-op\n  }} />'
    actual: |-
      '<Basic test1={function _testCallBack1() {\n      //no-op\n    }} />'
    at: Test.<anonymous> (/home/travis/build/grommet/jsx-to-string/test/index.js:172:5)
  ...

[kohlmannj]

@alansouzati will fix this week!

[FDiskas]

And.... 🐜

[kohlmannj]

Closed in favor of #38.