muya 1.1.0 → 2.0.0-beta.2

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

@@ -0,0 +1,125 @@
+import { act, renderHook } from '@testing-library/react-hooks'
+import { create } from '../create'
+import { use } from '../use'
+import { waitFor } from '@testing-library/react'
+import { useCallback } from 'react'
+import { getDebugCacheCreation } from '../utils/sub-memo'
+
+describe('use-create', () => {
+  const reRendersBefore = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('should test use hook', async () => {
+    const state = create(1)
+
+    const { result } = 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 with multiple states', 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 } = renderHook(() => {
+      reRendersBefore()
+      return use(derived)
+    })
+
+    await waitFor(() => {})
+    expect(reRendersBefore).toHaveBeenCalledTimes(1)
+    act(() => {
+      state1.set(2)
+      state2.set(3)
+    })
+
+    await waitFor(() => {})
+    expect(result.current).toBe(20)
+    expect(reRendersBefore).toHaveBeenCalledTimes(2)
+  })
+
+  it('should test use hook without memoize fn', async () => {
+    const state1 = create(1)
+    const state2 = create(2)
+
+    function derivedBefore(plusValue: number) {
+      return state1() + state2() + plusValue
+    }
+
+    function derived(add: number) {
+      return state1() + state2() + derivedBefore(add)
+    }
+
+    const { result } = renderHook(() => {
+      reRendersBefore()
+      return use(() => derived(10))
+    })
+    expect(getDebugCacheCreation()).toBe(1)
+
+    await waitFor(() => {})
+    expect(reRendersBefore).toHaveBeenCalledTimes(1)
+    act(() => {
+      state1.set(2)
+      state2.set(3)
+    })
+    expect(getDebugCacheCreation()).toBe(1)
+    await waitFor(() => {})
+    expect(result.current).toBe(20)
+    expect(reRendersBefore).toHaveBeenCalledTimes(2)
+  })
+
+  it('should test use hook with memoize fn', async () => {
+    const state1 = create(1)
+    const state2 = create(2)
+
+    function derivedBefore(plusValue: number) {
+      return state1() + state2() + plusValue
+    }
+
+    function derived(add: number) {
+      return state1() + state2() + derivedBefore(add)
+    }
+
+    const { result } = renderHook(() => {
+      reRendersBefore()
+      const memoized = useCallback(() => derived(10), [])
+      return use(memoized)
+    })
+    expect(getDebugCacheCreation()).toBe(1)
+
+    await waitFor(() => {})
+    expect(reRendersBefore).toHaveBeenCalledTimes(1)
+    act(() => {
+      state1.set(2)
+      state2.set(3)
+    })
+    expect(getDebugCacheCreation()).toBe(1)
+    await waitFor(() => {})
+    expect(result.current).toBe(20)
+    expect(reRendersBefore).toHaveBeenCalledTimes(2)
+  })
+})

package/packages/core/create.ts

@@ -0,0 +1,98 @@
+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'
+import { createGlobalScheduler } from './utils/global-scheduler'
+
+export const createScheduler = createGlobalScheduler()
+interface RawState<T> {
+  (): T
+  id: number
+  set: (value: SetValue<T>) => void
+  emitter: Emitter<T>
+  listen: Listener<T>
+  destroy: () => void
+  withName: (name: string) => RawState<T>
+  stateName?: string
+}
+
+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()
+    // console.log('CTX', ctx?.id, 'STATE', state.id)
+    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()
+
+  const clearScheduler = createScheduler.add(state.id, {
+    onFinish() {
+      cache.current = getValue()
+      if (!canUpdate(cache, isEqual)) {
+        return
+      }
+      state.emitter.emit()
+    },
+    onResolveItem: resolveValue,
+  })
+  state.set = function (value) {
+    createScheduler.schedule(state.id, value)
+  }
+
+  state.destroy = function () {
+    cache.current = undefined
+    getValue()
+    clearScheduler()
+    state.emitter.clear()
+  }
+  state.withName = function (name: string) {
+    state.stateName = name
+    return state
+  }
+
+  return state
+}

package/packages/core/debug/development-tools.ts

@@ -0,0 +1,37 @@
+import { isPromise } from '../utils/is'
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+const reduxDevelopmentTools = window?.__REDUX_DEVTOOLS_EXTENSION__?.connect({
+  name: 'CustomState', // This will name your instance in the DevTools
+  trace: true, // Enables trace if needed
+})
+
+if (reduxDevelopmentTools) {
+  reduxDevelopmentTools.init({ message: 'Initial state' })
+}
+
+export type StateType = 'state' | 'derived'
+
+interface SendOptions {
+  message?: string
+  type: StateType
+  value: unknown
+  name: string
+}
+export function sendToDevelopmentTools(options: SendOptions) {
+  if (!reduxDevelopmentTools) {
+    return
+  }
+  const { message, type, value, name } = options
+  if (isPromise(value)) {
+    return
+  }
+  reduxDevelopmentTools.send(name, { value, type, message }, type)
+}
+
+export function developmentToolsListener(name: string, type: StateType) {
+  return (value: unknown) => {
+    sendToDevelopmentTools({ name, type, value, message: 'update' })
+  }
+}

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'

