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

Add support for storybook v8 #855

Merged
merged 7 commits into from
Mar 15, 2024

Conversation

indigolain
Copy link
Contributor

@indigolain indigolain commented Mar 15, 2024

Accessing __STORYBOOK_CLIENT_API__ became unavailable in storybook version 8 along with some changes in the StoryStore methods like store.raw() which was called from storycrawler.

I think this change should make storycap support storybook version 8 while keeping backward compatibility.

@indigolain indigolain force-pushed the add-support-for-storybook-v8 branch from 63823cc to 321499d Compare March 15, 2024 09:18
@indigolain indigolain force-pushed the add-support-for-storybook-v8 branch from 321499d to 2010922 Compare March 15, 2024 09:51
Comment on lines +26 to +27
- example_dir: examples/v8-react18
node-version: 18.x
Copy link
Contributor Author

Choose a reason for hiding this comment

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

@storybook/react depends on node versions 18 and higher.

return;
}
// for Storybook v5
const stories = api.raw().map(_ => ({ id: _.id, kind: _.kind, story: _.name, version: 'v5' } as Story));
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Version might have been always pointing to v5?
Since version 8 could be distinguishable, I added a change to make it either v5 or v8.

Copy link
Member

Choose a reason for hiding this comment

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

Version might have been always pointing to v5?

Yes. The version field comes from the fact that there was a significant difference in the way to manipulate SB's preview iframe operated between Storybook v4 and v5.

c.f.: https://github.com/reg-viz/storycap/pull/639/files#diff-c1400948b89a47066e7596974308900b8ed46e395b5649f555efc69fab7cb32d

If there is no change in the way to operate the preview iframe in Storybook v8, then I think we can keep the version field v5.

Copy link
Contributor Author

@indigolain indigolain Mar 15, 2024

Choose a reason for hiding this comment

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

I see! Since there seems to be no change in the way to operate the preview iframe in version 8, i brought back the v5 with 456f8eb

@indigolain indigolain force-pushed the add-support-for-storybook-v8 branch from 6f46f11 to f104e77 Compare March 15, 2024 10:07
@indigolain indigolain marked this pull request as ready for review March 15, 2024 10:09
"@storybook/addon-actions": "^8.0.0",
"@storybook/addon-essentials": "^8.0.0",
"@storybook/addon-links": "^8.0.0",
"@storybook/addons": "^7.6.17",
Copy link
Member

Choose a reason for hiding this comment

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

Is this version intentional ?

    "@storybook/addons": "^8.0.0",

I think the following error is related to this version mismatching 🤔

https://github.com/reg-viz/storycap/actions/runs/8294518431/job/22703172139?pr=855#step:7:88

Copy link

@ajkl2533 ajkl2533 Mar 15, 2024

Choose a reason for hiding this comment

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

The @storybook/addons package has been deprecated since v7 was replaced by @storybook/manager-api and @storybook/preview-api.

https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-addons-api

Copy link
Contributor Author

@indigolain indigolain Mar 15, 2024

Choose a reason for hiding this comment

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

Thanks! Yes, the @storybook/addons seems to be replaced, so we need to switch to using @storybook/manager-api and @storybook/preview-api.

However, the following files depend on @storybook/addons.

  • packages/storycap/src/client/register.ts
  • packages/storycap/src/client/with-screenshot.ts

So, I think that if we want to support the older versions of storybook, we might need to do either of the following

  • A: find someway to detect the installed storybook version and maybe dynamically import the corresponding packages
  • B: try to import the @storybook/addons package and fallback to importing @storybook/manager-api or @storybook/preview-api if it's not available

Which way seems better? B may look something like 365331c?

Copy link
Member

Choose a reason for hiding this comment

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

@indigolain Thanks for planning of solution 👍

Your plan B looks good 😸

@Quramy
Copy link
Member

Quramy commented Mar 15, 2024

@indigolain Thanks for your great work !

@Quramy Quramy merged commit 8379d2b into reg-viz:master Mar 15, 2024
9 checks passed
@indigolain
Copy link
Contributor Author

@Quramy
Thank you for reviewing so quickly ✨

@indigolain indigolain deleted the add-support-for-storybook-v8 branch March 15, 2024 16:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants