wip: trying to fix electron-store issue

Co-authored-by: JellyBrick <shlee1503@naver.com>

src/config/index.ts

@@ -1,6 +1,5 @@
 import Store from 'electron-store';
-
-import { deepmerge as createDeepmerge } from '@fastify/deepmerge';
+import { deepmerge } from 'deepmerge-ts';
 
 import defaultConfig from './defaults';
 import plugins from './plugins';
@@ -8,14 +7,13 @@ import store from './store';
 
 import { restart } from '../providers/app-controls';
 
-const deepmerge = createDeepmerge();
-
 const set = (key: string, value: unknown) => {
   store.set(key, value);
 };
 const setPartial = (key: string, value: object) => {
-  deepmerge(store.get(key) ?? {}, value);
-  store.set(value);
+  const newValue = deepmerge(store.get(key) ?? {}, value);
+  console.log('sival', key, value, newValue);
+  store.set(newValue);
 };
 
 function setMenuOption(key: string, value: unknown) {
@@ -53,9 +51,8 @@ export default {
   setPartial,
   setMenuOption,
   edit: () => store.openInEditor(),
-  watch(cb: Parameters<Store['onDidChange']>[1]) {
-    store.onDidChange('options', cb);
-    store.onDidChange('plugins', cb);
+  watch(cb: Parameters<Store['onDidAnyChange']>[0]) {
+    store.onDidAnyChange(cb);
   },
   plugins,
 };

src/index.ts

@@ -9,8 +9,8 @@ import unhandled from 'electron-unhandled';
 import { autoUpdater } from 'electron-updater';
 import electronDebug from 'electron-debug';
 import { parse } from 'node-html-parser';
-
-import { deepmerge as createDeepmerge } from '@fastify/deepmerge';
+import { deepmerge } from 'deepmerge-ts';
+import { deepEqual } from 'fast-equals';
 
 import config from './config';
 
@@ -31,8 +31,6 @@ import youtubeMusicCSS from './youtube-music.css?inline';
 
 import type { MainPlugin, PluginBaseConfig, MainPluginContext, MainPluginFactory } from './plugins/utils/builder';
 
-const deepmerge = createDeepmerge();
-
 // Catch errors and log them
 unhandled({
   logger: console.error,
@@ -106,14 +104,19 @@ const initHook = (win: BrowserWindow) => {
   ipcMain.handle('get-config', (_, id: keyof PluginBuilderList) => deepmerge(pluginBuilders[id].config, config.get(`plugins.${id}`) ?? {}) as PluginBuilderList[typeof id]['config']);
   ipcMain.handle('set-config', (_, name: string, obj: object) => config.setPartial(`plugins.${name}`, obj));
 
-  config.watch((newValue) => {
-    const value = newValue as Record<string, unknown>;
-    const id = Object.keys(pluginBuilders).find((id) => id in value);
+  config.watch((newValue, oldValue) => {
+    const newPluginConfigList = (newValue?.plugins ?? {}) as Record<string, unknown>;
+    const oldPluginConfigList = (oldValue?.plugins ?? {}) as Record<string, unknown>;
 
-    if (id) {
-      win.webContents.send('config-changed', id, value[id]);
-      // console.log('config-changed', id, value[id]);
-    }
+    Object.entries(newPluginConfigList).forEach(([id, newPluginConfig]) => {
+      const isEqual = deepEqual(oldPluginConfigList[id], newPluginConfig);
+
+      console.log('check', id, isEqual, ';', oldPluginConfigList[id], newPluginConfig);
+      if (!isEqual) {
+        win.webContents.send('config-changed', id, newPluginConfig);
+        console.log('config-changed', id, newPluginConfig);
+      }
+    });
   });
 };
 
@@ -148,7 +151,7 @@ async function loadPlugins(win: BrowserWindow) {
     Key extends keyof PluginBuilderList,
     Config extends PluginBaseConfig = PluginBuilderList[Key]['config'],
   >(name: Key): MainPluginContext<Config> => ({
-    getConfig: () => deepmerge(pluginBuilders[name].config, config.get(`plugins.${name}`) ?? {}) as Config,
+    getConfig: () => deepmerge(pluginBuilders[name].config, config.get(`plugins.${name}`) ?? {}) as unknown as Config,
     setConfig: (newConfig) => {
       config.setPartial(`plugins.${name}`, newConfig);
     },

src/menu.ts

@@ -1,8 +1,7 @@
 import is from 'electron-is';
 import { app, BrowserWindow, clipboard, dialog, Menu } from 'electron';
 import prompt from 'custom-electron-prompt';
-
-import { deepmerge as createDeepmerge } from '@fastify/deepmerge';
+import { deepmerge } from 'deepmerge-ts';
 
 import { restart } from './providers/app-controls';
 import config from './config';
@@ -24,8 +23,6 @@ const inAppMenuActive = config.plugins.isEnabled('in-app-menu');
 
 const betaPlugins = ['crossfade', 'lumiastream'];
 
-const deepmerge = createDeepmerge();
-
 const pluginEnabledMenu = (plugin: string, label = '', hasSubmenu = false, refreshMenu: (() => void ) | undefined = undefined): Electron.MenuItemConstructorOptions => ({
   label: label || plugin,
   type: 'checkbox',
@@ -56,7 +53,7 @@ export const mainMenuTemplate = async (win: BrowserWindow): Promise<MenuTemplate
     Key extends keyof PluginBuilderList,
     Config extends PluginBaseConfig = PluginBuilderList[Key]['config'],
   >(name: Key): MenuPluginContext<Config> => ({
-    getConfig: () => deepmerge(pluginBuilders[name].config, config.get(`plugins.${name}`) ?? {}) as Config,
+    getConfig: () => deepmerge(pluginBuilders[name].config, config.get(`plugins.${name}`) ?? {}) as unknown as Config,
     setConfig: (newConfig) => {
       config.setPartial(`plugins.${name}`, newConfig);
     },

src/plugins/ambient-mode/renderer.ts

@@ -84,6 +84,7 @@ export default builder.createRenderer(async ({ getConfig }) => {
           blurCanvas.style.setProperty('--top', `${-1 * topOffset}px`);
           blurCanvas.style.setProperty('--blur', `${blur}px`);
           blurCanvas.style.setProperty('--opacity', `${opacity}`);
+          console.log('updated!!!');
         };
         update = applyVideoAttributes;
 

src/preload.ts

@@ -3,7 +3,7 @@ import is from 'electron-is';
 
 import { pluginBuilders } from 'virtual:PluginBuilders';
 
-import { deepmerge as createDeepmerge } from '@fastify/deepmerge';
+import { deepmerge } from 'deepmerge-ts';
 
 import config from './config';
 
@@ -11,13 +11,11 @@ import config from './config';
 import { preloadPlugins } from 'virtual:PreloadPlugins';
 import { PluginBaseConfig, PluginContext, PreloadPluginFactory } from './plugins/utils/builder';
 
-const deepmerge = createDeepmerge();
-
 const createContext = <
   Key extends keyof PluginBuilderList,
   Config extends PluginBaseConfig = PluginBuilderList[Key]['config'],
 >(name: Key): PluginContext<Config> => ({
-  getConfig: () => deepmerge(pluginBuilders[name].config, config.get(`plugins.${name}`) ?? {}) as Config,
+  getConfig: () => deepmerge(pluginBuilders[name].config, config.get(`plugins.${name}`) ?? {}) as unknown as Config,
   setConfig: (newConfig) => {
     config.setPartial(`plugins.${name}`, newConfig);
   },
@@ -28,7 +26,12 @@ const preloadedPluginList = [];
 
 const pluginConfig = config.plugins.getPlugins();
 Object.entries(preloadPlugins)
-  .filter(([id]) => deepmerge(pluginBuilders[id as keyof PluginBuilderList].config, pluginConfig[id as keyof PluginBuilderList] ?? {}).enabled)
+  .filter(([id]) => {
+    const typedId = id as keyof PluginBuilderList;
+    const config = deepmerge(pluginBuilders[typedId].config, pluginConfig[typedId] ?? {});
+
+    return config.enabled;
+  })
   .forEach(async ([id]) => {
   if (Object.hasOwn(preloadPlugins, id)) {
     const factory = (preloadPlugins as Record<string, PreloadPluginFactory<PluginBaseConfig>>)[id];

src/renderer.ts

@@ -2,18 +2,16 @@
 // eslint-disable-next-line import/order
 import { rendererPlugins } from 'virtual:RendererPlugins';
 
-import { deepmerge as createDeepmerge } from '@fastify/deepmerge';
-
 import { pluginBuilders } from 'virtual:PluginBuilders';
 
+import { deepmerge } from 'deepmerge-ts';
+
 import { PluginBaseConfig, RendererPluginContext, RendererPluginFactory } from './plugins/utils/builder';
 
 import { startingPages } from './providers/extracted-data';
 import { setupSongControls } from './providers/song-controls-front';
 import setupSongInfo from './providers/song-info-front';
 
-const deepmerge = createDeepmerge();
-
 let api: Element | null = null;
 
 function listenForApiLoad() {
@@ -125,7 +123,12 @@ const createContext = <
   const rendererPluginList = Object.entries(rendererPlugins);
   const rendererPluginResult = await Promise.allSettled(
     rendererPluginList
-      .filter(([id]) => deepmerge(pluginBuilders[id as keyof PluginBuilderList].config, pluginConfig[id as keyof PluginBuilderList] ?? {}).enabled)
+      .filter(([id]) => {
+        const typedId = id as keyof PluginBuilderList;
+        const config = deepmerge(pluginBuilders[typedId].config, pluginConfig[typedId] ?? {});
+
+        return config.enabled;
+      })
       .map(async ([id, builder]) => {
         const context = createContext(id as keyof PluginBuilderList);
         return [id, await (builder as RendererPluginFactory<PluginBaseConfig>)(context)] as const;