muya 1.1.0 → 2.0.0-beta.1

package/packages/core/__tests__/bench.test.tsx

@@ -0,0 +1,261 @@
+/* eslint-disable unicorn/consistent-function-scoping */
+/* eslint-disable no-console */
+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 { atom, useAtom } from 'jotai'
+import { create } from '../create'
+
+function renderPerfHook<T>(hook: () => T, getValue: (data: T) => number, toBe: number) {
+  let onResolve = (_value: number) => {}
+  const resolvePromise = new Promise<number>((resolve) => {
+    onResolve = resolve
+  })
+  const start = performance.now()
+  const { result, waitFor } = renderHook(() => {
+    const data = hook()
+    const count = getValue(data)
+    useEffect(() => {
+      if (count === toBe) {
+        const end = performance.now()
+        onResolve(end - start)
+      }
+    }, [count])
+    return data
+  })
+  return { result, waitFor, resolvePromise }
+}
+
+describe('benchmarks comparison measure', () => {
+  const reRendersBefore = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+  const counts = [1000, 10_000]
+  for (const count of counts) {
+    describe(`Count ${count}`, () => {
+      it(`should benchmark ${count} muya first run - idk slow`, async () => {
+        const state = create(1)
+        // let count = 0
+
+        const { result, resolvePromise } = renderPerfHook(
+          () => {
+            reRendersBefore()
+            return use(state)
+          },
+          (data) => data,
+          count - 1,
+        )
+
+        for (let index = 0; index < count; index++) {
+          act(() => {
+            state.set(index)
+          })
+        }
+
+        const time = await resolvePromise
+        expect(result.current).toBe(count - 1)
+        console.log('Time', time)
+        console.log('Renders', reRendersBefore.mock.calls.length)
+      })
+      it(`should benchmark jotai ${count}`, async () => {
+        const state = atom(1)
+
+        const { result, resolvePromise } = renderPerfHook(
+          () => {
+            reRendersBefore()
+            return useAtom(state)
+          },
+          (data) => data[0],
+          count - 1,
+        )
+
+        for (let index = 0; index < count; index++) {
+          act(() => {
+            result.current[1](index)
+          })
+        }
+
+        const time = await resolvePromise
+        expect(result.current[0]).toBe(count - 1)
+        console.log('Time', time)
+        console.log('Renders', reRendersBefore.mock.calls.length)
+      })
+      it(`should benchmark zustand ${count}`, async () => {
+        const state = zustand((_set) => ({ state: 1 }))
+        const { result, resolvePromise } = renderPerfHook(
+          () => {
+            reRendersBefore()
+            return useStore(state)
+          },
+          (data) => data as number,
+          count - 1,
+        )
+
+        for (let index = 0; index < count; index++) {
+          act(() => {
+            state.setState(index)
+          })
+        }
+
+        const time = await resolvePromise
+        expect(result.current).toBe(count - 1)
+        console.log('Time', time)
+        console.log('Renders', reRendersBefore.mock.calls.length)
+      })
+
+      it(`should benchmark react ${count}`, async () => {
+        const { result, resolvePromise } = renderPerfHook(
+          () => {
+            reRendersBefore()
+            return useState(1)
+          },
+          (data) => data[0],
+          count - 1,
+        )
+
+        for (let index = 0; index < count; index++) {
+          act(() => {
+            result.current[1](index)
+          })
+        }
+
+        const time = await resolvePromise
+        expect(result.current[0]).toBe(count - 1)
+        console.log('Time', time)
+        console.log('Renders', reRendersBefore.mock.calls.length)
+      })
+      it(`should benchmark ${count} muya`, async () => {
+        const state = create(1)
+        // let count = 0
+
+        const { result, resolvePromise } = renderPerfHook(
+          () => {
+            reRendersBefore()
+            return use(state)
+          },
+          (data) => data,
+          count - 1,
+        )
+
+        for (let index = 0; index < count; index++) {
+          act(() => {
+            state.set(index)
+          })
+        }
+
+        const time = await resolvePromise
+        expect(result.current).toBe(count - 1)
+        console.log('Time', time)
+        console.log('Renders', reRendersBefore.mock.calls.length)
+      })
+    })
+  }
+})
+
+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/packages/core/__tests__/create-async.test.ts

