refactor(v2): shift to docusaurus/mdx-loader (#1339)

packages/docusaurus-mdx-loader/README.md

@@ -0,0 +1,48 @@
+# `@docusaurus/mdx-loader`
+
+Docusaurus webpack loader of [MDX](https://github.com/mdx-js/mdx)
+
+The extra idea here is to simplify things by adding prismjs syntax highlighting by default through https://github.com/mapbox/rehype-prism and add the prism css theme import directly.
+
+
+## Installation
+
+```sh
+yarn add @docusaurus/mdx-loader
+```
+
+## Usage
+```js
+
+// ...
+module: {
+  rules: [
+    // ...
+    {
+        test: /\.css$/,
+        // Make sure your webpack loader can import css files too
+    },
+    {
+      test: /\.mdx?$/,
+      use: [
+        'babel-loader',
+        {
+            loader: '@docuaurus/mdx-loader',
+            options: {
+                // .. See options
+            }
+        }
+      ]
+    }
+  ]
+}
+```
+
+## Options
+
+### `prismTheme`
+  - Default: `prism-themes/themes/prism-atom-dark.css`;
+
+This is the PrismJS theme CSS that will be imported. The supported themes are :
+- prismjs/themes/XXXXXX.css (See https://github.com/PrismJS/prism/tree/master/themes)
+- prism-themes/themes/XXXXXX.css (See https://github.com/PrismJS/prism-themes/tree/master/themes)

packages/docusaurus-mdx-loader/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@docusaurus/mdx-loader",
+  "version": "1.0.0",
+  "description": "Docusaurus Loader for MDX",
+  "main": "src/index.js",
+  "license": "MIT",
+  "dependencies": {
+    "@mapbox/rehype-prism": "^0.3.1",
+    "@mdx-js/mdx": "^1.0.0-rc.0",
+    "@mdx-js/react": "^1.0.0-rc.0",
+    "loader-utils": "^1.2.3",
+    "prism-themes": "^1.1.0",
+    "prismjs": "^1.16.0"
+  }
+}

packages/docusaurus-mdx-loader/src/index.js

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+const {getOptions} = require('loader-utils');
+const mdx = require('@mdx-js/mdx');
+const rehypePrism = require('@mapbox/rehype-prism');
+
+const DEFAULT_OPTIONS = {
+  rehypePlugins: [[rehypePrism, {ignoreMissing: true}]],
+  prismTheme: 'prism-themes/themes/prism-atom-dark.css',
+};
+
+module.exports = async function(content) {
+  const callback = this.async();
+
+  const options = Object.assign(DEFAULT_OPTIONS, getOptions(this), {
+    filepath: this.resourcePath,
+  });
+  let result;
+
+  try {
+    result = await mdx(content, options);
+  } catch (err) {
+    return callback(err);
+  }
+
+  const code = `
+  import React from 'react';
+  import { mdx } from '@mdx-js/react';
+  import '${options.prismTheme}';
+  ${result}
+  `;
+
+  return callback(null, code);
+};

packages/docusaurus-plugin-content-docs/package.json

@@ -7,8 +7,7 @@
   "dependencies": {
     "@babel/polyfill": "^7.4.0",
     "@docusaurus/utils": "^1.0.0",
-    "@mapbox/rehype-prism": "^0.3.1",
+    "@docusaurus/mdx-loader": "^1.0.0",
-    "@mdx-js/mdx": "^0.20.3",
     "front-matter": "^3.0.1",
     "fs-extra": "^7.0.1",
     "globby": "^9.1.0",
@@ -16,7 +15,6 @@
     "loader-utils": "^1.2.3"
   },
   "peerDependencies": {
-    "@docusaurus/core": "^2.0.0",
+    "@docusaurus/core": "^2.0.0"
-    "@mdx-js/tag": "^0.20.3"
   }
 }

packages/docusaurus-plugin-content-docs/src/index.js

@@ -9,7 +9,6 @@ const globby = require('globby');
 const importFresh = require('import-fresh');
 const path = require('path');
 const {getSubFolder, idx, normalizeUrl} = require('@docusaurus/utils');
-const rehypePrism = require('@mapbox/rehype-prism');
 
 const createOrder = require('./order');
 const loadSidebars = require('./sidebars');
@@ -246,6 +245,9 @@ class DocusaurusPluginContentDocs {
                   ],
                 },
               },
