ui plugins

src/components/plugins/ExternalPluginLoader.tsx

@@ -0,0 +1,61 @@
+import { FC, useEffect, useState } from 'react';
+import { GetConfigurationValue } from '../../api';
+import { subscribePlugins } from './NitroPluginApi';
+
+// Force the global API to be initialized
+import './NitroPluginApi';
+
+export const ExternalPluginLoader: FC<{}> = () =>
+{
+    const [, forceUpdate] = useState(0);
+
+    useEffect(() =>
+    {
+        return subscribePlugins(() => forceUpdate(n => n + 1));
+    }, []);
+
+    // MainView only renders after isReady=true in App.tsx,
+    // so the configuration is guaranteed to be loaded at this point.
+    useEffect(() =>
+    {
+        const scripts: HTMLScriptElement[] = [];
+
+        let pluginUrls: string[] = [];
+
+        try
+        {
+            pluginUrls = GetConfigurationValue<string[]>('external.plugins', []);
+        }
+        catch (e)
+        {
+            console.warn('[NitroPlugins] Could not read external.plugins config:', e);
+            return;
+        }
+
+        if (!pluginUrls || pluginUrls.length === 0)
+        {
+            console.log('[NitroPlugins] No external plugins configured');
+            return;
+        }
+
+        console.log('[NitroPlugins] Loading external plugins:', pluginUrls);
+
+        for (const url of pluginUrls)
+        {
+            const script = document.createElement('script');
+            script.src = url;
+            script.async = true;
+            script.onload = () => console.log(`[NitroPlugins] Loaded: ${url}`);
+            script.onerror = () => console.warn(`[NitroPlugins] Failed to load: ${url}`);
+            document.head.appendChild(script);
+            scripts.push(script);
+        }
+
+        return () =>
+        {
+            scripts.forEach(s => s.remove());
+        };
+    }, []);
+
+    return null;
+};