Build: Add Rsbuild-based sandboxes

.circleci/config.yml

@@ -925,7 +925,7 @@ jobs:
                         shell: bash.exe
     test-init-features:
         executor:
-            class: medium+
+            class: small
             name: sb_node_22_browsers
         steps:
             - git-shallow-clone/checkout_advanced:
@@ -1172,27 +1172,27 @@ 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:
                 parallelism: 7
                 requires:
                     - create-sandboxes
             - e2e-dev:
-                parallelism: 28
+                parallelism: 32
                 requires:
                     - create-sandboxes
             - test-runner-production:
-                parallelism: 29
+                parallelism: 33
                 requires:
                     - create-sandboxes
             - vitest-integration:
@@ -1286,23 +1286,23 @@ workflows:
                 requires:
                     - unit-tests
             - create-sandboxes:
-                parallelism: 19
+                parallelism: 21
                 requires:
                     - build
             - chromatic-sandboxes:
-                parallelism: 16
+                parallelism: 18
                 requires:
                     - create-sandboxes
             - e2e-production:
                 parallelism: 6
                 requires:
                     - create-sandboxes
             - e2e-dev:
-                parallelism: 14
+                parallelism: 16
                 requires:
                     - create-sandboxes
             - test-runner-production:
-                parallelism: 14
+                parallelism: 16
                 requires:
                     - create-sandboxes
             - vitest-integration:
@@ -1381,23 +1381,23 @@ workflows:
                 requires:
                     - unit-tests
             - create-sandboxes:
-                parallelism: 13
+                parallelism: 14
                 requires:
                     - build
             - chromatic-sandboxes:
-                parallelism: 10
+                parallelism: 11
                 requires:
                     - create-sandboxes
             - e2e-production:
                 parallelism: 6
                 requires:
                     - create-sandboxes
             - e2e-dev:
-                parallelism: 8
+                parallelism: 9
                 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,19 +42,19 @@ jobs:
   #     requires:
   #       - create-sandboxes
   - chromatic-sandboxes:
-      parallelism: 31
+      parallelism: 35
       requires:
         - create-sandboxes
   - e2e-production:
       parallelism: 7
       requires:
         - create-sandboxes
   - e2e-dev:
-      parallelism: 28
+      parallelism: 32
       requires:
         - create-sandboxes
   - test-runner-production:
-      parallelism: 29
+      parallelism: 33
       requires:
         - create-sandboxes
   - vitest-integration:

.circleci/src/workflows/merged.yml

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

.circleci/src/workflows/normal.yml

@@ -34,23 +34,23 @@ jobs:
       requires:
         - unit-tests
   - create-sandboxes:
-      parallelism: 13
+      parallelism: 14
       requires:
         - build
   - chromatic-sandboxes:
-      parallelism: 10
+      parallelism: 11
       requires:
         - create-sandboxes
   - e2e-production:
       parallelism: 6
       requires:
         - create-sandboxes
   - e2e-dev:
-      parallelism: 8
+      parallelism: 9
       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/lib/cli-storybook/src/sandbox-templates.ts

