refactor(plugin): apply new plugin loader at all type of plugin

src/loader/menu.ts

@@ -0,0 +1,72 @@
+import { deepmerge } from 'deepmerge-ts';
+
+import { MenuPluginContext, MenuPluginFactory, PluginBaseConfig, PluginBuilder } from '../plugins/utils/builder';
+import config from '../config';
+import { setApplicationMenu } from '../menu';
+
+import type { BrowserWindow, MenuItemConstructorOptions } from 'electron';
+
+const allPluginFactoryList: Record<string, MenuPluginFactory<PluginBaseConfig>> = {};
+const allPluginBuilders: Record<string, PluginBuilder<string, PluginBaseConfig>> = {};
+const menuTemplateMap: Record<string, MenuItemConstructorOptions[]> = {};
+
+const createContext = <
+  Key extends keyof PluginBuilderList,
+  Config extends PluginBaseConfig = PluginBuilderList[Key]['config'],
+>(id: Key, win: BrowserWindow): MenuPluginContext<Config> => ({
+  getConfig: () => deepmerge(allPluginBuilders[id].config, config.get(`plugins.${id}`) ?? {}) as Config,
+  setConfig: (newConfig) => {
+    config.setPartial(`plugins.${id}`, newConfig);
+  },
+  window: win,
+  refresh: async () => {
+    await setApplicationMenu(win);
+
+    if (config.plugins.isEnabled('in-app-menu')) {
+      win.webContents.send('refresh-in-app-menu');
+    }
+  },
+});
+
+export const forceLoadMenuPlugin = async (id: keyof PluginBuilderList, win: BrowserWindow) => {
+  try {
+    const factory = allPluginFactoryList[id];
+    if (!factory) return;
+
+    const context = createContext(id, win);
+    menuTemplateMap[id] = await factory(context);
+
+    console.log('[YTMusic]', `"${id}" plugin is loaded`);
+  } catch (err) {
+    console.log('[YTMusic]', `Cannot initialize "${id}" plugin: ${String(err)}`);
+  }
+};
+
+export const loadAllMenuPlugins = 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 forceLoadMenuPlugin(pluginId as keyof PluginBuilderList, win);
+    }
+  }
+};
+
+export const getMenuTemplate = <Key extends keyof PluginBuilderList>(id: Key): MenuItemConstructorOptions[] | undefined => {
+  return menuTemplateMap[id];
+};
+export const getAllMenuTemplate = () => {
+  return menuTemplateMap;
+};
+export const registerMenuPlugin = (
+  id: string,
+  builder: PluginBuilder<string, PluginBaseConfig>,
+  factory?: MenuPluginFactory<PluginBaseConfig>,
+) => {
+  if (factory) allPluginFactoryList[id] = factory;
+  allPluginBuilders[id] = builder;
+};

src/loader/preload.ts

