From 1779122181daf74bea1feb801ba4c3c7de3f0e8f Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 31 Mar 2025 08:54:05 +0200 Subject: [PATCH 1/5] Web Components: Remove Webpack 5 support for Update migration documentation and package dependencies accordingly. --- MIGRATION.md | 50 ++++++----- .../src/common/utils/get-storybook-info.ts | 1 - code/core/src/common/versions.ts | 1 - .../web-components-webpack5/README.md | 3 - .../web-components-webpack5/package.json | 87 ------------------- .../web-components-webpack5/preset.js | 1 - .../web-components-webpack5/project.json | 8 -- .../web-components-webpack5/src/index.ts | 2 - .../web-components-webpack5/src/node/index.ts | 5 -- .../web-components-webpack5/src/preset.ts | 19 ---- .../web-components-webpack5/src/types.ts | 45 ---------- .../web-components-webpack5/src/typings.d.ts | 2 - .../template/cli/.eslintrc.json | 5 -- .../template/cli/js/Button.js | 20 ----- .../template/cli/js/Button.stories.js | 46 ---------- .../template/cli/js/Header.js | 45 ---------- .../template/cli/js/Header.stories.js | 24 ----- .../template/cli/js/Page.js | 62 ------------- .../template/cli/js/Page.stories.js | 20 ----- .../template/cli/ts-4-9/Button.stories.ts | 52 ----------- .../template/cli/ts-4-9/Button.ts | 32 ------- .../template/cli/ts-4-9/Header.stories.ts | 31 ------- .../template/cli/ts-4-9/Header.ts | 56 ------------ .../template/cli/ts-4-9/Page.stories.ts | 26 ------ .../template/cli/ts-4-9/Page.ts | 73 ---------------- .../web-components-webpack5/tsconfig.json | 5 -- .../web-components-webpack5/vitest.config.ts | 10 --- .../create-storybook/src/bin/modernInputs.ts | 1 - code/package.json | 1 - test-storybooks/ember-cli/package.json | 3 +- test-storybooks/external-docs/package.json | 3 +- .../nextjs/package.json | 3 +- .../react/package.json | 3 +- .../svelte/package.json | 3 +- .../vue3/package.json | 3 +- .../server-kitchen-sink/package.json | 3 +- .../standalone-preview/package.json | 3 +- 37 files changed, 36 insertions(+), 721 deletions(-) delete mode 100644 code/frameworks/web-components-webpack5/README.md delete mode 100644 code/frameworks/web-components-webpack5/package.json delete mode 100644 code/frameworks/web-components-webpack5/preset.js delete mode 100644 code/frameworks/web-components-webpack5/project.json delete mode 100644 code/frameworks/web-components-webpack5/src/index.ts delete mode 100644 code/frameworks/web-components-webpack5/src/node/index.ts delete mode 100644 code/frameworks/web-components-webpack5/src/preset.ts delete mode 100644 code/frameworks/web-components-webpack5/src/types.ts delete mode 100644 code/frameworks/web-components-webpack5/src/typings.d.ts delete mode 100644 code/frameworks/web-components-webpack5/template/cli/.eslintrc.json delete mode 100644 code/frameworks/web-components-webpack5/template/cli/js/Button.js delete mode 100644 code/frameworks/web-components-webpack5/template/cli/js/Button.stories.js delete mode 100644 code/frameworks/web-components-webpack5/template/cli/js/Header.js delete mode 100644 code/frameworks/web-components-webpack5/template/cli/js/Header.stories.js delete mode 100644 code/frameworks/web-components-webpack5/template/cli/js/Page.js delete mode 100644 code/frameworks/web-components-webpack5/template/cli/js/Page.stories.js delete mode 100644 code/frameworks/web-components-webpack5/template/cli/ts-4-9/Button.stories.ts delete mode 100644 code/frameworks/web-components-webpack5/template/cli/ts-4-9/Button.ts delete mode 100644 code/frameworks/web-components-webpack5/template/cli/ts-4-9/Header.stories.ts delete mode 100644 code/frameworks/web-components-webpack5/template/cli/ts-4-9/Header.ts delete mode 100644 code/frameworks/web-components-webpack5/template/cli/ts-4-9/Page.stories.ts delete mode 100644 code/frameworks/web-components-webpack5/template/cli/ts-4-9/Page.ts delete mode 100644 code/frameworks/web-components-webpack5/tsconfig.json delete mode 100644 code/frameworks/web-components-webpack5/vitest.config.ts diff --git a/MIGRATION.md b/MIGRATION.md index 6c5a9382ac2..1d849463edc 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -28,8 +28,7 @@ - [Dropped support for Vite 4](#dropped-support-for-vite-4) - [Framework-specific changes](#framework-specific-changes) - [Angular = Require v18 and up](#angular--require-v18-and-up) - - [Preact = Dropped webpack5 builder support](#preact--dropped-webpack5-builder-support) - - [Vue3 = Dropped webpack5 builder support](#vue3--dropped-webpack5-builder-support) + - [Dropped webpack5 Builder Support in Favor of Vite](#dropped-webpack5-builder-support-in-favor-of-vite) - [Next.js = Require v14 and up](#nextjs--require-v14-and-up) - [Next.js = Vite builder stabilized](#nextjs--vite-builder-stabilized) - [From version 8.5.x to 8.6.x](#from-version-85x-to-86x) @@ -817,48 +816,55 @@ Key changes: - Updated TypeScript requirement to `^4.9.0 || ^5.0.0` - Updated Zone.js requirement to `^0.14.0 || ^0.15.0` -#### Preact = Dropped webpack5 builder support +#### Dropped webpack5 Builder Support in Favor of Vite -The packages `@storybook/preact-webpack5` and `@storybook/preset-preact-webpack5` have been removed. For Preact projects, please use the Vite builder instead: +Removed webpack5 builder support for Preact, Vue3, and Web Components frameworks in favor of Vite builder. This change streamlines our builder support and improves performance across these frameworks. + +Removed Packages +- `@storybook/preact-webpack5` +- `@storybook/preset-preact-webpack5` +- `@storybook/vue3-webpack5` +- `@storybook/preset-vue3-webpack` +- `@storybook/web-components-webpack5` + +**For Preact Projects** ```bash npm remove @storybook/preact-webpack5 @storybook/preset-preact-webpack npm install @storybook/preact-vite --save-dev ``` -Then update your `.storybook/main.js|ts`: - -```js -export default { - framework: { - name: '@storybook/preact-vite', - options: {}, - }, - // ... other configurations -}; -``` - -#### Vue3 = Dropped webpack5 builder support - -The `@storybook/vue3-webpack5` package has been removed. For Vue3 projects, please use the Vite builder instead: +**For Vue3 Projects** ```bash npm remove @storybook/vue3-webpack5 @storybook/preset-vue3-webpack npm install @storybook/vue3-vite --save-dev ``` -Then update your `.storybook/main.js|ts`: +**For Web Components Projects** -```js +```bash +npm remove @storybook/web-components-webpack5 +npm install @storybook/web-components-vite --save-dev +``` + +**Update .storybook/main.js|ts** + +For all affected frameworks, update your configuration to use the Vite builder: + + +```tsx export default { framework: { - name: '@storybook/vue3-vite', + name: '@storybook/[framework]-vite', // replace [framework] with preact, vue3, or web-components options: {}, }, // ... other configurations }; ``` +This change consolidates our builder support around Vite, which offers better performance and a more streamlined development experience. The webpack5 builders for these frameworks have been deprecated in favor of the more modern Vite-based solution. + #### Next.js = Require v14 and up Storybook has dropped support for Next.js versions below 14. The minimum supported version is now Next.js 14. diff --git a/code/core/src/common/utils/get-storybook-info.ts b/code/core/src/common/utils/get-storybook-info.ts index 6f3f6e08619..f46fc90e908 100644 --- a/code/core/src/common/utils/get-storybook-info.ts +++ b/code/core/src/common/utils/get-storybook-info.ts @@ -43,7 +43,6 @@ export const frameworkPackages: Record = { '@storybook/nextjs-vite': 'nextjs-vite', '@storybook/react-native-web-vite': 'react-native-web-vite', '@storybook/web-components-vite': 'web-components-vite', - '@storybook/web-components-webpack5': 'web-components-webpack5', // community (outside of monorepo) 'storybook-framework-qwik': 'qwik', 'storybook-solidjs-vite': 'solid', diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts index 64bfcf58cdc..d0066a33103 100644 --- a/code/core/src/common/versions.ts +++ b/code/core/src/common/versions.ts @@ -33,7 +33,6 @@ export default { '@storybook/sveltekit': '9.0.0-alpha.12', '@storybook/vue3-vite': '9.0.0-alpha.12', '@storybook/web-components-vite': '9.0.0-alpha.12', - '@storybook/web-components-webpack5': '9.0.0-alpha.12', '@storybook/blocks': '9.0.0-alpha.12', sb: '9.0.0-alpha.12', '@storybook/cli': '9.0.0-alpha.12', diff --git a/code/frameworks/web-components-webpack5/README.md b/code/frameworks/web-components-webpack5/README.md deleted file mode 100644 index 4c2e0a83bce..00000000000 --- a/code/frameworks/web-components-webpack5/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# Storybook for Web components & Webpack - -See [documentation](https://storybook.js.org/docs/get-started/frameworks/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 deleted file mode 100644 index 0e1abb28d33..00000000000 --- a/code/frameworks/web-components-webpack5/package.json +++ /dev/null @@ -1,87 +0,0 @@ -{ - "name": "@storybook/web-components-webpack5", - "version": "9.0.0-alpha.12", - "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", - "keywords": [ - "lit", - "lit-html", - "storybook", - "web-components" - ], - "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/web-components-webpack5", - "bugs": { - "url": "https://github.com/storybookjs/storybook/issues" - }, - "repository": { - "type": "git", - "url": "https://github.com/storybookjs/storybook.git", - "directory": "code/frameworks/web-components-webpack5" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - }, - "license": "MIT", - "exports": { - ".": { - "types": "./dist/index.d.ts", - "node": "./dist/index.js", - "import": "./dist/index.mjs", - "require": "./dist/index.js" - }, - "./preset": { - "types": "./dist/preset.d.ts", - "require": "./dist/preset.js" - }, - "./node": { - "types": "./dist/node/index.d.ts", - "node": "./dist/node/index.js", - "import": "./dist/node/index.mjs", - "require": "./dist/node/index.js" - }, - "./package.json": "./package.json" - }, - "main": "dist/index.js", - "module": "dist/index.mjs", - "types": "dist/index.d.ts", - "files": [ - "dist/**/*", - "template/**/*", - "README.md", - "*.js", - "*.d.ts", - "!src/**/*" - ], - "scripts": { - "check": "jiti ../../../scripts/prepare/check.ts", - "prep": "jiti ../../../scripts/prepare/bundle.ts" - }, - "dependencies": { - "@storybook/builder-webpack5": "workspace:*", - "@storybook/web-components": "workspace:*" - }, - "devDependencies": { - "@types/node": "^22.0.0", - "lit": "2.3.1", - "typescript": "^5.7.3" - }, - "peerDependencies": { - "lit": "^2.0.0 || ^3.0.0", - "storybook": "workspace:^" - }, - "engines": { - "node": ">=20.0.0" - }, - "publishConfig": { - "access": "public" - }, - "bundler": { - "entries": [ - "./src/index.ts", - "./src/preset.ts", - "./src/node/index.ts" - ], - "platform": "node" - }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" -} diff --git a/code/frameworks/web-components-webpack5/preset.js b/code/frameworks/web-components-webpack5/preset.js deleted file mode 100644 index a83f95279e7..00000000000 --- a/code/frameworks/web-components-webpack5/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./dist/preset'); diff --git a/code/frameworks/web-components-webpack5/project.json b/code/frameworks/web-components-webpack5/project.json deleted file mode 100644 index 03a74995a37..00000000000 --- a/code/frameworks/web-components-webpack5/project.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "name": "web-components-webpack5", - "$schema": "../../node_modules/nx/schemas/project-schema.json", - "projectType": "library", - "targets": { - "build": {} - } -} diff --git a/code/frameworks/web-components-webpack5/src/index.ts b/code/frameworks/web-components-webpack5/src/index.ts deleted file mode 100644 index 538d3b3a6d6..00000000000 --- a/code/frameworks/web-components-webpack5/src/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from '@storybook/web-components'; -export * from './types'; diff --git a/code/frameworks/web-components-webpack5/src/node/index.ts b/code/frameworks/web-components-webpack5/src/node/index.ts deleted file mode 100644 index bbfba66cc96..00000000000 --- a/code/frameworks/web-components-webpack5/src/node/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -import type { StorybookConfig } from '../types'; - -export function defineMain(config: StorybookConfig) { - return config; -} diff --git a/code/frameworks/web-components-webpack5/src/preset.ts b/code/frameworks/web-components-webpack5/src/preset.ts deleted file mode 100644 index b005060fa88..00000000000 --- a/code/frameworks/web-components-webpack5/src/preset.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { dirname, join } from 'node:path'; - -import type { PresetProperty } from 'storybook/internal/types'; - -const getAbsolutePath = (input: I): I => - dirname(require.resolve(join(input, 'package.json'))) as any; - -export const core: PresetProperty<'core'> = async (config, options) => { - const framework = await options.presets.apply('framework'); - - return { - ...config, - builder: { - name: getAbsolutePath('@storybook/builder-webpack5'), - options: typeof framework === 'string' ? {} : framework.options.builder || {}, - }, - renderer: getAbsolutePath('@storybook/web-components'), - }; -}; diff --git a/code/frameworks/web-components-webpack5/src/types.ts b/code/frameworks/web-components-webpack5/src/types.ts deleted file mode 100644 index 0cd693b1fd4..00000000000 --- a/code/frameworks/web-components-webpack5/src/types.ts +++ /dev/null @@ -1,45 +0,0 @@ -import type { - CompatibleString, - StorybookConfig as StorybookConfigBase, - TypescriptOptions as TypescriptOptionsWebComponents, -} from 'storybook/internal/types'; - -import type { - BuilderOptions, - StorybookConfigWebpack, - TypescriptOptions as TypescriptOptionsBuilder, -} from '@storybook/builder-webpack5'; - -type FrameworkName = CompatibleString<'@storybook/web-components-webpack5'>; -type BuilderName = CompatibleString<'@storybook/builder-webpack5'>; - -export type FrameworkOptions = { - builder?: BuilderOptions; -}; - -type StorybookConfigFramework = { - framework: - | FrameworkName - | { - name: FrameworkName; - options: FrameworkOptions; - }; - core?: StorybookConfigBase['core'] & { - builder?: - | BuilderName - | { - name: BuilderName; - options: BuilderOptions; - }; - }; - typescript?: Partial & - StorybookConfigBase['typescript']; -}; - -/** The interface for Storybook configuration in `main.ts` files. */ -export type StorybookConfig = Omit< - StorybookConfigBase, - keyof StorybookConfigWebpack | keyof StorybookConfigFramework -> & - StorybookConfigWebpack & - StorybookConfigFramework; diff --git a/code/frameworks/web-components-webpack5/src/typings.d.ts b/code/frameworks/web-components-webpack5/src/typings.d.ts deleted file mode 100644 index cbeccdbb15f..00000000000 --- a/code/frameworks/web-components-webpack5/src/typings.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -// will be provided by the webpack define plugin -declare var NODE_ENV: string | undefined; diff --git a/code/frameworks/web-components-webpack5/template/cli/.eslintrc.json b/code/frameworks/web-components-webpack5/template/cli/.eslintrc.json deleted file mode 100644 index 40ece4a0aa1..00000000000 --- a/code/frameworks/web-components-webpack5/template/cli/.eslintrc.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "rules": { - "import/extensions": "off" - } -} diff --git a/code/frameworks/web-components-webpack5/template/cli/js/Button.js b/code/frameworks/web-components-webpack5/template/cli/js/Button.js deleted file mode 100644 index 6cbe804eb1b..00000000000 --- a/code/frameworks/web-components-webpack5/template/cli/js/Button.js +++ /dev/null @@ -1,20 +0,0 @@ -import { html } from 'lit'; -import { styleMap } from 'lit/directives/style-map.js'; - -import './button.css'; - -/** Primary UI component for user interaction */ -export const Button = ({ primary, backgroundColor = null, size, label, onClick }) => { - const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; - - return html` - - `; -}; diff --git a/code/frameworks/web-components-webpack5/template/cli/js/Button.stories.js b/code/frameworks/web-components-webpack5/template/cli/js/Button.stories.js deleted file mode 100644 index 9efdf07ece3..00000000000 --- a/code/frameworks/web-components-webpack5/template/cli/js/Button.stories.js +++ /dev/null @@ -1,46 +0,0 @@ -import { fn } from 'storybook/test'; - -import { Button } from './Button'; - -// More on how to set up stories at: https://storybook.js.org/docs/writing-stories -export default { - title: 'Example/Button', - tags: ['autodocs'], - render: (args) => Button(args), - argTypes: { - backgroundColor: { control: 'color' }, - size: { - control: { type: 'select' }, - options: ['small', 'medium', 'large'], - }, - }, - args: { onClick: fn() }, -}; - -// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -export const Primary = { - args: { - primary: true, - label: 'Button', - }, -}; - -export const Secondary = { - args: { - label: 'Button', - }, -}; - -export const Large = { - args: { - size: 'large', - label: 'Button', - }, -}; - -export const Small = { - args: { - size: 'small', - label: 'Button', - }, -}; diff --git a/code/frameworks/web-components-webpack5/template/cli/js/Header.js b/code/frameworks/web-components-webpack5/template/cli/js/Header.js deleted file mode 100644 index 19fea63604a..00000000000 --- a/code/frameworks/web-components-webpack5/template/cli/js/Header.js +++ /dev/null @@ -1,45 +0,0 @@ -import { html } from 'lit'; - -import { Button } from './Button'; -import './header.css'; - -export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => html` -
-
-
- - - - - - - -

Acme

-
-
- ${user - ? Button({ size: 'small', onClick: onLogout, label: 'Log out' }) - : html`${Button({ - size: 'small', - onClick: onLogin, - label: 'Log in', - })} - ${Button({ - primary: true, - size: 'small', - onClick: onCreateAccount, - label: 'Sign up', - })}`} -
-
-
-`; diff --git a/code/frameworks/web-components-webpack5/template/cli/js/Header.stories.js b/code/frameworks/web-components-webpack5/template/cli/js/Header.stories.js deleted file mode 100644 index b45ba68c5a8..00000000000 --- a/code/frameworks/web-components-webpack5/template/cli/js/Header.stories.js +++ /dev/null @@ -1,24 +0,0 @@ -import { fn } from 'storybook/test'; - -import { Header } from './Header'; - -export default { - title: 'Example/Header', - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/web-components/vue/writing-docs/autodocs - tags: ['autodocs'], - render: (args) => Header(args), - args: { - onLogin: fn(), - onLogout: fn(), - onCreateAccount: fn(), - }, -}; -export const LoggedIn = { - args: { - user: { - name: 'Jane Doe', - }, - }, -}; - -export const LoggedOut = {}; diff --git a/code/frameworks/web-components-webpack5/template/cli/js/Page.js b/code/frameworks/web-components-webpack5/template/cli/js/Page.js deleted file mode 100644 index 54919dabd48..00000000000 --- a/code/frameworks/web-components-webpack5/template/cli/js/Page.js +++ /dev/null @@ -1,62 +0,0 @@ -import { html } from 'lit'; - -import { Header } from './Header'; -import './page.css'; - -export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => html` -
- ${Header({ - user, - onLogin, - onLogout, - onCreateAccount, - })} - -
-

Pages in Storybook

-

- We recommend building UIs with a - - component-driven process starting with atomic components and ending with pages. -

-

- Render pages with mock data. This makes it easy to build and review page states without - needing to navigate to them in your app. Here are some handy patterns for managing page data - in Storybook: -

-
    -
  • - Use a higher-level connected component. Storybook helps you compose such data from the - "args" of child component stories -
    • -
  • - Assemble data in the page component from your services. You can mock these services out - using Storybook. -
    • -
-

- Get a guided tutorial on component-driven development at - - Storybook tutorials - - . Read more in the - docs - . -

-
- Tip Adjust the width of the canvas with the - - - - - - Viewports addon in the toolbar -
-
-
-`; diff --git a/code/frameworks/web-components-webpack5/template/cli/js/Page.stories.js b/code/frameworks/web-components-webpack5/template/cli/js/Page.stories.js deleted file mode 100644 index 7c28c5ad14b..00000000000 --- a/code/frameworks/web-components-webpack5/template/cli/js/Page.stories.js +++ /dev/null @@ -1,20 +0,0 @@ -import * as HeaderStories from './Header.stories'; -import { Page } from './Page'; - -export default { - title: 'Example/Page', - render: (args) => Page(args), -}; - -export const LoggedIn = { - args: { - // More on composing args: https://storybook.js.org/docs/writing-stories/args#args-composition - ...HeaderStories.LoggedIn.args, - }, -}; - -export const LoggedOut = { - args: { - ...HeaderStories.LoggedOut.args, - }, -}; diff --git a/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Button.stories.ts b/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Button.stories.ts deleted file mode 100644 index e3085252e4b..00000000000 --- a/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Button.stories.ts +++ /dev/null @@ -1,52 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/web-components-webpack5'; - -import { fn } from 'storybook/test'; - -import type { ButtonProps } from './Button'; -import { Button } from './Button'; - -// More on how to set up stories at: https://storybook.js.org/docs/writing-stories -const meta = { - title: 'Example/Button', - tags: ['autodocs'], - render: (args) => Button(args), - argTypes: { - backgroundColor: { control: 'color' }, - size: { - control: { type: 'select' }, - options: ['small', 'medium', 'large'], - }, - }, - args: { onClick: fn() }, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -export const Primary: Story = { - args: { - primary: true, - label: 'Button', - }, -}; - -export const Secondary: Story = { - args: { - label: 'Button', - }, -}; - -export const Large: Story = { - args: { - size: 'large', - label: 'Button', - }, -}; - -export const Small: Story = { - args: { - size: 'small', - label: 'Button', - }, -}; diff --git a/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Button.ts b/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Button.ts deleted file mode 100644 index 4ca7fe4a723..00000000000 --- a/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Button.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { html } from 'lit'; -import { styleMap } from 'lit/directives/style-map.js'; - -import './button.css'; - -export interface ButtonProps { - /** Is this the principal call to action on the page? */ - primary?: boolean; - /** What background color to use */ - backgroundColor?: string; - /** How large should the button be? */ - size?: 'small' | 'medium' | 'large'; - /** Button contents */ - label: string; - /** Optional click handler */ - onClick?: () => void; -} -/** Primary UI component for user interaction */ -export const Button = ({ primary, backgroundColor, size, label, onClick }: ButtonProps) => { - const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; - - return html` - - `; -}; diff --git a/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Header.stories.ts b/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Header.stories.ts deleted file mode 100644 index 9564aa90e73..00000000000 --- a/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Header.stories.ts +++ /dev/null @@ -1,31 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/web-components-webpack5'; - -import { fn } from 'storybook/test'; - -import type { HeaderProps } from './Header'; -import { Header } from './Header'; - -const meta = { - title: 'Example/Header', - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs - tags: ['autodocs'], - render: (args: HeaderProps) => Header(args), - args: { - onLogin: fn(), - onLogout: fn(), - onCreateAccount: fn(), - }, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const LoggedIn: Story = { - args: { - user: { - name: 'Jane Doe', - }, - }, -}; - -export const LoggedOut: Story = {}; diff --git a/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Header.ts b/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Header.ts deleted file mode 100644 index 7c3c8b89375..00000000000 --- a/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Header.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { html } from 'lit'; - -import { Button } from './Button'; -import './header.css'; - -type User = { - name: string; -}; - -export interface HeaderProps { - user?: User; - onLogin?: () => void; - onLogout?: () => void; - onCreateAccount?: () => void; -} - -export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => html` -
-
-
- - - - - - - -

Acme

-
-
- ${user - ? Button({ size: 'small', onClick: onLogout, label: 'Log out' }) - : html`${Button({ - size: 'small', - onClick: onLogin, - label: 'Log in', - })} - ${Button({ - primary: true, - size: 'small', - onClick: onCreateAccount, - label: 'Sign up', - })}`} -
-
-
-`; diff --git a/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Page.stories.ts b/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Page.stories.ts deleted file mode 100644 index 51ba30dfaae..00000000000 --- a/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Page.stories.ts +++ /dev/null @@ -1,26 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/web-components-webpack5'; - -import * as HeaderStories from './Header.stories'; -import type { PageProps } from './Page'; -import { Page } from './Page'; - -const meta = { - title: 'Example/Page', - render: (args: PageProps) => Page(args), -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const LoggedIn: Story = { - args: { - // More on composing args: https://storybook.js.org/docs/writing-stories/args#args-composition - ...HeaderStories.LoggedIn.args, - }, -}; - -export const LoggedOut: Story = { - args: { - ...HeaderStories.LoggedOut.args, - }, -}; diff --git a/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Page.ts b/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Page.ts deleted file mode 100644 index 079c4f04cfb..00000000000 --- a/code/frameworks/web-components-webpack5/template/cli/ts-4-9/Page.ts +++ /dev/null @@ -1,73 +0,0 @@ -import { html } from 'lit'; - -import { Header } from './Header'; -import './page.css'; - -type User = { - name: string; -}; - -export interface PageProps { - user?: User; - onLogin?: () => void; - onLogout?: () => void; - onCreateAccount?: () => void; -} - -export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) => html` -
- ${Header({ - user, - onLogin, - onLogout, - onCreateAccount, - })} - -
-

Pages in Storybook

-

- We recommend building UIs with a - - component-driven process starting with atomic components and ending with pages. -

-

- Render pages with mock data. This makes it easy to build and review page states without - needing to navigate to them in your app. Here are some handy patterns for managing page data - in Storybook: -

-
    -
  • - Use a higher-level connected component. Storybook helps you compose such data from the - "args" of child component stories -
    • -
  • - Assemble data in the page component from your services. You can mock these services out - using Storybook. -
    • -
-

- Get a guided tutorial on component-driven development at - - Storybook tutorials - - . Read more in the - docs - . -

-
- Tip Adjust the width of the canvas with the - - - - - - Viewports addon in the toolbar -
-
-
-`; diff --git a/code/frameworks/web-components-webpack5/tsconfig.json b/code/frameworks/web-components-webpack5/tsconfig.json deleted file mode 100644 index 73a65ef2ef6..00000000000 --- a/code/frameworks/web-components-webpack5/tsconfig.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "extends": "../../tsconfig.json", - "compilerOptions": {}, - "include": ["src/**/*"] -} diff --git a/code/frameworks/web-components-webpack5/vitest.config.ts b/code/frameworks/web-components-webpack5/vitest.config.ts deleted file mode 100644 index 7420176b2e4..00000000000 --- a/code/frameworks/web-components-webpack5/vitest.config.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { defineConfig, mergeConfig } from 'vitest/config'; - -import { vitestCommonConfig } from '../../vitest.workspace'; - -export default mergeConfig( - vitestCommonConfig, - defineConfig({ - // Add custom config here - }) -); diff --git a/code/lib/create-storybook/src/bin/modernInputs.ts b/code/lib/create-storybook/src/bin/modernInputs.ts index e86e10cbfa5..56c3a20b92e 100644 --- a/code/lib/create-storybook/src/bin/modernInputs.ts +++ b/code/lib/create-storybook/src/bin/modernInputs.ts @@ -41,7 +41,6 @@ export const supportedFrameworksPackages = { 'vue3-rsbuild': 'storybook-vue3-rsbuild', 'vue3-vite': '@storybook/vue3-vite', 'web-components-vite': '@storybook/web-components-vite', - 'web-components-webpack5': '@storybook/web-components-webpack5', angular: '@storybook/angular', ember: '@storybook/ember', diff --git a/code/package.json b/code/package.json index 97b15e6f528..5a4769fe291 100644 --- a/code/package.json +++ b/code/package.json @@ -152,7 +152,6 @@ "@storybook/vue3-vite": "workspace:*", "@storybook/web-components": "workspace:*", "@storybook/web-components-vite": "workspace:*", - "@storybook/web-components-webpack5": "workspace:*", "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "^16.2.0", diff --git a/test-storybooks/ember-cli/package.json b/test-storybooks/ember-cli/package.json index f372756b7ff..9be75297ebe 100644 --- a/test-storybooks/ember-cli/package.json +++ b/test-storybooks/ember-cli/package.json @@ -56,8 +56,7 @@ "@storybook/vue3": "file:../../code/renderers/vue3", "@storybook/vue3-vite": "file:../../code/frameworks/vue3-vite", "@storybook/web-components": "file:../../code/renderers/web-components", - "@storybook/web-components-vite": "file:../../code/frameworks/web-components-vite", - "@storybook/web-components-webpack5": "file:../../code/frameworks/web-components-webpack5" + "@storybook/web-components-vite": "file:../../code/frameworks/web-components-vite" }, "dependencies": { "ember-named-blocks-polyfill": "^0.2.3", diff --git a/test-storybooks/external-docs/package.json b/test-storybooks/external-docs/package.json index fa303e3e5dc..ee5f874cb12 100644 --- a/test-storybooks/external-docs/package.json +++ b/test-storybooks/external-docs/package.json @@ -56,8 +56,7 @@ "@storybook/vue3": "file:../../code/renderers/vue3", "@storybook/vue3-vite": "file:../../code/frameworks/vue3-vite", "@storybook/web-components": "file:../../code/renderers/web-components", - "@storybook/web-components-vite": "file:../../code/frameworks/web-components-vite", - "@storybook/web-components-webpack5": "file:../../code/frameworks/web-components-webpack5" + "@storybook/web-components-vite": "file:../../code/frameworks/web-components-vite" }, "dependencies": { "@storybook/addon-docs": "*", diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/package.json b/test-storybooks/portable-stories-kitchen-sink/nextjs/package.json index 205ad7b3a12..dc278a241a8 100644 --- a/test-storybooks/portable-stories-kitchen-sink/nextjs/package.json +++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/package.json @@ -59,8 +59,7 @@ "@storybook/vue3": "file:../../../code/renderers/vue3", "@storybook/vue3-vite": "file:../../../code/frameworks/vue3-vite", "@storybook/web-components": "file:../../../code/renderers/web-components", - "@storybook/web-components-vite": "file:../../../code/frameworks/web-components-vite", - "@storybook/web-components-webpack5": "file:../../../code/frameworks/web-components-webpack5" + "@storybook/web-components-vite": "file:../../../code/frameworks/web-components-vite" }, "dependencies": { "next": "^14.2.0", diff --git a/test-storybooks/portable-stories-kitchen-sink/react/package.json b/test-storybooks/portable-stories-kitchen-sink/react/package.json index c97bf8fa9c8..23be0935e2c 100644 --- a/test-storybooks/portable-stories-kitchen-sink/react/package.json +++ b/test-storybooks/portable-stories-kitchen-sink/react/package.json @@ -63,8 +63,7 @@ "@storybook/vue3": "file:../../../code/renderers/vue3", "@storybook/vue3-vite": "file:../../../code/frameworks/vue3-vite", "@storybook/web-components": "file:../../../code/renderers/web-components", - "@storybook/web-components-vite": "file:../../../code/frameworks/web-components-vite", - "@storybook/web-components-webpack5": "file:../../../code/frameworks/web-components-webpack5", + "@storybook/web-components-vite": "file:../../../code/frameworks/web-components-vite" "playwright": "1.48.1" }, "dependencies": { diff --git a/test-storybooks/portable-stories-kitchen-sink/svelte/package.json b/test-storybooks/portable-stories-kitchen-sink/svelte/package.json index 4b80923566f..e32bfecdce3 100644 --- a/test-storybooks/portable-stories-kitchen-sink/svelte/package.json +++ b/test-storybooks/portable-stories-kitchen-sink/svelte/package.json @@ -60,8 +60,7 @@ "@storybook/vue3": "portal:../../../code/renderers/vue3", "@storybook/vue3-vite": "portal:../../../code/frameworks/vue3-vite", "@storybook/web-components": "portal:../../../code/renderers/web-components", - "@storybook/web-components-vite": "portal:../../../code/frameworks/web-components-vite", - "@storybook/web-components-webpack5": "portal:../../../code/frameworks/web-components-webpack5", + "@storybook/web-components-vite": "portal:../../../code/frameworks/web-components-vite" "playwright": "1.48.1" }, "devDependencies": { diff --git a/test-storybooks/portable-stories-kitchen-sink/vue3/package.json b/test-storybooks/portable-stories-kitchen-sink/vue3/package.json index 4f51a6f5216..692bbf4fb98 100644 --- a/test-storybooks/portable-stories-kitchen-sink/vue3/package.json +++ b/test-storybooks/portable-stories-kitchen-sink/vue3/package.json @@ -61,8 +61,7 @@ "@storybook/vue3": "file:../../../code/renderers/vue3", "@storybook/vue3-vite": "file:../../../code/frameworks/vue3-vite", "@storybook/web-components": "file:../../../code/renderers/web-components", - "@storybook/web-components-vite": "file:../../../code/frameworks/web-components-vite", - "@storybook/web-components-webpack5": "file:../../../code/frameworks/web-components-webpack5", + "@storybook/web-components-vite": "file:../../../code/frameworks/web-components-vite" "playwright": "1.48.1" }, "dependencies": { diff --git a/test-storybooks/server-kitchen-sink/package.json b/test-storybooks/server-kitchen-sink/package.json index d729f01c601..5c470ec6e23 100644 --- a/test-storybooks/server-kitchen-sink/package.json +++ b/test-storybooks/server-kitchen-sink/package.json @@ -59,8 +59,7 @@ "@storybook/vue3": "file:../../code/renderers/vue3", "@storybook/vue3-vite": "file:../../code/frameworks/vue3-vite", "@storybook/web-components": "file:../../code/renderers/web-components", - "@storybook/web-components-vite": "file:../../code/frameworks/web-components-vite", - "@storybook/web-components-webpack5": "file:../../code/frameworks/web-components-webpack5" + "@storybook/web-components-vite": "file:../../code/frameworks/web-components-vite" }, "devDependencies": { "@storybook/addon-a11y": "*", diff --git a/test-storybooks/standalone-preview/package.json b/test-storybooks/standalone-preview/package.json index b4d83a7fb76..3e9384acbf7 100644 --- a/test-storybooks/standalone-preview/package.json +++ b/test-storybooks/standalone-preview/package.json @@ -52,8 +52,7 @@ "@storybook/vue3": "file:../../code/renderers/vue3", "@storybook/vue3-vite": "file:../../code/frameworks/vue3-vite", "@storybook/web-components": "file:../../code/renderers/web-components", - "@storybook/web-components-vite": "file:../../code/frameworks/web-components-vite", - "@storybook/web-components-webpack5": "file:../../code/frameworks/web-components-webpack5" + "@storybook/web-components-vite": "file:../../code/frameworks/web-components-vite" }, "devDependencies": { "@storybook/addon-docs": "*", From fd728f9ee296cc4716d70a7780f8ad21b72d25c6 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 31 Mar 2025 09:07:35 +0200 Subject: [PATCH 2/5] Add autoblock --- .../src/autoblock/block-dependencies-versions.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/code/lib/cli-storybook/src/autoblock/block-dependencies-versions.ts b/code/lib/cli-storybook/src/autoblock/block-dependencies-versions.ts index 89fed8871f0..f2f8d4314f5 100644 --- a/code/lib/cli-storybook/src/autoblock/block-dependencies-versions.ts +++ b/code/lib/cli-storybook/src/autoblock/block-dependencies-versions.ts @@ -11,6 +11,7 @@ const minimalVersionsMap = { '@storybook/preset-preact-webpack': '9.0.0', '@storybook/vue3-webpack5': '9.0.0', '@storybook/preset-vue3-webpack': '9.0.0', + '@storybook/web-components-webpack5': '9.0.0', next: '14.1.0', preact: '10.0.0', svelte: '4.0.0', @@ -67,14 +68,20 @@ export const blocker = createBlocker({ return dedent` Support for Preact Webpack5 has been removed. Please see the migration guide for more information: - ${picocolors.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#preact--dropped-webpack5-builder-support')} + ${picocolors.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-webpack5-builder-support-in-favor-of-vite')} `; case '@storybook/vue3-webpack5': case '@storybook/preset-vue3-webpack': return dedent` Support for Vue3 Webpack5 has been removed. Please see the migration guide for more information: - ${picocolors.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#vue3--dropped-webpack5-builder-support')} + ${picocolors.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-webpack5-builder-support-in-favor-of-vite')} + `; + case '@storybook/web-components-webpack5': + return dedent` + Support for Web Components Webpack5 has been removed. + Please see the migration guide for more information: + ${picocolors.yellow('https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-webpack5-builder-support-in-favor-of-vite')} `; case 'vue': return dedent` From 9101d0567db6090b8e5a51a8a55029199b84517a Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 31 Mar 2025 09:39:42 +0200 Subject: [PATCH 3/5] Update yarn.lock --- code/yarn.lock | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/code/yarn.lock b/code/yarn.lock index 63fee62f70a..1dcf04d29c3 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -7512,7 +7512,6 @@ __metadata: "@storybook/vue3-vite": "workspace:*" "@storybook/web-components": "workspace:*" "@storybook/web-components-vite": "workspace:*" - "@storybook/web-components-webpack5": "workspace:*" "@testing-library/dom": "npm:^10.4.0" "@testing-library/jest-dom": "npm:^6.6.3" "@testing-library/react": "npm:^16.2.0" @@ -7784,21 +7783,6 @@ __metadata: languageName: unknown linkType: soft -"@storybook/web-components-webpack5@workspace:*, @storybook/web-components-webpack5@workspace:frameworks/web-components-webpack5": - version: 0.0.0-use.local - resolution: "@storybook/web-components-webpack5@workspace:frameworks/web-components-webpack5" - dependencies: - "@storybook/builder-webpack5": "workspace:*" - "@storybook/web-components": "workspace:*" - "@types/node": "npm:^22.0.0" - lit: "npm:2.3.1" - typescript: "npm:^5.7.3" - peerDependencies: - lit: ^2.0.0 || ^3.0.0 - storybook: "workspace:^" - languageName: unknown - linkType: soft - "@storybook/web-components@workspace:*, @storybook/web-components@workspace:renderers/web-components": version: 0.0.0-use.local resolution: "@storybook/web-components@workspace:renderers/web-components" From 5af292ac480b55e9f48ec470a410afd7e5a61ac3 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 31 Mar 2025 09:47:52 +0200 Subject: [PATCH 4/5] Remove Webpack 5 support from framework and renderer mappings --- code/core/src/cli/helpers.ts | 1 - code/core/src/common/utils/framework-to-renderer.ts | 1 - code/core/src/types/modules/frameworks.ts | 1 - code/lib/create-storybook/src/bin/modernInputs.ts | 2 -- 4 files changed, 5 deletions(-) diff --git a/code/core/src/cli/helpers.ts b/code/core/src/cli/helpers.ts index d82574c029b..b104d462b41 100644 --- a/code/core/src/cli/helpers.ts +++ b/code/core/src/cli/helpers.ts @@ -165,7 +165,6 @@ export const frameworkToDefaultBuilder: Record< sveltekit: CoreBuilder.Vite, 'vue3-vite': CoreBuilder.Vite, 'web-components-vite': CoreBuilder.Vite, - 'web-components-webpack5': CoreBuilder.Webpack5, // Only to pass type checking, will never be used 'react-rsbuild': CommunityBuilder.Rsbuild, 'vue3-rsbuild': CommunityBuilder.Rsbuild, diff --git a/code/core/src/common/utils/framework-to-renderer.ts b/code/core/src/common/utils/framework-to-renderer.ts index 10f821927ec..78f15bdcba0 100644 --- a/code/core/src/common/utils/framework-to-renderer.ts +++ b/code/core/src/common/utils/framework-to-renderer.ts @@ -24,7 +24,6 @@ export const frameworkToRenderer: Record< 'vue3-vite': 'vue3', nuxt: 'vue3', 'web-components-vite': 'web-components', - 'web-components-webpack5': 'web-components', 'react-rsbuild': 'react', 'vue3-rsbuild': 'vue3', // renderers diff --git a/code/core/src/types/modules/frameworks.ts b/code/core/src/types/modules/frameworks.ts index 4dcd5b72ad6..c3fb4834248 100644 --- a/code/core/src/types/modules/frameworks.ts +++ b/code/core/src/types/modules/frameworks.ts @@ -16,7 +16,6 @@ export type SupportedFrameworks = | 'sveltekit' | 'vue3-vite' | 'web-components-vite' - | 'web-components-webpack5' | 'qwik' | 'solid' | 'nuxt' diff --git a/code/lib/create-storybook/src/bin/modernInputs.ts b/code/lib/create-storybook/src/bin/modernInputs.ts index 56c3a20b92e..d38a888857a 100644 --- a/code/lib/create-storybook/src/bin/modernInputs.ts +++ b/code/lib/create-storybook/src/bin/modernInputs.ts @@ -24,7 +24,6 @@ export const supportedFrameworks = [ 'vue3-vite', 'react-native', 'web-components-vite', - 'web-components-webpack5', ] as const; export const supportedFrameworksPackages = { @@ -68,7 +67,6 @@ export const supportedFrameworksNames = { 'vue3-rsbuild': 'Vue 3 with Rsbuild', 'vue3-vite': 'Vue 3 with Vite', 'web-components-vite': 'Web Components with Vite', - 'web-components-webpack5': 'Web Components with Webpack 5', angular: 'Angular', ember: 'Ember', nextjs: 'NextJS', From e7cc4d0cb6e8a0e5010a4d308ea262a8c1d91bcb Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 31 Mar 2025 10:33:10 +0200 Subject: [PATCH 5/5] Update package.json files --- .../portable-stories-kitchen-sink/react/package.json | 2 +- .../portable-stories-kitchen-sink/svelte/package.json | 2 +- test-storybooks/portable-stories-kitchen-sink/vue3/package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/test-storybooks/portable-stories-kitchen-sink/react/package.json b/test-storybooks/portable-stories-kitchen-sink/react/package.json index 23be0935e2c..9175ec1443b 100644 --- a/test-storybooks/portable-stories-kitchen-sink/react/package.json +++ b/test-storybooks/portable-stories-kitchen-sink/react/package.json @@ -63,7 +63,7 @@ "@storybook/vue3": "file:../../../code/renderers/vue3", "@storybook/vue3-vite": "file:../../../code/frameworks/vue3-vite", "@storybook/web-components": "file:../../../code/renderers/web-components", - "@storybook/web-components-vite": "file:../../../code/frameworks/web-components-vite" + "@storybook/web-components-vite": "file:../../../code/frameworks/web-components-vite", "playwright": "1.48.1" }, "dependencies": { diff --git a/test-storybooks/portable-stories-kitchen-sink/svelte/package.json b/test-storybooks/portable-stories-kitchen-sink/svelte/package.json index e32bfecdce3..76d35fbd0e4 100644 --- a/test-storybooks/portable-stories-kitchen-sink/svelte/package.json +++ b/test-storybooks/portable-stories-kitchen-sink/svelte/package.json @@ -60,7 +60,7 @@ "@storybook/vue3": "portal:../../../code/renderers/vue3", "@storybook/vue3-vite": "portal:../../../code/frameworks/vue3-vite", "@storybook/web-components": "portal:../../../code/renderers/web-components", - "@storybook/web-components-vite": "portal:../../../code/frameworks/web-components-vite" + "@storybook/web-components-vite": "portal:../../../code/frameworks/web-components-vite", "playwright": "1.48.1" }, "devDependencies": { diff --git a/test-storybooks/portable-stories-kitchen-sink/vue3/package.json b/test-storybooks/portable-stories-kitchen-sink/vue3/package.json index 692bbf4fb98..7cafccff6b6 100644 --- a/test-storybooks/portable-stories-kitchen-sink/vue3/package.json +++ b/test-storybooks/portable-stories-kitchen-sink/vue3/package.json @@ -61,7 +61,7 @@ "@storybook/vue3": "file:../../../code/renderers/vue3", "@storybook/vue3-vite": "file:../../../code/frameworks/vue3-vite", "@storybook/web-components": "file:../../../code/renderers/web-components", - "@storybook/web-components-vite": "file:../../../code/frameworks/web-components-vite" + "@storybook/web-components-vite": "file:../../../code/frameworks/web-components-vite", "playwright": "1.48.1" }, "dependencies": {