Merge pull request #23199 from storybookjs/fix/parse-pnp-paths-in-metadata

CLI: Parse pnp paths in storybook metadata
(cherry picked from commit 4f7cd07)

Author: shilman

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

@@ -1,4 +1,7 @@
 import type { PackageJson, StorybookConfig } from '@storybook/types';
+import path from 'path';
+import { frameworkPackages } from '@storybook/core-common';
+import { cleanPaths } from './sanitize';
 import { getActualPackageJson } from './package-json';
 
 const knownRenderers = [
@@ -30,20 +33,39 @@ function findMatchingPackage(packageJson: PackageJson, suffixes: string[]) {
   return suffixes.map((suffix) => `@storybook/${suffix}`).find((pkg) => allDependencies[pkg]);
 }
 
-export async function getFrameworkInfo(mainConfig: StorybookConfig) {
-  const { framework: frameworkInput } = mainConfig;
+export const getFrameworkPackageName = (mainConfig?: StorybookConfig) => {
+  const packageNameOrPath =
+    typeof mainConfig?.framework === 'string' ? mainConfig.framework : mainConfig?.framework?.name;
+
+  if (!packageNameOrPath) {
+    return null;
+  }
+
+  const normalizedPath = path.normalize(packageNameOrPath).replace(new RegExp(/\\/, 'g'), '/');
 
-  if (!frameworkInput) return {};
+  const knownFramework = Object.keys(frameworkPackages).find((pkg) => normalizedPath.endsWith(pkg));
+
+  return knownFramework || cleanPaths(packageNameOrPath).replace(/.*node_modules[\\/]/, '');
+};
+
+export async function getFrameworkInfo(mainConfig: StorybookConfig) {
+  if (!mainConfig.framework) return {};
 
-  const framework = typeof frameworkInput === 'string' ? { name: frameworkInput } : frameworkInput;
+  const frameworkName = getFrameworkPackageName(mainConfig);
+  if (!frameworkName) return {};
+  const frameworkOptions =
+    typeof mainConfig.framework === 'object' ? mainConfig.framework.options : {};
 
-  const frameworkPackageJson = await getActualPackageJson(framework.name);
+  const frameworkPackageJson = await getActualPackageJson(frameworkName);
 
   const builder = findMatchingPackage(frameworkPackageJson, knownBuilders);
   const renderer = findMatchingPackage(frameworkPackageJson, knownRenderers);
 
   return {
-    framework,
+    framework: {
+      name: frameworkName,
+      options: frameworkOptions,
+    },
     builder,
     renderer,
   };

code/lib/telemetry/src/sanitize.test.ts

@@ -73,10 +73,10 @@ describe(`Errors Helpers`, () => {
 
         const mockCwd = jest.spyOn(process, `cwd`).mockImplementation(() => cwdMockPath);
 
-        const errorMessage = `This path ${fullPath} is a test ${fullPath}`;
+        const errorMessage = `This path should be sanitized ${fullPath}`;
 
         expect(cleanPaths(errorMessage, `/`)).toBe(
-          `This path $SNIP/${filePath} is a test $SNIP/${filePath}`
+          `This path should be sanitized $SNIP/${filePath}`
         );
         mockCwd.mockRestore();
       }
@@ -90,10 +90,10 @@ describe(`Errors Helpers`, () => {
 
         const mockCwd = jest.spyOn(process, `cwd`).mockImplementation(() => cwdMockPath);
 
-        const errorMessage = `This path ${fullPath} is a test ${fullPath}`;
+        const errorMessage = `This path should be sanitized ${fullPath}`;
 
         expect(cleanPaths(errorMessage, `\\`)).toBe(
-          `This path $SNIP\\${filePath} is a test $SNIP\\${filePath}`
+          `This path should be sanitized $SNIP\\${filePath}`
         );
         mockCwd.mockRestore();
       }