GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-06 07:21:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #30756 from storybookjs/version-non-patch-from-9.0.0-alpha.1

Browse Source 
Release: Prerelease 9.0.0-alpha.2
This commit is contained in:
Michael Shilman 2025-03-05 23:41:26 +08:00 committed by GitHub
commit 03531abefe
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
953 changed files with 7728 additions and 22395 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.circleci/config.yml
View File

@ -170,7 +170,6 @@ jobs:
- code/bench
- code/examples
- code/frameworks
- code/deprecated
- code/lib
- code/core
- code/builders

17
CHANGELOG.md
View File

@ -1,3 +1,18 @@
## 8.6.3
- CSF Factories: Align addon-essentials import with other addons - [#30716](https://github.com/storybookjs/storybook/pull/30716), thanks @kasperpeulen!
- Next: Support Next 15.2 - [#30702](https://github.com/storybookjs/storybook/pull/30702), thanks @kasperpeulen!
## 8.6.2
- Core: Support TS3.8+ again - [#30700](https://github.com/storybookjs/storybook/pull/30700), thanks @kasperpeulen!
- Revert "CLI: Don't initially select Documentation and Testing features" - [#30694](https://github.com/storybookjs/storybook/pull/30694), thanks @shilman!
## 8.6.1
- CSF: Only export definePreview from the framework - [#30676](https://github.com/storybookjs/storybook/pull/30676), thanks @kasperpeulen!
- Codemod: Only remove types when they are unused - [#30644](https://github.com/storybookjs/storybook/pull/30644), thanks @yannbf!
## 8.6.0
The 8.6 release focuses on [Storybook Test](https://storybook.js.org/blog/storybook-test-sneak-peek/), which brings realtime component, accessibility, and visual UI tests to your favorite component workshop.
@ -22,6 +37,7 @@ Here’s what’s new:
- Addon-Test: Add telemetry data for Focused Tests - [#30568](https://github.com/storybookjs/storybook/pull/30568), thanks @JReinhold!
- Addon-Test: Fix config and watch mode inconsistencies - [#30491](https://github.com/storybookjs/storybook/pull/30491), thanks @JReinhold!
- Addon-Test: Fix console error in build mode - [#30625](https://github.com/storybookjs/storybook/pull/30625), thanks @JReinhold!
- Addon Test: Fix printing Date object in MethodCall for test/interactions log - [#30507](https://github.com/storybookjs/storybook/pull/30507), thanks @ghengeveld!
- Addon-Test: Make sure that only one global portable story config is ever loaded - [#30582](https://github.com/storybookjs/storybook/pull/30582), thanks @kasperpeulen!
- Angular: Fix accent character issue - [#30276](https://github.com/storybookjs/storybook/pull/30276), thanks @valentinpalkovic!
- Angular: Support experimental zoneless mode - [#28657](https://github.com/storybookjs/storybook/pull/28657), thanks @anedomansky!
@ -30,6 +46,7 @@ Here’s what’s new:
- Builder-Vite: Fix runtime and iframe 404 on first load - [#30567](https://github.com/storybookjs/storybook/pull/30567), thanks @valentinpalkovic!
- Bun: Add support for text lock file - [#30160](https://github.com/storybookjs/storybook/pull/30160), thanks @Arctomachine!
- Cleanup: Remove unused constants in viewport addon - [#30479](https://github.com/storybookjs/storybook/pull/30479), thanks @Guria!
- CLI: Add "features" question & auto-install test addon & improve test-addon compatibility - [#30202](https://github.com/storybookjs/storybook/pull/30202), thanks @ndelangen!
- CLI: Don't initially select Documentation and Testing features - [#30599](https://github.com/storybookjs/storybook/pull/30599), thanks @ghengeveld!
- CLI: Fix peer dep issues for npm users during upgrade - [#30616](https://github.com/storybookjs/storybook/pull/30616), thanks @valentinpalkovic!
- CLI: Fix printing of selected features - [#30605](https://github.com/storybookjs/storybook/pull/30605), thanks @ghengeveld!

21
CHANGELOG.prerelease.md
View File

@ -1,3 +1,21 @@
## 9.0.0-alpha.2
- AutoBlocker: Add major version upgrade blocker - [#30714](https://github.com/storybookjs/storybook/pull/30714), thanks @ndelangen!
- CLI: Add index command / API - [#30071](https://github.com/storybookjs/storybook/pull/30071), thanks @shilman!
- CSF Factories: Align addon-essentials import with other addons - [#30716](https://github.com/storybookjs/storybook/pull/30716), thanks @kasperpeulen!
- Core: Move @storybook/instrumenter into core - [#30740](https://github.com/storybookjs/storybook/pull/30740), thanks @valentinpalkovic!
- Core: Support TS3.8+ again - [#30700](https://github.com/storybookjs/storybook/pull/30700), thanks @kasperpeulen!
- Maintenance: Merge `@storybook/core` with `storybook` - [#30168](https://github.com/storybookjs/storybook/pull/30168), thanks @ndelangen!
- Maintenance: Remove deprecated packages - [#30690](https://github.com/storybookjs/storybook/pull/30690), thanks @ndelangen!
- Manager: Add Content-Type to prevent reliance on content type sniffing, fixing Cloud IDEs - [#30606](https://github.com/storybookjs/storybook/pull/30606), thanks @GCHQDeveloper548!
- Next: Support Next 15.2 - [#30702](https://github.com/storybookjs/storybook/pull/30702), thanks @kasperpeulen!
- React: Export returntype of ReactMeta#story - [#30580](https://github.com/storybookjs/storybook/pull/30580), thanks @mrginglymus!
- Revert "CLI: Don't initially select Documentation and Testing features" - [#30694](https://github.com/storybookjs/storybook/pull/30694), thanks @shilman!
- Test Addon: Stabilize and remove experimental status - [#30727](https://github.com/storybookjs/storybook/pull/30727), thanks @valentinpalkovic!
- Typescript: Drop Typescript < 4.9 support - [#30736](https://github.com/storybookjs/storybook/pull/30736), thanks @valentinpalkovic!
- Vite: Improve handling of preview annotations - [#28798](https://github.com/storybookjs/storybook/pull/28798), thanks @tobiasdiez!
- Vite: Include `node_modules` in stats file - [#30711](https://github.com/storybookjs/storybook/pull/30711), thanks @JReinhold!
## 9.0.0-alpha.1
- CLI: Install prereleases of `@chromatic-com/storybook` - [#30662](https://github.com/storybookjs/storybook/pull/30662), thanks @JReinhold!
@ -74,11 +92,14 @@
## 8.6.0-beta.0
- Addon Test: Fix printing Date object in MethodCall for test/interactions log - [#30507](https://github.com/storybookjs/storybook/pull/30507), thanks @ghengeveld!
- Addon A11y: Introduce parameters.a11y.test - [#30516](https://github.com/storybookjs/storybook/pull/30516), thanks @valentinpalkovic!
- Addon-Docs: Change URL hash when TOC item is clicked, and fix TOC loading bugs - [#30130](https://github.com/storybookjs/storybook/pull/30130), thanks @Sidnioulz!
- Addon-Test: Fix config and watch mode inconsistencies - [#30491](https://github.com/storybookjs/storybook/pull/30491), thanks @JReinhold!
- Addon-docs: Consider custom code snippet in story code panel and update styles - [#30179](https://github.com/storybookjs/storybook/pull/30179), thanks @larsrickert!
- Builder-Vite: Fix resolve id warning - [#30511](https://github.com/storybookjs/storybook/pull/30511), thanks @valentinpalkovic!
- Builder-Vite: Fix Turbosnap - [#30522](https://github.com/storybookjs/storybook/pull/30522), thanks @valentinpalkovic!
- CLI: Add "features" question & auto-install test addon & improve test-addon compatibility - [#30202](https://github.com/storybookjs/storybook/pull/30202), thanks @ndelangen!
- CSF: Add support for CSF factories - [#30197](https://github.com/storybookjs/storybook/pull/30197), thanks @kasperpeulen!
- Cleanup: Remove unused constants in viewport addon - [#30479](https://github.com/storybookjs/storybook/pull/30479), thanks @Guria!
- Svelte: Fix conflicting variable names and support for `+page.svelte` files - [#30369](https://github.com/storybookjs/storybook/pull/30369), thanks @xeho91!

62
MIGRATION.md
View File

@ -1,5 +1,8 @@
<h1>Migration</h1>
- [From version 8.x to 9.0.0](#from-version-8x-to-900)
- [Dropped support for TypeScript \< 4.9](#dropped-support-for-typescript--49)
- [Test addon renamed from experimental to stable](#test-addon-renamed-from-experimental-to-stable)
- [From version 8.5.x to 8.6.x](#from-version-85x-to-86x)
- [Angular: Support experimental zoneless support](#angular-support-experimental-zoneless-support)
- [Addon-a11y: Replaced experimental `ally-test` tag behavior with `parameters.a11y.test`](#addon-a11y-replaced-experimental-ally-test-tag-behavior-with-parametersa11ytest)
@ -117,17 +120,17 @@
- [Tab addons cannot manually route, Tool addons can filter their visibility via tabId](#tab-addons-cannot-manually-route-tool-addons-can-filter-their-visibility-via-tabid)
- [Removed `config` preset](#removed-config-preset-1)
- [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
- [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
- [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
- [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated)
- [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
- [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react)
- [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
- [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
- [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated)
- [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
- [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react)
- [From version 7.4.0 to 7.5.0](#from-version-740-to-750)
- [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
- [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
- [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
- [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
- [From version 7.0.0 to 7.2.0](#from-version-700-to-720)
- [Addon API is more type-strict](#addon-api-is-more-type-strict)
- [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated)
- [Addon API is more type-strict](#addon-api-is-more-type-strict)
- [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated)
- [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
- [7.0 breaking changes](#70-breaking-changes)
- [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below)
@ -153,7 +156,7 @@
- [Deploying build artifacts](#deploying-build-artifacts)
- [Dropped support for file URLs](#dropped-support-for-file-urls)
- [Serving with nginx](#serving-with-nginx)
- [Ignore story files from node\_modules](#ignore-story-files-from-node_modules)
- [Ignore story files from node_modules](#ignore-story-files-from-node_modules)
- [7.0 Core changes](#70-core-changes)
- [7.0 feature flags removed](#70-feature-flags-removed)
- [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates)
@ -167,7 +170,7 @@
- [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default)
- [7.0 Vite changes](#70-vite-changes)
- [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically)
- [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
- [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
- [7.0 Webpack changes](#70-webpack-changes)
- [Webpack4 support discontinued](#webpack4-support-discontinued)
- [Babel mode v7 exclusively](#babel-mode-v7-exclusively)
@ -218,7 +221,7 @@
- [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration)
- [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
- [Autoplay in docs](#autoplay-in-docs)
- [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global)
- [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global)
- [7.0 Deprecations and default changes](#70-deprecations-and-default-changes)
- [storyStoreV7 enabled by default](#storystorev7-enabled-by-default)
- [`Story` type deprecated](#story-type-deprecated)
@ -431,6 +434,41 @@
- [Packages renaming](#packages-renaming)
- [Deprecated embedded addons](#deprecated-embedded-addons)
## From version 8.x to 9.0.0
### Dropped support for TypeScript < 4.9
Storybook now requires TypeScript 4.9 or later. If you're using an older version of TypeScript, you'll need to upgrade to continue using Storybook.
### Test addon renamed from experimental to stable
In Storybook 9.0, we've officially stabilized the Test addon. The package has been renamed from `@storybook/experimental-addon-test` to `@storybook/addon-test`, reflecting its production-ready status. If you were using the experimental addon, you'll need to update your dependencies and imports:
```diff
- npm install --save-dev @storybook/experimental-addon-test
+ npm install --save-dev @storybook/addon-test
```
Update your imports in any custom configuration or test files:
```diff
- import { ... } from '@storybook/experimental-addon-test';
+ import { ... } from '@storybook/addon-test';
```
If you're using the addon in your Storybook configuration, update your `.storybook/main.js` or `.storybook/main.ts`:
```diff
export default {
addons: [
- '@storybook/experimental-addon-test',
+ '@storybook/addon-test',
],
};
```
The public API remains the same, so no additional changes should be needed in your test files or configuration.
## From version 8.5.x to 8.6.x
### Angular: Support experimental zoneless support

2
code/.storybook/bench.stories.tsx
View File

@ -49,7 +49,7 @@ export default {
subEntry !== 'metafile' ? `${pkgName} - ${subEntry}` : pkgName,
];
})
.concat([['core - core', '@storybook/core - core - TOO BIG PLEASE UPLOAD MANUALLY']])
.concat([['core - core', 'core - TOO BIG PLEASE UPLOAD MANUALLY']])
),
},
},

8
code/.storybook/main.ts
View File

@ -2,8 +2,8 @@ import { join } from 'node:path';
import { defineMain } from '../frameworks/react-vite/src/node';
const componentsPath = join(__dirname, '../core/src/components');
const managerApiPath = join(__dirname, '../core/src/manager-api');
const componentsPath = join(__dirname, '../core/src/components/index.ts');
const managerApiPath = join(__dirname, '../core/src/manager-api/index.ts');
const imageContextPath = join(__dirname, '../frameworks/nextjs/src/image-context.ts');
const config = defineMain({
@ -99,7 +99,7 @@ const config = defineMain({
'@storybook/addon-essentials',
'@storybook/addon-storysource',
'@storybook/addon-designs',
'@storybook/experimental-addon-test',
'@storybook/addon-test',
'@storybook/addon-a11y',
'@chromatic-com/storybook',
],
@ -143,9 +143,7 @@ const config = defineMain({
alias: {
...(configType === 'DEVELOPMENT'
? {
'@storybook/components': componentsPath,
'storybook/internal/components': componentsPath,
'@storybook/manager-api': managerApiPath,
'storybook/internal/manager-api': managerApiPath,
'sb-original/image-context': imageContextPath,
}

8
code/.storybook/preview.tsx
View File

@ -21,11 +21,11 @@ import type { Decorator, Loader, ReactRenderer } from '@storybook/react';
// TODO add empty preview
// import * as storysource from '@storybook/addon-storysource';
// import * as designs from '@storybook/addon-designs/preview';
import addonTest from '@storybook/experimental-addon-test';
import { definePreview } from '@storybook/react-vite';
import addonA11y from '@storybook/addon-a11y';
import addonEssentials from '@storybook/addon-essentials';
import addonTest from '@storybook/addon-test';
import addonThemes from '@storybook/addon-themes';
import * as addonsPreview from '../addons/toolbars/template/stories/preview';
@ -130,9 +130,6 @@ const ThemedSetRoot = () => {
return null;
};
// eslint-disable-next-line no-underscore-dangle
const preview = (window as any).__STORYBOOK_PREVIEW__ as PreviewWeb<ReactRenderer> | undefined;
const channel = (window as any).__STORYBOOK_ADDONS_CHANNEL__ as Channel | undefined;
const loaders = [
/**
* This loader adds a DocsContext to the story, which is required for the most Blocks to work. A
@ -147,6 +144,9 @@ const loaders = [
* The DocsContext will then be added via the decorator below.
*/
async ({ parameters: { relativeCsfPaths, attached = true } }) => {
// eslint-disable-next-line no-underscore-dangle
const preview = (window as any).__STORYBOOK_PREVIEW__ as PreviewWeb<ReactRenderer> | undefined;
const channel = (window as any).__STORYBOOK_ADDONS_CHANNEL__ as Channel | undefined;
// __STORYBOOK_PREVIEW__ and __STORYBOOK_ADDONS_CHANNEL__ is set in the PreviewWeb constructor
// which isn't loaded in portable stories/vitest
if (!relativeCsfPaths || !preview || !channel) {

4
code/.storybook/vitest.config.ts
View File

@ -22,7 +22,7 @@ export default mergeConfig(
// @ts-expect-error added this because of testNamePattern below
defineProject({
plugins: [
import('@storybook/experimental-addon-test/vitest-plugin').then(({ storybookTest }) =>
import('@storybook/addon-test/vitest-plugin').then(({ storybookTest }) =>
storybookTest({
configDir: __dirname,
tags: {
@ -42,7 +42,7 @@ export default mergeConfig(
'**/Zoom.stories.tsx', // expected to fail in Vitest because of fetching /iframe.html to cause ECONNREFUSED
'**/lib/blocks/src/**', // won't work because of https://github.com/storybookjs/storybook/issues/29783
],
// TODO: bring this back once portable stories support @storybook/core/preview-api hooks
// TODO: bring this back once portable stories support storybook/internal/preview-api hooks
// @ts-expect-error this type does not exist but the property does!
testNamePattern: /^(?!.*(UseState)).*$/,
browser: {

2
code/addons/a11y/src/components/Tabs.tsx
View File

@ -9,7 +9,7 @@ import type { RuleType } from './A11YPanel';
import { useA11yContext } from './A11yContext';
import HighlightToggle from './Report/HighlightToggle';
// TODO: reuse the Tabs component from @storybook/theming instead of re-building identical functionality
// TODO: reuse the Tabs component from storybook/internal/theming instead of re-building identical functionality
const Container = styled.div({
width: '100%',

4
code/addons/a11y/src/postinstall.ts
View File

@ -1,8 +1,8 @@
import type { PostinstallOptions } from '@storybook/cli/src/add';
// eslint-disable-next-line depend/ban-dependencies
import { execa } from 'execa';
import type { PostinstallOptions } from '../../../lib/cli-storybook/src/add';
const $ = execa({
preferLocal: true,
stdio: 'inherit',

1
code/addons/a11y/src/preview.tsx
View File

@ -58,6 +58,7 @@ export const experimental_afterEach: AfterEach<any> = async ({
if (getIsVitestStandaloneRun()) {
if (hasViolations && getMode() === 'failed') {
if (!vitestMatchersExtended) {
// @ts-expect-error (unknown why vitest-axe is not typed correctly)
const { toHaveNoViolations } = await import('vitest-axe/matchers');
expect.extend({ toHaveNoViolations });
vitestMatchersExtended = true;

2
code/addons/actions/src/decorator.ts
View File

@ -53,7 +53,7 @@ const applyEventHandlers = (actionsFn: any, ...handles: any[]) => {
}, [root, actionsFn, handles]);
};
// This type is basically the same as DecoratorFunction from @storybook/types.
// This type is basically the same as DecoratorFunction from storybook/internal/types.
// We can not use DecoratorFunction though as the type has to be generic.
// Hard to explain, but you will understand when you try to solve this issue:
// https://github.com/storybookjs/storybook/issues/22384

40
code/addons/docs/src/compiler/index.test.ts
View File

@ -36,9 +36,9 @@ describe('mdx3', () => {
function _createMdxContent(props) {
return _jsx("style", {
children: \`
h1 {
color: blue;
}
h1 {
color: blue;
}
\`
});
}
@ -645,23 +645,23 @@ describe('docs-mdx-compiler-plugin', () => {
title: "Example/Introduction"
}), "\\n", _jsx("style", {
children: \`
.subheading {
--mediumdark: '#999999';
font-weight: 900;
font-size: 13px;
color: #999;
letter-spacing: 6px;
line-height: 24px;
text-transform: uppercase;
margin-bottom: 12px;
margin-top: 40px;
}
.link-list {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
row-gap: 10px;
}
.subheading {
--mediumdark: '#999999';
font-weight: 900;
font-size: 13px;
color: #999;
letter-spacing: 6px;
line-height: 24px;
text-transform: uppercase;
margin-bottom: 12px;
margin-top: 40px;
}
.link-list {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
row-gap: 10px;
}
\`
})]
});

37
code/addons/docs/src/preset.ts
View File

@ -69,15 +69,7 @@ async function webpack(
* Add aliases for `@storybook/addon-docs` & `@storybook/blocks` These must be singletons to avoid
* multiple instances of react & emotion being loaded, both would cause the components to fail to
* render.
*
* In the future the `@storybook/theming` and `@storybook/components` can be removed, as they
* should be singletons in the future due to the peerDependency on `storybook` package.
*/
const cliPath = dirname(require.resolve('storybook/package.json'));
const themingPath = join(cliPath, 'core', 'theming', 'index.js');
const themingCreatePath = join(cliPath, 'core', 'theming', 'create.js');
const componentsPath = join(cliPath, 'core', 'components', 'index.js');
const blocksPath = dirname(require.resolve('@storybook/blocks/package.json'));
if (Array.isArray(webpackConfig.resolve?.alias)) {
alias = [...webpackConfig.resolve?.alias];
@ -94,18 +86,6 @@ async function webpack(
name: '@mdx-js/react',
alias: mdx,
},
{
name: '@storybook/theming/create',
alias: themingCreatePath,
},
{
name: '@storybook/theming',
alias: themingPath,
},
{
name: '@storybook/components',
alias: componentsPath,
},
{
name: '@storybook/blocks',
alias: blocksPath,
@ -115,9 +95,6 @@ async function webpack(
alias = {
...webpackConfig.resolve?.alias,
react,
'@storybook/theming/create': themingCreatePath,
'@storybook/theming': themingPath,
'@storybook/components': componentsPath,
'@storybook/blocks': blocksPath,
'react-dom': reactDom,
@ -175,16 +152,9 @@ export const viteFinal = async (config: any, options: Options) => {
const { plugins = [] } = config;
const { mdxPlugin } = await import('./plugins/mdx-plugin');
const rehypeSlug = (await import('rehype-slug')).default;
const rehypeExternalLinks = (await import('rehype-external-links')).default;
// Use the resolvedReact preset to alias react and react-dom to either the users version or the version shipped with addon-docs
const { react, reactDom, mdx } = await getResolvedReact(options);
const cliPath = dirname(require.resolve('storybook/package.json'));
const themingPath = join(cliPath, 'core', 'theming', 'index.js');
const themingCreatePath = join(cliPath, 'core', 'theming', 'create.js');
const componentsPath = join(cliPath, 'core', 'components', 'index.js');
const blocksPath = dirname(require.resolve('@storybook/blocks/package.json'));
const packageDeduplicationPlugin = {
@ -202,14 +172,7 @@ export const viteFinal = async (config: any, options: Options) => {
* Add aliases for `@storybook/addon-docs` & `@storybook/blocks` These must be singletons
* to avoid multiple instances of react & emotion being loaded, both would cause the
* components to fail to render.
*
* In the future the `@storybook/theming` and `@storybook/components` can be removed, as
* they should be singletons in the future due to the peerDependency on `storybook`
* package.
*/
'@storybook/theming/create': themingCreatePath,
'@storybook/theming': themingPath,
'@storybook/components': componentsPath,
'@storybook/blocks': blocksPath,
},
},

2
code/addons/docs/src/types.ts
View File

@ -1,4 +1,4 @@
import type { ModuleExport, ModuleExports } from '@storybook/types';
import type { ModuleExport, ModuleExports } from 'storybook/internal/types';
type StoryBlockParameters = {
/** Whether a story's play function runs when shown in docs page */

1
code/addons/essentials/src/actions/manager.ts
View File

@ -1 +1,2 @@
// @ts-expect-error (no types needed for this)
export * from '@storybook/addon-actions/manager';

1
code/addons/essentials/src/backgrounds/manager.ts
View File

@ -1 +1,2 @@
// @ts-expect-error (no types)
export * from '@storybook/addon-backgrounds/manager';

1
code/addons/essentials/src/outline/manager.ts
View File

@ -1 +1,2 @@
// @ts-expect-error (no types)
export * from '@storybook/addon-outline/manager';

1
code/addons/essentials/src/viewport/manager.ts
View File

@ -1 +1,2 @@
// @ts-expect-error (no types)
export * from '@storybook/addon-viewport/manager';

1
code/addons/interactions/package.json
View File

@ -63,7 +63,6 @@
},
"dependencies": {
"@storybook/global": "^5.0.0",
"@storybook/instrumenter": "workspace:*",
"@storybook/test": "workspace:*",
"polished": "^4.2.2",
"ts-dedent": "^2.2.0"

2
code/addons/interactions/src/Panel.test.ts
View File

@ -1,7 +1,7 @@
// @vitest-environment happy-dom
import { describe, expect, it } from 'vitest';
import { type Call, CallStates, type LogItem } from '@storybook/instrumenter';
import { type Call, CallStates, type LogItem } from 'storybook/internal/instrumenter';
import { getInteractions } from './Panel';

2
code/addons/interactions/src/Panel.tsx
View File

@ -8,10 +8,10 @@ import {
STORY_THREW_EXCEPTION,
UNHANDLED_ERRORS_WHILE_PLAYING,
} from 'storybook/internal/core-events';
import { type Call, CallStates, EVENTS, type LogItem } from 'storybook/internal/instrumenter';
import { useAddonState, useChannel, useParameter } from 'storybook/internal/manager-api';
import { global } from '@storybook/global';
import { type Call, CallStates, EVENTS, type LogItem } from '@storybook/instrumenter';
import { InteractionsPanel } from './components/InteractionsPanel';
import { ADDON_ID } from './constants';

3
code/addons/interactions/src/components/Interaction.stories.tsx
View File

@ -1,4 +1,5 @@
import { CallStates } from '@storybook/instrumenter';
import { CallStates } from 'storybook/internal/instrumenter';
import type { Meta, StoryObj } from '@storybook/react';
import { expect, userEvent, within } from '@storybook/test';

2
code/addons/interactions/src/components/Interaction.tsx
View File

@ -1,10 +1,10 @@
import * as React from 'react';
import { IconButton, TooltipNote, WithTooltip } from 'storybook/internal/components';
import { type Call, CallStates, type ControlStates } from 'storybook/internal/instrumenter';
import { styled, typography } from 'storybook/internal/theming';
import { ListUnorderedIcon } from '@storybook/icons';
import { type Call, CallStates, type ControlStates } from '@storybook/instrumenter';
import { transparentize } from 'polished';

2
code/addons/interactions/src/components/InteractionsPanel.stories.tsx
View File

@ -1,8 +1,8 @@
import React from 'react';
import { CallStates } from 'storybook/internal/instrumenter';
import { styled } from 'storybook/internal/theming';
import { CallStates } from '@storybook/instrumenter';
import type { Meta, StoryObj } from '@storybook/react';
import { expect, userEvent, waitFor, within } from '@storybook/test';

3
code/addons/interactions/src/components/InteractionsPanel.tsx
View File

@ -1,9 +1,8 @@
import * as React from 'react';
import { type Call, CallStates, type ControlStates } from 'storybook/internal/instrumenter';
import { styled } from 'storybook/internal/theming';
import { type Call, CallStates, type ControlStates } from '@storybook/instrumenter';
import { transparentize } from 'polished';
import { isTestAssertionError, useAnsiToHtmlFilter } from '../utils';

3
code/addons/interactions/src/components/MethodCall.stories.tsx
View File

@ -1,9 +1,8 @@
import React from 'react';
import type { Call } from 'storybook/internal/instrumenter';
import { styled, typography } from 'storybook/internal/theming';
import type { Call } from '@storybook/instrumenter';
import { MethodCall, Node } from './MethodCall';
const StyledWrapper = styled.div(({ theme }) => ({

3
code/addons/interactions/src/components/MethodCall.tsx
View File

@ -1,10 +1,9 @@
import type { ReactElement } from 'react';
import React, { Fragment } from 'react';
import type { Call, CallRef, ElementRef } from 'storybook/internal/instrumenter';
import { useTheme } from 'storybook/internal/theming';
import type { Call, CallRef, ElementRef } from '@storybook/instrumenter';
import { ObjectInspector } from '@devtools-ds/object-inspector';
const colorsLight = {

2
code/addons/interactions/src/components/StatusBadge.stories.tsx
View File

@ -1,4 +1,4 @@
import { CallStates } from '@storybook/instrumenter';
import { CallStates } from 'storybook/internal/instrumenter';
import { StatusBadge } from './StatusBadge';

3
code/addons/interactions/src/components/StatusBadge.tsx
View File

@ -1,9 +1,8 @@
import React from 'react';
import { type Call, CallStates } from 'storybook/internal/instrumenter';
import { styled, typography } from 'storybook/internal/theming';
import { type Call, CallStates } from '@storybook/instrumenter';
export interface StatusBadgeProps {
status: Call['status'];
}

2
code/addons/interactions/src/components/StatusIcon.stories.tsx
View File

@ -1,4 +1,4 @@
import { CallStates } from '@storybook/instrumenter';
import { CallStates } from 'storybook/internal/instrumenter';
import { StatusIcon } from './StatusIcon';

2
code/addons/interactions/src/components/StatusIcon.tsx
View File

@ -1,9 +1,9 @@
import React from 'react';
import { type Call, CallStates } from 'storybook/internal/instrumenter';
import { styled, useTheme } from 'storybook/internal/theming';
import { CheckIcon, CircleIcon, PlayIcon, StopAltIcon } from '@storybook/icons';
import { type Call, CallStates } from '@storybook/instrumenter';
import { transparentize } from 'polished';

2
code/addons/interactions/src/components/Subnav.stories.tsx
View File

@ -1,4 +1,4 @@
import { CallStates } from '@storybook/instrumenter';
import { CallStates } from 'storybook/internal/instrumenter';
import { action } from '@storybook/addon-actions';

4
code/addons/interactions/src/components/Subnav.tsx
View File

@ -10,6 +10,8 @@ import {
TooltipNote,
WithTooltip,
} from 'storybook/internal/components';
import type { Call, ControlStates } from 'storybook/internal/instrumenter';
import { CallStates } from 'storybook/internal/instrumenter';
import { styled } from 'storybook/internal/theming';
import {
@ -19,8 +21,6 @@ import {
RewindIcon,
SyncIcon,
} from '@storybook/icons';
import type { Call, ControlStates } from '@storybook/instrumenter';
import { CallStates } from '@storybook/instrumenter';
import type { Controls } from './InteractionsPanel';
import { StatusBadge } from './StatusBadge';

2
code/addons/interactions/src/mocks/index.ts
View File

@ -1,4 +1,4 @@
import { type Call, CallStates } from '@storybook/instrumenter';
import { type Call, CallStates } from 'storybook/internal/instrumenter';
export const getCalls = (finalStatus: CallStates) => {
const calls: Call[] = [

2
code/addons/interactions/src/preview.ts
View File

@ -1,6 +1,6 @@
import { instrument } from 'storybook/internal/instrumenter';
import type { PlayFunction, StepLabel, StepRunner, StoryContext } from 'storybook/internal/types';
import { instrument } from '@storybook/instrumenter';
// This makes sure that storybook test loaders are always loaded when addon-interactions is used
// For 9.0 we want to merge storybook/test and addon-interactions into one addon.
import '@storybook/test';

2
code/addons/links/scripts/fix-preview-api-reference.ts
View File

@ -8,7 +8,7 @@ const run = async () => {
const content = await readFile('./dist/index.d.ts', 'utf-8');
const regexp = /'lib\/preview-api/;
const replaced = content.replace(regexp, "'@storybook/preview-api");
const replaced = content.replace(regexp, "'storybook/internal/preview-api");
await writeFile('./dist/index.d.ts', replaced);
};

2
code/addons/test/README.md
View File

@ -1,3 +1,3 @@
# Storybook Addon Vitest (Experimental)
# Storybook Addon Test
Addon to integrate Vitest test results with Storybook.

5
code/addons/test/package.json
View File

@ -1,7 +1,7 @@
{
"name": "@storybook/experimental-addon-test",
"name": "@storybook/addon-test",
"version": "9.0.0-alpha.1",
"description": "Integrate Vitest with Storybook",
"description": "Storybook addon for testing components",
"keywords": [
"storybook-addons",
"addon-test",
@ -100,7 +100,6 @@
"dependencies": {
"@storybook/global": "^5.0.0",
"@storybook/icons": "^1.2.12",
"@storybook/instrumenter": "workspace:*",
"@storybook/test": "workspace:*",
"polished": "^4.2.2",
"prompts": "^2.4.0",

2
code/addons/test/project.json
View File

@ -1,5 +1,5 @@
{
"name": "experimental-addon-test",
"name": "addon-test",
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"projectType": "library",
"targets": {

3
code/addons/test/src/components/Interaction.stories.tsx
View File

@ -1,4 +1,5 @@
import { CallStates } from '@storybook/instrumenter';
import { CallStates } from 'storybook/internal/instrumenter';
import type { Meta, StoryObj } from '@storybook/react';
import { expect, userEvent, within } from '@storybook/test';

2
code/addons/test/src/components/Interaction.tsx
View File

@ -1,10 +1,10 @@
import * as React from 'react';
import { IconButton, TooltipNote, WithTooltip } from 'storybook/internal/components';
import { type Call, CallStates, type ControlStates } from 'storybook/internal/instrumenter';
import { styled, typography } from 'storybook/internal/theming';
import { ListUnorderedIcon } from '@storybook/icons';
import { type Call, CallStates, type ControlStates } from '@storybook/instrumenter';
import { transparentize } from 'polished';

2
code/addons/test/src/components/InteractionsPanel.stories.tsx
View File

@ -1,9 +1,9 @@
import React from 'react';
import { CallStates } from 'storybook/internal/instrumenter';
import { ManagerContext } from 'storybook/internal/manager-api';
import { styled } from 'storybook/internal/theming';
import { CallStates } from '@storybook/instrumenter';
import type { Meta, StoryObj } from '@storybook/react';
import { expect, fn, userEvent, waitFor, within } from '@storybook/test';

5
code/addons/test/src/components/InteractionsPanel.tsx
View File

@ -1,11 +1,10 @@
import * as React from 'react';
import type { CallStates } from 'storybook/internal/instrumenter';
import { type Call, type ControlStates } from 'storybook/internal/instrumenter';
import { styled } from 'storybook/internal/theming';
import type { StoryId } from 'storybook/internal/types';
import type { CallStates } from '@storybook/instrumenter';
import { type Call, type ControlStates } from '@storybook/instrumenter';
import { transparentize } from 'polished';
import { isTestAssertionError, useAnsiToHtmlFilter } from '../utils';

3
code/addons/test/src/components/MethodCall.stories.tsx
View File

@ -1,9 +1,8 @@
import React from 'react';
import type { Call } from 'storybook/internal/instrumenter';
import { styled, typography } from 'storybook/internal/theming';
import type { Call } from '@storybook/instrumenter';
import { MethodCall, Node } from './MethodCall';
const StyledWrapper = styled.div(({ theme }) => ({

3
code/addons/test/src/components/MethodCall.tsx
View File

@ -1,10 +1,9 @@
import type { ReactElement } from 'react';
import React, { Fragment } from 'react';
import type { Call, CallRef, ElementRef } from 'storybook/internal/instrumenter';
import { useTheme } from 'storybook/internal/theming';
import type { Call, CallRef, ElementRef } from '@storybook/instrumenter';
import { ObjectInspector } from '@devtools-ds/object-inspector';
const colorsLight = {

2
code/addons/test/src/components/Panel.test.ts
View File

@ -1,7 +1,7 @@
// @vitest-environment happy-dom
import { describe, expect, it } from 'vitest';
import { type Call, CallStates, type LogItem } from '@storybook/instrumenter';
import { type Call, CallStates, type LogItem } from 'storybook/internal/instrumenter';
import { getInteractions } from './Panel';

4
code/addons/test/src/components/Panel.tsx
View File

@ -8,16 +8,16 @@ import {
STORY_THREW_EXCEPTION,
UNHANDLED_ERRORS_WHILE_PLAYING,
} from 'storybook/internal/core-events';
import { type Call, CallStates, EVENTS, type LogItem } from 'storybook/internal/instrumenter';
import {
useAddonState,
useChannel,
useParameter,
useStorybookState,
} from 'storybook/internal/manager-api';
import type { API_StatusValue } from 'storybook/internal/types';
import { global } from '@storybook/global';
import { type Call, CallStates, EVENTS, type LogItem } from '@storybook/instrumenter';
import type { API_StatusValue } from '@storybook/types';
import { ADDON_ID, STORYBOOK_ADDON_TEST_CHANNEL, TEST_PROVIDER_ID } from '../constants';
import { InteractionsPanel } from './InteractionsPanel';

2
code/addons/test/src/components/StatusBadge.stories.tsx
View File

@ -1,4 +1,4 @@
import { CallStates } from '@storybook/instrumenter';
import { CallStates } from 'storybook/internal/instrumenter';
import { StatusBadge } from './StatusBadge';

3
code/addons/test/src/components/StatusBadge.tsx
View File

@ -1,9 +1,8 @@
import React from 'react';
import { type Call, CallStates } from 'storybook/internal/instrumenter';
import { styled, typography } from 'storybook/internal/theming';
import { type Call, CallStates } from '@storybook/instrumenter';
export interface StatusBadgeProps {
status: Call['status'];
}

2
code/addons/test/src/components/StatusIcon.stories.tsx
View File

@ -1,4 +1,4 @@
import { CallStates } from '@storybook/instrumenter';
import { CallStates } from 'storybook/internal/instrumenter';
import { StatusIcon } from './StatusIcon';

2
code/addons/test/src/components/StatusIcon.tsx
View File

@ -1,9 +1,9 @@
import React from 'react';
import { type Call, CallStates } from 'storybook/internal/instrumenter';
import { styled, useTheme } from 'storybook/internal/theming';
import { CheckIcon, CircleIcon, PlayIcon, StopAltIcon } from '@storybook/icons';
import { type Call, CallStates } from '@storybook/instrumenter';
import { transparentize } from 'polished';

2
code/addons/test/src/components/Subnav.stories.tsx
View File

@ -1,4 +1,4 @@
import { CallStates } from '@storybook/instrumenter';
import { CallStates } from 'storybook/internal/instrumenter';
import { action } from '@storybook/addon-actions';

4
code/addons/test/src/components/Subnav.tsx
View File

@ -10,6 +10,8 @@ import {
TooltipNote,
WithTooltip,
} from 'storybook/internal/components';
import type { Call, ControlStates } from 'storybook/internal/instrumenter';
import { CallStates } from 'storybook/internal/instrumenter';
import { styled } from 'storybook/internal/theming';
import {
@ -19,8 +21,6 @@ import {
RewindIcon,
SyncIcon,
} from '@storybook/icons';
import type { Call, ControlStates } from '@storybook/instrumenter';
import { CallStates } from '@storybook/instrumenter';
import type { Controls } from './InteractionsPanel';
import { StatusBadge } from './StatusBadge';

2
code/addons/test/src/components/TestDiscrepancyMessage.stories.tsx
View File

@ -1,8 +1,8 @@
import React from 'react';
import { CallStates } from 'storybook/internal/instrumenter';
import { ManagerContext } from 'storybook/internal/manager-api';
import { CallStates } from '@storybook/instrumenter';
import type { Meta, StoryObj } from '@storybook/react';
import { fn } from '@storybook/test';

3
code/addons/test/src/components/TestDiscrepancyMessage.tsx
View File

@ -1,11 +1,10 @@
import React from 'react';
import { Link } from 'storybook/internal/components';
import { CallStates } from 'storybook/internal/instrumenter';
import { useStorybookApi } from 'storybook/internal/manager-api';
import { styled } from 'storybook/internal/theming';
import { CallStates } from '@storybook/instrumenter';
import { DOCUMENTATION_DISCREPANCY_LINK } from '../constants';
const Wrapper = styled.div(({ theme: { color, typography, background } }) => ({

2
code/addons/test/src/index.ts
View File

@ -9,7 +9,7 @@ export type { TestParameters } from './types';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore-error - this is a hack to make the module's sub-path augmentable
declare module '@storybook/experimental-addon-test/vitest-plugin' {
declare module '@storybook/addon-test/vitest-plugin' {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore-error - this is a hack to make the module's sub-path augmentable
export const storybookTest: typeof storybookTestImport;

2
code/addons/test/src/mocks/index.ts
View File

@ -1,4 +1,4 @@
import { type Call, CallStates } from '@storybook/instrumenter';
import { type Call, CallStates } from 'storybook/internal/instrumenter';
export const getCalls = (finalStatus: CallStates) => {
const calls: Call[] = [

5
code/addons/test/src/node/boot-test-runner.test.ts
View File

@ -1,12 +1,11 @@
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import { Channel, type ChannelTransport } from '@storybook/core/channels';
import { Channel, type ChannelTransport } from 'storybook/internal/channels';
import {
TESTING_MODULE_CANCEL_TEST_RUN_REQUEST,
TESTING_MODULE_PROGRESS_REPORT,
TESTING_MODULE_RUN_REQUEST,
} from '@storybook/core/core-events';
} from 'storybook/internal/core-events';
// eslint-disable-next-line depend/ban-dependencies
import { execaNode } from 'execa';

3
code/addons/test/src/node/reporter.ts
View File

@ -8,8 +8,7 @@ import type {
TestingModuleProgressReportProgress,
} from 'storybook/internal/core-events';
import type { Report } from 'storybook/internal/preview-api';
import type { API_StatusUpdate } from '@storybook/types';
import type { API_StatusUpdate } from 'storybook/internal/types';
import type { Suite } from '@vitest/runner';
import { throttle } from 'es-toolkit';

7
code/addons/test/src/node/test-manager.test.ts
View File

@ -1,10 +1,9 @@
import { beforeEach, describe, expect, it, vi } from 'vitest';
import { describe, expect, it, vi } from 'vitest';
import { createVitest as actualCreateVitest } from 'vitest/node';
import { Channel, type ChannelTransport } from 'storybook/internal/channels';
import { experimental_MockUniversalStore } from 'storybook/internal/core-server';
import { Channel, type ChannelTransport } from '@storybook/core/channels';
import type { StoryIndex } from '@storybook/types';
import type { StoryIndex } from 'storybook/internal/types';
import path from 'pathe';

5
code/addons/test/src/node/vitest-manager.ts
View File

@ -13,8 +13,7 @@ import * as vitestNode from 'vitest/node';
import { resolvePathInStorybookCache } from 'storybook/internal/common';
import type { TestingModuleRunRequestPayload } from 'storybook/internal/core-events';
import type { DocsIndexEntry, StoryIndex, StoryIndexEntry } from '@storybook/types';
import type { DocsIndexEntry, StoryIndex, StoryIndexEntry } from 'storybook/internal/types';
import { findUp } from 'find-up';
import path, { dirname, join, normalize } from 'pathe';
@ -36,7 +35,7 @@ type TagsFilter = {
skip: string[];
};
const packageDir = dirname(require.resolve('@storybook/experimental-addon-test/package.json'));
const packageDir = dirname(require.resolve('@storybook/addon-test/package.json'));
const vitestVersion = vitestNode.version;
const isVitest3OrLater = vitestVersion

8
code/addons/test/src/postinstall.ts
View File

@ -31,7 +31,7 @@ import { printError, printInfo, printSuccess, printWarning, step } from './posti
import { loadTemplate, updateConfigFile, updateWorkspaceFile } from './updateVitestFile';
import { getAddonNames } from './utils';
const ADDON_NAME = '@storybook/experimental-addon-test' as const;
const ADDON_NAME = '@storybook/addon-test' as const;
const EXTENSIONS = ['.ts', '.tsx', '.js', '.jsx', '.cts', '.mts', '.cjs', '.mjs'];
const addonInteractionsName = '@storybook/addon-interactions';
@ -359,7 +359,7 @@ export default async function postInstall(options: PostinstallOptions) {
if (a11yAddon) {
try {
logger.plain(`${step} Setting up ${addonA11yName} for @storybook/experimental-addon-test:`);
logger.plain(`${step} Setting up ${addonA11yName} for @storybook/addon-test:`);
await $({
stdio: 'inherit',
})`storybook automigrate addonA11yAddonTest ${options.yes ? '--yes' : ''}`;
@ -367,7 +367,7 @@ export default async function postInstall(options: PostinstallOptions) {
printError(
'🚨 Oh no!',
dedent`
We have detected that you have ${addonA11yName} installed but could not automatically set it up for @storybook/experimental-addon-test.
We have detected that you have ${addonA11yName} installed but could not automatically set it up for @storybook/addon-test.
Please refer to the documentation to complete the setup manually:
${picocolors.cyan(`https://storybook.js.org/docs/writing-tests/accessibility-testing#test-addon-integration`)}
@ -557,7 +557,7 @@ async function getStorybookInfo({ configDir, packageManager: pkgMgr }: Postinsta
const presets = await loadAllPresets({
corePresets: [join(frameworkName, 'preset')],
overridePresets: [
require.resolve('@storybook/core/core-server/presets/common-override-preset'),
require.resolve('storybook/internal/core-server/presets/common-override-preset'),
],
configDir,
packageJson,

70
code/addons/test/src/preset.ts
View File

@ -33,22 +33,6 @@ import {
import { log } from './logger';
import { runTestRunner } from './node/boot-test-runner';
export const checkActionsLoaded = (configDir: string) => {
checkAddonOrder({
before: {
name: '@storybook/addon-actions',
inEssentials: true,
},
after: {
name: '@storybook/experimental-addon-test',
inEssentials: false,
},
configFile: isAbsolute(configDir)
? join(configDir, 'main')
: join(process.cwd(), configDir, 'main'),
getConfig: (configFile) => serverRequire(configFile),
});
};
type Event = {
type: 'test-discrepancy';
payload: {
@ -59,6 +43,23 @@ type Event = {
};
};
export const checkActionsLoaded = (configDir: string) => {
checkAddonOrder({
before: {
name: '@storybook/addon-actions',
inEssentials: true,
},
after: {
name: '@storybook/addon-test',
inEssentials: false,
},
configFile: isAbsolute(configDir)
? join(configDir, 'main')
: join(process.cwd(), configDir, 'main'),
getConfig: (configFile) => serverRequire(configFile),
});
};
// eslint-disable-next-line @typescript-eslint/naming-convention
export const experimental_serverChannel = async (channel: Channel, options: Options) => {
const core = await options.presets.apply('core');
@ -98,7 +99,7 @@ export const experimental_serverChannel = async (channel: Channel, options: Opti
}
});
if (!core.disableTelemetry) {
const packageJsonPath = require.resolve('@storybook/experimental-addon-test/package.json');
const packageJsonPath = require.resolve('@storybook/addon-test/package.json');
const { version: addonVersion } = JSON.parse(
readFileSync(packageJsonPath, { encoding: 'utf-8' })
@ -181,6 +182,22 @@ export const experimental_serverChannel = async (channel: Channel, options: Opti
return channel;
};
export const staticDirs: PresetPropertyFn<'staticDirs'> = async (values = [], options) => {
if (options.configType === 'PRODUCTION') {
return values;
}
const coverageDirectory = resolvePathInStorybookCache(COVERAGE_DIRECTORY);
await mkdir(coverageDirectory, { recursive: true });
return [
{
from: coverageDirectory,
to: '/coverage',
},
...values,
];
};
export const previewAnnotations: PresetProperty<'previewAnnotations'> = async (
entry = [],
options
@ -198,8 +215,7 @@ export const managerEntries: PresetProperty<'managerEntries'> = async (entry = [
// eslint-disable-next-line local-rules/no-uncategorized-errors
const error = new Error(
dedent`
You have both "@storybook/addon-interactions" and "@storybook/experimental-addon-test" listed as addons in your Storybook config. This is not allowed, as @storybook/experimental-addon-test is a replacement for @storybook/addon-interactions.
You have both "@storybook/addon-interactions" and "@storybook/addon-test" listed as addons in your Storybook config. This is not allowed, as @storybook/addon-test is a replacement for @storybook/addon-interactions.
Please remove "@storybook/addon-interactions" from the addons array in your main Storybook config at ${options.configDir} and remove the dependency from your package.json file.
`
);
@ -210,19 +226,3 @@ export const managerEntries: PresetProperty<'managerEntries'> = async (entry = [
// for whatever reason seems like the return type of managerEntries is not correct (it expects never instead of string[])
return entry as never;
};
export const staticDirs: PresetPropertyFn<'staticDirs'> = async (values = [], options) => {
if (options.configType === 'PRODUCTION') {
return values;
}
const coverageDirectory = resolvePathInStorybookCache(COVERAGE_DIRECTORY);
await mkdir(coverageDirectory, { recursive: true });
return [
{
from: coverageDirectory,
to: '/coverage',
},
...values,
];
};

2
code/addons/test/src/preview.ts
View File

@ -1,6 +1,6 @@
import { instrument } from 'storybook/internal/instrumenter';
import type { PlayFunction, StepLabel, StoryContext } from 'storybook/internal/types';
import { instrument } from '@storybook/instrumenter';
// This makes sure that storybook test loaders are always loaded when addon-interactions is used
// For 9.0 we want to merge storybook/test and addon-interactions into one addon.
import '@storybook/test';

12
code/addons/test/src/updateVitestFile.test.ts
View File

@ -40,7 +40,7 @@ describe('updateConfigFile', () => {
// https://vite.dev/config/
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
import { storybookTest } from '@storybook/addon-test/vitest-plugin';
const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
// More info at: https://storybook.js.org/docs/writing-tests/test-addon
@ -103,7 +103,7 @@ describe('updateConfigFile', () => {
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { defineConfig } from 'vitest/config';
import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
import { storybookTest } from '@storybook/addon-test/vitest-plugin';
const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
// More info at: https://storybook.js.org/docs/writing-tests/test-addon
@ -192,7 +192,7 @@ describe('updateConfigFile', () => {
// https://vite.dev/config/
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
import { storybookTest } from '@storybook/addon-test/vitest-plugin';
const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
// More info at: https://storybook.js.org/docs/writing-tests/test-addon
@ -252,7 +252,7 @@ describe('updateConfigFile', () => {
// https://vite.dev/config/
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
import { storybookTest } from '@storybook/addon-test/vitest-plugin';
const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
// More info at: https://storybook.js.org/docs/writing-tests/test-addon
@ -303,7 +303,7 @@ describe('updateWorkspaceFile', () => {
"import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { defineWorkspace } from 'vitest/config';
import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
import { storybookTest } from '@storybook/addon-test/vitest-plugin';
const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
// More info at: https://storybook.js.org/docs/writing-tests/test-addon
@ -349,7 +349,7 @@ describe('updateWorkspaceFile', () => {
"import { defineWorkspace } from 'vitest/config';
import path from 'node:path';
import { fileURLToPath } from 'node:url';
import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
import { storybookTest } from '@storybook/addon-test/vitest-plugin';
const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
// More info at: https://storybook.js.org/docs/writing-tests/test-addon

6
code/addons/test/src/updateVitestFile.ts
View File

@ -7,11 +7,7 @@ import { dirname, join } from 'pathe';
export const loadTemplate = async (name: string, replacements: Record<string, string>) => {
let template = await fs.readFile(
join(
dirname(require.resolve('@storybook/experimental-addon-test/package.json')),
'templates',
name
),
join(dirname(require.resolve('@storybook/addon-test/package.json')), 'templates', name),
'utf8'
);
Object.entries(replacements).forEach(([key, value]) => (template = template.replace(key, value)));

1
code/addons/test/src/utils.ts
View File

@ -2,7 +2,6 @@ import { type StorybookTheme, useTheme } from 'storybook/internal/theming';
import type { StorybookConfig } from 'storybook/internal/types';
import Filter from 'ansi-to-html';
// eslint-disable-next-line depend/ban-dependencies
import stripAnsi from 'strip-ansi';
export function isTestAssertionError(error: unknown) {

12
code/addons/test/src/vitest-plugin/index.ts
View File

@ -67,7 +67,7 @@ const getStoryGlobsAndFiles = async (
};
};
const PACKAGE_DIR = dirname(require.resolve('@storybook/experimental-addon-test/package.json'));
const PACKAGE_DIR = dirname(require.resolve('@storybook/addon-test/package.json'));
export const storybookTest = async (options?: UserOptions): Promise<Plugin[]> => {
const finalOptions = {
@ -203,7 +203,7 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin[]> =>
? {
server: {
deps: {
inline: ['@storybook/experimental-addon-test'],
inline: ['@storybook/addon-test'],
},
},
}
@ -259,9 +259,9 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin[]> =>
optimizeDeps: {
include: [
'@storybook/experimental-addon-test/internal/setup-file',
'@storybook/experimental-addon-test/internal/global-setup',
'@storybook/experimental-addon-test/internal/test-utils',
'@storybook/addon-test/internal/setup-file',
'@storybook/addon-test/internal/global-setup',
'@storybook/addon-test/internal/test-utils',
...(frameworkName?.includes('react') || frameworkName?.includes('nextjs')
? ['react-dom/test-utils']
: []),
@ -295,7 +295,7 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin[]> =>
The values you passed to "test.include" will be ignored, please remove them from your Vitest configuration where the Storybook plugin is applied.
More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#addon-test-indexing-behavior-of-storybookexperimental-addon-test-is-changed
More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#addon-test-indexing-behavior-of-storybookaddon-test-is-changed
`)
);
}

2
code/addons/test/templates/vitest.config.template.ts
View File

@ -3,7 +3,7 @@ import { fileURLToPath } from 'node:url';
import { defineConfig } from 'vitest/config';
import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
import { storybookTest } from '@storybook/addon-test/vitest-plugin';
const dirname =
typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));

2
code/addons/test/templates/vitest.workspace.template.ts
View File

@ -3,7 +3,7 @@ import { fileURLToPath } from 'node:url';
import { defineWorkspace } from 'vitest/config';
import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
import { storybookTest } from '@storybook/addon-test/vitest-plugin';
const dirname =
typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));

2
code/addons/test/tsconfig.json
View File

@ -2,8 +2,6 @@
"extends": "../../tsconfig.json",
"compilerOptions": {
"rootDir": "../../../",
"module": "Preserve",
"moduleResolution": "Bundler",
"types": ["vitest"],
"strict": true
},

181
code/builders/builder-vite/src/codegen-modern-iframe-script.test.ts Normal file
View File

@ -0,0 +1,181 @@
import { describe, expect, it } from 'vitest';
import { generateModernIframeScriptCodeFromPreviews } from './codegen-modern-iframe-script';
const projectRoot = 'projectRoot';
describe('generateModernIframeScriptCodeFromPreviews', () => {
it('handle one annotation', async () => {
const result = await generateModernIframeScriptCodeFromPreviews({
previewAnnotations: ['/user/.storybook/preview'],
projectRoot,
frameworkName: 'frameworkName',
isCsf4: false,
});
expect(result).toMatchInlineSnapshot(`
"import { setup } from 'storybook/internal/preview/runtime';
import 'virtual:/@storybook/builder-vite/setup-addons.js';
setup();
import { composeConfigs, PreviewWeb } from 'storybook/internal/preview-api';
import { isPreview } from 'storybook/internal/csf';
import { importFn } from 'virtual:/@storybook/builder-vite/storybook-stories.js';
import * as preview_2408 from "/user/.storybook/preview";
const getProjectAnnotations = (hmrPreviewAnnotationModules = []) => {
const configs = [
hmrPreviewAnnotationModules[0] ?? preview_2408
]
return composeConfigs(configs);
}
window.__STORYBOOK_PREVIEW__ = window.__STORYBOOK_PREVIEW__ || new PreviewWeb(importFn, getProjectAnnotations);
window.__STORYBOOK_STORY_STORE__ = window.__STORYBOOK_STORY_STORE__ || window.__STORYBOOK_PREVIEW__.storyStore;
if (import.meta.hot) {
import.meta.hot.accept('virtual:/@storybook/builder-vite/storybook-stories.js', (newModule) => {
// importFn has changed so we need to patch the new one in
window.__STORYBOOK_PREVIEW__.onStoriesChanged({ importFn: newModule.importFn });
});
import.meta.hot.accept(["/user/.storybook/preview"], (previewAnnotationModules) => {
// getProjectAnnotations has changed so we need to patch the new one in
window.__STORYBOOK_PREVIEW__.onGetProjectAnnotationsChanged({ getProjectAnnotations: () => getProjectAnnotations(previewAnnotationModules) });
});
};"
`);
});
it('handle one annotation CSF4', async () => {
const result = await generateModernIframeScriptCodeFromPreviews({
previewAnnotations: ['/user/.storybook/preview'],
projectRoot,
frameworkName: 'frameworkName',
isCsf4: true,
});
expect(result).toMatchInlineSnapshot(`
"import { setup } from 'storybook/internal/preview/runtime';
import 'virtual:/@storybook/builder-vite/setup-addons.js';
setup();
import { composeConfigs, PreviewWeb } from 'storybook/internal/preview-api';
import { isPreview } from 'storybook/internal/csf';
import { importFn } from 'virtual:/@storybook/builder-vite/storybook-stories.js';
import * as preview_2408 from "/user/.storybook/preview";
const getProjectAnnotations = (hmrPreviewAnnotationModules = []) => {
const preview = hmrPreviewAnnotationModules[0] ?? preview_2408;
return preview.default.composed;
}
window.__STORYBOOK_PREVIEW__ = window.__STORYBOOK_PREVIEW__ || new PreviewWeb(importFn, getProjectAnnotations);
window.__STORYBOOK_STORY_STORE__ = window.__STORYBOOK_STORY_STORE__ || window.__STORYBOOK_PREVIEW__.storyStore;
if (import.meta.hot) {
import.meta.hot.accept('virtual:/@storybook/builder-vite/storybook-stories.js', (newModule) => {
// importFn has changed so we need to patch the new one in
window.__STORYBOOK_PREVIEW__.onStoriesChanged({ importFn: newModule.importFn });
});
import.meta.hot.accept(["/user/.storybook/preview"], (previewAnnotationModules) => {
// getProjectAnnotations has changed so we need to patch the new one in
window.__STORYBOOK_PREVIEW__.onGetProjectAnnotationsChanged({ getProjectAnnotations: () => getProjectAnnotations(previewAnnotationModules) });
});
};"
`);
});
it('handle multiple annotations', async () => {
const result = await generateModernIframeScriptCodeFromPreviews({
previewAnnotations: ['/user/previewAnnotations1', '/user/.storybook/preview'],
projectRoot,
frameworkName: 'frameworkName',
isCsf4: false,
});
expect(result).toMatchInlineSnapshot(`
"import { setup } from 'storybook/internal/preview/runtime';
import 'virtual:/@storybook/builder-vite/setup-addons.js';
setup();
import { composeConfigs, PreviewWeb } from 'storybook/internal/preview-api';
import { isPreview } from 'storybook/internal/csf';
import { importFn } from 'virtual:/@storybook/builder-vite/storybook-stories.js';
import * as previewAnnotations1_2526 from "/user/previewAnnotations1";
import * as preview_2408 from "/user/.storybook/preview";
const getProjectAnnotations = (hmrPreviewAnnotationModules = []) => {
const configs = [
hmrPreviewAnnotationModules[0] ?? previewAnnotations1_2526,
hmrPreviewAnnotationModules[1] ?? preview_2408
]
return composeConfigs(configs);
}
window.__STORYBOOK_PREVIEW__ = window.__STORYBOOK_PREVIEW__ || new PreviewWeb(importFn, getProjectAnnotations);
window.__STORYBOOK_STORY_STORE__ = window.__STORYBOOK_STORY_STORE__ || window.__STORYBOOK_PREVIEW__.storyStore;
if (import.meta.hot) {
import.meta.hot.accept('virtual:/@storybook/builder-vite/storybook-stories.js', (newModule) => {
// importFn has changed so we need to patch the new one in
window.__STORYBOOK_PREVIEW__.onStoriesChanged({ importFn: newModule.importFn });
});
import.meta.hot.accept(["/user/previewAnnotations1","/user/.storybook/preview"], (previewAnnotationModules) => {
// getProjectAnnotations has changed so we need to patch the new one in
window.__STORYBOOK_PREVIEW__.onGetProjectAnnotationsChanged({ getProjectAnnotations: () => getProjectAnnotations(previewAnnotationModules) });
});
};"
`);
});
it('handle multiple annotations CSF4', async () => {
const result = await generateModernIframeScriptCodeFromPreviews({
previewAnnotations: ['/user/previewAnnotations1', '/user/.storybook/preview'],
projectRoot,
frameworkName: 'frameworkName',
isCsf4: true,
});
expect(result).toMatchInlineSnapshot(`
"import { setup } from 'storybook/internal/preview/runtime';
import 'virtual:/@storybook/builder-vite/setup-addons.js';
setup();
import { composeConfigs, PreviewWeb } from 'storybook/internal/preview-api';
import { isPreview } from 'storybook/internal/csf';
import { importFn } from 'virtual:/@storybook/builder-vite/storybook-stories.js';
import * as preview_2408 from "/user/.storybook/preview";
const getProjectAnnotations = (hmrPreviewAnnotationModules = []) => {
const preview = hmrPreviewAnnotationModules[0] ?? preview_2408;
return preview.default.composed;
}
window.__STORYBOOK_PREVIEW__ = window.__STORYBOOK_PREVIEW__ || new PreviewWeb(importFn, getProjectAnnotations);
window.__STORYBOOK_STORY_STORE__ = window.__STORYBOOK_STORY_STORE__ || window.__STORYBOOK_PREVIEW__.storyStore;
if (import.meta.hot) {
import.meta.hot.accept('virtual:/@storybook/builder-vite/storybook-stories.js', (newModule) => {
// importFn has changed so we need to patch the new one in
window.__STORYBOOK_PREVIEW__.onStoriesChanged({ importFn: newModule.importFn });
});
import.meta.hot.accept(["/user/.storybook/preview"], (previewAnnotationModules) => {
// getProjectAnnotations has changed so we need to patch the new one in
window.__STORYBOOK_PREVIEW__.onGetProjectAnnotationsChanged({ getProjectAnnotations: () => getProjectAnnotations(previewAnnotationModules) });
});
};"
`);
});
});

92
code/builders/builder-vite/src/codegen-modern-iframe-script.ts
View File

@ -1,6 +1,9 @@
import { getFrameworkName, loadPreviewOrConfigFile } from 'storybook/internal/common';
import { isCsfFactoryPreview, readConfig } from 'storybook/internal/csf-tools';
import type { Options, PreviewAnnotation } from 'storybook/internal/types';
import { genArrayFromRaw, genImport, genSafeVariableName } from 'knitwork';
import { filename } from 'pathe/utils';
import { dedent } from 'ts-dedent';
import { processPreviewAnnotation } from './utils/process-preview-annotation';
@ -11,38 +14,72 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
const frameworkName = await getFrameworkName(options);
const previewOrConfigFile = loadPreviewOrConfigFile({ configDir });
const previewConfig = await readConfig(previewOrConfigFile!);
const isCsf4 = isCsfFactoryPreview(previewConfig);
const previewAnnotations = await presets.apply<PreviewAnnotation[]>(
'previewAnnotations',
[],
options
);
const [previewFileUrl, ...previewAnnotationURLs] = [previewOrConfigFile, ...previewAnnotations]
.filter(Boolean)
return generateModernIframeScriptCodeFromPreviews({
previewAnnotations: [...previewAnnotations, previewOrConfigFile],
projectRoot,
frameworkName,
isCsf4,
});
}
export async function generateModernIframeScriptCodeFromPreviews(options: {
previewAnnotations: (PreviewAnnotation | undefined)[];
projectRoot: string;
frameworkName: string;
isCsf4: boolean;
}) {
const { projectRoot, frameworkName } = options;
const previewAnnotationURLs = options.previewAnnotations
.filter((path) => path !== undefined)
.map((path) => processPreviewAnnotation(path, projectRoot));
const variables: string[] = [];
const imports: string[] = [];
for (const previewAnnotation of previewAnnotationURLs) {
const variable =
genSafeVariableName(filename(previewAnnotation)).replace(/_(45|46|47)/g, '_') +
'_' +
hash(previewAnnotation);
variables.push(variable);
imports.push(genImport(previewAnnotation, { name: '*', as: variable }));
}
const previewFileURL = previewAnnotationURLs[previewAnnotationURLs.length - 1];
const previewFileVariable = variables[variables.length - 1];
const previewFileImport = imports[imports.length - 1];
// This is pulled out to a variable because it is reused in both the initial page load
// and the HMR handler. We don't use the hot.accept callback params because only the changed
// modules are provided, the rest are null. We can just re-import everything again in that case.
const getPreviewAnnotationsFunction = dedent`
const getProjectAnnotations = async (hmrPreviewAnnotationModules = []) => {
const preview = await import('${previewFileUrl}');
if (isPreview(preview.default)) {
return preview.default.composed;
}
const configs = await Promise.all([${previewAnnotationURLs
.map(
// and the HMR handler.
// The `hmrPreviewAnnotationModules` parameter is used to pass the updated modules from HMR.
// However, only the changed modules are provided, the rest are null.
const getPreviewAnnotationsFunction = options.isCsf4
? dedent`
const getProjectAnnotations = (hmrPreviewAnnotationModules = []) => {
const preview = hmrPreviewAnnotationModules[0] ?? ${previewFileVariable};
return preview.default.composed;
}`
: dedent`
const getProjectAnnotations = (hmrPreviewAnnotationModules = []) => {
const configs = ${genArrayFromRaw(
variables.map(
(previewAnnotation, index) =>
// Prefer the updated module from an HMR update, otherwise import the original module
`hmrPreviewAnnotationModules[${index}] ?? import('${previewAnnotation}')`
)
.join(',\n')}])
return composeConfigs([...configs, preview]);
// Prefer the updated module from an HMR update, otherwise the original module
`hmrPreviewAnnotationModules[${index}] ?? ${previewAnnotation}`
),
' '
)}
return composeConfigs(configs);
}`;
// eslint-disable-next-line @typescript-eslint/no-shadow
const generateHMRHandler = (frameworkName: string): string => {
const generateHMRHandler = (): string => {
// Web components are not compatible with HMR, so disable HMR, reload page instead.
if (frameworkName === '@storybook/web-components-vite') {
return dedent`
@ -58,8 +95,7 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
window.__STORYBOOK_PREVIEW__.onStoriesChanged({ importFn: newModule.importFn });
});
import.meta.hot.accept(${JSON.stringify(previewAnnotationURLs)}, (previewAnnotationModules) => {
${getPreviewAnnotationsFunction}
import.meta.hot.accept(${JSON.stringify(options.isCsf4 ? [previewFileURL] : previewAnnotationURLs)}, (previewAnnotationModules) => {
// getProjectAnnotations has changed so we need to patch the new one in
window.__STORYBOOK_PREVIEW__.onGetProjectAnnotationsChanged({ getProjectAnnotations: () => getProjectAnnotations(previewAnnotationModules) });
});
@ -76,6 +112,7 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
*/
const code = dedent`
import { setup } from 'storybook/internal/preview/runtime';
import '${SB_VIRTUAL_FILES.VIRTUAL_ADDON_SETUP_FILE}';
setup();
@ -84,12 +121,17 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
import { isPreview } from 'storybook/internal/csf';
import { importFn } from '${SB_VIRTUAL_FILES.VIRTUAL_STORIES_FILE}';
${options.isCsf4 ? previewFileImport : imports.join('\n')}
${getPreviewAnnotationsFunction}
window.__STORYBOOK_PREVIEW__ = window.__STORYBOOK_PREVIEW__ || new PreviewWeb(importFn, getProjectAnnotations);
window.__STORYBOOK_STORY_STORE__ = window.__STORYBOOK_STORY_STORE__ || window.__STORYBOOK_PREVIEW__.storyStore;
${generateHMRHandler(frameworkName)};`.trim();
${generateHMRHandler()};
`.trim();
return code;
}
function hash(value: string) {
return value.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
}

4
code/builders/builder-vite/src/envs.ts
View File

@ -16,8 +16,8 @@ const allowedEnvVariables = [
];
/**
* Customized version of stringifyProcessEnvs from @storybook/core-common which uses import.meta.env
* instead of process.env and checks for allowed variables.
* Customized version of stringifyProcessEnvs from storybook/internal/core-common which uses
* import.meta.env instead of process.env and checks for allowed variables.
*/
export function stringifyProcessEnvs(raw: Builder_EnvsRaw, envPrefix: ViteConfig['envPrefix']) {
const updatedRaw: Builder_EnvsRaw = {};

6
code/builders/builder-vite/src/optimizeDeps.ts
View File

@ -35,8 +35,7 @@ const INCLUDE_CANDIDATES = [
'@storybook/addon-viewport',
'@storybook/addon-viewport/preview',
'@storybook/blocks',
'@storybook/components',
'@storybook/experimental-addon-test/preview',
'@storybook/addon-test/preview',
'@storybook/experimental-nextjs-vite/dist/preview.mjs',
'@storybook/html',
'@storybook/html/dist/entry-preview-docs.mjs',
@ -52,7 +51,6 @@ const INCLUDE_CANDIDATES = [
'@storybook/svelte',
'@storybook/svelte/dist/entry-preview-docs.mjs',
'@storybook/svelte/dist/entry-preview.mjs',
'@storybook/theming',
'@storybook/vue3',
'@storybook/vue3/dist/entry-preview-docs.mjs',
'@storybook/vue3/dist/entry-preview.mjs',
@ -127,6 +125,7 @@ const INCLUDE_CANDIDATES = [
'qs',
'react-dom',
'react-dom/client',
'react-dom/test-utils',
'react-fast-compare',
'react-is',
'react-textarea-autosize',
@ -146,6 +145,7 @@ const INCLUDE_CANDIDATES = [
'refractor/lang/typescript.js',
'refractor/lang/yaml.js',
'regenerator-runtime/runtime.js',
'semver', // TODO: Remove once https://github.com/npm/node-semver/issues/712 is fixed
'sb-original/default-loader',
'sb-original/image-context',
'slash',

5
code/builders/builder-vite/src/plugins/external-globals-plugin.ts
View File

@ -25,7 +25,10 @@ const replacementMap = new Map([
* @example
*
* ```js
* import { useMemo as useMemo2, useEffect as useEffect2 } from '@storybook/preview-api';
* import {
* useMemo as useMemo2,
* useEffect as useEffect2,
* } from 'storybook/internal/preview-api';
* ```
*
* Becomes

3
code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts
View File

@ -52,8 +52,7 @@ function isUserCode(moduleName: string) {
return Boolean(
!moduleName.startsWith('vite/') &&
!moduleName.startsWith('\0') &&
moduleName !== 'react/jsx-runtime' &&
!moduleName.match(/node_modules\//)
moduleName !== 'react/jsx-runtime'
);
}

99
code/builders/builder-vite/src/utils/process-preview-annotation.test.ts
View File

@ -4,64 +4,71 @@ import { onlyWindows, skipWindows } from '../../../../vitest.helpers';
import { processPreviewAnnotation } from './process-preview-annotation';
describe('processPreviewAnnotation()', () => {
it('should pull the `bare` value from an object', () => {
it('should pull the `absolute` value from an object', () => {
const annotation = {
bare: '@storybook/addon-links/preview',
absolute: '/Users/foo/storybook/node_modules/@storybook/addon-links/dist/preview.mjs',
};
const url = processPreviewAnnotation(annotation, '/Users/foo/storybook/');
expect(url).toBe('@storybook/addon-links/preview');
expect(url).toBe('/Users/foo/storybook/node_modules/@storybook/addon-links/dist/preview.mjs');
});
it('should convert relative paths into urls', () => {
const annotation = './src/stories/components';
it('should convert relative paths into absolute paths', () => {
const annotation = './src/stories/preview';
const url = processPreviewAnnotation(annotation, '/Users/foo/storybook/');
expect(url).toBe('/src/stories/components');
expect(url).toBe('/Users/foo/storybook/src/stories/preview');
});
skipWindows(() => {
it('should convert absolute filesystem paths into urls relative to project root', () => {
const annotation = '/Users/foo/storybook/.storybook/preview.js';
const url = processPreviewAnnotation(annotation, '/Users/foo/storybook/');
expect(url).toBe('/.storybook/preview.js');
});
// TODO: figure out why this fails on windows. Could be related to storybook-metadata.test file altering path.sep
it('should convert node_modules into bare paths', () => {
const annotation = '/Users/foo/storybook/node_modules/storybook-addon/preview';
const url = processPreviewAnnotation(annotation, '/Users/foo/storybook/');
expect(url).toBe('storybook-addon/preview');
});
it('should convert relative paths outside the root into absolute', () => {
const annotation = '../parent.js';
const url = processPreviewAnnotation(annotation, '/Users/foo/storybook/');
expect(url).toBe('/Users/foo/parent.js');
});
it('should not change absolute paths outside of the project root', () => {
const annotation = '/Users/foo/parent.js';
const url = processPreviewAnnotation(annotation, '/Users/foo/storybook/');
expect(url).toBe(annotation);
});
it('should keep absolute filesystem paths', () => {
const annotation = '/Users/foo/storybook/.storybook/preview.js';
const url = processPreviewAnnotation(annotation, '/Users/foo/storybook/');
expect(url).toBe('/Users/foo/storybook/.storybook/preview.js');
});
onlyWindows(() => {
it('should convert absolute windows filesystem paths into urls relative to project root', () => {
const annotation = 'C:/foo/storybook/.storybook/preview.js';
const url = processPreviewAnnotation(annotation, 'C:/foo/storybook');
expect(url).toBe('/.storybook/preview.js');
});
it('should convert relative paths outside the root into absolute on Windows', () => {
const annotation = '../parent.js';
const url = processPreviewAnnotation(annotation, 'C:/Users/foo/storybook/');
expect(url).toBe('C:/Users/foo/parent.js');
});
it('should keep absolute node_modules paths', () => {
const annotation = '/Users/foo/storybook/node_modules/storybook-addon/preview';
const url = processPreviewAnnotation(annotation, '/Users/foo/storybook/');
expect(url).toBe('/Users/foo/storybook/node_modules/storybook-addon/preview');
});
it('should not change Windows absolute paths outside of the project root', () => {
const annotation = 'D:/Users/foo/parent.js';
const url = processPreviewAnnotation(annotation, 'D:/Users/foo/storybook/');
expect(url).toBe(annotation);
});
it('should convert relative paths outside the root into absolute', () => {
const annotation = '../parent.js';
const url = processPreviewAnnotation(annotation, '/Users/foo/storybook/');
expect(url).toBe('/Users/foo/parent.js');
});
it('should not change absolute paths outside of the project root', () => {
const annotation = '/Users/foo/parent.js';
const url = processPreviewAnnotation(annotation, '/Users/foo/storybook/');
expect(url).toBe(annotation);
});
it('should keep absolute windows filesystem paths as is', () => {
const annotation = 'C:/foo/storybook/.storybook/preview.js';
const url = processPreviewAnnotation(annotation, 'C:/foo/storybook');
expect(url).toBe('C:/foo/storybook/.storybook/preview.js');
});
it('should convert relative paths outside the root into absolute on Windows', () => {
const annotation = '../parent.js';
const url = processPreviewAnnotation(annotation, 'C:/Users/foo/storybook/');
expect(url).toBe('C:/Users/foo/parent.js');
});
it('should not change Windows absolute paths outside of the project root', () => {
const annotation = 'D:/Users/foo/parent.js';
const url = processPreviewAnnotation(annotation, 'D:/Users/foo/storybook/');
expect(url).toBe(annotation);
});
it('should normalize absolute Windows paths using \\', () => {
const annotation = 'C:\\foo\\storybook\\.storybook\\preview.js';
const url = processPreviewAnnotation(annotation, 'C:\\foo\\storybook');
expect(url).toBe('C:/foo/storybook/.storybook/preview.js');
});
it('should normalize relative Windows paths using \\', () => {
const annotation = '.\\src\\stories\\preview';
const url = processPreviewAnnotation(annotation, 'C:\\foo\\storybook');
expect(url).toBe('C:/foo/storybook/src/stories/preview');
});
});

63
code/builders/builder-vite/src/utils/process-preview-annotation.ts
View File

@ -1,54 +1,25 @@
import { isAbsolute, relative, resolve } from 'node:path';
import { stripAbsNodeModulesPath } from 'storybook/internal/common';
import type { PreviewAnnotation } from 'storybook/internal/types';
import slash from 'slash';
import { isAbsolute, normalize, resolve } from 'pathe';
/**
* Preview annotations can take several forms, and vite needs them to be a bit more restrained.
*
* For node_modules, we want bare imports (so vite can process them), and for files in the user's
* source, we want URLs absolute relative to project root.
*/
export function processPreviewAnnotation(path: PreviewAnnotation | undefined, projectRoot: string) {
// If entry is an object, take the first, which is the
// bare (non-absolute) specifier.
// This is so that webpack can use an absolute path, and
// continue supporting super-addons in pnp/pnpm without
// requiring them to re-export their sub-addons as we do
// in addon-essentials.
/** Preview annotations can take several forms, so we normalize them here to absolute file paths. */
export function processPreviewAnnotation(path: PreviewAnnotation, projectRoot: string) {
// If entry is an object, take the absolute specifier.
// This absolute specifier is automatically made for addons here:
// https://github.com/storybookjs/storybook/blob/ac6e73b9d8ce31dd9acc80999c8d7c22a111f3cc/code/core/src/common/presets.ts#L161-L171
if (typeof path === 'object') {
return path.bare;
// TODO: Remove this once the new version of Nuxt is released that removes this workaround:
// https://github.com/nuxt-modules/storybook/blob/a2eec6e898386f76c74826842e8e007b185c3d35/packages/storybook-addon/src/preset.ts#L279-L306
if (path.bare != null && path.absolute === '') {
return path.bare;
}
return path.absolute;
}
// This should not occur, since we use `.filter(Boolean)` prior to
// calling this function, but this makes typescript happy
if (!path) {
throw new Error('Could not determine path for previewAnnotation');
// If it's already an absolute path, return it.
if (isAbsolute(path)) {
return normalize(path);
}
// For addon dependencies that use require.resolve(), we need to convert to a bare path
// so that vite will process it as a dependency (cjs -> esm, etc).
// TODO: Evaluate if searching for node_modules in a yarn pnp environment is correct
if (path.includes('node_modules')) {
return stripAbsNodeModulesPath(path);
}
// resolve absolute paths relative to project root
const relativePath = isAbsolute(path) ? slash(relative(projectRoot, path)) : path;
// resolve relative paths into absolute urls
// note: this only works if vite's projectRoot === cwd.
if (relativePath.startsWith('./')) {
return slash(relativePath.replace(/^\.\//, '/'));
}
// If something is outside of root, convert to absolute. Uncommon?
if (relativePath.startsWith('../')) {
return slash(resolve(projectRoot, relativePath));
}
// At this point, it must be relative to the root but not start with a ./ or ../
return slash(`/${relativePath}`);
// resolve relative paths, relative to project root
return normalize(resolve(projectRoot, path));
}

2
code/builders/builder-vite/src/vite-server.ts
View File

@ -32,10 +32,12 @@ export async function createViteServer(options: Options, devServer: Server) {
const ipRegex = /^(?:\d{1,3}\.){3}\d{1,3}$|^(?:[a-fA-F0-9]{1,4}:){7}[a-fA-F0-9]{1,4}$/;
if (
// @ts-expect-error (unknown)
!(config.server.allowedHosts as string[])?.length &&
options.host &&
!ipRegex.test(options.host)
) {
// @ts-expect-error (unknown)
config.server.allowedHosts = [options.host.toLowerCase()];
}

5
code/builders/builder-webpack5/src/index.ts
View File

@ -1,5 +1,5 @@
import { cp } from 'node:fs/promises';
import { join, parse } from 'node:path';
import { dirname, join, parse } from 'node:path';
import { PREVIEW_BUILDER_PROGRESS } from 'storybook/internal/core-events';
import { logger } from 'storybook/internal/node-logger';
@ -14,7 +14,6 @@ import { checkWebpackVersion } from '@storybook/core-webpack';
import prettyTime from 'pretty-hrtime';
import sirv from 'sirv';
import { corePath } from 'storybook/core-path';
import type { Configuration, Stats, StatsOptions } from 'webpack';
import webpackDep, { DefinePlugin, IgnorePlugin, ProgressPlugin } from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
@ -32,6 +31,8 @@ export const printDuration = (startTime: [number, number]) =>
.replace(' s', ' seconds')
.replace(' m', ' minutes');
const corePath = dirname(require.resolve('storybook/package.json'));
let compilation: ReturnType<typeof webpackDevMiddleware> | undefined;
let reject: (reason?: any) => void;

1
code/builders/builder-webpack5/src/preview/virtual-module-mapping.ts
View File

@ -33,7 +33,6 @@ export const getVirtualModules = async (options: Options) => {
// If entry is an object, use the absolute import specifier.
// This is to maintain back-compat with community addons that bundle other addons
// and package managers that "hide" sub dependencies (e.g. pnpm / yarn pnp)
// The vite builder uses the bare import specifier.
if (typeof entry === 'object') {
return entry.absolute;
}

2
code/lib/cli/bin/index.cjs → code/core/bin/index.cjs
View File

@ -23,4 +23,4 @@ process.once('uncaughtException', (error) => {
throw error;
});
require('../dist/proxy.cjs');
require('../dist/bin/index.cjs');

135
code/core/package.json
View File

@ -1,5 +1,5 @@
{
"name": "@storybook/core",
"name": "storybook",
"version": "9.0.0-alpha.1",
"description": "Storybook framework-agnostic API",
"keywords": [
@ -27,155 +27,164 @@
"import": "./dist/index.js",
"require": "./dist/index.cjs"
},
"./node-logger": {
"./internal/node-logger": {
"types": "./dist/node-logger/index.d.ts",
"import": "./dist/node-logger/index.js",
"require": "./dist/node-logger/index.cjs"
},
"./client-logger": {
"./internal/client-logger": {
"types": "./dist/client-logger/index.d.ts",
"import": "./dist/client-logger/index.js",
"require": "./dist/client-logger/index.cjs"
},
"./theming": {
"./internal/theming": {
"types": "./dist/theming/index.d.ts",
"import": "./dist/theming/index.js",
"require": "./dist/theming/index.cjs"
},
"./theming/create": {
"./internal/theming/create": {
"types": "./dist/theming/create.d.ts",
"import": "./dist/theming/create.js",
"require": "./dist/theming/create.cjs"
},
"./core-server": {
"./internal/core-server": {
"types": "./dist/core-server/index.d.ts",
"import": "./dist/core-server/index.js",
"require": "./dist/core-server/index.cjs"
},
"./core-server/presets/common-preset": {
"./internal/core-server/presets/common-preset": {
"import": "./dist/core-server/presets/common-preset.js",
"require": "./dist/core-server/presets/common-preset.cjs"
},
"./core-server/presets/common-manager": {
"./internal/core-server/presets/common-manager": {
"import": "./dist/core-server/presets/common-manager.js"
},
"./core-server/presets/common-override-preset": {
"./internal/core-server/presets/common-override-preset": {
"import": "./dist/core-server/presets/common-override-preset.js",
"require": "./dist/core-server/presets/common-override-preset.cjs"
},
"./core-events": {
"./internal/core-events": {
"types": "./dist/core-events/index.d.ts",
"import": "./dist/core-events/index.js",
"require": "./dist/core-events/index.cjs"
},
"./manager-errors": {
"./internal/manager-errors": {
"types": "./dist/manager-errors.d.ts",
"import": "./dist/manager-errors.js"
},
"./preview-errors": {
"./internal/preview-errors": {
"types": "./dist/preview-errors.d.ts",
"import": "./dist/preview-errors.js",
"require": "./dist/preview-errors.cjs"
},
"./server-errors": {
"./internal/server-errors": {
"types": "./dist/server-errors.d.ts",
"import": "./dist/server-errors.js",
"require": "./dist/server-errors.cjs"
},
"./channels": {
"./internal/channels": {
"types": "./dist/channels/index.d.ts",
"import": "./dist/channels/index.js",
"require": "./dist/channels/index.cjs"
},
"./types": {
"./internal/types": {
"types": "./dist/types/index.d.ts",
"import": "./dist/types/index.js",
"require": "./dist/types/index.cjs"
},
"./csf-tools": {
"./internal/csf-tools": {
"types": "./dist/csf-tools/index.d.ts",
"import": "./dist/csf-tools/index.js",
"require": "./dist/csf-tools/index.cjs"
},
"./csf": {
"./internal/csf": {
"types": "./dist/csf/index.d.ts",
"import": "./dist/csf/index.js",
"require": "./dist/csf/index.cjs"
},
"./common": {
"./internal/common": {
"types": "./dist/common/index.d.ts",
"import": "./dist/common/index.js",
"require": "./dist/common/index.cjs"
},
"./builder-manager": {
"./internal/builder-manager": {
"types": "./dist/builder-manager/index.d.ts",
"import": "./dist/builder-manager/index.js",
"require": "./dist/builder-manager/index.cjs"
},
"./telemetry": {
"./internal/telemetry": {
"types": "./dist/telemetry/index.d.ts",
"import": "./dist/telemetry/index.js",
"require": "./dist/telemetry/index.cjs"
},
"./preview-api": {
"./internal/preview-api": {
"types": "./dist/preview-api/index.d.ts",
"import": "./dist/preview-api/index.js",
"require": "./dist/preview-api/index.cjs"
},
"./manager-api": {
"./internal/manager-api": {
"types": "./dist/manager-api/index.d.ts",
"import": "./dist/manager-api/index.js",
"require": "./dist/manager-api/index.cjs"
},
"./router": {
"./internal/router": {
"types": "./dist/router/index.d.ts",
"import": "./dist/router/index.js",
"require": "./dist/router/index.cjs"
},
"./components": {
"./internal/components": {
"types": "./dist/components/index.d.ts",
"import": "./dist/components/index.js",
"require": "./dist/components/index.cjs"
},
"./docs-tools": {
"./internal/docs-tools": {
"types": "./dist/docs-tools/index.d.ts",
"import": "./dist/docs-tools/index.js",
"require": "./dist/docs-tools/index.cjs"
},
"./manager/globals-module-info": {
"./internal/manager/globals-module-info": {
"types": "./dist/manager/globals-module-info.d.ts",
"import": "./dist/manager/globals-module-info.js",
"require": "./dist/manager/globals-module-info.cjs"
},
"./manager/globals": {
"./internal/manager/globals": {
"types": "./dist/manager/globals.d.ts",
"import": "./dist/manager/globals.js",
"require": "./dist/manager/globals.cjs"
},
"./preview/globals": {
"./internal/preview/globals": {
"types": "./dist/preview/globals.d.ts",
"import": "./dist/preview/globals.js",
"require": "./dist/preview/globals.cjs"
},
"./cli": {
"./internal/cli": {
"types": "./dist/cli/index.d.ts",
"import": "./dist/cli/index.js",
"require": "./dist/cli/index.cjs"
},
"./babel": {
"./internal/babel": {
"types": "./dist/babel/index.d.ts",
"import": "./dist/babel/index.js",
"require": "./dist/babel/index.cjs"
},
"./cli/bin": {
"./internal/cli/bin": {
"types": "./dist/cli/bin/index.d.ts",
"import": "./dist/cli/bin/index.js",
"require": "./dist/cli/bin/index.cjs"
},
"./preview/runtime": {
"./internal/bin": {
"import": "./dist/bin/index.js",
"require": "./dist/bin/index.cjs"
},
"./internal/instrumenter": {
"types": "./dist/instrumenter/index.d.ts",
"import": "./dist/instrumenter/index.js",
"require": "./dist/instrumenter/index.cjs"
},
"./internal/preview/runtime": {
"import": "./dist/preview/runtime.js"
},
"./manager/globals-runtime": {
"./internal/manager/globals-runtime": {
"import": "./dist/manager/globals-runtime.js"
},
"./package.json": "./package.json"
@ -188,89 +197,93 @@
"*": [
"./dist/index.d.ts"
],
"node-logger": [
"internal/node-logger": [
"./dist/node-logger/index.d.ts"
],
"client-logger": [
"internal/client-logger": [
"./dist/client-logger/index.d.ts"
],
"theming": [
"internal/theming": [
"./dist/theming/index.d.ts"
],
"theming/create": [
"internal/theming/create": [
"./dist/theming/create.d.ts"
],
"core-server": [
"internal/core-server": [
"./dist/core-server/index.d.ts"
],
"core-events": [
"internal/core-events": [
"./dist/core-events/index.d.ts"
],
"manager-errors": [
"internal/manager-errors": [
"./dist/manager-errors.d.ts"
],
"preview-errors": [
"internal/preview-errors": [
"./dist/preview-errors.d.ts"
],
"server-errors": [
"internal/server-errors": [
"./dist/server-errors.d.ts"
],
"channels": [
"internal/channels": [
"./dist/channels/index.d.ts"
],
"types": [
"internal/types": [
"./dist/types/index.d.ts"
],
"csf-tools": [
"internal/csf-tools": [
"./dist/csf-tools/index.d.ts"
],
"csf": [
"internal/csf": [
"./dist/csf/index.d.ts"
],
"common": [
"internal/common": [
"./dist/common/index.d.ts"
],
"builder-manager": [
"internal/builder-manager": [
"./dist/builder-manager/index.d.ts"
],
"telemetry": [
"internal/telemetry": [
"./dist/telemetry/index.d.ts"
],
"preview-api": [
"internal/preview-api": [
"./dist/preview-api/index.d.ts"
],
"manager-api": [
"internal/manager-api": [
"./dist/manager-api/index.d.ts"
],
"router": [
"internal/router": [
"./dist/router/index.d.ts"
],
"components": [
"internal/components": [
"./dist/components/index.d.ts"
],
"docs-tools": [
"internal/docs-tools": [
"./dist/docs-tools/index.d.ts"
],
"manager/globals-module-info": [
"internal/manager/globals-module-info": [
"./dist/manager/globals-module-info.d.ts"
],
"manager/globals": [
"internal/manager/globals": [
"./dist/manager/globals.d.ts"
],
"preview/globals": [
"internal/preview/globals": [
"./dist/preview/globals.d.ts"
],
"cli": [
"internal/cli": [
"./dist/cli/index.d.ts"
],
"babel": [
"internal/babel": [
"./dist/babel/index.d.ts"
],
"cli/bin": [
"internal/cli/bin": [
"./dist/cli/bin/index.d.ts"
],
"internal/instrumenter": [
"./dist/instrumenter/index.d.ts"
]
}
},
"bin": "./bin/index.cjs",
"files": [
"dist/**/*",
"assets/**/*",
@ -282,7 +295,6 @@
"prep": "jiti ./scripts/prep.ts"
},
"dependencies": {
"@storybook/theming": "workspace:*",
"better-opn": "^3.0.2",
"browser-assert": "^1.2.1",
"esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0",
@ -337,6 +349,7 @@
"@types/react-transition-group": "^4",
"@types/semver": "^7.5.8",
"@types/ws": "^8",
"@vitest/utils": "^2.1.1",
"@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10",
"@yarnpkg/fslib": "2.10.3",
"@yarnpkg/libzip": "2.3.0",

34
code/core/scripts/dts.ts
View File

@ -17,24 +17,24 @@ async function run() {
...Object.keys((pkg as any).peerDependencies || {}),
...nodeInternals,
'typescript',
'@storybook/core',
'storybook',
'@storybook/core/builder-manager',
'@storybook/core/channels',
'@storybook/core/client-logger',
'@storybook/core/common',
'@storybook/core/components',
'@storybook/core/core-events',
'@storybook/core/core-server',
'@storybook/core/csf-tools',
'@storybook/core/docs-tools',
'@storybook/core/manager-api',
'@storybook/core/node-logger',
'@storybook/core/preview-api',
'@storybook/core/router',
'@storybook/core/telemetry',
'@storybook/core/theming',
'@storybook/core/types',
'storybook/internal/builder-manager',
'storybook/internal/channels',
'storybook/internal/client-logger',
'storybook/internal/common',
'storybook/internal/components',
'storybook/internal/core-events',
'storybook/internal/core-server',
'storybook/internal/csf-tools',
'storybook/internal/docs-tools',
'storybook/internal/manager-api',
'storybook/internal/node-logger',
'storybook/internal/preview-api',
'storybook/internal/router',
'storybook/internal/telemetry',
'storybook/internal/theming',
'storybook/internal/types',
];
const all = entries.filter((e) => e.dts);

3
code/core/scripts/entries.ts
View File

@ -47,6 +47,9 @@ export const getEntries = (cwd: string) => {
define('src/cli/index.ts', ['node'], true),
define('src/babel/index.ts', ['node'], true),
define('src/cli/bin/index.ts', ['node'], true),
define('src/bin/index.ts', ['node'], false),
define('src/instrumenter/index.ts', ['browser', 'node'], true),
];
};

4
code/core/scripts/helpers/generatePackageJsonFile.ts
View File

@ -40,7 +40,7 @@ export async function generatePackageJsonFile(entries: ReturnType<typeof getEntr
main
.replace(/\/index\.tsx?/, '')
.replace(/\.tsx?/, '')
.replace('dist/', '')
.replace('dist/', 'internal/')
] = content;
return acc;
}, {});
@ -73,7 +73,7 @@ export async function generatePackageJsonFile(entries: ReturnType<typeof getEntr
}
const content = ['./' + main.replace(/\.tsx?/, '.d.ts')];
acc[key.replace('dist/', '')] = content;
acc[key.replace('dist/', 'internal/')] = content;
return acc;
}, {}),
},

1
code/core/scripts/helpers/sourcefiles.ts
View File

@ -82,6 +82,7 @@ async function generateFrameworksFile(prettierConfig: prettier.Options | null):
const localAlias = {
'@storybook/core': join(__dirname, '..', '..', 'src'),
'storybook/internal': join(__dirname, '..', '..', 'src'),
storybook: join(__dirname, '..', '..', 'src'),
};
async function generateExportsFile(prettierConfig: prettier.Options | null): Promise<void> {

6
code/core/scripts/prep.ts
View File

@ -94,7 +94,7 @@ async function run() {
assetNames: 'assets/[name]-[hash]',
bundle: true,
chunkNames: 'chunks/[name]-[hash]',
external: ['@storybook/core', ...external],
external: ['storybook', ...external],
keepNames: true,
legalComments: 'none',
lineLimit: 140,
@ -192,7 +192,7 @@ async function run() {
outExtension: { '.js': '.js' },
alias: {
...browserAliases,
'@storybook/core': join(cwd, 'src'),
'storybook/internal': join(cwd, 'src'),
react: dirname(require.resolve('react/package.json')),
'react-dom': dirname(require.resolve('react-dom/package.json')),
'react-dom/client': join(
@ -217,7 +217,7 @@ async function run() {
esbuild.context(
merge<EsbuildContextOptions>(browserEsbuildOptions, {
alias: {
'@storybook/core': join(cwd, 'src'),
'storybook/internal': join(cwd, 'src'),
react: dirname(require.resolve('react/package.json')),
'react-dom': dirname(require.resolve('react-dom/package.json')),
'react-dom/client': join(

62
code/core/src/bin/index.ts Normal file
View File

@ -0,0 +1,62 @@
import { spawn } from 'node:child_process';
import { readFileSync } from 'node:fs';
import { dirname, join } from 'node:path';
import versions from '../common/versions';
const args = process.argv.slice(2);
if (['dev', 'build', 'index'].includes(args[0])) {
require('storybook/internal/cli/bin');
} else {
let command;
if (args[0] === 'init') {
let foundCreateStorybook;
try {
foundCreateStorybook = require.resolve('create-storybook/package.json');
} catch (e) {
// ignore
}
if (foundCreateStorybook) {
const json = JSON.parse(readFileSync(foundCreateStorybook, 'utf-8'));
if (json.version === versions['create-storybook']) {
command = [
'node',
join(dirname(foundCreateStorybook), 'bin', 'index.cjs'),
...args.slice(1),
];
}
} else {
command = ['npx', '--yes', `create-storybook@${versions.storybook}`, ...args.slice(1)];
}
} else {
let foundStorybookCLI;
try {
foundStorybookCLI = require.resolve('@storybook/cli/package.json');
} catch (e) {
// ignore
}
if (foundStorybookCLI) {
const json = JSON.parse(readFileSync(foundStorybookCLI, 'utf-8'));
if (json.version === versions['@storybook/cli']) {
command = ['node', join(dirname(foundStorybookCLI), 'bin', 'index.cjs'), ...args];
}
} else {
command = ['npx', '--yes', `@storybook/cli@${versions.storybook}`, ...args];
}
}
if (!command) {
console.error('Could not run storybook cli, please report this as a bug');
process.exit(1);
}
const child = spawn(command[0], command.slice(1), { stdio: 'inherit', shell: true });
child.on('exit', (code) => {
if (code != null) {
process.exit(code);
}
process.exit(1);
});
}

21
code/core/src/builder-manager/index.ts
View File

@ -1,10 +1,9 @@
import { cp, rm, writeFile } from 'node:fs/promises';
import { dirname, join, parse } from 'node:path';
import { stringifyProcessEnvs } from '@storybook/core/common';
import { globalsModuleInfoMap } from '@storybook/core/manager/globals-module-info';
import { logger } from '@storybook/core/node-logger';
import { stringifyProcessEnvs } from 'storybook/internal/common';
import { globalsModuleInfoMap } from 'storybook/internal/manager/globals-module-info';
import { logger } from 'storybook/internal/node-logger';
import { globalExternals } from '@fal-works/esbuild-plugin-global-externals';
import { pnpPlugin } from '@yarnpkg/esbuild-plugin-pnp';
@ -160,11 +159,7 @@ const starter: StarterFunction = async function* starterGeneratorFn({
yield;
const coreDirOrigin = join(
dirname(require.resolve('@storybook/core/package.json')),
'dist',
'manager'
);
const coreDirOrigin = join(dirname(require.resolve('storybook/package.json')), 'dist', 'manager');
router.use(
'/sb-addons',
@ -211,6 +206,7 @@ const starter: StarterFunction = async function* starterGeneratorFn({
router.use('/', ({ url }, res, next) => {
if (url && isRootPath.test(url)) {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/html');
res.write(html);
res.end();
} else {
@ -219,6 +215,7 @@ const starter: StarterFunction = async function* starterGeneratorFn({
});
router.use(`/index.html`, (req, res) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'text/html');
res.write(html);
res.end();
});
@ -259,11 +256,7 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
yield;
const addonsDir = config.outdir;
const coreDirOrigin = join(
dirname(require.resolve('@storybook/core/package.json')),
'dist',
'manager'
);
const coreDirOrigin = join(dirname(require.resolve('storybook/package.json')), 'dist', 'manager');
const coreDirTarget = join(options.outputDir, `sb-manager`);
// TODO: this doesn't watch, we should change this to use the esbuild watch API: https://esbuild.github.io/api/#watch

2
code/core/src/builder-manager/types.ts
View File

@ -3,7 +3,7 @@ import type {
BuilderStats,
Builder_Unpromise,
Builder_WithRequiredProperty,
} from '@storybook/core/types';
} from 'storybook/internal/types';
import type { BuildOptions, BuildResult } from 'esbuild';

4
code/core/src/builder-manager/utils/data.ts
View File

@ -1,7 +1,7 @@
import { basename } from 'node:path';
import { getRefs } from '@storybook/core/common';
import type { Options } from '@storybook/core/types';
import { getRefs } from 'storybook/internal/common';
import type { Options } from 'storybook/internal/types';
import { executor, getConfig } from '../index';
import { readTemplate } from './template';

7
code/core/src/builder-manager/utils/framework.ts
View File

@ -1,7 +1,10 @@
import { sep } from 'node:path';
import { extractProperRendererNameFromFramework, getFrameworkName } from '@storybook/core/common';
import type { Options } from '@storybook/core/types';
import {
extractProperRendererNameFromFramework,
getFrameworkName,
} from 'storybook/internal/common';
import type { Options } from 'storybook/internal/types';
interface PropertyObject {
name: string;

2
code/core/src/builder-manager/utils/managerEntries.ts
View File

@ -2,7 +2,7 @@ import { existsSync } from 'node:fs';
import { mkdir, writeFile } from 'node:fs/promises';
import { dirname, join, parse, relative, sep } from 'node:path';
import { resolvePathInStorybookCache } from '@storybook/core/common';
import { resolvePathInStorybookCache } from 'storybook/internal/common';
import slash from 'slash';

4
code/core/src/builder-manager/utils/template.ts
View File

@ -1,12 +1,12 @@
import { readFile } from 'node:fs/promises';
import { dirname, join } from 'node:path';
import type { DocsOptions, Options, Ref, TagsOptions } from '@storybook/core/types';
import type { DocsOptions, Options, Ref, TagsOptions } from 'storybook/internal/types';
import { render } from 'ejs';
export const getTemplatePath = async (template: string) => {
return join(dirname(require.resolve('@storybook/core/package.json')), 'assets/server', template);
return join(dirname(require.resolve('storybook/package.json')), 'assets/server', template);
};
export const readTemplate = async (template: string) => {

2
code/core/src/channels/postmessage/getEventSourceUrl.ts
View File

@ -1,4 +1,4 @@
import { logger } from '@storybook/core/client-logger';
import { logger } from 'storybook/internal/client-logger';
export const getEventSourceUrl = (event: MessageEvent) => {
const frames: HTMLIFrameElement[] = Array.from(

6
code/core/src/channels/postmessage/index.ts
View File

@ -1,8 +1,8 @@
/// <reference path="../../typings.d.ts" />
import { global } from '@storybook/global';
import { logger, pretty } from 'storybook/internal/client-logger';
import * as EVENTS from 'storybook/internal/core-events';
import { logger, pretty } from '@storybook/core/client-logger';
import * as EVENTS from '@storybook/core/core-events';
import { global } from '@storybook/global';
import { isJSON, parse, stringify } from 'telejson';
import invariant from 'tiny-invariant';

4
code/core/src/channels/websocket/index.ts
View File

@ -1,7 +1,7 @@
/// <reference path="../../typings.d.ts" />
import { global } from '@storybook/global';
import * as EVENTS from 'storybook/internal/core-events';
import * as EVENTS from '@storybook/core/core-events';
import { global } from '@storybook/global';
import { isJSON, parse, stringify } from 'telejson';
import invariant from 'tiny-invariant';

Some files were not shown because too many files have changed in this diff Show More