mirror of
https://github.com/facebookarchive/prepack.git
synced 2024-08-16 18:10:33 +03:00
Website code and warnings (#2528)
Summary: cc NTillmann Following up https://github.com/facebook/prepack/issues/2285, website shows the generated coded even when there are some warnings. Lot of changes because prettier wasn't applied to the files, but I basically only checked for the error buffer containing only items with `severity === 'Warning'` and create the `warning` result type to behave the same than `success` one. Next step would be to show the code AND warning messages. Either using the same display than error messages or creating a variation of it (changing text color to yellow for example). I can do it if you want. Let me know if this is what you were looking for. Have a nice day ! P.S: not sure if this PR was supposed to be into `gh-pages` or `master`. Let me know if that needs to be changed. Pull Request resolved: https://github.com/facebook/prepack/pull/2528 Differential Revision: D9882040 Pulled By: NTillmann fbshipit-source-id: bc8266a673e6def023bfa65b93b94ea9c7ad5b1d
This commit is contained in:
parent
1c1af96cf9
commit
ee291d19dc
@ -630,29 +630,63 @@ img.nav-logo {
|
|||||||
|
|
||||||
.legend-header {
|
.legend-header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.legend-table {
|
.legend-table {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
align: center;
|
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding-bottom: 3%;
|
padding-bottom: 3%;
|
||||||
border-spacing: 5%;
|
border-spacing: 5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.repl, .error {
|
.repl {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error {
|
.messagesContainer {
|
||||||
padding: 10px;
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 5; /* one more than ace_gutter */
|
||||||
|
overflow-x: scroll;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.messages {
|
||||||
|
display: inline-block;
|
||||||
|
min-width: 100%;
|
||||||
|
height: 100%;
|
||||||
font-family: "Operator Mono", "Fira Code", "Ubuntu Mono", "Droid Sans Mono", "Liberation Mono", "Source Code Pro", Menlo, Monaco, Consolas, "Courier New", monospace;
|
font-family: "Operator Mono", "Fira Code", "Ubuntu Mono", "Droid Sans Mono", "Liberation Mono", "Source Code Pro", Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||||
color: #c7254e;
|
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.message {
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.error {
|
||||||
|
color: #c7254e;
|
||||||
|
background-color:#ffefee;
|
||||||
|
border-top: 1px solid #ffe1e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.error > .line-link {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.warning {
|
||||||
|
color: #8a6f40;
|
||||||
|
background-color:#fffae5;
|
||||||
|
border-top: 1px solid #fff6cc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message.warning > .line-link {
|
||||||
|
color: #7d7d7d;
|
||||||
|
}
|
||||||
|
|
||||||
.align-left {
|
.align-left {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,11 @@
|
|||||||
self.importScripts('prepack.min.js');
|
self.importScripts('prepack.min.js');
|
||||||
|
|
||||||
|
function onlyWarnings(buffer) {
|
||||||
|
return buffer.every(function(error) {
|
||||||
|
return error.severity === "Warning" || error.severity === "Information";
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
onmessage = function(e) {
|
onmessage = function(e) {
|
||||||
let buffer = [];
|
let buffer = [];
|
||||||
|
|
||||||
@ -33,9 +39,11 @@ onmessage = function(e) {
|
|||||||
options[property] = e.data.options[property];
|
options[property] = e.data.options[property];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
let result = Prepack.prepackSources(sources, options);
|
let result = Prepack.prepackSources(sources, options);
|
||||||
if (result && !buffer.length) {
|
let noErrors = onlyWarnings(buffer);
|
||||||
postMessage({ type: 'success', data: result.code, graph: result.heapGraph });
|
if (result && noErrors) {
|
||||||
|
postMessage({ type: 'success', data: result.code, graph: result.heapGraph, messages: buffer });
|
||||||
} else {
|
} else {
|
||||||
// A well-defined error occurred.
|
// A well-defined error occurred.
|
||||||
postMessage({ type: 'error', data: buffer });
|
postMessage({ type: 'error', data: buffer });
|
||||||
|
@ -94,7 +94,7 @@ function generateDemosSelect(obj, dom) {
|
|||||||
var worker;
|
var worker;
|
||||||
var debounce;
|
var debounce;
|
||||||
|
|
||||||
var errorOutput = document.querySelector('.output .error');
|
var messagesOutput = document.querySelector('.input .messages');
|
||||||
var replOutput = document.querySelector('.output .repl');
|
var replOutput = document.querySelector('.output .repl');
|
||||||
|
|
||||||
var isEmpty = /^\s*$/;
|
var isEmpty = /^\s*$/;
|
||||||
@ -106,34 +106,76 @@ function terminateWorker() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function processError(errorOutput, error) {
|
function createWikiLink(code) {
|
||||||
let errorWikiLink = document.createElement('a');
|
const wikiLink = document.createElement('a');
|
||||||
errorWikiLink.href = 'https://github.com/facebook/prepack/wiki/' + encodeURIComponent(error.errorCode);
|
wikiLink.href = 'https://github.com/facebook/prepack/wiki/' + encodeURIComponent(code);
|
||||||
errorWikiLink.text = error.errorCode;
|
wikiLink.text = code;
|
||||||
errorWikiLink.setAttribute('target', '_blank');
|
wikiLink.setAttribute('target', '_blank');
|
||||||
|
|
||||||
|
return wikiLink;
|
||||||
|
}
|
||||||
|
|
||||||
|
function createLineLink(location) {
|
||||||
|
const lineLink = document.createElement('a');
|
||||||
|
let lineNumber = location.start ? location.start.line : location.line;
|
||||||
|
let colNumber = location.start ? location.start.column : location.column;
|
||||||
|
colNumber++;
|
||||||
|
let lineText = lineNumber + ':' + colNumber;
|
||||||
|
|
||||||
|
lineLink.href = '';
|
||||||
|
lineLink.onclick = function() {
|
||||||
|
input.gotoLine(lineNumber);
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
lineLink.text = lineText;
|
||||||
|
lineLink.classList.add("line-link");
|
||||||
|
|
||||||
|
return lineLink;
|
||||||
|
}
|
||||||
|
|
||||||
|
function processMessage(messageNode, data) {
|
||||||
// TODO: syntax errors need their location stripped
|
// TODO: syntax errors need their location stripped
|
||||||
if (error.location) {
|
if (data.location) {
|
||||||
let errorLineLink = document.createElement('a');
|
const wikiLink = createWikiLink(data.errorCode);
|
||||||
let lineNumber = error.location.start ? error.location.start.line : error.location.line;
|
const lineLink = createLineLink(data.location);
|
||||||
let colNumber = error.location.start ? error.location.start.column : error.location.column;
|
messageNode.appendChild(wikiLink);
|
||||||
colNumber++;
|
messageNode.appendChild(document.createTextNode(' ('));
|
||||||
let lineText = lineNumber + ':' + colNumber;
|
messageNode.appendChild(lineLink);
|
||||||
errorLineLink.href = '';
|
messageNode.appendChild(document.createTextNode('): ' + data.message + '\n'));
|
||||||
errorLineLink.onclick = function() {
|
} else if (!data.code) {
|
||||||
input.gotoLine(lineNumber);
|
messageNode.appendChild(document.createTextNode(data.message + '\n'));
|
||||||
return false;
|
|
||||||
};
|
|
||||||
errorLineLink.text = lineText;
|
|
||||||
errorLineLink.style.color = 'red';
|
|
||||||
errorOutput.appendChild(errorWikiLink);
|
|
||||||
errorOutput.appendChild(document.createTextNode(' ('));
|
|
||||||
errorOutput.appendChild(errorLineLink);
|
|
||||||
errorOutput.appendChild(document.createTextNode('): ' + error.message + '\n'));
|
|
||||||
} else if (!error.code) {
|
|
||||||
errorOutput.appendChild(document.createTextNode(error.message + '\n'));
|
|
||||||
} else {
|
} else {
|
||||||
errorOutput.appendChild(errorWikiLink);
|
const wikiLink = createWikiLink(data.errorCode);
|
||||||
errorOutput.appendChild(document.createTextNode(': ' + error.message + '\n'));
|
messageNode.appendChild(wikiLink);
|
||||||
|
messageNode.appendChild(document.createTextNode(': ' + data.message + '\n'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getMessageClassType(severity) {
|
||||||
|
switch(severity) {
|
||||||
|
case "FatalError":
|
||||||
|
return "error";
|
||||||
|
case "RecoverableError":
|
||||||
|
return "error";
|
||||||
|
case "Warning":
|
||||||
|
return "warning";
|
||||||
|
case "Information":
|
||||||
|
return "warning";
|
||||||
|
default:
|
||||||
|
return "error";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showMessages(messages) {
|
||||||
|
messagesOutput.style.display = 'inline-block';
|
||||||
|
|
||||||
|
for (var i in messages) {
|
||||||
|
const message = document.createElement('div');
|
||||||
|
message.classList.add("message", getMessageClassType(messages[i].severity));
|
||||||
|
|
||||||
|
processMessage(message, messages[i]);
|
||||||
|
|
||||||
|
messagesOutput.appendChild(message);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -151,12 +193,37 @@ function makeDemoSharable() {
|
|||||||
history.replaceState(undefined, undefined, `#${encoded}`);
|
history.replaceState(undefined, undefined, `#${encoded}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function showGeneratedCode(code) {
|
||||||
|
if (isEmpty.test(code) && !isEmpty.test(input.getValue())) {
|
||||||
|
code =
|
||||||
|
'// Your code was all dead code and thus eliminated.\n' + '// Try storing a property on the global object.';
|
||||||
|
}
|
||||||
|
output.setValue(code, -1);
|
||||||
|
}
|
||||||
|
|
||||||
|
function showGenerationGraph(graph) {
|
||||||
|
drawGraphCallback = () => {
|
||||||
|
if (graph) {
|
||||||
|
var graphData = JSON.parse(graph);
|
||||||
|
var visData = {
|
||||||
|
nodes: graphData.nodes,
|
||||||
|
edges: graphData.edges,
|
||||||
|
};
|
||||||
|
|
||||||
|
var visOptions = {};
|
||||||
|
var boxNetwork = new vis.Network(graphBox, visData, visOptions);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (showGraphDiv) drawGraphCallback();
|
||||||
|
}
|
||||||
|
|
||||||
function compile() {
|
function compile() {
|
||||||
clearTimeout(debounce);
|
clearTimeout(debounce);
|
||||||
terminateWorker();
|
terminateWorker();
|
||||||
|
|
||||||
errorOutput.innerHTML = '';
|
messagesOutput.innerHTML = '';
|
||||||
errorOutput.style.display = 'none';
|
messagesOutput.style.display = 'none';
|
||||||
replOutput.style.display = 'block';
|
replOutput.style.display = 'block';
|
||||||
|
|
||||||
output.setValue('// Compiling...', -1);
|
output.setValue('// Compiling...', -1);
|
||||||
@ -164,42 +231,16 @@ function compile() {
|
|||||||
debounce = setTimeout(function() {
|
debounce = setTimeout(function() {
|
||||||
worker = new Worker('js/repl-worker.js');
|
worker = new Worker('js/repl-worker.js');
|
||||||
worker.onmessage = function(e) {
|
worker.onmessage = function(e) {
|
||||||
// turn off compiling
|
const result = e.data;
|
||||||
|
|
||||||
var result = e.data;
|
|
||||||
if (result.type === 'success') {
|
if (result.type === 'success') {
|
||||||
var code = result.data;
|
const { data, graph, messages } = result;
|
||||||
if (isEmpty.test(code) && !isEmpty.test(input.getValue())) {
|
showGeneratedCode(data);
|
||||||
code =
|
showGenerationGraph(graph);
|
||||||
'// Your code was all dead code and thus eliminated.\n' + '// Try storing a property on the global object.';
|
showMessages(messages);
|
||||||
}
|
|
||||||
drawGraphCallback = () => {
|
|
||||||
var graphData = JSON.parse(result.graph);
|
|
||||||
var visData = {
|
|
||||||
nodes: graphData.nodes,
|
|
||||||
edges: graphData.edges
|
|
||||||
}
|
|
||||||
|
|
||||||
var visOptions = {};
|
|
||||||
var boxNetwork = new vis.Network(graphBox, visData, visOptions);
|
|
||||||
}
|
|
||||||
if (showGraphDiv) {
|
|
||||||
drawGraphCallback();
|
|
||||||
}
|
|
||||||
output.setValue(code, -1);
|
|
||||||
} else if (result.type === 'error') {
|
} else if (result.type === 'error') {
|
||||||
let errors = result.data;
|
const errors = result.data;
|
||||||
if (typeof errors === 'string') {
|
showMessages(errors);
|
||||||
errorOutput.style.display = 'block';
|
output.setValue('// Prepack is unable to produce output for this input.\n// Please check the left pane for diagnostic information.', -1);
|
||||||
replOutput.style.display = 'none';
|
|
||||||
errorOutput.textContent = errors;
|
|
||||||
} else {
|
|
||||||
errorOutput.style.display = 'block';
|
|
||||||
replOutput.style.display = 'none';
|
|
||||||
for (var i in errors) {
|
|
||||||
processError(errorOutput, errors[i]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
terminateWorker();
|
terminateWorker();
|
||||||
};
|
};
|
||||||
@ -234,7 +275,6 @@ input.on('change', compile);
|
|||||||
input.on('change', makeDemoSharable);
|
input.on('change', makeDemoSharable);
|
||||||
|
|
||||||
/**record **/
|
/**record **/
|
||||||
|
|
||||||
var selectRecord = document.querySelector('select.select-record');
|
var selectRecord = document.querySelector('select.select-record');
|
||||||
var optionsRecord = document.querySelector('#optionsMenuRecord');
|
var optionsRecord = document.querySelector('#optionsMenuRecord');
|
||||||
var selectInput = document.querySelector('#recordName');
|
var selectInput = document.querySelector('#recordName');
|
||||||
|
@ -67,11 +67,13 @@
|
|||||||
<div class="repl-container">
|
<div class="repl-container">
|
||||||
<div id="inputDiv" class="input">
|
<div id="inputDiv" class="input">
|
||||||
<div class="repl"></div>
|
<div class="repl"></div>
|
||||||
|
<div class="messagesContainer">
|
||||||
|
<div class="messages"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="outputDiv" class="output">
|
<div id="outputDiv" class="output">
|
||||||
<div class="repl"></div>
|
<div class="repl"></div>
|
||||||
<div class="error"></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="graph" class ="graph">
|
<div id="graph" class ="graph">
|
||||||
<div id="graphBox" class="graphBox"></div>
|
<div id="graphBox" class="graphBox"></div>
|
||||||
|
Loading…
Reference in New Issue
Block a user