fix: replace custom sw with vite, fix caching (#207)

* fix: replace custom sw with vite, fix caching
* chore: fix package versions and default config bug
* chore: gitignore update

.depcheckrc.yaml

@@ -21,4 +21,6 @@ ignores: [
   'allure-commandline',
   # To run linting checks
   'npm-run-all',
+  # SW code is injected at build time
+  'virtual:pwa-register'
 ]

.gitignore

@@ -8,6 +8,7 @@ src/i18n/locales/**/*_old.json
 yarn-error.log
 .firebase
 firebase-debug.log
+.stylelintcache
 
 # os or editor
 .idea

firebase.json

@@ -10,6 +10,36 @@
         "source": "**",
         "destination": "/index.html"
       }
+    ],
+    "headers": [
+      {
+        "source":
+        "**/*.@(jpg|jpeg|gif|png|svg|webp|js|css|eot|otf|ttf|ttc|woff|woff2|font.css)",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "max-age=604800"
+          }
+        ]
+      },
+      {
+        "source": "/**",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "no-cache, no-store, must-revalidate"
+          }
+        ]
+      },
+      {
+        "source": "/sw.js",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "no-cache, no-store, must-revalidate"
+          }
+        ]
+      }
     ]
   }
 }

package.json

@@ -82,7 +82,7 @@
     "@typescript-eslint/eslint-plugin": "^5.17.0",
     "@typescript-eslint/parser": "^5.17.0",
     "@vitejs/plugin-react": "^1.0.7",
-    "@vitest/coverage-c8": "^0.23.4",
+    "@vitest/coverage-c8": "^0.25.7",
     "allure-commandline": "^2.17.2",
     "codeceptjs": "3.3.0",
     "confusing-browser-globals": "^1.0.10",
@@ -116,15 +116,15 @@
     "tsconfig-paths": "^4.1.0",
     "typescript": "^4.3.4",
     "vi-fetch": "^0.8.0",
-    "vite": "^3.0.4",
-    "vite-plugin-eslint": "^1.3.0",
+    "vite": "^4.0.0",
+    "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-html": "^3.2.0",
-    "vite-plugin-pwa": "^0.11.13",
-    "vite-plugin-static-copy": "^0.11.1",
-    "vite-plugin-stylelint": "^2.1.0",
-    "vitest": "^0.23.4",
-    "workbox-build": "^6.5.2",
-    "workbox-window": "^6.5.2"
+    "vite-plugin-pwa": "^0.14.0",
+    "vite-plugin-static-copy": "^0.13.0",
+    "vite-plugin-stylelint": "^4.0.1",
+    "vitest": "^0.25.7",
+    "workbox-build": "^6.5.4",
+    "workbox-window": "^6.5.4"
   },
   "peerDependencies": {
     "react-router": "^6.4.0"
@@ -138,4 +138,4 @@
     "codeceptjs/**/ansi-regex": "^4.1.1",
     "codeceptjs/**/minimatch": "^3.0.5"
   }
-}
+}

src/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import 'wicg-inert';
+import { registerSW } from 'virtual:pwa-register';
 
-import registerServiceWorker from './registerServiceWorker';
 import App from './App';
 
 ReactDOM.render(<App />, document.getElementById('root'));
 
-registerServiceWorker();
+registerSW();

src/utils/configLoad.ts

@@ -12,26 +12,6 @@ import { initializeFavorites } from '#src/stores/FavoritesController';
 
 const CONFIG_HOST = import.meta.env.APP_API_BASE_URL;
 
-const defaultConfig: Config = {
-  id: '',
-  siteName: '',
-  description: '',
-  player: '',
-  assets: {
-    banner: '/images/logo.png',
-  },
-  content: [],
-  menu: [],
-  integrations: {},
-  styling: {
-    footerText: '',
-    shelfTitles: true,
-  },
-  features: {
-    enableSharing: true,
-  },
-};
-
 const setCssVariables = ({ backgroundColor, highlightColor, headerBackground }: Styling) => {
   const root = document.querySelector(':root') as HTMLElement;
 
@@ -76,7 +56,30 @@ const calculateAccessModel = (config: Config): AccessModel => {
 export async function loadAndValidateConfig(configSource: string | undefined) {
   configSource = formatSourceLocation(configSource);
 
+  // Explicitly set default config here as a local variable,
+  // otherwise if it's a module level const, the merge below causes changes to nested properties
+  const defaultConfig: Config = {
+    id: '',
+    siteName: '',
+    description: '',
+    player: '',
+    assets: {
+      banner: '/images/logo.png',
+    },
+    content: [],
+    menu: [],
+    integrations: {},
+    styling: {
+      footerText: '',
+      shelfTitles: true,
+    },
+    features: {
+      enableSharing: true,
+    },
+  };
+
   if (!configSource) {
+    useConfigStore.setState({ config: defaultConfig });
     throw new Error('Config not defined');
   }
 

tsconfig.json

@@ -47,7 +47,8 @@
       "vi-fetch/matchers",
       "vitest/globals",
       "@testing-library/jest-dom",
-      "@types/jwplayer"
-    ]
+      "@types/jwplayer",
+      "vite-plugin-pwa/client"
+    ],
   }
 }

vite.config.ts

@@ -1,15 +1,15 @@
 import path from 'path';
 import fs from 'fs';
 
-import { defineConfig } from 'vite';
+import { ConfigEnv, defineConfig, UserConfigExport } from 'vitest/config';
 import react from '@vitejs/plugin-react';
 import eslintPlugin from 'vite-plugin-eslint';
 import StylelintPlugin from 'vite-plugin-stylelint';
 import { VitePWA } from 'vite-plugin-pwa';
 import { createHtmlPlugin } from 'vite-plugin-html';
 import { Target, viteStaticCopy } from 'vite-plugin-static-copy';
 
-export default ({ mode, command }: { mode: string; command: string }) => {
+export default ({ mode, command }: ConfigEnv): UserConfigExport => {
   // Shorten default mode names to dev / prod
   // Also differentiates from build type (production / development)
   mode = mode === 'development' ? 'dev' : mode;
@@ -90,6 +90,10 @@ export default ({ mode, command }: { mode: string; command: string }) => {
               return 'react';
             }
 
+            if (id.includes('/node_modules/@inplayer')) {
+              return 'inplayer';
+            }
+
             if (id.includes('/node_modules/')) {
               return 'vendor';
             }