Merge pull request #30988 from storybookjs/valentin/drop-webcomponents-webpack5-support

Web Components: Remove Webpack 5 support

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)
+    - [Dropped webpack5 Builder Support in Favor of Vite](#dropped-webpack5-builder-support-in-favor-of-vite)
-    - [Vue3 = Dropped webpack5 builder support](#vue3--dropped-webpack5-builder-support)
     - [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`:
+**For Vue3 Projects**
-
-```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:
 
 ```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.1. The minimum supported version is now Next.js 14.1.

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,

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

code/core/src/common/utils/get-storybook-info.ts

@@ -43,7 +43,6 @@ export const frameworkPackages: Record<string, SupportedFrameworks> = {
   '@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',

code/core/src/common/versions.ts

@@ -28,7 +28,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',

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'

code/frameworks/web-components-webpack5/README.md

@@ -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.

code/frameworks/web-components-webpack5/package.json

@@ -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"
-}

code/frameworks/web-components-webpack5/preset.js

@@ -1 +0,0 @@
-module.exports = require('./dist/preset');

code/frameworks/web-components-webpack5/project.json

@@ -1,8 +0,0 @@
-{
-  "name": "web-components-webpack5",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "library",
-  "targets": {
-    "build": {}
-  }
-}

code/frameworks/web-components-webpack5/src/index.ts

@@ -1,2 +0,0 @@
-export * from '@storybook/web-components';
-export * from './types';

code/frameworks/web-components-webpack5/src/node/index.ts

@@ -1,5 +0,0 @@
-import type { StorybookConfig } from '../types';
-
-export function defineMain(config: StorybookConfig) {
-  return config;
-}

code/frameworks/web-components-webpack5/src/preset.ts

@@ -1,19 +0,0 @@
-import { dirname, join } from 'node:path';
-
-import type { PresetProperty } from 'storybook/internal/types';
-
-const getAbsolutePath = <I extends string>(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'),
-  };
-};

code/frameworks/web-components-webpack5/src/types.ts

@@ -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<TypescriptOptionsBuilder & TypescriptOptionsWebComponents> &
-    StorybookConfigBase['typescript'];
-};
-
-/** The interface for Storybook configuration in `main.ts` files. */
-export type StorybookConfig = Omit<
-  StorybookConfigBase,
-  keyof StorybookConfigWebpack | keyof StorybookConfigFramework
-> &
-  StorybookConfigWebpack &
-  StorybookConfigFramework;

code/frameworks/web-components-webpack5/src/typings.d.ts

@@ -1,2 +0,0 @@
-// will be provided by the webpack define plugin
-declare var NODE_ENV: string | undefined;

code/frameworks/web-components-webpack5/template/cli/.eslintrc.json

@@ -1,5 +0,0 @@
-{
-  "rules": {
-    "import/extensions": "off"
-  }
-}

code/frameworks/web-components-webpack5/template/cli/js/Button.js

@@ -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`
-    <button
-      type="button"
-      class=${['storybook-button', `storybook-button--${size || 'medium'}`, mode].join(' ')}
-      style=${styleMap({ backgroundColor })}
-      @click=${onClick}
-    >
-      ${label}
-    </button>
-  `;
-};

code/frameworks/web-components-webpack5/template/cli/js/Button.stories.js

@@ -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',
-  },
-};

code/frameworks/web-components-webpack5/template/cli/js/Header.js

@@ -1,45 +0,0 @@
-import { html } from 'lit';
-
-import { Button } from './Button';
-import './header.css';
-
-export const Header = ({ user, onLogin, onLogout, onCreateAccount }) => html`
-  <header>
-    <div class="storybook-header">
-      <div>
-        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-          <g fill="none" fillRule="evenodd">
-            <path
-              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-              fill="#FFF"
-            />
-            <path
-              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-              fill="#555AB9"
-            />
-            <path
-              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
-              fill="#91BAF8"
-            />
-          </g>
-        </svg>
-        <h1>Acme</h1>
-      </div>
-      <div>
-        ${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',
-            })}`}
-      </div>
-    </div>
-  </header>
-`;

code/frameworks/web-components-webpack5/template/cli/js/Header.stories.js

@@ -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 = {};

code/frameworks/web-components-webpack5/template/cli/js/Page.js

@@ -1,62 +0,0 @@
-import { html } from 'lit';
-
-import { Header } from './Header';
-import './page.css';
-
-export const Page = ({ user, onLogin, onLogout, onCreateAccount }) => html`
-  <article>
-    ${Header({
-      user,
-      onLogin,
-      onLogout,
-      onCreateAccount,
-    })}
-
-    <section class="storybook-page">
-      <h2>Pages in Storybook</h2>
-      <p>
-        We recommend building UIs with a
-        <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
-          <strong>component-driven</strong> </a
-        >process starting with atomic components and ending with pages.
-      </p>
-      <p>
-        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:
-      </p>
-      <ul>
-        <li>
-          Use a higher-level connected component. Storybook helps you compose such data from the
-          "args" of child component stories
-        </li>
-        <li>
-          Assemble data in the page component from your services. You can mock these services out
-          using Storybook.
-        </li>
-      </ul>
-      <p>
-        Get a guided tutorial on component-driven development at
-        <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
-          Storybook tutorials
-        </a>
-        . Read more in the
-        <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer"> docs </a>
-        .
-      </p>
-      <div class="tip-wrapper">
-        <span class="tip">Tip</span> Adjust the width of the canvas with the
-        <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
-          <g fill="none" fillRule="evenodd">
-            <path
-              d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
-              id="a"
-              fill="#999"
-            />
-          </g>
-        </svg>
-        Viewports addon in the toolbar
-      </div>
-    </section>
-  </article>
-`;

code/frameworks/web-components-webpack5/template/cli/js/Page.stories.js

@@ -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,
-  },
-};

