feat: Convert withMDXComponents to use hooks (#417)

mdx-js · Mar 6, 2019 · 07e3a72 · 07e3a72
1 parent c433fc7
commit 07e3a72
Show file tree

Hide file tree

Showing 14 changed files with 188 additions and 189 deletions.
diff --git a/examples/create-react-app/package.json b/examples/create-react-app/package.json
@@ -4,8 +4,8 @@
   "private": true,
   "dependencies": {
     "mdx.macro": "^0.2.7",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
     "react-scripts": "2.1.1"
   },
   "scripts": {

diff --git a/examples/next/package.json b/examples/next/package.json
@@ -12,8 +12,8 @@
     "@mdx-js/mdx": "^0.16.5",
     "@zeit/next-mdx": "^1.2.0",
     "next": "^7.0.2",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
     "remark-emoji": "^2.0.2",
     "remark-images": "^0.16.1",
     "unified-ui": "^0.0.3"

diff --git a/examples/parcel/package.json b/examples/parcel/package.json
@@ -7,8 +7,8 @@
   },
   "dependencies": {
     "@mdx-js/tag": "^0.16.1",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3"
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
   },
   "devDependencies": {
     "@babel/core": "^7.1.6",

diff --git a/examples/razzle/package.json b/examples/razzle/package.json
@@ -13,7 +13,7 @@
     "express": "^4.16.4",
     "razzle": "^2.4.0",
     "razzle-plugin-mdx": "^2.4.0",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3"
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
   }
 }
diff --git a/packages/loader/package.json b/packages/loader/package.json
@@ -38,7 +38,7 @@
     "babel-preset-stage-0": "^6.24.1",
     "jest": "^23.0.0",
     "memory-fs": "^0.4.1",
-    "react": "^16.3.2",
+    "react": "^16.8.0",
     "webpack": "^4.5.0"
   },
   "scripts": {

diff --git a/packages/mdx/package.json b/packages/mdx/package.json
@@ -51,8 +51,8 @@
     "hast-util-select": "^3.0.0",
     "jest": "^23.6.0",
     "prettier": "^1.14.2",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
     "rehype-katex": "^1.1.1",
     "remark-math": "^1.0.4"
   },

diff --git a/packages/parcel-plugin-mdx/package.json b/packages/parcel-plugin-mdx/package.json
@@ -32,12 +32,12 @@
   },
   "peerDependencies": {
     "@mdx-js/tag": "^0.13.1-1",
-    "react": "^0.14.x || ^15.x || ^16.x"
+    "react": "^16.8.0"
   },
   "devDependencies": {
     "jest": "^23.3.0",
-    "react": "^16.3.2",
-    "react-dom": "^16.3.2"
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
   },
   "scripts": {
     "test": "jest"

diff --git a/packages/runtime/package.json b/packages/runtime/package.json
@@ -43,8 +43,8 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "jest": "^23.6.0",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
     "rehype-add-classes": "^1.0.0",
     "remark-autolink-headings": "^5.0.0",
     "remark-slug": "^5.1.0",

diff --git a/packages/tag/package.json b/packages/tag/package.json
@@ -31,12 +31,12 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "jest": "^23.1.0",
-    "react": "^16.3.2",
-    "react-dom": "^16.3.2",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
     "rimraf": "^2.6.3"
   },
   "peerDependencies": {
-    "react": "^0.14.x || ^15.x || ^16.x"
+    "react": "^16.8.0"
   },
   "scripts": {
     "build": "babel src -d dist",

diff --git a/packages/tag/src/index.js b/packages/tag/src/index.js
@@ -1,2 +1,6 @@
 export {default as MDXTag} from './mdx-tag'
-export {default as MDXProvider, withMDXComponents} from './mdx-provider'
+export {
+  default as MDXContext,
+  MDXProvider,
+  withMDXComponents
+} from './mdx-context'
diff --git a/packages/tag/src/mdx-context.js b/packages/tag/src/mdx-context.js
@@ -0,0 +1,27 @@
+import React from 'react'
+
+const isFunction = obj => typeof obj === 'function'
+
+const MDXContext = React.createContext({})
+
+export const withMDXComponents = Component => props => {
+  const contextComponents = React.useContext(MDXContext)
+  const allComponents = props.components || contextComponents
+
+  return <Component {...props} components={allComponents} />
+}
+
+export const MDXProvider = props => {
+  const outerContextComponents = React.useContext(MDXContext)
+  const allComponents = isFunction(props.components)
+    ? props.components(outerContextComponents)
+    : props.components
+
+  return (
+    <MDXContext.Provider value={allComponents}>
+      {props.children}
+    </MDXContext.Provider>
+  )
+}
+
+export default MDXContext
diff --git a/packages/tag/src/mdx-provider.js b/packages/tag/src/mdx-provider.js
diff --git a/packages/tag/src/mdx-tag.js b/packages/tag/src/mdx-tag.js
@@ -1,6 +1,5 @@
 import React, {Component} from 'react'
-
-import {withMDXComponents} from './mdx-provider'
+import {withMDXComponents} from './mdx-context'
 
 const defaults = {
   inlineCode: 'code',