Add support for beforeAll hook to projectAnnotations

code/lib/preview-api/src/modules/preview-web/Preview.tsx

@@ -72,6 +72,8 @@ export class Preview<TRenderer extends Renderer> {
   // project annotations. Once the index loads, it is stored on the store and this will get unset.
   private projectAnnotationsBeforeInitialization?: ProjectAnnotations<TRenderer>;
 
+  private beforeAllCleanup?: (() => MaybePromise<void>) | void;
+
   protected storeInitializationPromise: Promise<void>;
 
   protected resolveStoreInitializationPromise!: () => void;
@@ -160,9 +162,23 @@ export class Preview<TRenderer extends Renderer> {
   }
 
   // If initialization gets as far as project annotations, this function runs.
-  async initializeWithProjectAnnotations(projectAnnotations: ProjectAnnotations<TRenderer>) {
-    this.projectAnnotationsBeforeInitialization = projectAnnotations;
+  async initializeWithProjectAnnotations(
+    projectAnnotations: ProjectAnnotations<TRenderer>,
+    storyStore?: StoryStore<TRenderer>
+  ) {
     try {
+      await this.beforeAllCleanup?.();
+      this.beforeAllCleanup = await projectAnnotations.beforeAll?.();
+    } catch (err) {
+      this.renderPreviewEntryError('Error in beforeAll hook:', err as Error);
+      throw err;
+    }
+
+    // Don't reinitialize story store if it's already been set.
+    if (storyStore) return;
+
+    try {
+      this.projectAnnotationsBeforeInitialization = projectAnnotations;
       const storyIndex = await this.getStoryIndexFromServer();
       return this.initializeWithStoryIndex(storyIndex);
     } catch (err) {
@@ -226,13 +242,12 @@ export class Preview<TRenderer extends Renderer> {
     this.getProjectAnnotations = getProjectAnnotations;
 
     const projectAnnotations = await this.getProjectAnnotationsOrRenderError();
-    if (!this.storyStoreValue) {
-      await this.initializeWithProjectAnnotations(projectAnnotations);
-      return;
-    }
+    await this.initializeWithProjectAnnotations(projectAnnotations, this.storyStoreValue);
 
-    this.storyStoreValue.setProjectAnnotations(projectAnnotations);
-    this.emitGlobals();
+    if (this.storyStoreValue) {
+      this.storyStoreValue.setProjectAnnotations(projectAnnotations);
+      this.emitGlobals();
+    }
   }
 
   async onStoryIndexChanged() {

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

@@ -59,6 +59,7 @@ export function composeConfigs<TRenderer extends Renderer>(
     initialGlobals: getObjectField(moduleExportList, 'initialGlobals'),
     globalTypes: getObjectField(moduleExportList, 'globalTypes'),
     loaders: getArrayField(moduleExportList, 'loaders'),
+    beforeAll: getSingletonField(moduleExportList, 'beforeAll'),
     beforeEach: getArrayField(moduleExportList, 'beforeEach'),
     render: getSingletonField(moduleExportList, 'render'),
     renderToCanvas: getSingletonField(moduleExportList, 'renderToCanvas'),

code/lib/types/src/modules/story.ts

@@ -46,6 +46,8 @@ export type ProjectAnnotations<TRenderer extends Renderer> = CsfProjectAnnotatio
 
   /* @deprecated use renderToCanvas */
   renderToDOM?: RenderToCanvas<TRenderer>;
+
+  beforeAll?: () => MaybePromise<void | (() => MaybePromise<void>)>;
 };
 
 type NamedExportsOrDefault<TExport> = TExport | { default: TExport };