@tamagui/use-store 1.15.40

package/src/Store.tsx

@@ -0,0 +1,77 @@
+import { UNWRAP_PROXY } from './constants'
+import { shouldDebug } from './useStoreDebug'
+
+export const TRIGGER_UPDATE = Symbol()
+export const ADD_TRACKER = Symbol()
+export const TRACK = Symbol()
+export const SHOULD_DEBUG = Symbol()
+
+export type StoreTracker = {
+  isTracking: boolean
+  tracked: Set<string>
+  dispose: () => void
+  component?: any
+  firstRun: boolean
+  last?: any
+  lastKeys?: any
+}
+
+export const disableTracking = new WeakMap()
+
+export const setDisableStoreTracking = (storeInstance: any, val: boolean) => {
+  const store = storeInstance[UNWRAP_PROXY] ?? storeInstance
+  disableTracking.set(store, val)
+}
+
+export class Store<Props extends Object = {}> {
+  private _listeners = new Set<Function>()
+  private _trackers = new Set<StoreTracker>()
+  _version = 0
+
+  constructor(public props: Props) {}
+
+  subscribe = (onChanged: Function) => {
+    this._listeners.add(onChanged)
+    return () => {
+      this._listeners.delete(onChanged)
+    }
+  };
+
+  [TRIGGER_UPDATE]() {
+    this._version = (this._version + 1) % Number.MAX_SAFE_INTEGER
+    for (const cb of this._listeners) {
+      cb()
+    }
+  }
+
+  [ADD_TRACKER](tracker: StoreTracker) {
+    this._trackers.add(tracker)
+    return () => {
+      this._trackers.delete(tracker)
+    }
+  }
+
+  [TRACK](key: string, debug?: boolean) {
+    if (key[0] === '_' || key[0] === '$' || key === 'props' || key === 'toJSON') {
+      return
+    }
+    if (debug) {
+      console.log('(debug) CHECK TRACKERS FOR', key)
+    }
+    for (const tracker of this._trackers) {
+      if (tracker.isTracking) {
+        tracker.tracked.add(key)
+        if (debug) {
+          console.log('(debug) TRACK', key, tracker)
+        }
+      }
+    }
+  }
+
+  [SHOULD_DEBUG]() {
+    const info = { storeInstance: this }
+    return [...this._trackers].some(
+      (tracker) => tracker.component && shouldDebug(tracker.component, info)
+    )
+  }
+}

package/src/comparators.tsx

@@ -0,0 +1,18 @@
+export const isEqualSubsetShallow = (
+  a: any,
+  b: any,
+  opts?: { keyComparators?: { [key: string]: (a: any, b: any) => boolean } }
+) => {
+  if (b == null || a == null) return a === b
+  if (typeof a !== typeof b) return false
+  if (typeof b === 'object') {
+    for (const key in b) {
+      const compare = opts?.keyComparators?.[key]
+      if (compare ? !compare(a[key], b[key]) : b[key] !== a[key]) {
+        return false
+      }
+    }
+    return true
+  }
+  return a === b
+}

package/src/configureUseStore.tsx

@@ -0,0 +1,7 @@
+import { UseStoreConfig } from './interfaces'
+
+export let configureOpts: UseStoreConfig = {}
+
+export function configureUseStore(opts: UseStoreConfig) {
+  configureOpts = opts
+}

package/src/constants.tsx

@@ -0,0 +1,6 @@
+export const UNWRAP_PROXY = Symbol()
+
+export const defaultOptions = {
+  once: false,
+  selector: undefined,
+}

package/src/decorators.tsx

@@ -0,0 +1,8 @@
+export type ComparisonFn = (a: any, b: any) => boolean
+
+export function compare(comparator: ComparisonFn) {
+  return (target: any, propertyKey: string): any => {
+    target['_comparators'] = target['_comparators'] || {}
+    target['_comparators'][propertyKey] = comparator
+  }
+}

