@bbki.ng/site 1.8.4 → 1.8.5

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @bbki.ng/site
 
+## 1.8.5
+
 ## 1.8.4
 
 ## 1.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/site",
-  "version": "1.8.4",
+  "version": "1.8.5",
   "description": "code behind bbki.ng",
   "main": "index.js",
   "scripts": {
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@extism/extism": "2.0.0-rc11",
-    "@bbki.ng/components": "workspace:2.6.3",
+    "@bbki.ng/components": "workspace:2.6.4",
     "@supabase/supabase-js": "^1.35.4",
     "classnames": "2.3.1",
     "react": "^18.0.0",

package/src/blog/components/plugin/PluginContentPage.tsx

@@ -1,25 +1,47 @@
 import { ArticlePage, ArticlePageProps } from "@/components/article";
-import React, { memo } from "react";
+import React, { useCallback, useEffect } from "react";
 import { threeColWrapper } from "@/components/with_wrapper";
 import { useParams } from "react-router-dom";
 import { usePluginOutput } from "@/components/plugin/hooks/usePluginOutput";
 import { PluginManager } from "@/plugin/PluginManager";
+import { PluginConfig } from "@extism/extism";
+import { PluginEvent } from "@/plugin/PluginEvent";
 
 type PluginContentPageProps = Omit<ArticlePageProps, "children">;
 
 const ContentPage = (props: PluginContentPageProps) => {
   const { pluginRoute } = useParams();
 
-  if (!pluginRoute || !PluginManager.instance) {
-    return null;
-  }
+  const [c, setC] = React.useState<string>("");
 
-  const plugin = PluginManager.instance.getPluginByRoute(pluginRoute);
-  if (!plugin) {
-    return null;
-  }
+  const onInstall = useCallback((plugin: PluginConfig) => {
+    if (plugin.route !== pluginRoute) {
+      return;
+    }
+
+    PluginManager.instance.run(plugin.id).then((result) => {
+      setC(result);
+    });
+  }, []);
+
+  useEffect(() => {
+    PluginManager.addEventListener<PluginConfig>(
+      PluginEvent.INSTALL,
+      onInstall
+    );
+
+    return () => {
+      PluginManager.removeEventListener<PluginConfig>(
+        PluginEvent.INSTALL,
+        onInstall
+      );
+    };
+  }, []);
+
+  const plugin = PluginManager.instance?.getPluginByRoute(pluginRoute || "");
+
+  const content = usePluginOutput(plugin?.config.id) || c;
 
-  const content = usePluginOutput(plugin.config.id);
   return (
     <ArticlePage {...props} title={plugin?.config.route || ""}>
       <div dangerouslySetInnerHTML={{ __html: content }} />

package/src/blog/components/plugin/hooks/usePluginOutput.tsx

@@ -1,7 +1,7 @@
 import { PluginManager } from "@/plugin/PluginManager";
 import { useEffect, useState } from "react";
 
-export const usePluginOutput = (pluginId: number): string => {
+export const usePluginOutput = (pluginId?: number): string => {
   const [output, setOutput] = useState<string>("");
 
   useEffect(() => {

package/src/blog/plugin/PluginEvent.ts

@@ -0,0 +1,5 @@
+export enum PluginEvent {
+  INIT = "init",
+  INSTALL = "installed",
+  UNINSTALL = "uninstalled",
+}

package/src/blog/plugin/PluginManager.ts

@@ -1,6 +1,7 @@
-import { Plugin, PluginConfig, PluginInputFieldType } from "./Plugin";
+import { Plugin, PluginConfig } from "./Plugin";
 import { Dependencies } from "@/plugin/Dependencies";
 import { PluginManagerPayload } from "@/plugin/PluginManagerPayload";
+import { PluginEvent } from "@/plugin/PluginEvent";
 
 export class PluginManager {
   private readonly dependencies: Dependencies;
@@ -46,6 +47,22 @@ export class PluginManager {
 
   static instance: PluginManager;
 
+  static dispatchEvent<T>(evt: PluginEvent, data: T) {
+    window.dispatchEvent(new CustomEvent(evt, { detail: data }));
+  }
+
+  static addEventListener<T>(evt: PluginEvent, cb: (data: T) => void) {
+    window.addEventListener(evt, (e) => {
+      cb((e as CustomEvent<T>).detail);
+    });
+  }
+
+  static removeEventListener<T>(evt: PluginEvent, cb: (data: T) => void) {
+    window.removeEventListener(evt, (e) => {
+      cb((e as CustomEvent<T>).detail);
+    });
+  }
+
   static async init(dependencies: Dependencies) {
     if (PluginManager.instance) {
       return;
@@ -56,7 +73,8 @@ export class PluginManager {
     await PluginManager.instance.fetchPluginConfig();
     await PluginManager.instance.restoreInstalledPlugins();
     dependencies.loading(false);
-    dependencies.toast("Plugin manager initialized");
+    // dependencies.toast("Plugin manager initialized");
+    PluginManager.dispatchEvent<null>(PluginEvent.INIT, null);
 
     // @ts-ignore
     // expose plugin manager to window for debugging
@@ -78,6 +96,9 @@ export class PluginManager {
       this.dependencies.toast("Plugin installed");
     }
 
+    // dispatch event
+    PluginManager.dispatchEvent<PluginConfig>(PluginEvent.INSTALL, config);
+
     this.saveInfo();
   }
 
@@ -93,6 +114,9 @@ export class PluginManager {
     this.plugins.delete(id);
     this.dependencies.toast("Plugin uninstalled");
 
+    // dispatch event
+    PluginManager.dispatchEvent<PluginConfig>(PluginEvent.UNINSTALL, plugin);
+
     this.saveInfo();
   }