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

Merge pull request #18182 from storybookjs/future/builder-presets

Browse Source 
Core: Allow builders to be set in presets
This commit is contained in:
Michael Shilman 2022-05-22 02:08:47 +08:00 committed by GitHub
commit 8fcdc65bfe
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 67 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
lib/core-server/src/build-dev.ts
View File

@ -17,8 +17,7 @@ import { outputStats } from './utils/output-stats';
import { outputStartupInformation } from './utils/output-startup-information';
import { updateCheck } from './utils/update-check';
import { getServerPort, getServerChannelUrl } from './utils/server-address';
import { getPreviewBuilder } from './utils/get-preview-builder';
import { getManagerBuilder } from './utils/get-manager-builder';
import { getBuilders } from './utils/get-builders';
export async function buildDevStandalone(options: CLIOptions & LoadOptions & BuilderOptions) {
const { packageJson, versionUpdates, releaseNotes } = options;
@ -57,10 +56,17 @@ export async function buildDevStandalone(options: CLIOptions & LoadOptions & Bui
options.serverChannelUrl = getServerChannelUrl(port, options);
/* eslint-enable no-param-reassign */
const previewBuilder = await getPreviewBuilder(options.configDir);
const managerBuilder = await getManagerBuilder(options.configDir);
console.time('loadAllPresets');
let presets = loadAllPresets({
corePresets: [],
overridePresets: [],
...options,
});
console.timeEnd('loadAllPresets');
const presets = loadAllPresets({
const [previewBuilder, managerBuilder] = await getBuilders({ ...options, presets });
console.time('loadAllPresets2');
presets = loadAllPresets({
corePresets: [
require.resolve('./presets/common-preset'),
...managerBuilder.corePresets,
@ -70,6 +76,7 @@ export async function buildDevStandalone(options: CLIOptions & LoadOptions & Bui
overridePresets: previewBuilder.overridePresets,
...options,
});
console.timeEnd('loadAllPresets2');
const features = await presets.apply<StorybookConfig['features']>('features');
global.FEATURES = features;

14
lib/core-server/src/build-static.ts
View File

@ -23,8 +23,7 @@ import {
copyAllStaticFiles,
copyAllStaticFilesRelativeToMain,
} from './utils/copy-all-static-files';
import { getPreviewBuilder } from './utils/get-preview-builder';
import { getManagerBuilder } from './utils/get-manager-builder';
import { getBuilders } from './utils/get-builders';
import { extractStoriesJson } from './utils/stories-json';
import { extractStorybookMetadata } from './utils/metadata';
import { StoryIndexGenerator } from './utils/StoryIndexGenerator';
@ -57,10 +56,15 @@ export async function buildStaticStandalone(options: CLIOptions & LoadOptions &
await cpy(defaultFavIcon, options.outputDir);
const previewBuilder: Builder<unknown, unknown> = await getPreviewBuilder(options.configDir);
const managerBuilder: Builder<unknown, unknown> = await getManagerBuilder(options.configDir);
let presets = loadAllPresets({
corePresets: [],
overridePresets: [],
...options,
});
const presets = loadAllPresets({
const [previewBuilder, managerBuilder] = await getBuilders({ ...options, presets });
presets = loadAllPresets({
corePresets: [
require.resolve('./presets/common-preset'),
...managerBuilder.corePresets,

6
lib/core-server/src/dev-server.ts
View File

@ -20,8 +20,7 @@ import { useStorybookMetadata } from './utils/metadata';
import { getServerChannel } from './utils/get-server-channel';
import { openInBrowser } from './utils/open-in-browser';
import { getPreviewBuilder } from './utils/get-preview-builder';
import { getManagerBuilder } from './utils/get-manager-builder';
import { getBuilders } from './utils/get-builders';
import { StoryIndexGenerator } from './utils/StoryIndexGenerator';
// @ts-ignore
@ -137,8 +136,7 @@ export async function storybookDevServer(options: Options) {
server.listen({ port, host }, (error: Error) => (error ? reject(error) : resolve()));
});
const previewBuilder: Builder<unknown, unknown> = await getPreviewBuilder(options.configDir);
const managerBuilder: Builder<unknown, unknown> = await getManagerBuilder(options.configDir);
const [previewBuilder, managerBuilder] = await getBuilders(options);
if (options.debugWebpack) {
logConfig('Preview webpack config', await previewBuilder.getConfig(options));

44
lib/core-server/src/utils/get-builders.ts Normal file
View File

@ -0,0 +1,44 @@
import type { Options, CoreConfig, Builder } from '@storybook/core-common';
async function getManagerBuilder(builderName: string | undefined, configDir: string) {
// Builder can be any string including community builders like `storybook-builder-vite`.
// - For now, `webpack5` triggers `manager-webpack5`
// - Everything else builds with `manager-webpack4`
//
// Unlike preview builders, manager building is not pluggable!
const builderPackage = ['webpack5', '@storybook/builder-webpack5'].includes(builderName)
? require.resolve('@storybook/manager-webpack5', { paths: [configDir] })
: '@storybook/manager-webpack4';
const managerBuilder = await import(builderPackage);
return managerBuilder;
}
async function getPreviewBuilder(builderName: string, configDir: string) {
let builderPackage: string;
if (builderName) {
builderPackage = require.resolve(
['webpack4', 'webpack5'].includes(builderName)
? `@storybook/builder-${builderName}`
: builderName,
{ paths: [configDir] }
);
} else {
builderPackage = require.resolve('@storybook/builder-webpack4');
}
const previewBuilder = await import(builderPackage);
return previewBuilder;
}
export async function getBuilders({
presets,
configDir,
}: Options): Promise<Builder<unknown, unknown>[]> {
const core = await presets.apply<CoreConfig>('core', undefined);
const builderName = typeof core?.builder === 'string' ? core.builder : core?.builder?.name;
return Promise.all([
getPreviewBuilder(builderName, configDir),
getManagerBuilder(builderName, configDir),
]);
}

23
lib/core-server/src/utils/get-manager-builder.ts
View File

@ -1,23 +0,0 @@
import path from 'path';
import { getInterpretedFile, serverRequire } from '@storybook/core-common';
import type { Options } from '@storybook/core-common';
export async function getManagerBuilder(configDir: Options['configDir']) {
const main = path.resolve(configDir, 'main');
const mainFile = getInterpretedFile(main);
const { core } = mainFile ? serverRequire(mainFile) : { core: null };
const builderName = typeof core?.builder === 'string' ? core.builder : core?.builder?.name;
// Builder can be any string including community builders like `storybook-builder-vite`.
// - For now, `webpack5` triggers `manager-webpack5`
// - Everything else builds with `manager-webpack4`
//
// Unlike preview builders, manager building is not pluggable!
const builderPackage = ['webpack5', '@storybook/builder-webpack5'].includes(builderName)
? require.resolve('@storybook/manager-webpack5', { paths: [main] })
: '@storybook/manager-webpack4';
const managerBuilder = await import(builderPackage);
return managerBuilder;
}

23
lib/core-server/src/utils/get-preview-builder.ts
View File

@ -1,23 +0,0 @@
import path from 'path';
import { getInterpretedFile, serverRequire } from '@storybook/core-common';
import type { Options } from '@storybook/core-common';
export async function getPreviewBuilder(configDir: Options['configDir']) {
const main = path.resolve(configDir, 'main');
const mainFile = getInterpretedFile(main);
const { core } = mainFile ? serverRequire(mainFile) : { core: null };
let builderPackage: string;
if (core?.builder) {
const builderName = typeof core.builder === 'string' ? core.builder : core.builder?.name;
builderPackage = require.resolve(
['webpack4', 'webpack5'].includes(builderName)
? `@storybook/builder-${builderName}`
: builderName,
{ paths: [main] }
);
} else {
builderPackage = require.resolve('@storybook/builder-webpack4');
}
const previewBuilder = await import(builderPackage);
return previewBuilder;
}