✨ feat: add usePluginState hooks

src/client/fetch/pluginState.ts

@@ -1,16 +1,16 @@
 import { PluginChannel } from '../const';
 
-export const fetchPluginState = <T = any>() =>
+export const fetchPluginState = <T = any>(key: string) =>
   new Promise<T>((resolve) => {
     const receiverData = (e: MessageEvent) => {
-      if (e.data.type === PluginChannel.renderPluginState) {
-        resolve(e.data.props);
+      if (e.data.type === PluginChannel.renderPluginState && e.data.key === key) {
+        resolve(e.data.value);
 
         window.removeEventListener('message', receiverData);
       }
     };
 
     window.addEventListener('message', receiverData);
 
-    top?.postMessage({ type: PluginChannel.fetchPluginState }, '*');
+    top?.postMessage({ key, type: PluginChannel.fetchPluginState }, '*');
   });

src/client/hooks/index.ts

@@ -1,2 +1,3 @@
 export * from './useOnStandalonePluginInit';
+export * from './usePluginState';
 export * from './useWatchPluginMessage';

src/client/hooks/usePluginState.ts

@@ -0,0 +1,25 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { fetchPluginState, postToUpdatePluginState } from '@/client';
+
+export const usePluginState = <T>(key: string, initialValue: T) => {
+  const [value, setValue] = useState(initialValue);
+
+  useEffect(() => {
+    fetchPluginState(key).then((e) => {
+      if (!e) return;
+
+      setValue(e);
+    });
+  }, [key]);
+
+  const updateValue = useCallback(
+    (value: T) => {
+      setValue(value);
+      postToUpdatePluginState(key, value);
+    },
+    [key],
+  );
+
+  return [value, updateValue] as const;
+};

src/client/postMessage.ts

@@ -4,6 +4,6 @@ export const postToFillPluginContent = (content: any) => {
   top?.postMessage({ content, type: PluginChannel.fillStandalonePluginContent }, '*');
 };
 
-export const postToUpdatePluginState = (state: any) => {
-  top?.postMessage({ state, type: PluginChannel.updatePluginState }, '*');
+export const postToUpdatePluginState = (key: string, value: any) => {
+  top?.postMessage({ key, type: PluginChannel.updatePluginState, value }, '*');
 };