mirror of
https://github.com/facebookarchive/prepack.git
synced 2024-09-11 14:46:37 +03:00
Website published using publish-gh-pages.sh
This commit is contained in:
Herman Venter
parent
13881ff4ef
commit
9697583835
@ -1,131 +0,0 @@
|
||||
.select-select {
|
||||
display: none;
|
||||
/* For when we are on a small touch device and want to use native controls */
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
opacity: 0; }
|
||||
|
||||
.select-element, .select-element:after, .select-element:before, .select-element *, .select-element *:after, .select-element *:before {
|
||||
box-sizing: border-box; }
|
||||
|
||||
.select-element {
|
||||
position: absolute;
|
||||
display: none; }
|
||||
.select-element.select-open {
|
||||
display: block; }
|
||||
|
||||
.select-theme-dark, .select-theme-dark *, .select-theme-dark *:after, .select-theme-dark *:before {
|
||||
box-sizing: border-box; }
|
||||
|
||||
.select.select-theme-dark {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
z-index: 100; }
|
||||
.select.select-theme-dark .select-content {
|
||||
border-radius: .25em;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
background: #252525;
|
||||
color: #b9b9b9;
|
||||
font-family: inherit;
|
||||
overflow: auto;
|
||||
max-width: 18rem;
|
||||
max-height: 18rem;
|
||||
-webkit-overflow-scrolling: touch; }
|
||||
@media (max-width: 27rem), (max-height: 27rem) {
|
||||
.select.select-theme-dark .select-content {
|
||||
max-width: 11.25rem;
|
||||
max-height: 11.25rem; } }
|
||||
.select.select-theme-dark .select-options {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
.select.select-theme-dark .select-options .select-option {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
position: relative;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
line-height: 1.25rem;
|
||||
padding: 0.5rem 1em 0.5rem 2.5em;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis; }
|
||||
.select.select-theme-dark .select-options .select-option.select-option-selected:before {
|
||||
content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='-0.5 0 20 15'><rect fill='#b9b9b9' stroke='none' transform='rotate(45 4.0033 8.87436)' height='5' width='6.32304' y='6.37436' x='0.84178'></rect><rect fill='#b9b9b9' stroke='none' transform='rotate(45 11.1776 7.7066)' width='5' height='16.79756' y='-0.69218' x='8.67764'></rect></svg>");
|
||||
position: absolute;
|
||||
left: 1em;
|
||||
top: 0;
|
||||
bottom: .2em;
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
margin: auto; }
|
||||
.select.select-theme-dark .select-options .select-option:hover, .select.select-theme-dark .select-options .select-option.select-option-highlight {
|
||||
background: #63a2f1;
|
||||
color: #fff; }
|
||||
.select.select-theme-dark .select-options .select-option:hover.select-option-selected:before, .select.select-theme-dark .select-options .select-option.select-option-highlight.select-option-selected:before {
|
||||
content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='-0.5 0 20 15'><rect fill='#fff' stroke='none' transform='rotate(45 4.0033 8.87436)' height='5' width='6.32304' y='6.37436' x='0.84178'></rect><rect fill='#fff' stroke='none' transform='rotate(45 11.1776 7.7066)' width='5' height='16.79756' y='-0.69218' x='8.67764'></rect></svg>"); }
|
||||
.select.select-theme-dark .select-options .select-option:first-child {
|
||||
border-radius: 0.25em 0.25em 0 0; }
|
||||
.select.select-theme-dark .select-options .select-option:last-child {
|
||||
border-radius: 0 0 0.25em 0.25em; }
|
||||
|
||||
.select-target.select-theme-dark {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
*vertical-align: auto;
|
||||
*zoom: 1;
|
||||
*display: inline;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
border-radius: .25em;
|
||||
position: relative;
|
||||
padding: 0.5rem 3em 0.5rem 1em;
|
||||
background: #252525;
|
||||
border: .18em solid #151515;
|
||||
cursor: pointer;
|
||||
color: #b9b9b9;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis; }
|
||||
.select-target.select-theme-dark:hover {
|
||||
border-color: #000;
|
||||
color: #fff; }
|
||||
.select-target.select-theme-dark.select-target-focused, .select-target.select-theme-dark.select-target-focused:focus {
|
||||
border-color: #63a2f1;
|
||||
outline: none; }
|
||||
.select-target.select-theme-dark b {
|
||||
position: absolute;
|
||||
right: 1em;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
height: 1.25rem;
|
||||
width: 2em; }
|
||||
.select-target.select-theme-dark b:before, .select-target.select-theme-dark b:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
margin: auto;
|
||||
right: 0;
|
||||
height: 0;
|
||||
width: 0;
|
||||
border: .263em solid transparent; }
|
||||
.select-target.select-theme-dark b:before {
|
||||
top: 0;
|
||||
border-bottom-color: inherit; }
|
||||
.select-target.select-theme-dark b:after {
|
||||
bottom: 0;
|
||||
border-top-color: inherit; }
|
||||
@ -142,7 +142,9 @@ header, .repl-container {
|
||||
.record-container .record-button.delete:hover{
|
||||
background-color:#ef5b5b;
|
||||
}
|
||||
|
||||
.record-container .record-button.graphBtn{
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.record-container .record-input{
|
||||
right: 0px;
|
||||
@ -568,7 +570,7 @@ a.nav-item.is-brand {
|
||||
|
||||
/* REPL */
|
||||
|
||||
.input, .output {
|
||||
.input, .output, .graph {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
@ -582,7 +584,43 @@ a.nav-item.is-brand {
|
||||
}
|
||||
|
||||
.output {
|
||||
right: 0;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.graph {
|
||||
display: none;
|
||||
left: 66%;
|
||||
background-color: white;
|
||||
border-left: 1px solid #ddd;
|
||||
}
|
||||
.graphBar {
|
||||
background-color: white;
|
||||
height: 3%;
|
||||
padding-top: 0;
|
||||
vertical-align: center;
|
||||
}
|
||||
|
||||
.graphBox {
|
||||
background-color: #ddd;
|
||||
height: 85%;
|
||||
}
|
||||
|
||||
.graphLegend {
|
||||
padding-top: 2%;
|
||||
height: 15%;
|
||||
}
|
||||
|
||||
.legend-header {
|
||||
text-align: center;
|
||||
align: center;
|
||||
}
|
||||
|
||||
.legend-table {
|
||||
text-align: center;
|
||||
align: center;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 3%;
|
||||
border-spacing: 5%;
|
||||
}
|
||||
|
||||
.repl, .error {
|
||||
|
||||
2
js/prepack.min.js
vendored
2
js/prepack.min.js
vendored
File diff suppressed because one or more lines are too long
@ -25,6 +25,7 @@ onmessage = function(e) {
|
||||
filename: 'repl',
|
||||
timeout: 1000,
|
||||
serialize: true,
|
||||
heapGraphFilePath: "/tmp/foo.txt", /* this path will not be used, it is needed to trigger the graph computation */
|
||||
errorHandler,
|
||||
};
|
||||
for (var property in e.data.options) {
|
||||
@ -34,7 +35,7 @@ onmessage = function(e) {
|
||||
}
|
||||
var result = Prepack.prepackSources(sources, options);
|
||||
if (result && !buffer.length) {
|
||||
postMessage({ type: 'success', data: result.code });
|
||||
postMessage({ type: 'success', data: result.code, graph: result.heapGraph });
|
||||
} else {
|
||||
// A well-defined error occurred.
|
||||
postMessage({ type: 'error', data: buffer });
|
||||
|
||||
49
js/repl.js
49
js/repl.js
@ -49,7 +49,7 @@ var optionsConfig = [
|
||||
name: "reactEnabled",
|
||||
defaultVal: false,
|
||||
description: "Enables experimental support for React features, such as JSX syntax."
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
var demos = [];
|
||||
@ -147,6 +147,19 @@ function compile() {
|
||||
code =
|
||||
'// Your code was all dead code and thus eliminated.\n' + '// Try storing a property on the global object.';
|
||||
}
|
||||
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') {
|
||||
let errors = result.data;
|
||||
@ -182,6 +195,7 @@ function compile() {
|
||||
|
||||
worker.postMessage({code: input.getValue(), options: options});
|
||||
}, 500);
|
||||
|
||||
}
|
||||
|
||||
var output = createEditor(replOutput);
|
||||
@ -203,6 +217,15 @@ var saveButton = document.querySelector('#saveBtn');
|
||||
var deleteButton = document.querySelector('#deleteBtn');
|
||||
var storage = window.localStorage;
|
||||
|
||||
/** graph **/
|
||||
var graphButton = document.querySelector('#graphBtn');
|
||||
var graphBox = document.getElementById('graphBox');
|
||||
var graphDiv = document.querySelector('#graph');
|
||||
var inputDiv = document.getElementById('inputDiv');
|
||||
var outputDiv = document.getElementById('outputDiv');
|
||||
var showGraphDiv = false;
|
||||
var drawGraphCallback = null;
|
||||
|
||||
function changeDemosSelect(val) {
|
||||
if (!val.value) return;
|
||||
selectInput.value = val.value;
|
||||
@ -432,3 +455,27 @@ saveButton.addEventListener('click', () => {
|
||||
demoSelector.change(name);
|
||||
});
|
||||
});
|
||||
|
||||
graphButton.addEventListener('click', () => {
|
||||
if (!showGraphDiv) {
|
||||
inputDiv.style.width = "33%";
|
||||
outputDiv.style.width = "33%";
|
||||
graphDiv.style.width = "34%";
|
||||
outputDiv.style.left = "33%";
|
||||
graphDiv.style.display = "block";
|
||||
showGraphDiv = true;
|
||||
graphButton.innerHTML = "HIDE HEAP";
|
||||
if (drawGraphCallback !== null) {
|
||||
drawGraphCallback();
|
||||
drawGraphCallback = null;
|
||||
}
|
||||
} else {
|
||||
inputDiv.style.width = "50%";
|
||||
outputDiv.style.width = "50%";
|
||||
graphDiv.style.width = "50%";
|
||||
outputDiv.style.left = "50%";
|
||||
graphDiv.style.display = "none";
|
||||
showGraphDiv = false;
|
||||
graphButton.innerHTML = "SHOW HEAP";
|
||||
}
|
||||
});
|
||||
|
||||
1
js/select.min.js
vendored
1
js/select.min.js
vendored
File diff suppressed because one or more lines are too long
1
js/tether.min.js
vendored
1
js/tether.min.js
vendored
File diff suppressed because one or more lines are too long
5
prepack.min.js
vendored
5
prepack.min.js
vendored
File diff suppressed because one or more lines are too long
30
repl.html
30
repl.html
@ -3,8 +3,10 @@
|
||||
<head>
|
||||
<title>Prepack · Partial evaluator for JavaScript</title>
|
||||
<script src="js/prism.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
|
||||
<link rel="stylesheet" href="css/style.css"/>
|
||||
<link rel="stylesheet" href="css/select-theme-dark.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether-select/1.1.1/css/select-theme-dark.css"/>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css"/>
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
@ -41,7 +43,6 @@
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="record-container">
|
||||
<div class="select-record-input">
|
||||
<select class="select-record">
|
||||
@ -59,24 +60,41 @@
|
||||
<input id="recordName" placeholder="demo name"/>
|
||||
<div id="saveBtn" class="record-button save">SAVE</div>
|
||||
<div id="deleteBtn" class="record-button delete">DELETE</div>
|
||||
<div id="graphBtn" class="record-button graphBtn">SHOW HEAP</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="repl-container">
|
||||
<div class="input">
|
||||
<div id="inputDiv" class="input">
|
||||
<div class="repl"></div>
|
||||
</div>
|
||||
|
||||
<div class="output">
|
||||
<div id="outputDiv" class="output">
|
||||
<div class="repl"></div>
|
||||
<div class="error"></div>
|
||||
</div>
|
||||
<div id="graph" class ="graph">
|
||||
<div id="graphBox" class="graphBox"></div>
|
||||
<div class="graphLegend">
|
||||
<h3 class="legend-header">Legend</h3>
|
||||
<table class = "legend-table" cellspacing="10px">
|
||||
<tr>
|
||||
<td><img src="static/images/red_circle.png" height=42 width=42> <div>Function Value </div></td>
|
||||
<td><img src="static/images/blue_box.png" height=42 width=42><div>Object Value </div></td>
|
||||
<td><img src="static/images/green_diamond.png" height=42 width=42><div>Abstract Value </div></td>
|
||||
<td><img src="static/images/yellow_star.png" height=42 width=42><div>Symbol Value</div></td>
|
||||
<td><img src="static/images/orange_triangle.png" height=42 width=42><div>Proxy Value</div></td>
|
||||
<td><img src="static/images/grey_ellipse.png" height=42 width=42><div>Other</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.3/ace.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.4.4/lz-string.min.js"></script>
|
||||
<script src="js/tether.min.js"></script>
|
||||
<script src="js/select.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.3/js/tether.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether-select/1.1.1/js/select.min.js"></script>
|
||||
<script src="js/repl.js"></script>
|
||||
<script src="js/toggle_menu.js"></script>
|
||||
</body>
|
||||
|
||||
BIN
static/images/blue_box.png
Normal file
BIN
static/images/blue_box.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
static/images/green_diamond.png
Normal file
BIN
static/images/green_diamond.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
static/images/grey_ellipse.png
Normal file
BIN
static/images/grey_ellipse.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
static/images/orange_triangle.png
Normal file
BIN
static/images/orange_triangle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
static/images/red_circle.png
Normal file
BIN
static/images/red_circle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
static/images/yellow_star.png
Normal file
BIN
static/images/yellow_star.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Loading…
Reference in New Issue
Block a user