refactor: improve typescript configuration

.gitignore

@@ -34,3 +34,4 @@ apps/web/cypress/screenshots/**/__tkey-*.png
 apps/librelingo_tools/dist
 **/dist/
 *.tsbuildinfo
+report.*.*.json

.semaphore/semaphore.yml

@@ -75,18 +75,18 @@ blocks:
             - checkout
             - cache restore node-$(checksum yarn.lock)
             - yarn eslint apps/*/cypress
-  - name: Typescript Code Style Check
+  - name: TypeScript check
     dependencies:
       - Eslint
     task:
       jobs:
-        - name: typecodestyle
+        - name: tsc
           commands:
             - sem-version node 12
             - checkout
             - cache restore node-$(checksum yarn.lock)
             - cache restore packages-web-$(checksum yarn.lock)
-            - yarn stylecheck
+            - yarn types
   - name: Sapper build
     dependencies:
       - Eslint Cypress

apps/answer-corrector/package.json

@@ -5,7 +5,8 @@
   "main": "index.js",
   "license": "AGPL-3.0-or-later",
   "scripts": {
-    "build": "tsc --build"
+    "build": "tsc --build",
+    "types": "tsc"
   },
   "publishConfig": {
     "access": "public"
@@ -14,7 +15,6 @@
     "js-levenshtein": "1.1.6"
   },
   "devDependencies": {
-    "@types/jest": "26.0.22",
     "@types/js-levenshtein": "1.1.0"
   }
 }

apps/answer-corrector/src/index.ts

@@ -22,7 +22,7 @@ const getSuggestion = ({
     suggester,
     form
 }: {
-    alwaysSuggest: boolean,
+    alwaysSuggest?: boolean,
     answer: string,
     mappedForm: string,
     suggester: (form: string) => string,

apps/answer-corrector/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/*"],
+  "compilerOptions": {
+      "outDir": "dist",
+      "esModuleInterop": true,
+      "types": ["jest", "node"]
+  },
+}

apps/lluis/package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "eslintfix": "exit 0",
     "prettierfix": "exit 0",
-    "build": "exit 0"
+    "build": "exit 0",
+    "types": "exit 0"
   },
   "dependencies": {
     "bulma": "0.9.1"

apps/lluis/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "include": ["src/**/*", "src/node_modules"],
+  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
+  "compilerOptions": {
+      "outDir": "dist"
+  }
+}

apps/web/package.json

@@ -10,6 +10,7 @@
     "export": "sapper export",
     "start": "node __sapper__/build",
     "jest": "jest src",
+    "types": "sapper build && tsc && svelte-check",
     "fetchPhotos": "./scripts/fetchPhotos.sh",
     "fetchAudios": "./scripts/fetchAudios.sh",
     "updateAllCourseData": "./scripts/updateAllCourseData.sh",
@@ -37,6 +38,7 @@
     "@fortawesome/fontawesome-svg-core": "1.2.35",
     "@fortawesome/free-brands-svg-icons": "5.15.3",
     "@fortawesome/free-solid-svg-icons": "5.15.3",
+    "@librelingo/answer-corrector": "*",
     "@openfonts/noto-sans_all": "1.44.2",
     "bulma": "0.9.1",
     "bulma-pageloader": "0.3.0",
@@ -61,8 +63,7 @@
     "remark-rehype": "8.0.0",
     "sirv": "1.0.11",
     "sortablejs": "1.13.0",
