From 76add5503180059a5354195d323e3af628353eb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arnaud=20Barr=C3=A9?= <arnaud.barre@carbometrix.com>
Date: Tue, 27 Feb 2024 05:54:38 +0100
Subject: [PATCH] Support file type in playground (#2520)

<img width="1514" alt="Screenshot 2024-02-27 at 00 16 21"
src="https://github.com/oxc-project/oxc/assets/14235743/32fee380-a2c1-41b3-a564-351597d4a60e">

Not sure about the bindgen thing.

I made the filename optional but given the impact on parsing I think it
could be great for external users to not depend on the tsx default in
the future
---
 crates/oxc_wasm/src/lib.rs     |  4 +++-
 crates/oxc_wasm/src/options.rs |  7 +++++--
 website/playground/index.html  | 10 ++++++++++
 website/playground/index.js    | 10 ++++++++++
 4 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/crates/oxc_wasm/src/lib.rs b/crates/oxc_wasm/src/lib.rs
index 930ba35323133..35859a2f85604 100644
--- a/crates/oxc_wasm/src/lib.rs
+++ b/crates/oxc_wasm/src/lib.rs
@@ -125,7 +125,9 @@ impl Oxc {
 
         let allocator = Allocator::default();
         let source_text = &self.source_text;
-        let path = PathBuf::from("test.tsx");
+        let path = PathBuf::from(
+            parser_options.source_filename.clone().unwrap_or_else(|| "test.tsx".to_string()),
+        );
         let source_type = SourceType::from_path(&path).unwrap_or_default();
 
         let ret = Parser::new(&allocator, source_text, source_type)
diff --git a/crates/oxc_wasm/src/options.rs b/crates/oxc_wasm/src/options.rs
index 67ca97cb56fec..9d3fa3576b9cb 100644
--- a/crates/oxc_wasm/src/options.rs
+++ b/crates/oxc_wasm/src/options.rs
@@ -112,11 +112,14 @@ impl OxcRunOptions {
     }
 }
 
-#[wasm_bindgen]
-#[derive(Default, Clone, Copy)]
+#[wasm_bindgen(getter_with_clone)]
+#[derive(Default, Clone)]
 pub struct OxcParserOptions {
     #[wasm_bindgen(js_name = allowReturnOutsideFunction)]
     pub allow_return_outside_function: bool,
+
+    #[wasm_bindgen(js_name = sourceFilename)]
+    pub source_filename: Option<String>,
 }
 
 #[wasm_bindgen]
diff --git a/website/playground/index.html b/website/playground/index.html
index 17df407b8dd4a..e65d55b719d5b 100644
--- a/website/playground/index.html
+++ b/website/playground/index.html
@@ -46,6 +46,16 @@
             <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>
diff --git a/website/playground/index.js b/website/playground/index.js
index bce97bffcc7da..14aeb78908ba3 100644
--- a/website/playground/index.js
+++ b/website/playground/index.js
@@ -144,6 +144,7 @@ class Playground {
     this.linterOptions = new OxcLinterOptions();
     this.minifierOptions = new OxcMinifierOptions();
 
+    this.parserOptions.sourceFilename = "test.tsx";
     this.runOptions.syntax = true;
     this.runOptions.lint = true;
 
@@ -627,6 +628,15 @@ async function main() {
   };
 
 
+  document.getElementById("file-type-select").onchange = function (e) {
+    playground.parserOptions.sourceFilename= `test.${e.target.value}`;
+    // Need to repaint the editor to clear the rendered linter diagnostics
+    const sourceText = playground.oxc.sourceText;
+    playground.updateEditorText(playground.editor, "");
+    playground.updateView();
+    playground.updateEditorText(playground.editor, sourceText);
+  };
+
   document.getElementById("syntax").onchange = function () {
     const checked = document.getElementById("syntax-checkbox").checked;
     playground.runOptions.syntax = checked;