feat(renderer): implement minami renderer (#67)

* feat(renderer): add minami renderer

* spec(renderer): add spec for minami renderer

* chore: update CHANGELOG.md

Author: Kocal

CHANGELOG.md

@@ -11,6 +11,7 @@
 - Rewrote default renderer (#64)
 - Added [docstrap](https://github.com/docstrap/docstrap) renderer (#65)
 - Added [tui](https://github.com/nhnent/tui.jsdoc-template) renderer (#66)
+- Added [minami](https://github.com/nijikokun/minami) renderer (#67)
 
 ### Removals 
 

cypress/integration/renderers/minami.spec.js

@@ -1,17 +1,106 @@
 describe('Renderers: minami', () => {
-  beforeEach(() => {
+  before(() => {
     cy.visit('/../../../example/docs-minami/BetterCounter.html');
   });
 
+
   it('should renders props correctly', () => {
-    cy.get('[data-vue="section-props"]').contains('Props');
+    cy.get('[data-jsdoc-vuejs="section-props"]').contains('Props').should('have.class', 'subsection-title');
+    cy.get('[data-jsdoc-vuejs="table-props"]').as('table-props').should('have.class', 'params');
+
+    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('initialCounter');
+        expect($firstRowChildren.eq(0).attr('class')).to.eq('name');
+        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('step');
+        expect($secondRowChildren.eq(0).attr('class')).to.eq('name');
+        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').should('have.class', 'subsection-title');
+    cy.get('[data-jsdoc-vuejs="table-data"]').as('table-data').should('have.class', 'params');
+
+    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('counter');
+        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').should('have.class', 'subsection-title');
+    cy.get('[data-jsdoc-vuejs="table-computed"]').as('table-data').should('have.class', 'params');
+
+    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('message');
+        expect($rowChildren.eq(0).attr('class')).to.eq('name');
+        expect($rowChildren.eq(1).html()).to.eq('String');
+        expect($rowChildren.eq(2).html()).to.eq('A message');
+      });
   });
 });

lib/renderers/minami.js

@@ -1,23 +1,51 @@
+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 renderMinami(description, props = [], data = [], computed = []) {
   let html = description;
 
   // eslint-disable-next-line no-console
   console.log('Using minami renderer');
-
   if (props.length > 0) {
-    html += '<h3 data-vue="section-props">Props</h3>';
-    html += JSON.stringify(props);
+    html += '<h3 class="subsection-title" data-jsdoc-vuejs="section-props">Props</h3>';
+    html += '<table class="params" data-jsdoc-vuejs="table-props">';
+    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>${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 data-vue="section-data">Data</h3>';
-    html += JSON.stringify(data);
+    html += '<h3 class="subsection-title" data-jsdoc-vuejs="section-data">Data</h3>';
+    html += '<table class="params" data-jsdoc-vuejs="table-data">';
+    html += makeTableHead(['Name', 'Type', 'Default value', 'Description']);
+    html += makeTableBody(data, item => `
+      <td class="name">${item.name}</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 data-vue="section-computed">Computed</h3>';
-    html += JSON.stringify(computed);
+    html += '<h3 class="subsection-title" data-jsdoc-vuejs="section-computed">Computed</h3>';
+    html += '<table class="params" data-jsdoc-vuejs="table-computed">';
+    html += makeTableHead(['Name', 'Type', 'Description']);
+    html += makeTableBody(computed, item => `
+      <td class="name">${item.name}</td>
+      <td>${(item.type.names || []).join(', ')}</td>
+      <td>${typeof item.description === 'undefined' ? '-' : item.description}</td>
+    `);
+    html += '</table>';
   }
 
+  html += '<div class="container-overview"><div><p>';
+
   return html;
 };