package/src/helpers.tsx

@@ -0,0 +1,87 @@
+import { useRef } from 'react'
+
+import { StoreInfo } from './interfaces'
+
+const wkm = new WeakMap<any, string>()
+const weakKey = (obj: any, prefix = '') => {
+  if (wkm.has(obj)) return wkm.get(obj)!
+  const key = `${prefix}-${Math.random()}`
+  wkm.set(obj, key)
+  return key
+}
+
+export function getStoreUid(Constructor: any, props: string | Object | void) {
+  // in dev mode we can use name which gives us nice `allStores.StoreName` access
+  // in prod mode it usually is minified and mangled, unsafe to use name so use weakkey
+  const storeName =
+    process.env.NODE_ENV === 'development' ? Constructor.name : weakKey(Constructor)
+  return `${storeName}${!props ? '' : typeof props === 'string' ? props : getKey(props)}`
+}
+
+export const UNWRAP_STORE_INFO = Symbol('UNWRAP_STORE_INFO')
+export const cache = new Map<string, StoreInfo>()
+
+export function getStoreDescriptors(storeInstance: any) {
+  const proto = Object.getPrototypeOf(storeInstance)
+  const instanceDescriptors = Object.getOwnPropertyDescriptors(storeInstance)
+  const protoDescriptors = Object.getOwnPropertyDescriptors(proto)
+  const descriptors = {
+    ...protoDescriptors,
+    ...instanceDescriptors,
+  }
+  // @ts-ignore
+  delete descriptors.constructor
+  return descriptors
+}
+
+export function get<A>(_: A, b?: any): A extends new (props?: any) => infer B ? B : A {
+  return _ as any
+}
+
+export function getKey(props: Object) {
+  let s = ''
+  const sorted = Object.keys(props).sort()
+  for (const key of sorted) {
+    const v = props[key]
+    if (v && typeof v === 'object') {
+      s += getKey(v)
+    } else {
+      s += `.${key}:${v}`
+    }
+  }
+  return s
+}
+
+type ResultBox<T> = { v: T }
+
+export default function useConstant<T>(fn: () => T): T {
+  const ref = useRef<ResultBox<T>>()
+  if (!ref.current) {
+    ref.current = { v: fn() }
+  }
+  return ref.current.v
+}
+
+export function simpleStr(arg: any) {
+  if (process.env.NODE_ENV === 'development') {
+    return typeof arg === 'function'
+      ? 'fn'
+      : typeof arg === 'string'
+      ? `"${arg}"`
+      : !arg
+      ? arg
+      : typeof arg !== 'object'
+      ? arg
+      : Array.isArray(arg)
+      ? '[...]'
+      : `{...}`
+  }
+  return arg
+}
+// helper for debugging
+
+export function getStoreDebugInfo(store: any) {
+  return (
+    store[UNWRAP_STORE_INFO] ?? cache.get(getStoreUid(store.constructor, store.props))
+  )
+}

package/src/index.ts

@@ -0,0 +1,9 @@
+export * from './useStore'
+export { configureUseStore } from './configureUseStore'
+export * from './interfaces'
+export * from './selector'
+export * from './reaction'
+export * from './Store'
+export { UNWRAP_PROXY } from './constants'
+export * from './comparators'
+export * from './decorators'

package/src/interfaces.tsx

@@ -0,0 +1,32 @@
+import { Store } from './Store'
+
+export type Selector<A = unknown, B = unknown> = (x: A) => B
+
+export type UseStoreSelector<Store, Res> = (store: Store) => Res
+export type UseStoreOptions<Store = any, SelectorRes = any> = {
+  debug?: boolean
+  selector?: UseStoreSelector<Store, SelectorRes>
+  once?: boolean
+}
+
+export type StoreInfo<A = Store> = {
+  keyComparators?: {
+    [key: string]: (a: any, b: any) => boolean
+  }
+  // proxied store
+  store: A
+  storeInstance: any
+  getters: { [key: string]: any }
+  actions: any
+  stateKeys: string[]
+  gettersState: {
+    getCache: Map<string, any>
+    depsToGetter: Map<string, Set<string>>
+    curGetKeys: Set<string>
+    isGetting: boolean
+  }
+}
+
+export type UseStoreConfig = {
+  logLevel?: 'debug' | 'info' | 'error'
+}

