Vue support

[sobolevn]

I am trying to bind together these two awesome things: documentation.js and vue.

Code

I am normally using vue single file components. I want to write documentation for it inside the same file. Like this:

<template>
  <div class="page">
    <p>
      This component is async!
    </p>

    <p>
      This data is async too!
    </p>

    <ul class="item" v-if="item">
      <li class="item-id">ID: {{ item.id }}</li>
      <li class="item-name">Name: {{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import AsyncDataMixin from 'mixins/async-data-mixin'

/**
* This component is used to async fetch and view an item.
*
* This item has `id` and `name`.
* It is only shown when loaded.
*/
export default {
  mixins: [AsyncDataMixin],

  asyncData ({ store }) {
    return store.dispatch('fetchAsync')
  },

  computed: {
    ...mapState(['item'])
  }
}
</script>

<style lang="scss" scoped>
ul {
  list-style: none;
}
</style>

Error

When trying to run: documentation build --shallow client/views/Async.vue -f md I receive this error:

SyntaxError: Unexpected token, expected , (12:37)
    at Parser.pp$5.raise (/Users/sobolev/Documents/github/wemake-vue-template/template/node_modules/babylon/lib/index.js:4454:13)
    at Parser.pp.unexpected (/Users/sobolev/Documents/github/wemake-vue-template/template/node_modules/babylon/lib/index.js:1761:8)
    at Parser.pp.expect (/Users/sobolev/Documents/github/wemake-vue-template/template/node_modules/babylon/lib/index.js:1749:33)
    at Parser.pp$3.parseObj (/Users/sobolev/Documents/github/wemake-vue-template/template/node_modules/babylon/lib/index.js:3978:12)
    at Parser.pp$3.parseExprAtom (/Users/sobolev/Documents/github/wemake-vue-template/template/node_modules/babylon/lib/index.js:3719:19)
    at Parser.parseExprAtom (/Users/sobolev/Documents/github/wemake-vue-template/template/node_modules/babylon/lib/index.js:7238:22)
    at Parser.pp$3.parseExprSubscripts (/Users/sobolev/Documents/github/wemake-vue-template/template/node_modules/babylon/lib/index.js:3494:19)
    at Parser.pp$3.parseMaybeUnary (/Users/sobolev/Documents/github/wemake-vue-template/template/node_modules/babylon/lib/index.js:3474:19)
    at Parser.pp$3.parseExprOps (/Users/sobolev/Documents/github/wemake-vue-template/template/node_modules/babylon/lib/index.js:3404:19)
    at Parser.pp$3.parseMaybeConditional (/Users/sobolev/Documents/github/wemake-vue-template/template/node_modules/babylon/lib/index.js:3381:19)
error Command failed with exit code 1.

Versions

• node v8.9.1
• npm v5.5.1
• documetation ^5.3.3
• vue ^2.5.2

Full example

Here's a template I am trying to use https://github.com/wemake-services/wemake-vue-template

[tmcw]

There isn't currently Vue support - we'd need to be able to parse .vue files for their JavaScript contents. I'd happily review and accept a PR implementing support!

[sobolevn]

Where should I start from? Any suggestions?

[tmcw]

I'm not a Vue coder, so kind of just reading this as I go, but

The key is to extract the JavaScript contents, the vuejs tool that does that is vue-loader, that extracts parts using a parse method in parser, that uses vue-template-compiler, which is a package in vue, and auto-compiled in src/platforms, and that refers to sfc/parser.

I think sfc/parser is the part of vue you want, and you should be able to require it with require('vue/sfc/parser').

On the documentation side, I think you'd have a parsers/vue alongside the existing parsers/javascript, and you'd use it whenever you see a .vue file here.

[sobolevn]

Thanks, I am all into this.

[batje]

I made a stab at this in the pull request.

[sobolevn]

It is now working!

Demo: https://wemake-services.gitbook.io/wemake-vue-template/api
Source code: https://github.com/wemake-services/wemake-vue-template