mirror of
https://github.com/danbulant/oxc
synced 2026-05-21 21:29:01 +00:00
4d462636cb
150 lines
7.2 KiB
HTML
150 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="description" content="The JavaScript Oxidation Compiler Playground">
|
|
<title>Oxc - The JavaScript Oxidation Compiler Playground</title>
|
|
<link rel="icon" type="image/x-icon" href="https://raw.githubusercontent.com/Boshen/oxc-assets/main/oxc.ico">
|
|
<style>
|
|
body { font-family: monospace; font-size: 16px; background-color: #24292e; color: white; margin: 0 }
|
|
button { cursor: pointer }
|
|
label { display: inline-flex; align-items: center; cursor: pointer; user-select: none; }
|
|
.cm-editor { height: 100%; }
|
|
#logo { display: flex; justify-content: center; cursor: pointer; color: white; text-decoration: inherit; }
|
|
#logo > img { margin-right: .5em; }
|
|
#loading { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; justify-content: center; align-items: center; }
|
|
#container { display: flex; height: 100vh; }
|
|
#left { display: flex; flex: 1; flex-direction: column; border-right: 1px solid #444 }
|
|
#editor { flex: 1; overflow-y: auto; }
|
|
#panel { height: 20%; overflow-y: auto; padding: 1em; color: #d1d5da; border-top: 1px solid #444!important; }
|
|
#right { flex: 1; display:flex; flex-direction: column; min-width: 0; }
|
|
.header { border-bottom: 1px solid #444; }
|
|
.left-container { padding: .8em 1em; display: flex; align-items: center; justify-content: space-between; }
|
|
.controls { padding: .6em; }
|
|
.controls > div { padding: .2em .5em; display: flex; flex-wrap: wrap; gap: 4px; }
|
|
.controls > div > button { padding: 8px 16px; background-color: #2c3136; color: white; border: 1px solid #444; transition: background-color 0.3s; white-space: nowrap; }
|
|
.controls > div > button:hover { background-color: #444; }
|
|
.controls > div > button.active { background-color: #555; }
|
|
.controls > div > label { margin-right: 4px; }
|
|
.controls label { font-size: 14px; }
|
|
.compress-control {position: relative; display: inline-flex;}
|
|
.compression-options {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
background-color: #2c3136;
|
|
border: 1px solid #ccc;
|
|
padding: 10px;
|
|
display: none;
|
|
z-index: 1;
|
|
display: none;
|
|
flex-direction: column;
|
|
min-width: 180px;
|
|
font-size: 12px;
|
|
}
|
|
.compress-control:hover .compression-options {
|
|
display: flex;
|
|
}
|
|
.compression-options label { margin-bottom: 4px; }
|
|
.compression-options label input { margin-right: 8px; }
|
|
|
|
#duration { margin-left: auto; }
|
|
#viewer { flex: 1; overflow-y: auto; }
|
|
#divider { width: 4px; background: #444; }
|
|
#divider:hover { background: #666; cursor: col-resize; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script type="module" src="./index.ts"></script>
|
|
<div id="loading">Loading Wasm (~400kB)...</div>
|
|
|
|
<div id="container">
|
|
<div id="left">
|
|
<div class="header left-container">
|
|
<a id="logo" href="https://oxc.rs">
|
|
<img height="100%" width="20" src="https://raw.githubusercontent.com/Boshen/oxc-assets/main/oxc.ico" alt="logo">
|
|
<span>Oxc</span>
|
|
</a>
|
|
<div>
|
|
<label>
|
|
File
|
|
<select id="file-type-select" style="margin-left: 4px">
|
|
<option value="js">js</option>
|
|
<option value="ts">ts</option>
|
|
<option value="jsx">jsx</option>
|
|
<option value="tsx" selected>tsx</option>
|
|
<option value="d.ts">d.ts</option>
|
|
</select>
|
|
</label>
|
|
<label id="syntax">Syntax Check<input id="syntax-checkbox" type="checkbox" checked></label>
|
|
<label id="lint">Lint<input id="lint-checkbox" type="checkbox" checked></label>
|
|
</div>
|
|
</div>
|
|
<div id="editor"></div>
|
|
<div id="panel"></div>
|
|
</div>
|
|
<div id="divider"></div>
|
|
<div id="right">
|
|
<div class="header controls">
|
|
<div>
|
|
<button type="button" id="ast">AST</button>
|
|
<button type="button" id="codegen">Codegen</button>
|
|
<button type="button" id="ir">IR</button>
|
|
<button type="button" id="prettier-ir">Prettier IR</button>
|
|
<button type="button" id="prettier">Format (Prettier)</button>
|
|
<button type="button" id="scope">Scope</button>
|
|
<button type="button" id="symbol">Symbol</button>
|
|
<button type="button" id="ir-copy">Copy IR to clipboard</button>
|
|
</div>
|
|
<div id="codegen-controls">
|
|
<label id="transform">Transform<input id="transform-checkbox" type="checkbox"></label>
|
|
<label id="codegen-ts">TS<input id="codegen-ts-checkbox" type="checkbox"></label>
|
|
<label>| Minify: </label>
|
|
<div class="compress-control">
|
|
<label id="compress">compress<input id="compress-checkbox" type="checkbox"></label>
|
|
<div id="compression-options" class="compression-options">
|
|
<label id="compress-booleans"
|
|
title="various optimizations for boolean context, for example `!!a ? b : c` → `a ? b : c`.">
|
|
<input type="checkbox" checked id="compress-booleans-checkbox">
|
|
booleans
|
|
</label>
|
|
<label id="compress-drop-debugger" title="Remove `debugger;` statements.">
|
|
<input type="checkbox" checked id="compress-drop-debugger-checkbox">
|
|
drop debugger
|
|
</label>
|
|
<label id="compress-drop-console" title="Remove `console.*` statements.">
|
|
<input type="checkbox" id="compress-drop-console-checkbox">
|
|
drop console
|
|
</label>
|
|
<label id="compress-join-vars" title="Join consecutive var statements.">
|
|
<input type="checkbox" checked id="compress-join-vars-checkbox">
|
|
join vars
|
|
</label>
|
|
<label id="compress-evaluate" title="Attempt to evaluate constant expressions">
|
|
<input type="checkbox" checked id="compress-evaluate-checkbox">
|
|
evaluate
|
|
</label>
|
|
<label id="compress-loops"
|
|
title="Optimizations for do, while and for loops when we can statically determine the condition">
|
|
<input type="checkbox" checked id="compress-loops-checkbox">
|
|
loops
|
|
</label>
|
|
<label id="compress-typeofs" title="Transforms `typeof foo == 'undefined' into `foo === void 0`">
|
|
<input type="checkbox" checked id="compress-typeofs-checkbox">
|
|
typeofs
|
|
</label>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<label id="whitespace">whitespace<input id="whitespace-checkbox" type="checkbox"></label>
|
|
<label id="mangle">mangle<input id="mangle-checkbox" type="checkbox"></label>
|
|
<div id="duration" title="Execution Time"></div>
|
|
</div>
|
|
</div>
|
|
<div id="viewer"></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|