diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 7dbb2c822706..f9308e6000ac 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -43,7 +43,6 @@ }, "dependencies": { "@storybook/channel-postmessage": "7.1.0-alpha.29", - "@storybook/channel-websocket": "7.1.0-alpha.29", "@storybook/client-logger": "7.1.0-alpha.29", "@storybook/core-common": "7.1.0-alpha.29", "@storybook/csf-plugin": "7.1.0-alpha.29", diff --git a/code/builders/builder-vite/src/codegen-set-addon-channel.ts b/code/builders/builder-vite/src/codegen-set-addon-channel.ts index aa866408415d..6548d64c67c1 100644 --- a/code/builders/builder-vite/src/codegen-set-addon-channel.ts +++ b/code/builders/builder-vite/src/codegen-set-addon-channel.ts @@ -1,7 +1,6 @@ export async function generateAddonSetupCode() { return ` 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' }); @@ -9,9 +8,7 @@ export async function generateAddonSetupCode() { window.__STORYBOOK_ADDONS_CHANNEL__ = channel; if (window.CONFIG_TYPE === 'DEVELOPMENT'){ - const serverChannel = createWebSocketChannel({}); - addons.setServerChannel(serverChannel); - window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel; + window.__STORYBOOK_SERVER_CHANNEL__ = channel; } `.trim(); } diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 120c825108ed..f9bb0f978bf0 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -59,7 +59,6 @@ "@storybook/addons": "7.1.0-alpha.29", "@storybook/api": "7.1.0-alpha.29", "@storybook/channel-postmessage": "7.1.0-alpha.29", - "@storybook/channel-websocket": "7.1.0-alpha.29", "@storybook/channels": "7.1.0-alpha.29", "@storybook/client-api": "7.1.0-alpha.29", "@storybook/client-logger": "7.1.0-alpha.29", diff --git a/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars b/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars index 154c413e9404..ec9848e1e121 100644 --- a/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars +++ b/code/builders/builder-webpack5/templates/virtualModuleModernEntry.js.handlebars @@ -2,7 +2,6 @@ import { global } from '@storybook/global'; import { ClientApi, PreviewWeb, addons, composeConfigs } from '@storybook/preview-api'; import { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage'; -import { createChannel as createWebSocketChannel } from '@storybook/channel-websocket'; import { importFn } from './{{storiesFilename}}'; @@ -13,9 +12,7 @@ const channel = createPostMessageChannel({ page: 'preview' }); addons.setChannel(channel); if (global.CONFIG_TYPE === 'DEVELOPMENT'){ - const serverChannel = createWebSocketChannel({}); - addons.setServerChannel(serverChannel); - window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel; + window.__STORYBOOK_SERVER_CHANNEL__ = channel; } const preview = new PreviewWeb(); diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index 551ef37c426f..34d02d96c682 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -50,7 +50,6 @@ "@storybook/addons": "7.1.0-alpha.29", "@storybook/builder-vite": "7.1.0-alpha.29", "@storybook/channel-postmessage": "7.1.0-alpha.29", - "@storybook/channel-websocket": "7.1.0-alpha.29", "@storybook/client-api": "7.1.0-alpha.29", "@storybook/core-server": "7.1.0-alpha.29", "@storybook/html": "7.1.0-alpha.29", diff --git a/code/lib/channel-postmessage/package.json b/code/lib/channel-postmessage/package.json index 6d86a27c9726..810aeb611be3 100644 --- a/code/lib/channel-postmessage/package.json +++ b/code/lib/channel-postmessage/package.json @@ -43,6 +43,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { + "@storybook/channel-websocket": "7.1.0-alpha.29", "@storybook/channels": "7.1.0-alpha.29", "@storybook/client-logger": "7.1.0-alpha.29", "@storybook/core-events": "7.1.0-alpha.29", diff --git a/code/lib/channel-postmessage/src/index.ts b/code/lib/channel-postmessage/src/index.ts index 164f26c305ba..7a6b428c2a1e 100644 --- a/code/lib/channel-postmessage/src/index.ts +++ b/code/lib/channel-postmessage/src/index.ts @@ -2,12 +2,13 @@ import { global } from '@storybook/global'; import * as EVENTS from '@storybook/core-events'; import { Channel } from '@storybook/channels'; import type { ChannelHandler, ChannelEvent, ChannelTransport } from '@storybook/channels'; +import { WebsocketTransport } from '@storybook/channel-websocket'; import { logger, pretty } from '@storybook/client-logger'; import { isJSON, parse, stringify } from 'telejson'; import qs from 'qs'; import invariant from 'tiny-invariant'; -const { document, location } = global; +const { document, location, CONFIG_TYPE } = global; interface Config { page: 'manager' | 'preview'; @@ -289,8 +290,17 @@ const getEventSourceUrl = (event: MessageEvent) => { * Creates a channel which communicates with an iframe or child window. */ export function createChannel({ page }: Config): Channel { - const transport = new PostmsgTransport({ page }); - return new Channel({ transport }); + const transports: ChannelTransport[] = [new PostmsgTransport({ page })]; + + if (CONFIG_TYPE === 'DEVELOPMENT') { + const protocol = window.location.protocol === 'http:' ? 'ws' : 'wss'; + const { hostname, port } = window.location; + const channelUrl = `${protocol}://${hostname}:${port}/storybook-server-channel`; + + transports.push(new WebsocketTransport({ url: channelUrl, onError: () => {} })); + } + + return new Channel({ transports }); } // backwards compat with builder-vite diff --git a/code/lib/channel-postmessage/src/typings.d.ts b/code/lib/channel-postmessage/src/typings.d.ts index 5c3e4f56f641..459ea6f109e6 100644 --- a/code/lib/channel-postmessage/src/typings.d.ts +++ b/code/lib/channel-postmessage/src/typings.d.ts @@ -1 +1,2 @@ declare var CHANNEL_OPTIONS: any; +declare var CONFIG_TYPE: 'DEVELOPMENT' | 'PRODUCTION'; diff --git a/code/lib/channels/src/index.test.ts b/code/lib/channels/src/index.test.ts index 886d2fa20800..8eb319f927fc 100644 --- a/code/lib/channels/src/index.test.ts +++ b/code/lib/channels/src/index.test.ts @@ -19,7 +19,7 @@ describe('Channel', () => { }); it('should not set transport if not passed as an argument', () => { - channel = new Channel(); + channel = new Channel({}); expect(channel.hasTransport).toBeFalsy(); }); @@ -29,7 +29,7 @@ describe('Channel', () => { }); it('should set isAsync to false as default value', () => { - channel = new Channel(); + channel = new Channel({}); expect(channel.isAsync).toBeFalsy(); }); @@ -104,8 +104,11 @@ describe('Channel', () => { listenerOutputData = data; }); const sendSpy = jest.fn(); - // @ts-expect-error (Converted from ts-ignore) - channel.transport.send = sendSpy; + // @ts-expect-error (access private property for testing purposes) + channel.transports.forEach((t) => { + // eslint-disable-next-line no-param-reassign + t.send = sendSpy; + }); channel.emit(eventName, ...listenerInputData); expect(listenerOutputData).toEqual(listenerInputData); expect(sendSpy.mock.calls[0][1]).toEqual({ depth: 1 }); diff --git a/code/lib/channels/src/index.ts b/code/lib/channels/src/index.ts index 9c7425690f05..d12cda556b73 100644 --- a/code/lib/channels/src/index.ts +++ b/code/lib/channels/src/index.ts @@ -21,10 +21,20 @@ interface EventsKeyValue { [key: string]: Listener[]; } -interface ChannelArgs { +type ChannelArgs = ChannelArgsSingle | ChannelArgsMulti; +interface ChannelArgsSingle { transport?: ChannelTransport; async?: boolean; } +interface ChannelArgsMulti { + transports: ChannelTransport[]; + async?: boolean; +} + +const isMulti = (args: ChannelArgs): args is ChannelArgsMulti => { + // @ts-expect-error (we guard against this right here) + return args.transports !== undefined; +}; const generateRandomId = () => { // generates a random 13 character string @@ -40,18 +50,30 @@ export class Channel { private data: Record = {}; - private readonly transport: ChannelTransport | undefined = undefined; + private readonly transports: ChannelTransport[] = []; + + constructor(input: ChannelArgsMulti); + constructor(input: ChannelArgsSingle); + constructor(input: ChannelArgs = {}) { + this.isAsync = input.async || false; - constructor({ transport, async = false }: ChannelArgs = {}) { - this.isAsync = async; - if (transport) { - this.transport = transport; - this.transport.setHandler((event) => this.handleEvent(event)); + if (isMulti(input)) { + this.transports = input.transports || []; + + this.transports.forEach((t) => { + t.setHandler((event) => this.handleEvent(event)); + }); + } else { + this.transports = input.transport ? [input.transport] : []; } + + this.transports.forEach((t) => { + t.setHandler((event) => this.handleEvent(event)); + }); } get hasTransport() { - return !!this.transport; + return this.transports.length > 0; } addListener(eventName: string, listener: Listener) { @@ -67,9 +89,9 @@ export class Channel { } const handler = () => { - if (this.transport) { - this.transport.send(event, options); - } + this.transports.forEach((t) => { + t.send(event, options); + }); this.handleEvent(event); }; diff --git a/code/lib/manager-api/src/modules/channel.ts b/code/lib/manager-api/src/modules/channel.ts index 64568498f77d..38d65a843366 100644 --- a/code/lib/manager-api/src/modules/channel.ts +++ b/code/lib/manager-api/src/modules/channel.ts @@ -8,10 +8,8 @@ import type { API, ModuleFn } from '../index'; export interface SubAPI { getChannel: () => API_Provider['channel']; on: (type: string, cb: Listener) => () => void; - experimental_onServer: (type: string, cb: Listener) => () => void; off: (type: string, cb: Listener) => void; emit: (type: string, ...args: any[]) => void; - experimental_emitServer: (type: string, ...args: any[]) => void; once: (type: string, cb: Listener) => void; collapseAll: () => void; expandAll: () => void; @@ -27,11 +25,6 @@ export const init: ModuleFn = ({ provider }) => { return () => provider.channel.removeListener(type, cb); }, - experimental_onServer: (type, cb) => { - provider.serverChannel.addListener(type, cb); - - return () => provider.serverChannel.removeListener(type, cb); - }, off: (type, cb) => provider.channel.removeListener(type, cb), once: (type, cb) => provider.channel.once(type, cb), emit: (type, data, ...args) => { @@ -47,10 +40,6 @@ export const init: ModuleFn = ({ provider }) => { } provider.channel.emit(type, data, ...args); }, - experimental_emitServer: (type, data, ...args) => { - provider.serverChannel.emit(type, data, ...args); - }, - collapseAll: () => { provider.channel.emit(STORIES_COLLAPSE_ALL, {}); }, diff --git a/code/lib/manager-api/src/modules/stories.ts b/code/lib/manager-api/src/modules/stories.ts index 9e3ac1f36464..ef356a1755ef 100644 --- a/code/lib/manager-api/src/modules/stories.ts +++ b/code/lib/manager-api/src/modules/stories.ts @@ -563,7 +563,7 @@ export const init: ModuleFn = ({ }); if (FEATURES?.storyStoreV7) { - fullAPI.experimental_onServer(STORY_INDEX_INVALIDATED, () => fullAPI.fetchIndex()); + fullAPI.on(STORY_INDEX_INVALIDATED, () => fullAPI.fetchIndex()); await fullAPI.fetchIndex(); } }; diff --git a/code/lib/manager-api/src/tests/stories.test.ts b/code/lib/manager-api/src/tests/stories.test.ts index ec9220a75888..d8db6b09332c 100644 --- a/code/lib/manager-api/src/tests/stories.test.ts +++ b/code/lib/manager-api/src/tests/stories.test.ts @@ -395,7 +395,7 @@ describe('stories API', () => { it('handles properly prepared stories', async () => { const navigate = jest.fn(); const store = createMockStore(); - const fullAPI = Object.assign(new EventEmitter(), { experimental_onServer: jest.fn() }); + const fullAPI = Object.assign(new EventEmitter(), {}); const { api } = initStoriesAndSetState({ store, navigate, provider, fullAPI } as any); Object.assign(fullAPI, api); @@ -434,7 +434,6 @@ describe('stories API', () => { const store = createMockStore(); const fullAPI = Object.assign(new EventEmitter(), { setOptions: jest.fn(), - experimental_onServer: jest.fn(), }); const { api, init } = initStoriesAndSetState({ store, navigate, provider, fullAPI } as any); @@ -564,7 +563,6 @@ describe('stories API', () => { Object.assign(fullAPI, api, { setIndex: jest.fn(), setOptions: jest.fn(), - experimental_onServer: jest.fn(), }); init(); @@ -583,7 +581,6 @@ describe('stories API', () => { setIndex: jest.fn(), setOptions: jest.fn(), getCurrentParameter: jest.fn().mockReturnValue('options'), - experimental_onServer: jest.fn(), }); init(); @@ -597,13 +594,7 @@ describe('stories API', () => { it('deals with 500 errors', async () => { const navigate = jest.fn(); const store = createMockStore({}); - const fullAPI = Object.assign( - new EventEmitter(), - { - experimental_onServer: jest.fn(), - }, - {} - ); + const fullAPI = Object.assign(new EventEmitter(), {}, {}); (global.fetch as jest.Mock>).mockReturnValue( Promise.resolve({ @@ -625,11 +616,6 @@ describe('stories API', () => { const store = createMockStore(); const fullAPI = Object.assign(new EventEmitter(), { setIndex: jest.fn(), - experimental_onServer: jest.fn((type, cb) => { - provider.serverChannel.addListener(type, cb); - - return () => provider.serverChannel.removeListener(type, cb); - }), }); const { api, init } = initStoriesAndSetState({ store, navigate, provider, fullAPI } as any); @@ -649,7 +635,7 @@ describe('stories API', () => { importPath: './path/to/component-a.ts', }, }); - provider.serverChannel.emit(STORY_INDEX_INVALIDATED); + fullAPI.emit(STORY_INDEX_INVALIDATED); expect(global.fetch).toHaveBeenCalledTimes(1); // Let the promise/await chain resolve @@ -664,11 +650,6 @@ describe('stories API', () => { const store = createMockStore(); const fullAPI = Object.assign(new EventEmitter(), { setIndex: jest.fn(), - experimental_onServer: jest.fn((type, cb) => { - provider.serverChannel.addListener(type, cb); - - return () => provider.serverChannel.removeListener(type, cb); - }), }); (global.fetch as jest.Mock>).mockReturnValueOnce( @@ -695,7 +676,7 @@ describe('stories API', () => { importPath: './path/to/component-a.ts', }, }); - provider.serverChannel.emit(STORY_INDEX_INVALIDATED); + fullAPI.emit(STORY_INDEX_INVALIDATED); expect(global.fetch).toHaveBeenCalledTimes(1); // Let the promise/await chain resolve @@ -714,7 +695,6 @@ describe('stories API', () => { isSettingsScreenActive() { return false; }, - experimental_onServer: jest.fn(), }); const store = createMockStore({}); const { init, api } = initStoriesAndSetState({ store, navigate, provider, fullAPI } as any); @@ -760,7 +740,7 @@ describe('stories API', () => { describe('CURRENT_STORY_WAS_SET event', () => { it('sets previewInitialized', async () => { const navigate = jest.fn(); - const fullAPI = Object.assign(new EventEmitter(), { experimental_onServer: jest.fn() }); + const fullAPI = Object.assign(new EventEmitter(), {}); const store = createMockStore({}); const { init, api } = initStoriesAndSetState({ store, navigate, provider, fullAPI } as any); @@ -775,7 +755,6 @@ describe('stories API', () => { const navigate = jest.fn(); const fullAPI = Object.assign(new EventEmitter(), { updateRef: jest.fn(), - experimental_onServer: jest.fn(), }); const store = createMockStore(); const { api, init } = initStoriesAndSetState({ store, navigate, provider, fullAPI } as any); @@ -824,7 +803,6 @@ describe('stories API', () => { const navigate = jest.fn(); const store = createMockStore(); const fullAPI = Object.assign(new EventEmitter(), { - experimental_onServer: jest.fn(), updateRef: jest.fn(), }); @@ -853,7 +831,6 @@ describe('stories API', () => { const { init, api } = initStoriesAndSetState({ store, navigate, provider, fullAPI } as any); Object.assign(fullAPI, api, { updateRef: jest.fn(), - experimental_onServer: jest.fn(), }); init(); @@ -871,7 +848,7 @@ describe('stories API', () => { const navigate = jest.fn(); const emit = jest.fn(); const on = jest.fn(); - const fullAPI = { emit, on, experimental_onServer: jest.fn() }; + const fullAPI = { emit, on }; const store = createMockStore(); const { api, init } = initStoriesAndSetState({ store, navigate, provider, fullAPI } as any); @@ -898,7 +875,7 @@ describe('stories API', () => { const navigate = jest.fn(); const emit = jest.fn(); const on = jest.fn(); - const fullAPI = { emit, on, experimental_onServer: jest.fn() }; + const fullAPI = { emit, on }; const store = createMockStore(); const { api, init } = initStoriesAndSetState({ store, navigate, provider, fullAPI } as any); @@ -922,7 +899,7 @@ describe('stories API', () => { const navigate = jest.fn(); const emit = jest.fn(); const on = jest.fn(); - const fullAPI = { emit, on, experimental_onServer: jest.fn() }; + const fullAPI = { emit, on }; const store = createMockStore(); const { api, init } = initStoriesAndSetState({ store, navigate, provider, fullAPI } as any); @@ -949,7 +926,7 @@ describe('stories API', () => { const navigate = jest.fn(); const emit = jest.fn(); const on = jest.fn(); - const fullAPI = { emit, on, experimental_onServer: jest.fn() }; + const fullAPI = { emit, on }; const store = createMockStore(); const { api, init } = initStoriesAndSetState({ store, navigate, provider, fullAPI } as any); @@ -1420,7 +1397,6 @@ describe('stories API', () => { const fullAPI = Object.assign(new EventEmitter(), { setStories: jest.fn(), setOptions: jest.fn(), - experimental_onServer: jest.fn(), }); const { api, init } = initStoriesAndSetState({ store, navigate, provider, fullAPI } as any); @@ -1452,7 +1428,6 @@ describe('stories API', () => { const fullAPI = Object.assign(new EventEmitter(), { setStories: jest.fn(), setOptions: jest.fn(), - experimental_onServer: jest.fn(), }); const { api, init } = initStoriesAndSetState({ store, navigate, provider, fullAPI } as any); @@ -1483,7 +1458,6 @@ describe('stories API', () => { const fullAPI = Object.assign(new EventEmitter(), { setStories: jest.fn(), setOptions: jest.fn(), - experimental_onServer: jest.fn(), }); const { api, init } = initStoriesAndSetState({ store, navigate, provider, fullAPI } as any); @@ -1512,9 +1486,7 @@ describe('stories API', () => { it('sets previewInitialized to true, local', async () => { const navigate = jest.fn(); const store = createMockStore(); - const fullAPI = Object.assign(new EventEmitter(), { - experimental_onServer: jest.fn(), - }); + const fullAPI = Object.assign(new EventEmitter(), {}); const { api, init } = initStoriesAndSetState({ store, navigate, provider, fullAPI } as any); Object.assign(fullAPI, api); @@ -1530,7 +1502,6 @@ describe('stories API', () => { it('sets previewInitialized to true, ref', async () => { const navigate = jest.fn(); const fullAPI = Object.assign(new EventEmitter(), { - experimental_onServer: jest.fn(), updateRef: jest.fn(), }); const store = createMockStore(); @@ -1556,7 +1527,7 @@ describe('stories API', () => { it('sets previewInitialized to true, local', async () => { const navigate = jest.fn(); const store = createMockStore(); - const fullAPI = Object.assign(new EventEmitter(), { experimental_onServer: jest.fn() }); + const fullAPI = Object.assign(new EventEmitter(), {}); const { api, init } = initStoriesAndSetState({ store, navigate, provider, fullAPI } as any); Object.assign(fullAPI, api); @@ -1573,7 +1544,6 @@ describe('stories API', () => { const navigate = jest.fn(); const fullAPI = Object.assign(new EventEmitter(), { updateRef: jest.fn(), - experimental_onServer: jest.fn(), }); const store = createMockStore(); const { api, init } = initStoriesAndSetState({ store, navigate, provider, fullAPI } as any); @@ -1596,7 +1566,7 @@ describe('stories API', () => { describe('v2 SET_STORIES event', () => { it('normalizes parameters and calls setRef for external stories', () => { - const fullAPI = Object.assign(new EventEmitter(), { experimental_onServer: jest.fn() }); + const fullAPI = Object.assign(new EventEmitter(), {}); const navigate = jest.fn(); const store = createMockStore(); @@ -1605,7 +1575,6 @@ describe('stories API', () => { setIndex: jest.fn(), findRef: jest.fn(), setRef: jest.fn(), - experimental_onServer: jest.fn(), }); init(); @@ -1645,7 +1614,6 @@ describe('stories API', () => { setIndex: jest.fn(), findRef: jest.fn(), setRef: jest.fn(), - experimental_onServer: jest.fn(), }); init(); diff --git a/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContext.test.ts b/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContext.test.ts index b36c08ede673..a45c15db2751 100644 --- a/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContext.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContext.test.ts @@ -5,7 +5,7 @@ import type { StoryStore } from '../../store'; import { DocsContext } from './DocsContext'; import { csfFileParts } from './test-utils'; -const channel = new Channel(); +const channel = new Channel({}); const renderStoryToElement = jest.fn(); describe('referenceCSFFile', () => { diff --git a/code/lib/preview-api/src/modules/preview-web/render/CsfDocsRender.test.ts b/code/lib/preview-api/src/modules/preview-web/render/CsfDocsRender.test.ts index 94f6b0920d70..b492a27e6506 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/CsfDocsRender.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/CsfDocsRender.test.ts @@ -34,7 +34,7 @@ it('throws PREPARE_ABORTED if torndown during prepare', async () => { }; const render = new CsfDocsRender( - new Channel(), + new Channel({}), mockStore as unknown as StoryStore, entry, {} as RenderContextCallbacks @@ -63,7 +63,7 @@ it('attached immediately', async () => { } as unknown as StoryStore; const render = new CsfDocsRender( - new Channel(), + new Channel({}), store, entry, {} as RenderContextCallbacks diff --git a/code/lib/preview-api/src/modules/preview-web/render/MdxDocsRender.test.ts b/code/lib/preview-api/src/modules/preview-web/render/MdxDocsRender.test.ts index dbdfad5c06e6..d6676ee26a98 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/MdxDocsRender.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/MdxDocsRender.test.ts @@ -33,7 +33,7 @@ it('throws PREPARE_ABORTED if torndown during prepare', async () => { }; const render = new MdxDocsRender( - new Channel(), + new Channel({}), mockStore as unknown as StoryStore, entry, {} as RenderContextCallbacks @@ -62,7 +62,7 @@ describe('attaching', () => { it('is not attached if you do not call setMeta', async () => { const render = new MdxDocsRender( - new Channel(), + new Channel({}), store, entry, {} as RenderContextCallbacks @@ -76,7 +76,7 @@ describe('attaching', () => { it('is attached if you call referenceMeta with attach=true', async () => { const render = new MdxDocsRender( - new Channel(), + new Channel({}), store, entry, {} as RenderContextCallbacks diff --git a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts index b95cbe5d3383..96b0032f2361 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/StoryRender.test.ts @@ -33,7 +33,7 @@ describe('StoryRender', () => { }; const render = new StoryRender( - new Channel(), + new Channel({}), mockStore as unknown as StoryStore, jest.fn(), {} as any, @@ -63,7 +63,7 @@ describe('StoryRender', () => { }; const render = new StoryRender( - new Channel(), + new Channel({}), { getStoryContext: () => ({}) } as any, jest.fn() as any, {} as any, @@ -90,7 +90,7 @@ describe('StoryRender', () => { }; const render = new StoryRender( - new Channel(), + new Channel({}), { getStoryContext: () => ({}) } as any, jest.fn() as any, {} as any, diff --git a/code/ui/blocks/src/blocks/external/ExternalPreview.ts b/code/ui/blocks/src/blocks/external/ExternalPreview.ts index 4f5b557518a5..52d8e90378d7 100644 --- a/code/ui/blocks/src/blocks/external/ExternalPreview.ts +++ b/code/ui/blocks/src/blocks/external/ExternalPreview.ts @@ -36,7 +36,7 @@ export class ExternalPreview extends Prev private moduleExportsByImportPath: Record = {}; constructor(public projectAnnotations: ProjectAnnotations) { - super(new Channel()); + super(new Channel({})); this.initialize({ getStoryIndex: () => this.storyIndex, diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json index fadedf186d76..8a6ee029d77e 100644 --- a/code/ui/manager/package.json +++ b/code/ui/manager/package.json @@ -54,7 +54,6 @@ "@storybook/addons": "7.1.0-alpha.29", "@storybook/api": "7.1.0-alpha.29", "@storybook/channel-postmessage": "7.1.0-alpha.29", - "@storybook/channel-websocket": "7.1.0-alpha.29", "@storybook/channels": "7.1.0-alpha.29", "@storybook/client-logger": "7.1.0-alpha.29", "@storybook/components": "7.1.0-alpha.29", diff --git a/code/ui/manager/src/runtime.ts b/code/ui/manager/src/runtime.ts index 0a1df3bb2756..fa67a9d9ce41 100644 --- a/code/ui/manager/src/runtime.ts +++ b/code/ui/manager/src/runtime.ts @@ -5,7 +5,6 @@ import type { AddonStore } from '@storybook/manager-api'; import { addons } from '@storybook/manager-api'; import type { Addon_Types, Addon_Config } from '@storybook/types'; import * as postMessage from '@storybook/channel-postmessage'; -import * as webSocket from '@storybook/channel-websocket'; import { CHANNEL_CREATED } from '@storybook/core-events'; import Provider from './provider'; import { renderStorybookUI } from './index'; @@ -18,7 +17,6 @@ const { FEATURES, CONFIG_TYPE } = global; class ReactProvider extends Provider { private addons: AddonStore; - // @ts-expect-error Unused, possibly remove, leaving, because it could be accessed even though it is private private channel: Channel; private serverChannel?: Channel; @@ -26,18 +24,17 @@ class ReactProvider extends Provider { constructor() { super(); - const postMessageChannel = postMessage.createChannel({ page: 'manager' }); + const channel = postMessage.createChannel({ page: 'manager' }); - addons.setChannel(postMessageChannel); + addons.setChannel(channel); - postMessageChannel.emit(CHANNEL_CREATED); + channel.emit(CHANNEL_CREATED); this.addons = addons; - this.channel = postMessageChannel; + this.channel = channel; if (FEATURES?.storyStoreV7 && CONFIG_TYPE === 'DEVELOPMENT') { - const serverChannel = webSocket.createChannel({}); - this.serverChannel = serverChannel; + this.serverChannel = this.channel; addons.setServerChannel(this.serverChannel); } } diff --git a/code/ui/manager/src/typings.d.ts b/code/ui/manager/src/typings.d.ts index 0a39bf209901..0be1e038d698 100644 --- a/code/ui/manager/src/typings.d.ts +++ b/code/ui/manager/src/typings.d.ts @@ -2,7 +2,7 @@ declare module 'chromatic/isChromatic'; declare var DOCS_OPTIONS: any; -declare var CONFIG_TYPE: any; +declare var CONFIG_TYPE: 'DEVELOPMENT' | 'PRODUCTION'; declare var PREVIEW_URL: any; declare var __STORYBOOK_ADDONS_MANAGER: any; diff --git a/code/yarn.lock b/code/yarn.lock index 1e25b6c71c87..48ebe05dc863 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5981,7 +5981,6 @@ __metadata: resolution: "@storybook/builder-vite@workspace:builders/builder-vite" dependencies: "@storybook/channel-postmessage": 7.1.0-alpha.29 - "@storybook/channel-websocket": 7.1.0-alpha.29 "@storybook/client-logger": 7.1.0-alpha.29 "@storybook/core-common": 7.1.0-alpha.29 "@storybook/csf-plugin": 7.1.0-alpha.29 @@ -6027,7 +6026,6 @@ __metadata: "@storybook/addons": 7.1.0-alpha.29 "@storybook/api": 7.1.0-alpha.29 "@storybook/channel-postmessage": 7.1.0-alpha.29 - "@storybook/channel-websocket": 7.1.0-alpha.29 "@storybook/channels": 7.1.0-alpha.29 "@storybook/client-api": 7.1.0-alpha.29 "@storybook/client-logger": 7.1.0-alpha.29 @@ -6089,6 +6087,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/channel-postmessage@workspace:lib/channel-postmessage" dependencies: + "@storybook/channel-websocket": 7.1.0-alpha.29 "@storybook/channels": 7.1.0-alpha.29 "@storybook/client-logger": 7.1.0-alpha.29 "@storybook/core-events": 7.1.0-alpha.29 @@ -6549,7 +6548,6 @@ __metadata: "@storybook/addons": 7.1.0-alpha.29 "@storybook/builder-vite": 7.1.0-alpha.29 "@storybook/channel-postmessage": 7.1.0-alpha.29 - "@storybook/channel-websocket": 7.1.0-alpha.29 "@storybook/client-api": 7.1.0-alpha.29 "@storybook/core-server": 7.1.0-alpha.29 "@storybook/html": 7.1.0-alpha.29 @@ -6699,7 +6697,6 @@ __metadata: "@storybook/addons": 7.1.0-alpha.29 "@storybook/api": 7.1.0-alpha.29 "@storybook/channel-postmessage": 7.1.0-alpha.29 - "@storybook/channel-websocket": 7.1.0-alpha.29 "@storybook/channels": 7.1.0-alpha.29 "@storybook/client-logger": 7.1.0-alpha.29 "@storybook/components": 7.1.0-alpha.29