Merge pull request #22055 from medihack/fix_client_channel_url

Create channel url on client from window.location
storybookjs · Apr 20, 2023 · d760a5a · d760a5a
2 parents 6d9757f + d15602d
commit d760a5a
Show file tree

Hide file tree

Showing 9 changed files with 19 additions and 26 deletions.
diff --git a/code/lib/builder-manager/src/utils/template.ts b/code/lib/builder-manager/src/utils/template.ts
@@ -78,7 +78,6 @@ export const renderHTML = async (
       VERSIONCHECK: JSON.stringify(JSON.stringify(versionCheck), null, 2),
       RELEASE_NOTES_DATA: JSON.stringify(JSON.stringify(releaseNotesData), null, 2),
       PREVIEW_URL: JSON.stringify(previewUrl, null, 2), // global preview URL
-      SERVER_CHANNEL_URL: JSON.stringify(serverChannelUrl, null, 2),
     },
     head: customHeadRef ? await fs.readFile(customHeadRef, 'utf8') : '',
   });

diff --git a/code/lib/builder-vite/input/iframe.html b/code/lib/builder-vite/input/iframe.html
@@ -21,7 +21,6 @@
     window.FEATURES = '[FEATURES HERE]';
     window.STORIES = '[STORIES HERE]';
     window.DOCS_OPTIONS = '[DOCS_OPTIONS HERE]';
-    window.SERVER_CHANNEL_URL = '[SERVER_CHANNEL_URL HERE]';
 
     // We do this so that "module && module.hot" etc. in Storybook source code
     // doesn't fail (it will simply be disabled)

diff --git a/code/lib/builder-vite/src/codegen-set-addon-channel.ts b/code/lib/builder-vite/src/codegen-set-addon-channel.ts
@@ -8,11 +8,8 @@ export async function generateAddonSetupCode() {
     addons.setChannel(channel);
     window.__STORYBOOK_ADDONS_CHANNEL__ = channel;
 
-    const { SERVER_CHANNEL_URL } = globalThis;
-    if (SERVER_CHANNEL_URL) {
-      const serverChannel = createWebSocketChannel({ url: SERVER_CHANNEL_URL });
-      addons.setServerChannel(serverChannel);
-      window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel;
-    }
+    const serverChannel = createWebSocketChannel({});
+    addons.setServerChannel(serverChannel);
+    window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel;
   `.trim();
 }
diff --git a/code/lib/builder-vite/src/transform-iframe-html.ts b/code/lib/builder-vite/src/transform-iframe-html.ts
@@ -4,7 +4,7 @@ import type { CoreConfig, DocsOptions, Options } from '@storybook/types';
 export type PreviewHtml = string | undefined;
 
 export async function transformIframeHtml(html: string, options: Options) {
-  const { configType, features, presets, serverChannelUrl } = options;
+  const { configType, features, presets } = options;
   const frameworkOptions = await presets.apply<Record<string, any> | null>('frameworkOptions');
   const headHtmlSnippet = await presets.apply<PreviewHtml>('previewHead');
   const bodyHtmlSnippet = await presets.apply<PreviewHtml>('previewBody');
@@ -31,7 +31,6 @@ export async function transformIframeHtml(html: string, options: Options) {
     .replace(`'[FEATURES HERE]'`, JSON.stringify(features || {}))
     .replace(`'[STORIES HERE]'`, JSON.stringify(stories || {}))
     .replace(`'[DOCS_OPTIONS HERE]'`, JSON.stringify(docsOptions || {}))
-    .replace(`'[SERVER_CHANNEL_URL HERE]'`, JSON.stringify(serverChannelUrl))
     .replace('<!-- [HEAD HTML SNIPPET HERE] -->', headHtmlSnippet || '')
     .replace('<!-- [BODY HTML SNIPPET HERE] -->', bodyHtmlSnippet || '');
 }
diff --git a/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -63,7 +63,6 @@ export default async (
     babelOptions,
     typescriptOptions,
     features,
-    serverChannelUrl,
   } = options;
 
   const isProd = configType === 'PRODUCTION';
@@ -260,7 +259,6 @@ export default async (
               importPathMatcher: specifier.importPathMatcher.source,
             })),
             DOCS_OPTIONS: docsOptions,
-            SERVER_CHANNEL_URL: serverChannelUrl,
           },
           headHtmlSnippet,
           bodyHtmlSnippet,

diff --git a/code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars b/code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars
@@ -6,19 +6,15 @@ import { createChannel as createWebSocketChannel } from '@storybook/channel-webs
 
 import { importFn } from './{{storiesFilename}}';
 
-const { SERVER_CHANNEL_URL } = global;
-
 const getProjectAnnotations = () =>
   composeConfigs([{{#each previewAnnotations}}require('{{this}}'),{{/each}}]);
 
 const channel = createPostMessageChannel({ page: 'preview' });
 addons.setChannel(channel);
 
-if (SERVER_CHANNEL_URL) {
-  const serverChannel = createWebSocketChannel({ url: SERVER_CHANNEL_URL, });
-  addons.setServerChannel(serverChannel);
-  window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel;
-}
+const serverChannel = createWebSocketChannel({});
+addons.setServerChannel(serverChannel);
+window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel;
 
 const preview = new PreviewWeb();
 

diff --git a/code/lib/channel-websocket/src/index.ts b/code/lib/channel-websocket/src/index.ts
@@ -14,7 +14,7 @@ interface WebsocketTransportArgs {
 }
 
 interface CreateChannelArgs {
-  url: string;
+  url?: string;
   async?: boolean;
   onError?: OnError;
 }
@@ -82,7 +82,14 @@ export function createChannel({
   async = false,
   onError = (err) => logger.warn(err),
 }: CreateChannelArgs) {
-  const transport = new WebsocketTransport({ url, onError });
+  let channelUrl = url;
+  if (!channelUrl) {
+    const protocol = window.location.protocol === 'http:' ? 'ws' : 'wss';
+    const { hostname, port } = window.location;
+    channelUrl = `${protocol}://${hostname}:${port}/storybook-server-channel`;
+  }
+
+  const transport = new WebsocketTransport({ url: channelUrl, onError });
   return new Channel({ transport, async });
 }
 

diff --git a/code/ui/manager/src/runtime.ts b/code/ui/manager/src/runtime.ts
@@ -13,7 +13,7 @@ import { renderStorybookUI } from './index';
 import { values } from './globals/runtime';
 import { Keys } from './globals/types';
 
-const { FEATURES, SERVER_CHANNEL_URL } = global;
+const { FEATURES } = global;
 
 class ReactProvider extends Provider {
   private addons: AddonStore;
@@ -35,8 +35,8 @@ class ReactProvider extends Provider {
     this.addons = addons;
     this.channel = postMessageChannel;
 
-    if (FEATURES?.storyStoreV7 && SERVER_CHANNEL_URL) {
-      const serverChannel = webSocket.createChannel({ url: SERVER_CHANNEL_URL });
+    if (FEATURES?.storyStoreV7) {
+      const serverChannel = webSocket.createChannel({});
       this.serverChannel = serverChannel;
       addons.setServerChannel(this.serverChannel);
     }

diff --git a/code/ui/manager/src/settings/typings.d.ts b/code/ui/manager/src/settings/typings.d.ts
@@ -9,8 +9,6 @@ declare var FEATURES:
     }
   | undefined;
 
-declare var SERVER_CHANNEL_URL: any;
-
 declare var __REACT__: any;
 declare var __REACTDOM__: any;
 declare var __STORYBOOKCOMPONENTS__: any;