From 4d1de6b0d507312c92010ac09ce9ccd56b847eb3 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Thu, 10 Aug 2023 11:07:50 +0800 Subject: [PATCH 1/2] Build: Benchmark Vite-React-TS with docs disabled --- .circleci/config.yml | 12 +++---- code/lib/cli/src/sandbox-templates.ts | 12 +++++++ scripts/bench/browse.ts | 8 ++--- scripts/task.ts | 10 +++++- scripts/tasks/bench.ts | 5 +-- scripts/tasks/sandbox-parts.ts | 49 ++++++++++++++++++++++----- 6 files changed, 74 insertions(+), 22 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index b011deeaefab..f25da2b8ea12 100644 --- a/.circleci/config.yml +++ b/.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 diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index 5b19a3d8d4ad..95aa9bf029a3 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -62,6 +62,7 @@ export type Template = { modifications?: { skipTemplateStories?: boolean; mainConfig?: Partial; + 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 = { @@ -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, diff --git a/scripts/bench/browse.ts b/scripts/bench/browse.ts index d101f27e8c47..c063fed1ff8d 100644 --- a/scripts/bench/browse.ts +++ b/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; }; diff --git a/scripts/task.ts b/scripts/task.ts index 66314121768a..67a70ae30a86 100644 --- a/scripts/task.ts +++ b/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, '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); diff --git a/scripts/tasks/bench.ts b/scripts/tasks/bench.ts index e1b1fec753ea..25325e1090e0 100644 --- a/scripts/tasks/bench.ts +++ b/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,7 +27,7 @@ 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 }); @@ -34,7 +35,7 @@ export const bench: Task = { 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( diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index d08360a22ebe..fadbdf41c901 100644 --- a/scripts/tasks/sandbox-parts.ts +++ b/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); }; From 8132e4214a8c86e230c7790d9758acc251517484 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 13 Aug 2023 14:54:27 +0800 Subject: [PATCH 2/2] Update log checker to support disableDocs --- scripts/event-log-checker.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/scripts/event-log-checker.ts b/scripts/event-log-checker.ts index bc2056998664..e1f6d82bd533 100644 --- a/scripts/event-log-checker.ts +++ b/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.` ); }); }