CSF: Make initialGlobals change only on the external API

code/lib/preview-api/src/modules/store/StoryStore.ts

@@ -77,10 +77,10 @@ export class StoryStore<TRenderer extends Renderer> {
     this.storyIndex = new StoryIndexStore(storyIndex);
 
     this.projectAnnotations = normalizeProjectAnnotations(projectAnnotations);
-    const { initialGlobals, globalTypes } = this.projectAnnotations;
+    const { globals, globalTypes } = this.projectAnnotations;
 
     this.args = new ArgsStore();
-    this.globals = new GlobalsStore({ globals: initialGlobals, globalTypes });
+    this.globals = new GlobalsStore({ globals, globalTypes });
     this.hooks = {};
     this.cleanupCallbacks = {};
 
@@ -95,8 +95,8 @@ export class StoryStore<TRenderer extends Renderer> {
   setProjectAnnotations(projectAnnotations: ProjectAnnotations<TRenderer>) {
     // By changing `this.projectAnnotations, we implicitly invalidate the `prepareStoryWithCache`
     this.projectAnnotations = normalizeProjectAnnotations(projectAnnotations);
-    const { initialGlobals, globalTypes } = projectAnnotations;
-    this.globals.set({ globals: initialGlobals, globalTypes });
+    const { globals, globalTypes } = projectAnnotations;
+    this.globals.set({ globals, globalTypes });
   }
 
   // This means that one of the CSF files has changed.

code/lib/preview-api/src/modules/store/csf/composeConfigs.test.ts

@@ -19,6 +19,7 @@ describe('composeConfigs', () => {
       argTypes: {},
       argTypesEnhancers: [],
       globals: {},
+      initialGlobals: {},
       globalTypes: {},
       loaders: [],
       beforeEach: [],
@@ -45,6 +46,7 @@ describe('composeConfigs', () => {
       argTypes: {},
       argTypesEnhancers: [],
       globals: {},
+      initialGlobals: {},
       globalTypes: {},
       loaders: [],
       beforeEach: [],
@@ -75,6 +77,7 @@ describe('composeConfigs', () => {
       argTypes: {},
       argTypesEnhancers: [],
       globals: {},
+      initialGlobals: {},
       globalTypes: {},
       loaders: [],
       beforeEach: [],
@@ -111,6 +114,7 @@ describe('composeConfigs', () => {
       argTypes: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
       argTypesEnhancers: [],
       globals: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
+      initialGlobals: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
       globalTypes: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
       loaders: [],
       beforeEach: [],
@@ -150,6 +154,7 @@ describe('composeConfigs', () => {
       argTypes: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
       argTypesEnhancers: [],
       globals: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
+      initialGlobals: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
       globalTypes: { x: '2', y: '1', z: '2', obj: { a: '2', c: '2' } },
       loaders: [],
       beforeEach: [],
@@ -180,6 +185,7 @@ describe('composeConfigs', () => {
       argTypes: {},
       argTypesEnhancers: ['1', '2', '3', '4'],
       globals: {},
+      initialGlobals: {},
       globalTypes: {},
       loaders: ['1', '2', '3', '4'],
       beforeEach: [],
@@ -210,6 +216,7 @@ describe('composeConfigs', () => {
       argTypes: {},
       argTypesEnhancers: ['1', '2', '3'],
       globals: {},
+      initialGlobals: {},
       globalTypes: {},
       loaders: ['1', '2', '3'],
       beforeEach: [],
@@ -236,6 +243,7 @@ describe('composeConfigs', () => {
       argTypes: {},
       argTypesEnhancers: [],
       globals: {},
+      initialGlobals: {},
       globalTypes: {},
       loaders: [],
       beforeEach: [],
@@ -263,6 +271,7 @@ describe('composeConfigs', () => {
         { a: '4', secondPass: true },
       ],
       globals: {},
+      initialGlobals: {},
       globalTypes: {},
       loaders: [],
       beforeEach: [],
@@ -293,6 +302,7 @@ describe('composeConfigs', () => {
       argTypes: {},
       argTypesEnhancers: [],
       globals: {},
+      initialGlobals: {},
       globalTypes: {},
       loaders: [],
       beforeEach: [],

code/lib/preview-api/src/modules/store/csf/composeConfigs.ts

@@ -42,6 +42,10 @@ export function composeConfigs<TRenderer extends Renderer>(
 ): ProjectAnnotations<TRenderer> {
   const allArgTypeEnhancers = getArrayField(moduleExportList, 'argTypesEnhancers');
   const stepRunners = getField(moduleExportList, 'runStep');
+  const initialGlobals = combineParameters(
+    getObjectField(moduleExportList, 'globals'),
+    getObjectField(moduleExportList, 'initialGlobals')
+  );
 
   return {
     parameters: combineParameters(...getField(moduleExportList, 'parameters')),
@@ -55,9 +59,8 @@ export function composeConfigs<TRenderer extends Renderer>(
       ...allArgTypeEnhancers.filter((e) => !e.secondPass),
       ...allArgTypeEnhancers.filter((e) => e.secondPass),
     ],
-    initialGlobals:
-      getObjectField(moduleExportList, 'initialGlobals') ??
-      getObjectField(moduleExportList, 'globals'),
+    initialGlobals,
+    globals: initialGlobals, // backwards compatibility
     globalTypes: getObjectField(moduleExportList, 'globalTypes'),
     loaders: getArrayField(moduleExportList, 'loaders'),
     beforeEach: getArrayField(moduleExportList, 'beforeEach'),

code/lib/preview-api/src/modules/store/csf/normalizeProjectAnnotations.test.ts

@@ -17,7 +17,7 @@ describe('normalizeProjectAnnotations', () => {
           globals: { a: 'b' },
         })
       ).toMatchObject({
-        initialGlobals: { a: 'b' },
+        globals: { a: 'b' },
       });
     });
   });
@@ -27,7 +27,7 @@ describe('normalizeProjectAnnotations', () => {
         initialGlobals: { a: 'b' },
       })
     ).toMatchObject({
-      initialGlobals: { a: 'b' },
+      globals: { a: 'b' },
     });
   });
 });

code/lib/preview-api/src/modules/store/csf/normalizeProjectAnnotations.ts

@@ -23,7 +23,7 @@ export function normalizeProjectAnnotations<TRenderer extends Renderer>({
   initialGlobals,
   ...annotations
 }: ProjectAnnotations<TRenderer>): NormalizedProjectAnnotations<TRenderer> {
-  if (globals) {
+  if (!initialGlobals && globals) {
     deprecate(dedent`
       The preview.js 'globals' field is deprecated and will be removed in Storybook 9.0.
       Please use 'initialGlobals' instead. Learn more:
@@ -46,7 +46,7 @@ export function normalizeProjectAnnotations<TRenderer extends Renderer>({
       // compatibility reasons, we will leave this in the store until 7.0
       inferControls,
     ],
-    initialGlobals: initialGlobals ?? globals,
+    globals: initialGlobals ?? globals,
     ...annotations,
   };
 }

code/renderers/react/src/__test__/portable-stories.test.tsx

@@ -81,7 +81,7 @@ describe('projectAnnotations', () => {
 
   it('renders with custom projectAnnotations via composeStory params', () => {
     const WithPortugueseText = composeStory(stories.CSF2StoryWithLocale, stories.default, {
-      globals: { locale: 'pt' },
+      initialGlobals: { locale: 'pt' },
     });
     const { getByText } = render(<WithPortugueseText />);
     const buttonElement = getByText('Olá!');

code/renderers/svelte/src/__test__/composeStories/portable-stories.test.ts

@@ -93,7 +93,7 @@ describe('projectAnnotations', () => {
 
   it('renders with custom projectAnnotations via composeStory params', () => {
     const WithPortugueseText = composeStory(stories.CSF2StoryWithLocale, stories.default, {
-      globals: { locale: 'pt' },
+      initialGlobals: { locale: 'pt' },
     });
     const { getByText } = render(WithPortugueseText.Component, WithPortugueseText.props);
     const buttonElement = getByText('Olá!');

code/renderers/vue3/src/__tests__/composeStories/portable-stories.test.ts

@@ -71,7 +71,7 @@ describe('projectAnnotations', () => {
 
   it('renders with custom projectAnnotations via composeStory params', () => {
     const WithPortugueseText = composeStory(stories.CSF2StoryWithLocale, stories.default, {
-      globals: { locale: 'pt' },
+      initialGlobals: { locale: 'pt' },
     });
     const { getByText } = render(WithPortugueseText);
     const buttonElement = getByText('Olá!');