refactor(v2): mdx-loader (#1310)

packages/docusaurus/lib/core/App.js

@@ -13,9 +13,6 @@ import metadata from '@generated/metadata'; // eslint-disable-line
 import siteConfig from '@generated/docusaurus.config'; //eslint-disable-line
 import DocusaurusContext from '@docusaurus/context'; // eslint-disable-line
 
-// TODO: Allow choosing prismjs theme.
-import 'prismjs/themes/prism.css';
-
 function App() {
   const [context, setContext] = useState({});
   return (

packages/docusaurus/lib/load/config.js

@@ -98,8 +98,6 @@ function loadConfig(siteDir, deleteCache = true) {
   // e.g: if they want to include some.field so they can access it later from `props.siteConfig`.
   const {customFields = []} = config;
 
-  // TODO: Check that plugins mentioned exist.
-
   // Don't allow unrecognized fields.
   const allowedFields = [
     ...REQUIRED_FIELDS,

packages/docusaurus/lib/webpack/base.js

@@ -109,31 +109,10 @@ module.exports = function createBaseConfig(props, isServer) {
     .end();
   applyBabel(jsRule);
 
-  /*
-    Equivalent to:
-    // ...
-    {
-      test: /(\.mdx?)$/,
-      use: [
-        'babel-loader',
-        {
-          loader: '@mdx-js/loader',
-          options: { hastPlugins: [[rehypePrism, { ignoreMissing: true }]] }
-        },
-        'docusaurus/md-loader,
-      ]
-    }
-  */
   const mdRule = config.module.rule('markdown').test(/(\.mdx?)$/);
   applyBabel(mdRule);
   mdRule
-    .use('mdx-js-loader')
-    .loader('@mdx-js/loader')
-    .options({
-      hastPlugins: [[rehypePrism, {ignoreMissing: true}]],
-    });
-  mdRule
-    .use('docusaurus/md-loader')
+    .use('@docusaurus/mdx-loader')
     .loader(mdLoader)
     .options({
       siteConfig,
@@ -141,6 +120,7 @@ module.exports = function createBaseConfig(props, isServer) {
       translatedDir,
       docsDir,
       sourceToMetadata,
+      hastPlugins: [[rehypePrism, {ignoreMissing: true}]],
     });
 
   applyStyle(config.module.rule('css'), {

packages/docusaurus/lib/webpack/loaders/markdown/index.js

@@ -6,12 +6,16 @@
  */
 
 const fm = require('front-matter');
+const mdx = require('@mdx-js/mdx');
 const {getOptions} = require('loader-utils');
 const path = require('path');
 const {resolve} = require('url');
 
-module.exports = function(fileString) {
-  const options = getOptions(this);
+module.exports = async function(fileString) {
+  const callback = this.async();
+  const options = Object.assign({}, getOptions(this), {
+    filepath: this.resourcePath,
+  });
   const {versionedDir, docsDir, translatedDir, sourceToMetadata} = options;
 
   // Extract content of markdown (without frontmatter).
@@ -69,5 +73,26 @@ module.exports = function(fileString) {
     });
     content = lines.join('\n');
   }
-  return content;
+
+  let result;
+
+  try {
+    result = await mdx(content, options);
+  } catch (err) {
+    return callback(err);
+  }
+
+  // TODO: Allow choosing prismjs theme
+  // prismjs/themes/XXXXXX.css https://github.com/PrismJS/prism/tree/master/themes
+  // prism-themes/themes/XXXXXX.css https://github.com/PrismJS/prism-themes/tree/master/themes
+  const prismThemeImport = 'prism-themes/themes/prism-atom-dark.css';
+
+  const code = `
+  import React from 'react';
+  import { MDXTag } from '@mdx-js/tag';
+  import '${prismThemeImport}';
+  ${result}
+  `;
+
+  return callback(null, code);
 };

packages/docusaurus/package.json

@@ -33,8 +33,8 @@
     "@babel/preset-react": "^7.0.0",
     "@docusaurus/utils": "^1.0.0",
     "@mapbox/rehype-prism": "^0.3.1",
-    "@mdx-js/loader": "^0.20.1",
-    "@mdx-js/mdx": "^0.20.1",
+    "@mdx-js/mdx": "^0.20.3",
+    "@mdx-js/tag": "^0.20.3",
     "babel-jest": "^24.1.0",
     "babel-loader": "^8.0.0",
     "babel-plugin-dynamic-import-node": "^2.2.0",
@@ -54,6 +54,7 @@
     "lodash": "^4.17.11",
     "mini-css-extract-plugin": "^0.4.1",
     "portfinder": "^1.0.13",
+    "prism-themes": "^1.0.1",
     "prismjs": "^1.15.0",
     "react-dev-utils": "^8.0.0",
     "react-helmet": "^5.2.0",

yarn.lock

@@ -1565,16 +1565,7 @@
     refractor "^2.3.0"
     unist-util-visit "^1.1.3"
 
-"@mdx-js/loader@^0.20.1":
-  version "0.20.3"
-  resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-0.20.3.tgz#73c056ec3eef9f993cac28e9102898c8862f9def"
-  integrity sha512-rjJZ5bBTmRfrV6Wo4dAV7wBv5ChmpLJ+s/lziZ58F1NfijSSYq795qXrW+NMJAhBVr07lYp6FQrUJ3PsX2fHyw==
-  dependencies:
-    "@mdx-js/mdx" "^0.20.3"
-    "@mdx-js/tag" "^0.20.3"
-    loader-utils "^1.1.0"
-
-"@mdx-js/mdx@^0.20.1", "@mdx-js/mdx@^0.20.3":
+"@mdx-js/mdx@^0.20.3":
   version "0.20.3"
   resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-0.20.3.tgz#1f32b4a4a0cc176a3192ef51a0a3502cdfdca3f0"
   integrity sha512-IIlssEIPPAqo04krm270ifGjSVPqtTmjlryYGi8/4VXHCdi42l8v2piTJPo2NVc7J+HizY1uxxZb6AeoFsO/Iw==
@@ -10314,6 +10305,11 @@ pretty-time@^1.1.0:
   resolved "https://registry.yarnpkg.com/pretty-time/-/pretty-time-1.1.0.tgz#ffb7429afabb8535c346a34e41873adf3d74dd0e"
   integrity sha512-28iF6xPQrP8Oa6uxE6a1biz+lWeTOAPKggvjB8HAs6nVMKZwf5bG++632Dx614hIWgUPkgivRfG+a8uAXGTIbA==
 
+prism-themes@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/prism-themes/-/prism-themes-1.0.1.tgz#8e68972176f5e4fbc0859cd8e9474a0bbfaf2e41"
+  integrity sha512-tRYOqg2tT5/eB++iX+rqRnqESkCKuoV+0PrUiGKdWMr5lApd/hwfu+72Hi0OS50wmcuIty3GB1HrRqoBD+Cpfg==
+
 prismjs@^1.15.0, prismjs@~1.15.0:
   version "1.15.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.15.0.tgz#8801d332e472091ba8def94976c8877ad60398d9"