Addon-docs: Fix MDX source string escaping (#7497)

Addon-docs: Fix MDX source string escaping

addons/docs/__snapshots__/mdx-compiler-plugin.test.js.snap

@@ -95,7 +95,7 @@ MDXContent.isMDXComponent = true;
 
 export const one = () => <Button>One</Button>;
 one.story = {};
-one.story.parameters = { mdxSource: \`<Button>One</Button>\` };
+one.story.parameters = { mdxSource: '<Button>One</Button>' };
 one.story.decorators = [storyFn => <div className=\\"local\\">{storyFn()}</div>];
 
 const componentMeta = {
@@ -166,12 +166,12 @@ MDXContent.isMDXComponent = true;
 
 export const one = () => <Button>One</Button>;
 one.story = {};
-one.story.parameters = { mdxSource: \`<Button>One</Button>\` };
+one.story.parameters = { mdxSource: '<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 = { mdxSource: '<Button>Hello button</Button>' };
 
 const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory'] };
 
@@ -240,15 +240,8 @@ export const toStorybook = () => ({
 toStorybook.story = {};
 toStorybook.story.name = 'to storybook';
 toStorybook.story.parameters = {
-  mdxSource: \`{
-  template: \\\\\`<storybook-welcome-component (showApp)=\\"showApp()\\"></storybook-welcome-component>\\\\\`,
-  props: {
-    showApp: linkTo('Button')
-  },
-  moduleMetadata: {
-    declarations: [Welcome]
-  }
-}\`,
+  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}',
 };
 
 const componentMeta = { title: 'MDX|Welcome', includeStories: ['toStorybook'] };
@@ -315,13 +308,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 = { mdxSource: '<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>\`,
+  mdxSource: '<Button>Story notes</Button>',
   ...{
     notes: 'story notes',
   },
@@ -398,11 +391,11 @@ 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 = { mdxSource: '<Button>Hello button</Button>' };
 
 export const two = () => <Button>Two</Button>;
 two.story = {};
-two.story.parameters = { mdxSource: \`<Button>Two</Button>\` };
+two.story.parameters = { mdxSource: '<Button>Two</Button>' };
 
 const componentMeta = {
   title: 'Button',
@@ -462,12 +455,12 @@ MDXContent.isMDXComponent = true;
 
 export const one = () => <Button>One</Button>;
 one.story = {};
-one.story.parameters = { mdxSource: \`<Button>One</Button>\` };
+one.story.parameters = { mdxSource: '<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 = { mdxSource: '<Button>Hello button</Button>' };
 
 const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory'] };
 
@@ -558,7 +551,7 @@ MDXContent.isMDXComponent = true;
 
 export const text = () => 'Plain text';
 text.story = {};
-text.story.parameters = { mdxSource: \`'Plain text'\` };
+text.story.parameters = { mdxSource: \\"'Plain text'\\" };
 
 const componentMeta = { title: 'Text', includeStories: ['text'] };
 

addons/docs/mdx-compiler-plugin.js

@@ -2,6 +2,7 @@ const mdxToJsx = require('@mdx-js/mdx/mdx-hast-to-jsx');
 const parser = require('@babel/parser');
 const generate = require('@babel/generator').default;
 const camelCase = require('lodash/camelCase');
+const jsStringEscape = require('js-string-escape');
 
 // Generate the MDX as is, but append named exports for every
 // story in the contents
@@ -73,13 +74,13 @@ function genStoryExport(ast, counter) {
 
   let parameters = getAttr(ast.openingElement, 'parameters');
   parameters = parameters && parameters.expression;
-  const source = `\`${storyCode.replace(/`/g, '\\`')}\``;
+  const source = jsStringEscape(storyCode);
   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 = { mdxSource: '${source}', ...${params} };`);
   } else {
-    statements.push(`${storyKey}.story.parameters = { mdxSource: ${source} };`);
+    statements.push(`${storyKey}.story.parameters = { mdxSource: '${source}' };`);
   }
 
   let decorators = getAttr(ast.openingElement, 'decorators');

addons/docs/package.json

@@ -35,6 +35,7 @@
     "@storybook/theming": "5.2.0-beta.3",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
+    "js-string-escape": "^1.0.1",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2"
   },

examples/official-storybook/stories/demo/button.stories.mdx

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import { action } from '@storybook/addon-actions';
+import { Button } from '@storybook/react/demo';
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+
+<Meta
+  title="Other|Demo/ButtonMdx"
+  parameters={{
+    component: Button,
+  }}
+/>
+
+# Simple Button
+
+## Hello
+
+<Story name="with text">
+  <Button onClick={action('clicked')}>Hello Button</Button>
+</Story>
+
+## Emoji
+
+<Story name="with some emoji">
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+</Story>
+
+## Counter w/ Code
+
+<Preview>
+  <Story name="with coumter">
+    {React.createElement(() => {
+      const [counter, setCounter] = useState(0);
+      const label = `Testing: ${counter}`;
+      return <Button onClick={() => setCounter(counter + 1)}>{label}</Button>;
+    })}
+  </Story>
+</Preview>

yarn.lock

@@ -17332,6 +17332,11 @@ js-levenshtein@^1.1.3:
   resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"
   integrity sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g==
 
+js-string-escape@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef"
+  integrity sha1-4mJbrbwNZ8dTPp7cEGjFh65BN+8=
+
 js-stringify@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/js-stringify/-/js-stringify-1.0.2.tgz#1736fddfd9724f28a3682adc6230ae7e4e9679db"