refactor(plugin): refactor plugin loader and add dynamic loading

src/index.ts

@@ -29,7 +29,8 @@ import { pluginBuilders } from 'virtual:PluginBuilders';
 
 import youtubeMusicCSS from './youtube-music.css?inline';
 
-import type { MainPlugin, PluginBaseConfig, MainPluginContext, MainPluginFactory } from './plugins/utils/builder';
+import { getLoadedAllPlugins, loadAllPlugins, registerMainPlugin } from './loader/main';
+import { MainPluginFactory, PluginBaseConfig, PluginBuilder } from './plugins/utils/builder';
 
 // Catch errors and log them
 unhandled({
@@ -87,17 +88,6 @@ function onClosed() {
   mainWindow = null;
 }
 
-export const mainPluginNames = Object.keys(mainPlugins);
-
-if (is.windows()) {
-  delete mainPlugins['touchbar'];
-} else if (is.macOS()) {
-  delete mainPlugins['taskbar-mediacontrol'];
-} else {
-  delete mainPlugins['touchbar'];
-  delete mainPlugins['taskbar-mediacontrol'];
-}
-
 ipcMain.handle('get-main-plugin-names', () => Object.keys(mainPlugins));
 
 const initHook = (win: BrowserWindow) => {
@@ -114,14 +104,16 @@ const initHook = (win: BrowserWindow) => {
       if (!isEqual) {
         const config = deepmerge(pluginBuilders[id as keyof PluginBuilderList].config, newPluginConfig);
 
+        const mainPlugin = getLoadedAllPlugins()[id];
+        if (mainPlugin) mainPlugin.onConfigChange?.(config as PluginBaseConfig);
+
         win.webContents.send('config-changed', id, config);
       }
     });
   });
 };
 
-const loadedPluginList: [string, MainPlugin<PluginBaseConfig>][] = [];
+function initTheme(win: BrowserWindow) {
-async function loadPlugins(win: BrowserWindow) {
   injectCSS(win.webContents, youtubeMusicCSS);
   // Load user CSS
   const themes: string[] = config.get('options.themes');
@@ -145,68 +137,6 @@ async function loadPlugins(win: BrowserWindow) {
       win.webContents.openDevTools();
     }
   });
-
-
-  const createContext = <
-    Key extends keyof PluginBuilderList,
-    Config extends PluginBaseConfig = PluginBuilderList[Key]['config'],
-  >(name: Key): MainPluginContext<Config> => ({
-    getConfig: () => deepmerge(pluginBuilders[name].config, config.get(`plugins.${name}`) ?? {}) as unknown as Config,
-    setConfig: (newConfig) => {
-      config.setPartial(`plugins.${name}`, newConfig);
-    },
-
-    send: (event: string, ...args: unknown[]) => {
-      win.webContents.send(event, ...args);
-    },
-    handle: (event: string, listener) => {
-      ipcMain.handle(event, async (_, ...args) => listener(...args as never));
-    },
-    on: (event: string, listener) => {
-      ipcMain.on(event, async (_, ...args) => listener(...args as never));
-    },
-  });
-
-  const pluginConfigs = config.plugins.getPlugins();
-  for (const [pluginId, builder] of Object.entries(pluginBuilders)) {
-    const typedBuilder = builder as PluginBuilderList[keyof PluginBuilderList];
-
-    const config = deepmerge(typedBuilder.config, pluginConfigs[pluginId as keyof PluginBuilderList] ?? {});
-
-    if (config.enabled) {
-      typedBuilder.styles?.forEach((style) => {
-        injectCSS(win.webContents, style, () => {
-          console.log('[YTMusic]', `Injected CSS for "${pluginId}" plugin`);
-        });
-      });
-
-      console.log('[YTMusic]', `"${pluginId}" plugin data is loaded`);
-    }
-  }
-
-  for (const [pluginId, factory] of Object.entries(mainPlugins)) {
-    if (Object.hasOwn(pluginBuilders, pluginId)) {
-      try {
-        const builder = pluginBuilders[pluginId as keyof PluginBuilderList];
-        const config = deepmerge(builder.config, pluginConfigs[pluginId as keyof PluginBuilderList] ?? {});
-
-        if (config.enabled) {
-          try {
-            const context = createContext(pluginId as keyof PluginBuilderList);
-            const plugin = await (factory as MainPluginFactory<PluginBaseConfig>)(context);
-            loadedPluginList.push([pluginId, plugin]);
-            plugin.onLoad?.(win);
-            console.log('[YTMusic]', `"${pluginId}" plugin is loaded`);
-          } catch (error) {
-            console.error('[YTMusic]', `Cannot load plugin "${pluginId}"`);
-            console.trace(error);
-          }
-        }
-      } catch(err) {
-        console.log('[YTMusic]', `Cannot initialize "${pluginId}" plugin: ${String(err)}`);
-      }
-    }
-  }
 }
 
 async function createMainWindow() {
@@ -248,7 +178,15 @@ async function createMainWindow() {
     autoHideMenuBar: config.get('options.hideMenu'),
   });
   initHook(win);
