From 2cedbb36ae0b08be52dcd5040a3f6ee4d2d25812 Mon Sep 17 00:00:00 2001
From: arvinxx <arvinx@foxmail.com>
Date: Thu, 15 Jun 2023 12:42:09 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20feat(pro-editor):=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E9=85=8D=E7=BD=AE=20ProEditorStore=20=E5=9C=A8devtool?=
 =?UTF-8?q?s=20=E4=B8=AD=E7=9A=84=E5=90=8D=E7=A7=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ComponentAsset/store/index.ts        |  2 +-
 src/ProEditor/container/App.tsx          |  1 -
 src/ProEditor/container/Provider.tsx     |  9 ++++-----
 src/ProEditor/container/index.tsx        |  9 +++++++--
 src/ProEditor/demos/buttonAsset/index.ts |  2 +-
 src/ProEditor/demos/buttonAssets.tsx     |  6 +++++-
 src/ProEditor/store/createStore.ts       | 10 +++++++---
 7 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/src/ComponentAsset/store/index.ts b/src/ComponentAsset/store/index.ts
index 5da0a812..0fcff54d 100644
--- a/src/ComponentAsset/store/index.ts
+++ b/src/ComponentAsset/store/index.ts
@@ -1,9 +1,9 @@
+import { ReactNode } from 'react';
 import { StateCreator, StoreApi, create } from 'zustand';
 import { UseContextStore, createContext, optionalDevtools } from 'zustand-utils';
 import { DevtoolsOptions } from 'zustand/middleware';
 
 import type { ProEditorInstance } from '@/ProEditor';
