Skip to content

Commit

Permalink
Merge pull request #14 from storybookjs/7.0-remove-addContext
Browse files Browse the repository at this point in the history 
Remove uses of `AddContext`
  • Loading branch information
@shilman
shilman authored Oct 15, 2022
2 parents d607151 + 04ffbe8 commit 3e908ff
Show file tree
Hide file tree
Showing 3 changed files with 6 additions and 86 deletions.
86 changes: 5 additions & 81 deletions src/mdx2.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,6 @@ describe('mdx2', () => {
foo.parameters = { storySource: { source: '"bar"' } };
const componentMeta = { title: 'foobar', includeStories: ['foo'] };
const mdxStoryNameToKey = { foo: 'foo' };
`);
});

Expand All @@ -60,7 +58,6 @@ describe('mdx2', () => {
// @ts-ignore
expect(compileSync(input)).toMatchInlineSnapshot(`
/*@jsxRuntime automatic @jsxImportSource react*/
import { assertIsFn, AddContext } from "@storybook/addon-docs";
import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime";
function MDXContent(props = {}) {
const {wrapper: MDXLayout} = props.components || ({});
Expand Down Expand Up @@ -100,12 +97,10 @@ describe('mdx2', () => {
const componentMeta = { title: 'foobar', includeStories: ["foo"], };
const mdxStoryNameToKey = {"foo":"foo"};
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
...(componentMeta.parameters.docs || {}),
page: () => <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentAnnotations={componentMeta}><MDXContent /></AddContext>,
page: () => <MDXContent />,
};
export default componentMeta;
Expand All @@ -119,11 +114,7 @@ describe('mdx2', () => {
{3 + 3}
`)
).toMatchInlineSnapshot(`
const componentMeta = { includeStories: [] };
const mdxStoryNameToKey = {};
`);
).toMatchInlineSnapshot(`const componentMeta = { includeStories: [] };`);
});
});

Expand Down Expand Up @@ -163,8 +154,6 @@ describe('docs-mdx-compiler-plugin', () => {
},
includeStories: ['componentNotes'],
};
const mdxStoryNameToKey = { 'component notes': 'componentNotes' };
`);
});

Expand All @@ -191,8 +180,6 @@ describe('docs-mdx-compiler-plugin', () => {
component: Button,
includeStories: ['componentNotes'],
};
const mdxStoryNameToKey = { 'component notes': 'componentNotes' };
`);
});

Expand Down Expand Up @@ -225,8 +212,6 @@ describe('docs-mdx-compiler-plugin', () => {
_Foo_.storyName = 'renamed';
const componentMeta = { title: 'MDX/CSF imports', includeStories: ['_Basic_', '_Other_', '_Foo_'] };
const mdxStoryNameToKey = { _Basic_: '_Basic_', _Other_: '_Other_', renamed: '_Foo_' };
`);
});

Expand Down Expand Up @@ -268,8 +253,6 @@ describe('docs-mdx-compiler-plugin', () => {
],
includeStories: ['one'],
};
const mdxStoryNameToKey = { one: 'one' };
`);
});

Expand All @@ -292,8 +275,6 @@ describe('docs-mdx-compiler-plugin', () => {
__page.parameters = { docsOnly: true };
const componentMeta = { title: 'docs-only', includeStories: ['__page'] };
const mdxStoryNameToKey = {};
`);
});

Expand Down Expand Up @@ -330,8 +311,6 @@ describe('docs-mdx-compiler-plugin', () => {
],
includeStories: ['one'],
};
const mdxStoryNameToKey = { one: 'one' };
`);
});

Expand All @@ -350,8 +329,6 @@ describe('docs-mdx-compiler-plugin', () => {
__page.parameters = { docsOnly: true };
const componentMeta = { title: "Addons/Docs/what's in a title?", includeStories: ['__page'] };
const mdxStoryNameToKey = {};
`);
});

