From af8e3abd22831c7fbb7b7149ec0066ee5a7b665b Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 8 Nov 2023 16:30:01 +0000 Subject: [PATCH 1/9] Move Visual Test Addon to the code directory --- code/package.json | 3 ++ code/ui/components/package.json | 1 - code/yarn.lock | 49 ++++++++++++++++++++++++++------- 3 files changed, 42 insertions(+), 11 deletions(-) diff --git a/code/package.json b/code/package.json index bd9343258cdf..eeb0d76558f0 100644 --- a/code/package.json +++ b/code/package.json @@ -259,6 +259,9 @@ "vite-plugin-turbosnap": "^1.0.1", "wait-on": "^7.0.1" }, + "devDependencies": { + "@chromaui/addon-visual-tests": "^0.0.114" + }, "dependenciesMeta": { "ejs": { "built": false diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 3bd00ac81ee9..fc96f4170e99 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -71,7 +71,6 @@ "util-deprecate": "^1.0.2" }, "devDependencies": { - "@chromaui/addon-visual-tests": "^0.0.77", "@popperjs/core": "^2.6.0", "@radix-ui/react-scroll-area": "^1.0.5", "@storybook/icons": "^1.1.6", diff --git a/code/yarn.lock b/code/yarn.lock index 4ea9b0a2dd7b..78cd92c740a1 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -2432,12 +2432,13 @@ __metadata: languageName: node linkType: hard -"@chromaui/addon-visual-tests@npm:^0.0.77": - version: 0.0.77 - resolution: "@chromaui/addon-visual-tests@npm:0.0.77" +"@chromaui/addon-visual-tests@npm:^0.0.114": + version: 0.0.114 + resolution: "@chromaui/addon-visual-tests@npm:0.0.114" dependencies: "@storybook/design-system": "npm:^7.15.15" - chromatic: "npm:7.2.0-next.1" + "@urql/exchange-auth": "npm:^2.1.6" + chromatic: "npm:^7.2.3" date-fns: "npm:^2.30.0" filesize: "npm:^10.0.12" jsonfile: "npm:^6.1.0" @@ -2445,6 +2446,7 @@ __metadata: ts-dedent: "npm:^2.2.0" urql: "npm:^4.0.3" uuid: "npm:^9.0.0" + zod: "npm:^3.22.2" peerDependencies: "@storybook/blocks": ^7.2.0 "@storybook/client-logger": ^7.2.0 @@ -2461,7 +2463,7 @@ __metadata: optional: true react-dom: optional: true - checksum: e1f51e73bb95a66f9753a3f9acdcdfad2975c450588f2403e20840a1b4e9ba7a71906db53adcb3d6baecce1f329166835f24cabe9ff40f51609848f9c1b67988 + checksum: 786858de1712c2b807f2622da42176fe8f2ac9e05bd26afba662fabe179f78033d7dd9e23d71615554c92129b94314cf48fff977069008a15c033500261b7307 languageName: node linkType: hard @@ -6358,7 +6360,6 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/components@workspace:ui/components" dependencies: - "@chromaui/addon-visual-tests": "npm:^0.0.77" "@popperjs/core": "npm:^2.6.0" "@radix-ui/react-scroll-area": "npm:^1.0.5" "@radix-ui/react-select": "npm:^1.2.2" @@ -7362,6 +7363,7 @@ __metadata: "@babel/preset-react": "npm:^7.22.15" "@babel/preset-typescript": "npm:^7.23.2" "@babel/runtime": "npm:^7.23.2" + "@chromaui/addon-visual-tests": "npm:^0.0.114" "@emotion/jest": "npm:^11.10.0" "@jest/globals": "npm:^29.3.1" "@nx/workspace": "npm:17.0.2" @@ -9763,6 +9765,16 @@ __metadata: languageName: node linkType: hard +"@urql/core@npm:>=4.1.0": + version: 4.1.4 + resolution: "@urql/core@npm:4.1.4" + dependencies: + "@0no-co/graphql.web": "npm:^1.0.1" + wonka: "npm:^6.3.2" + checksum: 66540058380d61d9c59670d7a8b561889147a21c1d251db41fd302626ec4002d030fa292009b4ccc22f24f9efeed5f82e334782a2f57c28b8580b7274ee68813 + languageName: node + linkType: hard + "@urql/core@npm:^4.1.0": version: 4.1.3 resolution: "@urql/core@npm:4.1.3" @@ -9773,6 +9785,16 @@ __metadata: languageName: node linkType: hard +"@urql/exchange-auth@npm:^2.1.6": + version: 2.1.6 + resolution: "@urql/exchange-auth@npm:2.1.6" + dependencies: + "@urql/core": "npm:>=4.1.0" + wonka: "npm:^6.3.2" + checksum: d4140ad0fba0b1beacefcfb7a520662d97429f70888c61191c94e8811ac2b0678a01127e97fa473918dbe34a3e6cf6eece52bf44f6943057232594fa0949d58a + languageName: node + linkType: hard + "@vitejs/plugin-basic-ssl@npm:1.0.1": version: 1.0.1 resolution: "@vitejs/plugin-basic-ssl@npm:1.0.1" @@ -12719,14 +12741,14 @@ __metadata: languageName: node linkType: hard -"chromatic@npm:7.2.0-next.1": - version: 7.2.0-next.1 - resolution: "chromatic@npm:7.2.0-next.1" +"chromatic@npm:^7.2.3": + version: 7.6.0 + resolution: "chromatic@npm:7.6.0" bin: chroma: dist/bin.js chromatic: dist/bin.js chromatic-cli: dist/bin.js - checksum: bae3db70834766b82488e2c419f9e4dc297f372ba6987b1abf7688f875b1405caa37375c43f0a02b391b6c23514f04e9a5ff759ef5c3c42d6a11aed22ff4b910 + checksum: 5ed93689daea8ad22fe3a81e7238357933063905cf5f3acb5a2ec54dbcb5f9ae18c0c66b8bc2d7ed0c909144d9620864f97db70427d10f46de6c7960f6612b2b languageName: node linkType: hard @@ -31574,6 +31596,13 @@ __metadata: languageName: node linkType: hard +"zod@npm:^3.22.2": + version: 3.22.4 + resolution: "zod@npm:3.22.4" + checksum: 7578ab283dac0eee66a0ad0fc4a7f28c43e6745aadb3a529f59a4b851aa10872b3890398b3160f257f4b6817b4ce643debdda4fb21a2c040adda7862cab0a587 + languageName: node + linkType: hard + "zone.js@npm:^0.13.0": version: 0.13.3 resolution: "zone.js@npm:0.13.3" From bf8dc723ffdb12b1a660933ee35e181a1f72d39f Mon Sep 17 00:00:00 2001 From: Tomo5524 Date: Thu, 9 Nov 2023 11:25:58 +0900 Subject: [PATCH 2/9] Addon Viewport: added newer devices viewport --- code/addons/viewport/src/defaults.ts | 64 ++++++++++++++++++++++++++++ 1 file changed, 64 insertions(+) diff --git a/code/addons/viewport/src/defaults.ts b/code/addons/viewport/src/defaults.ts index a402f188bad5..fdc6246eb897 100644 --- a/code/addons/viewport/src/defaults.ts +++ b/code/addons/viewport/src/defaults.ts @@ -89,6 +89,62 @@ export const INITIAL_VIEWPORTS: ViewportMap = { }, type: 'mobile', }, + iphoneSE3: { + name: 'iPhone SE 3rd generation', + styles: { + height: '667px', + width: '375px', + }, + type: 'mobile', + }, + iphone13: { + name: 'iPhone 13', + styles: { + height: '844px', + width: '390px', + }, + type: 'mobile', + }, + iphone13pro: { + name: 'iPhone 13 Pro', + styles: { + height: '844px', + width: '390px', + }, + type: 'mobile', + }, + iphone13promax: { + name: 'iPhone 13 Pro Max', + styles: { + height: '926px', + width: '428px', + }, + type: 'mobile', + }, + iphone14: { + name: 'iPhone 14', + styles: { + height: '844px', + width: '390px', + }, + type: 'mobile', + }, + iphone14pro: { + name: 'iPhone 14 Pro', + styles: { + height: '852px', + width: '393px', + }, + type: 'mobile', + }, + iphone14promax: { + name: 'iPhone 14 Pro Max', + styles: { + height: '932px', + width: '430px', + }, + type: 'mobile', + }, ipad: { name: 'iPad', styles: { @@ -105,6 +161,14 @@ export const INITIAL_VIEWPORTS: ViewportMap = { }, type: 'tablet', }, + ipad11p: { + name: 'iPad Pro 11-in', + styles: { + height: '1194px', + width: '834px', + }, + type: 'tablet', + }, ipad12p: { name: 'iPad Pro 12.9-in', styles: { From 0a798a0b18e762b75957d7517b092a81809c5be9 Mon Sep 17 00:00:00 2001 From: Henk Erik van der Hoek Date: Tue, 14 Nov 2023 08:48:47 +0100 Subject: [PATCH 3/9] Issue 24747: Prevent non-deterministic build output --- .../builders/builder-vite/src/list-stories.ts | 36 +++++++++++-------- 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/code/builders/builder-vite/src/list-stories.ts b/code/builders/builder-vite/src/list-stories.ts index 521952bff15a..b6cc8644bd3e 100644 --- a/code/builders/builder-vite/src/list-stories.ts +++ b/code/builders/builder-vite/src/list-stories.ts @@ -9,21 +9,27 @@ export async function listStories(options: Options) { const { normalizePath } = await import('vite'); return ( - await Promise.all( - normalizeStories(await options.presets.apply('stories', [], options), { - configDir: options.configDir, - workingDir: options.configDir, - }).map(({ directory, files }) => { - const pattern = path.join(directory, files); - const absolutePattern = path.isAbsolute(pattern) - ? pattern - : path.join(options.configDir, pattern); + ( + await Promise.all( + normalizeStories(await options.presets.apply('stories', [], options), { + configDir: options.configDir, + workingDir: options.configDir, + }).map(({ directory, files }) => { + const pattern = path.join(directory, files); + const absolutePattern = path.isAbsolute(pattern) + ? pattern + : path.join(options.configDir, pattern); - return glob(slash(absolutePattern), { - ...commonGlobOptions(absolutePattern), - follow: true, - }); - }) + return glob(slash(absolutePattern), { + ...commonGlobOptions(absolutePattern), + follow: true, + }); + }) + ) ) - ).reduce((carry, stories) => carry.concat(stories.map(normalizePath)), []); + .reduce((carry, stories) => carry.concat(stories.map(normalizePath)), []) + // Sort stories to prevent a non-deterministic build. The result of Glob is not sorted an may differ + // for each invocation. This results in a different bundle file hashes from one build to the next. + .sort() + ); } From aacad55c1dfe2fd3b46561e91df316101ea12b7f Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 14 Nov 2023 10:37:25 +0100 Subject: [PATCH 4/9] Build: Add @storybook/addon-coverage to proxy list in verdaccio config --- scripts/verdaccio.yaml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/scripts/verdaccio.yaml b/scripts/verdaccio.yaml index aa59cf7d5e78..13027ed571fb 100644 --- a/scripts/verdaccio.yaml +++ b/scripts/verdaccio.yaml @@ -51,6 +51,10 @@ packages: access: $all publish: $all proxy: npmjs + '@storybook/addon-coverage': + access: $all + publish: $all + proxy: npmjs '@storybook/addon-bench': access: $all publish: $all From c3e2375af29254c4ef1f4c3d7273db4a6517d520 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 14 Nov 2023 12:14:15 +0100 Subject: [PATCH 5/9] improve the fastbuild config loading --- .../builder-vite/src/transform-iframe-html.ts | 2 +- code/builders/builder-vite/src/vite-config.ts | 2 +- .../src/preview/iframe-webpack.config.ts | 8 +++--- code/lib/core-common/src/presets.ts | 6 ++--- .../src/presets/common-override-preset.ts | 27 ++++++++++++++++--- .../core-server/src/presets/common-preset.ts | 22 --------------- .../src/utils/StoryIndexGenerator.ts | 2 +- code/lib/types/src/modules/core-common.ts | 14 +++++----- docs/versions/next.json | 2 +- 9 files changed, 41 insertions(+), 44 deletions(-) diff --git a/code/builders/builder-vite/src/transform-iframe-html.ts b/code/builders/builder-vite/src/transform-iframe-html.ts index d3437d5c1460..620cbed3da0a 100644 --- a/code/builders/builder-vite/src/transform-iframe-html.ts +++ b/code/builders/builder-vite/src/transform-iframe-html.ts @@ -22,7 +22,7 @@ export async function transformIframeHtml(html: string, options: Options) { })); const otherGlobals = { - ...(build?.test?.emptyBlocks ? { __STORYBOOK_BLOCKS_EMPTY_MODULE__: {} } : {}), + ...(build?.test?.disableBlocks ? { __STORYBOOK_BLOCKS_EMPTY_MODULE__: {} } : {}), }; return html diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts index 5274248afa80..6beb0ec73aba 100644 --- a/code/builders/builder-vite/src/vite-config.ts +++ b/code/builders/builder-vite/src/vite-config.ts @@ -79,7 +79,7 @@ export async function pluginConfig(options: Options) { const frameworkName = await getFrameworkName(options); const build = await options.presets.apply('build'); - if (build?.test?.emptyBlocks) { + if (build?.test?.disableBlocks) { globals['@storybook/blocks'] = '__STORYBOOK_BLOCKS_EMPTY_MODULE__'; } 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 da62a70ed652..10704bc25d93 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -220,7 +220,7 @@ export default async ( `); } - if (build?.test?.emptyBlocks) { + if (build?.test?.disableBlocks) { globals['@storybook/blocks'] = '__STORYBOOK_BLOCKS_EMPTY_MODULE__'; } @@ -276,7 +276,7 @@ export default async ( importPathMatcher: specifier.importPathMatcher.source, })), DOCS_OPTIONS: docsOptions, - ...(build?.test?.emptyBlocks ? { __STORYBOOK_BLOCKS_EMPTY_MODULE__: {} } : {}), + ...(build?.test?.disableBlocks ? { __STORYBOOK_BLOCKS_EMPTY_MODULE__: {} } : {}), }, headHtmlSnippet, bodyHtmlSnippet, @@ -323,7 +323,7 @@ export default async ( fullySpecified: false, }, }, - builderOptions.useSWC || options.build?.test?.optimizeCompilation + builderOptions.useSWC || options.build?.test?.fastCompilation ? await createSWCLoader(Object.keys(virtualModuleMapping), options) : createBabelLoader(babelOptions, typescriptOptions, Object.keys(virtualModuleMapping)), { @@ -362,7 +362,7 @@ export default async ( ? { minimize: true, // eslint-disable-next-line no-nested-ternary - minimizer: options.build?.test?.optimizeCompilation + minimizer: options.build?.test?.fastCompilation ? [ new TerserWebpackPlugin({ parallel: true, diff --git a/code/lib/core-common/src/presets.ts b/code/lib/core-common/src/presets.ts index 3a3a2db0ce97..8cc613a33b3f 100644 --- a/code/lib/core-common/src/presets.ts +++ b/code/lib/core-common/src/presets.ts @@ -255,15 +255,13 @@ export async function loadPreset( if ( storybookOptions.isCritical !== true && - storybookOptions.build?.test?.removeNonFastAddons + (storybookOptions.build?.test?.disabledAddons?.length || 0) > 0 ) { filter = (i: PresetConfig) => { // @ts-expect-error (Converted from ts-ignore) const name = i.name ? i.name : i; - return ( - !name.includes('@storybook/addon-docs') && !name.includes('@storybook/addon-coverage') - ); + return !!storybookOptions.build?.test?.disabledAddons?.find((n) => name.includes(n)); }; } diff --git a/code/lib/core-server/src/presets/common-override-preset.ts b/code/lib/core-server/src/presets/common-override-preset.ts index 916266e65bff..b906d54db0d8 100644 --- a/code/lib/core-server/src/presets/common-override-preset.ts +++ b/code/lib/core-server/src/presets/common-override-preset.ts @@ -1,4 +1,4 @@ -import type { PresetProperty, StorybookConfig } from '@storybook/types'; +import type { Options, PresetProperty, StorybookConfig, TestBuildFlags } from '@storybook/types'; import { normalizeStories, commonGlobOptions } from '@storybook/core-common'; import { isAbsolute, join } from 'path'; import slash from 'slash'; @@ -18,7 +18,7 @@ export const framework: PresetProperty<'framework', StorybookConfig> = async (co }; export const stories: PresetProperty<'stories', StorybookConfig> = async (entries, options) => { - if (options?.build?.test?.removeMDXEntries) { + if (options?.build?.test?.disableMDXEntries) { const out = ( await Promise.all( normalizeStories(entries, { @@ -49,8 +49,29 @@ export const typescript: PresetProperty<'typescript', StorybookConfig> = async ( }; export const docs: PresetProperty<'docs', StorybookConfig> = async (input, options) => { - if (options?.build?.test?.removeAutoDocs) { + if (options?.build?.test?.disableAutoDocs) { return {}; } return input; }; + +const createTestBuildFeatures = (value: boolean): Required => ({ + disableBlocks: value, + disabledAddons: ['@storybook/addon-docs', '@storybook/addon-coverage'], + disableMDXEntries: value, + disableAutoDocs: value, + disableDocgen: value, + disableSourcemaps: value, + disableTreeShaking: value, + fastCompilation: value, +}); + +export const build = async (value: StorybookConfig['build'], options: Options) => { + return { + ...value, + test: { + ...createTestBuildFeatures(!!options.test), + ...value?.test, + }, + }; +}; diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts index e953a5cd3dc7..6854a8f48682 100644 --- a/code/lib/core-server/src/presets/common-preset.ts +++ b/code/lib/core-server/src/presets/common-preset.ts @@ -11,7 +11,6 @@ import { import type { CLIOptions, CoreConfig, - TestBuildFlags, Indexer, Options, PresetPropertyFn, @@ -186,17 +185,6 @@ export const previewAnnotations = async (base: any, options: Options) => { return [...config, ...base]; }; -const testBuildFeatures = (value: boolean): Required => ({ - emptyBlocks: value, - removeNonFastAddons: value, - removeMDXEntries: value, - removeAutoDocs: value, - disableDocgen: value, - disableSourcemaps: value, - disableTreeShaking: value, - optimizeCompilation: value, -}); - export const features = async ( existing: StorybookConfig['features'] ): Promise => ({ @@ -208,16 +196,6 @@ export const features = async ( legacyDecoratorFileOrder: false, }); -export const build = async (value: StorybookConfig['build'], options: Options) => { - return { - ...value, - test: { - ...testBuildFeatures(!!options.test), - ...value?.test, - }, - }; -}; - export const csfIndexer: Indexer = { test: /(stories|story)\.(m?js|ts)x?$/, createIndex: async (fileName, options) => (await readCsf(fileName, options)).parse().indexInputs, diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts index 2ecd774528b7..f77d11c8ef3c 100644 --- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts +++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts @@ -337,7 +337,7 @@ export class StoryIndexGenerator { const createDocEntry = autodocs === true || (autodocs === 'tag' && hasAutodocsTag) || isStoriesMdx; - if (createDocEntry && this.options.build?.test?.removeAutoDocs !== true) { + if (createDocEntry && this.options.build?.test?.disableAutoDocs !== true) { const name = this.options.docs.defaultName ?? 'Docs'; const { metaId } = indexInputs[0]; const { title } = entries[0]; diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts index 47c7d88cba8b..584618e337b3 100644 --- a/code/lib/types/src/modules/core-common.ts +++ b/code/lib/types/src/modules/core-common.ts @@ -266,19 +266,19 @@ export interface TestBuildFlags { /** * The package @storybook/blocks will be excluded from the bundle, even when imported in e.g. the preview. */ - emptyBlocks?: boolean; + disableBlocks?: boolean; /** - * Disable all addons + * Disable specific addons */ - removeNonFastAddons?: boolean; + disabledAddons?: string[]; /** * Filter out .mdx stories entries */ - removeMDXEntries?: boolean; + disableMDXEntries?: boolean; /** * Override autodocs to be disabled */ - removeAutoDocs?: boolean; + disableAutoDocs?: boolean; /** * Override docgen to be disabled. */ @@ -292,9 +292,9 @@ export interface TestBuildFlags { */ disableTreeShaking?: boolean; /** - * Compile/Optimize with SWC. + * Compile/Optimize with SWC/ESbuild. */ - optimizeCompilation?: boolean; + fastCompilation?: boolean; } export interface TestBuildConfig { diff --git a/docs/versions/next.json b/docs/versions/next.json index f4ad6c1f1945..73fbcd0d0cb0 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"7.6.0-alpha.5","info":{"plain":"- Addons, core: Make `react` and Storybook packages `devDependencies` where possible - [#24676](https://github.com/storybookjs/storybook/pull/24676), thanks [@JReinhold](https://github.com/JReinhold)!\n- Angular: Handle nested module metadata - [#24798](https://github.com/storybookjs/storybook/pull/24798), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Angular: Include object configured styles - [#24768](https://github.com/storybookjs/storybook/pull/24768), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Angular: Support v17 - [#24717](https://github.com/storybookjs/storybook/pull/24717), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- ReactNative: Fix missing assert dep in docs-tools - [#24732](https://github.com/storybookjs/storybook/pull/24732), thanks [@dannyhw](https://github.com/dannyhw)!\n- SWC: Add settings for react and preact - [#24805](https://github.com/storybookjs/storybook/pull/24805), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Svelte: Fix source with decorators always showing the `SlotDecorator` component - [#24800](https://github.com/storybookjs/storybook/pull/24800), thanks [@JReinhold](https://github.com/JReinhold)!\n- TestBuild: Disable composition when `--test` is `true` - [#24799](https://github.com/storybookjs/storybook/pull/24799), thanks [@ndelangen](https://github.com/ndelangen)!\n- TestBuild: Disable docs related stuff for test builds - [#24691](https://github.com/storybookjs/storybook/pull/24691), thanks [@ndelangen](https://github.com/ndelangen)!\n- TestBuild: Disable telemetry for test builds - [#24706](https://github.com/storybookjs/storybook/pull/24706), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- TestBuild: Disable warnOnIncompatibleAddons - [#24797](https://github.com/storybookjs/storybook/pull/24797), thanks [@ndelangen](https://github.com/ndelangen)!\n- TestBuild: Globalize `@storybook/blocks` if `build.test.emptyBlocks` is `true` - [#24650](https://github.com/storybookjs/storybook/pull/24650), thanks [@ndelangen](https://github.com/ndelangen)!\n- TestBuild: Implement builder options for test build - [#24826](https://github.com/storybookjs/storybook/pull/24826), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- TestBuild: No sourcemaps for test builds - [#24804](https://github.com/storybookjs/storybook/pull/24804), thanks [@ndelangen](https://github.com/ndelangen)!\n- UI: Fix horizontal scroll bar in Canvas hidden by styling - [#24408](https://github.com/storybookjs/storybook/pull/24408), thanks [@yoshi2no](https://github.com/yoshi2no)!\n- UI: Logo fixed value - [#24726](https://github.com/storybookjs/storybook/pull/24726), thanks [@black-arm](https://github.com/black-arm)!\n- UI: improve A11Y remove redundant styling rules, update icon color - [#24402](https://github.com/storybookjs/storybook/pull/24402), thanks [@tolkadot](https://github.com/tolkadot)!\n- Webpack5: Add export-order-loader and remove babel-plugin-named-exports-order - [#24749](https://github.com/storybookjs/storybook/pull/24749), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Webpack5: Add react-docgen loader and remove babel-plugin-react-docgen - [#24762](https://github.com/storybookjs/storybook/pull/24762), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Webpack5: Fix race condition for export-order loader - [#24817](https://github.com/storybookjs/storybook/pull/24817), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Webpack5: Hide critical dependency warning - [#24784](https://github.com/storybookjs/storybook/pull/24784), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!"}} +{"version":"7.6.0-alpha.5","info":{"plain":"- Addons, core: Make `react` and Storybook packages `devDependencies` where possible - [#24676](https://github.com/storybookjs/storybook/pull/24676), thanks [@JReinhold](https://github.com/JReinhold)!\n- Angular: Handle nested module metadata - [#24798](https://github.com/storybookjs/storybook/pull/24798), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Angular: Include object configured styles - [#24768](https://github.com/storybookjs/storybook/pull/24768), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Angular: Support v17 - [#24717](https://github.com/storybookjs/storybook/pull/24717), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- ReactNative: Fix missing assert dep in docs-tools - [#24732](https://github.com/storybookjs/storybook/pull/24732), thanks [@dannyhw](https://github.com/dannyhw)!\n- SWC: Add settings for react and preact - [#24805](https://github.com/storybookjs/storybook/pull/24805), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Svelte: Fix source with decorators always showing the `SlotDecorator` component - [#24800](https://github.com/storybookjs/storybook/pull/24800), thanks [@JReinhold](https://github.com/JReinhold)!\n- TestBuild: Disable composition when `--test` is `true` - [#24799](https://github.com/storybookjs/storybook/pull/24799), thanks [@ndelangen](https://github.com/ndelangen)!\n- TestBuild: Disable docs related stuff for test builds - [#24691](https://github.com/storybookjs/storybook/pull/24691), thanks [@ndelangen](https://github.com/ndelangen)!\n- TestBuild: Disable telemetry for test builds - [#24706](https://github.com/storybookjs/storybook/pull/24706), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- TestBuild: Disable warnOnIncompatibleAddons - [#24797](https://github.com/storybookjs/storybook/pull/24797), thanks [@ndelangen](https://github.com/ndelangen)!\n- TestBuild: Globalize `@storybook/blocks` if `build.test.disableBlocks` is `true` - [#24650](https://github.com/storybookjs/storybook/pull/24650), thanks [@ndelangen](https://github.com/ndelangen)!\n- TestBuild: Implement builder options for test build - [#24826](https://github.com/storybookjs/storybook/pull/24826), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- TestBuild: No sourcemaps for test builds - [#24804](https://github.com/storybookjs/storybook/pull/24804), thanks [@ndelangen](https://github.com/ndelangen)!\n- UI: Fix horizontal scroll bar in Canvas hidden by styling - [#24408](https://github.com/storybookjs/storybook/pull/24408), thanks [@yoshi2no](https://github.com/yoshi2no)!\n- UI: Logo fixed value - [#24726](https://github.com/storybookjs/storybook/pull/24726), thanks [@black-arm](https://github.com/black-arm)!\n- UI: improve A11Y remove redundant styling rules, update icon color - [#24402](https://github.com/storybookjs/storybook/pull/24402), thanks [@tolkadot](https://github.com/tolkadot)!\n- Webpack5: Add export-order-loader and remove babel-plugin-named-exports-order - [#24749](https://github.com/storybookjs/storybook/pull/24749), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Webpack5: Add react-docgen loader and remove babel-plugin-react-docgen - [#24762](https://github.com/storybookjs/storybook/pull/24762), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Webpack5: Fix race condition for export-order loader - [#24817](https://github.com/storybookjs/storybook/pull/24817), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Webpack5: Hide critical dependency warning - [#24784](https://github.com/storybookjs/storybook/pull/24784), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!"}} From 40ea721e35bdc680dd1e5f40b60f84cf80947d07 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 14 Nov 2023 12:52:48 +0100 Subject: [PATCH 6/9] make sure list is empty without --test flag --- code/lib/core-server/src/presets/common-override-preset.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/core-server/src/presets/common-override-preset.ts b/code/lib/core-server/src/presets/common-override-preset.ts index b906d54db0d8..bffb3f3f0d26 100644 --- a/code/lib/core-server/src/presets/common-override-preset.ts +++ b/code/lib/core-server/src/presets/common-override-preset.ts @@ -57,7 +57,7 @@ export const docs: PresetProperty<'docs', StorybookConfig> = async (input, optio const createTestBuildFeatures = (value: boolean): Required => ({ disableBlocks: value, - disabledAddons: ['@storybook/addon-docs', '@storybook/addon-coverage'], + disabledAddons: value ? ['@storybook/addon-docs', '@storybook/addon-coverage'] : [], disableMDXEntries: value, disableAutoDocs: value, disableDocgen: value, From de1ee80973e1578b3ea2d2eae9a0018c7bf2d8af Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 14 Nov 2023 20:19:22 +0100 Subject: [PATCH 7/9] Revert defaulting to SWC in test build, but keep using esbuild for minification --- .../builder-webpack5/src/preview/iframe-webpack.config.ts | 4 ++-- code/lib/core-server/src/presets/common-override-preset.ts | 2 +- code/lib/types/src/modules/core-common.ts | 4 ++-- 3 files changed, 5 insertions(+), 5 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 10704bc25d93..13b02df7264f 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -323,7 +323,7 @@ export default async ( fullySpecified: false, }, }, - builderOptions.useSWC || options.build?.test?.fastCompilation + builderOptions.useSWC ? await createSWCLoader(Object.keys(virtualModuleMapping), options) : createBabelLoader(babelOptions, typescriptOptions, Object.keys(virtualModuleMapping)), { @@ -362,7 +362,7 @@ export default async ( ? { minimize: true, // eslint-disable-next-line no-nested-ternary - minimizer: options.build?.test?.fastCompilation + minimizer: options.build?.test?.esbuildMinify ? [ new TerserWebpackPlugin({ parallel: true, diff --git a/code/lib/core-server/src/presets/common-override-preset.ts b/code/lib/core-server/src/presets/common-override-preset.ts index bffb3f3f0d26..c27208c8b5f3 100644 --- a/code/lib/core-server/src/presets/common-override-preset.ts +++ b/code/lib/core-server/src/presets/common-override-preset.ts @@ -63,7 +63,7 @@ const createTestBuildFeatures = (value: boolean): Required => ({ disableDocgen: value, disableSourcemaps: value, disableTreeShaking: value, - fastCompilation: value, + esbuildMinify: value, }); export const build = async (value: StorybookConfig['build'], options: Options) => { diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts index 584618e337b3..f5043c362d7c 100644 --- a/code/lib/types/src/modules/core-common.ts +++ b/code/lib/types/src/modules/core-common.ts @@ -292,9 +292,9 @@ export interface TestBuildFlags { */ disableTreeShaking?: boolean; /** - * Compile/Optimize with SWC/ESbuild. + * Minify with ESBuild when using webpack. */ - fastCompilation?: boolean; + esbuildMinify?: boolean; } export interface TestBuildConfig { From a668b9874310a6c04be471d94614d1cdd7a665be Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 14 Nov 2023 20:38:41 +0100 Subject: [PATCH 8/9] Only filter out mdx when neccesary --- .../src/presets/common-override-preset.ts | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/code/lib/core-server/src/presets/common-override-preset.ts b/code/lib/core-server/src/presets/common-override-preset.ts index c27208c8b5f3..5696701a88cd 100644 --- a/code/lib/core-server/src/presets/common-override-preset.ts +++ b/code/lib/core-server/src/presets/common-override-preset.ts @@ -19,7 +19,7 @@ export const framework: PresetProperty<'framework', StorybookConfig> = async (co export const stories: PresetProperty<'stories', StorybookConfig> = async (entries, options) => { if (options?.build?.test?.disableMDXEntries) { - const out = ( + return ( await Promise.all( normalizeStories(entries, { configDir: options.configDir, @@ -34,9 +34,15 @@ export const stories: PresetProperty<'stories', StorybookConfig> = async (entrie }); }) ) - ).reduce((carry, s) => carry.concat(s), []); - - return out.filter((s) => !s.endsWith('.mdx')); + ).flatMap((expanded, i) => { + const filteredEntries = expanded.filter((s) => !s.endsWith('.mdx')); + // only return the filtered entries when there is something to filter + // as webpack is faster with unexpanded globs + if (filteredEntries.length < expanded.length) { + return filteredEntries; + } + return entries[i]; + }); } return entries; }; From 25bc6cfd560be52f945fa1c50a3d82202df12dbc Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Tue, 14 Nov 2023 20:23:20 +0000 Subject: [PATCH 9/9] Write changelog for 7.6.0-alpha.6 [skip ci] --- CHANGELOG.prerelease.md | 8 ++++++++ code/package.json | 3 ++- docs/versions/next.json | 2 +- 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index 7e7c4ea7c5c4..ead15edae9d9 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,11 @@ +## 7.6.0-alpha.6 + +- Addon: Move Visual Test addon to the code directory - [#24771](https://github.com/storybookjs/storybook/pull/24771), thanks [@cdedreuille](https://github.com/cdedreuille)! +- FastBuild: Improve config loading & naming - [#24837](https://github.com/storybookjs/storybook/pull/24837), thanks [@ndelangen](https://github.com/ndelangen)! +- TestBuild: Revert defaulting to SWC in test build, but keep using esbuild for minification - [#24843](https://github.com/storybookjs/storybook/pull/24843), thanks [@kasperpeulen](https://github.com/kasperpeulen)! +- Viewport: Add newer device viewports - [#24777](https://github.com/storybookjs/storybook/pull/24777), thanks [@Tomo5524](https://github.com/Tomo5524)! +- Vite: Prevent non-deterministic build output - [#24833](https://github.com/storybookjs/storybook/pull/24833), thanks [@henkerik](https://github.com/henkerik)! + ## 7.6.0-alpha.5 - Addons, core: Make `react` and Storybook packages `devDependencies` where possible - [#24676](https://github.com/storybookjs/storybook/pull/24676), thanks [@JReinhold](https://github.com/JReinhold)! diff --git a/code/package.json b/code/package.json index 2fa11bfdabe5..e73ee429811b 100644 --- a/code/package.json +++ b/code/package.json @@ -328,5 +328,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "7.6.0-alpha.6" } diff --git a/docs/versions/next.json b/docs/versions/next.json index 73fbcd0d0cb0..3b203dc04f4a 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"7.6.0-alpha.5","info":{"plain":"- Addons, core: Make `react` and Storybook packages `devDependencies` where possible - [#24676](https://github.com/storybookjs/storybook/pull/24676), thanks [@JReinhold](https://github.com/JReinhold)!\n- Angular: Handle nested module metadata - [#24798](https://github.com/storybookjs/storybook/pull/24798), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Angular: Include object configured styles - [#24768](https://github.com/storybookjs/storybook/pull/24768), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Angular: Support v17 - [#24717](https://github.com/storybookjs/storybook/pull/24717), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- ReactNative: Fix missing assert dep in docs-tools - [#24732](https://github.com/storybookjs/storybook/pull/24732), thanks [@dannyhw](https://github.com/dannyhw)!\n- SWC: Add settings for react and preact - [#24805](https://github.com/storybookjs/storybook/pull/24805), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Svelte: Fix source with decorators always showing the `SlotDecorator` component - [#24800](https://github.com/storybookjs/storybook/pull/24800), thanks [@JReinhold](https://github.com/JReinhold)!\n- TestBuild: Disable composition when `--test` is `true` - [#24799](https://github.com/storybookjs/storybook/pull/24799), thanks [@ndelangen](https://github.com/ndelangen)!\n- TestBuild: Disable docs related stuff for test builds - [#24691](https://github.com/storybookjs/storybook/pull/24691), thanks [@ndelangen](https://github.com/ndelangen)!\n- TestBuild: Disable telemetry for test builds - [#24706](https://github.com/storybookjs/storybook/pull/24706), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- TestBuild: Disable warnOnIncompatibleAddons - [#24797](https://github.com/storybookjs/storybook/pull/24797), thanks [@ndelangen](https://github.com/ndelangen)!\n- TestBuild: Globalize `@storybook/blocks` if `build.test.disableBlocks` is `true` - [#24650](https://github.com/storybookjs/storybook/pull/24650), thanks [@ndelangen](https://github.com/ndelangen)!\n- TestBuild: Implement builder options for test build - [#24826](https://github.com/storybookjs/storybook/pull/24826), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- TestBuild: No sourcemaps for test builds - [#24804](https://github.com/storybookjs/storybook/pull/24804), thanks [@ndelangen](https://github.com/ndelangen)!\n- UI: Fix horizontal scroll bar in Canvas hidden by styling - [#24408](https://github.com/storybookjs/storybook/pull/24408), thanks [@yoshi2no](https://github.com/yoshi2no)!\n- UI: Logo fixed value - [#24726](https://github.com/storybookjs/storybook/pull/24726), thanks [@black-arm](https://github.com/black-arm)!\n- UI: improve A11Y remove redundant styling rules, update icon color - [#24402](https://github.com/storybookjs/storybook/pull/24402), thanks [@tolkadot](https://github.com/tolkadot)!\n- Webpack5: Add export-order-loader and remove babel-plugin-named-exports-order - [#24749](https://github.com/storybookjs/storybook/pull/24749), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Webpack5: Add react-docgen loader and remove babel-plugin-react-docgen - [#24762](https://github.com/storybookjs/storybook/pull/24762), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Webpack5: Fix race condition for export-order loader - [#24817](https://github.com/storybookjs/storybook/pull/24817), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Webpack5: Hide critical dependency warning - [#24784](https://github.com/storybookjs/storybook/pull/24784), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!"}} +{"version":"7.6.0-alpha.6","info":{"plain":"- Addon: Move Visual Test addon to the code directory - [#24771](https://github.com/storybookjs/storybook/pull/24771), thanks [@cdedreuille](https://github.com/cdedreuille)!\n- FastBuild: Improve config loading & naming - [#24837](https://github.com/storybookjs/storybook/pull/24837), thanks [@ndelangen](https://github.com/ndelangen)!\n- TestBuild: Revert defaulting to SWC in test build, but keep using esbuild for minification - [#24843](https://github.com/storybookjs/storybook/pull/24843), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- Viewport: Add newer device viewports - [#24777](https://github.com/storybookjs/storybook/pull/24777), thanks [@Tomo5524](https://github.com/Tomo5524)!\n- Vite: Prevent non-deterministic build output - [#24833](https://github.com/storybookjs/storybook/pull/24833), thanks [@henkerik](https://github.com/henkerik)!"}}