preview-web.d.ts 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336
  1. import * as _storybook_types from '@storybook/types';
  2. import { Renderer, StoryId, StoryRenderOptions, ViewMode, PreparedStory, RenderToCanvas, RenderContextCallbacks, DocsContextProps, CSFFile, ModuleExports, ResolvedModuleExportType, ModuleExport, ResolvedModuleExportFromType, StoryName, StoryContextForLoaders, IndexEntry, StoryIndex, ModuleImportFn, ProjectAnnotations, Globals, Args } from '@storybook/types';
  3. export { DocsContextProps, DocsRenderFunction, ProjectAnnotations as WebProjectAnnotations } from '@storybook/types';
  4. export { c as composeConfigs } from './composeConfigs-62a04721.js';
  5. import { Channel } from '@storybook/channels';
  6. import { S as StoryStore, d as StorySpecifier } from './StoryStore-f7424ddf.js';
  7. import 'synchronous-promise';
  8. import './hooks-655fa363.js';
  9. type RenderType = 'story' | 'docs';
  10. /**
  11. * A "Render" represents the rendering of a single entry to a single location
  12. *
  13. * The implemenations of render are used for two key purposes:
  14. * - Tracking the state of the rendering as it moves between preparing, rendering and tearing down.
  15. * - Tracking what is rendered to know if a change requires re-rendering or teardown + recreation.
  16. */
  17. interface Render<TRenderer extends Renderer> {
  18. type: RenderType;
  19. id: StoryId;
  20. isPreparing: () => boolean;
  21. isEqual: (other: Render<TRenderer>) => boolean;
  22. disableKeyListeners: boolean;
  23. teardown?: (options: {
  24. viewModeChanged: boolean;
  25. }) => Promise<void>;
  26. torndown: boolean;
  27. renderToElement: (canvasElement: TRenderer['canvasElement'], renderStoryToElement?: any, options?: StoryRenderOptions) => Promise<void>;
  28. }
  29. type RenderPhase = 'preparing' | 'loading' | 'rendering' | 'playing' | 'played' | 'completed' | 'aborted' | 'errored';
  30. declare class StoryRender<TRenderer extends Renderer> implements Render<TRenderer> {
  31. channel: Channel;
  32. store: StoryStore<TRenderer>;
  33. private renderToScreen;
  34. private callbacks;
  35. id: StoryId;
  36. viewMode: ViewMode;
  37. renderOptions: StoryRenderOptions;
  38. type: RenderType;
  39. story?: PreparedStory<TRenderer>;
  40. phase?: RenderPhase;
  41. private abortController?;
  42. private canvasElement?;
  43. private notYetRendered;
  44. disableKeyListeners: boolean;
  45. private teardownRender;
  46. torndown: boolean;
  47. constructor(channel: Channel, store: StoryStore<TRenderer>, renderToScreen: RenderToCanvas<TRenderer>, callbacks: RenderContextCallbacks<TRenderer>, id: StoryId, viewMode: ViewMode, renderOptions?: StoryRenderOptions, story?: PreparedStory<TRenderer>);
  48. private runPhase;
  49. prepare(): Promise<void>;
  50. isEqual(other: Render<TRenderer>): boolean;
  51. isPreparing(): boolean;
  52. isPending(): boolean;
  53. renderToElement(canvasElement: TRenderer['canvasElement']): Promise<void>;
  54. private storyContext;
  55. render({ initial, forceRemount, }?: {
  56. initial?: boolean;
  57. forceRemount?: boolean;
  58. }): Promise<void>;
  59. rerender(): Promise<void>;
  60. remount(): Promise<void>;
  61. cancelRender(): void;
  62. teardown(): Promise<void>;
  63. }
  64. declare class DocsContext<TRenderer extends Renderer> implements DocsContextProps<TRenderer> {
  65. channel: Channel;
  66. protected store: StoryStore<TRenderer>;
  67. renderStoryToElement: DocsContextProps<TRenderer>['renderStoryToElement'];
  68. private componentStoriesValue;
  69. private storyIdToCSFFile;
  70. private exportToStory;
  71. private exportsToCSFFile;
  72. private nameToStoryId;
  73. private attachedCSFFile?;
  74. private primaryStory?;
  75. constructor(channel: Channel, store: StoryStore<TRenderer>, renderStoryToElement: DocsContextProps<TRenderer>['renderStoryToElement'],
  76. /** The CSF files known (via the index) to be refererenced by this docs file */
  77. csfFiles: CSFFile<TRenderer>[]);
  78. referenceCSFFile(csfFile: CSFFile<TRenderer>): void;
  79. attachCSFFile(csfFile: CSFFile<TRenderer>): void;
  80. referenceMeta(metaExports: ModuleExports, attach: boolean): void;
  81. get projectAnnotations(): _storybook_types.NormalizedProjectAnnotations<TRenderer>;
  82. private resolveAttachedModuleExportType;
  83. private resolveModuleExport;
  84. resolveOf<TType extends ResolvedModuleExportType>(moduleExportOrType: ModuleExport | TType, validTypes?: TType[]): ResolvedModuleExportFromType<TType, TRenderer>;
  85. storyIdByName: (storyName: StoryName) => string;
  86. componentStories: () => PreparedStory<TRenderer>[];
  87. storyById: (storyId?: StoryId) => PreparedStory<TRenderer>;
  88. getStoryContext: (story: PreparedStory<TRenderer>) => StoryContextForLoaders<TRenderer, _storybook_types.Args>;
  89. loadStory: (id: StoryId) => Promise<PreparedStory<TRenderer>>;
  90. }
  91. /**
  92. * A CsfDocsRender is a render of a docs entry that is rendered based on a CSF file.
  93. *
  94. * The expectation is the primary CSF file which is the `importPath` for the entry will
  95. * define a story which may contain the actual rendered JSX code for the template in the
  96. * `docs.page` parameter.
  97. *
  98. * Use cases:
  99. * - Autodocs, where there is no story, and we fall back to the globally defined template.
  100. * - *.stories.mdx files, where the MDX compiler produces a CSF file with a `.parameter.docs.page`
  101. * parameter containing the compiled content of the MDX file.
  102. */
  103. declare class CsfDocsRender<TRenderer extends Renderer> implements Render<TRenderer> {
  104. protected channel: Channel;
  105. protected store: StoryStore<TRenderer>;
  106. entry: IndexEntry;
  107. private callbacks;
  108. readonly type: RenderType;
  109. readonly subtype = "csf";
  110. readonly id: StoryId;
  111. story?: PreparedStory<TRenderer>;
  112. rerender?: () => Promise<void>;
  113. teardownRender?: (options: {
  114. viewModeChanged?: boolean;
  115. }) => Promise<void>;
  116. torndown: boolean;
  117. readonly disableKeyListeners = false;
  118. preparing: boolean;
  119. csfFiles?: CSFFile<TRenderer>[];
  120. constructor(channel: Channel, store: StoryStore<TRenderer>, entry: IndexEntry, callbacks: RenderContextCallbacks<TRenderer>);
  121. isPreparing(): boolean;
  122. prepare(): Promise<void>;
  123. isEqual(other: Render<TRenderer>): boolean;
  124. docsContext(renderStoryToElement: DocsContextProps<TRenderer>['renderStoryToElement']): DocsContext<TRenderer>;
  125. renderToElement(canvasElement: TRenderer['canvasElement'], renderStoryToElement: DocsContextProps<TRenderer>['renderStoryToElement']): Promise<void>;
  126. teardown({ viewModeChanged }?: {
  127. viewModeChanged?: boolean;
  128. }): Promise<void>;
  129. }
  130. /**
  131. * A MdxDocsRender is a render of a docs entry that comes from a true MDX file,
  132. * that is a `.mdx` file that doesn't get compiled to a CSF file.
  133. *
  134. * A MDX render can reference (import) zero or more CSF files that contain stories.
  135. *
  136. * Use cases:
  137. * - *.mdx file that may or may not reference a specific CSF file with `<Meta of={} />`
  138. */
  139. declare class MdxDocsRender<TRenderer extends Renderer> implements Render<TRenderer> {
  140. protected channel: Channel;
  141. protected store: StoryStore<TRenderer>;
  142. entry: IndexEntry;
  143. private callbacks;
  144. readonly type: RenderType;
  145. readonly subtype = "mdx";
  146. readonly id: StoryId;
  147. private exports?;
  148. rerender?: () => Promise<void>;
  149. teardownRender?: (options: {
  150. viewModeChanged?: boolean;
  151. }) => Promise<void>;
  152. torndown: boolean;
  153. readonly disableKeyListeners = false;
  154. preparing: boolean;
  155. csfFiles?: CSFFile<TRenderer>[];
  156. constructor(channel: Channel, store: StoryStore<TRenderer>, entry: IndexEntry, callbacks: RenderContextCallbacks<TRenderer>);
  157. isPreparing(): boolean;
  158. prepare(): Promise<void>;
  159. isEqual(other: Render<TRenderer>): boolean;
  160. docsContext(renderStoryToElement: DocsContextProps<TRenderer>['renderStoryToElement']): DocsContext<TRenderer>;
  161. renderToElement(canvasElement: TRenderer['canvasElement'], renderStoryToElement: DocsContextProps<TRenderer>['renderStoryToElement']): Promise<void>;
  162. teardown({ viewModeChanged }?: {
  163. viewModeChanged?: boolean;
  164. }): Promise<void>;
  165. }
  166. type MaybePromise<T> = Promise<T> | T;
  167. declare class Preview<TRenderer extends Renderer> {
  168. protected channel: Channel;
  169. /**
  170. * @deprecated will be removed in 8.0, please use channel instead
  171. */
  172. serverChannel?: Channel;
  173. storyStore: StoryStore<TRenderer>;
  174. getStoryIndex?: () => StoryIndex;
  175. importFn?: ModuleImportFn;
  176. renderToCanvas?: RenderToCanvas<TRenderer>;
  177. storyRenders: StoryRender<TRenderer>[];
  178. previewEntryError?: Error;
  179. constructor(channel?: Channel);
  180. initialize({ getStoryIndex, importFn, getProjectAnnotations, }: {
  181. getStoryIndex?: () => StoryIndex;
  182. importFn: ModuleImportFn;
  183. getProjectAnnotations: () => MaybePromise<ProjectAnnotations<TRenderer>>;
  184. }): Promise<void>;
  185. setupListeners(): void;
  186. getProjectAnnotationsOrRenderError(getProjectAnnotations: () => MaybePromise<ProjectAnnotations<TRenderer>>): Promise<ProjectAnnotations<TRenderer>>;
  187. initializeWithProjectAnnotations(projectAnnotations: ProjectAnnotations<TRenderer>): Promise<void>;
  188. setInitialGlobals(): Promise<void>;
  189. emitGlobals(): void;
  190. getStoryIndexFromServer(): Promise<StoryIndex>;
  191. initializeWithStoryIndex(storyIndex: StoryIndex): PromiseLike<void>;
  192. onGetProjectAnnotationsChanged({ getProjectAnnotations, }: {
  193. getProjectAnnotations: () => MaybePromise<ProjectAnnotations<TRenderer>>;
  194. }): Promise<void>;
  195. onStoryIndexChanged(): Promise<void>;
  196. onStoriesChanged({ importFn, storyIndex, }: {
  197. importFn?: ModuleImportFn;
  198. storyIndex?: StoryIndex;
  199. }): Promise<void>;
  200. onUpdateGlobals({ globals }: {
  201. globals: Globals;
  202. }): Promise<void>;
  203. onUpdateArgs({ storyId, updatedArgs }: {
  204. storyId: StoryId;
  205. updatedArgs: Args;
  206. }): Promise<void>;
  207. onResetArgs({ storyId, argNames }: {
  208. storyId: string;
  209. argNames?: string[];
  210. }): Promise<void>;
  211. onForceReRender(): Promise<void>;
  212. onForceRemount({ storyId }: {
  213. storyId: StoryId;
  214. }): Promise<void>;
  215. renderStoryToElement(story: PreparedStory<TRenderer>, element: TRenderer['canvasElement'], callbacks: RenderContextCallbacks<TRenderer>, options: StoryRenderOptions): () => Promise<void>;
  216. teardownRender(render: StoryRender<TRenderer> | CsfDocsRender<TRenderer> | MdxDocsRender<TRenderer>, { viewModeChanged }?: {
  217. viewModeChanged?: boolean;
  218. }): Promise<void>;
  219. extract(options?: {
  220. includeDocsOnly: boolean;
  221. }): Promise<Record<string, _storybook_types.StoryContextForEnhancers<TRenderer, Args>>>;
  222. renderPreviewEntryError(reason: string, err: Error): void;
  223. }
  224. interface SelectionSpecifier {
  225. storySpecifier: StorySpecifier;
  226. viewMode: ViewMode;
  227. args?: Args;
  228. globals?: Args;
  229. }
  230. interface Selection {
  231. storyId: StoryId;
  232. viewMode: ViewMode;
  233. }
  234. interface SelectionStore {
  235. selectionSpecifier: SelectionSpecifier | null;
  236. selection?: Selection;
  237. setSelection(selection: Selection): void;
  238. setQueryParams(queryParams: qs.ParsedQs): void;
  239. }
  240. interface View<TStorybookRoot> {
  241. prepareForStory(story: PreparedStory<any>): TStorybookRoot;
  242. prepareForDocs(): TStorybookRoot;
  243. showErrorDisplay(err: {
  244. message?: string;
  245. stack?: string;
  246. }): void;
  247. showNoPreview(): void;
  248. showPreparingStory(options?: {
  249. immediate: boolean;
  250. }): void;
  251. showPreparingDocs(options?: {
  252. immediate: boolean;
  253. }): void;
  254. showMain(): void;
  255. showDocs(): void;
  256. showStory(): void;
  257. showStoryDuringRender(): void;
  258. }
  259. type PossibleRender<TFramework extends Renderer> = StoryRender<TFramework> | CsfDocsRender<TFramework> | MdxDocsRender<TFramework>;
  260. declare class PreviewWithSelection<TFramework extends Renderer> extends Preview<TFramework> {
  261. selectionStore: SelectionStore;
  262. view: View<TFramework['canvasElement']>;
  263. currentSelection?: Selection;
  264. currentRender?: PossibleRender<TFramework>;
  265. constructor(selectionStore: SelectionStore, view: View<TFramework['canvasElement']>);
  266. setupListeners(): void;
  267. setInitialGlobals(): Promise<void>;
  268. initializeWithStoryIndex(storyIndex: StoryIndex): PromiseLike<void>;
  269. selectSpecifiedStory(): Promise<void>;
  270. onGetProjectAnnotationsChanged({ getProjectAnnotations, }: {
  271. getProjectAnnotations: () => MaybePromise<ProjectAnnotations<TFramework>>;
  272. }): Promise<void>;
  273. onStoriesChanged({ importFn, storyIndex, }: {
  274. importFn?: ModuleImportFn;
  275. storyIndex?: StoryIndex;
  276. }): Promise<void>;
  277. onKeydown(event: KeyboardEvent): void;
  278. onSetCurrentStory(selection: {
  279. storyId: StoryId;
  280. viewMode?: ViewMode;
  281. }): Promise<void>;
  282. onUpdateQueryParams(queryParams: any): void;
  283. onUpdateGlobals({ globals }: {
  284. globals: Globals;
  285. }): Promise<void>;
  286. onUpdateArgs({ storyId, updatedArgs }: {
  287. storyId: StoryId;
  288. updatedArgs: Args;
  289. }): Promise<void>;
  290. onPreloadStories({ ids }: {
  291. ids: string[];
  292. }): Promise<void>;
  293. renderSelection({ persistedArgs }?: {
  294. persistedArgs?: Args;
  295. }): Promise<void>;
  296. teardownRender(render: PossibleRender<TFramework>, { viewModeChanged }?: {
  297. viewModeChanged?: boolean;
  298. }): Promise<void>;
  299. extract(options?: {
  300. includeDocsOnly: boolean;
  301. }): Promise<Record<string, _storybook_types.StoryContextForEnhancers<TFramework, Args>>>;
  302. mainStoryCallbacks(storyId: StoryId): {
  303. showMain: () => void;
  304. showError: (err: {
  305. title: string;
  306. description: string;
  307. }) => void;
  308. showException: (err: Error) => void;
  309. };
  310. renderPreviewEntryError(reason: string, err: Error): void;
  311. renderMissingStory(): void;
  312. renderStoryLoadingException(storySpecifier: StorySpecifier, err: Error): void;
  313. renderException(storyId: StoryId, error: Error): void;
  314. renderError(storyId: StoryId, { title, description }: {
  315. title: string;
  316. description: string;
  317. }): void;
  318. }
  319. declare class PreviewWeb<TFramework extends Renderer> extends PreviewWithSelection<TFramework> {
  320. constructor();
  321. }
  322. declare function simulateDOMContentLoaded(): void;
  323. declare function simulatePageLoad($container: any): void;
  324. export { DocsContext, Preview, PreviewWeb, PreviewWithSelection, simulateDOMContentLoaded, simulatePageLoad };