CSF3: Fix webpack5 feature flagging & genericize flagging

lib/builder-webpack4/src/preview/iframe-webpack.config.ts

@@ -64,7 +64,7 @@ export default async ({
   presets,
   typescriptOptions,
   modern,
-  previewCsfV3,
+  features,
 }: Options & Record<string, any>): Promise<Configuration> => {
   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,

lib/builder-webpack5/src/preview/iframe-webpack.config.ts

@@ -60,6 +60,7 @@ export default async ({
   presets,
   typescriptOptions,
   modern,
+  features,
 }: Options & Record<string, any>): Promise<Configuration> => {
   const envs = await presets.apply<Record<string, string>>('env');
   const logLevel = await presets.apply('logLevel', undefined);
@@ -154,6 +155,7 @@ export default async ({
           globals: {
             LOGLEVEL: logLevel,
             FRAMEWORK_OPTIONS: frameworkOptions,
+            FEATURES: features,
           },
           headHtmlSnippet,
           bodyHtmlSnippet,

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() {

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);

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;

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;

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(

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');