muya 2.0.0-beta.2 → 2.0.0

package/{packages/core → src}/__tests__/bench.test.tsx

@@ -8,7 +8,7 @@
 import { act, renderHook } from '@testing-library/react-hooks'
 import { useStore, create as zustand } from 'zustand'
 import { useEffect, useState } from 'react'
-import { use } from '../use'
+import { useValue } from '../use-value'
 import { atom, useAtom } from 'jotai'
 import { create } from '../create'
 
@@ -48,7 +48,7 @@ describe('benchmarks comparison measure', () => {
         const { result, resolvePromise } = renderPerfHook(
           () => {
             reRendersBefore()
-            return use(state)
+            return useValue(state)
           },
           (data) => data,
           count - 1,
@@ -139,7 +139,7 @@ describe('benchmarks comparison measure', () => {
         const { result, resolvePromise } = renderPerfHook(
           () => {
             reRendersBefore()
-            return use(state)
+            return useValue(state)
           },
           (data) => data,
           count - 1,
@@ -159,108 +159,3 @@ describe('benchmarks comparison measure', () => {
     })
   }
 })
-
-describe('benchmarks comparison between others', () => {
-  const reRendersBefore = jest.fn()
-
-  beforeEach(() => {
-    jest.clearAllMocks()
-  })
-  // const count = 10000
-
-  const counts = [100]
-  for (const count of counts) {
-    describe(`Count ${count}`, () => {
-      it(`should benchmark jotai ${count}`, async () => {
-        const state = atom(1)
-        const start = performance.now()
-        const { result, waitFor } = renderHook(() => {
-          reRendersBefore()
-          return useAtom(state)
-        })
-
-        for (let index = 0; index < count; index++) {
-          act(() => {
-            result.current[1](index)
-          })
-        }
-
-        await waitFor(() => {
-          expect(result.current[0]).toBe(count - 1)
-        })
-
-        const end = performance.now()
-        console.log('Time', end - start)
-        console.log('Renders', reRendersBefore.mock.calls.length)
-        // expect(reRendersBefore).toHaveBeenCalledTimes(3)
-      })
-      it(`should benchmark zustand ${count}`, async () => {
-        const state = zustand((_set) => ({ state: 1 }))
-        const start = performance.now()
-        const { result, waitFor } = renderHook(() => {
-          reRendersBefore()
-          return useStore(state)
-        })
-
-        for (let index = 0; index < count; index++) {
-          act(() => {
-            state.setState(index)
-          })
-        }
-
-        await waitFor(() => {
-          expect(result.current).toBe(count - 1)
-        })
-
-        const end = performance.now()
-        console.log('Time', end - start)
-        console.log('Renders', reRendersBefore.mock.calls.length)
-      })
-
-      it(`should benchmark react ${count}`, async () => {
-        const start = performance.now()
-        const { result, waitFor } = renderHook(() => {
-          reRendersBefore()
-          return useState(1)
-        })
-
-        for (let index = 0; index < count; index++) {
-          act(() => {
-            result.current[1](index)
-          })
-        }
-
-        await waitFor(() => {
-          expect(result.current[0]).toBe(count - 1)
-        })
-
-        const end = performance.now()
-        console.log('Time', end - start)
-        console.log('Renders', reRendersBefore.mock.calls.length)
-      })
-    })
-    it(`should benchmark ${count} muya`, async () => {
-      const state = create(1)
-      const start = performance.now()
-      const { result, waitFor } = renderHook(() => {
-        reRendersBefore()
-        return use(state)
-      })
-
-      for (let index = 0; index < count; index++) {
-        act(() => {
-          state.set(index)
-        })
-      }
-
-      await waitFor(() => {
-        expect(result.current).toBe(count - 1)
-      })
-
-      const end = performance.now()
-      console.log('Time', end - start)
-      console.log('Renders', reRendersBefore.mock.calls.length)
-      // expect(reRendersBefore).toHaveBeenCalledTimes(2)
-    })
-  }
-})

package/src/__tests__/create.test.tsx

@@ -0,0 +1,159 @@
+import { create } from '../create'
+import { waitFor } from '@testing-library/react'
+import { longPromise } from './test-utils'
+
+describe('create', () => {
+  it('should get basic value states', async () => {
+    const state1 = create(1)
+    const state2 = create(2)
+    expect(state1.get()).toBe(1)
+    expect(state2.get()).toBe(2)
+
+    state1.set(2)
+    state2.set(3)
+
+    await waitFor(() => {
+      expect(state1.get()).toBe(2)
+      expect(state2.get()).toBe(3)
+    })
+  })
+  it('should check if value is subscribed to the state', async () => {
+    const state = create(1)
+    const listener = jest.fn()
+    state.listen(listener)
+    state.set(2)
+    await waitFor(() => {
+      expect(listener).toHaveBeenCalledWith(2)
+    })
+  })
+
+  it('should check if value is unsubscribed from the state', async () => {
+    const state = create(1)
+    const listener = jest.fn()
+    const unsubscribe = state.listen(listener)
+    unsubscribe()
+    state.set(2)
+    await waitFor(() => {
+      expect(listener).not.toHaveBeenCalled()
+    })
+  })
+  it('should check change part of state, but is not equal', async () => {
+    const state = create({ count: 1, anotherCount: 1 }, (previous, next) => previous.anotherCount === next.anotherCount)
+    const listener = jest.fn()
+    state.listen(listener)
+    state.set((previous) => ({ ...previous, count: previous.count + 1 }))
+    await waitFor(() => {
+      expect(listener).not.toHaveBeenCalled()
+    })
+  })
+  it('should check change part of state,  is not equal', async () => {
+    const state = create({ count: 1, anotherCount: 1 }, (previous, next) => previous.count === next.count)
+    const listener = jest.fn()
+    state.listen(listener)
+    state.set((previous) => ({ ...previous, count: previous.count + 1 }))
+    await waitFor(() => {
+      expect(listener).toHaveBeenCalledWith({ count: 2, anotherCount: 1 })
+    })
+  })
+
+  it('should initialize state with a function', () => {
+    const initialValue = jest.fn(() => 10)
+    const state = create(initialValue)
+    expect(initialValue).toHaveBeenCalled()
+    expect(state.get()).toBe(10)
+  })
+
+  it('should handle asynchronous state updates', async () => {
+    const state = create(0)
+    const listener = jest.fn()
+    state.listen(listener)
+    setTimeout(() => {
+      state.set(1)
+    }, 100)
+    await waitFor(() => {
+      expect(state.get()).toBe(1)
+      expect(listener).toHaveBeenCalledWith(1)
+    })
+  })
+
+  it('should notify multiple listeners', async () => {
+    const state = create('initial')
+    const listener1 = jest.fn()
+    const listener2 = jest.fn()
+    state.listen(listener1)
+    state.listen(listener2)
+    state.set('updated')
+    await waitFor(() => {
+      expect(listener1).toHaveBeenCalledWith('updated')
+      expect(listener2).toHaveBeenCalledWith('updated')
+    })
+  })
+
+  it('should not update if isEqual returns true', async () => {
+    const state = create(1, () => true)
+    const listener = jest.fn()
+    state.listen(listener)
+    state.set(2)
+    await waitFor(() => {
+      expect(listener).not.toHaveBeenCalled()
+    })
+  })
+
+  it('should clear state and listeners on destroy', async () => {
+    const state = create(1)
+    const listener = jest.fn()
+    state.listen(listener)
+    state.destroy()
+    state.set(2)
+    await waitFor(() => {})
+    expect(state.get()).toBe(1)
+    expect(listener).not.toHaveBeenCalledWith(2)
+  })
+
+  it('should create new get select state', async () => {
+    const state = create({ count: 1 })
+    const select = state.select((slice) => slice.count)
+    expect(select.get()).toBe(1)
+
+    state.set({ count: 2 })
+    await waitFor(() => {
+      expect(select.get()).toBe(2)
+    })
+  })
+
+  it('should create state with async value', async () => {
+    const state = create(() => longPromise(100))
+    await waitFor(() => {
+      expect(state.get()).toBe(0)
+    })
+    state.set(1)
+    await waitFor(() => {
+      expect(state.get()).toBe(1)
+    })
+  })
+  it('should create state with async value but will be cancelled by set value before it will resolve', async () => {
+    const state = create(() => longPromise(100))
+    state.set(2)
+    await waitFor(() => {
+      expect(state.get()).toBe(2)
+    })
+  })
+  it('should handle async select', async () => {
+    const state = create(0)
+    const asyncState = state.select(async (s) => {
+      await longPromise(100)
+      return s + 1
+    })
+    const listener = jest.fn()
+    asyncState.listen(listener)
+    await waitFor(() => {
+      expect(asyncState.get()).toBe(1)
+      expect(listener).toHaveBeenCalledWith(1)
+    })
+    state.set(1)
+    await waitFor(() => {
+      expect(asyncState.get()).toBe(2)
+      expect(listener).toHaveBeenCalledWith(2)
+    })
+  })
+})

package/src/__tests__/scheduler.test.tsx

@@ -0,0 +1,52 @@
+import { waitFor } from '@testing-library/react'
+import { createScheduler } from '../scheduler'
+
+describe('scheduler', () => {
+  it('should test scheduler by id', async () => {
+    const scheduler = createScheduler()
+
+    const id = 1
+    const value = 2
+    const callback = jest.fn()
+    scheduler.add(id, {
+      onFinish: callback,
+    })
+    scheduler.schedule(id, value)
+    await waitFor(() => {
+      expect(callback).toHaveBeenCalled()
+    })
+  })
+  it('should test scheduler with multiple ids', async () => {
+    const ids = [1, 2, 3]
+    const scheduler = createScheduler()
+    const callbacks: unknown[] = []
+    for (const id of ids) {
+      const callback = jest.fn()
+      scheduler.add(id, {
+        onFinish: callback,
+      })
+      callbacks.push(callback)
+    }
+    scheduler.schedule(1, 2)
+    await waitFor(() => {
+      expect(callbacks[0]).toHaveBeenCalled()
+      expect(callbacks[1]).not.toHaveBeenCalled()
+      expect(callbacks[2]).not.toHaveBeenCalled()
+    })
+    jest.clearAllMocks()
+    scheduler.schedule(2, 2)
+    await waitFor(() => {
+      expect(callbacks[0]).not.toHaveBeenCalled()
+      expect(callbacks[1]).toHaveBeenCalled()
+      expect(callbacks[2]).not.toHaveBeenCalled()
+    })
+
+    jest.clearAllMocks()
+    scheduler.schedule(3, 2)
+    await waitFor(() => {
+      expect(callbacks[0]).not.toHaveBeenCalled()
+      expect(callbacks[1]).not.toHaveBeenCalled()
+      expect(callbacks[2]).toHaveBeenCalled()
+    })
+  })
+})

package/src/__tests__/select.test.tsx

@@ -0,0 +1,127 @@
+import { create } from '../create'
+import { select } from '../select'
+import { waitFor } from '@testing-library/react'
+import { longPromise } from './test-utils'
+
+describe('select', () => {
+  it('should derive state from a single dependency', async () => {
+    const state = create(1)
+    const selectedState = select([state], (value) => value * 2)
+    expect(selectedState.get()).toBe(2)
+    state.set(2)
+    await waitFor(() => {})
+    expect(selectedState.get()).toBe(4)
+  })
+
+  it('should derive state from multiple dependencies', async () => {
+    const state1 = create(1)
+    const state2 = create(2)
+    const selectedState = select([state1, state2], (a, b) => a + b)
+    expect(selectedState.get()).toBe(3)
+    state1.set(2)
+    await waitFor(() => {})
+    expect(selectedState.get()).toBe(4)
+    state2.set(3)
+    await waitFor(() => {})
+    expect(selectedState.get()).toBe(5)
+  })
+
+  it('should notify listeners when derived state changes', async () => {
+    const state = create(1)
+    const selectedState = select([state], (value) => value * 2)
+    const listener = jest.fn()
+    selectedState.listen(listener)
+    state.set(2)
+    await waitFor(() => {
+      expect(selectedState.get()).toBe(4)
+      expect(listener).toHaveBeenCalledWith(4)
+    })
+  })
+
+  it('should not notify listeners if isEqual returns true', async () => {
+    const state = create(1)
+    const selectedState = select(
+      [state],
+      (value) => value * 2,
+      () => true,
+    )
+    const listener = jest.fn()
+    selectedState.listen(listener)
+    state.set(2)
+    await waitFor(() => {
+      expect(listener).not.toHaveBeenCalled()
+    })
+  })
+
+  it('should destroy select state properly', async () => {
+    const state = create(1)
+    const selectedState = select([state], (value) => value * 2)
+    const listener = jest.fn()
+    selectedState.listen(listener)
+    selectedState.destroy()
+    state.set(2)
+    await waitFor(() => {})
+    // there are no listeners to notify, so it return 4 as value is computed again, but internally it's destroyed and undefined
+    // so it works as expected
+    expect(selectedState.get()).toBe(4)
+    expect(listener).not.toHaveBeenCalled()
+  })
+  it('should handle async updates', async () => {
+    const state1 = create(1)
+    const state2 = create(2)
+    const selectedState = select([state1, state2], async (a, b) => {
+      await longPromise()
+      return a + b
+    })
+    const listener = jest.fn()
+    selectedState.listen(listener)
+    state1.set(2)
+    state2.set(3)
+    await waitFor(() => {
+      expect(selectedState.get()).toBe(5)
+      expect(listener).toHaveBeenCalledWith(5)
+    })
+  })
+  it('should handle async updates with async state', async () => {
+    const state = create(longPromise(100))
+    const selectedState = select([state], async (value) => {
+      await longPromise(100)
+      return (await value) + 1
+    })
+    const listener = jest.fn()
+    selectedState.listen(listener)
+    await waitFor(() => {
+      expect(selectedState.get()).toBe(1)
+      expect(listener).toHaveBeenCalledWith(1)
+    })
+  })
+  it('should handle sync state updates when one of par is changed', async () => {
+    const state1Atom = create(0)
+    const state2Atom = create(0)
+    const state3Atom = create(0)
+
+    const sumState = select([state1Atom, state2Atom, state3Atom], (a, b, c) => a + b + c)
+
+    const listener = jest.fn()
+    sumState.listen(listener)
+    expect(sumState.get()).toBe(0)
+
+    state1Atom.set(1)
+    await waitFor(() => {
+      expect(sumState.get()).toBe(1)
+      expect(listener).toHaveBeenCalledWith(1)
+    })
+
+    state2Atom.set(1)
+    await waitFor(() => {
+      expect(sumState.get()).toBe(2)
+      expect(listener).toHaveBeenCalledWith(2)
+    })
+
+    state3Atom.set(1)
+    await waitFor(() => {
+      expect(sumState.get()).toBe(3)
+      expect(listener).toHaveBeenCalledWith(3)
+    })
+  })
+})

package/src/__tests__/use-value.test.tsx

@@ -0,0 +1,78 @@
+import { renderHook, act } from '@testing-library/react-hooks'
+import { create } from '../create'
+import { useValue } from '../use-value'
+import { waitFor } from '@testing-library/react'
+
+describe('useValue', () => {
+  it('should get the initial state value', () => {
+    const state = create(1)
+    const { result } = renderHook(() => useValue(state))
+    expect(result.current).toBe(1)
+  })
+
+  it('should get the initial state value', () => {
+    const state = create(1)
+    const { result } = renderHook(() => state())
+    expect(result.current).toBe(1)
+  })
+
+  it('should update when the state changes', async () => {
+    const state = create(1)
+    const { result } = renderHook(() => useValue(state))
+    act(() => {
+      state.set(2)
+    })
+    await waitFor(() => {
+      expect(result.current).toBe(2)
+    })
+  })
+
+  it('should use a selector function', () => {
+    const state = create({ count: 1 })
+    const { result } = renderHook(() => useValue(state, (s) => s.count))
+    expect(result.current).toBe(1)
+  })
+
+  it('should handle errors thrown from state', () => {
+    const error = new Error('Test error')
+    const state = create(() => {
+      throw error
+    })
+    const { result } = renderHook(() => useValue(state))
+    expect(result.error).toBe(error)
+  })
+
+  it('should handle promises returned from state suspense', async () => {
+    const promise = Promise.resolve(1)
+    const state = create(() => promise)
+    const renders = jest.fn()
+    const { result } = renderHook(() => {
+      renders()
+      return useValue(state)
+    })
+    await waitFor(() => {})
+    expect(result.current).toBe(1)
+    expect(renders).toHaveBeenCalledTimes(2)
+  })
+
+  it('should unsubscribe on unmount', async () => {
+    const state = create(1)
+    const renders = jest.fn()
+    const { unmount } = renderHook(() => {
+      renders()
+      const value = useValue(state)
+      return value
+    })
+    act(() => {
+      state.set(2)
+    })
+    await waitFor(() => {})
+    expect(renders).toHaveBeenCalledTimes(2)
+    unmount()
+    act(() => {
+      state.set(3)
+    })
+    await waitFor(() => {})
+    expect(renders).toHaveBeenCalledTimes(2)
+  })
+})

package/src/create-state.ts

@@ -0,0 +1,50 @@
+import { select } from './select'
+import type { GetState, SetValue, State } from './types'
+import { useValue } from './use-value'
+import { createEmitter } from './utils/create-emitter'
+import { isEqualBase } from './utils/is'
+
+interface GetStateOptions<T> {
+  readonly get: () => T
+  readonly set?: (value: SetValue<T>) => void
+  readonly destroy: () => void
+}
+
+let stateId = 0
+function getStateId() {
+  return stateId++
+}
+
+type FullState<T> = GetStateOptions<T>['set'] extends undefined ? GetState<T> : State<T>
+/**
+ * This is just utility function to create state base data
+ */
+export function createState<T>(options: GetStateOptions<T>): FullState<T> {
+  const { get, destroy, set } = options
+  const isSet = !!set
+
+  const state: FullState<T> = function (selector) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useValue(state, selector)
+  }
+  state.isSet = isSet as true
+  state.id = getStateId()
+  state.emitter = createEmitter<T>(get)
+  state.destroy = destroy
+  state.listen = function (listener) {
+    return this.emitter.subscribe(() => {
+      listener(get())
+    })
+  }
+  state.withName = function (name) {
+    this.stateName = name
+    return this
+  }
+  state.select = function (selector, isSelectorEqual = isEqualBase) {
+    return select([state], selector, isSelectorEqual)
+  }
+  state.get = get
+  state.set = set as State<T>['set']
+
+  return state
+}

package/src/create.ts

@@ -0,0 +1,67 @@
+import { canUpdate, handleAsyncUpdate } from './utils/common'
+import { isEqualBase, isFunction, isSetValueFunction, isUndefined } from './utils/is'
+import type { Cache, DefaultValue, IsEqual, SetValue, State } from './types'
+import { createScheduler } from './scheduler'
+import { subscribeToDevelopmentTools } from './debug/development-tools'
+import { createState } from './create-state'
+
+export const stateScheduler = createScheduler()
+
+/**
+ * Create state from a default value.
+ */
+export function create<T>(initialValue: DefaultValue<T>, isEqual: IsEqual<T> = isEqualBase): State<T> {
+  const cache: Cache<T> = {}
+
+  function getValue(): T {
+    try {
+      if (isUndefined(cache.current)) {
+        const value = isFunction(initialValue) ? initialValue() : initialValue
+        const resolvedValue = handleAsyncUpdate(cache, state.emitter.emit, value)
+        cache.current = resolvedValue
+      }
+      return cache.current
+    } catch (error) {
+      cache.current = error as T
+    }
+    return cache.current
+  }
+
+  function setValue(value: SetValue<T>) {
+    if (cache.abortController) {
+      cache.abortController.abort()
+    }
+
+    const previous = getValue()
+    const newValue = isSetValueFunction(value) ? value(previous) : value
+    const resolvedValue = handleAsyncUpdate(cache, state.emitter.emit, newValue)
+    cache.current = resolvedValue
+  }
+
+  const state = createState<T>({
+    get: getValue,
+    destroy() {
+      getValue()
+      clearScheduler()
+      state.emitter.clear()
+      cache.current = undefined
+    },
+    set(value: SetValue<T>) {
+      stateScheduler.schedule(state.id, value)
+    },
+  })
+
+  const clearScheduler = stateScheduler.add(state.id, {
+    onFinish() {
+      cache.current = getValue()
+      if (!canUpdate(cache, isEqual)) {
+        return
+      }
+      state.emitter.emit()
+    },
+    onResolveItem: setValue,
+  })
+
+  subscribeToDevelopmentTools(state)
+  return state
+}