Merge pull request #23259 from storybookjs/fix/pnp-paths-logic

CLI: Fix pnp paths logic in storybook metadata
(cherry picked from commit 446bed6)

code/lib/telemetry/src/get-framework-info.test.ts

@@ -0,0 +1,55 @@
+import type { StorybookConfig } from '@storybook/types';
+import { getFrameworkInfo } from './get-framework-info';
+import { getActualPackageJson } from './package-json';
+
+jest.mock('./package-json', () => ({
+  getActualPackageJson: jest.fn(),
+}));
+
+describe('getFrameworkInfo', () => {
+  it('should return an empty object if mainConfig.framework is undefined', async () => {
+    const result = await getFrameworkInfo({} as StorybookConfig);
+    expect(result).toEqual({});
+  });
+
+  it('should return an empty object if mainConfig.framework name is undefined', async () => {
+    const result = await getFrameworkInfo({ framework: {} } as StorybookConfig);
+    expect(result).toEqual({});
+  });
+
+  it('should call getActualPackageJson with the correct package name', async () => {
+    const packageName = '@storybook/react';
+    const framework = { name: packageName };
+    await getFrameworkInfo({ framework } as StorybookConfig);
+    expect(getActualPackageJson).toHaveBeenCalledWith(packageName);
+  });
+
+  it('should resolve the framework package json correctly and strip project paths in the metadata', async () => {
+    const packageName = '/path/to/project/@storybook/react';
+    const framework = { name: packageName };
+    const frameworkPackageJson = {
+      name: packageName,
+      dependencies: {
+        '@storybook/react': '7.0.0',
+        '@storybook/builder-vite': '7.0.0',
+      },
+    };
+
+    jest.spyOn(process, 'cwd').mockReturnValue('/path/to/project');
+
+    (getActualPackageJson as jest.Mock).mockResolvedValueOnce(frameworkPackageJson);
+
+    const result = await getFrameworkInfo({ framework } as StorybookConfig);
+
+    expect(getActualPackageJson).toHaveBeenCalledWith(packageName);
+
+    expect(result).toEqual({
+      framework: {
+        name: '$SNIP/@storybook/react',
+        options: undefined,
+      },
+      builder: '@storybook/builder-vite',
+      renderer: '@storybook/react',
+    });
+  });
+});

code/lib/telemetry/src/get-framework-info.ts

@@ -33,14 +33,7 @@ function findMatchingPackage(packageJson: PackageJson, suffixes: string[]) {
   return suffixes.map((suffix) => `@storybook/${suffix}`).find((pkg) => allDependencies[pkg]);
 }
 
-export const getFrameworkPackageName = (mainConfig?: StorybookConfig) => {
-  const packageNameOrPath =
-    typeof mainConfig?.framework === 'string' ? mainConfig.framework : mainConfig?.framework?.name;
-
-  if (!packageNameOrPath) {
-    return null;
-  }
-
+export const getFrameworkPackageName = (packageNameOrPath: string) => {
   const normalizedPath = path.normalize(packageNameOrPath).replace(new RegExp(/\\/, 'g'), '/');
 
   const knownFramework = Object.keys(frameworkPackages).find((pkg) => normalizedPath.endsWith(pkg));
@@ -49,21 +42,33 @@ export const getFrameworkPackageName = (mainConfig?: StorybookConfig) => {
 };
 
 export async function getFrameworkInfo(mainConfig: StorybookConfig) {
-  if (!mainConfig.framework) return {};
+  if (!mainConfig?.framework) {
+    return {};
+  }
 
-  const frameworkName = getFrameworkPackageName(mainConfig);
-  if (!frameworkName) return {};
-  const frameworkOptions =
-    typeof mainConfig.framework === 'object' ? mainConfig.framework.options : {};
+  const rawName =
+    typeof mainConfig.framework === 'string' ? mainConfig.framework : mainConfig.framework?.name;
+  if (!rawName) {
+    return {};
+  }
+
+  const frameworkPackageJson = await getActualPackageJson(rawName);
 
-  const frameworkPackageJson = await getActualPackageJson(frameworkName);
+  if (!frameworkPackageJson) {
+    return {};
+  }
 
   const builder = findMatchingPackage(frameworkPackageJson, knownBuilders);
   const renderer = findMatchingPackage(frameworkPackageJson, knownRenderers);
 
+  // parse framework name and strip off pnp paths etc.
+  const sanitizedFrameworkName = getFrameworkPackageName(rawName);
+  const frameworkOptions =
+    typeof mainConfig.framework === 'object' ? mainConfig.framework.options : {};
+
   return {
     framework: {
-      name: frameworkName,
+      name: sanitizedFrameworkName,
       options: frameworkOptions,
     },
     builder,