Vue, rebased (#1029)

* feat(vue): implemented context for vue * test(vue): documented vue tests * bump vue versions, fix loader test, get example app running with MDX and MDXProvider * Update examples/vue/package.json * Update examples/vue/package.json * Update package.json * Update packages/vue-loader/package.json * Update packages/vue-loader/package.json * Update packages/vue/package.json Co-authored-by: codebender828 <[email protected]> Co-authored-by: John Otander <[email protected]>
mdx-js · Apr 27, 2020 · 47b2c62 · 47b2c62
1 parent a5389a1
commit 47b2c62
Show file tree

Hide file tree

Showing 19 changed files with 266 additions and 499 deletions.
diff --git a/examples/vue/src/App.vue b/examples/vue/src/App.vue
@@ -1,17 +1,30 @@
 <template>
   <div id="app">
     <h1>Hello MDX</h1>
-    <Test />
+    <MDXProvider v-bind:components="components">
+      <Test />
+    </MDXProvider>
   </div>
 </template>
 
 <script>
+import {MDXProvider} from '@mdx-js/vue'
+import HelloWorld from './components/HelloWorld'
 import Test from './test.mdx'
 
 export default {
   name: 'app',
   components: {
-    Test: Test
+    Test,
+    MDXProvider
+  },
+  data() {
+    return {
+      components: {
+        section: props => HelloWorld,
+        wrapper: props => 'article'
+      }
+    }
   }
 }
 </script>
diff --git a/examples/vue/src/test.mdx b/examples/vue/src/test.mdx
@@ -2,4 +2,4 @@
 
 Here’s more stuff
 
-<div style={{ padding: '21px', backgroundColor: 'tomato' }} />
+<section style={{padding: '21px', backgroundColor: 'tomato'}} />
diff --git a/package.json b/package.json
@@ -41,7 +41,7 @@
     "@mdx-js/mdx": "^1.5.8",
     "@mdx-js/react": "^1.5.8",
     "@mdx-js/test-util": "^1.5.8",
-    "@mdx-js/vue": "^1.5.8",
+    "@mdx-js/vue": "^1.5.9",
     "@pkgr/rollup": "0.10.3",
     "@vue/babel-preset-jsx": "1.1.2",
     "@vue/test-utils": "1.0.0-beta.33",
@@ -109,9 +109,7 @@
   "jest": {
     "testPathIgnorePatterns": [
       "/.cache/",
-      "<rootDir>/examples/create-react-app",
-      "<rootDir>/packages/vue",
-      "<rootDir>/packages/vue-loader"
+      "<rootDir>/examples/create-react-app"
     ],
     "testEnvironment": "node"
   },

diff --git a/packages/vue-loader/index.js b/packages/vue-loader/index.js
@@ -14,19 +14,28 @@ module.exports = async function (content) {
     return callback(err)
   }
 
-  const code = `// vue babel plugin doesn't support the pragma replacement
-import {mdx} from '@mdx-js/vue'
+  const code = `// vue babel plugin doesn't support pragma replacement
+import { mdx } from '@mdx-js/vue'
 let h;
 ${result}
 
 export default {
   name: 'Mdx',
-  render(vueCreateElement) {
-    h = mdx.bind({vueCreateElement})
-    return MDXContent({})
+  inject: {
+    $mdxComponents: {
+      default: () => () => ({})
+    }
+  },
+  computed: {
+    components() {
+      return this.$mdxComponents()
+    }
+  },
+  render(createElement) {
+    h = mdx.bind({ createElement, components: this.components })
+    return MDXContent({ components: this.components })
   }
 }
    `
-
   return callback(null, code)
 }
diff --git a/packages/vue-loader/package.json b/packages/vue-loader/package.json
@@ -15,7 +15,8 @@
     "Tim Neutkens <[email protected]>",
     "Matija Marohnić <[email protected]>",
     "Titus Wormer <[email protected]> (https://wooorm.com)",
-    "JounQin <[email protected]> (https://www.1stg.me)"
+    "JounQin <[email protected]> (https://www.1stg.me)",
+    "Jonathan Bakebwa <[email protected]> (https://jbakebwa.dev)"
   ],
   "license": "MIT",
   "files": [

diff --git a/packages/vue-loader/test/test.js b/packages/vue-loader/test/test.js
@@ -1,55 +1,28 @@
 const path = require('path')
-const webpack = require('webpack')
-const MemoryFs = require('memory-fs')
-const {VueJSXCompiler} = require('@mdx-js/vue')
+const fs = require('fs').promises
+const {transformAsync} = require('@babel/core')
 
-const testFixture = fixture => {
-  const fileName = `./${fixture}`
+const loader = require('..')
 
-  const compiler = webpack({
-    context: __dirname,
-    entry: `./${fixture}`,
-    output: {
-      path: path.resolve(__dirname),
-      filename: 'bundle.js'
-    },
-    node: {
-      fs: 'empty'
-    },
-    module: {
-      rules: [
-        {
-          test: /\.md?$/,
-          use: [
-            {
-              loader: 'babel-loader',
-              options: {
-                presets: ['@babel/preset-env'],
-                plugins: ['transform-vue-jsx']
-              }
-            },
-            {
-              loader: path.resolve(__dirname, '..'),
-              options: {
-                compilers: [VueJSXCompiler]
-              }
-            }
-          ]
-        }
-      ]
-    }
-  })
+const testFixture = async fixture => {
+  const str = await fs.readFile(path.join(__dirname, fixture), 'utf-8')
 
-  compiler.outputFileSystem = new MemoryFs()
+  let result
+  await loader.bind({
+    async: () => (err, res) => {
+      if (err) {
+        throw err
+      }
 
-  return new Promise((resolve, reject) => {
-    compiler.run((err, stats) => {
-      if (err) reject(err)
-      const module = stats.toJson().modules.find(m => m.name === fileName)
-        .source
-      resolve(module)
-    })
+      result = res
+    }
+  })(str)
+  const {code} = await transformAsync(result, {
+    presets: ['@babel/preset-env'],
+    plugins: ['transform-vue-jsx']
   })
+
+  return code
 }
 
 test('it loads markdown and returns a component', async () => {

diff --git a/packages/vue/.babelrc b/packages/vue/.babelrc
diff --git a/packages/vue/package.json b/packages/vue/package.json
@@ -2,29 +2,41 @@
   "name": "@mdx-js/vue",
   "version": "1.5.9",
   "description": "MDX support for Vue components",
-  "repository": "mdx-js/mdx",
-  "funding": {
-    "type": "opencollective",
-    "url": "https://opencollective.com/unified"
-  },
-  "contributors": [
-    "JounQin <[email protected]> (https://www.1stg.me)"
-  ],
-  "license": "MIT",
   "main": "dist/cjs.js",
   "module": "dist/esm.js",
+  "license": "MIT",
+  "author": "Jonathan Bakebwa <[email protected]> (https://jbakebwa.dev)",
   "files": [
     "dist"
   ],
+  "scripts": {
+    "dev": "watch 'yarn build' src",
+    "build": "yarn build:cjs && yarn build:es",
+    "build:cjs": "cross-env NODE_ENV=production BABEL_ENV=cjs babel src -d dist --copy-files",
+    "build:es": "cross-env NODE_ENV=production BABEL_ENV=es babel src -d dist/es --copy-files",
+    "test": "jest"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.5",
+    "cross-env": "^7.0.2",
+    "watch": "^1.0.2"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env"
+    ],
+    "exclude": [
+      "node_modules"
+    ]
+  },
   "keywords": [
     "markdown",
     "vue",
     "mdx",
     "remark"
   ],
-  "scripts": {
-    "no-test": "jest"
-  },
   "jest": {
     "testEnvironment": "jsdom"
   }

diff --git a/packages/vue/src/create-element.js b/packages/vue/src/create-element.js
@@ -1,3 +1,61 @@
+/**
+ * MDX default components
+ */
+const DEFAULTS = {
+  inlineCode: 'code',
+  wrapper: 'div'
+}
+
+/**
+ * Renders final tag/component
+ * @param {Vue.Component|String} type Element or tag to render
+ * @param {Object|Array} props Props and attributes for element
+ * @param {Array} children Array of child nodes for component
+ * @returns {Vue.VNode} VNode of final rendered element
+ */
 export default function(type, props, children) {
-  return this.vueCreateElement(type, props, children)
+
+  const h = this.createElement
+  const components = this.components
+  const defaults = Object.keys(DEFAULTS)
+
+  let tag
+  let elProps = props
+
+  // We check context to see if the element/tag
+  // is provided in the MDXProvider context.
+  if (Object.keys(components).includes(type)) {
+    // We check to see if props is of type object.
+    // If it is, then we pass them into the MDXContext component
+    const componentProps = typeof props === 'object' ? props : undefined
+    tag = components[type](componentProps)
+
+  } else if (defaults.includes(type)) {
+
+    tag = DEFAULTS[type]
+    // Remove components object from attrs
+    const { components, ...attrs } = elProps.attrs
+    elProps = {
+      attrs
+    }
+
+  // Render final tag if component is not provided in context
+  } else {
+    tag = type
+
+    if (['a', 'input', 'img'].includes(tag)) {
+      const { attrs, ...domProps } = elProps
+      const data = {
+        attrs: attrs,
+        domProps
+      }
+
+      elProps = {
+        ...elProps,
+        ...data
+      }
+    }
+  }
+
+  return h(tag, elProps, children)
 }
diff --git a/packages/vue/src/index.js b/packages/vue/src/index.js
@@ -1 +1,2 @@
-export {default as mdx} from './create-element'
+export { default as mdx } from './create-element';
+export { default as MDXProvider } from './mdx-provider'