Use a Snowpack plugin to enable React Fast Refresh (#845)

package-lock.json

@@ -32,6 +32,7 @@
         "@jest/types": "^27.0.6",
         "@snowpack/app-scripts-react": "^1.12.6",
         "@snowpack/plugin-postcss": "1.4.3",
+        "@snowpack/plugin-react-refresh": "^2.5.0",
         "@snowpack/plugin-typescript": "^1.2.1",
         "@snowpack/plugin-webpack": "3.0.0",
         "@storybook/addon-actions": "^6.3.4",

package.json

@@ -48,6 +48,7 @@
     "@jest/types": "^27.0.6",
     "@snowpack/app-scripts-react": "^1.12.6",
     "@snowpack/plugin-postcss": "1.4.3",
+    "@snowpack/plugin-react-refresh": "^2.5.0",
     "@snowpack/plugin-typescript": "^1.2.1",
     "@snowpack/plugin-webpack": "3.0.0",
     "@storybook/addon-actions": "^6.3.4",

snowpack.config.js

@@ -3,7 +3,11 @@ module.exports = {
   proxy: {
     "/auth/admin": "http://localhost:8180/auth/admin/",
   },
-  plugins: ["@snowpack/plugin-postcss", "@snowpack/plugin-typescript"],
+  plugins: [
+    "@snowpack/plugin-postcss",
+    "@snowpack/plugin-react-refresh",
+    "@snowpack/plugin-typescript",
+  ],
   buildOptions: {
     baseUrl: "/adminv2",
     clean: true,

src/index.tsx

@@ -13,3 +13,9 @@ init().then((adminClient) => {
     document.getElementById("app")
   );
 });
+
+// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
+// Learn more: https://snowpack.dev/concepts/hot-module-replacement
+if (import.meta.hot) {
+  import.meta.hot.accept();
+}

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "@snowpack/app-scripts-react/tsconfig.base.json",
   "compilerOptions": {
-    "types": ["jest", "cypress"],
+    "types": ["jest", "cypress", "snowpack-env"],
     "esModuleInterop": true
   }
 }