@web/storybook-builder
Version:
Storybook builder powered by `@web/dev-server`
164 lines • 8.37 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.build = exports.start = exports.bail = void 0;
const plugin_node_resolve_1 = __importDefault(require("@rollup/plugin-node-resolve"));
const plugin_replace_1 = __importDefault(require("@rollup/plugin-replace"));
const core_common_1 = require("@storybook/core-common");
const node_logger_1 = require("@storybook/node-logger");
// Import both globals and globalsNameReferenceMap to prevent retrocompatibility.
// @ts-ignore
const globals_1 = require("@storybook/preview/globals");
const dev_server_1 = require("@web/dev-server");
const dev_server_rollup_1 = require("@web/dev-server-rollup");
const rollup_plugin_html_1 = require("@web/rollup-plugin-html");
const promises_1 = require("node:fs/promises");
const node_path_1 = require("node:path");
const rollup_1 = require("rollup");
const rollup_plugin_external_globals_1 = __importDefault(require("rollup-plugin-external-globals"));
const sirv_1 = __importDefault(require("sirv"));
const generate_iframe_html_js_1 = require("./generate-iframe-html.js");
const get_node_module_dir_js_1 = require("./get-node-module-dir.js");
const read_file_config_js_1 = require("./read-file-config.js");
const rollup_plugin_mdx_js_1 = require("./rollup-plugin-mdx.js");
const rollup_plugin_prebundle_modules_js_1 = require("./rollup-plugin-prebundle-modules.js");
const rollup_plugin_storybook_builder_js_1 = require("./rollup-plugin-storybook-builder.js");
const stringify_process_envs_js_1 = require("./stringify-process-envs.js");
const wdsPluginExternalGlobals = (0, dev_server_rollup_1.fromRollup)(rollup_plugin_external_globals_1.default);
const wdsPluginMdx = (0, dev_server_rollup_1.fromRollup)(rollup_plugin_mdx_js_1.rollupPluginMdx);
const wdsPluginPrebundleModules = (0, dev_server_rollup_1.fromRollup)(rollup_plugin_prebundle_modules_js_1.rollupPluginPrebundleModules);
const wdsPluginReplace = (0, dev_server_rollup_1.fromRollup)(plugin_replace_1.default);
const wdsPluginStorybookBuilder = (0, dev_server_rollup_1.fromRollup)(rollup_plugin_storybook_builder_js_1.rollupPluginStorybookBuilder);
let wdsServer;
const bail = async () => {
await (wdsServer === null || wdsServer === void 0 ? void 0 : wdsServer.stop());
};
exports.bail = bail;
const start = async ({ startTime, options, router, server }) => {
const previewDirOrigin = (0, node_path_1.join)((0, get_node_module_dir_js_1.getNodeModuleDir)('@storybook/core'), 'dist', 'preview');
router.use('/sb-preview', (0, sirv_1.default)(previewDirOrigin, {
maxAge: 300000,
dev: true,
immutable: true,
}));
router.use(`/${rollup_plugin_prebundle_modules_js_1.PREBUNDLED_MODULES_DIR}`, (0, sirv_1.default)((0, node_path_1.resolve)(`./${rollup_plugin_prebundle_modules_js_1.PREBUNDLED_MODULES_DIR}`), { dev: true }));
const env = await options.presets.apply('env');
const wdsStorybookConfig = {
nodeResolve: true,
plugins: [
{
name: 'storybook-iframe-html',
async serve(context) {
if (context.path === '/iframe.html') {
const iframeHtml = await (0, generate_iframe_html_js_1.generateIframeHtml)(options);
return { type: 'html', body: iframeHtml };
}
},
},
wdsPluginPrebundleModules(env, options),
wdsPluginStorybookBuilder(options),
wdsPluginMdx(options),
wdsPluginExternalGlobals(globals_1.globalsNameReferenceMap || globals_1.globals),
wdsPluginReplace(Object.assign(Object.assign({}, (0, stringify_process_envs_js_1.stringifyProcessEnvs)(env)), { include: ['**/node_modules/@storybook/**/*'], preventAssignment: true })),
],
};
const { wdsConfigPath } = await (0, core_common_1.getBuilderOptions)(options);
const wdsUserConfig = await (0, read_file_config_js_1.readFileConfig)(wdsConfigPath);
const wdsFinalConfig = await options.presets.apply('wdsFinal', (0, dev_server_1.mergeConfigs)(wdsUserConfig, wdsStorybookConfig, {
// reset local config "open" as it should not be used for storybook specific configuration
open: false,
}), options);
// if "wdsFinal" added "open" then rewrite it to open on storybook host (unless it's a full URL)
if (wdsFinalConfig.open &&
typeof wdsFinalConfig.open === 'string' &&
!wdsFinalConfig.open.match(/^https?:\/\//)) {
const protocol = options.https ? 'https' : 'http';
const host = options.host || 'localhost';
const port = options.port;
wdsFinalConfig.open = `${protocol}://${host}:${port}${wdsFinalConfig.open}`;
}
// setup middleware mode
wdsFinalConfig.middlewareMode = {
server,
};
wdsFinalConfig.port = undefined;
wdsFinalConfig.hostname = undefined;
wdsServer = await (0, dev_server_1.startDevServer)({
// we load and merge configs manually
readFileConfig: false,
readCliArgs: false,
autoExitProcess: false,
logStartMessage: false,
config: wdsFinalConfig,
});
router.use(wdsServer.koaApp.callback());
return {
bail: exports.bail,
stats: { toJson: () => null },
totalTime: process.hrtime(startTime),
};
};
exports.start = start;
const build = async ({ startTime, options }) => {
const env = await options.presets.apply('env');
const rollupDefaultOutputOptions = {
dir: options.outputDir,
};
const rollupStorybookConfig = {
output: rollupDefaultOutputOptions,
external: ['./sb-preview/runtime.js'],
plugins: [
(0, rollup_plugin_html_1.rollupPluginHTML)({
input: { html: await (0, generate_iframe_html_js_1.generateIframeHtml)(options), name: 'iframe.html' },
extractAssets: true,
bundleAssetsFromCss: true,
externalAssets: 'sb-common-assets/**',
}),
(0, plugin_node_resolve_1.default)(),
(0, rollup_plugin_prebundle_modules_js_1.rollupPluginPrebundleModules)(env, options),
(0, rollup_plugin_storybook_builder_js_1.rollupPluginStorybookBuilder)(options),
(0, rollup_plugin_mdx_js_1.rollupPluginMdx)(options),
(0, rollup_plugin_external_globals_1.default)(globals_1.globalsNameReferenceMap || globals_1.globals),
(0, plugin_replace_1.default)(Object.assign(Object.assign({}, (0, stringify_process_envs_js_1.stringifyProcessEnvs)(env)), { include: ['**/node_modules/@storybook/**/*'], preventAssignment: true })),
],
};
const rollupFinalConfig = await options.presets.apply('rollupFinal', rollupStorybookConfig, options);
const rollupBuild = (async () => {
node_logger_1.logger.info('=> Building preview..');
let bundle;
try {
bundle = await (0, rollup_1.rollup)(rollupFinalConfig);
if (rollupFinalConfig.output) {
const outputOptionsArray = Array.isArray(rollupFinalConfig.output)
? rollupFinalConfig.output
: [rollupFinalConfig.output];
for (const outputOptions of outputOptionsArray) {
await bundle.write(outputOptions);
}
}
}
finally {
if (bundle) {
bundle.close();
}
}
node_logger_1.logger.trace({ message: '=> Preview built', time: process.hrtime(startTime) });
})();
const previewDirOrigin = (0, node_path_1.join)((0, get_node_module_dir_js_1.getNodeModuleDir)('@storybook/core'), 'dist', 'preview');
const previewDirTarget = (0, node_path_1.join)(options.outputDir || '', `sb-preview`);
const previewFiles = (0, promises_1.cp)(previewDirOrigin, previewDirTarget, {
filter: src => {
const { ext } = (0, node_path_1.parse)(src);
if (ext) {
return ext === '.js';
}
return true;
},
recursive: true,
});
await Promise.all([rollupBuild, previewFiles]);
};
exports.build = build;
//# sourceMappingURL=index.js.map