@@ -0,0 +1,88 @@
+import { create } from '../create'
+import { waitFor } from '@testing-library/react'
+import { longPromise } from './test-utils'
+import { isPromise } from '../utils/is'
+import { subscriber } from '../subscriber'
+
+describe('create', () => {
+  it('should subscribe to context and notified it with parameters', async () => {
+    const state1 = create(1)
+    const state2 = create(2)
+
+    function derivedNested() {
+      return state1() + state2()
+    }
+    async function derived(plus: number) {
+      return state1() + state2() + derivedNested() + plus
+    }
+
+    let updatesCounter = 0
+    const sub = subscriber(() => derived(10))
+    expect(isPromise(sub.emitter.getSnapshot())).toBe(true)
+    sub.listen(async () => {
+      updatesCounter++
+    })
+    expect(updatesCounter).toBe(0)
+    // check if there is not maximum call stack
+    expect(await sub()).toBe(16)
+
+    state1.set(2)
+    //
+    await waitFor(async () => {})
+    expect(await sub()).toBe(18)
+
+    expect(updatesCounter).toBe(4)
+  })
+
+  it('should async subscribe to context and notified it', async () => {
+    const state1 = create(1)
+    const state2 = create(Promise.resolve(2))
+
+    async function derivedNested() {
+      await longPromise()
+      return state1() + (await state2())
+    }
+    async function derived() {
+      return state1() + (await state2()) + (await derivedNested())
+    }
+
+    let updatesCounter = 0
+
+    const sub = subscriber(derived)
+
+    sub.listen(() => {
+      updatesCounter++
+    })
+
+    // check if there is not maximum call stack
+    sub()
+
+    // check if not assigned multiple times, but only once
+    expect(state1.emitter.getSize()).toBe(1)
+    expect(state2.emitter.getSize()).toBe(1)
+    expect(sub.emitter.getSize()).toBe(1)
+    state1.set(2)
+
+    await waitFor(async () => {
+      expect(await sub()).toBe(8)
+      expect(updatesCounter).toBe(5)
+    })
+
+    state2.set(3)
+
+    await waitFor(async () => {
+      expect(await sub()).toBe(10)
+      expect(updatesCounter).toBe(10)
+    })
+
+    expect(state1.emitter.getSize()).toBe(1)
+    expect(state2.emitter.getSize()).toBe(1)
+    expect(sub.emitter.getSize()).toBe(1)
+
+    sub.destroy()
+
+    expect(state1.emitter.getSize()).toBe(0)
+    expect(state2.emitter.getSize()).toBe(0)
+    expect(sub.emitter.getSize()).toBe(0)
+  })
+})

package/packages/core/__tests__/create.test.tsx

