From 9a7bb906dc2ee97f880d94b755cbf437f0622483 Mon Sep 17 00:00:00 2001 From: Mark berry Date: Sat, 25 Nov 2023 05:32:13 -0600 Subject: [PATCH 01/61] Remove cached NgModules and introduce a global lock during bootstrapping --- .../client/angular-beta/AbstractRenderer.ts | 30 +++++++++++++++++-- .../angular-beta/StorybookWrapperComponent.ts | 28 +++++------------ 2 files changed, 34 insertions(+), 24 deletions(-) diff --git a/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts b/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts index f83fd00dde84..084a1e9fd721 100644 --- a/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts +++ b/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts @@ -3,10 +3,9 @@ import { bootstrapApplication } from '@angular/platform-browser'; import { BehaviorSubject, Subject } from 'rxjs'; import { stringify } from 'telejson'; -import { ICollection, Parameters, StoryFnAngularReturnType } from '../types'; +import { ICollection, StoryFnAngularReturnType } from '../types'; import { getApplication } from './StorybookModule'; import { storyPropsProvider } from './StorybookProvider'; -import { componentNgModules } from './StorybookWrapperComponent'; import { PropertyExtractor } from './utils/PropertyExtractor'; type StoryRenderInfo = { @@ -16,12 +15,13 @@ type StoryRenderInfo = { const applicationRefs = new Map(); +let bootstrappingLock = false; + export abstract class AbstractRenderer { /** * Wait and destroy the platform */ public static resetApplications(domNode?: HTMLElement) { - componentNgModules.clear(); applicationRefs.forEach((appRef, appDOMNode) => { if (!appRef.destroyed && (!domNode || appDOMNode === domNode)) { appRef.destroy(); @@ -129,6 +129,7 @@ export abstract class AbstractRenderer { analyzedMetadata, }); + await this.waitForBootstrappingLock(); const applicationRef = await bootstrapApplication(application, { ...storyFnAngular.applicationConfig, providers: [ @@ -137,12 +138,35 @@ export abstract class AbstractRenderer { ...(storyFnAngular.applicationConfig?.providers ?? []), ], }); + bootstrappingLock = false; applicationRefs.set(targetDOMNode, applicationRef); await this.afterFullRender(); } + /** + * Wait for the previous bootstrapApplication to finish before starting a new one, + * because the compiled component need to be cleared between applications compiling. + * + * Bootstraping multiple applications at the same time will cause the error that + * a component is declared in two modules. + */ + private waitForBootstrappingLock() { + return new Promise((resolve) => { + function checkCondition() { + if (!bootstrappingLock) { + bootstrappingLock = true; + resolve(); + } else { + setTimeout(checkCondition, 100); + } + } + + checkCondition(); + }); + } + /** * Only ASCII alphanumerics can be used as HTML tag name. * https://html.spec.whatwg.org/#elements-2 diff --git a/code/frameworks/angular/src/client/angular-beta/StorybookWrapperComponent.ts b/code/frameworks/angular/src/client/angular-beta/StorybookWrapperComponent.ts index aa5bd589d123..cd39e890166e 100644 --- a/code/frameworks/angular/src/client/angular-beta/StorybookWrapperComponent.ts +++ b/code/frameworks/angular/src/client/angular-beta/StorybookWrapperComponent.ts @@ -31,9 +31,6 @@ const getNonInputsOutputsProps = ( return Object.keys(props).filter((k) => ![...inputs, ...outputs].includes(k)); }; -// component modules cache -export const componentNgModules = new Map>(); - /** * Wraps the story template into a component */ @@ -60,23 +57,12 @@ export const createStorybookWrapperComponent = ({ const { imports, declarations, providers } = analyzedMetadata; - // Only create a new module if it doesn't already exist - // This is to prevent the module from being recreated on every story change - // Declarations & Imports are only added once - // Providers are added on every story change to allow for story-specific providers - let ngModule = componentNgModules.get(storyComponent); - - if (!ngModule) { - @NgModule({ - declarations, - imports, - exports: [...declarations, ...imports], - }) - class StorybookComponentModule {} - - componentNgModules.set(storyComponent, StorybookComponentModule); - ngModule = componentNgModules.get(storyComponent); - } + @NgModule({ + declarations, + imports, + exports: [...declarations, ...imports], + }) + class StorybookComponentModule {} PropertyExtractor.warnImportsModuleWithProviders(analyzedMetadata); @@ -84,7 +70,7 @@ export const createStorybookWrapperComponent = ({ selector, template, standalone: true, - imports: [ngModule], + imports: [StorybookComponentModule], providers, styles, schemas: moduleMetadata.schemas, From 1d42da92fe5f77abc1c3bdf0e0ab5b9879a04b0f Mon Sep 17 00:00:00 2001 From: Mark berry Date: Wed, 29 Nov 2023 19:38:55 -0600 Subject: [PATCH 02/61] Add tests and make bootstrapLock more generic --- .../client/angular-beta/AbstractRenderer.ts | 43 ++----- .../angular-beta/RendererFactory.test.ts | 44 ++++++- .../angular-beta/utils/BootstrapLock.test.ts | 120 ++++++++++++++++++ .../angular-beta/utils/BootstrapLock.ts | 55 ++++++++ 4 files changed, 228 insertions(+), 34 deletions(-) create mode 100644 code/frameworks/angular/src/client/angular-beta/utils/BootstrapLock.test.ts create mode 100644 code/frameworks/angular/src/client/angular-beta/utils/BootstrapLock.ts diff --git a/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts b/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts index 084a1e9fd721..0b35ccd790e8 100644 --- a/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts +++ b/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts @@ -7,6 +7,7 @@ import { ICollection, StoryFnAngularReturnType } from '../types'; import { getApplication } from './StorybookModule'; import { storyPropsProvider } from './StorybookProvider'; import { PropertyExtractor } from './utils/PropertyExtractor'; +import { bootstrapLock } from './utils/BootstrapLock'; type StoryRenderInfo = { storyFnAngular: StoryFnAngularReturnType; @@ -15,8 +16,6 @@ type StoryRenderInfo = { const applicationRefs = new Map(); -let bootstrappingLock = false; - export abstract class AbstractRenderer { /** * Wait and destroy the platform @@ -129,44 +128,22 @@ export abstract class AbstractRenderer { analyzedMetadata, }); - await this.waitForBootstrappingLock(); - const applicationRef = await bootstrapApplication(application, { - ...storyFnAngular.applicationConfig, - providers: [ - storyPropsProvider(newStoryProps$), - ...analyzedMetadata.applicationProviders, - ...(storyFnAngular.applicationConfig?.providers ?? []), - ], + const applicationRef = await bootstrapLock(targetSelector, () => { + return bootstrapApplication(application, { + ...storyFnAngular.applicationConfig, + providers: [ + storyPropsProvider(newStoryProps$), + ...analyzedMetadata.applicationProviders, + ...(storyFnAngular.applicationConfig?.providers ?? []), + ], + }); }); - bootstrappingLock = false; applicationRefs.set(targetDOMNode, applicationRef); await this.afterFullRender(); } - /** - * Wait for the previous bootstrapApplication to finish before starting a new one, - * because the compiled component need to be cleared between applications compiling. - * - * Bootstraping multiple applications at the same time will cause the error that - * a component is declared in two modules. - */ - private waitForBootstrappingLock() { - return new Promise((resolve) => { - function checkCondition() { - if (!bootstrappingLock) { - bootstrappingLock = true; - resolve(); - } else { - setTimeout(checkCondition, 100); - } - } - - checkCondition(); - }); - } - /** * Only ASCII alphanumerics can be used as HTML tag name. * https://html.spec.whatwg.org/#elements-2 diff --git a/code/frameworks/angular/src/client/angular-beta/RendererFactory.test.ts b/code/frameworks/angular/src/client/angular-beta/RendererFactory.test.ts index 0dc51d15eb6c..bfba51ba173a 100644 --- a/code/frameworks/angular/src/client/angular-beta/RendererFactory.test.ts +++ b/code/frameworks/angular/src/client/angular-beta/RendererFactory.test.ts @@ -17,7 +17,8 @@ describe('RendererFactory', () => { beforeEach(async () => { rendererFactory = new RendererFactory(); document.body.innerHTML = - '
'; + '
' + + '
'; rootTargetDOMNode = global.document.getElementById('storybook-root'); rootDocstargetDOMNode = global.document.getElementById('root-docs'); (platformBrowserDynamic as any).mockImplementation(platformBrowserDynamicTesting); @@ -180,5 +181,46 @@ describe('RendererFactory', () => { const render = await rendererFactory.getRendererInstance(rootDocstargetDOMNode); expect(render).toBeInstanceOf(DocsRenderer); }); + + describe('when bootstrapping multiple stories in parallel', () => { + it('should render both stories', async () => { + @Component({ selector: 'foo', template: '🦊' }) + class FooComponent {} + + const render = await rendererFactory.getRendererInstance( + global.document.getElementById('storybook-docs') + ); + + const targetDOMNode1 = global.document.createElement('div'); + targetDOMNode1.id = 'story-1'; + global.document.getElementById('storybook-docs').appendChild(targetDOMNode1); + + const targetDOMNode2 = global.document.createElement('div'); + targetDOMNode2.id = 'story-2'; + global.document.getElementById('storybook-docs').appendChild(targetDOMNode2); + + await Promise.all([ + render.render({ + storyFnAngular: {}, + forced: false, + component: FooComponent, + targetDOMNode: targetDOMNode1, + }), + render.render({ + storyFnAngular: {}, + forced: false, + component: FooComponent, + targetDOMNode: targetDOMNode2, + }), + ]); + + expect(global.document.querySelector('#story-1 > story-1').innerHTML).toBe( + '🦊' + ); + expect(global.document.querySelector('#story-2 > story-2').innerHTML).toBe( + '🦊' + ); + }); + }); }); }); diff --git a/code/frameworks/angular/src/client/angular-beta/utils/BootstrapLock.test.ts b/code/frameworks/angular/src/client/angular-beta/utils/BootstrapLock.test.ts new file mode 100644 index 000000000000..11fc86750e6d --- /dev/null +++ b/code/frameworks/angular/src/client/angular-beta/utils/BootstrapLock.test.ts @@ -0,0 +1,120 @@ +import { Subject } from 'rxjs'; + +import { bootstrapLock, getCurrentLock } from './BootstrapLock'; + +const tick = (count: number) => new Promise((resolve) => setTimeout(resolve, count)); + +describe('BootstrapLock', () => { + beforeEach(async () => { + jest.spyOn(console, 'log').mockImplementation(() => {}); + }); + + afterEach(() => { + jest.clearAllMocks(); + }); + + it('should lock until complete', async () => { + expect(getCurrentLock()).toBeNull(); + + const pendingSubject = new Subject(); + const bootstrapApp = jest.fn().mockImplementation(async () => { + return pendingSubject.toPromise(); + }); + const bootstrapAppFinished = jest.fn(); + + bootstrapLock('story-1', bootstrapApp).then(bootstrapAppFinished); + + await tick(30); + + expect(getCurrentLock()).toBe('story-1'); + expect(bootstrapApp).toHaveBeenCalled(); + expect(bootstrapAppFinished).not.toHaveBeenCalled(); + + pendingSubject.next(); + pendingSubject.complete(); + + await tick(30); + + expect(bootstrapApp).toHaveReturnedTimes(1); + expect(bootstrapAppFinished).toHaveBeenCalled(); + expect(getCurrentLock()).toBeNull(); + }); + + it('should prevent second task, until first task complete', async () => { + expect(getCurrentLock()).toBeNull(); + + const pendingSubject = new Subject(); + const bootstrapApp = jest.fn().mockImplementation(async () => { + return pendingSubject.toPromise(); + }); + const bootstrapAppFinished = jest.fn(); + + const pendingSubject2 = new Subject(); + const bootstrapApp2 = jest.fn().mockImplementation(async () => { + return pendingSubject2.toPromise(); + }); + const bootstrapAppFinished2 = jest.fn(); + + bootstrapLock('story-1', bootstrapApp).then(bootstrapAppFinished); + bootstrapLock('story-2', bootstrapApp2).then(bootstrapAppFinished2); + + await tick(30); + + expect(getCurrentLock()).toBe('story-1'); + expect(bootstrapApp).toHaveBeenCalled(); + expect(bootstrapAppFinished).not.toHaveBeenCalled(); + expect(bootstrapApp2).not.toHaveBeenCalled(); + expect(bootstrapAppFinished2).not.toHaveBeenCalled(); + + pendingSubject.next(); + pendingSubject.complete(); + + await tick(30); + + expect(getCurrentLock()).toBe('story-2'); + expect(bootstrapApp).toHaveReturnedTimes(1); + expect(bootstrapAppFinished).toHaveBeenCalled(); + expect(bootstrapApp2).toHaveBeenCalled(); + expect(bootstrapAppFinished2).not.toHaveBeenCalled(); + + pendingSubject2.next(); + pendingSubject2.complete(); + + await tick(30); + + expect(getCurrentLock()).toBeNull(); + expect(bootstrapApp).toHaveReturnedTimes(1); + expect(bootstrapAppFinished).toHaveBeenCalled(); + expect(bootstrapApp2).toHaveReturnedTimes(1); + expect(bootstrapAppFinished2).toHaveBeenCalled(); + }); + + it('should reset lock on error', async () => { + expect(getCurrentLock()).toBeNull(); + + const pendingSubject = new Subject(); + const bootstrapApp = jest.fn().mockImplementation(async () => { + return pendingSubject.toPromise(); + }); + const bootstrapAppFinished = jest.fn(); + const bootstrapAppError = jest.fn(); + + bootstrapLock('story-1', bootstrapApp).then(bootstrapAppFinished).catch(bootstrapAppError); + + await tick(30); + + expect(getCurrentLock()).toBe('story-1'); + expect(bootstrapApp).toHaveBeenCalled(); + expect(bootstrapAppFinished).not.toHaveBeenCalled(); + + // eslint-disable-next-line local-rules/no-uncategorized-errors + pendingSubject.error(new Error('test error')); + + await tick(30); + + expect(getCurrentLock()).toBeNull(); + expect(bootstrapApp).toHaveReturnedTimes(1); + expect(bootstrapAppFinished).not.toHaveBeenCalled(); + expect(bootstrapAppError).toHaveBeenCalled(); + }); +}); diff --git a/code/frameworks/angular/src/client/angular-beta/utils/BootstrapLock.ts b/code/frameworks/angular/src/client/angular-beta/utils/BootstrapLock.ts new file mode 100644 index 000000000000..77e6a35b4d7c --- /dev/null +++ b/code/frameworks/angular/src/client/angular-beta/utils/BootstrapLock.ts @@ -0,0 +1,55 @@ +import { ApplicationRef } from '@angular/core'; + +let lock: string | null = null; + +/** + * Returns the selector of the component being bootstrapped, or null if no + * component is being bootstrapped. + */ +export const getCurrentLock = (): string | null => { + return lock; +}; + +/** + * Waits for chance to acquire lock for a component to bootstrap. + * + * @param selector the selectory of the component requesting a lock to bootstrap + * @returns + */ +const acquireLock = (selector: string) => { + return new Promise((resolve) => { + function checkLock() { + if (lock === null) { + lock = selector; + resolve(); + } else { + setTimeout(checkLock, 30); + } + } + + checkLock(); + }); +}; + +/** + * Delays bootstrapping until a lock is acquired, so that only one application + * can be bootstrapped at a time. + * + * Bootstrapping multiple applications at once can cause Angular to throw an + * error that a component is declared in multiple modules. + * + * @param selector the selectory of the component requesting a lock to bootstrap + * @param fn callback that should complete the bootstrap process + * @returns ApplicationRef from the completed bootstrap process + */ +export const bootstrapLock = async (selector: string, fn: () => Promise) => { + await acquireLock(selector); + try { + const ref = await fn(); + lock = null; + return ref; + } catch (e) { + lock = null; + throw e; + } +}; From 37e29e497796a2722db772d11bcd7587ce0ddb11 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 1 Dec 2023 10:05:25 +0100 Subject: [PATCH 03/61] Use a queue instead of loops and timeouts --- .../client/angular-beta/AbstractRenderer.ts | 4 +- .../angular-beta/utils/BootstrapLock.test.ts | 69 +++++++++++-------- .../angular-beta/utils/BootstrapLock.ts | 63 +++++------------ 3 files changed, 59 insertions(+), 77 deletions(-) diff --git a/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts b/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts index 0b35ccd790e8..d3512a53f56c 100644 --- a/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts +++ b/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts @@ -7,7 +7,7 @@ import { ICollection, StoryFnAngularReturnType } from '../types'; import { getApplication } from './StorybookModule'; import { storyPropsProvider } from './StorybookProvider'; import { PropertyExtractor } from './utils/PropertyExtractor'; -import { bootstrapLock } from './utils/BootstrapLock'; +import { queueBootstrapping } from './utils/BootstrapLock'; type StoryRenderInfo = { storyFnAngular: StoryFnAngularReturnType; @@ -128,7 +128,7 @@ export abstract class AbstractRenderer { analyzedMetadata, }); - const applicationRef = await bootstrapLock(targetSelector, () => { + const applicationRef = await queueBootstrapping(() => { return bootstrapApplication(application, { ...storyFnAngular.applicationConfig, providers: [ diff --git a/code/frameworks/angular/src/client/angular-beta/utils/BootstrapLock.test.ts b/code/frameworks/angular/src/client/angular-beta/utils/BootstrapLock.test.ts index 11fc86750e6d..051a92f397ae 100644 --- a/code/frameworks/angular/src/client/angular-beta/utils/BootstrapLock.test.ts +++ b/code/frameworks/angular/src/client/angular-beta/utils/BootstrapLock.test.ts @@ -1,8 +1,8 @@ import { Subject } from 'rxjs'; -import { bootstrapLock, getCurrentLock } from './BootstrapLock'; +import { queueBootstrapping } from './BootstrapLock'; -const tick = (count: number) => new Promise((resolve) => setTimeout(resolve, count)); +const tick = (count = 0) => new Promise((resolve) => setTimeout(resolve, count)); describe('BootstrapLock', () => { beforeEach(async () => { @@ -14,35 +14,28 @@ describe('BootstrapLock', () => { }); it('should lock until complete', async () => { - expect(getCurrentLock()).toBeNull(); - const pendingSubject = new Subject(); const bootstrapApp = jest.fn().mockImplementation(async () => { return pendingSubject.toPromise(); }); const bootstrapAppFinished = jest.fn(); - bootstrapLock('story-1', bootstrapApp).then(bootstrapAppFinished); - - await tick(30); + queueBootstrapping(bootstrapApp).then(() => { + bootstrapAppFinished(); + }); - expect(getCurrentLock()).toBe('story-1'); expect(bootstrapApp).toHaveBeenCalled(); expect(bootstrapAppFinished).not.toHaveBeenCalled(); pendingSubject.next(); pendingSubject.complete(); - await tick(30); + await tick(); - expect(bootstrapApp).toHaveReturnedTimes(1); expect(bootstrapAppFinished).toHaveBeenCalled(); - expect(getCurrentLock()).toBeNull(); }); - it('should prevent second task, until first task complete', async () => { - expect(getCurrentLock()).toBeNull(); - + it('should prevent following tasks, until the preview tasks are complete', async () => { const pendingSubject = new Subject(); const bootstrapApp = jest.fn().mockImplementation(async () => { return pendingSubject.toPromise(); @@ -55,43 +48,63 @@ describe('BootstrapLock', () => { }); const bootstrapAppFinished2 = jest.fn(); - bootstrapLock('story-1', bootstrapApp).then(bootstrapAppFinished); - bootstrapLock('story-2', bootstrapApp2).then(bootstrapAppFinished2); + const pendingSubject3 = new Subject(); + const bootstrapApp3 = jest.fn().mockImplementation(async () => { + return pendingSubject3.toPromise(); + }); + const bootstrapAppFinished3 = jest.fn(); + + queueBootstrapping(bootstrapApp).then(bootstrapAppFinished); + queueBootstrapping(bootstrapApp2).then(bootstrapAppFinished2); + queueBootstrapping(bootstrapApp3).then(bootstrapAppFinished3); - await tick(30); + await tick(); - expect(getCurrentLock()).toBe('story-1'); expect(bootstrapApp).toHaveBeenCalled(); expect(bootstrapAppFinished).not.toHaveBeenCalled(); expect(bootstrapApp2).not.toHaveBeenCalled(); expect(bootstrapAppFinished2).not.toHaveBeenCalled(); + expect(bootstrapApp3).not.toHaveBeenCalled(); + expect(bootstrapAppFinished3).not.toHaveBeenCalled(); pendingSubject.next(); pendingSubject.complete(); - await tick(30); + await tick(); - expect(getCurrentLock()).toBe('story-2'); expect(bootstrapApp).toHaveReturnedTimes(1); expect(bootstrapAppFinished).toHaveBeenCalled(); expect(bootstrapApp2).toHaveBeenCalled(); expect(bootstrapAppFinished2).not.toHaveBeenCalled(); + expect(bootstrapApp3).not.toHaveBeenCalled(); + expect(bootstrapAppFinished3).not.toHaveBeenCalled(); pendingSubject2.next(); pendingSubject2.complete(); - await tick(30); + await tick(); + + expect(bootstrapApp).toHaveReturnedTimes(1); + expect(bootstrapAppFinished).toHaveBeenCalled(); + expect(bootstrapApp2).toHaveReturnedTimes(1); + expect(bootstrapAppFinished2).toHaveBeenCalled(); + expect(bootstrapApp3).toHaveBeenCalled(); + expect(bootstrapAppFinished3).not.toHaveBeenCalled(); + + pendingSubject3.next(); + pendingSubject3.complete(); + + await tick(); - expect(getCurrentLock()).toBeNull(); expect(bootstrapApp).toHaveReturnedTimes(1); expect(bootstrapAppFinished).toHaveBeenCalled(); expect(bootstrapApp2).toHaveReturnedTimes(1); expect(bootstrapAppFinished2).toHaveBeenCalled(); + expect(bootstrapApp3).toHaveReturnedTimes(1); + expect(bootstrapAppFinished3).toHaveBeenCalled(); }); it('should reset lock on error', async () => { - expect(getCurrentLock()).toBeNull(); - const pendingSubject = new Subject(); const bootstrapApp = jest.fn().mockImplementation(async () => { return pendingSubject.toPromise(); @@ -99,20 +112,16 @@ describe('BootstrapLock', () => { const bootstrapAppFinished = jest.fn(); const bootstrapAppError = jest.fn(); - bootstrapLock('story-1', bootstrapApp).then(bootstrapAppFinished).catch(bootstrapAppError); - - await tick(30); + queueBootstrapping(bootstrapApp).then(bootstrapAppFinished).catch(bootstrapAppError); - expect(getCurrentLock()).toBe('story-1'); expect(bootstrapApp).toHaveBeenCalled(); expect(bootstrapAppFinished).not.toHaveBeenCalled(); // eslint-disable-next-line local-rules/no-uncategorized-errors pendingSubject.error(new Error('test error')); - await tick(30); + await tick(); - expect(getCurrentLock()).toBeNull(); expect(bootstrapApp).toHaveReturnedTimes(1); expect(bootstrapAppFinished).not.toHaveBeenCalled(); expect(bootstrapAppError).toHaveBeenCalled(); diff --git a/code/frameworks/angular/src/client/angular-beta/utils/BootstrapLock.ts b/code/frameworks/angular/src/client/angular-beta/utils/BootstrapLock.ts index 77e6a35b4d7c..ddda56986d06 100644 --- a/code/frameworks/angular/src/client/angular-beta/utils/BootstrapLock.ts +++ b/code/frameworks/angular/src/client/angular-beta/utils/BootstrapLock.ts @@ -1,55 +1,28 @@ import { ApplicationRef } from '@angular/core'; -let lock: string | null = null; +const queue: Array<() => Promise> = []; +let isProcessing = false; -/** - * Returns the selector of the component being bootstrapped, or null if no - * component is being bootstrapped. - */ -export const getCurrentLock = (): string | null => { - return lock; -}; +export const queueBootstrapping = (fn: () => Promise): Promise => { + return new Promise((resolve, reject) => { + queue.push(() => fn().then(resolve).catch(reject)); -/** - * Waits for chance to acquire lock for a component to bootstrap. - * - * @param selector the selectory of the component requesting a lock to bootstrap - * @returns - */ -const acquireLock = (selector: string) => { - return new Promise((resolve) => { - function checkLock() { - if (lock === null) { - lock = selector; - resolve(); - } else { - setTimeout(checkLock, 30); - } + if (!isProcessing) { + processQueue(); } - - checkLock(); }); }; -/** - * Delays bootstrapping until a lock is acquired, so that only one application - * can be bootstrapped at a time. - * - * Bootstrapping multiple applications at once can cause Angular to throw an - * error that a component is declared in multiple modules. - * - * @param selector the selectory of the component requesting a lock to bootstrap - * @param fn callback that should complete the bootstrap process - * @returns ApplicationRef from the completed bootstrap process - */ -export const bootstrapLock = async (selector: string, fn: () => Promise) => { - await acquireLock(selector); - try { - const ref = await fn(); - lock = null; - return ref; - } catch (e) { - lock = null; - throw e; +const processQueue = async () => { + isProcessing = true; + + while (queue.length > 0) { + const bootstrappingFn = queue.shift(); + if (bootstrappingFn) { + // eslint-disable-next-line no-await-in-loop + await bootstrappingFn(); + } } + + isProcessing = false; }; From d14ad857b3e4804cf8f3ede5420929ead85e4210 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 1 Dec 2023 10:43:07 +0100 Subject: [PATCH 04/61] Reset compiled components after bootstrapping --- .../client/angular-beta/AbstractRenderer.ts | 25 ------------------- .../src/client/angular-beta/CanvasRenderer.ts | 4 --- .../src/client/angular-beta/DocsRenderer.ts | 4 --- .../angular-beta/utils/BootstrapLock.ts | 24 +++++++++++++++++- 4 files changed, 23 insertions(+), 34 deletions(-) diff --git a/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts b/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts index d3512a53f56c..645e4653c40e 100644 --- a/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts +++ b/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts @@ -28,27 +28,6 @@ export abstract class AbstractRenderer { }); } - /** - * Reset compiled components because we often want to compile the same component with - * more than one NgModule. - */ - protected static resetCompiledComponents = async () => { - try { - // Clear global Angular component cache in order to be able to re-render the same component across multiple stories - // - // References: - // https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/webpack/plugins/hmr/hmr-accept.ts#L50 - // https://github.com/angular/angular/blob/2ebe2bcb2fe19bf672316b05f15241fd7fd40803/packages/core/src/render3/jit/module.ts#L377-L384 - const { ɵresetCompiledComponents } = await import('@angular/core'); - ɵresetCompiledComponents(); - } catch (e) { - /** - * noop catch - * This means angular removed or modified ɵresetCompiledComponents - */ - } - }; - protected previousStoryRenderInfo = new Map(); // Observable to change the properties dynamically without reloading angular module&component @@ -68,8 +47,6 @@ export abstract class AbstractRenderer { protected abstract beforeFullRender(domNode?: HTMLElement): Promise; - protected abstract afterFullRender(): Promise; - /** * Bootstrap main angular module with main component or send only new `props` with storyProps$ * @@ -140,8 +117,6 @@ export abstract class AbstractRenderer { }); applicationRefs.set(targetDOMNode, applicationRef); - - await this.afterFullRender(); } /** diff --git a/code/frameworks/angular/src/client/angular-beta/CanvasRenderer.ts b/code/frameworks/angular/src/client/angular-beta/CanvasRenderer.ts index 994733657f78..eeb6812ddab3 100644 --- a/code/frameworks/angular/src/client/angular-beta/CanvasRenderer.ts +++ b/code/frameworks/angular/src/client/angular-beta/CanvasRenderer.ts @@ -15,8 +15,4 @@ export class CanvasRenderer extends AbstractRenderer { async beforeFullRender(): Promise { CanvasRenderer.resetApplications(); } - - async afterFullRender(): Promise { - await AbstractRenderer.resetCompiledComponents(); - } } diff --git a/code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts b/code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts index d51573376fcb..4bffa45c4c5d 100644 --- a/code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts +++ b/code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts @@ -41,8 +41,4 @@ export class DocsRenderer extends AbstractRenderer { async beforeFullRender(domNode?: HTMLElement): Promise { DocsRenderer.resetApplications(domNode); } - - async afterFullRender(): Promise { - await AbstractRenderer.resetCompiledComponents(); - } } diff --git a/code/frameworks/angular/src/client/angular-beta/utils/BootstrapLock.ts b/code/frameworks/angular/src/client/angular-beta/utils/BootstrapLock.ts index ddda56986d06..a976f2738ec2 100644 --- a/code/frameworks/angular/src/client/angular-beta/utils/BootstrapLock.ts +++ b/code/frameworks/angular/src/client/angular-beta/utils/BootstrapLock.ts @@ -1,8 +1,30 @@ +/* eslint-disable no-await-in-loop */ import { ApplicationRef } from '@angular/core'; const queue: Array<() => Promise> = []; let isProcessing = false; +/** + * Reset compiled components because we often want to compile the same component with + * more than one NgModule. + */ +const resetCompiledComponents = async () => { + try { + // Clear global Angular component cache in order to be able to re-render the same component across multiple stories + // + // References: + // https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/webpack/plugins/hmr/hmr-accept.ts#L50 + // https://github.com/angular/angular/blob/2ebe2bcb2fe19bf672316b05f15241fd7fd40803/packages/core/src/render3/jit/module.ts#L377-L384 + const { ɵresetCompiledComponents } = await import('@angular/core'); + ɵresetCompiledComponents(); + } catch (e) { + /** + * noop catch + * This means angular removed or modified ɵresetCompiledComponents + */ + } +}; + export const queueBootstrapping = (fn: () => Promise): Promise => { return new Promise((resolve, reject) => { queue.push(() => fn().then(resolve).catch(reject)); @@ -19,8 +41,8 @@ const processQueue = async () => { while (queue.length > 0) { const bootstrappingFn = queue.shift(); if (bootstrappingFn) { - // eslint-disable-next-line no-await-in-loop await bootstrappingFn(); + await resetCompiledComponents(); } } From f729eb8f236ec9a81d9c625ba445edbbaeee056e Mon Sep 17 00:00:00 2001 From: Mark berry Date: Fri, 1 Dec 2023 23:23:39 -0600 Subject: [PATCH 05/61] Update test and names to refer to "queue" instead of "lock" --- .../client/angular-beta/AbstractRenderer.ts | 2 +- ...rapLock.test.ts => BootstrapQueue.test.ts} | 51 ++++++++++++++----- .../{BootstrapLock.ts => BootstrapQueue.ts} | 12 +++++ 3 files changed, 51 insertions(+), 14 deletions(-) rename code/frameworks/angular/src/client/angular-beta/utils/{BootstrapLock.test.ts => BootstrapQueue.test.ts} (68%) rename code/frameworks/angular/src/client/angular-beta/utils/{BootstrapLock.ts => BootstrapQueue.ts} (76%) diff --git a/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts b/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts index 645e4653c40e..9e3f363efbac 100644 --- a/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts +++ b/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts @@ -7,7 +7,7 @@ import { ICollection, StoryFnAngularReturnType } from '../types'; import { getApplication } from './StorybookModule'; import { storyPropsProvider } from './StorybookProvider'; import { PropertyExtractor } from './utils/PropertyExtractor'; -import { queueBootstrapping } from './utils/BootstrapLock'; +import { queueBootstrapping } from './utils/BootstrapQueue'; type StoryRenderInfo = { storyFnAngular: StoryFnAngularReturnType; diff --git a/code/frameworks/angular/src/client/angular-beta/utils/BootstrapLock.test.ts b/code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.test.ts similarity index 68% rename from code/frameworks/angular/src/client/angular-beta/utils/BootstrapLock.test.ts rename to code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.test.ts index 051a92f397ae..a7625e37b6d8 100644 --- a/code/frameworks/angular/src/client/angular-beta/utils/BootstrapLock.test.ts +++ b/code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.test.ts @@ -1,10 +1,10 @@ -import { Subject } from 'rxjs'; +import { Subject, lastValueFrom } from 'rxjs'; -import { queueBootstrapping } from './BootstrapLock'; +import { queueBootstrapping } from './BootstrapQueue'; const tick = (count = 0) => new Promise((resolve) => setTimeout(resolve, count)); -describe('BootstrapLock', () => { +describe('BootstrapQueue', () => { beforeEach(async () => { jest.spyOn(console, 'log').mockImplementation(() => {}); }); @@ -13,10 +13,10 @@ describe('BootstrapLock', () => { jest.clearAllMocks(); }); - it('should lock until complete', async () => { + it('should wait until complete', async () => { const pendingSubject = new Subject(); const bootstrapApp = jest.fn().mockImplementation(async () => { - return pendingSubject.toPromise(); + return lastValueFrom(pendingSubject); }); const bootstrapAppFinished = jest.fn(); @@ -38,19 +38,19 @@ describe('BootstrapLock', () => { it('should prevent following tasks, until the preview tasks are complete', async () => { const pendingSubject = new Subject(); const bootstrapApp = jest.fn().mockImplementation(async () => { - return pendingSubject.toPromise(); + return lastValueFrom(pendingSubject); }); const bootstrapAppFinished = jest.fn(); const pendingSubject2 = new Subject(); const bootstrapApp2 = jest.fn().mockImplementation(async () => { - return pendingSubject2.toPromise(); + return lastValueFrom(pendingSubject2); }); const bootstrapAppFinished2 = jest.fn(); const pendingSubject3 = new Subject(); const bootstrapApp3 = jest.fn().mockImplementation(async () => { - return pendingSubject3.toPromise(); + return lastValueFrom(pendingSubject3); }); const bootstrapAppFinished3 = jest.fn(); @@ -104,26 +104,51 @@ describe('BootstrapLock', () => { expect(bootstrapAppFinished3).toHaveBeenCalled(); }); - it('should reset lock on error', async () => { + it('should throw and continue next bootstrap on error', async () => { const pendingSubject = new Subject(); const bootstrapApp = jest.fn().mockImplementation(async () => { - return pendingSubject.toPromise(); + return lastValueFrom(pendingSubject); }); const bootstrapAppFinished = jest.fn(); const bootstrapAppError = jest.fn(); + const pendingSubject2 = new Subject(); + const bootstrapApp2 = jest.fn().mockImplementation(async () => { + return lastValueFrom(pendingSubject2); + }); + const bootstrapAppFinished2 = jest.fn(); + const bootstrapAppError2 = jest.fn(); + queueBootstrapping(bootstrapApp).then(bootstrapAppFinished).catch(bootstrapAppError); + queueBootstrapping(bootstrapApp2).then(bootstrapAppFinished2).catch(bootstrapAppError2); - expect(bootstrapApp).toHaveBeenCalled(); + expect(bootstrapApp).toHaveBeenCalledTimes(1); expect(bootstrapAppFinished).not.toHaveBeenCalled(); + expect(bootstrapApp2).not.toHaveBeenCalled(); + expect(bootstrapAppFinished2).not.toHaveBeenCalled(); // eslint-disable-next-line local-rules/no-uncategorized-errors pendingSubject.error(new Error('test error')); await tick(); - expect(bootstrapApp).toHaveReturnedTimes(1); + expect(bootstrapApp).toHaveBeenCalledTimes(1); + expect(bootstrapAppFinished).not.toHaveBeenCalled(); + expect(bootstrapAppError).toHaveBeenCalledTimes(1); + expect(bootstrapApp2).toHaveBeenCalledTimes(1); + expect(bootstrapAppFinished2).not.toHaveBeenCalled(); + expect(bootstrapAppError2).not.toHaveBeenCalled(); + + pendingSubject2.next(); + pendingSubject2.complete(); + + await tick(); + + expect(bootstrapApp).toHaveBeenCalledTimes(1); expect(bootstrapAppFinished).not.toHaveBeenCalled(); - expect(bootstrapAppError).toHaveBeenCalled(); + expect(bootstrapAppError).toHaveBeenCalledTimes(1); + expect(bootstrapApp2).toHaveBeenCalledTimes(1); + expect(bootstrapAppFinished2).toHaveBeenCalledTimes(1); + expect(bootstrapAppError2).not.toHaveBeenCalled(); }); }); diff --git a/code/frameworks/angular/src/client/angular-beta/utils/BootstrapLock.ts b/code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.ts similarity index 76% rename from code/frameworks/angular/src/client/angular-beta/utils/BootstrapLock.ts rename to code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.ts index a976f2738ec2..a5c7ca6df8ce 100644 --- a/code/frameworks/angular/src/client/angular-beta/utils/BootstrapLock.ts +++ b/code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.ts @@ -25,6 +25,18 @@ const resetCompiledComponents = async () => { } }; +/** + * Queue bootstrapping, so that only one application can be bootstrapped at a + * time. + * + * Bootstrapping multiple applications at once can cause Angular to throw an + * error that a component is declared in multiple modules. This avoids two + * stories confusing the Angular compiler, by bootstrapping more that one + * application at a time. + * + * @param fn callback that should complete the bootstrap process + * @returns ApplicationRef from the completed bootstrap process + */ export const queueBootstrapping = (fn: () => Promise): Promise => { return new Promise((resolve, reject) => { queue.push(() => fn().then(resolve).catch(reject)); From 29ab19245a6f69aeef356ac5e368d89ecb589daa Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 4 Dec 2023 09:32:01 +0100 Subject: [PATCH 06/61] Reset compiled components before bootstraping --- .../src/client/angular-beta/utils/BootstrapQueue.test.ts | 4 ++++ .../angular/src/client/angular-beta/utils/BootstrapQueue.ts | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.test.ts b/code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.test.ts index a7625e37b6d8..04dcdd65e077 100644 --- a/code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.test.ts +++ b/code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.test.ts @@ -24,6 +24,8 @@ describe('BootstrapQueue', () => { bootstrapAppFinished(); }); + await tick(); + expect(bootstrapApp).toHaveBeenCalled(); expect(bootstrapAppFinished).not.toHaveBeenCalled(); @@ -122,6 +124,8 @@ describe('BootstrapQueue', () => { queueBootstrapping(bootstrapApp).then(bootstrapAppFinished).catch(bootstrapAppError); queueBootstrapping(bootstrapApp2).then(bootstrapAppFinished2).catch(bootstrapAppError2); + await tick(); + expect(bootstrapApp).toHaveBeenCalledTimes(1); expect(bootstrapAppFinished).not.toHaveBeenCalled(); expect(bootstrapApp2).not.toHaveBeenCalled(); diff --git a/code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.ts b/code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.ts index a5c7ca6df8ce..e708453223d7 100644 --- a/code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.ts +++ b/code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.ts @@ -53,8 +53,8 @@ const processQueue = async () => { while (queue.length > 0) { const bootstrappingFn = queue.shift(); if (bootstrappingFn) { - await bootstrappingFn(); await resetCompiledComponents(); + await bootstrappingFn(); } } From f71ca84cc9d783c688443c84e6d60020e9a6b5f8 Mon Sep 17 00:00:00 2001 From: Mark Berry Date: Thu, 28 Dec 2023 17:13:42 -0600 Subject: [PATCH 07/61] Migrate tests to vitest --- .../angular-beta/utils/BootstrapQueue.test.ts | 34 +++++++++---------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.test.ts b/code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.test.ts index 04dcdd65e077..542f5e3b6df7 100644 --- a/code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.test.ts +++ b/code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.test.ts @@ -1,4 +1,5 @@ import { Subject, lastValueFrom } from 'rxjs'; +import { vi, describe, it, expect, beforeEach } from 'vitest'; import { queueBootstrapping } from './BootstrapQueue'; @@ -6,19 +7,19 @@ const tick = (count = 0) => new Promise((resolve) => setTimeout(resolve, count)) describe('BootstrapQueue', () => { beforeEach(async () => { - jest.spyOn(console, 'log').mockImplementation(() => {}); + vi.spyOn(console, 'log').mockImplementation(() => {}); }); afterEach(() => { - jest.clearAllMocks(); + vi.clearAllMocks(); }); it('should wait until complete', async () => { const pendingSubject = new Subject(); - const bootstrapApp = jest.fn().mockImplementation(async () => { + const bootstrapApp = vi.fn().mockImplementation(async () => { return lastValueFrom(pendingSubject); }); - const bootstrapAppFinished = jest.fn(); + const bootstrapAppFinished = vi.fn(); queueBootstrapping(bootstrapApp).then(() => { bootstrapAppFinished(); @@ -39,22 +40,22 @@ describe('BootstrapQueue', () => { it('should prevent following tasks, until the preview tasks are complete', async () => { const pendingSubject = new Subject(); - const bootstrapApp = jest.fn().mockImplementation(async () => { + const bootstrapApp = vi.fn().mockImplementation(async () => { return lastValueFrom(pendingSubject); }); - const bootstrapAppFinished = jest.fn(); + const bootstrapAppFinished = vi.fn(); const pendingSubject2 = new Subject(); - const bootstrapApp2 = jest.fn().mockImplementation(async () => { + const bootstrapApp2 = vi.fn().mockImplementation(async () => { return lastValueFrom(pendingSubject2); }); - const bootstrapAppFinished2 = jest.fn(); + const bootstrapAppFinished2 = vi.fn(); const pendingSubject3 = new Subject(); - const bootstrapApp3 = jest.fn().mockImplementation(async () => { + const bootstrapApp3 = vi.fn().mockImplementation(async () => { return lastValueFrom(pendingSubject3); }); - const bootstrapAppFinished3 = jest.fn(); + const bootstrapAppFinished3 = vi.fn(); queueBootstrapping(bootstrapApp).then(bootstrapAppFinished); queueBootstrapping(bootstrapApp2).then(bootstrapAppFinished2); @@ -108,18 +109,18 @@ describe('BootstrapQueue', () => { it('should throw and continue next bootstrap on error', async () => { const pendingSubject = new Subject(); - const bootstrapApp = jest.fn().mockImplementation(async () => { + const bootstrapApp = vi.fn().mockImplementation(async () => { return lastValueFrom(pendingSubject); }); - const bootstrapAppFinished = jest.fn(); - const bootstrapAppError = jest.fn(); + const bootstrapAppFinished = vi.fn(); + const bootstrapAppError = vi.fn(); const pendingSubject2 = new Subject(); - const bootstrapApp2 = jest.fn().mockImplementation(async () => { + const bootstrapApp2 = vi.fn().mockImplementation(async () => { return lastValueFrom(pendingSubject2); }); - const bootstrapAppFinished2 = jest.fn(); - const bootstrapAppError2 = jest.fn(); + const bootstrapAppFinished2 = vi.fn(); + const bootstrapAppError2 = vi.fn(); queueBootstrapping(bootstrapApp).then(bootstrapAppFinished).catch(bootstrapAppError); queueBootstrapping(bootstrapApp2).then(bootstrapAppFinished2).catch(bootstrapAppError2); @@ -131,7 +132,6 @@ describe('BootstrapQueue', () => { expect(bootstrapApp2).not.toHaveBeenCalled(); expect(bootstrapAppFinished2).not.toHaveBeenCalled(); - // eslint-disable-next-line local-rules/no-uncategorized-errors pendingSubject.error(new Error('test error')); await tick(); From f76c5ad21cac7f6b5a31db2f945295648b75524b Mon Sep 17 00:00:00 2001 From: Ronald Rey Date: Tue, 9 Jan 2024 18:28:52 -0400 Subject: [PATCH 08/61] Remoe `key` from addon render docs See https://github.com/storybookjs/storybook/pull/23792 --- docs/addons/addons-api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/addons/addons-api.md b/docs/addons/addons-api.md index 41daafbe8009..5a0464170067 100644 --- a/docs/addons/addons-api.md +++ b/docs/addons/addons-api.md @@ -41,7 +41,7 @@ The `add` method allows you to register the type of UI component associated with -The render function is called with `active` and `key`. The `active` value will be true when the panel is focused on the UI. +The render function is called with `active`. The `active` value will be true when the panel is focused on the UI. From 8a7c1a393af12d0a63e09c7365019597ff0d9da4 Mon Sep 17 00:00:00 2001 From: Ronald Rey Date: Tue, 9 Jan 2024 18:29:52 -0400 Subject: [PATCH 09/61] mdx --- docs/snippets/common/storybook-addon-panel-initial.js.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/snippets/common/storybook-addon-panel-initial.js.mdx b/docs/snippets/common/storybook-addon-panel-initial.js.mdx index f097d264461a..9441938a0651 100644 --- a/docs/snippets/common/storybook-addon-panel-initial.js.mdx +++ b/docs/snippets/common/storybook-addon-panel-initial.js.mdx @@ -14,8 +14,8 @@ addons.register(ADDON_ID, (api) => { addons.add(PANEL_ID, { type: types.PANEL, title: 'My Addon', - render: ({ active, key }) => ( - + render: ({ active }) => ( +
Storybook addon panel
), From c5d86fa87f5c3776190492bcc33268161022c216 Mon Sep 17 00:00:00 2001 From: Mihai Lazari Date: Tue, 9 Jan 2024 11:47:46 +0200 Subject: [PATCH 10/61] Make export-order-loader compatible with both es and cjs --- code/builders/builder-webpack5/package.json | 1 + .../src/loaders/export-order-loader.ts | 72 +++++++++++++------ code/yarn.lock | 8 +++ 3 files changed, 61 insertions(+), 20 deletions(-) diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 251272141ebb..3b9ef074cd27 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -75,6 +75,7 @@ "@types/semver": "^7.3.4", "browser-assert": "^1.2.1", "case-sensitive-paths-webpack-plugin": "^2.4.0", + "cjs-module-lexer": "^1.2.3", "constants-browserify": "^1.0.0", "css-loader": "^6.7.1", "es-module-lexer": "^1.4.1", diff --git a/code/builders/builder-webpack5/src/loaders/export-order-loader.ts b/code/builders/builder-webpack5/src/loaders/export-order-loader.ts index 3d37119302b4..49117eb0434e 100644 --- a/code/builders/builder-webpack5/src/loaders/export-order-loader.ts +++ b/code/builders/builder-webpack5/src/loaders/export-order-loader.ts @@ -1,34 +1,66 @@ -import { parse } from 'es-module-lexer'; +import { parse as parseCjs, init as initCjsParser } from 'cjs-module-lexer'; +import { parse as parseEs } from 'es-module-lexer'; import MagicString from 'magic-string'; import type { LoaderContext } from 'webpack'; -export default async function loader(this: LoaderContext, source: string) { +export default async function loader( + this: LoaderContext, + source: string, + map: any, + meta: any +) { const callback = this.async(); try { - // Do NOT remove await here. The types are wrong! It has to be awaited, - // otherwise it will return a Promise> when wasm isn't loaded. - const [, exports = []] = await parse(source); - - const namedExportsOrder = exports.some( - (e) => source.substring(e.s, e.e) === '__namedExportsOrder' - ); + let isEsModule = true, esImports, moduleExports, namedExportsOrder; + + try { + // Do NOT remove await here. The types are wrong! It has to be awaited, + // otherwise it will return a Promise> when wasm isn't loaded. + const parseResult = await parseEs(source); + esImports = parseResult[0] || []; + moduleExports = parseResult[1] || []; + } catch { + esImports = []; + moduleExports = []; + } + + if (!moduleExports.length && !esImports.length) { + isEsModule = false; + try { + await initCjsParser(); + moduleExports = (parseCjs(source)).exports || []; + } catch { + moduleExports = []; + } + namedExportsOrder = moduleExports.filter( + (e) => e !== 'default' && e !== '__esModule' + ); + } else { + namedExportsOrder = moduleExports.map( + (e) => source.substring(e.s, e.e) + ).filter((e) => e !== 'default'); + } - if (namedExportsOrder) { - return callback(null, source); + if (namedExportsOrder.indexOf('__namedExportsOrder') >= 0) { + return callback(null, source, map, meta); } const magicString = new MagicString(source); - const orderedExports = exports.filter((e) => source.substring(e.s, e.e) !== 'default'); - magicString.append( - `;export const __namedExportsOrder = ${JSON.stringify( - orderedExports.map((e) => source.substring(e.s, e.e)) - )};` - ); + const namedExportsOrderString = JSON.stringify(namedExportsOrder); + if (isEsModule) { + magicString.append( + `;export const __namedExportsOrder = ${namedExportsOrderString};` + ); + } else { + magicString.append( + `;module.exports.__namedExportsOrder = ${namedExportsOrderString};` + ); + } - const map = magicString.generateMap({ hires: true }); - return callback(null, magicString.toString(), map); + const generatedMap = magicString.generateMap({ hires: true }); + return callback(null, magicString.toString(), generatedMap, meta); } catch (err) { - return callback(err as any); + return callback(null, source, map, meta); } } diff --git a/code/yarn.lock b/code/yarn.lock index e035a0f0eb42..c64d1709aed9 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5228,6 +5228,7 @@ __metadata: "@types/webpack-virtual-modules": "npm:^0.1.1" browser-assert: "npm:^1.2.1" case-sensitive-paths-webpack-plugin: "npm:^2.4.0" + cjs-module-lexer: "npm:^1.2.3" constants-browserify: "npm:^1.0.0" css-loader: "npm:^6.7.1" es-module-lexer: "npm:^1.4.1" @@ -11217,6 +11218,13 @@ __metadata: languageName: node linkType: hard +"cjs-module-lexer@npm:^1.2.3": + version: 1.2.3 + resolution: "cjs-module-lexer@npm:1.2.3" + checksum: 0de9a9c3fad03a46804c0d38e7b712fb282584a9c7ef1ed44cae22fb71d9bb600309d66a9711ac36a596fd03422f5bb03e021e8f369c12a39fa1786ae531baab + languageName: node + linkType: hard + "class-utils@npm:^0.3.5": version: 0.3.6 resolution: "class-utils@npm:0.3.6" From 5d5a897d3f2b736b8a20ee1264577963b0f6f761 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 10 Jan 2024 14:10:00 +0100 Subject: [PATCH 11/61] Update wait-on command to use TCP instead of HTTP --- .github/workflows/generate-sandboxes-main.yml | 2 +- .github/workflows/generate-sandboxes-next.yml | 2 +- scripts/tasks/run-registry.ts | 2 +- scripts/tasks/serve.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/workflows/generate-sandboxes-main.yml b/.github/workflows/generate-sandboxes-main.yml index 53814040f610..cc17376c57de 100644 --- a/.github/workflows/generate-sandboxes-main.yml +++ b/.github/workflows/generate-sandboxes-main.yml @@ -43,7 +43,7 @@ jobs: run: yarn local-registry --open & working-directory: ./code - name: Wait for registry - run: yarn wait-on http://localhost:6001 + run: yarn wait-on tcp:127.0.0.1:6001 working-directory: ./code - name: Generate run: yarn generate-sandboxes --local-registry diff --git a/.github/workflows/generate-sandboxes-next.yml b/.github/workflows/generate-sandboxes-next.yml index d9355f593dc8..2c0b592d024f 100644 --- a/.github/workflows/generate-sandboxes-next.yml +++ b/.github/workflows/generate-sandboxes-next.yml @@ -43,7 +43,7 @@ jobs: run: yarn local-registry --open & working-directory: ./code - name: Wait for registry - run: yarn wait-on http://localhost:6001 + run: yarn wait-on tcp:127.0.0.1:6001 working-directory: ./code - name: Generate run: yarn generate-sandboxes --local-registry --debug diff --git a/scripts/tasks/run-registry.ts b/scripts/tasks/run-registry.ts index 46cac80599e5..cdf6d4a227a1 100644 --- a/scripts/tasks/run-registry.ts +++ b/scripts/tasks/run-registry.ts @@ -15,7 +15,7 @@ export async function runRegistry({ dryRun, debug }: { dryRun?: boolean; debug?: // If aborted, we want to make sure the rejection is handled. if (!err.killed) throw err; }); - await exec('yarn wait-on http://localhost:6001', { cwd: CODE_DIRECTORY }, { dryRun, debug }); + await exec('yarn wait-on tcp:127.0.0.1:6001', { cwd: CODE_DIRECTORY }, { dryRun, debug }); return controller; } diff --git a/scripts/tasks/serve.ts b/scripts/tasks/serve.ts index 2b3a5cc8c4b9..609132261380 100644 --- a/scripts/tasks/serve.ts +++ b/scripts/tasks/serve.ts @@ -27,7 +27,7 @@ export const serve: Task = { throw err; } }); - await waitOn({ resources: [`http://localhost:${PORT}`], interval: 16 }); + await waitOn({ resources: [`tcp:127.0.0.1:${PORT}`], interval: 16 }); return controller; }, From 77e8797d5a8fa0d3ffa4e9f2e1623fab53ce3755 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 10 Jan 2024 14:52:34 +0100 Subject: [PATCH 12/61] Refactor export-order-loader --- .../src/loaders/export-order-loader.ts | 61 ++++++++----------- 1 file changed, 27 insertions(+), 34 deletions(-) diff --git a/code/builders/builder-webpack5/src/loaders/export-order-loader.ts b/code/builders/builder-webpack5/src/loaders/export-order-loader.ts index 49117eb0434e..2eea4bb4a870 100644 --- a/code/builders/builder-webpack5/src/loaders/export-order-loader.ts +++ b/code/builders/builder-webpack5/src/loaders/export-order-loader.ts @@ -1,3 +1,5 @@ +import assert from 'assert'; +// @ts-expect-error No types import { parse as parseCjs, init as initCjsParser } from 'cjs-module-lexer'; import { parse as parseEs } from 'es-module-lexer'; import MagicString from 'magic-string'; @@ -12,53 +14,44 @@ export default async function loader( const callback = this.async(); try { - let isEsModule = true, esImports, moduleExports, namedExportsOrder; - + const magicString = new MagicString(source); + + // Trying to parse as ES module try { // Do NOT remove await here. The types are wrong! It has to be awaited, // otherwise it will return a Promise> when wasm isn't loaded. const parseResult = await parseEs(source); - esImports = parseResult[0] || []; - moduleExports = parseResult[1] || []; - } catch { - esImports = []; - moduleExports = []; - } - - if (!moduleExports.length && !esImports.length) { - isEsModule = false; - try { - await initCjsParser(); - moduleExports = (parseCjs(source)).exports || []; - } catch { - moduleExports = []; - } - namedExportsOrder = moduleExports.filter( - (e) => e !== 'default' && e !== '__esModule' - ); - } else { - namedExportsOrder = moduleExports.map( - (e) => source.substring(e.s, e.e) - ).filter((e) => e !== 'default'); - } + const namedExportsOrder = (parseResult[1] || []) + .map((e) => source.substring(e.s, e.e)) + .filter((e) => e !== 'default'); - if (namedExportsOrder.indexOf('__namedExportsOrder') >= 0) { - return callback(null, source, map, meta); - } + assert( + namedExportsOrder.length > 0, + 'No named exports found. Very likely that this is not a ES module.' + ); - const magicString = new MagicString(source); - const namedExportsOrderString = JSON.stringify(namedExportsOrder); - if (isEsModule) { magicString.append( - `;export const __namedExportsOrder = ${namedExportsOrderString};` + `;export const __namedExportsOrder = ${JSON.stringify(namedExportsOrder)};` + ); + // Try to parse as CJS module + } catch { + await initCjsParser(); + const namedExportsOrder = (parseCjs(source).exports || []).filter( + (e: string) => e !== 'default' && e !== '__esModule' ); - } else { + + assert( + namedExportsOrder.length > 0, + 'No named exports found. Very likely that this is not a CJS module.' + ); + magicString.append( - `;module.exports.__namedExportsOrder = ${namedExportsOrderString};` + `;module.exports.__namedExportsOrder = ${JSON.stringify(namedExportsOrder)};` ); } const generatedMap = magicString.generateMap({ hires: true }); + return callback(null, magicString.toString(), generatedMap, meta); } catch (err) { return callback(null, source, map, meta); From 8193242855f62c5f3ef8be1c28f873982798cf17 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 11 Jan 2024 14:25:32 +0100 Subject: [PATCH 13/61] Update stringify options in codebase --- .../angular/src/client/angular-beta/AbstractRenderer.ts | 2 +- .../stories/basics/component-with-provider/di.component.ts | 2 +- code/lib/channels/src/postmessage/index.ts | 2 +- code/lib/channels/src/websocket/index.ts | 6 +++++- code/ui/blocks/src/blocks/SourceContainer.tsx | 2 +- 5 files changed, 9 insertions(+), 5 deletions(-) diff --git a/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts b/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts index ec5c2ac7ba52..9533a472fa05 100644 --- a/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts +++ b/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts @@ -201,7 +201,7 @@ export abstract class AbstractRenderer { const currentStoryRender = { storyFnAngular, - moduleMetadataSnapshot: stringify(moduleMetadata), + moduleMetadataSnapshot: stringify(moduleMetadata, { allowFunction: false }), }; this.previousStoryRenderInfo.set(targetDOMNode, currentStoryRender); diff --git a/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts index 11335b4131c8..e3e8a28ac18f 100644 --- a/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts +++ b/code/frameworks/angular/template/stories/basics/component-with-provider/di.component.ts @@ -23,6 +23,6 @@ export class DiComponent { } elRefStr(): string { - return stringify(this.elRef, { maxDepth: 1 }); + return stringify(this.elRef, { maxDepth: 1, allowFunction: false }); } } diff --git a/code/lib/channels/src/postmessage/index.ts b/code/lib/channels/src/postmessage/index.ts index e1c7332121b6..267e8a34f18a 100644 --- a/code/lib/channels/src/postmessage/index.ts +++ b/code/lib/channels/src/postmessage/index.ts @@ -20,7 +20,7 @@ const { document, location } = global; export const KEY = 'storybook-channel'; -const defaultEventOptions = { allowFunction: true, maxDepth: 25 }; +const defaultEventOptions = { allowFunction: false, maxDepth: 25 }; // TODO: we should export a method for opening child windows here and keep track of em. // that way we can send postMessage to child windows as well, not just iframe diff --git a/code/lib/channels/src/websocket/index.ts b/code/lib/channels/src/websocket/index.ts index b4530de965c9..a46df1c28610 100644 --- a/code/lib/channels/src/websocket/index.ts +++ b/code/lib/channels/src/websocket/index.ts @@ -60,7 +60,11 @@ export class WebsocketTransport implements ChannelTransport { } private sendNow(event: any) { - const data = stringify(event, { maxDepth: 15, allowFunction: true }); + const data = stringify(event, { + maxDepth: 15, + allowFunction: false, + ...global.CHANNEL_OPTIONS, + }); this.socket.send(data); } diff --git a/code/ui/blocks/src/blocks/SourceContainer.tsx b/code/ui/blocks/src/blocks/SourceContainer.tsx index c24b320c4330..fbb019a6bd32 100644 --- a/code/ui/blocks/src/blocks/SourceContainer.tsx +++ b/code/ui/blocks/src/blocks/SourceContainer.tsx @@ -11,7 +11,7 @@ import { stringify } from 'telejson'; type ArgsHash = string; export function argsHash(args: Args): ArgsHash { - return stringify(args); + return stringify(args, { allowFunction: false }); } export interface SourceItem { From 595c32dca160e46e7b72d19f4e72fe289663538d Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 12 Jan 2024 15:24:07 +0100 Subject: [PATCH 14/61] Replace @storybook/jest by @storybook/test --- .../stories/docspage/autoplay.stories.ts | 2 +- code/addons/interactions/package.json | 1 - .../src/components/Interaction.stories.tsx | 2 +- .../components/InteractionsPanel.stories.tsx | 2 +- .../with-browser-animations.stories.ts | 2 +- .../with-noop-browser-animations.stories.ts | 2 +- .../Head.stories.jsx | 2 +- .../template/stories/argMapping.stories.ts | 2 +- .../template/stories/argTypes.stories.ts | 2 +- .../template/stories/args.stories.ts | 2 +- .../template/stories/autotitle.stories.ts | 2 +- .../stories/component-play.stories.ts | 2 +- .../template/stories/decorators.stories.ts | 2 +- .../template/stories/globals.stories.ts | 2 +- .../template/stories/indexer.stories.ts | 2 +- .../template/stories/loaders.stories.ts | 2 +- .../template/stories/names.stories.ts | 2 +- .../template/stories/parameters.stories.ts | 2 +- .../template/stories/rendering.stories.ts | 2 +- .../template/stories/shortcuts.stories.ts | 4 +- .../template/stories/tags.stories.ts | 2 +- .../template/stories/title.stories.ts | 2 +- code/package.json | 2 +- .../svelte/template/stories/args.stories.js | 2 +- .../GlobalSetup.stories.ts | 2 +- .../ReactiveArgs.stories.ts | 2 +- .../ReactiveSlots.stories.ts | 2 +- .../ScopedSlots.stories.ts | 2 +- .../blocks/src/controls/Boolean.stories.tsx | 2 +- .../ui/blocks/src/examples/Button.stories.tsx | 2 +- .../src/components/tabs/tabs.stories.tsx | 2 +- .../src/components/sidebar/Menu.stories.tsx | 2 +- .../src/components/sidebar/Tree.stories.tsx | 2 +- code/yarn.lock | 132 ++++-------------- docs/essentials/interactions.md | 2 +- .../login-form-with-play-function.ts-4-9.mdx | 2 +- .../login-form-with-play-function.ts.mdx | 2 +- .../login-form-with-play-function.ts-4-9.mdx | 2 +- .../login-form-with-play-function.ts.mdx | 2 +- .../login-form-with-play-function.js.mdx | 2 +- .../login-form-with-play-function.ts-4-9.mdx | 2 +- .../login-form-with-play-function.ts.mdx | 2 +- scripts/package.json | 1 - scripts/tasks/sandbox-parts.ts | 2 +- scripts/verdaccio.yaml | 4 - scripts/yarn.lock | 130 ----------------- yarn.lock | 2 +- 47 files changed, 70 insertions(+), 284 deletions(-) diff --git a/code/addons/docs/template/stories/docspage/autoplay.stories.ts b/code/addons/docs/template/stories/docspage/autoplay.stories.ts index 8fbfbb8cb883..36fc395949d8 100644 --- a/code/addons/docs/template/stories/docspage/autoplay.stories.ts +++ b/code/addons/docs/template/stories/docspage/autoplay.stories.ts @@ -1,5 +1,5 @@ import { global as globalThis } from '@storybook/global'; -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import { within } from '@storybook/testing-library'; export default { diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 6dfe9f6b46a5..31400fb08c75 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -62,7 +62,6 @@ "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/instrumenter": "workspace:*", - "@storybook/jest": "next", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", "@storybook/testing-library": "next", diff --git a/code/addons/interactions/src/components/Interaction.stories.tsx b/code/addons/interactions/src/components/Interaction.stories.tsx index 4ae080dac30a..b18cd7136c6a 100644 --- a/code/addons/interactions/src/components/Interaction.stories.tsx +++ b/code/addons/interactions/src/components/Interaction.stories.tsx @@ -1,5 +1,5 @@ import type { StoryObj, Meta } from '@storybook/react'; -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import { CallStates } from '@storybook/instrumenter'; import { userEvent, within } from '@storybook/testing-library'; import { getCalls } from '../mocks'; diff --git a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx index f72e5dba54a9..a2435113ef02 100644 --- a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx +++ b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx @@ -3,7 +3,7 @@ import type { StoryObj, Meta } from '@storybook/react'; import { CallStates } from '@storybook/instrumenter'; import { styled } from '@storybook/theming'; import { userEvent, within, waitFor } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import isChromatic from 'chromatic/isChromatic'; import { getCalls, getInteractions } from '../mocks'; diff --git a/code/frameworks/angular/template/stories/core/applicationConfig/with-browser-animations.stories.ts b/code/frameworks/angular/template/stories/core/applicationConfig/with-browser-animations.stories.ts index 2d746d4ee1e9..f61db00d8f0e 100644 --- a/code/frameworks/angular/template/stories/core/applicationConfig/with-browser-animations.stories.ts +++ b/code/frameworks/angular/template/stories/core/applicationConfig/with-browser-animations.stories.ts @@ -1,7 +1,7 @@ import { Meta, StoryObj, applicationConfig } from '@storybook/angular'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { within, userEvent } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import { importProvidersFrom } from '@angular/core'; import { OpenCloseComponent } from '../moduleMetadata/angular-src/open-close-component/open-close.component'; diff --git a/code/frameworks/angular/template/stories/core/applicationConfig/with-noop-browser-animations.stories.ts b/code/frameworks/angular/template/stories/core/applicationConfig/with-noop-browser-animations.stories.ts index 107a0898dc5e..1a4341ec77cf 100644 --- a/code/frameworks/angular/template/stories/core/applicationConfig/with-noop-browser-animations.stories.ts +++ b/code/frameworks/angular/template/stories/core/applicationConfig/with-noop-browser-animations.stories.ts @@ -1,7 +1,7 @@ import { Meta, StoryObj } from '@storybook/angular'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { within, userEvent } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import { importProvidersFrom } from '@angular/core'; import { OpenCloseComponent } from '../moduleMetadata/angular-src/open-close-component/open-close.component'; diff --git a/code/frameworks/nextjs/template/stories_nextjs-default-js/Head.stories.jsx b/code/frameworks/nextjs/template/stories_nextjs-default-js/Head.stories.jsx index 76c9d5983031..c9b3873c531a 100644 --- a/code/frameworks/nextjs/template/stories_nextjs-default-js/Head.stories.jsx +++ b/code/frameworks/nextjs/template/stories_nextjs-default-js/Head.stories.jsx @@ -1,5 +1,5 @@ /* eslint-disable no-undef */ -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import Head from 'next/head'; import React from 'react'; import { within, userEvent, waitFor } from '@storybook/testing-library'; diff --git a/code/lib/preview-api/template/stories/argMapping.stories.ts b/code/lib/preview-api/template/stories/argMapping.stories.ts index d5fa145700a7..cd41237d17af 100644 --- a/code/lib/preview-api/template/stories/argMapping.stories.ts +++ b/code/lib/preview-api/template/stories/argMapping.stories.ts @@ -1,7 +1,7 @@ import { global as globalThis } from '@storybook/global'; import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types'; import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; const arrows = { ArrowUp: { name: 'ArrowUp' }, diff --git a/code/lib/preview-api/template/stories/argTypes.stories.ts b/code/lib/preview-api/template/stories/argTypes.stories.ts index e0d2115d10ae..5f2b81c004fc 100644 --- a/code/lib/preview-api/template/stories/argTypes.stories.ts +++ b/code/lib/preview-api/template/stories/argTypes.stories.ts @@ -1,7 +1,7 @@ import { global as globalThis } from '@storybook/global'; import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types'; import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; export default { component: globalThis.Components.Pre, diff --git a/code/lib/preview-api/template/stories/args.stories.ts b/code/lib/preview-api/template/stories/args.stories.ts index 6d397e108c5c..5315fb2a3dbf 100644 --- a/code/lib/preview-api/template/stories/args.stories.ts +++ b/code/lib/preview-api/template/stories/args.stories.ts @@ -1,7 +1,7 @@ import { global as globalThis } from '@storybook/global'; import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types'; import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import pick from 'lodash/pick'; import { STORY_ARGS_UPDATED, UPDATE_STORY_ARGS, RESET_STORY_ARGS } from '@storybook/core-events'; diff --git a/code/lib/preview-api/template/stories/autotitle.stories.ts b/code/lib/preview-api/template/stories/autotitle.stories.ts index 253c91dc5e6a..6b96efbfb767 100644 --- a/code/lib/preview-api/template/stories/autotitle.stories.ts +++ b/code/lib/preview-api/template/stories/autotitle.stories.ts @@ -1,5 +1,5 @@ import { global as globalThis } from '@storybook/global'; -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import type { PlayFunctionContext } from '@storybook/types'; export default { diff --git a/code/lib/preview-api/template/stories/component-play.stories.ts b/code/lib/preview-api/template/stories/component-play.stories.ts index d4c6ed300abe..08efe9847b1f 100644 --- a/code/lib/preview-api/template/stories/component-play.stories.ts +++ b/code/lib/preview-api/template/stories/component-play.stories.ts @@ -1,7 +1,7 @@ import { global as globalThis } from '@storybook/global'; import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types'; import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; export default { component: globalThis.Components.Pre, diff --git a/code/lib/preview-api/template/stories/decorators.stories.ts b/code/lib/preview-api/template/stories/decorators.stories.ts index a36eb100a739..f374bcf1d640 100644 --- a/code/lib/preview-api/template/stories/decorators.stories.ts +++ b/code/lib/preview-api/template/stories/decorators.stories.ts @@ -6,7 +6,7 @@ import type { StoryContext, } from '@storybook/types'; import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import { useEffect } from '@storybook/preview-api'; import { STORY_ARGS_UPDATED, UPDATE_STORY_ARGS, RESET_STORY_ARGS } from '@storybook/core-events'; diff --git a/code/lib/preview-api/template/stories/globals.stories.ts b/code/lib/preview-api/template/stories/globals.stories.ts index 436fd40d0008..ff66a964766e 100644 --- a/code/lib/preview-api/template/stories/globals.stories.ts +++ b/code/lib/preview-api/template/stories/globals.stories.ts @@ -1,7 +1,7 @@ import { global as globalThis } from '@storybook/global'; import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types'; import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; export default { component: globalThis.Components.Pre, diff --git a/code/lib/preview-api/template/stories/indexer.stories.ts b/code/lib/preview-api/template/stories/indexer.stories.ts index 645b6a14b3f7..1bddb814bf80 100644 --- a/code/lib/preview-api/template/stories/indexer.stories.ts +++ b/code/lib/preview-api/template/stories/indexer.stories.ts @@ -1,4 +1,4 @@ -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import { global as globalThis } from '@storybook/global'; import type { PlayFunctionContext } from '@storybook/types'; diff --git a/code/lib/preview-api/template/stories/loaders.stories.ts b/code/lib/preview-api/template/stories/loaders.stories.ts index 2826e94e433e..000bfe5dc159 100644 --- a/code/lib/preview-api/template/stories/loaders.stories.ts +++ b/code/lib/preview-api/template/stories/loaders.stories.ts @@ -1,7 +1,7 @@ import { global as globalThis } from '@storybook/global'; import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types'; import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; export default { component: globalThis.Components.Pre, diff --git a/code/lib/preview-api/template/stories/names.stories.ts b/code/lib/preview-api/template/stories/names.stories.ts index 3c984ee58919..1740c8744f1b 100644 --- a/code/lib/preview-api/template/stories/names.stories.ts +++ b/code/lib/preview-api/template/stories/names.stories.ts @@ -1,5 +1,5 @@ import { global as globalThis } from '@storybook/global'; -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import type { PlayFunctionContext } from '@storybook/types'; export default { diff --git a/code/lib/preview-api/template/stories/parameters.stories.ts b/code/lib/preview-api/template/stories/parameters.stories.ts index a21cb899e65a..be0a84582ae3 100644 --- a/code/lib/preview-api/template/stories/parameters.stories.ts +++ b/code/lib/preview-api/template/stories/parameters.stories.ts @@ -1,7 +1,7 @@ import { global as globalThis } from '@storybook/global'; import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types'; import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; export default { component: globalThis.Components.Pre, diff --git a/code/lib/preview-api/template/stories/rendering.stories.ts b/code/lib/preview-api/template/stories/rendering.stories.ts index 8bca2f78f5c9..ff36890bf265 100644 --- a/code/lib/preview-api/template/stories/rendering.stories.ts +++ b/code/lib/preview-api/template/stories/rendering.stories.ts @@ -1,7 +1,7 @@ import { global as globalThis } from '@storybook/global'; import type { PlayFunctionContext } from '@storybook/types'; import { within, waitFor } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import { FORCE_REMOUNT, RESET_STORY_ARGS, diff --git a/code/lib/preview-api/template/stories/shortcuts.stories.ts b/code/lib/preview-api/template/stories/shortcuts.stories.ts index 87e2db24a22a..91a597427bb6 100644 --- a/code/lib/preview-api/template/stories/shortcuts.stories.ts +++ b/code/lib/preview-api/template/stories/shortcuts.stories.ts @@ -1,7 +1,7 @@ import { global as globalThis } from '@storybook/global'; import { userEvent, within } from '@storybook/testing-library'; import { PREVIEW_KEYDOWN } from '@storybook/core-events'; -import { jest, expect } from '@storybook/jest'; +import { expect, fn } from '@storybook/test'; import type { PlayFunctionContext } from '@storybook/csf'; export default { @@ -13,7 +13,7 @@ export const KeydownDuringPlay = { play: async ({ canvasElement }: PlayFunctionContext) => { const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__; - const previewKeydown = jest.fn(); + const previewKeydown = fn(); channel.on(PREVIEW_KEYDOWN, previewKeydown); const button = await within(canvasElement).findByText('Submit'); await userEvent.type(button, 's'); diff --git a/code/lib/preview-api/template/stories/tags.stories.ts b/code/lib/preview-api/template/stories/tags.stories.ts index bae16f25e678..97d43cf2db5f 100644 --- a/code/lib/preview-api/template/stories/tags.stories.ts +++ b/code/lib/preview-api/template/stories/tags.stories.ts @@ -1,7 +1,7 @@ import { global as globalThis } from '@storybook/global'; import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types'; import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; export default { component: globalThis.Components.Pre, diff --git a/code/lib/preview-api/template/stories/title.stories.ts b/code/lib/preview-api/template/stories/title.stories.ts index 860955da6410..50ede5cc39be 100644 --- a/code/lib/preview-api/template/stories/title.stories.ts +++ b/code/lib/preview-api/template/stories/title.stories.ts @@ -1,5 +1,5 @@ import { global as globalThis } from '@storybook/global'; -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import type { PlayFunctionContext } from '@storybook/types'; export default { diff --git a/code/package.json b/code/package.json index d9e159d1e640..dc0e65d27c53 100644 --- a/code/package.json +++ b/code/package.json @@ -134,7 +134,6 @@ "@storybook/html-vite": "workspace:*", "@storybook/html-webpack5": "workspace:*", "@storybook/instrumenter": "workspace:*", - "@storybook/jest": "next", "@storybook/linter-config": "^3.1.2", "@storybook/manager": "workspace:*", "@storybook/manager-api": "workspace:*", @@ -162,6 +161,7 @@ "@storybook/svelte": "workspace:*", "@storybook/svelte-webpack5": "workspace:*", "@storybook/telemetry": "workspace:*", + "@storybook/test": "next", "@storybook/testing-library": "next", "@storybook/theming": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/renderers/svelte/template/stories/args.stories.js b/code/renderers/svelte/template/stories/args.stories.js index 897fc46469da..7ecee85a982c 100644 --- a/code/renderers/svelte/template/stories/args.stories.js +++ b/code/renderers/svelte/template/stories/args.stories.js @@ -1,4 +1,4 @@ -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import { within, userEvent, waitFor } from '@storybook/testing-library'; import { UPDATE_STORY_ARGS, diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/GlobalSetup.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/GlobalSetup.stories.ts index f3403375c924..5e01135e20c0 100644 --- a/code/renderers/vue3/template/stories_vue3-vite-default-ts/GlobalSetup.stories.ts +++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/GlobalSetup.stories.ts @@ -1,4 +1,4 @@ -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import type { Meta, StoryObj } from '@storybook/vue3'; import { within } from '@storybook/testing-library'; import { inject } from 'vue'; diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/ReactiveArgs.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/ReactiveArgs.stories.ts index d48352194c55..536c962c2ee1 100644 --- a/code/renderers/vue3/template/stories_vue3-vite-default-ts/ReactiveArgs.stories.ts +++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/ReactiveArgs.stories.ts @@ -1,4 +1,4 @@ -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import { global as globalThis } from '@storybook/global'; import type { Meta, StoryObj, StoryFn } from '@storybook/vue3'; import { within, userEvent } from '@storybook/testing-library'; diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/ReactiveSlots.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/ReactiveSlots.stories.ts index d6d55ac07315..d0042b65a2a5 100644 --- a/code/renderers/vue3/template/stories_vue3-vite-default-ts/ReactiveSlots.stories.ts +++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/ReactiveSlots.stories.ts @@ -1,4 +1,4 @@ -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import { global as globalThis } from '@storybook/global'; import { within } from '@storybook/testing-library'; import { STORY_ARGS_UPDATED, RESET_STORY_ARGS, UPDATE_STORY_ARGS } from '@storybook/core-events'; diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/ScopedSlots.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/ScopedSlots.stories.ts index 95266e452711..7f6801fe736f 100644 --- a/code/renderers/vue3/template/stories_vue3-vite-default-ts/ScopedSlots.stories.ts +++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/ScopedSlots.stories.ts @@ -1,4 +1,4 @@ -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import { global as globalThis } from '@storybook/global'; import type { Channel } from '@storybook/channels'; import { within } from '@storybook/testing-library'; diff --git a/code/ui/blocks/src/controls/Boolean.stories.tsx b/code/ui/blocks/src/controls/Boolean.stories.tsx index 54344b5850d4..e83338c41241 100644 --- a/code/ui/blocks/src/controls/Boolean.stories.tsx +++ b/code/ui/blocks/src/controls/Boolean.stories.tsx @@ -1,4 +1,4 @@ -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import type { Meta, StoryObj } from '@storybook/react'; import { within, fireEvent, waitFor } from '@storybook/testing-library'; import { addons } from '@storybook/preview-api'; diff --git a/code/ui/blocks/src/examples/Button.stories.tsx b/code/ui/blocks/src/examples/Button.stories.tsx index 0f9410e02906..7e22aef00064 100644 --- a/code/ui/blocks/src/examples/Button.stories.tsx +++ b/code/ui/blocks/src/examples/Button.stories.tsx @@ -1,4 +1,4 @@ -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import type { Meta, StoryObj } from '@storybook/react'; import { within, fireEvent } from '@storybook/testing-library'; import React from 'react'; diff --git a/code/ui/components/src/components/tabs/tabs.stories.tsx b/code/ui/components/src/components/tabs/tabs.stories.tsx index b6a28dbd5119..ca7cd1f6a031 100644 --- a/code/ui/components/src/components/tabs/tabs.stories.tsx +++ b/code/ui/components/src/components/tabs/tabs.stories.tsx @@ -1,4 +1,4 @@ -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import React, { Fragment } from 'react'; import { action } from '@storybook/addon-actions'; import type { Meta, StoryObj } from '@storybook/react'; diff --git a/code/ui/manager/src/components/sidebar/Menu.stories.tsx b/code/ui/manager/src/components/sidebar/Menu.stories.tsx index ebc234f75efc..ca89361f179e 100644 --- a/code/ui/manager/src/components/sidebar/Menu.stories.tsx +++ b/code/ui/manager/src/components/sidebar/Menu.stories.tsx @@ -1,6 +1,6 @@ import type { ComponentProps } from 'react'; import React from 'react'; -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import type { Meta, StoryObj } from '@storybook/react'; import { TooltipLinkList } from '@storybook/components'; diff --git a/code/ui/manager/src/components/sidebar/Tree.stories.tsx b/code/ui/manager/src/components/sidebar/Tree.stories.tsx index 383468de2e40..710e3e5ded1f 100644 --- a/code/ui/manager/src/components/sidebar/Tree.stories.tsx +++ b/code/ui/manager/src/components/sidebar/Tree.stories.tsx @@ -6,7 +6,7 @@ import { action } from '@storybook/addon-actions'; import type { StoryObj, Meta } from '@storybook/react'; import { within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import { Tree } from './Tree'; import { index } from './mockdata.large'; import { DEFAULT_REF_ID } from './Sidebar'; diff --git a/code/yarn.lock b/code/yarn.lock index ee33ab461a33..b4653b0b762a 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -3440,15 +3440,6 @@ __metadata: languageName: node linkType: hard -"@jest/schemas@npm:^28.1.3": - version: 28.1.3 - resolution: "@jest/schemas@npm:28.1.3" - dependencies: - "@sinclair/typebox": "npm:^0.24.1" - checksum: 8c325918f3e1b83e687987b05c2e5143d171f372b091f891fe17835f06fadd864ddae3c7e221a704bdd7e2ea28c4b337124c02023d8affcbdd51eca2879162ac - languageName: node - linkType: hard - "@jest/schemas@npm:^29.6.3": version: 29.6.3 resolution: "@jest/schemas@npm:29.6.3" @@ -4657,13 +4648,6 @@ __metadata: languageName: node linkType: hard -"@sinclair/typebox@npm:^0.24.1": - version: 0.24.51 - resolution: "@sinclair/typebox@npm:0.24.51" - checksum: 458131e83ca59ad3721f0abeef2aa5220aff2083767e1143d75c67c85d55ef7a212f48f394471ee6bdd2e860ba30f09a489cdd2a28a2824d5b0d1014bdfb2552 - languageName: node - linkType: hard - "@sinclair/typebox@npm:^0.27.8": version: 0.27.8 resolution: "@sinclair/typebox@npm:0.27.8" @@ -4908,7 +4892,6 @@ __metadata: "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.2.3" "@storybook/instrumenter": "workspace:*" - "@storybook/jest": "npm:next" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/testing-library": "npm:next" @@ -5414,7 +5397,7 @@ __metadata: languageName: node linkType: hard -"@storybook/client-logger@workspace:*, @storybook/client-logger@workspace:lib/client-logger": +"@storybook/client-logger@npm:8.0.0-alpha.9, @storybook/client-logger@workspace:*, @storybook/client-logger@workspace:lib/client-logger": version: 0.0.0-use.local resolution: "@storybook/client-logger@workspace:lib/client-logger" dependencies: @@ -5528,7 +5511,7 @@ __metadata: languageName: unknown linkType: soft -"@storybook/core-events@workspace:*, @storybook/core-events@workspace:lib/core-events": +"@storybook/core-events@npm:8.0.0-alpha.9, @storybook/core-events@workspace:*, @storybook/core-events@workspace:lib/core-events": version: 0.0.0-use.local resolution: "@storybook/core-events@workspace:lib/core-events" dependencies: @@ -5743,15 +5726,6 @@ __metadata: languageName: node linkType: hard -"@storybook/expect@npm:storybook-jest": - version: 28.1.3-5 - resolution: "@storybook/expect@npm:28.1.3-5" - dependencies: - "@types/jest": "npm:28.1.3" - checksum: ea912b18e1353cdd3bbdf93667ffebca7f843fa28a01e647429bffa6cb074afd4401d13eb2ecbfc9714e100e128ec1fe2686bded52e9e378ce44774889563558 - languageName: node - linkType: hard - "@storybook/global@npm:^5.0.0": version: 5.0.0 resolution: "@storybook/global@npm:5.0.0" @@ -5810,7 +5784,7 @@ __metadata: languageName: node linkType: hard -"@storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter": +"@storybook/instrumenter@npm:8.0.0-alpha.9, @storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter": version: 0.0.0-use.local resolution: "@storybook/instrumenter@workspace:lib/instrumenter" dependencies: @@ -5825,18 +5799,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/jest@npm:next": - version: 0.2.3-next.0 - resolution: "@storybook/jest@npm:0.2.3-next.0" - dependencies: - "@storybook/expect": "npm:storybook-jest" - "@testing-library/jest-dom": "npm:^6.1.2" - "@types/jest": "npm:28.1.3" - jest-mock: "npm:^27.3.0" - checksum: 96e800be9adb18d689ff66efe3b953f06d3c209cb0a08559ea47a6de0cd09678e161bdd531cb2d008d58eecc33cb9cb49228e9014435818f3259e1b9eac46635 - languageName: node - linkType: hard - "@storybook/linter-config@npm:3.1.2, @storybook/linter-config@npm:^3.1.2": version: 3.1.2 resolution: "@storybook/linter-config@npm:3.1.2" @@ -6193,7 +6155,7 @@ __metadata: languageName: unknown linkType: soft -"@storybook/preview-api@workspace:*, @storybook/preview-api@workspace:lib/preview-api": +"@storybook/preview-api@npm:8.0.0-alpha.9, @storybook/preview-api@workspace:*, @storybook/preview-api@workspace:lib/preview-api": version: 0.0.0-use.local resolution: "@storybook/preview-api@workspace:lib/preview-api" dependencies: @@ -6388,7 +6350,6 @@ __metadata: "@storybook/html-vite": "workspace:*" "@storybook/html-webpack5": "workspace:*" "@storybook/instrumenter": "workspace:*" - "@storybook/jest": "npm:next" "@storybook/linter-config": "npm:^3.1.2" "@storybook/manager": "workspace:*" "@storybook/manager-api": "workspace:*" @@ -6416,6 +6377,7 @@ __metadata: "@storybook/svelte": "workspace:*" "@storybook/svelte-webpack5": "workspace:*" "@storybook/telemetry": "workspace:*" + "@storybook/test": "npm:next" "@storybook/testing-library": "npm:next" "@storybook/theming": "workspace:*" "@storybook/types": "workspace:*" @@ -6662,6 +6624,26 @@ __metadata: languageName: unknown linkType: soft +"@storybook/test@npm:next": + version: 8.0.0-alpha.9 + resolution: "@storybook/test@npm:8.0.0-alpha.9" + dependencies: + "@storybook/client-logger": "npm:8.0.0-alpha.9" + "@storybook/core-events": "npm:8.0.0-alpha.9" + "@storybook/instrumenter": "npm:8.0.0-alpha.9" + "@storybook/preview-api": "npm:8.0.0-alpha.9" + "@testing-library/dom": "npm:^9.3.1" + "@testing-library/jest-dom": "npm:^6.1.3" + "@testing-library/user-event": "npm:14.3.0" + "@types/chai": "npm:^4" + "@vitest/expect": "npm:^0.34.2" + "@vitest/spy": "npm:^0.34.1" + chai: "npm:^4.3.7" + util: "npm:^0.12.4" + checksum: c5184a0a869f9849d9ef0f02e1c6c79de16b5534746d662355278a6c8bd0f97df3a35e17e5f2c9ba3789b1fae8f8a215f6a88479005ef443275feb653b005498 + languageName: node + linkType: hard + "@storybook/test@workspace:*, @storybook/test@workspace:lib/test": version: 0.0.0-use.local resolution: "@storybook/test@workspace:lib/test" @@ -6948,7 +6930,7 @@ __metadata: languageName: node linkType: hard -"@testing-library/jest-dom@npm:^6.1.2, @testing-library/jest-dom@npm:^6.1.3, @testing-library/jest-dom@npm:^6.1.4": +"@testing-library/jest-dom@npm:^6.1.3, @testing-library/jest-dom@npm:^6.1.4": version: 6.1.5 resolution: "@testing-library/jest-dom@npm:6.1.5" dependencies: @@ -7541,16 +7523,6 @@ __metadata: languageName: node linkType: hard -"@types/jest@npm:28.1.3": - version: 28.1.3 - resolution: "@types/jest@npm:28.1.3" - dependencies: - jest-matcher-utils: "npm:^28.0.0" - pretty-format: "npm:^28.0.0" - checksum: d295db8680b5c230698345d6caae621ea9fa8720309027e2306fabfd8769679b4bd7474b4f6e03788905c934eff62105bc0a3e3f1e174feee51b4551d49ac42a - languageName: node - linkType: hard - "@types/js-yaml@npm:^4.0.5": version: 4.0.9 resolution: "@types/js-yaml@npm:4.0.9" @@ -12785,13 +12757,6 @@ __metadata: languageName: node linkType: hard -"diff-sequences@npm:^28.1.1": - version: 28.1.1 - resolution: "diff-sequences@npm:28.1.1" - checksum: 26f29fa3f6b8c9040c3c6f6dab85413d90a09c8e6cb17b318bbcf64f225d7dcb1fb64392f3a9919a90888b434c4f6c8a4cc4f807aad02bbabae912c5d13c31f7 - languageName: node - linkType: hard - "diff-sequences@npm:^29.4.3, diff-sequences@npm:^29.6.3": version: 29.6.3 resolution: "diff-sequences@npm:29.6.3" @@ -17883,18 +17848,6 @@ __metadata: languageName: node linkType: hard -"jest-diff@npm:^28.1.3": - version: 28.1.3 - resolution: "jest-diff@npm:28.1.3" - dependencies: - chalk: "npm:^4.0.0" - diff-sequences: "npm:^28.1.1" - jest-get-type: "npm:^28.0.2" - pretty-format: "npm:^28.1.3" - checksum: 17a101ceb7e8f25c3ef64edda15cb1a259c2835395637099f3cc44f578fbd94ced7a13d11c0cbe8c5c1c3959a08544f0a913bec25a305b6dfc9847ce488e7198 - languageName: node - linkType: hard - "jest-diff@npm:^29.4.1, jest-diff@npm:^29.7.0": version: 29.7.0 resolution: "jest-diff@npm:29.7.0" @@ -17907,13 +17860,6 @@ __metadata: languageName: node linkType: hard -"jest-get-type@npm:^28.0.2": - version: 28.0.2 - resolution: "jest-get-type@npm:28.0.2" - checksum: f64a40cfa10d79a56b383919033d35c8c4daee6145a1df31ec5ef2283fa7e8adbd443c6fcb4cfd0f60bbbd89f046c2323952f086b06e875cbbbc1a7d543a6e5e - languageName: node - linkType: hard - "jest-get-type@npm:^29.6.3": version: 29.6.3 resolution: "jest-get-type@npm:29.6.3" @@ -17944,18 +17890,6 @@ __metadata: languageName: node linkType: hard -"jest-matcher-utils@npm:^28.0.0": - version: 28.1.3 - resolution: "jest-matcher-utils@npm:28.1.3" - dependencies: - chalk: "npm:^4.0.0" - jest-diff: "npm:^28.1.3" - jest-get-type: "npm:^28.0.2" - pretty-format: "npm:^28.1.3" - checksum: 026fbe664cfdaed5a5c9facfc86ccc9bed3718a7d1fe061e355eb6158019a77f74e9b843bc99f9a467966cbebe60bde8b43439174cbf64997d4ad404f8f809d0 - languageName: node - linkType: hard - "jest-matcher-utils@npm:^29.7.0": version: 29.7.0 resolution: "jest-matcher-utils@npm:29.7.0" @@ -17985,7 +17919,7 @@ __metadata: languageName: node linkType: hard -"jest-mock@npm:^27.0.6, jest-mock@npm:^27.3.0": +"jest-mock@npm:^27.0.6": version: 27.5.1 resolution: "jest-mock@npm:27.5.1" dependencies: @@ -22893,18 +22827,6 @@ __metadata: languageName: node linkType: hard -"pretty-format@npm:^28.0.0, pretty-format@npm:^28.1.3": - version: 28.1.3 - resolution: "pretty-format@npm:28.1.3" - dependencies: - "@jest/schemas": "npm:^28.1.3" - ansi-regex: "npm:^5.0.1" - ansi-styles: "npm:^5.0.0" - react-is: "npm:^18.0.0" - checksum: 596d8b459b6fdac7dcbd70d40169191e889939c17ffbcc73eebe2a9a6f82cdbb57faffe190274e0a507d9ecdf3affadf8a9b43442a625eecfbd2813b9319660f - languageName: node - linkType: hard - "pretty-format@npm:^29.5.0, pretty-format@npm:^29.7.0": version: 29.7.0 resolution: "pretty-format@npm:29.7.0" diff --git a/docs/essentials/interactions.md b/docs/essentials/interactions.md index de2e401f5ea1..3ab0171c0f82 100644 --- a/docs/essentials/interactions.md +++ b/docs/essentials/interactions.md @@ -85,7 +85,7 @@ Any `args` that have been marked as an Action, either using the [argTypes annota -To mock functions in your Storybook stories for reliable and isolated component testing, use the `jest` import from `@storybook/jest`. This allows you to avoid configuring Jest globally in your project. +To mock functions in your Storybook stories for reliable and isolated component testing, use the named `fn` import from `@storybook/test`. diff --git a/docs/snippets/react/login-form-with-play-function.ts-4-9.mdx b/docs/snippets/react/login-form-with-play-function.ts-4-9.mdx index 21ec2b71e975..d6a86876817c 100644 --- a/docs/snippets/react/login-form-with-play-function.ts-4-9.mdx +++ b/docs/snippets/react/login-form-with-play-function.ts-4-9.mdx @@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { within, userEvent } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import { LoginForm } from './LoginForm'; diff --git a/docs/snippets/react/login-form-with-play-function.ts.mdx b/docs/snippets/react/login-form-with-play-function.ts.mdx index 370cacf24da8..f31a2a8fcbe2 100644 --- a/docs/snippets/react/login-form-with-play-function.ts.mdx +++ b/docs/snippets/react/login-form-with-play-function.ts.mdx @@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { within, userEvent } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import { LoginForm } from './LoginForm'; diff --git a/docs/snippets/solid/login-form-with-play-function.ts-4-9.mdx b/docs/snippets/solid/login-form-with-play-function.ts-4-9.mdx index e825524ae421..83e2944b0d4e 100644 --- a/docs/snippets/solid/login-form-with-play-function.ts-4-9.mdx +++ b/docs/snippets/solid/login-form-with-play-function.ts-4-9.mdx @@ -5,7 +5,7 @@ import type { Meta, StoryObj } from 'storybook-solidjs'; import { within, userEvent } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import { LoginForm } from './LoginForm'; diff --git a/docs/snippets/solid/login-form-with-play-function.ts.mdx b/docs/snippets/solid/login-form-with-play-function.ts.mdx index ed162b388cf9..f5ca86f3bdb4 100644 --- a/docs/snippets/solid/login-form-with-play-function.ts.mdx +++ b/docs/snippets/solid/login-form-with-play-function.ts.mdx @@ -5,7 +5,7 @@ import type { Meta, StoryObj } from 'storybook-solidjs'; import { within, userEvent } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import { LoginForm } from './LoginForm'; diff --git a/docs/snippets/svelte/login-form-with-play-function.js.mdx b/docs/snippets/svelte/login-form-with-play-function.js.mdx index adcba2b96385..e65f60e9a3cb 100644 --- a/docs/snippets/svelte/login-form-with-play-function.js.mdx +++ b/docs/snippets/svelte/login-form-with-play-function.js.mdx @@ -2,7 +2,7 @@ // LoginForm.stories.js import { userEvent, within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import LoginForm from './LoginForm.svelte'; diff --git a/docs/snippets/svelte/login-form-with-play-function.ts-4-9.mdx b/docs/snippets/svelte/login-form-with-play-function.ts-4-9.mdx index f6009561ef76..265d8fa36b9d 100644 --- a/docs/snippets/svelte/login-form-with-play-function.ts-4-9.mdx +++ b/docs/snippets/svelte/login-form-with-play-function.ts-4-9.mdx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/svelte'; import { userEvent, within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import LoginForm from './LoginForm.svelte'; diff --git a/docs/snippets/svelte/login-form-with-play-function.ts.mdx b/docs/snippets/svelte/login-form-with-play-function.ts.mdx index 172bdac259e4..ff5891c617d8 100644 --- a/docs/snippets/svelte/login-form-with-play-function.ts.mdx +++ b/docs/snippets/svelte/login-form-with-play-function.ts.mdx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/svelte'; import { userEvent, within } from '@storybook/testing-library'; -import { expect } from '@storybook/jest'; +import { expect } from '@storybook/test'; import LoginForm from './LoginForm.svelte'; diff --git a/scripts/package.json b/scripts/package.json index b034d5ec54f3..1a91fb991aad 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -82,7 +82,6 @@ "@octokit/graphql": "^5.0.5", "@octokit/request": "^8.1.2", "@storybook/eslint-config-storybook": "^3.1.2", - "@storybook/jest": "next", "@storybook/linter-config": "^3.1.2", "@storybook/testing-library": "next", "@testing-library/dom": "^9.3.0", diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index 42b40379186d..6c2c8c33c3e9 100644 --- a/scripts/tasks/sandbox-parts.ts +++ b/scripts/tasks/sandbox-parts.ts @@ -353,7 +353,7 @@ export async function addExtraDependencies({ }) { // web-components doesn't install '@storybook/testing-library' by default const extraDevDeps = [ - '@storybook/jest@next', + '@storybook/test@next', '@storybook/testing-library@next', '@storybook/test-runner@next', ]; diff --git a/scripts/verdaccio.yaml b/scripts/verdaccio.yaml index 4ac7b5b61050..fd577fb25147 100644 --- a/scripts/verdaccio.yaml +++ b/scripts/verdaccio.yaml @@ -91,10 +91,6 @@ packages: access: $all publish: $all proxy: npmjs - '@storybook/jest': - access: $all - publish: $all - proxy: npmjs '@storybook/docs-mdx': access: $all publish: $all diff --git a/scripts/yarn.lock b/scripts/yarn.lock index f1b7de217c89..2ecd1b0291d7 100644 --- a/scripts/yarn.lock +++ b/scripts/yarn.lock @@ -2016,15 +2016,6 @@ __metadata: languageName: node linkType: hard -"@jest/schemas@npm:^28.1.3": - version: 28.1.3 - resolution: "@jest/schemas@npm:28.1.3" - dependencies: - "@sinclair/typebox": "npm:^0.24.1" - checksum: 8c325918f3e1b83e687987b05c2e5143d171f372b091f891fe17835f06fadd864ddae3c7e221a704bdd7e2ea28c4b337124c02023d8affcbdd51eca2879162ac - languageName: node - linkType: hard - "@jest/schemas@npm:^29.6.3": version: 29.6.3 resolution: "@jest/schemas@npm:29.6.3" @@ -2034,19 +2025,6 @@ __metadata: languageName: node linkType: hard -"@jest/types@npm:^27.5.1": - version: 27.5.1 - resolution: "@jest/types@npm:27.5.1" - dependencies: - "@types/istanbul-lib-coverage": "npm:^2.0.0" - "@types/istanbul-reports": "npm:^3.0.0" - "@types/node": "npm:*" - "@types/yargs": "npm:^16.0.0" - chalk: "npm:^4.0.0" - checksum: 4598b302398db0eb77168b75a6c58148ea02cc9b9f21c5d1bbe985c1c9257110a5653cf7b901c3cab87fba231e3fed83633687f1c0903b4bc6939ab2a8452504 - languageName: node - linkType: hard - "@jest/types@npm:^29.6.3": version: 29.6.3 resolution: "@jest/types@npm:29.6.3" @@ -2775,13 +2753,6 @@ __metadata: languageName: node linkType: hard -"@sinclair/typebox@npm:^0.24.1": - version: 0.24.51 - resolution: "@sinclair/typebox@npm:0.24.51" - checksum: 458131e83ca59ad3721f0abeef2aa5220aff2083767e1143d75c67c85d55ef7a212f48f394471ee6bdd2e860ba30f09a489cdd2a28a2824d5b0d1014bdfb2552 - languageName: node - linkType: hard - "@sinclair/typebox@npm:^0.27.8": version: 0.27.8 resolution: "@sinclair/typebox@npm:0.27.8" @@ -2830,27 +2801,6 @@ __metadata: languageName: node linkType: hard -"@storybook/expect@npm:storybook-jest": - version: 28.1.3-5 - resolution: "@storybook/expect@npm:28.1.3-5" - dependencies: - "@types/jest": "npm:28.1.3" - checksum: ea912b18e1353cdd3bbdf93667ffebca7f843fa28a01e647429bffa6cb074afd4401d13eb2ecbfc9714e100e128ec1fe2686bded52e9e378ce44774889563558 - languageName: node - linkType: hard - -"@storybook/jest@npm:next": - version: 0.2.3-next.0 - resolution: "@storybook/jest@npm:0.2.3-next.0" - dependencies: - "@storybook/expect": "npm:storybook-jest" - "@testing-library/jest-dom": "npm:^6.1.2" - "@types/jest": "npm:28.1.3" - jest-mock: "npm:^27.3.0" - checksum: 96e800be9adb18d689ff66efe3b953f06d3c209cb0a08559ea47a6de0cd09678e161bdd531cb2d008d58eecc33cb9cb49228e9014435818f3259e1b9eac46635 - languageName: node - linkType: hard - "@storybook/linter-config@npm:3.1.2, @storybook/linter-config@npm:^3.1.2": version: 3.1.2 resolution: "@storybook/linter-config@npm:3.1.2" @@ -2899,7 +2849,6 @@ __metadata: "@octokit/graphql": "npm:^5.0.5" "@octokit/request": "npm:^8.1.2" "@storybook/eslint-config-storybook": "npm:^3.1.2" - "@storybook/jest": "npm:next" "@storybook/linter-config": "npm:^3.1.2" "@storybook/testing-library": "npm:next" "@testing-library/dom": "npm:^9.3.0" @@ -3343,16 +3292,6 @@ __metadata: languageName: node linkType: hard -"@types/jest@npm:28.1.3": - version: 28.1.3 - resolution: "@types/jest@npm:28.1.3" - dependencies: - jest-matcher-utils: "npm:^28.0.0" - pretty-format: "npm:^28.0.0" - checksum: d295db8680b5c230698345d6caae621ea9fa8720309027e2306fabfd8769679b4bd7474b4f6e03788905c934eff62105bc0a3e3f1e174feee51b4551d49ac42a - languageName: node - linkType: hard - "@types/json-schema@npm:^7.0.9": version: 7.0.14 resolution: "@types/json-schema@npm:7.0.14" @@ -3657,15 +3596,6 @@ __metadata: languageName: node linkType: hard -"@types/yargs@npm:^16.0.0": - version: 16.0.7 - resolution: "@types/yargs@npm:16.0.7" - dependencies: - "@types/yargs-parser": "npm:*" - checksum: cc8653b3a422b9c9179a1b89828c057667262ea916b0963e59c333f4781659ac5f8ff2f2ff01aa8d8360c9fdb9a9ea46848914e5e1ad281fe2c32a9cc69666d8 - languageName: node - linkType: hard - "@types/yargs@npm:^17.0.8": version: 17.0.29 resolution: "@types/yargs@npm:17.0.29" @@ -6267,13 +6197,6 @@ __metadata: languageName: node linkType: hard -"diff-sequences@npm:^28.1.1": - version: 28.1.1 - resolution: "diff-sequences@npm:28.1.1" - checksum: 26f29fa3f6b8c9040c3c6f6dab85413d90a09c8e6cb17b318bbcf64f225d7dcb1fb64392f3a9919a90888b434c4f6c8a4cc4f807aad02bbabae912c5d13c31f7 - languageName: node - linkType: hard - "diff-sequences@npm:^29.6.3": version: 29.6.3 resolution: "diff-sequences@npm:29.6.3" @@ -9556,18 +9479,6 @@ __metadata: languageName: node linkType: hard -"jest-diff@npm:^28.1.3": - version: 28.1.3 - resolution: "jest-diff@npm:28.1.3" - dependencies: - chalk: "npm:^4.0.0" - diff-sequences: "npm:^28.1.1" - jest-get-type: "npm:^28.0.2" - pretty-format: "npm:^28.1.3" - checksum: 17a101ceb7e8f25c3ef64edda15cb1a259c2835395637099f3cc44f578fbd94ced7a13d11c0cbe8c5c1c3959a08544f0a913bec25a305b6dfc9847ce488e7198 - languageName: node - linkType: hard - "jest-diff@npm:^29.4.1, jest-diff@npm:^29.7.0": version: 29.7.0 resolution: "jest-diff@npm:29.7.0" @@ -9580,13 +9491,6 @@ __metadata: languageName: node linkType: hard -"jest-get-type@npm:^28.0.2": - version: 28.0.2 - resolution: "jest-get-type@npm:28.0.2" - checksum: f64a40cfa10d79a56b383919033d35c8c4daee6145a1df31ec5ef2283fa7e8adbd443c6fcb4cfd0f60bbbd89f046c2323952f086b06e875cbbbc1a7d543a6e5e - languageName: node - linkType: hard - "jest-get-type@npm:^29.6.3": version: 29.6.3 resolution: "jest-get-type@npm:29.6.3" @@ -9594,18 +9498,6 @@ __metadata: languageName: node linkType: hard -"jest-matcher-utils@npm:^28.0.0": - version: 28.1.3 - resolution: "jest-matcher-utils@npm:28.1.3" - dependencies: - chalk: "npm:^4.0.0" - jest-diff: "npm:^28.1.3" - jest-get-type: "npm:^28.0.2" - pretty-format: "npm:^28.1.3" - checksum: 026fbe664cfdaed5a5c9facfc86ccc9bed3718a7d1fe061e355eb6158019a77f74e9b843bc99f9a467966cbebe60bde8b43439174cbf64997d4ad404f8f809d0 - languageName: node - linkType: hard - "jest-matcher-utils@npm:^29.7.0": version: 29.7.0 resolution: "jest-matcher-utils@npm:29.7.0" @@ -9635,16 +9527,6 @@ __metadata: languageName: node linkType: hard -"jest-mock@npm:^27.3.0": - version: 27.5.1 - resolution: "jest-mock@npm:27.5.1" - dependencies: - "@jest/types": "npm:^27.5.1" - "@types/node": "npm:*" - checksum: 6ad58454b37ee3f726930b07efbf40a7c79d2d2d9c7b226708b4b550bc0904de93bcacf714105d11952a5c0bc855e5d59145c8c9dbbb4e69b46e7367abf53b52 - languageName: node - linkType: hard - "jest-util@npm:^29.7.0": version: 29.7.0 resolution: "jest-util@npm:29.7.0" @@ -12528,18 +12410,6 @@ __metadata: languageName: node linkType: hard -"pretty-format@npm:^28.0.0, pretty-format@npm:^28.1.3": - version: 28.1.3 - resolution: "pretty-format@npm:28.1.3" - dependencies: - "@jest/schemas": "npm:^28.1.3" - ansi-regex: "npm:^5.0.1" - ansi-styles: "npm:^5.0.0" - react-is: "npm:^18.0.0" - checksum: 596d8b459b6fdac7dcbd70d40169191e889939c17ffbcc73eebe2a9a6f82cdbb57faffe190274e0a507d9ecdf3affadf8a9b43442a625eecfbd2813b9319660f - languageName: node - linkType: hard - "pretty-format@npm:^29.0.0, pretty-format@npm:^29.7.0": version: 29.7.0 resolution: "pretty-format@npm:29.7.0" diff --git a/yarn.lock b/yarn.lock index 14231d72f18e..41331a2f1000 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9,4 +9,4 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/root@workspace:." languageName: unknown - linkType: soft + linkType: soft \ No newline at end of file From 61155646cb20d582972cd822add163e963b2f1ae Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 12 Jan 2024 16:29:17 +0100 Subject: [PATCH 15/61] Update yarn.lock --- code/yarn.lock | 51 ++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 39 insertions(+), 12 deletions(-) diff --git a/code/yarn.lock b/code/yarn.lock index bbf0e15279d7..47f4ebcac288 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -7172,6 +7172,13 @@ __metadata: languageName: node linkType: hard +"@types/chai@npm:^4": + version: 4.3.11 + resolution: "@types/chai@npm:4.3.11" + checksum: 0c216ac4a19bfbf8318bb104d32e50704ee2ffc4b538b976c4326e6638fee121462402caa570662227a2a218810388aadb14bdbd3d3d474ec300b00695db448a + languageName: node + linkType: hard + "@types/color-convert@npm:^2.0.0": version: 2.0.3 resolution: "@types/color-convert@npm:2.0.3" @@ -8356,6 +8363,17 @@ __metadata: languageName: node linkType: hard +"@vitest/expect@npm:^0.34.2": + version: 0.34.7 + resolution: "@vitest/expect@npm:0.34.7" + dependencies: + "@vitest/spy": "npm:0.34.7" + "@vitest/utils": "npm:0.34.7" + chai: "npm:^4.3.10" + checksum: 3ce5b63a51a8c5f585d21768c1dc48dbedbb83b01a6bad07a27db809b53d4e21cfdd059f23815ad8374dfd010e75e279ea0baa7b0fd2bdeffed8afeb53d326ee + languageName: node + linkType: hard + "@vitest/expect@patch:@vitest/expect@npm%3A1.1.3#~/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch": version: 1.1.3 resolution: "@vitest/expect@patch:@vitest/expect@npm%3A1.1.3#~/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch::version=1.1.3&hash=5d51c9" @@ -8389,6 +8407,15 @@ __metadata: languageName: node linkType: hard +"@vitest/spy@npm:0.34.7, @vitest/spy@npm:^0.34.1": + version: 0.34.7 + resolution: "@vitest/spy@npm:0.34.7" + dependencies: + tinyspy: "npm:^2.1.1" + checksum: 1150b270eb72a5e8e7da997bcba90ebe5ed2ac50de1ea1f81738e16a19ab4bc77ca4d17639988df65695d4b325fe3647a1e4204d01024bcf5ecac8ba7764a2cc + languageName: node + linkType: hard + "@vitest/spy@npm:1.0.4": version: 1.0.4 resolution: "@vitest/spy@npm:1.0.4" @@ -8407,6 +8434,17 @@ __metadata: languageName: node linkType: hard +"@vitest/utils@npm:0.34.7, @vitest/utils@npm:^0.34.6": + version: 0.34.7 + resolution: "@vitest/utils@npm:0.34.7" + dependencies: + diff-sequences: "npm:^29.4.3" + loupe: "npm:^2.3.6" + pretty-format: "npm:^29.5.0" + checksum: 5f26ec5b4a53709a50efdb57aa753e8090b3411e888774f67a0d192eb7f046ed5fcc6884eb3d6275d2674926e724b731e8d28cd3cea96a7f3d27462a0d44af9e + languageName: node + linkType: hard + "@vitest/utils@npm:1.0.4": version: 1.0.4 resolution: "@vitest/utils@npm:1.0.4" @@ -8430,17 +8468,6 @@ __metadata: languageName: node linkType: hard -"@vitest/utils@npm:^0.34.6": - version: 0.34.7 - resolution: "@vitest/utils@npm:0.34.7" - dependencies: - diff-sequences: "npm:^29.4.3" - loupe: "npm:^2.3.6" - pretty-format: "npm:^29.5.0" - checksum: 5f26ec5b4a53709a50efdb57aa753e8090b3411e888774f67a0d192eb7f046ed5fcc6884eb3d6275d2674926e724b731e8d28cd3cea96a7f3d27462a0d44af9e - languageName: node - linkType: hard - "@volar/language-core@npm:1.10.1, @volar/language-core@npm:~1.10.0": version: 1.10.1 resolution: "@volar/language-core@npm:1.10.1" @@ -26902,7 +26929,7 @@ __metadata: languageName: node linkType: hard -"tinyspy@npm:^2.2.0": +"tinyspy@npm:^2.1.1, tinyspy@npm:^2.2.0": version: 2.2.0 resolution: "tinyspy@npm:2.2.0" checksum: 8c7b70748dd8590e85d52741db79243746c15bc03c92d75c23160a762142db577e7f53e360ba7300e321b12bca5c42dd2522a8dbeec6ba3830302573dd8516bc From 839c241764fa755ab2e2fd4e37e892dc8dff6547 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 12 Jan 2024 16:18:15 +0100 Subject: [PATCH 16/61] Parameters: Remove passArgsFirst flag --- MIGRATION.md | 601 ++++++++++-------- code/lib/preview-api/README-store.md | 8 +- .../modules/store/csf/prepareStory.test.ts | 34 - .../src/modules/store/csf/prepareStory.ts | 13 +- docs/essentials/toolbars-and-globals.md | 23 - ...ory-use-globaltype-backwards-compat.ts.mdx | 10 - ...ybook-preview-parameters-old-format.js.mdx | 7 - ...ybook-preview-parameters-old-format.ts.mdx | 12 - ...ory-use-globaltype-backwards-compat.js.mdx | 8 - ...ory-use-globaltype-backwards-compat.js.mdx | 8 - ...ory-use-globaltype-backwards-compat.js.mdx | 13 - ...use-globaltype-backwards-compat.ts-4-9.mdx | 13 - ...ory-use-globaltype-backwards-compat.ts.mdx | 13 - ...ory-use-globaltype-backwards-compat.js.mdx | 10 - ...ory-use-globaltype-backwards-compat.js.mdx | 17 - ...ory-use-globaltype-backwards-compat.ts.mdx | 19 - docs/writing-stories/args.md | 25 - 17 files changed, 332 insertions(+), 502 deletions(-) delete mode 100644 docs/snippets/angular/my-component-story-use-globaltype-backwards-compat.ts.mdx delete mode 100644 docs/snippets/common/storybook-preview-parameters-old-format.js.mdx delete mode 100644 docs/snippets/common/storybook-preview-parameters-old-format.ts.mdx delete mode 100644 docs/snippets/react/my-component-story-use-globaltype-backwards-compat.js.mdx delete mode 100644 docs/snippets/solid/my-component-story-use-globaltype-backwards-compat.js.mdx delete mode 100644 docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.js.mdx delete mode 100644 docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.ts-4-9.mdx delete mode 100644 docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.ts.mdx delete mode 100644 docs/snippets/vue/my-component-story-use-globaltype-backwards-compat.js.mdx delete mode 100644 docs/snippets/web-components/my-component-story-use-globaltype-backwards-compat.js.mdx delete mode 100644 docs/snippets/web-components/my-component-story-use-globaltype-backwards-compat.ts.mdx diff --git a/MIGRATION.md b/MIGRATION.md index 0a13cc59da81..fbfbffb19062 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -42,6 +42,7 @@ - [Web Components](#web-components) - [Dropping default babel plugins in Webpack5-based projects](#dropping-default-babel-plugins-in-webpack5-based-projects) - [Deprecations which are now removed](#deprecations-which-are-now-removed) + - [Removed `passArgsFirst` option](#removed-passargsfirst-option) - [Methods and properties from AddonStore](#methods-and-properties-from-addonstore) - [Methods and properties from PreviewAPI](#methods-and-properties-from-previewapi) - [Removals in @storybook/types](#removals-in-storybooktypes) @@ -62,19 +63,19 @@ - [Source Doc block properties](#source-doc-block-properties) - [Canvas Doc block properties](#canvas-doc-block-properties) - [`Primary` Doc block properties](#primary-doc-block-properties) - - [`createChannel` from `@storybook/postmessage` and `@storybook/channel-websocket`](#createchannel-from-storybookpostmessage-and--storybookchannel-websocket) + - [`createChannel` from `@storybook/postmessage` and `@storybook/channel-websocket`](#createchannel-from-storybookpostmessage-and-storybookchannel-websocket) - [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) @@ -100,7 +101,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) @@ -113,7 +114,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) @@ -163,7 +164,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) @@ -376,7 +377,6 @@ - [Packages renaming](#packages-renaming) - [Deprecated embedded addons](#deprecated-embedded-addons) - ## From version 7.x to 8.0.0 ### Manager addons are now rendered with React 18 @@ -384,13 +384,14 @@ The UI added to the manager via addons is now rendered with React 18. Example: + ```tsx -import { addons, types } from '@storybook/manager-api'; +import { addons, types } from "@storybook/manager-api"; -addons.register('my-addon', () => { - addons.add('my-addon/panel', { +addons.register("my-addon", () => { + addons.add("my-addon/panel", { type: types.PANEL, - title: 'My Addon', + title: "My Addon", // This will be called as a JSX element by react 18 render: ({ active }) => (active ?
Hello World
: null), }); @@ -428,8 +429,8 @@ In Storybook 7, we would automatically add frameworks-specific Vite plugins, e.g In Storybook 8 those plugins have to be added explicitly in the user's `vite.config.ts`: ```ts -import { defineConfig } from 'vite'; -import react from '@vitejs/plugin-react'; +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; // https://vitejs.dev/config/ export default defineConfig({ @@ -450,7 +451,7 @@ export default { export const ButtonClick = { play: async ({ args, canvasElement }) => { - await userEvent.click(within(canvasElement).getByRole('button')); + await userEvent.click(within(canvasElement).getByRole("button")); // args.onClick is a jest spy in 7.0 await expect(args.onClick).toHaveBeenCalled(); }, @@ -460,7 +461,7 @@ export const ButtonClick = { In Storybook 8 this feature is removed, and spies have to added explicitly: ```ts -import { fn } from '@storybook/test'; +import { fn } from "@storybook/test"; export default { component: Button, @@ -471,7 +472,7 @@ export default { export const ButtonClick = { play: async ({ args, canvasElement }) => { - await userEvent.click(within(canvasElement).getByRole('button')); + await userEvent.click(within(canvasElement).getByRole("button")); await expect(args.onClick).toHaveBeenCalled(); }, }; @@ -492,7 +493,7 @@ To summarize: Storybook now uses MDX3 under the hood. This change contains many improvements and a few small breaking changes that probably won't affect you. However we recommend checking the [migration notes from MDX here](https://mdxjs.com/blog/v3/). -#### Dropping support for *.stories.mdx (CSF in MDX) format and MDX1 support +#### Dropping support for \*.stories.mdx (CSF in MDX) format and MDX1 support In Storybook 7, we deprecated the ability of using MDX both for documentation and for defining stories in the same .stories.mdx file. It is now removed, and Storybook won't support .stories.mdx files anymore. We provide migration scripts to help you onto the new format. @@ -538,7 +539,7 @@ The fast-refresh implementation currently relies on the `react-refresh/babel` pa Furthermore, the existing implementation does not account for cases where fast-refresh might already be configured in a user's Babel configuration. Rather than filtering out existing configurations, our current approach could lead to duplications, resulting in a sub-optimal development experience. -We believe in empowering our users, and setting up fast-refresh manually is a straightforward process. The following configuration will configure fast-refresh if Storybook does not automatically pick up your fast-refresh configuration: +We believe in empowering our users, and setting up fast-refresh manually is a straightforward process. The following configuration will configure fast-refresh if Storybook does not automatically pick up your fast-refresh configuration: `package.json`: @@ -611,8 +612,8 @@ In Storybook 7, the file name `path/to/foo.bar.stories.js` would result in the [ ```js export default { - title: 'path/to/foo', -} + title: "path/to/foo", +}; ``` Alternatively, if you need to achieve a different behavior for a large number of files, you can provide a [custom indexer](https://storybook.js.org/docs/7.0/vue/configure/sidebar-and-urls#processing-custom-titles) to generate the titles dynamically. @@ -706,9 +707,9 @@ We feel `react-docgen` is the right tradeoff for most React projects. However, i ```js export default { typescript: { - reactDocgen: 'react-docgen-typescript', - } -} + reactDocgen: "react-docgen-typescript", + }, +}; ``` For more information see: https://storybook.js.org/docs/react/api/main-config-typescript#reactdocgen @@ -723,7 +724,7 @@ Starting in 8.0, Storybook requires Next.js 13.5 and up. Similar to how Next.js detects if SWC should be used, Storybook will follow more or less the same rules: -- If you use Next.js 14 or higher and you don't have a .babelrc file, Storybook will use SWC to transpile your code. +- If you use Next.js 14 or higher and you don't have a .babelrc file, Storybook will use SWC to transpile your code. - Even if you have a .babelrc file, Storybook will still use SWC to transpile your code if you set the experimental `experimental.forceSwcTransforms` flag to `true` in your `next.config.js`. #### Angular @@ -757,7 +758,7 @@ Until now, Storybook provided a set of default Babel plugins that were applied t // Add this to automatically import `h` from `preact` when needed "@babel/plugin-transform-react-jsx", { "importSource": "preact", - "runtime": "automatic" + "runtime": "automatic" } ], // Add this if you want to use TypeScript with Preact @@ -776,9 +777,9 @@ const config = { [ "@babel/plugin-transform-react-jsx", { "importSource": "preact", - "runtime": "automatic" + "runtime": "automatic" } - ], + ], "@babel/preset-typescript" ) return options; @@ -798,9 +799,27 @@ Until the 8.0 release, Storybook provided the `@babel/preset-env` preset for Web ### Deprecations which are now removed +#### Removed `passArgsFirst` option + +Since Storybook 6, we have had an option called `parameters.passArgsFirst` (default=`true`), which sallows you to pass the context to the story function first when set to `false.` We have removed this option. In Storybook 8.0, the args are always passed first, and as a second argument, the context is passed. + +```js +// Storybook < 8 +export default { + parameters: { + passArgsFirst: false, + }, +}; + +export const Button = (context) => ); diff --git a/code/renderers/react/template/stories/docgen-components/9556-ts-react-default-exports/input.tsx b/code/renderers/react/template/stories/docgen-components/9556-ts-react-default-exports/input.tsx index 3517870221b2..b741ea537376 100644 --- a/code/renderers/react/template/stories/docgen-components/9556-ts-react-default-exports/input.tsx +++ b/code/renderers/react/template/stories/docgen-components/9556-ts-react-default-exports/input.tsx @@ -1,4 +1,3 @@ -/* eslint-disable react/button-has-type */ import React from 'react'; export interface Props extends React.ButtonHTMLAttributes { diff --git a/code/renderers/react/template/stories/docgen-components/9586-js-react-memo/input.jsx b/code/renderers/react/template/stories/docgen-components/9586-js-react-memo/input.jsx index 19f7951a337a..d50eeb2b916f 100644 --- a/code/renderers/react/template/stories/docgen-components/9586-js-react-memo/input.jsx +++ b/code/renderers/react/template/stories/docgen-components/9586-js-react-memo/input.jsx @@ -2,7 +2,6 @@ import React from 'react'; import PropTypes from 'prop-types'; function Button({ label, onClick }) { - // eslint-disable-next-line react/button-has-type return ; } diff --git a/code/renderers/react/template/stories/docgen-components/9668-js-proptypes-no-jsdoc/input.jsx b/code/renderers/react/template/stories/docgen-components/9668-js-proptypes-no-jsdoc/input.jsx index 24837c61a4cd..2e66bdd696d2 100644 --- a/code/renderers/react/template/stories/docgen-components/9668-js-proptypes-no-jsdoc/input.jsx +++ b/code/renderers/react/template/stories/docgen-components/9668-js-proptypes-no-jsdoc/input.jsx @@ -1,6 +1,3 @@ -/* eslint-disable react/forbid-prop-types */ -/* eslint-disable react/require-default-props */ -/* eslint-disable react/no-unused-prop-types */ import React from 'react'; import PropTypes from 'prop-types'; diff --git a/code/renderers/react/template/stories/docgen-components/js-class-component/input.jsx b/code/renderers/react/template/stories/docgen-components/js-class-component/input.jsx index f79658f01abe..8134e591f18d 100644 --- a/code/renderers/react/template/stories/docgen-components/js-class-component/input.jsx +++ b/code/renderers/react/template/stories/docgen-components/js-class-component/input.jsx @@ -1,5 +1,3 @@ -/* eslint-disable react/forbid-prop-types */ -/* eslint-disable react/no-unused-prop-types */ import React from 'react'; import PropTypes from 'prop-types'; @@ -10,7 +8,7 @@ const local = 'local-value'; /** * A component that renders its props */ -// eslint-disable-next-line react/prefer-stateless-function + class PropsWriter extends React.Component { render() { return 
{JSON.stringify(this.props)}
; @@ -50,7 +48,7 @@ PropsWriter.defaultProps = { importedReference: imported, globalReference: Date, stringGlobalName: 'top', - // eslint-disable-next-line react/default-props-match-prop-types + stringNoPropType: 'stringNoPropType', }; diff --git a/code/renderers/react/template/stories/docgen-components/js-function-component-inline-defaults/input.jsx b/code/renderers/react/template/stories/docgen-components/js-function-component-inline-defaults/input.jsx index ca1cb735478e..8bc5c569444f 100644 --- a/code/renderers/react/template/stories/docgen-components/js-function-component-inline-defaults/input.jsx +++ b/code/renderers/react/template/stories/docgen-components/js-function-component-inline-defaults/input.jsx @@ -1,6 +1,3 @@ -/* eslint-disable react/forbid-prop-types */ -/* eslint-disable react/no-unused-prop-types */ -/* eslint-disable react/require-default-props */ import React from 'react'; import PropTypes from 'prop-types'; diff --git a/code/renderers/react/template/stories/docgen-components/js-function-component/input.jsx b/code/renderers/react/template/stories/docgen-components/js-function-component/input.jsx index a995807144eb..42959b7b0cbd 100644 --- a/code/renderers/react/template/stories/docgen-components/js-function-component/input.jsx +++ b/code/renderers/react/template/stories/docgen-components/js-function-component/input.jsx @@ -1,5 +1,3 @@ -/* eslint-disable react/forbid-prop-types */ -/* eslint-disable react/no-unused-prop-types */ import React from 'react'; import PropTypes from 'prop-types'; diff --git a/code/renderers/react/template/stories/docgen-components/js-proptypes/input.jsx b/code/renderers/react/template/stories/docgen-components/js-proptypes/input.jsx index edfb32ee358e..b47eadfbc921 100644 --- a/code/renderers/react/template/stories/docgen-components/js-proptypes/input.jsx +++ b/code/renderers/react/template/stories/docgen-components/js-proptypes/input.jsx @@ -1,5 +1,3 @@ -/* eslint-disable react/no-unused-prop-types */ -/* eslint-disable react/forbid-prop-types */ import React from 'react'; import PropTypes, { string, shape } from 'prop-types'; import { PRESET_SHAPE, SOME_PROP_TYPES } from './ext'; @@ -398,9 +396,8 @@ PropTypesProps.defaultProps = { string: 'Default string', func: () => {}, funcWithJsDoc: (foo, bar) => { - // eslint-disable-next-line no-undef const yo = window.document; - // eslint-disable-next-line no-undef + const pouf = souffle; return { foo, bar }; diff --git a/code/renderers/react/template/stories/docgen-components/jsdoc/input.jsx b/code/renderers/react/template/stories/docgen-components/jsdoc/input.jsx index b23ab673a439..f9357c93860d 100644 --- a/code/renderers/react/template/stories/docgen-components/jsdoc/input.jsx +++ b/code/renderers/react/template/stories/docgen-components/jsdoc/input.jsx @@ -1,4 +1,3 @@ -/* eslint-disable react/require-default-props, react/no-unused-prop-types */ import React from 'react'; import PropTypes from 'prop-types'; diff --git a/code/renderers/server/src/render.ts b/code/renderers/server/src/render.ts index b0276f377013..0a768647d740 100644 --- a/code/renderers/server/src/render.ts +++ b/code/renderers/server/src/render.ts @@ -1,4 +1,3 @@ -/* eslint-disable no-param-reassign */ import { global } from '@storybook/global'; import { dedent } from 'ts-dedent'; diff --git a/code/renderers/svelte/src/public-types.test.ts b/code/renderers/svelte/src/public-types.test.ts index 7a967db4da66..54773fe2de91 100644 --- a/code/renderers/svelte/src/public-types.test.ts +++ b/code/renderers/svelte/src/public-types.test.ts @@ -1,5 +1,4 @@ // this file tests Typescript types that's why there are no assertions -/* eslint-disable jest/expect-expect */ import { describe, it } from 'vitest'; import { satisfies } from '@storybook/core-common'; import type { ComponentAnnotations, StoryAnnotations } from '@storybook/types'; diff --git a/code/renderers/svelte/src/render.ts b/code/renderers/svelte/src/render.ts index 05fc9daf852f..514b3128ed21 100644 --- a/code/renderers/svelte/src/render.ts +++ b/code/renderers/svelte/src/render.ts @@ -1,4 +1,3 @@ -/* eslint-disable no-param-reassign */ import type { RenderContext, ArgsStoryFn } from '@storybook/types'; import { RESET_STORY_ARGS } from '@storybook/core-events'; // ! DO NOT change this PreviewRender import to a relative path, it will break it. @@ -22,7 +21,7 @@ function teardown(canvasElement: SvelteRenderer['canvasElement']) { if (!componentsByDomElement.has(canvasElement)) { return; } - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- we know it exists because we just checked + componentsByDomElement.get(canvasElement)!.$destroy(); canvasElement.innerHTML = ''; diff --git a/code/renderers/vue3/src/docs/sourceDecorator.ts b/code/renderers/vue3/src/docs/sourceDecorator.ts index aecdb01fabbb..adb20ae68755 100644 --- a/code/renderers/vue3/src/docs/sourceDecorator.ts +++ b/code/renderers/vue3/src/docs/sourceDecorator.ts @@ -1,4 +1,3 @@ -/* eslint-disable no-eval */ /* eslint-disable no-underscore-dangle */ import { addons } from '@storybook/preview-api'; import type { ArgTypes, Args, StoryContext } from '@storybook/types'; @@ -240,7 +239,7 @@ export function generateTemplateSource( const slotArgs = Object.fromEntries( Object.entries(props ?? {}).filter(([key, value]) => slotsProps?.[key]) ); - // eslint-disable-next-line no-nested-ternary + const childSources: string = children ? typeof children === 'string' ? children diff --git a/code/renderers/vue3/src/public-types.test.ts b/code/renderers/vue3/src/public-types.test.ts index 41080f5459a6..4c43c75e5ca9 100644 --- a/code/renderers/vue3/src/public-types.test.ts +++ b/code/renderers/vue3/src/public-types.test.ts @@ -1,5 +1,4 @@ // this file tests Typescript types that's why there are no assertions -/* eslint-disable jest/expect-expect */ import { describe, it } from 'vitest'; import { satisfies } from '@storybook/core-common'; import type { ComponentAnnotations, StoryAnnotations } from '@storybook/types'; diff --git a/code/renderers/vue3/src/render.ts b/code/renderers/vue3/src/render.ts index c7051ac847f5..535f3a67b63c 100644 --- a/code/renderers/vue3/src/render.ts +++ b/code/renderers/vue3/src/render.ts @@ -1,5 +1,5 @@ /* eslint-disable local-rules/no-uncategorized-errors,no-underscore-dangle */ -/* eslint-disable no-param-reassign */ + import type { App } from 'vue'; import { createApp, h, isReactive, isVNode, reactive } from 'vue'; import type { ArgsStoryFn, RenderContext } from '@storybook/types'; diff --git a/code/renderers/vue3/template/stories/preview.js b/code/renderers/vue3/template/stories/preview.js index 03dc82f84bcf..2bee659276ae 100644 --- a/code/renderers/vue3/template/stories/preview.js +++ b/code/renderers/vue3/template/stories/preview.js @@ -5,7 +5,7 @@ import { setup } from '@storybook/vue3'; const somePlugin = { install: (app, options) => { // inject a globally available $greetingText() method - // eslint-disable-next-line no-param-reassign + app.config.globalProperties.$greetingMessage = (key) => { // retrieve a nested property in `options` // using `key` diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/OverrideArgs.stories.js b/code/renderers/vue3/template/stories_vue3-vite-default-ts/OverrideArgs.stories.js index f54beb468650..968d60353212 100644 --- a/code/renderers/vue3/template/stories_vue3-vite-default-ts/OverrideArgs.stories.js +++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/OverrideArgs.stories.js @@ -25,7 +25,7 @@ const meta = { render: (args) => { // Individual properties can be overridden by spreading the args // and the replacing the key-values that need to be updated - args = { ...args, icon: icons[args.icon || 'Primary'] }; // eslint-disable-line no-param-reassign + args = { ...args, icon: icons[args.icon || 'Primary'] }; return { // Components used in your story `template` are defined in the `components` object components: { OverrideArgs }, diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/ScopedSlots.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/ScopedSlots.stories.ts index 95266e452711..862b7679eda8 100644 --- a/code/renderers/vue3/template/stories_vue3-vite-default-ts/ScopedSlots.stories.ts +++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/ScopedSlots.stories.ts @@ -8,7 +8,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'; import MySlotComponent from './MySlotComponent.vue'; declare global { - // eslint-disable-next-line no-var,vars-on-top,@typescript-eslint/naming-convention + // eslint-disable-next-line no-var,@typescript-eslint/naming-convention var __STORYBOOK_ADDONS_CHANNEL__: Channel; } diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/preview.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/preview.ts index ed91fd10c475..adcee313bd68 100644 --- a/code/renderers/vue3/template/stories_vue3-vite-default-ts/preview.ts +++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/preview.ts @@ -5,7 +5,7 @@ declare module 'vue' { } declare global { - // eslint-disable-next-line no-var,vars-on-top + // eslint-disable-next-line no-var var Components: Record; } diff --git a/code/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/input.js b/code/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/input.js index 68087cf9aa09..70d06bb86fba 100644 --- a/code/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/input.js +++ b/code/renderers/web-components/src/docs/__testfixtures__/lit-element-demo-card/input.js @@ -195,5 +195,4 @@ export class DemoWcCard extends LitElement { } } -// eslint-disable-next-line no-undef customElements.define('input', DemoWcCard); diff --git a/code/renderers/web-components/src/docs/__testfixtures__/lit-html-welcome/input.js b/code/renderers/web-components/src/docs/__testfixtures__/lit-html-welcome/input.js index da94e189e016..a76c22da7d37 100644 --- a/code/renderers/web-components/src/docs/__testfixtures__/lit-html-welcome/input.js +++ b/code/renderers/web-components/src/docs/__testfixtures__/lit-html-welcome/input.js @@ -57,5 +57,4 @@ export const Welcome = () => html` `; -// eslint-disable-next-line no-undef customElements.define('input', Welcome); diff --git a/code/renderers/web-components/src/docs/web-components-properties.test.ts b/code/renderers/web-components/src/docs/web-components-properties.test.ts index 3b418464e152..ed80c4ca4069 100644 --- a/code/renderers/web-components/src/docs/web-components-properties.test.ts +++ b/code/renderers/web-components/src/docs/web-components-properties.test.ts @@ -49,7 +49,6 @@ describe('web-components component properties', () => { const customElementsJson = runWebComponentsAnalyzer(inputPath); const customElements = JSON.parse(customElementsJson); customElements.tags.forEach((tag: any) => { - // eslint-disable-next-line no-param-reassign tag.path = 'dummy-path-to-component'; }); expect(customElements).toMatchFileSnapshot( diff --git a/code/renderers/web-components/src/render.ts b/code/renderers/web-components/src/render.ts index 5445648cb51e..eb7cabfaef2a 100644 --- a/code/renderers/web-components/src/render.ts +++ b/code/renderers/web-components/src/render.ts @@ -1,4 +1,3 @@ -/* eslint-disable no-param-reassign */ /* eslint-disable @typescript-eslint/ban-ts-comment */ import { global } from '@storybook/global'; diff --git a/code/renderers/web-components/template/stories/demo-wc-card/index.js b/code/renderers/web-components/template/stories/demo-wc-card/index.js index 2b369f73fd43..e5ef957d2eca 100644 --- a/code/renderers/web-components/template/stories/demo-wc-card/index.js +++ b/code/renderers/web-components/template/stories/demo-wc-card/index.js @@ -1,4 +1,3 @@ import { DemoWcCard } from './DemoWcCard.js'; -// eslint-disable-next-line no-undef customElements.define('demo-wc-card', DemoWcCard); diff --git a/code/ui/.storybook/preview-head.html b/code/ui/.storybook/preview-head.html index 8eb8709c1b73..4037d732ffec 100644 --- a/code/ui/.storybook/preview-head.html +++ b/code/ui/.storybook/preview-head.html @@ -1,4 +1,3 @@ diff --git a/code/ui/blocks/src/blocks/ArgsTable.tsx b/code/ui/blocks/src/blocks/ArgsTable.tsx index 239e616e1b93..aa0ff827ed34 100644 --- a/code/ui/blocks/src/blocks/ArgsTable.tsx +++ b/code/ui/blocks/src/blocks/ArgsTable.tsx @@ -109,7 +109,7 @@ const isShortcut = (value?: string) => { return value && [PRIMARY_STORY].includes(value); }; -export const getComponent = (props: ArgsTableProps = {}, component: Component): Component => { +export const getComponent = (props: ArgsTableProps, component: Component): Component => { const { of } = props as OfProps; const { story } = props as StoryProps; if (isShortcut(of) || isShortcut(story)) { diff --git a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx index b57c35526759..c0a9e8b0d0bc 100644 --- a/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx +++ b/code/ui/blocks/src/components/ArgsTable/ArgsTable.tsx @@ -11,7 +11,7 @@ import { UndoIcon } from '@storybook/icons'; import { ArgRow } from './ArgRow'; import { SectionRow } from './SectionRow'; import type { ArgType, ArgTypes, Args, Globals } from './types'; -// eslint-disable-next-line import/no-cycle + import { EmptyBlock } from '..'; import { Skeleton } from './Skeleton'; import { Empty } from './Empty'; diff --git a/code/ui/blocks/src/components/ArgsTable/TabbedArgsTable.tsx b/code/ui/blocks/src/components/ArgsTable/TabbedArgsTable.tsx index 99a1b46f902c..e493848fedae 100644 --- a/code/ui/blocks/src/components/ArgsTable/TabbedArgsTable.tsx +++ b/code/ui/blocks/src/components/ArgsTable/TabbedArgsTable.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { TabsState } from '@storybook/components'; import type { ArgsTableProps, SortType } from './ArgsTable'; -// eslint-disable-next-line import/no-cycle + import { ArgsTable } from './ArgsTable'; export interface TabbedArgsTableProps { diff --git a/code/ui/blocks/src/components/ArgsTable/index.ts b/code/ui/blocks/src/components/ArgsTable/index.ts index e3b1f1528205..6fabf7147b73 100644 --- a/code/ui/blocks/src/components/ArgsTable/index.ts +++ b/code/ui/blocks/src/components/ArgsTable/index.ts @@ -1,5 +1,5 @@ export * from './types'; -// eslint-disable-next-line import/no-cycle + export * from './ArgsTable'; export * from './TabbedArgsTable'; diff --git a/code/ui/blocks/src/components/ColorPalette.tsx b/code/ui/blocks/src/components/ColorPalette.tsx index 98b171d0b05f..7ed11e0df686 100644 --- a/code/ui/blocks/src/components/ColorPalette.tsx +++ b/code/ui/blocks/src/components/ColorPalette.tsx @@ -168,7 +168,6 @@ function renderSwatchSpecimen(colors: Colors) { const swatchElements = []; const labelElements = []; - // eslint-disable-next-line no-restricted-syntax, guard-for-in for (const colorKey in colors) { const colorValue = colors[colorKey]; swatchElements.push(renderSwatch(colorValue, swatchElements.length)); diff --git a/code/ui/blocks/src/components/Preview.tsx b/code/ui/blocks/src/components/Preview.tsx index a4651ba72184..3705bd987d66 100644 --- a/code/ui/blocks/src/components/Preview.tsx +++ b/code/ui/blocks/src/components/Preview.tsx @@ -8,7 +8,7 @@ import { ActionBar, Zoom } from '@storybook/components'; import type { ActionItem } from '@storybook/components'; import type { SourceProps } from '.'; -// eslint-disable-next-line import/no-cycle + import { Source } from '.'; import { getBlockBackgroundStyle } from './BlockBackgroundStyles'; import { Toolbar } from './Toolbar'; @@ -266,7 +266,6 @@ export const Preview: FC = ({ > {Array.isArray(children) ? ( - // eslint-disable-next-line react/no-array-index-key children.map((child, i) =>
{child}
) ) : (
{children}
diff --git a/code/ui/blocks/src/components/index.ts b/code/ui/blocks/src/components/index.ts index 8c4916b6bde6..ae6b28b0e733 100644 --- a/code/ui/blocks/src/components/index.ts +++ b/code/ui/blocks/src/components/index.ts @@ -1,9 +1,9 @@ export * from './Source'; export * from './EmptyBlock'; export * from './DocsPage'; -// eslint-disable-next-line import/no-cycle + export * from './Preview'; -// eslint-disable-next-line import/no-cycle + export * from './ArgsTable'; export * from './Story'; export * from './IFrame'; diff --git a/code/ui/blocks/src/controls/Color.tsx b/code/ui/blocks/src/controls/Color.tsx index b126c80e3b2d..c9bf13a526c9 100644 --- a/code/ui/blocks/src/controls/Color.tsx +++ b/code/ui/blocks/src/controls/Color.tsx @@ -333,7 +333,6 @@ export const ColorControl: FC = ({ {presets.map((preset, index: number) => ( } diff --git a/code/ui/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx b/code/ui/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx index 99e9d048f8af..517a4d0fd6f4 100644 --- a/code/ui/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx +++ b/code/ui/blocks/src/controls/react-editable-json-tree/JsonNodes.tsx @@ -1,9 +1,6 @@ /* eslint-disable react/no-direct-mutation-state */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ + /* eslint-disable react/sort-comp */ -/* eslint-disable react/no-array-index-key */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ -/* eslint-disable react/button-has-type */ import type { ReactElement } from 'react'; import React, { cloneElement, Component } from 'react'; diff --git a/code/ui/blocks/src/controls/react-editable-json-tree/utils/parse.ts b/code/ui/blocks/src/controls/react-editable-json-tree/utils/parse.ts index 7537ba703189..af3219475c42 100644 --- a/code/ui/blocks/src/controls/react-editable-json-tree/utils/parse.ts +++ b/code/ui/blocks/src/controls/react-editable-json-tree/utils/parse.ts @@ -8,7 +8,7 @@ export function parse(string: string) { // Check if string contains 'function' and start with it to eval it if (result.indexOf('function') === 0) { - return (0, eval)(`(${result})`); // eslint-disable-line no-eval + return (0, eval)(`(${result})`); } try { diff --git a/code/ui/blocks/src/controls/types.ts b/code/ui/blocks/src/controls/types.ts index a6958c7495d1..6303ec41422a 100644 --- a/code/ui/blocks/src/controls/types.ts +++ b/code/ui/blocks/src/controls/types.ts @@ -1,5 +1,3 @@ -/* eslint-disable @typescript-eslint/no-empty-interface */ - import type { ArgType } from '../components/ArgsTable'; export interface ControlProps { diff --git a/code/ui/blocks/src/examples/EmptyExample.tsx b/code/ui/blocks/src/examples/EmptyExample.tsx index b107ac26b781..d9ad80b7a120 100644 --- a/code/ui/blocks/src/examples/EmptyExample.tsx +++ b/code/ui/blocks/src/examples/EmptyExample.tsx @@ -1,6 +1,5 @@ import React from 'react'; -// eslint-disable-next-line no-empty-pattern export const EmptyExample = ({}) => (
This component is not intended to render anything, it simply serves a something to hang diff --git a/code/ui/components/scripts/writeCssScript.js b/code/ui/components/scripts/writeCssScript.js index 4392c6ad3158..6bf292f1e05b 100644 --- a/code/ui/components/scripts/writeCssScript.js +++ b/code/ui/components/scripts/writeCssScript.js @@ -1,5 +1,4 @@ /* eslint-disable no-underscore-dangle */ -/* eslint-disable no-param-reassign */ // This little script converts the overflowscrollbars CSS file into the css-in-js file // it's normal you have to run prettier over the file after diff --git a/code/ui/components/src/components/ActionBar/ActionBar.tsx b/code/ui/components/src/components/ActionBar/ActionBar.tsx index 8519b47e47c1..6295bf99349a 100644 --- a/code/ui/components/src/components/ActionBar/ActionBar.tsx +++ b/code/ui/components/src/components/ActionBar/ActionBar.tsx @@ -69,7 +69,6 @@ export interface ActionBarProps { export const ActionBar: FC = ({ actionItems, ...props }) => ( {actionItems.map(({ title, className, onClick, disabled }, index: number) => ( - // eslint-disable-next-line react/no-array-index-key {title} diff --git a/code/ui/components/src/components/ErrorFormatter/ErrorFormatter.tsx b/code/ui/components/src/components/ErrorFormatter/ErrorFormatter.tsx index 5204ceb6f9aa..6d02a63aba20 100644 --- a/code/ui/components/src/components/ErrorFormatter/ErrorFormatter.tsx +++ b/code/ui/components/src/components/ErrorFormatter/ErrorFormatter.tsx @@ -66,14 +66,12 @@ export const ErrorFormatter: FC<{ error: Error }> = ({ error }) => {
{lines.map((l, i) => l.name ? ( - // eslint-disable-next-line react/no-array-index-key {' '}at {l.name} ( {l.location})
) : ( - // eslint-disable-next-line react/no-array-index-key {' '}at {l.location}
diff --git a/code/ui/components/src/components/ScrollArea/ScrollArea.stories.tsx b/code/ui/components/src/components/ScrollArea/ScrollArea.stories.tsx index 02734c576641..14d4addb25ca 100644 --- a/code/ui/components/src/components/ScrollArea/ScrollArea.stories.tsx +++ b/code/ui/components/src/components/ScrollArea/ScrollArea.stories.tsx @@ -24,7 +24,6 @@ const Wrapper = styled.div({ const list = (filler: (data: number) => ReactElement) => { const data = []; - // eslint-disable-next-line no-plusplus for (let i = 0; i < 20; i++) { data.push(filler(i)); } diff --git a/code/ui/components/src/components/bar/separator.tsx b/code/ui/components/src/components/bar/separator.tsx index 6a24a11d3386..d0606458d042 100644 --- a/code/ui/components/src/components/bar/separator.tsx +++ b/code/ui/components/src/components/bar/separator.tsx @@ -26,7 +26,7 @@ export const interleaveSeparators = (list: any[]) => item ? ( {acc} - {/* eslint-disable-next-line react/no-array-index-key */} + {} {index > 0 ? : null} {item.render() || item} diff --git a/code/ui/components/src/components/tabs/tabs.stories.tsx b/code/ui/components/src/components/tabs/tabs.stories.tsx index b6a28dbd5119..9b23e884a271 100644 --- a/code/ui/components/src/components/tabs/tabs.stories.tsx +++ b/code/ui/components/src/components/tabs/tabs.stories.tsx @@ -26,7 +26,6 @@ interface FibonacciMap { } function fibonacci(num: number, memo?: FibonacciMap): number { - /* eslint-disable no-param-reassign */ if (!memo) { memo = {}; } @@ -39,7 +38,6 @@ function fibonacci(num: number, memo?: FibonacciMap): number { memo[num] = fibonacci(num - 1, memo) + fibonacci(num - 2, memo); return memo[num]; - /* eslint-enable no-param-reassign */ } type Panels = Record>; diff --git a/code/ui/components/src/components/typography/DocumentFormatting.tsx b/code/ui/components/src/components/typography/DocumentFormatting.tsx index b6dd2892b343..8811b4452a00 100644 --- a/code/ui/components/src/components/typography/DocumentFormatting.tsx +++ b/code/ui/components/src/components/typography/DocumentFormatting.tsx @@ -1,9 +1,8 @@ export const nameSpaceClassNames = ({ ...props }, key: string) => { const classes = [props.class, props.className]; - // eslint-disable-next-line no-param-reassign + delete props.class; - // eslint-disable-next-line no-param-reassign props.className = ['sbdocs', `sbdocs-${key}`, ...classes].filter(Boolean).join(' '); return props; diff --git a/code/ui/components/src/components/utils/getStoryHref.ts b/code/ui/components/src/components/utils/getStoryHref.ts index 3c74b80036e3..335bead96aa3 100644 --- a/code/ui/components/src/components/utils/getStoryHref.ts +++ b/code/ui/components/src/components/utils/getStoryHref.ts @@ -1,7 +1,7 @@ function parseQuery(queryString: string) { const query: Record = {}; const pairs = queryString.split('&'); - // eslint-disable-next-line no-plusplus + for (let i = 0; i < pairs.length; i++) { const pair = pairs[i].split('='); query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || ''); diff --git a/code/ui/components/src/index.ts b/code/ui/components/src/index.ts index 8b38d4731439..f43d08b5d8f5 100644 --- a/code/ui/components/src/index.ts +++ b/code/ui/components/src/index.ts @@ -91,7 +91,6 @@ export { withReset, codeCommon } from './components/typography/lib/common'; export { ClipboardCode } from './components/clipboard/ClipboardCode'; -// eslint-disable-next-line prefer-destructuring export const components = typography.components; const resetComponents: Record = {}; diff --git a/code/ui/manager/scripts/generate-exports-file.ts b/code/ui/manager/scripts/generate-exports-file.ts index ece5ac50391b..f30ae944c0de 100644 --- a/code/ui/manager/scripts/generate-exports-file.ts +++ b/code/ui/manager/scripts/generate-exports-file.ts @@ -1,4 +1,3 @@ -/* eslint-disable no-console */ import fs from 'fs-extra'; import path from 'path'; import { dedent } from 'ts-dedent'; diff --git a/code/ui/manager/src/components/panel/Panel.tsx b/code/ui/manager/src/components/panel/Panel.tsx index 8dd1c2909c2c..e37339445c82 100644 --- a/code/ui/manager/src/components/panel/Panel.tsx +++ b/code/ui/manager/src/components/panel/Panel.tsx @@ -21,7 +21,7 @@ class SafeTab extends Component { componentDidCatch(error: Error, info: any) { this.setState({ hasError: true }); - // eslint-disable-next-line no-console + console.error(error, info); } diff --git a/code/ui/manager/src/components/sidebar/Brand.tsx b/code/ui/manager/src/components/sidebar/Brand.tsx index d73bf2b81c0d..aa093da9ac16 100644 --- a/code/ui/manager/src/components/sidebar/Brand.tsx +++ b/code/ui/manager/src/components/sidebar/Brand.tsx @@ -39,7 +39,7 @@ export const Brand = withTheme(({ theme }) => { // When image is explicitly set to null, enable custom HTML support if (image === null) { if (title === null) return null; - // eslint-disable-next-line react/no-danger + if (!url) return
; return ; } diff --git a/code/ui/manager/src/components/sidebar/Explorer.tsx b/code/ui/manager/src/components/sidebar/Explorer.tsx index 7c268b63c896..5f2e87d9352c 100644 --- a/code/ui/manager/src/components/sidebar/Explorer.tsx +++ b/code/ui/manager/src/components/sidebar/Explorer.tsx @@ -1,7 +1,6 @@ import type { FC } from 'react'; import React, { useRef } from 'react'; -// eslint-disable-next-line import/no-cycle import { Ref } from './Refs'; import type { CombinedDataset, Selection } from './types'; diff --git a/code/ui/manager/src/components/sidebar/Loader.tsx b/code/ui/manager/src/components/sidebar/Loader.tsx index 58ab4e3213c7..8bc9f364d135 100644 --- a/code/ui/manager/src/components/sidebar/Loader.tsx +++ b/code/ui/manager/src/components/sidebar/Loader.tsx @@ -48,7 +48,6 @@ export const Loader: FC = ({ size }) => { return ( {sequence.map((depth, index) => ( - // eslint-disable-next-line react/no-array-index-key ))} diff --git a/code/ui/manager/src/components/sidebar/Refs.tsx b/code/ui/manager/src/components/sidebar/Refs.tsx index 3ce49f5fbfe4..04f90148f7b8 100644 --- a/code/ui/manager/src/components/sidebar/Refs.tsx +++ b/code/ui/manager/src/components/sidebar/Refs.tsx @@ -9,7 +9,6 @@ import { AuthBlock, ErrorBlock, LoaderBlock, EmptyBlock } from './RefBlocks'; import { RefIndicator } from './RefIndicator'; -// eslint-disable-next-line import/no-cycle import { Tree } from './Tree'; import { DEFAULT_REF_ID } from './Sidebar'; diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx index 57966edd6074..32415c056110 100644 --- a/code/ui/manager/src/components/sidebar/Search.tsx +++ b/code/ui/manager/src/components/sidebar/Search.tsx @@ -1,4 +1,3 @@ -/* eslint-disable import/no-cycle */ import { useStorybookApi, shortcutToHumanString } from '@storybook/manager-api'; import { styled } from '@storybook/theming'; import type { DownshiftState, StateChangeOptions } from 'downshift'; diff --git a/code/ui/manager/src/components/sidebar/SearchResults.tsx b/code/ui/manager/src/components/sidebar/SearchResults.tsx index 6a8708656d59..bfbdde53ce34 100644 --- a/code/ui/manager/src/components/sidebar/SearchResults.tsx +++ b/code/ui/manager/src/components/sidebar/SearchResults.tsx @@ -13,7 +13,7 @@ import { TypeIcon } from './TreeNode'; import type { Match, DownshiftItem, SearchResult } from './types'; import { isExpandType } from './types'; import { matchesKeyCode, matchesModifiers } from '../../keybinding'; -// eslint-disable-next-line import/no-cycle + import { statusMapping } from '../../utils/status'; import { UseSymbol } from './IconSymbols'; @@ -212,7 +212,6 @@ const Result: FC< {item.path.map((group, index) => ( - // eslint-disable-next-line react/no-array-index-key match.arrayIndex === index)}> {group} diff --git a/code/ui/manager/src/components/sidebar/Sidebar.tsx b/code/ui/manager/src/components/sidebar/Sidebar.tsx index 180870a6892d..3ea23f6b48a5 100644 --- a/code/ui/manager/src/components/sidebar/Sidebar.tsx +++ b/code/ui/manager/src/components/sidebar/Sidebar.tsx @@ -12,11 +12,10 @@ import type { import type { HeadingProps } from './Heading'; import { Heading } from './Heading'; -// eslint-disable-next-line import/no-cycle import { Explorer } from './Explorer'; -// eslint-disable-next-line import/no-cycle + import { Search } from './Search'; -// eslint-disable-next-line import/no-cycle + import { SearchResults } from './SearchResults'; import type { Refs, CombinedDataset, Selection } from './types'; import { useLastViewed } from './useLastViewed'; diff --git a/code/ui/manager/src/components/sidebar/Tree.tsx b/code/ui/manager/src/components/sidebar/Tree.tsx index 04c46a5b101d..d1a566bddf4c 100644 --- a/code/ui/manager/src/components/sidebar/Tree.tsx +++ b/code/ui/manager/src/components/sidebar/Tree.tsx @@ -18,7 +18,7 @@ import { ExpandAltIcon, CollapseIcon as CollapseIconSvg } from '@storybook/icons import { ComponentNode, DocumentNode, GroupNode, RootNode, StoryNode } from './TreeNode'; import type { ExpandAction, ExpandedState } from './useExpanded'; -// eslint-disable-next-line import/no-cycle + import { useExpanded } from './useExpanded'; import type { Highlight, Item } from './types'; diff --git a/code/ui/manager/src/components/sidebar/useExpanded.ts b/code/ui/manager/src/components/sidebar/useExpanded.ts index 4657c5d3d60c..ba851070e1c2 100644 --- a/code/ui/manager/src/components/sidebar/useExpanded.ts +++ b/code/ui/manager/src/components/sidebar/useExpanded.ts @@ -8,7 +8,6 @@ import { useCallback, useEffect, useReducer } from 'react'; import { matchesKeyCode, matchesModifiers } from '../../keybinding'; import type { Highlight } from './types'; -// eslint-disable-next-line import/no-cycle import { isAncestor, getAncestorIds, getDescendantIds, scrollIntoView } from '../../utils/tree'; const { document } = global; diff --git a/code/ui/manager/src/components/sidebar/useHighlighted.ts b/code/ui/manager/src/components/sidebar/useHighlighted.ts index 8c38358393cb..0010614dce59 100644 --- a/code/ui/manager/src/components/sidebar/useHighlighted.ts +++ b/code/ui/manager/src/components/sidebar/useHighlighted.ts @@ -7,7 +7,6 @@ import { matchesKeyCode, matchesModifiers } from '../../keybinding'; import type { CombinedDataset, Highlight, Selection } from './types'; -// eslint-disable-next-line import/no-cycle import { cycle, isAncestor, scrollIntoView } from '../../utils/tree'; const { document, window: globalWindow } = global; diff --git a/code/ui/manager/src/utils/status.tsx b/code/ui/manager/src/utils/status.tsx index 824b0ab21042..c5ab041663fd 100644 --- a/code/ui/manager/src/utils/status.tsx +++ b/code/ui/manager/src/utils/status.tsx @@ -4,7 +4,7 @@ import type { ReactElement } from 'react'; import type { API_HashEntry, API_StatusState, API_StatusValue } from '@storybook/types'; import { styled } from '@storybook/theming'; -// eslint-disable-next-line import/no-cycle + import { getDescendantIds } from './tree'; const SmallIcons = styled(Icons)({ diff --git a/code/ui/manager/src/utils/tree.ts b/code/ui/manager/src/utils/tree.ts index b51fc84f630a..f2307d78d4a9 100644 --- a/code/ui/manager/src/utils/tree.ts +++ b/code/ui/manager/src/utils/tree.ts @@ -3,7 +3,6 @@ import { global } from '@storybook/global'; import type { SyntheticEvent } from 'react'; import type { HashEntry, IndexHash } from '@storybook/manager-api'; -// eslint-disable-next-line import/no-cycle import { DEFAULT_REF_ID } from '../components/sidebar/Sidebar'; import type { Item, RefType, Dataset, SearchItem } from '../components/sidebar/types'; diff --git a/package.json b/package.json index e0a68082ebda..c770aa307522 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "name": "@storybook/root", + "type": "module", "scripts": { "ci-tests": "cd code; yarn ci-tests", "get-report-message": "cd scripts; yarn get-report-message", From 33cfa64d2c652f01225d6fd7ffd6aff9e4eaaf1b Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 15 Jan 2024 13:45:06 +0100 Subject: [PATCH 39/61] ensure single version of monorepo packages --- code/package.json | 6 ++ code/yarn.lock | 159 ++++------------------------------------------ 2 files changed, 18 insertions(+), 147 deletions(-) diff --git a/code/package.json b/code/package.json index 348a98b46b54..43f3782f3de4 100644 --- a/code/package.json +++ b/code/package.json @@ -77,6 +77,12 @@ ], "resolutions": { "@playwright/test": "1.36.0", + "@storybook/client-logger": "workspace:*", + "@storybook/core-events": "workspace:*", + "@storybook/instrumenter": "workspace:*", + "@storybook/preview-api": "workspace:*", + "@storybook/test": "workspace:*", + "@storybook/types": "workspace:*", "@typescript-eslint/eslint-plugin": "^5.45.0", "@typescript-eslint/experimental-utils": "^5.45.0", "@typescript-eslint/parser": "^5.45.0", diff --git a/code/yarn.lock b/code/yarn.lock index f15fc86d7aad..49cf78c86a07 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5320,20 +5320,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/channels@npm:8.0.0-alpha.9": - version: 8.0.0-alpha.9 - resolution: "@storybook/channels@npm:8.0.0-alpha.9" - dependencies: - "@storybook/client-logger": "npm:8.0.0-alpha.9" - "@storybook/core-events": "npm:8.0.0-alpha.9" - "@storybook/global": "npm:^5.0.0" - qs: "npm:^6.10.0" - telejson: "npm:^7.2.0" - tiny-invariant: "npm:^1.3.1" - checksum: c7465f1d48e0be63f855849c71828906f6f3420411e17a02bebfab441b195c59c12ddbcf8da8a2d630941758b54ca4db1d2ab7850c922ceec394c8264afaf134 - languageName: node - linkType: hard - "@storybook/channels@workspace:*, @storybook/channels@workspace:lib/channels": version: 0.0.0-use.local resolution: "@storybook/channels@workspace:lib/channels" @@ -5402,24 +5388,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/client-logger@npm:7.5.0": - version: 7.5.0 - resolution: "@storybook/client-logger@npm:7.5.0" - dependencies: - "@storybook/global": "npm:^5.0.0" - checksum: 90326c49a224bf21680c04ffee94725bf75658086093ccb839a8aae39476929c4719eafb18e498a148cf0dd956d4e9a5d3b2a34d09ca4fd25e2af553458558ac - languageName: node - linkType: hard - -"@storybook/client-logger@npm:8.0.0-alpha.9": - version: 8.0.0-alpha.9 - resolution: "@storybook/client-logger@npm:8.0.0-alpha.9" - dependencies: - "@storybook/global": "npm:^5.0.0" - checksum: bc0527a186d901434ea5e5b1807b56288f74c66ff43ea355762bb643f8e257e9b80be94d60f196178b1019abae2baf5c50d4ffd010ec44ec9c8349abc352bf78 - languageName: node - linkType: hard - "@storybook/client-logger@workspace:*, @storybook/client-logger@workspace:lib/client-logger": version: 0.0.0-use.local resolution: "@storybook/client-logger@workspace:lib/client-logger" @@ -5534,15 +5502,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/core-events@npm:8.0.0-alpha.9": - version: 8.0.0-alpha.9 - resolution: "@storybook/core-events@npm:8.0.0-alpha.9" - dependencies: - ts-dedent: "npm:^2.0.0" - checksum: 8868baf90e7f5124966d762a69e06678988105b292b9093d74d2ecd5489cbdad6bc421be19b28b75e9e446074f1ef4fc4ee699ad896ed78bbe99ae0e94cfa416 - languageName: node - linkType: hard - "@storybook/core-events@workspace:*, @storybook/core-events@workspace:lib/core-events": version: 0.0.0-use.local resolution: "@storybook/core-events@workspace:lib/core-events" @@ -5817,21 +5776,6 @@ __metadata: languageName: node linkType: hard -"@storybook/instrumenter@npm:8.0.0-alpha.9": - version: 8.0.0-alpha.9 - resolution: "@storybook/instrumenter@npm:8.0.0-alpha.9" - dependencies: - "@storybook/channels": "npm:8.0.0-alpha.9" - "@storybook/client-logger": "npm:8.0.0-alpha.9" - "@storybook/core-events": "npm:8.0.0-alpha.9" - "@storybook/global": "npm:^5.0.0" - "@storybook/preview-api": "npm:8.0.0-alpha.9" - "@vitest/utils": "npm:^0.34.6" - util: "npm:^0.12.4" - checksum: 2c1e8953a5e178bb9631878a233623f7df637164bd72d76987431926e81bb3ca6eda71ed1aeda9f21675103c6c5b7e9fba1d3d9a3dd283a821bb11aeea17ac1d - languageName: node - linkType: hard - "@storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter": version: 0.0.0-use.local resolution: "@storybook/instrumenter@workspace:lib/instrumenter" @@ -6203,27 +6147,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/preview-api@npm:8.0.0-alpha.9": - version: 8.0.0-alpha.9 - resolution: "@storybook/preview-api@npm:8.0.0-alpha.9" - dependencies: - "@storybook/channels": "npm:8.0.0-alpha.9" - "@storybook/client-logger": "npm:8.0.0-alpha.9" - "@storybook/core-events": "npm:8.0.0-alpha.9" - "@storybook/csf": "npm:^0.1.2" - "@storybook/global": "npm:^5.0.0" - "@storybook/types": "npm:8.0.0-alpha.9" - "@types/qs": "npm:^6.9.5" - dequal: "npm:^2.0.2" - lodash: "npm:^4.17.21" - memoizerific: "npm:^1.11.3" - qs: "npm:^6.10.0" - ts-dedent: "npm:^2.0.0" - util-deprecate: "npm:^1.0.2" - checksum: 8a911b9d937e5f458fa4f51cda4abf6c3575c11c03bb17f4ca726aa940badcf41ea801bfc947120e440f07a8d3b54a4f14cb1afca94961d28aaec52f5129b072 - languageName: node - linkType: hard - "@storybook/preview-api@workspace:*, @storybook/preview-api@workspace:lib/preview-api": version: 0.0.0-use.local resolution: "@storybook/preview-api@workspace:lib/preview-api" @@ -6694,26 +6617,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/test@npm:next": - version: 8.0.0-alpha.9 - resolution: "@storybook/test@npm:8.0.0-alpha.9" - dependencies: - "@storybook/client-logger": "npm:8.0.0-alpha.9" - "@storybook/core-events": "npm:8.0.0-alpha.9" - "@storybook/instrumenter": "npm:8.0.0-alpha.9" - "@storybook/preview-api": "npm:8.0.0-alpha.9" - "@testing-library/dom": "npm:^9.3.1" - "@testing-library/jest-dom": "npm:^6.1.3" - "@testing-library/user-event": "npm:14.3.0" - "@types/chai": "npm:^4" - "@vitest/expect": "npm:^0.34.2" - "@vitest/spy": "npm:^0.34.1" - chai: "npm:^4.3.7" - util: "npm:^0.12.4" - checksum: c5184a0a869f9849d9ef0f02e1c6c79de16b5534746d662355278a6c8bd0f97df3a35e17e5f2c9ba3789b1fae8f8a215f6a88479005ef443275feb653b005498 - languageName: node - linkType: hard - "@storybook/test@workspace:*, @storybook/test@workspace:lib/test": version: 0.0.0-use.local resolution: "@storybook/test@workspace:lib/test" @@ -6786,17 +6689,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/types@npm:8.0.0-alpha.9": - version: 8.0.0-alpha.9 - resolution: "@storybook/types@npm:8.0.0-alpha.9" - dependencies: - "@storybook/channels": "npm:8.0.0-alpha.9" - "@types/express": "npm:^4.7.0" - file-system-cache: "npm:2.3.0" - checksum: c40518716905b046b176f9f7ff34748e4561cc669039f02fd15841f1d4320089d3734a41532ea4551ed3b0b18c7900a10b9330e182e07e23325781d5400a8f78 - languageName: node - linkType: hard - "@storybook/types@workspace:*, @storybook/types@workspace:lib/types": version: 0.0.0-use.local resolution: "@storybook/types@workspace:lib/types" @@ -7253,13 +7145,6 @@ __metadata: languageName: node linkType: hard -"@types/chai@npm:^4": - version: 4.3.11 - resolution: "@types/chai@npm:4.3.11" - checksum: 0c216ac4a19bfbf8318bb104d32e50704ee2ffc4b538b976c4326e6638fee121462402caa570662227a2a218810388aadb14bdbd3d3d474ec300b00695db448a - languageName: node - linkType: hard - "@types/color-convert@npm:^2.0.0": version: 2.0.3 resolution: "@types/color-convert@npm:2.0.3" @@ -8444,17 +8329,6 @@ __metadata: languageName: node linkType: hard -"@vitest/expect@npm:^0.34.2": - version: 0.34.7 - resolution: "@vitest/expect@npm:0.34.7" - dependencies: - "@vitest/spy": "npm:0.34.7" - "@vitest/utils": "npm:0.34.7" - chai: "npm:^4.3.10" - checksum: 3ce5b63a51a8c5f585d21768c1dc48dbedbb83b01a6bad07a27db809b53d4e21cfdd059f23815ad8374dfd010e75e279ea0baa7b0fd2bdeffed8afeb53d326ee - languageName: node - linkType: hard - "@vitest/expect@patch:@vitest/expect@npm%3A1.1.3#~/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch": version: 1.1.3 resolution: "@vitest/expect@patch:@vitest/expect@npm%3A1.1.3#~/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch::version=1.1.3&hash=5d51c9" @@ -8488,15 +8362,6 @@ __metadata: languageName: node linkType: hard -"@vitest/spy@npm:0.34.7, @vitest/spy@npm:^0.34.1": - version: 0.34.7 - resolution: "@vitest/spy@npm:0.34.7" - dependencies: - tinyspy: "npm:^2.1.1" - checksum: 1150b270eb72a5e8e7da997bcba90ebe5ed2ac50de1ea1f81738e16a19ab4bc77ca4d17639988df65695d4b325fe3647a1e4204d01024bcf5ecac8ba7764a2cc - languageName: node - linkType: hard - "@vitest/spy@npm:1.0.4": version: 1.0.4 resolution: "@vitest/spy@npm:1.0.4" @@ -8515,17 +8380,6 @@ __metadata: languageName: node linkType: hard -"@vitest/utils@npm:0.34.7, @vitest/utils@npm:^0.34.6": - version: 0.34.7 - resolution: "@vitest/utils@npm:0.34.7" - dependencies: - diff-sequences: "npm:^29.4.3" - loupe: "npm:^2.3.6" - pretty-format: "npm:^29.5.0" - checksum: 5f26ec5b4a53709a50efdb57aa753e8090b3411e888774f67a0d192eb7f046ed5fcc6884eb3d6275d2674926e724b731e8d28cd3cea96a7f3d27462a0d44af9e - languageName: node - linkType: hard - "@vitest/utils@npm:1.0.4": version: 1.0.4 resolution: "@vitest/utils@npm:1.0.4" @@ -8549,6 +8403,17 @@ __metadata: languageName: node linkType: hard +"@vitest/utils@npm:^0.34.6": + version: 0.34.7 + resolution: "@vitest/utils@npm:0.34.7" + dependencies: + diff-sequences: "npm:^29.4.3" + loupe: "npm:^2.3.6" + pretty-format: "npm:^29.5.0" + checksum: 5f26ec5b4a53709a50efdb57aa753e8090b3411e888774f67a0d192eb7f046ed5fcc6884eb3d6275d2674926e724b731e8d28cd3cea96a7f3d27462a0d44af9e + languageName: node + linkType: hard + "@volar/language-core@npm:1.10.1, @volar/language-core@npm:~1.10.0": version: 1.10.1 resolution: "@volar/language-core@npm:1.10.1" @@ -27010,7 +26875,7 @@ __metadata: languageName: node linkType: hard -"tinyspy@npm:^2.1.1, tinyspy@npm:^2.2.0": +"tinyspy@npm:^2.2.0": version: 2.2.0 resolution: "tinyspy@npm:2.2.0" checksum: 8c7b70748dd8590e85d52741db79243746c15bc03c92d75c23160a762142db577e7f53e360ba7300e321b12bca5c42dd2522a8dbeec6ba3830302573dd8516bc From 7bb384b099e35d5b97b2d4294609765406c794f0 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 15 Jan 2024 14:05:14 +0100 Subject: [PATCH 40/61] Update yarn.lock --- code/yarn.lock | 87 +++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 83 insertions(+), 4 deletions(-) diff --git a/code/yarn.lock b/code/yarn.lock index 0da80455d7cc..f15fc86d7aad 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5320,6 +5320,20 @@ __metadata: languageName: unknown linkType: soft +"@storybook/channels@npm:8.0.0-alpha.9": + version: 8.0.0-alpha.9 + resolution: "@storybook/channels@npm:8.0.0-alpha.9" + dependencies: + "@storybook/client-logger": "npm:8.0.0-alpha.9" + "@storybook/core-events": "npm:8.0.0-alpha.9" + "@storybook/global": "npm:^5.0.0" + qs: "npm:^6.10.0" + telejson: "npm:^7.2.0" + tiny-invariant: "npm:^1.3.1" + checksum: c7465f1d48e0be63f855849c71828906f6f3420411e17a02bebfab441b195c59c12ddbcf8da8a2d630941758b54ca4db1d2ab7850c922ceec394c8264afaf134 + languageName: node + linkType: hard + "@storybook/channels@workspace:*, @storybook/channels@workspace:lib/channels": version: 0.0.0-use.local resolution: "@storybook/channels@workspace:lib/channels" @@ -5397,7 +5411,16 @@ __metadata: languageName: node linkType: hard -"@storybook/client-logger@npm:8.0.0-alpha.9, @storybook/client-logger@workspace:*, @storybook/client-logger@workspace:lib/client-logger": +"@storybook/client-logger@npm:8.0.0-alpha.9": + version: 8.0.0-alpha.9 + resolution: "@storybook/client-logger@npm:8.0.0-alpha.9" + dependencies: + "@storybook/global": "npm:^5.0.0" + checksum: bc0527a186d901434ea5e5b1807b56288f74c66ff43ea355762bb643f8e257e9b80be94d60f196178b1019abae2baf5c50d4ffd010ec44ec9c8349abc352bf78 + languageName: node + linkType: hard + +"@storybook/client-logger@workspace:*, @storybook/client-logger@workspace:lib/client-logger": version: 0.0.0-use.local resolution: "@storybook/client-logger@workspace:lib/client-logger" dependencies: @@ -5511,7 +5534,16 @@ __metadata: languageName: unknown linkType: soft -"@storybook/core-events@npm:8.0.0-alpha.9, @storybook/core-events@workspace:*, @storybook/core-events@workspace:lib/core-events": +"@storybook/core-events@npm:8.0.0-alpha.9": + version: 8.0.0-alpha.9 + resolution: "@storybook/core-events@npm:8.0.0-alpha.9" + dependencies: + ts-dedent: "npm:^2.0.0" + checksum: 8868baf90e7f5124966d762a69e06678988105b292b9093d74d2ecd5489cbdad6bc421be19b28b75e9e446074f1ef4fc4ee699ad896ed78bbe99ae0e94cfa416 + languageName: node + linkType: hard + +"@storybook/core-events@workspace:*, @storybook/core-events@workspace:lib/core-events": version: 0.0.0-use.local resolution: "@storybook/core-events@workspace:lib/core-events" dependencies: @@ -5785,7 +5817,22 @@ __metadata: languageName: node linkType: hard -"@storybook/instrumenter@npm:8.0.0-alpha.9, @storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter": +"@storybook/instrumenter@npm:8.0.0-alpha.9": + version: 8.0.0-alpha.9 + resolution: "@storybook/instrumenter@npm:8.0.0-alpha.9" + dependencies: + "@storybook/channels": "npm:8.0.0-alpha.9" + "@storybook/client-logger": "npm:8.0.0-alpha.9" + "@storybook/core-events": "npm:8.0.0-alpha.9" + "@storybook/global": "npm:^5.0.0" + "@storybook/preview-api": "npm:8.0.0-alpha.9" + "@vitest/utils": "npm:^0.34.6" + util: "npm:^0.12.4" + checksum: 2c1e8953a5e178bb9631878a233623f7df637164bd72d76987431926e81bb3ca6eda71ed1aeda9f21675103c6c5b7e9fba1d3d9a3dd283a821bb11aeea17ac1d + languageName: node + linkType: hard + +"@storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter": version: 0.0.0-use.local resolution: "@storybook/instrumenter@workspace:lib/instrumenter" dependencies: @@ -6156,7 +6203,28 @@ __metadata: languageName: unknown linkType: soft -"@storybook/preview-api@npm:8.0.0-alpha.9, @storybook/preview-api@workspace:*, @storybook/preview-api@workspace:lib/preview-api": +"@storybook/preview-api@npm:8.0.0-alpha.9": + version: 8.0.0-alpha.9 + resolution: "@storybook/preview-api@npm:8.0.0-alpha.9" + dependencies: + "@storybook/channels": "npm:8.0.0-alpha.9" + "@storybook/client-logger": "npm:8.0.0-alpha.9" + "@storybook/core-events": "npm:8.0.0-alpha.9" + "@storybook/csf": "npm:^0.1.2" + "@storybook/global": "npm:^5.0.0" + "@storybook/types": "npm:8.0.0-alpha.9" + "@types/qs": "npm:^6.9.5" + dequal: "npm:^2.0.2" + lodash: "npm:^4.17.21" + memoizerific: "npm:^1.11.3" + qs: "npm:^6.10.0" + ts-dedent: "npm:^2.0.0" + util-deprecate: "npm:^1.0.2" + checksum: 8a911b9d937e5f458fa4f51cda4abf6c3575c11c03bb17f4ca726aa940badcf41ea801bfc947120e440f07a8d3b54a4f14cb1afca94961d28aaec52f5129b072 + languageName: node + linkType: hard + +"@storybook/preview-api@workspace:*, @storybook/preview-api@workspace:lib/preview-api": version: 0.0.0-use.local resolution: "@storybook/preview-api@workspace:lib/preview-api" dependencies: @@ -6718,6 +6786,17 @@ __metadata: languageName: unknown linkType: soft +"@storybook/types@npm:8.0.0-alpha.9": + version: 8.0.0-alpha.9 + resolution: "@storybook/types@npm:8.0.0-alpha.9" + dependencies: + "@storybook/channels": "npm:8.0.0-alpha.9" + "@types/express": "npm:^4.7.0" + file-system-cache: "npm:2.3.0" + checksum: c40518716905b046b176f9f7ff34748e4561cc669039f02fd15841f1d4320089d3734a41532ea4551ed3b0b18c7900a10b9330e182e07e23325781d5400a8f78 + languageName: node + linkType: hard + "@storybook/types@workspace:*, @storybook/types@workspace:lib/types": version: 0.0.0-use.local resolution: "@storybook/types@workspace:lib/types" From 036235b74ddfda141372ce2c99ff486e24a1eca3 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 15 Jan 2024 14:55:34 +0100 Subject: [PATCH 41/61] simplify isCanary --- code/lib/cli/src/upgrade.ts | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/code/lib/cli/src/upgrade.ts b/code/lib/cli/src/upgrade.ts index 23876f933403..29115c4244cf 100644 --- a/code/lib/cli/src/upgrade.ts +++ b/code/lib/cli/src/upgrade.ts @@ -1,6 +1,6 @@ import { sync as spawnSync } from 'cross-spawn'; import { telemetry, getStorybookCoreVersion } from '@storybook/telemetry'; -import semver, { eq, lt, parse, prerelease } from 'semver'; +import semver, { eq, lt, prerelease } from 'semver'; import { logger } from '@storybook/node-logger'; import { withTelemetry } from '@storybook/core-server'; import { @@ -112,12 +112,7 @@ export const doUpgrade = async ({ const beforeVersion = await getStorybookCoreVersion(); const currentVersion = versions['@storybook/cli']; - const currentSemver = parse(currentVersion); - const isCanary = - currentSemver && - currentSemver.major === 0 && - currentSemver.minor === 0 && - currentSemver.patch === 0; + const isCanary = currentVersion.startsWith('0.0.0'); if (!isCanary && lt(currentVersion, beforeVersion)) { throw new UpgradeStorybookToLowerVersionError({ beforeVersion, currentVersion }); From c897845f99e00253696f1bbb09d8d7adfb19edd4 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 15 Jan 2024 16:39:12 +0100 Subject: [PATCH 42/61] init when download-dir = before-storybook --- code/lib/cli/src/sandbox.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/sandbox.ts b/code/lib/cli/src/sandbox.ts index 0ba72861cb13..5cf2b09bb049 100644 --- a/code/lib/cli/src/sandbox.ts +++ b/code/lib/cli/src/sandbox.ts @@ -218,7 +218,7 @@ export const sandbox = async ( // this is to ensure we DO get the latest version of the template (output of the generator), but we initialize using the version of storybook that the CLI is. // we warned the user about the fact they are running an old version of storybook // we warned the user the sandbox step would take longer - if ((isOutdated || isPrerelease) && init) { + if (downloadType === 'before-storybook' && init) { const before = process.cwd(); process.chdir(templateDestination); // we run doInitiate, instead of initiate, to avoid sending this init event to telemetry, because it's not a real world project From 8176beefcbf92e8bbafe2720113bc597fbd78328 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 15 Jan 2024 17:58:44 +0100 Subject: [PATCH 43/61] Use v4.0.0 of eslint packages --- code/package.json | 5 ++--- code/yarn.lock | 24 +++++++++++++----------- scripts/package.json | 5 ++--- scripts/yarn.lock | 24 +++++++++++++----------- 4 files changed, 30 insertions(+), 28 deletions(-) diff --git a/code/package.json b/code/package.json index f8240f825464..0953df4953cd 100644 --- a/code/package.json +++ b/code/package.json @@ -77,7 +77,6 @@ ], "resolutions": { "@playwright/test": "1.36.0", - "@storybook/linter-config": "portal:/Users/kasperpeulen/code/storybook/linter-config", "@vitest/expect@1.1.3": "patch:@vitest/expect@npm%3A1.1.3#~/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch", "esbuild": "^0.18.0", "playwright": "1.36.0", @@ -124,14 +123,14 @@ "@storybook/csf-tools": "workspace:*", "@storybook/docs-tools": "workspace:*", "@storybook/ember": "workspace:*", - "@storybook/eslint-config-storybook": "^3.1.2", + "@storybook/eslint-config-storybook": "^4.0.0", "@storybook/global": "^5.0.0", "@storybook/html": "workspace:*", "@storybook/html-vite": "workspace:*", "@storybook/html-webpack5": "workspace:*", "@storybook/instrumenter": "workspace:*", "@storybook/jest": "next", - "@storybook/linter-config": "^3.1.2", + "@storybook/linter-config": "^4.0.0", "@storybook/manager": "workspace:*", "@storybook/manager-api": "workspace:*", "@storybook/nextjs": "workspace:*", diff --git a/code/yarn.lock b/code/yarn.lock index fd171c52ef79..3b2456e35c0e 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5812,12 +5812,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/eslint-config-storybook@npm:^3.1.2": - version: 3.1.2 - resolution: "@storybook/eslint-config-storybook@npm:3.1.2" +"@storybook/eslint-config-storybook@npm:^4.0.0": + version: 4.0.0 + resolution: "@storybook/eslint-config-storybook@npm:4.0.0" dependencies: - "@storybook/linter-config": "npm:3.1.2" - checksum: dc366d302702aa2cfaaaa2c49d361d53355adb8ff59c3f77021c338ab830899b47f4c44f67565628de7a8dfabda5f84c8d8585f3faab97d5098bc4d87fa4802d + "@storybook/linter-config": "npm:4.0.0" + checksum: 03378991e3db17f8ce7dbbe7f29aa5c6b623c1bed35d6ea0fbc7fb73b66b1497fe4793331dacd2de73da7f256751d691104bd51ce20d619d60951ce68837acde languageName: node linkType: hard @@ -5915,11 +5915,12 @@ __metadata: languageName: node linkType: hard -"@storybook/linter-config@portal:/Users/kasperpeulen/code/storybook/linter-config::locator=%40storybook%2Froot%40workspace%3A.": - version: 0.0.0-use.local - resolution: "@storybook/linter-config@portal:/Users/kasperpeulen/code/storybook/linter-config::locator=%40storybook%2Froot%40workspace%3A." +"@storybook/linter-config@npm:4.0.0, @storybook/linter-config@npm:^4.0.0": + version: 4.0.0 + resolution: "@storybook/linter-config@npm:4.0.0" dependencies: "@typescript-eslint/eslint-plugin": "npm:^6.18.1" + "@typescript-eslint/parser": "npm:^6.18.1" eslint-config-airbnb-typescript: "npm:^17.1.0" eslint-config-prettier: "npm:^9.1.0" eslint-plugin-eslint-comments: "npm:^3.2.0" @@ -5937,8 +5938,9 @@ __metadata: remark-preset-lint-recommended: "npm:^6.1.3" peerDependencies: remark: ^14.0.0 || ^15.0.0 + checksum: 1de4e64a80932a529737e95c0604f8781d96aae60d86d448d6e1a612ff382124df552cf750a02bb4900a303e7ca51e08bc922d8d196ec1590c6e2360fa9e1391 languageName: node - linkType: soft + linkType: hard "@storybook/manager-api@workspace:*, @storybook/manager-api@workspace:lib/manager-api": version: 0.0.0-use.local @@ -6458,14 +6460,14 @@ __metadata: "@storybook/csf-tools": "workspace:*" "@storybook/docs-tools": "workspace:*" "@storybook/ember": "workspace:*" - "@storybook/eslint-config-storybook": "npm:^3.1.2" + "@storybook/eslint-config-storybook": "npm:^4.0.0" "@storybook/global": "npm:^5.0.0" "@storybook/html": "workspace:*" "@storybook/html-vite": "workspace:*" "@storybook/html-webpack5": "workspace:*" "@storybook/instrumenter": "workspace:*" "@storybook/jest": "npm:next" - "@storybook/linter-config": "npm:^3.1.2" + "@storybook/linter-config": "npm:^4.0.0" "@storybook/manager": "workspace:*" "@storybook/manager-api": "workspace:*" "@storybook/nextjs": "workspace:*" diff --git a/scripts/package.json b/scripts/package.json index db8cfddd9eb4..0742f1f0f4f4 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -54,7 +54,6 @@ ] }, "resolutions": { - "@storybook/linter-config": "portal:/Users/kasperpeulen/code/storybook/linter-config", "@testing-library/jest-dom": "^5.11.9", "esbuild": "^0.18.0", "serialize-javascript": "^3.1.0", @@ -77,9 +76,9 @@ "@nx/workspace": "17.0.2", "@octokit/graphql": "^5.0.5", "@octokit/request": "^8.1.2", - "@storybook/eslint-config-storybook": "^3.1.2", + "@storybook/eslint-config-storybook": "^4.0.0", "@storybook/jest": "next", - "@storybook/linter-config": "^3.1.2", + "@storybook/linter-config": "^4.0.0", "@storybook/testing-library": "next", "@testing-library/dom": "^9.3.0", "@testing-library/jest-dom": "^5.11.9", diff --git a/scripts/yarn.lock b/scripts/yarn.lock index 1a3585b3cd4f..dc28816721ba 100644 --- a/scripts/yarn.lock +++ b/scripts/yarn.lock @@ -2821,12 +2821,12 @@ __metadata: languageName: node linkType: hard -"@storybook/eslint-config-storybook@npm:^3.1.2": - version: 3.1.2 - resolution: "@storybook/eslint-config-storybook@npm:3.1.2" +"@storybook/eslint-config-storybook@npm:^4.0.0": + version: 4.0.0 + resolution: "@storybook/eslint-config-storybook@npm:4.0.0" dependencies: - "@storybook/linter-config": "npm:3.1.2" - checksum: dc366d302702aa2cfaaaa2c49d361d53355adb8ff59c3f77021c338ab830899b47f4c44f67565628de7a8dfabda5f84c8d8585f3faab97d5098bc4d87fa4802d + "@storybook/linter-config": "npm:4.0.0" + checksum: 03378991e3db17f8ce7dbbe7f29aa5c6b623c1bed35d6ea0fbc7fb73b66b1497fe4793331dacd2de73da7f256751d691104bd51ce20d619d60951ce68837acde languageName: node linkType: hard @@ -2851,11 +2851,12 @@ __metadata: languageName: node linkType: hard -"@storybook/linter-config@portal:/Users/kasperpeulen/code/storybook/linter-config::locator=%40storybook%2Fscripts%40workspace%3A.": - version: 0.0.0-use.local - resolution: "@storybook/linter-config@portal:/Users/kasperpeulen/code/storybook/linter-config::locator=%40storybook%2Fscripts%40workspace%3A." +"@storybook/linter-config@npm:4.0.0, @storybook/linter-config@npm:^4.0.0": + version: 4.0.0 + resolution: "@storybook/linter-config@npm:4.0.0" dependencies: "@typescript-eslint/eslint-plugin": "npm:^6.18.1" + "@typescript-eslint/parser": "npm:^6.18.1" eslint-config-airbnb-typescript: "npm:^17.1.0" eslint-config-prettier: "npm:^9.1.0" eslint-plugin-eslint-comments: "npm:^3.2.0" @@ -2873,8 +2874,9 @@ __metadata: remark-preset-lint-recommended: "npm:^6.1.3" peerDependencies: remark: ^14.0.0 || ^15.0.0 + checksum: 1de4e64a80932a529737e95c0604f8781d96aae60d86d448d6e1a612ff382124df552cf750a02bb4900a303e7ca51e08bc922d8d196ec1590c6e2360fa9e1391 languageName: node - linkType: soft + linkType: hard "@storybook/scripts@workspace:.": version: 0.0.0-use.local @@ -2896,9 +2898,9 @@ __metadata: "@nx/workspace": "npm:17.0.2" "@octokit/graphql": "npm:^5.0.5" "@octokit/request": "npm:^8.1.2" - "@storybook/eslint-config-storybook": "npm:^3.1.2" + "@storybook/eslint-config-storybook": "npm:^4.0.0" "@storybook/jest": "npm:next" - "@storybook/linter-config": "npm:^3.1.2" + "@storybook/linter-config": "npm:^4.0.0" "@storybook/testing-library": "npm:next" "@testing-library/dom": "npm:^9.3.0" "@testing-library/jest-dom": "npm:^5.11.9" From 7abbd42b3f31d7269898ead467e53844eab499d1 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 15 Jan 2024 21:29:35 +0100 Subject: [PATCH 44/61] Remove deprecated `config` preset and update `previewAnnotations` --- MIGRATION.md | 59 +++++++++++++++---- .../core-server/src/presets/common-preset.ts | 12 ---- code/lib/types/src/modules/core-common.ts | 9 --- 3 files changed, 47 insertions(+), 33 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 670f89c77ac8..4689f4627bb5 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -42,6 +42,7 @@ - [Web Components](#web-components) - [Dropping default babel plugins in Webpack5-based projects](#dropping-default-babel-plugins-in-webpack5-based-projects) - [Deprecations which are now removed](#deprecations-which-are-now-removed) + - [Removed `config` preset](#removed-config-preset) - [Removed `passArgsFirst` option](#removed-passargsfirst-option) - [Methods and properties from AddonStore](#methods-and-properties-from-addonstore) - [Methods and properties from PreviewAPI](#methods-and-properties-from-previewapi) @@ -65,18 +66,20 @@ - [`Primary` Doc block properties](#primary-doc-block-properties) - [`createChannel` from `@storybook/postmessage` and `@storybook/channel-websocket`](#createchannel-from-storybookpostmessage-and-storybookchannel-websocket) - [StoryStore and methods deprecated](#storystore-and-methods-deprecated) + - [Addon author changes](#addon-author-changes) + - [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) @@ -102,7 +105,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) @@ -115,7 +118,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) @@ -165,7 +168,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) @@ -800,6 +803,23 @@ Until the 8.0 release, Storybook provided the `@babel/preset-env` preset for Web ### Deprecations which are now removed +#### Removed `config` preset + +In Storybook 7.0 we have deprecated the preset field `config` and it has been replaced with 'previewAnnotations'. The `config` preset is now completely removed in Storybook 8.0. + +```diff +// .storybook/main.js + +// before +const config = { + framework: "@storybook/your-framework", +- config: (entries) => [...entries, yourEntry], ++ previewAnnotations: (entries) => [...entries, yourEntry], +}; + +export default config; +``` + #### Removed `passArgsFirst` option Since Storybook 6, we have had an option called `parameters.passArgsFirst` (default=`true`), which sallows you to pass the context to the story function first when set to `false.` We have removed this option. In Storybook 8.0, the args are always passed first, and as a second argument, the context is passed. @@ -1012,6 +1032,21 @@ In particular, the following methods on the `StoryStore` are deprecated and will Note that both these methods require initialization, so you should await `preview.ready()`. +### Addon author changes + +#### Removed `config` preset + +In Storybook 7.0 we have deprecated the preset field `config` and it has been replaced with `previewAnnotations`. The `config` preset is now completely removed in Storybook 8.0. + +```diff +// your-addon/preset.js + +module.exports = { +- config: (entries = []) => [...entries, ...yourEntry], ++ previewAnnotations: (entries = []) => [...entries, ...yourEntry], +}; +``` + ## From version 7.5.0 to 7.6.0 #### CommonJS with Vite is deprecated diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts index 15fb3bfceb26..aa349043eb4d 100644 --- a/code/lib/core-server/src/presets/common-preset.ts +++ b/code/lib/core-server/src/presets/common-preset.ts @@ -173,18 +173,6 @@ export const core = async (existing: CoreConfig, options: Options): Promise { - const config = await options.presets.apply('config', [], options); - - if (config.length > 0) { - deprecate( - `You (or an addon) are using the 'config' preset field. This has been replaced by 'previewAnnotations' and will be removed in 8.0` - ); - } - - return [...config, ...base]; -}; - export const features: PresetProperty<'features'> = async (existing) => ({ ...existing, argTypeTargetsV7: true, diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts index 377081831972..ae6921115ec8 100644 --- a/code/lib/types/src/modules/core-common.ts +++ b/code/lib/types/src/modules/core-common.ts @@ -398,8 +398,6 @@ export interface StorybookConfigRaw { // We cannot use a particular Babel type here because we need to support a variety of versions babelDefault?: any; - config?: Entry[]; - previewAnnotations?: Entry[]; experimental_indexers?: Indexer[]; @@ -483,13 +481,6 @@ export interface StorybookConfig { */ babelDefault?: PresetValue; - /** - * Add additional scripts to run in the preview a la `.storybook/preview.js` - * - * @deprecated use `previewAnnotations` or `/preview.js` file instead - */ - config?: PresetValue; - /** * Add additional scripts to run in the preview a la `.storybook/preview.js` */ From a53c320fb2e057a7a520712270ba1cb364d7292b Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 16 Jan 2024 15:36:24 +0800 Subject: [PATCH 45/61] CSF-tools: Optimize storySort handling --- code/lib/csf-tools/src/getStorySortParameter.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/code/lib/csf-tools/src/getStorySortParameter.ts b/code/lib/csf-tools/src/getStorySortParameter.ts index 70d323d4edd6..26b4ee3325b5 100644 --- a/code/lib/csf-tools/src/getStorySortParameter.ts +++ b/code/lib/csf-tools/src/getStorySortParameter.ts @@ -98,6 +98,9 @@ const parseDefault = (defaultExpr: t.Expression, program: t.Program): t.Expressi }; export const getStorySortParameter = (previewCode: string) => { + // don't even try to process the file + if (!previewCode.includes('storySort')) return undefined; + let storySort: t.Expression | undefined; const ast = babelParse(previewCode); traverse.default(ast, { From 167ce756d2ebf6aadf44341c596322ce35f31c84 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 16 Jan 2024 09:17:18 +0100 Subject: [PATCH 46/61] Remove unused import --- code/lib/core-server/src/presets/common-preset.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts index aa349043eb4d..db67ca08bb47 100644 --- a/code/lib/core-server/src/presets/common-preset.ts +++ b/code/lib/core-server/src/presets/common-preset.ts @@ -1,5 +1,5 @@ import fs, { pathExists, readFile } from 'fs-extra'; -import { deprecate, logger } from '@storybook/node-logger'; +import { logger } from '@storybook/node-logger'; import { telemetry } from '@storybook/telemetry'; import { findConfigFile, From feb02f87f7611868d13462441f9554700f99e873 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 12 Dec 2023 17:46:50 +0100 Subject: [PATCH 47/61] Pass jsConfig to Next.js SWC Loader and load Next.js config with default --- code/frameworks/nextjs/src/config/webpack.ts | 4 +- code/frameworks/nextjs/src/preset.ts | 1 - code/frameworks/nextjs/src/swc/loader.ts | 4 ++ code/frameworks/nextjs/src/utils.ts | 42 ++------------------ 4 files changed, 9 insertions(+), 42 deletions(-) diff --git a/code/frameworks/nextjs/src/config/webpack.ts b/code/frameworks/nextjs/src/config/webpack.ts index be2a983fceec..1abc8684c4d5 100644 --- a/code/frameworks/nextjs/src/config/webpack.ts +++ b/code/frameworks/nextjs/src/config/webpack.ts @@ -15,13 +15,11 @@ const tryResolve = (path: string) => { export const configureConfig = async ({ baseConfig, nextConfigPath, - configDir, }: { baseConfig: WebpackConfig; nextConfigPath?: string; - configDir: string; }): Promise => { - const nextConfig = await resolveNextConfig({ baseConfig, nextConfigPath, configDir }); + const nextConfig = await resolveNextConfig({ nextConfigPath }); addScopedAlias(baseConfig, 'next/config'); if (tryResolve('next/dist/compiled/react')) { diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index da332d81e4ef..d1bdb71527bf 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -146,7 +146,6 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, const nextConfig = await configureConfig({ baseConfig, nextConfigPath, - configDir: options.configDir, }); const babelRCPath = join(getProjectRoot(), '.babelrc'); diff --git a/code/frameworks/nextjs/src/swc/loader.ts b/code/frameworks/nextjs/src/swc/loader.ts index 255305d0b713..d1b5c6e7ab98 100644 --- a/code/frameworks/nextjs/src/swc/loader.ts +++ b/code/frameworks/nextjs/src/swc/loader.ts @@ -3,6 +3,7 @@ import { getVirtualModules } from '@storybook/builder-webpack5'; import type { Options } from '@storybook/types'; import type { NextConfig } from 'next'; import path from 'path'; +import loadJsConfig from 'next/dist/build/load-jsconfig'; export const configureSWCLoader = async ( baseConfig: any, @@ -15,6 +16,8 @@ export const configureSWCLoader = async ( const { virtualModules } = await getVirtualModules(options); + const { jsConfig } = await loadJsConfig(dir, nextConfig as any); + baseConfig.module.rules = [ ...baseConfig.module.rules, { @@ -32,6 +35,7 @@ export const configureSWCLoader = async ( pagesDir: `${dir}/pages`, appDir: `${dir}/apps`, hasReactRefresh: isDevelopment, + jsConfig, nextConfig, supportedBrowsers: require('next/dist/build/utils').getSupportedBrowsers( dir, diff --git a/code/frameworks/nextjs/src/utils.ts b/code/frameworks/nextjs/src/utils.ts index c119db2dbff7..6429ed718759 100644 --- a/code/frameworks/nextjs/src/utils.ts +++ b/code/frameworks/nextjs/src/utils.ts @@ -1,11 +1,10 @@ import path from 'path'; import { DefinePlugin } from 'webpack'; import { PHASE_DEVELOPMENT_SERVER } from 'next/constants'; -import findUp from 'find-up'; -import { pathExists } from 'fs-extra'; import type { Configuration as WebpackConfig } from 'webpack'; import type { NextConfig } from 'next'; -import { pathToFileURL } from 'node:url'; +import loadConfig from 'next/dist/server/config'; +import { getProjectRoot } from '@storybook/core-common'; export const configureRuntimeNextjsVersionResolution = (baseConfig: WebpackConfig): void => { baseConfig.plugins?.push( @@ -17,46 +16,13 @@ export const configureRuntimeNextjsVersionResolution = (baseConfig: WebpackConfi export const getNextjsVersion = (): string => require(scopedResolve('next/package.json')).version; -const findNextConfigFile = async (configDir: string) => { - const supportedExtensions = ['mjs', 'js']; - return supportedExtensions.reduce>( - async (acc, ext: string | undefined) => { - const resolved = await acc; - if (!resolved) { - acc = findUp(`next.config.${ext}`, { cwd: configDir }); - } - - return acc; - }, - Promise.resolve(undefined) - ); -}; - export const resolveNextConfig = async ({ - baseConfig = {}, nextConfigPath, - configDir, }: { - baseConfig?: WebpackConfig; nextConfigPath?: string; - configDir: string; }): Promise => { - const nextConfigFile = nextConfigPath || (await findNextConfigFile(configDir)); - - if (!nextConfigFile || (await pathExists(nextConfigFile)) === false) { - return {}; - } - - const nextConfigExport = await import(pathToFileURL(nextConfigFile).href); - - const nextConfig = - typeof nextConfigExport === 'function' - ? nextConfigExport(PHASE_DEVELOPMENT_SERVER, { - defaultConfig: baseConfig, - }) - : nextConfigExport; - - return nextConfig.default || nextConfig; + const dir = nextConfigPath ? path.dirname(nextConfigPath) : getProjectRoot(); + return loadConfig(PHASE_DEVELOPMENT_SERVER, dir, undefined); }; // This is to help the addon in development From 98cdbf9c61e997a91118d69f46007b3becf04add Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 12 Dec 2023 18:06:21 +0100 Subject: [PATCH 48/61] Activate Next.js 13 sandbox --- code/lib/cli/src/sandbox-templates.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index a882d2be3bba..d909792fc4e6 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -129,7 +129,6 @@ const baseTemplates = { extraDependencies: ['server-only'], }, skipTasks: ['e2e-tests-dev', 'bench'], - inDevelopment: true, }, 'nextjs/default-js': { name: 'Next.js Latest (Webpack | JavaScript)', From d2e6f238722277fc4e862fdafb3294d93c8a1123 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 13 Dec 2023 14:45:21 +0100 Subject: [PATCH 49/61] Fix generation of Next.js 13 sandbox --- code/lib/cli/src/sandbox-templates.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index d909792fc4e6..8451d086194e 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -116,7 +116,7 @@ const baseTemplates = { 'nextjs/13-ts': { name: 'Next.js v13.5 (Webpack | TypeScript)', script: - 'yarn create next-app {{beforeDir}} -e https://github.com/vercel/next.js/tree/next-13/examples/hello-world && cd {{beforeDir}} && npm pkg set "dependencies.next"="^12.2.0" && yarn && git add . && git commit --amend --no-edit && cd ..', + 'yarn create next-app {{beforeDir}} -e https://github.com/vercel/next.js/tree/next-13/examples/hello-world && cd {{beforeDir}} && npm pkg set "dependencies.next"="^13.5.6" && yarn && git add . && git commit --amend --no-edit && cd ..', expected: { framework: '@storybook/nextjs', renderer: '@storybook/react', From 39660d67c9be7788b7d3a6a48043df859d2c3c39 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 27 Dec 2023 08:55:48 +0100 Subject: [PATCH 50/61] Fix parallelism --- .circleci/config.yml | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 5aa1adf2ec7f..8e93487dd40a 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -706,22 +706,22 @@ workflows: requires: - build - create-sandboxes: - parallelism: 32 + parallelism: 33 requires: - build # - smoke-test-sandboxes: # disabled for now # requires: # - create-sandboxes - build-sandboxes: - parallelism: 32 + parallelism: 33 requires: - create-sandboxes - chromatic-sandboxes: - parallelism: 29 + parallelism: 30 requires: - build-sandboxes - e2e-production: - parallelism: 27 + parallelism: 28 requires: - build-sandboxes - e2e-dev: @@ -729,7 +729,7 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 27 + parallelism: 28 requires: - build-sandboxes From fddbcff7565ba6423975ed5241acdd189d77f0b5 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 16 Jan 2024 09:59:31 +0100 Subject: [PATCH 51/61] Fix eslint in snapshots --- .../8140-js-prop-types-oneof/docgen.snapshot | 2 -- .../8428-js-static-prop-types/docgen.snapshot | 4 ---- .../stories/docgen-components/9023-js-hoc/docgen.snapshot | 4 ---- .../docgen-components/9465-ts-type-props/docgen.snapshot | 5 +---- .../9556-ts-react-default-exports/docgen.snapshot | 1 - .../docgen-components/9586-js-react-memo/docgen.snapshot | 1 - .../9668-js-proptypes-no-jsdoc/docgen.snapshot | 3 --- .../template/stories/docgen-components/jsdoc/docgen.snapshot | 1 - 8 files changed, 1 insertion(+), 20 deletions(-) diff --git a/code/renderers/react/template/stories/docgen-components/8140-js-prop-types-oneof/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/8140-js-prop-types-oneof/docgen.snapshot index 1ceef4f786bf..961e7e2368c0 100644 --- a/code/renderers/react/template/stories/docgen-components/8140-js-prop-types-oneof/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/8140-js-prop-types-oneof/docgen.snapshot @@ -1,5 +1,3 @@ -/* eslint-disable react/require-default-props */ -/* eslint-disable react/no-unused-prop-types */ import React from 'react'; import PropTypes from 'prop-types'; const Alert = props => /*#__PURE__*/React.createElement(React.Fragment, null, JSON.stringify(props)); diff --git a/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/docgen.snapshot index 25027c025e27..51b837feb2b6 100644 --- a/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/8428-js-static-prop-types/docgen.snapshot @@ -1,12 +1,8 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); } function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } -/* eslint-disable react/no-unused-prop-types */ -/* eslint-disable react/require-default-props */ import React from 'react'; import PropTypes from 'prop-types'; - -// eslint-disable-next-line react/prefer-stateless-function export default class Test extends React.Component { render() { return /*#__PURE__*/React.createElement("div", null, "test"); diff --git a/code/renderers/react/template/stories/docgen-components/9023-js-hoc/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/9023-js-hoc/docgen.snapshot index a700c46c8eb6..8ce2304c42ca 100644 --- a/code/renderers/react/template/stories/docgen-components/9023-js-hoc/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9023-js-hoc/docgen.snapshot @@ -1,7 +1,3 @@ -/* eslint-disable react/require-default-props */ -/* eslint-disable react/forbid-prop-types */ -/* eslint-disable react/no-unused-prop-types */ -/* eslint-disable react/prefer-stateless-function */ import React from 'react'; import PropTypes from 'prop-types'; diff --git a/code/renderers/react/template/stories/docgen-components/9465-ts-type-props/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/9465-ts-type-props/docgen.snapshot index 160336db5afd..4be33fd4eadd 100644 --- a/code/renderers/react/template/stories/docgen-components/9465-ts-type-props/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9465-ts-type-props/docgen.snapshot @@ -2,10 +2,7 @@ import React from 'react'; const Component = ({ disabled = false, children -}) => -/*#__PURE__*/ -// eslint-disable-next-line react/button-has-type -React.createElement("button", { +}) => /*#__PURE__*/React.createElement("button", { disabled: disabled }, children); export const component = Component; diff --git a/code/renderers/react/template/stories/docgen-components/9556-ts-react-default-exports/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/9556-ts-react-default-exports/docgen.snapshot index b8a990334c99..deeed4ffa007 100644 --- a/code/renderers/react/template/stories/docgen-components/9556-ts-react-default-exports/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9556-ts-react-default-exports/docgen.snapshot @@ -1,5 +1,4 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } -/* eslint-disable react/button-has-type */ import React from 'react'; export const Button = ({ isDisabled = false, diff --git a/code/renderers/react/template/stories/docgen-components/9586-js-react-memo/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/9586-js-react-memo/docgen.snapshot index d50edbe41be8..434fea936e30 100644 --- a/code/renderers/react/template/stories/docgen-components/9586-js-react-memo/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9586-js-react-memo/docgen.snapshot @@ -4,7 +4,6 @@ function Button({ label, onClick }) { - // eslint-disable-next-line react/button-has-type return /*#__PURE__*/React.createElement("button", { onClick: onClick }, label); diff --git a/code/renderers/react/template/stories/docgen-components/9668-js-proptypes-no-jsdoc/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/9668-js-proptypes-no-jsdoc/docgen.snapshot index f11733fbfdbf..bf77d5ab99e5 100644 --- a/code/renderers/react/template/stories/docgen-components/9668-js-proptypes-no-jsdoc/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/9668-js-proptypes-no-jsdoc/docgen.snapshot @@ -1,6 +1,3 @@ -/* eslint-disable react/forbid-prop-types */ -/* eslint-disable react/require-default-props */ -/* eslint-disable react/no-unused-prop-types */ import React from 'react'; import PropTypes from 'prop-types'; const CCTable = props => /*#__PURE__*/React.createElement(React.Fragment, null, JSON.stringify(props)); diff --git a/code/renderers/react/template/stories/docgen-components/jsdoc/docgen.snapshot b/code/renderers/react/template/stories/docgen-components/jsdoc/docgen.snapshot index 2f7812a35999..bd8d15a3ac75 100644 --- a/code/renderers/react/template/stories/docgen-components/jsdoc/docgen.snapshot +++ b/code/renderers/react/template/stories/docgen-components/jsdoc/docgen.snapshot @@ -1,4 +1,3 @@ -/* eslint-disable react/require-default-props, react/no-unused-prop-types */ import React from 'react'; import PropTypes from 'prop-types'; const JsDocProps = () => /*#__PURE__*/React.createElement("div", null, "JSDoc with PropTypes!"); From f673d39a21f0c1dfeb9a5572c37847922aec7e45 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 16 Jan 2024 10:55:37 +0100 Subject: [PATCH 52/61] Remove not defined variable --- .../template/stories/docgen-components/js-proptypes/input.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/code/renderers/react/template/stories/docgen-components/js-proptypes/input.jsx b/code/renderers/react/template/stories/docgen-components/js-proptypes/input.jsx index b47eadfbc921..a6eb20abddb3 100644 --- a/code/renderers/react/template/stories/docgen-components/js-proptypes/input.jsx +++ b/code/renderers/react/template/stories/docgen-components/js-proptypes/input.jsx @@ -398,8 +398,6 @@ PropTypesProps.defaultProps = { funcWithJsDoc: (foo, bar) => { const yo = window.document; - const pouf = souffle; - return { foo, bar }; }, namedDefaultFunc: concat, From c0037961c54681d2cca03ee29103145d3ca0f627 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 16 Jan 2024 11:06:28 +0100 Subject: [PATCH 53/61] Remove unused ts-expect-error comment --- .../builders/builder-webpack5/src/loaders/export-order-loader.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/code/builders/builder-webpack5/src/loaders/export-order-loader.ts b/code/builders/builder-webpack5/src/loaders/export-order-loader.ts index 2eea4bb4a870..f57c3a16eb66 100644 --- a/code/builders/builder-webpack5/src/loaders/export-order-loader.ts +++ b/code/builders/builder-webpack5/src/loaders/export-order-loader.ts @@ -1,5 +1,4 @@ import assert from 'assert'; -// @ts-expect-error No types import { parse as parseCjs, init as initCjsParser } from 'cjs-module-lexer'; import { parse as parseEs } from 'es-module-lexer'; import MagicString from 'magic-string'; From fddd249d00ec0b34746fad0ee3591859b390b775 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 16 Jan 2024 13:44:48 +0100 Subject: [PATCH 54/61] Remove inDevelopment flag from internal webpack5-babel template --- .circleci/config.yml | 68 +++++++++++++-------------- code/lib/cli/src/sandbox-templates.ts | 1 - 2 files changed, 34 insertions(+), 35 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 8e93487dd40a..b212c825ddc2 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -4,8 +4,8 @@ parameters: workflow: description: Which workflow to run type: enum - enum: ['normal', 'merged', 'daily', 'skipped', 'docs'] - default: 'skipped' + enum: ["normal", "merged", "daily", "skipped", "docs"] + default: "skipped" executors: sb_node_16_classic: @@ -13,8 +13,8 @@ executors: class: description: The Resource class type: enum - enum: ['small', 'medium', 'medium+', 'large', 'xlarge'] - default: 'small' + enum: ["small", "medium", "medium+", "large", "xlarge"] + default: "small" working_directory: /tmp/storybook docker: - image: cimg/node:18.18.0 @@ -26,8 +26,8 @@ executors: class: description: The Resource class type: enum - enum: ['small', 'medium', 'medium+', 'large', 'xlarge'] - default: 'small' + enum: ["small", "medium", "medium+", "large", "xlarge"] + default: "small" working_directory: /tmp/storybook docker: - image: cimg/node:18.18.0-browsers @@ -39,8 +39,8 @@ executors: class: description: The Resource class type: enum - enum: ['small', 'medium', 'medium+', 'large', 'xlarge'] - default: 'small' + enum: ["small", "medium", "medium+", "large", "xlarge"] + default: "small" working_directory: /tmp/storybook docker: - image: mcr.microsoft.com/playwright:v1.36.0-focal @@ -56,7 +56,7 @@ orbs: commands: cancel-workflow-on-failure: - description: 'Cancels the entire workflow in case the previous step has failed' + description: "Cancels the entire workflow in case the previous step has failed" steps: - run: name: Cancel current workflow @@ -66,13 +66,13 @@ commands: echo "To execute all checks locally, please run yarn ci-tests" curl -X POST --header "Content-Type: application/json" "https://circleci.com/api/v2/workflow/${CIRCLE_WORKFLOW_ID}/cancel?circle-token=${WORKFLOW_CANCELER}" report-workflow-on-failure: - description: 'Reports failures to discord' + description: "Reports failures to discord" parameters: template: description: | Which template to report in discord. Applicable for parallel sandbox jobs type: string - default: 'none' + default: "none" steps: - run: when: on_fail @@ -88,7 +88,7 @@ jobs: name: sb_node_16_classic steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - restore_cache: name: Restore Yarn cache keys: @@ -114,7 +114,7 @@ jobs: name: sb_node_16_classic steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - restore_cache: name: Restore Yarn cache keys: @@ -157,7 +157,7 @@ jobs: name: sb_node_16_classic steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - attach_workspace: at: . - run: @@ -173,7 +173,7 @@ jobs: name: sb_node_16_classic steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - attach_workspace: at: . - run: @@ -187,7 +187,7 @@ jobs: executor: sb_node_16_browsers steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - attach_workspace: at: . - run: @@ -215,7 +215,7 @@ jobs: name: sb_node_16_browsers steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - attach_workspace: at: . - run: @@ -237,7 +237,7 @@ jobs: name: sb_node_16_browsers steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - attach_workspace: at: . - codecov/upload @@ -273,7 +273,7 @@ jobs: parallelism: << parameters.parallelism >> steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - attach_workspace: at: . - run: @@ -297,7 +297,7 @@ jobs: parallelism: << parameters.parallelism >> steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - attach_workspace: at: . - run: @@ -317,7 +317,7 @@ jobs: parallelism: << parameters.parallelism >> steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - attach_workspace: at: . - run: @@ -356,7 +356,7 @@ jobs: parallelism: << parameters.parallelism >> steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - attach_workspace: at: . - run: @@ -376,7 +376,7 @@ jobs: parallelism: << parameters.parallelism >> steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - attach_workspace: at: . - run: @@ -415,7 +415,7 @@ jobs: parallelism: << parameters.parallelism >> steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - attach_workspace: at: . - run: @@ -438,7 +438,7 @@ jobs: parallelism: << parameters.parallelism >> steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - attach_workspace: at: . - run: @@ -461,7 +461,7 @@ jobs: parallelism: << parameters.parallelism >> steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - attach_workspace: at: . - run: @@ -483,7 +483,7 @@ jobs: type: string steps: - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' + clone_options: "--depth 1 --verbose" - attach_workspace: at: . - when: @@ -706,22 +706,22 @@ workflows: requires: - build - create-sandboxes: - parallelism: 33 + parallelism: 34 requires: - build # - smoke-test-sandboxes: # disabled for now # requires: # - create-sandboxes - build-sandboxes: - parallelism: 33 + parallelism: 34 requires: - create-sandboxes - chromatic-sandboxes: - parallelism: 30 + parallelism: 31 requires: - build-sandboxes - e2e-production: - parallelism: 28 + parallelism: 29 requires: - build-sandboxes - e2e-dev: @@ -729,7 +729,7 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 28 + parallelism: 29 requires: - build-sandboxes @@ -744,14 +744,14 @@ workflows: # - "yarn1" # - "yarn2" # - "pnpm" - template: + template: - "react-vite-ts" - "nextjs-ts" - "vue-vite-ts" # --smoke-test is not supported for the angular builder right now # - "angular-cli" - "lit-vite-ts" - + # TODO: reenable once we find out the source of flakyness # - test-runner-dev: # parallelism: 4 diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index 8451d086194e..d470e06e6ffe 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -499,7 +499,6 @@ const internalTemplates = { ), }, isInternal: true, - inDevelopment: true, skipTasks: ['e2e-tests-dev', 'bench'], }, 'internal/react16-webpack': { From fc05211a981cf4b2c6596d128adffde110ae5a95 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 16 Jan 2024 16:32:56 +0100 Subject: [PATCH 55/61] Only add @storybook/theming to resolutions --- code/package.json | 9 ++------- code/yarn.lock | 19 ++----------------- 2 files changed, 4 insertions(+), 24 deletions(-) diff --git a/code/package.json b/code/package.json index f47fbb71b8ff..f1eaf0f85c44 100644 --- a/code/package.json +++ b/code/package.json @@ -77,12 +77,7 @@ ], "resolutions": { "@playwright/test": "1.36.0", - "@storybook/client-logger": "workspace:*", - "@storybook/core-events": "workspace:*", - "@storybook/instrumenter": "workspace:*", - "@storybook/preview-api": "workspace:*", - "@storybook/test": "workspace:*", - "@storybook/types": "workspace:*", + "@storybook/theming": "workspace:*", "@vitest/expect@1.1.3": "patch:@vitest/expect@npm%3A1.1.3#~/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch", "esbuild": "^0.18.0", "playwright": "1.36.0", @@ -162,7 +157,7 @@ "@storybook/svelte": "workspace:*", "@storybook/svelte-webpack5": "workspace:*", "@storybook/telemetry": "workspace:*", - "@storybook/test": "next", + "@storybook/test": "workspace:*", "@storybook/testing-library": "next", "@storybook/theming": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/yarn.lock b/code/yarn.lock index 54e625cf8ce0..04e71212fdee 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -2613,7 +2613,7 @@ __metadata: languageName: node linkType: hard -"@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.0, @emotion/use-insertion-effect-with-fallbacks@npm:^1.0.1": +"@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.1": version: 1.0.1 resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.1" peerDependencies: @@ -6448,7 +6448,7 @@ __metadata: "@storybook/svelte": "workspace:*" "@storybook/svelte-webpack5": "workspace:*" "@storybook/telemetry": "workspace:*" - "@storybook/test": "npm:next" + "@storybook/test": "workspace:*" "@storybook/testing-library": "npm:next" "@storybook/theming": "workspace:*" "@storybook/types": "workspace:*" @@ -6723,21 +6723,6 @@ __metadata: languageName: node linkType: hard -"@storybook/theming@npm:^7.0.2": - version: 7.5.0 - resolution: "@storybook/theming@npm:7.5.0" - dependencies: - "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.0" - "@storybook/client-logger": "npm:7.5.0" - "@storybook/global": "npm:^5.0.0" - memoizerific: "npm:^1.11.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 57da8e27c748cbec4dc1661cdd2d449949d97476d8e97933696b31d07c7361cbbcca8d7225cc00ca078daa160023b8965ddec7c23519ce0a4ef2658246b062e7 - languageName: node - linkType: hard - "@storybook/theming@workspace:*, @storybook/theming@workspace:lib/theming": version: 0.0.0-use.local resolution: "@storybook/theming@workspace:lib/theming" From e94ad415052a9d8882daabeda87ab71a9b6713fa Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 17 Jan 2024 09:50:06 +0100 Subject: [PATCH 56/61] Fix flaky Angular tests --- .../angular-beta/utils/BootstrapQueue.test.ts | 54 ++++++++++++++----- .../angular-beta/utils/BootstrapQueue.ts | 1 - 2 files changed, 41 insertions(+), 14 deletions(-) diff --git a/code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.test.ts b/code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.test.ts index 542f5e3b6df7..f518e7daf6e9 100644 --- a/code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.test.ts +++ b/code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.test.ts @@ -1,10 +1,9 @@ import { Subject, lastValueFrom } from 'rxjs'; -import { vi, describe, it, expect, beforeEach } from 'vitest'; +import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest'; +import assert from 'node:assert'; import { queueBootstrapping } from './BootstrapQueue'; -const tick = (count = 0) => new Promise((resolve) => setTimeout(resolve, count)); - describe('BootstrapQueue', () => { beforeEach(async () => { vi.spyOn(console, 'log').mockImplementation(() => {}); @@ -25,7 +24,9 @@ describe('BootstrapQueue', () => { bootstrapAppFinished(); }); - await tick(); + await vi.waitFor(() => { + assert(bootstrapApp.mock.calls.length === 1, 'bootstrapApp should have been called once'); + }); expect(bootstrapApp).toHaveBeenCalled(); expect(bootstrapAppFinished).not.toHaveBeenCalled(); @@ -33,7 +34,12 @@ describe('BootstrapQueue', () => { pendingSubject.next(); pendingSubject.complete(); - await tick(); + await vi.waitFor(() => { + assert( + bootstrapAppFinished.mock.calls.length === 1, + 'bootstrapApp should have been called once' + ); + }); expect(bootstrapAppFinished).toHaveBeenCalled(); }); @@ -61,7 +67,9 @@ describe('BootstrapQueue', () => { queueBootstrapping(bootstrapApp2).then(bootstrapAppFinished2); queueBootstrapping(bootstrapApp3).then(bootstrapAppFinished3); - await tick(); + await vi.waitFor(() => { + assert(bootstrapApp.mock.calls.length === 1, 'bootstrapApp should have been called once'); + }); expect(bootstrapApp).toHaveBeenCalled(); expect(bootstrapAppFinished).not.toHaveBeenCalled(); @@ -73,7 +81,9 @@ describe('BootstrapQueue', () => { pendingSubject.next(); pendingSubject.complete(); - await tick(); + await vi.waitFor(() => { + assert(bootstrapApp2.mock.calls.length === 1, 'bootstrapApp2 should have been called once'); + }); expect(bootstrapApp).toHaveReturnedTimes(1); expect(bootstrapAppFinished).toHaveBeenCalled(); @@ -85,7 +95,9 @@ describe('BootstrapQueue', () => { pendingSubject2.next(); pendingSubject2.complete(); - await tick(); + await vi.waitFor(() => { + assert(bootstrapApp3.mock.calls.length === 1, 'bootstrapApp3 should have been called once'); + }); expect(bootstrapApp).toHaveReturnedTimes(1); expect(bootstrapAppFinished).toHaveBeenCalled(); @@ -97,7 +109,12 @@ describe('BootstrapQueue', () => { pendingSubject3.next(); pendingSubject3.complete(); - await tick(); + await vi.waitFor(() => { + assert( + bootstrapAppFinished3.mock.calls.length === 1, + 'bootstrapAppFinished3 should have been called once' + ); + }); expect(bootstrapApp).toHaveReturnedTimes(1); expect(bootstrapAppFinished).toHaveBeenCalled(); @@ -125,16 +142,22 @@ describe('BootstrapQueue', () => { queueBootstrapping(bootstrapApp).then(bootstrapAppFinished).catch(bootstrapAppError); queueBootstrapping(bootstrapApp2).then(bootstrapAppFinished2).catch(bootstrapAppError2); - await tick(); + await vi.waitFor(() => { + assert(bootstrapApp.mock.calls.length === 1, 'bootstrapApp should have been called once'); + }); expect(bootstrapApp).toHaveBeenCalledTimes(1); expect(bootstrapAppFinished).not.toHaveBeenCalled(); expect(bootstrapApp2).not.toHaveBeenCalled(); - expect(bootstrapAppFinished2).not.toHaveBeenCalled(); pendingSubject.error(new Error('test error')); - await tick(); + await vi.waitFor(() => { + assert( + bootstrapAppError.mock.calls.length === 1, + 'bootstrapAppError should have been called once' + ); + }); expect(bootstrapApp).toHaveBeenCalledTimes(1); expect(bootstrapAppFinished).not.toHaveBeenCalled(); @@ -146,7 +169,12 @@ describe('BootstrapQueue', () => { pendingSubject2.next(); pendingSubject2.complete(); - await tick(); + await vi.waitFor(() => { + assert( + bootstrapAppFinished2.mock.calls.length === 1, + 'bootstrapAppFinished2 should have been called once' + ); + }); expect(bootstrapApp).toHaveBeenCalledTimes(1); expect(bootstrapAppFinished).not.toHaveBeenCalled(); diff --git a/code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.ts b/code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.ts index e708453223d7..b1b52baa85a8 100644 --- a/code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.ts +++ b/code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.ts @@ -1,4 +1,3 @@ -/* eslint-disable no-await-in-loop */ import { ApplicationRef } from '@angular/core'; const queue: Array<() => Promise> = []; From 978024f4ed55f7aad38940d83f1d37bdb1afe718 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 17 Jan 2024 11:05:49 +0100 Subject: [PATCH 57/61] Docs: Fix migration note --- MIGRATION.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 4689f4627bb5..baf36606ea2d 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -69,17 +69,17 @@ - [Addon author changes](#addon-author-changes) - [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) @@ -105,7 +105,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) @@ -118,7 +118,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) @@ -168,7 +168,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) @@ -520,7 +520,7 @@ In Storybook 8.0, we have removed the `framework.options.builder.useSWC` option. If you want to use SWC, you can add the necessary addon: ```sh -npx storybook@latest add @storybook/addon-webpack-compiler-swc +npx storybook@latest add @storybook/addon-webpack5-compiler-swc ``` The goal is to make @storybook/builder-webpack5 lighter and more flexible. We are not locked into a specific compiler or compiler version anymore. This allows us to support Babel 7/8, SWC, and other compilers simultaneously. @@ -530,7 +530,7 @@ The goal is to make @storybook/builder-webpack5 lighter and more flexible. We ar In Storybook 8.0, we have removed the `@storybook/builder-webpack5` package's dependency on Babel. This means that Babel is not preconfigured in `@storybook/builder-webpack5`. If you want to use Babel, you can add the necessary addon: ```sh -npx storybook@latest add @storybook/addon-webpack-compiler-swc +npx storybook@latest add @storybook/addon-webpack5-compiler-babel ``` We are doing this to make Storybook more flexible and to allow users to use a variety of compilers like SWC, Babel or even pure TypeScript. From f1552aae83fd5bcd631ce50d7f670fdfb636997a Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Wed, 17 Jan 2024 11:41:56 +0000 Subject: [PATCH 58/61] Update CHANGELOG.md for v7.6.9 [skip ci] --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5180c2c1d556..38e3d961b3c3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +## 7.6.9 + +- ConfigFile: Fix export specifiers - [#25590](https://github.com/storybookjs/storybook/pull/25590), thanks [@shilman](https://github.com/shilman)! +- Webpack5: Make export-order-loader compatible with both esm and cjs - [#25540](https://github.com/storybookjs/storybook/pull/25540), thanks [@mlazari](https://github.com/mlazari)! +- CLI: Support version specifiers in `init`, `upgrade` and `sandbox` - [#25526](https://github.com/storybookjs/storybook/pull/25526), thanks [@ndelangen](https://github.com/ndelangen), [@jreinhold](https://github.com/jreinhold)! + ## 7.6.8 - Addon-actions: Fix module resolution for react-native - [#25296](https://github.com/storybookjs/storybook/pull/25296), thanks [@dannyhw](https://github.com/dannyhw)! From 793cea6ffef0240a2c95d16b7a17e8d1f574c612 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 17 Jan 2024 13:28:01 +0100 Subject: [PATCH 59/61] Refactor BootstrapQueue.ts to improve code execution order --- .../angular/src/client/angular-beta/utils/BootstrapQueue.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.ts b/code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.ts index b1b52baa85a8..20b81c860413 100644 --- a/code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.ts +++ b/code/frameworks/angular/src/client/angular-beta/utils/BootstrapQueue.ts @@ -52,8 +52,8 @@ const processQueue = async () => { while (queue.length > 0) { const bootstrappingFn = queue.shift(); if (bootstrappingFn) { - await resetCompiledComponents(); await bootstrappingFn(); + await resetCompiledComponents(); } } From 4f183a941bf6cc12fced522cae103443c14769e7 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 16 Jan 2024 16:01:54 +0800 Subject: [PATCH 60/61] Fully switch to experimentalRSC --- MIGRATION.md | 25 ++++++++++++------- code/frameworks/nextjs/README.md | 4 +-- code/frameworks/nextjs/package.json | 2 -- code/frameworks/nextjs/src/preset.ts | 5 +--- code/frameworks/nextjs/src/rsc/decorator.tsx | 14 ----------- code/frameworks/nextjs/src/rsc/preview.tsx | 10 -------- code/lib/types/src/modules/core-common.ts | 7 ------ .../renderers/react/src/entry-preview-rsc.tsx | 6 +++-- 8 files changed, 23 insertions(+), 50 deletions(-) delete mode 100644 code/frameworks/nextjs/src/rsc/decorator.tsx delete mode 100644 code/frameworks/nextjs/src/rsc/preview.tsx diff --git a/MIGRATION.md b/MIGRATION.md index 670f89c77ac8..35760a8f15da 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -32,6 +32,7 @@ - [Next.js](#nextjs) - [Require Next.js 13.5 and up](#require-nextjs-135-and-up) - [Automatic SWC mode detection](#automatic-swc-mode-detection) + - [RSC config moved to React renderer](#rsc-config-moved-to-react-renderer) - [Angular](#angular) - [Require Angular 15 and up](#require-angular-15-and-up) - [Svelte](#svelte) @@ -66,17 +67,17 @@ - [`createChannel` from `@storybook/postmessage` and `@storybook/channel-websocket`](#createchannel-from-storybookpostmessage-and-storybookchannel-websocket) - [StoryStore and methods deprecated](#storystore-and-methods-deprecated) - [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) @@ -728,6 +729,12 @@ Similar to how Next.js detects if SWC should be used, Storybook will follow more - If you use Next.js 14 or higher and you don't have a .babelrc file, Storybook will use SWC to transpile your code. - Even if you have a .babelrc file, Storybook will still use SWC to transpile your code if you set the experimental `experimental.forceSwcTransforms` flag to `true` in your `next.config.js`. +##### RSC config moved to React renderer + +Storybook 7.6 introduced a new feature flag, `experimentalNextRSC`, to enable React Server Components in a Next.js project. It also introduced a parameter `nextjs.rsc` to selectively disable it on particular components or stories. + +These flags have been renamed to `experimentalRSC` and `react.rsc`, respectively. This is a breaking change to accommodate RSC support in other, non-Next.js frameworks. For now, `@storybook/nextjs` is the only framework that supports it, and does so experimentally. + #### Angular ##### Require Angular 15 and up diff --git a/code/frameworks/nextjs/README.md b/code/frameworks/nextjs/README.md index ab6a8fc9cad5..d1d234ab89fc 100644 --- a/code/frameworks/nextjs/README.md +++ b/code/frameworks/nextjs/README.md @@ -907,13 +907,13 @@ Storybook handles most [Typescript](https://www.typescriptlang.org/) configurati If your app uses [React Server Components (RSC)](https://nextjs.org/docs/app/building-your-application/rendering/server-components), Storybook can render them in stories in the browser. -To enable this set the `experimentalNextRSC` feature flag in your `.storybook/main.js` config: +To enable this set the `experimentalRSC` feature flag in your `.storybook/main.js` config: ```js // main.js export default { features: { - experimentalNextRSC: true, + experimentalRSC: true, }, }; ``` diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 052baf685f6c..5c7e73f7b8dc 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -42,7 +42,6 @@ "import": "./dist/font/webpack/loader/storybook-nextjs-font-loader.mjs" }, "./dist/preview.mjs": "./dist/preview.mjs", - "./dist/rsc/preview.mjs": "./dist/rsc/preview.mjs", "./next-image-loader-stub.js": { "types": "./dist/next-image-loader-stub.d.ts", "require": "./dist/next-image-loader-stub.js", @@ -164,7 +163,6 @@ "./src/images/next-legacy-image.tsx", "./src/images/next-image.tsx", "./src/font/webpack/loader/storybook-nextjs-font-loader.ts", - "./src/rsc/preview.tsx", "./src/rsc/server-only.ts", "./src/swc/next-swc-loader-patch.ts" ], diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index a8360cc634da..3d58706ad2b4 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -76,9 +76,6 @@ export const previewAnnotations: PresetProperty<'previewAnnotations'> = ( ) => { const nextDir = dirname(require.resolve('@storybook/nextjs/package.json')); const result = [...entry, join(nextDir, 'dist/preview.mjs')]; - if (features?.experimentalNextRSC) { - result.unshift(join(nextDir, 'dist/rsc/preview.mjs')); - } return result; }; @@ -170,7 +167,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, configureFastRefresh(baseConfig); } - if (options.features?.experimentalNextRSC || options.features?.experimentalRSC) { + if (options.features?.experimentalRSC) { configureRSC(baseConfig); } diff --git a/code/frameworks/nextjs/src/rsc/decorator.tsx b/code/frameworks/nextjs/src/rsc/decorator.tsx deleted file mode 100644 index 73b7e7b4d817..000000000000 --- a/code/frameworks/nextjs/src/rsc/decorator.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import * as React from 'react'; -import type { StoryContext } from '@storybook/react'; - -export const ServerComponentDecorator = ( - Story: React.FC, - { parameters }: StoryContext -): React.ReactNode => - parameters?.nextjs?.rsc ? ( - - - - ) : ( - - ); diff --git a/code/frameworks/nextjs/src/rsc/preview.tsx b/code/frameworks/nextjs/src/rsc/preview.tsx deleted file mode 100644 index a26737ec1e06..000000000000 --- a/code/frameworks/nextjs/src/rsc/preview.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import type { Addon_DecoratorFunction } from '@storybook/types'; -import { ServerComponentDecorator } from './decorator'; - -export const decorators: Addon_DecoratorFunction[] = [ServerComponentDecorator]; - -export const parameters = { - nextjs: { - rsc: true, - }, -}; diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts index dd178258c61f..9e254a75a8a1 100644 --- a/code/lib/types/src/modules/core-common.ts +++ b/code/lib/types/src/modules/core-common.ts @@ -372,13 +372,6 @@ export interface StorybookConfigRaw { */ disallowImplicitActionsInRenderV8?: boolean; - /** - * Enable asynchronous component rendering in NextJS framework - * - * @deprecated use `experimentalRSC` instead - */ - experimentalNextRSC?: boolean; - /** * Enable asynchronous component rendering in React renderer */ diff --git a/code/renderers/react/src/entry-preview-rsc.tsx b/code/renderers/react/src/entry-preview-rsc.tsx index 2d8fbd103721..96b04ab996ba 100644 --- a/code/renderers/react/src/entry-preview-rsc.tsx +++ b/code/renderers/react/src/entry-preview-rsc.tsx @@ -9,8 +9,10 @@ export const ServerComponentDecorator = ( ): React.ReactNode => { if (!parameters?.react?.rsc) return ; - if (semver.major(React.version) < 18 || semver.minor(React.version) < 3) { - throw new Error('React Server Components require React 18.3'); + const major = semver.major(React.version); + const minor = semver.minor(React.version); + if (major < 18 || (major === 18 && minor < 3)) { + throw new Error('React Server Components require React >= 18.3'); } return ( From 0b25f8b2c1eb64169e95a890c6fa4250dd718221 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Wed, 17 Jan 2024 14:29:56 +0000 Subject: [PATCH 61/61] Write changelog for 8.0.0-alpha.11 [skip ci] --- CHANGELOG.prerelease.md | 16 ++++++++++++++++ code/package.json | 3 ++- docs/versions/next.json | 2 +- 3 files changed, 19 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index 26255568cc17..db7bfa975429 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,19 @@ +## 8.0.0-alpha.11 + +- Angular: Remove cached NgModules and introduce a global queue during bootstrapping - [#24982](https://github.com/storybookjs/storybook/pull/24982), thanks [@Marklb](https://github.com/Marklb)! +- CLI: Fix sandbox command versioning - [#25600](https://github.com/storybookjs/storybook/pull/25600), thanks [@ndelangen](https://github.com/ndelangen)! +- CLI: Support upgrading to canary versions - [#25596](https://github.com/storybookjs/storybook/pull/25596), thanks [@JReinhold](https://github.com/JReinhold)! +- ConfigFile: Fix export specifiers - [#25590](https://github.com/storybookjs/storybook/pull/25590), thanks [@shilman](https://github.com/shilman)! +- Interaction: Replace @storybook/jest by @storybook/test - [#25584](https://github.com/storybookjs/storybook/pull/25584), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Next.js: Pass jsConfig to SWC Loader and load config with defaults - [#25203](https://github.com/storybookjs/storybook/pull/25203), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Parameters: Remove passArgsFirst flag - [#25585](https://github.com/storybookjs/storybook/pull/25585), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Preset: Remove deprecated config preset - [#25607](https://github.com/storybookjs/storybook/pull/25607), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- React: Refactor RSC out of Next - [#25591](https://github.com/storybookjs/storybook/pull/25591), thanks [@shilman](https://github.com/shilman)! +- Sandboxes: Update wait-on command to use TCP instead of HTTP - [#25541](https://github.com/storybookjs/storybook/pull/25541), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Telejson: Update stringify options in codebase - [#25564](https://github.com/storybookjs/storybook/pull/25564), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- UI: Fix menu icon on the sidebar - [#25587](https://github.com/storybookjs/storybook/pull/25587), thanks [@cdedreuille](https://github.com/cdedreuille)! +- Webpack5: Make export-order-loader compatible with both esm and cjs - [#25540](https://github.com/storybookjs/storybook/pull/25540), thanks [@mlazari](https://github.com/mlazari)! + ## 8.0.0-alpha.10 - API: Remove deprecations from manager and preview api - [#25536](https://github.com/storybookjs/storybook/pull/25536), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! diff --git a/code/package.json b/code/package.json index f1eaf0f85c44..7f5ff13d8554 100644 --- a/code/package.json +++ b/code/package.json @@ -292,5 +292,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "8.0.0-alpha.11" } diff --git a/docs/versions/next.json b/docs/versions/next.json index 6ab64e4d4e00..690b644cd675 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"8.0.0-alpha.10","info":{"plain":"- API: Remove deprecations from manager and preview api - [#25536](https://github.com/storybookjs/storybook/pull/25536), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Addon Controls: Remove unused hideNoControlsWarning type - [#25417](https://github.com/storybookjs/storybook/pull/25417), thanks [@yannbf](https://github.com/yannbf)!\n- Addon Remark-GFM: Upgrade remark-gfm - [#25301](https://github.com/storybookjs/storybook/pull/25301), thanks [@yannbf](https://github.com/yannbf)!\n- Addon-actions: Fix module resolution for react-native - [#25296](https://github.com/storybookjs/storybook/pull/25296), thanks [@dannyhw](https://github.com/dannyhw)!\n- Angular: Remove deprecated Story type - [#25558](https://github.com/storybookjs/storybook/pull/25558), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- CLI: Add addon `remove` command - [#25538](https://github.com/storybookjs/storybook/pull/25538), thanks [@shilman](https://github.com/shilman)!\n- CLI: Check optionalDependencies for storybook versions - [#25406](https://github.com/storybookjs/storybook/pull/25406), thanks [@reyronald](https://github.com/reyronald)!\n- CLI: Sandbox script should use current version to init - [#25560](https://github.com/storybookjs/storybook/pull/25560), thanks [@ndelangen](https://github.com/ndelangen)!\n- CLI: Versioned installation of monorepo packages - [#25517](https://github.com/storybookjs/storybook/pull/25517), thanks [@ndelangen](https://github.com/ndelangen)!\n- CLI: Versioned upgrade of monorepo packages - [#25553](https://github.com/storybookjs/storybook/pull/25553), thanks [@JReinhold](https://github.com/JReinhold)!\n- Core: Prevent stories lookup in node_modules - [#25214](https://github.com/storybookjs/storybook/pull/25214), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Core: Refactor preview and deprecate story store - [#24926](https://github.com/storybookjs/storybook/pull/24926), thanks [@tmeasday](https://github.com/tmeasday)!\n- Doc blocks: Remove deprecated props from Primary block - [#25461](https://github.com/storybookjs/storybook/pull/25461), thanks [@yannbf](https://github.com/yannbf)!\n- Doc blocks: Remove deprecated props from Source block - [#25459](https://github.com/storybookjs/storybook/pull/25459), thanks [@yannbf](https://github.com/yannbf)!\n- Doc blocks: Remove deprecated props from Story block - [#25460](https://github.com/storybookjs/storybook/pull/25460), thanks [@yannbf](https://github.com/yannbf)!\n- Maintenance: Pin TS to >= 4.2 as typefest 2 requires it - [#25548](https://github.com/storybookjs/storybook/pull/25548), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- Maintenance: Upgrade to prettier 3 - [#25524](https://github.com/storybookjs/storybook/pull/25524), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- Remove deprecated properties from manager-api - [#25578](https://github.com/storybookjs/storybook/pull/25578), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Test: Fix user event being inlined by tsup by using an interface - [#25547](https://github.com/storybookjs/storybook/pull/25547), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- Test: Upgrade test package to vitest 1.1.3 - [#25576](https://github.com/storybookjs/storybook/pull/25576), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- UI: Add configurable tags-based exclusion from sidebar/autodocs - [#25328](https://github.com/storybookjs/storybook/pull/25328), thanks [@shilman](https://github.com/shilman)!\n- Webpack: Remove deprecated standalone webpackConfig option - [#25481](https://github.com/storybookjs/storybook/pull/25481), thanks [@yannbf](https://github.com/yannbf)!"}} +{"version":"8.0.0-alpha.11","info":{"plain":"- Angular: Remove cached NgModules and introduce a global queue during bootstrapping - [#24982](https://github.com/storybookjs/storybook/pull/24982), thanks [@Marklb](https://github.com/Marklb)!\n- CLI: Fix sandbox command versioning - [#25600](https://github.com/storybookjs/storybook/pull/25600), thanks [@ndelangen](https://github.com/ndelangen)!\n- CLI: Support upgrading to canary versions - [#25596](https://github.com/storybookjs/storybook/pull/25596), thanks [@JReinhold](https://github.com/JReinhold)!\n- ConfigFile: Fix export specifiers - [#25590](https://github.com/storybookjs/storybook/pull/25590), thanks [@shilman](https://github.com/shilman)!\n- Interaction: Replace @storybook/jest by @storybook/test - [#25584](https://github.com/storybookjs/storybook/pull/25584), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Next.js: Pass jsConfig to SWC Loader and load config with defaults - [#25203](https://github.com/storybookjs/storybook/pull/25203), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Parameters: Remove passArgsFirst flag - [#25585](https://github.com/storybookjs/storybook/pull/25585), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Preset: Remove deprecated config preset - [#25607](https://github.com/storybookjs/storybook/pull/25607), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- React: Refactor RSC out of Next - [#25591](https://github.com/storybookjs/storybook/pull/25591), thanks [@shilman](https://github.com/shilman)!\n- Sandboxes: Update wait-on command to use TCP instead of HTTP - [#25541](https://github.com/storybookjs/storybook/pull/25541), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Telejson: Update stringify options in codebase - [#25564](https://github.com/storybookjs/storybook/pull/25564), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- UI: Fix menu icon on the sidebar - [#25587](https://github.com/storybookjs/storybook/pull/25587), thanks [@cdedreuille](https://github.com/cdedreuille)!\n- Webpack5: Make export-order-loader compatible with both esm and cjs - [#25540](https://github.com/storybookjs/storybook/pull/25540), thanks [@mlazari](https://github.com/mlazari)!"}}