package/src/reaction.tsx

@@ -0,0 +1,109 @@
+import { useMemo } from 'react'
+
+import { isEqualSubsetShallow } from './comparators'
+import { UNWRAP_PROXY } from './constants'
+import { Store } from './Store'
+import { setIsInReaction } from './useStore'
+
+const dispose = (d: any) => {
+  if (typeof d === 'function') {
+    d()
+  }
+}
+
+export function useReaction<
+  StoreInstance extends Store<any>,
+  Selector extends (a: StoreInstance) => any
+>(
+  store: StoreInstance,
+  selector: Selector,
+  receiver: Selector extends (a: StoreInstance) => infer Derived
+    ? (a: Derived) => any
+    : unknown,
+  equalityFn: (a: any, b: any) => boolean = isEqualSubsetShallow,
+  memoArgs?: any[]
+) {
+  return useMemo(() => reaction(store, selector, receiver, equalityFn), [memoArgs])
+}
+
+export function reaction<
+  StoreInstance extends Store<any>,
+  Selector extends (a: StoreInstance) => any
+>(
+  store: StoreInstance,
+  selector: Selector,
+  receiver: Selector extends (a: StoreInstance) => infer Derived
+    ? (a: Derived) => any
+    : unknown,
+  equalityFn: (a: any, b: any) => boolean = isEqualSubsetShallow
+) {
+  let last: any = undefined
+  let innerDispose: any
+
+  function updateReaction() {
+    try {
+      setIsInReaction(true)
+      const storeInstance = store[UNWRAP_PROXY] || store
+      const next = selector(storeInstance)
+      if (!equalityFn(last, next)) {
+        if (process.env.NODE_ENV === 'development') {
+          console.groupCollapsed(
+            `🌑  ⏭ %c${receiver.name.padStart(24)} (${storeInstance.constructor.name}${
+              store.props?.id ? `:${store.props.id}` : ''
+            }) ${last} => ${next}`,
+            'color: chocolate;'
+          )
+          console.groupCollapsed('trace >')
+          console.trace()
+          console.groupEnd()
+          console.log('  ARG', next)
+          console.groupEnd()
+        }
+        dispose(innerDispose)
+        last = next
+        innerDispose = receiver(next)
+      }
+    } finally {
+      setIsInReaction(false)
+    }
+  }
+
+  const disposeSubscribe = store.subscribe(updateReaction)
+  updateReaction()
+
+  return () => {
+    disposeSubscribe()
+    dispose(innerDispose)
+  }
+}
+
+// start on simpler reaction
+// export function reaction2(fn: () => any): () => void {
+//   let state = runStoreSelector(fn)
+//   let disposeSubscribe
+//   const disposePrev = () => {
+//     // treat return functions as dispose
+//     if (typeof state.value === 'function') {
+//       state.value()
+//     }
+//   }
+//   const dispose = () => {
+//     disposeSubscribe?.()
+//     disposePrev()
+//   }
+//   function update() {
+//     dispose()
+//     disposeSubscribe = subscribeToStores([...state.stores], () => {
+//       const next = runStoreSelector(fn)
+//       disposePrev()
+//       if (!isEqualSubsetShallow(state.stores, next.stores)) {
+//         state = next
+//         update()
+//       } else {
+//         state = next
+//       }
+//     })
+//   }
+//   update()
+//   return dispose
+// }

package/src/selector.tsx

