update template to Svelte 4

Author: dummdidumm

package.json

@@ -5,11 +5,11 @@
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.1",
     "mini-css-extract-plugin": "^2.6.0",
-    "svelte": "^3.55.0",
-    "svelte-loader": "^3.1.2",
+    "svelte": "^4.0.0",
+    "svelte-loader": "^3.1.9",
     "webpack": "^5.70.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.4"
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   },
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack",

scripts/setupTypeScript.js

@@ -58,12 +58,12 @@ function addDepsToPackageJson() {
 	const packageJSON = JSON.parse(fs.readFileSync(pkgJSONPath, 'utf8'));
 	packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, {
 		'ts-loader': '^9.0.0',
-		'@tsconfig/svelte': '^3.0.0',
+		'@tsconfig/svelte': '^4.0.0',
 		'@types/node': '^16.0.0',
-		'svelte-check': '^3.0.0',
-		'svelte-preprocess': '^5.0.0',
+		'svelte-check': '^3.4.4',
+		'svelte-preprocess': '^5.0.4',
 		tslib: '^2.5.0',
-		typescript: '^4.9.0'
+		typescript: '^5.0.0'
 	});
 
 	// Add script for checking
@@ -127,12 +127,12 @@ function updateWebpackConfig() {
 		// Add preprocess to the svelte loader, this is tricky because there's no easy signifier.
 		// Instead we look for 'hotReload: 'prod,'
 		[
-			/hotReload: \!prod(?!,\n\s*preprocess)/g,
+			/hotReload: \!prod(?!,\r?\n\s*preprocess)/g,
 			'hotReload: !prod,\n\t\t\t\t\t\tpreprocess: sveltePreprocess({ sourceMap: !prod })'
 		],
 		// Add ts-loader
 		[
-			/module: {\n\s*rules: \[\n\s*(?!{\n\s*test: \/\\\.ts\$\/)/g,
+			/module: {\r?\n\s*rules: \[\r?\n\s*(?!{\r?\n\s*test: \/\\\.ts\$\/)/g,
 			`module: {\n\t\trules: [\n\t\t\t{\n\t\t\t\ttest: /\\.ts$/,\n\t\t\t\tloader: 'ts-loader',\n\t\t\t\texclude: /node_modules/\n\t\t\t},\n\t\t\t`,
 		]
 	]);
@@ -149,6 +149,12 @@ function createTsConfig() {
 	createFile(path.join(projectRoot, 'tsconfig.json'), tsconfig);
 }
 
+// Add ambient file so webpack/VS Code can pick up the Svelte ambient types
+function createSvelteAmbientFile() {
+	const file = '/// <reference types="svelte" />\n';
+	createFile(path.join(projectRoot, 'src', 'global.d.ts'), file);
+}
+
 // Adds the extension recommendation
 function configureVsCode() {
 	const dir = path.join(projectRoot, '.vscode');
@@ -192,6 +198,8 @@ updateWebpackConfig();
 
 createTsConfig();
 
+createSvelteAmbientFile();
+
 configureVsCode();
 
 // Delete this script, but not during testing

webpack.config.js

@@ -9,9 +9,11 @@ module.exports = {
 		'build/bundle': ['./src/main.js']
 	},
 	resolve: {
-		alias: {
-			svelte: path.dirname(require.resolve('svelte/package.json'))
-		},
+		// The alias config shouldn't be needed most of the time, you only need to comment it in if you encounter weird
+		// Svelte runtime errors that hint at multiple Svelte runtime versions being pulled in. The alias helps dedupe them.
+		// alias: {
+		//   svelte: path.resolve('node_modules', 'svelte/src/runtime')
+		// },
 		extensions: ['.mjs', '.js', '.svelte'],
 		mainFields: ['svelte', 'browser', 'module', 'main'],
 		conditionNames: ['svelte', 'browser']
@@ -42,13 +44,6 @@ module.exports = {
 					MiniCssExtractPlugin.loader,
 					'css-loader'
 				]
-			},
-			{
-				// required to prevent errors from Svelte on Webpack 5+
-				test: /node_modules\/svelte\/.*\.mjs$/,
-				resolve: {
-					fullySpecified: false
-				}
 			}
 		]
 	},