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

Merge remote-tracking branch 'origin/future-hybrid-stories-index' into future/docs2/manager-ui

Browse Source
This commit is contained in:
Tom Coleman 2022-04-23 12:58:08 +10:00
commit 0aeb9b048f
20 changed files with 641 additions and 4028 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
examples/external-docs/src/blocks.tsx
View File

@ -85,11 +85,12 @@ export const DocsProvider: React.FC = ({ children }) => {
}
knownCsfFiles[importPath][exportName] = storyExport;
storyIndex.stories[storyId] = {
storyIndex.entries[storyId] = {
id: storyId,
importPath,
title,
name: 'Name',
type: 'story',
};
};

1
examples/react-ts/src/AccountForm.stories.tsx
View File

@ -7,7 +7,6 @@ import { ComponentStoryObj, ComponentMeta } from '@storybook/react';
import { screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { AccountForm, AccountFormProps } from './AccountForm';
import ButtonMeta from './button.stories';
export default {
// Title not needed due to CSF3 auto-title

3831
examples/react-ts/src/__snapshots__/storyshots.test.ts.snap
View File

File diff suppressed because it is too large Load Diff

18
lib/api/src/lib/stories.ts
View File

@ -123,22 +123,32 @@ export type SetStoriesPayload =
// The data recevied via the story index
type Path = string;
export interface StoryIndexEntry {
interface BaseIndexEntry {
id: StoryId;
name: StoryName;
title: ComponentTitle;
importPath: Path;
type?: 'story' | 'docs';
}
export type StoryIndexEntry = BaseIndexEntry & {
type: 'story';
};
export interface StoryIndexV3 {
v: 3;
stories: Record<StoryId, StoryIndexEntry>;
stories: Record<StoryId, Omit<StoryIndexEntry, 'type'>>;
}
export type DocsIndexEntry = BaseIndexEntry & {
storiesImports: Path[];
type: 'docs';
};
export type IndexEntry = StoryIndexEntry | DocsIndexEntry;
export interface StoryIndex {
v: number;
entries: Record<StoryId, StoryIndexEntry>;
entries: Record<StoryId, IndexEntry>;
}
const warnLegacyShowRoots = deprecate(

3
lib/client-api/src/ClientApi.ts
View File

@ -359,9 +359,8 @@ export class ClientApi<TFramework extends AnyFramework> {
title: csfExports.default.title,
name: storyName,
importPath: fileName,
storiesImports: [],
type: 'story',
};
return api;
};

6
lib/client-api/src/StoryStoreFacade.ts
View File

@ -11,7 +11,7 @@ import type {
StoryIndex,
ModuleExports,
Story,
StoryIndexEntry,
IndexEntry,
} from '@storybook/store';
import { logger } from '@storybook/client-logger';
@ -83,7 +83,7 @@ export class StoryStoreFacade<TFramework extends AnyFramework> {
);
// NOTE: the sortStoriesV6 version returns the v7 data format. confusing but more convenient!
let sortedV7: StoryIndexEntry[];
let sortedV7: IndexEntry[];
try {
sortedV7 = sortStoriesV6(sortableV6, storySortParameter, fileNameOrder);
@ -196,7 +196,7 @@ export class StoryStoreFacade<TFramework extends AnyFramework> {
name,
title,
importPath: fileName,
storiesImports: [],
type: 'story',
};
});
}

22
lib/core-common/src/utils/__tests__/normalize-stories.test.ts
View File

@ -1,6 +1,6 @@
import dedent from 'ts-dedent';
import { normalizeStoriesEntry, scrubFileExtension } from '../normalize-stories';
import { normalizeStoriesEntry } from '../normalize-stories';
expect.addSnapshotSerializer({
print: (val: any) => JSON.stringify(val, null, 2),
@ -227,7 +227,7 @@ describe('normalizeStoriesEntry', () => {
{
"titlePrefix": "",
"directory": ".",
"files": "**/*.stories.@(mdx|tsx|ts|jsx|js)",
"files": "**/*.(stories|docs).@(mdx|tsx|ts|jsx|js)",
"importPathMatcher": {}
}
`);
@ -238,7 +238,7 @@ describe('normalizeStoriesEntry', () => {
expect(specifier).toMatchInlineSnapshot(`
{
"titlePrefix": "",
"files": "**/*.stories.@(mdx|tsx|ts|jsx|js)",
"files": "**/*.(stories|docs).@(mdx|tsx|ts|jsx|js)",
"directory": ".",
"importPathMatcher": {}
}
@ -262,7 +262,7 @@ describe('normalizeStoriesEntry', () => {
expect(specifier).toMatchInlineSnapshot(`
{
"titlePrefix": "atoms",
"files": "**/*.stories.@(mdx|tsx|ts|jsx|js)",
"files": "**/*.(stories|docs).@(mdx|tsx|ts|jsx|js)",
"directory": ".",
"importPathMatcher": {}
}
@ -307,17 +307,3 @@ describe('normalizeStoriesEntry', () => {
]);
});
});
describe('scrubFileExtension', () => {
it.each([
['file.stories.mdx', 'file.stories'],
['file.stories.ts', 'file.stories'],
['file.story.mdx', 'file.story'],
['file.stories', 'file.stories'],
['file.story', 'file.story'],
['file.ts', 'file'],
['file.js', 'file'],
])('scrubs %s', (input, expected) => {
expect(scrubFileExtension(input)).toBe(expected);
});
});

9
lib/core-common/src/utils/normalize-stories.ts
View File

@ -124,12 +124,3 @@ interface NormalizeOptions {
export const normalizeStories = (entries: StoriesEntry[], options: NormalizeOptions) =>
entries.map((entry) => normalizeStoriesEntry(entry, options));
const SCRUBBED_STORY_REGEX = /(story|stories)$/i;
const SCRUB_REGEX = /\.[^.$]+$/;
export const scrubFileExtension = (file: string) => {
if (SCRUBBED_STORY_REGEX.test(file)) {
return file;
}
return file.replace(SCRUB_REGEX, '');
};

365
lib/core-server/src/utils/StoryIndexGenerator.test.ts
View File

@ -2,11 +2,31 @@ import path from 'path';
import { normalizeStoriesEntry } from '@storybook/core-common';
import type { NormalizedStoriesSpecifier } from '@storybook/core-common';
import { readCsfOrMdx, getStorySortParameter } from '@storybook/csf-tools';
import { toId } from '@storybook/csf';
import { StoryIndexGenerator } from './StoryIndexGenerator';
jest.mock('@storybook/csf-tools');
jest.mock('@storybook/csf', () => {
const csf = jest.requireActual('@storybook/csf');
return {
...csf,
toId: jest.fn(csf.toId),
};
});
// FIXME: can't figure out how to import ESM
jest.mock('@storybook/docs-mdx', async () => ({
analyze(content: string) {
const importMatches = content.matchAll(/'(.[^']*\.stories)'/g);
const imports = Array.from(importMatches).map((match) => match[1]);
const title = content.match(/title=['"](.*)['"]/)?.[1];
const ofMatch = content.match(/of=\{(.*)\}/)?.[1];
return { title, imports, of: ofMatch && imports.length && imports[0] };
},
}));
const toIdMock = toId as jest.Mock<ReturnType<typeof toId>>;
const readCsfOrMdxMock = readCsfOrMdx as jest.Mock<ReturnType<typeof readCsfOrMdx>>;
const getStorySortParameterMock = getStorySortParameter as jest.Mock<
ReturnType<typeof getStorySortParameter>
@ -42,8 +62,8 @@ describe('StoryIndexGenerator', () => {
"id": "a--story-one",
"importPath": "./src/A.stories.js",
"name": "Story One",
"storiesImports": Array [],
"title": "A",
"type": "story",
},
},
"v": 4,
@ -68,15 +88,15 @@ describe('StoryIndexGenerator', () => {
"id": "nested-button--story-one",
"importPath": "./src/nested/Button.stories.ts",
"name": "Story One",
"storiesImports": Array [],
"title": "nested/Button",
"type": "story",
},
"second-nested-g--story-one": Object {
"id": "second-nested-g--story-one",
"importPath": "./src/second-nested/G.stories.ts",
"name": "Story One",
"storiesImports": Array [],
"title": "second-nested/G",
"type": "story",
},
},
"v": 4,
@ -102,43 +122,43 @@ describe('StoryIndexGenerator', () => {
"id": "a--story-one",
"importPath": "./src/A.stories.js",
"name": "Story One",
"storiesImports": Array [],
"title": "A",
"type": "story",
},
"b--story-one": Object {
"id": "b--story-one",
"importPath": "./src/B.stories.ts",
"name": "Story One",
"storiesImports": Array [],
"title": "B",
"type": "story",
},
"d--story-one": Object {
"id": "d--story-one",
"importPath": "./src/D.stories.jsx",
"name": "Story One",
"storiesImports": Array [],
"title": "D",
"type": "story",
},
"first-nested-deeply-f--story-one": Object {
"id": "first-nested-deeply-f--story-one",
"importPath": "./src/first-nested/deeply/F.stories.js",
"name": "Story One",
"storiesImports": Array [],
"title": "first-nested/deeply/F",
"type": "story",
},
"nested-button--story-one": Object {
"id": "nested-button--story-one",
"importPath": "./src/nested/Button.stories.ts",
"name": "Story One",
"storiesImports": Array [],
"title": "nested/Button",
"type": "story",
},
"second-nested-g--story-one": Object {
"id": "second-nested-g--story-one",
"importPath": "./src/second-nested/G.stories.ts",
"name": "Story One",
"storiesImports": Array [],
"title": "second-nested/G",
"type": "story",
},
},
"v": 4,
@ -146,30 +166,108 @@ describe('StoryIndexGenerator', () => {
`);
});
});
describe('docs specifier', () => {
it('extracts stories from the right files', async () => {
const storiesSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
'./src/A.stories.(ts|js|jsx)',
options
);
const docsSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
'./src/**/*.docs.mdx',
options
);
const generator = new StoryIndexGenerator([storiesSpecifier, docsSpecifier], options);
await generator.initialize();
expect(await generator.getIndex()).toMatchInlineSnapshot(`
Object {
"entries": Object {
"a--docs": Object {
"id": "a--docs",
"importPath": "./src/docs2/MetaOf.docs.mdx",
"name": "docs",
"storiesImports": Array [
"./src/A.stories.js",
],
"title": "A",
"type": "docs",
},
"a--story-one": Object {
"id": "a--story-one",
"importPath": "./src/A.stories.js",
"name": "Story One",
"title": "A",
"type": "story",
},
"docs2-notitle--docs": Object {
"id": "docs2-notitle--docs",
"importPath": "./src/docs2/NoTitle.docs.mdx",
"name": "docs",
"storiesImports": Array [],
"title": "docs2/NoTitle",
"type": "docs",
},
"docs2-yabbadabbadooo--docs": Object {
"id": "docs2-yabbadabbadooo--docs",
"importPath": "./src/docs2/Title.docs.mdx",
"name": "docs",
"storiesImports": Array [],
"title": "docs2/Yabbadabbadooo",
"type": "docs",
},
},
"v": 4,
}
`);
});
it('errors when docs dependencies are missing', async () => {
const docsSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
'./src/**/MetaOf.docs.mdx',
options
);
const generator = new StoryIndexGenerator([docsSpecifier], options);
await expect(() => generator.initialize()).rejects.toThrowErrorMatchingInlineSnapshot(
`"Could not find \\"../A.stories\\" for docs file \\"src/docs2/MetaOf.docs.mdx\\"."`
);
});
});
});
describe('sorting', () => {
it('runs a user-defined sort function', async () => {
const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
const storiesSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
'./src/**/*.stories.(ts|js|jsx)',
options
);
const docsSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
'./src/**/*.docs.mdx',
options
);
const generator = new StoryIndexGenerator([specifier], options);
const generator = new StoryIndexGenerator([docsSpecifier, storiesSpecifier], options);
await generator.initialize();
(getStorySortParameter as jest.Mock).mockReturnValueOnce({
order: ['D', 'B', 'nested', 'A', 'second-nested', 'first-nested/deeply'],
order: ['docs2', 'D', 'B', 'nested', 'A', 'second-nested', 'first-nested/deeply'],
});
expect(Object.keys((await generator.getIndex()).entries)).toEqual([
'd--story-one',
'b--story-one',
'nested-button--story-one',
'a--story-one',
'second-nested-g--story-one',
'first-nested-deeply-f--story-one',
]);
expect(Object.keys((await generator.getIndex()).entries)).toMatchInlineSnapshot(`
Array [
"docs2-notitle--docs",
"docs2-yabbadabbadooo--docs",
"d--story-one",
"b--story-one",
"nested-button--story-one",
"a--docs",
"a--story-one",
"second-nested-g--story-one",
"first-nested-deeply-f--story-one",
]
`);
});
});
@ -192,6 +290,26 @@ describe('StoryIndexGenerator', () => {
expect(readCsfOrMdxMock).not.toHaveBeenCalled();
});
it('does not extract docs files a second time', async () => {
const storiesSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
'./src/A.stories.(ts|js|jsx)',
options
);
const docsSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
'./src/**/*.docs.mdx',
options
);
const generator = new StoryIndexGenerator([storiesSpecifier, docsSpecifier], options);
await generator.initialize();
await generator.getIndex();
expect(toId).toHaveBeenCalledTimes(4);
toIdMock.mockClear();
await generator.getIndex();
expect(toId).not.toHaveBeenCalled();
});
it('does not call the sort function a second time', async () => {
const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
'./src/**/*.stories.(ts|js|jsx)',
@ -231,6 +349,50 @@ describe('StoryIndexGenerator', () => {
expect(readCsfOrMdxMock).toHaveBeenCalledTimes(1);
});
it('calls extract docs file for just the one file', async () => {
const storiesSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
'./src/A.stories.(ts|js|jsx)',
options
);
const docsSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
'./src/**/*.docs.mdx',
options
);
const generator = new StoryIndexGenerator([storiesSpecifier, docsSpecifier], options);
await generator.initialize();
await generator.getIndex();
expect(toId).toHaveBeenCalledTimes(4);
generator.invalidate(docsSpecifier, './src/docs2/Title.docs.mdx', false);
toIdMock.mockClear();
await generator.getIndex();
expect(toId).toHaveBeenCalledTimes(1);
});
it('calls extract for a csf file and any of its docs dependents', async () => {
const storiesSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
'./src/A.stories.(ts|js|jsx)',
options
);
const docsSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
'./src/**/*.docs.mdx',
options
);
const generator = new StoryIndexGenerator([storiesSpecifier, docsSpecifier], options);
await generator.initialize();
await generator.getIndex();
expect(toId).toHaveBeenCalledTimes(4);
generator.invalidate(storiesSpecifier, './src/A.stories.js', false);
toIdMock.mockClear();
await generator.getIndex();
expect(toId).toHaveBeenCalledTimes(2);
});
it('does call the sort function a second time', async () => {
const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
'./src/**/*.stories.(ts|js|jsx)',
@ -250,63 +412,136 @@ describe('StoryIndexGenerator', () => {
await generator.getIndex();
expect(sortFn).toHaveBeenCalled();
});
});
describe('file removed', () => {
it('does not extract csf files a second time', async () => {
const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
'./src/**/*.stories.(ts|js|jsx)',
options
);
describe('file removed', () => {
it('does not extract csf files a second time', async () => {
const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
'./src/**/*.stories.(ts|js|jsx)',
options
);
readCsfOrMdxMock.mockClear();
const generator = new StoryIndexGenerator([specifier], options);
await generator.initialize();
await generator.getIndex();
expect(readCsfOrMdxMock).toHaveBeenCalledTimes(7);
readCsfOrMdxMock.mockClear();
const generator = new StoryIndexGenerator([specifier], options);
await generator.initialize();
await generator.getIndex();
expect(readCsfOrMdxMock).toHaveBeenCalledTimes(7);
generator.invalidate(specifier, './src/B.stories.ts', true);
generator.invalidate(specifier, './src/B.stories.ts', true);
readCsfOrMdxMock.mockClear();
await generator.getIndex();
expect(readCsfOrMdxMock).not.toHaveBeenCalled();
});
readCsfOrMdxMock.mockClear();
await generator.getIndex();
expect(readCsfOrMdxMock).not.toHaveBeenCalled();
});
it('does call the sort function a second time', async () => {
const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
'./src/**/*.stories.(ts|js|jsx)',
options
);
it('does call the sort function a second time', async () => {
const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
'./src/**/*.stories.(ts|js|jsx)',
options
);
const sortFn = jest.fn();
getStorySortParameterMock.mockReturnValue(sortFn);
const generator = new StoryIndexGenerator([specifier], options);
await generator.initialize();
await generator.getIndex();
expect(sortFn).toHaveBeenCalled();
const sortFn = jest.fn();
getStorySortParameterMock.mockReturnValue(sortFn);
const generator = new StoryIndexGenerator([specifier], options);
await generator.initialize();
await generator.getIndex();
expect(sortFn).toHaveBeenCalled();
generator.invalidate(specifier, './src/B.stories.ts', true);
generator.invalidate(specifier, './src/B.stories.ts', true);
sortFn.mockClear();
await generator.getIndex();
expect(sortFn).toHaveBeenCalled();
});
sortFn.mockClear();
await generator.getIndex();
expect(sortFn).toHaveBeenCalled();
});
it('does not include the deleted stories in results', async () => {
const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
'./src/**/*.stories.(ts|js|jsx)',
options
);
it('does not include the deleted stories in results', async () => {
const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
'./src/**/*.stories.(ts|js|jsx)',
options
);
readCsfOrMdxMock.mockClear();
const generator = new StoryIndexGenerator([specifier], options);
await generator.initialize();
await generator.getIndex();
expect(readCsfOrMdxMock).toHaveBeenCalledTimes(7);
readCsfOrMdxMock.mockClear();
const generator = new StoryIndexGenerator([specifier], options);
await generator.initialize();
await generator.getIndex();
expect(readCsfOrMdxMock).toHaveBeenCalledTimes(7);
generator.invalidate(specifier, './src/B.stories.ts', true);
generator.invalidate(specifier, './src/B.stories.ts', true);
expect(Object.keys((await generator.getIndex()).entries)).not.toContain('b--story-one');
});
expect(Object.keys((await generator.getIndex()).entries)).not.toContain('b--story-one');
});
it('does not include the deleted docs in results', async () => {
const storiesSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
'./src/A.stories.(ts|js|jsx)',
options
);
const docsSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
'./src/**/*.docs.mdx',
options
);
const generator = new StoryIndexGenerator([docsSpecifier, storiesSpecifier], options);
await generator.initialize();
await generator.getIndex();
expect(toId).toHaveBeenCalledTimes(4);
expect(Object.keys((await generator.getIndex()).entries)).toContain('docs2-notitle--docs');
generator.invalidate(docsSpecifier, './src/docs2/NoTitle.docs.mdx', true);
expect(Object.keys((await generator.getIndex()).entries)).not.toContain(
'docs2-notitle--docs'
);
});
it('errors on dependency deletion', async () => {
const storiesSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
'./src/A.stories.(ts|js|jsx)',
options
);
const docsSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
'./src/**/*.docs.mdx',
options
);
const generator = new StoryIndexGenerator([docsSpecifier, storiesSpecifier], options);
await generator.initialize();
await generator.getIndex();
expect(toId).toHaveBeenCalledTimes(4);
expect(Object.keys((await generator.getIndex()).entries)).toContain('a--story-one');
generator.invalidate(storiesSpecifier, './src/A.stories.js', true);
await expect(() => generator.getIndex()).rejects.toThrowErrorMatchingInlineSnapshot(
`"Could not find \\"../A.stories\\" for docs file \\"src/docs2/MetaOf.docs.mdx\\"."`
);
});
it('cleans up properly on dependent docs deletion', async () => {
const storiesSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
'./src/A.stories.(ts|js|jsx)',
options
);
const docsSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
'./src/**/*.docs.mdx',
options
);
const generator = new StoryIndexGenerator([docsSpecifier, storiesSpecifier], options);
await generator.initialize();
await generator.getIndex();
expect(toId).toHaveBeenCalledTimes(4);
expect(Object.keys((await generator.getIndex()).entries)).toContain('a--docs');
generator.invalidate(docsSpecifier, './src/docs2/MetaOf.docs.mdx', true);
expect(Object.keys((await generator.getIndex()).entries)).not.toContain('a--docs');
// this will throw if MetaOf is not removed from A's dependents
generator.invalidate(storiesSpecifier, './src/A.stories.js', false);
});
});
});