@@ -0,0 +1,129 @@
+import { useEffect, useState } from 'react'
+
+import { isEqualSubsetShallow } from './comparators'
+import { UNWRAP_PROXY } from './constants'
+import { setIsInReaction, trackStoresAccess } from './useStore'
+
+// TODO i think we can just replace reaction() with this, its not worse in any way
+
+const logUpdate =
+  process.env.NODE_ENV === 'development'
+    ? (fn: any, stores: any[], last: any, next: any) => {
+        const getStoreLogName = (store: any) => {
+          const str = store[UNWRAP_PROXY] ?? store
+          return `${str.constructor.name}${store.props?.id ? `:${store.props.id}` : ''}`
+        }
+        const storeNames = stores.map(getStoreLogName).join(', ')
+        const name = `🌑  ▶️ %c${fn.name} ${storeNames} () ${last} => ${next}`
+        console.groupCollapsed(name, 'color: tomato;')
+        console.groupCollapsed('trace >')
+        console.trace()
+        console.groupEnd()
+        console.log('  next', next)
+        console.groupEnd()
+      }
+    : null
+
+// TODO test this works the same as useSelector
+export function selector(fn: () => any) {
+  let prev = runStoreSelector(fn)
+  let disposeValue: Function | null = null
+  const subscribe = () => {
+    return subscribeToStores([...prev.stores], () => {
+      try {
+        disposeValue?.()
+        setIsInReaction(true)
+        const next = runStoreSelector(fn)
+        if (typeof next.value === 'function') {
+          disposeValue = next.value
+          if (process.env.NODE_ENV === 'development') {
+            logUpdate!(fn, [...next.stores], '(fn)', '(fn)')
+          }
+          return
+        }
+        if (
+          isEqualSubsetShallow(prev.stores, next.stores) &&
+          isEqualSubsetShallow(prev.value, next.value)
+        ) {
+          return
+        }
+        if (process.env.NODE_ENV === 'development') {
+          logUpdate!(fn, [...next.stores], prev.value, next.value)
+        }
+        prev = next
+        dispose()
+        dispose = subscribe()
+      } finally {
+        setIsInReaction(false)
+      }
+    })
+  }
+  let dispose = subscribe()
+  return () => {
+    dispose()
+    disposeValue?.()
+  }
+}
+
+export function useSelector<A>(fn: () => A): A {
+  const [state, setState] = useState(() => {
+    return runStoreSelector(fn)
+  })
+
+  useEffect(() => {
+    let dispose
+    const unsub = subscribeToStores([...state.stores], () => {
+      dispose?.()
+      const next = runStoreSelector(fn)
+      // return function === return disposable
+      if (typeof next.value === 'function') {
+        if (process.env.NODE_ENV === 'development') {
+          logUpdate!(fn, [...next.stores], '(fn)', '(fn)')
+        }
+        dispose = next.value
+        return
+      }
+      setState((prev) => {
+        if (
+          isEqualSubsetShallow(prev.stores, next.stores) &&
+          isEqualSubsetShallow(prev.value, next.value)
+        ) {
+          return prev
+        }
+        if (process.env.NODE_ENV === 'development') {
+          logUpdate!(fn, [...next.stores], prev.value, next.value)
+        }
+        return next
+      })
+    })
+    return () => {
+      unsub()
+      dispose?.()
+    }
+  }, [...state.stores])
+
+  return state.value
+}
+
+function runStoreSelector<A>(selector: () => A): { value: A; stores: Set<any> } {
+  const stores = new Set()
+  const dispose = trackStoresAccess((store) => {
+    stores.add(store)
+  })
+  const value = selector()
+  dispose()
+  return {
+    value,
+    stores,
+  }
+}
+
+function subscribeToStores(stores: any[], onUpdate: () => any) {
+  const disposes: Function[] = []
+  for (const store of stores) {
+    disposes.push(store.subscribe(onUpdate))
+  }
+  return () => {
+    disposes.forEach((x) => x())
+  }
+}