+              {
+                loader: '@docusaurus/mdx-loader',
+              },
               {
                 loader: path.resolve(__dirname, './markdown/index.js'),
                 options: {
@@ -254,7 +256,6 @@ class DocusaurusPluginContentDocs {
                   translatedDir,
                   docsDir: this.content.docsDir,
                   sourceToMetadata: this.content.sourceToMetadata,
-                  hastPlugins: [[rehypePrism, {ignoreMissing: true}]],
                 },
               },
             ],

packages/docusaurus-plugin-content-docs/src/markdown/index.js

@@ -6,7 +6,6 @@
  */
 
 const fm = require('front-matter');
-const mdx = require('@mdx-js/mdx');
 const {getOptions} = require('loader-utils');
 const path = require('path');
 const {resolve} = require('url');
@@ -74,25 +73,5 @@ module.exports = async function(fileString) {
     content = lines.join('\n');
   }
 
-  let result;
+  return callback(null, content);
-
-  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,7 +33,6 @@
     "@babel/preset-react": "^7.0.0",
     "@docusaurus/utils": "^1.0.0",
     "@hot-loader/react-dom": "^16.8.4",
-    "@mdx-js/tag": "^0.20.3",
     "babel-jest": "^24.1.0",
     "babel-loader": "^8.0.0",
     "babel-plugin-dynamic-import-node": "^2.2.0",
@@ -56,8 +55,6 @@
     "lodash": "^4.17.11",
     "mini-css-extract-plugin": "^0.4.1",
     "portfinder": "^1.0.13",
-    "prism-themes": "^1.1.0",
-    "prismjs": "^1.16.0",
     "react-dev-utils": "^8.0.0",
     "react-helmet": "^5.2.0",
     "react-hot-loader": "^4.8.2",

yarn.lock

@@ -36,6 +36,26 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
+"@babel/core@^7.2.2":
+  version "7.4.3"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.4.3.tgz#198d6d3af4567be3989550d97e068de94503074f"
+  integrity sha512-oDpASqKFlbspQfzAE7yaeTmdljSH2ADIvBlb0RwbStltTuWa0+7CCI1fYVINNv9saHPa1W7oaKeuNuKj+RQCvA==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/generator" "^7.4.0"
+    "@babel/helpers" "^7.4.3"
+    "@babel/parser" "^7.4.3"
+    "@babel/template" "^7.4.0"
+    "@babel/traverse" "^7.4.3"
+    "@babel/types" "^7.4.0"
+    convert-source-map "^1.1.0"
+    debug "^4.1.0"
+    json5 "^2.1.0"
+    lodash "^4.17.11"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
 "@babel/generator@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-beta.44.tgz#c7e67b9b5284afcf69b309b50d7d37f3e5033d42"
@@ -265,6 +285,15 @@
     "@babel/traverse" "^7.4.0"
     "@babel/types" "^7.4.0"
 
+"@babel/helpers@^7.4.3":
+  version "7.4.3"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.4.3.tgz#7b1d354363494b31cb9a2417ae86af32b7853a3b"
+  integrity sha512-BMh7X0oZqb36CfyhvtbSmcWc3GXocfxv3yNsAEuM0l+fAqSO22rQrUpijr3oE/10jCTrB6/0b9kzmG4VetCj8Q==
+  dependencies:
+    "@babel/template" "^7.4.0"
+    "@babel/traverse" "^7.4.3"
+    "@babel/types" "^7.4.0"
+
 "@babel/highlight@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.44.tgz#18c94ce543916a80553edcdcf681890b200747d5"
@@ -288,6 +317,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.4.2.tgz#b4521a400cb5a871eab3890787b4bc1326d38d91"
   integrity sha512-9fJTDipQFvlfSVdD/JBtkiY0br9BtfvW2R8wo6CX/Ej2eMuV0gWPk1M67Mt3eggQvBqYW1FCEk8BN7WvGm/g5g==
 
+"@babel/parser@^7.4.3":
+  version "7.4.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.4.3.tgz#eb3ac80f64aa101c907d4ce5406360fe75b7895b"
+  integrity sha512-gxpEUhTS1sGA63EGQGuA+WESPR/6tz6ng7tSHFCmaTJK/cGK8y37cBTspX+U2xCAue2IQVvF6Z0oigmjwD8YGQ==
+
 "@babel/plugin-proposal-async-generator-functions@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.2.0.tgz#b289b306669dce4ad20b0252889a15768c9d417e"
@@ -773,6 +807,21 @@
     globals "^11.1.0"
     lodash "^4.17.11"
 
