Fix all TypeScript errors

svelte/package.json

@@ -1,32 +1,36 @@
 {
-  "name": "svelte-app",
-  "version": "1.0.0",
-  "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -c -w",
-    "start": "sirv public"
+  "dependencies": {
+    "axios": "^0.27.2",
+    "bootstrap": "^5.1.3",
+    "remarkable": "^2.0.1",
+    "sirv-cli": "^2.0.2"
   },
   "devDependencies": {
     "@popperjs/core": "^2.11.5",
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-node-resolve": "^13.2.1",
     "@rollup/plugin-typescript": "^8.3.2",
-    "@tsconfig/svelte": "^3.0.0",
+    "@tsconfig/svelte": "^2.0.0",
+    "@types/bootstrap": "^5.1.10",
+    "@types/remarkable": "^1.7.5",
+    "@types/rollup-plugin-css-only": "^3.1.0",
     "rollup": "^2.71.0",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-livereload": "^2.0.5",
     "rollup-plugin-svelte": "^7.1.0",
     "rollup-plugin-terser": "^7.0.2",
     "svelte": "^3.47.0",
-    "svelte-check": "^2.7.0",
-    "svelte-preprocess": "^4.10.6",
-    "tslib": "^2.4.0",
-    "typescript": "^4.6.4"
+    "svelte-check": "^2.0.0",
+    "svelte-preprocess": "^4.0.0",
+    "tslib": "^2.0.0",
+    "typescript": "^4.0.0"
   },
-  "dependencies": {
-    "axios": "^0.27.2",
-    "bootstrap": "^5.1.3",
-    "remarkable": "^2.0.1",
-    "sirv-cli": "^2.0.2"
-  }
+  "name": "svelte-app",
+  "scripts": {
+    "build": "rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "dev": "rollup -w --config rollup.config.ts --configPlugin @rollup/plugin-typescript",
+    "start": "sirv public"
+  },
+  "version": "1.0.0"
 }

svelte/rollup.config.ts

@@ -3,14 +3,15 @@ import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
 import livereload from 'rollup-plugin-livereload';
 import { terser } from 'rollup-plugin-terser';
-import css from 'rollup-plugin-css-only';
-import autoPreprocess from 'svelte-preprocess';
+import sveltePreprocess from 'svelte-preprocess';
 import typescript from '@rollup/plugin-typescript';
