feat: mdx|md transclusion

core/instrument/src/babel/extract-component.ts

@@ -84,26 +84,28 @@ export const extractStoreComponent = async (
 ) => {
   if (store.doc) {
     const doc: StoriesDoc = store.doc;
-    const componentNames = Object.keys(doc.components);
-    if (componentNames) {
-      for (const componentName of componentNames) {
-        const { component, componentPackage } = await extractComponent(
-          componentName,
-          filePath,
-          source,
-          options,
-          initialAST,
-        );
-        if (component) {
-          if (componentPackage) {
-            store.packages[componentPackage.fileHash] = componentPackage;
-            component.package = componentPackage.fileHash;
-          }
-          const componentKey = hashStoreId(
-            `${component.request ?? filePath}-${componentName}`,
+    if (doc.components) {
+      const componentNames = Object.keys(doc.components);
+      if (componentNames) {
+        for (const componentName of componentNames) {
+          const { component, componentPackage } = await extractComponent(
+            componentName,
+            filePath,
+            source,
+            options,
+            initialAST,
           );
-          store.components[componentKey] = component;
-          doc.components[componentName] = componentKey;
+          if (component) {
+            if (componentPackage) {
+              store.packages[componentPackage.fileHash] = componentPackage;
+              component.package = componentPackage.fileHash;
+            }
+            const componentKey = hashStoreId(
+              `${component.request ?? filePath}-${componentName}`,
+            );
+            store.components[componentKey] = component;
+            doc.components[componentName] = componentKey;
+          }
         }
       }
     }

core/instrument/src/babel/mdx-stories.ts

@@ -20,7 +20,7 @@ export const extractMDXStories = (props: any) => (
   ast: File,
   _options: Required<InstrumentOptions>,
   { source, filePath }: { source: string; filePath: string },
-): ParseStorieReturnType => {
+): ParseStorieReturnType | undefined => {
   const collectAttributes = (node: any): StoryParameters => {
     return node.attributes.reduce((acc: StoryParameters, attribute: any) => {
       if (attribute.value.type === 'StringLiteral') {
@@ -197,8 +197,8 @@ export const extractMDXStories = (props: any) => (
   if (store.doc && store.doc.title) {
     //@ts-ignore
     store.doc.components = components;
+    return store;
   } else {
-    throw new Error(`MDX documenation pages should have at least a title`);
+    return undefined;
   }
-  return store;
 };

core/instrument/src/index.ts

@@ -37,7 +37,7 @@ type TraverseFn = (
   ast: File,
   options: Required<InstrumentOptions>,
   more: { source: string; filePath: string },
-) => ParseStorieReturnType;
+) => ParseStorieReturnType | undefined;
 
 /**
  * Instrument a source file, with options
@@ -53,11 +53,14 @@ const parseSource = async (
   originalSource: string,
   filePath: string,
   options: Required<InstrumentOptions>,
-): Promise<ParseStorieReturnType> => {
+): Promise<ParseStorieReturnType | undefined> => {
   const source = await prettify(code, filePath, options.prettier);
   const ast = parser.parse(source, options.parser);
 
   const store = traverseFn(ast, options, { source, filePath });
+  if (!store) {
+    return undefined;
+  }
   if (store.doc) {
     const doc = store.doc;
     if (options.stories.storeSourceFile) {
@@ -117,7 +120,9 @@ const parseSource = async (
 };
 
 export { LoadingDocStore };
-export type ParseStoriesReturnType = { transformed: string } & LoadingDocStore;
+export type ParseStoriesReturnType = { transformed: string } & Partial<
+  LoadingDocStore
+>;
 /**
  * Parse and instrument a javascript, typescript or MDX file of stories
  * @param source Source of the file to be instrumented
@@ -178,7 +183,7 @@ export const parseStories = async (
       filePath,
       mergedOptions,
     );
-    const { stories, doc, components, exports, packages } = store;
+    const { stories, doc, components, exports, packages } = store || {};
     const exportsSource = extractStoryExports(exports);
     let transformed = `
     

core/instrument/src/misc/mdx-exports.ts

@@ -21,10 +21,15 @@ export const extractStoryExports = (exports?: MDXExportTypes): string => {
       if (exports.default) {
         const expCode = mdxPropertiesExport(exports.default);
         defaultExportCode = `
+        const dmsPageExport = MDXContent;
+        dmsPageExport.MDXPage = MDXContent;
 
-        export default { ${
-          expCode ? `...${expCode},` : ''
-        } MDXPage: MDXContent };`;
+        export default ${
+          expCode
+            ? `Object.assign(dmsPageExport, ${expCode});`
+            : 'dmsPageExport;'
+        }
+`;
       }
 
       let storiesExports: string[] = [];
@@ -45,5 +50,9 @@ export const extractStoryExports = (exports?: MDXExportTypes): string => {
       return `${defaultExportCode}\n${storiesExports.join('\n')}`;
     }
   }
-  return 'export default { MDXPage: () => <MDXContent /> };';
+  return `
+const dmsPageExport = MDXContent;
+dmsPageExport.MDXPage = MDXContent;
+export default  dmsPageExport;
+`;
 };

core/instrument/src/types.ts

@@ -40,7 +40,7 @@ import { mdx } from '@mdx-js/react';
 `;
 
 export const defaultMDXOptions: MDXOptions = {
-  test: /\.mdx$/,
+  test: /\.(mdx|md)$/i,
   renderer: DEFAULT_MDX_RENDERER,
 };
 

core/loader/src/loader.ts

@@ -21,15 +21,17 @@ module.exports.pitch = async function() {
   if (store) {
     if (store.doc) {
       console.log(chalk.bgRgb(244, 147, 66)('@loaded: '), filePath);
-      addStoriesDoc(filePath, {
-        stories: store.stories,
-        components: store.components,
-        packages: store.packages,
-        doc: {
-          ...store.doc,
-          fileName: filePath,
-        },
-      });
+      if (store.stories && store.components && store.packages) {
+        addStoriesDoc(filePath, {
+          stories: store.stories,
+          components: store.components,
+          packages: store.packages,
+          doc: {
+            ...store.doc,
+            fileName: filePath,
+          },
+        });
+      }
     }
   }
   return transformed;

core/webpack-configs/src/instrument/index.ts

@@ -15,7 +15,8 @@ export const instrument: Configuration = {
         ],
       },
       {
-        test: /\.(stories|story).mdx$/,
+        test: /\.(md|mdx)$/,
+        exclude: [/node_modules/],
         use: [
           {
             loader: 'babel-loader',
@@ -26,32 +27,21 @@ export const instrument: Configuration = {
               ],
             },
           },
-        ],
-      },
-      {
-        test: /\.mdx$/,
-        exclude: /\.(stories|story).mdx$/,
-        use: [
           {
-            loader: 'babel-loader',
+            loader: '@component-controls/loader/loader',
             options: {
-              presets: [
-                [require.resolve('@babel/preset-env'), { modules: 'commonjs' }],
-              ],
+              mdx: {
+                transformMDX: true,
+              },
             },
           },
         ],
       },
       {
-        test: /\.(story|stories).(js|jsx|ts|tsx|mdx)$/,
+        test: /\.(story|stories).(js|jsx|ts|tsx)$/,
         loader: '@component-controls/loader/loader',
         exclude: [/node_modules/],
         enforce: 'pre',
-        options: {
-          mdx: {
-            transformMDX: true,
-          },
-        },
       },
     ],
   },

core/webpack-configs/src/react/index.ts

@@ -41,7 +41,11 @@ export const react: Configuration = {
         ],
       },
       {
-        test: /\.mdx$/,
+        test: /\.txt$/i,
+        use: require.resolve('raw-loader'),
+      },
+      {
+        test: /\.(md|mdx)$/i,
         exclude: [/node_modules/],
         use: [
           {
@@ -64,14 +68,9 @@ export const react: Configuration = {
         ],
       },
       {
-        test: /\.(story|stories).(js|jsx|ts|tsx)$/,
+        test: /\.(story|stories|doc|docs).(js|jsx|ts|tsx)$/,
         loader: '@component-controls/loader/loader',
         exclude: [/node_modules/],
-        options: {
-          mdx: {
-            transformMDX: true,
-          },
-        },
       },
     ],
   },

examples/stories/src/sections/README.MD

@@ -0,0 +1,2 @@
+# Test for uppercase .MD markdown file
+

examples/stories/src/sections/transclusion.mdx

@@ -0,0 +1,2 @@
+# Transclusion sample section
+

examples/stories/src/tutorial/write-mdx-stories.mdx

@@ -0,0 +1,11 @@
+---
+title: Introduction/Writing mdx Stories
+type: tutorial
+---
+
+import Transclusion from '../sections/transclusion.mdx';
+import Readme from '../sections/README.MD';
+
+<Transclusion />
+
+<Readme />

yarn.lock

@@ -2737,7 +2737,7 @@
     mkdirp "^0.5.1"
     rimraf "^2.5.2"
 
-"@mdx-js/loader@^1.5.1", "@mdx-js/loader@^1.5.5":
+"@mdx-js/loader@^1.5.1", "@mdx-js/loader@^1.5.5", "@mdx-js/loader@^1.6.6":
   version "1.6.6"
   resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-1.6.6.tgz#de7438f3b18b097d66380f8698123a91c587a2f9"
   integrity sha512-9jTmXGf5DsVM3XFEX6eYuB8DzIRg2Qo13DHMS2uOBYjrU3w1AUa06Tzz/CnDYQcPSPxHCuRy+m0tMXmG2rQ4Xg==