-  await loadPlugins(win);
+  initTheme(win);
+
+  Object.entries(pluginBuilders).forEach(([id, builder]) => {
+    const typedBuilder = builder as PluginBuilder<string, PluginBaseConfig>;
+    const plugin = mainPlugins[id] as MainPluginFactory<PluginBaseConfig> | undefined;
+
+    registerMainPlugin(id, typedBuilder, plugin);
+  });
+  await loadAllPlugins(win);
 
   if (windowPosition) {
     const { x: windowX, y: windowY } = windowPosition;

src/loader/main.ts

@@ -0,0 +1,128 @@
+import { BrowserWindow, ipcMain } from 'electron';
+
+import { deepmerge } from 'deepmerge-ts';
+
+import config from '../config';
+import { injectCSS } from '../plugins/utils/main';
+import {
+  MainPlugin,
+  MainPluginContext,
+  MainPluginFactory,
+  PluginBaseConfig,
+  PluginBuilder
+} from '../plugins/utils/builder';
+
+const allPluginFactoryList: Record<string, MainPluginFactory<PluginBaseConfig>> = {};
+const allPluginBuilders: Record<string, PluginBuilder<string, PluginBaseConfig>> = {};
+const unregisterStyleMap: Record<string, (() => void)[]> = {};
+const loadedPluginMap: Record<string, MainPlugin<PluginBaseConfig>> = {};
+
+const createContext = <
+  Key extends keyof PluginBuilderList,
+  Config extends PluginBaseConfig = PluginBuilderList[Key]['config'],
+>(id: Key, win: BrowserWindow): MainPluginContext<Config> => ({
+  getConfig: () => deepmerge(allPluginBuilders[id].config, config.get(`plugins.${id}`) ?? {}) as Config,
+  setConfig: (newConfig) => {
+    config.setPartial(`plugins.${id}`, newConfig);
+  },
+
+  send: (event: string, ...args: unknown[]) => {
+    win.webContents.send(event, ...args);
+  },
+  handle: (event: string, listener) => {
+    ipcMain.handle(event, async (_, ...args) => listener(...args as never));
+  },
+  on: (event: string, listener) => {
+    ipcMain.on(event, async (_, ...args) => listener(...args as never));
+  },
+});
+
+const forceUnloadPlugin = (id: keyof PluginBuilderList, win: BrowserWindow) => {
+  unregisterStyleMap[id]?.forEach((unregister) => unregister());
+  delete unregisterStyleMap[id];
+
+  loadedPluginMap[id]?.onUnload?.(win);
+  delete loadedPluginMap[id];
+
+  console.log('[YTMusic]', `"${id}" plugin is unloaded`);
+};
+
+export const forceLoadPlugin = async (id: keyof PluginBuilderList, win: BrowserWindow) => {
+  const builder = allPluginBuilders[id];
+
+  Promise.allSettled(
+    builder.styles?.map(async (style) => {
+      const unregister = await injectCSS(win.webContents, style);
+      console.log('[YTMusic]', `Injected CSS for "${id}" plugin`);
+
+      return unregister;
+    }) ?? [],
+  ).then((result) => {
+    unregisterStyleMap[id] = result
+      .map((it) => it.status === 'fulfilled' && it.value)
+      .filter(Boolean);
+
+    let isInjectSuccess = true;
+    result.forEach((it) => {
+      if (it.status === 'rejected') {
+        isInjectSuccess = false;
+
+        console.log('[YTMusic]', `Cannot inject "${id}" plugin style: ${String(it.reason)}`);
+      }
+    });
+    if (isInjectSuccess) console.log('[YTMusic]', `"${id}" plugin data is loaded`);
+  });
+
+  try {
+    const factory = allPluginFactoryList[id];
+    if (!factory) return;
+
+    const context = createContext(id, win);
+    const plugin = await factory(context);
+    loadedPluginMap[id] = plugin;
+    plugin.onLoad?.(win);
+
+    console.log('[YTMusic]', `"${id}" plugin is loaded`);
+  } catch (err) {
+    console.log('[YTMusic]', `Cannot initialize "${id}" plugin: ${String(err)}`);
+  }
+};
+
+export const loadAllPlugins = async (win: BrowserWindow) => {
+  const pluginConfigs = config.plugins.getPlugins();
+
+  for (const [pluginId, builder] of Object.entries(allPluginBuilders)) {
+    const typedBuilder = builder as PluginBuilderList[keyof PluginBuilderList];
+
+    const config = deepmerge(typedBuilder.config, pluginConfigs[pluginId as keyof PluginBuilderList] ?? {});
+
+    if (config.enabled) {
+      await forceLoadPlugin(pluginId as keyof PluginBuilderList, win);
+    } else {
+      if (loadedPluginMap[pluginId as keyof PluginBuilderList]) {
+        forceUnloadPlugin(pluginId as keyof PluginBuilderList, win);
+      }
+    }
+  }
+};
+
+export const unloadAllPlugins = (win: BrowserWindow) => {
+  for (const id of Object.keys(loadedPluginMap)) {
+    forceUnloadPlugin(id as keyof PluginBuilderList, win);
+  }
+};
+
+export const getLoadedPlugin = <Key extends keyof PluginBuilderList>(id: Key): MainPlugin<PluginBuilderList[Key]['config']> | undefined => {
+  return loadedPluginMap[id];
+};
+export const getLoadedAllPlugins = () => {
+  return loadedPluginMap;
+};
+export const registerMainPlugin = (
+  id: string,
+  builder: PluginBuilder<string, PluginBaseConfig>,
+  factory?: MainPluginFactory<PluginBaseConfig>,
+) => {
+  if (factory) allPluginFactoryList[id] = factory;
+  allPluginBuilders[id] = builder;
+};

src/plugins/utils/main/css.ts

@@ -1,33 +1,42 @@
 import fs from 'node:fs';
 
-const cssToInject = new Map<string, (() => void) | undefined>();
+type Unregister = () => void;
-const cssToInjectFile = new Map<string, (() => void) | undefined>();
-export const injectCSS = (webContents: Electron.WebContents, css: string, cb: (() => void) | undefined = undefined) => {
-  if (cssToInject.size === 0 && cssToInjectFile.size === 0) {
-    setupCssInjection(webContents);
-  }
 
-  cssToInject.set(css, cb);
+const cssToInject = new Map<string, ((unregister: Unregister) => void) | undefined>();
+const cssToInjectFile = new Map<string, ((unregister: Unregister) => void) | undefined>();
+export const injectCSS = (webContents: Electron.WebContents, css: string): Promise<Unregister> => {
+  return new Promise((resolve) => {
+    if (cssToInject.size === 0 && cssToInjectFile.size === 0) {
+      setupCssInjection(webContents);
+    }
+    cssToInject.set(css, resolve);
+  });
 };
 
-export const injectCSSAsFile = (webContents: Electron.WebContents, filepath: string, cb: (() => void) | undefined = undefined) => {
+export const injectCSSAsFile = (webContents: Electron.WebContents, filepath: string): Promise<Unregister> => {
-  if (cssToInject.size === 0 && cssToInjectFile.size === 0) {
+  return new Promise((resolve) => {
-    setupCssInjection(webContents);
+    if (cssToInject.size === 0 && cssToInjectFile.size === 0) {
-  }
+      setupCssInjection(webContents);
+    }
 
-  cssToInjectFile.set(filepath, cb);
+    cssToInjectFile.set(filepath, resolve);
+  });
 };
 
 const setupCssInjection = (webContents: Electron.WebContents) => {
   webContents.on('did-finish-load', () => {
     cssToInject.forEach(async (callback, css) => {
-      await webContents.insertCSS(css);
+      const key = await webContents.insertCSS(css);
-      callback?.();
+      const remove = async () => await webContents.removeInsertedCSS(key);
+
+      callback?.(remove);
     });
 
     cssToInjectFile.forEach(async (callback, filepath) => {
-      await webContents.insertCSS(fs.readFileSync(filepath, 'utf-8'));
+      const key = await webContents.insertCSS(fs.readFileSync(filepath, 'utf-8'));
-      callback?.();
+      const remove = async () => await webContents.removeInsertedCSS(key);
+
+      callback?.(remove);
     });
   });
 };