From c546502b7fe0b2d3953168a9ed218522bd2a02bb Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 13 Nov 2023 11:30:03 +0100 Subject: [PATCH 1/8] Implement builder options for test build --- code/builders/builder-vite/src/build.ts | 4 +++- .../src/preview/iframe-webpack.config.ts | 20 ++++++++++++++++--- 2 files changed, 20 insertions(+), 4 deletions(-) diff --git a/code/builders/builder-vite/src/build.ts b/code/builders/builder-vite/src/build.ts index 1e25b7d79c69..0a0048301bdb 100644 --- a/code/builders/builder-vite/src/build.ts +++ b/code/builders/builder-vite/src/build.ts @@ -12,11 +12,13 @@ export async function build(options: Options) { build: { outDir: options.outputDir, emptyOutDir: false, // do not clean before running Vite build - Storybook has already added assets in there! - sourcemap: !options.test, rollupOptions: { // Do not try to bundle the storybook runtime, it is copied into the output dir after the build. external: ['./sb-preview/runtime.js'], }, + ...(options.test + ? { reportCompressedSize: false, sourcemap: false, target: 'esnext', treeshake: false } + : {}), }, }).build; diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts index 341a5c368694..58193fad8536 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -322,7 +322,7 @@ export default async ( fullySpecified: false, }, }, - builderOptions.useSWC + builderOptions.useSWC || options.test ? await createSWCLoader(Object.keys(virtualModuleMapping), options) : createBabelLoader(babelOptions, typescriptOptions, Object.keys(virtualModuleMapping)), { @@ -355,12 +355,26 @@ export default async ( }, runtimeChunk: true, sideEffects: true, - usedExports: isProd, + usedExports: options.test ? false : isProd, moduleIds: 'named', ...(isProd ? { minimize: true, - minimizer: builderOptions.useSWC + // eslint-disable-next-line no-nested-ternary + minimizer: options.test + ? [ + new TerserWebpackPlugin({ + minify: TerserWebpackPlugin.esbuildMinify, + terserOptions: { + compress: false, + sourceMap: false, + mangle: false, + keep_classnames: true, + keep_fnames: true, + }, + }), + ] + : builderOptions.useSWC ? [ new TerserWebpackPlugin({ minify: TerserWebpackPlugin.swcMinify, From 2eed93d2a8c26620daff1e1ed8894a8758f9c0a7 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 13 Nov 2023 11:55:13 +0100 Subject: [PATCH 2/8] Set parallel --- .../builder-webpack5/src/preview/iframe-webpack.config.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts index 58193fad8536..83c89992935a 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -364,6 +364,7 @@ export default async ( minimizer: options.test ? [ new TerserWebpackPlugin({ + parallel: true, minify: TerserWebpackPlugin.esbuildMinify, terserOptions: { compress: false, From a67976e704088ff4339e6d1fb2e3dae67ae2cf74 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 13 Nov 2023 12:59:03 +0100 Subject: [PATCH 3/8] remove compress option --- .../builder-webpack5/src/preview/iframe-webpack.config.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts index 83c89992935a..0b4b69bf0065 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -367,7 +367,6 @@ export default async ( parallel: true, minify: TerserWebpackPlugin.esbuildMinify, terserOptions: { - compress: false, sourceMap: false, mangle: false, keep_classnames: true, From 72f49c16747a3524cc0b4d7baec1decca10beb71 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 13 Nov 2023 13:04:32 +0100 Subject: [PATCH 4/8] Get TS types for correct options --- .../src/preview/iframe-webpack.config.ts | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts index 0b4b69bf0065..b71a58f0547f 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -8,7 +8,8 @@ import TerserWebpackPlugin from 'terser-webpack-plugin'; import VirtualModulePlugin from 'webpack-virtual-modules'; import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; import slash from 'slash'; - +import type { TransformOptions as EsbuildOptions } from 'esbuild'; +import type { JsMinifyOptions as SwcOptions } from '@swc/core'; import type { Options, CoreConfig, DocsOptions, PreviewAnnotation } from '@storybook/types'; import { globals } from '@storybook/preview/globals'; import { @@ -363,20 +364,18 @@ export default async ( // eslint-disable-next-line no-nested-ternary minimizer: options.test ? [ - new TerserWebpackPlugin({ + new TerserWebpackPlugin({ parallel: true, minify: TerserWebpackPlugin.esbuildMinify, terserOptions: { - sourceMap: false, - mangle: false, - keep_classnames: true, - keep_fnames: true, + sourcemap: false, + treeShaking: false, }, }), ] : builderOptions.useSWC ? [ - new TerserWebpackPlugin({ + new TerserWebpackPlugin({ minify: TerserWebpackPlugin.swcMinify, terserOptions: { sourceMap: true, From b4b31437e66d8485b99e3c411af364b00b9bad1e Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 13 Nov 2023 15:31:52 +0100 Subject: [PATCH 5/8] Remove warnOnIncompatibleAddons from static build entirely --- code/lib/core-server/src/build-static.ts | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/code/lib/core-server/src/build-static.ts b/code/lib/core-server/src/build-static.ts index 286723d8c1a1..e6775f519829 100644 --- a/code/lib/core-server/src/build-static.ts +++ b/code/lib/core-server/src/build-static.ts @@ -3,7 +3,7 @@ import { copy, emptyDir, ensureDir } from 'fs-extra'; import { dirname, isAbsolute, join, resolve } from 'path'; import { global } from '@storybook/global'; import { deprecate, logger } from '@storybook/node-logger'; -import { telemetry, getPrecedingUpgrade } from '@storybook/telemetry'; +import { getPrecedingUpgrade, telemetry } from '@storybook/telemetry'; import type { BuilderOptions, CLIOptions, @@ -30,12 +30,11 @@ import { copyAllStaticFilesRelativeToMain, } from './utils/copy-all-static-files'; import { getBuilders } from './utils/get-builders'; -import { extractStoriesJson, convertToIndexV3 } from './utils/stories-json'; +import { convertToIndexV3, extractStoriesJson } from './utils/stories-json'; import { extractStorybookMetadata } from './utils/metadata'; import { StoryIndexGenerator } from './utils/StoryIndexGenerator'; import { summarizeIndex } from './utils/summarizeIndex'; import { defaultStaticDirs } from './utils/constants'; -import { warnOnIncompatibleAddons } from './utils/warnOnIncompatibleAddons'; export type BuildStaticStandaloneOptions = CLIOptions & LoadOptions & @@ -77,10 +76,6 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption logger.warn(`you have not specified a framework in your ${options.configDir}/main.js`); } - if (options.test) { - await warnOnIncompatibleAddons(config); - } - logger.info('=> Loading presets'); let presets = await loadAllPresets({ corePresets: [ From bd71c78366380321c5dfd6a8dd6421e59195df31 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 13 Nov 2023 15:59:30 +0100 Subject: [PATCH 6/8] use feature flags --- code/builders/builder-vite/src/build.ts | 7 ++++++- .../src/preview/iframe-webpack.config.ts | 10 +++++----- code/lib/types/src/modules/core-common.ts | 12 ++++++++++++ 3 files changed, 23 insertions(+), 6 deletions(-) diff --git a/code/builders/builder-vite/src/build.ts b/code/builders/builder-vite/src/build.ts index 0a0048301bdb..ccf9f9476a5f 100644 --- a/code/builders/builder-vite/src/build.ts +++ b/code/builders/builder-vite/src/build.ts @@ -17,7 +17,12 @@ export async function build(options: Options) { external: ['./sb-preview/runtime.js'], }, ...(options.test - ? { reportCompressedSize: false, sourcemap: false, target: 'esnext', treeshake: false } + ? { + reportCompressedSize: false, + sourcemap: !options.build?.test?.disableSourcemaps, + target: 'esnext', + treeshake: !options.build?.test?.disableTreeShaking, + } : {}), }, }).build; diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts index c10d36e11733..62dc85f11d55 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -228,7 +228,7 @@ export default async ( name: 'preview', mode: isProd ? 'production' : 'development', bail: isProd, - devtool: options.test ? false : 'cheap-module-source-map', + devtool: options.build?.test?.disableSourcemaps ? false : 'cheap-module-source-map', entry: entries, output: { path: resolve(process.cwd(), outputDir), @@ -323,7 +323,7 @@ export default async ( fullySpecified: false, }, }, - builderOptions.useSWC || options.test + builderOptions.useSWC || options.build?.test?.optimizeCompilation ? await createSWCLoader(Object.keys(virtualModuleMapping), options) : createBabelLoader(babelOptions, typescriptOptions, Object.keys(virtualModuleMapping)), { @@ -356,20 +356,20 @@ export default async ( }, runtimeChunk: true, sideEffects: true, - usedExports: options.test ? false : isProd, + usedExports: options.build?.test?.disableTreeShaking ? false : isProd, moduleIds: 'named', ...(isProd ? { minimize: true, // eslint-disable-next-line no-nested-ternary - minimizer: options.test + minimizer: options.build?.test?.optimizeCompilation ? [ new TerserWebpackPlugin({ parallel: true, minify: TerserWebpackPlugin.esbuildMinify, terserOptions: { compress: false, - sourceMap: false, + sourceMap: !options.build?.test?.disableSourcemaps, mangle: false, keep_classnames: true, keep_fnames: true, diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts index 8ffe22b1d01f..47c7d88cba8b 100644 --- a/code/lib/types/src/modules/core-common.ts +++ b/code/lib/types/src/modules/core-common.ts @@ -283,6 +283,18 @@ export interface TestBuildFlags { * Override docgen to be disabled. */ disableDocgen?: boolean; + /** + * Override sourcemaps generation to be disabled. + */ + disableSourcemaps?: boolean; + /** + * Override tree-shaking (dead code elimination) to be disabled. + */ + disableTreeShaking?: boolean; + /** + * Compile/Optimize with SWC. + */ + optimizeCompilation?: boolean; } export interface TestBuildConfig { From f09246bcaeb4c486eb037301fbde530b89f1f172 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 13 Nov 2023 16:12:26 +0100 Subject: [PATCH 7/8] disable sourcemaps even if no optimizeCompilation --- .../builder-webpack5/src/preview/iframe-webpack.config.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts index 7b239ee857ea..0c3d53165e08 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -379,7 +379,7 @@ export default async ( new TerserWebpackPlugin({ minify: TerserWebpackPlugin.swcMinify, terserOptions: { - sourceMap: true, + sourceMap: !options.build?.test?.disableSourcemaps, mangle: false, keep_fnames: true, }, @@ -389,7 +389,7 @@ export default async ( new TerserWebpackPlugin({ parallel: true, terserOptions: { - sourceMap: true, + sourceMap: !options.build?.test?.disableSourcemaps, mangle: false, keep_fnames: true, }, From e58849e6df7946ef27bbad651fd10cec45fe5cfa Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 13 Nov 2023 16:23:42 +0100 Subject: [PATCH 8/8] fix default values --- code/lib/core-server/src/presets/common-preset.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts index 22f75191ecf3..e953a5cd3dc7 100644 --- a/code/lib/core-server/src/presets/common-preset.ts +++ b/code/lib/core-server/src/presets/common-preset.ts @@ -192,6 +192,9 @@ const testBuildFeatures = (value: boolean): Required => ({ removeMDXEntries: value, removeAutoDocs: value, disableDocgen: value, + disableSourcemaps: value, + disableTreeShaking: value, + optimizeCompilation: value, }); export const features = async (