Add JSDoc as good practice

.eslintignore

@@ -6,3 +6,4 @@
 /testArtifacts
 /test/unit/coverage/
 /.vscode/settings.json
+/docs/cosmos-voyager/

.gitignore

@@ -13,4 +13,5 @@ thumbs.db
 yarn-error.log
 testArtifacts/*
 app/networks/local-testnet/*
+docs/cosmos-voyager
 .idea/*

.prettierignore

@@ -3,3 +3,4 @@
 /package.json
 /test/unit/coverage/
 /test/unit/tmp/
+/docs/cosmos-voyager/

CHANGELOG.md

@@ -53,6 +53,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - [\#1661](https://github.com/cosmos/voyager/issues/1661) Boot: multinode available for local-testnet @sabau
 - [\#1748](https://github.com/cosmos/voyager/issues/1748) display governance parameters on tab @fedekunze
 - [\#1660](https://github.com/cosmos/voyager/issues/1660) Add parameters and pool to store @fedekunze
+- [\#1739](https://github.com/cosmos/voyager/issues/1739) Init jsDoc into project @sabau
 - [\#1674](https://github.com/cosmos/voyager/issues/1674) Add PageProfile component with shared styles for validator and proposal profiles @jbibla
 
 ### Changed

README.md

@@ -201,6 +201,18 @@ yarn pack
 node_modules/.bin/tape test/e2e/init.js
 ```
 
+### Documentation
+
+To produce an up-to date documentation you can run:
+
+```bash
+$ yarn doc
+```
+
+This will store an HTML static website containing all the documented modules and components that you can consult.
+
+The output folder is: `docs/cosmos-voyager/[#version]`
+
 ### Code coverage
 
 To check test coverage locally run following. It will spin up a webserver and provide you with a link to the coverage report web page.

app/src/renderer/App.vue

@@ -30,6 +30,19 @@ import ModalReceive from "common/TmModalReceive"
 import Onboarding from "common/TmOnboarding"
 import Session from "common/TmSession"
 import store from "./vuex/store"
+
+/**
+ * Main App component
+ * @vue-prop {String} propname Just an example
+ * @vue-prop {Number} [niceProp=1] - A very cool incoerent prop not required but with 1 as default
+ * @vue-data {Object} nothing
+ * @vue-computed {function} notifications mapGetter
+ * @vue-computed {function} config mapGetter
+ * @vue-computed {function} themes mapGetter
+ * @vue-computed {function} approval mapGetter
+ * @vue-computed {function} required mapGetter
+ * @vue-computed {function} onboarding mapGetter
+ */
 export default {
   name: `app`,
   components: {

app/src/renderer/components/wallet/PageWallet.vue

@@ -64,6 +64,26 @@ import TmDataMsg from "common/TmDataMsg"
 import TmBalance from "common/TmBalance"
 import ModalSearch from "common/TmModalSearch"
 import ToolBar from "common/ToolBar"
+
+/**
+ * Page Wallet
+ * @vue-prop {Number} num Module that implements all the numerical methods
+ * @vue-computed {function} filters mapGetter
+ * @vue-computed {function} wallet mapGetter
+ * @vue-computed {function} committedDelegations mapGetter
+ * @vue-computed {function} oldBondedAtoms mapGetter
+ * @vue-computed {function} config mapGetter
+ * @vue-computed {function} connected mapGetter
+ *
+ * @vue-computed {function} somethingToSearch returns a boolean stating true if we have data and we are not in loading phase
+ * @vue-computed {function} allDenomBalances for denoms not in balances, add empty balance
+ * @vue-computed {function} filteredBalances filter the balance per coin name, returns an ordered list
+ *
+ * @vue-methods {function} updateDelegates mapAction
+ * @vue-methods {function} updateDelegates mapAction
+ * @vue-methods {function} setSearch launches the setSearchVisible action if somethingToSearch returns true
+ * @vue-methods {function} updateBalances dispatch a queryWalletBalances action to update the informations
+ */
 export default {
   name: `page-wallet`,
   components: {

app/src/renderer/google-analytics.js

@@ -1,5 +1,8 @@
 "use strict"
-
+/**
+ * Google analytics gets injected here
+ * @module google-analytics
+ */
 import Analytics from "electron-ga"
 
 module.exports = function(gaUID) {

app/src/renderer/main.js

@@ -1,4 +1,8 @@
 "use strict"
+/**
+ * Main module
+ * @module main
+ */
 
 import Vue from "vue"
 import Electron from "vue-electron"
@@ -71,6 +75,9 @@ Vue.directive(`focus`, {
   }
 })
 
+/**
+ * Main method to boot the renderer. It act as Entrypoint
+ */
 async function main() {
   let lcdPort = config.development ? config.lcd_port : config.lcd_port_prod
   let localLcdURL = `https://localhost:${lcdPort}`

app/src/renderer/routes.js

@@ -1,17 +1,16 @@
-function r(type, pageName) {
-  return require(`./components/${type}/Page${pageName}`).default
-}
-
-let common = r.bind(null, `common`)
-let governance = r.bind(null, `governance`)
-let staking = r.bind(null, `staking`)
-let wallet = r.bind(null, `wallet`)
+/**
+ * In this module we took care of the definition of our routes, with parameters, children and component related to them
+ * @module routes
+ */
 
+/**
+ * Routes are all defined here
+ */
 export default [
   {
     path: `/governance`,
     name: `Governance`,
-    component: governance(`Governance`),
+    component: require(`./components/governance/PageGovernance`).default,
     redirect: `/governance/proposals`,
     children: [
       {
@@ -36,7 +35,7 @@ export default [
   {
     path: `/staking`,
     name: `Staking`,
-    component: staking(`Staking`),
+    component: require(`./components/staking/PageStaking`).default,
     redirect: `/staking/my-delegations/`,
     children: [
       {
@@ -59,32 +58,32 @@ export default [
   {
     path: `/staking/validators/:validator`,
     name: `validator`,
-    component: staking(`Validator`)
+    component: require(`./components/staking/PageValidator`).default
   },
 
   {
     path: `/preferences`,
     name: `preferences`,
-    component: common(`Preferences`)
+    component: require(`./components/common/PagePreferences`).default
   },
 
   {
     path: `/`,
     name: `wallet`,
-    component: wallet(`Wallet`)
+    component: require(`./components/wallet/PageWallet`).default
   },
   {
     path: `/wallet/send/:denom?`,
     name: `send`,
     props: true,
-    component: wallet(`Send`)
+    component: require(`./components/wallet/PageSend`).default
   },
   {
     path: `/transactions`,
     name: `transactions`,
-    component: wallet(`Transactions`)
+    component: require(`./components/wallet/PageTransactions`).default
   },
 
-  { path: `/404`, component: common(`404`) },
-  { path: `*`, component: common(`404`) }
+  { path: `/404`, component: require(`./components/common/Page404`).default },
+  { path: `*`, component: require(`./components/common/Page404`).default }
 ]

app/src/renderer/scripts/num.js

@@ -1,4 +1,8 @@
 "use strict"
+/**
+ * Defines all numerical methods
+ * @module num
+ */
 
 const numeral = require(`numeral`)
 function usd(num) {

app/src/renderer/vuex/store.js

@@ -1,4 +1,8 @@
 "use strict"
+/**
+ * Main store module
+ * @module store
+ */
 
 import Vue from "vue"
 import Vuex from "vuex"
@@ -8,6 +12,11 @@ import modules from "./modules"
 
 Vue.use(Vuex)
 
+/**
+ * Module Store
+ * @param opts
+ * @returns {Vuex.Store}
+ */
 export default (opts = {}) => {
   // provide commit and dispatch to tests
   opts.commit = (...args) => store.commit(...args)
@@ -57,6 +66,10 @@ export default (opts = {}) => {
   return store
 }
 
+/**
+ * Persist the state passed as parameter
+ * @param state
+ */
 function persistState(state) {
   const cachedState = JSON.stringify({
     transactions: {
@@ -88,12 +101,22 @@ function persistState(state) {
   localStorage.setItem(getStorageKey(state), cachedState)
 }
 
+/**
+ * Get a storage key
+ * @param state
+ * @returns {string}
+ */
 function getStorageKey(state) {
   const chainId = state.connection.lastHeader.chain_id
   const address = state.user.address
   return `store_${chainId}_${address}`
 }
 
+/**
+ * load persisted state
+ * @param state
+ * @param commit
+ */
 function loadPersistedState({ state, commit }) {
   const storageKey = getStorageKey(state)
   let cachedState

jsdoc.json

@@ -0,0 +1,27 @@
+{
+  "plugins": [
+    "plugins/markdown",
+    "plugins/summarize",
+    "node_modules/jsdoc-vuejs"
+  ],
+  "recurseDepth": 10,
+  "source": {
+    "include": ["./package.json", "./app/src/"],
+    "includePattern": "\\.((js(doc|x)?)|vuex?)$",
+    "excludePattern": "(^|\\/|\\\\)_"
+  },
+  "sourceType": "module",
+  "tags": {
+    "allowUnknownTags": true,
+    "dictionaries": ["jsdoc", "closure"]
+  },
+  "templates": {
+    "cleverLinks": false,
+    "monospaceLinks": false
+  },
+  "opts": {
+    "encoding": "utf8",
+    "destination": "./docs/",
+    "recurse": true
+  }
+}

package.json

@@ -18,6 +18,7 @@
     "build:testnets": "cd tasks/build/testnets && ./localBuild.sh",
     "build:gaia": "cd tasks/build/Gaia && ./localBuild.sh",
     "build:local": "node tasks/build/local/build",
+    "doc": "jsdoc -r -c jsdoc.json",
     "start": "node tasks/testnet.js",
     "testnet": "echo \"'yarn testnet' has been deprecated. Please use 'yarn start'\"",
     "lint": "yarn lint:eslint && yarn lint:format",
@@ -70,6 +71,8 @@
     "html-webpack-plugin": "2.30.1",
     "http-server": "0.11.1",
     "husky": "0.14.3",
+    "jsdoc": "3.5.5",
+    "jsdoc-vuejs": "2.3.3",
     "jest": "23.6.0",
     "jest-localstorage-mock": "2.3.0",
     "json-loader": "0.5.7",