storybookjs/storybook

[Bug]: calling `updateArgs` doesn't trigger docs addon `transform` function

Open

#27140 opened on May 14, 2024

View on GitHub
 (1 comment) (1 reaction) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
block: sourcebughelp wantedsev:S3

Description

Describe the bug

I have a story with a controls panel under it, and when I make changes in the controls panel, the story canvas re-renders as expected. However the "Show code" block just underneath only ever shows the initial args passed to the story. I have a parameters.docs.source.transform function, which is only called once when the story initially renders. It appears that calling updateArgs (which the controls addon appears to do under the hood) doesn't trigger anything in the docs addon to execute the transform function again with the updated arguments.

To Reproduce

I don't have the ability to create a stackblitz reproduction at the moment, but I'll try to get one added this evening.

The transform function looks like this:

transform: (unused: string, context: StoryContext): string => {
    const { args } = context;

    return `<${args.variant} size="${args.size}" />`;
},

Update: I am not going to be able to make a reproduction for at least a few days due to going out of town, but here is a screen recording showing the issue.

https://github.com/storybookjs/storybook/assets/198075/8644a0ea-e67b-4724-b75c-a335a85983ce

System

Storybook Environment Info:
  System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.1 - ~/.nvm/versions/node/v20.12.1/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.1/bin/npm <----- active
    pnpm: 8.15.6 - ~/.nvm/versions/node/v20.12.1/bin/pnpm
  Browsers:
    Chrome: 124.0.6367.208
    Edge: 124.0.2478.105
    Safari: 17.4.1

Additional context

No response

Contributor guide

Tech stack
typescriptreact
Domain
frontenddocumentation
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
JavaScriptReactStorybook
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate how the docs addon handles args updates, specifically in the source code generation pipeline. Look at the `transform` function invocation in the `useSource` hook or similar. Check if the transform is memoized or only called once, and whether `updateArgs` triggers a re render that should re evaluate it. Relevant files likely in `lib/addon docs` or `code/lib/addon docs/src/blocks`. The reporter mentions `parameters.docs.source.transform` search for that in the codebase.