✨ feat: support fetch plugin payload and add a lobeChat client class

src/client/fetch/index.ts

@@ -1,3 +1,4 @@
 export * from './message';
+export * from './pluginPayload';
 export * from './pluginSettings';
 export * from './pluginState';

src/client/fetch/pluginPayload.ts

@@ -0,0 +1,25 @@
+import { PluginRequestPayload } from '@/schema/market';
+
+import { PluginChannel } from '../const';
+
+export interface PluginPayload<T = any> {
+  args?: T;
+  func: string;
+}
+export const fetchPluginPayload = <T = any>() =>
+  new Promise<PluginPayload<T>>((resolve) => {
+    const receiverData = (e: MessageEvent) => {
+      if (e.data.type === PluginChannel.initStandalonePlugin) {
+        const payload = e.data.props as PluginRequestPayload;
+        const func = payload.apiName;
+        const args = JSON.parse(payload.arguments || '{}');
+        resolve({ args, func });
+
+        window.removeEventListener('message', receiverData);
+      }
+    };
+
+    window.addEventListener('message', receiverData);
+
+    top?.postMessage({ type: PluginChannel.pluginReadyForRender }, '*');
+  });

src/client/hooks/useOnStandalonePluginInit.ts

@@ -1,31 +1,15 @@
 import { useEffect } from 'react';
 
-import { PluginChannel } from '@/client';
-import { PluginRequestPayload } from '@/schema/market';
-
-interface PluginPayload<T = any> {
-  args?: T;
-  func: string;
-}
+import { PluginPayload, fetchPluginPayload } from '../fetch/pluginPayload';
 
 export const useOnStandalonePluginInit = <T = any>(
   callback: (payload: PluginPayload<T>) => void,
 ) => {
-  const fn = (e: MessageEvent) => {
-    if (e.data.type === PluginChannel.initStandalonePlugin) {
-      const payload = e.data.props as PluginRequestPayload;
-      const func = payload.apiName;
-      const args = JSON.parse(payload.arguments || '{}');
-      callback({ args, func });
-    }
-  };
-
   useEffect(() => {
-    window.addEventListener('message', fn);
+    fetchPluginPayload().then((e) => {
+      if (!e) return;
 
-    top?.postMessage({ type: PluginChannel.pluginReadyForRender }, '*');
-    return () => {
-      window.removeEventListener('message', fn);
-    };
+      callback(e);
+    });
   }, []);
 };

src/client/index.ts

@@ -1,5 +1,6 @@
 export * from './const';
 export * from './fetch';
 export * from './hooks';
+export * from './lobeChat';
 export * from './postMessage';
 export * from './type';

src/client/lobeChat.ts

@@ -0,0 +1,15 @@
+import {
+  fetchPluginMessage,
+  fetchPluginPayload,
+  fetchPluginSettings,
+  fetchPluginState,
+} from './fetch';
+
+class LobeChat {
+  getPluginPayload = fetchPluginPayload;
+  getPluginSettings = fetchPluginSettings;
+  getPluginMessage = fetchPluginMessage;
+  getPluginState = fetchPluginState;
+}
+
+export const lobeChat = new LobeChat();