Update examples, react

* Update `react`, `react-dom` * Clean Next, Razzle, Vue examples * Update parcel example, parcel plugin, run tests * Prefer `.mdx` extension over `.md` * This does not yet touch CRA * It’s impossible to get Gatsby working in our workspace (they fork MDX but resolve from their dependency on old MDX) * I can’t get webpack 5 working either Related to GH-1292. Closes GH-1415. Reviewed-by: Christian Murphy <christian.murphy.42@gmail.com>
mdx-js · Dec 28, 2020 · 6f3dc9c · 6f3dc9c
1 parent 36deb50
commit 6f3dc9c
Show file tree

Hide file tree

Showing 58 changed files with 1,072 additions and 1,255 deletions.
diff --git a/docs/advanced/plugins.mdx b/docs/advanced/plugins.mdx
@@ -53,7 +53,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.mdx?$/,
+        test: /\.mdx$/,
         use: [
           {
             loader: 'babel-loader'

diff --git a/docs/getting-started/next.mdx b/docs/getting-started/next.mdx
@@ -22,7 +22,7 @@ To have Next.js treat `.mdx` files in the pages directory as pages use the `page
 ```js
 // next.config.js
 const withMDX = require('@next/mdx')({
-  extension: /\.mdx?$/
+  extension: /\.mdx$/
 })
 module.exports = withMDX({
   pageExtensions: ['js', 'jsx', 'mdx']
@@ -35,7 +35,7 @@ The Next.js MDX plugin allows for you to also use MDX parsing for `.md` files:
 
 ```js
 const withMDX = require('@next/mdx')({
-  extension: /\.mdx?$/
+  extension: /\.mdx$/
 })
 
 module.exports = withMDX({
@@ -61,7 +61,7 @@ module.exports = withMDX()
 
 ```js
 const withMDX = require('@next/mdx')({
-  extension: /\.mdx?$/
+  extension: /\.mdx$/
 })
 
 module.exports = withMDX({

diff --git a/docs/getting-started/webpack.mdx b/docs/getting-started/webpack.mdx
@@ -28,7 +28,7 @@ module.exports = {
       // ...
 
       {
-        test: /\.mdx?$/,
+        test: /\.mdx$/,
         use: ['babel-loader', '@mdx-js/loader']
       }
     ]
@@ -55,7 +55,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.mdx?$/,
+        test: /\.mdx$/,
         use: [
           {
             loader: 'babel-loader'

diff --git a/docs/guides/custom-loader.mdx b/docs/guides/custom-loader.mdx
@@ -30,7 +30,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.mdx?$/,
+        test: /\.mdx$/,
         use: [
           'babel-loader',
           '@mdx-js/loader',

diff --git a/docs/guides/math-blocks.mdx b/docs/guides/math-blocks.mdx
@@ -36,7 +36,7 @@ module.exports = {
     rules: [
       // ...
       {
-        test: /.mdx?$/,
+        test: /.mdx$/,
         use: [
           'babel-loader',
           {
@@ -75,7 +75,7 @@ const remarkMath = require('remark-math')
 const rehypeKatex = require('rehype-katex')
 
 const withMDX = require('@next/mdx')({
-  extension: /\.mdx?$/,
+  extension: /\.mdx$/,
   options: {
     remarkPlugins: [remarkMath],
     rehypePlugins: [rehypeKatex]

diff --git a/docs/guides/syntax-highlighting.mdx b/docs/guides/syntax-highlighting.mdx
@@ -135,7 +135,7 @@ module.exports = {
     rules: [
       // ...
       {
-        test: /.mdx?$/,
+        test: /.mdx$/,
         use: [
           'babel-loader',
           {

diff --git a/docs/guides/vue.mdx b/docs/guides/vue.mdx
@@ -27,7 +27,7 @@ module.exports = {
     module: {
       rules: [
         {
-          test: /.mdx?$/,
+          test: /.mdx$/,
           use: ['babel-loader', '@mdx-js/vue-loader']
         }
       ]

diff --git a/examples/create-react-app/.babelrc b/examples/create-react-app/.babelrc
@@ -3,7 +3,7 @@
     [
       "@babel/env",
       {
-        "corejs": 2,
+        "corejs": 3,
         "useBuiltIns": "usage"
       }
     ],

diff --git a/examples/create-react-app/package.json b/examples/create-react-app/package.json
@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "mdx.macro": "^0.2.9",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-scripts": "3.4.1"
   },
   "browserslist": [

diff --git a/examples/gatsby/package.json b/examples/gatsby/package.json
@@ -10,9 +10,9 @@
     "@mdx-js/mdx": "^2.0.0-next.8",
     "@mdx-js/react": "^2.0.0-next.8",
     "gatsby": "^2.24.3",
-    "gatsby-plugin-mdx": "^1.2.26",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "gatsby-plugin-mdx": "^1.2.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "unified-ui": "^0.0.3"
   }
 }
diff --git a/examples/next/next.config.js b/examples/next/next.config.js
@@ -1,13 +1,14 @@
 const images = require('remark-images')
 const emoji = require('remark-emoji')
 
+// See <https://github.com/vercel/next.js/tree/canary/packages/next-mdx> for
+// more info.
 const withMDX = require('@next/mdx')({
-  extension: /\.mdx?$/,
   options: {
     remarkPlugins: [images, emoji]
   }
 })
 
 module.exports = withMDX({
-  pageExtensions: ['js', 'jsx', 'md', 'mdx']
+  pageExtensions: ['js', 'jsx', 'mdx']
 })
diff --git a/examples/next/package.json b/examples/next/package.json
@@ -10,10 +10,10 @@
   "dependencies": {
     "@mdx-js/loader": "^2.0.0-next.8",
     "@mdx-js/mdx": "^2.0.0-next.8",
-    "@next/mdx": "^9.4.4",
-    "next": "^9.4.4",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "@next/mdx": "^10.0.0",
+    "next": "^10.0.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "remark-emoji": "^2.1.0",
     "remark-images": "^2.0.0"
   }

diff --git a/examples/next/pages/_app.js b/examples/next/pages/_app.js
@@ -1,12 +1,14 @@
 import React from 'react'
 import {MDXProvider} from '@mdx-js/react'
 
-const mdComponents = {
+const components = {
   h1: props => <h1 style={{color: 'tomato'}} {...props} />
 }
 
-export default ({Component, pageProps}) => (
-  <MDXProvider components={mdComponents}>
-    <Component {...pageProps} />
+const Page = ({Component}) => (
+  <MDXProvider components={components}>
+    <Component />
   </MDXProvider>
 )
+
+export default Page
diff --git a/examples/next/pages/index.md → examples/next/pages/index.mdx b/examples/next/pages/index.md → examples/next/pages/index.mdx
diff --git a/examples/parcel/package.json b/examples/parcel/package.json
@@ -7,9 +7,8 @@
   },
   "dependencies": {
     "@mdx-js/react": "^2.0.0-next.8",
-    "@mdx-js/tag": "^0.20.3",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.10.5",

diff --git a/examples/razzle/package.json b/examples/razzle/package.json
@@ -9,11 +9,12 @@
     "test": "razzle test --env=jsdom"
   },
   "dependencies": {
-    "@mdx-js/tag": "^0.20.3",
+    "@mdx-js/react": "^2.0.0-next.8",
     "express": "^4.17.1",
     "razzle": "^3.1.5",
     "razzle-plugin-mdx": "^3.1.5",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "remark-emoji": "^2.1.0"
   }
 }
diff --git a/examples/razzle/razzle.config.js b/examples/razzle/razzle.config.js
@@ -1,3 +1,16 @@
+const emoji = require('remark-emoji')
+
 module.exports = {
-  plugins: ['mdx']
+  // See <https://github.com/jaredpalmer/razzle/tree/master/packages/razzle-plugin-mdx>
+  // for more info.
+  // Note: `razzle-plugin-mdx` is on a pre-1 MDX version, so many things might
+  // not work.
+  plugins: [
+    {
+      name: 'mdx',
+      options: {
+        mdPlugins: [emoji]
+      }
+    }
+  ]
 }
diff --git a/examples/razzle/src/App.js b/examples/razzle/src/App.js
@@ -1,7 +1,7 @@
 import React from 'react'
-import {MDXProvider} from '@mdx-js/tag'
+import {MDXProvider} from '@mdx-js/react'
 
-import Doc from './example.md'
+import Doc from './example.mdx'
 
 const components = {
   h1: props => <h1 style={{color: 'tomato'}} {...props} />

diff --git a/examples/razzle/src/example.md → examples/razzle/src/example.mdx b/examples/razzle/src/example.md → examples/razzle/src/example.mdx
diff --git a/examples/react-static/package.json b/examples/react-static/package.json
@@ -13,17 +13,17 @@
   "dependencies": {
     "@mdx-js/loader": "^2.0.0-next.8",
     "@reach/router": "^1.3.4",
-    "axios": "^0.19.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "axios": "^0.21.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-hot-loader": "^4.12.21",
     "react-static": "^7.4.2",
     "react-static-plugin-mdx": "^7.2.2",
     "react-static-plugin-reach-router": "^7.4.2",
     "react-static-plugin-source-filesystem": "^7.4.2"
   },
   "devDependencies": {
-    "eslint-config-react-tools": "1.1.7",
-    "serve": "11.3.2"
+    "eslint-config-react-tools": "^1.1.7",
+    "serve": "^11.3.2"
   }
 }
diff --git a/examples/react-static/README.md → examples/react-static/readme.md b/examples/react-static/README.md → examples/react-static/readme.md
diff --git a/examples/react-static/static.config.js b/examples/react-static/static.config.js
@@ -25,6 +25,8 @@ export default {
       }
     ]
   },
+  // See <https://github.com/react-static/react-static/tree/master/packages/react-static-plugin-mdx>
+  // for more info.
   plugins: [
     'react-static-plugin-mdx',
     [

diff --git a/examples/react-web-components/gatsby-config.js b/examples/react-web-components/gatsby-config.js
@@ -1,5 +1,12 @@
 module.exports = {
   plugins: [
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'pages',
+        path: __dirname + '/src/pages/'
+      }
+    },
     {
       resolve: 'gatsby-plugin-mdx',
       options: {

diff --git a/examples/react-web-components/package.json b/examples/react-web-components/package.json
@@ -7,11 +7,12 @@
     "start": "gatsby develop"
   },
   "dependencies": {
-    "@mdx-js/mdx": "^2.0.0-next.8",
-    "@mdx-js/react": "^2.0.0-next.8",
+    "@mdx-js/mdx": "^1.0.0",
+    "@mdx-js/react": "^1.0.0",
     "gatsby": "^2.24.3",
-    "gatsby-plugin-mdx": "^1.2.26",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "gatsby-plugin-mdx": "^1.2.0",
+    "gatsby-source-filesystem": "^2.0.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
   }
 }
diff --git a/examples/react-web-components/readme.md b/examples/react-web-components/readme.md
@@ -1,4 +1,4 @@
-# Web components + React + MDX
+# Gatsby + React + MDX + Web components
 
 ```sh
 yarn

diff --git a/examples/shortcodes/gatsby-config.js b/examples/shortcodes/gatsby-config.js
@@ -1,5 +1,12 @@
 module.exports = {
   plugins: [
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'pages',
+        path: __dirname + '/src/pages/'
+      }
+    },
     {
       resolve: 'gatsby-plugin-mdx',
       options: {

diff --git a/examples/shortcodes/package.json b/examples/shortcodes/package.json
@@ -8,13 +8,14 @@
   },
   "dependencies": {
     "@blocks/kit": "^0.0.28",
-    "@emotion/core": "^10.0.28",
+    "@emotion/core": "^11.0.0",
     "@mdx-js/mdx": "^2.0.0-next.8",
     "@mdx-js/react": "^2.0.0-next.8",
     "gatsby": "^2.24.3",
-    "gatsby-plugin-mdx": "^1.2.26",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "gatsby-plugin-mdx": "^1.2.0",
+    "gatsby-source-filesystem": "^2.0.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "unified-ui": "^0.0.3"
   }
 }
diff --git a/examples/syntax-highlighting/gatsby-config.js b/examples/syntax-highlighting/gatsby-config.js
@@ -1,5 +1,12 @@
 module.exports = {
   plugins: [
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'pages',
+        path: __dirname + '/src/pages/'
+      }
+    },
     {
       resolve: 'gatsby-plugin-mdx',
       options: {

diff --git a/examples/syntax-highlighting/package.json b/examples/syntax-highlighting/package.json
@@ -10,7 +10,8 @@
     "@mdx-js/mdx": "^2.0.0-next.8",
     "@mdx-js/react": "^2.0.0-next.8",
     "gatsby": "^2.24.3",
-    "gatsby-plugin-mdx": "^1.2.26",
+    "gatsby-plugin-mdx": "^1.2.0",
+    "gatsby-source-filesystem": "^2.0.0",
     "prism-react-renderer": "^1.1.1",
     "react-live": "^2.2.2",
     "unified-ui": "^0.0.3"

diff --git a/examples/terminal/example.js b/examples/terminal/example.js
@@ -1,23 +1,23 @@
 const React = require('react')
-const {render, Color, Box, Text} = require('ink')
+const {render, Box, Text} = require('ink')
 const MDX = require('@mdx-js/runtime')
 const {MDXProvider} = require('@mdx-js/react')
 
 const MDXContent = `
 # Hello, world!
 
-From <Color bgBlack white bold>    MDX!    </Color>
+From <Text backgroundColor="black" color="white" bold>MDX!</Text>
 
 <Box marginTop={1}>
-  <Color bgCyan white bold>
+  <Text backgroundColor="cyan" color="white" bold>
     I'm a cyan box!
-  </Color>
+  </Text>
 </Box>
 `
 
 const components = {
   Box,
-  Color,
+  Text,
   h1: ({children}) => (
     <Text underline bold>
       {children}