From e4668c38ebf1d2876c14f8df506f2552305e366c Mon Sep 17 00:00:00 2001
From: storybook-bot <32066757+storybook-bot@users.noreply.github.com>
Date: Tue, 14 May 2024 13:55:39 +0000
Subject: [PATCH 01/24] Update ./docs/versions/next.json for v8.2.0-alpha.0

---
 docs/versions/next.json | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/docs/versions/next.json b/docs/versions/next.json
index 26523a287829..45f2ea7f3c4c 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1,6 @@
-{"version":"8.2.0-alpha.6","info":{"plain":"- Addon-actions: Only log spies with names - [#28091](https://github.com/storybookjs/storybook/pull/28091), thanks @kasperpeulen!\n- Build: Change require/import order, so that import has higher prio if both are specified - [#27730](https://github.com/storybookjs/storybook/pull/27730), thanks @kasperpeulen!\n- CLI: Only log the UpgradeStorybookToSameVersionError but continue the upgrade as normal - [#27217](https://github.com/storybookjs/storybook/pull/27217), thanks @kasperpeulen!\n- Core: Replace ip function with a small helper function to address security concerns - [#27529](https://github.com/storybookjs/storybook/pull/27529), thanks @tony19!\n- Portable Stories: Add tags to composed story - [#27708](https://github.com/storybookjs/storybook/pull/27708), thanks @yannbf!\n- Test: Upgrade deps of @storybook/test - [#27862](https://github.com/storybookjs/storybook/pull/27862), thanks @kasperpeulen!\n- Vite: Fix stats-plugin to normalize file names with posix paths - [#27218](https://github.com/storybookjs/storybook/pull/27218), thanks @AlexAtVista!"}}
+{
+  "version": "8.2.0-alpha.6",
+  "info": {
+    "plain": "- Addon-actions: Only log spies with names - [#28091](https://github.com/storybookjs/storybook/pull/28091), thanks @kasperpeulen!\n- Build: Change require/import order, so that import has higher prio if both are specified - [#27730](https://github.com/storybookjs/storybook/pull/27730), thanks @kasperpeulen!\n- CLI: Only log the UpgradeStorybookToSameVersionError but continue the upgrade as normal - [#27217](https://github.com/storybookjs/storybook/pull/27217), thanks @kasperpeulen!\n- Core: Replace ip function with a small helper function to address security concerns - [#27529](https://github.com/storybookjs/storybook/pull/27529), thanks @tony19!\n- Portable Stories: Add tags to composed story - [#27708](https://github.com/storybookjs/storybook/pull/27708), thanks @yannbf!\n- Test: Upgrade deps of @storybook/test - [#27862](https://github.com/storybookjs/storybook/pull/27862), thanks @kasperpeulen!\n- Vite: Fix stats-plugin to normalize file names with posix paths - [#27218](https://github.com/storybookjs/storybook/pull/27218), thanks @AlexAtVista!"
+  }
+}

From 5d0911c0fb1f2b1fd159226942ee227601e57a3f Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Tue, 14 May 2024 16:00:55 +0200
Subject: [PATCH 02/24] Merge pull request #27105 from
 storybookjs/valentin/nextjs-add-image-typing

Next.js: Add typing for NextImage to main framework options type

(cherry picked from commit 46646d27897758b96af6afbe3259a602f51d16e7)
---
 code/frameworks/nextjs/src/types.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/code/frameworks/nextjs/src/types.ts b/code/frameworks/nextjs/src/types.ts
index 9c7fcd9efd7d..921037eef397 100644
--- a/code/frameworks/nextjs/src/types.ts
+++ b/code/frameworks/nextjs/src/types.ts
@@ -1,13 +1,13 @@
+import type {
+  BuilderOptions,
+  StorybookConfigWebpack,
+  TypescriptOptions as TypescriptOptionsBuilder,
+} from '@storybook/builder-webpack5';
 import type {
   ReactOptions,
   StorybookConfig as StorybookConfigBase,
   TypescriptOptions as TypescriptOptionsReact,
 } from '@storybook/preset-react-webpack';
-import type {
-  StorybookConfigWebpack,
-  BuilderOptions,
-  TypescriptOptions as TypescriptOptionsBuilder,
-} from '@storybook/builder-webpack5';
 import type { CompatibleString } from '@storybook/types';
 import type * as NextImage from 'next/image';
 

From 27698e3685ef399176fbaef962c1fe514b25f840 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Tue, 14 May 2024 16:50:22 +0200
Subject: [PATCH 03/24] Merge pull request #27088 from
 storybookjs/valentin/provide-relaxed-types-for-framework-builder-fields

Types: Fix typing for main.framework/builder fields
(cherry picked from commit 1ae28db81f043e69d2ac5236cdbc24dcbbea271b)
---
 code/lib/types/src/modules/core-common.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts
index 7addf01fcb5e..fa72e2eb3e3d 100644
--- a/code/lib/types/src/modules/core-common.ts
+++ b/code/lib/types/src/modules/core-common.ts
@@ -1,11 +1,11 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import type { FileSystemCache } from 'file-system-cache';
-import type { Options as TelejsonOptions } from 'telejson';
 import type { Router } from 'express';
+import type { FileSystemCache } from 'file-system-cache';
 import type { Server } from 'http';
+import type { Options as TelejsonOptions } from 'telejson';
 import type { PackageJson as PackageJsonFromTypeFest } from 'type-fest';
 
-import type { StoriesEntry, Indexer } from './indexer';
+import type { Indexer, StoriesEntry } from './indexer';
 
 /**
  * ⚠️ This file contains internal WIP types they MUST NOT be exported outside this package for now!

From 8c8b922ab5202aa91ec3e315e8ae09f0c5f15588 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Tue, 14 May 2024 16:04:06 +0200
Subject: [PATCH 04/24] Merge pull request #27093 from
 seanparmelee/raw-conflicts

Next.js: Avoid conflicts with the raw loader

(cherry picked from commit f5fc4020ed8a2f5d4ccdc2e040e9df3916344742)
---
 code/frameworks/nextjs/src/swc/loader.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/frameworks/nextjs/src/swc/loader.ts b/code/frameworks/nextjs/src/swc/loader.ts
index bec334ed64d0..bc5f441fff20 100644
--- a/code/frameworks/nextjs/src/swc/loader.ts
+++ b/code/frameworks/nextjs/src/swc/loader.ts
@@ -1,9 +1,9 @@
-import { getProjectRoot } from '@storybook/core-common';
 import { getVirtualModules } from '@storybook/builder-webpack5';
+import { getProjectRoot } from '@storybook/core-common';
 import type { Options } from '@storybook/types';
 import type { NextConfig } from 'next';
-import path from 'path';
 import loadJsConfig from 'next/dist/build/load-jsconfig';
+import path from 'path';
 import type { Configuration as WebpackConfig } from 'webpack';
 
 export const configureSWCLoader = async (

From e5a24badd249dd65f06a45fca2737297ed438aa9 Mon Sep 17 00:00:00 2001
From: storybook-bot <32066757+storybook-bot@users.noreply.github.com>
Date: Wed, 15 May 2024 09:58:09 +0000
Subject: [PATCH 05/24] Write changelog for 8.1.1 [skip ci]

---
 CHANGELOG.md              | 189 +++++++++++++++++++-------------------
 code/package.json         |   3 +-
 docs/versions/latest.json |   2 +-
 3 files changed, 97 insertions(+), 97 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d157ccd8cd5e..83a6c71a3ace 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -52,102 +52,101 @@ Storybook 8.1 is here with a tone of new features and bug fixes:
 <details>
 <summary>List of all updates</summary>
 
-  - Addon-actions: Fix falsy args printing as object - 22163 - [#26917](https://github.com/storybookjs/storybook/pull/26917), thanks @Fatcat560!
-  - Addon-docs: Fix MDX compilation with `@vitejs/plugin-react-swc` and plugins - [#26837](https://github.com/storybookjs/storybook/pull/26837), thanks @JReinhold!
-  - Addon-docs: Fix `providerImportSource` extension - [#26868](https://github.com/storybookjs/storybook/pull/26868), thanks @bashmish!
-  - Addon-docs: Fix `react-dom/server` imports breaking stories and docs - [#26557](https://github.com/storybookjs/storybook/pull/26557), thanks @JReinhold!
-  - Addon-docs: Support Stencil based display names in source snippets - [#26592](https://github.com/storybookjs/storybook/pull/26592), thanks @yannbf!
-  - Addon-docs: Fix `[Object object]` displayName in some JSX components - [#26566](https://github.com/storybookjs/storybook/pull/26566), thanks @yannbf!
-  - Angular: Add type support for Angular\'s input signals - [#26413](https://github.com/storybookjs/storybook/pull/26413), thanks @valentinpalkovic!
-  - Angular: Add type support for Angular\'s output signals - [#26546](https://github.com/storybookjs/storybook/pull/26546), thanks @valentinpalkovic!
-  - API: Add API access to sidebar renderLabel - [#27099](https://github.com/storybookjs/storybook/pull/27099), thanks @shilman!
-  - Args: Add possibility to mark controls as read-only - [#26577](https://github.com/storybookjs/storybook/pull/26577), thanks @valentinpalkovic!
-  - Automigrations: Fix name of VTA addon - [#26816](https://github.com/storybookjs/storybook/pull/26816), thanks @valentinpalkovic!
-  - Automigrations: Add migration note about new react-docgen default - [#26620](https://github.com/storybookjs/storybook/pull/26620), thanks @valentinpalkovic!
-  - Automigrations: Fix missing support for mts vite config - [#26441](https://github.com/storybookjs/storybook/pull/26441), thanks @drik98!
-  - Automigrations: Improve react-docgen automigration prompt - [#27106](https://github.com/storybookjs/storybook/pull/27106), thanks @valentinpalkovic!
-  - Blocks: Add `of` prop to `Subtitle` - [#22552](https://github.com/storybookjs/storybook/pull/22552), thanks @joaonunomota!
-  - Blocks: Add `of` prop to `Title` - [#23728](https://github.com/storybookjs/storybook/pull/23728), thanks @Sidnioulz!
-  - CLI: Add --config-dir flag to add command - [#26771](https://github.com/storybookjs/storybook/pull/26771), thanks @eric-blue!
-  - CLI: Add --config-dir flag to migrate command - [#26721](https://github.com/storybookjs/storybook/pull/26721), thanks @yannbf!
-  - CLI: Add main.js `docs.autodocs` automigration - [#27089](https://github.com/storybookjs/storybook/pull/27089), thanks @shilman!
-  - CLI: Add Visual Tests addon install auto-migration when upgrading to 8.0.x - [#26766](https://github.com/storybookjs/storybook/pull/26766), thanks @ndelangen!
-  - CLI: Automigrate improve upgrade storybook related packages - [#26497](https://github.com/storybookjs/storybook/pull/26497), thanks @ndelangen!
-  - CLI: Automigrations copy edits - [#26342](https://github.com/storybookjs/storybook/pull/26342), thanks @joevaugh4n!
-  - CLI: Fix eslint configuration for string `extends` - [#27097](https://github.com/storybookjs/storybook/pull/27097), thanks @shilman!
-  - CLI: Improve Yarn berry error parsing - [#26616](https://github.com/storybookjs/storybook/pull/26616), thanks @yannbf!
-  - CLI: Improve `vite-config-file.ts` - [#26375](https://github.com/storybookjs/storybook/pull/26375), thanks @joevaugh4n!
-  - CLI: Instruct the correct auto-migration command - [#26515](https://github.com/storybookjs/storybook/pull/26515), thanks @ndelangen!
-  - CLI: Introduce package manager fallback for initializing Storybook in an empty directory with yarn1 - [#26500](https://github.com/storybookjs/storybook/pull/26500), thanks @valentinpalkovic!
-  - CLI: Throw an error when running upgrade command in incorrect cwd - [#26585](https://github.com/storybookjs/storybook/pull/26585), thanks @yannbf!
-  - Codemods: Escape filename given as argument - [#26430](https://github.com/storybookjs/storybook/pull/26430), thanks @YukiKitagata!
-  - Controls: Add Channels API to search for files in the project root - [#26726](https://github.com/storybookjs/storybook/pull/26726), thanks @valentinpalkovic!
-  - Controls: Added server channel to create a new story - [#26769](https://github.com/storybookjs/storybook/pull/26769), thanks @valentinpalkovic!
-  - Controls: Add UI to create new story files - [#26875](https://github.com/storybookjs/storybook/pull/26875), thanks @valentinpalkovic!
-  - Controls: Fix crashing when docgen extraction partially fails - [#26862](https://github.com/storybookjs/storybook/pull/26862), thanks @yannbf!
-  - Controls: Fix disable condition in ArgControl component - [#26567](https://github.com/storybookjs/storybook/pull/26567), thanks @valentinpalkovic!
-  - Controls: Fix number controls do not reset - [#26372](https://github.com/storybookjs/storybook/pull/26372), thanks @jiyiru!
-  - Core: Add `duration` and `onClick` support to Notification API and improve Notification UI - [#26696](https://github.com/storybookjs/storybook/pull/26696), thanks @ghengeveld!
-  - Core: Drop unneeded `UPDATE_STORY_ARGS` which was for SSv6 - [#25993](https://github.com/storybookjs/storybook/pull/25993), thanks @tmeasday!
-  - Core: Ensure that simultaneous onStoriesChanged don\'t clobber each other - [#26882](https://github.com/storybookjs/storybook/pull/26882), thanks @tmeasday!
-  - Core: Fix filters not being applied in WebKit - [#26949](https://github.com/storybookjs/storybook/pull/26949), thanks @JReinhold!
-  - Core: Fix preloading too early - [#26442](https://github.com/storybookjs/storybook/pull/26442), thanks @ndelangen!
-  - Core: Implement file formatter - [#26809](https://github.com/storybookjs/storybook/pull/26809), thanks @valentinpalkovic!
-  - Core: Optimize clearNotification - [#26415](https://github.com/storybookjs/storybook/pull/26415), thanks @ndelangen!
-  - Core: Save from controls - [#26827](https://github.com/storybookjs/storybook/pull/26827), thanks @ndelangen!
-  - CSF: Allow default export without title or component attributes - [#26516](https://github.com/storybookjs/storybook/pull/26516), thanks @kasperpeulen!
-  - CSF: Fix typings for control and other properties of argTypes - [#26824](https://github.com/storybookjs/storybook/pull/26824), thanks @kasperpeulen!
-  - CSF: Make sure loaders/decorators can be used as array - [#26514](https://github.com/storybookjs/storybook/pull/26514), thanks @kasperpeulen!
-  - Dependencies: Upgrade @storybook/csf to 0.1.5 - [#26958](https://github.com/storybookjs/storybook/pull/26958), thanks @Cherry!
-  - Dependencies: Upgrade `@joshwooding/vite-plugin-react-docgen-typescript` to `0.3.1` - [#26673](https://github.com/storybookjs/storybook/pull/26673), thanks @joshwooding!
-  - Dependencies: Upgrade `ejs` to `3.1.10` - [#27054](https://github.com/storybookjs/storybook/pull/27054), thanks @RiuSalvi!
-  - Dependencies: Bump es-module-lexer - [#26737](https://github.com/storybookjs/storybook/pull/26737), thanks @valentinpalkovic!
-  - Dependencies: Update globby dependency - [#26733](https://github.com/storybookjs/storybook/pull/26733), thanks @valentinpalkovic!
-  - Dependencies: Update postcss-loader in Next.js framework - [#26707](https://github.com/storybookjs/storybook/pull/26707), thanks @valentinpalkovic!
-  - Doc Tools: Signature Type Error Handling - [#26774](https://github.com/storybookjs/storybook/pull/26774), thanks @ethriel3695!
-  - Indexer: Escape special characters in storyImport regex - [#22545](https://github.com/storybookjs/storybook/pull/22545), thanks @VojGin!
-  - Maintenance: Fix performance regressions  - [#26411](https://github.com/storybookjs/storybook/pull/26411), thanks @kasperpeulen!
-  - MDX: Do not transform `http://` links - [#26488](https://github.com/storybookjs/storybook/pull/26488), thanks @JReinhold!
-  - Next.js: Fix Compatibility with <v14.0.4 - [#27082](https://github.com/storybookjs/storybook/pull/27082), thanks @JReinhold!
-  - Next.js: Fix next/font usage on Windows machines - [#26700](https://github.com/storybookjs/storybook/pull/26700), thanks @valentinpalkovic!
-  - Next.js: Move sharp into optional deps - [#26787](https://github.com/storybookjs/storybook/pull/26787), thanks @shuta13!
-  - Next.js: Support v14.2 useParams functionality - [#26874](https://github.com/storybookjs/storybook/pull/26874), thanks @yannbf!
-  - Next.js: Implement next redirect and the RedirectBoundary - [#27050](https://github.com/storybookjs/storybook/pull/27050), thanks @yannbf!
-  - Next.js: Support path aliases when no base url is set - [#26651](https://github.com/storybookjs/storybook/pull/26651), thanks @yannbf!
-  - Node: Safe use of `document` for preview - [#24248](https://github.com/storybookjs/storybook/pull/24248), thanks @DylanPiercey!
-  - Onboarding: Improve UI - [#27074](https://github.com/storybookjs/storybook/pull/27074), thanks @ndelangen!
-  - Portable stories: Introduce experimental Playwright CT API and Support for more renderers - [#26063](https://github.com/storybookjs/storybook/pull/26063), thanks @yannbf!
-  - Portable stories: Make setProjectAnnotations accept multiple types of imports - [#26316](https://github.com/storybookjs/storybook/pull/26316), thanks @yannbf!
-  - Portable Stories: Remove link to missing docs - [#27075](https://github.com/storybookjs/storybook/pull/27075), thanks @JReinhold!
-  - Portable Stories: Warn when rendering stories without cleaning up first - [#27008](https://github.com/storybookjs/storybook/pull/27008), thanks @JReinhold!
-  - React-Docgen: Make sure to be able to handle empty unions - [#26639](https://github.com/storybookjs/storybook/pull/26639), thanks @kasperpeulen!
-  - React: Support v19 betas in peer dependencies - [#26960](https://github.com/storybookjs/storybook/pull/26960), thanks @JReinhold!
-  - React: Support v19 in `react-dom-shim` - [#26898](https://github.com/storybookjs/storybook/pull/26898), thanks @Tobbe!
-  - Tags: Add project tags, negation, `dev`/`autodocs`/`test` system tags - [#26634](https://github.com/storybookjs/storybook/pull/26634), thanks @shilman!
-  - Tags: Fix missing default tags if no `preview.js` - [#27098](https://github.com/storybookjs/storybook/pull/27098), thanks @shilman!
-  - Test: Add @storybook/test as dev dependency - [#26458](https://github.com/storybookjs/storybook/pull/26458), thanks @arnabsen!
-  - Test: Make spies reactive so that they can be logged by addon-actions - [#26740](https://github.com/storybookjs/storybook/pull/26740), thanks @kasperpeulen!
-  - Test: Remove chai as dependency of @storybook/test - [#26852](https://github.com/storybookjs/storybook/pull/26852), thanks @kasperpeulen!
-  - Test: Support module mocking with conditional subpath imports in `package.json`  - [#26688](https://github.com/storybookjs/storybook/pull/26688), thanks @kasperpeulen!
-  - Theming: Update emotion dependencies - [#26623](https://github.com/storybookjs/storybook/pull/26623), thanks @SimenB!
-  - Typescript: Add types for `experimental-playwright` entries without `type:bundler` - [#27107](https://github.com/storybookjs/storybook/pull/27107), thanks @ndelangen!
-  - UI: Add key property to list children in Highlight component - [#26471](https://github.com/storybookjs/storybook/pull/26471), thanks @valentinpalkovic!
-  - UI: Fix not re-rendering tabs on state change - [#26899](https://github.com/storybookjs/storybook/pull/26899), thanks @lifeiscontent!
-  - UI: Fix panel layout resizing do not apply when done too fast - [#26460](https://github.com/storybookjs/storybook/pull/26460), thanks @jorge-ji!
-  - UI: Fix search result color contrast - [#26287](https://github.com/storybookjs/storybook/pull/26287), thanks @winchesHe!
-  - UI: Fix sidebar search hanging when selecting a story in touch mode - [#26807](https://github.com/storybookjs/storybook/pull/26807), thanks @JReinhold!
-  - UI: Fix theming of elements inside bars - [#26527](https://github.com/storybookjs/storybook/pull/26527), thanks @valentinpalkovic!
-  - UI: Improve empty state of addon panel - [#26481](https://github.com/storybookjs/storybook/pull/26481), thanks @yannbf!
-  - UI: Replace the icon prop in the Manager API - [#26477](https://github.com/storybookjs/storybook/pull/26477), thanks @cdedreuille!
-  - Viewport: Fix missing style - [#26530](https://github.com/storybookjs/storybook/pull/26530), thanks @jpzwarte!
-  - Vite: Merge assetsInclude property with Storybook default values - [#26860](https://github.com/storybookjs/storybook/pull/26860), thanks @yuemori!
-  - Vue: Disable controls for events, slots, and expose - [#26751](https://github.com/storybookjs/storybook/pull/26751), thanks @shilman!
-  - Webpack: Bump webpack-dev-middleware to patch high security issue - [#26655](https://github.com/storybookjs/storybook/pull/26655), thanks @jwilliams-met!
-  - Webpack: Fix sourcemap generation in webpack react-docgen-loader - [#26676](https://github.com/storybookjs/storybook/pull/26676), thanks @valentinpalkovic!
-  - Webpack: Hide runtime errors - [#23175](https://github.com/storybookjs/storybook/pull/23175), thanks @donaldpipowitch!
+- Addon-actions: Fix falsy args printing as object - 22163 - [#26917](https://github.com/storybookjs/storybook/pull/26917), thanks @Fatcat560!
+- Addon-docs: Fix MDX compilation with `@vitejs/plugin-react-swc` and plugins - [#26837](https://github.com/storybookjs/storybook/pull/26837), thanks @JReinhold!
+- Addon-docs: Fix `providerImportSource` extension - [#26868](https://github.com/storybookjs/storybook/pull/26868), thanks @bashmish!
+- Addon-docs: Fix `react-dom/server` imports breaking stories and docs - [#26557](https://github.com/storybookjs/storybook/pull/26557), thanks @JReinhold!
+- Addon-docs: Support Stencil based display names in source snippets - [#26592](https://github.com/storybookjs/storybook/pull/26592), thanks @yannbf!
+- Addon-docs: Fix `[Object object]` displayName in some JSX components - [#26566](https://github.com/storybookjs/storybook/pull/26566), thanks @yannbf!
+- Angular: Add type support for Angular\'s input signals - [#26413](https://github.com/storybookjs/storybook/pull/26413), thanks @valentinpalkovic!
+- Angular: Add type support for Angular\'s output signals - [#26546](https://github.com/storybookjs/storybook/pull/26546), thanks @valentinpalkovic!
+- API: Add API access to sidebar renderLabel - [#27099](https://github.com/storybookjs/storybook/pull/27099), thanks @shilman!
+- Args: Add possibility to mark controls as read-only - [#26577](https://github.com/storybookjs/storybook/pull/26577), thanks @valentinpalkovic!
+- Automigrations: Fix name of VTA addon - [#26816](https://github.com/storybookjs/storybook/pull/26816), thanks @valentinpalkovic!
+- Automigrations: Add migration note about new react-docgen default - [#26620](https://github.com/storybookjs/storybook/pull/26620), thanks @valentinpalkovic!
+- Automigrations: Fix missing support for mts vite config - [#26441](https://github.com/storybookjs/storybook/pull/26441), thanks @drik98!
+- Automigrations: Improve react-docgen automigration prompt - [#27106](https://github.com/storybookjs/storybook/pull/27106), thanks @valentinpalkovic!
+- Blocks: Add `of` prop to `Subtitle` - [#22552](https://github.com/storybookjs/storybook/pull/22552), thanks @joaonunomota!
+- Blocks: Add `of` prop to `Title` - [#23728](https://github.com/storybookjs/storybook/pull/23728), thanks @Sidnioulz!
+- CLI: Add --config-dir flag to add command - [#26771](https://github.com/storybookjs/storybook/pull/26771), thanks @eric-blue!
+- CLI: Add --config-dir flag to migrate command - [#26721](https://github.com/storybookjs/storybook/pull/26721), thanks @yannbf!
+- CLI: Add main.js `docs.autodocs` automigration - [#27089](https://github.com/storybookjs/storybook/pull/27089), thanks @shilman!
+- CLI: Add Visual Tests addon install auto-migration when upgrading to 8.0.x - [#26766](https://github.com/storybookjs/storybook/pull/26766), thanks @ndelangen!
+- CLI: Automigrate improve upgrade storybook related packages - [#26497](https://github.com/storybookjs/storybook/pull/26497), thanks @ndelangen!
+- CLI: Automigrations copy edits - [#26342](https://github.com/storybookjs/storybook/pull/26342), thanks @joevaugh4n!
+- CLI: Fix eslint configuration for string `extends` - [#27097](https://github.com/storybookjs/storybook/pull/27097), thanks @shilman!
+- CLI: Improve Yarn berry error parsing - [#26616](https://github.com/storybookjs/storybook/pull/26616), thanks @yannbf!
+- CLI: Improve `vite-config-file.ts` - [#26375](https://github.com/storybookjs/storybook/pull/26375), thanks @joevaugh4n!
+- CLI: Instruct the correct auto-migration command - [#26515](https://github.com/storybookjs/storybook/pull/26515), thanks @ndelangen!
+- CLI: Introduce package manager fallback for initializing Storybook in an empty directory with yarn1 - [#26500](https://github.com/storybookjs/storybook/pull/26500), thanks @valentinpalkovic!
+- CLI: Throw an error when running upgrade command in incorrect cwd - [#26585](https://github.com/storybookjs/storybook/pull/26585), thanks @yannbf!
+- Codemods: Escape filename given as argument - [#26430](https://github.com/storybookjs/storybook/pull/26430), thanks @YukiKitagata!
+- Controls: Add Channels API to search for files in the project root - [#26726](https://github.com/storybookjs/storybook/pull/26726), thanks @valentinpalkovic!
+- Controls: Added server channel to create a new story - [#26769](https://github.com/storybookjs/storybook/pull/26769), thanks @valentinpalkovic!
+- Controls: Add UI to create new story files - [#26875](https://github.com/storybookjs/storybook/pull/26875), thanks @valentinpalkovic!
+- Controls: Fix crashing when docgen extraction partially fails - [#26862](https://github.com/storybookjs/storybook/pull/26862), thanks @yannbf!
+- Controls: Fix disable condition in ArgControl component - [#26567](https://github.com/storybookjs/storybook/pull/26567), thanks @valentinpalkovic!
+- Controls: Fix number controls do not reset - [#26372](https://github.com/storybookjs/storybook/pull/26372), thanks @jiyiru!
+- Core: Add `duration` and `onClick` support to Notification API and improve Notification UI - [#26696](https://github.com/storybookjs/storybook/pull/26696), thanks @ghengeveld!
+- Core: Drop unneeded `UPDATE_STORY_ARGS` which was for SSv6 - [#25993](https://github.com/storybookjs/storybook/pull/25993), thanks @tmeasday!
+- Core: Ensure that simultaneous onStoriesChanged don\'t clobber each other - [#26882](https://github.com/storybookjs/storybook/pull/26882), thanks @tmeasday!
+- Core: Fix filters not being applied in WebKit - [#26949](https://github.com/storybookjs/storybook/pull/26949), thanks @JReinhold!
+- Core: Fix preloading too early - [#26442](https://github.com/storybookjs/storybook/pull/26442), thanks @ndelangen!
+- Core: Implement file formatter - [#26809](https://github.com/storybookjs/storybook/pull/26809), thanks @valentinpalkovic!
+- Core: Optimize clearNotification - [#26415](https://github.com/storybookjs/storybook/pull/26415), thanks @ndelangen!
+- Core: Save from controls - [#26827](https://github.com/storybookjs/storybook/pull/26827), thanks @ndelangen!
+- CSF: Allow default export without title or component attributes - [#26516](https://github.com/storybookjs/storybook/pull/26516), thanks @kasperpeulen!
+- CSF: Fix typings for control and other properties of argTypes - [#26824](https://github.com/storybookjs/storybook/pull/26824), thanks @kasperpeulen!
+- CSF: Make sure loaders/decorators can be used as array - [#26514](https://github.com/storybookjs/storybook/pull/26514), thanks @kasperpeulen!
+- Dependencies: Upgrade @storybook/csf to 0.1.5 - [#26958](https://github.com/storybookjs/storybook/pull/26958), thanks @Cherry!
+- Dependencies: Upgrade `@joshwooding/vite-plugin-react-docgen-typescript` to `0.3.1` - [#26673](https://github.com/storybookjs/storybook/pull/26673), thanks @joshwooding!
+- Dependencies: Upgrade `ejs` to `3.1.10` - [#27054](https://github.com/storybookjs/storybook/pull/27054), thanks @RiuSalvi!
+- Dependencies: Bump es-module-lexer - [#26737](https://github.com/storybookjs/storybook/pull/26737), thanks @valentinpalkovic!
+- Dependencies: Update globby dependency - [#26733](https://github.com/storybookjs/storybook/pull/26733), thanks @valentinpalkovic!
+- Dependencies: Update postcss-loader in Next.js framework - [#26707](https://github.com/storybookjs/storybook/pull/26707), thanks @valentinpalkovic!
+- Doc Tools: Signature Type Error Handling - [#26774](https://github.com/storybookjs/storybook/pull/26774), thanks @ethriel3695!
+- Indexer: Escape special characters in storyImport regex - [#22545](https://github.com/storybookjs/storybook/pull/22545), thanks @VojGin!
+- Maintenance: Fix performance regressions - [#26411](https://github.com/storybookjs/storybook/pull/26411), thanks @kasperpeulen!
+- MDX: Do not transform `http://` links - [#26488](https://github.com/storybookjs/storybook/pull/26488), thanks @JReinhold!
+- Next.js: Fix Compatibility with <v14.0.4 - [#27082](https://github.com/storybookjs/storybook/pull/27082), thanks @JReinhold!
+- Next.js: Fix next/font usage on Windows machines - [#26700](https://github.com/storybookjs/storybook/pull/26700), thanks @valentinpalkovic!
+- Next.js: Move sharp into optional deps - [#26787](https://github.com/storybookjs/storybook/pull/26787), thanks @shuta13!
+- Next.js: Support v14.2 useParams functionality - [#26874](https://github.com/storybookjs/storybook/pull/26874), thanks @yannbf!
+- Next.js: Implement next redirect and the RedirectBoundary - [#27050](https://github.com/storybookjs/storybook/pull/27050), thanks @yannbf!
+- Next.js: Support path aliases when no base url is set - [#26651](https://github.com/storybookjs/storybook/pull/26651), thanks @yannbf!
+- Node: Safe use of `document` for preview - [#24248](https://github.com/storybookjs/storybook/pull/24248), thanks @DylanPiercey!
+- Onboarding: Improve UI - [#27074](https://github.com/storybookjs/storybook/pull/27074), thanks @ndelangen!
+- Portable stories: Introduce experimental Playwright CT API and Support for more renderers - [#26063](https://github.com/storybookjs/storybook/pull/26063), thanks @yannbf!
+- Portable stories: Make setProjectAnnotations accept multiple types of imports - [#26316](https://github.com/storybookjs/storybook/pull/26316), thanks @yannbf!
+- Portable Stories: Remove link to missing docs - [#27075](https://github.com/storybookjs/storybook/pull/27075), thanks @JReinhold!
+- Portable Stories: Warn when rendering stories without cleaning up first - [#27008](https://github.com/storybookjs/storybook/pull/27008), thanks @JReinhold!
+- React-Docgen: Make sure to be able to handle empty unions - [#26639](https://github.com/storybookjs/storybook/pull/26639), thanks @kasperpeulen!
+- React: Support v19 betas in peer dependencies - [#26960](https://github.com/storybookjs/storybook/pull/26960), thanks @JReinhold!
+- React: Support v19 in `react-dom-shim` - [#26898](https://github.com/storybookjs/storybook/pull/26898), thanks @Tobbe!
+- Tags: Add project tags, negation, `dev`/`autodocs`/`test` system tags - [#26634](https://github.com/storybookjs/storybook/pull/26634), thanks @shilman!
+- Tags: Fix missing default tags if no `preview.js` - [#27098](https://github.com/storybookjs/storybook/pull/27098), thanks @shilman!
+- Test: Add @storybook/test as dev dependency - [#26458](https://github.com/storybookjs/storybook/pull/26458), thanks @arnabsen!
+- Test: Make spies reactive so that they can be logged by addon-actions - [#26740](https://github.com/storybookjs/storybook/pull/26740), thanks @kasperpeulen!
+- Test: Remove chai as dependency of @storybook/test - [#26852](https://github.com/storybookjs/storybook/pull/26852), thanks @kasperpeulen!
+- Test: Support module mocking with conditional subpath imports in `package.json` - [#26688](https://github.com/storybookjs/storybook/pull/26688), thanks @kasperpeulen!
+- Theming: Update emotion dependencies - [#26623](https://github.com/storybookjs/storybook/pull/26623), thanks @SimenB!
+- Typescript: Add types for `experimental-playwright` entries without `type:bundler` - [#27107](https://github.com/storybookjs/storybook/pull/27107), thanks @ndelangen!
+- UI: Add key property to list children in Highlight component - [#26471](https://github.com/storybookjs/storybook/pull/26471), thanks @valentinpalkovic!
+- UI: Fix not re-rendering tabs on state change - [#26899](https://github.com/storybookjs/storybook/pull/26899), thanks @lifeiscontent!
+- UI: Fix panel layout resizing do not apply when done too fast - [#26460](https://github.com/storybookjs/storybook/pull/26460), thanks @jorge-ji!
+- UI: Fix search result color contrast - [#26287](https://github.com/storybookjs/storybook/pull/26287), thanks @winchesHe!
+- UI: Fix sidebar search hanging when selecting a story in touch mode - [#26807](https://github.com/storybookjs/storybook/pull/26807), thanks @JReinhold!
+- UI: Fix theming of elements inside bars - [#26527](https://github.com/storybookjs/storybook/pull/26527), thanks @valentinpalkovic!
+- UI: Improve empty state of addon panel - [#26481](https://github.com/storybookjs/storybook/pull/26481), thanks @yannbf!
+- UI: Replace the icon prop in the Manager API - [#26477](https://github.com/storybookjs/storybook/pull/26477), thanks @cdedreuille!
+- Viewport: Fix missing style - [#26530](https://github.com/storybookjs/storybook/pull/26530), thanks @jpzwarte!
+- Vite: Merge assetsInclude property with Storybook default values - [#26860](https://github.com/storybookjs/storybook/pull/26860), thanks @yuemori!
+- Vue: Disable controls for events, slots, and expose - [#26751](https://github.com/storybookjs/storybook/pull/26751), thanks @shilman!
+- Webpack: Bump webpack-dev-middleware to patch high security issue - [#26655](https://github.com/storybookjs/storybook/pull/26655), thanks @jwilliams-met!
+- Webpack: Fix sourcemap generation in webpack react-docgen-loader - [#26676](https://github.com/storybookjs/storybook/pull/26676), thanks @valentinpalkovic!
+- Webpack: Hide runtime errors - [#23175](https://github.com/storybookjs/storybook/pull/23175), thanks @donaldpipowitch!
 </details>
 
-
 ## 8.0.10
 
 - MDX: Don't transform `http://` links - [#26488](https://github.com/storybookjs/storybook/pull/26488), thanks @JReinhold!
@@ -217,7 +216,7 @@ Storybook 8.1 is here with a tone of new features and bug fixes:
 - Controls: Fix type summary when table.type unset - [#26283](https://github.com/storybookjs/storybook/pull/26283), thanks @shilman!
 - Core: Fix addon bundling script - [#26145](https://github.com/storybookjs/storybook/pull/26145), thanks @ndelangen!
 - Core: Fix fail to load `main.ts` error message - [#26035](https://github.com/storybookjs/storybook/pull/26035), thanks @ndelangen!
-- Maintenance: Fix performance regressions  - [#26411](https://github.com/storybookjs/storybook/pull/26411), thanks @kasperpeulen!
+- Maintenance: Fix performance regressions - [#26411](https://github.com/storybookjs/storybook/pull/26411), thanks @kasperpeulen!
 
 ## 8.0.0
 
diff --git a/code/package.json b/code/package.json
index e9414600048a..c5f6f967cd86 100644
--- a/code/package.json
+++ b/code/package.json
@@ -297,5 +297,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.1.1"
 }
diff --git a/docs/versions/latest.json b/docs/versions/latest.json
index f2b7dba133dd..eef9cd9b7aa8 100644
--- a/docs/versions/latest.json
+++ b/docs/versions/latest.json
@@ -1 +1 @@
-{"version":"8.1.0","info":{"plain":"- Automigration: Improve react-docgen automigration prompt - [#27106](https://github.com/storybookjs/storybook/pull/27106), thanks @valentinpalkovic!\n- Typescript: Add types for `experimental-playwright` entries without `type:bundler` - [#27107](https://github.com/storybookjs/storybook/pull/27107), thanks @ndelangen!"}}
+{"version":"8.1.1","info":{"plain":"- Docgen: Only add react-docgen info when a component is defined in the file - [#26967](https://github.com/storybookjs/storybook/pull/26967), thanks @glenjamin!\n- Docs: Fix MDX Stories block tag-filtering behavior - [#27144](https://github.com/storybookjs/storybook/pull/27144), thanks @shilman!\n- Docs: Fix Subtitle block when no `of` prop passed - [#27147](https://github.com/storybookjs/storybook/pull/27147), thanks @JReinhold!\n- Next.js: Add typing for NextImage to main framework options type - [#27105](https://github.com/storybookjs/storybook/pull/27105), thanks @valentinpalkovic!\n- Next.js: Avoid conflicts with the raw loader - [#27093](https://github.com/storybookjs/storybook/pull/27093), thanks @seanparmelee!\n- Types: Fix typing for main.framework/builder fields - [#27088](https://github.com/storybookjs/storybook/pull/27088), thanks @valentinpalkovic!"}}

From 9d2c70702ca3077cd34464d23bdd60d6a304697b Mon Sep 17 00:00:00 2001
From: storybook-bot <32066757+storybook-bot@users.noreply.github.com>
Date: Wed, 15 May 2024 10:59:27 +0000
Subject: [PATCH 06/24] Bump version from "8.1.0" to "8.1.1" [skip ci]

---
 code/package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/code/package.json b/code/package.json
index c5f6f967cd86..e9414600048a 100644
--- a/code/package.json
+++ b/code/package.json
@@ -297,6 +297,5 @@
         "Dependency Upgrades"
       ]
     ]
-  },
-  "deferredNextVersion": "8.1.1"
+  }
 }

From 400ce132815c935f119a281546abbafca8d2b2cd Mon Sep 17 00:00:00 2001
From: Lars Rickert <lars.rickert@mail.schwarz>
Date: Thu, 16 May 2024 09:37:54 +0200
Subject: [PATCH 07/24] fix: remove unnecessary "<template>" tag for default
 slot without bindings

---
 .../vue3/src/docs/sourceDecorator.ts          | 29 +++++++++++--------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/code/renderers/vue3/src/docs/sourceDecorator.ts b/code/renderers/vue3/src/docs/sourceDecorator.ts
index 525cfbbfd281..8f8e0d505002 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.ts
@@ -2,29 +2,29 @@
 import { addons } from '@storybook/preview-api';
 import type { ArgTypes, Args, StoryContext } from '@storybook/types';
 
-import { SourceType, SNIPPET_RENDERED } from '@storybook/docs-tools';
+import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
 
 import type {
-  ElementNode,
   AttributeNode,
   DirectiveNode,
-  TextNode,
+  ElementNode,
   InterpolationNode,
   TemplateChildNode,
+  TextNode,
 } from '@vue/compiler-core';
 import { baseParse } from '@vue/compiler-core';
+import kebabCase from 'lodash/kebabCase';
 import type { ConcreteComponent, FunctionalComponent, VNode } from 'vue';
 import { h, isVNode, watch } from 'vue';
-import kebabCase from 'lodash/kebabCase';
+import type { VueRenderer } from '../types';
 import {
   attributeSource,
+  evalExp,
+  generateExpression,
   htmlEventAttributeToVueEventAttribute,
   omitEvent,
-  evalExp,
   replaceValueWithRef,
-  generateExpression,
 } from './utils';
-import type { VueRenderer } from '../types';
 
 /**
  * Check if the sourcecode should be generated.
@@ -101,7 +101,7 @@ function mapSlots(
     const slot = slotsArgs[key];
     let slotContent = '';
 
-    const scropedArgs = slots
+    const scopedArgs = slots
       .find((s) => s.name === key && s.scoped)
       ?.bindings?.map((b) => b.name)
       .join(',');
@@ -116,8 +116,13 @@ function mapSlots(
       slotContent = JSON.stringify(slot);
     }
 
-    const bindingsString = scropedArgs ? `="{${scropedArgs}}"` : '';
-    slotContent = slot ? `<template #${key}${bindingsString}>${slotContent}</template>` : ``;
+    const bindingsString = scopedArgs ? `="{${scopedArgs}}"` : '';
+
+    // do not add unnecessary "<template #default>" tag since the default slot content without bindings
+    // can be put directly into the slot without need of "<template #default>"
+    if (slot && (key !== 'default' || bindingsString)) {
+      slotContent = slot ? `<template #${key}${bindingsString}>${slotContent}</template>` : ``;
+    }
 
     return {
       type: 2,
@@ -310,10 +315,10 @@ export function generateSource(context: StoryContext<VueRenderer>) {
 }
 // export local function for testing purpose
 export {
+  attributeSource,
   generateScriptSetup,
   getTemplateComponents as getComponentsFromRenderFn,
   getComponents as getComponentsFromTemplate,
-  mapAttributesAndDirectives,
-  attributeSource,
   htmlEventAttributeToVueEventAttribute,
+  mapAttributesAndDirectives,
 };

From b92adaac2e5c99ca194e6339c31ae246640e00f1 Mon Sep 17 00:00:00 2001
From: Lars Rickert <lars.rickert@mail.schwarz>
Date: Thu, 16 May 2024 10:29:04 +0200
Subject: [PATCH 08/24] update formatting

---
 .../vue3/src/docs/sourceDecorator.ts          | 35 +++++++------------
 code/renderers/vue3/src/docs/utils.ts         | 10 +++---
 2 files changed, 17 insertions(+), 28 deletions(-)

diff --git a/code/renderers/vue3/src/docs/sourceDecorator.ts b/code/renderers/vue3/src/docs/sourceDecorator.ts
index 8f8e0d505002..90c18c008ea1 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.ts
@@ -1,9 +1,7 @@
 /* eslint-disable no-underscore-dangle */
