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 { 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 ( - createStore(showDevtools)}>{Content} - ); + return createStore(devtoolOptions)}>{Content}; }; 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 = memo((props) => { const { themeMode, theme, style, __STORE_DEVTOOLS__, editorRef, ...res } = props; const { styles } = useStyle(); return ( - + 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 = { }, 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 () => ( - + ); 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 { - const devtools = optionalDevtools(showDevTools); +export const createStore = (options: boolean | DevtoolsOptions = false) => { + const devtools = optionalDevtools(options !== false); - return create()(devtools(vanillaStore, { name: 'ProEditorStore' })); + const devtoolOptions = + options === false ? undefined : options === true ? { name: 'ProEditorStore' } : options; + + return create()(devtools(vanillaStore, devtoolOptions)); };