storybook 9.1.0-alpha.9 → 9.1.0-beta.0

package/dist/preview-api/index.cjs

@@ -889,21 +889,21 @@ var On = I((re) => {
     if (typeof r != "string")
       return p;
     let y = r.length, h = "", x = -1, R = -1, m = -1, b = p, w, f = "", g = "", A = !1, S = !1, C = !1, M = !1, j = !1, G = !1, ve = !1, U = 0,
-    P = -1, W = -1, Ft = -1;
+    F = -1, W = -1, Ft = -1;
     for (let O = 0; O < y + 1; O++) {
       if (U = O !== y ? r.charCodeAt(O) : c, U === c) {
-        if (ve = R > x, ve || (R = O), m !== R - 1 && (g = Or(r, m + 1, P > -1 ? P : R, C, A), f = o(g), w !== void 0 && (b = (0, Ir.getDeepObject)(
+        if (ve = R > x, ve || (R = O), m !== R - 1 && (g = Or(r, m + 1, F > -1 ? F : R, C, A), f = o(g), w !== void 0 && (b = (0, Ir.getDeepObject)(
         b, w, f, u && j, u && G))), ve || f !== "") {
           ve && (h = r.slice(R + 1, O), M && (h = h.replace(Fn, " ")), S && (h = (0, Pn.default)(h) || h));
           let je = t(h, f);
           if (a) {
             let tr = b[f];
-            tr === void 0 ? P > -1 ? b[f] = [je] : b[f] = je : tr.pop ? tr.push(je) : b[f] = [tr, je];
+            tr === void 0 ? F > -1 ? b[f] = [je] : b[f] = je : tr.pop ? tr.push(je) : b[f] = [tr, je];
           } else
             b[f] = je;
         }
-        h = "", x = O, R = O, A = !1, S = !1, C = !1, M = !1, j = !1, G = !1, P = -1, m = O, b = p, w = void 0, f = "";
-      } else U === 93 ? (a && n === "bracket" && Ft === 91 && (P = W), i && (l === "index" || u) && R <= x && (m !== W && (g = Or(r, m + 1, O,
+        h = "", x = O, R = O, A = !1, S = !1, C = !1, M = !1, j = !1, G = !1, F = -1, m = O, b = p, w = void 0, f = "";
+      } else U === 93 ? (a && n === "bracket" && Ft === 91 && (F = W), i && (l === "index" || u) && R <= x && (m !== W && (g = Or(r, m + 1, O,
       C, A), f = o(g), w !== void 0 && (b = (0, Ir.getDeepObject)(b, w, f, void 0, u)), w = f, C = !1, A = !1), m = O, G = !0, j = !1)) : U ===
       46 ? i && (l === "dot" || u) && R <= x && (m !== W && (g = Or(r, m + 1, O, C, A), f = o(g), w !== void 0 && (b = (0, Ir.getDeepObject)(
       b, w, f, u)), w = f, C = !1, A = !1), j = !0, G = !1, m = O) : U === 91 ? i && (l === "index" || u) && R <= x && (m !== W && (g = Or(r,
@@ -3269,9 +3269,8 @@ var Ko = require("storybook/internal/csf"), Xo = require("storybook/internal/csf
 function Rr() {
   try {
     return (
-      // @ts-expect-error this property exists in certain environments
-      !!globalThis.__vitest_browser__ || // @ts-expect-error this property exists in certain environments
-      !!globalThis.__playwright__binding__
+      // @ts-expect-error This property exists in Vitest browser mode
+      !!globalThis.__vitest_browser__ || !!globalThis.window?.navigator?.userAgent?.match(/StorybookTestRunner/)
     );
   } catch {
     return !1;
@@ -3816,7 +3815,7 @@ var di = /* @__PURE__ */ s((r, e, t) => {
 }, "sortStoriesV7");
 
 // src/preview-api/modules/preview-web/Preview.tsx
-var $e = require("storybook/internal/client-logger"), F = require("storybook/internal/core-events"), D = require("storybook/internal/preview-errors"),
+var $e = require("storybook/internal/client-logger"), P = require("storybook/internal/core-events"), D = require("storybook/internal/preview-errors"),
 hn = require("@storybook/global");
 
 // src/preview-api/modules/preview-web/render/StoryRender.ts
@@ -3924,13 +3923,13 @@ var be = class {
         abortSignal: m,
         canvasElement: o,
         loaded: {},
-        step: /* @__PURE__ */ s((P, W) => R(P, W, f), "step"),
+        step: /* @__PURE__ */ s((F, W) => R(F, W, f), "step"),
         context: null,
         canvas: {},
         userEvent: {},
         renderToCanvas: /* @__PURE__ */ s(async () => {
-          let P = await this.renderToScreen(g, o);
-          this.teardownRender = P || (() => {
+          let F = await this.renderToScreen(g, o);
+          this.teardownRender = F || (() => {
           }), b = !0;
         }, "renderToCanvas"),
         // The story provides (set in a renderer) a mount function that is a higher order function
@@ -3938,11 +3937,11 @@ var be = class {
         //
         // Before assigning it to the context, we resolve the context dependency,
         // so that a user can just call it as await mount(...args) in their play function.
-        mount: /* @__PURE__ */ s(async (...P) => {
+        mount: /* @__PURE__ */ s(async (...F) => {
           this.callbacks.showStoryDuringRender?.();
           let W = null;
           return await this.runPhase(m, "rendering", async () => {
-            W = await n.mount(f)(...P);
+            W = await n.mount(f)(...F);
           }), w && await this.runPhase(m, "playing"), W;
         }, "mount")
       };
@@ -3956,8 +3955,8 @@ var be = class {
         story: d,
         tags: c,
         ...this.callbacks,
-        showError: /* @__PURE__ */ s((P) => (this.phase = "errored", this.callbacks.showError(P)), "showError"),
-        showException: /* @__PURE__ */ s((P) => (this.phase = "errored", this.callbacks.showException(P)), "showException"),
+        showError: /* @__PURE__ */ s((F) => (this.phase = "errored", this.callbacks.showError(F)), "showError"),
+        showException: /* @__PURE__ */ s((F) => (this.phase = "errored", this.callbacks.showException(F)), "showException"),
         forceRemount: t || this.notYetRendered,
         storyContext: f,
         storyFn: /* @__PURE__ */ s(() => h(f), "storyFn"),
@@ -3970,10 +3969,10 @@ var be = class {
       let A = await p(f);
       if (this.store.addCleanupCallbacks(n, ...A), this.checkIfAborted(m) || (!b && !w && await f.mount(), this.notYetRendered = !1, m.aborted))
         return;
-      let S = this.story.parameters?.test?.dangerouslyIgnoreUnhandledErrors === !0, C = /* @__PURE__ */ new Set(), M = /* @__PURE__ */ s((P) => {
-        P.error && C.add(P.error);
-      }, "onError"), j = /* @__PURE__ */ s((P) => {
-        P.reason && C.add(P.reason);
+      let S = this.story.parameters?.test?.dangerouslyIgnoreUnhandledErrors === !0, C = /* @__PURE__ */ new Set(), M = /* @__PURE__ */ s((F) => {
+        F.error && C.add(F.error);
+      }, "onError"), j = /* @__PURE__ */ s((F) => {
+        F.reason && C.add(F.reason);
       }, "onUnhandledRejection");
       if (this.renderOptions.autoplay && t && x && this.phase !== "errored") {
         window?.addEventListener?.("error", M), window?.addEventListener?.("unhandledrejection", j), this.disableKeyListeners = !0;
@@ -3983,12 +3982,12 @@ var be = class {
           }, await this.runPhase(m, "playing", async () => x(f))), !b)
             throw new Cr.NoStoryMountedError();
           this.checkIfAborted(m), !S && C.size > 0 ? await this.runPhase(m, "errored") : await this.runPhase(m, "played");
-        } catch (P) {
+        } catch (F) {
           if (this.callbacks.showStoryDuringRender?.(), await this.runPhase(m, "errored", async () => {
-            this.channel.emit(z.PLAY_FUNCTION_THREW_EXCEPTION, mn(P));
+            this.channel.emit(z.PLAY_FUNCTION_THREW_EXCEPTION, mn(F));
           }), this.story.parameters.throwPlayFunctionExceptions !== !1)
-            throw P;
-          console.error(P);
+            throw F;
+          console.error(F);
         }
         if (!S && C.size > 0 && this.channel.emit(
           z.UNHANDLED_ERRORS_WHILE_PLAYING,
@@ -4005,7 +4004,7 @@ var be = class {
         await y(f);
       });
       let G = !S && C.size > 0, ve = f.reporting.reports.some(
-        (P) => P.status === "failed"
+        (F) => F.status === "failed"
       ), U = G || ve;
       await this.runPhase(
         m,
@@ -4050,7 +4049,10 @@ var be = class {
   // as a method to abort them, ASAP, but this is not foolproof as we cannot control what
   // happens inside the user's code.
   cancelRender() {
-    this.abortController?.abort();
+    this.abortController.abort();
+  }
+  cancelPlayFunction() {
+    this.phase === "playing" && (this.abortController.abort(), this.runPhase(this.abortController.signal, "aborted"));
   }
   async teardown() {
     this.torndown = !0, this.cancelRender(), this.story && await this.store.cleanupStory(this.story);
@@ -4111,10 +4113,11 @@ var { fetch: pi } = hn.global, ui = "./index.json", Se = class {
     return this.storeInitializationPromise;
   }
   setupListeners() {
-    this.channel.on(F.STORY_INDEX_INVALIDATED, this.onStoryIndexChanged.bind(this)), this.channel.on(F.UPDATE_GLOBALS, this.onUpdateGlobals.
-    bind(this)), this.channel.on(F.UPDATE_STORY_ARGS, this.onUpdateArgs.bind(this)), this.channel.on(F.ARGTYPES_INFO_REQUEST, this.onRequestArgTypesInfo.
-    bind(this)), this.channel.on(F.RESET_STORY_ARGS, this.onResetArgs.bind(this)), this.channel.on(F.FORCE_RE_RENDER, this.onForceReRender.bind(
-    this)), this.channel.on(F.FORCE_REMOUNT, this.onForceRemount.bind(this));
+    this.channel.on(P.STORY_INDEX_INVALIDATED, this.onStoryIndexChanged.bind(this)), this.channel.on(P.UPDATE_GLOBALS, this.onUpdateGlobals.
+    bind(this)), this.channel.on(P.UPDATE_STORY_ARGS, this.onUpdateArgs.bind(this)), this.channel.on(P.ARGTYPES_INFO_REQUEST, this.onRequestArgTypesInfo.
+    bind(this)), this.channel.on(P.RESET_STORY_ARGS, this.onResetArgs.bind(this)), this.channel.on(P.FORCE_RE_RENDER, this.onForceReRender.bind(
+    this)), this.channel.on(P.FORCE_REMOUNT, this.onForceRemount.bind(this)), this.channel.on(P.STORY_HOT_UPDATED, this.onStoryHotUpdated.bind(
+    this));
   }
   async getProjectAnnotationsOrRenderError() {
     try {
@@ -4169,7 +4172,7 @@ var { fetch: pi } = hn.global, ui = "./index.json", Se = class {
       globals: this.storyStoreValue.userGlobals.get() || {},
       globalTypes: this.storyStoreValue.projectAnnotations.globalTypes || {}
     };
-    this.channel.emit(F.SET_GLOBALS, e);
+    this.channel.emit(P.SET_GLOBALS, e);
   }
   // EVENT HANDLERS
   // This happens when a config file gets reloaded
@@ -4214,7 +4217,7 @@ var { fetch: pi } = hn.global, ui = "./index.json", Se = class {
       throw new D.CalledPreviewMethodBeforeInitializationError({ methodName: "onUpdateGlobals" });
     if (this.storyStoreValue.userGlobals.update(e), t) {
       let { initialGlobals: o, storyGlobals: n, userGlobals: i, globals: a } = this.storyStoreValue.getStoryContext(t);
-      this.channel.emit(F.GLOBALS_UPDATED, {
+      this.channel.emit(P.GLOBALS_UPDATED, {
         initialGlobals: o,
         userGlobals: i,
         storyGlobals: n,
@@ -4222,7 +4225,7 @@ var { fetch: pi } = hn.global, ui = "./index.json", Se = class {
       });
     } else {
       let { initialGlobals: o, globals: n } = this.storyStoreValue.userGlobals;
-      this.channel.emit(F.GLOBALS_UPDATED, {
+      this.channel.emit(P.GLOBALS_UPDATED, {
         initialGlobals: o,
         userGlobals: n,
         storyGlobals: {},
@@ -4242,7 +4245,7 @@ var { fetch: pi } = hn.global, ui = "./index.json", Se = class {
           o.story && o.story.usesMount ? o.remount() : o.rerender()
         )
       )
-    ), this.channel.emit(F.STORY_ARGS_UPDATED, {
+    ), this.channel.emit(P.STORY_ARGS_UPDATED, {
       storyId: e,
       args: this.storyStoreValue.args.get(e)
     });
@@ -4251,14 +4254,14 @@ var { fetch: pi } = hn.global, ui = "./index.json", Se = class {
     try {
       await this.storeInitializationPromise;
       let o = await this.storyStoreValue?.loadStory(t);
-      this.channel.emit(F.ARGTYPES_INFO_RESPONSE, {
+      this.channel.emit(P.ARGTYPES_INFO_RESPONSE, {
         id: e,
         success: !0,
         payload: { argTypes: o?.argTypes || {} },
         error: null
       });
     } catch (o) {
-      this.channel.emit(F.ARGTYPES_INFO_RESPONSE, {
+      this.channel.emit(P.ARGTYPES_INFO_RESPONSE, {
         id: e,
         success: !1,
         error: o?.message
@@ -4284,6 +4287,9 @@ var { fetch: pi } = hn.global, ui = "./index.json", Se = class {
   async onForceRemount({ storyId: e }) {
     await Promise.all(this.storyRenders.filter((t) => t.id === e).map((t) => t.remount()));
   }
+  async onStoryHotUpdated() {
+    await Promise.all(this.storyRenders.map((e) => e.cancelPlayFunction()));
+  }
   // Used by docs to render a story to a given element
   // Note this short-circuits the `prepare()` phase of the StoryRender,
   // main to be consistent with the previous behaviour. In the future,
@@ -4331,7 +4337,7 @@ var { fetch: pi } = hn.global, ui = "./index.json", Se = class {
   }
   // UTILITIES
   renderPreviewEntryError(e, t) {
-    this.previewEntryError = t, $e.logger.error(e), $e.logger.error(t), this.channel.emit(F.CONFIG_ERROR, t);
+    this.previewEntryError = t, $e.logger.error(e), $e.logger.error(t), this.channel.emit(P.CONFIG_ERROR, t);
   }
 };
 

package/dist/preview-api/index.d.ts

@@ -739,7 +739,7 @@ declare class StoryRender<TRenderer extends Renderer> implements Render<TRendere
     type: RenderType;
     story?: PreparedStory<TRenderer>;
     phase?: RenderPhase;
-    private abortController?;
+    private abortController;
     private canvasElement?;
     private notYetRendered;
     private rerenderEnqueued;
@@ -770,6 +770,7 @@ declare class StoryRender<TRenderer extends Renderer> implements Render<TRendere
     rerender(): Promise<void>;
     remount(): Promise<void>;
     cancelRender(): void;
+    cancelPlayFunction(): void;
     teardown(): Promise<void>;
 }
 
@@ -824,6 +825,7 @@ declare class Preview<TRenderer extends Renderer> {
     onForceRemount({ storyId }: {
         storyId: StoryId;
     }): Promise<void>;
+    onStoryHotUpdated(): Promise<void>;
     renderStoryToElement(story: PreparedStory<TRenderer>, element: TRenderer['canvasElement'], callbacks: RenderContextCallbacks<TRenderer>, options: StoryRenderOptions): () => Promise<void>;
     teardownRender(render: StoryRender<TRenderer> | CsfDocsRender<TRenderer> | MdxDocsRender<TRenderer>, { viewModeChanged }?: {
         viewModeChanged?: boolean;