Skip to content

Commit

Permalink
Update examples, react
Browse files Browse the repository at this point in the history
* 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 <[email protected]>
  • Loading branch information
wooorm authored Dec 28, 2020
1 parent 36deb50 commit 6f3dc9c
Show file tree
Hide file tree
Showing 58 changed files with 1,072 additions and 1,255 deletions.
2 changes: 1 addition & 1 deletion docs/advanced/plugins.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ module.exports = {
module: {
rules: [
{
test: /\.mdx?$/,
test: /\.mdx$/,
use: [
{
loader: 'babel-loader'
Expand Down
6 changes: 3 additions & 3 deletions docs/getting-started/next.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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']
Expand All @@ -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({
Expand All @@ -61,7 +61,7 @@ module.exports = withMDX()

```js
const withMDX = require('@next/mdx')({
extension: /\.mdx?$/
extension: /\.mdx$/
})

module.exports = withMDX({
Expand Down
4 changes: 2 additions & 2 deletions docs/getting-started/webpack.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ module.exports = {
// ...

{
test: /\.mdx?$/,
test: /\.mdx$/,
use: ['babel-loader', '@mdx-js/loader']
}
]
Expand All @@ -55,7 +55,7 @@ module.exports = {
module: {
rules: [
{
test: /\.mdx?$/,
test: /\.mdx$/,
use: [
{
loader: 'babel-loader'
Expand Down
2 changes: 1 addition & 1 deletion docs/guides/custom-loader.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ module.exports = {
module: {
rules: [
{
test: /\.mdx?$/,
test: /\.mdx$/,
use: [
'babel-loader',
'@mdx-js/loader',
Expand Down
4 changes: 2 additions & 2 deletions docs/guides/math-blocks.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ module.exports = {
rules: [
// ...
{
test: /.mdx?$/,
test: /.mdx$/,
use: [
'babel-loader',
{
Expand Down Expand Up @@ -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]
Expand Down
2 changes: 1 addition & 1 deletion docs/guides/syntax-highlighting.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ module.exports = {
rules: [
// ...
{
test: /.mdx?$/,
test: /.mdx$/,
use: [
'babel-loader',
{
Expand Down
2 changes: 1 addition & 1 deletion docs/guides/vue.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ module.exports = {
module: {
rules: [
{
test: /.mdx?$/,
test: /.mdx$/,
use: ['babel-loader', '@mdx-js/vue-loader']
}
]
Expand Down
2 changes: 1 addition & 1 deletion examples/create-react-app/.babelrc
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
[
"@babel/env",
{
"corejs": 2,
"corejs": 3,
"useBuiltIns": "usage"
}
],
Expand Down
4 changes: 2 additions & 2 deletions examples/create-react-app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": [
Expand Down
6 changes: 3 additions & 3 deletions examples/gatsby/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
5 changes: 3 additions & 2 deletions examples/next/next.config.js
Original file line number Diff line number Diff line change
@@ -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']
})
8 changes: 4 additions & 4 deletions examples/next/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
Expand Down
10 changes: 6 additions & 4 deletions examples/next/pages/_app.js
Original file line number Diff line number Diff line change
@@ -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
File renamed without changes.
5 changes: 2 additions & 3 deletions examples/parcel/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
7 changes: 4 additions & 3 deletions examples/razzle/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
15 changes: 14 additions & 1 deletion examples/razzle/razzle.config.js
Original file line number Diff line number Diff line change
@@ -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]
}
}
]
}
4 changes: 2 additions & 2 deletions examples/razzle/src/App.js
Original file line number Diff line number Diff line change
@@ -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} />
Expand Down
File renamed without changes.
10 changes: 5 additions & 5 deletions examples/react-static/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
File renamed without changes.
2 changes: 2 additions & 0 deletions examples/react-static/static.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
[
Expand Down
7 changes: 7 additions & 0 deletions examples/react-web-components/gatsby-config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
module.exports = {
plugins: [
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'pages',
path: __dirname + '/src/pages/'
}
},
{
resolve: 'gatsby-plugin-mdx',
options: {
Expand Down
11 changes: 6 additions & 5 deletions examples/react-web-components/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
2 changes: 1 addition & 1 deletion examples/react-web-components/readme.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Web components + React + MDX
# Gatsby + React + MDX + Web components

```sh
yarn
Expand Down
7 changes: 7 additions & 0 deletions examples/shortcodes/gatsby-config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
module.exports = {
plugins: [
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'pages',
path: __dirname + '/src/pages/'
}
},
{
resolve: 'gatsby-plugin-mdx',
options: {
Expand Down
9 changes: 5 additions & 4 deletions examples/shortcodes/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
7 changes: 7 additions & 0 deletions examples/syntax-highlighting/gatsby-config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
module.exports = {
plugins: [
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'pages',
path: __dirname + '/src/pages/'
}
},
{
resolve: 'gatsby-plugin-mdx',
options: {
Expand Down
3 changes: 2 additions & 1 deletion examples/syntax-highlighting/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
10 changes: 5 additions & 5 deletions examples/terminal/example.js
Original file line number Diff line number Diff line change
@@ -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}
Expand Down
Loading

0 comments on commit 6f3dc9c

Please sign in to comment.