-    "svelte-i18n": "3.0.3",
-    "@librelingo/answer-corrector": "*"
+    "svelte-i18n": "3.0.3"
   },
   "devDependencies": {
     "@babel/core": "7.13.15",
@@ -71,6 +72,7 @@
     "@commitlint/config-conventional": "12.1.1",
     "@knapsack-pro/cypress": "4.3.0",
     "@percy/cypress": "2.3.4",
+    "@types/node": "^14.14.37",
     "@types/sortablejs": "^1.10.6",
     "babel-jest": "26.6.3",
     "babel-plugin-istanbul": "6.0.0",
@@ -99,7 +101,7 @@
     "prettier": "2.2.1",
     "prettier-plugin-svelte": "2.2.0",
     "raw-loader": "4.0.2",
-    "sapper": "0.29.1",
+    "sapper": "^0.29.1",
     "sass-loader": "10.1.1",
     "style-loader": "2.0.0",
     "svelte": "3.37.0",

apps/web/src/Translate.svelte

@@ -1,11 +1,12 @@
-<script>
+<script lang="typescript">
   import { format } from "svelte-i18n"
+  import isBrowser from "./utils/isBrowser"
 
-  export let key
+  export let key: string
 </script>
 
 <span data-tkey={key}>
-  {#if process.browser === false && process.env.WEBPACK_MODE === "development"}
+  {#if isBrowser() === false && process.env.WEBPACK_MODE === "development"}
     <slot />
   {:else}
     {$format(key)}

apps/web/src/components/ChallengePanel.svelte

@@ -1,6 +1,6 @@
 <script lang="typescript">
   import { slide } from "svelte/transition"
-  import Button from "lluis/Button"
+  import Button from "lluis/Button.svelte"
 
   export let buttonText
   export let buttonAction = null

apps/web/src/components/ChallengeScreen.svelte

@@ -1,12 +1,12 @@
 <script lang="typescript">
   import sound from "../media/sound"
-  import DeckChallenge from "./DeckChallenge"
-  import OptionChallenge from "./OptionChallenge"
-  import ShortInputChallenge from "./ShortInputChallenge"
-  import ListeningChallenge from "./ListeningChallenge"
-  import ChipsChallenge from "./ChipsChallenge"
-  import FanfareScreen from "./FanfareScreen"
-  import ProgressBar from "./ProgressBar"
+  import DeckChallenge from "./DeckChallenge/index.svelte"
+  import OptionChallenge from "./OptionChallenge/index.svelte"
+  import ShortInputChallenge from "./ShortInputChallenge.svelte"
+  import ListeningChallenge from "./ListeningChallenge.svelte"
+  import ChipsChallenge from "./ChipsChallenge/index.svelte"
+  import FanfareScreen from "./FanfareScreen.svelte"
+  import ProgressBar from "./ProgressBar.svelte"
   import shuffle from "lodash.shuffle"
   import { fade, scale } from "svelte/transition"
   // TODO: deal with this ignore comment
@@ -22,7 +22,40 @@
   export let skillId
   export let expectedNumberOfChallenges
 
-  let challenges = sortChallengeGroups(
+  type CardChallengeType = {
+    id: string,
+    type: "cards",
+    pictures: Array<string>
+  }
+
+  type ListeningChallengeType = {
+    id: string,
+    type: "listeningExercise",
+  }
+
+  type OptionsChallengeType = {
+    id: string,
+    type: "options",
+  }
+
+  type ShortInputChallengeType = {
+    id: string,
+    type: "shortInput",
+  }
+
+  type ChipsChallengeType = {
+    id: string,
+    type: "chips",
+  }
+
+  type ChallengeType =
+      | CardChallengeType
+      | ListeningChallengeType
+      | OptionsChallengeType
+      | ShortInputChallengeType
+      | ChipsChallengeType
+
+  let challenges: Array<ChallengeType> = sortChallengeGroups(
       shuffle(rawChallenges),
       expectedNumberOfChallenges
   )
@@ -38,20 +71,20 @@
       skipped: 0,
   }
 
-  const preloadImage = (imageName) => {
+  const preloadImage = (imageName: string) => {
       if (typeof Image === "undefined") return
       new Image().src = `images/${imageName}`
   }
 
   challenges
-      .filter(({ type }) => type === "card")
-      .map(({ pictures }) => pictures.map(preloadImage))
+      .filter(({ type }) => type === "cards")
+      .map(({ pictures }: CardChallengeType) => pictures.map(preloadImage))
 
   $: alternativeChallenges =
     currentChallenge &&
     rawChallenges.filter(({ id }) => id !== currentChallenge.id)
 
-  $: registerResult = (isCorrect) => {
+  $: registerResult = (isCorrect: boolean) => {
       if (isCorrect) {
           stats.correct++
           skipAllChallenges = skipAllChallengesFunc

apps/web/src/components/ChipsChallenge/chips.ts

@@ -1,15 +1,27 @@
-const getActualParent = node => node.parentElement.id ? node.parentElement : node.parentElement.parentElement
+const getActualParent = (node: HTMLElement): HTMLElement => {
+    if (node?.parentElement?.id) {
+        return node.parentElement
+    }
+
+    if (node?.parentElement?.parentElement) {
+        return node.parentElement.parentElement
+    }
+
+    throw new Error("Invalid <Chip />")
+}
 
-export const getNodeType = node => getActualParent(node).id
+export const getNodeType = (node: HTMLElement): string => getActualParent(node).id
 
-export const getChipIndex = node => {
-    if (!node.classList.contains("chip")) {
+export const getChipIndex = (node: HTMLElement): number => {
+    if (!node.classList.contains("chip") && node.parentElement) {
         return getChipIndex(node.parentElement)
     }
 
-    if (!node.previousSibling) {
-        return 0
+
+    if (node.previousSibling !== null) {
+        return 1 + getChipIndex(node.previousSibling as HTMLElement)
     }
 
-    return 1 + getChipIndex(node.previousSibling)
+    return 0
+
 }

apps/web/src/components/ChipsChallenge/index.svelte

@@ -3,8 +3,8 @@
   import hotkeys from "hotkeys-js"
   import shuffle from "lodash.shuffle"
   import { writable } from "svelte/store"
-  import ChallengePanel from "../ChallengePanel"
-  import Phrase from "../Phrase"
+  import ChallengePanel from "../ChallengePanel.svelte"
+  import Phrase from "../Phrase.svelte"
   import { createSortable } from "./sortable"
   import { getNodeType, getChipIndex } from "./chips"
 

apps/web/src/components/ChipsChallenge/sortable.ts

@@ -1,10 +1,11 @@
+import type { Writable } from "svelte/store"
 import Sortable from "sortablejs"
 
-export const createSortable = (element, store) => {
+export const createSortable = (element: HTMLElement, store: Writable<string[]>): Sortable => {
     return Sortable.create(element, {
         group: "chips",
         store: {
-            get: store.get,
+            get: () => [],
             set: function(sortable) {
                 store.set(sortable.toArray())
             }

apps/web/src/components/DeckChallenge/index.svelte

@@ -1,8 +1,8 @@
 <script lang="typescript">
   import { onMount } from "svelte"
   import hotkeys from "hotkeys-js"
-  import OptionDeck from "../OptionDeck"
-  import ChallengePanel from "../ChallengePanel"
+  import OptionDeck from "../OptionDeck.svelte"
+  import ChallengePanel from "../ChallengePanel.svelte"
   import { prepareChallenge } from "../../logic"
 
   export let currentChallenge

apps/web/src/components/FanfareScreen.svelte

@@ -6,12 +6,12 @@
   import hotkeys from "hotkeys-js"
   import { onMount } from "svelte"
   import { goto } from "@sapper/app"
-  import Mascot from "./Mascot"
-  import TwitterButton from "./TwitterButton"
-  import Button from "lluis/Button"
-  import Column from "lluis/Column"
-  import Columns from "lluis/Columns"
-  import Title from "lluis/Title"
+  import Mascot from "./Mascot.svelte"
+  import TwitterButton from "./TwitterButton.svelte"
+  import Button from "lluis/Button.svelte"
+  import Column from "lluis/Column.svelte"
+  import Columns from "lluis/Columns.svelte"
+  import Title from "lluis/Title.svelte"
 
   export let rawChallenges
   export let courseURL

apps/web/src/components/GitHubButton.svelte

@@ -11,15 +11,23 @@
 
 <script lang="typescript">
   import { onMount } from "svelte"
-  import Icon from "lluis/Icon"
-  import Button from "lluis/Button"
+  import isBrowser from "../utils/isBrowser"
+  import Icon from "lluis/Icon.svelte"
+  import Button from "lluis/Button.svelte"
+  import isCypress from "../utils/isCypress"
   // eslint-disable-next-line @typescript-eslint/no-var-requires
   const pMemoize = require("p-memoize")
-  export let stars = (process.browser === true ? window.stars : null) || "   "
+
+  type WindowWithStars = Window & {
+    stars: number,
+    star_count: number,
+  }
+
+  export let stars = (isBrowser() === true ? (window as unknown as WindowWithStars).stars : null) || "   "
   export let size = "small"
 
   onMount(async () => {
-      if (process.browser === true && window.isCypress) {
+      if (isBrowser() === true && isCypress()) {
           stars = 999
           return
       }
@@ -30,8 +38,8 @@
           .then((res) => res.json())
           .then(({ stargazers_count }) => {
               stars = stargazers_count
-              if (process.browser === true) {
-                  window.star_count = stargazers_count
+              if (isBrowser() === true) {
+                  (window as unknown as WindowWithStars).star_count = stargazers_count
               }
           })
   })