Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Chore: merge all html formatter files into html.js #14612

Merged
merged 1 commit into from May 22, 2021
Merged

Chore: merge all html formatter files into html.js #14612

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
25 changes: 0 additions & 25 deletions lib/cli-engine/formatters/html-template-message.js
View file
Open in desktop

This file was deleted.

123 changes: 0 additions & 123 deletions lib/cli-engine/formatters/html-template-page.js
View file
Open in desktop

This file was deleted.

14 changes: 0 additions & 14 deletions lib/cli-engine/formatters/html-template-result.js
View file
Open in desktop

This file was deleted.

180 changes: 175 additions & 5 deletions lib/cli-engine/formatters/html.js
View file
Open in desktop
Expand Up @@ -25,9 +25,132 @@ const encodeHTML = (function() {
};
}());

const pageTemplate = require("./html-template-page.js");
const messageTemplate = require("./html-template-message.js");
const resultTemplate = require("./html-template-result.js");
/**
* Get the final HTML document.
* @param {Object} it data for the document.
* @returns {string} HTML document.
*/
function pageTemplate(it) {
const { reportColor, reportSummary, date, results } = it;

return `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ESLint Report</title>
<style>
body {
font-family:Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size:16px;
font-weight:normal;
margin:0;
padding:0;
color:#333
}
#overview {
padding:20px 30px
}
td, th {
padding:5px 10px
}
h1 {
margin:0
}
table {
margin:30px;
width:calc(100% - 60px);
max-width:1000px;
border-radius:5px;
border:1px solid #ddd;
border-spacing:0px;
}
th {
font-weight:400;
font-size:medium;
text-align:left;
cursor:pointer
}
td.clr-1, td.clr-2, th span {
font-weight:700
}
th span {
float:right;
margin-left:20px
}
th span:after {
content:"";
clear:both;
display:block
}
tr:last-child td {
border-bottom:none
}
tr td:first-child, tr td:last-child {
color:#9da0a4
}
#overview.bg-0, tr.bg-0 th {
color:#468847;
background:#dff0d8;
border-bottom:1px solid #d6e9c6
}
#overview.bg-1, tr.bg-1 th {
color:#f0ad4e;
background:#fcf8e3;
border-bottom:1px solid #fbeed5
}
#overview.bg-2, tr.bg-2 th {
color:#b94a48;
background:#f2dede;
border-bottom:1px solid #eed3d7
}
td {
border-bottom:1px solid #ddd
}
td.clr-1 {
color:#f0ad4e
}
td.clr-2 {
color:#b94a48
}
td a {
color:#3a33d1;
text-decoration:none
}
td a:hover {
color:#272296;
text-decoration:underline
}
</style>
</head>
<body>
<div id="overview" class="bg-${reportColor}">
<h1>ESLint Report</h1>
<div>
<span>${reportSummary}</span> - Generated on ${date}
</div>
</div>
<table>
<tbody>
${results}
</tbody>
</table>
<script type="text/javascript">
var groups = document.querySelectorAll("tr[data-group]");
for (i = 0; i < groups.length; i++) {
groups[i].addEventListener("click", function() {
var inGroup = document.getElementsByClassName(this.getAttribute("data-group"));
this.innerHTML = (this.innerHTML.indexOf("+") > -1) ? this.innerHTML.replace("+", "-") : this.innerHTML.replace("-", "+");
for (var j = 0; j < inGroup.length; j++) {
inGroup[j].style.display = (inGroup[j].style.display !== "none") ? "none" : "table-row";
}
});
}
</script>
</body>
</html>
`.trimLeft();
}

/**
* Given a word and a count, append an s if count is not one.
Expand Down Expand Up @@ -71,6 +194,35 @@ function renderColor(totalErrors, totalWarnings) {
return 0;
}

/**
* Get HTML (table row) describing a single message.
* @param {Object} it data for the message.
* @returns {string} HTML (table row) describing the message.
*/
function messageTemplate(it) {
const {
parentIndex,
lineNumber,
columnNumber,
severityNumber,
severityName,
message,
ruleUrl,
ruleId
} = it;

return `
<tr style="display:none" class="f-${parentIndex}">
<td>${lineNumber}:${columnNumber}</td>
<td class="clr-${severityNumber}">${severityName}</td>
<td>${encodeHTML(message)}</td>
<td>
<a href="${ruleUrl ? ruleUrl : ""}" target="_blank" rel="noopener noreferrer">${ruleId ? ruleId : ""}</a>
</td>
</tr>
`.trimLeft();
}

/**
* Get HTML (table rows) describing the messages.
* @param {Array} messages Messages.
Expand Down Expand Up @@ -107,10 +259,28 @@ function renderMessages(messages, parentIndex, rulesMeta) {
message: message.message,
ruleId: message.ruleId,
ruleUrl
}, encodeHTML);
});
}).join("\n");
}

/**
* Get HTML (table row) describing the result for a single file.
* @param {Object} it data for the file.
* @returns {string} HTML (table row) describing the result for the file.
*/
function resultTemplate(it) {
const { color, index, filePath, summary } = it;

return `
<tr class="bg-${color}" data-group="f-${index}">
<th colspan="4">
[+] ${encodeHTML(filePath)}
<span>${encodeHTML(summary)}</span>
</th>
</tr>
`.trimLeft();
}

// eslint-disable-next-line jsdoc/require-description
/**
* @param {Array} results Test results.
Expand All @@ -123,7 +293,7 @@ function renderResults(results, rulesMeta) {
color: renderColor(result.errorCount, result.warningCount),
filePath: result.filePath,
summary: renderSummary(result.errorCount, result.warningCount)
}, encodeHTML) + renderMessages(result.messages, index, rulesMeta)).join("\n");
}) + renderMessages(result.messages, index, rulesMeta)).join("\n");
}

//------------------------------------------------------------------------------
Expand Down