[Bug]: Adding arguments in the decorator breaks the source code

[Jekins]

Describe the bug

If we add additional arguments to context.args in the decorator, then in the source code in Docs, not the code of the component, but the source code of the story as an object is displayed.

To Reproduce

Button.stories.ts

const withCustomProp: Decorator = (Story, context) => {
  Object.assign(context.args, { newProps: 'value' });

  return Story(context);
};

const meta: Meta<typeof Button> = {
  component: Button,
  decorators: [withCustomProp],
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Primary: Story = {
  args: {
    primary: true,
    label: 'Button',
  },
};

If we click on Show code in Docs, we see:

{
  args: {
    primary: true,
    label: 'Button'
  }
}

https://stackblitz.com/edit/github-qrhck4?file=src/stories/Button.stories.ts

System

Environment Info:

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @storybook/addon-essentials: ^7.1.0-alpha.4 => 7.1.0-alpha.4 
    @storybook/addon-interactions: ^7.1.0-alpha.4 => 7.1.0-alpha.4 
    @storybook/addon-links: ^7.1.0-alpha.4 => 7.1.0-alpha.4 
    @storybook/blocks: ^7.1.0-alpha.4 => 7.1.0-alpha.4 
    @storybook/react: ^7.1.0-alpha.4 => 7.1.0-alpha.4 
    @storybook/react-webpack5: ^7.1.0-alpha.4 => 7.1.0-alpha.4 
    @storybook/testing-library: ^0.0.14-next.2 => 0.0.14-next.2

Additional context

No response

[shilman]

@tmeasday this seems to be related to the other bug you just fixed for conditional args #22135

It seems like the new args hashing thing is brittle. Do you think it's worth reevaluating this approach?

[tmeasday]

Hmm, yes I see. Do you have another suggestion about how we can associate emitted source to story when the same story is rendered > 1 times in docs (apart from using the args?).

Right now we either render:
a) the story with initial args OR
b) the story with the current args.

(It isn't possible--by design--to have >1 version of the "current args" for single story).

So we might consider doing something less general here and rather than keying on the used args, just keying on initial vs current, and storing (up to) two source values per story. WDYT?

[shilman]

Could we do something where we modify the source snippet payload to be like example-button--basic#1 where 1 is the order in the DOM? Or, maybe more explicitly

{ id: '...', source: '...', instance: 1 }

WDYT?

[tmeasday]

To do that the decorator would need to know the order of the story. Which would mean the Story block would have to pass that order through the story context somehow.

Seems possible but probably pretty involved.

Then again passing the initial vs non initial thing might require a similar manoeuvre. Hrmm

[Jekins]

If you add the decorator to a specific story and not to the meta, nothing will change.
We will still see incorrect source code:

{
  args: {
    primary: true,
    label: 'Button'
  },
  decorators: [withCustomProp]
}

I don't know if this information will be helpful.

[tmeasday]

Thanks @Jekins. I understand the issue pretty well, just trying to figure out the best solution :)

[guillaume-g]

Also linked to #21456 if it helps gathering informations 👍 .
Thanks for your work btw! Love it.

[tmeasday]

@Jekins et al, can you try the latest 7.1 alpha? I believe #22135 fixed this issue. We should consider backporting @shilman

[Jekins]

@tmeasday Now everything works. Thank you!