GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-09 00:19:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update manager to also use websocket

Browse Source
This commit is contained in:
Tom Coleman 2021-10-28 15:58:12 +11:00
parent b773401a64
commit 9c23655164
5 changed files with 34 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
lib/api/src/modules/provider.ts
View File

@ -23,6 +23,7 @@ type IframeRenderer = (
export interface Provider {
channel?: Channel;
serverChannel?: Channel;
renderPreview?: IframeRenderer;
handleAPI(api: API): void;
getConfig(): {

16
lib/api/src/modules/stories.ts
View File

@ -9,6 +9,7 @@ import {
SELECT_STORY,
SET_STORIES,
STORY_SPECIFIED,
STORY_INDEX_INVALIDATED,
} from '@storybook/core-events';
import deprecate from 'util-deprecate';
import { logger } from '@storybook/client-logger';
@ -34,10 +35,9 @@ import type {
import { Args, ModuleFn } from '../index';
import { ComposedRef } from './refs';
import { StoryIndexClient } from '../lib/StoryIndexClient';
const { DOCS_MODE, FEATURES } = global;
const INVALIDATE = 'INVALIDATE';
const { DOCS_MODE, FEATURES, fetch } = global;
const STORY_INDEX_PATH = './stories.json';
type Direction = -1 | 1;
type ParameterName = string;
@ -123,8 +123,6 @@ export const init: ModuleFn = ({
storyId: initialStoryId,
viewMode: initialViewMode,
}) => {
let indexClient: StoryIndexClient;
const api: SubAPI = {
storyId: toId,
getData: (storyId, refId) => {
@ -356,7 +354,10 @@ export const init: ModuleFn = ({
},
fetchStoryList: async () => {
try {
const storyIndex = await indexClient.fetch();
const result = await fetch(STORY_INDEX_PATH);
if (result.status !== 200) throw new Error(await result.text());
const storyIndex = (await result.json()) as StoryIndex;
// We can only do this if the stories.json is a proper storyIndex
if (storyIndex.v !== 3) {
@ -513,8 +514,7 @@ export const init: ModuleFn = ({
);
if (FEATURES?.storyStoreV7) {
indexClient = new StoryIndexClient();
indexClient.addEventListener(INVALIDATE, () => fullAPI.fetchStoryList());
provider.serverChannel.on(STORY_INDEX_INVALIDATED, () => fullAPI.fetchStoryList());
await fullAPI.fetchStoryList();
}
};

6
lib/builder-webpack4/src/preview/virtualModuleModernEntry.js.handlebars
View File

@ -19,7 +19,11 @@ const channel = createPostMessageChannel({ page: 'preview' });
addons.setChannel(channel);
// TODO--how to construct URL?
const serverChannel = createWebSocketChannel({ url: `ws://${document.location.hostname}:${document.location.port}/` });
const serverChannel = createWebSocketChannel({
url: `ws://${document.location.hostname}:${document.location.port}/`,
async: false,
onError: console.error.bind(console),
});
addons.setServerChannel(serverChannel);
const preview = new PreviewWeb();

1
lib/core-client/package.json
View File

@ -42,6 +42,7 @@
"dependencies": {
"@storybook/addons": "6.4.0-beta.21",
"@storybook/channel-postmessage": "6.4.0-beta.21",
"@storybook/channel-websocket": "6.4.0-beta.21",
"@storybook/client-api": "6.4.0-beta.21",
"@storybook/client-logger": "6.4.0-beta.21",
"@storybook/core-events": "6.4.0-beta.21",

21
lib/core-client/src/manager/provider.ts
View File

@ -1,23 +1,40 @@
import global from 'global';
import { Provider } from '@storybook/ui';
import { addons, AddonStore, Channel, Config, Types } from '@storybook/addons';
import createChannel from '@storybook/channel-postmessage';
import createPostMessageChannel from '@storybook/channel-postmessage';
import createWebSocketChannel from '@storybook/channel-websocket';
import Events from '@storybook/core-events';
const { FEATURES, document } = global;
export default class ReactProvider extends Provider {
private addons: AddonStore;
private channel: Channel;
private serverChannel?: Channel;
constructor() {
super();
const channel = createChannel({ page: 'manager' });
const channel = createPostMessageChannel({ page: 'manager' });
addons.setChannel(channel);
channel.emit(Events.CHANNEL_CREATED);
this.addons = addons;
this.channel = channel;
if (FEATURES?.storyStoreV7) {
// TODO--how to construct URL?
const serverChannel = createWebSocketChannel({
url: `ws://${document.location.hostname}:${document.location.port}/`,
async: false,
onError: console.error.bind(console),
});
this.serverChannel = serverChannel;
addons.setServerChannel(this.serverChannel);
}
}
getElements(type: Types) {