fix(renderers): types with < and > were rendered as HTML (#85)

`Array.<String>` was visually rendered as `Array.`, because `<String>` was interpreted as an HTML tag.

Fix #84

cypress/integration/renderers/default.spec.js

@@ -97,11 +97,11 @@ describe('Renderers: default', () => {
         expect($rows).to.have.length(3);
 
         expect($firstRowChildren.eq(0).html()).to.eq('<b>fooList</b>');
-        expect($firstRowChildren.eq(1).html()).to.eq('Array');
+        expect($firstRowChildren.eq(1).html()).to.eq('Array.&lt;String&gt;');
         expect($firstRowChildren.eq(2).html()).to.eq('A list of foo');
 
         expect($secondRowChildren.eq(0).html()).to.eq('<b>barList</b>');
-        expect($secondRowChildren.eq(1).html()).to.eq('Array');
+        expect($secondRowChildren.eq(1).html()).to.eq('Array.&lt;String&gt;');
         expect($secondRowChildren.eq(2).html()).to.eq('A list of bar');
 
         expect($thirdRowChildren.eq(0).html()).to.eq('<b>message</b>');

cypress/integration/renderers/docstrap.spec.js

@@ -97,11 +97,11 @@ describe('Renderers: docstrap', () => {
         expect($rows).to.have.length(3);
 
         expect($firstRowChildren.eq(0).html()).to.eq('<b>fooList</b>');
-        expect($firstRowChildren.eq(1).html()).to.eq('Array');
+        expect($firstRowChildren.eq(1).html()).to.eq('Array.&lt;String&gt;');
         expect($firstRowChildren.eq(2).html()).to.eq('A list of foo');
 
         expect($secondRowChildren.eq(0).html()).to.eq('<b>barList</b>');
-        expect($secondRowChildren.eq(1).html()).to.eq('Array');
+        expect($secondRowChildren.eq(1).html()).to.eq('Array.&lt;String&gt;');
         expect($secondRowChildren.eq(2).html()).to.eq('A list of bar');
 
         expect($thirdRowChildren.eq(0).html()).to.eq('<b>message</b>');

cypress/integration/renderers/minami.spec.js

@@ -101,12 +101,12 @@ describe('Renderers: minami', () => {
 
         expect($firstRowChildren.eq(0).html()).to.eq('fooList');
         expect($firstRowChildren.eq(0).attr('class')).to.eq('name');
-        expect($firstRowChildren.eq(1).html()).to.eq('Array');
+        expect($firstRowChildren.eq(1).html()).to.eq('Array.<String>');
         expect($firstRowChildren.eq(2).html()).to.eq('A list of foo');
 
         expect($secondRowChildren.eq(0).html()).to.eq('barList');
         expect($secondRowChildren.eq(0).attr('class')).to.eq('name');
-        expect($secondRowChildren.eq(1).html()).to.eq('Array');
+        expect($secondRowChildren.eq(1).html()).to.eq('Array.<String>');
         expect($secondRowChildren.eq(2).html()).to.eq('A list of bar');
 
         expect($thirdRowChildren.eq(0).html()).to.eq('message');

cypress/integration/renderers/tui.spec.js

@@ -97,11 +97,11 @@ describe('Renderers: tui', () => {
         expect($rows).to.have.length(3);
 
         expect($firstRowChildren.eq(0).html()).to.eq('<b>fooList</b>');
-        expect($firstRowChildren.eq(1).html()).to.eq('Array');
+        expect($firstRowChildren.eq(1).html()).to.eq('Array.&lt;String&gt;');
         expect($firstRowChildren.eq(2).html()).to.eq('A list of foo');
 
         expect($secondRowChildren.eq(0).html()).to.eq('<b>barList</b>');
-        expect($secondRowChildren.eq(1).html()).to.eq('Array');
+        expect($secondRowChildren.eq(1).html()).to.eq('Array.&lt;String&gt;');
         expect($secondRowChildren.eq(2).html()).to.eq('A list of bar');
 
         expect($thirdRowChildren.eq(0).html()).to.eq('<b>message</b>');

example/src/BetterCounter.vue

@@ -14,8 +14,8 @@
    * @vue-prop {Number} initialCounter
    * @vue-prop {Number} [step=1] Step
    * @vue-data {Number} counter - Current counter's value
-   * @vue-computed {Array} fooList - A list of foo
-   * @vue-computed {Array} barList - A list of bar
+   * @vue-computed {Array.<String>} fooList - A list of foo
+   * @vue-computed {Array.<String>} barList - A list of bar
    * @vue-computed {String} message A message
    */
   export default {

lib/renderers/default.js

@@ -1,5 +1,6 @@
 const makeTableHead = headers => `<thead><th>${headers.join('</th><th>')}</th></thead>`;
 const makeTableBody = (items, cb) => `<tbody>${items.map(item => `<tr>${cb(item).trim()}</tr>`).join('')}</tbody>`;
+const renderTypes = require('./utils/renderTypes');
 
 module.exports = function renderDefault(description, props = [], data = [], computed = []) {
   let html = description;
@@ -15,7 +16,7 @@ module.exports = function renderDefault(description, props = [], data = [], comp
     html += makeTableHead(['Name', 'Type', 'Default value', 'Required ?', 'Description']);
     html += makeTableBody(props, item => `
       <td><b>${item.name}</b></td>
-      <td>${(item.type.names || []).join(', ')}</td>
+      <td>${renderTypes(item.type.names || [])}</td>
       <td>${typeof item.defaultvalue === 'undefined' ? '-' : `<code>${item.defaultvalue}</code>`}</td>
       <td>${item.optional ? 'No' : '<b>Yes</b>'}</td>
       <td>${typeof item.description === 'undefined' ? '-' : item.description}</td>
@@ -29,7 +30,7 @@ module.exports = function renderDefault(description, props = [], data = [], comp
     html += makeTableHead(['Name', 'Type', 'Default value', 'Description']);
     html += makeTableBody(data, item => `
       <td><b>${item.name}</b></td>
-      <td>${(item.type.names || []).join(', ')}</td>
+      <td>${renderTypes(item.type.names || [])}</td>
       <td>${typeof item.defaultvalue === 'undefined' ? '-' : `<code>${item.defaultvalue}</code>`}</td>
       <td>${typeof item.description === 'undefined' ? '-' : item.description}</td>
     `);
@@ -42,7 +43,7 @@ module.exports = function renderDefault(description, props = [], data = [], comp
     html += makeTableHead(['Name', 'Type', 'Description']);
     html += makeTableBody(computed, item => `
       <td><b>${item.name}</b></td>
-      <td>${(item.type.names || []).join(', ')}</td>
+      <td>${renderTypes(item.type.names || [])}</td>
       <td>${typeof item.description === 'undefined' ? '-' : item.description}</td>
     `);
     html += '</table>';

lib/renderers/docstrap.js

@@ -1,5 +1,6 @@
 const makeTableHead = headers => `<thead><th>${headers.join('</th><th>')}</th></thead>`;
 const makeTableBody = (items, cb) => `<tbody>${items.map(item => `<tr>${cb(item).trim()}</tr>`).join('')}</tbody>`;
+const renderTypes = require('./utils/renderTypes');
 
 module.exports = function renderDocstrap(description, props = [], data = [], computed = []) {
   let html = description;
@@ -16,7 +17,7 @@ module.exports = function renderDocstrap(description, props = [], data = [], com
     html += makeTableHead(['Name', 'Type', 'Default value', 'Required ?', 'Description']);
     html += makeTableBody(props, item => `
       <td><b>${item.name}</b></td>
-      <td>${(item.type.names || []).join(', ')}</td>
+      <td>${renderTypes(item.type.names || [])}</td>
       <td>${typeof item.defaultvalue === 'undefined' ? '-' : `<code>${item.defaultvalue}</code>`}</td>
       <td>${item.optional ? 'No' : '<b>Yes</b>'}</td>
       <td>${typeof item.description === 'undefined' ? '-' : item.description}</td>
@@ -31,7 +32,7 @@ module.exports = function renderDocstrap(description, props = [], data = [], com
     html += makeTableHead(['Name', 'Type', 'Default value', 'Description']);
     html += makeTableBody(data, item => `
       <td><b>${item.name}</b></td>
-      <td>${(item.type.names || []).join(', ')}</td>
+      <td>${renderTypes(item.type.names || [])}</td>
       <td>${typeof item.defaultvalue === 'undefined' ? '-' : `<code>${item.defaultvalue}</code>`}</td>
       <td>${typeof item.description === 'undefined' ? '-' : item.description}</td>
     `);
@@ -45,7 +46,7 @@ module.exports = function renderDocstrap(description, props = [], data = [], com
     html += makeTableHead(['Name', 'Type', 'Description']);
     html += makeTableBody(computed, item => `
       <td><b>${item.name}</b></td>
-      <td>${(item.type.names || []).join(', ')}</td>
+      <td>${renderTypes(item.type.names || [])}</td>
       <td>${typeof item.description === 'undefined' ? '-' : item.description}</td>
     `);
     html += '</table>';

lib/renderers/minami.js

@@ -1,5 +1,6 @@
 const makeTableHead = headers => `<thead><th>${headers.join('</th><th>')}</th></thead>`;
 const makeTableBody = (items, cb) => `<tbody>${items.map(item => `<tr>${cb(item).trim()}</tr>`).join('')}</tbody>`;
+const renderTypes = require('./utils/renderTypes');
 
 module.exports = function renderMinami(description, props = [], data = [], computed = []) {
   let html = description;
@@ -12,7 +13,7 @@ module.exports = function renderMinami(description, props = [], data = [], compu
     html += makeTableHead(['Name', 'Type', 'Default value', 'Required ?', 'Description']);
     html += makeTableBody(props, item => `
       <td class="name">${item.name}</td>
-      <td>${(item.type.names || []).join(', ')}</td>
+      <td>${renderTypes(item.type.names || [])}</td>
       <td>${typeof item.defaultvalue === 'undefined' ? '-' : `<code>${item.defaultvalue}</code>`}</td>
       <td>${item.optional ? 'No' : '<b>Yes</b>'}</td>
       <td>${typeof item.description === 'undefined' ? '-' : item.description}</td>
@@ -26,7 +27,7 @@ module.exports = function renderMinami(description, props = [], data = [], compu
     html += makeTableHead(['Name', 'Type', 'Default value', 'Description']);
     html += makeTableBody(data, item => `
       <td class="name">${item.name}</td>
-      <td>${(item.type.names || []).join(', ')}</td>
+      <td>${renderTypes(item.type.names || [])}</td>
       <td>${typeof item.defaultvalue === 'undefined' ? '-' : `<code>${item.defaultvalue}</code>`}</td>
       <td>${typeof item.description === 'undefined' ? '-' : item.description}</td>
     `);
@@ -39,7 +40,7 @@ module.exports = function renderMinami(description, props = [], data = [], compu
     html += makeTableHead(['Name', 'Type', 'Description']);
     html += makeTableBody(computed, item => `
       <td class="name">${item.name}</td>
-      <td>${(item.type.names || []).join(', ')}</td>
+      <td>${renderTypes(item.type.names || [])}</td>
       <td>${typeof item.description === 'undefined' ? '-' : item.description}</td>
     `);
     html += '</table>';

lib/renderers/tui.js

@@ -1,5 +1,6 @@
 const makeTableHead = headers => `<thead><th class="tui-grid-cell-head">${headers.join('</th><th class="tui-grid-cell-head">')}</th></thead>`;
 const makeTableBody = (items, cb) => `<tbody>${items.map(item => `<tr>${cb(item).trim()}</tr>`).join('')}</tbody>`;
+const renderTypes = require('./utils/renderTypes');
 
 module.exports = function renderTui(description, props = [], data = [], computed = []) {
   let html = description;
@@ -36,7 +37,7 @@ module.exports = function renderTui(description, props = [], data = [], computed
     html += makeTableHead(['Name', 'Type', 'Default value', 'Required ?', 'Description']);
     html += makeTableBody(props, item => `
       <td class="tui-grid-cell"><b>${item.name}</b></td>
-      <td class="tui-grid-cell">${(item.type.names || []).join(', ')}</td>
+      <td class="tui-grid-cell">${renderTypes(item.type.names || [])}</td>
       <td class="tui-grid-cell">${typeof item.defaultvalue === 'undefined' ? '-' : `<code>${item.defaultvalue}</code>`}</td>
       <td class="tui-grid-cell">${item.optional ? 'No' : '<b>Yes</b>'}</td>
       <td class="tui-grid-cell">${typeof item.description === 'undefined' ? '-' : item.description}</td>
@@ -50,7 +51,7 @@ module.exports = function renderTui(description, props = [], data = [], computed
     html += makeTableHead(['Name', 'Type', 'Default value', 'Description']);
     html += makeTableBody(data, item => `
       <td class="tui-grid-cell"><b>${item.name}</b></td>
-      <td class="tui-grid-cell">${(item.type.names || []).join(', ')}</td>
+      <td class="tui-grid-cell">${renderTypes(item.type.names || [])}</td>
       <td class="tui-grid-cell">${typeof item.defaultvalue === 'undefined' ? '-' : `<code>${item.defaultvalue}</code>`}</td>
       <td class="tui-grid-cell">${typeof item.description === 'undefined' ? '-' : item.description}</td>
     `);
@@ -63,7 +64,7 @@ module.exports = function renderTui(description, props = [], data = [], computed
     html += makeTableHead(['Name', 'Type', 'Description']);
     html += makeTableBody(computed, item => `
       <td class="tui-grid-cell"><b>${item.name}</b></td>
-      <td class="tui-grid-cell">${(item.type.names || []).join(', ')}</td>
+      <td class="tui-grid-cell">${renderTypes(item.type.names || [])}</td>
       <td class="tui-grid-cell">${typeof item.description === 'undefined' ? '-' : item.description}</td>
     `);
     html += '</table>';

lib/renderers/utils/renderTypes.js

@@ -0,0 +1,5 @@
+const { htmlsafe } = require('jsdoc/lib/jsdoc/util/templateHelper');
+
+module.exports = function renderTypes(types) {
+  return types.map(htmlsafe).join('|');
+};

package.json

@@ -25,6 +25,7 @@
   },
   "homepage": "https://github.com/Kocal/jsdoc-vuejs#readme",
   "dependencies": {
+    "jsdoc": "^3.5.5",
     "vue-template-compiler": "^2.5.16"
   },
   "devDependencies": {

yarn.lock

@@ -474,6 +474,10 @@ babel-types@^6.18.0, babel-types@^6.26.0:
     lodash "^4.17.4"
     to-fast-properties "^1.0.3"
 
+babylon@7.0.0-beta.19:
+  version "7.0.0-beta.19"
+  resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.19.tgz#e928c7e807e970e0536b078ab3e0c48f9e052503"
+
 babylon@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
@@ -504,6 +508,10 @@ bluebird@3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.0.tgz#791420d7f551eea2897453a8a77653f96606d67c"
 
+bluebird@~3.5.0:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
+
 boolbase@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
@@ -643,6 +651,12 @@ caseless@~0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
 
+catharsis@~0.8.9:
+  version "0.8.9"
+  resolved "https://registry.yarnpkg.com/catharsis/-/catharsis-0.8.9.tgz#98cc890ca652dd2ef0e70b37925310ff9e90fc8b"
+  dependencies:
+    underscore-contrib "~0.3.0"
+
 center-align@^0.1.1:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
@@ -1343,7 +1357,7 @@ es-to-primitive@^1.1.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.1"
 
-escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
+escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5, escape-string-regexp@~1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 
@@ -1925,7 +1939,7 @@ globby@^5.0.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6:
+graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
 
@@ -2780,10 +2794,33 @@ js-yaml@^3.7.0, js-yaml@^3.9.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
+js2xmlparser@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/js2xmlparser/-/js2xmlparser-3.0.0.tgz#3fb60eaa089c5440f9319f51760ccd07e2499733"
+  dependencies:
+    xmlcreate "^1.0.1"
+
 jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
 
+jsdoc@^3.5.5:
+  version "3.5.5"
+  resolved "https://registry.yarnpkg.com/jsdoc/-/jsdoc-3.5.5.tgz#484521b126e81904d632ff83ec9aaa096708fa4d"
+  dependencies:
+    babylon "7.0.0-beta.19"
+    bluebird "~3.5.0"
+    catharsis "~0.8.9"
+    escape-string-regexp "~1.0.5"
+    js2xmlparser "~3.0.0"
+    klaw "~2.0.0"
+    marked "~0.3.6"
+    mkdirp "~0.5.1"
+    requizzle "~0.2.1"
+    strip-json-comments "~2.0.1"
+    taffydb "2.6.2"
+    underscore "~1.8.3"
+
 jsdom@^11.5.1:
   version "11.11.0"
   resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-11.11.0.tgz#df486efad41aee96c59ad7a190e2449c7eb1110e"
@@ -2892,6 +2929,12 @@ kind-of@^6.0.0, kind-of@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.2.tgz#01146b36a6218e64e58f3a8d66de5d7fc6f6d051"
 
+klaw@~2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/klaw/-/klaw-2.0.0.tgz#59c128e0dc5ce410201151194eeb9cbf858650f6"
+  dependencies:
+    graceful-fs "^4.1.9"
+
 lazy-ass@1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/lazy-ass/-/lazy-ass-1.6.0.tgz#7999655e8646c17f089fdd187d150d3324d54513"
@@ -3103,6 +3146,10 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+marked@~0.3.6:
+  version "0.3.19"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.19.tgz#5d47f709c4c9fc3c216b6d46127280f40b39d790"
+
 math-random@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.1.tgz#8b3aac588b8a66e4975e3cdea67f7bb329601fac"
@@ -3253,7 +3300,7 @@ mkdirp@0.5.0:
   dependencies:
     minimist "0.0.8"
 
-mkdirp@^0.5.0, mkdirp@^0.5.1:
+mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
   dependencies:
@@ -3969,6 +4016,12 @@ require-uncached@^1.0.3:
     caller-path "^0.1.0"
     resolve-from "^1.0.0"
 
+requizzle@~0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/requizzle/-/requizzle-0.2.1.tgz#6943c3530c4d9a7e46f1cddd51c158fc670cdbde"
+  dependencies:
+    underscore "~1.6.0"
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@@ -4422,6 +4475,10 @@ table@4.0.2:
     slice-ansi "1.0.0"
     string-width "^2.1.1"
 
+taffydb@2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/taffydb/-/taffydb-2.6.2.tgz#7cbcb64b5a141b6a2efc2c5d2c67b4e150b2a268"
+
 tar@^4:
   version "4.4.4"
   resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.4.tgz#ec8409fae9f665a4355cc3b4087d0820232bb8cd"
@@ -4581,6 +4638,20 @@ uglify-to-browserify@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
 
+underscore-contrib@~0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/underscore-contrib/-/underscore-contrib-0.3.0.tgz#665b66c24783f8fa2b18c9f8cbb0e2c7d48c26c7"
+  dependencies:
+    underscore "1.6.0"
+
+underscore@1.6.0, underscore@~1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.6.0.tgz#8b38b10cacdef63337b8b24e4ff86d45aea529a8"
+
+underscore@~1.8.3:
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.8.3.tgz#4f3fb53b106e6097fcf9cb4109f2a5e9bdfa5022"
+
 union-value@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.0.tgz#5c71c34cb5bad5dcebe3ea0cd08207ba5aa1aea4"
@@ -4768,6 +4839,10 @@ xml-name-validator@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
 
+xmlcreate@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/xmlcreate/-/xmlcreate-1.0.2.tgz#fa6bf762a60a413fb3dd8f4b03c5b269238d308f"
+
 xtend@~4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"