Expand Down Expand Up @@ -385,8 +362,6 @@ describe('docs-mdx-compiler-plugin', () => {
helloStory.parameters = { storySource: { source: '<Button>{"Hello button"}</Button>' } };
const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory'] };
const mdxStoryNameToKey = { one: 'one', 'hello story': 'helloStory' };
`);
});

Expand Down Expand Up @@ -428,8 +403,6 @@ describe('docs-mdx-compiler-plugin', () => {
component: Button,
includeStories: ['componentNotes', 'storyNotes'],
};
const mdxStoryNameToKey = { 'component notes': 'componentNotes', 'story notes': 'storyNotes' };
`);
});

Expand Down Expand Up @@ -479,8 +452,6 @@ describe('docs-mdx-compiler-plugin', () => {
component: Button,
includeStories: ['helloButton', 'two'],
};
const mdxStoryNameToKey = { 'hello button': 'helloButton', two: 'two' };
`);
});

Expand Down Expand Up @@ -522,8 +493,6 @@ describe('docs-mdx-compiler-plugin', () => {
componentNotes.parameters = { storySource: { source: 'args => <Button>Component notes</Button>' } };
const componentMeta = { title: 'Button', includeStories: ['componentNotes'] };
const mdxStoryNameToKey = { 'component notes': 'componentNotes' };
`);
});

Expand All @@ -536,11 +505,7 @@ describe('docs-mdx-compiler-plugin', () => {
<Story id="." />
`)
).toMatchInlineSnapshot(`
const componentMeta = { includeStories: [] };
const mdxStoryNameToKey = {};
`);
).toMatchInlineSnapshot(`const componentMeta = { includeStories: [] };`);
});

it('story-def-text-only.mdx', () => {
Expand All @@ -560,8 +525,6 @@ describe('docs-mdx-compiler-plugin', () => {
text.parameters = { storySource: { source: '"Plain text"' } };
const componentMeta = { title: 'Text', includeStories: ['text'] };
const mdxStoryNameToKey = { text: 'text' };
`);
});

Expand Down Expand Up @@ -612,13 +575,6 @@ describe('docs-mdx-compiler-plugin', () => {
title: 'Button',
includeStories: ['one', 'helloStory', 'wPunctuation', '_1FineDay'],
};
const mdxStoryNameToKey = {
one: 'one',
'hello story': 'helloStory',
'w/punctuation': 'wPunctuation',
'1 fine day': '_1FineDay',
};
`);
});

Expand All @@ -643,8 +599,6 @@ describe('docs-mdx-compiler-plugin', () => {
basic.parameters = { storySource: { source: 'basicFn' } };
const componentMeta = { title: 'story-function-var', includeStories: ['basic'] };
const mdxStoryNameToKey = { basic: 'basic' };
`);
});

Expand Down Expand Up @@ -676,8 +630,6 @@ describe('docs-mdx-compiler-plugin', () => {
};
const componentMeta = { includeStories: ['functionStory'] };
const mdxStoryNameToKey = { function: 'functionStory' };
`);
});

Expand Down Expand Up @@ -709,8 +661,6 @@ describe('docs-mdx-compiler-plugin', () => {
};
const componentMeta = { title: 'Multiple', includeStories: ['multipleChildren'] };
const mdxStoryNameToKey = { 'multiple children': 'multipleChildren' };
`);
});

Expand Down Expand Up @@ -756,8 +706,6 @@ describe('docs-mdx-compiler-plugin', () => {
};
const componentMeta = { title: 'MDX|Welcome', includeStories: ['toStorybook'] };
const mdxStoryNameToKey = { 'to storybook': 'toStorybook' };
`);
});

Expand All @@ -770,11 +718,7 @@ describe('docs-mdx-compiler-plugin', () => {
<Story id="welcome--welcome" />
`)
).toMatchInlineSnapshot(`
const componentMeta = { includeStories: [] };
const mdxStoryNameToKey = {};
`);
).toMatchInlineSnapshot(`const componentMeta = { includeStories: [] };`);
});

