Merge pull request #21713 from storybookjs/norbert/fix-composition-re…

…fresh-issue

Bug: ensure src of iframe for a ref stays the same, unless the version changes

code/ui/manager/src/components/preview/FramesRenderer.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import React, { Fragment, useMemo, useEffect, useState } from 'react';
+import React, { useRef, Fragment } from 'react';
 import type { Combo } from '@storybook/manager-api';
 import { Consumer } from '@storybook/manager-api';
 import { Button, getStoryHref } from '@storybook/components';
@@ -40,9 +40,17 @@ const whenSidebarIsVisible = ({ state }: Combo) => ({
   selectedStoryId: state.storyId,
 });
 
+const styles: CSSObject = {
+  '#root [data-is-storybook="false"]': {
+    display: 'none',
+  },
+  '#root [data-is-storybook="true"]': {
+    display: 'block',
+  },
+};
+
 export const FramesRenderer: FC<FramesRendererProps> = ({
   refs,
-  entry,
   scale,
   viewMode = 'story',
   refId,
@@ -56,51 +64,28 @@ export const FramesRenderer: FC<FramesRendererProps> = ({
     ...(version && { version }),
   });
   const active = getActive(refId, refs);
+  const { current: frames } = useRef<Record<string, string>>({});
 
-  const styles = useMemo<CSSObject>(() => {
-    // add #root to make the selector high enough in specificity
-    return {
-      '#root [data-is-storybook="false"]': {
-        display: 'none',
-      },
-      '#root [data-is-storybook="true"]': {
-        display: 'block',
-      },
-    };
-  }, []);
+  const refsToLoad = Object.values(refs).filter((ref) => {
+    return ref.type === 'auto-inject' || ref.id === refId;
+  }, {});
 
-  const [frames, setFrames] = useState<Record<string, string>>({
-    'storybook-preview-iframe': getStoryHref(baseUrl, storyId, {
+  if (!frames['storybook-preview-iframe']) {
+    frames['storybook-preview-iframe'] = getStoryHref(baseUrl, storyId, {
       ...queryParams,
       ...(version && { version }),
       viewMode,
-    }),
-  });
-
-  useEffect(() => {
-    const newFrames = Object.values(refs)
-      .filter((r) => {
-        if (r.indexError) {
-          return false;
-        }
-        if (r.type === 'auto-inject') {
-          return true;
-        }
-        if (entry && r.id === entry.refId) {
-          return true;
-        }
-
-        return false;
-      })
-      .reduce((acc, r) => {
-        return {
-          ...acc,
-          [`storybook-ref-${r.id}`]: `${r.url}/iframe.html?id=${storyId}&viewMode=${viewMode}&refId=${r.id}${stringifiedQueryParams}`,
-        };
-      }, frames);
+    });
+  }
 
-    setFrames(newFrames);
-  }, [storyId, entry, refs]);
+  refsToLoad.forEach((ref) => {
+    const id = `storybook-ref-${ref.id}`;
+    const existingUrl = frames[id]?.split('/iframe.html')[0];
+    if (!existingUrl || ref.url !== existingUrl) {
+      const newUrl = `${ref.url}/iframe.html?id=${storyId}&viewMode=${viewMode}&refId=${ref.id}${stringifiedQueryParams}`;
+      frames[id] = newUrl;
+    }
+  });
 
   return (
     <Fragment>
@@ -117,19 +102,21 @@ export const FramesRenderer: FC<FramesRendererProps> = ({
           return null;
         }}
       </Consumer>
-      {Object.entries(frames).map(([id, src]) => (
-        <Fragment key={id}>
-          <IFrame
-            active={id === active}
-            key={refs[id] ? refs[id].url : id}
-            id={id}
-            title={id}
-            src={src}
-            allowFullScreen
-            scale={scale}
-          />
-        </Fragment>
-      ))}
+      {Object.entries(frames).map(([id, src]) => {
+        return (
+          <Fragment key={id}>
+            <IFrame
+              active={id === active}
+              key={id}
+              id={id}
+              title={id}
+              src={src}
+              allowFullScreen
+              scale={scale}
+            />
+          </Fragment>
+        );
+      })}
     </Fragment>
   );
 };