@@ -0,0 +1,107 @@
+import { create } from '../create'
+import { waitFor } from '@testing-library/react'
+import { subscriber } from '../subscriber'
+
+describe('create', () => {
+  it('should get basic value states', async () => {
+    const state1 = create(1)
+    const state2 = create(2)
+    expect(state1()).toBe(1)
+    expect(state2()).toBe(2)
+
+    state1.set(2)
+    state2.set(3)
+
+    await waitFor(() => {
+      expect(state1()).toBe(2)
+      expect(state2()).toBe(3)
+    })
+  })
+  it('should get basic and derived value', async () => {
+    const state1 = create(1)
+    const state2 = create(2)
+
+    function derived1() {
+      return state1() + state2()
+    }
+
+    expect(state1()).toBe(1)
+    expect(state2()).toBe(2)
+    expect(derived1()).toBe(3)
+
+    state1.set(2)
+    state2.set(3)
+
+    await waitFor(() => {
+      expect(state1()).toBe(2)
+      expect(state2()).toBe(3)
+      expect(derived1()).toBe(5)
+    })
+  })
+  it('should subscribe to context and notified it', async () => {
+    const state1 = create(1)
+    const state2 = create(2)
+
+    function derivedNested() {
+      return state1() + state2()
+    }
+    function derived() {
+      return state1() + state2() + derivedNested()
+    }
+
+    let updatesCounter = 0
+
+    const sub = subscriber(derived)
+
+    sub.listen(() => {
+      updatesCounter++
+    })
+
+    // check if there is not maximum call stack
+    sub()
+    sub()
+    sub()
+
+    // check if not assigned multiple times, but only once
+    expect(state1.emitter.getSize()).toBe(1)
+    expect(state2.emitter.getSize()).toBe(1)
+    expect(sub.emitter.getSize()).toBe(1)
+    expect(sub.emitter.getSnapshot()).toBe(6)
+    state1.set(2)
+
+    await waitFor(() => {
+      expect(sub()).toBe(8)
+      expect(updatesCounter).toBe(1)
+    })
+
+    state2.set(3)
+
+    await waitFor(() => {
+      expect(sub()).toBe(10)
+      expect(updatesCounter).toBe(2)
+    })
+
+    expect(state1.emitter.getSize()).toBe(1)
+    expect(state2.emitter.getSize()).toBe(1)
+    expect(sub.emitter.getSize()).toBe(1)
+    expect(sub.emitter.getSnapshot()).toBe(10)
+
+    sub.destroy()
+
+    expect(state1.emitter.getSize()).toBe(0)
+    expect(state2.emitter.getSize()).toBe(0)
+    expect(sub.emitter.getSize()).toBe(0)
+  })
+  it('should subscribe and set snapshot', async () => {
+    const state = create(1)
+    const sub = subscriber(state)
+    sub()
+
+    expect(sub.emitter.getSnapshot()).toBe(1)
+
+    state.set(2)
+    await waitFor(() => {
+      expect(sub.emitter.getSnapshot()).toBe(2)
+    })
+  })
+})

package/packages/core/__tests__/test-utils.ts

@@ -0,0 +1,40 @@
+import { Component } from 'react'
+
+export function longPromise(time = 200): Promise<number> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(0)
+    }, time)
+  })
+}
+
+// ErrorBoundary Component
+export class ErrorBoundary extends Component<
+  { fallback: React.ReactNode; children: React.ReactNode },
+  { hasError: boolean; error: Error | null }
+> {
+  constructor(props: { fallback: React.ReactNode; children: React.ReactNode }) {
+    super(props)
+    this.state = { hasError: false, error: null }
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    // Update state so the next render shows the fallback UI.
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    // You can log the error to an error reporting service here
+    // eslint-disable-next-line no-console
+    console.error('ErrorBoundary caught an error:', error, errorInfo)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // Render fallback UI
+      return this.props.fallback
+    }
+
+    return this.props.children
+  }
+}

package/packages/core/__tests__/use-async.test.tsx

@@ -0,0 +1,44 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import { renderHook } from '@testing-library/react-hooks'
+import { create } from '../create'
+import { use } from '../use'
+import { Suspense } from 'react'
+import { longPromise } from './test-utils'
+
+describe('use-create', () => {
+  const reRendersBefore = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should test sub hook', async () => {
+    const userState = create({ name: 'John', age: 30 })
+    async function getDataWithUser() {
+      const result = await fetch('https://jsonplaceholder.typicode.com/todos/1')
+      const json = await result.json()
+      return { age: userState().age, ...json }
+    }
+
+    const suspenseFunction = jest.fn()
+    function Loading() {
+      suspenseFunction()
+      return <div>Loading...</div>
+    }
+
+    const { result, waitFor } = renderHook(
+      () => {
+        reRendersBefore()
+        const data = use(getDataWithUser)
+        return data
+      },
+      // @ts-expect-error
+      { wrapper: ({ children }) => <Suspense fallback={<Loading />}>{children}</Suspense> },
+    )
+
+    await longPromise(1000)
+    await waitFor(() => {})
+    expect(suspenseFunction).toHaveBeenCalledTimes(1)
+    expect(result.current).toEqual({ userId: 1, id: 1, title: 'delectus aut autem', completed: false, age: 30 })
+  })
+})

package/packages/core/__tests__/use.test.tsx

