diff --git a/MIGRATION.md b/MIGRATION.md index e5db7ad88c7f..05a071bcec53 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -2,6 +2,9 @@ - [From version 8.5.x to 8.6.x](#from-version-85x-to-86x) - [Angular: Support experimental zoneless support](#angular-support-experimental-zoneless-support) +- [From version 8.4.x to 8.5.x](#from-version-84x-to-85x) + - [React Vite: react-docgen-typescript is updated](#react-vite-react-docgen-typescript-is-updated) + - [Introducing features.developmentModeForBuild](#introducing-featuresdevelopmentmodeforbuild) - [Added source code panel to docs](#added-source-code-panel-to-docs) - [Addon-a11y: Component test integration](#addon-a11y-component-test-integration) - [Addon-a11y: Changing the default element selector](#addon-a11y-changing-the-default-element-selector) @@ -460,6 +463,26 @@ Storybook now supports [Angular's experimental zoneless mode](https://angular.de ## From version 8.4.x to 8.5.x +### React Vite: react-docgen-typescript is updated + +Storybook now uses [react-docgen-typescript](https://github.com/joshwooding/vite-plugin-react-docgen-typescript) v0.5.0 which updates its internal logic on how it parses files, available under an experimental feature flag `EXPERIMENTAL_useWatchProgram`, which is disabled by default. + +Previously, once you made changes to a component's props, the controls and args table would not update unless you restarted Storybook. With the `EXPERIMENTAL_useWatchProgram` flag, you do not need to restart Storybook anymore, however you do need to refresh the browser page. Keep in mind that this flag is experimental and also does not support the `references` field in tsconfig.json files. Depending on how big your codebase is, it might have performance issues. + +```ts +// .storybook/main.ts +const config = { + // ... + typescript: { + reactDocgen: "react-docgen-typescript", + reactDocgenTypescriptOptions: { + EXPERIMENTAL_useWatchProgram: true, + }, + }, +}; +export default config; +``` + ### Introducing features.developmentModeForBuild As part of our ongoing efforts to improve the testability and debuggability of Storybook, we are introducing a new feature flag: `developmentModeForBuild`. This feature flag allows you to set `process.env.NODE_ENV` to `development` in built Storybooks, enabling development-related optimizations that are typically disabled in production builds. @@ -473,7 +496,7 @@ export default { developmentModeForBuild: true, }, }; -```` +``` ### Added source code panel to docs diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json index 14bf0cf0203e..88ffa3407592 100644 --- a/code/frameworks/react-native-web-vite/package.json +++ b/code/frameworks/react-native-web-vite/package.json @@ -56,7 +56,7 @@ "@babel/plugin-transform-modules-commonjs": "^7.26.3", "@babel/preset-react": "^7.26.3", "@bunchtogether/vite-plugin-flow": "^1.0.2", - "@joshwooding/vite-plugin-react-docgen-typescript": "0.4.2", + "@joshwooding/vite-plugin-react-docgen-typescript": "0.5.0", "@storybook/builder-vite": "workspace:*", "@storybook/react": "workspace:*", "@storybook/react-vite": "workspace:*", diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 024a7f8d9ff7..8623eaceadd6 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -57,7 +57,7 @@ "prep": "jiti ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@joshwooding/vite-plugin-react-docgen-typescript": "0.4.2", + "@joshwooding/vite-plugin-react-docgen-typescript": "0.5.0", "@rollup/pluginutils": "^5.0.2", "@storybook/builder-vite": "workspace:*", "@storybook/react": "workspace:*", diff --git a/code/yarn.lock b/code/yarn.lock index e23334919446..41cd9cd171c4 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -4779,10 +4779,11 @@ __metadata: languageName: node linkType: hard -"@joshwooding/vite-plugin-react-docgen-typescript@npm:0.4.2": - version: 0.4.2 - resolution: "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.4.2" +"@joshwooding/vite-plugin-react-docgen-typescript@npm:0.5.0": + version: 0.5.0 + resolution: "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.5.0" dependencies: + glob: "npm:^10.0.0" magic-string: "npm:^0.27.0" react-docgen-typescript: "npm:^2.2.2" peerDependencies: @@ -4791,7 +4792,7 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 10c0/355d13ad92a9da786b561a25250e6c94a8e51d235ced345e54ebfe709abc45ab60c2a8d06599df6ec0441fba01720f189883429943cb62dff9a4c31b59f0939c + checksum: 10c0/dd5bcd01c685c67bcfb4676639f15319937867ad5af0dc083991fe9ae9e66302c72fec53d12e0616a45eadb0ae715bea144d0302f408a44f1eeab14c5160ad4a languageName: node linkType: hard @@ -8624,7 +8625,7 @@ __metadata: "@babel/plugin-transform-modules-commonjs": "npm:^7.26.3" "@babel/preset-react": "npm:^7.26.3" "@bunchtogether/vite-plugin-flow": "npm:^1.0.2" - "@joshwooding/vite-plugin-react-docgen-typescript": "npm:0.4.2" + "@joshwooding/vite-plugin-react-docgen-typescript": "npm:0.5.0" "@storybook/builder-vite": "workspace:*" "@storybook/react": "workspace:*" "@storybook/react-vite": "workspace:*" @@ -8648,7 +8649,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/react-vite@workspace:frameworks/react-vite" dependencies: - "@joshwooding/vite-plugin-react-docgen-typescript": "npm:0.4.2" + "@joshwooding/vite-plugin-react-docgen-typescript": "npm:0.5.0" "@rollup/pluginutils": "npm:^5.0.2" "@storybook/builder-vite": "workspace:*" "@storybook/react": "workspace:*" diff --git a/docs/api/main-config/main-config-typescript.mdx b/docs/api/main-config/main-config-typescript.mdx index 556b7281dda1..e3d1c66afc3f 100644 --- a/docs/api/main-config/main-config-typescript.mdx +++ b/docs/api/main-config/main-config-typescript.mdx @@ -79,7 +79,7 @@ Options to pass to `fork-ts-checker-webpack-plugin`, if [enabled](#check). See [ Type: `ReactDocgenTypescriptOptions` - Configures the options to pass to `react-docgen-typescript-plugin` if `react-docgen-typescript` is enabled. See [docs for available options](https://github.com/hipstersmoothie/react-docgen-typescript-plugin). + Configures the options to pass to `react-docgen-typescript-plugin` if `react-docgen-typescript` is enabled. See docs for available options [for Webpack projects](https://github.com/hipstersmoothie/react-docgen-typescript-plugin) or [for Vite projects](https://github.com/joshwooding/vite-plugin-react-docgen-typescript). {/* prettier-ignore-start */}