update svelte-webpack-ts to Svelte 4

svelte-webpack-ts/package.json

@@ -1,37 +1,36 @@
 {
   "private": true,
+  "type": "module",
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack",
     "dev": "webpack serve",
     "start": "serve public --listen 8080",
     "validate": "svelte-check",
-    "cypress:run": "cypress run --config video=false --component"
+    "cypress:run": "cypress run --component"
   },
   "devDependencies": {
+    "@tsconfig/svelte": "^5.0.4",
     "autoprefixer": "^10.4.8",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.1",
     "css-minimizer-webpack-plugin": "^4.0.0",
-    "cypress": "^12.7.0",
+    "cypress": "^13.15.2",
     "mini-css-extract-plugin": "^2.6.1",
     "postcss": "^8.4.16",
     "postcss-loader": "^7.0.1",
-    "svelte": "^3.49.0",
-    "svelte-htm": "^1.1.1",
-    "svelte-loader": "^3.1.3",
-    "svelte-preprocess": "^4.10.7",
+    "serve": "^13.0.2",
+    "svelte": "^4.2.19",
+    "svelte-check": "^4.0.5",
+    "svelte-loader": "^3.1.8",
+    "svelte-preprocess": "^6.0.3",
     "tailwindcss": "^3.1.8",
     "ts-loader": "^9.3.1",
     "ts-node": "^10.9.1",
-    "typescript": "^4.7.4",
+    "typescript": "^5.6.2",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.10.0"
   },
-  "dependencies": {
-    "@tsconfig/svelte": "^3.0.0",
-    "serve": "^13.0.2"
-  },
   "browserslist": [
     "defaults"
   ]

svelte-webpack-ts/src/lib/Button.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-  export let type: string = "button";
+  import type { HTMLButtonAttributes } from "svelte/elements";
+
+  export let type: HTMLButtonAttributes["type"] = "button";
   export let msg: string;
 </script>
 

svelte-webpack-ts/src/lib/InputField.svelte

@@ -2,7 +2,7 @@
   export let label: string;
   export let submitted: boolean;
   export let requiredMessage: string;
-  export let value: string;
+  export let value: string | undefined = undefined;
 
   function handleInput(e: any) {
     value = e.target.value;

svelte-webpack-ts/src/lib/LoginForm.svelte

@@ -6,7 +6,7 @@
   const dispatch = createEventDispatcher();
 
   export let title = "Log In";
-  export let errorMessage: string;
+  export let errorMessage: string | undefined = undefined;
 
   let username = "";
   let password = "";

svelte-webpack-ts/webpack.config.ts → svelte-webpack-ts/webpack.config.cjs

@@ -1,17 +1,15 @@
-import type { Configuration } from "webpack";
-import type { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server";
-import MiniCssExtractPlugin from "mini-css-extract-plugin";
-import path from "path";
-import sveltePreprocess from "svelte-preprocess";
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const path = require("path");
+const { sveltePreprocess } = require("svelte-preprocess");
 
-const config: Configuration & WebpackDevServerConfiguration = {
+module.exports = {
   mode: "development",
   entry: {
     bundle: ["./src/main.ts"],
   },
   resolve: {
     alias: {
-      svelte: path.dirname(require.resolve("svelte/package.json")),
+      svelte: path.resolve('node_modules', 'svelte/src/runtime'),
     },
     extensions: [".mjs", ".js", ".ts", ".svelte"],
     mainFields: ["svelte", "browser", "module", "main"],
@@ -83,5 +81,3 @@ const config: Configuration & WebpackDevServerConfiguration = {
   ],
   devtool: "source-map",
 };
-
-export default config;