Merge pull request #23780 from storybookjs/shilman/bench-react-vite-d…

…efault-ts-nodocs

Build: Benchmark Vite-React-TS with docs disabled

.circleci/config.yml

@@ -489,11 +489,11 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 11
+          parallelism: 12
           requires:
             - build
       - build-sandboxes:
-          parallelism: 11
+          parallelism: 12
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
@@ -513,7 +513,7 @@ workflows:
           requires:
             - build-sandboxes
       - bench:
-          parallelism: 2
+          parallelism: 3
           requires:
             - build-sandboxes
       # TODO: reenable once we find out the source of flakyness
@@ -545,11 +545,11 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 20
+          parallelism: 21
           requires:
             - build
       - build-sandboxes:
-          parallelism: 20
+          parallelism: 21
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
@@ -569,7 +569,7 @@ workflows:
           requires:
             - build-sandboxes
       - bench:
-          parallelism: 2
+          parallelism: 3
           requires:
             - build-sandboxes
       # TODO: reenable once we find out the source of flakyness

code/lib/cli/src/sandbox-templates.ts

@@ -62,6 +62,7 @@ export type Template = {
   modifications?: {
     skipTemplateStories?: boolean;
     mainConfig?: Partial<StorybookConfig>;
+    disableDocs?: boolean;
   };
   /**
    * Flag to indicate that this template is a secondary template, which is used mainly to test rather specific features.
@@ -526,6 +527,16 @@ const benchTemplates = {
     },
     skipTasks: ['e2e-tests-dev', 'test-runner', 'test-runner-dev', 'e2e-tests', 'chromatic'],
   },
+  'bench/react-vite-default-ts-nodocs': {
+    ...baseTemplates['react-vite/default-ts'],
+    name: 'Bench (react-vite/default-ts, no docs)',
+    isInternal: true,
+    modifications: {
+      skipTemplateStories: true,
+      disableDocs: true,
+    },
+    skipTasks: ['e2e-tests-dev', 'test-runner', 'test-runner-dev', 'e2e-tests', 'chromatic'],
+  },
 } satisfies Record<`bench/${string}`, Template & { isInternal: true }>;
 
 export const allTemplates: Record<TemplateKey, Template> = {
@@ -546,6 +557,7 @@ export const normal: TemplateKey[] = [
   'nextjs/default-ts',
   'bench/react-vite-default-ts',
   'bench/react-webpack-18-ts',
+  'bench/react-vite-default-ts-nodocs',
 ];
 export const merged: TemplateKey[] = [
   ...normal,

scripts/bench/browse.ts

@@ -10,7 +10,7 @@ interface Result {
   mdxVisible?: number;
 }
 
-export const browse = async (url: string) => {
+export const browse = async (url: string, { disableDocs }: { disableDocs?: boolean }) => {
   const result: Result = {};
 
   /* Heat up time for playwright and the builder
@@ -21,13 +21,13 @@ export const browse = async (url: string) => {
    * We instantiate a new browser for each run to avoid any caching happening in the browser itself
    */
   const x = await benchStory(url);
-  await benchAutodocs(url);
+  if (!disableDocs) await benchAutodocs(url);
 
   result.storyVisibleUncached = x.storyVisible;
 
-  Object.assign(result, await benchMDX(url));
+  if (!disableDocs) Object.assign(result, await benchMDX(url));
   Object.assign(result, await benchStory(url));
-  Object.assign(result, await benchAutodocs(url));
+  if (!disableDocs) Object.assign(result, await benchAutodocs(url));
 
   return result;
 };

scripts/event-log-checker.ts

@@ -70,10 +70,11 @@ async function run() {
             8,
             `Expected 8 stories but received ${exampleStoryCount} instead.`
           );
+          const expectedDocsCount = template.modifications?.disableDocs ? 0 : 3;
           assert.equal(
             exampleDocsCount,
-            3,
-            `Expected 3 docs entries but received ${exampleDocsCount} instead.`
+            expectedDocsCount,
+            `Expected ${expectedDocsCount} docs entries but received ${exampleDocsCount} instead.`
           );
         });
       }

scripts/task.ts

