From d15602da0bed178fd5791540d5be4ba55e2d5679 Mon Sep 17 00:00:00 2001 From: Kai Schlamp Date: Wed, 12 Apr 2023 12:54:42 +0000 Subject: [PATCH] Create channels url from window location on client --- code/lib/builder-manager/src/utils/template.ts | 1 - code/lib/builder-vite/input/iframe.html | 1 - .../lib/builder-vite/src/codegen-set-addon-channel.ts | 9 +++------ code/lib/builder-vite/src/transform-iframe-html.ts | 3 +-- .../src/preview/iframe-webpack.config.ts | 2 -- .../templates/virtualModuleModernEntry.js.handlebars | 10 +++------- code/lib/channel-websocket/src/index.ts | 11 +++++++++-- code/ui/manager/src/runtime.ts | 6 +++--- code/ui/manager/src/settings/typings.d.ts | 2 -- 9 files changed, 19 insertions(+), 26 deletions(-) diff --git a/code/lib/builder-manager/src/utils/template.ts b/code/lib/builder-manager/src/utils/template.ts index a561f6de85da..856a977e9ca5 100644 --- 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 index 1c24f67f98a8..1bca427428b5 100644 --- 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 index 6cb475c8893b..233590f43083 100644 --- 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 index e70d0a114a5d..c0bc245e30cc 100644 --- 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 | null>('frameworkOptions'); const headHtmlSnippet = await presets.apply('previewHead'); const bodyHtmlSnippet = await presets.apply('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('', headHtmlSnippet || '') .replace('', 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 index 39047a1da463..01471e0add72 100644 --- 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 index 3f77a83eeca0..2773f636f98f 100644 --- 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 index c92f857c0cb1..7866d50a9d65 100644 --- 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 index 7524649c7749..ef3a91340cd1 100644 --- 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 index 9d54529463c2..fc0733790e6b 100644 --- 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;