package/packages/core/subscriber.ts

@@ -0,0 +1,165 @@
+import type { AnyFunction, Cache, Callable, Listener } from './types'
+import type { CancelablePromise } from './utils/common'
+import { cancelablePromise, canUpdate, generateId } from './utils/common'
+import { createContext } from './utils/create-context'
+import type { Emitter } from './utils/create-emitter'
+import { createEmitter } from './utils/create-emitter'
+import type { StateType } from './debug/development-tools'
+import { developmentToolsListener, sendToDevelopmentTools } from './debug/development-tools'
+import { createGlobalScheduler } from './utils/global-scheduler'
+import { isAbortError, isCreate, isEqualBase, isPromise, isUndefined } from './utils/is'
+
+const subscriberScheduler = createGlobalScheduler()
+interface SubscribeContext<T = unknown> {
+  addEmitter: (emitter: Emitter<T>) => void
+  id: number
+  sub: () => void
+}
+interface SubscribeRaw<F extends AnyFunction, T extends ReturnType<F> = ReturnType<F>> {
+  (): T
+  emitter: Emitter<T | undefined>
+  destroy: () => void
+  id: number
+  listen: Listener<T>
+  abort: () => void
+}
+
+export type Subscribe<F extends AnyFunction, T extends ReturnType<F> = ReturnType<F>> = {
+  readonly [K in keyof SubscribeRaw<F, T>]: SubscribeRaw<F, T>[K]
+} & Callable<T>
+
+export const context = createContext<SubscribeContext | undefined>(undefined)
+
+export function subscriber<F extends AnyFunction, T extends ReturnType<F> = ReturnType<F>>(
+  anyFunction: () => T,
+): Subscribe<F, T> {
+  const cache: Cache<T> = {}
+  let isInitialized = false
+  const cleaners: Array<() => void> = []
+  const promiseData: CancelablePromise<T> = {}
+
+  const emitter = createEmitter(
+    () => {
+      if (!isInitialized) {
+        isInitialized = true
+        return subscribe()
+      }
+      return cache.current
+    },
+    () => {
+      isInitialized = true
+      return subscribe()
+    },
+  )
+
+  async function sub() {
+    if (!canUpdate(cache, isEqualBase)) {
+      return
+    }
+    if (promiseData.controller) {
+      promiseData.controller.abort()
+    }
+
+    subscriberScheduler.schedule(id, null)
+  }
+
+  const id = generateId()
+
+  const clearScheduler = subscriberScheduler.add(id, {
+    onFinish() {
+      cache.current = subscribe()
+      emitter.emit()
+    },
+  })
+  const ctx: SubscribeContext = {
+    addEmitter(stateEmitter) {
+      const clean = stateEmitter.subscribe(sub)
+      cleaners.push(clean)
+    },
+    id,
+    sub,
+  }
+
+  function asyncSub(resultValue: Promise<T>): Promise<T> | undefined {
+    const cancel = cancelablePromise<T>(resultValue, promiseData.controller)
+    promiseData.controller = cancel.controller
+    cancel.promise
+      ?.then((value) => {
+        cache.current = value
+        emitter.emit()
+      })
+      .catch((error) => {
+        if (isAbortError(error)) {
+          return
+        }
+        cache.current = error
+        emitter.emit()
+      })
+    return cancel.promise
+  }
+
+  const subscribe = function (): T {
+    const resultValue = context.run(ctx, anyFunction)
+
+    if (!isPromise(resultValue)) {
+      cache.current = resultValue
+      return resultValue
+    }
+
+    const promise = context.wrap(() => asyncSub(resultValue))()
+    if (isPromise(promise)) {
+      // we do not do anything with the promise, because it is already handled in asyncSub
+      promise.catch(() => null)
+    }
+    const promiseAsT = promise as T
+    cache.current = promiseAsT
+    return promiseAsT
+  }
+
+  subscribe.emitter = emitter
+  subscribe.destroy = function () {
+    for (const cleaner of cleaners) {
+      cleaner()
+    }
+    emitter.clear()
+    clearScheduler()
+  }
+  subscribe.id = id
+  subscribe.listen = function (listener: (value: T) => void) {
+    return emitter.subscribe(() => {
+      const final = cache.current
+      if (isUndefined(final)) {
+        throw new Error('The value is undefined')
+      }
+      listener(final)
+    })
+  }
+
+  if (process.env.NODE_ENV === 'development') {
+    let name: string | undefined
+    let type: StateType = 'derived'
+    if (isCreate(anyFunction)) {
+      type = 'state'
+      name = anyFunction.stateName
+    }
+
+    if (!name) {
+      name = anyFunction.name.length > 0 ? anyFunction.name : anyFunction.toString()
+    }
+
+    sendToDevelopmentTools({
+      name,
+      type,
+      value: subscribe(),
+      message: 'init',
+    })
+    const listener = developmentToolsListener(name, type)
+    subscribe.listen(listener)
+  }
+  subscribe.abort = function () {
+    if (promiseData.controller) {
+      promiseData.controller.abort()
+    }
+  }
+  return subscribe
+}

package/packages/core/types.ts

@@ -0,0 +1,15 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnyFunction = (...args: any[]) => any
+
+export type IsEqual<T = unknown> = (a: T, b: T) => boolean
+export type SetStateCb<T> = (value: T) => Awaited<T>
+export type SetValue<T> = SetStateCb<T> | Awaited<T>
+export type DefaultValue<T> = T | (() => T)
+export type Listener<T> = (listener: (value: T) => void) => () => void
+export interface Cache<T> {
+  current?: T
+  previous?: T
+}
+export type Callable<T> = () => T
+
+export const EMPTY_SELECTOR = <T>(stateValue: T) => stateValue

package/packages/core/use.ts

@@ -0,0 +1,57 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+/* eslint-disable sonarjs/rules-of-hooks */
+import { useDebugValue, useEffect, useRef } from 'react'
+import { EMPTY_SELECTOR, type AnyFunction } from './types'
+import { isAnyOtherError, isPromise } from './utils/is'
+import { useSyncExternalStore } from 'react'
+import { subMemo } from './utils/sub-memo'
+
+const PROMOTE_DEBUG_AFTER_REACH_TIMES = 10
+const PROMOTE_DEBUG_AFTER_REACH_COUNT = 3
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function useDebugFunction<F extends AnyFunction>(function_: F) {
+  const renderCount = useRef({ renders: 0, startTime: performance.now() })
+  useEffect(() => {
+    renderCount.current.renders++
+    const passedTime = performance.now() - renderCount.current.startTime
+    if (passedTime < PROMOTE_DEBUG_AFTER_REACH_TIMES) {
+      return
+    }
+    if (renderCount.current.renders < PROMOTE_DEBUG_AFTER_REACH_COUNT) {
+      return
+    }
+    renderCount.current.startTime = performance.now()
+    renderCount.current.renders = 0
+    // eslint-disable-next-line no-console
+    console.warn(
+      `Function ${function_.name.length > 0 ? function_.name : function_} seems to be not memoized, wrap the function to the useCallback or use global defined functions.`,
+    )
+  }, [function_])
+}
+
+export function use<F extends AnyFunction, T extends ReturnType<F>, S extends ReturnType<F>>(
+  anyFunction: () => T,
+  selector: (stateValue: T) => S = EMPTY_SELECTOR,
+): undefined extends S ? T : S {
+  const memo = subMemo(anyFunction)
+  const sub = memo.call()
+  const initialSnapshot = sub.emitter.getInitialSnapshot ?? sub.emitter.getSnapshot
+  useEffect(() => {
+    return memo.destroy
+  }, [anyFunction, memo.destroy])
+
+  const value = useSyncExternalStore<S>(
+    sub.emitter.subscribe,
+    () => selector(sub.emitter.getSnapshot() as T),
+    () => selector(initialSnapshot() as T),
+  )
+  useDebugValue(value)
+  if (isPromise(value)) {
+    throw value
+  }
+  if (isAnyOtherError(value)) {
+    memo.destroy()
+    throw value
+  }
+  return value
+}

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

