diff --git a/.circleci/config.yml b/.circleci/config.yml index c49af2a063b5..b7266a42c698 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -341,30 +341,6 @@ jobs: paths: - sandbox/*/bench/*.json - sandbox/*/storybook-static - build-test-sandboxes: - parameters: - parallelism: - type: integer - executor: - class: large - name: sb_node_16_browsers - parallelism: << parameters.parallelism >> - steps: - - git-shallow-clone/checkout_advanced: - clone_options: '--depth 1 --verbose' - - attach_workspace: - at: . - - run: - name: Building Sandboxes - command: yarn task --task test-build --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task build) --no-link --start-from=never --junit - - report-workflow-on-failure: - template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task build) - - store_test_results: - path: test-results - - persist_to_workspace: - root: . - paths: - - sandbox/*/bench/test-build.json test-runner-production: parameters: parallelism: @@ -523,15 +499,11 @@ workflows: requires: - unit-tests - create-sandboxes: - parallelism: 12 + parallelism: 14 requires: - build - - build-test-sandboxes: - parallelism: 12 - requires: - - create-sandboxes - build-sandboxes: - parallelism: 12 + parallelism: 14 requires: - create-sandboxes - chromatic-sandboxes: @@ -551,10 +523,9 @@ workflows: requires: - build-sandboxes - bench: - parallelism: 3 + parallelism: 5 requires: - build-sandboxes - - build-test-sandboxes # TODO: reenable once we find out the source of flakyness # - test-runner-dev: # requires: @@ -584,15 +555,11 @@ workflows: requires: - unit-tests - create-sandboxes: - parallelism: 21 + parallelism: 23 requires: - build - - build-test-sandboxes: - parallelism: 21 - requires: - - create-sandboxes - build-sandboxes: - parallelism: 21 + parallelism: 23 requires: - create-sandboxes - chromatic-sandboxes: @@ -612,10 +579,9 @@ workflows: requires: - build-sandboxes - bench: - parallelism: 3 + parallelism: 5 requires: - build-sandboxes - - build-test-sandboxes # TODO: reenable once we find out the source of flakyness # - test-runner-dev: # parallelism: 4 @@ -643,18 +609,14 @@ workflows: requires: - build - create-sandboxes: - parallelism: 36 + parallelism: 38 requires: - build # - smoke-test-sandboxes: # disabled for now # requires: # - create-sandboxes - - build-test-sandboxes: - parallelism: 36 - requires: - - create-sandboxes - build-sandboxes: - parallelism: 36 + parallelism: 38 requires: - create-sandboxes - chromatic-sandboxes: diff --git a/code/addons/docs/README.md b/code/addons/docs/README.md index 02c97503b313..025ff9bbd697 100644 --- a/code/addons/docs/README.md +++ b/code/addons/docs/README.md @@ -146,7 +146,6 @@ export default { jsxOptions: {}, csfPluginOptions: null, mdxPluginOptions: {}, - transcludeMarkdown: true, }, }, ], @@ -157,16 +156,9 @@ export default { `csfPluginOptions` is an object for configuring `@storybook/csf-plugin`. When set to `null` it tells docs not to run the `csf-plugin` at all, which can be used as an optimization, or if you're already using `csf-plugin` in your `main.js`. -The `transcludeMarkdown` option enables mdx files to import `.md` files and render them as a component. -```mdx -import { Meta } from '@storybook/addon-docs'; -import Changelog from '../CHANGELOG.md'; +> With the release of version 7.0, it is no longer possible to import `.md` files directly into Storybook using the `transcludeMarkdown` [option](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#importing-plain-markdown-files-with-transcludemarkdown-has-changed). Instead, we recommend using the [`Markdown`](https://storybook.js.org/docs/react/api/doc-block-markdown) Doc Block for importing Markdown files into your Storybook documentation. - - - -``` ## TypeScript configuration diff --git a/code/addons/interactions/src/preview.ts b/code/addons/interactions/src/preview.ts index d393a0aefb20..cee79b7a2dd9 100644 --- a/code/addons/interactions/src/preview.ts +++ b/code/addons/interactions/src/preview.ts @@ -21,7 +21,6 @@ const fn = JestMock.fn.bind(JestMock); // Aliasing `fn` to `action` here, so we get a more descriptive label in the UI. const { action } = instrument({ action: fn }, { retain: true }); const channel = addons.getChannel(); -const seen = new Set(); const spies: any[] = []; channel.on(FORCE_REMOUNT, () => spies.forEach((mock) => mock?.mockClear?.())); @@ -30,8 +29,6 @@ channel.on(STORY_RENDER_PHASE_CHANGED, ({ newPhase }) => { }); const addSpies = (id: string, val: any, key?: string): any => { - if (seen.has(val)) return val; - seen.add(val); try { if (Object.prototype.toString.call(val) === '[object Object]') { // We have to mutate the original object for this to survive HMR. @@ -42,7 +39,8 @@ const addSpies = (id: string, val: any, key?: string): any => { if (Array.isArray(val)) { return val.map((item, index) => addSpies(id, item, `${key}[${index}]`)); } - if (typeof val === 'function' && val.isAction) { + // eslint-disable-next-line no-underscore-dangle + if (typeof val === 'function' && val.isAction && !val._isMockFunction) { Object.defineProperty(val, 'name', { value: key, writable: false }); Object.defineProperty(val, '__storyId__', { value: id, writable: false }); const spy = action(val); diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index f6a74983aa71..2dd4edb620f9 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -67,6 +67,7 @@ export type Template = { modifications?: { skipTemplateStories?: boolean; mainConfig?: Partial; + testBuild?: boolean; disableDocs?: boolean; }; /** @@ -559,7 +560,27 @@ const benchTemplates = { }, skipTasks: ['e2e-tests-dev', 'test-runner', 'test-runner-dev', 'e2e-tests', 'chromatic'], }, -} satisfies Record<`bench/${string}`, Template & { isInternal: true }>; + 'bench/react-vite-default-ts-test-build': { + ...baseTemplates['react-vite/default-ts'], + name: 'Bench (react-vite/default-ts, test-build)', + isInternal: true, + modifications: { + skipTemplateStories: true, + testBuild: true, + }, + skipTasks: ['e2e-tests-dev', 'test-runner', 'test-runner-dev', 'e2e-tests', 'chromatic'], + }, + 'bench/react-webpack-18-ts-test-build': { + ...baseTemplates['react-webpack/18-ts'], + name: 'Bench (react-webpack/18-ts, test-build)', + isInternal: true, + modifications: { + skipTemplateStories: true, + testBuild: true, + }, + skipTasks: ['e2e-tests-dev', 'test-runner', 'test-runner-dev', 'e2e-tests', 'chromatic'], + }, +} satisfies Record; export const allTemplates: Record = { ...baseTemplates, @@ -580,6 +601,8 @@ export const normal: TemplateKey[] = [ 'bench/react-vite-default-ts', 'bench/react-webpack-18-ts', 'bench/react-vite-default-ts-nodocs', + 'bench/react-vite-default-ts-test-build', + 'bench/react-webpack-18-ts-test-build', ]; export const merged: TemplateKey[] = [ ...normal, diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts index 347713e03aaf..39511aef6be4 100644 --- a/code/lib/core-server/src/presets/common-preset.ts +++ b/code/lib/core-server/src/presets/common-preset.ts @@ -17,7 +17,7 @@ import type { StorybookConfig, } from '@storybook/types'; import { printConfig, readConfig, readCsf } from '@storybook/csf-tools'; -import { join } from 'path'; +import { join, isAbsolute } from 'path'; import { dedent } from 'ts-dedent'; import fetch from 'node-fetch'; import type { Channel } from '@storybook/channels'; @@ -61,15 +61,16 @@ export const favicon = async ( const lists = await Promise.all( statics.map(async (dir) => { const results = []; - const relativeDir = staticDirsValue - ? getDirectoryFromWorkingDir({ - configDir: options.configDir, - workingDir: process.cwd(), - directory: dir, - }) - : dir; - - const { staticPath, targetEndpoint } = await parseStaticDir(relativeDir); + const normalizedDir = + staticDirsValue && !isAbsolute(dir) + ? getDirectoryFromWorkingDir({ + configDir: options.configDir, + workingDir: process.cwd(), + directory: dir, + }) + : dir; + + const { staticPath, targetEndpoint } = await parseStaticDir(normalizedDir); if (targetEndpoint === '/') { const url = 'favicon.svg'; diff --git a/code/lib/core-server/src/utils/server-statics.ts b/code/lib/core-server/src/utils/server-statics.ts index 19d569cfcc06..ca0f8c55e354 100644 --- a/code/lib/core-server/src/utils/server-statics.ts +++ b/code/lib/core-server/src/utils/server-statics.ts @@ -6,7 +6,7 @@ import chalk from 'chalk'; import type { Router } from 'express'; import express from 'express'; import { pathExists } from 'fs-extra'; -import path, { basename } from 'path'; +import path, { basename, isAbsolute } from 'path'; import isEqual from 'lodash/isEqual.js'; import { dedent } from 'ts-dedent'; @@ -30,14 +30,15 @@ export async function useStatics(router: Router, options: Options) { await Promise.all( statics.map(async (dir) => { try { - const relativeDir = staticDirs - ? getDirectoryFromWorkingDir({ - configDir: options.configDir, - workingDir: process.cwd(), - directory: dir, - }) - : dir; - const { staticDir, staticPath, targetEndpoint } = await parseStaticDir(relativeDir); + const normalizedDir = + staticDirs && !isAbsolute(dir) + ? getDirectoryFromWorkingDir({ + configDir: options.configDir, + workingDir: process.cwd(), + directory: dir, + }) + : dir; + const { staticDir, staticPath, targetEndpoint } = await parseStaticDir(normalizedDir); // Don't log for the internal static dir if (!targetEndpoint.startsWith('/sb-')) { diff --git a/scripts/task.ts b/scripts/task.ts index 6cf4fa7e9993..897957653413 100644 --- a/scripts/task.ts +++ b/scripts/task.ts @@ -20,7 +20,7 @@ import { sandbox } from './tasks/sandbox'; import { syncDocs } from './tasks/sync-docs'; import { dev } from './tasks/dev'; import { smokeTest } from './tasks/smoke-test'; -import { build, testBuild } from './tasks/build'; +import { build } from './tasks/build'; import { serve } from './tasks/serve'; import { testRunnerBuild } from './tasks/test-runner-build'; import { testRunnerDev } from './tasks/test-runner-dev'; @@ -103,7 +103,6 @@ export const tasks = { dev, 'smoke-test': smokeTest, build, - 'test-build': testBuild, serve, 'test-runner': testRunnerBuild, 'test-runner-dev': testRunnerDev, diff --git a/scripts/tasks/build.ts b/scripts/tasks/build.ts index 09324edac58d..099a98ee1a90 100644 --- a/scripts/tasks/build.ts +++ b/scripts/tasks/build.ts @@ -12,10 +12,14 @@ export const build: Task = { async ready({ builtSandboxDir }) { return pathExists(builtSandboxDir); }, - async run({ sandboxDir }, { dryRun, debug }) { + async run({ sandboxDir, template }, { dryRun, debug }) { const start = now(); - await exec(`yarn build-storybook --quiet`, { cwd: sandboxDir }, { dryRun, debug }); + await exec( + `yarn build-storybook --quiet ${template.modifications?.testBuild ? '--test' : ''}`, + { cwd: sandboxDir }, + { dryRun, debug } + ); const buildTime = now() - start; const dir = join(sandboxDir, 'storybook-static'); @@ -48,49 +52,3 @@ export const build: Task = { ); }, }; - -export const testBuild: Task = { - description: 'Build the static version of the sandbox optimized for testing purposes', - dependsOn: ['sandbox'], - async ready({ builtSandboxDir }) { - return pathExists(builtSandboxDir); - }, - async run({ sandboxDir }, { dryRun, debug }) { - const start = now(); - - await exec(`yarn build-storybook --test --quiet`, { cwd: sandboxDir }, { dryRun, debug }); - - const testBuildTime = now() - start; - const dir = join(sandboxDir, 'storybook-static'); - const getSize = promisify(dirSize); - const testBuildSize = await getSize(dir); - const testBuildSbAddonsSize = await getSize(join(dir, 'sb-addons')); - const testBuildSbCommonSize = await getSize(join(dir, 'sb-common-assets')); - const testBuildSbManagerSize = await getSize(join(dir, 'sb-manager')); - const testBuildSbPreviewSize = await getSize(join(dir, 'sb-preview')); - const testBuildPrebuildSize = - testBuildSbAddonsSize + - testBuildSbCommonSize + - testBuildSbManagerSize + - testBuildSbPreviewSize; - - const testBuildStaticSize = await getSize(join(dir, 'static')).catch(() => 0); - const testBuildPreviewSize = testBuildSize - testBuildPrebuildSize - testBuildStaticSize; - - await saveBench( - 'test-build', - { - testBuildTime, - testBuildSize, - testBuildSbAddonsSize, - testBuildSbCommonSize, - testBuildSbManagerSize, - testBuildSbPreviewSize, - testBuildStaticSize, - testBuildPrebuildSize, - testBuildPreviewSize, - }, - { rootDir: sandboxDir } - ); - }, -};