Build: Add Rsbuild-based sandboxes

.circleci/config.yml

@@ -950,7 +950,7 @@ jobs:
                     mkdir features-1
                     cd features-1
                     npm set registry http://localhost:6001
-                    npx create-storybook --yes --package-manager npm --features docs test a11y
+                    npx create-storybook --yes --package-manager npm --features docs test a11y --loglevel=debug
                     npx vitest
                 environment:
                     IN_STORYBOOK_SANDBOX: true
@@ -1172,15 +1172,15 @@ workflows:
                 requires:
                     - build
             - create-sandboxes:
-                parallelism: 34
+                parallelism: 38
                 requires:
                     - build
             - check-sandboxes:
                 parallelism: 1
                 requires:
                     - create-sandboxes
             - chromatic-sandboxes:
-                parallelism: 31
+                parallelism: 35
                 requires:
                     - create-sandboxes
             - e2e-production:
@@ -1192,7 +1192,7 @@ workflows:
                 requires:
                     - create-sandboxes
             - test-runner-production:
-                parallelism: 29
+                parallelism: 33
                 requires:
                     - create-sandboxes
             - vitest-integration:
@@ -1286,11 +1286,11 @@ workflows:
                 requires:
                     - unit-tests
             - create-sandboxes:
-                parallelism: 19
+                parallelism: 21
                 requires:
                     - build
             - chromatic-sandboxes:
-                parallelism: 16
+                parallelism: 18
                 requires:
                     - create-sandboxes
             - e2e-production:
@@ -1302,7 +1302,7 @@ workflows:
                 requires:
                     - create-sandboxes
             - test-runner-production:
-                parallelism: 14
+                parallelism: 16
                 requires:
                     - create-sandboxes
             - vitest-integration:
@@ -1381,11 +1381,11 @@ workflows:
                 requires:
                     - unit-tests
             - create-sandboxes:
-                parallelism: 13
+                parallelism: 14
                 requires:
                     - build
             - chromatic-sandboxes:
-                parallelism: 10
+                parallelism: 11
                 requires:
                     - create-sandboxes
             - e2e-production:
@@ -1397,7 +1397,7 @@ workflows:
                 requires:
                     - create-sandboxes
             - test-runner-production:
-                parallelism: 8
+                parallelism: 9
                 requires:
                     - create-sandboxes
             - vitest-integration:

.circleci/src/workflows/daily.yml

@@ -31,7 +31,7 @@ jobs:
       requires:
         - build
   - create-sandboxes:
-      parallelism: 34
+      parallelism: 38
       requires:
         - build
   - check-sandboxes:
@@ -42,7 +42,7 @@ jobs:
   #     requires:
   #       - create-sandboxes
   - chromatic-sandboxes:
-      parallelism: 31
+      parallelism: 35
       requires:
         - create-sandboxes
   - e2e-production:
@@ -54,7 +54,7 @@ jobs:
       requires:
         - create-sandboxes
   - test-runner-production:
-      parallelism: 29
+      parallelism: 33
       requires:
         - create-sandboxes
   - vitest-integration:

.circleci/src/workflows/merged.yml

@@ -34,11 +34,11 @@ jobs:
       requires:
         - unit-tests
   - create-sandboxes:
-      parallelism: 19
+      parallelism: 21
       requires:
         - build
   - chromatic-sandboxes:
-      parallelism: 16
+      parallelism: 18
       requires:
         - create-sandboxes
   - e2e-production:
@@ -50,7 +50,7 @@ jobs:
       requires:
         - create-sandboxes
   - test-runner-production:
-      parallelism: 14
+      parallelism: 16
       requires:
         - create-sandboxes
   - vitest-integration:

.circleci/src/workflows/normal.yml

@@ -34,11 +34,11 @@ jobs:
       requires:
         - unit-tests
   - create-sandboxes:
-      parallelism: 13
+      parallelism: 14
       requires:
         - build
   - chromatic-sandboxes:
-      parallelism: 10
+      parallelism: 11
       requires:
         - create-sandboxes
   - e2e-production:
@@ -50,7 +50,7 @@ jobs:
       requires:
         - create-sandboxes
   - test-runner-production:
-      parallelism: 8
+      parallelism: 9
       requires:
         - create-sandboxes
   - vitest-integration:

code/core/src/csf-tools/ConfigFile.ts

