Skip to content

Commit 6f3dc9c

Browse files
wooormwooorm
authored
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 <[email protected]>
1 parent 36deb50 commit 6f3dc9c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+1072
-1255
lines changed

‎docs/advanced/plugins.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ module.exports = {
5353
module: {
5454
rules: [
5555
{
56-
test: /\.mdx?$/,
56+
test: /\.mdx$/,
5757
use: [
5858
{
5959
loader: 'babel-loader'

‎docs/getting-started/next.mdx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ To have Next.js treat `.mdx` files in the pages directory as pages use the `page
2222
```js
2323
// next.config.js
2424
const withMDX = require('@next/mdx')({
25-
extension: /\.mdx?$/
25+
extension: /\.mdx$/
2626
})
2727
module.exports = withMDX({
2828
pageExtensions: ['js', 'jsx', 'mdx']
@@ -35,7 +35,7 @@ The Next.js MDX plugin allows for you to also use MDX parsing for `.md` files:
3535

3636
```js
3737
const withMDX = require('@next/mdx')({
38-
extension: /\.mdx?$/
38+
extension: /\.mdx$/
3939
})
4040

4141
module.exports = withMDX({
@@ -61,7 +61,7 @@ module.exports = withMDX()
6161

6262
```js
6363
const withMDX = require('@next/mdx')({
64-
extension: /\.mdx?$/
64+
extension: /\.mdx$/
6565
})
6666

6767
module.exports = withMDX({

‎docs/getting-started/webpack.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ module.exports = {
2828
// ...
2929

3030
{
31-
test: /\.mdx?$/,
31+
test: /\.mdx$/,
3232
use: ['babel-loader', '@mdx-js/loader']
3333
}
3434
]
@@ -55,7 +55,7 @@ module.exports = {
5555
module: {
5656
rules: [
5757
{
58-
test: /\.mdx?$/,
58+
test: /\.mdx$/,
5959
use: [
6060
{
6161
loader: 'babel-loader'

‎docs/guides/custom-loader.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ module.exports = {
3030
module: {
3131
rules: [
3232
{
33-
test: /\.mdx?$/,
33+
test: /\.mdx$/,
3434
use: [
3535
'babel-loader',
3636
'@mdx-js/loader',

‎docs/guides/math-blocks.mdx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ module.exports = {
3636
rules: [
3737
// ...
3838
{
39-
test: /.mdx?$/,
39+
test: /.mdx$/,
4040
use: [
4141
'babel-loader',
4242
{
@@ -75,7 +75,7 @@ const remarkMath = require('remark-math')
7575
const rehypeKatex = require('rehype-katex')
7676

7777
const withMDX = require('@next/mdx')({
78-
extension: /\.mdx?$/,
78+
extension: /\.mdx$/,
7979
options: {
8080
remarkPlugins: [remarkMath],
8181
rehypePlugins: [rehypeKatex]

‎docs/guides/syntax-highlighting.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ module.exports = {
135135
rules: [
136136
// ...
137137
{
138-
test: /.mdx?$/,
138+
test: /.mdx$/,
139139
use: [
140140
'babel-loader',
141141
{

‎docs/guides/vue.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ module.exports = {
2727
module: {
2828
rules: [
2929
{
30-
test: /.mdx?$/,
30+
test: /.mdx$/,
3131
use: ['babel-loader', '@mdx-js/vue-loader']
3232
}
3333
]

‎examples/create-react-app/.babelrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
[
44
"@babel/env",
55
{
6-
"corejs": 2,
6+
"corejs": 3,
77
"useBuiltIns": "usage"
88
}
99
],

‎examples/create-react-app/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
},
1111
"dependencies": {
1212
"mdx.macro": "^0.2.9",
13-
"react": "^16.13.1",
14-
"react-dom": "^16.13.1",
13+
"react": "^17.0.0",
14+
"react-dom": "^17.0.0",
1515
"react-scripts": "3.4.1"
1616
},
1717
"browserslist": [

‎examples/gatsby/package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@
1010
"@mdx-js/mdx": "^2.0.0-next.8",
1111
"@mdx-js/react": "^2.0.0-next.8",
1212
"gatsby": "^2.24.3",
13-
"gatsby-plugin-mdx": "^1.2.26",
14-
"react": "^16.13.1",
15-
"react-dom": "^16.13.1",
13+
"gatsby-plugin-mdx": "^1.2.0",
14+
"react": "^17.0.0",
15+
"react-dom": "^17.0.0",
1616
"unified-ui": "^0.0.3"
1717
}
1818
}

‎examples/next/next.config.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
const images = require('remark-images')
22
const emoji = require('remark-emoji')
33

4+
// See <https://github.com/vercel/next.js/tree/canary/packages/next-mdx> for
5+
// more info.
46
const withMDX = require('@next/mdx')({
5-
extension: /\.mdx?$/,
67
options: {
78
remarkPlugins: [images, emoji]
89
}
910
})
1011

1112
module.exports = withMDX({
12-
pageExtensions: ['js', 'jsx', 'md', 'mdx']
13+
pageExtensions: ['js', 'jsx', 'mdx']
1314
})

‎examples/next/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@
1010
"dependencies": {
1111
"@mdx-js/loader": "^2.0.0-next.8",
1212
"@mdx-js/mdx": "^2.0.0-next.8",
13-
"@next/mdx": "^9.4.4",
14-
"next": "^9.4.4",
15-
"react": "^16.13.1",
16-
"react-dom": "^16.13.1",
13+
"@next/mdx": "^10.0.0",
14+
"next": "^10.0.0",
15+
"react": "^17.0.0",
16+
"react-dom": "^17.0.0",
1717
"remark-emoji": "^2.1.0",
1818
"remark-images": "^2.0.0"
1919
}

‎examples/next/pages/_app.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import React from 'react'
22
import {MDXProvider} from '@mdx-js/react'
33

4-
const mdComponents = {
4+
const components = {
55
h1: props => <h1 style={{color: 'tomato'}} {...props} />
66
}
77

8-
export default ({Component, pageProps}) => (
9-
<MDXProvider components={mdComponents}>
10-
<Component {...pageProps} />
8+
const Page = ({Component}) => (
9+
<MDXProvider components={components}>
10+
<Component />
1111
</MDXProvider>
1212
)
13+
14+
export default Page

‎examples/next/pages/index.md renamed to ‎examples/next/pages/index.mdx

File renamed without changes.

‎examples/parcel/package.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,8 @@
77
},
88
"dependencies": {
99
"@mdx-js/react": "^2.0.0-next.8",
10-
"@mdx-js/tag": "^0.20.3",
11-
"react": "^16.13.1",
12-
"react-dom": "^16.13.1"
10+
"react": "^17.0.0",
11+
"react-dom": "^17.0.0"
1312
},
1413
"devDependencies": {
1514
"@babel/core": "^7.10.5",

‎examples/razzle/package.json

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,12 @@
99
"test": "razzle test --env=jsdom"
1010
},
1111
"dependencies": {
12-
"@mdx-js/tag": "^0.20.3",
12+
"@mdx-js/react": "^2.0.0-next.8",
1313
"express": "^4.17.1",
1414
"razzle": "^3.1.5",
1515
"razzle-plugin-mdx": "^3.1.5",
16-
"react": "^16.13.1",
17-
"react-dom": "^16.13.1"
16+
"react": "^17.0.0",
17+
"react-dom": "^17.0.0",
18+
"remark-emoji": "^2.1.0"
1819
}
1920
}

‎examples/razzle/razzle.config.js

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,16 @@
1+
const emoji = require('remark-emoji')
2+
13
module.exports = {
2-
plugins: ['mdx']
4+
// See <https://github.com/jaredpalmer/razzle/tree/master/packages/razzle-plugin-mdx>
5+
// for more info.
6+
// Note: `razzle-plugin-mdx` is on a pre-1 MDX version, so many things might
7+
// not work.
8+
plugins: [
9+
{
10+
name: 'mdx',
11+
options: {
12+
mdPlugins: [emoji]
13+
}
14+
}
15+
]
316
}

‎examples/razzle/src/App.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
2-
import {MDXProvider} from '@mdx-js/tag'
2+
import {MDXProvider} from '@mdx-js/react'
33

4-
import Doc from './example.md'
4+
import Doc from './example.mdx'
55

66
const components = {
77
h1: props => <h1 style={{color: 'tomato'}} {...props} />

‎examples/razzle/src/example.md renamed to ‎examples/razzle/src/example.mdx

File renamed without changes.

‎examples/react-static/package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,17 @@
1313
"dependencies": {
1414
"@mdx-js/loader": "^2.0.0-next.8",
1515
"@reach/router": "^1.3.4",
16-
"axios": "^0.19.2",
17-
"react": "^16.13.1",
18-
"react-dom": "^16.13.1",
16+
"axios": "^0.21.0",
17+
"react": "^17.0.0",
18+
"react-dom": "^17.0.0",
1919
"react-hot-loader": "^4.12.21",
2020
"react-static": "^7.4.2",
2121
"react-static-plugin-mdx": "^7.2.2",
2222
"react-static-plugin-reach-router": "^7.4.2",
2323
"react-static-plugin-source-filesystem": "^7.4.2"
2424
},
2525
"devDependencies": {
26-
"eslint-config-react-tools": "1.1.7",
27-
"serve": "11.3.2"
26+
"eslint-config-react-tools": "^1.1.7",
27+
"serve": "^11.3.2"
2828
}
2929
}

‎examples/react-static/README.md renamed to ‎examples/react-static/readme.md

File renamed without changes.

‎examples/react-static/static.config.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ export default {
2525
}
2626
]
2727
},
28+
// See <https://github.com/react-static/react-static/tree/master/packages/react-static-plugin-mdx>
29+
// for more info.
2830
plugins: [
2931
'react-static-plugin-mdx',
3032
[

‎examples/react-web-components/gatsby-config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
module.exports = {
22
plugins: [
3+
{
4+
resolve: 'gatsby-source-filesystem',
5+
options: {
6+
name: 'pages',
7+
path: __dirname + '/src/pages/'
8+
}
9+
},
310
{
411
resolve: 'gatsby-plugin-mdx',
512
options: {

‎examples/react-web-components/package.json

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@
77
"start": "gatsby develop"
88
},
99
"dependencies": {
10-
"@mdx-js/mdx": "^2.0.0-next.8",
11-
"@mdx-js/react": "^2.0.0-next.8",
10+
"@mdx-js/mdx": "^1.0.0",
11+
"@mdx-js/react": "^1.0.0",
1212
"gatsby": "^2.24.3",
13-
"gatsby-plugin-mdx": "^1.2.26",
14-
"react": "^16.13.1",
15-
"react-dom": "^16.13.1"
13+
"gatsby-plugin-mdx": "^1.2.0",
14+
"gatsby-source-filesystem": "^2.0.0",
15+
"react": "^17.0.0",
16+
"react-dom": "^17.0.0"
1617
}
1718
}

‎examples/react-web-components/readme.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Web components + React + MDX
1+
# Gatsby + React + MDX + Web components
22

33
```sh
44
yarn

‎examples/shortcodes/gatsby-config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
module.exports = {
22
plugins: [
3+
{
4+
resolve: 'gatsby-source-filesystem',
5+
options: {
6+
name: 'pages',
7+
path: __dirname + '/src/pages/'
8+
}
9+
},
310
{
411
resolve: 'gatsby-plugin-mdx',
512
options: {

‎examples/shortcodes/package.json

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,14 @@
88
},
99
"dependencies": {
1010
"@blocks/kit": "^0.0.28",
11-
"@emotion/core": "^10.0.28",
11+
"@emotion/core": "^11.0.0",
1212
"@mdx-js/mdx": "^2.0.0-next.8",
1313
"@mdx-js/react": "^2.0.0-next.8",
1414
"gatsby": "^2.24.3",
15-
"gatsby-plugin-mdx": "^1.2.26",
16-
"react": "^16.13.1",
17-
"react-dom": "^16.13.1",
15+
"gatsby-plugin-mdx": "^1.2.0",
16+
"gatsby-source-filesystem": "^2.0.0",
17+
"react": "^17.0.0",
18+
"react-dom": "^17.0.0",
1819
"unified-ui": "^0.0.3"
1920
}
2021
}

‎examples/syntax-highlighting/gatsby-config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
module.exports = {
22
plugins: [
3+
{
4+
resolve: 'gatsby-source-filesystem',
5+
options: {
6+
name: 'pages',
7+
path: __dirname + '/src/pages/'
8+
}
9+
},
310
{
411
resolve: 'gatsby-plugin-mdx',
512
options: {

‎examples/syntax-highlighting/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
"@mdx-js/mdx": "^2.0.0-next.8",
1111
"@mdx-js/react": "^2.0.0-next.8",
1212
"gatsby": "^2.24.3",
13-
"gatsby-plugin-mdx": "^1.2.26",
13+
"gatsby-plugin-mdx": "^1.2.0",
14+
"gatsby-source-filesystem": "^2.0.0",
1415
"prism-react-renderer": "^1.1.1",
1516
"react-live": "^2.2.2",
1617
"unified-ui": "^0.0.3"

‎examples/terminal/example.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
const React = require('react')
2-
const {render, Color, Box, Text} = require('ink')
2+
const {render, Box, Text} = require('ink')
33
const MDX = require('@mdx-js/runtime')
44
const {MDXProvider} = require('@mdx-js/react')
55

66
const MDXContent = `
77
# Hello, world!
88
9-
From <Color bgBlack white bold> MDX! </Color>
9+
From <Text backgroundColor="black" color="white" bold>MDX!</Text>
1010
1111
<Box marginTop={1}>
12-
<Color bgCyan white bold>
12+
<Text backgroundColor="cyan" color="white" bold>
1313
I'm a cyan box!
14-
</Color>
14+
</Text>
1515
</Box>
1616
`
1717

1818
const components = {
1919
Box,
20-
Color,
20+
Text,
2121
h1: ({children}) => (
2222
<Text underline bold>
2323
{children}

0 commit comments

Comments
 (0)