diff --git a/CHANGELOG.md b/CHANGELOG.md index ac02440d39a2..6a81e4f71265 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,14 @@ +## 7.0.14 (May 23, 2023) + +#### Bug Fixes + +- Core: Only connect to serverChannel in development mode [#22575](https://github.com/storybooks/storybook/pull/22575) +- CLI: Fix error parsing on NPM proxy [#22690](https://github.com/storybooks/storybook/pull/22690) + +#### Maintenance + +- Core: Create server channel from window.location [#22055](https://github.com/storybooks/storybook/pull/22055) + ## 7.0.13 (May 22, 2023) #### Bug Fixes diff --git a/code/lib/builder-manager/src/utils/template.ts b/code/lib/builder-manager/src/utils/template.ts index a561f6de85da..b959817cfa04 100644 --- a/code/lib/builder-manager/src/utils/template.ts +++ b/code/lib/builder-manager/src/utils/template.ts @@ -58,7 +58,7 @@ export const renderHTML = async ( refs: Promise>, logLevel: Promise, docsOptions: Promise, - { versionCheck, releaseNotesData, previewUrl, serverChannelUrl, configType }: Options + { versionCheck, releaseNotesData, previewUrl, configType }: Options ) => { const customHeadRef = await customHead; const titleRef = await title; @@ -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 ee6c9d165832..436864580ab6 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..8e706cb6ae2e 100644 --- a/code/lib/builder-vite/src/codegen-set-addon-channel.ts +++ b/code/lib/builder-vite/src/codegen-set-addon-channel.ts @@ -1,5 +1,6 @@ export async function generateAddonSetupCode() { return ` + import { global } from '@storybook/global'; import { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage'; import { createChannel as createWebSocketChannel } from '@storybook/channel-websocket'; import { addons } from '@storybook/preview-api'; @@ -7,10 +8,9 @@ export async function generateAddonSetupCode() { const channel = createPostMessageChannel({ page: 'preview' }); addons.setChannel(channel); window.__STORYBOOK_ADDONS_CHANNEL__ = channel; - - const { SERVER_CHANNEL_URL } = globalThis; - if (SERVER_CHANNEL_URL) { - const serverChannel = createWebSocketChannel({ url: SERVER_CHANNEL_URL }); + + if (global.CONFIG_TYPE === 'DEVELOPMENT'){ + const serverChannel = createWebSocketChannel({}); addons.setServerChannel(serverChannel); window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel; } 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 be2fb73d6291..cac889428e74 100644 --- a/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts +++ b/code/lib/builder-webpack5/src/preview/iframe-webpack.config.ts @@ -62,7 +62,6 @@ export default async ( babelOptions, typescriptOptions, features, - serverChannelUrl, } = options; const isProd = configType === 'PRODUCTION'; @@ -259,7 +258,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..154c413e9404 100644 --- a/code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars +++ b/code/lib/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars @@ -6,16 +6,14 @@ 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, }); +if (global.CONFIG_TYPE === 'DEVELOPMENT'){ + const serverChannel = createWebSocketChannel({}); addons.setServerChannel(serverChannel); window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel; } 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/lib/cli/src/js-package-manager/NPMProxy.test.ts b/code/lib/cli/src/js-package-manager/NPMProxy.test.ts index 9de82b3114ba..667f173f99e8 100644 --- a/code/lib/cli/src/js-package-manager/NPMProxy.test.ts +++ b/code/lib/cli/src/js-package-manager/NPMProxy.test.ts @@ -439,7 +439,8 @@ describe('NPM Proxy', () => { describe('parseErrors', () => { it('should parse npm errors', () => { - const NPM_ERROR_SAMPLE = ` + const NPM_RESOLVE_ERROR_SAMPLE = ` + npm ERR! npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! @@ -447,27 +448,26 @@ describe('NPM Proxy', () => { npm ERR! Found: react@undefined npm ERR! node_modules/react npm ERR! react@"30" from the root project - npm ERR! - npm ERR! Could not resolve dependency: - npm ERR! peer react@"^16.8.0 || ^17.0.0 || ^18.0.0" from @storybook/react@7.1.0-alpha.17 - npm ERR! node_modules/@storybook/react - npm ERR! dev @storybook/react@"^7.1.0-alpha.17" from the root project - npm ERR! - npm ERR! Fix the upstream dependency conflict, or retry - npm ERR! this command with --force or --legacy-peer-deps - npm ERR! to accept an incorrect (and potentially broken) dependency resolution. - npm ERR! - npm ERR! - npm ERR! For a full report see: - npm ERR! /Users/yannbraga/.npm/_logs/2023-05-12T08_38_18_464Z-eresolve-report.txt - - npm ERR! A complete log of this run can be found in: - npm ERR! /Users/yannbraga/.npm/_logs/2023-05-12T08_38_18_464Z-debug-0.log `; - expect(npmProxy.parseErrorFromLogs(NPM_ERROR_SAMPLE)).toEqual( + const NPM_TIMEOUT_ERROR_SAMPLE = ` + npm notice + npm notice New major version of npm available! 8.5.0 -> 9.6.7 + npm notice Changelog: + npm notice Run \`npm install -g npm@9.6.7\` to update! + npm notice + npm ERR! code ERR_SOCKET_TIMEOUT + npm ERR! errno ERR_SOCKET_TIMEOUT + npm ERR! network Invalid response body while trying to fetch https://registry.npmjs.org/@storybook%2ftypes: Socket timeout + npm ERR! network This is a problem related to network connectivity. + `; + + expect(npmProxy.parseErrorFromLogs(NPM_RESOLVE_ERROR_SAMPLE)).toEqual( 'NPM error ERESOLVE - Dependency resolution error.' ); + expect(npmProxy.parseErrorFromLogs(NPM_TIMEOUT_ERROR_SAMPLE)).toEqual( + 'NPM error ERR_SOCKET_TIMEOUT - Socket timed out.' + ); }); it('should show unknown npm error', () => { diff --git a/code/lib/cli/src/js-package-manager/NPMProxy.ts b/code/lib/cli/src/js-package-manager/NPMProxy.ts index e0aa5460da12..47827adfd153 100644 --- a/code/lib/cli/src/js-package-manager/NPMProxy.ts +++ b/code/lib/cli/src/js-package-manager/NPMProxy.ts @@ -21,7 +21,7 @@ export type NpmListOutput = { dependencies: NpmDependencies; }; -const NPM_ERROR_REGEX = /\bERR! code\s+([A-Z]+)\b/; +const NPM_ERROR_REGEX = /npm ERR! code (\w+)/; const NPM_ERROR_CODES = { E401: 'Authentication failed or is required.', E403: 'Access to the resource is forbidden.', @@ -248,7 +248,6 @@ export class NPMProxy extends JsPackageManager { public parseErrorFromLogs(logs: string): string { let finalMessage = 'NPM error'; - console.log({ logs }); const match = logs.match(NPM_ERROR_REGEX); if (match) { diff --git a/code/ui/manager/src/runtime.ts b/code/ui/manager/src/runtime.ts index 7524649c7749..0a1df3bb2756 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, CONFIG_TYPE } = 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 && CONFIG_TYPE === 'DEVELOPMENT') { + 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;