mirror of
https://github.com/danbulant/oxc
synced 2026-05-21 13:18:59 +00:00
feat(playground): support modify compressor's options (#3734)
This commit is contained in:
Wang Wenzhe
GitHub
parent
bf9b38a197
commit
4d462636cb
4 changed files with 223 additions and 2 deletions
|
|
@ -263,10 +263,19 @@ impl Oxc {
|
|||
let program = allocator.alloc(program);
|
||||
|
||||
if minifier_options.compress() || minifier_options.mangle() {
|
||||
let compress_options = minifier_options.compress_options();
|
||||
let options = MinifierOptions {
|
||||
mangle: minifier_options.mangle(),
|
||||
compress: if minifier_options.compress() {
|
||||
CompressOptions::default()
|
||||
CompressOptions {
|
||||
booleans: compress_options.booleans(),
|
||||
drop_console: compress_options.drop_console(),
|
||||
drop_debugger: compress_options.drop_debugger(),
|
||||
evaluate: compress_options.evaluate(),
|
||||
join_vars: compress_options.join_vars(),
|
||||
loops: compress_options.loops(),
|
||||
typeofs: compress_options.typeofs(),
|
||||
}
|
||||
} else {
|
||||
CompressOptions::all_false()
|
||||
},
|
||||
|
|
|
|||
|
|
@ -164,6 +164,7 @@ pub struct OxcMinifierOptions {
|
|||
whitespace: bool,
|
||||
mangle: bool,
|
||||
compress: bool,
|
||||
compress_options: OxcCompressOptions,
|
||||
}
|
||||
|
||||
#[wasm_bindgen]
|
||||
|
|
@ -203,6 +204,121 @@ impl OxcMinifierOptions {
|
|||
pub fn set_compress(&mut self, yes: bool) {
|
||||
self.compress = yes;
|
||||
}
|
||||
|
||||
#[wasm_bindgen(getter = compressOptions)]
|
||||
pub fn compress_options(&self) -> OxcCompressOptions {
|
||||
self.compress_options
|
||||
}
|
||||
|
||||
#[wasm_bindgen(setter = compressOptions)]
|
||||
pub fn set_compress_options(&mut self, options: OxcCompressOptions) {
|
||||
self.compress_options = options;
|
||||
}
|
||||
}
|
||||
|
||||
#[wasm_bindgen]
|
||||
#[derive(Clone, Copy)]
|
||||
pub struct OxcCompressOptions {
|
||||
booleans: bool,
|
||||
drop_debugger: bool,
|
||||
drop_console: bool,
|
||||
evaluate: bool,
|
||||
join_vars: bool,
|
||||
loops: bool,
|
||||
typeofs: bool,
|
||||
}
|
||||
|
||||
// keep same with `oxc_minifier::options::CompressOptions`
|
||||
impl Default for OxcCompressOptions {
|
||||
fn default() -> Self {
|
||||
Self {
|
||||
booleans: true,
|
||||
drop_debugger: true,
|
||||
drop_console: false,
|
||||
evaluate: true,
|
||||
join_vars: true,
|
||||
loops: true,
|
||||
typeofs: true,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[wasm_bindgen]
|
||||
impl OxcCompressOptions {
|
||||
#[wasm_bindgen(constructor)]
|
||||
pub fn new() -> Self {
|
||||
Self::default()
|
||||
}
|
||||
|
||||
#[wasm_bindgen(getter)]
|
||||
pub fn booleans(self) -> bool {
|
||||
self.booleans
|
||||
}
|
||||
|
||||
#[wasm_bindgen(setter)]
|
||||
pub fn set_booleans(&mut self, yes: bool) {
|
||||
self.booleans = yes;
|
||||
}
|
||||
|
||||
#[wasm_bindgen(getter = dropDebugger)]
|
||||
pub fn drop_debugger(self) -> bool {
|
||||
self.drop_debugger
|
||||
}
|
||||
|
||||
#[wasm_bindgen(setter = dropDebugger)]
|
||||
pub fn set_drop_debugger(&mut self, yes: bool) {
|
||||
self.drop_debugger = yes;
|
||||
}
|
||||
|
||||
#[wasm_bindgen(getter = dropConsole)]
|
||||
pub fn drop_console(self) -> bool {
|
||||
self.drop_console
|
||||
}
|
||||
|
||||
#[wasm_bindgen(setter = dropConsole)]
|
||||
pub fn set_drop_console(&mut self, yes: bool) {
|
||||
self.drop_console = yes;
|
||||
}
|
||||
|
||||
#[wasm_bindgen(getter)]
|
||||
pub fn evaluate(self) -> bool {
|
||||
self.evaluate
|
||||
}
|
||||
|
||||
#[wasm_bindgen(setter)]
|
||||
pub fn set_evaluate(&mut self, yes: bool) {
|
||||
self.evaluate = yes;
|
||||
}
|
||||
|
||||
#[wasm_bindgen(getter = joinVars)]
|
||||
pub fn join_vars(self) -> bool {
|
||||
self.join_vars
|
||||
}
|
||||
|
||||
#[wasm_bindgen(setter = joinVars)]
|
||||
pub fn set_join_vars(&mut self, yes: bool) {
|
||||
self.join_vars = yes;
|
||||
}
|
||||
|
||||
#[wasm_bindgen(getter)]
|
||||
pub fn loops(self) -> bool {
|
||||
self.loops
|
||||
}
|
||||
|
||||
#[wasm_bindgen(setter)]
|
||||
pub fn set_loops(&mut self, yes: bool) {
|
||||
self.loops = yes;
|
||||
}
|
||||
|
||||
#[wasm_bindgen(getter)]
|
||||
pub fn typeofs(self) -> bool {
|
||||
self.typeofs
|
||||
}
|
||||
|
||||
#[wasm_bindgen(setter)]
|
||||
pub fn set_typeofs(&mut self, yes: bool) {
|
||||
self.typeofs = yes;
|
||||
}
|
||||
}
|
||||
|
||||
#[wasm_bindgen]
|
||||
|
|
|
|||
|
|
@ -28,6 +28,27 @@
|
|||
.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; }
|
||||
|
|
@ -80,9 +101,45 @@
|
|||
<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>
|
||||
<label id="compress">compress<input id="compress-checkbox" type="checkbox"></label>
|
||||
<div id="duration" title="Execution Time"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -657,6 +657,45 @@ async function main() {
|
|||
playground.updateView("codegen");
|
||||
};
|
||||
|
||||
[
|
||||
"compress-booleans",
|
||||
"compress-drop-debugger",
|
||||
"compress-drop-console",
|
||||
"compress-join-vars",
|
||||
"compress-evaluate",
|
||||
"compress-loops",
|
||||
"compress-typeofs",
|
||||
].forEach((key) => {
|
||||
let labelElement = document.getElementById(`${key}`) as HTMLLabelElement
|
||||
if (labelElement) {
|
||||
labelElement.onchange = function () {
|
||||
const normalizedKey = () => {
|
||||
return key.replace('compress-', '').replace(/-([a-z])/g, (g) => g[1].toUpperCase())
|
||||
}
|
||||
const optionKey = normalizedKey();
|
||||
|
||||
if (
|
||||
optionKey !== "booleans"
|
||||
&& optionKey !== "dropDebugger"
|
||||
&& optionKey !== "dropConsole"
|
||||
&& optionKey !== "joinVars"
|
||||
&& optionKey !== "evaluate"
|
||||
&& optionKey !== "loops"
|
||||
&& optionKey !== "typeofs"
|
||||
) {
|
||||
console.error('Unknown compress option key', optionKey)
|
||||
return
|
||||
}
|
||||
|
||||
let checkbox = document.getElementById(`${key}-checkbox`) as HTMLInputElement
|
||||
const checked = checkbox.checked || false;
|
||||
const compressOptions = playground.minifierOptions.compressOptions
|
||||
compressOptions[optionKey] = checked
|
||||
playground.minifierOptions.compressOptions = compressOptions
|
||||
playground.updateView('codegen')
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
document.getElementById("file-type-select").onchange = function (e) {
|
||||
playground.parserOptions.sourceFilename= `test.${e.target.value}`;
|
||||
|
|
|
|||
Loading…
Reference in a new issue