@@ -0,0 +1,198 @@
+/* eslint-disable sonarjs/pseudo-random */
+/* eslint-disable sonarjs/no-nested-functions */
+import { createContext } from '../create-context'
+import { longPromise } from '../../__tests__/test-utils'
+
+describe('context', () => {
+  it('should check context', () => {
+    const context = createContext({ name: 'John Doe' })
+
+    const main = () => {
+      context.run({ name: 'Jane Doe' }, () => {
+        expect(context.use()).toEqual({ name: 'Jane Doe' })
+      })
+    }
+    expect(context.use()).toEqual({ name: 'John Doe' })
+    main()
+    expect(context.use()).toEqual({ name: 'John Doe' })
+  })
+
+  it('should test async context', (done) => {
+    const context = createContext<string>('empty')
+    // eslint-disable-next-line unicorn/consistent-function-scoping
+    const awaiter = async () => new Promise((resolve) => setTimeout(resolve, 10))
+    context.run('outer', () => {
+      expect(context.use()).toEqual('outer')
+
+      // Wrap the asynchronous callback to preserve 'outer' context
+      setTimeout(
+        context.wrap(async () => {
+          try {
+            await awaiter()
+            expect(context.use()).toEqual('outer')
+            innerDone()
+          } catch (error) {
+            done(error)
+          }
+        }),
+        10,
+      )
+
+      context.run('inner', () => {
+        expect(context.use()).toEqual('inner')
+
+        // Wrap the asynchronous callback to preserve 'inner' context
+        setTimeout(
+          context.wrap(() => {
+            try {
+              expect(context.use()).toEqual('inner')
+              innerDone()
+            } catch (error) {
+              done(error)
+            }
+          }),
+          10,
+        )
+      })
+
+      expect(context.use()).toEqual('outer')
+    })
+
+    let completed = 0
+    function innerDone() {
+      completed += 1
+      if (completed === 2) {
+        done()
+      }
+    }
+  })
+  it('should test async nested context', (done) => {
+    const context = createContext(0)
+    context.run(1, () => {
+      expect(context.use()).toEqual(1)
+      context.run(2, () => {
+        context.run(3, () => {
+          expect(context.use()).toEqual(3)
+          setTimeout(
+            context.wrap(() => {
+              expect(context.use()).toEqual(3)
+            }),
+            10,
+          )
+          expect(context.use()).toEqual(3)
+        })
+        setTimeout(
+          context.wrap(() => {
+            expect(context.use()).toEqual(2)
+          }),
+          10,
+        )
+        expect(context.use()).toEqual(2)
+        context.run(3, () => {
+          expect(context.use()).toEqual(3)
+          setTimeout(
+            context.wrap(() => {
+              expect(context.use()).toEqual(3)
+              context.run(4, () => {
+                expect(context.use()).toEqual(4)
+                setTimeout(
+                  context.wrap(() => {
+                    expect(context.use()).toEqual(4)
+                    done()
+                  }),
+                  10,
+                )
+                expect(context.use()).toEqual(4)
+              })
+            }),
+            10,
+          )
+          expect(context.use()).toEqual(3)
+        })
+        // check back to 2
+        expect(context.use()).toEqual(2)
+      })
+      // check back to 1
+      expect(context.use()).toEqual(1)
+    })
+    // check back to 0
+    expect(context.use()).toEqual(0)
+  })
+  it('should stress test context with async random code', async () => {
+    const stressCount = 10_000
+    const context = createContext(0)
+    for (let index = 0; index < stressCount; index++) {
+      context.run(index, () => {
+        expect(context.use()).toEqual(index)
+      })
+    }
+
+    const promises: Promise<unknown>[] = []
+    for (let index = 0; index < stressCount; index++) {
+      context.run(index, () => {
+        expect(context.use()).toEqual(index)
+        const promise = new Promise((resolve) => {
+          setTimeout(
+            context.wrap(() => {
+              expect(context.use()).toEqual(index)
+              resolve(index)
+            }),
+            Math.random() * 100,
+          )
+        })
+        promises.push(promise)
+      })
+    }
+    await Promise.all(promises)
+  })
+
+  it('should-test-default-value-with-ctx', async () => {
+    const ctx = createContext({ counter: 1 })
+    ctx.run({ counter: 10 }, async () => {
+      await longPromise(10)
+      expect(ctx.use()?.counter).toBe(10)
+    })
+    ctx.run({ counter: 12 }, () => {
+      expect(ctx.use()?.counter).toBe(12)
+    })
+  })
+  it('should test nested context', () => {
+    const currentCount = 0
+    const context = createContext({ count: 0 })
+    function container() {
+      const isIn = context.use()
+      expect(isIn?.count).toBe(currentCount)
+      context.run({ count: currentCount + 1 }, () => {
+        const inner = context.use()
+        expect(inner?.count).toBe(currentCount + 1)
+        context.run({ count: currentCount + 2 }, () => {
+          const innerInner = context.use()
+          expect(innerInner?.count).toBe(currentCount + 2)
+        })
+      })
+    }
+
+    container()
+    container()
+  })
+
+  it('should test nested context with async when promise is returned, but not waited', async () => {
+    const context = createContext({ count: 0 })
+
+    async function insideContextNestedAwaited() {
+      await longPromise(10)
+      const ctx = context.use()
+      expect(ctx?.count).toBe(1)
+    }
+    async function insideContext() {
+      await insideContextNestedAwaited()
+      // HERE THIS IS NOT WAITED, SO CONTEXT IS LOST.
+      // insideContextNestedAwaited() // this will not work
+      context.wrap(insideContextNestedAwaited) // this work
+      const ctx = context.use()
+      expect(ctx?.count).toBe(1)
+    }
+
+    context.run({ count: 1 }, insideContext)
+  })
+})