Merge pull request #28383 from storybookjs/kasper/mount

Test: Add mount property to the story context

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.10",
+    "@storybook/csf": "0.1.11",
     "@storybook/global": "^5.0.0",
     "ts-dedent": "^2.0.0"
   },

code/core/package.json

@@ -244,7 +244,7 @@
     "prep": "bun ./scripts/prep.ts"
   },
   "dependencies": {
-    "@storybook/csf": "0.1.10",
+    "@storybook/csf": "0.1.11",
     "@types/express": "^4.17.21",
     "@types/node": "^18.0.0",
     "browser-assert": "^1.2.1",

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

@@ -33,6 +33,7 @@ import { StoryStore } from '../../store';
 import { StoryRender } from './render/StoryRender';
 import type { CsfDocsRender } from './render/CsfDocsRender';
 import type { MdxDocsRender } from './render/MdxDocsRender';
+import { mountDestructured } from './render/mount-utils';
 import type { Args, Globals, Renderer, StoryId } from '@storybook/core/types';
 import type {
   ModuleImportFn,
@@ -291,7 +292,11 @@ export class Preview<TRenderer extends Renderer> {
     await Promise.all(
       this.storyRenders
         .filter((r) => r.id === storyId && !r.renderOptions.forceInitialArgs)
-        .map((r) => r.rerender())
+        .map((r) =>
+          // We only run the play function, with in a force remount.
+          // But when mount is destructured, the rendering happens inside of the play function.
+          r.story && mountDestructured(r.story.playFunction) ? r.remount() : r.rerender()
+        )
     );
 
     this.channel.emit(STORY_ARGS_UPDATED, {

code/core/src/preview-api/modules/preview-web/PreviewWeb.test.ts

@@ -908,6 +908,41 @@ describe('PreviewWeb', () => {
       expect(mockChannel.emit).toHaveBeenCalledWith(STORY_RENDERED, 'component-one--a');
     });
 
+    describe('if play function destructures mount', () => {
+      it('passes forceRemount to renderToCanvas', async () => {
+        document.location.search = '?id=component-one--a';
+        const newImportFn = vi.fn(async (path) => {
+          if (path === './src/ComponentOne.stories.js') {
+            return {
+              ...componentOneExports,
+              a: { ...componentOneExports.a, play: ({ mount }: any) => mount() },
+            };
+          }
+          return importFn(path);
+        });
+        await createAndRenderPreview({ importFn: newImportFn });
+
+        mockChannel.emit.mockClear();
+        projectAnnotations.renderToCanvas.mockClear();
+        emitter.emit(UPDATE_STORY_ARGS, {
+          storyId: 'component-one--a',
+          updatedArgs: { new: 'arg' },
+        });
+        await waitForRender();
+
+        expect(projectAnnotations.renderToCanvas).toHaveBeenCalledWith(
+          expect.objectContaining({
+            forceRemount: true,
+            storyContext: expect.objectContaining({
+              initialArgs: { foo: 'a', one: 1 },
+              args: { foo: 'a', new: 'arg', one: 'mapped-1' },
+            }),
+          }),
+          'story-element'
+        );
+      });
+    });
+
     describe('while story is still rendering', () => {
       it('runs loaders again after renderToCanvas is done', async () => {
         // Arrange - set up a gate to control when the loaders run
@@ -3626,6 +3661,7 @@ describe('PreviewWeb', () => {
               "dev",
               "test",
             ],
+            "testingLibraryRender": undefined,
             "title": "Component One",
           },
           "component-one--b": {
@@ -3674,6 +3710,7 @@ describe('PreviewWeb', () => {
               "dev",
               "test",
             ],
+            "testingLibraryRender": undefined,
             "title": "Component One",
           },
           "component-one--e": {
@@ -3700,6 +3737,7 @@ describe('PreviewWeb', () => {
               "dev",
               "test",
             ],
+            "testingLibraryRender": undefined,
             "title": "Component One",
           },
           "component-two--c": {
@@ -3736,6 +3774,7 @@ describe('PreviewWeb', () => {
               "dev",
               "test",
             ],
+            "testingLibraryRender": undefined,
             "title": "Component Two",
           },
         }

code/core/src/preview-api/modules/preview-web/PreviewWithSelection.tsx

@@ -463,17 +463,9 @@ export class PreviewWithSelection<TRenderer extends Renderer> extends Preview<TR
     this.channel.emit(STORY_THREW_EXCEPTION, { name, message, stack });
     this.channel.emit(STORY_RENDER_PHASE_CHANGED, { newPhase: 'errored', storyId });
 
-    // Ignored exceptions exist for control flow purposes, and are typically handled elsewhere.
-    //
-    // FIXME: Should be '=== IGNORED_EXCEPTION', but currently the object
-    // is coming from two different bundles (index.js vs index.mjs)
-    //
-    // https://github.com/storybookjs/storybook/issues/19321
-    if (!error.message?.startsWith('ignoredException')) {
-      this.view.showErrorDisplay(error);
-      logger.error(`Error rendering story '${storyId}':`);
-      logger.error(error);
-    }
+    this.view.showErrorDisplay(error);
+    logger.error(`Error rendering story '${storyId}':`);
+    logger.error(error);
   }
 
   // renderError is used by the various app layers to inform the user they have done something