From f45a96392c22e9b772382f1bc8b99b0e30520681 Mon Sep 17 00:00:00 2001 From: SpookyJelly <74237436+SpookyJelly@users.noreply.github.com> Date: Fri, 19 May 2023 12:18:44 +0900 Subject: [PATCH 001/170] fix: error on using useStoryPrepared hook sometimes, `api.getData` returns undefined. which is used by isPrepared. I added a exception for this --- code/lib/manager-api/src/modules/stories.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/code/lib/manager-api/src/modules/stories.ts b/code/lib/manager-api/src/modules/stories.ts index 0d8b7b87659..a3d0f9e922e 100644 --- a/code/lib/manager-api/src/modules/stories.ts +++ b/code/lib/manager-api/src/modules/stories.ts @@ -141,6 +141,7 @@ export const init: ModuleFn = ({ }, isPrepared: (storyId, refId) => { const data = api.getData(storyId, refId); + if(!data) return false; return data.type === 'story' ? data.prepared : true; }, resolveStory: (storyId, refId) => { From c68aa57cc47b713413b4b4901ed942d945c39564 Mon Sep 17 00:00:00 2001 From: SpookyJelly <74237436+SpookyJelly@users.noreply.github.com> Date: Tue, 23 May 2023 12:56:41 +0900 Subject: [PATCH 002/170] Update stories.ts Fixed a wrong lint. --- code/lib/manager-api/src/modules/stories.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/code/lib/manager-api/src/modules/stories.ts b/code/lib/manager-api/src/modules/stories.ts index a3d0f9e922e..b7dd4bdadc5 100644 --- a/code/lib/manager-api/src/modules/stories.ts +++ b/code/lib/manager-api/src/modules/stories.ts @@ -141,7 +141,9 @@ export const init: ModuleFn = ({ }, isPrepared: (storyId, refId) => { const data = api.getData(storyId, refId); - if(!data) return false; + if(!data) { + return false; + } return data.type === 'story' ? data.prepared : true; }, resolveStory: (storyId, refId) => { From e4fbacfb7d492eb4e8432614d67d43edf732cb1e Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 19 Jul 2023 09:48:20 +0200 Subject: [PATCH 003/170] fix formatting --- code/lib/manager-api/src/modules/stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/manager-api/src/modules/stories.ts b/code/lib/manager-api/src/modules/stories.ts index b7dd4bdadc5..a62bb7b3aef 100644 --- a/code/lib/manager-api/src/modules/stories.ts +++ b/code/lib/manager-api/src/modules/stories.ts @@ -141,7 +141,7 @@ export const init: ModuleFn = ({ }, isPrepared: (storyId, refId) => { const data = api.getData(storyId, refId); - if(!data) { + if (!data) { return false; } return data.type === 'story' ? data.prepared : true; From fdba40fc4383006681a1001f32ce2aa897421e76 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 25 Aug 2023 13:31:43 +0200 Subject: [PATCH 004/170] add deprecation notice for cjs+vite --- MIGRATION.md | 21 ++++++++++++++++----- code/lib/core-server/src/build-dev.ts | 13 +++++++++++++ 2 files changed, 29 insertions(+), 5 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 5022eefb59b..d612b131e63 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,5 +1,7 @@

Migration

+- [From version 7.3.0 to 7.4.0](#from-version-730-to-740) + - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - [From version 7.0.0 to 7.2.0](#from-version-700-to-720) - [Addon API is more type-strict](#addon-api-is-more-type-strict) - [From version 6.5.x to 7.0.0](#from-version-65x-to-700) @@ -302,6 +304,14 @@ - [Packages renaming](#packages-renaming) - [Deprecated embedded addons](#deprecated-embedded-addons) +## From version 7.3.0 to 7.4.0 + +#### CommonJS with Vite is deprecated + +Using CommonJS in the `main` configuration with `main.cjs` or `main.cts` is deprecated, and will be removed in Storybook 8.0. This is a necessary change because Vite will remove support for CommonJS in the upcoming v5 release. + +Rename your `main` configuration file to `main.js` or `main.ts` and refactor any CommonJS syntax - like `require()` or `module.exports` - to ESM. + ## From version 7.0.0 to 7.2.0 #### Addon API is more type-strict @@ -311,6 +321,7 @@ When registering an addon using `@storybook/manager-api`, the addon API is now m The `type` property is now a required field, and the `id` property should not be set anymore. Here's a correct example: + ```tsx import { addons, types } from '@storybook/manager-api'; @@ -318,7 +329,7 @@ addons.register('my-addon', () => { addons.add('my-addon/panel', { type: types.PANEL, title: 'My Addon', - render: ({ active }) => active ?
Hello World
: null, + render: ({ active }) => (active ?
Hello World
: null), }); }); ``` @@ -869,16 +880,16 @@ Given the following `main.js`: ```js export default { - stories: ['../**/*.stories.*'] -} + stories: ['../**/*.stories.*'], +}; ``` If you want to restore the previous behavior to include `node_modules`, you can update it to: ```js export default { - stories: ['../**/*.stories.*', '../**/node_modules/**/*.stories.*'] -} + stories: ['../**/*.stories.*', '../**/node_modules/**/*.stories.*'], +}; ``` The first glob would have node_modules automatically excluded by Storybook, and the second glob would include all stories that are under a nested `node_modules` directory. diff --git a/code/lib/core-server/src/build-dev.ts b/code/lib/core-server/src/build-dev.ts index 7785afdee7b..f557161703e 100644 --- a/code/lib/core-server/src/build-dev.ts +++ b/code/lib/core-server/src/build-dev.ts @@ -11,6 +11,7 @@ import { loadMainConfig, resolveAddonName, resolvePathInStorybookCache, + serverResolve, validateFrameworkName, } from '@storybook/core-common'; import prompts from 'prompts'; @@ -19,6 +20,8 @@ import { global } from '@storybook/global'; import { telemetry } from '@storybook/telemetry'; import { join, resolve } from 'path'; +import { deprecate } from '@storybook/node-logger'; +import dedent from 'ts-dedent'; import { storybookDevServer } from './dev-server'; import { outputStats } from './utils/output-stats'; import { outputStartupInformation } from './utils/output-startup-information'; @@ -102,6 +105,16 @@ export async function buildDevStandalone( getManagerBuilder(), ]); + if (builderName.includes('builder-vite')) { + const mainJsPath = serverResolve(resolve(options.configDir || '.storybook', 'main')) as string; + if (/\.c[jt]s$/.test(mainJsPath)) { + deprecate( + dedent(`Using the .cjs or .cts extension for your main config file is deprecated with Vite. + - Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#commonjs-with-vite-is-deprecated`) + ); + } + } + const resolvedRenderer = renderer && resolveAddonName(options.configDir, renderer, options); // Load second pass: all presets are applied in order From 4cbcd333fe553dabec8d4cce267531c58b2104b6 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 25 Aug 2023 23:42:14 +0200 Subject: [PATCH 005/170] Improve CJS Vite migration notes Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com> --- MIGRATION.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index d612b131e63..bd359a3da14 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -310,7 +310,7 @@ Using CommonJS in the `main` configuration with `main.cjs` or `main.cts` is deprecated, and will be removed in Storybook 8.0. This is a necessary change because Vite will remove support for CommonJS in the upcoming v5 release. -Rename your `main` configuration file to `main.js` or `main.ts` and refactor any CommonJS syntax - like `require()` or `module.exports` - to ESM. +You can address this by converting your `main` configuration file to ESM syntax and renaming it to `main.mjs` or `main.mts` if your project does not have `"type": "module"` in its `package.json`. To convert the config file to ESM you will need to replace any CommonJS syntax like `require()`, `module.exports`, or `__dirname`. If you haven't already, you may also consider adding `"type": "module"` to your package.json and converting your project to ESM. ## From version 7.0.0 to 7.2.0 From 30dd4baa1553ac6e71eb8c876151e15d0b188721 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 25 Aug 2023 23:44:11 +0200 Subject: [PATCH 006/170] link to vite discussion about ESM-only --- MIGRATION.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MIGRATION.md b/MIGRATION.md index bd359a3da14..8d865ca3058 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -308,7 +308,7 @@ #### CommonJS with Vite is deprecated -Using CommonJS in the `main` configuration with `main.cjs` or `main.cts` is deprecated, and will be removed in Storybook 8.0. This is a necessary change because Vite will remove support for CommonJS in the upcoming v5 release. +Using CommonJS in the `main` configuration with `main.cjs` or `main.cts` is deprecated, and will be removed in Storybook 8.0. This is a necessary change because [Vite will remove support for CommonJS in an upcoming release](https://github.com/vitejs/vite/discussions/13928). You can address this by converting your `main` configuration file to ESM syntax and renaming it to `main.mjs` or `main.mts` if your project does not have `"type": "module"` in its `package.json`. To convert the config file to ESM you will need to replace any CommonJS syntax like `require()`, `module.exports`, or `__dirname`. If you haven't already, you may also consider adding `"type": "module"` to your package.json and converting your project to ESM. From d80f62c8def8943db786630517c3735b93427247 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 29 Aug 2023 10:01:14 +0200 Subject: [PATCH 007/170] Improve VIte+CJS deprecation wording --- code/lib/core-server/src/build-dev.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/core-server/src/build-dev.ts b/code/lib/core-server/src/build-dev.ts index f557161703e..630c99a4d36 100644 --- a/code/lib/core-server/src/build-dev.ts +++ b/code/lib/core-server/src/build-dev.ts @@ -109,7 +109,7 @@ export async function buildDevStandalone( const mainJsPath = serverResolve(resolve(options.configDir || '.storybook', 'main')) as string; if (/\.c[jt]s$/.test(mainJsPath)) { deprecate( - dedent(`Using the .cjs or .cts extension for your main config file is deprecated with Vite. + dedent(`Using CommonJS in your main configuration file is deprecated with Vite." - Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#commonjs-with-vite-is-deprecated`) ); } From a0e1c7386203be952dfc0da324e12ed37fc2a4ce Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 29 Aug 2023 13:13:22 +0200 Subject: [PATCH 008/170] show deprecation warning when main.js contains CommonJS syntax. --- code/lib/core-server/src/build-dev.ts | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/code/lib/core-server/src/build-dev.ts b/code/lib/core-server/src/build-dev.ts index 630c99a4d36..f40e66cce79 100644 --- a/code/lib/core-server/src/build-dev.ts +++ b/code/lib/core-server/src/build-dev.ts @@ -22,6 +22,7 @@ import { telemetry } from '@storybook/telemetry'; import { join, resolve } from 'path'; import { deprecate } from '@storybook/node-logger'; import dedent from 'ts-dedent'; +import { readFile } from 'fs-extra'; import { storybookDevServer } from './dev-server'; import { outputStats } from './utils/output-stats'; import { outputStartupInformation } from './utils/output-startup-information'; @@ -106,12 +107,20 @@ export async function buildDevStandalone( ]); if (builderName.includes('builder-vite')) { + const deprecationMessage = + dedent(`Using CommonJS in your main configuration file is deprecated with Vite. + - Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#commonjs-with-vite-is-deprecated`); + const mainJsPath = serverResolve(resolve(options.configDir || '.storybook', 'main')) as string; if (/\.c[jt]s$/.test(mainJsPath)) { - deprecate( - dedent(`Using CommonJS in your main configuration file is deprecated with Vite." - - Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#commonjs-with-vite-is-deprecated`) - ); + deprecate(deprecationMessage); + } + const mainJsContent = await readFile(mainJsPath, 'utf-8'); + // Regex that matches any CommonJS-specific syntax, stolen from Vite: https://github.com/vitejs/vite/blob/91a18c2f7da796ff8217417a4bf189ddda719895/packages/vite/src/node/ssr/ssrExternal.ts#L87 + const CJS_CONTENT_REGEX = + /\bmodule\.exports\b|\bexports[.[]|\brequire\s*\(|\bObject\.(?:defineProperty|defineProperties|assign)\s*\(\s*exports\b/; + if (CJS_CONTENT_REGEX.test(mainJsContent)) { + deprecate(deprecationMessage); } } From f9b724c2983a36477390c410f2efea4e02cfa475 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Tue, 31 Oct 2023 23:41:33 +0000 Subject: [PATCH 009/170] Docs: Test runner minor fixes --- .../snippets/common/test-runner-a11y-config.js.mdx | 2 +- .../snippets/common/test-runner-a11y-config.ts.mdx | 5 ++--- .../common/test-runner-a11y-configure.js.mdx | 2 +- .../common/test-runner-a11y-configure.ts.mdx | 7 +++---- .../common/test-runner-a11y-disable.js.mdx | 5 ++--- .../common/test-runner-a11y-disable.ts.mdx | 7 +++---- .../common/test-runner-helper-function.js.mdx | 5 ++++- .../common/test-runner-helper-function.ts.mdx | 6 ++++-- docs/writing-tests/accessibility-testing.md | 8 ++++---- docs/writing-tests/test-runner.md | 14 +++++++------- 10 files changed, 31 insertions(+), 30 deletions(-) diff --git a/docs/snippets/common/test-runner-a11y-config.js.mdx b/docs/snippets/common/test-runner-a11y-config.js.mdx index d7afb9b7745..bf5f2b954fb 100644 --- a/docs/snippets/common/test-runner-a11y-config.js.mdx +++ b/docs/snippets/common/test-runner-a11y-config.js.mdx @@ -4,7 +4,7 @@ const { injectAxe, checkA11y } = require('axe-playwright'); /* - * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental + * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api * to learn more about the test-runner hooks API. */ module.exports = { diff --git a/docs/snippets/common/test-runner-a11y-config.ts.mdx b/docs/snippets/common/test-runner-a11y-config.ts.mdx index 9339eb7e2ae..a317cb46ad1 100644 --- a/docs/snippets/common/test-runner-a11y-config.ts.mdx +++ b/docs/snippets/common/test-runner-a11y-config.ts.mdx @@ -1,12 +1,11 @@ ```ts // .storybook/test-runner.ts -import { injectAxe, checkA11y } from 'axe-playwright'; - import type { TestRunnerConfig } from '@storybook/test-runner'; +import { injectAxe, checkA11y } from 'axe-playwright'; /* - * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental + * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api * to learn more about the test-runner hooks API. */ const a11yConfig: TestRunnerConfig = { diff --git a/docs/snippets/common/test-runner-a11y-configure.js.mdx b/docs/snippets/common/test-runner-a11y-configure.js.mdx index e7ddb352d5e..23333177d9a 100644 --- a/docs/snippets/common/test-runner-a11y-configure.js.mdx +++ b/docs/snippets/common/test-runner-a11y-configure.js.mdx @@ -6,7 +6,7 @@ const { injectAxe, checkA11y, configureAxe } = require('axe-playwright'); const { getStoryContext } = require('@storybook/test-runner'); /* - * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental + * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api * to learn more about the test-runner hooks API. */ module.exports = { diff --git a/docs/snippets/common/test-runner-a11y-configure.ts.mdx b/docs/snippets/common/test-runner-a11y-configure.ts.mdx index 8b1f4d31037..8828a71bba0 100644 --- a/docs/snippets/common/test-runner-a11y-configure.ts.mdx +++ b/docs/snippets/common/test-runner-a11y-configure.ts.mdx @@ -1,14 +1,13 @@ ```ts // .storybook/test-runner.ts -import { injectAxe, checkA11y, configureAxe } from 'axe-playwright'; - +import type { TestRunnerConfig } from '@storybook/test-runner'; import { getStoryContext } from '@storybook/test-runner'; -import type { TestRunnerConfig } from '@storybook/test-runner'; +import { injectAxe, checkA11y, configureAxe } from 'axe-playwright'; /* - * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental + * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api * to learn more about the test-runner hooks API. */ const a11yConfig: TestRunnerConfig = { diff --git a/docs/snippets/common/test-runner-a11y-disable.js.mdx b/docs/snippets/common/test-runner-a11y-disable.js.mdx index edb12dab0bf..02a13b3efca 100644 --- a/docs/snippets/common/test-runner-a11y-disable.js.mdx +++ b/docs/snippets/common/test-runner-a11y-disable.js.mdx @@ -1,12 +1,11 @@ ```js // .storybook/test-runner.js -const { injectAxe, checkA11y } = require('axe-playwright'); - const { getStoryContext } = require('@storybook/test-runner'); +const { injectAxe, checkA11y } = require('axe-playwright'); /* - * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental + * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api * to learn more about the test-runner hooks API. */ module.exports = { diff --git a/docs/snippets/common/test-runner-a11y-disable.ts.mdx b/docs/snippets/common/test-runner-a11y-disable.ts.mdx index 3297e8ea0b7..986b8c09eaf 100644 --- a/docs/snippets/common/test-runner-a11y-disable.ts.mdx +++ b/docs/snippets/common/test-runner-a11y-disable.ts.mdx @@ -1,14 +1,13 @@ ```ts // .storybook/test-runner.ts -import { injectAxe, checkA11y } from 'axe-playwright'; - +import type { TestRunnerConfig } from '@storybook/test-runner'; import { getStoryContext } from '@storybook/test-runner'; -import type { TestRunnerConfig } from '@storybook/test-runner'; +import { injectAxe, checkA11y } from 'axe-playwright'; /* - * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental + * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api * to learn more about the test-runner hooks API. */ const a11yConfig: TestRunnerConfig = { diff --git a/docs/snippets/common/test-runner-helper-function.js.mdx b/docs/snippets/common/test-runner-helper-function.js.mdx index 6ce0e1bf412..739f0034b59 100644 --- a/docs/snippets/common/test-runner-helper-function.js.mdx +++ b/docs/snippets/common/test-runner-helper-function.js.mdx @@ -1,7 +1,7 @@ ```js // .storybook/test-runner.js -const { getStoryContext } = require('@storybook/test-runner'); +const { getStoryContext, waitForPageReady } = require('@storybook/test-runner'); module.exports = { // Hook that is executed before the test runner starts running tests @@ -23,6 +23,9 @@ module.exports = { // Get the entire context of a story, including parameters, args, argTypes, etc. const storyContext = await getStoryContext(page, context); + // This utility function is designed for image snapshot testing. It will wait for the page to be fully loaded, including all the async items (e.g., images, fonts, etc.). + await waitForPageReady(page); + // Add your configuration here. }, }; diff --git a/docs/snippets/common/test-runner-helper-function.ts.mdx b/docs/snippets/common/test-runner-helper-function.ts.mdx index 94a9824a68a..eea475d13f2 100644 --- a/docs/snippets/common/test-runner-helper-function.ts.mdx +++ b/docs/snippets/common/test-runner-helper-function.ts.mdx @@ -2,8 +2,7 @@ // .storybook/test-runner.ts import type { TestRunnerConfig } from '@storybook/test-runner'; - -import { getStoryContext } from '@storybook/test-runner'; +import { getStoryContext, waitForPageReady } from '@storybook/test-runner'; const config: TestRunnerConfig = { // Hook that is executed before the test runner starts running tests @@ -25,6 +24,9 @@ const config: TestRunnerConfig = { // Get the entire context of a story, including parameters, args, argTypes, etc. const storyContext = await getStoryContext(page, context); + // This utility function is designed for image snapshot testing. It will wait for the page to be fully loaded, including all the async items (e.g., images, fonts, etc.). + await waitForPageReady(page); + // Add your configuration here. }, }; diff --git a/docs/writing-tests/accessibility-testing.md b/docs/writing-tests/accessibility-testing.md index d6dbba00d27..4773ec8594b 100644 --- a/docs/writing-tests/accessibility-testing.md +++ b/docs/writing-tests/accessibility-testing.md @@ -89,7 +89,7 @@ Out of the box, Storybook's accessibility addon includes a set of accessibility #### Global a11y configuration -If you need to dismiss an accessibility rule or modify its settings across all stories, you can add the following to your [storybook/preview.js](../configure/overview.md#configure-story-rendering): +If you need to dismiss an accessibility rule or modify its settings across all stories, you can add the following to your [`storybook/preview.js|ts`](../configure/overview.md#configure-story-rendering): @@ -170,7 +170,7 @@ Disable accessibility testing for stories or components by adding the following The most accurate way to check accessibility is manually on real devices. However, you can use automated tools to catch common accessibility issues. For example, [Axe](https://www.deque.com/axe/), on average, catches upwards to [57% of WCAG issues](https://www.deque.com/blog/automated-testing-study-identifies-57-percent-of-digital-accessibility-issues/) automatically. -These tools work by auditing the rendered DOM against heuristics based on [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) rules and other industry-accepted best practices. You can then integrate these tools into your test automation pipeline using the Storybook [test runner](./test-runner.md#test-hook-api-experimental) and [axe-playwright](https://github.com/abhinaba-ghosh/axe-playwright). +These tools work by auditing the rendered DOM against heuristics based on [WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) rules and other industry-accepted best practices. You can then integrate these tools into your test automation pipeline using the Storybook [test runner](./test-runner.md#test-hook-api) and [axe-playwright](https://github.com/abhinaba-ghosh/axe-playwright). ### Setup @@ -190,7 +190,7 @@ Run the following command to install the required dependencies. -Add a new [configuration file](./test-runner.md#test-hook-api-experimental) inside your Storybook directory with the following inside: +Add a new [configuration file](./test-runner.md#test-hook-api) inside your Storybook directory with the following inside: @@ -205,7 +205,7 @@ Add a new [configuration file](./test-runner.md#test-hook-api-experimental) insi
-šŸ’” `preRender` and `postRender` are convenient hooks that allow you to extend the test runner's default configuration. They are **experimental** and subject to changes. Read more about them [here](./test-runner.md#test-hook-api-experimental). +šŸ’” `preRender` and `postRender` are convenient hooks that allow you to extend the test runner's default configuration. Read more about them [here](./test-runner.md#test-hook-api).
diff --git a/docs/writing-tests/test-runner.md b/docs/writing-tests/test-runner.md index e75bee68c54..ebecf03198d 100644 --- a/docs/writing-tests/test-runner.md +++ b/docs/writing-tests/test-runner.md @@ -190,19 +190,19 @@ However, you might want to pair the test runner and Chromatic in some cases. ## Advanced configuration -### Test hook API (experimental) +### Test hook API The test-runner renders a story and executes its [play function](../writing-stories/play-function.md) if one exists. However, certain behaviors are impossible to achieve via the play function, which executes in the browser. For example, if you want the test-runner to take visual snapshots for you, this is possible via Playwright/Jest but must be executed in Node. The test-runner exports test hooks that can be overridden globally to enable use cases like visual or DOM snapshots. These hooks give you access to the test lifecycle _before_ and _after_ the story is rendered. Listed below are the available hooks and an overview of how to use them. -| Hook | Description | -| ------------ | -------------------------------------------------------------------------------------------------- | -| `prepare` | Prepares the browser for tests
`async prepare({ page, browserContext, testRunnerConfig }) {}` | -| `setup` | Executes once before all the tests run
`setup() {}` | -| `preRender` | Executes before a story is rendered
`async preRender(page, context) {}` | -| `postRender` | Executes after the story is rendered
`async postRender(page, context) {}` | +| Hook | Description | +| ------------ | ------------------------------------------------------------------------------------------------- | +| `prepare` | Prepares the browser for tests
`async prepare({ page, browserContext, testRunnerConfig }) {}` | +| `setup` | Executes once before all the tests run
`setup() {}` | +| `preRender` | Executes before a story is rendered
`async preRender(page, context) {}` | +| `postRender` | Executes after the story is rendered
`async postRender(page, context) {}` |
From 8286a8dfcaf8d8700a8f0ee7c895bcc4ba9d0371 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 3 Nov 2023 10:05:00 +0100 Subject: [PATCH 010/170] Convert build-package to Typescript --- code/package.json | 2 +- .../{build-package.js => build-package.ts} | 64 ++++++++++--------- 2 files changed, 35 insertions(+), 31 deletions(-) rename scripts/{build-package.js => build-package.ts} (74%) diff --git a/code/package.json b/code/package.json index 2b996643bff..685378e820c 100644 --- a/code/package.json +++ b/code/package.json @@ -26,7 +26,7 @@ }, "scripts": { "await-serve-storybooks": "wait-on http://localhost:8001", - "build": "NODE_ENV=production node ../scripts/build-package.js", + "build": "NODE_ENV=production ts-node --swc --esm ../scripts/build-package.ts", "changelog": "pr-log --sloppy --cherry-pick", "changelog:next": "pr-log --sloppy --since-prerelease", "check": "NODE_ENV=production node ../scripts/check-package.js", diff --git a/scripts/build-package.js b/scripts/build-package.ts similarity index 74% rename from scripts/build-package.js rename to scripts/build-package.ts index c76af11b8a0..ab7a4be048a 100644 --- a/scripts/build-package.js +++ b/scripts/build-package.ts @@ -1,39 +1,41 @@ #!/usr/bin/env node /* eslint-disable global-require */ -const { resolve, join, posix, sep } = require('path'); -const { readJSON } = require('fs-extra'); - -async function getWorkspaces(includePrivate = true) { - const { execaCommand } = await import('execa'); - const { stdout } = await execaCommand(`yarn workspaces list --json --no-private`, { - cwd: join(__dirname, '..', 'code'), - shell: true, - }); - return JSON.parse(`[${stdout.split('\n').join(',')}]`); -} +import { resolve, posix, sep } from 'path'; +import { readJSON } from 'fs-extra'; +import prompts from 'prompts'; +import program from 'commander'; +import chalk from 'chalk'; +import { getWorkspaces } from './utils/workspace'; +import { execaCommand } from './utils/exec'; async function run() { - const prompts = require('prompts'); - const program = require('commander'); - const chalk = require('chalk'); - const packages = await getWorkspaces(); const packageTasks = packages - .map((package) => { + .map((pkg) => { return { - ...package, - suffix: package.name.replace('@storybook/', ''), + ...pkg, + suffix: pkg.name.replace('@storybook/', ''), defaultValue: false, - helpText: `build only the ${package.name} package`, + helpText: `build only the ${pkg.name} package`, }; }) .reduce((acc, next) => { acc[next.name] = next; return acc; - }, {}); + }, {} as Record); - const tasks = { + const tasks: Record< + string, + { + name: string; + defaultValue: boolean; + suffix: string; + helpText: string; + value?: any; + location?: string; + } + > = { watch: { name: `watch`, defaultValue: false, @@ -92,6 +94,7 @@ async function run() { name: 'todo', min: 1, hint: 'You can also run directly with package name like `yarn build core`, or `yarn build --all` for all packages!', + // @ts-expect-error @types incomplete optionsPerPage: require('window-size').height - 3, // 3 lines for extra info choices: packages.map(({ name: key }) => ({ value: key, @@ -99,7 +102,7 @@ async function run() { selected: (tasks[key] && tasks[key].defaultValue) || false, })), }, - ]).then(({ watch, prod, todo }) => { + ]).then(({ watch, prod, todo }: { watch: boolean; prod: boolean; todo: Array }) => { watchMode = watch; prodMode = prod; return todo?.map((key) => tasks[key]); @@ -119,9 +122,8 @@ async function run() { .join(sep); const cwd = resolve(__dirname, '..', 'code', v.location); - const { execaCommand } = await import('execa'); const tsNode = require.resolve('ts-node/dist/bin'); - const sub = execaCommand( + const sub = await execaCommand( `node ${tsNode} ${commmand}${watchMode ? ' --watch' : ''}${prodMode ? ' --optimized' : ''}`, { cwd, @@ -134,16 +136,18 @@ async function run() { } ); - sub.stdout.on('data', (data) => { - process.stdout.write(`${chalk.cyan(v.name)}:\n${data}`); - }); - sub.stderr.on('data', (data) => { - process.stderr.write(`${chalk.red(v.name)}:\n${data}`); - }); + if (sub.stdout) { + process.stdout.write(`${chalk.cyan(v.name)}:\n${sub.stdout}`); + } + + if (sub.stderr) { + process.stderr.write(`${chalk.red(v.name)}:\n${sub.stderr}`); + } }); } run().catch((e) => { + // eslint-disable-next-line no-console console.log(e); process.exit(1); }); From b7ef8c560f5e45fce519fd9602ae3e5579495881 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 3 Nov 2023 10:58:02 +0100 Subject: [PATCH 011/170] Use esbuild as esm loader for node --- code/.eslintrc.js | 2 +- code/addons/a11y/package.json | 4 +- code/addons/actions/package.json | 4 +- code/addons/backgrounds/package.json | 4 +- code/addons/controls/package.json | 4 +- code/addons/docs/package.json | 4 +- code/addons/essentials/package.json | 4 +- code/addons/gfm/package.json | 4 +- code/addons/highlight/package.json | 4 +- code/addons/interactions/package.json | 4 +- code/addons/jest/package.json | 4 +- code/addons/links/package.json | 4 +- code/addons/measure/package.json | 4 +- code/addons/outline/package.json | 4 +- code/addons/storyshots-core/package.json | 4 +- code/addons/storyshots-puppeteer/package.json | 4 +- code/addons/storysource/package.json | 4 +- code/addons/themes/package.json | 4 +- code/addons/toolbars/package.json | 4 +- code/addons/viewport/package.json | 4 +- code/builders/builder-manager/package.json | 4 +- code/builders/builder-vite/package.json | 4 +- code/builders/builder-webpack5/package.json | 4 +- code/deprecated/addons/package.json | 4 +- .../channel-postmessage/package.json | 4 +- .../deprecated/channel-websocket/package.json | 4 +- code/deprecated/client-api/package.json | 4 +- code/deprecated/core-client/package.json | 4 +- code/deprecated/manager-api-shim/package.json | 4 +- code/deprecated/preview-web/package.json | 4 +- code/deprecated/store/package.json | 4 +- code/frameworks/angular/package.json | 4 +- code/frameworks/ember/package.json | 4 +- code/frameworks/html-vite/package.json | 4 +- code/frameworks/html-webpack5/package.json | 4 +- code/frameworks/nextjs/package.json | 4 +- code/frameworks/preact-vite/package.json | 4 +- code/frameworks/preact-webpack5/package.json | 4 +- code/frameworks/react-vite/package.json | 4 +- code/frameworks/react-webpack5/package.json | 4 +- code/frameworks/server-webpack5/package.json | 4 +- code/frameworks/svelte-vite/package.json | 4 +- code/frameworks/svelte-webpack5/package.json | 4 +- code/frameworks/sveltekit/package.json | 4 +- code/frameworks/vue-vite/package.json | 4 +- code/frameworks/vue-webpack5/package.json | 4 +- code/frameworks/vue3-vite/package.json | 4 +- code/frameworks/vue3-webpack5/package.json | 4 +- .../web-components-vite/package.json | 4 +- .../web-components-webpack5/package.json | 4 +- code/lib/channels/package.json | 4 +- code/lib/cli/package.json | 4 +- code/lib/client-logger/package.json | 4 +- code/lib/codemod/package.json | 4 +- code/lib/core-common/package.json | 4 +- code/lib/core-events/package.json | 4 +- code/lib/core-server/package.json | 4 +- code/lib/core-webpack/package.json | 4 +- code/lib/csf-plugin/package.json | 4 +- code/lib/csf-tools/package.json | 4 +- code/lib/docs-tools/package.json | 4 +- code/lib/instrumenter/package.json | 4 +- code/lib/manager-api/package.json | 4 +- code/lib/node-logger/package.json | 4 +- code/lib/postinstall/package.json | 4 +- code/lib/preview-api/package.json | 4 +- code/lib/preview/package.json | 4 +- code/lib/react-dom-shim/package.json | 4 +- code/lib/router/package.json | 4 +- code/lib/source-loader/package.json | 4 +- code/lib/telemetry/package.json | 4 +- code/lib/test/package.json | 4 +- code/lib/theming/package.json | 4 +- code/lib/types/package.json | 4 +- code/package.json | 2 +- code/presets/create-react-app/package.json | 4 +- code/presets/html-webpack/package.json | 4 +- code/presets/preact-webpack/package.json | 4 +- code/presets/react-webpack/package.json | 4 +- code/presets/server-webpack/package.json | 4 +- code/presets/svelte-webpack/package.json | 4 +- code/presets/vue-webpack/package.json | 4 +- code/presets/vue3-webpack/package.json | 4 +- .../web-components-webpack/package.json | 4 +- code/prettier.config.js | 2 +- code/renderers/html/package.json | 4 +- code/renderers/preact/package.json | 4 +- code/renderers/react/package.json | 4 +- code/renderers/server/package.json | 4 +- code/renderers/svelte/package.json | 2 +- code/renderers/vue/package.json | 2 +- code/renderers/vue3/package.json | 2 +- code/renderers/web-components/package.json | 4 +- code/ui/blocks/package.json | 4 +- code/ui/components/package.json | 4 +- code/ui/manager/package.json | 4 +- scripts/.babelrc.js | 2 +- scripts/{.eslintrc.js => .eslintrc.cjs} | 0 scripts/build-package.ts | 11 ++--- ...dependencies.js => check-dependencies.cjs} | 0 .../{check-package.js => check-package.cjs} | 0 scripts/{jest.config.js => jest.config.cjs} | 0 scripts/package.json | 47 ++++++++++--------- scripts/prepare/bundle.ts | 2 - scripts/prepare/check-scripts.ts | 4 +- scripts/prepare/check.ts | 4 +- ...prettier.config.js => prettier.config.cjs} | 0 scripts/release/publish.ts | 10 +--- scripts/tasks/bench.ts | 8 ++-- scripts/tasks/dev.ts | 2 +- scripts/tasks/sandbox.ts | 12 +++-- scripts/tasks/serve.ts | 2 +- scripts/tsconfig.json | 8 ++-- scripts/utils/exec.ts | 15 ++---- scripts/yarn.lock | 28 +++++++---- 115 files changed, 259 insertions(+), 268 deletions(-) rename scripts/{.eslintrc.js => .eslintrc.cjs} (100%) rename scripts/{check-dependencies.js => check-dependencies.cjs} (100%) rename scripts/{check-package.js => check-package.cjs} (100%) rename scripts/{jest.config.js => jest.config.cjs} (100%) rename scripts/{prettier.config.js => prettier.config.cjs} (100%) diff --git a/code/.eslintrc.js b/code/.eslintrc.js index e967113bb8e..efc6cd34e3c 100644 --- a/code/.eslintrc.js +++ b/code/.eslintrc.js @@ -4,7 +4,7 @@ const scriptPath = path.join(__dirname, '..', 'scripts'); module.exports = { root: true, - extends: [path.join(scriptPath, '.eslintrc.js')], + extends: [path.join(scriptPath, '.eslintrc.cjs')], parserOptions: { tsconfigRootDir: __dirname, project: ['./tsconfig.json'], diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 2b635b2abff..fccfdda1b68 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -60,8 +60,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/addon-highlight": "workspace:*", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index adbd0ac5ad7..448dcdb90af 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -77,8 +77,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 1738199adcf..38699d6a5aa 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -73,8 +73,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index b3992f0705a..fc4d7665b53 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -65,8 +65,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/blocks": "workspace:*", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index a75135fde19..dbf13c91447 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -94,8 +94,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@jest/transform": "^29.3.1", diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index ef565711cb1..a810921632a 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -116,8 +116,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/addon-actions": "workspace:*", diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index d5fa5f53336..750014b2a30 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -48,8 +48,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/node-logger": "workspace:*", diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index d6e8dd72260..d5a3798a03c 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -58,8 +58,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/core-events": "workspace:*", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 1006df6c820..bcfe77ee9b3 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -69,8 +69,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index d5437afd908..7b5e909e34d 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -67,8 +67,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index ce5b0f9955d..0ffc8792001 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -77,8 +77,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index aab6e01731b..9a2de417328 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -72,8 +72,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 0dbe1187714..d520458bc6f 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -75,8 +75,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/addons/storyshots-core/package.json b/code/addons/storyshots-core/package.json index d3b70029f54..6db842c9754 100644 --- a/code/addons/storyshots-core/package.json +++ b/code/addons/storyshots-core/package.json @@ -33,8 +33,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/tsc.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/tsc.ts" }, "dependencies": { "@jest/transform": "^29.3.1", diff --git a/code/addons/storyshots-puppeteer/package.json b/code/addons/storyshots-puppeteer/package.json index bd97205d275..c19d88a6a9e 100644 --- a/code/addons/storyshots-puppeteer/package.json +++ b/code/addons/storyshots-puppeteer/package.json @@ -32,8 +32,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/tsc.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/tsc.ts" }, "dependencies": { "@axe-core/puppeteer": "^4.2.0", diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index 02fb9f3e1a5..53bff4fb96b 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -50,8 +50,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index 3e0f448d784..dc418750215 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -70,8 +70,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index d9c00c78607..86e88e18b6a 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -65,8 +65,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index 44da576cbd9..daec078a7bc 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -70,8 +70,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/builders/builder-manager/package.json b/code/builders/builder-manager/package.json index 40ba6562244..1592368bd9f 100644 --- a/code/builders/builder-manager/package.json +++ b/code/builders/builder-manager/package.json @@ -40,8 +40,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@fal-works/esbuild-plugin-global-externals": "^2.1.2", diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index e1e9203449f..1fe79c77e95 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -39,8 +39,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/channels": "workspace:*", diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index d0a5affdbb2..f7a6ae2a50a 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -52,8 +52,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@babel/core": "^7.23.2", diff --git a/code/deprecated/addons/package.json b/code/deprecated/addons/package.json index a53096886a1..5c03086792b 100644 --- a/code/deprecated/addons/package.json +++ b/code/deprecated/addons/package.json @@ -40,8 +40,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/manager-api": "workspace:*", diff --git a/code/deprecated/channel-postmessage/package.json b/code/deprecated/channel-postmessage/package.json index 5c7575c2ca9..1d25d3d36de 100644 --- a/code/deprecated/channel-postmessage/package.json +++ b/code/deprecated/channel-postmessage/package.json @@ -40,8 +40,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/channels": "workspace:*", diff --git a/code/deprecated/channel-websocket/package.json b/code/deprecated/channel-websocket/package.json index 867b016f8ec..4915fca744c 100644 --- a/code/deprecated/channel-websocket/package.json +++ b/code/deprecated/channel-websocket/package.json @@ -40,8 +40,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/facade.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/facade.ts" }, "dependencies": { "@storybook/channels": "workspace:*", diff --git a/code/deprecated/client-api/package.json b/code/deprecated/client-api/package.json index a03910376b1..e2039ae389d 100644 --- a/code/deprecated/client-api/package.json +++ b/code/deprecated/client-api/package.json @@ -39,8 +39,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/facade.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/facade.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/deprecated/core-client/package.json b/code/deprecated/core-client/package.json index 00584a31ff5..161a0d50f63 100644 --- a/code/deprecated/core-client/package.json +++ b/code/deprecated/core-client/package.json @@ -31,8 +31,8 @@ "module": "dist/entry.mjs", "types": "dist/entry.d.ts", "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/facade.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/facade.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/deprecated/manager-api-shim/package.json b/code/deprecated/manager-api-shim/package.json index 56401af1b7b..2cd019ed843 100644 --- a/code/deprecated/manager-api-shim/package.json +++ b/code/deprecated/manager-api-shim/package.json @@ -39,8 +39,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/facade.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/facade.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/deprecated/preview-web/package.json b/code/deprecated/preview-web/package.json index 24439508961..61f82e70a08 100644 --- a/code/deprecated/preview-web/package.json +++ b/code/deprecated/preview-web/package.json @@ -39,8 +39,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/facade.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/facade.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/deprecated/store/package.json b/code/deprecated/store/package.json index b04a829ae6f..86c24e69b7a 100644 --- a/code/deprecated/store/package.json +++ b/code/deprecated/store/package.json @@ -39,8 +39,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/facade.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/facade.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index f53ac7a94f5..057073ce695 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -33,8 +33,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/node_modules/.bin/tsc", - "prep": "../../../scripts/prepare/tsc.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/node_modules/.bin/tsc", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/tsc.ts" }, "dependencies": { "@storybook/builder-webpack5": "workspace:*", diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 25d8f77bb1a..6284c395a11 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -28,8 +28,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/tsc.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/tsc.ts" }, "dependencies": { "@storybook/builder-webpack5": "workspace:*", diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index cfb5d6869a7..06f2f179562 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/addons": "workspace:*", diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index dd6af169342..32cff7f1610 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/builder-webpack5": "workspace:*", diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 373f512b4ef..a69063b7b17 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -70,8 +70,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@babel/core": "^7.23.2", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index d13d3bca0b5..50d16adb831 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@preact/preset-vite": "^2.0.0", diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index 134df169846..6bef3930343 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/builder-webpack5": "workspace:*", diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index c9e069cc4bc..c8663a71e09 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.0", diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index e27ba5be675..a56b5fd6d1c 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/builder-webpack5": "workspace:*", diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index 47f3fce958c..f263c7b6b09 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/builder-webpack5": "workspace:*", diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 567fdd79050..8d447e1bb56 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/builder-vite": "workspace:*", diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index d54a3393f84..9325d8342d9 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/builder-webpack5": "workspace:*", diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 1c0424652bc..3218d87b59b 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -46,8 +46,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/builder-vite": "workspace:*", diff --git a/code/frameworks/vue-vite/package.json b/code/frameworks/vue-vite/package.json index f3d056f6718..2bc4ada4b5e 100644 --- a/code/frameworks/vue-vite/package.json +++ b/code/frameworks/vue-vite/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/builder-vite": "workspace:*", diff --git a/code/frameworks/vue-webpack5/package.json b/code/frameworks/vue-webpack5/package.json index 95a29fae038..6bffbe8a9fa 100644 --- a/code/frameworks/vue-webpack5/package.json +++ b/code/frameworks/vue-webpack5/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/builder-webpack5": "workspace:*", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 1b39f568b92..145a44fef1c 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/builder-vite": "workspace:*", diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index f7f27f144a7..6809fff34e7 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/builder-webpack5": "workspace:*", diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index 85000c5d71a..e544462fcd2 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/builder-vite": "workspace:*", diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index 21244cdbc78..bf8be03c47c 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -46,8 +46,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@babel/preset-env": "^7.23.2", diff --git a/code/lib/channels/package.json b/code/lib/channels/package.json index 220bc00dcc2..1f9b12dadd0 100644 --- a/code/lib/channels/package.json +++ b/code/lib/channels/package.json @@ -65,8 +65,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 9a74701a677..91028341aa3 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -50,8 +50,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts", + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts", "test": "jest test/**/*.test.js" }, "dependencies": { diff --git a/code/lib/client-logger/package.json b/code/lib/client-logger/package.json index 5ad527fa292..3384e0244b9 100644 --- a/code/lib/client-logger/package.json +++ b/code/lib/client-logger/package.json @@ -40,8 +40,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/global": "^5.0.0" diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 096604690c6..f1802439a3c 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -48,8 +48,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@babel/core": "^7.23.2", diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json index a8c1af9f443..bcb3fcb8d93 100644 --- a/code/lib/core-common/package.json +++ b/code/lib/core-common/package.json @@ -40,8 +40,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/core-events": "workspace:*", diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json index d80846973c8..c7fa8ec8d70 100644 --- a/code/lib/core-events/package.json +++ b/code/lib/core-events/package.json @@ -74,8 +74,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "ts-dedent": "^2.0.0" diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index e24ec0d82bf..c785a5b8351 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -56,8 +56,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@aw-web-design/x-default-browser": "1.4.126", diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index 96bdfb086bb..41bcb84edc3 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -40,8 +40,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/core-common": "workspace:*", diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index c5fa1654516..3f9f3fe2e3b 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -40,8 +40,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/csf-tools": "workspace:*", diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index d6192a65472..e0f9dbad3a0 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -38,8 +38,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@babel/generator": "^7.23.0", diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json index b017a4651ce..28192afce43 100644 --- a/code/lib/docs-tools/package.json +++ b/code/lib/docs-tools/package.json @@ -40,8 +40,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/core-common": "workspace:*", diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index 8c885530380..175493fa5a4 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -40,8 +40,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/channels": "workspace:*", diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 801c9616d14..22a0f6167a1 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -39,8 +39,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/channels": "workspace:*", diff --git a/code/lib/node-logger/package.json b/code/lib/node-logger/package.json index de31ffedac4..92fd77b3688 100644 --- a/code/lib/node-logger/package.json +++ b/code/lib/node-logger/package.json @@ -38,8 +38,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "devDependencies": { "@types/npmlog": "^4.1.2", diff --git a/code/lib/postinstall/package.json b/code/lib/postinstall/package.json index 1be31fad2e2..4fa15f7afcc 100644 --- a/code/lib/postinstall/package.json +++ b/code/lib/postinstall/package.json @@ -41,8 +41,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "devDependencies": { "jest": "^29.7.0", diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index 7cc8235a474..965eeb0b0e1 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -64,8 +64,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/channels": "workspace:*", diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json index cc2e06b83b5..fe3ded7634f 100644 --- a/code/lib/preview/package.json +++ b/code/lib/preview/package.json @@ -52,8 +52,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/esm-bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/esm-bundle.ts" }, "devDependencies": { "@storybook/channels": "workspace:*", diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index 0b9905b221e..3f2b4241fa7 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -50,8 +50,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "devDependencies": { "@storybook/types": "workspace:*", diff --git a/code/lib/router/package.json b/code/lib/router/package.json index 70f3a92a95b..8c15e8e9828 100644 --- a/code/lib/router/package.json +++ b/code/lib/router/package.json @@ -45,8 +45,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 4066cd70955..7c068ccec9a 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -41,8 +41,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/csf": "^0.1.0", diff --git a/code/lib/telemetry/package.json b/code/lib/telemetry/package.json index f65f5d5c20e..40d3997e668 100644 --- a/code/lib/telemetry/package.json +++ b/code/lib/telemetry/package.json @@ -40,8 +40,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/lib/test/package.json b/code/lib/test/package.json index 1de2a016ba9..04234607578 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -39,8 +39,8 @@ "*.d.ts" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json index 2d64c60cf94..16bafcbb62a 100644 --- a/code/lib/theming/package.json +++ b/code/lib/theming/package.json @@ -45,8 +45,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 808579cc9bd..ca2c2ef76da 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -40,8 +40,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/channels": "workspace:*", diff --git a/code/package.json b/code/package.json index 685378e820c..45e62b2406f 100644 --- a/code/package.json +++ b/code/package.json @@ -26,7 +26,7 @@ }, "scripts": { "await-serve-storybooks": "wait-on http://localhost:8001", - "build": "NODE_ENV=production ts-node --swc --esm ../scripts/build-package.ts", + "build": "NODE_ENV=production yarn --cwd ../scripts build-package", "changelog": "pr-log --sloppy --cherry-pick", "changelog:next": "pr-log --sloppy --since-prerelease", "check": "NODE_ENV=production node ../scripts/check-package.js", diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index 6d223fe4b96..8732edf88e3 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -45,8 +45,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1", diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index f7eae3cde5a..9edf6171d74 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -45,8 +45,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/core-webpack": "workspace:*", diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index 42619ff7800..9343e882fd8 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -45,8 +45,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@babel/plugin-transform-react-jsx": "^7.22.15", diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index 2eb5e07a103..2d584621d5c 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -60,8 +60,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@babel/preset-flow": "^7.22.15", diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index fc97f71a8da..34082bf790e 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -50,8 +50,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/core-server": "workspace:*", diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index dddd9b9981c..cde249ff6bb 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -60,8 +60,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/core-webpack": "workspace:*", diff --git a/code/presets/vue-webpack/package.json b/code/presets/vue-webpack/package.json index fb9eb453821..b1842cb352a 100644 --- a/code/presets/vue-webpack/package.json +++ b/code/presets/vue-webpack/package.json @@ -55,8 +55,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/core-webpack": "workspace:*", diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index 5a9b3474c8f..a1ba38ce467 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -55,8 +55,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/core-webpack": "workspace:*", diff --git a/code/presets/web-components-webpack/package.json b/code/presets/web-components-webpack/package.json index 2b152f658fe..3ace8758cc2 100644 --- a/code/presets/web-components-webpack/package.json +++ b/code/presets/web-components-webpack/package.json @@ -48,8 +48,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@babel/plugin-syntax-dynamic-import": "^7.8.3", diff --git a/code/prettier.config.js b/code/prettier.config.js index 574656f0161..4c8f0237382 100644 --- a/code/prettier.config.js +++ b/code/prettier.config.js @@ -1 +1 @@ -module.exports = require('../scripts/prettier.config'); +module.exports = require('../scripts/prettier.config.cjs'); diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index 9dec7bb0745..7c27f74a921 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/core-client": "workspace:*", diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index 9d5330d468e..a8373cb48d7 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/core-client": "workspace:*", diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 08c29dd0122..e0372f1fb22 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 47d9cced041..c744c7c1a74 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -42,8 +42,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/core-client": "workspace:*", diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index 99a84af9c55..e33d158cc63 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -48,7 +48,7 @@ ], "scripts": { "check": "svelte-check", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/renderers/vue/package.json b/code/renderers/vue/package.json index e9b16f82f4a..d4a4df663f2 100644 --- a/code/renderers/vue/package.json +++ b/code/renderers/vue/package.json @@ -44,7 +44,7 @@ ], "scripts": { "check": "vue-tsc --noEmit", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index 3ea92f413b5..1180bad9d65 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -44,7 +44,7 @@ ], "scripts": { "check": "vue-tsc --noEmit", - "prep": "../../../scripts/prepare/bundle.ts" + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/core-client": "workspace:*", diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index 6ac0d96131d..b3edd6f79b3 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -46,8 +46,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index 91b854c8521..eea82f3056e 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -40,8 +40,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/channels": "workspace:*", diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 92973bfacc5..98d9bf32701 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -55,8 +55,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@radix-ui/react-select": "^1.2.2", diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index 6e46aecaee3..3b168cd74c9 100644 --- a/code/ui/manager/package.json +++ b/code/ui/manager/package.json @@ -47,8 +47,8 @@ "!src/**/*" ], "scripts": { - "check": "../../../scripts/prepare/check.ts", - "prep": "../../../scripts/prepare/esm-bundle.ts" + "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", + "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/esm-bundle.ts" }, "devDependencies": { "@fal-works/esbuild-plugin-global-externals": "^2.1.2", diff --git a/scripts/.babelrc.js b/scripts/.babelrc.js index 31016fd4262..c5d2be1935f 100644 --- a/scripts/.babelrc.js +++ b/scripts/.babelrc.js @@ -1,4 +1,4 @@ -module.exports = { +export default { compact: false, presets: [ '@babel/preset-typescript', diff --git a/scripts/.eslintrc.js b/scripts/.eslintrc.cjs similarity index 100% rename from scripts/.eslintrc.js rename to scripts/.eslintrc.cjs diff --git a/scripts/build-package.ts b/scripts/build-package.ts index ab7a4be048a..b63195b188a 100644 --- a/scripts/build-package.ts +++ b/scripts/build-package.ts @@ -1,11 +1,9 @@ -#!/usr/bin/env node - -/* eslint-disable global-require */ import { resolve, posix, sep } from 'path'; import { readJSON } from 'fs-extra'; import prompts from 'prompts'; import program from 'commander'; import chalk from 'chalk'; +import windowSize from 'window-size'; import { getWorkspaces } from './utils/workspace'; import { execaCommand } from './utils/exec'; @@ -95,7 +93,7 @@ async function run() { min: 1, hint: 'You can also run directly with package name like `yarn build core`, or `yarn build --all` for all packages!', // @ts-expect-error @types incomplete - optionsPerPage: require('window-size').height - 3, // 3 lines for extra info + optionsPerPage: windowSize.height - 3, // 3 lines for extra info choices: packages.map(({ name: key }) => ({ value: key, title: tasks[key].name || key, @@ -117,14 +115,13 @@ async function run() { } selection?.filter(Boolean).forEach(async (v) => { - const commmand = (await readJSON(resolve(v.location, 'package.json'))).scripts.prep + const commmand = (await readJSON(resolve('../code', v.location, 'package.json'))).scripts.prep .split(posix.sep) .join(sep); const cwd = resolve(__dirname, '..', 'code', v.location); - const tsNode = require.resolve('ts-node/dist/bin'); const sub = await execaCommand( - `node ${tsNode} ${commmand}${watchMode ? ' --watch' : ''}${prodMode ? ' --optimized' : ''}`, + `${commmand}${watchMode ? ' --watch' : ''}${prodMode ? ' --optimized' : ''}`, { cwd, buffer: false, diff --git a/scripts/check-dependencies.js b/scripts/check-dependencies.cjs similarity index 100% rename from scripts/check-dependencies.js rename to scripts/check-dependencies.cjs diff --git a/scripts/check-package.js b/scripts/check-package.cjs similarity index 100% rename from scripts/check-package.js rename to scripts/check-package.cjs diff --git a/scripts/jest.config.js b/scripts/jest.config.cjs similarity index 100% rename from scripts/jest.config.js rename to scripts/jest.config.cjs diff --git a/scripts/package.json b/scripts/package.json index b428f9b9f22..01a8ea31618 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -2,35 +2,37 @@ "name": "@storybook/scripts", "version": "7.0.0-alpha.16", "private": true, + "type": "module", "scripts": { - "check": "./prepare/check-scripts.ts", + "build-package": "node --loader esbuild-register/loader -r esbuild-register ./build-package.ts", + "check": "node --loader esbuild-register/loader -r esbuild-register ./prepare/check-scripts.ts", "docs:prettier:check": "cd ../docs && prettier --check ./snippets", "docs:prettier:write": "cd ../docs && prettier --write ./snippets", - "get-report-message": "ts-node --swc ./get-report-message.ts", - "get-template": "ts-node --swc ./get-template.ts", + "get-report-message": "node --loader esbuild-register/loader -r esbuild-register ./get-report-message.ts", + "get-template": "node --loader esbuild-register/loader -r esbuild-register ./get-template.ts", "lint": "yarn lint:js && yarn lint:md", "lint:js": "yarn lint:js:cmd . --quiet", "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", - "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", - "release:get-version-changelog": "ts-node --swc ./release/get-version-changelog.ts", - "release:is-pr-frozen": "ts-node --swc ./release/is-pr-frozen.ts", - "release:is-prerelease": "ts-node --swc ./release/is-prerelease.ts", - "release:is-version-published": "ts-node --swc ./release/is-version-published.ts", - "release:label-patches": "ts-node --swc ./release/label-patches.ts", - "release:pick-patches": "ts-node --swc ./release/pick-patches.ts", - "release:publish": "ts-node --swc ./release/publish.ts", - "release:unreleased-changes-exists": "ts-node --swc ./release/unreleased-changes-exists.ts", - "release:version": "ts-node --swc ./release/version.ts", - "release:write-changelog": "ts-node --swc ./release/write-changelog.ts", - "strict-ts": "node --require esbuild-register ./strict-ts.ts", - "task": "ts-node --swc ./task.ts", + "release:cancel-preparation-runs": "node --loader esbuild-register/loader -r esbuild-register ./release/cancel-preparation-runs.ts", + "release:ensure-next-ahead": "node --loader esbuild-register/loader -r esbuild-register ./release/ensure-next-ahead.ts", + "release:generate-pr-description": "node --loader esbuild-register/loader -r esbuild-register ./release/generate-pr-description.ts", + "release:get-changelog-from-file": "node --loader esbuild-register/loader -r esbuild-register ./release/get-changelog-from-file.ts", + "release:get-current-version": "node --loader esbuild-register/loader -r esbuild-register ./release/get-current-version.ts", + "release:get-version-changelog": "node --loader esbuild-register/loader -r esbuild-register ./release/get-version-changelog.ts", + "release:is-pr-frozen": "node --loader esbuild-register/loader -r esbuild-register ./release/is-pr-frozen.ts", + "release:is-prerelease": "node --loader esbuild-register/loader -r esbuild-register ./release/is-prerelease.ts", + "release:is-version-published": "node --loader esbuild-register/loader -r esbuild-register ./release/is-version-published.ts", + "release:label-patches": "node --loader esbuild-register/loader -r esbuild-register ./release/label-patches.ts", + "release:pick-patches": "node --loader esbuild-register/loader -r esbuild-register ./release/pick-patches.ts", + "release:publish": "node --loader esbuild-register/loader -r esbuild-register ./release/publish.ts", + "release:unreleased-changes-exists": "node --loader esbuild-register/loader -r esbuild-register ./release/unreleased-changes-exists.ts", + "release:version": "node --loader esbuild-register/loader -r esbuild-register ./release/version.ts", + "release:write-changelog": "node --loader esbuild-register/loader -r esbuild-register ./release/write-changelog.ts", + "strict-ts": "node --loader esbuild-register/loader -r esbuild-register ./strict-ts.ts", + "task": "node --loader esbuild-register/loader -r esbuild-register ./task.ts", "test": "jest --config ./jest.config.js", - "upgrade": "ts-node --swc ./task.ts", + "upgrade": "node --loader esbuild-register/loader -r esbuild-register ./task.ts", "upload-bench": "ts-node ./upload-bench.ts" }, "husky": { @@ -104,6 +106,7 @@ "@types/serve-static": "^1.13.8", "@types/uuid": "^9.0.1", "@types/wait-on": "^5.3.1", + "@types/window-size": "^1.1.3", "@typescript-eslint/eslint-plugin": "^5.45.0", "@typescript-eslint/experimental-utils": "^5.45.0", "@typescript-eslint/parser": "^5.45.0", @@ -186,7 +189,7 @@ "ts-node": "^10.9.1", "tsup": "^6.7.0", "type-fest": "~2.19", - "typescript": "5.1.6", + "typescript": "5.2.2", "util": "^0.12.4", "uuid": "^9.0.0", "wait-on": "^7.0.1", diff --git a/scripts/prepare/bundle.ts b/scripts/prepare/bundle.ts index 1228e445a03..e71d2b1a2da 100755 --- a/scripts/prepare/bundle.ts +++ b/scripts/prepare/bundle.ts @@ -1,5 +1,3 @@ -#!/usr/bin/env ../../node_modules/.bin/ts-node - import * as fs from 'fs-extra'; import path, { dirname, join, relative } from 'path'; import type { Options } from 'tsup'; diff --git a/scripts/prepare/check-scripts.ts b/scripts/prepare/check-scripts.ts index 86418acd93b..261c070c1ca 100755 --- a/scripts/prepare/check-scripts.ts +++ b/scripts/prepare/check-scripts.ts @@ -1,7 +1,5 @@ -#!/usr/bin/env ./node_modules/.bin/ts-node-script - import { join } from 'path'; -import * as ts from 'typescript'; +import ts from 'typescript'; const run = async ({ cwd }: { cwd: string }) => { const { options, fileNames } = getTSFilesAndConfig('tsconfig.json'); diff --git a/scripts/prepare/check.ts b/scripts/prepare/check.ts index d200e921ea0..fe75515f95b 100755 --- a/scripts/prepare/check.ts +++ b/scripts/prepare/check.ts @@ -1,8 +1,6 @@ -#!/usr/bin/env ../../node_modules/.bin/ts-node-script - import { join } from 'path'; import fs from 'fs-extra'; -import * as ts from 'typescript'; +import ts from 'typescript'; const run = async ({ cwd }: { cwd: string }) => { const { diff --git a/scripts/prettier.config.js b/scripts/prettier.config.cjs similarity index 100% rename from scripts/prettier.config.js rename to scripts/prettier.config.cjs diff --git a/scripts/release/publish.ts b/scripts/release/publish.ts index eeb8ab2f934..52f72d5fc64 100644 --- a/scripts/release/publish.ts +++ b/scripts/release/publish.ts @@ -7,6 +7,7 @@ import { z } from 'zod'; import { readJson } from 'fs-extra'; import fetch from 'node-fetch'; import dedent from 'ts-dedent'; +import pRetry from 'p-retry'; import { execaCommand } from '../utils/exec'; program @@ -134,15 +135,6 @@ const publishAllPackages = async ({ return; } - // Note this is to fool `ts-node` into not turning the `import()` into a `require()`. - // See: https://github.com/TypeStrong/ts-node/discussions/1290 - // prettier-ignore - const pRetry = ( - // eslint-disable-next-line @typescript-eslint/no-implied-eval - (await new Function('specifier', 'return import(specifier)')( - 'p-retry' - )) as typeof import('p-retry') - ).default; /** * 'yarn npm publish' will fail if just one package fails to publish. * But it will continue through with all the other packages, and --tolerate-republish makes it okay to publish the same version again. diff --git a/scripts/tasks/bench.ts b/scripts/tasks/bench.ts index 25325e1090e..071bbd84ff4 100644 --- a/scripts/tasks/bench.ts +++ b/scripts/tasks/bench.ts @@ -1,11 +1,11 @@ +import prettyBytes from 'pretty-bytes'; +import prettyTime from 'pretty-ms'; + import type { Task } from '../task'; import { PORT as devPort, dev } from './dev'; import { PORT as servePort, serve } from './serve'; -// eslint-disable-next-line @typescript-eslint/no-implied-eval -const dynamicImport = new Function('specifier', 'return import(specifier)'); - export const bench: Task = { description: 'Run benchmarks against a sandbox in dev mode', dependsOn: ['build'], @@ -19,8 +19,6 @@ export const bench: Task = { const { disableDocs } = options; const { browse } = await import('../bench/browse'); const { saveBench, loadBench } = await import('../bench/utils'); - const { default: prettyBytes } = await dynamicImport('pretty-bytes'); - const { default: prettyTime } = await dynamicImport('pretty-ms'); const devController = await dev.run(details, { ...options, debug: false }); if (!devController) { diff --git a/scripts/tasks/dev.ts b/scripts/tasks/dev.ts index 92e885f5207..138bb912cef 100644 --- a/scripts/tasks/dev.ts +++ b/scripts/tasks/dev.ts @@ -1,4 +1,5 @@ import detectFreePort from 'detect-port'; +import waitOn from 'wait-on'; import type { Task } from '../task'; import { exec } from '../utils/exec'; @@ -18,7 +19,6 @@ export const dev: Task = { async run({ sandboxDir, selectedTask }, { dryRun, debug }) { const controller = new AbortController(); const devCommand = `yarn storybook --port ${PORT}${selectedTask === 'dev' ? '' : ' --ci'}`; - const { default: waitOn } = await import('wait-on'); const start = now(); exec( diff --git a/scripts/tasks/sandbox.ts b/scripts/tasks/sandbox.ts index 58e7d92fe42..bf3e0bbae07 100644 --- a/scripts/tasks/sandbox.ts +++ b/scripts/tasks/sandbox.ts @@ -5,6 +5,14 @@ import { promisify } from 'util'; import dirSize from 'fast-folder-size'; import type { Task } from '../task'; import { now, saveBench } from '../bench/utils'; +import { + create, + install, + addStories, + extendMain, + init, + addExtraDependencies, +} from './sandbox-parts'; const logger = console; @@ -55,10 +63,6 @@ export const sandbox: Task = { await remove(details.sandboxDir); } - const { create, install, addStories, extendMain, init, addExtraDependencies } = await import( - './sandbox-parts' - ); - let startTime = now(); await create(details, options); const createTime = now() - startTime; diff --git a/scripts/tasks/serve.ts b/scripts/tasks/serve.ts index f5e637f33bb..2b3a5cc8c4b 100644 --- a/scripts/tasks/serve.ts +++ b/scripts/tasks/serve.ts @@ -1,4 +1,5 @@ import detectFreePort from 'detect-port'; +import waitOn from 'wait-on'; import type { Task } from '../task'; import { exec } from '../utils/exec'; @@ -26,7 +27,6 @@ export const serve: Task = { throw err; } }); - const { default: waitOn } = await import('wait-on'); await waitOn({ resources: [`http://localhost:${PORT}`], interval: 16 }); return controller; diff --git a/scripts/tsconfig.json b/scripts/tsconfig.json index c82e14a9510..0817a434243 100644 --- a/scripts/tsconfig.json +++ b/scripts/tsconfig.json @@ -5,15 +5,15 @@ "incremental": false, "noImplicitAny": true, "jsx": "react", - "moduleResolution": "Node", - "target": "ES2020", - "module": "CommonJS", + "moduleResolution": "bundler", + "target": "es2022", + "module": "ES2022", "skipLibCheck": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true, "isolatedModules": true, "strictBindCallApply": true, - "lib": ["dom", "esnext"], + "lib": ["dom", "es2023"], "types": ["node", "jest"], "strict": true, "strictNullChecks": false, diff --git a/scripts/utils/exec.ts b/scripts/utils/exec.ts index 74a88618942..4dec95e814f 100644 --- a/scripts/utils/exec.ts +++ b/scripts/utils/exec.ts @@ -1,6 +1,7 @@ /* eslint-disable no-await-in-loop, no-restricted-syntax */ import type { ExecaChildProcess, Options } from 'execa'; import chalk from 'chalk'; +import { execa } from 'execa'; const logger = console; @@ -12,21 +13,14 @@ type StepOptions = { signal?: AbortSignal; }; -// Note this is to fool `ts-node` into not turning the `import()` into a `require()`. -// See: https://github.com/TypeStrong/ts-node/discussions/1290 -// eslint-disable-next-line @typescript-eslint/no-implied-eval -const dynamicImport = new Function('specifier', 'return import(specifier)'); -export const getExeca = async () => (await dynamicImport('execa')) as typeof import('execa'); - // Reimplementation of `execaCommand` to use `getExeca` export const execaCommand = async ( command: string, options: Options = {} ): Promise> => { - const execa = await getExeca(); // We await here because execaCommand returns a promise, but that's not what the user expects // eslint-disable-next-line @typescript-eslint/return-await - return await execa.execaCommand(command, { + return await execa(command, { cleanup: true, ...options, }); @@ -37,7 +31,6 @@ export const exec = async ( options: Options = {}, { startMessage, errorMessage, dryRun, debug, signal }: StepOptions = {} ): Promise => { - const execa = await getExeca(); logger.info(); if (startMessage) logger.info(startMessage); @@ -57,12 +50,12 @@ export const exec = async ( try { if (typeof command === 'string') { logger.debug(`> ${command}`); - currentChild = execa.execaCommand(command, { ...defaultOptions, ...options }); + currentChild = execa(command, { ...defaultOptions, ...options }); await currentChild; } else { for (const subcommand of command) { logger.debug(`> ${subcommand}`); - currentChild = execa.execaCommand(subcommand, { ...defaultOptions, ...options }); + currentChild = execa(subcommand, { ...defaultOptions, ...options }); await currentChild; } } diff --git a/scripts/yarn.lock b/scripts/yarn.lock index 411298c2d9b..961917e0907 100644 --- a/scripts/yarn.lock +++ b/scripts/yarn.lock @@ -3138,6 +3138,7 @@ __metadata: "@types/serve-static": "npm:^1.13.8" "@types/uuid": "npm:^9.0.1" "@types/wait-on": "npm:^5.3.1" + "@types/window-size": "npm:^1.1.3" "@typescript-eslint/eslint-plugin": "npm:^5.45.0" "@typescript-eslint/experimental-utils": "npm:^5.45.0" "@typescript-eslint/parser": "npm:^5.45.0" @@ -3222,7 +3223,7 @@ __metadata: ts-node: "npm:^10.9.1" tsup: "npm:^6.7.0" type-fest: "npm:~2.19" - typescript: "npm:5.1.6" + typescript: "npm:5.2.2" util: "npm:^0.12.4" uuid: "npm:^9.0.0" verdaccio: "npm:^5.19.1" @@ -4089,6 +4090,15 @@ __metadata: languageName: node linkType: hard +"@types/window-size@npm:^1.1.3": + version: 1.1.3 + resolution: "@types/window-size@npm:1.1.3" + dependencies: + "@types/node": "npm:*" + checksum: 0ec54d81fd160a6ba50136a8fab4d682cf790723e7a6f758cfb1bc08fddc29e0443fbe1817894cc438cb1b4bf57e1edb7e768114221a0bd1682438e25aa7d8c8 + languageName: node + linkType: hard + "@types/yargs-parser@npm:*": version: 21.0.0 resolution: "@types/yargs-parser@npm:21.0.0" @@ -16521,23 +16531,23 @@ __metadata: languageName: node linkType: hard -"typescript@npm:5.1.6": - version: 5.1.6 - resolution: "typescript@npm:5.1.6" +"typescript@npm:5.2.2": + version: 5.2.2 + resolution: "typescript@npm:5.2.2" bin: tsc: bin/tsc tsserver: bin/tsserver - checksum: 45ac28e2df8365fd28dac42f5d62edfe69a7203d5ec646732cadc04065331f34f9078f81f150fde42ed9754eed6fa3b06a8f3523c40b821e557b727f1992e025 + checksum: 91ae3e6193d0ddb8656d4c418a033f0f75dec5e077ebbc2bd6d76439b93f35683936ee1bdc0e9cf94ec76863aa49f27159b5788219b50e1cd0cd6d110aa34b07 languageName: node linkType: hard -"typescript@patch:typescript@npm%3A5.1.6#optional!builtin": - version: 5.1.6 - resolution: "typescript@patch:typescript@npm%3A5.1.6#optional!builtin::version=5.1.6&hash=5da071" +"typescript@patch:typescript@npm%3A5.2.2#optional!builtin": + version: 5.2.2 + resolution: "typescript@patch:typescript@npm%3A5.2.2#optional!builtin::version=5.2.2&hash=f3b441" bin: tsc: bin/tsc tsserver: bin/tsserver - checksum: c2bded58ab897a8341fdbb0c1d92ea2362f498cfffebdc8a529d03e15ea2454142dfbf122dabbd9a5cb79b7123790d27def16e11844887d20636226773ed329a + checksum: 062c1cee1990e6b9419ce8a55162b8dc917eb87f807e4de0327dbc1c2fa4e5f61bc0dd4e034d38ff541d1ed0479b53bcee8e4de3a4075c51a1724eb6216cb6f5 languageName: node linkType: hard From c436354d4f965f6d5fc2fd21961059016084167f Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 3 Nov 2023 12:01:35 +0100 Subject: [PATCH 012/170] Convert require commonjs expressions to esm equivalents --- scripts/combine-compodoc.ts | 4 +++- scripts/dangerfile.ts | 11 ++++++----- scripts/event-log-checker.ts | 4 +++- scripts/get-report-message.ts | 4 +++- scripts/get-template.ts | 4 +++- scripts/release/cancel-preparation-runs.ts | 4 +++- scripts/release/ensure-next-ahead.ts | 4 +++- scripts/release/generate-pr-description.ts | 4 +++- scripts/release/get-changelog-from-file.ts | 4 +++- scripts/release/get-current-version.ts | 4 +++- scripts/release/get-version-changelog.ts | 4 +++- scripts/release/is-pr-frozen.ts | 4 +++- scripts/release/is-prerelease.ts | 4 +++- scripts/release/is-version-published.ts | 4 +++- scripts/release/label-patches.ts | 4 +++- scripts/release/pick-patches.ts | 4 +++- scripts/release/publish.ts | 4 +++- scripts/release/unreleased-changes-exists.ts | 4 +++- scripts/release/version.ts | 4 +++- scripts/release/write-changelog.ts | 4 +++- scripts/sandbox/generate.ts | 4 +++- scripts/sandbox/utils/git.ts | 2 +- scripts/tasks/install.ts | 4 ++-- scripts/tasks/sandbox-parts.ts | 4 +++- scripts/utils/cli-step.ts | 2 ++ scripts/utils/{cli-utils.js => cli-utils.ts} | 20 ++++++++------------ scripts/utils/concurrency.ts | 4 +--- 27 files changed, 83 insertions(+), 44 deletions(-) rename scripts/utils/{cli-utils.js => cli-utils.ts} (76%) diff --git a/scripts/combine-compodoc.ts b/scripts/combine-compodoc.ts index f09f85bb987..0a4472edb7b 100755 --- a/scripts/combine-compodoc.ts +++ b/scripts/combine-compodoc.ts @@ -6,6 +6,7 @@ import { join, resolve } from 'path'; import { realpath, readFile, writeFile, lstat } from 'fs-extra'; import { globSync } from 'glob'; import { directory } from 'tempy'; +import url from 'url'; import { execaCommand } from './utils/exec'; const logger = console; @@ -67,7 +68,8 @@ async function run(cwd: string) { await writeFile(join(cwd, 'documentation.json'), JSON.stringify(documentation)); } -if (require.main === module) { +const modulePath = url.fileURLToPath(import.meta.url); +if (process.argv[1] === modulePath) { run(resolve(process.argv[2])) .then(() => process.exit(0)) .catch((err) => { diff --git a/scripts/dangerfile.ts b/scripts/dangerfile.ts index 754686981c8..bd9bb649460 100644 --- a/scripts/dangerfile.ts +++ b/scripts/dangerfile.ts @@ -2,13 +2,14 @@ import { fail, danger } from 'danger'; import { execSync } from 'child_process'; -execSync('npm install lodash'); +import flatten from 'lodash/flatten.js'; +import intersection from 'lodash/intersection.js'; +import isEmpty from 'lodash/isEmpty.js'; + +import pkg from '../code/package.json'; -const flatten = require('lodash/flatten.js'); -const intersection = require('lodash/intersection.js'); -const isEmpty = require('lodash/isEmpty.js'); +execSync('npm install lodash'); -const pkg = require('../code/package.json'); // eslint-disable-line import/newline-after-import const prLogConfig = pkg['pr-log']; const Versions = { diff --git a/scripts/event-log-checker.ts b/scripts/event-log-checker.ts index e1f6d82bd53..4f418bffde9 100644 --- a/scripts/event-log-checker.ts +++ b/scripts/event-log-checker.ts @@ -2,6 +2,7 @@ import chalk from 'chalk'; import assert from 'assert'; import fetch from 'node-fetch'; +import url from 'url'; import { allTemplates } from '../code/lib/cli/src/sandbox-templates'; import versions from '../code/lib/cli/src/versions'; import { oneWayHash } from '../code/lib/telemetry/src/one-way-hash'; @@ -114,7 +115,8 @@ async function run() { export {}; -if (require.main === module) { +const modulePath = url.fileURLToPath(import.meta.url); +if (process.argv[1] === modulePath) { run() .then(() => process.exit(0)) .catch((err) => { diff --git a/scripts/get-report-message.ts b/scripts/get-report-message.ts index 47b24cfba47..170938cbde0 100644 --- a/scripts/get-report-message.ts +++ b/scripts/get-report-message.ts @@ -1,6 +1,7 @@ /* eslint-disable no-console */ import { readJson } from 'fs-extra'; import { join } from 'path'; +import url from 'url'; import { CODE_DIRECTORY } from './utils/constants'; import { execaCommand } from './utils/exec'; @@ -63,7 +64,8 @@ async function run() { console.log(`${title}${body}${footer}`.replace(/\n/g, '\\n')); } -if (require.main === module) { +const modulePath = url.fileURLToPath(import.meta.url); +if (process.argv[1] === modulePath) { run().catch((err) => { console.error(err); process.exit(1); diff --git a/scripts/get-template.ts b/scripts/get-template.ts index c56418f7a0b..5c4b43ad0cb 100644 --- a/scripts/get-template.ts +++ b/scripts/get-template.ts @@ -4,6 +4,7 @@ import { program } from 'commander'; import dedent from 'ts-dedent'; import chalk from 'chalk'; import yaml from 'yaml'; +import url from 'url'; import { allTemplates, templatesByCadence, @@ -179,7 +180,8 @@ async function run({ cadence, task, check }: RunOptions) { ); } -if (require.main === module) { +const modulePath = url.fileURLToPath(import.meta.url); +if (process.argv[1] === modulePath) { program .description('Retrieve the template to run for a given cadence and task') .option('--cadence ', 'Which cadence you want to run the script for') diff --git a/scripts/release/cancel-preparation-runs.ts b/scripts/release/cancel-preparation-runs.ts index 630bfb4847b..9253f12041c 100644 --- a/scripts/release/cancel-preparation-runs.ts +++ b/scripts/release/cancel-preparation-runs.ts @@ -6,6 +6,7 @@ import chalk from 'chalk'; import program from 'commander'; import dedent from 'ts-dedent'; +import url from 'url'; import { githubRestClient } from './utils/github-client'; program @@ -99,7 +100,8 @@ export const run = async () => { } }; -if (require.main === module) { +const modulePath = url.fileURLToPath(import.meta.url); +if (process.argv[1] === modulePath) { 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 index 1aa32bfd932..2deae1bee36 100644 --- a/scripts/release/ensure-next-ahead.ts +++ b/scripts/release/ensure-next-ahead.ts @@ -14,6 +14,7 @@ import program from 'commander'; import semver from 'semver'; import { z } from 'zod'; import { readJson } from 'fs-extra'; +import url from 'url'; import { run as bumpVersion } from './version'; import { git } from './utils/git-client'; @@ -92,7 +93,8 @@ export const run = async (options: unknown) => { ); }; -if (require.main === module) { +const modulePath = url.fileURLToPath(import.meta.url); +if (process.argv[1] === modulePath) { const parsed = program.parse(); run(parsed.opts()).catch((err) => { console.error(err); diff --git a/scripts/release/generate-pr-description.ts b/scripts/release/generate-pr-description.ts index d437e8dc87b..a62c586db86 100644 --- a/scripts/release/generate-pr-description.ts +++ b/scripts/release/generate-pr-description.ts @@ -5,6 +5,7 @@ import { z } from 'zod'; import dedent from 'ts-dedent'; import semver from 'semver'; import { setOutput } from '@actions/core'; +import url from 'url'; import type { Change } from './utils/get-changes'; import { getChanges, LABELS_BY_IMPORTANCE, RELEASED_LABELS } from './utils/get-changes'; import { getCurrentVersion } from './get-current-version'; @@ -295,7 +296,8 @@ export const run = async (rawOptions: unknown) => { } }; -if (require.main === module) { +const modulePath = url.fileURLToPath(import.meta.url); +if (process.argv[1] === modulePath) { const parsed = program.parse(); run(parsed.opts()).catch((err) => { console.error(err); diff --git a/scripts/release/get-changelog-from-file.ts b/scripts/release/get-changelog-from-file.ts index e01efe95903..7a5ea3ecadd 100644 --- a/scripts/release/get-changelog-from-file.ts +++ b/scripts/release/get-changelog-from-file.ts @@ -6,6 +6,7 @@ import { readFile } from 'fs-extra'; import path from 'path'; import semver from 'semver'; import dedent from 'ts-dedent'; +import url from 'url'; import { getCurrentVersion } from './get-current-version'; program @@ -54,7 +55,8 @@ export const getChangelogFromFile = async (args: { return result; }; -if (require.main === module) { +const modulePath = url.fileURLToPath(import.meta.url); +if (process.argv[1] === modulePath) { const parsed = program.parse(); getChangelogFromFile({ version: parsed.args[0], diff --git a/scripts/release/get-current-version.ts b/scripts/release/get-current-version.ts index 413c101640b..df91678f9c4 100644 --- a/scripts/release/get-current-version.ts +++ b/scripts/release/get-current-version.ts @@ -3,6 +3,7 @@ import chalk from 'chalk'; import { setOutput } from '@actions/core'; import path from 'path'; import { readJson } from 'fs-extra'; +import url from 'url'; const CODE_DIR_PATH = path.join(__dirname, '..', '..', 'code'); const CODE_PACKAGE_JSON_PATH = path.join(CODE_DIR_PATH, 'package.json'); @@ -17,7 +18,8 @@ export const getCurrentVersion = async () => { return version; }; -if (require.main === module) { +const modulePath = url.fileURLToPath(import.meta.url); +if (process.argv[1] === modulePath) { getCurrentVersion().catch((err) => { console.error(err); process.exit(1); diff --git a/scripts/release/get-version-changelog.ts b/scripts/release/get-version-changelog.ts index 3ece5480236..c70ec902bb0 100644 --- a/scripts/release/get-version-changelog.ts +++ b/scripts/release/get-version-changelog.ts @@ -2,6 +2,7 @@ import { setOutput } from '@actions/core'; import chalk from 'chalk'; import { program } from 'commander'; +import url from 'url'; import { getCurrentVersion } from './get-current-version'; import { getChanges } from './utils/get-changes'; @@ -26,7 +27,8 @@ export const getVersionChangelog = async (args: { version?: string; verbose?: bo return changelogText; }; -if (require.main === module) { +const modulePath = url.fileURLToPath(import.meta.url); +if (process.argv[1] === modulePath) { const parsed = program.parse(); getVersionChangelog({ version: parsed.args[0], verbose: parsed.opts().verbose }).catch((err) => { console.error(err); diff --git a/scripts/release/is-pr-frozen.ts b/scripts/release/is-pr-frozen.ts index e81610a451b..d2e774b82cb 100644 --- a/scripts/release/is-pr-frozen.ts +++ b/scripts/release/is-pr-frozen.ts @@ -4,6 +4,7 @@ import program from 'commander'; import { setOutput } from '@actions/core'; import path from 'path'; import { readJson } from 'fs-extra'; +import url from 'url'; import { getPullInfoFromCommit } from './utils/get-github-info'; import { git } from './utils/git-client'; @@ -98,7 +99,8 @@ export const run = async (options: unknown) => { return isFrozen; }; -if (require.main === module) { +const modulePath = url.fileURLToPath(import.meta.url); +if (process.argv[1] === modulePath) { const parsed = program.parse(); run(parsed.opts()).catch((err) => { console.error(err); diff --git a/scripts/release/is-prerelease.ts b/scripts/release/is-prerelease.ts index 25722c098cd..ab9606073de 100644 --- a/scripts/release/is-prerelease.ts +++ b/scripts/release/is-prerelease.ts @@ -3,6 +3,7 @@ import chalk from 'chalk'; import program from 'commander'; import { setOutput } from '@actions/core'; import semver from 'semver'; +import url from 'url'; import { getCurrentVersion } from './get-current-version'; program @@ -38,7 +39,8 @@ export const isPrerelease = async (args: { version?: string; verbose?: boolean } return result; }; -if (require.main === module) { +const modulePath = url.fileURLToPath(import.meta.url); +if (process.argv[1] === modulePath) { const parsed = program.parse(); isPrerelease({ version: parsed.args[0], diff --git a/scripts/release/is-version-published.ts b/scripts/release/is-version-published.ts index b5acd8c90ab..a0b97d1a155 100644 --- a/scripts/release/is-version-published.ts +++ b/scripts/release/is-version-published.ts @@ -3,6 +3,7 @@ import chalk from 'chalk'; import program from 'commander'; import { setOutput } from '@actions/core'; import fetch from 'node-fetch'; +import url from 'url'; import { getCurrentVersion } from './get-current-version'; program @@ -77,7 +78,8 @@ export const run = async (args: unknown[], options: unknown) => { return isAlreadyPublished; }; -if (require.main === module) { +const modulePath = url.fileURLToPath(import.meta.url); +if (process.argv[1] === modulePath) { const parsed = program.parse(); run(parsed.args, parsed.opts()).catch((err) => { console.error(err); diff --git a/scripts/release/label-patches.ts b/scripts/release/label-patches.ts index 1e9305b9806..a23fbfe07a3 100644 --- a/scripts/release/label-patches.ts +++ b/scripts/release/label-patches.ts @@ -1,6 +1,7 @@ import program from 'commander'; import { v4 as uuidv4 } from 'uuid'; import ora from 'ora'; +import url from 'url'; import { getLabelIds, githubGraphQlClient, getUnpickedPRs } from './utils/github-client'; import { getPullInfoFromCommits, getRepo } from './utils/get-changes'; import { getLatestTag, git } from './utils/git-client'; @@ -93,7 +94,8 @@ export const run = async (options: unknown) => { } }; -if (require.main === module) { +const modulePath = url.fileURLToPath(import.meta.url); +if (process.argv[1] === modulePath) { const options = program.parse().opts(); run(options).catch((err) => { console.error(err); diff --git a/scripts/release/pick-patches.ts b/scripts/release/pick-patches.ts index 9d3169d78c8..cfaaf969377 100644 --- a/scripts/release/pick-patches.ts +++ b/scripts/release/pick-patches.ts @@ -5,6 +5,7 @@ import chalk from 'chalk'; import ora from 'ora'; import { setOutput } from '@actions/core'; import invariant from 'tiny-invariant'; +import url from 'url'; import { git } from './utils/git-client'; import { getUnpickedPRs } from './utils/github-client'; @@ -85,7 +86,8 @@ export const run = async (_: unknown) => { } }; -if (require.main === module) { +const modulePath = url.fileURLToPath(import.meta.url); +if (process.argv[1] === modulePath) { const options = program.parse(process.argv); run(options).catch((err) => { console.error(err); diff --git a/scripts/release/publish.ts b/scripts/release/publish.ts index 52f72d5fc64..82b01c552e9 100644 --- a/scripts/release/publish.ts +++ b/scripts/release/publish.ts @@ -8,6 +8,7 @@ import { readJson } from 'fs-extra'; import fetch from 'node-fetch'; import dedent from 'ts-dedent'; import pRetry from 'p-retry'; +import url from 'url'; import { execaCommand } from '../utils/exec'; program @@ -189,7 +190,8 @@ export const run = async (options: unknown) => { ); }; -if (require.main === module) { +const modulePath = url.fileURLToPath(import.meta.url); +if (process.argv[1] === modulePath) { const parsed = program.parse(); run(parsed.opts()).catch((err) => { console.error(err); diff --git a/scripts/release/unreleased-changes-exists.ts b/scripts/release/unreleased-changes-exists.ts index 59adedbdbb0..c0cd5260d59 100644 --- a/scripts/release/unreleased-changes-exists.ts +++ b/scripts/release/unreleased-changes-exists.ts @@ -4,6 +4,7 @@ import program from 'commander'; import { z } from 'zod'; import { setOutput } from '@actions/core'; import { intersection } from 'lodash'; +import url from 'url'; import type { Change } from './utils/get-changes'; import { RELEASED_LABELS, getChanges } from './utils/get-changes'; import { getCurrentVersion } from './get-current-version'; @@ -77,7 +78,8 @@ ${chalk.blue(changesToRelease.map(({ title, pull }) => ` #${pull}: ${title}`).j return { changesToRelease, hasChangesToRelease }; }; -if (require.main === module) { +const modulePath = url.fileURLToPath(import.meta.url); +if (process.argv[1] === modulePath) { const parsed = program.parse(); run(parsed.opts()).catch((err) => { console.error(err); diff --git a/scripts/release/version.ts b/scripts/release/version.ts index 3b34d288a8c..da9e7894d05 100644 --- a/scripts/release/version.ts +++ b/scripts/release/version.ts @@ -6,6 +6,7 @@ import path from 'path'; import program from 'commander'; import semver from 'semver'; import { z } from 'zod'; +import url from 'url'; import type { Workspace } from '../utils/workspace'; import { getWorkspaces } from '../utils/workspace'; import { execaCommand } from '../utils/exec'; @@ -293,7 +294,8 @@ export const run = async (options: unknown) => { } }; -if (require.main === module) { +const modulePath = url.fileURLToPath(import.meta.url); +if (process.argv[1] === modulePath) { const options = program.parse().opts(); run(options).catch((err) => { console.error(err); diff --git a/scripts/release/write-changelog.ts b/scripts/release/write-changelog.ts index 41bc9b72bd3..a353309b65a 100644 --- a/scripts/release/write-changelog.ts +++ b/scripts/release/write-changelog.ts @@ -5,6 +5,7 @@ import program from 'commander'; import semver from 'semver'; import { z } from 'zod'; import { readFile, writeFile, writeJson } from 'fs-extra'; +import url from 'url'; import { getChanges } from './utils/get-changes'; program @@ -132,7 +133,8 @@ export const run = async (args: unknown[], options: unknown) => { console.log(`āœ… Wrote Changelog to file`); }; -if (require.main === module) { +const modulePath = url.fileURLToPath(import.meta.url); +if (process.argv[1] === modulePath) { const parsed = program.parse(); run(parsed.args, parsed.opts()).catch((err) => { console.error(err); diff --git a/scripts/sandbox/generate.ts b/scripts/sandbox/generate.ts index 22a4eccf4d1..229df395bbb 100755 --- a/scripts/sandbox/generate.ts +++ b/scripts/sandbox/generate.ts @@ -6,6 +6,7 @@ import prettyTime from 'pretty-hrtime'; import { copy, emptyDir, ensureDir, move, remove, rename, writeFile } from 'fs-extra'; import { program } from 'commander'; import { directory } from 'tempy'; +import url from 'url'; import { execaCommand } from '../utils/exec'; import type { OptionValues } from '../utils/options'; @@ -250,7 +251,8 @@ export const generate = async ({ await runGenerators(generatorConfigs, localRegistry, debug); }; -if (require.main === module) { +const modulePath = url.fileURLToPath(import.meta.url); +if (process.argv[1] === modulePath) { program .description('Generate sandboxes from a set of possible templates') .option('--templates [templates...]', 'Space-delimited list of templates to include') diff --git a/scripts/sandbox/utils/git.ts b/scripts/sandbox/utils/git.ts index 84fe02f25cd..dea378eae92 100644 --- a/scripts/sandbox/utils/git.ts +++ b/scripts/sandbox/utils/git.ts @@ -5,7 +5,7 @@ import { execaCommand } from '../../utils/exec'; // eslint-disable-next-line import/no-cycle import { logger } from '../publish'; -const { version: storybookVersion } = require('../../../code/package.json'); +import { version as storybookVersion } from '../../../code/package.json'; const getTheLastCommitHashThatUpdatedTheSandboxRepo = async (branch: string) => { const owner = 'storybookjs'; diff --git a/scripts/tasks/install.ts b/scripts/tasks/install.ts index 653eda56838..e78130ab514 100644 --- a/scripts/tasks/install.ts +++ b/scripts/tasks/install.ts @@ -1,6 +1,7 @@ import { pathExists, remove } from 'fs-extra'; import { join } from 'path'; import type { Task } from '../task'; +import { checkDependencies } from '../utils/cli-utils'; export const install: Task = { description: 'Install the dependencies of the monorepo', @@ -8,8 +9,7 @@ export const install: Task = { return pathExists(join(codeDir, 'node_modules')); }, async run({ codeDir }) { - // eslint-disable-next-line global-require - await require('../utils/cli-utils').checkDependencies(); + await checkDependencies(); // these are webpack4 types, we we should never use await remove(join(codeDir, 'node_modules', '@types', 'webpack')); diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index 393169b244f..f64c13c61fb 100644 --- a/scripts/tasks/sandbox-parts.ts +++ b/scripts/tasks/sandbox-parts.ts @@ -12,8 +12,9 @@ import { writeJson, } from 'fs-extra'; import { join, resolve, sep } from 'path'; - +import { createRequire } from 'module'; import slash from 'slash'; + import type { Task } from '../task'; import { executeCLIStep, steps } from '../utils/cli-step'; import { @@ -167,6 +168,7 @@ export const init: Task['run'] = async ( // loader for such files. NOTE this isn't necessary for Vite, as far as we know. function addEsbuildLoaderToStories(mainConfig: ConfigFile) { // NOTE: the test regexp here will apply whether the path is symlink-preserved or otherwise + const require = createRequire(import.meta.url); const esbuildLoaderPath = require.resolve('../../code/node_modules/esbuild-loader'); const storiesMdxLoaderPath = require.resolve( '../../code/node_modules/@storybook/mdx2-csf/loader' diff --git a/scripts/utils/cli-step.ts b/scripts/utils/cli-step.ts index d990597619f..9e736f30b2a 100644 --- a/scripts/utils/cli-step.ts +++ b/scripts/utils/cli-step.ts @@ -1,7 +1,9 @@ +import { createRequire } from 'module'; import type { OptionSpecifier, OptionValues } from './options'; import { createOptions, getCommand } from './options'; import { exec } from './exec'; +const require = createRequire(import.meta.url); const cliExecutable = require.resolve('../../code/lib/cli/bin/index.js'); export type CLIStep = { diff --git a/scripts/utils/cli-utils.js b/scripts/utils/cli-utils.ts similarity index 76% rename from scripts/utils/cli-utils.js rename to scripts/utils/cli-utils.ts index ba52d933887..c37f2a950d7 100644 --- a/scripts/utils/cli-utils.js +++ b/scripts/utils/cli-utils.ts @@ -1,14 +1,14 @@ -const { spawn } = require('child_process'); -const { join } = require('path'); -const { existsSync } = require('fs'); +import { spawn } from 'child_process'; +import { join } from 'path'; +import { existsSync } from 'fs'; const logger = console; -const checkDependencies = async () => { +export const checkDependencies = async () => { const scriptsPath = join(__dirname, '..'); const codePath = join(__dirname, '..', '..', 'code'); - const tasks = []; + const tasks: Array = []; if (!existsSync(join(scriptsPath, 'node_modules'))) { tasks.push( @@ -35,8 +35,8 @@ const checkDependencies = async () => { await Promise.all( tasks.map( (t) => - new Promise((res, rej) => { - t.on('exit', (code) => { + new Promise((res, rej) => { + t.on('exit', (code: number) => { if (code !== 0) { rej(); } else { @@ -51,12 +51,8 @@ const checkDependencies = async () => { }); // give the filesystem some time - await new Promise((res, rej) => { + await new Promise((res) => { setTimeout(res, 1000); }); } }; - -module.exports = { - checkDependencies, -}; diff --git a/scripts/utils/concurrency.ts b/scripts/utils/concurrency.ts index ab49dc41e8f..781c7c0d678 100644 --- a/scripts/utils/concurrency.ts +++ b/scripts/utils/concurrency.ts @@ -1,9 +1,7 @@ -const os = require('os'); +import os from 'os'; /** * The maximum number of concurrent tasks we want to have on some CLI and CI tasks. * The amount of CPUS minus one, arbitrary limited to 15 to not overload CI executors. - * @type {number} */ export const maxConcurrentTasks = Math.min(Math.max(1, os.cpus().length - 1), 15); - From 946d8630ecce1579f8fafbd9af4ba9c77ce37d78 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 3 Nov 2023 12:20:50 +0100 Subject: [PATCH 013/170] Fix babel and eslint --- scripts/{.babelrc.js => .babelrc.cjs} | 2 +- scripts/.eslintignore | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) rename scripts/{.babelrc.js => .babelrc.cjs} (93%) diff --git a/scripts/.babelrc.js b/scripts/.babelrc.cjs similarity index 93% rename from scripts/.babelrc.js rename to scripts/.babelrc.cjs index c5d2be1935f..31016fd4262 100644 --- a/scripts/.babelrc.js +++ b/scripts/.babelrc.cjs @@ -1,4 +1,4 @@ -export default { +module.exports = { compact: false, presets: [ '@babel/preset-typescript', diff --git a/scripts/.eslintignore b/scripts/.eslintignore index db97fa57090..9224e493860 100644 --- a/scripts/.eslintignore +++ b/scripts/.eslintignore @@ -21,6 +21,6 @@ ember-output !.babelrc.js !.eslintrc.js !.eslintrc-markdown.js -!.jest.config.js +!.jest.config.cjs !.storybook From 3c806e093cf048ce339134859fa7771aaac29ec2 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 3 Nov 2023 12:20:58 +0100 Subject: [PATCH 014/170] Fix tests --- scripts/jest.config.cjs | 22 ++++++- scripts/package.json | 6 +- scripts/yarn.lock | 143 ++++++++++++++++++++++++++-------------- 3 files changed, 117 insertions(+), 54 deletions(-) diff --git a/scripts/jest.config.cjs b/scripts/jest.config.cjs index f053ebf7976..571d0ab1123 100644 --- a/scripts/jest.config.cjs +++ b/scripts/jest.config.cjs @@ -1 +1,21 @@ -module.exports = {}; +module.exports = { + transform: { + '^.+\\.(t|j)sx?$': [ + '@swc/jest', + { + jsc: { + parser: { + syntax: 'typescript', + tsx: false, + decorators: false, + dynamicImport: false, + }, + experimental: { + plugins: [['jest_workaround', {}]], + }, + }, + }, + ], + }, + transformIgnorePatterns: [], +}; diff --git a/scripts/package.json b/scripts/package.json index 01a8ea31618..d1bd6e17fe9 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -31,7 +31,7 @@ "release:write-changelog": "node --loader esbuild-register/loader -r esbuild-register ./release/write-changelog.ts", "strict-ts": "node --loader esbuild-register/loader -r esbuild-register ./strict-ts.ts", "task": "node --loader esbuild-register/loader -r esbuild-register ./task.ts", - "test": "jest --config ./jest.config.js", + "test": "jest --config ./jest.config.cjs", "upgrade": "node --loader esbuild-register/loader -r esbuild-register ./task.ts", "upload-bench": "ts-node ./upload-bench.ts" }, @@ -81,7 +81,8 @@ "@storybook/jest": "next", "@storybook/linter-config": "^3.1.2", "@storybook/testing-library": "next", - "@swc/core": "1.3.82", + "@swc/core": "^1.3.95", + "@swc/jest": "^0.2.29", "@testing-library/dom": "^9.3.0", "@testing-library/jest-dom": "^5.11.9", "@testing-library/react": "^14.0.0", @@ -149,6 +150,7 @@ "jest-os-detection": "^1.3.1", "jest-serializer-html": "^7.1.0", "jest-watch-typeahead": "^2.2.1", + "jest_workaround": "^0.79.19", "json5": "^2.2.3", "junit-xml": "^1.2.0", "lint-staged": "^10.5.4", diff --git a/scripts/yarn.lock b/scripts/yarn.lock index 961917e0907..fc179744fad 100644 --- a/scripts/yarn.lock +++ b/scripts/yarn.lock @@ -2170,6 +2170,15 @@ __metadata: languageName: node linkType: hard +"@jest/create-cache-key-function@npm:^27.4.2": + version: 27.5.1 + resolution: "@jest/create-cache-key-function@npm:27.5.1" + dependencies: + "@jest/types": "npm:^27.5.1" + checksum: 1890ac93fad852e0a98c31de1e5f2c548974aefd36e838d27b70834dda1654a153ed6a52258447ebacfd47463e9bdb83750631bee827797c7b9973c083998a96 + languageName: node + linkType: hard + "@jest/environment@npm:^29.7.0": version: 29.7.0 resolution: "@jest/environment@npm:29.7.0" @@ -3113,7 +3122,8 @@ __metadata: "@storybook/jest": "npm:next" "@storybook/linter-config": "npm:^3.1.2" "@storybook/testing-library": "npm:next" - "@swc/core": "npm:1.3.82" + "@swc/core": "npm:^1.3.95" + "@swc/jest": "npm:^0.2.29" "@testing-library/dom": "npm:^9.3.0" "@testing-library/jest-dom": "npm:^5.11.9" "@testing-library/react": "npm:^14.0.0" @@ -3182,6 +3192,7 @@ __metadata: jest-os-detection: "npm:^1.3.1" jest-serializer-html: "npm:^7.1.0" jest-watch-typeahead: "npm:^2.2.1" + jest_workaround: "npm:^0.79.19" json5: "npm:^2.2.3" junit-xml: "npm:^1.2.0" lint-staged: "npm:^10.5.4" @@ -3262,91 +3273,92 @@ __metadata: languageName: node linkType: hard -"@swc/core-darwin-arm64@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-darwin-arm64@npm:1.3.82" +"@swc/core-darwin-arm64@npm:1.3.95": + version: 1.3.95 + resolution: "@swc/core-darwin-arm64@npm:1.3.95" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@swc/core-darwin-x64@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-darwin-x64@npm:1.3.82" +"@swc/core-darwin-x64@npm:1.3.95": + version: 1.3.95 + resolution: "@swc/core-darwin-x64@npm:1.3.95" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@swc/core-linux-arm-gnueabihf@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-linux-arm-gnueabihf@npm:1.3.82" +"@swc/core-linux-arm-gnueabihf@npm:1.3.95": + version: 1.3.95 + resolution: "@swc/core-linux-arm-gnueabihf@npm:1.3.95" conditions: os=linux & cpu=arm languageName: node linkType: hard -"@swc/core-linux-arm64-gnu@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-linux-arm64-gnu@npm:1.3.82" +"@swc/core-linux-arm64-gnu@npm:1.3.95": + version: 1.3.95 + resolution: "@swc/core-linux-arm64-gnu@npm:1.3.95" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@swc/core-linux-arm64-musl@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-linux-arm64-musl@npm:1.3.82" +"@swc/core-linux-arm64-musl@npm:1.3.95": + version: 1.3.95 + resolution: "@swc/core-linux-arm64-musl@npm:1.3.95" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@swc/core-linux-x64-gnu@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-linux-x64-gnu@npm:1.3.82" +"@swc/core-linux-x64-gnu@npm:1.3.95": + version: 1.3.95 + resolution: "@swc/core-linux-x64-gnu@npm:1.3.95" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@swc/core-linux-x64-musl@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-linux-x64-musl@npm:1.3.82" +"@swc/core-linux-x64-musl@npm:1.3.95": + version: 1.3.95 + resolution: "@swc/core-linux-x64-musl@npm:1.3.95" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@swc/core-win32-arm64-msvc@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-win32-arm64-msvc@npm:1.3.82" +"@swc/core-win32-arm64-msvc@npm:1.3.95": + version: 1.3.95 + resolution: "@swc/core-win32-arm64-msvc@npm:1.3.95" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@swc/core-win32-ia32-msvc@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-win32-ia32-msvc@npm:1.3.82" +"@swc/core-win32-ia32-msvc@npm:1.3.95": + version: 1.3.95 + resolution: "@swc/core-win32-ia32-msvc@npm:1.3.95" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@swc/core-win32-x64-msvc@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core-win32-x64-msvc@npm:1.3.82" +"@swc/core-win32-x64-msvc@npm:1.3.95": + version: 1.3.95 + resolution: "@swc/core-win32-x64-msvc@npm:1.3.95" conditions: os=win32 & cpu=x64 languageName: node linkType: hard -"@swc/core@npm:1.3.82": - version: 1.3.82 - resolution: "@swc/core@npm:1.3.82" +"@swc/core@npm:^1.3.95": + version: 1.3.95 + resolution: "@swc/core@npm:1.3.95" dependencies: - "@swc/core-darwin-arm64": "npm:1.3.82" - "@swc/core-darwin-x64": "npm:1.3.82" - "@swc/core-linux-arm-gnueabihf": "npm:1.3.82" - "@swc/core-linux-arm64-gnu": "npm:1.3.82" - "@swc/core-linux-arm64-musl": "npm:1.3.82" - "@swc/core-linux-x64-gnu": "npm:1.3.82" - "@swc/core-linux-x64-musl": "npm:1.3.82" - "@swc/core-win32-arm64-msvc": "npm:1.3.82" - "@swc/core-win32-ia32-msvc": "npm:1.3.82" - "@swc/core-win32-x64-msvc": "npm:1.3.82" - "@swc/types": "npm:^0.1.4" + "@swc/core-darwin-arm64": "npm:1.3.95" + "@swc/core-darwin-x64": "npm:1.3.95" + "@swc/core-linux-arm-gnueabihf": "npm:1.3.95" + "@swc/core-linux-arm64-gnu": "npm:1.3.95" + "@swc/core-linux-arm64-musl": "npm:1.3.95" + "@swc/core-linux-x64-gnu": "npm:1.3.95" + "@swc/core-linux-x64-musl": "npm:1.3.95" + "@swc/core-win32-arm64-msvc": "npm:1.3.95" + "@swc/core-win32-ia32-msvc": "npm:1.3.95" + "@swc/core-win32-x64-msvc": "npm:1.3.95" + "@swc/counter": "npm:^0.1.1" + "@swc/types": "npm:^0.1.5" peerDependencies: "@swc/helpers": ^0.5.0 dependenciesMeta: @@ -3373,14 +3385,33 @@ __metadata: peerDependenciesMeta: "@swc/helpers": optional: true - checksum: cee1f56e969074fe9e23fe51348d7da0c921949f5845e57030824d0e32d09fcefc647371c982e82836cc72c27c5fc5370c6aaff4f8f1c527d1c39c5ab6203e17 + checksum: f0386b7cc1288d97ef3636fff06c1798914e453b574934778d6c90019acf6893bf566c805369ab74b7c7b559243de37e3fe8bb2bbe9b1ac3214a0575cc4f7335 languageName: node linkType: hard -"@swc/types@npm:^0.1.4": - version: 0.1.4 - resolution: "@swc/types@npm:0.1.4" - checksum: f506cb23a08c604c6343c51f47e399d2c59f2e4a7df0689849284915a9f726ca65ce86d5358b5ed88c6ba1fce135a25614b1adda1beedf570a24c230466d6a46 +"@swc/counter@npm:^0.1.1": + version: 0.1.2 + resolution: "@swc/counter@npm:0.1.2" + checksum: 18be012107d4ba1f79776c48d83391ca2159103d7d31a59ff52fcc8024db51b71c5f46714a9fb73981739bc8a38dc6f385a046b71cc08f6043f3c47f5c409eab + languageName: node + linkType: hard + +"@swc/jest@npm:^0.2.29": + version: 0.2.29 + resolution: "@swc/jest@npm:0.2.29" + dependencies: + "@jest/create-cache-key-function": "npm:^27.4.2" + jsonc-parser: "npm:^3.2.0" + peerDependencies: + "@swc/core": "*" + checksum: 10f34341f9bc8003cec44f91a88b531ba44094aad97b2f8410fb2f94db9eb3b8fc7f6d14ba867eb9c1dc6ba29cc46058244b8280d673a7c681062fe0dc73c3f0 + languageName: node + linkType: hard + +"@swc/types@npm:^0.1.5": + version: 0.1.5 + resolution: "@swc/types@npm:0.1.5" + checksum: b35f93fe896a2240f6f10544e408f9648c2bd4bcff9bd8d022d9a6942d31cf859f86119fb0bbb04a12eefa1f6a6745ffc7d18f3a490d76d7b6a074a7c9608144 languageName: node linkType: hard @@ -10799,6 +10830,16 @@ __metadata: languageName: node linkType: hard +"jest_workaround@npm:^0.79.19": + version: 0.79.19 + resolution: "jest_workaround@npm:0.79.19" + peerDependencies: + "@swc/core": ^1.3.68 + "@swc/jest": ^0.2.26 + checksum: 387ce514e7ef60129891a4647e5431f1e4179bde70de100d50fa4acc8a4f3c072db9cf65c8a7d971ab11437ace78aa77959c65cdb2e55e718c971905c55e62fd + languageName: node + linkType: hard + "jju@npm:^1.4.0": version: 1.4.0 resolution: "jju@npm:1.4.0" @@ -11005,7 +11046,7 @@ __metadata: languageName: node linkType: hard -"jsonc-parser@npm:3.2.0, jsonc-parser@npm:^3.0.0": +"jsonc-parser@npm:3.2.0, jsonc-parser@npm:^3.0.0, jsonc-parser@npm:^3.2.0": version: 3.2.0 resolution: "jsonc-parser@npm:3.2.0" checksum: 5a12d4d04dad381852476872a29dcee03a57439574e4181d91dca71904fcdcc5e8e4706c0a68a2c61ad9810e1e1c5806b5100d52d3e727b78f5cdc595401045b From e22f3b9cc31315d965d8372eedd2a6df63438886 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 3 Nov 2023 12:28:03 +0100 Subject: [PATCH 015/170] Fix generate-sandbox script --- scripts/tasks/sandbox.ts | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/scripts/tasks/sandbox.ts b/scripts/tasks/sandbox.ts index bf3e0bbae07..58e7d92fe42 100644 --- a/scripts/tasks/sandbox.ts +++ b/scripts/tasks/sandbox.ts @@ -5,14 +5,6 @@ import { promisify } from 'util'; import dirSize from 'fast-folder-size'; import type { Task } from '../task'; import { now, saveBench } from '../bench/utils'; -import { - create, - install, - addStories, - extendMain, - init, - addExtraDependencies, -} from './sandbox-parts'; const logger = console; @@ -63,6 +55,10 @@ export const sandbox: Task = { await remove(details.sandboxDir); } + const { create, install, addStories, extendMain, init, addExtraDependencies } = await import( + './sandbox-parts' + ); + let startTime = now(); await create(details, options); const createTime = now() - startTime; From baa57e0fb9beb5bcc0ee009fe7126bf5608dc275 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 3 Nov 2023 12:38:36 +0100 Subject: [PATCH 016/170] Remove ts-node in scripts --- .circleci/config.yml | 5 +- scripts/package.json | 3 +- scripts/prepare/esm-bundle.ts | 2 - scripts/prepare/facade.ts | 5 +- scripts/prepare/tsc.ts | 2 - scripts/tasks/sandbox-parts.ts | 3 +- scripts/tsconfig.json | 9 +-- scripts/yarn.lock | 134 +-------------------------------- 8 files changed, 10 insertions(+), 153 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index b7266a42c69..77b6e334b25 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -322,7 +322,7 @@ jobs: at: . - run: name: Starting Event Collector - command: yarn ts-node ./event-log-collector.ts + command: node --loader esbuild-register/loader -r esbuild-register ./event-log-collector.ts working_directory: scripts background: true - run: @@ -330,7 +330,7 @@ jobs: command: yarn task --task build --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task build) --no-link --start-from=never --junit - run: name: Verifying Telemetry - command: yarn ts-node ./event-log-checker build $(yarn get-template --cadence << pipeline.parameters.workflow >> --task build) + command: node --loader esbuild-register/loader -r esbuild-register ./event-log-checker build $(yarn get-template --cadence << pipeline.parameters.workflow >> --task build) working_directory: scripts - report-workflow-on-failure: template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task build) @@ -640,4 +640,3 @@ workflows: # parallelism: 4 # requires: # - create-sandboxes - diff --git a/scripts/package.json b/scripts/package.json index d1bd6e17fe9..3d316aac367 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -33,7 +33,7 @@ "task": "node --loader esbuild-register/loader -r esbuild-register ./task.ts", "test": "jest --config ./jest.config.cjs", "upgrade": "node --loader esbuild-register/loader -r esbuild-register ./task.ts", - "upload-bench": "ts-node ./upload-bench.ts" + "upload-bench": "node --loader esbuild-register/loader -r esbuild-register ./upload-bench.ts" }, "husky": { "hooks": { @@ -188,7 +188,6 @@ "tiny-invariant": "^1.3.1", "trash": "^7.0.0", "ts-dedent": "^2.0.0", - "ts-node": "^10.9.1", "tsup": "^6.7.0", "type-fest": "~2.19", "typescript": "5.2.2", diff --git a/scripts/prepare/esm-bundle.ts b/scripts/prepare/esm-bundle.ts index e75ddc75b67..6ec3e434e4e 100755 --- a/scripts/prepare/esm-bundle.ts +++ b/scripts/prepare/esm-bundle.ts @@ -1,5 +1,3 @@ -#!/usr/bin/env ../../node_modules/.bin/ts-node - import * as fs from 'fs-extra'; import path, { dirname, join, relative } from 'path'; import type { Options } from 'tsup'; diff --git a/scripts/prepare/facade.ts b/scripts/prepare/facade.ts index d43d47ef89a..c5d6b793ea6 100755 --- a/scripts/prepare/facade.ts +++ b/scripts/prepare/facade.ts @@ -1,5 +1,3 @@ -#!/usr/bin/env ../../node_modules/.bin/ts-node - import { join, parse } from 'path'; import fs from 'fs-extra'; import dedent from 'ts-dedent'; @@ -18,10 +16,9 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { } = await fs.readJson(join(cwd, 'package.json')); const optimized = hasFlag(flags, 'optimized'); - const tsnodePath = join(__dirname, '..', 'node_modules', '.bin', 'ts-node'); if (pre) { - await exec(`${tsnodePath} ${pre}`, { cwd }); + await exec(`node --loader esbuild-register/loader -r esbuild-register ${pre}`, { cwd }); } await Promise.all([ diff --git a/scripts/prepare/tsc.ts b/scripts/prepare/tsc.ts index cc248979ef7..62179c5b29e 100755 --- a/scripts/prepare/tsc.ts +++ b/scripts/prepare/tsc.ts @@ -1,5 +1,3 @@ -#!/usr/bin/env ../../node_modules/.bin/ts-node - import { join } from 'path'; import fs, { move } from 'fs-extra'; import * as ts from 'typescript'; diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index f64c13c61fb..81c137200e8 100644 --- a/scripts/tasks/sandbox-parts.ts +++ b/scripts/tasks/sandbox-parts.ts @@ -581,7 +581,8 @@ async function prepareAngularSandbox(cwd: string) { packageJson.scripts = { ...packageJson.scripts, - 'docs:json': 'DIR=$PWD; cd ../../scripts; yarn ts-node combine-compodoc $DIR', + 'docs:json': + 'DIR=$PWD; cd ../../scripts; node --loader esbuild-register/loader -r esbuild-register combine-compodoc $DIR', storybook: `yarn docs:json && ${packageJson.scripts.storybook}`, 'build-storybook': `yarn docs:json && ${packageJson.scripts['build-storybook']}`, }; diff --git a/scripts/tsconfig.json b/scripts/tsconfig.json index 0817a434243..9f5821bab72 100644 --- a/scripts/tsconfig.json +++ b/scripts/tsconfig.json @@ -25,12 +25,5 @@ "resolveJsonModule": true }, "exclude": ["dist", "**/dist", "node_modules", "**/node_modules"], - "include": ["./**/*", "./.eslintrc.js"], - "ts-node": { - "transpileOnly": true, - "files": true, - "compilerOptions": { - "types": ["node"] - } - } + "include": ["./**/*", "./.eslintrc.js"] } diff --git a/scripts/yarn.lock b/scripts/yarn.lock index fc179744fad..ccef5c76b80 100644 --- a/scripts/yarn.lock +++ b/scripts/yarn.lock @@ -1680,15 +1680,6 @@ __metadata: languageName: node linkType: hard -"@cspotcode/source-map-support@npm:^0.8.0": - version: 0.8.1 - resolution: "@cspotcode/source-map-support@npm:0.8.1" - dependencies: - "@jridgewell/trace-mapping": "npm:0.3.9" - checksum: 05c5368c13b662ee4c122c7bfbe5dc0b613416672a829f3e78bc49a357a197e0218d6e74e7c66cfcd04e15a179acab080bd3c69658c9fbefd0e1ccd950a07fc6 - languageName: node - linkType: hard - "@emotion/css-prettifier@npm:^1.1.3": version: 1.1.3 resolution: "@emotion/css-prettifier@npm:1.1.3" @@ -2387,7 +2378,7 @@ __metadata: languageName: node linkType: hard -"@jridgewell/resolve-uri@npm:^3.0.3, @jridgewell/resolve-uri@npm:^3.1.0": +"@jridgewell/resolve-uri@npm:^3.1.0": version: 3.1.1 resolution: "@jridgewell/resolve-uri@npm:3.1.1" checksum: 0dbc9e29bc640bbbdc5b9876d2859c69042bfcf1423c1e6421bcca53e826660bff4e41c7d4bcb8dbea696404231a6f902f76ba41835d049e20f2dd6cffb713bf @@ -2408,16 +2399,6 @@ __metadata: languageName: node linkType: hard -"@jridgewell/trace-mapping@npm:0.3.9": - version: 0.3.9 - resolution: "@jridgewell/trace-mapping@npm:0.3.9" - dependencies: - "@jridgewell/resolve-uri": "npm:^3.0.3" - "@jridgewell/sourcemap-codec": "npm:^1.4.10" - checksum: fa425b606d7c7ee5bfa6a31a7b050dd5814b4082f318e0e4190f991902181b4330f43f4805db1dd4f2433fd0ed9cc7a7b9c2683f1deeab1df1b0a98b1e24055b - languageName: node - linkType: hard - "@jridgewell/trace-mapping@npm:^0.3.12, @jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.18, @jridgewell/trace-mapping@npm:^0.3.9": version: 0.3.19 resolution: "@jridgewell/trace-mapping@npm:0.3.19" @@ -3231,7 +3212,6 @@ __metadata: trash: "npm:^7.0.0" ts-dedent: "npm:^2.0.0" ts-loader: "npm:^9.4.2" - ts-node: "npm:^10.9.1" tsup: "npm:^6.7.0" type-fest: "npm:~2.19" typescript: "npm:5.2.2" @@ -3494,34 +3474,6 @@ __metadata: languageName: node linkType: hard -"@tsconfig/node10@npm:^1.0.7": - version: 1.0.9 - resolution: "@tsconfig/node10@npm:1.0.9" - checksum: c176a2c1e1b16be120c328300ea910df15fb9a5277010116d26818272341a11483c5a80059389d04edacf6fd2d03d4687ad3660870fdd1cc0b7109e160adb220 - languageName: node - linkType: hard - -"@tsconfig/node12@npm:^1.0.7": - version: 1.0.11 - resolution: "@tsconfig/node12@npm:1.0.11" - checksum: dddca2b553e2bee1308a056705103fc8304e42bb2d2cbd797b84403a223b25c78f2c683ec3e24a095e82cd435387c877239bffcb15a590ba817cd3f6b9a99fd9 - languageName: node - linkType: hard - -"@tsconfig/node14@npm:^1.0.0": - version: 1.0.3 - resolution: "@tsconfig/node14@npm:1.0.3" - checksum: 67c1316d065fdaa32525bc9449ff82c197c4c19092b9663b23213c8cbbf8d88b6ed6a17898e0cbc2711950fbfaf40388938c1c748a2ee89f7234fc9e7fe2bf44 - languageName: node - linkType: hard - -"@tsconfig/node16@npm:^1.0.2": - version: 1.0.4 - resolution: "@tsconfig/node16@npm:1.0.4" - checksum: 05f8f2734e266fb1839eb1d57290df1664fe2aa3b0fdd685a9035806daa635f7519bf6d5d9b33f6e69dd545b8c46bd6e2b5c79acb2b1f146e885f7f11a42a5bb - languageName: node - linkType: hard - "@types/aria-query@npm:^5.0.1": version: 5.0.1 resolution: "@types/aria-query@npm:5.0.1" @@ -4606,7 +4558,7 @@ __metadata: languageName: node linkType: hard -"acorn-walk@npm:^8.0.2, acorn-walk@npm:^8.1.1": +"acorn-walk@npm:^8.0.2": version: 8.2.0 resolution: "acorn-walk@npm:8.2.0" checksum: dbe92f5b2452c93e960c5594e666dd1fae141b965ff2cb4a1e1d0381e3e4db4274c5ce4ffa3d681a86ca2a8d4e29d5efc0670a08e23fd2800051ea387df56ca2 @@ -4622,7 +4574,7 @@ __metadata: languageName: node linkType: hard -"acorn@npm:^8.1.0, acorn@npm:^8.4.1, acorn@npm:^8.8.1, acorn@npm:^8.9.0": +"acorn@npm:^8.1.0, acorn@npm:^8.8.1, acorn@npm:^8.9.0": version: 8.10.0 resolution: "acorn@npm:8.10.0" bin: @@ -4855,13 +4807,6 @@ __metadata: languageName: node linkType: hard -"arg@npm:^4.1.0": - version: 4.1.3 - resolution: "arg@npm:4.1.3" - checksum: 070ff801a9d236a6caa647507bdcc7034530604844d64408149a26b9e87c2f97650055c0f049abd1efc024b334635c01f29e0b632b371ac3f26130f4cf65997a - languageName: node - linkType: hard - "argparse@npm:^1.0.7": version: 1.0.10 resolution: "argparse@npm:1.0.10" @@ -6308,13 +6253,6 @@ __metadata: languageName: node linkType: hard -"create-require@npm:^1.1.0": - version: 1.1.1 - resolution: "create-require@npm:1.1.1" - checksum: 157cbc59b2430ae9a90034a5f3a1b398b6738bf510f713edc4d4e45e169bc514d3d99dd34d8d01ca7ae7830b5b8b537e46ae8f3c8f932371b0875c0151d7ec91 - languageName: node - linkType: hard - "cross-env@npm:^7.0.3": version: 7.0.3 resolution: "cross-env@npm:7.0.3" @@ -6830,13 +6768,6 @@ __metadata: languageName: node linkType: hard -"diff@npm:^4.0.1": - version: 4.0.2 - resolution: "diff@npm:4.0.2" - checksum: 81b91f9d39c4eaca068eb0c1eb0e4afbdc5bb2941d197f513dd596b820b956fef43485876226d65d497bebc15666aa2aa82c679e84f65d5f2bfbf14ee46e32c1 - languageName: node - linkType: hard - "diff@npm:^5.0.0": version: 5.1.0 resolution: "diff@npm:5.1.0" @@ -11697,13 +11628,6 @@ __metadata: languageName: node linkType: hard -"make-error@npm:^1.1.1": - version: 1.3.6 - resolution: "make-error@npm:1.3.6" - checksum: 171e458d86854c6b3fc46610cfacf0b45149ba043782558c6875d9f42f222124384ad0b468c92e996d815a8a2003817a710c0a160e49c1c394626f76fa45396f - languageName: node - linkType: hard - "make-fetch-happen@npm:^11.0.3": version: 11.1.1 resolution: "make-fetch-happen@npm:11.1.1" @@ -16326,44 +16250,6 @@ __metadata: languageName: node linkType: hard -"ts-node@npm:^10.9.1": - version: 10.9.1 - resolution: "ts-node@npm:10.9.1" - dependencies: - "@cspotcode/source-map-support": "npm:^0.8.0" - "@tsconfig/node10": "npm:^1.0.7" - "@tsconfig/node12": "npm:^1.0.7" - "@tsconfig/node14": "npm:^1.0.0" - "@tsconfig/node16": "npm:^1.0.2" - acorn: "npm:^8.4.1" - acorn-walk: "npm:^8.1.1" - arg: "npm:^4.1.0" - create-require: "npm:^1.1.0" - diff: "npm:^4.0.1" - make-error: "npm:^1.1.1" - v8-compile-cache-lib: "npm:^3.0.1" - yn: "npm:3.1.1" - peerDependencies: - "@swc/core": ">=1.2.50" - "@swc/wasm": ">=1.2.50" - "@types/node": "*" - typescript: ">=2.7" - peerDependenciesMeta: - "@swc/core": - optional: true - "@swc/wasm": - optional: true - bin: - ts-node: dist/bin.js - ts-node-cwd: dist/bin-cwd.js - ts-node-esm: dist/bin-esm.js - ts-node-script: dist/bin-script.js - ts-node-transpile-only: dist/bin-transpile.js - ts-script: dist/bin-script-deprecated.js - checksum: 95187932fb83f3901e22546bd2feeac7d2feb4f412f42ac3a595f049a23e8dcf70516dffb51866391228ea2dbcfaea039e250fb2bb334d48a86ab2b6aea0ae2d - languageName: node - linkType: hard - "tsconfig-paths@npm:^3.14.2": version: 3.14.2 resolution: "tsconfig-paths@npm:3.14.2" @@ -17179,13 +17065,6 @@ __metadata: languageName: node linkType: hard -"v8-compile-cache-lib@npm:^3.0.1": - version: 3.0.1 - resolution: "v8-compile-cache-lib@npm:3.0.1" - checksum: bdc36fb8095d3b41df197f5fb6f11e3a26adf4059df3213e3baa93810d8f0cc76f9a74aaefc18b73e91fe7e19154ed6f134eda6fded2e0f1c8d2272ed2d2d391 - languageName: node - linkType: hard - "v8-compile-cache@npm:2.3.0": version: 2.3.0 resolution: "v8-compile-cache@npm:2.3.0" @@ -17944,13 +17823,6 @@ __metadata: languageName: node linkType: hard -"yn@npm:3.1.1": - version: 3.1.1 - resolution: "yn@npm:3.1.1" - checksum: 0732468dd7622ed8a274f640f191f3eaf1f39d5349a1b72836df484998d7d9807fbea094e2f5486d6b0cd2414aad5775972df0e68f8604db89a239f0f4bf7443 - languageName: node - linkType: hard - "yocto-queue@npm:^0.1.0": version: 0.1.0 resolution: "yocto-queue@npm:0.1.0" From 50a7d47121cbecdf475944bac720b576dc9e0400 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 3 Nov 2023 13:41:03 +0100 Subject: [PATCH 017/170] Fix check script --- code/package.json | 8 +-- .../{check-package.cjs => check-package.ts} | 57 ++++++++++--------- scripts/package.json | 4 ++ 3 files changed, 37 insertions(+), 32 deletions(-) rename scripts/{check-package.cjs => check-package.ts} (70%) diff --git a/code/package.json b/code/package.json index 45e62b2406f..c20521acc1f 100644 --- a/code/package.json +++ b/code/package.json @@ -29,10 +29,10 @@ "build": "NODE_ENV=production yarn --cwd ../scripts build-package", "changelog": "pr-log --sloppy --cherry-pick", "changelog:next": "pr-log --sloppy --since-prerelease", - "check": "NODE_ENV=production node ../scripts/check-package.js", + "check": "NODE_ENV=production yarn --cwd ../scripts check-package", "ci-tests": "yarn task --task check --no-link --start-from=install && yarn lint && yarn test && cd ../scripts && yarn test", "danger": "danger", - "generate-sandboxes": "ts-node --swc ../scripts/sandbox/generate.ts", + "generate-sandboxes": "yarn --cwd ../scripts generate-sandboxes", "github-release": "github-release-from-changelog", "lint": "yarn lint:js && yarn lint:md", "lint:ejs": "ejslint **/*.ejs", @@ -41,8 +41,8 @@ "lint:md": "../scripts/node_modules/.bin/remark -q .", "lint:other": "prettier --write '**/*.{css,html,json,md,yml}'", "lint:package": "sort-package-json", - "local-registry": "ts-node --swc --project=../scripts/tsconfig.json ../scripts/run-registry.ts", - "publish-sandboxes": "ts-node --swc ../scripts/sandbox/publish.ts", + "local-registry": "yarn --cwd ../scripts local-registry", + "publish-sandboxes": "yarn --cwd ../scripts publish", "storybook:blocks": "STORYBOOK_BLOCKS_ONLY=true yarn storybook:ui", "storybook:blocks:build": "STORYBOOK_BLOCKS_ONLY=true yarn storybook:ui:build", "storybook:blocks:chromatic": "STORYBOOK_BLOCKS_ONLY=true yarn storybook:ui:chromatic --project-token=${CHROMATIC_TOKEN_STORYBOOK_BLOCKS:-MISSING_PROJECT_TOKEN}", diff --git a/scripts/check-package.cjs b/scripts/check-package.ts similarity index 70% rename from scripts/check-package.cjs rename to scripts/check-package.ts index 7fc8bc88f19..6248ad54797 100644 --- a/scripts/check-package.cjs +++ b/scripts/check-package.ts @@ -1,38 +1,39 @@ -#!/usr/bin/env node - -/* eslint-disable global-require */ -const { resolve } = require('path'); -const { readJSON } = require('fs-extra'); - -const getStorybookPackages = async () => { - const workspaceJSON = await readJSON(resolve(__dirname, '..', 'code', 'workspace.json')); - return Object.entries(workspaceJSON.projects).map(([k, v]) => ({ - location: v.root, - name: k, - })); -}; +import { resolve } from 'path'; +import { readJSON } from 'fs-extra'; +import prompts from 'prompts'; +import program from 'commander'; +import chalk from 'chalk'; +import windowSize from 'window-size'; +import { execaCommand } from 'execa'; +import { getWorkspaces } from './utils/workspace'; async function run() { - const prompts = require('prompts'); - const program = require('commander'); - const chalk = require('chalk'); - - const packages = await getStorybookPackages(); + const packages = await getWorkspaces(); const packageTasks = packages - .map((package) => { + .map((pkg) => { return { - ...package, - suffix: package.name.replace('@storybook/', ''), + ...pkg, + suffix: pkg.name.replace('@storybook/', ''), defaultValue: false, - helpText: `check only the ${package.name} package`, + helpText: `check only the ${pkg.name} package`, }; }) .reduce((acc, next) => { acc[next.name] = next; return acc; - }, {}); + }, {} as Record); - const tasks = { + const tasks: Record< + string, + { + name: string; + defaultValue: boolean; + suffix: string; + helpText: string; + value?: any; + location?: string; + } + > = { watch: { name: `watch`, defaultValue: false, @@ -76,14 +77,15 @@ async function run() { name: 'todo', min: 1, hint: 'You can also run directly with package name like `yarn check core`, or `yarn check --all` for all packages!', - optionsPerPage: require('window-size').height - 3, // 3 lines for extra info + // @ts-expect-error @types incomplete + optionsPerPage: windowSize.height - 3, // 3 lines for extra info choices: packages.map(({ name: key }) => ({ value: key, title: tasks[key].name || key, selected: (tasks[key] && tasks[key].defaultValue) || false, })), }, - ]).then(({ mode, todo }) => { + ]).then(({ mode, todo }: { mode: boolean; todo: Array }) => { watchMode = mode; return todo?.map((key) => tasks[key]); }); @@ -96,9 +98,8 @@ async function run() { } selection?.filter(Boolean).forEach(async (v) => { - const commmand = (await readJSON(resolve(v.location, 'package.json'))).scripts.check; + const commmand = (await readJSON(resolve('../code', v.location, 'package.json'))).scripts.check; const cwd = resolve(__dirname, '..', 'code', v.location); - const { execaCommand } = await import('execa'); const sub = execaCommand(`${commmand}${watchMode ? ' --watch' : ''}`, { cwd, buffer: false, diff --git a/scripts/package.json b/scripts/package.json index 3d316aac367..390c3ef0b14 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -6,14 +6,18 @@ "scripts": { "build-package": "node --loader esbuild-register/loader -r esbuild-register ./build-package.ts", "check": "node --loader esbuild-register/loader -r esbuild-register ./prepare/check-scripts.ts", + "check-package": "node --loader esbuild-register/loader -r esbuild-register ./check-package.ts", "docs:prettier:check": "cd ../docs && prettier --check ./snippets", "docs:prettier:write": "cd ../docs && prettier --write ./snippets", + "generate-sandboxes": "node --loader esbuild-register/loader -r esbuild-register ./sandbox/generate.ts", "get-report-message": "node --loader esbuild-register/loader -r esbuild-register ./get-report-message.ts", "get-template": "node --loader esbuild-register/loader -r esbuild-register ./get-template.ts", "lint": "yarn lint:js && yarn lint:md", "lint:js": "yarn lint:js:cmd . --quiet", "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", + "local-registry": "node --loader esbuild-register/loader -r esbuild-register ./run-registry.ts", + "publish": "node --loader esbuild-register/loader -r esbuild-register ./sandbox/publish.ts", "release:cancel-preparation-runs": "node --loader esbuild-register/loader -r esbuild-register ./release/cancel-preparation-runs.ts", "release:ensure-next-ahead": "node --loader esbuild-register/loader -r esbuild-register ./release/ensure-next-ahead.ts", "release:generate-pr-description": "node --loader esbuild-register/loader -r esbuild-register ./release/generate-pr-description.ts", From c74b562aed2ad105276b956f49ba5a77e14184fe Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 3 Nov 2023 13:43:10 +0100 Subject: [PATCH 018/170] Fix run-registry script --- scripts/run-registry.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/scripts/run-registry.ts b/scripts/run-registry.ts index 8a7017b34fa..71ae3dd334d 100755 --- a/scripts/run-registry.ts +++ b/scripts/run-registry.ts @@ -89,7 +89,10 @@ const publish = async (packages: { name: string; location: string }[], url: stri ); const tarballFilename = `${name.replace('@', '').replace('/', '-')}.tgz`; - const command = `cd ${location} && yarn pack --out=${PACKS_DIRECTORY}/${tarballFilename} && cd ${PACKS_DIRECTORY} && npm publish ./${tarballFilename} --registry ${url} --force --access restricted --ignore-scripts`; + const command = `cd ${path.resolve( + '../code', + location + )} && yarn pack --out=${PACKS_DIRECTORY}/${tarballFilename} && cd ${PACKS_DIRECTORY} && npm publish ./${tarballFilename} --registry ${url} --force --access restricted --ignore-scripts`; exec(command, (e) => { if (e) { rej(e); From 50e524ebd6c40b4600bc7faacc6f8853e364d2b3 Mon Sep 17 00:00:00 2001 From: Joe Vaughan <122215197+joevaugh4n@users.noreply.github.com> Date: Fri, 3 Nov 2023 13:51:05 +0000 Subject: [PATCH 019/170] Create help.yml --- .github/DISCUSSION_TEMPLATE/help.yml | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 .github/DISCUSSION_TEMPLATE/help.yml diff --git a/.github/DISCUSSION_TEMPLATE/help.yml b/.github/DISCUSSION_TEMPLATE/help.yml new file mode 100644 index 00000000000..0e72d0d8483 --- /dev/null +++ b/.github/DISCUSSION_TEMPLATE/help.yml @@ -0,0 +1,25 @@ +--- +body: + - type: textarea + attributes: + label: Summary + description: How do you need help? + placeholder: I need help with... + validations: + required: true + - type: textarea + attributes: + label: Additional information + description: Share your Storybook configuration (`main.js or ts`), any error messages, or relevant dependencies + render: js + validations: + required: false + - type: input + attributes: + label: Share an example + description: Help us debug your issue by creating a minimal reproduction. You can do this with StackBlitz by heading to https://storybook.new! + validations: + required: false + - type: markdown + attributes: null + value: Before submitting, consider adding relevant labels to your thread (e.g. 'react', 'vue', 'vite'). That makes it easier for other users to spot your request. Thanks! From 122e94f4addea4d0917ee2c9ab6f9d47ac2c9bd3 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 6 Nov 2023 14:58:47 +0100 Subject: [PATCH 020/170] Fix Typescript issues --- scripts/dangerfile.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/dangerfile.ts b/scripts/dangerfile.ts index bd9bb649460..6e310073602 100644 --- a/scripts/dangerfile.ts +++ b/scripts/dangerfile.ts @@ -32,7 +32,7 @@ const checkRequiredLabels = (labels: string[]) => { const requiredLabels = flatten([ prLogConfig.skipLabels || [], - (prLogConfig.validLabels || []).map((keyVal: string) => keyVal[0]), + (prLogConfig.validLabels || []).map((keyVal) => keyVal[0]), ]); const blockingLabels = intersection(forbiddenLabels, labels); From 103794e3bb1b0e56bdb2ac0ae1257c0276163e5b Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 6 Nov 2023 14:59:01 +0100 Subject: [PATCH 021/170] Replace tsup with esbuild --- scripts/prepare/facade.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/prepare/facade.ts b/scripts/prepare/facade.ts index c5d6b793ea6..2a1a62d73b5 100755 --- a/scripts/prepare/facade.ts +++ b/scripts/prepare/facade.ts @@ -70,7 +70,7 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { ]); if (pre) { - await exec(`${tsnodePath} ${post}`, { cwd }); + await exec(`node --loader esbuild-register/loader -r esbuild-register ${post}`, { cwd }); } }; From b9f0e4eef5af9b8b7c8e821bd3197034f4a55dfb Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 6 Nov 2023 15:19:58 +0100 Subject: [PATCH 022/170] Use node directly to check angular framework --- code/frameworks/angular/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 057073ce695..b7072dd5545 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -33,7 +33,7 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/node_modules/.bin/tsc", + "check": "node ../../../scripts/node_modules/.bin/tsc", "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/tsc.ts" }, "dependencies": { From 29f5388958746fa1363d545bcb4302777e49ecd9 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 6 Nov 2023 15:20:13 +0100 Subject: [PATCH 023/170] Fix sandbox generation --- code/package.json | 2 +- package.json | 2 +- scripts/tasks/sandbox.ts | 7 ++++--- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/code/package.json b/code/package.json index c20521acc1f..9241403005c 100644 --- a/code/package.json +++ b/code/package.json @@ -49,7 +49,7 @@ "storybook:ui": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js dev --port 6006 --config-dir ./ui/.storybook", "storybook:ui:build": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js build --config-dir ./ui/.storybook", "storybook:ui:chromatic": "yarn chromatic --build-script-name storybook:ui:build --storybook-config-dir ./ui/.storybook --storybook-base-dir ./code --project-token=${CHROMATIC_TOKEN_STORYBOOK_UI:-MISSING_PROJECT_TOKEN} --only-changed --exit-zero-on-changes --exit-once-uploaded", - "task": "cd .. && yarn task", + "task": "yarn --cwd ../scripts task", "test": "NODE_OPTIONS=--max_old_space_size=4096 jest --config ./jest.config.js", "test:cli": "npm --prefix lib/cli run test" }, diff --git a/package.json b/package.json index 7564dbbfd79..3e7e7cadb80 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "nx": "cd code; yarn nx", "pretty-docs": "cd scripts; yarn install >/dev/null; yarn docs:prettier:write", "start": "yarn task --task dev --template react-vite/default-ts --start-from=install", - "task": "echo 'Installing Script Dependencies...'; cd scripts; yarn install >/dev/null; yarn task", + "task": "echo 'Installing Script Dependencies...'; cd scripts; yarn install >/dev/null; cd ..; yarn --cwd=./scripts task", "test": "cd code; yarn test", "upload-bench": "cd scripts; yarn upload-bench" }, diff --git a/scripts/tasks/sandbox.ts b/scripts/tasks/sandbox.ts index 58e7d92fe42..5e3bade5d5d 100644 --- a/scripts/tasks/sandbox.ts +++ b/scripts/tasks/sandbox.ts @@ -55,9 +55,10 @@ export const sandbox: Task = { await remove(details.sandboxDir); } - const { create, install, addStories, extendMain, init, addExtraDependencies } = await import( - './sandbox-parts' - ); + const { create, install, addStories, extendMain, init, addExtraDependencies } = + // @ts-expect-error esbuild for some reason exports a default object + // eslint-disable-next-line import/extensions + (await import('./sandbox-parts.ts')).default; let startTime = now(); await create(details, options); From 55dc4f21713ff708c20cacd6457b9b5129d82145 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 7 Nov 2023 09:50:44 +0100 Subject: [PATCH 024/170] Use esMain helper to check for execution origin --- scripts/combine-compodoc.ts | 5 +-- scripts/event-log-checker.ts | 5 +-- scripts/get-report-message.ts | 5 +-- scripts/get-template.ts | 5 +-- scripts/release/cancel-preparation-runs.ts | 5 +-- scripts/release/ensure-next-ahead.ts | 5 +-- scripts/release/generate-pr-description.ts | 5 +-- scripts/release/get-changelog-from-file.ts | 5 +-- scripts/release/get-current-version.ts | 5 +-- scripts/release/get-version-changelog.ts | 5 +-- scripts/release/is-pr-frozen.ts | 5 +-- scripts/release/is-prerelease.ts | 5 +-- scripts/release/is-version-published.ts | 5 +-- scripts/release/label-patches.ts | 5 +-- scripts/release/pick-patches.ts | 5 +-- scripts/release/publish.ts | 5 +-- scripts/release/unreleased-changes-exists.ts | 5 +-- scripts/release/version.ts | 5 +-- scripts/release/write-changelog.ts | 5 +-- scripts/sandbox/generate.ts | 5 +-- scripts/utils/esmain.ts | 40 ++++++++++++++++++++ 21 files changed, 80 insertions(+), 60 deletions(-) create mode 100644 scripts/utils/esmain.ts diff --git a/scripts/combine-compodoc.ts b/scripts/combine-compodoc.ts index 0a4472edb7b..251a5d88f50 100755 --- a/scripts/combine-compodoc.ts +++ b/scripts/combine-compodoc.ts @@ -6,7 +6,7 @@ import { join, resolve } from 'path'; import { realpath, readFile, writeFile, lstat } from 'fs-extra'; import { globSync } from 'glob'; import { directory } from 'tempy'; -import url from 'url'; +import esMain from './utils/esmain'; import { execaCommand } from './utils/exec'; const logger = console; @@ -68,8 +68,7 @@ async function run(cwd: string) { await writeFile(join(cwd, 'documentation.json'), JSON.stringify(documentation)); } -const modulePath = url.fileURLToPath(import.meta.url); -if (process.argv[1] === modulePath) { +if (esMain(import.meta.url)) { run(resolve(process.argv[2])) .then(() => process.exit(0)) .catch((err) => { diff --git a/scripts/event-log-checker.ts b/scripts/event-log-checker.ts index 4f418bffde9..2ffc395858e 100644 --- a/scripts/event-log-checker.ts +++ b/scripts/event-log-checker.ts @@ -2,7 +2,7 @@ import chalk from 'chalk'; import assert from 'assert'; import fetch from 'node-fetch'; -import url from 'url'; +import esMain from './utils/esmain'; import { allTemplates } from '../code/lib/cli/src/sandbox-templates'; import versions from '../code/lib/cli/src/versions'; import { oneWayHash } from '../code/lib/telemetry/src/one-way-hash'; @@ -115,8 +115,7 @@ async function run() { export {}; -const modulePath = url.fileURLToPath(import.meta.url); -if (process.argv[1] === modulePath) { +if (esMain(import.meta)) { run() .then(() => process.exit(0)) .catch((err) => { diff --git a/scripts/get-report-message.ts b/scripts/get-report-message.ts index 170938cbde0..ce67a50f29c 100644 --- a/scripts/get-report-message.ts +++ b/scripts/get-report-message.ts @@ -1,7 +1,7 @@ /* eslint-disable no-console */ import { readJson } from 'fs-extra'; import { join } from 'path'; -import url from 'url'; +import esMain from './utils/esmain'; import { CODE_DIRECTORY } from './utils/constants'; import { execaCommand } from './utils/exec'; @@ -64,8 +64,7 @@ async function run() { console.log(`${title}${body}${footer}`.replace(/\n/g, '\\n')); } -const modulePath = url.fileURLToPath(import.meta.url); -if (process.argv[1] === modulePath) { +if (esMain(import.meta)) { run().catch((err) => { console.error(err); process.exit(1); diff --git a/scripts/get-template.ts b/scripts/get-template.ts index 5c4b43ad0cb..7da650b41c9 100644 --- a/scripts/get-template.ts +++ b/scripts/get-template.ts @@ -4,7 +4,7 @@ import { program } from 'commander'; import dedent from 'ts-dedent'; import chalk from 'chalk'; import yaml from 'yaml'; -import url from 'url'; +import esMain from './utils/esmain'; import { allTemplates, templatesByCadence, @@ -180,8 +180,7 @@ async function run({ cadence, task, check }: RunOptions) { ); } -const modulePath = url.fileURLToPath(import.meta.url); -if (process.argv[1] === modulePath) { +if (esMain(import.meta)) { program .description('Retrieve the template to run for a given cadence and task') .option('--cadence ', 'Which cadence you want to run the script for') diff --git a/scripts/release/cancel-preparation-runs.ts b/scripts/release/cancel-preparation-runs.ts index 9253f12041c..529f096fcbb 100644 --- a/scripts/release/cancel-preparation-runs.ts +++ b/scripts/release/cancel-preparation-runs.ts @@ -6,7 +6,7 @@ import chalk from 'chalk'; import program from 'commander'; import dedent from 'ts-dedent'; -import url from 'url'; +import esMain from '../utils/esmain'; import { githubRestClient } from './utils/github-client'; program @@ -100,8 +100,7 @@ export const run = async () => { } }; -const modulePath = url.fileURLToPath(import.meta.url); -if (process.argv[1] === modulePath) { +if (esMain(import.meta)) { 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 index 2deae1bee36..bf861ce4616 100644 --- a/scripts/release/ensure-next-ahead.ts +++ b/scripts/release/ensure-next-ahead.ts @@ -14,7 +14,7 @@ import program from 'commander'; import semver from 'semver'; import { z } from 'zod'; import { readJson } from 'fs-extra'; -import url from 'url'; +import esMain from '../utils/esmain'; import { run as bumpVersion } from './version'; import { git } from './utils/git-client'; @@ -93,8 +93,7 @@ export const run = async (options: unknown) => { ); }; -const modulePath = url.fileURLToPath(import.meta.url); -if (process.argv[1] === modulePath) { +if (esMain(import.meta)) { const parsed = program.parse(); run(parsed.opts()).catch((err) => { console.error(err); diff --git a/scripts/release/generate-pr-description.ts b/scripts/release/generate-pr-description.ts index a62c586db86..065a3cf2ade 100644 --- a/scripts/release/generate-pr-description.ts +++ b/scripts/release/generate-pr-description.ts @@ -5,7 +5,7 @@ import { z } from 'zod'; import dedent from 'ts-dedent'; import semver from 'semver'; import { setOutput } from '@actions/core'; -import url from 'url'; +import esMain from '../utils/esmain'; import type { Change } from './utils/get-changes'; import { getChanges, LABELS_BY_IMPORTANCE, RELEASED_LABELS } from './utils/get-changes'; import { getCurrentVersion } from './get-current-version'; @@ -296,8 +296,7 @@ export const run = async (rawOptions: unknown) => { } }; -const modulePath = url.fileURLToPath(import.meta.url); -if (process.argv[1] === modulePath) { +if (esMain(import.meta)) { const parsed = program.parse(); run(parsed.opts()).catch((err) => { console.error(err); diff --git a/scripts/release/get-changelog-from-file.ts b/scripts/release/get-changelog-from-file.ts index 7a5ea3ecadd..264e8d6ebec 100644 --- a/scripts/release/get-changelog-from-file.ts +++ b/scripts/release/get-changelog-from-file.ts @@ -6,7 +6,7 @@ import { readFile } from 'fs-extra'; import path from 'path'; import semver from 'semver'; import dedent from 'ts-dedent'; -import url from 'url'; +import esMain from '../utils/esmain'; import { getCurrentVersion } from './get-current-version'; program @@ -55,8 +55,7 @@ export const getChangelogFromFile = async (args: { return result; }; -const modulePath = url.fileURLToPath(import.meta.url); -if (process.argv[1] === modulePath) { +if (esMain(import.meta)) { const parsed = program.parse(); getChangelogFromFile({ version: parsed.args[0], diff --git a/scripts/release/get-current-version.ts b/scripts/release/get-current-version.ts index df91678f9c4..6012b70eff1 100644 --- a/scripts/release/get-current-version.ts +++ b/scripts/release/get-current-version.ts @@ -3,7 +3,7 @@ import chalk from 'chalk'; import { setOutput } from '@actions/core'; import path from 'path'; import { readJson } from 'fs-extra'; -import url from 'url'; +import esMain from '../utils/esmain'; const CODE_DIR_PATH = path.join(__dirname, '..', '..', 'code'); const CODE_PACKAGE_JSON_PATH = path.join(CODE_DIR_PATH, 'package.json'); @@ -18,8 +18,7 @@ export const getCurrentVersion = async () => { return version; }; -const modulePath = url.fileURLToPath(import.meta.url); -if (process.argv[1] === modulePath) { +if (esMain(import.meta)) { getCurrentVersion().catch((err) => { console.error(err); process.exit(1); diff --git a/scripts/release/get-version-changelog.ts b/scripts/release/get-version-changelog.ts index c70ec902bb0..93a927ff757 100644 --- a/scripts/release/get-version-changelog.ts +++ b/scripts/release/get-version-changelog.ts @@ -2,7 +2,7 @@ import { setOutput } from '@actions/core'; import chalk from 'chalk'; import { program } from 'commander'; -import url from 'url'; +import esMain from '../utils/esmain'; import { getCurrentVersion } from './get-current-version'; import { getChanges } from './utils/get-changes'; @@ -27,8 +27,7 @@ export const getVersionChangelog = async (args: { version?: string; verbose?: bo return changelogText; }; -const modulePath = url.fileURLToPath(import.meta.url); -if (process.argv[1] === modulePath) { +if (esMain(import.meta)) { const parsed = program.parse(); getVersionChangelog({ version: parsed.args[0], verbose: parsed.opts().verbose }).catch((err) => { console.error(err); diff --git a/scripts/release/is-pr-frozen.ts b/scripts/release/is-pr-frozen.ts index d2e774b82cb..2379bcd497b 100644 --- a/scripts/release/is-pr-frozen.ts +++ b/scripts/release/is-pr-frozen.ts @@ -4,7 +4,7 @@ import program from 'commander'; import { setOutput } from '@actions/core'; import path from 'path'; import { readJson } from 'fs-extra'; -import url from 'url'; +import esMain from '../utils/esmain'; import { getPullInfoFromCommit } from './utils/get-github-info'; import { git } from './utils/git-client'; @@ -99,8 +99,7 @@ export const run = async (options: unknown) => { return isFrozen; }; -const modulePath = url.fileURLToPath(import.meta.url); -if (process.argv[1] === modulePath) { +if (esMain(import.meta)) { const parsed = program.parse(); run(parsed.opts()).catch((err) => { console.error(err); diff --git a/scripts/release/is-prerelease.ts b/scripts/release/is-prerelease.ts index ab9606073de..5a5424d5a8b 100644 --- a/scripts/release/is-prerelease.ts +++ b/scripts/release/is-prerelease.ts @@ -3,7 +3,7 @@ import chalk from 'chalk'; import program from 'commander'; import { setOutput } from '@actions/core'; import semver from 'semver'; -import url from 'url'; +import esMain from '../utils/esmain'; import { getCurrentVersion } from './get-current-version'; program @@ -39,8 +39,7 @@ export const isPrerelease = async (args: { version?: string; verbose?: boolean } return result; }; -const modulePath = url.fileURLToPath(import.meta.url); -if (process.argv[1] === modulePath) { +if (esMain(import.meta)) { const parsed = program.parse(); isPrerelease({ version: parsed.args[0], diff --git a/scripts/release/is-version-published.ts b/scripts/release/is-version-published.ts index a0b97d1a155..e24ca559495 100644 --- a/scripts/release/is-version-published.ts +++ b/scripts/release/is-version-published.ts @@ -3,7 +3,7 @@ import chalk from 'chalk'; import program from 'commander'; import { setOutput } from '@actions/core'; import fetch from 'node-fetch'; -import url from 'url'; +import esMain from '../utils/esmain'; import { getCurrentVersion } from './get-current-version'; program @@ -78,8 +78,7 @@ export const run = async (args: unknown[], options: unknown) => { return isAlreadyPublished; }; -const modulePath = url.fileURLToPath(import.meta.url); -if (process.argv[1] === modulePath) { +if (esMain(import.meta)) { const parsed = program.parse(); run(parsed.args, parsed.opts()).catch((err) => { console.error(err); diff --git a/scripts/release/label-patches.ts b/scripts/release/label-patches.ts index a23fbfe07a3..43d110d2561 100644 --- a/scripts/release/label-patches.ts +++ b/scripts/release/label-patches.ts @@ -1,7 +1,7 @@ import program from 'commander'; import { v4 as uuidv4 } from 'uuid'; import ora from 'ora'; -import url from 'url'; +import esMain from '../utils/esmain'; import { getLabelIds, githubGraphQlClient, getUnpickedPRs } from './utils/github-client'; import { getPullInfoFromCommits, getRepo } from './utils/get-changes'; import { getLatestTag, git } from './utils/git-client'; @@ -94,8 +94,7 @@ export const run = async (options: unknown) => { } }; -const modulePath = url.fileURLToPath(import.meta.url); -if (process.argv[1] === modulePath) { +if (esMain(import.meta)) { const options = program.parse().opts(); run(options).catch((err) => { console.error(err); diff --git a/scripts/release/pick-patches.ts b/scripts/release/pick-patches.ts index cfaaf969377..595ab58f425 100644 --- a/scripts/release/pick-patches.ts +++ b/scripts/release/pick-patches.ts @@ -5,7 +5,7 @@ import chalk from 'chalk'; import ora from 'ora'; import { setOutput } from '@actions/core'; import invariant from 'tiny-invariant'; -import url from 'url'; +import esMain from '../utils/esmain'; import { git } from './utils/git-client'; import { getUnpickedPRs } from './utils/github-client'; @@ -86,8 +86,7 @@ export const run = async (_: unknown) => { } }; -const modulePath = url.fileURLToPath(import.meta.url); -if (process.argv[1] === modulePath) { +if (esMain(import.meta)) { const options = program.parse(process.argv); run(options).catch((err) => { console.error(err); diff --git a/scripts/release/publish.ts b/scripts/release/publish.ts index 82b01c552e9..8573e368f4e 100644 --- a/scripts/release/publish.ts +++ b/scripts/release/publish.ts @@ -8,7 +8,7 @@ import { readJson } from 'fs-extra'; import fetch from 'node-fetch'; import dedent from 'ts-dedent'; import pRetry from 'p-retry'; -import url from 'url'; +import esMain from '../utils/esmain'; import { execaCommand } from '../utils/exec'; program @@ -190,8 +190,7 @@ export const run = async (options: unknown) => { ); }; -const modulePath = url.fileURLToPath(import.meta.url); -if (process.argv[1] === modulePath) { +if (esMain(import.meta)) { const parsed = program.parse(); run(parsed.opts()).catch((err) => { console.error(err); diff --git a/scripts/release/unreleased-changes-exists.ts b/scripts/release/unreleased-changes-exists.ts index c0cd5260d59..5c8978f979a 100644 --- a/scripts/release/unreleased-changes-exists.ts +++ b/scripts/release/unreleased-changes-exists.ts @@ -4,7 +4,7 @@ import program from 'commander'; import { z } from 'zod'; import { setOutput } from '@actions/core'; import { intersection } from 'lodash'; -import url from 'url'; +import esMain from '../utils/esmain'; import type { Change } from './utils/get-changes'; import { RELEASED_LABELS, getChanges } from './utils/get-changes'; import { getCurrentVersion } from './get-current-version'; @@ -78,8 +78,7 @@ ${chalk.blue(changesToRelease.map(({ title, pull }) => ` #${pull}: ${title}`).j return { changesToRelease, hasChangesToRelease }; }; -const modulePath = url.fileURLToPath(import.meta.url); -if (process.argv[1] === modulePath) { +if (esMain(import.meta)) { const parsed = program.parse(); run(parsed.opts()).catch((err) => { console.error(err); diff --git a/scripts/release/version.ts b/scripts/release/version.ts index da9e7894d05..59282610453 100644 --- a/scripts/release/version.ts +++ b/scripts/release/version.ts @@ -6,7 +6,7 @@ import path from 'path'; import program from 'commander'; import semver from 'semver'; import { z } from 'zod'; -import url from 'url'; +import esMain from '../utils/esmain'; import type { Workspace } from '../utils/workspace'; import { getWorkspaces } from '../utils/workspace'; import { execaCommand } from '../utils/exec'; @@ -294,8 +294,7 @@ export const run = async (options: unknown) => { } }; -const modulePath = url.fileURLToPath(import.meta.url); -if (process.argv[1] === modulePath) { +if (esMain(import.meta)) { const options = program.parse().opts(); run(options).catch((err) => { console.error(err); diff --git a/scripts/release/write-changelog.ts b/scripts/release/write-changelog.ts index a353309b65a..2f80d381ef4 100644 --- a/scripts/release/write-changelog.ts +++ b/scripts/release/write-changelog.ts @@ -5,7 +5,7 @@ import program from 'commander'; import semver from 'semver'; import { z } from 'zod'; import { readFile, writeFile, writeJson } from 'fs-extra'; -import url from 'url'; +import esMain from '../utils/esmain'; import { getChanges } from './utils/get-changes'; program @@ -133,8 +133,7 @@ export const run = async (args: unknown[], options: unknown) => { console.log(`āœ… Wrote Changelog to file`); }; -const modulePath = url.fileURLToPath(import.meta.url); -if (process.argv[1] === modulePath) { +if (esMain(import.meta)) { const parsed = program.parse(); run(parsed.args, parsed.opts()).catch((err) => { console.error(err); diff --git a/scripts/sandbox/generate.ts b/scripts/sandbox/generate.ts index 229df395bbb..5c2ab47d097 100755 --- a/scripts/sandbox/generate.ts +++ b/scripts/sandbox/generate.ts @@ -6,7 +6,7 @@ import prettyTime from 'pretty-hrtime'; import { copy, emptyDir, ensureDir, move, remove, rename, writeFile } from 'fs-extra'; import { program } from 'commander'; import { directory } from 'tempy'; -import url from 'url'; +import esMain from '../utils/esmain'; import { execaCommand } from '../utils/exec'; import type { OptionValues } from '../utils/options'; @@ -251,8 +251,7 @@ export const generate = async ({ await runGenerators(generatorConfigs, localRegistry, debug); }; -const modulePath = url.fileURLToPath(import.meta.url); -if (process.argv[1] === modulePath) { +if (esMain(import.meta)) { program .description('Generate sandboxes from a set of possible templates') .option('--templates [templates...]', 'Space-delimited list of templates to include') diff --git a/scripts/utils/esmain.ts b/scripts/utils/esmain.ts new file mode 100644 index 00000000000..286f8b25027 --- /dev/null +++ b/scripts/utils/esmain.ts @@ -0,0 +1,40 @@ +import path from 'path'; +import process from 'process'; +import { createRequire } from 'module'; +import { fileURLToPath } from 'url'; + +/** + * Strip the extension from a filename if it has one. + * @param {string} name A filename. + * @return {string} The filename without a path. + */ +export function stripExt(name: string) { + const extension = path.extname(name); + if (!extension) { + return name; + } + + return name.slice(0, -extension.length); +} + +/** + * Check if a module was run directly with node as opposed to being + * imported from another module. + */ +export default function esMain(url: string) { + if (!url || !process.argv[1]) { + return false; + } + + const require = createRequire(url); + const scriptPath = require.resolve(process.argv[1]); + + const modulePath = fileURLToPath(url); + + const extension = path.extname(scriptPath); + if (extension) { + return modulePath === scriptPath; + } + + return stripExt(modulePath) === scriptPath; +} From 40e627f8b461ea3865f1b91350c17c231affcb16 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 7 Nov 2023 09:51:08 +0100 Subject: [PATCH 025/170] Add import for execa package in combine-compodoc.ts --- scripts/combine-compodoc.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/combine-compodoc.ts b/scripts/combine-compodoc.ts index 251a5d88f50..3eaad97df6d 100755 --- a/scripts/combine-compodoc.ts +++ b/scripts/combine-compodoc.ts @@ -6,8 +6,8 @@ import { join, resolve } from 'path'; import { realpath, readFile, writeFile, lstat } from 'fs-extra'; import { globSync } from 'glob'; import { directory } from 'tempy'; +import { execaCommand } from 'execa'; import esMain from './utils/esmain'; -import { execaCommand } from './utils/exec'; const logger = console; From 25b69072d225fd4383d116ddf4d4daa994db7bf4 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 7 Nov 2023 14:30:03 +0100 Subject: [PATCH 026/170] Fix esMain helper usage --- scripts/event-log-checker.ts | 2 +- scripts/get-report-message.ts | 2 +- scripts/get-template.ts | 2 +- scripts/release/cancel-preparation-runs.ts | 2 +- scripts/release/ensure-next-ahead.ts | 2 +- scripts/release/generate-pr-description.ts | 2 +- scripts/release/get-changelog-from-file.ts | 2 +- scripts/release/get-current-version.ts | 2 +- scripts/release/get-version-changelog.ts | 2 +- scripts/release/is-pr-frozen.ts | 2 +- scripts/release/is-prerelease.ts | 2 +- scripts/release/is-version-published.ts | 2 +- scripts/release/label-patches.ts | 2 +- scripts/release/pick-patches.ts | 2 +- scripts/release/publish.ts | 2 +- scripts/release/unreleased-changes-exists.ts | 2 +- scripts/release/version.ts | 2 +- scripts/release/write-changelog.ts | 2 +- scripts/sandbox/generate.ts | 2 +- 19 files changed, 19 insertions(+), 19 deletions(-) diff --git a/scripts/event-log-checker.ts b/scripts/event-log-checker.ts index 2ffc395858e..d480ccd1a0c 100644 --- a/scripts/event-log-checker.ts +++ b/scripts/event-log-checker.ts @@ -115,7 +115,7 @@ async function run() { export {}; -if (esMain(import.meta)) { +if (esMain(import.meta.url)) { run() .then(() => process.exit(0)) .catch((err) => { diff --git a/scripts/get-report-message.ts b/scripts/get-report-message.ts index ce67a50f29c..75df6ba066f 100644 --- a/scripts/get-report-message.ts +++ b/scripts/get-report-message.ts @@ -64,7 +64,7 @@ async function run() { console.log(`${title}${body}${footer}`.replace(/\n/g, '\\n')); } -if (esMain(import.meta)) { +if (esMain(import.meta.url)) { run().catch((err) => { console.error(err); process.exit(1); diff --git a/scripts/get-template.ts b/scripts/get-template.ts index 7da650b41c9..0b54568b314 100644 --- a/scripts/get-template.ts +++ b/scripts/get-template.ts @@ -180,7 +180,7 @@ async function run({ cadence, task, check }: RunOptions) { ); } -if (esMain(import.meta)) { +if (esMain(import.meta.url)) { program .description('Retrieve the template to run for a given cadence and task') .option('--cadence ', 'Which cadence you want to run the script for') diff --git a/scripts/release/cancel-preparation-runs.ts b/scripts/release/cancel-preparation-runs.ts index 529f096fcbb..811de60bfa5 100644 --- a/scripts/release/cancel-preparation-runs.ts +++ b/scripts/release/cancel-preparation-runs.ts @@ -100,7 +100,7 @@ export const run = async () => { } }; -if (esMain(import.meta)) { +if (esMain(import.meta.url)) { 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 index bf861ce4616..4bc4bfbab35 100644 --- a/scripts/release/ensure-next-ahead.ts +++ b/scripts/release/ensure-next-ahead.ts @@ -93,7 +93,7 @@ export const run = async (options: unknown) => { ); }; -if (esMain(import.meta)) { +if (esMain(import.meta.url)) { const parsed = program.parse(); run(parsed.opts()).catch((err) => { console.error(err); diff --git a/scripts/release/generate-pr-description.ts b/scripts/release/generate-pr-description.ts index 065a3cf2ade..31bcc3c63c1 100644 --- a/scripts/release/generate-pr-description.ts +++ b/scripts/release/generate-pr-description.ts @@ -296,7 +296,7 @@ export const run = async (rawOptions: unknown) => { } }; -if (esMain(import.meta)) { +if (esMain(import.meta.url)) { const parsed = program.parse(); run(parsed.opts()).catch((err) => { console.error(err); diff --git a/scripts/release/get-changelog-from-file.ts b/scripts/release/get-changelog-from-file.ts index 264e8d6ebec..62a248f06d9 100644 --- a/scripts/release/get-changelog-from-file.ts +++ b/scripts/release/get-changelog-from-file.ts @@ -55,7 +55,7 @@ export const getChangelogFromFile = async (args: { return result; }; -if (esMain(import.meta)) { +if (esMain(import.meta.url)) { const parsed = program.parse(); getChangelogFromFile({ version: parsed.args[0], diff --git a/scripts/release/get-current-version.ts b/scripts/release/get-current-version.ts index 6012b70eff1..7fa283d4f08 100644 --- a/scripts/release/get-current-version.ts +++ b/scripts/release/get-current-version.ts @@ -18,7 +18,7 @@ export const getCurrentVersion = async () => { return version; }; -if (esMain(import.meta)) { +if (esMain(import.meta.url)) { getCurrentVersion().catch((err) => { console.error(err); process.exit(1); diff --git a/scripts/release/get-version-changelog.ts b/scripts/release/get-version-changelog.ts index 93a927ff757..a3c6e645f79 100644 --- a/scripts/release/get-version-changelog.ts +++ b/scripts/release/get-version-changelog.ts @@ -27,7 +27,7 @@ export const getVersionChangelog = async (args: { version?: string; verbose?: bo return changelogText; }; -if (esMain(import.meta)) { +if (esMain(import.meta.url)) { const parsed = program.parse(); getVersionChangelog({ version: parsed.args[0], verbose: parsed.opts().verbose }).catch((err) => { console.error(err); diff --git a/scripts/release/is-pr-frozen.ts b/scripts/release/is-pr-frozen.ts index 2379bcd497b..2eb52528dda 100644 --- a/scripts/release/is-pr-frozen.ts +++ b/scripts/release/is-pr-frozen.ts @@ -99,7 +99,7 @@ export const run = async (options: unknown) => { return isFrozen; }; -if (esMain(import.meta)) { +if (esMain(import.meta.url)) { const parsed = program.parse(); run(parsed.opts()).catch((err) => { console.error(err); diff --git a/scripts/release/is-prerelease.ts b/scripts/release/is-prerelease.ts index 5a5424d5a8b..ef15bf6c40b 100644 --- a/scripts/release/is-prerelease.ts +++ b/scripts/release/is-prerelease.ts @@ -39,7 +39,7 @@ export const isPrerelease = async (args: { version?: string; verbose?: boolean } return result; }; -if (esMain(import.meta)) { +if (esMain(import.meta.url)) { const parsed = program.parse(); isPrerelease({ version: parsed.args[0], diff --git a/scripts/release/is-version-published.ts b/scripts/release/is-version-published.ts index e24ca559495..6a57efa92d5 100644 --- a/scripts/release/is-version-published.ts +++ b/scripts/release/is-version-published.ts @@ -78,7 +78,7 @@ export const run = async (args: unknown[], options: unknown) => { return isAlreadyPublished; }; -if (esMain(import.meta)) { +if (esMain(import.meta.url)) { const parsed = program.parse(); run(parsed.args, parsed.opts()).catch((err) => { console.error(err); diff --git a/scripts/release/label-patches.ts b/scripts/release/label-patches.ts index 43d110d2561..68572d45c87 100644 --- a/scripts/release/label-patches.ts +++ b/scripts/release/label-patches.ts @@ -94,7 +94,7 @@ export const run = async (options: unknown) => { } }; -if (esMain(import.meta)) { +if (esMain(import.meta.url)) { const options = program.parse().opts(); run(options).catch((err) => { console.error(err); diff --git a/scripts/release/pick-patches.ts b/scripts/release/pick-patches.ts index 595ab58f425..9bdbf53977e 100644 --- a/scripts/release/pick-patches.ts +++ b/scripts/release/pick-patches.ts @@ -86,7 +86,7 @@ export const run = async (_: unknown) => { } }; -if (esMain(import.meta)) { +if (esMain(import.meta.url)) { const options = program.parse(process.argv); run(options).catch((err) => { console.error(err); diff --git a/scripts/release/publish.ts b/scripts/release/publish.ts index 8573e368f4e..32c1b57c5b2 100644 --- a/scripts/release/publish.ts +++ b/scripts/release/publish.ts @@ -190,7 +190,7 @@ export const run = async (options: unknown) => { ); }; -if (esMain(import.meta)) { +if (esMain(import.meta.url)) { const parsed = program.parse(); run(parsed.opts()).catch((err) => { console.error(err); diff --git a/scripts/release/unreleased-changes-exists.ts b/scripts/release/unreleased-changes-exists.ts index 5c8978f979a..e076e640d30 100644 --- a/scripts/release/unreleased-changes-exists.ts +++ b/scripts/release/unreleased-changes-exists.ts @@ -78,7 +78,7 @@ ${chalk.blue(changesToRelease.map(({ title, pull }) => ` #${pull}: ${title}`).j return { changesToRelease, hasChangesToRelease }; }; -if (esMain(import.meta)) { +if (esMain(import.meta.url)) { const parsed = program.parse(); run(parsed.opts()).catch((err) => { console.error(err); diff --git a/scripts/release/version.ts b/scripts/release/version.ts index 59282610453..57c0973583c 100644 --- a/scripts/release/version.ts +++ b/scripts/release/version.ts @@ -294,7 +294,7 @@ export const run = async (options: unknown) => { } }; -if (esMain(import.meta)) { +if (esMain(import.meta.url)) { const options = program.parse().opts(); run(options).catch((err) => { console.error(err); diff --git a/scripts/release/write-changelog.ts b/scripts/release/write-changelog.ts index 2f80d381ef4..30a64dd366e 100644 --- a/scripts/release/write-changelog.ts +++ b/scripts/release/write-changelog.ts @@ -133,7 +133,7 @@ export const run = async (args: unknown[], options: unknown) => { console.log(`āœ… Wrote Changelog to file`); }; -if (esMain(import.meta)) { +if (esMain(import.meta.url)) { const parsed = program.parse(); run(parsed.args, parsed.opts()).catch((err) => { console.error(err); diff --git a/scripts/sandbox/generate.ts b/scripts/sandbox/generate.ts index 5c2ab47d097..e625bd194ba 100755 --- a/scripts/sandbox/generate.ts +++ b/scripts/sandbox/generate.ts @@ -251,7 +251,7 @@ export const generate = async ({ await runGenerators(generatorConfigs, localRegistry, debug); }; -if (esMain(import.meta)) { +if (esMain(import.meta.url)) { program .description('Generate sandboxes from a set of possible templates') .option('--templates [templates...]', 'Space-delimited list of templates to include') From 4baa40ffb727330f2ac1b6ba5d9466c4a6c7301c Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 8 Nov 2023 08:41:12 +0100 Subject: [PATCH 027/170] Fix danger.js --- scripts/dangerfile.ts | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/scripts/dangerfile.ts b/scripts/dangerfile.ts index 6e310073602..754686981c8 100644 --- a/scripts/dangerfile.ts +++ b/scripts/dangerfile.ts @@ -2,14 +2,13 @@ import { fail, danger } from 'danger'; import { execSync } from 'child_process'; -import flatten from 'lodash/flatten.js'; -import intersection from 'lodash/intersection.js'; -import isEmpty from 'lodash/isEmpty.js'; - -import pkg from '../code/package.json'; - execSync('npm install lodash'); +const flatten = require('lodash/flatten.js'); +const intersection = require('lodash/intersection.js'); +const isEmpty = require('lodash/isEmpty.js'); + +const pkg = require('../code/package.json'); // eslint-disable-line import/newline-after-import const prLogConfig = pkg['pr-log']; const Versions = { @@ -32,7 +31,7 @@ const checkRequiredLabels = (labels: string[]) => { const requiredLabels = flatten([ prLogConfig.skipLabels || [], - (prLogConfig.validLabels || []).map((keyVal) => keyVal[0]), + (prLogConfig.validLabels || []).map((keyVal: string) => keyVal[0]), ]); const blockingLabels = intersection(forbiddenLabels, labels); From 4d3188309328867b788776324dbadeb4bb3732cb Mon Sep 17 00:00:00 2001 From: Joe Vaughan <122215197+joevaugh4n@users.noreply.github.com> Date: Wed, 8 Nov 2023 09:35:26 +0100 Subject: [PATCH 028/170] Update .github/DISCUSSION_TEMPLATE/help.yml Co-authored-by: Kyle Gach --- .github/DISCUSSION_TEMPLATE/help.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/DISCUSSION_TEMPLATE/help.yml b/.github/DISCUSSION_TEMPLATE/help.yml index 0e72d0d8483..ddbaaca364a 100644 --- a/.github/DISCUSSION_TEMPLATE/help.yml +++ b/.github/DISCUSSION_TEMPLATE/help.yml @@ -17,7 +17,7 @@ body: - type: input attributes: label: Share an example - description: Help us debug your issue by creating a minimal reproduction. You can do this with StackBlitz by heading to https://storybook.new! + description: Help us debug your issue by creating a minimal reproduction. You can do this with StackBlitz by heading to [https://storybook.new](https://storybook.new)! validations: required: false - type: markdown From 758c0de182ccf448bb206350b25ee3afd715ef80 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 8 Nov 2023 09:59:43 +0100 Subject: [PATCH 029/170] Remove custom execa implementation --- scripts/get-report-message.ts | 4 ++-- scripts/release/publish.ts | 4 +++- scripts/release/version.ts | 3 ++- scripts/sandbox/generate.ts | 3 ++- scripts/sandbox/publish.ts | 6 +++--- scripts/sandbox/utils/git.ts | 10 ++++++---- scripts/upload-bench.ts | 9 ++++++--- scripts/utils/exec.ts | 13 ------------- scripts/utils/workspace.ts | 2 +- 9 files changed, 25 insertions(+), 29 deletions(-) diff --git a/scripts/get-report-message.ts b/scripts/get-report-message.ts index 75df6ba066f..a10bbdd276e 100644 --- a/scripts/get-report-message.ts +++ b/scripts/get-report-message.ts @@ -1,9 +1,9 @@ /* eslint-disable no-console */ import { readJson } from 'fs-extra'; import { join } from 'path'; +import { execaCommand } from 'execa'; import esMain from './utils/esmain'; import { CODE_DIRECTORY } from './utils/constants'; -import { execaCommand } from './utils/exec'; type Branch = 'main' | 'next' | 'alpha' | 'next-release' | 'latest-release'; type Workflow = 'merged' | 'daily'; @@ -28,7 +28,7 @@ const getFooter = async (branch: Branch, workflow: Workflow, job: string) => { : // show last 24h merges for daily workflow `git log --merges --since="24 hours ago" --pretty=format:"\`%h\` %<(12)%ar %s [%an]"`; - const result = await execaCommand(mergeCommits, { shell: true }); + const result = await execaCommand(mergeCommits, { shell: true, cleanup: true }); const formattedResult = result.stdout // discord needs escaped line breaks .replace(/\n/g, '\\n') diff --git a/scripts/release/publish.ts b/scripts/release/publish.ts index 32c1b57c5b2..c5f509ccd00 100644 --- a/scripts/release/publish.ts +++ b/scripts/release/publish.ts @@ -8,8 +8,8 @@ import { readJson } from 'fs-extra'; import fetch from 'node-fetch'; import dedent from 'ts-dedent'; import pRetry from 'p-retry'; +import { execaCommand } from 'execa'; import esMain from '../utils/esmain'; -import { execaCommand } from '../utils/exec'; program .name('publish') @@ -111,6 +111,7 @@ const buildAllPackages = async () => { console.log(`šŸ—ļø Building all packages...`); await execaCommand('yarn task --task=compile --start-from=compile --no-link', { stdio: 'inherit', + cleanup: true, cwd: CODE_DIR_PATH, }); console.log(`šŸ—ļø Packages successfully built`); @@ -146,6 +147,7 @@ const publishAllPackages = async ({ () => execaCommand(command, { stdio: 'inherit', + cleanup: true, cwd: CODE_DIR_PATH, }), { diff --git a/scripts/release/version.ts b/scripts/release/version.ts index 57c0973583c..db3f30fa8a8 100644 --- a/scripts/release/version.ts +++ b/scripts/release/version.ts @@ -6,10 +6,10 @@ import path from 'path'; import program from 'commander'; import semver from 'semver'; import { z } from 'zod'; +import { execaCommand } from 'execa'; import esMain from '../utils/esmain'; import type { Workspace } from '../utils/workspace'; import { getWorkspaces } from '../utils/workspace'; -import { execaCommand } from '../utils/exec'; program .name('version') @@ -284,6 +284,7 @@ export const run = async (options: unknown) => { await execaCommand(`yarn install --mode=update-lockfile`, { cwd: path.join(CODE_DIR_PATH), stdio: verbose ? 'inherit' : undefined, + cleanup: true, }); console.log(`āœ… Updated lock file with ${chalk.blue('yarn install --mode=update-lockfile')}`); } diff --git a/scripts/sandbox/generate.ts b/scripts/sandbox/generate.ts index e625bd194ba..e94459e4d91 100755 --- a/scripts/sandbox/generate.ts +++ b/scripts/sandbox/generate.ts @@ -6,8 +6,8 @@ import prettyTime from 'pretty-hrtime'; import { copy, emptyDir, ensureDir, move, remove, rename, writeFile } from 'fs-extra'; import { program } from 'commander'; import { directory } from 'tempy'; +import { execaCommand } from 'execa'; import esMain from '../utils/esmain'; -import { execaCommand } from '../utils/exec'; import type { OptionValues } from '../utils/options'; import { createOptions } from '../utils/options'; @@ -99,6 +99,7 @@ export const runCommand = async (script: string, options: ExecaOptions, debug = return execaCommand(script, { stdout: debug ? 'inherit' : 'ignore', shell: true, + cleanup: true, ...options, }); }; diff --git a/scripts/sandbox/publish.ts b/scripts/sandbox/publish.ts index a40fc2bd054..e4307690efd 100755 --- a/scripts/sandbox/publish.ts +++ b/scripts/sandbox/publish.ts @@ -3,7 +3,7 @@ import { join } from 'path'; import { existsSync } from 'fs'; import * as tempy from 'tempy'; import { copy, emptyDir, readdir, remove, stat, writeFile } from 'fs-extra'; -import { execaCommand } from '../utils/exec'; +import { execaCommand } from 'execa'; import { getTemplatesData, renderTemplate } from './utils/template'; // eslint-disable-next-line import/no-cycle @@ -26,8 +26,8 @@ const publish = async (options: PublishOptions & { tmpFolder: string }) => { const templatesData = await getTemplatesData(branch === 'main' ? 'main' : 'next'); logger.log(`šŸ‘Æā€ā™‚ļø Cloning the repository ${remote} in branch ${branch}`); - await execaCommand(`git clone ${remote} .`, { cwd: tmpFolder }); - await execaCommand(`git checkout ${branch}`, { cwd: tmpFolder }); + await execaCommand(`git clone ${remote} .`, { cwd: tmpFolder, cleanup: true }); + await execaCommand(`git checkout ${branch}`, { cwd: tmpFolder, cleanup: true }); // otherwise old files will stick around and result inconsistent states logger.log(`šŸ—‘ Delete existing template dirs from clone`); diff --git a/scripts/sandbox/utils/git.ts b/scripts/sandbox/utils/git.ts index dea378eae92..71de33aa38f 100644 --- a/scripts/sandbox/utils/git.ts +++ b/scripts/sandbox/utils/git.ts @@ -1,7 +1,7 @@ import fetch from 'node-fetch'; import invariant from 'tiny-invariant'; -import { execaCommand } from '../../utils/exec'; +import { execaCommand } from 'execa'; // eslint-disable-next-line import/no-cycle import { logger } from '../publish'; @@ -50,9 +50,9 @@ export async function commitAllToGit({ cwd, branch }: { cwd: string; branch: str try { logger.log(`šŸ’Ŗ Committing everything to the repository`); - await execaCommand('git add .', { cwd }); + await execaCommand('git add .', { cwd, cleanup: true }); - const currentCommitHash = (await execaCommand('git rev-parse HEAD')).stdout + const currentCommitHash = (await execaCommand('git rev-parse HEAD', { cleanup: true })).stdout .toString() .slice(0, 12); @@ -63,7 +63,8 @@ export async function commitAllToGit({ cwd, branch }: { cwd: string; branch: str const previousCommitHash = await getTheLastCommitHashThatUpdatedTheSandboxRepo(branch); const mergeCommits = ( await execaCommand( - `git log ${previousCommitHash}..${currentCommitHash} --merges --pretty=%s` + `git log ${previousCommitHash}..${currentCommitHash} --merges --pretty=%s`, + { cleanup: true } ) ).stdout .toString() @@ -95,6 +96,7 @@ export async function commitAllToGit({ cwd, branch }: { cwd: string; branch: str await execaCommand(gitCommitCommand, { shell: true, + cleanup: true, cwd, }); } catch (e) { diff --git a/scripts/upload-bench.ts b/scripts/upload-bench.ts index e841ec363c3..250c6154ce2 100644 --- a/scripts/upload-bench.ts +++ b/scripts/upload-bench.ts @@ -1,10 +1,10 @@ import { join } from 'path'; import { BigQuery } from '@google-cloud/bigquery'; +import { execaCommand } from 'execa'; import type { BenchResults } from './bench/types'; import { loadBench } from './bench/utils'; import { SANDBOX_DIRECTORY } from './utils/constants'; -import { execaCommand } from './utils/exec'; const templateKey = process.argv[2]; @@ -64,8 +64,11 @@ const uploadBench = async () => { const row = { ...defaults, branch: - process.env.CIRCLE_BRANCH || (await execaCommand('git rev-parse --abbrev-ref HEAD')).stdout, - commit: process.env.CIRCLE_SHA1 || (await execaCommand('git rev-parse HEAD')).stdout, + process.env.CIRCLE_BRANCH || + (await execaCommand('git rev-parse --abbrev-ref HEAD', { cleanup: true })).stdout, + commit: + process.env.CIRCLE_SHA1 || + (await execaCommand('git rev-parse HEAD', { cleanup: true })).stdout, timestamp: new Date().toISOString(), label: templateKey, ...results, diff --git a/scripts/utils/exec.ts b/scripts/utils/exec.ts index 4dec95e814f..536c36aecf1 100644 --- a/scripts/utils/exec.ts +++ b/scripts/utils/exec.ts @@ -13,19 +13,6 @@ type StepOptions = { signal?: AbortSignal; }; -// Reimplementation of `execaCommand` to use `getExeca` -export const execaCommand = async ( - command: string, - options: Options = {} -): Promise> => { - // We await here because execaCommand returns a promise, but that's not what the user expects - // eslint-disable-next-line @typescript-eslint/return-await - return await execa(command, { - cleanup: true, - ...options, - }); -}; - export const exec = async ( command: string | string[], options: Options = {}, diff --git a/scripts/utils/workspace.ts b/scripts/utils/workspace.ts index a9af2eb46fa..7edef2d14f1 100644 --- a/scripts/utils/workspace.ts +++ b/scripts/utils/workspace.ts @@ -1,6 +1,6 @@ import memoize from 'memoizerific'; +import { execaCommand } from 'execa'; import { CODE_DIRECTORY } from './constants'; -import { execaCommand } from './exec'; export type Workspace = { name: string; location: string }; From 6d5080e0a16527231aeaab6e17ba484ec98d4d2a Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 8 Nov 2023 15:48:16 +0100 Subject: [PATCH 030/170] Fix tests --- scripts/release/__tests__/version.test.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/scripts/release/__tests__/version.test.ts b/scripts/release/__tests__/version.test.ts index 98069ffaba7..22a2cb7ca8a 100644 --- a/scripts/release/__tests__/version.test.ts +++ b/scripts/release/__tests__/version.test.ts @@ -11,8 +11,8 @@ jest.mock('../../../code/lib/cli/src/versions', () => ({ '@storybook/addon-a11y': '7.1.0-alpha.29', })); -jest.mock('../../utils/exec'); -const { execaCommand } = require('../../utils/exec'); +jest.mock('execa'); +const { execaCommand } = require('execa'); jest.mock('../../utils/workspace', () => ({ getWorkspaces: jest.fn().mockResolvedValue([ @@ -288,6 +288,7 @@ describe('Version', () => { ); expect(execaCommand).toHaveBeenCalledWith('yarn install --mode=update-lockfile', { cwd: path.join(CODE_DIR_PATH), + cleanup: true, stdio: undefined, }); } From f7dba4ca7dca974d0e574ee8fe71b65aa13d549f Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 8 Nov 2023 17:12:06 +0100 Subject: [PATCH 031/170] Fix identation in Migration.md --- MIGRATION.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 7c195b60488..023a398d32a 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,7 +1,7 @@

Migration

- [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) + - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) - [From version 7.4.0 to 7.5.0](#from-version-740-to-750) - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) @@ -311,7 +311,7 @@ ## From version 7.5.0 to 7.6.0 -##### Primary doc block accepts of prop +#### Primary doc block accepts of prop The `Primary` doc block now also accepts an `of` prop as described in the [Doc Blocks](#doc-blocks) section. It still accepts being passed `name` or no props at all. From dca97a1f91b2577b0d1ddb1ff780e3837c12cc09 Mon Sep 17 00:00:00 2001 From: paoloricciuti Date: Fri, 10 Nov 2023 00:31:46 +0100 Subject: [PATCH 032/170] feat: tighter integration with sveltekit --- code/frameworks/sveltekit/package.json | 15 +++++- .../src/components/LinkListener.svelte | 43 ++++++++++++++++ .../sveltekit/src/mocks/app/forms.ts | 19 +++++++ .../sveltekit/src/mocks/app/navigation.ts | 49 +++++++++++++++++++ .../sveltekit/src/mocks/app/stores.ts | 20 ++++++++ .../sveltekit/src/plugins/config-overrides.ts | 31 +++++++++--- code/frameworks/sveltekit/src/preset.ts | 4 ++ code/frameworks/sveltekit/src/preview.ts | 19 +++++++ 8 files changed, 191 insertions(+), 9 deletions(-) create mode 100644 code/frameworks/sveltekit/src/components/LinkListener.svelte create mode 100644 code/frameworks/sveltekit/src/mocks/app/forms.ts create mode 100644 code/frameworks/sveltekit/src/mocks/app/navigation.ts create mode 100644 code/frameworks/sveltekit/src/mocks/app/stores.ts create mode 100644 code/frameworks/sveltekit/src/preview.ts diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 632b552869f..9eb5088313d 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -29,6 +29,17 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, + "./src/components/LinkListener.svelte": "./src/components/LinkListener.svelte", + "./preview": { + "types": "./dist/preview.d.ts", + "require": "./dist/preview.js", + "import": "./dist/preview.mjs" + }, + "./dist/preview.js": { + "types": "./dist/preview.d.ts", + "require": "./dist/preview.js", + "import": "./dist/preview.mjs" + }, "./preset": { "types": "./dist/preset.d.ts", "require": "./dist/preset.js" @@ -43,7 +54,8 @@ "README.md", "*.js", "*.d.ts", - "!src/**/*" + "!src/**/*", + "src/components/**/*" ], "scripts": { "check": "../../../scripts/prepare/check.ts", @@ -72,6 +84,7 @@ "bundler": { "entries": [ "./src/index.ts", + "./src/preview.ts", "./src/preset.ts" ], "platform": "node" diff --git a/code/frameworks/sveltekit/src/components/LinkListener.svelte b/code/frameworks/sveltekit/src/components/LinkListener.svelte new file mode 100644 index 00000000000..fafe78951db --- /dev/null +++ b/code/frameworks/sveltekit/src/components/LinkListener.svelte @@ -0,0 +1,43 @@ + + + diff --git a/code/frameworks/sveltekit/src/mocks/app/forms.ts b/code/frameworks/sveltekit/src/mocks/app/forms.ts new file mode 100644 index 00000000000..ed68853479c --- /dev/null +++ b/code/frameworks/sveltekit/src/mocks/app/forms.ts @@ -0,0 +1,19 @@ +export function enhance(form: HTMLFormElement) { + // import('@storybook/addon-actions') + // .then(({ action }) => { + // action('sveltekit.enhance')(); + // }) + // .catch(console.log); +} + +export function applyAction() {} + +export function deserialize() { + return deserializeResponse; +} + +let deserializeResponse: any; + +export function setDeserializeResponse(answer: any) { + deserializeResponse = answer; +} diff --git a/code/frameworks/sveltekit/src/mocks/app/navigation.ts b/code/frameworks/sveltekit/src/mocks/app/navigation.ts new file mode 100644 index 00000000000..6d4af0ac87d --- /dev/null +++ b/code/frameworks/sveltekit/src/mocks/app/navigation.ts @@ -0,0 +1,49 @@ +import { getContext, onMount, setContext } from 'svelte'; + +export async function goto(...args: any[]) { + // try { + // const { action } = await import('@storybook/addon-actions'); + // action('sveltekit.goto')(...args); + // } catch (e) { + // console.log(e); + // } +} + +export function setAfterNavigateArgument(afterNavigateArgs: any) { + setContext('after-navigate-args', afterNavigateArgs); +} + +export function afterNavigate(cb: any) { + const argument = getContext('after-navigate-args'); + onMount(() => { + cb(argument); + }); +} + +export function onNavigate() {} + +export function beforeNavigate() {} + +export function disableScrollHandling() {} + +export async function invalidate(...args: any[]) { + // try { + // const { action } = await import('@storybook/addon-actions'); + // action('sveltekit.invalidate')(...args); + // } catch (e) { + // console.log(e); + // } +} + +export async function invalidateAll() { + // try { + // const { action } = await import('@storybook/addon-actions'); + // action('sveltekit.invalidateAll')(); + // } catch (e) { + // console.log(e); + // } +} + +export function preloadCode() {} + +export function preloadData() {} diff --git a/code/frameworks/sveltekit/src/mocks/app/stores.ts b/code/frameworks/sveltekit/src/mocks/app/stores.ts new file mode 100644 index 00000000000..bd7ce8e9120 --- /dev/null +++ b/code/frameworks/sveltekit/src/mocks/app/stores.ts @@ -0,0 +1,20 @@ +import { getContext, setContext } from 'svelte'; + +function createMockedStore(contextName: string) { + return [ + { + subscribe(runner: any) { + const page = getContext(contextName); + runner(page); + return () => {}; + }, + }, + (value: unknown) => { + setContext(contextName, value); + }, + ] as const; +} + +export const [page, setPage] = createMockedStore('page-ctx'); +export const [navigating, setNavigating] = createMockedStore('navigating-ctx'); +export const [updated, setUpdated] = createMockedStore('updated-ctx'); diff --git a/code/frameworks/sveltekit/src/plugins/config-overrides.ts b/code/frameworks/sveltekit/src/plugins/config-overrides.ts index db5294a1324..d1dfcc09919 100644 --- a/code/frameworks/sveltekit/src/plugins/config-overrides.ts +++ b/code/frameworks/sveltekit/src/plugins/config-overrides.ts @@ -1,12 +1,27 @@ -import type { Plugin } from 'vite'; +import { resolve } from 'node:path'; +import { mergeConfig, type Plugin } from 'vite'; export function configOverrides() { - return { - // SvelteKit sets SSR, we need it to be false when building - name: 'storybook:sveltekit-overrides', - apply: 'build', - config: () => { - return { build: { ssr: false } }; + return [ + { + // SvelteKit sets SSR, we need it to be false when building + name: 'storybook:sveltekit-overrides', + apply: 'build', + config: () => { + return { build: { ssr: false } }; + }, }, - } satisfies Plugin; + { + name: 'storybook:sveltekit-mock-stores', + enforce: 'post', + config: (config) => + mergeConfig(config, { + resolve: { + alias: { + $app: resolve(__dirname, '../src/mocks/app/'), + }, + }, + }), + }, + ] satisfies Plugin[]; } diff --git a/code/frameworks/sveltekit/src/preset.ts b/code/frameworks/sveltekit/src/preset.ts index e92e45079f6..4e765d1631c 100644 --- a/code/frameworks/sveltekit/src/preset.ts +++ b/code/frameworks/sveltekit/src/preset.ts @@ -13,6 +13,10 @@ export const core: PresetProperty<'core', StorybookConfig> = { builder: getAbsolutePath('@storybook/builder-vite'), renderer: getAbsolutePath('@storybook/svelte'), }; +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => [ + ...entry, + require.resolve('@storybook/sveltekit/preview'), +]; export const viteFinal: NonNullable = async (config, options) => { const baseConfig = await svelteViteFinal(config, options); diff --git a/code/frameworks/sveltekit/src/preview.ts b/code/frameworks/sveltekit/src/preview.ts new file mode 100644 index 00000000000..dbb0786be68 --- /dev/null +++ b/code/frameworks/sveltekit/src/preview.ts @@ -0,0 +1,19 @@ +import type { Decorator } from '@storybook/svelte'; + +// eslint-disable-next-line import/no-extraneous-dependencies +import LinkListener from '@storybook/sveltekit/src/components/LinkListener.svelte'; +import { setDeserializeResponse } from './mocks/app/forms'; +import { setAfterNavigateArgument } from './mocks/app/navigation'; +import { setNavigating, setPage, setUpdated } from './mocks/app/stores'; + +export const decorators: Decorator[] = [ + (Story, ctx) => { + setPage(ctx.parameters?.sveltekit?.stores?.page); + setUpdated(ctx.parameters?.sveltekit?.stores?.updated); + setNavigating(ctx.parameters?.sveltekit?.stores?.navigating); + setDeserializeResponse(ctx.parameters?.sveltekit?.forms?.deserializeResponse); + setAfterNavigateArgument(ctx.parameters?.sveltekit?.navigation?.afterNavigate); + return Story(); + }, + (_, ctx) => ({ Component: LinkListener, props: { ctx } }), +]; From 0a103b1e237880aaad6005d52ee8c20af3934c1f Mon Sep 17 00:00:00 2001 From: paoloricciuti Date: Fri, 10 Nov 2023 11:20:39 +0100 Subject: [PATCH 033/170] fix callbacks for goto, enhance, invalidate, invalidateAll add getStores export --- code/frameworks/sveltekit/package.json | 2 +- .../src/components/LinkListener.svelte | 43 ------------- .../src/components/SvelteDecorator.svelte | 60 +++++++++++++++++++ .../sveltekit/src/mocks/app/forms.ts | 7 +-- .../sveltekit/src/mocks/app/navigation.ts | 28 ++++----- .../sveltekit/src/mocks/app/stores.ts | 8 +++ code/frameworks/sveltekit/src/preview.ts | 8 +-- 7 files changed, 85 insertions(+), 71 deletions(-) delete mode 100644 code/frameworks/sveltekit/src/components/LinkListener.svelte create mode 100644 code/frameworks/sveltekit/src/components/SvelteDecorator.svelte diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 9eb5088313d..afa20320e9b 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -29,7 +29,7 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./src/components/LinkListener.svelte": "./src/components/LinkListener.svelte", + "./src/components/SvelteDecorator.svelte": "./src/components/SvelteDecorator.svelte", "./preview": { "types": "./dist/preview.d.ts", "require": "./dist/preview.js", diff --git a/code/frameworks/sveltekit/src/components/LinkListener.svelte b/code/frameworks/sveltekit/src/components/LinkListener.svelte deleted file mode 100644 index fafe78951db..00000000000 --- a/code/frameworks/sveltekit/src/components/LinkListener.svelte +++ /dev/null @@ -1,43 +0,0 @@ - - - diff --git a/code/frameworks/sveltekit/src/components/SvelteDecorator.svelte b/code/frameworks/sveltekit/src/components/SvelteDecorator.svelte new file mode 100644 index 00000000000..fe337afe181 --- /dev/null +++ b/code/frameworks/sveltekit/src/components/SvelteDecorator.svelte @@ -0,0 +1,60 @@ + + + diff --git a/code/frameworks/sveltekit/src/mocks/app/forms.ts b/code/frameworks/sveltekit/src/mocks/app/forms.ts index ed68853479c..73a9eaefc04 100644 --- a/code/frameworks/sveltekit/src/mocks/app/forms.ts +++ b/code/frameworks/sveltekit/src/mocks/app/forms.ts @@ -1,9 +1,6 @@ export function enhance(form: HTMLFormElement) { - // import('@storybook/addon-actions') - // .then(({ action }) => { - // action('sveltekit.enhance')(); - // }) - // .catch(console.log); + const event = new CustomEvent('storybook:enhance'); + window.dispatchEvent(event); } export function applyAction() {} diff --git a/code/frameworks/sveltekit/src/mocks/app/navigation.ts b/code/frameworks/sveltekit/src/mocks/app/navigation.ts index 6d4af0ac87d..aeaf586ae0c 100644 --- a/code/frameworks/sveltekit/src/mocks/app/navigation.ts +++ b/code/frameworks/sveltekit/src/mocks/app/navigation.ts @@ -1,12 +1,10 @@ import { getContext, onMount, setContext } from 'svelte'; export async function goto(...args: any[]) { - // try { - // const { action } = await import('@storybook/addon-actions'); - // action('sveltekit.goto')(...args); - // } catch (e) { - // console.log(e); - // } + const event = new CustomEvent('storybook:goto', { + detail: args, + }); + window.dispatchEvent(event); } export function setAfterNavigateArgument(afterNavigateArgs: any) { @@ -27,21 +25,15 @@ export function beforeNavigate() {} export function disableScrollHandling() {} export async function invalidate(...args: any[]) { - // try { - // const { action } = await import('@storybook/addon-actions'); - // action('sveltekit.invalidate')(...args); - // } catch (e) { - // console.log(e); - // } + const event = new CustomEvent('storybook:invalidate', { + detail: args, + }); + window.dispatchEvent(event); } export async function invalidateAll() { - // try { - // const { action } = await import('@storybook/addon-actions'); - // action('sveltekit.invalidateAll')(); - // } catch (e) { - // console.log(e); - // } + const event = new CustomEvent('storybook:invalidateAll'); + window.dispatchEvent(event); } export function preloadCode() {} diff --git a/code/frameworks/sveltekit/src/mocks/app/stores.ts b/code/frameworks/sveltekit/src/mocks/app/stores.ts index bd7ce8e9120..e291f4d42ca 100644 --- a/code/frameworks/sveltekit/src/mocks/app/stores.ts +++ b/code/frameworks/sveltekit/src/mocks/app/stores.ts @@ -18,3 +18,11 @@ function createMockedStore(contextName: string) { export const [page, setPage] = createMockedStore('page-ctx'); export const [navigating, setNavigating] = createMockedStore('navigating-ctx'); export const [updated, setUpdated] = createMockedStore('updated-ctx'); + +export function getStores() { + return { + page, + navigating, + updated, + }; +} diff --git a/code/frameworks/sveltekit/src/preview.ts b/code/frameworks/sveltekit/src/preview.ts index dbb0786be68..09c5578a698 100644 --- a/code/frameworks/sveltekit/src/preview.ts +++ b/code/frameworks/sveltekit/src/preview.ts @@ -1,7 +1,7 @@ import type { Decorator } from '@storybook/svelte'; // eslint-disable-next-line import/no-extraneous-dependencies -import LinkListener from '@storybook/sveltekit/src/components/LinkListener.svelte'; +import SvelteDecorator from '@storybook/sveltekit/src/components/SvelteDecorator.svelte'; import { setDeserializeResponse } from './mocks/app/forms'; import { setAfterNavigateArgument } from './mocks/app/navigation'; import { setNavigating, setPage, setUpdated } from './mocks/app/stores'; @@ -11,9 +11,9 @@ export const decorators: Decorator[] = [ setPage(ctx.parameters?.sveltekit?.stores?.page); setUpdated(ctx.parameters?.sveltekit?.stores?.updated); setNavigating(ctx.parameters?.sveltekit?.stores?.navigating); - setDeserializeResponse(ctx.parameters?.sveltekit?.forms?.deserializeResponse); - setAfterNavigateArgument(ctx.parameters?.sveltekit?.navigation?.afterNavigate); + setDeserializeResponse(ctx.parameters?.sveltekit?.stores?.forms?.deserializeResponse); + setAfterNavigateArgument(ctx.parameters?.sveltekit?.stores?.navigation?.afterNavigate); return Story(); }, - (_, ctx) => ({ Component: LinkListener, props: { ctx } }), + (_, ctx) => ({ Component: SvelteDecorator, props: { ctx } }), ]; From a19c1e43f30cfa520f18b452c97ffb9cc0a41a81 Mon Sep 17 00:00:00 2001 From: paoloricciuti Date: Fri, 10 Nov 2023 16:26:46 +0100 Subject: [PATCH 034/170] add tests --- .../src/components/SvelteDecorator.svelte | 5 +- .../sveltekit/src/mocks/app/forms.ts | 23 ++-- code/frameworks/sveltekit/src/preview.ts | 4 +- .../Forms.svelte | 7 ++ .../Links.svelte | 1 + .../Navigation.svelte | 25 ++++ .../Stores.svelte | 15 +++ .../forms.stories.js | 26 ++++ .../links.stories.js | 26 ++++ .../navigation.stories.js | 83 +++++++++++++ .../stores.stories.js | 116 ++++++++++++++++++ .../Forms.svelte | 7 ++ .../Links.svelte | 1 + .../Navigation.svelte | 25 ++++ .../Stores.svelte | 15 +++ .../forms.stories.js | 26 ++++ .../links.stories.js | 26 ++++ .../navigation.stories.js | 83 +++++++++++++ .../stores.stories.js | 116 ++++++++++++++++++ 19 files changed, 614 insertions(+), 16 deletions(-) create mode 100644 code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Forms.svelte create mode 100644 code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Links.svelte create mode 100644 code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Navigation.svelte create mode 100644 code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Stores.svelte create mode 100644 code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/forms.stories.js create mode 100644 code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/links.stories.js create mode 100644 code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/navigation.stories.js create mode 100644 code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/stores.stories.js create mode 100644 code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Forms.svelte create mode 100644 code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Links.svelte create mode 100644 code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Navigation.svelte create mode 100644 code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Stores.svelte create mode 100644 code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/forms.stories.js create mode 100644 code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/links.stories.js create mode 100644 code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/navigation.stories.js create mode 100644 code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/stores.stories.js diff --git a/code/frameworks/sveltekit/src/components/SvelteDecorator.svelte b/code/frameworks/sveltekit/src/components/SvelteDecorator.svelte index fe337afe181..025ec47e207 100644 --- a/code/frameworks/sveltekit/src/components/SvelteDecorator.svelte +++ b/code/frameworks/sveltekit/src/components/SvelteDecorator.svelte @@ -30,8 +30,9 @@ for(let func of functions){ if(ctx?.parameters?.sveltekit?.[baseModule]?.[func] && ctx.parameters.sveltekit[baseModule][func] instanceof Function){ const listener = ({ detail = [] })=>{ - console.log("event", ctx); - ctx.parameters.sveltekit[baseModule][func](...detail); + console.log("event", func, ctx); + const args = Array.isArray(detail) ? detail : []; + ctx.parameters.sveltekit[baseModule][func](...args); } const eventType = `storybook:${func}`; toRemove.push({ eventType, listener }); diff --git a/code/frameworks/sveltekit/src/mocks/app/forms.ts b/code/frameworks/sveltekit/src/mocks/app/forms.ts index 73a9eaefc04..d1b26867c7d 100644 --- a/code/frameworks/sveltekit/src/mocks/app/forms.ts +++ b/code/frameworks/sveltekit/src/mocks/app/forms.ts @@ -1,16 +1,17 @@ export function enhance(form: HTMLFormElement) { - const event = new CustomEvent('storybook:enhance'); - window.dispatchEvent(event); + const listener = (e: Event) => { + e.preventDefault(); + const event = new CustomEvent('storybook:enhance'); + window.dispatchEvent(event); + }; + form.addEventListener('submit', listener); + return { + destroy() { + form.removeEventListener('submit', listener); + }, + }; } export function applyAction() {} -export function deserialize() { - return deserializeResponse; -} - -let deserializeResponse: any; - -export function setDeserializeResponse(answer: any) { - deserializeResponse = answer; -} +export function deserialize() {} diff --git a/code/frameworks/sveltekit/src/preview.ts b/code/frameworks/sveltekit/src/preview.ts index 09c5578a698..54914221f91 100644 --- a/code/frameworks/sveltekit/src/preview.ts +++ b/code/frameworks/sveltekit/src/preview.ts @@ -2,7 +2,6 @@ import type { Decorator } from '@storybook/svelte'; // eslint-disable-next-line import/no-extraneous-dependencies import SvelteDecorator from '@storybook/sveltekit/src/components/SvelteDecorator.svelte'; -import { setDeserializeResponse } from './mocks/app/forms'; import { setAfterNavigateArgument } from './mocks/app/navigation'; import { setNavigating, setPage, setUpdated } from './mocks/app/stores'; @@ -11,8 +10,7 @@ export const decorators: Decorator[] = [ setPage(ctx.parameters?.sveltekit?.stores?.page); setUpdated(ctx.parameters?.sveltekit?.stores?.updated); setNavigating(ctx.parameters?.sveltekit?.stores?.navigating); - setDeserializeResponse(ctx.parameters?.sveltekit?.stores?.forms?.deserializeResponse); - setAfterNavigateArgument(ctx.parameters?.sveltekit?.stores?.navigation?.afterNavigate); + setAfterNavigateArgument(ctx.parameters?.sveltekit?.navigation?.afterNavigate); return Story(); }, (_, ctx) => ({ Component: SvelteDecorator, props: { ctx } }), diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Forms.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Forms.svelte new file mode 100644 index 00000000000..371a17656be --- /dev/null +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Forms.svelte @@ -0,0 +1,7 @@ + + +
+ +
\ No newline at end of file diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Links.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Links.svelte new file mode 100644 index 00000000000..3470b6b0e6f --- /dev/null +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Links.svelte @@ -0,0 +1 @@ +Storybook \ No newline at end of file diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Navigation.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Navigation.svelte new file mode 100644 index 00000000000..d97b6fe8a2d --- /dev/null +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Navigation.svelte @@ -0,0 +1,25 @@ + + + + + + + diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Stores.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Stores.svelte new file mode 100644 index 00000000000..479239610a6 --- /dev/null +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Stores.svelte @@ -0,0 +1,15 @@ + + +

Directly importing

+
{JSON.stringify($page, null, 2)}
+
{JSON.stringify($navigating, null, 2)}
+
{JSON.stringify($updated, null, 2)}
+ +

With getStores

+
{JSON.stringify($pageStore, null, 2)}
+
{JSON.stringify($navigatingStore, null, 2)}
+
{JSON.stringify($updatedStore, null, 2)}
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/forms.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/forms.stories.js new file mode 100644 index 00000000000..fadda8554ac --- /dev/null +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/forms.stories.js @@ -0,0 +1,26 @@ +import { expect, fn, within } from '@storybook/test'; +import Forms from './Forms.svelte'; + +export default { + title: 'stories/sveltekit/modules/Forms', + component: Forms, + tags: ['autodocs'], +}; + +const enhance = fn(); + +export const Enhance = { + async play({ canvasElement }) { + const canvas = within(canvasElement); + const button = canvas.getByText('enhance'); + button.click(); + expect(enhance).toHaveBeenCalled(); + }, + parameters: { + sveltekit: { + forms: { + enhance, + }, + }, + }, +}; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/links.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/links.stories.js new file mode 100644 index 00000000000..c293245fc69 --- /dev/null +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/links.stories.js @@ -0,0 +1,26 @@ +import { expect, fn, within } from '@storybook/test'; +import Links from './Links.svelte'; + +export default { + title: 'stories/sveltekit/modules/Links', + component: Links, + tags: ['autodocs'], +}; + +const link = fn(); + +export const Link = { + async play({ canvasElement }) { + const canvas = within(canvasElement); + const button = canvas.getByText('Storybook'); + button.click(); + expect(link).toHaveBeenCalled(); + }, + parameters: { + sveltekit: { + linkOverrides: { + '/storybook': link, + }, + }, + }, +}; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/navigation.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/navigation.stories.js new file mode 100644 index 00000000000..14fe338749f --- /dev/null +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/navigation.stories.js @@ -0,0 +1,83 @@ +import { expect, fn, within } from '@storybook/test'; +import Navigation from './Navigation.svelte'; + +export default { + title: 'stories/sveltekit/modules/Navigation', + component: Navigation, + tags: ['autodocs'], +}; + +const goto = fn(); + +export const Goto = { + async play({ canvasElement }) { + const canvas = within(canvasElement); + const button = canvas.getByText('goto'); + button.click(); + expect(goto).toHaveBeenCalledWith('/storybook'); + }, + parameters: { + sveltekit: { + navigation: { + goto, + }, + }, + }, +}; + +const invalidate = fn(); + +export const Invalidate = { + async play({ canvasElement }) { + const canvas = within(canvasElement); + const button = canvas.getByText('invalidate', { exact: true }); + button.click(); + expect(invalidate).toHaveBeenCalledWith('/storybook'); + }, + parameters: { + sveltekit: { + navigation: { + invalidate, + }, + }, + }, +}; + +const invalidateAll = fn(); + +export const InvalidateAll = { + async play({ canvasElement }) { + const canvas = within(canvasElement); + const button = canvas.getByText('invalidateAll'); + button.click(); + console.log({ button }); + expect(invalidateAll).toHaveBeenCalledWith(); + }, + parameters: { + sveltekit: { + navigation: { + invalidateAll, + }, + }, + }, +}; + +const afterNavigateFn = fn(); + +export const AfterNavigate = { + async play() { + expect(afterNavigateFn).toHaveBeenCalledWith({ test: 'passed' }); + }, + args: { + afterNavigateFn, + }, + parameters: { + sveltekit: { + navigation: { + afterNavigate: { + test: 'passed', + }, + }, + }, + }, +}; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/stores.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/stores.stories.js new file mode 100644 index 00000000000..9ad83fe1bd8 --- /dev/null +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/stores.stories.js @@ -0,0 +1,116 @@ +import Stores from './Stores.svelte'; + +export default { + title: 'stories/sveltekit/modules/Stores', + component: Stores, + tags: ['autodocs'], +}; + +export const AllUndefined = {}; + +export const PageStore = { + parameters: { + sveltekit: { + stores: { + page: { + data: { + test: 'passed', + }, + }, + }, + }, + }, +}; + +export const NavigatingStore = { + parameters: { + sveltekit: { + stores: { + navigating: { + route: { + id: '/storybook', + }, + }, + }, + }, + }, +}; + +export const UpdatedStore = { + parameters: { + sveltekit: { + stores: { + updated: true, + }, + }, + }, +}; + +export const PageAndNavigatingStore = { + parameters: { + sveltekit: { + stores: { + page: { + data: { + test: 'passed', + }, + }, + navigating: { + route: { + id: '/storybook', + }, + }, + }, + }, + }, +}; + +export const PageAndUpdatedStore = { + parameters: { + sveltekit: { + stores: { + page: { + data: { + test: 'passed', + }, + }, + updated: true, + }, + }, + }, +}; + +export const NavigatingAndUpdatedStore = { + parameters: { + sveltekit: { + stores: { + navigating: { + route: { + id: '/storybook', + }, + }, + updated: true, + }, + }, + }, +}; + +export const AllThreeStores = { + parameters: { + sveltekit: { + stores: { + page: { + data: { + test: 'passed', + }, + }, + navigating: { + route: { + id: '/storybook', + }, + }, + updated: true, + }, + }, + }, +}; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Forms.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Forms.svelte new file mode 100644 index 00000000000..371a17656be --- /dev/null +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Forms.svelte @@ -0,0 +1,7 @@ + + +
+ +
\ No newline at end of file diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Links.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Links.svelte new file mode 100644 index 00000000000..3470b6b0e6f --- /dev/null +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Links.svelte @@ -0,0 +1 @@ +Storybook \ No newline at end of file diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Navigation.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Navigation.svelte new file mode 100644 index 00000000000..d97b6fe8a2d --- /dev/null +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Navigation.svelte @@ -0,0 +1,25 @@ + + + + + + + diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Stores.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Stores.svelte new file mode 100644 index 00000000000..479239610a6 --- /dev/null +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Stores.svelte @@ -0,0 +1,15 @@ + + +

Directly importing

+
{JSON.stringify($page, null, 2)}
+
{JSON.stringify($navigating, null, 2)}
+
{JSON.stringify($updated, null, 2)}
+ +

With getStores

+
{JSON.stringify($pageStore, null, 2)}
+
{JSON.stringify($navigatingStore, null, 2)}
+
{JSON.stringify($updatedStore, null, 2)}
diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/forms.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/forms.stories.js new file mode 100644 index 00000000000..fadda8554ac --- /dev/null +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/forms.stories.js @@ -0,0 +1,26 @@ +import { expect, fn, within } from '@storybook/test'; +import Forms from './Forms.svelte'; + +export default { + title: 'stories/sveltekit/modules/Forms', + component: Forms, + tags: ['autodocs'], +}; + +const enhance = fn(); + +export const Enhance = { + async play({ canvasElement }) { + const canvas = within(canvasElement); + const button = canvas.getByText('enhance'); + button.click(); + expect(enhance).toHaveBeenCalled(); + }, + parameters: { + sveltekit: { + forms: { + enhance, + }, + }, + }, +}; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/links.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/links.stories.js new file mode 100644 index 00000000000..c293245fc69 --- /dev/null +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/links.stories.js @@ -0,0 +1,26 @@ +import { expect, fn, within } from '@storybook/test'; +import Links from './Links.svelte'; + +export default { + title: 'stories/sveltekit/modules/Links', + component: Links, + tags: ['autodocs'], +}; + +const link = fn(); + +export const Link = { + async play({ canvasElement }) { + const canvas = within(canvasElement); + const button = canvas.getByText('Storybook'); + button.click(); + expect(link).toHaveBeenCalled(); + }, + parameters: { + sveltekit: { + linkOverrides: { + '/storybook': link, + }, + }, + }, +}; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/navigation.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/navigation.stories.js new file mode 100644 index 00000000000..14fe338749f --- /dev/null +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/navigation.stories.js @@ -0,0 +1,83 @@ +import { expect, fn, within } from '@storybook/test'; +import Navigation from './Navigation.svelte'; + +export default { + title: 'stories/sveltekit/modules/Navigation', + component: Navigation, + tags: ['autodocs'], +}; + +const goto = fn(); + +export const Goto = { + async play({ canvasElement }) { + const canvas = within(canvasElement); + const button = canvas.getByText('goto'); + button.click(); + expect(goto).toHaveBeenCalledWith('/storybook'); + }, + parameters: { + sveltekit: { + navigation: { + goto, + }, + }, + }, +}; + +const invalidate = fn(); + +export const Invalidate = { + async play({ canvasElement }) { + const canvas = within(canvasElement); + const button = canvas.getByText('invalidate', { exact: true }); + button.click(); + expect(invalidate).toHaveBeenCalledWith('/storybook'); + }, + parameters: { + sveltekit: { + navigation: { + invalidate, + }, + }, + }, +}; + +const invalidateAll = fn(); + +export const InvalidateAll = { + async play({ canvasElement }) { + const canvas = within(canvasElement); + const button = canvas.getByText('invalidateAll'); + button.click(); + console.log({ button }); + expect(invalidateAll).toHaveBeenCalledWith(); + }, + parameters: { + sveltekit: { + navigation: { + invalidateAll, + }, + }, + }, +}; + +const afterNavigateFn = fn(); + +export const AfterNavigate = { + async play() { + expect(afterNavigateFn).toHaveBeenCalledWith({ test: 'passed' }); + }, + args: { + afterNavigateFn, + }, + parameters: { + sveltekit: { + navigation: { + afterNavigate: { + test: 'passed', + }, + }, + }, + }, +}; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/stores.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/stores.stories.js new file mode 100644 index 00000000000..9ad83fe1bd8 --- /dev/null +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/stores.stories.js @@ -0,0 +1,116 @@ +import Stores from './Stores.svelte'; + +export default { + title: 'stories/sveltekit/modules/Stores', + component: Stores, + tags: ['autodocs'], +}; + +export const AllUndefined = {}; + +export const PageStore = { + parameters: { + sveltekit: { + stores: { + page: { + data: { + test: 'passed', + }, + }, + }, + }, + }, +}; + +export const NavigatingStore = { + parameters: { + sveltekit: { + stores: { + navigating: { + route: { + id: '/storybook', + }, + }, + }, + }, + }, +}; + +export const UpdatedStore = { + parameters: { + sveltekit: { + stores: { + updated: true, + }, + }, + }, +}; + +export const PageAndNavigatingStore = { + parameters: { + sveltekit: { + stores: { + page: { + data: { + test: 'passed', + }, + }, + navigating: { + route: { + id: '/storybook', + }, + }, + }, + }, + }, +}; + +export const PageAndUpdatedStore = { + parameters: { + sveltekit: { + stores: { + page: { + data: { + test: 'passed', + }, + }, + updated: true, + }, + }, + }, +}; + +export const NavigatingAndUpdatedStore = { + parameters: { + sveltekit: { + stores: { + navigating: { + route: { + id: '/storybook', + }, + }, + updated: true, + }, + }, + }, +}; + +export const AllThreeStores = { + parameters: { + sveltekit: { + stores: { + page: { + data: { + test: 'passed', + }, + }, + navigating: { + route: { + id: '/storybook', + }, + }, + updated: true, + }, + }, + }, +}; From a42fc78297d4b7a65ab17d284a8a5134aad7b4af Mon Sep 17 00:00:00 2001 From: paoloricciuti Date: Fri, 10 Nov 2023 16:52:24 +0100 Subject: [PATCH 035/170] add check field to update store and write README --- code/frameworks/sveltekit/README.md | 49 +++++++++++++++++-- .../sveltekit/src/mocks/app/stores.ts | 8 ++- .../Stores.svelte | 2 + .../Stores.svelte | 2 + 4 files changed, 57 insertions(+), 4 deletions(-) diff --git a/code/frameworks/sveltekit/README.md b/code/frameworks/sveltekit/README.md index fd103c8764b..45ba5759237 100644 --- a/code/frameworks/sveltekit/README.md +++ b/code/frameworks/sveltekit/README.md @@ -26,10 +26,10 @@ However SvelteKit has some [Kit-specific modules](https://kit.svelte.dev/docs/mo | **Module** | **Status** | **Note** | | ---------------------------------------------------------------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | [`$app/environment`](https://kit.svelte.dev/docs/modules#$app-environment) | āœ… Supported | `version` is always empty in Storybook. | -| [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms) | ā³ Future | Will use mocks. Tracked in [#20999](https://github.com/storybookjs/storybook/issues/20999) | -| [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation) | ā³ Future | Will use mocks. Tracked in [#20999](https://github.com/storybookjs/storybook/issues/20999) | +| [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms) | āœ… Supported | See [How to mock](#how-to-mock) | +| [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation) | āœ… Supported | See [How to mock](#how-to-mock) | | [`$app/paths`](https://kit.svelte.dev/docs/modules#$app-paths) | āœ… Supported | Requires SvelteKit 1.4.0 or newer | -| [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores) | āœ… Supported | Mocks planned, so you can set different store values per story. | +| [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores) | āœ… Supported | See [How to mock](#how-to-mock) | | [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private) | ā›” Not supported | They are meant to only be available server-side, and Storybook renders all components on the client. | | [`$env/dynamic/public`](https://kit.svelte.dev/docs/modules#$env-dynamic-public) | šŸš§ Partially supported | Only supported in development mode. Storybook is built as a static app with no server-side API so cannot dynamically serve content. | | [`$env/static/private`](https://kit.svelte.dev/docs/modules#$env-static-private) | ā›” Not supported | They are meant to only be available server-side, and Storybook renders all components on the client. | @@ -125,3 +125,46 @@ You'll experience this if anything in your story is importing from `$app/forms` ## Acknowledgements Integrating with SvelteKit would not have been possible if it weren't for the fantastic efforts by the Svelte core team - especially [Ben McCann](https://twitter.com/benjaminmccann) - to make integrations with the wider ecosystem possible. + +## How to mock + +To mock a SvelteKit import you can make use of the `parameters.sveltekit` object either on the `Story`, on the `Template` or on the `Meta` + +```ts +export const MyStory = { + parameters: { + sveltekit: { + stores: { + page: { + data: { + test: 'passed', + }, + }, + navigating: { + route: { + id: '/storybook', + }, + }, + updated: true, + }, + }, + }, +}; +``` + +on this object you can add the name of the module you are mocking (in the example above we are mocking the `stores` module which correspond to `$app/stores`) and than pass the following kind of objects + +| Module | Path in parameters | Kind of objects | +| ----------------------------------------------- | ----------------------------------------------- | -------------------------------------------------------------------------------------------------- | +| import { page } from "$app/stores" | `parameters.sveltekit.stores.page` | A Partial of the page store | +| import { navigating } from "$app/stores" | `parameters.sveltekit.stores.navigating` | A Partial of the navigating store | +| import { updated } from "$app/stores" | `parameters.sveltekit.stores.updated` | A boolean representing the value of updated (you can also access `check()` which will be a noop) | +| import { goto } from "$app/navigation" | `parameters.sveltekit.navigation.goto` | A callback that will be called whenever goto is called | +| import { invalidate } from "$app/navigation" | `parameters.sveltekit.navigation.invalidate` | A callback that will be called whenever invalidate is called | +| import { invalidateAll } from "$app/navigation" | `parameters.sveltekit.navigation.invalidateAll` | A callback that will be called whenever invalidateAll is called | +| import { afterNavigate } from "$app/navigation" | `parameters.sveltekit.navigation.afterNavigate` | An object that will be passed to the afterNavigate function (which will be invoked onMount) called | +| import { enhance } from "$app/forms" | `parameters.sveltekit.forms.enhance` | A callback that will called when a form with `use:enhance` is submitted | + +All the other functions are still exported as `noop` from the mocked modules so that your application will still work. There was no way of make them work in a customizable way. + +Additionally you can pass an object to `parameter.sveltekit.linkOverrides` where the keys are regex representing a link and the values are functions. If you have an `` tag inside your code with the `href` attribute that matches one or more regex the corresponding function will be called. diff --git a/code/frameworks/sveltekit/src/mocks/app/stores.ts b/code/frameworks/sveltekit/src/mocks/app/stores.ts index e291f4d42ca..56c9babaf93 100644 --- a/code/frameworks/sveltekit/src/mocks/app/stores.ts +++ b/code/frameworks/sveltekit/src/mocks/app/stores.ts @@ -17,7 +17,13 @@ function createMockedStore(contextName: string) { export const [page, setPage] = createMockedStore('page-ctx'); export const [navigating, setNavigating] = createMockedStore('navigating-ctx'); -export const [updated, setUpdated] = createMockedStore('updated-ctx'); +const [updated, setUpdated] = createMockedStore('updated-ctx'); + +Object.defineProperty(updated, 'check', { + value: () => {}, +}); + +export { updated, setUpdated }; export function getStores() { return { diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Stores.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Stores.svelte index 479239610a6..164b00f7fa8 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Stores.svelte +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Stores.svelte @@ -2,6 +2,8 @@ import { page, navigating, updated, getStores } from '$app/stores'; let { navigating: navigatingStore, page: pageStore, updated: updatedStore } = getStores(); + + updated.check();

Directly importing

diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Stores.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Stores.svelte index 479239610a6..164b00f7fa8 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Stores.svelte +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Stores.svelte @@ -2,6 +2,8 @@ import { page, navigating, updated, getStores } from '$app/stores'; let { navigating: navigatingStore, page: pageStore, updated: updatedStore } = getStores(); + + updated.check();

Directly importing

From e184135475d78e3c00ebe718fd7510aa99d4dcb5 Mon Sep 17 00:00:00 2001 From: paoloricciuti Date: Fri, 10 Nov 2023 20:56:28 +0100 Subject: [PATCH 036/170] add components to files --- code/frameworks/sveltekit/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index afa20320e9b..5bcb60c7d5e 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -54,7 +54,6 @@ "README.md", "*.js", "*.d.ts", - "!src/**/*", "src/components/**/*" ], "scripts": { From adc9704dfcb40bc1c04ad763ab6170d428400000 Mon Sep 17 00:00:00 2001 From: paoloricciuti Date: Fri, 10 Nov 2023 21:14:44 +0100 Subject: [PATCH 037/170] add mocks files to files --- code/frameworks/sveltekit/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 5bcb60c7d5e..fe6bffb011f 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -54,7 +54,8 @@ "README.md", "*.js", "*.d.ts", - "src/components/**/*" + "src/components/**/*", + "src/mocks/**/*" ], "scripts": { "check": "../../../scripts/prepare/check.ts", From dddc1c9363a0e2604b89d23b4cd9c8feca91aa08 Mon Sep 17 00:00:00 2001 From: paoloricciuti Date: Fri, 10 Nov 2023 21:48:40 +0100 Subject: [PATCH 038/170] remove logs + fix afternavigate tests --- .../sveltekit/src/components/SvelteDecorator.svelte | 1 - code/frameworks/sveltekit/src/mocks/app/navigation.ts | 4 +++- .../stories_svelte-kit-skeleton-js/Navigation.svelte | 5 +++-- .../stories_svelte-kit-skeleton-js/navigation.stories.js | 1 - .../stories_svelte-kit-skeleton-ts/navigation.stories.js | 1 - 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/code/frameworks/sveltekit/src/components/SvelteDecorator.svelte b/code/frameworks/sveltekit/src/components/SvelteDecorator.svelte index 025ec47e207..04654a64e3a 100644 --- a/code/frameworks/sveltekit/src/components/SvelteDecorator.svelte +++ b/code/frameworks/sveltekit/src/components/SvelteDecorator.svelte @@ -30,7 +30,6 @@ for(let func of functions){ if(ctx?.parameters?.sveltekit?.[baseModule]?.[func] && ctx.parameters.sveltekit[baseModule][func] instanceof Function){ const listener = ({ detail = [] })=>{ - console.log("event", func, ctx); const args = Array.isArray(detail) ? detail : []; ctx.parameters.sveltekit[baseModule][func](...args); } diff --git a/code/frameworks/sveltekit/src/mocks/app/navigation.ts b/code/frameworks/sveltekit/src/mocks/app/navigation.ts index aeaf586ae0c..8d23ddbea46 100644 --- a/code/frameworks/sveltekit/src/mocks/app/navigation.ts +++ b/code/frameworks/sveltekit/src/mocks/app/navigation.ts @@ -14,7 +14,9 @@ export function setAfterNavigateArgument(afterNavigateArgs: any) { export function afterNavigate(cb: any) { const argument = getContext('after-navigate-args'); onMount(() => { - cb(argument); + if (cb && cb instanceof Function) { + cb(argument); + } }); } diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Navigation.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Navigation.svelte index d97b6fe8a2d..f857ae36a84 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Navigation.svelte +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Navigation.svelte @@ -2,8 +2,9 @@ import { goto, invalidate, invalidateAll, afterNavigate } from '$app/navigation'; export let afterNavigateFn; - - afterNavigate(afterNavigateFn); + if(afterNavigateFn){ + afterNavigate(afterNavigateFn); + } ); }; - -Button.propTypes = { - /** - * Is this the principal call to action on the page? - */ - primary: PropTypes.bool, - /** - * What background color to use - */ - backgroundColor: PropTypes.string, - /** - * How large should the button be? - */ - size: PropTypes.oneOf(['small', 'medium', 'large']), - /** - * Button contents - */ - label: PropTypes.string.isRequired, - /** - * Optional click handler - */ - onClick: PropTypes.func, -}; - -Button.defaultProps = { - backgroundColor: null, - primary: false, - size: 'medium', - onClick: undefined, -}; diff --git a/code/renderers/preact/template/cli/Header.jsx b/code/renderers/preact/template/cli/Header.jsx index 8a722e57d33..c87a04c4837 100644 --- a/code/renderers/preact/template/cli/Header.jsx +++ b/code/renderers/preact/template/cli/Header.jsx @@ -1,9 +1,16 @@ -import PropTypes from 'prop-types'; - import { Button } from './Button'; import './header.css'; -export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => ( +/** + * Header component + * @param {object} props + * @param {object} [props.user] + * @param {string} props.user.name + * @param {function} props.onLogin + * @param {function} props.onLogout + * @param {function} props.onCreateAccount + */ +export const Header = ({ user = null, onLogin, onLogout, onCreateAccount }) => (
@@ -43,16 +50,3 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => (
); - -Header.propTypes = { - user: PropTypes.shape({ - name: PropTypes.string.isRequired, - }), - onLogin: PropTypes.func.isRequired, - onLogout: PropTypes.func.isRequired, - onCreateAccount: PropTypes.func.isRequired, -}; - -Header.defaultProps = { - user: null, -}; diff --git a/code/renderers/preact/template/cli/Page.jsx b/code/renderers/preact/template/cli/Page.jsx index 12ca119d0b0..a5bc82d9d10 100644 --- a/code/renderers/preact/template/cli/Page.jsx +++ b/code/renderers/preact/template/cli/Page.jsx @@ -2,6 +2,9 @@ import { useState } from 'preact/hooks'; import { Header } from './Header'; import './page.css'; +/** + * Simple page component + */ export const Page = () => { const [user, setUser] = useState(); diff --git a/code/renderers/preact/template/components/Button.jsx b/code/renderers/preact/template/components/Button.jsx index cd3c13987c3..e79f89f5d4b 100644 --- a/code/renderers/preact/template/components/Button.jsx +++ b/code/renderers/preact/template/components/Button.jsx @@ -1,14 +1,11 @@ -/* eslint-disable react/react-in-jsx-scope */ -// eslint-disable-next-line import/no-extraneous-dependencies -import PropTypes from 'prop-types'; - +/** + * Button component + * @param {object} props + * @param {string} props.label + * @param {function} props.onClick + */ export const Button = ({ onClick, label }) => ( ); - -Button.propTypes = { - onClick: PropTypes.func.isRequired, - label: PropTypes.node.isRequired, -}; diff --git a/code/renderers/preact/template/components/Form.jsx b/code/renderers/preact/template/components/Form.jsx index fb58cbb1050..b2283d26ac1 100644 --- a/code/renderers/preact/template/components/Form.jsx +++ b/code/renderers/preact/template/components/Form.jsx @@ -1,8 +1,14 @@ -/* eslint-disable react/react-in-jsx-scope */ -// eslint-disable-next-line import/no-extraneous-dependencies -import PropTypes from 'prop-types'; import { useState } from 'preact/hooks'; +/** + * Header component + * @param {object} props + * @param {object} [props.user] + * @param {string} props.user.name + * @param {function} props.onLogin + * @param {function} props.onLogout + * @param {function} props.onCreateAccount + */ export const Form = ({ onSuccess }) => { const [value, setValue] = useState(''); const [complete, setComplete] = useState(false); @@ -32,7 +38,3 @@ export const Form = ({ onSuccess }) => { ); }; - -Form.propTypes = { - onSuccess: PropTypes.func.isRequired, -}; diff --git a/code/renderers/preact/template/components/Html.jsx b/code/renderers/preact/template/components/Html.jsx index 36cff821889..b2c1f966f9e 100644 --- a/code/renderers/preact/template/components/Html.jsx +++ b/code/renderers/preact/template/components/Html.jsx @@ -1,10 +1 @@ -/* eslint-disable react/react-in-jsx-scope */ -// eslint-disable-next-line import/no-extraneous-dependencies -import PropTypes from 'prop-types'; - -// eslint-disable-next-line react/no-danger export const Html = ({ content }) =>
; - -Html.propTypes = { - content: PropTypes.string.isRequired, -}; diff --git a/code/renderers/preact/template/components/Pre.jsx b/code/renderers/preact/template/components/Pre.jsx index 7efec93be9d..3bf143581fa 100644 --- a/code/renderers/preact/template/components/Pre.jsx +++ b/code/renderers/preact/template/components/Pre.jsx @@ -1,21 +1,12 @@ -/* eslint-disable react/react-in-jsx-scope */ -// eslint-disable-next-line import/no-extraneous-dependencies -import PropTypes from 'prop-types'; - +/** + * Pre component + * @param {object} props + * @param {object} [props.style] + * @param {object} [props.object] + * @param {string} [props.text] + */ export const Pre = ({ style, object, text }) => ( 
     {object ? JSON.stringify(object, null, 2) : text}
); - -Pre.propTypes = { - style: PropTypes.shape({}), - object: PropTypes.shape({}), - text: PropTypes.string, -}; - -Pre.defaultProps = { - style: {}, - object: null, - text: '', -}; diff --git a/code/renderers/preact/template/stories/React.js b/code/renderers/preact/template/stories/React.js index 0c72668ebe7..1d1fa97c55d 100644 --- a/code/renderers/preact/template/stories/React.js +++ b/code/renderers/preact/template/stories/React.js @@ -1,8 +1,11 @@ // eslint-disable-next-line import/no-extraneous-dependencies import React from 'react'; -// eslint-disable-next-line import/no-extraneous-dependencies -import PropTypes from 'prop-types'; +/** + * ReactFunctionalComponent component + * @param {object} props + * @param {string} props.label + */ export const ReactFunctionalComponent = ({ label }) => { const [clicks, setValue] = React.useState(0); return ( @@ -19,10 +22,11 @@ export const ReactFunctionalComponent = ({ label }) => { ); }; -ReactFunctionalComponent.propTypes = { - label: PropTypes.string.isRequired, -}; - +/** + * ReactClassComponent component + * @param {object} props + * @param {string} props.label + */ export class ReactClassComponent extends React.Component { state = { clicks: 0, @@ -45,7 +49,3 @@ export class ReactClassComponent extends React.Component { ); } } - -ReactClassComponent.propTypes = { - label: PropTypes.string.isRequired, -}; diff --git a/code/renderers/preact/template/stories/react-compat.stories.js b/code/renderers/preact/template/stories/react-compat.stories.js index b7895c1e8d0..33f1078d315 100644 --- a/code/renderers/preact/template/stories/react-compat.stories.js +++ b/code/renderers/preact/template/stories/react-compat.stories.js @@ -1,4 +1,3 @@ -/* eslint-disable react/react-in-jsx-scope */ import { ReactFunctionalComponent, ReactClassComponent } from './React'; export default { diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index ddd73d9a38e..3d28936a3e6 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -59,6 +59,7 @@ "@storybook/preview-api": "workspace:*", "@storybook/types": "workspace:*", "sveltedoc-parser": "^4.2.1", + "ts-dedent": "^2.0.0", "type-fest": "~2.19" }, "devDependencies": { diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index 0278119e1f0..7372f1f136f 100644 --- a/code/ui/manager/package.json +++ b/code/ui/manager/package.json @@ -24,12 +24,17 @@ "types": "./dist/index.d.ts", "import": "./dist/index.js" }, - "./dist/runtime": { + "./runtime": { "types": "./dist/runtime.d.ts", "import": "./dist/runtime.js" }, - "./dist/globals": { + "./globals-module-info": { + "types": "./dist/globals-module-info.d.ts", + "require": "./dist/globals-module-info.js" + }, + "./globals": { "types": "./dist/globals.d.ts", + "import": "./dist/globals.js", "require": "./dist/globals.js" }, "./paths": "./paths.js", @@ -38,6 +43,22 @@ "main": "dist/index.js", "module": "dist/index.js", "types": "dist/index.d.ts", + "typesVersions": { + "*": { + "*": [ + "dist/index.d.ts" + ], + "runtime": [ + "dist/runtime.d.ts" + ], + "globals": [ + "dist/globals.d.ts" + ], + "globals-module-info": [ + "dist/globals-module-info.d.ts" + ] + } + }, "files": [ "dist/**/*", "static/**/*", @@ -97,7 +118,8 @@ "./src/runtime.ts" ], "nodeEntries": [ - "./src/globals.ts" + "./src/globals.ts", + "./src/globals-module-info.ts" ] }, "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17" diff --git a/code/ui/manager/scripts/generate-exports-file.ts b/code/ui/manager/scripts/generate-exports-file.ts index afdbea8ff6e..ece5ac50391 100644 --- a/code/ui/manager/scripts/generate-exports-file.ts +++ b/code/ui/manager/scripts/generate-exports-file.ts @@ -3,7 +3,7 @@ import fs from 'fs-extra'; import path from 'path'; import { dedent } from 'ts-dedent'; import { ESLint } from '../../../../scripts/node_modules/eslint'; -import { values } from '../src/globals/runtime'; +import { globalsNameValueMap } from '../src/globals/runtime'; const location = path.join(__dirname, '..', 'src', 'globals', 'exports.ts'); let attempts = 0; @@ -29,10 +29,13 @@ async function generate(text: string) { } const run = async () => { - const data = Object.entries(values).reduce>((acc, [key, value]) => { - acc[key] = Object.keys(value).filter(removeDefault); - return acc; - }, {}); + const data = Object.entries(globalsNameValueMap).reduce>( + (acc, [key, value]) => { + acc[key] = Object.keys(value).filter(removeDefault); + return acc; + }, + {} + ); console.log('Generating...'); diff --git a/code/ui/manager/src/globals-module-info.ts b/code/ui/manager/src/globals-module-info.ts new file mode 100644 index 00000000000..4bcbf259af7 --- /dev/null +++ b/code/ui/manager/src/globals-module-info.ts @@ -0,0 +1 @@ +export * from './globals/globals-module-info'; diff --git a/code/ui/manager/src/globals.ts b/code/ui/manager/src/globals.ts index d516acc5551..3b9b2321b6f 100644 --- a/code/ui/manager/src/globals.ts +++ b/code/ui/manager/src/globals.ts @@ -1 +1 @@ -export * from './globals/definitions'; +export * from './globals/globals'; diff --git a/code/ui/manager/src/globals/exports.ts b/code/ui/manager/src/globals/exports.ts index ef2523f0e06..f56ba153dd8 100644 --- a/code/ui/manager/src/globals/exports.ts +++ b/code/ui/manager/src/globals/exports.ts @@ -278,4 +278,5 @@ export default { ], '@storybook/addons': ['addons', 'types', 'mockChannel'], '@storybook/client-logger': ['deprecate', 'logger', 'once', 'pretty'], + '@storybook/types': ['Addon_TypesEnum'], } as const; diff --git a/code/ui/manager/src/globals/definitions.ts b/code/ui/manager/src/globals/globals-module-info.ts similarity index 65% rename from code/ui/manager/src/globals/definitions.ts rename to code/ui/manager/src/globals/globals-module-info.ts index 9122fca7026..616148e80ca 100644 --- a/code/ui/manager/src/globals/definitions.ts +++ b/code/ui/manager/src/globals/globals-module-info.ts @@ -1,7 +1,6 @@ import type { ModuleInfo } from '@fal-works/esbuild-plugin-global-externals'; import Exports from './exports'; -import { Keys } from './types'; -import type { Definitions } from './types'; +import { globalPackages, globalsNameReferenceMap } from './globals'; /* * We create a map of a module's name to a ModuleInfo. @@ -18,18 +17,16 @@ import type { Definitions } from './types'; * * If you forget to do either, TypeScript will complain. * - * This `definitions.ts` file is consumed by the `builder-manager` package, + * This `globals-module-info.ts` file is consumed by the `builder-manager` package, * The `runtime.ts` file is used inside the manager's browser code runtime. */ -const createModuleInfo = (m: keyof typeof Keys): Required => ({ - type: 'esm', - varName: Keys[m], - namedExports: Exports[m], - defaultExport: true, -}); - -export const definitions = Object.keys(Keys).reduce((acc, key) => { - acc[key as keyof typeof Keys] = createModuleInfo(key as keyof typeof Keys); +export const globalsModuleInfoMap = globalPackages.reduce((acc, key) => { + acc[key] = { + type: 'esm', + varName: globalsNameReferenceMap[key], + namedExports: Exports[key], + defaultExport: true, + }; return acc; -}, {} as Definitions); +}, {} as Required>>); diff --git a/code/ui/manager/src/globals/globals.ts b/code/ui/manager/src/globals/globals.ts new file mode 100644 index 00000000000..1ef93c38bc9 --- /dev/null +++ b/code/ui/manager/src/globals/globals.ts @@ -0,0 +1,19 @@ +// Here we map the name of a module to their REFERENCE in the global scope. +export const globalsNameReferenceMap = { + react: '__REACT__', + 'react-dom': '__REACT_DOM__', + '@storybook/components': '__STORYBOOK_COMPONENTS__', + '@storybook/channels': '__STORYBOOK_CHANNELS__', + '@storybook/core-events': '__STORYBOOK_CORE_EVENTS__', + '@storybook/router': '__STORYBOOK_ROUTER__', + '@storybook/theming': '__STORYBOOK_THEMING__', + '@storybook/api': '__STORYBOOK_API__', // deprecated, remove in 8.0 + '@storybook/manager-api': '__STORYBOOK_API__', + '@storybook/addons': '__STORYBOOK_ADDONS__', + '@storybook/client-logger': '__STORYBOOK_CLIENT_LOGGER__', + '@storybook/types': '__STORYBOOK_TYPES__', +} as const; + +export const globalPackages = Object.keys(globalsNameReferenceMap) as Array< + keyof typeof globalsNameReferenceMap +>; diff --git a/code/ui/manager/src/globals/runtime.ts b/code/ui/manager/src/globals/runtime.ts index 5850699f171..59f5f8fc1a0 100644 --- a/code/ui/manager/src/globals/runtime.ts +++ b/code/ui/manager/src/globals/runtime.ts @@ -1,32 +1,34 @@ import * as REACT from 'react'; -import * as REACTDOM from 'react-dom'; +import * as REACT_DOM from 'react-dom'; -import * as STORYBOOKCOMPONENTS from '@storybook/components'; -import * as STORYBOOKCHANNELS from '@storybook/channels'; -import * as STORYBOOKEVENTS from '@storybook/core-events'; -import * as STORYBOOKROUTER from '@storybook/router'; -import * as STORYBOOKTHEMING from '@storybook/theming'; -import * as STORYBOOKMANAGERAPI from '@storybook/manager-api'; -import * as STORYBOOKCLIENTLOGGER from '@storybook/client-logger'; +import * as COMPONENTS from '@storybook/components'; +import * as CHANNELS from '@storybook/channels'; +import * as EVENTS from '@storybook/core-events'; +import * as ROUTER from '@storybook/router'; +import * as THEMING from '@storybook/theming'; +import * as MANAGER_API from '@storybook/manager-api'; +import * as TYPES from '@storybook/types'; +import * as CLIENT_LOGGER from '@storybook/client-logger'; -import type { Keys } from './types'; +import type { globalsNameReferenceMap } from './globals'; // Here we map the name of a module to their VALUE in the global scope. -export const values: Required> = { - react: REACT as any, - 'react-dom': REACTDOM, - '@storybook/components': STORYBOOKCOMPONENTS, - '@storybook/channels': STORYBOOKCHANNELS, - '@storybook/core-events': STORYBOOKEVENTS, - '@storybook/router': STORYBOOKROUTER, - '@storybook/theming': STORYBOOKTHEMING, - '@storybook/api': STORYBOOKMANAGERAPI, // deprecated, remove in 8.0 - '@storybook/manager-api': STORYBOOKMANAGERAPI, +export const globalsNameValueMap: Required> = { + react: REACT, + 'react-dom': REACT_DOM, + '@storybook/components': COMPONENTS, + '@storybook/channels': CHANNELS, + '@storybook/core-events': EVENTS, + '@storybook/router': ROUTER, + '@storybook/theming': THEMING, + '@storybook/api': MANAGER_API, // deprecated, remove in 8.0 + '@storybook/manager-api': MANAGER_API, // backwards compatibility '@storybook/addons': { - addons: STORYBOOKMANAGERAPI.addons, - types: STORYBOOKMANAGERAPI.types, - mockChannel: STORYBOOKMANAGERAPI.mockChannel, + addons: MANAGER_API.addons, + types: MANAGER_API.types, + mockChannel: MANAGER_API.mockChannel, }, - '@storybook/client-logger': STORYBOOKCLIENTLOGGER, + '@storybook/client-logger': CLIENT_LOGGER, + '@storybook/types': TYPES, }; diff --git a/code/ui/manager/src/globals/types.ts b/code/ui/manager/src/globals/types.ts deleted file mode 100644 index 2861e45f632..00000000000 --- a/code/ui/manager/src/globals/types.ts +++ /dev/null @@ -1,18 +0,0 @@ -import type { ModuleInfo } from '@fal-works/esbuild-plugin-global-externals'; - -// Here we map the name of a module to their NAME in the global scope. -export enum Keys { - 'react' = '__REACT__', - 'react-dom' = '__REACTDOM__', - '@storybook/components' = '__STORYBOOKCOMPONENTS__', - '@storybook/channels' = '__STORYBOOKCHANNELS__', - '@storybook/core-events' = '__STORYBOOKCOREEVENTS__', - '@storybook/router' = '__STORYBOOKROUTER__', - '@storybook/theming' = '__STORYBOOKTHEMING__', - '@storybook/api' = '__STORYBOOKAPI__', // deprecated, remove in 8.0 - '@storybook/manager-api' = '__STORYBOOKAPI__', - '@storybook/addons' = '__STORYBOOKADDONS__', - '@storybook/client-logger' = '__STORYBOOKCLIENTLOGGER__', -} - -export type Definitions = Required>>; diff --git a/code/ui/manager/src/runtime.ts b/code/ui/manager/src/runtime.ts index efa348ac47e..f66bde4de3d 100644 --- a/code/ui/manager/src/runtime.ts +++ b/code/ui/manager/src/runtime.ts @@ -9,8 +9,8 @@ import { CHANNEL_CREATED, TELEMETRY_ERROR } from '@storybook/core-events'; import Provider from './provider'; import { renderStorybookUI } from './index'; -import { values } from './globals/runtime'; -import { Keys } from './globals/types'; +import { globalsNameValueMap } from './globals/runtime'; +import { globalPackages, globalsNameReferenceMap } from './globals/globals'; import { prepareForTelemetry, shouldSkipError } from './utils/prepareForTelemetry'; const { FEATURES, CONFIG_TYPE } = global; @@ -58,8 +58,8 @@ class ReactProvider extends Provider { } // Apply all the globals -Object.keys(Keys).forEach((key: keyof typeof Keys) => { - global[Keys[key]] = values[key]; +globalPackages.forEach((key) => { + global[globalsNameReferenceMap[key]] = globalsNameValueMap[key]; }); global.sendTelemetryError = (error) => { diff --git a/code/ui/manager/src/typings.d.ts b/code/ui/manager/src/typings.d.ts index 2ff3df07e63..bce29ea466a 100644 --- a/code/ui/manager/src/typings.d.ts +++ b/code/ui/manager/src/typings.d.ts @@ -15,15 +15,15 @@ declare var VERSIONCHECK: any; declare var LOGLEVEL: 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent' | undefined; declare var __REACT__: any; -declare var __REACTDOM__: any; -declare var __STORYBOOKCOMPONENTS__: any; -declare var __STORYBOOKCOMPONENTSEXPERIMENTAL__: any; -declare var __STORYBOOKCHANNELS__: any; -declare var __STORYBOOKCOREEVENTS__: any; -declare var __STORYBOOKROUTER__: any; -declare var __STORYBOOKTHEMING__: any; -declare var __STORYBOOKAPI__: any; -declare var __STORYBOOKADDONS__: any; -declare var __STORYBOOKCLIENTLOGGER__: any; +declare var __REACT_DOM__: any; +declare var __STORYBOOK_COMPONENTS__: any; +declare var __STORYBOOK_CHANNELS__: any; +declare var __STORYBOOK_CORE_EVENTS__: any; +declare var __STORYBOOK_ROUTER__: any; +declare var __STORYBOOK_THEMING__: any; +declare var __STORYBOOK_API__: any; +declare var __STORYBOOK_ADDONS__: any; +declare var __STORYBOOK_CLIENT_LOGGER__: any; declare var __STORYBOOK_ADDONS_CHANNEL__: any; +declare var __STORYBOOK_TYPES__: any; declare var sendTelemetryError: (error: any) => void; diff --git a/code/yarn.lock b/code/yarn.lock index ce57e743139..6cc2650da01 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5345,7 +5345,6 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" - "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -5354,17 +5353,11 @@ __metadata: "@testing-library/react": "npm:^11.2.2" axe-core: "npm:^4.2.0" lodash: "npm:^4.17.21" + react: "npm:^16.8.0" + react-dom: "npm:^16.8.0" react-resize-detector: "npm:^7.1.2" resize-observer-polyfill: "npm:^1.5.1" typescript: "npm:~4.9.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -5386,19 +5379,13 @@ __metadata: lodash: "npm:^4.17.21" polished: "npm:^4.2.2" prop-types: "npm:^15.7.2" + react: "npm:^16.8.0" + react-dom: "npm:^16.8.0" react-inspector: "npm:^6.0.0" telejson: "npm:^7.2.0" ts-dedent: "npm:^2.0.0" typescript: "npm:~4.9.3" uuid: "npm:^9.0.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -5408,23 +5395,16 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" - "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" "@storybook/types": "workspace:*" memoizerific: "npm:^1.11.3" + react: "npm:^16.8.0" + react-dom: "npm:^16.8.0" ts-dedent: "npm:^2.0.0" typescript: "npm:~4.9.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -5436,22 +5416,15 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-common": "workspace:*" - "@storybook/core-events": "workspace:*" "@storybook/manager-api": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" "@storybook/types": "workspace:*" lodash: "npm:^4.17.21" + react: "npm:^16.8.0" + react-dom: "npm:^16.8.0" ts-dedent: "npm:^2.0.0" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -5571,16 +5544,10 @@ __metadata: formik: "npm:^2.2.9" jest-mock: "npm:^27.0.6" polished: "npm:^4.2.2" + react: "npm:^16.8.0" + react-dom: "npm:^16.8.0" ts-dedent: "npm:^2.2.0" typescript: "npm:~4.9.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -5595,18 +5562,13 @@ __metadata: "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" + react: "npm:^16.8.0" + react-dom: "npm:^16.8.0" react-resize-detector: "npm:^7.1.2" tiny-invariant: "npm:^1.3.1" + ts-dedent: "npm:^2.0.0" typescript: "npm:~4.9.3" upath: "npm:^2.0.1" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -5623,17 +5585,13 @@ __metadata: "@storybook/router": "workspace:*" "@storybook/types": "workspace:*" fs-extra: "npm:^11.1.0" - prop-types: "npm:^15.7.2" ts-dedent: "npm:^2.0.0" typescript: "npm:~4.9.3" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 peerDependenciesMeta: react: optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -5659,16 +5617,10 @@ __metadata: "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" + react: "npm:^16.8.0" + react-dom: "npm:^16.8.0" tiny-invariant: "npm:^1.3.1" typescript: "npm:~4.9.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -5683,16 +5635,10 @@ __metadata: "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" + react: "npm:^16.8.0" + react-dom: "npm:^16.8.0" ts-dedent: "npm:^2.0.0" typescript: "npm:~4.9.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -5820,18 +5766,11 @@ __metadata: "@types/react": "npm:^16.14.34" "@types/react-syntax-highlighter": "npm:11.0.5" estraverse: "npm:^5.2.0" - prop-types: "npm:^15.7.2" + react: "npm:^16.8.0" + react-dom: "npm:^16.8.0" react-syntax-highlighter: "npm:^15.5.0" tiny-invariant: "npm:^1.3.1" typescript: "npm:~4.9.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -5848,14 +5787,6 @@ __metadata: "@storybook/types": "workspace:*" ts-dedent: "npm:^2.0.0" typescript: "npm:~4.9.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -5868,15 +5799,9 @@ __metadata: "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" + react: "npm:^16.8.0" + react-dom: "npm:^16.8.0" typescript: "npm:~4.9.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -5892,16 +5817,9 @@ __metadata: "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" memoizerific: "npm:^1.11.3" - prop-types: "npm:^15.7.2" + react: "npm:^16.8.0" + react-dom: "npm:^16.8.0" typescript: "npm:~4.9.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -5912,9 +5830,6 @@ __metadata: "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/types": "workspace:*" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft @@ -5943,7 +5858,6 @@ __metadata: "@storybook/core-webpack": "workspace:*" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" - "@storybook/manager-api": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/preview-api": "workspace:*" "@storybook/telemetry": "workspace:*" @@ -5983,8 +5897,6 @@ __metadata: "@angular/platform-browser": ">=14.1.0 < 18.0.0" "@angular/platform-browser-dynamic": ">=14.1.0 < 18.0.0" "@babel/core": "*" - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 rxjs: ^6.0.0 || ^7.4.0 typescript: ^4.0.0 || ^5.0.0 zone.js: ">= 0.11.1 < 1.0.0" @@ -6000,14 +5912,6 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/manager-api": "workspace:*" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - peerDependenciesMeta: - react: - optional: true - react-dom: - optional: true languageName: unknown linkType: soft @@ -6300,12 +6204,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/client-logger@npm:7.4.6": - version: 7.4.6 - resolution: "@storybook/client-logger@npm:7.4.6" +"@storybook/client-logger@npm:7.5.0": + version: 7.5.0 + resolution: "@storybook/client-logger@npm:7.5.0" dependencies: "@storybook/global": "npm:^5.0.0" - checksum: 170ad58c17e2608639533fe24aaa96ddd4d77d23b4b28f265b2cb67510fef966fc20b029e070fdc7216ba1cdb724d1210b2f8edc8aa538de32fd6e549f9010cf + checksum: 90326c49a224bf21680c04ffee94725bf75658086093ccb839a8aae39476929c4719eafb18e498a148cf0dd956d4e9a5d3b2a34d09ca4fd25e2af553458558ac languageName: node linkType: hard @@ -6635,8 +6539,6 @@ __metadata: babel-plugin-ember-modules-api-polyfill: ^2.12.0 babel-plugin-htmlbars-inline-precompile: 2 || 3 ember-source: ~3.28.1 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft @@ -6695,8 +6597,6 @@ __metadata: typescript: "npm:~4.9.3" peerDependencies: "@babel/core": "*" - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft @@ -6800,14 +6700,13 @@ __metadata: lodash: "npm:^4.17.21" memoizerific: "npm:^1.11.3" qs: "npm:^6.10.0" + react: "npm:^16.8.0" + react-dom: "npm:^16.8.0" semver: "npm:^7.3.7" store2: "npm:^2.14.2" telejson: "npm:^7.2.0" ts-dedent: "npm:^2.0.0" typescript: "npm:~4.9.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft @@ -6984,8 +6883,6 @@ __metadata: peerDependencies: "@babel/core": "*" preact: ^8.0.0||^10.0.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft @@ -7209,7 +7106,6 @@ __metadata: lodash: "npm:^4.17.21" memoizerific: "npm:^1.11.3" qs: "npm:^6.10.0" - react: "npm:^16.14.0" slash: "npm:^5.0.0" synchronous-promise: "npm:^2.0.15" ts-dedent: "npm:^2.0.0" @@ -7236,6 +7132,8 @@ __metadata: "@storybook/global": "npm:^5.0.0" "@storybook/preview-api": "workspace:*" browser-dtector: "npm:^3.4.0" + fs-extra: "npm:^11.1.0" + ts-dedent: "npm:^2.0.0" typescript: "npm:~4.9.3" languageName: unknown linkType: soft @@ -7554,12 +7452,11 @@ __metadata: lodash: "npm:^4.17.21" memoizerific: "npm:^1.11.3" qs: "npm:^6.10.0" + react: "npm:^16.8.0" + react-dom: "npm:^16.8.0" react-router-dom: "npm:6.0.2" ts-dedent: "npm:^2.0.0" typescript: "npm:~4.9.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft @@ -7573,9 +7470,6 @@ __metadata: "@storybook/server": "workspace:*" "@types/node": "npm:^18.0.0" typescript: "npm:~4.9.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft @@ -7608,9 +7502,6 @@ __metadata: lodash: "npm:^4.17.21" prettier: "npm:^2.8.0" typescript: "npm:~4.9.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft @@ -7658,8 +7549,6 @@ __metadata: typescript: "npm:~4.9.3" peerDependencies: "@babel/core": "*" - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 svelte: ^3.48.0 || ^4.0.0 svelte-loader: "*" languageName: unknown @@ -7680,6 +7569,7 @@ __metadata: svelte: "npm:^4.0.0" svelte-check: "npm:3.4.6" sveltedoc-parser: "npm:^4.2.1" + ts-dedent: "npm:^2.0.0" type-fest: "npm:~2.19" typescript: "npm:^5.0.4" peerDependencies: @@ -7755,17 +7645,17 @@ __metadata: linkType: hard "@storybook/theming@npm:^7.0.2": - version: 7.4.6 - resolution: "@storybook/theming@npm:7.4.6" + version: 7.5.0 + resolution: "@storybook/theming@npm:7.5.0" dependencies: "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.0" - "@storybook/client-logger": "npm:7.4.6" + "@storybook/client-logger": "npm:7.5.0" "@storybook/global": "npm:^5.0.0" memoizerific: "npm:^1.11.3" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 6250a413c346971792623bf5a907811fc009ff4a36b8f292d0f45c677269b2a50c29d84ab1e869ada7df3eb23d49614e1342bd2c88e71d4467702b92ebc42f2d + checksum: 57da8e27c748cbec4dc1661cdd2d449949d97476d8e97933696b31d07c7361cbbcca8d7225cc00ca078daa160023b8965ddec7c23519ce0a4ef2658246b062e7 languageName: node linkType: hard @@ -7823,8 +7713,6 @@ __metadata: vue: "npm:^2.7.10" vue-docgen-api: "npm:^4.40.0" 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 || ^5.0.0 vue: ^2.7.0 languageName: unknown @@ -7847,8 +7735,6 @@ __metadata: "@babel/core": "*" babel-loader: ^7.0.0 || ^8.0.0 || ^9.0.0 css-loader: "*" - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 vue: ^2.6.8 vue-loader: ^15.7.0 vue-template-compiler: ^2.6.8 @@ -7869,8 +7755,6 @@ __metadata: vite: "npm:^4.0.0" vue-docgen-api: "npm:^4.40.0" 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 || ^5.0.0 languageName: unknown linkType: soft @@ -7891,8 +7775,6 @@ __metadata: "@babel/core": "*" "@vue/compiler-sfc": ^3.0.0 babel-loader: ^7.0.0 || ^8.0.0 || ^9.0.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 vue: ^3.0.0 languageName: unknown linkType: soft @@ -7961,9 +7843,6 @@ __metadata: "@types/node": "npm:^18.0.0" magic-string: "npm:^0.30.0" typescript: "npm:~4.9.3" - peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft @@ -7981,8 +7860,6 @@ __metadata: typescript: "npm:~4.9.3" peerDependencies: lit: ^2.0.0 || ^3.0.0 - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 languageName: unknown linkType: soft @@ -25779,7 +25656,7 @@ __metadata: languageName: node linkType: hard -"react@npm:^16.14.0": +"react@npm:^16.14.0, react@npm:^16.8.0": version: 16.14.0 resolution: "react@npm:16.14.0" dependencies: diff --git a/scripts/package.json b/scripts/package.json index b428f9b9f22..a93310ad893 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -111,6 +111,7 @@ "babel-eslint": "^10.1.0", "babel-loader": "^9.1.2", "boxen": "^5.1.2", + "browser-assert": "^1.2.1", "chalk": "^4.1.0", "codecov": "^3.8.1", "commander": "^6.2.1", diff --git a/scripts/prepare/addon-bundle.ts b/scripts/prepare/addon-bundle.ts new file mode 100755 index 00000000000..757402c4600 --- /dev/null +++ b/scripts/prepare/addon-bundle.ts @@ -0,0 +1,285 @@ +#!/usr/bin/env ../../node_modules/.bin/ts-node + +import * as fs from 'fs-extra'; +import path, { dirname, join, relative } from 'path'; +import type { Options } from 'tsup'; +import type { PackageJson } from 'type-fest'; +import { build } from 'tsup'; +import aliasPlugin from 'esbuild-plugin-alias'; +import dedent from 'ts-dedent'; +import slash from 'slash'; +import { exec } from '../utils/exec'; + +import { globalPackages as globalPreviewPackages } from '../../code/lib/preview/src/globals/globals'; +import { globalPackages as globalManagerPackages } from '../../code/ui/manager/src/globals/globals'; + +/* TYPES */ + +type Formats = 'esm' | 'cjs'; +type BundlerConfig = { + previewEntries: string[]; + managerEntries: string[]; + nodeEntries: string[]; + exportEntries: string[]; + externals: string[]; + pre: string; + post: string; + formats: Formats[]; +}; +type PackageJsonWithBundlerConfig = PackageJson & { + bundler: BundlerConfig; +}; +type DtsConfigSection = Pick; + +/* MAIN */ + +const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { + const { + name, + dependencies, + peerDependencies, + bundler: { + managerEntries = [], + previewEntries = [], + nodeEntries = [], + exportEntries = [], + externals: extraExternals = [], + pre, + post, + formats = ['esm', 'cjs'], + }, + } = (await fs.readJson(join(cwd, 'package.json'))) as PackageJsonWithBundlerConfig; + + if (pre) { + await exec(`node -r ${__dirname}/../node_modules/esbuild-register/register.js ${pre}`, { cwd }); + } + + const reset = hasFlag(flags, 'reset'); + const watch = hasFlag(flags, 'watch'); + const optimized = hasFlag(flags, 'optimized'); + + if (reset) { + await fs.emptyDir(join(process.cwd(), 'dist')); + } + + const tasks: Promise[] = []; + + const commonOptions: Options = { + outDir: join(process.cwd(), 'dist'), + silent: true, + treeshake: true, + shims: false, + watch, + clean: false, + esbuildPlugins: [ + aliasPlugin({ + process: require.resolve('../node_modules/process/browser.js'), + util: require.resolve('../node_modules/util/util.js'), + assert: require.resolve('browser-assert'), + }), + ], + }; + + const commonExternals = [ + name, + ...extraExternals, + ...Object.keys(dependencies || {}), + ...Object.keys(peerDependencies || {}), + ]; + + if (exportEntries.length > 0) { + const { dtsConfig, tsConfigExists } = await getDTSConfigs({ + formats, + entries: exportEntries, + optimized, + }); + + tasks.push( + build({ + ...commonOptions, + ...(optimized ? dtsConfig : {}), + entry: exportEntries, + format: ['esm'], + target: ['chrome100', 'safari15', 'firefox91'], + platform: 'browser', + external: [...commonExternals, ...globalManagerPackages, ...globalPreviewPackages], + esbuildOptions: (options) => { + /* eslint-disable no-param-reassign */ + options.conditions = ['module']; + options.platform = 'browser'; + Object.assign(options, getESBuildOptions(optimized)); + /* eslint-enable no-param-reassign */ + }, + }), + build({ + ...commonOptions, + ...(optimized ? dtsConfig : {}), + entry: exportEntries, + format: ['cjs'], + target: 'node16', + platform: 'node', + external: commonExternals, + esbuildOptions: (options) => { + /* eslint-disable no-param-reassign */ + options.conditions = ['module']; + options.platform = 'node'; + Object.assign(options, getESBuildOptions(optimized)); + /* eslint-enable no-param-reassign */ + }, + }) + ); + + if (tsConfigExists && !optimized) { + tasks.push(...exportEntries.map(generateDTSMapperFile)); + } + } + + if (managerEntries.length > 0) { + tasks.push( + build({ + ...commonOptions, + entry: managerEntries.map((e: string) => slash(join(cwd, e))), + outExtension: () => ({ + js: '.js', + }), + format: ['esm'], + target: ['chrome100', 'safari15', 'firefox91'], + platform: 'browser', + external: [...commonExternals, ...globalManagerPackages], + esbuildOptions: (options) => { + /* eslint-disable no-param-reassign */ + options.conditions = ['module']; + options.platform = 'browser'; + Object.assign(options, getESBuildOptions(optimized)); + /* eslint-enable no-param-reassign */ + }, + }) + ); + } + if (previewEntries.length > 0) { + tasks.push( + build({ + ...commonOptions, + entry: previewEntries.map((e: string) => slash(join(cwd, e))), + outExtension: () => ({ + js: '.js', + }), + format: ['esm'], + target: ['chrome100', 'safari15', 'firefox91'], + platform: 'browser', + external: [...commonExternals, ...globalPreviewPackages], + esbuildOptions: (c) => { + /* eslint-disable no-param-reassign */ + c.conditions = ['module']; + c.platform = 'browser'; + Object.assign(c, getESBuildOptions(optimized)); + /* eslint-enable no-param-reassign */ + }, + }) + ); + } + if (nodeEntries.length > 0) { + tasks.push( + build({ + ...commonOptions, + entry: nodeEntries.map((e: string) => slash(join(cwd, e))), + format: ['cjs'], + target: 'node16', + platform: 'node', + external: commonExternals, + esbuildOptions: (c) => { + /* eslint-disable no-param-reassign */ + c.platform = 'node'; + Object.assign(c, getESBuildOptions(optimized)); + /* eslint-enable no-param-reassign */ + }, + }) + ); + } + + await Promise.all(tasks); + + if (post) { + await exec( + `node -r ${__dirname}/../node_modules/esbuild-register/register.js ${post}`, + { cwd }, + { debug: true } + ); + } + + console.log('done'); +}; + +/* UTILS */ + +// keep in sync with code/lib/manager-api/src/index.ts + +async function getDTSConfigs({ + formats, + entries, + optimized, +}: { + formats: Formats[]; + entries: string[]; + optimized: boolean; +}) { + const tsConfigPath = join(cwd, 'tsconfig.json'); + const tsConfigExists = await fs.pathExists(tsConfigPath); + + const dtsBuild = optimized && formats[0] && tsConfigExists ? formats[0] : undefined; + + const dtsConfig: DtsConfigSection = { + tsconfig: tsConfigPath, + dts: { + entry: entries, + resolve: true, + }, + }; + + return { dtsBuild, dtsConfig, tsConfigExists }; +} + +function getESBuildOptions(optimized: boolean) { + return { + logLevel: 'error', + legalComments: 'none', + minifyWhitespace: optimized, + minifyIdentifiers: false, + minifySyntax: optimized, + }; +} + +async function generateDTSMapperFile(file: string) { + const { name: entryName, dir } = path.parse(file); + + const pathName = join(process.cwd(), dir.replace('./src', 'dist'), `${entryName}.d.ts`); + const srcName = join(process.cwd(), file); + const rel = relative(dirname(pathName), dirname(srcName)).split(path.sep).join(path.posix.sep); + + await fs.ensureFile(pathName); + await fs.writeFile( + pathName, + dedent` + // dev-mode + export * from '${rel}/${entryName}'; + `, + { encoding: 'utf-8' } + ); +} + +const hasFlag = (flags: string[], name: string) => !!flags.find((s) => s.startsWith(`--${name}`)); + +/* SELF EXECUTION */ + +const flags = process.argv.slice(2); +const cwd = process.cwd(); + +run({ cwd, flags }).catch((err: unknown) => { + // We can't let the stack try to print, it crashes in a way that sets the exit code to 0. + // Seems to have something to do with running JSON.parse() on binary / base64 encoded sourcemaps + // in @cspotcode/source-map-support + if (err instanceof Error) { + console.error(err.stack); + } + process.exit(1); +}); diff --git a/scripts/yarn.lock b/scripts/yarn.lock index 411298c2d9b..a6d22a45a64 100644 --- a/scripts/yarn.lock +++ b/scripts/yarn.lock @@ -3146,6 +3146,7 @@ __metadata: babel-eslint: "npm:^10.1.0" babel-loader: "npm:^9.1.2" boxen: "npm:^5.1.2" + browser-assert: "npm:^1.2.1" chalk: "npm:^4.1.0" codecov: "npm:^3.8.1" commander: "npm:^6.2.1" @@ -5467,6 +5468,13 @@ __metadata: languageName: node linkType: hard +"browser-assert@npm:^1.2.1": + version: 1.2.1 + resolution: "browser-assert@npm:1.2.1" + checksum: 902abf999f92c9c951fdb6d7352c09eea9a84706258699655f7e7906e42daa06a1ae286398a755872740e05a6a71c43c5d1a0c0431d67a8cdb66e5d859a3fc0c + languageName: node + linkType: hard + "browserslist@npm:^4.21.10, browserslist@npm:^4.21.9": version: 4.21.10 resolution: "browserslist@npm:4.21.10" From e792e6fea90b8203d3a1d75cde85644bf7e63de4 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 14 Nov 2023 15:27:14 +0100 Subject: [PATCH 040/170] Update package.json scripts to use esbuild-register from scripts/node_modules --- code/addons/a11y/package.json | 4 ++-- code/addons/actions/package.json | 4 ++-- code/addons/backgrounds/package.json | 4 ++-- code/addons/controls/package.json | 4 ++-- code/addons/docs/package.json | 4 ++-- code/addons/essentials/package.json | 4 ++-- code/addons/gfm/package.json | 4 ++-- code/addons/highlight/package.json | 4 ++-- code/addons/interactions/package.json | 4 ++-- code/addons/jest/package.json | 4 ++-- code/addons/links/package.json | 4 ++-- code/addons/measure/package.json | 4 ++-- code/addons/outline/package.json | 4 ++-- code/addons/storyshots-core/package.json | 4 ++-- code/addons/storyshots-puppeteer/package.json | 4 ++-- code/addons/storysource/package.json | 4 ++-- code/addons/themes/package.json | 4 ++-- code/addons/toolbars/package.json | 4 ++-- code/addons/viewport/package.json | 4 ++-- code/builders/builder-manager/package.json | 4 ++-- code/builders/builder-vite/package.json | 4 ++-- code/builders/builder-webpack5/package.json | 4 ++-- code/deprecated/addons/package.json | 4 ++-- code/deprecated/channel-postmessage/package.json | 4 ++-- code/deprecated/channel-websocket/package.json | 4 ++-- code/deprecated/client-api/package.json | 4 ++-- code/deprecated/core-client/package.json | 4 ++-- code/deprecated/manager-api-shim/package.json | 4 ++-- code/deprecated/preview-web/package.json | 4 ++-- code/deprecated/store/package.json | 4 ++-- code/frameworks/angular/package.json | 2 +- code/frameworks/ember/package.json | 4 ++-- code/frameworks/html-vite/package.json | 4 ++-- code/frameworks/html-webpack5/package.json | 4 ++-- code/frameworks/nextjs/package.json | 4 ++-- code/frameworks/preact-vite/package.json | 4 ++-- code/frameworks/preact-webpack5/package.json | 4 ++-- code/frameworks/react-vite/package.json | 4 ++-- code/frameworks/react-webpack5/package.json | 4 ++-- code/frameworks/server-webpack5/package.json | 4 ++-- code/frameworks/svelte-vite/package.json | 4 ++-- code/frameworks/svelte-webpack5/package.json | 4 ++-- code/frameworks/sveltekit/package.json | 4 ++-- code/frameworks/vue-vite/package.json | 4 ++-- code/frameworks/vue-webpack5/package.json | 4 ++-- code/frameworks/vue3-vite/package.json | 4 ++-- code/frameworks/vue3-webpack5/package.json | 4 ++-- code/frameworks/web-components-vite/package.json | 4 ++-- code/frameworks/web-components-webpack5/package.json | 4 ++-- code/lib/channels/package.json | 4 ++-- code/lib/cli/package.json | 4 ++-- code/lib/client-logger/package.json | 4 ++-- code/lib/codemod/package.json | 4 ++-- code/lib/core-common/package.json | 4 ++-- code/lib/core-events/package.json | 4 ++-- code/lib/core-server/package.json | 4 ++-- code/lib/core-webpack/package.json | 4 ++-- code/lib/csf-plugin/package.json | 4 ++-- code/lib/csf-tools/package.json | 4 ++-- code/lib/docs-tools/package.json | 4 ++-- code/lib/instrumenter/package.json | 4 ++-- code/lib/manager-api/package.json | 4 ++-- code/lib/node-logger/package.json | 4 ++-- code/lib/postinstall/package.json | 4 ++-- code/lib/preview-api/package.json | 4 ++-- code/lib/preview/package.json | 4 ++-- code/lib/react-dom-shim/package.json | 4 ++-- code/lib/router/package.json | 4 ++-- code/lib/source-loader/package.json | 4 ++-- code/lib/telemetry/package.json | 4 ++-- code/lib/test/package.json | 4 ++-- code/lib/theming/package.json | 4 ++-- code/lib/types/package.json | 4 ++-- code/presets/create-react-app/package.json | 4 ++-- code/presets/html-webpack/package.json | 4 ++-- code/presets/preact-webpack/package.json | 4 ++-- code/presets/react-webpack/package.json | 4 ++-- code/presets/server-webpack/package.json | 4 ++-- code/presets/svelte-webpack/package.json | 4 ++-- code/presets/vue-webpack/package.json | 4 ++-- code/presets/vue3-webpack/package.json | 4 ++-- code/presets/web-components-webpack/package.json | 4 ++-- code/renderers/html/package.json | 4 ++-- code/renderers/preact/package.json | 4 ++-- code/renderers/react/package.json | 4 ++-- code/renderers/server/package.json | 4 ++-- code/renderers/svelte/package.json | 2 +- code/renderers/vue/package.json | 2 +- code/renderers/vue3/package.json | 2 +- code/renderers/web-components/package.json | 4 ++-- code/ui/blocks/package.json | 4 ++-- code/ui/components/package.json | 4 ++-- code/ui/manager/package.json | 4 ++-- 93 files changed, 182 insertions(+), 182 deletions(-) diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 982115b501f..0f34cd9e527 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -60,8 +60,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/addon-highlight": "workspace:*", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index dae971d8290..40e68c4fff3 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -77,8 +77,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index e698e3eba4b..56b2bff935a 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -73,8 +73,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index d19e4a64617..78f29f92427 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -65,8 +65,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/blocks": "workspace:*", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 268c69b97d8..20b24e94d52 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -94,8 +94,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@jest/transform": "^29.3.1", diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index 7401de032c2..e25426ea9e3 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -116,8 +116,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/addon-actions": "workspace:*", diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index d83825748f7..8ed921d17f3 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -48,8 +48,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/node-logger": "workspace:*", diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 5450d894b52..4a5b282644e 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -58,8 +58,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/core-events": "workspace:*", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index edb8a55e2a2..b7d115458cb 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -69,8 +69,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index 4f78b3f8aa4..f9bd67e3850 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -67,8 +67,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index f9f0592d43b..8f9a7502df5 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -77,8 +77,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 9368eecad95..78c56931877 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -72,8 +72,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 6437a4f263e..09eec0e0250 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -75,8 +75,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/addons/storyshots-core/package.json b/code/addons/storyshots-core/package.json index b9529e0d292..a00ae2eec73 100644 --- a/code/addons/storyshots-core/package.json +++ b/code/addons/storyshots-core/package.json @@ -33,8 +33,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/tsc.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/tsc.ts" }, "dependencies": { "@jest/transform": "^29.3.1", diff --git a/code/addons/storyshots-puppeteer/package.json b/code/addons/storyshots-puppeteer/package.json index b69d36e8acd..392174a3d0c 100644 --- a/code/addons/storyshots-puppeteer/package.json +++ b/code/addons/storyshots-puppeteer/package.json @@ -32,8 +32,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/tsc.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/tsc.ts" }, "dependencies": { "@axe-core/puppeteer": "^4.2.0", diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index 85b40d56664..09e970e9f60 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -50,8 +50,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index 595d64e9ef5..08277523404 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -70,8 +70,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 9a10b7efdbc..903a674205b 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -65,8 +65,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index 4b997880b5f..d690529d0e6 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -70,8 +70,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/builders/builder-manager/package.json b/code/builders/builder-manager/package.json index d35b2c97a21..0c64ca32e65 100644 --- a/code/builders/builder-manager/package.json +++ b/code/builders/builder-manager/package.json @@ -40,8 +40,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@fal-works/esbuild-plugin-global-externals": "^2.1.2", diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 2d5a24ce0d3..d4e02fa8c3c 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -39,8 +39,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/channels": "workspace:*", diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 990af8a140d..d72f0de4a96 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -57,8 +57,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@babel/core": "^7.23.2", diff --git a/code/deprecated/addons/package.json b/code/deprecated/addons/package.json index 9d15fd59224..89bbf300089 100644 --- a/code/deprecated/addons/package.json +++ b/code/deprecated/addons/package.json @@ -40,8 +40,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/manager-api": "workspace:*", diff --git a/code/deprecated/channel-postmessage/package.json b/code/deprecated/channel-postmessage/package.json index bf22209c5f6..9723d53d21a 100644 --- a/code/deprecated/channel-postmessage/package.json +++ b/code/deprecated/channel-postmessage/package.json @@ -40,8 +40,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/channels": "workspace:*", diff --git a/code/deprecated/channel-websocket/package.json b/code/deprecated/channel-websocket/package.json index 8e291a4ac85..cf9f8c2472b 100644 --- a/code/deprecated/channel-websocket/package.json +++ b/code/deprecated/channel-websocket/package.json @@ -40,8 +40,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/facade.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/facade.ts" }, "dependencies": { "@storybook/channels": "workspace:*", diff --git a/code/deprecated/client-api/package.json b/code/deprecated/client-api/package.json index 25fa94650e0..ab9bd1a38df 100644 --- a/code/deprecated/client-api/package.json +++ b/code/deprecated/client-api/package.json @@ -39,8 +39,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/facade.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/facade.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/deprecated/core-client/package.json b/code/deprecated/core-client/package.json index ff265bb1919..8b8c0b1ea45 100644 --- a/code/deprecated/core-client/package.json +++ b/code/deprecated/core-client/package.json @@ -31,8 +31,8 @@ "module": "dist/entry.mjs", "types": "dist/entry.d.ts", "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/facade.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/facade.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/deprecated/manager-api-shim/package.json b/code/deprecated/manager-api-shim/package.json index 4c15fa4d619..1924599d02f 100644 --- a/code/deprecated/manager-api-shim/package.json +++ b/code/deprecated/manager-api-shim/package.json @@ -39,8 +39,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/facade.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/facade.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/deprecated/preview-web/package.json b/code/deprecated/preview-web/package.json index 08a093f37f5..cc75dde0e9f 100644 --- a/code/deprecated/preview-web/package.json +++ b/code/deprecated/preview-web/package.json @@ -39,8 +39,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/facade.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/facade.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/deprecated/store/package.json b/code/deprecated/store/package.json index 5c948facc74..d63b568308d 100644 --- a/code/deprecated/store/package.json +++ b/code/deprecated/store/package.json @@ -39,8 +39,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/facade.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/facade.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 25e790336a6..9ad294cb298 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -34,7 +34,7 @@ ], "scripts": { "check": "node ../../../scripts/node_modules/.bin/tsc", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/tsc.ts" + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/tsc.ts" }, "dependencies": { "@storybook/builder-webpack5": "workspace:*", diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 94cdc922426..6097d1b49c2 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -28,8 +28,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/tsc.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/tsc.ts" }, "dependencies": { "@storybook/builder-webpack5": "workspace:*", diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index 3618ec2a4b6..d9f204488b3 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/addons": "workspace:*", diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index d09ccceefb2..e22026b0f95 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/builder-webpack5": "workspace:*", diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 11b092bc0ce..695b57c1e73 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -70,8 +70,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@babel/core": "^7.23.2", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 0110bb9d8d9..d0e66e400b5 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@preact/preset-vite": "^2.0.0", diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index 43065839e92..8136f394882 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/builder-webpack5": "workspace:*", diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 5a4d2790352..91584f7309b 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@joshwooding/vite-plugin-react-docgen-typescript": "0.3.0", diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index 4e021b06fd8..5e8d43899ba 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/builder-webpack5": "workspace:*", diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index 2fed061b43b..21f0e10fd88 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/builder-webpack5": "workspace:*", diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 8dde98399e7..da2dfba2ff8 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/builder-vite": "workspace:*", diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index 36a873112a6..365d395a016 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/builder-webpack5": "workspace:*", diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 04e02d1e80f..8701a4bfcbc 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -46,8 +46,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/builder-vite": "workspace:*", diff --git a/code/frameworks/vue-vite/package.json b/code/frameworks/vue-vite/package.json index 3cdc090a67f..0a5b94b74d1 100644 --- a/code/frameworks/vue-vite/package.json +++ b/code/frameworks/vue-vite/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/builder-vite": "workspace:*", diff --git a/code/frameworks/vue-webpack5/package.json b/code/frameworks/vue-webpack5/package.json index e247fdc1519..2258ba6eb84 100644 --- a/code/frameworks/vue-webpack5/package.json +++ b/code/frameworks/vue-webpack5/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/builder-webpack5": "workspace:*", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index db006e4cb91..1b2b62723b2 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/builder-vite": "workspace:*", diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index a0b50a30904..d46d7162f34 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/builder-webpack5": "workspace:*", diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index 2fe348aeee4..2c32f1352d1 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/builder-vite": "workspace:*", diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index f77d6ff57e5..2f9d4153b9d 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -46,8 +46,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@babel/preset-env": "^7.23.2", diff --git a/code/lib/channels/package.json b/code/lib/channels/package.json index 97041d0eb68..ed8d4525fb2 100644 --- a/code/lib/channels/package.json +++ b/code/lib/channels/package.json @@ -65,8 +65,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index f202d09551d..5d5f33c23b0 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -50,8 +50,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts", + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts", "test": "jest test/**/*.test.js" }, "dependencies": { diff --git a/code/lib/client-logger/package.json b/code/lib/client-logger/package.json index 01f6e4e6158..209d761a0c3 100644 --- a/code/lib/client-logger/package.json +++ b/code/lib/client-logger/package.json @@ -40,8 +40,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/global": "^5.0.0" diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 519ea66221b..4f91b18e2f8 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -48,8 +48,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@babel/core": "^7.23.2", diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json index 6ff3e17086d..80e74f7ef11 100644 --- a/code/lib/core-common/package.json +++ b/code/lib/core-common/package.json @@ -40,8 +40,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/core-events": "workspace:*", diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json index 1d81fd572ed..ada82cb59c2 100644 --- a/code/lib/core-events/package.json +++ b/code/lib/core-events/package.json @@ -74,8 +74,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "ts-dedent": "^2.0.0" diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index e8fa2686352..dd3add9d69b 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -56,8 +56,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@aw-web-design/x-default-browser": "1.4.126", diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index 76228f4cf4b..dacc6e45deb 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -40,8 +40,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/core-common": "workspace:*", diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index 5bb7401fca8..f873a212f9d 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -40,8 +40,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/csf-tools": "workspace:*", diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index 4fd7fc4fca0..63acbbeac11 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -38,8 +38,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@babel/generator": "^7.23.0", diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json index a93540f256a..f99cd0eb0ed 100644 --- a/code/lib/docs-tools/package.json +++ b/code/lib/docs-tools/package.json @@ -40,8 +40,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/core-common": "workspace:*", diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index ff32f64c19f..8994bae83cb 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -40,8 +40,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/channels": "workspace:*", diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index a78be8748e8..aba346d6653 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -39,8 +39,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/channels": "workspace:*", diff --git a/code/lib/node-logger/package.json b/code/lib/node-logger/package.json index 742132de920..3caebf57917 100644 --- a/code/lib/node-logger/package.json +++ b/code/lib/node-logger/package.json @@ -38,8 +38,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "devDependencies": { "@types/npmlog": "^4.1.2", diff --git a/code/lib/postinstall/package.json b/code/lib/postinstall/package.json index f23342659ea..42b7332b2e6 100644 --- a/code/lib/postinstall/package.json +++ b/code/lib/postinstall/package.json @@ -41,8 +41,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "devDependencies": { "jest": "^29.7.0", diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index 6e11c55daa3..5e577c588d1 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -64,8 +64,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/channels": "workspace:*", diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json index 8fe5fbdcb4c..5d1bd5d5029 100644 --- a/code/lib/preview/package.json +++ b/code/lib/preview/package.json @@ -52,8 +52,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/esm-bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/esm-bundle.ts" }, "devDependencies": { "@storybook/channels": "workspace:*", diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index 986c08dffa4..5adaf5afd74 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -50,8 +50,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "devDependencies": { "@storybook/types": "workspace:*", diff --git a/code/lib/router/package.json b/code/lib/router/package.json index 3e61b244e67..63379996c90 100644 --- a/code/lib/router/package.json +++ b/code/lib/router/package.json @@ -45,8 +45,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 86757b2f41c..7115659af6d 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -41,8 +41,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/csf": "^0.1.0", diff --git a/code/lib/telemetry/package.json b/code/lib/telemetry/package.json index d4db3291c36..4117e5882c2 100644 --- a/code/lib/telemetry/package.json +++ b/code/lib/telemetry/package.json @@ -40,8 +40,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/lib/test/package.json b/code/lib/test/package.json index 4b082c255b9..94aeef099a9 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -39,8 +39,8 @@ "*.d.ts" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json index 8f8081cecae..5a1f26529ad 100644 --- a/code/lib/theming/package.json +++ b/code/lib/theming/package.json @@ -45,8 +45,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 370d7950e78..641f1cd585b 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -40,8 +40,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/channels": "workspace:*", diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index fa30b9f6d93..3336d73a402 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -45,8 +45,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1", diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index 4c24a2a7f38..d84193c78be 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -45,8 +45,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/core-webpack": "workspace:*", diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index 4d74b3f36ab..cc2506d710c 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -45,8 +45,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@babel/plugin-transform-react-jsx": "^7.22.15", diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index d3437435909..b8e179c279e 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -65,8 +65,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@babel/preset-flow": "^7.22.15", diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index cb705b236e5..484b4d771bb 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -50,8 +50,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/core-server": "workspace:*", diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index fce2d9ab858..1eb33bf8a33 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -60,8 +60,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/core-webpack": "workspace:*", diff --git a/code/presets/vue-webpack/package.json b/code/presets/vue-webpack/package.json index e2ba65efb9c..ab9b647953b 100644 --- a/code/presets/vue-webpack/package.json +++ b/code/presets/vue-webpack/package.json @@ -55,8 +55,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/core-webpack": "workspace:*", diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index c58a4738047..58b3b660732 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -55,8 +55,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/core-webpack": "workspace:*", diff --git a/code/presets/web-components-webpack/package.json b/code/presets/web-components-webpack/package.json index c33ca8e1ed2..5f71e9c8765 100644 --- a/code/presets/web-components-webpack/package.json +++ b/code/presets/web-components-webpack/package.json @@ -48,8 +48,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@babel/plugin-syntax-dynamic-import": "^7.8.3", diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index 9ba0d6d7b0e..ab3500dff9e 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/core-client": "workspace:*", diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index eac5aec6f57..9dee71b45fa 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/core-client": "workspace:*", diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index ce66b38cf81..daac2180662 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -43,8 +43,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 42f81613162..92f60198815 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -42,8 +42,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/core-client": "workspace:*", diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index bd7ff38d0b1..09d93252fc6 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -48,7 +48,7 @@ ], "scripts": { "check": "svelte-check", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/renderers/vue/package.json b/code/renderers/vue/package.json index 4cead82af19..1f14d57e283 100644 --- a/code/renderers/vue/package.json +++ b/code/renderers/vue/package.json @@ -44,7 +44,7 @@ ], "scripts": { "check": "vue-tsc --noEmit", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index 76e24a10fd3..cc6c71af5d3 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -44,7 +44,7 @@ ], "scripts": { "check": "vue-tsc --noEmit", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/core-client": "workspace:*", diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index e765f82785a..bd38fa46665 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -46,8 +46,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/client-logger": "workspace:*", diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index e8a52b79720..f0027b1c82e 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -40,8 +40,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@storybook/channels": "workspace:*", diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 4049f25e696..937ab45eee2 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -55,8 +55,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { "@radix-ui/react-select": "^1.2.2", diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index df38b64c107..c7ceca1bfdb 100644 --- a/code/ui/manager/package.json +++ b/code/ui/manager/package.json @@ -47,8 +47,8 @@ "!src/**/*" ], "scripts": { - "check": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/check.ts", - "prep": "node --loader esbuild-register/loader -r esbuild-register ../../../scripts/prepare/esm-bundle.ts" + "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts", + "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/esm-bundle.ts" }, "devDependencies": { "@fal-works/esbuild-plugin-global-externals": "^2.1.2", From e8f8a65aee104fa384c0d7505fc470c1804267e6 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 14 Nov 2023 17:15:47 +0100 Subject: [PATCH 041/170] Replace default export of esMain by named export --- scripts/combine-compodoc.ts | 2 +- scripts/event-log-checker.ts | 2 +- scripts/get-report-message.ts | 2 +- scripts/get-template.ts | 2 +- scripts/release/cancel-preparation-runs.ts | 2 +- scripts/release/ensure-next-ahead.ts | 2 +- scripts/release/generate-pr-description.ts | 2 +- scripts/release/get-changelog-from-file.ts | 2 +- scripts/release/get-current-version.ts | 2 +- scripts/release/get-version-changelog.ts | 2 +- scripts/release/is-pr-frozen.ts | 2 +- scripts/release/is-prerelease.ts | 2 +- scripts/release/is-version-published.ts | 2 +- scripts/release/label-patches.ts | 2 +- scripts/release/pick-patches.ts | 2 +- scripts/release/publish.ts | 2 +- scripts/release/unreleased-changes-exists.ts | 2 +- scripts/release/version.ts | 2 +- scripts/release/write-changelog.ts | 2 +- scripts/sandbox/generate.ts | 2 +- scripts/utils/esmain.ts | 2 +- 21 files changed, 21 insertions(+), 21 deletions(-) diff --git a/scripts/combine-compodoc.ts b/scripts/combine-compodoc.ts index 3eaad97df6d..c355cc24283 100755 --- a/scripts/combine-compodoc.ts +++ b/scripts/combine-compodoc.ts @@ -7,7 +7,7 @@ import { realpath, readFile, writeFile, lstat } from 'fs-extra'; import { globSync } from 'glob'; import { directory } from 'tempy'; import { execaCommand } from 'execa'; -import esMain from './utils/esmain'; +import { esMain } from './utils/esmain'; const logger = console; diff --git a/scripts/event-log-checker.ts b/scripts/event-log-checker.ts index 2812dc08969..681e54f7dfe 100644 --- a/scripts/event-log-checker.ts +++ b/scripts/event-log-checker.ts @@ -2,7 +2,7 @@ import chalk from 'chalk'; import assert from 'assert'; import fetch from 'node-fetch'; -import esMain from './utils/esmain'; +import { esMain } from './utils/esmain'; import { allTemplates } from '../code/lib/cli/src/sandbox-templates'; import versions from '../code/lib/cli/src/versions'; import { oneWayHash } from '../code/lib/telemetry/src/one-way-hash'; diff --git a/scripts/get-report-message.ts b/scripts/get-report-message.ts index a10bbdd276e..d118bfed3b6 100644 --- a/scripts/get-report-message.ts +++ b/scripts/get-report-message.ts @@ -2,7 +2,7 @@ import { readJson } from 'fs-extra'; import { join } from 'path'; import { execaCommand } from 'execa'; -import esMain from './utils/esmain'; +import { esMain } from './utils/esmain'; import { CODE_DIRECTORY } from './utils/constants'; type Branch = 'main' | 'next' | 'alpha' | 'next-release' | 'latest-release'; diff --git a/scripts/get-template.ts b/scripts/get-template.ts index 0b54568b314..ee3b81b1302 100644 --- a/scripts/get-template.ts +++ b/scripts/get-template.ts @@ -4,7 +4,7 @@ import { program } from 'commander'; import dedent from 'ts-dedent'; import chalk from 'chalk'; import yaml from 'yaml'; -import esMain from './utils/esmain'; +import { esMain } from './utils/esmain'; import { allTemplates, templatesByCadence, diff --git a/scripts/release/cancel-preparation-runs.ts b/scripts/release/cancel-preparation-runs.ts index 811de60bfa5..56cca697d1d 100644 --- a/scripts/release/cancel-preparation-runs.ts +++ b/scripts/release/cancel-preparation-runs.ts @@ -6,7 +6,7 @@ import chalk from 'chalk'; import program from 'commander'; import dedent from 'ts-dedent'; -import esMain from '../utils/esmain'; +import { esMain } from '../utils/esmain'; import { githubRestClient } from './utils/github-client'; program diff --git a/scripts/release/ensure-next-ahead.ts b/scripts/release/ensure-next-ahead.ts index 4bc4bfbab35..308004f031c 100644 --- a/scripts/release/ensure-next-ahead.ts +++ b/scripts/release/ensure-next-ahead.ts @@ -14,7 +14,7 @@ import program from 'commander'; import semver from 'semver'; import { z } from 'zod'; import { readJson } from 'fs-extra'; -import esMain from '../utils/esmain'; +import { esMain } from '../utils/esmain'; import { run as bumpVersion } from './version'; import { git } from './utils/git-client'; diff --git a/scripts/release/generate-pr-description.ts b/scripts/release/generate-pr-description.ts index 31bcc3c63c1..438c13fb4a9 100644 --- a/scripts/release/generate-pr-description.ts +++ b/scripts/release/generate-pr-description.ts @@ -5,7 +5,7 @@ import { z } from 'zod'; import dedent from 'ts-dedent'; import semver from 'semver'; import { setOutput } from '@actions/core'; -import esMain from '../utils/esmain'; +import { esMain } from '../utils/esmain'; import type { Change } from './utils/get-changes'; import { getChanges, LABELS_BY_IMPORTANCE, RELEASED_LABELS } from './utils/get-changes'; import { getCurrentVersion } from './get-current-version'; diff --git a/scripts/release/get-changelog-from-file.ts b/scripts/release/get-changelog-from-file.ts index 62a248f06d9..d400ad58150 100644 --- a/scripts/release/get-changelog-from-file.ts +++ b/scripts/release/get-changelog-from-file.ts @@ -6,7 +6,7 @@ import { readFile } from 'fs-extra'; import path from 'path'; import semver from 'semver'; import dedent from 'ts-dedent'; -import esMain from '../utils/esmain'; +import { esMain } from '../utils/esmain'; import { getCurrentVersion } from './get-current-version'; program diff --git a/scripts/release/get-current-version.ts b/scripts/release/get-current-version.ts index 7fa283d4f08..fffa703ab08 100644 --- a/scripts/release/get-current-version.ts +++ b/scripts/release/get-current-version.ts @@ -3,7 +3,7 @@ import chalk from 'chalk'; import { setOutput } from '@actions/core'; import path from 'path'; import { readJson } from 'fs-extra'; -import esMain from '../utils/esmain'; +import { esMain } from '../utils/esmain'; const CODE_DIR_PATH = path.join(__dirname, '..', '..', 'code'); const CODE_PACKAGE_JSON_PATH = path.join(CODE_DIR_PATH, 'package.json'); diff --git a/scripts/release/get-version-changelog.ts b/scripts/release/get-version-changelog.ts index a3c6e645f79..ce0464d6251 100644 --- a/scripts/release/get-version-changelog.ts +++ b/scripts/release/get-version-changelog.ts @@ -2,7 +2,7 @@ import { setOutput } from '@actions/core'; import chalk from 'chalk'; import { program } from 'commander'; -import esMain from '../utils/esmain'; +import { esMain } from '../utils/esmain'; import { getCurrentVersion } from './get-current-version'; import { getChanges } from './utils/get-changes'; diff --git a/scripts/release/is-pr-frozen.ts b/scripts/release/is-pr-frozen.ts index 2eb52528dda..70d04c9509f 100644 --- a/scripts/release/is-pr-frozen.ts +++ b/scripts/release/is-pr-frozen.ts @@ -4,7 +4,7 @@ import program from 'commander'; import { setOutput } from '@actions/core'; import path from 'path'; import { readJson } from 'fs-extra'; -import esMain from '../utils/esmain'; +import { esMain } from '../utils/esmain'; import { getPullInfoFromCommit } from './utils/get-github-info'; import { git } from './utils/git-client'; diff --git a/scripts/release/is-prerelease.ts b/scripts/release/is-prerelease.ts index ef15bf6c40b..b35f423820e 100644 --- a/scripts/release/is-prerelease.ts +++ b/scripts/release/is-prerelease.ts @@ -3,7 +3,7 @@ import chalk from 'chalk'; import program from 'commander'; import { setOutput } from '@actions/core'; import semver from 'semver'; -import esMain from '../utils/esmain'; +import { esMain } from '../utils/esmain'; import { getCurrentVersion } from './get-current-version'; program diff --git a/scripts/release/is-version-published.ts b/scripts/release/is-version-published.ts index 6a57efa92d5..54c19a465eb 100644 --- a/scripts/release/is-version-published.ts +++ b/scripts/release/is-version-published.ts @@ -3,7 +3,7 @@ import chalk from 'chalk'; import program from 'commander'; import { setOutput } from '@actions/core'; import fetch from 'node-fetch'; -import esMain from '../utils/esmain'; +import { esMain } from '../utils/esmain'; import { getCurrentVersion } from './get-current-version'; program diff --git a/scripts/release/label-patches.ts b/scripts/release/label-patches.ts index 68572d45c87..453e64105ab 100644 --- a/scripts/release/label-patches.ts +++ b/scripts/release/label-patches.ts @@ -1,7 +1,7 @@ import program from 'commander'; import { v4 as uuidv4 } from 'uuid'; import ora from 'ora'; -import esMain from '../utils/esmain'; +import { esMain } from '../utils/esmain'; import { getLabelIds, githubGraphQlClient, getUnpickedPRs } from './utils/github-client'; import { getPullInfoFromCommits, getRepo } from './utils/get-changes'; import { getLatestTag, git } from './utils/git-client'; diff --git a/scripts/release/pick-patches.ts b/scripts/release/pick-patches.ts index 9bdbf53977e..be713f5f5d5 100644 --- a/scripts/release/pick-patches.ts +++ b/scripts/release/pick-patches.ts @@ -5,7 +5,7 @@ import chalk from 'chalk'; import ora from 'ora'; import { setOutput } from '@actions/core'; import invariant from 'tiny-invariant'; -import esMain from '../utils/esmain'; +import { esMain } from '../utils/esmain'; import { git } from './utils/git-client'; import { getUnpickedPRs } from './utils/github-client'; diff --git a/scripts/release/publish.ts b/scripts/release/publish.ts index c5f509ccd00..cd69f5260ce 100644 --- a/scripts/release/publish.ts +++ b/scripts/release/publish.ts @@ -9,7 +9,7 @@ import fetch from 'node-fetch'; import dedent from 'ts-dedent'; import pRetry from 'p-retry'; import { execaCommand } from 'execa'; -import esMain from '../utils/esmain'; +import { esMain } from '../utils/esmain'; program .name('publish') diff --git a/scripts/release/unreleased-changes-exists.ts b/scripts/release/unreleased-changes-exists.ts index e076e640d30..7944edbac73 100644 --- a/scripts/release/unreleased-changes-exists.ts +++ b/scripts/release/unreleased-changes-exists.ts @@ -4,7 +4,7 @@ import program from 'commander'; import { z } from 'zod'; import { setOutput } from '@actions/core'; import { intersection } from 'lodash'; -import esMain from '../utils/esmain'; +import { esMain } from '../utils/esmain'; import type { Change } from './utils/get-changes'; import { RELEASED_LABELS, getChanges } from './utils/get-changes'; import { getCurrentVersion } from './get-current-version'; diff --git a/scripts/release/version.ts b/scripts/release/version.ts index db3f30fa8a8..c56d7afa5b5 100644 --- a/scripts/release/version.ts +++ b/scripts/release/version.ts @@ -7,7 +7,7 @@ import program from 'commander'; import semver from 'semver'; import { z } from 'zod'; import { execaCommand } from 'execa'; -import esMain from '../utils/esmain'; +import { esMain } from '../utils/esmain'; import type { Workspace } from '../utils/workspace'; import { getWorkspaces } from '../utils/workspace'; diff --git a/scripts/release/write-changelog.ts b/scripts/release/write-changelog.ts index 30a64dd366e..5af64eba3a8 100644 --- a/scripts/release/write-changelog.ts +++ b/scripts/release/write-changelog.ts @@ -5,7 +5,7 @@ import program from 'commander'; import semver from 'semver'; import { z } from 'zod'; import { readFile, writeFile, writeJson } from 'fs-extra'; -import esMain from '../utils/esmain'; +import { esMain } from '../utils/esmain'; import { getChanges } from './utils/get-changes'; program diff --git a/scripts/sandbox/generate.ts b/scripts/sandbox/generate.ts index e94459e4d91..8f7ae78fb0d 100755 --- a/scripts/sandbox/generate.ts +++ b/scripts/sandbox/generate.ts @@ -7,7 +7,7 @@ import { copy, emptyDir, ensureDir, move, remove, rename, writeFile } from 'fs-e import { program } from 'commander'; import { directory } from 'tempy'; import { execaCommand } from 'execa'; -import esMain from '../utils/esmain'; +import { esMain } from '../utils/esmain'; import type { OptionValues } from '../utils/options'; import { createOptions } from '../utils/options'; diff --git a/scripts/utils/esmain.ts b/scripts/utils/esmain.ts index 286f8b25027..edc9d07b432 100644 --- a/scripts/utils/esmain.ts +++ b/scripts/utils/esmain.ts @@ -21,7 +21,7 @@ export function stripExt(name: string) { * Check if a module was run directly with node as opposed to being * imported from another module. */ -export default function esMain(url: string) { +export function esMain(url: string) { if (!url || !process.argv[1]) { return false; } From 737a3ed0070d5caebee7fac0df77d0d460736762 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 14 Nov 2023 17:29:45 +0100 Subject: [PATCH 042/170] cleanup addon-actions dependencies --- code/addons/actions/package.json | 6 +----- code/yarn.lock | 6 ------ 2 files changed, 1 insertion(+), 11 deletions(-) diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index 88b89cc58fb..3df803987da 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -64,13 +64,9 @@ }, "dependencies": { "@storybook/global": "^5.0.0", - "@types/lodash": "^4.14.167", "@types/uuid": "^9.0.1", "dequal": "^2.0.2", - "lodash": "^4.17.21", "polished": "^4.2.2", - "telejson": "^7.2.0", - "ts-dedent": "^2.0.0", "uuid": "^9.0.0" }, "devDependencies": { @@ -81,10 +77,10 @@ "@storybook/preview-api": "workspace:*", "@storybook/theming": "workspace:*", "@storybook/types": "workspace:*", - "prop-types": "^15.7.2", "react": "^16.8.0", "react-dom": "^16.8.0", "react-inspector": "^6.0.0", + "telejson": "^7.2.0", "typescript": "~4.9.3" }, "publishConfig": { diff --git a/code/yarn.lock b/code/yarn.lock index 6cc2650da01..bd945338259 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5373,17 +5373,13 @@ __metadata: "@storybook/preview-api": "workspace:*" "@storybook/theming": "workspace:*" "@storybook/types": "workspace:*" - "@types/lodash": "npm:^4.14.167" "@types/uuid": "npm:^9.0.1" dequal: "npm:^2.0.2" - lodash: "npm:^4.17.21" polished: "npm:^4.2.2" - prop-types: "npm:^15.7.2" react: "npm:^16.8.0" react-dom: "npm:^16.8.0" react-inspector: "npm:^6.0.0" telejson: "npm:^7.2.0" - ts-dedent: "npm:^2.0.0" typescript: "npm:~4.9.3" uuid: "npm:^9.0.0" languageName: unknown @@ -6820,8 +6816,6 @@ __metadata: peerDependenciesMeta: "@next/font": optional: true - "@storybook/addon-actions": - optional: true typescript: optional: true webpack: From 7e07d354d90ff279e885f0616c6c9011762617e2 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Tue, 14 Nov 2023 17:34:21 +0100 Subject: [PATCH 043/170] use ESM in nextjs framework, rework conditional importing of nextjs contexts --- code/frameworks/nextjs/package.json | 9 +--- .../nextjs/src/nextImport/webpack.ts | 3 +- code/frameworks/nextjs/src/preset.ts | 2 +- .../src/routing/app-router-provider.tsx | 54 +++++-------------- .../nextjs/src/routing/decorator.tsx | 32 ++++++----- .../src/routing/page-router-provider.tsx | 4 +- 6 files changed, 36 insertions(+), 68 deletions(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 99a3da9d8fb..356b2eb48b0 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -36,11 +36,7 @@ "types": "./dist/preset.d.ts", "require": "./dist/preset.js" }, - "./preview.js": { - "types": "./dist/preview.d.ts", - "require": "./dist/preview.js", - "import": "./dist/preview.mjs" - }, + "./dist/preview.mjs": "./dist/preview.mjs", "./next-image-loader-stub.js": { "types": "./dist/next-image-loader-stub.d.ts", "require": "./dist/next-image-loader-stub.js", @@ -136,9 +132,6 @@ "@next/font": { "optional": true }, - "@storybook/addon-actions": { - "optional": true - }, "typescript": { "optional": true }, diff --git a/code/frameworks/nextjs/src/nextImport/webpack.ts b/code/frameworks/nextjs/src/nextImport/webpack.ts index fc5d359ef8e..35f39a7069e 100644 --- a/code/frameworks/nextjs/src/nextImport/webpack.ts +++ b/code/frameworks/nextjs/src/nextImport/webpack.ts @@ -24,7 +24,8 @@ export function configureNextImport(baseConfig: WebpackConfig) { baseConfig.plugins.push( new IgnorePlugin({ // ignore next/dist/shared/lib/hooks-client-context and next/legacy/image imports - resourceRegExp: /(next\/dist\/shared\/lib\/hooks-client-context|next\/legacy\/image)$/, + resourceRegExp: + /(next\/dist\/shared\/lib\/hooks-client-context|next\/dist\/shared\/lib\/hooks-client-context\.shared-runtime|next\/legacy\/image)$/, }) ); } diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index fd726835293..7b0e150f735 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -69,7 +69,7 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => [ ...entry, - require.resolve('@storybook/nextjs/preview.js'), + join(dirname(require.resolve('@storybook/nextjs/package.json')), 'dist/preview.mjs'), ]; // Not even sb init - automigrate - running dev diff --git a/code/frameworks/nextjs/src/routing/app-router-provider.tsx b/code/frameworks/nextjs/src/routing/app-router-provider.tsx index a7f0bd326f9..c8b1c96c80a 100644 --- a/code/frameworks/nextjs/src/routing/app-router-provider.tsx +++ b/code/frameworks/nextjs/src/routing/app-router-provider.tsx @@ -1,48 +1,16 @@ import React from 'react'; -import type { - LayoutRouterContext as TLayoutRouterContext, - AppRouterContext as TAppRouterContext, - GlobalLayoutRouterContext as TGlobalLayoutRouterContext, +import { + LayoutRouterContext, + AppRouterContext, + GlobalLayoutRouterContext, } from 'next/dist/shared/lib/app-router-context.shared-runtime'; -import type { - PathnameContext as TPathnameContext, - SearchParamsContext as TSearchParamsContext, +import { + PathnameContext, + SearchParamsContext, } from 'next/dist/shared/lib/hooks-client-context.shared-runtime'; import type { FlightRouterState } from 'next/dist/server/app-render/types'; import type { RouteParams } from './types'; -/** - * Normally dynamic imports are necessary because otherwise - * older versions of Next.js will throw an error - * because AppRouterProviders only exists in Next.js > v13 - * Using React.lazy though is currently not supported in SB decorators - * therefore using the try/catch workaround - */ -let AppRouterContext: typeof TAppRouterContext; -let LayoutRouterContext: typeof TLayoutRouterContext; -let PathnameContext: typeof TPathnameContext; -let SearchParamsContext: typeof TSearchParamsContext; -let GlobalLayoutRouterContext: typeof TGlobalLayoutRouterContext; - -try { - AppRouterContext = - require('next/dist/shared/lib/app-router-context.shared-runtime').AppRouterContext; - LayoutRouterContext = - require('next/dist/shared/lib/app-router-context.shared-runtime').LayoutRouterContext; - PathnameContext = - require('next/dist/shared/lib/hooks-client-context.shared-runtime').PathnameContext; - SearchParamsContext = - require('next/dist/shared/lib/hooks-client-context.shared-runtime').SearchParamsContext; - GlobalLayoutRouterContext = - require('next/dist/shared/lib/app-router-context.shared-runtime').GlobalLayoutRouterContext; -} catch { - AppRouterContext = React.Fragment as any; - LayoutRouterContext = React.Fragment as any; - PathnameContext = React.Fragment as any; - SearchParamsContext = React.Fragment as any; - GlobalLayoutRouterContext = React.Fragment as any; -} - type AppRouterProviderProps = { action: (name: string) => (...args: any[]) => void; routeParams: RouteParams; @@ -58,7 +26,11 @@ const getParallelRoutes = (segmentsList: Array): FlightRouterState => { return [] as any; }; -const AppRouterProvider: React.FC = ({ children, action, routeParams }) => { +export const AppRouterProvider: React.FC = ({ + children, + action, + routeParams, +}) => { const { pathname, query, segments = [], ...restRouteParams } = routeParams; const tree: FlightRouterState = [pathname, { children: getParallelRoutes([...segments]) }]; @@ -121,5 +93,3 @@ const AppRouterProvider: React.FC = ({ children, action, ); }; - -export default AppRouterProvider; diff --git a/code/frameworks/nextjs/src/routing/decorator.tsx b/code/frameworks/nextjs/src/routing/decorator.tsx index 8312b8e9d80..059e378c252 100644 --- a/code/frameworks/nextjs/src/routing/decorator.tsx +++ b/code/frameworks/nextjs/src/routing/decorator.tsx @@ -1,20 +1,10 @@ import * as React from 'react'; -// this will be aliased by webpack at runtime (this is just for typing) -import type { action as originalAction } from '@storybook/addon-actions'; import type { Addon_StoryContext } from '@storybook/types'; -import AppRouterProvider from './app-router-provider'; - -import PageRouterProvider from './page-router-provider'; +import { action } from '@storybook/addon-actions'; +import { PageRouterProvider } from './page-router-provider'; +import type { AppRouterProvider as TAppRouterProvider } from './app-router-provider'; import type { RouteParams, NextAppDirectory } from './types'; -let action: typeof originalAction; - -try { - action = require('@storybook/addon-actions').action; -} catch { - action = () => () => {}; -} - const defaultRouterParams: RouteParams = { pathname: '/', query: {}, @@ -27,7 +17,23 @@ export const RouterDecorator = ( const nextAppDirectory = (parameters.nextjs?.appDirectory as NextAppDirectory | undefined) ?? false; + const [AppRouterProvider, setAppRouterProvider] = React.useState< + typeof TAppRouterProvider | undefined + >(); + + React.useEffect(() => { + if (!nextAppDirectory) { + return; + } + import('./app-router-provider').then((exports) => + setAppRouterProvider(() => exports.AppRouterProvider) + ); + }, [nextAppDirectory]); + if (nextAppDirectory) { + if (!AppRouterProvider) { + return null; + } return ( = ({ +export const PageRouterProvider: React.FC = ({ children, action, routeParams, @@ -66,5 +66,3 @@ const PageRouterProvider: React.FC = ({ {children} ); - -export default PageRouterProvider; From 13c577994260f6097ae0fda55becf3b8da5caf19 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 15 Nov 2023 10:31:11 +0100 Subject: [PATCH 044/170] Add skipCompiler option to TypeScript presets --- .../src/preview/iframe-webpack.config.ts | 3 ++- code/frameworks/angular/src/preset.ts | 1 + code/frameworks/vue-vite/src/preset.ts | 1 + code/frameworks/vue-webpack5/src/preset.ts | 1 + code/frameworks/vue3-webpack5/src/preset.ts | 1 + code/lib/types/src/modules/core-common.ts | 8 ++++++++ docs/api/main-config-typescript.md | 18 ++++++++++++++++++ ...main-config-typescript-skip-compiler.ts.mdx | 16 ++++++++++++++++ 8 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 docs/snippets/common/main-config-typescript-skip-compiler.ts.mdx diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts index 13b02df7264..70c21289650 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -200,7 +200,8 @@ export default async ( } } - const shouldCheckTs = typescriptOptions.check && !typescriptOptions.skipBabel; + const shouldCheckTs = + typescriptOptions.check && !typescriptOptions.skipBabel && !typescriptOptions.skipCompiler; const tsCheckOptions = typescriptOptions.checkOptions || {}; const cacheConfig = builderOptions.fsCache ? { cache: { type: 'filesystem' as const } } : {}; diff --git a/code/frameworks/angular/src/preset.ts b/code/frameworks/angular/src/preset.ts index ce5796d0c22..f093cb6cc8b 100644 --- a/code/frameworks/angular/src/preset.ts +++ b/code/frameworks/angular/src/preset.ts @@ -41,5 +41,6 @@ export const typescript: PresetProperty<'typescript', StorybookConfig> = async ( return { ...config, skipBabel: true, + skipCompiler: true, }; }; diff --git a/code/frameworks/vue-vite/src/preset.ts b/code/frameworks/vue-vite/src/preset.ts index bf5b7d45ea5..736e8860f90 100644 --- a/code/frameworks/vue-vite/src/preset.ts +++ b/code/frameworks/vue-vite/src/preset.ts @@ -23,6 +23,7 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti export const typescript: PresetProperty<'typescript', StorybookConfig> = async (config) => ({ ...config, skipBabel: true, + skipCompiler: true, }); export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => { diff --git a/code/frameworks/vue-webpack5/src/preset.ts b/code/frameworks/vue-webpack5/src/preset.ts index 661053fddef..1e493e9a7f9 100644 --- a/code/frameworks/vue-webpack5/src/preset.ts +++ b/code/frameworks/vue-webpack5/src/preset.ts @@ -25,4 +25,5 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti export const typescript: PresetProperty<'typescript', StorybookConfig> = async (config) => ({ ...config, skipBabel: true, + skipCompiler: true, }); diff --git a/code/frameworks/vue3-webpack5/src/preset.ts b/code/frameworks/vue3-webpack5/src/preset.ts index 0dd1e931ddd..1714cc16075 100644 --- a/code/frameworks/vue3-webpack5/src/preset.ts +++ b/code/frameworks/vue3-webpack5/src/preset.ts @@ -25,4 +25,5 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti export const typescript: PresetProperty<'typescript', StorybookConfig> = async (config) => ({ ...config, skipBabel: true, + skipCompiler: true, }); diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts index f5043c362d7..2aace3e79d4 100644 --- a/code/lib/types/src/modules/core-common.ts +++ b/code/lib/types/src/modules/core-common.ts @@ -223,8 +223,16 @@ export interface TypescriptOptions { * Disable parsing typescript files through babel. * * @default `false` + * @deprecated use `skipCompiler` instead */ skipBabel: boolean; + + /** + * Disable parsing typescript files through compiler. + * + * @default `false` + */ + skipCompiler: boolean; } export type Preset = diff --git a/docs/api/main-config-typescript.md b/docs/api/main-config-typescript.md index 425f8703777..5ac80985eb9 100644 --- a/docs/api/main-config-typescript.md +++ b/docs/api/main-config-typescript.md @@ -90,6 +90,8 @@ Only available for React Storybook projects. Options to pass to react-docgen-typ ## `skipBabel` +Deprecated: Will be removed in Storybook 8.0. Use `skipCompiler` instead + Type: `boolean` Disable parsing of TypeScript files through babel. @@ -103,3 +105,19 @@ Disable parsing of TypeScript files through babel. /> + +## `skipCompiler` + +Type: `boolean` + +Disable parsing of TypeScript files through the compiler, which is used for Webpack5. + + + + + + diff --git a/docs/snippets/common/main-config-typescript-skip-compiler.ts.mdx b/docs/snippets/common/main-config-typescript-skip-compiler.ts.mdx new file mode 100644 index 00000000000..aefe172fc6c --- /dev/null +++ b/docs/snippets/common/main-config-typescript-skip-compiler.ts.mdx @@ -0,0 +1,16 @@ +```ts +// .storybook/main.ts + +// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) +import type { StorybookConfig } from '@storybook/your-framework'; + +const config: StorybookConfig = { + framework: '@storybook/your-framework', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + typescript: { + skipCompiler: true, + }, +}; + +export default config; +``` From b36a055c987269b7208461aa9ef80167de528287 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 15 Nov 2023 12:59:06 +0100 Subject: [PATCH 045/170] Add file extension to CommonJS file import and remove dynamic imports --- .github/workflows/generate-sandboxes-main.yml | 2 +- .github/workflows/generate-sandboxes-next.yml | 2 +- scripts/tasks/bench.ts | 9 +++++++-- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/.github/workflows/generate-sandboxes-main.yml b/.github/workflows/generate-sandboxes-main.yml index 7d932857849..ab3d72df342 100644 --- a/.github/workflows/generate-sandboxes-main.yml +++ b/.github/workflows/generate-sandboxes-main.yml @@ -30,7 +30,7 @@ jobs: git config --global user.name "Storybook Bot" git config --global user.email "bot@storybook.js.org" - name: Install dependencies - run: node ./scripts/check-dependencies.js + run: node ./scripts/check-dependencies.cjs - name: Compile Storybook libraries run: yarn task --task compile --start-from=auto --no-link - name: Publishing to local registry diff --git a/.github/workflows/generate-sandboxes-next.yml b/.github/workflows/generate-sandboxes-next.yml index 8a28c4cbb23..465fb44b798 100644 --- a/.github/workflows/generate-sandboxes-next.yml +++ b/.github/workflows/generate-sandboxes-next.yml @@ -30,7 +30,7 @@ jobs: git config --global user.name "Storybook Bot" git config --global user.email "bot@storybook.js.org" - name: Install dependencies - run: node ./scripts/check-dependencies.js + run: node ./scripts/check-dependencies.cjs - name: Compile Storybook libraries run: yarn task --task compile --start-from=auto --no-link - name: Publishing to local registry diff --git a/scripts/tasks/bench.ts b/scripts/tasks/bench.ts index 349d79ea7fa..cead08852ed 100644 --- a/scripts/tasks/bench.ts +++ b/scripts/tasks/bench.ts @@ -1,3 +1,4 @@ +/* eslint-disable import/extensions */ import prettyBytes from 'pretty-bytes'; import prettyTime from 'pretty-ms'; @@ -19,8 +20,10 @@ export const bench: Task = { const controllers: AbortController[] = []; try { const { disableDocs } = options; - const { browse } = await import('../bench/browse'); - const { saveBench, loadBench } = await import('../bench/utils'); + // @ts-expect-error Default import required for dynamic import processed by esbuild + const { browse } = (await import('../bench/browse.ts')).default; + // @ts-expect-error Default import required for dynamic import processed by esbuild + const { saveBench, loadBench } = (await import('../bench/utils.ts')).default; const devController = await dev.run(details, { ...options, debug: false }); if (!devController) { @@ -28,6 +31,7 @@ export const bench: Task = { } controllers.push(devController); const devBrowseResult = await browse(`http://localhost:${devPort}`, { disableDocs }); + devController.abort(); const serveController = await serve.run(details, { ...options, debug: false }); @@ -35,6 +39,7 @@ export const bench: Task = { throw new Error('serve: controller is null'); } controllers.push(serveController); + const buildBrowseResult = await browse(`http://localhost:${servePort}`, { disableDocs }); serveController.abort(); From b7e3e3736040846662d29505f9dfa43ac71a7d6f Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 15 Nov 2023 13:37:13 +0100 Subject: [PATCH 046/170] Convert check-dependencies script into Typescript --- .github/workflows/generate-sandboxes-main.yml | 5 ++++- .github/workflows/generate-sandboxes-next.yml | 5 ++++- scripts/check-dependencies.cjs | 7 ------- scripts/check-dependencies.ts | 7 +++++++ 4 files changed, 15 insertions(+), 9 deletions(-) delete mode 100755 scripts/check-dependencies.cjs create mode 100755 scripts/check-dependencies.ts diff --git a/.github/workflows/generate-sandboxes-main.yml b/.github/workflows/generate-sandboxes-main.yml index ab3d72df342..adea48c1b2f 100644 --- a/.github/workflows/generate-sandboxes-main.yml +++ b/.github/workflows/generate-sandboxes-main.yml @@ -30,7 +30,10 @@ jobs: git config --global user.name "Storybook Bot" git config --global user.email "bot@storybook.js.org" - name: Install dependencies - run: node ./scripts/check-dependencies.cjs + run: | + cd ./scripts + node --loader esbuild-register/loader -r esbuild-register ./check-dependencies.ts + cd .. - name: Compile Storybook libraries run: yarn task --task compile --start-from=auto --no-link - name: Publishing to local registry diff --git a/.github/workflows/generate-sandboxes-next.yml b/.github/workflows/generate-sandboxes-next.yml index 465fb44b798..9a00f8b99cd 100644 --- a/.github/workflows/generate-sandboxes-next.yml +++ b/.github/workflows/generate-sandboxes-next.yml @@ -30,7 +30,10 @@ jobs: git config --global user.name "Storybook Bot" git config --global user.email "bot@storybook.js.org" - name: Install dependencies - run: node ./scripts/check-dependencies.cjs + run: | + cd ./scripts + node --loader esbuild-register/loader -r esbuild-register ./check-dependencies.ts + cd .. - name: Compile Storybook libraries run: yarn task --task compile --start-from=auto --no-link - name: Publishing to local registry diff --git a/scripts/check-dependencies.cjs b/scripts/check-dependencies.cjs deleted file mode 100755 index c8bd9114faf..00000000000 --- a/scripts/check-dependencies.cjs +++ /dev/null @@ -1,7 +0,0 @@ -#!/usr/bin/env node -const { checkDependencies } = require('./utils/cli-utils'); - -checkDependencies().catch((e) => { - console.error(e); - process.exit(1); -}); diff --git a/scripts/check-dependencies.ts b/scripts/check-dependencies.ts new file mode 100755 index 00000000000..babee83b82f --- /dev/null +++ b/scripts/check-dependencies.ts @@ -0,0 +1,7 @@ +import { checkDependencies } from './utils/cli-utils'; + +checkDependencies().catch((e) => { + // eslint-disable-next-line no-console + console.error(e); + process.exit(1); +}); From 3a24793dbc8aa54e61a4962d0b4e9253a0191ca9 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 15 Nov 2023 15:10:12 +0100 Subject: [PATCH 047/170] Remove Typescript preset override for vue-vite --- code/frameworks/vue-vite/src/preset.ts | 6 ------ 1 file changed, 6 deletions(-) diff --git a/code/frameworks/vue-vite/src/preset.ts b/code/frameworks/vue-vite/src/preset.ts index 736e8860f90..3030587afaa 100644 --- a/code/frameworks/vue-vite/src/preset.ts +++ b/code/frameworks/vue-vite/src/preset.ts @@ -20,12 +20,6 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti }; }; -export const typescript: PresetProperty<'typescript', StorybookConfig> = async (config) => ({ - ...config, - skipBabel: true, - skipCompiler: true, -}); - export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => { return mergeConfig(config, { plugins: [vueDocgen()], From ec2d929e0f60ab939db46408b163cceef2002687 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 15 Nov 2023 15:10:33 +0100 Subject: [PATCH 048/170] Clarify docs on skipCompiler option --- .../snippets/common/main-config-typescript-skip-compiler.ts.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/snippets/common/main-config-typescript-skip-compiler.ts.mdx b/docs/snippets/common/main-config-typescript-skip-compiler.ts.mdx index aefe172fc6c..85c216504c2 100644 --- a/docs/snippets/common/main-config-typescript-skip-compiler.ts.mdx +++ b/docs/snippets/common/main-config-typescript-skip-compiler.ts.mdx @@ -1,7 +1,7 @@ ```ts // .storybook/main.ts -// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) +// Replace your-framework with the framework you are using (e.g., react-webpack5) import type { StorybookConfig } from '@storybook/your-framework'; const config: StorybookConfig = { From 217b11ed389ee9c87f3eef132fe4fd81d2dea67b Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 15 Nov 2023 15:12:26 +0100 Subject: [PATCH 049/170] Add entry to Migration.md about skipCompiler --- MIGRATION.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/MIGRATION.md b/MIGRATION.md index ca14c266b62..385aeef95a5 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,6 +1,7 @@

Migration

- [From version 7.5.0 to 7.6.0](#from-version-750-to-760) + - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated) - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) - [From version 7.4.0 to 7.5.0](#from-version-740-to-750) @@ -310,6 +311,10 @@ ## From version 7.5.0 to 7.6.0 +#### typescript.skipBabel deprecated + +We will remove the `typescript.skipBabel` option in Storybook 8.0.0. Please use `typescirpt.skipCompiler` instead. + #### Primary doc block accepts of prop The `Primary` doc block now also accepts an `of` prop as described in the [Doc Blocks](#doc-blocks) section. It still accepts being passed `name` or no props at all. From 1eda85a97df5b3062fd228956a85c5c6e38ede1c Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 15 Nov 2023 16:11:26 +0100 Subject: [PATCH 050/170] Warn on implicit actions --- MIGRATION.md | 50 ++++++++++++++++++ code/addons/actions/src/runtime/action.ts | 52 +++++++++++++------ .../core-events/src/errors/preview-errors.ts | 26 ++++++++++ .../core-server/src/presets/common-preset.ts | 1 + code/lib/types/src/modules/core-common.ts | 7 +++ 5 files changed, 120 insertions(+), 16 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index ca14c266b62..77a3ae9613e 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,6 +1,7 @@

Migration

- [From version 7.5.0 to 7.6.0](#from-version-750-to-760) + - [Using implicit actions during rendering is deprecated (for example in the play function)](#using-implicit-actions-during-rendering-is-deprecated-for-example-in-the-play-function) - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) - [From version 7.4.0 to 7.5.0](#from-version-740-to-750) @@ -310,6 +311,55 @@ ## From version 7.5.0 to 7.6.0 +#### Using implicit actions during rendering is deprecated (for example in the play function) + +In Storybook 7, we inferred if the component accepts any action props, +by checking if it starts with `onX` (for example `onClick`), or as configured by `actions.argTypesRegex`. +If that was the case, we would fill in jest spies for those args automatically. + +```ts +export default { + component: Button, +}; + +export const ButtonClick = { + play: async ({ args, canvasElement }) => { + await userEvent.click(within(canvasElement).getByRole('button')); + // args.onClick is a jest spy in 7.0 + await expect(args.onClick).toHaveBeenCalled(); + }, +}; +``` + +In Storybook 8 this feature will be removed, and spies have to added explicitly: + +```ts +import { fn } from '@storybook/test'; + +export default { + component: Button, + args: { + onClick: fn(), + }, +}; + +export const ButtonClick = { + play: async ({ args, canvasElement }) => { + await userEvent.click(within(canvasElement).getByRole('button')); + await expect(args.onClick).toHaveBeenCalled(); + }, +}; +``` + +For more context, see this RFC: +https://github.com/storybookjs/storybook/discussions/23649 + +To summarize: + +- This makes CSF files less magical and more portable, so that CSF files will render the same in a test environment where docgen is not available. +- This allows users and (test) integrators to run or build storybook without docgen, boosting the user performance and allows tools to give quicker feedback. +- This will make sure that we can one day lazy load docgen, without changing how stories are rendered. + #### Primary doc block accepts of prop The `Primary` doc block now also accepts an `of` prop as described in the [Doc Blocks](#doc-blocks) section. It still accepts being passed `name` or no props at all. diff --git a/code/addons/actions/src/runtime/action.ts b/code/addons/actions/src/runtime/action.ts index 9cb6055a5fe..365bb487621 100644 --- a/code/addons/actions/src/runtime/action.ts +++ b/code/addons/actions/src/runtime/action.ts @@ -1,5 +1,10 @@ import { v4 as uuidv4 } from 'uuid'; +import type { PreviewWeb } from '@storybook/preview-api'; import { addons } from '@storybook/preview-api'; +import type { Renderer } from '@storybook/types'; +import { global } from '@storybook/global'; +import { ImplicitActionsDuringRendering } from '@storybook/core-events/preview-errors'; +import dedent from 'ts-dedent'; import { EVENT_ID } from '../constants'; import type { ActionDisplay, ActionOptions, HandlerFunction } from '../models'; import { config } from './configureActions'; @@ -54,22 +59,37 @@ export function action(name: string, options: ActionOptions = {}): HandlerFuncti }; const handler = function actionHandler(...args: any[]) { - // TODO: Enable once codemods are finished - // if (options.implicit) { - // const preview = - // '__STORYBOOK_PREVIEW__' in global - // ? (global.__STORYBOOK_PREVIEW__ as PreviewWeb) - // : undefined; - // if ( - // preview?.storyRenders.some( - // (render) => render.phase === 'playing' || render.phase === 'rendering' - // ) - // ) { - // console.warn( - // 'Can not use implicit actions during rendering or playing of a story.' - // ); - // } - // } + if (options.implicit) { + const preview = + '__STORYBOOK_PREVIEW__' in global + ? // eslint-disable-next-line no-underscore-dangle + (global.__STORYBOOK_PREVIEW__ as PreviewWeb) + : undefined; + const storyRenderer = preview?.storyRenders.find( + (render) => render.phase === 'playing' || render.phase === 'rendering' + ); + + if (storyRenderer) { + if (window?.FEATURES?.disallowImplicitActionsInRenderV8) { + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + throw new ImplicitActionsDuringRendering({ phase: storyRenderer.phase!, name }); + } else { + console.warn(dedent` + We detected that you use an implicit action arg during ${storyRenderer.phase} of your story. + This is deprecated and won't work in Storybook 8 anymore. + + Please provide an explicit spy to your args like this: + import { fn } from '@storybook/test'; + ... + args: { + ${name}: fn() + } + + See: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#using-implicit-actions-during-rendering-is-deprecated-for-example-in-the-play-function + `); + } + } + } const channel = addons.getChannel(); // this makes sure that in js enviroments like react native you can still get an id diff --git a/code/lib/core-events/src/errors/preview-errors.ts b/code/lib/core-events/src/errors/preview-errors.ts index 84161db505b..dda274d158d 100644 --- a/code/lib/core-events/src/errors/preview-errors.ts +++ b/code/lib/core-events/src/errors/preview-errors.ts @@ -48,3 +48,29 @@ export class MissingStoryAfterHmrError extends StorybookError { - Also check the browser console and terminal for potential error messages.`; } } + +export class ImplicitActionsDuringRendering extends StorybookError { + readonly category = Category.PREVIEW_API; + + readonly code = 2; + + readonly documentation = + 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#using-implicit-actions-during-rendering-is-deprecated-for-example-in-the-play-function'; + + constructor(public data: { phase: string; name: string }) { + super(); + } + + template() { + return dedent` + We detected that you use an implicit action arg during ${this.data.phase} of your story. + + Please provide an explicit spy to your args like this: + import { fn } from '@storybook/test'; + ... + args: { + ${this.data.name}: fn() + } + `; + } +} diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts index 6854a8f4868..9512038cc3c 100644 --- a/code/lib/core-server/src/presets/common-preset.ts +++ b/code/lib/core-server/src/presets/common-preset.ts @@ -194,6 +194,7 @@ export const features = async ( storyStoreV7: true, argTypeTargetsV7: true, legacyDecoratorFileOrder: false, + disallowImplicitActionsInRenderV8: false, }); export const csfIndexer: Indexer = { diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts index f5043c362d7..839fa1cb424 100644 --- a/code/lib/types/src/modules/core-common.ts +++ b/code/lib/types/src/modules/core-common.ts @@ -356,6 +356,13 @@ export interface StorybookConfig { * Apply decorators from preview.js before decorators from addons or frameworks */ legacyDecoratorFileOrder?: boolean; + + /** + * Disallow implicit actions during rendering. This will be the default in Storybook 8. + * + * This will make sure that your story renders the same no matter if docgen is enabled or not. + */ + disallowImplicitActionsInRenderV8?: boolean; }; build?: TestBuildConfig; From 23c89a103f536be1d225ec7d4cfae957edd5a642 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 15 Nov 2023 16:32:59 +0100 Subject: [PATCH 051/170] Fix dts build --- code/addons/actions/src/typings.d.ts | 1 + 1 file changed, 1 insertion(+) create mode 100644 code/addons/actions/src/typings.d.ts diff --git a/code/addons/actions/src/typings.d.ts b/code/addons/actions/src/typings.d.ts new file mode 100644 index 00000000000..fba51cec4ab --- /dev/null +++ b/code/addons/actions/src/typings.d.ts @@ -0,0 +1 @@ +declare var FEATURES: import('@storybook/types').StorybookConfig['features']; From 9115617281a209553d8ac05f8063aed7971a44b8 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 15 Nov 2023 17:52:43 +0100 Subject: [PATCH 052/170] gracefully handle ast parsing error in preview file --- code/lib/csf-tools/src/ConfigFile.ts | 49 ++++++++++++++++++-- code/lib/telemetry/src/storybook-metadata.ts | 18 ++++--- 2 files changed, 57 insertions(+), 10 deletions(-) diff --git a/code/lib/csf-tools/src/ConfigFile.ts b/code/lib/csf-tools/src/ConfigFile.ts index e31750a2fed..eb2921b4e06 100644 --- a/code/lib/csf-tools/src/ConfigFile.ts +++ b/code/lib/csf-tools/src/ConfigFile.ts @@ -1,5 +1,6 @@ /* eslint-disable no-underscore-dangle */ import fs from 'fs-extra'; +import dedent from 'ts-dedent'; import * as t from '@babel/types'; @@ -12,6 +13,30 @@ import { babelParse } from './babelParse'; const logger = console; +const getCsfParsingErrorMessage = ({ + expectedType, + foundType, + node, +}: { + expectedType: string; + foundType: string | undefined; + node: any | undefined; +}) => { + let nodeInfo = ''; + if (node) { + try { + nodeInfo = JSON.stringify(node); + } catch (e) { + // + } + } + + return dedent` + CSF Parsing error: Expected '${expectedType}' but found '${foundType}' instead in '${node?.type}'. + ${nodeInfo} + `; +}; + const propKey = (p: t.ObjectProperty) => { if (t.isIdentifier(p.key)) return p.key.name; if (t.isStringLiteral(p.key)) return p.key.value; @@ -163,7 +188,13 @@ export class ConfigFile { } }); } else { - logger.warn(`Unexpected ${JSON.stringify(node)}`); + logger.warn( + getCsfParsingErrorMessage({ + expectedType: 'ObjectExpression', + foundType: decl?.type, + node: decl || node.declaration, + }) + ); } }, }, @@ -183,7 +214,13 @@ export class ConfigFile { } }); } else { - logger.warn(`Unexpected ${JSON.stringify(node)}`); + logger.warn( + getCsfParsingErrorMessage({ + expectedType: 'VariableDeclaration', + foundType: node.declaration?.type, + node: node.declaration, + }) + ); } }, }, @@ -223,7 +260,13 @@ export class ConfigFile { } }); } else { - logger.warn(`Unexpected ${JSON.stringify(node)}`); + logger.warn( + getCsfParsingErrorMessage({ + expectedType: 'ObjectExpression', + foundType: exportObject?.type, + node: exportObject, + }) + ); } } } diff --git a/code/lib/telemetry/src/storybook-metadata.ts b/code/lib/telemetry/src/storybook-metadata.ts index 2c70b566f97..782c4d4a4b7 100644 --- a/code/lib/telemetry/src/storybook-metadata.ts +++ b/code/lib/telemetry/src/storybook-metadata.ts @@ -164,13 +164,17 @@ export const computeStorybookMetadata = async ({ const storybookInfo = getStorybookInfo(packageJson); - const { previewConfig } = storybookInfo; - if (previewConfig) { - const config = await readConfig(previewConfig); - const usesGlobals = !!( - config.getFieldNode(['globals']) || config.getFieldNode(['globalTypes']) - ); - metadata.preview = { ...metadata.preview, usesGlobals }; + try { + const { previewConfig } = storybookInfo; + if (previewConfig) { + const config = await readConfig(previewConfig); + const usesGlobals = !!( + config.getFieldNode(['globals']) || config.getFieldNode(['globalTypes']) + ); + metadata.preview = { ...metadata.preview, usesGlobals }; + } + } catch (e) { + // gracefully handle error, as it's not critical information and AST parsing can cause trouble } const storybookVersion = storybookPackages[storybookInfo.frameworkPackage]?.version; From e33d18f2a78fd5fa3437e7dc5cc1b7465053a367 Mon Sep 17 00:00:00 2001 From: Joe Vaughan <122215197+joevaugh4n@users.noreply.github.com> Date: Wed, 15 Nov 2023 19:04:06 +0000 Subject: [PATCH 053/170] Update config.yml --- .github/ISSUE_TEMPLATE/config.yml | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml index 95be4a49c70..75238b19d61 100644 --- a/.github/ISSUE_TEMPLATE/config.yml +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -3,15 +3,18 @@ contact_links: - name: View documentation šŸ“š url: https://storybook.js.org/docs/ about: Check out the official docs for answers to common questions. - - name: Feature Requests šŸ’” + - name: Feature requests šŸ’” url: https://github.com/storybookjs/storybook/discussions/new?category=ideas about: Suggest a feature idea for this project. - name: Open an RFC šŸ¦„ url: https://github.com/storybookjs/storybook/discussions/new?category=rfc about: Do you want to propose a more involved change to Storybook? Open an RFC (Request for Comments) to start a discussion. - - name: Questions & discussions šŸ¤” + - name: Questions šŸ’­ + url: https://github.com/storybookjs/storybook/discussions/new?category=help + about: Need support with a Storybook problem? Open up a help request. + - name: Discussions šŸ™Œ url: https://github.com/storybookjs/storybook/discussions - about: Ask questions, show off your Storybook, etc. - - name: Community Discord šŸ’¬ + about: Show off your Storybook or discuss the project. + - name: Community Discord šŸŽ‰ url: https://discord.gg/storybook - about: Community discussions, interactive support, contributor help + about: Meet other community members and get contributor help. From 411202ff63a71f5c958c8f7bf815400b97761c0f Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 16 Nov 2023 09:25:23 +0100 Subject: [PATCH 054/170] make CLI --test flag be true when `process.env.SB_TESTBUILD` === `true` --- code/lib/cli/src/generate.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/code/lib/cli/src/generate.ts b/code/lib/cli/src/generate.ts index 76c00eca2d2..e5811888521 100644 --- a/code/lib/cli/src/generate.ts +++ b/code/lib/cli/src/generate.ts @@ -273,7 +273,11 @@ command('build') configDir: 'SBCONFIG_CONFIG_DIR', }); - await build({ ...options, packageJson: pkg }).catch(() => process.exit(1)); + await build({ + ...options, + packageJson: pkg, + test: !!options.test || process.env.SB_TESTBUILD === 'true', + }).catch(() => process.exit(1)); }); program.on('command:*', ([invalidCmd]) => { From e3a59328539d65bff565852a5da73d0801d97966 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 16 Nov 2023 09:27:36 +0100 Subject: [PATCH 055/170] Prettify docs --- docs/api/main-config-typescript.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/api/main-config-typescript.md b/docs/api/main-config-typescript.md index 5ac80985eb9..89f11b1cbd5 100644 --- a/docs/api/main-config-typescript.md +++ b/docs/api/main-config-typescript.md @@ -90,11 +90,11 @@ Only available for React Storybook projects. Options to pass to react-docgen-typ ## `skipBabel` -Deprecated: Will be removed in Storybook 8.0. Use `skipCompiler` instead +Deprecated: Will be removed in Storybook 8.0. Use `skipCompiler` instead. Type: `boolean` -Disable parsing of TypeScript files through babel. +Disable parsing of TypeScript files through Babel. From 41ab56ba6f8cbb8e125e871f1e3eb951d6050315 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 16 Nov 2023 11:32:49 +0100 Subject: [PATCH 056/170] fix issue where setting status without index, crashes storybook --- code/lib/manager-api/src/modules/stories.ts | 4 ++- .../lib/manager-api/src/tests/stories.test.ts | 28 +++++++++++++++++++ 2 files changed, 31 insertions(+), 1 deletion(-) diff --git a/code/lib/manager-api/src/modules/stories.ts b/code/lib/manager-api/src/modules/stories.ts index 795f9460b10..dc0af196679 100644 --- a/code/lib/manager-api/src/modules/stories.ts +++ b/code/lib/manager-api/src/modules/stories.ts @@ -612,7 +612,9 @@ export const init: ModuleFn = ({ }); await store.setState({ status: newStatus }, { persistence: 'session' }); - await api.setIndex(index); + if (index) { + await api.setIndex(index); + } }, experimental_setFilter: async (id, filterFunction) => { const { internal_index: index } = store.getState(); diff --git a/code/lib/manager-api/src/tests/stories.test.ts b/code/lib/manager-api/src/tests/stories.test.ts index 76213e10be2..a115f64c79f 100644 --- a/code/lib/manager-api/src/tests/stories.test.ts +++ b/code/lib/manager-api/src/tests/stories.test.ts @@ -1251,6 +1251,34 @@ describe('stories API', () => { } `); }); + it('skips updating index, if index is unset', async () => { + const moduleArgs = createMockModuleArgs({}); + const { api } = initStories(moduleArgs as unknown as ModuleArgs); + const { store } = moduleArgs; + + // await api.setIndex({ v: 4, entries: mockEntries }); + + await expect( + api.experimental_updateStatus('a-addon-id', { + 'a-story-id': { + status: 'pending', + title: 'an addon title', + description: 'an addon description', + }, + }) + ).resolves.not.toThrow(); + expect(store.getState().status).toMatchInlineSnapshot(` + Object { + "a-story-id": Object { + "a-addon-id": Object { + "description": "an addon description", + "status": "pending", + "title": "an addon title", + }, + }, + } + `); + }); it('updates multiple stories', async () => { const moduleArgs = createMockModuleArgs({}); const { api } = initStories(moduleArgs as unknown as ModuleArgs); From 962bf861a9981dd60df90b771ed59ff7406964d8 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Thu, 16 Nov 2023 12:00:21 +0100 Subject: [PATCH 057/170] cleanup --- code/lib/manager-api/src/tests/stories.test.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/code/lib/manager-api/src/tests/stories.test.ts b/code/lib/manager-api/src/tests/stories.test.ts index a115f64c79f..7733f569e5c 100644 --- a/code/lib/manager-api/src/tests/stories.test.ts +++ b/code/lib/manager-api/src/tests/stories.test.ts @@ -1256,8 +1256,6 @@ describe('stories API', () => { const { api } = initStories(moduleArgs as unknown as ModuleArgs); const { store } = moduleArgs; - // await api.setIndex({ v: 4, entries: mockEntries }); - await expect( api.experimental_updateStatus('a-addon-id', { 'a-story-id': { From d71bc5a4e5d7f83d3cf136080c6e38b7d7800143 Mon Sep 17 00:00:00 2001 From: Joe Vaughan <122215197+joevaugh4n@users.noreply.github.com> Date: Thu, 16 Nov 2023 11:15:11 +0000 Subject: [PATCH 058/170] Update help.yml --- .github/DISCUSSION_TEMPLATE/help.yml | 35 ++++++++++++++++++---------- 1 file changed, 23 insertions(+), 12 deletions(-) diff --git a/.github/DISCUSSION_TEMPLATE/help.yml b/.github/DISCUSSION_TEMPLATE/help.yml index ddbaaca364a..fcdd32a46bc 100644 --- a/.github/DISCUSSION_TEMPLATE/help.yml +++ b/.github/DISCUSSION_TEMPLATE/help.yml @@ -1,25 +1,36 @@ ---- body: - - type: textarea + - type: markdown + attributes: + value: | + Thanks for taking the time to start a new discussion! + + Before you post: + ā€¢ Check if someone has already asked/answered your question in a previous discussion. + + When you're ready to post: + ā€¢ Add tags to your thread (e.g. 'React', 'Vue', 'Vite') to make your issue clearer for other users. + + - type: textarea attributes: label: Summary - description: How do you need help? - placeholder: I need help with... - validations: + description: How can we help? + validations: required: true + - type: textarea attributes: label: Additional information - description: Share your Storybook configuration (`main.js or ts`), any error messages, or relevant dependencies + description: | + Share Your Storybook configuration (`main.js or main.ts`), your Storybook version number, any error messages, or any relevant dependencies. These help us get a clearer understanding of what might be going wrong. + + P.s. please share code as text rather than as a screenshot! It makes debugging much easier and faster. render: js - validations: + validations: required: false + - type: input attributes: - label: Share an example - description: Help us debug your issue by creating a minimal reproduction. You can do this with StackBlitz by heading to [https://storybook.new](https://storybook.new)! + label: Create a reproduction + description: Help us debug by creating a minimal reproduction with [https://storybook.new](https://storybook.new) validations: required: false - - type: markdown - attributes: null - value: Before submitting, consider adding relevant labels to your thread (e.g. 'react', 'vue', 'vite'). That makes it easier for other users to spot your request. Thanks! From eb3c8c9a9403a1dc0c9a88f66af38de151e73c21 Mon Sep 17 00:00:00 2001 From: Joe Vaughan <122215197+joevaugh4n@users.noreply.github.com> Date: Thu, 16 Nov 2023 12:22:53 +0000 Subject: [PATCH 059/170] Update help.yml --- .github/DISCUSSION_TEMPLATE/help.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/DISCUSSION_TEMPLATE/help.yml b/.github/DISCUSSION_TEMPLATE/help.yml index fcdd32a46bc..2c588e76e6d 100644 --- a/.github/DISCUSSION_TEMPLATE/help.yml +++ b/.github/DISCUSSION_TEMPLATE/help.yml @@ -8,7 +8,7 @@ body: ā€¢ Check if someone has already asked/answered your question in a previous discussion. When you're ready to post: - ā€¢ Add tags to your thread (e.g. 'React', 'Vue', 'Vite') to make your issue clearer for other users. + ā€¢ Add tags to your discussion (e.g. 'React', 'Vue', 'Vite') to make it clearer for other users. - type: textarea attributes: From 7aef3e4f76f445646ba2a2558193018c16f5aee7 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 16 Nov 2023 16:27:05 +0100 Subject: [PATCH 060/170] Address review comments --- MIGRATION.md | 4 +-- code/addons/actions/src/addArgsHelpers.ts | 3 ++- .../actions/src/models/ActionOptions.ts | 1 + code/addons/actions/src/runtime/action.ts | 25 +++++++------------ .../core-events/src/errors/preview-errors.ts | 4 +-- 5 files changed, 16 insertions(+), 21 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index 77a3ae9613e..8e401c599e7 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,7 +1,7 @@

Migration

- [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - - [Using implicit actions during rendering is deprecated (for example in the play function)](#using-implicit-actions-during-rendering-is-deprecated-for-example-in-the-play-function) + - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) - [From version 7.4.0 to 7.5.0](#from-version-740-to-750) @@ -311,7 +311,7 @@ ## From version 7.5.0 to 7.6.0 -#### Using implicit actions during rendering is deprecated (for example in the play function) +#### Using implicit actions during rendering is deprecated In Storybook 7, we inferred if the component accepts any action props, by checking if it starts with `onX` (for example `onClick`), or as configured by `actions.argTypesRegex`. diff --git a/code/addons/actions/src/addArgsHelpers.ts b/code/addons/actions/src/addArgsHelpers.ts index 0dcb56c32f5..cd4f67897a5 100644 --- a/code/addons/actions/src/addArgsHelpers.ts +++ b/code/addons/actions/src/addArgsHelpers.ts @@ -19,6 +19,7 @@ export const inferActionsFromArgTypesRegex: ArgsEnhancer = (context) = const { initialArgs, argTypes, + id, parameters: { actions }, } = context; if (!actions || actions.disable || !actions.argTypesRegex || !argTypes) { @@ -32,7 +33,7 @@ export const inferActionsFromArgTypesRegex: ArgsEnhancer = (context) = return argTypesMatchingRegex.reduce((acc, [name, argType]) => { if (isInInitialArgs(name, initialArgs)) { - acc[name] = action(name, { implicit: true }); + acc[name] = action(name, { implicit: true, id }); } return acc; }, {} as Args); diff --git a/code/addons/actions/src/models/ActionOptions.ts b/code/addons/actions/src/models/ActionOptions.ts index b503df069d5..ffd8d373b3f 100644 --- a/code/addons/actions/src/models/ActionOptions.ts +++ b/code/addons/actions/src/models/ActionOptions.ts @@ -5,6 +5,7 @@ interface Options { clearOnStoryChange: boolean; limit: number; implicit: boolean; + id: string; } export type ActionOptions = Partial & Partial; diff --git a/code/addons/actions/src/runtime/action.ts b/code/addons/actions/src/runtime/action.ts index 365bb487621..9955f27637d 100644 --- a/code/addons/actions/src/runtime/action.ts +++ b/code/addons/actions/src/runtime/action.ts @@ -4,7 +4,6 @@ import { addons } from '@storybook/preview-api'; import type { Renderer } from '@storybook/types'; import { global } from '@storybook/global'; import { ImplicitActionsDuringRendering } from '@storybook/core-events/preview-errors'; -import dedent from 'ts-dedent'; import { EVENT_ID } from '../constants'; import type { ActionDisplay, ActionOptions, HandlerFunction } from '../models'; import { config } from './configureActions'; @@ -70,23 +69,17 @@ export function action(name: string, options: ActionOptions = {}): HandlerFuncti ); if (storyRenderer) { - if (window?.FEATURES?.disallowImplicitActionsInRenderV8) { + const deprecated = !window?.FEATURES?.disallowImplicitActionsInRenderV8; + const error = new ImplicitActionsDuringRendering({ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - throw new ImplicitActionsDuringRendering({ phase: storyRenderer.phase!, name }); + phase: storyRenderer.phase!, + name, + deprecated, + }); + if (deprecated) { + console.warn(error); } else { - console.warn(dedent` - We detected that you use an implicit action arg during ${storyRenderer.phase} of your story. - This is deprecated and won't work in Storybook 8 anymore. - - Please provide an explicit spy to your args like this: - import { fn } from '@storybook/test'; - ... - args: { - ${name}: fn() - } - - See: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#using-implicit-actions-during-rendering-is-deprecated-for-example-in-the-play-function - `); + throw error; } } } diff --git a/code/lib/core-events/src/errors/preview-errors.ts b/code/lib/core-events/src/errors/preview-errors.ts index dda274d158d..50cb0609861 100644 --- a/code/lib/core-events/src/errors/preview-errors.ts +++ b/code/lib/core-events/src/errors/preview-errors.ts @@ -57,14 +57,14 @@ export class ImplicitActionsDuringRendering extends StorybookError { readonly documentation = 'https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#using-implicit-actions-during-rendering-is-deprecated-for-example-in-the-play-function'; - constructor(public data: { phase: string; name: string }) { + constructor(public data: { phase: string; name: string; deprecated: boolean }) { super(); } template() { return dedent` We detected that you use an implicit action arg during ${this.data.phase} of your story. - + ${this.data.deprecated ? `\nThis is deprecated and won't work in Storybook 8 anymore.\n` : ``} Please provide an explicit spy to your args like this: import { fn } from '@storybook/test'; ... From 483943630be997236248aa10bf1717df2eff1a4a Mon Sep 17 00:00:00 2001 From: Joe Vaughan <122215197+joevaugh4n@users.noreply.github.com> Date: Thu, 16 Nov 2023 18:49:05 +0000 Subject: [PATCH 061/170] Update .github/DISCUSSION_TEMPLATE/help.yml Co-authored-by: Kyle Gach --- .github/DISCUSSION_TEMPLATE/help.yml | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/.github/DISCUSSION_TEMPLATE/help.yml b/.github/DISCUSSION_TEMPLATE/help.yml index 2c588e76e6d..6b28e8111f5 100644 --- a/.github/DISCUSSION_TEMPLATE/help.yml +++ b/.github/DISCUSSION_TEMPLATE/help.yml @@ -2,13 +2,13 @@ body: - type: markdown attributes: value: | - Thanks for taking the time to start a new discussion! +Thanks for taking the time to start a new discussion! - Before you post: - ā€¢ Check if someone has already asked/answered your question in a previous discussion. +Before you post: +- Check if someone has already asked/answered your question in a previous discussion. - When you're ready to post: - ā€¢ Add tags to your discussion (e.g. 'React', 'Vue', 'Vite') to make it clearer for other users. +When you're ready to post: +- Add tags to your discussion (e.g. 'React', 'Vue', 'Vite') to make it clearer for other users. - type: textarea attributes: From 5112a32d436a0cb4b5ffa0d3895a183e422d3b56 Mon Sep 17 00:00:00 2001 From: Joe Vaughan <122215197+joevaugh4n@users.noreply.github.com> Date: Thu, 16 Nov 2023 18:49:25 +0000 Subject: [PATCH 062/170] Update .github/DISCUSSION_TEMPLATE/help.yml Co-authored-by: Kyle Gach --- .github/DISCUSSION_TEMPLATE/help.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/DISCUSSION_TEMPLATE/help.yml b/.github/DISCUSSION_TEMPLATE/help.yml index 6b28e8111f5..520805989d5 100644 --- a/.github/DISCUSSION_TEMPLATE/help.yml +++ b/.github/DISCUSSION_TEMPLATE/help.yml @@ -21,7 +21,7 @@ When you're ready to post: attributes: label: Additional information description: | - Share Your Storybook configuration (`main.js or main.ts`), your Storybook version number, any error messages, or any relevant dependencies. These help us get a clearer understanding of what might be going wrong. + Share Your Storybook configuration (`main.js` or `main.ts`), your Storybook version number, any error messages, and any relevant dependencies. These help us get a clearer understanding of what might be going wrong. P.s. please share code as text rather than as a screenshot! It makes debugging much easier and faster. render: js From f74414b52351498413d8976727120516c595bc5f Mon Sep 17 00:00:00 2001 From: Joe Vaughan <122215197+joevaugh4n@users.noreply.github.com> Date: Thu, 16 Nov 2023 18:49:40 +0000 Subject: [PATCH 063/170] Update .github/DISCUSSION_TEMPLATE/help.yml Co-authored-by: Kyle Gach --- .github/DISCUSSION_TEMPLATE/help.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/DISCUSSION_TEMPLATE/help.yml b/.github/DISCUSSION_TEMPLATE/help.yml index 520805989d5..970bb18d576 100644 --- a/.github/DISCUSSION_TEMPLATE/help.yml +++ b/.github/DISCUSSION_TEMPLATE/help.yml @@ -23,7 +23,7 @@ When you're ready to post: description: | Share Your Storybook configuration (`main.js` or `main.ts`), your Storybook version number, any error messages, and any relevant dependencies. These help us get a clearer understanding of what might be going wrong. - P.s. please share code as text rather than as a screenshot! It makes debugging much easier and faster. + P.S. Please [share code as text](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks) rather than as a screenshot! It makes debugging much easier and faster. render: js validations: required: false From 0d0a1da8edbc685434795f509631c74b5a68d99a Mon Sep 17 00:00:00 2001 From: Tao Zhou Date: Thu, 16 Nov 2023 11:44:42 -0800 Subject: [PATCH 064/170] Core: do not fail the build on warnOnIncompatibleAddons --- code/lib/core-server/src/build-dev.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/code/lib/core-server/src/build-dev.ts b/code/lib/core-server/src/build-dev.ts index 1e321a7d293..7092b9341f4 100644 --- a/code/lib/core-server/src/build-dev.ts +++ b/code/lib/core-server/src/build-dev.ts @@ -74,7 +74,11 @@ export async function buildDevStandalone( corePresets.push(join(frameworkName, 'preset')); - await warnOnIncompatibleAddons(config); + try { + await warnOnIncompatibleAddons(config); + } catch (e) { + console.warn("Failed to check for incompatible addons", e); + } // Load first pass: We need to determine the builder // We need to do this because builders might introduce 'overridePresets' which we need to take into account From b8ee9e95dd62f7ae5a826e956f4c1b200c7c71f8 Mon Sep 17 00:00:00 2001 From: Ed Preston Date: Fri, 17 Nov 2023 17:29:45 +1100 Subject: [PATCH 065/170] chore: remove warnings by updating to jscodeshift@0.15.1 --- code/lib/cli/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 1c05b073d39..8923fa6400c 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -83,7 +83,7 @@ "get-port": "^5.1.1", "giget": "^1.0.0", "globby": "^11.0.2", - "jscodeshift": "^0.14.0", + "jscodeshift": "^0.15.1", "leven": "^3.1.0", "ora": "^5.4.1", "prettier": "^2.8.0", From 4b52a2809fbc4b084ebd29374cb5e5ebee422cdf Mon Sep 17 00:00:00 2001 From: Martin Nabhan <7613182+martinnabhan@users.noreply.github.com> Date: Fri, 17 Nov 2023 18:13:39 +0900 Subject: [PATCH 066/170] Add back image context CommonJS export --- code/frameworks/nextjs/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index c1bee25f670..fab731daf27 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -29,7 +29,7 @@ }, "./dist/image-context": { "types": "./dist/image-context.d.ts", - "require": "./dist/image-context.mjs", + "require": "./dist/image-context.js", "import": "./dist/image-context.mjs" }, "./preset": { From 090b9be903c9609c3d85a3bb654bf5a83fa81302 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 17 Nov 2023 10:16:36 +0100 Subject: [PATCH 067/170] Update yarn.lock --- code/yarn.lock | 120 +++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 117 insertions(+), 3 deletions(-) diff --git a/code/yarn.lock b/code/yarn.lock index ba6d74b8127..3999f341dbe 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -612,6 +612,21 @@ __metadata: languageName: node linkType: hard +"@babel/helper-module-transforms@npm:^7.23.3": + version: 7.23.3 + resolution: "@babel/helper-module-transforms@npm:7.23.3" + dependencies: + "@babel/helper-environment-visitor": "npm:^7.22.20" + "@babel/helper-module-imports": "npm:^7.22.15" + "@babel/helper-simple-access": "npm:^7.22.5" + "@babel/helper-split-export-declaration": "npm:^7.22.6" + "@babel/helper-validator-identifier": "npm:^7.22.20" + peerDependencies: + "@babel/core": ^7.0.0 + checksum: 211e1399d0c4993671e8e5c2b25383f08bee40004ace5404ed4065f0e9258cc85d99c1b82fd456c030ce5cfd4d8f310355b54ef35de9924eabfc3dff1331d946 + languageName: node + linkType: hard + "@babel/helper-optimise-call-expression@npm:^7.22.5": version: 7.22.5 resolution: "@babel/helper-optimise-call-expression@npm:7.22.5" @@ -1024,6 +1039,17 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-syntax-jsx@npm:^7.23.3": + version: 7.23.3 + resolution: "@babel/plugin-syntax-jsx@npm:7.23.3" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.22.5" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 563bb7599b868773f1c7c1d441ecc9bc53aeb7832775da36752c926fc402a1fa5421505b39e724f71eb217c13e4b93117e081cac39723b0e11dac4c897f33c3e + languageName: node + linkType: hard + "@babel/plugin-syntax-logical-assignment-operators@npm:^7.10.4, @babel/plugin-syntax-logical-assignment-operators@npm:^7.8.3": version: 7.10.4 resolution: "@babel/plugin-syntax-logical-assignment-operators@npm:7.10.4" @@ -1123,6 +1149,17 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-syntax-typescript@npm:^7.23.3": + version: 7.23.3 + resolution: "@babel/plugin-syntax-typescript@npm:7.23.3" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.22.5" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 4d6e9cdb9d0bfb9bd9b220fc951d937fce2ca69135ec121153572cebe81d86abc9a489208d6b69ee5f10cadcaeffa10d0425340a5029e40e14a6025021b90948 + languageName: node + linkType: hard + "@babel/plugin-syntax-unicode-sets-regex@npm:^7.18.6": version: 7.18.6 resolution: "@babel/plugin-syntax-unicode-sets-regex@npm:7.18.6" @@ -1442,6 +1479,19 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-modules-commonjs@npm:^7.23.3": + version: 7.23.3 + resolution: "@babel/plugin-transform-modules-commonjs@npm:7.23.3" + dependencies: + "@babel/helper-module-transforms": "npm:^7.23.3" + "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-simple-access": "npm:^7.22.5" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 5c8840c5c9ecba39367ae17c973ed13dbc43234147b77ae780eec65010e2a9993c5d717721b23e8179f7cf49decdd325c509b241d69cfbf92aa647a1d8d5a37d + languageName: node + linkType: hard + "@babel/plugin-transform-modules-systemjs@npm:^7.22.11, @babel/plugin-transform-modules-systemjs@npm:^7.22.5, @babel/plugin-transform-modules-systemjs@npm:^7.23.0": version: 7.23.0 resolution: "@babel/plugin-transform-modules-systemjs@npm:7.23.0" @@ -1838,6 +1888,20 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-typescript@npm:^7.23.3": + version: 7.23.3 + resolution: "@babel/plugin-transform-typescript@npm:7.23.3" + dependencies: + "@babel/helper-annotate-as-pure": "npm:^7.22.5" + "@babel/helper-create-class-features-plugin": "npm:^7.22.15" + "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/plugin-syntax-typescript": "npm:^7.23.3" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: a3c738efcf491ceb1eee646f57c44990ee0c80465527b88fcfa0b7602688c4ff8c165a4c5b62caf05d968b095212018fd30a02879c12d37c657081f57b31fb26 + languageName: node + linkType: hard + "@babel/plugin-transform-unicode-escapes@npm:^7.22.10, @babel/plugin-transform-unicode-escapes@npm:^7.22.5": version: 7.22.10 resolution: "@babel/plugin-transform-unicode-escapes@npm:7.22.10" @@ -2237,6 +2301,21 @@ __metadata: languageName: node linkType: hard +"@babel/preset-typescript@npm:^7.23.0": + version: 7.23.3 + resolution: "@babel/preset-typescript@npm:7.23.3" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.22.5" + "@babel/helper-validator-option": "npm:^7.22.15" + "@babel/plugin-syntax-jsx": "npm:^7.23.3" + "@babel/plugin-transform-modules-commonjs": "npm:^7.23.3" + "@babel/plugin-transform-typescript": "npm:^7.23.3" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: e72b654c7f0f08b35d7e1c0e3a59c0c13037f295c425760b8b148aa7dde01e6ddd982efc525710f997a1494fafdd55cb525738c016609e7e4d703d02014152b7 + languageName: node + linkType: hard + "@babel/preset-typescript@npm:^7.23.2": version: 7.23.2 resolution: "@babel/preset-typescript@npm:7.23.2" @@ -2252,7 +2331,7 @@ __metadata: languageName: node linkType: hard -"@babel/register@npm:^7.13.16": +"@babel/register@npm:^7.13.16, @babel/register@npm:^7.22.15": version: 7.22.15 resolution: "@babel/register@npm:7.22.15" dependencies: @@ -6172,7 +6251,7 @@ __metadata: get-port: "npm:^5.1.1" giget: "npm:^1.0.0" globby: "npm:^11.0.2" - jscodeshift: "npm:^0.14.0" + jscodeshift: "npm:^0.15.1" leven: "npm:^3.1.0" ora: "npm:^5.4.1" prettier: "npm:^2.8.0" @@ -20079,6 +20158,41 @@ __metadata: languageName: node linkType: hard +"jscodeshift@npm:^0.15.1": + version: 0.15.1 + resolution: "jscodeshift@npm:0.15.1" + dependencies: + "@babel/core": "npm:^7.23.0" + "@babel/parser": "npm:^7.23.0" + "@babel/plugin-transform-class-properties": "npm:^7.22.5" + "@babel/plugin-transform-modules-commonjs": "npm:^7.23.0" + "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.22.11" + "@babel/plugin-transform-optional-chaining": "npm:^7.23.0" + "@babel/plugin-transform-private-methods": "npm:^7.22.5" + "@babel/preset-flow": "npm:^7.22.15" + "@babel/preset-typescript": "npm:^7.23.0" + "@babel/register": "npm:^7.22.15" + babel-core: "npm:^7.0.0-bridge.0" + chalk: "npm:^4.1.2" + flow-parser: "npm:0.*" + graceful-fs: "npm:^4.2.4" + micromatch: "npm:^4.0.4" + neo-async: "npm:^2.5.0" + node-dir: "npm:^0.1.17" + recast: "npm:^0.23.3" + temp: "npm:^0.8.4" + write-file-atomic: "npm:^2.3.0" + peerDependencies: + "@babel/preset-env": ^7.1.6 + peerDependenciesMeta: + "@babel/preset-env": + optional: true + bin: + jscodeshift: bin/jscodeshift.js + checksum: 334de6ffa776a68b3f59f2f18a285ea977f3339d85e3517f3854761e65769ffa7e453c35cde320fc969106d573df39bd3fb08b23db54ae17c1b1516e5bf05742 + languageName: node + linkType: hard + "jsdom@npm:^16.4.0": version: 16.7.0 resolution: "jsdom@npm:16.7.0" @@ -25852,7 +25966,7 @@ __metadata: languageName: node linkType: hard -"recast@npm:^0.23.1": +"recast@npm:^0.23.1, recast@npm:^0.23.3": version: 0.23.4 resolution: "recast@npm:0.23.4" dependencies: From 8efaead946b95339681ddb6af9278f1635bc8e72 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Fri, 17 Nov 2023 10:48:14 +0000 Subject: [PATCH 068/170] Minor polish and added filtering tests --- .../my-component-exclude-tags.story.js.mdx | 14 ++ .../my-component-exclude-tags.story.ts.mdx | 20 ++ .../my-component-include-tags.story.js.mdx | 14 ++ .../my-component-include-tags.story.ts.mdx | 20 ++ .../my-component-skip-tags.story.js.mdx | 14 ++ .../my-component-skip-tags.story.ts.mdx | 20 ++ .../common/test-runner-a11y-config.ts.mdx | 2 +- .../common/test-runner-a11y-configure.ts.mdx | 2 +- .../common/test-runner-a11y-disable.ts.mdx | 2 +- docs/snippets/common/test-runner-auth.js.mdx | 12 + docs/snippets/common/test-runner-auth.ts.mdx | 16 ++ .../test-runner-custom-page-viewport.js.mdx | 32 +++ .../test-runner-custom-page-viewport.ts.mdx | 36 +++ .../common/test-runner-helper-function.ts.mdx | 2 +- .../common/test-runner-hooks-example.ts.mdx | 2 +- .../common/test-runner-tags-config.js.mdx | 11 + .../common/test-runner-tags-config.ts.mdx | 15 ++ .../test-runner-tags-exclude.config.js.mdx | 9 + .../test-runner-tags-exclude.config.ts.mdx | 13 + .../test-runner-tags-include.config.js.mdx | 9 + .../test-runner-tags-include.config.ts.mdx | 13 + .../test-runner-tags-skip.config.js.mdx | 9 + .../test-runner-tags-skip.config.ts.mdx | 13 + .../common/test-runner-waitpageready.js.mdx | 25 ++ .../common/test-runner-waitpageready.ts.mdx | 29 +++ docs/writing-tests/accessibility-testing.md | 6 +- docs/writing-tests/test-runner.md | 222 ++++++++++++++---- 27 files changed, 529 insertions(+), 53 deletions(-) create mode 100644 docs/snippets/common/my-component-exclude-tags.story.js.mdx create mode 100644 docs/snippets/common/my-component-exclude-tags.story.ts.mdx create mode 100644 docs/snippets/common/my-component-include-tags.story.js.mdx create mode 100644 docs/snippets/common/my-component-include-tags.story.ts.mdx create mode 100644 docs/snippets/common/my-component-skip-tags.story.js.mdx create mode 100644 docs/snippets/common/my-component-skip-tags.story.ts.mdx create mode 100644 docs/snippets/common/test-runner-auth.js.mdx create mode 100644 docs/snippets/common/test-runner-auth.ts.mdx create mode 100644 docs/snippets/common/test-runner-custom-page-viewport.js.mdx create mode 100644 docs/snippets/common/test-runner-custom-page-viewport.ts.mdx create mode 100644 docs/snippets/common/test-runner-tags-config.js.mdx create mode 100644 docs/snippets/common/test-runner-tags-config.ts.mdx create mode 100644 docs/snippets/common/test-runner-tags-exclude.config.js.mdx create mode 100644 docs/snippets/common/test-runner-tags-exclude.config.ts.mdx create mode 100644 docs/snippets/common/test-runner-tags-include.config.js.mdx create mode 100644 docs/snippets/common/test-runner-tags-include.config.ts.mdx create mode 100644 docs/snippets/common/test-runner-tags-skip.config.js.mdx create mode 100644 docs/snippets/common/test-runner-tags-skip.config.ts.mdx create mode 100644 docs/snippets/common/test-runner-waitpageready.js.mdx create mode 100644 docs/snippets/common/test-runner-waitpageready.ts.mdx diff --git a/docs/snippets/common/my-component-exclude-tags.story.js.mdx b/docs/snippets/common/my-component-exclude-tags.story.js.mdx new file mode 100644 index 00000000000..e0b35b71986 --- /dev/null +++ b/docs/snippets/common/my-component-exclude-tags.story.js.mdx @@ -0,0 +1,14 @@ +```js +// MyComponent.stories.js|jsx + +import { MyComponent } from './MyComponent'; + +export default { + component: MyComponent, + tags: ['no-tests'], // šŸ‘ˆ Excludes all stories from being tested with the test-runner +}; + +export const ExcludeStory = { + tags: ['no-tests'], // šŸ‘ˆ Configures the story to be excluded from testing via the `no-tests` tag +}; +``` diff --git a/docs/snippets/common/my-component-exclude-tags.story.ts.mdx b/docs/snippets/common/my-component-exclude-tags.story.ts.mdx new file mode 100644 index 00000000000..6fee748fadc --- /dev/null +++ b/docs/snippets/common/my-component-exclude-tags.story.ts.mdx @@ -0,0 +1,20 @@ +```ts +// MyComponent.stories.ts|tsx + +// Replace your-framework with the name of your framework +import type { Meta, StoryObj } from '@storybook/your-framework'; + +import { MyComponent } from './MyComponent'; + +const meta: Meta = { + component: MyComponent, + tags: ['no-tests'], // šŸ‘ˆ Excludes all stories from being tested with the test-runner +}; + +export default meta; +type Story = StoryObj; + +export const ExcludeStory: Story = { + tags: ['no-tests'], // šŸ‘ˆ Configures the story to be excluded from testing via the `no-tests` tag +}; +``` diff --git a/docs/snippets/common/my-component-include-tags.story.js.mdx b/docs/snippets/common/my-component-include-tags.story.js.mdx new file mode 100644 index 00000000000..995f5285b1c --- /dev/null +++ b/docs/snippets/common/my-component-include-tags.story.js.mdx @@ -0,0 +1,14 @@ +```js +// MyComponent.stories.js|jsx + +import { MyComponent } from './MyComponent'; + +export default { + component: MyComponent, + tags: ['test-only'], // šŸ‘ˆ Runs tests only for stories with this tag +}; + +export const IncludeStory = { + tags: ['test-only'], // šŸ‘ˆ Configures the story to be added to the test suite with the test-runner +}; +``` diff --git a/docs/snippets/common/my-component-include-tags.story.ts.mdx b/docs/snippets/common/my-component-include-tags.story.ts.mdx new file mode 100644 index 00000000000..5e47651618b --- /dev/null +++ b/docs/snippets/common/my-component-include-tags.story.ts.mdx @@ -0,0 +1,20 @@ +```ts +// MyComponent.stories.ts|tsx + +// Replace your-framework with the name of your framework +import type { Meta, StoryObj } from '@storybook/your-framework'; + +import { MyComponent } from './MyComponent'; + +const meta: Meta = { + component: MyComponent, + tags: ['test-only'], // šŸ‘ˆ Runs tests only for stories with this tag +}; + +export default meta; +type Story = StoryObj; + +export const IncludeStory: Story = { + tags: ['test-only'], // šŸ‘ˆ Configures the story to be added to the test suite with the test-runner +}; +``` diff --git a/docs/snippets/common/my-component-skip-tags.story.js.mdx b/docs/snippets/common/my-component-skip-tags.story.js.mdx new file mode 100644 index 00000000000..bf3737cb2ef --- /dev/null +++ b/docs/snippets/common/my-component-skip-tags.story.js.mdx @@ -0,0 +1,14 @@ +```js +// MyComponent.stories.js|jsx + +import { MyComponent } from './MyComponent'; + +export default { + component: MyComponent, + tags: ['skip-test'], // šŸ‘ˆ Skips running tests on this story +}; + +export const SkipStory = { + tags: ['skip-test'], // šŸ‘ˆ Configures the story to be skipped when running tests with the test-runner +}; +``` diff --git a/docs/snippets/common/my-component-skip-tags.story.ts.mdx b/docs/snippets/common/my-component-skip-tags.story.ts.mdx new file mode 100644 index 00000000000..62c0d1dfbab --- /dev/null +++ b/docs/snippets/common/my-component-skip-tags.story.ts.mdx @@ -0,0 +1,20 @@ +```ts +// MyComponent.stories.ts|tsx + +// Replace your-framework with the name of your framework +import type { Meta, StoryObj } from '@storybook/your-framework'; + +import { MyComponent } from './MyComponent'; + +const meta: Meta = { + component: MyComponent, + tags: ['skip-test'], // šŸ‘ˆ Skips running tests on this story +}; + +export default meta; +type Story = StoryObj; + +export const SkipStory: Story = { + tags: ['skip-test'], // šŸ‘ˆ Configures the story to be skipped when running tests with the test-runner +}; +``` diff --git a/docs/snippets/common/test-runner-a11y-config.ts.mdx b/docs/snippets/common/test-runner-a11y-config.ts.mdx index a317cb46ad1..c007a62c124 100644 --- a/docs/snippets/common/test-runner-a11y-config.ts.mdx +++ b/docs/snippets/common/test-runner-a11y-config.ts.mdx @@ -22,5 +22,5 @@ const a11yConfig: TestRunnerConfig = { }, }; -module.exports = a11yConfig; +export default a11yConfig; ``` diff --git a/docs/snippets/common/test-runner-a11y-configure.ts.mdx b/docs/snippets/common/test-runner-a11y-configure.ts.mdx index 8828a71bba0..5a9adea12c8 100644 --- a/docs/snippets/common/test-runner-a11y-configure.ts.mdx +++ b/docs/snippets/common/test-runner-a11y-configure.ts.mdx @@ -32,5 +32,5 @@ const a11yConfig: TestRunnerConfig = { }, }; -module.exports = a11yConfig; +export default a11yConfig; ``` diff --git a/docs/snippets/common/test-runner-a11y-disable.ts.mdx b/docs/snippets/common/test-runner-a11y-disable.ts.mdx index 986b8c09eaf..97d8cd06f0f 100644 --- a/docs/snippets/common/test-runner-a11y-disable.ts.mdx +++ b/docs/snippets/common/test-runner-a11y-disable.ts.mdx @@ -31,5 +31,5 @@ const a11yConfig: TestRunnerConfig = { }, }; -module.exports = a11yConfig; +export default a11yConfig; ``` diff --git a/docs/snippets/common/test-runner-auth.js.mdx b/docs/snippets/common/test-runner-auth.js.mdx new file mode 100644 index 00000000000..d4858de2316 --- /dev/null +++ b/docs/snippets/common/test-runner-auth.js.mdx @@ -0,0 +1,12 @@ +```js +// .storybook/test-runner.js + +module.exports = { + getHttpHeaders: async (url) => { + const token = url.includes('prod') ? 'XYZ' : 'ABC'; + return { + Authorization: `Bearer ${token}`, + }; + }, +}; +``` diff --git a/docs/snippets/common/test-runner-auth.ts.mdx b/docs/snippets/common/test-runner-auth.ts.mdx new file mode 100644 index 00000000000..c4fd82d8726 --- /dev/null +++ b/docs/snippets/common/test-runner-auth.ts.mdx @@ -0,0 +1,16 @@ +```ts +// .storybook/test-runner.ts + +import type { TestRunnerConfig } from '@storybook/test-runner'; + +const config: TestRunnerConfig = { + getHttpHeaders: async (url) => { + const token = url.includes('prod') ? 'prod-token' : 'dev-token'; + return { + Authorization: `Bearer ${token}`, + }; + }, +}; + +export default config; +``` diff --git a/docs/snippets/common/test-runner-custom-page-viewport.js.mdx b/docs/snippets/common/test-runner-custom-page-viewport.js.mdx new file mode 100644 index 00000000000..a4d5d0cc57f --- /dev/null +++ b/docs/snippets/common/test-runner-custom-page-viewport.js.mdx @@ -0,0 +1,32 @@ +```js +// .storybook/test-runner.js + +const { getStoryContext } = require('@storybook/test-runner'); +const { MINIMAL_VIEWPORTS } = require('@storybook/addon-viewport'); + +const DEFAULT_VIEWPORT_SIZE = { width: 1280, height: 720 }; + +module.exports = { + async preRender(page, story) { + // Accesses the story's parameters and retrieves the viewport used to render it + const context = await getStoryContext(page, story); + const viewportName = context.parameters?.viewport?.defaultViewport; + const viewportParameter = MINIMAL_VIEWPORTS[viewportName]; + + if (viewportParameter) { + const viewportSize = Object.entries(viewportParameter.styles).reduce( + (acc, [screen, size]) => ({ + ...acc, + // Converts the viewport size from percentages to numbers + [screen]: parseInt(size), + }), + {} + ); + // Configures the Playwright page to use the viewport size + page.setViewportSize(viewportSize); + } else { + page.setViewportSize(DEFAULT_VIEWPORT_SIZE); + } + }, +}; +``` diff --git a/docs/snippets/common/test-runner-custom-page-viewport.ts.mdx b/docs/snippets/common/test-runner-custom-page-viewport.ts.mdx new file mode 100644 index 00000000000..351b9e8bd0e --- /dev/null +++ b/docs/snippets/common/test-runner-custom-page-viewport.ts.mdx @@ -0,0 +1,36 @@ +```ts +// .storybook/test-runner.js + +import type { TestRunnerConfig } from '@storybook/test-runner'; +import { getStoryContext } from '@storybook/test-runner'; + +const { MINIMAL_VIEWPORTS } = require('@storybook/addon-viewport'); + +const DEFAULT_VIEWPORT_SIZE = { width: 1280, height: 720 }; + +const config: TestRunnerConfig = { + async preRender(page, story) { + // Accesses the story's parameters and retrieves the viewport used to render it + const context = await getStoryContext(page, story); + const viewportName = context.parameters?.viewport?.defaultViewport; + const viewportParameter = MINIMAL_VIEWPORTS[viewportName]; + + if (viewportParameter) { + const viewportSize = Object.entries(viewportParameter.styles).reduce( + (acc, [screen, size]) => ({ + ...acc, + // Converts the viewport size from percentages to numbers + [screen]: parseInt(size), + }), + {} + ); + // Configures the Playwright page to use the viewport size + page.setViewportSize(viewportSize); + } else { + page.setViewportSize(DEFAULT_VIEWPORT_SIZE); + } + }, +}; + +export default config; +``` diff --git a/docs/snippets/common/test-runner-helper-function.ts.mdx b/docs/snippets/common/test-runner-helper-function.ts.mdx index eea475d13f2..57a04bd7c46 100644 --- a/docs/snippets/common/test-runner-helper-function.ts.mdx +++ b/docs/snippets/common/test-runner-helper-function.ts.mdx @@ -31,5 +31,5 @@ const config: TestRunnerConfig = { }, }; -module.exports = config; +export default config; ``` diff --git a/docs/snippets/common/test-runner-hooks-example.ts.mdx b/docs/snippets/common/test-runner-hooks-example.ts.mdx index d05ddb64801..86398c9aeb4 100644 --- a/docs/snippets/common/test-runner-hooks-example.ts.mdx +++ b/docs/snippets/common/test-runner-hooks-example.ts.mdx @@ -24,5 +24,5 @@ const config: TestRunnerConfig = { }, }; -module.exports = config; +export default config; ``` diff --git a/docs/snippets/common/test-runner-tags-config.js.mdx b/docs/snippets/common/test-runner-tags-config.js.mdx new file mode 100644 index 00000000000..6ebfbb6c9fb --- /dev/null +++ b/docs/snippets/common/test-runner-tags-config.js.mdx @@ -0,0 +1,11 @@ +```js +// .storybook/test-runner.js + +module.exports = { + tags: { + include: ['test-only', 'pages'], + exclude: ['no-tests', 'tokens'], + skip: ['skip-test', 'layout'], + }, +}; +``` diff --git a/docs/snippets/common/test-runner-tags-config.ts.mdx b/docs/snippets/common/test-runner-tags-config.ts.mdx new file mode 100644 index 00000000000..023b13e77cc --- /dev/null +++ b/docs/snippets/common/test-runner-tags-config.ts.mdx @@ -0,0 +1,15 @@ +```ts +// .storybook/test-runner.ts + +import type { TestRunnerConfig } from '@storybook/test-runner'; + +const config: TestRunnerConfig = { + tags: { + include: ['test-only', 'pages'], + exclude: ['no-tests', 'tokens'], + skip: ['skip-test', 'layout'], + }, +}; + +export default config; +``` diff --git a/docs/snippets/common/test-runner-tags-exclude.config.js.mdx b/docs/snippets/common/test-runner-tags-exclude.config.js.mdx new file mode 100644 index 00000000000..5b73bb9bdf6 --- /dev/null +++ b/docs/snippets/common/test-runner-tags-exclude.config.js.mdx @@ -0,0 +1,9 @@ +```js +// .storybook/test-runner.js + +module.exports = { + tags: { + exclude: ['no-tests'], + }, +}; +``` diff --git a/docs/snippets/common/test-runner-tags-exclude.config.ts.mdx b/docs/snippets/common/test-runner-tags-exclude.config.ts.mdx new file mode 100644 index 00000000000..9712292fe33 --- /dev/null +++ b/docs/snippets/common/test-runner-tags-exclude.config.ts.mdx @@ -0,0 +1,13 @@ +```ts +// .storybook/test-runner.ts + +import type { TestRunnerConfig } from '@storybook/test-runner'; + +const config: TestRunnerConfig = { + tags: { + exclude: ['no-tests'], + }, +}; + +export default config; +``` diff --git a/docs/snippets/common/test-runner-tags-include.config.js.mdx b/docs/snippets/common/test-runner-tags-include.config.js.mdx new file mode 100644 index 00000000000..2b51222fed4 --- /dev/null +++ b/docs/snippets/common/test-runner-tags-include.config.js.mdx @@ -0,0 +1,9 @@ +```js +// .storybook/test-runner.js + +module.exports = { + tags: { + include: ['test-only'], + }, +}; +``` diff --git a/docs/snippets/common/test-runner-tags-include.config.ts.mdx b/docs/snippets/common/test-runner-tags-include.config.ts.mdx new file mode 100644 index 00000000000..b69e402aff9 --- /dev/null +++ b/docs/snippets/common/test-runner-tags-include.config.ts.mdx @@ -0,0 +1,13 @@ +```ts +// .storybook/test-runner.ts + +import type { TestRunnerConfig } from '@storybook/test-runner'; + +const config: TestRunnerConfig = { + tags: { + include: ['test-only'], + }, +}; + +export default config; +``` diff --git a/docs/snippets/common/test-runner-tags-skip.config.js.mdx b/docs/snippets/common/test-runner-tags-skip.config.js.mdx new file mode 100644 index 00000000000..bc82ef46d75 --- /dev/null +++ b/docs/snippets/common/test-runner-tags-skip.config.js.mdx @@ -0,0 +1,9 @@ +```js +// .storybook/test-runner.js + +module.exports = { + tags: { + skip: ['skip-test'], + }, +}; +``` diff --git a/docs/snippets/common/test-runner-tags-skip.config.ts.mdx b/docs/snippets/common/test-runner-tags-skip.config.ts.mdx new file mode 100644 index 00000000000..37a03bf7b1c --- /dev/null +++ b/docs/snippets/common/test-runner-tags-skip.config.ts.mdx @@ -0,0 +1,13 @@ +```ts +// .storybook/test-runner.ts + +import type { TestRunnerConfig } from '@storybook/test-runner'; + +const config: TestRunnerConfig = { + tags: { + skip: ['skip-test'], + }, +}; + +export default config; +``` diff --git a/docs/snippets/common/test-runner-waitpageready.js.mdx b/docs/snippets/common/test-runner-waitpageready.js.mdx new file mode 100644 index 00000000000..0dfb8aecb22 --- /dev/null +++ b/docs/snippets/common/test-runner-waitpageready.js.mdx @@ -0,0 +1,25 @@ +```js +// .storybook/test-runner.js + +const { waitForPageReady } = require('@storybook/test-runner'); +const { toMatchImageSnapshot } = require('jest-image-snapshot'); + +const customSnapshotsDir = `${process.cwd()}/__snapshots__`; + +module.exports = { + setup() { + expect.extend({ toMatchImageSnapshot }); + }, + async postRender(page, context) { + // Awaits for the page to be loaded and available including assets (e.g., fonts) + await waitForPageReady(page); + + // Generates a snapshot file based on the story identifier + const image = await page.screenshot(); + expect(image).toMatchImageSnapshot({ + customSnapshotsDir, + customSnapshotIdentifier: context.id, + }); + }, +}; +``` diff --git a/docs/snippets/common/test-runner-waitpageready.ts.mdx b/docs/snippets/common/test-runner-waitpageready.ts.mdx new file mode 100644 index 00000000000..7a3c1ae88d8 --- /dev/null +++ b/docs/snippets/common/test-runner-waitpageready.ts.mdx @@ -0,0 +1,29 @@ +```ts +// .storybook/test-runner.ts + +import type { TestRunnerConfig } from '@storybook/test-runner'; +import { waitForPageReady } from '@storybook/test-runner'; + +import { toMatchImageSnapshot } from 'jest-image-snapshot'; + +const customSnapshotsDir = `${process.cwd()}/__snapshots__`; + +const config: TestRunnerConfig = { + setup() { + expect.extend({ toMatchImageSnapshot }); + }, + async postRender(page, context) { + // Awaits for the page to be loaded and available including assets (e.g., fonts) + await waitForPageReady(page); + + // Generates a snapshot file based on the story identifier + const image = await page.screenshot(); + expect(image).toMatchImageSnapshot({ + customSnapshotsDir, + customSnapshotIdentifier: context.id, + }); + }, +}; + +export default config; +``` diff --git a/docs/writing-tests/accessibility-testing.md b/docs/writing-tests/accessibility-testing.md index 4773ec8594b..cbc39f9cdf1 100644 --- a/docs/writing-tests/accessibility-testing.md +++ b/docs/writing-tests/accessibility-testing.md @@ -203,11 +203,11 @@ Add a new [configuration file](./test-runner.md#test-hook-api) inside your Story -
+ -šŸ’” `preRender` and `postRender` are convenient hooks that allow you to extend the test runner's default configuration. Read more about them [here](./test-runner.md#test-hook-api). +`preRender` and `postRender` are convenient hooks that allow you to extend the test runner's default configuration. Read more about them [here](./test-runner.md#test-hook-api). -
+ When you execute the test runner (for example, with `yarn test-storybook`), it will run the accessibility audit and any [interaction tests](./interaction-testing.md) you might have configured for each component story. diff --git a/docs/writing-tests/test-runner.md b/docs/writing-tests/test-runner.md index ebecf03198d..fc34bbd9cae 100644 --- a/docs/writing-tests/test-runner.md +++ b/docs/writing-tests/test-runner.md @@ -52,9 +52,11 @@ Start your Storybook with: -
-šŸ’” Storybook's test runner requires either a locally running Storybook instance or a published Storybook to run all the existing tests. -
+ + +Storybook's test runner requires either a locally running Storybook instance or a published Storybook to run all the existing tests. + + Finally, open a new terminal window and run the test-runner with: @@ -79,30 +81,33 @@ Test runner offers zero-config support for Storybook. However, you can run `test The test-runner is powered by [Jest](https://jestjs.io/) and accepts a subset of its [CLI options](https://jestjs.io/docs/cli) (for example, `--watch`, `--maxWorkers`). If you're already using any of those flags in your project, you should be able to migrate them into Storybook's test-runner without any issues. Listed below are all the available flags and examples of using them. -| Options | Description | -| ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `--help` | Output usage information
`test-storybook --help` | -| `-s`, `--index-json` | Run in index json mode. Automatically detected (requires a compatible Storybook)
`test-storybook --index-json` | -| `--no-index-json` | Disables index json mode
`test-storybook --no-index-json` | -| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from
`test-storybook -c .storybook` | -| `--watch` | Run in watch mode
`test-storybook --watch` | -| `--watchAll` | Watch files for changes and rerun all tests when something changes.
`test-storybook --watchAll` | -| `--coverage` | Runs [coverage tests](./test-coverage.md) on your stories and components
`test-storybook --coverage` | -| `--coverageDirectory` | Directory where to write coverage report output
`test-storybook --coverage --coverageDirectory coverage/ui/storybook` | -| `--url` | Define the URL to run tests in. Useful for custom Storybook URLs
`test-storybook --url http://the-storybook-url-here.com` | -| `--browsers` | Define browsers to run tests in. One or multiple of: chromium, firefox, webkit
`test-storybook --browsers firefox chromium` | -| `--maxWorkers [amount]` | Specifies the maximum number of workers the worker-pool will spawn for running tests
`test-storybook --maxWorkers=2` | -| `--no-cache` | Disable the cache
`test-storybook --no-cache` | -| `--clearCache` | Deletes the Jest cache directory and then exits without running tests
`test-storybook --clearCache` | -| `--verbose` | Display individual test results with the test suite hierarchy
`test-storybook --verbose` | -| `-u`, `--updateSnapshot` | Use this flag to re-record every snapshot that fails during this test run
`test-storybook -u` | -| `--eject` | Creates a local configuration file to override defaults of the test-runner
`test-storybook --eject` | -| `--json` | Prints the test results in JSON. This mode will send all other test output and user messages to stderr.
`test-storybook --json` | -| `--outputFile` | Write test results to a file when the --json option is also specified.
`test-storybook --json --outputFile results.json` | -| `--junit` | Indicates that test information should be reported in a junit file.
`test-storybook --**junit**` | -| `--ci` | Instead of the regular behavior of storing a new snapshot automatically, it will fail the test and require Jest to be run with `--updateSnapshot`.
`test-storybook --ci` | -| `--shard [index/count]` | Requires CI. Splits the test suite execution into multiple machines
`test-storybook --shard=1/8` | -| `--failOnConsole` | Makes tests fail on browser console errors
`test-storybook --failOnConsole` | +| Options | Description | +| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `--help` | Output usage information
`test-storybook --help` | +| `-s`, `--index-json` | Run in index json mode. Automatically detected (requires a compatible Storybook)
`test-storybook --index-json` | +| `--no-index-json` | Disables index json mode
`test-storybook --no-index-json` | +| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from
`test-storybook -c .storybook` | +| `--watch` | Run in watch mode
`test-storybook --watch` | +| `--watchAll` | Watch files for changes and rerun all tests when something changes.
`test-storybook --watchAll` | +| `--coverage` | Runs [coverage tests](./test-coverage.md) on your stories and components
`test-storybook --coverage` | +| `--coverageDirectory` | Directory where to write coverage report output
`test-storybook --coverage --coverageDirectory coverage/ui/storybook` | +| `--url` | Define the URL to run tests in. Useful for custom Storybook URLs
`test-storybook --url http://the-storybook-url-here.com` | +| `--browsers` | Define browsers to run tests in. One or multiple of: chromium, firefox, webkit
`test-storybook --browsers firefox chromium` | +| `--maxWorkers [amount]` | Specifies the maximum number of workers the worker-pool will spawn for running tests
`test-storybook --maxWorkers=2` | +| `--no-cache` | Disable the cache
`test-storybook --no-cache` | +| `--clearCache` | Deletes the Jest cache directory and then exits without running tests
`test-storybook --clearCache` | +| `--verbose` | Display individual test results with the test suite hierarchy
`test-storybook --verbose` | +| `-u`, `--updateSnapshot` | Use this flag to re-record every snapshot that fails during this test run
`test-storybook -u` | +| `--eject` | Creates a local configuration file to override defaults of the test-runner
`test-storybook --eject` | +| `--json` | Prints the test results in JSON. This mode will send all other test output and user messages to stderr.
`test-storybook --json` | +| `--outputFile` | Write test results to a file when the --json option is also specified.
`test-storybook --json --outputFile results.json` | +| `--junit` | Indicates that test information should be reported in a junit file.
`test-storybook --**junit**` | +| `--ci` | Instead of the regular behavior of storing a new snapshot automatically, it will fail the test and require Jest to be run with `--updateSnapshot`.
`test-storybook --ci` | +| `--shard [index/count]` | Requires CI. Splits the test suite execution into multiple machines
`test-storybook --shard=1/8` | +| `--failOnConsole` | Makes tests fail on browser console errors
`test-storybook --failOnConsole` | +| `--includeTags` | Experimental feature
Defines a subset of stories to be tested if they match the enabled [tags](#experimental-filter-tests).
`test-storybook --includeTags="test-only, pages"` | +| `--excludeTags` | Experimental feature
Prevents stories from being tested if they match the provided [tags](#experimental-filter-tests).
`test-storybook --skipTags="no-tests, tokens"` | +| `--skipTags` | Experimental feature
Configures the test runner to skip running tests for stories that match the provided [tags](#experimental-filter-tests).
`test-storybook --skipTags="skip-test, layout"` | @@ -151,11 +156,11 @@ If you're publishing your Storybook with services such as [Vercel](https://verce -
+ -šŸ’” The published Storybook must be publicly available for this example to work. We recommend running the test server using the recipe [below](#run-against-non-deployed-storybooks) if it requires authentication. +The published Storybook must be publicly available for this example to work. We recommend running the test server using the recipe [below](#run-against-non-deployed-storybooks) if it requires authentication. -
+ ### Run against non-deployed Storybooks @@ -171,11 +176,11 @@ You can use your CI provider (for example, [GitHub Actions](https://github.com/f -
+ -šŸ’” By default Storybook outputs the [build](../sharing/publish-storybook.md#build-storybook-as-a-static-web-application) to the `storybook-static` directory. If you're using a different build directory, you'll need to adjust the recipe accordingly. +By default, Storybook outputs the [build](../sharing/publish-storybook.md#build-storybook-as-a-static-web-application) to the `storybook-static` directory. If you're using a different build directory, you'll need to adjust the recipe accordingly. -
+ ### What's the difference between Chromatic and Test runner? @@ -204,12 +209,6 @@ Listed below are the available hooks and an overview of how to use them. | `preRender` | Executes before a story is rendered
`async preRender(page, context) {}` | | `postRender` | Executes after the story is rendered
`async postRender(page, context) {}` | -
- -šŸ’” These test hooks are experimental and may be subject to breaking changes. We encourage you to test as much as possible within the story's [play function](../writing-stories/play-function.md). - -
- To enable the hooks API, you'll need to add a new configuration file inside your Storybook directory and set them up as follows: @@ -223,11 +222,11 @@ To enable the hooks API, you'll need to add a new configuration file inside your -
+ -šŸ’” Except for the `setup` function, all other functions run asynchronously. Both `preRender` and `postRender` functions include two additional arguments, a [Playwright page](https://playwright.dev/docs/pages) and a context object which contains the `id`, `title`, and the `name` of the story. +Except for the `setup` function, all other functions run asynchronously. Both `preRender` and `postRender` functions include two additional arguments, a [Playwright page](https://playwright.dev/docs/pages) and a context object which contains the `id`, `title`, and the `name` of the story. -
+ When the test-runner executes, your existing tests will go through the following lifecycle: @@ -238,6 +237,105 @@ When the test-runner executes, your existing tests will go through the following - The story is rendered, and any existing `play` functions are executed. - The `postRender` function is executed. +### (Experimental) Filter tests + +When you run the test-runner on Storybook, it tests every story by default. However, if you want to filter the tests, you can use the `tags` configuration option. Storybook originally introduced this feature to generate [automatic documentation](../writing-docs/autodocs.md) for stories. But it can be further extended to configure the test-runner to run tests according to the provided tags using a similar configuration option or via CLI flags (e.g., `--includeTags`, `--excludeTags`, `--skipTags`). Listed below are the available options and an overview of how to use them. + +| Option | Description | +| --------- | ----------------------------------------------------------------------------- | +| `exclude` | Prevents stories if they match the provided tags from being tested. | +| `include` | Defines a subset of stories only to be tested if they match the enabled tags. | +| `skip` | Skips testing on stories if they match the provided tags. | + + + + + + + + + +Running tests with the CLI flags takes precedence over the options provided in the configuration file and will override the available options in the configuration file. + + + +#### Disabling tests + +If you want to prevent specific stories from being tested by the test-runner, you can configure your story with a custom tag, enable it to the test-runner configuration file or run the test-runner with the `--excludeTags` [CLI](#cli-options) flag and exclude them from testing. This is helpful when you want to exclude stories that are not yet ready for testing or are irrelevant to your tests. For example: + + + + + + + +#### Run tests for a subset of stories + +To allow the test-runner only to run tests on a specific story or subset of stories, you can configure the story with a custom tag, enable it in the test-runner configuration file or run the test-runner with the `--includeTags` [CLI](#cli-options) flag and include them in your tests. For example, if you wanted to run tests based on the `test-only` tag, you can adjust your configuration as follows: + + + + + + + + + +Applying tags for the component's stories should either be done at the component level (using `meta`) or at the story level. Importing tags across stories is not supported in Storybook and won't work as intended. + + + +#### Skip tests + +If you want to skip running tests on a particular story or subset of stories, you can configure your story with a custom tag, enable it in the test-runner configuration file, or run the test-runner with the `--skipTags` [CLI](#cli-options) flag. Running tests with this option will cause the test-runner to skip over the story and flag them accordingly in the test results. For example: + + + + + + + +### Authentication for deployed Storybooks + +If you use a secure hosting provider that requires authentication to host your Storybook, you may need to set HTTP headers. This is mainly because of how the test runner checks the status of the instance and the index of its stories through fetch requests and Playwright. To do this, you can modify the test-runner configuration file to include the `getHttpHeaders` function. This function takes the URL of the fetch calls and page visits as input and returns an object containing the headers that need to be set. + + + + + + + ### Helpers The test-runner exports a few helpers that can be used to make your tests more readable and maintainable by accessing Storybook's internals (e.g., `args`, `parameters`). Listed below are the available helpers and an overview of how to use them. @@ -253,6 +351,36 @@ The test-runner exports a few helpers that can be used to make your tests more r +#### Accessing story information with the test-runner + +If you need to access information about the story, such as its parameters, the test-runner includes a helper function named `getStoryContext` that you can use to retrieve it. You can then use it to customize your tests further as needed. For example, if you need to configure Playwright's page [viewport size](https://playwright.dev/docs/api/class-page#page-set-viewport-size) to use the viewport size defined in the story's parameters, you can do so as follows: + + + + + + + +#### Working with assets + +If you're running a specific set of tests (e.g., image snapshot testing), the test-runner provides a helper function named `waitForPageReady` that you can use to ensure the page is fully loaded and ready before running the test. For example: + + + + + + + ### Index.json mode The test-runner transforms your story files into tests when testing a local Storybook. For a remote Storybook, it uses the Storybook's [index.json](../configure/overview.md#feature-flags) (formerly `stories.json`) file (a static index of all the stories) to run the tests. @@ -273,11 +401,11 @@ Suppose you run into a situation where the local and remote Storybooks appear ou -
+ -šŸ’” The `index.json` mode is not compatible with watch mode. +The `index.json` mode is not compatible with the watch mode. -
+ If you need to disable it, use the `--no-index-json` flag: @@ -327,6 +455,10 @@ By default, the test runner truncates error outputs at 1000 characters, and you As the test runner is based on Playwright, you might need to use specific docker images or other configurations depending on your CI setup. In that case, you can refer to the [Playwright CI docs](https://playwright.dev/docs/ci) for more information. +### Tests filtered by tags are incorrectly executed + +If you've enabled filtering tests with tags and provided similar tags to the `include` and `exclude` lists, the test-runner will execute the tests based on the `exclude` list and ignore the `include` list. To avoid this, make sure the tags provided to the `include` and `exclude` lists differ. + #### Learn about other UI tests - Test runner to automate test execution From 8a377f876d0883161f2df3c9f4d9358d4e7a4b49 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 17 Nov 2023 14:30:38 +0100 Subject: [PATCH 069/170] make it work with --test --- .../src/presets/common-override-preset.ts | 56 +++++-- code/package.json | 2 +- code/ui/.storybook/main.ts | 6 + .../typography/DocumentFormattingSample.mdx | 143 ------------------ .../typography/DocumentWrapper.stories.tsx | 7 - 5 files changed, 49 insertions(+), 165 deletions(-) delete mode 100644 code/ui/components/src/components/typography/DocumentFormattingSample.mdx diff --git a/code/lib/core-server/src/presets/common-override-preset.ts b/code/lib/core-server/src/presets/common-override-preset.ts index 5696701a88c..35913f2265c 100644 --- a/code/lib/core-server/src/presets/common-override-preset.ts +++ b/code/lib/core-server/src/presets/common-override-preset.ts @@ -1,6 +1,13 @@ -import type { Options, PresetProperty, StorybookConfig, TestBuildFlags } from '@storybook/types'; +import type { + NormalizedStoriesSpecifier, + Options, + PresetProperty, + StoriesEntry, + StorybookConfig, + TestBuildFlags, +} from '@storybook/types'; import { normalizeStories, commonGlobOptions } from '@storybook/core-common'; -import { isAbsolute, join } from 'path'; +import { isAbsolute, join, relative } from 'path'; import slash from 'slash'; import { glob } from 'glob'; @@ -19,30 +26,51 @@ export const framework: PresetProperty<'framework', StorybookConfig> = async (co export const stories: PresetProperty<'stories', StorybookConfig> = async (entries, options) => { if (options?.build?.test?.disableMDXEntries) { - return ( + const result = ( await Promise.all( normalizeStories(entries, { configDir: options.configDir, workingDir: options.configDir, - }).map(({ directory, files }) => { + }).map(async ({ directory, files, titlePrefix }) => { const pattern = join(directory, files); const absolutePattern = isAbsolute(pattern) ? pattern : join(options.configDir, pattern); + const absoluteDirectory = isAbsolute(directory) + ? directory + : join(options.configDir, directory); - return glob(slash(absolutePattern), { - ...commonGlobOptions(absolutePattern), - follow: true, - }); + return { + files: ( + await glob(slash(absolutePattern), { + ...commonGlobOptions(absolutePattern), + follow: true, + }) + ).map((f) => relative(absoluteDirectory, f)), + directory, + titlePrefix, + }; }) ) - ).flatMap((expanded, i) => { - const filteredEntries = expanded.filter((s) => !s.endsWith('.mdx')); + ).reduce((acc, expanded, i) => { + const filteredEntries = expanded.files.filter((s) => !s.endsWith('.mdx')); // only return the filtered entries when there is something to filter // as webpack is faster with unexpanded globs - if (filteredEntries.length < expanded.length) { - return filteredEntries; + let items = []; + if (filteredEntries.length < expanded.files.length) { + items = filteredEntries.map((k) => ({ + ...expanded, + files: `**/${k}`, + })); + console.log({ a: filteredEntries.length, b: expanded.files.length }); + acc.push(...items); + } else { + items = [entries[i]]; } - return entries[i]; - }); + console.log({ items }); + acc.push(...items); + + return acc; + }, []); + return result; } return entries; }; diff --git a/code/package.json b/code/package.json index 9c486f75ab6..d796c99a074 100644 --- a/code/package.json +++ b/code/package.json @@ -47,7 +47,7 @@ "storybook:blocks:build": "STORYBOOK_BLOCKS_ONLY=true yarn storybook:ui:build", "storybook:blocks:chromatic": "STORYBOOK_BLOCKS_ONLY=true yarn storybook:ui:chromatic --project-token=${CHROMATIC_TOKEN_STORYBOOK_BLOCKS:-MISSING_PROJECT_TOKEN}", "storybook:ui": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js dev --port 6006 --config-dir ./ui/.storybook", - "storybook:ui:build": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js build --config-dir ./ui/.storybook", + "storybook:ui:build": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js build --config-dir ./ui/.storybook --test", "storybook:ui:chromatic": "yarn chromatic --build-script-name storybook:ui:build --storybook-config-dir ./ui/.storybook --storybook-base-dir ./code --project-token=${CHROMATIC_TOKEN_STORYBOOK_UI:-MISSING_PROJECT_TOKEN} --only-changed --exit-zero-on-changes --exit-once-uploaded", "task": "yarn --cwd ../scripts task", "test": "NODE_OPTIONS=--max_old_space_size=4096 jest --config ./jest.config.js", diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts index 347f2192953..4800dda1e18 100644 --- a/code/ui/.storybook/main.ts +++ b/code/ui/.storybook/main.ts @@ -8,6 +8,7 @@ const isBlocksOnly = process.env.STORYBOOK_BLOCKS_ONLY === 'true'; const allStories = [ { directory: '../manager/src', + files: '**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)', titlePrefix: '@manager', }, { @@ -53,6 +54,11 @@ const config: StorybookConfig = { '@storybook/addon-designs', '@chromaui/addon-visual-tests', ], + build: { + test: { + disableBlocks: false, + }, + }, framework: { name: '@storybook/react-vite', options: {}, diff --git a/code/ui/components/src/components/typography/DocumentFormattingSample.mdx b/code/ui/components/src/components/typography/DocumentFormattingSample.mdx deleted file mode 100644 index 65b5e6fbe2c..00000000000 --- a/code/ui/components/src/components/typography/DocumentFormattingSample.mdx +++ /dev/null @@ -1,143 +0,0 @@ -# h1 Heading - -## h2 Heading - -### h3 Heading - -#### h4 Heading - -##### h5 Heading - -###### h6 Heading - -## Typographic replacements - -Enable typographer option to see result. - -(c) (C) (r) (R) (tm) (TM) (p) (P) +- - -test.. test... test..... test?..... test!.... - -!!!!!! ???? ,, -- --- - -"Smartypants, double quotes" and 'single quotes' - -## Emphasis - -**This is bold text** - -**This is bold text** - -_This is italic text_ - -_This is italic text_ - -_**This is bold italic text**_ - -~~Strikethrough~~ - -## Blockquotes - -> Blockquotes can also be nested... -> -> > ...by using additional greater-than signs right next to each other... -> > -> > > ...or with spaces between arrows. - -## Lists - -Unordered - -- Create a list by starting a line with `+`, `-`, or `*` -- Sub-lists are made by indenting 2 spaces: - - Marker character change forces new list start: - - Ac tristique libero volutpat at - * Facilisis in pretium nisl aliquet - - Nulla volutpat aliquam velit -- Hooray! - -Ordered - -1. Lorem ipsum dolor sit amet -2. Consectetur adipiscing elit -3. Integer molestie lorem at massa - -1) You can use sequential numbers... -1) ...or keep all the numbers as `1.` - -Start numbering with offset: - -57. foo -1. bar - -## Code - -Inline `code` - -Indented code - - // Some comments - line 1 of code - line 2 of code - line 3 of code - -Block code "fences" - -``` -Sample text here... -``` - -Syntax highlighting - -```js -var foo = function (bar) { - return bar++; -}; - -console.log(foo(5)); -``` - -## Horizontal Rule - ---- - -## Tables - -| Option | Description | -| ------ | ------------------------------------------------------------------------- | -| data | path to data files to supply the data that will be passed into templates. | -| engine | engine to be used for processing templates. Handlebars is the default. | -| ext | extension to be used for dest files. | - -Right aligned columns - -| Option | Description | -| -----: | ------------------------------------------------------------------------: | -| data | path to data files to supply the data that will be passed into templates. | -| engine | engine to be used for processing templates. Handlebars is the default. | -| ext | extension to be used for dest files. | - -## Links - -[link text](http://dev.nodeca.com) - -[link with title](http://nodeca.github.io/pica/demo/ 'title text!') - -Autoconverted link https://github.com/nodeca/pica (enable linkify to see) - -# [Link](https://storybook.js.org/) in heading - -## [Link](https://storybook.js.org/) in heading - -### [Link](https://storybook.js.org/) in heading - -#### [Link](https://storybook.js.org/) in heading - -##### [Link](https://storybook.js.org/) in heading - -###### [Link](https://storybook.js.org/) in heading - -## Images - -![Minion](https://octodex.github.com/images/minion.png) -![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg 'The Stormtroopocat') diff --git a/code/ui/components/src/components/typography/DocumentWrapper.stories.tsx b/code/ui/components/src/components/typography/DocumentWrapper.stories.tsx index f11de8ede5f..4a886c31bc4 100644 --- a/code/ui/components/src/components/typography/DocumentWrapper.stories.tsx +++ b/code/ui/components/src/components/typography/DocumentWrapper.stories.tsx @@ -1,19 +1,12 @@ import React from 'react'; import { DocumentWrapper } from './DocumentWrapper'; -import MarkdownSample from './DocumentFormattingSample.mdx'; export default { component: DocumentWrapper, decorators: [(storyFn: any) =>
{storyFn()}
], }; -export const WithMarkdown = () => ( - - - -); - export const WithDOM = () => (

h1 Heading

From dc4786c7df9077d21fe82592e0db1bb26d54ed2c Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 17 Nov 2023 14:44:20 +0100 Subject: [PATCH 070/170] modify the default_files_pattern for normalizeStories to exclude mdx when --test flag is set --- code/lib/core-common/src/utils/normalize-stories.ts | 9 +++++---- .../core-server/src/presets/common-override-preset.ts | 1 + 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/code/lib/core-common/src/utils/normalize-stories.ts b/code/lib/core-common/src/utils/normalize-stories.ts index 9801fbeae30..3beabeae4c8 100644 --- a/code/lib/core-common/src/utils/normalize-stories.ts +++ b/code/lib/core-common/src/utils/normalize-stories.ts @@ -9,7 +9,7 @@ import { normalizeStoryPath } from './paths'; import { globToRegexp } from './glob-to-regexp'; const DEFAULT_TITLE_PREFIX = ''; -const DEFAULT_FILES = '**/*.@(mdx|stories.@(js|jsx|mjs|ts|tsx))'; +const DEFAULT_FILES_PATTERN = '**/*.@(mdx|stories.@(js|jsx|mjs|ts|tsx))'; const isDirectory = (configDir: string, entry: string) => { try { @@ -34,7 +34,7 @@ export const getDirectoryFromWorkingDir = ({ export const normalizeStoriesEntry = ( entry: StoriesEntry, - { configDir, workingDir }: NormalizeOptions + { configDir, workingDir, default_files_pattern = DEFAULT_FILES_PATTERN }: NormalizeOptions ): NormalizedStoriesSpecifier => { let specifierWithoutMatcher: Omit; @@ -53,7 +53,7 @@ export const normalizeStoriesEntry = ( specifierWithoutMatcher = { titlePrefix: DEFAULT_TITLE_PREFIX, directory: entry, - files: DEFAULT_FILES, + files: default_files_pattern, }; } else { specifierWithoutMatcher = { @@ -65,7 +65,7 @@ export const normalizeStoriesEntry = ( } else { specifierWithoutMatcher = { titlePrefix: DEFAULT_TITLE_PREFIX, - files: DEFAULT_FILES, + files: default_files_pattern, ...entry, }; } @@ -99,6 +99,7 @@ export const normalizeStoriesEntry = ( interface NormalizeOptions { configDir: string; workingDir: string; + default_files_pattern?: string; } export const normalizeStories = (entries: StoriesEntry[], options: NormalizeOptions) => { diff --git a/code/lib/core-server/src/presets/common-override-preset.ts b/code/lib/core-server/src/presets/common-override-preset.ts index 35913f2265c..46da6037e3d 100644 --- a/code/lib/core-server/src/presets/common-override-preset.ts +++ b/code/lib/core-server/src/presets/common-override-preset.ts @@ -31,6 +31,7 @@ export const stories: PresetProperty<'stories', StorybookConfig> = async (entrie normalizeStories(entries, { configDir: options.configDir, workingDir: options.configDir, + default_files_pattern: '**/*.@(stories.@(js|jsx|mjs|ts|tsx))', }).map(async ({ directory, files, titlePrefix }) => { const pattern = join(directory, files); const absolutePattern = isAbsolute(pattern) ? pattern : join(options.configDir, pattern); From d37817e900afe433f9c287f99154408a8cda0dc6 Mon Sep 17 00:00:00 2001 From: Joe Vaughan <122215197+joevaugh4n@users.noreply.github.com> Date: Fri, 17 Nov 2023 13:44:58 +0000 Subject: [PATCH 071/170] Update .github/DISCUSSION_TEMPLATE/help.yml Co-authored-by: Vanessa Yuen <6842965+vanessayuenn@users.noreply.github.com> --- .github/DISCUSSION_TEMPLATE/help.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/DISCUSSION_TEMPLATE/help.yml b/.github/DISCUSSION_TEMPLATE/help.yml index 970bb18d576..8a6d64c431f 100644 --- a/.github/DISCUSSION_TEMPLATE/help.yml +++ b/.github/DISCUSSION_TEMPLATE/help.yml @@ -8,7 +8,7 @@ Before you post: - Check if someone has already asked/answered your question in a previous discussion. When you're ready to post: -- Add tags to your discussion (e.g. 'React', 'Vue', 'Vite') to make it clearer for other users. +- Add labels to your discussion (e.g. 'React', 'Vue', 'Vite') to make it clearer for other users. - type: textarea attributes: From 6f37cc1c272a19f8cc514dc90b47a5ad17cb1d28 Mon Sep 17 00:00:00 2001 From: Joe Vaughan <122215197+joevaugh4n@users.noreply.github.com> Date: Fri, 17 Nov 2023 13:48:03 +0000 Subject: [PATCH 072/170] Update help.yml --- .github/DISCUSSION_TEMPLATE/help.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/DISCUSSION_TEMPLATE/help.yml b/.github/DISCUSSION_TEMPLATE/help.yml index 8a6d64c431f..47a9ba004d8 100644 --- a/.github/DISCUSSION_TEMPLATE/help.yml +++ b/.github/DISCUSSION_TEMPLATE/help.yml @@ -31,6 +31,7 @@ When you're ready to post: - type: input attributes: label: Create a reproduction - description: Help us debug by creating a minimal reproduction with [https://storybook.new](https://storybook.new) + description: | + Help us debug by creating a minimal reproduction with [https://storybook.new](https://storybook.new). [Learn more about creating a reproduction](ttps://storybook.js.org/docs/react/contribute/how-to-reproduce). validations: required: false From 57768746a0524eb9cf2c390132c90cc5cd5ce730 Mon Sep 17 00:00:00 2001 From: Joe Vaughan <122215197+joevaugh4n@users.noreply.github.com> Date: Fri, 17 Nov 2023 13:48:49 +0000 Subject: [PATCH 073/170] Update help.yml --- .github/DISCUSSION_TEMPLATE/help.yml | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/.github/DISCUSSION_TEMPLATE/help.yml b/.github/DISCUSSION_TEMPLATE/help.yml index 47a9ba004d8..64fe57ca65d 100644 --- a/.github/DISCUSSION_TEMPLATE/help.yml +++ b/.github/DISCUSSION_TEMPLATE/help.yml @@ -2,14 +2,14 @@ body: - type: markdown attributes: value: | -Thanks for taking the time to start a new discussion! + Thanks for taking the time to start a new discussion! -Before you post: -- Check if someone has already asked/answered your question in a previous discussion. - -When you're ready to post: -- Add labels to your discussion (e.g. 'React', 'Vue', 'Vite') to make it clearer for other users. + Before you post: + - Check if someone has already asked/answered your question in a previous discussion. + When you're ready to post: + - Add labels to your discussion (e.g. 'React', 'Vue', 'Vite') to make it clearer for other users. + - type: textarea attributes: label: Summary From 861170e5391dca89cf8abb353eb9e45d7cafbbd0 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 17 Nov 2023 14:50:49 +0100 Subject: [PATCH 074/170] cleanup --- code/lib/core-server/src/presets/common-override-preset.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/code/lib/core-server/src/presets/common-override-preset.ts b/code/lib/core-server/src/presets/common-override-preset.ts index 46da6037e3d..5e907deca64 100644 --- a/code/lib/core-server/src/presets/common-override-preset.ts +++ b/code/lib/core-server/src/presets/common-override-preset.ts @@ -61,12 +61,10 @@ export const stories: PresetProperty<'stories', StorybookConfig> = async (entrie ...expanded, files: `**/${k}`, })); - console.log({ a: filteredEntries.length, b: expanded.files.length }); acc.push(...items); } else { items = [entries[i]]; } - console.log({ items }); acc.push(...items); return acc; From c643d59abfad4ef43d65d8a082ef7880bb761794 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 17 Nov 2023 15:00:08 +0100 Subject: [PATCH 075/170] fix --- code/lib/core-server/src/presets/common-override-preset.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/code/lib/core-server/src/presets/common-override-preset.ts b/code/lib/core-server/src/presets/common-override-preset.ts index 5e907deca64..0566797e7cf 100644 --- a/code/lib/core-server/src/presets/common-override-preset.ts +++ b/code/lib/core-server/src/presets/common-override-preset.ts @@ -1,5 +1,4 @@ import type { - NormalizedStoriesSpecifier, Options, PresetProperty, StoriesEntry, From 00d021aaad0f1fb2f9d5ca43d9820e1239f4045d Mon Sep 17 00:00:00 2001 From: Joe Vaughan <122215197+joevaugh4n@users.noreply.github.com> Date: Fri, 17 Nov 2023 14:01:52 +0000 Subject: [PATCH 076/170] Update help.yml --- .github/DISCUSSION_TEMPLATE/help.yml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.github/DISCUSSION_TEMPLATE/help.yml b/.github/DISCUSSION_TEMPLATE/help.yml index 64fe57ca65d..a633472ba87 100644 --- a/.github/DISCUSSION_TEMPLATE/help.yml +++ b/.github/DISCUSSION_TEMPLATE/help.yml @@ -1,7 +1,6 @@ body: - type: markdown - attributes: - value: | + value: | Thanks for taking the time to start a new discussion! Before you post: From 9a4061578af25704fb0737bf2b4d1f28d422b02f Mon Sep 17 00:00:00 2001 From: Joe Vaughan <122215197+joevaugh4n@users.noreply.github.com> Date: Fri, 17 Nov 2023 14:02:07 +0000 Subject: [PATCH 077/170] Update help.yml --- .github/DISCUSSION_TEMPLATE/help.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/DISCUSSION_TEMPLATE/help.yml b/.github/DISCUSSION_TEMPLATE/help.yml index a633472ba87..844e09e0c22 100644 --- a/.github/DISCUSSION_TEMPLATE/help.yml +++ b/.github/DISCUSSION_TEMPLATE/help.yml @@ -1,6 +1,6 @@ body: - type: markdown - value: | + value: | Thanks for taking the time to start a new discussion! Before you post: From 913d3dc0466625e454d45ba71358ccfe1537ea1c Mon Sep 17 00:00:00 2001 From: Joe Vaughan <122215197+joevaugh4n@users.noreply.github.com> Date: Fri, 17 Nov 2023 14:02:44 +0000 Subject: [PATCH 078/170] Update help.yml --- .github/DISCUSSION_TEMPLATE/help.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.github/DISCUSSION_TEMPLATE/help.yml b/.github/DISCUSSION_TEMPLATE/help.yml index 844e09e0c22..64fe57ca65d 100644 --- a/.github/DISCUSSION_TEMPLATE/help.yml +++ b/.github/DISCUSSION_TEMPLATE/help.yml @@ -1,6 +1,7 @@ body: - type: markdown - value: | + attributes: + value: | Thanks for taking the time to start a new discussion! Before you post: From 9c3ffc8ff3b61458505b88d1856984f3c088defb Mon Sep 17 00:00:00 2001 From: Joe Vaughan <122215197+joevaugh4n@users.noreply.github.com> Date: Fri, 17 Nov 2023 14:03:11 +0000 Subject: [PATCH 079/170] Update help.yml --- .github/DISCUSSION_TEMPLATE/help.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/DISCUSSION_TEMPLATE/help.yml b/.github/DISCUSSION_TEMPLATE/help.yml index 64fe57ca65d..34d9a112ea7 100644 --- a/.github/DISCUSSION_TEMPLATE/help.yml +++ b/.github/DISCUSSION_TEMPLATE/help.yml @@ -2,13 +2,13 @@ body: - type: markdown attributes: value: | - Thanks for taking the time to start a new discussion! + "Thanks for taking the time to start a new discussion! Before you post: - Check if someone has already asked/answered your question in a previous discussion. When you're ready to post: - - Add labels to your discussion (e.g. 'React', 'Vue', 'Vite') to make it clearer for other users. + - Add labels to your discussion (e.g. 'React', 'Vue', 'Vite') to make it clearer for other users." - type: textarea attributes: From a11fd310563daf82572d5a4436997d2f8187542c Mon Sep 17 00:00:00 2001 From: Joe Vaughan <122215197+joevaugh4n@users.noreply.github.com> Date: Fri, 17 Nov 2023 14:03:28 +0000 Subject: [PATCH 080/170] Update help.yml --- .github/DISCUSSION_TEMPLATE/help.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/DISCUSSION_TEMPLATE/help.yml b/.github/DISCUSSION_TEMPLATE/help.yml index 34d9a112ea7..bbd782b4ec8 100644 --- a/.github/DISCUSSION_TEMPLATE/help.yml +++ b/.github/DISCUSSION_TEMPLATE/help.yml @@ -8,7 +8,7 @@ body: - Check if someone has already asked/answered your question in a previous discussion. When you're ready to post: - - Add labels to your discussion (e.g. 'React', 'Vue', 'Vite') to make it clearer for other users." + - Add labels to your discussion (e.g. React, Vue, Vite) to make it clearer for other users." - type: textarea attributes: From c9bcdc77c897e4644659183200e020397622058f Mon Sep 17 00:00:00 2001 From: Joe Vaughan <122215197+joevaugh4n@users.noreply.github.com> Date: Fri, 17 Nov 2023 14:05:12 +0000 Subject: [PATCH 081/170] Update help.yml From f2be784092e5d66807c82d05ea3c1cfa81fbb2a8 Mon Sep 17 00:00:00 2001 From: Joe Vaughan <122215197+joevaugh4n@users.noreply.github.com> Date: Fri, 17 Nov 2023 14:06:03 +0000 Subject: [PATCH 082/170] Update help.yml --- .github/DISCUSSION_TEMPLATE/help.yml | 26 -------------------------- 1 file changed, 26 deletions(-) diff --git a/.github/DISCUSSION_TEMPLATE/help.yml b/.github/DISCUSSION_TEMPLATE/help.yml index bbd782b4ec8..d99ac06410e 100644 --- a/.github/DISCUSSION_TEMPLATE/help.yml +++ b/.github/DISCUSSION_TEMPLATE/help.yml @@ -9,29 +9,3 @@ body: When you're ready to post: - Add labels to your discussion (e.g. React, Vue, Vite) to make it clearer for other users." - - - type: textarea - attributes: - label: Summary - description: How can we help? - validations: - required: true - - - type: textarea - attributes: - label: Additional information - description: | - Share Your Storybook configuration (`main.js` or `main.ts`), your Storybook version number, any error messages, and any relevant dependencies. These help us get a clearer understanding of what might be going wrong. - - P.S. Please [share code as text](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks) rather than as a screenshot! It makes debugging much easier and faster. - render: js - validations: - required: false - - - type: input - attributes: - label: Create a reproduction - description: | - Help us debug by creating a minimal reproduction with [https://storybook.new](https://storybook.new). [Learn more about creating a reproduction](ttps://storybook.js.org/docs/react/contribute/how-to-reproduce). - validations: - required: false From 42170ade21c52d3ba805fdc40d78db63042c728a Mon Sep 17 00:00:00 2001 From: Joe Vaughan <122215197+joevaugh4n@users.noreply.github.com> Date: Fri, 17 Nov 2023 14:06:39 +0000 Subject: [PATCH 083/170] Update help.yml --- .github/DISCUSSION_TEMPLATE/help.yml | 30 ++++++++++++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) diff --git a/.github/DISCUSSION_TEMPLATE/help.yml b/.github/DISCUSSION_TEMPLATE/help.yml index d99ac06410e..d1052e8ed24 100644 --- a/.github/DISCUSSION_TEMPLATE/help.yml +++ b/.github/DISCUSSION_TEMPLATE/help.yml @@ -2,10 +2,36 @@ body: - type: markdown attributes: value: | - "Thanks for taking the time to start a new discussion! + Thanks for taking the time to start a new discussion! Before you post: - Check if someone has already asked/answered your question in a previous discussion. When you're ready to post: - - Add labels to your discussion (e.g. React, Vue, Vite) to make it clearer for other users." + - Add labels to your discussion (e.g. React, Vue, Vite) to make it clearer for other users. + + - type: textarea + attributes: + label: Summary + description: How can we help? + validations: + required: true + + - type: textarea + attributes: + label: Additional information + description: | + Share Your Storybook configuration (`main.js` or `main.ts`), your Storybook version number, any error messages, and any relevant dependencies. These help us get a clearer understanding of what might be going wrong. + + P.S. Please [share code as text](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks) rather than as a screenshot! It makes debugging much easier and faster. + render: js + validations: + required: false + + - type: input + attributes: + label: Create a reproduction + description: | + Help us debug by creating a minimal reproduction with [https://storybook.new](https://storybook.new). [Learn more about creating a reproduction](ttps://storybook.js.org/docs/react/contribute/how-to-reproduce). + validations: + required: false From bcdf02390dfc00facdce5689ededadc9722a93de Mon Sep 17 00:00:00 2001 From: Joe Vaughan <122215197+joevaugh4n@users.noreply.github.com> Date: Fri, 17 Nov 2023 14:08:57 +0000 Subject: [PATCH 084/170] Update help.yml --- .github/DISCUSSION_TEMPLATE/help.yml | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/.github/DISCUSSION_TEMPLATE/help.yml b/.github/DISCUSSION_TEMPLATE/help.yml index d1052e8ed24..5664b2b8fdb 100644 --- a/.github/DISCUSSION_TEMPLATE/help.yml +++ b/.github/DISCUSSION_TEMPLATE/help.yml @@ -4,11 +4,11 @@ body: value: | Thanks for taking the time to start a new discussion! - Before you post: - - Check if someone has already asked/answered your question in a previous discussion. + ### Before you post + Check if someone has already asked/answered your question in a previous discussion. - When you're ready to post: - - Add labels to your discussion (e.g. React, Vue, Vite) to make it clearer for other users. + ### When you're ready to post + Add labels to your discussion (e.g. React, Vue, Vite) to make it clearer for other users. - type: textarea attributes: @@ -32,6 +32,6 @@ body: attributes: label: Create a reproduction description: | - Help us debug by creating a minimal reproduction with [https://storybook.new](https://storybook.new). [Learn more about creating a reproduction](ttps://storybook.js.org/docs/react/contribute/how-to-reproduce). + Help us debug by creating a minimal reproduction with [https://storybook.new](https://storybook.new). Learn more about creating a reproduction [here](https://storybook.js.org/docs/react/contribute/how-to-reproduce). validations: required: false From 36d0747f4a6951651ad0f828d2327d657e968cd4 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 17 Nov 2023 15:22:07 +0100 Subject: [PATCH 085/170] ensure the changed default_files_pattern is applied to entries that didn't need filtering --- .../src/presets/common-override-preset.ts | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/code/lib/core-server/src/presets/common-override-preset.ts b/code/lib/core-server/src/presets/common-override-preset.ts index 0566797e7cf..345dfa10685 100644 --- a/code/lib/core-server/src/presets/common-override-preset.ts +++ b/code/lib/core-server/src/presets/common-override-preset.ts @@ -25,13 +25,14 @@ export const framework: PresetProperty<'framework', StorybookConfig> = async (co export const stories: PresetProperty<'stories', StorybookConfig> = async (entries, options) => { if (options?.build?.test?.disableMDXEntries) { + const list = normalizeStories(entries, { + configDir: options.configDir, + workingDir: options.configDir, + default_files_pattern: '**/*.@(stories.@(js|jsx|mjs|ts|tsx))', + }); const result = ( await Promise.all( - normalizeStories(entries, { - configDir: options.configDir, - workingDir: options.configDir, - default_files_pattern: '**/*.@(stories.@(js|jsx|mjs|ts|tsx))', - }).map(async ({ directory, files, titlePrefix }) => { + list.map(async ({ directory, files, titlePrefix }) => { const pattern = join(directory, files); const absolutePattern = isAbsolute(pattern) ? pattern : join(options.configDir, pattern); const absoluteDirectory = isAbsolute(directory) @@ -62,7 +63,7 @@ export const stories: PresetProperty<'stories', StorybookConfig> = async (entrie })); acc.push(...items); } else { - items = [entries[i]]; + items = [list[i]]; } acc.push(...items); From 07374ccefdc8187b390e371c9983ca49f23415b8 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 17 Nov 2023 15:46:55 +0100 Subject: [PATCH 086/170] disable locally --- code/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/package.json b/code/package.json index d796c99a074..9c486f75ab6 100644 --- a/code/package.json +++ b/code/package.json @@ -47,7 +47,7 @@ "storybook:blocks:build": "STORYBOOK_BLOCKS_ONLY=true yarn storybook:ui:build", "storybook:blocks:chromatic": "STORYBOOK_BLOCKS_ONLY=true yarn storybook:ui:chromatic --project-token=${CHROMATIC_TOKEN_STORYBOOK_BLOCKS:-MISSING_PROJECT_TOKEN}", "storybook:ui": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js dev --port 6006 --config-dir ./ui/.storybook", - "storybook:ui:build": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js build --config-dir ./ui/.storybook --test", + "storybook:ui:build": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js build --config-dir ./ui/.storybook", "storybook:ui:chromatic": "yarn chromatic --build-script-name storybook:ui:build --storybook-config-dir ./ui/.storybook --storybook-base-dir ./code --project-token=${CHROMATIC_TOKEN_STORYBOOK_UI:-MISSING_PROJECT_TOKEN} --only-changed --exit-zero-on-changes --exit-once-uploaded", "task": "yarn --cwd ../scripts task", "test": "NODE_OPTIONS=--max_old_space_size=4096 jest --config ./jest.config.js", From ddbb446dec65fa92ba836360a4708a01da412cc1 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 17 Nov 2023 16:28:23 +0100 Subject: [PATCH 087/170] simpler code --- .../lib/core-server/src/presets/common-override-preset.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/code/lib/core-server/src/presets/common-override-preset.ts b/code/lib/core-server/src/presets/common-override-preset.ts index 345dfa10685..d92dead5d8f 100644 --- a/code/lib/core-server/src/presets/common-override-preset.ts +++ b/code/lib/core-server/src/presets/common-override-preset.ts @@ -51,7 +51,7 @@ export const stories: PresetProperty<'stories', StorybookConfig> = async (entrie }; }) ) - ).reduce((acc, expanded, i) => { + ).flatMap((expanded, i) => { const filteredEntries = expanded.files.filter((s) => !s.endsWith('.mdx')); // only return the filtered entries when there is something to filter // as webpack is faster with unexpanded globs @@ -61,14 +61,12 @@ export const stories: PresetProperty<'stories', StorybookConfig> = async (entrie ...expanded, files: `**/${k}`, })); - acc.push(...items); } else { items = [list[i]]; } - acc.push(...items); - return acc; - }, []); + return items; + }); return result; } return entries; From b3854495ee87d4ddd23d073b34bf929aa69f1aac Mon Sep 17 00:00:00 2001 From: Tao Zhou Date: Fri, 17 Nov 2023 10:58:42 -0800 Subject: [PATCH 088/170] fix lint --- code/lib/core-server/src/build-dev.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/core-server/src/build-dev.ts b/code/lib/core-server/src/build-dev.ts index 7092b9341f4..459c576113b 100644 --- a/code/lib/core-server/src/build-dev.ts +++ b/code/lib/core-server/src/build-dev.ts @@ -77,7 +77,7 @@ export async function buildDevStandalone( try { await warnOnIncompatibleAddons(config); } catch (e) { - console.warn("Failed to check for incompatible addons", e); + console.warn('Failed to check for incompatible addons', e); } // Load first pass: We need to determine the builder From 42ce9647f1b1cb8e9bc0fbc17b2126f2013828e3 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Fri, 17 Nov 2023 22:07:44 +0000 Subject: [PATCH 089/170] Hooks updates --- .../my-component-exclude-tags.story.js.mdx | 5 +++-- .../my-component-exclude-tags.story.ts.mdx | 5 +++-- .../my-component-include-tags.story.js.mdx | 5 +++-- .../my-component-include-tags.story.ts.mdx | 5 +++-- .../my-component-skip-tags.story.js.mdx | 5 +++-- .../my-component-skip-tags.story.ts.mdx | 5 +++-- .../common/test-runner-a11y-config.js.mdx | 4 ++-- .../common/test-runner-a11y-config.ts.mdx | 8 ++++---- .../common/test-runner-a11y-configure.js.mdx | 4 ++-- .../common/test-runner-a11y-configure.ts.mdx | 8 ++++---- .../common/test-runner-a11y-disable.js.mdx | 4 ++-- .../common/test-runner-a11y-disable.ts.mdx | 8 ++++---- .../test-runner-custom-page-viewport.js.mdx | 2 +- .../test-runner-custom-page-viewport.ts.mdx | 2 +- .../common/test-runner-helper-function.js.mdx | 8 ++++---- .../common/test-runner-helper-function.ts.mdx | 8 ++++---- .../common/test-runner-hooks-example.js.mdx | 8 ++++---- .../common/test-runner-hooks-example.ts.mdx | 8 ++++---- .../common/test-runner-waitpageready.js.mdx | 2 +- .../common/test-runner-waitpageready.ts.mdx | 2 +- docs/writing-tests/accessibility-testing.md | 2 +- docs/writing-tests/test-runner.md | 20 +++++++++---------- 22 files changed, 67 insertions(+), 61 deletions(-) diff --git a/docs/snippets/common/my-component-exclude-tags.story.js.mdx b/docs/snippets/common/my-component-exclude-tags.story.js.mdx index e0b35b71986..32eebb42518 100644 --- a/docs/snippets/common/my-component-exclude-tags.story.js.mdx +++ b/docs/snippets/common/my-component-exclude-tags.story.js.mdx @@ -5,10 +5,11 @@ import { MyComponent } from './MyComponent'; export default { component: MyComponent, - tags: ['no-tests'], // šŸ‘ˆ Excludes all stories from being tested with the test-runner + tags: ['no-tests'], // šŸ‘ˆ Provides the `no-tests` tag to all stories in this file }; export const ExcludeStory = { - tags: ['no-tests'], // šŸ‘ˆ Configures the story to be excluded from testing via the `no-tests` tag + //šŸ‘‡ Adds the `no-tests` tag to this story to exclude it from the tests when enabled in the test-runner configuration + tags: ['no-tests'], }; ``` diff --git a/docs/snippets/common/my-component-exclude-tags.story.ts.mdx b/docs/snippets/common/my-component-exclude-tags.story.ts.mdx index 6fee748fadc..79a62510ad3 100644 --- a/docs/snippets/common/my-component-exclude-tags.story.ts.mdx +++ b/docs/snippets/common/my-component-exclude-tags.story.ts.mdx @@ -8,13 +8,14 @@ import { MyComponent } from './MyComponent'; const meta: Meta = { component: MyComponent, - tags: ['no-tests'], // šŸ‘ˆ Excludes all stories from being tested with the test-runner + tags: ['no-tests'], // šŸ‘ˆ Provides the `no-tests` tag to all stories in this file }; export default meta; type Story = StoryObj; export const ExcludeStory: Story = { - tags: ['no-tests'], // šŸ‘ˆ Configures the story to be excluded from testing via the `no-tests` tag + //šŸ‘‡ Adds the `no-tests` tag to this story to exclude it from the tests when enabled in the test-runner configuration + tags: ['no-tests'], }; ``` diff --git a/docs/snippets/common/my-component-include-tags.story.js.mdx b/docs/snippets/common/my-component-include-tags.story.js.mdx index 995f5285b1c..1e667e43c71 100644 --- a/docs/snippets/common/my-component-include-tags.story.js.mdx +++ b/docs/snippets/common/my-component-include-tags.story.js.mdx @@ -5,10 +5,11 @@ import { MyComponent } from './MyComponent'; export default { component: MyComponent, - tags: ['test-only'], // šŸ‘ˆ Runs tests only for stories with this tag + tags: ['test-only'], // šŸ‘ˆ Provides the `test-only` tag to all stories in this file }; export const IncludeStory = { - tags: ['test-only'], // šŸ‘ˆ Configures the story to be added to the test suite with the test-runner + //šŸ‘‡ Adds the `test-only` tag to this story to be included in the tests when enabled in the test-runner configuration + tags: ['test-only'], }; ``` diff --git a/docs/snippets/common/my-component-include-tags.story.ts.mdx b/docs/snippets/common/my-component-include-tags.story.ts.mdx index 5e47651618b..6b3f71446d8 100644 --- a/docs/snippets/common/my-component-include-tags.story.ts.mdx +++ b/docs/snippets/common/my-component-include-tags.story.ts.mdx @@ -8,13 +8,14 @@ import { MyComponent } from './MyComponent'; const meta: Meta = { component: MyComponent, - tags: ['test-only'], // šŸ‘ˆ Runs tests only for stories with this tag + tags: ['test-only'], // šŸ‘ˆ Provides the `test-only` tag to all stories in this file }; export default meta; type Story = StoryObj; export const IncludeStory: Story = { - tags: ['test-only'], // šŸ‘ˆ Configures the story to be added to the test suite with the test-runner + //šŸ‘‡ Adds the `test-only` tag to this story to be included in the tests when enabled in the test-runner configuration + tags: ['test-only'], }; ``` diff --git a/docs/snippets/common/my-component-skip-tags.story.js.mdx b/docs/snippets/common/my-component-skip-tags.story.js.mdx index bf3737cb2ef..c59991aace9 100644 --- a/docs/snippets/common/my-component-skip-tags.story.js.mdx +++ b/docs/snippets/common/my-component-skip-tags.story.js.mdx @@ -5,10 +5,11 @@ import { MyComponent } from './MyComponent'; export default { component: MyComponent, - tags: ['skip-test'], // šŸ‘ˆ Skips running tests on this story + tags: ['skip-test'], // šŸ‘ˆ Provides the `skip-test` tag to all stories in this file }; export const SkipStory = { - tags: ['skip-test'], // šŸ‘ˆ Configures the story to be skipped when running tests with the test-runner + //šŸ‘‡ Adds the `skip-test` tag to this story to allow it to be skipped in the tests when enabled in the test-runner configuration + tags: ['skip-test'], }; ``` diff --git a/docs/snippets/common/my-component-skip-tags.story.ts.mdx b/docs/snippets/common/my-component-skip-tags.story.ts.mdx index 62c0d1dfbab..3513e3d33c4 100644 --- a/docs/snippets/common/my-component-skip-tags.story.ts.mdx +++ b/docs/snippets/common/my-component-skip-tags.story.ts.mdx @@ -8,13 +8,14 @@ import { MyComponent } from './MyComponent'; const meta: Meta = { component: MyComponent, - tags: ['skip-test'], // šŸ‘ˆ Skips running tests on this story + tags: ['skip-test'], // šŸ‘ˆ Provides the `skip-test` tag to all stories in this file }; export default meta; type Story = StoryObj; export const SkipStory: Story = { - tags: ['skip-test'], // šŸ‘ˆ Configures the story to be skipped when running tests with the test-runner + //šŸ‘‡ Adds the `skip-test` tag to this story to allow it to be skipped in the tests when enabled in the test-runner configuration + tags: ['skip-test'], }; ``` diff --git a/docs/snippets/common/test-runner-a11y-config.js.mdx b/docs/snippets/common/test-runner-a11y-config.js.mdx index bf5f2b954fb..9ce64c1e3f0 100644 --- a/docs/snippets/common/test-runner-a11y-config.js.mdx +++ b/docs/snippets/common/test-runner-a11y-config.js.mdx @@ -8,10 +8,10 @@ const { injectAxe, checkA11y } = require('axe-playwright'); * to learn more about the test-runner hooks API. */ module.exports = { - async preRender(page) { + async preVisit(page) { await injectAxe(page); }, - async postRender(page) { + async postVisit(page) { await checkA11y(page, '#storybook-root', { detailedReport: true, detailedReportOptions: { diff --git a/docs/snippets/common/test-runner-a11y-config.ts.mdx b/docs/snippets/common/test-runner-a11y-config.ts.mdx index c007a62c124..4bc91082506 100644 --- a/docs/snippets/common/test-runner-a11y-config.ts.mdx +++ b/docs/snippets/common/test-runner-a11y-config.ts.mdx @@ -8,11 +8,11 @@ import { injectAxe, checkA11y } from 'axe-playwright'; * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api * to learn more about the test-runner hooks API. */ -const a11yConfig: TestRunnerConfig = { - async preRender(page) { +const config: TestRunnerConfig = { + async preVisit(page) { await injectAxe(page); }, - async postRender(page) { + async postVisit(page) { await checkA11y(page, '#storybook-root', { detailedReport: true, detailedReportOptions: { @@ -22,5 +22,5 @@ const a11yConfig: TestRunnerConfig = { }, }; -export default a11yConfig; +export default config; ``` diff --git a/docs/snippets/common/test-runner-a11y-configure.js.mdx b/docs/snippets/common/test-runner-a11y-configure.js.mdx index 23333177d9a..abd0a20b408 100644 --- a/docs/snippets/common/test-runner-a11y-configure.js.mdx +++ b/docs/snippets/common/test-runner-a11y-configure.js.mdx @@ -10,10 +10,10 @@ const { getStoryContext } = require('@storybook/test-runner'); * to learn more about the test-runner hooks API. */ module.exports = { - async preRender(page) { + async preVisit(page) { await injectAxe(page); }, - async postRender(page, context) { + async postVisit(page, context) { // Get the entire context of a story, including parameters, args, argTypes, etc. const storyContext = await getStoryContext(page, context); diff --git a/docs/snippets/common/test-runner-a11y-configure.ts.mdx b/docs/snippets/common/test-runner-a11y-configure.ts.mdx index 5a9adea12c8..5af07ea7d76 100644 --- a/docs/snippets/common/test-runner-a11y-configure.ts.mdx +++ b/docs/snippets/common/test-runner-a11y-configure.ts.mdx @@ -10,11 +10,11 @@ import { injectAxe, checkA11y, configureAxe } from 'axe-playwright'; * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api * to learn more about the test-runner hooks API. */ -const a11yConfig: TestRunnerConfig = { - async preRender(page) { +const config: TestRunnerConfig = { + async preVisit(page) { await injectAxe(page); }, - async postRender(page, context) { + async postVisit(page, context) { // Get the entire context of a story, including parameters, args, argTypes, etc. const storyContext = await getStoryContext(page, context); @@ -32,5 +32,5 @@ const a11yConfig: TestRunnerConfig = { }, }; -export default a11yConfig; +export default config; ``` diff --git a/docs/snippets/common/test-runner-a11y-disable.js.mdx b/docs/snippets/common/test-runner-a11y-disable.js.mdx index 02a13b3efca..d6177c9ce38 100644 --- a/docs/snippets/common/test-runner-a11y-disable.js.mdx +++ b/docs/snippets/common/test-runner-a11y-disable.js.mdx @@ -9,10 +9,10 @@ const { injectAxe, checkA11y } = require('axe-playwright'); * to learn more about the test-runner hooks API. */ module.exports = { - async preRender(page) { + async preVisit(page) { await injectAxe(page); }, - async postRender(page, context) { + async postVisit(page, context) { // Get the entire context of a story, including parameters, args, argTypes, etc. const storyContext = await getStoryContext(page, context); diff --git a/docs/snippets/common/test-runner-a11y-disable.ts.mdx b/docs/snippets/common/test-runner-a11y-disable.ts.mdx index 97d8cd06f0f..1be273fee21 100644 --- a/docs/snippets/common/test-runner-a11y-disable.ts.mdx +++ b/docs/snippets/common/test-runner-a11y-disable.ts.mdx @@ -10,11 +10,11 @@ import { injectAxe, checkA11y } from 'axe-playwright'; * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api * to learn more about the test-runner hooks API. */ -const a11yConfig: TestRunnerConfig = { - async preRender(page) { +const config: TestRunnerConfig = { + async preVisit(page) { await injectAxe(page); }, - async postRender(page, context) { + async postVisit(page, context) { // Get the entire context of a story, including parameters, args, argTypes, etc. const storyContext = await getStoryContext(page, context); @@ -31,5 +31,5 @@ const a11yConfig: TestRunnerConfig = { }, }; -export default a11yConfig; +export default config; ``` diff --git a/docs/snippets/common/test-runner-custom-page-viewport.js.mdx b/docs/snippets/common/test-runner-custom-page-viewport.js.mdx index a4d5d0cc57f..b334755d1f7 100644 --- a/docs/snippets/common/test-runner-custom-page-viewport.js.mdx +++ b/docs/snippets/common/test-runner-custom-page-viewport.js.mdx @@ -7,7 +7,7 @@ const { MINIMAL_VIEWPORTS } = require('@storybook/addon-viewport'); const DEFAULT_VIEWPORT_SIZE = { width: 1280, height: 720 }; module.exports = { - async preRender(page, story) { + async preVisit(page, story) { // Accesses the story's parameters and retrieves the viewport used to render it const context = await getStoryContext(page, story); const viewportName = context.parameters?.viewport?.defaultViewport; diff --git a/docs/snippets/common/test-runner-custom-page-viewport.ts.mdx b/docs/snippets/common/test-runner-custom-page-viewport.ts.mdx index 351b9e8bd0e..5db491a5133 100644 --- a/docs/snippets/common/test-runner-custom-page-viewport.ts.mdx +++ b/docs/snippets/common/test-runner-custom-page-viewport.ts.mdx @@ -9,7 +9,7 @@ const { MINIMAL_VIEWPORTS } = require('@storybook/addon-viewport'); const DEFAULT_VIEWPORT_SIZE = { width: 1280, height: 720 }; const config: TestRunnerConfig = { - async preRender(page, story) { + async preVisit(page, story) { // Accesses the story's parameters and retrieves the viewport used to render it const context = await getStoryContext(page, story); const viewportName = context.parameters?.viewport?.defaultViewport; diff --git a/docs/snippets/common/test-runner-helper-function.js.mdx b/docs/snippets/common/test-runner-helper-function.js.mdx index 739f0034b59..9e7827f029a 100644 --- a/docs/snippets/common/test-runner-helper-function.js.mdx +++ b/docs/snippets/common/test-runner-helper-function.js.mdx @@ -8,18 +8,18 @@ module.exports = { setup() { // Add your configuration here. }, - /* Hook to execute before a story is rendered. + /* Hook to execute before a story is initially visited before being rendered in the browser. * The page argument is the Playwright's page object for the story. * The context argument is a Storybook object containing the story's id, title, and name. */ - async preRender(page, context) { + async preVisit(page, context) { // Add your configuration here. }, - /* Hook to execute after a story is rendered. + /* Hook to execute after a story is visited and fully rendered. * The page argument is the Playwright's page object for the story * The context argument is a Storybook object containing the story's id, title, and name. */ - async postRender(page, context) { + async postVisit(page, context) { // Get the entire context of a story, including parameters, args, argTypes, etc. const storyContext = await getStoryContext(page, context); diff --git a/docs/snippets/common/test-runner-helper-function.ts.mdx b/docs/snippets/common/test-runner-helper-function.ts.mdx index 57a04bd7c46..af40e58b2de 100644 --- a/docs/snippets/common/test-runner-helper-function.ts.mdx +++ b/docs/snippets/common/test-runner-helper-function.ts.mdx @@ -9,18 +9,18 @@ const config: TestRunnerConfig = { setup() { // Add your configuration here. }, - /* Hook to execute before a story is rendered. + /* Hook to execute before a story is initially visited before being rendered in the browser. * The page argument is the Playwright's page object for the story. * The context argument is a Storybook object containing the story's id, title, and name. */ - async preRender(page, context) { + async preVisit(page, context) { // Add your configuration here. }, - /* Hook to execute after a story is rendered. + /* Hook to execute after a story is visited and fully rendered. * The page argument is the Playwright's page object for the story * The context argument is a Storybook object containing the story's id, title, and name. */ - async postRender(page, context) { + async postVisit(page, context) { // Get the entire context of a story, including parameters, args, argTypes, etc. const storyContext = await getStoryContext(page, context); diff --git a/docs/snippets/common/test-runner-hooks-example.js.mdx b/docs/snippets/common/test-runner-hooks-example.js.mdx index e3d52b73864..18876266bf3 100644 --- a/docs/snippets/common/test-runner-hooks-example.js.mdx +++ b/docs/snippets/common/test-runner-hooks-example.js.mdx @@ -6,18 +6,18 @@ module.exports = { setup() { // Add your configuration here. }, - /* Hook to execute before a story is rendered. + /* Hook to execute before a story is initially visited before being rendered in the browser. * The page argument is the Playwright's page object for the story. * The context argument is a Storybook object containing the story's id, title, and name. */ - async preRender(page, context) { + async preVisit(page, context) { // Add your configuration here. }, - /* Hook to execute after a story is rendered. + /* Hook to execute after a story is visited and fully rendered. * The page argument is the Playwright's page object for the story * The context argument is a Storybook object containing the story's id, title, and name. */ - async postRender(page, context) { + async postVisit(page, context) { // Add your configuration here. }, }; diff --git a/docs/snippets/common/test-runner-hooks-example.ts.mdx b/docs/snippets/common/test-runner-hooks-example.ts.mdx index 86398c9aeb4..f06d4c71b06 100644 --- a/docs/snippets/common/test-runner-hooks-example.ts.mdx +++ b/docs/snippets/common/test-runner-hooks-example.ts.mdx @@ -8,18 +8,18 @@ const config: TestRunnerConfig = { setup() { // Add your configuration here. }, - /* Hook to execute before a story is rendered. + /* Hook to execute before a story is initially visited before being rendered in the browser. * The page argument is the Playwright's page object for the story. * The context argument is a Storybook object containing the story's id, title, and name. */ - async preRender(page, context) { + async preVisit(page, context) { // Add your configuration here. }, - /* Hook to execute after a story is rendered. + /* Hook to execute after a story is visited and fully rendered. * The page argument is the Playwright's page object for the story * The context argument is a Storybook object containing the story's id, title, and name. */ - async postRender(page, context) { + async postVisit(page, context) { // Add your configuration here. }, }; diff --git a/docs/snippets/common/test-runner-waitpageready.js.mdx b/docs/snippets/common/test-runner-waitpageready.js.mdx index 0dfb8aecb22..1bb3df563c0 100644 --- a/docs/snippets/common/test-runner-waitpageready.js.mdx +++ b/docs/snippets/common/test-runner-waitpageready.js.mdx @@ -10,7 +10,7 @@ module.exports = { setup() { expect.extend({ toMatchImageSnapshot }); }, - async postRender(page, context) { + async postVisit(page, context) { // Awaits for the page to be loaded and available including assets (e.g., fonts) await waitForPageReady(page); diff --git a/docs/snippets/common/test-runner-waitpageready.ts.mdx b/docs/snippets/common/test-runner-waitpageready.ts.mdx index 7a3c1ae88d8..2da14b2c718 100644 --- a/docs/snippets/common/test-runner-waitpageready.ts.mdx +++ b/docs/snippets/common/test-runner-waitpageready.ts.mdx @@ -12,7 +12,7 @@ const config: TestRunnerConfig = { setup() { expect.extend({ toMatchImageSnapshot }); }, - async postRender(page, context) { + async postVisit(page, context) { // Awaits for the page to be loaded and available including assets (e.g., fonts) await waitForPageReady(page); diff --git a/docs/writing-tests/accessibility-testing.md b/docs/writing-tests/accessibility-testing.md index cbc39f9cdf1..36c17f89860 100644 --- a/docs/writing-tests/accessibility-testing.md +++ b/docs/writing-tests/accessibility-testing.md @@ -205,7 +205,7 @@ Add a new [configuration file](./test-runner.md#test-hook-api) inside your Story -`preRender` and `postRender` are convenient hooks that allow you to extend the test runner's default configuration. Read more about them [here](./test-runner.md#test-hook-api). +`preVisit` and `postVisit` are convenient hooks that allow you to extend the test runner's default configuration. Read more about them [here](./test-runner.md#test-hook-api). diff --git a/docs/writing-tests/test-runner.md b/docs/writing-tests/test-runner.md index fc34bbd9cae..90eef2dcaa8 100644 --- a/docs/writing-tests/test-runner.md +++ b/docs/writing-tests/test-runner.md @@ -202,12 +202,12 @@ The test-runner renders a story and executes its [play function](../writing-stor The test-runner exports test hooks that can be overridden globally to enable use cases like visual or DOM snapshots. These hooks give you access to the test lifecycle _before_ and _after_ the story is rendered. Listed below are the available hooks and an overview of how to use them. -| Hook | Description | -| ------------ | ------------------------------------------------------------------------------------------------- | -| `prepare` | Prepares the browser for tests
`async prepare({ page, browserContext, testRunnerConfig }) {}` | -| `setup` | Executes once before all the tests run
`setup() {}` | -| `preRender` | Executes before a story is rendered
`async preRender(page, context) {}` | -| `postRender` | Executes after the story is rendered
`async postRender(page, context) {}` | +| Hook | Description | +| ----------- | --------------------------------------------------------------------------------------------------------------- | +| `prepare` | Prepares the browser for tests
`async prepare({ page, browserContext, testRunnerConfig }) {}` | +| `setup` | Executes once before all the tests run
`setup() {}` | +| `preVisit` | Executes before a story is initially visited and rendered in the browser
`async preVisit(page, context) {}` | +| `postVisit` | Executes after the story is is visited and fully rendered
`async postVisit(page, context) {}` | To enable the hooks API, you'll need to add a new configuration file inside your Storybook directory and set them up as follows: @@ -224,7 +224,7 @@ To enable the hooks API, you'll need to add a new configuration file inside your -Except for the `setup` function, all other functions run asynchronously. Both `preRender` and `postRender` functions include two additional arguments, a [Playwright page](https://playwright.dev/docs/pages) and a context object which contains the `id`, `title`, and the `name` of the story. +Except for the `setup` function, all other functions run asynchronously. Both `preVisit` and `postVisit` functions include two additional arguments, a [Playwright page](https://playwright.dev/docs/pages) and a context object which contains the `id`, `title`, and the `name` of the story. @@ -233,9 +233,9 @@ When the test-runner executes, your existing tests will go through the following - The `setup` function is executed before all the tests run. - The context object is generated containing the required information. - Playwright navigates to the story's page. -- The `preRender` function is executed. +- The `preVisit` function is executed. - The story is rendered, and any existing `play` functions are executed. -- The `postRender` function is executed. +- The `postVisit` function is executed. ### (Experimental) Filter tests @@ -306,7 +306,7 @@ Applying tags for the component's stories should either be done at the component #### Skip tests -If you want to skip running tests on a particular story or subset of stories, you can configure your story with a custom tag, enable it in the test-runner configuration file, or run the test-runner with the `--skipTags` [CLI](#cli-options) flag. Running tests with this option will cause the test-runner to skip over the story and flag them accordingly in the test results. For example: +If you want to skip running tests on a particular story or subset of stories, you can configure your story with a custom tag, enable it in the test-runner configuration file, or run the test-runner with the `--skipTags` [CLI](#cli-options) flag. Running tests with this option will cause the test-runner to ignore and flag them accordingly in the test results, indicating that the tests are temporarily disabled. For example: From 6ead60de0f341019176ca0ed3576434fbaac1692 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Sat, 18 Nov 2023 20:27:17 +0000 Subject: [PATCH 090/170] Small tweaks --- docs/api/cli-options.md | 1 + docs/api/main-config-build.md | 5 +++++ docs/api/main-config.md | 1 + docs/configure/overview.md | 31 ++++++++++++++++--------------- docs/sharing/publish-storybook.md | 12 ++++++++++-- docs/toc.js | 5 +++++ 6 files changed, 38 insertions(+), 17 deletions(-) create mode 100644 docs/api/main-config-build.md diff --git a/docs/api/cli-options.md b/docs/api/cli-options.md index a89d55a94d1..2a2fcf3dfdd 100644 --- a/docs/api/cli-options.md +++ b/docs/api/cli-options.md @@ -74,6 +74,7 @@ Options include: | `--webpack-stats-json` | Write Webpack Stats JSON to disk
`storybook build --webpack-stats-json /my-storybook/webpack-stats` | | `--docs` | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)
`storybook build --docs` | | `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).
`storybook build --disable-telemetry` | +| `--test` | Optimize Storybook's production build for performance and tests by removing unnecessary features with the `test` option. Learn more [here](../api/main-config-build.md). | diff --git a/docs/api/main-config-build.md b/docs/api/main-config-build.md new file mode 100644 index 00000000000..6ccbe01a5df --- /dev/null +++ b/docs/api/main-config-build.md @@ -0,0 +1,5 @@ +--- +title: 'build' +--- + +Parent: [main.js|ts configuration](./main-config.md) diff --git a/docs/api/main-config.md b/docs/api/main-config.md index 69372067bdf..e0988eec381 100644 --- a/docs/api/main-config.md +++ b/docs/api/main-config.md @@ -30,6 +30,7 @@ An object to configure Storybook containing the following properties: - [`addons`](./main-config-addons.md) - [`babel`](./main-config-babel.md) - [`babelDefault`](./main-config-babel-default.md) +- [`build`](./main-config-build.md) - [`core`](./main-config-core.md) - [`docs`](./main-config-docs.md) - [`env`](./main-config-env.md) diff --git a/docs/configure/overview.md b/docs/configure/overview.md index 4e11a8f5c44..965515186fe 100644 --- a/docs/configure/overview.md +++ b/docs/configure/overview.md @@ -31,21 +31,22 @@ This configuration file is a [preset](../addons/addon-types.md) and, as such, ha -| Configuration element | Description | -| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `stories` | The array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.js` | -| `staticDirs` | Sets a list of directories of [static files](./images-and-assets.md#serving-static-files-via-storybook-configuration) to be loaded by Storybook
`staticDirs: ['../public']` | -| `addons` | Sets the list of [addons](https://storybook.js.org/integrations) loaded by Storybook
`addons: ['@storybook/addon-essentials']` | -| `typescript` | Configures how Storybook handles [TypeScript files](./typescript.md)
`typescript: { check: false, checkOptions: {} }` | -| `framework` | Configures Storybook based on a set of [framework-specific](./frameworks.md) settings
`framework: { name: '@storybook/svelte-vite', options:{} }` | -| `core` | Configures Storybook's [internal features](../api/main-config-core.md)
`core: { disableTelemetry: true, }` | -| `docs` | Configures Storybook's [auto-generated documentation](../writing-docs/autodocs.md)
`docs: { autodocs: 'tag' }` | -| `features` | Enables Storybook's [additional features](../api/main-config-features.md)
See table below for a list of available features `features: { storyStoreV7: true }` | -| `refs` | Configures [Storybook composition](../sharing/storybook-composition.md)
`refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` | -| `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging
`logLevel: 'debug'` | -| `webpackFinal` | Customize Storybook's [Webpack](../builders/webpack.md) setup
`webpackFinal: async (config:any) => { return config; }` | -| `viteFinal` | Customize Storybook's Vite setup when using the [vite builder](https://github.com/storybookjs/builder-vite)
`viteFinal: async (config: Vite.InlineConfig, options: Options) => { return config; }` | -| `env` | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration).
`env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` | +| Configuration element | Description | +| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `stories` | The array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.js` | +| `staticDirs` | Sets a list of directories of [static files](./images-and-assets.md#serving-static-files-via-storybook-configuration) to be loaded by Storybook
`staticDirs: ['../public']` | +| `addons` | Sets the list of [addons](https://storybook.js.org/integrations) loaded by Storybook
`addons: ['@storybook/addon-essentials']` | +| `typescript` | Configures how Storybook handles [TypeScript files](./typescript.md)
`typescript: { check: false, checkOptions: {} }` | +| `framework` | Configures Storybook based on a set of [framework-specific](./frameworks.md) settings
`framework: { name: '@storybook/svelte-vite', options:{} }` | +| `core` | Configures Storybook's [internal features](../api/main-config-core.md)
`core: { disableTelemetry: true, }` | +| `docs` | Configures Storybook's [auto-generated documentation](../writing-docs/autodocs.md)
`docs: { autodocs: 'tag' }` | +| `features` | Enables Storybook's [additional features](../api/main-config-features.md)
See table below for a list of available features `features: { storyStoreV7: true }` | +| `refs` | Configures [Storybook composition](../sharing/storybook-composition.md)
`refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` | +| `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging
`logLevel: 'debug'` | +| `webpackFinal` | Customize Storybook's [Webpack](../builders/webpack.md) setup
`webpackFinal: async (config:any) => { return config; }` | +| `viteFinal` | Customize Storybook's Vite setup when using the [vite builder](https://github.com/storybookjs/builder-vite)
`viteFinal: async (config: Vite.InlineConfig, options: Options) => { return config; }` | +| `env` | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration).
`env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` | +| `build` | Optimizes Storybook's production [build](../api/main-config-test.md) for performance by excluding specific features from the bundle. Useful when decreased build times are a priority.
`build:Ā { test: {} }` | ### Feature flags diff --git a/docs/sharing/publish-storybook.md b/docs/sharing/publish-storybook.md index ca98bb2d826..a4c21412820 100644 --- a/docs/sharing/publish-storybook.md +++ b/docs/sharing/publish-storybook.md @@ -50,6 +50,16 @@ Storybook will create a static web application capable of being served by any we +### Customizing the build for for performance + +By default, Storybook's production build will encapsulate all stories and documentation into the published bundle. This is great for small projects, but can cause performance issues for larger projects or when decreased build times are a priority. If you + + + + + +. To optimize Storybook's production build for performance and tests, you can remove unnecessary features with the `test` option. Learn more [here](../api/main-config-test.md). + ## Publish Storybook with Chromatic Once you've built your Storybook as a static web application, you can publish it to your web host. We recommend [Chromatic](https://www.chromatic.com/?utm_source=storybook_website&utm_medium=link&utm_campaign=storybook), a free publishing service made for Storybook that documents, versions, and indexes your UI components securely in the cloud. @@ -137,7 +147,6 @@ Since Storybook is built as a static web application, you can also publish it to To deploy Storybook on GitHub Pages, use the community-built [Deploy Storybook to GitHub Pages](https://github.com/bitovi/github-actions-storybook-to-github-pages) Action. To enable it, create a new workflow file inside your `.github/workflows` directory with the following content: - -

Component Publishing Protocol (CPP)

 diff --git a/docs/toc.js b/docs/toc.js index 9c773a49324..13d66fee3ba 100644 --- a/docs/toc.js +++ b/docs/toc.js @@ -506,6 +506,11 @@ module.exports = { title: 'babelDefault', pathSegment: 'main-config-babel-default', type: 'link', + }, + { + title: 'build', + pathSegment: 'main-config-build', + type: 'link', }, { title: 'core', From e2c41a8b834d8ed189d962f9b12179ddf5e5ea76 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Sat, 18 Nov 2023 21:01:46 +0000 Subject: [PATCH 091/170] tag fix and minor polish to the intro --- docs/writing-tests/test-runner.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/writing-tests/test-runner.md b/docs/writing-tests/test-runner.md index 90eef2dcaa8..fc4daeb130f 100644 --- a/docs/writing-tests/test-runner.md +++ b/docs/writing-tests/test-runner.md @@ -106,7 +106,7 @@ If you're already using any of those flags in your project, you should be able t | `--shard [index/count]` | Requires CI. Splits the test suite execution into multiple machines
`test-storybook --shard=1/8` | | `--failOnConsole` | Makes tests fail on browser console errors
`test-storybook --failOnConsole` | | `--includeTags` | Experimental feature
Defines a subset of stories to be tested if they match the enabled [tags](#experimental-filter-tests).
`test-storybook --includeTags="test-only, pages"` | -| `--excludeTags` | Experimental feature
Prevents stories from being tested if they match the provided [tags](#experimental-filter-tests).
`test-storybook --skipTags="no-tests, tokens"` | +| `--excludeTags` | Experimental feature
Prevents stories from being tested if they match the provided [tags](#experimental-filter-tests).
`test-storybook --excludeTags="no-tests, tokens"` | | `--skipTags` | Experimental feature
Configures the test runner to skip running tests for stories that match the provided [tags](#experimental-filter-tests).
`test-storybook --skipTags="skip-test, layout"` | @@ -239,7 +239,7 @@ When the test-runner executes, your existing tests will go through the following ### (Experimental) Filter tests -When you run the test-runner on Storybook, it tests every story by default. However, if you want to filter the tests, you can use the `tags` configuration option. Storybook originally introduced this feature to generate [automatic documentation](../writing-docs/autodocs.md) for stories. But it can be further extended to configure the test-runner to run tests according to the provided tags using a similar configuration option or via CLI flags (e.g., `--includeTags`, `--excludeTags`, `--skipTags`). Listed below are the available options and an overview of how to use them. +When you run the test-runner on Storybook, it tests every story by default. However, if you want to filter the tests, you can use the `tags` configuration option. Storybook originally introduced this feature to generate [automatic documentation](../writing-docs/autodocs.md) for stories. But it can be further extended to configure the test-runner to run tests according to the provided tags using a similar configuration option or via CLI flags (e.g., `--includeTags`, `--excludeTags`, `--skipTags`), only available with the latest stable release (`0.15` or higher). Listed below are the available options and an overview of how to use them. | Option | Description | | --------- | ----------------------------------------------------------------------------- | From 51d5ea788662f753f53d25522c5fbf67363cf5d7 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Sun, 19 Nov 2023 19:40:12 +0000 Subject: [PATCH 092/170] Examples added. Docs cleanup --- docs/api/cli-options.md | 28 ++-- docs/api/main-config-build.md | 148 ++++++++++++++++++ docs/configure/overview.md | 32 ++-- docs/faq.md | 24 +++ docs/sharing/publish-storybook.md | 14 +- .../main-config-test-disable-autodocs.js.mdx | 14 ++ .../main-config-test-disable-autodocs.ts.mdx | 18 +++ .../main-config-test-disable-blocks.js.mdx | 14 ++ .../main-config-test-disable-blocks.ts.mdx | 18 +++ ...n-config-test-disable-disableaddons.js.mdx | 20 +++ ...n-config-test-disable-disableaddons.ts.mdx | 24 +++ .../main-config-test-disable-docgen.js.mdx | 14 ++ .../main-config-test-disable-docgen.ts.mdx | 18 +++ .../main-config-test-disable-mdx.js.mdx | 14 ++ .../main-config-test-disable-mdx.ts.mdx | 18 +++ ...main-config-test-disable-sourcemaps.js.mdx | 14 ++ ...main-config-test-disable-sourcemaps.ts.mdx | 18 +++ ...ain-config-test-disable-treeshaking.js.mdx | 14 ++ ...ain-config-test-disable-treeshaking.ts.mdx | 18 +++ .../storybook-build-test-flag.npm.js.mdx | 3 + .../storybook-build-test-flag.pnpm.js.mdx | 3 + .../storybook-build-test-flag.yarn.js.mdx | 3 + 22 files changed, 457 insertions(+), 34 deletions(-) create mode 100644 docs/snippets/common/main-config-test-disable-autodocs.js.mdx create mode 100644 docs/snippets/common/main-config-test-disable-autodocs.ts.mdx create mode 100644 docs/snippets/common/main-config-test-disable-blocks.js.mdx create mode 100644 docs/snippets/common/main-config-test-disable-blocks.ts.mdx create mode 100644 docs/snippets/common/main-config-test-disable-disableaddons.js.mdx create mode 100644 docs/snippets/common/main-config-test-disable-disableaddons.ts.mdx create mode 100644 docs/snippets/common/main-config-test-disable-docgen.js.mdx create mode 100644 docs/snippets/common/main-config-test-disable-docgen.ts.mdx create mode 100644 docs/snippets/common/main-config-test-disable-mdx.js.mdx create mode 100644 docs/snippets/common/main-config-test-disable-mdx.ts.mdx create mode 100644 docs/snippets/common/main-config-test-disable-sourcemaps.js.mdx create mode 100644 docs/snippets/common/main-config-test-disable-sourcemaps.ts.mdx create mode 100644 docs/snippets/common/main-config-test-disable-treeshaking.js.mdx create mode 100644 docs/snippets/common/main-config-test-disable-treeshaking.ts.mdx create mode 100644 docs/snippets/common/storybook-build-test-flag.npm.js.mdx create mode 100644 docs/snippets/common/storybook-build-test-flag.pnpm.js.mdx create mode 100644 docs/snippets/common/storybook-build-test-flag.yarn.js.mdx diff --git a/docs/api/cli-options.md b/docs/api/cli-options.md index 2a2fcf3dfdd..1ccbb4d1f12 100644 --- a/docs/api/cli-options.md +++ b/docs/api/cli-options.md @@ -61,20 +61,20 @@ storybook build [options] Options include: -| Option | Description | -| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `-h`, `--help` | Output usage information
`storybook build --help` | -| `-V`, `--version` | Output the version number
`storybook build -V` | -| `-s`, `--static-dir` | **Deprecated** [see note](#static-dir-deprecation).
Directory where to load static files from, comma-separated list
`storybook build -s public` | -| `-o`, `--output-dir [dir-name]` | Directory where to store built files
`storybook build -o /my-deployed-storybook` | -| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from
`storybook build -c .storybook` | -| `--loglevel [level]` | Controls level of logging during build.
Available options: `silly`, `verbose`, `info` (default), `warn`, `error`, `silent`
`storybook build --loglevel warn` | -| `--quiet` | Suppress verbose build output
`storybook build --quiet` | -| `--debug-webpack` | Display final webpack configurations for debugging purposes
`storybook build --debug-webpack` | -| `--webpack-stats-json` | Write Webpack Stats JSON to disk
`storybook build --webpack-stats-json /my-storybook/webpack-stats` | -| `--docs` | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)
`storybook build --docs` | -| `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).
`storybook build --disable-telemetry` | -| `--test` | Optimize Storybook's production build for performance and tests by removing unnecessary features with the `test` option. Learn more [here](../api/main-config-build.md). | +| Option | Description | +| ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `-h`, `--help` | Output usage information
`storybook build --help` | +| `-V`, `--version` | Output the version number
`storybook build -V` | +| `-s`, `--static-dir` | **Deprecated** [see note](#static-dir-deprecation).
Directory where to load static files from, comma-separated list
`storybook build -s public` | +| `-o`, `--output-dir [dir-name]` | Directory where to store built files
`storybook build -o /my-deployed-storybook` | +| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from
`storybook build -c .storybook` | +| `--loglevel [level]` | Controls level of logging during build.
Available options: `silly`, `verbose`, `info` (default), `warn`, `error`, `silent`
`storybook build --loglevel warn` | +| `--quiet` | Suppress verbose build output
`storybook build --quiet` | +| `--debug-webpack` | Display final webpack configurations for debugging purposes
`storybook build --debug-webpack` | +| `--webpack-stats-json` | Write Webpack Stats JSON to disk
`storybook build --webpack-stats-json /my-storybook/webpack-stats` | +| `--docs` | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)
`storybook build --docs` | +| `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).
`storybook build --disable-telemetry` | +| `--test` | Optimize Storybook's production build for performance and tests by removing unnecessary features with the `test` option. Learn more [here](../api/main-config-build.md).
`storybook build --test` | diff --git a/docs/api/main-config-build.md b/docs/api/main-config-build.md index 6ccbe01a5df..a206662bae4 100644 --- a/docs/api/main-config-build.md +++ b/docs/api/main-config-build.md @@ -3,3 +3,151 @@ title: 'build' --- Parent: [main.js|ts configuration](./main-config.md) + +Type: `TestBuildConfig` + +Provides configuration options to optimize Storybook's production build output. + +## `test` + +Type: `TestBuildFlags` + +```ts +{ + disableBlocks?: boolean; + disabledAddons?: string[]; + disableMDXEntries?: boolean; + disableAutoDocs?: boolean; + disableDocgen?: boolean; + disableSourcemaps?: boolean; + disableTreeShaking?: boolean; + +} +``` + +Configures Storybook's production builds for performance testing purposes by disabling certain features from the build. When running ' build-storybook ', this feature is enabled by setting the `--test` [flag](./cli-options.md#build). + + + +Enabling these features can cause build or runtime errors with Storybook. We recommend enabling only the features you need for your project. + + + +### `test.disableBlocks` + +Type: `boolean` + +Excludes the `@storybook/blocks` package from the build, which generates automatic documentation with [Docs Blocks](../writing-docs/doc-blocks.md). + + + + + + + +### `test.disabledAddons` + +Type: `string[]` + +Sets the list of addons that will disabled in the build output. + + + + + + + +### `test.disableMDXEntries` + +Type: `boolean` + +Enabling this option removes user-written documentation entries in MDX format from the build. + + + + + + + +### `test.disableAutoDocs` + +Type: `boolean` + +Prevents automatic documentation generated with the [autodocs](../writing-docs/autodocs.md) feature from being included in the build. + + + + + + + +### `test.disableDocgen` + +Type: `boolean` + +Disables [automatic argType](./arg-types.md#automatic-argtype-inference) and component property inference with any of the supported static analysis tools based on the framework you are using. + + + + + + + +### `test.disableSourcemaps` + +Type: `boolean` + +Overrides the default behavior of generating source maps for the build. + + + + + + + +### `test.disableTreeShaking` + +Type: `boolean` + +Disables [tree shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking) in the build. + + + + + + diff --git a/docs/configure/overview.md b/docs/configure/overview.md index 965515186fe..ee38fd9a456 100644 --- a/docs/configure/overview.md +++ b/docs/configure/overview.md @@ -31,22 +31,22 @@ This configuration file is a [preset](../addons/addon-types.md) and, as such, ha -| Configuration element | Description | -| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `stories` | The array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.js` | -| `staticDirs` | Sets a list of directories of [static files](./images-and-assets.md#serving-static-files-via-storybook-configuration) to be loaded by Storybook
`staticDirs: ['../public']` | -| `addons` | Sets the list of [addons](https://storybook.js.org/integrations) loaded by Storybook
`addons: ['@storybook/addon-essentials']` | -| `typescript` | Configures how Storybook handles [TypeScript files](./typescript.md)
`typescript: { check: false, checkOptions: {} }` | -| `framework` | Configures Storybook based on a set of [framework-specific](./frameworks.md) settings
`framework: { name: '@storybook/svelte-vite', options:{} }` | -| `core` | Configures Storybook's [internal features](../api/main-config-core.md)
`core: { disableTelemetry: true, }` | -| `docs` | Configures Storybook's [auto-generated documentation](../writing-docs/autodocs.md)
`docs: { autodocs: 'tag' }` | -| `features` | Enables Storybook's [additional features](../api/main-config-features.md)
See table below for a list of available features `features: { storyStoreV7: true }` | -| `refs` | Configures [Storybook composition](../sharing/storybook-composition.md)
`refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` | -| `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging
`logLevel: 'debug'` | -| `webpackFinal` | Customize Storybook's [Webpack](../builders/webpack.md) setup
`webpackFinal: async (config:any) => { return config; }` | -| `viteFinal` | Customize Storybook's Vite setup when using the [vite builder](https://github.com/storybookjs/builder-vite)
`viteFinal: async (config: Vite.InlineConfig, options: Options) => { return config; }` | -| `env` | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration).
`env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` | -| `build` | Optimizes Storybook's production [build](../api/main-config-test.md) for performance by excluding specific features from the bundle. Useful when decreased build times are a priority.
`build:Ā { test: {} }` | +| Configuration element | Description | +| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `stories` | The array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.js` | +| `staticDirs` | Sets a list of directories of [static files](./images-and-assets.md#serving-static-files-via-storybook-configuration) to be loaded by Storybook
`staticDirs: ['../public']` | +| `addons` | Sets the list of [addons](https://storybook.js.org/integrations) loaded by Storybook
`addons: ['@storybook/addon-essentials']` | +| `typescript` | Configures how Storybook handles [TypeScript files](./typescript.md)
`typescript: { check: false, checkOptions: {} }` | +| `framework` | Configures Storybook based on a set of [framework-specific](./frameworks.md) settings
`framework: { name: '@storybook/svelte-vite', options:{} }` | +| `core` | Configures Storybook's [internal features](../api/main-config-core.md)
`core: { disableTelemetry: true, }` | +| `docs` | Configures Storybook's [auto-generated documentation](../writing-docs/autodocs.md)
`docs: { autodocs: 'tag' }` | +| `features` | Enables Storybook's [additional features](../api/main-config-features.md)
See table below for a list of available features `features: { storyStoreV7: true }` | +| `refs` | Configures [Storybook composition](../sharing/storybook-composition.md)
`refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` | +| `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging
`logLevel: 'debug'` | +| `webpackFinal` | Customize Storybook's [Webpack](../builders/webpack.md) setup
`webpackFinal: async (config:any) => { return config; }` | +| `viteFinal` | Customize Storybook's Vite setup when using the [vite builder](https://github.com/storybookjs/builder-vite)
`viteFinal: async (config: Vite.InlineConfig, options: Options) => { return config; }` | +| `env` | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration).
`env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` | +| `build` | Optimizes Storybook's production [build](../api/main-config-build.md) for performance by excluding specific features from the bundle. Useful when decreased build times are a priority.
`build:Ā { test: {} }` | ### Feature flags diff --git a/docs/faq.md b/docs/faq.md index 6539f6a3431..387986d9cfb 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -344,6 +344,30 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S | | @storybook/blocks/useOf | [See current documentation](./api/doc-block-useof.md) | Non existing feature or undocumented | Non existing feature or undocumented | | | Stories/Component Story Format | [See current documentation](./api/csf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/component-story-format) | Non existing feature or undocumented | | | Stories/StoriesOF format (see note below) | [See current documentation](https://github.com/storybookjs/storybook/blob/main/code/lib/preview-api/docs/storiesOf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/storiesof-api) | Non existing feature or undocumented | +| | ArgTypes | [See current documentation](./api/arg-types.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/Overview | [See current documentation](./api/main-config.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/framework | [See current documentation](./api/main-config-framework.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/stories | [See current documentation](./api/main-config-stories.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/addons | [See current documentation](./api/main-config-addons.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/babel | [See current documentation](./api/main-config-babel.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/babelDefault | [See current documentation](./api/main-config-babel-default.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/build | [See current documentation](./api/main-config-build.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/core | [See current documentation](./api/main-config-core.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/docs | [See current documentation](./api/main-config-docs.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/env | [See current documentation](./api/main-config-env.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/features | [See current documentation](./api/main-config-features.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/indexers | [See current documentation](./api/main-config-indexers.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/logLevel | [See current documentation](./api/main-config-log-level.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/managerHead | [See current documentation](./api/main-config-manager-head.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/previewAnnotations | [See current documentation](./api/main-config-preview-annotations.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/previewBody | [See current documentation](./api/main-config-preview-body.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/previewHead | [See current documentation](./api/main-config-preview-head.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/refs | [See current documentation](./api/main-config-refs.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/staticDirs | [See current documentation](./api/main-config-static-dirs.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/typescript | [See current documentation](./api/main-config-typescript.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/viteFinal | [See current documentation](./api/main-config-vite-final.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/webpackFinal | [See current documentation](./api/main-config-webpack-final.md) | Non existing feature or undocumented | Non existing feature or undocumented | +| | `main.js` configuration/config | [See current documentation](./api/main-config-config.md) | Non existing feature or undocumented | Non existing feature or undocumented | | | Frameworks | [See current documentation](./api/new-frameworks.md) | Non existing feature or undocumented | Non existing feature or undocumented | | | CLI options | [See current documentation](./api/cli-options.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options) | diff --git a/docs/sharing/publish-storybook.md b/docs/sharing/publish-storybook.md index a4c21412820..cf6b20b2e1b 100644 --- a/docs/sharing/publish-storybook.md +++ b/docs/sharing/publish-storybook.md @@ -50,15 +50,21 @@ Storybook will create a static web application capable of being served by any we -### Customizing the build for for performance +### Customizing the build for performance -By default, Storybook's production build will encapsulate all stories and documentation into the published bundle. This is great for small projects, but can cause performance issues for larger projects or when decreased build times are a priority. If you +By default, Storybook's production build will encapsulate all stories and documentation into the production bundle. This is ideal for small projects but can cause performance issues for larger projects or when decreased build times are a priority (e.g., testing, CI/CD). If you need, you can customize the production build with the [`test` option](../api/main-config-build.md#test) in your `main.js|ts` configuration file and adjust your build script to enable the optimizations with the `--test` [flag](../api/cli-options.md#build). - + -. To optimize Storybook's production build for performance and tests, you can remove unnecessary features with the `test` option. Learn more [here](../api/main-config-test.md). + ## Publish Storybook with Chromatic diff --git a/docs/snippets/common/main-config-test-disable-autodocs.js.mdx b/docs/snippets/common/main-config-test-disable-autodocs.js.mdx new file mode 100644 index 00000000000..86b7de8fb7b --- /dev/null +++ b/docs/snippets/common/main-config-test-disable-autodocs.js.mdx @@ -0,0 +1,14 @@ +```js +// .storybook/main.js + +export default { + // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) + framework: '@storybook/your-framework', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + build: { + test: { + disableAutoDocs: true, + }, + }, +}; +``` diff --git a/docs/snippets/common/main-config-test-disable-autodocs.ts.mdx b/docs/snippets/common/main-config-test-disable-autodocs.ts.mdx new file mode 100644 index 00000000000..1eb9e721819 --- /dev/null +++ b/docs/snippets/common/main-config-test-disable-autodocs.ts.mdx @@ -0,0 +1,18 @@ +```ts +// .storybook/main.ts + +// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) +import type { StorybookConfig } from '@storybook/your-framework'; + +const config: StorybookConfig = { + framework: '@storybook/your-framework', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + build: { + test: { + disableAutoDocs: true, + }, + }, +}; + +export default config; +``` diff --git a/docs/snippets/common/main-config-test-disable-blocks.js.mdx b/docs/snippets/common/main-config-test-disable-blocks.js.mdx new file mode 100644 index 00000000000..9b4aa8c9a47 --- /dev/null +++ b/docs/snippets/common/main-config-test-disable-blocks.js.mdx @@ -0,0 +1,14 @@ +```js +// .storybook/main.js + +export default { + // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) + framework: '@storybook/your-framework', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + build: { + test: { + disableBlocks: true, + }, + }, +}; +``` diff --git a/docs/snippets/common/main-config-test-disable-blocks.ts.mdx b/docs/snippets/common/main-config-test-disable-blocks.ts.mdx new file mode 100644 index 00000000000..0cb4b4235bb --- /dev/null +++ b/docs/snippets/common/main-config-test-disable-blocks.ts.mdx @@ -0,0 +1,18 @@ +```ts +// .storybook/main.ts + +// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) +import type { StorybookConfig } from '@storybook/your-framework'; + +const config: StorybookConfig = { + framework: '@storybook/your-framework', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + build: { + test: { + disableBlocks: true, + }, + }, +}; + +export default config; +``` diff --git a/docs/snippets/common/main-config-test-disable-disableaddons.js.mdx b/docs/snippets/common/main-config-test-disable-disableaddons.js.mdx new file mode 100644 index 00000000000..62edb30799b --- /dev/null +++ b/docs/snippets/common/main-config-test-disable-disableaddons.js.mdx @@ -0,0 +1,20 @@ +```js +// .storybook/main.js + +export default { + // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) + framework: '@storybook/your-framework', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + addons: [ + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-interactions', + '@storybook/addon-a11y', + ], + build: { + test: { + disabledAddons: ['@storybook/addon-a11y'], + }, + }, +}; +``` diff --git a/docs/snippets/common/main-config-test-disable-disableaddons.ts.mdx b/docs/snippets/common/main-config-test-disable-disableaddons.ts.mdx new file mode 100644 index 00000000000..eb05b42ec95 --- /dev/null +++ b/docs/snippets/common/main-config-test-disable-disableaddons.ts.mdx @@ -0,0 +1,24 @@ +```ts +// .storybook/main.ts + +// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) +import type { StorybookConfig } from '@storybook/your-framework'; + +const config: StorybookConfig = { + framework: '@storybook/your-framework', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + addons: [ + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-interactions', + '@storybook/addon-a11y', + ], + build: { + test: { + disabledAddons: ['@storybook/addon-a11y'], + }, + }, +}; + +export default config; +``` diff --git a/docs/snippets/common/main-config-test-disable-docgen.js.mdx b/docs/snippets/common/main-config-test-disable-docgen.js.mdx new file mode 100644 index 00000000000..ffe4bdc2f86 --- /dev/null +++ b/docs/snippets/common/main-config-test-disable-docgen.js.mdx @@ -0,0 +1,14 @@ +```js +// .storybook/main.js + +export default { + // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) + framework: '@storybook/your-framework', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + build: { + test: { + disableDocgen: true, + }, + }, +}; +``` diff --git a/docs/snippets/common/main-config-test-disable-docgen.ts.mdx b/docs/snippets/common/main-config-test-disable-docgen.ts.mdx new file mode 100644 index 00000000000..1d0eb3c10d9 --- /dev/null +++ b/docs/snippets/common/main-config-test-disable-docgen.ts.mdx @@ -0,0 +1,18 @@ +```ts +// .storybook/main.ts + +// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) +import type { StorybookConfig } from '@storybook/your-framework'; + +const config: StorybookConfig = { + framework: '@storybook/your-framework', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + build: { + test: { + disableDocgen: true, + }, + }, +}; + +export default config; +``` diff --git a/docs/snippets/common/main-config-test-disable-mdx.js.mdx b/docs/snippets/common/main-config-test-disable-mdx.js.mdx new file mode 100644 index 00000000000..f6204594c1e --- /dev/null +++ b/docs/snippets/common/main-config-test-disable-mdx.js.mdx @@ -0,0 +1,14 @@ +```js +// .storybook/main.js + +export default { + // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) + framework: '@storybook/your-framework', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + build: { + test: { + disableMDXEntries: true, + }, + }, +}; +``` diff --git a/docs/snippets/common/main-config-test-disable-mdx.ts.mdx b/docs/snippets/common/main-config-test-disable-mdx.ts.mdx new file mode 100644 index 00000000000..e5327602aed --- /dev/null +++ b/docs/snippets/common/main-config-test-disable-mdx.ts.mdx @@ -0,0 +1,18 @@ +```ts +// .storybook/main.ts + +// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) +import type { StorybookConfig } from '@storybook/your-framework'; + +const config: StorybookConfig = { + framework: '@storybook/your-framework', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + build: { + test: { + disableMDXEntries: true, + }, + }, +}; + +export default config; +``` diff --git a/docs/snippets/common/main-config-test-disable-sourcemaps.js.mdx b/docs/snippets/common/main-config-test-disable-sourcemaps.js.mdx new file mode 100644 index 00000000000..9207b931709 --- /dev/null +++ b/docs/snippets/common/main-config-test-disable-sourcemaps.js.mdx @@ -0,0 +1,14 @@ +```js +// .storybook/main.js + +export default { + // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) + framework: '@storybook/your-framework', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + build: { + test: { + disableSourcemaps: true, + }, + }, +}; +``` diff --git a/docs/snippets/common/main-config-test-disable-sourcemaps.ts.mdx b/docs/snippets/common/main-config-test-disable-sourcemaps.ts.mdx new file mode 100644 index 00000000000..79b0abab693 --- /dev/null +++ b/docs/snippets/common/main-config-test-disable-sourcemaps.ts.mdx @@ -0,0 +1,18 @@ +```ts +// .storybook/main.ts + +// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) +import type { StorybookConfig } from '@storybook/your-framework'; + +const config: StorybookConfig = { + framework: '@storybook/your-framework', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + build: { + test: { + disableSourcemaps: true, + }, + }, +}; + +export default config; +``` diff --git a/docs/snippets/common/main-config-test-disable-treeshaking.js.mdx b/docs/snippets/common/main-config-test-disable-treeshaking.js.mdx new file mode 100644 index 00000000000..f0957f7e553 --- /dev/null +++ b/docs/snippets/common/main-config-test-disable-treeshaking.js.mdx @@ -0,0 +1,14 @@ +```js +// .storybook/main.js + +export default { + // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) + framework: '@storybook/your-framework', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + build: { + test: { + disableTreeShaking: true, + }, + }, +}; +``` diff --git a/docs/snippets/common/main-config-test-disable-treeshaking.ts.mdx b/docs/snippets/common/main-config-test-disable-treeshaking.ts.mdx new file mode 100644 index 00000000000..b053cfa0343 --- /dev/null +++ b/docs/snippets/common/main-config-test-disable-treeshaking.ts.mdx @@ -0,0 +1,18 @@ +```ts +// .storybook/main.ts + +// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite) +import type { StorybookConfig } from '@storybook/your-framework'; + +const config: StorybookConfig = { + framework: '@storybook/your-framework', + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + build: { + test: { + disableTreeShaking: true, + }, + }, +}; + +export default config; +``` diff --git a/docs/snippets/common/storybook-build-test-flag.npm.js.mdx b/docs/snippets/common/storybook-build-test-flag.npm.js.mdx new file mode 100644 index 00000000000..202b2cdb318 --- /dev/null +++ b/docs/snippets/common/storybook-build-test-flag.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npm run build-storybook -- --test +``` diff --git a/docs/snippets/common/storybook-build-test-flag.pnpm.js.mdx b/docs/snippets/common/storybook-build-test-flag.pnpm.js.mdx new file mode 100644 index 00000000000..ae1a481577d --- /dev/null +++ b/docs/snippets/common/storybook-build-test-flag.pnpm.js.mdx @@ -0,0 +1,3 @@ +```shell +pnpm run build-storybook --test +``` diff --git a/docs/snippets/common/storybook-build-test-flag.yarn.js.mdx b/docs/snippets/common/storybook-build-test-flag.yarn.js.mdx new file mode 100644 index 00000000000..cb2007d3e8b --- /dev/null +++ b/docs/snippets/common/storybook-build-test-flag.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn build-storybook --test +``` From 8aad2aae9efa0cb52971d5fa5cb7fca23aa80ff5 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt <119138536+kshmidt-digma@users.noreply.github.com> Date: Mon, 20 Nov 2023 04:20:33 +0100 Subject: [PATCH 093/170] Update design-integrations.md Update link to the actual version of addon --- docs/sharing/design-integrations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/sharing/design-integrations.md b/docs/sharing/design-integrations.md index d2211a7b52d..ca0842f18b1 100644 --- a/docs/sharing/design-integrations.md +++ b/docs/sharing/design-integrations.md @@ -57,7 +57,7 @@ Once they're connected, you'll be able to view the story by clicking the link in ### Embed Figma in Storybook with the addon -[Design addon](https://storybook.js.org/addons/storybook-addon-designs) allows you to embed Figma files and prototypes in Storybook. +[Designs addon](https://storybook.js.org/addons/@storybook/addon-designs) allows you to embed Figma files and prototypes in Storybook. ![Storybook addon figma](./storybook-figma-addon.png) From 0dbb047163aece968ebedb034d81f7f458e9f0aa Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 15 Nov 2023 12:58:04 +0100 Subject: [PATCH 094/170] Next.js: Add experimental SWC support --- .../src/preview/iframe-webpack.config.ts | 107 ++-------- code/frameworks/nextjs/package.json | 12 +- code/frameworks/nextjs/src/css/webpack.ts | 3 + .../src/font/webpack/configureNextFont.ts | 30 +-- .../local/get-font-face-declarations.ts | 5 +- .../loader/storybook-nextjs-font-loader.ts | 22 ++- code/frameworks/nextjs/src/preset.ts | 14 +- code/frameworks/nextjs/src/swc/loader.ts | 77 ++++++++ .../nextjs/src/swc/next-swc-loader-patch.ts | 184 ++++++++++++++++++ code/lib/core-webpack/package.json | 1 + code/lib/core-webpack/src/index.ts | 1 + code/lib/core-webpack/src/types.ts | 6 + .../src/virtual-module-mapping.ts | 111 +++++++++++ code/yarn.lock | 97 ++++----- 14 files changed, 507 insertions(+), 163 deletions(-) create mode 100644 code/frameworks/nextjs/src/swc/loader.ts create mode 100644 code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts create mode 100644 code/lib/core-webpack/src/virtual-module-mapping.ts diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts index 3cea0d84fc7..ad8fe95f4b3 100644 --- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -1,4 +1,4 @@ -import { dirname, isAbsolute, join, resolve } from 'path'; +import { dirname, join, resolve } from 'path'; import { DefinePlugin, HotModuleReplacementPlugin, ProgressPlugin, ProvidePlugin } from 'webpack'; import type { Configuration } from 'webpack'; import HtmlWebpackPlugin from 'html-webpack-plugin'; @@ -7,25 +7,20 @@ import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin'; import TerserWebpackPlugin from 'terser-webpack-plugin'; import VirtualModulePlugin from 'webpack-virtual-modules'; import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; -import slash from 'slash'; import type { TransformOptions as EsbuildOptions } from 'esbuild'; import type { JsMinifyOptions as SwcOptions } from '@swc/core'; -import type { Options, CoreConfig, DocsOptions, PreviewAnnotation } from '@storybook/types'; +import type { Options, CoreConfig, DocsOptions } from '@storybook/types'; import { globalsNameReferenceMap } from '@storybook/preview/globals'; import { getBuilderOptions, - getRendererName, stringifyProcessEnvs, - handlebars, - interpolate, normalizeStories, - readTemplate, - loadPreviewOrConfigFile, isPreservingSymlinks, } from '@storybook/core-common'; -import { toRequireContextString, toImportFn } from '@storybook/core-webpack'; +import type { BuilderOptions } from '@storybook/core-webpack'; +import { getVirtualModuleMapping } from '@storybook/core-webpack'; import { dedent } from 'ts-dedent'; -import type { BuilderOptions, TypescriptOptions } from '../types'; +import type { TypescriptOptions } from '../types'; import { createBabelLoader, createSWCLoader } from './loaders'; const getAbsolutePath = (input: I): I => @@ -114,92 +109,6 @@ export default async ( const builderOptions = await getBuilderOptions(options); - const previewAnnotations = [ - ...(await presets.apply('previewAnnotations', [], options)).map( - (entry) => { - // If entry is an object, use the absolute import specifier. - // This is to maintain back-compat with community addons that bundle other addons - // and package managers that "hide" sub dependencies (e.g. pnpm / yarn pnp) - // The vite builder uses the bare import specifier. - if (typeof entry === 'object') { - return entry.absolute; - } - - // TODO: Remove as soon as we drop support for disabled StoryStoreV7 - if (isAbsolute(entry)) { - return entry; - } - - return slash(entry); - } - ), - loadPreviewOrConfigFile(options), - ].filter(Boolean); - - const virtualModuleMapping: Record = {}; - if (features?.storyStoreV7) { - const storiesFilename = 'storybook-stories.js'; - const storiesPath = resolve(join(workingDir, storiesFilename)); - - const needPipelinedImport = !!builderOptions.lazyCompilation && !isProd; - virtualModuleMapping[storiesPath] = toImportFn(stories, { needPipelinedImport }); - const configEntryPath = resolve(join(workingDir, 'storybook-config-entry.js')); - virtualModuleMapping[configEntryPath] = handlebars( - await readTemplate( - require.resolve( - '@storybook/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars' - ) - ), - { - storiesFilename, - previewAnnotations, - } - // We need to double escape `\` for webpack. We may have some in windows paths - ).replace(/\\/g, '\\\\'); - entries.push(configEntryPath); - } else { - const rendererName = await getRendererName(options); - - const rendererInitEntry = resolve(join(workingDir, 'storybook-init-renderer-entry.js')); - virtualModuleMapping[rendererInitEntry] = `import '${slash(rendererName)}';`; - entries.push(rendererInitEntry); - - const entryTemplate = await readTemplate( - join(__dirname, '..', '..', 'templates', 'virtualModuleEntry.template.js') - ); - - previewAnnotations.forEach((previewAnnotationFilename: string | undefined) => { - if (!previewAnnotationFilename) return; - - // Ensure that relative paths end up mapped to a filename in the cwd, so a later import - // of the `previewAnnotationFilename` in the template works. - const entryFilename = previewAnnotationFilename.startsWith('.') - ? `${previewAnnotationFilename.replace(/(\w)(\/|\\)/g, '$1-')}-generated-config-entry.js` - : `${previewAnnotationFilename}-generated-config-entry.js`; - // NOTE: although this file is also from the `dist/cjs` directory, it is actually a ESM - // file, see https://github.com/storybookjs/storybook/pull/16727#issuecomment-986485173 - virtualModuleMapping[entryFilename] = interpolate(entryTemplate, { - previewAnnotationFilename, - }); - entries.push(entryFilename); - }); - if (stories.length > 0) { - const storyTemplate = await readTemplate( - join(__dirname, '..', '..', 'templates', 'virtualModuleStory.template.js') - ); - // NOTE: this file has a `.cjs` extension as it is a CJS file (from `dist/cjs`) and runs - // in the user's webpack mode, which may be strict about the use of require/import. - // See https://github.com/storybookjs/storybook/issues/14877 - const storiesFilename = resolve(join(workingDir, `generated-stories-entry.cjs`)); - virtualModuleMapping[storiesFilename] = interpolate(storyTemplate, { - rendererName, - }) - // Make sure we also replace quotes for this one - .replace("'{{stories}}'", stories.map(toRequireContextString).join(',')); - entries.push(storiesFilename); - } - } - const shouldCheckTs = typescriptOptions.check && !typescriptOptions.skipBabel && !typescriptOptions.skipCompiler; const tsCheckOptions = typescriptOptions.checkOptions || {}; @@ -226,6 +135,12 @@ export default async ( externals['@storybook/blocks'] = '__STORYBOOK_BLOCKS_EMPTY_MODULE__'; } + const virtualModuleMapping = await getVirtualModuleMapping(options); + + Object.keys(virtualModuleMapping).forEach((key) => { + entries.push(key); + }); + return { name: 'preview', mode: isProd ? 'production' : 'development', diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index fab731daf27..ba32244e8c5 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -36,6 +36,11 @@ "types": "./dist/preset.d.ts", "require": "./dist/preset.js" }, + "./font/webpack/loader/storybook-nextjs-font-loader": { + "types": "./dist/font/webpack/loader/storybook-nextjs-font-loader.d.ts", + "require": "./dist/font/webpack/loader/storybook-nextjs-font-loader.js", + "import": "./dist/font/webpack/loader/storybook-nextjs-font-loader.mjs" + }, "./dist/preview.mjs": "./dist/preview.mjs", "./next-image-loader-stub.js": { "types": "./dist/next-image-loader-stub.d.ts", @@ -83,10 +88,12 @@ "@babel/preset-react": "^7.22.15", "@babel/preset-typescript": "^7.23.2", "@babel/runtime": "^7.23.2", + "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11", "@storybook/addon-actions": "workspace:*", "@storybook/builder-webpack5": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", + "@storybook/core-webpack": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/preset-react-webpack": "workspace:*", "@storybook/preview-api": "workspace:*", @@ -117,7 +124,7 @@ "@types/babel__plugin-transform-runtime": "^7", "@types/babel__preset-env": "^7", "@types/loader-utils": "^2.0.5", - "next": "^14.0.0", + "next": "^14.0.2", "typescript": "^4.9.3", "webpack": "^5.65.0" }, @@ -156,7 +163,8 @@ "./src/images/next-future-image.tsx", "./src/images/next-legacy-image.tsx", "./src/images/next-image.tsx", - "./src/font/webpack/loader/storybook-nextjs-font-loader.ts" + "./src/font/webpack/loader/storybook-nextjs-font-loader.ts", + "./src/swc/next-swc-loader-patch.ts" ], "externals": [ "sb-original/next/image", diff --git a/code/frameworks/nextjs/src/css/webpack.ts b/code/frameworks/nextjs/src/css/webpack.ts index 8f5ed1bfcae..75718527e7d 100644 --- a/code/frameworks/nextjs/src/css/webpack.ts +++ b/code/frameworks/nextjs/src/css/webpack.ts @@ -34,6 +34,9 @@ export const configureCss = (baseConfig: WebpackConfig, nextConfig: NextConfig): }, require.resolve('postcss-loader'), ], + // We transform the "target.css" files from next.js into Javascript + // for Next.js to support fonts, so it should be ignored by the css-loader. + exclude: /next\/.*\/target.css$/, }; } }); diff --git a/code/frameworks/nextjs/src/font/webpack/configureNextFont.ts b/code/frameworks/nextjs/src/font/webpack/configureNextFont.ts index 47723fed403..b1e3851611d 100644 --- a/code/frameworks/nextjs/src/font/webpack/configureNextFont.ts +++ b/code/frameworks/nextjs/src/font/webpack/configureNextFont.ts @@ -1,14 +1,22 @@ import type { Configuration } from 'webpack'; -export function configureNextFont(baseConfig: Configuration) { - baseConfig.plugins = [...(baseConfig.plugins || [])]; - baseConfig.resolveLoader = { - ...baseConfig.resolveLoader, - alias: { - ...baseConfig.resolveLoader?.alias, - 'storybook-nextjs-font-loader': require.resolve( - './font/webpack/loader/storybook-nextjs-font-loader' - ), - }, - }; +export function configureNextFont(baseConfig: Configuration, isSWC?: boolean) { + const fontLoaderPath = require.resolve( + '@storybook/nextjs/font/webpack/loader/storybook-nextjs-font-loader' + ); + + if (isSWC) { + baseConfig.module?.rules?.push({ + test: /next\/.*\/target.css$/, + loader: fontLoaderPath, + }); + } else { + baseConfig.resolveLoader = { + ...baseConfig.resolveLoader, + alias: { + ...baseConfig.resolveLoader?.alias, + 'storybook-nextjs-font-loader': fontLoaderPath, + }, + }; + } } diff --git a/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts b/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts index 006c7f126f5..d7d26ae55a3 100644 --- a/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts +++ b/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts @@ -1,6 +1,7 @@ // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-expect-error import loaderUtils from 'next/dist/compiled/loader-utils3'; +import { getProjectRoot } from '@storybook/core-common'; import path from 'path'; import type { LoaderOptions } from '../types'; @@ -11,7 +12,9 @@ export async function getFontFaceDeclarations(options: LoaderOptions, rootContex const localFontSrc = options.props.src as LocalFontSrc; // Parent folder relative to the root context - const parentFolder = path.dirname(options.filename).replace(rootContext, ''); + const parentFolder = path + .dirname(path.join(getProjectRoot(), options.filename)) + .replace(rootContext, ''); const { validateData } = require('../utils/local-font-utils'); const { weight, style, variable } = validateData('', options.props); diff --git a/code/frameworks/nextjs/src/font/webpack/loader/storybook-nextjs-font-loader.ts b/code/frameworks/nextjs/src/font/webpack/loader/storybook-nextjs-font-loader.ts index 85076ecd720..8b7c08894f7 100644 --- a/code/frameworks/nextjs/src/font/webpack/loader/storybook-nextjs-font-loader.ts +++ b/code/frameworks/nextjs/src/font/webpack/loader/storybook-nextjs-font-loader.ts @@ -14,18 +14,34 @@ type FontFaceDeclaration = { }; export default async function storybookNextjsFontLoader(this: any) { - const options = this.getOptions() as LoaderOptions; + const loaderOptions = this.getOptions() as LoaderOptions; + let options; + + if (Object.keys(loaderOptions).length > 0) { + // handles Babel mode + options = loaderOptions; + } else { + // handles SWC mode + const importQuery = JSON.parse(this.resourceQuery.slice(1)); + + options = { + filename: importQuery.path, + fontFamily: importQuery.import, + props: importQuery.arguments[0], + source: this.context.replace(this.rootContext, ''), + }; + } // get execution context const rootCtx = this.rootContext; let fontFaceDeclaration: FontFaceDeclaration | undefined; - if (options.source === 'next/font/google' || options.source === '@next/font/google') { + if (options.source.endsWith('next/font/google') || options.source.endsWith('@next/font/google')) { fontFaceDeclaration = await getGoogleFontFaceDeclarations(options); } - if (options.source === 'next/font/local' || options.source === '@next/font/local') { + if (options.source.endsWith('next/font/local') || options.source.endsWith('@next/font/local')) { fontFaceDeclaration = await getLocalFontFaceDeclarations(options, rootCtx); } diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index 7b0e150f735..e4fdd7936fb 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -17,6 +17,7 @@ import { configureNextFont } from './font/webpack/configureNextFont'; import nextBabelPreset from './babel/preset'; import { configureNodePolyfills } from './nodePolyfills/webpack'; import { configureAliasing } from './dependency-map'; +import { configureSWCLoader } from './swc/loader'; export const addons: PresetProperty<'addons', StorybookConfig> = [ dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))), @@ -61,7 +62,9 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti name: dirname( require.resolve(join('@storybook/builder-webpack5', 'package.json')) ) as '@storybook/builder-webpack5', - options: typeof framework === 'string' ? {} : framework.options.builder || {}, + options: { + ...(typeof framework === 'string' ? {} : framework.options.builder || {}), + }, }, renderer: dirname(require.resolve(join('@storybook/react', 'package.json'))), }; @@ -135,7 +138,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, const frameworkOptions = await options.presets.apply<{ options: FrameworkOptions }>( 'frameworkOptions' ); - const { options: { nextConfigPath } = {} } = frameworkOptions; + const { options: { nextConfigPath, builder } = {} } = frameworkOptions; const nextConfig = await configureConfig({ baseConfig, nextConfigPath, @@ -143,7 +146,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, }); configureAliasing(baseConfig); - configureNextFont(baseConfig); + configureNextFont(baseConfig, builder?.useSWC); configureNextImport(baseConfig); configureRuntimeNextjsVersionResolution(baseConfig); configureImports({ baseConfig, configDir: options.configDir }); @@ -152,5 +155,10 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, configureStyledJsx(baseConfig); configureNodePolyfills(baseConfig); + // TODO: In Storybook 8.0, we have to check whether the babel-compiler addon is used. Otherwise, swc should be used. + if (builder?.useSWC) { + await configureSWCLoader(baseConfig, options, nextConfig); + } + return baseConfig; }; diff --git a/code/frameworks/nextjs/src/swc/loader.ts b/code/frameworks/nextjs/src/swc/loader.ts new file mode 100644 index 00000000000..3c235c343f7 --- /dev/null +++ b/code/frameworks/nextjs/src/swc/loader.ts @@ -0,0 +1,77 @@ +import { getProjectRoot } from '@storybook/core-common'; +import { getVirtualModuleMapping } from '@storybook/core-webpack'; +import type { Options } from '@storybook/types'; +import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; +import type { NextConfig } from 'next'; +import path from 'path'; +import type { RuleSetRule } from 'webpack'; +import semver from 'semver'; +import { dedent } from 'ts-dedent'; +import { logger } from '@storybook/node-logger'; +import { getNextjsVersion } from '../utils'; + +export const configureSWCLoader = async ( + baseConfig: any, + options: Options, + nextConfig: NextConfig +) => { + const isDevelopment = options.configType !== 'PRODUCTION'; + const version = getNextjsVersion(); + + if (semver.lt(version, '14.0.0')) { + logger.warn( + dedent`You have activated the SWC mode for Next.js, but you are not using Next.js 14.0.0 or higher. + SWC is only supported in Next.js 14.0.0 and higher. + Skipping SWC and using Babel instead. + ` + ); + return; + } + + const dir = getProjectRoot(); + + baseConfig.plugins = [ + ...baseConfig.plugins, + new ReactRefreshWebpackPlugin({ + overlay: { + sockIntegration: 'whm', + }, + }), + ]; + + const virtualModules = await getVirtualModuleMapping(options); + + baseConfig.module.rules = [ + // TODO: Remove filtering in Storybook 8.0 + ...baseConfig.module.rules.filter( + (r: RuleSetRule) => + !(typeof r.use === 'object' && 'loader' in r.use && r.use.loader?.includes('swc-loader')) + ), + { + test: /\.(m?(j|t)sx?)$/, + include: [getProjectRoot()], + exclude: [/(node_modules)/, ...Object.keys(virtualModules)], + use: { + // we use our own patch because we need to remove tracing from the original code + // which is not possible otherwise + loader: require.resolve('./swc/next-swc-loader-patch.js'), + options: { + isServer: false, + rootDir: dir, + pagesDir: `${dir}/pages`, + appDir: `${dir}/apps`, + hasReactRefresh: isDevelopment, + hasServerComponents: true, + nextConfig, + supportedBrowsers: require('next/dist/build/utils').getSupportedBrowsers( + dir, + isDevelopment + ), + swcCacheDir: path.join(dir, nextConfig?.distDir ?? '.next', 'cache', 'swc'), + isServerLayer: false, + bundleTarget: 'default', + }, + }, + }, + ]; +}; diff --git a/code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts b/code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts new file mode 100644 index 00000000000..9fd155951fc --- /dev/null +++ b/code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts @@ -0,0 +1,184 @@ +// THIS IS A PATCH over the original code from Next 14.0.0 +// we use our own patch because we need to remove tracing from the original code +// which is not possible otherwise + +/* eslint-disable no-restricted-syntax */ +/* +Copyright (c) 2017 The swc Project Developers +Permission is hereby granted, free of charge, to any +person obtaining a copy of this software and associated +documentation files (the "Software"), to deal in the +Software without restriction, including without +limitation the rights to use, copy, modify, merge, +publish, distribute, sublicense, and/or sell copies of +the Software, and to permit persons to whom the Software +is furnished to do so, subject to the following +conditions: +The above copyright notice and this permission notice +shall be included in all copies or substantial portions +of the Software. +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF +ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED +TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A +PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT +SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY +CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR +IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER +DEALINGS IN THE SOFTWARE. +*/ + +import type { NextConfig } from 'next'; +import { isWasm, transform } from 'next/dist/build/swc'; +import { getLoaderSWCOptions } from 'next/dist/build/swc/options'; +import path, { isAbsolute } from 'path'; + +export interface SWCLoaderOptions { + rootDir: string; + isServer: boolean; + pagesDir?: string; + appDir?: string; + hasReactRefresh: boolean; + optimizeServerReact?: boolean; + nextConfig: NextConfig; + jsConfig: any; + supportedBrowsers: string[] | undefined; + swcCacheDir: string; + serverComponents?: boolean; + isReactServerLayer?: boolean; +} + +const mockCurrentTraceSpan = { + traceChild: (name: string) => mockCurrentTraceSpan, + traceAsyncFn: async (fn: any) => fn(), +}; + +async function loaderTransform(this: any, parentTrace: any, source?: string, inputSourceMap?: any) { + // Make the loader async + const filename = this.resourcePath; + + const loaderOptions: SWCLoaderOptions = this.getOptions() || {}; + + const { + isServer, + rootDir, + pagesDir, + appDir, + hasReactRefresh, + nextConfig, + jsConfig, + supportedBrowsers, + swcCacheDir, + serverComponents, + isReactServerLayer, + } = loaderOptions; + const isPageFile = filename.startsWith(pagesDir); + const relativeFilePathFromRoot = path.relative(rootDir, filename); + + const swcOptions = getLoaderSWCOptions({ + pagesDir, + appDir, + filename, + isServer, + isPageFile, + development: this.mode === 'development', + hasReactRefresh, + modularizeImports: nextConfig?.modularizeImports, + optimizePackageImports: nextConfig?.experimental?.optimizePackageImports, + swcPlugins: nextConfig?.experimental?.swcPlugins, + compilerOptions: nextConfig?.compiler, + optimizeServerReact: nextConfig?.experimental?.optimizeServerReact, + jsConfig, + supportedBrowsers, + swcCacheDir, + relativeFilePathFromRoot, + serverComponents, + isReactServerLayer, + }); + + const programmaticOptions = { + ...swcOptions, + filename, + inputSourceMap: inputSourceMap ? JSON.stringify(inputSourceMap) : undefined, + + // Set the default sourcemap behavior based on Webpack's mapping flag, + sourceMaps: this.sourceMap, + inlineSourcesContent: this.sourceMap, + + // Ensure that Webpack will get a full absolute path in the sourcemap + // so that it can properly map the module back to its internal cached + // modules. + sourceFileName: filename, + }; + + if (!programmaticOptions.inputSourceMap) { + delete programmaticOptions.inputSourceMap; + } + + // auto detect development mode + if ( + this.mode && + programmaticOptions.jsc && + programmaticOptions.jsc.transform && + programmaticOptions.jsc.transform.react && + !Object.prototype.hasOwnProperty.call(programmaticOptions.jsc.transform.react, 'development') + ) { + programmaticOptions.jsc.transform.react.development = this.mode === 'development'; + } + + const swcSpan = parentTrace.traceChild('next-swc-transform'); + return swcSpan.traceAsyncFn(() => + transform(source as any, programmaticOptions).then((output) => { + if (output.eliminatedPackages && this.eliminatedPackages) { + for (const pkg of JSON.parse(output.eliminatedPackages)) { + this.eliminatedPackages.add(pkg); + } + } + return [output.code, output.map ? JSON.parse(output.map) : undefined]; + }) + ); +} + +const EXCLUDED_PATHS = /[\\/](cache[\\/][^\\/]+\.zip[\\/]node_modules|__virtual__)[\\/]/g; + +export function pitch(this: any) { + const callback = this.async(); + (async () => { + if ( + // TODO: investigate swc file reading in PnP mode? + !process.versions.pnp && + !EXCLUDED_PATHS.test(this.resourcePath) && + this.loaders.length - 1 === this.loaderIndex && + isAbsolute(this.resourcePath) && + !(await isWasm()) + ) { + const loaderSpan = mockCurrentTraceSpan.traceChild('next-swc-loader'); + this.addDependency(this.resourcePath); + return loaderSpan.traceAsyncFn(() => loaderTransform.call(this, loaderSpan)); + } + + return null; + })().then((r) => { + if (r) return callback(null, ...r); + callback(); + return null; + }, callback); +} + +export default function swcLoader(this: any, inputSource: string, inputSourceMap: any) { + const loaderSpan = mockCurrentTraceSpan.traceChild('next-swc-loader'); + const callback = this.async(); + loaderSpan + .traceAsyncFn(() => loaderTransform.call(this, loaderSpan, inputSource, inputSourceMap)) + .then( + ([transformedSource, outputSourceMap]: any) => { + callback(null, transformedSource, outputSourceMap || inputSourceMap); + }, + (err: Error) => { + callback(err); + } + ); +} + +// accept Buffers instead of strings +export const raw = true; diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index 0b9a988df5d..fd69a427abb 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -51,6 +51,7 @@ "ts-dedent": "^2.0.0" }, "devDependencies": { + "slash": "^5.1.0", "typescript": "~4.9.3", "webpack": "5" }, diff --git a/code/lib/core-webpack/src/index.ts b/code/lib/core-webpack/src/index.ts index 37018736753..562860cbe1a 100644 --- a/code/lib/core-webpack/src/index.ts +++ b/code/lib/core-webpack/src/index.ts @@ -4,3 +4,4 @@ export * from './check-webpack-version'; export * from './merge-webpack-config'; export * from './to-importFn'; export * from './to-require-context'; +export * from './virtual-module-mapping'; diff --git a/code/lib/core-webpack/src/types.ts b/code/lib/core-webpack/src/types.ts index 012b95f41cf..1028c08a0a4 100644 --- a/code/lib/core-webpack/src/types.ts +++ b/code/lib/core-webpack/src/types.ts @@ -22,6 +22,12 @@ export interface WebpackConfiguration { devtool?: false | string; } +export type BuilderOptions = { + fsCache?: boolean; + useSWC?: boolean; + lazyCompilation?: boolean; +}; + export type StorybookConfig = StorybookConfigBase & { /** * Modify or return a custom Webpack config after the Storybook's default configuration diff --git a/code/lib/core-webpack/src/virtual-module-mapping.ts b/code/lib/core-webpack/src/virtual-module-mapping.ts new file mode 100644 index 00000000000..ca3b30cd0e6 --- /dev/null +++ b/code/lib/core-webpack/src/virtual-module-mapping.ts @@ -0,0 +1,111 @@ +import type { Options, PreviewAnnotation } from '@storybook/types'; +import { isAbsolute, join, resolve } from 'path'; +import { + getBuilderOptions, + getRendererName, + handlebars, + interpolate, + loadPreviewOrConfigFile, + normalizeStories, + readTemplate, +} from '@storybook/core-common'; +import slash from 'slash'; +import type { BuilderOptions } from './types'; +import { toImportFn } from './to-importFn'; +import { toRequireContextString } from './to-require-context'; + +export const getVirtualModuleMapping = async (options: Options) => { + const virtualModuleMapping: Record = {}; + const builderOptions = await getBuilderOptions(options); + const workingDir = process.cwd(); + const isProd = options.configType === 'PRODUCTION'; + const nonNormalizedStories = await options.presets.apply('stories', []); + + const stories = normalizeStories(nonNormalizedStories, { + configDir: options.configDir, + workingDir, + }); + + const previewAnnotations = [ + ...(await options.presets.apply('previewAnnotations', [], options)).map( + (entry) => { + // If entry is an object, use the absolute import specifier. + // This is to maintain back-compat with community addons that bundle other addons + // and package managers that "hide" sub dependencies (e.g. pnpm / yarn pnp) + // The vite builder uses the bare import specifier. + if (typeof entry === 'object') { + return entry.absolute; + } + + // TODO: Remove as soon as we drop support for disabled StoryStoreV7 + if (isAbsolute(entry)) { + return entry; + } + + return slash(entry); + } + ), + loadPreviewOrConfigFile(options), + ].filter(Boolean); + + if (options.features?.storyStoreV7) { + const storiesFilename = 'storybook-stories.js'; + const storiesPath = resolve(join(workingDir, storiesFilename)); + + const needPipelinedImport = !!builderOptions.lazyCompilation && !isProd; + virtualModuleMapping[storiesPath] = toImportFn(stories, { needPipelinedImport }); + const configEntryPath = resolve(join(workingDir, 'storybook-config-entry.js')); + virtualModuleMapping[configEntryPath] = handlebars( + await readTemplate( + require.resolve( + '@storybook/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars' + ) + ), + { + storiesFilename, + previewAnnotations, + } + // We need to double escape `\` for webpack. We may have some in windows paths + ).replace(/\\/g, '\\\\'); + } else { + const rendererName = await getRendererName(options); + + const rendererInitEntry = resolve(join(workingDir, 'storybook-init-renderer-entry.js')); + virtualModuleMapping[rendererInitEntry] = `import '${slash(rendererName)}';`; + + const entryTemplate = await readTemplate( + join(__dirname, '..', '..', 'templates', 'virtualModuleEntry.template.js') + ); + + previewAnnotations.forEach((previewAnnotationFilename: string | undefined) => { + if (!previewAnnotationFilename) return; + + // Ensure that relative paths end up mapped to a filename in the cwd, so a later import + // of the `previewAnnotationFilename` in the template works. + const entryFilename = previewAnnotationFilename.startsWith('.') + ? `${previewAnnotationFilename.replace(/(\w)(\/|\\)/g, '$1-')}-generated-config-entry.js` + : `${previewAnnotationFilename}-generated-config-entry.js`; + // NOTE: although this file is also from the `dist/cjs` directory, it is actually a ESM + // file, see https://github.com/storybookjs/storybook/pull/16727#issuecomment-986485173 + virtualModuleMapping[entryFilename] = interpolate(entryTemplate, { + previewAnnotationFilename, + }); + }); + if (stories.length > 0) { + const storyTemplate = await readTemplate( + join(__dirname, '..', '..', 'templates', 'virtualModuleStory.template.js') + ); + // NOTE: this file has a `.cjs` extension as it is a CJS file (from `dist/cjs`) and runs + // in the user's webpack mode, which may be strict about the use of require/import. + // See https://github.com/storybookjs/storybook/issues/14877 + const storiesFilename = resolve(join(workingDir, `generated-stories-entry.cjs`)); + virtualModuleMapping[storiesFilename] = interpolate(storyTemplate, { + rendererName, + }) + // Make sure we also replace quotes for this one + .replace("'{{stories}}'", stories.map(toRequireContextString).join(',')); + } + } + + return virtualModuleMapping; +}; diff --git a/code/yarn.lock b/code/yarn.lock index 3999f341dbe..26430758888 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -4031,72 +4031,72 @@ __metadata: languageName: node linkType: hard -"@next/env@npm:14.0.0": - version: 14.0.0 - resolution: "@next/env@npm:14.0.0" - checksum: c43e81dbd162a29a4b380342e416209d69d731e8ced7688d09668ec8196f543e358ed65adad81a26e943c63a293d7a018552f8389b6b1ac95cd0f63f4ef257c0 +"@next/env@npm:14.0.2": + version: 14.0.2 + resolution: "@next/env@npm:14.0.2" + checksum: 9fad703ce13b7b7fecf898d3c239f8976f2ec7f3c7c461c06da70898a0221775c48e1a2e2c76740216c4093c2db9bd7adaacd196586cd4283e09eb89de4c1db6 languageName: node linkType: hard -"@next/swc-darwin-arm64@npm:14.0.0": - version: 14.0.0 - resolution: "@next/swc-darwin-arm64@npm:14.0.0" +"@next/swc-darwin-arm64@npm:14.0.2": + version: 14.0.2 + resolution: "@next/swc-darwin-arm64@npm:14.0.2" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard -"@next/swc-darwin-x64@npm:14.0.0": - version: 14.0.0 - resolution: "@next/swc-darwin-x64@npm:14.0.0" +"@next/swc-darwin-x64@npm:14.0.2": + version: 14.0.2 + resolution: "@next/swc-darwin-x64@npm:14.0.2" conditions: os=darwin & cpu=x64 languageName: node linkType: hard -"@next/swc-linux-arm64-gnu@npm:14.0.0": - version: 14.0.0 - resolution: "@next/swc-linux-arm64-gnu@npm:14.0.0" +"@next/swc-linux-arm64-gnu@npm:14.0.2": + version: 14.0.2 + resolution: "@next/swc-linux-arm64-gnu@npm:14.0.2" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard -"@next/swc-linux-arm64-musl@npm:14.0.0": - version: 14.0.0 - resolution: "@next/swc-linux-arm64-musl@npm:14.0.0" +"@next/swc-linux-arm64-musl@npm:14.0.2": + version: 14.0.2 + resolution: "@next/swc-linux-arm64-musl@npm:14.0.2" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard -"@next/swc-linux-x64-gnu@npm:14.0.0": - version: 14.0.0 - resolution: "@next/swc-linux-x64-gnu@npm:14.0.0" +"@next/swc-linux-x64-gnu@npm:14.0.2": + version: 14.0.2 + resolution: "@next/swc-linux-x64-gnu@npm:14.0.2" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard -"@next/swc-linux-x64-musl@npm:14.0.0": - version: 14.0.0 - resolution: "@next/swc-linux-x64-musl@npm:14.0.0" +"@next/swc-linux-x64-musl@npm:14.0.2": + version: 14.0.2 + resolution: "@next/swc-linux-x64-musl@npm:14.0.2" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard -"@next/swc-win32-arm64-msvc@npm:14.0.0": - version: 14.0.0 - resolution: "@next/swc-win32-arm64-msvc@npm:14.0.0" +"@next/swc-win32-arm64-msvc@npm:14.0.2": + version: 14.0.2 + resolution: "@next/swc-win32-arm64-msvc@npm:14.0.2" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard -"@next/swc-win32-ia32-msvc@npm:14.0.0": - version: 14.0.0 - resolution: "@next/swc-win32-ia32-msvc@npm:14.0.0" +"@next/swc-win32-ia32-msvc@npm:14.0.2": + version: 14.0.2 + resolution: "@next/swc-win32-ia32-msvc@npm:14.0.2" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard -"@next/swc-win32-x64-msvc@npm:14.0.0": - version: 14.0.0 - resolution: "@next/swc-win32-x64-msvc@npm:14.0.0" +"@next/swc-win32-x64-msvc@npm:14.0.2": + version: 14.0.2 + resolution: "@next/swc-win32-x64-msvc@npm:14.0.2" conditions: os=win32 & cpu=x64 languageName: node linkType: hard @@ -6490,6 +6490,7 @@ __metadata: "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" "@types/node": "npm:^18.0.0" + slash: "npm:^5.1.0" ts-dedent: "npm:^2.0.0" typescript: "npm:~4.9.3" webpack: "npm:5" @@ -6853,10 +6854,12 @@ __metadata: "@babel/preset-typescript": "npm:^7.23.2" "@babel/runtime": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" + "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.11" "@storybook/addon-actions": "workspace:*" "@storybook/builder-webpack5": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" + "@storybook/core-webpack": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/preset-react-webpack": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -6871,7 +6874,7 @@ __metadata: fs-extra: "npm:^11.1.0" image-size: "npm:^1.0.0" loader-utils: "npm:^3.2.1" - next: "npm:^14.0.0" + next: "npm:^14.0.2" node-polyfill-webpack-plugin: "npm:^2.0.1" pnp-webpack-plugin: "npm:^1.7.0" postcss: "npm:^8.4.21" @@ -22777,20 +22780,20 @@ __metadata: languageName: node linkType: hard -"next@npm:^14.0.0": - version: 14.0.0 - resolution: "next@npm:14.0.0" +"next@npm:^14.0.2": + version: 14.0.2 + resolution: "next@npm:14.0.2" dependencies: - "@next/env": "npm:14.0.0" - "@next/swc-darwin-arm64": "npm:14.0.0" - "@next/swc-darwin-x64": "npm:14.0.0" - "@next/swc-linux-arm64-gnu": "npm:14.0.0" - "@next/swc-linux-arm64-musl": "npm:14.0.0" - "@next/swc-linux-x64-gnu": "npm:14.0.0" - "@next/swc-linux-x64-musl": "npm:14.0.0" - "@next/swc-win32-arm64-msvc": "npm:14.0.0" - "@next/swc-win32-ia32-msvc": "npm:14.0.0" - "@next/swc-win32-x64-msvc": "npm:14.0.0" + "@next/env": "npm:14.0.2" + "@next/swc-darwin-arm64": "npm:14.0.2" + "@next/swc-darwin-x64": "npm:14.0.2" + "@next/swc-linux-arm64-gnu": "npm:14.0.2" + "@next/swc-linux-arm64-musl": "npm:14.0.2" + "@next/swc-linux-x64-gnu": "npm:14.0.2" + "@next/swc-linux-x64-musl": "npm:14.0.2" + "@next/swc-win32-arm64-msvc": "npm:14.0.2" + "@next/swc-win32-ia32-msvc": "npm:14.0.2" + "@next/swc-win32-x64-msvc": "npm:14.0.2" "@swc/helpers": "npm:0.5.2" busboy: "npm:1.6.0" caniuse-lite: "npm:^1.0.30001406" @@ -22828,7 +22831,7 @@ __metadata: optional: true bin: next: dist/bin/next - checksum: cfb18a72d6e1d875efb1bb3806f9a06551f482c5cb87231e77e179a71d26f3d43700290988ad27e739302bfa7ff8ac8081aafd5456c39a2819fdd315617e5acf + checksum: 65ae7a09f1643bc3deafdbdae9ce0c02326346c4a60a7c739f8f6b154b2226b8fcc5efb984cdcb4ef100116910d4c1013089135800d30c7a50cf98c9d22e5a26 languageName: node linkType: hard @@ -27519,7 +27522,7 @@ __metadata: languageName: node linkType: hard -"slash@npm:^5.0.0": +"slash@npm:^5.0.0, slash@npm:^5.1.0": version: 5.1.0 resolution: "slash@npm:5.1.0" checksum: eb48b815caf0bdc390d0519d41b9e0556a14380f6799c72ba35caf03544d501d18befdeeef074bc9c052acf69654bc9e0d79d7f1de0866284137a40805299eb3 From eaa373f5894168ba5603c4b69051f9e7b8af5fed Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 15 Nov 2023 16:12:10 +0100 Subject: [PATCH 095/170] Add documentation to Next.js doc --- code/frameworks/nextjs/README.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/README.md b/code/frameworks/nextjs/README.md index 03cc1cbebc6..2a834fb7ee4 100644 --- a/code/frameworks/nextjs/README.md +++ b/code/frameworks/nextjs/README.md @@ -122,7 +122,12 @@ export default { framework: { // name: '@storybook/react-webpack5', // Remove this name: '@storybook/nextjs', // Add this - options: {}, + options: { + builder: { + // Set useSWC to true if you want to try out the experimental SWC compiler in Next.js >= 14.0.0 + useSWC: true, + }, + }, }, }; ``` From c546fd516723afecbc9d97b4f318bf0497056e1f Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 16 Nov 2023 09:49:55 +0100 Subject: [PATCH 096/170] Retrigger pipeline From 5021bf4bbbebcfebd5363de6553788d77d06f48f Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 16 Nov 2023 11:15:36 +0100 Subject: [PATCH 097/170] Move virtualModule files into @storybook/core-webpack --- code/lib/core-webpack/src/virtual-module-mapping.ts | 4 ++-- .../core-webpack}/templates/virtualModuleEntry.template.js | 0 .../core-webpack}/templates/virtualModuleStory.template.js | 0 3 files changed, 2 insertions(+), 2 deletions(-) rename code/{builders/builder-webpack5 => lib/core-webpack}/templates/virtualModuleEntry.template.js (100%) rename code/{builders/builder-webpack5 => lib/core-webpack}/templates/virtualModuleStory.template.js (100%) diff --git a/code/lib/core-webpack/src/virtual-module-mapping.ts b/code/lib/core-webpack/src/virtual-module-mapping.ts index ca3b30cd0e6..09941ba859a 100644 --- a/code/lib/core-webpack/src/virtual-module-mapping.ts +++ b/code/lib/core-webpack/src/virtual-module-mapping.ts @@ -74,7 +74,7 @@ export const getVirtualModuleMapping = async (options: Options) => { virtualModuleMapping[rendererInitEntry] = `import '${slash(rendererName)}';`; const entryTemplate = await readTemplate( - join(__dirname, '..', '..', 'templates', 'virtualModuleEntry.template.js') + join(__dirname, '..', 'templates', 'virtualModuleEntry.template.js') ); previewAnnotations.forEach((previewAnnotationFilename: string | undefined) => { @@ -93,7 +93,7 @@ export const getVirtualModuleMapping = async (options: Options) => { }); if (stories.length > 0) { const storyTemplate = await readTemplate( - join(__dirname, '..', '..', 'templates', 'virtualModuleStory.template.js') + join(__dirname, '..', 'templates', 'virtualModuleStory.template.js') ); // NOTE: this file has a `.cjs` extension as it is a CJS file (from `dist/cjs`) and runs // in the user's webpack mode, which may be strict about the use of require/import. diff --git a/code/builders/builder-webpack5/templates/virtualModuleEntry.template.js b/code/lib/core-webpack/templates/virtualModuleEntry.template.js similarity index 100% rename from code/builders/builder-webpack5/templates/virtualModuleEntry.template.js rename to code/lib/core-webpack/templates/virtualModuleEntry.template.js diff --git a/code/builders/builder-webpack5/templates/virtualModuleStory.template.js b/code/lib/core-webpack/templates/virtualModuleStory.template.js similarity index 100% rename from code/builders/builder-webpack5/templates/virtualModuleStory.template.js rename to code/lib/core-webpack/templates/virtualModuleStory.template.js From 115cb7b55bcf10af2322b6f8587197edb52c6d96 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 16 Nov 2023 09:49:55 +0100 Subject: [PATCH 098/170] Retrigger pipeline From 19b6bdc16ff1351346f710af73fedfb5260a7739 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 16 Nov 2023 09:49:55 +0100 Subject: [PATCH 099/170] Retrigger pipeline From a6a32510a9263fb8ad9ebfd03619121e75f0f8b8 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 16 Nov 2023 14:29:55 +0100 Subject: [PATCH 100/170] Use SWC for new Webpack5-based projects (except for Angular and Next.js) --- code/lib/cli/src/generators/baseGenerator.ts | 65 +++++++++++++++----- 1 file changed, 48 insertions(+), 17 deletions(-) diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index a7bdb176466..ddbad146529 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -4,7 +4,7 @@ import { dedent } from 'ts-dedent'; import ora from 'ora'; import type { NpmOptions } from '../NpmOptions'; import type { SupportedRenderers, SupportedFrameworks, Builder } from '../project_types'; -import { SupportedLanguage, externalFrameworks, CoreBuilder } from '../project_types'; +import { SupportedLanguage, externalFrameworks, CoreBuilder, ProjectType } from '../project_types'; import { copyTemplateFiles } from '../helpers'; import { configureMain, configurePreview } from './configure'; import type { JsPackageManager } from '../js-package-manager'; @@ -171,6 +171,15 @@ const hasInteractiveStories = (rendererId: SupportedRenderers) => const hasFrameworkTemplates = (framework?: SupportedFrameworks) => ['angular', 'nextjs'].includes(framework); +function shouldUseSWCCompiler(builder: Builder, projectType: ProjectType) { + return ( + builder === CoreBuilder.Webpack5 && + projectType !== ProjectType.ANGULAR && + // TODO: Remove in Storybook 8.0 + projectType !== ProjectType.NEXTJS + ); +} + export async function baseGenerator( packageManager: JsPackageManager, npmOptions: NpmOptions, @@ -194,6 +203,23 @@ export async function baseGenerator( builder = await detectBuilder(packageManager, projectType); } + const useSWC = shouldUseSWCCompiler(builder, projectType); + + const { + packages: frameworkPackages, + type, + rendererId, + framework: frameworkInclude, + builder: builderInclude, + } = getFrameworkDetails( + renderer, + builder, + pnp, + language, + framework, + shouldApplyRequireWrapperOnPackageNames + ); + const { extraAddons: extraAddonPackages, extraPackages, @@ -201,7 +227,6 @@ export async function baseGenerator( addScripts, addMainFile, addComponents, - skipBabel, extraMain, extensions, storybookConfigFolder, @@ -211,20 +236,14 @@ export async function baseGenerator( ...options, }; - const { - packages: frameworkPackages, - type, - rendererId, - framework: frameworkInclude, - builder: builderInclude, - } = getFrameworkDetails( - renderer, - builder, - pnp, - language, - framework, - shouldApplyRequireWrapperOnPackageNames - ); + let { skipBabel } = { + ...defaultOptions, + ...options, + }; + + if (useSWC) { + skipBabel = true; + } const extraAddonsToInstall = typeof extraAddonPackages === 'function' @@ -401,7 +420,19 @@ export async function baseGenerator( : []; await configureMain({ - framework: { name: frameworkInclude, options: options.framework || {} }, + framework: { + name: frameworkInclude, + options: useSWC + ? { + ...(options.framework ?? {}), + builder: { + ...(options.framework?.builder ?? {}), + useSWC: true, + }, + } + : options.framework || {}, + }, + useSWC, prefixes, storybookConfigFolder, docs: { autodocs: 'tag' }, From 3b9fab04d131222031bd8c24cdf99c366eb4a23a Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 16 Nov 2023 15:31:37 +0100 Subject: [PATCH 101/170] Fix Init for Angular projects --- code/lib/cli/src/generators/ANGULAR/index.ts | 11 ++++------- code/lib/cli/src/generators/baseGenerator.ts | 3 ++- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/code/lib/cli/src/generators/ANGULAR/index.ts b/code/lib/cli/src/generators/ANGULAR/index.ts index 3c4d9a1f0ca..03214d29984 100644 --- a/code/lib/cli/src/generators/ANGULAR/index.ts +++ b/code/lib/cli/src/generators/ANGULAR/index.ts @@ -1,8 +1,7 @@ import { join } from 'path'; -import semver from 'semver'; import { baseGenerator } from '../baseGenerator'; import type { Generator } from '../types'; -import { CoreBuilder } from '../../project_types'; +import { CoreBuilder, ProjectType } from '../../project_types'; import { AngularJSON, compoDocPreviewPrefix, promptForCompoDocs } from './helpers'; import { getCliDir } from '../../dirs'; import { paddedLog, copyTemplate } from '../../helpers'; @@ -13,10 +12,6 @@ const generator: Generator<{ projectName: string }> = async ( options, commandOptions ) => { - const angularVersion = await packageManager.getPackageVersion('@angular/core'); - const isWebpack5 = angularVersion && semver.gte(angularVersion, '12.0.0'); - const updatedOptions = isWebpack5 ? { ...options, builder: CoreBuilder.Webpack5 } : options; - const angularJSON = new AngularJSON(); if ( @@ -62,7 +57,9 @@ const generator: Generator<{ projectName: string }> = async ( packageManager, npmOptions, { - ...updatedOptions, + ...options, + builder: CoreBuilder.Webpack5, + projectType: ProjectType.ANGULAR, ...(useCompodoc && { frameworkPreviewParts: { prefix: compoDocPreviewPrefix, diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index ddbad146529..4f94e24a8fb 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -172,6 +172,8 @@ const hasFrameworkTemplates = (framework?: SupportedFrameworks) => ['angular', 'nextjs'].includes(framework); function shouldUseSWCCompiler(builder: Builder, projectType: ProjectType) { + console.log({ builder, projectType }); + return ( builder === CoreBuilder.Webpack5 && projectType !== ProjectType.ANGULAR && @@ -432,7 +434,6 @@ export async function baseGenerator( } : options.framework || {}, }, - useSWC, prefixes, storybookConfigFolder, docs: { autodocs: 'tag' }, From d00398821538e10f3b0e2851006889f33d958c11 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 17 Nov 2023 10:18:33 +0100 Subject: [PATCH 102/170] Remove console.log --- code/lib/cli/src/generators/baseGenerator.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index 4f94e24a8fb..7a808b103fb 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -172,8 +172,6 @@ const hasFrameworkTemplates = (framework?: SupportedFrameworks) => ['angular', 'nextjs'].includes(framework); function shouldUseSWCCompiler(builder: Builder, projectType: ProjectType) { - console.log({ builder, projectType }); - return ( builder === CoreBuilder.Webpack5 && projectType !== ProjectType.ANGULAR && From 5305ee9158413bfa9e6342ff2342d6b4e8de2fa1 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 17 Nov 2023 11:45:07 +0100 Subject: [PATCH 103/170] Reposition swc loader order --- code/frameworks/nextjs/src/swc/loader.ts | 1 + .../nextjs/src/swc/next-swc-loader-patch.ts | 11 ++++++++++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/src/swc/loader.ts b/code/frameworks/nextjs/src/swc/loader.ts index 3c235c343f7..615e3ce92b5 100644 --- a/code/frameworks/nextjs/src/swc/loader.ts +++ b/code/frameworks/nextjs/src/swc/loader.ts @@ -51,6 +51,7 @@ export const configureSWCLoader = async ( test: /\.(m?(j|t)sx?)$/, include: [getProjectRoot()], exclude: [/(node_modules)/, ...Object.keys(virtualModules)], + enforce: 'post', use: { // we use our own patch because we need to remove tracing from the original code // which is not possible otherwise diff --git a/code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts b/code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts index 9fd155951fc..114daaddc29 100644 --- a/code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts +++ b/code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts @@ -165,11 +165,20 @@ export function pitch(this: any) { }, callback); } +function sanitizeSourceMap(rawSourceMap: any): any { + const { sourcesContent, ...sourceMap } = rawSourceMap ?? {}; + + // JSON parse/stringify trick required for swc to accept the SourceMap + return JSON.parse(JSON.stringify(sourceMap)); +} + export default function swcLoader(this: any, inputSource: string, inputSourceMap: any) { const loaderSpan = mockCurrentTraceSpan.traceChild('next-swc-loader'); const callback = this.async(); loaderSpan - .traceAsyncFn(() => loaderTransform.call(this, loaderSpan, inputSource, inputSourceMap)) + .traceAsyncFn(() => + loaderTransform.call(this, loaderSpan, inputSource, sanitizeSourceMap(inputSourceMap)) + ) .then( ([transformedSource, outputSourceMap]: any) => { callback(null, transformedSource, outputSourceMap || inputSourceMap); From df06528765104f88b69d0b43f031e27920fb31e4 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 17 Nov 2023 11:45:26 +0100 Subject: [PATCH 104/170] Fix E2E test --- code/e2e-tests/addon-controls.spec.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/code/e2e-tests/addon-controls.spec.ts b/code/e2e-tests/addon-controls.spec.ts index df376782aae..bef89cfb39b 100644 --- a/code/e2e-tests/addon-controls.spec.ts +++ b/code/e2e-tests/addon-controls.spec.ts @@ -31,10 +31,12 @@ test.describe('addon-controls', () => { ); const toggle = sbPage.panelContent().locator('input[name=primary]'); await toggle.click(); - await expect(sbPage.previewRoot().locator('button')).toHaveCSS( - 'background-color', - 'rgba(0, 0, 0, 0)' - ); + await expect(async () => { + await expect(sbPage.previewRoot().locator('button')).toHaveCSS( + 'background-color', + 'rgba(0, 0, 0, 0)' + ); + }).toPass(); // Color picker: Background color const color = sbPage.panelContent().locator('input[placeholder="Choose color..."]'); From e047dfa8ac7935a171e08e8c5691a9ab5cd12f1f Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 17 Nov 2023 15:28:25 +0100 Subject: [PATCH 105/170] Exclude existing swc-loader --- code/builders/builder-webpack5/src/preview/loaders.ts | 8 ++------ code/frameworks/nextjs/src/swc/loader.ts | 9 +++------ 2 files changed, 5 insertions(+), 12 deletions(-) diff --git a/code/builders/builder-webpack5/src/preview/loaders.ts b/code/builders/builder-webpack5/src/preview/loaders.ts index 26943cd90e0..333d2a4268f 100644 --- a/code/builders/builder-webpack5/src/preview/loaders.ts +++ b/code/builders/builder-webpack5/src/preview/loaders.ts @@ -49,12 +49,8 @@ export const createSWCLoader = async (excludes: string[] = [], options: Options) }; return { test: typescriptOptions.skipCompiler ? /\.(mjs|cjs|jsx?)$/ : /\.(mjs|cjs|tsx?|jsx?)$/, - use: [ - { - loader: require.resolve('swc-loader'), - options: config, - }, - ], + loader: require.resolve('swc-loader'), + options: config, include: [getProjectRoot()], exclude: [/node_modules/, ...excludes], }; diff --git a/code/frameworks/nextjs/src/swc/loader.ts b/code/frameworks/nextjs/src/swc/loader.ts index 615e3ce92b5..661eabc625d 100644 --- a/code/frameworks/nextjs/src/swc/loader.ts +++ b/code/frameworks/nextjs/src/swc/loader.ts @@ -43,10 +43,9 @@ export const configureSWCLoader = async ( baseConfig.module.rules = [ // TODO: Remove filtering in Storybook 8.0 - ...baseConfig.module.rules.filter( - (r: RuleSetRule) => - !(typeof r.use === 'object' && 'loader' in r.use && r.use.loader?.includes('swc-loader')) - ), + ...baseConfig.module.rules.filter((r: RuleSetRule) => { + return !r.loader?.includes('swc-loader'); + }), { test: /\.(m?(j|t)sx?)$/, include: [getProjectRoot()], @@ -62,14 +61,12 @@ export const configureSWCLoader = async ( pagesDir: `${dir}/pages`, appDir: `${dir}/apps`, hasReactRefresh: isDevelopment, - hasServerComponents: true, nextConfig, supportedBrowsers: require('next/dist/build/utils').getSupportedBrowsers( dir, isDevelopment ), swcCacheDir: path.join(dir, nextConfig?.distDir ?? '.next', 'cache', 'swc'), - isServerLayer: false, bundleTarget: 'default', }, }, From f7a0756dc620792ea9f2930ab37ca7dd446e3d29 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 20 Nov 2023 08:58:26 +0100 Subject: [PATCH 106/170] Add error message for Next.js if swc is not supported --- code/frameworks/nextjs/src/swc/loader.ts | 11 ++--------- .../lib/core-events/src/errors/server-errors.ts | 17 +++++++++++++++++ 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/code/frameworks/nextjs/src/swc/loader.ts b/code/frameworks/nextjs/src/swc/loader.ts index 661eabc625d..201bdc52e0d 100644 --- a/code/frameworks/nextjs/src/swc/loader.ts +++ b/code/frameworks/nextjs/src/swc/loader.ts @@ -6,8 +6,7 @@ import type { NextConfig } from 'next'; import path from 'path'; import type { RuleSetRule } from 'webpack'; import semver from 'semver'; -import { dedent } from 'ts-dedent'; -import { logger } from '@storybook/node-logger'; +import { NextjsSWCNotSupportedError } from 'lib/core-events/src/errors/server-errors'; import { getNextjsVersion } from '../utils'; export const configureSWCLoader = async ( @@ -19,13 +18,7 @@ export const configureSWCLoader = async ( const version = getNextjsVersion(); if (semver.lt(version, '14.0.0')) { - logger.warn( - dedent`You have activated the SWC mode for Next.js, but you are not using Next.js 14.0.0 or higher. - SWC is only supported in Next.js 14.0.0 and higher. - Skipping SWC and using Babel instead. - ` - ); - return; + throw new NextjsSWCNotSupportedError(); } const dir = getProjectRoot(); diff --git a/code/lib/core-events/src/errors/server-errors.ts b/code/lib/core-events/src/errors/server-errors.ts index 951a482e957..6ca430ae196 100644 --- a/code/lib/core-events/src/errors/server-errors.ts +++ b/code/lib/core-events/src/errors/server-errors.ts @@ -368,3 +368,20 @@ export class GoogleFontsLoadingError extends StorybookError { `; } } + +export class NextjsSWCNotSupportedError extends StorybookError { + readonly category = Category.FRAMEWORK_NEXTJS; + + readonly code = 3; + + public readonly documentation = + 'https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md#manual-migration'; + + template() { + return dedent` + You have activated the SWC mode for Next.js, but you are not using Next.js 14.0.0 or higher. + SWC is only supported in Next.js 14.0.0 and higher. Please go to your .storybook/main. file + and remove the { framework: { options: { builder: { useSWC: true } } } } option or upgrade to Next.js v14 or later. + `; + } +} From b54be152f12423cd2f9ac4589effa42ec7a0479e Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 20 Nov 2023 09:01:42 +0100 Subject: [PATCH 107/170] Pass proper projectType to generators --- code/lib/cli/src/generators/ANGULAR/index.ts | 3 +-- code/lib/cli/src/initiate.ts | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/code/lib/cli/src/generators/ANGULAR/index.ts b/code/lib/cli/src/generators/ANGULAR/index.ts index 03214d29984..c8c7f3f288b 100644 --- a/code/lib/cli/src/generators/ANGULAR/index.ts +++ b/code/lib/cli/src/generators/ANGULAR/index.ts @@ -1,7 +1,7 @@ import { join } from 'path'; import { baseGenerator } from '../baseGenerator'; import type { Generator } from '../types'; -import { CoreBuilder, ProjectType } from '../../project_types'; +import { CoreBuilder } from '../../project_types'; import { AngularJSON, compoDocPreviewPrefix, promptForCompoDocs } from './helpers'; import { getCliDir } from '../../dirs'; import { paddedLog, copyTemplate } from '../../helpers'; @@ -59,7 +59,6 @@ const generator: Generator<{ projectName: string }> = async ( { ...options, builder: CoreBuilder.Webpack5, - projectType: ProjectType.ANGULAR, ...(useCompodoc && { frameworkPreviewParts: { prefix: compoDocPreviewPrefix, diff --git a/code/lib/cli/src/initiate.ts b/code/lib/cli/src/initiate.ts index e2966a0c179..3afd703a1e0 100644 --- a/code/lib/cli/src/initiate.ts +++ b/code/lib/cli/src/initiate.ts @@ -57,7 +57,7 @@ const installStorybook = async ( linkable: !!options.linkable, pnp: pnp || options.usePnp, yes: options.yes, - projectType: options.type, + projectType, }; const runGenerator: () => Promise = async () => { From 39a2b469d91acb0cbfa5d52a1ca71a7d98c84a6b Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 20 Nov 2023 09:02:56 +0100 Subject: [PATCH 108/170] Fix e2e tests --- code/e2e-tests/addon-controls.spec.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/code/e2e-tests/addon-controls.spec.ts b/code/e2e-tests/addon-controls.spec.ts index bef89cfb39b..2c388d7ef59 100644 --- a/code/e2e-tests/addon-controls.spec.ts +++ b/code/e2e-tests/addon-controls.spec.ts @@ -41,10 +41,12 @@ test.describe('addon-controls', () => { // Color picker: Background color const color = sbPage.panelContent().locator('input[placeholder="Choose color..."]'); await color.fill('red'); - await expect(sbPage.previewRoot().locator('button')).toHaveCSS( - 'background-color', - 'rgb(255, 0, 0)' - ); + await expect(async () => { + await expect(sbPage.previewRoot().locator('button')).toHaveCSS( + 'background-color', + 'rgb(255, 0, 0)' + ); + }).toPass(); // TODO: enable this once the controls for size are aligned in all CLI templates. // Radio buttons: Size From defbd62a4e9c3d7037b40511ad45c277f973273d Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 20 Nov 2023 10:35:16 +0100 Subject: [PATCH 109/170] Update code/lib/core-server/src/build-dev.ts --- code/lib/core-server/src/build-dev.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/core-server/src/build-dev.ts b/code/lib/core-server/src/build-dev.ts index 459c576113b..ab8495907ef 100644 --- a/code/lib/core-server/src/build-dev.ts +++ b/code/lib/core-server/src/build-dev.ts @@ -77,7 +77,7 @@ export async function buildDevStandalone( try { await warnOnIncompatibleAddons(config); } catch (e) { - console.warn('Failed to check for incompatible addons', e); + console.warn('Storybook failed to check addon compatibility', e); } // Load first pass: We need to determine the builder From a7e5430049a5063ea49b3e31e1484d50b4e36803 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 20 Nov 2023 10:53:01 +0100 Subject: [PATCH 110/170] Move swc logic to custom generators --- code/lib/cli/src/generators/HTML/index.ts | 5 ++++- code/lib/cli/src/generators/PREACT/index.ts | 5 ++++- code/lib/cli/src/generators/REACT/index.ts | 1 + .../cli/src/generators/REACT_SCRIPTS/index.ts | 1 + code/lib/cli/src/generators/SERVER/index.ts | 1 + code/lib/cli/src/generators/SFC_VUE/index.ts | 5 ++++- code/lib/cli/src/generators/VUE/index.ts | 1 + code/lib/cli/src/generators/VUE3/index.ts | 1 + .../src/generators/WEB-COMPONENTS/index.ts | 2 ++ .../cli/src/generators/WEBPACK_REACT/index.ts | 2 ++ code/lib/cli/src/generators/baseGenerator.ts | 19 ++++++------------- code/lib/cli/src/generators/types.ts | 3 ++- 12 files changed, 29 insertions(+), 17 deletions(-) diff --git a/code/lib/cli/src/generators/HTML/index.ts b/code/lib/cli/src/generators/HTML/index.ts index 781d580d206..c4e0af830fb 100755 --- a/code/lib/cli/src/generators/HTML/index.ts +++ b/code/lib/cli/src/generators/HTML/index.ts @@ -1,8 +1,11 @@ +import { CoreBuilder } from '../../project_types'; import { baseGenerator } from '../baseGenerator'; import type { Generator } from '../types'; const generator: Generator = async (packageManager, npmOptions, options) => { - await baseGenerator(packageManager, npmOptions, options, 'html'); + await baseGenerator(packageManager, npmOptions, options, 'html', { + useSWC: ({ builder }) => builder === CoreBuilder.Webpack5, + }); }; export default generator; diff --git a/code/lib/cli/src/generators/PREACT/index.ts b/code/lib/cli/src/generators/PREACT/index.ts index e5bf286467a..6bbab88e16a 100644 --- a/code/lib/cli/src/generators/PREACT/index.ts +++ b/code/lib/cli/src/generators/PREACT/index.ts @@ -1,8 +1,11 @@ +import { CoreBuilder } from '../../project_types'; import { baseGenerator } from '../baseGenerator'; import type { Generator } from '../types'; const generator: Generator = async (packageManager, npmOptions, options) => { - await baseGenerator(packageManager, npmOptions, options, 'preact'); + await baseGenerator(packageManager, npmOptions, options, 'preact', { + useSWC: ({ builder }) => builder === CoreBuilder.Webpack5, + }); }; export default generator; diff --git a/code/lib/cli/src/generators/REACT/index.ts b/code/lib/cli/src/generators/REACT/index.ts index 208c62bf25d..3479c1fbc4c 100644 --- a/code/lib/cli/src/generators/REACT/index.ts +++ b/code/lib/cli/src/generators/REACT/index.ts @@ -10,6 +10,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { await baseGenerator(packageManager, npmOptions, options, 'react', { extraPackages, + useSWC: ({ builder }) => builder === CoreBuilder.Webpack5, extraAddons: ['@storybook/addon-onboarding'], }); }; diff --git a/code/lib/cli/src/generators/REACT_SCRIPTS/index.ts b/code/lib/cli/src/generators/REACT_SCRIPTS/index.ts index 866b2210664..2177a9d5090 100644 --- a/code/lib/cli/src/generators/REACT_SCRIPTS/index.ts +++ b/code/lib/cli/src/generators/REACT_SCRIPTS/index.ts @@ -59,6 +59,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { { ...options, builder: CoreBuilder.Webpack5 }, 'react', { + useSWC: () => true, extraAddons, extraPackages, staticDir: fs.existsSync(path.resolve('./public')) ? 'public' : undefined, diff --git a/code/lib/cli/src/generators/SERVER/index.ts b/code/lib/cli/src/generators/SERVER/index.ts index c99b69e4902..7ced80f7441 100755 --- a/code/lib/cli/src/generators/SERVER/index.ts +++ b/code/lib/cli/src/generators/SERVER/index.ts @@ -9,6 +9,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { { ...options, builder: CoreBuilder.Webpack5 }, 'server', { + useSWC: () => true, extensions: ['json', 'yaml', 'yml'], } ); diff --git a/code/lib/cli/src/generators/SFC_VUE/index.ts b/code/lib/cli/src/generators/SFC_VUE/index.ts index e2849a352d9..a3e2f15ea60 100644 --- a/code/lib/cli/src/generators/SFC_VUE/index.ts +++ b/code/lib/cli/src/generators/SFC_VUE/index.ts @@ -1,8 +1,11 @@ +import { CoreBuilder } from '../../project_types'; import { baseGenerator } from '../baseGenerator'; import type { Generator } from '../types'; const generator: Generator = async (packageManager, npmOptions, options) => { - await baseGenerator(packageManager, npmOptions, options, 'vue'); + await baseGenerator(packageManager, npmOptions, options, 'vue', { + useSWC: ({ builder }) => builder === CoreBuilder.Webpack5, + }); }; export default generator; diff --git a/code/lib/cli/src/generators/VUE/index.ts b/code/lib/cli/src/generators/VUE/index.ts index c1869a53969..6b771973a28 100644 --- a/code/lib/cli/src/generators/VUE/index.ts +++ b/code/lib/cli/src/generators/VUE/index.ts @@ -7,6 +7,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { extraPackages: async ({ builder }) => { return builder === CoreBuilder.Webpack5 ? ['vue-loader@^15.7.0'] : []; }, + useSWC: ({ builder }) => builder === CoreBuilder.Webpack5, }); }; diff --git a/code/lib/cli/src/generators/VUE3/index.ts b/code/lib/cli/src/generators/VUE3/index.ts index 63dbddede7b..ec20a5b946a 100644 --- a/code/lib/cli/src/generators/VUE3/index.ts +++ b/code/lib/cli/src/generators/VUE3/index.ts @@ -9,6 +9,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => { ? ['vue-loader@^17.0.0', '@vue/compiler-sfc@^3.2.0'] : []; }, + useSWC: ({ builder }) => builder === CoreBuilder.Webpack5, }); }; diff --git a/code/lib/cli/src/generators/WEB-COMPONENTS/index.ts b/code/lib/cli/src/generators/WEB-COMPONENTS/index.ts index 66739509674..bf5ceee43c1 100755 --- a/code/lib/cli/src/generators/WEB-COMPONENTS/index.ts +++ b/code/lib/cli/src/generators/WEB-COMPONENTS/index.ts @@ -1,9 +1,11 @@ +import { CoreBuilder } from '../../project_types'; import { baseGenerator } from '../baseGenerator'; import type { Generator } from '../types'; const generator: Generator = async (packageManager, npmOptions, options) => { return baseGenerator(packageManager, npmOptions, options, 'web-components', { extraPackages: ['lit'], + useSWC: ({ builder }) => builder === CoreBuilder.Webpack5, }); }; diff --git a/code/lib/cli/src/generators/WEBPACK_REACT/index.ts b/code/lib/cli/src/generators/WEBPACK_REACT/index.ts index 867bd82b80c..94e8babee46 100644 --- a/code/lib/cli/src/generators/WEBPACK_REACT/index.ts +++ b/code/lib/cli/src/generators/WEBPACK_REACT/index.ts @@ -1,9 +1,11 @@ +import { CoreBuilder } from '../../project_types'; import { baseGenerator } from '../baseGenerator'; import type { Generator } from '../types'; const generator: Generator = async (packageManager, npmOptions, options) => { await baseGenerator(packageManager, npmOptions, options, 'react', { extraAddons: ['@storybook/addon-onboarding'], + useSWC: ({ builder }) => builder === CoreBuilder.Webpack5, }); }; diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index 7a808b103fb..ae90bf3d303 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -29,6 +29,7 @@ const defaultOptions: FrameworkOptions = { addMainFile: true, addComponents: true, skipBabel: false, + useSWC: () => false, extraMain: undefined, framework: undefined, extensions: undefined, @@ -171,15 +172,6 @@ const hasInteractiveStories = (rendererId: SupportedRenderers) => const hasFrameworkTemplates = (framework?: SupportedFrameworks) => ['angular', 'nextjs'].includes(framework); -function shouldUseSWCCompiler(builder: Builder, projectType: ProjectType) { - return ( - builder === CoreBuilder.Webpack5 && - projectType !== ProjectType.ANGULAR && - // TODO: Remove in Storybook 8.0 - projectType !== ProjectType.NEXTJS - ); -} - export async function baseGenerator( packageManager: JsPackageManager, npmOptions: NpmOptions, @@ -203,8 +195,6 @@ export async function baseGenerator( builder = await detectBuilder(packageManager, projectType); } - const useSWC = shouldUseSWCCompiler(builder, projectType); - const { packages: frameworkPackages, type, @@ -231,6 +221,7 @@ export async function baseGenerator( extensions, storybookConfigFolder, componentsDestinationPath, + useSWC, } = { ...defaultOptions, ...options, @@ -241,7 +232,9 @@ export async function baseGenerator( ...options, }; - if (useSWC) { + const swc = useSWC({ builder }); + + if (swc) { skipBabel = true; } @@ -422,7 +415,7 @@ export async function baseGenerator( await configureMain({ framework: { name: frameworkInclude, - options: useSWC + options: swc ? { ...(options.framework ?? {}), builder: { diff --git a/code/lib/cli/src/generators/types.ts b/code/lib/cli/src/generators/types.ts index 1711505e0bd..e86e6876eda 100644 --- a/code/lib/cli/src/generators/types.ts +++ b/code/lib/cli/src/generators/types.ts @@ -1,5 +1,5 @@ import type { NpmOptions } from '../NpmOptions'; -import type { SupportedLanguage, Builder, ProjectType } from '../project_types'; +import type { SupportedLanguage, Builder, ProjectType, CoreBuilder } from '../project_types'; import type { JsPackageManager, PackageManagerName } from '../js-package-manager/JsPackageManager'; import type { FrameworkPreviewParts } from './configure'; @@ -24,6 +24,7 @@ export interface FrameworkOptions { addMainFile?: boolean; addComponents?: boolean; skipBabel?: boolean; + useSWC?: ({ builder }: { builder: Builder }) => boolean; extraMain?: any; extensions?: string[]; framework?: Record; From 39ddc2593683d5e401bcf726a84033837c18fb47 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 20 Nov 2023 10:53:27 +0100 Subject: [PATCH 111/170] Change selected compiler message --- code/builders/builder-webpack5/src/preview/loaders.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/code/builders/builder-webpack5/src/preview/loaders.ts b/code/builders/builder-webpack5/src/preview/loaders.ts index 333d2a4268f..f10bd93a5eb 100644 --- a/code/builders/builder-webpack5/src/preview/loaders.ts +++ b/code/builders/builder-webpack5/src/preview/loaders.ts @@ -10,6 +10,7 @@ export const createBabelLoader = ( typescriptOptions: TypescriptOptions, excludes: string[] = [] ) => { + logger.info(dedent`Using Babel compiler`); return { test: typescriptOptions.skipBabel ? /\.(mjs|jsx?)$/ : /\.(mjs|tsx?|jsx?)$/, use: [ @@ -24,9 +25,7 @@ export const createBabelLoader = ( }; export const createSWCLoader = async (excludes: string[] = [], options: Options) => { - logger.warn(dedent` - The SWC loader is an experimental feature and may change or even be removed at any time. - `); + logger.info(dedent`Using SWC compiler`); const swc = await options.presets.apply('swc', {}, options); const typescriptOptions = await options.presets.apply<{ skipCompiler?: boolean }>( From dff960f425533721704aaa9739eb2b65984aa044 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 20 Nov 2023 10:53:50 +0100 Subject: [PATCH 112/170] Update jscodeshift to fix local sandbox creation --- code/lib/codemod/package.json | 4 +- code/lib/postinstall/package.json | 2 +- code/yarn.lock | 66 ++++--------------------------- 3 files changed, 10 insertions(+), 62 deletions(-) diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index c805f990a8d..ac98a974c4b 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -62,13 +62,13 @@ "@types/cross-spawn": "^6.0.2", "cross-spawn": "^7.0.3", "globby": "^11.0.2", - "jscodeshift": "^0.14.0", + "jscodeshift": "^0.15.1", "lodash": "^4.17.21", "prettier": "^2.8.0", "recast": "^0.23.1" }, "devDependencies": { - "@types/jscodeshift": "^0.11.6", + "@types/jscodeshift": "^0.11.10", "ansi-regex": "^5.0.1", "jest": "^29.7.0", "jest-specific-snapshot": "^8.0.0", diff --git a/code/lib/postinstall/package.json b/code/lib/postinstall/package.json index a9779b34bd8..9e2a19920e0 100644 --- a/code/lib/postinstall/package.json +++ b/code/lib/postinstall/package.json @@ -47,7 +47,7 @@ "devDependencies": { "jest": "^29.7.0", "jest-specific-snapshot": "^8.0.0", - "jscodeshift": "^0.14.0", + "jscodeshift": "^0.15.1", "typescript": "~4.9.3" }, "publishConfig": { diff --git a/code/yarn.lock b/code/yarn.lock index 26430758888..df84273184c 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6311,13 +6311,13 @@ __metadata: "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" "@types/cross-spawn": "npm:^6.0.2" - "@types/jscodeshift": "npm:^0.11.6" + "@types/jscodeshift": "npm:^0.11.10" ansi-regex: "npm:^5.0.1" cross-spawn: "npm:^7.0.3" globby: "npm:^11.0.2" jest: "npm:^29.7.0" jest-specific-snapshot: "npm:^8.0.0" - jscodeshift: "npm:^0.14.0" + jscodeshift: "npm:^0.15.1" lodash: "npm:^4.17.21" mdast-util-mdx-jsx: "npm:^2.1.2" mdast-util-mdxjs-esm: "npm:^1.3.1" @@ -6925,7 +6925,7 @@ __metadata: dependencies: jest: "npm:^29.7.0" jest-specific-snapshot: "npm:^8.0.0" - jscodeshift: "npm:^0.14.0" + jscodeshift: "npm:^0.15.1" typescript: "npm:~4.9.3" languageName: unknown linkType: soft @@ -8939,13 +8939,13 @@ __metadata: languageName: node linkType: hard -"@types/jscodeshift@npm:^0.11.6": - version: 0.11.7 - resolution: "@types/jscodeshift@npm:0.11.7" +"@types/jscodeshift@npm:^0.11.10": + version: 0.11.10 + resolution: "@types/jscodeshift@npm:0.11.10" dependencies: ast-types: "npm:^0.14.1" recast: "npm:^0.20.3" - checksum: a2c26f8e64950296bae6176c52e832e1f5c5eb3672adad3c1cdc63e23b8bd3de47890ac8eaae7eb0788feea7628ce540513ff5189379f79e882ddcfa1c855cfc + checksum: 1d477ea1addd62a5949f028ef16bac3226341d65052e4f51d61e51789c6c7aa17e953dac34eb6d1e5a2b761fc4c7920df875e20e85cdf4122fc08836e7da547a languageName: node linkType: hard @@ -11157,15 +11157,6 @@ __metadata: languageName: node linkType: hard -"ast-types@npm:0.15.2": - version: 0.15.2 - resolution: "ast-types@npm:0.15.2" - dependencies: - tslib: "npm:^2.0.1" - checksum: 5b26e3656e9e8d1db8c8d14971d0cb88ca0138aacce72171cb4cd4555fc8dc53c07e821c568e57fe147366931708fefd25cb9d7e880d42ce9cb569947844c962 - languageName: node - linkType: hard - "ast-types@npm:^0.16.1": version: 0.16.1 resolution: "ast-types@npm:0.16.1" @@ -20130,37 +20121,6 @@ __metadata: languageName: node linkType: hard -"jscodeshift@npm:^0.14.0": - version: 0.14.0 - resolution: "jscodeshift@npm:0.14.0" - dependencies: - "@babel/core": "npm:^7.13.16" - "@babel/parser": "npm:^7.13.16" - "@babel/plugin-proposal-class-properties": "npm:^7.13.0" - "@babel/plugin-proposal-nullish-coalescing-operator": "npm:^7.13.8" - "@babel/plugin-proposal-optional-chaining": "npm:^7.13.12" - "@babel/plugin-transform-modules-commonjs": "npm:^7.13.8" - "@babel/preset-flow": "npm:^7.13.13" - "@babel/preset-typescript": "npm:^7.13.0" - "@babel/register": "npm:^7.13.16" - babel-core: "npm:^7.0.0-bridge.0" - chalk: "npm:^4.1.2" - flow-parser: "npm:0.*" - graceful-fs: "npm:^4.2.4" - micromatch: "npm:^4.0.4" - neo-async: "npm:^2.5.0" - node-dir: "npm:^0.1.17" - recast: "npm:^0.21.0" - temp: "npm:^0.8.4" - write-file-atomic: "npm:^2.3.0" - peerDependencies: - "@babel/preset-env": ^7.1.6 - bin: - jscodeshift: bin/jscodeshift.js - checksum: dab63bdb4b7e67d79634fcd3f5dc8b227146e9f68aa88700bc49c5a45b6339d05bd934a98aa53d29abd04f81237d010e7e037799471b2aab66ec7b9a7d752786 - languageName: node - linkType: hard - "jscodeshift@npm:^0.15.1": version: 0.15.1 resolution: "jscodeshift@npm:0.15.1" @@ -25957,18 +25917,6 @@ __metadata: languageName: node linkType: hard -"recast@npm:^0.21.0": - version: 0.21.5 - resolution: "recast@npm:0.21.5" - dependencies: - ast-types: "npm:0.15.2" - esprima: "npm:~4.0.0" - source-map: "npm:~0.6.1" - tslib: "npm:^2.0.1" - checksum: a45168c82195f24fa2c70293a624fece0069a2e8e8adb637f9963777735f81cb3bb62e55172db677ec3573b08b2daaf1eddd85b74da6fe0bd37c9b15eeaf94b4 - languageName: node - linkType: hard - "recast@npm:^0.23.1, recast@npm:^0.23.3": version: 0.23.4 resolution: "recast@npm:0.23.4" From 5f1f16d4865a63493bf50f9d5bfac7e08bddd272 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 20 Nov 2023 09:50:51 +0100 Subject: [PATCH 113/170] Change check-dependencies script to js WIP WIP WIP WIP --- .github/workflows/generate-sandboxes-main.yml | 2 +- .github/workflows/generate-sandboxes-next.yml | 2 +- scripts/check-dependencies.js | 72 +++++++++++++++++++ scripts/check-dependencies.ts | 7 -- 4 files changed, 74 insertions(+), 9 deletions(-) create mode 100644 scripts/check-dependencies.js delete mode 100755 scripts/check-dependencies.ts diff --git a/.github/workflows/generate-sandboxes-main.yml b/.github/workflows/generate-sandboxes-main.yml index adea48c1b2f..53814040f61 100644 --- a/.github/workflows/generate-sandboxes-main.yml +++ b/.github/workflows/generate-sandboxes-main.yml @@ -32,7 +32,7 @@ jobs: - name: Install dependencies run: | cd ./scripts - node --loader esbuild-register/loader -r esbuild-register ./check-dependencies.ts + node --experimental-modules ./check-dependencies.js cd .. - name: Compile Storybook libraries run: yarn task --task compile --start-from=auto --no-link diff --git a/.github/workflows/generate-sandboxes-next.yml b/.github/workflows/generate-sandboxes-next.yml index 9a00f8b99cd..d9355f593dc 100644 --- a/.github/workflows/generate-sandboxes-next.yml +++ b/.github/workflows/generate-sandboxes-next.yml @@ -32,7 +32,7 @@ jobs: - name: Install dependencies run: | cd ./scripts - node --loader esbuild-register/loader -r esbuild-register ./check-dependencies.ts + node --experimental-modules ./check-dependencies.js cd .. - name: Compile Storybook libraries run: yarn task --task compile --start-from=auto --no-link diff --git a/scripts/check-dependencies.js b/scripts/check-dependencies.js new file mode 100644 index 00000000000..0bad76f507c --- /dev/null +++ b/scripts/check-dependencies.js @@ -0,0 +1,72 @@ +/** + * This file needs to be run before any other script to ensure dependencies are installed + * Therefore, we cannot transform this file to Typescript, because it would require esbuild to be installed + */ +import { spawn } from 'child_process'; +import { join } from 'path'; +import { existsSync } from 'fs'; +import * as url from 'url'; + +const logger = console; + +const filename = url.fileURLToPath(import.meta.url); +const dirname = url.fileURLToPath(new URL('.', import.meta.url)); + +const checkDependencies = async () => { + const scriptsPath = join(dirname); + const codePath = join(dirname, '..', 'code'); + + const tasks = []; + + if (!existsSync(join(scriptsPath, 'node_modules'))) { + tasks.push( + spawn('yarn', ['install'], { + cwd: scriptsPath, + shell: true, + stdio: ['inherit', 'inherit', 'inherit'], + }) + ); + } + if (!existsSync(join(codePath, 'node_modules'))) { + tasks.push( + spawn('yarn', ['install'], { + cwd: codePath, + shell: true, + stdio: ['inherit', 'inherit', 'inherit'], + }) + ); + } + + if (tasks.length > 0) { + logger.log('installing dependencies'); + + await Promise.all( + tasks.map( + (t) => + new Promise((res, rej) => { + t.on('exit', (code) => { + if (code !== 0) { + rej(); + } else { + res(); + } + }); + }) + ) + ).catch(() => { + tasks.forEach((t) => t.kill()); + throw new Error('Failed to install dependencies'); + }); + + // give the filesystem some time + await new Promise((res) => { + setTimeout(res, 1000); + }); + } +}; + +checkDependencies().catch((e) => { + // eslint-disable-next-line no-console + console.error(e); + process.exit(1); +}); diff --git a/scripts/check-dependencies.ts b/scripts/check-dependencies.ts deleted file mode 100755 index babee83b82f..00000000000 --- a/scripts/check-dependencies.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { checkDependencies } from './utils/cli-utils'; - -checkDependencies().catch((e) => { - // eslint-disable-next-line no-console - console.error(e); - process.exit(1); -}); From 95a2add386e291aff46f097874d015d684ed22a5 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 20 Nov 2023 11:36:47 +0100 Subject: [PATCH 114/170] Cleanup imports --- code/lib/cli/src/generators/REACT/index.ts | 2 +- code/lib/cli/src/generators/baseGenerator.ts | 2 +- code/lib/cli/src/generators/types.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/code/lib/cli/src/generators/REACT/index.ts b/code/lib/cli/src/generators/REACT/index.ts index 3479c1fbc4c..046860356c5 100644 --- a/code/lib/cli/src/generators/REACT/index.ts +++ b/code/lib/cli/src/generators/REACT/index.ts @@ -1,5 +1,5 @@ import { detectLanguage } from '../../detect'; -import { SupportedLanguage } from '../../project_types'; +import { CoreBuilder, SupportedLanguage } from '../../project_types'; import { baseGenerator } from '../baseGenerator'; import type { Generator } from '../types'; diff --git a/code/lib/cli/src/generators/baseGenerator.ts b/code/lib/cli/src/generators/baseGenerator.ts index ae90bf3d303..6083fae9e87 100644 --- a/code/lib/cli/src/generators/baseGenerator.ts +++ b/code/lib/cli/src/generators/baseGenerator.ts @@ -4,7 +4,7 @@ import { dedent } from 'ts-dedent'; import ora from 'ora'; import type { NpmOptions } from '../NpmOptions'; import type { SupportedRenderers, SupportedFrameworks, Builder } from '../project_types'; -import { SupportedLanguage, externalFrameworks, CoreBuilder, ProjectType } from '../project_types'; +import { SupportedLanguage, externalFrameworks, CoreBuilder } from '../project_types'; import { copyTemplateFiles } from '../helpers'; import { configureMain, configurePreview } from './configure'; import type { JsPackageManager } from '../js-package-manager'; diff --git a/code/lib/cli/src/generators/types.ts b/code/lib/cli/src/generators/types.ts index e86e6876eda..2f97a34df12 100644 --- a/code/lib/cli/src/generators/types.ts +++ b/code/lib/cli/src/generators/types.ts @@ -1,5 +1,5 @@ import type { NpmOptions } from '../NpmOptions'; -import type { SupportedLanguage, Builder, ProjectType, CoreBuilder } from '../project_types'; +import type { SupportedLanguage, Builder, ProjectType } from '../project_types'; import type { JsPackageManager, PackageManagerName } from '../js-package-manager/JsPackageManager'; import type { FrameworkPreviewParts } from './configure'; From c825bd6560cd717455784ac8c479a2f111ff7e75 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 20 Nov 2023 13:09:08 +0100 Subject: [PATCH 115/170] rename property & add tests --- .../src/utils/normalize-stories.ts | 8 +- .../src/presets/common-override-preset.ts | 57 +--- .../__tests__/remove-mdx-stories.test.ts | 274 ++++++++++++++++++ .../src/utils/remove-mdx-entries.ts | 54 ++++ 4 files changed, 335 insertions(+), 58 deletions(-) create mode 100644 code/lib/core-server/src/utils/__tests__/remove-mdx-stories.test.ts create mode 100644 code/lib/core-server/src/utils/remove-mdx-entries.ts diff --git a/code/lib/core-common/src/utils/normalize-stories.ts b/code/lib/core-common/src/utils/normalize-stories.ts index 3beabeae4c8..1a69fb1ce68 100644 --- a/code/lib/core-common/src/utils/normalize-stories.ts +++ b/code/lib/core-common/src/utils/normalize-stories.ts @@ -34,7 +34,7 @@ export const getDirectoryFromWorkingDir = ({ export const normalizeStoriesEntry = ( entry: StoriesEntry, - { configDir, workingDir, default_files_pattern = DEFAULT_FILES_PATTERN }: NormalizeOptions + { configDir, workingDir, defaultFilesPattern = DEFAULT_FILES_PATTERN }: NormalizeOptions ): NormalizedStoriesSpecifier => { let specifierWithoutMatcher: Omit; @@ -53,7 +53,7 @@ export const normalizeStoriesEntry = ( specifierWithoutMatcher = { titlePrefix: DEFAULT_TITLE_PREFIX, directory: entry, - files: default_files_pattern, + files: defaultFilesPattern, }; } else { specifierWithoutMatcher = { @@ -65,7 +65,7 @@ export const normalizeStoriesEntry = ( } else { specifierWithoutMatcher = { titlePrefix: DEFAULT_TITLE_PREFIX, - files: default_files_pattern, + files: defaultFilesPattern, ...entry, }; } @@ -99,7 +99,7 @@ export const normalizeStoriesEntry = ( interface NormalizeOptions { configDir: string; workingDir: string; - default_files_pattern?: string; + defaultFilesPattern?: string; } export const normalizeStories = (entries: StoriesEntry[], options: NormalizeOptions) => { diff --git a/code/lib/core-server/src/presets/common-override-preset.ts b/code/lib/core-server/src/presets/common-override-preset.ts index d92dead5d8f..8cc740aea7d 100644 --- a/code/lib/core-server/src/presets/common-override-preset.ts +++ b/code/lib/core-server/src/presets/common-override-preset.ts @@ -1,14 +1,5 @@ -import type { - Options, - PresetProperty, - StoriesEntry, - StorybookConfig, - TestBuildFlags, -} from '@storybook/types'; -import { normalizeStories, commonGlobOptions } from '@storybook/core-common'; -import { isAbsolute, join, relative } from 'path'; -import slash from 'slash'; -import { glob } from 'glob'; +import type { Options, PresetProperty, StorybookConfig, TestBuildFlags } from '@storybook/types'; +import { removeMDXEntries } from '../utils/remove-mdx-entries'; export const framework: PresetProperty<'framework', StorybookConfig> = async (config) => { // This will get called with the values from the user's main config, but before @@ -25,49 +16,7 @@ export const framework: PresetProperty<'framework', StorybookConfig> = async (co export const stories: PresetProperty<'stories', StorybookConfig> = async (entries, options) => { if (options?.build?.test?.disableMDXEntries) { - const list = normalizeStories(entries, { - configDir: options.configDir, - workingDir: options.configDir, - default_files_pattern: '**/*.@(stories.@(js|jsx|mjs|ts|tsx))', - }); - const result = ( - await Promise.all( - list.map(async ({ directory, files, titlePrefix }) => { - const pattern = join(directory, files); - const absolutePattern = isAbsolute(pattern) ? pattern : join(options.configDir, pattern); - const absoluteDirectory = isAbsolute(directory) - ? directory - : join(options.configDir, directory); - - return { - files: ( - await glob(slash(absolutePattern), { - ...commonGlobOptions(absolutePattern), - follow: true, - }) - ).map((f) => relative(absoluteDirectory, f)), - directory, - titlePrefix, - }; - }) - ) - ).flatMap((expanded, i) => { - const filteredEntries = expanded.files.filter((s) => !s.endsWith('.mdx')); - // only return the filtered entries when there is something to filter - // as webpack is faster with unexpanded globs - let items = []; - if (filteredEntries.length < expanded.files.length) { - items = filteredEntries.map((k) => ({ - ...expanded, - files: `**/${k}`, - })); - } else { - items = [list[i]]; - } - - return items; - }); - return result; + return removeMDXEntries(entries, options); } return entries; }; diff --git a/code/lib/core-server/src/utils/__tests__/remove-mdx-stories.test.ts b/code/lib/core-server/src/utils/__tests__/remove-mdx-stories.test.ts new file mode 100644 index 00000000000..9c40041c0dc --- /dev/null +++ b/code/lib/core-server/src/utils/__tests__/remove-mdx-stories.test.ts @@ -0,0 +1,274 @@ +import { glob as globlOriginal } from 'glob'; +import { type StoriesEntry } from '@storybook/types'; +import { normalizeStoriesEntry } from '@storybook/core-common'; +import { join } from 'path'; +import { removeMDXEntries } from '../remove-mdx-entries'; + +const glob = globlOriginal as jest.MockedFunction; + +jest.mock('glob', () => ({ glob: jest.fn() })); + +const createList = (list: { entry: StoriesEntry; result: string[] }[], configDir: string) => { + return list.reduce>( + (acc, { entry, result }) => { + const { directory, files } = normalizeStoriesEntry(entry, { + configDir, + workingDir: '/', + }); + acc[join('/', directory, files)] = { result, entry }; + return acc; + }, + {} + ); +}; + +const createGlobMock = (input: ReturnType) => { + return async (k: string | string[]) => { + if (Array.isArray(k)) { + throw new Error('do not pass an array to glob during tests'); + } + const result = input[k].result || []; + return result; + }; +}; + +test('empty', async () => { + const configDir = '/configDir/'; + const list = createList([], configDir); + glob.mockImplementation(createGlobMock(list)); + + await expect(() => removeMDXEntries(Object.keys(list), { configDir })).rejects + .toThrowErrorMatchingInlineSnapshot(` + "Storybook could not index your stories. + Your main configuration somehow does not contain a 'stories' field, or it resolved to an empty array. + + Please check your main configuration file and make sure it exports a 'stories' field that is not an empty array. + + More info: https://storybook.js.org/docs/react/faq#can-i-have-a-storybook-with-no-local-stories + " + `); +}); + +test('minimal', async () => { + const configDir = '/configDir/'; + const list = createList([{ entry: '*.js', result: [] }], configDir); + glob.mockImplementation(createGlobMock(list)); + + await expect( + removeMDXEntries( + Object.values(list).map((e) => e.entry), + { configDir } + ) + ).resolves.toMatchInlineSnapshot(` + Array [ + Object { + "directory": ".", + "files": "*.js", + "importPathMatcher": /\\^\\\\\\.\\[\\\\\\\\/\\]\\(\\?:\\(\\?!\\\\\\.\\)\\(\\?=\\.\\)\\[\\^/\\]\\*\\?\\\\\\.js\\)\\$/, + "titlePrefix": "", + }, + ] + `); +}); + +test('multiple', async () => { + const configDir = '/configDir/'; + const list = createList( + [ + { entry: '*.ts', result: [] }, + { entry: '*.js', result: [] }, + ], + configDir + ); + glob.mockImplementation(createGlobMock(list)); + + await expect( + removeMDXEntries( + Object.values(list).map((e) => e.entry), + { configDir } + ) + ).resolves.toMatchInlineSnapshot(` + Array [ + Object { + "directory": ".", + "files": "*.ts", + "importPathMatcher": /\\^\\\\\\.\\[\\\\\\\\/\\]\\(\\?:\\(\\?!\\\\\\.\\)\\(\\?=\\.\\)\\[\\^/\\]\\*\\?\\\\\\.ts\\)\\$/, + "titlePrefix": "", + }, + Object { + "directory": ".", + "files": "*.js", + "importPathMatcher": /\\^\\\\\\.\\[\\\\\\\\/\\]\\(\\?:\\(\\?!\\\\\\.\\)\\(\\?=\\.\\)\\[\\^/\\]\\*\\?\\\\\\.js\\)\\$/, + "titlePrefix": "", + }, + ] + `); +}); + +test('mdx but not matching any files', async () => { + const configDir = '/configDir/'; + const list = createList( + [ + { entry: '*.mdx', result: [] }, + { entry: '*.js', result: [] }, + ], + configDir + ); + glob.mockImplementation(createGlobMock(list)); + + await expect( + removeMDXEntries( + Object.values(list).map((e) => e.entry), + { configDir } + ) + ).resolves.toMatchInlineSnapshot(` + Array [ + Object { + "directory": ".", + "files": "*.mdx", + "importPathMatcher": /\\^\\\\\\.\\[\\\\\\\\/\\]\\(\\?:\\(\\?!\\\\\\.\\)\\(\\?=\\.\\)\\[\\^/\\]\\*\\?\\\\\\.mdx\\)\\$/, + "titlePrefix": "", + }, + Object { + "directory": ".", + "files": "*.js", + "importPathMatcher": /\\^\\\\\\.\\[\\\\\\\\/\\]\\(\\?:\\(\\?!\\\\\\.\\)\\(\\?=\\.\\)\\[\\^/\\]\\*\\?\\\\\\.js\\)\\$/, + "titlePrefix": "", + }, + ] + `); +}); + +test('removes entries that only yield mdx files', async () => { + const configDir = '/configDir/'; + const list = createList( + [ + { entry: '*.mdx', result: ['/configDir/my-file.mdx'] }, + { entry: '*.js', result: [] }, + ], + configDir + ); + glob.mockImplementation(createGlobMock(list)); + + await expect( + removeMDXEntries( + Object.values(list).map((e) => e.entry), + { configDir } + ) + ).resolves.toMatchInlineSnapshot(` + Array [ + Object { + "directory": ".", + "files": "*.js", + "importPathMatcher": /\\^\\\\\\.\\[\\\\\\\\/\\]\\(\\?:\\(\\?!\\\\\\.\\)\\(\\?=\\.\\)\\[\\^/\\]\\*\\?\\\\\\.js\\)\\$/, + "titlePrefix": "", + }, + ] + `); +}); + +test('expands entries that only yield mixed files', async () => { + const configDir = '/configDir/'; + const list = createList( + [ + { entry: '*.@(mdx|ts)', result: ['/configDir/my-file.mdx', '/configDir/my-file.ts'] }, + { entry: '*.js', result: [] }, + ], + configDir + ); + glob.mockImplementation(createGlobMock(list)); + + await expect( + removeMDXEntries( + Object.values(list).map((e) => e.entry), + { configDir } + ) + ).resolves.toMatchInlineSnapshot(` + Array [ + Object { + "directory": ".", + "files": "**/my-file.ts", + "titlePrefix": "", + }, + Object { + "directory": ".", + "files": "*.js", + "importPathMatcher": /\\^\\\\\\.\\[\\\\\\\\/\\]\\(\\?:\\(\\?!\\\\\\.\\)\\(\\?=\\.\\)\\[\\^/\\]\\*\\?\\\\\\.js\\)\\$/, + "titlePrefix": "", + }, + ] + `); +}); + +test('passes titlePrefix', async () => { + const configDir = '/configDir/'; + const list = createList( + [ + { + entry: { files: '*.@(mdx|ts)', directory: '.', titlePrefix: 'foo' }, + result: ['/configDir/my-file.mdx', '/configDir/my-file.ts'], + }, + ], + configDir + ); + glob.mockImplementation(createGlobMock(list)); + + await expect( + removeMDXEntries( + Object.values(list).map((e) => e.entry), + { configDir } + ) + ).resolves.toMatchInlineSnapshot(` + Array [ + Object { + "directory": ".", + "files": "**/my-file.ts", + "titlePrefix": "foo", + }, + ] + `); +}); + +test('expands to multiple entries', async () => { + const configDir = '/configDir/'; + const list = createList( + [ + { + entry: { files: '*.@(mdx|ts)', directory: '.', titlePrefix: 'foo' }, + result: [ + '/configDir/my-file.mdx', + '/configDir/my-file1.ts', + '/configDir/my-file2.ts', + '/configDir/my-file3.ts', + ], + }, + ], + configDir + ); + glob.mockImplementation(createGlobMock(list)); + + await expect( + removeMDXEntries( + Object.values(list).map((e) => e.entry), + { configDir } + ) + ).resolves.toMatchInlineSnapshot(` + Array [ + Object { + "directory": ".", + "files": "**/my-file1.ts", + "titlePrefix": "foo", + }, + Object { + "directory": ".", + "files": "**/my-file2.ts", + "titlePrefix": "foo", + }, + Object { + "directory": ".", + "files": "**/my-file3.ts", + "titlePrefix": "foo", + }, + ] + `); +}); diff --git a/code/lib/core-server/src/utils/remove-mdx-entries.ts b/code/lib/core-server/src/utils/remove-mdx-entries.ts new file mode 100644 index 00000000000..0efc7923baa --- /dev/null +++ b/code/lib/core-server/src/utils/remove-mdx-entries.ts @@ -0,0 +1,54 @@ +import type { Options, StoriesEntry } from '@storybook/types'; +import { normalizeStories, commonGlobOptions } from '@storybook/core-common'; +import { isAbsolute, join, relative } from 'path'; +import slash from 'slash'; +import { glob } from 'glob'; + +export async function removeMDXEntries( + entries: StoriesEntry[], + options: Pick +) { + const list = normalizeStories(entries, { + configDir: options.configDir, + workingDir: options.configDir, + defaultFilesPattern: '**/*.@(stories.@(js|jsx|mjs|ts|tsx))', + }); + const result = ( + await Promise.all( + list.map(async ({ directory, files, titlePrefix }) => { + const pattern = join(directory, files); + const absolutePattern = isAbsolute(pattern) ? pattern : join(options.configDir, pattern); + const absoluteDirectory = isAbsolute(directory) + ? directory + : join(options.configDir, directory); + + return { + files: ( + await glob(slash(absolutePattern), { + ...commonGlobOptions(absolutePattern), + follow: true, + }) + ).map((f) => relative(absoluteDirectory, f)), + directory, + titlePrefix, + }; + }) + ) + ).flatMap((expanded, i) => { + const filteredEntries = expanded.files.filter((s) => !s.endsWith('.mdx')); + // only return the filtered entries when there is something to filter + // as webpack is faster with unexpanded globs + let items = []; + if (filteredEntries.length < expanded.files.length) { + items = filteredEntries.map((k) => ({ + ...expanded, + files: `**/${k}`, + })); + } else { + items = [list[i]]; + } + + return items; + }); + return result; +} From b20a4830585a648a1e9ab622df90b9688507878d Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 20 Nov 2023 13:42:15 +0100 Subject: [PATCH 116/170] maybe fix for windows --- .../src/utils/__tests__/remove-mdx-stories.test.ts | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/code/lib/core-server/src/utils/__tests__/remove-mdx-stories.test.ts b/code/lib/core-server/src/utils/__tests__/remove-mdx-stories.test.ts index 9c40041c0dc..5438e48edfe 100644 --- a/code/lib/core-server/src/utils/__tests__/remove-mdx-stories.test.ts +++ b/code/lib/core-server/src/utils/__tests__/remove-mdx-stories.test.ts @@ -2,6 +2,7 @@ import { glob as globlOriginal } from 'glob'; import { type StoriesEntry } from '@storybook/types'; import { normalizeStoriesEntry } from '@storybook/core-common'; import { join } from 'path'; +import slash from 'slash'; import { removeMDXEntries } from '../remove-mdx-entries'; const glob = globlOriginal as jest.MockedFunction; @@ -27,13 +28,14 @@ const createGlobMock = (input: ReturnType) => { if (Array.isArray(k)) { throw new Error('do not pass an array to glob during tests'); } - const result = input[k].result || []; + const result = input[slash(k)].result || []; return result; }; }; +const configDir = '/configDir/'; + test('empty', async () => { - const configDir = '/configDir/'; const list = createList([], configDir); glob.mockImplementation(createGlobMock(list)); @@ -50,7 +52,6 @@ test('empty', async () => { }); test('minimal', async () => { - const configDir = '/configDir/'; const list = createList([{ entry: '*.js', result: [] }], configDir); glob.mockImplementation(createGlobMock(list)); @@ -72,7 +73,6 @@ test('minimal', async () => { }); test('multiple', async () => { - const configDir = '/configDir/'; const list = createList( [ { entry: '*.ts', result: [] }, @@ -106,7 +106,6 @@ test('multiple', async () => { }); test('mdx but not matching any files', async () => { - const configDir = '/configDir/'; const list = createList( [ { entry: '*.mdx', result: [] }, @@ -140,7 +139,6 @@ test('mdx but not matching any files', async () => { }); test('removes entries that only yield mdx files', async () => { - const configDir = '/configDir/'; const list = createList( [ { entry: '*.mdx', result: ['/configDir/my-file.mdx'] }, @@ -168,7 +166,6 @@ test('removes entries that only yield mdx files', async () => { }); test('expands entries that only yield mixed files', async () => { - const configDir = '/configDir/'; const list = createList( [ { entry: '*.@(mdx|ts)', result: ['/configDir/my-file.mdx', '/configDir/my-file.ts'] }, @@ -201,7 +198,6 @@ test('expands entries that only yield mixed files', async () => { }); test('passes titlePrefix', async () => { - const configDir = '/configDir/'; const list = createList( [ { @@ -230,7 +226,6 @@ test('passes titlePrefix', async () => { }); test('expands to multiple entries', async () => { - const configDir = '/configDir/'; const list = createList( [ { From d840521d78c3102f3fca5244c051886bdcaedc7d Mon Sep 17 00:00:00 2001 From: Sam Vervaeck Date: Mon, 20 Nov 2023 13:47:27 +0100 Subject: [PATCH 117/170] Fix Yarn 4 failing to install due to jscodeshift dependency issue --- code/lib/codemod/package.json | 2 +- code/lib/postinstall/package.json | 2 +- code/yarn.lock | 56 ++----------------------------- 3 files changed, 4 insertions(+), 56 deletions(-) diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index c805f990a8d..9f8c8af0dbf 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -62,7 +62,7 @@ "@types/cross-spawn": "^6.0.2", "cross-spawn": "^7.0.3", "globby": "^11.0.2", - "jscodeshift": "^0.14.0", + "jscodeshift": "^0.15.1", "lodash": "^4.17.21", "prettier": "^2.8.0", "recast": "^0.23.1" diff --git a/code/lib/postinstall/package.json b/code/lib/postinstall/package.json index a9779b34bd8..9e2a19920e0 100644 --- a/code/lib/postinstall/package.json +++ b/code/lib/postinstall/package.json @@ -47,7 +47,7 @@ "devDependencies": { "jest": "^29.7.0", "jest-specific-snapshot": "^8.0.0", - "jscodeshift": "^0.14.0", + "jscodeshift": "^0.15.1", "typescript": "~4.9.3" }, "publishConfig": { diff --git a/code/yarn.lock b/code/yarn.lock index 3999f341dbe..90e5ab5564a 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -6317,7 +6317,7 @@ __metadata: globby: "npm:^11.0.2" jest: "npm:^29.7.0" jest-specific-snapshot: "npm:^8.0.0" - jscodeshift: "npm:^0.14.0" + jscodeshift: "npm:^0.15.1" lodash: "npm:^4.17.21" mdast-util-mdx-jsx: "npm:^2.1.2" mdast-util-mdxjs-esm: "npm:^1.3.1" @@ -6922,7 +6922,7 @@ __metadata: dependencies: jest: "npm:^29.7.0" jest-specific-snapshot: "npm:^8.0.0" - jscodeshift: "npm:^0.14.0" + jscodeshift: "npm:^0.15.1" typescript: "npm:~4.9.3" languageName: unknown linkType: soft @@ -11154,15 +11154,6 @@ __metadata: languageName: node linkType: hard -"ast-types@npm:0.15.2": - version: 0.15.2 - resolution: "ast-types@npm:0.15.2" - dependencies: - tslib: "npm:^2.0.1" - checksum: 5b26e3656e9e8d1db8c8d14971d0cb88ca0138aacce72171cb4cd4555fc8dc53c07e821c568e57fe147366931708fefd25cb9d7e880d42ce9cb569947844c962 - languageName: node - linkType: hard - "ast-types@npm:^0.16.1": version: 0.16.1 resolution: "ast-types@npm:0.16.1" @@ -20127,37 +20118,6 @@ __metadata: languageName: node linkType: hard -"jscodeshift@npm:^0.14.0": - version: 0.14.0 - resolution: "jscodeshift@npm:0.14.0" - dependencies: - "@babel/core": "npm:^7.13.16" - "@babel/parser": "npm:^7.13.16" - "@babel/plugin-proposal-class-properties": "npm:^7.13.0" - "@babel/plugin-proposal-nullish-coalescing-operator": "npm:^7.13.8" - "@babel/plugin-proposal-optional-chaining": "npm:^7.13.12" - "@babel/plugin-transform-modules-commonjs": "npm:^7.13.8" - "@babel/preset-flow": "npm:^7.13.13" - "@babel/preset-typescript": "npm:^7.13.0" - "@babel/register": "npm:^7.13.16" - babel-core: "npm:^7.0.0-bridge.0" - chalk: "npm:^4.1.2" - flow-parser: "npm:0.*" - graceful-fs: "npm:^4.2.4" - micromatch: "npm:^4.0.4" - neo-async: "npm:^2.5.0" - node-dir: "npm:^0.1.17" - recast: "npm:^0.21.0" - temp: "npm:^0.8.4" - write-file-atomic: "npm:^2.3.0" - peerDependencies: - "@babel/preset-env": ^7.1.6 - bin: - jscodeshift: bin/jscodeshift.js - checksum: dab63bdb4b7e67d79634fcd3f5dc8b227146e9f68aa88700bc49c5a45b6339d05bd934a98aa53d29abd04f81237d010e7e037799471b2aab66ec7b9a7d752786 - languageName: node - linkType: hard - "jscodeshift@npm:^0.15.1": version: 0.15.1 resolution: "jscodeshift@npm:0.15.1" @@ -25954,18 +25914,6 @@ __metadata: languageName: node linkType: hard -"recast@npm:^0.21.0": - version: 0.21.5 - resolution: "recast@npm:0.21.5" - dependencies: - ast-types: "npm:0.15.2" - esprima: "npm:~4.0.0" - source-map: "npm:~0.6.1" - tslib: "npm:^2.0.1" - checksum: a45168c82195f24fa2c70293a624fece0069a2e8e8adb637f9963777735f81cb3bb62e55172db677ec3573b08b2daaf1eddd85b74da6fe0bd37c9b15eeaf94b4 - languageName: node - linkType: hard - "recast@npm:^0.23.1, recast@npm:^0.23.3": version: 0.23.4 resolution: "recast@npm:0.23.4" From f1d57e9a928eeb6afe29d32010148640227fcd74 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 20 Nov 2023 14:09:44 +0100 Subject: [PATCH 118/170] arg windows --- .../__tests__/remove-mdx-stories.test.ts | 107 ++++++++---------- 1 file changed, 47 insertions(+), 60 deletions(-) diff --git a/code/lib/core-server/src/utils/__tests__/remove-mdx-stories.test.ts b/code/lib/core-server/src/utils/__tests__/remove-mdx-stories.test.ts index 5438e48edfe..18223c63c38 100644 --- a/code/lib/core-server/src/utils/__tests__/remove-mdx-stories.test.ts +++ b/code/lib/core-server/src/utils/__tests__/remove-mdx-stories.test.ts @@ -7,16 +7,19 @@ import { removeMDXEntries } from '../remove-mdx-entries'; const glob = globlOriginal as jest.MockedFunction; +const configDir = '/configDir/'; +const workingDir = '/'; + jest.mock('glob', () => ({ glob: jest.fn() })); -const createList = (list: { entry: StoriesEntry; result: string[] }[], configDir: string) => { +const createList = (list: { entry: StoriesEntry; result: string[] }[]) => { return list.reduce>( (acc, { entry, result }) => { const { directory, files } = normalizeStoriesEntry(entry, { configDir, - workingDir: '/', + workingDir, }); - acc[join('/', directory, files)] = { result, entry }; + acc[slash(join('/', directory, files))] = { result, entry }; return acc; }, {} @@ -28,15 +31,17 @@ const createGlobMock = (input: ReturnType) => { if (Array.isArray(k)) { throw new Error('do not pass an array to glob during tests'); } - const result = input[slash(k)].result || []; - return result; + if (input[slash(k)]) { + return input[slash(k)]?.result; + } + + console.log({ k, input }); + throw new Error('can not find key in input'); }; }; -const configDir = '/configDir/'; - test('empty', async () => { - const list = createList([], configDir); + const list = createList([]); glob.mockImplementation(createGlobMock(list)); await expect(() => removeMDXEntries(Object.keys(list), { configDir })).rejects @@ -52,7 +57,7 @@ test('empty', async () => { }); test('minimal', async () => { - const list = createList([{ entry: '*.js', result: [] }], configDir); + const list = createList([{ entry: '*.js', result: [] }]); glob.mockImplementation(createGlobMock(list)); await expect( @@ -73,13 +78,10 @@ test('minimal', async () => { }); test('multiple', async () => { - const list = createList( - [ - { entry: '*.ts', result: [] }, - { entry: '*.js', result: [] }, - ], - configDir - ); + const list = createList([ + { entry: '*.ts', result: [] }, + { entry: '*.js', result: [] }, + ]); glob.mockImplementation(createGlobMock(list)); await expect( @@ -106,13 +108,10 @@ test('multiple', async () => { }); test('mdx but not matching any files', async () => { - const list = createList( - [ - { entry: '*.mdx', result: [] }, - { entry: '*.js', result: [] }, - ], - configDir - ); + const list = createList([ + { entry: '*.mdx', result: [] }, + { entry: '*.js', result: [] }, + ]); glob.mockImplementation(createGlobMock(list)); await expect( @@ -139,13 +138,10 @@ test('mdx but not matching any files', async () => { }); test('removes entries that only yield mdx files', async () => { - const list = createList( - [ - { entry: '*.mdx', result: ['/configDir/my-file.mdx'] }, - { entry: '*.js', result: [] }, - ], - configDir - ); + const list = createList([ + { entry: '*.mdx', result: ['/configDir/my-file.mdx'] }, + { entry: '*.js', result: [] }, + ]); glob.mockImplementation(createGlobMock(list)); await expect( @@ -166,13 +162,10 @@ test('removes entries that only yield mdx files', async () => { }); test('expands entries that only yield mixed files', async () => { - const list = createList( - [ - { entry: '*.@(mdx|ts)', result: ['/configDir/my-file.mdx', '/configDir/my-file.ts'] }, - { entry: '*.js', result: [] }, - ], - configDir - ); + const list = createList([ + { entry: '*.@(mdx|ts)', result: ['/configDir/my-file.mdx', '/configDir/my-file.ts'] }, + { entry: '*.js', result: [] }, + ]); glob.mockImplementation(createGlobMock(list)); await expect( @@ -198,15 +191,12 @@ test('expands entries that only yield mixed files', async () => { }); test('passes titlePrefix', async () => { - const list = createList( - [ - { - entry: { files: '*.@(mdx|ts)', directory: '.', titlePrefix: 'foo' }, - result: ['/configDir/my-file.mdx', '/configDir/my-file.ts'], - }, - ], - configDir - ); + const list = createList([ + { + entry: { files: '*.@(mdx|ts)', directory: '.', titlePrefix: 'foo' }, + result: ['/configDir/my-file.mdx', '/configDir/my-file.ts'], + }, + ]); glob.mockImplementation(createGlobMock(list)); await expect( @@ -226,20 +216,17 @@ test('passes titlePrefix', async () => { }); test('expands to multiple entries', async () => { - const list = createList( - [ - { - entry: { files: '*.@(mdx|ts)', directory: '.', titlePrefix: 'foo' }, - result: [ - '/configDir/my-file.mdx', - '/configDir/my-file1.ts', - '/configDir/my-file2.ts', - '/configDir/my-file3.ts', - ], - }, - ], - configDir - ); + const list = createList([ + { + entry: { files: '*.@(mdx|ts)', directory: '.', titlePrefix: 'foo' }, + result: [ + '/configDir/my-file.mdx', + '/configDir/my-file1.ts', + '/configDir/my-file2.ts', + '/configDir/my-file3.ts', + ], + }, + ]); glob.mockImplementation(createGlobMock(list)); await expect( From 27fd45d13b7ac7b3dd6effdf97e6965b9f4e6e64 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 20 Nov 2023 14:30:59 +0100 Subject: [PATCH 119/170] imprvoe, fix tests for windows --- .../__tests__/remove-mdx-stories.test.ts | 92 +++++++++---------- .../src/utils/remove-mdx-entries.ts | 2 +- 2 files changed, 43 insertions(+), 51 deletions(-) diff --git a/code/lib/core-server/src/utils/__tests__/remove-mdx-stories.test.ts b/code/lib/core-server/src/utils/__tests__/remove-mdx-stories.test.ts index 18223c63c38..3ad458b287a 100644 --- a/code/lib/core-server/src/utils/__tests__/remove-mdx-stories.test.ts +++ b/code/lib/core-server/src/utils/__tests__/remove-mdx-stories.test.ts @@ -35,7 +35,6 @@ const createGlobMock = (input: ReturnType) => { return input[slash(k)]?.result; } - console.log({ k, input }); throw new Error('can not find key in input'); }; }; @@ -60,17 +59,16 @@ test('minimal', async () => { const list = createList([{ entry: '*.js', result: [] }]); glob.mockImplementation(createGlobMock(list)); - await expect( - removeMDXEntries( - Object.values(list).map((e) => e.entry), - { configDir } - ) - ).resolves.toMatchInlineSnapshot(` + const result = await removeMDXEntries( + Object.values(list).map((e) => e.entry), + { configDir } + ); + + expect(result.map(({ importPathMatcher, ...v }) => v)).toMatchInlineSnapshot(` Array [ Object { "directory": ".", "files": "*.js", - "importPathMatcher": /\\^\\\\\\.\\[\\\\\\\\/\\]\\(\\?:\\(\\?!\\\\\\.\\)\\(\\?=\\.\\)\\[\\^/\\]\\*\\?\\\\\\.js\\)\\$/, "titlePrefix": "", }, ] @@ -84,23 +82,21 @@ test('multiple', async () => { ]); glob.mockImplementation(createGlobMock(list)); - await expect( - removeMDXEntries( - Object.values(list).map((e) => e.entry), - { configDir } - ) - ).resolves.toMatchInlineSnapshot(` + const result = await removeMDXEntries( + Object.values(list).map((e) => e.entry), + { configDir } + ); + + expect(result.map(({ importPathMatcher, ...v }) => v)).toMatchInlineSnapshot(` Array [ Object { "directory": ".", "files": "*.ts", - "importPathMatcher": /\\^\\\\\\.\\[\\\\\\\\/\\]\\(\\?:\\(\\?!\\\\\\.\\)\\(\\?=\\.\\)\\[\\^/\\]\\*\\?\\\\\\.ts\\)\\$/, "titlePrefix": "", }, Object { "directory": ".", "files": "*.js", - "importPathMatcher": /\\^\\\\\\.\\[\\\\\\\\/\\]\\(\\?:\\(\\?!\\\\\\.\\)\\(\\?=\\.\\)\\[\\^/\\]\\*\\?\\\\\\.js\\)\\$/, "titlePrefix": "", }, ] @@ -114,23 +110,21 @@ test('mdx but not matching any files', async () => { ]); glob.mockImplementation(createGlobMock(list)); - await expect( - removeMDXEntries( - Object.values(list).map((e) => e.entry), - { configDir } - ) - ).resolves.toMatchInlineSnapshot(` + const result = await removeMDXEntries( + Object.values(list).map((e) => e.entry), + { configDir } + ); + + expect(result.map(({ importPathMatcher, ...v }) => v)).toMatchInlineSnapshot(` Array [ Object { "directory": ".", "files": "*.mdx", - "importPathMatcher": /\\^\\\\\\.\\[\\\\\\\\/\\]\\(\\?:\\(\\?!\\\\\\.\\)\\(\\?=\\.\\)\\[\\^/\\]\\*\\?\\\\\\.mdx\\)\\$/, "titlePrefix": "", }, Object { "directory": ".", "files": "*.js", - "importPathMatcher": /\\^\\\\\\.\\[\\\\\\\\/\\]\\(\\?:\\(\\?!\\\\\\.\\)\\(\\?=\\.\\)\\[\\^/\\]\\*\\?\\\\\\.js\\)\\$/, "titlePrefix": "", }, ] @@ -144,17 +138,16 @@ test('removes entries that only yield mdx files', async () => { ]); glob.mockImplementation(createGlobMock(list)); - await expect( - removeMDXEntries( - Object.values(list).map((e) => e.entry), - { configDir } - ) - ).resolves.toMatchInlineSnapshot(` + const result = await removeMDXEntries( + Object.values(list).map((e) => e.entry), + { configDir } + ); + + expect(result.map(({ importPathMatcher, ...v }) => v)).toMatchInlineSnapshot(` Array [ Object { "directory": ".", "files": "*.js", - "importPathMatcher": /\\^\\\\\\.\\[\\\\\\\\/\\]\\(\\?:\\(\\?!\\\\\\.\\)\\(\\?=\\.\\)\\[\\^/\\]\\*\\?\\\\\\.js\\)\\$/, "titlePrefix": "", }, ] @@ -168,12 +161,12 @@ test('expands entries that only yield mixed files', async () => { ]); glob.mockImplementation(createGlobMock(list)); - await expect( - removeMDXEntries( - Object.values(list).map((e) => e.entry), - { configDir } - ) - ).resolves.toMatchInlineSnapshot(` + const result = await removeMDXEntries( + Object.values(list).map((e) => e.entry), + { configDir } + ); + + expect(result.map(({ importPathMatcher, ...v }) => v)).toMatchInlineSnapshot(` Array [ Object { "directory": ".", @@ -183,7 +176,6 @@ test('expands entries that only yield mixed files', async () => { Object { "directory": ".", "files": "*.js", - "importPathMatcher": /\\^\\\\\\.\\[\\\\\\\\/\\]\\(\\?:\\(\\?!\\\\\\.\\)\\(\\?=\\.\\)\\[\\^/\\]\\*\\?\\\\\\.js\\)\\$/, "titlePrefix": "", }, ] @@ -199,12 +191,12 @@ test('passes titlePrefix', async () => { ]); glob.mockImplementation(createGlobMock(list)); - await expect( - removeMDXEntries( - Object.values(list).map((e) => e.entry), - { configDir } - ) - ).resolves.toMatchInlineSnapshot(` + const result = await removeMDXEntries( + Object.values(list).map((e) => e.entry), + { configDir } + ); + + expect(result.map(({ importPathMatcher, ...v }) => v)).toMatchInlineSnapshot(` Array [ Object { "directory": ".", @@ -229,12 +221,12 @@ test('expands to multiple entries', async () => { ]); glob.mockImplementation(createGlobMock(list)); - await expect( - removeMDXEntries( - Object.values(list).map((e) => e.entry), - { configDir } - ) - ).resolves.toMatchInlineSnapshot(` + const result = await removeMDXEntries( + Object.values(list).map((e) => e.entry), + { configDir } + ); + + expect(result.map(({ importPathMatcher, ...v }) => v)).toMatchInlineSnapshot(` Array [ Object { "directory": ".", diff --git a/code/lib/core-server/src/utils/remove-mdx-entries.ts b/code/lib/core-server/src/utils/remove-mdx-entries.ts index 0efc7923baa..e53c4420e20 100644 --- a/code/lib/core-server/src/utils/remove-mdx-entries.ts +++ b/code/lib/core-server/src/utils/remove-mdx-entries.ts @@ -7,7 +7,7 @@ import { glob } from 'glob'; export async function removeMDXEntries( entries: StoriesEntry[], options: Pick -) { +): Promise[]> { const list = normalizeStories(entries, { configDir: options.configDir, workingDir: options.configDir, From 5cdee70c1a20edef996ff02161e824ef53d36783 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 20 Nov 2023 14:35:04 +0100 Subject: [PATCH 120/170] oops --- code/lib/core-server/src/utils/remove-mdx-entries.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/core-server/src/utils/remove-mdx-entries.ts b/code/lib/core-server/src/utils/remove-mdx-entries.ts index e53c4420e20..e1e763ca604 100644 --- a/code/lib/core-server/src/utils/remove-mdx-entries.ts +++ b/code/lib/core-server/src/utils/remove-mdx-entries.ts @@ -7,7 +7,7 @@ import { glob } from 'glob'; export async function removeMDXEntries( entries: StoriesEntry[], options: Pick -): Promise[]> { +): Promise> { const list = normalizeStories(entries, { configDir: options.configDir, workingDir: options.configDir, From 1e82d194d050647e7a6d43460503fbb137fffd39 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 20 Nov 2023 14:57:01 +0100 Subject: [PATCH 121/170] aaaa --- .../utils/__tests__/remove-mdx-stories.test.ts | 14 +++++++------- .../core-server/src/utils/remove-mdx-entries.ts | 15 +++++++++------ 2 files changed, 16 insertions(+), 13 deletions(-) diff --git a/code/lib/core-server/src/utils/__tests__/remove-mdx-stories.test.ts b/code/lib/core-server/src/utils/__tests__/remove-mdx-stories.test.ts index 3ad458b287a..93280240e74 100644 --- a/code/lib/core-server/src/utils/__tests__/remove-mdx-stories.test.ts +++ b/code/lib/core-server/src/utils/__tests__/remove-mdx-stories.test.ts @@ -64,7 +64,7 @@ test('minimal', async () => { { configDir } ); - expect(result.map(({ importPathMatcher, ...v }) => v)).toMatchInlineSnapshot(` + expect(result).toMatchInlineSnapshot(` Array [ Object { "directory": ".", @@ -87,7 +87,7 @@ test('multiple', async () => { { configDir } ); - expect(result.map(({ importPathMatcher, ...v }) => v)).toMatchInlineSnapshot(` + expect(result).toMatchInlineSnapshot(` Array [ Object { "directory": ".", @@ -115,7 +115,7 @@ test('mdx but not matching any files', async () => { { configDir } ); - expect(result.map(({ importPathMatcher, ...v }) => v)).toMatchInlineSnapshot(` + expect(result).toMatchInlineSnapshot(` Array [ Object { "directory": ".", @@ -143,7 +143,7 @@ test('removes entries that only yield mdx files', async () => { { configDir } ); - expect(result.map(({ importPathMatcher, ...v }) => v)).toMatchInlineSnapshot(` + expect(result).toMatchInlineSnapshot(` Array [ Object { "directory": ".", @@ -166,7 +166,7 @@ test('expands entries that only yield mixed files', async () => { { configDir } ); - expect(result.map(({ importPathMatcher, ...v }) => v)).toMatchInlineSnapshot(` + expect(result).toMatchInlineSnapshot(` Array [ Object { "directory": ".", @@ -196,7 +196,7 @@ test('passes titlePrefix', async () => { { configDir } ); - expect(result.map(({ importPathMatcher, ...v }) => v)).toMatchInlineSnapshot(` + expect(result).toMatchInlineSnapshot(` Array [ Object { "directory": ".", @@ -226,7 +226,7 @@ test('expands to multiple entries', async () => { { configDir } ); - expect(result.map(({ importPathMatcher, ...v }) => v)).toMatchInlineSnapshot(` + expect(result).toMatchInlineSnapshot(` Array [ Object { "directory": ".", diff --git a/code/lib/core-server/src/utils/remove-mdx-entries.ts b/code/lib/core-server/src/utils/remove-mdx-entries.ts index e1e763ca604..ed93c1bc8d6 100644 --- a/code/lib/core-server/src/utils/remove-mdx-entries.ts +++ b/code/lib/core-server/src/utils/remove-mdx-entries.ts @@ -7,7 +7,7 @@ import { glob } from 'glob'; export async function removeMDXEntries( entries: StoriesEntry[], options: Pick -): Promise> { +): Promise { const list = normalizeStories(entries, { configDir: options.configDir, workingDir: options.configDir, @@ -34,18 +34,21 @@ export async function removeMDXEntries( }; }) ) - ).flatMap((expanded, i) => { - const filteredEntries = expanded.files.filter((s) => !s.endsWith('.mdx')); + ).flatMap(({ directory, files, titlePrefix }, i) => { + const filteredEntries = files.filter((s) => !s.endsWith('.mdx')); // only return the filtered entries when there is something to filter // as webpack is faster with unexpanded globs let items = []; - if (filteredEntries.length < expanded.files.length) { + if (filteredEntries.length < files.length) { items = filteredEntries.map((k) => ({ - ...expanded, + directory, + titlePrefix, files: `**/${k}`, })); } else { - items = [list[i]]; + items = [ + { directory: list[i].directory, titlePrefix: list[i].titlePrefix, files: list[i].files }, + ]; } return items; From 9e3c955fec7d7b1b7edfb2478dd6fa76ac9af510 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Mon, 20 Nov 2023 14:10:16 +0000 Subject: [PATCH 122/170] Docs: Minor changes for code contribution docs --- docs/contribute/code.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/contribute/code.md b/docs/contribute/code.md index 7ce0068157b..323737cfb62 100644 --- a/docs/contribute/code.md +++ b/docs/contribute/code.md @@ -6,7 +6,7 @@ Contribute a new feature or bug fix to [Storybook's monorepo](https://github.com ## Prerequisites -- Ensure you have node version 16 installed (suggestion: v16.17.1). +- Ensure you have node version 18 installed (suggestion: v18.16.0). - Ensure if you are using Windows to use the Windows Subsystem for Linux (WSL). ## Initial setup @@ -18,7 +18,7 @@ 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. +Storybook uses the [Yarn](https://yarnpkg.com/) package manager. Use [Corepack](https://github.com/nodejs/corepack) to set up the correct version for use with Storybook. ```shell corepack enable @@ -201,7 +201,7 @@ npx storybook@next link --local /path/to/local-repro-directory -The `storybook link` command relies on [Yarn 2 linking](https://yarnpkg.com/cli/link/) under the hood. It requires your local reproduction to be using [Yarn 2](https://yarnpkg.com/) as well, which is the case if you're already enabled it with the [`storybook sandbox`](./how-to-reproduce.md) command per our contribution guidelines. The process will fail if you're trying to link a non-Yarn 2 project. +The `storybook link` command relies on [Yarn linking](https://yarnpkg.com/cli/link/) under the hood. It requires your local reproduction to be using [Yarn 2 or higher](https://yarnpkg.com/) as well, which is the case if you've already enabled it with the [`storybook sandbox`](./how-to-reproduce.md) command per our contribution guidelines. The process will fail if you're trying to link a non-Yarn 2 project. From d859e391a03d14f10ffb6a277ace48c9e6125b81 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Mon, 20 Nov 2023 14:48:36 +0000 Subject: [PATCH 123/170] Capitalize Node --- docs/contribute/code.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/contribute/code.md b/docs/contribute/code.md index 323737cfb62..1ce7726caf3 100644 --- a/docs/contribute/code.md +++ b/docs/contribute/code.md @@ -6,7 +6,7 @@ Contribute a new feature or bug fix to [Storybook's monorepo](https://github.com ## Prerequisites -- Ensure you have node version 18 installed (suggestion: v18.16.0). +- Ensure you have Node version 18 installed (suggestion: v18.16.0). - Ensure if you are using Windows to use the Windows Subsystem for Linux (WSL). ## Initial setup From a55ac767b2027eccfb68d80d945c3d7904819922 Mon Sep 17 00:00:00 2001 From: paoloricciuti Date: Mon, 20 Nov 2023 18:38:59 +0100 Subject: [PATCH 124/170] fix: svelte renderer run decorators twice --- .../svelte/templates/PreviewRender.svelte | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/code/renderers/svelte/templates/PreviewRender.svelte b/code/renderers/svelte/templates/PreviewRender.svelte index 7747cd8fcab..581aa4d78e0 100644 --- a/code/renderers/svelte/templates/PreviewRender.svelte +++ b/code/renderers/svelte/templates/PreviewRender.svelte @@ -17,8 +17,25 @@ on, } = storyFn(); + let firstTime = true; + + // the first time we don't want to call storyFn two times so we just return the values + // we already have from the previous call. If storyFn changes this function will run + // again but this time firstTime will be false + function getStoryFnValue(storyFn){ + if(firstTime){ + firstTime = false; + return { + Component, + props, + on, + } + } + return storyFn(); + } + // reactive, re-render on storyFn change - $: ({ Component, props = {}, on } = storyFn()); + $: ({ Component, props = {}, on } = getStoryFnValue(storyFn)); const eventsFromArgTypes = Object.fromEntries( Object.entries(storyContext.argTypes) From 96e093fc0f993e45fc7f29f9b6eff63cbe1e25cb Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 20 Nov 2023 19:23:18 +0100 Subject: [PATCH 125/170] Next.js: Fix import path in swc loader --- code/frameworks/nextjs/src/swc/loader.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/src/swc/loader.ts b/code/frameworks/nextjs/src/swc/loader.ts index 201bdc52e0d..687f60d8aef 100644 --- a/code/frameworks/nextjs/src/swc/loader.ts +++ b/code/frameworks/nextjs/src/swc/loader.ts @@ -6,7 +6,7 @@ import type { NextConfig } from 'next'; import path from 'path'; import type { RuleSetRule } from 'webpack'; import semver from 'semver'; -import { NextjsSWCNotSupportedError } from 'lib/core-events/src/errors/server-errors'; +import { NextjsSWCNotSupportedError } from '@storybook/core-events/server-errors'; import { getNextjsVersion } from '../utils'; export const configureSWCLoader = async ( From 4a7b7e0a98f7d3c1440a6de90b3f4f7f8032c76e Mon Sep 17 00:00:00 2001 From: paoloricciuti Date: Mon, 20 Nov 2023 20:43:18 +0100 Subject: [PATCH 126/170] add test for decorators run once --- code/e2e-tests/framework-svelte.spec.ts | 11 +++++++++++ .../stories/decorators-runs-once.stories.js | 16 ++++++++++++++++ 2 files changed, 27 insertions(+) create mode 100644 code/renderers/svelte/template/stories/decorators-runs-once.stories.js diff --git a/code/e2e-tests/framework-svelte.spec.ts b/code/e2e-tests/framework-svelte.spec.ts index a208aa982d9..2b6e447dd23 100644 --- a/code/e2e-tests/framework-svelte.spec.ts +++ b/code/e2e-tests/framework-svelte.spec.ts @@ -50,4 +50,15 @@ test.describe('Svelte', () => { const expectedSource = ''; await expect(sourceCode.textContent()).resolves.toContain(expectedSource); }); + + test('Decorators runs only once', async ({ page }) => { + const sbPage = new SbPage(page); + const lines: string[] = []; + page.on('console', (msg) => { + lines.push(msg.text()); + }); + + await sbPage.navigateToStory('stories/renderers/svelte/decorators-runs-once', 'default'); + expect(lines).toHaveLength(1); + }); }); diff --git a/code/renderers/svelte/template/stories/decorators-runs-once.stories.js b/code/renderers/svelte/template/stories/decorators-runs-once.stories.js new file mode 100644 index 00000000000..649d9f8a18b --- /dev/null +++ b/code/renderers/svelte/template/stories/decorators-runs-once.stories.js @@ -0,0 +1,16 @@ +import ButtonJavaScript from './views/ButtonJavaScript.svelte'; + +export default { + component: ButtonJavaScript, + args: { + primary: true, + }, + decorators: [ + (Story) => { + console.log('decorator'); + return Story(); + }, + ], +}; + +export const Default = {}; From 00113197e573b7c0e66786124af2165f6067d136 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Mon, 20 Nov 2023 16:29:08 -0500 Subject: [PATCH 127/170] FastBuild: Fix disabledAddons filter --- code/lib/core-common/src/presets.test.ts | 64 ++++++++++++++++++++++++ code/lib/core-common/src/presets.ts | 2 +- 2 files changed, 65 insertions(+), 1 deletion(-) diff --git a/code/lib/core-common/src/presets.test.ts b/code/lib/core-common/src/presets.test.ts index 667f1d01781..6a283f566b8 100644 --- a/code/lib/core-common/src/presets.test.ts +++ b/code/lib/core-common/src/presets.test.ts @@ -655,4 +655,68 @@ describe('loadPreset', () => { ] `); }); + + it('should filter out disabledAddons', async () => { + const loaded = await loadPreset( + { + name: '', + type: 'virtual', + framework: '@storybook/react', + presets: ['@storybook/preset-typescript'], + addons: ['@storybook/addon-docs', 'addon-bar'], + }, + 0, + { + build: { + test: { + disabledAddons: ['@storybook/addon-docs'], + }, + }, + } + ); + + // addon-docs should not be at the top level, but addon-bar and others should be. + expect(loaded).toMatchInlineSnapshot(` + Array [ + Object { + "name": "@storybook/preset-typescript", + "options": Object {}, + "preset": Object {}, + }, + Object { + "name": "@storybook/addon-interactions/preset", + "options": Object {}, + "preset": Object {}, + }, + Object { + "name": "@storybook/addon-cool", + "options": Object {}, + "preset": Object {}, + }, + Object { + "name": "addon-bar", + "options": Object {}, + "preset": Object {}, + }, + Object { + "name": Object { + "addons": Array [ + "@storybook/addon-docs", + "addon-bar", + ], + "framework": "@storybook/react", + "name": "", + "presets": Array [ + "@storybook/preset-typescript", + ], + "type": "virtual", + }, + "options": Object {}, + "preset": Object { + "framework": "@storybook/react", + }, + }, + ] + `); + }); }); diff --git a/code/lib/core-common/src/presets.ts b/code/lib/core-common/src/presets.ts index 8cc613a33b3..407ff1775d3 100644 --- a/code/lib/core-common/src/presets.ts +++ b/code/lib/core-common/src/presets.ts @@ -261,7 +261,7 @@ export async function loadPreset( // @ts-expect-error (Converted from ts-ignore) const name = i.name ? i.name : i; - return !!storybookOptions.build?.test?.disabledAddons?.find((n) => name.includes(n)); + return !storybookOptions.build?.test?.disabledAddons?.find((n) => name.includes(n)); }; } From 445b8d434c7a933dbf4cc6a5cf2d615cc9d8c940 Mon Sep 17 00:00:00 2001 From: paoloricciuti Date: Mon, 20 Nov 2023 23:10:30 +0100 Subject: [PATCH 128/170] move logic to preview.ts from SvelteDecorator --- code/frameworks/sveltekit/package.json | 2 - .../src/components/SvelteDecorator.svelte | 60 ---------------- code/frameworks/sveltekit/src/preview.ts | 68 ++++++++++++++++++- 3 files changed, 65 insertions(+), 65 deletions(-) delete mode 100644 code/frameworks/sveltekit/src/components/SvelteDecorator.svelte diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 21821fb0018..96dd7f81eda 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -29,7 +29,6 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./src/components/SvelteDecorator.svelte": "./src/components/SvelteDecorator.svelte", "./preview": { "types": "./dist/preview.d.ts", "require": "./dist/preview.js", @@ -54,7 +53,6 @@ "README.md", "*.js", "*.d.ts", - "src/components/**/*", "src/mocks/**/*" ], "scripts": { diff --git a/code/frameworks/sveltekit/src/components/SvelteDecorator.svelte b/code/frameworks/sveltekit/src/components/SvelteDecorator.svelte deleted file mode 100644 index 04654a64e3a..00000000000 --- a/code/frameworks/sveltekit/src/components/SvelteDecorator.svelte +++ /dev/null @@ -1,60 +0,0 @@ - - - diff --git a/code/frameworks/sveltekit/src/preview.ts b/code/frameworks/sveltekit/src/preview.ts index 54914221f91..50ac18b9e4d 100644 --- a/code/frameworks/sveltekit/src/preview.ts +++ b/code/frameworks/sveltekit/src/preview.ts @@ -1,7 +1,6 @@ import type { Decorator } from '@storybook/svelte'; -// eslint-disable-next-line import/no-extraneous-dependencies -import SvelteDecorator from '@storybook/sveltekit/src/components/SvelteDecorator.svelte'; +import { onMount } from 'svelte'; import { setAfterNavigateArgument } from './mocks/app/navigation'; import { setNavigating, setPage, setUpdated } from './mocks/app/stores'; @@ -11,7 +10,70 @@ export const decorators: Decorator[] = [ setUpdated(ctx.parameters?.sveltekit?.stores?.updated); setNavigating(ctx.parameters?.sveltekit?.stores?.navigating); setAfterNavigateArgument(ctx.parameters?.sveltekit?.navigation?.afterNavigate); + + onMount(() => { + const globalClickListener = (e: MouseEvent) => { + const path = e.composedPath(); + const hasLink = path.findLast((el) => el instanceof HTMLElement && el.tagName === 'A'); + if (hasLink && hasLink instanceof HTMLAnchorElement) { + const to = hasLink.getAttribute('href'); + if (ctx?.parameters?.sveltekit?.linkOverrides && to) { + Object.entries(ctx.parameters.sveltekit.linkOverrides).forEach(([link, override]) => { + if (override instanceof Function) { + const regex = new RegExp(link); + if (regex.test(to)) { + override(); + } + } + }); + } + e.preventDefault(); + } + }; + + function createListeners(baseModule: string, functions: string[]) { + const toRemove: Array<{ + eventType: string; + listener: (event: { detail: any[] }) => void; + }> = []; + functions.forEach((func) => { + if ( + ctx?.parameters?.sveltekit?.[baseModule]?.[func] && + ctx.parameters.sveltekit[baseModule][func] instanceof Function + ) { + const listener = ({ detail = [] as any[] }) => { + const args = Array.isArray(detail) ? detail : []; + ctx.parameters.sveltekit[baseModule][func](...args); + }; + const eventType = `storybook:${func}`; + toRemove.push({ eventType, listener }); + // @ts-expect-error apparently you can't add a custom listener to the window with TS + window.addEventListener(eventType, listener); + } + }); + return () => { + toRemove.forEach(({ eventType, listener }) => { + // @ts-expect-error apparently you can't remove a custom listener to the window with TS + window.removeEventListener(eventType, listener); + }); + }; + } + + const removeNavigationListeners = createListeners('navigation', [ + 'goto', + 'invalidate', + 'invalidateAll', + ]); + const removeFormsListeners = createListeners('forms', ['enhance']); + window.addEventListener('click', globalClickListener); + + return () => { + window.removeEventListener('click', globalClickListener); + removeNavigationListeners(); + removeFormsListeners(); + }; + }); + return Story(); }, - (_, ctx) => ({ Component: SvelteDecorator, props: { ctx } }), ]; From c686a26f440d44da875e9dc0e75721a65ce27f3c Mon Sep 17 00:00:00 2001 From: paoloricciuti Date: Mon, 20 Nov 2023 23:33:06 +0100 Subject: [PATCH 129/170] fix CJS to ESM --- code/frameworks/sveltekit/package.json | 5 ++++- code/frameworks/sveltekit/src/preset.ts | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 96dd7f81eda..7d76f10e7bd 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -36,7 +36,10 @@ }, "./dist/preview.js": { "types": "./dist/preview.d.ts", - "require": "./dist/preview.js", + "require": "./dist/preview.js" + }, + "./dist/preview.mjs": { + "types": "./dist/preview.d.ts", "import": "./dist/preview.mjs" }, "./preset": { diff --git a/code/frameworks/sveltekit/src/preset.ts b/code/frameworks/sveltekit/src/preset.ts index 4e765d1631c..835379149a2 100644 --- a/code/frameworks/sveltekit/src/preset.ts +++ b/code/frameworks/sveltekit/src/preset.ts @@ -15,7 +15,7 @@ export const core: PresetProperty<'core', StorybookConfig> = { }; export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entry = []) => [ ...entry, - require.resolve('@storybook/sveltekit/preview'), + join(dirname(require.resolve('@storybook/sveltekit/package.json')), 'dist/preview.mjs'), ]; export const viteFinal: NonNullable = async (config, options) => { From de04701f13b4f7538373267cc05ca3bfc7ee4411 Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Mon, 20 Nov 2023 21:16:52 -0700 Subject: [PATCH 130/170] Update help.yml - Remove `render` attribute from Additional information textarea - That property will force input into a code block, but we're asking for information that would best fit in multiple code blocks - Add `id` for debugging purposes - Attempt to fix formatting issues --- .github/DISCUSSION_TEMPLATE/help.yml | 71 +++++++++++++++------------- 1 file changed, 37 insertions(+), 34 deletions(-) diff --git a/.github/DISCUSSION_TEMPLATE/help.yml b/.github/DISCUSSION_TEMPLATE/help.yml index 5664b2b8fdb..2b74e6d0dcf 100644 --- a/.github/DISCUSSION_TEMPLATE/help.yml +++ b/.github/DISCUSSION_TEMPLATE/help.yml @@ -1,37 +1,40 @@ body: - - type: markdown - attributes: - value: | - Thanks for taking the time to start a new discussion! - - ### Before you post - Check if someone has already asked/answered your question in a previous discussion. - - ### When you're ready to post - Add labels to your discussion (e.g. React, Vue, Vite) to make it clearer for other users. +- type: markdown + id: intro + attributes: + value: | + Thanks for taking the time to start a new discussion! + + ### Before you post + Check if someone has already asked/answered your question in a previous discussion. + + ### When you're ready to post + Add labels to your discussion (e.g. React, Vue, Vite) to make it clearer for other users. - - type: textarea - attributes: - label: Summary - description: How can we help? - validations: - required: true - - - type: textarea - attributes: - label: Additional information - description: | - Share Your Storybook configuration (`main.js` or `main.ts`), your Storybook version number, any error messages, and any relevant dependencies. These help us get a clearer understanding of what might be going wrong. +- type: textarea + id: summary + attributes: + label: Summary + description: How can we help? + validations: + required: true + +- type: textarea + id: additional-info + attributes: + label: Additional information + description: | + Share Your Storybook configuration (`main.js` or `main.ts`), your Storybook version number, any error messages, and any relevant dependencies. These help us get a clearer understanding of what might be going wrong. - P.S. Please [share code as text](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks) rather than as a screenshot! It makes debugging much easier and faster. - render: js - validations: - required: false - - - type: input - attributes: - label: Create a reproduction - description: | - Help us debug by creating a minimal reproduction with [https://storybook.new](https://storybook.new). Learn more about creating a reproduction [here](https://storybook.js.org/docs/react/contribute/how-to-reproduce). - validations: - required: false + P.S. Please [share code as text](https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks) rather than as a screenshot! It makes debugging much easier and faster. + validations: + required: false + +- type: input + id: reproduction + attributes: + label: Create a reproduction + description: | + Help us debug by creating a minimal reproduction with [https://storybook.new](https://storybook.new). Learn more about creating a reproduction [here](https://storybook.js.org/docs/react/contribute/how-to-reproduce). + validations: + required: false From a6ad3528c9dc0377c8770486e7fbafff8f286763 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 20 Nov 2023 13:04:42 +0100 Subject: [PATCH 131/170] Use temp dir to init Storybook for sandbox generation --- scripts/sandbox/generate.ts | 32 ++++++++++++++++++++------------ 1 file changed, 20 insertions(+), 12 deletions(-) diff --git a/scripts/sandbox/generate.ts b/scripts/sandbox/generate.ts index 8f7ae78fb0d..ebdf88ac204 100755 --- a/scripts/sandbox/generate.ts +++ b/scripts/sandbox/generate.ts @@ -71,23 +71,31 @@ const addStorybook = async ({ }) => { const beforeDir = join(baseDir, BEFORE_DIR_NAME); const afterDir = join(baseDir, AFTER_DIR_NAME); - const tmpDir = join(baseDir, 'tmp'); - await ensureDir(tmpDir); - await emptyDir(tmpDir); + const tmpDir = directory(); - await copy(beforeDir, tmpDir); - - const packageManager = JsPackageManagerFactory.getPackageManager({}, tmpDir); - if (localRegistry) { - await withLocalRegistry(packageManager, async () => { - await packageManager.addPackageResolutions(storybookVersions); + try { + await copy(beforeDir, tmpDir); + + const packageManager = JsPackageManagerFactory.getPackageManager({}, tmpDir); + if (localRegistry) { + await withLocalRegistry(packageManager, async () => { + await packageManager.addPackageResolutions({ + ...storybookVersions, + // Yarn1 Issue: https://github.com/storybookjs/storybook/issues/22431 + jackspeak: '2.1.1', + }); + await sbInit(tmpDir, flags, debug); + }); + } else { await sbInit(tmpDir, flags, debug); - }); - } else { - await sbInit(tmpDir, flags, debug); + } + } catch (e) { + await remove(tmpDir); + throw e; } + await rename(tmpDir, afterDir); }; From 40d85f0e44f1bd3f3ee0e7fa5ba112bb4a4a1f1a Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 20 Nov 2023 13:29:15 +0100 Subject: [PATCH 132/170] Fix Next.js generation --- code/lib/cli/src/sandbox-templates.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index 7047dc138e1..e8be78844b8 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -120,7 +120,8 @@ const baseTemplates = { }, 'nextjs/default-js': { name: 'Next.js Latest (Webpack | JavaScript)', - script: 'yarn create next-app {{beforeDir}} --javascript --eslint', + script: + 'yarn create next-app {{beforeDir}} --javascript --eslint --tailwind --app --import-alias="@/*" --src-dir', expected: { framework: '@storybook/nextjs', renderer: '@storybook/react', @@ -130,7 +131,8 @@ const baseTemplates = { }, 'nextjs/default-ts': { name: 'Next.js Latest (Webpack | TypeScript)', - script: 'yarn create next-app {{beforeDir}} --typescript --eslint', + script: + 'yarn create next-app {{beforeDir}} --typescript --eslint --tailwind --app --import-alias="@/*" --src-dir', expected: { framework: '@storybook/nextjs', renderer: '@storybook/react', From 8b48f8d9de7f906e9202f2bb9084706e17f5daf1 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 20 Nov 2023 13:58:37 +0100 Subject: [PATCH 133/170] Fix Angular sandbox generation --- code/lib/cli/src/sandbox-templates.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index e8be78844b8..600a01044e5 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -303,7 +303,7 @@ const baseTemplates = { 'angular-cli/prerelease': { name: 'Angular CLI Prerelease (Webpack | TypeScript)', script: - 'npx -p @angular/cli@next ng new angular-v16 --directory {{beforeDir}} --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn', + 'npx -p @angular/cli@next ng new angular-v16 --directory {{beforeDir}} --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn --ssr', expected: { framework: '@storybook/angular', renderer: '@storybook/angular', @@ -314,7 +314,7 @@ const baseTemplates = { 'angular-cli/default-ts': { name: 'Angular CLI Latest (Webpack | TypeScript)', script: - 'npx -p @angular/cli ng new angular-latest --directory {{beforeDir}} --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn', + 'npx -p @angular/cli ng new angular-latest --directory {{beforeDir}} --routing=true --minimal=true --style=scss --strict --skip-git --skip-install --package-manager=yarn --ssr', expected: { framework: '@storybook/angular', renderer: '@storybook/angular', From 8be2ce86531fe109ccff759c55f37a138829fe7f Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 20 Nov 2023 15:13:18 +0100 Subject: [PATCH 134/170] Set parallelism to one for sandbox generation --- scripts/sandbox/generate.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/scripts/sandbox/generate.ts b/scripts/sandbox/generate.ts index ebdf88ac204..e14b8bac5f0 100755 --- a/scripts/sandbox/generate.ts +++ b/scripts/sandbox/generate.ts @@ -15,8 +15,6 @@ import { allTemplates as sandboxTemplates } from '../../code/lib/cli/src/sandbox import storybookVersions from '../../code/lib/cli/src/versions'; import { JsPackageManagerFactory } from '../../code/lib/cli/src/js-package-manager/JsPackageManagerFactory'; -import { maxConcurrentTasks } from '../utils/maxConcurrentTasks'; - // eslint-disable-next-line import/no-cycle import { localizeYarnConfigFiles, setupYarn } from './utils/yarn'; import type { GeneratorConfig } from './utils/types'; @@ -139,9 +137,9 @@ const runGenerators = async ( console.log('Debug mode enabled. Verbose logs will be printed to the console.'); } - console.log(`šŸ¤¹ā€ā™‚ļø Generating sandboxes with a concurrency of ${maxConcurrentTasks}`); + console.log(`šŸ¤¹ā€ā™‚ļø Generating sandboxes with a concurrency of ${1}`); - const limit = pLimit(maxConcurrentTasks); + const limit = pLimit(1); await Promise.all( generators.map(({ dirName, name, script, expected }) => From 2d21b392f15177933acd4e35db1b0f5acfa2725d Mon Sep 17 00:00:00 2001 From: Paolo Ricciuti Date: Tue, 21 Nov 2023 10:36:47 +0100 Subject: [PATCH 135/170] Update code/frameworks/sveltekit/README.md Co-authored-by: Jeppe Reinhold --- code/frameworks/sveltekit/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/sveltekit/README.md b/code/frameworks/sveltekit/README.md index 45ba5759237..7732078170b 100644 --- a/code/frameworks/sveltekit/README.md +++ b/code/frameworks/sveltekit/README.md @@ -128,7 +128,7 @@ Integrating with SvelteKit would not have been possible if it weren't for the fa ## How to mock -To mock a SvelteKit import you can make use of the `parameters.sveltekit` object either on the `Story`, on the `Template` or on the `Meta` +To mock a SvelteKit import you can set it on `parameters.sveltekit`: ```ts export const MyStory = { From 63b1b0ea4f3f09988e77b26ee3569cf8ed119e11 Mon Sep 17 00:00:00 2001 From: Paolo Ricciuti Date: Tue, 21 Nov 2023 10:37:03 +0100 Subject: [PATCH 136/170] Update code/frameworks/sveltekit/README.md Co-authored-by: Jeppe Reinhold --- code/frameworks/sveltekit/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/frameworks/sveltekit/README.md b/code/frameworks/sveltekit/README.md index 7732078170b..b5cfe70efbf 100644 --- a/code/frameworks/sveltekit/README.md +++ b/code/frameworks/sveltekit/README.md @@ -152,7 +152,7 @@ export const MyStory = { }; ``` -on this object you can add the name of the module you are mocking (in the example above we are mocking the `stores` module which correspond to `$app/stores`) and than pass the following kind of objects +You can add the name of the module you want to mock to `parameters.sveltekit` (in the example above we are mocking the `stores` module which correspond to `$app/stores`) and then pass the following kind of objects: | Module | Path in parameters | Kind of objects | | ----------------------------------------------- | ----------------------------------------------- | -------------------------------------------------------------------------------------------------- | From 230089a431440c61834f11a3394952a206c5e865 Mon Sep 17 00:00:00 2001 From: paoloricciuti Date: Tue, 21 Nov 2023 10:58:19 +0100 Subject: [PATCH 137/170] fix PR comments --- code/frameworks/sveltekit/README.md | 54 +++++++++---------- .../sveltekit/src/plugins/config-overrides.ts | 31 +++-------- .../src/plugins/mock-sveltekit-stores.ts | 17 ++++++ code/frameworks/sveltekit/src/preset.ts | 5 +- code/frameworks/sveltekit/src/preview.ts | 29 +++++++++- .../links.stories.js | 2 +- .../links.stories.js | 2 +- 7 files changed, 85 insertions(+), 55 deletions(-) create mode 100644 code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts diff --git a/code/frameworks/sveltekit/README.md b/code/frameworks/sveltekit/README.md index b5cfe70efbf..4bc106cbc44 100644 --- a/code/frameworks/sveltekit/README.md +++ b/code/frameworks/sveltekit/README.md @@ -100,32 +100,6 @@ yarn remove storybook-builder-vite yarn remove @storybook/builder-vite ``` -## Troubleshooting - -### Error: `ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared` when starting Storybook - -> When starting Storybook after upgrading to v7.0, it breaks with the following error: -> -> ``` -> ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared -> ``` - -You'll get this error when manually upgrading from 6.5 to 7.0. You need to remove the `svelteOptions` property in `.storybook/main.js`, as that is not supported by Storybook 7.0 + SvelteKit. The property is also not necessary anymore because the Vite and Svelte configurations are loaded automatically in Storybook 7.0. - -### Error: `Cannot read properties of undefined (reading 'disable_scroll_handling')` in preview - -> Some stories don't load, instead they show the following error in the preview: -> -> ``` -> Cannot read properties of undefined (reading 'disable_scroll_handling') -> ``` - -You'll experience this if anything in your story is importing from `$app/forms` or `$app/navigation`, which is currently not supported. To get around this, separate your component into a shallow parent component that imports what's needed and passes it to a child component via props. This way you can write stories for your child component and mock any of the necessary modules by passing props in. - -## Acknowledgements - -Integrating with SvelteKit would not have been possible if it weren't for the fantastic efforts by the Svelte core team - especially [Ben McCann](https://twitter.com/benjaminmccann) - to make integrations with the wider ecosystem possible. - ## How to mock To mock a SvelteKit import you can set it on `parameters.sveltekit`: @@ -167,4 +141,30 @@ You can add the name of the module you want to mock to `parameters.sveltekit` (i All the other functions are still exported as `noop` from the mocked modules so that your application will still work. There was no way of make them work in a customizable way. -Additionally you can pass an object to `parameter.sveltekit.linkOverrides` where the keys are regex representing a link and the values are functions. If you have an `` tag inside your code with the `href` attribute that matches one or more regex the corresponding function will be called. +Additionally you can pass an object to `parameter.sveltekit.hrefs` where the keys are regex representing a link and the values are functions. If you have an `` tag inside your code with the `href` attribute that matches one or more regex the corresponding function will be called. + +## Troubleshooting + +### Error: `ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared` when starting Storybook + +> When starting Storybook after upgrading to v7.0, it breaks with the following error: +> +> ``` +> ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared +> ``` + +You'll get this error when manually upgrading from 6.5 to 7.0. You need to remove the `svelteOptions` property in `.storybook/main.js`, as that is not supported by Storybook 7.0 + SvelteKit. The property is also not necessary anymore because the Vite and Svelte configurations are loaded automatically in Storybook 7.0. + +### Error: `Cannot read properties of undefined (reading 'disable_scroll_handling')` in preview + +> Some stories don't load, instead they show the following error in the preview: +> +> ``` +> Cannot read properties of undefined (reading 'disable_scroll_handling') +> ``` + +You'll experience this if anything in your story is importing from `$app/forms` or `$app/navigation`, which is currently not supported. To get around this, separate your component into a shallow parent component that imports what's needed and passes it to a child component via props. This way you can write stories for your child component and mock any of the necessary modules by passing props in. + +## Acknowledgements + +Integrating with SvelteKit would not have been possible if it weren't for the fantastic efforts by the Svelte core team - especially [Ben McCann](https://twitter.com/benjaminmccann) - to make integrations with the wider ecosystem possible. diff --git a/code/frameworks/sveltekit/src/plugins/config-overrides.ts b/code/frameworks/sveltekit/src/plugins/config-overrides.ts index d1dfcc09919..d132764d6e5 100644 --- a/code/frameworks/sveltekit/src/plugins/config-overrides.ts +++ b/code/frameworks/sveltekit/src/plugins/config-overrides.ts @@ -1,27 +1,12 @@ -import { resolve } from 'node:path'; -import { mergeConfig, type Plugin } from 'vite'; +import { type Plugin } from 'vite'; export function configOverrides() { - return [ - { - // SvelteKit sets SSR, we need it to be false when building - name: 'storybook:sveltekit-overrides', - apply: 'build', - config: () => { - return { build: { ssr: false } }; - }, + return { + // SvelteKit sets SSR, we need it to be false when building + name: 'storybook:sveltekit-overrides', + apply: 'build', + config: () => { + return { build: { ssr: false } }; }, - { - name: 'storybook:sveltekit-mock-stores', - enforce: 'post', - config: (config) => - mergeConfig(config, { - resolve: { - alias: { - $app: resolve(__dirname, '../src/mocks/app/'), - }, - }, - }), - }, - ] satisfies Plugin[]; + } satisfies Plugin; } diff --git a/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts b/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts new file mode 100644 index 00000000000..873ce8bf351 --- /dev/null +++ b/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts @@ -0,0 +1,17 @@ +import { resolve } from 'node:path'; +import { mergeConfig, type Plugin } from 'vite'; + +export function mockSveltekitStores() { + return { + name: 'storybook:sveltekit-mock-stores', + enforce: 'post', + config: (config) => + mergeConfig(config, { + resolve: { + alias: { + $app: resolve(__dirname, '../src/mocks/app/'), + }, + }, + }), + } satisfies Plugin; +} diff --git a/code/frameworks/sveltekit/src/preset.ts b/code/frameworks/sveltekit/src/preset.ts index 835379149a2..45cfe7d0a6d 100644 --- a/code/frameworks/sveltekit/src/preset.ts +++ b/code/frameworks/sveltekit/src/preset.ts @@ -4,6 +4,7 @@ import type { PresetProperty } from '@storybook/types'; import { withoutVitePlugins } from '@storybook/builder-vite'; import { dirname, join } from 'path'; import { configOverrides } from './plugins/config-overrides'; +import { mockSveltekitStores } from './plugins/mock-sveltekit-stores'; import { type StorybookConfig } from './types'; const getAbsolutePath = (input: I): I => @@ -29,7 +30,9 @@ export const viteFinal: NonNullable = async (confi 'vite-plugin-sveltekit-compile', 'vite-plugin-sveltekit-guard', ]) - ).concat(configOverrides()); + ) + .concat(configOverrides()) + .concat(mockSveltekitStores()); return { ...baseConfig, plugins }; }; diff --git a/code/frameworks/sveltekit/src/preview.ts b/code/frameworks/sveltekit/src/preview.ts index 50ac18b9e4d..959d5cf4125 100644 --- a/code/frameworks/sveltekit/src/preview.ts +++ b/code/frameworks/sveltekit/src/preview.ts @@ -13,15 +13,19 @@ export const decorators: Decorator[] = [ onMount(() => { const globalClickListener = (e: MouseEvent) => { + // we add a global click event listener and we check if there's a link in the composedPath const path = e.composedPath(); const hasLink = path.findLast((el) => el instanceof HTMLElement && el.tagName === 'A'); if (hasLink && hasLink instanceof HTMLAnchorElement) { + // if it has a link we get the href of the link and we check over every provided href using the + // key as a regex const to = hasLink.getAttribute('href'); - if (ctx?.parameters?.sveltekit?.linkOverrides && to) { - Object.entries(ctx.parameters.sveltekit.linkOverrides).forEach(([link, override]) => { + if (ctx?.parameters?.sveltekit?.hrefs && to) { + Object.entries(ctx.parameters.sveltekit.hrefs).forEach(([link, override]) => { if (override instanceof Function) { const regex = new RegExp(link); if (regex.test(to)) { + // if the regex pass we call the function the user provided override(); } } @@ -31,27 +35,48 @@ export const decorators: Decorator[] = [ } }; + /** + * Function that create and add listeners for the event that are emitted by + * the mocked functions. The event name is based on the function name + * + * eg. storybook:goto, storybook:invalidateAll + * @param baseModule the base module where the function lives (navigation|forms) + * @param functions the list of functions in that module that emit events + * @returns a function to remove all the listener added + */ function createListeners(baseModule: string, functions: string[]) { + // the array of every added listener, we can use this in the return function + // to clean them const toRemove: Array<{ eventType: string; listener: (event: { detail: any[] }) => void; }> = []; functions.forEach((func) => { + // we loop over every function and check if the user actually passed + // a function in sveltekit[baseModule][func] eg. sveltekit.navigation.goto if ( ctx?.parameters?.sveltekit?.[baseModule]?.[func] && ctx.parameters.sveltekit[baseModule][func] instanceof Function ) { + // we create the listener that will just get the detail array from the custom element + // and call the user provided function spreading this args in...this will basically call + // the function that the user provide with the same arguments the function is invoked to + + // eg. if it calls goto("/my-route") inside the component the function sveltekit.navigation.goto + // it provided to storybook will be called with "/my-route" const listener = ({ detail = [] as any[] }) => { const args = Array.isArray(detail) ? detail : []; ctx.parameters.sveltekit[baseModule][func](...args); }; const eventType = `storybook:${func}`; toRemove.push({ eventType, listener }); + // add the listener to window // @ts-expect-error apparently you can't add a custom listener to the window with TS window.addEventListener(eventType, listener); } }); return () => { + // loop over every listener added and remove them toRemove.forEach(({ eventType, listener }) => { // @ts-expect-error apparently you can't remove a custom listener to the window with TS window.removeEventListener(eventType, listener); diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/links.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/links.stories.js index c293245fc69..e0fe18674d7 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/links.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/links.stories.js @@ -18,7 +18,7 @@ export const Link = { }, parameters: { sveltekit: { - linkOverrides: { + hrefs: { '/storybook': link, }, }, diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/links.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/links.stories.js index c293245fc69..e0fe18674d7 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/links.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/links.stories.js @@ -18,7 +18,7 @@ export const Link = { }, parameters: { sveltekit: { - linkOverrides: { + hrefs: { '/storybook': link, }, }, From 1a5bcd7c5791da456c205cd7b9e924aa56adee84 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Tue, 21 Nov 2023 15:04:26 +0000 Subject: [PATCH 138/170] Docs: Minor cleanup --- code/presets/create-react-app/README.md | 2 +- docs/snippets/common/storybook-preview-sort-function.ts.mdx | 1 + docs/writing-tests/test-runner.md | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/code/presets/create-react-app/README.md b/code/presets/create-react-app/README.md index c20a9d2e767..de48890d4c8 100644 --- a/code/presets/create-react-app/README.md +++ b/code/presets/create-react-app/README.md @@ -6,7 +6,7 @@ This preset is designed to use alongside [`@storybook/react`](https://github.com ## Compatibility -This version (4.x) of `@storybook/preset-create-react-app` is compatibly with Create React App version 5 and above. Earlier versions are compatible with earlier version of the preset. +From version 4.0.0 onwards, the `@storybook/preset-create-react-app` is compatible with Create React App version 5 and later. If you're using an earlier version of Create React App, you can still utilize the preset's previous versions. ## Basic usage diff --git a/docs/snippets/common/storybook-preview-sort-function.ts.mdx b/docs/snippets/common/storybook-preview-sort-function.ts.mdx index 3deb961445b..a0054ba7b8c 100644 --- a/docs/snippets/common/storybook-preview-sort-function.ts.mdx +++ b/docs/snippets/common/storybook-preview-sort-function.ts.mdx @@ -7,6 +7,7 @@ import { Preview } from '@storybook/your-framework'; const preview: Preview = { parameters: { options: { + // The `a` and `b` arguments in this function have a type of `import('@storybook/types').IndexEntry`. Remember that the function is executed in a JavaScript environment, so use JSDoc for IntelliSense to introspect it. storySort: (a, b) => a.id === b.id ? 0 : a.id.localeCompare(b.id, undefined, { numeric: true }), }, diff --git a/docs/writing-tests/test-runner.md b/docs/writing-tests/test-runner.md index cf9c7d3b851..531fa1d789c 100644 --- a/docs/writing-tests/test-runner.md +++ b/docs/writing-tests/test-runner.md @@ -144,7 +144,7 @@ You can also configure the test-runner to run tests on a CI environment. Documen ### Run against deployed Storybooks via Github Actions deployment -If you're publishing your Storybook with services such as [Vercel](https://vercel.com/) or [Netlify](https://www.netlify.com/), they emit a `deployment_status` event in GitHub Actions. You can use it and set the `deployment_status.target_url` as the `TARGET_URL` environment variable. Here's how: +If you're publishing your Storybook with services such as [Vercel](https://vercel.com/) or [Netlify](https://docs.netlify.com/site-deploys/notifications/#github-commit-statuses), they emit a `deployment_status` event in GitHub Actions. You can use it and set the `deployment_status.target_url` as the `TARGET_URL` environment variable. Here's how: From b542502225ea72f3447679012e73c08cffe53bdc Mon Sep 17 00:00:00 2001 From: Paolo Ricciuti Date: Tue, 21 Nov 2023 16:39:20 +0100 Subject: [PATCH 139/170] Update code/frameworks/sveltekit/src/mocks/app/stores.ts Co-authored-by: Jeppe Reinhold --- code/frameworks/sveltekit/src/mocks/app/stores.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/code/frameworks/sveltekit/src/mocks/app/stores.ts b/code/frameworks/sveltekit/src/mocks/app/stores.ts index 56c9babaf93..5444455ec02 100644 --- a/code/frameworks/sveltekit/src/mocks/app/stores.ts +++ b/code/frameworks/sveltekit/src/mocks/app/stores.ts @@ -19,9 +19,7 @@ export const [page, setPage] = createMockedStore('page-ctx'); export const [navigating, setNavigating] = createMockedStore('navigating-ctx'); const [updated, setUpdated] = createMockedStore('updated-ctx'); -Object.defineProperty(updated, 'check', { - value: () => {}, -}); +updated.check = () => {}; export { updated, setUpdated }; From 9de928d0b343f001528d5c268ff737276e5dde2a Mon Sep 17 00:00:00 2001 From: paoloricciuti Date: Tue, 21 Nov 2023 17:21:17 +0100 Subject: [PATCH 140/170] better regex handling of links + add experiemental --- code/frameworks/sveltekit/README.md | 28 +++++------ .../sveltekit/src/mocks/app/stores.ts | 2 +- code/frameworks/sveltekit/src/preview.ts | 50 ++++++++++++------- .../forms.stories.js | 2 +- .../links.stories.js | 12 +++-- .../navigation.stories.js | 8 +-- .../stores.stories.js | 14 +++--- .../forms.stories.js | 2 +- .../links.stories.js | 12 +++-- .../navigation.stories.js | 8 +-- .../stores.stories.js | 14 +++--- 11 files changed, 90 insertions(+), 62 deletions(-) diff --git a/code/frameworks/sveltekit/README.md b/code/frameworks/sveltekit/README.md index 4bc106cbc44..edfad87b57b 100644 --- a/code/frameworks/sveltekit/README.md +++ b/code/frameworks/sveltekit/README.md @@ -102,12 +102,12 @@ yarn remove @storybook/builder-vite ## How to mock -To mock a SvelteKit import you can set it on `parameters.sveltekit`: +To mock a SvelteKit import you can set it on `parameters.sveltekit_experimental`: ```ts export const MyStory = { parameters: { - sveltekit: { + sveltekit_experimental: { stores: { page: { data: { @@ -126,22 +126,22 @@ export const MyStory = { }; ``` -You can add the name of the module you want to mock to `parameters.sveltekit` (in the example above we are mocking the `stores` module which correspond to `$app/stores`) and then pass the following kind of objects: +You can add the name of the module you want to mock to `parameters.sveltekit_experimental` (in the example above we are mocking the `stores` module which correspond to `$app/stores`) and then pass the following kind of objects: -| Module | Path in parameters | Kind of objects | -| ----------------------------------------------- | ----------------------------------------------- | -------------------------------------------------------------------------------------------------- | -| import { page } from "$app/stores" | `parameters.sveltekit.stores.page` | A Partial of the page store | -| import { navigating } from "$app/stores" | `parameters.sveltekit.stores.navigating` | A Partial of the navigating store | -| import { updated } from "$app/stores" | `parameters.sveltekit.stores.updated` | A boolean representing the value of updated (you can also access `check()` which will be a noop) | -| import { goto } from "$app/navigation" | `parameters.sveltekit.navigation.goto` | A callback that will be called whenever goto is called | -| import { invalidate } from "$app/navigation" | `parameters.sveltekit.navigation.invalidate` | A callback that will be called whenever invalidate is called | -| import { invalidateAll } from "$app/navigation" | `parameters.sveltekit.navigation.invalidateAll` | A callback that will be called whenever invalidateAll is called | -| import { afterNavigate } from "$app/navigation" | `parameters.sveltekit.navigation.afterNavigate` | An object that will be passed to the afterNavigate function (which will be invoked onMount) called | -| import { enhance } from "$app/forms" | `parameters.sveltekit.forms.enhance` | A callback that will called when a form with `use:enhance` is submitted | +| Module | Path in parameters | Kind of objects | +| ----------------------------------------------- | ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | +| import { page } from "$app/stores" | `parameters.sveltekit_experimental.stores.page` | A Partial of the page store | +| import { navigating } from "$app/stores" | `parameters.sveltekit_experimental.stores.navigating` | A Partial of the navigating store | +| import { updated } from "$app/stores" | `parameters.sveltekit_experimental.stores.updated` | A boolean representing the value of updated (you can also access `check()` which will be a noop) | +| import { goto } from "$app/navigation" | `parameters.sveltekit_experimental.navigation.goto` | A callback that will be called whenever goto is called | +| import { invalidate } from "$app/navigation" | `parameters.sveltekit_experimental.navigation.invalidate` | A callback that will be called whenever invalidate is called | +| import { invalidateAll } from "$app/navigation" | `parameters.sveltekit_experimental.navigation.invalidateAll` | A callback that will be called whenever invalidateAll is called | +| import { afterNavigate } from "$app/navigation" | `parameters.sveltekit_experimental.navigation.afterNavigate` | An object that will be passed to the afterNavigate function (which will be invoked onMount) called | +| import { enhance } from "$app/forms" | `parameters.sveltekit_experimental.forms.enhance` | A callback that will called when a form with `use:enhance` is submitted | All the other functions are still exported as `noop` from the mocked modules so that your application will still work. There was no way of make them work in a customizable way. -Additionally you can pass an object to `parameter.sveltekit.hrefs` where the keys are regex representing a link and the values are functions. If you have an `` tag inside your code with the `href` attribute that matches one or more regex the corresponding function will be called. +Additionally you can pass an object to `parameter.sveltekit_experimental.hrefs` where the keys are strings representing a link and the values are objects typed as `{ callback: () => void, asRegex?: boolean }`. If you have an `` tag inside your code with the `href` attribute that matches one or more links (treaded as regex based on the `asRegex` property) the corresponding `callback` will be called. ## Troubleshooting diff --git a/code/frameworks/sveltekit/src/mocks/app/stores.ts b/code/frameworks/sveltekit/src/mocks/app/stores.ts index 5444455ec02..5f47acb1df6 100644 --- a/code/frameworks/sveltekit/src/mocks/app/stores.ts +++ b/code/frameworks/sveltekit/src/mocks/app/stores.ts @@ -19,7 +19,7 @@ export const [page, setPage] = createMockedStore('page-ctx'); export const [navigating, setNavigating] = createMockedStore('navigating-ctx'); const [updated, setUpdated] = createMockedStore('updated-ctx'); -updated.check = () => {}; +(updated as any).check = () => {}; export { updated, setUpdated }; diff --git a/code/frameworks/sveltekit/src/preview.ts b/code/frameworks/sveltekit/src/preview.ts index 959d5cf4125..b277822470b 100644 --- a/code/frameworks/sveltekit/src/preview.ts +++ b/code/frameworks/sveltekit/src/preview.ts @@ -6,10 +6,10 @@ import { setNavigating, setPage, setUpdated } from './mocks/app/stores'; export const decorators: Decorator[] = [ (Story, ctx) => { - setPage(ctx.parameters?.sveltekit?.stores?.page); - setUpdated(ctx.parameters?.sveltekit?.stores?.updated); - setNavigating(ctx.parameters?.sveltekit?.stores?.navigating); - setAfterNavigateArgument(ctx.parameters?.sveltekit?.navigation?.afterNavigate); + setPage(ctx.parameters?.sveltekit_experimental?.stores?.page); + setUpdated(ctx.parameters?.sveltekit_experimental?.stores?.updated); + setNavigating(ctx.parameters?.sveltekit_experimental?.stores?.navigating); + setAfterNavigateArgument(ctx.parameters?.sveltekit_experimental?.navigation?.afterNavigate); onMount(() => { const globalClickListener = (e: MouseEvent) => { @@ -20,16 +20,32 @@ export const decorators: Decorator[] = [ // if it has a link we get the href of the link and we check over every provided href using the // key as a regex const to = hasLink.getAttribute('href'); - if (ctx?.parameters?.sveltekit?.hrefs && to) { - Object.entries(ctx.parameters.sveltekit.hrefs).forEach(([link, override]) => { - if (override instanceof Function) { - const regex = new RegExp(link); - if (regex.test(to)) { - // if the regex pass we call the function the user provided - override(); + if (ctx?.parameters?.sveltekit_experimental?.hrefs && to) { + Object.entries(ctx.parameters.sveltekit_experimental.hrefs).forEach( + ([link, override]) => { + if ( + override && + typeof override === 'object' && + 'callback' in override && + override.callback instanceof Function + ) { + const isRegex = + 'asRegex' in override && + typeof override.asRegex === 'boolean' && + override.asRegex; + let shoudlRunCallback = false; + if (isRegex) { + const regex = new RegExp(link); + shoudlRunCallback = regex.test(to); + } else { + shoudlRunCallback = to === link; + } + if (shoudlRunCallback) { + override.callback(); + } } } - }); + ); } e.preventDefault(); } @@ -53,20 +69,20 @@ export const decorators: Decorator[] = [ }> = []; functions.forEach((func) => { // we loop over every function and check if the user actually passed - // a function in sveltekit[baseModule][func] eg. sveltekit.navigation.goto + // a function in sveltekit_experimental[baseModule][func] eg. sveltekit_experimental.navigation.goto if ( - ctx?.parameters?.sveltekit?.[baseModule]?.[func] && - ctx.parameters.sveltekit[baseModule][func] instanceof Function + ctx?.parameters?.sveltekit_experimental?.[baseModule]?.[func] && + ctx.parameters.sveltekit_experimental[baseModule][func] instanceof Function ) { // we create the listener that will just get the detail array from the custom element // and call the user provided function spreading this args in...this will basically call // the function that the user provide with the same arguments the function is invoked to - // eg. if it calls goto("/my-route") inside the component the function sveltekit.navigation.goto + // eg. if it calls goto("/my-route") inside the component the function sveltekit_experimental.navigation.goto // it provided to storybook will be called with "/my-route" const listener = ({ detail = [] as any[] }) => { const args = Array.isArray(detail) ? detail : []; - ctx.parameters.sveltekit[baseModule][func](...args); + ctx.parameters.sveltekit_experimental[baseModule][func](...args); }; const eventType = `storybook:${func}`; toRemove.push({ eventType, listener }); diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/forms.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/forms.stories.js index fadda8554ac..f56d644e52b 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/forms.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/forms.stories.js @@ -17,7 +17,7 @@ export const Enhance = { expect(enhance).toHaveBeenCalled(); }, parameters: { - sveltekit: { + sveltekit_experimental: { forms: { enhance, }, diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/links.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/links.stories.js index e0fe18674d7..c2f651617ae 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/links.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/links.stories.js @@ -12,12 +12,18 @@ const link = fn(); export const Link = { async play({ canvasElement }) { const canvas = within(canvasElement); - const button = canvas.getByText('Storybook'); - button.click(); + const a = canvas.getByText('Storybook'); + // eslint-disable-next-line no-undef + const oldUrl = window.location.toString(); + a.click(); + // eslint-disable-next-line no-undef + const newUrl = window.location.toString(); + expect(newUrl).toBe(oldUrl); + console.log({ newUrl, oldUrl }); expect(link).toHaveBeenCalled(); }, parameters: { - sveltekit: { + sveltekit_experimental: { hrefs: { '/storybook': link, }, diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/navigation.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/navigation.stories.js index 30fc67fda1b..4033123cc5d 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/navigation.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/navigation.stories.js @@ -17,7 +17,7 @@ export const Goto = { expect(goto).toHaveBeenCalledWith('/storybook'); }, parameters: { - sveltekit: { + sveltekit_experimental: { navigation: { goto, }, @@ -35,7 +35,7 @@ export const Invalidate = { expect(invalidate).toHaveBeenCalledWith('/storybook'); }, parameters: { - sveltekit: { + sveltekit_experimental: { navigation: { invalidate, }, @@ -53,7 +53,7 @@ export const InvalidateAll = { expect(invalidateAll).toHaveBeenCalledWith(); }, parameters: { - sveltekit: { + sveltekit_experimental: { navigation: { invalidateAll, }, @@ -71,7 +71,7 @@ export const AfterNavigate = { afterNavigateFn, }, parameters: { - sveltekit: { + sveltekit_experimental: { navigation: { afterNavigate: { test: 'passed', diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/stores.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/stores.stories.js index 9ad83fe1bd8..633295b9ed0 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/stores.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/stores.stories.js @@ -10,7 +10,7 @@ export const AllUndefined = {}; export const PageStore = { parameters: { - sveltekit: { + sveltekit_experimental: { stores: { page: { data: { @@ -24,7 +24,7 @@ export const PageStore = { export const NavigatingStore = { parameters: { - sveltekit: { + sveltekit_experimental: { stores: { navigating: { route: { @@ -38,7 +38,7 @@ export const NavigatingStore = { export const UpdatedStore = { parameters: { - sveltekit: { + sveltekit_experimental: { stores: { updated: true, }, @@ -48,7 +48,7 @@ export const UpdatedStore = { export const PageAndNavigatingStore = { parameters: { - sveltekit: { + sveltekit_experimental: { stores: { page: { data: { @@ -67,7 +67,7 @@ export const PageAndNavigatingStore = { export const PageAndUpdatedStore = { parameters: { - sveltekit: { + sveltekit_experimental: { stores: { page: { data: { @@ -82,7 +82,7 @@ export const PageAndUpdatedStore = { export const NavigatingAndUpdatedStore = { parameters: { - sveltekit: { + sveltekit_experimental: { stores: { navigating: { route: { @@ -97,7 +97,7 @@ export const NavigatingAndUpdatedStore = { export const AllThreeStores = { parameters: { - sveltekit: { + sveltekit_experimental: { stores: { page: { data: { diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/forms.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/forms.stories.js index fadda8554ac..f56d644e52b 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/forms.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/forms.stories.js @@ -17,7 +17,7 @@ export const Enhance = { expect(enhance).toHaveBeenCalled(); }, parameters: { - sveltekit: { + sveltekit_experimental: { forms: { enhance, }, diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/links.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/links.stories.js index e0fe18674d7..c2f651617ae 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/links.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/links.stories.js @@ -12,12 +12,18 @@ const link = fn(); export const Link = { async play({ canvasElement }) { const canvas = within(canvasElement); - const button = canvas.getByText('Storybook'); - button.click(); + const a = canvas.getByText('Storybook'); + // eslint-disable-next-line no-undef + const oldUrl = window.location.toString(); + a.click(); + // eslint-disable-next-line no-undef + const newUrl = window.location.toString(); + expect(newUrl).toBe(oldUrl); + console.log({ newUrl, oldUrl }); expect(link).toHaveBeenCalled(); }, parameters: { - sveltekit: { + sveltekit_experimental: { hrefs: { '/storybook': link, }, diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/navigation.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/navigation.stories.js index 30fc67fda1b..4033123cc5d 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/navigation.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/navigation.stories.js @@ -17,7 +17,7 @@ export const Goto = { expect(goto).toHaveBeenCalledWith('/storybook'); }, parameters: { - sveltekit: { + sveltekit_experimental: { navigation: { goto, }, @@ -35,7 +35,7 @@ export const Invalidate = { expect(invalidate).toHaveBeenCalledWith('/storybook'); }, parameters: { - sveltekit: { + sveltekit_experimental: { navigation: { invalidate, }, @@ -53,7 +53,7 @@ export const InvalidateAll = { expect(invalidateAll).toHaveBeenCalledWith(); }, parameters: { - sveltekit: { + sveltekit_experimental: { navigation: { invalidateAll, }, @@ -71,7 +71,7 @@ export const AfterNavigate = { afterNavigateFn, }, parameters: { - sveltekit: { + sveltekit_experimental: { navigation: { afterNavigate: { test: 'passed', diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/stores.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/stores.stories.js index 9ad83fe1bd8..633295b9ed0 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/stores.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/stores.stories.js @@ -10,7 +10,7 @@ export const AllUndefined = {}; export const PageStore = { parameters: { - sveltekit: { + sveltekit_experimental: { stores: { page: { data: { @@ -24,7 +24,7 @@ export const PageStore = { export const NavigatingStore = { parameters: { - sveltekit: { + sveltekit_experimental: { stores: { navigating: { route: { @@ -38,7 +38,7 @@ export const NavigatingStore = { export const UpdatedStore = { parameters: { - sveltekit: { + sveltekit_experimental: { stores: { updated: true, }, @@ -48,7 +48,7 @@ export const UpdatedStore = { export const PageAndNavigatingStore = { parameters: { - sveltekit: { + sveltekit_experimental: { stores: { page: { data: { @@ -67,7 +67,7 @@ export const PageAndNavigatingStore = { export const PageAndUpdatedStore = { parameters: { - sveltekit: { + sveltekit_experimental: { stores: { page: { data: { @@ -82,7 +82,7 @@ export const PageAndUpdatedStore = { export const NavigatingAndUpdatedStore = { parameters: { - sveltekit: { + sveltekit_experimental: { stores: { navigating: { route: { @@ -97,7 +97,7 @@ export const NavigatingAndUpdatedStore = { export const AllThreeStores = { parameters: { - sveltekit: { + sveltekit_experimental: { stores: { page: { data: { From 25e92049d833720ac7d0c1f4ec4696c642c47e65 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Tue, 21 Nov 2023 15:29:09 -0500 Subject: [PATCH 141/170] Fix @vitejs/plugin-react version in top-level package.json --- code/package.json | 2 +- code/yarn.lock | 32 +++----------------------------- 2 files changed, 4 insertions(+), 30 deletions(-) diff --git a/code/package.json b/code/package.json index 9c486f75ab6..a98045536f6 100644 --- a/code/package.json +++ b/code/package.json @@ -212,7 +212,7 @@ "@typescript-eslint/eslint-plugin": "^5.45.0", "@typescript-eslint/experimental-utils": "^5.45.0", "@typescript-eslint/parser": "^5.45.0", - "@vitejs/plugin-react": "^2.1.0", + "@vitejs/plugin-react": "^3.0.1", "babel-eslint": "^10.1.0", "babel-loader": "^9.1.2", "chromatic": "7.1.0", diff --git a/code/yarn.lock b/code/yarn.lock index df84273184c..d2928cb17c0 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -1687,7 +1687,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-react-jsx-development@npm:^7.16.7, @babel/plugin-transform-react-jsx-development@npm:^7.18.6, @babel/plugin-transform-react-jsx-development@npm:^7.22.5": +"@babel/plugin-transform-react-jsx-development@npm:^7.16.7, @babel/plugin-transform-react-jsx-development@npm:^7.22.5": version: 7.22.5 resolution: "@babel/plugin-transform-react-jsx-development@npm:7.22.5" dependencies: @@ -1720,7 +1720,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-transform-react-jsx@npm:^7.14.9, @babel/plugin-transform-react-jsx@npm:^7.19.0, @babel/plugin-transform-react-jsx@npm:^7.22.15, @babel/plugin-transform-react-jsx@npm:^7.22.5": +"@babel/plugin-transform-react-jsx@npm:^7.14.9, @babel/plugin-transform-react-jsx@npm:^7.22.15, @babel/plugin-transform-react-jsx@npm:^7.22.5": version: 7.22.15 resolution: "@babel/plugin-transform-react-jsx@npm:7.22.15" dependencies: @@ -7455,7 +7455,7 @@ __metadata: "@typescript-eslint/eslint-plugin": "npm:^5.45.0" "@typescript-eslint/experimental-utils": "npm:^5.45.0" "@typescript-eslint/parser": "npm:^5.45.0" - "@vitejs/plugin-react": "npm:^2.1.0" + "@vitejs/plugin-react": "npm:^3.0.1" babel-eslint: "npm:^10.1.0" babel-loader: "npm:^9.1.2" chromatic: "npm:7.1.0" @@ -9758,23 +9758,6 @@ __metadata: languageName: node linkType: hard -"@vitejs/plugin-react@npm:^2.1.0": - version: 2.2.0 - resolution: "@vitejs/plugin-react@npm:2.2.0" - dependencies: - "@babel/core": "npm:^7.19.6" - "@babel/plugin-transform-react-jsx": "npm:^7.19.0" - "@babel/plugin-transform-react-jsx-development": "npm:^7.18.6" - "@babel/plugin-transform-react-jsx-self": "npm:^7.18.6" - "@babel/plugin-transform-react-jsx-source": "npm:^7.19.6" - magic-string: "npm:^0.26.7" - react-refresh: "npm:^0.14.0" - peerDependencies: - vite: ^3.0.0 - checksum: 85fe5c740fbe8aa5dd4c3516a02a937dff0e2b0858cfa7cf8a69b998b7d05e08c296a087fde66f9171367f5c9d10d6e4bc026df1fa1e2ec528f49e7eaabeeae1 - languageName: node - linkType: hard - "@vitejs/plugin-react@npm:^3.0.1": version: 3.1.0 resolution: "@vitejs/plugin-react@npm:3.1.0" @@ -21226,15 +21209,6 @@ __metadata: languageName: node linkType: hard -"magic-string@npm:^0.26.7": - version: 0.26.7 - resolution: "magic-string@npm:0.26.7" - dependencies: - sourcemap-codec: "npm:^1.4.8" - checksum: 950035b344fe2a8163668980bc4a215a0b225086e6e22100fd947e7647053c6ba6b4f11a04de83a97a276526ccb602ef53b173725dbb1971fb146cff5a5e14f6 - languageName: node - linkType: hard - "magic-string@npm:^0.27.0": version: 0.27.0 resolution: "magic-string@npm:0.27.0" From e66f93afe3438a3674ab7fecf5da1c39b581da0f Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Tue, 21 Nov 2023 15:31:22 -0500 Subject: [PATCH 142/170] Update @vitejs/plugin-react resolution workaround --- scripts/utils/yarn.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/utils/yarn.ts b/scripts/utils/yarn.ts index fcefed46ade..66459b2a938 100644 --- a/scripts/utils/yarn.ts +++ b/scripts/utils/yarn.ts @@ -67,7 +67,7 @@ export const addWorkaroundResolutions = async ({ cwd, dryRun }: YarnOptions) => const packageJson = await readJSON(packageJsonPath); packageJson.resolutions = { ...packageJson.resolutions, - '@vitejs/plugin-react': '^4.0.0', // due to conflicting version in @storybook/vite-react + '@vitejs/plugin-react': '4.2.0', // due to conflicting version in @storybook/vite-react }; await writeJSON(packageJsonPath, packageJson, { spaces: 2 }); }; From 60f20ce5ea76f95a7a9488c04d7bbdc63e1edb07 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 21 Nov 2023 10:00:25 +0100 Subject: [PATCH 143/170] debug CI failure by not writing into logfile --- code/lib/cli/src/js-package-manager/NPMProxy.ts | 2 +- code/lib/cli/src/js-package-manager/PNPMProxy.ts | 2 +- code/lib/cli/src/js-package-manager/Yarn1Proxy.ts | 2 +- code/lib/cli/src/js-package-manager/Yarn2Proxy.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/code/lib/cli/src/js-package-manager/NPMProxy.ts b/code/lib/cli/src/js-package-manager/NPMProxy.ts index 1613bac9bb5..da6a83acec8 100644 --- a/code/lib/cli/src/js-package-manager/NPMProxy.ts +++ b/code/lib/cli/src/js-package-manager/NPMProxy.ts @@ -184,7 +184,7 @@ export class NPMProxy extends JsPackageManager { await this.executeCommand({ command: 'npm', args: ['install', ...args, ...this.getInstallArgs()], - stdio: ['ignore', logStream, logStream], + stdio: process.env.CI ? 'inherit' : ['ignore', logStream, logStream], }); } catch (err) { const stdout = await readLogFile(); diff --git a/code/lib/cli/src/js-package-manager/PNPMProxy.ts b/code/lib/cli/src/js-package-manager/PNPMProxy.ts index 57fb2ae9b07..33571c0e4dd 100644 --- a/code/lib/cli/src/js-package-manager/PNPMProxy.ts +++ b/code/lib/cli/src/js-package-manager/PNPMProxy.ts @@ -195,7 +195,7 @@ export class PNPMProxy extends JsPackageManager { await this.executeCommand({ command: 'pnpm', args: ['add', ...args, ...this.getInstallArgs()], - stdio: ['ignore', logStream, logStream], + stdio: process.env.CI ? 'inherit' : ['ignore', logStream, logStream], }); } catch (err) { const stdout = await readLogFile(); diff --git a/code/lib/cli/src/js-package-manager/Yarn1Proxy.ts b/code/lib/cli/src/js-package-manager/Yarn1Proxy.ts index 8d24e3676f4..2dd3251ead6 100644 --- a/code/lib/cli/src/js-package-manager/Yarn1Proxy.ts +++ b/code/lib/cli/src/js-package-manager/Yarn1Proxy.ts @@ -134,7 +134,7 @@ export class Yarn1Proxy extends JsPackageManager { await this.executeCommand({ command: 'yarn', args: ['add', ...this.getInstallArgs(), ...args], - stdio: ['ignore', logStream, logStream], + stdio: process.env.CI ? 'inherit' : ['ignore', logStream, logStream], }); } catch (err) { const stdout = await readLogFile(); diff --git a/code/lib/cli/src/js-package-manager/Yarn2Proxy.ts b/code/lib/cli/src/js-package-manager/Yarn2Proxy.ts index ebf7928d8ae..b1780c47440 100644 --- a/code/lib/cli/src/js-package-manager/Yarn2Proxy.ts +++ b/code/lib/cli/src/js-package-manager/Yarn2Proxy.ts @@ -210,7 +210,7 @@ export class Yarn2Proxy extends JsPackageManager { await this.executeCommand({ command: 'yarn', args: ['add', ...this.getInstallArgs(), ...args], - stdio: ['ignore', logStream, logStream], + stdio: process.env.CI ? 'inherit' : ['ignore', logStream, logStream], }); } catch (err) { const stdout = await readLogFile(); From 73e7bc55a76d6aebe9bd0619b736b6c71669560d Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Tue, 21 Nov 2023 16:13:54 -0500 Subject: [PATCH 144/170] Add resolutions for fallback vite plugins in "no-link" mode --- scripts/utils/yarn.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/scripts/utils/yarn.ts b/scripts/utils/yarn.ts index 66459b2a938..c807708b7a5 100644 --- a/scripts/utils/yarn.ts +++ b/scripts/utils/yarn.ts @@ -27,6 +27,11 @@ export const addPackageResolutions = async ({ cwd, dryRun }: YarnOptions) => { playwright: '1.36.0', 'playwright-core': '1.36.0', '@playwright/test': '1.36.0', + + // Due to support of older vite versions + '@vitejs/plugin-react': '4.2.0', + '@sveltejs/vite-plugin-svelte': '3.0.1', + '@vitejs/plugin-vue': '4.5.0', }; await writeJSON(packageJsonPath, packageJson, { spaces: 2 }); }; From 34a449dc88427c2c668067218dd7622f6a85e561 Mon Sep 17 00:00:00 2001 From: Ian VanSchooten Date: Tue, 21 Nov 2023 17:21:58 -0500 Subject: [PATCH 145/170] Only apply workarounds for sandboxes that need it --- scripts/tasks/sandbox-parts.ts | 19 +++++++++++++++++++ scripts/utils/yarn.ts | 10 ++++------ 2 files changed, 23 insertions(+), 6 deletions(-) diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index 81c137200e8..45cc2039ef0 100644 --- a/scripts/tasks/sandbox-parts.ts +++ b/scripts/tasks/sandbox-parts.ts @@ -93,6 +93,25 @@ export const install: Task['run'] = async ({ sandboxDir }, { link, dryRun, debug await addPackageResolutions({ cwd, dryRun, debug }); await configureYarn2ForVerdaccio({ cwd, dryRun, debug }); + // Add vite plugin workarounds for frameworks that need it + // (to support vite 5 without peer dep errors) + if ( + [ + 'bench-react-vite-default-ts', + 'bench-react-vite-default-ts-nodocs', + 'bench-react-vite-default-ts-test-build', + 'internal-ssv6-vite', + 'react-vite-default-js', + 'react-vite-default-ts', + 'svelte-vite-default-js', + 'svelte-vite-default-ts', + 'vue3-vite-default-js', + 'vue3-vite-default-ts', + ].includes(sandboxDir.split(sep).at(-1)) + ) { + await addWorkaroundResolutions({ cwd, dryRun, debug }); + } + await exec( 'yarn install', { cwd }, diff --git a/scripts/utils/yarn.ts b/scripts/utils/yarn.ts index c807708b7a5..19f87d1c018 100644 --- a/scripts/utils/yarn.ts +++ b/scripts/utils/yarn.ts @@ -27,11 +27,6 @@ export const addPackageResolutions = async ({ cwd, dryRun }: YarnOptions) => { playwright: '1.36.0', 'playwright-core': '1.36.0', '@playwright/test': '1.36.0', - - // Due to support of older vite versions - '@vitejs/plugin-react': '4.2.0', - '@sveltejs/vite-plugin-svelte': '3.0.1', - '@vitejs/plugin-vue': '4.5.0', }; await writeJSON(packageJsonPath, packageJson, { spaces: 2 }); }; @@ -72,7 +67,10 @@ export const addWorkaroundResolutions = async ({ cwd, dryRun }: YarnOptions) => const packageJson = await readJSON(packageJsonPath); packageJson.resolutions = { ...packageJson.resolutions, - '@vitejs/plugin-react': '4.2.0', // due to conflicting version in @storybook/vite-react + // Due to our support of older vite versions + '@vitejs/plugin-react': '4.2.0', + '@sveltejs/vite-plugin-svelte': '3.0.1', + '@vitejs/plugin-vue': '4.5.0', }; await writeJSON(packageJsonPath, packageJson, { spaces: 2 }); }; From f57a6b857896c1e0d7b08e6f5a2ad9200b2f057b Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Wed, 22 Nov 2023 00:31:09 +0100 Subject: [PATCH 146/170] add actions as default behavior, cleanup decorator --- code/frameworks/sveltekit/README.md | 55 +++++++-- code/frameworks/sveltekit/package.json | 11 +- code/frameworks/sveltekit/src/preview.ts | 114 +++++++++++------- .../Hrefs.svelte | 8 ++ .../Links.svelte | 1 - .../forms.stories.js | 2 +- .../hrefs.stories.js | 53 ++++++++ .../links.stories.js | 32 ----- .../navigation.stories.js | 2 +- .../stores.stories.js | 2 +- .../Hrefs.svelte | 8 ++ .../Links.svelte | 1 - .../forms.stories.js | 2 +- .../hrefs.stories.js | 53 ++++++++ .../links.stories.js | 32 ----- .../navigation.stories.js | 2 +- .../stores.stories.js | 2 +- code/yarn.lock | 1 + 18 files changed, 245 insertions(+), 136 deletions(-) create mode 100644 code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Hrefs.svelte delete mode 100644 code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Links.svelte create mode 100644 code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/hrefs.stories.js delete mode 100644 code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/links.stories.js create mode 100644 code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Hrefs.svelte delete mode 100644 code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Links.svelte create mode 100644 code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/hrefs.stories.js delete mode 100644 code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/links.stories.js diff --git a/code/frameworks/sveltekit/README.md b/code/frameworks/sveltekit/README.md index edfad87b57b..d9242efcdbf 100644 --- a/code/frameworks/sveltekit/README.md +++ b/code/frameworks/sveltekit/README.md @@ -13,6 +13,8 @@ Check out our [Frameworks API](https://storybook.js.org/blog/framework-api/) ann - [In a project with Storybook](#in-a-project-with-storybook) - [Automatic migration](#automatic-migration) - [Manual migration](#manual-migration) +- [How to mock](#how-to-mock) + - [Mocking links](#mocking-links) - [Troubleshooting](#troubleshooting) - [Error: `ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared` when starting Storybook](#error-err-syntaxerror-identifier-__esbuild_register_import_meta_url__-has-already-been-declared-when-starting-storybook) - [Error: `Cannot read properties of undefined (reading 'disable_scroll_handling')` in preview](#error-cannot-read-properties-of-undefined-reading-disable_scroll_handling-in-preview) @@ -128,20 +130,48 @@ export const MyStory = { You can add the name of the module you want to mock to `parameters.sveltekit_experimental` (in the example above we are mocking the `stores` module which correspond to `$app/stores`) and then pass the following kind of objects: -| Module | Path in parameters | Kind of objects | -| ----------------------------------------------- | ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | -| import { page } from "$app/stores" | `parameters.sveltekit_experimental.stores.page` | A Partial of the page store | -| import { navigating } from "$app/stores" | `parameters.sveltekit_experimental.stores.navigating` | A Partial of the navigating store | -| import { updated } from "$app/stores" | `parameters.sveltekit_experimental.stores.updated` | A boolean representing the value of updated (you can also access `check()` which will be a noop) | -| import { goto } from "$app/navigation" | `parameters.sveltekit_experimental.navigation.goto` | A callback that will be called whenever goto is called | -| import { invalidate } from "$app/navigation" | `parameters.sveltekit_experimental.navigation.invalidate` | A callback that will be called whenever invalidate is called | -| import { invalidateAll } from "$app/navigation" | `parameters.sveltekit_experimental.navigation.invalidateAll` | A callback that will be called whenever invalidateAll is called | -| import { afterNavigate } from "$app/navigation" | `parameters.sveltekit_experimental.navigation.afterNavigate` | An object that will be passed to the afterNavigate function (which will be invoked onMount) called | -| import { enhance } from "$app/forms" | `parameters.sveltekit_experimental.forms.enhance` | A callback that will called when a form with `use:enhance` is submitted | +| Module | Path in parameters | Kind of objects | +| ------------------------------------------------- | ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | +| `import { page } from "$app/stores"` | `parameters.sveltekit_experimental.stores.page` | A Partial of the page store | +| `import { navigating } from "$app/stores"` | `parameters.sveltekit_experimental.stores.navigating` | A Partial of the navigating store | +| `import { updated } from "$app/stores"` | `parameters.sveltekit_experimental.stores.updated` | A boolean representing the value of updated (you can also access `check()` which will be a noop) | +| `import { goto } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.goto` | A callback that will be called whenever goto is called | +| `import { invalidate } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.invalidate` | A callback that will be called whenever invalidate is called | +| `import { invalidateAll } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.invalidateAll` | A callback that will be called whenever invalidateAll is called | +| `import { afterNavigate } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.afterNavigate` | An object that will be passed to the afterNavigate function (which will be invoked onMount) called | +| `import { enhance } from "$app/forms"` | `parameters.sveltekit_experimental.forms.enhance` | A callback that will called when a form with `use:enhance` is submitted | -All the other functions are still exported as `noop` from the mocked modules so that your application will still work. There was no way of make them work in a customizable way. +All the other functions are still exported as `noop` from the mocked modules so that your application will still work. -Additionally you can pass an object to `parameter.sveltekit_experimental.hrefs` where the keys are strings representing a link and the values are objects typed as `{ callback: () => void, asRegex?: boolean }`. If you have an `` tag inside your code with the `href` attribute that matches one or more links (treaded as regex based on the `asRegex` property) the corresponding `callback` will be called. +### Mocking links + +The default link-handling behavior (ie. clicking an `` tag with an `href` attribute) is to log an action to the Actions panel. + +You can override this by setting an object on `parameter.sveltekit_experimental.hrefs`, where the keys are strings representing an href and the values are objects typed as `{ callback: (href, event) => void, asRegex?: boolean }`. + +If you have an `` tag inside your code with the `href` attribute that matches one or more of the links defined (treated as regex based on the `asRegex` property) the corresponding `callback` will be called. + +Example: + +```ts +export const MyStory = { + parameters: { + sveltekit_experimental: { + hrefs: { + '/basic-href': (to, event) => { + console.log(to, event); + }, + '/root.*': { + callback: (to, event) => { + console.log(to, event); + }, + asRegex: true, + }, + }, + }, + }, +}; +``` ## Troubleshooting @@ -168,3 +198,4 @@ You'll experience this if anything in your story is importing from `$app/forms` ## Acknowledgements Integrating with SvelteKit would not have been possible if it weren't for the fantastic efforts by the Svelte core team - especially [Ben McCann](https://twitter.com/benjaminmccann) - to make integrations with the wider ecosystem possible. +A big thank you also goes out to [Paolo Ricciuti](https://twitter.com/PaoloRicciuti) for improving the mocking capabilities. diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 7d76f10e7bd..a6550677ab2 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -29,17 +29,7 @@ "require": "./dist/index.js", "import": "./dist/index.mjs" }, - "./preview": { - "types": "./dist/preview.d.ts", - "require": "./dist/preview.js", - "import": "./dist/preview.mjs" - }, - "./dist/preview.js": { - "types": "./dist/preview.d.ts", - "require": "./dist/preview.js" - }, "./dist/preview.mjs": { - "types": "./dist/preview.d.ts", "import": "./dist/preview.mjs" }, "./preset": { @@ -63,6 +53,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { + "@storybook/addon-actions": "workspace:*", "@storybook/builder-vite": "workspace:*", "@storybook/svelte": "workspace:*", "@storybook/svelte-vite": "workspace:*" diff --git a/code/frameworks/sveltekit/src/preview.ts b/code/frameworks/sveltekit/src/preview.ts index b277822470b..23512ace57d 100644 --- a/code/frameworks/sveltekit/src/preview.ts +++ b/code/frameworks/sveltekit/src/preview.ts @@ -1,53 +1,84 @@ import type { Decorator } from '@storybook/svelte'; - +import { action } from '@storybook/addon-actions'; import { onMount } from 'svelte'; +import type { enhance } from './mocks/app/forms'; +import type { goto, invalidate, invalidateAll, afterNavigate } from './mocks/app/navigation'; import { setAfterNavigateArgument } from './mocks/app/navigation'; import { setNavigating, setPage, setUpdated } from './mocks/app/stores'; +type NormalizedHrefConfig = { + callback: (to: string, event: Event) => void; + asRegex?: boolean; +}; + +type HrefConfig = NormalizedHrefConfig | NormalizedHrefConfig['callback']; + +type SvelteKitParameters = Partial<{ + hrefs: Record; + stores: { + page: Record; + navigating: boolean; + updated: boolean; + }; + navigation: { + goto: typeof goto; + invalidate: typeof invalidate; + invalidateAll: typeof invalidateAll; + afterNavigate: typeof afterNavigate; + }; + forms: { + enhance: typeof enhance; + }; +}>; + +const normalizeHrefConfig = (hrefConfig: HrefConfig): NormalizedHrefConfig => { + if (typeof hrefConfig === 'function') { + return { callback: hrefConfig, asRegex: false }; + } + return hrefConfig; +}; + export const decorators: Decorator[] = [ (Story, ctx) => { - setPage(ctx.parameters?.sveltekit_experimental?.stores?.page); - setUpdated(ctx.parameters?.sveltekit_experimental?.stores?.updated); - setNavigating(ctx.parameters?.sveltekit_experimental?.stores?.navigating); - setAfterNavigateArgument(ctx.parameters?.sveltekit_experimental?.navigation?.afterNavigate); + const svelteKitParameters: SvelteKitParameters = ctx.parameters?.sveltekit_experimental ?? {}; + setPage(svelteKitParameters?.stores?.page); + setNavigating(svelteKitParameters?.stores?.navigating); + setUpdated(svelteKitParameters?.stores?.updated); + setAfterNavigateArgument(svelteKitParameters?.navigation?.afterNavigate); onMount(() => { const globalClickListener = (e: MouseEvent) => { // we add a global click event listener and we check if there's a link in the composedPath const path = e.composedPath(); - const hasLink = path.findLast((el) => el instanceof HTMLElement && el.tagName === 'A'); - if (hasLink && hasLink instanceof HTMLAnchorElement) { - // if it has a link we get the href of the link and we check over every provided href using the - // key as a regex - const to = hasLink.getAttribute('href'); - if (ctx?.parameters?.sveltekit_experimental?.hrefs && to) { - Object.entries(ctx.parameters.sveltekit_experimental.hrefs).forEach( - ([link, override]) => { - if ( - override && - typeof override === 'object' && - 'callback' in override && - override.callback instanceof Function - ) { - const isRegex = - 'asRegex' in override && - typeof override.asRegex === 'boolean' && - override.asRegex; - let shoudlRunCallback = false; - if (isRegex) { - const regex = new RegExp(link); - shoudlRunCallback = regex.test(to); - } else { - shoudlRunCallback = to === link; - } - if (shoudlRunCallback) { - override.callback(); - } - } - } - ); + const element = path.findLast((el) => el instanceof HTMLElement && el.tagName === 'A'); + if (element && element instanceof HTMLAnchorElement) { + // if the element is an a-tag we get the href of the element + // and compare it to the hrefs-parameter set by the user + const to = element.getAttribute('href'); + if (!to) { + return; } e.preventDefault(); + const defaultActionCallback = () => action('navigate')(to, e); + if (!svelteKitParameters.hrefs) { + defaultActionCallback(); + return; + } + + let callDefaultCallback = true; + // we loop over every href set by the user and check if the href matches + // if it does we call the callback provided by the user and disable the default callback + Object.entries(svelteKitParameters.hrefs).forEach(([href, hrefConfig]) => { + const { callback, asRegex } = normalizeHrefConfig(hrefConfig); + const isMatch = asRegex ? new RegExp(href).test(to) : to === href; + if (isMatch) { + callDefaultCallback = false; + callback?.(to, e); + } + }); + if (callDefaultCallback) { + defaultActionCallback(); + } } }; @@ -60,7 +91,7 @@ export const decorators: Decorator[] = [ * @param functions the list of functions in that module that emit events * @returns a function to remove all the listener added */ - function createListeners(baseModule: string, functions: string[]) { + function createListeners(baseModule: keyof SvelteKitParameters, functions: string[]) { // the array of every added listener, we can use this in the return function // to clean them const toRemove: Array<{ @@ -71,8 +102,8 @@ export const decorators: Decorator[] = [ // we loop over every function and check if the user actually passed // a function in sveltekit_experimental[baseModule][func] eg. sveltekit_experimental.navigation.goto if ( - ctx?.parameters?.sveltekit_experimental?.[baseModule]?.[func] && - ctx.parameters.sveltekit_experimental[baseModule][func] instanceof Function + (svelteKitParameters as any)[baseModule]?.[func] && + (svelteKitParameters as any)[baseModule][func] instanceof Function ) { // we create the listener that will just get the detail array from the custom element // and call the user provided function spreading this args in...this will basically call @@ -82,13 +113,12 @@ export const decorators: Decorator[] = [ // it provided to storybook will be called with "/my-route" const listener = ({ detail = [] as any[] }) => { const args = Array.isArray(detail) ? detail : []; - ctx.parameters.sveltekit_experimental[baseModule][func](...args); + (svelteKitParameters as any)[baseModule][func](...args); }; const eventType = `storybook:${func}`; toRemove.push({ eventType, listener }); // add the listener to window - // @ts-expect-error apparently you can't add a custom listener to the window with TS - window.addEventListener(eventType, listener); + (window.addEventListener as any)(eventType, listener); } }); return () => { diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Hrefs.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Hrefs.svelte new file mode 100644 index 00000000000..4e7d69e0e05 --- /dev/null +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Hrefs.svelte @@ -0,0 +1,8 @@ + diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Links.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Links.svelte deleted file mode 100644 index 3470b6b0e6f..00000000000 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/Links.svelte +++ /dev/null @@ -1 +0,0 @@ -Storybook \ No newline at end of file diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/forms.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/forms.stories.js index f56d644e52b..72b584baef7 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/forms.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/forms.stories.js @@ -2,7 +2,7 @@ import { expect, fn, within } from '@storybook/test'; import Forms from './Forms.svelte'; export default { - title: 'stories/sveltekit/modules/Forms', + title: 'stories/sveltekit/modules/forms', component: Forms, tags: ['autodocs'], }; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/hrefs.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/hrefs.stories.js new file mode 100644 index 00000000000..f1cbf497353 --- /dev/null +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/hrefs.stories.js @@ -0,0 +1,53 @@ +import { expect, fn, within } from '@storybook/test'; +import Hrefs from './Hrefs.svelte'; + +export default { + title: 'stories/sveltekit/modules/hrefs', + component: Hrefs, + tags: ['autodocs'], +}; + +export const DefaultActions = { + async play({ canvasElement }) { + const canvas = within(canvasElement); + // eslint-disable-next-line no-undef + const initialUrl = window.location.toString(); + + const basicHref = canvas.getByText('/basic-href'); + basicHref.click(); + + const complexHref = canvas.getByText( + '/deep/nested/link?with=true&multiple-params=200#and-an-id' + ); + complexHref.click(); + + // eslint-disable-next-line no-undef + const finalUrl = window.location.toString(); + expect(finalUrl).toBe(initialUrl); + }, +}; + +const basicStringMatch = fn(); +const noMatch = fn(); +const exactStringMatch = fn(); +const regexMatch = fn(); + +export const Callbacks = { + parameters: { + sveltekit_experimental: { + hrefs: { + '/basic-href': basicStringMatch, + '/basic': noMatch, + '/deep/nested/link?with=true&multiple-params=200#and-an-id': exactStringMatch, + 'nested/link\\?with': { callback: regexMatch, asRegex: true }, + }, + }, + }, + play: async (ctx) => { + await DefaultActions.play(ctx); + expect(basicStringMatch).toHaveBeenCalledTimes(1); + expect(noMatch).not.toHaveBeenCalled(); + expect(exactStringMatch).toHaveBeenCalledTimes(1); + expect(regexMatch).toHaveBeenCalledTimes(1); + }, +}; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/links.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/links.stories.js deleted file mode 100644 index c2f651617ae..00000000000 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/links.stories.js +++ /dev/null @@ -1,32 +0,0 @@ -import { expect, fn, within } from '@storybook/test'; -import Links from './Links.svelte'; - -export default { - title: 'stories/sveltekit/modules/Links', - component: Links, - tags: ['autodocs'], -}; - -const link = fn(); - -export const Link = { - async play({ canvasElement }) { - const canvas = within(canvasElement); - const a = canvas.getByText('Storybook'); - // eslint-disable-next-line no-undef - const oldUrl = window.location.toString(); - a.click(); - // eslint-disable-next-line no-undef - const newUrl = window.location.toString(); - expect(newUrl).toBe(oldUrl); - console.log({ newUrl, oldUrl }); - expect(link).toHaveBeenCalled(); - }, - parameters: { - sveltekit_experimental: { - hrefs: { - '/storybook': link, - }, - }, - }, -}; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/navigation.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/navigation.stories.js index 4033123cc5d..529997126f7 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/navigation.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/navigation.stories.js @@ -2,7 +2,7 @@ import { expect, fn, within } from '@storybook/test'; import Navigation from './Navigation.svelte'; export default { - title: 'stories/sveltekit/modules/Navigation', + title: 'stories/sveltekit/modules/navigation', component: Navigation, tags: ['autodocs'], }; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/stores.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/stores.stories.js index 633295b9ed0..7f7401cf8be 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/stores.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-js/stores.stories.js @@ -1,7 +1,7 @@ import Stores from './Stores.svelte'; export default { - title: 'stories/sveltekit/modules/Stores', + title: 'stories/sveltekit/modules/stores', component: Stores, tags: ['autodocs'], }; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Hrefs.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Hrefs.svelte new file mode 100644 index 00000000000..4e7d69e0e05 --- /dev/null +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Hrefs.svelte @@ -0,0 +1,8 @@ + diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Links.svelte b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Links.svelte deleted file mode 100644 index 3470b6b0e6f..00000000000 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/Links.svelte +++ /dev/null @@ -1 +0,0 @@ -Storybook \ No newline at end of file diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/forms.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/forms.stories.js index f56d644e52b..72b584baef7 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/forms.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/forms.stories.js @@ -2,7 +2,7 @@ import { expect, fn, within } from '@storybook/test'; import Forms from './Forms.svelte'; export default { - title: 'stories/sveltekit/modules/Forms', + title: 'stories/sveltekit/modules/forms', component: Forms, tags: ['autodocs'], }; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/hrefs.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/hrefs.stories.js new file mode 100644 index 00000000000..f1cbf497353 --- /dev/null +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/hrefs.stories.js @@ -0,0 +1,53 @@ +import { expect, fn, within } from '@storybook/test'; +import Hrefs from './Hrefs.svelte'; + +export default { + title: 'stories/sveltekit/modules/hrefs', + component: Hrefs, + tags: ['autodocs'], +}; + +export const DefaultActions = { + async play({ canvasElement }) { + const canvas = within(canvasElement); + // eslint-disable-next-line no-undef + const initialUrl = window.location.toString(); + + const basicHref = canvas.getByText('/basic-href'); + basicHref.click(); + + const complexHref = canvas.getByText( + '/deep/nested/link?with=true&multiple-params=200#and-an-id' + ); + complexHref.click(); + + // eslint-disable-next-line no-undef + const finalUrl = window.location.toString(); + expect(finalUrl).toBe(initialUrl); + }, +}; + +const basicStringMatch = fn(); +const noMatch = fn(); +const exactStringMatch = fn(); +const regexMatch = fn(); + +export const Callbacks = { + parameters: { + sveltekit_experimental: { + hrefs: { + '/basic-href': basicStringMatch, + '/basic': noMatch, + '/deep/nested/link?with=true&multiple-params=200#and-an-id': exactStringMatch, + 'nested/link\\?with': { callback: regexMatch, asRegex: true }, + }, + }, + }, + play: async (ctx) => { + await DefaultActions.play(ctx); + expect(basicStringMatch).toHaveBeenCalledTimes(1); + expect(noMatch).not.toHaveBeenCalled(); + expect(exactStringMatch).toHaveBeenCalledTimes(1); + expect(regexMatch).toHaveBeenCalledTimes(1); + }, +}; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/links.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/links.stories.js deleted file mode 100644 index c2f651617ae..00000000000 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/links.stories.js +++ /dev/null @@ -1,32 +0,0 @@ -import { expect, fn, within } from '@storybook/test'; -import Links from './Links.svelte'; - -export default { - title: 'stories/sveltekit/modules/Links', - component: Links, - tags: ['autodocs'], -}; - -const link = fn(); - -export const Link = { - async play({ canvasElement }) { - const canvas = within(canvasElement); - const a = canvas.getByText('Storybook'); - // eslint-disable-next-line no-undef - const oldUrl = window.location.toString(); - a.click(); - // eslint-disable-next-line no-undef - const newUrl = window.location.toString(); - expect(newUrl).toBe(oldUrl); - console.log({ newUrl, oldUrl }); - expect(link).toHaveBeenCalled(); - }, - parameters: { - sveltekit_experimental: { - hrefs: { - '/storybook': link, - }, - }, - }, -}; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/navigation.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/navigation.stories.js index 4033123cc5d..529997126f7 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/navigation.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/navigation.stories.js @@ -2,7 +2,7 @@ import { expect, fn, within } from '@storybook/test'; import Navigation from './Navigation.svelte'; export default { - title: 'stories/sveltekit/modules/Navigation', + title: 'stories/sveltekit/modules/navigation', component: Navigation, tags: ['autodocs'], }; diff --git a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/stores.stories.js b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/stores.stories.js index 633295b9ed0..7f7401cf8be 100644 --- a/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/stores.stories.js +++ b/code/frameworks/sveltekit/template/stories_svelte-kit-skeleton-ts/stores.stories.js @@ -1,7 +1,7 @@ import Stores from './Stores.svelte'; export default { - title: 'stories/sveltekit/modules/Stores', + title: 'stories/sveltekit/modules/stores', component: Stores, tags: ['autodocs'], }; diff --git a/code/yarn.lock b/code/yarn.lock index df84273184c..15310ab55bf 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -7659,6 +7659,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/sveltekit@workspace:frameworks/sveltekit" dependencies: + "@storybook/addon-actions": "workspace:*" "@storybook/builder-vite": "workspace:*" "@storybook/svelte": "workspace:*" "@storybook/svelte-vite": "workspace:*" From da7725614166ab033ff3d4b4edc6ca433807c3b7 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Wed, 22 Nov 2023 00:48:23 +0100 Subject: [PATCH 147/170] e2e test for default sveltekit actions --- code/e2e-tests/framework-svelte.spec.ts | 39 +++++++++++++++++++++---- 1 file changed, 33 insertions(+), 6 deletions(-) diff --git a/code/e2e-tests/framework-svelte.spec.ts b/code/e2e-tests/framework-svelte.spec.ts index a208aa982d9..bd6c833b609 100644 --- a/code/e2e-tests/framework-svelte.spec.ts +++ b/code/e2e-tests/framework-svelte.spec.ts @@ -1,12 +1,16 @@ /* eslint-disable jest/no-disabled-tests */ import { test, expect } from '@playwright/test'; import process from 'process'; -import dedent from 'ts-dedent'; import { SbPage } from './util'; const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:6006'; const templateName = process.env.STORYBOOK_TEMPLATE_NAME; +test.beforeEach(async ({ page }) => { + await page.goto(storybookUrl); + await new SbPage(page).waitUntilLoaded(); +}); + test.describe('Svelte', () => { test.skip( // eslint-disable-next-line jest/valid-title @@ -14,11 +18,6 @@ test.describe('Svelte', () => { 'Only run this test on Svelte' ); - test.beforeEach(async ({ page }) => { - await page.goto(storybookUrl); - await new SbPage(page).waitUntilLoaded(); - }); - test('JS story has auto-generated args table', async ({ page }) => { const sbPage = new SbPage(page); @@ -51,3 +50,31 @@ test.describe('Svelte', () => { await expect(sourceCode.textContent()).resolves.toContain(expectedSource); }); }); + +test.describe('SvelteKit', () => { + test.skip( + // eslint-disable-next-line jest/valid-title + !templateName?.includes('svelte-kit'), + 'Only run this test on SvelteKit' + ); + + test('Links are logged in Actions panel', async ({ page }) => { + const sbPage = new SbPage(page); + + await sbPage.navigateToStory('stories/sveltekit/modules/hrefs', 'default-actions'); + const root = sbPage.previewRoot(); + const link = root.locator('a', { hasText: 'Link to /basic-href' }); + await link.click(); + + await sbPage.viewAddonPanel('Actions'); + const basicLogItem = await page.locator('#storybook-panel-root #panel-tab-content', { + hasText: `/basic-href`, + }); + + await expect(basicLogItem).toBeVisible(); + const complexLogItem = await page.locator('#storybook-panel-root #panel-tab-content', { + hasText: `/deep/nested`, + }); + await expect(complexLogItem).toBeVisible(); + }); +}); From 47842083780e70c98f8431c4395ebb1b5d37b5bc Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Wed, 22 Nov 2023 00:56:05 +0100 Subject: [PATCH 148/170] fix decorator e2e test in dev --- code/e2e-tests/framework-svelte.spec.ts | 5 ++++- .../svelte/template/stories/decorators-runs-once.stories.js | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/code/e2e-tests/framework-svelte.spec.ts b/code/e2e-tests/framework-svelte.spec.ts index 321a1840631..ceffacc525d 100644 --- a/code/e2e-tests/framework-svelte.spec.ts +++ b/code/e2e-tests/framework-svelte.spec.ts @@ -54,7 +54,10 @@ test.describe('Svelte', () => { const sbPage = new SbPage(page); const lines: string[] = []; page.on('console', (msg) => { - lines.push(msg.text()); + const text = msg.text(); + if (text === 'decorator called') { + lines.push(text); + } }); await sbPage.navigateToStory('stories/renderers/svelte/decorators-runs-once', 'default'); diff --git a/code/renderers/svelte/template/stories/decorators-runs-once.stories.js b/code/renderers/svelte/template/stories/decorators-runs-once.stories.js index 649d9f8a18b..5186ccb14d8 100644 --- a/code/renderers/svelte/template/stories/decorators-runs-once.stories.js +++ b/code/renderers/svelte/template/stories/decorators-runs-once.stories.js @@ -7,7 +7,7 @@ export default { }, decorators: [ (Story) => { - console.log('decorator'); + console.log('decorator called'); return Story(); }, ], From aef74d6f21858c67fe3382d64e73425d93732701 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Thu, 16 Nov 2023 17:18:44 +0100 Subject: [PATCH 149/170] Detect no matching export error in storybook start and build --- .../core-events/src/errors/server-errors.ts | 25 +++++++++++++++++++ code/lib/core-server/src/build-dev.ts | 5 ++-- code/lib/core-server/src/build-static.ts | 5 +++- .../core-server/src/utils/build-or-throw.ts | 20 +++++++++++++++ 4 files changed, 52 insertions(+), 3 deletions(-) create mode 100644 code/lib/core-server/src/utils/build-or-throw.ts diff --git a/code/lib/core-events/src/errors/server-errors.ts b/code/lib/core-events/src/errors/server-errors.ts index 6ca430ae196..188c299f4a6 100644 --- a/code/lib/core-events/src/errors/server-errors.ts +++ b/code/lib/core-events/src/errors/server-errors.ts @@ -385,3 +385,28 @@ export class NextjsSWCNotSupportedError extends StorybookError { `; } } + +export class NoMatchingExportError extends StorybookError { + readonly category = Category.CORE_SERVER; + + readonly code = 4; + + constructor(public data: { error: unknown | Error }) { + super(); + } + + template() { + return dedent` + There was an exports mismatch error when trying to build Storybook. + Please check whether the versions of your Storybook packages match whenever possible, as this might be the cause. + + Problematic example: + { "@storybook/react": "7.5.3", "@storybook/react-vite": "7.4.5", "storybook": "7.3.0" } + + Correct example: + { "@storybook/react": "7.5.3", "@storybook/react-vite": "7.5.3", "storybook": "7.5.3" } + + Clearing your lock file and reinstalling your dependencies might help as well. + `; + } +} diff --git a/code/lib/core-server/src/build-dev.ts b/code/lib/core-server/src/build-dev.ts index 1e321a7d293..2811d93905f 100644 --- a/code/lib/core-server/src/build-dev.ts +++ b/code/lib/core-server/src/build-dev.ts @@ -27,6 +27,7 @@ import { updateCheck } from './utils/update-check'; import { getServerPort, getServerChannelUrl } from './utils/server-address'; import { getManagerBuilder, getPreviewBuilder } from './utils/get-builders'; import { warnOnIncompatibleAddons } from './utils/warnOnIncompatibleAddons'; +import { buildOrThrow } from './utils/build-or-throw'; export async function buildDevStandalone( options: CLIOptions & LoadOptions & BuilderOptions @@ -134,8 +135,8 @@ export async function buildDevStandalone( features, }; - const { address, networkAddress, managerResult, previewResult } = await storybookDevServer( - fullOptions + const { address, networkAddress, managerResult, previewResult } = await buildOrThrow(async () => + storybookDevServer(fullOptions) ); const previewTotalTime = previewResult?.totalTime; diff --git a/code/lib/core-server/src/build-static.ts b/code/lib/core-server/src/build-static.ts index e6775f51982..cde136c4741 100644 --- a/code/lib/core-server/src/build-static.ts +++ b/code/lib/core-server/src/build-static.ts @@ -35,6 +35,7 @@ import { extractStorybookMetadata } from './utils/metadata'; import { StoryIndexGenerator } from './utils/StoryIndexGenerator'; import { summarizeIndex } from './utils/summarizeIndex'; import { defaultStaticDirs } from './utils/constants'; +import { buildOrThrow } from './utils/build-or-throw'; export type BuildStaticStandaloneOptions = CLIOptions & LoadOptions & @@ -146,7 +147,9 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption global.FEATURES = features; - await managerBuilder.build({ startTime: process.hrtime(), options: fullOptions }); + await buildOrThrow(async () => + managerBuilder.build({ startTime: process.hrtime(), options: fullOptions }) + ); if (staticDirs) { effects.push( diff --git a/code/lib/core-server/src/utils/build-or-throw.ts b/code/lib/core-server/src/utils/build-or-throw.ts new file mode 100644 index 00000000000..9370446f1fa --- /dev/null +++ b/code/lib/core-server/src/utils/build-or-throw.ts @@ -0,0 +1,20 @@ +import { NoMatchingExportError } from '@storybook/core-events/server-errors'; + +export async function buildOrThrow(callback: () => Promise): Promise { + try { + return await callback(); + } catch (err: any) { + const builderErrors = err.errors as { text: string }[]; + if (builderErrors) { + const inconsistentVersionsError = builderErrors.find((er) => + er.text.includes('No matching export') + ); + + if (inconsistentVersionsError) { + throw new NoMatchingExportError(err); + } + } + + throw err; + } +} From 2c1dcf3a4d90b7e03fee080cd5155229e37ea5aa Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 17 Nov 2023 14:42:50 +0100 Subject: [PATCH 150/170] Update code/lib/core-server/src/utils/build-or-throw.ts --- code/lib/core-server/src/utils/build-or-throw.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/core-server/src/utils/build-or-throw.ts b/code/lib/core-server/src/utils/build-or-throw.ts index 9370446f1fa..5c1746a0be2 100644 --- a/code/lib/core-server/src/utils/build-or-throw.ts +++ b/code/lib/core-server/src/utils/build-or-throw.ts @@ -7,7 +7,7 @@ export async function buildOrThrow(callback: () => Promise): Promise { const builderErrors = err.errors as { text: string }[]; if (builderErrors) { const inconsistentVersionsError = builderErrors.find((er) => - er.text.includes('No matching export') + er.text?.includes('No matching export') ); if (inconsistentVersionsError) { From f0fd10b1ab2945ce16e02346ed0c3c12af2848e4 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 20 Nov 2023 15:48:52 +0100 Subject: [PATCH 151/170] Update code/lib/core-events/src/errors/server-errors.ts --- code/lib/core-events/src/errors/server-errors.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/core-events/src/errors/server-errors.ts b/code/lib/core-events/src/errors/server-errors.ts index 188c299f4a6..964bbbb64a9 100644 --- a/code/lib/core-events/src/errors/server-errors.ts +++ b/code/lib/core-events/src/errors/server-errors.ts @@ -406,7 +406,7 @@ export class NoMatchingExportError extends StorybookError { Correct example: { "@storybook/react": "7.5.3", "@storybook/react-vite": "7.5.3", "storybook": "7.5.3" } - Clearing your lock file and reinstalling your dependencies might help as well. + Clearing your lock file and reinstalling your dependencies might help as well, as sometimes the version you see in your package.json might not be the one defined in your lock file, leading to version inconsistency issues. `; } } From 967f685f774daf8cafe4eae219942440753819ff Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Wed, 22 Nov 2023 09:29:59 +0100 Subject: [PATCH 152/170] make parameter types public --- code/frameworks/sveltekit/src/preview.ts | 28 +--------------------- code/frameworks/sveltekit/src/types.ts | 30 +++++++++++++++++++++--- 2 files changed, 28 insertions(+), 30 deletions(-) diff --git a/code/frameworks/sveltekit/src/preview.ts b/code/frameworks/sveltekit/src/preview.ts index 23512ace57d..a43431b5103 100644 --- a/code/frameworks/sveltekit/src/preview.ts +++ b/code/frameworks/sveltekit/src/preview.ts @@ -1,35 +1,9 @@ import type { Decorator } from '@storybook/svelte'; import { action } from '@storybook/addon-actions'; import { onMount } from 'svelte'; -import type { enhance } from './mocks/app/forms'; -import type { goto, invalidate, invalidateAll, afterNavigate } from './mocks/app/navigation'; import { setAfterNavigateArgument } from './mocks/app/navigation'; import { setNavigating, setPage, setUpdated } from './mocks/app/stores'; - -type NormalizedHrefConfig = { - callback: (to: string, event: Event) => void; - asRegex?: boolean; -}; - -type HrefConfig = NormalizedHrefConfig | NormalizedHrefConfig['callback']; - -type SvelteKitParameters = Partial<{ - hrefs: Record; - stores: { - page: Record; - navigating: boolean; - updated: boolean; - }; - navigation: { - goto: typeof goto; - invalidate: typeof invalidate; - invalidateAll: typeof invalidateAll; - afterNavigate: typeof afterNavigate; - }; - forms: { - enhance: typeof enhance; - }; -}>; +import type { HrefConfig, NormalizedHrefConfig, SvelteKitParameters } from './types'; const normalizeHrefConfig = (hrefConfig: HrefConfig): NormalizedHrefConfig => { if (typeof hrefConfig === 'function') { diff --git a/code/frameworks/sveltekit/src/types.ts b/code/frameworks/sveltekit/src/types.ts index 647ea6fb565..41fc01e844d 100644 --- a/code/frameworks/sveltekit/src/types.ts +++ b/code/frameworks/sveltekit/src/types.ts @@ -1,5 +1,7 @@ import type { StorybookConfig as StorybookConfigBase } from '@storybook/types'; import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite'; +import type { afterNavigate, goto, invalidate, invalidateAll } from './mocks/app/navigation'; +import type { enhance } from './mocks/app/forms'; type FrameworkName = '@storybook/sveltekit'; type BuilderName = '@storybook/builder-vite'; @@ -25,12 +27,34 @@ type StorybookConfigFramework = { }; }; -/** - * The interface for Storybook configuration in `main.ts` files. - */ export type StorybookConfig = Omit< StorybookConfigBase, keyof StorybookConfigVite | keyof StorybookConfigFramework > & StorybookConfigVite & StorybookConfigFramework; + +export type NormalizedHrefConfig = { + callback: (to: string, event: Event) => void; + asRegex?: boolean; +}; + +export type HrefConfig = NormalizedHrefConfig | NormalizedHrefConfig['callback']; + +export type SvelteKitParameters = Partial<{ + hrefs: Record; + stores: { + page: Record; + navigating: boolean; + updated: boolean; + }; + navigation: { + goto: typeof goto; + invalidate: typeof invalidate; + invalidateAll: typeof invalidateAll; + afterNavigate: typeof afterNavigate; + }; + forms: { + enhance: typeof enhance; + }; +}>; From 9593addfa2004a2978c5179cd0d80975ef3496c8 Mon Sep 17 00:00:00 2001 From: paoloricciuti Date: Wed, 22 Nov 2023 09:33:22 +0100 Subject: [PATCH 153/170] fix types for SveltekitParameters --- code/frameworks/sveltekit/src/types.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/frameworks/sveltekit/src/types.ts b/code/frameworks/sveltekit/src/types.ts index 41fc01e844d..0a726dab767 100644 --- a/code/frameworks/sveltekit/src/types.ts +++ b/code/frameworks/sveltekit/src/types.ts @@ -45,14 +45,14 @@ export type SvelteKitParameters = Partial<{ hrefs: Record; stores: { page: Record; - navigating: boolean; + navigating: Record; updated: boolean; }; navigation: { goto: typeof goto; invalidate: typeof invalidate; invalidateAll: typeof invalidateAll; - afterNavigate: typeof afterNavigate; + afterNavigate: Record; }; forms: { enhance: typeof enhance; From 9e1bad022702ac33cdb7f2ae8b7e988494b3b153 Mon Sep 17 00:00:00 2001 From: paoloricciuti Date: Wed, 22 Nov 2023 09:42:16 +0100 Subject: [PATCH 154/170] remove afterNavigate import --- code/frameworks/sveltekit/src/types.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/frameworks/sveltekit/src/types.ts b/code/frameworks/sveltekit/src/types.ts index 0a726dab767..c3f04a22bc8 100644 --- a/code/frameworks/sveltekit/src/types.ts +++ b/code/frameworks/sveltekit/src/types.ts @@ -1,7 +1,7 @@ +import type { BuilderOptions, StorybookConfigVite } from '@storybook/builder-vite'; import type { StorybookConfig as StorybookConfigBase } from '@storybook/types'; -import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite'; -import type { afterNavigate, goto, invalidate, invalidateAll } from './mocks/app/navigation'; import type { enhance } from './mocks/app/forms'; +import type { goto, invalidate, invalidateAll } from './mocks/app/navigation'; type FrameworkName = '@storybook/sveltekit'; type BuilderName = '@storybook/builder-vite'; From 8d612f3c245ee9fb4810d7ae07636690e2e43c65 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 22 Nov 2023 12:33:53 +0100 Subject: [PATCH 155/170] Model loaders as before each and restore mocks properly --- code/addons/links/package.json | 2 +- code/addons/storyshots-puppeteer/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-server/package.json | 2 +- code/lib/csf-tools/package.json | 2 +- code/lib/manager-api/package.json | 2 +- code/lib/preview-api/package.json | 2 +- .../src/modules/client-api/ClientApi.ts | 8 ++- .../preview-web/docs-context/DocsContext.ts | 2 +- .../preview-web/render/CsfDocsRender.ts | 4 +- .../preview-web/render/MdxDocsRender.ts | 4 +- .../src/modules/store/csf/normalizeArrays.ts | 4 ++ .../store/csf/normalizeProjectAnnotations.ts | 5 ++ .../src/modules/store/csf/normalizeStory.ts | 9 ++- .../src/modules/store/csf/prepareStory.ts | 49 ++++++++------ .../src/modules/store/sortStories.ts | 5 +- code/lib/source-loader/package.json | 2 +- code/lib/test/package.json | 2 +- code/lib/test/src/index.ts | 28 ++++---- code/lib/test/src/spy.ts | 66 +++++++++++++++++++ code/lib/types/package.json | 2 +- code/lib/types/src/modules/story.ts | 43 ++++++++---- code/package.json | 2 +- code/renderers/server/package.json | 2 +- code/ui/blocks/package.json | 2 +- code/ui/components/package.json | 2 +- code/yarn.lock | 44 ++++++------- 27 files changed, 206 insertions(+), 93 deletions(-) create mode 100644 code/lib/preview-api/src/modules/store/csf/normalizeArrays.ts create mode 100644 code/lib/test/src/spy.ts diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 91039a15cdf..c83dda4ab51 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -63,7 +63,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { - "@storybook/csf": "^0.1.0", + "@storybook/csf": "0.1.2--canary.71.cad875c.0", "@storybook/global": "^5.0.0", "ts-dedent": "^2.0.0" }, diff --git a/code/addons/storyshots-puppeteer/package.json b/code/addons/storyshots-puppeteer/package.json index 6ffb44476d1..009f4ac4d34 100644 --- a/code/addons/storyshots-puppeteer/package.json +++ b/code/addons/storyshots-puppeteer/package.json @@ -37,7 +37,7 @@ }, "dependencies": { "@axe-core/puppeteer": "^4.2.0", - "@storybook/csf": "^0.1.0", + "@storybook/csf": "0.1.2--canary.71.cad875c.0", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", "@types/jest-image-snapshot": "^6.0.0", diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index ac98a974c4b..3b49d8bc628 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -55,7 +55,7 @@ "@babel/core": "^7.23.2", "@babel/preset-env": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "^0.1.0", + "@storybook/csf": "0.1.2--canary.71.cad875c.0", "@storybook/csf-tools": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 830a25f85e8..12c6ba983de 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -66,7 +66,7 @@ "@storybook/channels": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "^0.1.0", + "@storybook/csf": "0.1.2--canary.71.cad875c.0", "@storybook/csf-tools": "workspace:*", "@storybook/docs-mdx": "^0.1.0", "@storybook/global": "^5.0.0", diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index 252055c7957..6b5f1ebac76 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -46,7 +46,7 @@ "@babel/parser": "^7.23.0", "@babel/traverse": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "^0.1.0", + "@storybook/csf": "0.1.2--canary.71.cad875c.0", "@storybook/types": "workspace:*", "fs-extra": "^11.1.0", "recast": "^0.23.1", diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index f8f760e004c..16d9821cdfb 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -46,7 +46,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "^0.1.0", + "@storybook/csf": "0.1.2--canary.71.cad875c.0", "@storybook/global": "^5.0.0", "@storybook/router": "workspace:*", "@storybook/theming": "workspace:*", diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index 5884953f449..46b1d163d58 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -71,7 +71,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "^0.1.0", + "@storybook/csf": "0.1.2--canary.71.cad875c.0", "@storybook/global": "^5.0.0", "@storybook/types": "workspace:*", "@types/qs": "^6.9.5", diff --git a/code/lib/preview-api/src/modules/client-api/ClientApi.ts b/code/lib/preview-api/src/modules/client-api/ClientApi.ts index 83a2ba0cd6b..d68bf30b47c 100644 --- a/code/lib/preview-api/src/modules/client-api/ClientApi.ts +++ b/code/lib/preview-api/src/modules/client-api/ClientApi.ts @@ -168,9 +168,11 @@ export class ClientApi { } }; - addStepRunner = (stepRunner: StepRunner) => { + addStepRunner = (stepRunner: StepRunner) => { this.facade.projectAnnotations.runStep = composeStepRunners( - [this.facade.projectAnnotations.runStep, stepRunner].filter(Boolean) as StepRunner[] + [this.facade.projectAnnotations.runStep, stepRunner].filter( + Boolean + ) as StepRunner[] ); }; @@ -297,7 +299,7 @@ export class ClientApi { this._addedExports[fileName] = { default: meta }; let counter = 0; - api.add = (storyName: string, storyFn: StoryFn, parameters: Parameters = {}) => { + api.add = (storyName: string, storyFn: StoryFn, parameters: Parameters = {}) => { hasAdded = true; if (typeof storyName !== 'string') { diff --git a/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContext.ts b/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContext.ts index 6796913596b..40ea0ccbaa0 100644 --- a/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContext.ts +++ b/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContext.ts @@ -34,7 +34,7 @@ export class DocsContext implements DocsContextProps constructor( public channel: Channel, protected store: StoryStore, - public renderStoryToElement: DocsContextProps['renderStoryToElement'], + public renderStoryToElement: DocsContextProps['renderStoryToElement'], /** The CSF files known (via the index) to be refererenced by this docs file */ csfFiles: CSFFile[] ) { diff --git a/code/lib/preview-api/src/modules/preview-web/render/CsfDocsRender.ts b/code/lib/preview-api/src/modules/preview-web/render/CsfDocsRender.ts index a4fbb47b9e0..019d43d9789 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/CsfDocsRender.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/CsfDocsRender.ts @@ -95,7 +95,7 @@ export class CsfDocsRender implements Render['renderStoryToElement']) { if (!this.csfFiles) throw new Error('Cannot render docs before preparing'); const docsContext = new DocsContext( this.channel, @@ -112,7 +112,7 @@ export class CsfDocsRender implements Render['renderStoryToElement'] ) { if (!this.story || !this.csfFiles) throw new Error('Cannot render docs before preparing'); diff --git a/code/lib/preview-api/src/modules/preview-web/render/MdxDocsRender.ts b/code/lib/preview-api/src/modules/preview-web/render/MdxDocsRender.ts index ca81e01d438..987dc768019 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/MdxDocsRender.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/MdxDocsRender.ts @@ -79,7 +79,7 @@ export class MdxDocsRender implements Render['renderStoryToElement']) { if (!this.csfFiles) throw new Error('Cannot render docs before preparing'); // NOTE we do *not* attach any CSF file yet. We wait for `referenceMeta(..., true)` @@ -94,7 +94,7 @@ export class MdxDocsRender implements Render['renderStoryToElement'] ) { if (!this.exports || !this.csfFiles || !this.store.projectAnnotations) throw new Error('Cannot render docs before preparing'); diff --git a/code/lib/preview-api/src/modules/store/csf/normalizeArrays.ts b/code/lib/preview-api/src/modules/store/csf/normalizeArrays.ts new file mode 100644 index 00000000000..7253f120e24 --- /dev/null +++ b/code/lib/preview-api/src/modules/store/csf/normalizeArrays.ts @@ -0,0 +1,4 @@ +export const normalizeArrays = (array: T[] | T | undefined): T[] => { + if (Array.isArray(array)) return array; + return typeof array === 'function' ? [array] : []; +}; diff --git a/code/lib/preview-api/src/modules/store/csf/normalizeProjectAnnotations.ts b/code/lib/preview-api/src/modules/store/csf/normalizeProjectAnnotations.ts index a93bf358439..e2e6a88db31 100644 --- a/code/lib/preview-api/src/modules/store/csf/normalizeProjectAnnotations.ts +++ b/code/lib/preview-api/src/modules/store/csf/normalizeProjectAnnotations.ts @@ -8,16 +8,21 @@ import type { import { inferArgTypes } from '../inferArgTypes'; import { inferControls } from '../inferControls'; import { normalizeInputTypes } from './normalizeInputTypes'; +import { normalizeArrays } from './normalizeArrays'; export function normalizeProjectAnnotations({ argTypes, globalTypes, argTypesEnhancers, + decorators, + loaders, ...annotations }: ProjectAnnotations): NormalizedProjectAnnotations { return { ...(argTypes && { argTypes: normalizeInputTypes(argTypes as ArgTypes) }), ...(globalTypes && { globalTypes: normalizeInputTypes(globalTypes) }), + decorators: normalizeArrays(decorators), + loaders: normalizeArrays(loaders), argTypesEnhancers: [ ...(argTypesEnhancers || []), inferArgTypes, diff --git a/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts b/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts index 6666a95217b..9a96bc4a332 100644 --- a/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts +++ b/code/lib/preview-api/src/modules/store/csf/normalizeStory.ts @@ -13,6 +13,7 @@ import { dedent } from 'ts-dedent'; import { logger } from '@storybook/client-logger'; import deprecate from 'util-deprecate'; import { normalizeInputTypes } from './normalizeInputTypes'; +import { normalizeArrays } from './normalizeArrays'; const deprecatedStoryAnnotation = dedent` CSF .story annotations deprecated; annotate story functions directly: @@ -44,11 +45,15 @@ export function normalizeStory( storyObject.storyName || story?.name || exportName; - const decorators = [...(storyObject.decorators || []), ...(story?.decorators || [])]; + + const decorators = [ + ...normalizeArrays(storyObject.decorators), + ...normalizeArrays(story?.decorators), + ]; const parameters = { ...story?.parameters, ...storyObject.parameters }; const args = { ...story?.args, ...storyObject.args }; const argTypes = { ...(story?.argTypes as ArgTypes), ...(storyObject.argTypes as ArgTypes) }; - const loaders = [...(storyObject.loaders || []), ...(story?.loaders || [])]; + const loaders = [...normalizeArrays(storyObject.loaders), ...normalizeArrays(story?.loaders)]; const { render, play, tags = [] } = storyObject; // eslint-disable-next-line no-underscore-dangle diff --git a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts index e4bfb193711..64306fedb32 100644 --- a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts +++ b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts @@ -1,24 +1,25 @@ +/* eslint-disable no-restricted-syntax,no-await-in-loop,@typescript-eslint/no-loop-func */ import { global } from '@storybook/global'; import type { - Renderer, Args, ArgsStoryFn, LegacyStoryFn, - Parameters, - PlayFunction, - PlayFunctionContext, - StepLabel, + ModuleExport, NormalizedComponentAnnotations, NormalizedProjectAnnotations, NormalizedStoryAnnotations, + Parameters, + PlayFunction, + PlayFunctionContext, + PreparedMeta, PreparedStory, + Renderer, + StepLabel, StoryContext, StoryContextForEnhancers, StoryContextForLoaders, StrictArgTypes, - PreparedMeta, - ModuleExport, } from '@storybook/types'; import { includeConditionalArg } from '@storybook/csf'; @@ -26,6 +27,7 @@ import { applyHooks } from '../../addons'; import { combineParameters } from '../parameters'; import { defaultDecorateStory } from '../decorators'; import { groupArgsByTarget, UNTARGETED } from '../args'; +import { normalizeArrays } from './normalizeArrays'; // Combine all the metadata about a story (both direct and inherited from the component/global scope) // into a "renderable" story function, with all decorators applied, parameters passed as context etc @@ -48,15 +50,23 @@ export function prepareStory( projectAnnotations ); - const loaders = [ - ...(projectAnnotations.loaders || []), - ...(componentAnnotations.loaders || []), - ...(storyAnnotations?.loaders || []), - ]; - const applyLoaders = async (context: StoryContextForLoaders) => { - const loadResults = await Promise.all(loaders.map((loader) => loader(context))); - const loaded = Object.assign({}, ...loadResults); - return { ...context, loaded }; + const applyLoaders = async ( + context: StoryContextForLoaders + ): Promise & { loaded: StoryContext['loaded'] }> => { + let updatedContext = { ...context, loaded: {} }; + for (const loaders of [ + ...('testPackageLoaders' in global && Array.isArray(global.testPackageLoaders) + ? [global.testPackageLoaders] + : []), + normalizeArrays(projectAnnotations.loaders), + normalizeArrays(componentAnnotations.loaders), + normalizeArrays(storyAnnotations.loaders), + ]) { + const loadResults = await Promise.all(loaders.map((loader) => loader(updatedContext))); + const loaded: Record = Object.assign({}, ...loadResults); + updatedContext = { ...updatedContext, loaded: { ...updatedContext.loaded, ...loaded } }; + } + return updatedContext; }; const undecoratedStoryFn: LegacyStoryFn = (context: StoryContext) => { @@ -70,9 +80,9 @@ export function prepareStory( const { applyDecorators = defaultDecorateStory, runStep } = projectAnnotations; const decorators = [ - ...(storyAnnotations?.decorators || []), - ...(componentAnnotations.decorators || []), - ...(projectAnnotations.decorators || []), + ...normalizeArrays(storyAnnotations?.decorators), + ...normalizeArrays(componentAnnotations?.decorators), + ...normalizeArrays(projectAnnotations?.decorators), ]; // The render function on annotations *has* to be an `ArgsStoryFn`, so when we normalize @@ -115,7 +125,6 @@ export function prepareStory( playFunction, }; } - export function prepareMeta( componentAnnotations: NormalizedComponentAnnotations, projectAnnotations: NormalizedProjectAnnotations, diff --git a/code/lib/preview-api/src/modules/store/sortStories.ts b/code/lib/preview-api/src/modules/store/sortStories.ts index 4335b6f7210..8fc6950fbd4 100644 --- a/code/lib/preview-api/src/modules/store/sortStories.ts +++ b/code/lib/preview-api/src/modules/store/sortStories.ts @@ -9,6 +9,7 @@ import type { Parameters, Path, PreparedStory, + Renderer, } from '@storybook/types'; import { storySort } from './storySort'; @@ -58,8 +59,8 @@ const toIndexEntry = (story: any): StoryIndexEntry => { return { id, title, name, importPath: parameters.fileName, type }; }; -export const sortStoriesV6 = ( - stories: [string, PreparedStory, Parameters, Parameters][], +export const sortStoriesV6 = ( + stories: [string, PreparedStory, Parameters, Parameters][], storySortParameter: Addon_StorySortParameter, fileNameOrder: Path[] ) => { diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 98b44a0f9d6..b4310b61f1b 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -45,7 +45,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "^0.1.0", + "@storybook/csf": "0.1.2--canary.71.cad875c.0", "@storybook/types": "workspace:*", "estraverse": "^5.2.0", "lodash": "^4.17.21", diff --git a/code/lib/test/package.json b/code/lib/test/package.json index d75491d9cbb..41c3d658bad 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -19,7 +19,7 @@ "url": "https://opencollective.com/storybook" }, "license": "MIT", - "sideEffects": false, + "sideEffects": true, "exports": { ".": { "types": "./dist/index.d.ts", diff --git a/code/lib/test/src/index.ts b/code/lib/test/src/index.ts index 34d59391676..57612fc8a6c 100644 --- a/code/lib/test/src/index.ts +++ b/code/lib/test/src/index.ts @@ -1,18 +1,11 @@ import { instrument } from '@storybook/instrumenter'; -import * as spy from '@vitest/spy'; +import { type LoaderFunction } from '@storybook/csf'; import chai from 'chai'; -import { FORCE_REMOUNT, STORY_RENDER_PHASE_CHANGED } from '@storybook/core-events'; -import { addons } from '@storybook/preview-api'; +import { global } from '@storybook/global'; import { expect as rawExpect } from './expect'; +import { clearAllMocks, resetAllMocks, restoreAllMocks } from './spy'; -export * from '@vitest/spy'; - -const channel = addons.getChannel(); - -channel.on(FORCE_REMOUNT, () => spy.spies.forEach((mock) => mock.mockClear())); -channel.on(STORY_RENDER_PHASE_CHANGED, ({ newPhase }) => { - if (newPhase === 'loading') spy.spies.forEach((mock) => mock.mockClear()); -}); +export * from './spy'; export const { expect } = instrument( { expect: rawExpect }, @@ -32,3 +25,16 @@ export const { expect } = instrument( ); export * from './testing-library'; + +const resetAllMocksLoader: LoaderFunction = ({ parameters }) => { + if (parameters?.test?.mockReset === true) { + resetAllMocks(); + } else if (parameters?.test?.clearMocks === true) { + clearAllMocks(); + } else if (parameters?.test?.restoreMocks !== false) { + restoreAllMocks(); + } +}; + +// @ts-expect-error Wwe are using this as a default loader, if the test package is used. But we don't want to get into optional peer dep shenanigans. +global.testPackageLoaders = [resetAllMocksLoader]; diff --git a/code/lib/test/src/spy.ts b/code/lib/test/src/spy.ts new file mode 100644 index 00000000000..8b0ce5f38e5 --- /dev/null +++ b/code/lib/test/src/spy.ts @@ -0,0 +1,66 @@ +import { + spyOn, + isMockFunction, + fn, + spies as mocks, + type MaybeMocked, + type MaybeMockedDeep, + type MaybePartiallyMocked, + type MaybePartiallyMockedDeep, +} from '@vitest/spy'; + +export type * from '@vitest/spy'; + +export { spyOn, isMockFunction, fn, mocks }; + +/** + * Calls [`.mockClear()`](https://vitest.dev/api/mock#mockclear) on every mocked function. This will only empty `.mock` state, it will not reset implementation. + * + * It is useful if you need to clean up mock between different assertions. + */ +export function clearAllMocks() { + mocks.forEach((spy) => spy.mockClear()); +} + +/** + * Calls [`.mockReset()`](https://vitest.dev/api/mock#mockreset) on every mocked function. This will empty `.mock` state, reset "once" implementations and force the base implementation to return `undefined` when invoked. + * + * This is useful when you want to completely reset a mock to the default state. + */ +export function resetAllMocks() { + mocks.forEach((spy) => spy.mockReset()); +} + +/** + * Calls [`.mockRestore()`](https://vitest.dev/api/mock#mockrestore) on every mocked function. This will restore all original implementations. + */ +export function restoreAllMocks() { + mocks.forEach((spy) => spy.mockRestore()); +} + +/** + * Type helper for TypeScript. Just returns the object that was passed. + * + * When `partial` is `true` it will expect a `Partial` as a return value. By default, this will only make TypeScript believe that + * the first level values are mocked. You can pass down `{ deep: true }` as a second argument to tell TypeScript that the whole object is mocked, if it actually is. + * + * @param item Anything that can be mocked + * @param deep If the object is deeply mocked + * @param options If the object is partially or deeply mocked + */ +export function mocked(item: T, deep?: false): MaybeMocked; +export function mocked(item: T, deep: true): MaybeMockedDeep; +export function mocked(item: T, options: { partial?: false; deep?: false }): MaybeMocked; +export function mocked(item: T, options: { partial?: false; deep: true }): MaybeMockedDeep; +export function mocked( + item: T, + options: { partial: true; deep?: false } +): MaybePartiallyMocked; +export function mocked( + item: T, + options: { partial: true; deep: true } +): MaybePartiallyMockedDeep; +export function mocked(item: T): MaybeMocked; +export function mocked(item: T, _options = {}): MaybeMocked { + return item as any; +} diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 078a827837a..53bb317a2e1 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -50,7 +50,7 @@ "file-system-cache": "2.3.0" }, "devDependencies": { - "@storybook/csf": "^0.1.0", + "@storybook/csf": "0.1.2--canary.71.cad875c.0", "@types/fs-extra": "^11.0.1", "@types/node": "^18.0.0", "typescript": "~4.9.3" diff --git a/code/lib/types/src/modules/story.ts b/code/lib/types/src/modules/story.ts index c1a5b9d6ffd..cc88807ade8 100644 --- a/code/lib/types/src/modules/story.ts +++ b/code/lib/types/src/modules/story.ts @@ -1,4 +1,9 @@ -import type { Renderer, ProjectAnnotations as CsfProjectAnnotations } from '@storybook/csf'; +import type { + Renderer, + ProjectAnnotations as CsfProjectAnnotations, + DecoratorFunction, + LoaderFunction, +} from '@storybook/csf'; import type { ComponentAnnotations, @@ -42,23 +47,31 @@ export type ProjectAnnotations = CsfProjectAnnotatio renderToDOM?: RenderToCanvas; }; -export type NormalizedProjectAnnotations = - ProjectAnnotations & { - argTypes?: StrictArgTypes; - globalTypes?: StrictGlobalTypes; - }; +export type NormalizedProjectAnnotations = Omit< + ProjectAnnotations, + 'decorators' | 'loaders' +> & { + argTypes?: StrictArgTypes; + globalTypes?: StrictGlobalTypes; + decorators?: DecoratorFunction[]; + loaders?: LoaderFunction[]; +}; -export type NormalizedComponentAnnotations = - ComponentAnnotations & { - // Useful to guarantee that id & title exists - id: ComponentId; - title: ComponentTitle; - argTypes?: StrictArgTypes; - }; +export type NormalizedComponentAnnotations = Omit< + ComponentAnnotations, + 'decorators' | 'loaders' +> & { + // Useful to guarantee that id & title exists + id: ComponentId; + title: ComponentTitle; + argTypes?: StrictArgTypes; + decorators: DecoratorFunction[]; + loaders: LoaderFunction[]; +}; export type NormalizedStoryAnnotations = Omit< StoryAnnotations, - 'storyName' | 'story' + 'storyName' | 'story' | 'decorators' | 'loaders' > & { moduleExport: ModuleExport; // You cannot actually set id on story annotations, but we normalize it to be there for convience @@ -66,6 +79,8 @@ export type NormalizedStoryAnnotations = argTypes?: StrictArgTypes; name: StoryName; userStoryFn?: StoryFn; + decorators?: DecoratorFunction[]; + loaders?: LoaderFunction[]; }; export type CSFFile = { diff --git a/code/package.json b/code/package.json index a98045536f6..f371794f23b 100644 --- a/code/package.json +++ b/code/package.json @@ -140,7 +140,7 @@ "@storybook/core-events": "workspace:*", "@storybook/core-server": "workspace:*", "@storybook/core-webpack": "workspace:*", - "@storybook/csf": "^0.1.0", + "@storybook/csf": "0.1.2--canary.71.cad875c.0", "@storybook/csf-plugin": "workspace:*", "@storybook/csf-tools": "workspace:*", "@storybook/docs-tools": "workspace:*", diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index ae2f96fe428..6d62894c70e 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -47,7 +47,7 @@ }, "dependencies": { "@storybook/core-client": "workspace:*", - "@storybook/csf": "^0.1.0", + "@storybook/csf": "0.1.2--canary.71.cad875c.0", "@storybook/csf-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/preview-api": "workspace:*", diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index b42af01f67d..d8e1d6eb0fe 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -48,7 +48,7 @@ "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "^0.1.0", + "@storybook/csf": "0.1.2--canary.71.cad875c.0", "@storybook/docs-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/manager-api": "workspace:*", diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 13e69c16ff8..c31988d7c1d 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -62,7 +62,7 @@ "@radix-ui/react-select": "^1.2.2", "@radix-ui/react-toolbar": "^1.0.4", "@storybook/client-logger": "workspace:*", - "@storybook/csf": "^0.1.0", + "@storybook/csf": "0.1.2--canary.71.cad875c.0", "@storybook/global": "^5.0.0", "@storybook/theming": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/yarn.lock b/code/yarn.lock index d2928cb17c0..0008e9657ef 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5655,7 +5655,7 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.0" + "@storybook/csf": "npm:0.1.2--canary.71.cad875c.0" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -5724,7 +5724,7 @@ __metadata: resolution: "@storybook/addon-storyshots-puppeteer@workspace:addons/storyshots-puppeteer" dependencies: "@axe-core/puppeteer": "npm:^4.2.0" - "@storybook/csf": "npm:^0.1.0" + "@storybook/csf": "npm:0.1.2--canary.71.cad875c.0" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" "@types/jest-image-snapshot": "npm:^6.0.0" @@ -6033,7 +6033,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.0" + "@storybook/csf": "npm:0.1.2--canary.71.cad875c.0" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" @@ -6306,7 +6306,7 @@ __metadata: "@babel/core": "npm:^7.23.2" "@babel/preset-env": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:^0.1.0" + "@storybook/csf": "npm:0.1.2--canary.71.cad875c.0" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" @@ -6344,7 +6344,7 @@ __metadata: "@radix-ui/react-select": "npm:^1.2.2" "@radix-ui/react-toolbar": "npm:^1.0.4" "@storybook/client-logger": "workspace:*" - "@storybook/csf": "npm:^0.1.0" + "@storybook/csf": "npm:0.1.2--canary.71.cad875c.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.1.6" "@storybook/theming": "workspace:*" @@ -6434,7 +6434,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.0" + "@storybook/csf": "npm:0.1.2--canary.71.cad875c.0" "@storybook/csf-tools": "workspace:*" "@storybook/docs-mdx": "npm:^0.1.0" "@storybook/global": "npm:^5.0.0" @@ -6515,7 +6515,7 @@ __metadata: "@babel/parser": "npm:^7.23.0" "@babel/traverse": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:^0.1.0" + "@storybook/csf": "npm:0.1.2--canary.71.cad875c.0" "@storybook/types": "workspace:*" "@types/fs-extra": "npm:^11.0.1" "@types/js-yaml": "npm:^4.0.5" @@ -6527,6 +6527,15 @@ __metadata: languageName: unknown linkType: soft +"@storybook/csf@npm:0.1.2--canary.71.cad875c.0": + version: 0.1.2--canary.71.cad875c.0 + resolution: "@storybook/csf@npm:0.1.2--canary.71.cad875c.0" + dependencies: + type-fest: "npm:^2.19.0" + checksum: 6a26cbcc41a5a73374fff6329b47479dacf1af46112c4d1e11bce2e3f6e9992c61765dcd99cf0de18a209d4a21a824c2162cec0758f83d0a977b0cd90c5191eb + languageName: node + linkType: hard + "@storybook/csf@npm:^0.0.1": version: 0.0.1 resolution: "@storybook/csf@npm:0.0.1" @@ -6536,15 +6545,6 @@ __metadata: languageName: node linkType: hard -"@storybook/csf@npm:^0.1.0": - version: 0.1.1 - resolution: "@storybook/csf@npm:0.1.1" - dependencies: - type-fest: "npm:^2.19.0" - checksum: 999bb87fbbe047a559bbaa5baf2ed84872fcd5cdcae3c1169f8e4c641eefe8759d09a09034a78ed114032c0e5cf6301b7fa89e5e3ce60d75cf0bd5e33ec0a6e7 - languageName: node - linkType: hard - "@storybook/design-system@npm:^7.15.15": version: 7.15.15 resolution: "@storybook/design-system@npm:7.15.15" @@ -6765,7 +6765,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.0" + "@storybook/csf": "npm:0.1.2--canary.71.cad875c.0" "@storybook/global": "npm:^5.0.0" "@storybook/router": "workspace:*" "@storybook/theming": "workspace:*" @@ -7174,7 +7174,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:^0.1.0" + "@storybook/csf": "npm:0.1.2--canary.71.cad875c.0" "@storybook/global": "npm:^5.0.0" "@storybook/types": "workspace:*" "@types/qs": "npm:^6.9.5" @@ -7383,7 +7383,7 @@ __metadata: "@storybook/core-events": "workspace:*" "@storybook/core-server": "workspace:*" "@storybook/core-webpack": "workspace:*" - "@storybook/csf": "npm:^0.1.0" + "@storybook/csf": "npm:0.1.2--canary.71.cad875c.0" "@storybook/csf-plugin": "workspace:*" "@storybook/csf-tools": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -7556,7 +7556,7 @@ __metadata: resolution: "@storybook/server@workspace:renderers/server" dependencies: "@storybook/core-client": "workspace:*" - "@storybook/csf": "npm:^0.1.0" + "@storybook/csf": "npm:0.1.2--canary.71.cad875c.0" "@storybook/csf-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/preview-api": "workspace:*" @@ -7573,7 +7573,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@workspace:lib/source-loader" dependencies: - "@storybook/csf": "npm:^0.1.0" + "@storybook/csf": "npm:0.1.2--canary.71.cad875c.0" "@storybook/types": "workspace:*" estraverse: "npm:^5.2.0" jest-specific-snapshot: "npm:^8.0.0" @@ -7767,7 +7767,7 @@ __metadata: resolution: "@storybook/types@workspace:lib/types" dependencies: "@storybook/channels": "workspace:*" - "@storybook/csf": "npm:^0.1.0" + "@storybook/csf": "npm:0.1.2--canary.71.cad875c.0" "@types/babel__core": "npm:^7.0.0" "@types/express": "npm:^4.7.0" "@types/fs-extra": "npm:^11.0.1" From 0130a0acc9d41a84516266ba4ae5a1450e4671a9 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 22 Nov 2023 12:40:02 +0100 Subject: [PATCH 156/170] Pin new csf version --- code/addons/links/package.json | 2 +- code/addons/storyshots-puppeteer/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-server/package.json | 2 +- code/lib/csf-tools/package.json | 2 +- code/lib/manager-api/package.json | 2 +- code/lib/preview-api/package.json | 2 +- .../modules/store/csf/testing-utils/index.ts | 2 +- code/lib/source-loader/package.json | 2 +- code/lib/types/package.json | 2 +- code/package.json | 2 +- code/renderers/server/package.json | 2 +- code/ui/blocks/package.json | 2 +- code/ui/components/package.json | 2 +- code/yarn.lock | 34 +++++++++---------- 15 files changed, 31 insertions(+), 31 deletions(-) diff --git a/code/addons/links/package.json b/code/addons/links/package.json index c83dda4ab51..54e7bbca710 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -63,7 +63,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.2--canary.71.cad875c.0", + "@storybook/csf": "0.1.2-next.0", "@storybook/global": "^5.0.0", "ts-dedent": "^2.0.0" }, diff --git a/code/addons/storyshots-puppeteer/package.json b/code/addons/storyshots-puppeteer/package.json index 009f4ac4d34..5949d89338b 100644 --- a/code/addons/storyshots-puppeteer/package.json +++ b/code/addons/storyshots-puppeteer/package.json @@ -37,7 +37,7 @@ }, "dependencies": { "@axe-core/puppeteer": "^4.2.0", - "@storybook/csf": "0.1.2--canary.71.cad875c.0", + "@storybook/csf": "0.1.2-next.0", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", "@types/jest-image-snapshot": "^6.0.0", diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 3b49d8bc628..e8f0a213dfb 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -55,7 +55,7 @@ "@babel/core": "^7.23.2", "@babel/preset-env": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "0.1.2--canary.71.cad875c.0", + "@storybook/csf": "0.1.2-next.0", "@storybook/csf-tools": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 12c6ba983de..557651a48e4 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -66,7 +66,7 @@ "@storybook/channels": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.2--canary.71.cad875c.0", + "@storybook/csf": "0.1.2-next.0", "@storybook/csf-tools": "workspace:*", "@storybook/docs-mdx": "^0.1.0", "@storybook/global": "^5.0.0", diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index 6b5f1ebac76..c5e4e5de536 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -46,7 +46,7 @@ "@babel/parser": "^7.23.0", "@babel/traverse": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "0.1.2--canary.71.cad875c.0", + "@storybook/csf": "0.1.2-next.0", "@storybook/types": "workspace:*", "fs-extra": "^11.1.0", "recast": "^0.23.1", diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 16d9821cdfb..0e5e2e75595 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -46,7 +46,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.2--canary.71.cad875c.0", + "@storybook/csf": "0.1.2-next.0", "@storybook/global": "^5.0.0", "@storybook/router": "workspace:*", "@storybook/theming": "workspace:*", diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index 46b1d163d58..39b9b4682d2 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -71,7 +71,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.2--canary.71.cad875c.0", + "@storybook/csf": "0.1.2-next.0", "@storybook/global": "^5.0.0", "@storybook/types": "workspace:*", "@types/qs": "^6.9.5", diff --git a/code/lib/preview-api/src/modules/store/csf/testing-utils/index.ts b/code/lib/preview-api/src/modules/store/csf/testing-utils/index.ts index 10468737e6d..c9a3731f4bd 100644 --- a/code/lib/preview-api/src/modules/store/csf/testing-utils/index.ts +++ b/code/lib/preview-api/src/modules/store/csf/testing-utils/index.ts @@ -82,7 +82,7 @@ export function composeStory)); }, { storyName, diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index b4310b61f1b..de7fa088395 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -45,7 +45,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.2--canary.71.cad875c.0", + "@storybook/csf": "0.1.2-next.0", "@storybook/types": "workspace:*", "estraverse": "^5.2.0", "lodash": "^4.17.21", diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 53bb317a2e1..30cb9f4c26f 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -50,7 +50,7 @@ "file-system-cache": "2.3.0" }, "devDependencies": { - "@storybook/csf": "0.1.2--canary.71.cad875c.0", + "@storybook/csf": "0.1.2-next.0", "@types/fs-extra": "^11.0.1", "@types/node": "^18.0.0", "typescript": "~4.9.3" diff --git a/code/package.json b/code/package.json index f371794f23b..31ccd621bcd 100644 --- a/code/package.json +++ b/code/package.json @@ -140,7 +140,7 @@ "@storybook/core-events": "workspace:*", "@storybook/core-server": "workspace:*", "@storybook/core-webpack": "workspace:*", - "@storybook/csf": "0.1.2--canary.71.cad875c.0", + "@storybook/csf": "0.1.2-next.0", "@storybook/csf-plugin": "workspace:*", "@storybook/csf-tools": "workspace:*", "@storybook/docs-tools": "workspace:*", diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 6d62894c70e..e0c3cabd0f6 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -47,7 +47,7 @@ }, "dependencies": { "@storybook/core-client": "workspace:*", - "@storybook/csf": "0.1.2--canary.71.cad875c.0", + "@storybook/csf": "0.1.2-next.0", "@storybook/csf-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/preview-api": "workspace:*", diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index d8e1d6eb0fe..0f4385cb96c 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -48,7 +48,7 @@ "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.2--canary.71.cad875c.0", + "@storybook/csf": "0.1.2-next.0", "@storybook/docs-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/manager-api": "workspace:*", diff --git a/code/ui/components/package.json b/code/ui/components/package.json index c31988d7c1d..eb28b1280f1 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -62,7 +62,7 @@ "@radix-ui/react-select": "^1.2.2", "@radix-ui/react-toolbar": "^1.0.4", "@storybook/client-logger": "workspace:*", - "@storybook/csf": "0.1.2--canary.71.cad875c.0", + "@storybook/csf": "0.1.2-next.0", "@storybook/global": "^5.0.0", "@storybook/theming": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/yarn.lock b/code/yarn.lock index 0008e9657ef..ad6a2779f61 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5655,7 +5655,7 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.2--canary.71.cad875c.0" + "@storybook/csf": "npm:0.1.2-next.0" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -5724,7 +5724,7 @@ __metadata: resolution: "@storybook/addon-storyshots-puppeteer@workspace:addons/storyshots-puppeteer" dependencies: "@axe-core/puppeteer": "npm:^4.2.0" - "@storybook/csf": "npm:0.1.2--canary.71.cad875c.0" + "@storybook/csf": "npm:0.1.2-next.0" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" "@types/jest-image-snapshot": "npm:^6.0.0" @@ -6033,7 +6033,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.2--canary.71.cad875c.0" + "@storybook/csf": "npm:0.1.2-next.0" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" @@ -6306,7 +6306,7 @@ __metadata: "@babel/core": "npm:^7.23.2" "@babel/preset-env": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:0.1.2--canary.71.cad875c.0" + "@storybook/csf": "npm:0.1.2-next.0" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" @@ -6344,7 +6344,7 @@ __metadata: "@radix-ui/react-select": "npm:^1.2.2" "@radix-ui/react-toolbar": "npm:^1.0.4" "@storybook/client-logger": "workspace:*" - "@storybook/csf": "npm:0.1.2--canary.71.cad875c.0" + "@storybook/csf": "npm:0.1.2-next.0" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.1.6" "@storybook/theming": "workspace:*" @@ -6434,7 +6434,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.2--canary.71.cad875c.0" + "@storybook/csf": "npm:0.1.2-next.0" "@storybook/csf-tools": "workspace:*" "@storybook/docs-mdx": "npm:^0.1.0" "@storybook/global": "npm:^5.0.0" @@ -6515,7 +6515,7 @@ __metadata: "@babel/parser": "npm:^7.23.0" "@babel/traverse": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:0.1.2--canary.71.cad875c.0" + "@storybook/csf": "npm:0.1.2-next.0" "@storybook/types": "workspace:*" "@types/fs-extra": "npm:^11.0.1" "@types/js-yaml": "npm:^4.0.5" @@ -6527,12 +6527,12 @@ __metadata: languageName: unknown linkType: soft -"@storybook/csf@npm:0.1.2--canary.71.cad875c.0": - version: 0.1.2--canary.71.cad875c.0 - resolution: "@storybook/csf@npm:0.1.2--canary.71.cad875c.0" +"@storybook/csf@npm:0.1.2-next.0": + version: 0.1.2-next.0 + resolution: "@storybook/csf@npm:0.1.2-next.0" dependencies: type-fest: "npm:^2.19.0" - checksum: 6a26cbcc41a5a73374fff6329b47479dacf1af46112c4d1e11bce2e3f6e9992c61765dcd99cf0de18a209d4a21a824c2162cec0758f83d0a977b0cd90c5191eb + checksum: 9f9fd8ef2b15d06252d3d6e0abad642093ab09ded51391d426d0671ed8b9584acbd464ed8ba5c68a94a245f005af117afe74e20af0dd475b9f704b9a5c806648 languageName: node linkType: hard @@ -6765,7 +6765,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.2--canary.71.cad875c.0" + "@storybook/csf": "npm:0.1.2-next.0" "@storybook/global": "npm:^5.0.0" "@storybook/router": "workspace:*" "@storybook/theming": "workspace:*" @@ -7174,7 +7174,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.2--canary.71.cad875c.0" + "@storybook/csf": "npm:0.1.2-next.0" "@storybook/global": "npm:^5.0.0" "@storybook/types": "workspace:*" "@types/qs": "npm:^6.9.5" @@ -7383,7 +7383,7 @@ __metadata: "@storybook/core-events": "workspace:*" "@storybook/core-server": "workspace:*" "@storybook/core-webpack": "workspace:*" - "@storybook/csf": "npm:0.1.2--canary.71.cad875c.0" + "@storybook/csf": "npm:0.1.2-next.0" "@storybook/csf-plugin": "workspace:*" "@storybook/csf-tools": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -7556,7 +7556,7 @@ __metadata: resolution: "@storybook/server@workspace:renderers/server" dependencies: "@storybook/core-client": "workspace:*" - "@storybook/csf": "npm:0.1.2--canary.71.cad875c.0" + "@storybook/csf": "npm:0.1.2-next.0" "@storybook/csf-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/preview-api": "workspace:*" @@ -7573,7 +7573,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@workspace:lib/source-loader" dependencies: - "@storybook/csf": "npm:0.1.2--canary.71.cad875c.0" + "@storybook/csf": "npm:0.1.2-next.0" "@storybook/types": "workspace:*" estraverse: "npm:^5.2.0" jest-specific-snapshot: "npm:^8.0.0" @@ -7767,7 +7767,7 @@ __metadata: resolution: "@storybook/types@workspace:lib/types" dependencies: "@storybook/channels": "workspace:*" - "@storybook/csf": "npm:0.1.2--canary.71.cad875c.0" + "@storybook/csf": "npm:0.1.2-next.0" "@types/babel__core": "npm:^7.0.0" "@types/express": "npm:^4.7.0" "@types/fs-extra": "npm:^11.0.1" From e3725f88c88e4ec371add1181fc10e4a8e9d4b14 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Wed, 22 Nov 2023 14:07:11 +0100 Subject: [PATCH 157/170] rename nextjs story target --- code/e2e-tests/framework-nextjs.spec.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/code/e2e-tests/framework-nextjs.spec.ts b/code/e2e-tests/framework-nextjs.spec.ts index 440c079d170..4ca67544db7 100644 --- a/code/e2e-tests/framework-nextjs.spec.ts +++ b/code/e2e-tests/framework-nextjs.spec.ts @@ -30,7 +30,7 @@ test.describe('Next.js', () => { // TODO: Test is flaky, investigate why test.skip('should lazy load images by default', async () => { - await sbPage.navigateToStory('frameworks/nextjs/Image', 'lazy'); + await sbPage.navigateToStory('stories/frameworks/nextjs/Image', 'lazy'); const img = sbPage.previewRoot().locator('img'); @@ -39,7 +39,7 @@ test.describe('Next.js', () => { // TODO: Test is flaky, investigate why test.skip('should eager load images when loading parameter is set to eager', async () => { - await sbPage.navigateToStory('frameworks/nextjs/Image', 'eager'); + await sbPage.navigateToStory('stories/frameworks/nextjs/Image', 'eager'); const img = sbPage.previewRoot().locator('img'); @@ -67,7 +67,10 @@ test.describe('Next.js', () => { test.beforeEach(async ({ page }) => { sbPage = new SbPage(page); - await sbPage.navigateToStory('frameworks/nextjs-nextjs-default-js/Navigation', 'default'); + await sbPage.navigateToStory( + 'stories/frameworks/nextjs-nextjs-default-js/Navigation', + 'default' + ); root = sbPage.previewRoot(); }); @@ -99,7 +102,7 @@ test.describe('Next.js', () => { test.beforeEach(async ({ page }) => { sbPage = new SbPage(page); - await sbPage.navigateToStory('frameworks/nextjs-nextjs-default-js/Router', 'default'); + await sbPage.navigateToStory('stories/frameworks/nextjs-nextjs-default-js/Router', 'default'); root = sbPage.previewRoot(); }); From 704feaa76d6db218375abdcbd63a514eab7d1357 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 22 Nov 2023 14:46:31 +0100 Subject: [PATCH 158/170] Fix type issues --- code/lib/types/src/modules/story.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/types/src/modules/story.ts b/code/lib/types/src/modules/story.ts index cc88807ade8..cd4e9f1c9d1 100644 --- a/code/lib/types/src/modules/story.ts +++ b/code/lib/types/src/modules/story.ts @@ -65,8 +65,8 @@ export type NormalizedComponentAnnotations[]; - loaders: LoaderFunction[]; + decorators?: DecoratorFunction[]; + loaders?: LoaderFunction[]; }; export type NormalizedStoryAnnotations = Omit< From b319f2dd420b0630f55e95c0bf6f08080277efef Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 22 Nov 2023 15:40:18 +0100 Subject: [PATCH 159/170] Update test --- .../preview-api/src/modules/store/csf/prepareStory.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts index a7cb1d971e6..b15c3a95565 100644 --- a/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts +++ b/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts @@ -343,9 +343,9 @@ describe('prepareStory', () => { ); const storyContext = { context: 'value' } as any; - const loadedContext = await applyLoaders(storyContext); + const loadedContext = await applyLoaders({ ...storyContext }); - expect(loader).toHaveBeenCalledWith(storyContext); + expect(loader).toHaveBeenCalledWith({ ...storyContext, loaded: {} }); expect(loadedContext).toEqual({ context: 'value', loaded: { foo: 7 }, From 980ca21a9d61bd112fa2f1637aec1039d1666e90 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 22 Nov 2023 15:40:18 +0100 Subject: [PATCH 160/170] Update test --- code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts index a7cb1d971e6..ef697a5c0c1 100644 --- a/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts +++ b/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts @@ -345,7 +345,7 @@ describe('prepareStory', () => { const storyContext = { context: 'value' } as any; const loadedContext = await applyLoaders(storyContext); - expect(loader).toHaveBeenCalledWith(storyContext); + expect(loader).toHaveBeenCalledWith({ ...storyContext, loaded: {} }); expect(loadedContext).toEqual({ context: 'value', loaded: { foo: 7 }, From 3c0b8cdaf646241c38a4e0165092b244737f1464 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Tue, 12 Sep 2023 19:32:43 +0100 Subject: [PATCH 161/170] add sb doctor command --- .../helpers/getDuplicatedDepsWarnings.ts | 104 +++++++++++++++ .../helpers/getMigrationSummary.ts | 104 +-------------- code/lib/cli/src/doctor/index.ts | 123 ++++++++++++++++++ code/lib/cli/src/generate.ts | 14 +- 4 files changed, 246 insertions(+), 99 deletions(-) create mode 100644 code/lib/cli/src/automigrate/helpers/getDuplicatedDepsWarnings.ts create mode 100644 code/lib/cli/src/doctor/index.ts diff --git a/code/lib/cli/src/automigrate/helpers/getDuplicatedDepsWarnings.ts b/code/lib/cli/src/automigrate/helpers/getDuplicatedDepsWarnings.ts new file mode 100644 index 00000000000..6c668e47c0a --- /dev/null +++ b/code/lib/cli/src/automigrate/helpers/getDuplicatedDepsWarnings.ts @@ -0,0 +1,104 @@ +import chalk from 'chalk'; +import { frameworkPackages, rendererPackages } from '@storybook/core-common'; +import { hasMultipleVersions } from './hasMultipleVersions'; +import type { InstallationMetadata } from '../../js-package-manager/types'; + +export const messageDivider = '\n\n'; + +// These packages are aliased by Storybook, so it doesn't matter if they're duplicated +export const allowList = [ + '@storybook/csf', + // see this file for more info: code/lib/preview/src/globals/types.ts + '@storybook/addons', + '@storybook/channel-postmessage', + '@storybook/channel-websocket', + '@storybook/channels', + '@storybook/client-api', + '@storybook/client-logger', + '@storybook/core-client', + '@storybook/core-events', + '@storybook/preview-web', + '@storybook/preview-api', + '@storybook/store', + + // see this file for more info: code/ui/manager/src/globals/types.ts + '@storybook/components', + '@storybook/router', + '@storybook/theming', + '@storybook/api', + '@storybook/manager-api', +]; + +// These packages definitely will cause issues if they're duplicated +export const disallowList = [ + Object.keys(rendererPackages), + Object.keys(frameworkPackages), + '@storybook/instrumenter', +]; + +export function getDuplicatedDepsWarnings( + installationMetadata?: InstallationMetadata +): string[] | undefined { + if ( + !installationMetadata?.duplicatedDependencies || + Object.keys(installationMetadata.duplicatedDependencies).length === 0 + ) { + return undefined; + } + + const messages: string[] = []; + + const { critical, trivial } = Object.entries( + installationMetadata?.duplicatedDependencies + ).reduce<{ + critical: string[]; + trivial: string[]; + }>( + (acc, [dep, versions]) => { + if (allowList.includes(dep)) { + return acc; + } + + const hasMultipleMajorVersions = hasMultipleVersions(versions); + + if (disallowList.includes(dep) && hasMultipleMajorVersions) { + acc.critical.push(`${chalk.redBright(dep)}:\n${versions.join(', ')}`); + } else { + acc.trivial.push(`${chalk.hex('#ff9800')(dep)}:\n${versions.join(', ')}`); + } + + return acc; + }, + { critical: [], trivial: [] } + ); + + if (critical.length === 0 && trivial.length === 0) { + return messages; + } + + if (critical.length > 0) { + messages.push( + `${chalk.bold( + 'Critical:' + )} The following dependencies are duplicated and WILL cause unexpected behavior:` + ); + messages.push(critical.join(messageDivider)); + } + + if (trivial.length > 0) { + messages.push( + `${chalk.bold( + 'Attention:' + )} The following dependencies are duplicated which might cause unexpected behavior:` + ); + messages.push(trivial.join(messageDivider)); + } + + messages.push( + `You can find more information for a given dependency by running ${chalk.cyan( + `${installationMetadata.infoCommand} ` + )}` + ); + + return messages; +} diff --git a/code/lib/cli/src/automigrate/helpers/getMigrationSummary.ts b/code/lib/cli/src/automigrate/helpers/getMigrationSummary.ts index 6a16e2ae329..c727f8d49f4 100644 --- a/code/lib/cli/src/automigrate/helpers/getMigrationSummary.ts +++ b/code/lib/cli/src/automigrate/helpers/getMigrationSummary.ts @@ -1,13 +1,12 @@ import chalk from 'chalk'; import boxen from 'boxen'; -import { frameworkPackages, rendererPackages } from '@storybook/core-common'; import dedent from 'ts-dedent'; import type { FixSummary } from '../types'; import { FixStatus } from '../types'; -import { hasMultipleVersions } from './hasMultipleVersions'; import type { InstallationMetadata } from '../../js-package-manager/types'; +import { getDuplicatedDepsWarnings } from './getDuplicatedDepsWarnings'; -const messageDivider = '\n\n'; +export const messageDivider = '\n\n'; const segmentDivider = '\n\nā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€\n\n'; function getGlossaryMessages( @@ -76,11 +75,10 @@ export function getMigrationSummary({ And reach out on Discord if you need help: ${chalk.yellow('https://discord.gg/storybook')} `); - if ( - installationMetadata?.duplicatedDependencies && - Object.keys(installationMetadata.duplicatedDependencies).length > 0 - ) { - messages.push(getWarnings(installationMetadata).join(messageDivider)); + const duplicatedDepsMessage = getDuplicatedDepsWarnings(installationMetadata); + + if (duplicatedDepsMessage) { + messages.push(duplicatedDepsMessage.join(messageDivider)); } const hasNoFixes = Object.values(fixResults).every((r) => r === FixStatus.UNNECESSARY); @@ -102,93 +100,3 @@ export function getMigrationSummary({ borderColor: hasFailures ? 'red' : 'green', }); } - -// These packages are aliased by Storybook, so it doesn't matter if they're duplicated -const allowList = [ - '@storybook/csf', - // see this file for more info: code/lib/preview/src/globals/types.ts - '@storybook/addons', - '@storybook/channel-postmessage', // @deprecated: remove in 8.0 - '@storybook/channel-websocket', // @deprecated: remove in 8.0 - '@storybook/channels', - '@storybook/client-api', - '@storybook/client-logger', - '@storybook/core-client', - '@storybook/core-events', - '@storybook/preview-web', - '@storybook/preview-api', - '@storybook/store', - - // see this file for more info: code/ui/manager/src/globals/types.ts - '@storybook/components', - '@storybook/router', - '@storybook/theming', - '@storybook/api', // @deprecated: remove in 8.0 - '@storybook/manager-api', -]; - -// These packages definitely will cause issues if they're duplicated -const disallowList = [ - Object.keys(rendererPackages), - Object.keys(frameworkPackages), - '@storybook/instrumenter', -]; - -function getWarnings(installationMetadata: InstallationMetadata) { - const messages = []; - - const { critical, trivial } = Object.entries( - installationMetadata?.duplicatedDependencies - ).reduce<{ - critical: string[]; - trivial: string[]; - }>( - (acc, [dep, versions]) => { - if (allowList.includes(dep)) { - return acc; - } - - const hasMultipleMajorVersions = hasMultipleVersions(versions); - - if (disallowList.includes(dep) && hasMultipleMajorVersions) { - acc.critical.push(`${chalk.redBright(dep)}:\n${versions.join(', ')}`); - } else { - acc.trivial.push(`${chalk.hex('#ff9800')(dep)}:\n${versions.join(', ')}`); - } - - return acc; - }, - { critical: [], trivial: [] } - ); - - if (critical.length > 0) { - messages.push( - `${chalk.bold( - 'Critical:' - )} The following dependencies are duplicated and WILL cause unexpected behavior:` - ); - messages.push(critical.join(messageDivider)); - } - - if (trivial.length > 0) { - messages.push( - `${chalk.bold( - 'Attention:' - )} The following dependencies are duplicated which might cause unexpected behavior:` - ); - messages.push(trivial.join(messageDivider)); - } - - messages.push( - `You can find more information for a given dependency by running ${chalk.cyan( - `${installationMetadata.infoCommand} ` - )}` - ); - messages.push( - `Please try de-duplicating these dependencies by running ${chalk.cyan( - `${installationMetadata.dedupeCommand}` - )}` - ); - - return messages; -} diff --git a/code/lib/cli/src/doctor/index.ts b/code/lib/cli/src/doctor/index.ts new file mode 100644 index 00000000000..94dfac234aa --- /dev/null +++ b/code/lib/cli/src/doctor/index.ts @@ -0,0 +1,123 @@ +import chalk from 'chalk'; +import boxen from 'boxen'; +import { createWriteStream, move, remove } from 'fs-extra'; +import tempy from 'tempy'; +import dedent from 'ts-dedent'; + +import { join } from 'path'; +import { JsPackageManagerFactory } from '../js-package-manager'; +import type { PackageManagerName } from '../js-package-manager'; + +import { getStorybookData } from '../automigrate/helpers/mainConfigFile'; +import { getDuplicatedDepsWarnings } from '../automigrate/helpers/getDuplicatedDepsWarnings'; +import { cleanLog } from '../automigrate/helpers/cleanLog'; +import { getIncompatibleAddons } from '../automigrate/helpers/getIncompatibleAddons'; +import { incompatibleAddons } from '../automigrate/fixes/incompatible-addons'; + +const logger = console; +const LOG_FILE_NAME = 'doctor-storybook.log'; +const LOG_FILE_PATH = join(process.cwd(), LOG_FILE_NAME); +let TEMP_LOG_FILE_PATH = ''; + +const originalStdOutWrite = process.stdout.write.bind(process.stdout); +const originalStdErrWrite = process.stderr.write.bind(process.stdout); + +const augmentLogsToFile = () => { + TEMP_LOG_FILE_PATH = tempy.file({ name: LOG_FILE_NAME }); + const logStream = createWriteStream(TEMP_LOG_FILE_PATH); + + process.stdout.write = (d: string) => { + originalStdOutWrite(d); + return logStream.write(cleanLog(d)); + }; + process.stderr.write = (d: string) => { + return logStream.write(cleanLog(d)); + }; +}; + +const cleanup = () => { + process.stdout.write = originalStdOutWrite; + process.stderr.write = originalStdErrWrite; +}; + +type DoctorOptions = { + configDir?: string; + packageManager?: PackageManagerName; +}; + +export const doctor = async ({ + configDir: userSpecifiedConfigDir, + packageManager: pkgMgr, +}: DoctorOptions = {}) => { + augmentLogsToFile(); + const diagnosticMessages: string[] = []; + + logger.info('šŸ©ŗ checking the health of your Storybook..'); + + const packageManager = JsPackageManagerFactory.getPackageManager({ force: pkgMgr }); + let storybookVersion; + let mainConfig; + + try { + const storybookData = await getStorybookData({ + configDir: userSpecifiedConfigDir, + packageManager, + }); + storybookVersion = storybookData.storybookVersion; + mainConfig = storybookData.mainConfig; + } catch (err) { + if (err.message.includes('No configuration files have been found')) { + logger.info( + dedent`[Storybook doctor] Could not find or evaluate your Storybook main.js config directory at ${chalk.blue( + userSpecifiedConfigDir || '.storybook' + )} so the doctor command cannot proceed. You might be running this command in a monorepo or a non-standard project structure. If that is the case, please rerun this command by specifying the path to your Storybook config directory via the --config-dir option.` + ); + } + logger.info(dedent`[Storybook doctor] āŒ ${err.message}`); + logger.info('Please fix the error and try again.'); + } + + if (!storybookVersion) { + logger.info(dedent` + [Storybook doctor] āŒ Unable to determine Storybook version so the command will not proceed. + šŸ¤” Are you running storybook doctor from your project directory? Please specify your Storybook config directory with the --config-dir flag. + `); + process.exit(1); + } + + const installationMetadata = await packageManager.findInstallations([ + '@storybook/*', + 'storybook', + ]); + + diagnosticMessages.push(getDuplicatedDepsWarnings(installationMetadata)?.join('\n')); + + const incompatibleAddonList = await getIncompatibleAddons(mainConfig); + if (incompatibleAddonList.length > 0) { + diagnosticMessages.push(incompatibleAddons.prompt({ incompatibleAddonList })); + } + + logger.info(); + + const finalMessages = diagnosticMessages.filter(Boolean); + + if (finalMessages.length > 0) { + finalMessages.push(`You can find the full logs in ${chalk.cyan(LOG_FILE_PATH)}`); + + logger.info( + boxen(finalMessages.join('\n\n-------\n\n'), { + borderStyle: 'round', + padding: 1, + title: 'Diagnostics', + borderColor: 'red', + }) + ); + await move(TEMP_LOG_FILE_PATH, join(process.cwd(), LOG_FILE_NAME), { overwrite: true }); + } else { + logger.info('šŸ„³ Your Storybook project looks good!'); + await remove(TEMP_LOG_FILE_PATH); + } + logger.info(); + + cleanup(); +}; diff --git a/code/lib/cli/src/generate.ts b/code/lib/cli/src/generate.ts index e5811888521..8f37de77293 100644 --- a/code/lib/cli/src/generate.ts +++ b/code/lib/cli/src/generate.ts @@ -23,6 +23,7 @@ import { build } from './build'; import { parseList, getEnvConfig } from './utils'; import versions from './versions'; import { JsPackageManagerFactory } from './js-package-manager'; +import { doctor } from './doctor'; addToGlobalContext('cliVersion', versions.storybook); @@ -170,7 +171,7 @@ command('link ') ); command('automigrate [fixId]') - .description('Check storybook for known problems or migrations and apply fixes') + .description('Check storybook for incompatibilities or migrations and apply fixes') .option('-y --yes', 'Skip prompting the user') .option('-n --dry-run', 'Only check for fixes, do not actually run them') .option('--package-manager ', 'Force package manager') @@ -189,6 +190,17 @@ command('automigrate [fixId]') }); }); +command('doctor') + .description('Check Storybook for known problems and provide suggestions or fixes') + .option('--package-manager ', 'Force package manager') + .option('-c, --config-dir ', 'Directory of Storybook configuration') + .action(async (options) => { + await doctor(options).catch((e) => { + logger.error(e); + process.exit(1); + }); + }); + command('dev') .option('-p, --port ', 'Port to run Storybook', (str) => parseInt(str, 10)) .option('-h, --host ', 'Host to run Storybook') From 1cfce18cd60a42ff21e85ceac42726cd426dd889 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 22 Nov 2023 15:34:55 +0100 Subject: [PATCH 162/170] move utilities to doctor directory, add mismatching version checks --- .../automigrate/fixes/incompatible-addons.ts | 4 +- .../helpers/getDuplicatedDepsWarnings.ts | 104 --------------- .../helpers/getMigrationSummary.ts | 2 +- .../src/doctor/getDuplicatedDepsWarnings.ts | 119 ++++++++++++++++++ .../getIncompatibleAddons.ts | 17 ++- .../doctor/getMismatchingVersionsWarning.ts | 95 ++++++++++++++ .../helpers => doctor}/hasMultipleVersions.ts | 0 code/lib/cli/src/doctor/index.ts | 29 +++-- .../src/utils/warnOnIncompatibleAddons.ts | 2 +- 9 files changed, 248 insertions(+), 124 deletions(-) delete mode 100644 code/lib/cli/src/automigrate/helpers/getDuplicatedDepsWarnings.ts create mode 100644 code/lib/cli/src/doctor/getDuplicatedDepsWarnings.ts rename code/lib/cli/src/{automigrate/helpers => doctor}/getIncompatibleAddons.ts (84%) create mode 100644 code/lib/cli/src/doctor/getMismatchingVersionsWarning.ts rename code/lib/cli/src/{automigrate/helpers => doctor}/hasMultipleVersions.ts (100%) diff --git a/code/lib/cli/src/automigrate/fixes/incompatible-addons.ts b/code/lib/cli/src/automigrate/fixes/incompatible-addons.ts index 3455408f279..ce9d01ccd96 100644 --- a/code/lib/cli/src/automigrate/fixes/incompatible-addons.ts +++ b/code/lib/cli/src/automigrate/fixes/incompatible-addons.ts @@ -1,7 +1,7 @@ import chalk from 'chalk'; import dedent from 'ts-dedent'; import type { Fix } from '../types'; -import { getIncompatibleAddons } from '../helpers/getIncompatibleAddons'; +import { getIncompatibleAddons } from '../../doctor/getIncompatibleAddons'; interface IncompatibleAddonsOptions { incompatibleAddonList: { name: string; version: string }[]; @@ -19,7 +19,7 @@ export const incompatibleAddons: Fix = { prompt({ incompatibleAddonList }) { return dedent` ${chalk.bold( - chalk.red('Attention') + 'Attention' )}: We've detected that you're using the following addons in versions which are known to be incompatible with Storybook 7: ${incompatibleAddonList diff --git a/code/lib/cli/src/automigrate/helpers/getDuplicatedDepsWarnings.ts b/code/lib/cli/src/automigrate/helpers/getDuplicatedDepsWarnings.ts deleted file mode 100644 index 6c668e47c0a..00000000000 --- a/code/lib/cli/src/automigrate/helpers/getDuplicatedDepsWarnings.ts +++ /dev/null @@ -1,104 +0,0 @@ -import chalk from 'chalk'; -import { frameworkPackages, rendererPackages } from '@storybook/core-common'; -import { hasMultipleVersions } from './hasMultipleVersions'; -import type { InstallationMetadata } from '../../js-package-manager/types'; - -export const messageDivider = '\n\n'; - -// These packages are aliased by Storybook, so it doesn't matter if they're duplicated -export const allowList = [ - '@storybook/csf', - // see this file for more info: code/lib/preview/src/globals/types.ts - '@storybook/addons', - '@storybook/channel-postmessage', - '@storybook/channel-websocket', - '@storybook/channels', - '@storybook/client-api', - '@storybook/client-logger', - '@storybook/core-client', - '@storybook/core-events', - '@storybook/preview-web', - '@storybook/preview-api', - '@storybook/store', - - // see this file for more info: code/ui/manager/src/globals/types.ts - '@storybook/components', - '@storybook/router', - '@storybook/theming', - '@storybook/api', - '@storybook/manager-api', -]; - -// These packages definitely will cause issues if they're duplicated -export const disallowList = [ - Object.keys(rendererPackages), - Object.keys(frameworkPackages), - '@storybook/instrumenter', -]; - -export function getDuplicatedDepsWarnings( - installationMetadata?: InstallationMetadata -): string[] | undefined { - if ( - !installationMetadata?.duplicatedDependencies || - Object.keys(installationMetadata.duplicatedDependencies).length === 0 - ) { - return undefined; - } - - const messages: string[] = []; - - const { critical, trivial } = Object.entries( - installationMetadata?.duplicatedDependencies - ).reduce<{ - critical: string[]; - trivial: string[]; - }>( - (acc, [dep, versions]) => { - if (allowList.includes(dep)) { - return acc; - } - - const hasMultipleMajorVersions = hasMultipleVersions(versions); - - if (disallowList.includes(dep) && hasMultipleMajorVersions) { - acc.critical.push(`${chalk.redBright(dep)}:\n${versions.join(', ')}`); - } else { - acc.trivial.push(`${chalk.hex('#ff9800')(dep)}:\n${versions.join(', ')}`); - } - - return acc; - }, - { critical: [], trivial: [] } - ); - - if (critical.length === 0 && trivial.length === 0) { - return messages; - } - - if (critical.length > 0) { - messages.push( - `${chalk.bold( - 'Critical:' - )} The following dependencies are duplicated and WILL cause unexpected behavior:` - ); - messages.push(critical.join(messageDivider)); - } - - if (trivial.length > 0) { - messages.push( - `${chalk.bold( - 'Attention:' - )} The following dependencies are duplicated which might cause unexpected behavior:` - ); - messages.push(trivial.join(messageDivider)); - } - - messages.push( - `You can find more information for a given dependency by running ${chalk.cyan( - `${installationMetadata.infoCommand} ` - )}` - ); - - return messages; -} diff --git a/code/lib/cli/src/automigrate/helpers/getMigrationSummary.ts b/code/lib/cli/src/automigrate/helpers/getMigrationSummary.ts index c727f8d49f4..583d1b9170e 100644 --- a/code/lib/cli/src/automigrate/helpers/getMigrationSummary.ts +++ b/code/lib/cli/src/automigrate/helpers/getMigrationSummary.ts @@ -4,7 +4,7 @@ import dedent from 'ts-dedent'; import type { FixSummary } from '../types'; import { FixStatus } from '../types'; import type { InstallationMetadata } from '../../js-package-manager/types'; -import { getDuplicatedDepsWarnings } from './getDuplicatedDepsWarnings'; +import { getDuplicatedDepsWarnings } from '../../doctor/getDuplicatedDepsWarnings'; export const messageDivider = '\n\n'; const segmentDivider = '\n\nā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€ā”€\n\n'; diff --git a/code/lib/cli/src/doctor/getDuplicatedDepsWarnings.ts b/code/lib/cli/src/doctor/getDuplicatedDepsWarnings.ts new file mode 100644 index 00000000000..0015798988d --- /dev/null +++ b/code/lib/cli/src/doctor/getDuplicatedDepsWarnings.ts @@ -0,0 +1,119 @@ +import chalk from 'chalk'; +import { frameworkPackages, rendererPackages } from '@storybook/core-common'; +import { hasMultipleVersions } from './hasMultipleVersions'; +import type { InstallationMetadata } from '../js-package-manager/types'; + +export const messageDivider = '\n\n'; + +// These packages are aliased by Storybook, so it doesn't matter if they're duplicated +export const allowList = [ + '@storybook/csf', + // see this file for more info: code/lib/preview/src/globals/types.ts + '@storybook/addons', + '@storybook/channel-postmessage', + '@storybook/channel-websocket', + '@storybook/client-api', + '@storybook/client-logger', + '@storybook/core-client', + '@storybook/preview-web', + '@storybook/preview-api', + '@storybook/store', + + // see this file for more info: code/ui/manager/src/globals/types.ts + '@storybook/components', + '@storybook/router', + '@storybook/theming', + '@storybook/api', + '@storybook/manager-api', +]; + +// These packages definitely will cause issues if they're duplicated +export const disallowList = [ + Object.keys(rendererPackages), + Object.keys(frameworkPackages), + '@storybook/core-events', + '@storybook/instrumenter', + '@storybook/core-common', + '@storybook/core-server', + '@storybook/manager', + '@storybook/preview', +]; + +export function getDuplicatedDepsWarnings( + installationMetadata?: InstallationMetadata +): string[] | undefined { + try { + if ( + !installationMetadata?.duplicatedDependencies || + Object.keys(installationMetadata.duplicatedDependencies).length === 0 + ) { + return undefined; + } + + const messages: string[] = []; + + const { critical, trivial } = Object.entries( + installationMetadata?.duplicatedDependencies + ).reduce<{ + critical: string[]; + trivial: string[]; + }>( + (acc, [dep, packageVersions]) => { + if (allowList.includes(dep)) { + return acc; + } + + const hasMultipleMajorVersions = hasMultipleVersions(packageVersions); + + if (disallowList.includes(dep) && hasMultipleMajorVersions) { + acc.critical.push(`${chalk.redBright(dep)}:\n${packageVersions.join(', ')}`); + } else { + acc.trivial.push(`${chalk.hex('#ff9800')(dep)}:\n${packageVersions.join(', ')}`); + } + + return acc; + }, + { critical: [], trivial: [] } + ); + + if (critical.length === 0 && trivial.length === 0) { + return messages; + } + + if (critical.length > 0) { + messages.push( + `${chalk.bold( + 'Critical:' + )} The following dependencies are duplicated and WILL cause unexpected behavior:` + ); + messages.push(critical.join(messageDivider), '\n'); + } + + if (trivial.length > 0) { + messages.push( + `${chalk.bold( + 'Attention:' + )} The following dependencies are duplicated which might cause unexpected behavior:` + ); + messages.push(trivial.join(messageDivider)); + } + + messages.push( + '\n', + `You can find more information for a given dependency by running ${chalk.cyan( + `${installationMetadata.infoCommand} ` + )}` + ); + + messages.push( + '\n', + `Please try de-duplicating these dependencies by running ${chalk.cyan( + `${installationMetadata.dedupeCommand}` + )}` + ); + + return messages; + } catch (err) { + return undefined; + } +} diff --git a/code/lib/cli/src/automigrate/helpers/getIncompatibleAddons.ts b/code/lib/cli/src/doctor/getIncompatibleAddons.ts similarity index 84% rename from code/lib/cli/src/automigrate/helpers/getIncompatibleAddons.ts rename to code/lib/cli/src/doctor/getIncompatibleAddons.ts index d6fc28ed776..135865f949c 100644 --- a/code/lib/cli/src/automigrate/helpers/getIncompatibleAddons.ts +++ b/code/lib/cli/src/doctor/getIncompatibleAddons.ts @@ -1,7 +1,7 @@ import type { StorybookConfig } from '@storybook/types'; import semver from 'semver'; -import { getAddonNames } from './mainConfigFile'; -import { JsPackageManagerFactory } from '../../js-package-manager'; +import { getAddonNames } from '../automigrate/helpers/mainConfigFile'; +import { JsPackageManagerFactory } from '../js-package-manager'; export const getIncompatibleAddons = async ( mainConfig: StorybookConfig, @@ -38,12 +38,13 @@ export const getIncompatibleAddons = async ( const addons = getAddonNames(mainConfig).filter((addon) => addon in incompatibleList); - if (addons.length === 0) { - return []; - } + const dependencies = await packageManager.getAllDependencies(); + const storybookPackages = Object.keys(dependencies).filter((dep) => dep.includes('storybook')); + + const packagesToCheck = [...new Set([...addons, ...storybookPackages])]; const addonVersions = await Promise.all( - addons.map( + packagesToCheck.map( async (addon) => ({ name: addon, @@ -52,6 +53,10 @@ export const getIncompatibleAddons = async ( ) ); + if (addonVersions.length === 0) { + return []; + } + const incompatibleAddons: { name: string; version: string }[] = []; addonVersions.forEach(({ name, version: installedVersion }) => { if (installedVersion === null) return; diff --git a/code/lib/cli/src/doctor/getMismatchingVersionsWarning.ts b/code/lib/cli/src/doctor/getMismatchingVersionsWarning.ts new file mode 100644 index 00000000000..9aa0d424e01 --- /dev/null +++ b/code/lib/cli/src/doctor/getMismatchingVersionsWarning.ts @@ -0,0 +1,95 @@ +import chalk from 'chalk'; +import semver from 'semver'; +import { frameworkPackages } from '@storybook/core-common'; +import type { InstallationMetadata } from '../js-package-manager/types'; +import storybookCorePackages from '../versions'; + +function getPrimaryVersion(name: string, installationMetadata?: InstallationMetadata) { + const packageMetadata = installationMetadata?.dependencies[name]; + if (!packageMetadata) { + return undefined; + } + + return packageMetadata[0]?.version; +} + +export function getMismatchingVersionsWarnings( + installationMetadata?: InstallationMetadata, + allDependencies?: Record +): string | undefined { + const messages: string[] = []; + try { + const frameworkPackageName = Object.keys(installationMetadata?.dependencies).find( + (packageName) => { + return Object.keys(frameworkPackages).includes(packageName); + } + ); + const cliVersion = getPrimaryVersion('@storybook/cli', installationMetadata); + const frameworkVersion = getPrimaryVersion(frameworkPackageName, installationMetadata); + + if (!cliVersion || !frameworkVersion || semver.eq(cliVersion, frameworkVersion)) { + return undefined; + } + + messages.push( + `${chalk.bold( + 'Attention:' + )} There seems to be a mismatch between your Storybook package versions. This can result in a broken Storybook installation.` + ); + + let versionToCompare: string; + let packageToDisplay: string; + if (semver.lt(cliVersion, frameworkVersion)) { + versionToCompare = frameworkVersion; + packageToDisplay = frameworkPackageName; + } else { + versionToCompare = cliVersion; + packageToDisplay = 'storybook'; + } + + messages.push( + `The version of your storybook core packages should align with ${chalk.yellow( + versionToCompare + )} (from the ${chalk.cyan(packageToDisplay)} package) or higher.` + ); + + const filteredDependencies = Object.entries(installationMetadata?.dependencies).filter( + ([name, packages]) => { + if (Object.keys(storybookCorePackages).includes(name)) { + const packageVersion = packages[0].version; + return packageVersion !== versionToCompare; + } + + return false; + } + ); + + if (filteredDependencies.length > 0) { + messages.push( + `Based on your lockfile, these dependencies should be upgraded:`, + filteredDependencies + .map( + ([name, dep]) => + `${chalk.hex('#ff9800')(name)}: ${dep[0].version} ${ + allDependencies[name] ? '(in your package.json)' : '' + }` + ) + .join('\n') + ); + } + + messages.push( + `You can run ${chalk.cyan( + 'npx storybook@latest upgrade' + )} to upgrade all of your Storybook packages to the latest version. + + Alternatively you can try manually changing the versions to match in your package.json. We also recommend regenerating your lockfile, or running the following command to possibly deduplicate your Storybook package versions: ${chalk.cyan( + installationMetadata.dedupeCommand + )}` + ); + + return messages.join('\n\n'); + } catch (err) { + return undefined; + } +} diff --git a/code/lib/cli/src/automigrate/helpers/hasMultipleVersions.ts b/code/lib/cli/src/doctor/hasMultipleVersions.ts similarity index 100% rename from code/lib/cli/src/automigrate/helpers/hasMultipleVersions.ts rename to code/lib/cli/src/doctor/hasMultipleVersions.ts diff --git a/code/lib/cli/src/doctor/index.ts b/code/lib/cli/src/doctor/index.ts index 94dfac234aa..bb7bcc6c3e1 100644 --- a/code/lib/cli/src/doctor/index.ts +++ b/code/lib/cli/src/doctor/index.ts @@ -3,16 +3,16 @@ import boxen from 'boxen'; import { createWriteStream, move, remove } from 'fs-extra'; import tempy from 'tempy'; import dedent from 'ts-dedent'; - import { join } from 'path'; + import { JsPackageManagerFactory } from '../js-package-manager'; import type { PackageManagerName } from '../js-package-manager'; - import { getStorybookData } from '../automigrate/helpers/mainConfigFile'; -import { getDuplicatedDepsWarnings } from '../automigrate/helpers/getDuplicatedDepsWarnings'; import { cleanLog } from '../automigrate/helpers/cleanLog'; -import { getIncompatibleAddons } from '../automigrate/helpers/getIncompatibleAddons'; import { incompatibleAddons } from '../automigrate/fixes/incompatible-addons'; +import { getDuplicatedDepsWarnings } from './getDuplicatedDepsWarnings'; +import { getIncompatibleAddons } from './getIncompatibleAddons'; +import { getMismatchingVersionsWarnings } from './getMismatchingVersionsWarning'; const logger = console; const LOG_FILE_NAME = 'doctor-storybook.log'; @@ -85,18 +85,27 @@ export const doctor = async ({ process.exit(1); } + const incompatibleAddonList = await getIncompatibleAddons(mainConfig); + console.log({ incompatibleAddonList }); + if (incompatibleAddonList.length > 0) { + diagnosticMessages.push(incompatibleAddons.prompt({ incompatibleAddonList })); + } + const installationMetadata = await packageManager.findInstallations([ '@storybook/*', 'storybook', ]); - diagnosticMessages.push(getDuplicatedDepsWarnings(installationMetadata)?.join('\n')); - - const incompatibleAddonList = await getIncompatibleAddons(mainConfig); - if (incompatibleAddonList.length > 0) { - diagnosticMessages.push(incompatibleAddons.prompt({ incompatibleAddonList })); + const allDependencies = await packageManager.getAllDependencies(); + const mismatchingVersionMessage = getMismatchingVersionsWarnings( + installationMetadata, + allDependencies + ); + if (mismatchingVersionMessage) { + diagnosticMessages.push(mismatchingVersionMessage); + } else { + diagnosticMessages.push(getDuplicatedDepsWarnings(installationMetadata)?.join('\n')); } - logger.info(); const finalMessages = diagnosticMessages.filter(Boolean); diff --git a/code/lib/core-server/src/utils/warnOnIncompatibleAddons.ts b/code/lib/core-server/src/utils/warnOnIncompatibleAddons.ts index 23e17c77bc5..fd4aaac3928 100644 --- a/code/lib/core-server/src/utils/warnOnIncompatibleAddons.ts +++ b/code/lib/core-server/src/utils/warnOnIncompatibleAddons.ts @@ -3,7 +3,7 @@ import { logger } from '@storybook/node-logger'; import chalk from 'chalk'; import dedent from 'ts-dedent'; -import { getIncompatibleAddons } from '../../../cli/src/automigrate/helpers/getIncompatibleAddons'; +import { getIncompatibleAddons } from '../../../cli/src/doctor/getIncompatibleAddons'; export const warnOnIncompatibleAddons = async (config: StorybookConfig) => { const incompatibleAddons = await getIncompatibleAddons(config); From daf70838635eef0d550a74cd3c2df275e550b681 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 22 Nov 2023 15:41:33 +0100 Subject: [PATCH 163/170] fix tests --- .../fixes/incompatible-addons.test.ts | 35 ++++++++++++++++++- .../helpers/getMigrationSummary.test.ts | 13 +++++-- 2 files changed, 45 insertions(+), 3 deletions(-) diff --git a/code/lib/cli/src/automigrate/fixes/incompatible-addons.test.ts b/code/lib/cli/src/automigrate/fixes/incompatible-addons.test.ts index 46978eba839..fd4705acf87 100644 --- a/code/lib/cli/src/automigrate/fixes/incompatible-addons.test.ts +++ b/code/lib/cli/src/automigrate/fixes/incompatible-addons.test.ts @@ -24,7 +24,7 @@ const check = async ({ describe('incompatible-addons fix', () => { afterEach(jest.restoreAllMocks); - it('should show incompatible addons', async () => { + it('should show incompatible addons registered in main.js', async () => { await expect( check({ packageManager: { @@ -38,6 +38,7 @@ describe('incompatible-addons fix', () => { return Promise.resolve(null); } }, + getAllDependencies: async () => ({}), }, main: { addons: ['@storybook/essentials', '@storybook/addon-info'] }, }) @@ -51,6 +52,37 @@ describe('incompatible-addons fix', () => { }); }); + it('should show incompatible addons from package.json', async () => { + await expect( + check({ + packageManager: { + getPackageVersion(packageName, basePath) { + switch (packageName) { + case '@storybook/addon-essentials': + return Promise.resolve('7.0.0'); + case '@storybook/addon-info': + return Promise.resolve('5.3.21'); + default: + return Promise.resolve(null); + } + }, + getAllDependencies: async () => ({ + '@storybook/addon-essentials': '7.0.0', + '@storybook/addon-info': '5.3.21', + }), + }, + main: { addons: [] }, + }) + ).resolves.toEqual({ + incompatibleAddonList: [ + { + name: '@storybook/addon-info', + version: '5.3.21', + }, + ], + }); + }); + it('no-op when there are no incompatible addons', async () => { await expect( check({ @@ -63,6 +95,7 @@ describe('incompatible-addons fix', () => { return Promise.resolve(null); } }, + getAllDependencies: async () => ({}), }, main: { addons: ['@storybook/essentials'] }, }) diff --git a/code/lib/cli/src/automigrate/helpers/getMigrationSummary.test.ts b/code/lib/cli/src/automigrate/helpers/getMigrationSummary.test.ts index f5569ae2f49..8a28a6c4fe2 100644 --- a/code/lib/cli/src/automigrate/helpers/getMigrationSummary.test.ts +++ b/code/lib/cli/src/automigrate/helpers/getMigrationSummary.test.ts @@ -139,16 +139,25 @@ describe('getMigrationSummary', () => { @storybook/instrumenter: 6.0.0, 7.1.0 - Attention: The following dependencies are duplicated which might cause unexpected behavior: - @storybook/core-common: 6.0.0, 7.1.0 + + + + Attention: The following dependencies are duplicated which might cause unexpected behavior: + @storybook/addon-essentials: 7.0.0, 7.1.0 + + + You can find more information for a given dependency by running yarn why + + + Please try de-duplicating these dependencies by running yarn dedupe" `); }); From 107ce09c1bde579aeefa6199766bf2245a4244f8 Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 22 Nov 2023 15:43:19 +0100 Subject: [PATCH 164/170] add doctor command in error message --- code/lib/core-events/src/errors/server-errors.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/core-events/src/errors/server-errors.ts b/code/lib/core-events/src/errors/server-errors.ts index 964bbbb64a9..f4ecab54477 100644 --- a/code/lib/core-events/src/errors/server-errors.ts +++ b/code/lib/core-events/src/errors/server-errors.ts @@ -406,7 +406,7 @@ export class NoMatchingExportError extends StorybookError { Correct example: { "@storybook/react": "7.5.3", "@storybook/react-vite": "7.5.3", "storybook": "7.5.3" } - Clearing your lock file and reinstalling your dependencies might help as well, as sometimes the version you see in your package.json might not be the one defined in your lock file, leading to version inconsistency issues. + Please run \`npx storybook@latest doctor\` for guidance on how to fix this issue. `; } } From 9609e12e19416b581b4d2c3b810533477a671c09 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 22 Nov 2023 15:45:31 +0100 Subject: [PATCH 165/170] Address review --- .../preview-api/src/modules/store/csf/normalizeArrays.ts | 2 +- code/lib/preview-api/src/modules/store/csf/prepareStory.ts | 7 +++---- code/lib/test/src/index.ts | 5 +++-- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/code/lib/preview-api/src/modules/store/csf/normalizeArrays.ts b/code/lib/preview-api/src/modules/store/csf/normalizeArrays.ts index 7253f120e24..96344e6fac1 100644 --- a/code/lib/preview-api/src/modules/store/csf/normalizeArrays.ts +++ b/code/lib/preview-api/src/modules/store/csf/normalizeArrays.ts @@ -1,4 +1,4 @@ export const normalizeArrays = (array: T[] | T | undefined): T[] => { if (Array.isArray(array)) return array; - return typeof array === 'function' ? [array] : []; + return array ? [array] : []; }; diff --git a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts index 64306fedb32..311a4467c78 100644 --- a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts +++ b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts @@ -1,4 +1,4 @@ -/* eslint-disable no-restricted-syntax,no-await-in-loop,@typescript-eslint/no-loop-func */ +/* eslint-disable no-restricted-syntax,no-await-in-loop,@typescript-eslint/no-loop-func,no-underscore-dangle */ import { global } from '@storybook/global'; import type { @@ -55,8 +55,8 @@ export function prepareStory( ): Promise & { loaded: StoryContext['loaded'] }> => { let updatedContext = { ...context, loaded: {} }; for (const loaders of [ - ...('testPackageLoaders' in global && Array.isArray(global.testPackageLoaders) - ? [global.testPackageLoaders] + ...('__STORYBOOK_TEST_LOADERS__' in global && Array.isArray(global.__STORYBOOK_TEST_LOADERS__) + ? [global.__STORYBOOK_TEST_LOADERS__] : []), normalizeArrays(projectAnnotations.loaders), normalizeArrays(componentAnnotations.loaders), @@ -173,7 +173,6 @@ function preparePartialAnnotations( const { passArgsFirst = true } = parameters; - // eslint-disable-next-line no-underscore-dangle parameters.__isArgsStory = passArgsFirst && render && render.length > 0; } diff --git a/code/lib/test/src/index.ts b/code/lib/test/src/index.ts index 57612fc8a6c..600c68f1d3b 100644 --- a/code/lib/test/src/index.ts +++ b/code/lib/test/src/index.ts @@ -36,5 +36,6 @@ const resetAllMocksLoader: LoaderFunction = ({ parameters }) => { } }; -// @ts-expect-error Wwe are using this as a default loader, if the test package is used. But we don't want to get into optional peer dep shenanigans. -global.testPackageLoaders = [resetAllMocksLoader]; +// @ts-expect-error We are using this as a default Storybook loader, when the test package is used. This avoids the need for optional peer dependency workarounds. +// eslint-disable-next-line no-underscore-dangle +global.__STORYBOOK_TEST_LOADERS__ = [resetAllMocksLoader]; From 359c8954a184138ee9c826a5c5b1ec1fd3b61189 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 22 Nov 2023 16:06:54 +0100 Subject: [PATCH 166/170] Update csf version --- code/addons/links/package.json | 2 +- code/addons/storyshots-puppeteer/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-server/package.json | 2 +- code/lib/csf-tools/package.json | 2 +- code/lib/manager-api/package.json | 2 +- code/lib/preview-api/package.json | 2 +- code/lib/source-loader/package.json | 2 +- code/lib/types/package.json | 2 +- code/package.json | 2 +- code/renderers/server/package.json | 2 +- code/ui/blocks/package.json | 2 +- code/ui/components/package.json | 2 +- 13 files changed, 13 insertions(+), 13 deletions(-) diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 54e7bbca710..a2b252eee6c 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -63,7 +63,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.2-next.0", + "@storybook/csf": "^0.1.2", "@storybook/global": "^5.0.0", "ts-dedent": "^2.0.0" }, diff --git a/code/addons/storyshots-puppeteer/package.json b/code/addons/storyshots-puppeteer/package.json index 5949d89338b..4685d9a8223 100644 --- a/code/addons/storyshots-puppeteer/package.json +++ b/code/addons/storyshots-puppeteer/package.json @@ -37,7 +37,7 @@ }, "dependencies": { "@axe-core/puppeteer": "^4.2.0", - "@storybook/csf": "0.1.2-next.0", + "@storybook/csf": "^0.1.2", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", "@types/jest-image-snapshot": "^6.0.0", diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index e8f0a213dfb..f1914cd9d17 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -55,7 +55,7 @@ "@babel/core": "^7.23.2", "@babel/preset-env": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "0.1.2-next.0", + "@storybook/csf": "^0.1.2", "@storybook/csf-tools": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/types": "workspace:*", diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 557651a48e4..a56640e1de4 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -66,7 +66,7 @@ "@storybook/channels": "workspace:*", "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.2-next.0", + "@storybook/csf": "^0.1.2", "@storybook/csf-tools": "workspace:*", "@storybook/docs-mdx": "^0.1.0", "@storybook/global": "^5.0.0", diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index c5e4e5de536..9620c543e08 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -46,7 +46,7 @@ "@babel/parser": "^7.23.0", "@babel/traverse": "^7.23.2", "@babel/types": "^7.23.0", - "@storybook/csf": "0.1.2-next.0", + "@storybook/csf": "^0.1.2", "@storybook/types": "workspace:*", "fs-extra": "^11.1.0", "recast": "^0.23.1", diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 0e5e2e75595..02a7cac6d7a 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -46,7 +46,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.2-next.0", + "@storybook/csf": "^0.1.2", "@storybook/global": "^5.0.0", "@storybook/router": "workspace:*", "@storybook/theming": "workspace:*", diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index 39b9b4682d2..a43fecb7a44 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -71,7 +71,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.2-next.0", + "@storybook/csf": "^0.1.2", "@storybook/global": "^5.0.0", "@storybook/types": "workspace:*", "@types/qs": "^6.9.5", diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index de7fa088395..9c93afba521 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -45,7 +45,7 @@ "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf": "0.1.2-next.0", + "@storybook/csf": "^0.1.2", "@storybook/types": "workspace:*", "estraverse": "^5.2.0", "lodash": "^4.17.21", diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 30cb9f4c26f..e14551c1822 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -50,7 +50,7 @@ "file-system-cache": "2.3.0" }, "devDependencies": { - "@storybook/csf": "0.1.2-next.0", + "@storybook/csf": "^0.1.2", "@types/fs-extra": "^11.0.1", "@types/node": "^18.0.0", "typescript": "~4.9.3" diff --git a/code/package.json b/code/package.json index 31ccd621bcd..6998a74be8d 100644 --- a/code/package.json +++ b/code/package.json @@ -140,7 +140,7 @@ "@storybook/core-events": "workspace:*", "@storybook/core-server": "workspace:*", "@storybook/core-webpack": "workspace:*", - "@storybook/csf": "0.1.2-next.0", + "@storybook/csf": "^0.1.2", "@storybook/csf-plugin": "workspace:*", "@storybook/csf-tools": "workspace:*", "@storybook/docs-tools": "workspace:*", diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index e0c3cabd0f6..c20511b1fef 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -47,7 +47,7 @@ }, "dependencies": { "@storybook/core-client": "workspace:*", - "@storybook/csf": "0.1.2-next.0", + "@storybook/csf": "^0.1.2", "@storybook/csf-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/preview-api": "workspace:*", diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index 0f4385cb96c..b2dbcfb882f 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -48,7 +48,7 @@ "@storybook/client-logger": "workspace:*", "@storybook/components": "workspace:*", "@storybook/core-events": "workspace:*", - "@storybook/csf": "0.1.2-next.0", + "@storybook/csf": "^0.1.2", "@storybook/docs-tools": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/manager-api": "workspace:*", diff --git a/code/ui/components/package.json b/code/ui/components/package.json index eb28b1280f1..9954c55392e 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -62,7 +62,7 @@ "@radix-ui/react-select": "^1.2.2", "@radix-ui/react-toolbar": "^1.0.4", "@storybook/client-logger": "workspace:*", - "@storybook/csf": "0.1.2-next.0", + "@storybook/csf": "^0.1.2", "@storybook/global": "^5.0.0", "@storybook/theming": "workspace:*", "@storybook/types": "workspace:*", From 3606e3c4d20f84b86e962b4692071b1d27764aaa Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 22 Nov 2023 16:07:04 +0100 Subject: [PATCH 167/170] Update csf version --- code/yarn.lock | 44 ++++++++++++++++++++++---------------------- 1 file changed, 22 insertions(+), 22 deletions(-) diff --git a/code/yarn.lock b/code/yarn.lock index ad6a2779f61..e132a544a44 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5655,7 +5655,7 @@ __metadata: dependencies: "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.2-next.0" + "@storybook/csf": "npm:^0.1.2" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" "@storybook/preview-api": "workspace:*" @@ -5724,7 +5724,7 @@ __metadata: resolution: "@storybook/addon-storyshots-puppeteer@workspace:addons/storyshots-puppeteer" dependencies: "@axe-core/puppeteer": "npm:^4.2.0" - "@storybook/csf": "npm:0.1.2-next.0" + "@storybook/csf": "npm:^0.1.2" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" "@types/jest-image-snapshot": "npm:^6.0.0" @@ -6033,7 +6033,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/components": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.2-next.0" + "@storybook/csf": "npm:^0.1.2" "@storybook/docs-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/manager-api": "workspace:*" @@ -6306,7 +6306,7 @@ __metadata: "@babel/core": "npm:^7.23.2" "@babel/preset-env": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:0.1.2-next.0" + "@storybook/csf": "npm:^0.1.2" "@storybook/csf-tools": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/types": "workspace:*" @@ -6344,7 +6344,7 @@ __metadata: "@radix-ui/react-select": "npm:^1.2.2" "@radix-ui/react-toolbar": "npm:^1.0.4" "@storybook/client-logger": "workspace:*" - "@storybook/csf": "npm:0.1.2-next.0" + "@storybook/csf": "npm:^0.1.2" "@storybook/global": "npm:^5.0.0" "@storybook/icons": "npm:^1.1.6" "@storybook/theming": "workspace:*" @@ -6434,7 +6434,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.2-next.0" + "@storybook/csf": "npm:^0.1.2" "@storybook/csf-tools": "workspace:*" "@storybook/docs-mdx": "npm:^0.1.0" "@storybook/global": "npm:^5.0.0" @@ -6515,7 +6515,7 @@ __metadata: "@babel/parser": "npm:^7.23.0" "@babel/traverse": "npm:^7.23.2" "@babel/types": "npm:^7.23.0" - "@storybook/csf": "npm:0.1.2-next.0" + "@storybook/csf": "npm:^0.1.2" "@storybook/types": "workspace:*" "@types/fs-extra": "npm:^11.0.1" "@types/js-yaml": "npm:^4.0.5" @@ -6527,15 +6527,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/csf@npm:0.1.2-next.0": - version: 0.1.2-next.0 - resolution: "@storybook/csf@npm:0.1.2-next.0" - dependencies: - type-fest: "npm:^2.19.0" - checksum: 9f9fd8ef2b15d06252d3d6e0abad642093ab09ded51391d426d0671ed8b9584acbd464ed8ba5c68a94a245f005af117afe74e20af0dd475b9f704b9a5c806648 - languageName: node - linkType: hard - "@storybook/csf@npm:^0.0.1": version: 0.0.1 resolution: "@storybook/csf@npm:0.0.1" @@ -6545,6 +6536,15 @@ __metadata: languageName: node linkType: hard +"@storybook/csf@npm:^0.1.2": + version: 0.1.2 + resolution: "@storybook/csf@npm:0.1.2" + dependencies: + type-fest: "npm:^2.19.0" + checksum: b51a55292e5d2af8b1d135a28ecaa94f8860ddfedcb393adfa2cca1ee23853156066f737d8be1cb5412f572781aa525dc0b2f6e4a6f6ce805489f0149efe837c + languageName: node + linkType: hard + "@storybook/design-system@npm:^7.15.15": version: 7.15.15 resolution: "@storybook/design-system@npm:7.15.15" @@ -6765,7 +6765,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.2-next.0" + "@storybook/csf": "npm:^0.1.2" "@storybook/global": "npm:^5.0.0" "@storybook/router": "workspace:*" "@storybook/theming": "workspace:*" @@ -7174,7 +7174,7 @@ __metadata: "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" "@storybook/core-events": "workspace:*" - "@storybook/csf": "npm:0.1.2-next.0" + "@storybook/csf": "npm:^0.1.2" "@storybook/global": "npm:^5.0.0" "@storybook/types": "workspace:*" "@types/qs": "npm:^6.9.5" @@ -7383,7 +7383,7 @@ __metadata: "@storybook/core-events": "workspace:*" "@storybook/core-server": "workspace:*" "@storybook/core-webpack": "workspace:*" - "@storybook/csf": "npm:0.1.2-next.0" + "@storybook/csf": "npm:^0.1.2" "@storybook/csf-plugin": "workspace:*" "@storybook/csf-tools": "workspace:*" "@storybook/docs-tools": "workspace:*" @@ -7556,7 +7556,7 @@ __metadata: resolution: "@storybook/server@workspace:renderers/server" dependencies: "@storybook/core-client": "workspace:*" - "@storybook/csf": "npm:0.1.2-next.0" + "@storybook/csf": "npm:^0.1.2" "@storybook/csf-tools": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/preview-api": "workspace:*" @@ -7573,7 +7573,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/source-loader@workspace:lib/source-loader" dependencies: - "@storybook/csf": "npm:0.1.2-next.0" + "@storybook/csf": "npm:^0.1.2" "@storybook/types": "workspace:*" estraverse: "npm:^5.2.0" jest-specific-snapshot: "npm:^8.0.0" @@ -7767,7 +7767,7 @@ __metadata: resolution: "@storybook/types@workspace:lib/types" dependencies: "@storybook/channels": "workspace:*" - "@storybook/csf": "npm:0.1.2-next.0" + "@storybook/csf": "npm:^0.1.2" "@types/babel__core": "npm:^7.0.0" "@types/express": "npm:^4.7.0" "@types/fs-extra": "npm:^11.0.1" From 23dcb6b8c46b0e2d796317920b95647814c9ef6a Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Wed, 22 Nov 2023 16:28:58 +0100 Subject: [PATCH 168/170] remove log --- code/lib/cli/src/doctor/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/code/lib/cli/src/doctor/index.ts b/code/lib/cli/src/doctor/index.ts index bb7bcc6c3e1..cfafb899f3a 100644 --- a/code/lib/cli/src/doctor/index.ts +++ b/code/lib/cli/src/doctor/index.ts @@ -86,7 +86,6 @@ export const doctor = async ({ } const incompatibleAddonList = await getIncompatibleAddons(mainConfig); - console.log({ incompatibleAddonList }); if (incompatibleAddonList.length > 0) { diagnosticMessages.push(incompatibleAddons.prompt({ incompatibleAddonList })); } From 12960c76f2aaa56b01c1e9c3c13114e5c5b5542d Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Wed, 22 Nov 2023 17:04:18 +0100 Subject: [PATCH 169/170] Move args enhancer to be a loader --- code/addons/actions/src/addArgs.ts | 7 +---- code/addons/actions/src/addArgsHelpers.ts | 31 ----------------------- code/addons/actions/src/loaders.ts | 30 ++++++++++++++++++++++ code/addons/actions/src/preview.ts | 1 + 4 files changed, 32 insertions(+), 37 deletions(-) create mode 100644 code/addons/actions/src/loaders.ts diff --git a/code/addons/actions/src/addArgs.ts b/code/addons/actions/src/addArgs.ts index db14aee0ce3..5742bd8627c 100644 --- a/code/addons/actions/src/addArgs.ts +++ b/code/addons/actions/src/addArgs.ts @@ -1,12 +1,7 @@ import type { ArgsEnhancer } from '@storybook/types'; -import { - addActionsFromArgTypes, - attachActionsToFunctionMocks, - inferActionsFromArgTypesRegex, -} from './addArgsHelpers'; +import { addActionsFromArgTypes, inferActionsFromArgTypesRegex } from './addArgsHelpers'; export const argsEnhancers: ArgsEnhancer[] = [ addActionsFromArgTypes, inferActionsFromArgTypesRegex, - attachActionsToFunctionMocks, ]; diff --git a/code/addons/actions/src/addArgsHelpers.ts b/code/addons/actions/src/addArgsHelpers.ts index cd4f67897a5..ab8fd3b36a0 100644 --- a/code/addons/actions/src/addArgsHelpers.ts +++ b/code/addons/actions/src/addArgsHelpers.ts @@ -1,4 +1,3 @@ -/* eslint-disable no-underscore-dangle,no-param-reassign */ import type { Args, Renderer, ArgsEnhancer } from '@storybook/types'; import { action } from './runtime/action'; @@ -63,33 +62,3 @@ export const addActionsFromArgTypes: ArgsEnhancer = (context) => { return acc; }, {} as Args); }; - -export const attachActionsToFunctionMocks: ArgsEnhancer = (context) => { - const { - initialArgs, - argTypes, - parameters: { actions }, - } = context; - if (actions?.disable || !argTypes) { - return {}; - } - - const argTypesWithAction = Object.entries(initialArgs).filter( - ([, value]) => - typeof value === 'function' && - '_isMockFunction' in value && - value._isMockFunction && - !value._actionAttached - ); - - return argTypesWithAction.reduce((acc, [key, value]) => { - const previous = value.getMockImplementation(); - value.mockImplementation((...args: unknown[]) => { - action(key)(...args); - return previous?.(...args); - }); - // this enhancer is being called multiple times - value._actionAttached = true; - return acc; - }, {} as Args); -}; diff --git a/code/addons/actions/src/loaders.ts b/code/addons/actions/src/loaders.ts new file mode 100644 index 00000000000..99e51287a89 --- /dev/null +++ b/code/addons/actions/src/loaders.ts @@ -0,0 +1,30 @@ +/* eslint-disable no-underscore-dangle */ +import type { LoaderFunction } from '@storybook/types'; +import { action } from './runtime'; + +const attachActionsToFunctionMocks: LoaderFunction = (context) => { + const { + args, + parameters: { actions }, + } = context; + if (actions?.disable) return; + + Object.entries(args) + .filter( + ([, value]) => + typeof value === 'function' && '_isMockFunction' in value && value._isMockFunction + ) + .forEach(([key, value]) => { + const previous = value.getMockImplementation(); + if (previous?._actionAttached !== true) { + const implementation = (...params: unknown[]) => { + action(key)(...params); + return previous?.(...params); + }; + implementation._actionAttached = true; + value.mockImplementation(implementation); + } + }); +}; + +export const loaders: LoaderFunction[] = [attachActionsToFunctionMocks]; diff --git a/code/addons/actions/src/preview.ts b/code/addons/actions/src/preview.ts index 7a06751b46d..bfafaa7faf4 100644 --- a/code/addons/actions/src/preview.ts +++ b/code/addons/actions/src/preview.ts @@ -1 +1,2 @@ export * from './addArgs'; +export * from './loaders'; From 3e17abebbb26edb35cd777e383e3659cbf0bd394 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Wed, 22 Nov 2023 17:02:35 +0000 Subject: [PATCH 170/170] Write changelog for 7.6.0-alpha.7 [skip ci] --- CHANGELOG.prerelease.md | 25 +++++++++++++++++++++++++ code/package.json | 3 ++- docs/versions/next.json | 2 +- 3 files changed, 28 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index ead15edae9d..c09c035b151 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,28 @@ +## 7.6.0-alpha.7 + +- Actions: Warn on implicit actions - [#24856](https://github.com/storybookjs/storybook/pull/24856), thanks [@kasperpeulen](https://github.com/kasperpeulen)! +- Addons, core: Make `react` and Storybook packages `devDependencies` where possible - ATTEMPT 2 - [#24834](https://github.com/storybookjs/storybook/pull/24834), thanks [@JReinhold](https://github.com/JReinhold)! +- CLI: Add "doctor" command - [#22236](https://github.com/storybookjs/storybook/pull/22236), thanks [@yannbf](https://github.com/yannbf)! +- Core: Add deprecation notice for Vite + CommonJS - [#23950](https://github.com/storybookjs/storybook/pull/23950), thanks [@JReinhold](https://github.com/JReinhold)! +- Core: Detect no matching export error in storybook start and build - [#24877](https://github.com/storybookjs/storybook/pull/24877), thanks [@yannbf](https://github.com/yannbf)! +- Core: Fix `useStoryPrepared` hook failing with `undefined` data - [#22631](https://github.com/storybookjs/storybook/pull/22631), thanks [@SpookyJelly](https://github.com/SpookyJelly)! +- Core: Gracefully handle error when parsing preview.js file - [#24858](https://github.com/storybookjs/storybook/pull/24858), thanks [@yannbf](https://github.com/yannbf)! +- Core: Make warnOnIncompatibleAddons fault-tolerant - [#24880](https://github.com/storybookjs/storybook/pull/24880), thanks [@taozhou-glean](https://github.com/taozhou-glean)! +- Dependency: Fix Yarn 4 failing to install due to jscodeshift dependency issue - [#24914](https://github.com/storybookjs/storybook/pull/24914), thanks [@samvv](https://github.com/samvv)! +- Dependency: Update jscodeshift to v0.15.1 - [#24882](https://github.com/storybookjs/storybook/pull/24882), thanks [@epreston](https://github.com/epreston)! +- FastBuild: Fix disabledAddons filter - [#24924](https://github.com/storybookjs/storybook/pull/24924), thanks [@IanVS](https://github.com/IanVS)! +- ManagerAPI: Fix setting status without index, crashes storybook - [#24866](https://github.com/storybookjs/storybook/pull/24866), thanks [@ndelangen](https://github.com/ndelangen)! +- Next.js: Add back image context CommonJS export - [#24885](https://github.com/storybookjs/storybook/pull/24885), thanks [@martinnabhan](https://github.com/martinnabhan)! +- Next.js: Add experimental SWC support - [#24852](https://github.com/storybookjs/storybook/pull/24852), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Next.js: Fix import path in swc loader - [#24922](https://github.com/storybookjs/storybook/pull/24922), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Svelte: Fix decorators always running twice - [#24921](https://github.com/storybookjs/storybook/pull/24921), thanks [@paoloricciuti](https://github.com/paoloricciuti)! +- SvelteKit: Add experimental page and navigation mocking - [#24795](https://github.com/storybookjs/storybook/pull/24795), thanks [@paoloricciuti](https://github.com/paoloricciuti)! +- Test: Model loaders as before each and restore mocks properly - [#24948](https://github.com/storybookjs/storybook/pull/24948), thanks [@kasperpeulen](https://github.com/kasperpeulen)! +- TestBuild: Add env-variable support to `--test` CLI-flag - [#24862](https://github.com/storybookjs/storybook/pull/24862), thanks [@ndelangen](https://github.com/ndelangen)! +- TestBuild: Add tests and rename to camelCase - [#24911](https://github.com/storybookjs/storybook/pull/24911), thanks [@ndelangen](https://github.com/ndelangen)! +- TestBuild: Fix indexer bug - [#24890](https://github.com/storybookjs/storybook/pull/24890), thanks [@ndelangen](https://github.com/ndelangen)! +- Typescript: Add 'skipCompiler' option to TypeScript presets - [#24847](https://github.com/storybookjs/storybook/pull/24847), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! + ## 7.6.0-alpha.6 - Addon: Move Visual Test addon to the code directory - [#24771](https://github.com/storybookjs/storybook/pull/24771), thanks [@cdedreuille](https://github.com/cdedreuille)! diff --git a/code/package.json b/code/package.json index 6998a74be8d..f9be9959024 100644 --- a/code/package.json +++ b/code/package.json @@ -328,5 +328,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "7.6.0-alpha.7" } diff --git a/docs/versions/next.json b/docs/versions/next.json index 3b203dc04f4..2c346435e0e 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"7.6.0-alpha.6","info":{"plain":"- Addon: Move Visual Test addon to the code directory - [#24771](https://github.com/storybookjs/storybook/pull/24771), thanks [@cdedreuille](https://github.com/cdedreuille)!\n- FastBuild: Improve config loading & naming - [#24837](https://github.com/storybookjs/storybook/pull/24837), thanks [@ndelangen](https://github.com/ndelangen)!\n- TestBuild: Revert defaulting to SWC in test build, but keep using esbuild for minification - [#24843](https://github.com/storybookjs/storybook/pull/24843), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- Viewport: Add newer device viewports - [#24777](https://github.com/storybookjs/storybook/pull/24777), thanks [@Tomo5524](https://github.com/Tomo5524)!\n- Vite: Prevent non-deterministic build output - [#24833](https://github.com/storybookjs/storybook/pull/24833), thanks [@henkerik](https://github.com/henkerik)!"}} +{"version":"7.6.0-alpha.7","info":{"plain":"- Actions: Warn on implicit actions - [#24856](https://github.com/storybookjs/storybook/pull/24856), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- Addons, core: Make `react` and Storybook packages `devDependencies` where possible - ATTEMPT 2 - [#24834](https://github.com/storybookjs/storybook/pull/24834), thanks [@JReinhold](https://github.com/JReinhold)!\n- CLI: Add \\\"doctor\\\" command - [#22236](https://github.com/storybookjs/storybook/pull/22236), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Add deprecation notice for Vite + CommonJS - [#23950](https://github.com/storybookjs/storybook/pull/23950), thanks [@JReinhold](https://github.com/JReinhold)!\n- Core: Detect no matching export error in storybook start and build - [#24877](https://github.com/storybookjs/storybook/pull/24877), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Fix `useStoryPrepared` hook failing with `undefined` data - [#22631](https://github.com/storybookjs/storybook/pull/22631), thanks [@SpookyJelly](https://github.com/SpookyJelly)!\n- Core: Gracefully handle error when parsing preview.js file - [#24858](https://github.com/storybookjs/storybook/pull/24858), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Make warnOnIncompatibleAddons fault-tolerant - [#24880](https://github.com/storybookjs/storybook/pull/24880), thanks [@taozhou-glean](https://github.com/taozhou-glean)!\n- Dependency: Fix Yarn 4 failing to install due to jscodeshift dependency issue - [#24914](https://github.com/storybookjs/storybook/pull/24914), thanks [@samvv](https://github.com/samvv)!\n- Dependency: Update jscodeshift to v0.15.1 - [#24882](https://github.com/storybookjs/storybook/pull/24882), thanks [@epreston](https://github.com/epreston)!\n- FastBuild: Fix disabledAddons filter - [#24924](https://github.com/storybookjs/storybook/pull/24924), thanks [@IanVS](https://github.com/IanVS)!\n- ManagerAPI: Fix setting status without index, crashes storybook - [#24866](https://github.com/storybookjs/storybook/pull/24866), thanks [@ndelangen](https://github.com/ndelangen)!\n- Next.js: Add back image context CommonJS export - [#24885](https://github.com/storybookjs/storybook/pull/24885), thanks [@martinnabhan](https://github.com/martinnabhan)!\n- Next.js: Add experimental SWC support - [#24852](https://github.com/storybookjs/storybook/pull/24852), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Next.js: Fix import path in swc loader - [#24922](https://github.com/storybookjs/storybook/pull/24922), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Svelte: Fix decorators always running twice - [#24921](https://github.com/storybookjs/storybook/pull/24921), thanks [@paoloricciuti](https://github.com/paoloricciuti)!\n- SvelteKit: Add experimental page and navigation mocking - [#24795](https://github.com/storybookjs/storybook/pull/24795), thanks [@paoloricciuti](https://github.com/paoloricciuti)!\n- Test: Model loaders as before each and restore mocks properly - [#24948](https://github.com/storybookjs/storybook/pull/24948), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- TestBuild: Add env-variable support to `--test` CLI-flag - [#24862](https://github.com/storybookjs/storybook/pull/24862), thanks [@ndelangen](https://github.com/ndelangen)!\n- TestBuild: Add tests and rename to camelCase - [#24911](https://github.com/storybookjs/storybook/pull/24911), thanks [@ndelangen](https://github.com/ndelangen)!\n- TestBuild: Fix indexer bug - [#24890](https://github.com/storybookjs/storybook/pull/24890), thanks [@ndelangen](https://github.com/ndelangen)!\n- Typescript: Add 'skipCompiler' option to TypeScript presets - [#24847](https://github.com/storybookjs/storybook/pull/24847), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!"}}