+import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
 import { addons } from '@storybook/preview-api';
 import type { ArgTypes, Args, StoryContext } from '@storybook/types';
-
-import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
-
 import type {
   AttributeNode,
   DirectiveNode,
@@ -27,11 +25,11 @@ import {
 } from './utils';
 
 /**
- * Check if the sourcecode should be generated.
+ * Checks if the source code should be generated for the given Story context.
  *
  * @param context StoryContext
  */
-const skipSourceRender = (context: StoryContext<VueRenderer>) => {
+const skipSourceRender = (context: StoryContext<VueRenderer>): boolean => {
   const sourceParams = context?.parameters.docs?.source;
   const isArgsStory = context?.parameters.__isArgsStory;
   const isDocsViewMode = context?.viewMode === 'docs';
@@ -70,6 +68,7 @@ export function generateAttributesSource(
     })
     .join(' ');
 }
+
 /**
  * map attributes and directives
  * @param props
@@ -88,15 +87,15 @@ function mapAttributesAndDirectives(props: Args) {
       }) as unknown as AttributeNode
   );
 }
+
 /**
- *  map slots
- * @param slotsArgs
+ * Maps all slots to the source code for the given slot.
  */
 function mapSlots(
   slotsArgs: Args,
   generateComponentSource: any,
   slots: { name: string; scoped?: boolean; bindings?: { name: string }[] }[]
-): TextNode[] {
+): string[] {
   return Object.keys(slotsArgs).map((key) => {
     const slot = slotsArgs[key];
     let slotContent = '';
@@ -115,6 +114,7 @@ function mapSlots(
     } else if (typeof slot === 'object' && !isVNode(slot)) {
       slotContent = JSON.stringify(slot);
     }
+    // TODO: handle other cases (array, object, html,etc)
 
     const bindingsString = scopedArgs ? `="{${scopedArgs}}"` : '';
 
@@ -124,17 +124,8 @@ function mapSlots(
       slotContent = slot ? `<template #${key}${bindingsString}>${slotContent}</template>` : ``;
     }
 
-    return {
-      type: 2,
-      content: slotContent,
-      loc: {
-        source: slotContent,
-        start: { offset: 0, line: 1, column: 0 },
-        end: { offset: 0, line: 1, column: 0 },
-      },
-    };
+    return slotContent;
   });
-  // TODO: handle other cases (array, object, html,etc)
 }
 /**
  *
@@ -186,14 +177,13 @@ function getComponents(template: string): (TemplateChildNode | VNode)[] {
 }
 
 /**
- * Generate a vue3 template.
+ * Generates the source code for the "<template>" section of a Vue 3 component.
  *
  * @param component Component
  * @param args Args
  * @param argTypes ArgTypes
  * @param slotProp Prop used to simulate a slot
  */
-
 export function generateTemplateSource(
   componentOrNodes: (ConcreteComponent | TemplateChildNode)[] | TemplateChildNode | VNode,
   { args, argTypes }: { args: Args; argTypes: ArgTypes },
@@ -250,9 +240,7 @@ export function generateTemplateSource(
       const childSources: string = children
         ? typeof children === 'string'
           ? children
-          : mapSlots(slotArgs as Args, generateComponentSource, componentSlots ?? [])
-              .map((child) => child.content)
-              .join('')
+          : mapSlots(slotArgs, generateComponentSource, componentSlots ?? []).join('')
         : '';
       const name =
         typeof type === 'string'
@@ -313,6 +301,7 @@ export function generateSource(context: StoryContext<VueRenderer>) {
   }
   return null;
 }
+
 // export local function for testing purpose
 export {
   attributeSource,
diff --git a/code/renderers/vue3/src/docs/utils.ts b/code/renderers/vue3/src/docs/utils.ts
index b4e502952dfd..de5276a02b3a 100644
--- a/code/renderers/vue3/src/docs/utils.ts
+++ b/code/renderers/vue3/src/docs/utils.ts
@@ -80,12 +80,12 @@ function generateExpression(slot: FunctionalComponent): string {
 }
 
 export {
-  omitEvent,
-  displayObject,
-  htmlEventAttributeToVueEventAttribute,
-  directiveSource,
   attributeSource,
+  directiveSource,
+  displayObject,
   evalExp,
-  replaceValueWithRef,
   generateExpression,
+  htmlEventAttributeToVueEventAttribute,
+  omitEvent,
+  replaceValueWithRef,
 };

From 36809133f19a4fc44eec702ae8cf91835e938482 Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Sat, 18 May 2024 13:18:27 +0200
Subject: [PATCH 09/24] feat(vue): improve generated code snippets

---
 .../src/docs/source-code-generator.test.ts    | 124 ++++++++
 .../vue3/src/docs/source-code-generator.ts    | 301 ++++++++++++++++++
 code/renderers/vue3/src/entry-preview-docs.ts |  14 +-
 3 files changed, 436 insertions(+), 3 deletions(-)
 create mode 100644 code/renderers/vue3/src/docs/source-code-generator.test.ts
 create mode 100644 code/renderers/vue3/src/docs/source-code-generator.ts

diff --git a/code/renderers/vue3/src/docs/source-code-generator.test.ts b/code/renderers/vue3/src/docs/source-code-generator.test.ts
new file mode 100644
index 000000000000..c41e61b2238c
--- /dev/null
+++ b/code/renderers/vue3/src/docs/source-code-generator.test.ts
@@ -0,0 +1,124 @@
+import { expect, test } from 'vitest';
+import { h } from 'vue';
+import {
+  extractSlotNames,
+  generatePropsSourceCode,
+  generateSlotSourceCode,
+} from './source-code-generator';
+
+test('should generate source code for props', () => {
+  const slots = ['default', 'testSlot'];
+
+  const code = generatePropsSourceCode(
+    {
+      a: 'foo',
+      b: '"I am double quoted"',
+      c: 42,
+      d: true,
+      e: false,
+      f: [1, 2, 3],
+      g: {
+        g1: 'foo',
+        b2: 42,
+      },
+      h: undefined,
+      i: null,
+      j: '',
+      k: BigInt(9007199254740991),
+      l: Symbol(),
+      m: Symbol('foo'),
+      default: 'default slot',
+      testSlot: 'test slot',
+    },
+    slots
+  );
+
+  expect(code).toBe(
+    `a="foo" b='"I am double quoted"' :c="42" d :e="false" :f="[1,2,3]" :g="{'g1':'foo','b2':42}" :k="BigInt(9007199254740991)" :l="Symbol()" :m="Symbol('foo')"`
+  );
+});
+
+test('should generate source code for slots', () => {
+  // slot code generator should support primitive values (string, number etc.)
+  // but also VNodes (e.g. created using h()) so custom Vue components can also be used
+  // inside slots with proper generated code
+
+  const slots = {
+    default: 'default content',
+    a: 'a content',
+    b: 42,
+    c: true,
+    // single VNode without props
+    d: h('div', 'd content'),
+    // VNode with props and single child
+    e: h('div', { style: 'color:red' }, 'e content'),
+    // VNode with props and single child returned as getter
+    f: h('div', { style: 'color:red' }, () => 'f content'),
+    // VNode with multiple children
+    g: h('div', { style: 'color:red' }, [
+      'child 1',
+      h('span', { style: 'color:green' }, 'child 2'),
+    ]),
+    // VNode multiple children but returned as getter
+    h: h('div', { style: 'color:red' }, () => [
+      'child 1',
+      h('span', { style: 'color:green' }, 'child 2'),
+    ]),
+    // VNode with multiple and nested children
+    i: h('div', { style: 'color:red' }, [
+      'child 1',
+      h('span', { style: 'color:green' }, ['nested child 1', h('p', 'nested child 2')]),
+    ]),
+    j: ['child 1', 'child 2'],
+    k: null,
+    l: { foo: 'bar' },
+    m: BigInt(9007199254740991),
+  };
+
+  const expectedCode = `default content
+<template #a>a content</template>
+<template #b>42</template>
+<template #c>true</template>
+<template #d><div>d content</div></template>
+<template #e><div style="color:red">e content</div></template>
+<template #f><div style="color:red">f content</div></template>
+<template #g><div style="color:red">child 1
+<span style="color:green">child 2</span></div></template>
+<template #h><div style="color:red">child 1
+<span style="color:green">child 2</span></div></template>
+<template #i><div style="color:red">child 1
+<span style="color:green">nested child 1
+<p>nested child 2</p></span></div></template>
+<template #j>child 1
+child 2</template>
+<template #l>{"foo":"bar"}</template>
+<template #m>{{ BigInt(9007199254740991) }}</template>`;
+
+  let actualCode = generateSlotSourceCode(slots, Object.keys(slots));
+  expect(actualCode).toBe(expectedCode);
+
+  // should generate the same code if getters/functions are used to return the slot content
+  const slotsWithGetters = Object.entries(slots).reduce<
+    Record<string, () => (typeof slots)[keyof typeof slots]>
+  >((obj, [slotName, value]) => {
+    obj[slotName] = () => value;
+    return obj;
+  }, {});
+
+  actualCode = generateSlotSourceCode(slotsWithGetters, Object.keys(slotsWithGetters));
+  expect(actualCode).toBe(expectedCode);
+});
+
+test.each([
+  { __docgenInfo: 'invalid-value', slotNames: [] },
+  { __docgenInfo: {}, slotNames: [] },
+  { __docgenInfo: { slots: 'invalid-value' }, slotNames: [] },
+  { __docgenInfo: { slots: ['invalid-value'] }, slotNames: [] },
+  {
+    __docgenInfo: { slots: [{ name: 'slot-1' }, { name: 'slot-2' }, { notName: 'slot-3' }] },
+    slotNames: ['slot-1', 'slot-2'],
+  },
+])('should extract slots names from __docgenInfo', ({ __docgenInfo, slotNames }) => {
+  const actualNames = extractSlotNames({ __docgenInfo });
+  expect(actualNames).toStrictEqual(slotNames);
+});
diff --git a/code/renderers/vue3/src/docs/source-code-generator.ts b/code/renderers/vue3/src/docs/source-code-generator.ts
new file mode 100644
index 000000000000..4fb848aae94a
--- /dev/null
+++ b/code/renderers/vue3/src/docs/source-code-generator.ts
@@ -0,0 +1,301 @@
+/* eslint-disable no-underscore-dangle */
+import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
+import { addons } from '@storybook/preview-api';
+import type { VNode } from 'vue';
+import { isVNode, watch } from 'vue';
+import type { Args, Decorator, StoryContext } from '../public-types';
+
+/**
+ * Decorator to generate Vue source code for stories.
+ */
+export const sourceCodeDecorator: Decorator = (storyFn, ctx) => {
+  const story = storyFn();
+  if (shouldSkipSourceCodeGeneration(ctx)) return story;
+
+  const channel = addons.getChannel();
+
+  watch(
+    () => ctx.args,
+    () => {
+      const sourceCode = generateSourceCode(ctx);
+
+      channel.emit(SNIPPET_RENDERED, {
+        id: ctx.id,
+        args: ctx.args,
+        source: sourceCode,
+        format: 'vue',
+      });
+    },
+    { immediate: true, deep: true }
+  );
+
+  return story;
+};
+
+/**
+ * Generate Vue source code for the given Story.
+ * @returns Source code or empty string if source code could not be generated.
+ */
+export const generateSourceCode = (ctx: StoryContext): string => {
+  const componentName = ctx.component?.__name || ctx.title.split('/').at(-1)!;
+
+  const slotNames = extractSlotNames(ctx.component);
+  const slotSourceCode = generateSlotSourceCode(ctx.args, slotNames);
+  const propsSourceCode = generatePropsSourceCode(ctx.args, slotNames);
+
+  if (slotSourceCode) {
+    return `<template>
+    <${componentName} ${propsSourceCode}> ${slotSourceCode} </${componentName}>
+    </template>`;
+  }
+
+  // prefer self closing tag if no slot content exists
+  return `<template>
+  <${componentName} ${propsSourceCode} />
+  </template>`;
+};
+
+/**
+ * Checks if the source code generation should be skipped for the given Story context.
+ * Will be true if one of the following is true:
+ * - view mode is not "docs"
+ * - story is no arg story
+ * - story has set custom source code via parameters.docs.source.code
+ * - story has set source type to "code" via parameters.docs.source.type
+ */
+export const shouldSkipSourceCodeGeneration = (context: StoryContext): boolean => {
+  const sourceParams = context?.parameters.docs?.source;
+  if (sourceParams?.type === SourceType.DYNAMIC) {
+    // always render if the user forces it
+    return false;
+  }
+
+  const isArgsStory = context?.parameters.__isArgsStory;
+  const isDocsViewMode = context?.viewMode === 'docs';
+
+  // never render if the user is forcing the block to render code, or
+  // if the user provides code, or if it's not an args story.
+  return (
+    !isDocsViewMode || !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE
+  );
+};
+
+/**
+ * Gets all slot names from the `__docgenInfo` of the given component if available.
+ * Requires Storybook docs addon to be enabled.
+ * Default slot will always be sorted first, remaining slots are sorted alphabetically.
+ */
+export const extractSlotNames = (
+  component?: StoryContext['component'] & { __docgenInfo?: unknown }
+): string[] => {
+  if (!component || !('__docgenInfo' in component)) return [];
+
+  // type check __docgenInfo to prevent errors
+  if (!component.__docgenInfo || typeof component.__docgenInfo !== 'object') return [];
+  if (
+    !('slots' in component.__docgenInfo) ||
+    !component.__docgenInfo.slots ||
+    !Array.isArray(component.__docgenInfo.slots)
+  ) {
+    return [];
+  }
+
+  return component.__docgenInfo.slots
+    .map((slot) => slot.name)
+    .filter((i): i is string => typeof i === 'string')
+    .sort((a, b) => {
+      if (a === 'default') return -1;
+      if (b === 'default') return 1;
+      return a.localeCompare(b);
+    });
+};
+
+/**
+ * Generates the source code for the given Vue component properties.
+ *
+ * @param args Story args / property values.
+ * @param slotNames All slot names of the component. Needed to not generate code for args that are slots.
+ * Can be extracted using `extractSlotNames()`.
+ */
+export const generatePropsSourceCode = (
+  args: Record<string, unknown>,
+  slotNames: string[]
+): string => {
+  const props: string[] = [];
+
+  Object.entries(args).forEach(([propName, value]) => {
+    // ignore slots
+    if (slotNames.includes(propName)) return;
+
+    switch (typeof value) {
+      case 'string':
+        if (value === '') return; // do not render empty strings
+
+        if (value.includes('"')) {
+          props.push(`${propName}='${value}'`);
+        } else {
+          props.push(`${propName}="${value}"`);
+        }
+
+        break;
+      case 'number':
+        props.push(`:${propName}="${value}"`);
+        break;
+      case 'bigint':
+        props.push(`:${propName}="BigInt(${value.toString()})"`);
+        break;
+      case 'boolean':
+        props.push(value === true ? propName : `:${propName}="false"`);
+        break;
+      case 'object':
+        if (value === null) return; // do not render null values
+        props.push(`:${propName}="${JSON.stringify(value).replaceAll('"', "'")}"`);
+        break;
+      case 'symbol': {
+        const symbol = `Symbol(${value.description ? `'${value.description}'` : ''})`;
+        props.push(`:${propName}="${symbol}"`);
+        break;
+      }
+      case 'function':
+        // TODO: check if functions should be rendered in source code
+        break;
+    }
+  });
+
+  return props.join(' ');
+};
+
+/**
+ * Generates the source code for the given Vue component slots.
+ *
+ * @param args Story args.
+ * @param slotNames All slot names of the component. Needed to only generate slots and ignore props etc.
+ * Can be extracted using `extractSlotNames()`.
+ */
+export const generateSlotSourceCode = (args: Args, slotNames: string[]): string => {
+  /** List of slot source codes (e.g. <template #slotName>Content</template>) */
+  const slotSourceCodes: string[] = [];
+
+  slotNames.forEach((slotName) => {
+    const arg = args[slotName];
+    if (!arg) return;
+
+    const slotContent = generateSlotChildrenSourceCode([arg]);
+    if (!slotContent) return; // do not generate source code for empty slots
+
+    // TODO: support generating bindings
+    const bindings = '';
+
+    if (slotName === 'default' && !bindings) {
+      // do not add unnecessary "<template #default>" tag since the default slot content without bindings
+      // can be put directly into the slot without need of "<template #default>"
+      slotSourceCodes.push(slotContent);
+    } else {
+      slotSourceCodes.push(`<template #${slotName}${bindings}>${slotContent}</template>`);
+    }
+  });
+
+  return slotSourceCodes.join('\n');
+};
+
+/**
+ * Generates the source code for the given slot children (the code inside <template #slotName></template>).
+ */
+const generateSlotChildrenSourceCode = (children: unknown[]): string => {
+  const slotChildrenSourceCodes: string[] = [];
+
+  /**
+   * Recursively generates the source code for a single slot child and all its children.
+   * @returns Source code for child and all nested children or empty string if child is of a non-supported type.
+   */
+  const generateSingleChildSourceCode = (child: unknown): string => {
+    if (isVNode(child)) {
+      return generateVNodeSourceCode(child);
+    }
+
+    switch (typeof child) {
+      case 'string':
+      case 'number':
+      case 'boolean':
+        return child.toString();
+
+      case 'object':
+        if (child === null) return '';
+        if (Array.isArray(child)) {
+          // if child also has children, we generate them recursively
+          return child
+            .map(generateSingleChildSourceCode)
+            .filter((code) => code !== '')
+            .join('\n');
+        }
+        return JSON.stringify(child);
+
+      case 'function': {
+        const returnValue = child();
+        return generateSlotChildrenSourceCode([returnValue]);
+      }
+
+      case 'bigint':
+        return `{{ BigInt(${child.toString()}) }}`;
+
+      // the only missing case here is "symbol"
+      // because rendering a symbol as slot / HTML does not make sense and is not supported by Vue
+      default:
+        return '';
+    }
+  };
+
+  children.forEach((child) => {
+    const sourceCode = generateSingleChildSourceCode(child);
+    if (sourceCode !== '') slotChildrenSourceCodes.push(sourceCode);
+  });
+
+  return slotChildrenSourceCodes.join('\n');
+};
+
+/**
+ * Generates source code for the given VNode and all its children (e.g. created using `h(MyComponent)` or `h("div")`).
+ */
+const generateVNodeSourceCode = (vnode: VNode): string => {
+  let componentName = '';
+  if (typeof vnode.type === 'string') {
+    // this is e.g. the case when rendering native HTML elements like, h("div")
+    componentName = vnode.type;
+  } else if (typeof vnode.type === 'object' && '__name' in vnode.type) {
+    // this is the case when using custom Vue components like h(MyComponent)
+    if ('name' in vnode.type && vnode.type.name) {
+      // prefer custom component name set by the developer
+      componentName = vnode.type.name;
+    } else if ('__name' in vnode.type && vnode.type.__name) {
+      // otherwise use name inferred by Vue from the file name
+      componentName = vnode.type.__name;
+    }
+  }
+
+  // component name could not be found
+  if (componentName === '') return '';
+
+  let childrenCode = '';
+
+  if (typeof vnode.children === 'string') {
+    childrenCode = vnode.children;
+  } else if (Array.isArray(vnode.children)) {
+    childrenCode = generateSlotChildrenSourceCode(vnode.children);
+  } else if (vnode.children) {
+    // children are an object, just like if regular Story args where used
+    // so we can generate the source code with the regular "generateSlotSourceCode()".
+    childrenCode = generateSlotSourceCode(
+      vnode.children,
+      // $stable is a default property in vnode.children so we need to filter it out
+      // to not generate source code for it
+      Object.keys(vnode.children).filter((i) => i !== '$stable')
+    );
+  }
+
+  const props = vnode.props ? generatePropsSourceCode(vnode.props, []) : '';
+
+  // prefer self closing tag if no children exist
+  if (childrenCode)
+    return `<${componentName}${props ? ` ${props}` : ''}>${childrenCode}</${componentName}>`;
+  return `<${componentName}${props ? ` ${props}` : ''} />`;
+};
diff --git a/code/renderers/vue3/src/entry-preview-docs.ts b/code/renderers/vue3/src/entry-preview-docs.ts
index 0c598ffdec49..a7651d44f8c9 100644
--- a/code/renderers/vue3/src/entry-preview-docs.ts
+++ b/code/renderers/vue3/src/entry-preview-docs.ts
@@ -1,6 +1,7 @@
-import type { ArgTypesEnhancer, DecoratorFunction } from '@storybook/types';
-import { extractComponentDescription, enhanceArgTypes } from '@storybook/docs-tools';
+import { enhanceArgTypes, extractComponentDescription } from '@storybook/docs-tools';
+import type { ArgTypesEnhancer } from '@storybook/types';
 import { extractArgTypes } from './docs/extractArgTypes';
+import { sourceCodeDecorator } from './docs/source-code-generator';
 import { sourceDecorator } from './docs/sourceDecorator';
 import type { VueRenderer } from './types';
 
@@ -12,6 +13,13 @@ export const parameters = {
   },
 };
 
-export const decorators: DecoratorFunction<VueRenderer>[] = [sourceDecorator];
+// TODO: check with Storybook maintainers how to release the new decorator.
+// Maybe as opt-in parameter for now which might become the default in future Storybook
+// versions once its well tested by projects.
+// Or add another type to the "SourceType" enum for this
+const codeSnippetType = 'new' as 'legacy' | 'new';
+const codeDecoratorToUse = codeSnippetType === 'legacy' ? sourceDecorator : sourceCodeDecorator;
+
+export const decorators = [codeDecoratorToUse];
 
 export const argTypesEnhancers: ArgTypesEnhancer<VueRenderer>[] = [enhanceArgTypes];

From 8d5c30853cb74116266627fd38a60868fdea6523 Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Sat, 18 May 2024 13:41:06 +0200
Subject: [PATCH 10/24] revert unrelated changes

---
 .../vue3/src/docs/sourceDecorator.ts          | 62 ++++++++++---------
 1 file changed, 34 insertions(+), 28 deletions(-)

diff --git a/code/renderers/vue3/src/docs/sourceDecorator.ts b/code/renderers/vue3/src/docs/sourceDecorator.ts
index 90c18c008ea1..525cfbbfd281 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.ts
@@ -1,35 +1,37 @@
 /* eslint-disable no-underscore-dangle */
-import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
 import { addons } from '@storybook/preview-api';
 import type { ArgTypes, Args, StoryContext } from '@storybook/types';
+
+import { SourceType, SNIPPET_RENDERED } from '@storybook/docs-tools';
+
 import type {
+  ElementNode,
   AttributeNode,
   DirectiveNode,
-  ElementNode,
+  TextNode,
   InterpolationNode,
   TemplateChildNode,
-  TextNode,
 } from '@vue/compiler-core';
 import { baseParse } from '@vue/compiler-core';
-import kebabCase from 'lodash/kebabCase';
 import type { ConcreteComponent, FunctionalComponent, VNode } from 'vue';
 import { h, isVNode, watch } from 'vue';
-import type { VueRenderer } from '../types';
+import kebabCase from 'lodash/kebabCase';
 import {
   attributeSource,
-  evalExp,
-  generateExpression,
   htmlEventAttributeToVueEventAttribute,
   omitEvent,
+  evalExp,
   replaceValueWithRef,
+  generateExpression,
 } from './utils';
+import type { VueRenderer } from '../types';
 
 /**
- * Checks if the source code should be generated for the given Story context.
+ * Check if the sourcecode should be generated.
  *
  * @param context StoryContext
  */
-const skipSourceRender = (context: StoryContext<VueRenderer>): boolean => {
+const skipSourceRender = (context: StoryContext<VueRenderer>) => {
   const sourceParams = context?.parameters.docs?.source;
   const isArgsStory = context?.parameters.__isArgsStory;
   const isDocsViewMode = context?.viewMode === 'docs';
@@ -68,7 +70,6 @@ export function generateAttributesSource(
     })
     .join(' ');
 }
-
 /**
  * map attributes and directives
  * @param props
@@ -87,20 +88,20 @@ function mapAttributesAndDirectives(props: Args) {
       }) as unknown as AttributeNode
   );
 }
-
 /**
- * Maps all slots to the source code for the given slot.
+ *  map slots
+ * @param slotsArgs
  */
 function mapSlots(
   slotsArgs: Args,
   generateComponentSource: any,
   slots: { name: string; scoped?: boolean; bindings?: { name: string }[] }[]
-): string[] {
+): TextNode[] {
   return Object.keys(slotsArgs).map((key) => {
     const slot = slotsArgs[key];
     let slotContent = '';
 
-    const scopedArgs = slots
+    const scropedArgs = slots
       .find((s) => s.name === key && s.scoped)
       ?.bindings?.map((b) => b.name)
       .join(',');
@@ -114,18 +115,21 @@ function mapSlots(
     } else if (typeof slot === 'object' && !isVNode(slot)) {
       slotContent = JSON.stringify(slot);
     }
-    // TODO: handle other cases (array, object, html,etc)
-
-    const bindingsString = scopedArgs ? `="{${scopedArgs}}"` : '';
 
-    // do not add unnecessary "<template #default>" tag since the default slot content without bindings
-    // can be put directly into the slot without need of "<template #default>"
-    if (slot && (key !== 'default' || bindingsString)) {
-      slotContent = slot ? `<template #${key}${bindingsString}>${slotContent}</template>` : ``;
-    }
+    const bindingsString = scropedArgs ? `="{${scropedArgs}}"` : '';
+    slotContent = slot ? `<template #${key}${bindingsString}>${slotContent}</template>` : ``;
 
-    return slotContent;
+    return {
+      type: 2,
+      content: slotContent,
+      loc: {
+        source: slotContent,
+        start: { offset: 0, line: 1, column: 0 },
+        end: { offset: 0, line: 1, column: 0 },
+      },
+    };
   });
+  // TODO: handle other cases (array, object, html,etc)
 }
 /**
  *
@@ -177,13 +181,14 @@ function getComponents(template: string): (TemplateChildNode | VNode)[] {
 }
 
 /**
- * Generates the source code for the "<template>" section of a Vue 3 component.
+ * Generate a vue3 template.
  *
  * @param component Component
  * @param args Args
  * @param argTypes ArgTypes
  * @param slotProp Prop used to simulate a slot
  */
+
 export function generateTemplateSource(
   componentOrNodes: (ConcreteComponent | TemplateChildNode)[] | TemplateChildNode | VNode,
   { args, argTypes }: { args: Args; argTypes: ArgTypes },
@@ -240,7 +245,9 @@ export function generateTemplateSource(
       const childSources: string = children
         ? typeof children === 'string'
           ? children
-          : mapSlots(slotArgs, generateComponentSource, componentSlots ?? []).join('')
+          : mapSlots(slotArgs as Args, generateComponentSource, componentSlots ?? [])
+              .map((child) => child.content)
+              .join('')
         : '';
       const name =
         typeof type === 'string'
@@ -301,13 +308,12 @@ export function generateSource(context: StoryContext<VueRenderer>) {
   }
   return null;
 }
-
 // export local function for testing purpose
 export {
-  attributeSource,
   generateScriptSetup,
   getTemplateComponents as getComponentsFromRenderFn,
   getComponents as getComponentsFromTemplate,
-  htmlEventAttributeToVueEventAttribute,
   mapAttributesAndDirectives,
+  attributeSource,
+  htmlEventAttributeToVueEventAttribute,
 };

From 49b1f5114b38ef01223d763ad80efaed89a2f177 Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Sat, 18 May 2024 13:41:44 +0200
Subject: [PATCH 11/24] revert formatting

---
 code/renderers/vue3/src/docs/utils.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/code/renderers/vue3/src/docs/utils.ts b/code/renderers/vue3/src/docs/utils.ts
index de5276a02b3a..b4e502952dfd 100644
--- a/code/renderers/vue3/src/docs/utils.ts
+++ b/code/renderers/vue3/src/docs/utils.ts
@@ -80,12 +80,12 @@ function generateExpression(slot: FunctionalComponent): string {
 }
 
 export {
-  attributeSource,
-  directiveSource,
+  omitEvent,
   displayObject,
-  evalExp,
-  generateExpression,
   htmlEventAttributeToVueEventAttribute,
-  omitEvent,
+  directiveSource,
+  attributeSource,
+  evalExp,
   replaceValueWithRef,
+  generateExpression,
 };

From f94cc9982332a9b3bbde79dfa3a3b7cca3f37788 Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Sun, 19 May 2024 12:59:18 +0200
Subject: [PATCH 12/24] add new lines between multiple slots

---
 .../vue3/src/docs/source-code-generator.test.ts      | 12 ++++++++++++
 .../renderers/vue3/src/docs/source-code-generator.ts |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/code/renderers/vue3/src/docs/source-code-generator.test.ts b/code/renderers/vue3/src/docs/source-code-generator.test.ts
index c41e61b2238c..27c17a2c77e6 100644
--- a/code/renderers/vue3/src/docs/source-code-generator.test.ts
+++ b/code/renderers/vue3/src/docs/source-code-generator.test.ts
@@ -76,22 +76,34 @@ test('should generate source code for slots', () => {
   };
 
   const expectedCode = `default content
+
 <template #a>a content</template>
+
 <template #b>42</template>
+
 <template #c>true</template>
+
 <template #d><div>d content</div></template>
+
 <template #e><div style="color:red">e content</div></template>
+
 <template #f><div style="color:red">f content</div></template>
+
 <template #g><div style="color:red">child 1
 <span style="color:green">child 2</span></div></template>
+
 <template #h><div style="color:red">child 1
 <span style="color:green">child 2</span></div></template>
+
 <template #i><div style="color:red">child 1
 <span style="color:green">nested child 1
 <p>nested child 2</p></span></div></template>
+
 <template #j>child 1
 child 2</template>
+
 <template #l>{"foo":"bar"}</template>
+
 <template #m>{{ BigInt(9007199254740991) }}</template>`;
 
   let actualCode = generateSlotSourceCode(slots, Object.keys(slots));
diff --git a/code/renderers/vue3/src/docs/source-code-generator.ts b/code/renderers/vue3/src/docs/source-code-generator.ts
index 4fb848aae94a..28e69f388ebc 100644
--- a/code/renderers/vue3/src/docs/source-code-generator.ts
+++ b/code/renderers/vue3/src/docs/source-code-generator.ts
@@ -195,7 +195,7 @@ export const generateSlotSourceCode = (args: Args, slotNames: string[]): string
     }
   });
 
-  return slotSourceCodes.join('\n');
+  return slotSourceCodes.join('\n\n');
 };
 
 /**

From 4084f0c873e3809ef5201fc6dedeed9ce65e54ee Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Sun, 19 May 2024 13:13:24 +0200
Subject: [PATCH 13/24] gracefully use fallback component name if real name not
 found

---
 code/renderers/vue3/src/docs/source-code-generator.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/code/renderers/vue3/src/docs/source-code-generator.ts b/code/renderers/vue3/src/docs/source-code-generator.ts
index 28e69f388ebc..f9250136859f 100644
--- a/code/renderers/vue3/src/docs/source-code-generator.ts
+++ b/code/renderers/vue3/src/docs/source-code-generator.ts
@@ -257,7 +257,7 @@ const generateSlotChildrenSourceCode = (children: unknown[]): string => {
  * Generates source code for the given VNode and all its children (e.g. created using `h(MyComponent)` or `h("div")`).
  */
 const generateVNodeSourceCode = (vnode: VNode): string => {
-  let componentName = '';
+  let componentName = 'component';
   if (typeof vnode.type === 'string') {
     // this is e.g. the case when rendering native HTML elements like, h("div")
     componentName = vnode.type;
@@ -272,9 +272,6 @@ const generateVNodeSourceCode = (vnode: VNode): string => {
     }
   }
 
-  // component name could not be found
-  if (componentName === '') return '';
-
   let childrenCode = '';
 
   if (typeof vnode.children === 'string') {

From bfeb2d8f945abb8f714a764793bb2b3d8a8f3228 Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Sat, 8 Jun 2024 14:16:49 +0200
Subject: [PATCH 14/24] feat: support slot bindings

---
 .../src/docs/source-code-generator.test.ts    | 19 +++++
 .../vue3/src/docs/source-code-generator.ts    | 75 +++++++++++++++++--
 .../component-meta/DefineSlots.stories.ts     |  6 +-
 .../component-meta/TemplateSlots.stories.ts   |  6 +-
 4 files changed, 93 insertions(+), 13 deletions(-)

diff --git a/code/renderers/vue3/src/docs/source-code-generator.test.ts b/code/renderers/vue3/src/docs/source-code-generator.test.ts
index 27c17a2c77e6..63e99eeaef15 100644
--- a/code/renderers/vue3/src/docs/source-code-generator.test.ts
+++ b/code/renderers/vue3/src/docs/source-code-generator.test.ts
@@ -121,6 +121,25 @@ child 2</template>
   expect(actualCode).toBe(expectedCode);
 });
 
