Add an example combining react and web components and import into MDX doc

examples/react-web-components/.eslintignore

@@ -0,0 +1 @@
+dist

examples/react-web-components/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.cache
+public

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

@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: [
+    {
+      resolve: 'gatsby-plugin-mdx',
+      options: {
+        defaultLayouts: {
+          default: require.resolve('./src/components/Layout')
+        }
+      }
+    }
+  ]
+}

examples/react-web-components/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "react-web-components-example",
+  "version": "1.5.9",
+  "private": true,
+  "scripts": {
+    "build": "gatsby build",
+    "start": "gatsby develop"
+  },
+  "dependencies": {
+    "@mdx-js/mdx": "^1.5.9",
+    "@mdx-js/react": "^1.5.9",
+    "gatsby": "^2.20.27",
+    "gatsby-plugin-mdx": "^1.1.9",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  }
+}

examples/react-web-components/readme.md

@@ -0,0 +1,8 @@
+# Web components + React + MDX
+
+```sh
+yarn
+yarn start
+```
+
+> [Try it on CodeSandbox](https://codesandbox.io/s/github/mdx-js/mdx/tree/master/examples/react-web-components)

examples/react-web-components/src/components/Layout.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default ({children}) => (
+  <>
+    <main>{children}</main>
+  </>
+)

examples/react-web-components/src/components/WebComponent.js

@@ -0,0 +1,39 @@
+import React, {useRef} from 'react'
+
+class ImperativeCounter extends HTMLElement {
+  constructor() {
+    super()
+    this.shadow = this.attachShadow({mode: 'open'})
+    this.currentCount = 0
+    this.update()
+  }
+
+  update() {
+    this.shadow.innerHTML = `<div><h2>Count: ${this.currentCount}</h2></div>`
+  }
+
+  increment() {
+    this.currentCount++
+    this.update()
+  }
+}
+
+window.customElements.define('i-counter', ImperativeCounter)
+
+export const RenderCounter = () => {
+  const counterElement = useRef(null)
+  return (
+    <div>
+      <i-counter ref={counterElement}></i-counter>
+      <button onClick={() => counterElement.current.increment()}>
+        Increment
+      </button>
+    </div>
+  )
+}
+
+export default () => (
+  <>
+    <RenderCounter />
+  </>
+)

examples/react-web-components/src/pages/index.mdx

@@ -0,0 +1,5 @@
+import WebComponent from '../components/WebComponent'
+
+# Hello, world!
+
+<WebComponent />