Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Addon-docs: Fix source block error on dynamically-generated stories #14217

Merged
merged 1 commit into from
Mar 12, 2021
Merged

Addon-docs: Fix source block error on dynamically-generated stories #14217

merged 1 commit into from
Mar 12, 2021

Conversation

jakubriedl
Copy link
Contributor

Issue:
Docs page throw an error Cannot read property 'startBody' of undefined when using generated stories because it cannot get its source code from locationsMap.

TypeError
Cannot read property 'startBody' of undefined
Call Stack
 extractSource  vendors~main.3cb0f4d0aaa9b1174e6e.bundle.js:87896:24
 extract  vendors~main.3cb0f4d0aaa9b1174e6e.bundle.js:64109:43
 enhanceSource  vendors~main.3cb0f4d0aaa9b1174e6e.bundle.js:64126:15
 getSnippet  vendors~main.3cb0f4d0aaa9b1174e6e.bundle.js:63520:51
 undefined  vendors~main.3cb0f4d0aaa9b1174e6e.bundle.js:63537:14
 getSourceProps  vendors~main.3cb0f4d0aaa9b1174e6e.bundle.js:63534:24
 getPreviewProps  vendors~main.3cb0f4d0aaa9b1174e6e.bundle.js:62648:48
 Canvas  vendors~main.3cb0f4d0aaa9b1174e6e.bundle.js:62661:22
 renderWithHooks  vendors~main.3cb0f4d0aaa9b1174e6e.bundle.js:250003:18

What I did

The fix is using the same simple fallback to the whole story file code same as when locationsMap is not passed from caller few lines above.

How to test

To simulate the situation it requires quite specific situation where we generate stories based on api response. (Note everything works well for us this way except the docs throw mentioned error).

story:

export default {
   title: "Some Title"
}

export const Default = () => <Component />

generateStories("Some Title", Default)
async function generateStories(title, BaseStory) {
   const data = await (await fetch("...")).json()
   storyStore?.startConfiguring()
   const stories = storiesOf(title, module)
   for(const item of data) {
       stories.add(title, BaseStory, {
           providedData: item 
       })
   }
   storyStore?.finishConfiguring()
}
  • Is this testable with Jest or Chromatic screenshots? (nope)
  • Does this need a new example in the kitchen sink apps? (nope)
  • Does this need an update to the documentation? (nope)

If your answer is yes to any of these, please make sure to include it in your PR.

Docs page throw an error `Cannot read property 'startBody' of undefined` when using generated stories because it cannot get its source code.

The fix is using the same simple fallback to the whole story file same as when locationsMap is not passed from caller.
Copy link
Member

@shilman shilman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. that said, i would highly discourage this pattern. we're planning to deprecate the storiesOf API in favor of statically analyzable CSF.

@shilman shilman added the patch:yes Bugfix & documentation PR that need to be picked to main branch label Mar 12, 2021
@shilman shilman changed the title Fix: Docs page throws error Cannot read property 'startBody' of undefined when using generated stories Addon-docs: Fix source error on dynamically-generated stories Mar 12, 2021
@shilman shilman changed the title Addon-docs: Fix source error on dynamically-generated stories Addon-docs: Fix source block error on dynamically-generated stories Mar 12, 2021
@shilman shilman merged commit 2874f48 into storybookjs:next Mar 12, 2021
@jakubriedl
Copy link
Contributor Author

Thanks for approving and merging this.

If you plan to deprecate "storiesOf" will be there some other way how to do stories generation? We use all possible variations of API responses to generate and validate how our UI will react to it. It is for us super valuable way of testing.

@jakubriedl jakubriedl deleted the patch-1 branch March 13, 2021 03:02
@shilman shilman added the patch:done Patch/release PRs already cherry-picked to main/release branch label Mar 15, 2021
shilman added a commit that referenced this pull request Mar 15, 2021
Addon-docs: Fix source block error on dynamically-generated stories
This was referenced Mar 15, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
addon: docs block: source bug patch:done Patch/release PRs already cherry-picked to main/release branch patch:yes Bugfix & documentation PR that need to be picked to main branch
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants