mirror of
https://github.com/danbulant/oxc
synced 2026-05-25 04:42:10 +00:00
ea90128b9f
1. hide hir and minify since they are not available 2. These two buttons would confuse user since they don't have any effect for now.
68 lines
3.6 KiB
HTML
68 lines
3.6 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; 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; }
|
|
#logo > img { margin-right: .5em; }
|
|
#loading { background: white; 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; background-color: #24292e; border-top: 1px solid #444!important; }
|
|
#right { flex: 1; display:flex; flex-direction: column; max-width: 50vw; }
|
|
.controls { color: white; background: #24292e; padding: .8em 1em; border-bottom: 1px solid #444; display: flex; align-items: center; justify-content: space-between; }
|
|
.controls label { font-size: 14px; }
|
|
#viewer { flex: 1; overflow-y: auto; }
|
|
#mangle { display: inline-flex; align-items: center }
|
|
.query-button-green { background-color: #32CD59; border-color: #15c541; }
|
|
.query-button-red { background-color: #e74c3c; border-color: #c0392b; }
|
|
#query-results-viewer { height: 50%; border-top: 1px solid #444; display: none; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script type="module" src="./index.js"></script>
|
|
<div id="loading">Loading Wasm (~400kB)...</div>
|
|
|
|
<div id="container">
|
|
<div id="left">
|
|
<div class="controls">
|
|
<div id="logo"><img height="100%" width="20" src="https://raw.githubusercontent.com/Boshen/oxc-assets/main/oxc.ico" alt="logo"></img><span>Oxc</span></div>
|
|
<div>
|
|
<label id="type-check">Type Check (experimental)<input id="type-check-checkbox" type="checkbox"></label>
|
|
<label id="syntax">Check Syntax<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="right">
|
|
<div class="controls">
|
|
<div>
|
|
<button type="button" id="ast">AST</button>
|
|
<!-- <button type="button" id="hir">HIR</button> -->
|
|
<button type="button" id="ir">IR</button>
|
|
<!-- The formatter is WIP <button type="button" id="format">Format</button> -->
|
|
<!-- <button type="button" id="minify">Minify</button> -->
|
|
<button type="button" id="query">Query Playground</button>
|
|
<button type="button" id="query-args-or-outputs" class="query-button-red">Show Query Arguments</button>
|
|
<button type="button" id="ir-copy">Copy IR to clipboard</button>
|
|
<label id="mangle">Mangle<input id="mangle-checkbox" type="checkbox"></label>
|
|
</div>
|
|
<span id="duration"></span>
|
|
</div>
|
|
<div id="viewer"></div>
|
|
<div id="query-results-viewer"></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|