Storybook: addon-docs, unconsistent "showCode" behaviour (6.0.0-rc.14)

[benjamin-schneider]

Describe the bug
Given 2 story functions implementing the same component, the rendered source code is not the same depending on the story function parameters (6.0.0-rc.14, typescript and react)

To Reproduce
This is reproductible in an easy manner. In a *.stories.tsx, add these 2 functions :

export const SampleWithoutParams = () => {
  return (<div>a</div>);
};

export const SampleWithParams = (args: Args, ctx: StoryContext) => {
  return (<div>a</div>);
};

Then in the docs tab, click on "showCode" :

Expected behavior
IMHO, the source code should be the same. I mean the first one eg :

() => {
  return (<div>a</div>);
}

Seems that when there are params, source code is "interpreted".

System:

Environment Info:

  System:
    OS: Linux 5.4 Ubuntu 20.04 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i7-6600U CPU @ 2.60GHz
  Binaries:
    Node: 13.3.0 - ~/.nvm/versions/node/v13.3.0/bin/node
    npm: 6.13.1 - ~/.nvm/versions/node/v13.3.0/bin/npm
  Browsers:
    Chrome: 84.0.4147.89
    Firefox: 78.0.2
  npmPackages:
    @storybook/addon-actions: ^6.0.0-rc.14 => 6.0.0-rc.14 
    @storybook/addon-docs: ^6.0.0-rc.14 => 6.0.0-rc.14 
    @storybook/addon-jest: ^6.0.0-rc.14 => 6.0.0-rc.14 
    @storybook/addon-links: ^6.0.0-rc.14 => 6.0.0-rc.14 
    @storybook/addon-storysource: ^6.0.0-rc.14 => 6.0.0-rc.14 
    @storybook/addons: ^6.0.0-rc.14 => 6.0.0-rc.14 
    @storybook/preset-create-react-app: ^3.1.4 => 3.1.4 
    @storybook/react: ^6.0.0-rc.14 => 6.0.0-rc.14

Additional context
Sorry if this is not a bug, I tried to search but did not found an issue about that.

[redders6600]

Ah - I think all of my stories must have params, as mine always look like your second option, hence opening this issue: #11645...

Definitely would prefer if the actual source was used instead of just displaying the resulting DOM.

[shilman]

This is still WIP and I'll document it properly including the rationale once things are finalized. In a nutshell, there is a new parameter docs.source.type which can take on the values 'auto' | 'code' | 'dynamic'. Default is 'auto' which chooses 'dynamic' for args stories and 'code' for classic stories. You can force this to be 'code' globally to get the behavior you want. Away from keyboard for a few days but will be smoothing everything out here next week.

[benjamin-schneider]

@shilman This will be a killer feature. Thanks for your precise and concise explanation

[shilman]

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-rc.16 containing PR #11710 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[yyynnn]

@shilman
outputs nonsense of a controlled story.
With this syntax:

<Preview>
  <Story name="Radio types">{Template.bind({})}</Story>
</Preview>

[benjamin-schneider]

@shilman Thanks a lot for the resolution, it works very well (CSF)
With the sample you gave

See the updated snapshots & the ForceCodeSource story in official-storybook for e2e

I just had to add docs: { source: { type: 'code' } } in the story parameters, and everything is fine.

To illustrate, here is a before/after if somebody else encounters this problem :

Before :

After (with docs: { source: { type: 'code' } }` in the story parameters) :

[shilman]

Thanks for documenting @benjamin-schneider!! 🙏