muya 1.1.0 → 2.0.0-beta.2

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

@@ -0,0 +1,266 @@
+/**
+ * This is not optimal, so for now just ignore. Its just for view and compare if the state is at least similar to others
+ * but this tests are not consider as a real benchmark
+ */
+/* 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 = [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__/subscriber.test.tsx

@@ -0,0 +1,89 @@
+import { waitFor } from '@testing-library/react'
+import { create } from '../create'
+import { subscriber } from '../subscriber'
+import { longPromise } from './test-utils'
+
+describe('subscriber', () => {
+  it('should test subscriber and cleaning the emitters', () => {
+    const state1 = create(1)
+    const sub = subscriber(state1)
+    // at this point, the emitter is not subscribed yet, as it need to be called first.
+    expect(state1.emitter.getSize()).toBe(0)
+
+    // check if the value is correct
+    expect(sub()).toBe(1)
+
+    // now we can check if the value is subscribed
+    expect(state1.emitter.getSize()).toBe(1)
+    // we destroy the subscriber, meaning that the emitter should be cleaned
+
+    sub.destroy()
+
+    expect(state1.emitter.getSize()).toBe(0)
+
+    // and test re-aligning the subscriber
+    expect(sub()).toBe(1)
+    expect(state1.emitter.getSize()).toBe(1)
+  })
+  it('should test how many events are emitter via singleton state', async () => {
+    const state1 = create(1)
+    const sub = subscriber(state1)
+
+    let updateCount = 0
+
+    sub.listen(() => {
+      updateCount++
+    })
+    sub()
+    await waitFor(() => {})
+    // we do not received initial value as it is not changed
+    expect(updateCount).toBe(0)
+
+    state1.set(2)
+    await waitFor(() => {})
+    expect(updateCount).toBe(1)
+  })
+  it('should test how many events are emitter via singleton async state', async () => {
+    const state1 = create(longPromise())
+    const sub = subscriber(state1)
+
+    let updateCount = 0
+
+    sub.listen(() => {
+      updateCount++
+    })
+    sub()
+    await waitFor(() => {})
+    // we do not received initial value as it is not changed
+    expect(updateCount).toBe(0)
+
+    state1.set(2)
+    await waitFor(() => {})
+    expect(updateCount).toBe(1)
+  })
+
+  it('should test how many events are emitter via derived state', async () => {
+    const state1 = create(longPromise())
+
+    async function derived() {
+      //   await longPromise()
+      return await state1()
+    }
+    const sub = subscriber(derived)
+
+    let updateCount = 0
+
+    sub.listen(() => {
+      updateCount++
+    })
+    await sub()
+    await waitFor(() => {})
+    expect(await sub()).toBe(0)
+    // // we do not received initial value as it is not changed
+    expect(updateCount).toBe(2)
+
+    // state1.set(2)
+    // await waitFor(() => {})
+    // expect(updateCount).toBe(1)
+  })
+})

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,45 @@
+/* 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 { waitFor } from '@testing-library/react'
+
+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 } = renderHook(
+      () => {
+        reRendersBefore()
+        const data = use(getDataWithUser)
+        return data
+      },
+      // @ts-expect-error
+      { wrapper: ({ children }) => <Suspense fallback={<Loading />}>{children}</Suspense> },
+    )
+
+    await waitFor(() => {
+      expect(result.current).toEqual({ userId: 1, id: 1, title: 'delectus aut autem', completed: false, age: 30 })
+    })
+    expect(suspenseFunction).toHaveBeenCalledTimes(1)
+    expect(result.current).toEqual({ userId: 1, id: 1, title: 'delectus aut autem', completed: false, age: 30 })
+  })
+})