fix: import mdx stories by id and mdx exports refactor

ccontrols · Apr 14, 2020 · af8abf0 · af8abf0
1 parent 8174079
commit af8abf0
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 42 deletions.
diff --git a/core/instrument/src/babel/mdx-stories.ts b/core/instrument/src/babel/mdx-stories.ts
@@ -110,7 +110,7 @@ export const extractMDXStories = (
                 path.scope,
                 path,
               );
-              store.stories[name] = story;
+              store.stories[id] = story;
               if (exports) {
                 store.exports[id] = exports;
               }

diff --git a/core/instrument/src/index.ts b/core/instrument/src/index.ts
@@ -18,7 +18,7 @@ import { extractMDXStories } from './babel/mdx-stories';
 import { removeMDXAttributes } from './babel/remove-mdx-attributes';
 import { extractStoreComponent } from './babel/extract-component';
 import { packageInfo } from './misc/package-info';
-import { mdxFunctionExport, mdxPropertiesExport } from './misc/mdx-exports';
+import { extractStoryExports } from './misc/mdx-exports';
 import {
   InstrumentOptions,
   ParserOptions,
@@ -199,35 +199,10 @@ export const parseStories = async (
       mergedOptions,
     );
     const { stories, kinds, components, exports } = store;
+    const exportsSource = extractStoryExports(exports);
     let transformed = source;
-    if (transformMDX && exports) {
-      let defaultExportCode = '';
-      if (exports.default && exports.default.story) {
-        const expCode = mdxPropertiesExport(exports.default);
-        if (expCode) {
-          defaultExportCode = `export default { ${expCode} };`;
-        }
-      }
-
-      let storiesExports: string[] = [];
-      const expStories = Object.keys(exports).filter(id => id !== 'default');
-      if (expStories.length) {
-        for (const exportStory of expStories) {
-          const expFn = mdxFunctionExport(exportStory, exports[exportStory]);
-          if (expFn) {
-            storiesExports.push(expFn);
-          }
-          const expCode = mdxPropertiesExport(exports[exportStory]);
-          if (expCode) {
-            storiesExports.push(`${exportStory}.story = {
-                ${expCode}
-             }`);
-          }
-        }
-      }
-      transformed = `${renderer}\n${code}\n${defaultExportCode}\n${storiesExports.join(
-        '\n',
-      )}`;
+    if (transformMDX && exportsSource) {
+      transformed = `${renderer}\n${code}\n${exportsSource}`;
     }
     return {
       transformed,

diff --git a/core/instrument/src/misc/mdx-exports.ts b/core/instrument/src/misc/mdx-exports.ts
@@ -1,8 +1,6 @@
-import { ExportType } from '../types';
+import { ExportType, ExportTypes } from '../types';
 
-export const mdxPropertiesExport = (
-  exportType: ExportType,
-): string | undefined => {
+const mdxPropertiesExport = (exportType: ExportType): string | undefined => {
   return exportType && exportType.story
     ? `${Object.keys(exportType.story)
         //@ts-ignore
@@ -11,11 +9,45 @@ export const mdxPropertiesExport = (
     : undefined;
 };
 
-export const mdxFunctionExport = (
+const mdxFunctionExport = (
   name: string,
   exportType: ExportType,
 ): string | undefined => {
   return exportType && exportType.render
     ? `export const ${name} = ${exportType.render}`
     : undefined;
 };
+
+export const extractStoryExports = (exports?: ExportTypes): string => {
+  if (exports) {
+    const exportNames = Object.keys(exports);
+    if (exportNames.length) {
+      let defaultExportCode = '';
+      if (exports.default && exports.default.story) {
+        const expCode = mdxPropertiesExport(exports.default);
+        if (expCode) {
+          defaultExportCode = `export default { ${expCode} };`;
+        }
+      }
+
+      let storiesExports: string[] = [];
+      const expStories = Object.keys(exports).filter(id => id !== 'default');
+      if (expStories.length) {
+        for (const exportStory of expStories) {
+          const expFn = mdxFunctionExport(exportStory, exports[exportStory]);
+          if (expFn) {
+            storiesExports.push(expFn);
+          }
+          const expCode = mdxPropertiesExport(exports[exportStory]);
+          if (expCode) {
+            storiesExports.push(`${exportStory}.story = {
+                ${expCode}
+             }`);
+          }
+        }
+      }
+      return `${defaultExportCode}\n${storiesExports.join('\n')}`;
+    }
+  }
+  return 'result';
+};
diff --git a/core/instrument/src/types.ts b/core/instrument/src/types.ts
@@ -240,8 +240,9 @@ export interface ExportType {
     [key: string]: string;
   };
 }
+export interface ExportTypes {
+  [key: string]: ExportType;
+}
 export type ParseStorieReturnType = {
-  exports?: {
-    [key: string]: ExportType;
-  };
+  exports?: ExportTypes;
 } & StoriesStore;
diff --git a/examples/storybook-6-no-docs/.storybook/main.js b/examples/storybook-6-no-docs/.storybook/main.js
@@ -12,10 +12,10 @@ module.exports = {
     },  
   ],
   stories: [
-    '../../../ui/editors/src/**/*.stories.(js|tsx|mdx)',
-    '../../../ui/components/src/**/*.stories.(js|tsx|mdx)',
-    '../../../ui/blocks/src/**/*.stories.(js|tsx|mdx)',
-    '../../stories/src/**/*.stories.(js|tsx|mdx)',
+    //'../../../ui/editors/src/**/*.stories.(js|tsx|mdx)',
+    //'../../../ui/components/src/**/*.stories.(js|tsx|mdx)',
+    //'../../../ui/blocks/src/**/*.stories.(js|tsx|mdx)',
+    '../../stories/src/stories/smart-controls.stories.mdx',
   ],
   webpackFinal: async (config, { configType }) => {
     return {