7.0.14 patch release

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

code/lib/builder-manager/src/utils/template.ts

@@ -58,7 +58,7 @@ export const renderHTML = async (
   refs: Promise<Record<string, Ref>>,
   logLevel: Promise<string>,
   docsOptions: Promise<DocsOptions>,
-  { 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') : '',
   });

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)

code/lib/builder-vite/src/codegen-set-addon-channel.ts

@@ -1,16 +1,16 @@
 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';
 
     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;
     }

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 || '');
 }

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,

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;
 }

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

code/lib/cli/src/js-package-manager/NPMProxy.test.ts

@@ -439,35 +439,35 @@ 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! 
         npm ERR! While resolving: before-storybook@1.0.0
         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: <https://github.com/npm/cli/releases/tag/v9.6.7>
+          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', () => {

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) {

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

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;