mdx-js · johno · Apr 4, 2019 · Feb 26, 2019 · Feb 27, 2019 · Feb 28, 2019
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -36,6 +36,7 @@ rules:
   react/prop-types: off
   react/display-name: off
   react/no-children-prop: off
+  react/react-in-jsx-scope: off
 
 settings:
   react: 

diff --git a/docs/advanced/index.md b/docs/advanced/index.md
@@ -6,7 +6,7 @@ Most users won’t typically need to interact with the library but instead use a
 
 ## Usage
 
-For advanced use cases you can use the library directly.  By default, MDX is asynchronous because plugins can be asynchronous themselves.  This means that plugins can request data, read from the file system.  Anything!
+For advanced use cases you can use the library directly.  By default, MDX is asynchronous because plugins can be asynchronous themselves!  This means that plugins can make request data, read from the file system.  Anything!
 
 ```js
 var mdx = require("@mdx-js/mdx")

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/gatsby/package.json b/examples/gatsby/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
-  "name": "gatsby",
   "version": "0.0.1",
+  "name": "gatsby-example",
   "scripts": {
     "start": "gatsby develop",
     "build": "gatsby build"

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/examples/vue/.gitignore b/examples/vue/.gitignore
@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
diff --git a/examples/vue/README.md b/examples/vue/README.md
@@ -0,0 +1,29 @@
+# vue
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn run serve
+```
+
+### Compiles and minifies for production
+```
+yarn run build
+```
+
+### Run your tests
+```
+yarn run test
+```
+
+### Lints and fixes files
+```
+yarn run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/examples/vue/babel.config.js b/examples/vue/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}
diff --git a/examples/vue/package.json b/examples/vue/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "vue-example",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "vue": "^2.6.6"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.4.0",
+    "@vue/cli-plugin-eslint": "^3.4.0",
+    "@vue/cli-service": "^3.4.0",
+    "@mdx-js/vue-loader": "^1.0.0-alpha.4",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.8.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "vue-template-compiler": "^2.5.21"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}
diff --git a/examples/vue/public/favicon.ico b/examples/vue/public/favicon.ico
diff --git a/examples/vue/public/index.html b/examples/vue/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>vue</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/examples/vue/src/App.vue b/examples/vue/src/App.vue
@@ -0,0 +1,17 @@
+<template>
+  <div id="app">
+    <h1>Hello MDX</h1>
+    <Test />
+  </div>
+</template>
+
+<script>
+import Test from './test.mdx'
+
+export default {
+  name: 'app',
+  components: {
+    Test: Test
+  }
+}
+</script>
diff --git a/examples/vue/src/assets/logo.png b/examples/vue/src/assets/logo.png
diff --git a/examples/vue/src/components/HelloWorld.vue b/examples/vue/src/components/HelloWorld.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
diff --git a/examples/vue/src/main.js b/examples/vue/src/main.js
@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')
diff --git a/examples/vue/src/test.mdx b/examples/vue/src/test.mdx
@@ -0,0 +1,6 @@
+# Hello, world!
+
+Here's more stuff
+
+<div style={{ padding: '21px', backgroundColor: 'tomato' }} />
+
diff --git a/examples/vue/vue.config.js b/examples/vue/vue.config.js
@@ -0,0 +1,15 @@
+module.exports = {
+  configureWebpack: {
+    module: {
+      rules: [
+        {
+          test: /.mdx?$/,
+          use: [
+            'babel-loader',
+            '@mdx-js/vue-loader'
+          ]
+        }
+      ]
+    }
+  }
+}