zustand-utils - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

README.zh-CN.md

es/optionalDevtools.d.ts

		/**
		*
		* Make devtools optional
		* 将是否开启 devtools 变成可选方案
		* 翻译：
		* Refs: https://github.com/pmndrs/zustand/discussions/1266
		* @see https://github.com/pmndrs/zustand/discussions/1266
		*/
		export declare const optionalDevtools: (showDevTools: boolean) => <T, Mps extends [keyof import("zustand").StoreMutators<unknown, unknown>, unknown][] = [], Mcs extends [keyof import("zustand").StoreMutators<unknown, unknown>, unknown][] = []>(initializer: import("zustand").StateCreator<T, [...Mps, ["zustand/devtools", never]], Mcs, T>, devtoolsOptions?: import("zustand/middleware").DevtoolsOptions \| undefined) => import("zustand").StateCreator<T, Mps, [["zustand/devtools", never], ...Mcs], T>;

es/optionalDevtools.js

		@@ -5,5 +5,5 @@ import { devtools } from 'zustand/middleware';
		*
		* Make devtools optional
		* 将是否开启 devtools 变成可选方案
		* 翻译：
		* Refs: https://github.com/pmndrs/zustand/discussions/1266
		* @see https://github.com/pmndrs/zustand/discussions/1266
		*/
		@@ -10,0 +10,0 @@ export var optionalDevtools = function optionalDevtools(showDevTools) {

package.json

		{
		"name": "zustand-utils",
		"version": "1.1.1",
		"version": "1.1.2",
		"description": "some utils for zustand",
		@@ -5,0 +5,0 @@ "keywords": [

README.md

		@@ -0,1 +1,3 @@
		<img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18"> English \| [简体中文](./README.zh-CN.md)

		# zustand-utils
		@@ -50,3 +52,3 @@
		import create from 'zustand'
		import createContext from 'zustand/context'
		import { createContext } from 'zustand-utils'

		@@ -69,2 +71,25 @@ const { Provider, useStore } = createContext()

		### optionalDevtools

		a wrapper for zustand devtools middleware that with config to enable devtools.(Discussion: [#1266](https://github.com/pmndrs/zustand/discussions/1266))

		```ts
		import { optionalDevtools } from 'zustand-utils';

		type Store = {
		foo: string;
		};

		export const createStore = (withDevtools?: boolean) => {
		// can enable or controlled by config
		const devtools = optionalDevtools(withDevtools);
		// use as zustands/middleware devtools
		return create<Store>()(devtools((set) => ({})));
		};
		```

		What's improve?

		`zustands/middleware`'s `devtools` have an option `enable`, but it doesn't work if set to false in development.

		## Usage
		@@ -80,3 +105,3 @@
		import create from "zustand";
		import createContext from "zustand/context";
		import { createContext } from 'zustand-utils';

		@@ -135,3 +160,3 @@ // Best practice: You can move the below createContext() and createStore to a separate file(store.js) and import the Provider, useStore here/wherever you need.
		import create from 'zustand';
		import createContext from 'zustand/context';
		import { createContext } from 'zustand-utils';

		@@ -158,6 +183,4 @@ const { Provider, useStore } = createContext();

		a most usage of createContext is refactoring an app to a component.
		a most usage of createContext is refactoring an app to a component. Here's progress:

		Here's progress:

		1. Create an App without context :
		@@ -201,8 +224,4 @@

		2. Oneday, the app needs to be converted to a component(like [react-flow](https://reactflow.dev/)) to reuse in another app.
		2. Just wrapper the App with `createContext`, and don't need to refactor any code in children components.

		with `createContext`, what needs to do is just wrapper the App with `createContext`, and don't need to refactor any code in children components.

		It become a component, can be used in any other app.

		```diff
		@@ -238,4 +257,6 @@ // store.ts

		It become a component, can be used in any other app.

		## License

		[MIT](./LICENSE)

zustand-utils - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics