Merge pull request #29510 from storybookjs/version-patch-from-8.4.1

Release: Patch 8.4.2

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!

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 =

code/core/src/manager/components/sidebar/Sidebar.stories.tsx

@@ -85,6 +85,7 @@ const meta = {
     refs: {},
     status: {},
     showCreateStoryButton: true,
+    isDevelopment: true,
   },
   decorators: [
     (storyFn) => (

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({
             )}
           </Search>
         </Top>
-        {isMobile || isLoading ? null : <SidebarBottom />}
+        {isMobile || isLoading ? null : <SidebarBottom isDevelopment={isDevelopment} />}
       </ScrollArea>
     </Container>
   );

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(),

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<HTMLDivElement | null>(null);
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const [warningsActive, setWarningsActive] = useState(false);
@@ -228,27 +234,36 @@ export const SidebarBottomBase = ({ api, notifications = [], status = {} }: Side
     <div id={SIDEBAR_BOTTOM_SPACER_ID} ref={spacerRef}>
       <Content id={SIDEBAR_BOTTOM_WRAPPER_ID} ref={wrapperRef}>
         <NotificationList notifications={notifications} clearNotification={api.clearNotification} />
-        <TestingModule
-          {...{
-            testProviders: testProvidersArray,
-            errorCount: errors.length,
-            errorsActive,
-            setErrorsActive,
-            warningCount: warnings.length,
-            warningsActive,
-            setWarningsActive,
-            onRunTests,
-            onCancelTests,
-            onSetWatchMode,
-          }}
-        />
+        {isDevelopment && (
+          <TestingModule
+            {...{
+              testProviders: testProvidersArray,
+              errorCount: errors.length,
+              errorsActive,
+              setErrorsActive,
+              warningCount: warnings.length,
+              warningsActive,
+              setWarningsActive,
+              onRunTests,
+              onCancelTests,
+              onSetWatchMode,
+            }}
+          />
+        )}
       </Content>
     </div>
   );
 };
 
-export const SidebarBottom = () => {
+export const SidebarBottom = ({ isDevelopment }: { isDevelopment?: boolean }) => {
   const api = useStorybookApi();
   const { notifications, status } = useStorybookState();
-  return <SidebarBottomBase api={api} notifications={notifications} status={status} />;
+  return (
+    <SidebarBottomBase
+      api={api}
+      notifications={notifications}
+      status={status}
+      isDevelopment={isDevelopment}
+    />
+  );
 };

code/core/src/manager/components/sidebar/TestingModule.tsx

@@ -229,7 +229,12 @@ export const TestingModule = ({
   const testing = testProviders.length > 0;
 
   return (
-    <Outline running={running} crashed={crashed} failed={failed || errorCount > 0}>
+    <Outline
+      id="storybook-testing-module"
+      running={running}
+      crashed={crashed}
+      failed={failed || errorCount > 0}
+    >
       <Card>
         <Collapsible
           style={{

code/frameworks/nextjs/src/config/webpack.ts

@@ -36,16 +36,16 @@ export const configureConfig = async ({
     addScopedAlias(baseConfig, 'react', 'next/dist/compiled/react');
   }
   if (tryResolve('next/dist/compiled/react-dom/cjs/react-dom-test-utils.production.js')) {
-    setAlias(
+    addScopedAlias(
       baseConfig,
       'react-dom/test-utils',
       'next/dist/compiled/react-dom/cjs/react-dom-test-utils.production.js'
     );
   }
   if (tryResolve('next/dist/compiled/react-dom')) {
-    setAlias(baseConfig, 'react-dom$', 'next/dist/compiled/react-dom');
-    setAlias(baseConfig, 'react-dom/client', 'next/dist/compiled/react-dom/client');
-    setAlias(baseConfig, 'react-dom/server', 'next/dist/compiled/react-dom/server');
+    addScopedAlias(baseConfig, 'react-dom$', 'next/dist/compiled/react-dom');
+    addScopedAlias(baseConfig, 'react-dom/client', 'next/dist/compiled/react-dom/client');
+    addScopedAlias(baseConfig, 'react-dom/server', 'next/dist/compiled/react-dom/server');
   }
 
   setupRuntimeConfig(baseConfig, nextConfig);

code/frameworks/nextjs/src/utils.ts

@@ -51,18 +51,36 @@ export const addScopedAlias = (baseConfig: WebpackConfig, name: string, alias?:
 };
 
 /**
- * @example // before main script path truncation require.resolve('styled-jsx') ===
- * '/some/path/node_modules/styled-jsx/index.js // after main script path truncation
+ * @example
+ *
+ * ```
+ * // before main script path truncation
+ * require.resolve('styled-jsx') === '/some/path/node_modules/styled-jsx/index.js
+ * // after main script path truncation
  * scopedResolve('styled-jsx') === '/some/path/node_modules/styled-jsx'
+ * ```
+ *
+ * @example
+ *
+ * ```
+ * // referencing a named export of a package
+ * scopedResolve('next/dist/compiled/react-dom/client') ===
+ *   // returns the path to the package export without the script filename
+ *   '/some/path/node_modules/next/dist/compiled/react-dom/client';
+ *
+ * // referencing a specific file within a CJS package
+ * scopedResolve('next/dist/compiled/react-dom/cjs/react-dom-test-utils.production.js') ===
+ *   // returns the path to the physical file, including the script filename
+ *   '/some/path/node_modules/next/dist/compiled/react-dom/cjs/react-dom-test-utils.production.js';
+ * ```
  *
- * @param id The module id
- * @returns A path to the module id scoped to the project folder without the main script path at the
- *   end
+ * @param id The module id or script file to resolve
+ * @returns An absolute path to the specified module id or script file scoped to the project folder
  * @summary
  * This is to help the addon in development.
  * Without it, the addon resolves packages in its node_modules instead of the example's node_modules.
  * Because require.resolve will also include the main script as part of the path, this function strips
- * that to just include the path to the module folder
+ * that to just include the path to the module folder when the id provided is a package or named export.
  */
 export const scopedResolve = (id: string): string => {
   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);
 };

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'),
         },
       },
     }),

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');

code/package.json

@@ -293,5 +293,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.4.2"
 }

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

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