From 04ffbe836fbcd02dd635d6221ca21801f3154a85 Mon Sep 17 00:00:00 2001
From: Tom Coleman <tom@chromatic.com>
Date: Thu, 14 Jul 2022 15:57:00 +1000
Subject: [PATCH] Remove uses of `AddContext`

---
 src/mdx2.test.ts     | 86 +++-----------------------------------------
 src/mdx2.ts          |  2 --
 src/sb-mdx-plugin.ts |  4 +--
 3 files changed, 6 insertions(+), 86 deletions(-)

diff --git a/src/mdx2.test.ts b/src/mdx2.test.ts
index ec3e8b3..0f4890d 100644
--- a/src/mdx2.test.ts
+++ b/src/mdx2.test.ts
@@ -42,8 +42,6 @@ describe('mdx2', () => {
       foo.parameters = { storySource: { source: '"bar"' } };
 
       const componentMeta = { title: 'foobar', includeStories: ['foo'] };
-
-      const mdxStoryNameToKey = { foo: 'foo' };
     `);
   });
 
@@ -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 || ({});
@@ -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;
@@ -119,11 +114,7 @@ describe('mdx2', () => {
 
         {3 + 3}
       `)
-    ).toMatchInlineSnapshot(`
-      const componentMeta = { includeStories: [] };
-
-      const mdxStoryNameToKey = {};
-    `);
+    ).toMatchInlineSnapshot(`const componentMeta = { includeStories: [] };`);
   });
 });
 
@@ -163,8 +154,6 @@ describe('docs-mdx-compiler-plugin', () => {
         },
         includeStories: ['componentNotes'],
       };
-
-      const mdxStoryNameToKey = { 'component notes': 'componentNotes' };
     `);
   });
 
@@ -191,8 +180,6 @@ describe('docs-mdx-compiler-plugin', () => {
         component: Button,
         includeStories: ['componentNotes'],
       };
-
-      const mdxStoryNameToKey = { 'component notes': 'componentNotes' };
     `);
   });
 
@@ -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_' };
     `);
   });
 
@@ -268,8 +253,6 @@ describe('docs-mdx-compiler-plugin', () => {
         ],
         includeStories: ['one'],
       };
-
-      const mdxStoryNameToKey = { one: 'one' };
     `);
   });
 
@@ -292,8 +275,6 @@ describe('docs-mdx-compiler-plugin', () => {
       __page.parameters = { docsOnly: true };
 
       const componentMeta = { title: 'docs-only', includeStories: ['__page'] };
-
-      const mdxStoryNameToKey = {};
     `);
   });
 
@@ -330,8 +311,6 @@ describe('docs-mdx-compiler-plugin', () => {
         ],
         includeStories: ['one'],
       };
-
-      const mdxStoryNameToKey = { one: 'one' };
     `);
   });
 
@@ -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 = {};
     `);
   });
 
@@ -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' };
     `);
   });
 
@@ -428,8 +403,6 @@ describe('docs-mdx-compiler-plugin', () => {
         component: Button,
         includeStories: ['componentNotes', 'storyNotes'],
       };
-
-      const mdxStoryNameToKey = { 'component notes': 'componentNotes', 'story notes': 'storyNotes' };
     `);
   });
 
@@ -479,8 +452,6 @@ describe('docs-mdx-compiler-plugin', () => {
         component: Button,
         includeStories: ['helloButton', 'two'],
       };
-
-      const mdxStoryNameToKey = { 'hello button': 'helloButton', two: 'two' };
     `);
   });
 
@@ -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' };
     `);
   });
 
@@ -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', () => {
@@ -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' };
     `);
   });
 
@@ -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',
-      };
     `);
   });
 
@@ -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' };
     `);
   });
 
@@ -676,8 +630,6 @@ describe('docs-mdx-compiler-plugin', () => {
       };
 
       const componentMeta = { includeStories: ['functionStory'] };
-
-      const mdxStoryNameToKey = { function: 'functionStory' };
     `);
   });
 
@@ -709,8 +661,6 @@ describe('docs-mdx-compiler-plugin', () => {
       };
 
       const componentMeta = { title: 'Multiple', includeStories: ['multipleChildren'] };
-
-      const mdxStoryNameToKey = { 'multiple children': 'multipleChildren' };
     `);
   });
 
@@ -756,8 +706,6 @@ describe('docs-mdx-compiler-plugin', () => {
       };
 
       const componentMeta = { title: 'MDX|Welcome', includeStories: ['toStorybook'] };
-
-      const mdxStoryNameToKey = { 'to storybook': 'toStorybook' };
     `);
   });
 
@@ -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', () => {
@@ -796,8 +740,6 @@ describe('docs-mdx-compiler-plugin', () => {
       __page.parameters = { docsOnly: true };
 
       const componentMeta = { title: \`\${titleFunction('template')}\`, includeStories: ['__page'] };
-
-      const mdxStoryNameToKey = {};
     `);
   });
 
@@ -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 () => {
@@ -856,8 +794,6 @@ describe('docs-mdx-compiler-plugin', () => {
         __page.parameters = { docsOnly: true };
 
         const componentMeta = { includeStories: ['__page'] };
-
-        const mdxStoryNameToKey = {};
       `);
     });
 
@@ -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' };
       `);
     });
 
@@ -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' };
       `);
     });
 
@@ -926,8 +858,6 @@ describe('docs-mdx-compiler-plugin', () => {
           render: (args) => <Button {...args} />,
           includeStories: ['basic'],
         };
-
-        const mdxStoryNameToKey = { Basic: 'basic' };
       `);
     });
 
@@ -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' };
       `);
     });
 
@@ -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' };
       `);
     });
   });
@@ -1011,8 +937,6 @@ describe('docs-mdx-compiler-plugin', () => {
       __page.parameters = { docsOnly: true };
 
       const componentMeta = { title: 'Example/Introduction', includeStories: ['__page'] };
-
-      const mdxStoryNameToKey = {};
     `);
   });
 });
diff --git a/src/mdx2.ts b/src/mdx2.ts
index 7c73279..4281710 100644
--- a/src/mdx2.ts
+++ b/src/mdx2.ts
@@ -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');
@@ -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,
diff --git a/src/sb-mdx-plugin.ts b/src/sb-mdx-plugin.ts
index 73b3bfe..e540510 100644
--- a/src/sb-mdx-plugin.ts
+++ b/src/sb-mdx-plugin.ts
@@ -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();