@@ -0,0 +1,76 @@
+/* eslint-disable @typescript-eslint/no-shadow */
+/* eslint-disable no-shadow */
+import { act, renderHook } from '@testing-library/react-hooks'
+import { create } from '../create'
+import { use } from '../use'
+import { subscriber } from '../subscriber'
+import { waitFor } from '@testing-library/react'
+
+describe('use-create', () => {
+  const reRendersBefore = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should test sub hook', async () => {
+    const state = create(1)
+
+    const sub = subscriber(state)
+    expect(sub()).toBe(1)
+
+    act(() => {
+      state.set(2)
+    })
+
+    await waitFor(() => {})
+    expect(sub()).toBe(2)
+  })
+  it('should test use hook', async () => {
+    const state = create(1)
+
+    const { result, waitFor } = renderHook(() => {
+      reRendersBefore()
+      return use(state)
+    })
+
+    state.set(2)
+
+    await waitFor(() => {})
+    expect(result.current).toBe(2)
+    expect(reRendersBefore).toHaveBeenCalledTimes(2)
+
+    state.set(3)
+
+    await waitFor(() => {})
+    expect(result.current).toBe(3)
+    expect(reRendersBefore).toHaveBeenCalledTimes(3)
+  })
+
+  it('should test derived state', async () => {
+    const state1 = create(1)
+    const state2 = create(2)
+
+    function derivedBefore(plusValue: number) {
+      return state1() + state2() + plusValue
+    }
+
+    function derived() {
+      return state1() + state2() + derivedBefore(10)
+    }
+
+    const { result, waitFor } = renderHook(() => {
+      reRendersBefore()
+      return use(derived)
+    })
+
+    act(() => {
+      state1.set(2)
+      state2.set(3)
+    })
+
+    await waitFor(() => {})
+    expect(result.current).toBe(20)
+    expect(reRendersBefore).toHaveBeenCalledTimes(2)
+  })
+})

package/packages/core/create.ts

@@ -0,0 +1,67 @@
+import { canUpdate, generateId } from './utils/common'
+import type { Emitter } from './utils/create-emitter'
+import { createEmitter } from './utils/create-emitter'
+import { isEqualBase, isFunction, isSetValueFunction, isUndefined } from './utils/is'
+import { createScheduler } from './utils/scheduler'
+import type { Cache, Callable, DefaultValue, IsEqual, Listener, SetValue } from './types'
+import { context } from './subscriber'
+
+interface RawState<T> {
+  (): T
+  id: number
+  set: (value: SetValue<T>) => void
+  emitter: Emitter<T>
+  listen: Listener<T>
+}
+
+export type State<T> = {
+  readonly [K in keyof RawState<T>]: RawState<T>[K]
+} & Callable<T>
+
+export function create<T>(initialValue: DefaultValue<T>, isEqual: IsEqual<T> = isEqualBase): State<T> {
+  const cache: Cache<T> = {}
+
+  function getValue(): T {
+    if (isUndefined(cache.current)) {
+      cache.current = isFunction(initialValue) ? initialValue() : initialValue
+    }
+    return cache.current
+  }
+  function resolveValue(value: SetValue<T>) {
+    const previous = getValue()
+    cache.current = isSetValueFunction(value) ? value(previous) : value
+  }
+
+  const schedule = createScheduler<SetValue<T>>({
+    onFinish() {
+      cache.current = getValue()
+      if (!canUpdate(cache, isEqual)) {
+        return
+      }
+      state.emitter.emit()
+    },
+    onResolveItem: resolveValue,
+  })
+
+  const state: RawState<T> = function () {
+    const stateValue = getValue()
+    const ctx = context.use()
+    if (ctx && !state.emitter.contains(ctx.sub)) {
+      ctx.addEmitter(state.emitter)
+    }
+    return stateValue
+  }
+  state.listen = function (listener: (value: T) => void) {
+    return state.emitter.subscribe(() => {
+      const final = cache.current
+      if (isUndefined(final)) {
+        throw new Error('The value is undefined')
+      }
+      listener(final)
+    })
+  }
+  state.emitter = createEmitter<T>(() => state())
+  state.id = generateId()
+  state.set = schedule
+  return state
+}

package/packages/core/index.ts

@@ -0,0 +1,4 @@
+export * from './types'
+export { create } from './create'
+export { use } from './use'
+export { shallow } from './utils/shallow'