martiensk / vuex-jsdoc

A JSDoc plugin for documenting Vuex modules.
9 stars 2 forks source link

[Feature] - ability to consolidate all @name under single table #1

Open Elaniobro opened 4 years ago

Elaniobro commented 4 years ago

Great work, and thanks a lot for this! I have been using vuese.org for the components.

I was wondering if possible to have multiple codeblocks all be generated under a single table.

e.g.

   /**
  * The module 'getters' object.
  * @name Getters
  * @type {object} 
  * @getter {array} getCheckedRoles=arrayProp Returns an array property.
  */

  getCheckedRoles: (state) => (view) => {
    console.log(`getCheckedRoles was returned: {view: ${view}}`)
    return state.filtersInfo[view].checkedRoles
  },
  /**
  * The module 'getters' object.
  * @name Getters
  * @type {object} 
  * @getter {array} getCheckedRolesCount=arrayProp Returns a number.
  */
  getCheckedRolesCount: (state) => (view) => {
    console.log(`getCheckedRolesCount was returned: {view: ${view}}`)
    return state.filtersInfo[view].checkedRolesCount
  },

Currently with the above, I get two blocks in the out/index.htmlfile, where as I would prefer to have all my getter documentation under one big getter table in the out/index.html file. Screen Shot 2020-02-11 at 1 27 59 PM

martiensk commented 4 years ago

Just for some feedback, I am currently looking into your request here. May take some time but will be done as soon as I am able.

martiensk commented 4 years ago

Can you please provide me with a full file / test repo? I need to see exactly how you are documenting these getters. In the example above JSDoc detects them as methods. This is technically correct behaviour as the properties you are documenting are methods. Before I override the default behaviour I'd like to see the full use-case. As the @getter tag inherits from @property I generally use it above the getter key, as such:

/**
 * The module 'getters' object.
 * @name Getters
 * @type {object} 
 * @getter {array} getCheckedRolesCount=arrayProp Returns a number.
 * @getter {array} getCheckedRoles=arrayProp Returns an array property.
 */
getter: {
    getCheckedRoles: (state) => (view) => {
        console.log(`getCheckedRoles was returned: {view: ${view}}`)
        return state.filtersInfo[view].checkedRoles
    },
    getCheckedRolesCount: (state) => (view) => {
        console.log(`getCheckedRolesCount was returned: {view: ${view}}`)
        return state.filtersInfo[view].checkedRolesCount
    }
}
Elaniobro commented 4 years ago

Hey @martiensk unfortunately I cannot, its a private repo :/

However, what I pasted above is how I documented them, which gave me the two table results.

In order for me to get a single table I need to add them all together. Here is an example from my mutations.js file:

**
 * The module 'setters' object.
 * @name Mutations
 * @type {object}
 * @mutator {array} setCheckedRoles=filtersInfo[view].checkedRoles Sets the checkedRoles array property.
 * @mutator {number} setCheckedRolesCount=filtersInfo[view].checkedRolesCount Sets the checkedRolesCount number property.
 * @mutator {object} setContactInfo=trending.providers[view].contactInfo Sets the contactInfo object property.
 * @mutator {object} setDocsInfo=trending.providers[id].docsInfo Sets the docsInfo object property.
 * @mutator {array} setFiltersInfo=filtersInfo[view].roles Sets the roles array property.
*/

EDIT:

ah, I see. You are using getters as an object. I am using Nuxt, so my getters/actions/mutations are name spaced via the file names in a dir.

so my mutations.js, getters.js and actions.js looks like:

**
 * The module 'setters' object.
 * @name Mutations
 * @type {object}
 * @mutator {array} setCheckedRoles=filtersInfo[view].checkedRoles Sets the checkedRoles array property.
 * @mutator {number} setCheckedRolesCount=filtersInfo[view].checkedRolesCount Sets the checkedRolesCount number property.
**
export default {
  setCheckedRoles(state, { checkedRoles, view }) {
    // setting state.filters.checkedRoles
    state.filtersInfo[view].checkedRoles = checkedRoles
    console.log('setCheckedRoles complete')
  },
  setCheckedRolesCount(state, { checkedRoles, view }) {
    let count = 0
    checkedRoles.forEach((role) => {
      state[view].providers.filter((provider) => {
        if (provider.filterRole.toLowerCase() === role) {
          count++
        }
      })
    })

    state.filtersInfo[view].checkedRolesCount = count
    console.log('setCheckedRolesCount complete')
  },
}

where as I would like to use your module with the documentation block above each function declaration like so:


export default {
**
 * The module 'setters' object.
 * @name Mutations
 * @type {object}
 * @mutator {array} setCheckedRoles=filtersInfo[view].checkedRoles Sets the checkedRoles array property.
**
setCheckedRoles(state, { checkedRoles, view }) {
    // setting state.filters.checkedRoles
    state.filtersInfo[view].checkedRoles = checkedRoles
    console.log('setCheckedRoles complete')
  },
**
 * The module 'setters' object.
 * @name Mutations
 * @type {object}
 * @mutator {number} setCheckedRolesCount=filtersInfo[view].checkedRolesCount Sets the checkedRolesCount number property.
**
  setCheckedRolesCount(state, { checkedRoles, view }) {
    let count = 0
    checkedRoles.forEach((role) => {
      state[view].providers.filter((provider) => {
        if (provider.filterRole.toLowerCase() === role) {
          count++
        }
      })
    })

    state.filtersInfo[view].checkedRolesCount = count
    console.log('setCheckedRolesCount complete')
  },
}
martiensk commented 4 years ago

The above example is great, I will see what I can do to adapt the plugin for your use case.