@@ -0,0 +1,90 @@
+import { deepmerge } from 'deepmerge-ts';
+
+import {
+  PluginBaseConfig,
+  PluginBuilder,
+  PreloadPlugin,
+  PluginContext,
+  PreloadPluginFactory
+} from '../plugins/utils/builder';
+import config from '../config';
+
+const allPluginFactoryList: Record<string, PreloadPluginFactory<PluginBaseConfig>> = {};
+const allPluginBuilders: Record<string, PluginBuilder<string, PluginBaseConfig>> = {};
+const unregisterStyleMap: Record<string, (() => void)[]> = {};
+const loadedPluginMap: Record<string, PreloadPlugin<PluginBaseConfig>> = {};
+
+const createContext = <
+  Key extends keyof PluginBuilderList,
+  Config extends PluginBaseConfig = PluginBuilderList[Key]['config'],
+>(id: Key): PluginContext<Config> => ({
+  getConfig: () => deepmerge(allPluginBuilders[id].config, config.get(`plugins.${id}`) ?? {}) as Config,
+  setConfig: (newConfig) => {
+    config.setPartial(`plugins.${id}`, newConfig);
+  },
+});
+
+const forceUnloadPreloadPlugin = (id: keyof PluginBuilderList) => {
+  unregisterStyleMap[id]?.forEach((unregister) => unregister());
+  delete unregisterStyleMap[id];
+
+  loadedPluginMap[id]?.onUnload?.();
+  delete loadedPluginMap[id];
+
+  console.log('[YTMusic]', `"${id}" plugin is unloaded`);
+};
+
+export const forceLoadPreloadPlugin = async (id: keyof PluginBuilderList) => {
+  try {
+    const factory = allPluginFactoryList[id];
+    if (!factory) return;
+
+    const context = createContext(id);
+    const plugin = await factory(context);
+    loadedPluginMap[id] = plugin;
+    plugin.onLoad?.();
+
+    console.log('[YTMusic]', `"${id}" plugin is loaded`);
+  } catch (err) {
+    console.log('[YTMusic]', `Cannot initialize "${id}" plugin: ${String(err)}`);
+  }
+};
+
+export const loadAllPreloadPlugins = async () => {
+  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 forceLoadPreloadPlugin(pluginId as keyof PluginBuilderList);
+    } else {
+      if (loadedPluginMap[pluginId as keyof PluginBuilderList]) {
+        forceUnloadPreloadPlugin(pluginId as keyof PluginBuilderList);
+      }
+    }
+  }
+};
+
+export const unloadAllPreloadPlugins = () => {
+  for (const id of Object.keys(loadedPluginMap)) {
+    forceUnloadPreloadPlugin(id as keyof PluginBuilderList);
+  }
+};
+
+export const getLoadedPreloadPlugin = <Key extends keyof PluginBuilderList>(id: Key): PreloadPlugin<PluginBuilderList[Key]['config']> | undefined => {
+  return loadedPluginMap[id];
+};
+export const getAllLoadedPreloadPlugins = () => {
+  return loadedPluginMap;
+};
+export const registerPreloadPlugin = (
+  id: string,
+  builder: PluginBuilder<string, PluginBaseConfig>,
+  factory?: PreloadPluginFactory<PluginBaseConfig>,
+) => {
+  if (factory) allPluginFactoryList[id] = factory;
+  allPluginBuilders[id] = builder;
+};

src/menu.ts

@@ -1,7 +1,6 @@
 import is from 'electron-is';
 import { app, BrowserWindow, clipboard, dialog, Menu } from 'electron';
 import prompt from 'custom-electron-prompt';
-import { deepmerge } from 'deepmerge-ts';
 
 import { restart } from './providers/app-controls';
 import config from './config';
@@ -14,15 +13,18 @@ import { pluginBuilders } from 'virtual:PluginBuilders';
 /* eslint-enable import/order */
 
 import { getAvailablePluginNames } from './plugins/utils/main';
-import { MenuPluginContext, MenuPluginFactory, PluginBaseConfig } from './plugins/utils/builder';
+import {
+  MenuPluginFactory,
+  PluginBaseConfig,
+  PluginBuilder
+} from './plugins/utils/builder';
+import { getAllMenuTemplate, loadAllMenuPlugins, registerMenuPlugin } from './loader/menu';
 
 export type MenuTemplate = Electron.MenuItemConstructorOptions[];
 
 // True only if in-app-menu was loaded on launch
 const inAppMenuActive = config.plugins.isEnabled('in-app-menu');
 
