svelte-check-plugin and resolve warnings, devServer hot load

package.json

@@ -28,6 +28,7 @@
  "svelte-loader": "3.1.2",
  "svelte-preprocess": "4.10.3",
  "svelte-check": "^2.4.5",
+ "svelte-check-plugin": "1.0.2",
  "svelte-preprocess-sass": "2.0.1",
  "svg-inline-loader": "^0.8.0",
  "svue": "^1.5.3",
@@ -37,6 +38,7 @@
  "webpack-cli": "4.9.2",
  "webpack-dev-server": "4.7.4",
  "@tsconfig/svelte": "^3.0.0",
+ "typescript": "4.5.5",
  "process":"0.11.10"
  },
  "scripts": {

src/common/Image.svelte

@@ -180,6 +180,7 @@
 
  // Fix blurry image bug
  // https://stackoverflow.com/a/36787557
+ backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  }

src/common/ProgressiveImage.svelte

@@ -138,7 +138,7 @@
  top: 0;
  left: 0;
 
- user-drag: none;
+ -webkit-user-drag: none; /* only on webkit */
  user-select: none;
 
  transition: opacity 0.2s linear;

webpack.app.config.js

@@ -19,6 +19,7 @@ module.exports = {
  Dylan had this on v3
  https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md
  */
+ hot: true,
  allowedHosts: 'all',
  host: "0.0.0.0",
  port: 80,

webpack.base.config.js

@@ -1,7 +1,8 @@
+/* TODO: switch to imports instead of require https://github.com/baileyherbert/svelte-webpack-starter/blob/main/webpack.config.ts */
 const path = require("path");
 const autoPreprocess = require("svelte-preprocess");
 const { preprocessOptions } = require("./preprocess.config.js");
-// import SvelteCheckPlugin from 'svelte-check-plugin';
+const SvelteCheckPlugin = require('svelte-check-plugin');
 
 const DotenvWebpack = require('dotenv-webpack');
 const dotenv = require('dotenv');
@@ -22,9 +23,23 @@ const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
 // Speed measurer
 const smp = new SpeedMeasurePlugin();
 
+
 const environment =
  process.env.NODE_ENV == null ? "development" : process.env.NODE_ENV;
 
+/**
+ * Change this to `true` to run svelte-check during hot reloads. This will impact build speeds but will show more
+ * thorough errors and warnings.
+ */
+ const svelteCheckInDevelopment = false;
+
+ /**
+ * Change this to `false` to disable svelte-check during production builds. Build speeds will be faster, but error
+ * and warning checks will be less thorough.
+ */
+const svelteCheckInProduction = true;
+
+
 const useAnalyzer = environment.endsWith("analyze");
 
 const prod =
@@ -198,6 +213,8 @@ module.exports = wrap({
  // }
  // },
  }),
+ ...(svelteCheckInDevelopment || prod && svelteCheckInProduction ? [new SvelteCheckPlugin()] : [])
+ ,
  ...(useAnalyzer
  ? [
  new BundleAnalyzerPlugin({