diff --git a/CHANGELOG.md b/CHANGELOG.md
index f0b60008f0fb..06520612a48a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,11 @@
+## 8.4.2
+
+- Addon Test: Fix post-install logic for Next.js Vite framework support - [#29524](https://github.com/storybookjs/storybook/pull/29524), thanks @valentinpalkovic!
+- Addon Test: Only render the TestingModule component in development mode - [#29501](https://github.com/storybookjs/storybook/pull/29501), thanks @yannbf!
+- CLI: Fix Solid init by installing `@storybook/test` - [#29514](https://github.com/storybookjs/storybook/pull/29514), thanks @shilman!
+- Core: Shim CJS-only globals in ESM output - [#29157](https://github.com/storybookjs/storybook/pull/29157), thanks @valentinpalkovic!
+- Next.js: Fix bundled react and react-dom in monorepos - [#29444](https://github.com/storybookjs/storybook/pull/29444), thanks @sentience!
+
## 8.4.1
- Core: Relax peer dep constraint of shim packages - [#29503](https://github.com/storybookjs/storybook/pull/29503), thanks @kasperpeulen!
diff --git a/code/addons/test/src/postinstall.ts b/code/addons/test/src/postinstall.ts
index f7b5efe8521c..90595b0e15d6 100644
--- a/code/addons/test/src/postinstall.ts
+++ b/code/addons/test/src/postinstall.ts
@@ -58,7 +58,9 @@ export default async function postInstall(options: PostinstallOptions) {
'@storybook/experimental-nextjs-vite',
'@storybook/sveltekit',
].includes(info.frameworkPackageName)
- ? info.frameworkPackageName
+ ? info.frameworkPackageName === '@storybook/nextjs'
+ ? '@storybook/experimental-nextjs-vite'
+ : info.frameworkPackageName
: info.rendererPackageName &&
['@storybook/react', '@storybook/svelte', '@storybook/vue3'].includes(
info.rendererPackageName
@@ -431,7 +433,7 @@ const getVitestPluginInfo = (framework: string) => {
let frameworkPluginCall = '';
let frameworkPluginDocs = '';
- if (framework === '@storybook/nextjs') {
+ if (framework === '@storybook/nextjs' || framework === '@storybook/experimental-nextjs-vite') {
frameworkPluginImport =
"import { storybookNextJsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin';";
frameworkPluginDocs =
diff --git a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
index d4698f53e6df..dcc6b06096c2 100644
--- a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
@@ -85,6 +85,7 @@ const meta = {
refs: {},
status: {},
showCreateStoryButton: true,
+ isDevelopment: true,
},
decorators: [
(storyFn) => (
diff --git a/code/core/src/manager/components/sidebar/Sidebar.tsx b/code/core/src/manager/components/sidebar/Sidebar.tsx
index 6f4cec12e686..bb3be73f425d 100644
--- a/code/core/src/manager/components/sidebar/Sidebar.tsx
+++ b/code/core/src/manager/components/sidebar/Sidebar.tsx
@@ -109,7 +109,6 @@ const useCombination = (
return useMemo(() => ({ hash, entries: Object.entries(hash) }), [hash]);
};
-const isDevelopment = global.CONFIG_TYPE === 'DEVELOPMENT';
const isRendererReact = global.STORYBOOK_RENDERER === 'react';
export interface SidebarProps extends API_LoadedRefData {
@@ -124,6 +123,7 @@ export interface SidebarProps extends API_LoadedRefData {
onMenuClick?: HeadingProps['onMenuClick'];
showCreateStoryButton?: boolean;
indexJson?: StoryIndex;
+ isDevelopment?: boolean;
}
export const Sidebar = React.memo(function Sidebar({
// @ts-expect-error (non strict)
@@ -138,6 +138,7 @@ export const Sidebar = React.memo(function Sidebar({
extra,
menuHighlighted = false,
enableShortcuts = true,
+ isDevelopment = global.CONFIG_TYPE === 'DEVELOPMENT',
refs = {},
onMenuClick,
showCreateStoryButton = isDevelopment && isRendererReact,
@@ -229,7 +230,7 @@ export const Sidebar = React.memo(function Sidebar({
)}
- {isMobile || isLoading ? null : }
+ {isMobile || isLoading ? null : }
);
diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx
index 18a9a83db9fb..8d7d2c42f488 100644
--- a/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx
+++ b/code/core/src/manager/components/sidebar/SidebarBottom.stories.tsx
@@ -6,6 +6,7 @@ import { SidebarBottomBase } from './SidebarBottom';
export default {
component: SidebarBottomBase,
args: {
+ isDevelopment: true,
api: {
clearNotification: fn(),
emit: fn(),
diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.tsx
index b25defd9c4bd..f6aae845bee3 100644
--- a/code/core/src/manager/components/sidebar/SidebarBottom.tsx
+++ b/code/core/src/manager/components/sidebar/SidebarBottom.tsx
@@ -92,9 +92,15 @@ interface SidebarBottomProps {
api: API;
notifications: State['notifications'];
status: State['status'];
+ isDevelopment?: boolean;
}
-export const SidebarBottomBase = ({ api, notifications = [], status = {} }: SidebarBottomProps) => {
+export const SidebarBottomBase = ({
+ api,
+ notifications = [],
+ status = {},
+ isDevelopment,
+}: SidebarBottomProps) => {
const spacerRef = useRef(null);
const wrapperRef = useRef(null);
const [warningsActive, setWarningsActive] = useState(false);
@@ -228,27 +234,36 @@ export const SidebarBottomBase = ({ api, notifications = [], status = {} }: Side
);
};
-export const SidebarBottom = () => {
+export const SidebarBottom = ({ isDevelopment }: { isDevelopment?: boolean }) => {
const api = useStorybookApi();
const { notifications, status } = useStorybookState();
- return ;
+ return (
+
+ );
};
diff --git a/code/core/src/manager/components/sidebar/TestingModule.tsx b/code/core/src/manager/components/sidebar/TestingModule.tsx
index 5ca7bc8aa972..c020ebe53f09 100644
--- a/code/core/src/manager/components/sidebar/TestingModule.tsx
+++ b/code/core/src/manager/components/sidebar/TestingModule.tsx
@@ -229,7 +229,12 @@ export const TestingModule = ({
const testing = testProviders.length > 0;
return (
- 0}>
+ 0}
+ >
{
let scopedModulePath;
@@ -74,9 +92,15 @@ export const scopedResolve = (id: string): string => {
scopedModulePath = require.resolve(id);
}
- const moduleFolderStrPosition = scopedModulePath.lastIndexOf(
- id.replace(/\//g /* all '/' occurances */, sep)
- );
+ const idWithNativePathSep = id.replace(/\//g /* all '/' occurrences */, sep);
+
+ // If the id referenced the file specifically, return the full module path & filename
+ if (scopedModulePath.endsWith(idWithNativePathSep)) {
+ return scopedModulePath;
+ }
+
+ // Otherwise, return just the path to the module folder or named export
+ const moduleFolderStrPosition = scopedModulePath.lastIndexOf(idWithNativePathSep);
const beginningOfMainScriptPath = moduleFolderStrPosition + id.length;
return scopedModulePath.substring(0, beginningOfMainScriptPath);
};
diff --git a/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts b/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts
index 8831e9217052..98ceb6cc7e5c 100644
--- a/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts
+++ b/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts
@@ -1,16 +1,21 @@
-import { resolve } from 'node:path';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
import type { Plugin } from 'vite';
+// @ts-expect-error We are building for CJS and ESM, so we have to use import.meta.url for the ESM output
+const filename = __filename ?? fileURLToPath(import.meta.url);
+const dir = dirname(filename);
+
export async function mockSveltekitStores() {
return {
name: 'storybook:sveltekit-mock-stores',
config: () => ({
resolve: {
alias: {
- '$app/forms': resolve(__dirname, '../src/mocks/app/forms.ts'),
- '$app/navigation': resolve(__dirname, '../src/mocks/app/navigation.ts'),
- '$app/stores': resolve(__dirname, '../src/mocks/app/stores.ts'),
+ '$app/forms': resolve(dir, '../src/mocks/app/forms.ts'),
+ '$app/navigation': resolve(dir, '../src/mocks/app/navigation.ts'),
+ '$app/stores': resolve(dir, '../src/mocks/app/stores.ts'),
},
},
}),
diff --git a/code/lib/create-storybook/src/generators/baseGenerator.ts b/code/lib/create-storybook/src/generators/baseGenerator.ts
index 814cea8a956d..4ba6db064da3 100644
--- a/code/lib/create-storybook/src/generators/baseGenerator.ts
+++ b/code/lib/create-storybook/src/generators/baseGenerator.ts
@@ -245,7 +245,7 @@ export async function baseGenerator(
].filter(Boolean);
// TODO: migrate template stories in solid and qwik to use @storybook/test
- if (['solid', 'qwik'].includes(rendererId)) {
+ if (['qwik'].includes(rendererId)) {
addonPackages.push('@storybook/testing-library');
} else {
addonPackages.push('@storybook/test');
diff --git a/code/package.json b/code/package.json
index a84b56c107cb..b9f9c6df135b 100644
--- a/code/package.json
+++ b/code/package.json
@@ -293,5 +293,6 @@
"Dependency Upgrades"
]
]
- }
+ },
+ "deferredNextVersion": "8.4.2"
}
diff --git a/docs/versions/latest.json b/docs/versions/latest.json
index 85c8a9e9a5a0..6e4199f0fd46 100644
--- a/docs/versions/latest.json
+++ b/docs/versions/latest.json
@@ -1 +1 @@
-{"version":"8.4.1","info":{"plain":"- Core: Relax peer dep constraint of shim packages - [#29503](https://github.com/storybookjs/storybook/pull/29503), thanks @kasperpeulen!"}}
+{"version":"8.4.2","info":{"plain":"- Addon Test: Fix post-install logic for Next.js Vite framework support - [#29524](https://github.com/storybookjs/storybook/pull/29524), thanks @valentinpalkovic!\n- Addon Test: Only render the TestingModule component in development mode - [#29501](https://github.com/storybookjs/storybook/pull/29501), thanks @yannbf!\n- CLI: Fix Solid init by installing `@storybook/test` - [#29514](https://github.com/storybookjs/storybook/pull/29514), thanks @shilman!\n- Core: Shim CJS-only globals in ESM output - [#29157](https://github.com/storybookjs/storybook/pull/29157), thanks @valentinpalkovic!\n- Next.js: Fix bundled react and react-dom in monorepos - [#29444](https://github.com/storybookjs/storybook/pull/29444), thanks @sentience!"}}
diff --git a/docs/versions/next.json b/docs/versions/next.json
index f7ae322dcdb2..641189d11f4c 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"8.5.0-alpha.1","info":{"plain":"- Core: Relax peer dep constraint of shim packages - [#29503](https://github.com/storybookjs/storybook/pull/29503), thanks @kasperpeulen!"}}
+{"version":"8.5.0-alpha.2","info":{"plain":"- Addon Test: Only render the TestingModule component in development mode - [#29501](https://github.com/storybookjs/storybook/pull/29501), thanks @yannbf!\n- CLI: Fix Solid init by installing `@storybook/test` - [#29514](https://github.com/storybookjs/storybook/pull/29514), thanks @shilman!\n- Core: Add bun support with npm fallback - [#29267](https://github.com/storybookjs/storybook/pull/29267), thanks @stephenjason89!\n- Core: Shim CJS-only globals in ESM output - [#29157](https://github.com/storybookjs/storybook/pull/29157), thanks @valentinpalkovic!\n- Next.js: Fix bundled react and react-dom in monorepos - [#29444](https://github.com/storybookjs/storybook/pull/29444), thanks @sentience!\n- Next.js: Upgrade sass-loader from ^13.2.0 to ^14.2.1 - [#29264](https://github.com/storybookjs/storybook/pull/29264), thanks @HoncharenkoZhenya!\n- UI: Add support for groups to `TooltipLinkList` and use it in main menu - [#29507](https://github.com/storybookjs/storybook/pull/29507), thanks @ghengeveld!"}}