✨ feat: 提供 render 相关方法

package.json

@@ -101,6 +101,9 @@
     "typescript": "^5",
     "vitest": "latest"
   },
+  "peerDependencies": {
+    "react": "^18"
+  },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"

src/index.ts

@@ -1,5 +1,6 @@
 export * from './error';
-export * from './manifest';
-export * from './market';
+export * from './render';
 export * from './request';
+export * from './schema/manifest';
+export * from './schema/market';
 export * from './types';

src/render/const.ts

@@ -0,0 +1,5 @@
+export enum PluginChannel {
+  fetchPluginMessage = 'lobe-chat:fetch-plugin-message',
+  pluginReadyForRender = 'lobe-chat:pluginReadyForRender',
+  renderPlugin = 'lobe-chat:render-plugin',
+}

src/render/hooks.ts

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+
+import { PluginRenderProps } from '@/types';
+
+import { PluginChannel } from './const';
+import { onPluginReady, onReceiveData } from './utils';
+
+export const useWatchPluginMessage = <T = any>() => {
+  const [result, setData] = useState<{ data: T; loading: boolean }>({
+    data: undefined as T,
+    loading: true,
+  });
+
+  const receiverData = (e: MessageEvent) => {
+    onReceiveData(e, (data: PluginRenderProps<T>) => {
+      setData({ data: data.content, loading: false });
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener('message', receiverData);
+
+    top?.postMessage({ type: PluginChannel.pluginReadyForRender }, '*');
+
+    return () => {
+      window.removeEventListener('message', receiverData);
+    };
+  }, []);
+
+  return result;
+};
+
+export const useOnPluginReady = (onReady: () => void) => {
+  useEffect(() => {
+    const fn = (e: MessageEvent) => {
+      onPluginReady(e, onReady);
+    };
+
+    window.addEventListener('message', fn);
+    return () => {
+      window.removeEventListener('message', fn);
+    };
+  }, []);
+};

src/render/index.ts

@@ -0,0 +1,3 @@
+export * from './const';
+export * from './hooks';
+export { fetchPluginMessage, sendMessageToPlugin } from './message';

src/render/message.ts

@@ -0,0 +1,20 @@
+import { PluginChannel } from './const';
+import { onReceiveData } from './utils';
+
+export const sendMessageToPlugin = (window: Window, props: any) => {
+  window.postMessage({ props, type: PluginChannel.renderPlugin }, '*');
+};
+
+export const fetchPluginMessage = () =>
+  new Promise<any>((resolve) => {
+    const receiverData = (e: MessageEvent) => {
+      onReceiveData(e, (data) => {
+        resolve(data.content);
+        window.removeEventListener('message', receiverData);
+      });
+    };
+
+    window.addEventListener('message', receiverData);
+
+    top?.postMessage({ type: PluginChannel.fetchPluginMessage }, '*');
+  });

src/render/utils.ts

@@ -0,0 +1,25 @@
+import { PluginChannel } from '@/render/const';
+import { PluginRenderProps } from '@/types';
+
+export const onPluginReady = (e: MessageEvent, onReady: () => void) => {
+  if (e.data.type === PluginChannel.pluginReadyForRender) {
+    onReady();
+  }
+};
+
+export const onPluginFetchMessage = (e: MessageEvent, onRequest: (data: any) => void) => {
+  if (e.data.type === PluginChannel.fetchPluginMessage) {
+    onRequest(e.data);
+  }
+};
+
+export const sendMessageToPlugin = (window: Window, props: any) => {
+  window.postMessage({ props, type: PluginChannel.renderPlugin }, '*');
+};
+
+export const onReceiveData = <T>(e: MessageEvent, onData: (data: PluginRenderProps<T>) => void) => {
+  if (e.data.type === PluginChannel.renderPlugin) {
+    const props = e.data.props as PluginRenderProps<T>;
+    onData(props);
+  }
+};