@@ -83,6 +83,7 @@ export type Template = {
    */
   modifications?: {
     skipTemplateStories?: boolean;
+    skipMocking?: boolean;
     mainConfig?: LoosenedStorybookConfig | ((config: ConfigFile) => LoosenedStorybookConfig);
     testBuild?: boolean;
     disableDocs?: boolean;
@@ -105,7 +106,7 @@ export type Template = {
 };
 
 type BaseTemplates = Template & {
-  name: `${string} ${`v${number}` | 'Latest' | 'Prerelease'} (${'Webpack' | 'Vite'} | ${
+  name: `${string} ${`v${number}` | 'Latest' | 'Prerelease'} (${'Webpack' | 'Vite' | 'RSBuild'} | ${
     | 'JavaScript'
     | 'TypeScript'})`;
 };
@@ -481,6 +482,21 @@ export const baseTemplates = {
     },
     skipTasks: ['e2e-tests', 'bench', 'vitest-integration'],
   },
+  'react-rsbuild/default-ts': {
+    name: 'React Latest (RSBuild | TypeScript)',
+    script: 'yarn create rsbuild -d {{beforeDir}} -t react-ts --tools eslint',
+    expected: {
+      framework: 'storybook-react-rsbuild',
+      renderer: '@storybook/react',
+      builder: 'storybook-builder-rsbuild',
+    },
+    modifications: {
+      useCsfFactory: true,
+      extraDependencies: ['prop-types'],
+      skipMocking: true,
+    },
+    skipTasks: ['e2e-tests', 'bench', 'vitest-integration'],
+  },
   'solid-vite/default-js': {
     name: 'SolidJS Latest (Vite | JavaScript)',
     script: 'npx degit solidjs/templates/js {{beforeDir}}',
@@ -521,6 +537,20 @@ export const baseTemplates = {
     },
     skipTasks: ['bench'],
   },
+  'vue3-rsbuild/default-ts': {
+    name: 'Vue Latest (RSBuild | TypeScript)',
+    script: 'yarn create rsbuild -d {{beforeDir}} -t vue-ts --tools eslint',
+    expected: {
+      framework: 'storybook-vue3-rsbuild',
+      renderer: '@storybook/vue3',
+      builder: 'storybook-builder-rsbuild',
+    },
+    modifications: {
+      useCsfFactory: true,
+      skipMocking: true,
+    },
+    skipTasks: ['e2e-tests', 'bench', 'vitest-integration'],
+  },
   // 'nuxt-vite/default-ts': {
   //   name: 'Nuxt v3 (Vite | TypeScript)',
   //   script: 'npx nuxi init --packageManager yarn --gitInit false -M @nuxt/ui {{beforeDir}}',
@@ -559,6 +589,20 @@ export const baseTemplates = {
       type: ProjectType.HTML,
     },
   },
+  'html-rsbuild/default-ts': {
+    name: 'HTML Latest (RSBuild | TypeScript)',
+    script: 'yarn create rsbuild -d {{beforeDir}} -t vanilla-ts --tools eslint',
+    expected: {
+      framework: 'storybook-html-rsbuild',
+      renderer: '@storybook/html',
+      builder: 'storybook-builder-rsbuild',
+    },
+    modifications: {
+      useCsfFactory: true,
+      skipMocking: true,
+    },
+    skipTasks: ['e2e-tests', 'bench', 'vitest-integration'],
+  },
   'svelte-vite/default-js': {
     name: 'Svelte Latest (Vite | JavaScript)',
     script: 'npm create vite --yes {{beforeDir}} -- --template svelte',
@@ -637,6 +681,20 @@ export const baseTemplates = {
     // Remove smoke-test from the list once https://github.com/storybookjs/storybook/issues/19351 is fixed.
     skipTasks: ['smoke-test', 'e2e-tests', 'bench', 'vitest-integration'],
   },
+  'lit-rsbuild/default-ts': {
+    name: 'Web Components Latest (RSBuild | TypeScript)',
+    script: 'yarn create rsbuild -d {{beforeDir}} -t lit-ts --tools eslint',
+    expected: {
+      framework: 'storybook-web-components-rsbuild',
+      renderer: '@storybook/web-components',
+      builder: 'storybook-builder-rsbuild',
+    },
+    modifications: {
+      useCsfFactory: true,
+      skipMocking: true,
+    },
+    skipTasks: ['e2e-tests', 'bench', 'vitest-integration'],
+  },
   'preact-vite/default-js': {
     name: 'Preact Latest (Vite | JavaScript)',
     script: 'npm create vite --yes {{beforeDir}} -- --template preact',
@@ -824,6 +882,7 @@ const benchTemplates = {
     isInternal: true,
     modifications: {
       skipTemplateStories: true,
+      skipMocking: true,
     },
     skipTasks: [
       'e2e-tests',
@@ -841,6 +900,7 @@ const benchTemplates = {
     isInternal: true,
     modifications: {
       skipTemplateStories: true,
+      skipMocking: true,
     },
     skipTasks: [
       'e2e-tests',
@@ -858,6 +918,7 @@ const benchTemplates = {
     modifications: {
       skipTemplateStories: true,
       disableDocs: true,
+      skipMocking: true,
     },
     skipTasks: [
       'e2e-tests',
@@ -876,6 +937,7 @@ const benchTemplates = {
     modifications: {
       skipTemplateStories: true,
       testBuild: true,
+      skipMocking: true,
     },
     skipTasks: [
       'e2e-tests',
@@ -893,6 +955,7 @@ const benchTemplates = {
     modifications: {
       skipTemplateStories: true,
       testBuild: true,
+      skipMocking: true,
     },
     skipTasks: [
       'e2e-tests',
@@ -928,6 +991,7 @@ export const normal: TemplateKey[] = [
   'bench/react-vite-default-ts-test-build',
   'bench/react-webpack-18-ts-test-build',
   'ember/default-js',
+  'react-rsbuild/default-ts',
 ];
 
 export const merged: TemplateKey[] = [
@@ -938,6 +1002,7 @@ export const merged: TemplateKey[] = [
   'nextjs-vite/15-ts',
   'preact-vite/default-ts',
   'html-vite/default-ts',
+  'vue3-rsbuild/default-ts',
 ];
 
 export const daily: TemplateKey[] = [
@@ -960,6 +1025,8 @@ export const daily: TemplateKey[] = [
   'internal/react16-webpack',
   'internal/react18-webpack-babel',
   'react-native-web-vite/expo-ts',
+  'lit-rsbuild/default-ts',
+  'html-rsbuild/default-ts',
   // 'react-native-web-vite/rn-cli-ts',
 ];
 

scripts/tasks/sandbox-parts.ts

@@ -835,7 +835,7 @@ export const extendPreview: Task['run'] = async ({ template, sandboxDir }) => {
     previewConfig.setFieldValue(['tags'], ['vitest']);
   }
 
-  if (template.name.includes('Bench')) {
+  if (template.modifications?.skipMocking) {
     await writeConfig(previewConfig);
     return;
   }

scripts/tasks/sandbox.ts

@@ -142,7 +142,7 @@ export const sandbox: Task = {
     }
 
     // not if sandbox is bench
-    if (!details.template.name.includes('Bench')) {
+    if (!details.template.modifications?.skipMocking) {
       await addGlobalMocks(details, options);
     }
 

scripts/utils/yarn.ts

@@ -143,7 +143,11 @@ export const configureYarn2ForVerdaccio = async ({
     // React prereleases will have INCOMPATIBLE_PEER_DEPENDENCY errors because of transitive dependencies not allowing v19 betas
     key.includes('nextjs') ||
     key.includes('react-vite/prerelease') ||
-    key.includes('react-webpack/prerelease')
+    key.includes('react-webpack/prerelease') ||
+    key.includes('react-rsbuild/default-ts') ||
+    key.includes('vue-rsbuild/default-ts') ||
+    key.includes('html-rsbuild/default-ts') ||
+    key.includes('web-components-rsbuild/default-ts')
   ) {
     // Don't error with INCOMPATIBLE_PEER_DEPENDENCY for SvelteKit sandboxes, it is expected to happen with @sveltejs/vite-plugin-svelte
     command.push(