fix: remove mdx attributes for source

ccontrols · Feb 19, 2020 · c9dccdc · c9dccdc
1 parent d0a39c8
commit c9dccdc
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 126 deletions.
diff --git a/core/instrument/package.json b/core/instrument/package.json
@@ -29,6 +29,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@babel/generator": "^7.8.4", 
     "@babel/parser": "^7.8.4",
     "@babel/traverse": "^7.8.4",
     "@mdx-js/loader": "^1.5.5",

diff --git a/core/instrument/src/babel/remove-mdx-attributes.ts b/core/instrument/src/babel/remove-mdx-attributes.ts
@@ -0,0 +1,10 @@
+export const removeMDXAttributes = () => {
+  return {
+    JSXAttribute: (path: any) => {
+      const node = path.node;
+      if (node.name && node.name.name === 'mdxType') {
+        path.remove();
+      }
+    },
+  };
+};
diff --git a/core/instrument/src/index.ts b/core/instrument/src/index.ts
@@ -1,8 +1,10 @@
 import * as parser from '@babel/parser';
 const mdx = require('@mdx-js/mdx');
 import traverse from '@babel/traverse';
+import generate from '@babel/generator';
 import { extractCSFStories } from './babel/csf-stories';
 import { extractMDXStories } from './babel/mdx-stories';
+import { removeMDXAttributes } from './babel/remove-mdx-attributes';
 import { StoriesGroup, Story } from './types';
 export * from './types';
 
