feat(website): add TypeScript and JSX toggles on web demo

Allow the user to try out experimental TypeScript support right on the website.
quick-lint · Dec 14, 2023 · 94d5c98 · 94d5c98
1 parent 01b687d
commit 94d5c98
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 3 deletions.
diff --git a/website/public/demo/demo.mjs b/website/public/demo/demo.mjs
@@ -1,7 +1,10 @@
 // Copyright (C) 2020  Matthew "strager" Glazar
 // See end of file for extended copyright information.
 
-import { createProcessFactoryAsync } from "../../wasm/quick-lint-js.js";
+import {
+  LanguageOptions,
+  createProcessFactoryAsync,
+} from "../../wasm/quick-lint-js.js";
 import {} from "../error-box.mjs";
 
 let codeInputElement = document.getElementById("code-input");
@@ -11,6 +14,9 @@ let codeInputMarksScrollerElement = document.getElementById(
 );
 let shadowCodeInputElement = document.getElementById("shadow-code-input");
 
+let enableJSXElement = document.getElementById("enable-jsx");
+let enableTypeScriptElement = document.getElementById("enable-typescript");
+
 codeInputElement.addEventListener("scroll", (event) => {
   synchronizeScrollingAndSize();
 });
@@ -158,6 +164,10 @@ createProcessFactoryAsync()
       let input = codeInputElement.value;
       let marks;
       try {
+        doc.setLanguageOptions(
+          (enableTypeScriptElement.checked ? LanguageOptions.TYPESCRIPT : 0) |
+            (enableJSXElement.checked ? LanguageOptions.JSX : 0)
+        );
         doc.setText(input);
         marks = doc.lint();
       } catch (e) {
@@ -171,6 +181,12 @@ createProcessFactoryAsync()
       lintAndUpdate();
       synchronizeScrollingAndSize();
     });
+    enableTypeScriptElement.addEventListener("change", (_event) => {
+      lintAndUpdate();
+    });
+    enableJSXElement.addEventListener("change", (_event) => {
+      lintAndUpdate();
+    });
     lintAndUpdate();
   })
   .catch((error) => {

diff --git a/website/public/demo/index.ejs.html b/website/public/demo/index.ejs.html
@@ -76,6 +76,21 @@
         position: absolute;
       }
 
+      .checkbox-list {
+        --checkbox-list-item-padding-x: 0.25rem;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        list-style-type: none;
+        margin: 1rem calc(var(--checkbox-list-item-padding-x) * -1);
+        padding: 0;
+      }
+      .checkbox-list label {
+        white-space: nowrap;
+        padding: 0.25rem var(--checkbox-list-item-padding-x);
+      }
+
       footer {
         border-top: 0;
       }
@@ -113,20 +128,38 @@ <h1>Demo</h1>
 
       <p>
         See how quick-lint-js works right here in your browser! Paste your
-        favorite buggy JavaScript code below:
+        favorite buggy JavaScript or TypeScript code below:
       </p>
 
+      <ul class="checkbox-list">
+        <li>
+          <!-- TODO(#690): Remove '(experimental)'. -->
+          <label
+            ><input type="checkbox" id="enable-typescript" checked /> TypeScript
+            (experimental)</label
+          >
+        </li>
+        <li>
+          <label
+            ><input type="checkbox" id="enable-jsx" checked /> JSX/React</label
+          >
+        </li>
+      </ul>
       <pre class="code-view" id="shadow-code-input"></pre>
       <pre
         class="code-view"
         id="code-input-marks-scroller"
       ><pre id="code-input-marks"></pre></pre>
       <textarea class="code-view" id="code-input" spellcheck="false">
-const occupation = language + " coder";
+const occupation: string = language + " coder";
 const language = "JavaScript";
 occupation = "Senior " + occupation;
 
 console.log(`Welcome, ${ocupation}!`);
+
+function reactHello() {
+  return &lt;h1 className="text-center"&gt;Hello, world!&lt;/h&gt;;
+}
 </textarea
       >