From 4d462636cbca044ce1b0484bd375cc53ba683c42 Mon Sep 17 00:00:00 2001
From: Wang Wenzhe <mysteryven@gmail.com>
Date: Tue, 18 Jun 2024 18:49:16 +0800
Subject: [PATCH] feat(playground): support modify compressor's options (#3734)

![CleanShot 2024-06-18 at
16.18.02@2x.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/nUl2MXIwjUWxxQRgpP2H/37eda403-b5af-44ad-8858-4693e60abbd1.png)
---
 crates/oxc_wasm/src/lib.rs     |  11 +++-
 crates/oxc_wasm/src/options.rs | 116 +++++++++++++++++++++++++++++++++
 website/playground/index.html  |  59 ++++++++++++++++-
 website/playground/index.ts    |  39 +++++++++++
 4 files changed, 223 insertions(+), 2 deletions(-)

diff --git a/crates/oxc_wasm/src/lib.rs b/crates/oxc_wasm/src/lib.rs
index b7bd814b8..7ecae5be5 100644
--- a/crates/oxc_wasm/src/lib.rs
+++ b/crates/oxc_wasm/src/lib.rs
@@ -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()
                 },
diff --git a/crates/oxc_wasm/src/options.rs b/crates/oxc_wasm/src/options.rs
index cdaadaeae..3ada7e35c 100644
--- a/crates/oxc_wasm/src/options.rs
+++ b/crates/oxc_wasm/src/options.rs
@@ -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]
diff --git a/website/playground/index.html b/website/playground/index.html
index 26e9a2e0b..375722d5d 100644
--- a/website/playground/index.html
+++ b/website/playground/index.html
@@ -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>
diff --git a/website/playground/index.ts b/website/playground/index.ts
index f2c62a7db..5741e980b 100644
--- a/website/playground/index.ts
+++ b/website/playground/index.ts
@@ -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}`;