Show real sources instead of "compiled" source with HoC

[tleunen]

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.

[dimaip]

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

[tleunen]

@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`

[gnarf]

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';

[gnarf]

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? :)

[gnarf]

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

[thani-sh]

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

[darioghilardi]

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