Consolidate loader, play and render context and add a self referencin…

…g context property

code/addons/links/package.json

@@ -67,7 +67,7 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "^0.1.8",
+    "@storybook/csf": "0.1.10--canary.d841bb4.0",
     "@storybook/global": "^5.0.0",
     "ts-dedent": "^2.0.0"
   },

code/lib/codemod/package.json

@@ -57,7 +57,7 @@
     "@babel/core": "^7.24.4",
     "@babel/preset-env": "^7.24.4",
     "@babel/types": "^7.24.0",
-    "@storybook/csf": "^0.1.8",
+    "@storybook/csf": "0.1.10--canary.d841bb4.0",
     "@storybook/csf-tools": "workspace:*",
     "@storybook/node-logger": "workspace:*",
     "@storybook/types": "workspace:*",

code/lib/core-events/package.json

@@ -78,7 +78,7 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "^0.1.8",
+    "@storybook/csf": "0.1.10--canary.d841bb4.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {

code/lib/core-server/package.json

@@ -63,7 +63,7 @@
     "@storybook/channels": "workspace:*",
     "@storybook/core-common": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/csf": "^0.1.8",
+    "@storybook/csf": "0.1.10--canary.d841bb4.0",
     "@storybook/csf-tools": "workspace:*",
     "@storybook/docs-mdx": "3.1.0-next.0",
     "@storybook/global": "^5.0.0",

code/lib/csf-tools/package.json

@@ -46,7 +46,7 @@
     "@babel/parser": "^7.24.4",
     "@babel/traverse": "^7.24.1",
     "@babel/types": "^7.24.0",
-    "@storybook/csf": "^0.1.8",
+    "@storybook/csf": "0.1.10--canary.d841bb4.0",
     "@storybook/types": "workspace:*",
     "fs-extra": "^11.1.0",
     "recast": "^0.23.5",

code/lib/instrumenter/src/instrumenter.ts

