Add a static type checker

runarberg · Nov 1, 2023 · 76212df · 76212df
1 parent a4b0ecc
commit 76212df
Show file tree

Hide file tree

Showing 76 changed files with 1,536 additions and 594 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -103,6 +103,35 @@ jobs:
       - name: Lint
         run: npm run lint
 
+  check:
+    needs: [install]
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x]
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Cache node_modules
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-node-modules
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-node-${{ matrix.node-version }}-node-modules-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-node-${{ matrix.node-version }}-node-modules
+
+      - name: Lint
+        run: npm run check
+
   test:
     needs: [install]
     runs-on: ubuntu-latest

diff --git a/bin/mathup.js b/bin/mathup.js
@@ -23,6 +23,7 @@ function main() {
     return;
   }
 
+  /** @type {import("../src/index.js").Options} */
   const options = {
     bare: argv.b || argv.bare,
     display: argv.d || argv.display ? "block" : undefined,

diff --git a/demo/playground.js b/demo/playground.js
@@ -1,36 +1,66 @@
 import "../src/custom-element.js";
 
 const playground = document.getElementById("playground");
-const input = playground.querySelector("[name='input']");
-const display = playground.querySelector("[name='display']");
-const dir = playground.querySelector("[name='dir']");
-const decimalMark = playground.querySelector("[name='decimal-mark']");
-const colSep = playground.querySelector("[name='col-sep']");
-const rowSep = playground.querySelector("[name='row-sep']");
+
+if (!playground) {
+  throw new Error("playground not in DOM");
+}
+
+/** @type {HTMLTextAreaElement | null} */
+const input = playground.querySelector("textarea[name='input']");
+
+/** @type {HTMLInputElement | null} */
+const display = playground.querySelector("input[name='display']");
+
+/** @type {HTMLInputElement | null} */
+const dir = playground.querySelector("input[name='dir']");
+
+/** @type {HTMLInputElement | null} */
+const decimalMark = playground.querySelector("input[name='decimal-mark']");
+
+/** @type {HTMLInputElement | null} */
+const colSep = playground.querySelector("input[name='col-sep']");
+
+/** @type {HTMLInputElement | null} */
+const rowSep = playground.querySelector("input[name='row-sep']");
+
+/** @type import("../src/custom-element.js").default | null */
 const mathUp = playground.querySelector("math-up");
 
 function handleInput() {
-  mathUp.textContent = input.value;
+  if (mathUp && input) {
+    mathUp.textContent = input.value;
+  }
 }
 
 function handleDisplayChange() {
-  mathUp.display = display.checked ? display.value : "";
+  if (mathUp && display) {
+    mathUp.display = display.checked ? display.value : "";
+  }
 }
 
 function handleDirChange() {
-  mathUp.dir = dir.checked ? dir.value : "";
+  if (mathUp && dir) {
+    mathUp.dir = dir.checked ? dir.value : "";
+  }
 }
 
 function handleDecimalMarkChange() {
-  mathUp.decimalMark = decimalMark.value;
+  if (mathUp && decimalMark) {
+    mathUp.decimalMark = decimalMark.value;
+  }
 }
 
 function handleColSepChange() {
-  mathUp.colSep = colSep.value;
+  if (mathUp && colSep) {
+    mathUp.colSep = colSep.value;
+  }
 }
 
 function handleRowSepChange() {
-  mathUp.rowSep = rowSep.value;
+  if (mathUp && rowSep) {
+    mathUp.rowSep = rowSep.value;
+  }
 }
 
 handleInput();
@@ -40,9 +70,9 @@ handleDecimalMarkChange();
 handleColSepChange();
 handleRowSepChange();
 
-input.addEventListener("input", handleInput);
-display.addEventListener("change", handleDisplayChange);
-dir.addEventListener("change", handleDirChange);
-decimalMark.addEventListener("input", handleDecimalMarkChange);
-colSep.addEventListener("input", handleColSepChange);
-rowSep.addEventListener("input", handleRowSepChange);
+input?.addEventListener("input", handleInput);
+display?.addEventListener("change", handleDisplayChange);
+dir?.addEventListener("change", handleDirChange);
+decimalMark?.addEventListener("input", handleDecimalMarkChange);
+colSep?.addEventListener("input", handleColSepChange);
+rowSep?.addEventListener("input", handleRowSepChange);
diff --git a/demo/test-cases.js b/demo/test-cases.js
@@ -37,7 +37,7 @@ class TestCaseElement extends HTMLElement {
     const pre = document.createElement("pre");
     const code = document.createElement("code");
     const mathUp = document.createElement("math-up");
-    const input = this.textContent.trim();
+    const input = this?.textContent?.trim() ?? "";
     const options = {
       display: this.getAttribute("display"),
       dir: this.getAttribute("dir"),
@@ -52,6 +52,7 @@ class TestCaseElement extends HTMLElement {
 
     for (const [key, value] of Object.entries(options)) {
       if (value) {
+        // @ts-ignore
         mathUp[key] = value;
       }
     }