-import { ReactNode } from 'react';
 
 export interface AssetStoreOptions<T = any> {
   devtools?: boolean | DevtoolsOptions;
diff --git a/src/ProEditor/container/App.tsx b/src/ProEditor/container/App.tsx
index e46c6f2f..d0a08369 100644
--- a/src/ProEditor/container/App.tsx
+++ b/src/ProEditor/container/App.tsx
@@ -25,7 +25,6 @@ export interface ProEditorAppProps {
    * 自定义错误兜底形态
    */
   ErrorBoundary?: FC;
-  __STORE_DEVTOOLS__?: boolean;
   /**
    * 代码复制回调
    */
diff --git a/src/ProEditor/container/Provider.tsx b/src/ProEditor/container/Provider.tsx
index dfc3dc98..932b7666 100644
--- a/src/ProEditor/container/Provider.tsx
+++ b/src/ProEditor/container/Provider.tsx
@@ -1,11 +1,12 @@
 import type { FC, ReactNode } from 'react';
+import { DevtoolsOptions } from 'zustand/middleware';
 
 import { createStore, Provider, useStoreApi } from '../store';
 
 export const ProEditorProvider: FC<{
   children: ReactNode;
-  showDevtools?: boolean;
-}> = ({ children, showDevtools }) => {
+  devtoolOptions?: boolean | DevtoolsOptions;
+}> = ({ children, devtoolOptions }) => {
   let isWrapped = true;
 
   const Content = <>{children}</>;
@@ -20,9 +21,7 @@ export const ProEditorProvider: FC<{
     return Content;
   }
 
-  return (
-    <Provider createStore={() => createStore(showDevtools)}>{Content}</Provider>
-  );
+  return <Provider createStore={() => createStore(devtoolOptions)}>{Content}</Provider>;
 };
 
 export default ProEditorProvider;
diff --git a/src/ProEditor/container/index.tsx b/src/ProEditor/container/index.tsx
index f0488491..b3af48e3 100644
--- a/src/ProEditor/container/index.tsx
+++ b/src/ProEditor/container/index.tsx
@@ -3,6 +3,7 @@ import { AppContainer } from '@ant-design/pro-editor';
 import { App } from 'antd';
 import type { FC } from 'react';
 import { memo } from 'react';
+import { DevtoolsOptions } from 'zustand/middleware';
 
 import type { ProEditorAppProps } from './App';
 import Content from './App';
@@ -11,14 +12,18 @@ import type { StoreUpdaterProps } from './StoreUpdater';
 import StoreUpdater from './StoreUpdater';
 import { useStyle } from './style';
 
-export type ProEditorProps = ProEditorAppProps & AppContainerProps & StoreUpdaterProps;
+export type ProEditorProps = ProEditorAppProps &
+  AppContainerProps &
+  StoreUpdaterProps & {
+    __STORE_DEVTOOLS__?: boolean | DevtoolsOptions;
+  };
 
 export const ProEditor: FC<ProEditorProps> = memo((props) => {
   const { themeMode, theme, style, __STORE_DEVTOOLS__, editorRef, ...res } = props;
   const { styles } = useStyle();
 
   return (
-    <Provider showDevtools={__STORE_DEVTOOLS__}>
+    <Provider devtoolOptions={__STORE_DEVTOOLS__}>
       <AppContainer themeMode={themeMode} theme={theme}>
         <App className={styles.app} style={style}>
           <Content {...res} />
diff --git a/src/ProEditor/demos/buttonAsset/index.ts b/src/ProEditor/demos/buttonAsset/index.ts
index 4eb39a46..22f9b463 100644
--- a/src/ProEditor/demos/buttonAsset/index.ts
+++ b/src/ProEditor/demos/buttonAsset/index.ts
@@ -24,7 +24,7 @@ export const buttonAssetParams: ComponentAssetParams<ButtonConfig> = {
   },
 
   storeOptions: {
-    devtools: true,
+    devtools: { name: 'ButtonAssetStore' },
   },
 
   codeEmitter: () => '',
diff --git a/src/ProEditor/demos/buttonAssets.tsx b/src/ProEditor/demos/buttonAssets.tsx
index 42bb849a..a719b131 100644
--- a/src/ProEditor/demos/buttonAssets.tsx
+++ b/src/ProEditor/demos/buttonAssets.tsx
@@ -7,5 +7,9 @@ import { buttonAssetParams } from './buttonAsset';
 const ButtonComponentAsset = new ComponentAsset(buttonAssetParams);
 
 export default () => (
-  <ProEditor componentAsset={ButtonComponentAsset} style={{ height: '100vh' }} __STORE_DEVTOOLS__ />
+  <ProEditor
+    componentAsset={ButtonComponentAsset}
+    style={{ height: '100vh' }}
+    __STORE_DEVTOOLS__={{ name: 'ButtonEditor' }}
+  />
 );
diff --git a/src/ProEditor/store/createStore.ts b/src/ProEditor/store/createStore.ts
index 1365bdee..bfbbdf93 100644
--- a/src/ProEditor/store/createStore.ts
+++ b/src/ProEditor/store/createStore.ts
@@ -1,6 +1,7 @@
 import type { StateCreator } from 'zustand';
 import { create } from 'zustand';
 import { optionalDevtools } from 'zustand-utils';
+import { DevtoolsOptions } from 'zustand/middleware';
 
 import {
   AwarenessPublicAction,
@@ -52,8 +53,11 @@ const vanillaStore: StateCreator<InternalProEditorStore, [['zustand/devtools', n
   ...awarenessSlice(...params),
 });
 
-export const createStore = (showDevTools: boolean = false) => {
-  const devtools = optionalDevtools(showDevTools);
+export const createStore = (options: boolean | DevtoolsOptions = false) => {
+  const devtools = optionalDevtools(options !== false);
 
-  return create<InternalProEditorStore>()(devtools(vanillaStore, { name: 'ProEditorStore' }));
+  const devtoolOptions =
+    options === false ? undefined : options === true ? { name: 'ProEditorStore' } : options;
+
+  return create<InternalProEditorStore>()(devtools(vanillaStore, devtoolOptions));
 };