Storybook: Show real sources instead of "compiled" source with HoC

[shilman]

Issue by tleunen
_Friday Sep 16, 2016 at 13:49 GMT_
_Originally opened as https://github.com/storybooks/react-storybook-addon-info/issues/73_

---

At first, I thought the plugin was showing the real sources of a story (the exact code that a story contains), but in fact it's showing the sources from the used components, or compiled sources.

Lets say I have this code and this story:

import MyComp from '../MyComp';

storiesOf('MyComp', module)
.addWithInfo(
    'Default MyComp',
    () => (
        <MyComp />
    ),
    { inline: true, propTables: false }
);


//and MyComp.js, something like:
function enhance(Component) {
  return class EnhanceComp extends React.Component {
    render() {
      return <Component>super enhanced</Component>
    }
  };
}


const MyComp = ({children}) => {
    return <div>My {children} Component</div>
};
export default enhance(MyComp);

but if MyComp is actually something using HoC, the rendering won't be

<MyComp /> but <EnhanceComp />

It would be best to keep showing MyComp instead because that's what users should use.

[shilman]

Comment by dimaip
_Monday Sep 19, 2016 at 13:36 GMT_

---

Even worse, in my case it may turn into something like this:

<StoryWrapper>
<Themed Button>
The Button
</Themed Button>
</StoryWrapper>

So it would also be good to specify the exact component, the way it works with propTables.
Related to #44

[shilman]

Comment by tleunen
_Thursday Sep 22, 2016 at 12:54 GMT_

---

@dimaip There's an easy way to fix the issue, what I've been using now for these components is something like:

import RealComponent from '../';

const MyComponent = props => <RealComponent {...props}>{props.children}</RealComponent>;

// then just use `MyComponent`

[shilman]

Comment by gnarf
_Friday Oct 21, 2016 at 17:24 GMT_

---

You can also use displayName on the class which is what the react debugger / this addon will use to "name" a class:

//and MyComp.js, something like:
function enhance(Component) {
  class EnhanceComp extends React.Component {
    render() {
      return <Component>super enhanced</Component>
    }
  };
  // default enhancment, just decorate the display name of the parent component
  EnhanceComp.displayName = `Enhanced(${Component.displayName || Component.name})`;
  return EnhanceComp;
}


const MyWrappedComp = ({children}) => {
    return <div>My {children} Component</div>
};
const enhanced = enhance(MyWrappedComp);
// we want this to look like a normal <MyComp>
enhanced.displayName = 'MyComp';

[shilman]

Comment by gnarf
_Friday Oct 21, 2016 at 17:34 GMT_

---

I was digging into using the "real" source - but it's basically impossible unless you separate each story into it's own .js file and then just use webpacks raw-loader to load the source... I kind of hacked around and did something like this:

storiesOf('MyComponent')
  .addWithInfo('default', `
    ### Source:
\`\`\`js
${require('!!raw-loader!./MyComponent/default.js')}
\`\`\`
`, require('./MyComponent/default.js'))

Found out it works, but how much do we REALLY want that? :)

[shilman]

Comment by gnarf
_Wednesday Oct 26, 2016 at 16:04 GMT_

---

This is the more generalized code I was using in my storybook index.js: https://gist.github.com/gnarf/ea9bd0f76e36516b6f1f38e4aba542a3

I'm using this to export real "example code" for the story

[shilman]

Comment by mnmtanish
_Thursday Oct 27, 2016 at 00:46 GMT_

---

@madushan1000 is it possible to attach the source code with the component using the docgen plugin?
( bad idea! )

[shilman]

Comment by darioghilardi
_Friday Dec 23, 2016 at 11:33 GMT_

---

I just pushed #127 trying to provide a solution for this issue. If you want to provide some feedback it would be great.

[ndelangen]

@mnmtanish I wonder why it's a bad idea?

[ndelangen]

@darioghilardi can you explain your suggested solution here?

[aacotroneo]

can't we add an option like a displayName? it'd be an analogous design to the current propTables ... we can't tell by inspecting the code, so we tell explicitly what it is. Or support an extended syntax like propTables: [{myDisplayName: MyObject}, ...]

[mnmtanish]

Hi @ndelangen,
I was working on this feature and ran into something. I'm sorry I can't remember the reason. Please ignore that comment.

[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. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 60 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!