@web/dev-server-storybook/dist/serve/storybookPlugin.js

Dev server plugin for using storybook with es modules.

// @ts-ignore
import { getRequestFilePath } from '@web/dev-server-core';
import { mdjsToCsf } from 'storybook-addon-markdown-docs';
import { createManagerHtml } from '../shared/html/createManagerHtml.js';
import { createPreviewHtml } from '../shared/html/createPreviewHtml.js';
import { readStorybookConfig } from '../shared/config/readStorybookConfig.js';
import { validatePluginConfig } from '../shared/config/validatePluginConfig.js';
import { findStories } from '../shared/stories/findStories.js';
import { transformMdxToCsf } from '../shared/mdx/transformMdxToCsf.js';
import { injectExportsOrder } from '../shared/stories/injectExportsOrder.js';
const regexpReplaceWebsocket = /<!-- injected by web-dev-server -->(.|\s)*<\/script>/m;
export function storybookPlugin(pluginConfig) {
    validatePluginConfig(pluginConfig);
    let serverConfig;
    let storyImports = [];
    let storyFilePaths = [];
    return {
        name: 'storybook',
        serverStart(args) {
            serverConfig = args.config;
        },
        resolveMimeType(context) {
            if (context.URL.searchParams.get('story') !== 'true') {
                return;
            }
            if (context.path.endsWith('.mdx') || context.path.endsWith('.md')) {
                return 'js';
            }
        },
        async transform(context) {
            if (typeof context.body !== 'string') {
                return;
            }
            if (context.path === '/') {
                // replace the injected websocket script to avoid reloading the manager in watch mode
                context.body = context.body.replace(regexpReplaceWebsocket, '');
                return;
            }
            if (context.URL.searchParams.get('story') !== 'true') {
                return;
            }
            const filePath = getRequestFilePath(context.url, serverConfig.rootDir);
            if (context.path.endsWith('.mdx')) {
                context.body = await transformMdxToCsf(context.body, filePath);
            }
            if (context.path.endsWith('.md')) {
                context.body = await mdjsToCsf(context.body, filePath, pluginConfig.type);
            }
            if (storyFilePaths.includes(filePath)) {
                // inject story order, note that MDX and MD and fall through to this as well
                context.body = await injectExportsOrder(context.body, filePath);
            }
        },
        async serve(context) {
            const storybookConfig = await readStorybookConfig(pluginConfig);
            if (context.path === '/') {
                return { type: 'html', body: createManagerHtml(storybookConfig, serverConfig.rootDir) };
            }
            if (context.path === '/iframe.html') {
                ({ storyImports, storyFilePaths } = await findStories(serverConfig.rootDir, storybookConfig.mainJsPath, storybookConfig.mainJs.stories));
                storyImports = storyImports.map(i => `${i}?story=true`);
                return {
                    type: 'html',
                    body: createPreviewHtml(pluginConfig, storybookConfig, serverConfig.rootDir, storyImports),
                };
            }
        },
    };
}
//# sourceMappingURL=storybookPlugin.js.map