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

Core/CLI: Add extract function to PreviewWeb and use it in sb extract if available #17447

Merged
merged 3 commits into from Feb 10, 2022

Conversation

tmeasday
Copy link
Member

@tmeasday tmeasday commented Feb 9, 2022

Issue: #13561 (related)

StoryStore.extract() would hang if there was an error in preview.js, as the store doesn't know about errors at that level. This would trip up the extract script and tools like Chromatic.

What I did

Add PreviewWeb.extract() which encapsulates a bunch of different logic required to call extract() + co on the store:

  • Check if there were errors initializing (state on the preview)
  • Check if initializing happened at all
  • Cache CSF files (v7 store)
  • Call extract() on the store.

How to test

  • Is this testable with Jest or Chromatic screenshots?

Yes I added tests.

I am not quite sure how to test the extract script ahead of time. Can you help me here @ndelangen?

@nx-cloud
Copy link

nx-cloud bot commented Feb 9, 2022

☁️ Nx Cloud Report

CI ran the following commands for commit 609a595. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch


✅ Successfully ran 1 target

Sent with 💌 from NxCloud.

@tmeasday tmeasday added bug core patch:yes Bugfix & documentation PR that need to be picked to main branch labels Feb 9, 2022
@shilman shilman changed the title Add an extract function to PreviewWeb Core/CLI: Add extract function to PreviewWeb and use it in sb extract if available Feb 9, 2022
@@ -12,7 +12,7 @@ const read = async (url: string) => {
await page.goto(url);

await page.waitForFunction(
'window.__STORYBOOK_STORY_STORE__ && window.__STORYBOOK_STORY_STORE__.extract && window.__STORYBOOK_STORY_STORE__.extract()'
'window.__STORYBOOK_PREVIEW__ && window.__STORYBOOK_PREVIEW__.extract && window.__STORYBOOK_PREVIEW__.extract()'
Copy link
Member

Choose a reason for hiding this comment

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

@tmeasday we should fall back to __STORYBOOK_STORY_STORE__ if window.__STORYBOOK_PREVIEW__.extract doesn't exist so that if user runs npx sb extract on an older version of SB, it doesn't error.

Copy link
Member Author

Choose a reason for hiding this comment

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

But aren't they by definition using the right version of SB?

Copy link
Member

Choose a reason for hiding this comment

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

No. extract runs puppeteer against a running storybook. That storybook could be any version AFAIK.

Meanwhile we encourage people to run npx sb so that they get the latest version of the CLI. So as soon as we release this as stable, npx sb will assume that the Storybook it's running against has the changes from this PR (unless the user has installed a specific version of the sb or @storybook/cli package, which we discourage). And that wouldn't be the case unless they've also upgraded their Storybook, which is a completely separate operation.

Copy link
Member Author

Choose a reason for hiding this comment

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

Ahh. OK. Will fix.

Copy link
Member

Choose a reason for hiding this comment

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

@shilman perhaps what we could do is add a test for sb extract targeting a bunch of chromatic storybook URLs, of various versions, this way we can assert we stay compatible?

Copy link
Member Author

Choose a reason for hiding this comment

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

Sounds like a good idea @ndelangen. Would be good to do the same for Chromatic's version of extract also TBH. I'll get the set of uploaded SBs together.

Copy link
Member

Choose a reason for hiding this comment

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

I've updated the code for now and will let somebody follow up with extra tests

@shilman shilman merged commit a3f6512 into next Feb 10, 2022
@shilman shilman deleted the add-preview-extract branch February 10, 2022 06:32
@shilman shilman added the patch:done Patch/release PRs already cherry-picked to main/release branch label Feb 12, 2022
shilman added a commit that referenced this pull request Feb 12, 2022
Core/CLI: Add `extract` function to `PreviewWeb` and use it in `sb extract` if available
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug core 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.

None yet

3 participants