+test('should generate source code for slots with bindings', () => {
+  type TestBindings = {
+    foo: string;
+    bar?: number;
+  };
+
+  const slots = {
+    a: ({ foo, bar }: TestBindings) => `Slot with bindings ${foo} and ${bar}`,
+    b: ({ foo }: TestBindings) => h('a', { href: foo, target: foo }, `Test link: ${foo}`),
+  };
+
+  const expectedCode = `<template #a="{ foo, bar }">Slot with bindings {{ foo }} and {{ bar }}</template>
+
+<template #b="{ foo }"><a :href="foo" :target="foo">Test link: {{ foo }}</a></template>`;
+
+  const actualCode = generateSlotSourceCode(slots, Object.keys(slots));
+  expect(actualCode).toBe(expectedCode);
+});
+
 test.each([
   { __docgenInfo: 'invalid-value', slotNames: [] },
   { __docgenInfo: {}, slotNames: [] },
diff --git a/code/renderers/vue3/src/docs/source-code-generator.ts b/code/renderers/vue3/src/docs/source-code-generator.ts
index f9250136859f..56ce86035f46 100644
--- a/code/renderers/vue3/src/docs/source-code-generator.ts
+++ b/code/renderers/vue3/src/docs/source-code-generator.ts
@@ -36,7 +36,9 @@ export const sourceCodeDecorator: Decorator = (storyFn, ctx) => {
  * Generate Vue source code for the given Story.
  * @returns Source code or empty string if source code could not be generated.
  */
-export const generateSourceCode = (ctx: StoryContext): string => {
+export const generateSourceCode = (
+  ctx: Pick<StoryContext, 'title' | 'component' | 'args'>
+): string => {
   const componentName = ctx.component?.__name || ctx.title.split('/').at(-1)!;
 
   const slotNames = extractSlotNames(ctx.component);
@@ -183,15 +185,16 @@ export const generateSlotSourceCode = (args: Args, slotNames: string[]): string
     const slotContent = generateSlotChildrenSourceCode([arg]);
     if (!slotContent) return; // do not generate source code for empty slots
 
-    // TODO: support generating bindings
-    const bindings = '';
+    const slotBindings = typeof arg === 'function' ? getFunctionParamNames(arg) : [];
 
-    if (slotName === 'default' && !bindings) {
+    if (slotName === 'default' && !slotBindings.length) {
       // do not add unnecessary "<template #default>" tag since the default slot content without bindings
       // can be put directly into the slot without need of "<template #default>"
       slotSourceCodes.push(slotContent);
     } else {
-      slotSourceCodes.push(`<template #${slotName}${bindings}>${slotContent}</template>`);
+      slotSourceCodes.push(
+        `<template ${slotBindingsToString(slotName, slotBindings)}>${slotContent}</template>`
+      );
     }
   });
 
@@ -231,8 +234,28 @@ const generateSlotChildrenSourceCode = (children: unknown[]): string => {
         return JSON.stringify(child);
 
       case 'function': {
-        const returnValue = child();
-        return generateSlotChildrenSourceCode([returnValue]);
+        const paramNames = getFunctionParamNames(child).filter(
+          (param) => !['{', '}'].includes(param)
+        );
+
+        const parameters = paramNames.reduce<Record<string, string>>((obj, param) => {
+          obj[param] = `{{ ${param} }}`;
+          return obj;
+        }, {});
+
+        const returnValue = child(parameters);
+        let slotSourceCode = generateSlotChildrenSourceCode([returnValue]);
+
+        // if slot bindings are used for properties of other components, our {{ paramName }} is incorrect because
+        // it would generate e.g. my-prop="{{ paramName }}", therefore, we replace it here to e.g. :my-prop="paramName"
+        paramNames.forEach((param) => {
+          slotSourceCode = slotSourceCode.replaceAll(
+            new RegExp(` (\\S+)="{{ ${param} }}"`, 'g'),
+            ` :$1="${param}"`
+          );
+        });
+
+        return slotSourceCode;
       }
 
       case 'bigint':
@@ -296,3 +319,41 @@ const generateVNodeSourceCode = (vnode: VNode): string => {
     return `<${componentName}${props ? ` ${props}` : ''}>${childrenCode}</${componentName}>`;
   return `<${componentName}${props ? ` ${props}` : ''} />`;
 };
+
+/**
+ * Gets a list of parameters for the given function since func.arguments can not be used since
+ * it throws a TypeError.
+ *
+ * If the arguments are destructured (e.g. "func({ foo, bar })"), the returned array will also
+ * include "{" and "}".
+ *
+ * @see Based on https://stackoverflow.com/a/9924463
+ */
+// eslint-disable-next-line @typescript-eslint/ban-types
+const getFunctionParamNames = (func: Function): string[] => {
+  const STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/gm;
+  const ARGUMENT_NAMES = /([^\s,]+)/g;
+
+  const fnStr = func.toString().replace(STRIP_COMMENTS, '');
+  const result = fnStr.slice(fnStr.indexOf('(') + 1, fnStr.indexOf(')')).match(ARGUMENT_NAMES);
+  if (result === null) return [];
+  return result;
+};
+
+/**
+ * Converts the given slot bindings/parameters to a string.
+ *
+ * @example
+ * If no params: '#slotName'
+ * If params: '#slotName="{ foo, bar }"'
+ */
+const slotBindingsToString = (
+  slotName: string,
+  params: string[]
+): `#${string}` | `#${string}="${string}"` => {
+  if (!params.length) return `#${slotName}`;
+  if (params.length === 1) return `#${slotName}="${params[0]}"`;
+
+  // parameters might be destructured so remove duplicated brackets here
+  return `#${slotName}="{ ${params.filter((i) => !['{', '}'].includes(i)).join(', ')} }"`;
+};
diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/DefineSlots.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/DefineSlots.stories.ts
index 1a06ce6bb504..da11664027c9 100644
--- a/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/DefineSlots.stories.ts
+++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/DefineSlots.stories.ts
@@ -11,8 +11,8 @@ export default meta;
 
 export const Default: Story = {
   args: {
-    default: ({ num }) => `Default slot { num=${num} }`,
-    named: ({ str }) => `Named slot { str=${str} }`,
-    vbind: ({ num, str }) => `Named v-bind slot { num=${num}, str=${str} }`,
+    default: ({ num }) => `Default slot: num=${num}`,
+    named: ({ str }) => `Named slot: str=${str}`,
+    vbind: ({ num, str }) => `Named v-bind slot: num=${num}, str=${str}`,
   },
 };
diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/TemplateSlots.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/TemplateSlots.stories.ts
index 817bdcba42df..7ae73f819caf 100644
--- a/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/TemplateSlots.stories.ts
+++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/component-meta/TemplateSlots.stories.ts
@@ -11,8 +11,8 @@ export default meta;
 
 export const Default: Story = {
   args: {
-    default: ({ num }) => `Default slot { num=${num} }`,
-    named: ({ str }) => `Named slot { str=${str} }`,
-    vbind: ({ num, str }) => `Named v-bind slot { num=${num}, str=${str} }`,
+    default: ({ num }) => `Default slot: num=${num}`,
+    named: ({ str }) => `Named slot: str=${str}`,
+    vbind: ({ num, str }) => `Named v-bind slot: num=${num}, str=${str}`,
   },
 };

From 44283207fd2d7411179249a2ac1b5a9c81e430b9 Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Sat, 8 Jun 2024 14:21:03 +0200
Subject: [PATCH 15/24] remove old source code generator

---
 .../src/docs/source-code-generator.test.ts    | 155 -----
 .../vue3/src/docs/source-code-generator.ts    | 359 -----------
 .../vue3/src/docs/sourceDecorator.test.ts     | 437 +++++--------
 .../vue3/src/docs/sourceDecorator.ts          | 578 ++++++++++--------
 code/renderers/vue3/src/entry-preview-docs.ts |  10 +-
 5 files changed, 454 insertions(+), 1085 deletions(-)
 delete mode 100644 code/renderers/vue3/src/docs/source-code-generator.test.ts
 delete mode 100644 code/renderers/vue3/src/docs/source-code-generator.ts

diff --git a/code/renderers/vue3/src/docs/source-code-generator.test.ts b/code/renderers/vue3/src/docs/source-code-generator.test.ts
deleted file mode 100644
index 63e99eeaef15..000000000000
--- a/code/renderers/vue3/src/docs/source-code-generator.test.ts
+++ /dev/null
@@ -1,155 +0,0 @@
-import { expect, test } from 'vitest';
-import { h } from 'vue';
-import {
-  extractSlotNames,
-  generatePropsSourceCode,
-  generateSlotSourceCode,
-} from './source-code-generator';
-
-test('should generate source code for props', () => {
-  const slots = ['default', 'testSlot'];
-
-  const code = generatePropsSourceCode(
-    {
-      a: 'foo',
-      b: '"I am double quoted"',
-      c: 42,
-      d: true,
-      e: false,
-      f: [1, 2, 3],
-      g: {
-        g1: 'foo',
-        b2: 42,
-      },
-      h: undefined,
-      i: null,
-      j: '',
-      k: BigInt(9007199254740991),
-      l: Symbol(),
-      m: Symbol('foo'),
-      default: 'default slot',
-      testSlot: 'test slot',
-    },
-    slots
-  );
-
-  expect(code).toBe(
-    `a="foo" b='"I am double quoted"' :c="42" d :e="false" :f="[1,2,3]" :g="{'g1':'foo','b2':42}" :k="BigInt(9007199254740991)" :l="Symbol()" :m="Symbol('foo')"`
-  );
-});
-
-test('should generate source code for slots', () => {
-  // slot code generator should support primitive values (string, number etc.)
-  // but also VNodes (e.g. created using h()) so custom Vue components can also be used
-  // inside slots with proper generated code
-
-  const slots = {
-    default: 'default content',
-    a: 'a content',
-    b: 42,
-    c: true,
-    // single VNode without props
-    d: h('div', 'd content'),
-    // VNode with props and single child
-    e: h('div', { style: 'color:red' }, 'e content'),
-    // VNode with props and single child returned as getter
-    f: h('div', { style: 'color:red' }, () => 'f content'),
-    // VNode with multiple children
-    g: h('div', { style: 'color:red' }, [
-      'child 1',
-      h('span', { style: 'color:green' }, 'child 2'),
-    ]),
-    // VNode multiple children but returned as getter
-    h: h('div', { style: 'color:red' }, () => [
-      'child 1',
-      h('span', { style: 'color:green' }, 'child 2'),
-    ]),
-    // VNode with multiple and nested children
-    i: h('div', { style: 'color:red' }, [
-      'child 1',
-      h('span', { style: 'color:green' }, ['nested child 1', h('p', 'nested child 2')]),
-    ]),
-    j: ['child 1', 'child 2'],
-    k: null,
-    l: { foo: 'bar' },
-    m: BigInt(9007199254740991),
-  };
-
-  const expectedCode = `default content
-
-<template #a>a content</template>
-
-<template #b>42</template>
-
-<template #c>true</template>
-
-<template #d><div>d content</div></template>
-
-<template #e><div style="color:red">e content</div></template>
-
-<template #f><div style="color:red">f content</div></template>
-
-<template #g><div style="color:red">child 1
-<span style="color:green">child 2</span></div></template>
-
-<template #h><div style="color:red">child 1
-<span style="color:green">child 2</span></div></template>
-
-<template #i><div style="color:red">child 1
-<span style="color:green">nested child 1
-<p>nested child 2</p></span></div></template>
-
-<template #j>child 1
-child 2</template>
-
-<template #l>{"foo":"bar"}</template>
-
-<template #m>{{ BigInt(9007199254740991) }}</template>`;
-
-  let actualCode = generateSlotSourceCode(slots, Object.keys(slots));
-  expect(actualCode).toBe(expectedCode);
-
-  // should generate the same code if getters/functions are used to return the slot content
-  const slotsWithGetters = Object.entries(slots).reduce<
-    Record<string, () => (typeof slots)[keyof typeof slots]>
-  >((obj, [slotName, value]) => {
-    obj[slotName] = () => value;
-    return obj;
-  }, {});
-
-  actualCode = generateSlotSourceCode(slotsWithGetters, Object.keys(slotsWithGetters));
-  expect(actualCode).toBe(expectedCode);
-});
-
-test('should generate source code for slots with bindings', () => {
-  type TestBindings = {
-    foo: string;
-    bar?: number;
-  };
-
-  const slots = {
-    a: ({ foo, bar }: TestBindings) => `Slot with bindings ${foo} and ${bar}`,
-    b: ({ foo }: TestBindings) => h('a', { href: foo, target: foo }, `Test link: ${foo}`),
-  };
-
-  const expectedCode = `<template #a="{ foo, bar }">Slot with bindings {{ foo }} and {{ bar }}</template>
-
-<template #b="{ foo }"><a :href="foo" :target="foo">Test link: {{ foo }}</a></template>`;
-
-  const actualCode = generateSlotSourceCode(slots, Object.keys(slots));
-  expect(actualCode).toBe(expectedCode);
-});
-
-test.each([
-  { __docgenInfo: 'invalid-value', slotNames: [] },
-  { __docgenInfo: {}, slotNames: [] },
-  { __docgenInfo: { slots: 'invalid-value' }, slotNames: [] },
-  { __docgenInfo: { slots: ['invalid-value'] }, slotNames: [] },
-  {
-    __docgenInfo: { slots: [{ name: 'slot-1' }, { name: 'slot-2' }, { notName: 'slot-3' }] },
-    slotNames: ['slot-1', 'slot-2'],
-  },
-])('should extract slots names from __docgenInfo', ({ __docgenInfo, slotNames }) => {
-  const actualNames = extractSlotNames({ __docgenInfo });
-  expect(actualNames).toStrictEqual(slotNames);
-});
diff --git a/code/renderers/vue3/src/docs/source-code-generator.ts b/code/renderers/vue3/src/docs/source-code-generator.ts
deleted file mode 100644
index 56ce86035f46..000000000000
--- a/code/renderers/vue3/src/docs/source-code-generator.ts
+++ /dev/null
@@ -1,359 +0,0 @@
-/* eslint-disable no-underscore-dangle */
-import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
-import { addons } from '@storybook/preview-api';
-import type { VNode } from 'vue';
-import { isVNode, watch } from 'vue';
-import type { Args, Decorator, StoryContext } from '../public-types';
-
-/**
- * Decorator to generate Vue source code for stories.
- */
-export const sourceCodeDecorator: Decorator = (storyFn, ctx) => {
-  const story = storyFn();
-  if (shouldSkipSourceCodeGeneration(ctx)) return story;
-
-  const channel = addons.getChannel();
-
-  watch(
-    () => ctx.args,
-    () => {
-      const sourceCode = generateSourceCode(ctx);
-
-      channel.emit(SNIPPET_RENDERED, {
-        id: ctx.id,
-        args: ctx.args,
-        source: sourceCode,
-        format: 'vue',
-      });
-    },
-    { immediate: true, deep: true }
-  );
-
-  return story;
-};
-
-/**
- * Generate Vue source code for the given Story.
- * @returns Source code or empty string if source code could not be generated.
- */
-export const generateSourceCode = (
-  ctx: Pick<StoryContext, 'title' | 'component' | 'args'>
-): string => {
-  const componentName = ctx.component?.__name || ctx.title.split('/').at(-1)!;
-
-  const slotNames = extractSlotNames(ctx.component);
-  const slotSourceCode = generateSlotSourceCode(ctx.args, slotNames);
-  const propsSourceCode = generatePropsSourceCode(ctx.args, slotNames);
-
-  if (slotSourceCode) {
-    return `<template>
-    <${componentName} ${propsSourceCode}> ${slotSourceCode} </${componentName}>
-    </template>`;
-  }
-
-  // prefer self closing tag if no slot content exists
-  return `<template>
-  <${componentName} ${propsSourceCode} />
-  </template>`;
-};
-
-/**
- * Checks if the source code generation should be skipped for the given Story context.
- * Will be true if one of the following is true:
- * - view mode is not "docs"
- * - story is no arg story
- * - story has set custom source code via parameters.docs.source.code
- * - story has set source type to "code" via parameters.docs.source.type
- */
-export const shouldSkipSourceCodeGeneration = (context: StoryContext): boolean => {
-  const sourceParams = context?.parameters.docs?.source;
-  if (sourceParams?.type === SourceType.DYNAMIC) {
-    // always render if the user forces it
-    return false;
-  }
-
-  const isArgsStory = context?.parameters.__isArgsStory;
-  const isDocsViewMode = context?.viewMode === 'docs';
-
-  // never render if the user is forcing the block to render code, or
-  // if the user provides code, or if it's not an args story.
-  return (
-    !isDocsViewMode || !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE
-  );
-};
-
-/**
- * Gets all slot names from the `__docgenInfo` of the given component if available.
- * Requires Storybook docs addon to be enabled.
- * Default slot will always be sorted first, remaining slots are sorted alphabetically.
- */
-export const extractSlotNames = (
-  component?: StoryContext['component'] & { __docgenInfo?: unknown }
-): string[] => {
-  if (!component || !('__docgenInfo' in component)) return [];
-
-  // type check __docgenInfo to prevent errors
-  if (!component.__docgenInfo || typeof component.__docgenInfo !== 'object') return [];
-  if (
-    !('slots' in component.__docgenInfo) ||
-    !component.__docgenInfo.slots ||
-    !Array.isArray(component.__docgenInfo.slots)
-  ) {
-    return [];
-  }
-
-  return component.__docgenInfo.slots
-    .map((slot) => slot.name)
-    .filter((i): i is string => typeof i === 'string')
-    .sort((a, b) => {
-      if (a === 'default') return -1;
-      if (b === 'default') return 1;
-      return a.localeCompare(b);
-    });
-};
-
-/**
- * Generates the source code for the given Vue component properties.
- *
- * @param args Story args / property values.
- * @param slotNames All slot names of the component. Needed to not generate code for args that are slots.
- * Can be extracted using `extractSlotNames()`.
- */
-export const generatePropsSourceCode = (
-  args: Record<string, unknown>,
-  slotNames: string[]
-): string => {
-  const props: string[] = [];
-
-  Object.entries(args).forEach(([propName, value]) => {
-    // ignore slots
-    if (slotNames.includes(propName)) return;
-
-    switch (typeof value) {
-      case 'string':
-        if (value === '') return; // do not render empty strings
-
-        if (value.includes('"')) {
-          props.push(`${propName}='${value}'`);
-        } else {
-          props.push(`${propName}="${value}"`);
-        }
-
-        break;
-      case 'number':
-        props.push(`:${propName}="${value}"`);
-        break;
-      case 'bigint':
-        props.push(`:${propName}="BigInt(${value.toString()})"`);
-        break;
-      case 'boolean':
-        props.push(value === true ? propName : `:${propName}="false"`);
-        break;
-      case 'object':
-        if (value === null) return; // do not render null values
-        props.push(`:${propName}="${JSON.stringify(value).replaceAll('"', "'")}"`);
-        break;
-      case 'symbol': {
-        const symbol = `Symbol(${value.description ? `'${value.description}'` : ''})`;
-        props.push(`:${propName}="${symbol}"`);
-        break;
-      }
-      case 'function':
-        // TODO: check if functions should be rendered in source code
-        break;
-    }
-  });
-
-  return props.join(' ');
-};
-
-/**
- * Generates the source code for the given Vue component slots.
- *
- * @param args Story args.
- * @param slotNames All slot names of the component. Needed to only generate slots and ignore props etc.
- * Can be extracted using `extractSlotNames()`.
- */
-export const generateSlotSourceCode = (args: Args, slotNames: string[]): string => {
-  /** List of slot source codes (e.g. <template #slotName>Content</template>) */
-  const slotSourceCodes: string[] = [];
-
-  slotNames.forEach((slotName) => {
-    const arg = args[slotName];
-    if (!arg) return;
-
-    const slotContent = generateSlotChildrenSourceCode([arg]);
-    if (!slotContent) return; // do not generate source code for empty slots
-
-    const slotBindings = typeof arg === 'function' ? getFunctionParamNames(arg) : [];
-
-    if (slotName === 'default' && !slotBindings.length) {
-      // do not add unnecessary "<template #default>" tag since the default slot content without bindings
-      // can be put directly into the slot without need of "<template #default>"
-      slotSourceCodes.push(slotContent);
-    } else {
-      slotSourceCodes.push(
-        `<template ${slotBindingsToString(slotName, slotBindings)}>${slotContent}</template>`
-      );
-    }
-  });
-
-  return slotSourceCodes.join('\n\n');
-};
-
-/**
- * Generates the source code for the given slot children (the code inside <template #slotName></template>).
- */
-const generateSlotChildrenSourceCode = (children: unknown[]): string => {
-  const slotChildrenSourceCodes: string[] = [];
-
-  /**
-   * Recursively generates the source code for a single slot child and all its children.
-   * @returns Source code for child and all nested children or empty string if child is of a non-supported type.
-   */
-  const generateSingleChildSourceCode = (child: unknown): string => {
-    if (isVNode(child)) {
-      return generateVNodeSourceCode(child);
-    }
-
-    switch (typeof child) {
-      case 'string':
-      case 'number':
-      case 'boolean':
-        return child.toString();
-
-      case 'object':
-        if (child === null) return '';
-        if (Array.isArray(child)) {
-          // if child also has children, we generate them recursively
-          return child
-            .map(generateSingleChildSourceCode)
-            .filter((code) => code !== '')
-            .join('\n');
-        }
-        return JSON.stringify(child);
-
-      case 'function': {
-        const paramNames = getFunctionParamNames(child).filter(
-          (param) => !['{', '}'].includes(param)
-        );
-
-        const parameters = paramNames.reduce<Record<string, string>>((obj, param) => {
-          obj[param] = `{{ ${param} }}`;
-          return obj;
-        }, {});
-
-        const returnValue = child(parameters);
-        let slotSourceCode = generateSlotChildrenSourceCode([returnValue]);
-
-        // if slot bindings are used for properties of other components, our {{ paramName }} is incorrect because
-        // it would generate e.g. my-prop="{{ paramName }}", therefore, we replace it here to e.g. :my-prop="paramName"
-        paramNames.forEach((param) => {
-          slotSourceCode = slotSourceCode.replaceAll(
-            new RegExp(` (\\S+)="{{ ${param} }}"`, 'g'),
-            ` :$1="${param}"`
-          );
-        });
-
-        return slotSourceCode;
-      }
-
-      case 'bigint':
-        return `{{ BigInt(${child.toString()}) }}`;
-
-      // the only missing case here is "symbol"
-      // because rendering a symbol as slot / HTML does not make sense and is not supported by Vue
-      default:
-        return '';
-    }
-  };
-
-  children.forEach((child) => {
-    const sourceCode = generateSingleChildSourceCode(child);
-    if (sourceCode !== '') slotChildrenSourceCodes.push(sourceCode);
-  });
-
-  return slotChildrenSourceCodes.join('\n');
-};
-
-/**
- * Generates source code for the given VNode and all its children (e.g. created using `h(MyComponent)` or `h("div")`).
- */
-const generateVNodeSourceCode = (vnode: VNode): string => {
-  let componentName = 'component';
-  if (typeof vnode.type === 'string') {
-    // this is e.g. the case when rendering native HTML elements like, h("div")
-    componentName = vnode.type;
-  } else if (typeof vnode.type === 'object' && '__name' in vnode.type) {
-    // this is the case when using custom Vue components like h(MyComponent)
-    if ('name' in vnode.type && vnode.type.name) {
-      // prefer custom component name set by the developer
-      componentName = vnode.type.name;
-    } else if ('__name' in vnode.type && vnode.type.__name) {
-      // otherwise use name inferred by Vue from the file name
-      componentName = vnode.type.__name;
-    }
-  }
-
-  let childrenCode = '';
-
-  if (typeof vnode.children === 'string') {
-    childrenCode = vnode.children;
-  } else if (Array.isArray(vnode.children)) {
-    childrenCode = generateSlotChildrenSourceCode(vnode.children);
-  } else if (vnode.children) {
-    // children are an object, just like if regular Story args where used
-    // so we can generate the source code with the regular "generateSlotSourceCode()".
-    childrenCode = generateSlotSourceCode(
-      vnode.children,
-      // $stable is a default property in vnode.children so we need to filter it out
-      // to not generate source code for it
-      Object.keys(vnode.children).filter((i) => i !== '$stable')
-    );
-  }
-
-  const props = vnode.props ? generatePropsSourceCode(vnode.props, []) : '';
-
-  // prefer self closing tag if no children exist
-  if (childrenCode)
-    return `<${componentName}${props ? ` ${props}` : ''}>${childrenCode}</${componentName}>`;
-  return `<${componentName}${props ? ` ${props}` : ''} />`;
-};
-
-/**
- * Gets a list of parameters for the given function since func.arguments can not be used since
- * it throws a TypeError.
- *
- * If the arguments are destructured (e.g. "func({ foo, bar })"), the returned array will also
- * include "{" and "}".
- *
- * @see Based on https://stackoverflow.com/a/9924463
- */
-// eslint-disable-next-line @typescript-eslint/ban-types
-const getFunctionParamNames = (func: Function): string[] => {
-  const STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/gm;
-  const ARGUMENT_NAMES = /([^\s,]+)/g;
-
-  const fnStr = func.toString().replace(STRIP_COMMENTS, '');
-  const result = fnStr.slice(fnStr.indexOf('(') + 1, fnStr.indexOf(')')).match(ARGUMENT_NAMES);
-  if (result === null) return [];
-  return result;
-};
-
-/**
- * Converts the given slot bindings/parameters to a string.
- *
- * @example
- * If no params: '#slotName'
- * If params: '#slotName="{ foo, bar }"'
- */
-const slotBindingsToString = (
-  slotName: string,
-  params: string[]
-): `#${string}` | `#${string}="${string}"` => {
-  if (!params.length) return `#${slotName}`;
-  if (params.length === 1) return `#${slotName}="${params[0]}"`;
-
-  // parameters might be destructured so remove duplicated brackets here
-  return `#${slotName}="{ ${params.filter((i) => !['{', '}'].includes(i)).join(', ')} }"`;
-};
diff --git a/code/renderers/vue3/src/docs/sourceDecorator.test.ts b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
index d695d7979c37..fd181a044a49 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.test.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
@@ -1,304 +1,155 @@
-import { describe, expect, it } from 'vitest';
-
+import { expect, test } from 'vitest';
+import { h } from 'vue';
 import {
-  mapAttributesAndDirectives,
-  generateAttributesSource,
-  attributeSource,
-  htmlEventAttributeToVueEventAttribute as htmlEventToVueEvent,
+  extractSlotNames,
+  generatePropsSourceCode,
+  generateSlotSourceCode,
 } from './sourceDecorator';
 
-expect.addSnapshotSerializer({
-  print: (val: any) => val,
-  test: (val: unknown) => typeof val === 'string',
-});
+test('should generate source code for props', () => {
+  const slots = ['default', 'testSlot'];
+
+  const code = generatePropsSourceCode(
+    {
+      a: 'foo',
+      b: '"I am double quoted"',
+      c: 42,
+      d: true,
+      e: false,
+      f: [1, 2, 3],
+      g: {
+        g1: 'foo',
+        b2: 42,
+      },
+      h: undefined,
+      i: null,
+      j: '',
+      k: BigInt(9007199254740991),
+      l: Symbol(),
+      m: Symbol('foo'),
+      default: 'default slot',
+      testSlot: 'test slot',
+    },
+    slots
+  );
 
-describe('Vue3: sourceDecorator->mapAttributesAndDirective()', () => {
-  it('camelCase boolean Arg', () => {
-    expect(mapAttributesAndDirectives({ camelCaseBooleanArg: true })).toMatchInlineSnapshot(`
-      [
-        {
-          arg: {
-            content: camel-case-boolean-arg,
-            loc: {
-              source: camel-case-boolean-arg,
-            },
-          },
-          exp: {
-            isStatic: false,
-            loc: {
-              source: true,
-            },
-          },
-          loc: {
-            source: :camel-case-boolean-arg="true",
-          },
-          modifiers: [
-            ,
-          ],
-          name: bind,
-          type: 6,
-        },
-      ]
-    `);
-  });
-  it('camelCase string Arg', () => {
-    expect(mapAttributesAndDirectives({ camelCaseStringArg: 'foo' })).toMatchInlineSnapshot(`
-      [
-        {
-          arg: {
-            content: camel-case-string-arg,
-            loc: {
-              source: camel-case-string-arg,
-            },
-          },
-          exp: {
-            isStatic: false,
-            loc: {
-              source: foo,
-            },
-          },
-          loc: {
-            source: camel-case-string-arg="foo",
-          },
-          modifiers: [
-            ,
-          ],
-          name: bind,
-          type: 6,
-        },
-      ]
-    `);
-  });
-  it('boolean arg', () => {
-    expect(mapAttributesAndDirectives({ booleanarg: true })).toMatchInlineSnapshot(`
-      [
-        {
-          arg: {
-            content: booleanarg,
-            loc: {
-              source: booleanarg,
-            },
-          },
-          exp: {
-            isStatic: false,
-            loc: {
-              source: true,
-            },
-          },
-          loc: {
-            source: :booleanarg="true",
-          },
-          modifiers: [
-            ,
-          ],
-          name: bind,
-          type: 6,
-        },
-      ]
-    `);
-  });
-  it('string arg', () => {
-    expect(mapAttributesAndDirectives({ stringarg: 'bar' })).toMatchInlineSnapshot(`
-      [
-        {
-          arg: {
-            content: stringarg,
-            loc: {
-              source: stringarg,
-            },
-          },
-          exp: {
-            isStatic: false,
-            loc: {
-              source: bar,
-            },
-          },
-          loc: {
-            source: stringarg="bar",
-          },
-          modifiers: [
-            ,
-          ],
-          name: bind,
-          type: 6,
-        },
-      ]
-    `);
-  });
-  it('number arg', () => {
-    expect(mapAttributesAndDirectives({ numberarg: 2023 })).toMatchInlineSnapshot(`
-      [
-        {
-          arg: {
-            content: numberarg,
-            loc: {
-              source: numberarg,
-            },
-          },
-          exp: {
-            isStatic: false,
-            loc: {
-              source: 2023,
-            },
-          },
-          loc: {
-            source: :numberarg="2023",
-          },
-          modifiers: [
-            ,
-          ],
-          name: bind,
-          type: 6,
-        },
-      ]
-    `);
-  });
-  it('camelCase boolean, string, and number Args', () => {
-    expect(
-      mapAttributesAndDirectives({
-        camelCaseBooleanArg: true,
-        camelCaseStringArg: 'foo',
-        cameCaseNumberArg: 2023,
-      })
-    ).toMatchInlineSnapshot(`
-      [
-        {
-          arg: {
-            content: camel-case-boolean-arg,
-            loc: {
-              source: camel-case-boolean-arg,
-            },
-          },
-          exp: {
-            isStatic: false,
-            loc: {
-              source: true,
-            },
-          },
-          loc: {
-            source: :camel-case-boolean-arg="true",
-          },
-          modifiers: [
-            ,
-          ],
-          name: bind,
-          type: 6,
-        },
-        {
-          arg: {
-            content: camel-case-string-arg,
-            loc: {
-              source: camel-case-string-arg,
-            },
-          },
-          exp: {
-            isStatic: false,
-            loc: {
-              source: foo,
-            },
-          },
-          loc: {
-            source: camel-case-string-arg="foo",
-          },
-          modifiers: [
-            ,
-          ],
-          name: bind,
-          type: 6,
-        },
-        {
-          arg: {
-            content: came-case-number-arg,
-            loc: {
-              source: came-case-number-arg,
-            },
-          },
-          exp: {
-            isStatic: false,
-            loc: {
-              source: 2023,
-            },
-          },
-          loc: {
-            source: :came-case-number-arg="2023",
-          },
-          modifiers: [
-            ,
-          ],
-          name: bind,
-          type: 6,
-        },
-      ]
-    `);
-  });
+  expect(code).toBe(
+    `a="foo" b='"I am double quoted"' :c="42" d :e="false" :f="[1,2,3]" :g="{'g1':'foo','b2':42}" :k="BigInt(9007199254740991)" :l="Symbol()" :m="Symbol('foo')"`
+  );
 });
 
-describe('Vue3: sourceDecorator->generateAttributesSource()', () => {
-  it('camelCase boolean Arg', () => {
-    expect(
-      generateAttributesSource(
-        mapAttributesAndDirectives({ camelCaseBooleanArg: true }),
-        { camelCaseBooleanArg: true },
-        [{ camelCaseBooleanArg: { type: 'boolean' } }] as any
-      )
-    ).toMatchInlineSnapshot(`:camel-case-boolean-arg="true"`);
-  });
-  it('camelCase string Arg', () => {
-    expect(
-      generateAttributesSource(
-        mapAttributesAndDirectives({ camelCaseStringArg: 'foo' }),
-        { camelCaseStringArg: 'foo' },
-        [{ camelCaseStringArg: { type: 'string' } }] as any
-      )
-    ).toMatchInlineSnapshot(`camel-case-string-arg="foo"`);
-  });
+test('should generate source code for slots', () => {
+  // slot code generator should support primitive values (string, number etc.)
+  // but also VNodes (e.g. created using h()) so custom Vue components can also be used
+  // inside slots with proper generated code
+
+  const slots = {
+    default: 'default content',
+    a: 'a content',
+    b: 42,
+    c: true,
+    // single VNode without props
+    d: h('div', 'd content'),
+    // VNode with props and single child
+    e: h('div', { style: 'color:red' }, 'e content'),
+    // VNode with props and single child returned as getter
+    f: h('div', { style: 'color:red' }, () => 'f content'),
+    // VNode with multiple children
+    g: h('div', { style: 'color:red' }, [
+      'child 1',
+      h('span', { style: 'color:green' }, 'child 2'),
+    ]),
+    // VNode multiple children but returned as getter
+    h: h('div', { style: 'color:red' }, () => [
+      'child 1',
+      h('span', { style: 'color:green' }, 'child 2'),
+    ]),
+    // VNode with multiple and nested children
+    i: h('div', { style: 'color:red' }, [
+      'child 1',
+      h('span', { style: 'color:green' }, ['nested child 1', h('p', 'nested child 2')]),
+    ]),
+    j: ['child 1', 'child 2'],
+    k: null,
+    l: { foo: 'bar' },
+    m: BigInt(9007199254740991),
+  };
+
+  const expectedCode = `default content
+
+<template #a>a content</template>
+
+<template #b>42</template>
+
+<template #c>true</template>
+
+<template #d><div>d content</div></template>
+
+<template #e><div style="color:red">e content</div></template>
+
+<template #f><div style="color:red">f content</div></template>
+
+<template #g><div style="color:red">child 1
+<span style="color:green">child 2</span></div></template>
 
-  it('camelCase boolean, string, and number Args', () => {
-    expect(
-      generateAttributesSource(
-        mapAttributesAndDirectives({
-          camelCaseBooleanArg: true,
-          camelCaseStringArg: 'foo',
-          cameCaseNumberArg: 2023,
-        }),
-        {
-          camelCaseBooleanArg: true,
-          camelCaseStringArg: 'foo',
-          cameCaseNumberArg: 2023,
-        },
-        [] as any
-      )
-    ).toMatchInlineSnapshot(
-      `:camel-case-boolean-arg="true" camel-case-string-arg="foo" :came-case-number-arg="2023"`
-    );
-  });
+<template #h><div style="color:red">child 1
+<span style="color:green">child 2</span></div></template>
+
+<template #i><div style="color:red">child 1
+<span style="color:green">nested child 1
+<p>nested child 2</p></span></div></template>
+
+<template #j>child 1
+child 2</template>
+
+<template #l>{"foo":"bar"}</template>
+
+<template #m>{{ BigInt(9007199254740991) }}</template>`;
+
+  let actualCode = generateSlotSourceCode(slots, Object.keys(slots));
+  expect(actualCode).toBe(expectedCode);
+
+  // should generate the same code if getters/functions are used to return the slot content
+  const slotsWithGetters = Object.entries(slots).reduce<
+    Record<string, () => (typeof slots)[keyof typeof slots]>
+  >((obj, [slotName, value]) => {
+    obj[slotName] = () => value;
+    return obj;
+  }, {});
+
+  actualCode = generateSlotSourceCode(slotsWithGetters, Object.keys(slotsWithGetters));
+  expect(actualCode).toBe(expectedCode);
 });
 
-describe('Vue3: sourceDecorator->attributeSoure()', () => {
-  it('camelCase boolean Arg', () => {
-    expect(attributeSource('stringArg', 'foo')).toMatchInlineSnapshot(`stringArg="foo"`);
-  });
+test('should generate source code for slots with bindings', () => {
+  type TestBindings = {
+    foo: string;
+    bar?: number;
+  };
+
+  const slots = {
+    a: ({ foo, bar }: TestBindings) => `Slot with bindings ${foo} and ${bar}`,
+    b: ({ foo }: TestBindings) => h('a', { href: foo, target: foo }, `Test link: ${foo}`),
+  };
+
+  const expectedCode = `<template #a="{ foo, bar }">Slot with bindings {{ foo }} and {{ bar }}</template>
+
+<template #b="{ foo }"><a :href="foo" :target="foo">Test link: {{ foo }}</a></template>`;
+
+  const actualCode = generateSlotSourceCode(slots, Object.keys(slots));
+  expect(actualCode).toBe(expectedCode);
+});
 
-  it('html event attribute should convert to vue event directive', () => {
-    expect(attributeSource('onClick', () => {})).toMatchInlineSnapshot(`v-on:click='()=>({})'`);
-    expect(attributeSource('onclick', () => {})).toMatchInlineSnapshot(`v-on:click='()=>({})'`);
-  });
-  it('normal html attribute should not convert to vue event directive', () => {
-    expect(attributeSource('on-click', () => {})).toMatchInlineSnapshot(`on-click='()=>({})'`);
-  });
-  it('The value undefined or empty string must not be returned.', () => {
-    expect(attributeSource('icon', undefined)).toMatchInlineSnapshot(`icon=""`);
-    expect(attributeSource('icon', '')).toMatchInlineSnapshot(`icon=""`);
-  });
-  it('htmlEventAttributeToVueEventAttribute  onEv => v-on:', () => {
-    const htmlEventAttributeToVueEventAttribute = (attribute: string) => {
-      return htmlEventToVueEvent(attribute);
-    };
-    expect(/^on[A-Za-z]/.test('onClick')).toBeTruthy();
-    expect(htmlEventAttributeToVueEventAttribute('onclick')).toMatchInlineSnapshot(`v-on:click`);
-    expect(htmlEventAttributeToVueEventAttribute('onClick')).toMatchInlineSnapshot(`v-on:click`);
-    expect(htmlEventAttributeToVueEventAttribute('onChange')).toMatchInlineSnapshot(`v-on:change`);
-    expect(htmlEventAttributeToVueEventAttribute('onFocus')).toMatchInlineSnapshot(`v-on:focus`);
-    expect(htmlEventAttributeToVueEventAttribute('on-focus')).toMatchInlineSnapshot(`on-focus`);
-  });
+test.each([
+  { __docgenInfo: 'invalid-value', slotNames: [] },
+  { __docgenInfo: {}, slotNames: [] },
+  { __docgenInfo: { slots: 'invalid-value' }, slotNames: [] },
+  { __docgenInfo: { slots: ['invalid-value'] }, slotNames: [] },
+  {
+    __docgenInfo: { slots: [{ name: 'slot-1' }, { name: 'slot-2' }, { notName: 'slot-3' }] },
+    slotNames: ['slot-1', 'slot-2'],
+  },
+])('should extract slots names from __docgenInfo', ({ __docgenInfo, slotNames }) => {
+  const actualNames = extractSlotNames({ __docgenInfo });
+  expect(actualNames).toStrictEqual(slotNames);
 });
diff --git a/code/renderers/vue3/src/docs/sourceDecorator.ts b/code/renderers/vue3/src/docs/sourceDecorator.ts
index 525cfbbfd281..6c32020f74e9 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.ts
@@ -1,46 +1,80 @@
 /* eslint-disable no-underscore-dangle */
+import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
 import { addons } from '@storybook/preview-api';
-import type { ArgTypes, Args, StoryContext } from '@storybook/types';
-
-import { SourceType, SNIPPET_RENDERED } from '@storybook/docs-tools';
-
-import type {
-  ElementNode,
-  AttributeNode,
-  DirectiveNode,
-  TextNode,
-  InterpolationNode,
-  TemplateChildNode,
-} from '@vue/compiler-core';
-import { baseParse } from '@vue/compiler-core';
-import type { ConcreteComponent, FunctionalComponent, VNode } from 'vue';
-import { h, isVNode, watch } from 'vue';
-import kebabCase from 'lodash/kebabCase';
-import {
-  attributeSource,
-  htmlEventAttributeToVueEventAttribute,
-  omitEvent,
-  evalExp,
-  replaceValueWithRef,
-  generateExpression,
-} from './utils';
-import type { VueRenderer } from '../types';
+import type { VNode } from 'vue';
+import { isVNode, watch } from 'vue';
+import type { Args, Decorator, StoryContext } from '../public-types';
 
 /**
- * Check if the sourcecode should be generated.
- *
- * @param context StoryContext
+ * Decorator to generate Vue source code for stories.
  */
-const skipSourceRender = (context: StoryContext<VueRenderer>) => {
-  const sourceParams = context?.parameters.docs?.source;
-  const isArgsStory = context?.parameters.__isArgsStory;
-  const isDocsViewMode = context?.viewMode === 'docs';
+export const sourceDecorator: Decorator = (storyFn, ctx) => {
+  const story = storyFn();
+  if (shouldSkipSourceCodeGeneration(ctx)) return story;
+
+  const channel = addons.getChannel();
+
+  watch(
+    () => ctx.args,
+    () => {
+      const sourceCode = generateSourceCode(ctx);
+
+      channel.emit(SNIPPET_RENDERED, {
+        id: ctx.id,
+        args: ctx.args,
+        source: sourceCode,
+        format: 'vue',
+      });
+    },
+    { immediate: true, deep: true }
+  );
+
+  return story;
+};
+
+/**
+ * Generate Vue source code for the given Story.
+ * @returns Source code or empty string if source code could not be generated.
+ */
+export const generateSourceCode = (
+  ctx: Pick<StoryContext, 'title' | 'component' | 'args'>
+): string => {
+  const componentName = ctx.component?.__name || ctx.title.split('/').at(-1)!;
 
-  // always render if the user forces it
+  const slotNames = extractSlotNames(ctx.component);
+  const slotSourceCode = generateSlotSourceCode(ctx.args, slotNames);
+  const propsSourceCode = generatePropsSourceCode(ctx.args, slotNames);
+
+  if (slotSourceCode) {
+    return `<template>
+    <${componentName} ${propsSourceCode}> ${slotSourceCode} </${componentName}>
+    </template>`;
+  }
+
+  // prefer self closing tag if no slot content exists
+  return `<template>
+  <${componentName} ${propsSourceCode} />
+  </template>`;
+};
+
+/**
+ * Checks if the source code generation should be skipped for the given Story context.
+ * Will be true if one of the following is true:
+ * - view mode is not "docs"
+ * - story is no arg story
+ * - story has set custom source code via parameters.docs.source.code
+ * - story has set source type to "code" via parameters.docs.source.type
+ */
+export const shouldSkipSourceCodeGeneration = (context: StoryContext): boolean => {
+  const sourceParams = context?.parameters.docs?.source;
   if (sourceParams?.type === SourceType.DYNAMIC) {
+    // always render if the user forces it
     return false;
   }
 
+  const isArgsStory = context?.parameters.__isArgsStory;
+  const isDocsViewMode = context?.viewMode === 'docs';
+
   // never render if the user is forcing the block to render code, or
   // if the user provides code, or if it's not an args story.
   return (
@@ -49,271 +83,277 @@ const skipSourceRender = (context: StoryContext<VueRenderer>) => {
 };
 
 /**
- *
- * @param _args
- * @param argTypes
- * @param byRef
+ * Gets all slot names from the `__docgenInfo` of the given component if available.
+ * Requires Storybook docs addon to be enabled.
+ * Default slot will always be sorted first, remaining slots are sorted alphabetically.
  */
-export function generateAttributesSource(
-  tempArgs: (AttributeNode | DirectiveNode)[],
-  args: Args,
-  argTypes: ArgTypes,
-  byRef?: boolean
-): string {
-  return Object.keys(tempArgs)
-    .map((key: any) => {
-      const source = tempArgs[key].loc.source.replace(/\$props/g, 'args');
-      const argKey = (tempArgs[key] as DirectiveNode).arg?.loc.source;
-      return byRef && argKey
-        ? replaceValueWithRef(source, args, argKey)
-        : evalExp(source, omitEvent(args));
-    })
-    .join(' ');
-}
-/**
- * map attributes and directives
- * @param props
- */
-function mapAttributesAndDirectives(props: Args) {
-  const tranformKey = (key: string) => (key.startsWith('on') ? key : kebabCase(key));
-  return Object.keys(props).map(
-    (key) =>
-      ({
-        name: 'bind',
-        type: ['v-', '@', 'v-on'].includes(key) ? 7 : 6, // 6 is attribute, 7 is directive
-        arg: { content: tranformKey(key), loc: { source: tranformKey(key) } }, // attribute name or directive name (v-bind, v-on, v-model)
-        loc: { source: attributeSource(tranformKey(key), props[key]) }, // attribute value or directive value
-        exp: { isStatic: false, loc: { source: props[key] } }, // directive expression
-        modifiers: [''],
-      }) as unknown as AttributeNode
-  );
-}
-/**
- *  map slots
- * @param slotsArgs
- */
-function mapSlots(
-  slotsArgs: Args,
-  generateComponentSource: any,
-  slots: { name: string; scoped?: boolean; bindings?: { name: string }[] }[]
-): TextNode[] {
-  return Object.keys(slotsArgs).map((key) => {
-    const slot = slotsArgs[key];
-    let slotContent = '';
-
-    const scropedArgs = slots
-      .find((s) => s.name === key && s.scoped)
-      ?.bindings?.map((b) => b.name)
-      .join(',');
-
-    if (typeof slot === 'string') {
-      slotContent = slot;
-    } else if (typeof slot === 'function') {
-      slotContent = generateExpression(slot);
-    } else if (isVNode(slot)) {
-      slotContent = generateComponentSource(slot);
-    } else if (typeof slot === 'object' && !isVNode(slot)) {
-      slotContent = JSON.stringify(slot);
-    }
+export const extractSlotNames = (
+  component?: StoryContext['component'] & { __docgenInfo?: unknown }
+): string[] => {
+  if (!component || !('__docgenInfo' in component)) return [];
+
+  // type check __docgenInfo to prevent errors
+  if (!component.__docgenInfo || typeof component.__docgenInfo !== 'object') return [];
+  if (
+    !('slots' in component.__docgenInfo) ||
+    !component.__docgenInfo.slots ||
+    !Array.isArray(component.__docgenInfo.slots)
+  ) {
+    return [];
+  }
+
+  return component.__docgenInfo.slots
+    .map((slot) => slot.name)
+    .filter((i): i is string => typeof i === 'string')
+    .sort((a, b) => {
+      if (a === 'default') return -1;
+      if (b === 'default') return 1;
+      return a.localeCompare(b);
+    });
+};
 
-    const bindingsString = scropedArgs ? `="{${scropedArgs}}"` : '';
-    slotContent = slot ? `<template #${key}${bindingsString}>${slotContent}</template>` : ``;
-
-    return {
-      type: 2,
-      content: slotContent,
-      loc: {
-        source: slotContent,
-        start: { offset: 0, line: 1, column: 0 },
-        end: { offset: 0, line: 1, column: 0 },
-      },
-    };
-  });
-  // TODO: handle other cases (array, object, html,etc)
-}
 /**
+ * Generates the source code for the given Vue component properties.
  *
- * @param args generate script setup from args
- * @param argTypes
+ * @param args Story args / property values.
+ * @param slotNames All slot names of the component. Needed to not generate code for args that are slots.
+ * Can be extracted using `extractSlotNames()`.
  */
-function generateScriptSetup(args: Args, argTypes: ArgTypes, components: any[]): string {
-  const scriptLines = Object.keys(args).map(
-    (key: any) =>
-      `const ${key} = ${
-        typeof args[key] === 'function' ? `()=>{}` : `ref(${JSON.stringify(args[key])});`
-      }`
-  );
-  scriptLines.unshift(`import { ref } from "vue";`);
+export const generatePropsSourceCode = (
+  args: Record<string, unknown>,
+  slotNames: string[]
+): string => {
+  const props: string[] = [];
+
+  Object.entries(args).forEach(([propName, value]) => {
+    // ignore slots
+    if (slotNames.includes(propName)) return;
+
+    switch (typeof value) {
+      case 'string':
+        if (value === '') return; // do not render empty strings
+
+        if (value.includes('"')) {
+          props.push(`${propName}='${value}'`);
+        } else {
+          props.push(`${propName}="${value}"`);
+        }
+
+        break;
+      case 'number':
+        props.push(`:${propName}="${value}"`);
+        break;
+      case 'bigint':
+        props.push(`:${propName}="BigInt(${value.toString()})"`);
+        break;
+      case 'boolean':
+        props.push(value === true ? propName : `:${propName}="false"`);
+        break;
+      case 'object':
+        if (value === null) return; // do not render null values
+        props.push(`:${propName}="${JSON.stringify(value).replaceAll('"', "'")}"`);
+        break;
+      case 'symbol': {
+        const symbol = `Symbol(${value.description ? `'${value.description}'` : ''})`;
+        props.push(`:${propName}="${symbol}"`);
+        break;
+      }
+      case 'function':
+        // TODO: check if functions should be rendered in source code
+        break;
+    }
+  });
+
+  return props.join(' ');
+};
 
-  return `<script lang='ts' setup>${scriptLines.join('\n')}</script>`;
-}
 /**
- * get template components one or more
- * @param renderFn
+ * Generates the source code for the given Vue component slots.
+ *
+ * @param args Story args.
+ * @param slotNames All slot names of the component. Needed to only generate slots and ignore props etc.
+ * Can be extracted using `extractSlotNames()`.
  */
-function getTemplateComponents(
-  renderFn: any,
-  context?: StoryContext<VueRenderer>
-): (TemplateChildNode | VNode)[] {
-  try {
-    const originalStoryFn = renderFn;
+export const generateSlotSourceCode = (args: Args, slotNames: string[]): string => {
+  /** List of slot source codes (e.g. <template #slotName>Content</template>) */
+  const slotSourceCodes: string[] = [];
 
-    const storyFn = originalStoryFn ? originalStoryFn(context?.args, context) : context?.component;
-    const story = typeof storyFn === 'function' ? storyFn() : storyFn;
+  slotNames.forEach((slotName) => {
+    const arg = args[slotName];
+    if (!arg) return;
 
-    const { template } = story;
+    const slotContent = generateSlotChildrenSourceCode([arg]);
+    if (!slotContent) return; // do not generate source code for empty slots
 
-    if (!template) return [h(story, context?.args)];
-    return getComponents(template);
-  } catch (e) {
-    return [];
-  }
-}
+    const slotBindings = typeof arg === 'function' ? getFunctionParamNames(arg) : [];
 
-function getComponents(template: string): (TemplateChildNode | VNode)[] {
-  const ast = baseParse(template, {
-    isNativeTag: () => true,
-    decodeEntities: (rawtext, asAttr) => rawtext,
+    if (slotName === 'default' && !slotBindings.length) {
+      // do not add unnecessary "<template #default>" tag since the default slot content without bindings
+      // can be put directly into the slot without need of "<template #default>"
+      slotSourceCodes.push(slotContent);
+    } else {
+      slotSourceCodes.push(
+        `<template ${slotBindingsToString(slotName, slotBindings)}>${slotContent}</template>`
+      );
+    }
   });
-  const components = ast?.children;
-  if (!components) return [];
-  return components;
-}
+
+  return slotSourceCodes.join('\n\n');
+};
 
 /**
- * Generate a vue3 template.
- *
- * @param component Component
- * @param args Args
- * @param argTypes ArgTypes
- * @param slotProp Prop used to simulate a slot
+ * Generates the source code for the given slot children (the code inside <template #slotName></template>).
  */
+const generateSlotChildrenSourceCode = (children: unknown[]): string => {
+  const slotChildrenSourceCodes: string[] = [];
 
-export function generateTemplateSource(
-  componentOrNodes: (ConcreteComponent | TemplateChildNode)[] | TemplateChildNode | VNode,
-  { args, argTypes }: { args: Args; argTypes: ArgTypes },
-  byRef = false
-) {
-  const isElementNode = (node: any) => node && node.type === 1;
-  const isInterpolationNode = (node: any) => node && node.type === 5;
-  const isTextNode = (node: any) => node && node.type === 2;
-
-  const generateComponentSource = (
-    componentOrNode: ConcreteComponent | TemplateChildNode | VNode
-  ) => {
-    if (isElementNode(componentOrNode)) {
-      const { tag: name, props: attributes, children } = componentOrNode as ElementNode;
-      const childSources: string =
-        typeof children === 'string'
-          ? children
-          : children.map((child: TemplateChildNode) => generateComponentSource(child)).join('');
-      const props = generateAttributesSource(attributes, args, argTypes, byRef);
-
-      return childSources === ''
-        ? `<${name} ${props} />`
-        : `<${name} ${props}>${childSources}</${name}>`;
+  /**
+   * Recursively generates the source code for a single slot child and all its children.
+   * @returns Source code for child and all nested children or empty string if child is of a non-supported type.
+   */
+  const generateSingleChildSourceCode = (child: unknown): string => {
+    if (isVNode(child)) {
+      return generateVNodeSourceCode(child);
     }
 
-    if (isTextNode(componentOrNode)) {
-      const { content } = componentOrNode as TextNode;
-      return content;
-    }
-    if (isInterpolationNode(componentOrNode)) {
-      const { content } = componentOrNode as InterpolationNode;
-      const expValue = evalExp(content.loc.source, args);
-      if (expValue === content.loc.source) return `{{${expValue}}}`;
-      return eval(expValue);
-    }
-    if (isVNode(componentOrNode)) {
-      const vnode = componentOrNode as VNode;
-      const { props, type, children } = vnode;
-      const slotsProps = typeof children === 'string' ? undefined : (children as Args);
-      const componentSlots = (type as any)?.__docgenInfo?.slots;
-
-      const attrsProps = slotsProps
-        ? Object.fromEntries(
-            Object.entries(props ?? {})
-              .filter(([key, value]) => !slotsProps[key] && !['class', 'style'].includes(key))
-              .map(([key, value]) => [key, value])
-          )
-        : props;
-      const attributes = mapAttributesAndDirectives(attrsProps ?? {});
-      const slotArgs = Object.fromEntries(
-        Object.entries(props ?? {}).filter(([key, value]) => slotsProps?.[key])
-      );
+    switch (typeof child) {
+      case 'string':
+      case 'number':
+      case 'boolean':
+        return child.toString();
 
-      const childSources: string = children
-        ? typeof children === 'string'
-          ? children
-          : mapSlots(slotArgs as Args, generateComponentSource, componentSlots ?? [])
-              .map((child) => child.content)
-              .join('')
-        : '';
-      const name =
-        typeof type === 'string'
-          ? type
-          : (type as FunctionalComponent).name ||
-            (type as ConcreteComponent).__name ||
-            (type as any).__docgenInfo?.displayName;
-      const propsSource = generateAttributesSource(attributes, args, argTypes, byRef);
-      return childSources.trim() === ''
-        ? `<${name} ${propsSource}/>`
-        : `<${name} ${propsSource}>${childSources}</${name}>`;
-    }
+      case 'object':
+        if (child === null) return '';
+        if (Array.isArray(child)) {
+          // if child also has children, we generate them recursively
+          return child
+            .map(generateSingleChildSourceCode)
+            .filter((code) => code !== '')
+            .join('\n');
+        }
+        return JSON.stringify(child);
+
+      case 'function': {
+        const paramNames = getFunctionParamNames(child).filter(
+          (param) => !['{', '}'].includes(param)
+        );
+
+        const parameters = paramNames.reduce<Record<string, string>>((obj, param) => {
+          obj[param] = `{{ ${param} }}`;
+          return obj;
+        }, {});
 
-    return null;
+        const returnValue = child(parameters);
+        let slotSourceCode = generateSlotChildrenSourceCode([returnValue]);
+
+        // if slot bindings are used for properties of other components, our {{ paramName }} is incorrect because
+        // it would generate e.g. my-prop="{{ paramName }}", therefore, we replace it here to e.g. :my-prop="paramName"
+        paramNames.forEach((param) => {
+          slotSourceCode = slotSourceCode.replaceAll(
+            new RegExp(` (\\S+)="{{ ${param} }}"`, 'g'),
+            ` :$1="${param}"`
+          );
+        });
+
+        return slotSourceCode;
+      }
+
+      case 'bigint':
+        return `{{ BigInt(${child.toString()}) }}`;
+
+      // the only missing case here is "symbol"
+      // because rendering a symbol as slot / HTML does not make sense and is not supported by Vue
+      default:
+        return '';
+    }
   };
 
-  const componentsOrNodes = Array.isArray(componentOrNodes) ? componentOrNodes : [componentOrNodes];
-  const source = componentsOrNodes
-    .map((componentOrNode) => generateComponentSource(componentOrNode))
-    .join(' ');
-  return source || null;
-}
+  children.forEach((child) => {
+    const sourceCode = generateSingleChildSourceCode(child);
+    if (sourceCode !== '') slotChildrenSourceCodes.push(sourceCode);
+  });
+
+  return slotChildrenSourceCodes.join('\n');
+};
 
 /**
- *  source decorator.
- * @param storyFn Fn
- * @param context  StoryContext
+ * Generates source code for the given VNode and all its children (e.g. created using `h(MyComponent)` or `h("div")`).
  */
-export const sourceDecorator = (storyFn: any, context: StoryContext<VueRenderer>) => {
-  const skip = skipSourceRender(context);
-  const story = storyFn();
+const generateVNodeSourceCode = (vnode: VNode): string => {
+  let componentName = 'component';
+  if (typeof vnode.type === 'string') {
+    // this is e.g. the case when rendering native HTML elements like, h("div")
+    componentName = vnode.type;
+  } else if (typeof vnode.type === 'object' && '__name' in vnode.type) {
+    // this is the case when using custom Vue components like h(MyComponent)
+    if ('name' in vnode.type && vnode.type.name) {
+      // prefer custom component name set by the developer
+      componentName = vnode.type.name;
+    } else if ('__name' in vnode.type && vnode.type.__name) {
+      // otherwise use name inferred by Vue from the file name
+      componentName = vnode.type.__name;
+    }
+  }
 
-  watch(
-    () => context.args,
-    () => {
-      if (!skip) {
-        generateSource(context);
-      }
-    },
-    { immediate: true, deep: true }
-  );
-  return story;
+  let childrenCode = '';
+
+  if (typeof vnode.children === 'string') {
+    childrenCode = vnode.children;
+  } else if (Array.isArray(vnode.children)) {
+    childrenCode = generateSlotChildrenSourceCode(vnode.children);
+  } else if (vnode.children) {
+    // children are an object, just like if regular Story args where used
+    // so we can generate the source code with the regular "generateSlotSourceCode()".
+    childrenCode = generateSlotSourceCode(
+      vnode.children,
+      // $stable is a default property in vnode.children so we need to filter it out
+      // to not generate source code for it
+      Object.keys(vnode.children).filter((i) => i !== '$stable')
+    );
+  }
+
+  const props = vnode.props ? generatePropsSourceCode(vnode.props, []) : '';
+
+  // prefer self closing tag if no children exist
+  if (childrenCode)
+    return `<${componentName}${props ? ` ${props}` : ''}>${childrenCode}</${componentName}>`;
+  return `<${componentName}${props ? ` ${props}` : ''} />`;
 };
 
-export function generateSource(context: StoryContext<VueRenderer>) {
-  const channel = addons.getChannel();
-  const { args = {}, argTypes = {}, id } = context || {};
-  const storyComponents = getTemplateComponents(context?.originalStoryFn, context);
+/**
+ * Gets a list of parameters for the given function since func.arguments can not be used since
+ * it throws a TypeError.
+ *
+ * If the arguments are destructured (e.g. "func({ foo, bar })"), the returned array will also
+ * include "{" and "}".
+ *
+ * @see Based on https://stackoverflow.com/a/9924463
+ */
+// eslint-disable-next-line @typescript-eslint/ban-types
+const getFunctionParamNames = (func: Function): string[] => {
+  const STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/gm;
+  const ARGUMENT_NAMES = /([^\s,]+)/g;
 
-  const withScript = context?.parameters?.docs?.source?.withScriptSetup || false;
-  const generatedScript = withScript ? generateScriptSetup(args, argTypes, storyComponents) : '';
-  const generatedTemplate = generateTemplateSource(storyComponents, context, withScript);
+  const fnStr = func.toString().replace(STRIP_COMMENTS, '');
+  const result = fnStr.slice(fnStr.indexOf('(') + 1, fnStr.indexOf(')')).match(ARGUMENT_NAMES);
+  if (result === null) return [];
+  return result;
+};
 
-  if (generatedTemplate) {
-    const source = `${generatedScript}\n <template>\n ${generatedTemplate} \n</template>`;
-    channel.emit(SNIPPET_RENDERED, { id, args, source, format: 'vue' });
-    return source;
-  }
-  return null;
-}
-// export local function for testing purpose
-export {
-  generateScriptSetup,
-  getTemplateComponents as getComponentsFromRenderFn,
-  getComponents as getComponentsFromTemplate,
-  mapAttributesAndDirectives,
-  attributeSource,
-  htmlEventAttributeToVueEventAttribute,
+/**
+ * Converts the given slot bindings/parameters to a string.
+ *
+ * @example
+ * If no params: '#slotName'
+ * If params: '#slotName="{ foo, bar }"'
+ */
+const slotBindingsToString = (
+  slotName: string,
+  params: string[]
+): `#${string}` | `#${string}="${string}"` => {
+  if (!params.length) return `#${slotName}`;
+  if (params.length === 1) return `#${slotName}="${params[0]}"`;
+
+  // parameters might be destructured so remove duplicated brackets here
+  return `#${slotName}="{ ${params.filter((i) => !['{', '}'].includes(i)).join(', ')} }"`;
 };
diff --git a/code/renderers/vue3/src/entry-preview-docs.ts b/code/renderers/vue3/src/entry-preview-docs.ts
index a7651d44f8c9..420642148291 100644
--- a/code/renderers/vue3/src/entry-preview-docs.ts
+++ b/code/renderers/vue3/src/entry-preview-docs.ts
@@ -1,7 +1,6 @@
 import { enhanceArgTypes, extractComponentDescription } from '@storybook/docs-tools';
 import type { ArgTypesEnhancer } from '@storybook/types';
 import { extractArgTypes } from './docs/extractArgTypes';
-import { sourceCodeDecorator } from './docs/source-code-generator';
 import { sourceDecorator } from './docs/sourceDecorator';
 import type { VueRenderer } from './types';
 
@@ -13,13 +12,6 @@ export const parameters = {
   },
 };
 
-// TODO: check with Storybook maintainers how to release the new decorator.
-// Maybe as opt-in parameter for now which might become the default in future Storybook
-// versions once its well tested by projects.
-// Or add another type to the "SourceType" enum for this
-const codeSnippetType = 'new' as 'legacy' | 'new';
-const codeDecoratorToUse = codeSnippetType === 'legacy' ? sourceDecorator : sourceCodeDecorator;
-
-export const decorators = [codeDecoratorToUse];
+export const decorators = [sourceDecorator];
 
 export const argTypesEnhancers: ArgTypesEnhancer<VueRenderer>[] = [enhanceArgTypes];

From 14405ba190eb3d23c25fec2a104cbcb95feab851 Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Sat, 8 Jun 2024 14:31:27 +0200
Subject: [PATCH 16/24] chore: fix unwanted rebase changes

---
 CHANGELOG.md                              | 189 +++++++++++-----------
 code/frameworks/nextjs/src/swc/loader.ts  |   4 +-
 code/frameworks/nextjs/src/types.ts       |  10 +-
 code/lib/types/src/modules/core-common.ts |   6 +-
 docs/versions/latest.json                 |   7 +-
 docs/versions/next.json                   |   7 +-
 6 files changed, 112 insertions(+), 111 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 83a6c71a3ace..d157ccd8cd5e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -52,101 +52,102 @@ Storybook 8.1 is here with a tone of new features and bug fixes:
 <details>
 <summary>List of all updates</summary>
 
-- Addon-actions: Fix falsy args printing as object - 22163 - [#26917](https://github.com/storybookjs/storybook/pull/26917), thanks @Fatcat560!
-- Addon-docs: Fix MDX compilation with `@vitejs/plugin-react-swc` and plugins - [#26837](https://github.com/storybookjs/storybook/pull/26837), thanks @JReinhold!
-- Addon-docs: Fix `providerImportSource` extension - [#26868](https://github.com/storybookjs/storybook/pull/26868), thanks @bashmish!
-- Addon-docs: Fix `react-dom/server` imports breaking stories and docs - [#26557](https://github.com/storybookjs/storybook/pull/26557), thanks @JReinhold!
-- Addon-docs: Support Stencil based display names in source snippets - [#26592](https://github.com/storybookjs/storybook/pull/26592), thanks @yannbf!
-- Addon-docs: Fix `[Object object]` displayName in some JSX components - [#26566](https://github.com/storybookjs/storybook/pull/26566), thanks @yannbf!
-- Angular: Add type support for Angular\'s input signals - [#26413](https://github.com/storybookjs/storybook/pull/26413), thanks @valentinpalkovic!
-- Angular: Add type support for Angular\'s output signals - [#26546](https://github.com/storybookjs/storybook/pull/26546), thanks @valentinpalkovic!
-- API: Add API access to sidebar renderLabel - [#27099](https://github.com/storybookjs/storybook/pull/27099), thanks @shilman!
-- Args: Add possibility to mark controls as read-only - [#26577](https://github.com/storybookjs/storybook/pull/26577), thanks @valentinpalkovic!
-- Automigrations: Fix name of VTA addon - [#26816](https://github.com/storybookjs/storybook/pull/26816), thanks @valentinpalkovic!
-- Automigrations: Add migration note about new react-docgen default - [#26620](https://github.com/storybookjs/storybook/pull/26620), thanks @valentinpalkovic!
-- Automigrations: Fix missing support for mts vite config - [#26441](https://github.com/storybookjs/storybook/pull/26441), thanks @drik98!
-- Automigrations: Improve react-docgen automigration prompt - [#27106](https://github.com/storybookjs/storybook/pull/27106), thanks @valentinpalkovic!
-- Blocks: Add `of` prop to `Subtitle` - [#22552](https://github.com/storybookjs/storybook/pull/22552), thanks @joaonunomota!
-- Blocks: Add `of` prop to `Title` - [#23728](https://github.com/storybookjs/storybook/pull/23728), thanks @Sidnioulz!
-- CLI: Add --config-dir flag to add command - [#26771](https://github.com/storybookjs/storybook/pull/26771), thanks @eric-blue!
-- CLI: Add --config-dir flag to migrate command - [#26721](https://github.com/storybookjs/storybook/pull/26721), thanks @yannbf!
-- CLI: Add main.js `docs.autodocs` automigration - [#27089](https://github.com/storybookjs/storybook/pull/27089), thanks @shilman!
-- CLI: Add Visual Tests addon install auto-migration when upgrading to 8.0.x - [#26766](https://github.com/storybookjs/storybook/pull/26766), thanks @ndelangen!
-- CLI: Automigrate improve upgrade storybook related packages - [#26497](https://github.com/storybookjs/storybook/pull/26497), thanks @ndelangen!
-- CLI: Automigrations copy edits - [#26342](https://github.com/storybookjs/storybook/pull/26342), thanks @joevaugh4n!
-- CLI: Fix eslint configuration for string `extends` - [#27097](https://github.com/storybookjs/storybook/pull/27097), thanks @shilman!
-- CLI: Improve Yarn berry error parsing - [#26616](https://github.com/storybookjs/storybook/pull/26616), thanks @yannbf!
-- CLI: Improve `vite-config-file.ts` - [#26375](https://github.com/storybookjs/storybook/pull/26375), thanks @joevaugh4n!
-- CLI: Instruct the correct auto-migration command - [#26515](https://github.com/storybookjs/storybook/pull/26515), thanks @ndelangen!
-- CLI: Introduce package manager fallback for initializing Storybook in an empty directory with yarn1 - [#26500](https://github.com/storybookjs/storybook/pull/26500), thanks @valentinpalkovic!
-- CLI: Throw an error when running upgrade command in incorrect cwd - [#26585](https://github.com/storybookjs/storybook/pull/26585), thanks @yannbf!
-- Codemods: Escape filename given as argument - [#26430](https://github.com/storybookjs/storybook/pull/26430), thanks @YukiKitagata!
-- Controls: Add Channels API to search for files in the project root - [#26726](https://github.com/storybookjs/storybook/pull/26726), thanks @valentinpalkovic!
-- Controls: Added server channel to create a new story - [#26769](https://github.com/storybookjs/storybook/pull/26769), thanks @valentinpalkovic!
-- Controls: Add UI to create new story files - [#26875](https://github.com/storybookjs/storybook/pull/26875), thanks @valentinpalkovic!
-- Controls: Fix crashing when docgen extraction partially fails - [#26862](https://github.com/storybookjs/storybook/pull/26862), thanks @yannbf!
-- Controls: Fix disable condition in ArgControl component - [#26567](https://github.com/storybookjs/storybook/pull/26567), thanks @valentinpalkovic!
-- Controls: Fix number controls do not reset - [#26372](https://github.com/storybookjs/storybook/pull/26372), thanks @jiyiru!
-- Core: Add `duration` and `onClick` support to Notification API and improve Notification UI - [#26696](https://github.com/storybookjs/storybook/pull/26696), thanks @ghengeveld!
-- Core: Drop unneeded `UPDATE_STORY_ARGS` which was for SSv6 - [#25993](https://github.com/storybookjs/storybook/pull/25993), thanks @tmeasday!
-- Core: Ensure that simultaneous onStoriesChanged don\'t clobber each other - [#26882](https://github.com/storybookjs/storybook/pull/26882), thanks @tmeasday!
-- Core: Fix filters not being applied in WebKit - [#26949](https://github.com/storybookjs/storybook/pull/26949), thanks @JReinhold!
-- Core: Fix preloading too early - [#26442](https://github.com/storybookjs/storybook/pull/26442), thanks @ndelangen!
-- Core: Implement file formatter - [#26809](https://github.com/storybookjs/storybook/pull/26809), thanks @valentinpalkovic!
-- Core: Optimize clearNotification - [#26415](https://github.com/storybookjs/storybook/pull/26415), thanks @ndelangen!
-- Core: Save from controls - [#26827](https://github.com/storybookjs/storybook/pull/26827), thanks @ndelangen!
-- CSF: Allow default export without title or component attributes - [#26516](https://github.com/storybookjs/storybook/pull/26516), thanks @kasperpeulen!
-- CSF: Fix typings for control and other properties of argTypes - [#26824](https://github.com/storybookjs/storybook/pull/26824), thanks @kasperpeulen!
-- CSF: Make sure loaders/decorators can be used as array - [#26514](https://github.com/storybookjs/storybook/pull/26514), thanks @kasperpeulen!
-- Dependencies: Upgrade @storybook/csf to 0.1.5 - [#26958](https://github.com/storybookjs/storybook/pull/26958), thanks @Cherry!
-- Dependencies: Upgrade `@joshwooding/vite-plugin-react-docgen-typescript` to `0.3.1` - [#26673](https://github.com/storybookjs/storybook/pull/26673), thanks @joshwooding!
-- Dependencies: Upgrade `ejs` to `3.1.10` - [#27054](https://github.com/storybookjs/storybook/pull/27054), thanks @RiuSalvi!
-- Dependencies: Bump es-module-lexer - [#26737](https://github.com/storybookjs/storybook/pull/26737), thanks @valentinpalkovic!
-- Dependencies: Update globby dependency - [#26733](https://github.com/storybookjs/storybook/pull/26733), thanks @valentinpalkovic!
-- Dependencies: Update postcss-loader in Next.js framework - [#26707](https://github.com/storybookjs/storybook/pull/26707), thanks @valentinpalkovic!
-- Doc Tools: Signature Type Error Handling - [#26774](https://github.com/storybookjs/storybook/pull/26774), thanks @ethriel3695!
-- Indexer: Escape special characters in storyImport regex - [#22545](https://github.com/storybookjs/storybook/pull/22545), thanks @VojGin!
-- Maintenance: Fix performance regressions - [#26411](https://github.com/storybookjs/storybook/pull/26411), thanks @kasperpeulen!
-- MDX: Do not transform `http://` links - [#26488](https://github.com/storybookjs/storybook/pull/26488), thanks @JReinhold!
-- Next.js: Fix Compatibility with <v14.0.4 - [#27082](https://github.com/storybookjs/storybook/pull/27082), thanks @JReinhold!
-- Next.js: Fix next/font usage on Windows machines - [#26700](https://github.com/storybookjs/storybook/pull/26700), thanks @valentinpalkovic!
-- Next.js: Move sharp into optional deps - [#26787](https://github.com/storybookjs/storybook/pull/26787), thanks @shuta13!
-- Next.js: Support v14.2 useParams functionality - [#26874](https://github.com/storybookjs/storybook/pull/26874), thanks @yannbf!
-- Next.js: Implement next redirect and the RedirectBoundary - [#27050](https://github.com/storybookjs/storybook/pull/27050), thanks @yannbf!
-- Next.js: Support path aliases when no base url is set - [#26651](https://github.com/storybookjs/storybook/pull/26651), thanks @yannbf!
-- Node: Safe use of `document` for preview - [#24248](https://github.com/storybookjs/storybook/pull/24248), thanks @DylanPiercey!
-- Onboarding: Improve UI - [#27074](https://github.com/storybookjs/storybook/pull/27074), thanks @ndelangen!
-- Portable stories: Introduce experimental Playwright CT API and Support for more renderers - [#26063](https://github.com/storybookjs/storybook/pull/26063), thanks @yannbf!
-- Portable stories: Make setProjectAnnotations accept multiple types of imports - [#26316](https://github.com/storybookjs/storybook/pull/26316), thanks @yannbf!
-- Portable Stories: Remove link to missing docs - [#27075](https://github.com/storybookjs/storybook/pull/27075), thanks @JReinhold!
-- Portable Stories: Warn when rendering stories without cleaning up first - [#27008](https://github.com/storybookjs/storybook/pull/27008), thanks @JReinhold!
-- React-Docgen: Make sure to be able to handle empty unions - [#26639](https://github.com/storybookjs/storybook/pull/26639), thanks @kasperpeulen!
-- React: Support v19 betas in peer dependencies - [#26960](https://github.com/storybookjs/storybook/pull/26960), thanks @JReinhold!
-- React: Support v19 in `react-dom-shim` - [#26898](https://github.com/storybookjs/storybook/pull/26898), thanks @Tobbe!
-- Tags: Add project tags, negation, `dev`/`autodocs`/`test` system tags - [#26634](https://github.com/storybookjs/storybook/pull/26634), thanks @shilman!
-- Tags: Fix missing default tags if no `preview.js` - [#27098](https://github.com/storybookjs/storybook/pull/27098), thanks @shilman!
-- Test: Add @storybook/test as dev dependency - [#26458](https://github.com/storybookjs/storybook/pull/26458), thanks @arnabsen!
-- Test: Make spies reactive so that they can be logged by addon-actions - [#26740](https://github.com/storybookjs/storybook/pull/26740), thanks @kasperpeulen!
-- Test: Remove chai as dependency of @storybook/test - [#26852](https://github.com/storybookjs/storybook/pull/26852), thanks @kasperpeulen!
-- Test: Support module mocking with conditional subpath imports in `package.json` - [#26688](https://github.com/storybookjs/storybook/pull/26688), thanks @kasperpeulen!
-- Theming: Update emotion dependencies - [#26623](https://github.com/storybookjs/storybook/pull/26623), thanks @SimenB!
-- Typescript: Add types for `experimental-playwright` entries without `type:bundler` - [#27107](https://github.com/storybookjs/storybook/pull/27107), thanks @ndelangen!
-- UI: Add key property to list children in Highlight component - [#26471](https://github.com/storybookjs/storybook/pull/26471), thanks @valentinpalkovic!
-- UI: Fix not re-rendering tabs on state change - [#26899](https://github.com/storybookjs/storybook/pull/26899), thanks @lifeiscontent!
-- UI: Fix panel layout resizing do not apply when done too fast - [#26460](https://github.com/storybookjs/storybook/pull/26460), thanks @jorge-ji!
-- UI: Fix search result color contrast - [#26287](https://github.com/storybookjs/storybook/pull/26287), thanks @winchesHe!
-- UI: Fix sidebar search hanging when selecting a story in touch mode - [#26807](https://github.com/storybookjs/storybook/pull/26807), thanks @JReinhold!
-- UI: Fix theming of elements inside bars - [#26527](https://github.com/storybookjs/storybook/pull/26527), thanks @valentinpalkovic!
-- UI: Improve empty state of addon panel - [#26481](https://github.com/storybookjs/storybook/pull/26481), thanks @yannbf!
-- UI: Replace the icon prop in the Manager API - [#26477](https://github.com/storybookjs/storybook/pull/26477), thanks @cdedreuille!
-- Viewport: Fix missing style - [#26530](https://github.com/storybookjs/storybook/pull/26530), thanks @jpzwarte!
-- Vite: Merge assetsInclude property with Storybook default values - [#26860](https://github.com/storybookjs/storybook/pull/26860), thanks @yuemori!
-- Vue: Disable controls for events, slots, and expose - [#26751](https://github.com/storybookjs/storybook/pull/26751), thanks @shilman!
-- Webpack: Bump webpack-dev-middleware to patch high security issue - [#26655](https://github.com/storybookjs/storybook/pull/26655), thanks @jwilliams-met!
-- Webpack: Fix sourcemap generation in webpack react-docgen-loader - [#26676](https://github.com/storybookjs/storybook/pull/26676), thanks @valentinpalkovic!
-- Webpack: Hide runtime errors - [#23175](https://github.com/storybookjs/storybook/pull/23175), thanks @donaldpipowitch!
+  - Addon-actions: Fix falsy args printing as object - 22163 - [#26917](https://github.com/storybookjs/storybook/pull/26917), thanks @Fatcat560!
+  - Addon-docs: Fix MDX compilation with `@vitejs/plugin-react-swc` and plugins - [#26837](https://github.com/storybookjs/storybook/pull/26837), thanks @JReinhold!
+  - Addon-docs: Fix `providerImportSource` extension - [#26868](https://github.com/storybookjs/storybook/pull/26868), thanks @bashmish!
+  - Addon-docs: Fix `react-dom/server` imports breaking stories and docs - [#26557](https://github.com/storybookjs/storybook/pull/26557), thanks @JReinhold!
+  - Addon-docs: Support Stencil based display names in source snippets - [#26592](https://github.com/storybookjs/storybook/pull/26592), thanks @yannbf!
+  - Addon-docs: Fix `[Object object]` displayName in some JSX components - [#26566](https://github.com/storybookjs/storybook/pull/26566), thanks @yannbf!
+  - Angular: Add type support for Angular\'s input signals - [#26413](https://github.com/storybookjs/storybook/pull/26413), thanks @valentinpalkovic!
+  - Angular: Add type support for Angular\'s output signals - [#26546](https://github.com/storybookjs/storybook/pull/26546), thanks @valentinpalkovic!
+  - API: Add API access to sidebar renderLabel - [#27099](https://github.com/storybookjs/storybook/pull/27099), thanks @shilman!
+  - Args: Add possibility to mark controls as read-only - [#26577](https://github.com/storybookjs/storybook/pull/26577), thanks @valentinpalkovic!
+  - Automigrations: Fix name of VTA addon - [#26816](https://github.com/storybookjs/storybook/pull/26816), thanks @valentinpalkovic!
+  - Automigrations: Add migration note about new react-docgen default - [#26620](https://github.com/storybookjs/storybook/pull/26620), thanks @valentinpalkovic!
+  - Automigrations: Fix missing support for mts vite config - [#26441](https://github.com/storybookjs/storybook/pull/26441), thanks @drik98!
+  - Automigrations: Improve react-docgen automigration prompt - [#27106](https://github.com/storybookjs/storybook/pull/27106), thanks @valentinpalkovic!
+  - Blocks: Add `of` prop to `Subtitle` - [#22552](https://github.com/storybookjs/storybook/pull/22552), thanks @joaonunomota!
+  - Blocks: Add `of` prop to `Title` - [#23728](https://github.com/storybookjs/storybook/pull/23728), thanks @Sidnioulz!
+  - CLI: Add --config-dir flag to add command - [#26771](https://github.com/storybookjs/storybook/pull/26771), thanks @eric-blue!
+  - CLI: Add --config-dir flag to migrate command - [#26721](https://github.com/storybookjs/storybook/pull/26721), thanks @yannbf!
+  - CLI: Add main.js `docs.autodocs` automigration - [#27089](https://github.com/storybookjs/storybook/pull/27089), thanks @shilman!
+  - CLI: Add Visual Tests addon install auto-migration when upgrading to 8.0.x - [#26766](https://github.com/storybookjs/storybook/pull/26766), thanks @ndelangen!
+  - CLI: Automigrate improve upgrade storybook related packages - [#26497](https://github.com/storybookjs/storybook/pull/26497), thanks @ndelangen!
+  - CLI: Automigrations copy edits - [#26342](https://github.com/storybookjs/storybook/pull/26342), thanks @joevaugh4n!
+  - CLI: Fix eslint configuration for string `extends` - [#27097](https://github.com/storybookjs/storybook/pull/27097), thanks @shilman!
+  - CLI: Improve Yarn berry error parsing - [#26616](https://github.com/storybookjs/storybook/pull/26616), thanks @yannbf!
+  - CLI: Improve `vite-config-file.ts` - [#26375](https://github.com/storybookjs/storybook/pull/26375), thanks @joevaugh4n!
+  - CLI: Instruct the correct auto-migration command - [#26515](https://github.com/storybookjs/storybook/pull/26515), thanks @ndelangen!
+  - CLI: Introduce package manager fallback for initializing Storybook in an empty directory with yarn1 - [#26500](https://github.com/storybookjs/storybook/pull/26500), thanks @valentinpalkovic!
+  - CLI: Throw an error when running upgrade command in incorrect cwd - [#26585](https://github.com/storybookjs/storybook/pull/26585), thanks @yannbf!
+  - Codemods: Escape filename given as argument - [#26430](https://github.com/storybookjs/storybook/pull/26430), thanks @YukiKitagata!
+  - Controls: Add Channels API to search for files in the project root - [#26726](https://github.com/storybookjs/storybook/pull/26726), thanks @valentinpalkovic!
+  - Controls: Added server channel to create a new story - [#26769](https://github.com/storybookjs/storybook/pull/26769), thanks @valentinpalkovic!
+  - Controls: Add UI to create new story files - [#26875](https://github.com/storybookjs/storybook/pull/26875), thanks @valentinpalkovic!
+  - Controls: Fix crashing when docgen extraction partially fails - [#26862](https://github.com/storybookjs/storybook/pull/26862), thanks @yannbf!
+  - Controls: Fix disable condition in ArgControl component - [#26567](https://github.com/storybookjs/storybook/pull/26567), thanks @valentinpalkovic!
+  - Controls: Fix number controls do not reset - [#26372](https://github.com/storybookjs/storybook/pull/26372), thanks @jiyiru!
+  - Core: Add `duration` and `onClick` support to Notification API and improve Notification UI - [#26696](https://github.com/storybookjs/storybook/pull/26696), thanks @ghengeveld!
+  - Core: Drop unneeded `UPDATE_STORY_ARGS` which was for SSv6 - [#25993](https://github.com/storybookjs/storybook/pull/25993), thanks @tmeasday!
+  - Core: Ensure that simultaneous onStoriesChanged don\'t clobber each other - [#26882](https://github.com/storybookjs/storybook/pull/26882), thanks @tmeasday!
+  - Core: Fix filters not being applied in WebKit - [#26949](https://github.com/storybookjs/storybook/pull/26949), thanks @JReinhold!
+  - Core: Fix preloading too early - [#26442](https://github.com/storybookjs/storybook/pull/26442), thanks @ndelangen!
+  - Core: Implement file formatter - [#26809](https://github.com/storybookjs/storybook/pull/26809), thanks @valentinpalkovic!
+  - Core: Optimize clearNotification - [#26415](https://github.com/storybookjs/storybook/pull/26415), thanks @ndelangen!
+  - Core: Save from controls - [#26827](https://github.com/storybookjs/storybook/pull/26827), thanks @ndelangen!
+  - CSF: Allow default export without title or component attributes - [#26516](https://github.com/storybookjs/storybook/pull/26516), thanks @kasperpeulen!
+  - CSF: Fix typings for control and other properties of argTypes - [#26824](https://github.com/storybookjs/storybook/pull/26824), thanks @kasperpeulen!
+  - CSF: Make sure loaders/decorators can be used as array - [#26514](https://github.com/storybookjs/storybook/pull/26514), thanks @kasperpeulen!
+  - Dependencies: Upgrade @storybook/csf to 0.1.5 - [#26958](https://github.com/storybookjs/storybook/pull/26958), thanks @Cherry!
+  - Dependencies: Upgrade `@joshwooding/vite-plugin-react-docgen-typescript` to `0.3.1` - [#26673](https://github.com/storybookjs/storybook/pull/26673), thanks @joshwooding!
+  - Dependencies: Upgrade `ejs` to `3.1.10` - [#27054](https://github.com/storybookjs/storybook/pull/27054), thanks @RiuSalvi!
+  - Dependencies: Bump es-module-lexer - [#26737](https://github.com/storybookjs/storybook/pull/26737), thanks @valentinpalkovic!
+  - Dependencies: Update globby dependency - [#26733](https://github.com/storybookjs/storybook/pull/26733), thanks @valentinpalkovic!
+  - Dependencies: Update postcss-loader in Next.js framework - [#26707](https://github.com/storybookjs/storybook/pull/26707), thanks @valentinpalkovic!
+  - Doc Tools: Signature Type Error Handling - [#26774](https://github.com/storybookjs/storybook/pull/26774), thanks @ethriel3695!
+  - Indexer: Escape special characters in storyImport regex - [#22545](https://github.com/storybookjs/storybook/pull/22545), thanks @VojGin!
+  - Maintenance: Fix performance regressions  - [#26411](https://github.com/storybookjs/storybook/pull/26411), thanks @kasperpeulen!
+  - MDX: Do not transform `http://` links - [#26488](https://github.com/storybookjs/storybook/pull/26488), thanks @JReinhold!
+  - Next.js: Fix Compatibility with <v14.0.4 - [#27082](https://github.com/storybookjs/storybook/pull/27082), thanks @JReinhold!
+  - Next.js: Fix next/font usage on Windows machines - [#26700](https://github.com/storybookjs/storybook/pull/26700), thanks @valentinpalkovic!
+  - Next.js: Move sharp into optional deps - [#26787](https://github.com/storybookjs/storybook/pull/26787), thanks @shuta13!
+  - Next.js: Support v14.2 useParams functionality - [#26874](https://github.com/storybookjs/storybook/pull/26874), thanks @yannbf!
+  - Next.js: Implement next redirect and the RedirectBoundary - [#27050](https://github.com/storybookjs/storybook/pull/27050), thanks @yannbf!
+  - Next.js: Support path aliases when no base url is set - [#26651](https://github.com/storybookjs/storybook/pull/26651), thanks @yannbf!
+  - Node: Safe use of `document` for preview - [#24248](https://github.com/storybookjs/storybook/pull/24248), thanks @DylanPiercey!
+  - Onboarding: Improve UI - [#27074](https://github.com/storybookjs/storybook/pull/27074), thanks @ndelangen!
+  - Portable stories: Introduce experimental Playwright CT API and Support for more renderers - [#26063](https://github.com/storybookjs/storybook/pull/26063), thanks @yannbf!
+  - Portable stories: Make setProjectAnnotations accept multiple types of imports - [#26316](https://github.com/storybookjs/storybook/pull/26316), thanks @yannbf!
+  - Portable Stories: Remove link to missing docs - [#27075](https://github.com/storybookjs/storybook/pull/27075), thanks @JReinhold!
+  - Portable Stories: Warn when rendering stories without cleaning up first - [#27008](https://github.com/storybookjs/storybook/pull/27008), thanks @JReinhold!
+  - React-Docgen: Make sure to be able to handle empty unions - [#26639](https://github.com/storybookjs/storybook/pull/26639), thanks @kasperpeulen!
+  - React: Support v19 betas in peer dependencies - [#26960](https://github.com/storybookjs/storybook/pull/26960), thanks @JReinhold!
+  - React: Support v19 in `react-dom-shim` - [#26898](https://github.com/storybookjs/storybook/pull/26898), thanks @Tobbe!
+  - Tags: Add project tags, negation, `dev`/`autodocs`/`test` system tags - [#26634](https://github.com/storybookjs/storybook/pull/26634), thanks @shilman!
+  - Tags: Fix missing default tags if no `preview.js` - [#27098](https://github.com/storybookjs/storybook/pull/27098), thanks @shilman!
+  - Test: Add @storybook/test as dev dependency - [#26458](https://github.com/storybookjs/storybook/pull/26458), thanks @arnabsen!
+  - Test: Make spies reactive so that they can be logged by addon-actions - [#26740](https://github.com/storybookjs/storybook/pull/26740), thanks @kasperpeulen!
+  - Test: Remove chai as dependency of @storybook/test - [#26852](https://github.com/storybookjs/storybook/pull/26852), thanks @kasperpeulen!
+  - Test: Support module mocking with conditional subpath imports in `package.json`  - [#26688](https://github.com/storybookjs/storybook/pull/26688), thanks @kasperpeulen!
+  - Theming: Update emotion dependencies - [#26623](https://github.com/storybookjs/storybook/pull/26623), thanks @SimenB!
+  - Typescript: Add types for `experimental-playwright` entries without `type:bundler` - [#27107](https://github.com/storybookjs/storybook/pull/27107), thanks @ndelangen!
+  - UI: Add key property to list children in Highlight component - [#26471](https://github.com/storybookjs/storybook/pull/26471), thanks @valentinpalkovic!
+  - UI: Fix not re-rendering tabs on state change - [#26899](https://github.com/storybookjs/storybook/pull/26899), thanks @lifeiscontent!
+  - UI: Fix panel layout resizing do not apply when done too fast - [#26460](https://github.com/storybookjs/storybook/pull/26460), thanks @jorge-ji!
+  - UI: Fix search result color contrast - [#26287](https://github.com/storybookjs/storybook/pull/26287), thanks @winchesHe!
+  - UI: Fix sidebar search hanging when selecting a story in touch mode - [#26807](https://github.com/storybookjs/storybook/pull/26807), thanks @JReinhold!
+  - UI: Fix theming of elements inside bars - [#26527](https://github.com/storybookjs/storybook/pull/26527), thanks @valentinpalkovic!
+  - UI: Improve empty state of addon panel - [#26481](https://github.com/storybookjs/storybook/pull/26481), thanks @yannbf!
+  - UI: Replace the icon prop in the Manager API - [#26477](https://github.com/storybookjs/storybook/pull/26477), thanks @cdedreuille!
+  - Viewport: Fix missing style - [#26530](https://github.com/storybookjs/storybook/pull/26530), thanks @jpzwarte!
+  - Vite: Merge assetsInclude property with Storybook default values - [#26860](https://github.com/storybookjs/storybook/pull/26860), thanks @yuemori!
+  - Vue: Disable controls for events, slots, and expose - [#26751](https://github.com/storybookjs/storybook/pull/26751), thanks @shilman!
+  - Webpack: Bump webpack-dev-middleware to patch high security issue - [#26655](https://github.com/storybookjs/storybook/pull/26655), thanks @jwilliams-met!
+  - Webpack: Fix sourcemap generation in webpack react-docgen-loader - [#26676](https://github.com/storybookjs/storybook/pull/26676), thanks @valentinpalkovic!
+  - Webpack: Hide runtime errors - [#23175](https://github.com/storybookjs/storybook/pull/23175), thanks @donaldpipowitch!
 </details>
 
+
 ## 8.0.10
 
 - MDX: Don't transform `http://` links - [#26488](https://github.com/storybookjs/storybook/pull/26488), thanks @JReinhold!
@@ -216,7 +217,7 @@ Storybook 8.1 is here with a tone of new features and bug fixes:
 - Controls: Fix type summary when table.type unset - [#26283](https://github.com/storybookjs/storybook/pull/26283), thanks @shilman!
 - Core: Fix addon bundling script - [#26145](https://github.com/storybookjs/storybook/pull/26145), thanks @ndelangen!
 - Core: Fix fail to load `main.ts` error message - [#26035](https://github.com/storybookjs/storybook/pull/26035), thanks @ndelangen!
-- Maintenance: Fix performance regressions - [#26411](https://github.com/storybookjs/storybook/pull/26411), thanks @kasperpeulen!
+- Maintenance: Fix performance regressions  - [#26411](https://github.com/storybookjs/storybook/pull/26411), thanks @kasperpeulen!
 
 ## 8.0.0
 
diff --git a/code/frameworks/nextjs/src/swc/loader.ts b/code/frameworks/nextjs/src/swc/loader.ts
index bc5f441fff20..bec334ed64d0 100644
--- a/code/frameworks/nextjs/src/swc/loader.ts
+++ b/code/frameworks/nextjs/src/swc/loader.ts
@@ -1,9 +1,9 @@
-import { getVirtualModules } from '@storybook/builder-webpack5';
 import { getProjectRoot } from '@storybook/core-common';
+import { getVirtualModules } from '@storybook/builder-webpack5';
 import type { Options } from '@storybook/types';
 import type { NextConfig } from 'next';
-import loadJsConfig from 'next/dist/build/load-jsconfig';
 import path from 'path';
+import loadJsConfig from 'next/dist/build/load-jsconfig';
 import type { Configuration as WebpackConfig } from 'webpack';
 
 export const configureSWCLoader = async (
diff --git a/code/frameworks/nextjs/src/types.ts b/code/frameworks/nextjs/src/types.ts
index 921037eef397..9c7fcd9efd7d 100644
--- a/code/frameworks/nextjs/src/types.ts
+++ b/code/frameworks/nextjs/src/types.ts
@@ -1,13 +1,13 @@
-import type {
-  BuilderOptions,
-  StorybookConfigWebpack,
-  TypescriptOptions as TypescriptOptionsBuilder,
-} from '@storybook/builder-webpack5';
 import type {
   ReactOptions,
   StorybookConfig as StorybookConfigBase,
   TypescriptOptions as TypescriptOptionsReact,
 } from '@storybook/preset-react-webpack';
+import type {
+  StorybookConfigWebpack,
+  BuilderOptions,
+  TypescriptOptions as TypescriptOptionsBuilder,
+} from '@storybook/builder-webpack5';
 import type { CompatibleString } from '@storybook/types';
 import type * as NextImage from 'next/image';
 
diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts
index fa72e2eb3e3d..7addf01fcb5e 100644
--- a/code/lib/types/src/modules/core-common.ts
+++ b/code/lib/types/src/modules/core-common.ts
@@ -1,11 +1,11 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import type { Router } from 'express';
 import type { FileSystemCache } from 'file-system-cache';
-import type { Server } from 'http';
 import type { Options as TelejsonOptions } from 'telejson';
+import type { Router } from 'express';
+import type { Server } from 'http';
 import type { PackageJson as PackageJsonFromTypeFest } from 'type-fest';
 
-import type { Indexer, StoriesEntry } from './indexer';
+import type { StoriesEntry, Indexer } from './indexer';
 
 /**
  * ⚠️ This file contains internal WIP types they MUST NOT be exported outside this package for now!
diff --git a/docs/versions/latest.json b/docs/versions/latest.json
index eef9cd9b7aa8..8ca3ac787a47 100644
--- a/docs/versions/latest.json
+++ b/docs/versions/latest.json
@@ -1 +1,6 @@
-{"version":"8.1.1","info":{"plain":"- Docgen: Only add react-docgen info when a component is defined in the file - [#26967](https://github.com/storybookjs/storybook/pull/26967), thanks @glenjamin!\n- Docs: Fix MDX Stories block tag-filtering behavior - [#27144](https://github.com/storybookjs/storybook/pull/27144), thanks @shilman!\n- Docs: Fix Subtitle block when no `of` prop passed - [#27147](https://github.com/storybookjs/storybook/pull/27147), thanks @JReinhold!\n- Next.js: Add typing for NextImage to main framework options type - [#27105](https://github.com/storybookjs/storybook/pull/27105), thanks @valentinpalkovic!\n- Next.js: Avoid conflicts with the raw loader - [#27093](https://github.com/storybookjs/storybook/pull/27093), thanks @seanparmelee!\n- Types: Fix typing for main.framework/builder fields - [#27088](https://github.com/storybookjs/storybook/pull/27088), thanks @valentinpalkovic!"}}
+{
+  "version": "8.1.0",
+  "info": {
+    "plain": "- Automigration: Improve react-docgen automigration prompt - [#27106](https://github.com/storybookjs/storybook/pull/27106), thanks @valentinpalkovic!\n- Typescript: Add types for `experimental-playwright` entries without `type:bundler` - [#27107](https://github.com/storybookjs/storybook/pull/27107), thanks @ndelangen!"
+  }
+}
diff --git a/docs/versions/next.json b/docs/versions/next.json
index 45f2ea7f3c4c..26523a287829 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1,6 +1 @@
-{
-  "version": "8.2.0-alpha.6",
-  "info": {
-    "plain": "- Addon-actions: Only log spies with names - [#28091](https://github.com/storybookjs/storybook/pull/28091), thanks @kasperpeulen!\n- Build: Change require/import order, so that import has higher prio if both are specified - [#27730](https://github.com/storybookjs/storybook/pull/27730), thanks @kasperpeulen!\n- CLI: Only log the UpgradeStorybookToSameVersionError but continue the upgrade as normal - [#27217](https://github.com/storybookjs/storybook/pull/27217), thanks @kasperpeulen!\n- Core: Replace ip function with a small helper function to address security concerns - [#27529](https://github.com/storybookjs/storybook/pull/27529), thanks @tony19!\n- Portable Stories: Add tags to composed story - [#27708](https://github.com/storybookjs/storybook/pull/27708), thanks @yannbf!\n- Test: Upgrade deps of @storybook/test - [#27862](https://github.com/storybookjs/storybook/pull/27862), thanks @kasperpeulen!\n- Vite: Fix stats-plugin to normalize file names with posix paths - [#27218](https://github.com/storybookjs/storybook/pull/27218), thanks @AlexAtVista!"
-  }
-}
+{"version":"8.2.0-alpha.6","info":{"plain":"- Addon-actions: Only log spies with names - [#28091](https://github.com/storybookjs/storybook/pull/28091), thanks @kasperpeulen!\n- Build: Change require/import order, so that import has higher prio if both are specified - [#27730](https://github.com/storybookjs/storybook/pull/27730), thanks @kasperpeulen!\n- CLI: Only log the UpgradeStorybookToSameVersionError but continue the upgrade as normal - [#27217](https://github.com/storybookjs/storybook/pull/27217), thanks @kasperpeulen!\n- Core: Replace ip function with a small helper function to address security concerns - [#27529](https://github.com/storybookjs/storybook/pull/27529), thanks @tony19!\n- Portable Stories: Add tags to composed story - [#27708](https://github.com/storybookjs/storybook/pull/27708), thanks @yannbf!\n- Test: Upgrade deps of @storybook/test - [#27862](https://github.com/storybookjs/storybook/pull/27862), thanks @kasperpeulen!\n- Vite: Fix stats-plugin to normalize file names with posix paths - [#27218](https://github.com/storybookjs/storybook/pull/27218), thanks @AlexAtVista!"}}

From 7d12ce63363bea34ca5cb332386040ae4d97e905 Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Sat, 8 Jun 2024 14:31:52 +0200
Subject: [PATCH 17/24] chore: fix unwanted rebase changes

---
 docs/versions/latest.json | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/docs/versions/latest.json b/docs/versions/latest.json
index 8ca3ac787a47..f2b7dba133dd 100644
--- a/docs/versions/latest.json
+++ b/docs/versions/latest.json
@@ -1,6 +1 @@
-{
-  "version": "8.1.0",
-  "info": {
-    "plain": "- Automigration: Improve react-docgen automigration prompt - [#27106](https://github.com/storybookjs/storybook/pull/27106), thanks @valentinpalkovic!\n- Typescript: Add types for `experimental-playwright` entries without `type:bundler` - [#27107](https://github.com/storybookjs/storybook/pull/27107), thanks @ndelangen!"
-  }
-}
+{"version":"8.1.0","info":{"plain":"- Automigration: Improve react-docgen automigration prompt - [#27106](https://github.com/storybookjs/storybook/pull/27106), thanks @valentinpalkovic!\n- Typescript: Add types for `experimental-playwright` entries without `type:bundler` - [#27107](https://github.com/storybookjs/storybook/pull/27107), thanks @ndelangen!"}}

From 304f13e12123618521ac8b448fa3db5f53999e93 Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Sun, 9 Jun 2024 13:55:04 +0200
Subject: [PATCH 18/24] feat: support script setup and v-models

---
 .../vue3/src/docs/sourceDecorator.test.ts     |  98 ++++-
 .../vue3/src/docs/sourceDecorator.ts          | 334 ++++++++++++++----
 .../SourceCode.stories.ts                     |  29 ++
 .../SourceCode.vue                            |  29 ++
 4 files changed, 406 insertions(+), 84 deletions(-)
 create mode 100644 code/renderers/vue3/template/stories_vue3-vite-default-ts/SourceCode.stories.ts
 create mode 100644 code/renderers/vue3/template/stories_vue3-vite-default-ts/SourceCode.vue

diff --git a/code/renderers/vue3/src/docs/sourceDecorator.test.ts b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
index fd181a044a49..ac1bae475166 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.test.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
@@ -1,13 +1,18 @@
 import { expect, test } from 'vitest';
 import { h } from 'vue';
+import type { SourceCodeGeneratorContext } from './sourceDecorator';
 import {
-  extractSlotNames,
   generatePropsSourceCode,
   generateSlotSourceCode,
+  generateSourceCode,
+  parseDocgenInfo,
 } from './sourceDecorator';
 
 test('should generate source code for props', () => {
-  const slots = ['default', 'testSlot'];
+  const ctx: SourceCodeGeneratorContext = {
+    scriptVariables: {},
+    imports: {},
+  };
 
   const code = generatePropsSourceCode(
     {
@@ -19,7 +24,7 @@ test('should generate source code for props', () => {
       f: [1, 2, 3],
       g: {
         g1: 'foo',
-        b2: 42,
+        g2: 42,
       },
       h: undefined,
       i: null,
@@ -27,15 +32,28 @@ test('should generate source code for props', () => {
       k: BigInt(9007199254740991),
       l: Symbol(),
       m: Symbol('foo'),
+      modelValue: 'test-v-model',
+      otherModelValue: 42,
       default: 'default slot',
       testSlot: 'test slot',
     },
-    slots
+    ['default', 'testSlot'],
+    ['update:modelValue', 'update:otherModelValue'],
+    ctx
   );
 
   expect(code).toBe(
-    `a="foo" b='"I am double quoted"' :c="42" d :e="false" :f="[1,2,3]" :g="{'g1':'foo','b2':42}" :k="BigInt(9007199254740991)" :l="Symbol()" :m="Symbol('foo')"`
+    `a="foo" b='"I am double quoted"' :c="42" d :e="false" :f="f" :g="g" :k="BigInt(9007199254740991)" :l="Symbol()" :m="Symbol('foo')" v-model="modelValue" v-model:otherModelValue="otherModelValue"`
   );
+
+  expect(ctx.scriptVariables).toStrictEqual({
+    f: `[1,2,3]`,
+    g: `{"g1":"foo","g2":42}`,
+    modelValue: 'ref("test-v-model")',
+    otherModelValue: 'ref(42)',
+  });
+
+  expect(Array.from(ctx.imports.vue.values())).toStrictEqual(['ref']);
 });
 
 test('should generate source code for slots', () => {
@@ -106,7 +124,10 @@ child 2</template>
 
 <template #m>{{ BigInt(9007199254740991) }}</template>`;
 
-  let actualCode = generateSlotSourceCode(slots, Object.keys(slots));
+  let actualCode = generateSlotSourceCode(slots, Object.keys(slots), {
+    scriptVariables: {},
+    imports: {},
+  });
   expect(actualCode).toBe(expectedCode);
 
   // should generate the same code if getters/functions are used to return the slot content
@@ -117,7 +138,10 @@ child 2</template>
     return obj;
   }, {});
 
-  actualCode = generateSlotSourceCode(slotsWithGetters, Object.keys(slotsWithGetters));
+  actualCode = generateSlotSourceCode(slotsWithGetters, Object.keys(slotsWithGetters), {
+    scriptVariables: {},
+    imports: {},
+  });
   expect(actualCode).toBe(expectedCode);
 });
 
@@ -136,10 +160,48 @@ test('should generate source code for slots with bindings', () => {
 
 <template #b="{ foo }"><a :href="foo" :target="foo">Test link: {{ foo }}</a></template>`;
 
-  const actualCode = generateSlotSourceCode(slots, Object.keys(slots));
+  const actualCode = generateSlotSourceCode(slots, Object.keys(slots), {
+    imports: {},
+    scriptVariables: {},
+  });
   expect(actualCode).toBe(expectedCode);
 });
 
+test('should generate source code with <script setup> block', () => {
+  const actualCode = generateSourceCode({
+    title: 'MyComponent',
+    component: {
+      __docgenInfo: {
+        slots: [{ name: 'mySlot' }],
+        events: [{ name: 'update:c' }],
+      },
+    },
+    args: {
+      a: 42,
+      b: 'foo',
+      c: [1, 2, 3],
+      d: { bar: 'baz' },
+      mySlot: () => h('div', { test: [1, 2], d: { nestedProp: 'foo' } }),
+    },
+  });
+
+  expect(actualCode).toBe(`<script lang="ts" setup>
+import { ref } from "vue";
+
+const c = ref([1,2,3]);
+
+const d = {"bar":"baz"};
+
+const d1 = {"nestedProp":"foo"};
+
+const test = [1,2];
+</script>
+
+<template>
+  <MyComponent :a="42" b="foo" v-model:c="c" :d="d"> <template #mySlot><div :d="d1" :test="test" /></template> </MyComponent>
+</template>`);
+});
+
 test.each([
   { __docgenInfo: 'invalid-value', slotNames: [] },
   { __docgenInfo: {}, slotNames: [] },
@@ -149,7 +211,21 @@ test.each([
     __docgenInfo: { slots: [{ name: 'slot-1' }, { name: 'slot-2' }, { notName: 'slot-3' }] },
     slotNames: ['slot-1', 'slot-2'],
   },
-])('should extract slots names from __docgenInfo', ({ __docgenInfo, slotNames }) => {
-  const actualNames = extractSlotNames({ __docgenInfo });
-  expect(actualNames).toStrictEqual(slotNames);
+])('should parse slots names from __docgenInfo', ({ __docgenInfo, slotNames }) => {
+  const docgenInfo = parseDocgenInfo({ __docgenInfo });
+  expect(docgenInfo.slotNames).toStrictEqual(slotNames);
+});
+
+test.each([
+  { __docgenInfo: 'invalid-value', eventNames: [] },
+  { __docgenInfo: {}, eventNames: [] },
+  { __docgenInfo: { events: 'invalid-value' }, eventNames: [] },
+  { __docgenInfo: { events: ['invalid-value'] }, eventNames: [] },
+  {
+    __docgenInfo: { events: [{ name: 'event-1' }, { name: 'event-2' }, { notName: 'event-3' }] },
+    eventNames: ['event-1', 'event-2'],
+  },
+])('should parse event names from __docgenInfo', ({ __docgenInfo, eventNames }) => {
+  const docgenInfo = parseDocgenInfo({ __docgenInfo });
+  expect(docgenInfo.eventNames).toStrictEqual(eventNames);
 });
diff --git a/code/renderers/vue3/src/docs/sourceDecorator.ts b/code/renderers/vue3/src/docs/sourceDecorator.ts
index 6c32020f74e9..db0850fc723c 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.ts
@@ -5,6 +5,24 @@ import type { VNode } from 'vue';
 import { isVNode, watch } from 'vue';
 import type { Args, Decorator, StoryContext } from '../public-types';
 
+/**
+ * Context that is passed down to nested components/slots when generating the source code for a single story.
+ */
+export type SourceCodeGeneratorContext = {
+  /**
+   * Properties/variables that should be placed inside a `<script lang="ts" setup>` block.
+   * Usually contains complex property values like objects and arrays.
+   */
+  scriptVariables: Record<string, string>;
+  /**
+   * Optional imports to add inside the `<script lang="ts" setup>` block.
+   * e.g. to add 'import { ref } from "vue";'
+   *
+   * key = package name, values = imports
+   */
+  imports: Record<string, Set<string>>;
+};
+
 /**
  * Decorator to generate Vue source code for stories.
  */
@@ -37,24 +55,45 @@ export const sourceDecorator: Decorator = (storyFn, ctx) => {
  * @returns Source code or empty string if source code could not be generated.
  */
 export const generateSourceCode = (
-  ctx: Pick<StoryContext, 'title' | 'component' | 'args'>
+  ctx: Pick<StoryContext, 'title' | 'component' | 'args'> & {
+    component?: StoryContext['component'] & { __docgenInfo?: unknown };
+  }
 ): string => {
-  const componentName = ctx.component?.__name || ctx.title.split('/').at(-1)!;
+  const sourceCodeContext: SourceCodeGeneratorContext = {
+    imports: {},
+    scriptVariables: {},
+  };
 
-  const slotNames = extractSlotNames(ctx.component);
-  const slotSourceCode = generateSlotSourceCode(ctx.args, slotNames);
-  const propsSourceCode = generatePropsSourceCode(ctx.args, slotNames);
+  const { displayName, slotNames, eventNames } = parseDocgenInfo(ctx.component);
 
-  if (slotSourceCode) {
-    return `<template>
-    <${componentName} ${propsSourceCode}> ${slotSourceCode} </${componentName}>
-    </template>`;
-  }
+  const props = generatePropsSourceCode(ctx.args, slotNames, eventNames, sourceCodeContext);
+  const slotSourceCode = generateSlotSourceCode(ctx.args, slotNames, sourceCodeContext);
+  const componentName = displayName || ctx.title.split('/').at(-1)!;
 
   // prefer self closing tag if no slot content exists
-  return `<template>
-  <${componentName} ${propsSourceCode} />
-  </template>`;
+  const templateCode = slotSourceCode
+    ? `<${componentName} ${props}> ${slotSourceCode} </${componentName}>`
+    : `<${componentName} ${props} />`;
+
+  const variablesCode = Object.entries(sourceCodeContext.scriptVariables)
+    .map(([name, value]) => `const ${name} = ${value};`)
+    .join('\n\n');
+
+  const importsCode = Object.entries(sourceCodeContext.imports)
+    .map(([packageName, imports]) => {
+      return `import { ${Array.from(imports.values()).sort().join(', ')} } from "${packageName}";`;
+    })
+    .join('\n');
+
+  const template = `<template>\n  ${templateCode}\n</template>`;
+
+  if (!importsCode && !variablesCode) return template;
+
+  return `<script lang="ts" setup>
+${importsCode ? `${importsCode}\n\n${variablesCode}` : variablesCode}
+</script>
+
+${template}`;
 };
 
 /**
@@ -83,79 +122,138 @@ export const shouldSkipSourceCodeGeneration = (context: StoryContext): boolean =
 };
 
 /**
- * Gets all slot names from the `__docgenInfo` of the given component if available.
+ * Parses the __docgenInfo of the given component.
  * Requires Storybook docs addon to be enabled.
  * Default slot will always be sorted first, remaining slots are sorted alphabetically.
  */
-export const extractSlotNames = (
+export const parseDocgenInfo = (
   component?: StoryContext['component'] & { __docgenInfo?: unknown }
-): string[] => {
-  if (!component || !('__docgenInfo' in component)) return [];
-
+) => {
   // type check __docgenInfo to prevent errors
-  if (!component.__docgenInfo || typeof component.__docgenInfo !== 'object') return [];
   if (
-    !('slots' in component.__docgenInfo) ||
-    !component.__docgenInfo.slots ||
-    !Array.isArray(component.__docgenInfo.slots)
+    !component ||
+    !('__docgenInfo' in component) ||
+    !component.__docgenInfo ||
+    typeof component.__docgenInfo !== 'object'
   ) {
-    return [];
+    return {
+      displayName: component?.__name,
+      eventNames: [],
+      slotNames: [],
+    };
   }
 
-  return component.__docgenInfo.slots
-    .map((slot) => slot.name)
-    .filter((i): i is string => typeof i === 'string')
-    .sort((a, b) => {
+  const docgenInfo = component.__docgenInfo as Record<string, unknown>;
+
+  const displayName =
+    'displayName' in docgenInfo && typeof docgenInfo.displayName === 'string'
+      ? docgenInfo.displayName
+      : undefined;
+
+  const parseNames = (key: 'slots' | 'events') => {
+    if (!(key in docgenInfo) || !Array.isArray(docgenInfo[key])) return [];
+
+    const values = docgenInfo[key] as unknown[];
+
+    return values
+      .map((i) => (i && typeof i === 'object' && 'name' in i ? i.name : undefined))
+      .filter((i): i is string => typeof i === 'string');
+  };
+
+  return {
+    displayName: displayName || component.__name,
+    slotNames: parseNames('slots').sort((a, b) => {
       if (a === 'default') return -1;
       if (b === 'default') return 1;
       return a.localeCompare(b);
-    });
+    }),
+    eventNames: parseNames('events'),
+  };
 };
 
 /**
  * Generates the source code for the given Vue component properties.
+ * Props with complex values (objects and arrays) and v-models will be added to the ctx.scriptVariables because they should be
+ * generated in a `<script lang="ts" setup>` block.
  *
  * @param args Story args / property values.
  * @param slotNames All slot names of the component. Needed to not generate code for args that are slots.
- * Can be extracted using `extractSlotNames()`.
+ * Can be extracted using `parseDocgenInfo()`.
+ * @param eventNames All event names of the component. Needed to generate v-model properties. Can be extracted using `parseDocgenInfo()`.
+ *
+ * @example `:a="42" b="Hello World" v-model="modelValue" v-model:search="search"`
  */
 export const generatePropsSourceCode = (
   args: Record<string, unknown>,
-  slotNames: string[]
-): string => {
-  const props: string[] = [];
+  slotNames: string[],
+  eventNames: string[],
+  ctx: SourceCodeGeneratorContext
+) => {
+  type Property = {
+    /** Property name */
+    name: string;
+    /** Stringified property value */
+    value: string;
+    /**
+     * Function that returns the source code when used inside the `<template>`.
+     * If unset, the property will be generated inside the `<script lang="ts" setup>` block.
+     */
+    templateFn?: (name: string, value: string) => string;
+  };
+
+  const properties: Property[] = [];
 
   Object.entries(args).forEach(([propName, value]) => {
     // ignore slots
     if (slotNames.includes(propName)) return;
+    if (value == undefined) return; // do not render undefined/null values
 
     switch (typeof value) {
       case 'string':
         if (value === '') return; // do not render empty strings
 
-        if (value.includes('"')) {
-          props.push(`${propName}='${value}'`);
-        } else {
-          props.push(`${propName}="${value}"`);
-        }
-
+        properties.push({
+          name: propName,
+          value: value.includes('"') ? `'${value}'` : `"${value}"`,
+          templateFn: (name, propValue) => `${name}=${propValue}`,
+        });
         break;
       case 'number':
-        props.push(`:${propName}="${value}"`);
+        properties.push({
+          name: propName,
+          value: value.toString(),
+          templateFn: (name, propValue) => `:${name}="${propValue}"`,
+        });
         break;
       case 'bigint':
-        props.push(`:${propName}="BigInt(${value.toString()})"`);
+        properties.push({
+          name: propName,
+          value: `BigInt(${value.toString()})`,
+          templateFn: (name, propValue) => `:${name}="${propValue}"`,
+        });
         break;
       case 'boolean':
-        props.push(value === true ? propName : `:${propName}="false"`);
+        properties.push({
+          name: propName,
+          value: value ? 'true' : 'false',
+          templateFn: (name, propValue) => (propValue === 'true' ? name : `:${name}="false"`),
+        });
         break;
-      case 'object':
-        if (value === null) return; // do not render null values
-        props.push(`:${propName}="${JSON.stringify(value).replaceAll('"', "'")}"`);
+      case 'symbol':
+        properties.push({
+          name: propName,
+          value: `Symbol(${value.description ? `'${value.description}'` : ''})`,
+          templateFn: (name, propValue) => `:${name}="${propValue}"`,
+        });
         break;
-      case 'symbol': {
-        const symbol = `Symbol(${value.description ? `'${value.description}'` : ''})`;
-        props.push(`:${propName}="${symbol}"`);
+      case 'object': {
+        properties.push({
+          name: propName,
+          value: formatObject(value),
+          // to follow Vue best practices, complex values like object and arrays are
+          // usually placed inside the <script setup> block instead of inlining them in the <template>
+          templateFn: undefined,
+        });
         break;
       }
       case 'function':
@@ -164,17 +262,75 @@ export const generatePropsSourceCode = (
     }
   });
 
+  properties.sort((a, b) => a.name.localeCompare(b.name));
+
+  /**
+   * List of generated source code for the props.
+   * @example [':a="42"', 'b="Hello World"']
+   */
+  const props: string[] = [];
+
+  // now that we have all props parsed, we will generate them either inside the `<script lang="ts" setup>` block
+  // or inside the `<template>`.
+  // we also make sure to render v-model properties accordingly (see https://vuejs.org/guide/components/v-model)
+  properties.forEach((prop) => {
+    const isVModel = eventNames.includes(`update:${prop.name}`);
+
+    if (!isVModel && prop.templateFn) {
+      props.push(prop.templateFn(prop.name, prop.value));
+      return;
+    }
+
+    let variableName = prop.name;
+
+    // a variable with the same name might already exist (e.g. from a parent component)
+    // so we need to make sure to use a unique name here to not generate multiple variables with the same name
+    if (variableName in ctx.scriptVariables) {
+      let index = 1;
+      do {
+        variableName = `${prop.name}${index}`;
+        index++;
+      } while (variableName in ctx.scriptVariables);
+    }
+
+    if (!isVModel) {
+      ctx.scriptVariables[variableName] = prop.value;
+      props.push(`:${prop.name}="${variableName}"`);
+      return;
+    }
+
+    // always generate v-models inside the `<script lang="ts" setup>` block
+    ctx.scriptVariables[variableName] = `ref(${prop.value})`;
+
+    if (!ctx.imports.vue) ctx.imports.vue = new Set();
+    ctx.imports.vue.add('ref');
+
+    if (prop.name === 'modelValue') {
+      props.push(`v-model="${variableName}"`);
+    } else {
+      props.push(`v-model:${prop.name}="${variableName}"`);
+    }
+  });
+
   return props.join(' ');
 };
 
 /**
  * Generates the source code for the given Vue component slots.
+ * Supports primitive slot content (e.g. strings, numbers etc.) and nested components/VNodes (e.g. created using Vue's `h()` function).
  *
  * @param args Story args.
  * @param slotNames All slot names of the component. Needed to only generate slots and ignore props etc.
- * Can be extracted using `extractSlotNames()`.
+ * Can be extracted using `parseDocgenInfo()`.
+ * @param ctx Context so complex props of nested slot children will be set in the ctx.scriptVariables.
+ *
+ * @example `<template #slotName="{ foo }">Content {{ foo }}</template>`
  */
-export const generateSlotSourceCode = (args: Args, slotNames: string[]): string => {
+export const generateSlotSourceCode = (
+  args: Args,
+  slotNames: string[],
+  ctx: SourceCodeGeneratorContext
+): string => {
   /** List of slot source codes (e.g. <template #slotName>Content</template>) */
   const slotSourceCodes: string[] = [];
 
@@ -182,7 +338,7 @@ export const generateSlotSourceCode = (args: Args, slotNames: string[]): string
     const arg = args[slotName];
     if (!arg) return;
 
-    const slotContent = generateSlotChildrenSourceCode([arg]);
+    const slotContent = generateSlotChildrenSourceCode([arg], ctx);
     if (!slotContent) return; // do not generate source code for empty slots
 
     const slotBindings = typeof arg === 'function' ? getFunctionParamNames(arg) : [];
@@ -204,7 +360,10 @@ export const generateSlotSourceCode = (args: Args, slotNames: string[]): string
 /**
  * Generates the source code for the given slot children (the code inside <template #slotName></template>).
  */
-const generateSlotChildrenSourceCode = (children: unknown[]): string => {
+const generateSlotChildrenSourceCode = (
+  children: unknown[],
+  ctx: SourceCodeGeneratorContext
+): string => {
   const slotChildrenSourceCodes: string[] = [];
 
   /**
@@ -213,7 +372,7 @@ const generateSlotChildrenSourceCode = (children: unknown[]): string => {
    */
   const generateSingleChildSourceCode = (child: unknown): string => {
     if (isVNode(child)) {
-      return generateVNodeSourceCode(child);
+      return generateVNodeSourceCode(child, ctx);
     }
 
     switch (typeof child) {
@@ -244,7 +403,7 @@ const generateSlotChildrenSourceCode = (children: unknown[]): string => {
         }, {});
 
         const returnValue = child(parameters);
-        let slotSourceCode = generateSlotChildrenSourceCode([returnValue]);
+        let slotSourceCode = generateSlotChildrenSourceCode([returnValue], ctx);
 
         // if slot bindings are used for properties of other components, our {{ paramName }} is incorrect because
         // it would generate e.g. my-prop="{{ paramName }}", therefore, we replace it here to e.g. :my-prop="paramName"
@@ -279,28 +438,14 @@ const generateSlotChildrenSourceCode = (children: unknown[]): string => {
 /**
  * Generates source code for the given VNode and all its children (e.g. created using `h(MyComponent)` or `h("div")`).
  */
-const generateVNodeSourceCode = (vnode: VNode): string => {
-  let componentName = 'component';
-  if (typeof vnode.type === 'string') {
-    // this is e.g. the case when rendering native HTML elements like, h("div")
-    componentName = vnode.type;
-  } else if (typeof vnode.type === 'object' && '__name' in vnode.type) {
-    // this is the case when using custom Vue components like h(MyComponent)
-    if ('name' in vnode.type && vnode.type.name) {
-      // prefer custom component name set by the developer
-      componentName = vnode.type.name;
-    } else if ('__name' in vnode.type && vnode.type.__name) {
-      // otherwise use name inferred by Vue from the file name
-      componentName = vnode.type.__name;
-    }
-  }
-
+const generateVNodeSourceCode = (vnode: VNode, ctx: SourceCodeGeneratorContext): string => {
+  const componentName = getVNodeName(vnode);
   let childrenCode = '';
 
   if (typeof vnode.children === 'string') {
     childrenCode = vnode.children;
   } else if (Array.isArray(vnode.children)) {
-    childrenCode = generateSlotChildrenSourceCode(vnode.children);
+    childrenCode = generateSlotChildrenSourceCode(vnode.children, ctx);
   } else if (vnode.children) {
     // children are an object, just like if regular Story args where used
     // so we can generate the source code with the regular "generateSlotSourceCode()".
@@ -308,18 +453,44 @@ const generateVNodeSourceCode = (vnode: VNode): string => {
       vnode.children,
       // $stable is a default property in vnode.children so we need to filter it out
       // to not generate source code for it
-      Object.keys(vnode.children).filter((i) => i !== '$stable')
+      Object.keys(vnode.children).filter((i) => i !== '$stable'),
+      ctx
     );
   }
 
-  const props = vnode.props ? generatePropsSourceCode(vnode.props, []) : '';
+  const props = vnode.props ? generatePropsSourceCode(vnode.props, [], [], ctx) : '';
 
   // prefer self closing tag if no children exist
-  if (childrenCode)
+  if (childrenCode) {
     return `<${componentName}${props ? ` ${props}` : ''}>${childrenCode}</${componentName}>`;
+  }
   return `<${componentName}${props ? ` ${props}` : ''} />`;
 };
 
+/**
+ * Gets the name for the given VNode.
+ * Will return "component" if name could not be extracted.
+ *
+ * @example "div" for `h("div")` or "MyComponent" for `h(MyComponent)`
+ */
+const getVNodeName = (vnode: VNode) => {
+  // this is e.g. the case when rendering native HTML elements like, h("div")
+  if (typeof vnode.type === 'string') return vnode.type;
+
+  if (typeof vnode.type === 'object') {
+    // this is the case when using custom Vue components like h(MyComponent)
+    if ('name' in vnode.type && vnode.type.name) {
+      // prefer custom component name set by the developer
+      return vnode.type.name;
+    } else if ('__name' in vnode.type && vnode.type.__name) {
+      // otherwise use name inferred by Vue from the file name
+      return vnode.type.__name;
+    }
+  }
+
+  return 'component';
+};
+
 /**
  * Gets a list of parameters for the given function since func.arguments can not be used since
  * it throws a TypeError.
@@ -357,3 +528,20 @@ const slotBindingsToString = (
   // parameters might be destructured so remove duplicated brackets here
   return `#${slotName}="{ ${params.filter((i) => !['{', '}'].includes(i)).join(', ')} }"`;
 };
+
+/**
+ * Formats the given object as string.
+ * Will format in single line if it only contains non-object values.
+ * Otherwise will format multiline.
+ */
+export const formatObject = (obj: object): string => {
+  const isPrimitive = Object.values(obj).every(
+    (value) => value == null || typeof value !== 'object'
+  );
+
+  // if object/array only contains non-object values, we format all values in one line
+  if (isPrimitive) return JSON.stringify(obj);
+
+  // otherwise, we use a "pretty" formatting with newlines and spaces
+  return JSON.stringify(obj, null, 2);
+};
diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/SourceCode.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/SourceCode.stories.ts
new file mode 100644
index 000000000000..b67c1d5eb661
--- /dev/null
+++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/SourceCode.stories.ts
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { h } from 'vue';
+import SourceCode from './SourceCode.vue';
+
+const meta: Meta<typeof SourceCode> = {
+  component: SourceCode,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof SourceCode>;
+
+export const Default = {
+  args: {
+    foo: 'Example string',
+    bar: 42,
+    array: ['A', 'B', 'C'],
+    object: {
+      a: 'Test A',
+      b: 42,
+    },
+    modelValue: 'Model value',
+    default: 'Default slot content',
+    namedSlots: ({ foo }) => [
+      'Plain text',
+      h('div', { style: 'color:red' }, ['Div child', h('span', foo)]),
+    ],
+  },
+} satisfies Story;
diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/SourceCode.vue b/code/renderers/vue3/template/stories_vue3-vite-default-ts/SourceCode.vue
new file mode 100644
index 000000000000..a09a1f4c4a7e
--- /dev/null
+++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/SourceCode.vue
@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  foo: string;
+  bar?: number;
+  array: string[];
+  object: Record<string, unknown>;
+  modelValue?: string;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+}>();
+
+defineSlots<{
+  default(): any;
+  namedSlots(props: { foo: string }): any;
+}>();
+</script>
+
+<template>
+  <div>
+    <pre>{{ props }}</pre>
+
+    <slot></slot>
+    <slot name="namedSlots" foo="Hello World"></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

From b245c0de1fe2e4b3ee33826c6f2342705cdc914c Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Sun, 9 Jun 2024 14:13:42 +0200
Subject: [PATCH 19/24] fix typo

---
 .../stories_vue3-vite-default-ts/SourceCode.stories.ts      | 2 +-
 .../template/stories_vue3-vite-default-ts/SourceCode.vue    | 6 ++----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/SourceCode.stories.ts b/code/renderers/vue3/template/stories_vue3-vite-default-ts/SourceCode.stories.ts
index b67c1d5eb661..c9500c509a48 100644
--- a/code/renderers/vue3/template/stories_vue3-vite-default-ts/SourceCode.stories.ts
+++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/SourceCode.stories.ts
@@ -21,7 +21,7 @@ export const Default = {
     },
     modelValue: 'Model value',
     default: 'Default slot content',
-    namedSlots: ({ foo }) => [
+    namedSlot: ({ foo }) => [
       'Plain text',
       h('div', { style: 'color:red' }, ['Div child', h('span', foo)]),
     ],
diff --git a/code/renderers/vue3/template/stories_vue3-vite-default-ts/SourceCode.vue b/code/renderers/vue3/template/stories_vue3-vite-default-ts/SourceCode.vue
index a09a1f4c4a7e..6fae0e0ec5d8 100644
--- a/code/renderers/vue3/template/stories_vue3-vite-default-ts/SourceCode.vue
+++ b/code/renderers/vue3/template/stories_vue3-vite-default-ts/SourceCode.vue
@@ -13,7 +13,7 @@ const emit = defineEmits<{
 
 defineSlots<{
   default(): any;
-  namedSlots(props: { foo: string }): any;
+  namedSlot(props: { foo: string }): any;
 }>();
 </script>
 
@@ -22,8 +22,6 @@ defineSlots<{
     <pre>{{ props }}</pre>
 
     <slot></slot>
-    <slot name="namedSlots" foo="Hello World"></slot>
+    <slot name="namedSlot" foo="Hello World"></slot>
   </div>
 </template>
-
-<style lang="scss" scoped></style>

From 7923ba307fb271d0e81c5006d02fec97b7c3c118 Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Tue, 11 Jun 2024 17:41:51 +0200
Subject: [PATCH 20/24] simplify statement

---
 code/renderers/vue3/src/docs/sourceDecorator.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/code/renderers/vue3/src/docs/sourceDecorator.ts b/code/renderers/vue3/src/docs/sourceDecorator.ts
index db0850fc723c..b45adaf74f64 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.ts
@@ -507,8 +507,7 @@ const getFunctionParamNames = (func: Function): string[] => {
 
   const fnStr = func.toString().replace(STRIP_COMMENTS, '');
   const result = fnStr.slice(fnStr.indexOf('(') + 1, fnStr.indexOf(')')).match(ARGUMENT_NAMES);
-  if (result === null) return [];
-  return result;
+  return result ?? [];
 };
 
 /**

From 13ce0868c2f49115e5cbdba3cfd834725eacff6b Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Fri, 28 Jun 2024 20:35:44 +0200
Subject: [PATCH 21/24] fix code for slot bindings in minified build

---
 .../vue3/src/docs/sourceDecorator.test.ts     | 19 ++++++++++++++++++
 .../vue3/src/docs/sourceDecorator.ts          | 20 +++++++++++++++++--
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/code/renderers/vue3/src/docs/sourceDecorator.test.ts b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
index ac1bae475166..4f92bcd9cb27 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.test.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.test.ts
@@ -5,6 +5,7 @@ import {
   generatePropsSourceCode,
   generateSlotSourceCode,
   generateSourceCode,
+  getFunctionParamNames,
   parseDocgenInfo,
 } from './sourceDecorator';
 
@@ -229,3 +230,21 @@ test.each([
   const docgenInfo = parseDocgenInfo({ __docgenInfo });
   expect(docgenInfo.eventNames).toStrictEqual(eventNames);
 });
+
+test.each<{ fn: (...args: any[]) => unknown; expectedNames: string[] }>([
+  { fn: () => ({}), expectedNames: [] },
+  { fn: (a) => ({}), expectedNames: ['a'] },
+  { fn: (a, b) => ({}), expectedNames: ['a', 'b'] },
+  { fn: (a, b, { c }) => ({}), expectedNames: ['a', 'b', '{', 'c', '}'] },
+  { fn: ({ a, b }) => ({}), expectedNames: ['{', 'a', 'b', '}'] },
+  {
+    fn: {
+      // simulate minified function after running "storybook build"
+      toString: () => '({a:foo,b:bar})=>({})',
+    } as (...args: any[]) => unknown,
+    expectedNames: ['{', 'a', 'b', '}'],
+  },
+])('should extract function parameter names', ({ fn, expectedNames }) => {
+  const paramNames = getFunctionParamNames(fn);
+  expect(paramNames).toStrictEqual(expectedNames);
+});
diff --git a/code/renderers/vue3/src/docs/sourceDecorator.ts b/code/renderers/vue3/src/docs/sourceDecorator.ts
index b45adaf74f64..95cefbcdbc52 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.ts
@@ -501,13 +501,29 @@ const getVNodeName = (vnode: VNode) => {
  * @see Based on https://stackoverflow.com/a/9924463
  */
 // eslint-disable-next-line @typescript-eslint/ban-types
-const getFunctionParamNames = (func: Function): string[] => {
+export const getFunctionParamNames = (func: Function): string[] => {
   const STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/gm;
   const ARGUMENT_NAMES = /([^\s,]+)/g;
 
   const fnStr = func.toString().replace(STRIP_COMMENTS, '');
   const result = fnStr.slice(fnStr.indexOf('(') + 1, fnStr.indexOf(')')).match(ARGUMENT_NAMES);
-  return result ?? [];
+  if (!result) return [];
+
+  // when running "storybook build", the function will be minified, so result for e.g.
+  // `({ foo, bar }) => { // function body }` will be `["{foo:e", "bar:a}"]`
+  // therefore we need to remove the :e and :a mappings and extract the "{" and "}"" from the destructured object
+  // so the final result becomes `["{", "foo", "bar", "}"]`
+  return result.flatMap((param) => {
+    if (['{', '}'].includes(param)) return param;
+    const nonMinifiedName = param.split(':')[0].trim();
+    if (nonMinifiedName.startsWith('{')) {
+      return ['{', nonMinifiedName.substring(1)];
+    }
+    if (param.endsWith('}') && !nonMinifiedName.endsWith('}')) {
+      return [nonMinifiedName, '}'];
+    }
+    return nonMinifiedName;
+  });
 };
 
 /**

From bdeb85bcbd95a11c2babbba05378dc0434ac8a31 Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Tue, 9 Jul 2024 10:09:59 +0200
Subject: [PATCH 22/24] revert unwanted merge formattings

---
 code/core/src/core-server/utils/build-or-throw.ts |  4 ++--
 code/core/src/core-server/utils/server-statics.ts |  4 +---
 code/core/src/manager-api/modules/whatsnew.tsx    |  9 ++++-----
 code/lib/cli/src/upgrade.test.ts                  |  1 +
 code/renderers/svelte/src/public-types.ts         | 14 ++++++++------
 code/renderers/vue3/src/public-types.ts           |  9 +++++----
 6 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/code/core/src/core-server/utils/build-or-throw.ts b/code/core/src/core-server/utils/build-or-throw.ts
index feeae84d76ee..a2dade3725c3 100644
--- a/code/core/src/core-server/utils/build-or-throw.ts
+++ b/code/core/src/core-server/utils/build-or-throw.ts
@@ -6,8 +6,8 @@ export async function buildOrThrow<T>(callback: () => Promise<T>): Promise<T> {
   } catch (err: any) {
     const builderErrors = err.errors as { text: string }[];
     if (builderErrors) {
-      const inconsistentVersionsError = builderErrors.find(
-        (er) => er.text?.includes('No matching export')
+      const inconsistentVersionsError = builderErrors.find((er) =>
+        er.text?.includes('No matching export')
       );
 
       if (inconsistentVersionsError) {
diff --git a/code/core/src/core-server/utils/server-statics.ts b/code/core/src/core-server/utils/server-statics.ts
index 2c6d4e1d8009..553d76fdc8ab 100644
--- a/code/core/src/core-server/utils/server-statics.ts
+++ b/code/core/src/core-server/utils/server-statics.ts
@@ -34,9 +34,7 @@ export async function useStatics(router: Router, options: Options) {
           // Don't log for the internal static dir
           if (!targetEndpoint.startsWith('/sb-')) {
             logger.info(
-              `=> Serving static files from ${chalk.cyan(staticDir)} at ${chalk.cyan(
-                targetEndpoint
-              )}`
+        `=> Serving static files from ${chalk.cyan(staticDir)} at ${chalk.cyan(targetEndpoint)}`
             );
           }
 
diff --git a/code/core/src/manager-api/modules/whatsnew.tsx b/code/core/src/manager-api/modules/whatsnew.tsx
index efd926d89576..71e6b9e03d85 100644
--- a/code/core/src/manager-api/modules/whatsnew.tsx
+++ b/code/core/src/manager-api/modules/whatsnew.tsx
@@ -59,11 +59,10 @@ export const init: ModuleFn = ({ fullAPI, store, provider }) => {
   function getLatestWhatsNewPost(): Promise<WhatsNewData> {
     provider.channel?.emit(REQUEST_WHATS_NEW_DATA);
 
-    return new Promise(
-      (resolve) =>
-        provider.channel?.once(RESULT_WHATS_NEW_DATA, ({ data }: { data: WhatsNewData }) =>
-          resolve(data)
-        )
+    return new Promise((resolve) =>
+      provider.channel?.once(RESULT_WHATS_NEW_DATA, ({ data }: { data: WhatsNewData }) =>
+        resolve(data)
+      )
     );
   }
 
diff --git a/code/lib/cli/src/upgrade.test.ts b/code/lib/cli/src/upgrade.test.ts
index 95afe81bc2dd..7c64dc748393 100644
--- a/code/lib/cli/src/upgrade.test.ts
+++ b/code/lib/cli/src/upgrade.test.ts
@@ -84,6 +84,7 @@ describe('Upgrade errors', () => {
 
     // Mock as a throw, so that we don't have to mock the content of the doUpgrade fn that comes after it
     vi.spyOn(logger, 'warn').mockImplementation((error) => {
+      // eslint-disable-next-line @typescript-eslint/no-throw-literal
       throw error;
     });
 
diff --git a/code/renderers/svelte/src/public-types.ts b/code/renderers/svelte/src/public-types.ts
index 1f1468086d20..e8b98304817c 100644
--- a/code/renderers/svelte/src/public-types.ts
+++ b/code/renderers/svelte/src/public-types.ts
@@ -23,17 +23,19 @@ export type { Args, ArgTypes, Parameters, StrictArgs } from 'storybook/internal/
  *
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
-export type Meta<CmpOrArgs = Args> = CmpOrArgs extends SvelteComponent<infer Props>
-  ? ComponentAnnotations<SvelteRenderer<CmpOrArgs>, Props>
-  : ComponentAnnotations<SvelteRenderer, CmpOrArgs>;
+export type Meta<CmpOrArgs = Args> =
+  CmpOrArgs extends SvelteComponent<infer Props>
+    ? ComponentAnnotations<SvelteRenderer<CmpOrArgs>, Props>
+    : ComponentAnnotations<SvelteRenderer, CmpOrArgs>;
 /**
  * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryFn<TCmpOrArgs = Args> = TCmpOrArgs extends SvelteComponent<infer Props>
-  ? AnnotatedStoryFn<SvelteRenderer, Props>
-  : AnnotatedStoryFn<SvelteRenderer, TCmpOrArgs>;
+export type StoryFn<TCmpOrArgs = Args> =
+  TCmpOrArgs extends SvelteComponent<infer Props>
+    ? AnnotatedStoryFn<SvelteRenderer, Props>
+    : AnnotatedStoryFn<SvelteRenderer, TCmpOrArgs>;
 
 /**
  * Story object that represents a CSFv3 component example.
diff --git a/code/renderers/vue3/src/public-types.ts b/code/renderers/vue3/src/public-types.ts
index 59fe0b2a65c8..c5274a3e636b 100644
--- a/code/renderers/vue3/src/public-types.ts
+++ b/code/renderers/vue3/src/public-types.ts
@@ -68,11 +68,12 @@ type AllowNonFunctionSlots<Slots> = {
 
 export type ComponentPropsAndSlots<C> = ComponentProps<C> & ExtractSlots<C>;
 
-type ComponentPropsOrProps<TCmpOrArgs> = TCmpOrArgs extends Constructor<any>
-  ? ComponentPropsAndSlots<TCmpOrArgs>
-  : TCmpOrArgs extends FunctionalComponent<any>
+type ComponentPropsOrProps<TCmpOrArgs> =
+  TCmpOrArgs extends Constructor<any>
     ? ComponentPropsAndSlots<TCmpOrArgs>
-    : TCmpOrArgs;
+    : TCmpOrArgs extends FunctionalComponent<any>
+      ? ComponentPropsAndSlots<TCmpOrArgs>
+      : TCmpOrArgs;
 
 export type Decorator<TArgs = StrictArgs> = DecoratorFunction<VueRenderer, TArgs>;
 export type Loader<TArgs = StrictArgs> = LoaderFunction<VueRenderer, TArgs>;

From da145e26942581bb1276889c39e446134441cbd2 Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Tue, 9 Jul 2024 10:11:06 +0200
Subject: [PATCH 23/24] revert unwanted merge formattings

---
 code/core/src/core-server/utils/server-statics.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/core/src/core-server/utils/server-statics.ts b/code/core/src/core-server/utils/server-statics.ts
index 553d76fdc8ab..a2fd5cc8a25f 100644
--- a/code/core/src/core-server/utils/server-statics.ts
+++ b/code/core/src/core-server/utils/server-statics.ts
@@ -34,7 +34,7 @@ export async function useStatics(router: Router, options: Options) {
           // Don't log for the internal static dir
           if (!targetEndpoint.startsWith('/sb-')) {
             logger.info(
-        `=> Serving static files from ${chalk.cyan(staticDir)} at ${chalk.cyan(targetEndpoint)}`
+              `=> Serving static files from ${chalk.cyan(staticDir)} at ${chalk.cyan(targetEndpoint)}`
             );
           }
 

From 22938b94be2e8c7e408fc9afb501b0566c8976b0 Mon Sep 17 00:00:00 2001
From: Lars Rickert <dev@lars-rickert.de>
Date: Sun, 21 Jul 2024 17:24:22 +0200
Subject: [PATCH 24/24] fix build

---
 code/renderers/vue3/src/entry-preview-docs.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/code/renderers/vue3/src/entry-preview-docs.ts b/code/renderers/vue3/src/entry-preview-docs.ts
index e5011e6f8e8a..16c9338a164b 100644
--- a/code/renderers/vue3/src/entry-preview-docs.ts
+++ b/code/renderers/vue3/src/entry-preview-docs.ts
@@ -1,5 +1,9 @@
-import type { ArgTypesEnhancer } from 'storybook/internal/docs-tools';
-import { enhanceArgTypes, extractComponentDescription } from 'storybook/internal/docs-tools';
+import {
+  enhanceArgTypes,
+  extractComponentDescription,
+  type ArgTypesExtractor,
+} from 'storybook/internal/docs-tools';
+import type { ArgTypesEnhancer } from 'storybook/internal/types';
 import { extractArgTypes } from './docs/extractArgTypes';
 import { sourceDecorator } from './docs/sourceDecorator';
 import type { VueRenderer } from './types';