@@ -412,12 +412,14 @@ export class Instrumenter {
     const { callRefsByResult, renderPhase } = this.getState(call.storyId);
 
     // Map complex values to a JSON-serializable representation.
-    const serializeValues = (value: any): any => {
+    // We use a depth, to avoid infinite recursion of self referencing values.
+    const serializeValues = (value: any, depth = 0): any => {
       if (callRefsByResult.has(value)) {
         return callRefsByResult.get(value);
       }
       if (value instanceof Array) {
-        return value.map(serializeValues);
+        if (depth > 10) return [];
+        return value.map((it) => serializeValues(it, ++depth));
       }
       if (value instanceof Date) {
         return { __date__: { value: value.toISOString() } };
@@ -451,8 +453,9 @@ export class Instrumenter {
         return { __class__: { name: value.constructor.name } };
       }
       if (Object.prototype.toString.call(value) === '[object Object]') {
+        if (depth > 10) return {};
         return Object.fromEntries(
-          Object.entries(value).map(([key, val]) => [key, serializeValues(val)])
+          Object.entries(value).map(([key, val]) => [key, serializeValues(val, ++depth)])
         );
       }
       return value;

code/lib/manager-api/package.json

@@ -47,7 +47,7 @@
     "@storybook/channels": "workspace:*",
     "@storybook/client-logger": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/csf": "^0.1.8",
+    "@storybook/csf": "0.1.10--canary.d841bb4.0",
     "@storybook/global": "^5.0.0",
     "@storybook/icons": "^1.2.5",
     "@storybook/router": "workspace:*",

code/lib/preview-api/package.json

@@ -47,7 +47,7 @@
     "@storybook/channels": "workspace:*",
     "@storybook/client-logger": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/csf": "^0.1.8",
+    "@storybook/csf": "0.1.10--canary.d841bb4.0",
     "@storybook/global": "^5.0.0",
     "@storybook/types": "workspace:*",
     "@types/qs": "^6.9.5",

code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts

@@ -9,7 +9,6 @@ import type {
   StoryContextForLoaders,
   StoryId,
   StoryRenderOptions,
-  ViewMode,
 } from '@storybook/types';
 import type { Channel } from '@storybook/channels';
 import {
@@ -71,7 +70,7 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
     private renderToScreen: RenderToCanvas<TRenderer>,
     private callbacks: RenderContextCallbacks<TRenderer>,
     public id: StoryId,
-    public viewMode: ViewMode,
+    public viewMode: StoryContext['viewMode'],
     public renderOptions: StoryRenderOptions = { autoplay: true, forceInitialArgs: false },
     story?: PreparedStory<TRenderer>
   ) {
@@ -165,6 +164,7 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
       applyBeforeEach,
       unboundStoryFn,
       playFunction,
+      runStep,
     } = story;
 
     if (forceRemount && !initial) {
@@ -180,33 +180,16 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
     const abortSignal = (this.abortController as AbortController).signal;
 
     try {
-      let loadedContext: Awaited<ReturnType<typeof applyLoaders>>;
-      await this.runPhase(abortSignal, 'loading', async () => {
-        loadedContext = await applyLoaders({
-          ...this.storyContext(),
-          viewMode: this.viewMode,
-          // TODO add this to CSF
-          canvasElement,
-        } as unknown as StoryContextForLoaders<TRenderer>);
-      });
-      if (abortSignal.aborted) return;
-
-      const renderStoryContext: StoryContext<TRenderer> = {
-        ...loadedContext!,
-        // By this stage, it is possible that new args/globals have been received for this story
-        // and we need to ensure we render it with the new values
-        ...this.storyContext(),
+      const context: StoryContext<TRenderer> = {
+        ...(this.storyContext() as StoryContextForLoaders<TRenderer>),
+        viewMode: this.viewMode,
         abortSignal,
-        // We should consider parameterizing the story types with TRenderer['canvasElement'] in the future
-        canvasElement: canvasElement as any,
+        canvasElement,
+        loaded: {},
+        step: (label, play) => runStep(label, play, context),
       };
 
-      await this.runPhase(abortSignal, 'beforeEach', async () => {
-        const cleanupCallbacks = await applyBeforeEach(renderStoryContext);
-        this.store.addCleanupCallbacks(story, cleanupCallbacks);
-      });
-
-      if (abortSignal.aborted) return;
+      context.context = context;
 
       const renderContext: RenderContext<TRenderer> = {
         componentId,
@@ -226,10 +209,22 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
           return this.callbacks.showException(error);
         },
         forceRemount: forceRemount || this.notYetRendered,
-        storyContext: renderStoryContext,
-        storyFn: () => unboundStoryFn(renderStoryContext),
+        storyContext: context,
+        storyFn: () => unboundStoryFn(context),
         unboundStoryFn,
       };
+      await this.runPhase(abortSignal, 'loading', async () => {
+        context.loaded = await applyLoaders(context);
+      });
+
+      if (abortSignal.aborted) return;
+
+      await this.runPhase(abortSignal, 'beforeEach', async () => {
+        const cleanupCallbacks = await applyBeforeEach(context);
+        this.store.addCleanupCallbacks(story, cleanupCallbacks);
+      });
+
+      if (abortSignal.aborted) return;
 
       await this.runPhase(abortSignal, 'rendering', async () => {
         const teardown = await this.renderToScreen(renderContext, canvasElement);
@@ -253,7 +248,7 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
         this.disableKeyListeners = true;
         try {
           await this.runPhase(abortSignal, 'playing', async () => {
-            await playFunction(renderContext.storyContext);
+            await playFunction(context);
           });
           if (!ignoreUnhandledErrors && unhandledErrors.size > 0) {
             await this.runPhase(abortSignal, 'errored');

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

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-loop-func,no-underscore-dangle */
+/* eslint-disable no-underscore-dangle */
 import { global } from '@storybook/global';
 import type {
   Args,
@@ -8,12 +8,9 @@ import type {
   NormalizedProjectAnnotations,
   NormalizedStoryAnnotations,
   Parameters,
-  PlayFunction,
-  PlayFunctionContext,
   PreparedMeta,
   PreparedStory,
   Renderer,
-  StepLabel,
   StoryContext,
   StoryContextForEnhancers,
   StoryContextForLoaders,
@@ -50,9 +47,9 @@ export function prepareStory<TRenderer extends Renderer>(
   );
 
   const applyLoaders = async (
-    context: StoryContextForLoaders<TRenderer>
-  ): Promise<StoryContextForLoaders<TRenderer> & { loaded: StoryContext<TRenderer>['loaded'] }> => {
-    let updatedContext = { ...context, loaded: {} };
+    context: StoryContext<TRenderer>
+  ): Promise<StoryContext<TRenderer>['loaded']> => {
+    const loaded = {};
     for (const loaders of [
       ...('__STORYBOOK_TEST_LOADERS__' in global && Array.isArray(global.__STORYBOOK_TEST_LOADERS__)
         ? [global.__STORYBOOK_TEST_LOADERS__]
@@ -61,12 +58,11 @@ export function prepareStory<TRenderer extends Renderer>(
       normalizeArrays(componentAnnotations.loaders),
       normalizeArrays(storyAnnotations.loaders),
     ]) {
-      const loadResults = await Promise.all(loaders.map((loader) => loader(updatedContext)));
-      const loaded: Record<string, any> = Object.assign({}, ...loadResults);
-      updatedContext = { ...updatedContext, loaded: { ...updatedContext.loaded, ...loaded } };
+      if (context.abortSignal.aborted) return loaded;
+      const loadResults = await Promise.all(loaders.map((loader) => loader(context)));
+      Object.assign(loaded, ...loadResults);
     }
-
-    return updatedContext;
+    return loaded;
   };
 
   const applyBeforeEach = async (context: StoryContext<TRenderer>): Promise<CleanupCallback[]> => {
@@ -76,6 +72,7 @@ export function prepareStory<TRenderer extends Renderer>(
       ...normalizeArrays(componentAnnotations.beforeEach),
       ...normalizeArrays(storyAnnotations.beforeEach),
     ]) {
+      if (context.abortSignal.aborted) return cleanupCallbacks;
       const cleanup = await beforeEach(context);
       if (cleanup) cleanupCallbacks.push(cleanup);
     }
@@ -106,20 +103,7 @@ export function prepareStory<TRenderer extends Renderer>(
   const decoratedStoryFn = applyHooks<TRenderer>(applyDecorators)(undecoratedStoryFn, decorators);
   const unboundStoryFn = (context: StoryContext<TRenderer>) => decoratedStoryFn(context);
 
-  const play = storyAnnotations?.play || componentAnnotations.play;
-
-  const playFunction =
-    play &&
-    (async (storyContext: StoryContext<TRenderer>) => {
-      const playFunctionContext: PlayFunctionContext<TRenderer> = {
-        ...storyContext,
-        // eslint-disable-next-line @typescript-eslint/no-shadow
-        step: (label: StepLabel, play: PlayFunction<TRenderer>) =>
-          // TODO: We know runStep is defined, we need a proper normalized annotations type
-          runStep!(label, play, playFunctionContext),
-      };
-      return play(playFunctionContext);
-    });
+  const playFunction = storyAnnotations?.play ?? componentAnnotations?.play;
 
   return {
     ...partialAnnotations,
@@ -133,6 +117,7 @@ export function prepareStory<TRenderer extends Renderer>(
     applyLoaders,
     applyBeforeEach,
     playFunction,
+    runStep,
   };
 }
 export function prepareMeta<TRenderer extends Renderer>(

code/lib/source-loader/package.json

@@ -45,7 +45,7 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "^0.1.8",
+    "@storybook/csf": "0.1.10--canary.d841bb4.0",
     "@storybook/types": "workspace:*",
     "estraverse": "^5.2.0",
     "lodash": "^4.17.21",

code/lib/types/package.json

@@ -49,7 +49,7 @@
     "file-system-cache": "2.3.0"
   },
   "devDependencies": {
-    "@storybook/csf": "^0.1.8",
+    "@storybook/csf": "0.1.10--canary.d841bb4.0",
     "@types/fs-extra": "^11.0.1",
     "@types/node": "^18.0.0",
     "typescript": "^5.3.2"

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

@@ -4,6 +4,7 @@ import type {
   DecoratorFunction,
   LoaderFunction,
   CleanupCallback,
+  StepRunner,
 } from '@storybook/csf';
 
 import type {
@@ -16,7 +17,6 @@ import type {
   StoryAnnotations,
   StoryContext,
   StoryContextForEnhancers,
-  StoryContextForLoaders,
   StoryFn,
   StoryId,
   StoryIdentifier,
@@ -41,12 +41,12 @@ export type RenderToCanvas<TRenderer extends Renderer> = (
   element: TRenderer['canvasElement']
 ) => MaybePromise<void | TeardownRenderToCanvas>;
 
-export type ProjectAnnotations<TRenderer extends Renderer> = CsfProjectAnnotations<TRenderer> & {
+export interface ProjectAnnotations<TRenderer extends Renderer>
+  extends CsfProjectAnnotations<TRenderer> {
   renderToCanvas?: RenderToCanvas<TRenderer>;
-
   /* @deprecated use renderToCanvas */
   renderToDOM?: RenderToCanvas<TRenderer>;
-};
+}
 
 type NamedExportsOrDefault<TExport> = TExport | { default: TExport };
 
@@ -55,12 +55,13 @@ export type NamedOrDefaultProjectAnnotations<TRenderer extends Renderer = Render
 
 export type NormalizedProjectAnnotations<TRenderer extends Renderer = Renderer> = Omit<
   ProjectAnnotations<TRenderer>,
-  'decorators' | 'loaders'
+  'decorators' | 'loaders' | 'runStep'
 > & {
   argTypes?: StrictArgTypes;
   globalTypes?: StrictGlobalTypes;
   decorators?: DecoratorFunction<TRenderer>[];
   loaders?: LoaderFunction<TRenderer>[];
+  runStep: StepRunner<TRenderer>;
 };
 
 export type NormalizedComponentAnnotations<TRenderer extends Renderer = Renderer> = Omit<
@@ -101,11 +102,10 @@ export type PreparedStory<TRenderer extends Renderer = Renderer> =
     originalStoryFn: StoryFn<TRenderer>;
     undecoratedStoryFn: LegacyStoryFn<TRenderer>;
     unboundStoryFn: LegacyStoryFn<TRenderer>;
-    applyLoaders: (
-      context: StoryContextForLoaders<TRenderer>
-    ) => Promise<StoryContextForLoaders<TRenderer> & { loaded: StoryContext<TRenderer>['loaded'] }>;
+    applyLoaders: (context: StoryContext<TRenderer>) => Promise<StoryContext<TRenderer>['loaded']>;
     applyBeforeEach: (context: StoryContext<TRenderer>) => Promise<CleanupCallback[]>;
     playFunction?: (context: StoryContext<TRenderer>) => Promise<void> | void;
+    runStep: StepRunner<TRenderer>;
   };
 
 export type PreparedMeta<TRenderer extends Renderer = Renderer> = Omit<

code/package.json

@@ -126,7 +126,7 @@
     "@storybook/core-events": "workspace:*",
     "@storybook/core-server": "workspace:*",
     "@storybook/core-webpack": "workspace:*",
-    "@storybook/csf": "^0.1.8",
+    "@storybook/csf": "0.1.10--canary.d841bb4.0",
     "@storybook/csf-plugin": "workspace:*",
     "@storybook/csf-tools": "workspace:*",
     "@storybook/docs-tools": "workspace:*",
@@ -293,5 +293,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "packageManager": "yarn@4.3.1"
 }

code/renderers/server/package.json

@@ -46,7 +46,7 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/csf": "^0.1.8",
+    "@storybook/csf": "0.1.10--canary.d841bb4.0",
     "@storybook/csf-tools": "workspace:*",
     "@storybook/global": "^5.0.0",
     "@storybook/preview-api": "workspace:*",

code/ui/blocks/package.json

@@ -48,7 +48,7 @@
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
     "@storybook/core-events": "workspace:*",
-    "@storybook/csf": "^0.1.8",
+    "@storybook/csf": "0.1.10--canary.d841bb4.0",
     "@storybook/docs-tools": "workspace:*",
     "@storybook/global": "^5.0.0",
     "@storybook/icons": "^1.2.5",