refactor(renderer): rewrite default renderer (#64)

https://htmlpreview.github.io/?https://github.com/Kocal/jsdoc-vuejs/blob/feat/default-render/example/docs/BetterCounter.html

Author: Kocal

CHANGELOG.md

@@ -8,6 +8,7 @@
 - Added `@vue-data` tag (#59)
 - Added `@vue-computed` tag (#59)
 - Added rendering system to support more JSDoc templates (#59)
+- Rewrote default renderer (#64)
 
 ### Removals 
 

cypress/integration/renderers/default.spec.js

@@ -1,17 +1,102 @@
 describe('Renderers: default', () => {
-  beforeEach(() => {
+  before(() => {
     cy.visit('/../../../example/docs/BetterCounter.html');
   });
 
   it('should renders props correctly', () => {
-    cy.get('[data-vue="section-props"]').contains('Props');
+    cy.get('[data-jsdoc-vuejs="section-props"]').contains('Props');
+    cy.get('[data-jsdoc-vuejs="table-props"]').as('table-props');
+
+    cy
+      .get('@table-props')
+      .find('> thead > tr > th')
+      .should(($headers) => {
+        expect($headers).to.have.length(5);
+        expect($headers.eq(0).text()).to.contains('Name');
+        expect($headers.eq(1).text()).to.contains('Type');
+        expect($headers.eq(2).text()).to.contains('Default value');
+        expect($headers.eq(3).text()).to.contains('Required ?');
+        expect($headers.eq(4).text()).to.contains('Description');
+      });
+
+    cy
+      .get('@table-props')
+      .find('> tbody > tr')
+      .then(($rows) => {
+        const $firstRowChildren = $rows.eq(0).children();
+        const $secondRowChildren = $rows.eq(1).children();
+
+        expect($rows).to.have.length(2);
+
+        expect($firstRowChildren.eq(0).html()).to.eq('<b>initialCounter</b>');
+        expect($firstRowChildren.eq(1).html()).to.eq('Number');
+        expect($firstRowChildren.eq(2).html()).to.eq('-');
+        expect($firstRowChildren.eq(3).html()).to.eq('<b>Yes</b>');
+        expect($firstRowChildren.eq(4).html()).to.eq('-');
+
+        expect($secondRowChildren.eq(0).html()).to.eq('<b>step</b>');
+        expect($secondRowChildren.eq(1).html()).to.eq('Number');
+        expect($secondRowChildren.eq(2).html()).to.eq('<code>1</code>');
+        expect($secondRowChildren.eq(3).html()).to.eq('No');
+        expect($secondRowChildren.eq(4).html()).to.eq('Step');
+      });
   });
 
   it('should renders data correctly', () => {
-    cy.get('[data-vue="section-data"]').contains('Data');
+    cy.get('[data-jsdoc-vuejs="section-data"]').contains('Data');
+    cy.get('[data-jsdoc-vuejs="table-data"]').as('table-data');
+
+    cy
+      .get('@table-data')
+      .find('> thead > tr > th')
+      .should(($headers) => {
+        expect($headers).to.have.length(4);
+        expect($headers.eq(0).text()).to.contains('Name');
+        expect($headers.eq(1).text()).to.contains('Type');
+        expect($headers.eq(2).text()).to.contains('Default value');
+        expect($headers.eq(3).text()).to.contains('Description');
+      });
+
+    cy
+      .get('@table-data')
+      .find('> tbody > tr')
+      .then(($rows) => {
+        const $rowChildren = $rows.eq(0).children();
+
+        expect($rows).to.have.length(1);
+
+        expect($rowChildren.eq(0).html()).to.eq('<b>counter</b>');
+        expect($rowChildren.eq(1).html()).to.eq('Number');
+        expect($rowChildren.eq(2).html()).to.eq('-');
+        expect($rowChildren.eq(3).html()).to.eq('Current counter\'s value');
+      });
   });
 
   it('should renders computed correctly', () => {
-    cy.get('[data-vue="section-computed"]').contains('Computed');
+    cy.get('[data-jsdoc-vuejs="section-computed"]').contains('Computed');
+    cy.get('[data-jsdoc-vuejs="table-computed"]').as('table-data');
+
+    cy
+      .get('@table-data')
+      .find('> thead > tr > th')
+      .should(($headers) => {
+        expect($headers).to.have.length(3);
+        expect($headers.eq(0).text()).to.contains('Name');
+        expect($headers.eq(1).text()).to.contains('Type');
+        expect($headers.eq(2).text()).to.contains('Description');
+      });
+
+    cy
+      .get('@table-data')
+      .find('> tbody > tr')
+      .then(($rows) => {
+        const $rowChildren = $rows.eq(0).children();
+
+        expect($rows).to.have.length(1);
+
+        expect($rowChildren.eq(0).html()).to.eq('<b>message</b>');
+        expect($rowChildren.eq(1).html()).to.eq('String');
+        expect($rowChildren.eq(2).html()).to.eq('A message');
+      });
   });
 });

lib/renderers/default.js

@@ -1,3 +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>`;
+
 module.exports = function renderDefault(description, props = [], data = [], computed = []) {
   let html = description;
 
@@ -7,18 +10,42 @@ module.exports = function renderDefault(description, props = [], data = [], comp
   html += '</p></div></div>';
 
   if (props.length > 0) {
-    html += '<h3 class="subsection-title" data-vue="section-props">Props</h3>';
-    html += JSON.stringify(props);
+    html += '<h3 class="subsection-title" style="margin-top: 1em" data-jsdoc-vuejs="section-props">Props</h3>';
+    html += '<table data-jsdoc-vuejs="table-props">';
+    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>${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>
+    `);
+    html += '</table>';
   }
 
   if (data.length > 0) {
-    html += '<h3 class="subsection-title" data-vue="section-data">Data</h3>';
-    html += JSON.stringify(data);
+    html += '<h3 class="subsection-title" style="margin-top: 1em" data-jsdoc-vuejs="section-data">Data</h3>';
+    html += '<table data-jsdoc-vuejs="table-data">';
+    html += makeTableHead(['Name', 'Type', 'Default value', 'Description']);
+    html += makeTableBody(data, item => `
+      <td><b>${item.name}</b></td>
+      <td>${(item.type.names || []).join(', ')}</td>
+      <td>${typeof item.defaultvalue === 'undefined' ? '-' : `<code>${item.defaultvalue}</code>`}</td>
+      <td>${typeof item.description === 'undefined' ? '-' : item.description}</td>
+    `);
+    html += '</table>';
   }
 
   if (computed.length > 0) {
-    html += '<h3 class="subsection-title" data-vue="section-computed">Computed</h3>';
-    html += JSON.stringify(computed);
+    html += '<h3 class="subsection-title" style="margin-top: 1em" data-jsdoc-vuejs="section-computed">Computed</h3>';
+    html += '<table data-jsdoc-vuejs="table-computed">';
+    html += makeTableHead(['Name', 'Type', 'Description']);
+    html += makeTableBody(computed, item => `
+      <td><b>${item.name}</b></td>
+      <td>${(item.type.names || []).join(', ')}</td>
+      <td>${typeof item.description === 'undefined' ? '-' : item.description}</td>
+    `);
+    html += '</table>';
   }
 
   html += '<div class="container-overview"><div><p>';