Migrate Storybook from Webpack 5 to Vite builder

docs/storybook/.storybook/main.ts

@@ -1,5 +1,4 @@
-import type { StorybookConfig } from "@storybook/react-webpack5";
-import type { Configuration as WebpackConfig } from "webpack";
+import type { StorybookConfig } from "@storybook/react-vite";
 import path, { dirname } from "node:path";
 import { fileURLToPath } from "node:url";
 
@@ -12,26 +11,24 @@ const config: StorybookConfig = {
     "@vueless/storybook-dark-mode",
     "@storybook/addon-docs",
     "@player-ui/storybook",
-    "@storybook/addon-webpack5-compiler-babel",
   ],
   typescript: {
     reactDocgen: false,
   },
   framework: {
-    name: "@storybook/react-webpack5",
+    name: "@storybook/react-vite",
     options: {},
   },
-  webpackFinal(config: WebpackConfig) {
-    if (config.resolve) {
-      config.resolve.alias = {
-        ...config.resolve.alias,
+  viteFinal(config) {
+    config.resolve = config.resolve || {};
+    config.resolve.alias = {
+      ...config.resolve.alias,
 
-        // storybook + pnpm issue
-        // https://github.com/storybookjs/storybook/discussions/22650#discussioncomment-6414161
-        react: path.resolve(thisDir, "../../../node_modules/react"),
-        "react-dom": path.resolve(thisDir, "../../../node_modules/react-dom"),
-      };
-    }
+      // storybook + pnpm issue
+      // https://github.com/storybookjs/storybook/discussions/22650#discussioncomment-6414161
+      react: path.resolve(thisDir, "../../../node_modules/react"),
+      "react-dom": path.resolve(thisDir, "../../../node_modules/react-dom"),
+    };
     return config;
   },
 };

docs/storybook/.storybook/preview.ts

@@ -1,4 +1,4 @@
-import type { Preview } from "@storybook/react-webpack5";
+import type { Preview } from "@storybook/react-vite";
 import { PlayerDecorator } from "@player-ui/storybook";
 import { ReferenceAssetsPlugin } from "@player-ui/reference-assets-plugin-react";
 import { CommonTypesPlugin } from "@player-ui/common-types-plugin";

docs/storybook/BUILD

