Storybook: Info addon: prettify the source?

[slorber]

Hi,

I think it would be nice if in the info addon, the source would be run against a tool like Prettier, it will be certainly more readable than current form:

[UsulPro]

@slorber I think it's a good idea!
Do you want to make a PR for that?

[slorber]

I can try :)

[slorber]

As far as I understand, the source is rendered from an VDOM representation with a custom recursive rendering logic, so using Prettier here means we would remove a lot of the current code (and available options) because we would probably run Prettier directly against a string.

Is it something to consider?

Otherwise it's probably possible to create more display options based on current code. maxPropsIntoLine: 1, helps but one prop is still on a single line which makes it hard to read for complex object props.

[UsulPro]

Yes, it looks like this!
But I guess having the source as a string could be a useful feature in the next stages.

@slorber You can check out this example: https://github.com/UsulPro/storybook-styleguidist
it generates markdown from the stories sources. Can't promise that it's the best solution, but maybe it could be useful as a starting point.

[slorber]

@UsulPro I'm not sure why you want to use markdown to display the source.

For me the simplest option would probably be:

• Convert vdom to string with https://github.com/algolia/react-element-to-jsx-string
• Apply prettier on string
• Load pretty string in code block with syntax highlighter

This would remove the burden of maintaining a custom vdom renderer and we could also expose prettier options as addon options.

[UsulPro]

it's a fork of addon-info and just generates text string with the source of the story component.

Maybe you're right and some existing package will be better, but not sure that react specific solution has a future in a sense that we're going to support other frameworks soon

[UsulPro]

Our own solution isn't ideal as well. So maybe we could switch framework specific tools depending on what Storybook is running?
cc: @shilman

[shilman]

I like @slorber 's proposed solution and would love to see a PR.

Regarding support for multiple frameworks, I'd propose we either just add custom code to the addon to support other frameworks, like in addon-knobs:

function wrapperKnobs(options) {
  if (options) channel.emit('addon:knobs:setOptions', options);

  switch (window.STORYBOOK_ENV) {
    case 'vue': {
      return vueHandler(channel, manager.knobStore);
    }
    case 'react': {
      return reactHandler(channel, manager.knobStore);
    }
    default: {
      return reactHandler(channel, manager.knobStore);
    }
  }
}

Alternatively we could create packages for each framework, e.g. addon-info-react.

[kohlmannj]

I've looked into this recently, and have a few notes:

• Using Prettier client-side, in-browser is not currently supported (there's an fs dependency); I also tried js-beautify (similar issues) before settling on jsx-to-string
• I have an in-progress Storybook feature branch which replaces addon-info's custom JSX rendering with jsx-to-string: https://github.com/nytpi/storybook/commit/238e56fe6c26fd31dbe870639092518182a3e2b1
• I have a PR open for jsx-to-string itself which minorly improves formatting (https://github.com/grommet/jsx-to-string/pull/27)
• Didn't get into syntax highlighting solutions just yet; would love a recommendation!

[slorber]

@kohlmannj it seems possible to embed prettier for runtime formatting. However it looks like it adds 4mb to the bundle because prettier ships with a lot of built in parsers that may not be easy to tree-shake/disable. See this PR

jsx-to-string should already be a nice solution imho

[shilman]

@kohlmannj awesome!!! i think @ndelangen has a lot of experience with syntax highlighting and can chime in?

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. We do try to do some housekeeping every once in a while so inactive issues will get closed after 90 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[eps1lon]

For anyone stumbling over this: You can hide the source from withInfo and use storysource instead.

[slorber]

thanks didn't know about this new plugin

[chinchiheather]

I have written an addon that uses prettier to format the source code, it does it inline as opposed to seeing the whole file in a panel like in the storysource addon. There is a standalone version of prettier now that can run in the browser. As with storysource you would want to hide the source from the info addon.
I thought someone else might find it useful - https://github.com/chinchiheather/storybook-addon-prettier-source