From ad25c6bb14d8f7122a9970ec03fe983f11d59cce Mon Sep 17 00:00:00 2001
From: Ivakhnenko Dmitry <jeetiss@yandex.ru>
Date: Sun, 26 Aug 2018 02:33:02 +0300
Subject: [PATCH] Mdx plugin improvements (#732)

* resolving path to @mdx-js/tag, fix loader options

* del peerDep, improve readme

* add example
---
 examples/with-mdx/.gitignore            | 10 +++++++
 examples/with-mdx/package.json          | 18 ++++++++++++
 examples/with-mdx/razzle.config.js      | 14 +++++++++
 examples/with-mdx/readme.md             |  8 ++++++
 examples/with-mdx/src/App.js            |  4 +++
 examples/with-mdx/src/client.js         |  9 ++++++
 examples/with-mdx/src/example.md        |  3 ++
 examples/with-mdx/src/index.js          | 21 ++++++++++++++
 examples/with-mdx/src/server.js         | 38 +++++++++++++++++++++++++
 packages/razzle-plugin-mdx/README.md    |  4 +--
 packages/razzle-plugin-mdx/index.js     |  9 ++++--
 packages/razzle-plugin-mdx/package.json |  3 --
 12 files changed, 134 insertions(+), 7 deletions(-)
 create mode 100644 examples/with-mdx/.gitignore
 create mode 100644 examples/with-mdx/package.json
 create mode 100644 examples/with-mdx/razzle.config.js
 create mode 100644 examples/with-mdx/readme.md
 create mode 100644 examples/with-mdx/src/App.js
 create mode 100644 examples/with-mdx/src/client.js
 create mode 100644 examples/with-mdx/src/example.md
 create mode 100644 examples/with-mdx/src/index.js
 create mode 100644 examples/with-mdx/src/server.js

diff --git a/examples/with-mdx/.gitignore b/examples/with-mdx/.gitignore
new file mode 100644
index 000000000..13d409785
--- /dev/null
+++ b/examples/with-mdx/.gitignore
@@ -0,0 +1,10 @@
+logs
+*.log
+npm-debug.log*
+.DS_Store
+
+coverage
+node_modules
+build
+public/static
+.env.*.local
\ No newline at end of file
diff --git a/examples/with-mdx/package.json b/examples/with-mdx/package.json
new file mode 100644
index 000000000..bacc59e0c
--- /dev/null
+++ b/examples/with-mdx/package.json
@@ -0,0 +1,18 @@
+{
+  "private": true,
+  "name": "mdx-razzle",
+  "scripts": {
+    "start": "razzle start",
+    "build": "razzle build",
+    "test": "razzle test --env=jsdom",
+    "start:prod": "NODE_ENV=production node build/server.js"
+  },
+  "dependencies": {
+    "express": "^4.15.2",
+    "razzle": "^2.4.0",
+    "razzle-plugin-mdx": "^2.4.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "remark-emoji": "^2.0.1"
+  }
+}
diff --git a/examples/with-mdx/razzle.config.js b/examples/with-mdx/razzle.config.js
new file mode 100644
index 000000000..101e6cdc6
--- /dev/null
+++ b/examples/with-mdx/razzle.config.js
@@ -0,0 +1,14 @@
+'use strict';
+
+const emoji = require('remark-emoji');
+
+module.exports = {
+  plugins: [
+    {
+      name: 'mdx',
+      options: {
+        mdPlugins: [emoji],
+      },
+    },
+  ],
+};
diff --git a/examples/with-mdx/readme.md b/examples/with-mdx/readme.md
new file mode 100644
index 000000000..8839b63a2
--- /dev/null
+++ b/examples/with-mdx/readme.md
@@ -0,0 +1,8 @@
+# MDX + Razzle
+
+```
+npm install
+npm start
+```
+
+[See documentation](https://mdxjs.com/getting-started/razzle)
diff --git a/examples/with-mdx/src/App.js b/examples/with-mdx/src/App.js
new file mode 100644
index 000000000..f9fe2241f
--- /dev/null
+++ b/examples/with-mdx/src/App.js
@@ -0,0 +1,4 @@
+import React from 'react';
+import Doc from './example.md';
+
+export default () => <Doc />;
diff --git a/examples/with-mdx/src/client.js b/examples/with-mdx/src/client.js
new file mode 100644
index 000000000..fbbe57121
--- /dev/null
+++ b/examples/with-mdx/src/client.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { hydrate } from 'react-dom';
+import App from './App';
+
+hydrate(<App />, document.getElementById('root'));
+
+if (module.hot) {
+  module.hot.accept();
+}
diff --git a/examples/with-mdx/src/example.md b/examples/with-mdx/src/example.md
new file mode 100644
index 000000000..b221c9d46
--- /dev/null
+++ b/examples/with-mdx/src/example.md
@@ -0,0 +1,3 @@
+# :wave: Hello, world!
+
+This is MDX!
diff --git a/examples/with-mdx/src/index.js b/examples/with-mdx/src/index.js
new file mode 100644
index 000000000..ed81f83d1
--- /dev/null
+++ b/examples/with-mdx/src/index.js
@@ -0,0 +1,21 @@
+import express from 'express';
+import app from './server';
+
+if (module.hot) {
+  module.hot.accept('./server', function() {
+    console.log('🔁  HMR Reloading `./server`...');
+  });
+  console.info('✅  Server-side HMR Enabled!');
+}
+
+const port = process.env.PORT || 3000;
+
+export default express()
+  .use((req, res) => app.handle(req, res))
+  .listen(port, function(err) {
+    if (err) {
+      console.error(err);
+      return;
+    }
+    console.log(`> Started on port ${port}`);
+  });
diff --git a/examples/with-mdx/src/server.js b/examples/with-mdx/src/server.js
new file mode 100644
index 000000000..b0067e1d0
--- /dev/null
+++ b/examples/with-mdx/src/server.js
@@ -0,0 +1,38 @@
+import App from './App';
+import React from 'react';
+import express from 'express';
+import { renderToString } from 'react-dom/server';
+
+const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
+
+const server = express();
+
+server
+  .disable('x-powered-by')
+  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
+  .get('/*', (req, res) => {
+    const markup = renderToString(<App />);
+    res.send(
+      // prettier-ignore
+      `<!doctype html>
+    <html lang="">
+    <head>
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta charSet='utf-8' />
+        <title>Welcome to Razzle</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        ${
+          assets.client.css
+            ? `<link rel="stylesheet" href="${assets.client.css}">`
+            : ''
+        } 
+    </head>
+    <body>
+        <div id="root">${markup}</div>    
+        <script src="${assets.client.js}" defer crossorigin></script>
+    </body>
+</html>`
+    );
+  });
+
+export default server;
diff --git a/packages/razzle-plugin-mdx/README.md b/packages/razzle-plugin-mdx/README.md
index 634155fcd..a243670ae 100644
--- a/packages/razzle-plugin-mdx/README.md
+++ b/packages/razzle-plugin-mdx/README.md
@@ -5,13 +5,13 @@ This package contains a plugin for using mdx with Razzle
 ## Usage in Razzle Projects
 
 ```
-npm i razzle-plugin-mdx @mdx-js/tag
+npm i razzle-plugin-mdx
 ```
 
 or
 
 ```
-yarn add razzle-plugin-mdx @mdx-js/tag
+yarn add razzle-plugin-mdx
 ```
 
 ### Using the plugin with the default options
diff --git a/packages/razzle-plugin-mdx/index.js b/packages/razzle-plugin-mdx/index.js
index 388158905..15380765a 100644
--- a/packages/razzle-plugin-mdx/index.js
+++ b/packages/razzle-plugin-mdx/index.js
@@ -1,13 +1,18 @@
 'use strict';
 
 const { babelLoaderFinder, fileLoaderFinder } = require('./helpers');
+const path = require('path');
 
 const defaultOptions = {};
 
-function modify(baseConfig, { target, dev }, webpack, userOptions = {}) {
+function modify(baseConfig, params, webpack, userOptions = {}) {
   const options = Object.assign({}, defaultOptions, userOptions);
   const config = Object.assign({}, baseConfig);
 
+  config.resolve.modules = [
+    ...config.resolve.modules,
+    path.join(__dirname, './node_modules'),
+  ];
   config.resolve.extensions = [...config.resolve.extensions, '.md', '.mdx'];
 
   // Safely locate Babel-Loader in Razzle's webpack internals
@@ -32,7 +37,7 @@ function modify(baseConfig, { target, dev }, webpack, userOptions = {}) {
       ...babelLoader.use,
       {
         loader: require.resolve('@mdx-js/loader'),
-        options: Object.assign({}, options.mdxLoader),
+        options: Object.assign({}, options),
       },
     ],
   };
diff --git a/packages/razzle-plugin-mdx/package.json b/packages/razzle-plugin-mdx/package.json
index 590e6ed18..5ab678244 100644
--- a/packages/razzle-plugin-mdx/package.json
+++ b/packages/razzle-plugin-mdx/package.json
@@ -16,8 +16,5 @@
   "devDependencies": {
     "jest": "20.0.4",
     "razzle": "^2.4.0"
-  },
-  "peerDependencies": {
-    "@mdx-js/tag": ">=0.14.1"
   }
 }