Plugin management page

src/echo-app/src/renderer/src/dev-plugins.ts

@@ -3,6 +3,19 @@
  * All of these plugins have HMR enabled, regardless of whether you only have the plugins folder open
  */
 
-export const getDevPlugins = () => {
-  return [import('character-plugin'), import('stash-plugin'), import('poe-log-plugin')]
+export const importDevPlugin = (pluginName: string) => {
+  switch (pluginName) {
+    case 'character-plugin-dev':
+      return import('character-plugin')
+    case 'stash-plugin-dev':
+      return import('stash-plugin')
+    case 'poe-log-plugin-dev':
+      return import('poe-log-plugin')
+    default:
+      return
+  }
+}
+
+export const getDevPluginNames = () => {
+  return ['character-plugin-dev', 'stash-plugin-dev', 'poe-log-plugin-dev']
 }

src/echo-app/src/renderer/src/plugin-page.tsx

@@ -1,14 +1,15 @@
 import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid'
-import { HomeIcon, UserCircleIcon } from '@heroicons/react/24/outline'
+import { CpuChipIcon, HomeIcon, UserCircleIcon } from '@heroicons/react/24/outline'
 import { bind } from '@react-rxjs/core'
-import { ECHO_ROUTER, EchoPluginHook } from 'echo-common'
+import { ECHO_PLUGIN_CONFIG, ECHO_ROUTER, EchoPluginHook } from 'echo-common'
 import { EchoRoute } from 'echo-common/dist/cjs/echo-router'
 import fs from 'fs'
 import os from 'os'
 import * as path from 'path'
 import React, { useEffect } from 'react'
 import { ProfilePage } from './profile-page'
-import { getDevPlugins } from './dev-plugins'
+import { getDevPluginNames, importDevPlugin } from './dev-plugins'
+import { PluginSettingsPage } from './plugin-settings-page'
 
 const [useCurrentRoute] = bind(ECHO_ROUTER.currentRoute$)
 const [useCurrentRoutes] = bind(ECHO_ROUTER.routes$)
@@ -44,31 +45,72 @@ export const PluginPage: React.FC = () => {
       path: 'profile',
       plugin: 'sage'
     })