171
lib/core-server/src/utils/StoryIndexGenerator.ts
View File

@ -8,21 +8,32 @@ import type {
StoryIndex,
V2CompatIndexEntry,
StoryId,
StoryIndexEntry,
IndexEntry,
DocsIndexEntry,
} from '@storybook/store';
import { autoTitleFromSpecifier, sortStoriesV7 } from '@storybook/store';
import type { NormalizedStoriesSpecifier } from '@storybook/core-common';
import { normalizeStoryPath, scrubFileExtension } from '@storybook/core-common';
import { normalizeStoryPath } from '@storybook/core-common';
import { logger } from '@storybook/node-logger';
import { readCsfOrMdx, getStorySortParameter } from '@storybook/csf-tools';
import type { ComponentTitle } from '@storybook/csf';
import { toId } from '@storybook/csf';
type DocsCacheEntry = StoryIndexEntry & { type: 'docs' };
type StoriesCacheEntry = { entries: StoryIndexEntry[]; dependents: Path[]; type: 'stories' };
type DocsCacheEntry = DocsIndexEntry;
type StoriesCacheEntry = { entries: IndexEntry[]; dependents: Path[]; type: 'stories' };
type CacheEntry = false | StoriesCacheEntry | DocsCacheEntry;
type SpecifierStoriesCache = Record<Path, CacheEntry>;
const makeAbsolute = (otherImport: Path, normalizedPath: Path, workingDir: Path) =>
otherImport.startsWith('.')
? slash(
path.resolve(
workingDir,
normalizeStoryPath(path.join(path.dirname(normalizedPath), otherImport))
)
)
: otherImport;
export class StoryIndexGenerator {
// An internal cache mapping specifiers to a set of path=><set of stories>
// Later, we'll combine each of these subsets together to form the full index
@ -74,9 +85,12 @@ export class StoryIndexGenerator {
await this.ensureExtracted();
}
/**
* Run the updater function over all the empty cache entries
*/
async updateExtracted(
updater: (specifier: NormalizedStoriesSpecifier, absolutePath: Path) => Promise<CacheEntry>
): Promise<void> {
) {
await Promise.all(
this.specifiers.map(async (specifier) => {
const entry = this.specifierToCache.get(specifier);
@ -93,11 +107,14 @@ export class StoryIndexGenerator {
return /\.docs\.mdx$/i.test(absolutePath);
}
async ensureExtracted(): Promise<StoryIndexEntry[]> {
async ensureExtracted(): Promise<IndexEntry[]> {
// First process all the story files. Then, in a second pass,
// process the docs files. The reason for this is that the docs
// files may use the `<Meta of={meta} />` syntax, which requires
// that the story file that contains the meta be processed first.
await this.updateExtracted(async (specifier, absolutePath) =>
this.isDocsMdx(absolutePath) ? false : this.extractStories(specifier, absolutePath)
);
// process docs in a second pass
await this.updateExtracted(async (specifier, absolutePath) =>
this.extractDocs(specifier, absolutePath)
);
@ -112,6 +129,34 @@ export class StoryIndexGenerator {
});
}
findDependencies(absoluteImports: Path[]) {
const dependencies = [] as StoriesCacheEntry[];
const foundImports = new Set();
this.specifierToCache.forEach((cache) => {
const fileNames = Object.keys(cache).filter((fileName) => {
const foundImport = absoluteImports.find((storyImport) => fileName.startsWith(storyImport));
if (foundImport) foundImports.add(foundImport);
return !!foundImport;
});
fileNames.forEach((fileName) => {
const cacheEntry = cache[fileName];
if (cacheEntry && cacheEntry.type === 'stories') {
dependencies.push(cacheEntry);
} else {
throw new Error(`Unexpected dependency: ${cacheEntry}`);
}
});
});
// imports can include non-story imports, so it's ok if
// there are fewer foundImports than absoluteImports
// if (absoluteImports.length !== foundImports.size) {
// throw new Error(`Missing dependencies: ${absoluteImports.filter((p) => !foundImports.has(p))}`));
// }
return dependencies;
}
async extractDocs(specifier: NormalizedStoriesSpecifier, absolutePath: Path) {
const relativePath = path.relative(this.options.workingDir, absolutePath);
try {
@ -119,44 +164,46 @@ export class StoryIndexGenerator {
const importPath = slash(normalizedPath);
const defaultTitle = autoTitleFromSpecifier(importPath, specifier);
// This `await require(...)` is a bit of a hack. It's necessary because
// `docs-mdx` depends on ESM code, which must be asynchronously imported
// to be used in CJS. Unfortunately, we cannot use `import()` here, because
// it will be transpiled down to `require()` by Babel. So instead, we require
// a CJS export from `@storybook/docs-mdx` that does the `async import` for us.
// eslint-disable-next-line global-require
const { analyze } = await require('@storybook/docs-mdx');
const content = await fs.readFile(absolutePath, 'utf8');
// { title?, of?, imports? }
const result = analyze(content);
const makeAbsolute = (otherImport: Path) =>
otherImport.startsWith('.')
? slash(
path.join(
this.options.workingDir,
normalizeStoryPath(path.join(path.dirname(normalizedPath), otherImport))
)
)
: otherImport;
const absoluteImports = (result.imports as string[]).map((p) =>
makeAbsolute(p, normalizedPath, this.options.workingDir)
);
const absoluteImports = (result.imports as string[]).map(makeAbsolute);
const absoluteOf = result.of && makeAbsolute(result.of);
// Go through the cache and collect all of the cache entries that this docs file depends on.
// We'll use this to make sure this docs cache entry is invalidated when any of its dependents
// are invalidated.
const dependencies = this.findDependencies(absoluteImports);
// Also, if `result.of` is set, it means that we're using the `<Meta of={meta} />` syntax,
// so find the `title` defined the file that `meta` points to.
let ofTitle: string;
const dependencies = [] as StoriesCacheEntry[];
this.specifierToCache.forEach((cache) => {
const fileNames = Object.keys(cache).filter((fileName) => {
return absoluteImports.some((storyImport) => fileName.startsWith(storyImport));
});
fileNames.forEach((fileName) => {
const cacheEntry = cache[fileName];
if (cacheEntry && cacheEntry.type === 'stories') {
if (fileName.startsWith(absoluteOf) && cacheEntry.entries.length > 0) {
ofTitle = cacheEntry.entries[0].title;
if (result.of) {
const absoluteOf = makeAbsolute(result.of, normalizedPath, this.options.workingDir);
dependencies.forEach((dep) => {
if (dep.entries.length > 0) {
const first = dep.entries[0];
if (path.resolve(this.options.workingDir, first.importPath).startsWith(absoluteOf)) {
ofTitle = first.title;
}
dependencies.push(cacheEntry);
} else {
throw new Error(`Unexpected dependency: ${cacheEntry}`);
}
});
});
if (!ofTitle)
throw new Error(`Could not find "${result.of}" for docs file "${relativePath}".`);
}
// Track that we depend on this for easy invalidation later.
dependencies.forEach((dep) => {
dep.dependents.push(absolutePath);
});
@ -182,29 +229,18 @@ export class StoryIndexGenerator {
async extractStories(specifier: NormalizedStoriesSpecifier, absolutePath: Path) {
const relativePath = path.relative(this.options.workingDir, absolutePath);
const entries = [] as StoryIndexEntry[];
const entries = [] as IndexEntry[];
try {
const normalizedPath = normalizeStoryPath(relativePath);
const importPath = slash(normalizedPath);
const defaultTitle = autoTitleFromSpecifier(importPath, specifier);
const csf = (await readCsfOrMdx(absolutePath, { defaultTitle })).parse();
const storiesImports = await Promise.all(
csf.imports.map(async (otherImport) =>
otherImport.startsWith('.')
? slash(normalizeStoryPath(path.join(path.dirname(normalizedPath), otherImport)))
: otherImport
)
);
csf.stories.forEach(({ id, name, parameters }) => {
const storyEntry: StoryIndexEntry = {
id,
title: csf.meta.title,
name,
importPath,
storiesImports,
};
if (parameters?.docsOnly) storyEntry.type = 'docs';
entries.push(storyEntry);
const base = { id, title: csf.meta.title, name, importPath };
const entry: IndexEntry = parameters?.docsOnly
? { ...base, type: 'docs', storiesImports: [] }
: { ...base, type: 'story' };
entries.push(entry);
});
} catch (err) {
if (err.name === 'NoMetaError') {
@ -217,7 +253,7 @@ export class StoryIndexGenerator {
return { entries, type: 'stories', dependents: [] } as StoriesCacheEntry;
}
async sortStories(storiesList: StoryIndexEntry[]) {
async sortStories(storiesList: IndexEntry[]) {
const entries: StoryIndex['entries'] = {};
storiesList.forEach((entry) => {
@ -255,11 +291,13 @@ export class StoryIndexGenerator {
return acc;
}, {} as Record<ComponentTitle, number>);
// @ts-ignore
compat = Object.entries(sorted).reduce((acc, entry) => {
const [id, story] = entry;
if (story.type === 'docs') return acc;
acc[id] = {
...story,
id,
kind: story.title,
story: story.name,
parameters: {
@ -285,16 +323,37 @@ export class StoryIndexGenerator {
const cache = this.specifierToCache.get(specifier);
const cacheEntry = cache[absolutePath];
let dependents = [];
if (cacheEntry && cacheEntry.type === 'stories') {
dependents = cacheEntry.dependents;
// FIXME: might be in another cache
dependents.forEach((dep) => {
cache[dep] = false;
const { dependents } = cacheEntry;
const invalidated = new Set();
// the dependent can be in ANY cache, so we loop over all of them
this.specifierToCache.forEach((otherCache) => {
dependents.forEach((dep) => {
if (otherCache[dep]) {
invalidated.add(dep);
// eslint-disable-next-line no-param-reassign
otherCache[dep] = false;
}
});
});
const notFound = dependents.filter((dep) => !invalidated.has(dep));
if (notFound.length > 0) {
throw new Error(`Could not invalidate ${notFound.length} deps: ${notFound.join(', ')}`);
}
}
if (removed) {
if (cacheEntry && cacheEntry.type === 'docs') {
const absoluteImports = cacheEntry.storiesImports.map((p) =>
path.resolve(this.options.workingDir, p)
);
const dependencies = this.findDependencies(absoluteImports);
dependencies.forEach((dep) =>
dep.dependents.splice(dep.dependents.indexOf(absolutePath), 1)
);
}
delete cache[absolutePath];
} else {
cache[absolutePath] = false;

2
lib/core-server/src/utils/__mockdata__/src/docs2/Title.docs.mdx
View File

@ -1,6 +1,6 @@
import { Meta } from '@storybook/addon-docs';
<Meta title="Docs2/Yabbadabbadooo" />
<Meta title="docs2/Yabbadabbadooo" />
# Docs with title

180
lib/core-server/src/utils/stories-json.test.ts
View File

@ -10,10 +10,34 @@ import { ServerChannel } from './get-server-channel';
jest.mock('watchpack');
jest.mock('lodash/debounce');
// FIXME: can't figure out how to import ESM
jest.mock('@storybook/docs-mdx', async () => ({
analyze(content: string) {
const importMatches = content.matchAll(/'(.[^']*\.stories)'/g);
const imports = Array.from(importMatches).map((match) => match[1]);
const title = content.match(/title=['"](.*)['"]/)?.[1];
const ofMatch = content.match(/of=\{(.*)\}/)?.[1];
return { title, imports, of: ofMatch && imports.length && imports[0] };
},
}));
let storyStoreV7 = true;
const options: Parameters<typeof useStoriesJson>[2] = {
configDir: path.join(__dirname, '__mockdata__'),
presets: {
apply: async () => ['./src/**/*.stories.(ts|js|jsx)'] as any,
apply: async (what: string) => {
switch (what) {
case 'stories': {
return ['./src/**/*.docs.mdx', './src/**/*.stories.(ts|js|jsx)'] as any;
}
case 'features': {
return { storyStoreV7 };
}
default: {
throw new Error(`Unexpected preset: ${what}`);
}
}
},
},
} as any;
@ -39,6 +63,7 @@ describe('useStoriesJson', () => {
send.mockClear();
write.mockClear();
(debounce as jest.Mock).mockImplementation((cb) => cb);
storyStoreV7 = true;
});
const request: Request = {
@ -46,7 +71,7 @@ describe('useStoriesJson', () => {
} as any;
describe('JSON endpoint', () => {
it('scans and extracts stories', async () => {
it('scans and extracts index', async () => {
const mockServerChannel = { emit: jest.fn() } as any as ServerChannel;
await useStoriesJson(router, mockServerChannel, options, options.configDir);
@ -59,6 +84,149 @@ describe('useStoriesJson', () => {
expect(JSON.parse(send.mock.calls[0][0])).toMatchInlineSnapshot(`
Object {
"entries": Object {
"a--docs": Object {
"id": "a--docs",
"importPath": "./src/docs2/MetaOf.docs.mdx",
"name": "docs",
"storiesImports": Array [
"./src/A.stories.js",
],
"title": "A",
"type": "docs",
},
"a--story-one": Object {
"id": "a--story-one",
"importPath": "./src/A.stories.js",
"name": "Story One",
"title": "A",
"type": "story",
},
"b--story-one": Object {
"id": "b--story-one",
"importPath": "./src/B.stories.ts",
"name": "Story One",
"title": "B",
"type": "story",
},
"d--story-one": Object {
"id": "d--story-one",
"importPath": "./src/D.stories.jsx",
"name": "Story One",
"title": "D",
"type": "story",
},
"docs2-notitle--docs": Object {
"id": "docs2-notitle--docs",
"importPath": "./src/docs2/NoTitle.docs.mdx",
"name": "docs",
"storiesImports": Array [],
"title": "docs2/NoTitle",
"type": "docs",
},
"docs2-yabbadabbadooo--docs": Object {
"id": "docs2-yabbadabbadooo--docs",
"importPath": "./src/docs2/Title.docs.mdx",
"name": "docs",
"storiesImports": Array [],
"title": "docs2/Yabbadabbadooo",
"type": "docs",
},
"first-nested-deeply-f--story-one": Object {
"id": "first-nested-deeply-f--story-one",
"importPath": "./src/first-nested/deeply/F.stories.js",
"name": "Story One",
"title": "first-nested/deeply/F",
"type": "story",
},
"nested-button--story-one": Object {
"id": "nested-button--story-one",
"importPath": "./src/nested/Button.stories.ts",
"name": "Story One",
"title": "nested/Button",
"type": "story",
},
"second-nested-g--story-one": Object {
"id": "second-nested-g--story-one",
"importPath": "./src/second-nested/G.stories.ts",
"name": "Story One",
"title": "second-nested/G",
"type": "story",
},
},
"v": 4,
}
`);
});
it('scans and extracts stories v3', async () => {
const mockServerChannel = { emit: jest.fn() } as any as ServerChannel;
await useStoriesJson(router, mockServerChannel, options, options.configDir);
expect(use).toHaveBeenCalledTimes(2);
const route = use.mock.calls[1][1];
await route(request, response);
expect(send).toHaveBeenCalledTimes(1);
expect(JSON.parse(send.mock.calls[0][0])).toMatchInlineSnapshot(`
Object {
"stories": Object {
"a--story-one": Object {
"id": "a--story-one",
"importPath": "./src/A.stories.js",
"name": "Story One",
"title": "A",
},
"b--story-one": Object {
"id": "b--story-one",
"importPath": "./src/B.stories.ts",
"name": "Story One",
"title": "B",
},
"d--story-one": Object {
"id": "d--story-one",
"importPath": "./src/D.stories.jsx",
"name": "Story One",
"title": "D",
},
"first-nested-deeply-f--story-one": Object {
"id": "first-nested-deeply-f--story-one",
"importPath": "./src/first-nested/deeply/F.stories.js",
"name": "Story One",
"title": "first-nested/deeply/F",
},
"nested-button--story-one": Object {
"id": "nested-button--story-one",
"importPath": "./src/nested/Button.stories.ts",
"name": "Story One",
"title": "nested/Button",
},
"second-nested-g--story-one": Object {
"id": "second-nested-g--story-one",
"importPath": "./src/second-nested/G.stories.ts",
"name": "Story One",
"title": "second-nested/G",
},
},
"v": 3,
}
`);
});
it('scans and extracts stories v2', async () => {
storyStoreV7 = false;
const mockServerChannel = { emit: jest.fn() } as any as ServerChannel;
await useStoriesJson(router, mockServerChannel, options, options.configDir);
expect(use).toHaveBeenCalledTimes(2);
const route = use.mock.calls[1][1];
await route(request, response);
expect(send).toHaveBeenCalledTimes(1);
expect(JSON.parse(send.mock.calls[0][0])).toMatchInlineSnapshot(`
Object {
"stories": Object {
"a--story-one": Object {
"id": "a--story-one",
"importPath": "./src/A.stories.js",
@ -69,7 +237,6 @@ describe('useStoriesJson', () => {
"docsOnly": false,
"fileName": "./src/A.stories.js",
},
"storiesImports": Array [],
"story": "Story One",
"title": "A",
},
@ -83,7 +250,6 @@ describe('useStoriesJson', () => {
"docsOnly": false,
"fileName": "./src/B.stories.ts",
},
"storiesImports": Array [],
"story": "Story One",
"title": "B",
},
@ -97,7 +263,6 @@ describe('useStoriesJson', () => {
"docsOnly": false,
"fileName": "./src/D.stories.jsx",
},
"storiesImports": Array [],
"story": "Story One",
"title": "D",
},
@ -111,7 +276,6 @@ describe('useStoriesJson', () => {
"docsOnly": false,
"fileName": "./src/first-nested/deeply/F.stories.js",
},
"storiesImports": Array [],
"story": "Story One",
"title": "first-nested/deeply/F",
},
@ -125,7 +289,6 @@ describe('useStoriesJson', () => {
"docsOnly": false,
"fileName": "./src/nested/Button.stories.ts",
},
"storiesImports": Array [],
"story": "Story One",
"title": "nested/Button",
},
@ -139,12 +302,11 @@ describe('useStoriesJson', () => {
"docsOnly": false,
"fileName": "./src/second-nested/G.stories.ts",
},
"storiesImports": Array [],
"story": "Story One",
"title": "second-nested/G",
},
},
"v": 4,
"v": 3,
}
`);
});

9
lib/core-server/src/utils/stories-json.ts
View File

@ -1,7 +1,7 @@
import { Router, Request, Response } from 'express';
import fs from 'fs-extra';
import type { Options, NormalizedStoriesSpecifier, StorybookConfig } from '@storybook/core-common';
import type { StoryIndex, StoryIndexV3, StoryIndexEntry } from '@storybook/store';
import type { StoryIndex, StoryIndexV3 } from '@storybook/store';
import { normalizeStories } from '@storybook/core-common';
import Events from '@storybook/core-events';
import debounce from 'lodash/debounce';
@ -96,12 +96,13 @@ export async function useStoriesJson(
});
}
const isStory = (entry: StoryIndexEntry) => !entry.type || entry.type === 'story';
export const convertToIndexV3 = (index: StoryIndex): StoryIndexV3 => {
const { entries } = index;
const stories = Object.entries(entries).reduce((acc, [id, entry]) => {
if (isStory(entry)) acc[id] = entry;
if (entry.type === 'story') {
const { type, ...rest } = entry;
acc[id] = rest;
}
return acc;
}, {} as StoryIndexV3['stories']);
return {

3
lib/core-server/src/utils/watch-story-specifiers.ts
View File

@ -3,6 +3,7 @@ import slash from 'slash';
import fs from 'fs';
import path from 'path';
import glob from 'globby';
import uniq from 'lodash/uniq';
import type { NormalizedStoriesSpecifier } from '@storybook/core-common';
import type { Path } from '@storybook/store';
@ -35,7 +36,7 @@ export function watchStorySpecifiers(
ignored: ['**/.git', 'node_modules'],
});
wp.watch({
directories: specifiers.map((ns) => ns.directory),
directories: uniq(specifiers.map((ns) => ns.directory)),
});
async function onChangeOrRemove(watchpackPath: Path, removed: boolean) {

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

@ -2,7 +2,7 @@ import dedent from 'ts-dedent';
import { Channel } from '@storybook/addons';
import type { StoryId } from '@storybook/csf';
import type { StorySpecifier, StoryIndex, StoryIndexEntry } from './types';
import type { StorySpecifier, StoryIndex, IndexEntry } from './types';
export class StoryIndexStore {
channel: Channel;
@ -38,7 +38,7 @@ export class StoryIndexStore {
return match && match[0];
}
storyIdToEntry(storyId: StoryId): StoryIndexEntry {
storyIdToEntry(storyId: StoryId): IndexEntry {
const storyEntry = this.entries[storyId];
if (!storyEntry) {
throw new Error(dedent`Couldn't find story matching '${storyId}' after HMR.

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

@ -891,7 +891,6 @@ describe('StoryStore', () => {
"__isArgsStory": false,
"fileName": "./src/ComponentOne.stories.js",
},
"storiesImports": undefined,
"story": "A",
"title": "Component One",
},
@ -905,7 +904,6 @@ describe('StoryStore', () => {
"__isArgsStory": false,
"fileName": "./src/ComponentOne.stories.js",
},
"storiesImports": undefined,
"story": "B",
"title": "Component One",
},
@ -919,7 +917,6 @@ describe('StoryStore', () => {
"__isArgsStory": false,
"fileName": "./src/ComponentTwo.stories.js",
},
"storiesImports": undefined,
"story": "C",
"title": "Component Two",
},
@ -944,21 +941,18 @@ describe('StoryStore', () => {
"id": "component-one--a",
"importPath": "./src/ComponentOne.stories.js",
"name": "A",
"storiesImports": undefined,
"title": "Component One",
},
"component-one--b": Object {
"id": "component-one--b",
"importPath": "./src/ComponentOne.stories.js",
"name": "B",
"storiesImports": undefined,
"title": "Component One",
},
"component-two--c": Object {
"id": "component-two--c",
"importPath": "./src/ComponentTwo.stories.js",
"name": "C",
"storiesImports": undefined,
"title": "Component Two",
},
},

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

@ -267,14 +267,13 @@ export class StoryStore<TFramework extends AnyFramework> {
const value = this.getSetStoriesPayload();
const allowedParameters = ['fileName', 'docsOnly', 'framework', '__id', '__isArgsStory'];
const stories: Record<StoryId, StoryIndexEntry | V2CompatIndexEntry> = mapValues(
const stories: Record<StoryId, Omit<StoryIndexEntry, 'type'> | V2CompatIndexEntry> = mapValues(
value.stories,
(story) => {
const { importPath, storiesImports } = this.storyIndex.entries[story.id];
const { importPath } = this.storyIndex.entries[story.id];
return {
...pick(story, ['id', 'name', 'title']),
importPath,
storiesImports,
...(!global.FEATURES?.breakingChangesV7 && {
kind: story.title,
story: story.name,

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

@ -2,10 +2,10 @@ import stable from 'stable';
import dedent from 'ts-dedent';
import type { Comparator, StorySortParameter, StorySortParameterV7 } from '@storybook/addons';
import { storySort } from './storySort';
import type { Story, StoryIndexEntry, Path, Parameters } from './types';
import type { Story, StoryIndexEntry, IndexEntry, Path, Parameters } from './types';
const sortStoriesCommon = (
stories: StoryIndexEntry[],
stories: IndexEntry[],
storySortParameter: StorySortParameterV7,
fileNameOrder: Path[]
) => {
@ -27,7 +27,7 @@ const sortStoriesCommon = (
};
export const sortStoriesV7 = (
stories: StoryIndexEntry[],
stories: IndexEntry[],
storySortParameter: StorySortParameterV7,
fileNameOrder: Path[]
) => {
@ -47,8 +47,8 @@ export const sortStoriesV7 = (
};
const toIndexEntry = (story: any): StoryIndexEntry => {
const { id, title, name, parameters, storiesImports } = story;
return { id, title, name, importPath: parameters.fileName, storiesImports };
const { id, title, name, parameters, type } = story;
return { id, title, name, importPath: parameters.fileName, type };
};
export const sortStoriesV6 = (

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

@ -1,11 +1,11 @@
import { StorySortComparatorV7, StorySortObjectParameter } from '@storybook/addons';
import { StoryIndexEntry } from './types';
import { IndexEntry } from './types';
const STORY_KIND_PATH_SEPARATOR = /\s*\/\s*/;
export const storySort =
(options: StorySortObjectParameter = {}): StorySortComparatorV7 =>
(a: StoryIndexEntry, b: StoryIndexEntry): number => {
(a: IndexEntry, b: IndexEntry): number => {
// If the two stories have the same story kind, then use the default
// ordering, which is the order they are defined in the story file.
// only when includeNames is falsy

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

@ -88,15 +88,22 @@ export declare type RenderContext<TFramework extends AnyFramework = AnyFramework
unboundStoryFn: LegacyStoryFn<TFramework>;
};
export interface StoryIndexEntry {
interface BaseIndexEntry {
id: StoryId;
name: StoryName;
title: ComponentTitle;
importPath: Path;
storiesImports: Path[];
type?: 'story' | 'docs';
}
export type StoryIndexEntry = BaseIndexEntry & {
type: 'story';
};
export type DocsIndexEntry = BaseIndexEntry & {
storiesImports: Path[];
type: 'docs';
};
export type IndexEntry = StoryIndexEntry | DocsIndexEntry;
export interface V2CompatIndexEntry extends StoryIndexEntry {
kind: StoryIndexEntry['title'];
story: StoryIndexEntry['name'];
@ -105,12 +112,12 @@ export interface V2CompatIndexEntry extends StoryIndexEntry {
export interface StoryIndexV3 {
v: number;
stories: Record<StoryId, StoryIndexEntry>;
stories: Record<StoryId, Omit<StoryIndexEntry, 'type'>>;
}
export interface StoryIndex {
v: number;
entries: Record<StoryId, StoryIndexEntry>;
entries: Record<StoryId, IndexEntry>;
}
export type StorySpecifier = StoryId | { name: StoryName; title: ComponentTitle } | '*';