From 16559308b16e5c3de02750e180b90d840f50bd47 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Tue, 1 Nov 2022 13:37:05 +1100 Subject: [PATCH] Shadow CSF's `ProjectAnnotations` with our own. Also clean up sub types --- .../lib/core-client/src/PreviewWeb.mockdata.ts | 4 ++-- code/lib/core-client/src/start.ts | 6 +++--- code/lib/preview-web/src/Preview.tsx | 17 ++++++----------- .../lib/preview-web/src/PreviewWeb.mockdata.ts | 4 ++-- code/lib/preview-web/src/PreviewWeb.tsx | 5 ++--- code/lib/preview-web/src/index.ts | 2 +- code/lib/preview-web/src/render/StoryRender.ts | 8 ++++---- code/lib/store/src/csf/composeConfigs.ts | 8 ++------ code/lib/types/src/modules/core-client.ts | 2 +- code/lib/types/src/modules/csf.ts | 2 -- code/lib/types/src/modules/store.ts | 18 +++++++++--------- 11 files changed, 32 insertions(+), 44 deletions(-) diff --git a/code/lib/core-client/src/PreviewWeb.mockdata.ts b/code/lib/core-client/src/PreviewWeb.mockdata.ts index 0f23baca60e5..78e3ee7de8b4 100644 --- a/code/lib/core-client/src/PreviewWeb.mockdata.ts +++ b/code/lib/core-client/src/PreviewWeb.mockdata.ts @@ -10,7 +10,7 @@ import { STORY_THREW_EXCEPTION, } from '@storybook/core-events'; -import type { Store_StoryIndex, Store_TeardownrenderToRoot } from '@storybook/types'; +import type { Store_StoryIndex, TeardownRenderToRoot } from '@storybook/types'; export type RenderPhase = | 'preparing' @@ -67,7 +67,7 @@ export const docsRenderer = { render: jest.fn().mockImplementation((context, parameters, element, cb) => cb()), unmount: jest.fn(), }; -export const teardownrenderToRoot: jest.Mock = jest.fn(); +export const teardownrenderToRoot: jest.Mock = jest.fn(); export const projectAnnotations = { globals: { a: 'b' }, globalTypes: {}, diff --git a/code/lib/core-client/src/start.ts b/code/lib/core-client/src/start.ts index d3fe83c2a795..06a0dc06f624 100644 --- a/code/lib/core-client/src/start.ts +++ b/code/lib/core-client/src/start.ts @@ -7,7 +7,7 @@ import type { ArgsStoryFn, Loadable, Path, - Store_WebProjectAnnotations, + ProjectAnnotations, } from '@storybook/types'; import { createChannel } from '@storybook/channel-postmessage'; import { addons } from '@storybook/addons'; @@ -22,7 +22,7 @@ const removedApi = (name: string) => () => { }; interface CoreClient_RendererImplementation { - decorateStory?: Store_WebProjectAnnotations['applyDecorators']; + decorateStory?: ProjectAnnotations['applyDecorators']; render?: ArgsStoryFn; } @@ -43,7 +43,7 @@ interface CoreClient_StartReturnValue { } export function start( - renderToRoot: Store_WebProjectAnnotations['renderToRoot'], + renderToRoot: ProjectAnnotations['renderToRoot'], { decorateStory, render }: CoreClient_RendererImplementation = {} ): CoreClient_StartReturnValue { if (globalWindow) { diff --git a/code/lib/preview-web/src/Preview.tsx b/code/lib/preview-web/src/Preview.tsx index 8e3796b5fecf..e35d33182c89 100644 --- a/code/lib/preview-web/src/Preview.tsx +++ b/code/lib/preview-web/src/Preview.tsx @@ -20,13 +20,12 @@ import type { AnyFramework, Args, Globals, - ProjectAnnotations, Store_ModuleImportFn, Store_PromiseLike, - Store_renderToRoot, + RenderToRoot, Store_Story, Store_StoryIndex, - Store_WebProjectAnnotations, + ProjectAnnotations, StoryId, } from '@storybook/types'; import { StoryStore } from '@storybook/store'; @@ -54,7 +53,7 @@ export class Preview; + renderToRoot?: RenderToRoot; storyRenders: StoryRender[] = []; @@ -84,9 +83,7 @@ export class Preview Store_StoryIndex; importFn: Store_ModuleImportFn; - getProjectAnnotations: () => MaybePromise< - Store_WebProjectAnnotations - >; + getProjectAnnotations: () => MaybePromise>; }) { // We save these two on initialization in case `getProjectAnnotations` errors, // in which case we may need them later when we recover. @@ -111,9 +108,7 @@ export class Preview MaybePromise< - Store_WebProjectAnnotations - > + getProjectAnnotations: () => MaybePromise> ): Store_PromiseLike> { return SynchronousPromise.resolve() .then(getProjectAnnotations) @@ -142,7 +137,7 @@ export class Preview + projectAnnotations: ProjectAnnotations ) { this.storyStore.setProjectAnnotations(projectAnnotations); diff --git a/code/lib/preview-web/src/PreviewWeb.mockdata.ts b/code/lib/preview-web/src/PreviewWeb.mockdata.ts index 03dc055f8669..1788f532ea34 100644 --- a/code/lib/preview-web/src/PreviewWeb.mockdata.ts +++ b/code/lib/preview-web/src/PreviewWeb.mockdata.ts @@ -10,7 +10,7 @@ import { STORY_THREW_EXCEPTION, } from '@storybook/core-events'; -import type { Store_StoryIndex, Store_TeardownrenderToRoot } from '@storybook/types'; +import type { Store_StoryIndex, TeardownRenderToRoot } from '@storybook/types'; import type { RenderPhase } from './render/StoryRender'; export const componentOneExports = { @@ -58,7 +58,7 @@ export const docsRenderer = { render: jest.fn().mockImplementation((context, parameters, element, cb) => cb()), unmount: jest.fn(), }; -export const teardownrenderToRoot: jest.Mock = jest.fn(); +export const teardownrenderToRoot: jest.Mock = jest.fn(); export const projectAnnotations = { globals: { a: 'b' }, globalTypes: {}, diff --git a/code/lib/preview-web/src/PreviewWeb.tsx b/code/lib/preview-web/src/PreviewWeb.tsx index 5063d9a16c1a..f8091336bcc2 100644 --- a/code/lib/preview-web/src/PreviewWeb.tsx +++ b/code/lib/preview-web/src/PreviewWeb.tsx @@ -22,12 +22,11 @@ import type { AnyFramework, Args, Globals, - ProjectAnnotations, Store_ModuleImportFn, Store_Selection, Store_StoryIndex, Store_StorySpecifier, - Store_WebProjectAnnotations, + ProjectAnnotations, StoryId, ViewMode, } from '@storybook/types'; @@ -101,7 +100,7 @@ export class PreviewWeb< } initializeWithProjectAnnotations( - projectAnnotations: Store_WebProjectAnnotations + projectAnnotations: ProjectAnnotations ) { return super .initializeWithProjectAnnotations(projectAnnotations) diff --git a/code/lib/preview-web/src/index.ts b/code/lib/preview-web/src/index.ts index dd3ff24cfec8..f018b7f6a253 100644 --- a/code/lib/preview-web/src/index.ts +++ b/code/lib/preview-web/src/index.ts @@ -1,6 +1,6 @@ // FIXME: breaks builder-vite, remove this in 7.0 export { composeConfigs } from '@storybook/store'; -export type { Store_WebProjectAnnotations as WebProjectAnnotations } from '@storybook/types'; +export type { ProjectAnnotations as WebProjectAnnotations } from '@storybook/types'; export { Preview } from './Preview'; export { PreviewWeb } from './PreviewWeb'; diff --git a/code/lib/preview-web/src/render/StoryRender.ts b/code/lib/preview-web/src/render/StoryRender.ts index d58d467c69f0..f6773bdde05e 100644 --- a/code/lib/preview-web/src/render/StoryRender.ts +++ b/code/lib/preview-web/src/render/StoryRender.ts @@ -2,9 +2,9 @@ import global from 'global'; import type { AnyFramework, Store_RenderContext, - Store_renderToRoot, + RenderToRoot, Store_Story, - Store_TeardownrenderToRoot, + TeardownRenderToRoot, StoryContext, StoryContextForLoaders, StoryId, @@ -64,14 +64,14 @@ export class StoryRender {}; + private teardownRender: TeardownRenderToRoot = () => {}; public torndown = false; constructor( public channel: Channel, public store: StoryStore, - private renderToScreen: Store_renderToRoot, + private renderToScreen: RenderToRoot, private callbacks: RenderContextCallbacks, public id: StoryId, public viewMode: ViewMode, diff --git a/code/lib/store/src/csf/composeConfigs.ts b/code/lib/store/src/csf/composeConfigs.ts index a54ee6af8b1b..8ea2808226ba 100644 --- a/code/lib/store/src/csf/composeConfigs.ts +++ b/code/lib/store/src/csf/composeConfigs.ts @@ -1,8 +1,4 @@ -import type { - AnyFramework, - Store_ModuleExports, - Store_WebProjectAnnotations, -} from '@storybook/types'; +import type { AnyFramework, Store_ModuleExports, ProjectAnnotations } from '@storybook/types'; import { combineParameters } from '../parameters'; import { composeStepRunners } from './stepRunners'; @@ -37,7 +33,7 @@ export function getSingletonField( export function composeConfigs( moduleExportList: Store_ModuleExports[] -): Store_WebProjectAnnotations { +): ProjectAnnotations { const allArgTypeEnhancers = getArrayField(moduleExportList, 'argTypesEnhancers'); const stepRunners = getField(moduleExportList, 'runStep'); diff --git a/code/lib/types/src/modules/core-client.ts b/code/lib/types/src/modules/core-client.ts index 5767da49b53a..5d3867cf394d 100644 --- a/code/lib/types/src/modules/core-client.ts +++ b/code/lib/types/src/modules/core-client.ts @@ -1,6 +1,6 @@ /* eslint-disable @typescript-eslint/naming-convention */ import type { Store_RenderContext } from './store'; -// import { Store_RenderContext, Store_WebProjectAnnotations } from './store'; +// import { Store_RenderContext, ProjectAnnotations } from './store'; // import { ArgsStoryFn } from './csf'; export interface CoreClient_PreviewError { diff --git a/code/lib/types/src/modules/csf.ts b/code/lib/types/src/modules/csf.ts index dce0151e225c..02f0c78c0802 100644 --- a/code/lib/types/src/modules/csf.ts +++ b/code/lib/types/src/modules/csf.ts @@ -28,7 +28,6 @@ import type { PartialStoryFn, PlayFunction, PlayFunctionContext, - ProjectAnnotations, SBArrayType, SBEnumType, SBIntersectionType, @@ -87,7 +86,6 @@ export type { PartialStoryFn, PlayFunction, PlayFunctionContext, - ProjectAnnotations, SBArrayType, SBEnumType, SBIntersectionType, diff --git a/code/lib/types/src/modules/store.ts b/code/lib/types/src/modules/store.ts index e9f691e1d48f..10be57c63d27 100644 --- a/code/lib/types/src/modules/store.ts +++ b/code/lib/types/src/modules/store.ts @@ -1,5 +1,7 @@ /* eslint-disable @typescript-eslint/naming-convention */ import type { SynchronousPromise } from 'synchronous-promise'; +import type { ProjectAnnotations as CsfProjectAnnotations } from '@storybook/csf'; + import type { Addon_IndexEntry, Addon_StoryIndexEntry } from './addons'; import type { AnnotatedStoryFn, @@ -13,7 +15,6 @@ import type { Parameters, PartialStoryFn, Path, - ProjectAnnotations, StoryAnnotations, StoryContext, StoryContextForEnhancers, @@ -34,21 +35,20 @@ export type Store_ModuleImportFn = (path: Path) => Store_PromiseLike = Promise | T; -export type Store_TeardownrenderToRoot = () => Store_MaybePromise; -// We should consider renaming this to `RenderToRootElement` or similar -export type Store_renderToRoot = ( +export type TeardownRenderToRoot = () => Store_MaybePromise; +export type RenderToRoot = ( context: Store_RenderContext, element: TStorybookRoot -) => Store_MaybePromise; +) => Store_MaybePromise; -export type Store_WebProjectAnnotations< +export type ProjectAnnotations< TFramework extends AnyFramework, TStorybookRoot = HTMLElement -> = ProjectAnnotations & { - renderToRoot?: Store_renderToRoot; +> = CsfProjectAnnotations & { + renderToRoot?: RenderToRoot; /* @deprecated use renderToRoot */ - renderToDOM?: Store_renderToRoot; + renderToDOM?: RenderToRoot; }; export type Store_NormalizedProjectAnnotations =