@@ -1179,7 +1179,7 @@ export const isCsfFactoryPreview = (previewConfig: ConfigFile) => {
   return !!program.body.find((node) => {
     return (
       t.isImportDeclaration(node) &&
-      node.source.value.includes('@storybook') &&
+      node.source.value.includes('storybook') &&
       node.specifiers.some((specifier) => {
         return (
           t.isImportSpecifier(specifier) &&

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

@@ -1,58 +1,47 @@
-import { sep } from 'node:path';
-
-import { describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import type { StorybookConfig } from 'storybook/internal/types';
 
 import { getFrameworkInfo } from './get-framework-info';
-import { getActualPackageJson } from './package-json';
 
-vi.mock('./package-json', () => ({
-  getActualPackageJson: vi.fn(),
+vi.mock('storybook/internal/common', () => ({
+  getStorybookInfo: vi.fn(),
 }));
 
 describe('getFrameworkInfo', () => {
-  it('should return an empty object if mainConfig.framework is undefined', async () => {
-    const result = await getFrameworkInfo({} as StorybookConfig);
-    expect(result).toEqual({});
+  const defaultInfo = {
+    frameworkPackage: '@storybook/react',
+    rendererPackage: '@storybook/react',
+    builderPackage: '@storybook/builder-vite',
+  };
+
+  beforeEach(async () => {
+    const { getStorybookInfo } = await import('storybook/internal/common');
+    vi.mocked(getStorybookInfo).mockResolvedValue(defaultInfo as any);
   });
 
-  it('should return an empty object if mainConfig.framework name is undefined', async () => {
-    const result = await getFrameworkInfo({ framework: {} } as StorybookConfig);
-    expect(result).toEqual({});
+  it('returns framework/builder/renderer with empty options when no framework provided', async () => {
+    const result = await getFrameworkInfo({} as StorybookConfig, '/tmp/.storybook');
+    expect(result).toEqual({
+      framework: { name: defaultInfo.frameworkPackage, options: {} },
+      builder: defaultInfo.builderPackage,
+      renderer: defaultInfo.rendererPackage,
+    });
   });
 
-  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('passes configDir to getStorybookInfo', async () => {
+    const configDir = '/my/project/.storybook';
+    const { getStorybookInfo } = await import('storybook/internal/common');
+    await getFrameworkInfo({} as StorybookConfig, configDir);
+    expect(getStorybookInfo).toHaveBeenCalledWith(configDir);
   });
 
-  it('should resolve the framework package json correctly and strip project paths in the metadata', async () => {
-    const packageName = `${process.cwd()}/@storybook/react`.split('/').join(sep);
-    const framework = { name: packageName };
-    const frameworkPackageJson = {
-      name: packageName,
-      dependencies: {
-        '@storybook/react': '7.0.0',
-        '@storybook/builder-vite': '7.0.0',
-      },
-    };
-
-    vi.mocked(getActualPackageJson).mockResolvedValueOnce(frameworkPackageJson);
-
-    const result = await getFrameworkInfo({ framework } as StorybookConfig);
-
-    expect(getActualPackageJson).toHaveBeenCalledWith(packageName);
-
-    expect(result).toEqual({
-      framework: {
-        name: '$SNIP/@storybook/react'.split('/').join(sep),
-        options: undefined,
-      },
-      builder: '@storybook/builder-vite',
-      renderer: '@storybook/react',
-    });
+  it('returns provided framework options when object is passed', async () => {
+    const options = { foo: 'bar' } as any;
+    const result = await getFrameworkInfo(
+      { framework: { name: '@storybook/react', options } } as any,
+      '/tmp/.storybook'
+    );
+    expect(result.framework.options).toEqual(options);
   });
 });

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

@@ -1,80 +1,24 @@
-import { normalize } from 'node:path';
+import { getStorybookInfo } from 'storybook/internal/common';
+import type { StorybookConfig } from 'storybook/internal/types';
 
-import { frameworkPackages } from 'storybook/internal/common';
-import type { PackageJson, StorybookConfig } from 'storybook/internal/types';
-
-import { getActualPackageJson } from './package-json';
 import { cleanPaths } from './sanitize';
 
-const knownRenderers = [
-  'html',
-  'react',
-  'svelte',
-  'vue3',
-  'preact',
-  'server',
-  'vue',
-  'web-components',
-  'angular',
-  'ember',
-];
-
-const knownBuilders = ['builder-webpack5', 'builder-vite'];
-
-function findMatchingPackage(packageJson: PackageJson, suffixes: string[]) {
-  const { name = '', version, dependencies, devDependencies, peerDependencies } = packageJson;
-
-  const allDependencies = {
-    // We include the framework itself because it may be a renderer too (e.g. angular)
-    [name]: version,
-    ...dependencies,
-    ...devDependencies,
-    ...peerDependencies,
-  };
-
-  return suffixes.map((suffix) => `@storybook/${suffix}`).find((pkg) => allDependencies[pkg]);
-}
-
-export const getFrameworkPackageName = (packageNameOrPath: string) => {
-  const normalizedPath = normalize(packageNameOrPath).replace(new RegExp(/\\/, 'g'), '/');
-
-  const knownFramework = Object.keys(frameworkPackages).find((pkg) => normalizedPath.endsWith(pkg));
-
-  return knownFramework || cleanPaths(packageNameOrPath).replace(/.*node_modules[\\/]/, '');
+const cleanAndSanitizePath = (path: string) => {
+  return cleanPaths(path).replace(/.*node_modules[\\/]/, '');
 };
 
-export async function getFrameworkInfo(mainConfig: StorybookConfig) {
-  if (!mainConfig?.framework) {
-    return {};
-  }
-
-  const rawName =
-    typeof mainConfig.framework === 'string' ? mainConfig.framework : mainConfig.framework?.name;
-  if (!rawName) {
-    return {};
-  }
-
-  const frameworkPackageJson = await getActualPackageJson(rawName);
-
-  if (!frameworkPackageJson) {
-    return {};
-  }
-
-  const builder = findMatchingPackage(frameworkPackageJson, knownBuilders);
-  const renderer = findMatchingPackage(frameworkPackageJson, knownRenderers);
+export async function getFrameworkInfo(mainConfig: StorybookConfig, configDir: string) {
+  const { frameworkPackage, rendererPackage, builderPackage } = await getStorybookInfo(configDir);
 
-  // TODO: Evaluate if this is correct after removing pnp compatibility code in SB11
-  // 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: sanitizedFrameworkName,
+      name: frameworkPackage ? cleanAndSanitizePath(frameworkPackage) : undefined,
       options: frameworkOptions,
     },
-    builder,
-    renderer,
+    builder: builderPackage ? cleanAndSanitizePath(builderPackage) : undefined,
+    renderer: rendererPackage ? cleanAndSanitizePath(rendererPackage) : undefined,
   };
 }