Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create channel url on client from window.location #22055

Merged
merged 1 commit into from
Apr 20, 2023
Merged

Create channel url on client from window.location #22055

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 0 additions & 1 deletion code/lib/builder-manager/src/utils/template.ts
View file
Open in desktop
Expand Up @@ -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') : '',
});
Expand Down
1 change: 0 additions & 1 deletion code/lib/builder-vite/input/iframe.html
View file
Open in desktop
Expand Up @@ -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)
Expand Down
9 changes: 3 additions & 6 deletions code/lib/builder-vite/src/codegen-set-addon-channel.ts
View file
Open in desktop
Expand Up @@ -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();
}
3 changes: 1 addition & 2 deletions code/lib/builder-vite/src/transform-iframe-html.ts
View file
Open in desktop
Expand Up @@ -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');
Expand All @@ -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 || '');
}
2 changes: 0 additions & 2 deletions code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
View file
Open in desktop
Expand Up @@ -63,7 +63,6 @@ export default async (
babelOptions,
typescriptOptions,
features,
serverChannelUrl,
} = options;

const isProd = configType === 'PRODUCTION';
Expand Down Expand Up @@ -260,7 +259,6 @@ export default async (
importPathMatcher: specifier.importPathMatcher.source,
})),
DOCS_OPTIONS: docsOptions,
SERVER_CHANNEL_URL: serverChannelUrl,
},
headHtmlSnippet,
bodyHtmlSnippet,
Expand Down
10 changes: 3 additions & 7 deletions code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars
View file
Open in desktop
Expand Up @@ -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) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At first I was worried that removing this if-statement might cause it to run more often, but it looks like it was always true already, because getServerChannelUrl always returns a non-empty string already.

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();

Expand Down
11 changes: 9 additions & 2 deletions code/lib/channel-websocket/src/index.ts
View file
Open in desktop
Expand Up @@ -14,7 +14,7 @@ interface WebsocketTransportArgs {
}

interface CreateChannelArgs {
url: string;
url?: string;
async?: boolean;
onError?: OnError;
}
Expand Down Expand Up @@ -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 });
}

Expand Down
6 changes: 3 additions & 3 deletions code/ui/manager/src/runtime.ts
View file
Open in desktop
Expand Up @@ -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;
Expand All @@ -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);
}
Expand Down
2 changes: 0 additions & 2 deletions code/ui/manager/src/settings/typings.d.ts
View file
Open in desktop
Expand Up @@ -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;
Expand Down