@@ -20,10 +20,7 @@ deps = [
     ":node_modules/@player-ui/expression-plugin",
     ":node_modules/@player-ui/player",
     "//:node_modules/typescript",
-    "//:node_modules/@babel/preset-typescript",
-    "//:node_modules/@babel/preset-env",
-    "//:node_modules/@babel/preset-react",
-    "//:node_modules/@storybook/react-webpack5",
+    "//:node_modules/@storybook/react-vite",
     "//:node_modules/@storybook/addon-docs",
     "//:node_modules/@storybook/icons",
     "//:node_modules/@types/react-redux",
@@ -39,18 +36,14 @@ deps = [
     "//:node_modules/esbuild-wasm",
     "//:node_modules/@devtools-ds/table",
     "//:node_modules/dlv",
-    "//:node_modules/ts-loader",
     "//:node_modules/tslib",
-    "//:node_modules/raw-loader",
     "//:node_modules/react",
     "//:node_modules/react-dom",
     "//:node_modules/storybook",
     "//:node_modules/@vitest/mocker",
-    "//:node_modules/@storybook/addon-webpack5-compiler-babel",
     "//:typings",
     "tsconfig.json",
     "package.json",
-    "babel.config.json",
 ]
 
 storybook_bin.storybook(
@@ -64,7 +57,6 @@ storybook_bin.storybook(
         "--output-dir",
         "./storybook",
         "--debug",
-        # "--debug-webpack",  # enable to debug webpack compilation issues
         "--disable-telemetry",
     ],
     chdir = package_name(),

docs/storybook/src/ManagedPlayer.stories.tsx

@@ -1,7 +1,7 @@
 import { ManagedPlayer } from "@player-ui/react";
 import { ReferenceAssetsPlugin } from "@player-ui/reference-assets-plugin-react";
 import { SuspenseSpinner } from "@player-ui/storybook";
-import { Meta, StoryObj } from "@storybook/react-webpack5";
+import { Meta, StoryObj } from "@storybook/react-vite";
 import React from "react";
 import {
     createFlowManager,

docs/storybook/src/Player.stories.tsx

@@ -1,5 +1,5 @@
 import { createDSLStory } from "@player-ui/storybook";
-import { Meta } from "@storybook/react-webpack5";
+import { Meta } from "@storybook/react-vite";
 
 const meta: Meta = {
   title: "React Player",
@@ -8,5 +8,5 @@ const meta: Meta = {
 export default meta;
 
 export const ReactPlayer = createDSLStory(
-  () => import("!!raw-loader!@player-ui/mocks/action/action-basic.tsx"),
+  () => import("@player-ui/mocks/action/action-basic.tsx?raw"),
 );

docs/storybook/src/reference-assets/Action.stories.tsx

@@ -1,6 +1,6 @@
 import { Action } from "@player-ui/reference-assets-plugin-react";
 import { createDSLStory, PlayerStory } from "@player-ui/storybook";
-import type { Meta } from "@storybook/react-webpack5";
+import type { Meta } from "@storybook/react-vite";
 import React from "react";
 
 const meta: Meta<typeof Action> = {
@@ -14,15 +14,15 @@ const meta: Meta<typeof Action> = {
 export default meta;
 
 export const Basic = createDSLStory(
-  () => import("!!raw-loader!@player-ui/mocks/action/action-basic.tsx"),
+  () => import("@player-ui/mocks/action/action-basic.tsx?raw"),
 );
 
 export const Expression = createDSLStory(
-  () => import("!!raw-loader!@player-ui/mocks/action/action-counter.tsx"),
+  () => import("@player-ui/mocks/action/action-counter.tsx?raw"),
 );
 
 export const Navigation = createDSLStory(
-  () => import("!!raw-loader!@player-ui/mocks/action/action-navigation.tsx"),
+  () => import("@player-ui/mocks/action/action-navigation.tsx?raw"),
 );
 
 export const TransitionToEnd = () => (

docs/storybook/src/reference-assets/ChatMessage.stories.tsx

@@ -1,5 +1,5 @@
 import { createDSLStory } from "@player-ui/storybook";
-import { Meta } from "@storybook/react-webpack5";
+import { Meta } from "@storybook/react-vite";
 
 const meta: Meta = {
   title: "Reference Assets/ChatMessage",
@@ -10,6 +10,6 @@ export default meta;
 export const Basic = createDSLStory(
   () =>
     import(
-      "!!raw-loader!@player-ui/mocks/chat-message/chat-message-basic.tsx"
+      "@player-ui/mocks/chat-message/chat-message-basic.tsx?raw"
     ),
 );

docs/storybook/src/reference-assets/ChatUI.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react-webpack5";
+import { Meta } from "@storybook/react-vite";
 import { createDSLStory } from "@player-ui/storybook";
 
 const meta: Meta = {
@@ -8,5 +8,5 @@ const meta: Meta = {
 export default meta;
 
 export const ChatUI = createDSLStory(
-  () => import("!!raw-loader!@player-ui/mocks/chat-message/chat-ui.tsx"),
+  () => import("@player-ui/mocks/chat-message/chat-ui.tsx?raw"),
 );

docs/storybook/src/reference-assets/Choice.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta } from "@storybook/react-webpack5";
+import type { Meta } from "@storybook/react-vite";
 import { createDSLStory } from "@player-ui/storybook";
 import { Choice } from "@player-ui/reference-assets-plugin-react";
 
@@ -13,9 +13,9 @@ const meta: Meta<typeof Choice> = {
 export default meta;
 
 export const Basic = createDSLStory(
-  () => import("!!raw-loader!@player-ui/mocks/choice/choice-basic.tsx"),
+  () => import("@player-ui/mocks/choice/choice-basic.tsx?raw"),
 );
 
 export const Validation = createDSLStory(
-  () => import("!!raw-loader!@player-ui/mocks/choice/choice-validation.tsx"),
+  () => import("@player-ui/mocks/choice/choice-validation.tsx?raw"),
 );

docs/storybook/src/reference-assets/Collection.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta } from "@storybook/react-webpack5";
+import type { Meta } from "@storybook/react-vite";
 import { createDSLStory } from "@player-ui/storybook";
 import { Collection } from "@player-ui/reference-assets-plugin-react";
 
@@ -13,5 +13,5 @@ const meta: Meta<typeof Collection> = {
 export default meta;
 
 export const Basic = createDSLStory(
-  () => import("!!raw-loader!@player-ui/mocks/collection/collection-basic.tsx"),
+  () => import("@player-ui/mocks/collection/collection-basic.tsx?raw"),
 );

docs/storybook/src/reference-assets/Image.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta } from "@storybook/react-webpack5";
+import type { Meta } from "@storybook/react-vite";
 import { createDSLStory } from "@player-ui/storybook";
 import { Image } from "@player-ui/reference-assets-plugin-react";
 
@@ -13,19 +13,19 @@ const meta: Meta<typeof Image> = {
 export default meta;
 
 export const Basic = createDSLStory(
-  () => import("!!raw-loader!@player-ui/mocks/image/image-basic.tsx"),
+  () => import("@player-ui/mocks/image/image-basic.tsx?raw"),
 );
 
 export const Caption = createDSLStory(
-  () => import("!!raw-loader!@player-ui/mocks/image/image-with-caption.tsx"),
+  () => import("@player-ui/mocks/image/image-with-caption.tsx?raw"),
 );
 
 export const Accessibility = createDSLStory(
   () =>
-    import("!!raw-loader!@player-ui/mocks/image/image-with-accessibility.tsx"),
+    import("@player-ui/mocks/image/image-with-accessibility.tsx?raw"),
 );
 
 export const Placeholder = createDSLStory(
   () =>
-    import("!!raw-loader!@player-ui/mocks/image/image-with-placeholder.tsx"),
+    import("@player-ui/mocks/image/image-with-placeholder.tsx?raw"),
 );

docs/storybook/src/reference-assets/Info.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta } from "@storybook/react-webpack5";
+import type { Meta } from "@storybook/react-vite";
 import { createDSLStory } from "@player-ui/storybook";
 import { Info } from "@player-ui/reference-assets-plugin-react";
 
@@ -13,17 +13,17 @@ const meta: Meta<typeof Info> = {
 export default meta;
 
 export const Basic = createDSLStory(
-  () => import("!!raw-loader!@player-ui/mocks/info/info-basic.tsx"),
+  () => import("@player-ui/mocks/info/info-basic.tsx?raw"),
 );
 
 export const DynamicFlow = createDSLStory(
-  () => import("!!raw-loader!@player-ui/mocks/info/info-dynamic-flow.tsx"),
+  () => import("@player-ui/mocks/info/info-dynamic-flow.tsx?raw"),
 );
 
 export const Footer = createDSLStory(
-  () => import("!!raw-loader!@player-ui/mocks/info/info-footer.tsx"),
+  () => import("@player-ui/mocks/info/info-footer.tsx?raw"),
 );
 
 export const ModalFlow = createDSLStory(
-  () => import("!!raw-loader!@player-ui/mocks/info/info-modal-flow.tsx"),
+  () => import("@player-ui/mocks/info/info-modal-flow.tsx?raw"),
 );

docs/storybook/src/reference-assets/Input.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta } from "@storybook/react-webpack5";
+import type { Meta } from "@storybook/react-vite";
 import { createDSLStory } from "@player-ui/storybook";
 import { Input } from "@player-ui/reference-assets-plugin-react";
 
@@ -13,9 +13,9 @@ const meta: Meta<typeof Input> = {
 export default meta;
 
 export const Basic = createDSLStory(
-  () => import("!!raw-loader!@player-ui/mocks/input/input-basic.tsx"),
+  () => import("@player-ui/mocks/input/input-basic.tsx?raw"),
 );
 
 export const Validation = createDSLStory(
-  () => import("!!raw-loader!@player-ui/mocks/input/input-transition.tsx"),
+  () => import("@player-ui/mocks/input/input-transition.tsx?raw"),
 );

docs/storybook/src/reference-assets/Text.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta } from "@storybook/react-webpack5";
+import type { Meta } from "@storybook/react-vite";
 import { createDSLStory } from "@player-ui/storybook";
 import { Text } from "@player-ui/reference-assets-plugin-react";
 
@@ -13,5 +13,5 @@ const meta: Meta<typeof Text> = {
 export default meta;
 
 export const Basic = createDSLStory(
-  () => import("!!raw-loader!@player-ui/mocks/text/text-basic.tsx"),
+  () => import("@player-ui/mocks/text/text-basic.tsx?raw"),
 );

package.json

@@ -40,11 +40,10 @@
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@reduxjs/toolkit": "^1.9.5",
-    "@storybook/addon-docs": "^10.1.4",
-    "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
-    "@storybook/builder-vite": "^10.1.4",
+    "@storybook/addon-docs": "^10.2.7",
+    "@storybook/global": "^5.0.0",
     "@storybook/icons": "^2.0.1",
-    "@storybook/react-webpack5": "^10.1.4",
+    "@storybook/react-vite": "^10.2.7",
     "@swc/core": "^1.3.74",
     "@swc/wasm-web": "^1.3.74",
     "@testing-library/dom": "^10.4.0",
@@ -147,7 +146,7 @@
     "source-map-js": "^1.0.2",
     "starlight-package-managers": "^0.7.0",
     "std-mocks": "^1.0.1",
-    "storybook": "^10.1.4",
+    "storybook": "^10.2.7",
     "stringify-object": "^5.0.0",
     "style-loader": "^3.3.4",
     "tailwind-merge": "^2.2.1",