diff --git a/lib/csf-tools/__testfixtures__/mdx/component-args.output.snapshot b/lib/csf-tools/__testfixtures__/mdx/component-args.output.snapshot
index 842ce69627c5..ca2bd2aa2a7f 100644
--- a/lib/csf-tools/__testfixtures__/mdx/component-args.output.snapshot
+++ b/lib/csf-tools/__testfixtures__/mdx/component-args.output.snapshot
@@ -75,79 +75,3 @@ componentMeta.parameters.docs = {
export default componentMeta;
"
`;
-
-exports[`docs-mdx-compiler-plugin fixtures component-args 1`] = `
-"/* @jsxRuntime classic */
-/* @jsx mdx */
-import { assertIsFn, AddContext } from '@storybook/addon-docs';
-
-import { Button } from '@storybook/react/demo';
-import { Story, Meta } from '@storybook/addon-docs';
-
-const layoutProps = {};
-const MDXLayout = 'wrapper';
-function MDXContent({ components, ...props }) {
- return (
-
-
- {\`Args\`}
-
-
-
-
- );
-}
-
-MDXContent.isMDXComponent = true;
-
-export const componentNotes = () => ;
-componentNotes.storyName = 'component notes';
-componentNotes.parameters = { storySource: { source: '' } };
-
-const componentMeta = {
- title: 'Button',
- args: {
- a: 1,
- b: 2,
- },
- argTypes: {
- a: {
- name: 'A',
- },
- b: {
- name: 'B',
- },
- },
- includeStories: ['componentNotes'],
-};
-
-const mdxStoryNameToKey = { 'component notes': 'componentNotes' };
-
-componentMeta.parameters = componentMeta.parameters || {};
-componentMeta.parameters.docs = {
- ...(componentMeta.parameters.docs || {}),
- page: () => (
-
-
-
- ),
-};
-
-export default componentMeta;
-"
-`;
diff --git a/lib/csf-tools/__testfixtures__/mdx/component-id.output.snapshot b/lib/csf-tools/__testfixtures__/mdx/component-id.output.snapshot
index b7de20b4c0de..71c57f7711a9 100644
--- a/lib/csf-tools/__testfixtures__/mdx/component-id.output.snapshot
+++ b/lib/csf-tools/__testfixtures__/mdx/component-id.output.snapshot
@@ -1,55 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`docs-mdx-compiler-plugin component-id 1`] = `
-"/* @jsxRuntime classic */
-/* @jsx mdx */
-import { assertIsFn, AddContext } from '@storybook/addon-docs';
-
-import { Button } from '@storybook/react/demo';
-import { Story, Meta } from '@storybook/addon-docs';
-
-const layoutProps = {};
-const MDXLayout = 'wrapper';
-function MDXContent({ components, ...props }) {
- return (
-
-
-
-
-
-
- );
-}
-
-MDXContent.isMDXComponent = true;
-
-export const componentNotes = () => ;
-componentNotes.storyName = 'component notes';
-componentNotes.parameters = { storySource: { source: '' } };
-
-const componentMeta = {
- title: 'Button',
- id: 'button-id',
- component: Button,
- includeStories: ['componentNotes'],
-};
-
-const mdxStoryNameToKey = { 'component notes': 'componentNotes' };
-
-componentMeta.parameters = componentMeta.parameters || {};
-componentMeta.parameters.docs = {
- ...(componentMeta.parameters.docs || {}),
- page: () => (
-
-
-
- ),
-};
-
-export default componentMeta;
-"
-`;
-
exports[`docs-mdx-compiler-plugin component-id.mdx 1`] = `
"/* @jsxRuntime classic */
/* @jsx mdx */
diff --git a/lib/ui/src/components/preview/preview.tsx b/lib/ui/src/components/preview/preview.tsx
index c506ae65a14a..b5096c1f3369 100644
--- a/lib/ui/src/components/preview/preview.tsx
+++ b/lib/ui/src/components/preview/preview.tsx
@@ -136,6 +136,7 @@ const Preview = React.memo((props) => {
id: previewId,
options,
viewMode,
+ storyId,
story = undefined,
description,
baseUrl,
@@ -148,25 +149,27 @@ const Preview = React.memo((props) => {
const shouldScale = viewMode === 'story';
const { isToolshown } = options;
- const initialRender = useRef(true);
+ const previousStoryId = useRef(storyId);
+ const previousViewMode = useRef(viewMode);
+
useEffect(() => {
- // Don't emit the event on first ("real") render, only when story or mode changes
- if (initialRender.current) {
- // We initially render without a story set, which isn't all that interesting, let's ignore
- if (story) {
- initialRender.current = false;
+ if (story && viewMode) {
+ // Don't emit the event on first ("real") render, only when story or mode changes
+ if (storyId !== previousStoryId.current || viewMode !== previousViewMode.current) {
+ previousStoryId.current = storyId;
+ previousViewMode.current = viewMode;
+
+ if (viewMode.match(/docs|story/)) {
+ const { refId, id } = story;
+ api.emit(SET_CURRENT_STORY, {
+ storyId: id,
+ viewMode,
+ options: {
+ target: refId ? `storybook-ref-${refId}` : 'storybook-preview-iframe',
+ },
+ });
+ }
}
- return;
- }
- if (story && viewMode && viewMode.match(/docs|story/)) {
- const { refId, id } = story;
- api.emit(SET_CURRENT_STORY, {
- storyId: id,
- viewMode,
- options: {
- target: refId ? `storybook-ref-${refId}` : 'storybook-preview-iframe',
- },
- });
}
}, [story, viewMode]);
diff --git a/lib/ui/src/components/preview/utils/types.tsx b/lib/ui/src/components/preview/utils/types.tsx
index 5148c54211f5..edc557a4d36c 100644
--- a/lib/ui/src/components/preview/utils/types.tsx
+++ b/lib/ui/src/components/preview/utils/types.tsx
@@ -7,6 +7,7 @@ export interface PreviewProps {
api: API;
viewMode: ViewMode;
refs: State['refs'];
+ storyId: Story['id'];
story: Group | Story;
docsOnly: boolean;
options: {
diff --git a/lib/ui/src/containers/preview.tsx b/lib/ui/src/containers/preview.tsx
index 4de756d22b65..16e19e49950e 100644
--- a/lib/ui/src/containers/preview.tsx
+++ b/lib/ui/src/containers/preview.tsx
@@ -41,6 +41,7 @@ const mapper = ({ api, state }: Combo) => {
viewMode,
path,
refs,
+ storyId,
baseUrl: PREVIEW_URL || 'iframe.html',
queryParams: customQueryParams,
docsOnly,