fix: onerror handler for css files to still unload old themes

refactor: Replace theme numbers with theme uuids for better cache avoidance

Author: colin969

package-lock.json

@@ -69,7 +69,6 @@
     "@types/react-router-dom": "5.1.7",
     "@types/react-virtualized": "9.22.2",
     "@types/tail": "2.0.0",
-    "@types/uuid": "3.4.5",
     "@types/uuid-validate": "0.0.1",
     "@types/which": "1.3.2",
     "@types/ws": "8.18.1",
@@ -128,7 +127,7 @@
     "typesafe-actions": "4.4.2",
     "typescript": "^5.5.3",
     "typescript-eslint": "8.31.0",
-    "uuid": "3.3.2",
+    "uuid": "^13.0.0",
     "uuid-validate": "0.0.3",
     "vitest": "3.2.4",
     "which": "1.3.1",

package.json

@@ -21,6 +21,7 @@ import {
   runService,
   setStatus
 } from '@back/util/misc';
+import { uuid } from '@back/util/uuid';
 import { ExtSearchable } from '@fparchive/flashpoint-archive';
 import { BrowsePageLayout, ScreenshotPreviewMode } from '@shared/BrowsePageLayout';
 import { LogLevel } from '@shared/Log/interface';
@@ -39,7 +40,6 @@ import * as fsExtra from 'fs-extra';
 import * as fs from 'node:fs';
 import * as path from 'node:path';
 import * as stream from 'stream';
-import uuid from 'uuid';
 import { fpDatabase, loadCurationArchive } from '..';
 import { addPlaylistGame, deletePlaylist, deletePlaylistGame, filterPlaylists, findPlaylist, findPlaylistByName, getPlaylistGame, savePlaylistGame, updatePlaylist } from '../playlist';
 import { newExtLog } from './ExtensionUtils';

src/back/extensions/ApiImplementation.ts

@@ -1,19 +1,5 @@
-import { randomBytes } from 'crypto';
-import * as guid from 'uuid/v4';
+import { v4 as uuidv4 } from 'uuid';
 
-/**
- * Wrapper function over uuid's v4 method that attempts to source
- * entropy using the window Crypto instance rather than through
- * Node.JS.
- */
 export function uuid() {
-  return guid({ random: bufferToNumbers(randomBytes(16)) });
-}
-
-function bufferToNumbers(buffer: Buffer): number[] {
-  const array: number[] = [];
-  for (let i = 0; i < buffer.length; i++) {
-    array[i] = buffer[i];
-  }
-  return array;
+  return uuidv4();
 }

src/back/util/uuid.ts

@@ -1,11 +1,11 @@
 import { initialMainState, updateSystemThemeCss, updateThemeCss } from '@renderer/store/main/slice';
 import { initialPreferencesState, updatePreferences } from '@renderer/store/preferences/slice';
 import { getFileServerURL } from '@shared/Util';
+import { uuid } from '@shared/utils/uuid';
 import { renderWithProviders } from '@test/redux';
 import { useTestServer } from '@test/useTestServer';
 import { ITheme } from 'flashpoint-launcher';
 import { act } from 'react';
-import uuid from 'uuid';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { ThemeProvider } from './ThemeProvider';
 
@@ -69,8 +69,9 @@ describe('ThemeProvider', () => {
       }
     });
 
+    let themeKey = store.getState().main.themeVersion;
     // Check theme element was created
-    const expectedUrl = `${getFileServerURL()}/Themes/${themeList[0].id}/${themeList[0].entryPath}?v=0`;
+    const expectedUrl = `${getFileServerURL()}/Themes/${themeList[0].id}/${themeList[0].entryPath}?v=${themeKey}`;
     const themeElement = container.ownerDocument.querySelector(`[data-theme="true"][href="${expectedUrl}"]`) as HTMLLinkElement;
     expect(themeElement).toBeInTheDocument();
     expect(themeElement.tagName).toBe('LINK');
@@ -85,7 +86,8 @@ describe('ThemeProvider', () => {
       }));
     });
 
-    const newExpectedUrl = `${getFileServerURL()}/Themes/${themeList[1].id}/${themeList[1].entryPath}?v=0`;
+    themeKey = store.getState().main.themeVersion;
+    const newExpectedUrl = `${getFileServerURL()}/Themes/${themeList[1].id}/${themeList[1].entryPath}?v=${themeKey}`;
     const updatedElement = container.ownerDocument.querySelector(`[data-theme="true"][href="${newExpectedUrl}"]`) as HTMLLinkElement;
     expect(updatedElement.getAttribute('href')).toBe(newExpectedUrl);
 
