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

More updates in preview-web

Browse Source
This commit is contained in:
Tom Coleman 2022-05-31 15:23:45 +10:00
parent d42b8b76c4
commit fae35d32e6
4 changed files with 74 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
lib/preview-web/src/Preview.tsx
View File

@ -1,7 +1,18 @@
import dedent from 'ts-dedent';
import global from 'global';
import { SynchronousPromise } from 'synchronous-promise';
import Events from '@storybook/core-events';
import {
CONFIG_ERROR,
FORCE_REMOUNT,
FORCE_RE_RENDER,
GLOBALS_UPDATED,
RESET_STORY_ARGS,
SET_GLOBALS,
STORY_ARGS_UPDATED,
STORY_INDEX_INVALIDATED,
UPDATE_GLOBALS,
UPDATE_STORY_ARGS,
} from '@storybook/core-events';
import { logger } from '@storybook/client-logger';
import { addons, Channel } from '@storybook/addons';
import { AnyFramework, StoryId, ProjectAnnotations, Args, Globals } from '@storybook/csf';
@ -80,13 +91,13 @@ export class Preview<TFramework extends AnyFramework> {
}
setupListeners() {
this.serverChannel?.on(Events.STORY_INDEX_INVALIDATED, this.onStoryIndexChanged.bind(this));
this.serverChannel?.on(STORY_INDEX_INVALIDATED, this.onStoryIndexChanged.bind(this));
this.channel.on(Events.UPDATE_GLOBALS, this.onUpdateGlobals.bind(this));
this.channel.on(Events.UPDATE_STORY_ARGS, this.onUpdateArgs.bind(this));
this.channel.on(Events.RESET_STORY_ARGS, this.onResetArgs.bind(this));
this.channel.on(Events.FORCE_RE_RENDER, this.onForceReRender.bind(this));
this.channel.on(Events.FORCE_REMOUNT, this.onForceRemount.bind(this));
this.channel.on(UPDATE_GLOBALS, this.onUpdateGlobals.bind(this));
this.channel.on(UPDATE_STORY_ARGS, this.onUpdateArgs.bind(this));
this.channel.on(RESET_STORY_ARGS, this.onResetArgs.bind(this));
this.channel.on(FORCE_RE_RENDER, this.onForceReRender.bind(this));
this.channel.on(FORCE_REMOUNT, this.onForceRemount.bind(this));
}
getProjectAnnotationsOrRenderError(
@ -144,7 +155,7 @@ export class Preview<TFramework extends AnyFramework> {
}
emitGlobals() {
this.channel.emit(Events.SET_GLOBALS, {
this.channel.emit(SET_GLOBALS, {
globals: this.storyStore.globals.get() || {},
globalTypes: this.storyStore.projectAnnotations.globalTypes || {},
});
@ -227,7 +238,7 @@ export class Preview<TFramework extends AnyFramework> {
await Promise.all(this.storyRenders.map((r) => r.rerender()));
this.channel.emit(Events.GLOBALS_UPDATED, {
this.channel.emit(GLOBALS_UPDATED, {
globals: this.storyStore.globals.get(),
initialGlobals: this.storyStore.globals.initialGlobals,
});
@ -238,7 +249,7 @@ export class Preview<TFramework extends AnyFramework> {
await Promise.all(this.storyRenders.filter((r) => r.id === storyId).map((r) => r.rerender()));
this.channel.emit(Events.STORY_ARGS_UPDATED, {
this.channel.emit(STORY_ARGS_UPDATED, {
storyId,
args: this.storyStore.args.get(storyId),
});
@ -344,6 +355,6 @@ export class Preview<TFramework extends AnyFramework> {
this.previewEntryError = err;
logger.error(reason);
logger.error(err);
this.channel.emit(Events.CONFIG_ERROR, err);
this.channel.emit(CONFIG_ERROR, err);
}
}

21
lib/preview-web/src/PreviewWeb.mockdata.ts
View File

@ -1,5 +1,12 @@
import { EventEmitter } from 'events';
import Events from '@storybook/core-events';
import {
DOCS_RENDERED,
STORY_ERRORED,
STORY_MISSING,
STORY_RENDERED,
STORY_RENDER_PHASE_CHANGED,
STORY_THREW_EXCEPTION,
} from '@storybook/core-events';
import { StoryIndex } from '@storybook/store';
import { RenderPhase } from './PreviewWeb';
@ -99,15 +106,15 @@ export const waitForEvents = (
// the async parts, so we need to listen for the "done" events
export const waitForRender = () =>
waitForEvents([
Events.STORY_RENDERED,
Events.DOCS_RENDERED,
Events.STORY_THREW_EXCEPTION,
Events.STORY_ERRORED,
Events.STORY_MISSING,
STORY_RENDERED,
DOCS_RENDERED,
STORY_THREW_EXCEPTION,
STORY_ERRORED,
STORY_MISSING,
]);
export const waitForRenderPhase = (phase: RenderPhase) =>
waitForEvents([Events.STORY_RENDER_PHASE_CHANGED], ({ newPhase }) => newPhase === phase);
waitForEvents([STORY_RENDER_PHASE_CHANGED], ({ newPhase }) => newPhase === phase);
// A little trick to ensure that we always call the real `setTimeout` even when timers are mocked
const realSetTimeout = setTimeout;

2
lib/preview-web/src/PreviewWeb.test.ts
View File

@ -1,7 +1,7 @@
import global from 'global';
import * as ReactDOM from 'react-dom';
import merge from 'lodash/merge';
import Events, {
import {
CONFIG_ERROR,
CURRENT_STORY_WAS_SET,
DOCS_RENDERED,

57
lib/preview-web/src/PreviewWeb.tsx
View File

@ -1,7 +1,24 @@
import deprecate from 'util-deprecate';
import dedent from 'ts-dedent';
import global from 'global';
import Events, { IGNORED_EXCEPTION } from '@storybook/core-events';
import {
CURRENT_STORY_WAS_SET,
IGNORED_EXCEPTION,
PRELOAD_STORIES,
PREVIEW_KEYDOWN,
SET_CURRENT_STORY,
SET_STORIES,
STORY_ARGS_UPDATED,
STORY_CHANGED,
STORY_ERRORED,
STORY_MISSING,
STORY_PREPARED,
STORY_RENDER_PHASE_CHANGED,
STORY_SPECIFIED,
STORY_THREW_EXCEPTION,
STORY_UNCHANGED,
UPDATE_QUERY_PARAMS,
} from '@storybook/core-events';
import { logger } from '@storybook/client-logger';
import { AnyFramework, StoryId, ProjectAnnotations, Args, Globals } from '@storybook/csf';
import type {
@ -64,9 +81,9 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
globalWindow.onkeydown = this.onKeydown.bind(this);
this.channel.on(Events.SET_CURRENT_STORY, this.onSetCurrentStory.bind(this));
this.channel.on(Events.UPDATE_QUERY_PARAMS, this.onUpdateQueryParams.bind(this));
this.channel.on(Events.PRELOAD_STORIES, this.onPreloadStories.bind(this));
this.channel.on(SET_CURRENT_STORY, this.onSetCurrentStory.bind(this));
this.channel.on(UPDATE_QUERY_PARAMS, this.onUpdateQueryParams.bind(this));
this.channel.on(PRELOAD_STORIES, this.onPreloadStories.bind(this));
}
initializeWithProjectAnnotations(projectAnnotations: WebProjectAnnotations<TFramework>) {
@ -87,7 +104,7 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
initializeWithStoryIndex(storyIndex: StoryIndex): PromiseLike<void> {
return super.initializeWithStoryIndex(storyIndex).then(() => {
if (!global.FEATURES?.storyStoreV7) {
this.channel.emit(Events.SET_STORIES, this.storyStore.getSetStoriesPayload());
this.channel.emit(SET_STORIES, this.storyStore.getSetStoriesPayload());
}
return this.selectSpecifiedStory();
@ -130,9 +147,9 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
}
this.urlStore.setSelection({ storyId, viewMode });
this.channel.emit(Events.STORY_SPECIFIED, this.urlStore.selection);
this.channel.emit(STORY_SPECIFIED, this.urlStore.selection);
this.channel.emit(Events.CURRENT_STORY_WAS_SET, this.urlStore.selection);
this.channel.emit(CURRENT_STORY_WAS_SET, this.urlStore.selection);
await this.renderSelection({ persistedArgs: args });
}
@ -161,7 +178,7 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
super.onStoriesChanged({ importFn, storyIndex });
if (!global.FEATURES?.storyStoreV7) {
this.channel.emit(Events.SET_STORIES, await this.storyStore.getSetStoriesPayload());
this.channel.emit(SET_STORIES, await this.storyStore.getSetStoriesPayload());
}
if (this.urlStore.selection) {
@ -176,7 +193,7 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
if (!this.currentRender?.disableKeyListeners && !focusInInput(event)) {
// We have to pick off the keys of the event that we need on the other side
const { altKey, ctrlKey, metaKey, shiftKey, key, code, keyCode } = event;
this.channel.emit(Events.PREVIEW_KEYDOWN, {
this.channel.emit(PREVIEW_KEYDOWN, {
event: { altKey, ctrlKey, metaKey, shiftKey, key, code, keyCode },
});
}
@ -184,7 +201,7 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
onSetCurrentStory(selection: Selection) {
this.urlStore.setSelection(selection);
this.channel.emit(Events.CURRENT_STORY_WAS_SET, this.urlStore.selection);
this.channel.emit(CURRENT_STORY_WAS_SET, this.urlStore.selection);
this.renderSelection();
}
@ -290,7 +307,7 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
// Don't re-render the story if nothing has changed to justify it
if (lastRender && !storyIdChanged && !implementationChanged && !viewModeChanged) {
this.currentRender = lastRender;
this.channel.emit(Events.STORY_UNCHANGED, storyId);
this.channel.emit(STORY_UNCHANGED, storyId);
this.view.showMain();
return;
}
@ -301,11 +318,11 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
// If we are rendering something new (as opposed to re-rendering the same or first story), emit
if (lastSelection && (storyIdChanged || viewModeChanged)) {
this.channel.emit(Events.STORY_CHANGED, storyId);
this.channel.emit(STORY_CHANGED, storyId);
}
if (global.FEATURES?.storyStoreV7) {
this.channel.emit(Events.STORY_PREPARED, {
this.channel.emit(STORY_PREPARED, {
id: storyId,
parameters,
initialArgs,
@ -318,7 +335,7 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
// If the implementation changed, or args were persisted, the args may have changed,
// and the STORY_PREPARED event above may not be respected.
if (implementationChanged || persistedArgs) {
this.channel.emit(Events.STORY_ARGS_UPDATED, { storyId, args });
this.channel.emit(STORY_ARGS_UPDATED, { storyId, args });
}
if (selection.viewMode === 'docs' || parameters.docsOnly) {
@ -411,20 +428,20 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
renderMissingStory() {
this.view.showNoPreview();
this.channel.emit(Events.STORY_MISSING);
this.channel.emit(STORY_MISSING);
}
renderStoryLoadingException(storySpecifier: StorySpecifier, err: Error) {
logger.error(`Unable to load story '${storySpecifier}':`);
logger.error(err);
this.view.showErrorDisplay(err);
this.channel.emit(Events.STORY_MISSING, storySpecifier);
this.channel.emit(STORY_MISSING, storySpecifier);
}
// renderException is used if we fail to render the story and it is uncaught by the app layer
renderException(storyId: StoryId, err: Error) {
this.channel.emit(Events.STORY_THREW_EXCEPTION, err);
this.channel.emit(Events.STORY_RENDER_PHASE_CHANGED, { newPhase: 'errored', storyId });
this.channel.emit(STORY_THREW_EXCEPTION, err);
this.channel.emit(STORY_RENDER_PHASE_CHANGED, { newPhase: 'errored', storyId });
// Ignored exceptions exist for control flow purposes, and are typically handled elsewhere.
if (err !== IGNORED_EXCEPTION) {
@ -438,8 +455,8 @@ export class PreviewWeb<TFramework extends AnyFramework> extends Preview<TFramew
// wrong -- for instance returned the wrong thing from a story
renderError(storyId: StoryId, { title, description }: { title: string; description: string }) {
logger.error(`Error rendering story ${title}: ${description}`);
this.channel.emit(Events.STORY_ERRORED, { title, description });
this.channel.emit(Events.STORY_RENDER_PHASE_CHANGED, { newPhase: 'errored', storyId });
this.channel.emit(STORY_ERRORED, { title, description });
this.channel.emit(STORY_RENDER_PHASE_CHANGED, { newPhase: 'errored', storyId });
this.view.showErrorDisplay({
message: title,
stack: description,