mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 04:01:07 +08:00
Initial run-through deleting all ssv6 code
This commit is contained in:
Tom Coleman
parent
99911f42e8
commit
534e49cfd0
@ -1,48 +0,0 @@
|
||||
import { loadPreviewOrConfigFile } from '@storybook/core-common';
|
||||
import type { Options } from '@storybook/types';
|
||||
import slash from 'slash';
|
||||
import { listStories } from './list-stories';
|
||||
|
||||
const absoluteFilesToImport = async (
|
||||
files: string[],
|
||||
name: string,
|
||||
normalizePath: (id: string) => string
|
||||
) =>
|
||||
files
|
||||
.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'/@fs/${normalizePath(el)}'`)
|
||||
.join('\n');
|
||||
|
||||
export async function generateVirtualStoryEntryCode(options: Options) {
|
||||
const { normalizePath } = await import('vite');
|
||||
const storyEntries = await listStories(options);
|
||||
const resolveMap = storyEntries.reduce<Record<string, string>>(
|
||||
(prev, entry) => ({ ...prev, [entry]: entry.replace(slash(process.cwd()), '.') }),
|
||||
{}
|
||||
);
|
||||
const modules = storyEntries.map((entry, i) => `${JSON.stringify(entry)}: story_${i}`).join(',');
|
||||
|
||||
return `
|
||||
${await absoluteFilesToImport(storyEntries, 'story', normalizePath)}
|
||||
|
||||
function loadable(key) {
|
||||
return {${modules}}[key];
|
||||
}
|
||||
|
||||
Object.assign(loadable, {
|
||||
keys: () => (${JSON.stringify(Object.keys(resolveMap))}),
|
||||
resolve: (key) => (${JSON.stringify(resolveMap)}[key])
|
||||
});
|
||||
|
||||
export function configStories(configure) {
|
||||
configure(loadable, { hot: import.meta.hot }, false);
|
||||
}
|
||||
`.trim();
|
||||
}
|
||||
|
||||
export async function generatePreviewEntryCode({ configDir }: Options) {
|
||||
const previewFile = loadPreviewOrConfigFile({ configDir });
|
||||
if (!previewFile) return '';
|
||||
|
||||
return `import * as preview from '${slash(previewFile)}';
|
||||
export default preview;`;
|
||||
}
|
||||
@ -1,116 +0,0 @@
|
||||
import { getRendererName } from '@storybook/core-common';
|
||||
import type { Options, PreviewAnnotation } from '@storybook/types';
|
||||
import { virtualPreviewFile, virtualStoriesFile } from './virtual-file-names';
|
||||
import { processPreviewAnnotation } from './utils/process-preview-annotation';
|
||||
|
||||
export async function generateIframeScriptCode(options: Options, projectRoot: string) {
|
||||
const { presets } = options;
|
||||
const rendererName = await getRendererName(options);
|
||||
|
||||
const previewAnnotations = await presets.apply<PreviewAnnotation[]>(
|
||||
'previewAnnotations',
|
||||
[],
|
||||
options
|
||||
);
|
||||
const configEntries = [...previewAnnotations]
|
||||
.filter(Boolean)
|
||||
.map((path) => processPreviewAnnotation(path, projectRoot));
|
||||
|
||||
const filesToImport = (files: string[], name: string) =>
|
||||
files.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'${el}'`).join('\n');
|
||||
|
||||
const importArray = (name: string, length: number) =>
|
||||
new Array(length).fill(0).map((_, i) => `${name}_${i}`);
|
||||
|
||||
// noinspection UnnecessaryLocalVariableJS
|
||||
/** @todo Inline variable and remove `noinspection` */
|
||||
// language=JavaScript
|
||||
const code = `
|
||||
// Ensure that the client API is initialized by the framework before any other iframe code
|
||||
// is loaded. That way our client-apis can assume the existence of the API+store
|
||||
import { configure } from '${rendererName}';
|
||||
|
||||
import { logger } from '@storybook/client-logger';
|
||||
import * as previewApi from "@storybook/preview-api";
|
||||
${filesToImport(configEntries, 'config')}
|
||||
|
||||
import * as preview from '${virtualPreviewFile}';
|
||||
import { configStories } from '${virtualStoriesFile}';
|
||||
|
||||
const {
|
||||
addDecorator,
|
||||
addParameters,
|
||||
addLoader,
|
||||
addArgs,
|
||||
addArgTypes,
|
||||
addStepRunner,
|
||||
addArgTypesEnhancer,
|
||||
addArgsEnhancer,
|
||||
setGlobalRender,
|
||||
} = previewApi;
|
||||
|
||||
const configs = [${importArray('config', configEntries.length)
|
||||
.concat('preview.default')
|
||||
.join(',')}].filter(Boolean)
|
||||
|
||||
configs.map(config => config.default ? config.default : config).forEach(config => {
|
||||
Object.keys(config).forEach((key) => {
|
||||
const value = config[key];
|
||||
switch (key) {
|
||||
case 'args': {
|
||||
return addArgs(value);
|
||||
}
|
||||
case 'argTypes': {
|
||||
return addArgTypes(value);
|
||||
}
|
||||
case 'decorators': {
|
||||
return value.forEach((decorator) => addDecorator(decorator, false));
|
||||
}
|
||||
case 'loaders': {
|
||||
return value.forEach((loader) => addLoader(loader, false));
|
||||
}
|
||||
case 'parameters': {
|
||||
return addParameters({ ...value }, false);
|
||||
}
|
||||
case 'argTypesEnhancers': {
|
||||
return value.forEach((enhancer) => addArgTypesEnhancer(enhancer));
|
||||
}
|
||||
case 'argsEnhancers': {
|
||||
return value.forEach((enhancer) => addArgsEnhancer(enhancer))
|
||||
}
|
||||
case 'render': {
|
||||
return setGlobalRender(value)
|
||||
}
|
||||
case 'globals':
|
||||
case 'globalTypes': {
|
||||
const v = {};
|
||||
v[key] = value;
|
||||
return addParameters(v, false);
|
||||
}
|
||||
case 'decorateStory':
|
||||
case 'applyDecorators':
|
||||
case 'renderToDOM': // deprecated
|
||||
case 'renderToCanvas': {
|
||||
return null; // This key is not handled directly in v6 mode.
|
||||
}
|
||||
case 'runStep': {
|
||||
return addStepRunner(value);
|
||||
}
|
||||
default: {
|
||||
// eslint-disable-next-line prefer-template
|
||||
return console.log(key + ' was not supported :( !');
|
||||
}
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
/* TODO: not quite sure what to do with this, to fix HMR
|
||||
if (import.meta.hot) {
|
||||
import.meta.hot.accept();
|
||||
}
|
||||
*/
|
||||
|
||||
configStories(configure);
|
||||
`.trim();
|
||||
return code;
|
||||
}
|
||||
@ -31,7 +31,7 @@ async function toImportFn(stories: string[]) {
|
||||
const ext = path.extname(file);
|
||||
const relativePath = normalizePath(path.relative(process.cwd(), file));
|
||||
if (!['.js', '.jsx', '.ts', '.tsx', '.mdx', '.svelte', '.vue'].includes(ext)) {
|
||||
logger.warn(`Cannot process ${ext} file with storyStoreV7: ${relativePath}`);
|
||||
logger.warn(`Cannot process ${ext} file: ${relativePath}`);
|
||||
}
|
||||
|
||||
return ` '${toImportPath(relativePath)}': async () => import('/@fs/${file}')`;
|
||||
|
||||
@ -4,10 +4,8 @@ import * as fs from 'fs';
|
||||
import type { Plugin } from 'vite';
|
||||
import type { Options } from '@storybook/types';
|
||||
import { transformIframeHtml } from '../transform-iframe-html';
|
||||
import { generateIframeScriptCode } from '../codegen-iframe-script';
|
||||
import { generateModernIframeScriptCode } from '../codegen-modern-iframe-script';
|
||||
import { generateImportFnScriptCode } from '../codegen-importfn-script';
|
||||
import { generateVirtualStoryEntryCode, generatePreviewEntryCode } from '../codegen-entries';
|
||||
import { generateAddonSetupCode } from '../codegen-set-addon-channel';
|
||||
|
||||
import {
|
||||
@ -90,27 +88,16 @@ export function codeGeneratorPlugin(options: Options): Plugin {
|
||||
return undefined;
|
||||
},
|
||||
async load(id, config) {
|
||||
const storyStoreV7 = options.features?.storyStoreV7;
|
||||
if (id === virtualStoriesFile) {
|
||||
if (storyStoreV7) {
|
||||
return generateImportFnScriptCode(options);
|
||||
}
|
||||
return generateVirtualStoryEntryCode(options);
|
||||
return generateImportFnScriptCode(options);
|
||||
}
|
||||
|
||||
if (id === virtualAddonSetupFile) {
|
||||
return generateAddonSetupCode();
|
||||
}
|
||||
|
||||
if (id === virtualPreviewFile && !storyStoreV7) {
|
||||
return generatePreviewEntryCode(options);
|
||||
}
|
||||
|
||||
if (id === virtualFileId) {
|
||||
if (storyStoreV7) {
|
||||
return generateModernIframeScriptCode(options, projectRoot);
|
||||
}
|
||||
return generateIframeScriptCode(options, projectRoot);
|
||||
return generateModernIframeScriptCode(options, projectRoot);
|
||||
}
|
||||
|
||||
if (id === iframeId) {
|
||||
|
||||
@ -132,68 +132,25 @@ export default async (
|
||||
].filter(Boolean);
|
||||
|
||||
const virtualModuleMapping: Record<string, string> = {};
|
||||
if (features?.storyStoreV7) {
|
||||
const storiesFilename = 'storybook-stories.js';
|
||||
const storiesPath = resolve(join(workingDir, storiesFilename));
|
||||
const storiesFilename = 'storybook-stories.js';
|
||||
const storiesPath = resolve(join(workingDir, storiesFilename));
|
||||
|
||||
const needPipelinedImport = !!builderOptions.lazyCompilation && !isProd;
|
||||
virtualModuleMapping[storiesPath] = toImportFn(stories, { needPipelinedImport });
|
||||
const configEntryPath = resolve(join(workingDir, 'storybook-config-entry.js'));
|
||||
virtualModuleMapping[configEntryPath] = handlebars(
|
||||
await readTemplate(
|
||||
require.resolve(
|
||||
'@storybook/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars'
|
||||
)
|
||||
),
|
||||
{
|
||||
storiesFilename,
|
||||
previewAnnotations,
|
||||
}
|
||||
// We need to double escape `\` for webpack. We may have some in windows paths
|
||||
).replace(/\\/g, '\\\\');
|
||||
entries.push(configEntryPath);
|
||||
} else {
|
||||
const rendererName = await getRendererName(options);
|
||||
|
||||
const rendererInitEntry = resolve(join(workingDir, 'storybook-init-renderer-entry.js'));
|
||||
virtualModuleMapping[rendererInitEntry] = `import '${slash(rendererName)}';`;
|
||||
entries.push(rendererInitEntry);
|
||||
|
||||
const entryTemplate = await readTemplate(
|
||||
join(__dirname, '..', '..', 'templates', 'virtualModuleEntry.template.js')
|
||||
);
|
||||
|
||||
previewAnnotations.forEach((previewAnnotationFilename: string | undefined) => {
|
||||
if (!previewAnnotationFilename) return;
|
||||
|
||||
// Ensure that relative paths end up mapped to a filename in the cwd, so a later import
|
||||
// of the `previewAnnotationFilename` in the template works.
|
||||
const entryFilename = previewAnnotationFilename.startsWith('.')
|
||||
? `${previewAnnotationFilename.replace(/(\w)(\/|\\)/g, '$1-')}-generated-config-entry.js`
|
||||
: `${previewAnnotationFilename}-generated-config-entry.js`;
|
||||
// NOTE: although this file is also from the `dist/cjs` directory, it is actually a ESM
|
||||
// file, see https://github.com/storybookjs/storybook/pull/16727#issuecomment-986485173
|
||||
virtualModuleMapping[entryFilename] = interpolate(entryTemplate, {
|
||||
previewAnnotationFilename,
|
||||
});
|
||||
entries.push(entryFilename);
|
||||
});
|
||||
if (stories.length > 0) {
|
||||
const storyTemplate = await readTemplate(
|
||||
join(__dirname, '..', '..', 'templates', 'virtualModuleStory.template.js')
|
||||
);
|
||||
// NOTE: this file has a `.cjs` extension as it is a CJS file (from `dist/cjs`) and runs
|
||||
// in the user's webpack mode, which may be strict about the use of require/import.
|
||||
// See https://github.com/storybookjs/storybook/issues/14877
|
||||
const storiesFilename = resolve(join(workingDir, `generated-stories-entry.cjs`));
|
||||
virtualModuleMapping[storiesFilename] = interpolate(storyTemplate, {
|
||||
rendererName,
|
||||
})
|
||||
// Make sure we also replace quotes for this one
|
||||
.replace("'{{stories}}'", stories.map(toRequireContextString).join(','));
|
||||
entries.push(storiesFilename);
|
||||
const needPipelinedImport = !!builderOptions.lazyCompilation && !isProd;
|
||||
virtualModuleMapping[storiesPath] = toImportFn(stories, { needPipelinedImport });
|
||||
const configEntryPath = resolve(join(workingDir, 'storybook-config-entry.js'));
|
||||
virtualModuleMapping[configEntryPath] = handlebars(
|
||||
await readTemplate(
|
||||
require.resolve(
|
||||
'@storybook/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars'
|
||||
)
|
||||
),
|
||||
{
|
||||
storiesFilename,
|
||||
previewAnnotations,
|
||||
}
|
||||
}
|
||||
// We need to double escape `\` for webpack. We may have some in windows paths
|
||||
).replace(/\\/g, '\\\\');
|
||||
entries.push(configEntryPath);
|
||||
|
||||
const shouldCheckTs = typescriptOptions.check && !typescriptOptions.skipBabel;
|
||||
const tsCheckOptions = typescriptOptions.checkOptions || {};
|
||||
|
||||
@ -1,65 +0,0 @@
|
||||
/* eslint-disable import/no-unresolved */
|
||||
import {
|
||||
addDecorator,
|
||||
addParameters,
|
||||
addLoader,
|
||||
addArgs,
|
||||
addArgTypes,
|
||||
addStepRunner,
|
||||
addArgsEnhancer,
|
||||
addArgTypesEnhancer,
|
||||
setGlobalRender,
|
||||
} from '@storybook/preview-api';
|
||||
import * as previewAnnotations from '{{previewAnnotationFilename}}';
|
||||
|
||||
const config = previewAnnotations.default ?? previewAnnotations;
|
||||
|
||||
Object.keys(config).forEach((key) => {
|
||||
const value = config[key];
|
||||
switch (key) {
|
||||
case 'args': {
|
||||
return addArgs(value);
|
||||
}
|
||||
case 'argTypes': {
|
||||
return addArgTypes(value);
|
||||
}
|
||||
case 'decorators': {
|
||||
return value.forEach((decorator) => addDecorator(decorator, false));
|
||||
}
|
||||
case 'loaders': {
|
||||
return value.forEach((loader) => addLoader(loader, false));
|
||||
}
|
||||
case 'parameters': {
|
||||
return addParameters({ ...value }, false);
|
||||
}
|
||||
case 'argTypesEnhancers': {
|
||||
return value.forEach((enhancer) => addArgTypesEnhancer(enhancer));
|
||||
}
|
||||
case 'argsEnhancers': {
|
||||
return value.forEach((enhancer) => addArgsEnhancer(enhancer));
|
||||
}
|
||||
case 'render': {
|
||||
return setGlobalRender(value);
|
||||
}
|
||||
case 'globals':
|
||||
case 'globalTypes': {
|
||||
const v = {};
|
||||
v[key] = value;
|
||||
return addParameters(v, false);
|
||||
}
|
||||
case '__namedExportsOrder':
|
||||
case 'decorateStory':
|
||||
case 'renderToDOM': // deprecated
|
||||
case 'renderToCanvas': {
|
||||
return null; // This key is not handled directly in v6 mode.
|
||||
}
|
||||
case 'runStep': {
|
||||
return addStepRunner(value);
|
||||
}
|
||||
default: {
|
||||
return console.log(
|
||||
`Unknown key '${key}' exported by preview annotation file '{{previewAnnotationFilename}}'`
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -1,3 +0,0 @@
|
||||
const { configure } = require('{{rendererName}}');
|
||||
|
||||
configure(['{{stories}}'], module, false);
|
||||
@ -29,9 +29,6 @@ const config: StorybookConfig = {
|
||||
disableTelemetry: true,
|
||||
},
|
||||
logLevel: 'debug',
|
||||
features: {
|
||||
storyStoreV7: false,
|
||||
},
|
||||
framework: {
|
||||
name: '@storybook/react-webpack5',
|
||||
options: {
|
||||
|
||||
@ -124,13 +124,6 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption
|
||||
presets.apply<DocsOptions>('docs', {}),
|
||||
]);
|
||||
|
||||
if (features?.storyStoreV7 === false) {
|
||||
deprecate(
|
||||
dedent`storyStoreV6 is deprecated, please migrate to storyStoreV7 instead.
|
||||
- Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev6-and-storiesof-is-deprecated`
|
||||
);
|
||||
}
|
||||
|
||||
const fullOptions: Options = {
|
||||
...options,
|
||||
presets,
|
||||
@ -164,7 +157,7 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption
|
||||
|
||||
let initializedStoryIndexGenerator: Promise<StoryIndexGenerator | undefined> =
|
||||
Promise.resolve(undefined);
|
||||
if ((features?.buildStoriesJson || features?.storyStoreV7) && !options.ignorePreview) {
|
||||
if (!options.ignorePreview) {
|
||||
const workingDir = process.cwd();
|
||||
const directories = {
|
||||
configDir: options.configDir,
|
||||
@ -176,8 +169,8 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption
|
||||
storyIndexers: deprecatedStoryIndexers,
|
||||
indexers,
|
||||
docs: docsOptions,
|
||||
storiesV2Compatibility: !features?.storyStoreV7,
|
||||
storyStoreV7: !!features?.storyStoreV7,
|
||||
storiesV2Compatibility: false,
|
||||
storyStoreV7: true,
|
||||
});
|
||||
|
||||
initializedStoryIndexGenerator = generator.initialize().then(() => generator);
|
||||
|
||||
@ -38,13 +38,6 @@ export async function storybookDevServer(options: Options) {
|
||||
getServerChannel(server)
|
||||
);
|
||||
|
||||
if (features?.storyStoreV7 === false) {
|
||||
deprecate(
|
||||
dedent`storyStoreV6 is deprecated, please migrate to storyStoreV7 instead.
|
||||
- Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev6-and-storiesof-is-deprecated`
|
||||
);
|
||||
}
|
||||
|
||||
let indexError: Error | undefined;
|
||||
// try get index generator, if failed, send telemetry without storyCount, then rethrow the error
|
||||
const initializedStoryIndexGenerator: Promise<StoryIndexGenerator | undefined> =
|
||||
|
||||
@ -190,7 +190,6 @@ export const features = async (
|
||||
...existing,
|
||||
warnOnLegacyHierarchySeparator: true,
|
||||
buildStoriesJson: false,
|
||||
storyStoreV7: true,
|
||||
argTypeTargetsV7: true,
|
||||
legacyDecoratorFileOrder: false,
|
||||
});
|
||||
|
||||
@ -429,11 +429,6 @@ export class StoryIndexGenerator {
|
||||
async extractDocs(specifier: NormalizedStoriesSpecifier, absolutePath: Path) {
|
||||
const relativePath = path.relative(this.options.workingDir, absolutePath);
|
||||
try {
|
||||
invariant(
|
||||
this.options.storyStoreV7,
|
||||
`You cannot use \`.mdx\` files without using \`storyStoreV7\`.`
|
||||
);
|
||||
|
||||
const normalizedPath = normalizeStoryPath(relativePath);
|
||||
const importPath = slash(normalizedPath);
|
||||
|
||||
@ -613,13 +608,9 @@ export class StoryIndexGenerator {
|
||||
async sortStories(entries: StoryIndex['entries']) {
|
||||
const sortableStories = Object.values(entries);
|
||||
|
||||
// Skip sorting if we're in v6 mode because we don't have
|
||||
// all the info we need here
|
||||
if (this.options.storyStoreV7) {
|
||||
const storySortParameter = await this.getStorySortParameter();
|
||||
const fileNameOrder = this.storyFileNames();
|
||||
sortStoriesV7(sortableStories, storySortParameter, fileNameOrder);
|
||||
}
|
||||
const storySortParameter = await this.getStorySortParameter();
|
||||
const fileNameOrder = this.storyFileNames();
|
||||
sortStoriesV7(sortableStories, storySortParameter, fileNameOrder);
|
||||
|
||||
return sortableStories.reduce((acc, item) => {
|
||||
acc[item.id] = item;
|
||||
|
||||
@ -19,7 +19,6 @@ const options: StoryIndexGeneratorOptions = {
|
||||
storyIndexers: [],
|
||||
indexers: [],
|
||||
storiesV2Compatibility: false,
|
||||
storyStoreV7: true,
|
||||
docs: { defaultName: 'docs', autodocs: false },
|
||||
};
|
||||
|
||||
|
||||
@ -7,17 +7,12 @@ import { router } from './router';
|
||||
|
||||
export async function getStoryIndexGenerator(
|
||||
features: {
|
||||
buildStoriesJson?: boolean;
|
||||
storyStoreV7?: boolean;
|
||||
argTypeTargetsV7?: boolean;
|
||||
warnOnLegacyHierarchySeparator?: boolean;
|
||||
},
|
||||
options: Options,
|
||||
serverChannel: ServerChannel
|
||||
): Promise<StoryIndexGenerator | undefined> {
|
||||
if (!features?.buildStoriesJson && !features?.storyStoreV7) {
|
||||
return undefined;
|
||||
}
|
||||
const workingDir = process.cwd();
|
||||
const directories = {
|
||||
configDir: options.configDir,
|
||||
@ -35,8 +30,8 @@ export async function getStoryIndexGenerator(
|
||||
indexers: await indexers,
|
||||
docs: await docsOptions,
|
||||
workingDir,
|
||||
storiesV2Compatibility: !features?.storyStoreV7,
|
||||
storyStoreV7: features.storyStoreV7 ?? false,
|
||||
storiesV2Compatibility: false, // FIXME -- drop this
|
||||
storyStoreV7: true, // FIXME -- drop this
|
||||
});
|
||||
|
||||
const initializedStoryIndexGenerator = generator.initialize().then(() => generator);
|
||||
|
||||
@ -710,181 +710,6 @@ describe('useStoriesJson', () => {
|
||||
`);
|
||||
});
|
||||
|
||||
it('disallows .mdx files without storyStoreV7', async () => {
|
||||
const mockServerChannel = { emit: jest.fn() } as any as ServerChannel;
|
||||
useStoriesJson({
|
||||
router,
|
||||
initializedStoryIndexGenerator: getInitializedStoryIndexGenerator({
|
||||
storyStoreV7: false,
|
||||
}),
|
||||
workingDir,
|
||||
serverChannel: mockServerChannel,
|
||||
normalizedStories,
|
||||
});
|
||||
|
||||
expect(use).toHaveBeenCalledTimes(2);
|
||||
const route = use.mock.calls[1][1];
|
||||
|
||||
await route(request, response);
|
||||
|
||||
expect(send).toHaveBeenCalledTimes(1);
|
||||
expect(send.mock.calls[0][0]).toMatchInlineSnapshot(`
|
||||
"Unable to index files:
|
||||
- ./src/docs2/ComponentReference.mdx: Invariant failed: You cannot use \`.mdx\` files without using \`storyStoreV7\`.
|
||||
- ./src/docs2/MetaOf.mdx: Invariant failed: You cannot use \`.mdx\` files without using \`storyStoreV7\`.
|
||||
- ./src/docs2/NoTitle.mdx: Invariant failed: You cannot use \`.mdx\` files without using \`storyStoreV7\`.
|
||||
- ./src/docs2/SecondMetaOf.mdx: Invariant failed: You cannot use \`.mdx\` files without using \`storyStoreV7\`.
|
||||
- ./src/docs2/Template.mdx: Invariant failed: You cannot use \`.mdx\` files without using \`storyStoreV7\`.
|
||||
- ./src/docs2/Title.mdx: Invariant failed: You cannot use \`.mdx\` files without using \`storyStoreV7\`."
|
||||
`);
|
||||
});
|
||||
|
||||
it('allows disabling storyStoreV7 if no .mdx files are used', async () => {
|
||||
const mockServerChannel = { emit: jest.fn() } as any as ServerChannel;
|
||||
useStoriesJson({
|
||||
router,
|
||||
initializedStoryIndexGenerator: getInitializedStoryIndexGenerator(
|
||||
{ storyStoreV7: false },
|
||||
normalizedStories.slice(0, 1)
|
||||
),
|
||||
workingDir,
|
||||
serverChannel: mockServerChannel,
|
||||
normalizedStories,
|
||||
});
|
||||
|
||||
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",
|
||||
"kind": "A",
|
||||
"name": "Story One",
|
||||
"parameters": Object {
|
||||
"__id": "a--story-one",
|
||||
"docsOnly": false,
|
||||
"fileName": "./src/A.stories.js",
|
||||
},
|
||||
"story": "Story One",
|
||||
"tags": Array [
|
||||
"component-tag",
|
||||
"story-tag",
|
||||
"story",
|
||||
],
|
||||
"title": "A",
|
||||
},
|
||||
"b--story-one": Object {
|
||||
"id": "b--story-one",
|
||||
"importPath": "./src/B.stories.ts",
|
||||
"kind": "B",
|
||||
"name": "Story One",
|
||||
"parameters": Object {
|
||||
"__id": "b--story-one",
|
||||
"docsOnly": false,
|
||||
"fileName": "./src/B.stories.ts",
|
||||
},
|
||||
"story": "Story One",
|
||||
"tags": Array [
|
||||
"autodocs",
|
||||
"story",
|
||||
],
|
||||
"title": "B",
|
||||
},
|
||||
"d--story-one": Object {
|
||||
"id": "d--story-one",
|
||||
"importPath": "./src/D.stories.jsx",
|
||||
"kind": "D",
|
||||
"name": "Story One",
|
||||
"parameters": Object {
|
||||
"__id": "d--story-one",
|
||||
"docsOnly": false,
|
||||
"fileName": "./src/D.stories.jsx",
|
||||
},
|
||||
"story": "Story One",
|
||||
"tags": Array [
|
||||
"autodocs",
|
||||
"story",
|
||||
],
|
||||
"title": "D",
|
||||
},
|
||||
"first-nested-deeply-f--story-one": Object {
|
||||
"id": "first-nested-deeply-f--story-one",
|
||||
"importPath": "./src/first-nested/deeply/F.stories.js",
|
||||
"kind": "first-nested/deeply/F",
|
||||
"name": "Story One",
|
||||
"parameters": Object {
|
||||
"__id": "first-nested-deeply-f--story-one",
|
||||
"docsOnly": false,
|
||||
"fileName": "./src/first-nested/deeply/F.stories.js",
|
||||
},
|
||||
"story": "Story One",
|
||||
"tags": Array [
|
||||
"story",
|
||||
],
|
||||
"title": "first-nested/deeply/F",
|
||||
},
|
||||
"h--story-one": Object {
|
||||
"id": "h--story-one",
|
||||
"importPath": "./src/H.stories.mjs",
|
||||
"kind": "H",
|
||||
"name": "Story One",
|
||||
"parameters": Object {
|
||||
"__id": "h--story-one",
|
||||
"docsOnly": false,
|
||||
"fileName": "./src/H.stories.mjs",
|
||||
},
|
||||
"story": "Story One",
|
||||
"tags": Array [
|
||||
"autodocs",
|
||||
"story",
|
||||
],
|
||||
"title": "H",
|
||||
},
|
||||
"nested-button--story-one": Object {
|
||||
"id": "nested-button--story-one",
|
||||
"importPath": "./src/nested/Button.stories.ts",
|
||||
"kind": "nested/Button",
|
||||
"name": "Story One",
|
||||
"parameters": Object {
|
||||
"__id": "nested-button--story-one",
|
||||
"docsOnly": false,
|
||||
"fileName": "./src/nested/Button.stories.ts",
|
||||
},
|
||||
"story": "Story One",
|
||||
"tags": Array [
|
||||
"component-tag",
|
||||
"story",
|
||||
],
|
||||
"title": "nested/Button",
|
||||
},
|
||||
"second-nested-g--story-one": Object {
|
||||
"id": "second-nested-g--story-one",
|
||||
"importPath": "./src/second-nested/G.stories.ts",
|
||||
"kind": "second-nested/G",
|
||||
"name": "Story One",
|
||||
"parameters": Object {
|
||||
"__id": "second-nested-g--story-one",
|
||||
"docsOnly": false,
|
||||
"fileName": "./src/second-nested/G.stories.ts",
|
||||
},
|
||||
"story": "Story One",
|
||||
"tags": Array [
|
||||
"story",
|
||||
],
|
||||
"title": "second-nested/G",
|
||||
},
|
||||
},
|
||||
"v": 3,
|
||||
}
|
||||
`);
|
||||
});
|
||||
|
||||
it('can handle simultaneous access', async () => {
|
||||
const mockServerChannel = { emit: jest.fn() } as any as ServerChannel;
|
||||
|
||||
|
||||
@ -455,8 +455,8 @@ export class CsfFile {
|
||||
throw new Error(dedent`
|
||||
Unexpected \`storiesOf\` usage: ${formatLocation(node, self._fileName)}.
|
||||
|
||||
In SB7, we use the next-generation \`storyStoreV7\` by default, which does not support \`storiesOf\`.
|
||||
More info, with details about how to opt-out here: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev7-enabled-by-default
|
||||
In SB8, we no longer support \`storiesOf\`.
|
||||
More info, with details about how to migrate here: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#FIXME
|
||||
`);
|
||||
}
|
||||
},
|
||||
|
||||
@ -814,10 +814,8 @@ export const init: ModuleFn<SubAPI, SubState> = ({
|
||||
filters: config?.sidebar?.filters || {},
|
||||
},
|
||||
init: async () => {
|
||||
if (FEATURES?.storyStoreV7) {
|
||||
provider.channel.on(STORY_INDEX_INVALIDATED, () => api.fetchIndex());
|
||||
await api.fetchIndex();
|
||||
}
|
||||
provider.channel.on(STORY_INDEX_INVALIDATED, () => api.fetchIndex());
|
||||
await api.fetchIndex();
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
@ -40,7 +40,6 @@ jest.mock('@storybook/global', () => ({
|
||||
global: {
|
||||
...globalThis,
|
||||
fetch: jest.fn(() => ({ json: () => ({ v: 4, entries: mockGetEntries() }) })),
|
||||
FEATURES: { storyStoreV7: true },
|
||||
CONFIG_TYPE: 'DEVELOPMENT',
|
||||
},
|
||||
}));
|
||||
|
||||
@ -10,34 +10,14 @@ The preview's job is:
|
||||
|
||||
3. Render the current selection to the web view in either story or docs mode.
|
||||
|
||||
## V7 Store vs Legacy (V6)
|
||||
|
||||
The story store is designed to load stories 'on demand', and will operate in this fashion if the `storyStoreV7` feature is enabled.
|
||||
|
||||
However, for back-compat reasons, in v6 mode, we need to load all stories, synchronously on bootup, emitting the `SET_STORIES` event.
|
||||
|
||||
In V7 mode we do not emit that event, instead preferring the `STORY_PREPARED` event, with the data for the single story being rendered.
|
||||
|
||||
## Initialization
|
||||
|
||||
The preview is `initialized` in two ways.
|
||||
|
||||
### V7 Mode:
|
||||
|
||||
- `importFn` - is an async `import()` function
|
||||
|
||||
- `getProjectAnnotations` - is a simple function that evaluations `preview.js` and addon config files and combines them. If it errors, the Preview will show the error.
|
||||
|
||||
- No `getStoryIndex` function is passed, instead the preview creates a `StoryIndexClient` that pulls `stories.json` from node and watches the event stream for invalidation events.
|
||||
|
||||
### V6 Mode
|
||||
|
||||
- `importFn` - is a simulated `import()` function, that is synchronous, see `client-api` for details.
|
||||
- `getProjectAnnotations` - also evaluates `preview.js` et al, but watches for calls to `setStories`, and passes them to the `ClientApi`
|
||||
- `getStoryIndex` is a local function (that must be called _after_ `getProjectAnnotations`) that gets the list of stories added.
|
||||
|
||||
See `client-api` for more details on this process.
|
||||
|
||||
## Story Rendering and interruptions
|
||||
|
||||
The Preview is split into three parts responsible for state management:
|
||||
|
||||
@ -1,4 +0,0 @@
|
||||
/* eslint-disable @typescript-eslint/triple-slash-reference */
|
||||
/// <reference path="typings.d.ts" />
|
||||
|
||||
export * from './modules/client-api';
|
||||
@ -1,4 +0,0 @@
|
||||
/* eslint-disable @typescript-eslint/triple-slash-reference */
|
||||
/// <reference path="typings.d.ts" />
|
||||
|
||||
export * from './modules/core-client';
|
||||
@ -41,22 +41,6 @@ export { DocsContext } from './preview-web';
|
||||
*/
|
||||
export { simulatePageLoad, simulateDOMContentLoaded } from './preview-web';
|
||||
|
||||
/**
|
||||
* STORIES API
|
||||
*/
|
||||
export {
|
||||
addArgTypes,
|
||||
addArgTypesEnhancer,
|
||||
addArgs,
|
||||
addArgsEnhancer,
|
||||
addDecorator,
|
||||
addLoader,
|
||||
addParameters,
|
||||
addStepRunner,
|
||||
} from './client-api';
|
||||
export { getQueryParam, getQueryParams } from './client-api';
|
||||
export { setGlobalRender } from './client-api';
|
||||
|
||||
export {
|
||||
combineArgs,
|
||||
combineParameters,
|
||||
@ -83,7 +67,5 @@ export type { PropDescriptor } from './store';
|
||||
/**
|
||||
* STORIES API
|
||||
*/
|
||||
export { ClientApi } from './client-api';
|
||||
export { StoryStore } from './store';
|
||||
export { Preview, PreviewWeb } from './preview-web';
|
||||
export { start } from './core-client';
|
||||
|
||||
@ -1,55 +0,0 @@
|
||||
import { addons, mockChannel } from '../addons';
|
||||
import { ClientApi } from './ClientApi';
|
||||
|
||||
beforeEach(() => {
|
||||
addons.setChannel(mockChannel());
|
||||
});
|
||||
|
||||
describe('ClientApi', () => {
|
||||
describe('getStoryIndex', () => {
|
||||
it('should remember the order that files were added in', async () => {
|
||||
const clientApi = new ClientApi();
|
||||
const store = {
|
||||
processCSFFileWithCache: jest.fn(() => ({ meta: { title: 'title' } })),
|
||||
storyFromCSFFile: jest.fn(({ storyId }) => ({
|
||||
id: storyId,
|
||||
parameters: { fileName: storyId.split('-')[0].replace('kind', 'file') },
|
||||
})),
|
||||
};
|
||||
clientApi.storyStore = store as any;
|
||||
|
||||
let disposeCallback: () => void = () => {};
|
||||
const module1 = {
|
||||
id: 'file1',
|
||||
hot: {
|
||||
data: {},
|
||||
accept: jest.fn(),
|
||||
dispose(cb: () => void) {
|
||||
disposeCallback = cb;
|
||||
},
|
||||
},
|
||||
};
|
||||
const module2 = {
|
||||
id: 'file2',
|
||||
};
|
||||
clientApi.storiesOf('kind1', module1 as unknown as NodeModule).add('story1', jest.fn());
|
||||
clientApi.storiesOf('kind2', module2 as unknown as NodeModule).add('story2', jest.fn());
|
||||
// This gets called by configure
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
clientApi._loadAddedExports();
|
||||
|
||||
expect(Object.keys(clientApi.getStoryIndex().entries)).toEqual([
|
||||
'kind1--story1',
|
||||
'kind2--story2',
|
||||
]);
|
||||
|
||||
disposeCallback();
|
||||
clientApi.storiesOf('kind1', module1 as unknown as NodeModule).add('story1', jest.fn());
|
||||
await new Promise((r) => setTimeout(r, 0));
|
||||
expect(Object.keys(clientApi.getStoryIndex().entries)).toEqual([
|
||||
'kind1--story1',
|
||||
'kind2--story2',
|
||||
]);
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,375 +0,0 @@
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
|
||||
import { dedent } from 'ts-dedent';
|
||||
import { global } from '@storybook/global';
|
||||
import { logger } from '@storybook/client-logger';
|
||||
import { toId, sanitize } from '@storybook/csf';
|
||||
import type {
|
||||
Args,
|
||||
StepRunner,
|
||||
ArgTypes,
|
||||
Renderer,
|
||||
DecoratorFunction,
|
||||
Parameters,
|
||||
ArgTypesEnhancer,
|
||||
ArgsEnhancer,
|
||||
LoaderFunction,
|
||||
StoryFn,
|
||||
Globals,
|
||||
GlobalTypes,
|
||||
Addon_ClientApiAddons,
|
||||
Addon_StoryApi,
|
||||
NormalizedComponentAnnotations,
|
||||
Path,
|
||||
ModuleImportFn,
|
||||
ModuleExports,
|
||||
} from '@storybook/types';
|
||||
import type { StoryStore } from '../../store';
|
||||
import { combineParameters, composeStepRunners, normalizeInputTypes } from '../../store';
|
||||
|
||||
import { StoryStoreFacade } from './StoryStoreFacade';
|
||||
|
||||
const warningAlternatives = {
|
||||
addDecorator: `Instead, use \`export const decorators = [];\` in your \`preview.js\`.`,
|
||||
addParameters: `Instead, use \`export const parameters = {};\` in your \`preview.js\`.`,
|
||||
addLoader: `Instead, use \`export const loaders = [];\` in your \`preview.js\`.`,
|
||||
addArgs: '',
|
||||
addArgTypes: '',
|
||||
addArgsEnhancer: '',
|
||||
addArgTypesEnhancer: '',
|
||||
addStepRunner: '',
|
||||
getGlobalRender: '',
|
||||
setGlobalRender: '',
|
||||
};
|
||||
|
||||
const checkMethod = (method: keyof typeof warningAlternatives) => {
|
||||
if (global.FEATURES?.storyStoreV7) {
|
||||
throw new Error(
|
||||
dedent`You cannot use \`${method}\` with the new Story Store.
|
||||
|
||||
${warningAlternatives[method]}`
|
||||
);
|
||||
}
|
||||
|
||||
if (!global.__STORYBOOK_CLIENT_API__) {
|
||||
throw new Error(`Singleton client API not yet initialized, cannot call \`${method}\`.`);
|
||||
}
|
||||
};
|
||||
|
||||
export const addDecorator = (decorator: DecoratorFunction<Renderer>) => {
|
||||
checkMethod('addDecorator');
|
||||
global.__STORYBOOK_CLIENT_API__?.addDecorator(decorator);
|
||||
};
|
||||
|
||||
export const addParameters = (parameters: Parameters) => {
|
||||
checkMethod('addParameters');
|
||||
global.__STORYBOOK_CLIENT_API__?.addParameters(parameters);
|
||||
};
|
||||
|
||||
export const addLoader = (loader: LoaderFunction<Renderer>) => {
|
||||
checkMethod('addLoader');
|
||||
global.__STORYBOOK_CLIENT_API__?.addLoader(loader);
|
||||
};
|
||||
|
||||
export const addArgs = (args: Args) => {
|
||||
checkMethod('addArgs');
|
||||
global.__STORYBOOK_CLIENT_API__?.addArgs(args);
|
||||
};
|
||||
|
||||
export const addArgTypes = (argTypes: ArgTypes) => {
|
||||
checkMethod('addArgTypes');
|
||||
global.__STORYBOOK_CLIENT_API__?.addArgTypes(argTypes);
|
||||
};
|
||||
|
||||
export const addArgsEnhancer = (enhancer: ArgsEnhancer<Renderer>) => {
|
||||
checkMethod('addArgsEnhancer');
|
||||
global.__STORYBOOK_CLIENT_API__?.addArgsEnhancer(enhancer);
|
||||
};
|
||||
|
||||
export const addArgTypesEnhancer = (enhancer: ArgTypesEnhancer<Renderer>) => {
|
||||
checkMethod('addArgTypesEnhancer');
|
||||
global.__STORYBOOK_CLIENT_API__?.addArgTypesEnhancer(enhancer);
|
||||
};
|
||||
|
||||
export const addStepRunner = (stepRunner: StepRunner) => {
|
||||
checkMethod('addStepRunner');
|
||||
global.__STORYBOOK_CLIENT_API__?.addStepRunner(stepRunner);
|
||||
};
|
||||
|
||||
export const getGlobalRender = () => {
|
||||
checkMethod('getGlobalRender');
|
||||
return global.__STORYBOOK_CLIENT_API__?.facade.projectAnnotations.render;
|
||||
};
|
||||
|
||||
export const setGlobalRender = (render: StoryStoreFacade<any>['projectAnnotations']['render']) => {
|
||||
checkMethod('setGlobalRender');
|
||||
if (global.__STORYBOOK_CLIENT_API__) {
|
||||
global.__STORYBOOK_CLIENT_API__.facade.projectAnnotations.render = render;
|
||||
}
|
||||
};
|
||||
|
||||
const invalidStoryTypes = new Set(['string', 'number', 'boolean', 'symbol']);
|
||||
export class ClientApi<TRenderer extends Renderer> {
|
||||
facade: StoryStoreFacade<TRenderer>;
|
||||
|
||||
storyStore?: StoryStore<TRenderer>;
|
||||
|
||||
private addons: Addon_ClientApiAddons<TRenderer['storyResult']>;
|
||||
|
||||
onImportFnChanged?: ({ importFn }: { importFn: ModuleImportFn }) => void;
|
||||
|
||||
// If we don't get passed modules so don't know filenames, we can
|
||||
// just use numeric indexes
|
||||
private lastFileName = 0;
|
||||
|
||||
constructor({ storyStore }: { storyStore?: StoryStore<TRenderer> } = {}) {
|
||||
this.facade = new StoryStoreFacade();
|
||||
|
||||
this.addons = {};
|
||||
|
||||
this.storyStore = storyStore;
|
||||
}
|
||||
|
||||
importFn(path: Path) {
|
||||
return this.facade.importFn(path);
|
||||
}
|
||||
|
||||
getStoryIndex() {
|
||||
if (!this.storyStore) {
|
||||
throw new Error('Cannot get story index before setting storyStore');
|
||||
}
|
||||
return this.facade.getStoryIndex(this.storyStore);
|
||||
}
|
||||
|
||||
addDecorator = (decorator: DecoratorFunction<TRenderer>) => {
|
||||
this.facade.projectAnnotations.decorators?.push(decorator);
|
||||
};
|
||||
|
||||
addParameters = ({
|
||||
globals,
|
||||
globalTypes,
|
||||
...parameters
|
||||
}: Parameters & { globals?: Globals; globalTypes?: GlobalTypes }) => {
|
||||
this.facade.projectAnnotations.parameters = combineParameters(
|
||||
this.facade.projectAnnotations.parameters,
|
||||
parameters
|
||||
);
|
||||
if (globals) {
|
||||
this.facade.projectAnnotations.globals = {
|
||||
...this.facade.projectAnnotations.globals,
|
||||
...globals,
|
||||
};
|
||||
}
|
||||
if (globalTypes) {
|
||||
this.facade.projectAnnotations.globalTypes = {
|
||||
...this.facade.projectAnnotations.globalTypes,
|
||||
...normalizeInputTypes(globalTypes),
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
addStepRunner = (stepRunner: StepRunner) => {
|
||||
this.facade.projectAnnotations.runStep = composeStepRunners(
|
||||
[this.facade.projectAnnotations.runStep, stepRunner].filter(Boolean) as StepRunner[]
|
||||
);
|
||||
};
|
||||
|
||||
addLoader = (loader: LoaderFunction<TRenderer>) => {
|
||||
this.facade.projectAnnotations.loaders?.push(loader);
|
||||
};
|
||||
|
||||
addArgs = (args: Args) => {
|
||||
this.facade.projectAnnotations.args = {
|
||||
...this.facade.projectAnnotations.args,
|
||||
...args,
|
||||
};
|
||||
};
|
||||
|
||||
addArgTypes = (argTypes: ArgTypes) => {
|
||||
this.facade.projectAnnotations.argTypes = {
|
||||
...this.facade.projectAnnotations.argTypes,
|
||||
...normalizeInputTypes(argTypes),
|
||||
};
|
||||
};
|
||||
|
||||
addArgsEnhancer = (enhancer: ArgsEnhancer<TRenderer>) => {
|
||||
this.facade.projectAnnotations.argsEnhancers?.push(enhancer);
|
||||
};
|
||||
|
||||
addArgTypesEnhancer = (enhancer: ArgTypesEnhancer<TRenderer>) => {
|
||||
this.facade.projectAnnotations.argTypesEnhancers?.push(enhancer);
|
||||
};
|
||||
|
||||
// Because of the API of `storiesOf().add()` we don't have a good "end" call for a
|
||||
// storiesOf file to finish adding stories, and us to load it into the facade as a
|
||||
// single psuedo-CSF file. So instead we just keep collecting the CSF files and load
|
||||
// them all into the facade at the end.
|
||||
_addedExports = {} as Record<Path, ModuleExports>;
|
||||
|
||||
_loadAddedExports() {
|
||||
Object.entries(this._addedExports).forEach(([fileName, fileExports]) =>
|
||||
this.facade.addStoriesFromExports(fileName, fileExports)
|
||||
);
|
||||
}
|
||||
|
||||
// what are the occasions that "m" is a boolean vs an obj
|
||||
storiesOf = (kind: string, m?: NodeModule): Addon_StoryApi<TRenderer['storyResult']> => {
|
||||
if (!kind && typeof kind !== 'string') {
|
||||
throw new Error('Invalid or missing kind provided for stories, should be a string');
|
||||
}
|
||||
|
||||
if (!m) {
|
||||
logger.warn(
|
||||
`Missing 'module' parameter for story with a kind of '${kind}'. It will break your HMR`
|
||||
);
|
||||
}
|
||||
|
||||
if (m) {
|
||||
const proto = Object.getPrototypeOf(m);
|
||||
if (proto.exports && proto.exports.default) {
|
||||
// FIXME: throw an error in SB6.0
|
||||
logger.error(
|
||||
`Illegal mix of CSF default export and storiesOf calls in a single file: ${proto.i}`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-plusplus
|
||||
const baseFilename = m && m.id ? `${m.id}` : (this.lastFileName++).toString();
|
||||
let fileName = baseFilename;
|
||||
let i = 1;
|
||||
// Deal with `storiesOf()` being called twice in the same file.
|
||||
// On HMR, we clear _addedExports[fileName] below.
|
||||
|
||||
while (this._addedExports[fileName]) {
|
||||
i += 1;
|
||||
fileName = `${baseFilename}-${i}`;
|
||||
}
|
||||
|
||||
if (m && m.hot && m.hot.accept) {
|
||||
// This module used storiesOf(), so when it re-runs on HMR, it will reload
|
||||
// itself automatically without us needing to look at our imports
|
||||
m.hot.accept();
|
||||
m.hot.dispose(() => {
|
||||
this.facade.clearFilenameExports(fileName);
|
||||
|
||||
delete this._addedExports[fileName];
|
||||
|
||||
// We need to update the importFn as soon as the module re-evaluates
|
||||
// (and calls storiesOf() again, etc). We could call `onImportFnChanged()`
|
||||
// at the end of every setStories call (somehow), but then we'd need to
|
||||
// debounce it somehow for initial startup. Instead, we'll take advantage of
|
||||
// the fact that the evaluation of the module happens immediately in the same tick
|
||||
setTimeout(() => {
|
||||
this._loadAddedExports();
|
||||
this.onImportFnChanged?.({ importFn: this.importFn.bind(this) });
|
||||
}, 0);
|
||||
});
|
||||
}
|
||||
|
||||
let hasAdded = false;
|
||||
const api: Addon_StoryApi<TRenderer['storyResult']> = {
|
||||
kind: kind.toString(),
|
||||
add: () => api,
|
||||
addDecorator: () => api,
|
||||
addLoader: () => api,
|
||||
addParameters: () => api,
|
||||
};
|
||||
|
||||
// apply addons
|
||||
Object.keys(this.addons).forEach((name) => {
|
||||
const addon = this.addons[name];
|
||||
api[name] = (...args: any[]) => {
|
||||
addon.apply(api, args);
|
||||
return api;
|
||||
};
|
||||
});
|
||||
|
||||
const meta: NormalizedComponentAnnotations<TRenderer> = {
|
||||
id: sanitize(kind),
|
||||
title: kind,
|
||||
decorators: [],
|
||||
loaders: [],
|
||||
parameters: {},
|
||||
};
|
||||
// We map these back to a simple default export, even though we have type guarantees at this point
|
||||
|
||||
this._addedExports[fileName] = { default: meta };
|
||||
|
||||
let counter = 0;
|
||||
api.add = (storyName: string, storyFn: StoryFn<TRenderer>, parameters: Parameters = {}) => {
|
||||
hasAdded = true;
|
||||
|
||||
if (typeof storyName !== 'string') {
|
||||
throw new Error(`Invalid or missing storyName provided for a "${kind}" story.`);
|
||||
}
|
||||
|
||||
if (!storyFn || Array.isArray(storyFn) || invalidStoryTypes.has(typeof storyFn)) {
|
||||
throw new Error(
|
||||
`Cannot load story "${storyName}" in "${kind}" due to invalid format. Storybook expected a function/object but received ${typeof storyFn} instead.`
|
||||
);
|
||||
}
|
||||
|
||||
const { decorators, loaders, component, args, argTypes, ...storyParameters } = parameters;
|
||||
|
||||
const storyId = parameters.__id || toId(kind, storyName);
|
||||
|
||||
const csfExports = this._addedExports[fileName];
|
||||
// Whack a _ on the front incase it is "default"
|
||||
csfExports[`story${counter}`] = {
|
||||
name: storyName,
|
||||
parameters: { fileName, __id: storyId, ...storyParameters },
|
||||
decorators,
|
||||
loaders,
|
||||
args,
|
||||
argTypes,
|
||||
component,
|
||||
render: storyFn,
|
||||
};
|
||||
counter += 1;
|
||||
|
||||
return api;
|
||||
};
|
||||
|
||||
api.addDecorator = (decorator: DecoratorFunction<TRenderer>) => {
|
||||
if (hasAdded)
|
||||
throw new Error(`You cannot add a decorator after the first story for a kind.
|
||||
Read more here: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md#can-no-longer-add-decoratorsparameters-after-stories`);
|
||||
|
||||
meta.decorators?.push(decorator);
|
||||
return api;
|
||||
};
|
||||
|
||||
api.addLoader = (loader: LoaderFunction<TRenderer>) => {
|
||||
if (hasAdded) throw new Error(`You cannot add a loader after the first story for a kind.`);
|
||||
|
||||
meta.loaders?.push(loader);
|
||||
return api;
|
||||
};
|
||||
|
||||
api.addParameters = ({ component, args, argTypes, tags, ...parameters }: Parameters) => {
|
||||
if (hasAdded)
|
||||
throw new Error(`You cannot add parameters after the first story for a kind.
|
||||
Read more here: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md#can-no-longer-add-decoratorsparameters-after-stories`);
|
||||
|
||||
meta.parameters = combineParameters(meta.parameters, parameters);
|
||||
if (component) meta.component = component;
|
||||
if (args) meta.args = { ...meta.args, ...args };
|
||||
if (argTypes) meta.argTypes = { ...meta.argTypes, ...argTypes };
|
||||
if (tags) meta.tags = tags;
|
||||
return api;
|
||||
};
|
||||
|
||||
return api;
|
||||
};
|
||||
|
||||
// @deprecated
|
||||
raw = () => {
|
||||
return this.storyStore?.raw();
|
||||
};
|
||||
|
||||
// @deprecated
|
||||
get _storyStore() {
|
||||
return this.storyStore;
|
||||
}
|
||||
}
|
||||
@ -1,256 +0,0 @@
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
import { global } from '@storybook/global';
|
||||
import { dedent } from 'ts-dedent';
|
||||
import { SynchronousPromise } from 'synchronous-promise';
|
||||
import { toId, isExportStory, storyNameFromExport } from '@storybook/csf';
|
||||
import type {
|
||||
IndexEntry,
|
||||
Renderer,
|
||||
ComponentId,
|
||||
DocsOptions,
|
||||
Parameters,
|
||||
Path,
|
||||
ModuleExports,
|
||||
NormalizedProjectAnnotations,
|
||||
NormalizedStoriesSpecifier,
|
||||
PreparedStory,
|
||||
StoryIndex,
|
||||
StoryId,
|
||||
} from '@storybook/types';
|
||||
import { logger } from '@storybook/client-logger';
|
||||
import type { StoryStore } from '../../store';
|
||||
import { userOrAutoTitle, sortStoriesV6 } from '../../store';
|
||||
|
||||
export const AUTODOCS_TAG = 'autodocs';
|
||||
export const STORIES_MDX_TAG = 'stories-mdx';
|
||||
|
||||
export class StoryStoreFacade<TRenderer extends Renderer> {
|
||||
projectAnnotations: NormalizedProjectAnnotations<TRenderer>;
|
||||
|
||||
entries: Record<StoryId, IndexEntry & { componentId?: ComponentId }>;
|
||||
|
||||
csfExports: Record<Path, ModuleExports>;
|
||||
|
||||
constructor() {
|
||||
this.projectAnnotations = {
|
||||
loaders: [],
|
||||
decorators: [],
|
||||
parameters: {},
|
||||
argsEnhancers: [],
|
||||
argTypesEnhancers: [],
|
||||
args: {},
|
||||
argTypes: {},
|
||||
};
|
||||
|
||||
this.entries = {};
|
||||
|
||||
this.csfExports = {};
|
||||
}
|
||||
|
||||
// This doesn't actually import anything because the client-api loads fully
|
||||
// on startup, but this is a shim after all.
|
||||
importFn(path: Path) {
|
||||
return SynchronousPromise.resolve().then(() => {
|
||||
const moduleExports = this.csfExports[path];
|
||||
if (!moduleExports) throw new Error(`Unknown path: ${path}`);
|
||||
return moduleExports;
|
||||
});
|
||||
}
|
||||
|
||||
getStoryIndex(store: StoryStore<TRenderer>) {
|
||||
const fileNameOrder = Object.keys(this.csfExports);
|
||||
const storySortParameter = this.projectAnnotations.parameters?.options?.storySort;
|
||||
|
||||
const storyEntries = Object.entries(this.entries);
|
||||
// Add the kind parameters and global parameters to each entry
|
||||
const sortableV6 = storyEntries.map(([storyId, { type, importPath, ...entry }]) => {
|
||||
const exports = this.csfExports[importPath];
|
||||
const csfFile = store.processCSFFileWithCache<TRenderer>(
|
||||
exports,
|
||||
importPath,
|
||||
exports.default.title
|
||||
);
|
||||
|
||||
let storyLike: PreparedStory<TRenderer>;
|
||||
if (type === 'story') {
|
||||
storyLike = store.storyFromCSFFile({ storyId, csfFile });
|
||||
} else {
|
||||
storyLike = {
|
||||
...entry,
|
||||
story: entry.name,
|
||||
kind: entry.title,
|
||||
componentId: toId(entry.componentId || entry.title),
|
||||
parameters: { fileName: importPath },
|
||||
} as any;
|
||||
}
|
||||
return [
|
||||
storyId,
|
||||
storyLike,
|
||||
csfFile.meta.parameters,
|
||||
this.projectAnnotations.parameters || {},
|
||||
] as [StoryId, PreparedStory<TRenderer>, Parameters, Parameters];
|
||||
});
|
||||
|
||||
// NOTE: the sortStoriesV6 version returns the v7 data format. confusing but more convenient!
|
||||
let sortedV7: IndexEntry[];
|
||||
|
||||
try {
|
||||
sortedV7 = sortStoriesV6(sortableV6, storySortParameter, fileNameOrder);
|
||||
} catch (err: any) {
|
||||
if (typeof storySortParameter === 'function') {
|
||||
throw new Error(dedent`
|
||||
Error sorting stories with sort parameter ${storySortParameter}:
|
||||
|
||||
> ${err.message}
|
||||
|
||||
Are you using a V7-style sort function in V6 compatibility mode?
|
||||
|
||||
More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#v7-style-story-sort
|
||||
`);
|
||||
}
|
||||
throw err;
|
||||
}
|
||||
const entries = sortedV7.reduce((acc, s) => {
|
||||
// We use the original entry we stored in `this.stories` because it is possible that the CSF file itself
|
||||
// exports a `parameters.fileName` which can be different and mess up our `importFn`.
|
||||
// NOTE: this doesn't actually change the story object, just the index.
|
||||
acc[s.id] = this.entries[s.id];
|
||||
return acc;
|
||||
}, {} as StoryIndex['entries']);
|
||||
|
||||
return { v: 4, entries };
|
||||
}
|
||||
|
||||
clearFilenameExports(fileName: Path) {
|
||||
if (!this.csfExports[fileName]) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Clear this module's stories from the storyList and existing exports
|
||||
Object.entries(this.entries).forEach(([id, { importPath }]) => {
|
||||
if (importPath === fileName) {
|
||||
delete this.entries[id];
|
||||
}
|
||||
});
|
||||
|
||||
// We keep this as an empty record so we can use it to maintain component order
|
||||
this.csfExports[fileName] = {};
|
||||
}
|
||||
|
||||
// NOTE: we could potentially share some of this code with the stories.json generation
|
||||
addStoriesFromExports(fileName: Path, fileExports: ModuleExports) {
|
||||
if (fileName.match(/\.mdx$/) && !fileName.match(/\.stories\.mdx$/)) {
|
||||
if (global.FEATURES?.storyStoreV7MdxErrors !== false) {
|
||||
throw new Error(dedent`
|
||||
Cannot index \`.mdx\` file (\`${fileName}\`) in \`storyStoreV7: false\` mode.
|
||||
|
||||
The legacy story store does not support new-style \`.mdx\` files. If the file above
|
||||
is not intended to be indexed (i.e. displayed as an entry in the sidebar), either
|
||||
exclude it from your \`stories\` glob, or add <Meta isTemplate /> to it.
|
||||
|
||||
If you wanted to index the file, you'll need to name it \`stories.mdx\` and stick to the
|
||||
legacy (6.x) MDX API, or use the new store.`);
|
||||
}
|
||||
}
|
||||
|
||||
// if the export haven't changed since last time we added them, this is a no-op
|
||||
if (this.csfExports[fileName] === fileExports) {
|
||||
return;
|
||||
}
|
||||
// OTOH, if they have changed, let's clear them out first
|
||||
this.clearFilenameExports(fileName);
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/naming-convention
|
||||
const { default: defaultExport, __namedExportsOrder, ...namedExports } = fileExports;
|
||||
// eslint-disable-next-line prefer-const
|
||||
let { id: componentId, title, tags: componentTags = [] } = defaultExport || {};
|
||||
|
||||
const specifiers = (global.STORIES || []).map(
|
||||
(specifier: NormalizedStoriesSpecifier & { importPathMatcher: string }) => ({
|
||||
...specifier,
|
||||
importPathMatcher: new RegExp(specifier.importPathMatcher),
|
||||
})
|
||||
);
|
||||
|
||||
title = userOrAutoTitle(fileName, specifiers, title);
|
||||
|
||||
if (!title) {
|
||||
logger.info(
|
||||
`Unexpected default export without title in '${fileName}': ${JSON.stringify(
|
||||
fileExports.default
|
||||
)}`
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
this.csfExports[fileName] = {
|
||||
...fileExports,
|
||||
default: { ...defaultExport, title },
|
||||
};
|
||||
|
||||
let sortedExports = namedExports;
|
||||
|
||||
// prefer a user/loader provided `__namedExportsOrder` array if supplied
|
||||
// we do this as es module exports are always ordered alphabetically
|
||||
// see https://github.com/storybookjs/storybook/issues/9136
|
||||
if (Array.isArray(__namedExportsOrder)) {
|
||||
sortedExports = {};
|
||||
__namedExportsOrder.forEach((name) => {
|
||||
const namedExport = namedExports[name];
|
||||
if (namedExport) sortedExports[name] = namedExport;
|
||||
});
|
||||
}
|
||||
|
||||
const storyExports = Object.entries(sortedExports).filter(([key]) =>
|
||||
isExportStory(key, defaultExport)
|
||||
);
|
||||
|
||||
// NOTE: this logic is equivalent to the `extractStories` function of `StoryIndexGenerator`
|
||||
const docsOptions = (global.DOCS_OPTIONS || {}) as DocsOptions;
|
||||
const { autodocs } = docsOptions;
|
||||
const componentAutodocs = componentTags.includes(AUTODOCS_TAG);
|
||||
const autodocsOptedIn = autodocs === true || (autodocs === 'tag' && componentAutodocs);
|
||||
if (storyExports.length) {
|
||||
if (componentTags.includes(STORIES_MDX_TAG) || autodocsOptedIn) {
|
||||
const name = docsOptions.defaultName;
|
||||
const docsId = toId(componentId || title, name);
|
||||
this.entries[docsId] = {
|
||||
type: 'docs',
|
||||
id: docsId,
|
||||
title,
|
||||
name,
|
||||
importPath: fileName,
|
||||
...(componentId && { componentId }),
|
||||
tags: [
|
||||
...componentTags,
|
||||
'docs',
|
||||
...(autodocsOptedIn && !componentAutodocs ? [AUTODOCS_TAG] : []),
|
||||
],
|
||||
storiesImports: [],
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
storyExports.forEach(([key, storyExport]: [string, any]) => {
|
||||
const exportName = storyNameFromExport(key);
|
||||
const id = storyExport.parameters?.__id || toId(componentId || title, exportName);
|
||||
const name =
|
||||
(typeof storyExport !== 'function' && storyExport.name) ||
|
||||
storyExport.storyName ||
|
||||
storyExport.story?.name ||
|
||||
exportName;
|
||||
|
||||
if (!storyExport.parameters?.docsOnly) {
|
||||
this.entries[id] = {
|
||||
type: 'story',
|
||||
id,
|
||||
name,
|
||||
title,
|
||||
importPath: fileName,
|
||||
...(componentId && { componentId }),
|
||||
tags: [...(storyExport.tags || componentTags), 'story'],
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
export {
|
||||
addArgs,
|
||||
addArgsEnhancer,
|
||||
addArgTypes,
|
||||
addArgTypesEnhancer,
|
||||
addDecorator,
|
||||
addLoader,
|
||||
addParameters,
|
||||
addStepRunner,
|
||||
ClientApi,
|
||||
setGlobalRender,
|
||||
} from './ClientApi';
|
||||
|
||||
export * from '../../store';
|
||||
|
||||
export * from './queryparams';
|
||||
@ -1,17 +0,0 @@
|
||||
import { global } from '@storybook/global';
|
||||
import { parse } from 'qs';
|
||||
|
||||
export const getQueryParams = () => {
|
||||
const { document } = global;
|
||||
// document.location is not defined in react-native
|
||||
if (document && document.location && document.location.search) {
|
||||
return parse(document.location.search, { ignoreQueryPrefix: true });
|
||||
}
|
||||
return {};
|
||||
};
|
||||
|
||||
export const getQueryParam = (key: string) => {
|
||||
const params = getQueryParams();
|
||||
|
||||
return params[key];
|
||||
};
|
||||
@ -1,110 +0,0 @@
|
||||
/// <reference types="node" />
|
||||
/// <reference types="webpack-env" />
|
||||
|
||||
import { logger } from '@storybook/client-logger';
|
||||
import type { Path, ModuleExports } from '@storybook/types';
|
||||
|
||||
export interface RequireContext {
|
||||
keys: () => string[];
|
||||
(id: string): any;
|
||||
resolve(id: string): string;
|
||||
}
|
||||
|
||||
export type LoaderFunction = () => void | any[];
|
||||
|
||||
export type Loadable = RequireContext | RequireContext[] | LoaderFunction;
|
||||
|
||||
/**
|
||||
* Executes a Loadable (function that returns exports or require context(s))
|
||||
* and returns a map of filename => module exports
|
||||
*
|
||||
* @param loadable Loadable
|
||||
* @returns Map<Path, ModuleExports>
|
||||
*/
|
||||
export function executeLoadable(loadable: Loadable) {
|
||||
let reqs = null;
|
||||
// todo discuss / improve type check
|
||||
if (Array.isArray(loadable)) {
|
||||
reqs = loadable;
|
||||
} else if ((loadable as RequireContext).keys) {
|
||||
reqs = [loadable as RequireContext];
|
||||
}
|
||||
|
||||
let exportsMap = new Map<Path, ModuleExports>();
|
||||
if (reqs) {
|
||||
reqs.forEach((req) => {
|
||||
req.keys().forEach((filename: string) => {
|
||||
try {
|
||||
const fileExports = req(filename) as ModuleExports;
|
||||
exportsMap.set(
|
||||
typeof req.resolve === 'function' ? req.resolve(filename) : filename,
|
||||
fileExports
|
||||
);
|
||||
} catch (error: any) {
|
||||
const errorString =
|
||||
error.message && error.stack ? `${error.message}\n ${error.stack}` : error.toString();
|
||||
logger.error(`Unexpected error while loading ${filename}: ${errorString}`);
|
||||
}
|
||||
});
|
||||
});
|
||||
} else {
|
||||
const exported = (loadable as LoaderFunction)();
|
||||
if (Array.isArray(exported) && exported.every((obj) => obj.default != null)) {
|
||||
exportsMap = new Map(
|
||||
exported.map((fileExports, index) => [`exports-map-${index}`, fileExports])
|
||||
);
|
||||
} else if (exported) {
|
||||
logger.warn(
|
||||
`Loader function passed to 'configure' should return void or an array of module exports that all contain a 'default' export. Received: ${JSON.stringify(
|
||||
exported
|
||||
)}`
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return exportsMap;
|
||||
}
|
||||
|
||||
/**
|
||||
* Executes a Loadable (function that returns exports or require context(s))
|
||||
* and compares it's output to the last time it was run (as stored on a node module)
|
||||
*
|
||||
* @param loadable Loadable
|
||||
* @param m NodeModule
|
||||
* @returns { added: Map<Path, ModuleExports>, removed: Map<Path, ModuleExports> }
|
||||
*/
|
||||
export function executeLoadableForChanges(loadable: Loadable, m?: NodeModule) {
|
||||
let lastExportsMap: ReturnType<typeof executeLoadable> =
|
||||
m?.hot?.data?.lastExportsMap || new Map();
|
||||
if (m?.hot?.dispose) {
|
||||
m.hot.accept();
|
||||
m.hot.dispose((data) => {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
data.lastExportsMap = lastExportsMap;
|
||||
});
|
||||
}
|
||||
|
||||
const exportsMap = executeLoadable(loadable);
|
||||
const added = new Map<Path, ModuleExports>();
|
||||
Array.from(exportsMap.entries())
|
||||
// Ignore files that do not have a default export
|
||||
.filter(([, fileExports]) => !!fileExports.default)
|
||||
// Ignore exports that are equal (by reference) to last time, this means the file hasn't changed
|
||||
.filter(([fileName, fileExports]) => lastExportsMap.get(fileName) !== fileExports)
|
||||
.forEach(([fileName, fileExports]) => added.set(fileName, fileExports));
|
||||
|
||||
const removed = new Map<Path, ModuleExports>();
|
||||
Array.from(lastExportsMap.keys())
|
||||
.filter((fileName) => !exportsMap.has(fileName))
|
||||
.forEach((fileName) => {
|
||||
const value = lastExportsMap.get(fileName);
|
||||
if (value) {
|
||||
removed.set(fileName, value);
|
||||
}
|
||||
});
|
||||
|
||||
// Save the value for the dispose() call above
|
||||
lastExportsMap = exportsMap;
|
||||
|
||||
return { added, removed };
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
import { ClientApi } from '../../client-api';
|
||||
import { StoryStore } from '../../store';
|
||||
import { start } from './start';
|
||||
|
||||
export { start, ClientApi, StoryStore };
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,176 +0,0 @@
|
||||
/* eslint-disable no-underscore-dangle, @typescript-eslint/naming-convention */
|
||||
import { global } from '@storybook/global';
|
||||
import type { Renderer, ArgsStoryFn, Path, ProjectAnnotations } from '@storybook/types';
|
||||
import { createBrowserChannel } from '@storybook/channels';
|
||||
import { FORCE_RE_RENDER } from '@storybook/core-events';
|
||||
import { addons } from '../../addons';
|
||||
import { PreviewWeb } from '../../preview-web';
|
||||
import { ClientApi } from '../../client-api';
|
||||
|
||||
import { executeLoadableForChanges } from './executeLoadable';
|
||||
import type { Loadable } from './executeLoadable';
|
||||
|
||||
const { FEATURES } = global;
|
||||
|
||||
const removedApi = (name: string) => () => {
|
||||
throw new Error(`@storybook/client-api:${name} was removed in storyStoreV7.`);
|
||||
};
|
||||
|
||||
interface CoreClient_RendererImplementation<TRenderer extends Renderer> {
|
||||
/**
|
||||
* A function that applies decorators to a story.
|
||||
* @template TRenderer The type of renderer used by the Storybook client API.
|
||||
* @type {ProjectAnnotations<TRenderer>['applyDecorators']}
|
||||
*/
|
||||
decorateStory?: ProjectAnnotations<TRenderer>['applyDecorators'];
|
||||
/**
|
||||
* A function that renders a story with args.
|
||||
* @template TRenderer The type of renderer used by the Storybook client API.
|
||||
* @type {ArgsStoryFn<TRenderer>}
|
||||
*/
|
||||
render?: ArgsStoryFn<TRenderer>;
|
||||
}
|
||||
|
||||
interface CoreClient_ClientAPIFacade {
|
||||
/**
|
||||
* The old way of adding stories at runtime.
|
||||
* @deprecated This method is deprecated and will be removed in a future version.
|
||||
*/
|
||||
storiesOf: (...args: any[]) => never;
|
||||
/**
|
||||
* The old way of retrieving the list of stories at runtime.
|
||||
* @deprecated This method is deprecated and will be removed in a future version.
|
||||
*/
|
||||
raw: (...args: any[]) => never;
|
||||
}
|
||||
|
||||
interface CoreClient_StartReturnValue<TRenderer extends Renderer> {
|
||||
/**
|
||||
* Forces a re-render of all stories in the Storybook preview.
|
||||
* This function emits the `FORCE_RE_RENDER` event to the Storybook channel.
|
||||
* @deprecated This method is deprecated and will be removed in a future version.
|
||||
* @returns {void}
|
||||
*/
|
||||
forceReRender: () => void;
|
||||
/**
|
||||
* The old way of setting up storybook with runtime configuration.
|
||||
* @deprecated This method is deprecated and will be removed in a future version.
|
||||
* @returns {void}
|
||||
*/
|
||||
configure: any;
|
||||
/**
|
||||
* @deprecated This property is deprecated and will be removed in a future version.
|
||||
* @type {ClientApi<TRenderer> | CoreClient_ClientAPIFacade}
|
||||
*/
|
||||
clientApi: ClientApi<TRenderer> | CoreClient_ClientAPIFacade;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes the Storybook preview API.
|
||||
* @template TRenderer The type of renderer used by the Storybook client API.
|
||||
* @param {ProjectAnnotations<TRenderer>['renderToCanvas']} renderToCanvas A function that renders a story to a canvas.
|
||||
* @param {CoreClient_RendererImplementation<TRenderer>} [options] Optional configuration options for the renderer implementation.
|
||||
* @param {ProjectAnnotations<TRenderer>['applyDecorators']} [options.decorateStory] A function that applies decorators to a story.
|
||||
* @param {ArgsStoryFn<TRenderer>} [options.render] A function that renders a story with arguments.
|
||||
* @returns {CoreClient_StartReturnValue<TRenderer>} An object containing functions and objects related to the Storybook preview API.
|
||||
*/
|
||||
export function start<TRenderer extends Renderer>(
|
||||
renderToCanvas: ProjectAnnotations<TRenderer>['renderToCanvas'],
|
||||
{ decorateStory, render }: CoreClient_RendererImplementation<TRenderer> = {}
|
||||
): CoreClient_StartReturnValue<TRenderer> {
|
||||
if (global) {
|
||||
// To enable user code to detect if it is running in Storybook
|
||||
global.IS_STORYBOOK = true;
|
||||
}
|
||||
|
||||
if (FEATURES?.storyStoreV7) {
|
||||
return {
|
||||
forceReRender: removedApi('forceReRender'),
|
||||
configure: removedApi('configure'),
|
||||
clientApi: {
|
||||
storiesOf: removedApi('clientApi.storiesOf'),
|
||||
raw: removedApi('raw'),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const channel = createBrowserChannel({ page: 'preview' });
|
||||
addons.setChannel(channel);
|
||||
|
||||
const clientApi = global?.__STORYBOOK_CLIENT_API__ || new ClientApi<TRenderer>();
|
||||
const preview = global?.__STORYBOOK_PREVIEW__ || new PreviewWeb<TRenderer>();
|
||||
let initialized = false;
|
||||
|
||||
const importFn = (path: Path) => clientApi.importFn(path);
|
||||
function onStoriesChanged() {
|
||||
const storyIndex = clientApi.getStoryIndex();
|
||||
preview.onStoriesChanged({ storyIndex, importFn });
|
||||
}
|
||||
|
||||
// These two bits are a bit ugly, but due to dependencies, `ClientApi` cannot have
|
||||
// direct reference to `PreviewWeb`, so we need to patch in bits
|
||||
clientApi.onImportFnChanged = onStoriesChanged;
|
||||
clientApi.storyStore = preview.storyStore;
|
||||
|
||||
if (global) {
|
||||
global.__STORYBOOK_CLIENT_API__ = clientApi;
|
||||
global.__STORYBOOK_ADDONS_CHANNEL__ = channel;
|
||||
global.__STORYBOOK_PREVIEW__ = preview;
|
||||
global.__STORYBOOK_STORY_STORE__ = preview.storyStore;
|
||||
}
|
||||
|
||||
return {
|
||||
forceReRender: () => channel.emit(FORCE_RE_RENDER),
|
||||
|
||||
clientApi,
|
||||
// This gets called each time the user calls configure (i.e. once per HMR)
|
||||
// The first time, it constructs the preview, subsequently it updates it
|
||||
configure(
|
||||
renderer: string,
|
||||
loadable: Loadable,
|
||||
m?: NodeModule,
|
||||
disableBackwardCompatibility = true
|
||||
) {
|
||||
if (disableBackwardCompatibility) {
|
||||
throw new Error('unexpected configure() call');
|
||||
}
|
||||
|
||||
clientApi.addParameters({ renderer });
|
||||
|
||||
// We need to run the `executeLoadableForChanges` function *inside* the `getProjectAnnotations
|
||||
// function in case it throws. So we also need to process its output there also
|
||||
const getProjectAnnotations = () => {
|
||||
const { added, removed } = executeLoadableForChanges(loadable, m);
|
||||
clientApi._loadAddedExports();
|
||||
|
||||
Array.from(added.entries()).forEach(([fileName, fileExports]) =>
|
||||
clientApi.facade.addStoriesFromExports(fileName, fileExports)
|
||||
);
|
||||
|
||||
Array.from(removed.entries()).forEach(([fileName]) =>
|
||||
clientApi.facade.clearFilenameExports(fileName)
|
||||
);
|
||||
|
||||
return {
|
||||
render,
|
||||
...clientApi.facade.projectAnnotations,
|
||||
renderToCanvas,
|
||||
applyDecorators: decorateStory,
|
||||
};
|
||||
};
|
||||
|
||||
if (!initialized) {
|
||||
preview.initialize({
|
||||
getStoryIndex: () => clientApi.getStoryIndex(),
|
||||
importFn,
|
||||
getProjectAnnotations,
|
||||
});
|
||||
initialized = true;
|
||||
} else {
|
||||
// TODO -- why don't we care about the new annotations?
|
||||
getProjectAnnotations();
|
||||
onStoriesChanged();
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -61,7 +61,7 @@ export class Preview<TRenderer extends Renderer> {
|
||||
previewEntryError?: Error;
|
||||
|
||||
constructor(protected channel: Channel = addons.getChannel()) {
|
||||
if (global.FEATURES?.storyStoreV7 && addons.hasServerChannel()) {
|
||||
if (addons.hasServerChannel()) {
|
||||
this.serverChannel = addons.getServerChannel();
|
||||
}
|
||||
this.storyStore = new StoryStore();
|
||||
@ -142,15 +142,7 @@ export class Preview<TRenderer extends Renderer> {
|
||||
|
||||
this.setInitialGlobals();
|
||||
|
||||
let storyIndexPromise: Promise<StoryIndex>;
|
||||
if (global.FEATURES?.storyStoreV7) {
|
||||
storyIndexPromise = this.getStoryIndexFromServer();
|
||||
} else {
|
||||
if (!this.getStoryIndex) {
|
||||
throw new Error('No `getStoryIndex` passed defined in v6 mode');
|
||||
}
|
||||
storyIndexPromise = SynchronousPromise.resolve().then(this.getStoryIndex);
|
||||
}
|
||||
const storyIndexPromise = this.getStoryIndexFromServer();
|
||||
|
||||
return storyIndexPromise
|
||||
.then((storyIndex: StoryIndex) => this.initializeWithStoryIndex(storyIndex))
|
||||
@ -192,7 +184,7 @@ export class Preview<TRenderer extends Renderer> {
|
||||
return this.storyStore.initialize({
|
||||
storyIndex,
|
||||
importFn: this.importFn,
|
||||
cache: !global.FEATURES?.storyStoreV7,
|
||||
cache: false, // FIXME -- drop this option
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -44,9 +44,7 @@ jest.mock('@storybook/global', () => ({
|
||||
search: '?id=*',
|
||||
},
|
||||
},
|
||||
FEATURES: {
|
||||
storyStoreV7: true,
|
||||
},
|
||||
|
||||
fetch: async () => ({ status: 200, json: async () => mockStoryIndex }),
|
||||
},
|
||||
}));
|
||||
|
||||
@ -69,10 +69,6 @@ jest.mock('@storybook/global', () => ({
|
||||
search: '?id=*',
|
||||
},
|
||||
},
|
||||
FEATURES: {
|
||||
storyStoreV7: true,
|
||||
// xxx
|
||||
},
|
||||
fetch: async () => mockFetchResult,
|
||||
},
|
||||
}));
|
||||
|
||||
@ -117,10 +117,6 @@ export class PreviewWithSelection<TFramework extends Renderer> extends Preview<T
|
||||
// If initialization gets as far as the story index, this function runs.
|
||||
initializeWithStoryIndex(storyIndex: StoryIndex): PromiseLike<void> {
|
||||
return super.initializeWithStoryIndex(storyIndex).then(() => {
|
||||
if (!global.FEATURES?.storyStoreV7) {
|
||||
this.channel.emit(SET_INDEX, this.storyStore.getSetIndexPayload());
|
||||
}
|
||||
|
||||
return this.selectSpecifiedStory();
|
||||
});
|
||||
}
|
||||
@ -204,10 +200,6 @@ export class PreviewWithSelection<TFramework extends Renderer> extends Preview<T
|
||||
}) {
|
||||
await super.onStoriesChanged({ importFn, storyIndex });
|
||||
|
||||
if (!global.FEATURES?.storyStoreV7) {
|
||||
this.channel.emit(SET_INDEX, await this.storyStore.getSetIndexPayload());
|
||||
}
|
||||
|
||||
if (this.selectionStore.selection) {
|
||||
await this.renderSelection();
|
||||
} else {
|
||||
@ -396,15 +388,13 @@ export class PreviewWithSelection<TFramework extends Renderer> extends Preview<T
|
||||
render.story
|
||||
);
|
||||
|
||||
if (global.FEATURES?.storyStoreV7) {
|
||||
this.channel.emit(STORY_PREPARED, {
|
||||
id: storyId,
|
||||
parameters,
|
||||
initialArgs,
|
||||
argTypes,
|
||||
args: unmappedArgs,
|
||||
});
|
||||
}
|
||||
this.channel.emit(STORY_PREPARED, {
|
||||
id: storyId,
|
||||
parameters,
|
||||
initialArgs,
|
||||
argTypes,
|
||||
args: unmappedArgs,
|
||||
});
|
||||
|
||||
// For v6 mode / compatibility
|
||||
// If the implementation changed, or args were persisted, the args may have changed,
|
||||
@ -412,7 +402,7 @@ export class PreviewWithSelection<TFramework extends Renderer> extends Preview<T
|
||||
if (implementationChanged || persistedArgs) {
|
||||
this.channel.emit(STORY_ARGS_UPDATED, { storyId, args: unmappedArgs });
|
||||
}
|
||||
} else if (global.FEATURES?.storyStoreV7) {
|
||||
} else {
|
||||
if (!this.storyStore.projectAnnotations) throw new Error('Store not initialized');
|
||||
|
||||
// Default to the project parameters for MDX docs
|
||||
@ -467,9 +457,7 @@ export class PreviewWithSelection<TFramework extends Renderer> extends Preview<T
|
||||
Do you have an error in your \`preview.js\`? Check your Storybook's browser console for errors.`);
|
||||
}
|
||||
|
||||
if (global.FEATURES?.storyStoreV7) {
|
||||
await this.storyStore.cacheAllCSFFiles();
|
||||
}
|
||||
await this.storyStore.cacheAllCSFFiles();
|
||||
|
||||
return this.storyStore.extract(options);
|
||||
}
|
||||
|
||||
@ -10,34 +10,14 @@ The preview's job is:
|
||||
|
||||
3. Render the current selection to the web view in either story or docs mode.
|
||||
|
||||
## V7 Store vs Legacy (V6)
|
||||
|
||||
The story store is designed to load stories 'on demand', and will operate in this fashion if the `storyStoreV7` feature is enabled.
|
||||
|
||||
However, for back-compat reasons, in v6 mode, we need to load all stories, synchronously on bootup, emitting the `SET_STORIES` event.
|
||||
|
||||
In V7 mode we do not emit that event, instead preferring the `STORY_PREPARED` event, with the data for the single story being rendered.
|
||||
|
||||
## Initialization
|
||||
|
||||
The preview is `initialized` in two ways.
|
||||
|
||||
### V7 Mode:
|
||||
|
||||
- `importFn` - is an async `import()` function
|
||||
|
||||
- `getProjectAnnotations` - is a simple function that evaluations `preview.js` and addon config files and combines them. If it errors, the Preview will show the error.
|
||||
|
||||
- No `getStoryIndex` function is passed, instead the preview creates a `StoryIndexClient` that pulls `stories.json` from node and watches the event stream for invalidation events.
|
||||
|
||||
### V6 Mode
|
||||
|
||||
- `importFn` - is a simulated `import()` function, that is synchronous, see `client-api` for details.
|
||||
- `getProjectAnnotations` - also evaluates `preview.js` et al, but watches for calls to `setStories`, and passes them to the `ClientApi`
|
||||
- `getStoryIndex` is a local function (that must be called _after_ `getProjectAnnotations`) that gets the list of stories added.
|
||||
|
||||
See `client-api` for more details on this process.
|
||||
|
||||
## Story Rendering and interruptions
|
||||
|
||||
The Preview is split into three parts responsible for state management:
|
||||
|
||||
@ -274,16 +274,6 @@ export interface StorybookConfig {
|
||||
staticDirs?: (DirectoryMapping | string)[];
|
||||
logLevel?: string;
|
||||
features?: {
|
||||
/**
|
||||
* Build stories.json automatically on start/build
|
||||
*/
|
||||
buildStoriesJson?: boolean;
|
||||
|
||||
/**
|
||||
* Activate on demand story store
|
||||
*/
|
||||
storyStoreV7?: boolean;
|
||||
|
||||
/**
|
||||
* Do not throw errors if using `.mdx` files in SSv7
|
||||
* (for internal use in sandboxes)
|
||||
|
||||
@ -160,7 +160,7 @@ const Canvas: FC<{ withLoader: boolean; baseUrl: string; children?: never }> = (
|
||||
|
||||
const [progress, setProgress] = useState(undefined);
|
||||
useEffect(() => {
|
||||
if (FEATURES?.storyStoreV7 && global.CONFIG_TYPE === 'DEVELOPMENT') {
|
||||
if (global.CONFIG_TYPE === 'DEVELOPMENT') {
|
||||
try {
|
||||
const channel = addons.getServerChannel();
|
||||
|
||||
|
||||
@ -34,7 +34,7 @@ class ReactProvider extends Provider {
|
||||
this.channel = channel;
|
||||
global.__STORYBOOK_ADDONS_CHANNEL__ = channel;
|
||||
|
||||
if (FEATURES?.storyStoreV7 && CONFIG_TYPE === 'DEVELOPMENT') {
|
||||
if (CONFIG_TYPE === 'DEVELOPMENT') {
|
||||
this.serverChannel = this.channel;
|
||||
addons.setServerChannel(this.serverChannel);
|
||||
}
|
||||
|
||||
@ -9,34 +9,13 @@ Type:
|
||||
```ts
|
||||
{
|
||||
argTypeTargetsV7?: boolean;
|
||||
buildStoriesJson?: boolean;
|
||||
legacyDecoratorFileOrder?: boolean;
|
||||
legacyMdx1?: boolean;
|
||||
storyStoreV7?: boolean;
|
||||
}
|
||||
```
|
||||
|
||||
Enables Storybook's additional features.
|
||||
|
||||
## `buildStoriesJson`
|
||||
|
||||
Type: `boolean`
|
||||
|
||||
Default: `true`, when [`storyStoreV7`](#storystorev7) is `true`
|
||||
|
||||
Generates a `index.json` and `stories.json` files to help story loading with the on-demand mode.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/main-config-features-build-stories-json.js.mdx',
|
||||
'common/main-config-features-build-stories-json.ts.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
## `legacyDecoratorFileOrder`
|
||||
|
||||
Type: `boolean`
|
||||
@ -71,25 +50,6 @@ Enables support for MDX version 1 as a fallback. Requires [@storybook/mdx1-csf](
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
## `storyStoreV7`
|
||||
|
||||
Type: `boolean`
|
||||
|
||||
Default: `true`
|
||||
|
||||
Opts out of [on-demand story loading](#on-demand-story-loading); loads all stories at build time.
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/main-config-features-story-store-v7.js.mdx',
|
||||
'common/main-config-features-story-store-v7.ts.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
## `argTypeTargetsV7`
|
||||
|
||||
(⚠️ **Experimental**)
|
||||
@ -107,26 +67,4 @@ Filter args with a "target" on the type from the render function.
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
## On-demand story loading
|
||||
|
||||
As your Storybook grows, it gets challenging to load all of your stories performantly, slowing down the loading times and yielding a large bundle. Out of the box, Storybook loads your stories on demand rather than during boot-up to improve the performance of your Storybook. If you need to load all of your stories during boot-up, you can disable this feature by setting the `storyStoreV7` feature flag to `false` in your configuration as follows:
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
<CodeSnippets
|
||||
paths={[
|
||||
'common/main-config-features-story-store-v7.js.mdx',
|
||||
'common/main-config-features-story-store-v7.ts.mdx',
|
||||
]}
|
||||
/>
|
||||
|
||||
<!-- prettier-ignore-end -->
|
||||
|
||||
### Known limitations
|
||||
|
||||
Because of the way stories are currently indexed in Storybook, loading stories on demand with `storyStoreV7` has a couple of minor limitations at the moment:
|
||||
|
||||
- [CSF formats](../api/csf.md) from version 1 to version 3 are supported. The `storiesOf` construct is not.
|
||||
- Custom [`storySort` functions](../writing-stories/naming-components-and-hierarchy.md#sorting-stories) receive more limited arguments.
|
||||
<!-- prettier-ignore-end -->
|
||||
@ -117,7 +117,7 @@ When [auto-titling](../configure/sidebar-and-urls.md#csf-30-auto-titles), prefix
|
||||
|
||||
<div class="aside">
|
||||
|
||||
💡 With [`storyStoreV7`](./main-config-features.md#storystorev7) (the default in Storybook 7), Storybook now statically analyzes the configuration file to improve performance. Loading stories with a custom implementation may de-optimize or break this ability.
|
||||
💡 Storybook now statically analyzes the configuration file to improve performance. Loading stories with a custom implementation may de-optimize or break this ability.
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
@ -10,7 +10,6 @@ By default, Storybook provides zero-config support for Webpack and automatically
|
||||
|
||||
| Option | Description |
|
||||
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `storyStoreV7` | Enabled by default.<br/> Configures Webpack's [code splitting](https://webpack.js.org/guides/code-splitting/) feature<br/> `features: { storyStoreV7: false }` |
|
||||
| `lazyCompilation` | Enables Webpack's experimental [`lazy compilation`](https://webpack.js.org/configuration/experiments/#experimentslazycompilation)<br/>`core: { builder: { options: { lazyCompilation: true } } }` |
|
||||
| `fsCache` | Configures Webpack's filesystem [caching](https://webpack.js.org/configuration/cache/#cachetype) feature<br/> `core: { builder: { options: { fsCache: true } } }` |
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user