update: upgrade webpack to version 5 and cleanup a bit of renderer code

declarations/svelte.d.ts

@@ -1 +1,7 @@
-declare module '*.svelte';
+declare module '*.svelte' {
+  class Component {
+    public constructor(options: { target: HTMLElement });
+  }
+
+  export = Component;
+}

package.json

@@ -96,8 +96,8 @@
     "svelte-loader": "^2.13.6",
     "ts-loader": "^8.0.14",
     "typescript": "^4.1.3",
-    "webpack": "^4.44.2",
+    "webpack": "^5.11.1",
-    "webpack-cli": "^3.3.12"
+    "webpack-cli": "^4.3.1"
   },
   "repository": "https://git.fuwafuwa.moe/Xymorot/RenaiApp",
   "bugs": "https://git.fuwafuwa.moe/Xymorot/RenaiApp/issues",

scripts/webpack.config.js

@@ -12,22 +12,14 @@ module.exports = {
     rules: [
       {
         test: /\.svelte$/,
-        loader: [
+        loader: 'svelte-loader',
-          {
-            loader: 'svelte-loader',
-          },
-        ],
       },
       {
         test: /\.ts$/,
-        loader: [
+        loader: 'ts-loader',
-          {
+        options: {
-            loader: 'ts-loader',
+          configFile: path.resolve('tsconfig.renderer.json'),
-            options: {
+        },
-              configFile: path.resolve('tsconfig.renderer.json'),
-            },
-          },
-        ],
       },
       {
         test: /\.mjs$/,

src/renderer.ts

@@ -1,15 +1,5 @@
-// This file is required by the index.html file and will
-// be executed in the renderer process for that window.
-// All of the Node.js APIs are available in this process.
-
 import App from './renderer/App.svelte';
 
-((): void =>
+new App({
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-return -- fix this together with the typescript support of svelte
+  target: document.querySelector('#app'),
-  new App({
+});
-    target: document.querySelector('#app'),
-    props: {
-      // we'll learn about props later
-      answer: 42,
-    },
-  }))();

src/renderer/components/3-polymers/NhentaiLogin.svelte

@@ -1,6 +1,6 @@
 <script>
   import { t } from '../../services/utils';
-  import Bttn from '../1-atoms/Bttn.svelte';
+  import SvelteButton from '../1-atoms/SvelteButton.svelte';
   import { nhentaiSaveFavorites } from '../../services/api';
 
   function handleClick() {
@@ -11,5 +11,5 @@
 <style></style>
 
 <div class="nhentai-login">
-  <Bttn on:click="{handleClick}">{ t('Save nhentai Favorites') }</Bttn>
+  <SvelteButton on:click="{handleClick}">{ t('Save nhentai Favorites') }</SvelteButton>
 </div>