From 6ccbe53f97f06e7bf15d2b41e475a9efb88f32ed Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sat, 26 Jun 2021 16:26:54 +0800 Subject: [PATCH] Merge pull request #15375 from storybookjs/fix/csf3-feature-flag-webpack5 CSF3: Genericize feature flagging and fix webpack5 --- .../src/preview/iframe-webpack.config.ts | 4 ++-- .../src/preview/iframe-webpack.config.ts | 2 ++ lib/core-client/src/preview/StoryRenderer.test.ts | 6 ++++-- lib/core-client/src/preview/StoryRenderer.tsx | 5 ++--- lib/core-client/src/preview/csf3.ts | 10 ---------- lib/core-client/src/preview/normalizeStory.ts | 6 ++++-- lib/core-common/src/types.ts | 2 +- lib/core-server/src/build-dev.ts | 2 +- lib/core-server/src/build-static.ts | 2 +- 9 files changed, 17 insertions(+), 22 deletions(-) delete mode 100644 lib/core-client/src/preview/csf3.ts diff --git a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts index 3bec5bc44b3e..5748972b6949 100644 --- a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts +++ b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts @@ -64,7 +64,7 @@ export default async ({ presets, typescriptOptions, modern, - previewCsfV3, + features, }: Options & Record): Promise => { const logLevel = await presets.apply('logLevel', undefined); const frameworkOptions = await presets.apply(`${framework}Options`, {}); @@ -154,7 +154,7 @@ export default async ({ globals: { LOGLEVEL: logLevel, FRAMEWORK_OPTIONS: frameworkOptions, - PREVIEW_CSF_V3: previewCsfV3, + FEATURES: features, }, headHtmlSnippet, bodyHtmlSnippet, diff --git a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts index 15e22f7e2725..4e1421f7d65b 100644 --- a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -59,6 +59,7 @@ export default async ({ presets, typescriptOptions, modern, + features, }: Options & Record): Promise => { const envs = await presets.apply>('env'); const logLevel = await presets.apply('logLevel', undefined); @@ -153,6 +154,7 @@ export default async ({ globals: { LOGLEVEL: logLevel, FRAMEWORK_OPTIONS: frameworkOptions, + FEATURES: features, }, headHtmlSnippet, bodyHtmlSnippet, diff --git a/lib/core-client/src/preview/StoryRenderer.test.ts b/lib/core-client/src/preview/StoryRenderer.test.ts index eac53265c3f1..177e79cd5cf6 100644 --- a/lib/core-client/src/preview/StoryRenderer.test.ts +++ b/lib/core-client/src/preview/StoryRenderer.test.ts @@ -36,8 +36,10 @@ jest.mock('@storybook/client-logger', () => ({ }, })); -jest.mock('./csf3', () => ({ - isCsf3Enabled: () => true, +jest.mock('global', () => ({ + // @ts-ignore + ...global, + FEATURES: { previewCsfV3: true }, })); function prepareRenderer() { diff --git a/lib/core-client/src/preview/StoryRenderer.tsx b/lib/core-client/src/preview/StoryRenderer.tsx index d76b7fa0993f..2633f22eaeb5 100644 --- a/lib/core-client/src/preview/StoryRenderer.tsx +++ b/lib/core-client/src/preview/StoryRenderer.tsx @@ -11,9 +11,8 @@ import { StoryStore } from '@storybook/client-api'; import { NoDocs } from './NoDocs'; import { RenderStoryFunction, RenderContextWithoutStoryContext } from './types'; -import { isCsf3Enabled } from './csf3'; -const { document } = global; +const { document, FEATURES = {} } = global; // We have "changed" story if this changes interface RenderMetadata { @@ -282,7 +281,7 @@ export class StoryRenderer { const storyContext = await applyLoaders(); const storyFn = () => unboundStoryFn(storyContext); await this.render({ ...context, storyContext, storyFn }); - if (isCsf3Enabled() && !forceRender) { + if (FEATURES.previewCsfV3 && !forceRender) { await runPlayFunction(); } this.channel.emit(Events.STORY_RENDERED, id); diff --git a/lib/core-client/src/preview/csf3.ts b/lib/core-client/src/preview/csf3.ts deleted file mode 100644 index b54574388ed0..000000000000 --- a/lib/core-client/src/preview/csf3.ts +++ /dev/null @@ -1,10 +0,0 @@ -import global from 'global'; - -const { PREVIEW_CSF_V3 } = global; -export const isCsf3Enabled = () => { - try { - return !!PREVIEW_CSF_V3; - } catch (e) { - return false; - } -}; diff --git a/lib/core-client/src/preview/normalizeStory.ts b/lib/core-client/src/preview/normalizeStory.ts index 4090239b1af3..b7bfe1c99b7f 100644 --- a/lib/core-client/src/preview/normalizeStory.ts +++ b/lib/core-client/src/preview/normalizeStory.ts @@ -1,8 +1,10 @@ +import global from 'global'; import { logger } from '@storybook/client-logger'; import { storyNameFromExport, toId } from '@storybook/csf'; import dedent from 'ts-dedent'; import deprecate from 'util-deprecate'; -import { isCsf3Enabled } from './csf3'; + +const { FEATURES = {} } = global; const deprecatedStoryAnnotation = dedent` CSF .story annotations deprecated; annotate story functions directly: @@ -97,4 +99,4 @@ export const normalizeV3 = (key: string, storyExport: any, meta: any, globalRend }; }; -export const normalizeStory = isCsf3Enabled() ? normalizeV3 : normalizeV2; +export const normalizeStory = FEATURES.previewCsfV3 ? normalizeV3 : normalizeV2; diff --git a/lib/core-common/src/types.ts b/lib/core-common/src/types.ts index b53ce4ea8586..4e7286755bf9 100644 --- a/lib/core-common/src/types.ts +++ b/lib/core-common/src/types.ts @@ -155,7 +155,7 @@ export interface BuilderOptions { cache: FileSystemCache; configDir: string; docsMode: boolean; - previewCsfV3?: boolean; + features?: StorybookConfig['features']; versionCheck?: VersionCheck; releaseNotesData?: ReleaseNotesData; disableWebpackDefaults?: boolean; diff --git a/lib/core-server/src/build-dev.ts b/lib/core-server/src/build-dev.ts index e205e8ad2ea3..8db98860397a 100644 --- a/lib/core-server/src/build-dev.ts +++ b/lib/core-server/src/build-dev.ts @@ -78,7 +78,7 @@ export async function buildDevStandalone(options: CLIOptions & LoadOptions & Bui const fullOptions: Options = { ...options, presets, - previewCsfV3: features?.previewCsfV3, + features, }; const { address, networkAddress, managerResult, previewResult } = await storybookDevServer( diff --git a/lib/core-server/src/build-static.ts b/lib/core-server/src/build-static.ts index 4f38bdf0d577..38c0b68461de 100644 --- a/lib/core-server/src/build-static.ts +++ b/lib/core-server/src/build-static.ts @@ -79,7 +79,7 @@ export async function buildStaticStandalone(options: CLIOptions & LoadOptions & const fullOptions: Options = { ...options, presets, - previewCsfV3: features?.previewCsfV3, + features, }; const core = await presets.apply<{ builder?: string }>('core');