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

@@ -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)

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]

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>

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;