Mdx plugin improvements (#732)

* resolving path to @mdx-js/tag, fix loader options * del peerDep, improve readme * add example
jaredpalmer · Aug 25, 2018 · ad25c6b · ad25c6b
1 parent c0013d4
commit ad25c6b
Show file tree

Hide file tree

Showing 12 changed files with 134 additions and 7 deletions.
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"
  }
 }