it('title-template-string.mdx', () => {
Expand All @@ -796,8 +740,6 @@ describe('docs-mdx-compiler-plugin', () => {
__page.parameters = { docsOnly: true };
const componentMeta = { title: \`\${titleFunction('template')}\`, includeStories: ['__page'] };
const mdxStoryNameToKey = {};
`);
});

Expand All @@ -812,11 +754,7 @@ describe('docs-mdx-compiler-plugin', () => {
<Button>Hello button</Button>
`)
).toMatchInlineSnapshot(`
const componentMeta = { includeStories: [] };
const mdxStoryNameToKey = {};
`);
).toMatchInlineSnapshot(`const componentMeta = { includeStories: [] };`);
});

it('errors on missing story props', async () => {
Expand Down Expand Up @@ -856,8 +794,6 @@ describe('docs-mdx-compiler-plugin', () => {
__page.parameters = { docsOnly: true };
const componentMeta = { includeStories: ['__page'] };
const mdxStoryNameToKey = {};
`);
});

Expand All @@ -879,8 +815,6 @@ describe('docs-mdx-compiler-plugin', () => {
basic.parameters = { storySource: { source: '<Button>{"Basic"}</Button>' } };
const componentMeta = { component: Button, includeStories: ['basic'] };
const mdxStoryNameToKey = { Basic: 'basic' };
`);
});

Expand All @@ -900,8 +834,6 @@ describe('docs-mdx-compiler-plugin', () => {
basic.parameters = { storySource: { source: '{}' } };
const componentMeta = { title: 'Button', component: Button, includeStories: ['basic'] };
const mdxStoryNameToKey = { Basic: 'basic' };
`);
});

Expand All @@ -926,8 +858,6 @@ describe('docs-mdx-compiler-plugin', () => {
render: (args) => <Button {...args} />,
includeStories: ['basic'],
};
const mdxStoryNameToKey = { Basic: 'basic' };
`);
});

Expand All @@ -948,8 +878,6 @@ describe('docs-mdx-compiler-plugin', () => {
basic.render = (args) => <Button {...args} />;
const componentMeta = { title: 'Button', component: Button, includeStories: ['basic'] };
const mdxStoryNameToKey = { Basic: 'basic' };
`);
});

Expand All @@ -970,8 +898,6 @@ describe('docs-mdx-compiler-plugin', () => {
basic.play = () => console.log('play');
const componentMeta = { title: 'Button', component: Button, includeStories: ['basic'] };
const mdxStoryNameToKey = { Basic: 'basic' };
`);
});
});
Expand Down Expand Up @@ -1011,8 +937,6 @@ describe('docs-mdx-compiler-plugin', () => {
__page.parameters = { docsOnly: true };
const componentMeta = { title: 'Example/Introduction', includeStories: ['__page'] };
const mdxStoryNameToKey = {};
`);
});
});
2 changes: 0 additions & 2 deletions src/mdx2.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,6 @@ function extractExports(root: t.File, options: CompilerOptions) {
const fullJsx = [
...storyExports,
`const componentMeta = ${stringifyMeta(metaExport)};`,
`const mdxStoryNameToKey = ${JSON.stringify(context.storyNameToKey)};`,
wrapperJs,
'export default componentMeta;',
].join('\n\n');
Expand All @@ -121,7 +120,6 @@ export const postprocess = (code: string, extractedExports: string) => {

return [
first,
'import { assertIsFn, AddContext } from "@storybook/addon-docs";',
...lines.filter((line) => !line.match(/^export default/)),
SEPARATOR,
extractedExports,
Expand Down
4 changes: 1 addition & 3 deletions src/sb-mdx-plugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -314,13 +314,11 @@ export function genMeta(ast: t.JSXElement, options: CompilerOptions) {
};
}

// insert `mdxStoryNameToKey` and `mdxComponentMeta` into the context so that we
// can reconstruct the Story ID dynamically from the `name` at render time
export const wrapperJs = `
componentMeta.parameters = componentMeta.parameters || {};
componentMeta.parameters.docs = {
...(componentMeta.parameters.docs || {}),
page: () => <AddContext mdxStoryNameToKey={mdxStoryNameToKey} mdxComponentAnnotations={componentMeta}><MDXContent /></AddContext>,
page: () => <MDXContent />,
};
`.trim();

Expand Down

0 comments on commit 3e908ff

Please sign in to comment.