Merge pull request #26304 from storybookjs/norbert/composition-loadin…

…g-state-fix Core: Fix composition of storybooks on same origin
storybookjs · Mar 5, 2024 · 20c596e · 20c596e
2 parents 6a0c827 + 8cbb06d
commit 20c596e
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 8 deletions.
diff --git a/code/lib/channels/src/postmessage/getEventSourceUrl.ts b/code/lib/channels/src/postmessage/getEventSourceUrl.ts
@@ -7,6 +7,14 @@ export const getEventSourceUrl = (event: MessageEvent) => {
   // try to find the originating iframe by matching it's contentWindow
   // This might not be cross-origin safe
   const [frame, ...remainder] = frames.filter((element) => {
+    try {
+      return (
+        element.contentWindow?.location.origin === (event.source as Window).location.origin &&
+        element.contentWindow?.location.pathname === (event.source as Window).location.pathname
+      );
+    } catch (err) {
+      // continue
+    }
     try {
       return element.contentWindow === event.source;
     } catch (err) {

diff --git a/code/lib/manager-api/src/lib/events.ts b/code/lib/manager-api/src/lib/events.ts
@@ -19,9 +19,13 @@ export const getEventMetadata = (context: Meta, fullAPI: API) => {
   const { source, refId, type } = context;
   const [sourceType, sourceLocation] = getSourceType(source!, refId);
 
-  const ref =
-    refId && fullAPI.getRefs()[refId] ? fullAPI.getRefs()[refId] : fullAPI.findRef(sourceLocation!);
-
+  let ref: API_ComposedRef | undefined;
+  if (refId || sourceType === 'external') {
+    ref =
+      refId && fullAPI.getRefs()[refId]
+        ? fullAPI.getRefs()[refId]
+        : fullAPI.findRef(sourceLocation!);
+  }
   const meta = {
     source,
     sourceType,

diff --git a/code/lib/manager-api/src/modules/refs.ts b/code/lib/manager-api/src/modules/refs.ts
@@ -20,8 +20,6 @@ import type { ModuleFn } from '../lib/types';
 
 const { location, fetch } = global;
 
-const findFilename = /(\/((?:[^\/]+?)\.[^\/]+?)|\/)$/;
-
 export interface SubState {
   refs: API_Refs;
 }
@@ -75,8 +73,10 @@ export const getSourceType = (source: string, refId?: string) => {
   const { origin: localOrigin, pathname: localPathname } = location;
   const { origin: sourceOrigin, pathname: sourcePathname } = new URL(source);
 
-  const localFull = `${localOrigin + localPathname}`.replace(findFilename, '');
-  const sourceFull = `${sourceOrigin + sourcePathname}`.replace(findFilename, '');
+  const localFull = `${localOrigin + localPathname}`.replace('/iframe.html', '').replace(/\/$/, '');
+  const sourceFull = `${sourceOrigin + sourcePathname}`
+    .replace('/iframe.html', '')
+    .replace(/\/$/, '');
 
   if (localFull === sourceFull) {
     return ['local', sourceFull];

diff --git a/code/lib/manager-api/src/tests/refs.test.ts b/code/lib/manager-api/src/tests/refs.test.ts
@@ -25,7 +25,7 @@ vi.mock('@storybook/global', () => {
   // Add additional variations of global.location mock return values in this array.
   // NOTE: The order must match the order that global.location is called in the unit tests.
   const edgecaseLocations = [
-    { origin: 'https://storybook.js.org', pathname: '/storybook/index.html' },
+    { origin: 'https://storybook.js.org', pathname: '/storybook/iframe.html' },
   ];
   // global.location value after all edgecaseLocations are returned
   const lastLocation = { origin: 'https://storybook.js.org', pathname: '/storybook/' };