muya 2.0.0-beta.3 → 2.0.0

package/src/create.ts

@@ -1,75 +1,57 @@
-import { canUpdate, generateId } from './utils/common'
-import type { Emitter } from './utils/create-emitter'
-import { createEmitter } from './utils/create-emitter'
+import { canUpdate, handleAsyncUpdate } from './utils/common'
 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'
+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 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 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 {
-    if (isUndefined(cache.current)) {
-      cache.current = isFunction(initialValue) ? initialValue() : initialValue
+    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 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)
+  function setValue(value: SetValue<T>) {
+    if (cache.abortController) {
+      cache.abortController.abort()
     }
-    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)
-    })
+
+    const previous = getValue()
+    const newValue = isSetValueFunction(value) ? value(previous) : value
+    const resolvedValue = handleAsyncUpdate(cache, state.emitter.emit, newValue)
+    cache.current = resolvedValue
   }
-  state.emitter = createEmitter<T>(() => state())
-  state.id = generateId()
 
-  const clearScheduler = createScheduler.add(state.id, {
+  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)) {
@@ -77,22 +59,9 @@ export function create<T>(initialValue: DefaultValue<T>, isEqual: IsEqual<T> = i
       }
       state.emitter.emit()
     },
-    onResolveItem: resolveValue,
+    onResolveItem: setValue,
   })
-  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
-  }
 
+  subscribeToDevelopmentTools(state)
   return state
 }

package/src/debug/development-tools.ts

@@ -1,4 +1,5 @@
-import { isPromise } from '../utils/is'
+import type { GetState, State } from '../types'
+import { isPromise, isState } from '../utils/is'
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-expect-error
@@ -19,7 +20,7 @@ interface SendOptions {
   value: unknown
   name: string
 }
