Merge pull request #10084 from storybookjs/7479-mdx-storysource-compat

MDX: Compile to improved source-loader format
storybookjs · Mar 10, 2020 · 1af0458 · 1af0458
2 parents 31fb729 + f2a5d55
commit 1af0458
Show file tree

Hide file tree

Showing 14 changed files with 56 additions and 26 deletions.
diff --git a/MIGRATION.md b/MIGRATION.md
@@ -9,6 +9,7 @@
     - [Changed Parameter Handling](#changed-parameter-handling)
   - [Simplified Render Context](#simplified-render-context)
   - [Story Store immutable outside of configuration](#story-store-immutable-outside-of-configuration)
+  - [Improved story source handling](#improved-story-source-handling)
 - [From version 5.2.x to 5.3.x](#from-version-52x-to-53x)
   - [To main.js configuration](#to-mainjs-configuration)
     - [Using main.js](#using-mainjs)
@@ -251,6 +252,33 @@ The `RenderContext` that is passed to framework rendering layers in order to ren
 
 You can no longer change the contents of the StoryStore outside of a `configure()` call. This is to ensure that any changes are properly published to the manager. If you want to add stories "out of band" you can call `store.startConfiguring()` and `store.finishConfiguring()` to ensure that your changes are published.
 
+### Improved story source handling
+
+The story source code handling has been improved in both `addon-storysource` and `addon-docs`.
+
+In 5.x some users used an undocumented _internal_ API, `mdxSource` to customize source snippetization in `addon-docs`. This has been removed in 6.0.
+
+The preferred way to customize source snippets for stories is now:
+
+```js
+export const Example = () => <Button />;
+Example.story = {
+  parameters: {
+    storySource: {
+      source: 'custom source',
+    },
+  },
+};
+```
+
+The MDX analog:
+
+```jsx
+<Story name="Example" parameters={{ storySource: { source: 'custom source' } }}>
+  <Button />
+</Story>
+```
+
 ## From version 5.2.x to 5.3.x
 
 ### To main.js configuration

diff --git a/addons/docs/src/blocks/Source.tsx b/addons/docs/src/blocks/Source.tsx
@@ -75,8 +75,8 @@ export const getSourceProps = (
       .map(sourceId => {
         const data = storyStore.fromId(sourceId);
         if (data && data.parameters) {
-          const { mdxSource, storySource } = data.parameters;
-          return mdxSource || (storySource && extract(sourceId, storySource));
+          const { storySource } = data.parameters;
+          return storySource && extract(sourceId, storySource);
         }
         return '';
       })

diff --git a/addons/docs/src/mdx/__testfixtures__/component-id.output.snapshot b/addons/docs/src/mdx/__testfixtures__/component-id.output.snapshot
@@ -35,7 +35,7 @@ MDXContent.isMDXComponent = true;
 export const componentNotes = () => <Button>Component notes</Button>;
 componentNotes.story = {};
 componentNotes.story.name = 'component notes';
-componentNotes.story.parameters = { mdxSource: '<Button>Component notes</Button>' };
+componentNotes.story.parameters = { storySource: { source: '<Button>Component notes</Button>' } };
 
 const componentMeta = { title: 'Button', id: 'button-id', includeStories: ['componentNotes'] };
 

diff --git a/addons/docs/src/mdx/__testfixtures__/decorators.output.snapshot b/addons/docs/src/mdx/__testfixtures__/decorators.output.snapshot
@@ -54,7 +54,7 @@ MDXContent.isMDXComponent = true;
 export const one = () => <Button>One</Button>;
 one.story = {};
 one.story.name = 'one';
-one.story.parameters = { mdxSource: '<Button>One</Button>' };
+one.story.parameters = { storySource: { source: '<Button>One</Button>' } };
 one.story.decorators = [storyFn => <div className=\\"local\\">{storyFn()}</div>];
 
 const componentMeta = {

diff --git a/addons/docs/src/mdx/__testfixtures__/non-story-exports.output.snapshot b/addons/docs/src/mdx/__testfixtures__/non-story-exports.output.snapshot
@@ -42,12 +42,12 @@ MDXContent.isMDXComponent = true;
 export const one = () => <Button>One</Button>;
 one.story = {};
 one.story.name = 'one';
-one.story.parameters = { mdxSource: '<Button>One</Button>' };
+one.story.parameters = { storySource: { source: '<Button>One</Button>' } };
 
 export const helloStory = () => <Button>Hello button</Button>;
 helloStory.story = {};
 helloStory.story.name = 'hello story';
-helloStory.story.parameters = { mdxSource: '<Button>Hello button</Button>' };
+helloStory.story.parameters = { storySource: { source: '<Button>Hello button</Button>' } };
 
 const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory'] };
 

diff --git a/addons/docs/src/mdx/__testfixtures__/parameters.output.snapshot b/addons/docs/src/mdx/__testfixtures__/parameters.output.snapshot
@@ -51,13 +51,13 @@ MDXContent.isMDXComponent = true;
 export const componentNotes = () => <Button>Component notes</Button>;
 componentNotes.story = {};
 componentNotes.story.name = 'component notes';
-componentNotes.story.parameters = { mdxSource: '<Button>Component notes</Button>' };
+componentNotes.story.parameters = { storySource: { source: '<Button>Component notes</Button>' } };
 
 export const storyNotes = () => <Button>Story notes</Button>;
 storyNotes.story = {};
 storyNotes.story.name = 'story notes';
 storyNotes.story.parameters = {
-  mdxSource: '<Button>Story notes</Button>',
+  storySource: { source: '<Button>Story notes</Button>' },
   ...{
     notes: 'story notes',
   },

diff --git a/addons/docs/src/mdx/__testfixtures__/previews.output.snapshot b/addons/docs/src/mdx/__testfixtures__/previews.output.snapshot
@@ -55,12 +55,12 @@ MDXContent.isMDXComponent = true;
 export const helloButton = () => <Button>Hello button</Button>;
 helloButton.story = {};
 helloButton.story.name = 'hello button';
-helloButton.story.parameters = { mdxSource: '<Button>Hello button</Button>' };
+helloButton.story.parameters = { storySource: { source: '<Button>Hello button</Button>' } };
 
 export const two = () => <Button>Two</Button>;
 two.story = {};
 two.story.name = 'two';
-two.story.parameters = { mdxSource: '<Button>Two</Button>' };
+two.story.parameters = { storySource: { source: '<Button>Two</Button>' } };
 
 const componentMeta = {
   title: 'Button',

diff --git a/addons/docs/src/mdx/__testfixtures__/story-def-text-only.output.snapshot b/addons/docs/src/mdx/__testfixtures__/story-def-text-only.output.snapshot
@@ -35,7 +35,7 @@ MDXContent.isMDXComponent = true;
 export const text = () => 'Plain text';
 text.story = {};
 text.story.name = 'text';
-text.story.parameters = { mdxSource: \\"'Plain text'\\" };
+text.story.parameters = { storySource: { source: \\"'Plain text'\\" } };
 
 const componentMeta = { title: 'Text', includeStories: ['text'] };
 

diff --git a/addons/docs/src/mdx/__testfixtures__/story-definitions.output.snapshot b/addons/docs/src/mdx/__testfixtures__/story-definitions.output.snapshot
@@ -45,22 +45,22 @@ MDXContent.isMDXComponent = true;
 export const one = () => <Button>One</Button>;
 one.story = {};
 one.story.name = 'one';
-one.story.parameters = { mdxSource: '<Button>One</Button>' };
+one.story.parameters = { storySource: { source: '<Button>One</Button>' } };
 
 export const helloStory = () => <Button>Hello button</Button>;
 helloStory.story = {};
 helloStory.story.name = 'hello story';
-helloStory.story.parameters = { mdxSource: '<Button>Hello button</Button>' };
+helloStory.story.parameters = { storySource: { source: '<Button>Hello button</Button>' } };
 
 export const wPunctuation = () => <Button>with punctuation</Button>;
 wPunctuation.story = {};
 wPunctuation.story.name = 'w/punctuation';
-wPunctuation.story.parameters = { mdxSource: '<Button>with punctuation</Button>' };
+wPunctuation.story.parameters = { storySource: { source: '<Button>with punctuation</Button>' } };
 
 export const _1FineDay = () => <Button>starts with number</Button>;
 _1FineDay.story = {};
 _1FineDay.story.name = '1 fine day';
-_1FineDay.story.parameters = { mdxSource: '<Button>starts with number</Button>' };
+_1FineDay.story.parameters = { storySource: { source: '<Button>starts with number</Button>' } };
 
 const componentMeta = {
   title: 'Button',

diff --git a/addons/docs/src/mdx/__testfixtures__/story-function-var.output.snapshot b/addons/docs/src/mdx/__testfixtures__/story-function-var.output.snapshot
@@ -39,7 +39,7 @@ MDXContent.isMDXComponent = true;
 export const basic = assertIsFn(basicFn);
 basic.story = {};
 basic.story.name = 'basic';
-basic.story.parameters = { mdxSource: 'basicFn' };
+basic.story.parameters = { storySource: { source: 'basicFn' } };
 
 const componentMeta = { title: 'story-function-var', includeStories: ['basic'] };
 

diff --git a/addons/docs/src/mdx/__testfixtures__/story-function.output.snapshot b/addons/docs/src/mdx/__testfixtures__/story-function.output.snapshot
@@ -42,8 +42,10 @@ export const functionStory = () => {
 functionStory.story = {};
 functionStory.story.name = 'function';
 functionStory.story.parameters = {
-  mdxSource:
-    \\"() => {\\\\n  const btn = document.createElement('button');\\\\n  btn.innerHTML = 'Hello Button';\\\\n  btn.addEventListener('click', action('Click'));\\\\n  return btn;\\\\n}\\",
+  storySource: {
+    source:
+      \\"() => {\\\\n  const btn = document.createElement('button');\\\\n  btn.innerHTML = 'Hello Button';\\\\n  btn.addEventListener('click', action('Click'));\\\\n  return btn;\\\\n}\\",
+  },
 };
 
 const componentMeta = { includeStories: ['functionStory'] };

diff --git a/addons/docs/src/mdx/__testfixtures__/story-object.output.snapshot b/addons/docs/src/mdx/__testfixtures__/story-object.output.snapshot
@@ -54,8 +54,10 @@ export const toStorybook = () => ({
 toStorybook.story = {};
 toStorybook.story.name = 'to storybook';
 toStorybook.story.parameters = {
-  mdxSource:
-    '{\\\\n  template: \`<storybook-welcome-component (showApp)=\\"showApp()\\"></storybook-welcome-component>\`,\\\\n  props: {\\\\n    showApp: linkTo(\\\\'Button\\\\')\\\\n  },\\\\n  moduleMetadata: {\\\\n    declarations: [Welcome]\\\\n  }\\\\n}',
+  storySource: {
+    source:
+      '{\\\\n  template: \`<storybook-welcome-component (showApp)=\\"showApp()\\"></storybook-welcome-component>\`,\\\\n  props: {\\\\n    showApp: linkTo(\\\\'Button\\\\')\\\\n  },\\\\n  moduleMetadata: {\\\\n    declarations: [Welcome]\\\\n  }\\\\n}',
+  },
 };
 
 const componentMeta = { title: 'MDX|Welcome', includeStories: ['toStorybook'] };

diff --git a/addons/docs/src/mdx/mdx-compiler-plugin.js b/addons/docs/src/mdx/mdx-compiler-plugin.js
@@ -94,12 +94,12 @@ function genStoryExport(ast, context) {
   let parameters = getAttr(ast.openingElement, 'parameters');
   parameters = parameters && parameters.expression;
   const source = jsStringEscape(storyCode);
+  const sourceParam = `storySource: { source: '${source}' }`;
   if (parameters) {
     const { code: params } = generate(parameters, {});
-    // FIXME: hack in the story's source as a parameter
-    statements.push(`${storyKey}.story.parameters = { mdxSource: '${source}', ...${params} };`);
+    statements.push(`${storyKey}.story.parameters = { ${sourceParam}, ...${params} };`);
   } else {
-    statements.push(`${storyKey}.story.parameters = { mdxSource: '${source}' };`);
+    statements.push(`${storyKey}.story.parameters = { ${sourceParam} };`);
   }
 
   let decorators = getAttr(ast.openingElement, 'decorators');

diff --git a/addons/storysource/src/StoryPanel.tsx b/addons/storysource/src/StoryPanel.tsx
@@ -58,8 +58,6 @@ export const StoryPanel: React.FC<StoryPanelProps> = ({ api }) => {
     if (story) {
       const {
         parameters: {
-          // @ts-ignore
-          mdxSource = '',
           // @ts-ignore
           storySource: { source, locationsMap } = { source: '', locationsMap: {} },
         } = {},
@@ -72,7 +70,7 @@ export const StoryPanel: React.FC<StoryPanelProps> = ({ api }) => {
             })
           ]
         : undefined;
-      setState({ source: source || mdxSource, locationsMap, currentLocation });
+      setState({ source, locationsMap, currentLocation });
     }
   }, [story ? story.id : null]);
   React.useEffect(() => {