+    ECHO_ROUTER.registerRoute({
+      navItems: [
+        {
+          location: 'l-sidebar-b',
+          icon: CpuChipIcon
+        }
+      ],
+      page: PluginSettingsPage,
+      path: 'plugin-settings',
+      plugin: 'sage'
+    })
   }, [])
 
   useEffect(() => {
     if (import.meta.env.MODE === 'development') {
-      const imports = getDevPlugins()
-      imports.forEach((prom) => {
-        prom.then((entry) => {
-          const plugin: EchoPluginHook = entry.default()
-          plugin.start()
-        })
+      const pluginNames = getDevPluginNames()
+      const pluginConfigs = ECHO_PLUGIN_CONFIG.loadPluginConfigs()
+      pluginNames.forEach((pluginName) => {
+        const pluginConfig = pluginConfigs && pluginConfigs[pluginName]
+        if (pluginConfig) {
+          if (pluginConfig.enabled) {
+            const pluginImportPromise = importDevPlugin(pluginName)
+            pluginImportPromise?.then((entry) => {
+              const plugin: EchoPluginHook = entry.default()
+              plugin.start()
+            })
+          }
+        } else {
+          pluginConfigs[pluginName] = {
+            name: pluginName,
+            version: 'LOCAL',
+            enabled: false,
+            path: ''
+          }
+        }
       })
+      ECHO_PLUGIN_CONFIG.writePluginConfigs(pluginConfigs)
     } else {
       function loadPlugins(baseDir: string) {
         fs.readdir(baseDir, (err, files) => {
           if (err) {
             return console.log('Unable to scan directory: ' + err)
           }
+          const pluginConfigs = ECHO_PLUGIN_CONFIG.loadPluginConfigs()
           files.forEach(function (file) {
             if (file.endsWith('.js')) {
               const p = path.resolve(baseDir, file)
-              const entry = module.require(p)
-              const plugin: EchoPluginHook = entry?.()
-              plugin?.start()
+              const fileName = path.basename(p).replace(/\.[^/.]+$/, '')
+              const pluginConfig = fileName && pluginConfigs[fileName]
+              if (pluginConfig) {
+                if (pluginConfig.enabled) {
+                  const entry = module.require(p)
+                  const plugin: EchoPluginHook = entry()
+                  plugin.start()
+                }
+              } else {
+                pluginConfigs[fileName] = {
+                  name: fileName,
+                  version: 'LOCAL',
+                  enabled: false,
+                  path: p
+                }
+              }
             }
           })
+          ECHO_PLUGIN_CONFIG.writePluginConfigs(pluginConfigs)
         })
       }
       let pluginDir = path.resolve(os.homedir(), 'poestack-sage', 'plugins')

src/echo-app/src/renderer/src/plugin-settings-page.tsx

@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from 'react'
+
+import {
+  ECHO_PLUGIN_CONFIG,
+  EchoPluginConfig,
+  EchoPluginConfigs,
+  EchoPluginHook
+} from 'echo-common'
+import * as path from 'path'
+import { importDevPlugin } from './dev-plugins'
+
+function filterPluginsByEnv(pluginConfigs: EchoPluginConfigs) {
+  return Object.values(pluginConfigs).filter(
+    (config) => (import.meta.env.MODE === 'development') === config.name.endsWith('-dev')
+  )
+}
+
+async function getPlugin(pluginConfig: EchoPluginConfig): Promise<EchoPluginHook> {
+  if (import.meta.env.MODE === 'development') {
+    const entry = await importDevPlugin(pluginConfig.name)
+    return entry.default()
+  } else {
+    const p = path.resolve(pluginConfig.path)
+    const entry = module.require(p)
+    const plugin: EchoPluginHook = entry()
+    return plugin
+  }
+}
+
+export const PluginSettingsPage: React.FC = () => {
+  useEffect(() => {
+    setAvailablePlugins(filterPluginsByEnv(ECHO_PLUGIN_CONFIG.loadPluginConfigs()))
+  }, [])
+
+  async function handleTogglePlugin(pluginConfig: EchoPluginConfig) {
+    const pluginConfigs = ECHO_PLUGIN_CONFIG.loadPluginConfigs()
+    const pluginEnabled = pluginConfigs[pluginConfig.name].enabled
+    const plugin = await getPlugin(pluginConfig)
+    if (!pluginEnabled) {
+      plugin.start()
+    } else {
+      plugin.destroy()
+    }
+    pluginConfigs[pluginConfig.name].enabled = !pluginEnabled
+    const updatedConfigs = ECHO_PLUGIN_CONFIG.writePluginConfigs(pluginConfigs)
+    setAvailablePlugins(filterPluginsByEnv(updatedConfigs))
+  }
+
+  const [availablePlugins, setAvailablePlugins] = useState<EchoPluginConfig[]>([])
+
+  return (
+    <>
+      <div className="p-4 w-full h-full overflow-y-scroll">
+        <div className="flex flex-row">
+          <div className="flex flex-col">
+            <h1 className="font-semibold text-primary-accent">Plugins</h1>
+          </div>
+        </div>
+        <div className="pt-4 flex-row flex w-full">
+          <table className="bg-secondary-surface table-auto border-separate border-spacing-3 text-left">
+            <tr className="">
+              <th>Plugin Name</th>
+              <th>Version</th>
+              <th>Enabled</th>
+            </tr>
+            {availablePlugins?.length > 0 &&
+              availablePlugins.map((plugin) => (
+                <tr key={plugin.name}>
+                  <td>{plugin.name}</td>
+                  <td>{plugin.version}</td>
+                  <td className="text-center">
+                    <input
+                      type="checkbox"
+                      id={`${plugin.name}-enabled`}
+                      name="enabled"
+                      checked={plugin.enabled}
+                      onChange={() => handleTogglePlugin(plugin)}
+                    />
+                  </td>
+                </tr>
+              ))}
+            {!availablePlugins?.length && (
+              <tr>
+                <td>No Plugins installed</td>
+              </tr>
+            )}
+          </table>
+        </div>
+        <div className="basis-1/4"></div>
+      </div>
+    </>
+  )
+}

src/echo-common/src/echo-dir-service.ts

@@ -39,6 +39,7 @@ export class EchoDirService {
     const resolvedPath = path.resolve(this.homeDirPath, ...jsonPath)
     fs.mkdirSync(path.dirname(resolvedPath), { recursive: true })
     fs.writeFileSync(resolvedPath + '.json', JSON.stringify(value))
+    return value
   }
 }
 

src/echo-common/src/echo-plugin-config.ts

@@ -0,0 +1,28 @@
+import { ECHO_DIR } from './echo-dir-service'
+
+export type EchoPluginConfig = {
+  name: string
+  version: string
+  enabled: boolean
+  path: string
+}
+
+export type EchoPluginConfigs = Record<string, EchoPluginConfig>
+
+export class EchoPluginConfigService {
+  public loadPluginConfigs(): EchoPluginConfigs {
+    if (ECHO_DIR.existsJson('plugin-config')) {
+      const loadedPluginConfig: EchoPluginConfigs | null = ECHO_DIR.loadJson('plugin-config')
+      if (loadedPluginConfig) {
+        return loadedPluginConfig
+      }
+    }
+    return this.writePluginConfigs({})
+  }
+
+  public writePluginConfigs(pluginConfigObject: EchoPluginConfigs): EchoPluginConfigs {
+    return ECHO_DIR.writeJson(['plugin-config'], pluginConfigObject)
+  }
+}
+
+export const ECHO_PLUGIN_CONFIG = new EchoPluginConfigService()

src/echo-common/src/echo-router.ts

@@ -24,7 +24,11 @@ export class EchoRouter {
     }
   }
 
-  public removeRoute(next: { plugin: string; path: string }) {}
+  public unregisterRoute(route: EchoRoute) {
+    this.routes$.next(
+      this.routes$.value.filter((r) => r.plugin !== route.plugin && r.path !== route.page)
+    )
+  }
 
   public push(next: { plugin: string; path: string }) {
     const nextRoute = this.routes$.value.find(

src/echo-common/src/index.ts

@@ -1,4 +1,4 @@
-import { ECHO_ROUTER } from './echo-router'
+import { ECHO_ROUTER, EchoRoute } from './echo-router'
 import { CachedTask, CachedTaskEvent } from './cached-task'
 import { ECHO_DIR } from './echo-dir-service'
 import { EchoPluginHook } from './echo-plugin-hook'
@@ -21,13 +21,15 @@ import {
   usePoeStashes
 } from './poe-stash-service'
 import { POE_LOG_SERVICE, PoeLogService } from './poe-log-service'
+import { ECHO_PLUGIN_CONFIG, EchoPluginConfigs, EchoPluginConfig } from './echo-plugin-config'
 
 export {
   PoeStashService,
   POE_STASH_SERVICE,
   usePoeStashes,
   usePoeStashItems,
   ECHO_DIR,
+  ECHO_PLUGIN_CONFIG,
   CachedTask,
   ECHO_ROUTER,
   PoeAccountService,
@@ -42,4 +44,4 @@ export {
   POE_LOG_SERVICE
 }
 
-export type { EchoPluginHook, CachedTaskEvent }
+export type { EchoPluginHook, CachedTaskEvent, EchoPluginConfigs, EchoPluginConfig, EchoRoute }

src/echo-plugin-examples/character-plugin/src/entry.tsx

@@ -2,23 +2,27 @@
 
 import App from './App'
 import { UsersIcon } from '@heroicons/react/24/outline'
-import { ECHO_ROUTER, EchoPluginHook } from 'echo-common'
+import { ECHO_ROUTER, EchoPluginHook, EchoRoute } from 'echo-common'
+
+const pluginRoute: EchoRoute = {
+  plugin: 'example-characters',
+  path: 'main',
+  page: App,
+  navItems: [
+    {
+      location: 'l-sidebar-m',
+      icon: UsersIcon
+    }
+  ]
+}
 
 function start() {
-  ECHO_ROUTER.registerRoute({
-    plugin: 'example-characters',
-    path: 'main',
-    page: App,
-    navItems: [
-      {
-        location: 'l-sidebar-m',
-        icon: UsersIcon
-      }
-    ]
-  })
+  ECHO_ROUTER.registerRoute(pluginRoute)
 }
 
-function destroy() {}
+function destroy() {
+  ECHO_ROUTER.unregisterRoute(pluginRoute)
+}
 
 export default function (): EchoPluginHook {
   return {

src/echo-plugin-examples/poe-log-plugin/src/entry.tsx

@@ -2,18 +2,22 @@
 
 import App from './App'
 import { DocumentTextIcon } from '@heroicons/react/24/outline'
-import { ECHO_ROUTER, EchoPluginHook } from 'echo-common'
+import { ECHO_ROUTER, EchoPluginHook, EchoRoute } from 'echo-common'
+
+const pluginRoute: EchoRoute = {
+  plugin: 'example-log-plugin-stash',
+  path: 'main',
+  page: App,
+  navItems: [{ location: 'l-sidebar-m', icon: DocumentTextIcon }]
+}
 
 function start() {
-  ECHO_ROUTER.registerRoute({
-    plugin: 'example-log-plugin-stash',
-    path: 'main',
-    page: App,
-    navItems: [{ location: 'l-sidebar-m', icon: DocumentTextIcon }]
-  })
+  ECHO_ROUTER.registerRoute(pluginRoute)
 }
 
-function destroy() {}
+function destroy() {
+  ECHO_ROUTER.unregisterRoute(pluginRoute)
+}
 
 export default function (): EchoPluginHook {
   return {

src/echo-plugin-examples/stash-plugin/src/entry.tsx

@@ -2,18 +2,22 @@
 
 import App from './App'
 import { ArchiveBoxIcon } from '@heroicons/react/24/outline'
-import { ECHO_ROUTER, EchoPluginHook } from 'echo-common'
+import { ECHO_ROUTER, EchoPluginHook, EchoRoute } from 'echo-common'
+
+const pluginRoute: EchoRoute = {
+  plugin: 'example-stash',
+  path: 'main',
+  page: App,
+  navItems: [{ location: 'l-sidebar-m', icon: ArchiveBoxIcon }]
+}
 
 function start() {
-  ECHO_ROUTER.registerRoute({
-    plugin: 'example-stash',
-    path: 'main',
-    page: App,
-    navItems: [{ location: 'l-sidebar-m', icon: ArchiveBoxIcon }]
-  })
+  ECHO_ROUTER.registerRoute(pluginRoute)
 }
 
-function destroy() {}
+function destroy() {
+  ECHO_ROUTER.unregisterRoute(pluginRoute)
+}
 
 export default function (): EchoPluginHook {
   return {