code/frameworks/web-components-webpack5/template/cli/ts-4-9/Button.stories.ts

@@ -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<ButtonProps>;
-
-export default meta;
-type Story = StoryObj<ButtonProps>;
-
-// 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',
-  },
-};

code/frameworks/web-components-webpack5/template/cli/ts-4-9/Button.ts

@@ -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`
-    <button
-      type="button"
-      class=${['storybook-button', `storybook-button--${size || 'medium'}`, mode].join(' ')}
-      style=${styleMap({ backgroundColor })}
-      @click=${onClick}
-    >
-      ${label}
-    </button>
-  `;
-};

code/frameworks/web-components-webpack5/template/cli/ts-4-9/Header.stories.ts

@@ -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<HeaderProps>;
-
-export default meta;
-type Story = StoryObj<HeaderProps>;
-
-export const LoggedIn: Story = {
-  args: {
-    user: {
-      name: 'Jane Doe',
-    },
-  },
-};
-
-export const LoggedOut: Story = {};

code/frameworks/web-components-webpack5/template/cli/ts-4-9/Header.ts

@@ -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`
-  <header>
-    <div class="storybook-header">
-      <div>
-        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-          <g fill="none" fillRule="evenodd">
-            <path
-              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-              fill="#FFF"
-            />
-            <path
-              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-              fill="#555AB9"
-            />
-            <path
-              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
-              fill="#91BAF8"
-            />
-          </g>
-        </svg>
-        <h1>Acme</h1>
-      </div>
-      <div>
-        ${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',
-            })}`}
-      </div>
-    </div>
-  </header>
-`;

code/frameworks/web-components-webpack5/template/cli/ts-4-9/Page.stories.ts

@@ -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<PageProps>;
-
-export default meta;
-type Story = StoryObj<PageProps>;
-
-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,
-  },
-};

code/frameworks/web-components-webpack5/template/cli/ts-4-9/Page.ts

@@ -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`
-  <article>
-    ${Header({
-      user,
-      onLogin,
-      onLogout,
-      onCreateAccount,
-    })}
-
-    <section class="storybook-page">
-      <h2>Pages in Storybook</h2>
-      <p>
-        We recommend building UIs with a
-        <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
-          <strong>component-driven</strong> </a
-        >process starting with atomic components and ending with pages.
-      </p>
-      <p>
-        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:
-      </p>
-      <ul>
-        <li>
-          Use a higher-level connected component. Storybook helps you compose such data from the
-          "args" of child component stories
-        </li>
-        <li>
-          Assemble data in the page component from your services. You can mock these services out
-          using Storybook.
-        </li>
-      </ul>
-      <p>
-        Get a guided tutorial on component-driven development at
-        <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
-          Storybook tutorials
-        </a>
-        . Read more in the
-        <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer"> docs </a>
-        .
-      </p>
-      <div class="tip-wrapper">
-        <span class="tip">Tip</span> Adjust the width of the canvas with the
-        <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
-          <g fill="none" fillRule="evenodd">
-            <path
-              d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
-              id="a"
-              fill="#999"
-            />
-          </g>
-        </svg>
-        Viewports addon in the toolbar
-      </div>
-    </section>
-  </article>
-`;

code/frameworks/web-components-webpack5/tsconfig.json

@@ -1,5 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {},
-  "include": ["src/**/*"]
-}

code/frameworks/web-components-webpack5/vitest.config.ts

@@ -1,10 +0,0 @@
-import { defineConfig, mergeConfig } from 'vitest/config';
-
-import { vitestCommonConfig } from '../../vitest.workspace';
-
-export default mergeConfig(
-  vitestCommonConfig,
-  defineConfig({
-    // Add custom config here
-  })
-);

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`

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 = {
@@ -41,7 +40,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',
@@ -69,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',

code/package.json

@@ -147,7 +147,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",

code/yarn.lock

@@ -7424,7 +7424,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"
@@ -7696,21 +7695,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"

test-storybooks/ember-cli/package.json

@@ -51,8 +51,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"
-    "@storybook/web-components-webpack5": "file:../../code/frameworks/web-components-webpack5"
   },
   "dependencies": {
     "ember-named-blocks-polyfill": "^0.2.3",

test-storybooks/external-docs/package.json

@@ -51,8 +51,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"
-    "@storybook/web-components-webpack5": "file:../../code/frameworks/web-components-webpack5"
   },
   "dependencies": {
     "@storybook/addon-docs": "*",

test-storybooks/portable-stories-kitchen-sink/nextjs/package.json

@@ -54,8 +54,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"
-    "@storybook/web-components-webpack5": "file:../../../code/frameworks/web-components-webpack5"
   },
   "dependencies": {
     "next": "^14.2.0",

test-storybooks/portable-stories-kitchen-sink/react/package.json

@@ -59,7 +59,6 @@
     "@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",
     "playwright": "1.48.1"
   },
   "dependencies": {

test-storybooks/portable-stories-kitchen-sink/svelte/package.json

@@ -56,7 +56,6 @@
     "@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",
     "playwright": "1.48.1"
   },
   "devDependencies": {

test-storybooks/portable-stories-kitchen-sink/vue3/package.json

@@ -57,7 +57,6 @@
     "@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",
     "playwright": "1.48.1"
   },
   "dependencies": {

test-storybooks/server-kitchen-sink/package.json

@@ -54,8 +54,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"
-    "@storybook/web-components-webpack5": "file:../../code/frameworks/web-components-webpack5"
   },
   "devDependencies": {
     "@storybook/addon-a11y": "*",

test-storybooks/standalone-preview/package.json

@@ -47,8 +47,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"
-    "@storybook/web-components-webpack5": "file:../../code/frameworks/web-components-webpack5"
   },
   "devDependencies": {
     "@storybook/addon-docs": "*",