Skip to content

Commit 1d5063a

Browse files
KocalKocal
authored
feat(renderer): implement tui renderer (#66)
![capture d ecran de 2018-06-17 21-35-41](https://user-images.githubusercontent.com/2103975/41511532-d0cef4dc-7278-11e8-9314-225353e2ed77.png)
1 parent eb14cb9 commit 1d5063a

File tree

3 files changed

+148
-10
lines changed

3 files changed

+148
-10
lines changed

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
- Added rendering system to support more JSDoc templates (#59)
1111
- Rewrote default renderer (#64)
1212
- Added [docstrap](https://github.com/docstrap/docstrap) renderer (#65)
13+
- Added [tui](https://github.com/nhnent/tui.jsdoc-template) renderer (#66)
1314

1415
### Removals
1516

‎cypress/integration/renderers/tui.spec.js‎

Lines changed: 89 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,102 @@
11
describe('Renderers: tui', () => {
2-
beforeEach(() => {
2+
before(() => {
33
cy.visit('/../../../example/docs-tui/BetterCounter.html');
44
});
55

66
it('should renders props correctly', () => {
7-
cy.get('[data-vue="section-props"]').contains('Props');
7+
cy.get('[data-jsdoc-vuejs="section-props"]').contains('Props').should('have.class', 'subsection-title');
8+
cy.get('[data-jsdoc-vuejs="table-props"]').as('table-props').should('have.class', 'tui-grid-table');
9+
10+
cy
11+
.get('@table-props')
12+
.find('> thead > tr > th')
13+
.should(($headers) => {
14+
expect($headers).to.have.length(5);
15+
expect($headers.eq(0).text()).to.contains('Name');
16+
expect($headers.eq(1).text()).to.contains('Type');
17+
expect($headers.eq(2).text()).to.contains('Default value');
18+
expect($headers.eq(3).text()).to.contains('Required ?');
19+
expect($headers.eq(4).text()).to.contains('Description');
20+
});
21+
22+
cy
23+
.get('@table-props')
24+
.find('> tbody > tr')
25+
.then(($rows) => {
26+
const $firstRowChildren = $rows.eq(0).children();
27+
const $secondRowChildren = $rows.eq(1).children();
28+
29+
expect($rows).to.have.length(2);
30+
31+
expect($firstRowChildren.eq(0).html()).to.eq('<b>initialCounter</b>');
32+
expect($firstRowChildren.eq(1).html()).to.eq('Number');
33+
expect($firstRowChildren.eq(2).html()).to.eq('-');
34+
expect($firstRowChildren.eq(3).html()).to.eq('<b>Yes</b>');
35+
expect($firstRowChildren.eq(4).html()).to.eq('-');
36+
37+
expect($secondRowChildren.eq(0).html()).to.eq('<b>step</b>');
38+
expect($secondRowChildren.eq(1).html()).to.eq('Number');
39+
expect($secondRowChildren.eq(2).html()).to.eq('<code>1</code>');
40+
expect($secondRowChildren.eq(3).html()).to.eq('No');
41+
expect($secondRowChildren.eq(4).html()).to.eq('Step');
42+
});
843
});
944

1045
it('should renders data correctly', () => {
11-
cy.get('[data-vue="section-data"]').contains('Data');
46+
cy.get('[data-jsdoc-vuejs="section-data"]').contains('Data').should('have.class', 'subsection-title');
47+
cy.get('[data-jsdoc-vuejs="table-data"]').as('table-data').should('have.class', 'tui-grid-table');
48+
49+
cy
50+
.get('@table-data')
51+
.find('> thead > tr > th')
52+
.should(($headers) => {
53+
expect($headers).to.have.length(4);
54+
expect($headers.eq(0).text()).to.contains('Name');
55+
expect($headers.eq(1).text()).to.contains('Type');
56+
expect($headers.eq(2).text()).to.contains('Default value');
57+
expect($headers.eq(3).text()).to.contains('Description');
58+
});
59+
60+
cy
61+
.get('@table-data')
62+
.find('> tbody > tr')
63+
.then(($rows) => {
64+
const $rowChildren = $rows.eq(0).children();
65+
66+
expect($rows).to.have.length(1);
67+
68+
expect($rowChildren.eq(0).html()).to.eq('<b>counter</b>');
69+
expect($rowChildren.eq(1).html()).to.eq('Number');
70+
expect($rowChildren.eq(2).html()).to.eq('-');
71+
expect($rowChildren.eq(3).html()).to.eq('Current counter\'s value');
72+
});
1273
});
1374

1475
it('should renders computed correctly', () => {
15-
cy.get('[data-vue="section-computed"]').contains('Computed');
76+
cy.get('[data-jsdoc-vuejs="section-computed"]').contains('Computed').should('have.class', 'subsection-title');
77+
cy.get('[data-jsdoc-vuejs="table-computed"]').as('table-data').should('have.class', 'tui-grid-table');
78+
79+
cy
80+
.get('@table-data')
81+
.find('> thead > tr > th')
82+
.should(($headers) => {
83+
expect($headers).to.have.length(3);
84+
expect($headers.eq(0).text()).to.contains('Name');
85+
expect($headers.eq(1).text()).to.contains('Type');
86+
expect($headers.eq(2).text()).to.contains('Description');
87+
});
88+
89+
cy
90+
.get('@table-data')
91+
.find('> tbody > tr')
92+
.then(($rows) => {
93+
const $rowChildren = $rows.eq(0).children();
94+
95+
expect($rows).to.have.length(1);
96+
97+
expect($rowChildren.eq(0).html()).to.eq('<b>message</b>');
98+
expect($rowChildren.eq(1).html()).to.eq('String');
99+
expect($rowChildren.eq(2).html()).to.eq('A message');
100+
});
16101
});
17102
});

‎lib/renderers/tui.js‎

Lines changed: 58 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,75 @@
1+
const makeTableHead = headers => `<thead><th class="tui-grid-cell-head">${headers.join('</th><th class="tui-grid-cell-head">')}</th></thead>`;
2+
const makeTableBody = (items, cb) => `<tbody>${items.map(item => `<tr>${cb(item).trim()}</tr>`).join('')}</tbody>`;
3+
14
module.exports = function renderTui(description, props = [], data = [], computed = []) {
25
let html = description;
36

7+
html += '</p></div></div>';
8+
html += `
9+
<style>
10+
.tui-grid-table {
11+
border: 1px solid #ccc !important;
12+
table-layout: fixed;
13+
border-collapse: collapse;
14+
margin: 0;
15+
}
16+
.tui-grid-cell-head {
17+
background-color: #eee;
18+
border: 1px solid #ccc !important;
19+
padding: 5px 8px !important;
20+
text-align: center;
21+
}
22+
.tui-grid-cell {
23+
background-color: #fbfbfb !important;
24+
border: 1px solid #e0e0e0 !important;
25+
padding: 5px 8px !important;
26+
}
27+
</style>
28+
`;
29+
430
// eslint-disable-next-line no-console
531
console.log('Using tui renderer');
632

733
if (props.length > 0) {
8-
html += '<h3 data-vue="section-props">Props</h3>';
9-
html += JSON.stringify(props);
34+
html += '<h3 class="subsection-title" data-jsdoc-vuejs="section-props">Props</h3>';
35+
html += '<table class="tui-grid-table" data-jsdoc-vuejs="table-props">';
36+
html += makeTableHead(['Name', 'Type', 'Default value', 'Required ?', 'Description']);
37+
html += makeTableBody(props, item => `
38+
<td class="tui-grid-cell"><b>${item.name}</b></td>
39+
<td class="tui-grid-cell">${(item.type.names || []).join(', ')}</td>
40+
<td class="tui-grid-cell">${typeof item.defaultvalue === 'undefined' ? '-' : `<code>${item.defaultvalue}</code>`}</td>
41+
<td class="tui-grid-cell">${item.optional ? 'No' : '<b>Yes</b>'}</td>
42+
<td class="tui-grid-cell">${typeof item.description === 'undefined' ? '-' : item.description}</td>
43+
`);
44+
html += '</table>';
1045
}
1146

1247
if (data.length > 0) {
13-
html += '<h3 data-vue="section-data">Data</h3>';
14-
html += JSON.stringify(data);
48+
html += '<h3 class="subsection-title" data-jsdoc-vuejs="section-data">Data</h3>';
49+
html += '<table class="tui-grid-table" data-jsdoc-vuejs="table-data">';
50+
html += makeTableHead(['Name', 'Type', 'Default value', 'Description']);
51+
html += makeTableBody(data, item => `
52+
<td class="tui-grid-cell"><b>${item.name}</b></td>
53+
<td class="tui-grid-cell">${(item.type.names || []).join(', ')}</td>
54+
<td class="tui-grid-cell">${typeof item.defaultvalue === 'undefined' ? '-' : `<code>${item.defaultvalue}</code>`}</td>
55+
<td class="tui-grid-cell">${typeof item.description === 'undefined' ? '-' : item.description}</td>
56+
`);
57+
html += '</table>';
1558
}
1659

1760
if (computed.length > 0) {
18-
html += '<h3 data-vue="section-computed">Computed</h3>';
19-
html += JSON.stringify(computed);
61+
html += '<h3 class="subsection-title" data-jsdoc-vuejs="section-computed">Computed</h3>';
62+
html += '<table class="tui-grid-table" data-jsdoc-vuejs="table-computed">';
63+
html += makeTableHead(['Name', 'Type', 'Description']);
64+
html += makeTableBody(computed, item => `
65+
<td class="tui-grid-cell"><b>${item.name}</b></td>
66+
<td class="tui-grid-cell">${(item.type.names || []).join(', ')}</td>
67+
<td class="tui-grid-cell">${typeof item.description === 'undefined' ? '-' : item.description}</td>
68+
`);
69+
html += '</table>';
2070
}
2171

72+
html += '<div><div><p>';
73+
2274
return html;
2375
};

0 commit comments

Comments
 (0)