Mdx plugin improvements (#732)

jeetiss · jaredpalmer · commit ad25c6bb14d8 · 2018-08-25T19:33:02.000-04:00
* resolving path to @mdx-js/tag, fix loader options

* del peerDep, improve readme

* add example
diff --git a/examples/with-mdx/.gitignore b/examples/with-mdx/.gitignore
@@ -0,0 +1,10 @@
+logs
+*.log
+npm-debug.log*
+.DS_Store
+
+coverage
+node_modules
+build
+public/static
+.env.*.local
diff --git a/examples/with-mdx/package.json 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -16,8 +16,5 @@
   "devDependencies": {
     "jest": "20.0.4",
     "razzle": "^2.4.0"
-  },
-  "peerDependencies": {
-    "@mdx-js/tag": ">=0.14.1"
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# :wave: Hello, world!`
	`2`	`+`
	`3`	`+This is MDX!`