@@ -51,5 +53,15 @@ export const parseCSF = async (source: string): Promise<StoriesGroup> => {
 
 export const parseMDX = async (source: string): Promise<StoriesGroup> => {
   const code = await mdx(source);
-  return parseSource(code, extractMDXStories);
+
+  const ast = parser.parse(code, {
+    sourceType: 'module',
+    plugins: ['jsx', 'typescript'],
+  });
+  traverse(ast, removeMDXAttributes());
+  const newCode = generate(ast, {
+    retainFunctionParens: true,
+    retainLines: true,
+  });
+  return parseSource(newCode.code, extractMDXStories);
 };
diff --git a/core/instrument/test/__snapshots__/mdx-story.test.js.snap b/core/instrument/test/__snapshots__/mdx-story.test.js.snap
@@ -17,20 +17,6 @@ Object {
       "name": "title",
       "value": "Storybook/MDX",
     },
-    Object {
-      "loc": Object {
-        "end": Object {
-          "column": 21,
-          "line": 22,
-        },
-        "start": Object {
-          "column": 7,
-          "line": 22,
-        },
-      },
-      "name": "mdxType",
-      "value": "Meta",
-    },
   ],
   "stories": Object {
     "story-with-props": Object {
@@ -52,7 +38,7 @@ Object {
       ],
       "location": Object {
         "end": Object {
-          "column": 39,
+          "column": 22,
           "line": 24,
         },
         "start": Object {
@@ -61,7 +47,7 @@ Object {
         },
       },
       "name": "story-with-props",
-      "source": "props => <Button mdxType=\\"Button\\" />",
+      "source": "props => <Button />",
     },
   },
   "title": "Storybook/MDX",
@@ -85,29 +71,15 @@ Object {
       "name": "title",
       "value": "Storybook/MDX",
     },
-    Object {
-      "loc": Object {
-        "end": Object {
-          "column": 21,
-          "line": 22,
-        },
-        "start": Object {
-          "column": 7,
-          "line": 22,
-        },
-      },
-      "name": "mdxType",
-      "value": "Meta",
-    },
   ],
   "stories": Object {
     "story-with-props": Object {
       "arguments": Array [
         Object {
           "loc": Object {
             "end": Object {
-              "column": 7,
-              "line": 30,
+              "column": 13,
+              "line": 29,
             },
             "start": Object {
               "column": 4,
@@ -119,8 +91,8 @@ Object {
             Object {
               "loc": Object {
                 "end": Object {
-                  "column": 9,
-                  "line": 28,
+                  "column": 16,
+                  "line": 27,
                 },
                 "start": Object {
                   "column": 14,
@@ -178,7 +150,7 @@ Object {
       ],
       "location": Object {
         "end": Object {
-          "column": 39,
+          "column": 16,
           "line": 30,
         },
         "start": Object {
@@ -190,10 +162,10 @@ Object {
       "source": "({
         name: {
           first,
-          last
-        },
-        age
-      }) => <Button mdxType=\\"Button\\" />",
+          last },
+
+        age }) =>
+      <Button />",
     },
   },
   "title": "Storybook/MDX",
@@ -217,20 +189,6 @@ Object {
       "name": "title",
       "value": "Storybook/MDX",
     },
-    Object {
-      "loc": Object {
-        "end": Object {
-          "column": 21,
-          "line": 22,
-        },
-        "start": Object {
-          "column": 7,
-          "line": 22,
-        },
-      },
-      "name": "mdxType",
-      "value": "Meta",
-    },
   ],
   "stories": Object {
     "story-with-props": Object {
@@ -266,7 +224,7 @@ Object {
       ],
       "location": Object {
         "end": Object {
-          "column": 50,
+          "column": 33,
           "line": 24,
         },
         "start": Object {
@@ -275,7 +233,7 @@ Object {
         },
       },
       "name": "story-with-props",
-      "source": "(props, context) => <Button mdxType=\\"Button\\" />",
+      "source": "(props, context) => <Button />",
     },
   },
   "title": "Storybook/MDX",
@@ -299,29 +257,15 @@ Object {
       "name": "title",
       "value": "Storybook/MDX",
     },
-    Object {
-      "loc": Object {
-        "end": Object {
-          "column": 21,
-          "line": 22,
-        },
-        "start": Object {
-          "column": 7,
-          "line": 22,
-        },
-      },
-      "name": "mdxType",
-      "value": "Meta",
-    },
   ],
   "stories": Object {
     "story-with-props": Object {
       "arguments": Array [
         Object {
           "loc": Object {
             "end": Object {
-              "column": 7,
-              "line": 27,
+              "column": 13,
+              "line": 26,
             },
             "start": Object {
               "column": 4,
@@ -363,7 +307,7 @@ Object {
       ],
       "location": Object {
         "end": Object {
-          "column": 39,
+          "column": 16,
           "line": 27,
         },
         "start": Object {
@@ -374,8 +318,8 @@ Object {
       "name": "story-with-props",
       "source": "({
         name: MyName,
-        age
-      }) => <Button mdxType=\\"Button\\" />",
+        age }) =>
+      <Button />",
     },
   },
   "title": "Storybook/MDX",
@@ -399,29 +343,15 @@ Object {
       "name": "title",
       "value": "Storybook/MDX",
     },
-    Object {
-      "loc": Object {
-        "end": Object {
-          "column": 21,
-          "line": 22,
-        },
-        "start": Object {
-          "column": 7,
-          "line": 22,
-        },
-      },
-      "name": "mdxType",
-      "value": "Meta",
-    },
   ],
   "stories": Object {
     "story-with-props": Object {
       "arguments": Array [
         Object {
           "loc": Object {
             "end": Object {
-              "column": 7,
-              "line": 27,
+              "column": 13,
+              "line": 26,
             },
             "start": Object {
               "column": 4,
@@ -463,7 +393,7 @@ Object {
       ],
       "location": Object {
         "end": Object {
-          "column": 39,
+          "column": 16,
           "line": 27,
         },
         "start": Object {
@@ -474,8 +404,8 @@ Object {
       "name": "story-with-props",
       "source": "({
         name,
-        age
-      }) => <Button mdxType=\\"Button\\" />",
+        age }) =>
+      <Button />",
     },
   },
   "title": "Storybook/MDX",
@@ -499,20 +429,6 @@ Object {
       "name": "title",
       "value": "Storybook/MDX",
     },
-    Object {
-      "loc": Object {
-        "end": Object {
-          "column": 21,
-          "line": 22,
-        },
-        "start": Object {
-          "column": 7,
-          "line": 22,
-        },
-      },
-      "name": "mdxType",
-      "value": "Meta",
-    },
   ],
   "stories": Object {
     "smart story": Object {
@@ -527,8 +443,8 @@ Object {
         },
       },
       "name": "smart story",
-      "source": "<Story name=\\"smart story\\" mdxType=\\"Story\\">
-  <Button mdxType=\\"Button\\" />
+      "source": "<Story name=\\"smart story\\">
+  <Button />
     </Story>",
     },
   },
@@ -553,20 +469,6 @@ Object {
       "name": "title",
       "value": "Storybook/MDX",
     },
-    Object {
-      "loc": Object {
-        "end": Object {
-          "column": 21,
-          "line": 22,
-        },
-        "start": Object {
-          "column": 7,
-          "line": 22,
-        },
-      },
-      "name": "mdxType",
-      "value": "Meta",
-    },
   ],
   "stories": Object {},
   "title": "Storybook/MDX",

diff --git a/integrations/storybook/.storybook/stories/smart-controls.stories.mdx b/integrations/storybook/.storybook/stories/smart-controls.stories.mdx
@@ -2,10 +2,10 @@ import {
   Story,
   Preview,
   Props,
-  Source,
+  Source as DocsSource,
   Meta,  
 } from '@storybook/addon-docs/blocks';
-import { ControlsEditorsTable } from '@component-controls/storybook';
+import { ControlsEditorsTable, Source } from '@component-controls/storybook';
 import Button from '../components/BaseButton';
 
 
@@ -15,6 +15,10 @@ import Button from '../components/BaseButton';
 
 <Story id="." />
 
+<Source id="." />
+
+<DocsSource id="." />
+
 <Props of={Button} />