diff --git a/.circleci/config.yml b/.circleci/config.yml index 0d3340694846..b34288f775cb 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -124,6 +124,7 @@ jobs: command: | yarn task --task compile --start-from=auto --no-link --debug git diff --exit-code + yarn dedupe --check - run: name: Publish to Verdaccio command: | diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index aec117765b12..cae0fb533129 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,10 @@ +## 8.1.0-alpha.1 + +- Maintenance: Fix performance regressions - [#26411](https://github.com/storybookjs/storybook/pull/26411), thanks @kasperpeulen! + +## 8.1.0-alpha.0 + + ## 8.0.0-rc.5 - CLI: Automigration fix version detection of upgrading related packages - [#26410](https://github.com/storybookjs/storybook/pull/26410), thanks @ndelangen! diff --git a/code/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch b/code/.yarn/patches/@vitest-expect-npm-1.3.1-973071a540.patch similarity index 85% rename from code/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch rename to code/.yarn/patches/@vitest-expect-npm-1.3.1-973071a540.patch index 9a1b74e203bd..b2028a85b1ff 100644 --- a/code/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch +++ b/code/.yarn/patches/@vitest-expect-npm-1.3.1-973071a540.patch @@ -1,10 +1,10 @@ diff --git a/dist/index.js b/dist/index.js -index 974d6b26f626024fc9904908100c9ecaa54f43e1..5d9d92a0796e02630ccdd1174d4fd25e016d2b06 100644 +index 640839e4b9fef0f25d08d055d4350845a8a29791..844f3d5834147848b5fa54276e96e665bcc675f9 100644 --- a/dist/index.js +++ b/dist/index.js -@@ -6,28 +6,35 @@ import { processError } from '@vitest/utils/error'; +@@ -6,26 +6,32 @@ import { processError } from '@vitest/utils/error'; import { util } from 'chai'; - + const MATCHERS_OBJECT = Symbol.for("matchers-object"); -const JEST_MATCHERS_OBJECT = Symbol.for("$$jest-matchers-object"); +// Patched this symbol for storybook, so that @storybook/test can be used in a jest environment as well. @@ -12,10 +12,11 @@ index 974d6b26f626024fc9904908100c9ecaa54f43e1..5d9d92a0796e02630ccdd1174d4fd25e +const JEST_MATCHERS_OBJECT = Symbol.for("$$jest-matchers-object-storybook"); const GLOBAL_EXPECT = Symbol.for("expect-global"); const ASYMMETRIC_MATCHERS_OBJECT = Symbol.for("asymmetric-matchers-object"); - + if (!Object.prototype.hasOwnProperty.call(globalThis, MATCHERS_OBJECT)) { const globalState = /* @__PURE__ */ new WeakMap(); - const matchers = /* @__PURE__ */ Object.create(null); +- const customEqualityTesters = []; - const assymetricMatchers = /* @__PURE__ */ Object.create(null); Object.defineProperty(globalThis, MATCHERS_OBJECT, { get: () => globalState @@ -23,12 +24,14 @@ index 974d6b26f626024fc9904908100c9ecaa54f43e1..5d9d92a0796e02630ccdd1174d4fd25e +} +if (!Object.prototype.hasOwnProperty.call(globalThis, JEST_MATCHERS_OBJECT)) { + const matchers = /* @__PURE__ */ Object.create(null); ++ const customEqualityTesters = []; Object.defineProperty(globalThis, JEST_MATCHERS_OBJECT, { configurable: true, get: () => ({ - state: globalState.get(globalThis[GLOBAL_EXPECT]), + state: globalThis[MATCHERS_OBJECT].get(globalThis[GLOBAL_EXPECT]), - matchers + matchers, + customEqualityTesters }) }); +} @@ -37,8 +40,3 @@ index 974d6b26f626024fc9904908100c9ecaa54f43e1..5d9d92a0796e02630ccdd1174d4fd25e Object.defineProperty(globalThis, ASYMMETRIC_MATCHERS_OBJECT, { get: () => assymetricMatchers }); - } -+ - function getState(expect) { - return globalThis[MATCHERS_OBJECT].get(expect); - } diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 73f802106851..68c3ea37f99b 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index 2f13f8e98a15..485f6d1b8d1b 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 08ea5529d139..2caf3521463a 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index d59821722737..29d450db6287 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 3c6eaa0d625a..394e76fd8c13 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index 3b9143837d78..afb37f3424a2 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index b35c226de305..62d9fc14d34e 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index bae6a544048d..3e86ac6520a1 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index dbb88085b22b..c8baa6166260 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", @@ -50,8 +50,9 @@ }, "dependencies": { "@storybook/global": "^5.0.0", + "@storybook/instrumenter": "workspace:*", + "@storybook/test": "workspace:*", "@storybook/types": "workspace:*", - "jest-mock": "^27.0.6", "polished": "^4.2.2", "ts-dedent": "^2.2.0" }, @@ -62,10 +63,8 @@ "@storybook/core-common": "workspace:*", "@storybook/core-events": "workspace:*", "@storybook/icons": "^1.2.5", - "@storybook/instrumenter": "workspace:*", "@storybook/manager-api": "workspace:*", "@storybook/preview-api": "workspace:*", - "@storybook/test": "workspace:*", "@storybook/theming": "workspace:*", "@types/node": "^18.0.0", "formik": "^2.2.9", diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index bd511b8e0b5c..c878c2004dce 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "React storybook addon that show component jest report", "keywords": [ "addon", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 686c684f829b..e23c945975df 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "addon", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 1985366f670c..53824330a8d6 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json index 72726fb3726f..540337fa698b 100644 --- a/code/addons/onboarding/package.json +++ b/code/addons/onboarding/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-onboarding", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook Addon Onboarding - Introduces a new onboarding experience", "keywords": [ "storybook-addons", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index f8db2b4ea149..346b5808b5d4 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index c7326a263ad1..d527dcafdadd 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index a3599f8288e2..4a795e2551b2 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Switch between multiple themes for you components in Storybook", "keywords": [ "css", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index ec4a11506175..77859b045279 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index 92208b361584..e02f77d74a0d 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", diff --git a/code/builders/builder-manager/package.json b/code/builders/builder-manager/package.json index a31a2e91a374..d692ee77e176 100644 --- a/code/builders/builder-manager/package.json +++ b/code/builders/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook manager builder", "keywords": [ "storybook" diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 1d0dd1b7610c..0c871173a00b 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme", "bugs": { diff --git a/code/builders/builder-vite/src/optimizeDeps.ts b/code/builders/builder-vite/src/optimizeDeps.ts index 1972fde8e8e7..7d38b61cb747 100644 --- a/code/builders/builder-vite/src/optimizeDeps.ts +++ b/code/builders/builder-vite/src/optimizeDeps.ts @@ -3,6 +3,8 @@ import type { InlineConfig as ViteInlineConfig, UserConfig } from 'vite'; import type { Options } from '@storybook/types'; import { listStories } from './list-stories'; +// It ensures that vite converts cjs deps into esm without vite having to find them during startup and then having to log a message about them and restart +// TODO: Many of the deps might be prebundled now though, so probably worth trying to remove and see what happens const INCLUDE_CANDIDATES = [ '@base2/pretty-print-object', '@emotion/core', @@ -27,7 +29,6 @@ const INCLUDE_CANDIDATES = [ 'fast-deep-equal', 'html-tags', 'isobject', - 'jest-mock', 'loader-utils', 'lodash/camelCase.js', 'lodash/camelCase', diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 31d47498ee40..6b19424af541 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 9ffa620ac401..726c56bb92fc 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 9c796b2f5b7c..8331d7d0b744 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index 26bcfa5687c7..1005843c6bd5 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index 7c6e27ae25e1..04976553bdfb 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index f3a10ee4210d..ec578f0a3182 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook for Next.js", "keywords": [ "storybook", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index b8b67128ef22..b801e8425438 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-vite", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index 51bdc48718ad..d91973ee5f72 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-webpack5", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index da08584b7625..b6a2256d8f86 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index 3d5ceb3ba80c..f39f13c00312 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index 6aa05a0c122d..b9edea51d8e1 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 9090da475670..28bec0d59fde 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-webpack5/README.md b/code/frameworks/svelte-webpack5/README.md index d490ff6af11c..fa37e5b2e74b 100644 --- a/code/frameworks/svelte-webpack5/README.md +++ b/code/frameworks/svelte-webpack5/README.md @@ -1,32 +1,3 @@ -# Storybook for Svelte +# Storybook for Svelte & Webpack -Storybook for Svelte is a UI development environment for your Svelte components. -With it, you can visualize different states of your UI components and develop them interactively. - -![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) - -Storybook runs outside of your app. -So you can develop UI components in isolation without worrying about app specific dependencies and requirements. - -## Getting Started - -```sh -cd my-svelte-app -npx storybook@latest init -``` - -For more information visit: [storybook.js.org](https://storybook.js.org) - ---- - -Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish. -You can also build a [static version](https://storybook.js.org/docs/svelte/sharing/publish-storybook) of your Storybook and deploy it anywhere you want. - -## TODOs - -- Support `addon-info` -- Support Svelte markup directly in stories -- Add Svelte storybook generator -- Provide stories that show advanced Svelte use cases -- Hydratable -- Advanced mount options +See [documentation](https://storybook.js.org/docs/8.0/get-started/svelte-webpack5?renderer=svelte) for installation instructions, usage examples, APIs, and more. diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index db4ed258f40c..725b3bb7a131 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-webpack5", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/sveltekit/README.md b/code/frameworks/sveltekit/README.md index 0243fde57b23..8bb8789a879d 100644 --- a/code/frameworks/sveltekit/README.md +++ b/code/frameworks/sveltekit/README.md @@ -1,190 +1,6 @@ -# Storybook for SvelteKit +# Storybook for SvelteKit -Our goal is to help you use the tools you love together with Storybook. That’s why Storybook has zero-config support for SvelteKit with the `@storybook/sveltekit` package. - -Check out our [Frameworks API](https://storybook.js.org/blog/framework-api/) announcement for what this all means for you and our continued efforts to make Storybook a seamless integration for any project. - -## Table of Contents - -- [Supported features](#supported-features) -- [Requirements](#requirements) -- [Getting Started](#getting-started) - - [In a project without Storybook](#in-a-project-without-storybook) - - [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) -- [Acknowledgements](#acknowledgements) - -## Supported features - -All Svelte language features are supported out of the box, as Storybook uses the Svelte compiler underneath. -However SvelteKit has some [Kit-specific modules](https://kit.svelte.dev/docs/modules) that currently aren't supported. It's on our roadmap to support most of them soon: - -| **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) | ✅ 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 | 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. | -| [`$env/static/public`](https://kit.svelte.dev/docs/modules#$env-static-public) | ✅ Supported | | -| [`$lib`](https://kit.svelte.dev/docs/modules#$lib) | ✅ Supported | | -| [`$service-worker`](https://kit.svelte.dev/docs/modules#$service-worker) | ⛔ Not supported | They are only meant to be used in service workers | -| [`@sveltejs/kit/*`](https://kit.svelte.dev/docs/modules#sveltejs-kit) | ✅ Supported | | - -This is just the beginning. We're close to adding basic support for many of the SvelteKit features. Longer term we're planning on making it an even better experience to [build](https://storybook.js.org/docs/svelte/writing-stories), [test](https://storybook.js.org/docs/svelte/writing-tests) and [document](https://storybook.js.org/docs/svelte/writing-docs) all the SvelteKit goodies like [pages](https://kit.svelte.dev/docs/routing), [forms](https://kit.svelte.dev/docs/form-actions) and [layouts](https://kit.svelte.dev/docs/routing#layout) in Storybook, while still integrating with all the addons and workflows you know and love. - -## Requirements - -- [SvelteKit](https://kit.svelte.dev/) >= 1.0.0 (not including beta versions) -- [Storybook](https://storybook.js.org/) >= 7.x - -## Getting Started - -### In a project without Storybook - -Run the following command in your SvelteKit project's root directory, and follow the prompts: - -```bash -npx storybook@latest init -``` - -[More on getting started with Storybook](https://storybook.js.org/docs/svelte/get-started/install) - -### In a project with Storybook - -This framework is designed to work with Storybook 7. If you’re not already using v7, upgrade with this command: - -```bash -npx storybook@latest upgrade -``` - -#### Automatic migration - -When running the `upgrade` command above you should get a prompt asking you to migrate to `@storybook/sveltekit`, which should handle everything for you. In some cases it can't migrate for you, eg. if your existing Storybook setup is based on Webpack. In such cases, refer to the manual migration below. - -Storybook 7.0 automatically loads your Vite config, and by extension your Svelte config. If you had a `svelteOptions` property in `.storybook/main.js` the automigration will have removed it, as it is no longer supported. - -#### Manual migration - -Install the framework: - -```bash -yarn add -D @storybook/sveltekit -``` - -Update your `main.js` to change the framework property: - -```js -// .storybook/main.js -export default { - ... - framework: '@storybook/sveltekit', -}; -``` - -Storybook 7.0 automatically loads your Vite config, and by extension your Svelte config. If you have a `svelteOptions` property in `.storybook/main.js` you need to remove that. See [Troubleshooting](#error-about-__esbuild_register_import_meta_url__-when-starting-storybook) below. - -Remove any redundant dependencies, if you have them: - -```bash -yarn remove @storybook/svelte-vite -yarn remove @storybook/svelte-webpack5 -yarn remove storybook-builder-vite -yarn remove @storybook/builder-vite -``` - -## How to mock - -To mock a SvelteKit import you can set it on `parameters.sveltekit_experimental`: - -```ts -export const MyStory = { - parameters: { - sveltekit_experimental: { - stores: { - page: { - data: { - test: 'passed', - }, - }, - navigating: { - route: { - id: '/storybook', - }, - }, - updated: true, - }, - }, - }, -}; -``` - -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, in no function is provided an action will be logged to the Actions panel | -| `import { pushState } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.pushState` | A callback that will be called whenever pushState is called, in no function is provided an action will be logged to the Actions panel | -| `import { replaceState } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.replaceState` | A callback that will be called whenever replaceState is called, in no function is provided an action will be logged to the Actions panel | -| `import { invalidate } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.invalidate` | A callback that will be called whenever invalidate is called, in no function is provided an action will be logged to the Actions panel | -| `import { invalidateAll } from "$app/navigation"` | `parameters.sveltekit_experimental.navigation.invalidateAll` | A callback that will be called whenever invalidateAll is called, in no function is provided an action will be logged to the Actions panel | -| `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. - -### 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 - -### 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. +See [documentation](https://storybook.js.org/docs/8.0/get-started/sveltekit?renderer=svelte) for installation instructions, usage examples, APIs, and more. ## Acknowledgements diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 2acf401c3f24..4e7f20ff77a8 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook for SvelteKit", "keywords": [ "storybook", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 44297c5a4047..60cc82ddd78c 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-vite", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/vue3-webpack5/README.md b/code/frameworks/vue3-webpack5/README.md index 2e365a8a7f8e..a4e696468d58 100644 --- a/code/frameworks/vue3-webpack5/README.md +++ b/code/frameworks/vue3-webpack5/README.md @@ -1,44 +1,3 @@ # Storybook for Vue 3 and Webpack -Storybook for Vue 3 is a UI development environment for your Vue 3 components. -With it, you can visualize different states of your UI components and develop them interactively. - -![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) - -Storybook runs outside of your app. -So you can develop UI components in isolation without worrying about app specific dependencies and requirements. - -## Getting Started - -```sh -cd my-vue3-app -npx storybook@latest init -``` - -For more information visit: [storybook.js.org](https://storybook.js.org) - ---- - -Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish. -You can also build a [static version](https://storybook.js.org/docs/sharing/publish-storybook) of your Storybook and deploy it anywhere you want. - -## Extending the Vue application - -Storybook creates a [Vue 3 application](https://vuejs.org/api/application.html#application-api) for your component preview. -When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file. - -Therefore, Storybook provides you with a `setup` function exported from this package, which receives as a callback your Storybook instance, which you can interact with and add your custom configuration. - -```js -// .storybook/preview.js - -import { setup } from '@storybook/vue3'; - -setup((app) => { - app.use(MyPlugin); - app.component('my-component', MyComponent); - app.mixin({ - /* My mixin */ - }); -}); -``` +See [documentation](https://storybook.js.org/docs/8.0/get-started/vue3-webpack5?renderer=vue) for installation instructions, usage examples, APIs, and more. \ No newline at end of file diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index 094fb5103f2d..7575b4b5ad70 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-webpack5", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-vite/README.md b/code/frameworks/web-components-vite/README.md index 9c68eca98041..af1a9ffaa853 100644 --- a/code/frameworks/web-components-vite/README.md +++ b/code/frameworks/web-components-vite/README.md @@ -1 +1,3 @@ -# Storybook for Web components +# Storybook for Web components & Vite + +See [documentation](https://storybook.js.org/docs/8.0/get-started/web-components-vite?renderer=web-components) for installation instructions, usage examples, APIs, and more. diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index cbe4ffdc247d..0ad55a968eff 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-vite", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-webpack5/README.md b/code/frameworks/web-components-webpack5/README.md index 4562b5dc35ee..d9ee9b9fd385 100644 --- a/code/frameworks/web-components-webpack5/README.md +++ b/code/frameworks/web-components-webpack5/README.md @@ -1,71 +1,3 @@ -# Storybook for web-components +# Storybook for Web components & Webpack ---- - -Storybook for web-components is a UI development environment for your plain web-component snippets. -With it, you can visualize different states of your UI components and develop them interactively. - -![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/main/media/storybook-intro.gif) - -Storybook runs outside of your app. -So you can develop UI components in isolation without worrying about app specific dependencies and requirements. - -## Getting Started - -```sh -cd my-app -npx storybook@latest init -t web_components -``` - -For more information visit: [storybook.js.org](https://storybook.js.org) - ---- - -Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish. -You can also build a [static version](https://storybook.js.org/docs/web-components/sharing/publish-storybook) of your storybook and deploy it anywhere you want. - -# Hot Module Reloading (HMR) - -As web components register on a global registry which only accepts a certain name/class once it can lead to errors when using classical HMR. There are ideas on how to archive HMR with a static registry but there is no proven solution yet. Therefore the best approach for now is to do full page reloads. If you keep your stories to specific states of components (which we would recommend anyways) this usually means it is fast. - -# Setup es6/7 dependencies - -By default storybook only works with precompiled ES5 code but as most web components themselves and their libs are distributed as ES2017 you will need to manually mark those packages as "needs transpilation". - -For example if you have a library called `my-library` which is in ES2017 then you can add it like so - -```js -// .storybook/main.js - -export default { - webpackFinal: async (config) => { - // find web-components rule for extra transpilation - const webComponentsRule = config.module.rules.find( - (rule) => rule.use && rule.use.options && rule.use.options.babelrc === false - ); - // add your own `my-library` - webComponentsRule.test.push(new RegExp(`node_modules(\\/|\\\\)my-library(.*)\\.js$`)); - - return config; - }, -}; -``` - -By default the following folders are included - -- `src/*.js` -- `packages/*/src/*.js` -- `node_modules/lit-html/*.js` -- `node_modules/lit-element/*.js` -- `node_modules/@open-wc/*.js` -- `node_modules/@polymer/*.js` -- `node_modules/@vaadin/*.js` - -As you can see the `src` folder is also included. -The reason for that is as it has some extra configuration to allow for example `import.meta`. -If you use a different folder you will need to make sure webpack/babel can handle it. - -# FAQ - -- While working on my component I get the error `Failed to execute 'define' on 'CustomElementRegistry': the name "..." has already been used with this registry` - => please see Setup page reload via HMR +See [documentation](https://storybook.js.org/docs/8.0/get-started/web-components-webpack5?renderer=web-components) for installation instructions, usage examples, APIs, and more. diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index 866ab3d35e5d..58e8127374d7 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-webpack5", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", diff --git a/code/lib/channels/package.json b/code/lib/channels/package.json index 1f583dc9865d..babfab81a6f3 100644 --- a/code/lib/channels/package.json +++ b/code/lib/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "", "keywords": [ "storybook" diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index e707547191dd..cf44c6af83c6 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index 3eb1547fccc0..2c1ebe24b774 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 01d064068c60..a781b00c1a44 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook's CLI - install, dev, build, upgrade, and more", "keywords": [ "cli", diff --git a/code/lib/client-logger/package.json b/code/lib/client-logger/package.json index 83926ddd07ac..1b93dcdb7a93 100644 --- a/code/lib/client-logger/package.json +++ b/code/lib/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "", "keywords": [ "storybook" diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 290164c50f5f..2c48f148ba76 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json index b46b9a1de983..6755631bf49c 100644 --- a/code/lib/core-common/package.json +++ b/code/lib/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/core-common/src/versions.ts b/code/lib/core-common/src/versions.ts index 0109c9c2a8a3..7ccc1ac33235 100644 --- a/code/lib/core-common/src/versions.ts +++ b/code/lib/core-common/src/versions.ts @@ -1,83 +1,83 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '8.1.0-alpha.0', - '@storybook/addon-actions': '8.1.0-alpha.0', - '@storybook/addon-backgrounds': '8.1.0-alpha.0', - '@storybook/addon-controls': '8.1.0-alpha.0', - '@storybook/addon-docs': '8.1.0-alpha.0', - '@storybook/addon-essentials': '8.1.0-alpha.0', - '@storybook/addon-highlight': '8.1.0-alpha.0', - '@storybook/addon-interactions': '8.1.0-alpha.0', - '@storybook/addon-jest': '8.1.0-alpha.0', - '@storybook/addon-links': '8.1.0-alpha.0', - '@storybook/addon-mdx-gfm': '8.1.0-alpha.0', - '@storybook/addon-measure': '8.1.0-alpha.0', - '@storybook/addon-onboarding': '8.1.0-alpha.0', - '@storybook/addon-outline': '8.1.0-alpha.0', - '@storybook/addon-storysource': '8.1.0-alpha.0', - '@storybook/addon-themes': '8.1.0-alpha.0', - '@storybook/addon-toolbars': '8.1.0-alpha.0', - '@storybook/addon-viewport': '8.1.0-alpha.0', - '@storybook/angular': '8.1.0-alpha.0', - '@storybook/blocks': '8.1.0-alpha.0', - '@storybook/builder-manager': '8.1.0-alpha.0', - '@storybook/builder-vite': '8.1.0-alpha.0', - '@storybook/builder-webpack5': '8.1.0-alpha.0', - '@storybook/channels': '8.1.0-alpha.0', - '@storybook/cli': '8.1.0-alpha.0', - '@storybook/client-logger': '8.1.0-alpha.0', - '@storybook/codemod': '8.1.0-alpha.0', - '@storybook/components': '8.1.0-alpha.0', - '@storybook/core-common': '8.1.0-alpha.0', - '@storybook/core-events': '8.1.0-alpha.0', - '@storybook/core-server': '8.1.0-alpha.0', - '@storybook/core-webpack': '8.1.0-alpha.0', - '@storybook/csf-plugin': '8.1.0-alpha.0', - '@storybook/csf-tools': '8.1.0-alpha.0', - '@storybook/docs-tools': '8.1.0-alpha.0', - '@storybook/ember': '8.1.0-alpha.0', - '@storybook/html': '8.1.0-alpha.0', - '@storybook/html-vite': '8.1.0-alpha.0', - '@storybook/html-webpack5': '8.1.0-alpha.0', - '@storybook/instrumenter': '8.1.0-alpha.0', - '@storybook/manager': '8.1.0-alpha.0', - '@storybook/manager-api': '8.1.0-alpha.0', - '@storybook/nextjs': '8.1.0-alpha.0', - '@storybook/node-logger': '8.1.0-alpha.0', - '@storybook/preact': '8.1.0-alpha.0', - '@storybook/preact-vite': '8.1.0-alpha.0', - '@storybook/preact-webpack5': '8.1.0-alpha.0', - '@storybook/preset-create-react-app': '8.1.0-alpha.0', - '@storybook/preset-html-webpack': '8.1.0-alpha.0', - '@storybook/preset-preact-webpack': '8.1.0-alpha.0', - '@storybook/preset-react-webpack': '8.1.0-alpha.0', - '@storybook/preset-server-webpack': '8.1.0-alpha.0', - '@storybook/preset-svelte-webpack': '8.1.0-alpha.0', - '@storybook/preset-vue3-webpack': '8.1.0-alpha.0', - '@storybook/preview': '8.1.0-alpha.0', - '@storybook/preview-api': '8.1.0-alpha.0', - '@storybook/react': '8.1.0-alpha.0', - '@storybook/react-dom-shim': '8.1.0-alpha.0', - '@storybook/react-vite': '8.1.0-alpha.0', - '@storybook/react-webpack5': '8.1.0-alpha.0', - '@storybook/router': '8.1.0-alpha.0', - '@storybook/server': '8.1.0-alpha.0', - '@storybook/server-webpack5': '8.1.0-alpha.0', - '@storybook/source-loader': '8.1.0-alpha.0', - '@storybook/svelte': '8.1.0-alpha.0', - '@storybook/svelte-vite': '8.1.0-alpha.0', - '@storybook/svelte-webpack5': '8.1.0-alpha.0', - '@storybook/sveltekit': '8.1.0-alpha.0', - '@storybook/telemetry': '8.1.0-alpha.0', - '@storybook/test': '8.1.0-alpha.0', - '@storybook/theming': '8.1.0-alpha.0', - '@storybook/types': '8.1.0-alpha.0', - '@storybook/vue3': '8.1.0-alpha.0', - '@storybook/vue3-vite': '8.1.0-alpha.0', - '@storybook/vue3-webpack5': '8.1.0-alpha.0', - '@storybook/web-components': '8.1.0-alpha.0', - '@storybook/web-components-vite': '8.1.0-alpha.0', - '@storybook/web-components-webpack5': '8.1.0-alpha.0', - sb: '8.1.0-alpha.0', - storybook: '8.1.0-alpha.0', + '@storybook/addon-a11y': '8.1.0-alpha.1', + '@storybook/addon-actions': '8.1.0-alpha.1', + '@storybook/addon-backgrounds': '8.1.0-alpha.1', + '@storybook/addon-controls': '8.1.0-alpha.1', + '@storybook/addon-docs': '8.1.0-alpha.1', + '@storybook/addon-essentials': '8.1.0-alpha.1', + '@storybook/addon-highlight': '8.1.0-alpha.1', + '@storybook/addon-interactions': '8.1.0-alpha.1', + '@storybook/addon-jest': '8.1.0-alpha.1', + '@storybook/addon-links': '8.1.0-alpha.1', + '@storybook/addon-mdx-gfm': '8.1.0-alpha.1', + '@storybook/addon-measure': '8.1.0-alpha.1', + '@storybook/addon-onboarding': '8.1.0-alpha.1', + '@storybook/addon-outline': '8.1.0-alpha.1', + '@storybook/addon-storysource': '8.1.0-alpha.1', + '@storybook/addon-themes': '8.1.0-alpha.1', + '@storybook/addon-toolbars': '8.1.0-alpha.1', + '@storybook/addon-viewport': '8.1.0-alpha.1', + '@storybook/angular': '8.1.0-alpha.1', + '@storybook/blocks': '8.1.0-alpha.1', + '@storybook/builder-manager': '8.1.0-alpha.1', + '@storybook/builder-vite': '8.1.0-alpha.1', + '@storybook/builder-webpack5': '8.1.0-alpha.1', + '@storybook/channels': '8.1.0-alpha.1', + '@storybook/cli': '8.1.0-alpha.1', + '@storybook/client-logger': '8.1.0-alpha.1', + '@storybook/codemod': '8.1.0-alpha.1', + '@storybook/components': '8.1.0-alpha.1', + '@storybook/core-common': '8.1.0-alpha.1', + '@storybook/core-events': '8.1.0-alpha.1', + '@storybook/core-server': '8.1.0-alpha.1', + '@storybook/core-webpack': '8.1.0-alpha.1', + '@storybook/csf-plugin': '8.1.0-alpha.1', + '@storybook/csf-tools': '8.1.0-alpha.1', + '@storybook/docs-tools': '8.1.0-alpha.1', + '@storybook/ember': '8.1.0-alpha.1', + '@storybook/html': '8.1.0-alpha.1', + '@storybook/html-vite': '8.1.0-alpha.1', + '@storybook/html-webpack5': '8.1.0-alpha.1', + '@storybook/instrumenter': '8.1.0-alpha.1', + '@storybook/manager': '8.1.0-alpha.1', + '@storybook/manager-api': '8.1.0-alpha.1', + '@storybook/nextjs': '8.1.0-alpha.1', + '@storybook/node-logger': '8.1.0-alpha.1', + '@storybook/preact': '8.1.0-alpha.1', + '@storybook/preact-vite': '8.1.0-alpha.1', + '@storybook/preact-webpack5': '8.1.0-alpha.1', + '@storybook/preset-create-react-app': '8.1.0-alpha.1', + '@storybook/preset-html-webpack': '8.1.0-alpha.1', + '@storybook/preset-preact-webpack': '8.1.0-alpha.1', + '@storybook/preset-react-webpack': '8.1.0-alpha.1', + '@storybook/preset-server-webpack': '8.1.0-alpha.1', + '@storybook/preset-svelte-webpack': '8.1.0-alpha.1', + '@storybook/preset-vue3-webpack': '8.1.0-alpha.1', + '@storybook/preview': '8.1.0-alpha.1', + '@storybook/preview-api': '8.1.0-alpha.1', + '@storybook/react': '8.1.0-alpha.1', + '@storybook/react-dom-shim': '8.1.0-alpha.1', + '@storybook/react-vite': '8.1.0-alpha.1', + '@storybook/react-webpack5': '8.1.0-alpha.1', + '@storybook/router': '8.1.0-alpha.1', + '@storybook/server': '8.1.0-alpha.1', + '@storybook/server-webpack5': '8.1.0-alpha.1', + '@storybook/source-loader': '8.1.0-alpha.1', + '@storybook/svelte': '8.1.0-alpha.1', + '@storybook/svelte-vite': '8.1.0-alpha.1', + '@storybook/svelte-webpack5': '8.1.0-alpha.1', + '@storybook/sveltekit': '8.1.0-alpha.1', + '@storybook/telemetry': '8.1.0-alpha.1', + '@storybook/test': '8.1.0-alpha.1', + '@storybook/theming': '8.1.0-alpha.1', + '@storybook/types': '8.1.0-alpha.1', + '@storybook/vue3': '8.1.0-alpha.1', + '@storybook/vue3-vite': '8.1.0-alpha.1', + '@storybook/vue3-webpack5': '8.1.0-alpha.1', + '@storybook/web-components': '8.1.0-alpha.1', + '@storybook/web-components-vite': '8.1.0-alpha.1', + '@storybook/web-components-webpack5': '8.1.0-alpha.1', + sb: '8.1.0-alpha.1', + storybook: '8.1.0-alpha.1', }; diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json index 2fda3e0eb626..aaa150c0cd98 100644 --- a/code/lib/core-events/package.json +++ b/code/lib/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Event names used in storybook core", "keywords": [ "storybook" diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 2b44e68b8a22..6a2428523cb6 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index d1e6142601ea..22af5e8e2400 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-webpack", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index 1761eb435ae1..258f868ba615 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-plugin", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index f8e58033aff3..d713f09c8ad6 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Parse and manipulate CSF and Storybook config files", "keywords": [ "storybook" diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json index 8ecc609ee401..e57e812eb307 100644 --- a/code/lib/docs-tools/package.json +++ b/code/lib/docs-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/docs-tools", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Shared utility functions for frameworks to implement docs", "keywords": [ "storybook" diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index c411b7c9138c..b7cbb75e41e1 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/instrumenter", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "", "keywords": [ "storybook" @@ -49,7 +49,7 @@ "@storybook/core-events": "workspace:*", "@storybook/global": "^5.0.0", "@storybook/preview-api": "workspace:*", - "@vitest/utils": "^0.34.6", + "@vitest/utils": "^1.3.1", "util": "^0.12.4" }, "devDependencies": { diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index 566511f21346..8832ff4bd12f 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager-api", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" @@ -60,7 +60,6 @@ "ts-dedent": "^2.0.0" }, "devDependencies": { - "@jest/globals": "^29.3.1", "@types/lodash": "^4.14.167", "@types/qs": "^6", "@types/semver": "^7.3.4", diff --git a/code/lib/manager-api/src/version.ts b/code/lib/manager-api/src/version.ts index f89e3528d2df..a6d040b0eac6 100644 --- a/code/lib/manager-api/src/version.ts +++ b/code/lib/manager-api/src/version.ts @@ -1 +1 @@ -export const version = '8.1.0-alpha.0'; +export const version = '8.1.0-alpha.1'; diff --git a/code/lib/node-logger/package.json b/code/lib/node-logger/package.json index 739cd0051874..4bbefd1d2ba4 100644 --- a/code/lib/node-logger/package.json +++ b/code/lib/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "", "keywords": [ "storybook" diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index 126be65d5e3a..4fb9ccb2070d 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-api", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "", "keywords": [ "storybook" @@ -60,7 +60,6 @@ "util-deprecate": "^1.0.2" }, "devDependencies": { - "@jest/globals": "^29.5.0", "@storybook/core-common": "workspace:*", "ansi-to-html": "^0.6.11", "slash": "^5.0.0" diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json index 94821536bc4a..c14feb4d1276 100644 --- a/code/lib/preview/package.json +++ b/code/lib/preview/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "", "keywords": [ "storybook" diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index ab34b8084785..302d1310b982 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-dom-shim", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "", "keywords": [ "storybook" diff --git a/code/lib/router/package.json b/code/lib/router/package.json index 767d40a74d23..1467d74ab9d2 100644 --- a/code/lib/router/package.json +++ b/code/lib/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Core Storybook Router", "keywords": [ "storybook" diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 65ab30b64945..e3d0f73012c0 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/source-loader", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Source loader", "keywords": [ "lib", diff --git a/code/lib/telemetry/package.json b/code/lib/telemetry/package.json index f1f12541c50f..71ebdf362fb2 100644 --- a/code/lib/telemetry/package.json +++ b/code/lib/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/telemetry", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Telemetry logging for crash reports and usage statistics", "keywords": [ "storybook" diff --git a/code/lib/test/package.json b/code/lib/test/package.json index 6717a6912906..86caf7db8c65 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/test", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "", "keywords": [ "storybook" @@ -47,12 +47,12 @@ "@storybook/core-events": "workspace:*", "@storybook/instrumenter": "workspace:*", "@storybook/preview-api": "workspace:*", - "@testing-library/dom": "^9.3.1", - "@testing-library/jest-dom": "^6.4.0", + "@testing-library/dom": "^9.3.4", + "@testing-library/jest-dom": "^6.4.2", "@testing-library/user-event": "^14.5.2", - "@vitest/expect": "1.1.3", - "@vitest/spy": "^1.1.3", - "chai": "^4.3.7", + "@vitest/expect": "1.3.1", + "@vitest/spy": "^1.3.1", + "chai": "^4.4.1", "util": "^0.12.4" }, "devDependencies": { diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json index 1f65e8cb47b5..b6592a4c6f9f 100644 --- a/code/lib/theming/package.json +++ b/code/lib/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 7441040beb30..7576e7349bb0 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Core Storybook TS Types", "keywords": [ "storybook" diff --git a/code/package.json b/code/package.json index decb2ffe484c..205aacdf8b5e 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "private": true, "description": "Storybook root", "homepage": "https://storybook.js.org/", @@ -78,8 +78,9 @@ "resolutions": { "@playwright/test": "1.36.0", "@storybook/theming": "workspace:*", + "@testing-library/jest-dom/aria-query": "5.1.3", "@types/node": "^18.0.0", - "@vitest/expect@1.1.3": "patch:@vitest/expect@npm%3A1.1.3#~/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch", + "@vitest/expect": "patch:@vitest/expect@npm%3A1.3.1#~/.yarn/patches/@vitest-expect-npm-1.3.1-973071a540.patch", "esbuild": "^0.20.1", "playwright": "1.36.0", "playwright-core": "1.36.0", @@ -170,7 +171,7 @@ "@storybook/web-components-vite": "workspace:*", "@storybook/web-components-webpack5": "workspace:*", "@testing-library/dom": "^7.29.4", - "@testing-library/jest-dom": "^6.1.4", + "@testing-library/jest-dom": "6.1.4", "@testing-library/react": "^14.0.0", "@testing-library/user-event": "^14.4.3", "@types/express": "^4.17.11", diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index c4205df2cd82..c765737ee717 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-create-react-app", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook for Create React App preset", "keywords": [ "storybook" diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index 006e4420c607..1a0ee7ad581b 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-html-webpack", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index 41117bd1edc6..ab154aea59b0 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-preact-webpack", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index f047c7b46f4c..305e7d84a0af 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-react-webpack", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading", "keywords": [ "storybook" diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index baee5080f344..0d53be533722 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-server-webpack", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index a15e5e084c25..959ab344288b 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-svelte-webpack", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index c1f50f0d3365..4a15cdc07239 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-vue3-webpack", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index c7cefb70c642..6cfd2e08788e 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook HTML renderer", "keywords": [ "storybook" diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index fe1df6ad774b..ff6217b7121f 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook Preact renderer", "keywords": [ "storybook" diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 6abc64587845..08ace69c3cba 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook React renderer", "keywords": [ "storybook" diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 2b0bf9a31e1f..d30ef3c8d235 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook Server renderer", "keywords": [ "storybook" diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index d7084c890c0c..f59527640f7b 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook Svelte renderer", "keywords": [ "storybook" diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index 875b5742a5f8..e97bd3fb8d15 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" diff --git a/code/renderers/vue3/src/docs/sourceDecorator.ts b/code/renderers/vue3/src/docs/sourceDecorator.ts index 797e7a648d9a..525cfbbfd281 100644 --- a/code/renderers/vue3/src/docs/sourceDecorator.ts +++ b/code/renderers/vue3/src/docs/sourceDecorator.ts @@ -15,7 +15,7 @@ import type { import { baseParse } from '@vue/compiler-core'; import type { ConcreteComponent, FunctionalComponent, VNode } from 'vue'; import { h, isVNode, watch } from 'vue'; -import { kebabCase } from 'lodash'; +import kebabCase from 'lodash/kebabCase'; import { attributeSource, htmlEventAttributeToVueEventAttribute, diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index 73fe293ad3e3..64629f91a4bd 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook web-components renderer", "keywords": [ "lit", diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json index c32ad8074761..5b912136af1d 100644 --- a/code/ui/blocks/package.json +++ b/code/ui/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/blocks", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Storybook Doc Blocks", "keywords": [ "storybook" diff --git a/code/ui/blocks/src/blocks/ArgTypes.tsx b/code/ui/blocks/src/blocks/ArgTypes.tsx index 7fe3cf8a66c9..fc64e7ba16e1 100644 --- a/code/ui/blocks/src/blocks/ArgTypes.tsx +++ b/code/ui/blocks/src/blocks/ArgTypes.tsx @@ -7,7 +7,6 @@ import { filterArgTypes } from '@storybook/preview-api'; import type { ArgTypesExtractor } from '@storybook/docs-tools'; import React from 'react'; -import { mapValues } from 'lodash'; import type { SortType } from '../components'; import { ArgsTable as PureArgsTable, ArgsTableError, TabbedArgsTable } from '../components'; import { useOf } from './useOf'; @@ -83,10 +82,15 @@ export const ArgTypes: FC = (props) => { } const mainComponentName = getComponentName(component); - const subcomponentTabs = mapValues(subcomponents, (comp) => ({ - rows: filterArgTypes(extractComponentArgTypes(comp, parameters), include, exclude), - sort, - })); + const subcomponentTabs = Object.fromEntries( + Object.entries(subcomponents).map(([key, comp]) => [ + key, + { + rows: filterArgTypes(extractComponentArgTypes(comp, parameters), include, exclude), + sort, + }, + ]) + ); const tabs = { [mainComponentName]: { rows: filteredArgTypes, sort }, ...subcomponentTabs, diff --git a/code/ui/blocks/src/blocks/Controls.tsx b/code/ui/blocks/src/blocks/Controls.tsx index f47194033f1d..4e3ea828e289 100644 --- a/code/ui/blocks/src/blocks/Controls.tsx +++ b/code/ui/blocks/src/blocks/Controls.tsx @@ -7,7 +7,6 @@ import { filterArgTypes } from '@storybook/preview-api'; import type { PropDescriptor } from '@storybook/preview-api'; import type { ArgTypesExtractor } from '@storybook/docs-tools'; -import { mapValues } from 'lodash'; import type { SortType } from '../components'; import { ArgsTable as PureArgsTable, ArgsTableError, TabbedArgsTable } from '../components'; import { DocsContext } from './DocsContext'; @@ -75,10 +74,15 @@ export const Controls: FC = (props) => { } const mainComponentName = getComponentName(component); - const subcomponentTabs = mapValues(subcomponents, (comp) => ({ - rows: filterArgTypes(extractComponentArgTypes(comp, parameters), include, exclude), - sort, - })); + const subcomponentTabs = Object.fromEntries( + Object.entries(subcomponents).map(([key, comp]) => [ + key, + { + rows: filterArgTypes(extractComponentArgTypes(comp, parameters), include, exclude), + sort, + }, + ]) + ); const tabs = { [mainComponentName]: { rows: filteredArgTypes, sort }, ...subcomponentTabs, diff --git a/code/ui/components/package.json b/code/ui/components/package.json index 0cb6cc2278d3..31987d45b792 100644 --- a/code/ui/components/package.json +++ b/code/ui/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index 1c2507505030..6fb2e772f091 100644 --- a/code/ui/manager/package.json +++ b/code/ui/manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager", - "version": "8.1.0-alpha.0", + "version": "8.1.0-alpha.1", "description": "Core Storybook UI", "keywords": [ "storybook" diff --git a/code/yarn.lock b/code/yarn.lock index 19b2f6697c04..2a8cf58a01de 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -24,7 +24,7 @@ __metadata: languageName: node linkType: hard -"@adobe/css-tools@npm:^4.3.2": +"@adobe/css-tools@npm:^4.3.1, @adobe/css-tools@npm:^4.3.2": version: 4.3.3 resolution: "@adobe/css-tools@npm:4.3.3" checksum: e76e712df713964b87cdf2aca1f0477f19bebd845484d5fcba726d3ec7782366e2f26ec8cb2dcfaf47081a5c891987d8a9f5c3f30d11e1eb3c1848adc27fcb24 @@ -404,7 +404,7 @@ __metadata: languageName: node linkType: hard -"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.12.13, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.16.7, @babel/code-frame@npm:^7.21.4, @babel/code-frame@npm:^7.22.13, @babel/code-frame@npm:^7.23.5": +"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.16.0, @babel/code-frame@npm:^7.16.7, @babel/code-frame@npm:^7.21.4, @babel/code-frame@npm:^7.22.13, @babel/code-frame@npm:^7.23.5": version: 7.23.5 resolution: "@babel/code-frame@npm:7.23.5" dependencies: @@ -444,7 +444,7 @@ __metadata: languageName: node linkType: hard -"@babel/core@npm:^7.11.6, @babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.18.9, @babel/core@npm:^7.20.12, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2, @babel/core@npm:^7.23.9, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5": +"@babel/core@npm:^7.12.0, @babel/core@npm:^7.12.3, @babel/core@npm:^7.13.16, @babel/core@npm:^7.18.9, @babel/core@npm:^7.20.12, @babel/core@npm:^7.23.0, @babel/core@npm:^7.23.2, @babel/core@npm:^7.23.9, @babel/core@npm:^7.3.4, @babel/core@npm:^7.7.5": version: 7.23.9 resolution: "@babel/core@npm:7.23.9" dependencies: @@ -479,7 +479,7 @@ __metadata: languageName: node linkType: hard -"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.23.0, @babel/generator@npm:^7.23.6, @babel/generator@npm:^7.7.2": +"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.23.0, @babel/generator@npm:^7.23.6": version: 7.23.6 resolution: "@babel/generator@npm:7.23.6" dependencies: @@ -905,7 +905,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-class-properties@npm:^7.12.13, @babel/plugin-syntax-class-properties@npm:^7.8.3": +"@babel/plugin-syntax-class-properties@npm:^7.12.13": version: 7.12.13 resolution: "@babel/plugin-syntax-class-properties@npm:7.12.13" dependencies: @@ -993,7 +993,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-import-meta@npm:^7.10.4, @babel/plugin-syntax-import-meta@npm:^7.8.3": +"@babel/plugin-syntax-import-meta@npm:^7.10.4": version: 7.10.4 resolution: "@babel/plugin-syntax-import-meta@npm:7.10.4" dependencies: @@ -1015,7 +1015,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-jsx@npm:^7.23.3, @babel/plugin-syntax-jsx@npm:^7.7.2": +"@babel/plugin-syntax-jsx@npm:^7.23.3": version: 7.23.3 resolution: "@babel/plugin-syntax-jsx@npm:7.23.3" dependencies: @@ -1026,7 +1026,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-logical-assignment-operators@npm:^7.10.4, @babel/plugin-syntax-logical-assignment-operators@npm:^7.8.3": +"@babel/plugin-syntax-logical-assignment-operators@npm:^7.10.4": version: 7.10.4 resolution: "@babel/plugin-syntax-logical-assignment-operators@npm:7.10.4" dependencies: @@ -1048,7 +1048,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-numeric-separator@npm:^7.10.4, @babel/plugin-syntax-numeric-separator@npm:^7.8.3": +"@babel/plugin-syntax-numeric-separator@npm:^7.10.4": version: 7.10.4 resolution: "@babel/plugin-syntax-numeric-separator@npm:7.10.4" dependencies: @@ -1103,7 +1103,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-top-level-await@npm:^7.14.5, @babel/plugin-syntax-top-level-await@npm:^7.8.3": +"@babel/plugin-syntax-top-level-await@npm:^7.14.5": version: 7.14.5 resolution: "@babel/plugin-syntax-top-level-await@npm:7.14.5" dependencies: @@ -1114,7 +1114,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-typescript@npm:^7.23.3, @babel/plugin-syntax-typescript@npm:^7.7.2": +"@babel/plugin-syntax-typescript@npm:^7.23.3": version: 7.23.3 resolution: "@babel/plugin-syntax-typescript@npm:7.23.3" dependencies: @@ -2238,7 +2238,7 @@ __metadata: languageName: node linkType: hard -"@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.18.9, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.4, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.4, @babel/types@npm:^7.23.6, @babel/types@npm:^7.23.9, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.2, @babel/types@npm:^7.8.3, @babel/types@npm:^7.9.6": +"@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.18.9, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.4, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.4, @babel/types@npm:^7.23.6, @babel/types@npm:^7.23.9, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.2, @babel/types@npm:^7.8.3, @babel/types@npm:^7.9.6": version: 7.23.9 resolution: "@babel/types@npm:7.23.9" dependencies: @@ -3405,63 +3405,6 @@ __metadata: languageName: node linkType: hard -"@jest/environment@npm:^29.7.0": - version: 29.7.0 - resolution: "@jest/environment@npm:29.7.0" - dependencies: - "@jest/fake-timers": "npm:^29.7.0" - "@jest/types": "npm:^29.6.3" - "@types/node": "npm:*" - jest-mock: "npm:^29.7.0" - checksum: c7b1b40c618f8baf4d00609022d2afa086d9c6acc706f303a70bb4b67275868f620ad2e1a9efc5edd418906157337cce50589a627a6400bbdf117d351b91ef86 - languageName: node - linkType: hard - -"@jest/expect-utils@npm:^29.7.0": - version: 29.7.0 - resolution: "@jest/expect-utils@npm:29.7.0" - dependencies: - jest-get-type: "npm:^29.6.3" - checksum: 60b79d23a5358dc50d9510d726443316253ecda3a7fb8072e1526b3e0d3b14f066ee112db95699b7a43ad3f0b61b750c72e28a5a1cac361d7a2bb34747fa938a - languageName: node - linkType: hard - -"@jest/expect@npm:^29.7.0": - version: 29.7.0 - resolution: "@jest/expect@npm:29.7.0" - dependencies: - expect: "npm:^29.7.0" - jest-snapshot: "npm:^29.7.0" - checksum: b41f193fb697d3ced134349250aed6ccea075e48c4f803159db102b826a4e473397c68c31118259868fd69a5cba70e97e1c26d2c2ff716ca39dc73a2ccec037e - languageName: node - linkType: hard - -"@jest/fake-timers@npm:^29.7.0": - version: 29.7.0 - resolution: "@jest/fake-timers@npm:29.7.0" - dependencies: - "@jest/types": "npm:^29.6.3" - "@sinonjs/fake-timers": "npm:^10.0.2" - "@types/node": "npm:*" - jest-message-util: "npm:^29.7.0" - jest-mock: "npm:^29.7.0" - jest-util: "npm:^29.7.0" - checksum: cf0a8bcda801b28dc2e2b2ba36302200ee8104a45ad7a21e6c234148932f826cb3bc57c8df3b7b815aeea0861d7b6ca6f0d4778f93b9219398ef28749e03595c - languageName: node - linkType: hard - -"@jest/globals@npm:^29.3.1, @jest/globals@npm:^29.5.0": - version: 29.7.0 - resolution: "@jest/globals@npm:29.7.0" - dependencies: - "@jest/environment": "npm:^29.7.0" - "@jest/expect": "npm:^29.7.0" - "@jest/types": "npm:^29.6.3" - jest-mock: "npm:^29.7.0" - checksum: a385c99396878fe6e4460c43bd7bb0a5cc52befb462cc6e7f2a3810f9e7bcce7cdeb51908fd530391ee452dc856c98baa2c5f5fa8a5b30b071d31ef7f6955cea - languageName: node - linkType: hard - "@jest/schemas@npm:^29.6.3": version: 29.6.3 resolution: "@jest/schemas@npm:29.6.3" @@ -3471,29 +3414,6 @@ __metadata: languageName: node linkType: hard -"@jest/transform@npm:^29.7.0": - version: 29.7.0 - resolution: "@jest/transform@npm:29.7.0" - dependencies: - "@babel/core": "npm:^7.11.6" - "@jest/types": "npm:^29.6.3" - "@jridgewell/trace-mapping": "npm:^0.3.18" - babel-plugin-istanbul: "npm:^6.1.1" - chalk: "npm:^4.0.0" - convert-source-map: "npm:^2.0.0" - fast-json-stable-stringify: "npm:^2.1.0" - graceful-fs: "npm:^4.2.9" - jest-haste-map: "npm:^29.7.0" - jest-regex-util: "npm:^29.6.3" - jest-util: "npm:^29.7.0" - micromatch: "npm:^4.0.4" - pirates: "npm:^4.0.4" - slash: "npm:^3.0.0" - write-file-atomic: "npm:^4.0.2" - checksum: 7f4a7f73dcf45dfdf280c7aa283cbac7b6e5a904813c3a93ead7e55873761fc20d5c4f0191d2019004fac6f55f061c82eb3249c2901164ad80e362e7a7ede5a6 - languageName: node - linkType: hard - "@jest/types@npm:^26.6.2": version: 26.6.2 resolution: "@jest/types@npm:26.6.2" @@ -3507,33 +3427,6 @@ __metadata: languageName: node linkType: hard -"@jest/types@npm:^27.5.1": - version: 27.5.1 - resolution: "@jest/types@npm:27.5.1" - dependencies: - "@types/istanbul-lib-coverage": "npm:^2.0.0" - "@types/istanbul-reports": "npm:^3.0.0" - "@types/node": "npm:*" - "@types/yargs": "npm:^16.0.0" - chalk: "npm:^4.0.0" - checksum: 4598b302398db0eb77168b75a6c58148ea02cc9b9f21c5d1bbe985c1c9257110a5653cf7b901c3cab87fba231e3fed83633687f1c0903b4bc6939ab2a8452504 - languageName: node - linkType: hard - -"@jest/types@npm:^29.6.3": - version: 29.6.3 - resolution: "@jest/types@npm:29.6.3" - dependencies: - "@jest/schemas": "npm:^29.6.3" - "@types/istanbul-lib-coverage": "npm:^2.0.0" - "@types/istanbul-reports": "npm:^3.0.0" - "@types/node": "npm:*" - "@types/yargs": "npm:^17.0.8" - chalk: "npm:^4.0.0" - checksum: ea4e493dd3fb47933b8ccab201ae573dcc451f951dc44ed2a86123cd8541b82aa9d2b1031caf9b1080d6673c517e2dcc25a44b2dc4f3fbc37bfc965d444888c0 - languageName: node - linkType: hard - "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.0": version: 0.3.0 resolution: "@joshwooding/vite-plugin-react-docgen-typescript@npm:0.3.0" @@ -4904,24 +4797,6 @@ __metadata: languageName: node linkType: hard -"@sinonjs/commons@npm:^3.0.0": - version: 3.0.0 - resolution: "@sinonjs/commons@npm:3.0.0" - dependencies: - type-detect: "npm:4.0.8" - checksum: 1df9cd257942f4e4960dfb9fd339d9e97b6a3da135f3d5b8646562918e863809cb8e00268535f4f4723535d2097881c8fc03d545c414d8555183376cfc54ee84 - languageName: node - linkType: hard - -"@sinonjs/fake-timers@npm:^10.0.2": - version: 10.3.0 - resolution: "@sinonjs/fake-timers@npm:10.3.0" - dependencies: - "@sinonjs/commons": "npm:^3.0.0" - checksum: 2e2fb6cc57f227912814085b7b01fede050cd4746ea8d49a1e44d5a0e56a804663b0340ae2f11af7559ea9bf4d087a11f2f646197a660ea3cb04e19efc04aa63 - languageName: node - linkType: hard - "@socket.io/component-emitter@npm:~3.1.0": version: 3.1.0 resolution: "@socket.io/component-emitter@npm:3.1.0" @@ -5126,7 +5001,6 @@ __metadata: "@storybook/types": "workspace:*" "@types/node": "npm:^18.0.0" formik: "npm:^2.2.9" - jest-mock: "npm:^27.0.6" polished: "npm:^4.2.2" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" @@ -6054,7 +5928,7 @@ __metadata: "@storybook/core-events": "workspace:*" "@storybook/global": "npm:^5.0.0" "@storybook/preview-api": "workspace:*" - "@vitest/utils": "npm:^0.34.6" + "@vitest/utils": "npm:^1.3.1" typescript: "npm:^5.3.2" util: "npm:^0.12.4" languageName: unknown @@ -6091,7 +5965,6 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/manager-api@workspace:lib/manager-api" dependencies: - "@jest/globals": "npm:^29.3.1" "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-events": "workspace:*" @@ -6422,7 +6295,6 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/preview-api@workspace:lib/preview-api" dependencies: - "@jest/globals": "npm:^29.5.0" "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" @@ -6659,7 +6531,7 @@ __metadata: "@storybook/web-components-vite": "workspace:*" "@storybook/web-components-webpack5": "workspace:*" "@testing-library/dom": "npm:^7.29.4" - "@testing-library/jest-dom": "npm:^6.1.4" + "@testing-library/jest-dom": "npm:6.1.4" "@testing-library/react": "npm:^14.0.0" "@testing-library/user-event": "npm:^14.4.3" "@types/express": "npm:^4.17.11" @@ -6900,12 +6772,12 @@ __metadata: "@storybook/core-events": "workspace:*" "@storybook/instrumenter": "workspace:*" "@storybook/preview-api": "workspace:*" - "@testing-library/dom": "npm:^9.3.1" - "@testing-library/jest-dom": "npm:^6.4.0" + "@testing-library/dom": "npm:^9.3.4" + "@testing-library/jest-dom": "npm:^6.4.2" "@testing-library/user-event": "npm:^14.5.2" - "@vitest/expect": "npm:1.1.3" - "@vitest/spy": "npm:^1.1.3" - chai: "npm:^4.3.7" + "@vitest/expect": "npm:1.3.1" + "@vitest/spy": "npm:^1.3.1" + chai: "npm:^4.4.1" ts-dedent: "npm:^2.2.0" type-fest: "npm:~2.19" typescript: "npm:^5.3.2" @@ -7155,9 +7027,9 @@ __metadata: languageName: node linkType: hard -"@testing-library/dom@npm:^9.0.0, @testing-library/dom@npm:^9.3.1, @testing-library/dom@npm:^9.3.3": - version: 9.3.3 - resolution: "@testing-library/dom@npm:9.3.3" +"@testing-library/dom@npm:^9.0.0, @testing-library/dom@npm:^9.3.3, @testing-library/dom@npm:^9.3.4": + version: 9.3.4 + resolution: "@testing-library/dom@npm:9.3.4" dependencies: "@babel/code-frame": "npm:^7.10.4" "@babel/runtime": "npm:^7.12.5" @@ -7167,13 +7039,43 @@ __metadata: dom-accessibility-api: "npm:^0.5.9" lz-string: "npm:^1.5.0" pretty-format: "npm:^27.0.2" - checksum: c3bbd67503634fd955233dc172531640656701fe35ecb9a83f85e5965874b786452f5e7c26b4f8b3b4fc4379f3a80193c74425b57843ba191f4845e22b0ac483 + checksum: 147da340e8199d7f98f3a4ad8aa22ed55b914b83957efa5eb22bfea021a979ebe5a5182afa9c1e5b7a5f99a7f6744a5a4d9325ae46ec3b33b5a15aed8750d794 languageName: node linkType: hard -"@testing-library/jest-dom@npm:^6.1.4, @testing-library/jest-dom@npm:^6.4.0": - version: 6.4.0 - resolution: "@testing-library/jest-dom@npm:6.4.0" +"@testing-library/jest-dom@npm:6.1.4": + version: 6.1.4 + resolution: "@testing-library/jest-dom@npm:6.1.4" + dependencies: + "@adobe/css-tools": "npm:^4.3.1" + "@babel/runtime": "npm:^7.9.2" + aria-query: "npm:^5.0.0" + chalk: "npm:^3.0.0" + css.escape: "npm:^1.5.1" + dom-accessibility-api: "npm:^0.5.6" + lodash: "npm:^4.17.15" + redent: "npm:^3.0.0" + peerDependencies: + "@jest/globals": ">= 28" + "@types/jest": ">= 28" + jest: ">= 28" + vitest: ">= 0.32" + peerDependenciesMeta: + "@jest/globals": + optional: true + "@types/jest": + optional: true + jest: + optional: true + vitest: + optional: true + checksum: 2e23f120613fd8ae6d5169bbc94f1a2e4c82b07182057dc94db8ec54ebf32555833442e6c43a187e59715d83704ffb5df49ba88a71f6f32d2683f3d95ba721c7 + languageName: node + linkType: hard + +"@testing-library/jest-dom@npm:^6.4.2": + version: 6.4.2 + resolution: "@testing-library/jest-dom@npm:6.4.2" dependencies: "@adobe/css-tools": "npm:^4.3.2" "@babel/runtime": "npm:^7.9.2" @@ -7200,7 +7102,7 @@ __metadata: optional: true vitest: optional: true - checksum: 6b7eba9ca388986a721fb12f84adf0f5534bf7ec5851982023a889c4a0afac6e9e91291bdac39e1f59a05adefd7727e30463d98b21c3da32fbfec229ccb11ef1 + checksum: e7eba527b34ce30cde94424d2ec685bdfed51daaafb7df9b68b51aec6052e99a50c8bfe654612dacdf857a1eb81d68cf294fc89de558ee3a992bf7a6019fffcc languageName: node linkType: hard @@ -7682,15 +7584,6 @@ __metadata: languageName: node linkType: hard -"@types/graceful-fs@npm:^4.1.3": - version: 4.1.7 - resolution: "@types/graceful-fs@npm:4.1.7" - dependencies: - "@types/node": "npm:*" - checksum: a8c04a250cb40207b15097b33c053f5ecf4352f5107c0a2635f674dae8c9a90b28dc9bd6e28307d5aab0b5d3853e713de42110a149a6e303626915047134e87d - languageName: node - linkType: hard - "@types/hast@npm:^2.0.0": version: 2.3.6 resolution: "@types/hast@npm:2.3.6" @@ -8201,13 +8094,6 @@ __metadata: languageName: node linkType: hard -"@types/stack-utils@npm:^2.0.0": - version: 2.0.1 - resolution: "@types/stack-utils@npm:2.0.1" - checksum: 3327ee919a840ffe907bbd5c1d07dfd79137dd9732d2d466cf717ceec5bb21f66296173c53bb56cff95fae4185b9cd6770df3e9745fe4ba528bbc4975f54d13f - languageName: node - linkType: hard - "@types/supports-color@npm:^8.0.0": version: 8.1.3 resolution: "@types/supports-color@npm:8.1.3" @@ -8380,24 +8266,6 @@ __metadata: languageName: node linkType: hard -"@types/yargs@npm:^16.0.0": - version: 16.0.6 - resolution: "@types/yargs@npm:16.0.6" - dependencies: - "@types/yargs-parser": "npm:*" - checksum: a2cc5796cea1aac492c856ff35e829a6a230e6d72540a9446273ab16392f6ef04b8fef05ddcff71c8106c047820b5534b22e031245ee55995b1ba0c8caa382b2 - languageName: node - linkType: hard - -"@types/yargs@npm:^17.0.8": - version: 17.0.26 - resolution: "@types/yargs@npm:17.0.26" - dependencies: - "@types/yargs-parser": "npm:*" - checksum: 34ab6eff6dff086b1044c65d53131e1d14e87c0c6dc44cb6851d74d8a4d1ac4503f7d12d1e1ecff25f8aea62ff7a9d6b04b05870a0324d15bbb226ddfc1d6065 - languageName: node - linkType: hard - "@typescript-eslint/eslint-plugin@npm:^6.18.1": version: 6.21.0 resolution: "@typescript-eslint/eslint-plugin@npm:6.21.0" @@ -8725,36 +8593,25 @@ __metadata: languageName: node linkType: hard -"@vitest/expect@npm:1.1.3": - version: 1.1.3 - resolution: "@vitest/expect@npm:1.1.3" - dependencies: - "@vitest/spy": "npm:1.1.3" - "@vitest/utils": "npm:1.1.3" - chai: "npm:^4.3.10" - checksum: fe5c9eade516a754efc26d4b6378a250f0c3b668fa15b3e6b6042190b64a65c4459b7fd67bfca72fb1fbf215feb838b68da4ab224a2a10137d8828ca6af70516 - languageName: node - linkType: hard - -"@vitest/expect@npm:1.2.2": - version: 1.2.2 - resolution: "@vitest/expect@npm:1.2.2" +"@vitest/expect@npm:1.3.1": + version: 1.3.1 + resolution: "@vitest/expect@npm:1.3.1" dependencies: - "@vitest/spy": "npm:1.2.2" - "@vitest/utils": "npm:1.2.2" + "@vitest/spy": "npm:1.3.1" + "@vitest/utils": "npm:1.3.1" chai: "npm:^4.3.10" - checksum: 920e80b956d9d5ef7909cbe2bf883c8556da11c5123ea037396cb672d7038116c9773bd36915a3df7be2ffd76b661d5a6487e7e5ded78f39e2500cb36ae81e59 + checksum: ea66a1e912d896a481a27631b68089b885af7e8ed62ba8aaa119c37a9beafe6c094fd672775a20e6e23460af66e294f9ca259e6e0562708d1b7724eaaf53c7bb languageName: node linkType: hard -"@vitest/expect@patch:@vitest/expect@npm%3A1.1.3#~/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch": - version: 1.1.3 - resolution: "@vitest/expect@patch:@vitest/expect@npm%3A1.1.3#~/.yarn/patches/@vitest-expect-npm-1.1.3-2062bf533f.patch::version=1.1.3&hash=8fb073" +"@vitest/expect@patch:@vitest/expect@npm%3A1.3.1#~/.yarn/patches/@vitest-expect-npm-1.3.1-973071a540.patch": + version: 1.3.1 + resolution: "@vitest/expect@patch:@vitest/expect@npm%3A1.3.1#~/.yarn/patches/@vitest-expect-npm-1.3.1-973071a540.patch::version=1.3.1&hash=9dbd39" dependencies: - "@vitest/spy": "npm:1.1.3" - "@vitest/utils": "npm:1.1.3" + "@vitest/spy": "npm:1.3.1" + "@vitest/utils": "npm:1.3.1" chai: "npm:^4.3.10" - checksum: c3bbcae82050b7e92438c85e679ef2cb09162dc5638a10b3f0b5a8fc5600dfb0be578a244d84012ae2f1715748189393ac0fc72b891efff3503338221795ebe5 + checksum: f54446b97ffac9d64653ed771b883e4d733dc4f3bb6d4b161a583a8c5ef0461383f3d457174af71baf5b2d3c92e1b75495f0c1d0cca75644ad4a6f0df8f4ec55 languageName: node linkType: hard @@ -8780,16 +8637,7 @@ __metadata: languageName: node linkType: hard -"@vitest/spy@npm:1.1.3": - version: 1.1.3 - resolution: "@vitest/spy@npm:1.1.3" - dependencies: - tinyspy: "npm:^2.2.0" - checksum: d1692582afb7b665ec283723b15bbb7da95896cbfd7befaad9fdac6b64a8250fd918781263d43e8e10ee4874cdd18646224f6d993749c3751296dced8095a9ed - languageName: node - linkType: hard - -"@vitest/spy@npm:1.2.2, @vitest/spy@npm:^1.1.3": +"@vitest/spy@npm:1.2.2": version: 1.2.2 resolution: "@vitest/spy@npm:1.2.2" dependencies: @@ -8798,15 +8646,12 @@ __metadata: languageName: node linkType: hard -"@vitest/utils@npm:1.1.3": - version: 1.1.3 - resolution: "@vitest/utils@npm:1.1.3" +"@vitest/spy@npm:1.3.1, @vitest/spy@npm:^1.3.1": + version: 1.3.1 + resolution: "@vitest/spy@npm:1.3.1" dependencies: - diff-sequences: "npm:^29.6.3" - estree-walker: "npm:^3.0.3" - loupe: "npm:^2.3.7" - pretty-format: "npm:^29.7.0" - checksum: 86f48a7722927741449f40f33584dd9857629782f6661654225b5dd3c039d61cc60806c5dfe419bd793f2a231ba91fe708cbdec5d99b62a1f6f819b6f2121fc3 + tinyspy: "npm:^2.2.0" + checksum: efc42f679d2a51fc6583ca3136ccd47581cb27c923ed3cb0500f5dee9aac99b681bfdd400c16ef108f2e0761daa642bc190816a6411931a2aba99ebf8b213dd4 languageName: node linkType: hard @@ -8822,14 +8667,15 @@ __metadata: languageName: node linkType: hard -"@vitest/utils@npm:^0.34.6": - version: 0.34.7 - resolution: "@vitest/utils@npm:0.34.7" +"@vitest/utils@npm:1.3.1, @vitest/utils@npm:^1.3.1": + version: 1.3.1 + resolution: "@vitest/utils@npm:1.3.1" dependencies: - diff-sequences: "npm:^29.4.3" - loupe: "npm:^2.3.6" - pretty-format: "npm:^29.5.0" - checksum: 5f26ec5b4a53709a50efdb57aa753e8090b3411e888774f67a0d192eb7f046ed5fcc6884eb3d6275d2674926e724b731e8d28cd3cea96a7f3d27462a0d44af9e + diff-sequences: "npm:^29.6.3" + estree-walker: "npm:^3.0.3" + loupe: "npm:^2.3.7" + pretty-format: "npm:^29.7.0" + checksum: d604c8ad3b1aee30d4dcd889098f591407bfe18547ff96485b1d1ed54eff58219c756a9544a7fbd4e37886863abacd7a89a76334cb3ea7f84c3d496bb757db23 languageName: node linkType: hard @@ -9781,7 +9627,7 @@ __metadata: languageName: node linkType: hard -"anymatch@npm:^3.0.0, anymatch@npm:^3.0.3, anymatch@npm:~3.1.2": +"anymatch@npm:^3.0.0, anymatch@npm:~3.1.2": version: 3.1.3 resolution: "anymatch@npm:3.1.3" dependencies: @@ -9876,7 +9722,7 @@ __metadata: languageName: node linkType: hard -"aria-query@npm:^5.0.0, aria-query@npm:^5.3.0": +"aria-query@npm:^5.3.0": version: 5.3.0 resolution: "aria-query@npm:5.3.0" dependencies: @@ -10389,7 +10235,7 @@ __metadata: languageName: node linkType: hard -"babel-plugin-istanbul@npm:6.1.1, babel-plugin-istanbul@npm:^6.1.1": +"babel-plugin-istanbul@npm:6.1.1": version: 6.1.1 resolution: "babel-plugin-istanbul@npm:6.1.1" dependencies: @@ -10473,28 +10319,6 @@ __metadata: languageName: node linkType: hard -"babel-preset-current-node-syntax@npm:^1.0.0": - version: 1.0.1 - resolution: "babel-preset-current-node-syntax@npm:1.0.1" - dependencies: - "@babel/plugin-syntax-async-generators": "npm:^7.8.4" - "@babel/plugin-syntax-bigint": "npm:^7.8.3" - "@babel/plugin-syntax-class-properties": "npm:^7.8.3" - "@babel/plugin-syntax-import-meta": "npm:^7.8.3" - "@babel/plugin-syntax-json-strings": "npm:^7.8.3" - "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.8.3" - "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.8.3" - "@babel/plugin-syntax-numeric-separator": "npm:^7.8.3" - "@babel/plugin-syntax-object-rest-spread": "npm:^7.8.3" - "@babel/plugin-syntax-optional-catch-binding": "npm:^7.8.3" - "@babel/plugin-syntax-optional-chaining": "npm:^7.8.3" - "@babel/plugin-syntax-top-level-await": "npm:^7.8.3" - peerDependencies: - "@babel/core": ^7.0.0 - checksum: 5ba39a3a0e6c37d25e56a4fb843be632dac98d54706d8a0933f9bcb1a07987a96d55c2b5a6c11788a74063fb2534fe68c1f1dbb6c93626850c785e0938495627 - languageName: node - linkType: hard - "babel-walk@npm:3.0.0-canary-5": version: 3.0.0-canary-5 resolution: "babel-walk@npm:3.0.0-canary-5" @@ -11176,15 +11000,6 @@ __metadata: languageName: node linkType: hard -"bser@npm:2.1.1": - version: 2.1.1 - resolution: "bser@npm:2.1.1" - dependencies: - node-int64: "npm:^0.4.0" - checksum: 24d8dfb7b6d457d73f32744e678a60cc553e4ec0e9e1a01cf614b44d85c3c87e188d3cc78ef0442ce5032ee6818de20a0162ba1074725c0d08908f62ea979227 - languageName: node - linkType: hard - "buffer-crc32@npm:^0.2.5": version: 0.2.13 resolution: "buffer-crc32@npm:0.2.13" @@ -11491,9 +11306,9 @@ __metadata: languageName: node linkType: hard -"chai@npm:^4.3.10, chai@npm:^4.3.7": - version: 4.3.10 - resolution: "chai@npm:4.3.10" +"chai@npm:^4.3.10, chai@npm:^4.4.1": + version: 4.4.1 + resolution: "chai@npm:4.4.1" dependencies: assertion-error: "npm:^1.1.0" check-error: "npm:^1.0.3" @@ -11502,7 +11317,7 @@ __metadata: loupe: "npm:^2.3.6" pathval: "npm:^1.1.1" type-detect: "npm:^4.0.8" - checksum: c887d24f67be6fb554c7ebbde3bb0568697a8833d475e4768296916891ba143f25fc079f6eb34146f3dd5a3279d34c1f387c32c9a6ab288e579f948d9ccf53fe + checksum: 91590a8fe18bd6235dece04ccb2d5b4ecec49984b50924499bdcd7a95c02cb1fd2a689407c19bb854497bde534ef57525cfad6c7fdd2507100fd802fbc2aefbd languageName: node linkType: hard @@ -11694,13 +11509,6 @@ __metadata: languageName: node linkType: hard -"ci-info@npm:^3.2.0": - version: 3.9.0 - resolution: "ci-info@npm:3.9.0" - checksum: 6f0109e36e111684291d46123d491bc4e7b7a1934c3a20dea28cba89f1d4a03acd892f5f6a81ed3855c38647e285a150e3c9ba062e38943bef57fee6c1554c3a - languageName: node - linkType: hard - "ci-info@npm:^4.0.0": version: 4.0.0 resolution: "ci-info@npm:4.0.0" @@ -13252,7 +13060,7 @@ __metadata: languageName: node linkType: hard -"diff-sequences@npm:^29.4.3, diff-sequences@npm:^29.6.3": +"diff-sequences@npm:^29.6.3": version: 29.6.3 resolution: "diff-sequences@npm:29.6.3" checksum: 32e27ac7dbffdf2fb0eb5a84efd98a9ad084fbabd5ac9abb8757c6770d5320d2acd172830b28c4add29bb873d59420601dfc805ac4064330ce59b1adfd0593b2 @@ -14324,13 +14132,6 @@ __metadata: languageName: node linkType: hard -"escape-string-regexp@npm:^2.0.0": - version: 2.0.0 - resolution: "escape-string-regexp@npm:2.0.0" - checksum: 2530479fe8db57eace5e8646c9c2a9c80fa279614986d16dcc6bcaceb63ae77f05a851ba6c43756d816c61d7f4534baf56e3c705e3e0d884818a46808811c507 - languageName: node - linkType: hard - "escape-string-regexp@npm:^4.0.0": version: 4.0.0 resolution: "escape-string-regexp@npm:4.0.0" @@ -15126,19 +14927,6 @@ __metadata: languageName: node linkType: hard -"expect@npm:^29.7.0": - version: 29.7.0 - resolution: "expect@npm:29.7.0" - dependencies: - "@jest/expect-utils": "npm:^29.7.0" - jest-get-type: "npm:^29.6.3" - jest-matcher-utils: "npm:^29.7.0" - jest-message-util: "npm:^29.7.0" - jest-util: "npm:^29.7.0" - checksum: 2eddeace66e68b8d8ee5f7be57f3014b19770caaf6815c7a08d131821da527fb8c8cb7b3dcd7c883d2d3d8d184206a4268984618032d1e4b16dc8d6596475d41 - languageName: node - linkType: hard - "exponential-backoff@npm:^3.1.1": version: 3.1.1 resolution: "exponential-backoff@npm:3.1.1" @@ -15299,7 +15087,7 @@ __metadata: languageName: node linkType: hard -"fast-json-stable-stringify@npm:^2.0.0, fast-json-stable-stringify@npm:^2.1.0": +"fast-json-stable-stringify@npm:^2.0.0": version: 2.1.0 resolution: "fast-json-stable-stringify@npm:2.1.0" checksum: 7f081eb0b8a64e0057b3bb03f974b3ef00135fbf36c1c710895cd9300f13c94ba809bb3a81cf4e1b03f6e5285610a61abbd7602d0652de423144dfee5a389c9b @@ -15371,15 +15159,6 @@ __metadata: languageName: node linkType: hard -"fb-watchman@npm:^2.0.0": - version: 2.0.2 - resolution: "fb-watchman@npm:2.0.2" - dependencies: - bser: "npm:2.1.1" - checksum: feae89ac148adb8f6ae8ccd87632e62b13563e6fb114cacb5265c51f585b17e2e268084519fb2edd133872f1d47a18e6bfd7e5e08625c0d41b93149694187581 - languageName: node - linkType: hard - "fetch-blob@npm:^3.1.2, fetch-blob@npm:^3.1.4": version: 3.2.0 resolution: "fetch-blob@npm:3.2.0" @@ -16058,7 +15837,7 @@ __metadata: languageName: node linkType: hard -"fsevents@npm:^2.3.2, fsevents@npm:~2.3.2, fsevents@npm:~2.3.3": +"fsevents@npm:~2.3.2, fsevents@npm:~2.3.3": version: 2.3.3 resolution: "fsevents@npm:2.3.3" dependencies: @@ -16077,7 +15856,7 @@ __metadata: languageName: node linkType: hard -"fsevents@patch:fsevents@npm%3A^2.3.2#optional!builtin, fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin, fsevents@patch:fsevents@npm%3A~2.3.3#optional!builtin": +"fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin, fsevents@patch:fsevents@npm%3A~2.3.3#optional!builtin": version: 2.3.3 resolution: "fsevents@patch:fsevents@npm%3A2.3.3#optional!builtin::version=2.3.3&hash=df0bf1" dependencies: @@ -18545,7 +18324,7 @@ __metadata: languageName: node linkType: hard -"jest-diff@npm:^29.4.1, jest-diff@npm:^29.7.0": +"jest-diff@npm:^29.4.1": version: 29.7.0 resolution: "jest-diff@npm:29.7.0" dependencies: @@ -18564,128 +18343,6 @@ __metadata: languageName: node linkType: hard -"jest-haste-map@npm:^29.7.0": - version: 29.7.0 - resolution: "jest-haste-map@npm:29.7.0" - dependencies: - "@jest/types": "npm:^29.6.3" - "@types/graceful-fs": "npm:^4.1.3" - "@types/node": "npm:*" - anymatch: "npm:^3.0.3" - fb-watchman: "npm:^2.0.0" - fsevents: "npm:^2.3.2" - graceful-fs: "npm:^4.2.9" - jest-regex-util: "npm:^29.6.3" - jest-util: "npm:^29.7.0" - jest-worker: "npm:^29.7.0" - micromatch: "npm:^4.0.4" - walker: "npm:^1.0.8" - dependenciesMeta: - fsevents: - optional: true - checksum: 2683a8f29793c75a4728787662972fedd9267704c8f7ef9d84f2beed9a977f1cf5e998c07b6f36ba5603f53cb010c911fe8cd0ac9886e073fe28ca66beefd30c - languageName: node - linkType: hard - -"jest-matcher-utils@npm:^29.7.0": - version: 29.7.0 - resolution: "jest-matcher-utils@npm:29.7.0" - dependencies: - chalk: "npm:^4.0.0" - jest-diff: "npm:^29.7.0" - jest-get-type: "npm:^29.6.3" - pretty-format: "npm:^29.7.0" - checksum: 0d0e70b28fa5c7d4dce701dc1f46ae0922102aadc24ed45d594dd9b7ae0a8a6ef8b216718d1ab79e451291217e05d4d49a82666e1a3cc2b428b75cd9c933244e - languageName: node - linkType: hard - -"jest-message-util@npm:^29.7.0": - version: 29.7.0 - resolution: "jest-message-util@npm:29.7.0" - dependencies: - "@babel/code-frame": "npm:^7.12.13" - "@jest/types": "npm:^29.6.3" - "@types/stack-utils": "npm:^2.0.0" - chalk: "npm:^4.0.0" - graceful-fs: "npm:^4.2.9" - micromatch: "npm:^4.0.4" - pretty-format: "npm:^29.7.0" - slash: "npm:^3.0.0" - stack-utils: "npm:^2.0.3" - checksum: 850ae35477f59f3e6f27efac5215f706296e2104af39232bb14e5403e067992afb5c015e87a9243ec4d9df38525ef1ca663af9f2f4766aa116f127247008bd22 - languageName: node - linkType: hard - -"jest-mock@npm:^27.0.6": - version: 27.5.1 - resolution: "jest-mock@npm:27.5.1" - dependencies: - "@jest/types": "npm:^27.5.1" - "@types/node": "npm:*" - checksum: 6ad58454b37ee3f726930b07efbf40a7c79d2d2d9c7b226708b4b550bc0904de93bcacf714105d11952a5c0bc855e5d59145c8c9dbbb4e69b46e7367abf53b52 - languageName: node - linkType: hard - -"jest-mock@npm:^29.7.0": - version: 29.7.0 - resolution: "jest-mock@npm:29.7.0" - dependencies: - "@jest/types": "npm:^29.6.3" - "@types/node": "npm:*" - jest-util: "npm:^29.7.0" - checksum: 7b9f8349ee87695a309fe15c46a74ab04c853369e5c40952d68061d9dc3159a0f0ed73e215f81b07ee97a9faaf10aebe5877a9d6255068a0977eae6a9ff1d5ac - languageName: node - linkType: hard - -"jest-regex-util@npm:^29.6.3": - version: 29.6.3 - resolution: "jest-regex-util@npm:29.6.3" - checksum: 4e33fb16c4f42111159cafe26397118dcfc4cf08bc178a67149fb05f45546a91928b820894572679d62559839d0992e21080a1527faad65daaae8743a5705a3b - languageName: node - linkType: hard - -"jest-snapshot@npm:^29.7.0": - version: 29.7.0 - resolution: "jest-snapshot@npm:29.7.0" - dependencies: - "@babel/core": "npm:^7.11.6" - "@babel/generator": "npm:^7.7.2" - "@babel/plugin-syntax-jsx": "npm:^7.7.2" - "@babel/plugin-syntax-typescript": "npm:^7.7.2" - "@babel/types": "npm:^7.3.3" - "@jest/expect-utils": "npm:^29.7.0" - "@jest/transform": "npm:^29.7.0" - "@jest/types": "npm:^29.6.3" - babel-preset-current-node-syntax: "npm:^1.0.0" - chalk: "npm:^4.0.0" - expect: "npm:^29.7.0" - graceful-fs: "npm:^4.2.9" - jest-diff: "npm:^29.7.0" - jest-get-type: "npm:^29.6.3" - jest-matcher-utils: "npm:^29.7.0" - jest-message-util: "npm:^29.7.0" - jest-util: "npm:^29.7.0" - natural-compare: "npm:^1.4.0" - pretty-format: "npm:^29.7.0" - semver: "npm:^7.5.3" - checksum: 6e9003c94ec58172b4a62864a91c0146513207bedf4e0a06e1e2ac70a4484088a2683e3a0538d8ea913bcfd53dc54a9b98a98cdfa562e7fe1d1339aeae1da570 - languageName: node - linkType: hard - -"jest-util@npm:^29.7.0": - version: 29.7.0 - resolution: "jest-util@npm:29.7.0" - dependencies: - "@jest/types": "npm:^29.6.3" - "@types/node": "npm:*" - chalk: "npm:^4.0.0" - ci-info: "npm:^3.2.0" - graceful-fs: "npm:^4.2.9" - picomatch: "npm:^2.2.3" - checksum: bc55a8f49fdbb8f51baf31d2a4f312fb66c9db1483b82f602c9c990e659cdd7ec529c8e916d5a89452ecbcfae4949b21b40a7a59d4ffc0cd813a973ab08c8150 - languageName: node - linkType: hard - "jest-worker@npm:^27.4.5": version: 27.5.1 resolution: "jest-worker@npm:27.5.1" @@ -18697,18 +18354,6 @@ __metadata: languageName: node linkType: hard -"jest-worker@npm:^29.7.0": - version: 29.7.0 - resolution: "jest-worker@npm:29.7.0" - dependencies: - "@types/node": "npm:*" - jest-util: "npm:^29.7.0" - merge-stream: "npm:^2.0.0" - supports-color: "npm:^8.0.0" - checksum: 5570a3a005b16f46c131968b8a5b56d291f9bbb85ff4217e31c80bd8a02e7de799e59a54b95ca28d5c302f248b54cbffde2d177c2f0f52ffcee7504c6eabf660 - languageName: node - linkType: hard - "jiti@npm:^1.18.2, jiti@npm:^1.20.0": version: 1.21.0 resolution: "jiti@npm:1.21.0" @@ -20011,15 +19656,6 @@ __metadata: languageName: node linkType: hard -"makeerror@npm:1.0.12": - version: 1.0.12 - resolution: "makeerror@npm:1.0.12" - dependencies: - tmpl: "npm:1.0.5" - checksum: b0e6e599780ce6bab49cc413eba822f7d1f0dfebd1c103eaa3785c59e43e22c59018323cf9e1708f0ef5329e94a745d163fcbb6bff8e4c6742f9be9e86f3500c - languageName: node - linkType: hard - "map-async@npm:~0.1.1": version: 0.1.1 resolution: "map-async@npm:0.1.1" @@ -21989,13 +21625,6 @@ __metadata: languageName: node linkType: hard -"node-int64@npm:^0.4.0": - version: 0.4.0 - resolution: "node-int64@npm:0.4.0" - checksum: a6a4d8369e2f2720e9c645255ffde909c0fbd41c92ea92a5607fc17055955daac99c1ff589d421eee12a0d24e99f7bfc2aabfeb1a4c14742f6c099a51863f31a - languageName: node - linkType: hard - "node-machine-id@npm:1.1.12": version: 1.1.12 resolution: "node-machine-id@npm:1.1.12" @@ -23277,7 +22906,7 @@ __metadata: languageName: node linkType: hard -"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.2.3, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1": +"picomatch@npm:^2.0.4, picomatch@npm:^2.2.1, picomatch@npm:^2.3.0, picomatch@npm:^2.3.1": version: 2.3.1 resolution: "picomatch@npm:2.3.1" checksum: 26c02b8d06f03206fc2ab8d16f19960f2ff9e81a658f831ecb656d8f17d9edc799e8364b1f4a7873e89d9702dff96204be0fa26fe4181f6843f040f819dac4be @@ -23337,7 +22966,7 @@ __metadata: languageName: node linkType: hard -"pirates@npm:^4.0.4, pirates@npm:^4.0.5": +"pirates@npm:^4.0.5": version: 4.0.6 resolution: "pirates@npm:4.0.6" checksum: 00d5fa51f8dded94d7429700fb91a0c1ead00ae2c7fd27089f0c5b63e6eca36197fe46384631872690a66f390c5e27198e99006ab77ae472692ab9c2ca903f36 @@ -23793,7 +23422,7 @@ __metadata: languageName: node linkType: hard -"pretty-format@npm:^29.5.0, pretty-format@npm:^29.7.0": +"pretty-format@npm:^29.7.0": version: 29.7.0 resolution: "pretty-format@npm:29.7.0" dependencies: @@ -27061,15 +26690,6 @@ __metadata: languageName: node linkType: hard -"stack-utils@npm:^2.0.3": - version: 2.0.6 - resolution: "stack-utils@npm:2.0.6" - dependencies: - escape-string-regexp: "npm:^2.0.0" - checksum: 651c9f87667e077584bbe848acaecc6049bc71979f1e9a46c7b920cad4431c388df0f51b8ad7cfd6eed3db97a2878d0fc8b3122979439ea8bac29c61c95eec8a - languageName: node - linkType: hard - "stackback@npm:0.0.2": version: 0.0.2 resolution: "stackback@npm:0.0.2" @@ -28089,13 +27709,6 @@ __metadata: languageName: node linkType: hard -"tmpl@npm:1.0.5": - version: 1.0.5 - resolution: "tmpl@npm:1.0.5" - checksum: f935537799c2d1922cb5d6d3805f594388f75338fe7a4a9dac41504dd539704ca4db45b883b52e7b0aa5b2fd5ddadb1452bf95cd23a69da2f793a843f9451cc9 - languageName: node - linkType: hard - "to-fast-properties@npm:^2.0.0": version: 2.0.0 resolution: "to-fast-properties@npm:2.0.0" @@ -28474,7 +28087,7 @@ __metadata: languageName: node linkType: hard -"type-detect@npm:4.0.8, type-detect@npm:^4.0.0, type-detect@npm:^4.0.8": +"type-detect@npm:^4.0.0, type-detect@npm:^4.0.8": version: 4.0.8 resolution: "type-detect@npm:4.0.8" checksum: 8fb9a51d3f365a7de84ab7f73b653534b61b622aa6800aecdb0f1095a4a646d3f5eb295322127b6573db7982afcd40ab492d038cf825a42093a58b1e1353e0bd @@ -29982,15 +29595,6 @@ __metadata: languageName: node linkType: hard -"walker@npm:^1.0.8": - version: 1.0.8 - resolution: "walker@npm:1.0.8" - dependencies: - makeerror: "npm:1.0.12" - checksum: a17e037bccd3ca8a25a80cb850903facdfed0de4864bd8728f1782370715d679fa72e0a0f5da7c1c1379365159901e5935f35be531229da53bbfc0efdabdb48e - languageName: node - linkType: hard - "warning@npm:^4.0.2, warning@npm:^4.0.3": version: 4.0.3 resolution: "warning@npm:4.0.3" @@ -30562,16 +30166,6 @@ __metadata: languageName: node linkType: hard -"write-file-atomic@npm:^4.0.2": - version: 4.0.2 - resolution: "write-file-atomic@npm:4.0.2" - dependencies: - imurmurhash: "npm:^0.1.4" - signal-exit: "npm:^3.0.7" - checksum: a2c282c95ef5d8e1c27b335ae897b5eca00e85590d92a3fd69a437919b7b93ff36a69ea04145da55829d2164e724bc62202cdb5f4b208b425aba0807889375c7 - languageName: node - linkType: hard - "ws@npm:^8.13.0, ws@npm:^8.14.2, ws@npm:^8.2.3": version: 8.15.1 resolution: "ws@npm:8.15.1" diff --git a/docs/get-started/svelte-webpack5.md b/docs/get-started/svelte-webpack5.md new file mode 100644 index 000000000000..a2676a3e1cec --- /dev/null +++ b/docs/get-started/svelte-webpack5.md @@ -0,0 +1,183 @@ +--- +title: Storybook for Svelte & Webpack +--- + +export const SUPPORTED_RENDERER = 'svelte'; + +Storybook for Svelte & Webpack is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for applications using [Svelte](https://svelte.dev/) built with [Webpack](https://webpack.js.org/). + + + + + +Storybook for Svelte & Webpack is only supported in [Svelte](?renderer=svelte) projects. + + + + + + + + + +## Requirements + +- Svelte ≥ 4.0 +- Webpack ≥ 5.0 +- Storybook ≥ 8.0 + +## Getting started + +### In a project without Storybook + +Follow the prompts after running this command in your Svelte project's root directory: + + + + + + + +[More on getting started with Storybook.](./install.md) + +### In a project with Storybook + +This framework is designed to work with Storybook 7+. If you’re not already using v7, upgrade with this command: + + + + + + + +#### Automatic migration + +When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/svelte-webpack5`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below. + +#### Manual migration + +First, install the framework: + + + + + + + +Next, install and register your appropriate compiler addon, depending on whether you're using SWC (recommended) or Babel: + + + + + + + +or + + + + + + + +More details can be found in the [Webpack builder docs](../builders/webpack.md#compiler-support). + +Finally, update your `.storybook/main.js|ts` to change the framework property: + + + + + + + +## Writing native Svelte stories + +Storybook provides a Svelte addon maintained by the community, enabling you to write stories for your Svelte components using the template syntax. You'll need to take some additional steps to enable this feature. + +Run the following command to install the addon. + + + + + + + + + +The community actively maintains the Svelte CSF addon but still lacks some features currently available in the official Storybook Svelte framework support. For more information, see [the addon's documentation](https://github.com/storybookjs/addon-svelte-csf). + + + +## API + +### Options + +You can pass an options object for additional configuration if needed: + +```js +// .storybook/main.js +import * as path from 'path'; + +export default { + // ... + framework: { + name: '@storybook/svelte-webpack5', + options: { + // ... + }, + }, +}; +``` + +The available options are: + +#### `builder` + +Type: `Record` + +Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Webpack builder docs](../builders/webpack.md). + + + + diff --git a/docs/get-started/sveltekit.md b/docs/get-started/sveltekit.md new file mode 100644 index 000000000000..c75c68cf6549 --- /dev/null +++ b/docs/get-started/sveltekit.md @@ -0,0 +1,342 @@ +--- +title: Storybook for SvelteKit +--- + +export const SUPPORTED_RENDERER = 'svelte'; + +Storybook for SvelteKit is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for [SvelteKit](https://kit.svelte.dev/) applications. It includes: + +- 🪄 Zero config +- 🧩 Easily mock many Kit modules +- 🔗 Automatic link handling +- 💫 and more! + + + + + +Storybook for SvelteKit is only supported in [Svelte](?renderer=svelte) projects. + + + + + + + + + +## Requirements + +- SvelteKit ≥ 1.0 +- Storybook ≥ 8.0 + +## Getting started + +### In a project without Storybook + +Follow the prompts after running this command in your Sveltekit project's root directory: + + + + + + + +[More on getting started with Storybook.](./install.md) + +### In a project with Storybook + +This framework is designed to work with Storybook 7+. If you’re not already using v7, upgrade with this command: + + + + + + + +#### Automatic migration + +When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/sveltekit`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below. + +#### Manual migration + +First, install the framework: + + + + + + + +Then, update your `.storybook/main.js|ts` to change the framework property: + + + + + + + +Finally, these packages are now either obsolete or part of `@storybook/sveltekit`, so you no longer need to depend on them directly. You can remove them (`npm uninstall`, `yarn remove`, `pnpm remove`) from your project: + +- `@storybook/svelte-vite` +- `@storybook/svelte-webpack5` +- `storybook-builder-vite` +- `@storybook/builder-vite` + +## Supported features + +All Svelte language features are supported out of the box, as the Storybook framework uses the Svelte compiler directly. +However, SvelteKit has some [Kit-specific modules](https://kit.svelte.dev/docs/modules) that aren't supported. Here's a breakdown of what will and will not work within Storybook: + +| 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) | ⚠️ **Experimental** | See [How to mock](#how-to-mock). | +| [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation) | ⚠️ **Experimental** | 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) | ⚠️ **Experimental** | See [How to mock](#how-to-mock). | +| [`$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 it cannot dynamically serve content. | +| [`$env/static/public`](https://kit.svelte.dev/docs/modules#$env-static-public) | ✅ Supported | | +| [`$lib`](https://kit.svelte.dev/docs/modules#$lib) | ✅ Supported | | +| [`@sveltejs/kit/*`](https://kit.svelte.dev/docs/modules#sveltejs-kit) | ✅ Supported | | +| [`$env/dynamic/private`](https://kit.svelte.dev/docs/modules#$env-dynamic-private) | ⛔ Not supported | This is a server-side feature, and Storybook renders all components on the client. | +| [`$env/static/private`](https://kit.svelte.dev/docs/modules#$env-static-private) | ⛔ Not supported | This is a server-side feature, and Storybook renders all components on the client. | +| [`$service-worker`](https://kit.svelte.dev/docs/modules#$service-worker) | ⛔ Not supported | This is a service worker feature, which does not apply to Storybook. | + +## How to mock + +To mock a SvelteKit import you can define it within `parameters.sveltekit_experimental`: + +```ts +// MyComponent.stories.svelte +export const MyStory = { + parameters: { + sveltekit_experimental: { + stores: { + page: { + data: { + test: 'passed', + }, + }, + navigating: { + route: { + id: '/storybook', + }, + }, + updated: true, + }, + }, + }, +}; +``` + +The [available parameters](#parameters) are documented in the API section, below. + +### Mocking links + +The default link-handling behavior (e.g. when clicking an `` element) is to log an action to the [Actions panel](../essentials/actions.md). + +You can override this by assigning an object to `parameters.sveltekit_experimental.hrefs`, where the keys are strings representing an href and the values define your mock. For example: + +```ts +// MyComponent.stories.svelte +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, + }, + }, + }, + }, +}; +``` + +See the [API reference](#hrefs) for more information. + +## Writing native Svelte stories + +Storybook provides a Svelte addon maintained by the community, enabling you to write stories for your Svelte components using the template syntax. You'll need to take some additional steps to enable this feature. + +Run the following command to install the addon. + + + + + + + + + +The community actively maintains the Svelte CSF addon but still lacks some features currently available in the official Storybook Svelte framework support. For more information, see [the addon's documentation](https://github.com/storybookjs/addon-svelte-csf). + + + +## API + +### Parameters + +This framework contributes the following [parameters](../writing-stories/parameters.md) to Storybook, under the `sveltekit_experimental` namespace: + +#### `forms` + +Type: `{ enhance: () => void }` + +Provides mocks for the [`$app/forms`](https://kit.svelte.dev/docs/modules#$app-forms) module. + +##### `forms.enhance` + +Type: `() => void` + +A callback that will be called when a form with [`use:enhance`](https://kit.svelte.dev/docs/form-actions#progressive-enhancement-use-enhance) is submitted. + +#### `hrefs` + +Type: `Record<[path: string], (to: string, event: MouseEvent) => void | { callback: (to: string, event: MouseEvent) => 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 if the `asRegex` property is `true`) the corresponding `callback` will be called. If no matching `hrefs` are defined, an action will be logged to the [Actions panel](../essentials/actions.md). See [Mocking links](#mocking-links) for an example. + +#### `navigation` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-navigation) + +Provides mocks for the [`$app/navigation`](https://kit.svelte.dev/docs/modules#$app-navigation) module. + +##### `navigation.goto` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-navigation-goto) + +A callback that will be called whenever [`goto`](https://kit.svelte.dev/docs/modules#$app-navigation-goto) is called. If no function is provided, an action will be logged to the [Actions panel](../essentials/actions.md). + +##### `navigation.pushState` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-navigation-pushstate) + +A callback that will be called whenever [`pushState`](https://kit.svelte.dev/docs/modules#$app-navigation-pushstate) is called. If no function is provided, an action will be logged to the [Actions panel](../essentials/actions.md). + +##### `navigation.replaceState` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-navigation-replacestate) + +A callback that will be called whenever [`replaceState`](https://kit.svelte.dev/docs/modules#$app-navigation-replacestate) is called. If no function is provided, an action will be logged to the [Actions panel](../essentials/actions.md). + +##### `navigation.invalidate` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-navigation-invalidate) + +A callback that will be called whenever [`invalidate`](https://kit.svelte.dev/docs/modules#$app-navigation-invalidate) is called. If no function is provided, an action will be logged to the [Actions panel](../essentials/actions.md). + +##### `navigation.invalidateAll` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-navigation-invalidateall) + +A callback that will be called whenever [`invalidateAll`](https://kit.svelte.dev/docs/modules#$app-navigation-invalidateall) is called. If no function is provided, an action will be logged to the [Actions panel](../essentials/actions.md). + +##### `navigation.afterNavigate` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-navigation-afternavigate) + +An object that will be passed to the [`afterNavigate`](https://kit.svelte.dev/docs/modules#$app-navigation-afternavigate) function, which will be invoked when the `onMount` event fires. + +#### `stores` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-stores) + +Provides mocks for the [`$app/stores`](https://kit.svelte.dev/docs/modules#$app-stores) module. + +##### `stores.navigating` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-stores-navigating) + +A partial version of the [`navigating`](https://kit.svelte.dev/docs/modules#$app-stores-navigating) store. + +##### `stores.page` + +Type: See [SvelteKit docs](https://kit.svelte.dev/docs/modules#$app-stores-page) + +A partial version of the [`page`](https://kit.svelte.dev/docs/modules#$app-stores-page) store. + +##### `stores.updated` + +Type: boolean + +A boolean representing the value of [`updated`](https://kit.svelte.dev/docs/modules#$app-stores-updated) (you can also access `updated.check()` which will be a no-op). + +### Options + +You can pass an options object for additional configuration if needed: + +```js +// .storybook/main.js +import * as path from 'path'; + +export default { + // ... + framework: { + name: '@storybook/sveltekit', + options: { + // ... + }, + }, +}; +``` + +The available options are: + +#### `builder` + +Type: `Record` + +Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For Sveltekit, available options can be found in the [Vite builder docs](../builders/vite.md). + +## Troubleshooting + +### Error when starting Storybook + +When starting Storybook after upgrading to v7.0, it may quit with the following error: + +```sh +ERR! SyntaxError: Identifier '__esbuild_register_import_meta_url__' has already been declared +``` + +This can occur when manually upgrading from 6.5 to 7.0. To resolve it, you'll need to remove the `svelteOptions` property in `.storybook/main.js`, as that is not supported (and no longer necessary) in Storybook 7+ with SvelteKit. + + + + diff --git a/docs/get-started/vue3-vite.md b/docs/get-started/vue3-vite.md index e79cc1f3b6fc..776281caf29b 100644 --- a/docs/get-started/vue3-vite.md +++ b/docs/get-started/vue3-vite.md @@ -28,8 +28,8 @@ Storybook for Vue & Vite is only supported in [Vue](?renderer=vue) projects. ## Requirements - Vue ≥ 3 -- Vite ≥ 3.0 (4.X recommended) -- Storybook ≥ 7.0 +- Vite ≥ 4.0 +- Storybook ≥ 8.0 ## Getting started diff --git a/docs/get-started/vue3-webpack5.md b/docs/get-started/vue3-webpack5.md new file mode 100644 index 000000000000..283ba4fbe2d3 --- /dev/null +++ b/docs/get-started/vue3-webpack5.md @@ -0,0 +1,197 @@ +--- +title: Storybook for Vue & Webpack +--- + +export const SUPPORTED_RENDERER = 'vue'; + +Storybook for Vue & Webpack is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for [Vue](https://vuejs.org/) applications built with [Webpack](https://webpack.js.org/). + + + + + +Storybook for Vue & Webpack is only supported in [Vue](?renderer=vue) projects. + + + + + + + + + +## Requirements + +- Vue ≥ 3.0 +- Webpack ≥ 5.0 +- Storybook ≥ 8.0 + +## Getting started + +### In a project without Storybook + +Follow the prompts after running this command in your Vue project's root directory: + + + + + + + +[More on getting started with Storybook.](./install.md) + +### In a project with Storybook + +This framework is designed to work with Storybook 7+. If you’re not already using v7, upgrade with this command: + + + + + + + +#### Automatic migration + +When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/vue3-webpack5`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below. + +#### Manual migration + +First, install the framework: + + + + + + + +Next, install and register your appropriate compiler addon, depending on whether you're using SWC (recommended) or Babel: + + + + + + + +or + + + + + + + +More details can be found in the [Webpack builder docs](../builders/webpack.md#compiler-support). + +Finally, update your `.storybook/main.js|ts` to change the framework property: + + + + + + + +## Extending the Vue application + +Storybook creates a [Vue 3 application](https://vuejs.org/api/application.html#application-api) for your component preview. +When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file. + +Therefore, Storybook provides you with a `setup` function exported from this package, which receives as a callback your Storybook instance, which you can interact with and add your custom configuration. + +```js +// .storybook/preview.js + +import { setup } from '@storybook/vue3'; + +setup((app) => { + app.use(MyPlugin); + app.component('my-component', MyComponent); + app.mixin({ + /* My mixin */ + }); +}); +``` + +## Troubleshooting + +### Storybook doesn't work with my Vue 2 project + +[Vue 2 entered End of Life](https://v2.vuejs.org/lts/) (EOL) on December 31st, 2023, and is no longer maintained by the Vue team. As a result, Storybook no longer supports Vue 2. We recommend you upgrade your project to Vue 3, which Storybook fully supports. If that's not an option, you can still use Storybook with Vue 2 by installing the latest version of Storybook 7 with the following command: + + + + + + + +## API + +### Options + +You can pass an options object for additional configuration if needed: + +```ts +// .storybook/main.ts +import type { StorybookConfig } from '@storybook/vue-webpack5'; + +const config: StorybookConfig = { + framework: { + name: '@storybook/vue-webpack5', + options: { + // ... + }, + }, +}; + +export default config; +``` + +#### `builder` + +Type: `Record` + +Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Webpack builder docs](../builders/webpack.md). + + + + diff --git a/docs/get-started/web-components-vite.md b/docs/get-started/web-components-vite.md new file mode 100644 index 000000000000..e6099d32e99a --- /dev/null +++ b/docs/get-started/web-components-vite.md @@ -0,0 +1,128 @@ +--- +title: Storybook for Web components & Vite +--- + +export const SUPPORTED_RENDERER = 'web-components'; + +Storybook for Web components & Vite is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for applications using [Web components](https://www.webcomponents.org/introduction) built with [Vite](https://vitejs.dev/). + + + + + +Storybook for Web components & Vite is only supported in [Web components](?renderer=web-components) projects. + + + + + + + + + +## Requirements + +- Vite ≥ 4.0 +- Storybook ≥ 8.0 + +## Getting started + +### In a project without Storybook + +Follow the prompts after running this command in your Web components project's root directory: + + + + + + + +[More on getting started with Storybook.](./install.md) + +### In a project with Storybook + +This framework is designed to work with Storybook 7+. If you’re not already using v7, upgrade with this command: + + + + + + + +#### Automatic migration + +When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/web-components-vite`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below. + +#### Manual migration + +First, install the framework: + + + + + + + +Then, update your `.storybook/main.js|ts` to change the framework property: + + + + + + + +## API + +### Options + +You can pass an options object for additional configuration if needed: + +```js +// .storybook/main.js +import * as path from 'path'; + +export default { + // ... + framework: { + name: '@storybook/web-components-vite', + options: { + // ... + }, + }, +}; +``` + +The available options are: + +#### `builder` + +Type: `Record` + +Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Vite builder docs](../builders/vite.md). + + + + diff --git a/docs/get-started/web-components-webpack5.md b/docs/get-started/web-components-webpack5.md new file mode 100644 index 000000000000..03e2205ccb20 --- /dev/null +++ b/docs/get-started/web-components-webpack5.md @@ -0,0 +1,215 @@ +--- +title: Storybook for Web components & Webpack +--- + +export const SUPPORTED_RENDERER = 'web-components'; + +Storybook for Web components & Webpack is a [framework](../contribute/framework.md) that makes it easy to develop and test UI components in isolation for applications using [Web components](https://www.webcomponents.org/introduction) built with [Webpack](https://webpack.js.org/). + + + + + +Storybook for Web components & Webpack is only supported in [Web components](?renderer=web-components) projects. + + + + + + + + + +## Requirements + +- Webpack ≥ 5.0 +- Storybook ≥ 8.0 + +## Getting started + +### In a project without Storybook + +Follow the prompts after running this command in your Web components project's root directory: + + + + + + + +[More on getting started with Storybook.](./install.md) + +### In a project with Storybook + +This framework is designed to work with Storybook 7+. If you’re not already using v7, upgrade with this command: + + + + + + + +#### Automatic migration + +When running the `upgrade` command above, you should get a prompt asking you to migrate to `@storybook/web-components-webpack5`, which should handle everything for you. In case that auto-migration does not work for your project, refer to the manual migration below. + +#### Manual migration + +First, install the framework: + + + + + + + +Next, install and register your appropriate compiler addon, depending on whether you're using SWC (recommended) or Babel: + + + + + + + +or + + + + + + + +More details can be found in the [Webpack builder docs](../builders/webpack.md#compiler-support). + +Finally, update your `.storybook/main.js|ts` to change the framework property: + + + + + + + +## Hot Module Reloading (HMR) + +Web components are registered on global registry, which only accepts a given name/class once. That can lead to errors when using classical HMR. While there are ideas on how to achieve HMR with a static registry, there is no proven solution yet. Therefore, the best approach for now is to do full page reloads while developing. You can ensure those page reloads happen quickly by defining your stories as specific states of components (which we would recommend regardless). + +## Set up es6/7 dependencies + +By default, Storybook only works with precompiled ES5 code. Because most web components themselves and their libs are distributed as ES2017, you will need to manually mark those packages as "needs transpilation". + +For example, if you have a library called `my-library` which is in ES2017, then you can configure your project like so: + +```js +// .storybook/main.js + +export default { + webpackFinal: async (config) => { + // Find web-components rule for extra transpilation + const webComponentsRule = config.module.rules.find( + (rule) => rule.use && rule.use.options && rule.use.options.babelrc === false + ); + // Add your own `my-library` + webComponentsRule.test.push(new RegExp(`node_modules(\\/|\\\\)my-library(.*)\\.js$`)); + + return config; + }, +}; +``` + +By default, the following folders are transpiled: + +- `src/*.js` +- `packages/*/src/*.js` +- `node_modules/lit-html/*.js` +- `node_modules/lit-element/*.js` +- `node_modules/@open-wc/*.js` +- `node_modules/@polymer/*.js` +- `node_modules/@vaadin/*.js` + + + +Note that the `src` folder is also included. This provides some extra configuration to allow for `import.meta` and some other features. + +If you use a folder for your components/stories other than `src`, you will need to use the configuration example above to have it properly transpiled. + + + +## API + +### Options + +You can pass an options object for additional configuration if needed: + +```js +// .storybook/main.js +import * as path from 'path'; + +export default { + // ... + framework: { + name: '@storybook/web-components-webpack5', + options: { + // ... + }, + }, +}; +``` + +The available options are: + +#### `builder` + +Type: `Record` + +Configure options for the [framework's builder](../api/main-config-framework.md#optionsbuilder). For this framework, available options can be found in the [Webpack builder docs](../builders/webpack.md). + +## Troubleshooting + +### Error while developing with HMR + +While developing a component, you might encounter this error: + +```sh +Failed to execute 'define' on 'CustomElementRegistry': the name "..." has already been used with this registry +``` + +This error occurs because the component is already registered in the global registry. See the [limitations of HMR with web components](#hot-module-reloading-hmr) for more information. + + + + diff --git a/docs/snippets/svelte/svelte-webpack5-add-framework.js.mdx b/docs/snippets/svelte/svelte-webpack5-add-framework.js.mdx new file mode 100644 index 000000000000..de6a0bdc94f0 --- /dev/null +++ b/docs/snippets/svelte/svelte-webpack5-add-framework.js.mdx @@ -0,0 +1,7 @@ +```js +// .storybook/main.js +export default { + // ... + framework: '@storybook/svelte-webpack5', // 👈 Add this +}; +``` diff --git a/docs/snippets/svelte/svelte-webpack5-add-framework.ts.mdx b/docs/snippets/svelte/svelte-webpack5-add-framework.ts.mdx new file mode 100644 index 000000000000..e2c5a9e91c04 --- /dev/null +++ b/docs/snippets/svelte/svelte-webpack5-add-framework.ts.mdx @@ -0,0 +1,11 @@ +```ts +// .storybook/main.ts +import { StorybookConfig } from '@storybook/svelte-webpack5'; + +const config: StorybookConfig = { + // ... + framework: '@storybook/svelte-webpack5', // 👈 Add this +}; + +export default config; +``` diff --git a/docs/snippets/svelte/svelte-webpack5-install.npm.js.mdx b/docs/snippets/svelte/svelte-webpack5-install.npm.js.mdx new file mode 100644 index 000000000000..395d6086a967 --- /dev/null +++ b/docs/snippets/svelte/svelte-webpack5-install.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npm install --save-dev @storybook/svelte-webpack5 +``` diff --git a/docs/snippets/svelte/svelte-webpack5-install.pnpm.js.mdx b/docs/snippets/svelte/svelte-webpack5-install.pnpm.js.mdx new file mode 100644 index 000000000000..34cd1d6fc725 --- /dev/null +++ b/docs/snippets/svelte/svelte-webpack5-install.pnpm.js.mdx @@ -0,0 +1,3 @@ +```shell +pnpm install --save-dev @storybook/svelte-webpack5 +``` diff --git a/docs/snippets/svelte/svelte-webpack5-install.yarn.js.mdx b/docs/snippets/svelte/svelte-webpack5-install.yarn.js.mdx new file mode 100644 index 000000000000..0350df4376bf --- /dev/null +++ b/docs/snippets/svelte/svelte-webpack5-install.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn add --dev @storybook/svelte-webpack5 +``` diff --git a/docs/snippets/svelte/sveltekit-add-framework.js.mdx b/docs/snippets/svelte/sveltekit-add-framework.js.mdx new file mode 100644 index 000000000000..12ea1574f451 --- /dev/null +++ b/docs/snippets/svelte/sveltekit-add-framework.js.mdx @@ -0,0 +1,8 @@ +```js +// .storybook/main.js +export default { + // ... + framework: '@storybook/sveltekit', // 👈 Add this + // svelteOptions: { ... }, 👈 Remove this +}; +``` diff --git a/docs/snippets/svelte/sveltekit-add-framework.ts.mdx b/docs/snippets/svelte/sveltekit-add-framework.ts.mdx new file mode 100644 index 000000000000..d9b21745ab48 --- /dev/null +++ b/docs/snippets/svelte/sveltekit-add-framework.ts.mdx @@ -0,0 +1,12 @@ +```ts +// .storybook/main.ts +import { StorybookConfig } from '@storybook/nextjs'; + +const config: StorybookConfig = { + // ... + framework: '@storybook/sveltekit', // 👈 Add this + // svelteOptions: { ... }, 👈 Remove this +}; + +export default config; +``` diff --git a/docs/snippets/svelte/sveltekit-install.npm.js.mdx b/docs/snippets/svelte/sveltekit-install.npm.js.mdx new file mode 100644 index 000000000000..b63e43de7c6b --- /dev/null +++ b/docs/snippets/svelte/sveltekit-install.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npm install --save-dev @storybook/sveltekit +``` diff --git a/docs/snippets/svelte/sveltekit-install.pnpm.js.mdx b/docs/snippets/svelte/sveltekit-install.pnpm.js.mdx new file mode 100644 index 000000000000..fcbd37499ee9 --- /dev/null +++ b/docs/snippets/svelte/sveltekit-install.pnpm.js.mdx @@ -0,0 +1,3 @@ +```shell +pnpm install --save-dev @storybook/sveltekit +``` diff --git a/docs/snippets/svelte/sveltekit-install.yarn.js.mdx b/docs/snippets/svelte/sveltekit-install.yarn.js.mdx new file mode 100644 index 000000000000..2cb71e06c9ed --- /dev/null +++ b/docs/snippets/svelte/sveltekit-install.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn add --dev @storybook/sveltekit +``` diff --git a/docs/snippets/vue/vue3-webpack5-add-framework.js.mdx b/docs/snippets/vue/vue3-webpack5-add-framework.js.mdx new file mode 100644 index 000000000000..c5b6324a748e --- /dev/null +++ b/docs/snippets/vue/vue3-webpack5-add-framework.js.mdx @@ -0,0 +1,7 @@ +```js +// .storybook/main.js +export default { + // ... + framework: '@storybook/vue3-webpack5', // 👈 Add this +}; +``` diff --git a/docs/snippets/vue/vue3-webpack5-add-framework.ts.mdx b/docs/snippets/vue/vue3-webpack5-add-framework.ts.mdx new file mode 100644 index 000000000000..d83650ea1e35 --- /dev/null +++ b/docs/snippets/vue/vue3-webpack5-add-framework.ts.mdx @@ -0,0 +1,11 @@ +```ts +// .storybook/main.ts +import { StorybookConfig } from '@storybook/vue3-webpack5'; + +const config: StorybookConfig = { + // ... + framework: '@storybook/vue3-webpack5', // 👈 Add this +}; + +export default config; +``` diff --git a/docs/snippets/vue/vue3-webpack5-install.npm.js.mdx b/docs/snippets/vue/vue3-webpack5-install.npm.js.mdx new file mode 100644 index 000000000000..55a7bc78bd80 --- /dev/null +++ b/docs/snippets/vue/vue3-webpack5-install.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npm install --save-dev @storybook/vue3-webpack5 +``` diff --git a/docs/snippets/vue/vue3-webpack5-install.pnpm.js.mdx b/docs/snippets/vue/vue3-webpack5-install.pnpm.js.mdx new file mode 100644 index 000000000000..24ce6105b49e --- /dev/null +++ b/docs/snippets/vue/vue3-webpack5-install.pnpm.js.mdx @@ -0,0 +1,3 @@ +```shell +pnpm install --save-dev @storybook/vue3-webpack5 +``` diff --git a/docs/snippets/vue/vue3-webpack5-install.yarn.js.mdx b/docs/snippets/vue/vue3-webpack5-install.yarn.js.mdx new file mode 100644 index 000000000000..e811a7ae3025 --- /dev/null +++ b/docs/snippets/vue/vue3-webpack5-install.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn add --dev @storybook/vue3-webpack5 +``` diff --git a/docs/snippets/web-components/web-components-vite-add-framework.js.mdx b/docs/snippets/web-components/web-components-vite-add-framework.js.mdx new file mode 100644 index 000000000000..25c7d8e1b51b --- /dev/null +++ b/docs/snippets/web-components/web-components-vite-add-framework.js.mdx @@ -0,0 +1,7 @@ +```js +// .storybook/main.js +export default { + // ... + framework: '@storybook/web-components-vite', // 👈 Add this +}; +``` diff --git a/docs/snippets/web-components/web-components-vite-add-framework.ts.mdx b/docs/snippets/web-components/web-components-vite-add-framework.ts.mdx new file mode 100644 index 000000000000..c4eee76aeb56 --- /dev/null +++ b/docs/snippets/web-components/web-components-vite-add-framework.ts.mdx @@ -0,0 +1,11 @@ +```ts +// .storybook/main.ts +import { StorybookConfig } from '@storybook/web-components-vite'; + +const config: StorybookConfig = { + // ... + framework: '@storybook/web-components-vite', // 👈 Add this +}; + +export default config; +``` diff --git a/docs/snippets/web-components/web-components-vite-install.npm.js.mdx b/docs/snippets/web-components/web-components-vite-install.npm.js.mdx new file mode 100644 index 000000000000..4472f27ea2a2 --- /dev/null +++ b/docs/snippets/web-components/web-components-vite-install.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npm install --save-dev @storybook/web-components-vite +``` diff --git a/docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx b/docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx new file mode 100644 index 000000000000..c2fa67cea100 --- /dev/null +++ b/docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx @@ -0,0 +1,3 @@ +```shell +pnpm install --save-dev @storybook/web-components-vite +``` diff --git a/docs/snippets/web-components/web-components-vite-install.yarn.js.mdx b/docs/snippets/web-components/web-components-vite-install.yarn.js.mdx new file mode 100644 index 000000000000..895cf072d24a --- /dev/null +++ b/docs/snippets/web-components/web-components-vite-install.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn add --dev @storybook/web-components-vite +``` diff --git a/docs/snippets/web-components/web-components-webpack5-add-framework.js.mdx b/docs/snippets/web-components/web-components-webpack5-add-framework.js.mdx new file mode 100644 index 000000000000..620630a1322a --- /dev/null +++ b/docs/snippets/web-components/web-components-webpack5-add-framework.js.mdx @@ -0,0 +1,8 @@ +```js +// .storybook/main.js +export default { + // ... + // framework: '@storybook/react-webpack5', 👈 Remove this + framework: '@storybook/nextjs', // 👈 Add this +}; +``` diff --git a/docs/snippets/web-components/web-components-webpack5-add-framework.ts.mdx b/docs/snippets/web-components/web-components-webpack5-add-framework.ts.mdx new file mode 100644 index 000000000000..8ec81b767573 --- /dev/null +++ b/docs/snippets/web-components/web-components-webpack5-add-framework.ts.mdx @@ -0,0 +1,11 @@ +```ts +// .storybook/main.ts +import { StorybookConfig } from '@storybook/web-components-webpack5'; + +const config: StorybookConfig = { + // ... + framework: '@storybook/web-components-webpack5', // 👈 Add this +}; + +export default config; +``` diff --git a/docs/snippets/web-components/web-components-webpack5-install.npm.js.mdx b/docs/snippets/web-components/web-components-webpack5-install.npm.js.mdx new file mode 100644 index 000000000000..cb74724ce972 --- /dev/null +++ b/docs/snippets/web-components/web-components-webpack5-install.npm.js.mdx @@ -0,0 +1,3 @@ +```shell +npm install --save-dev @storybook/web-components-webpack5 +``` diff --git a/docs/snippets/web-components/web-components-webpack5-install.pnpm.js.mdx b/docs/snippets/web-components/web-components-webpack5-install.pnpm.js.mdx new file mode 100644 index 000000000000..91bf902cac48 --- /dev/null +++ b/docs/snippets/web-components/web-components-webpack5-install.pnpm.js.mdx @@ -0,0 +1,3 @@ +```shell +pnpm install --save-dev @storybook/web-components-webpack5 +``` diff --git a/docs/snippets/web-components/web-components-webpack5-install.yarn.js.mdx b/docs/snippets/web-components/web-components-webpack5-install.yarn.js.mdx new file mode 100644 index 000000000000..561008e42cd4 --- /dev/null +++ b/docs/snippets/web-components/web-components-webpack5-install.yarn.js.mdx @@ -0,0 +1,3 @@ +```shell +yarn add --dev @storybook/web-components-webpack5 +``` diff --git a/docs/toc.js b/docs/toc.js index 5b660a93cce5..2ca9caac889e 100644 --- a/docs/toc.js +++ b/docs/toc.js @@ -43,16 +43,41 @@ module.exports = { title: 'React & Webpack', type: 'link', }, + { + pathSegment: 'sveltekit', + title: 'SvelteKit', + type: 'link', + }, { pathSegment: 'svelte-vite', title: 'Svelte & Vite', type: 'link', }, + { + pathSegment: 'svelte-webpack5', + title: 'Svelte & Webpack', + type: 'link', + }, { pathSegment: 'vue3-vite', title: 'Vue & Vite', type: 'link', }, + { + pathSegment: 'vue3-webpack5', + title: 'Vue & Webpack', + type: 'link', + }, + { + pathSegment: 'web-components-vite', + title: 'Web components & Vite', + type: 'link', + }, + { + pathSegment: 'web-components-webpack5', + title: 'Web components & Webpack', + type: 'link', + }, ], }, { diff --git a/docs/versions/next.json b/docs/versions/next.json index e522ee4c40f2..5e0704023df8 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"8.0.0-rc.5","info":{"plain":"- CLI: Automigration fix version detection of upgrading related packages - [#26410](https://github.com/storybookjs/storybook/pull/26410), thanks @ndelangen!"}} +{"version":"8.1.0-alpha.1","info":{"plain":"- Maintenance: Fix performance regressions - [#26411](https://github.com/storybookjs/storybook/pull/26411), thanks @kasperpeulen!"}}