+"@babel/traverse@^7.4.3":
+  version "7.4.3"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.4.3.tgz#1a01f078fc575d589ff30c0f71bf3c3d9ccbad84"
+  integrity sha512-HmA01qrtaCwwJWpSKpA948cBvU5BrmviAief/b3AVw936DtcdsTexlbyzNuDnthwhOQ37xshn7hvQaEQk7ISYQ==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/generator" "^7.4.0"
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/helper-split-export-declaration" "^7.4.0"
+    "@babel/parser" "^7.4.3"
+    "@babel/types" "^7.4.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.11"
+
 "@babel/types@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.44.tgz#6b1b164591f77dec0a0342aca995f2d046b3a757"
@@ -1575,10 +1624,10 @@
     refractor "^2.3.0"
     unist-util-visit "^1.1.3"
 
-"@mdx-js/mdx@^0.20.3":
+"@mdx-js/mdx@^1.0.0-rc.0":
-  version "0.20.3"
+  version "1.0.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-0.20.3.tgz#1f32b4a4a0cc176a3192ef51a0a3502cdfdca3f0"
+  resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.0.0-rc.0.tgz#c31c8dae9c08e6494018e0fde4a0d87a7364f7a8"
-  integrity sha512-IIlssEIPPAqo04krm270ifGjSVPqtTmjlryYGi8/4VXHCdi42l8v2piTJPo2NVc7J+HizY1uxxZb6AeoFsO/Iw==
+  integrity sha512-PpDmC9i1LJKAK/BNce75D8QZS05ccfVMJZKGalogvGw0b8R+vQcMBtlklbVOqk10oVBe1TYYbRdniOkt1ziHMw==
   dependencies:
     "@babel/plugin-proposal-object-rest-spread" "^7.3.2"
     "@babel/plugin-syntax-jsx" "^7.2.0"
@@ -1586,6 +1635,7 @@
     detab "^2.0.0"
     hast-util-raw "^5.0.0"
     mdast-util-to-hast "^4.0.0"
+    remark-mdx "^1.0.0-rc.0"
     remark-parse "^6.0.0"
     remark-squeeze-paragraphs "^3.0.1"
     to-style "^1.3.3"
@@ -1593,10 +1643,10 @@
     unist-builder "^1.0.1"
     unist-util-visit "^1.3.0"
 
-"@mdx-js/tag@^0.20.3":
+"@mdx-js/react@^1.0.0-rc.0":
-  version "0.20.3"
+  version "1.0.0-rc.0"
-  resolved "https://registry.yarnpkg.com/@mdx-js/tag/-/tag-0.20.3.tgz#9e2306040b6469248c45a5f5baf44d0014db0493"
+  resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-1.0.0-rc.0.tgz#1863287fe20a396c13280e155a29dbf9f8a40889"
-  integrity sha512-Co3gUFmNDv9z2LjuvLTpTj2NaOSHFxuoZjohcG0YK/KfECO+Ns9idzThMYjfEDe1vAf4c824rqlBYseedJdFNw==
+  integrity sha512-yE/eEUDBkdSdsSdXvantAn8Q6CdM+u2Nor2IRaN8Fe+p8IGpMfHqLFS3WSIZpodGB4PYUxRsGINDl7ITSZXQyg==
 
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
@@ -6962,7 +7012,7 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-alphabetical@^1.0.0:
+is-alphabetical@^1.0.0, is-alphabetical@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.2.tgz#1fa6e49213cb7885b75d15862fb3f3d96c884f41"
   integrity sha512-V0xN4BYezDHcBSKb1QHUFMlR4as/XEuCZBzMJUU4n7+Cbt33SmUnSol+pnXFvLxSHNq2CemUXNdaXV6Flg7+xg==
@@ -11270,6 +11320,19 @@ relateurl@0.2.x:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
+remark-mdx@^1.0.0-rc.0:
+  version "1.0.0-rc.0"
+  resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-1.0.0-rc.0.tgz#c6886f208bf7ca06368fd10a123106af7284dbac"
+  integrity sha512-hCh7/HV8aSGGWRudqThCXsxuu6j3FaXh5x2nfqLysm+50la2evldzXWxZmBU15WoNwTP5W4akXKFad+tMt1Eig==
+  dependencies:
+    "@babel/core" "^7.2.2"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-proposal-object-rest-spread" "^7.3.2"
+    "@babel/plugin-syntax-jsx" "^7.2.0"
+    is-alphabetical "^1.0.2"
+    remark-parse "^6.0.0"
+    unified "^7.0.0"
+
 remark-parse@^6.0.0:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-6.0.3.tgz#c99131052809da482108413f87b0ee7f52180a3a"