+import css from 'rollup-plugin-css-only';
+import * as child_process from 'child_process';
 
 const production = !process.env.ROLLUP_WATCH;
 
 function serve() {
-    let server;
+    let server: child_process.ChildProcess;
 
     function toExit() {
         if (server) server.kill(0);
@@ -19,7 +20,7 @@ function serve() {
     return {
         writeBundle() {
             if (server) return;
-            server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
+            server = child_process.spawn('npm', ['run', 'start', '--', '--dev'], {
                 stdio: ['ignore', 'inherit', 'inherit'],
                 shell: true
             });
@@ -30,14 +31,14 @@ function serve() {
     };
 }
 
-function componentExportDetails(componentName) {
+function componentExportDetails(componentName: string) {
     return {
         input: `src/declarations/${componentName.toLowerCase()}.ts`,
         output: {
             sourcemap: !production,
             format: 'iife',
             name: `${componentName.toLowerCase()}`,
-            file: `public/build/${componentName}.ts`,
+            file: `public/build/${componentName}.js`,
         },
         plugins: [
             svelte({
@@ -46,11 +47,8 @@ function componentExportDetails(componentName) {
                     dev: !production
                 },
                 // TypeScript preprocessing
-                preprocess: autoPreprocess()
+                preprocess: sveltePreprocess({ sourceMap: !production })
             }),
-            // TypeScript support
-            typescript({ sourceMap: !production }),
-
             // we'll extract any component CSS out into
             // a separate file - better for performance
             css({ output: `${componentName}.css` }),
@@ -66,6 +64,12 @@ function componentExportDetails(componentName) {
             }),
             commonjs(),
 
+            // Some TypeScript options.
+            typescript({
+                sourceMap: !production,
+                inlineSources: !production
+            }),
+
             // In dev mode, call `npm run start` once
             // the bundle has been generated
             !production && serve(),

svelte/src/api/getters.ts

@@ -1,7 +1,7 @@
 import axios from 'axios';
 
 
-export async function get(url) {
+export async function get(url: string): Promise<any> {
     return (await axios.get(url)).data;
 }
 

svelte/src/api/media.ts

@@ -1,3 +1,3 @@
-export default function media_path(path) {
+export default function media_path(path: string): string {
   return document.getElementById("media-prefix").innerText + path;
 }

svelte/src/api/static.ts

@@ -1,3 +1,3 @@
-export default function static_path(path) {
+export default function static_path(path: string): string {
   return document.getElementById("static-prefix").innerText + path;
 }

svelte/src/ui/Donate.svelte

@@ -2,11 +2,11 @@
   import { get } from '../api/getters.js';
   import Modal from './Modal.svelte';
 
-  let pay_form;
+  let pay_form: HTMLFormElement;
 
   $: elements = {};
 
-  function pay() {
+  function pay(): void {
     for (let item in elements) {
       let input = document.createElement("input");
       pay_form.appendChild(input);
@@ -16,7 +16,7 @@
     }
   }
 
-  function add(id) {
+  function add(id: string): void {
     let list = elements;
     if (!list[id]) {
       list[id] = 1;
@@ -26,23 +26,24 @@
     elements = list;
   }
 
-  function plus_one(id, max) {
+  function plus_one(id: string, max: number): void {
     let list = elements;
     ++list[id];
     if (list[id] > max)
       list[id] = max;
     elements = list;
   }
 
-  function dash_one(id) {
+  function dash_one(id: string): void {
     let list = elements;
     --list[id];
     if (list[id] <= 0)
       delete list[id];
     elements = list;
   }
 
-  function update(id, elem, max) {
+  // event.target haven't any right annotations. idk what do.
+  function update(id: string, elem, max: number): void {
     let list = elements;
     let old = list[id];
     list[id] = elem.value;
@@ -59,13 +60,7 @@
     elements = list;
   }
 
-  function generate_link() {
-    let url = new URL(window.location.origin + "/pay/");
-    url.searchParams.append("items", JSON.stringify(elements));
-    return url
-  }
-
-  function toggle_modal(id) {
+  function toggle_modal(id: string): void {
     let e = document.getElementById("modal-"+id);
     e.classList.toggle("show")
     e.classList.toggle("visually-hidden")
@@ -78,7 +73,8 @@
   <h2 class="fw-bold text-center pb-3 pt-5">Донат</h2>
   <div class="row row-cols-1 row-cols-lg-2 row-cols-xxl-3 align-items-stretch g-4 py-5">
     {#await products}
-      {#each [1,2] as id}
+      <!-- Show two 'Loading...' panels -->
+      {#each [1,2] as _}
         <div class="col">
           <div class="card card-cover h-100 overflow-hidden text-white bg-dark rounded-5 shadow">
             <div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">

svelte/src/ui/Hero.svelte

@@ -2,11 +2,11 @@
   import {Toast as ToastBootstrap} from 'bootstrap';
   import Toast from './Toast.svelte';
 
-  export let title;
-  export let subtitle;
-  export let players;
-  export let ip;
-  export let ip_elem;
+  export let title: string;
+  export let subtitle: string;
+  export let players: number;
+  export let ip: string;
+  export let ip_elem: undefined | HTMLElement;
 
   function copy() {
     if (!navigator.clipboard) {

svelte/src/ui/LastDonateCard.svelte

@@ -1,8 +1,23 @@
 <script lang="ts">
   import { get } from '../api/getters';
 
-  export let id;
-  export let donate;
+  export let id: string;
+  export let donate: {
+    id: string,
+    product: string,
+    /* This will be need, when we will remove lazy-init in API.
+    {
+      id: string,
+      name: string,
+      price: number,
+      long_description: string | null,
+      image: string | null,
+      max_in_cart: number,
+      enabled: boolean,
+    }, */
+    player: string, // {nickname: string},
+    date: string,
+  };
 </script>
 
 <div class="col">

svelte/src/ui/Modal.svelte

@@ -1,30 +1,25 @@
 <script lang="ts">
+  // @ts-expect-error
   import { Remarkable } from 'remarkable';
 
-  export let title;
-  export let id;
-  export let md = null;
+  export let title: string;
+  export let id: string;
+  export let md: string | null = null;
 
   let renderer = new Remarkable();
   let text = "";
   if (md != null) {
     text = renderer.render(md);
   }
 
-  let element;
+  let element: Element;
 
   function toggle() {
     element.classList.toggle("show");
     setTimeout(function () {
       element.classList.toggle("visually-hidden");
     }, 500)
   }
-
-  function toggle_mouseout() {
-    if (element.classList.contains("show")) {
-      toggle();
-    }
-  }
 </script>
 
 <div bind:this={element} class="modal fade visually-hidden text-dark" tabindex="-1" style="display: block;" aria-modal="true" role="dialog"

svelte/src/ui/Navbar.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-  function open(event) {
+  function open(event: MouseEvent): void {
     for (let item of document.getElementsByClassName("nav-link"))
       item.classList.remove("active");
+    // @ts-expect-error event.target is of type HTMLElement, not a EventTarget
     event.target.classList.add("active");
   }
 </script>

svelte/src/ui/Toast.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-    export let src = false;
-    export let id;
-    export let name;
-    export let time = "Сейчас";
+    export let src: string = "";
+    export let id: string;
+    export let name: string;
+    export let time: string = "Сейчас";
 </script>
 
 <div class="toast-index toast-container position-fixed bottom-0 end-0 p-3" id="toastPlacement">
   <div class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="toast-{id}">
     <div class="toast-header">
-      {#if !src}
+      {#if src.length != 0}
         <img {src} class="rounded me-2" width="16" alt="avatar">
       {/if}
       <strong class="me-auto">{name}</strong>

svelte/tsconfig.json

@@ -1,8 +1,18 @@
 {
   "compilerOptions": {
-    "types": ["node", "svelte"]
+    "types": [
+      "node",
+      "svelte"
+    ]
   },
-  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
+  "exclude": [
+    "node_modules/*",
+    "__sapper__/*",
+    "public/*"
+  ],
   "extends": "@tsconfig/svelte/tsconfig.json",
-  "include": ["src/**/*"]
+  "include": [
+    "src/**/*",
+    "rollup.config.ts"
+  ]
 }