2 * @fileoverview HTML reporter
7 //------------------------------------------------------------------------------
9 //------------------------------------------------------------------------------
11 const encodeHTML = (function() {
12 const encodeHTMLRules = {
19 const matchHTML = /[&<>"']/ug;
21 return function(code) {
23 ? code.toString().replace(matchHTML, m => encodeHTMLRules[m] || m)
29 * Get the final HTML document.
30 * @param {Object} it data for the document.
31 * @returns {string} HTML document.
33 function pageTemplate(it) {
34 const { reportColor, reportSummary, date, results } = it;
40 <meta charset="UTF-8">
41 <title>ESLint Report</title>
44 font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
62 width:calc(100% - 60px);
65 border:1px solid #ddd;
74 td.clr-1, td.clr-2, th span {
89 tr td:first-child, tr td:last-child {
92 #overview.bg-0, tr.bg-0 th {
95 border-bottom:1px solid #d6e9c6
97 #overview.bg-1, tr.bg-1 th {
100 border-bottom:1px solid #fbeed5
102 #overview.bg-2, tr.bg-2 th {
105 border-bottom:1px solid #eed3d7
108 border-bottom:1px solid #ddd
122 text-decoration:underline
127 <div id="overview" class="bg-${reportColor}">
128 <h1>ESLint Report</h1>
130 <span>${reportSummary}</span> - Generated on ${date}
138 <script type="text/javascript">
139 var groups = document.querySelectorAll("tr[data-group]");
140 for (i = 0; i < groups.length; i++) {
141 groups[i].addEventListener("click", function() {
142 var inGroup = document.getElementsByClassName(this.getAttribute("data-group"));
143 this.innerHTML = (this.innerHTML.indexOf("+") > -1) ? this.innerHTML.replace("+", "-") : this.innerHTML.replace("-", "+");
144 for (var j = 0; j < inGroup.length; j++) {
145 inGroup[j].style.display = (inGroup[j].style.display !== "none") ? "none" : "table-row";
156 * Given a word and a count, append an s if count is not one.
157 * @param {string} word A word in its singular form.
158 * @param {int} count A number controlling whether word should be pluralized.
159 * @returns {string} The original word with an s on the end if count is not one.
161 function pluralize(word, count) {
162 return (count === 1 ? word : `${word}s`);
166 * Renders text along the template of x problems (x errors, x warnings)
167 * @param {string} totalErrors Total errors
168 * @param {string} totalWarnings Total warnings
169 * @returns {string} The formatted string, pluralized where necessary
171 function renderSummary(totalErrors, totalWarnings) {
172 const totalProblems = totalErrors + totalWarnings;
173 let renderedText = `${totalProblems} ${pluralize("problem", totalProblems)}`;
175 if (totalProblems !== 0) {
176 renderedText += ` (${totalErrors} ${pluralize("error", totalErrors)}, ${totalWarnings} ${pluralize("warning", totalWarnings)})`;
182 * Get the color based on whether there are errors/warnings...
183 * @param {string} totalErrors Total errors
184 * @param {string} totalWarnings Total warnings
185 * @returns {int} The color code (0 = green, 1 = yellow, 2 = red)
187 function renderColor(totalErrors, totalWarnings) {
188 if (totalErrors !== 0) {
191 if (totalWarnings !== 0) {
198 * Get HTML (table row) describing a single message.
199 * @param {Object} it data for the message.
200 * @returns {string} HTML (table row) describing the message.
202 function messageTemplate(it) {
215 <tr style="display:none" class="f-${parentIndex}">
216 <td>${lineNumber}:${columnNumber}</td>
217 <td class="clr-${severityNumber}">${severityName}</td>
218 <td>${encodeHTML(message)}</td>
220 <a href="${ruleUrl ? ruleUrl : ""}" target="_blank" rel="noopener noreferrer">${ruleId ? ruleId : ""}</a>
227 * Get HTML (table rows) describing the messages.
228 * @param {Array} messages Messages.
229 * @param {int} parentIndex Index of the parent HTML row.
230 * @param {Object} rulesMeta Dictionary containing metadata for each rule executed by the analysis.
231 * @returns {string} HTML (table rows) describing the messages.
233 function renderMessages(messages, parentIndex, rulesMeta) {
236 * Get HTML (table row) describing a message.
237 * @param {Object} message Message.
238 * @returns {string} HTML (table row) describing a message.
240 return messages.map(message => {
241 const lineNumber = message.line || 0;
242 const columnNumber = message.column || 0;
246 const meta = rulesMeta[message.ruleId];
248 if (meta && meta.docs && meta.docs.url) {
249 ruleUrl = meta.docs.url;
253 return messageTemplate({
257 severityNumber: message.severity,
258 severityName: message.severity === 1 ? "Warning" : "Error",
259 message: message.message,
260 ruleId: message.ruleId,
267 * Get HTML (table row) describing the result for a single file.
268 * @param {Object} it data for the file.
269 * @returns {string} HTML (table row) describing the result for the file.
271 function resultTemplate(it) {
272 const { color, index, filePath, summary } = it;
275 <tr class="bg-${color}" data-group="f-${index}">
277 [+] ${encodeHTML(filePath)}
278 <span>${encodeHTML(summary)}</span>
284 // eslint-disable-next-line jsdoc/require-description
286 * @param {Array} results Test results.
287 * @param {Object} rulesMeta Dictionary containing metadata for each rule executed by the analysis.
288 * @returns {string} HTML string describing the results.
290 function renderResults(results, rulesMeta) {
291 return results.map((result, index) => resultTemplate({
293 color: renderColor(result.errorCount, result.warningCount),
294 filePath: result.filePath,
295 summary: renderSummary(result.errorCount, result.warningCount)
296 }) + renderMessages(result.messages, index, rulesMeta)).join("\n");
299 //------------------------------------------------------------------------------
301 //------------------------------------------------------------------------------
303 module.exports = function(results, data) {
307 const metaData = data ? data.rulesMeta : {};
312 // Iterate over results to get totals
313 results.forEach(result => {
314 totalErrors += result.errorCount;
315 totalWarnings += result.warningCount;
318 return pageTemplate({
320 reportColor: renderColor(totalErrors, totalWarnings),
321 reportSummary: renderSummary(totalErrors, totalWarnings),
322 results: renderResults(results, metaData)