Merge pull request #30846 from storybookjs/version-patch-from-8.6.7

Release: Patch 8.6.8

Author: shilman

CHANGELOG.md

@@ -1,3 +1,12 @@
+## 8.6.8
+
+- Angular: Export all files in Angular package.json - [#30849](https://github.com/storybookjs/storybook/pull/30849), thanks @kasperpeulen!
+- CLI: Don't add packageManager entry to package.json automatically - [#30855](https://github.com/storybookjs/storybook/pull/30855), thanks @kasperpeulen!
+- React: Allow portable stories to be used in SSR - [#30847](https://github.com/storybookjs/storybook/pull/30847), thanks @kasperpeulen!
+- Svelte: Adjust Svelte typings to include Svelte 5 function components - [#30852](https://github.com/storybookjs/storybook/pull/30852), thanks @dummdidumm!
+- Telemetry: Make sure that telemetry doesn't fail on init - [#30857](https://github.com/storybookjs/storybook/pull/30857), thanks @kasperpeulen!
+- Vite: Update HMR filter to target specific story file types - [#30845](https://github.com/storybookjs/storybook/pull/30845), thanks @kasperpeulen!
+
 ## 8.6.7
 
 - React-Native-Web: Fix errors in CLI template stories - [#30821](https://github.com/storybookjs/storybook/pull/30821), thanks @dannyhw!

code/builders/builder-vite/src/plugins/strip-story-hmr-boundaries.ts

@@ -9,7 +9,7 @@ import type { Plugin } from 'vite';
 export async function stripStoryHMRBoundary(): Promise<Plugin> {
   const { createFilter } = await import('vite');
 
-  const filter = createFilter(/\.stories\.\w+$/);
+  const filter = createFilter(/\.stories\.(tsx?|jsx?|svelte|vue)$/);
   return {
     name: 'storybook:strip-hmr-boundary-plugin',
     enforce: 'post',

code/core/package.json

@@ -355,7 +355,6 @@
     "deep-object-diff": "^1.1.0",
     "dequal": "^2.0.2",
     "detect-indent": "^7.0.1",
-    "detect-package-manager": "^3.0.2",
     "detect-port": "^1.3.0",
     "diff": "^5.2.0",
     "downshift": "^9.0.4",
@@ -383,6 +382,7 @@
     "nanoid": "^4.0.2",
     "npmlog": "^7.0.0",
     "open": "^8.4.0",
+    "package-manager-detector": "^1.1.0",
     "picocolors": "^1.1.0",
     "picomatch": "^2.3.0",
     "picoquery": "^1.4.0",

code/core/src/telemetry/storybook-metadata.test.ts

@@ -3,10 +3,24 @@ import path from 'node:path';
 import type { MockInstance } from 'vitest';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
+import { getProjectRoot } from '@storybook/core/common';
 import type { PackageJson, StorybookConfig } from '@storybook/core/types';
 
+import { detect } from 'package-manager-detector';
+
+import { getMonorepoType } from '../telemetry/get-monorepo-type';
+import {
+  getActualPackageJson,
+  getActualPackageVersion,
+  getActualPackageVersions,
+} from './package-json';
 import { computeStorybookMetadata, metaFrameworks, sanitizeAddonName } from './storybook-metadata';
 
+vi.mock(import('./package-json'), { spy: true });
+vi.mock(import('./get-monorepo-type'), { spy: true });
+vi.mock(import('package-manager-detector'), { spy: true });
+vi.mock(import('@storybook/core/common'), { spy: true });
+
 const packageJsonMock: PackageJson = {
   name: 'some-user-project',
   version: 'x.x.x',
@@ -18,46 +32,32 @@ const mainJsMock: StorybookConfig = {
   stories: [],
 };
 
-vi.mock('./package-json', () => {
-  const getActualPackageVersion = vi.fn((name) =>
-    Promise.resolve({
-      name,
-      version: 'x.x.x',
-    })
-  );
+beforeEach(() => {
+  vi.mocked(detect).mockImplementation(async () => ({
+    name: 'yarn',
+    version: '3.1.1',
+    agent: 'yarn@berry',
+  }));
 
-  const getActualPackageVersions = vi.fn((packages) =>
-    Promise.all(Object.keys(packages).map(getActualPackageVersion))
-  );
+  vi.mocked(getProjectRoot).mockImplementation(() => process.cwd());
+
+  vi.mocked(getMonorepoType).mockImplementation(() => 'Nx');
 
-  const getActualPackageJson = vi.fn(() => ({
+  vi.mocked(getActualPackageJson).mockImplementation(async () => ({
     dependencies: {
       '@storybook/react': 'x.x.x',
       '@storybook/builder-vite': 'x.x.x',
     },
   }));
 
-  return {
-    getActualPackageVersions,
-    getActualPackageVersion,
-    getActualPackageJson,
-  };
-});
-
-vi.mock('./get-monorepo-type', () => ({
-  getMonorepoType: () => 'Nx',
-}));
-
-vi.mock('detect-package-manager', () => ({
-  detect: () => 'Yarn',
-  getNpmVersion: () => '3.1.1',
-}));
+  vi.mocked(getActualPackageVersion).mockImplementation(async (name) => ({
+    name,
+    version: 'x.x.x',
+  }));
 
-vi.mock('@storybook/core/common', async (importOriginal) => {
-  return {
-    ...(await importOriginal<typeof import('@storybook/core/common')>()),
-    getProjectRoot: () => process.cwd(),
-  };
+  vi.mocked(getActualPackageVersions).mockImplementation((packages) =>
+    Promise.all(Object.keys(packages).map(getActualPackageVersion))
+  );
 });
 
 const originalSep = path.sep;

code/core/src/telemetry/storybook-metadata.ts

@@ -5,13 +5,14 @@ import {
   getStorybookConfiguration,
   getStorybookInfo,
   loadMainConfig,
+  versions,
 } from '@storybook/core/common';
 import type { PackageJson, StorybookConfig } from '@storybook/core/types';
 
 import { readConfig } from '@storybook/core/csf-tools';
 
-import { detect, getNpmVersion } from 'detect-package-manager';
 import { findPackage, findPackagePath } from 'fd-package-json';
+import { detect } from 'package-manager-detector';
 
 import { getApplicationFileCount } from './get-application-file-count';
 import { getChromaticVersionSpecifier } from './get-chromatic-version';
@@ -51,7 +52,7 @@ export const computeStorybookMetadata = async ({
 }: {
   packageJsonPath: string;
   packageJson: PackageJson;
-  mainConfig: StorybookConfig & Record<string, any>;
+  mainConfig?: StorybookConfig & Record<string, any>;
 }): Promise<StorybookMetadata> => {
   const metadata: Partial<StorybookMetadata> = {
     generatedAt: new Date().getTime(),
@@ -115,16 +116,27 @@ export const computeStorybookMetadata = async ({
 
   try {
     const packageManagerType = await detect({ cwd: getProjectRoot() });
-    const packageManagerVersion = await getNpmVersion(packageManagerType);
+    if (packageManagerType) {
+      metadata.packageManager = {
+        type: packageManagerType.name,
+        version: packageManagerType.version,
+        agent: packageManagerType.agent,
+      };
+    }
 
-    metadata.packageManager = {
-      type: packageManagerType,
-      version: packageManagerVersion,
-    };
     // Better be safe than sorry, some codebases/paths might end up breaking with something like "spawn pnpm ENOENT"
     // so we just set the package manager if the detection is successful
   } catch (err) {}
 
+  const language = allDependencies.typescript ? 'typescript' : 'javascript';
+
+  if (!mainConfig) {
+    return {
+      ...metadata,
+      storybookVersionSpecifier: versions.storybook,
+      language,
+    };
+  }
   metadata.hasCustomBabel = !!mainConfig.babel;
   metadata.hasCustomWebpack = !!mainConfig.webpackFinal;
   metadata.hasStaticDirs = !!mainConfig.staticDirs;
@@ -196,8 +208,6 @@ export const computeStorybookMetadata = async ({
     storybookPackages[name].version = version;
   });
 
-  const language = allDependencies.typescript ? 'typescript' : 'javascript';
-
   const hasStorybookEslint = !!allDependencies['eslint-plugin-storybook'];
 
   const storybookInfo = getStorybookInfo(packageJson);
@@ -268,7 +278,7 @@ export const getStorybookMetadata = async (_configDir?: string) => {
         '--config-dir'
       ) as string)) ??
     '.storybook';
-  const mainConfig = await loadMainConfig({ configDir });
+  const mainConfig = await loadMainConfig({ configDir }).catch(() => undefined);
   cachedMetadata = await computeStorybookMetadata({ mainConfig, packageJson, packageJsonPath });
   return cachedMetadata;
 };

code/core/src/telemetry/types.ts

@@ -1,6 +1,6 @@
 import type { StorybookConfig, TypescriptOptions } from '@storybook/core/types';
 
-import type { PM } from 'detect-package-manager';
+import type { DetectResult } from 'package-manager-detector';
 
 import type { MonorepoType } from './get-monorepo-type';
 
@@ -47,8 +47,9 @@ export type StorybookMetadata = {
   renderer?: string;
   monorepo?: MonorepoType;
   packageManager?: {
-    type: PM;
-    version: string;
+    type: DetectResult['name'];
+    version: DetectResult['version'];
+    agent: DetectResult['agent'];
   };
   typescriptOptions?: Partial<TypescriptOptions>;
   addons?: Record<string, StorybookAddon>;

code/frameworks/angular/package.json

@@ -23,18 +23,17 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "node": "./dist/index.js",
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
     "./preset": "./preset.js",
     "./node": {
       "types": "./dist/node/index.d.ts",
-      "node": "./dist/node/index.js",
       "import": "./dist/node/index.js",
       "require": "./dist/node/index.js"
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./*": "./*"
   },
   "main": "dist/index.js",
   "module": "dist/index.mjs",

code/frameworks/ember/package.json

@@ -30,7 +30,8 @@
       "import": "./dist/node/index.js",
       "require": "./dist/node/index.js"
     },
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./*": "./*"
   },
   "main": "dist/index.js",
   "module": "dist/index.mjs",

code/package.json

@@ -303,5 +303,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.6.8"
 }

code/renderers/react/src/act-compat.ts

@@ -2,8 +2,6 @@
 // https://github.com/testing-library/react-testing-library/blob/3dcd8a9649e25054c0e650d95fca2317b7008576/src/act-compat.js
 import * as React from 'react';
 
-import * as DeprecatedReactTestUtils from 'react-dom/test-utils';
-
 declare const globalThis: {
   IS_REACT_ACT_ENVIRONMENT: boolean;
 };
@@ -13,9 +11,6 @@ declare const globalThis: {
 // We do check if act exists, but webpack will still throw an error on compile time
 const clonedReact = { ...React };
 
-const reactAct =
-  typeof clonedReact.act === 'function' ? clonedReact.act : DeprecatedReactTestUtils.act;
-
 export function setReactActEnvironment(isReactActEnvironment: boolean) {
   globalThis.IS_REACT_ACT_ENVIRONMENT = isReactActEnvironment;
 }
@@ -67,7 +62,15 @@ function withGlobalActEnvironment(actImplementation: (callback: () => void) => P
   };
 }
 
-export const act =
-  process.env.NODE_ENV === 'production'
+export const getAct = async () => {
+  // Lazy loading this makes sure that @storybook/react can be loaded in SSR contexts
+  // For example when SSR'ing portable stories
+  const reactAct =
+    typeof clonedReact.act === 'function'
+      ? clonedReact.act
+      : (await import('react-dom/test-utils')).act;
+
+  return process.env.NODE_ENV === 'production'
     ? (cb: (...args: any[]) => any) => cb()
     : withGlobalActEnvironment(reactAct);
+};