Add progressive TypeScript compilation (#503)

* Add progressive TypeScript compilation

* Add missing include

* Add CI step for typescript

* Run prettier on tsconfig.json

.github/workflows/pre-build.yaml

@@ -46,3 +46,6 @@ jobs:
       - name: lint & syntax check
         run: npm run lint
 
+      # run type checker
+      - name: typescript
+        run: npm run types

.husky/pre-commit

@@ -12,4 +12,4 @@ if [[ "$CHANGED" == *"$TRANSFILE"* ]] && [[ "$CHANGED" != *"$POTFILE"* ]]; then
 fi
 
 # Lint staged files
-npx lint-staged
+npx lint-staged && npm run types

package.json

@@ -25,6 +25,7 @@
     "run-server": "cross-env ENABLE_AUDIO=true nuxt build && npm run start",
     "e2e:ci": "start-server-and-test run-server http://localhost:8443 test:e2e",
     "generate-e2e-tests": "playwright codegen localhost:8443/",
+    "types": "tsc --noEmit",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
     "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
     "format": "prettier --write .",
@@ -103,6 +104,7 @@
     "start-server-and-test": "^1.14.0",
     "tailwindcss": "^2.2.7",
     "tailwindcss-rtl": "^0.7.3",
+    "typescript": "^4.5.2",
     "vue-i18n-extract": "^2.0.0",
     "vue-jest": "^3.0.7"
   },

src/composables/use-event-listener-outside.js

@@ -32,12 +32,11 @@ export const useEventListenerOutside = ({
   const boundEventRef = ref()
 
   watch(
-    [containerRef, triggerRef, shouldListenRef],
-    /**
-     * @param {[HTMLElement, HTMLElement, boolean]} deps
-     * @param {unknown} _
-     * @param {(cb: () => void) => void} onInvalidate
-     */
+    /** @type {const} */ ([
+      containerRef,
+      triggerRef,
+      shouldListenRef || ref(false),
+    ]),
     ([container, trigger, shouldListen], _, onInvalidate) => {
       if (boundEventRef.value && !shouldListen) {
         const document = getDocument(container)
@@ -50,9 +49,9 @@ export const useEventListenerOutside = ({
        * @param {Event} event
        */
       const onEvent = (event) => {
-        if (!listener) return
+        if (!listener || !container || !(event.target instanceof Element))
+          return
         const target = event.target
-        if (!container) return
 
         // When an element is unmounted right after it receives focus, the focus
         // event is triggered after that, when the element isn't part of the

tsconfig.json

@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "allowSyntheticDefaultImports": true,
+    "jsx": "preserve",
+    "target": "esnext",
+    "module": "esnext",
+    "lib": ["dom", "esnext"],
+    "declaration": true,
+    "declarationMap": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+
+    /* Strict Type-Checking Options */
+    "strict": true,
+
+    /* Additional Checks */
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "importsNotUsedAsValues": "error",
+
+    /* Module Resolution Options */
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "typeRoots": ["./node_modules/@types"],
+    "paths": {
+      "~/*": ["./src/*"],
+      "~~/*": ["./*"]
+    },
+    "baseUrl": "./"
+  },
+  "include": [
+    "src/composables/types.js",
+    "src/composables/use-event-listener-outside.js"
+  ]
+}