Merge branch 'next' into valentin/fix-prod-mode

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