From 21916797bc44249f940710b9f4d0de48e414ad4d Mon Sep 17 00:00:00 2001 From: Alen Ajam Date: Mon, 1 May 2023 18:57:43 +0200 Subject: [PATCH 001/110] fix(Select.tsx): added value prop to select and multiselect --- code/ui/blocks/src/controls/options/Select.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/code/ui/blocks/src/controls/options/Select.tsx b/code/ui/blocks/src/controls/options/Select.tsx index f033c131bd71..b05d58a4a3a7 100644 --- a/code/ui/blocks/src/controls/options/Select.tsx +++ b/code/ui/blocks/src/controls/options/Select.tsx @@ -110,7 +110,9 @@ const SingleSelect: FC = ({ name, value, options, onChange }) => { {NO_SELECTION} {Object.keys(options).map((key) => ( - + ))} @@ -131,7 +133,9 @@ const MultiSelect: FC = ({ name, value, options, onChange }) => { {Object.keys(options).map((key) => ( - + ))} From 41dd534a5f777ec7babe8e4cdbda19cb5e30f9db Mon Sep 17 00:00:00 2001 From: Alen Ajam Date: Mon, 1 May 2023 19:03:08 +0200 Subject: [PATCH 002/110] fix(basics.stories.ts): fixed select and multiselect controls, added double space option --- code/addons/controls/template/stories/basics.stories.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/addons/controls/template/stories/basics.stories.ts b/code/addons/controls/template/stories/basics.stories.ts index 51acda9c1f21..6d2224d80126 100644 --- a/code/addons/controls/template/stories/basics.stories.ts +++ b/code/addons/controls/template/stories/basics.stories.ts @@ -25,8 +25,8 @@ export default { control: { type: 'radio', options: ['a', 'b', 'c'], labels: ['alpha', 'beta', 'gamma'] }, }, inlineRadio: { control: { type: 'inline-radio', options: ['a', 'b', 'c'] } }, - select: { control: { type: 'select', options: ['a', 'b', 'c'] } }, - multiSelect: { control: { type: 'multi-select', options: ['a', 'b', 'c'] } }, + select: { control: 'select', options: ['a', 'b', 'c', 'double space'] }, + multiSelect: { control: { type: 'multi-select' }, options: ['a', 'b', 'c', 'double space'] }, range: { control: 'range' }, rangeCustom: { control: { type: 'range', min: 0, max: 1000, step: 100 } }, text: { control: 'text' }, From afd96e736acc58b2d6fe1abecac4b68fec887b5c Mon Sep 17 00:00:00 2001 From: Alen Ajam Date: Mon, 1 May 2023 19:07:21 +0200 Subject: [PATCH 003/110] test(addon-controls.spec.ts): check that options which value contain double spaces work --- code/e2e-tests/addon-controls.spec.ts | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/code/e2e-tests/addon-controls.spec.ts b/code/e2e-tests/addon-controls.spec.ts index bcbf96019947..df376782aae8 100644 --- a/code/e2e-tests/addon-controls.spec.ts +++ b/code/e2e-tests/addon-controls.spec.ts @@ -70,4 +70,31 @@ test.describe('addon-controls', () => { const label = await sbPage.panelContent().locator('textarea[name=label]').inputValue(); await expect(label).toEqual('Hello world'); }); + + test('should set select option when value contains double spaces', async ({ page }) => { + await page.goto(`${storybookUrl}?path=/story/addons-controls-basics--undefined`); + + const sbPage = new SbPage(page); + await sbPage.waitUntilLoaded(); + await sbPage.viewAddonPanel('Controls'); + await sbPage.panelContent().locator('#control-select').selectOption('double space'); + + await expect(sbPage.panelContent().locator('#control-select')).toHaveValue('double space'); + await expect(page).toHaveURL(/.*select:double\+\+space.*/); + }); + + test('should set multiselect option when value contains double spaces', async ({ page }) => { + await page.goto(`${storybookUrl}?path=/story/addons-controls-basics--undefined`); + + const sbPage = new SbPage(page); + await sbPage.waitUntilLoaded(); + await sbPage.viewAddonPanel('Controls'); + await sbPage.panelContent().locator('#control-multiSelect').selectOption('double space'); + + await expect(sbPage.panelContent().locator('#control-multiSelect')).toHaveValue( + 'double space' + ); + + await expect(page).toHaveURL(/.*multiSelect\[0]:double\+\+space.*/); + }); }); From 8978776ff528b8ea80cc90f8d86d3949e28ab237 Mon Sep 17 00:00:00 2001 From: Shaun Lloyd Date: Tue, 29 Aug 2023 14:21:12 -0400 Subject: [PATCH 004/110] Add url for themes icon --- code/addons/themes/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index 8e4a40ec9a08..93cd55aba010 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -114,6 +114,6 @@ "unsupportedFrameworks": [ "react-native" ], - "icon": "" + "icon": "https://user-images.githubusercontent.com/18172605/264114587-e4b32190-a9b7-4afa-b739-c873fc0498a6.png" } } From 98692824ad0efa90c7c118446bf322d32790d3e7 Mon Sep 17 00:00:00 2001 From: Nate Houk Date: Sat, 2 Sep 2023 09:32:01 +0200 Subject: [PATCH 005/110] Update chromatic-github-action.js.mdx Update to fix errors with fetch-depth --- docs/snippets/common/chromatic-github-action.js.mdx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/docs/snippets/common/chromatic-github-action.js.mdx b/docs/snippets/common/chromatic-github-action.js.mdx index c064b7ae6cf6..8e796479564b 100644 --- a/docs/snippets/common/chromatic-github-action.js.mdx +++ b/docs/snippets/common/chromatic-github-action.js.mdx @@ -15,7 +15,13 @@ jobs: # Job steps steps: - uses: actions/checkout@v3 - - run: yarn + with: + fetch-depth: 0 + - uses: actions/setup-node@v3 + with: + node-version: 20 + cache: 'npm' + - run: npm ci #๐Ÿ‘‡ Adds Chromatic as a step in the workflow - uses: chromaui/action@v1 # Options required for Chromatic's GitHub Action From ff7b7e176737a67fa73b655175e11f1433f3241b Mon Sep 17 00:00:00 2001 From: j3rem1e Date: Wed, 6 Sep 2023 21:12:16 +0200 Subject: [PATCH 006/110] Svelte: Always inject doc metadata --- .../svelte-vite/src/plugins/svelte-docgen.ts | 19 +++++++------ .../src/svelte-docgen-loader.ts | 27 ++++++++++--------- 2 files changed, 26 insertions(+), 20 deletions(-) diff --git a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts index b9e8ac5fa762..7f6dc2314a5f 100644 --- a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts +++ b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts @@ -79,21 +79,24 @@ export function svelteDocgen(svelteOptions: Record = {}): PluginOpt const s = new MagicString(src); + let componentDoc: any; try { - const componentDoc = await svelteDoc.parse(options); - // get filename for source content - const file = path.basename(resource); - - componentDoc.name = path.basename(file); - - const componentName = getNameFromFilename(resource); - s.append(`;${componentName}.__docgen = ${JSON.stringify(componentDoc)}`); + componentDoc = await svelteDoc.parse(options); } catch (error: any) { + componentDoc = { keywords: [], data: [] }; if (logDocgen) { logger.error(error); } } + // get filename for source content + const file = path.basename(resource); + + componentDoc.name = path.basename(file); + + const componentName = getNameFromFilename(resource); + s.append(`;${componentName}.__docgen = ${JSON.stringify(componentDoc)}`); + return { code: s.toString(), map: s.generateMap({ hires: true, source: id }), diff --git a/code/presets/svelte-webpack/src/svelte-docgen-loader.ts b/code/presets/svelte-webpack/src/svelte-docgen-loader.ts index 5267e73a317a..b8c6ae1a656d 100644 --- a/code/presets/svelte-webpack/src/svelte-docgen-loader.ts +++ b/code/presets/svelte-webpack/src/svelte-docgen-loader.ts @@ -73,27 +73,30 @@ export default async function svelteDocgen(this: any, source: string) { let docgen = ''; + let componentDoc: any; try { // FIXME // @ts-expect-error (Converted from ts-ignore) - const componentDoc = await svelteDoc.parse(options); + componentDoc = await svelteDoc.parse(options); + } catch (error) { + componentDoc = { keywords: [], data: [] }; + if (logDocgen) { + logger.error(error as any); + } + } - // get filename for source content - const file = path.basename(resource); + // get filename for source content + const file = path.basename(resource); - // populate filename in docgen - componentDoc.name = path.basename(file); + // populate filename in docgen + componentDoc.name = path.basename(file); - const componentName = getNameFromFilename(resource); + const componentName = getNameFromFilename(resource); - docgen = dedent` + docgen = dedent` ${componentName}.__docgen = ${JSON.stringify(componentDoc)}; `; - } catch (error) { - if (logDocgen) { - logger.error(error as any); - } - } + // inject __docgen prop in svelte component const output = source + docgen; From 4f6667dcb1cb42a4920920984b84e33743c8fb3f Mon Sep 17 00:00:00 2001 From: j3rem1e Date: Wed, 6 Sep 2023 21:18:25 +0200 Subject: [PATCH 007/110] Svelte: Fix parsing of ecma v12 by sveltedoc-parser --- .../svelte-vite/src/plugins/svelte-docgen.ts | 16 ++++++++++++++++ .../svelte-webpack/src/svelte-docgen-loader.ts | 16 ++++++++++++++++ 2 files changed, 32 insertions(+) diff --git a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts index 7f6dc2314a5f..6f46d8be1a2e 100644 --- a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts +++ b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts @@ -8,6 +8,22 @@ import { logger } from '@storybook/node-logger'; import { preprocess } from 'svelte/compiler'; import { createFilter } from 'vite'; +/* + * Patch sveltedoc-parser internal options. + * Waiting for a fix for https://github.com/alexprey/sveltedoc-parser/issues/87 + */ +const svelteDocParserOptions = require('sveltedoc-parser/lib/options.js'); + +svelteDocParserOptions.getAstDefaultOptions = () => ({ + range: true, + loc: true, + comment: true, + tokens: true, + ecmaVersion: 12, + sourceType: 'module', + ecmaFeatures: {}, +}); + // Most of the code here should probably be exported by @storybook/svelte and reused here. // See: https://github.com/storybookjs/storybook/blob/next/app/svelte/src/server/svelte-docgen-loader.ts diff --git a/code/presets/svelte-webpack/src/svelte-docgen-loader.ts b/code/presets/svelte-webpack/src/svelte-docgen-loader.ts index b8c6ae1a656d..f83055132059 100644 --- a/code/presets/svelte-webpack/src/svelte-docgen-loader.ts +++ b/code/presets/svelte-webpack/src/svelte-docgen-loader.ts @@ -5,6 +5,22 @@ import * as fs from 'fs'; import { preprocess } from 'svelte/compiler'; import { logger } from '@storybook/node-logger'; +/* + * Patch sveltedoc-parser internal options. + * Waiting for a fix for https://github.com/alexprey/sveltedoc-parser/issues/87 + */ +const svelteDocParserOptions = require('sveltedoc-parser/lib/options.js'); + +svelteDocParserOptions.getAstDefaultOptions = () => ({ + range: true, + loc: true, + comment: true, + tokens: true, + ecmaVersion: 12, + sourceType: 'module', + ecmaFeatures: {}, +}); + // From https://github.com/sveltejs/svelte/blob/8db3e8d0297e052556f0b6dde310ef6e197b8d18/src/compiler/compile/utils/get_name_from_filename.ts // Copied because it is not exported from the compiler function getNameFromFilename(filename: string) { From e0fb28981d2f6f76968ff4f420fe43c783b8607e Mon Sep 17 00:00:00 2001 From: j3rem1e Date: Sat, 9 Sep 2023 17:51:30 +0200 Subject: [PATCH 008/110] Adding e2e to test Svelte documentation --- code/e2e-tests/framework-svelte.spec.ts | 30 +++++++++++++++++++ .../svelte/template/cli/js/Button.svelte | 3 +- .../svelte/template/cli/ts-3-8/Button.svelte | 3 +- .../svelte/template/cli/ts-4-9/Button.svelte | 3 +- .../svelte/template/components/Button.svelte | 3 +- 5 files changed, 38 insertions(+), 4 deletions(-) create mode 100644 code/e2e-tests/framework-svelte.spec.ts diff --git a/code/e2e-tests/framework-svelte.spec.ts b/code/e2e-tests/framework-svelte.spec.ts new file mode 100644 index 000000000000..b2a3dbf41672 --- /dev/null +++ b/code/e2e-tests/framework-svelte.spec.ts @@ -0,0 +1,30 @@ +/* eslint-disable jest/no-disabled-tests */ +import type { Locator } from '@playwright/test'; +import { test, expect } from '@playwright/test'; +import process from 'process'; +import { SbPage } from './util'; + +const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:6006'; +const templateName = process.env.STORYBOOK_TEMPLATE_NAME; + +test.describe('Svelte', () => { + test.skip( + // eslint-disable-next-line jest/valid-title + !templateName?.includes('svelte') || templateName?.includes('-ts'), + 'Only run this test on Svelte with javascript' + ); + + test.beforeEach(async ({ page }) => { + await page.goto(storybookUrl); + await new SbPage(page).waitUntilLoaded(); + }); + + test('Story have a documentation', async ({ page }) => { + const sbPage = new SbPage(page); + + sbPage.navigateToStory('example/button', 'docs'); + const root = sbPage.previewRoot(); + const argsTable = root.locator('.docblock-argstable'); + await expect(argsTable).toContainText('Is this the principal call to action on the page'); + }); +}); diff --git a/code/renderers/svelte/template/cli/js/Button.svelte b/code/renderers/svelte/template/cli/js/Button.svelte index a2a78d9d0d6f..de99698d769e 100644 --- a/code/renderers/svelte/template/cli/js/Button.svelte +++ b/code/renderers/svelte/template/cli/js/Button.svelte @@ -24,6 +24,7 @@ $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; $: style = backgroundColor ? `background-color: ${backgroundColor}` : ''; + $: text = label?.toString(); // Test parsing of Elvis Operator diff --git a/code/renderers/svelte/template/cli/ts-3-8/Button.svelte b/code/renderers/svelte/template/cli/ts-3-8/Button.svelte index dfc4bbd4c037..977d766f3559 100644 --- a/code/renderers/svelte/template/cli/ts-3-8/Button.svelte +++ b/code/renderers/svelte/template/cli/ts-3-8/Button.svelte @@ -22,6 +22,7 @@ $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; $: style = backgroundColor ? `background-color: ${backgroundColor}` : ''; + $: text = label?.toString(); // Test parsing of Elvis Operator diff --git a/code/renderers/svelte/template/cli/ts-4-9/Button.svelte b/code/renderers/svelte/template/cli/ts-4-9/Button.svelte index f590a0aff55e..0c551e54f84f 100644 --- a/code/renderers/svelte/template/cli/ts-4-9/Button.svelte +++ b/code/renderers/svelte/template/cli/ts-4-9/Button.svelte @@ -22,6 +22,7 @@ $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; $: style = backgroundColor ? `background-color: ${backgroundColor}` : ''; + $: text = label?.toString(); // Test parsing of Elvis Operator diff --git a/code/renderers/svelte/template/components/Button.svelte b/code/renderers/svelte/template/components/Button.svelte index 4b80e84b8132..07f18594ace0 100644 --- a/code/renderers/svelte/template/components/Button.svelte +++ b/code/renderers/svelte/template/components/Button.svelte @@ -24,6 +24,7 @@ $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; $: style = backgroundColor ? `background-color: ${backgroundColor}` : ''; + $: text = label?.toString(); // Test parsing of Elvis Operator const dispatch = createEventDispatcher(); @@ -41,5 +42,5 @@ {style} on:click={onClick} > - {label} + {text} From 4f5351151c7bce95e55a0eec528d02993af77cf0 Mon Sep 17 00:00:00 2001 From: j3rem1e Date: Tue, 12 Sep 2023 20:13:36 +0200 Subject: [PATCH 009/110] Svelte: Fix documentation for typescript component with vite --- code/e2e-tests/framework-svelte.spec.ts | 5 ++-- code/frameworks/svelte-vite/package.json | 1 + .../svelte-vite/src/plugins/svelte-docgen.ts | 23 ++++++++++++++++--- code/yarn.lock | 1 + 4 files changed, 24 insertions(+), 6 deletions(-) diff --git a/code/e2e-tests/framework-svelte.spec.ts b/code/e2e-tests/framework-svelte.spec.ts index b2a3dbf41672..3bf8d5d39abf 100644 --- a/code/e2e-tests/framework-svelte.spec.ts +++ b/code/e2e-tests/framework-svelte.spec.ts @@ -1,5 +1,4 @@ /* eslint-disable jest/no-disabled-tests */ -import type { Locator } from '@playwright/test'; import { test, expect } from '@playwright/test'; import process from 'process'; import { SbPage } from './util'; @@ -10,8 +9,8 @@ const templateName = process.env.STORYBOOK_TEMPLATE_NAME; test.describe('Svelte', () => { test.skip( // eslint-disable-next-line jest/valid-title - !templateName?.includes('svelte') || templateName?.includes('-ts'), - 'Only run this test on Svelte with javascript' + !templateName?.includes('svelte'), + 'Only run this test on Svelte' ); test.beforeEach(async ({ page }) => { diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index ddbf5fc5488b..95ed91f74d38 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -52,6 +52,7 @@ "@storybook/svelte": "workspace:*", "@sveltejs/vite-plugin-svelte": "^2.4.2", "magic-string": "^0.30.0", + "svelte-preprocess": "^5.0.4", "sveltedoc-parser": "^4.2.1", "ts-dedent": "^2.2.0" }, diff --git a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts index 6f46d8be1a2e..5dfe00afd766 100644 --- a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts +++ b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts @@ -7,6 +7,7 @@ import type { SvelteParserOptions } from 'sveltedoc-parser'; import { logger } from '@storybook/node-logger'; import { preprocess } from 'svelte/compiler'; import { createFilter } from 'vite'; +import { replace, typescript } from 'svelte-preprocess'; /* * Patch sveltedoc-parser internal options. @@ -60,10 +61,26 @@ function getNameFromFilename(filename: string) { export function svelteDocgen(svelteOptions: Record = {}): PluginOption { const cwd = process.cwd(); - const { preprocess: preprocessOptions, logDocgen = false } = svelteOptions; + const { preprocess: preprocessOptions, docPreprocess, logDocgen = false } = svelteOptions; const include = /\.(svelte)$/; const filter = createFilter(include); + let docPreprocessOptions = docPreprocess; + if (!docPreprocessOptions && preprocessOptions) { + /* + * We can't use vitePreprocess() for the documentation. + * This preprocessor uses esbuild which removes jsdoc. + * + * By default, only typescript is transpiled, and style tags are removed. + * This can be configured with the `docPreprocess` options. + * + * Note: theses preprocessors are only used to make the component + * compatible to sveltedoc-parser (no ts), not to compile + * the component. + */ + docPreprocessOptions = [typescript(), replace([[//gims, '']])]; + } + return { name: 'storybook:svelte-docgen-plugin', async transform(src: string, id: string) { @@ -72,11 +89,11 @@ export function svelteDocgen(svelteOptions: Record = {}): PluginOpt const resource = path.relative(cwd, id); let docOptions; - if (preprocessOptions) { + if (docPreprocessOptions) { // eslint-disable-next-line @typescript-eslint/no-shadow const src = fs.readFileSync(resource).toString(); - const { code: fileContent } = await preprocess(src, preprocessOptions, { + const { code: fileContent } = await preprocess(src, docPreprocessOptions, { filename: resource, }); diff --git a/code/yarn.lock b/code/yarn.lock index 1ab170d5bbc7..13d2baf97661 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -8050,6 +8050,7 @@ __metadata: "@types/node": ^16.0.0 magic-string: ^0.30.0 svelte: ^4.0.0 + svelte-preprocess: ^5.0.4 sveltedoc-parser: ^4.2.1 ts-dedent: ^2.2.0 typescript: ~4.9.3 From a1860c02d5a9991bc4c88f77c23bb7606f9df8b7 Mon Sep 17 00:00:00 2001 From: j3rem1e Date: Wed, 13 Sep 2023 19:20:43 +0200 Subject: [PATCH 010/110] Fix e2e tests --- code/e2e-tests/framework-svelte.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/e2e-tests/framework-svelte.spec.ts b/code/e2e-tests/framework-svelte.spec.ts index 3bf8d5d39abf..d8821bde95cc 100644 --- a/code/e2e-tests/framework-svelte.spec.ts +++ b/code/e2e-tests/framework-svelte.spec.ts @@ -21,7 +21,7 @@ test.describe('Svelte', () => { test('Story have a documentation', async ({ page }) => { const sbPage = new SbPage(page); - sbPage.navigateToStory('example/button', 'docs'); + await sbPage.navigateToStory('example/button', 'docs'); const root = sbPage.previewRoot(); const argsTable = root.locator('.docblock-argstable'); await expect(argsTable).toContainText('Is this the principal call to action on the page'); From 048d7c661320abab820af54ccf601630088524fd Mon Sep 17 00:00:00 2001 From: j3rem1e Date: Thu, 14 Sep 2023 21:10:13 +0200 Subject: [PATCH 011/110] Move e2e tests into ButtonView --- code/e2e-tests/framework-svelte.spec.ts | 4 ++-- code/renderers/svelte/template/cli/js/Button.svelte | 3 +-- .../svelte/template/cli/ts-3-8/Button.svelte | 3 +-- .../svelte/template/cli/ts-4-9/Button.svelte | 3 +-- .../svelte/template/components/Button.svelte | 3 +-- .../renderers/svelte/template/stories/docs.stories.js | 11 +++++++++++ .../svelte/template/stories/views/ButtonView.svelte | 6 +++--- 7 files changed, 20 insertions(+), 13 deletions(-) create mode 100644 code/renderers/svelte/template/stories/docs.stories.js diff --git a/code/e2e-tests/framework-svelte.spec.ts b/code/e2e-tests/framework-svelte.spec.ts index d8821bde95cc..09136254b0f0 100644 --- a/code/e2e-tests/framework-svelte.spec.ts +++ b/code/e2e-tests/framework-svelte.spec.ts @@ -21,9 +21,9 @@ test.describe('Svelte', () => { test('Story have a documentation', async ({ page }) => { const sbPage = new SbPage(page); - await sbPage.navigateToStory('example/button', 'docs'); + await sbPage.navigateToStory('stories/renderers/svelte/docs', 'docs'); const root = sbPage.previewRoot(); const argsTable = root.locator('.docblock-argstable'); - await expect(argsTable).toContainText('Is this the principal call to action on the page'); + await expect(argsTable).toContainText('Rounds the button'); }); }); diff --git a/code/renderers/svelte/template/cli/js/Button.svelte b/code/renderers/svelte/template/cli/js/Button.svelte index de99698d769e..a2a78d9d0d6f 100644 --- a/code/renderers/svelte/template/cli/js/Button.svelte +++ b/code/renderers/svelte/template/cli/js/Button.svelte @@ -24,7 +24,6 @@ $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; $: style = backgroundColor ? `background-color: ${backgroundColor}` : ''; - $: text = label?.toString(); // Test parsing of Elvis Operator diff --git a/code/renderers/svelte/template/cli/ts-3-8/Button.svelte b/code/renderers/svelte/template/cli/ts-3-8/Button.svelte index 977d766f3559..dfc4bbd4c037 100644 --- a/code/renderers/svelte/template/cli/ts-3-8/Button.svelte +++ b/code/renderers/svelte/template/cli/ts-3-8/Button.svelte @@ -22,7 +22,6 @@ $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; $: style = backgroundColor ? `background-color: ${backgroundColor}` : ''; - $: text = label?.toString(); // Test parsing of Elvis Operator diff --git a/code/renderers/svelte/template/cli/ts-4-9/Button.svelte b/code/renderers/svelte/template/cli/ts-4-9/Button.svelte index 0c551e54f84f..f590a0aff55e 100644 --- a/code/renderers/svelte/template/cli/ts-4-9/Button.svelte +++ b/code/renderers/svelte/template/cli/ts-4-9/Button.svelte @@ -22,7 +22,6 @@ $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; $: style = backgroundColor ? `background-color: ${backgroundColor}` : ''; - $: text = label?.toString(); // Test parsing of Elvis Operator diff --git a/code/renderers/svelte/template/components/Button.svelte b/code/renderers/svelte/template/components/Button.svelte index 07f18594ace0..4b80e84b8132 100644 --- a/code/renderers/svelte/template/components/Button.svelte +++ b/code/renderers/svelte/template/components/Button.svelte @@ -24,7 +24,6 @@ $: mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; $: style = backgroundColor ? `background-color: ${backgroundColor}` : ''; - $: text = label?.toString(); // Test parsing of Elvis Operator const dispatch = createEventDispatcher(); @@ -42,5 +41,5 @@ {style} on:click={onClick} > - {text} + {label} diff --git a/code/renderers/svelte/template/stories/docs.stories.js b/code/renderers/svelte/template/stories/docs.stories.js new file mode 100644 index 000000000000..56337bab7303 --- /dev/null +++ b/code/renderers/svelte/template/stories/docs.stories.js @@ -0,0 +1,11 @@ +import ButtonView from './views/ButtonView.svelte'; + +export default { + component: ButtonView, + args: { + primary: true, + }, + tags: ['autodocs'], +}; + +export const Primary = {}; diff --git a/code/renderers/svelte/template/stories/views/ButtonView.svelte b/code/renderers/svelte/template/stories/views/ButtonView.svelte index 201981d8df35..900949a1b8ce 100644 --- a/code/renderers/svelte/template/stories/views/ButtonView.svelte +++ b/code/renderers/svelte/template/stories/views/ButtonView.svelte @@ -1,10 +1,10 @@ - From d3b51fa4efd468c995bfa6d56f16d6f824f6c97f Mon Sep 17 00:00:00 2001 From: j3rem1e Date: Sun, 17 Sep 2023 20:42:01 +0200 Subject: [PATCH 012/110] Remove the possibility to configure doc preprocessors --- code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts index 5dfe00afd766..2c2bccfc3a8e 100644 --- a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts +++ b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts @@ -61,18 +61,17 @@ function getNameFromFilename(filename: string) { export function svelteDocgen(svelteOptions: Record = {}): PluginOption { const cwd = process.cwd(); - const { preprocess: preprocessOptions, docPreprocess, logDocgen = false } = svelteOptions; + const { preprocess: preprocessOptions, logDocgen = false } = svelteOptions; const include = /\.(svelte)$/; const filter = createFilter(include); - let docPreprocessOptions = docPreprocess; - if (!docPreprocessOptions && preprocessOptions) { + let docPreprocessOptions: any = null; + if (preprocessOptions) { /* * We can't use vitePreprocess() for the documentation. * This preprocessor uses esbuild which removes jsdoc. * * By default, only typescript is transpiled, and style tags are removed. - * This can be configured with the `docPreprocess` options. * * Note: theses preprocessors are only used to make the component * compatible to sveltedoc-parser (no ts), not to compile From 70d43ab43aa7aae7125c7b54ed855f638b37eea8 Mon Sep 17 00:00:00 2001 From: j3rem1e Date: Mon, 18 Sep 2023 20:40:54 +0200 Subject: [PATCH 013/110] Ignore type checking of globalThis --- code/renderers/svelte/template/stories/views/ButtonView.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/code/renderers/svelte/template/stories/views/ButtonView.svelte b/code/renderers/svelte/template/stories/views/ButtonView.svelte index 900949a1b8ce..d4bccf149006 100644 --- a/code/renderers/svelte/template/stories/views/ButtonView.svelte +++ b/code/renderers/svelte/template/stories/views/ButtonView.svelte @@ -4,6 +4,7 @@ * @wrapper */ import { global as globalThis } from '@storybook/global'; + // @ts-ignore const Button = globalThis.Components?.Button; /** From 1bfdfb16b657bf2b36e563bd83d5144425f906d0 Mon Sep 17 00:00:00 2001 From: Nate Houk Date: Wed, 20 Sep 2023 06:47:39 +0200 Subject: [PATCH 014/110] Update chromatic-github-action.js.mdx --- docs/snippets/common/chromatic-github-action.js.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/snippets/common/chromatic-github-action.js.mdx b/docs/snippets/common/chromatic-github-action.js.mdx index 8e796479564b..17ba831a0cc2 100644 --- a/docs/snippets/common/chromatic-github-action.js.mdx +++ b/docs/snippets/common/chromatic-github-action.js.mdx @@ -19,8 +19,8 @@ jobs: fetch-depth: 0 - uses: actions/setup-node@v3 with: - node-version: 20 - cache: 'npm' + node-version: 18 + cache: 'yarn' - run: npm ci #๐Ÿ‘‡ Adds Chromatic as a step in the workflow - uses: chromaui/action@v1 From b3674b8c0382af83015724cedf1c86dd6b277314 Mon Sep 17 00:00:00 2001 From: Nate Houk Date: Wed, 20 Sep 2023 06:50:40 +0200 Subject: [PATCH 015/110] Update chromatic-github-action.js.mdx --- docs/snippets/common/chromatic-github-action.js.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/snippets/common/chromatic-github-action.js.mdx b/docs/snippets/common/chromatic-github-action.js.mdx index 17ba831a0cc2..ed13fa937ac1 100644 --- a/docs/snippets/common/chromatic-github-action.js.mdx +++ b/docs/snippets/common/chromatic-github-action.js.mdx @@ -21,7 +21,7 @@ jobs: with: node-version: 18 cache: 'yarn' - - run: npm ci + - run: yarn ci #๐Ÿ‘‡ Adds Chromatic as a step in the workflow - uses: chromaui/action@v1 # Options required for Chromatic's GitHub Action From cc55c3d5bf2e0417469e8aeb68b2d302cf66c5fe Mon Sep 17 00:00:00 2001 From: Atreay Kukanur <66585295+ATREAY@users.noreply.github.com> Date: Mon, 25 Sep 2023 03:51:46 +0000 Subject: [PATCH 016/110] added info about emit() function --- docs/essentials/highlight.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/docs/essentials/highlight.md b/docs/essentials/highlight.md index c1f8222a9885..5d59649214ae 100644 --- a/docs/essentials/highlight.md +++ b/docs/essentials/highlight.md @@ -71,3 +71,10 @@ By default, the addon applies a standard style to the highlighted elements you'v /> + + +
+ +๐Ÿ“š In all three provided code snippets, the "emit" function comes from the `useChannel` hook, which is imported from the `@storybook/preview-api` package. This `useChannel` hook is used to create a communication channel for sending and receiving messages within the code. The "emit" function obtained from `useChannel` is then used to send messages with specific event types, such as `HIGHLIGHT` or `RESET_HIGHLIGHT`, to control or customize the behavior in the code. + +
\ No newline at end of file From e1af53ad3c161d51bc1d9d86705856578330eb1d Mon Sep 17 00:00:00 2001 From: Iran Date: Tue, 3 Oct 2023 14:44:04 -0300 Subject: [PATCH 017/110] Remove file URL examples from storyshots-puppetteer docs --- code/addons/storyshots-puppeteer/README.md | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/code/addons/storyshots-puppeteer/README.md b/code/addons/storyshots-puppeteer/README.md index 2175c1d436d4..de7d4d801326 100644 --- a/code/addons/storyshots-puppeteer/README.md +++ b/code/addons/storyshots-puppeteer/README.md @@ -19,7 +19,7 @@ When running Puppeteer tests for your stories, you have two options: - Have a storybook running (ie. accessible via http(s), for instance using `npm run storybook`) - Have a static build of the storybook (for instance, using `npm run build-storybook`) -Then you will need to reference the storybook URL (`file://...` if local, `http(s)://...` if served) +Then you will need to reference the storybook URL (`http(s)://...`) ## _puppeteerTest_ @@ -72,21 +72,6 @@ initStoryshots({ The above config will use __ for tests. You can also use query parameters in your URL (e.g. for setting a different background for your storyshots, if you use `@storybook/addon-backgrounds`). -You may also use a local static build of storybook if you do not want to run the webpack dev-server: - -```js -import initStoryshots from '@storybook/addon-storyshots'; -import { puppeteerTest } from '@storybook/addon-storyshots-puppeteer'; - -initStoryshots({ - suite: 'Puppeteer storyshots', - test: puppeteerTest({ - storybookUrl: 'file:///path/to/my/storybook-static', - // storybookUrl: 'file://${path.resolve(__dirname, '../storybook-static')}' - }), -}); -``` - ### Specifying options to _goto()_ (Puppeteer API) You might use `getGotoOptions` to specify options when the storybook is navigating to a story (using the `goto` method). Will be passed to [Puppeteer .goto() fn](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagegotourl-options) From 75e585de951932b1178af510f57c05be9612127a Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 5 Oct 2023 14:04:09 +0200 Subject: [PATCH 018/110] Revert "Merge pull request #24379 from storybookjs/revert-24106-release-stable-to-latest" This reverts commit f4e13cd94a80259d7c58ca948e10693462955715, reversing changes made to 33e564e163ecb4018a16f15fd897cb9365eed6f7. --- ...ease.yml => prepare-non-patch-release.yml} | 29 +++- .github/workflows/prepare-patch-release.yml | 11 +- .github/workflows/publish.yml | 33 ++-- CONTRIBUTING/RELEASING.md | 164 +++++++++--------- scripts/package.json | 3 + .../__tests__/cancel-preparation-runs.test.ts | 107 ++++++++++++ .../__tests__/ensure-next-ahead.test.ts | 85 +++++++++ .../__tests__/generate-pr-description.test.ts | 10 +- .../release/__tests__/is-pr-frozen.test.ts | 12 +- .../release/__tests__/label-patches.test.ts | 1 + scripts/release/cancel-preparation-runs.ts | 107 ++++++++++++ scripts/release/ensure-next-ahead.ts | 101 +++++++++++ scripts/release/generate-pr-description.ts | 11 +- scripts/release/is-pr-frozen.ts | 12 +- scripts/release/pick-patches.ts | 1 + scripts/release/utils/get-changes.ts | 2 +- scripts/release/utils/get-github-info.ts | 13 +- scripts/release/utils/github-client.ts | 9 + scripts/yarn.lock | 52 ++++++ 19 files changed, 648 insertions(+), 115 deletions(-) rename .github/workflows/{prepare-prerelease.yml => prepare-non-patch-release.yml} (81%) create mode 100644 scripts/release/__tests__/cancel-preparation-runs.test.ts create mode 100644 scripts/release/__tests__/ensure-next-ahead.test.ts create mode 100644 scripts/release/cancel-preparation-runs.ts create mode 100644 scripts/release/ensure-next-ahead.ts diff --git a/.github/workflows/prepare-prerelease.yml b/.github/workflows/prepare-non-patch-release.yml similarity index 81% rename from .github/workflows/prepare-prerelease.yml rename to .github/workflows/prepare-non-patch-release.yml index e68a7e1ef63a..ea72d924d918 100644 --- a/.github/workflows/prepare-prerelease.yml +++ b/.github/workflows/prepare-non-patch-release.yml @@ -34,7 +34,7 @@ concurrency: cancel-in-progress: true jobs: - prepare-prerelease-pull-request: + prepare-non-patch-pull-request: name: Prepare prerelease pull request runs-on: ubuntu-latest environment: release @@ -112,21 +112,35 @@ jobs: run: | yarn release:version --deferred --release-type ${{ inputs.release-type || 'prerelease' }} ${{ inputs.pre-id && format('{0} {1}', '--pre-id', inputs.pre-id) || '' }} --verbose + - name: Check release vs prerelease + id: is-prerelease + run: yarn release:is-prerelease ${{ steps.bump-version.outputs.next-version }} + - name: Write changelog env: GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} run: | yarn release:write-changelog ${{ steps.bump-version.outputs.next-version }} --verbose - - name: 'Commit changes to branch: version-prerelease-from-${{ steps.bump-version.outputs.current-version }}' + - name: 'Commit changes to branch: version-non-patch-from-${{ steps.bump-version.outputs.current-version }}' working-directory: . run: | git config --global user.name 'storybook-bot' git config --global user.email '32066757+storybook-bot@users.noreply.github.com' - git checkout -b version-prerelease-from-${{ steps.bump-version.outputs.current-version }} + git checkout -b version-non-patch-from-${{ steps.bump-version.outputs.current-version }} + git add . + git commit -m "Write changelog for ${{ steps.bump-version.outputs.next-version }} [skip ci]" || true + git push --force origin version-non-patch-from-${{ steps.bump-version.outputs.current-version }} + + - name: Resolve merge-conflicts with base branch + if: steps.is-prerelease.outputs.prerelease == 'true' + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + run: | + git pull origin latest-release + git checkout --ours . git add . - git commit -m "Write changelog for ${{ steps.bump-version.outputs.next-version }}" || true - git push --force origin version-prerelease-from-${{ steps.bump-version.outputs.current-version }} + git commit -m "Merge latest-release into version-non-patch-from-${{ steps.bump-version.outputs.current-version }} with conflicts resolved to ours [skip ci]" - name: Generate PR description id: description @@ -144,14 +158,15 @@ jobs: gh pr edit \ --repo "${{github.repository }}" \ --title "Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \ + --base ${{ steps.is-prerelease.outputs.prerelease == 'true' && 'next-release' || 'latest-release' }} \ --body "${{ steps.description.outputs.description }}" else gh pr create \ --repo "${{github.repository }}"\ --title "Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \ --label "release" \ - --base next-release \ - --head version-prerelease-from-${{ steps.bump-version.outputs.current-version }} \ + --base ${{ steps.is-prerelease.outputs.prerelease == 'true' && 'next-release' || 'latest-release' }} \ + --head version-non-patch-from-${{ steps.bump-version.outputs.current-version }} \ --body "${{ steps.description.outputs.description }}" fi diff --git a/.github/workflows/prepare-patch-release.yml b/.github/workflows/prepare-patch-release.yml index e4f8e38df502..5cdc1ba44fcf 100644 --- a/.github/workflows/prepare-patch-release.yml +++ b/.github/workflows/prepare-patch-release.yml @@ -88,6 +88,15 @@ jobs: git config --global user.email '32066757+storybook-bot@users.noreply.github.com' yarn release:pick-patches + - name: Cancel when no patches to pick + if: steps.pick-patches.outputs.pr-count == '0' && steps.pick-patches.outputs.pr-count != null + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + # From https://stackoverflow.com/a/75809743 + run: | + gh run cancel ${{ github.run_id }} + gh run watch ${{ github.run_id }} + - name: Bump version deferred id: bump-version if: steps.unreleased-changes.outputs.has-changes-to-release == 'true' @@ -121,7 +130,7 @@ jobs: git config --global user.email '32066757+storybook-bot@users.noreply.github.com' git checkout -b version-patch-from-${{ steps.versions.outputs.current }} git add . - git commit -m "Write changelog for ${{ steps.versions.outputs.next }}" || true + git commit -m "Write changelog for ${{ steps.versions.outputs.next }} [skip ci]" || true git push --force origin version-patch-from-${{ steps.versions.outputs.current }} - name: Generate PR description diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index 863b4e9ae7e2..df82ca33c9a5 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -5,7 +5,7 @@ on: push: branches: - latest-release - - next-release + - non-patch-release env: PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1 @@ -36,6 +36,11 @@ jobs: gh run cancel ${{ github.run_id }} gh run watch ${{ github.run_id }} + - name: Cancel all release preparation runs + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + run: yarn release:cancel-preparation-runs + - name: Checkout ${{ github.ref_name }} uses: actions/checkout@v3 with: @@ -63,7 +68,6 @@ jobs: yarn install - name: Apply deferred version bump and commit - id: version-bump working-directory: . run: | CURRENT_VERSION=$(cat ./code/package.json | jq '.version') @@ -122,12 +126,11 @@ jobs: run: git fetch --tags origin # when this is a patch release from main, label any patch PRs included in the release - # when this is a stable release from next, label ALL patch PRs found, as they will per definition be "patched" now - name: Label patch PRs as picked - if: github.ref_name == 'latest-release' || (steps.publish-needed.outputs.published == 'false' && steps.target.outputs.target == 'next' && !steps.is-prerelease.outputs.prerelease) + if: github.ref_name == 'latest-release' env: GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} - run: yarn release:label-patches ${{ steps.target.outputs.target == 'next' && '--all' || '' }} + run: yarn release:label-patches - name: Create GitHub Release if: steps.publish-needed.outputs.published == 'false' @@ -151,8 +154,20 @@ jobs: git merge ${{ github.ref_name }} git push origin ${{ steps.target.outputs.target }} + - name: Ensure `next` is a minor version ahead of `main` + if: steps.target.outputs.target == 'main' + run: | + git checkout next + git pull + + yarn release:ensure-next-ahead --main-version "${{ steps.version.outputs.current-version }}" + + git add .. + git commit -m "Bump next to be one minor ahead of main [skip ci]" + git push origin next + - name: Sync CHANGELOG.md from `main` to `next` - if: github.ref_name == 'latest-release' + if: steps.target.outputs.target == 'main' working-directory: . run: | git fetch origin next @@ -160,7 +175,7 @@ jobs: git pull git checkout origin/main ./CHANGELOG.md git add ./CHANGELOG.md - git commit -m "Update CHANGELOG.md for v${{ steps.version.outputs.current-version }} [skip ci]" + git commit -m "Update CHANGELOG.md for v${{ steps.version.outputs.current-version }} [skip ci]" || true git push origin next - name: Sync version JSONs from `next-release` to `main` @@ -176,10 +191,6 @@ jobs: git commit -m "Update $VERSION_FILE for v${{ steps.version.outputs.current-version }}" git push origin main - - name: Overwrite main with next - if: steps.target.outputs.target == 'next' && steps.is-prerelease.outputs.prerelease == 'false' - run: git push --force origin next:main - - name: Report job failure to Discord if: failure() env: diff --git a/CONTRIBUTING/RELEASING.md b/CONTRIBUTING/RELEASING.md index 0997b757b6ea..e92fa8fa36a3 100644 --- a/CONTRIBUTING/RELEASING.md +++ b/CONTRIBUTING/RELEASING.md @@ -8,8 +8,8 @@ - [Introduction](#introduction) - [Branches](#branches) - [Release Pull Requests](#release-pull-requests) - - [Prereleases](#prereleases) - [Patch Releases](#patch-releases) + - [Non-patch Releases](#non-patch-releases) - [Publishing](#publishing) - [๐Ÿ‘‰ How to Release](#-how-to-release) - [1. Find the Prepared Pull Request](#1-find-the-prepared-pull-request) @@ -21,6 +21,8 @@ - [7. See the "Publish" Workflow Finish](#7-see-the-publish-workflow-finish) - [Releasing Locally in an Emergency ๐Ÿšจ](#releasing-locally-in-an-emergency-) - [Canary Releases](#canary-releases) + - [With GitHub UI](#with-github-ui) + - [With the CLI](#with-the-cli) - [Versioning Scenarios](#versioning-scenarios) - [Prereleases - `7.1.0-alpha.12` -\> `7.1.0-alpha.13`](#prereleases---710-alpha12---710-alpha13) - [Prerelease promotions - `7.1.0-alpha.13` -\> `7.1.0-beta.0`](#prerelease-promotions---710-alpha13---710-beta0) @@ -31,7 +33,7 @@ - [Prerelease of upcoming patch release - `7.0.20` -\> `7.0.21-alpha.0`](#prerelease-of-upcoming-patch-release---7020---7021-alpha0) - [Merges to `main` without versioning](#merges-to-main-without-versioning) - [FAQ](#faq) - - [When should I use the "patch" label?](#when-should-i-use-the-patch-label) + - [When should I use the "patch:yes" label?](#when-should-i-use-the-patchyes-label) - [How do I make changes to the release tooling/process?](#how-do-i-make-changes-to-the-release-toolingprocess) - [Why do I need to re-trigger workflows to update the changelog?](#why-do-i-need-to-re-trigger-workflows-to-update-the-changelog) - [Which combination of inputs creates the version bump I need?](#which-combination-of-inputs-creates-the-version-bump-i-need) @@ -43,19 +45,19 @@ This document explains the release process for the Storybook monorepo. There are two types: -1. Prereleases and major/minor releases - releasing any content that is on the `next` branch +1. Non-patch releases - releasing any content that is on the `next` branch, either prereleases or stable releases 2. Patch releases - picking any content from `next` to `main`, that needs to be patched back to the current stable minor release The release process is based on automatically created "Release Pull Requests", that when merged will trigger a new version to be released. A designated Releaser -- which may rotate between core team members -- will go through the release process in the current Release PR. This process is implemented with NodeJS scripts in [`scripts/release`](../scripts/release/) and three GitHub Actions workflows: -- [Prepare Prerelease PR](../.github/workflows/prepare-prerelease.yml) -- [Prepare Patch PR](../.github/workflows/prepare-patch-release.yml) +- [Prepare `next` PR](../.github/workflows/prepare-non-patch-release.yml) +- [Prepare patch PR](../.github/workflows/prepare-patch-release.yml) - [Publish](../.github/workflows/publish.yml) > **Note** -> This document distinguishes between **patch** releases and **prereleases**. This is a simplification; stable major and minor releases work the same way as prereleases. The distinction reflects the difference between patching an existing minor version on `main` or releasing a new minor/major/prerelease from `next`. +> This document distinguishes between **patch** and **non-patch** releases. The distinction reflects the difference between patching an existing minor version on `main` or releasing a new minor/major/prerelease from `next`. ### Branches @@ -101,7 +103,7 @@ Two GitHub Actions workflows automatically create release pull requests, one for The high-level flow is: 1. When a PR is merged to `next` (or a commit is pushed), both release pull requests are (re)generated. -2. They create a new branch - `version-(patch|prerelease)-from-`. +2. They create a new branch - `version-(patch|non-patch)-from-`. 3. They calculate which version to bump to according to the version strategy. 4. They update `CHANGELOG(.prerelease).md` with all changes detected. 5. They commit everything. @@ -115,62 +117,20 @@ A few key points to note in this flow: - The changelogs are committed during the preparation, but the packages are not version bumped and not published until later. - The release pull requests don't target their working branches (`next` and `main`), but rather `next-release` and `latest-release`. -### Prereleases - -> **Note** -> Workflow: [`prepare-prerelease.yml`](../.github/workflows/prepare-prerelease.yml) - -Prereleases are prepared with all content from the `next` branch. The changelog is generated by examining the git history, and looking up all the commits and pull requests between the current prerelease (on `next-release`) and `HEAD` of `next`. - -The default versioning strategy is to increase the current prerelease number, as described in [Prereleases - `7.1.0-alpha.12` -> `7.1.0-alpha.13`](#prereleases---710-alpha12---710-alpha13). If there is no prerelease number (i.e., we just released a new stable minor/major version), it will add one to a patch bump, so it would go from `7.2.0` to `7.2.1-0` by default. - -Prerelease PRs are only created if there are actual changes to release. Content labeled with "build" or "documentation" is [not considered "releasable"](#which-changes-are-considered-releasable-and-what-does-it-mean) and is not user-facing, so it doesn't make sense to create a release. This is explained in more detail in [Why are no release PRs being prepared?](#why-are-no-release-prs-being-prepared). - -The preparation workflow will create a new branch from `next`, called `version-prerelease-from-`, and open a pull request targeting `next-release`. When the Releaser merges it, the [publish workflow](#publishing) will merge `next-release` into `next`. - -Here's an example of a workflow where a feature and a bugfix have been created and then released to a new `7.1.0-alpha.29` version. All the commits highlighted with square dots are the ones that will be considered when generating the changelog. - -```mermaid -%%{init: { 'gitGraph': { 'mainBranchName': 'next' } } }%% -gitGraph - commit - branch next-release - commit tag: "7.1.0-alpha.28" - checkout next - merge next-release - commit type: HIGHLIGHT id: "direct commit" - branch new-feature - commit - commit - checkout next - merge new-feature type: HIGHLIGHT - branch some-bugfix - commit - checkout next - merge some-bugfix type: HIGHLIGHT - branch version-prerelease-from-7.1.0-alpha.28 - commit id: "write changelog" - checkout next-release - merge version-prerelease-from-7.1.0-alpha.28 - commit id: "bump versions" tag: "7.1.0-alpha.29" - checkout next - merge next-release -``` - ### Patch Releases > **Note** > Workflow: [`prepare-patch-release.yml`](../.github/workflows/prepare-patch-release.yml) -Patch releases are created by [cherry-picking](https://www.atlassian.com/git/tutorials/cherry-pick) any merged, unreleased pull requests that have the "**patch**" label applied to the `next` branch. The merge commit of said pull requests are cherry-picked. +Patch releases are created by [cherry-picking](https://www.atlassian.com/git/tutorials/cherry-pick) any merged, unreleased pull requests that have the "**patch:yes**" label applied to the `next` branch. The merge commit of said pull requests are cherry-picked. -Sometimes it is desired to pick pull requests back to `main` even if they are not considered "releasable". Unlike prerelease preparation, patch releases will not be canceled if the content is not releasable. It might not make sense to create a new patch release if the changes are only for documentation and/or internal build systems. However, getting the changes back to `main` is the only way to deploy the documentation to the production docs site. You may also want to cherry-pick changes to internal CI to fix issues. These are valid scenarios where you want to cherry-pick the changes without being blocked on "releasable" content. In these cases, where all cherry picks are non-releasable, the preparation workflow creates a "merging" pull request instead of a "releasing" pull request. This pull request does not bump versions or update changelogs; it just cherry-picks the changes and allows you to merge them into `latest-release` -> `main`. +Sometimes it is desired to pick pull requests back to `main` even if they are not considered "releasable". Unlike non-patch-release preparation, patch releases will not be canceled if the content is not releasable. It might not make sense to create a new patch release if the changes are only for documentation and/or internal build systems. However, getting the changes back to `main` is the only way to deploy the documentation to the production docs site. You may also want to cherry-pick changes to internal CI to fix issues. These are valid scenarios where you want to cherry-pick the changes without being blocked on "releasable" content. In these cases, where all cherry picks are non-releasable, the preparation workflow creates a "merging" pull request instead of a "releasing" pull request. This pull request does not bump versions or update changelogs; it just cherry-picks the changes and allows you to merge them into `latest-release` -> `main`. The preparation workflow sequentially cherry-picks each patch pull request to its branch. If this cherry-picking fails due to conflicts or other reasons, it is ignored and the next pull request is processed. All failing cherry-picks are listed in the release pull request's description, for the Releaser to manually cherry-pick during the release process. This problem occurs more often when `main` and `next` diverge, i.e. the longer it has been since a stable major/minor release. -Similar to the prerelease flow, the preparation workflow for patches will create a new branch from `main` called `version-patch-from-`, and open a pull request that targets `latest-release`. When the pull request is merged by the Releaser, the [publish workflow](#publishing) will eventually merge `latest-release` into `main`. +Similar to the non-patch-release flow, the preparation workflow for patches will create a new branch from `main` called `version-patch-from-`, and open a pull request that targets `latest-release`. When the pull request is merged by the Releaser, the [publish workflow](#publishing) will eventually merge `latest-release` into `main`. -Here is an example of a workflow where a feature and two bug fixes have been merged to `next`. Only the bug fixes have the "**patch**" label, so only those two go into the new `7.0.19` release. Note that it is the merge commits to `next` that are cherry-picked, not the commits on the bugfix branches. +Here is an example of a workflow where a feature and two bug fixes have been merged to `next`. Only the bug fixes have the "**patch:yes**" label, so only those two go into the new `7.0.19` release. Note that it is the merge commits to `next` that are cherry-picked, not the commits on the bugfix branches. ```mermaid gitGraph @@ -208,21 +168,62 @@ gitGraph merge latest-release ``` +### Non-patch Releases + +> **Note** +> Workflow: [`prepare-non-patch-release.yml`](../.github/workflows/prepare-non-patch-release.yml) + +Non-patch-releases are prepared with all content from the `next` branch. The changelog is generated by examining the git history, and looking up all the commits and pull requests between the current prerelease (on `next-release`) and `HEAD` of `next`. + +The default versioning strategy is to increase the current prerelease number, as described in [Prereleases - `7.1.0-alpha.12` -> `7.1.0-alpha.13`](#prereleases---710-alpha12---710-alpha13). If there is no prerelease number (i.e., we just released a new stable minor/major version), it will add one to a patch bump, so it would go from `7.2.0` to `7.2.1-0` by default. + +`next`-PRs are only created if there are actual changes to release. Content labeled with "build" or "documentation" is [not considered "releasable"](#which-changes-are-considered-releasable-and-what-does-it-mean) and is not user-facing, so it doesn't make sense to create a release. This is explained in more detail in [Why are no release PRs being prepared?](#why-are-no-release-prs-being-prepared). + +The preparation workflow will create a new branch from `next`, called `version-non-patch-from-`, and open a pull request targeting `next-release`. When the Releaser merges it, the [publish workflow](#publishing) will merge `next-release` into `next`. + +Here's an example of a workflow where a feature and a bugfix have been created and then released to a new `7.1.0-alpha.29` version. All the commits highlighted with square dots are the ones that will be considered when generating the changelog. + +```mermaid +%%{init: { 'gitGraph': { 'mainBranchName': 'next' } } }%% +gitGraph + commit + branch next-release + commit tag: "7.1.0-alpha.28" + checkout next + merge next-release + commit type: HIGHLIGHT id: "direct commit" + branch new-feature + commit + commit + checkout next + merge new-feature type: HIGHLIGHT + branch some-bugfix + commit + checkout next + merge some-bugfix type: HIGHLIGHT + branch version-non-patch-from-7.1.0-alpha.28 + commit id: "write changelog" + checkout next-release + merge version-non-patch-from-7.1.0-alpha.28 + commit id: "bump versions" tag: "7.1.0-alpha.29" + checkout next + merge next-release +``` + ### Publishing > **Note** > Workflow: [`publish.yml`](../.github/workflows/publish.yml) -When either a prerelease or a patch release branch is merged into `main` or `next-release`, the publishing workflow is triggered. This workflow performs the following tasks: +When either a non-patch-release or a patch release branch is merged into `latest-release` or `next-release`, the publishing workflow is triggered. This workflow performs the following tasks: 1. Bump versions of all packages according to the plan from the prepared PRs 2. Install dependencies and build all packages. 3. Publish packages to npm. -4. (If this is a patch release, add the "**picked**" label to all relevant pull requests.) +4. (If this is a patch release, add the "**patch:done**" label to all relevant pull requests.) 5. Create a new GitHub Release, including a version tag in the release branch (`latest-release` or `next-release`). 6. Merge the release branch into the core branch (`main` or `next`). 7. (If this is a patch release, copy the `CHANGELOG.md` changes from `main` to `next`.) -8. (If this is [a promotion from a prerelease to a stable release](#minormajor-releases---710-rc2---710-or-800-rc3---800), force push `next` to `main`.) The publish workflow runs in the "release" GitHub environment, which has the npm token required to publish packages to the `@storybook` npm organization. For security reasons, this environment can only be accessed from the four "core" branches: `main`, `next`, `latest-release` and `next-release`. @@ -244,7 +245,7 @@ The high-level workflow for a Releaser is: Look for the release pull request that has been prepared for the type of release you're about to release: -- "Release: Prerelease ``" for prereleases +- "Release: Prerelease|Minor|Major ``" for releases from `next` - "Release: Patch ``" for patch releases - "Release: Merge patches to `main` (without version bump)" for patches without releases @@ -266,7 +267,7 @@ It is important to verify that the release includes the right content. Key eleme For example, check if it's a breaking change that isn't allowed in a minor prerelease, or if it's a new feature in a patch release. If it's not suitable, revert the pull request and notify the author. -Sometimes when doing a patch release, a pull request can have the "patch" label but you don't want that change to be part of this release. Maybe you're not confident in the change, or you require more input from maintainers before releasing it. In those situations you should remove the "patch" label from the pull request and follow through with the release (make sure to re-trigger the workflow). When the release is done, add the patch label back again, so it will be part of the next release. +Sometimes when doing a patch release, a pull request can have the "patch:yes" label but you don't want that change to be part of this release. Maybe you're not confident in the change, or you require more input from maintainers before releasing it. In those situations you should remove the "patch:yes" label from the pull request and follow through with the release (make sure to re-trigger the workflow). When the release is done, add the "patch:yes" label back again, so it will be part of the next release. 2. Is the pull request title correct? @@ -300,12 +301,12 @@ When triggering the workflows, always choose the `next` branch as the base, unle The workflows can be triggered here: -- [Prepare prerelease PR](https://github.com/storybookjs/storybook/actions/workflows/prepare-prerelease.yml) +- [Prepare next PR](https://github.com/storybookjs/storybook/actions/workflows/prepare-non-patch-release.yml) - [Prepare patch PR](https://github.com/storybookjs/storybook/actions/workflows/prepare-patch-release.yml) -Crucially for prereleases, this is also where you change the versioning strategy if you need something else than the default as described in [Preparing - Prereleases](#prereleases). When triggering the prerelease workflow manually, you can optionally add inputs: +Crucially for prereleases, this is also where you change the versioning strategy if you need something else than the default as described in [Preparing - Non-patch Releases](#non-patch-releases). When triggering the prerelease workflow manually, you can optionally add inputs: -![Screenshot of triggering the prerelease workflow in GitHub Actions, with a form that shows a release type selector and a prerelease identifier text field](prerelease-workflow-inputs.png) +![Screenshot of triggering the non-patch-release workflow in GitHub Actions, with a form that shows a release type selector and a prerelease identifier text field](prerelease-workflow-inputs.png) See [Versioning Scenarios](#versioning-scenarios) for a description of each version bump scenario, how to activate it and what it does, and [Which combination of inputs creates the version bump I need?](#which-combination-of-inputs-creates-the-version-bump-i-need) for a detailed description of the workflow inputs. @@ -339,7 +340,7 @@ You can inspect the workflows to see what they are running and copy that, but he Before you start you should make sure that your working tree is clean and the repository is in a clean state by running `git clean -xdf`. -1. Create a new branch from either `next` (prereleases) or `main` (patches) +1. Create a new branch from either `next` or `main` (patches) 2. Get all tags: `git fetch --tags origin` 3. Install dependencies: `yarn task --task=install --start-from=install` 4. `cd scripts` @@ -375,7 +376,7 @@ Before you start you should make sure that your working tree is clean and the re 4. `git add ./CHANGELOG.md` 5. `git commit -m "Update CHANGELOG.md for v"` 6. `git push origin` -19. (If prerelease) Sync `versions/next.json` from `next` to `main` +19. (If non-patch-release) Sync `versions/next.json` from `next` to `main` 1. `git checkout main` 2. `git pull` 3. `git checkout origin/next ./docs/versions/next.json` @@ -434,7 +435,7 @@ There are multiple types of releases that use the same principles, but are done ### Prereleases - `7.1.0-alpha.12` -> `7.1.0-alpha.13` -This is the default strategy for prereleases, there's nothing special needed to trigger this scenario. +This is the default strategy for Non-patch releases, there's nothing special needed to trigger this scenario. ### Prerelease promotions - `7.1.0-alpha.13` -> `7.1.0-beta.0` @@ -445,14 +446,12 @@ To promote a prerelease to a new prerelease ID, during the [Re-trigger the Workf ### Minor/major releases - `7.1.0-rc.2` -> `7.1.0` or `8.0.0-rc.3` -> `8.0.0` -To promote a prerelease to a new prerelease ID, during the [Re-trigger the Workflow](#4-re-trigger-the-workflow) step, choose: +To promote a prerelease to a stable reelase, during the [Re-trigger the Workflow](#4-re-trigger-the-workflow) step, choose: -- Release type: Patch +- Release type: Patch, Minor or Major - Prerelease ID: Leave empty -The "Patch" release type ensures the current prerelease version gets promoted to a stable version without any major/minor/patch bumps. - -This scenario is special as it turns the `next` branch into a stable branch (until the next prerelease). Therefore, this will also force push `next` to `main`, to ensure that `main` contains the latest stable release. Consequently, the history for `main` is lost. +This scenario is special as it will target `latest-release` instead of `next-release`, and thus merge into `main` when done, and not `next`. So it goes `next` -> `version-non-patch-from-` -> `latest-release` -> `main`. ### First prerelease of new major/minor - `7.1.0` -> `7.2.0-alpha.0` or `8.0.0-alpha.0` @@ -481,13 +480,13 @@ As described in more details in [the Patch Releases section](#patch-releases), t ## FAQ -### When should I use the "patch" label? +### When should I use the "patch:yes" label? -Not all pull requests need to be patched back to the stable release, which is why only those with the **"patch"** label gets that treatment. But how do you decide whether or not a give pull requests should have that label? +Not all pull requests need to be patched back to the stable release, which is why only those with the **"patch:yes"** label gets that treatment. But how do you decide whether or not a give pull requests should have that label? -First of all, patches are only for fixes and minor improvements, and not completely new features. A pull request that introduces a new feature shouldn't be patched back to the stable release. +First of all, patches are only for important and time-sensitive fixes, and not minor improvements or completely new features. A pull request that introduces a new feature shouldn't be patched back to the stable release. -Second, any destabilizing changes shouldn't be patched back either. Breaking changes are reserved for major releases, but changes can be destabilizing without being strictly breaking, and those shouldn't be patched back either. An example is moving the settings panel in the manager to a completely different place, but with the same functionality. Many wouldn't consider this breaking because no usage will stop working because of this, but it can be considered a destabilizing change because user behavior have to change as a result of this. +Second, PRs that changes the code in a big architectural way should ideally not be patched back either, because that makes merge conflicts more likely in the future. When in doubt ask the core team for their input. @@ -497,12 +496,15 @@ The whole process is based on [GitHub Action workflows](../.github/workflows/) a The short answer to "how", is to make changes as a regular pull request that is also patched back to `main`. -There's a longer answer too, but it's pretty confusing: +
+ There's a longer answer too, but it's pretty confusing The scripts run from either `main` or `next`, so if you're changing a release script, you must patch it back to `main` for it to have an effect on patch releases. If you need the change to take effect immediately, you must manually cherry pick it to `main`. For workflow file changes, they usually run from `next`, but patching them back is recommended for consistency. The "publish" workflow runs from `latest-release` and `next-release`, so you should always patch changes back for _that_. ๐Ÿ™ƒ +
+ ### Why do I need to re-trigger workflows to update the changelog? Changes to pull requests' titles, labels or even reverts won't be reflected in the release pull request. This is because the workflow only triggers on pushes to `next`, not when pull request meta data is changed. @@ -536,7 +538,7 @@ If a pull request does not have any of the above labels at the time of release, This is most likely because `next` only contains [unreleasable changes](#which-changes-are-considered-releasable-and-what-does-it-mean), which causes the preparation workflow to cancel itself. That's because it doesn't make sense to prepare a new release if all the changes are unreleasable, as that wouldn't bump the version nor write a new changelog entry, so "releasing" it would just merge it back to `next` without any differences. -You can always see the workflows and if they have been cancelled [here for prereleases](https://github.com/storybookjs/storybook/actions/workflows/prepare-prerelease.yml) and [here for patch releases](https://github.com/storybookjs/storybook/actions/workflows/prepare-patch-release.yml). +You can always see the workflows and if they have been cancelled [here for non-patch releases](https://github.com/storybookjs/storybook/actions/workflows/prepare-non-patch-release.yml) and [here for patch releases](https://github.com/storybookjs/storybook/actions/workflows/prepare-patch-release.yml). ### Why do we need separate release branches? @@ -558,11 +560,11 @@ gitGraph branch some-simultaneous-bugfix commit checkout next - branch version-prerelease-from-7.1.0-alpha.28 + branch version-non-patch-from-7.1.0-alpha.28 commit id checkout next merge some-simultaneous-bugfix type: HIGHLIGHT id: "whoops!" - merge version-prerelease-from-7.1.0-alpha.28 tag: "v7.1.0-alpha.29" + merge version-non-patch-from-7.1.0-alpha.28 tag: "v7.1.0-alpha.29" ``` When publishing at the last commit with tag `v7.1.0-alpha.29`, it will publish whatever the content is at that point (all the square dots), which includes the "whoops!" commit from merging the bugfix. But the bugfix was never part of the release pull request because it got prepared before the bugfix was merged in. @@ -582,19 +584,19 @@ gitGraph branch some-simultanous-bugfix commit checkout next - branch version-prerelease-from-7.1.0-alpha.28 + branch version-non-patch-from-7.1.0-alpha.28 commit id: "write changelog" checkout next merge some-simultanous-bugfix id: "whoops!" checkout next-release - merge version-prerelease-from-7.1.0-alpha.28 + merge version-non-patch-from-7.1.0-alpha.28 commit id: "bump versions" tag: "v7.1.0-alpha.29" checkout next merge next-release - branch version-prerelease-from-7.1.0-alpha.29 + branch version-non-patch-from-7.1.0-alpha.29 commit id: "write changelog again" checkout next-release - merge version-prerelease-from-7.1.0-alpha.29 + merge version-non-patch-from-7.1.0-alpha.29 commit id: "bump versions again" tag: "v7.1.0-alpha.30" checkout next merge next-release diff --git a/scripts/package.json b/scripts/package.json index 8a1ace601a4d..f220b8f88742 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -13,6 +13,8 @@ "lint:js:cmd": "cross-env NODE_ENV=production eslint --cache --cache-location=../.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives", "lint:package": "sort-package-json", "migrate-docs": "node --require esbuild-register ./ts-to-ts49.ts", + "release:cancel-preparation-runs": "ts-node --swc ./release/cancel-preparation-runs.ts", + "release:ensure-next-ahead": "ts-node --swc ./release/ensure-next-ahead.ts", "release:generate-pr-description": "ts-node --swc ./release/generate-pr-description.ts", "release:get-changelog-from-file": "ts-node --swc ./release/get-changelog-from-file.ts", "release:get-current-version": "ts-node --swc ./release/get-current-version.ts", @@ -73,6 +75,7 @@ "@jest/globals": "^29.3.1", "@nx/workspace": "16.2.1", "@octokit/graphql": "^5.0.5", + "@octokit/request": "^8.1.2", "@storybook/eslint-config-storybook": "^3.1.2", "@storybook/jest": "next", "@storybook/linter-config": "^3.1.2", diff --git a/scripts/release/__tests__/cancel-preparation-runs.test.ts b/scripts/release/__tests__/cancel-preparation-runs.test.ts new file mode 100644 index 000000000000..aaf8cdbec718 --- /dev/null +++ b/scripts/release/__tests__/cancel-preparation-runs.test.ts @@ -0,0 +1,107 @@ +/* eslint-disable global-require */ +/* eslint-disable no-underscore-dangle */ +import { + PREPARE_NON_PATCH_WORKFLOW_PATH, + PREPARE_PATCH_WORKFLOW_PATH, + run as cancelPreparationWorkflows, +} from '../cancel-preparation-runs'; +import * as github_ from '../utils/github-client'; + +jest.mock('../utils/github-client'); + +const github = jest.mocked(github_); + +jest.spyOn(console, 'log').mockImplementation(() => {}); +jest.spyOn(console, 'warn').mockImplementation(() => {}); +jest.spyOn(console, 'error').mockImplementation(() => {}); + +describe('Cancel preparation runs', () => { + beforeEach(() => { + jest.clearAllMocks(); + github.githubRestClient.mockImplementation(((route: string, options: any) => { + switch (route) { + case 'GET /repos/{owner}/{repo}/actions/workflows': + return { + data: { + workflows: [ + { + id: 1, + path: PREPARE_PATCH_WORKFLOW_PATH, + }, + { + id: 2, + path: PREPARE_NON_PATCH_WORKFLOW_PATH, + }, + ], + }, + }; + case 'GET /repos/{owner}/{repo}/actions/workflows/{workflow_id}/runs': + return { + data: { + workflow_runs: [ + { + id: options.workflow_id === 1 ? 100 : 200, + status: 'in_progress', + }, + { + id: options.workflow_id === 1 ? 150 : 250, + status: 'completed', + }, + ], + }, + }; + case 'POST /repos/{owner}/{repo}/actions/runs/{run_id}/cancel': + return undefined; // success + default: + throw new Error(`Unexpected route: ${route}`); + } + }) as any); + }); + + it('should fail early when no GH_TOKEN is set', async () => { + delete process.env.GH_TOKEN; + await expect(cancelPreparationWorkflows()).rejects.toThrowErrorMatchingInlineSnapshot( + `"GH_TOKEN environment variable must be set, exiting."` + ); + }); + + it('should cancel all running preparation workflows in GitHub', async () => { + process.env.GH_TOKEN = 'MY_SECRET'; + + await expect(cancelPreparationWorkflows()).resolves.toBeUndefined(); + + expect(github.githubRestClient).toHaveBeenCalledTimes(5); + expect(github.githubRestClient).toHaveBeenCalledWith( + 'POST /repos/{owner}/{repo}/actions/runs/{run_id}/cancel', + { + owner: 'storybookjs', + repo: 'storybook', + run_id: 100, + } + ); + expect(github.githubRestClient).toHaveBeenCalledWith( + 'POST /repos/{owner}/{repo}/actions/runs/{run_id}/cancel', + { + owner: 'storybookjs', + repo: 'storybook', + run_id: 200, + } + ); + expect(github.githubRestClient).not.toHaveBeenCalledWith( + 'POST /repos/{owner}/{repo}/actions/runs/{run_id}/cancel', + { + owner: 'storybookjs', + repo: 'storybook', + run_id: 150, + } + ); + expect(github.githubRestClient).not.toHaveBeenCalledWith( + 'POST /repos/{owner}/{repo}/actions/runs/{run_id}/cancel', + { + owner: 'storybookjs', + repo: 'storybook', + run_id: 250, + } + ); + }); +}); diff --git a/scripts/release/__tests__/ensure-next-ahead.test.ts b/scripts/release/__tests__/ensure-next-ahead.test.ts new file mode 100644 index 000000000000..0b192d39b106 --- /dev/null +++ b/scripts/release/__tests__/ensure-next-ahead.test.ts @@ -0,0 +1,85 @@ +/* eslint-disable global-require */ +/* eslint-disable no-underscore-dangle */ +import path from 'path'; +import { run as ensureNextAhead } from '../ensure-next-ahead'; +import * as gitClient_ from '../utils/git-client'; +import * as bumpVersion_ from '../version'; + +jest.mock('../utils/git-client', () => jest.requireActual('jest-mock-extended').mockDeep()); +const gitClient = jest.mocked(gitClient_); + +// eslint-disable-next-line jest/no-mocks-import +jest.mock('fs-extra', () => require('../../../code/__mocks__/fs-extra')); +const fsExtra = require('fs-extra'); + +jest.mock('../version', () => jest.requireActual('jest-mock-extended').mockDeep()); +const bumpVersion = jest.mocked(bumpVersion_); + +jest.spyOn(console, 'log').mockImplementation(() => {}); +jest.spyOn(console, 'warn').mockImplementation(() => {}); +jest.spyOn(console, 'error').mockImplementation(() => {}); + +const CODE_PACKAGE_JSON_PATH = path.join(__dirname, '..', '..', '..', 'code', 'package.json'); + +describe('Ensure next ahead', () => { + beforeEach(() => { + jest.clearAllMocks(); + gitClient.git.status.mockResolvedValue({ current: 'next' } as any); + fsExtra.__setMockFiles({ + [CODE_PACKAGE_JSON_PATH]: JSON.stringify({ version: '2.0.0' }), + }); + }); + + it('should throw when main-version is missing', async () => { + await expect(ensureNextAhead({})).rejects.toThrowErrorMatchingInlineSnapshot(` + "[ + { + "code": "invalid_type", + "expected": "string", + "received": "undefined", + "path": [ + "mainVersion" + ], + "message": "Required" + } + ]" + `); + }); + + it('should throw when main-version is not a semver string', async () => { + await expect(ensureNextAhead({ mainVersion: '200' })).rejects + .toThrowErrorMatchingInlineSnapshot(` + "[ + { + "code": "custom", + "message": "main-version must be a valid semver version string like '7.4.2'.", + "path": [] + } + ]" + `); + }); + + it('should not bump version when next is already ahead of main', async () => { + await expect(ensureNextAhead({ mainVersion: '1.0.0' })).resolves.toBeUndefined(); + expect(bumpVersion.run).not.toHaveBeenCalled(); + }); + + it('should bump version to 3.1.0-alpha.0 when main is 3.0.0 and next is 2.0.0', async () => { + await expect(ensureNextAhead({ mainVersion: '3.0.0' })).resolves.toBeUndefined(); + expect(bumpVersion.run).toHaveBeenCalledWith({ exact: '3.1.0-alpha.0' }); + }); + + it('should bump version to 2.1.0-alpha.0 when main and next are both 2.0.0', async () => { + await expect(ensureNextAhead({ mainVersion: '2.0.0' })).resolves.toBeUndefined(); + expect(bumpVersion.run).toHaveBeenCalledWith({ exact: '2.1.0-alpha.0' }); + }); + + it('should bump version to 2.1.0-alpha.0 when main is 2.0.0 and and next is 2.0.0-rc.10', async () => { + fsExtra.__setMockFiles({ + [CODE_PACKAGE_JSON_PATH]: JSON.stringify({ version: '2.0.0-rc.10' }), + }); + + await expect(ensureNextAhead({ mainVersion: '2.0.0' })).resolves.toBeUndefined(); + expect(bumpVersion.run).toHaveBeenCalledWith({ exact: '2.1.0-alpha.0' }); + }); +}); diff --git a/scripts/release/__tests__/generate-pr-description.test.ts b/scripts/release/__tests__/generate-pr-description.test.ts index b0f1bbe89db5..50aa5de8e019 100644 --- a/scripts/release/__tests__/generate-pr-description.test.ts +++ b/scripts/release/__tests__/generate-pr-description.test.ts @@ -15,6 +15,7 @@ describe('Generate PR Description', () => { labels: ['bug', 'build', 'other label', 'patch:yes'], commit: 'abc123', pull: 42, + state: 'MERGED', links: { commit: '[abc123](https://github.com/storybookjs/storybook/commit/abc123)', pull: '[#42](https://github.com/storybookjs/storybook/pull/42)', @@ -26,6 +27,7 @@ describe('Generate PR Description', () => { id: null, user: 'storybook-bot', pull: null, + state: null, commit: '012b58140c3606efeacbe99c0c410624b0a1ed1f', title: 'Bump version on `next`: preminor (alpha) from 7.2.0 to 7.3.0-alpha.0', labels: null, @@ -41,6 +43,7 @@ describe('Generate PR Description', () => { user: 'shilman', title: 'Some title for a "direct commit"', labels: null, + state: null, commit: '22bb11', pull: null, links: { @@ -55,6 +58,7 @@ describe('Generate PR Description', () => { title: 'Another PR `title` for docs', labels: ['another label', 'documentation', 'patch:yes'], commit: 'ddd222', + state: 'MERGED', pull: 11, links: { commit: '[ddd222](https://github.com/storybookjs/storybook/commit/ddd222)', @@ -69,6 +73,7 @@ describe('Generate PR Description', () => { labels: ['feature request', 'other label'], commit: 'wow1337', pull: 48, + state: 'MERGED', links: { commit: '[wow1337](https://github.com/storybookjs/storybook/commit/wow1337)', pull: '[#48](https://github.com/storybookjs/storybook/pull/48)', @@ -81,6 +86,7 @@ describe('Generate PR Description', () => { title: 'Some PR title with a missing label', labels: ['incorrect label', 'other label'], commit: 'bad999', + state: 'MERGED', pull: 77, links: { commit: '[bad999](https://github.com/storybookjs/storybook/commit/bad999)', @@ -213,7 +219,7 @@ For each pull request below, you need to either manually cherry pick it, or disc - [ ] [#42](https://github.com/storybookjs/storybook/pull/42): \\\`git cherry-pick -m1 -x abc123\\\` - If you\\'ve made any changes doing the above QA (change PR titles, revert PRs), manually trigger a re-generation of this PR with [this workflow](https://github.com/storybookjs/storybook/actions/workflows/prepare-prerelease.yml) and wait for it to finish. It will wipe your progress in this to do, which is expected. + If you\\'ve made any changes doing the above QA (change PR titles, revert PRs), manually trigger a re-generation of this PR with [this workflow](https://github.com/storybookjs/storybook/actions/workflows/prepare-non-patch-release.yml) and wait for it to finish. It will wipe your progress in this to do, which is expected. Feel free to manually commit any changes necessary to this branch **after** you\\'ve done the last re-generation, following the [Make Manual Changes](https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING/RELEASING.md#5-make-manual-changes) section in the docs, *especially* if you\\'re making changes to the changelog. @@ -340,7 +346,7 @@ For each pull request below, you need to either manually cherry pick it, or disc - If you\\'ve made any changes doing the above QA (change PR titles, revert PRs), manually trigger a re-generation of this PR with [this workflow](https://github.com/storybookjs/storybook/actions/workflows/prepare-prerelease.yml) and wait for it to finish. It will wipe your progress in this to do, which is expected. + If you\\'ve made any changes doing the above QA (change PR titles, revert PRs), manually trigger a re-generation of this PR with [this workflow](https://github.com/storybookjs/storybook/actions/workflows/prepare-non-patch-release.yml) and wait for it to finish. It will wipe your progress in this to do, which is expected. Feel free to manually commit any changes necessary to this branch **after** you\\'ve done the last re-generation, following the [Make Manual Changes](https://github.com/storybookjs/storybook/blob/next/CONTRIBUTING/RELEASING.md#5-make-manual-changes) section in the docs, *especially* if you\\'re making changes to the changelog. diff --git a/scripts/release/__tests__/is-pr-frozen.test.ts b/scripts/release/__tests__/is-pr-frozen.test.ts index 63747a863ddf..00331e0555cd 100644 --- a/scripts/release/__tests__/is-pr-frozen.test.ts +++ b/scripts/release/__tests__/is-pr-frozen.test.ts @@ -26,6 +26,7 @@ describe('isPrFrozen', () => { it('should return true when PR is frozen', async () => { getPullInfoFromCommit.mockResolvedValue({ labels: ['freeze'], + state: 'OPEN', }); await expect(isPrFrozen({ patch: false })).resolves.toBe(true); }); @@ -33,6 +34,15 @@ describe('isPrFrozen', () => { it('should return false when PR is not frozen', async () => { getPullInfoFromCommit.mockResolvedValue({ labels: [], + state: 'OPEN', + }); + await expect(isPrFrozen({ patch: false })).resolves.toBe(false); + }); + + it('should return false when PR is closed', async () => { + getPullInfoFromCommit.mockResolvedValue({ + labels: ['freeze'], + state: 'CLOSED', }); await expect(isPrFrozen({ patch: false })).resolves.toBe(false); }); @@ -54,7 +64,7 @@ describe('isPrFrozen', () => { }); await isPrFrozen({ patch: false }); - expect(simpleGit.__fetch).toHaveBeenCalledWith('origin', 'version-prerelease-from-1.0.0', { + expect(simpleGit.__fetch).toHaveBeenCalledWith('origin', 'version-non-patch-from-1.0.0', { '--depth': 1, }); }); diff --git a/scripts/release/__tests__/label-patches.test.ts b/scripts/release/__tests__/label-patches.test.ts index d98abc7eb763..d43290a1828c 100644 --- a/scripts/release/__tests__/label-patches.test.ts +++ b/scripts/release/__tests__/label-patches.test.ts @@ -58,6 +58,7 @@ const pullInfoMock = { commit: '930b47f011f750c44a1782267d698ccdd3c04da3', title: 'Legal: Fix license', labels: ['documentation', 'patch:yes', 'patch:done'], + state: 'MERGED', links: { commit: '[`930b47f011f750c44a1782267d698ccdd3c04da3`](https://github.com/storybookjs/storybook/commit/930b47f011f750c44a1782267d698ccdd3c04da3)', diff --git a/scripts/release/cancel-preparation-runs.ts b/scripts/release/cancel-preparation-runs.ts new file mode 100644 index 000000000000..630bfb4847b3 --- /dev/null +++ b/scripts/release/cancel-preparation-runs.ts @@ -0,0 +1,107 @@ +/** + * This script cancels all running preparation workflows in GitHub. + * It will fetch all active runs for the preparation workflows, and cancel them. + */ +/* eslint-disable no-console */ +import chalk from 'chalk'; +import program from 'commander'; +import dedent from 'ts-dedent'; +import { githubRestClient } from './utils/github-client'; + +program + .name('cancel-preparation-workflows') + .description('cancel all running preparation workflows in GitHub'); + +export const PREPARE_PATCH_WORKFLOW_PATH = '.github/workflows/prepare-patch-release.yml'; +export const PREPARE_NON_PATCH_WORKFLOW_PATH = '.github/workflows/prepare-non-patch-release.yml'; + +export const run = async () => { + if (!process.env.GH_TOKEN) { + throw new Error('GH_TOKEN environment variable must be set, exiting.'); + } + + console.log(`๐Ÿ”Ž Looking for workflows to cancel...`); + const allWorkflows = await githubRestClient('GET /repos/{owner}/{repo}/actions/workflows', { + owner: 'storybookjs', + repo: 'storybook', + }); + + const preparePatchWorkflowId = allWorkflows.data.workflows.find( + ({ path }) => path === PREPARE_PATCH_WORKFLOW_PATH + )?.id; + const prepareNonPatchWorkflowId = allWorkflows.data.workflows.find( + ({ path }) => path === PREPARE_NON_PATCH_WORKFLOW_PATH + )?.id; + + console.log(`Found workflow IDs for the preparation workflows: + ${chalk.blue(PREPARE_PATCH_WORKFLOW_PATH)}: ${chalk.green(preparePatchWorkflowId)} + ${chalk.blue(PREPARE_NON_PATCH_WORKFLOW_PATH)}: ${chalk.green(prepareNonPatchWorkflowId)}`); + + if (!preparePatchWorkflowId || !prepareNonPatchWorkflowId) { + throw new Error(dedent`๐Ÿšจ Could not find workflow IDs for the preparation workflows + - Looked for paths: "${chalk.blue(PREPARE_PATCH_WORKFLOW_PATH)}" and "${chalk.blue( + PREPARE_NON_PATCH_WORKFLOW_PATH + )}", are they still correct? + - Found workflows: + ${JSON.stringify(allWorkflows.data.workflows, null, 2)}`); + } + + console.log('๐Ÿ” Fetching patch and non-patch runs for preparation workflows...'); + const [patchRuns, nonPatchRuns] = await Promise.all([ + githubRestClient('GET /repos/{owner}/{repo}/actions/workflows/{workflow_id}/runs', { + owner: 'storybookjs', + repo: 'storybook', + workflow_id: preparePatchWorkflowId, + }), + githubRestClient('GET /repos/{owner}/{repo}/actions/workflows/{workflow_id}/runs', { + owner: 'storybookjs', + repo: 'storybook', + workflow_id: prepareNonPatchWorkflowId, + }), + ]); + console.log('โœ… Successfully fetched patch and non-patch runs for preparation workflows.'); + + const runsToCancel = patchRuns.data.workflow_runs + .concat(nonPatchRuns.data.workflow_runs) + .filter(({ status }) => + ['in_progress', 'pending', 'queued', 'requested', 'waiting'].includes(status) + ); + + if (runsToCancel.length === 0) { + console.log('๐Ÿ‘ No runs to cancel.'); + return; + } + + console.log(`๐Ÿ” Found ${runsToCancel.length} runs to cancel. Cancelling them now: + ${runsToCancel + .map((r) => `${chalk.green(r.path)} - ${chalk.green(r.id)}: ${chalk.blue(r.status)}`) + .join('\n ')}`); + + const result = await Promise.allSettled( + runsToCancel.map((r) => + githubRestClient('POST /repos/{owner}/{repo}/actions/runs/{run_id}/cancel', { + owner: 'storybookjs', + repo: 'storybook', + run_id: r.id, + }) + ) + ); + + if (result.some((r) => r.status === 'rejected')) { + console.warn('โš ๏ธ Some runs could not be cancelled:'); + result.forEach((r, index) => { + if (r.status === 'rejected') { + console.warn(`Run ID: ${runsToCancel[index].id} - Reason: ${r.reason}`); + } + }); + } else { + console.log('โœ… Successfully cancelled all preparation runs.'); + } +}; + +if (require.main === module) { + run().catch((err) => { + console.error(err); + // this is non-critical work, so we don't want to fail the CI build if this fails + }); +} diff --git a/scripts/release/ensure-next-ahead.ts b/scripts/release/ensure-next-ahead.ts new file mode 100644 index 000000000000..1aa32bfd932c --- /dev/null +++ b/scripts/release/ensure-next-ahead.ts @@ -0,0 +1,101 @@ +/** + * This script ensures that next is always one minor ahead of main. + * This is needed when releasing a stable from next. + * Next will be at eg. 7.4.0-alpha.4, and main will be at 7.3.0. + * Then we release 7.4.0 by merging next to latest-release to main. + * We then ensure here that next is bumped to 7.5.0-alpha.0 - without releasing it. + * If this is a patch release bumping main to 7.3.1, next will not be touched because it's already ahead. + */ + +/* eslint-disable no-console */ +import chalk from 'chalk'; +import path from 'path'; +import program from 'commander'; +import semver from 'semver'; +import { z } from 'zod'; +import { readJson } from 'fs-extra'; +import { run as bumpVersion } from './version'; +import { git } from './utils/git-client'; + +program + .name('ensure-next-ahead') + .description('ensure the "next" branch is always a minor version ahead of "main"') + .requiredOption('-M, --main-version ', 'The version currently on the "main" branch'); + +const optionsSchema = z + .object({ + mainVersion: z.string(), + }) + .refine((schema) => semver.valid(schema.mainVersion), { + message: "main-version must be a valid semver version string like '7.4.2'.", + }); + +type Options = { + mainVersion: string; +}; + +const CODE_DIR_PATH = path.join(__dirname, '..', '..', 'code'); +const CODE_PACKAGE_JSON_PATH = path.join(CODE_DIR_PATH, 'package.json'); + +const validateOptions = (options: { [key: string]: any }): options is Options => { + optionsSchema.parse(options); + return true; +}; + +const getCurrentVersion = async () => { + const { version } = await readJson(CODE_PACKAGE_JSON_PATH); + console.log(`๐Ÿ“ Current version of Storybook is ${chalk.green(version)}`); + return version; +}; + +export const run = async (options: unknown) => { + if (!validateOptions(options)) { + return; + } + const { mainVersion } = options; + + const { current: currentGitBranch } = await git.status(); + + if (currentGitBranch !== 'next') { + console.warn( + `๐Ÿšง The current branch is not "next" but "${currentGitBranch}", this only really makes sense to run on the "next" branch.` + ); + } + + // Get the current version from code/package.json + const currentNextVersion = await getCurrentVersion(); + if (semver.gt(currentNextVersion, mainVersion)) { + console.log( + `โœ… The version on next (${chalk.green( + currentNextVersion + )}) is already ahead of the version on main (${chalk.green(mainVersion)}), no action needed.` + ); + return; + } + + const nextNextVersion = `${semver.inc(mainVersion, 'minor')}-alpha.0`; + + console.log( + `๐Ÿคœ The version on next (${chalk.green( + currentNextVersion + )}) is behind the version on main (${chalk.green(mainVersion)}), bumping to ${chalk.blue( + nextNextVersion + )}...` + ); + + await bumpVersion({ exact: nextNextVersion }); + + console.log( + `โœ… bumped all versions to ${chalk.green( + nextNextVersion + )}, remember to commit and push to next.` + ); +}; + +if (require.main === module) { + const parsed = program.parse(); + run(parsed.opts()).catch((err) => { + console.error(err); + process.exit(1); + }); +} diff --git a/scripts/release/generate-pr-description.ts b/scripts/release/generate-pr-description.ts index 16a6928e994f..d437e8dc87bc 100644 --- a/scripts/release/generate-pr-description.ts +++ b/scripts/release/generate-pr-description.ts @@ -18,7 +18,7 @@ program 'Which version to generate changelog from, eg. "7.0.7". Defaults to the version at code/package.json' ) .option('-N, --next-version ', 'Which version to generate changelog to, eg. "7.0.8"') - .option('-P, --unpicked-patches', 'Set to only consider PRs labeled with "patch" label') + .option('-P, --unpicked-patches', 'Set to only consider PRs labeled with "patch:yes" label') .option( '-M, --manual-cherry-picks ', 'A stringified JSON array of commit hashes, of patch PRs that needs to be cherry-picked manually' @@ -52,6 +52,7 @@ const CHANGE_TITLES_TO_IGNORE = [ /\[ci skip\]/i, /^Update CHANGELOG\.md for.*/i, /^Release: (Pre)?(Patch|Minor|Major|Release).*\d+$/i, + /^Update \.\/docs\/versions/, ]; export const mapToChangelist = ({ @@ -65,7 +66,7 @@ export const mapToChangelist = ({ .filter((change) => { // eslint-disable-next-line no-restricted-syntax for (const titleToIgnore of CHANGE_TITLES_TO_IGNORE) { - if (change.title.match(titleToIgnore)) { + if (change.title?.match(titleToIgnore)) { return false; } } @@ -90,7 +91,7 @@ export const mapToChangelist = ({ )[0] || 'unknown') as keyof typeof LABELS_BY_IMPORTANCE; return `- [ ] **${LABELS_BY_IMPORTANCE[label]}**: ${change.title} ${change.links.pull}${ - !unpickedPatches && change.labels.includes('patch:yes') ? ' (will also be patched)' : '' + !unpickedPatches && change.labels?.includes('patch:yes') ? ' (will also be patched)' : '' }`; }) .join('\n'); @@ -141,7 +142,9 @@ export const generateReleaseDescription = ({ changelogText: string; manualCherryPicks?: string; }): string => { - const workflow = semver.prerelease(nextVersion) ? 'prepare-prerelease' : 'prepare-patch-release'; + const workflow = semver.prerelease(nextVersion) + ? 'prepare-non-patch-release' + : 'prepare-patch-release'; const workflowUrl = `https://github.com/storybookjs/storybook/actions/workflows/${workflow}.yml`; return ( diff --git a/scripts/release/is-pr-frozen.ts b/scripts/release/is-pr-frozen.ts index 70289b5369d8..e81610a451b9 100644 --- a/scripts/release/is-pr-frozen.ts +++ b/scripts/release/is-pr-frozen.ts @@ -12,7 +12,7 @@ program .description( 'returns true if the versioning pull request associated with the current branch has the "freeze" label' ) - .option('-P, --patch', 'Look for patch PR instead of prerelease PR', false) + .option('-H, --patch', 'Look for patch PR instead of next PR', false) .option('-V, --verbose', 'Enable verbose logging', false); const CODE_DIR_PATH = path.join(__dirname, '..', '..', 'code'); @@ -46,7 +46,7 @@ export const run = async (options: unknown) => { const { verbose, patch } = options as { verbose?: boolean; patch?: boolean }; const version = await getCurrentVersion(); - const branch = `version-${patch ? 'patch' : 'prerelease'}-from-${version}`; + const branch = `version-${patch ? 'patch' : 'non-patch'}-from-${version}`; console.log(`๐Ÿ’ฌ Determining if pull request from branch '${chalk.blue(branch)}' is frozen`); @@ -78,6 +78,14 @@ export const run = async (options: unknown) => { console.log(`๐Ÿ” Found pull request: ${JSON.stringify(pullRequest, null, 2)}`); + if (pullRequest.state !== 'OPEN') { + console.log('โŒ The pull request is already closed, ignoring it'); + if (process.env.GITHUB_ACTIONS === 'true') { + setOutput('frozen', false); + } + return false; + } + const isFrozen = pullRequest.labels?.includes('freeze'); if (process.env.GITHUB_ACTIONS === 'true') { setOutput('frozen', isFrozen); diff --git a/scripts/release/pick-patches.ts b/scripts/release/pick-patches.ts index eab1743dcc7b..9d3169d78c8a 100644 --- a/scripts/release/pick-patches.ts +++ b/scripts/release/pick-patches.ts @@ -80,6 +80,7 @@ export const run = async (_: unknown) => { } if (process.env.GITHUB_ACTIONS === 'true') { + setOutput('pr-count', JSON.stringify(patchPRs.length)); setOutput('failed-cherry-picks', JSON.stringify(failedCherryPicks)); } }; diff --git a/scripts/release/utils/get-changes.ts b/scripts/release/utils/get-changes.ts index 1ad2a0759198..416ea624fb50 100644 --- a/scripts/release/utils/get-changes.ts +++ b/scripts/release/utils/get-changes.ts @@ -53,7 +53,7 @@ export const getFromCommit = async (from?: string | undefined, verbose?: boolean console.log(`๐Ÿ” No 'from' specified, found latest tag: ${chalk.blue(latest)}`); } } - const commit = await getCommitAt(actualFrom, verbose); + const commit = await getCommitAt(actualFrom!, verbose); if (verbose) { console.log(`๐Ÿ” Found 'from' commit: ${chalk.blue(commit)}`); } diff --git a/scripts/release/utils/get-github-info.ts b/scripts/release/utils/get-github-info.ts index 6bd7126aec04..bdfe995a9001 100644 --- a/scripts/release/utils/get-github-info.ts +++ b/scripts/release/utils/get-github-info.ts @@ -40,6 +40,7 @@ function makeQuery(repos: ReposWithCommitsAndPRsToFetch) { number id title + state url mergedAt labels(first: 50) { @@ -63,6 +64,7 @@ function makeQuery(repos: ReposWithCommitsAndPRsToFetch) { : `pr__${data.pull}: pullRequest(number: ${data.pull}) { url title + state author { login url @@ -161,11 +163,12 @@ export type PullRequestInfo = { user: string | null; id: string | null; title: string | null; + state: string | null; commit: string | null; pull: number | null; labels: string[] | null; links: { - commit: string; + commit: string | null; pull: string | null; user: string | null; }; @@ -197,6 +200,7 @@ export async function getPullInfoFromCommit(request: { pull: null, commit: request.commit, title: null, + state: null, labels: null, links: { commit: request.commit, @@ -205,10 +209,7 @@ export async function getPullInfoFromCommit(request: { }, }; } - let user = null; - if (data.author && data.author.user) { - user = data.author.user; - } + let user = data?.author?.user || null; const associatedPullRequest = data.associatedPullRequests && @@ -245,6 +246,7 @@ export async function getPullInfoFromCommit(request: { pull: associatedPullRequest ? associatedPullRequest.number : null, commit: request.commit, title: associatedPullRequest ? associatedPullRequest.title : null, + state: associatedPullRequest ? associatedPullRequest.state : null, labels: associatedPullRequest ? (associatedPullRequest.labels.nodes || []).map((label: { name: string }) => label.name) : null, @@ -287,6 +289,7 @@ export async function getPullInfoFromPullRequest(request: { pull: request.pull, commit: commit ? commit.oid : null, title: title || null, + state: data?.state || null, labels: data ? (data.labels.nodes || []).map((label: { name: string }) => label.name) : null, links: { commit: commit ? `[\`${commit.oid}\`](${commit.commitUrl})` : null, diff --git a/scripts/release/utils/github-client.ts b/scripts/release/utils/github-client.ts index 646ba1003986..e81991414bf9 100644 --- a/scripts/release/utils/github-client.ts +++ b/scripts/release/utils/github-client.ts @@ -1,6 +1,8 @@ /* eslint-disable no-console */ import type { GraphQlQueryResponseData } from '@octokit/graphql'; import { graphql } from '@octokit/graphql'; +import { request } from '@octokit/request'; +import fetch from 'node-fetch'; export interface PullRequest { number: number; @@ -14,6 +16,13 @@ export const githubGraphQlClient = graphql.defaults({ headers: { authorization: `token ${process.env.GH_TOKEN}` }, }); +export const githubRestClient = request.defaults({ + request: { + fetch, + }, + headers: { authorization: `token ${process.env.GH_TOKEN}`, 'X-GitHub-Api-Version': '2022-11-28' }, +}); + export async function getUnpickedPRs( baseBranch: string, verbose?: boolean diff --git a/scripts/yarn.lock b/scripts/yarn.lock index 19568a9f4a70..f9d17fe543a8 100644 --- a/scripts/yarn.lock +++ b/scripts/yarn.lock @@ -2531,6 +2531,17 @@ __metadata: languageName: node linkType: hard +"@octokit/endpoint@npm:^9.0.0": + version: 9.0.1 + resolution: "@octokit/endpoint@npm:9.0.1" + dependencies: + "@octokit/types": ^12.0.0 + is-plain-object: ^5.0.0 + universal-user-agent: ^6.0.0 + checksum: 757505b1cd634bcd7b71a18c8fe07dfda47790598ddd0d9d13f47d68713070f49953a672ac40ec39787defc2a7e07d08dca97756def7b907118f8f8d4c653f5c + languageName: node + linkType: hard + "@octokit/graphql@npm:^4.3.1, @octokit/graphql@npm:^4.5.8": version: 4.8.0 resolution: "@octokit/graphql@npm:4.8.0" @@ -2567,6 +2578,13 @@ __metadata: languageName: node linkType: hard +"@octokit/openapi-types@npm:^19.0.0": + version: 19.0.0 + resolution: "@octokit/openapi-types@npm:19.0.0" + checksum: 8270e0a224bbef6d1c82396cda873a3528111cb25a772184b39e1fbada4e6433b41c5f4634ecf204e8a2816a802048197e0132b7615b579fab217f7c1e29545b + languageName: node + linkType: hard + "@octokit/plugin-paginate-rest@npm:^2.16.8, @octokit/plugin-paginate-rest@npm:^2.2.0": version: 2.21.3 resolution: "@octokit/plugin-paginate-rest@npm:2.21.3" @@ -2631,6 +2649,17 @@ __metadata: languageName: node linkType: hard +"@octokit/request-error@npm:^5.0.0": + version: 5.0.1 + resolution: "@octokit/request-error@npm:5.0.1" + dependencies: + "@octokit/types": ^12.0.0 + deprecation: ^2.0.0 + once: ^1.4.0 + checksum: e72a4627120de345b54876a1f007664095e5be9d624fce2e14fccf7668cd8f5e4929d444d8fc085d48e1fb5cd548538453974aab129a669101110d6679dce6c6 + languageName: node + linkType: hard + "@octokit/request@npm:^5.4.0, @octokit/request@npm:^5.6.0, @octokit/request@npm:^5.6.3": version: 5.6.3 resolution: "@octokit/request@npm:5.6.3" @@ -2659,6 +2688,19 @@ __metadata: languageName: node linkType: hard +"@octokit/request@npm:^8.1.2": + version: 8.1.2 + resolution: "@octokit/request@npm:8.1.2" + dependencies: + "@octokit/endpoint": ^9.0.0 + "@octokit/request-error": ^5.0.0 + "@octokit/types": ^12.0.0 + is-plain-object: ^5.0.0 + universal-user-agent: ^6.0.0 + checksum: 49219eb71b856acecc8268f05a7a7d074488f9eaeb59439f5c8872e5b4555a4e6c0cf0ebcadf0983466f88957e74c27765f582e473b0dd89b453274501f0dc37 + languageName: node + linkType: hard + "@octokit/rest@npm:^16.43.0 || ^17.11.0 || ^18.12.0, @octokit/rest@npm:^18.12.0": version: 18.12.0 resolution: "@octokit/rest@npm:18.12.0" @@ -2683,6 +2725,15 @@ __metadata: languageName: node linkType: hard +"@octokit/types@npm:^12.0.0": + version: 12.0.0 + resolution: "@octokit/types@npm:12.0.0" + dependencies: + "@octokit/openapi-types": ^19.0.0 + checksum: 6e5b68f8855775638db53244348d2ca07896d36a15aad41d3cb652fafaa1b307c3b6222319174dd5716accd9076e101da838b82f988a7c380a8e9d188e3aadf1 + languageName: node + linkType: hard + "@octokit/types@npm:^4.1.6": version: 4.1.10 resolution: "@octokit/types@npm:4.1.10" @@ -2901,6 +2952,7 @@ __metadata: "@jest/globals": ^29.3.1 "@nx/workspace": 16.2.1 "@octokit/graphql": ^5.0.5 + "@octokit/request": ^8.1.2 "@storybook/eslint-config-storybook": ^3.1.2 "@storybook/jest": next "@storybook/linter-config": ^3.1.2 From ced815b2a65f9c501e6c9f983e3d20689a60e4b1 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 5 Oct 2023 12:04:20 +0200 Subject: [PATCH 019/110] fix prerelease -> non-patch naming --- .github/workflows/prepare-non-patch-release.yml | 6 +++--- CONTRIBUTING/RELEASING.md | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/workflows/prepare-non-patch-release.yml b/.github/workflows/prepare-non-patch-release.yml index ea72d924d918..e1a443ff8025 100644 --- a/.github/workflows/prepare-non-patch-release.yml +++ b/.github/workflows/prepare-non-patch-release.yml @@ -1,5 +1,5 @@ -name: Prepare prerelease PR -run-name: Prepare prerelease PR, triggered by ${{ github.triggering_actor }} +name: Prepare non-patch PR +run-name: Prepare non-patch PR, triggered by ${{ github.triggering_actor }} on: push: @@ -35,7 +35,7 @@ concurrency: jobs: prepare-non-patch-pull-request: - name: Prepare prerelease pull request + name: Prepare non-patch pull request runs-on: ubuntu-latest environment: release defaults: diff --git a/CONTRIBUTING/RELEASING.md b/CONTRIBUTING/RELEASING.md index e92fa8fa36a3..7cf29a463c62 100644 --- a/CONTRIBUTING/RELEASING.md +++ b/CONTRIBUTING/RELEASING.md @@ -304,7 +304,7 @@ The workflows can be triggered here: - [Prepare next PR](https://github.com/storybookjs/storybook/actions/workflows/prepare-non-patch-release.yml) - [Prepare patch PR](https://github.com/storybookjs/storybook/actions/workflows/prepare-patch-release.yml) -Crucially for prereleases, this is also where you change the versioning strategy if you need something else than the default as described in [Preparing - Non-patch Releases](#non-patch-releases). When triggering the prerelease workflow manually, you can optionally add inputs: +Crucially for prereleases, this is also where you change the versioning strategy if you need something else than the default as described in [Preparing - Non-patch Releases](#non-patch-releases). When triggering the non-patch workflow manually, you can optionally add inputs: ![Screenshot of triggering the non-patch-release workflow in GitHub Actions, with a form that shows a release type selector and a prerelease identifier text field](prerelease-workflow-inputs.png) From d8b6d673471c964f25f92bf6082ecfa910a7caf4 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 5 Oct 2023 13:38:16 +0200 Subject: [PATCH 020/110] improve merge conflict hnadling between next and latest-release --- .github/workflows/prepare-non-patch-release.yml | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/.github/workflows/prepare-non-patch-release.yml b/.github/workflows/prepare-non-patch-release.yml index e1a443ff8025..6e89369c7c7c 100644 --- a/.github/workflows/prepare-non-patch-release.yml +++ b/.github/workflows/prepare-non-patch-release.yml @@ -133,11 +133,13 @@ jobs: git push --force origin version-non-patch-from-${{ steps.bump-version.outputs.current-version }} - name: Resolve merge-conflicts with base branch - if: steps.is-prerelease.outputs.prerelease == 'true' + if: steps.is-prerelease.outputs.prerelease == 'false' + working-directory: . env: GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} run: | - git pull origin latest-release + git config pull.rebase false + git pull --no-commit --no-ff origin latest-release git checkout --ours . git add . git commit -m "Merge latest-release into version-non-patch-from-${{ steps.bump-version.outputs.current-version }} with conflicts resolved to ours [skip ci]" From cbac1a0f13155114248bc3d560bf29406037e8a2 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 5 Oct 2023 13:44:06 +0200 Subject: [PATCH 021/110] make merge conflict handling more resilient --- .github/workflows/prepare-non-patch-release.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/prepare-non-patch-release.yml b/.github/workflows/prepare-non-patch-release.yml index 6e89369c7c7c..58f2b3e81aa1 100644 --- a/.github/workflows/prepare-non-patch-release.yml +++ b/.github/workflows/prepare-non-patch-release.yml @@ -139,10 +139,10 @@ jobs: GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} run: | git config pull.rebase false - git pull --no-commit --no-ff origin latest-release + git pull --no-commit --no-ff origin latest-release || true git checkout --ours . git add . - git commit -m "Merge latest-release into version-non-patch-from-${{ steps.bump-version.outputs.current-version }} with conflicts resolved to ours [skip ci]" + git commit --amend -m "Merge latest-release into version-non-patch-from-${{ steps.bump-version.outputs.current-version }} with conflicts resolved to ours [skip ci]" - name: Generate PR description id: description From af742751be8997eb00c47e952d458dd07ab58ada Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 5 Oct 2023 13:47:27 +0200 Subject: [PATCH 022/110] fix merging commit message --- .github/workflows/prepare-non-patch-release.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/prepare-non-patch-release.yml b/.github/workflows/prepare-non-patch-release.yml index 58f2b3e81aa1..bc14a9b68e79 100644 --- a/.github/workflows/prepare-non-patch-release.yml +++ b/.github/workflows/prepare-non-patch-release.yml @@ -142,7 +142,7 @@ jobs: git pull --no-commit --no-ff origin latest-release || true git checkout --ours . git add . - git commit --amend -m "Merge latest-release into version-non-patch-from-${{ steps.bump-version.outputs.current-version }} with conflicts resolved to ours [skip ci]" + git commit --no-verify -m "Merge latest-release into version-non-patch-from-${{ steps.bump-version.outputs.current-version }} with conflicts resolved to ours [skip ci]" - name: Generate PR description id: description From bf592f1de4666346c7e5c79fe4a03f1d22a9f9d2 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 5 Oct 2023 14:17:29 +0200 Subject: [PATCH 023/110] test trigger non-patch workflow --- .github/workflows/prepare-non-patch-release.yml | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/.github/workflows/prepare-non-patch-release.yml b/.github/workflows/prepare-non-patch-release.yml index bc14a9b68e79..0cd4775363b8 100644 --- a/.github/workflows/prepare-non-patch-release.yml +++ b/.github/workflows/prepare-non-patch-release.yml @@ -2,6 +2,7 @@ name: Prepare non-patch PR run-name: Prepare non-patch PR, triggered by ${{ github.triggering_actor }} on: + pull_request: # to temporarily test the workflow before merging push: branches: - next @@ -45,7 +46,7 @@ jobs: - name: Checkout next uses: actions/checkout@v3 with: - ref: next + ref: release-to-latest-v2 #to temporarily test the workflow before merging # this needs to be set to a high enough number that it will contain the last version tag # as of May 2023, the whole repo had 55K commits fetch-depth: 10000 @@ -127,10 +128,10 @@ jobs: run: | git config --global user.name 'storybook-bot' git config --global user.email '32066757+storybook-bot@users.noreply.github.com' - git checkout -b version-non-patch-from-${{ steps.bump-version.outputs.current-version }} + git checkout -b TEST-version-non-patch-from-${{ steps.bump-version.outputs.current-version }} git add . git commit -m "Write changelog for ${{ steps.bump-version.outputs.next-version }} [skip ci]" || true - git push --force origin version-non-patch-from-${{ steps.bump-version.outputs.current-version }} + git push --force origin TEST-version-non-patch-from-${{ steps.bump-version.outputs.current-version }} - name: Resolve merge-conflicts with base branch if: steps.is-prerelease.outputs.prerelease == 'false' @@ -159,13 +160,13 @@ jobs: if PR_STATE=$(gh pr view --json state --jq .state 2>/dev/null) && [[ -n "$PR_STATE" && "$PR_STATE" == *"OPEN"* ]]; then gh pr edit \ --repo "${{github.repository }}" \ - --title "Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \ + --title "TEST Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \ --base ${{ steps.is-prerelease.outputs.prerelease == 'true' && 'next-release' || 'latest-release' }} \ --body "${{ steps.description.outputs.description }}" else gh pr create \ --repo "${{github.repository }}"\ - --title "Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \ + --title "TEST Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \ --label "release" \ --base ${{ steps.is-prerelease.outputs.prerelease == 'true' && 'next-release' || 'latest-release' }} \ --head version-non-patch-from-${{ steps.bump-version.outputs.current-version }} \ From c457e1b33fdeb162c360ba486293d7f1d69cc313 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 5 Oct 2023 14:29:08 +0200 Subject: [PATCH 024/110] test stable preparation workflow --- .github/workflows/prepare-non-patch-release.yml | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/.github/workflows/prepare-non-patch-release.yml b/.github/workflows/prepare-non-patch-release.yml index 0cd4775363b8..00741a0495aa 100644 --- a/.github/workflows/prepare-non-patch-release.yml +++ b/.github/workflows/prepare-non-patch-release.yml @@ -115,7 +115,7 @@ jobs: - name: Check release vs prerelease id: is-prerelease - run: yarn release:is-prerelease ${{ steps.bump-version.outputs.next-version }} + run: yarn release:is-prerelease 7.6.0 - name: Write changelog env: @@ -128,10 +128,10 @@ jobs: run: | git config --global user.name 'storybook-bot' git config --global user.email '32066757+storybook-bot@users.noreply.github.com' - git checkout -b TEST-version-non-patch-from-${{ steps.bump-version.outputs.current-version }} + git checkout -b TEST2-version-non-patch-from-${{ steps.bump-version.outputs.current-version }} git add . git commit -m "Write changelog for ${{ steps.bump-version.outputs.next-version }} [skip ci]" || true - git push --force origin TEST-version-non-patch-from-${{ steps.bump-version.outputs.current-version }} + git push --force origin TEST2-version-non-patch-from-${{ steps.bump-version.outputs.current-version }} - name: Resolve merge-conflicts with base branch if: steps.is-prerelease.outputs.prerelease == 'false' @@ -160,13 +160,13 @@ jobs: if PR_STATE=$(gh pr view --json state --jq .state 2>/dev/null) && [[ -n "$PR_STATE" && "$PR_STATE" == *"OPEN"* ]]; then gh pr edit \ --repo "${{github.repository }}" \ - --title "TEST Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \ + --title "TEST2 Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \ --base ${{ steps.is-prerelease.outputs.prerelease == 'true' && 'next-release' || 'latest-release' }} \ --body "${{ steps.description.outputs.description }}" else gh pr create \ --repo "${{github.repository }}"\ - --title "TEST Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \ + --title "TEST2 Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \ --label "release" \ --base ${{ steps.is-prerelease.outputs.prerelease == 'true' && 'next-release' || 'latest-release' }} \ --head version-non-patch-from-${{ steps.bump-version.outputs.current-version }} \ From b0d68380677b80a7500d980d069a4f0d8166d598 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Thu, 5 Oct 2023 14:43:48 +0200 Subject: [PATCH 025/110] test stable workflow --- .github/workflows/prepare-non-patch-release.yml | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/.github/workflows/prepare-non-patch-release.yml b/.github/workflows/prepare-non-patch-release.yml index 00741a0495aa..c0e3c8b36eaa 100644 --- a/.github/workflows/prepare-non-patch-release.yml +++ b/.github/workflows/prepare-non-patch-release.yml @@ -115,7 +115,7 @@ jobs: - name: Check release vs prerelease id: is-prerelease - run: yarn release:is-prerelease 7.6.0 + run: yarn release:is-prerelease - name: Write changelog env: @@ -128,13 +128,13 @@ jobs: run: | git config --global user.name 'storybook-bot' git config --global user.email '32066757+storybook-bot@users.noreply.github.com' - git checkout -b TEST2-version-non-patch-from-${{ steps.bump-version.outputs.current-version }} + git checkout -b TEST3-version-non-patch-from-${{ steps.bump-version.outputs.current-version }} git add . git commit -m "Write changelog for ${{ steps.bump-version.outputs.next-version }} [skip ci]" || true - git push --force origin TEST2-version-non-patch-from-${{ steps.bump-version.outputs.current-version }} + git push --force origin TEST3-version-non-patch-from-${{ steps.bump-version.outputs.current-version }} - name: Resolve merge-conflicts with base branch - if: steps.is-prerelease.outputs.prerelease == 'false' + if: steps.is-prerelease.outputs.prerelease != 'false' working-directory: . env: GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} @@ -160,15 +160,15 @@ jobs: if PR_STATE=$(gh pr view --json state --jq .state 2>/dev/null) && [[ -n "$PR_STATE" && "$PR_STATE" == *"OPEN"* ]]; then gh pr edit \ --repo "${{github.repository }}" \ - --title "TEST2 Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \ - --base ${{ steps.is-prerelease.outputs.prerelease == 'true' && 'next-release' || 'latest-release' }} \ + --title "TEST3 Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \ + --base ${{ steps.is-prerelease.outputs.prerelease != 'true' && 'next-release' || 'latest-release' }} \ --body "${{ steps.description.outputs.description }}" else gh pr create \ --repo "${{github.repository }}"\ - --title "TEST2 Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \ + --title "TEST3 Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \ --label "release" \ - --base ${{ steps.is-prerelease.outputs.prerelease == 'true' && 'next-release' || 'latest-release' }} \ + --base ${{ steps.is-prerelease.outputs.prerelease != 'true' && 'next-release' || 'latest-release' }} \ --head version-non-patch-from-${{ steps.bump-version.outputs.current-version }} \ --body "${{ steps.description.outputs.description }}" fi From 15370fd1c75a02d36b5c60a46573e3930b6d45e0 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 5 Oct 2023 08:54:32 -0400 Subject: [PATCH 026/110] Add instructions for installing yarn --- docs/contribute/code.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/contribute/code.md b/docs/contribute/code.md index e0317f634c8d..9b91bd64cb98 100644 --- a/docs/contribute/code.md +++ b/docs/contribute/code.md @@ -17,6 +17,12 @@ Start by [forking](https://docs.github.com/en/github/getting-started-with-github git clone https://github.com/your-username/storybook.git ``` +Storybook uses the [yarn](https://v3.yarnpkg.com/) package manager. Use [corepack](https://github.com/nodejs/corepack) to set up the correct version for use with Storybook. + +```shell +corepack enable +``` + ## Run your first sandbox Storybook development happens in a set of _sandboxes_ which are templated Storybook environments corresponding to different user setups. Within each sandbox, we inject a set of generalized stories that allow us to test core features and addons in all such environments. From 806ea52995e1fe2e637fdfad9b1c7a11ff0d90b4 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 5 Oct 2023 08:54:52 -0400 Subject: [PATCH 027/110] Add step to cd into storybook directory --- docs/contribute/code.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/contribute/code.md b/docs/contribute/code.md index 9b91bd64cb98..fbc3dda02955 100644 --- a/docs/contribute/code.md +++ b/docs/contribute/code.md @@ -15,6 +15,7 @@ Start by [forking](https://docs.github.com/en/github/getting-started-with-github ```shell git clone https://github.com/your-username/storybook.git +cd storybook ``` Storybook uses the [yarn](https://v3.yarnpkg.com/) package manager. Use [corepack](https://github.com/nodejs/corepack) to set up the correct version for use with Storybook. From 1a75c1cf35e89b4b50f7691fc885b2255f255d1b Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 5 Oct 2023 09:05:30 -0400 Subject: [PATCH 028/110] Add Vite 5 to peer dependencies --- code/builders/builder-vite/package.json | 2 +- code/frameworks/preact-vite/package.json | 2 +- code/frameworks/react-vite/package.json | 2 +- code/frameworks/svelte-vite/package.json | 2 +- code/frameworks/vue-vite/package.json | 2 +- code/frameworks/vue3-vite/package.json | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 6e0cc80db781..23e46183d29b 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -72,7 +72,7 @@ "peerDependencies": { "@preact/preset-vite": "*", "typescript": ">= 4.3.x", - "vite": "^3.0.0 || ^4.0.0", + "vite": "^3.0.0 || ^4.0.0 || ^5.0.0", "vite-plugin-glimmerx": "*" }, "peerDependenciesMeta": { diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 3df266adecec..57a1eeca2287 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -58,7 +58,7 @@ }, "peerDependencies": { "preact": ">=10", - "vite": "^3.0.0 || ^4.0.0" + "vite": "^3.0.0 || ^4.0.0 || ^5.0.0" }, "engines": { "node": ">=16" diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 15026f5f0af8..babc6acc6b7f 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -63,7 +63,7 @@ "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "vite": "^3.0.0 || ^4.0.0" + "vite": "^3.0.0 || ^4.0.0 || ^5.0.0" }, "engines": { "node": ">=16" diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 5eabe2366d49..ecf4ec434c6d 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -63,7 +63,7 @@ }, "peerDependencies": { "svelte": "^3.0.0 || ^4.0.0", - "vite": "^3.0.0 || ^4.0.0" + "vite": "^3.0.0 || ^4.0.0 || ^5.0.0" }, "engines": { "node": "^14.18 || >=16" diff --git a/code/frameworks/vue-vite/package.json b/code/frameworks/vue-vite/package.json index d081aa9f1c37..be83a6bf53e7 100644 --- a/code/frameworks/vue-vite/package.json +++ b/code/frameworks/vue-vite/package.json @@ -62,7 +62,7 @@ "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "vite": "^3.0.0 || ^4.0.0", + "vite": "^3.0.0 || ^4.0.0 || ^5.0.0", "vue": "^2.7.0" }, "engines": { diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 440d63740f21..a2900bd97025 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -62,7 +62,7 @@ "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "vite": "^3.0.0 || ^4.0.0" + "vite": "^3.0.0 || ^4.0.0 || ^5.0.0" }, "engines": { "node": "^14.18 || >=16" From 12448d86ed1e357ca3f932604afacc50f779c651 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 5 Oct 2023 09:06:41 -0400 Subject: [PATCH 029/110] Install vite beta in sandboxes --- code/lib/cli/src/sandbox-templates.ts | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index 69e858f1d14f..0f762b425690 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -139,7 +139,7 @@ const baseTemplates = { }, 'react-vite/default-js': { name: 'React Latest (Vite | JavaScript)', - script: 'npm create vite@latest --yes {{beforeDir}} -- --template react', + script: 'npm create vite@beta --yes {{beforeDir}} -- --template react', expected: { framework: '@storybook/react-vite', renderer: '@storybook/react', @@ -149,7 +149,7 @@ const baseTemplates = { }, 'react-vite/default-ts': { name: 'React Latest (Vite | TypeScript)', - script: 'npm create vite@latest --yes {{beforeDir}} -- --template react-ts', + script: 'npm create vite@beta --yes {{beforeDir}} -- --template react-ts', expected: { framework: '@storybook/react-vite', renderer: '@storybook/react', @@ -204,7 +204,7 @@ const baseTemplates = { }, 'vue3-vite/default-js': { name: 'Vue v3 (Vite | JavaScript)', - script: 'npm create vite@latest --yes {{beforeDir}} -- --template vue', + script: 'npm create vite@beta --yes {{beforeDir}} -- --template vue', expected: { framework: '@storybook/vue3-vite', renderer: '@storybook/vue3', @@ -214,7 +214,7 @@ const baseTemplates = { }, 'vue3-vite/default-ts': { name: 'Vue v3 (Vite | TypeScript)', - script: 'npm create vite@latest --yes {{beforeDir}} -- --template vue-ts', + script: 'npm create vite@beta --yes {{beforeDir}} -- --template vue-ts', expected: { framework: '@storybook/vue3-vite', renderer: '@storybook/vue3', @@ -246,7 +246,7 @@ const baseTemplates = { 'html-vite/default-js': { name: 'HTML Latest (Vite | JavaScript)', script: - 'npm create vite@latest --yes {{beforeDir}} -- --template vanilla && cd {{beforeDir}} && echo "export default {}" > vite.config.js', + 'npm create vite@beta --yes {{beforeDir}} -- --template vanilla && cd {{beforeDir}} && echo "export default {}" > vite.config.js', expected: { framework: '@storybook/html-vite', renderer: '@storybook/html', @@ -257,7 +257,7 @@ const baseTemplates = { 'html-vite/default-ts': { name: 'HTML Latest (Vite | TypeScript)', script: - 'npm create vite@latest --yes {{beforeDir}} -- --template vanilla-ts && cd {{beforeDir}} && echo "export default {}" > vite.config.js', + 'npm create vite@beta --yes {{beforeDir}} -- --template vanilla-ts && cd {{beforeDir}} && echo "export default {}" > vite.config.js', expected: { framework: '@storybook/html-vite', renderer: '@storybook/html', @@ -267,7 +267,7 @@ const baseTemplates = { }, 'svelte-vite/default-js': { name: 'Svelte Latest (Vite | JavaScript)', - script: 'npm create vite@latest --yes {{beforeDir}} -- --template svelte', + script: 'npm create vite@beta --yes {{beforeDir}} -- --template svelte', expected: { framework: '@storybook/svelte-vite', renderer: '@storybook/svelte', @@ -277,7 +277,7 @@ const baseTemplates = { }, 'svelte-vite/default-ts': { name: 'Svelte Latest (Vite | TypeScript)', - script: 'npm create vite@latest --yes {{beforeDir}} -- --template svelte-ts', + script: 'npm create vite@beta --yes {{beforeDir}} -- --template svelte-ts', expected: { framework: '@storybook/svelte-vite', renderer: '@storybook/svelte', @@ -346,7 +346,7 @@ const baseTemplates = { 'lit-vite/default-js': { name: 'Lit Latest (Vite | JavaScript)', script: - 'npm create vite@latest --yes {{beforeDir}} -- --template lit && cd {{beforeDir}} && echo "export default {}" > vite.config.js', + 'npm create vite@beta --yes {{beforeDir}} -- --template lit && cd {{beforeDir}} && echo "export default {}" > vite.config.js', expected: { framework: '@storybook/web-components-vite', renderer: '@storybook/web-components', @@ -358,7 +358,7 @@ const baseTemplates = { 'lit-vite/default-ts': { name: 'Lit Latest (Vite | TypeScript)', script: - 'npm create vite@latest --yes {{beforeDir}} -- --template lit-ts && cd {{beforeDir}} && echo "export default {}" > vite.config.js', + 'npm create vite@beta --yes {{beforeDir}} -- --template lit-ts && cd {{beforeDir}} && echo "export default {}" > vite.config.js', expected: { framework: '@storybook/web-components-vite', renderer: '@storybook/web-components', @@ -415,7 +415,7 @@ const baseTemplates = { }, 'preact-vite/default-js': { name: 'Preact Latest (Vite | JavaScript)', - script: 'npm create vite@latest --yes {{beforeDir}} -- --template preact', + script: 'npm create vite@beta --yes {{beforeDir}} -- --template preact', expected: { framework: '@storybook/preact-vite', renderer: '@storybook/preact', @@ -425,7 +425,7 @@ const baseTemplates = { }, 'preact-vite/default-ts': { name: 'Preact Latest (Vite | TypeScript)', - script: 'npm create vite@latest --yes {{beforeDir}} -- --template preact-ts', + script: 'npm create vite@beta --yes {{beforeDir}} -- --template preact-ts', expected: { framework: '@storybook/preact-vite', renderer: '@storybook/preact', From 77cd89cdaea563fb979ba030586d4ce5fcec9271 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 5 Oct 2023 09:32:24 -0400 Subject: [PATCH 030/110] Update @joshwooding/vite-plugin-react-docgen-typescript to support vite 5 --- code/frameworks/react-vite/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index babc6acc6b7f..b5814ef0b71a 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -47,7 +47,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@joshwooding/vite-plugin-react-docgen-typescript": "0.2.1", + "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.0", "@rollup/pluginutils": "^5.0.2", "@storybook/builder-vite": "workspace:*", "@storybook/react": "workspace:*", From cc10c62b893d23c60b6a0ba881783db385ae362a Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 5 Oct 2023 09:32:30 -0400 Subject: [PATCH 031/110] Update yarn lock --- code/yarn.lock | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/code/yarn.lock b/code/yarn.lock index 3ec46c6397a8..375d333d7fe8 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -3731,9 +3731,9 @@ __metadata: languageName: node linkType: hard -"@joshwooding/vite-plugin-react-docgen-typescript@npm:0.2.1": - version: 0.2.1 - resolution: "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.2.1" +"@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.0": + version: 0.3.0 + resolution: "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.0" dependencies: glob: ^7.2.0 glob-promise: ^4.2.0 @@ -3741,11 +3741,11 @@ __metadata: react-docgen-typescript: ^2.2.2 peerDependencies: typescript: ">= 4.3.x" - vite: ^3.0.0 || ^4.0.0 + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 peerDependenciesMeta: typescript: optional: true - checksum: 506fea864748cce273d19c628c69ef529c4ec4b3d3a5f0d8fb9ab430dc45a0155a2ac52881410f5a475ddb6c34bc8a344b64f4edd9f738c02d43275e991906ee + checksum: 31098ad8fcc2440437534599c111d9f2951dd74821e8ba46c521b969bae4c918d830b7bb0484efbad29a51711bb62d3bc623d5a1ed5b1695b5b5594ea9dd4ca0 languageName: node linkType: hard @@ -6517,7 +6517,7 @@ __metadata: peerDependencies: "@preact/preset-vite": "*" typescript: ">= 4.3.x" - vite: ^3.0.0 || ^4.0.0 + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 vite-plugin-glimmerx: "*" peerDependenciesMeta: "@preact/preset-vite": @@ -7344,7 +7344,7 @@ __metadata: vite: ^4.0.0 peerDependencies: preact: ">=10" - vite: ^3.0.0 || ^4.0.0 + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 languageName: unknown linkType: soft @@ -7652,7 +7652,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/react-vite@workspace:frameworks/react-vite" dependencies: - "@joshwooding/vite-plugin-react-docgen-typescript": 0.2.1 + "@joshwooding/vite-plugin-react-docgen-typescript": 0.3.0 "@rollup/pluginutils": ^5.0.2 "@storybook/builder-vite": "workspace:*" "@storybook/react": "workspace:*" @@ -7665,7 +7665,7 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - vite: ^3.0.0 || ^4.0.0 + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 languageName: unknown linkType: soft @@ -8019,7 +8019,7 @@ __metadata: vite: ^4.0.0 peerDependencies: svelte: ^3.0.0 || ^4.0.0 - vite: ^3.0.0 || ^4.0.0 + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 languageName: unknown linkType: soft @@ -8181,7 +8181,7 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - vite: ^3.0.0 || ^4.0.0 + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 vue: ^2.7.0 languageName: unknown linkType: soft @@ -8227,7 +8227,7 @@ __metadata: peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - vite: ^3.0.0 || ^4.0.0 + vite: ^3.0.0 || ^4.0.0 || ^5.0.0 languageName: unknown linkType: soft From 5184a7af6773a2c0e50ee4aa84f3b540d98a1e45 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 5 Oct 2023 15:45:01 +0200 Subject: [PATCH 032/110] add more angular options webpackStatsJson previewUrl loglevel --- .../angular/src/builders/build-storybook/index.ts | 3 +++ .../src/builders/build-storybook/schema.json | 4 ++++ .../angular/src/builders/start-storybook/index.ts | 9 +++++++++ .../src/builders/start-storybook/schema.json | 14 ++++++++++++++ 4 files changed, 30 insertions(+) diff --git a/code/frameworks/angular/src/builders/build-storybook/index.ts b/code/frameworks/angular/src/builders/build-storybook/index.ts index a33b1f4b9776..2c72b4d46962 100644 --- a/code/frameworks/angular/src/builders/build-storybook/index.ts +++ b/code/frameworks/angular/src/builders/build-storybook/index.ts @@ -49,6 +49,7 @@ export type StorybookBuilderOptions = JsonObject & { | 'webpackStatsJson' | 'disableTelemetry' | 'debugWebpack' + | 'previewUrl' >; export type StorybookBuilderOutput = JsonObject & BuilderOutput & { [key: string]: any }; @@ -90,6 +91,7 @@ const commandBuilder: BuilderHandlerFn = ( debugWebpack, disableTelemetry, assets, + previewUrl, } = options; const standaloneOptions: StandaloneBuildOptions = { @@ -111,6 +113,7 @@ const commandBuilder: BuilderHandlerFn = ( tsConfig, webpackStatsJson, debugWebpack, + previewUrl, }; return standaloneOptions; diff --git a/code/frameworks/angular/src/builders/build-storybook/schema.json b/code/frameworks/angular/src/builders/build-storybook/schema.json index 51f24c17a46a..958e6ea7cc1f 100644 --- a/code/frameworks/angular/src/builders/build-storybook/schema.json +++ b/code/frameworks/angular/src/builders/build-storybook/schema.json @@ -67,6 +67,10 @@ "description": "Write Webpack Stats JSON to disk", "default": false }, + "previewUrl": { + "type": "string", + "description": "Disables the default storybook preview and lets you use your own" + }, "styles": { "type": "array", "description": "Global styles to be included in the build.", diff --git a/code/frameworks/angular/src/builders/start-storybook/index.ts b/code/frameworks/angular/src/builders/start-storybook/index.ts index cff33f886fb6..b9fabda386f7 100644 --- a/code/frameworks/angular/src/builders/start-storybook/index.ts +++ b/code/frameworks/angular/src/builders/start-storybook/index.ts @@ -54,6 +54,9 @@ export type StorybookBuilderOptions = JsonObject & { | 'open' | 'docs' | 'debugWebpack' + | 'webpackStatsJson' + | 'loglevel' + | 'previewUrl' >; export type StorybookBuilderOutput = JsonObject & BuilderOutput & {}; @@ -105,6 +108,9 @@ const commandBuilder: BuilderHandlerFn = (options, cont initialPath, open, debugWebpack, + loglevel, + webpackStatsJson, + previewUrl, } = options; const standaloneOptions: StandaloneOptions = { @@ -133,6 +139,9 @@ const commandBuilder: BuilderHandlerFn = (options, cont initialPath, open, debugWebpack, + loglevel, + webpackStatsJson, + previewUrl, }; return standaloneOptions; diff --git a/code/frameworks/angular/src/builders/start-storybook/schema.json b/code/frameworks/angular/src/builders/start-storybook/schema.json index 78553109681c..d44d9c9f4f14 100644 --- a/code/frameworks/angular/src/builders/start-storybook/schema.json +++ b/code/frameworks/angular/src/builders/start-storybook/schema.json @@ -128,6 +128,20 @@ "initialPath": { "type": "string", "description": "URL path to be appended when visiting Storybook for the first time" + }, + "webpackStatsJson": { + "type": "string", + "description": "Write Webpack Stats JSON to disk", + "default": false + }, + "previewUrl": { + "type": "string", + "description": "Disables the default storybook preview and lets you use your own" + }, + "loglevel": { + "type": "string", + "description": "Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent].", + "pattern": "(silly|verbose|info|warn|silent)" } }, "additionalProperties": false, From f262b6352ad4f09baffa99f4675a75d7ae3b2233 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 5 Oct 2023 11:28:17 -0400 Subject: [PATCH 033/110] Use dynamic import of Vite functions --- code/builders/builder-vite/src/build.ts | 3 +- .../builder-vite/src/codegen-entries.ts | 10 +++- .../src/codegen-importfn-script.ts | 3 +- .../builders/builder-vite/src/list-stories.ts | 3 +- .../builders/builder-vite/src/optimizeDeps.ts | 2 +- .../src/plugins/external-globals-plugin.ts | 3 +- .../src/plugins/inject-export-order-plugin.ts | 55 ++++++++++--------- .../src/plugins/strip-story-hmr-boundaries.ts | 5 +- code/builders/builder-vite/src/vite-config.ts | 7 ++- code/builders/builder-vite/src/vite-server.ts | 2 +- 10 files changed, 52 insertions(+), 41 deletions(-) diff --git a/code/builders/builder-vite/src/build.ts b/code/builders/builder-vite/src/build.ts index 0a75cc71b3a2..67da9f989692 100644 --- a/code/builders/builder-vite/src/build.ts +++ b/code/builders/builder-vite/src/build.ts @@ -1,10 +1,10 @@ -import { build as viteBuild, mergeConfig } from 'vite'; import type { Options } from '@storybook/types'; import { commonConfig } from './vite-config'; import { sanitizeEnvVars } from './envs'; export async function build(options: Options) { + const { build: viteBuild, mergeConfig } = await import('vite'); const { presets } = options; const config = await commonConfig(options, 'build'); @@ -21,6 +21,5 @@ export async function build(options: Options) { }).build; const finalConfig = await presets.apply('viteFinal', config, options); - await viteBuild(await sanitizeEnvVars(options, finalConfig)); } diff --git a/code/builders/builder-vite/src/codegen-entries.ts b/code/builders/builder-vite/src/codegen-entries.ts index 6a6328cf8f96..7c41a911b593 100644 --- a/code/builders/builder-vite/src/codegen-entries.ts +++ b/code/builders/builder-vite/src/codegen-entries.ts @@ -1,15 +1,19 @@ import { loadPreviewOrConfigFile } from '@storybook/core-common'; import type { Options } from '@storybook/types'; import slash from 'slash'; -import { normalizePath } from 'vite'; import { listStories } from './list-stories'; -const absoluteFilesToImport = (files: string[], name: string) => +const absoluteFilesToImport = async ( + files: string[], + name: string, + normalizePath: (id: string) => string +) => files .map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'/@fs/${normalizePath(el)}'`) .join('\n'); export async function generateVirtualStoryEntryCode(options: Options) { + const { normalizePath } = await import('vite'); const storyEntries = await listStories(options); const resolveMap = storyEntries.reduce>( (prev, entry) => ({ ...prev, [entry]: entry.replace(slash(process.cwd()), '.') }), @@ -18,7 +22,7 @@ export async function generateVirtualStoryEntryCode(options: Options) { const modules = storyEntries.map((entry, i) => `${JSON.stringify(entry)}: story_${i}`).join(','); return ` - ${absoluteFilesToImport(storyEntries, 'story')} + ${absoluteFilesToImport(storyEntries, 'story', normalizePath)} function loadable(key) { return {${modules}}[key]; diff --git a/code/builders/builder-vite/src/codegen-importfn-script.ts b/code/builders/builder-vite/src/codegen-importfn-script.ts index f81c4647f641..5df14d875f25 100644 --- a/code/builders/builder-vite/src/codegen-importfn-script.ts +++ b/code/builders/builder-vite/src/codegen-importfn-script.ts @@ -1,5 +1,5 @@ import * as path from 'path'; -import { normalizePath } from 'vite'; + import type { Options } from '@storybook/types'; import { logger } from '@storybook/node-logger'; @@ -26,6 +26,7 @@ function toImportPath(relativePath: string) { * @param stories An array of absolute story paths. */ async function toImportFn(stories: string[]) { + const { normalizePath } = await import('vite'); const objectEntries = stories.map((file) => { const ext = path.extname(file); const relativePath = normalizePath(path.relative(process.cwd(), file)); diff --git a/code/builders/builder-vite/src/list-stories.ts b/code/builders/builder-vite/src/list-stories.ts index 746373c4c0f5..521952bff15a 100644 --- a/code/builders/builder-vite/src/list-stories.ts +++ b/code/builders/builder-vite/src/list-stories.ts @@ -4,9 +4,10 @@ import { glob } from 'glob'; import { normalizeStories, commonGlobOptions } from '@storybook/core-common'; import type { Options } from '@storybook/types'; -import { normalizePath } from 'vite'; export async function listStories(options: Options) { + const { normalizePath } = await import('vite'); + return ( await Promise.all( normalizeStories(await options.presets.apply('stories', [], options), { diff --git a/code/builders/builder-vite/src/optimizeDeps.ts b/code/builders/builder-vite/src/optimizeDeps.ts index 43c64f34a7e4..ddb32c800403 100644 --- a/code/builders/builder-vite/src/optimizeDeps.ts +++ b/code/builders/builder-vite/src/optimizeDeps.ts @@ -1,5 +1,4 @@ import * as path from 'path'; -import { normalizePath, resolveConfig } from 'vite'; import type { InlineConfig as ViteInlineConfig, UserConfig } from 'vite'; import type { Options } from '@storybook/types'; import { listStories } from './list-stories'; @@ -128,6 +127,7 @@ const asyncFilter = async (arr: string[], predicate: (val: string) => Promise normalizePath(path.relative(root, storyPath))); // TODO: check if resolveConfig takes a lot of time, possible optimizations here diff --git a/code/builders/builder-vite/src/plugins/external-globals-plugin.ts b/code/builders/builder-vite/src/plugins/external-globals-plugin.ts index dd53ab4a4e56..1debc299aa99 100644 --- a/code/builders/builder-vite/src/plugins/external-globals-plugin.ts +++ b/code/builders/builder-vite/src/plugins/external-globals-plugin.ts @@ -3,7 +3,6 @@ import findCacheDirectory from 'find-cache-dir'; import { init, parse } from 'es-module-lexer'; import MagicString from 'magic-string'; import { ensureFile, writeFile } from 'fs-extra'; -import { mergeAlias } from 'vite'; import type { Alias, Plugin } from 'vite'; const escapeKeys = (key: string) => key.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'); @@ -38,6 +37,8 @@ const replacementMap = new Map([ */ export async function externalGlobalsPlugin(externals: Record) { await init; + const { mergeAlias } = await import('vite'); + return { name: 'storybook:external-globals-plugin', enforce: 'post', diff --git a/code/builders/builder-vite/src/plugins/inject-export-order-plugin.ts b/code/builders/builder-vite/src/plugins/inject-export-order-plugin.ts index 743043f7427c..621dae80e647 100644 --- a/code/builders/builder-vite/src/plugins/inject-export-order-plugin.ts +++ b/code/builders/builder-vite/src/plugins/inject-export-order-plugin.ts @@ -1,32 +1,35 @@ import { parse } from 'es-module-lexer'; import MagicString from 'magic-string'; -import { createFilter } from 'vite'; -const include = [/\.stories\.([tj])sx?$/, /(stories|story).mdx$/]; -const filter = createFilter(include); +export async function injectExportOrderPlugin() { + const { createFilter } = await import('vite'); -export const injectExportOrderPlugin = { - name: 'storybook:inject-export-order-plugin', - // This should only run after the typescript has been transpiled - enforce: 'post', - async transform(code: string, id: string) { - if (!filter(id)) return undefined; + const include = [/\.stories\.([tj])sx?$/, /(stories|story).mdx$/]; + const filter = createFilter(include); - // TODO: Maybe convert `injectExportOrderPlugin` to function that returns object, - // and run `await init;` once and then call `parse()` without `await`, - // instead of calling `await parse()` every time. - const [, exports] = await parse(code); + return { + name: 'storybook:inject-export-order-plugin', + // This should only run after the typescript has been transpiled + enforce: 'post', + async transform(code: string, id: string) { + if (!filter(id)) return undefined; - if (exports.includes('__namedExportsOrder')) { - // user has defined named exports already - return undefined; - } - const s = new MagicString(code); - const orderedExports = exports.filter((e) => e !== 'default'); - s.append(`;export const __namedExportsOrder = ${JSON.stringify(orderedExports)};`); - return { - code: s.toString(), - map: s.generateMap({ hires: true, source: id }), - }; - }, -}; + // TODO: Maybe convert `injectExportOrderPlugin` to function that returns object, + // and run `await init;` once and then call `parse()` without `await`, + // instead of calling `await parse()` every time. + const [, exports] = await parse(code); + + if (exports.includes('__namedExportsOrder')) { + // user has defined named exports already + return undefined; + } + const s = new MagicString(code); + const orderedExports = exports.filter((e) => e !== 'default'); + s.append(`;export const __namedExportsOrder = ${JSON.stringify(orderedExports)};`); + return { + code: s.toString(), + map: s.generateMap({ hires: true, source: id }), + }; + }, + }; +} diff --git a/code/builders/builder-vite/src/plugins/strip-story-hmr-boundaries.ts b/code/builders/builder-vite/src/plugins/strip-story-hmr-boundaries.ts index 46ca7045e6d5..c249fc523d1a 100644 --- a/code/builders/builder-vite/src/plugins/strip-story-hmr-boundaries.ts +++ b/code/builders/builder-vite/src/plugins/strip-story-hmr-boundaries.ts @@ -1,5 +1,4 @@ import type { Plugin } from 'vite'; -import { createFilter } from 'vite'; import MagicString from 'magic-string'; /** @@ -7,7 +6,9 @@ import MagicString from 'magic-string'; * as hmr boundaries, but vite has a bug which causes them to be treated as boundaries * (https://github.com/vitejs/vite/issues/9869). */ -export function stripStoryHMRBoundary(): Plugin { +export async function stripStoryHMRBoundary(): Promise { + const { createFilter } = await import('vite'); + const filter = createFilter(/\.stories\.([tj])sx?$/); return { name: 'storybook:strip-hmr-boundary-plugin', diff --git a/code/builders/builder-vite/src/vite-config.ts b/code/builders/builder-vite/src/vite-config.ts index 75778971b26a..24db49249909 100644 --- a/code/builders/builder-vite/src/vite-config.ts +++ b/code/builders/builder-vite/src/vite-config.ts @@ -1,5 +1,4 @@ import * as path from 'path'; -import { loadConfigFromFile, mergeConfig } from 'vite'; import findCacheDirectory from 'find-cache-dir'; import type { ConfigEnv, @@ -41,6 +40,8 @@ export async function commonConfig( _type: PluginConfigType ): Promise { const configEnv = _type === 'development' ? configEnvServe : configEnvBuild; + const { loadConfigFromFile, mergeConfig } = await import('vite'); + const { viteConfigPath } = await getBuilderOptions(options); const projectRoot = path.resolve(options.configDir, '..'); @@ -80,8 +81,8 @@ export async function pluginConfig(options: Options) { const plugins = [ codeGeneratorPlugin(options), await csfPlugin(options), - injectExportOrderPlugin, - stripStoryHMRBoundary(), + await injectExportOrderPlugin(), + await stripStoryHMRBoundary(), { name: 'storybook:allow-storybook-dir', enforce: 'post', diff --git a/code/builders/builder-vite/src/vite-server.ts b/code/builders/builder-vite/src/vite-server.ts index 13489d8580e5..ce4631cabaed 100644 --- a/code/builders/builder-vite/src/vite-server.ts +++ b/code/builders/builder-vite/src/vite-server.ts @@ -1,5 +1,4 @@ import type { Server } from 'http'; -import { createServer } from 'vite'; import type { Options } from '@storybook/types'; import { commonConfig } from './vite-config'; import { getOptimizeDeps } from './optimizeDeps'; @@ -29,5 +28,6 @@ export async function createViteServer(options: Options, devServer: Server) { const finalConfig = await presets.apply('viteFinal', config, options); + const { createServer } = await import('vite'); return createServer(await sanitizeEnvVars(options, finalConfig)); } From 954c76cee8b4bb345e53b74c1f8611b996399099 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 5 Oct 2023 12:18:25 -0400 Subject: [PATCH 034/110] Use Vite 5 beta in devDependencies --- code/addons/docs/package.json | 2 +- code/builders/builder-vite/package.json | 2 +- code/frameworks/preact-vite/package.json | 2 +- code/frameworks/react-vite/package.json | 2 +- code/frameworks/svelte-vite/package.json | 2 +- code/frameworks/sveltekit/package.json | 4 +-- code/frameworks/vue-vite/package.json | 2 +- code/frameworks/vue3-vite/package.json | 2 +- code/package.json | 2 +- code/yarn.lock | 46 ++++++++++++------------ 10 files changed, 33 insertions(+), 33 deletions(-) diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 39294a7573b8..be9012fa635e 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -123,7 +123,7 @@ "react": "^16.14.0", "react-dom": "^16.8.0", "typescript": "~4.9.3", - "vite": "^4.0.4" + "vite": "^5.0.0-beta.4" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 23e46183d29b..2f36e2425faa 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -67,7 +67,7 @@ "rollup": "^3.20.1", "slash": "^5.0.0", "typescript": "~4.9.3", - "vite": "^4.0.4" + "vite": "^5.0.0-beta.4" }, "peerDependencies": { "@preact/preset-vite": "*", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 57a1eeca2287..1cc587c0f3fa 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -54,7 +54,7 @@ "devDependencies": { "@types/node": "^16.0.0", "typescript": "~4.9.3", - "vite": "^4.0.0" + "vite": "^5.0.0-beta.4" }, "peerDependencies": { "preact": ">=10", diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index b5814ef0b71a..66a375526fe8 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -58,7 +58,7 @@ "devDependencies": { "@types/node": "^16.0.0", "typescript": "~4.9.3", - "vite": "^4.0.0" + "vite": "^5.0.0-beta.4" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index ecf4ec434c6d..f2262f94c6b6 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -59,7 +59,7 @@ "@types/node": "^16.0.0", "svelte": "^4.0.0", "typescript": "~4.9.3", - "vite": "^4.0.0" + "vite": "^5.0.0-beta.4" }, "peerDependencies": { "svelte": "^3.0.0 || ^4.0.0", diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 8b9f808420b5..ed161d4bc041 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -57,11 +57,11 @@ "devDependencies": { "@types/node": "^16.0.0", "typescript": "^4.9.3", - "vite": "^4.0.0" + "vite": "^5.0.0-beta.4" }, "peerDependencies": { "svelte": "^3.0.0 || ^4.0.0", - "vite": "^4.0.0" + "vite": "^5.0.0-beta.4" }, "engines": { "node": "^14.18 || >=16" diff --git a/code/frameworks/vue-vite/package.json b/code/frameworks/vue-vite/package.json index be83a6bf53e7..6c632989e394 100644 --- a/code/frameworks/vue-vite/package.json +++ b/code/frameworks/vue-vite/package.json @@ -56,7 +56,7 @@ }, "devDependencies": { "typescript": "~4.9.3", - "vite": "^4.0.0", + "vite": "^5.0.0-beta.4", "vue": "^2.7.10" }, "peerDependencies": { diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index a2900bd97025..1f67b902efd1 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -57,7 +57,7 @@ "devDependencies": { "@types/node": "^16.0.0", "typescript": "~4.9.3", - "vite": "^4.0.0" + "vite": "^5.0.0-beta.4" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", diff --git a/code/package.json b/code/package.json index 7a14a389b3d7..a7bb10867aa1 100644 --- a/code/package.json +++ b/code/package.json @@ -258,7 +258,7 @@ "ts-node": "^10.9.1", "typescript": "~4.9.3", "util": "^0.12.4", - "vite": "^4.0.0", + "vite": "^5.0.0-beta.4", "vite-plugin-turbosnap": "^1.0.1", "wait-on": "^7.0.1" }, diff --git a/code/yarn.lock b/code/yarn.lock index 375d333d7fe8..dba868dc5a29 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5890,7 +5890,7 @@ __metadata: remark-slug: ^6.0.0 ts-dedent: ^2.0.0 typescript: ~4.9.3 - vite: ^4.0.4 + vite: ^5.0.0-beta.4 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -6513,7 +6513,7 @@ __metadata: rollup: ^3.20.1 slash: ^5.0.0 typescript: ~4.9.3 - vite: ^4.0.4 + vite: ^5.0.0-beta.4 peerDependencies: "@preact/preset-vite": "*" typescript: ">= 4.3.x" @@ -7341,7 +7341,7 @@ __metadata: "@storybook/preact": "workspace:*" "@types/node": ^16.0.0 typescript: ~4.9.3 - vite: ^4.0.0 + vite: ^5.0.0-beta.4 peerDependencies: preact: ">=10" vite: ^3.0.0 || ^4.0.0 || ^5.0.0 @@ -7661,7 +7661,7 @@ __metadata: magic-string: ^0.30.0 react-docgen: ^6.0.2 typescript: ~4.9.3 - vite: ^4.0.0 + vite: ^5.0.0-beta.4 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -7901,7 +7901,7 @@ __metadata: ts-node: ^10.9.1 typescript: ~4.9.3 util: ^0.12.4 - vite: ^4.0.0 + vite: ^5.0.0-beta.4 vite-plugin-turbosnap: ^1.0.1 wait-on: ^7.0.1 dependenciesMeta: @@ -8016,7 +8016,7 @@ __metadata: sveltedoc-parser: ^4.2.1 ts-dedent: ^2.2.0 typescript: ~4.9.3 - vite: ^4.0.0 + vite: ^5.0.0-beta.4 peerDependencies: svelte: ^3.0.0 || ^4.0.0 vite: ^3.0.0 || ^4.0.0 || ^5.0.0 @@ -8074,10 +8074,10 @@ __metadata: "@storybook/svelte-vite": "workspace:*" "@types/node": ^16.0.0 typescript: ^4.9.3 - vite: ^4.0.0 + vite: ^5.0.0-beta.4 peerDependencies: svelte: ^3.0.0 || ^4.0.0 - vite: ^4.0.0 + vite: ^5.0.0-beta.4 languageName: unknown linkType: soft @@ -8175,7 +8175,7 @@ __metadata: "@storybook/vue": "workspace:*" magic-string: ^0.30.0 typescript: ~4.9.3 - vite: ^4.0.0 + vite: ^5.0.0-beta.4 vue: ^2.7.10 vue-docgen-api: ^4.40.0 peerDependencies: @@ -8222,7 +8222,7 @@ __metadata: "@vitejs/plugin-vue": ^4.0.0 magic-string: ^0.30.0 typescript: ~4.9.3 - vite: ^4.0.0 + vite: ^5.0.0-beta.4 vue-docgen-api: ^4.40.0 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -17632,7 +17632,7 @@ __metadata: languageName: node linkType: hard -"fsevents@npm:^2.3.2, fsevents@npm:~2.3.2": +"fsevents@npm:^2.3.2, fsevents@npm:~2.3.2, fsevents@npm:~2.3.3": version: 2.3.3 resolution: "fsevents@npm:2.3.3" dependencies: @@ -17651,7 +17651,7 @@ __metadata: languageName: node linkType: hard -"fsevents@patch:fsevents@^2.3.2#~builtin, fsevents@patch:fsevents@~2.3.2#~builtin": +"fsevents@patch:fsevents@^2.3.2#~builtin, fsevents@patch:fsevents@~2.3.2#~builtin, fsevents@patch:fsevents@~2.3.3#~builtin": version: 2.3.3 resolution: "fsevents@patch:fsevents@npm%3A2.3.3#~builtin::version=2.3.3&hash=df0bf1" dependencies: @@ -26097,7 +26097,7 @@ __metadata: languageName: node linkType: hard -"postcss@npm:^8.1.10, postcss@npm:^8.2.14, postcss@npm:^8.4.14, postcss@npm:^8.4.21, postcss@npm:^8.4.23, postcss@npm:^8.4.26, postcss@npm:^8.4.27": +"postcss@npm:^8.1.10, postcss@npm:^8.2.14, postcss@npm:^8.4.14, postcss@npm:^8.4.21, postcss@npm:^8.4.23, postcss@npm:^8.4.26, postcss@npm:^8.4.30": version: 8.4.31 resolution: "postcss@npm:8.4.31" dependencies: @@ -28435,7 +28435,7 @@ __metadata: languageName: node linkType: hard -"rollup@npm:^3.20.1, rollup@npm:^3.25.2, rollup@npm:^3.27.1": +"rollup@npm:^3.20.1, rollup@npm:^3.25.2, rollup@npm:^3.29.2": version: 3.29.4 resolution: "rollup@npm:3.29.4" dependencies: @@ -31910,16 +31910,16 @@ __metadata: languageName: node linkType: hard -"vite@npm:^4.0.0, vite@npm:^4.0.4": - version: 4.4.10 - resolution: "vite@npm:4.4.10" +"vite@npm:^5.0.0-beta.4": + version: 5.0.0-beta.4 + resolution: "vite@npm:5.0.0-beta.4" dependencies: - esbuild: ^0.18.10 - fsevents: ~2.3.2 - postcss: ^8.4.27 - rollup: ^3.27.1 + esbuild: ^0.19.3 + fsevents: ~2.3.3 + postcss: ^8.4.30 + rollup: ^3.29.2 peerDependencies: - "@types/node": ">= 14" + "@types/node": ^18.0.0 || >=20.0.0 less: "*" lightningcss: ^1.21.0 sass: "*" @@ -31946,7 +31946,7 @@ __metadata: optional: true bin: vite: bin/vite.js - checksum: d1359f147eb84aad9922460848184f14295e76f335ab03f90a585886ff070e1a7c74996022b3bb07da0a3130c9829565b5556e6eb1d0db12a8aad26f3694d445 + checksum: df7247abd37069ec160c4c84c9d139328d33c7c768627a17fca0e8d3f452b2ff32ee75b978e08f563b57ad85c9d19e66f1e454dcac4050b7fca36aa1d508004d languageName: node linkType: hard From 619f8385c57fa71db17c40941aa5dfd933faef67 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 5 Oct 2023 14:52:25 -0400 Subject: [PATCH 035/110] Use dynamic import of slash --- code/builders/builder-vite/src/codegen-entries.ts | 2 +- code/builders/builder-vite/src/codegen-iframe-script.ts | 8 +++++--- .../builder-vite/src/codegen-modern-iframe-script.ts | 8 +++++--- code/builders/builder-vite/src/list-stories.ts | 2 +- .../builder-vite/src/utils/process-preview-annotation.ts | 8 ++++++-- 5 files changed, 18 insertions(+), 10 deletions(-) diff --git a/code/builders/builder-vite/src/codegen-entries.ts b/code/builders/builder-vite/src/codegen-entries.ts index 7c41a911b593..e74ecdb7a244 100644 --- a/code/builders/builder-vite/src/codegen-entries.ts +++ b/code/builders/builder-vite/src/codegen-entries.ts @@ -1,6 +1,5 @@ import { loadPreviewOrConfigFile } from '@storybook/core-common'; import type { Options } from '@storybook/types'; -import slash from 'slash'; import { listStories } from './list-stories'; const absoluteFilesToImport = async ( @@ -14,6 +13,7 @@ const absoluteFilesToImport = async ( export async function generateVirtualStoryEntryCode(options: Options) { const { normalizePath } = await import('vite'); + const slash = await import('slash'); const storyEntries = await listStories(options); const resolveMap = storyEntries.reduce>( (prev, entry) => ({ ...prev, [entry]: entry.replace(slash(process.cwd()), '.') }), diff --git a/code/builders/builder-vite/src/codegen-iframe-script.ts b/code/builders/builder-vite/src/codegen-iframe-script.ts index 94400f57a017..e46b09a023f5 100644 --- a/code/builders/builder-vite/src/codegen-iframe-script.ts +++ b/code/builders/builder-vite/src/codegen-iframe-script.ts @@ -12,9 +12,11 @@ export async function generateIframeScriptCode(options: Options, projectRoot: st [], options ); - const configEntries = [...previewAnnotations] - .filter(Boolean) - .map((path) => processPreviewAnnotation(path, projectRoot)); + const configEntries = await Promise.all( + [...previewAnnotations] + .filter(Boolean) + .map((path) => processPreviewAnnotation(path, projectRoot)) + ); const filesToImport = (files: string[], name: string) => files.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'${el}'`).join('\n'); diff --git a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts index 5bc163fba5fa..f497f55273a1 100644 --- a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts +++ b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts @@ -13,9 +13,11 @@ export async function generateModernIframeScriptCode(options: Options, projectRo [], options ); - const previewAnnotationURLs = [...previewAnnotations, previewOrConfigFile] - .filter(Boolean) - .map((path) => processPreviewAnnotation(path, projectRoot)); + const previewAnnotationURLs = await Promise.all( + [...previewAnnotations, previewOrConfigFile] + .filter(Boolean) + .map((path) => processPreviewAnnotation(path, projectRoot)) + ); // This is pulled out to a variable because it is reused in both the initial page load // and the HMR handler. We don't use the hot.accept callback params because only the changed diff --git a/code/builders/builder-vite/src/list-stories.ts b/code/builders/builder-vite/src/list-stories.ts index 521952bff15a..47d66fd08a4c 100644 --- a/code/builders/builder-vite/src/list-stories.ts +++ b/code/builders/builder-vite/src/list-stories.ts @@ -1,5 +1,4 @@ import * as path from 'path'; -import slash from 'slash'; import { glob } from 'glob'; import { normalizeStories, commonGlobOptions } from '@storybook/core-common'; @@ -7,6 +6,7 @@ import type { Options } from '@storybook/types'; export async function listStories(options: Options) { const { normalizePath } = await import('vite'); + const slash = await import('slash'); return ( await Promise.all( diff --git a/code/builders/builder-vite/src/utils/process-preview-annotation.ts b/code/builders/builder-vite/src/utils/process-preview-annotation.ts index a6d83b2f7093..3b462e838285 100644 --- a/code/builders/builder-vite/src/utils/process-preview-annotation.ts +++ b/code/builders/builder-vite/src/utils/process-preview-annotation.ts @@ -1,6 +1,5 @@ import type { PreviewAnnotation } from '@storybook/types'; import { resolve, isAbsolute, relative } from 'path'; -import slash from 'slash'; import { stripAbsNodeModulesPath } from '@storybook/core-common'; /** @@ -10,7 +9,12 @@ import { stripAbsNodeModulesPath } from '@storybook/core-common'; * For node_modules, we want bare imports (so vite can process them), * and for files in the user's source, we want URLs absolute relative to project root. */ -export function processPreviewAnnotation(path: PreviewAnnotation | undefined, projectRoot: string) { +export async function processPreviewAnnotation( + path: PreviewAnnotation | undefined, + projectRoot: string +) { + const slash = await import('slash'); + // If entry is an object, take the first, which is the // bare (non-absolute) specifier. // This is so that webpack can use an absolute path, and From a7bff7690eb7244e7dd219b9dc473d3b2d304119 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 5 Oct 2023 14:52:41 -0400 Subject: [PATCH 036/110] Try to use ESM mocks for jest test --- .../builder-vite/src/vite-config.test.ts | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/code/builders/builder-vite/src/vite-config.test.ts b/code/builders/builder-vite/src/vite-config.test.ts index c4f2f212be48..922c50cb90ac 100644 --- a/code/builders/builder-vite/src/vite-config.test.ts +++ b/code/builders/builder-vite/src/vite-config.test.ts @@ -1,12 +1,14 @@ import type { Options, Presets } from '@storybook/types'; -import { loadConfigFromFile } from 'vite'; +import { jest } from '@jest/globals'; import { commonConfig } from './vite-config'; -jest.mock('vite', () => ({ - ...jest.requireActual('vite'), +jest.unstable_mockModule('vite', () => ({ loadConfigFromFile: jest.fn(async () => ({})), })); -const loadConfigFromFileMock = jest.mocked(loadConfigFromFile); + +const loadConfigFromFileMock = async () => { + return jest.mocked((await import('vite')).loadConfigFromFile); +}; const dummyOptions: Options = { configType: 'DEVELOPMENT', @@ -30,7 +32,7 @@ const dummyOptions: Options = { describe('commonConfig', () => { it('should preserve default envPrefix', async () => { - loadConfigFromFileMock.mockReturnValueOnce( + (await loadConfigFromFileMock()).mockReturnValueOnce( Promise.resolve({ config: {}, path: '', @@ -42,7 +44,7 @@ describe('commonConfig', () => { }); it('should preserve custom envPrefix string', async () => { - loadConfigFromFileMock.mockReturnValueOnce( + (await loadConfigFromFileMock()).mockReturnValueOnce( Promise.resolve({ config: { envPrefix: 'SECRET_' }, path: '', @@ -54,7 +56,7 @@ describe('commonConfig', () => { }); it('should preserve custom envPrefix array', async () => { - loadConfigFromFileMock.mockReturnValueOnce( + (await loadConfigFromFileMock()).mockReturnValueOnce( Promise.resolve({ config: { envPrefix: ['SECRET_', 'VUE_'] }, path: '', From 73a8e8ff4b365c7d18ae699952eed1ad4455bc02 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 5 Oct 2023 15:01:07 -0400 Subject: [PATCH 037/110] Revert "Try to use ESM mocks for jest test" This reverts commit a7bff7690eb7244e7dd219b9dc473d3b2d304119. --- .../builder-vite/src/vite-config.test.ts | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/code/builders/builder-vite/src/vite-config.test.ts b/code/builders/builder-vite/src/vite-config.test.ts index 922c50cb90ac..c4f2f212be48 100644 --- a/code/builders/builder-vite/src/vite-config.test.ts +++ b/code/builders/builder-vite/src/vite-config.test.ts @@ -1,14 +1,12 @@ import type { Options, Presets } from '@storybook/types'; -import { jest } from '@jest/globals'; +import { loadConfigFromFile } from 'vite'; import { commonConfig } from './vite-config'; -jest.unstable_mockModule('vite', () => ({ +jest.mock('vite', () => ({ + ...jest.requireActual('vite'), loadConfigFromFile: jest.fn(async () => ({})), })); - -const loadConfigFromFileMock = async () => { - return jest.mocked((await import('vite')).loadConfigFromFile); -}; +const loadConfigFromFileMock = jest.mocked(loadConfigFromFile); const dummyOptions: Options = { configType: 'DEVELOPMENT', @@ -32,7 +30,7 @@ const dummyOptions: Options = { describe('commonConfig', () => { it('should preserve default envPrefix', async () => { - (await loadConfigFromFileMock()).mockReturnValueOnce( + loadConfigFromFileMock.mockReturnValueOnce( Promise.resolve({ config: {}, path: '', @@ -44,7 +42,7 @@ describe('commonConfig', () => { }); it('should preserve custom envPrefix string', async () => { - (await loadConfigFromFileMock()).mockReturnValueOnce( + loadConfigFromFileMock.mockReturnValueOnce( Promise.resolve({ config: { envPrefix: 'SECRET_' }, path: '', @@ -56,7 +54,7 @@ describe('commonConfig', () => { }); it('should preserve custom envPrefix array', async () => { - (await loadConfigFromFileMock()).mockReturnValueOnce( + loadConfigFromFileMock.mockReturnValueOnce( Promise.resolve({ config: { envPrefix: ['SECRET_', 'VUE_'] }, path: '', From df438545d5dc7ba76ca230799c5d2708511a87a2 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 5 Oct 2023 15:02:18 -0400 Subject: [PATCH 038/110] Revert "Use Vite 5 beta in devDependencies" This reverts commit 954c76cee8b4bb345e53b74c1f8611b996399099. --- code/addons/docs/package.json | 2 +- code/builders/builder-vite/package.json | 2 +- code/frameworks/preact-vite/package.json | 2 +- code/frameworks/react-vite/package.json | 2 +- code/frameworks/svelte-vite/package.json | 2 +- code/frameworks/sveltekit/package.json | 4 +-- code/frameworks/vue-vite/package.json | 2 +- code/frameworks/vue3-vite/package.json | 2 +- code/package.json | 2 +- code/yarn.lock | 46 ++++++++++++------------ 10 files changed, 33 insertions(+), 33 deletions(-) diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index be9012fa635e..39294a7573b8 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -123,7 +123,7 @@ "react": "^16.14.0", "react-dom": "^16.8.0", "typescript": "~4.9.3", - "vite": "^5.0.0-beta.4" + "vite": "^4.0.4" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 2f36e2425faa..23e46183d29b 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -67,7 +67,7 @@ "rollup": "^3.20.1", "slash": "^5.0.0", "typescript": "~4.9.3", - "vite": "^5.0.0-beta.4" + "vite": "^4.0.4" }, "peerDependencies": { "@preact/preset-vite": "*", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 1cc587c0f3fa..57a1eeca2287 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -54,7 +54,7 @@ "devDependencies": { "@types/node": "^16.0.0", "typescript": "~4.9.3", - "vite": "^5.0.0-beta.4" + "vite": "^4.0.0" }, "peerDependencies": { "preact": ">=10", diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 66a375526fe8..b5814ef0b71a 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -58,7 +58,7 @@ "devDependencies": { "@types/node": "^16.0.0", "typescript": "~4.9.3", - "vite": "^5.0.0-beta.4" + "vite": "^4.0.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index f2262f94c6b6..ecf4ec434c6d 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -59,7 +59,7 @@ "@types/node": "^16.0.0", "svelte": "^4.0.0", "typescript": "~4.9.3", - "vite": "^5.0.0-beta.4" + "vite": "^4.0.0" }, "peerDependencies": { "svelte": "^3.0.0 || ^4.0.0", diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index ed161d4bc041..8b9f808420b5 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -57,11 +57,11 @@ "devDependencies": { "@types/node": "^16.0.0", "typescript": "^4.9.3", - "vite": "^5.0.0-beta.4" + "vite": "^4.0.0" }, "peerDependencies": { "svelte": "^3.0.0 || ^4.0.0", - "vite": "^5.0.0-beta.4" + "vite": "^4.0.0" }, "engines": { "node": "^14.18 || >=16" diff --git a/code/frameworks/vue-vite/package.json b/code/frameworks/vue-vite/package.json index 6c632989e394..be83a6bf53e7 100644 --- a/code/frameworks/vue-vite/package.json +++ b/code/frameworks/vue-vite/package.json @@ -56,7 +56,7 @@ }, "devDependencies": { "typescript": "~4.9.3", - "vite": "^5.0.0-beta.4", + "vite": "^4.0.0", "vue": "^2.7.10" }, "peerDependencies": { diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 1f67b902efd1..a2900bd97025 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -57,7 +57,7 @@ "devDependencies": { "@types/node": "^16.0.0", "typescript": "~4.9.3", - "vite": "^5.0.0-beta.4" + "vite": "^4.0.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", diff --git a/code/package.json b/code/package.json index a7bb10867aa1..7a14a389b3d7 100644 --- a/code/package.json +++ b/code/package.json @@ -258,7 +258,7 @@ "ts-node": "^10.9.1", "typescript": "~4.9.3", "util": "^0.12.4", - "vite": "^5.0.0-beta.4", + "vite": "^4.0.0", "vite-plugin-turbosnap": "^1.0.1", "wait-on": "^7.0.1" }, diff --git a/code/yarn.lock b/code/yarn.lock index dba868dc5a29..375d333d7fe8 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5890,7 +5890,7 @@ __metadata: remark-slug: ^6.0.0 ts-dedent: ^2.0.0 typescript: ~4.9.3 - vite: ^5.0.0-beta.4 + vite: ^4.0.4 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -6513,7 +6513,7 @@ __metadata: rollup: ^3.20.1 slash: ^5.0.0 typescript: ~4.9.3 - vite: ^5.0.0-beta.4 + vite: ^4.0.4 peerDependencies: "@preact/preset-vite": "*" typescript: ">= 4.3.x" @@ -7341,7 +7341,7 @@ __metadata: "@storybook/preact": "workspace:*" "@types/node": ^16.0.0 typescript: ~4.9.3 - vite: ^5.0.0-beta.4 + vite: ^4.0.0 peerDependencies: preact: ">=10" vite: ^3.0.0 || ^4.0.0 || ^5.0.0 @@ -7661,7 +7661,7 @@ __metadata: magic-string: ^0.30.0 react-docgen: ^6.0.2 typescript: ~4.9.3 - vite: ^5.0.0-beta.4 + vite: ^4.0.0 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -7901,7 +7901,7 @@ __metadata: ts-node: ^10.9.1 typescript: ~4.9.3 util: ^0.12.4 - vite: ^5.0.0-beta.4 + vite: ^4.0.0 vite-plugin-turbosnap: ^1.0.1 wait-on: ^7.0.1 dependenciesMeta: @@ -8016,7 +8016,7 @@ __metadata: sveltedoc-parser: ^4.2.1 ts-dedent: ^2.2.0 typescript: ~4.9.3 - vite: ^5.0.0-beta.4 + vite: ^4.0.0 peerDependencies: svelte: ^3.0.0 || ^4.0.0 vite: ^3.0.0 || ^4.0.0 || ^5.0.0 @@ -8074,10 +8074,10 @@ __metadata: "@storybook/svelte-vite": "workspace:*" "@types/node": ^16.0.0 typescript: ^4.9.3 - vite: ^5.0.0-beta.4 + vite: ^4.0.0 peerDependencies: svelte: ^3.0.0 || ^4.0.0 - vite: ^5.0.0-beta.4 + vite: ^4.0.0 languageName: unknown linkType: soft @@ -8175,7 +8175,7 @@ __metadata: "@storybook/vue": "workspace:*" magic-string: ^0.30.0 typescript: ~4.9.3 - vite: ^5.0.0-beta.4 + vite: ^4.0.0 vue: ^2.7.10 vue-docgen-api: ^4.40.0 peerDependencies: @@ -8222,7 +8222,7 @@ __metadata: "@vitejs/plugin-vue": ^4.0.0 magic-string: ^0.30.0 typescript: ~4.9.3 - vite: ^5.0.0-beta.4 + vite: ^4.0.0 vue-docgen-api: ^4.40.0 peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -17632,7 +17632,7 @@ __metadata: languageName: node linkType: hard -"fsevents@npm:^2.3.2, fsevents@npm:~2.3.2, fsevents@npm:~2.3.3": +"fsevents@npm:^2.3.2, fsevents@npm:~2.3.2": version: 2.3.3 resolution: "fsevents@npm:2.3.3" dependencies: @@ -17651,7 +17651,7 @@ __metadata: languageName: node linkType: hard -"fsevents@patch:fsevents@^2.3.2#~builtin, fsevents@patch:fsevents@~2.3.2#~builtin, fsevents@patch:fsevents@~2.3.3#~builtin": +"fsevents@patch:fsevents@^2.3.2#~builtin, fsevents@patch:fsevents@~2.3.2#~builtin": version: 2.3.3 resolution: "fsevents@patch:fsevents@npm%3A2.3.3#~builtin::version=2.3.3&hash=df0bf1" dependencies: @@ -26097,7 +26097,7 @@ __metadata: languageName: node linkType: hard -"postcss@npm:^8.1.10, postcss@npm:^8.2.14, postcss@npm:^8.4.14, postcss@npm:^8.4.21, postcss@npm:^8.4.23, postcss@npm:^8.4.26, postcss@npm:^8.4.30": +"postcss@npm:^8.1.10, postcss@npm:^8.2.14, postcss@npm:^8.4.14, postcss@npm:^8.4.21, postcss@npm:^8.4.23, postcss@npm:^8.4.26, postcss@npm:^8.4.27": version: 8.4.31 resolution: "postcss@npm:8.4.31" dependencies: @@ -28435,7 +28435,7 @@ __metadata: languageName: node linkType: hard -"rollup@npm:^3.20.1, rollup@npm:^3.25.2, rollup@npm:^3.29.2": +"rollup@npm:^3.20.1, rollup@npm:^3.25.2, rollup@npm:^3.27.1": version: 3.29.4 resolution: "rollup@npm:3.29.4" dependencies: @@ -31910,16 +31910,16 @@ __metadata: languageName: node linkType: hard -"vite@npm:^5.0.0-beta.4": - version: 5.0.0-beta.4 - resolution: "vite@npm:5.0.0-beta.4" +"vite@npm:^4.0.0, vite@npm:^4.0.4": + version: 4.4.10 + resolution: "vite@npm:4.4.10" dependencies: - esbuild: ^0.19.3 - fsevents: ~2.3.3 - postcss: ^8.4.30 - rollup: ^3.29.2 + esbuild: ^0.18.10 + fsevents: ~2.3.2 + postcss: ^8.4.27 + rollup: ^3.27.1 peerDependencies: - "@types/node": ^18.0.0 || >=20.0.0 + "@types/node": ">= 14" less: "*" lightningcss: ^1.21.0 sass: "*" @@ -31946,7 +31946,7 @@ __metadata: optional: true bin: vite: bin/vite.js - checksum: df7247abd37069ec160c4c84c9d139328d33c7c768627a17fca0e8d3f452b2ff32ee75b978e08f563b57ad85c9d19e66f1e454dcac4050b7fca36aa1d508004d + checksum: d1359f147eb84aad9922460848184f14295e76f335ab03f90a585886ff070e1a7c74996022b3bb07da0a3130c9829565b5556e6eb1d0db12a8aad26f3694d445 languageName: node linkType: hard From cf036606062da1ac233b5c9b168ea2e2cfe69d53 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 5 Oct 2023 15:04:27 -0400 Subject: [PATCH 039/110] Revert "Use dynamic import of slash" This reverts commit 619f8385c57fa71db17c40941aa5dfd933faef67. --- code/builders/builder-vite/src/codegen-entries.ts | 2 +- code/builders/builder-vite/src/codegen-iframe-script.ts | 8 +++----- .../builder-vite/src/codegen-modern-iframe-script.ts | 8 +++----- code/builders/builder-vite/src/list-stories.ts | 2 +- .../builder-vite/src/utils/process-preview-annotation.ts | 8 ++------ 5 files changed, 10 insertions(+), 18 deletions(-) diff --git a/code/builders/builder-vite/src/codegen-entries.ts b/code/builders/builder-vite/src/codegen-entries.ts index e74ecdb7a244..7c41a911b593 100644 --- a/code/builders/builder-vite/src/codegen-entries.ts +++ b/code/builders/builder-vite/src/codegen-entries.ts @@ -1,5 +1,6 @@ import { loadPreviewOrConfigFile } from '@storybook/core-common'; import type { Options } from '@storybook/types'; +import slash from 'slash'; import { listStories } from './list-stories'; const absoluteFilesToImport = async ( @@ -13,7 +14,6 @@ const absoluteFilesToImport = async ( export async function generateVirtualStoryEntryCode(options: Options) { const { normalizePath } = await import('vite'); - const slash = await import('slash'); const storyEntries = await listStories(options); const resolveMap = storyEntries.reduce>( (prev, entry) => ({ ...prev, [entry]: entry.replace(slash(process.cwd()), '.') }), diff --git a/code/builders/builder-vite/src/codegen-iframe-script.ts b/code/builders/builder-vite/src/codegen-iframe-script.ts index e46b09a023f5..94400f57a017 100644 --- a/code/builders/builder-vite/src/codegen-iframe-script.ts +++ b/code/builders/builder-vite/src/codegen-iframe-script.ts @@ -12,11 +12,9 @@ export async function generateIframeScriptCode(options: Options, projectRoot: st [], options ); - const configEntries = await Promise.all( - [...previewAnnotations] - .filter(Boolean) - .map((path) => processPreviewAnnotation(path, projectRoot)) - ); + const configEntries = [...previewAnnotations] + .filter(Boolean) + .map((path) => processPreviewAnnotation(path, projectRoot)); const filesToImport = (files: string[], name: string) => files.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'${el}'`).join('\n'); diff --git a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts index f497f55273a1..5bc163fba5fa 100644 --- a/code/builders/builder-vite/src/codegen-modern-iframe-script.ts +++ b/code/builders/builder-vite/src/codegen-modern-iframe-script.ts @@ -13,11 +13,9 @@ export async function generateModernIframeScriptCode(options: Options, projectRo [], options ); - const previewAnnotationURLs = await Promise.all( - [...previewAnnotations, previewOrConfigFile] - .filter(Boolean) - .map((path) => processPreviewAnnotation(path, projectRoot)) - ); + const previewAnnotationURLs = [...previewAnnotations, previewOrConfigFile] + .filter(Boolean) + .map((path) => processPreviewAnnotation(path, projectRoot)); // This is pulled out to a variable because it is reused in both the initial page load // and the HMR handler. We don't use the hot.accept callback params because only the changed diff --git a/code/builders/builder-vite/src/list-stories.ts b/code/builders/builder-vite/src/list-stories.ts index 47d66fd08a4c..521952bff15a 100644 --- a/code/builders/builder-vite/src/list-stories.ts +++ b/code/builders/builder-vite/src/list-stories.ts @@ -1,4 +1,5 @@ import * as path from 'path'; +import slash from 'slash'; import { glob } from 'glob'; import { normalizeStories, commonGlobOptions } from '@storybook/core-common'; @@ -6,7 +7,6 @@ import type { Options } from '@storybook/types'; export async function listStories(options: Options) { const { normalizePath } = await import('vite'); - const slash = await import('slash'); return ( await Promise.all( diff --git a/code/builders/builder-vite/src/utils/process-preview-annotation.ts b/code/builders/builder-vite/src/utils/process-preview-annotation.ts index 3b462e838285..a6d83b2f7093 100644 --- a/code/builders/builder-vite/src/utils/process-preview-annotation.ts +++ b/code/builders/builder-vite/src/utils/process-preview-annotation.ts @@ -1,5 +1,6 @@ import type { PreviewAnnotation } from '@storybook/types'; import { resolve, isAbsolute, relative } from 'path'; +import slash from 'slash'; import { stripAbsNodeModulesPath } from '@storybook/core-common'; /** @@ -9,12 +10,7 @@ import { stripAbsNodeModulesPath } from '@storybook/core-common'; * For node_modules, we want bare imports (so vite can process them), * and for files in the user's source, we want URLs absolute relative to project root. */ -export async function processPreviewAnnotation( - path: PreviewAnnotation | undefined, - projectRoot: string -) { - const slash = await import('slash'); - +export function processPreviewAnnotation(path: PreviewAnnotation | undefined, projectRoot: string) { // If entry is an object, take the first, which is the // bare (non-absolute) specifier. // This is so that webpack can use an absolute path, and From d138cf647a5b4de2c5c2f36dbb2305717d74c680 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Thu, 5 Oct 2023 15:49:55 -0400 Subject: [PATCH 040/110] Add missing await --- code/builders/builder-vite/src/codegen-entries.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/builders/builder-vite/src/codegen-entries.ts b/code/builders/builder-vite/src/codegen-entries.ts index 7c41a911b593..44c3163b1def 100644 --- a/code/builders/builder-vite/src/codegen-entries.ts +++ b/code/builders/builder-vite/src/codegen-entries.ts @@ -22,7 +22,7 @@ export async function generateVirtualStoryEntryCode(options: Options) { const modules = storyEntries.map((entry, i) => `${JSON.stringify(entry)}: story_${i}`).join(','); return ` - ${absoluteFilesToImport(storyEntries, 'story', normalizePath)} + ${await absoluteFilesToImport(storyEntries, 'story', normalizePath)} function loadable(key) { return {${modules}}[key]; From a05089d3d3c14a635b76b6ec41a3a9250b738d4c Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 6 Oct 2023 11:34:39 +0200 Subject: [PATCH 041/110] revert testing workflow --- .github/workflows/prepare-non-patch-release.yml | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/.github/workflows/prepare-non-patch-release.yml b/.github/workflows/prepare-non-patch-release.yml index c0e3c8b36eaa..00a09bc5cc92 100644 --- a/.github/workflows/prepare-non-patch-release.yml +++ b/.github/workflows/prepare-non-patch-release.yml @@ -46,7 +46,7 @@ jobs: - name: Checkout next uses: actions/checkout@v3 with: - ref: release-to-latest-v2 #to temporarily test the workflow before merging + ref: next # this needs to be set to a high enough number that it will contain the last version tag # as of May 2023, the whole repo had 55K commits fetch-depth: 10000 @@ -128,13 +128,13 @@ jobs: run: | git config --global user.name 'storybook-bot' git config --global user.email '32066757+storybook-bot@users.noreply.github.com' - git checkout -b TEST3-version-non-patch-from-${{ steps.bump-version.outputs.current-version }} + git checkout -b version-non-patch-from-${{ steps.bump-version.outputs.current-version }} git add . git commit -m "Write changelog for ${{ steps.bump-version.outputs.next-version }} [skip ci]" || true - git push --force origin TEST3-version-non-patch-from-${{ steps.bump-version.outputs.current-version }} + git push --force origin version-non-patch-from-${{ steps.bump-version.outputs.current-version }} - name: Resolve merge-conflicts with base branch - if: steps.is-prerelease.outputs.prerelease != 'false' + if: steps.is-prerelease.outputs.prerelease == 'false' working-directory: . env: GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} @@ -161,14 +161,14 @@ jobs: gh pr edit \ --repo "${{github.repository }}" \ --title "TEST3 Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \ - --base ${{ steps.is-prerelease.outputs.prerelease != 'true' && 'next-release' || 'latest-release' }} \ + --base ${{ steps.is-prerelease.outputs.prerelease == 'true' && 'next-release' || 'latest-release' }} \ --body "${{ steps.description.outputs.description }}" else gh pr create \ --repo "${{github.repository }}"\ --title "TEST3 Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \ --label "release" \ - --base ${{ steps.is-prerelease.outputs.prerelease != 'true' && 'next-release' || 'latest-release' }} \ + --base ${{ steps.is-prerelease.outputs.prerelease == 'true' && 'next-release' || 'latest-release' }} \ --head version-non-patch-from-${{ steps.bump-version.outputs.current-version }} \ --body "${{ steps.description.outputs.description }}" fi From e6519571de8c094dc416d0d07bd4360e7d366233 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 6 Oct 2023 11:34:39 +0200 Subject: [PATCH 042/110] revert testing workflow --- .github/workflows/prepare-non-patch-release.yml | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/.github/workflows/prepare-non-patch-release.yml b/.github/workflows/prepare-non-patch-release.yml index c0e3c8b36eaa..fab22313a3df 100644 --- a/.github/workflows/prepare-non-patch-release.yml +++ b/.github/workflows/prepare-non-patch-release.yml @@ -2,7 +2,6 @@ name: Prepare non-patch PR run-name: Prepare non-patch PR, triggered by ${{ github.triggering_actor }} on: - pull_request: # to temporarily test the workflow before merging push: branches: - next @@ -46,7 +45,7 @@ jobs: - name: Checkout next uses: actions/checkout@v3 with: - ref: release-to-latest-v2 #to temporarily test the workflow before merging + ref: next # this needs to be set to a high enough number that it will contain the last version tag # as of May 2023, the whole repo had 55K commits fetch-depth: 10000 @@ -128,13 +127,13 @@ jobs: run: | git config --global user.name 'storybook-bot' git config --global user.email '32066757+storybook-bot@users.noreply.github.com' - git checkout -b TEST3-version-non-patch-from-${{ steps.bump-version.outputs.current-version }} + git checkout -b version-non-patch-from-${{ steps.bump-version.outputs.current-version }} git add . git commit -m "Write changelog for ${{ steps.bump-version.outputs.next-version }} [skip ci]" || true - git push --force origin TEST3-version-non-patch-from-${{ steps.bump-version.outputs.current-version }} + git push --force origin version-non-patch-from-${{ steps.bump-version.outputs.current-version }} - name: Resolve merge-conflicts with base branch - if: steps.is-prerelease.outputs.prerelease != 'false' + if: steps.is-prerelease.outputs.prerelease == 'false' working-directory: . env: GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} @@ -161,14 +160,14 @@ jobs: gh pr edit \ --repo "${{github.repository }}" \ --title "TEST3 Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \ - --base ${{ steps.is-prerelease.outputs.prerelease != 'true' && 'next-release' || 'latest-release' }} \ + --base ${{ steps.is-prerelease.outputs.prerelease == 'true' && 'next-release' || 'latest-release' }} \ --body "${{ steps.description.outputs.description }}" else gh pr create \ --repo "${{github.repository }}"\ --title "TEST3 Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \ --label "release" \ - --base ${{ steps.is-prerelease.outputs.prerelease != 'true' && 'next-release' || 'latest-release' }} \ + --base ${{ steps.is-prerelease.outputs.prerelease == 'true' && 'next-release' || 'latest-release' }} \ --head version-non-patch-from-${{ steps.bump-version.outputs.current-version }} \ --body "${{ steps.description.outputs.description }}" fi From c68bd21a9df3a53c4f76d8f24a3c5c19d23f5b46 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 6 Oct 2023 15:32:42 +0200 Subject: [PATCH 043/110] cleanup --- .github/workflows/prepare-non-patch-release.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/prepare-non-patch-release.yml b/.github/workflows/prepare-non-patch-release.yml index fab22313a3df..8d523a17a7ab 100644 --- a/.github/workflows/prepare-non-patch-release.yml +++ b/.github/workflows/prepare-non-patch-release.yml @@ -159,13 +159,13 @@ jobs: if PR_STATE=$(gh pr view --json state --jq .state 2>/dev/null) && [[ -n "$PR_STATE" && "$PR_STATE" == *"OPEN"* ]]; then gh pr edit \ --repo "${{github.repository }}" \ - --title "TEST3 Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \ + --title "Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \ --base ${{ steps.is-prerelease.outputs.prerelease == 'true' && 'next-release' || 'latest-release' }} \ --body "${{ steps.description.outputs.description }}" else gh pr create \ --repo "${{github.repository }}"\ - --title "TEST3 Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \ + --title "Release: $CAPITALIZED_RELEASE_TYPE ${{ inputs.pre-id && format('{0} ', inputs.pre-id) }}${{ steps.bump-version.outputs.next-version }}" \ --label "release" \ --base ${{ steps.is-prerelease.outputs.prerelease == 'true' && 'next-release' || 'latest-release' }} \ --head version-non-patch-from-${{ steps.bump-version.outputs.current-version }} \ From 0e0d01b3cdfa87ca2fa91e78ed49f27e4645aa65 Mon Sep 17 00:00:00 2001 From: Atreay Kukanur <66585295+ATREAY@users.noreply.github.com> Date: Fri, 6 Oct 2023 14:43:57 +0000 Subject: [PATCH 044/110] updated changes --- docs/essentials/highlight.md | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/docs/essentials/highlight.md b/docs/essentials/highlight.md index 5d59649214ae..6c8da3c6f043 100644 --- a/docs/essentials/highlight.md +++ b/docs/essentials/highlight.md @@ -32,6 +32,12 @@ To highlight DOM elements with the addon, you'll need to emit the `HIGHLIGHT` ev +
+ +โ„น๏ธ The `emit` function derived from the `useChannel` API hook creates a communication channel in Storybook's UI to listen for events and update the UI accordingly. The Highlight addon uses this channel to listen to custom events and update the highlighted elements (if any) accordingly. + +
+ ### Reset highlighted elements Out of the box, Storybook automatically removes highlighted elements when transitioning between stories. However, if you need to clear them manually, you can emit the `RESET_HIGHLIGHT` event from within a story or an addon. For example: @@ -70,11 +76,4 @@ By default, the addon applies a standard style to the highlighted elements you'v ]} /> - - - -
- -๐Ÿ“š In all three provided code snippets, the "emit" function comes from the `useChannel` hook, which is imported from the `@storybook/preview-api` package. This `useChannel` hook is used to create a communication channel for sending and receiving messages within the code. The "emit" function obtained from `useChannel` is then used to send messages with specific event types, such as `HIGHLIGHT` or `RESET_HIGHLIGHT`, to control or customize the behavior in the code. - -
\ No newline at end of file + \ No newline at end of file From 779c89974a5922b886ac29a61ded363e9fb0bbe9 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Fri, 6 Oct 2023 11:25:16 -0400 Subject: [PATCH 045/110] Update code/frameworks/react-vite/package.json Co-authored-by: Josh Wooding <12938082+joshwooding@users.noreply.github.com> --- code/frameworks/react-vite/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index b5814ef0b71a..0af1b52dedde 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -47,7 +47,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.0", + "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.1", "@rollup/pluginutils": "^5.0.2", "@storybook/builder-vite": "workspace:*", "@storybook/react": "workspace:*", From 2aacb587b29fe5b1fffe84e01a5c5cb287521e37 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Fri, 6 Oct 2023 11:30:11 -0400 Subject: [PATCH 046/110] Update yarn.lock --- code/yarn.lock | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/code/yarn.lock b/code/yarn.lock index 375d333d7fe8..10d76b878c46 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -3731,9 +3731,9 @@ __metadata: languageName: node linkType: hard -"@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.0": - version: 0.3.0 - resolution: "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.0" +"@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.1": + version: 0.3.1 + resolution: "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.1" dependencies: glob: ^7.2.0 glob-promise: ^4.2.0 @@ -3745,7 +3745,7 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 31098ad8fcc2440437534599c111d9f2951dd74821e8ba46c521b969bae4c918d830b7bb0484efbad29a51711bb62d3bc623d5a1ed5b1695b5b5594ea9dd4ca0 + checksum: a9c7a03d7d1daf5bd64949255516ba64c88d5600366c8c74dcdb6f37c2a6099daaec02860b7587d2220e61afa47a0b2de17ef70d723c2db02f24e0890edfd9f3 languageName: node linkType: hard @@ -7652,7 +7652,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/react-vite@workspace:frameworks/react-vite" dependencies: - "@joshwooding/vite-plugin-react-docgen-typescript": 0.3.0 + "@joshwooding/vite-plugin-react-docgen-typescript": 0.3.1 "@rollup/pluginutils": ^5.0.2 "@storybook/builder-vite": "workspace:*" "@storybook/react": "workspace:*" From 1d52a86089fcb4606666a5b4e7fff55c78bbf2bc Mon Sep 17 00:00:00 2001 From: Atreay Kukanur <66585295+ATREAY@users.noreply.github.com> Date: Fri, 6 Oct 2023 16:10:09 +0000 Subject: [PATCH 047/110] updated alignment changes --- docs/essentials/highlight.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/essentials/highlight.md b/docs/essentials/highlight.md index 6c8da3c6f043..190cfe1e84f8 100644 --- a/docs/essentials/highlight.md +++ b/docs/essentials/highlight.md @@ -32,12 +32,6 @@ To highlight DOM elements with the addon, you'll need to emit the `HIGHLIGHT` ev -
- -โ„น๏ธ The `emit` function derived from the `useChannel` API hook creates a communication channel in Storybook's UI to listen for events and update the UI accordingly. The Highlight addon uses this channel to listen to custom events and update the highlighted elements (if any) accordingly. - -
- ### Reset highlighted elements Out of the box, Storybook automatically removes highlighted elements when transitioning between stories. However, if you need to clear them manually, you can emit the `RESET_HIGHLIGHT` event from within a story or an addon. For example: @@ -58,6 +52,12 @@ Out of the box, Storybook automatically removes highlighted elements when transi +
+ +โ„น๏ธ The `emit` function derived from the `useChannel` API hook creates a communication channel in Storybook's UI to listen for events and update the UI accordingly. The Highlight addon uses this channel to listen to custom events and update the highlighted elements (if any) accordingly. + +
+ ## Customize style By default, the addon applies a standard style to the highlighted elements you've enabled for the story. However, you can enable your custom style by extending the payload object and providing a `color` and/or `style` properties. For example: From a3d6ec87c030dfad58f5abc1f4899a40714b870f Mon Sep 17 00:00:00 2001 From: bkfarnsworth Date: Sat, 7 Oct 2023 18:53:10 -0600 Subject: [PATCH 048/110] Update my-component-story-basic-and-props.js.mdx --- docs/snippets/react/my-component-story-basic-and-props.js.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/snippets/react/my-component-story-basic-and-props.js.mdx b/docs/snippets/react/my-component-story-basic-and-props.js.mdx index c1e3bc64d80f..8d63bbf2ed9f 100644 --- a/docs/snippets/react/my-component-story-basic-and-props.js.mdx +++ b/docs/snippets/react/my-component-story-basic-and-props.js.mdx @@ -1,5 +1,5 @@ ```js -// MyComponent.story.js|jsx +// MyComponent.stories.js|jsx import { MyComponent } from './MyComponent'; From e508783fa62be7712907321b58bc089cb6ce7d86 Mon Sep 17 00:00:00 2001 From: bkfarnsworth Date: Sat, 7 Oct 2023 18:53:39 -0600 Subject: [PATCH 049/110] Update my-component-story-basic-and-props.ts-4-9.mdx --- .../react/my-component-story-basic-and-props.ts-4-9.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/snippets/react/my-component-story-basic-and-props.ts-4-9.mdx b/docs/snippets/react/my-component-story-basic-and-props.ts-4-9.mdx index f693a660cf14..86957338d89e 100644 --- a/docs/snippets/react/my-component-story-basic-and-props.ts-4-9.mdx +++ b/docs/snippets/react/my-component-story-basic-and-props.ts-4-9.mdx @@ -1,5 +1,5 @@ ```tsx -// MyComponent.story.ts|tsx +// MyComponent.stories.ts|tsx import type { Meta, StoryObj } from '@storybook/react'; From ee149dd169bedfc54533aea93fa33d4466c4d2e5 Mon Sep 17 00:00:00 2001 From: bkfarnsworth Date: Sat, 7 Oct 2023 18:53:51 -0600 Subject: [PATCH 050/110] Update my-component-story-basic-and-props.ts.mdx --- docs/snippets/react/my-component-story-basic-and-props.ts.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/snippets/react/my-component-story-basic-and-props.ts.mdx b/docs/snippets/react/my-component-story-basic-and-props.ts.mdx index ee42d9ce9fd2..f93e8cb280f3 100644 --- a/docs/snippets/react/my-component-story-basic-and-props.ts.mdx +++ b/docs/snippets/react/my-component-story-basic-and-props.ts.mdx @@ -1,5 +1,5 @@ ```tsx -// MyComponent.story.ts|tsx +// MyComponent.stories.ts|tsx import type { Meta, StoryObj } from '@storybook/react'; From c74abef79dbd3c053164ca5fe6bbe75a11bebad2 Mon Sep 17 00:00:00 2001 From: Hikaru Yoshino Date: Mon, 9 Oct 2023 02:14:03 +0900 Subject: [PATCH 051/110] fix: pass when callee.name equals local.name --- code/frameworks/nextjs/src/font/babel/helpers.ts | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/code/frameworks/nextjs/src/font/babel/helpers.ts b/code/frameworks/nextjs/src/font/babel/helpers.ts index f964f17022f7..8b027ae2cd44 100644 --- a/code/frameworks/nextjs/src/font/babel/helpers.ts +++ b/code/frameworks/nextjs/src/font/babel/helpers.ts @@ -281,13 +281,16 @@ export function getVariableMetasBySpecifier( return undefined; } + if (!types.isIdentifier(declaration.init.callee)) { + return undefined; + } + if ( - (!types.isIdentifier(declaration.init.callee) || - specifier.type !== 'ImportSpecifier' || + (specifier.type !== 'ImportSpecifier' || specifier.imported.type !== 'Identifier' || - declaration.init.callee.name !== specifier.imported.name) && - (!types.isIdentifier(declaration.init.callee) || - specifier.type !== 'ImportDefaultSpecifier' || + (declaration.init.callee.name !== specifier.imported.name && + declaration.init.callee.name !== specifier.local.name)) && + (specifier.type !== 'ImportDefaultSpecifier' || declaration.init.callee.name !== specifier.local.name) ) { return undefined; From 83c5b0016fdd745eae77bebd6a138ece54a4ff02 Mon Sep 17 00:00:00 2001 From: Hikaru Yoshino Date: Mon, 9 Oct 2023 02:16:10 +0900 Subject: [PATCH 052/110] fix: use imported.name as a functionName --- code/frameworks/nextjs/src/font/babel/helpers.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/code/frameworks/nextjs/src/font/babel/helpers.ts b/code/frameworks/nextjs/src/font/babel/helpers.ts index 8b027ae2cd44..5f588d8c8c2c 100644 --- a/code/frameworks/nextjs/src/font/babel/helpers.ts +++ b/code/frameworks/nextjs/src/font/babel/helpers.ts @@ -314,8 +314,15 @@ export function getVariableMetasBySpecifier( const identifierName = declaration.id.name; const properties = convertNodeToJSON(types, options); - const functionName = declaration.init.callee.name; - + let functionName = declaration.init.callee.name; + if ( + specifier.type === 'ImportSpecifier' && + specifier.imported && + specifier.imported.type === 'Identifier' && + declaration.init.callee.name !== specifier.imported.name + ) { + functionName = specifier.imported.name; + } return { identifierName, properties, functionName }; }) .filter(isDefined); From c30406738d35e17d259981d6cd1455b38000ed08 Mon Sep 17 00:00:00 2001 From: Hikaru Yoshino Date: Mon, 9 Oct 2023 02:22:06 +0900 Subject: [PATCH 053/110] feat: update test of TransformFontImports --- .../frameworks/nextjs/src/font/babel/index.test.ts | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/code/frameworks/nextjs/src/font/babel/index.test.ts b/code/frameworks/nextjs/src/font/babel/index.test.ts index 45a0de5c8bb4..405d25b227cf 100644 --- a/code/frameworks/nextjs/src/font/babel/index.test.ts +++ b/code/frameworks/nextjs/src/font/babel/index.test.ts @@ -3,7 +3,7 @@ import { transform } from '@babel/core'; import TransformFontImports from '.'; const example = ` -import { Inter, Roboto } from 'next/font/google' +import { Inter, Lora as FontLora, Roboto } from 'next/font/google' import localFont from 'next/font/local' const myFont = localFont({ src: './my-font.woff2' }) @@ -12,6 +12,10 @@ const roboto = Roboto({ weight: '400', }) +const lora = FontLora({ + weight: '400', +}) + const inter = Inter({ subsets: ['latin'], }); @@ -20,7 +24,7 @@ const randomObj = {} `; const exampleLegacy = ` -import { Inter, Roboto } from '@next/font/google' +import { Inter, Lora as FontLora, Roboto } from '@next/font/google' import localFont from '@next/font/local' const myFont = localFont({ src: './my-font.woff2' }) @@ -29,6 +33,10 @@ const roboto = Roboto({ weight: '400', }) +const lora = FontLora({ + weight: '400', +}) + const inter = Inter({ subsets: ['latin'], }); @@ -40,6 +48,7 @@ it('should transform next/font AST properly', () => { const { code } = transform(example, { plugins: [TransformFontImports] })!; expect(code).toMatchInlineSnapshot(` "import inter from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"subsets\\\\\\":[\\\\\\"latin\\\\\\"]},\\\\\\"fontFamily\\\\\\":\\\\\\"Inter\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!next/font/google\\"; + import lora from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"weight\\\\\\":\\\\\\"400\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"Lora\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!next/font/google\\"; import roboto from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"weight\\\\\\":\\\\\\"400\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"Roboto\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!next/font/google\\"; import myFont from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"next/font/local\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"src\\\\\\":\\\\\\"./my-font.woff2\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"localFont\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!next/font/local\\"; const randomObj = {};" @@ -50,6 +59,7 @@ it('should transform @next/font AST properly', () => { const { code } = transform(exampleLegacy, { plugins: [TransformFontImports] })!; expect(code).toMatchInlineSnapshot(` "import inter from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"@next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"subsets\\\\\\":[\\\\\\"latin\\\\\\"]},\\\\\\"fontFamily\\\\\\":\\\\\\"Inter\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!@next/font/google\\"; + import lora from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"@next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"weight\\\\\\":\\\\\\"400\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"Lora\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!@next/font/google\\"; import roboto from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"@next/font/google\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"weight\\\\\\":\\\\\\"400\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"Roboto\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!@next/font/google\\"; import myFont from \\"storybook-nextjs-font-loader?{\\\\\\"source\\\\\\":\\\\\\"@next/font/local\\\\\\",\\\\\\"props\\\\\\":{\\\\\\"src\\\\\\":\\\\\\"./my-font.woff2\\\\\\"},\\\\\\"fontFamily\\\\\\":\\\\\\"localFont\\\\\\",\\\\\\"filename\\\\\\":\\\\\\"\\\\\\"}!@next/font/local\\"; const randomObj = {};" From d36bca3631ea3b94acae34eadf0791f947039d3f Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Mon, 9 Oct 2023 07:22:55 +0000 Subject: [PATCH 054/110] Write changelog for 7.5.0-alpha.5 [skip ci] --- CHANGELOG.prerelease.md | 11 +++++++++++ code/package.json | 3 ++- docs/versions/next.json | 2 +- 3 files changed, 14 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index cc8636b9d524..b883c7eaa546 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,14 @@ +## 7.5.0-alpha.5 + +- Angular: Add CLI options (debugWebpack, webpackStatsJson, and more) - [#24388](https://github.com/storybookjs/storybook/pull/24388), thanks [@yannbf](https://github.com/yannbf)! +- Angular: Fix Angular 15 support and add zone.js v0.14.x support - [#24367](https://github.com/storybookjs/storybook/pull/24367), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Core: Add class name to Storybook error name - [#24371](https://github.com/storybookjs/storybook/pull/24371), thanks [@yannbf](https://github.com/yannbf)! +- ManagerAPI: Fix bug with story redirection when URL has partial storyId - [#24345](https://github.com/storybookjs/storybook/pull/24345), thanks [@ndelangen](https://github.com/ndelangen)! +- NextJS: Fix Image Context re-use via singleton - [#24146](https://github.com/storybookjs/storybook/pull/24146), thanks [@martinnabhan](https://github.com/martinnabhan)! +- NextJS: Fix default next image loader when src has params - [#24187](https://github.com/storybookjs/storybook/pull/24187), thanks [@json-betsec](https://github.com/json-betsec)! +- React: Upgrade `react-docgen` to 6.0.x and improve argTypes - [#23825](https://github.com/storybookjs/storybook/pull/23825), thanks [@shilman](https://github.com/shilman)! +- Webpack: Display errors on build - [#24377](https://github.com/storybookjs/storybook/pull/24377), thanks [@yannbf](https://github.com/yannbf)! + ## 7.5.0-alpha.4 - CLI: Fix Nextjs project detection - [#24346](https://github.com/storybookjs/storybook/pull/24346), thanks [@yannbf](https://github.com/yannbf)! diff --git a/code/package.json b/code/package.json index 7a14a389b3d7..c66b87af4d93 100644 --- a/code/package.json +++ b/code/package.json @@ -328,5 +328,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "7.5.0-alpha.5" } diff --git a/docs/versions/next.json b/docs/versions/next.json index e6e5140c4079..482f0159dc1f 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"7.5.0-alpha.4","info":{"plain":"- CLI: Fix Nextjs project detection - [#24346](https://github.com/storybookjs/storybook/pull/24346), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Deprecate `storyStoreV6` (including `storiesOf`) and `storyIndexers` - [#23938](https://github.com/storybookjs/storybook/pull/23938), thanks [@JReinhold](https://github.com/JReinhold)!\n- Core: Fix Promise cycle bug in useSharedState - [#24268](https://github.com/storybookjs/storybook/pull/24268), thanks [@ndelangen](https://github.com/ndelangen)!\n- Core: Fix missing favicon during dev - [#24356](https://github.com/storybookjs/storybook/pull/24356), thanks [@ndelangen](https://github.com/ndelangen)!\n- NextJS: Change babel plugins from `proposal-...` to `transform-...` - [#24290](https://github.com/storybookjs/storybook/pull/24290), thanks [@roottool](https://github.com/roottool)!\n- Nextjs: Improve support for Windows-style paths - [#23695](https://github.com/storybookjs/storybook/pull/23695), thanks [@T99](https://github.com/T99)!\n- UI: Fix infinite hook call causing browsers to freeze - [#24291](https://github.com/storybookjs/storybook/pull/24291), thanks [@yannbf](https://github.com/yannbf)!\n- UI: Improve contrast ratio between focus / hover - [#24205](https://github.com/storybookjs/storybook/pull/24205), thanks [@chocoscoding](https://github.com/chocoscoding)!\n- Vite: Move mdx-plugin from @storybook/builder-vite to @storybook/addon-docs - [#24166](https://github.com/storybookjs/storybook/pull/24166), thanks [@bryanjtc](https://github.com/bryanjtc)!"}} +{"version":"7.5.0-alpha.5","info":{"plain":"- Angular: Add CLI options (debugWebpack, webpackStatsJson, and more) - [#24388](https://github.com/storybookjs/storybook/pull/24388), thanks [@yannbf](https://github.com/yannbf)!\n- Angular: Fix Angular 15 support and add zone.js v0.14.x support - [#24367](https://github.com/storybookjs/storybook/pull/24367), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Core: Add class name to Storybook error name - [#24371](https://github.com/storybookjs/storybook/pull/24371), thanks [@yannbf](https://github.com/yannbf)!\n- ManagerAPI: Fix bug with story redirection when URL has partial storyId - [#24345](https://github.com/storybookjs/storybook/pull/24345), thanks [@ndelangen](https://github.com/ndelangen)!\n- NextJS: Fix Image Context re-use via singleton - [#24146](https://github.com/storybookjs/storybook/pull/24146), thanks [@martinnabhan](https://github.com/martinnabhan)!\n- NextJS: Fix default next image loader when src has params - [#24187](https://github.com/storybookjs/storybook/pull/24187), thanks [@json-betsec](https://github.com/json-betsec)!\n- React: Upgrade `react-docgen` to 6.0.x and improve argTypes - [#23825](https://github.com/storybookjs/storybook/pull/23825), thanks [@shilman](https://github.com/shilman)!\n- Webpack: Display errors on build - [#24377](https://github.com/storybookjs/storybook/pull/24377), thanks [@yannbf](https://github.com/yannbf)!"}} From 95e642f428f796f2d4110a26c86b33924ce6209b Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 9 Oct 2023 09:49:41 +0200 Subject: [PATCH 055/110] comment updates Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --- code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts index 2c2bccfc3a8e..fc287ec76c09 100644 --- a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts +++ b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts @@ -68,12 +68,12 @@ export function svelteDocgen(svelteOptions: Record = {}): PluginOpt let docPreprocessOptions: any = null; if (preprocessOptions) { /* - * We can't use vitePreprocess() for the documentation. - * This preprocessor uses esbuild which removes jsdoc. + * We can't use vitePreprocess() for the documentation + * because it uses esbuild which removes jsdoc. * * By default, only typescript is transpiled, and style tags are removed. * - * Note: theses preprocessors are only used to make the component + * Note: these preprocessors are only used to make the component * compatible to sveltedoc-parser (no ts), not to compile * the component. */ From cbcea150ad13ff0c55b14faa30b4a765396b04ab Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 9 Oct 2023 10:13:21 +0200 Subject: [PATCH 056/110] fix bad non-patch renaming --- .github/workflows/publish.yml | 2 +- CONTRIBUTING/RELEASING.md | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index df82ca33c9a5..8bb5fa3a82a6 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -5,7 +5,7 @@ on: push: branches: - latest-release - - non-patch-release + - next-release env: PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1 diff --git a/CONTRIBUTING/RELEASING.md b/CONTRIBUTING/RELEASING.md index 7cf29a463c62..d1c4eecdb849 100644 --- a/CONTRIBUTING/RELEASING.md +++ b/CONTRIBUTING/RELEASING.md @@ -124,11 +124,11 @@ A few key points to note in this flow: Patch releases are created by [cherry-picking](https://www.atlassian.com/git/tutorials/cherry-pick) any merged, unreleased pull requests that have the "**patch:yes**" label applied to the `next` branch. The merge commit of said pull requests are cherry-picked. -Sometimes it is desired to pick pull requests back to `main` even if they are not considered "releasable". Unlike non-patch-release preparation, patch releases will not be canceled if the content is not releasable. It might not make sense to create a new patch release if the changes are only for documentation and/or internal build systems. However, getting the changes back to `main` is the only way to deploy the documentation to the production docs site. You may also want to cherry-pick changes to internal CI to fix issues. These are valid scenarios where you want to cherry-pick the changes without being blocked on "releasable" content. In these cases, where all cherry picks are non-releasable, the preparation workflow creates a "merging" pull request instead of a "releasing" pull request. This pull request does not bump versions or update changelogs; it just cherry-picks the changes and allows you to merge them into `latest-release` -> `main`. +Sometimes it is desired to pick pull requests back to `main` even if they are not considered "releasable". Unlike non-patch release preparation, patch releases will not be canceled if the content is not releasable. It might not make sense to create a new patch release if the changes are only for documentation and/or internal build systems. However, getting the changes back to `main` is the only way to deploy the documentation to the production docs site. You may also want to cherry-pick changes to internal CI to fix issues. These are valid scenarios where you want to cherry-pick the changes without being blocked on "releasable" content. In these cases, where all cherry picks are non-releasable, the preparation workflow creates a "merging" pull request instead of a "releasing" pull request. This pull request does not bump versions or update changelogs; it just cherry-picks the changes and allows you to merge them into `latest-release` -> `main`. The preparation workflow sequentially cherry-picks each patch pull request to its branch. If this cherry-picking fails due to conflicts or other reasons, it is ignored and the next pull request is processed. All failing cherry-picks are listed in the release pull request's description, for the Releaser to manually cherry-pick during the release process. This problem occurs more often when `main` and `next` diverge, i.e. the longer it has been since a stable major/minor release. -Similar to the non-patch-release flow, the preparation workflow for patches will create a new branch from `main` called `version-patch-from-`, and open a pull request that targets `latest-release`. When the pull request is merged by the Releaser, the [publish workflow](#publishing) will eventually merge `latest-release` into `main`. +Similar to the non-patch release flow, the preparation workflow for patches will create a new branch from `main` called `version-patch-from-`, and open a pull request that targets `latest-release`. When the pull request is merged by the Releaser, the [publish workflow](#publishing) will eventually merge `latest-release` into `main`. Here is an example of a workflow where a feature and two bug fixes have been merged to `next`. Only the bug fixes have the "**patch:yes**" label, so only those two go into the new `7.0.19` release. Note that it is the merge commits to `next` that are cherry-picked, not the commits on the bugfix branches. @@ -173,7 +173,7 @@ gitGraph > **Note** > Workflow: [`prepare-non-patch-release.yml`](../.github/workflows/prepare-non-patch-release.yml) -Non-patch-releases are prepared with all content from the `next` branch. The changelog is generated by examining the git history, and looking up all the commits and pull requests between the current prerelease (on `next-release`) and `HEAD` of `next`. +Non-patch releases are prepared with all content from the `next` branch. The changelog is generated by examining the git history, and looking up all the commits and pull requests between the current prerelease (on `next-release`) and `HEAD` of `next`. The default versioning strategy is to increase the current prerelease number, as described in [Prereleases - `7.1.0-alpha.12` -> `7.1.0-alpha.13`](#prereleases---710-alpha12---710-alpha13). If there is no prerelease number (i.e., we just released a new stable minor/major version), it will add one to a patch bump, so it would go from `7.2.0` to `7.2.1-0` by default. @@ -215,7 +215,7 @@ gitGraph > **Note** > Workflow: [`publish.yml`](../.github/workflows/publish.yml) -When either a non-patch-release or a patch release branch is merged into `latest-release` or `next-release`, the publishing workflow is triggered. This workflow performs the following tasks: +When either a non-patch release or a patch release branch is merged into `latest-release` or `next-release`, the publishing workflow is triggered. This workflow performs the following tasks: 1. Bump versions of all packages according to the plan from the prepared PRs 2. Install dependencies and build all packages. @@ -306,7 +306,7 @@ The workflows can be triggered here: Crucially for prereleases, this is also where you change the versioning strategy if you need something else than the default as described in [Preparing - Non-patch Releases](#non-patch-releases). When triggering the non-patch workflow manually, you can optionally add inputs: -![Screenshot of triggering the non-patch-release workflow in GitHub Actions, with a form that shows a release type selector and a prerelease identifier text field](prerelease-workflow-inputs.png) +![Screenshot of triggering the non-patch release workflow in GitHub Actions, with a form that shows a release type selector and a prerelease identifier text field](prerelease-workflow-inputs.png) See [Versioning Scenarios](#versioning-scenarios) for a description of each version bump scenario, how to activate it and what it does, and [Which combination of inputs creates the version bump I need?](#which-combination-of-inputs-creates-the-version-bump-i-need) for a detailed description of the workflow inputs. @@ -376,7 +376,7 @@ Before you start you should make sure that your working tree is clean and the re 4. `git add ./CHANGELOG.md` 5. `git commit -m "Update CHANGELOG.md for v"` 6. `git push origin` -19. (If non-patch-release) Sync `versions/next.json` from `next` to `main` +19. (If non-patch release) Sync `versions/next.json` from `next` to `main` 1. `git checkout main` 2. `git pull` 3. `git checkout origin/next ./docs/versions/next.json` From 151440b5ad87171ccd42c8748be88be60ddda92b Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 9 Oct 2023 10:35:54 +0200 Subject: [PATCH 057/110] Trigger release of 7.5.0-alpha.5 with empty commit [skip ci] From 212b2c4b2be7ead4cab2990357a9b583058c5cf2 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 9 Oct 2023 10:42:24 +0200 Subject: [PATCH 058/110] Trigger CI to release 7.5.0-alpha.5 [skip ci] --- code/deprecated/store/package.json | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/code/deprecated/store/package.json b/code/deprecated/store/package.json index 2362d4bab5c7..67e1584ccda7 100644 --- a/code/deprecated/store/package.json +++ b/code/deprecated/store/package.json @@ -55,6 +55,5 @@ ], "platform": "node", "shim": "@storybook/preview-api/dist/store" - }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" + } } From df45ee6d0f3ad437a50f1103403fa0d9da3757fc Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 9 Oct 2023 10:45:09 +0200 Subject: [PATCH 059/110] Trigger CI to release 7.5.0-alpha.5 [skip ci] --- .github/workflows/publish.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index df82ca33c9a5..8bb5fa3a82a6 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -5,7 +5,7 @@ on: push: branches: - latest-release - - non-patch-release + - next-release env: PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1 From 270c94da50270ca120fedee3ca207ba685a09c23 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Mon, 9 Oct 2023 14:32:10 +0200 Subject: [PATCH 060/110] support javascript in Svelte Vite docgen --- code/e2e-tests/framework-svelte.spec.ts | 15 ++++++- .../svelte-vite/src/plugins/svelte-docgen.ts | 43 +++++++++++-------- .../ButtonTypeScript.svelte | 38 ++++++++++++++++ .../ts-docs.stories.js | 12 ++++++ .../ButtonTypeScript.svelte | 38 ++++++++++++++++ .../ts-docs.stories.js | 12 ++++++ .../svelte/template/stories/args.stories.js | 2 +- .../{docs.stories.js => js-docs.stories.js} | 4 +- .../stories/slot-decorators.stories.js | 2 +- .../template/stories/svelte-mdx.stories.mdx | 2 +- ...tonView.svelte => ButtonJavaScript.svelte} | 4 +- 11 files changed, 146 insertions(+), 26 deletions(-) create mode 100644 code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/ButtonTypeScript.svelte create mode 100644 code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/ts-docs.stories.js create mode 100644 code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/ButtonTypeScript.svelte create mode 100644 code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/ts-docs.stories.js rename code/renderers/svelte/template/stories/{docs.stories.js => js-docs.stories.js} (52%) rename code/renderers/svelte/template/stories/views/{ButtonView.svelte => ButtonJavaScript.svelte} (92%) diff --git a/code/e2e-tests/framework-svelte.spec.ts b/code/e2e-tests/framework-svelte.spec.ts index 09136254b0f0..007f1182c781 100644 --- a/code/e2e-tests/framework-svelte.spec.ts +++ b/code/e2e-tests/framework-svelte.spec.ts @@ -18,10 +18,21 @@ test.describe('Svelte', () => { await new SbPage(page).waitUntilLoaded(); }); - test('Story have a documentation', async ({ page }) => { + test('JS story has auto-generated args table', async ({ page }) => { const sbPage = new SbPage(page); - await sbPage.navigateToStory('stories/renderers/svelte/docs', 'docs'); + await sbPage.navigateToStory('stories/renderers/svelte/js-docs', 'docs'); + const root = sbPage.previewRoot(); + const argsTable = root.locator('.docblock-argstable'); + await expect(argsTable).toContainText('Rounds the button'); + }); + + test('TS story has auto-generated args table', async ({ page }) => { + // eslint-disable-next-line jest/valid-title + test.skip(!templateName?.endsWith('ts') || false, 'Only test TS story in TS templates'); + const sbPage = new SbPage(page); + + await sbPage.navigateToStory('stories/renderers/svelte/ts-docs', 'docs'); const root = sbPage.previewRoot(); const argsTable = root.locator('.docblock-argstable'); await expect(argsTable).toContainText('Rounds the button'); diff --git a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts index fc287ec76c09..bce6ab3c1a00 100644 --- a/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts +++ b/code/frameworks/svelte-vite/src/plugins/svelte-docgen.ts @@ -65,34 +65,43 @@ export function svelteDocgen(svelteOptions: Record = {}): PluginOpt const include = /\.(svelte)$/; const filter = createFilter(include); - let docPreprocessOptions: any = null; - if (preprocessOptions) { - /* - * We can't use vitePreprocess() for the documentation - * because it uses esbuild which removes jsdoc. - * - * By default, only typescript is transpiled, and style tags are removed. - * - * Note: these preprocessors are only used to make the component - * compatible to sveltedoc-parser (no ts), not to compile - * the component. - */ - docPreprocessOptions = [typescript(), replace([[//gims, '']])]; - } + let docPreprocessOptions: Parameters[1] | undefined; return { name: 'storybook:svelte-docgen-plugin', async transform(src: string, id: string) { if (!filter(id)) return undefined; + if (preprocessOptions && !docPreprocessOptions) { + /* + * We can't use vitePreprocess() for the documentation + * because it uses esbuild which removes jsdoc. + * + * By default, only typescript is transpiled, and style tags are removed. + * + * Note: these preprocessors are only used to make the component + * compatible to sveltedoc-parser (no ts), not to compile + * the component. + */ + docPreprocessOptions = [replace([[//gims, '']])]; + + try { + const ts = require.resolve('typescript'); + if (ts) { + docPreprocessOptions.unshift(typescript()); + } + } catch { + // this will error in JavaScript-only projects, this is okay + } + } + const resource = path.relative(cwd, id); let docOptions; if (docPreprocessOptions) { - // eslint-disable-next-line @typescript-eslint/no-shadow - const src = fs.readFileSync(resource).toString(); + const rawSource = fs.readFileSync(resource).toString(); - const { code: fileContent } = await preprocess(src, docPreprocessOptions, { + const { code: fileContent } = await preprocess(rawSource, docPreprocessOptions, { filename: resource, }); diff --git a/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/ButtonTypeScript.svelte b/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/ButtonTypeScript.svelte new file mode 100644 index 000000000000..cd00f38a3d57 --- /dev/null +++ b/code/frameworks/svelte-vite/template/stories_svelte-vite-default-ts/ButtonTypeScript.svelte @@ -0,0 +1,38 @@ + + +

Button TypeScript

+ + + `, + styles: [], + standalone: true, +}) +export class Template { + @Input() label = 'default label'; + + @Input() label2 = 'default label2'; + + @Output() changed = new EventEmitter(); + + inc() { + this.changed.emit('Increase'); + } +} diff --git a/code/frameworks/angular/template/stories/basics/component-with-template/template.stories.ts b/code/frameworks/angular/template/stories/basics/component-with-template/template.stories.ts new file mode 100644 index 000000000000..55639870f262 --- /dev/null +++ b/code/frameworks/angular/template/stories/basics/component-with-template/template.stories.ts @@ -0,0 +1,24 @@ +import { Meta, StoryObj, argsToTemplate } from '@storybook/angular'; +import { Template } from './template.component'; + +const meta: Meta