dan/oxc
1
0
Fork 0
mirror of https://github.com/danbulant/oxc synced 2026-05-19 04:08:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(playground): add some styles

Browse source
This commit is contained in:
Boshen 2023-06-09 22:08:52 +08:00
parent 79188d70d0
commit 263db0f6d5
No known key found for this signature in database
GPG key ID: 9C7A8C8AB22BEBD1
3 changed files with 38 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
website/index.html
View file

@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="The JavaScript Oxidation Compiler">
<title>Oxc - The JavaScript Oxidation Compiler</title>
<link rel="icon" type="image/x-icon" href="https://raw.githubusercontent.com/Boshen/oxc-assets/main/oxc.ico">
</head>

32
website/playground/index.html
View file

@ -3,42 +3,52 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Oxc - The JavaScript Oxidation Compiler</title>
<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: 300px; overflow-y: auto; padding: 1em; color: #d1d5da; background-color: #24292e; border-top: 1px solid #444!important; }
#right { flex: 1; display:flex; flex-direction: column }
.controls { color: white; background: #24292e; padding: .5em; }
.controls { color: white; background: #24292e; padding: .8em 1em; border-bottom: 1px solid #444; display: flex; align-items: center; justify-content: space-between; }
#viewer { flex: 1; overflow-y: auto; }
#mangle { display: inline-flex; align-items: center }
#duration { float: right; }
label { display: inline-flex; align-items: center; cursor: pointer; user-select: 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">
<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 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="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">
<button id="ast">AST</button>
<button id="hir">HIR</button>
<button id="format">Format</button>
<button id="minify">Minify</button>
<label id="mangle">Mangle<input id="mangle-checkbox" type="checkbox"></label>
<div>
<button type="button" id="ast">AST</button>
<button type="button" id="hir">HIR</button>
<button type="button" id="format">Format</button>
<button type="button" id="minify">Minify</button>
<label id="mangle">Mangle<input id="mangle-checkbox" type="checkbox"></label>
</div>
<span id="duration"></span>
</div>
<div id="viewer"></div>

20
website/playground/index.js
View file

@ -90,7 +90,6 @@ class Playground {
});
const state = EditorState.create({
doc: "Loading Wasm... (~400kb)",
extensions: [
basicSetup,
EditorView.lineWrapping,
@ -109,7 +108,6 @@ class Playground {
message: d.message,
}))
: [];
console.log(diagnostics);
this.updatePanel(diagnostics);
return diagnostics;
},
@ -183,13 +181,24 @@ class Playground {
updatePanel(diagnostics) {
const panel = document.getElementById("panel");
panel.innerText = diagnostics.map((d) => d.message).join("\n\n");
panel.innerText = diagnostics
.map((d) => {
const emoji = {
error: "❗",
warning: "⚠️",
advice: "ℹ️",
}[d.severity.toLowerCase()];
return `${emoji} ${d.message}`;
})
.join("\n\n");
panel.scrollTop = panel.scrollHeight;
}
updateView(view) {
view = view || this.currentView;
this.currentView = view;
document.getElementById("mangle").style.visibility = "hidden";
this.runOptions.format = false;
this.runOptions.hir = false;
this.runOptions.minify = false;
@ -211,6 +220,7 @@ class Playground {
text = this.oxc.formattedText;
break;
case "minify":
document.getElementById("mangle").style.visibility = "visible";
this.runOptions.minify = true;
this.run();
text = this.oxc.minifiedText;
@ -269,7 +279,7 @@ class Playground {
static highlightMark = Decoration.mark({ class: "cm-highlight" });
static highlightTheme = EditorView.baseTheme({
".cm-highlight": { background: "black" },
".cm-highlight": { background: "#3392FF44" },
});
// Highlight the editor by searching for `start` and `end` values.
@ -404,6 +414,8 @@ async function main() {
playground.editor.focus();
}, 0);
document.getElementById("loading").remove();
document.getElementById("ast").onclick = () => {
playground.updateView("ast");
};