MDX Deck Support (gatsbyjs#43)

experimental mdx-deck support
=======================

* [kitchen-sink] Switch away from gatsby-plugin-emotion (replace it with raw gatsby-ssr/browser) so we can avoid the babel plugin and use styled-components (a dependency of mdx-deck) on the same site
* Introduce the .deck-mdx extension (highly experimental but works for now? I wanted .deck.mdx but couldn't get it to work)
* [kitchen-sink] pages are now namespaced by filesystem source name (posts, slides, etc) to make it easier to identify when debugging

TODO:

- what cool stuff can we do for default components, default themes, custom themes, etc
- can we integrate the "save pdf" workflow from mdx-deck?
- more examples to fully test the integration

packages/gatsby-plugin-mdx/gatsby-node.js

@@ -24,12 +24,21 @@ exports.onCreateWebpackConfig = (
   const testPattern = new RegExp(
     options.extensions.map(ext => `${escapeStringRegexp(ext)}$`).join("|")
   );
+  const mdxTestPattern = new RegExp(
+    options.extensions
+      .concat(".deck-mdx")
+      .map(ext => `${escapeStringRegexp(ext)}$`)
+      .join("|")
+  );
+
+  const decks = options.decks.map(ext => `${escapeStringRegexp(ext)}`);
 
   actions.setWebpackConfig({
     module: {
       rules: [
         {
           test: testPattern,
+          exclude: decks,
           use: [
             loaders.js(),
             {
@@ -40,6 +49,23 @@ exports.onCreateWebpackConfig = (
               }
             }
           ]
+        },
+        {
+          test: mdxTestPattern,
+          include: decks,
+          use: [
+            loaders.js(),
+            { loader: "gatsby-mdx/mdx-deck-post-loader" },
+            { loader: "mdx-deck/loader" }
+          ]
+        },
+        {
+          test: /.deck-mdx$/,
+          use: [
+            loaders.js(),
+            { loader: "gatsby-mdx/mdx-deck-post-loader" },
+            { loader: "mdx-deck/loader" }
+          ]
         }
       ]
     },
@@ -56,7 +82,7 @@ exports.onCreateWebpackConfig = (
  * determines which files in the pages/ directory get built as pages.
  */
 exports.resolvableExtensions = (data, pluginOptions) =>
-  defaultOptions(pluginOptions).extensions;
+  defaultOptions(pluginOptions).extensions.concat(".deck-mdx");
 
 /**
  * Convert MDX to JSX so that Gatsby can extract the GraphQL queries.
@@ -68,7 +94,7 @@ exports.preprocessSource = async function preprocessSource(
   const { extensions, ...options } = defaultOptions(pluginOptions);
   const ext = path.extname(filename);
 
-  if (extensions.includes(ext)) {
+  if (extensions.includes(ext) || ext === ".deck-mdx") {
     const code = await mdx(contents, options);
     return code;
   }

packages/gatsby-plugin-mdx/mdx-deck-post-loader.js

@@ -0,0 +1,38 @@
+const { getOptions } = require("loader-utils");
+const debug = require("debug")("gatsby-mdx:mdx-deck-post-loader");
+
+const hasDefaultExport = str => /\nexport default/.test(str);
+
+module.exports = async function(content) {
+  const callback = this.async();
+  const { pluginOptions: options } = getOptions(this) || {};
+
+  const code = `import { SlideDeck } from 'mdx-deck'
+${content.replace("export default", "export const slides =")}
+
+// TODO: replace theme with a default theme and default components options?
+// if no theme is defined, set to undefined
+try {
+  theme
+} catch (e) {
+  var theme = undefined;
+}
+
+// if no components are defined, set to undefined
+try {
+  components
+} catch (e) {
+  var components = undefined;
+}
+
+export default () =>
+  <SlideDeck
+    slides={slides}
+    theme={theme}
+    components={components}
+    width='100vw'
+    height='100vh'
+  />`;
+
+  return callback(null, code);
+};