@@ -94,7 +96,8 @@ describe('ThemeProvider', () => {
       store.dispatch(updateThemeCss());
     });
 
-    const newExpectedVerUrl = `${getFileServerURL()}/Themes/${themeList[1].id}/${themeList[1].entryPath}?v=1`;
+    themeKey = store.getState().main.themeVersion;
+    const newExpectedVerUrl = `${getFileServerURL()}/Themes/${themeList[1].id}/${themeList[1].entryPath}?v=${themeKey}`;
     const updatedVerElement = container.ownerDocument.querySelector(`[data-theme="true"][href="${newExpectedVerUrl}"]`) as HTMLLinkElement;
     expect(updatedVerElement.getAttribute('href')).toBe(newExpectedVerUrl);
 
@@ -103,8 +106,9 @@ describe('ThemeProvider', () => {
       store.dispatch(updateSystemThemeCss());
     });
 
-    const coreHrefNew = `${coreHref}?v=1`;
-    const fancyHrefNew = `${fancyHref}?v=1`;
+    const systemThemeKey = store.getState().main.systemThemeVersion;
+    const coreHrefNew = `${coreHref}?v=${systemThemeKey}`;
+    const fancyHrefNew = `${fancyHref}?v=${systemThemeKey}`;
     const coreVerElement = container.ownerDocument.querySelector(`[data-corecss="true"][href="${coreHrefNew}"]`) as HTMLLinkElement;
     const fancyVerElement = container.ownerDocument.querySelector(`[data-fancycss="true"][href="${fancyHrefNew}"]`) as HTMLLinkElement;
     expect(coreVerElement).toBeInTheDocument();

src/renderer/components/ThemeProvider.test.tsx

@@ -3,21 +3,19 @@ import { getFileServerURL } from '@shared/Util';
 import { ITheme } from 'flashpoint-launcher';
 import { PropsWithChildren, useEffect, useRef } from 'react';
 