-export function sendToDevelopmentTools(options: SendOptions) {
+function sendToDevelopmentTools(options: SendOptions) {
   if (!reduxDevelopmentTools) {
     return
   }
@@ -30,8 +31,22 @@ export function sendToDevelopmentTools(options: SendOptions) {
   reduxDevelopmentTools.send(name, { value, type, message }, type)
 }
 
-export function developmentToolsListener(name: string, type: StateType) {
+function developmentToolsListener(name: string, type: StateType) {
   return (value: unknown) => {
     sendToDevelopmentTools({ name, type, value, message: 'update' })
   }
 }
+
+export function subscribeToDevelopmentTools<T>(state: State<T> | GetState<T>) {
+  if (process.env.NODE_ENV === 'production') {
+    return
+  }
+  let type: StateType = 'state'
+
+  if (!isState(state)) {
+    type = 'derived'
+  }
+  const name = state.stateName?.length ? state.stateName : `${type}(${state.id.toString()})`
+  sendToDevelopmentTools({ name, type, value: state.get(), message: 'initial' })
+  return state.listen(developmentToolsListener(name, type))
+}

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from './types'
 export { create } from './create'
-export { use } from './use'
+export { select } from './select'
+export { useValue } from './use-value'
 export { shallow } from './utils/shallow'

package/src/{utils/global-scheduler.ts → scheduler.ts}

@@ -1,12 +1,18 @@
-import type { SchedulerOptions } from './scheduler'
-import { RESCHEDULE_COUNT, THRESHOLD, THRESHOLD_ITEMS } from './scheduler'
+export const THRESHOLD = 0.2
+export const THRESHOLD_ITEMS = 10
+export const RESCHEDULE_COUNT = 0
 
 interface GlobalSchedulerItem<T> {
   value: T
   id: number
 }
 
-export function createGlobalScheduler() {
+export interface SchedulerOptions<T> {
+  readonly onResolveItem?: (item: T) => void
+  readonly onFinish: () => void
+}
+
+export function createScheduler() {
   const listeners = new Map<number, SchedulerOptions<unknown>>()
   const batches = new Set<GlobalSchedulerItem<unknown>>()
 

package/src/select.ts

@@ -0,0 +1,69 @@
+import { stateScheduler } from './create'
+import { createState } from './create-state'
+import { subscribeToDevelopmentTools } from './debug/development-tools'
+import type { Cache, GetState, IsEqual } from './types'
+import { canUpdate, handleAsyncUpdate } from './utils/common'
+import { isUndefined } from './utils/is'
+
+type StateDependencies<T extends Array<unknown>> = {
+  [K in keyof T]: GetState<T[K]>
+}
+
+/**
+ * Selecting state from multiple states.
+ * It will create new state in read-only mode (without set).
+ */
+export function select<T = unknown, S extends Array<unknown> = []>(
+  states: StateDependencies<S>,
+  selector: (...values: S) => T,
+  isEqual?: IsEqual<T>,
+): GetState<T> {
+  const cache: Cache<T> = {}
+
+  function computedValue(): T {
+    const values = states.map((state) => state.get()) as S
+    return selector(...values)
+  }
+
+  function getValue(): T {
+    if (isUndefined(cache.current)) {
+      const newValue = computedValue()
+      cache.current = handleAsyncUpdate(cache, state.emitter.emit, newValue)
+    }
+    return cache.current
+  }
+
+  const cleanups: Array<() => void> = []
+  for (const dependencyState of states) {
+    const clean = dependencyState.emitter.subscribe(() => {
+      stateScheduler.schedule(state.id, null)
+    })
+    cleanups.push(clean)
+  }
+
+  const state = createState<T>({
+    destroy() {
+      for (const cleanup of cleanups) {
+        cleanup()
+      }
+      clearScheduler()
+      state.emitter.clear()
+      cache.current = undefined
+    },
+    get: getValue,
+  })
+
+  const clearScheduler = stateScheduler.add(state.id, {
+    onFinish() {
+      const newValue = computedValue()
+      cache.current = handleAsyncUpdate(cache, state.emitter.emit, newValue)
+      if (!canUpdate(cache, isEqual)) {
+        return
+      }
+      state.emitter.emit()
+    },
+  })
+
+  subscribeToDevelopmentTools(state)
+  return state
+}

package/src/types.ts

@@ -1,15 +1,66 @@
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type AnyFunction = (...args: any[]) => any
+import type { Emitter } from './utils/create-emitter'
 
 export type IsEqual<T = unknown> = (a: T, b: T) => boolean
-export type SetStateCb<T> = (value: T) => Awaited<T>
+export type SetStateCb<T> = (value: T | Awaited<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 type Listener<T> = (listener: (value?: T) => void) => () => void
 export interface Cache<T> {
   current?: T
   previous?: T
+  abortController?: AbortController
 }
-export type Callable<T> = () => T
 
-export const EMPTY_SELECTOR = <T>(stateValue: T) => stateValue
+export const EMPTY_SELECTOR = <T, S>(stateValue: T) => stateValue as unknown as S
+
+export interface GetState<T> {
+  <S>(selector?: (stateValue: T) => S): undefined extends S ? T : S
+  /**
+   * Get the cached state value.
+   */
+  get: () => T
+  /**
+   * Get the unique id of the state.
+   */
+  id: number
+  /**
+   * Emitter to listen to changes with snapshots.
+   */
+  emitter: Emitter<T>
+  /**
+   * Listen to changes in the state.
+   */
+  listen: Listener<T>
+  /**
+   * Destroy / cleanup the state.
+   * Clean all listeners and make cache value undefined.
+   */
+  destroy: () => void
+  /**
+   * Set the state name. For debugging purposes.
+   */
+  withName: (name: string) => GetState<T>
+  /**
+   * Name of the state. For debugging purposes.
+   */
+  stateName?: string
+  /**
+   * Select particular slice of the state.
+   * It will create "another" state in read-only mode (without set).
+   */
+  select: <S>(selector: (state: T) => S, isEqual?: IsEqual<S>) => GetState<S>
+}
+
+export interface State<T> extends GetState<T> {
+  /**
+   * Setting new state value.
+   * It can be value or function that returns a value (similar to `setState` in React).
+   * If the state is initialized with async code, set will cancel the previous promise.
+   */
+  set: (value: SetValue<T>) => void
+  /**
+   * Set the state name. For debugging purposes.
+   */
+  withName: (name: string) => State<T>
+  isSet: true
+}

package/src/use-value.ts

@@ -0,0 +1,22 @@
+import { useDebugValue, useSyncExternalStore } from 'react'
+import { EMPTY_SELECTOR, type GetState } from './types'
+import { isError, isPromise } from './utils/is'
+
+export function useValue<T, S>(state: GetState<T>, selector: (stateValue: T) => S = EMPTY_SELECTOR): undefined extends S ? T : S {
+  const { emitter } = state
+  const value = useSyncExternalStore<S>(
+    state.emitter.subscribe,
+    () => selector(emitter.getSnapshot()),
+    () => selector(emitter.getInitialSnapshot ? emitter.getInitialSnapshot() : emitter.getSnapshot()),
+  )
+  useDebugValue(value)
+  if (isPromise(value)) {
+    throw value
+  }
+
+  if (isError(value)) {
+    throw value
+  }
+
+  return value as undefined extends S ? T : S
+}

package/src/utils/__tests__/is.test.ts

@@ -1,5 +1,5 @@
-import { Abort } from '../common'
-import { isPromise, isFunction, isSetValueFunction, isMap, isSet, isArray, isEqualBase, isAbortError } from '../is'
+import { create } from '../../create'
+import { isPromise, isFunction, isSetValueFunction, isMap, isSet, isArray, isEqualBase, isUndefined, isState } from '../is'
 
 describe('isPromise', () => {
   it('should return true for a Promise', () => {
@@ -64,11 +64,28 @@ describe('isEqualBase', () => {
   })
 })
 
-describe('isAbortError', () => {
-  it('should return true for an AbortError', () => {
-    expect(isAbortError(new DOMException('', Abort.Error))).toBe(true)
+describe('isUndefined', () => {
+  it('should return true for undefined', () => {
+    // eslint-disable-next-line unicorn/no-useless-undefined
+    expect(isUndefined(undefined)).toBe(true)
   })
-  it('should return false for a non-AbortError', () => {
-    expect(isAbortError(new DOMException('', 'Error'))).toBe(false)
+  it('should return false for a non-undefined', () => {
+    expect(isUndefined(123)).toBe(false)
+  })
+})
+
+describe('isState', () => {
+  it('should return true for a State real', () => {
+    const state = create(1)
+    expect(isState(state)).toBe(true)
+  })
+
+  it('should return true for a State with derived', () => {
+    const state = create(1)
+    const derived = state.select((v) => v)
+    expect(isState(derived)).toBe(false)
+  })
+  it('should return false for a non-State', () => {
+    expect(isState(123)).toBe(false)
   })
 })

package/src/utils/common.ts

@@ -1,5 +1,5 @@
 import type { Cache, IsEqual } from '../types'
-import { isUndefined } from './is'
+import { isAbortError, isEqualBase, isPromise, isUndefined } from './is'
 
 // eslint-disable-next-line no-shadow
 export enum Abort {
@@ -7,14 +7,13 @@ export enum Abort {
 }
 
 export interface CancelablePromise<T> {
-  promise?: Promise<T>
+  promise: Promise<T>
   controller?: AbortController
-  resolveInitialPromise?: (value: T) => void
 }
 /**
  * Cancelable promise function, return promise and controller
  */
-export function cancelablePromise<T>(promise: Promise<T>, previousController?: AbortController): CancelablePromise<T> {
+function cancelablePromise<T>(promise: Promise<T>, previousController?: AbortController): CancelablePromise<T> {
   if (previousController) {
     previousController.abort()
   }
@@ -32,12 +31,10 @@ export function cancelablePromise<T>(promise: Promise<T>, previousController?: A
   return { promise: cancelable, controller }
 }
 
-let id = 0
-export function generateId() {
-  return id++
-}
-
-export function canUpdate<T>(cache: Cache<T>, isEqual: IsEqual<T> = (previous, next) => previous === next): boolean {
+/**
+ * Check if the cache value is different from the previous value.
+ */
+export function canUpdate<T>(cache: Cache<T>, isEqual: IsEqual<T> = isEqualBase): boolean {
   if (!isUndefined(cache.current)) {
     if (!isUndefined(cache.previous) && isEqual(cache.current, cache.previous)) {
       return false
@@ -46,3 +43,31 @@ export function canUpdate<T>(cache: Cache<T>, isEqual: IsEqual<T> = (previous, n
   }
   return true
 }
+
+/**
+ * Handle async updates for `create` and `select`
+ */
+export function handleAsyncUpdate<T>(cache: Cache<T>, emit: () => void, value: T): T {
+  if (!isPromise(value)) {
+    return value
+  }
+  if (cache.abortController) {
+    cache.abortController.abort()
+  }
+
+  const { promise, controller } = cancelablePromise(value, cache.abortController)
+  cache.abortController = controller
+
+  return promise
+    .then((result) => {
+      cache.current = result as T
+      emit()
+    })
+    .catch((error) => {
+      if (isAbortError(error)) {
+        return
+      }
+      cache.current = error as T
+      emit()
+    }) as T
+}

package/src/utils/is.ts

@@ -1,6 +1,5 @@
+import type { SetStateCb, SetValue, State } from '../types'
 import { Abort } from './common'
-import type { SetStateCb, SetValue } from '../types'
-import type { State } from '../create'
 
 export function isPromise<T>(value: unknown): value is Promise<T> {
   return value instanceof Promise
@@ -35,16 +34,14 @@ export function isAbortError(value: unknown): value is DOMException {
   return value instanceof DOMException && value.name === Abort.Error
 }
 
-export function isAnyOtherError(value: unknown): value is Error {
-  return value instanceof Error && value.name !== Abort.Error
+export function isError(value: unknown): value is Error {
+  return value instanceof Error
 }
 
 export function isUndefined(value: unknown): value is undefined {
   return value === undefined
 }
 
-export function isCreate(value: unknown): value is State<unknown> {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error
-  return isFunction(value) && value.set !== undefined
+export function isState<T>(value: unknown): value is State<T> {
+  return isFunction(value) && 'get' in value && 'set' in value && 'isSet' in value && value.isSet === true
 }

package/types/create-state.d.ts

@@ -0,0 +1,12 @@
+import type { GetState, SetValue, State } from './types';
+interface GetStateOptions<T> {
+    readonly get: () => T;
+    readonly set?: (value: SetValue<T>) => void;
+    readonly destroy: () => void;
+}
+type FullState<T> = GetStateOptions<T>['set'] extends undefined ? GetState<T> : State<T>;
+/**
+ * This is just utility function to create state base data
+ */
+export declare function createState<T>(options: GetStateOptions<T>): FullState<T>;
+export {};

package/types/create.d.ts

@@ -1,21 +1,9 @@
-import type { Emitter } from './utils/create-emitter';
-import type { Callable, DefaultValue, IsEqual, Listener, SetValue } from './types';
-export declare const createScheduler: {
-    add<T>(id: number, option: import("./utils/scheduler").SchedulerOptions<T>): () => void;
+import type { DefaultValue, IsEqual, State } from './types';
+export declare const stateScheduler: {
+    add<T>(id: number, option: import("./scheduler").SchedulerOptions<T>): () => void;
     schedule<T>(id: number, value: T): void;
 };
-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>;
+/**
+ * Create state from a default value.
+ */
 export declare function create<T>(initialValue: DefaultValue<T>, isEqual?: IsEqual<T>): State<T>;
-export {};

package/types/debug/development-tools.d.ts

@@ -1,10 +1,3 @@
+import type { GetState, State } from '../types';
 export type StateType = 'state' | 'derived';
-interface SendOptions {
-    message?: string;
-    type: StateType;
-    value: unknown;
-    name: string;
-}
-export declare function sendToDevelopmentTools(options: SendOptions): void;
-export declare function developmentToolsListener(name: string, type: StateType): (value: unknown) => void;
-export {};
+export declare function subscribeToDevelopmentTools<T>(state: State<T> | GetState<T>): (() => void) | undefined;

package/types/index.d.ts

@@ -1,4 +1,5 @@
 export * from './types';
 export { create } from './create';
-export { use } from './use';
+export { select } from './select';
+export { useValue } from './use-value';
 export { shallow } from './utils/shallow';

package/types/{utils/scheduler.d.ts → scheduler.d.ts}

@@ -5,4 +5,7 @@ export interface SchedulerOptions<T> {
     readonly onResolveItem?: (item: T) => void;
     readonly onFinish: () => void;
 }
-export declare function createScheduler<T>(options: SchedulerOptions<T>): (value: T) => void;
+export declare function createScheduler(): {
+    add<T>(id: number, option: SchedulerOptions<T>): () => void;
+    schedule<T>(id: number, value: T): void;
+};

package/types/select.d.ts

@@ -0,0 +1,10 @@
+import type { GetState, IsEqual } from './types';
+type StateDependencies<T extends Array<unknown>> = {
+    [K in keyof T]: GetState<T[K]>;
+};
+/**
+ * Selecting state from multiple states.
+ * It will create new state in read-only mode (without set).
+ */
+export declare function select<T = unknown, S extends Array<unknown> = []>(states: StateDependencies<S>, selector: (...values: S) => T, isEqual?: IsEqual<T>): GetState<T>;
+export {};

package/types/types.d.ts

@@ -1,12 +1,62 @@
-export type AnyFunction = (...args: any[]) => any;
+import type { Emitter } from './utils/create-emitter';
 export type IsEqual<T = unknown> = (a: T, b: T) => boolean;
-export type SetStateCb<T> = (value: T) => Awaited<T>;
+export type SetStateCb<T> = (value: T | Awaited<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 type Listener<T> = (listener: (value?: T) => void) => () => void;
 export interface Cache<T> {
     current?: T;
     previous?: T;
+    abortController?: AbortController;
+}
+export declare const EMPTY_SELECTOR: <T, S>(stateValue: T) => S;
+export interface GetState<T> {
+    <S>(selector?: (stateValue: T) => S): undefined extends S ? T : S;
+    /**
+     * Get the cached state value.
+     */
+    get: () => T;
+    /**
+     * Get the unique id of the state.
+     */
+    id: number;
+    /**
+     * Emitter to listen to changes with snapshots.
+     */
+    emitter: Emitter<T>;
+    /**
+     * Listen to changes in the state.
+     */
+    listen: Listener<T>;
+    /**
+     * Destroy / cleanup the state.
+     * Clean all listeners and make cache value undefined.
+     */
+    destroy: () => void;
+    /**
+     * Set the state name. For debugging purposes.
+     */
+    withName: (name: string) => GetState<T>;
+    /**
+     * Name of the state. For debugging purposes.
+     */
+    stateName?: string;
+    /**
+     * Select particular slice of the state.
+     * It will create "another" state in read-only mode (without set).
+     */
+    select: <S>(selector: (state: T) => S, isEqual?: IsEqual<S>) => GetState<S>;
+}
+export interface State<T> extends GetState<T> {
+    /**
+     * Setting new state value.
+     * It can be value or function that returns a value (similar to `setState` in React).
+     * If the state is initialized with async code, set will cancel the previous promise.
+     */
+    set: (value: SetValue<T>) => void;
+    /**
+     * Set the state name. For debugging purposes.
+     */
+    withName: (name: string) => State<T>;
+    isSet: true;
 }
-export type Callable<T> = () => T;
-export declare const EMPTY_SELECTOR: <T>(stateValue: T) => T;