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

Update all source decorators to new format

Browse Source
This commit is contained in:
Tom Coleman 2023-02-06 15:11:21 +11:00
parent e5898db1d3
commit a8166ee56c
12 changed files with 122 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
code/addons/docs/docs/multiframework.md
View File

@ -129,7 +129,9 @@ export const jsxDecorator = (storyFn: any, context: StoryContext) => {
const options = {}; // retrieve from story parameters
const jsx = renderJsx(story, options);
channel.emit(SNIPPET_RENDERED, (context || {}).id, jsx);
const { id, args } = context;
channel.emit(SNIPPET_RENDERED, { id, args, source: jsx });
return story;
};

3
code/frameworks/angular/src/client/docs/sourceDecorator.ts
View File

@ -38,7 +38,8 @@ export const sourceDecorator = (
useEffect(() => {
if (toEmit) {
channel.emit(SNIPPET_RENDERED, context.id, toEmit, 'angular');
const { id, args } = context;
channel.emit(SNIPPET_RENDERED, { id, args, source: toEmit, format: 'angular' });
}
});

40
code/renderers/html/src/docs/sourceDecorator.test.ts
View File

@ -47,11 +47,11 @@ describe('sourceDecorator', () => {
const context = makeContext('args', { __isArgsStory: true }, {});
sourceDecorator(storyFn, context);
await tick();
expect(mockChannel.emit).toHaveBeenCalledWith(
SNIPPET_RENDERED,
'html-test--args',
'<div>args story</div>'
);
expect(mockChannel.emit).toHaveBeenCalledWith(SNIPPET_RENDERED, {
id: 'html-test--args',
args: {},
source: '<div>args story</div>',
});
});
it('should dedent source by default', async () => {
@ -63,11 +63,11 @@ describe('sourceDecorator', () => {
const context = makeContext('args', { __isArgsStory: true }, {});
sourceDecorator(storyFn, context);
await tick();
expect(mockChannel.emit).toHaveBeenCalledWith(
SNIPPET_RENDERED,
'html-test--args',
['<div>', ' args story', '</div>'].join('\n')
);
expect(mockChannel.emit).toHaveBeenCalledWith(SNIPPET_RENDERED, {
id: 'html-test--args',
args: {},
source: ['<div>', ' args story', '</div>'].join('\n'),
});
});
it('should skip dynamic rendering for no-args stories', async () => {
@ -98,11 +98,11 @@ describe('sourceDecorator', () => {
);
sourceDecorator(decoratedStoryFn, context);
await tick();
expect(mockChannel.emit).toHaveBeenCalledWith(
SNIPPET_RENDERED,
'html-test--args',
'<div>args story</div>'
);
expect(mockChannel.emit).toHaveBeenCalledWith(SNIPPET_RENDERED, {
id: 'html-test--args',
args: {},
source: '<div>args story</div>',
});
});
it('allows the snippet output to be modified by transformSource', async () => {
@ -112,11 +112,11 @@ describe('sourceDecorator', () => {
const context = makeContext('args', { __isArgsStory: true, docs }, {});
sourceDecorator(storyFn, context);
await tick();
expect(mockChannel.emit).toHaveBeenCalledWith(
SNIPPET_RENDERED,
'html-test--args',
'<p><div>args story</div></p>'
);
expect(mockChannel.emit).toHaveBeenCalledWith(SNIPPET_RENDERED, {
id: 'html-test--args',
args: {},
source: '<p><div>args story</div></p>',
});
});
it('provides the story context to transformSource', () => {

3
code/renderers/html/src/docs/sourceDecorator.ts
View File

@ -54,7 +54,8 @@ export function sourceDecorator(storyFn: PartialStoryFn<HtmlRenderer>, context:
}
}
useEffect(() => {
if (source) addons.getChannel().emit(SNIPPET_RENDERED, context.id, source);
const { id, args } = context;
if (source) addons.getChannel().emit(SNIPPET_RENDERED, { id, args, source });
});
return story;

57
code/renderers/react/src/docs/jsxDecorator.test.tsx
View File

@ -203,11 +203,11 @@ describe('jsxDecorator', () => {
const context = makeContext('args', { __isArgsStory: true }, {});
jsxDecorator(storyFn, context);
await new Promise((r) => setTimeout(r, 0));
expect(mockChannel.emit).toHaveBeenCalledWith(
SNIPPET_RENDERED,
'jsx-test--args',
'<div>\n args story\n</div>'
);
expect(mockChannel.emit).toHaveBeenCalledWith(SNIPPET_RENDERED, {
id: 'jsx-test--args',
args: {},
source: '<div>\n args story\n</div>',
});
});
it('should not render decorators when provided excludeDecorators parameter', async () => {
@ -231,11 +231,11 @@ describe('jsxDecorator', () => {
jsxDecorator(decoratedStoryFn, context);
await new Promise((r) => setTimeout(r, 0));
expect(mockChannel.emit).toHaveBeenCalledWith(
SNIPPET_RENDERED,
'jsx-test--args',
'<div>\n args story\n</div>'
);
expect(mockChannel.emit).toHaveBeenCalledWith(SNIPPET_RENDERED, {
id: 'jsx-test--args',
args: {},
source: '<div>\n args story\n</div>',
});
});
it('should skip dynamic rendering for no-args stories', async () => {
@ -255,11 +255,11 @@ describe('jsxDecorator', () => {
jsxDecorator(storyFn, context);
await new Promise((r) => setTimeout(r, 0));
expect(mockChannel.emit).toHaveBeenCalledWith(
SNIPPET_RENDERED,
'jsx-test--args',
'<p><div>\n args story\n</div></p>'
);
expect(mockChannel.emit).toHaveBeenCalledWith(SNIPPET_RENDERED, {
id: 'jsx-test--args',
args: {},
source: '<p><div>\n args story\n</div></p>',
});
});
it('provides the story context to transformSource', () => {
@ -286,11 +286,11 @@ describe('jsxDecorator', () => {
jsxDecorator(() => mdxElement, makeContext('mdx-args', { __isArgsStory: true }, {}));
await new Promise((r) => setTimeout(r, 0));
expect(mockChannel.emit).toHaveBeenCalledWith(
SNIPPET_RENDERED,
'jsx-test--mdx-args',
'<div className="foo" />'
);
expect(mockChannel.emit).toHaveBeenCalledWith(SNIPPET_RENDERED, {
id: 'jsx-test--mdx-args',
args: {},
source: '<div className="foo" />',
});
});
it('handles stories that trigger Suspense', async () => {
@ -314,12 +314,15 @@ describe('jsxDecorator', () => {
await new Promise((r) => setTimeout(r, 0));
expect(mockChannel.emit).toHaveBeenCalledTimes(2);
expect(mockChannel.emit).nthCalledWith(1, SNIPPET_RENDERED, 'jsx-test--args', '');
expect(mockChannel.emit).nthCalledWith(
2,
SNIPPET_RENDERED,
'jsx-test--args',
'<div>\n resolved args story\n</div>'
);
expect(mockChannel.emit).nthCalledWith(1, SNIPPET_RENDERED, {
id: 'jsx-test--args',
args: {},
source: '',
});
expect(mockChannel.emit).nthCalledWith(2, SNIPPET_RENDERED, {
id: 'jsx-test--args',
args: {},
source: '<div>\n resolved args story\n</div>',
});
});
});

8
code/renderers/react/src/docs/jsxDecorator.tsx
View File

@ -190,8 +190,12 @@ export const jsxDecorator = (
useEffect(() => {
if (!skip) {
const { id, args } = context || {};
channel.emit(SNIPPET_RENDERED, id, jsx, false, args);
const { id, args } = context;
channel.emit(SNIPPET_RENDERED, {
id,
source: jsx,
args,
});
}
});

3
code/renderers/svelte/src/docs/sourceDecorator.ts
View File

@ -157,7 +157,8 @@ export const sourceDecorator = (storyFn: any, context: StoryContext<Renderer>) =
useEffect(() => {
if (!skip && source) {
channel.emit(SNIPPET_RENDERED, (context || {}).id, source);
const { id, args } = context;
channel.emit(SNIPPET_RENDERED, { id, args, source });
}
});

8
code/renderers/vue/src/docs/sourceDecorator.ts
View File

@ -54,7 +54,13 @@ export const sourceDecorator = (storyFn: any, context: StoryContext) => {
// @ts-expect-error TS says it is called $vnode
const code = vnodeToString(storyNode._vnode);
channel.emit(SNIPPET_RENDERED, (context || {}).id, `<template>${code}</template>`, 'vue');
const { id, args } = context;
channel.emit(SNIPPET_RENDERED, {
id,
args,
source: `<template>${code}</template>`,
format: 'vue',
});
} catch (e) {
logger.warn(`Failed to generate dynamic story source: ${e}`);
}

3
code/renderers/vue3/src/docs/sourceDecorator.ts
View File

@ -289,7 +289,8 @@ export const sourceDecorator = (storyFn: any, context: StoryContext<Renderer>) =
useEffect(() => {
if (!skip && source) {
channel.emit(SNIPPET_RENDERED, (context || {}).id, source, 'vue');
const { id, args } = context;
channel.emit(SNIPPET_RENDERED, { id, args, source, format: 'vue' });
}
});

40
code/renderers/web-components/src/docs/sourceDecorator.test.ts
View File

@ -43,11 +43,11 @@ describe('sourceDecorator', () => {
const context = makeContext('args', { __isArgsStory: true }, {});
sourceDecorator(storyFn, context);
await tick();
expect(mockChannel.emit).toHaveBeenCalledWith(
SNIPPET_RENDERED,
'lit-test--args',
'<div>args story</div>'
);
expect(mockChannel.emit).toHaveBeenCalledWith(SNIPPET_RENDERED, {
id: 'lit-test--args',
args: {},
source: '<div>args story</div>',
});
});
it('should skip dynamic rendering for no-args stories', async () => {
@ -78,11 +78,11 @@ describe('sourceDecorator', () => {
);
sourceDecorator(decoratedStoryFn, context);
await tick();
expect(mockChannel.emit).toHaveBeenCalledWith(
SNIPPET_RENDERED,
'lit-test--args',
'<div>args story</div>'
);
expect(mockChannel.emit).toHaveBeenCalledWith(SNIPPET_RENDERED, {
id: 'lit-test--args',
args: {},
source: '<div>args story</div>',
});
});
it('allows the snippet output to be modified by transformSource', async () => {
@ -92,11 +92,11 @@ describe('sourceDecorator', () => {
const context = makeContext('args', { __isArgsStory: true, docs }, {});
sourceDecorator(storyFn, context);
await tick();
expect(mockChannel.emit).toHaveBeenCalledWith(
SNIPPET_RENDERED,
'lit-test--args',
'<p><div>args story</div></p>'
);
expect(mockChannel.emit).toHaveBeenCalledWith(SNIPPET_RENDERED, {
id: 'lit-test--args',
args: {},
source: '<p><div>args story</div></p>',
});
});
it('provides the story context to transformSource', () => {
@ -120,10 +120,10 @@ describe('sourceDecorator', () => {
const boundStoryFn = storyFn.bind(null, context.args);
sourceDecorator(boundStoryFn, context);
await tick();
expect(mockChannel.emit).toHaveBeenCalledWith(
SNIPPET_RENDERED,
'lit-test--args',
'<div>some content</div>'
);
expect(mockChannel.emit).toHaveBeenCalledWith(SNIPPET_RENDERED, {
id: 'lit-test--args',
args: { slot: 'some content' },
source: '<div>some content</div>',
});
});
});

3
code/renderers/web-components/src/docs/sourceDecorator.ts
View File

@ -43,7 +43,8 @@ export function sourceDecorator(
let source: string;
useEffect(() => {
if (source) addons.getChannel().emit(SNIPPET_RENDERED, context.id, source);
const { id, args } = context;
if (source) addons.getChannel().emit(SNIPPET_RENDERED, { id, source, args });
});
if (!skipSourceRender(context)) {
const container = window.document.createElement('div');

33
code/ui/blocks/src/blocks/SourceContainer.tsx
View File

@ -29,20 +29,39 @@ export interface SourceContextProps {
export const SourceContext: Context<SourceContextProps> = createContext({ sources: {} });
type SnippetRenderedEvent = {
id: StoryId;
source: string;
args?: Args;
format?: SyntaxHighlighterFormatTypes;
};
export const SourceContainer: FC<{ channel: Channel }> = ({ children, channel }) => {
const [sources, setSources] = useState<StorySources>({});
useEffect(() => {
const handleSnippetRendered = (
id: StoryId,
newSource: string,
format: SyntaxHighlighterFormatTypes = false,
args: Args
idOrEvent: StoryId | SnippetRenderedEvent,
inputSource: string = null,
inputFormat: SyntaxHighlighterFormatTypes = false
) => {
const hash = args ? argsHash(args) : '--default--';
const {
id,
args = undefined,
source,
format,
} = typeof idOrEvent === 'string'
? {
id: idOrEvent,
source: inputSource,
format: inputFormat,
}
: idOrEvent;
const hash = args ? argsHash(args) : '--unknown--';
// optimization: if the source is the same, ignore the incoming event
if (sources[id] && sources[id][hash] && sources[id][hash].code === newSource) {
if (sources[id] && sources[id][hash] && sources[id][hash].code === source) {
return;
}
@ -51,7 +70,7 @@ export const SourceContainer: FC<{ channel: Channel }> = ({ children, channel })
...current,
[id]: {
...current[id],
[hash]: { code: newSource, format },
[hash]: { code: source, format },
},
};