-const globalThemeAttribute = 'data-theme';
-
 type ThemeProviderProps = PropsWithChildren;
 
 export function ThemeProvider({ children }: ThemeProviderProps) {
   const systemThemeVersion = useAppSelector(state => state.main.systemThemeVersion);
-  const themeVersion = useAppSelector(state => state.main.themeVersion) + systemThemeVersion;
+  const themeVersion = useAppSelector(state => state.main.themeVersion) + (systemThemeVersion || '');
   const availableThemes = useAppSelector(state => state.main.themeList);
   const currentTheme = useAppSelector(state => state.preferences.currentTheme);
   const coreHref = useRef(document.querySelector('[data-corecss="true"]')?.getAttribute('href') || undefined);
   const fancyHref = useRef(document.querySelector('[data-fancycss="true"]')?.getAttribute('href') || undefined);
 
   // Update system theme when needed
   useEffect(() => {
-    if (systemThemeVersion > 0) {
+    if (systemThemeVersion) {
       // Don't need to update unless theme has incremented, first links are in raw HTML
       updateSystemThemeDom(systemThemeVersion, coreHref.current, fancyHref.current);
     }
@@ -33,7 +31,7 @@ export function ThemeProvider({ children }: ThemeProviderProps) {
 }
 
 // Updates the System css links to force them to update with new version
-function updateSystemThemeDom(version: number, coreHref?: string, fancyHref?: string): void {
+function updateSystemThemeDom(version: string, coreHref?: string, fancyHref?: string): void {
   if (coreHref) {
     const existingElements = document.querySelectorAll('[data-corecss="true"]');
     const newElement = createThemeElement(`${coreHref}?v=${version}`);
@@ -69,17 +67,17 @@ function updateSystemThemeDom(version: number, coreHref?: string, fancyHref?: st
 
 
 // Updates the Theme css links to force them to update with new version, or with the newly selected them
-function updateThemeDom(version: number, theme?: ITheme): void {
+function updateThemeDom(version: string, theme?: ITheme): void {
   const url = theme ? `${getFileServerURL()}/Themes/${theme.id}/${theme.entryPath}?v=${version}` : undefined;
   replaceThemeElement(url);
 }
 
 function replaceThemeElement(url?: string) {
   // Get list of old theme elems to remove after loading new theme elem
-  const existingElements = document.head.querySelectorAll(`[${globalThemeAttribute}="true"]`);
+  const existingElements = document.head.querySelectorAll('[data-theme="true"]');
   if (url) {
     const newElement = createThemeElement(url);
-    newElement.setAttribute(globalThemeAttribute, 'true');
+    newElement.setAttribute('data-theme', 'true');
     newElement.onload = () => {
       existingElements.forEach((elem) => {
         try {
@@ -89,6 +87,16 @@ function replaceThemeElement(url?: string) {
         }
       });
     };
+    newElement.onerror = () => {
+      console.error('Failed to load theme:', url);
+      existingElements.forEach((elem) => {
+        try {
+          elem.remove();
+        } catch {
+          // Ignore, may have been removed earlier
+        }
+      });
+    };
     if (document.head) { document.head.appendChild(newElement); }
   } else {
     existingElements.forEach((elem) => {

src/renderer/components/ThemeProvider.tsx

@@ -2,6 +2,7 @@ import { createAsyncThunk, createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { BackIn, BackInit } from '@shared/back/types';
 import { createLangContainer } from '@shared/lang';
 import { deepCopy, recursiveReplace } from '@shared/Util';
+import { uuid } from '@shared/utils/uuid';
 import { CreditsData, DialogFieldProps, DialogState, Game, GameMetadataSource, IExtensionDescription, IService, Playlist } from 'flashpoint-launcher';
 import { CustomRoute, DisplaySettings, DisplaySettingsGameSidebarAction, DynamicPageProps, ExtConfigValueAction, ExtOrderable, MainState, UnrecoverableError } from 'flashpoint-launcher-renderer';
 
@@ -123,8 +124,8 @@ export function initialMainState(): MainState {
     },
     loadedAll: false,
     themeList: [],
-    themeVersion: 0,
-    systemThemeVersion: 0,
+    themeVersion: uuid(),
+    systemThemeVersion: null,
     logoSets: [],
     logoVersion: 0,
     gamesTotal: -1,
@@ -411,10 +412,10 @@ const mainSlice = createSlice({
       state.unrecoverableError = payload;
     },
     updateThemeCss(state: MainState) {
-      state.themeVersion += 1;
+      state.themeVersion = uuid();
     },
     updateSystemThemeCss(state: MainState) {
-      state.systemThemeVersion += 1;
+      state.systemThemeVersion = uuid();
     },
     setExtConfigValue(state: MainState, { payload }: PayloadAction<ExtConfigValueAction>) {
       state.extConfig[payload.key] = payload.value;

src/renderer/store/main/slice.ts

@@ -1,38 +1,7 @@
-// Work around synchronously seeding of random buffer in the v1
-// version of uuid by explicitly only requiring v4. As far as I'm
-// aware we cannot use an import statement here without causing webpack
-// to load the v1 version as well.
-//
-// See
-//  https://github.com/kelektiv/node-uuid/issues/189
-import * as guid from 'uuid/v4';
+import { v4 as uuidv4 } from 'uuid';
 
-/**
- * Fills a buffer with the required number of random bytes.
- *
- * Attempt to use the Chromium-provided crypto library rather than
- * Node.JS. For some reason the Node.JS randomBytes function adds
- * _considerable_ (1s+) synchronous load time to the start up.
- *
- * See
- *  https://developer.mozilla.org/en-US/docs/Web/API/Window/crypto
- *  https://github.com/kelektiv/node-uuid/issues/189
- *
- *  @param count Number of bytes to return
- */
-function getRandomBytes(count: number): Buffer {
-  const rndBuf = new Uint8Array(count);
-  crypto.getRandomValues(rndBuf);
-  return Buffer.from(rndBuf.buffer);
-}
-
-/**
- * Wrapper function over uuid's v4 method that attempts to source
- * entropy using the window Crypto instance rather than through
- * Node.JS.
- */
 export function uuid() {
-  return (guid as any as (options?: { random?: Buffer }) => string)({ random: getRandomBytes(16) });
+  return uuidv4();
 }
 
 /**

src/shared/utils/uuid.ts

@@ -1,5 +1,5 @@
+import { uuid } from '@shared/utils/uuid';
 import { CurationState } from 'flashpoint-launcher';
-import uuid from 'uuid';
 
 export function mockCuration(): CurationState {
   const id = uuid();

src/test/mocks/curate.ts

@@ -3268,8 +3268,8 @@ declare module 'flashpoint-launcher-renderer' {
     loadedAll: boolean;
     extensions: IExtensionDescription[];
     themeList: ITheme[];
-    systemThemeVersion: number;
-    themeVersion: number;
+    systemThemeVersion: string | null;
+    themeVersion: string;
     logoSets: ILogoSet[];
     logoVersion: number; // Increase to force cache clear
     gamesTotal: number;