From 7eb2ee398ba60dbe3eec7fdba88cdc56552c9ec7 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Fri, 15 Jul 2022 13:02:37 +1000 Subject: [PATCH 1/6] Don't clean in watch mode. cc @ndelangen this fixes annoying errors like: ``` error - ../../lib/blocks/dist/index.js Module build failed: Error: ENOENT: no such file or directory, open '/Users/tom/GitHub/storybookjs/storybook/lib/blocks/dist/index.js' ``` --- scripts/prepare/bundle.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/prepare/bundle.ts b/scripts/prepare/bundle.ts index 24702e49ff18..35bebe107262 100644 --- a/scripts/prepare/bundle.ts +++ b/scripts/prepare/bundle.ts @@ -47,7 +47,7 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { // sourcemap: optimized, format: ['esm'], target: 'chrome100', - clean: true, + clean: !watch, platform: platform || 'browser', // shims: true, esbuildPlugins: [ @@ -85,7 +85,7 @@ const run = async ({ cwd, flags }: { cwd: string; flags: string[] }) => { format: ['cjs'], target: 'node14', platform: 'node', - clean: true, + clean: !watch, external: [name, ...Object.keys(dependencies || {}), ...Object.keys(peerDependencies || {})], esbuildOptions: (c) => { From d22f95060a87d97c5ad4df1eb51d3fb65fb443c1 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Mon, 18 Jul 2022 17:20:23 +1000 Subject: [PATCH 2/6] Simplify channel use in blocks --- lib/blocks/package.json | 4 +- lib/blocks/src/blocks/ArgsTable.tsx | 22 +++++----- lib/blocks/src/blocks/DocsContainer.tsx | 2 +- lib/blocks/src/blocks/SourceContainer.tsx | 5 +-- lib/blocks/src/blocks/enhanceSource.test.ts | 2 +- lib/blocks/src/blocks/enhanceSource.ts | 2 +- .../blocks/external/ExternalDocsContext.ts | 15 +++---- .../src/blocks/external/ExternalPreview.ts | 4 +- lib/blocks/src/blocks/mdx.tsx | 41 ++++++++++--------- lib/preview-web/package.json | 1 + .../src/docs-context/DocsContext.ts | 5 +-- .../src/docs-context/DocsContextProps.ts | 6 +++ .../src/render/StandaloneDocsRender.ts | 6 +-- .../src/render/TemplateDocsRender.ts | 6 +-- yarn.lock | 1 + 15 files changed, 62 insertions(+), 60 deletions(-) diff --git a/lib/blocks/package.json b/lib/blocks/package.json index ad3791b9793a..62d89225c03a 100644 --- a/lib/blocks/package.json +++ b/lib/blocks/package.json @@ -41,7 +41,6 @@ "prepare": "esrun ../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.0.0-alpha.13", "@storybook/api": "7.0.0-alpha.13", "@storybook/client-logger": "7.0.0-alpha.13", "@storybook/components": "7.0.0-alpha.13", @@ -64,7 +63,8 @@ "util-deprecate": "^1.0.2" }, "devDependencies": { - "@digitak/esrun": "^3.2.2" + "@digitak/esrun": "^3.2.2", + "@storybook/addons": "7.0.0-alpha.13" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0" diff --git a/lib/blocks/src/blocks/ArgsTable.tsx b/lib/blocks/src/blocks/ArgsTable.tsx index 116ff04ac767..86f869aa0a28 100644 --- a/lib/blocks/src/blocks/ArgsTable.tsx +++ b/lib/blocks/src/blocks/ArgsTable.tsx @@ -1,9 +1,13 @@ import React, { FC, useContext, useEffect, useState, useCallback } from 'react'; import mapValues from 'lodash/mapValues'; import { ArgTypesExtractor } from '@storybook/docs-tools'; -import { addons } from '@storybook/addons'; import { filterArgTypes, PropDescriptor } from '@storybook/store'; -import Events from '@storybook/core-events'; +import { + STORY_ARGS_UPDATED, + UPDATE_STORY_ARGS, + RESET_STORY_ARGS, + GLOBALS_UPDATED, +} from '@storybook/core-events'; import { StrictArgTypes, Args, Globals } from '@storybook/csf'; import { ArgsTable as PureArgsTable, @@ -45,7 +49,6 @@ const useArgs = ( storyId: string, context: DocsContextProps ): [Args, (args: Args) => void, (argNames?: string[]) => void] => { - const channel = addons.getChannel(); const storyContext = context.getStoryContext(context.storyById()); const [args, setArgs] = useState(storyContext.args); @@ -55,22 +58,21 @@ const useArgs = ( setArgs(changed.args); } }; - channel.on(Events.STORY_ARGS_UPDATED, cb); - return () => channel.off(Events.STORY_ARGS_UPDATED, cb); + context.channel.on(STORY_ARGS_UPDATED, cb); + return () => context.channel.off(STORY_ARGS_UPDATED, cb); }, [storyId]); const updateArgs = useCallback( - (updatedArgs) => channel.emit(Events.UPDATE_STORY_ARGS, { storyId, updatedArgs }), + (updatedArgs) => context.channel.emit(UPDATE_STORY_ARGS, { storyId, updatedArgs }), [storyId] ); const resetArgs = useCallback( - (argNames?: string[]) => channel.emit(Events.RESET_STORY_ARGS, { storyId, argNames }), + (argNames?: string[]) => context.channel.emit(RESET_STORY_ARGS, { storyId, argNames }), [storyId] ); return [args, updateArgs, resetArgs]; }; const useGlobals = (context: DocsContextProps): [Globals] => { - const channel = addons.getChannel(); const storyContext = context.getStoryContext(context.storyById()); const [globals, setGlobals] = useState(storyContext.globals); @@ -78,8 +80,8 @@ const useGlobals = (context: DocsContextProps): [Globals] => { const cb = (changed: { globals: Globals }) => { setGlobals(changed.globals); }; - channel.on(Events.GLOBALS_UPDATED, cb); - return () => channel.off(Events.GLOBALS_UPDATED, cb); + context.channel.on(GLOBALS_UPDATED, cb); + return () => context.channel.off(GLOBALS_UPDATED, cb); }, []); return [globals]; diff --git a/lib/blocks/src/blocks/DocsContainer.tsx b/lib/blocks/src/blocks/DocsContainer.tsx index d9db94465df1..ffb841a30f44 100644 --- a/lib/blocks/src/blocks/DocsContainer.tsx +++ b/lib/blocks/src/blocks/DocsContainer.tsx @@ -40,7 +40,7 @@ export const DocsContainer: FunctionComponent = ({ return ( - + {children} diff --git a/lib/blocks/src/blocks/SourceContainer.tsx b/lib/blocks/src/blocks/SourceContainer.tsx index bb5a5bd06397..09634240b0af 100644 --- a/lib/blocks/src/blocks/SourceContainer.tsx +++ b/lib/blocks/src/blocks/SourceContainer.tsx @@ -1,7 +1,7 @@ import React, { FC, Context, createContext, useEffect, useState } from 'react'; import { dequal as deepEqual } from 'dequal'; -import { addons } from '@storybook/addons'; +import type { Channel } from '@storybook/addons'; import { SNIPPET_RENDERED } from '@storybook/docs-tools'; import type { SyntaxHighlighterFormatTypes } from '@storybook/components'; @@ -20,9 +20,8 @@ export interface SourceContextProps { export const SourceContext: Context = createContext({ sources: {} }); -export const SourceContainer: FC<{}> = ({ children }) => { +export const SourceContainer: FC<{ channel: Channel }> = ({ children, channel }) => { const [sources, setSources] = useState({}); - const channel = addons.getChannel(); useEffect(() => { const handleSnippetRendered = ( diff --git a/lib/blocks/src/blocks/enhanceSource.test.ts b/lib/blocks/src/blocks/enhanceSource.test.ts index 13afaadc40c4..f0010c10bdab 100644 --- a/lib/blocks/src/blocks/enhanceSource.test.ts +++ b/lib/blocks/src/blocks/enhanceSource.test.ts @@ -1,4 +1,4 @@ -import type { StoryContext } from '@storybook/addons'; +import type { StoryContext } from '@storybook/csf'; import { enhanceSource } from './enhanceSource'; const emptyContext: StoryContext = { diff --git a/lib/blocks/src/blocks/enhanceSource.ts b/lib/blocks/src/blocks/enhanceSource.ts index 3cfb4890dc06..f2c799648d23 100644 --- a/lib/blocks/src/blocks/enhanceSource.ts +++ b/lib/blocks/src/blocks/enhanceSource.ts @@ -1,4 +1,4 @@ -import type { Parameters } from '@storybook/addons'; +import type { Parameters } from '@storybook/csf'; import type { Story } from '@storybook/store'; import { combineParameters } from '@storybook/store'; diff --git a/lib/blocks/src/blocks/external/ExternalDocsContext.ts b/lib/blocks/src/blocks/external/ExternalDocsContext.ts index 70c69a32375a..13a2cd3503aa 100644 --- a/lib/blocks/src/blocks/external/ExternalDocsContext.ts +++ b/lib/blocks/src/blocks/external/ExternalDocsContext.ts @@ -1,17 +1,18 @@ -import { StoryId, AnyFramework, ComponentTitle, StoryName } from '@storybook/csf'; -import { DocsContext, DocsContextProps } from '@storybook/preview-web'; -import { CSFFile, ModuleExport, ModuleExports, StoryStore } from '@storybook/store'; +import { AnyFramework } from '@storybook/csf'; +import { DocsContext } from '@storybook/preview-web'; +import { StoryStore } from '@storybook/store'; +import type { DocsContextProps } from '@storybook/preview-web'; +import type { CSFFile, ModuleExport, ModuleExports } from '@storybook/store'; +import type { Channel } from '@storybook/channels'; export class ExternalDocsContext extends DocsContext { constructor( - public readonly id: StoryId, - public readonly title: ComponentTitle, - public readonly name: StoryName, + public channel: Channel, protected store: StoryStore, public renderStoryToElement: DocsContextProps['renderStoryToElement'], private processMetaExports: (metaExports: ModuleExports) => CSFFile ) { - super(id, title, name, store, renderStoryToElement, [], true); + super(channel, store, renderStoryToElement, [], true); } setMeta = (metaExports: ModuleExports) => { diff --git a/lib/blocks/src/blocks/external/ExternalPreview.ts b/lib/blocks/src/blocks/external/ExternalPreview.ts index 123bf9f2213c..8f569faf12a6 100644 --- a/lib/blocks/src/blocks/external/ExternalPreview.ts +++ b/lib/blocks/src/blocks/external/ExternalPreview.ts @@ -75,9 +75,7 @@ export class ExternalPreview< docsContext = () => { return new ExternalDocsContext( - 'storybook--docs', - 'Storybook', - 'Docs', + this.channel, this.storyStore, this.renderStoryToElement.bind(this), this.processMetaExports.bind(this) diff --git a/lib/blocks/src/blocks/mdx.tsx b/lib/blocks/src/blocks/mdx.tsx index e3b468bb5089..19c864e3f74a 100644 --- a/lib/blocks/src/blocks/mdx.tsx +++ b/lib/blocks/src/blocks/mdx.tsx @@ -1,5 +1,4 @@ -import React, { FC, SyntheticEvent } from 'react'; -import { addons } from '@storybook/addons'; +import React, { useContext, FC, SyntheticEvent } from 'react'; import { NAVIGATE_URL } from '@storybook/core-events'; import { Code, components } from '@storybook/components'; import global from 'global'; @@ -50,8 +49,8 @@ export const CodeOrSourceMdx: FC = ({ className, children, ); }; -function navigate(url: string) { - addons.getChannel().emit(NAVIGATE_URL, url); +function navigate(context: DocsContextProps, url: string) { + context.channel.emit(NAVIGATE_URL, url); } // @ts-ignore @@ -61,21 +60,25 @@ interface AnchorInPageProps { hash: string; } -const AnchorInPage: FC = ({ hash, children }) => ( - { - const id = hash.substring(1); - const element = document.getElementById(id); - if (element) { - navigate(hash); - } - }} - > - {children} - -); +const AnchorInPage: FC = ({ hash, children }) => { + const context = useContext(DocsContext); + + return ( + { + const id = hash.substring(1); + const element = document.getElementById(id); + if (element) { + navigate(context, hash); + } + }} + > + {children} + + ); +}; interface AnchorMdxProps { href: string; diff --git a/lib/preview-web/package.json b/lib/preview-web/package.json index 77f93e40c5cd..5c41cdfcdfe4 100644 --- a/lib/preview-web/package.json +++ b/lib/preview-web/package.json @@ -43,6 +43,7 @@ "dependencies": { "@storybook/addons": "7.0.0-alpha.13", "@storybook/channel-postmessage": "7.0.0-alpha.13", + "@storybook/channels": "7.0.0-alpha.13", "@storybook/client-logger": "7.0.0-alpha.13", "@storybook/core-events": "7.0.0-alpha.13", "@storybook/csf": "0.0.2--canary.4566f4d.1", diff --git a/lib/preview-web/src/docs-context/DocsContext.ts b/lib/preview-web/src/docs-context/DocsContext.ts index b90320c328f0..f394f4291816 100644 --- a/lib/preview-web/src/docs-context/DocsContext.ts +++ b/lib/preview-web/src/docs-context/DocsContext.ts @@ -6,6 +6,7 @@ import { StoryName, } from '@storybook/csf'; import { CSFFile, ModuleExport, ModuleExports, Story, StoryStore } from '@storybook/store'; +import type { Channel } from '@storybook/channels'; import { DocsContextProps } from './DocsContextProps'; @@ -21,9 +22,7 @@ export class DocsContext implements DocsContext private primaryStory?: Story; constructor( - public readonly id: StoryId, - public readonly title: ComponentTitle, - public readonly name: StoryName, + public channel: Channel, protected store: StoryStore, public renderStoryToElement: DocsContextProps['renderStoryToElement'], /** The CSF files known (via the index) to be refererenced by this docs file */ diff --git a/lib/preview-web/src/docs-context/DocsContextProps.ts b/lib/preview-web/src/docs-context/DocsContextProps.ts index 5e548eaa7cc2..a82b2ee7f9aa 100644 --- a/lib/preview-web/src/docs-context/DocsContextProps.ts +++ b/lib/preview-web/src/docs-context/DocsContextProps.ts @@ -1,5 +1,6 @@ import type { StoryId, StoryName, AnyFramework, StoryContextForLoaders } from '@storybook/csf'; import type { ModuleExport, ModuleExports, Story } from '@storybook/store'; +import type { Channel } from '@storybook/channels'; export interface DocsContextProps { /** @@ -42,4 +43,9 @@ export interface DocsContextProps, element: HTMLElement) => () => Promise; + + /** + * Storybook channel -- use for low level event watching/emitting + */ + channel: Channel; } diff --git a/lib/preview-web/src/render/StandaloneDocsRender.ts b/lib/preview-web/src/render/StandaloneDocsRender.ts index 750291cc2a6c..8d1fae86ec92 100644 --- a/lib/preview-web/src/render/StandaloneDocsRender.ts +++ b/lib/preview-web/src/render/StandaloneDocsRender.ts @@ -71,13 +71,9 @@ export class StandaloneDocsRender implements Re throw new Error('Cannot render docs before preparing'); const docsContext = new DocsContext( - this.id, - this.entry.title, - this.entry.name, - + this.channel, this.store, renderStoryToElement, - this.csfFiles, false ); diff --git a/lib/preview-web/src/render/TemplateDocsRender.ts b/lib/preview-web/src/render/TemplateDocsRender.ts index fb2e2d31825c..eb359ae9cac3 100644 --- a/lib/preview-web/src/render/TemplateDocsRender.ts +++ b/lib/preview-web/src/render/TemplateDocsRender.ts @@ -88,13 +88,9 @@ export class TemplateDocsRender implements Rend if (!this.story || !this.csfFiles) throw new Error('Cannot render docs before preparing'); const docsContext = new DocsContext( - this.story.id, - this.entry.title, - this.entry.name, - + this.channel, this.store, renderStoryToElement, - this.csfFiles, true ); diff --git a/yarn.lock b/yarn.lock index 385ece5962cb..f98159860897 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9138,6 +9138,7 @@ __metadata: dependencies: "@storybook/addons": 7.0.0-alpha.13 "@storybook/channel-postmessage": 7.0.0-alpha.13 + "@storybook/channels": 7.0.0-alpha.13 "@storybook/client-logger": 7.0.0-alpha.13 "@storybook/core-events": 7.0.0-alpha.13 "@storybook/csf": 0.0.2--canary.4566f4d.1 From 775a947f8b580b40dbed0c0691e40515cd4d952c Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Fri, 15 Jul 2022 16:50:37 +1000 Subject: [PATCH 3/6] Ensure each preview has its own channel --- lib/blocks/package.json | 1 + lib/blocks/src/blocks/external/ExternalPreview.ts | 4 +++- lib/preview-web/src/Preview.tsx | 5 +---- yarn.lock | 1 + 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/lib/blocks/package.json b/lib/blocks/package.json index 62d89225c03a..f2909a36e7fd 100644 --- a/lib/blocks/package.json +++ b/lib/blocks/package.json @@ -42,6 +42,7 @@ }, "dependencies": { "@storybook/api": "7.0.0-alpha.13", + "@storybook/channels": "7.0.0-alpha.13", "@storybook/client-logger": "7.0.0-alpha.13", "@storybook/components": "7.0.0-alpha.13", "@storybook/core-events": "7.0.0-alpha.13", diff --git a/lib/blocks/src/blocks/external/ExternalPreview.ts b/lib/blocks/src/blocks/external/ExternalPreview.ts index 8f569faf12a6..bf0fcc48f5de 100644 --- a/lib/blocks/src/blocks/external/ExternalPreview.ts +++ b/lib/blocks/src/blocks/external/ExternalPreview.ts @@ -1,6 +1,8 @@ import { Preview } from '@storybook/preview-web'; import { Path, ModuleExports, StoryIndex, composeConfigs } from '@storybook/store'; import { AnyFramework, ComponentTitle, ProjectAnnotations } from '@storybook/csf'; +import { Channel } from '@storybook/channels'; + import { ExternalDocsContext } from './ExternalDocsContext'; type MetaExports = ModuleExports; @@ -31,7 +33,7 @@ export class ExternalPreview< private moduleExportsByImportPath: Record = {}; constructor(public projectAnnotations: ProjectAnnotations) { - super(); + super(new Channel()); this.initialize({ getStoryIndex: () => this.storyIndex, diff --git a/lib/preview-web/src/Preview.tsx b/lib/preview-web/src/Preview.tsx index fee48ac8d72e..496a6a8345f4 100644 --- a/lib/preview-web/src/Preview.tsx +++ b/lib/preview-web/src/Preview.tsx @@ -37,8 +37,6 @@ type MaybePromise = Promise | T; const STORY_INDEX_PATH = './index.json'; export class Preview { - channel: Channel; - serverChannel?: Channel; storyStore: StoryStore; @@ -53,8 +51,7 @@ export class Preview { previewEntryError?: Error; - constructor() { - this.channel = addons.getChannel(); + constructor(private channel: Channel = addons.getChannel()) { if (global.FEATURES?.storyStoreV7 && addons.hasServerChannel()) { this.serverChannel = addons.getServerChannel(); } diff --git a/yarn.lock b/yarn.lock index f98159860897..069d5ab4a31c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7817,6 +7817,7 @@ __metadata: "@digitak/esrun": ^3.2.2 "@storybook/addons": 7.0.0-alpha.13 "@storybook/api": 7.0.0-alpha.13 + "@storybook/channels": 7.0.0-alpha.13 "@storybook/client-logger": 7.0.0-alpha.13 "@storybook/components": 7.0.0-alpha.13 "@storybook/core-events": 7.0.0-alpha.13 From f16f84a1285fad7f93f6968201c926b1156b9992 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Fri, 15 Jul 2022 18:08:16 +1000 Subject: [PATCH 4/6] Fixes --- lib/blocks/src/blocks/mdx.tsx | 7 +++++-- lib/preview-web/src/Preview.tsx | 2 +- lib/preview-web/src/docs-context/DocsContext.ts | 10 ++-------- 3 files changed, 8 insertions(+), 11 deletions(-) diff --git a/lib/blocks/src/blocks/mdx.tsx b/lib/blocks/src/blocks/mdx.tsx index 19c864e3f74a..0ef6a3e89fd4 100644 --- a/lib/blocks/src/blocks/mdx.tsx +++ b/lib/blocks/src/blocks/mdx.tsx @@ -87,6 +87,7 @@ interface AnchorMdxProps { export const AnchorMdx: FC = (props) => { const { href, target, children, ...rest } = props; + const context = useContext(DocsContext); if (href) { // Enable scrolling for in-page anchors. @@ -103,7 +104,7 @@ export const AnchorMdx: FC = (props) => { event.preventDefault(); // use the A element's href, which has been modified for // local paths without a `?path=` query param prefix - navigate(event.currentTarget.getAttribute('href')); + navigate(context, event.currentTarget.getAttribute('href')); }} target={target} {...rest} @@ -156,6 +157,8 @@ const HeaderWithOcticonAnchor: FC = ({ children, ...rest }) => { + const context = useContext(DocsContext); + // @ts-ignore const OcticonHeader = OcticonHeaders[as]; const hash = `#${id}`; @@ -170,7 +173,7 @@ const HeaderWithOcticonAnchor: FC = ({ onClick={(event: SyntheticEvent) => { const element = document.getElementById(id); if (element) { - navigate(hash); + navigate(context, hash); } }} > diff --git a/lib/preview-web/src/Preview.tsx b/lib/preview-web/src/Preview.tsx index 496a6a8345f4..87aaaa65ec98 100644 --- a/lib/preview-web/src/Preview.tsx +++ b/lib/preview-web/src/Preview.tsx @@ -51,7 +51,7 @@ export class Preview { previewEntryError?: Error; - constructor(private channel: Channel = addons.getChannel()) { + constructor(protected channel: Channel = addons.getChannel()) { if (global.FEATURES?.storyStoreV7 && addons.hasServerChannel()) { this.serverChannel = addons.getServerChannel(); } diff --git a/lib/preview-web/src/docs-context/DocsContext.ts b/lib/preview-web/src/docs-context/DocsContext.ts index f394f4291816..ae1aa3e8b260 100644 --- a/lib/preview-web/src/docs-context/DocsContext.ts +++ b/lib/preview-web/src/docs-context/DocsContext.ts @@ -1,11 +1,5 @@ -import { - AnyFramework, - ComponentTitle, - StoryContextForLoaders, - StoryId, - StoryName, -} from '@storybook/csf'; -import { CSFFile, ModuleExport, ModuleExports, Story, StoryStore } from '@storybook/store'; +import type { AnyFramework, StoryContextForLoaders, StoryId, StoryName } from '@storybook/csf'; +import type { CSFFile, ModuleExport, ModuleExports, Story, StoryStore } from '@storybook/store'; import type { Channel } from '@storybook/channels'; import { DocsContextProps } from './DocsContextProps'; From 80c2a5cb8ef6cc2be96a887d641843067876ae05 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Mon, 18 Jul 2022 20:04:33 +1000 Subject: [PATCH 5/6] Fixes --- lib/preview-web/src/PreviewWeb.test.ts | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/lib/preview-web/src/PreviewWeb.test.ts b/lib/preview-web/src/PreviewWeb.test.ts index ada35229d58b..18df58a352f3 100644 --- a/lib/preview-web/src/PreviewWeb.test.ts +++ b/lib/preview-web/src/PreviewWeb.test.ts @@ -2120,7 +2120,7 @@ describe('PreviewWeb', () => { expect(preview.view.prepareForDocs).toHaveBeenCalled(); }); - it('render the docs container with the correct context', async () => { + it('render the docs container with the correct context, template render', async () => { document.location.search = '?id=component-one--a'; await createAndRenderPreview(); @@ -2132,16 +2132,10 @@ describe('PreviewWeb', () => { await waitForSetCurrentStory(); await waitForRender(); - expect(docsRenderer.render).toHaveBeenCalledWith( - expect.objectContaining({ - id: 'component-one--a', - title: 'Component One', - name: 'Docs', - }), - expect.any(Object), - 'docs-element', - expect.any(Function) - ); + expect(docsRenderer.render).toHaveBeenCalled(); + expect(docsRenderer.render.mock.calls[0][0].storyById()).toMatchObject({ + id: 'component-one--a', + }); }); it('emits DOCS_RENDERED', async () => { From bbecd18dd482ee158a406e00c331aa981b541e12 Mon Sep 17 00:00:00 2001 From: Tom Coleman Date: Mon, 18 Jul 2022 20:06:46 +1000 Subject: [PATCH 6/6] Fix stories that need channel --- .../stories/addon-docs/mdx.stories.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/examples/official-storybook/stories/addon-docs/mdx.stories.js b/examples/official-storybook/stories/addon-docs/mdx.stories.js index 837d4737ba05..74d30dc04933 100644 --- a/examples/official-storybook/stories/addon-docs/mdx.stories.js +++ b/examples/official-storybook/stories/addon-docs/mdx.stories.js @@ -2,6 +2,7 @@ import React from 'react'; import { DocsContainer } from '@storybook/addon-docs'; import { themes } from '@storybook/theming'; import { MDXProvider } from '@mdx-js/react'; +import { Channel } from '@storybook/channels'; import markdown from './markdown.stories.mdx'; import { defaultComponents } from '../../../../addons/docs/src/DocsRenderer'; @@ -11,6 +12,8 @@ export default { parameters: { layout: 'fullscreen' }, }; +const context = { channel: new Channel(), componentStories: () => [], storyById: () => ({}) }; + // The purpose of these stories are to document that MDX renders properly in docs itself // As tools like Chromatic cannot capture docs entries, we need to create a story that // actually renders it's own docs, much like the DocsRenderer might. @@ -22,9 +25,7 @@ export const Typography = () => { Typography.decorators = [ (storyFn) => ( - [], storyById: () => ({}) }}> - {storyFn()} - + {storyFn()} ), ]; @@ -37,10 +38,7 @@ export const DarkModeDocs = () => { DarkModeDocs.decorators = [ (storyFn) => ( - [], storyById: () => ({}) }} - theme={themes.dark} - > + {storyFn()}