feat: ThemeProvider updates System themes relative to systemThemeVersion state

feat: core.css and fancy.css changes during dev are applied without a window reload

refactor: Improve ThemeProvider readability

refactor: Replace fs.watch with chokidar in FolderWatcher for more consistent behaviour across different operating systems

fix: Wait for new theme css to load before unloading old to prevent flickering

fix: Prevent file reads flagging FolderWatcher change events

Author: colin969

gulpfile.mjs

@@ -228,35 +228,39 @@ async function killProcess(proc) {
   });
 }
 
-async function watchBackend() {
-  await copyNativeModule();
-  const config = await loadConfig({ path: 'rsbuild-back.config.ts'});
-  const rsbuild = await createRsbuild({
-    rsbuildConfig: {
-      ...config.content,
-    },
-  });
-  let backProc = null;
-  rsbuild.onAfterBuild(async () => {
-    // Restart backend after it's been built
-    console.log('Restarting Backend...');
-    if (backProc) {
-      console.log('Killing existing backend process...');
-      await killProcess(backProc);
-      backProc = null;
+function watchBackend(withServer) {
+  return async () => {
+    await copyNativeModule();
+    const config = await loadConfig({ path: 'rsbuild-back.config.ts'});
+    const rsbuild = await createRsbuild({
+      rsbuildConfig: {
+        ...config.content,
+      },
+    });
+    let backProc = null;
+    if (withServer) {
+      rsbuild.onAfterBuild(async () => {
+        // Restart backend after it's been built
+        console.log('Restarting Backend...');
+        if (backProc) {
+          console.log('Killing existing backend process...');
+          await killProcess(backProc);
+          backProc = null;
+        }
+
+        backProc = spawn('node', [
+          '--inspect=9229',  // Enable debugging
+          'build/back/backend.js'
+        ], {
+          stdio: 'inherit',
+          env: { ...process.env, NODE_ENV: 'development' }
+        });
+      });
     }
-
-    backProc = spawn('node', [
-      '--inspect=9229',  // Enable debugging
-      'build/back/backend.js'
-    ], {
-      stdio: 'inherit',
-      env: { ...process.env, NODE_ENV: 'development' }
+    await rsbuild.build({
+      watch: true,
     });
-  });
-  await rsbuild.build({
-    watch: true,
-  });
+  }
 }
 
 async function watchRenderer() {
@@ -497,7 +501,7 @@ export const watch = series(
   installCrossDeps,
   buildStatic,
   parallel(
-    watchBackend,
+    watchBackend(false),
     watchElectron,
     watchElectronPreload,
     watchRenderer,
@@ -512,7 +516,7 @@ export const watchStatic = series(
   buildStatic,
   buildExtensions,
   parallel(
-    watchBackend,
+    watchBackend(true),
     watchStaticTask,
   )
 );

package-lock.json

@@ -73,6 +73,7 @@
     "@types/ws": "8.18.1",
     "axios": "1.13.2",
     "babel-plugin-react-compiler": "1.0.0",
+    "chokidar": "^4.0.3",
     "cross-env": "7.0.2",
     "dns-packet": "^5.6.1",
     "electron": "22.3.27",

package.json

@@ -1,12 +1,12 @@
 import { BackOut } from '@shared/back/types';
 import { parseThemeMetaData, Theme, themeEntryFilename } from '@shared/ThemeFile';
+import { ThemeMeta } from 'flashpoint-launcher';
 import * as fs from 'fs-extra';
 import * as path from 'node:path';
 import { Registry } from './extensions/types';
 import { SocketServer } from './SocketServer';
-import { ThemeState } from './types';
+import { BackState, ThemeState } from './types';
 import { FolderWatcher } from './util/FolderWatcher';
-import { ThemeMeta } from 'flashpoint-launcher';
 
 /**
  * Starts a watcher for a newly registered theme
@@ -57,6 +57,7 @@ export async function newThemeWatcher(id: string, basePath: string, themePath: s
     watcher.on('change', (filename: string, offsetPath: string) => {
       themeState.queue.push(() => {
         const relativePath = path.join(offsetPath, filename);
+        console.log(`CHANGE (File Path: "${filename}", Theme: "${theme.themePath}")`);
         if (!theme.files.includes(relativePath)) {
           log.warn('Launcher', 'A file has been changed in a theme but the file is not registered '+
           `(File Path: "${filename}", Theme: "${theme.themePath}")`);
@@ -113,3 +114,45 @@ export async function newThemeWatcher(id: string, basePath: string, themePath: s
   registry.themes.set(theme.id, theme);
   watcher.watch(themePath, { recursionDepth: -1 });
 }
+
+/**
+ * Starts a watcher for system theme files (core.css and fancy.css) during development
+ * Watches the build/window/styles/ folder and broadcasts changes to connected clients
+ *
+ * @param stylesPath Path to the styles folder (build/window/styles/)
+ * @param socketServer Socket Server to broadcast changes on
+ */
+export async function newSystemThemeWatcher(stylesPath: string, state: BackState): Promise<void> {
+  // Check styles path exists
+  await fs.promises.stat(stylesPath)
+  .catch((error) => {
+    let errStr = '';
+    if (error.code === 'ENOENT') {
+      errStr += `Failed to watch styles folder. Path does not exist (Path: "${stylesPath}")\n`;
+    }
+    errStr += (typeof error.toString === 'function') ? error.toString() : (error + '');
+    throw new Error(errStr);
+  });
+
+  // Set up watcher (no recursion needed for flat styles folder)
+  const watcher = new FolderWatcher();
+
+  watcher.on('ready', () => {
+    // Watch for changes to CSS files
+    watcher.on('change', (filename: string) => {
+      if (filename.endsWith('.css')) {
+        state.socketServer.broadcast(BackOut.SYSTEM_THEME_CHANGE);
+      }
+    });
+
+    watcher.on('add', (filename: string) => {
+      if (filename.endsWith('.css')) {
+        state.socketServer.broadcast(BackOut.SYSTEM_THEME_CHANGE);
+      }
+    });
+  });
+
+  watcher.on('error', (err) => log.error('Launcher', `System theme watcher error: ${err.message}`));
+
+  watcher.watch(stylesPath, { recursionDepth: 0, changeDebounce: 100 });
+}

src/back/Themes.ts

@@ -7,7 +7,6 @@ import { PreferencesFile } from '@shared/preferences/PreferencesFile';
 import { defaultPreferencesData } from '@shared/preferences/util';
 import { Theme } from '@shared/ThemeFile';
 import {
-  UnrecoverableError,
   createErrorProxy, deepCopy,
   removeFileExtension,
   stringifyArray
@@ -36,6 +35,7 @@ import {
 } from '@shared/constants';
 import { formatString } from '@shared/utils/StringFormatter';
 import { ComponentStatus, IBackProcessInfo, ILogoSet, LangFileContent, RecursivePartial } from 'flashpoint-launcher';
+import { UnrecoverableError } from 'flashpoint-launcher-renderer';
 import { parseArgs } from 'node:util';
 import { Tail } from 'tail';
 import { ConfigFile } from './ConfigFile';
@@ -68,7 +68,7 @@ import { PlaylistFile } from './PlaylistFile';
 import { registerRequestCallbacks } from './responses';
 import { ServicesFile } from './ServicesFile';
 import { SocketServer } from './SocketServer';
-import { newThemeWatcher } from './Themes';
+import { newSystemThemeWatcher, newThemeWatcher } from './Themes';
 import { BackState, ImageDownloadItem } from './types';
 import { awaitDialog } from './util/dialog';
 import { EventQueue } from './util/EventQueue';
@@ -708,6 +708,15 @@ async function prepForInit(initConfig: BackInitArgs): Promise<void> {
     }
   }
 
+  // Setup system theme listener for dev
+  if (state.isDev) {
+    try {
+      newSystemThemeWatcher('./build/window/styles', state);
+    } catch (error) {
+      log.error('Laucher', 'Failed to start System theme watcher despite being in dev mode');
+    }
+  }
+
   console.log('Back - Initialized Themes');
 
   const sysEnvMiddleware = new SystemEnvMiddleware();