Add razzle-plugin-mdx

packages/create-razzle-app/lib/utils/copy-dir.js

@@ -16,8 +16,7 @@ module.exports = function copyDir(opts) {
   return new Promise(function(resolve, reject) {
     const stopCopySpinner = output.wait('Copying files');
 
-    fs
-      .copy(templatePath, projectPath)
+    fs.copy(templatePath, projectPath)
       .then(function() {
         return fs.move(
           path.resolve(projectPath, './gitignore'),

packages/razzle-plugin-mdx/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "env": {
+    "jest": true,
+    "node": true
+  }
+}

packages/razzle-plugin-mdx/README.md

@@ -0,0 +1,49 @@
+# razzle-plugin-mdx
+
+This package contains a plugin for using mdx with Razzle
+
+## Usage in Razzle Projects
+
+```
+npm i razzle-plugin-mdx
+```
+
+or
+
+```
+yarn add razzle-plugin-mdx
+```
+
+
+### Using the plugin with the default options
+
+```js
+// razzle.config.js
+
+module.exports = {
+  plugins: ['mdx'],
+};
+```
+
+### With custom options:
+
+```js
+// razzle.config.js
+const images = require('remark-images')
+const emoji = require('remark-emoji')
+
+module.exports = {
+  plugins: [
+    {
+      name: 'mdx',
+      options: {
+        mdPlugins: [images, emoji]
+      },
+    },
+  ],
+};
+```
+
+## Options
+
+Check all the options here: [mdx-js options](https://github.com/mdx-js/mdx#options).

packages/razzle-plugin-mdx/helpers.js

@@ -0,0 +1,12 @@
+'use strict';
+const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');
+
+const babelLoaderFinder = makeLoaderFinder('babel-loader');
+const fileLoaderFinder = makeLoaderFinder('file-loader');
+const mdxLoaderFinder = makeLoaderFinder('@mdx-js/loader');
+
+module.exports = {
+  fileLoaderFinder,
+  babelLoaderFinder,
+  mdxLoaderFinder,
+};

packages/razzle-plugin-mdx/index.js

@@ -0,0 +1,45 @@
+'use strict';
+
+const { babelLoaderFinder, fileLoaderFinder } = require('./helpers');
+
+const defaultOptions = {};
+
+function modify(baseConfig, { target, dev }, webpack, userOptions = {}) {
+  const options = Object.assign({}, defaultOptions, userOptions);
+  const config = Object.assign({}, baseConfig);
+
+  config.resolve.extensions = [...config.resolve.extensions, '.md', '.mdx'];
+
+  // Safely locate Babel-Loader in Razzle's webpack internals
+  const babelLoader = config.module.rules.find(babelLoaderFinder);
+  if (!babelLoader) {
+    throw new Error(`'babel-loader' required for nice 'MDX loader' work`);
+  }
+
+  // Don't import md and mdx files with file-loader
+  const fileLoader = config.module.rules.find(fileLoaderFinder);
+  fileLoader.exclude = [/\.mdx?$/, ...fileLoader.exclude];
+
+  // Get the correct `include` option, since that hasn't changed.
+  // This tells Razzle which directories to transform.
+  const { include } = babelLoader;
+
+  // Configure @mdx-js/loader
+  const mdxLoader = {
+    include,
+    test: /\.mdx?$/,
+    use: [
+      ...babelLoader.use,
+      {
+        loader: require.resolve('@mdx-js/loader'),
+        options: Object.assign({}, options.mdxLoader),
+      },
+    ],
+  };
+
+  config.module.rules.push(mdxLoader);
+
+  return config;
+}
+
+module.exports = modify;