mirror of
https://github.com/pmndrs/zustand.git
synced 2025-12-08 19:45:52 +00:00
feat: deprecate default export (#1514)
This commit is contained in:
Daishi Kato
GitHub
parent
7d32f9c7c9
commit
0b55a3d74b
@ -20,7 +20,7 @@ immutable state model. However, Redux, requires your app to be wrapped in
|
||||
context providers; Zustand does not.
|
||||
|
||||
```ts
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
|
||||
type State = {
|
||||
count: number
|
||||
@ -39,7 +39,7 @@ const useCountStore = create<State & Actions>((set) => ({
|
||||
```
|
||||
|
||||
```ts
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
|
||||
type State = {
|
||||
count: number
|
||||
@ -129,7 +129,7 @@ recommended that you manually apply render optimizations by using selectors.
|
||||
**Zustand**
|
||||
|
||||
```ts
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
|
||||
type State = {
|
||||
count: number
|
||||
@ -234,7 +234,7 @@ Zustand is based on the **immutable** state model, while Valtio is based on the
|
||||
**Zustand**
|
||||
|
||||
```ts
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
|
||||
type State = {
|
||||
obj: { count: number }
|
||||
@ -264,7 +264,7 @@ that you manually apply render optimizations by using selectors.
|
||||
**Zustand**
|
||||
|
||||
```ts
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
|
||||
type State = {
|
||||
count: number
|
||||
@ -307,7 +307,7 @@ suitable when access outside of React is required.
|
||||
**Zustand**
|
||||
|
||||
```ts
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
|
||||
type State = {
|
||||
count: number
|
||||
@ -343,7 +343,7 @@ selectors.
|
||||
**Zustand**
|
||||
|
||||
```ts
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
|
||||
type State = {
|
||||
count: number
|
||||
@ -392,7 +392,7 @@ identities, additionally, Recoil needs to wrap your app in a context provider.
|
||||
**Zustand**
|
||||
|
||||
```ts
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
|
||||
type State = {
|
||||
count: number
|
||||
@ -429,7 +429,7 @@ manually apply render optimizations by using selectors.
|
||||
**Zustand**
|
||||
|
||||
```ts
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
|
||||
type State = {
|
||||
count: number
|
||||
|
||||
@ -36,7 +36,7 @@ yarn add zustand
|
||||
Your store is a hook! You can put anything in it: primitives, objects, functions. The `set` function _merges_ state.
|
||||
|
||||
```jsx
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
|
||||
const useStore = create((set) => ({
|
||||
bears: 0,
|
||||
|
||||
@ -8,7 +8,7 @@ nav: 12
|
||||
If you want to connect state of a store to URL hash, you can create your own hash storage.
|
||||
|
||||
```ts
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
import { persist, StateStorage } from 'zustand/middleware'
|
||||
|
||||
const hashStorage: StateStorage = {
|
||||
|
||||
@ -6,7 +6,7 @@ nav: 13
|
||||
The following pattern can be used to reset the state to its initial value.
|
||||
|
||||
```ts
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
|
||||
// define types for state values and actions separately
|
||||
type State = {
|
||||
@ -47,7 +47,7 @@ const useSlice = create<State & Actions>()((set, get) => ({
|
||||
Resetting multiple stores at once
|
||||
|
||||
```ts
|
||||
import _create, { StateCreator } from 'zustand'
|
||||
import { create: _create, StateCreator } from 'zustand'
|
||||
|
||||
const resetters: (() => void)[] = []
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ Like with React's `useState`, we need to update state immutably.
|
||||
Here's a typical example:
|
||||
|
||||
```jsx
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
|
||||
const useCountStore = create((set) => ({
|
||||
count: 0,
|
||||
@ -36,7 +36,7 @@ The `set` function merges state at only one level.
|
||||
If you have a nested object, you need to merge them explicitly. You will use the spread operator pattern like so:
|
||||
|
||||
```jsx
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
|
||||
const useCountStore = create((set) => ({
|
||||
nested: { count: 0 },
|
||||
|
||||
@ -9,7 +9,7 @@ you do it by calling `setState` on it:
|
||||
**You can view a codesandbox here: https://codesandbox.io/s/late-https-bxz9qy**
|
||||
|
||||
```js
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
|
||||
const useFooBar = create(() => ({ foo: new Map(), bar: new Set() }))
|
||||
|
||||
|
||||
@ -31,7 +31,7 @@ export const createBearSlice = (set) => ({
|
||||
You can now combine both the stores into **one bounded store**:
|
||||
|
||||
```js
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
import { createBearSlice } from './bearSlice'
|
||||
import { createFishSlice } from './fishSlice'
|
||||
|
||||
@ -81,7 +81,7 @@ export const createBearFishSlice = (set) => ({
|
||||
Combining all the stores together is the same as before.
|
||||
|
||||
```js
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
import { createBearSlice } from './bearSlice'
|
||||
import { createFishSlice } from './fishSlice'
|
||||
import { createBearFishSlice } from './createBearFishSlice'
|
||||
@ -100,7 +100,7 @@ Adding middlewares to a combined store is the same as with other normal stores.
|
||||
Adding `persist` middleware to our `useBoundStore`:
|
||||
|
||||
```js
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
import { createBearSlice } from './bearSlice'
|
||||
import { createFishSlice } from './fishSlice'
|
||||
import { persist } from 'zustand/middleware'
|
||||
|
||||
@ -11,7 +11,7 @@ When running tests, the stores are not automatically reset before each test run.
|
||||
Thus, there can be cases where the state of one test can affect another. To make sure all tests run with a pristine store state, you can mock `zustand` during testing and use the following code to create your store:
|
||||
|
||||
```jsx
|
||||
import actualCreate from 'zustand'
|
||||
import { create: actualCreate } from 'zustand'
|
||||
// const actualCreate = jest.requireActual('zustand') // if using jest
|
||||
import { act } from 'react-dom/test-utils'
|
||||
|
||||
@ -43,7 +43,7 @@ In [jest](https://jestjs.io/), you can create a `__mocks__/zustand.js` and place
|
||||
If you are using zustand, as documented in [TypeScript Guide](./typescript.md), use the following code:
|
||||
|
||||
```tsx
|
||||
import actualCreate, { StateCreator } from 'zustand'
|
||||
import { create: actualCreate, StateCreator } from 'zustand'
|
||||
// const actualCreate = jest.requireActual('zustand') // if using jest
|
||||
import { act } from 'react-dom/test-utils'
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ nav: 8
|
||||
The difference when using TypeScript is that instead of writing `create(...)`, you have to write `create<T>()(...)` (notice the extra parenthesis `()` too along with the type parameter) where `T` is the type of the state to annotate it. For example:
|
||||
|
||||
```ts
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
|
||||
interface BearState {
|
||||
bears: number
|
||||
@ -71,7 +71,7 @@ So what we're saying is, the inference failure in case of `createFoo` is not rea
|
||||
Zustand lies that it implemented `create`'s type, it implemented only the most part of it. Here's a simple proof by showing unsoundness. Consider the following code:
|
||||
|
||||
```ts
|
||||
import create from 'zustand/vanilla'
|
||||
import { create } from 'zustand'
|
||||
|
||||
const useBoundStore = create<{ foo: number }>()((_, get) => ({
|
||||
foo: get().foo,
|
||||
@ -136,7 +136,7 @@ This way, `T` gets inferred and you get to annotate `E`. Zustand has the same us
|
||||
Alternatively, you can also use `combine`, which infers the state so that you do not need to type it.
|
||||
|
||||
```ts
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
import { combine } from 'zustand/middleware'
|
||||
|
||||
const useBearStore = create(
|
||||
@ -166,7 +166,7 @@ Note that we don't use the curried version when using `combine` because `combine
|
||||
You do not have to do anything special to use middlewares in TypeScript.
|
||||
|
||||
```ts
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
import { devtools, persist } from 'zustand/middleware'
|
||||
|
||||
interface BearState {
|
||||
@ -187,7 +187,7 @@ const useBearStore = create<BearState>()(
|
||||
Just make sure you are using them immediately inside `create` so as to make the contextual inference work. Doing something even remotely fancy like the following `myMiddlewares` would require more advanced types.
|
||||
|
||||
```ts
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
import { devtools, persist } from 'zustand/middleware'
|
||||
|
||||
const myMiddlewares = (f) => devtools(persist(f))
|
||||
@ -212,7 +212,7 @@ Also, we recommend using `devtools` middleware as last as possible. For example,
|
||||
Imagine you had to write this hypothetical middleware.
|
||||
|
||||
```ts
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
|
||||
const foo = (f, bar) => (set, get, store) => {
|
||||
store.foo = bar
|
||||
@ -234,7 +234,7 @@ If you are eager to know what the answer is to this particular problem then you
|
||||
### Middleware that doesn't change the store type
|
||||
|
||||
```ts
|
||||
import create, { State, StateCreator, StoreMutatorIdentifier } from 'zustand'
|
||||
import { create, State, StateCreator, StoreMutatorIdentifier } from 'zustand'
|
||||
|
||||
type Logger = <
|
||||
T extends State,
|
||||
@ -279,7 +279,8 @@ const useBearStore = create<BearState>()(
|
||||
### Middleware that changes the store type
|
||||
|
||||
```ts
|
||||
import create, {
|
||||
import {
|
||||
create,
|
||||
State,
|
||||
StateCreator,
|
||||
StoreMutatorIdentifier,
|
||||
@ -334,7 +335,7 @@ console.log(useBearStore.foo.toUpperCase())
|
||||
The recommended way to use `create` is using the curried workaround like so: `create<T>()(...)`. This is because it enables you to infer the store type. But if for some reason you do not want to use the workaround, you can pass the type parameters like the following. Note that in some cases, this acts as an assertion instead of annotation, so we don't recommend it.
|
||||
|
||||
```ts
|
||||
import create from "zustand"
|
||||
import { create } from "zustand"
|
||||
|
||||
interface BearState {
|
||||
bears: number
|
||||
@ -356,7 +357,7 @@ const useBearStore = create<
|
||||
### Slices pattern
|
||||
|
||||
```ts
|
||||
import create, { StateCreator } from 'zustand'
|
||||
import { create, StateCreator } from 'zustand'
|
||||
|
||||
interface BearSlice {
|
||||
bears: number
|
||||
|
||||
@ -22,7 +22,7 @@ npm install immer
|
||||
Updating simple states
|
||||
|
||||
```ts
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
import { immer } from 'zustand/middleware/immer'
|
||||
|
||||
type State = {
|
||||
@ -52,7 +52,7 @@ export const useCountStore = create(
|
||||
Updating complex states
|
||||
|
||||
```ts
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
import { immer } from 'zustand/middleware/immer'
|
||||
|
||||
interface Todo {
|
||||
|
||||
@ -18,7 +18,7 @@ for more details.
|
||||
## Simple example
|
||||
|
||||
```ts
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
import { persist, createJSONStorage } from 'zustand/middleware'
|
||||
|
||||
export const useBearStore = create(
|
||||
@ -483,7 +483,7 @@ const useHydration = () => {
|
||||
If the storage you want to use does not match the expected API, you can create your own storage:
|
||||
|
||||
```ts
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
import { persist, StateStorage } from 'zustand/middleware'
|
||||
import { get, set, del } from 'idb-keyval' // can use anything: IndexedDB, Ionic Storage, etc.
|
||||
|
||||
@ -549,7 +549,7 @@ Basic typescript usage doesn't require anything special
|
||||
except for writing `create<State>()(...)` instead of `create(...)`.
|
||||
|
||||
```tsx
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
import { persist } from 'zustand/middleware'
|
||||
|
||||
interface MyState {
|
||||
|
||||
@ -35,7 +35,7 @@ const treats = useStore(
|
||||
For instance, if you want to construct a single object with multiple state-picks inside, similar to redux's mapStateToProps, you can tell zustand that you want the object to be diffed shallowly by passing the `shallow` equality function.
|
||||
|
||||
```jsx
|
||||
import shallow from 'zustand/shallow'
|
||||
import { shallow } from 'zustand/shallow'
|
||||
|
||||
// Object pick, re-renders the component when either state.nuts or state.honey change
|
||||
const { nuts, honey } = useStore(
|
||||
@ -131,7 +131,7 @@ subscribe(selector, callback, options?: { equalityFn, fireImmediately }): Unsubs
|
||||
```
|
||||
|
||||
```jsx
|
||||
import create from 'zustand';
|
||||
import { create } from 'zustand';
|
||||
import { subscribeWithSelector, shallow } from 'zustand/middleware'
|
||||
const useStore = create(subscribeWithSelector(() => ({ paw: true, snout: true, fur: true })))
|
||||
|
||||
@ -173,17 +173,17 @@ function Component() {
|
||||
Zustands core can be imported and used without the React dependency. The only difference is that the create function does not return a hook, but the api utilities.
|
||||
|
||||
```jsx
|
||||
import create from 'zustand/vanilla'
|
||||
import { createStore } from 'zustand/vanilla'
|
||||
|
||||
const store = create(() => ({ ... }))
|
||||
const store = createStore(() => ({ ... }))
|
||||
const { getState, setState, subscribe, destroy } = store
|
||||
```
|
||||
|
||||
You can even consume an existing vanilla store with React:
|
||||
|
||||
```jsx
|
||||
import create from 'zustand'
|
||||
import vanillaStore from './vanillaStore'
|
||||
import { create } from 'zustand'
|
||||
import { vanillaStore } from './vanillaStore'
|
||||
|
||||
const useStore = create(vanillaStore)
|
||||
```
|
||||
@ -258,7 +258,7 @@ const useStore = create(
|
||||
<summary>How to pipe middlewares</summary>
|
||||
|
||||
```js
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
import produce from 'immer'
|
||||
import pipe from 'ramda/es/pipe'
|
||||
|
||||
@ -309,7 +309,7 @@ const immer =
|
||||
You can persist your store's data using any kind of storage.
|
||||
|
||||
```jsx
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
import { persist } from 'zustand/middleware'
|
||||
|
||||
export const useStore = create(
|
||||
|
||||
14
readme.md
14
readme.md
@ -25,7 +25,7 @@ npm install zustand # or yarn add zustand
|
||||
Your store is a hook! You can put anything in it: primitives, objects, functions. State has to be updated immutably and the `set` function [merges state](./docs/guides/immutable-state-and-merging.md) to help it.
|
||||
|
||||
```jsx
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
|
||||
const useBearStore = create((set) => ({
|
||||
bears: 0,
|
||||
@ -87,7 +87,7 @@ const honey = useBearStore((state) => state.honey)
|
||||
If you want to construct a single object with multiple state-picks inside, similar to redux's mapStateToProps, you can tell zustand that you want the object to be diffed shallowly by passing the `shallow` equality function.
|
||||
|
||||
```jsx
|
||||
import shallow from 'zustand/shallow'
|
||||
import { shallow } from 'zustand/shallow'
|
||||
|
||||
// Object pick, re-renders the component when either state.nuts or state.honey change
|
||||
const { nuts, honey } = useBearStore(
|
||||
@ -220,7 +220,7 @@ const unsub5 = useDogStore.subscribe((state) => state.paw, console.log, {
|
||||
Zustand core can be imported and used without the React dependency. The only difference is that the create function does not return a hook, but the API utilities.
|
||||
|
||||
```jsx
|
||||
import createStore from 'zustand/vanilla'
|
||||
import { createStore } from 'zustand/vanilla'
|
||||
|
||||
const store = createStore(() => ({ ... }))
|
||||
const { getState, setState, subscribe } = store
|
||||
@ -232,7 +232,7 @@ You can use a vanilla store with `useStore` hook available since v4.
|
||||
|
||||
```jsx
|
||||
import { useStore } from 'zustand'
|
||||
import vanillaStore from './vanillaStore'
|
||||
import { vanillaStore } from './vanillaStore'
|
||||
|
||||
const useBoundStore = (selector) => useStore(vanillaStore, selector)
|
||||
```
|
||||
@ -309,7 +309,7 @@ const useBeeStore = create(
|
||||
You can persist your store's data using any kind of storage.
|
||||
|
||||
```jsx
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
import { persist, createJSONStorage } from 'zustand/middleware'
|
||||
|
||||
const useFishStore = create(
|
||||
@ -333,7 +333,7 @@ const useFishStore = create(
|
||||
Immer is available as middleware too.
|
||||
|
||||
```jsx
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
import { immer } from 'zustand/middleware/immer'
|
||||
|
||||
const useBeeStore = create(
|
||||
@ -482,7 +482,7 @@ const Component = () => {
|
||||
Basic typescript usage doesn't require anything special except for writing `create<State>()(...)` instead of `create(...)`...
|
||||
|
||||
```ts
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
import { devtools, persist } from 'zustand/middleware'
|
||||
|
||||
interface BearState {
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
export * from './vanilla'
|
||||
export * from './react'
|
||||
export { default as createStore } from './vanilla'
|
||||
export { default } from './react'
|
||||
|
||||
14
src/react.ts
14
src/react.ts
@ -4,7 +4,7 @@ import { useDebugValue } from 'react'
|
||||
// See: https://github.com/pmndrs/valtio/issues/452
|
||||
// The following is a workaround until ESM is supported.
|
||||
import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector'
|
||||
import createStore from './vanilla'
|
||||
import { createStore } from './vanilla'
|
||||
import type {
|
||||
Mutate,
|
||||
StateCreator,
|
||||
@ -84,7 +84,15 @@ const createImpl = <T>(createState: StateCreator<T, [], []>) => {
|
||||
return useBoundStore
|
||||
}
|
||||
|
||||
const create = (<T>(createState: StateCreator<T, [], []> | undefined) =>
|
||||
export const create = (<T>(createState: StateCreator<T, [], []> | undefined) =>
|
||||
createState ? createImpl(createState) : createImpl) as Create
|
||||
|
||||
export default create
|
||||
/**
|
||||
* @deprecated Use `import { create } from 'zustand'`
|
||||
*/
|
||||
export default ((createState: any) => {
|
||||
console.warn(
|
||||
"[DEPRECATED] default export is deprecated, instead import { create } from'zustand'"
|
||||
)
|
||||
return create(createState)
|
||||
}) as Create
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
function shallow<T>(objA: T, objB: T) {
|
||||
export function shallow<T>(objA: T, objB: T) {
|
||||
if (Object.is(objA, objB)) {
|
||||
return true
|
||||
}
|
||||
@ -48,4 +48,12 @@ function shallow<T>(objA: T, objB: T) {
|
||||
return true
|
||||
}
|
||||
|
||||
export default shallow
|
||||
/**
|
||||
* @deprecated Use `import { shallow } from 'zustand/shallow'`
|
||||
*/
|
||||
export default ((objA, objB) => {
|
||||
console.warn(
|
||||
"[DEPRECATED] default export is deprecated, instead import { shallow } from'zustand/shallow'"
|
||||
)
|
||||
return shallow(objA, objB)
|
||||
}) as typeof shallow
|
||||
|
||||
@ -102,10 +102,18 @@ const createStoreImpl: CreateStoreImpl = (createState) => {
|
||||
return api as any
|
||||
}
|
||||
|
||||
const createStore = ((createState) =>
|
||||
export const createStore = ((createState) =>
|
||||
createState ? createStoreImpl(createState) : createStoreImpl) as CreateStore
|
||||
|
||||
export default createStore
|
||||
/**
|
||||
* @deprecated Use `import { createStore } from ...`
|
||||
*/
|
||||
export default ((createState) => {
|
||||
console.warn(
|
||||
'[DEPRECATED] default export is deprecated, instead import { createStore } ...'
|
||||
)
|
||||
return createStore(createState)
|
||||
}) as CreateStore
|
||||
|
||||
// ---------------------------------------------------------
|
||||
|
||||
|
||||
@ -8,7 +8,8 @@ import {
|
||||
} from 'react'
|
||||
import { act, fireEvent, render } from '@testing-library/react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import create, { StoreApi } from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
import type { StoreApi } from 'zustand'
|
||||
|
||||
const consoleError = console.error
|
||||
afterEach(() => {
|
||||
|
||||
@ -7,7 +7,8 @@ import {
|
||||
useState,
|
||||
} from 'react'
|
||||
import { render } from '@testing-library/react'
|
||||
import create, { StoreApi } from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
import type { StoreApi } from 'zustand'
|
||||
import createContext from 'zustand/context'
|
||||
import { subscribeWithSelector } from 'zustand/middleware'
|
||||
|
||||
|
||||
@ -2,8 +2,8 @@ import { StoreApi } from 'zustand/vanilla'
|
||||
|
||||
const getImports = async () => {
|
||||
const { devtools } = await import('zustand/middleware')
|
||||
const create = (await import('zustand/vanilla')).default
|
||||
return { create, devtools }
|
||||
const { createStore } = await import('zustand/vanilla')
|
||||
return { createStore, devtools }
|
||||
}
|
||||
|
||||
type TupleOfEqualLengthH<
|
||||
@ -125,10 +125,10 @@ beforeEach(() => {
|
||||
})
|
||||
|
||||
it('connects to the extension by passing the options and initializes', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const options = { name: 'test', foo: 'bar' }
|
||||
const initialState = { count: 0 }
|
||||
create(devtools(() => initialState, { enabled: true, ...options }))
|
||||
createStore(devtools(() => initialState, { enabled: true, ...options }))
|
||||
|
||||
expect(extensionConnector.connect).toHaveBeenLastCalledWith(options)
|
||||
|
||||
@ -152,48 +152,48 @@ describe('If there is no extension installed...', () => {
|
||||
})
|
||||
|
||||
it('does not throw', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
expect(() => {
|
||||
create(devtools(() => ({ count: 0 })))
|
||||
createStore(devtools(() => ({ count: 0 })))
|
||||
}).not.toThrow()
|
||||
})
|
||||
|
||||
it('does not warn if not enabled', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
create(devtools(() => ({ count: 0 })))
|
||||
const { devtools, createStore } = await getImports()
|
||||
createStore(devtools(() => ({ count: 0 })))
|
||||
expect(console.warn).not.toBeCalled()
|
||||
})
|
||||
|
||||
it('[DEV-ONLY] warns if enabled in dev mode', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
__DEV__ = true
|
||||
create(devtools(() => ({ count: 0 }), { enabled: true }))
|
||||
createStore(devtools(() => ({ count: 0 }), { enabled: true }))
|
||||
expect(console.warn).toBeCalled()
|
||||
})
|
||||
|
||||
it('[PRD-ONLY] does not warn if not in dev env', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
__DEV__ = false
|
||||
create(devtools(() => ({ count: 0 })))
|
||||
createStore(devtools(() => ({ count: 0 })))
|
||||
expect(console.warn).not.toBeCalled()
|
||||
})
|
||||
|
||||
it('[PRD-ONLY] does not warn if not in dev env even if enabled', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
__DEV__ = false
|
||||
create(devtools(() => ({ count: 0 }), { enabled: true }))
|
||||
createStore(devtools(() => ({ count: 0 }), { enabled: true }))
|
||||
expect(console.warn).not.toBeCalled()
|
||||
})
|
||||
})
|
||||
|
||||
describe('When state changes...', () => {
|
||||
it("sends { type: setStateName || 'anonymous`, ...rest } as the action with current state", async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const options = {
|
||||
name: 'testOptionsName',
|
||||
enabled: true,
|
||||
}
|
||||
const api = create(devtools(() => ({ count: 0, foo: 'bar' }), options))
|
||||
const api = createStore(devtools(() => ({ count: 0, foo: 'bar' }), options))
|
||||
|
||||
api.setState({ count: 10 }, false, 'testSetStateName')
|
||||
const [connection] = getNamedConnectionApis(options.name)
|
||||
@ -222,9 +222,9 @@ describe('When state changes...', () => {
|
||||
describe('when it receives a message of type...', () => {
|
||||
describe('ACTION...', () => {
|
||||
it('does nothing', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const initialState = { count: 0 }
|
||||
const api = create(devtools(() => initialState, { enabled: true }))
|
||||
const api = createStore(devtools(() => initialState, { enabled: true }))
|
||||
const setState = jest.spyOn(api, 'setState')
|
||||
|
||||
const [subscriber] = getNamedConnectionSubscribers(undefined)
|
||||
@ -238,9 +238,9 @@ describe('when it receives a message of type...', () => {
|
||||
})
|
||||
|
||||
it('unless action type is __setState', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const initialState = { count: 0 }
|
||||
const api = create(devtools(() => initialState, { enabled: true }))
|
||||
const api = createStore(devtools(() => initialState, { enabled: true }))
|
||||
|
||||
const [connectionSubscriber] = getNamedConnectionSubscribers(undefined)
|
||||
connectionSubscriber({
|
||||
@ -252,9 +252,9 @@ describe('when it receives a message of type...', () => {
|
||||
})
|
||||
|
||||
it('does nothing even if there is `api.dispatch`', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const initialState = { count: 0 }
|
||||
const api = create(devtools(() => initialState, { enabled: true }))
|
||||
const api = createStore(devtools(() => initialState, { enabled: true }))
|
||||
;(api as any).dispatch = jest.fn()
|
||||
const setState = jest.spyOn(api, 'setState')
|
||||
|
||||
@ -270,9 +270,9 @@ describe('when it receives a message of type...', () => {
|
||||
})
|
||||
|
||||
it('dispatches with `api.dispatch` when `api.dispatchFromDevtools` is set to true', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const initialState = { count: 0 }
|
||||
const api = create(devtools(() => initialState, { enabled: true }))
|
||||
const api = createStore(devtools(() => initialState, { enabled: true }))
|
||||
;(api as any).dispatch = jest.fn()
|
||||
;(api as any).dispatchFromDevtools = true
|
||||
const setState = jest.spyOn(api, 'setState')
|
||||
@ -291,9 +291,9 @@ describe('when it receives a message of type...', () => {
|
||||
})
|
||||
|
||||
it('does not throw for unsupported payload', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const initialState = { count: 0 }
|
||||
const api = create(devtools(() => initialState, { enabled: true }))
|
||||
const api = createStore(devtools(() => initialState, { enabled: true }))
|
||||
;(api as any).dispatch = jest.fn()
|
||||
;(api as any).dispatchFromDevtools = true
|
||||
const setState = jest.spyOn(api, 'setState')
|
||||
@ -340,9 +340,9 @@ describe('when it receives a message of type...', () => {
|
||||
|
||||
describe('DISPATCH and payload of type...', () => {
|
||||
it('RESET, it inits with initial state', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const initialState = { count: 0 }
|
||||
const api = create(devtools(() => initialState, { enabled: true }))
|
||||
const api = createStore(devtools(() => initialState, { enabled: true }))
|
||||
api.setState({ count: 1 })
|
||||
|
||||
const [connection] = getNamedConnectionApis(undefined)
|
||||
@ -359,9 +359,9 @@ describe('when it receives a message of type...', () => {
|
||||
})
|
||||
|
||||
it('COMMIT, it inits with current state', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const initialState = { count: 0 }
|
||||
const api = create(devtools(() => initialState, { enabled: true }))
|
||||
const api = createStore(devtools(() => initialState, { enabled: true }))
|
||||
api.setState({ count: 2 })
|
||||
const currentState = api.getState()
|
||||
|
||||
@ -379,9 +379,9 @@ describe('when it receives a message of type...', () => {
|
||||
|
||||
describe('ROLLBACK...', () => {
|
||||
it('it updates state without recording and inits with `message.state`', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const initialState = { count: 0, increment: () => {} }
|
||||
const api = create(devtools(() => initialState, { enabled: true }))
|
||||
const api = createStore(devtools(() => initialState, { enabled: true }))
|
||||
const newState = { foo: 'bar' }
|
||||
|
||||
const [connection] = getNamedConnectionApis(undefined)
|
||||
@ -402,10 +402,10 @@ describe('when it receives a message of type...', () => {
|
||||
})
|
||||
|
||||
it('does not throw for unparsable `message.state`', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const increment = () => {}
|
||||
const initialState = { count: 0, increment }
|
||||
const api = create(devtools(() => initialState, { enabled: true }))
|
||||
const api = createStore(devtools(() => initialState, { enabled: true }))
|
||||
const originalConsoleError = console.error
|
||||
console.error = jest.fn()
|
||||
|
||||
@ -440,9 +440,9 @@ describe('when it receives a message of type...', () => {
|
||||
describe('JUMP_TO_STATE...', () => {
|
||||
const increment = () => {}
|
||||
it('it updates state without recording with `message.state`', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const initialState = { count: 0, increment }
|
||||
const api = create(devtools(() => initialState, { enabled: true }))
|
||||
const api = createStore(devtools(() => initialState, { enabled: true }))
|
||||
const newState = { foo: 'bar' }
|
||||
|
||||
const [connection] = getNamedConnectionApis(undefined)
|
||||
@ -458,9 +458,9 @@ describe('when it receives a message of type...', () => {
|
||||
})
|
||||
|
||||
it('does not throw for unparsable `message.state`', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const initialState = { count: 0, increment: () => {} }
|
||||
const api = create(devtools(() => initialState, { enabled: true }))
|
||||
const api = createStore(devtools(() => initialState, { enabled: true }))
|
||||
const originalConsoleError = console.error
|
||||
console.error = jest.fn()
|
||||
|
||||
@ -492,9 +492,9 @@ describe('when it receives a message of type...', () => {
|
||||
|
||||
describe('JUMP_TO_ACTION...', () => {
|
||||
it('it updates state without recording with `message.state`', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const initialState = { count: 0, increment: () => {} }
|
||||
const api = create(devtools(() => initialState, { enabled: true }))
|
||||
const api = createStore(devtools(() => initialState, { enabled: true }))
|
||||
const newState = { foo: 'bar' }
|
||||
|
||||
const [connection] = getNamedConnectionApis(undefined)
|
||||
@ -510,10 +510,10 @@ describe('when it receives a message of type...', () => {
|
||||
})
|
||||
|
||||
it('does not throw for unparsable `message.state`', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const increment = () => {}
|
||||
const initialState = { count: 0, increment }
|
||||
const api = create(devtools(() => initialState, { enabled: true }))
|
||||
const api = createStore(devtools(() => initialState, { enabled: true }))
|
||||
const originalConsoleError = console.error
|
||||
console.error = jest.fn()
|
||||
|
||||
@ -544,9 +544,9 @@ describe('when it receives a message of type...', () => {
|
||||
})
|
||||
|
||||
it('IMPORT_STATE, it updates state without recording and inits the last computedState', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const initialState = { count: 0, increment: () => {} }
|
||||
const api = create(devtools(() => initialState, { enabled: true }))
|
||||
const api = createStore(devtools(() => initialState, { enabled: true }))
|
||||
const nextLiftedState = {
|
||||
computedStates: [{ state: { count: 4 } }, { state: { count: 5 } }],
|
||||
}
|
||||
@ -569,8 +569,8 @@ describe('when it receives a message of type...', () => {
|
||||
})
|
||||
|
||||
it('PAUSE_RECORDING, it toggles the sending of actions', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const api = create(devtools(() => ({ count: 0 }), { enabled: true }))
|
||||
const { devtools, createStore } = await getImports()
|
||||
const api = createStore(devtools(() => ({ count: 0 }), { enabled: true }))
|
||||
|
||||
api.setState({ count: 1 }, false, 'increment')
|
||||
const [connection] = getNamedConnectionApis(undefined)
|
||||
@ -613,8 +613,8 @@ describe('with redux middleware', () => {
|
||||
|
||||
it('works as expected', async () => {
|
||||
const { devtools, redux } = await import('zustand/middleware')
|
||||
const create = (await import('zustand/vanilla')).default
|
||||
api = create(
|
||||
const { createStore } = await import('zustand/vanilla')
|
||||
api = createStore(
|
||||
devtools(
|
||||
redux(
|
||||
(
|
||||
@ -660,32 +660,32 @@ describe('with redux middleware', () => {
|
||||
})
|
||||
|
||||
it('works in non-browser env', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const originalWindow = global.window
|
||||
global.window = undefined as any
|
||||
|
||||
expect(() => {
|
||||
create(devtools(() => ({ count: 0 }), { enabled: true }))
|
||||
createStore(devtools(() => ({ count: 0 }), { enabled: true }))
|
||||
}).not.toThrow()
|
||||
|
||||
global.window = originalWindow
|
||||
})
|
||||
|
||||
it('works in react native env', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const originalWindow = global.window
|
||||
global.window = {} as any
|
||||
|
||||
expect(() => {
|
||||
create(devtools(() => ({ count: 0 }), { enabled: true }))
|
||||
createStore(devtools(() => ({ count: 0 }), { enabled: true }))
|
||||
}).not.toThrow()
|
||||
|
||||
global.window = originalWindow
|
||||
})
|
||||
|
||||
it('preserves isRecording after setting from devtools', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const api = create(devtools(() => ({ count: 0 }), { enabled: true }))
|
||||
const { devtools, createStore } = await getImports()
|
||||
const api = createStore(devtools(() => ({ count: 0 }), { enabled: true }))
|
||||
const [connection] = getNamedConnectionApis(undefined)
|
||||
const [connectionSubscriber] = getNamedConnectionSubscribers(undefined)
|
||||
connectionSubscriber({
|
||||
@ -716,28 +716,28 @@ it('preserves isRecording after setting from devtools', async () => {
|
||||
|
||||
describe('when redux connection was called on multiple stores with `name` undefined in `devtools` options', () => {
|
||||
it('should create separate connection for each devtools store with .connect call', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const options1 = { foo: 'bar', testConnectionId: 'asdf' }
|
||||
const options2 = { foo: 'barr', testConnectionId: '123asd' }
|
||||
const initialState1 = { count: 0 }
|
||||
const initialState2 = { count1: 1 }
|
||||
|
||||
create(devtools(() => initialState1, { enabled: true, ...options1 }))
|
||||
create(devtools(() => initialState2, { enabled: true, ...options2 }))
|
||||
createStore(devtools(() => initialState1, { enabled: true, ...options1 }))
|
||||
createStore(devtools(() => initialState2, { enabled: true, ...options2 }))
|
||||
|
||||
expect(extensionConnector.connect).toHaveBeenNthCalledWith(1, options1)
|
||||
expect(extensionConnector.connect).toHaveBeenNthCalledWith(2, options2)
|
||||
})
|
||||
|
||||
it('should call .init on each different connection object', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const options1 = { foo: 'bar', testConnectionId: 'asdf' }
|
||||
const options2 = { foo: 'barr', testConnectionId: '123asd' }
|
||||
const initialState1 = { count: 0 }
|
||||
const initialState2 = { count1: 1 }
|
||||
|
||||
create(devtools(() => initialState1, { enabled: true, ...options1 }))
|
||||
create(devtools(() => initialState2, { enabled: true, ...options2 }))
|
||||
createStore(devtools(() => initialState1, { enabled: true, ...options1 }))
|
||||
createStore(devtools(() => initialState2, { enabled: true, ...options2 }))
|
||||
|
||||
const [conn1, conn2] = getUnnamedConnectionApis(
|
||||
options1.testConnectionId,
|
||||
@ -749,14 +749,14 @@ describe('when redux connection was called on multiple stores with `name` undefi
|
||||
|
||||
describe('when `store` property was provided in `devtools` call in options', () => {
|
||||
it('should create single connection for all indernal calls of .connect and `store` is not passed to .connect', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const options1 = { store: 'store1123', foo: 'bar1' }
|
||||
const options2 = { store: 'store2313132', foo: 'bar2' }
|
||||
const initialState1 = { count: 0 }
|
||||
const initialState2 = { count1: 1 }
|
||||
|
||||
create(devtools(() => initialState1, { enabled: true, ...options1 }))
|
||||
create(devtools(() => initialState2, { enabled: true, ...options2 }))
|
||||
createStore(devtools(() => initialState1, { enabled: true, ...options1 }))
|
||||
createStore(devtools(() => initialState2, { enabled: true, ...options2 }))
|
||||
|
||||
expect(extensionConnector.connect).toHaveBeenCalledTimes(1)
|
||||
expect(extensionConnector.connect).toHaveBeenCalledWith({
|
||||
@ -765,14 +765,14 @@ describe('when redux connection was called on multiple stores with `name` undefi
|
||||
})
|
||||
|
||||
it('should call `.init` on single connection with combined states after each `create(devtools` call', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const options1 = { store: 'store12' }
|
||||
const options2 = { store: 'store21' }
|
||||
const initialState1 = { count1: 0 }
|
||||
const initialState2 = { count2: 1 }
|
||||
|
||||
create(devtools(() => initialState1, { enabled: true, ...options1 }))
|
||||
create(devtools(() => initialState2, { enabled: true, ...options2 }))
|
||||
createStore(devtools(() => initialState1, { enabled: true, ...options1 }))
|
||||
createStore(devtools(() => initialState2, { enabled: true, ...options2 }))
|
||||
|
||||
expect(extensionConnector.connect).toHaveBeenCalledTimes(1)
|
||||
const [connection] = getNamedConnectionApis(undefined)
|
||||
@ -791,15 +791,15 @@ describe('when redux connection was called on multiple stores with `name` undefi
|
||||
describe('when redux connection was called on multiple stores with `name` provided in `devtools` options', () => {
|
||||
describe('when same `name` is provided to all stores in devtools options', () => {
|
||||
it('should call .connect of redux extension with `name` that was passed from `devtools` options', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const connectionName = 'test'
|
||||
const options1 = { name: connectionName, store: 'store1123', foo: 'bar1' }
|
||||
const options2 = { name: connectionName, store: 'store1414', foo: 'bar1' }
|
||||
const initialState1 = { count: 0 }
|
||||
const initialState2 = { count: 2 }
|
||||
|
||||
create(devtools(() => initialState1, { enabled: true, ...options1 }))
|
||||
create(devtools(() => initialState2, { enabled: true, ...options2 }))
|
||||
createStore(devtools(() => initialState1, { enabled: true, ...options1 }))
|
||||
createStore(devtools(() => initialState2, { enabled: true, ...options2 }))
|
||||
|
||||
expect(extensionConnector.connect).toHaveBeenCalledTimes(1)
|
||||
expect(extensionConnector.connect).toHaveBeenCalledWith({
|
||||
@ -811,7 +811,7 @@ describe('when redux connection was called on multiple stores with `name` provid
|
||||
|
||||
describe('when different `name` props were provided for different group of stores in devtools options', () => {
|
||||
it('should call .connect of redux extension with `name` that was passed from `devtools` options', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const connectionNameGroup1 = 'test1'
|
||||
const connectionNameGroup2 = 'test2'
|
||||
const options1 = {
|
||||
@ -839,10 +839,10 @@ describe('when redux connection was called on multiple stores with `name` provid
|
||||
const initialState3 = { count: 5 }
|
||||
const initialState4 = { count: 7 }
|
||||
|
||||
create(devtools(() => initialState1, { enabled: true, ...options1 }))
|
||||
create(devtools(() => initialState2, { enabled: true, ...options2 }))
|
||||
create(devtools(() => initialState3, { enabled: true, ...options3 }))
|
||||
create(devtools(() => initialState4, { enabled: true, ...options4 }))
|
||||
createStore(devtools(() => initialState1, { enabled: true, ...options1 }))
|
||||
createStore(devtools(() => initialState2, { enabled: true, ...options2 }))
|
||||
createStore(devtools(() => initialState3, { enabled: true, ...options3 }))
|
||||
createStore(devtools(() => initialState4, { enabled: true, ...options4 }))
|
||||
|
||||
expect(extensionConnector.connect).toHaveBeenCalledTimes(2)
|
||||
expect(extensionConnector.connect).toHaveBeenNthCalledWith(1, {
|
||||
@ -856,7 +856,7 @@ describe('when redux connection was called on multiple stores with `name` provid
|
||||
})
|
||||
|
||||
it('should call `.init` on single connection with combined states after each `create(devtools` call', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const connectionNameGroup1 = 'test1'
|
||||
const connectionNameGroup2 = 'test2'
|
||||
const options1 = {
|
||||
@ -884,10 +884,10 @@ describe('when redux connection was called on multiple stores with `name` provid
|
||||
const initialState3 = { count: 5 }
|
||||
const initialState4 = { count: 7 }
|
||||
|
||||
create(devtools(() => initialState1, { enabled: true, ...options1 }))
|
||||
create(devtools(() => initialState2, { enabled: true, ...options2 }))
|
||||
create(devtools(() => initialState3, { enabled: true, ...options3 }))
|
||||
create(devtools(() => initialState4, { enabled: true, ...options4 }))
|
||||
createStore(devtools(() => initialState1, { enabled: true, ...options1 }))
|
||||
createStore(devtools(() => initialState2, { enabled: true, ...options2 }))
|
||||
createStore(devtools(() => initialState3, { enabled: true, ...options3 }))
|
||||
createStore(devtools(() => initialState4, { enabled: true, ...options4 }))
|
||||
|
||||
expect(extensionConnector.connect).toHaveBeenCalledTimes(2)
|
||||
const [connection1, connection2] = getNamedConnectionApis(
|
||||
@ -913,13 +913,15 @@ describe('when redux connection was called on multiple stores with `name` provid
|
||||
})
|
||||
|
||||
it('preserves isRecording after setting from devtools on proper connection subscriber', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const options1 = { name: 'asdf1' }
|
||||
const options2 = { name: 'asdf2' }
|
||||
const api1 = create(
|
||||
const api1 = createStore(
|
||||
devtools(() => ({ count: 0 }), { enabled: true, ...options1 })
|
||||
)
|
||||
create(devtools(() => ({ count: 0 }), { enabled: true, ...options2 }))
|
||||
createStore(
|
||||
devtools(() => ({ count: 0 }), { enabled: true, ...options2 })
|
||||
)
|
||||
const connections = getNamedConnectionApis(options1.name, options2.name)
|
||||
const [connectionSubscriber] = getNamedConnectionSubscribers(
|
||||
options1.name
|
||||
@ -953,10 +955,10 @@ describe('when redux connection was called on multiple stores with `name` provid
|
||||
|
||||
it('works as expected', async () => {
|
||||
const { devtools, redux } = await import('zustand/middleware')
|
||||
const create = (await import('zustand/vanilla')).default
|
||||
const { createStore } = await import('zustand/vanilla')
|
||||
const options1 = { testConnectionId: 'asdf' }
|
||||
const options2 = { testConnectionId: '2f' }
|
||||
api1 = create(
|
||||
api1 = createStore(
|
||||
devtools(
|
||||
redux(
|
||||
(
|
||||
@ -970,7 +972,7 @@ describe('when redux connection was called on multiple stores with `name` provid
|
||||
{ enabled: true, ...options1 }
|
||||
)
|
||||
)
|
||||
api2 = create(
|
||||
api2 = createStore(
|
||||
devtools(
|
||||
redux(
|
||||
(
|
||||
@ -1028,7 +1030,7 @@ describe('when redux connection was called on multiple stores with `name` provid
|
||||
describe('when create devtools was called multiple times with `name` option undefined', () => {
|
||||
describe('When state changes...', () => {
|
||||
it("sends { type: setStateName || 'anonymous`, ...rest } as the action with current state, isolated from other connections", async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const options1 = {
|
||||
enabled: true,
|
||||
testConnectionId: '123',
|
||||
@ -1041,9 +1043,11 @@ describe('when create devtools was called multiple times with `name` option unde
|
||||
enabled: true,
|
||||
testConnectionId: '412',
|
||||
}
|
||||
const api1 = create(devtools(() => ({ count: 0, foo: 'bar' }), options1))
|
||||
create(devtools(() => ({ count: 0, foo: 'bar1' }), options2))
|
||||
create(devtools(() => ({ count: 0, foo: 'bar2' }), options3))
|
||||
const api1 = createStore(
|
||||
devtools(() => ({ count: 0, foo: 'bar' }), options1)
|
||||
)
|
||||
createStore(devtools(() => ({ count: 0, foo: 'bar1' }), options2))
|
||||
createStore(devtools(() => ({ count: 0, foo: 'bar2' }), options3))
|
||||
|
||||
api1.setState({ count: 10 }, false, 'testSetStateName')
|
||||
const [connection1, connection2, connection3] = getUnnamedConnectionApis(
|
||||
@ -1082,26 +1086,26 @@ describe('when create devtools was called multiple times with `name` option unde
|
||||
describe('when it receives a message of type...', () => {
|
||||
describe('ACTION...', () => {
|
||||
it('does nothing, connections isolated from each other', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const options1 = { testConnectionId: '123' }
|
||||
const options2 = { testConnectionId: '231' }
|
||||
const options3 = { testConnectionId: '4342' }
|
||||
const initialState1 = { count: 0 }
|
||||
const initialState2 = { count: 2 }
|
||||
const initialState3 = { count: 3 }
|
||||
const api1 = create(
|
||||
const api1 = createStore(
|
||||
devtools(() => initialState1, {
|
||||
enabled: true,
|
||||
...options1,
|
||||
})
|
||||
)
|
||||
const api2 = create(
|
||||
const api2 = createStore(
|
||||
devtools(() => initialState2, {
|
||||
enabled: true,
|
||||
...options2,
|
||||
})
|
||||
)
|
||||
const api3 = create(
|
||||
const api3 = createStore(
|
||||
devtools(() => initialState3, {
|
||||
enabled: true,
|
||||
...options3,
|
||||
@ -1128,20 +1132,20 @@ describe('when create devtools was called multiple times with `name` option unde
|
||||
})
|
||||
|
||||
it('unless action type is __setState, connections isolated from each other', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const options1 = { testConnectionId: 'asdf' }
|
||||
const options2 = { testConnectionId: '2f' }
|
||||
const options3 = { testConnectionId: 'd2e' }
|
||||
const initialState1 = { count: 0 }
|
||||
const initialState2 = { count: 2 }
|
||||
const initialState3 = { count: 5 }
|
||||
const api1 = create(
|
||||
const api1 = createStore(
|
||||
devtools(() => initialState1, { enabled: true, ...options1 })
|
||||
)
|
||||
const api2 = create(
|
||||
const api2 = createStore(
|
||||
devtools(() => initialState2, { enabled: true, ...options2 })
|
||||
)
|
||||
const api3 = create(
|
||||
const api3 = createStore(
|
||||
devtools(() => initialState3, { enabled: true, ...options3 })
|
||||
)
|
||||
|
||||
@ -1159,20 +1163,20 @@ describe('when create devtools was called multiple times with `name` option unde
|
||||
})
|
||||
|
||||
it('does nothing even if there is `api.dispatch`, connections isolated from each other', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const options1 = { testConnectionId: 'asdf' }
|
||||
const options2 = { testConnectionId: '2f' }
|
||||
const options3 = { testConnectionId: 'd2e' }
|
||||
const initialState1 = { count: 0 }
|
||||
const initialState2 = { count: 2 }
|
||||
const initialState3 = { count: 5 }
|
||||
const api1 = create(
|
||||
const api1 = createStore(
|
||||
devtools(() => initialState1, { enabled: true, ...options1 })
|
||||
)
|
||||
const api2 = create(
|
||||
const api2 = createStore(
|
||||
devtools(() => initialState2, { enabled: true, ...options2 })
|
||||
)
|
||||
const api3 = create(
|
||||
const api3 = createStore(
|
||||
devtools(() => initialState3, { enabled: true, ...options3 })
|
||||
)
|
||||
;(api1 as any).dispatch = jest.fn()
|
||||
@ -1205,20 +1209,20 @@ describe('when create devtools was called multiple times with `name` option unde
|
||||
})
|
||||
|
||||
it('dispatches with `api.dispatch` when `api.dispatchFromDevtools` is set to true, connections are isolated from each other', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const options1 = { testConnectionId: 'asdf' }
|
||||
const options2 = { testConnectionId: '2f' }
|
||||
const options3 = { testConnectionId: 'd2e' }
|
||||
const initialState1 = { count: 0 }
|
||||
const initialState2 = { count: 2 }
|
||||
const initialState3 = { count: 5 }
|
||||
const api1 = create(
|
||||
const api1 = createStore(
|
||||
devtools(() => initialState1, { enabled: true, ...options1 })
|
||||
)
|
||||
const api2 = create(
|
||||
const api2 = createStore(
|
||||
devtools(() => initialState2, { enabled: true, ...options2 })
|
||||
)
|
||||
const api3 = create(
|
||||
const api3 = createStore(
|
||||
devtools(() => initialState3, { enabled: true, ...options3 })
|
||||
)
|
||||
;(api1 as any).dispatch = jest.fn()
|
||||
@ -1260,20 +1264,20 @@ describe('when create devtools was called multiple times with `name` option unde
|
||||
})
|
||||
|
||||
it('does not throw for unsupported payload, connections are isolated from each other', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const options1 = { testConnectionId: 'asdf' }
|
||||
const options2 = { testConnectionId: '2f' }
|
||||
const options3 = { testConnectionId: 'd2e' }
|
||||
const initialState1 = { count: 0 }
|
||||
const initialState2 = { count: 2 }
|
||||
const initialState3 = { count: 5 }
|
||||
const api1 = create(
|
||||
const api1 = createStore(
|
||||
devtools(() => initialState1, { enabled: true, ...options1 })
|
||||
)
|
||||
const api2 = create(
|
||||
const api2 = createStore(
|
||||
devtools(() => initialState2, { enabled: true, ...options2 })
|
||||
)
|
||||
const api3 = create(
|
||||
const api3 = createStore(
|
||||
devtools(() => initialState3, { enabled: true, ...options3 })
|
||||
)
|
||||
;(api1 as any).dispatch = jest.fn()
|
||||
@ -1398,20 +1402,20 @@ describe('when create devtools was called multiple times with `name` option unde
|
||||
|
||||
describe('DISPATCH and payload of type...', () => {
|
||||
it('RESET, it inits with initial state, connections are isolated from each other', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const options1 = { testConnectionId: 'asdf' }
|
||||
const options2 = { testConnectionId: '2f' }
|
||||
const options3 = { testConnectionId: 'd2e' }
|
||||
const initialState1 = { count: 0 }
|
||||
const initialState2 = { count: 2 }
|
||||
const initialState3 = { count: 5 }
|
||||
const api1 = create(
|
||||
const api1 = createStore(
|
||||
devtools(() => initialState1, { enabled: true, ...options1 })
|
||||
)
|
||||
const api2 = create(
|
||||
const api2 = createStore(
|
||||
devtools(() => initialState2, { enabled: true, ...options2 })
|
||||
)
|
||||
const api3 = create(
|
||||
const api3 = createStore(
|
||||
devtools(() => initialState3, { enabled: true, ...options3 })
|
||||
)
|
||||
api1.setState({ count: 1 })
|
||||
@ -1446,20 +1450,20 @@ describe('when create devtools was called multiple times with `name` option unde
|
||||
})
|
||||
|
||||
it('COMMIT, it inits with current state, connections are isolated from each other', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const options1 = { testConnectionId: 'asdf' }
|
||||
const options2 = { testConnectionId: '2f' }
|
||||
const options3 = { testConnectionId: 'd2e' }
|
||||
const initialState1 = { count: 0 }
|
||||
const initialState2 = { count: 2 }
|
||||
const initialState3 = { count: 5 }
|
||||
const api1 = create(
|
||||
const api1 = createStore(
|
||||
devtools(() => initialState1, { enabled: true, ...options1 })
|
||||
)
|
||||
const api2 = create(
|
||||
const api2 = createStore(
|
||||
devtools(() => initialState2, { enabled: true, ...options2 })
|
||||
)
|
||||
const api3 = create(
|
||||
const api3 = createStore(
|
||||
devtools(() => initialState3, { enabled: true, ...options3 })
|
||||
)
|
||||
api1.setState({ count: 1 })
|
||||
@ -1496,20 +1500,20 @@ describe('when create devtools was called multiple times with `name` option unde
|
||||
|
||||
describe('ROLLBACK...', () => {
|
||||
it('it updates state without recording and inits with `message.state, connections are isolated from each other`', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const options1 = { testConnectionId: 'asdf' }
|
||||
const options2 = { testConnectionId: '2f' }
|
||||
const options3 = { testConnectionId: 'd2e' }
|
||||
const initialState1 = { count: 0, increment: () => {} }
|
||||
const initialState2 = { count: 2, increment: () => {} }
|
||||
const initialState3 = { count: 5, increment: () => {} }
|
||||
const api1 = create(
|
||||
const api1 = createStore(
|
||||
devtools(() => initialState1, { enabled: true, ...options1 })
|
||||
)
|
||||
const api2 = create(
|
||||
const api2 = createStore(
|
||||
devtools(() => initialState2, { enabled: true, ...options2 })
|
||||
)
|
||||
const api3 = create(
|
||||
const api3 = createStore(
|
||||
devtools(() => initialState3, { enabled: true, ...options3 })
|
||||
)
|
||||
const newState1 = { foo: 'bar1' }
|
||||
@ -1576,7 +1580,7 @@ describe('when create devtools was called multiple times with `name` option unde
|
||||
})
|
||||
|
||||
it('does not throw for unparsable `message.state`, connections are isolated from each other', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const increment1 = () => {}
|
||||
const increment2 = () => {}
|
||||
const increment3 = () => {}
|
||||
@ -1586,13 +1590,13 @@ describe('when create devtools was called multiple times with `name` option unde
|
||||
const initialState1 = { count: 0, increment: increment1 }
|
||||
const initialState2 = { count: 2, increment: increment2 }
|
||||
const initialState3 = { count: 5, increment: increment3 }
|
||||
const api1 = create(
|
||||
const api1 = createStore(
|
||||
devtools(() => initialState1, { enabled: true, ...options1 })
|
||||
)
|
||||
const api2 = create(
|
||||
const api2 = createStore(
|
||||
devtools(() => initialState2, { enabled: true, ...options2 })
|
||||
)
|
||||
const api3 = create(
|
||||
const api3 = createStore(
|
||||
devtools(() => initialState3, { enabled: true, ...options3 })
|
||||
)
|
||||
const originalConsoleError = console.error
|
||||
@ -1678,20 +1682,20 @@ describe('when create devtools was called multiple times with `name` option unde
|
||||
const increment3 = () => {}
|
||||
|
||||
it('it updates state without recording with `message.state`, connections are isolated from each other', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const options1 = { testConnectionId: 'asdf' }
|
||||
const options2 = { testConnectionId: '2f' }
|
||||
const options3 = { testConnectionId: 'd2e' }
|
||||
const initialState1 = { count: 0, increment: increment1 }
|
||||
const initialState2 = { count: 2, increment: increment2 }
|
||||
const initialState3 = { count: 5, increment: increment3 }
|
||||
const api1 = create(
|
||||
const api1 = createStore(
|
||||
devtools(() => initialState1, { enabled: true, ...options1 })
|
||||
)
|
||||
const api2 = create(
|
||||
const api2 = createStore(
|
||||
devtools(() => initialState2, { enabled: true, ...options2 })
|
||||
)
|
||||
const api3 = create(
|
||||
const api3 = createStore(
|
||||
devtools(() => initialState3, { enabled: true, ...options3 })
|
||||
)
|
||||
const newState1 = { foo: 'bar1' }
|
||||
@ -1745,20 +1749,20 @@ describe('when create devtools was called multiple times with `name` option unde
|
||||
})
|
||||
|
||||
it('does not throw for unparsable `message.state`, connections are isolated from each other', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const options1 = { testConnectionId: 'asdf' }
|
||||
const options2 = { testConnectionId: '2f' }
|
||||
const options3 = { testConnectionId: 'd2e' }
|
||||
const initialState1 = { count: 0, increment: increment1 }
|
||||
const initialState2 = { count: 2, increment: increment2 }
|
||||
const initialState3 = { count: 5, increment: increment3 }
|
||||
const api1 = create(
|
||||
const api1 = createStore(
|
||||
devtools(() => initialState1, { enabled: true, ...options1 })
|
||||
)
|
||||
const api2 = create(
|
||||
const api2 = createStore(
|
||||
devtools(() => initialState2, { enabled: true, ...options2 })
|
||||
)
|
||||
const api3 = create(
|
||||
const api3 = createStore(
|
||||
devtools(() => initialState3, { enabled: true, ...options3 })
|
||||
)
|
||||
const originalConsoleError = console.error
|
||||
@ -1841,20 +1845,20 @@ describe('when create devtools was called multiple times with `name` option unde
|
||||
const increment3 = () => {}
|
||||
|
||||
it('it updates state without recording with `message.state`, connections are isolated from each other', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const options1 = { testConnectionId: 'asdf' }
|
||||
const options2 = { testConnectionId: '2f' }
|
||||
const options3 = { testConnectionId: 'd2e' }
|
||||
const initialState1 = { count: 0, increment: increment1 }
|
||||
const initialState2 = { count: 2, increment: increment2 }
|
||||
const initialState3 = { count: 5, increment: increment3 }
|
||||
const api1 = create(
|
||||
const api1 = createStore(
|
||||
devtools(() => initialState1, { enabled: true, ...options1 })
|
||||
)
|
||||
const api2 = create(
|
||||
const api2 = createStore(
|
||||
devtools(() => initialState2, { enabled: true, ...options2 })
|
||||
)
|
||||
const api3 = create(
|
||||
const api3 = createStore(
|
||||
devtools(() => initialState3, { enabled: true, ...options3 })
|
||||
)
|
||||
const newState1 = { foo: 'bar1' }
|
||||
@ -1909,20 +1913,20 @@ describe('when create devtools was called multiple times with `name` option unde
|
||||
})
|
||||
|
||||
it('does not throw for unparsable `message.state`, connections are isolated from each other', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const options1 = { testConnectionId: 'asdf' }
|
||||
const options2 = { testConnectionId: '2f' }
|
||||
const options3 = { testConnectionId: 'd2e' }
|
||||
const initialState1 = { count: 0, increment: increment1 }
|
||||
const initialState2 = { count: 2, increment: increment2 }
|
||||
const initialState3 = { count: 5, increment: increment3 }
|
||||
const api1 = create(
|
||||
const api1 = createStore(
|
||||
devtools(() => initialState1, { enabled: true, ...options1 })
|
||||
)
|
||||
const api2 = create(
|
||||
const api2 = createStore(
|
||||
devtools(() => initialState2, { enabled: true, ...options2 })
|
||||
)
|
||||
const api3 = create(
|
||||
const api3 = createStore(
|
||||
devtools(() => initialState3, { enabled: true, ...options3 })
|
||||
)
|
||||
const originalConsoleError = console.error
|
||||
@ -1998,20 +2002,20 @@ describe('when create devtools was called multiple times with `name` option unde
|
||||
})
|
||||
|
||||
it('IMPORT_STATE, it updates state without recording and inits the last computedState, connections are isolated from each other', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const options1 = { testConnectionId: 'asdf' }
|
||||
const options2 = { testConnectionId: '2f' }
|
||||
const options3 = { testConnectionId: 'd2e' }
|
||||
const initialState1 = { count: 0, increment: increment1 }
|
||||
const initialState2 = { count: 2, increment: increment2 }
|
||||
const initialState3 = { count: 5, increment: increment3 }
|
||||
const api1 = create(
|
||||
const api1 = createStore(
|
||||
devtools(() => initialState1, { enabled: true, ...options1 })
|
||||
)
|
||||
const api2 = create(
|
||||
const api2 = createStore(
|
||||
devtools(() => initialState2, { enabled: true, ...options2 })
|
||||
)
|
||||
const api3 = create(
|
||||
const api3 = createStore(
|
||||
devtools(() => initialState3, { enabled: true, ...options3 })
|
||||
)
|
||||
const nextLiftedState1 = {
|
||||
@ -2090,17 +2094,17 @@ describe('when create devtools was called multiple times with `name` option unde
|
||||
})
|
||||
|
||||
it('PAUSE_RECORDING, it toggles the sending of actions, connections are isolated from each other', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const options1 = { testConnectionId: 'asdf' }
|
||||
const options2 = { testConnectionId: '2f' }
|
||||
const options3 = { testConnectionId: 'd2e' }
|
||||
const api1 = create(
|
||||
const api1 = createStore(
|
||||
devtools(() => ({ count: 0 }), { enabled: true, ...options1 })
|
||||
)
|
||||
const api2 = create(
|
||||
const api2 = createStore(
|
||||
devtools(() => ({ count: 2 }), { enabled: true, ...options2 })
|
||||
)
|
||||
const api3 = create(
|
||||
const api3 = createStore(
|
||||
devtools(() => ({ count: 4 }), { enabled: true, ...options3 })
|
||||
)
|
||||
|
||||
@ -2204,13 +2208,15 @@ describe('when create devtools was called multiple times with `name` and `store`
|
||||
describe('when `type` was provided in store state methods as option', () => {
|
||||
describe('When state changes...', () => {
|
||||
it("sends { type: setStateName || 'anonymous`, ...rest } as the action with current state", async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const options = {
|
||||
name: 'testOptionsName',
|
||||
store: 'someStore',
|
||||
enabled: true,
|
||||
}
|
||||
const api = create(devtools(() => ({ count: 0, foo: 'bar' }), options))
|
||||
const api = createStore(
|
||||
devtools(() => ({ count: 0, foo: 'bar' }), options)
|
||||
)
|
||||
|
||||
const testStateActionType = 'testSetStateName'
|
||||
|
||||
@ -2241,32 +2247,32 @@ describe('when create devtools was called multiple times with `name` and `store`
|
||||
describe('when it receives a message of type...', () => {
|
||||
describe('ACTION...', () => {
|
||||
it('does nothing, connections isolated from each other', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const options1 = { testConnectionId: '123', store: 'store1' }
|
||||
const options2 = { testConnectionId: '231', store: 'store2' }
|
||||
const initialState1 = { count: 0 }
|
||||
const initialState2 = { count: 2 }
|
||||
const initialState3 = { count: 5 }
|
||||
const initialState4 = { count: 6 }
|
||||
const api1 = create(
|
||||
const api1 = createStore(
|
||||
devtools(() => initialState1, {
|
||||
enabled: true,
|
||||
...options1,
|
||||
})
|
||||
)
|
||||
const api2 = create(
|
||||
const api2 = createStore(
|
||||
devtools(() => initialState2, {
|
||||
enabled: true,
|
||||
...options1,
|
||||
})
|
||||
)
|
||||
const api3 = create(
|
||||
const api3 = createStore(
|
||||
devtools(() => initialState3, {
|
||||
enabled: true,
|
||||
...options2,
|
||||
})
|
||||
)
|
||||
const api4 = create(
|
||||
const api4 = createStore(
|
||||
devtools(() => initialState4, {
|
||||
enabled: true,
|
||||
...options2,
|
||||
@ -2296,7 +2302,7 @@ describe('when create devtools was called multiple times with `name` and `store`
|
||||
})
|
||||
|
||||
it('unless action type is __setState, connections isolated from each other', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const name1 = 'name1'
|
||||
const name2 = 'name2'
|
||||
const store1 = 'someStore1'
|
||||
@ -2313,10 +2319,10 @@ describe('when create devtools was called multiple times with `name` and `store`
|
||||
}
|
||||
const initialState1 = { count: 0 }
|
||||
const initialState2 = { count: 2 }
|
||||
const api1 = create(
|
||||
const api1 = createStore(
|
||||
devtools(() => initialState1, { enabled: true, ...options1 })
|
||||
)
|
||||
const api2 = create(
|
||||
const api2 = createStore(
|
||||
devtools(() => initialState2, { enabled: true, ...options2 })
|
||||
)
|
||||
const originalConsoleError = console.error
|
||||
@ -2353,7 +2359,7 @@ describe('when create devtools was called multiple times with `name` and `store`
|
||||
})
|
||||
|
||||
it('does nothing even if there is `api.dispatch`, connections isolated from each other', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const name1 = 'name1'
|
||||
const name2 = 'name2'
|
||||
const store1 = 'someStore1'
|
||||
@ -2370,10 +2376,10 @@ describe('when create devtools was called multiple times with `name` and `store`
|
||||
}
|
||||
const initialState1 = { count: 0 }
|
||||
const initialState2 = { count: 2 }
|
||||
const api1 = create(
|
||||
const api1 = createStore(
|
||||
devtools(() => initialState1, { enabled: true, ...options1 })
|
||||
)
|
||||
const api2 = create(
|
||||
const api2 = createStore(
|
||||
devtools(() => initialState2, { enabled: true, ...options2 })
|
||||
)
|
||||
;(api1 as any).dispatch = jest.fn()
|
||||
@ -2400,7 +2406,7 @@ describe('when create devtools was called multiple times with `name` and `store`
|
||||
})
|
||||
|
||||
it('dispatches with `api.dispatch` when `api.dispatchFromDevtools` is set to true, connections are isolated from each other', async () => {
|
||||
const { devtools, create } = await getImports()
|
||||
const { devtools, createStore } = await getImports()
|
||||
const name1 = 'name1'
|
||||
const name2 = 'name2'
|
||||
const store1 = 'someStore1'
|
||||
@ -2417,10 +2423,10 @@ describe('when create devtools was called multiple times with `name` and `store`
|
||||
}
|
||||
const initialState1 = { count: 0 }
|
||||
const initialState2 = { count: 2 }
|
||||
const api1 = create(
|
||||
const api1 = createStore(
|
||||
devtools(() => initialState1, { enabled: true, ...options1 })
|
||||
)
|
||||
const api2 = create(
|
||||
const api2 = createStore(
|
||||
devtools(() => initialState2, { enabled: true, ...options2 })
|
||||
)
|
||||
;(api1 as any).dispatch = jest.fn()
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import create, { StoreApi } from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
import type { StoreApi } from 'zustand'
|
||||
import {
|
||||
combine,
|
||||
devtools,
|
||||
@ -7,7 +8,7 @@ import {
|
||||
subscribeWithSelector,
|
||||
} from 'zustand/middleware'
|
||||
import { immer } from 'zustand/middleware/immer'
|
||||
import createVanilla from 'zustand/vanilla'
|
||||
import { createStore } from 'zustand/vanilla'
|
||||
|
||||
type CounterState = {
|
||||
count: number
|
||||
@ -63,7 +64,7 @@ describe('counter state spec (single middleware)', () => {
|
||||
}
|
||||
TestComponent
|
||||
|
||||
const _testSubtyping: StoreApi<object> = createVanilla(
|
||||
const _testSubtyping: StoreApi<object> = createStore(
|
||||
immer(() => ({ count: 0 }))
|
||||
)
|
||||
})
|
||||
@ -91,7 +92,7 @@ describe('counter state spec (single middleware)', () => {
|
||||
}
|
||||
TestComponent
|
||||
|
||||
const _testSubtyping: StoreApi<object> = createVanilla(
|
||||
const _testSubtyping: StoreApi<object> = createStore(
|
||||
redux((x) => x, { count: 0 })
|
||||
)
|
||||
})
|
||||
@ -119,7 +120,7 @@ describe('counter state spec (single middleware)', () => {
|
||||
}
|
||||
TestComponent
|
||||
|
||||
const _testSubtyping: StoreApi<object> = createVanilla(
|
||||
const _testSubtyping: StoreApi<object> = createStore(
|
||||
devtools(() => ({ count: 0 }))
|
||||
)
|
||||
})
|
||||
@ -146,7 +147,7 @@ describe('counter state spec (single middleware)', () => {
|
||||
}
|
||||
TestComponent
|
||||
|
||||
const _testSubtyping: StoreApi<object> = createVanilla(
|
||||
const _testSubtyping: StoreApi<object> = createStore(
|
||||
subscribeWithSelector(() => ({ count: 0 }))
|
||||
)
|
||||
})
|
||||
@ -168,7 +169,7 @@ describe('counter state spec (single middleware)', () => {
|
||||
}
|
||||
TestComponent
|
||||
|
||||
const _testSubtyping: StoreApi<object> = createVanilla(
|
||||
const _testSubtyping: StoreApi<object> = createStore(
|
||||
combine({ count: 0 }, () => ({}))
|
||||
)
|
||||
})
|
||||
@ -195,7 +196,7 @@ describe('counter state spec (single middleware)', () => {
|
||||
}
|
||||
TestComponent
|
||||
|
||||
const _testSubtyping: StoreApi<object> = createVanilla(
|
||||
const _testSubtyping: StoreApi<object> = createStore(
|
||||
persist(() => ({ count: 0 }), { name: 'prefix' })
|
||||
)
|
||||
})
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { StrictMode, useEffect } from 'react'
|
||||
import { act, render, waitFor } from '@testing-library/react'
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
import { persist } from 'zustand/middleware'
|
||||
|
||||
const createPersistantStore = (initialValue: string | null) => {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
import { persist } from 'zustand/middleware'
|
||||
|
||||
const createPersistentStore = (initialValue: string | null) => {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import create from 'zustand'
|
||||
import shallow from 'zustand/shallow'
|
||||
import { create } from 'zustand'
|
||||
import { shallow } from 'zustand/shallow'
|
||||
|
||||
describe('shallow', () => {
|
||||
it('compares primitive values', () => {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
import { subscribeWithSelector } from 'zustand/middleware'
|
||||
|
||||
describe('subscribe()', () => {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import create from 'zustand'
|
||||
import { create } from 'zustand'
|
||||
import type {
|
||||
StateCreator,
|
||||
StoreApi,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user