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

Merge pull request #18536 from storybookjs/tom/sb-447-use-strict-types-in-core-preview

Browse Source 
Turn on strict types in store + preview-web
This commit is contained in:
Tom Coleman 2022-06-23 14:16:52 +10:00 committed by GitHub
commit 533fd71be6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
45 changed files with 410 additions and 267 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
lib/addons/src/types.ts
View File

@ -12,6 +12,7 @@ import type {
StoryKind,
StoryName,
Args,
ComponentTitle,
} from '@storybook/csf';
import { Addon } from './index';
@ -50,18 +51,29 @@ export interface StorySortObjectParameter {
includeNames?: boolean;
}
interface StoryIndexEntry {
type Path = string;
interface BaseIndexEntry {
id: StoryId;
name: StoryName;
title: string;
importPath: string;
title: ComponentTitle;
importPath: Path;
}
export type StoryIndexEntry = BaseIndexEntry & {
type: 'story';
};
export type DocsIndexEntry = BaseIndexEntry & {
storiesImports: Path[];
type: 'docs';
legacy?: boolean;
};
export type IndexEntry = StoryIndexEntry | DocsIndexEntry;
// The `any` here is the story store's `StoreItem` record. Ideally we should probably only
// pass a defined subset of that full data, but we pass it all so far :shrug:
export type StorySortComparator = Comparator<[StoryId, any, Parameters, Parameters]>;
export type StorySortParameter = StorySortComparator | StorySortObjectParameter;
export type StorySortComparatorV7 = Comparator<StoryIndexEntry>;
export type StorySortComparatorV7 = Comparator<IndexEntry>;
export type StorySortParameterV7 = StorySortComparatorV7 | StorySortObjectParameter;
export interface OptionsParameter extends Object {

11
lib/core-client/src/preview/start.test.ts
View File

@ -16,6 +16,7 @@ import { start } from './start';
jest.mock('@storybook/preview-web/dist/cjs/WebView');
jest.spyOn(WebView.prototype, 'prepareForDocs').mockReturnValue('docs-root');
jest.spyOn(WebView.prototype, 'prepareForStory').mockReturnValue('story-root');
jest.mock('global', () => ({
// @ts-ignore
@ -156,7 +157,7 @@ describe('start', () => {
expect.objectContaining({
id: 'component-a--story-one',
}),
undefined
'story-root'
);
});
@ -328,7 +329,7 @@ describe('start', () => {
}),
}),
}),
undefined
'story-root'
);
});
@ -365,7 +366,7 @@ describe('start', () => {
},
}),
}),
undefined
'story-root'
);
expect((window as any).IS_STORYBOOK).toBe(true);
@ -707,7 +708,7 @@ describe('start', () => {
expect.objectContaining({
id: 'component-c--story-one',
}),
undefined
'story-root'
);
});
@ -1184,7 +1185,7 @@ describe('start', () => {
expect.objectContaining({
id: 'component-a--story-one',
}),
undefined
'story-root'
);
});
});

31
lib/preview-web/src/DocsRender.ts
View File

@ -34,7 +34,9 @@ export class DocsRender<TFramework extends AnyFramework> implements Render<TFram
public disableKeyListeners = false;
public teardown: (options: { viewModeChanged?: boolean }) => Promise<void>;
public teardown?: (options: { viewModeChanged?: boolean }) => Promise<void>;
public torndown = false;
constructor(
private channel: Channel,
@ -42,7 +44,7 @@ export class DocsRender<TFramework extends AnyFramework> implements Render<TFram
public entry: IndexEntry
) {
this.id = entry.id;
this.legacy = entry.type !== 'docs' || entry.legacy;
this.legacy = entry.type !== 'docs' || !!entry.legacy;
}
// The two story "renders" are equal and have both loaded the same story
@ -105,6 +107,8 @@ export class DocsRender<TFramework extends AnyFramework> implements Render<TFram
};
}
if (!this.csfFiles) throw new Error('getDocsContext called before prepare');
let metaCsfFile: ModuleExports;
const exportToStoryId = new Map<ModuleExport, StoryId>();
const storyIdToCSFFile = new Map<StoryId, CSFFile<TFramework>>();
@ -126,16 +130,18 @@ export class DocsRender<TFramework extends AnyFramework> implements Render<TFram
return {
...base,
storyIdByModuleExport: (moduleExport) => {
if (exportToStoryId.has(moduleExport)) return exportToStoryId.get(moduleExport);
const storyId = exportToStoryId.get(moduleExport);
if (storyId) return storyId;
throw new Error(`No story found with that export: ${moduleExport}`);
},
storyById,
componentStories: () => {
return Object.entries(metaCsfFile)
return (
Object.entries(metaCsfFile)
.map(([_, moduleExport]) => exportToStoryId.get(moduleExport))
.filter(Boolean)
.map(storyById);
.filter(Boolean) as StoryId[]
).map(storyById);
},
setMeta(m: ModuleExports) {
metaCsfFile = m;
@ -154,10 +160,15 @@ export class DocsRender<TFramework extends AnyFramework> implements Render<TFram
}
async render() {
if (!(this.story || this.exports) || !this.docsContext || !this.canvasElement)
if (
!(this.story || this.exports) ||
!this.docsContext ||
!this.canvasElement ||
!this.store.projectAnnotations
)
throw new Error('DocsRender not ready to render');
const { docs } = this.story?.parameters || this.store.projectAnnotations.parameters;
const { docs } = this.story?.parameters || this.store.projectAnnotations.parameters || {};
if (!docs) {
throw new Error(
@ -170,7 +181,8 @@ export class DocsRender<TFramework extends AnyFramework> implements Render<TFram
this.docsContext,
{
...docs,
...(!this.legacy && { page: this.exports.default }),
// exports must be defined in non-legacy mode (see check at top)
...(!this.legacy && { page: this.exports!.default }),
},
this.canvasElement,
() => this.channel.emit(DOCS_RENDERED, this.id)
@ -178,6 +190,7 @@ export class DocsRender<TFramework extends AnyFramework> implements Render<TFram
this.teardown = async ({ viewModeChanged }: { viewModeChanged?: boolean } = {}) => {
if (!viewModeChanged || !this.canvasElement) return;
renderer.unmount(this.canvasElement);
this.torndown = true;
};
}

16
lib/preview-web/src/Preview.tsx
View File

@ -46,7 +46,7 @@ export class Preview<TFramework extends AnyFramework> {
importFn?: ModuleImportFn;
renderToDOM: RenderToDOM<TFramework>;
renderToDOM?: RenderToDOM<TFramework>;
storyRenders: StoryRender<TFramework>[] = [];
@ -156,6 +156,8 @@ export class Preview<TFramework extends AnyFramework> {
}
emitGlobals() {
if (!this.storyStore.globals || !this.storyStore.projectAnnotations)
throw new Error(`Cannot emit before initialization`);
this.channel.emit(SET_GLOBALS, {
globals: this.storyStore.globals.get() || {},
globalTypes: this.storyStore.projectAnnotations.globalTypes || {},
@ -171,6 +173,9 @@ export class Preview<TFramework extends AnyFramework> {
// If initialization gets as far as the story index, this function runs.
initializeWithStoryIndex(storyIndex: StoryIndex): PromiseLike<void> {
if (!this.importFn)
throw new Error(`Cannot call initializeWithStoryIndex before initialization`);
return this.storyStore.initialize({
storyIndex,
importFn: this.importFn,
@ -218,7 +223,7 @@ export class Preview<TFramework extends AnyFramework> {
// Update the store with the new stories.
await this.onStoriesChanged({ storyIndex });
} catch (err) {
this.renderPreviewEntryError('Error loading story index:', err);
this.renderPreviewEntryError('Error loading story index:', err as Error);
throw err;
}
}
@ -235,6 +240,8 @@ export class Preview<TFramework extends AnyFramework> {
}
async onUpdateGlobals({ globals }: { globals: Globals }) {
if (!this.storyStore.globals)
throw new Error(`Cannot call onUpdateGlobals before initialization`);
this.storyStore.globals.update(globals);
await Promise.all(this.storyRenders.map((r) => r.rerender()));
@ -295,6 +302,9 @@ export class Preview<TFramework extends AnyFramework> {
// we will change it to go ahead and load the story, which will end up being
// "instant", although async.
renderStoryToElement(story: Story<TFramework>, element: HTMLElement) {
if (!this.renderToDOM)
throw new Error(`Cannot call renderStoryToElement before initialization`);
const render = new StoryRender<TFramework>(
this.channel,
this.storyStore,
@ -318,7 +328,7 @@ export class Preview<TFramework extends AnyFramework> {
{ viewModeChanged }: { viewModeChanged?: boolean } = {}
) {
this.storyRenders = this.storyRenders.filter((r) => r !== render);
await render?.teardown({ viewModeChanged });
await render?.teardown?.({ viewModeChanged });
}
// API

6
lib/preview-web/src/PreviewWeb.integration.test.ts
View File

@ -3,8 +3,11 @@ import global from 'global';
import { RenderContext } from '@storybook/store';
import addons, { mockChannel as createMockChannel } from '@storybook/addons';
import { DocsRenderer } from '@storybook/addon-docs';
import { mocked } from 'ts-jest/utils';
import { expect } from '@jest/globals';
import { PreviewWeb } from './PreviewWeb';
import { WebView } from './WebView';
import {
componentOneExports,
importFn,
@ -56,6 +59,9 @@ beforeEach(() => {
addons.setChannel(mockChannel as any);
addons.setServerChannel(createMockChannel());
mocked(WebView.prototype).prepareForDocs.mockReturnValue('docs-element' as any);
mocked(WebView.prototype).prepareForStory.mockReturnValue('story-element' as any);
});
describe('PreviewWeb', () => {

90
lib/preview-web/src/PreviewWeb.test.ts
View File

@ -28,6 +28,8 @@ import { logger } from '@storybook/client-logger';
import { addons, mockChannel as createMockChannel } from '@storybook/addons';
import type { AnyFramework } from '@storybook/csf';
import type { ModuleImportFn, WebProjectAnnotations } from '@storybook/store';
import { expect } from '@jest/globals';
import { mocked } from 'ts-jest/utils';
import { PreviewWeb } from './PreviewWeb';
import {
@ -48,8 +50,8 @@ import {
modernDocsExports,
teardownRenderToDOM,
} from './PreviewWeb.mockdata';
import { WebView } from './WebView';
jest.mock('./WebView');
const { history, document } = global;
const mockStoryIndex = jest.fn(() => storyIndex);
@ -79,6 +81,7 @@ jest.mock('global', () => ({
jest.mock('@storybook/client-logger');
jest.mock('react-dom');
jest.mock('./WebView');
const createGate = (): [Promise<any | undefined>, (_?: any) => void] => {
let openGate = (_?: any) => {};
@ -104,9 +107,6 @@ async function createAndRenderPreview({
getProjectAnnotations?: () => WebProjectAnnotations<AnyFramework>;
} = {}) {
const preview = new PreviewWeb();
(
preview.view.prepareForDocs as jest.MockedFunction<typeof preview.view.prepareForDocs>
).mockReturnValue('docs-element' as any);
await preview.initialize({
importFn: inputImportFn,
getProjectAnnotations: inputGetProjectAnnotations,
@ -134,6 +134,9 @@ beforeEach(() => {
addons.setChannel(mockChannel as any);
addons.setServerChannel(createMockChannel());
mockFetchResult = { status: 200, json: mockStoryIndex, text: () => 'error text' };
mocked(WebView.prototype).prepareForDocs.mockReturnValue('docs-element' as any);
mocked(WebView.prototype).prepareForStory.mockReturnValue('story-element' as any);
});
describe('PreviewWeb', () => {
@ -172,7 +175,7 @@ describe('PreviewWeb', () => {
const preview = await createAndRenderPreview();
expect(preview.storyStore.globals.get()).toEqual({ a: 'c' });
expect(preview.storyStore.globals!.get()).toEqual({ a: 'c' });
});
it('emits the SET_GLOBALS event', async () => {
@ -233,7 +236,7 @@ describe('PreviewWeb', () => {
},
});
expect(preview.storyStore.globals.get()).toEqual({ a: 'b' });
expect(preview.storyStore.globals!.get()).toEqual({ a: 'b' });
});
});
@ -456,7 +459,7 @@ describe('PreviewWeb', () => {
loaded: { l: 7 },
}),
}),
undefined // this is coming from view.prepareForStory, not super important
'story-element'
);
});
@ -487,13 +490,17 @@ describe('PreviewWeb', () => {
});
it('renders helpful message if renderToDOM is undefined', async () => {
const originalRenderToDOM = projectAnnotations.renderToDOM;
try {
projectAnnotations.renderToDOM = undefined;
document.location.search = '?id=component-one--a';
const preview = new PreviewWeb();
await expect(preview.initialize({ importFn, getProjectAnnotations })).rejects.toThrow();
await expect(
preview.initialize({
importFn,
getProjectAnnotations: () => ({
...getProjectAnnotations,
renderToDOM: undefined,
}),
})
).rejects.toThrow();
expect(preview.view.showErrorDisplay).toHaveBeenCalled();
expect((preview.view.showErrorDisplay as jest.Mock).mock.calls[0][0])
@ -504,9 +511,6 @@ describe('PreviewWeb', () => {
More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-framework-field ]
`);
} finally {
projectAnnotations.renderToDOM = originalRenderToDOM;
}
});
it('renders exception if the play function throws', async () => {
@ -705,7 +709,7 @@ describe('PreviewWeb', () => {
emitter.emit(UPDATE_GLOBALS, { globals: { foo: 'bar' } });
expect(preview.storyStore.globals.get()).toEqual({ a: 'b', foo: 'bar' });
expect(preview.storyStore.globals!.get()).toEqual({ a: 'b', foo: 'bar' });
});
it('passes new globals in context to renderToDOM', async () => {
@ -724,7 +728,7 @@ describe('PreviewWeb', () => {
globals: { a: 'b', foo: 'bar' },
}),
}),
undefined // this is coming from view.prepareForStory, not super important
'story-element'
);
});
@ -807,7 +811,7 @@ describe('PreviewWeb', () => {
args: { foo: 'a', new: 'arg' },
}),
}),
undefined // this is coming from view.prepareForStory, not super important
'story-element'
);
});
@ -864,7 +868,7 @@ describe('PreviewWeb', () => {
args: { foo: 'a', new: 'arg' },
}),
}),
undefined // this is coming from view.prepareForStory, not super important
'story-element'
);
// Now let the first loader call resolve
@ -883,7 +887,7 @@ describe('PreviewWeb', () => {
args: { foo: 'a', new: 'arg' },
}),
}),
undefined // this is coming from view.prepareForStory, not super important
'story-element'
);
});
@ -914,7 +918,7 @@ describe('PreviewWeb', () => {
args: { foo: 'a' },
}),
}),
undefined // this is coming from view.prepareForStory, not super important
'story-element'
);
expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
expect.objectContaining({
@ -924,7 +928,7 @@ describe('PreviewWeb', () => {
args: { foo: 'a', new: 'arg' },
}),
}),
undefined // this is coming from view.prepareForStory, not super important
'story-element'
);
});
@ -947,7 +951,7 @@ describe('PreviewWeb', () => {
args: { foo: 'a' },
}),
}),
undefined // this is coming from view.prepareForStory, not super important
'story-element'
);
expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
expect.objectContaining({
@ -957,7 +961,7 @@ describe('PreviewWeb', () => {
args: { foo: 'a', new: 'arg' },
}),
}),
undefined // this is coming from view.prepareForStory, not super important
'story-element'
);
});
@ -985,7 +989,7 @@ describe('PreviewWeb', () => {
args: { foo: 'a' },
}),
}),
undefined // this is coming from view.prepareForStory, not super important
'story-element'
);
emitter.emit(UPDATE_STORY_ARGS, {
@ -1005,7 +1009,7 @@ describe('PreviewWeb', () => {
args: { foo: 'a', new: 'arg' },
}),
}),
undefined // this is coming from view.prepareForStory, not super important
'story-element'
);
// Now let the playFunction call resolve
@ -1172,7 +1176,7 @@ describe('PreviewWeb', () => {
args: { foo: 'a', new: 'value' },
}),
}),
undefined // this is coming from view.prepareForStory, not super important
'story-element'
);
await waitForEvents([STORY_ARGS_UPDATED]);
@ -1213,7 +1217,7 @@ describe('PreviewWeb', () => {
args: { foo: 'a' },
}),
}),
undefined // this is coming from view.prepareForStory, not super important
'story-element'
);
await waitForEvents([STORY_ARGS_UPDATED]);
@ -1254,7 +1258,7 @@ describe('PreviewWeb', () => {
args: { foo: 'a' },
}),
}),
undefined // this is coming from view.prepareForStory, not super important
'story-element'
);
await waitForEvents([STORY_ARGS_UPDATED]);
@ -1295,7 +1299,7 @@ describe('PreviewWeb', () => {
args: { foo: 'a' },
}),
}),
undefined // this is coming from view.prepareForStory, not super important
'story-element'
);
await waitForEvents([STORY_ARGS_UPDATED]);
@ -1323,7 +1327,7 @@ describe('PreviewWeb', () => {
expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
expect.objectContaining({ forceRemount: false }),
undefined // this is coming from view.prepareForStory, not super important
'story-element'
);
});
});
@ -1347,7 +1351,7 @@ describe('PreviewWeb', () => {
expect(projectAnnotations.renderToDOM).toHaveBeenCalledWith(
expect.objectContaining({ forceRemount: true }),
undefined // this is coming from view.prepareForStory, not super important
'story-element'
);
});
@ -1367,7 +1371,7 @@ describe('PreviewWeb', () => {
loaded: { l: 7 },
}),
}),
undefined // this is coming from view.prepareForStory, not super important
'story-element'
);
mockChannel.emit.mockClear();
@ -1723,7 +1727,7 @@ describe('PreviewWeb', () => {
loaded: { l: 7 },
}),
}),
undefined // this is coming from view.prepareForStory, not super important
'story-element'
);
});
@ -1888,7 +1892,7 @@ describe('PreviewWeb', () => {
loaded: { l: 7 },
}),
}),
undefined // this is coming from view.prepareForStory, not super important
'story-element'
);
});
@ -1942,7 +1946,7 @@ describe('PreviewWeb', () => {
loaded: { l: 7 },
}),
}),
undefined // this is coming from view.prepareForStory, not super important
'story-element'
);
mockChannel.emit.mockClear();
@ -1967,7 +1971,7 @@ describe('PreviewWeb', () => {
loaded: { l: 7 },
}),
}),
undefined // this is coming from view.prepareForStory, not super important
'story-element'
);
await waitForRenderPhase('playing');
@ -1995,7 +1999,7 @@ describe('PreviewWeb', () => {
loaded: { l: 7 },
}),
}),
undefined // this is coming from view.prepareForStory, not super important
'story-element'
);
mockChannel.emit.mockClear();
@ -2284,7 +2288,7 @@ describe('PreviewWeb', () => {
loaded: { l: 7 },
}),
}),
undefined // this is coming from view.prepareForStory, not super important
'story-element'
);
});
@ -2557,7 +2561,7 @@ describe('PreviewWeb', () => {
loaded: { l: 7 },
}),
}),
undefined // this is coming from view.prepareForStory, not super important
'story-element'
);
});
@ -2585,7 +2589,7 @@ describe('PreviewWeb', () => {
args: { foo: 'updated' },
}),
}),
undefined // this is coming from view.prepareForStory, not super important
'story-element'
);
});
@ -2846,7 +2850,7 @@ describe('PreviewWeb', () => {
args: { foo: 'updated', bar: 'edited' },
}),
}),
undefined // this is coming from view.prepareForStory, not super important
'story-element'
);
});
});
@ -3071,7 +3075,7 @@ describe('PreviewWeb', () => {
globals: { a: 'edited' },
}),
}),
undefined // this is coming from view.prepareForStory, not super important
'story-element'
);
});
});

67
lib/preview-web/src/PreviewWeb.tsx
View File

@ -20,7 +20,7 @@ import {
UPDATE_QUERY_PARAMS,
} from '@storybook/core-events';
import { logger } from '@storybook/client-logger';
import { AnyFramework, StoryId, ProjectAnnotations, Args, Globals } from '@storybook/csf';
import { AnyFramework, StoryId, ProjectAnnotations, Args, Globals, ViewMode } from '@storybook/csf';
import type {
ModuleImportFn,
Selection,
@ -54,9 +54,9 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
previewEntryError?: Error;
currentSelection: Selection;
currentSelection?: Selection;
currentRender: StoryRender<TFramework> | DocsRender<TFramework>;
currentRender?: StoryRender<TFramework> | DocsRender<TFramework>;
constructor() {
super();
@ -93,6 +93,9 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
}
async setInitialGlobals() {
if (!this.storyStore.globals)
throw new Error(`Cannot call setInitialGlobals before initialization`);
const { globals } = this.urlStore.selectionSpecifier || {};
if (globals) {
this.storyStore.globals.updateFromPersisted(globals);
@ -113,6 +116,9 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
// Use the selection specifier to choose a story, then render it
async selectSpecifiedStory() {
if (!this.storyStore.storyIndex)
throw new Error(`Cannot call selectSpecifiedStory before initialization`);
if (!this.urlStore.selectionSpecifier) {
this.renderMissingStory();
return;
@ -199,7 +205,7 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
}
}
onSetCurrentStory(selection: Selection) {
onSetCurrentStory(selection: { storyId: StoryId; viewMode?: ViewMode }) {
this.urlStore.setSelection({ viewMode: 'story', ...selection });
this.channel.emit(CURRENT_STORY_WAS_SET, this.urlStore.selection);
this.renderSelection();
@ -240,18 +246,19 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
// - a story selected in "docs" viewMode,
// in which case we render the docsPage for that story
async renderSelection({ persistedArgs }: { persistedArgs?: Args } = {}) {
const { renderToDOM } = this;
if (!renderToDOM) throw new Error('Cannot call renderSelection before initialization');
const { selection } = this.urlStore;
if (!selection) {
throw new Error('Cannot render story as no selection was made');
}
if (!selection) throw new Error('Cannot call renderSelection as no selection was made');
const { storyId } = selection;
let entry;
try {
entry = await this.storyStore.storyIdToEntry(storyId);
} catch (err) {
await this.teardownRender(this.currentRender);
this.renderStoryLoadingException(storyId, err);
if (this.currentRender) await this.teardownRender(this.currentRender);
this.renderStoryLoadingException(storyId, err as Error);
return;
}
// Docs entries cannot be rendered in 'story' viewMode.
@ -268,18 +275,14 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
this.view.showPreparingDocs();
}
const lastSelection = this.currentSelection;
let lastRender = this.currentRender;
// If the last render is still preparing, let's drop it right now. Either
// (a) it is a different story, which means we would drop it later, OR
// (b) it is the *same* story, in which case we will resolve our own .prepare() at the
// same moment anyway, and we should just "take over" the rendering.
// (We can't tell which it is yet, because it is possible that an HMR is going on and
// even though the storyId is the same, the story itself is not).
if (lastRender?.isPreparing()) {
await this.teardownRender(lastRender);
lastRender = null;
if (this.currentRender?.isPreparing()) {
await this.teardownRender(this.currentRender);
}
let render;
@ -290,7 +293,7 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
(...args) => {
// At the start of renderToDOM we make the story visible (see note in WebView)
this.view.showStoryDuringRender();
return this.renderToDOM(...args);
return renderToDOM(...args);
},
this.mainStoryCallbacks(storyId),
storyId,
@ -302,7 +305,10 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
// We need to store this right away, so if the story changes during
// the async `.prepare()` below, we can (potentially) cancel it
const lastSelection = this.currentSelection;
this.currentSelection = selection;
const lastRender = this.currentRender;
this.currentRender = render;
try {
@ -311,18 +317,26 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
if (err !== PREPARE_ABORTED) {
// We are about to render an error so make sure the previous story is
// no longer rendered.
await this.teardownRender(lastRender);
this.renderStoryLoadingException(storyId, err);
if (lastRender) await this.teardownRender(lastRender);
this.renderStoryLoadingException(storyId, err as Error);
}
return;
}
const implementationChanged = !storyIdChanged && !render.isEqual(lastRender);
const implementationChanged = !storyIdChanged && lastRender && !render.isEqual(lastRender);
if (persistedArgs && entry.type !== 'docs')
if (persistedArgs && entry.type !== 'docs') {
if (!render.story) throw new Error('Render has not been prepared!');
this.storyStore.args.updateFromPersisted(render.story, persistedArgs);
}
// Don't re-render the story if nothing has changed to justify it
if (lastRender && !storyIdChanged && !implementationChanged && !viewModeChanged) {
if (
lastRender &&
!lastRender.torndown &&
!storyIdChanged &&
!implementationChanged &&
!viewModeChanged
) {
this.currentRender = lastRender;
this.channel.emit(STORY_UNCHANGED, storyId);
this.view.showMain();
@ -331,7 +345,7 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
// Wait for the previous render to leave the page. NOTE: this will wait to ensure anything async
// is properly aborted, which (in some cases) can lead to the whole screen being refreshed.
await this.teardownRender(lastRender, { viewModeChanged });
if (lastRender) await this.teardownRender(lastRender, { viewModeChanged });
// If we are rendering something new (as opposed to re-rendering the same or first story), emit
if (lastSelection && (storyIdChanged || viewModeChanged)) {
@ -339,6 +353,7 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
}
if (entry.type !== 'docs') {
if (!render.story) throw new Error('Render has not been prepared!');
const { parameters, initialArgs, argTypes, args } = this.storyStore.getStoryContext(
render.story
);
@ -367,6 +382,7 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
this.renderStoryToElement.bind(this)
);
} else {
if (!render.story) throw new Error('Render has not been prepared!');
this.storyRenders.push(render as StoryRender<TFramework>);
(this.currentRender as StoryRender<TFramework>).renderToElement(
this.view.prepareForStory(render.story)
@ -380,6 +396,9 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
// we will change it to go ahead and load the story, which will end up being
// "instant", although async.
renderStoryToElement(story: Story<TFramework>, element: HTMLElement) {
if (!this.renderToDOM)
throw new Error(`Cannot call renderStoryToElement before initialization`);
const render = new StoryRender<TFramework>(
this.channel,
this.storyStore,
@ -400,10 +419,10 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
async teardownRender(
render: Render<TFramework>,
{ viewModeChanged }: { viewModeChanged?: boolean } = {}
{ viewModeChanged = false }: { viewModeChanged?: boolean } = {}
) {
this.storyRenders = this.storyRenders.filter((r) => r !== render);
await render?.teardown({ viewModeChanged });
await render?.teardown?.({ viewModeChanged });
}
// API

23
lib/preview-web/src/StoryRender.ts
View File

@ -54,7 +54,8 @@ export interface Render<TFramework extends AnyFramework> {
story?: Story<TFramework>;
isPreparing: () => boolean;
disableKeyListeners: boolean;
teardown: (options: { viewModeChanged: boolean }) => Promise<void>;
teardown?: (options: { viewModeChanged: boolean }) => Promise<void>;
torndown: boolean;
renderToElement: (canvasElement: HTMLElement, renderStoryToElement?: any) => Promise<void>;
}
@ -75,6 +76,8 @@ export class StoryRender<TFramework extends AnyFramework> implements Render<TFra
private teardownRender: TeardownRenderToDOM = () => {};
public torndown = false;
constructor(
public channel: Channel,
public store: StoryStore<TFramework>,
@ -143,6 +146,7 @@ export class StoryRender<TFramework extends AnyFramework> implements Render<TFra
}
private storyContext() {
if (!this.story) throw new Error(`Cannot call storyContext before preparing`);
return this.store.getStoryContext(this.story);
}
@ -153,7 +157,10 @@ export class StoryRender<TFramework extends AnyFramework> implements Render<TFra
initial?: boolean;
forceRemount?: boolean;
} = {}) {
const { canvasElement } = this;
if (!this.story) throw new Error('cannot render when not prepared');
if (!canvasElement) throw new Error('cannot render when canvasElement is unset');
const { id, componentId, title, name, applyLoaders, unboundStoryFn, playFunction } = this.story;
if (forceRemount && !initial) {
@ -169,7 +176,7 @@ export class StoryRender<TFramework extends AnyFramework> implements Render<TFra
const abortSignal = (this.abortController as AbortController).signal;
try {
let loadedContext: StoryContext<TFramework>;
let loadedContext: Awaited<ReturnType<typeof applyLoaders>>;
await this.runPhase(abortSignal, 'loading', async () => {
loadedContext = await applyLoaders({
...this.storyContext(),
@ -181,13 +188,12 @@ export class StoryRender<TFramework extends AnyFramework> implements Render<TFra
}
const renderStoryContext: StoryContext<TFramework> = {
// @ts-ignore
...loadedContext,
...loadedContext!,
// By this stage, it is possible that new args/globals have been received for this story
// and we need to ensure we render it with the new values
...this.storyContext(),
abortSignal,
canvasElement: this.canvasElement as HTMLElement,
canvasElement,
};
const renderContext: RenderContext<TFramework> = {
componentId,
@ -205,7 +211,7 @@ export class StoryRender<TFramework extends AnyFramework> implements Render<TFra
await this.runPhase(abortSignal, 'rendering', async () => {
this.teardownRender =
(await this.renderToScreen(renderContext, this.canvasElement)) || (() => {});
(await this.renderToScreen(renderContext, canvasElement)) || (() => {});
});
this.notYetRendered = false;
if (abortSignal.aborted) return;
@ -242,12 +248,11 @@ export class StoryRender<TFramework extends AnyFramework> implements Render<TFra
// as a method to abort them, ASAP, but this is not foolproof as we cannot control what
// happens inside the user's code.
cancelRender() {
if (this.abortController) {
this.abortController.abort();
}
this.abortController?.abort();
}
async teardown(options: {} = {}) {
this.torndown = true;
this.cancelRender();
// If the story has loaded, we need to cleanup

9
lib/preview-web/src/UrlStore.ts
View File

@ -61,8 +61,7 @@ const getFirstString = (v: ValueOf<qs.ParsedQs>): string | void => {
return getFirstString(v[0]);
}
if (isObject(v)) {
// @ts-ignore
return getFirstString(Object.values(v));
return getFirstString(Object.values(v).filter(Boolean) as string[]);
}
return undefined;
};
@ -74,7 +73,7 @@ Use \`id=$storyId\` instead.
See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-url-structure`
);
export const getSelectionSpecifierFromPath: () => SelectionSpecifier = () => {
export const getSelectionSpecifierFromPath: () => SelectionSpecifier | null = () => {
const query = qs.parse(document.location.search, { ignoreQueryPrefix: true });
const args = typeof query.args === 'string' ? parseArgsParam(query.args) : undefined;
const globals = typeof query.globals === 'string' ? parseArgsParam(query.globals) : undefined;
@ -103,9 +102,9 @@ export const getSelectionSpecifierFromPath: () => SelectionSpecifier = () => {
};
export class UrlStore {
selectionSpecifier: SelectionSpecifier;
selectionSpecifier: SelectionSpecifier | null;
selection: Selection;
selection?: Selection;
constructor() {
this.selectionSpecifier = getSelectionSpecifierFromPath();

2
lib/preview-web/src/WebView.ts
View File

@ -41,7 +41,7 @@ export class WebView {
testing = false;
preparingTimeout: ReturnType<typeof setTimeout> = null;
preparingTimeout?: ReturnType<typeof setTimeout>;
constructor() {
// Special code for testing situations

3
lib/preview-web/src/parseArgsParam.ts
View File

@ -25,7 +25,8 @@ const validateArgs = (key = '', value: unknown): boolean => {
);
}
if (Array.isArray(value)) return value.every((v) => validateArgs(key, v));
if (isPlainObject(value)) return Object.entries(value).every(([k, v]) => validateArgs(k, v));
if (isPlainObject(value))
return Object.entries(value as object).every(([k, v]) => validateArgs(k, v));
return false;
};

1
lib/preview-web/tsconfig.json
View File

@ -1,6 +1,7 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"strict": true
},
"include": [
"src/**/*"

2
lib/store/src/ArgsStore.test.ts
View File

@ -1,3 +1,5 @@
import { expect } from '@jest/globals';
import { ArgsStore } from './ArgsStore';
jest.mock('@storybook/client-logger');

25
lib/store/src/GlobalsStore.test.ts
View File

@ -1,9 +1,9 @@
import { expect } from '@jest/globals';
import { GlobalsStore } from './GlobalsStore';
describe('GlobalsStore', () => {
it('is initialized to the value in globals', () => {
const store = new GlobalsStore();
store.set({
const store = new GlobalsStore({
globals: {
arg1: 'arg1',
arg2: 2,
@ -20,8 +20,7 @@ describe('GlobalsStore', () => {
});
it('is initialized to the default values from globalTypes if global is unset', () => {
const store = new GlobalsStore();
store.set({
const store = new GlobalsStore({
globals: {
arg1: 'arg1',
arg2: 2,
@ -42,8 +41,7 @@ describe('GlobalsStore', () => {
describe('update', () => {
it('changes the global args', () => {
const store = new GlobalsStore();
store.set({ globals: { foo: 'old' }, globalTypes: { baz: {} } });
const store = new GlobalsStore({ globals: { foo: 'old' }, globalTypes: { baz: {} } });
store.update({ foo: 'bar' });
expect(store.get()).toEqual({ foo: 'bar' });
@ -57,8 +55,7 @@ describe('GlobalsStore', () => {
});
it('does not merge objects', () => {
const store = new GlobalsStore();
store.set({ globals: {}, globalTypes: {} });
const store = new GlobalsStore({ globals: {}, globalTypes: {} });
store.update({ obj: { foo: 'bar' } });
expect(store.get()).toEqual({ obj: { foo: 'bar' } });
@ -70,8 +67,7 @@ describe('GlobalsStore', () => {
describe('updateFromPersisted', () => {
it('only sets values for which globals or globalArgs exist', () => {
const store = new GlobalsStore();
store.set({
const store = new GlobalsStore({
globals: {
arg1: 'arg1',
},
@ -92,8 +88,7 @@ describe('GlobalsStore', () => {
describe('second call to set', () => {
it('is initialized to the (new) default values from globalTypes if the (new) global is unset', () => {
const store = new GlobalsStore();
store.set({ globals: {}, globalTypes: {} });
const store = new GlobalsStore({ globals: {}, globalTypes: {} });
expect(store.get()).toEqual({});
@ -118,8 +113,7 @@ describe('GlobalsStore', () => {
describe('when underlying globals have not changed', () => {
it('retains updated values, but not if they are undeclared', () => {
const store = new GlobalsStore();
store.set({
const store = new GlobalsStore({
globals: {
arg1: 'arg1',
},
@ -152,8 +146,7 @@ describe('GlobalsStore', () => {
describe('when underlying globals have changed', () => {
it('retains a the same delta', () => {
const store = new GlobalsStore();
store.set({
const store = new GlobalsStore({
globals: {
arg1: 'arg1',
arg4: 'arg4',

17
lib/store/src/GlobalsStore.ts
View File

@ -14,11 +14,22 @@ const setUndeclaredWarning = deprecate(
);
export class GlobalsStore {
allowedGlobalNames: Set<string>;
// We use ! here because TS doesn't analyse the .set() function to see if it actually get set
allowedGlobalNames!: Set<string>;
initialGlobals: Globals;
initialGlobals!: Globals;
globals: Globals = {};
globals!: Globals;
constructor({
globals = {},
globalTypes = {},
}: {
globals?: Globals;
globalTypes?: GlobalTypes;
}) {
this.set({ globals, globalTypes });
}
set({ globals = {}, globalTypes = {} }: { globals?: Globals; globalTypes?: GlobalTypes }) {
const delta = this.initialGlobals && deepDiff(this.initialGlobals, this.globals);

5
lib/store/src/StoryIndexStore.test.ts
View File

@ -1,3 +1,5 @@
import { expect } from '@jest/globals';
import { StoryIndexStore } from './StoryIndexStore';
import { StoryIndex } from './types';
@ -7,18 +9,21 @@ const storyIndex: StoryIndex = {
v: 4,
entries: {
'component-one--a': {
type: 'story',
id: 'component-one--a',
title: 'Component One',
name: 'A',
importPath: './src/ComponentOne.stories.js',
},
'component-one--b': {
type: 'story',
id: 'component-one--b',
title: 'Component One',
name: 'B',
importPath: './src/ComponentOne.stories.js',
},
'component-two--c': {
type: 'story',
id: 'component-one--c',
title: 'Component Two',
name: 'C',

3
lib/store/src/StoryIndexStore.ts
View File

@ -1,5 +1,4 @@
import dedent from 'ts-dedent';
import { Channel } from '@storybook/addons';
import type { StoryId } from '@storybook/csf';
import memoize from 'memoizerific';
@ -13,8 +12,6 @@ const getImportPathMap = memoize(1)((entries: StoryIndex['entries']) =>
);
export class StoryIndexStore {
channel: Channel;
entries: StoryIndex['entries'];
constructor({ entries }: StoryIndex = { v: 4, entries: {} }) {

14
lib/store/src/StoryStore.test.ts
View File

@ -1,5 +1,6 @@
import type { AnyFramework, ProjectAnnotations } from '@storybook/csf';
import global from 'global';
import { expect } from '@jest/globals';
import { prepareStory } from './csf/prepareStory';
import { processCSFFile } from './csf/processCSFFile';
@ -76,10 +77,10 @@ describe('StoryStore', () => {
store.setProjectAnnotations(projectAnnotations);
store.initialize({ storyIndex, importFn, cache: false });
expect(store.projectAnnotations.globalTypes).toEqual({
expect(store.projectAnnotations!.globalTypes).toEqual({
a: { name: 'a', type: { name: 'string' } },
});
expect(store.projectAnnotations.argTypes).toEqual({
expect(store.projectAnnotations!.argTypes).toEqual({
a: { name: 'a', type: { name: 'string' } },
});
});
@ -90,10 +91,10 @@ describe('StoryStore', () => {
store.initialize({ storyIndex, importFn, cache: false });
store.setProjectAnnotations(projectAnnotations);
expect(store.projectAnnotations.globalTypes).toEqual({
expect(store.projectAnnotations!.globalTypes).toEqual({
a: { name: 'a', type: { name: 'string' } },
});
expect(store.projectAnnotations.argTypes).toEqual({
expect(store.projectAnnotations!.argTypes).toEqual({
a: { name: 'a', type: { name: 'string' } },
});
});
@ -408,7 +409,7 @@ describe('StoryStore', () => {
const story = await store.loadStory({ storyId: 'component-one--a' });
store.args.update(story.id, { foo: 'bar' });
store.globals.update({ a: 'c' });
store.globals!.update({ a: 'c' });
expect(store.getStoryContext(story)).toMatchObject({
args: { foo: 'bar' },
@ -455,8 +456,9 @@ describe('StoryStore', () => {
importFn.mockClear();
const csfFiles = await store.loadAllCSFFiles();
expect(csfFiles).not.toBeUndefined();
expect(Object.keys(csfFiles)).toEqual([
expect(Object.keys(csfFiles!)).toEqual([
'./src/ComponentOne.stories.js',
'./src/ComponentTwo.stories.js',
]);

65
lib/store/src/StoryStore.ts
View File

@ -38,13 +38,13 @@ const CSF_CACHE_SIZE = 1000;
const STORY_CACHE_SIZE = 10000;
export class StoryStore<TFramework extends AnyFramework> {
storyIndex: StoryIndexStore;
storyIndex?: StoryIndexStore;
importFn: ModuleImportFn;
importFn?: ModuleImportFn;
projectAnnotations: NormalizedProjectAnnotations<TFramework>;
projectAnnotations?: NormalizedProjectAnnotations<TFramework>;
globals: GlobalsStore;
globals?: GlobalsStore;
args: ArgsStore;
@ -58,10 +58,10 @@ export class StoryStore<TFramework extends AnyFramework> {
initializationPromise: SynchronousPromise<void>;
resolveInitializationPromise: () => void;
// This *does* get set in the constructor but the semantics of `new SynchronousPromise` trip up TS
resolveInitializationPromise!: () => void;
constructor() {
this.globals = new GlobalsStore();
this.args = new ArgsStore();
this.hooks = {};
@ -82,7 +82,11 @@ export class StoryStore<TFramework extends AnyFramework> {
this.projectAnnotations = normalizeProjectAnnotations(projectAnnotations);
const { globals, globalTypes } = projectAnnotations;
if (this.globals) {
this.globals.set({ globals, globalTypes });
} else {
this.globals = new GlobalsStore({ globals, globalTypes });
}
}
initialize({
@ -114,6 +118,8 @@ export class StoryStore<TFramework extends AnyFramework> {
importFn?: ModuleImportFn;
storyIndex?: StoryIndex;
}) {
if (!this.storyIndex) throw new Error(`onStoriesChanged called before initialization`);
if (importFn) this.importFn = importFn;
if (storyIndex) this.storyIndex.entries = storyIndex.entries;
if (this.cachedCSFFiles) await this.cacheAllCSFFiles();
@ -122,11 +128,15 @@ export class StoryStore<TFramework extends AnyFramework> {
// Get an entry from the index, waiting on initialization if necessary
async storyIdToEntry(storyId: StoryId) {
await this.initializationPromise;
return this.storyIndex.storyIdToEntry(storyId);
// The index will always be set before the initialization promise returns
return this.storyIndex!.storyIdToEntry(storyId);
}
// To load a single CSF file to service a story we need to look up the importPath in the index
loadCSFFileByStoryId(storyId: StoryId): PromiseLike<CSFFile<TFramework>> {
if (!this.storyIndex || !this.importFn)
throw new Error(`loadCSFFileByStoryId called before initialization`);
const { importPath, title } = this.storyIndex.storyIdToEntry(storyId);
return this.importFn(importPath).then((moduleExports) =>
// We pass the title in here as it may have been generated by autoTitle on the server.
@ -135,6 +145,8 @@ export class StoryStore<TFramework extends AnyFramework> {
}
loadAllCSFFiles(): PromiseLike<StoryStore<TFramework>['cachedCSFFiles']> {
if (!this.storyIndex) throw new Error(`loadAllCSFFiles called before initialization`);
const importPaths: Record<Path, StoryId> = {};
Object.entries(this.storyIndex.entries).forEach(([storyId, { importPath }]) => {
importPaths[importPath] = storyId;
@ -179,6 +191,8 @@ export class StoryStore<TFramework extends AnyFramework> {
storyId: StoryId;
csfFile: CSFFile<TFramework>;
}): Story<TFramework> {
if (!this.projectAnnotations) throw new Error(`storyFromCSFFile called before initialization`);
const storyAnnotations = csfFile.stories[storyId];
if (!storyAnnotations) {
throw new Error(`Didn't find '${storyId}' in CSF file, this is unexpected`);
@ -197,6 +211,9 @@ export class StoryStore<TFramework extends AnyFramework> {
// If we have a CSF file we can get all the stories from it synchronously
componentStoriesFromCSFFile({ csfFile }: { csfFile: CSFFile<TFramework> }): Story<TFramework>[] {
if (!this.storyIndex)
throw new Error(`componentStoriesFromCSFFile called before initialization`);
return Object.keys(this.storyIndex.entries)
.filter((storyId: StoryId) => !!csfFile.stories[storyId])
.map((storyId: StoryId) => this.storyFromCSFFile({ storyId, csfFile }));
@ -205,6 +222,10 @@ export class StoryStore<TFramework extends AnyFramework> {
async loadDocsFileById(
docsId: StoryId
): Promise<{ docsExports: ModuleExports; csfFiles: CSFFile<TFramework>[] }> {
const { storyIndex } = this;
if (!storyIndex || !this.importFn)
throw new Error(`componentStoriesFromCSFFile called before initialization`);
const entry = await this.storyIdToEntry(docsId);
if (entry.type !== 'docs') throw new Error(`Cannot load docs file for id ${docsId}`);
@ -213,7 +234,7 @@ export class StoryStore<TFramework extends AnyFramework> {
const [docsExports, ...csfFiles] = (await Promise.all([
this.importFn(importPath),
...storiesImports.map((storyImportPath) => {
const firstStoryEntry = this.storyIndex.importPathToEntry(storyImportPath);
const firstStoryEntry = storyIndex.importPathToEntry(storyImportPath);
return this.loadCSFFileByStoryId(firstStoryEntry.id);
}),
])) as [ModuleExports, ...CSFFile<TFramework>[]];
@ -232,6 +253,8 @@ export class StoryStore<TFramework extends AnyFramework> {
// A prepared story does not include args, globals or hooks. These are stored in the story store
// and updated separtely to the (immutable) story.
getStoryContext(story: Story<TFramework>): Omit<StoryContextForLoaders<TFramework>, 'viewMode'> {
if (!this.globals) throw new Error(`getStoryContext called before initialization`);
return {
...story,
args: this.args.get(story.id),
@ -247,15 +270,17 @@ export class StoryStore<TFramework extends AnyFramework> {
extract(
options: ExtractOptions = { includeDocsOnly: false }
): Record<StoryId, StoryContextForEnhancers<TFramework>> {
if (!this.cachedCSFFiles) {
if (!this.storyIndex) throw new Error(`extract called before initialization`);
const { cachedCSFFiles } = this;
if (!cachedCSFFiles)
throw new Error('Cannot call extract() unless you call cacheAllCSFFiles() first.');
}
return Object.entries(this.storyIndex.entries).reduce(
(acc, [storyId, { type, importPath }]) => {
if (type === 'docs') return acc;
const csfFile = this.cachedCSFFiles[importPath];
const csfFile = cachedCSFFiles[importPath];
const story = this.storyFromCSFFile({ storyId, csfFile });
if (!options.includeDocsOnly && story.parameters.docsOnly) {
@ -282,6 +307,8 @@ export class StoryStore<TFramework extends AnyFramework> {
}
getSetStoriesPayload() {
if (!this.globals) throw new Error(`getSetStoriesPayload called before initialization`);
const stories = this.extract({ includeDocsOnly: true });
const kindParameters: Parameters = Object.values(stories).reduce(
@ -305,11 +332,14 @@ export class StoryStore<TFramework extends AnyFramework> {
// It is used to allow v7 Storybooks to be composed in v6 Storybooks, which expect a
// `stories.json` file with legacy fields (`kind` etc).
getStoriesJsonData = (): StoryIndexV3 => {
const { storyIndex } = this;
if (!storyIndex) throw new Error(`getStoriesJsonData called before initialization`);
const value = this.getSetStoriesPayload();
const allowedParameters = ['fileName', 'docsOnly', 'framework', '__id', '__isArgsStory'];
const stories: Record<StoryId, V2CompatIndexEntry> = mapValues(value.stories, (story) => {
const { importPath } = this.storyIndex.entries[story.id];
const { importPath } = storyIndex.entries[story.id];
return {
...pick(story, ['id', 'name', 'title']),
importPath,
@ -332,13 +362,16 @@ export class StoryStore<TFramework extends AnyFramework> {
};
raw(): BoundStory<TFramework>[] {
return Object.values(this.extract()).map(({ id }: { id: StoryId }) => this.fromId(id));
return Object.values(this.extract())
.map(({ id }: { id: StoryId }) => this.fromId(id))
.filter(Boolean) as BoundStory<TFramework>[];
}
fromId(storyId: StoryId): BoundStory<TFramework> {
if (!this.cachedCSFFiles) {
fromId(storyId: StoryId): BoundStory<TFramework> | null {
if (!this.storyIndex) throw new Error(`fromId called before initialization`);
if (!this.cachedCSFFiles)
throw new Error('Cannot call fromId/raw() unless you call cacheAllCSFFiles() first.');
}
let importPath;
try {

17
lib/store/src/args.test.ts
View File

@ -1,4 +1,7 @@
import { once } from '@storybook/client-logger';
import { expect } from '@jest/globals';
import { SBType } from '@storybook/csf';
import {
combineArgs,
groupArgsByTarget,
@ -7,13 +10,13 @@ import {
validateOptions,
} from './args';
const stringType = { name: 'string' };
const numberType = { name: 'number' };
const booleanType = { name: 'boolean' };
const enumType = { name: 'enum' };
const functionType = { name: 'function' };
const numArrayType = { name: 'array', value: numberType };
const boolObjectType = { name: 'object', value: { bool: booleanType } };
const stringType: SBType = { name: 'string' };
const numberType: SBType = { name: 'number' };
const booleanType: SBType = { name: 'boolean' };
const enumType: SBType = { name: 'enum', value: [1, 2, 3] };
const functionType: SBType = { name: 'function' };
const numArrayType: SBType = { name: 'array', value: numberType };
const boolObjectType: SBType = { name: 'object', value: { bool: booleanType } };
jest.mock('@storybook/client-logger');

2
lib/store/src/args.ts
View File

@ -151,7 +151,7 @@ export function groupArgsByTarget<TArgs = Args>({
}: StoryContext<AnyFramework, TArgs>) {
const groupedArgs: Record<string, Partial<TArgs>> = {};
(Object.entries(args) as [keyof TArgs, any][]).forEach(([name, value]) => {
const { target = NO_TARGET_NAME } = (argTypes[name] || {}) as { target: string };
const { target = NO_TARGET_NAME } = (argTypes[name] || {}) as { target?: string };
groupedArgs[target] = groupedArgs[target] || {};
groupedArgs[target][name] = value;

1
lib/store/src/autoTitle.test.ts
View File

@ -1,4 +1,5 @@
import { normalizeStoriesEntry } from '@storybook/core-common';
import { expect } from '@jest/globals';
import { userOrAutoTitleFromSpecifier as userOrAuto } from './autoTitle';

2
lib/store/src/csf/composeConfigs.test.ts
View File

@ -1,3 +1,5 @@
import { expect } from '@jest/globals';
import { composeConfigs } from './composeConfigs';
describe('composeConfigs', () => {

2
lib/store/src/csf/normalizeInputTypes.test.ts
View File

@ -1,3 +1,5 @@
import { expect } from '@jest/globals';
import { normalizeInputType, normalizeInputTypes } from './normalizeInputTypes';
describe('normalizeInputType', () => {

4
lib/store/src/csf/normalizeProjectAnnotations.ts
View File

@ -1,4 +1,4 @@
import type { AnyFramework, ProjectAnnotations } from '@storybook/csf';
import type { AnyFramework, ArgTypes, ProjectAnnotations } from '@storybook/csf';
import { inferArgTypes } from '../inferArgTypes';
import { inferControls } from '../inferControls';
@ -12,7 +12,7 @@ export function normalizeProjectAnnotations<TFramework extends AnyFramework>({
...annotations
}: ProjectAnnotations<TFramework>): NormalizedProjectAnnotations<TFramework> {
return {
...(argTypes && { argTypes: normalizeInputTypes(argTypes) }),
...(argTypes && { argTypes: normalizeInputTypes(argTypes as ArgTypes) }),
...(globalTypes && { globalTypes: normalizeInputTypes(globalTypes) }),
argTypesEnhancers: [
...(argTypesEnhancers || []),

42
lib/store/src/csf/normalizeStory.test.ts
View File

@ -1,12 +1,10 @@
import { expect } from '@jest/globals';
import { AnyFramework, StoryAnnotationsOrFn } from '@storybook/csf';
import { normalizeStory } from './normalizeStory';
describe('normalizeStory', () => {
describe('id generation', () => {
it('combines title and export name', () => {
expect(normalizeStory('name', {}, { title: 'title' }).id).toEqual('title--name');
});
it('respects component id', () => {
expect(normalizeStory('name', {}, { title: 'title', id: 'component-id' }).id).toEqual(
'component-id--name'
@ -27,22 +25,28 @@ describe('normalizeStory', () => {
describe('name', () => {
it('preferences story.name over story.storyName', () => {
expect(
normalizeStory('export', { name: 'name', storyName: 'storyName' }, { title: 'title' }).name
normalizeStory(
'export',
{ name: 'name', storyName: 'storyName' },
{ id: 'title', title: 'title' }
).name
).toEqual('name');
expect(normalizeStory('export', { storyName: 'storyName' }, { title: 'title' }).name).toEqual(
'storyName'
);
expect(
normalizeStory('export', { storyName: 'storyName' }, { id: 'title', title: 'title' }).name
).toEqual('storyName');
});
it('falls back to capitalized export name', () => {
expect(normalizeStory('exportOne', {}, { title: 'title' }).name).toEqual('Export One');
expect(normalizeStory('exportOne', {}, { id: 'title', title: 'title' }).name).toEqual(
'Export One'
);
});
});
describe('user-provided story function', () => {
it('should normalize into an object', () => {
const storyFn = () => {};
const meta = { title: 'title' };
const meta = { id: 'title', title: 'title' };
expect(normalizeStory('storyExport', storyFn, meta)).toMatchInlineSnapshot(`
Object {
"argTypes": Object {},
@ -63,21 +67,21 @@ describe('normalizeStory', () => {
describe('render function', () => {
it('implicit render function', () => {
const storyObj = {};
const meta = { title: 'title' };
const meta = { id: 'title', title: 'title' };
const normalized = normalizeStory('storyExport', storyObj, meta);
expect(normalized.render).toBeUndefined();
});
it('user-provided story render function', () => {
const storyObj = { render: jest.fn() };
const meta = { title: 'title', render: jest.fn() };
const meta = { id: 'title', title: 'title', render: jest.fn() };
const normalized = normalizeStory('storyExport', storyObj, meta);
expect(normalized.render).toBe(storyObj.render);
});
it('user-provided meta render function', () => {
const storyObj = {};
const meta = { title: 'title', render: jest.fn() };
const meta = { id: 'title', title: 'title', render: jest.fn() };
const normalized = normalizeStory('storyExport', storyObj, meta);
expect(normalized.render).toBeUndefined();
});
@ -86,21 +90,21 @@ describe('normalizeStory', () => {
describe('play function', () => {
it('no render function', () => {
const storyObj = {};
const meta = { title: 'title' };
const meta = { id: 'title', title: 'title' };
const normalized = normalizeStory('storyExport', storyObj, meta);
expect(normalized.play).toBeUndefined();
});
it('user-provided story render function', () => {
const storyObj = { play: jest.fn() };
const meta = { title: 'title', play: jest.fn() };
const meta = { id: 'title', title: 'title', play: jest.fn() };
const normalized = normalizeStory('storyExport', storyObj, meta);
expect(normalized.play).toBe(storyObj.play);
});
it('user-provided meta render function', () => {
const storyObj = {};
const meta = { title: 'title', play: jest.fn() };
const meta = { id: 'title', title: 'title', play: jest.fn() };
const normalized = normalizeStory('storyExport', storyObj, meta);
expect(normalized.play).toBeUndefined();
});
@ -109,7 +113,7 @@ describe('normalizeStory', () => {
describe('annotations', () => {
it('empty annotations', () => {
const storyObj = {};
const meta = { title: 'title' };
const meta = { id: 'title', title: 'title' };
const normalized = normalizeStory('storyExport', storyObj, meta);
expect(normalized).toMatchInlineSnapshot(`
Object {
@ -135,7 +139,7 @@ describe('normalizeStory', () => {
args: { storyArg: 'val' },
argTypes: { storyArgType: { type: 'string' } },
};
const meta = { title: 'title' };
const meta = { id: 'title', title: 'title' };
const { moduleExport, ...normalized } = normalizeStory('storyExport', storyObj, meta);
expect(normalized).toMatchInlineSnapshot(`
Object {
@ -182,7 +186,7 @@ describe('normalizeStory', () => {
argTypes: { storyArgType2: { type: 'string' } },
},
};
const meta = { title: 'title' };
const meta = { id: 'title', title: 'title' };
const { moduleExport, ...normalized } = normalizeStory('storyExport', storyObj, meta);
expect(normalized).toMatchInlineSnapshot(`
Object {

21
lib/store/src/csf/normalizeStory.ts
View File

@ -1,16 +1,16 @@
import type {
ComponentAnnotations,
AnyFramework,
LegacyStoryAnnotationsOrFn,
StoryId,
StoryAnnotations,
StoryFn,
ArgTypes,
} from '@storybook/csf';
import { storyNameFromExport, toId } from '@storybook/csf';
import dedent from 'ts-dedent';
import { logger } from '@storybook/client-logger';
import deprecate from 'util-deprecate';
import type { NormalizedStoryAnnotations } from '../types';
import type { NormalizedComponentAnnotations, NormalizedStoryAnnotations } from '../types';
import { normalizeInputTypes } from './normalizeInputTypes';
const deprecatedStoryAnnotation = dedent`
@ -25,16 +25,11 @@ const deprecatedStoryAnnotationWarning = deprecate(() => {}, deprecatedStoryAnno
export function normalizeStory<TFramework extends AnyFramework>(
key: StoryId,
storyAnnotations: LegacyStoryAnnotationsOrFn<TFramework>,
meta: ComponentAnnotations<TFramework>
meta: NormalizedComponentAnnotations<TFramework>
): NormalizedStoryAnnotations<TFramework> {
let userStoryFn: StoryFn<TFramework>;
let storyObject: StoryAnnotations<TFramework>;
if (typeof storyAnnotations === 'function') {
userStoryFn = storyAnnotations;
storyObject = storyAnnotations;
} else {
storyObject = storyAnnotations;
}
const storyObject: StoryAnnotations<TFramework> = storyAnnotations;
const userStoryFn: StoryFn<TFramework> | null =
typeof storyAnnotations === 'function' ? storyAnnotations : null;
const { story } = storyObject;
if (story) {
@ -51,12 +46,12 @@ export function normalizeStory<TFramework extends AnyFramework>(
const decorators = [...(storyObject.decorators || []), ...(story?.decorators || [])];
const parameters = { ...story?.parameters, ...storyObject.parameters };
const args = { ...story?.args, ...storyObject.args };
const argTypes = { ...story?.argTypes, ...storyObject.argTypes };
const argTypes = { ...(story?.argTypes as ArgTypes), ...(storyObject.argTypes as ArgTypes) };
const loaders = [...(storyObject.loaders || []), ...(story?.loaders || [])];
const { render, play } = storyObject;
// eslint-disable-next-line no-underscore-dangle
const id = parameters.__id || toId(meta.id || meta.title, exportName);
const id = parameters.__id || toId(meta.id, exportName);
return {
moduleExport: storyAnnotations,
id,

8
lib/store/src/csf/prepareStory.test.ts
View File

@ -1,4 +1,5 @@
import global from 'global';
import { expect } from '@jest/globals';
import { addons, HooksContext } from '@storybook/addons';
import type {
AnyFramework,
@ -7,6 +8,7 @@ import type {
SBScalarType,
StoryContext,
} from '@storybook/csf';
import { NO_TARGET_NAME } from '../args';
import { prepareStory } from './prepareStory';
@ -193,7 +195,7 @@ describe('prepareStory', () => {
describe('argsEnhancers', () => {
it('are applied in the right order', () => {
const run = [];
const run: number[] = [];
const enhancerOne: ArgsEnhancer<AnyFramework> = () => {
run.push(1);
return {};
@ -351,7 +353,7 @@ describe('prepareStory', () => {
it('awaits the result of a loader', async () => {
const loader = jest.fn(async () => new Promise((r) => setTimeout(() => r({ foo: 7 }), 100)));
const { applyLoaders } = prepareStory(
{ id, name, loaders: [loader], moduleExport },
{ id, name, loaders: [loader as any], moduleExport },
{ id, title },
{ render }
);
@ -387,7 +389,7 @@ describe('prepareStory', () => {
});
it('later loaders override earlier loaders', async () => {
const loaders = [
const loaders: any[] = [
async () => new Promise((r) => setTimeout(() => r({ foo: 7 }), 100)),
async () => new Promise((r) => setTimeout(() => r({ foo: 3 }), 50)),
];

7
lib/store/src/csf/prepareStory.ts
View File

@ -11,6 +11,7 @@ import type {
StoryContext,
AnyFramework,
StrictArgTypes,
StoryContextForLoaders,
} from '@storybook/csf';
import { includeConditionalArg } from '@storybook/csf';
@ -84,6 +85,8 @@ export function prepareStory<TFramework extends AnyFramework>(
componentAnnotations.render ||
projectAnnotations.render;
if (!render) throw new Error(`No render function available for storyId '${id}'`);
const passedArgTypes: StrictArgTypes = combineParameters(
projectAnnotations.argTypes,
componentAnnotations.argTypes,
@ -154,7 +157,7 @@ export function prepareStory<TFramework extends AnyFramework>(
};
}
const applyLoaders = async (context: StoryContext<TFramework>) => {
const applyLoaders = async (context: StoryContextForLoaders<TFramework>) => {
const loadResults = await Promise.all(loaders.map((loader) => loader(context)));
const loaded = Object.assign({}, ...loadResults);
return { ...context, loaded };
@ -183,7 +186,7 @@ export function prepareStory<TFramework extends AnyFramework>(
const unboundStoryFn = (context: StoryContext<TFramework>) => {
let finalContext: StoryContext<TFramework> = context;
if (global.FEATURES?.argTypeTargetsV7) {
const argsByTarget = groupArgsByTarget({ args: context.args, ...context });
const argsByTarget = groupArgsByTarget(context);
finalContext = {
...context,
allArgs: context.args,

2
lib/store/src/csf/processCSFFile.test.ts
View File

@ -1,3 +1,5 @@
import { expect } from '@jest/globals';
import { processCSFFile } from './processCSFFile';
describe('processCSFFile', () => {

7
lib/store/src/csf/processCSFFile.ts
View File

@ -24,10 +24,9 @@ const checkStorySort = (parameters: Parameters) => {
if (options?.storySort) logger.error('The storySort option parameter can only be set globally');
};
const checkDisallowedParameters = (parameters: Parameters) => {
if (!parameters) {
return;
}
const checkDisallowedParameters = (parameters?: Parameters) => {
if (!parameters) return;
checkGlobals(parameters);
checkStorySort(parameters);
};

18
lib/store/src/csf/testing-utils/index.ts
View File

@ -8,6 +8,7 @@ import {
Args,
StoryContext,
Parameters,
LegacyStoryAnnotationsOrFn,
} from '@storybook/csf';
import { composeConfigs } from '../composeConfigs';
@ -50,7 +51,7 @@ export function composeStory<
TFramework extends AnyFramework = AnyFramework,
TArgs extends Args = Args
>(
storyAnnotations: AnnotatedStoryFn<TFramework, TArgs> | StoryAnnotations<TFramework, TArgs>,
storyAnnotations: LegacyStoryAnnotationsOrFn<TFramework>,
componentAnnotations: ComponentAnnotations<TFramework, TArgs>,
projectAnnotations: ProjectAnnotations<TFramework> = GLOBAL_STORYBOOK_PROJECT_ANNOTATIONS,
defaultConfig: ProjectAnnotations<TFramework> = {},
@ -63,15 +64,17 @@ export function composeStory<
// @TODO: Support auto title
// eslint-disable-next-line no-param-reassign
componentAnnotations.title = componentAnnotations.title ?? 'ComposedStory';
const normalizedComponentAnnotations = normalizeComponentAnnotations(componentAnnotations);
const normalizedComponentAnnotations =
normalizeComponentAnnotations<TFramework>(componentAnnotations);
const storyName =
exportsName ||
storyAnnotations.storyName ||
storyAnnotations.story?.name ||
storyAnnotations.name;
storyAnnotations.name ||
'unknown';
const normalizedStory = normalizeStory(
const normalizedStory = normalizeStory<TFramework>(
storyName,
storyAnnotations,
normalizedComponentAnnotations
@ -121,7 +124,12 @@ export function composeStories<TModule extends CSFExports>(
}
const result = Object.assign(storiesMap, {
[exportsName]: composeStoryFn(story, meta, globalConfig, exportsName),
[exportsName]: composeStoryFn(
story as LegacyStoryAnnotationsOrFn,
meta,
globalConfig,
exportsName
),
});
return result;
}, {});

11
lib/store/src/decorators.test.ts
View File

@ -1,3 +1,4 @@
import { expect } from '@jest/globals';
import type { AnyFramework, StoryContext } from '@storybook/csf';
import { defaultDecorateStory } from './decorators';
@ -15,7 +16,7 @@ function makeContext(input: Record<string, any> = {}): StoryContext<AnyFramework
describe('client-api.decorators', () => {
it('calls decorators in out to in order', () => {
const order = [];
const order: number[] = [];
const decorators = [
(s) => order.push(1) && s(),
(s) => order.push(2) && s(),
@ -29,7 +30,7 @@ describe('client-api.decorators', () => {
});
it('passes context through to sub decorators', () => {
const contexts = [];
const contexts: StoryContext[] = [];
const decorators = [
(s, c) => contexts.push(c) && s({ args: { k: 1 } }),
(s, c) => contexts.push(c) && s({ args: { k: 2 } }),
@ -43,7 +44,7 @@ describe('client-api.decorators', () => {
});
it('passes context through to sub decorators additively', () => {
const contexts = [];
const contexts: StoryContext[] = [];
const decorators = [
(s, c) => contexts.push(c) && s({ args: { a: 1 } }),
(s, c) => contexts.push(c) && s({ globals: { g: 2 } }),
@ -78,7 +79,7 @@ describe('client-api.decorators', () => {
// both story functions would receive {story: 2}. The assumption here is that we'll never render
// the same story twice at the same time.
it('does not interleave contexts if two decorated stories are call simultaneously', async () => {
const contexts = [];
const contexts: StoryContext[] = [];
let resolve;
const fence = new Promise((r) => {
resolve = r;
@ -104,7 +105,7 @@ describe('client-api.decorators', () => {
});
it('DOES NOT merge core metadata or pass through core metadata keys in context', () => {
const contexts = [];
const contexts: StoryContext[] = [];
const decorators = [
(s, c) =>
contexts.push(c) &&

3
lib/store/src/decorators.ts
View File

@ -69,6 +69,9 @@ export function defaultDecorateStory<TFramework extends AnyFramework>(
const bindWithContext =
(decoratedStoryFn: LegacyStoryFn<TFramework>): PartialStoryFn<TFramework> =>
(update) => {
// This code path isn't possible because we always set `contextStore.value` before calling
// `decoratedWithContextStore`, but TS doesn't know that.
if (!contextStore.value) throw new Error('Decorated function called without init');
contextStore.value = {
...contextStore.value,
...sanitizeStoryContextUpdate(update),

11
lib/store/src/hooks.test.js → lib/store/src/hooks.test.ts
View File

@ -1,3 +1,4 @@
import { expect } from '@jest/globals';
import {
FORCE_RE_RENDER,
STORY_RENDERED,
@ -6,6 +7,8 @@ import {
UPDATE_GLOBALS,
} from '@storybook/core-events';
import { addons } from '@storybook/addons';
import { DecoratorFunction, StoryContext } from '@storybook/csf';
import { defaultDecorateStory } from './decorators';
import {
applyHooks,
@ -60,8 +63,8 @@ beforeEach(() => {
const decorateStory = applyHooks(defaultDecorateStory);
const run = (storyFn, decorators = [], context) =>
decorateStory(storyFn, decorators)({ ...context, hooks });
const run = (storyFn, decorators: DecoratorFunction[] = [], context = {}) =>
decorateStory(storyFn, decorators)({ ...context, hooks } as Partial<StoryContext>);
describe('Preview hooks', () => {
describe('useEffect', () => {
@ -321,7 +324,7 @@ describe('Preview hooks', () => {
expect(result).toBe(callback);
});
it('returns the previous callback reference if deps are unchanged', () => {
const callbacks = [];
const callbacks: (() => void)[] = [];
const storyFn = () => {
const callback = useCallback(() => {}, []);
callbacks.push(callback);
@ -331,7 +334,7 @@ describe('Preview hooks', () => {
expect(callbacks[0]).toBe(callbacks[1]);
});
it('creates new callback reference if deps are changed', () => {
const callbacks = [];
const callbacks: (() => void)[] = [];
let counter = 0;
const storyFn = () => {
counter += 1;

1
lib/store/src/inferArgTypes.test.ts
View File

@ -1,4 +1,5 @@
import { logger } from '@storybook/client-logger';
import { expect } from '@jest/globals';
import { inferArgTypes } from './inferArgTypes';

4
lib/store/src/inferControls.test.ts
View File

@ -1,5 +1,7 @@
import { StoryContextForEnhancers } from '@storybook/store';
import { expect } from '@jest/globals';
import { logger } from '@storybook/client-logger';
import { StoryContextForEnhancers } from '@storybook/csf';
import { argTypesEnhancers } from './inferControls';
const getStoryContext = (overrides: any = {}): StoryContextForEnhancers => ({

4
lib/store/src/inferControls.ts
View File

@ -11,13 +11,13 @@ type ControlsMatchers = {
const inferControl = (argType: StrictInputType, name: string, matchers: ControlsMatchers): any => {
const { type, options } = argType;
if (!type && !options) {
if (!type) {
return undefined;
}
// args that end with background or color e.g. iconColor
if (matchers.color && matchers.color.test(name)) {
const controlType = argType.type.name;
const controlType = type.name;
if (controlType === 'string') {
return { control: { type: 'color' } };

1
lib/store/src/parameters.test.ts
View File

@ -1,3 +1,4 @@
import { expect } from '@jest/globals';
import { combineParameters } from './parameters';
describe('client-api.parameters', () => {

7
lib/store/src/parameters.ts
View File

@ -10,8 +10,9 @@ import isPlainObject from 'lodash/isPlainObject';
*/
export const combineParameters = (...parameterSets: (Parameters | undefined)[]) => {
const mergeKeys: Record<string, boolean> = {};
const combined = parameterSets.filter(Boolean).reduce((acc, p) => {
Object.entries(p).forEach(([key, value]) => {
const definedParametersSets = parameterSets.filter(Boolean) as Parameters[];
const combined = definedParametersSets.reduce((acc, parameters) => {
Object.entries(parameters).forEach(([key, value]) => {
const existing = acc[key];
if (Array.isArray(value) || typeof existing === 'undefined') {
acc[key] = value;
@ -26,7 +27,7 @@ export const combineParameters = (...parameterSets: (Parameters | undefined)[])
}, {} as Parameters);
Object.keys(mergeKeys).forEach((key) => {
const mergeValues = parameterSets
const mergeValues = definedParametersSets
.filter(Boolean)
.map((p) => p[key])
.filter((value) => typeof value !== 'undefined');

2
lib/store/src/sortStories.ts
View File

@ -37,7 +37,7 @@ export const sortStoriesV7 = (
throw new Error(dedent`
Error sorting stories with sort parameter ${storySortParameter}:
> ${err.message}
> ${(err as Error).message}
Are you using a V6-style sort function in V7 mode?

10
lib/store/src/storySort.test.ts
View File

@ -1,7 +1,12 @@
import { expect } from '@jest/globals';
import { StoryId } from '@storybook/csf';
import { StoryIndexEntry } from '@storybook/store';
import { storySort } from './storySort';
describe('preview.storySort', () => {
const fixture = {
const fixture: Record<StoryId, StoryIndexEntry> = Object.fromEntries(
Object.entries({
a: { title: 'a' },
á: { title: 'á' },
A: { title: 'A' },
@ -19,7 +24,8 @@ describe('preview.storySort', () => {
c_b__b: { title: 'c / b', name: 'b' },
c_b__c: { title: 'c / b', name: 'c' },
c__c: { title: 'c', name: 'c' },
};
}).map(([id, entry]) => [id, { type: 'story', name: 'name', ...entry, id, importPath: id }])
);
it('uses configure order by default', () => {
const sortFn = storySort();

29
lib/store/src/types.ts
View File

@ -22,7 +22,9 @@ import type {
PartialStoryFn,
Parameters,
} from '@storybook/csf';
import type { StoryIndexEntry, DocsIndexEntry, IndexEntry } from '@storybook/addons';
export type { StoryIndexEntry, DocsIndexEntry, IndexEntry };
export type { StoryId, Parameters };
export type Path = string;
export type ModuleExport = any;
@ -51,8 +53,9 @@ export type NormalizedProjectAnnotations<TFramework extends AnyFramework = AnyFr
export type NormalizedComponentAnnotations<TFramework extends AnyFramework = AnyFramework> =
ComponentAnnotations<TFramework> & {
// Useful to guarantee that id exists
// Useful to guarantee that id & title exists
id: ComponentId;
title: ComponentTitle;
argTypes?: StrictArgTypes;
};
@ -64,6 +67,7 @@ export type NormalizedStoryAnnotations<TFramework extends AnyFramework = AnyFram
// You cannot actually set id on story annotations, but we normalize it to be there for convience
id: StoryId;
argTypes?: StrictArgTypes;
name: StoryName;
userStoryFn?: StoryFn<TFramework>;
};
@ -80,8 +84,10 @@ export type Story<TFramework extends AnyFramework = AnyFramework> =
unboundStoryFn: LegacyStoryFn<TFramework>;
applyLoaders: (
context: StoryContextForLoaders<TFramework>
) => Promise<StoryContext<TFramework>>;
playFunction: (context: StoryContext<TFramework>) => Promise<void> | void;
) => Promise<
StoryContextForLoaders<TFramework> & { loaded: StoryContext<TFramework>['loaded'] }
>;
playFunction?: (context: StoryContext<TFramework>) => Promise<void> | void;
};
export type BoundStory<TFramework extends AnyFramework = AnyFramework> = Story<TFramework> & {
@ -99,23 +105,6 @@ export declare type RenderContext<TFramework extends AnyFramework = AnyFramework
unboundStoryFn: LegacyStoryFn<TFramework>;
};
interface BaseIndexEntry {
id: StoryId;
name: StoryName;
title: ComponentTitle;
importPath: Path;
}
export type StoryIndexEntry = BaseIndexEntry & {
type: 'story';
};
export type DocsIndexEntry = BaseIndexEntry & {
storiesImports: Path[];
type: 'docs';
legacy?: boolean;
};
export type IndexEntry = StoryIndexEntry | DocsIndexEntry;
export interface V2CompatIndexEntry extends Omit<StoryIndexEntry, 'type'> {
kind: StoryIndexEntry['title'];
story: StoryIndexEntry['name'];

1
lib/store/tsconfig.json
View File

@ -1,6 +1,7 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"strict": true
},
"include": [
"src/**/*"

2
renderers/react/src/testing/index.ts
View File

@ -83,7 +83,7 @@ export function composeStory<TArgs = Args>(
exportsName?: string
) {
return originalComposeStory<ReactFramework, TArgs>(
story,
story as ComposedStory<ReactFramework, Args>,
componentAnnotations,
projectAnnotations,
defaultProjectAnnotations,