@@ -176,6 +176,11 @@ export const options = createOptions({
     description: 'Do not include template stories and their addons',
     promptType: false,
   },
+  disableDocs: {
+    type: 'boolean',
+    description: 'Disable addon-docs from essentials',
+    promptType: false,
+  },
 });
 
 type PassedOptionValues = Omit<OptionValues<typeof options>, 'task' | 'startFrom' | 'junit'>;
@@ -304,7 +309,10 @@ async function runTask(task: Task, details: TemplateDetails, optionValues: Passe
   try {
     let updatedOptions = optionValues;
     if (details.template?.modifications?.skipTemplateStories) {
-      updatedOptions = { ...optionValues, skipTemplateStories: true };
+      updatedOptions = { ...updatedOptions, skipTemplateStories: true };
+    }
+    if (details.template?.modifications?.disableDocs) {
+      updatedOptions = { ...updatedOptions, disableDocs: true };
     }
     const controller = await task.run(details, updatedOptions);
 

scripts/tasks/bench.ts

@@ -16,6 +16,7 @@ export const bench: Task = {
   async run(details, options) {
     const controllers: AbortController[] = [];
     try {
+      const { disableDocs } = options;
       const { browse } = await import('../bench/browse');
       const { saveBench, loadBench } = await import('../bench/utils');
       const { default: prettyBytes } = await dynamicImport('pretty-bytes');
@@ -26,15 +27,15 @@ export const bench: Task = {
         throw new Error('dev: controller is null');
       }
       controllers.push(devController);
-      const devBrowseResult = await browse(`http://localhost:${devPort}`);
+      const devBrowseResult = await browse(`http://localhost:${devPort}`, { disableDocs });
       devController.abort();
 
       const serveController = await serve.run(details, { ...options, debug: false });
       if (!serveController) {
         throw new Error('serve: controller is null');
       }
       controllers.push(serveController);
-      const buildBrowseResult = await browse(`http://localhost:${servePort}`);
+      const buildBrowseResult = await browse(`http://localhost:${servePort}`, { disableDocs });
       serveController.abort();
 
       await saveBench(

scripts/tasks/sandbox-parts.ts

@@ -283,13 +283,13 @@ function updateStoriesField(mainConfig: ConfigFile, isJs: boolean) {
 }
 
 // Add a stories field entry for the passed symlink
-function addStoriesEntry(mainConfig: ConfigFile, path: string) {
+function addStoriesEntry(mainConfig: ConfigFile, path: string, disableDocs: boolean) {
   const stories = mainConfig.getFieldValue(['stories']) as string[];
 
   const entry = {
     directory: slash(join('../template-stories', path)),
     titlePrefix: slash(path),
-    files: '**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
+    files: disableDocs ? '**/*.stories.@(js|jsx|ts|tsx)' : '**/*.@(mdx|stories.@(js|jsx|ts|tsx))',
   };
 
   mainConfig.setFieldValue(['stories'], [...stories, entry]);
@@ -302,7 +302,12 @@ function getStoriesFolderWithVariant(variant?: string, folder = 'stories') {
 // packageDir is eg 'renderers/react', 'addons/actions'
 async function linkPackageStories(
   packageDir: string,
-  { mainConfig, cwd, linkInDir }: { mainConfig: ConfigFile; cwd: string; linkInDir?: string },
+  {
+    mainConfig,
+    cwd,
+    linkInDir,
+    disableDocs,
+  }: { mainConfig: ConfigFile; cwd: string; linkInDir?: string; disableDocs: boolean },
   variant?: string
 ) {
   const storiesFolderName = variant ? getStoriesFolderWithVariant(variant) : 'stories';
@@ -320,7 +325,7 @@ async function linkPackageStories(
   await ensureSymlink(source, target);
 
   if (!linkInDir) {
-    addStoriesEntry(mainConfig, packageDir);
+    addStoriesEntry(mainConfig, packageDir, disableDocs);
   }
 
   // Add `previewAnnotation` entries of the form
@@ -373,7 +378,7 @@ async function addExtraDependencies({
 
 export const addStories: Task['run'] = async (
   { sandboxDir, template, key },
-  { addon: extraAddons, dryRun, debug }
+  { addon: extraAddons, dryRun, debug, disableDocs }
 ) => {
   logger.log('💃 adding stories');
   const cwd = sandboxDir;
@@ -385,7 +390,8 @@ export const addStories: Task['run'] = async (
   // Ensure that we match the right stories in the stories directory
   updateStoriesField(
     mainConfig,
-    (await detectLanguage(packageManager)) === SupportedLanguage.JAVASCRIPT
+    (await detectLanguage(packageManager)) === SupportedLanguage.JAVASCRIPT,
+    disableDocs
   );
 
   const isCoreRenderer =
@@ -409,6 +415,7 @@ export const addStories: Task['run'] = async (
       mainConfig,
       cwd,
       linkInDir: resolve(cwd, storiesPath),
+      disableDocs,
     });
 
     if (
@@ -422,6 +429,7 @@ export const addStories: Task['run'] = async (
           mainConfig,
           cwd,
           linkInDir: resolve(cwd, storiesPath),
+          disableDocs,
         },
         sandboxSpecificStoriesFolder
       );
@@ -439,6 +447,7 @@ export const addStories: Task['run'] = async (
         mainConfig,
         cwd,
         linkInDir: resolve(cwd, storiesPath),
+        disableDocs,
       });
     }
 
@@ -453,6 +462,7 @@ export const addStories: Task['run'] = async (
           mainConfig,
           cwd,
           linkInDir: resolve(cwd, storiesPath),
+          disableDocs,
         },
         sandboxSpecificStoriesFolder
       );
@@ -465,6 +475,7 @@ export const addStories: Task['run'] = async (
     await linkPackageStories(await workspacePath('core package', '@storybook/preview-api'), {
       mainConfig,
       cwd,
+      disableDocs,
     });
   }
 
@@ -475,7 +486,10 @@ export const addStories: Task['run'] = async (
       if (!match) return acc;
       const suffix = match[1];
       if (suffix === 'essentials') {
-        return [...acc, ...essentialsAddons];
+        const essentials = disableDocs
+          ? essentialsAddons.filter((a) => a !== 'docs')
+          : essentialsAddons;
+        return [...acc, ...essentials];
       }
       return [...acc, suffix];
     },
@@ -494,7 +508,7 @@ export const addStories: Task['run'] = async (
   if (isCoreRenderer) {
     const existingStories = await filterExistsInCodeDir(addonDirs, join('template', 'stories'));
     for (const packageDir of existingStories) {
-      await linkPackageStories(packageDir, { mainConfig, cwd });
+      await linkPackageStories(packageDir, { mainConfig, cwd, disableDocs });
     }
 
     // Add some extra settings (see above for what these do)
@@ -509,7 +523,7 @@ export const addStories: Task['run'] = async (
   await writeConfig(mainConfig);
 };
 
-export const extendMain: Task['run'] = async ({ template, sandboxDir }) => {
+export const extendMain: Task['run'] = async ({ template, sandboxDir }, { disableDocs }) => {
   logger.log('📝 Extending main.js');
   const mainConfig = await readMainConfig({ cwd: sandboxDir });
   const templateConfig = template.modifications?.mainConfig || {};
@@ -527,6 +541,23 @@ export const extendMain: Task['run'] = async ({ template, sandboxDir }) => {
 
   Object.entries(configToAdd).forEach(([field, value]) => mainConfig.setFieldValue([field], value));
 
+  // Simulate Storybook Lite
+  if (disableDocs) {
+    const addons = mainConfig.getFieldValue(['addons']);
+    const addonsNoDocs = addons.map((addon: any) =>
+      addon !== '@storybook/addon-essentials' ? addon : { name: addon, options: { docs: false } }
+    );
+    mainConfig.setFieldValue(['addons'], addonsNoDocs);
+
+    // remove the docs options so that docs tags are ignored
+    mainConfig.setFieldValue(['docs'], {});
+    mainConfig.setFieldValue(['typescript'], { reactDocgen: false });
+
+    let updatedStories = mainConfig.getFieldValue(['stories']) as string[];
+    updatedStories = updatedStories.filter((specifier) => !specifier.endsWith('.mdx'));
+    mainConfig.setFieldValue(['stories'], updatedStories);
+  }
+
   if (template.expected.builder === '@storybook/builder-vite') setSandboxViteFinal(mainConfig);
   await writeConfig(mainConfig);
 };