-const betaPlugins = ['crossfade', 'lumiastream'];
-
 const pluginEnabledMenu = (plugin: string, label = '', hasSubmenu = false, refreshMenu: (() => void ) | undefined = undefined): Electron.MenuItemConstructorOptions => ({
   label: label || plugin,
   type: 'checkbox',
@@ -47,49 +49,46 @@ export const refreshMenu = (win: BrowserWindow) => {
   }
 };
 
+Object.entries(pluginBuilders).forEach(([id, builder]) => {
+  const typedBuilder = builder as PluginBuilder<string, PluginBaseConfig>;
+  const plugin = menuList[id] as MenuPluginFactory<PluginBaseConfig> | undefined;
+
+  registerMenuPlugin(id, typedBuilder, plugin);
+});
+
 export const mainMenuTemplate = async (win: BrowserWindow): Promise<MenuTemplate> => {
   const innerRefreshMenu = () => refreshMenu(win);
-  const createContext = <
-    Key extends keyof PluginBuilderList,
-    Config extends PluginBaseConfig = PluginBuilderList[Key]['config'],
-  >(name: Key): MenuPluginContext<Config> => ({
-    getConfig: () => deepmerge(pluginBuilders[name].config, config.get(`plugins.${name}`) ?? {}) as unknown as Config,
-    setConfig: (newConfig) => {
-      config.setPartial(`plugins.${name}`, newConfig);
-    },
-    window: win,
-    refresh: () => refreshMenu(win),
-  });
 
-  const availablePlugins = getAvailablePluginNames();
-  const menuResult = await Promise.allSettled(
-    availablePlugins.map(async (id) => {
-      let pluginLabel = pluginBuilders[id as keyof PluginBuilderList]?.name ?? id;
-      if (betaPlugins.includes(pluginLabel)) {
-        pluginLabel += ' [beta]';
-      }
+  await loadAllMenuPlugins(win);
 
-      if (!config.plugins.isEnabled(id)) {
-        return pluginEnabledMenu(id, pluginLabel, true, innerRefreshMenu);
-      }
+  const menuResult = Object.entries(getAllMenuTemplate()).map(([id, template]) => {
+    const pluginLabel = (pluginBuilders[id as keyof PluginBuilderList])?.name ?? id;
 
-      const factory = menuList[id] as MenuPluginFactory<PluginBaseConfig>;
-      const template = await factory(createContext(id as never));
+    if (!config.plugins.isEnabled(id)) {
+      return [
+        id,
+        pluginEnabledMenu(id, pluginLabel, true, innerRefreshMenu),
+      ] as const;
+    }
 
-      return {
+    return [
+      id,
+      {
         label: pluginLabel,
         submenu: [
           pluginEnabledMenu(id, 'Enabled', true, innerRefreshMenu),
           { type: 'separator' },
           ...template,
         ],
-      } satisfies Electron.MenuItemConstructorOptions;
-    }),
-  );
+      } satisfies Electron.MenuItemConstructorOptions
+    ] as const;
+  });
+
+  const availablePlugins = getAvailablePluginNames();
+  const pluginMenus = availablePlugins.map((id) => {
+    const predefinedTemplate = menuResult.find((it) => it[0] === id);
+    if (predefinedTemplate) return predefinedTemplate[1];
 
-  const pluginMenus = menuResult.map((it, index) => {
-    if (it.status === 'fulfilled') return it.value;
-    const id = availablePlugins[index];
     const pluginLabel = pluginBuilders[id as keyof PluginBuilderList]?.name ?? id;
 
     return pluginEnabledMenu(id, pluginLabel, true, innerRefreshMenu);

src/plugins/lumiastream/index.ts

@@ -1,7 +1,7 @@
 import { createPluginBuilder } from '../utils/builder';
 
 const builder = createPluginBuilder('lumiastream', {
-  name: 'Lumia Stream',
+  name: 'Lumia Stream [beta]',
   restartNeeded: true,
   config: {
     enabled: false,

src/preload.ts

@@ -9,43 +9,20 @@ import config from './config';
 
 // eslint-disable-next-line import/order
 import { preloadPlugins } from 'virtual:PreloadPlugins';
-import { PluginBaseConfig, PluginContext, PreloadPluginFactory } from './plugins/utils/builder';
+import {
+  PluginBaseConfig,
+  PluginBuilder,
+  PreloadPluginFactory
+} from './plugins/utils/builder';
+import { loadAllPreloadPlugins, registerPreloadPlugin } from './loader/preload';
 
-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 unknown as Config,
-  setConfig: (newConfig) => {
-    config.setPartial(`plugins.${name}`, newConfig);
-  },
-});
-
-
-const preloadedPluginList = [];
-
-const pluginConfig = config.plugins.getPlugins();
-Object.entries(preloadPlugins)
-  .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];
-
-    try {
-      const context = createContext(id as keyof PluginBuilderList);
-      const plugin = await factory(context);
-      plugin.onLoad?.();
-      preloadedPluginList.push(plugin);
-    } catch (error) {
-      console.error('[YTMusic]', `Cannot load preload plugin "${id}": ${String(error)}`);
-    }
-  }
+Object.entries(pluginBuilders).forEach(([id, builder]) => {
+  const typedBuilder = builder as PluginBuilder<string, PluginBaseConfig>;
+  const plugin = preloadPlugins[id] as PreloadPluginFactory<PluginBaseConfig> | undefined;
+
+  registerPreloadPlugin(id, typedBuilder, plugin);
 });
+loadAllPreloadPlugins();
 
 contextBridge.exposeInMainWorld('mainConfig', config);
 contextBridge.exposeInMainWorld('electronIs', is);