@hanzogui/use-store 2.0.0

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,56 @@
+import { simpleHash } from '@hanzogui/simple-hash'
+
+import type { StoreInfo } from './interfaces'
+
+export function getStoreUid(Constructor: any, props: string | object | void) {
+  return simpleHash(
+    `${Constructor}${
+      !props ? '' : typeof props === 'string' ? props : JSON.stringify(props)
+    }`,
+    'strict'
+  )
+}
+
+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 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,12 @@
+export * from './useStore'
+export { configureUseStore } from './configureUseStore'
+export * from './interfaces'
+export * from './observe'
+export { UNWRAP_PROXY } from './constants'
+export * from './comparators'
+export * from './decorators'
+
+// to extend for prop types
+export class Store<Props extends Record<string, any>> {
+  constructor(public props: Props) {}
+}

package/src/interfaces.tsx

@@ -0,0 +1,46 @@
+import type { StoreTracker } from './useStore'
+
+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 interface Store<Props = Record<string, any> | null | undefined> {
+  new (...args: any[]): any
+  props: Props
+}
+
+export type StoreInfo<A = Store> = {
+  uid: string
+  keyComparators?: {
+    [key: string]: (a: any, b: any) => boolean
+  }
+  // proxied store
+  store: A
+  props: Record<string, any> | null
+  storeInstance: any
+  getters: { [key: string]: any }
+  actions: any
+  stateKeys: Set<string>
+  debug?: boolean
+  gettersState: {
+    getCache: Map<string, any>
+    depsToGetter: Map<string, Set<string>>
+    curGetKeys: Set<string>
+    isGetting: boolean
+  }
+  listeners: Set<Function>
+  trackers: Set<StoreTracker>
+  version: number
+  subscribe: (onChanged: () => void) => () => void
+  triggerUpdate: Function
+  disableTracking: boolean
+}
+
+export type UseStoreConfig = {
+  logLevel?: 'debug' | 'info' | 'error'
+}

package/src/observe.tsx

@@ -0,0 +1,160 @@
+import React from 'react'
+
+import { isEqualSubsetShallow } from './comparators'
+import { UNWRAP_PROXY } from './constants'
+import type { StoreInfo } from './interfaces'
+import { trackStoresAccess } from './useStore'
+
+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.info('  next', next)
+        console.groupEnd()
+      }
+    : null
+
+export function observe(fn: () => any) {
+  let prev = getObserverValueAndStoresAccessed(fn)
+  let disposeValue: Function | null = null
+
+  const subscribe = () => {
+    const stores = [...prev.storeInfos]
+    return subscribeToStores(stores, () => {
+      disposeValue?.()
+      const next = getObserverValueAndStoresAccessed(fn)
+
+      if (typeof next.value === 'function') {
+        disposeValue = next.value
+        if (process.env.NODE_ENV === 'development') {
+          logUpdate!(fn, [...next.storeInfos], '(fn)', '(fn)')
+        }
+        return
+      }
+      if (
+        isEqualSubsetShallow(prev.storeInfos, next.storeInfos) &&
+        isEqualSubsetShallow(prev.value, next.value)
+      ) {
+        return
+      }
+      if (process.env.NODE_ENV === 'development') {
+        logUpdate!(fn, [...next.storeInfos], prev.value, next.value)
+      }
+      prev = next
+      dispose()
+      dispose = subscribe()
+    })
+  }
+
+  let dispose = subscribe()
+
+  return {
+    dispose: () => {
+      dispose()
+      disposeValue?.()
+    },
+    getValue: () => prev.value,
+  }
+}
+
+export function useObserve<A>(fn: () => A): A {
+  const [state, setState] = React.useState(() => {
+    return getObserverValueAndStoresAccessed(fn)
+  })
+
+  React.useEffect(() => {
+    let dispose
+    const unsub = subscribeToStores([...state.storeInfos], () => {
+      dispose?.()
+      const next = getObserverValueAndStoresAccessed(fn)
+
+      const nextStoreInfos = [...next.storeInfos]
+      const prevStoreInfos = [...state.storeInfos]
+
+      // return function === return disposable
+      if (typeof next.value === 'function') {
+        if (process.env.NODE_ENV === 'development') {
+          logUpdate!(fn, nextStoreInfos, '(fn)', '(fn)')
+        }
+        dispose = next.value
+        return
+      }
+
+      setState((prev) => {
+        if (
+          isEqualSubsetShallow(prevStoreInfos, nextStoreInfos) &&
+          isEqualSubsetShallow(prev.value, next.value)
+        ) {
+          return prev
+        }
+        if (process.env.NODE_ENV === 'development') {
+          logUpdate!(fn, nextStoreInfos, prev.value, next.value)
+        }
+        return next
+      })
+    })
+
+    return () => {
+      unsub()
+      dispose?.()
+    }
+  }, [[...state.storeInfos].map((i) => i.uid).join(',')])
+
+  return state.value
+}
+
+function getObserverValueAndStoresAccessed<A>(selector: () => A): {
+  value: A
+  storeInfos: Set<StoreInfo>
+} {
+  const storeInfos = new Set<StoreInfo>()
+  const dispose = trackStoresAccess((storeInfo) => {
+    storeInfos.add(storeInfo)
+  })
+  const value = selector()
+  dispose()
+  return {
+    value,
+    storeInfos,
+  }
+}
+
+function subscribeToStores(storeInfos: StoreInfo[], onUpdate: () => any) {
+  const disposes: Function[] = []
+
+  // wrap onUpdate to avoid waterfall calls + avoid tracking during onUpdate
+  let isUpdating = false
+  const onUpdateDebouncedWithoutTracking = () => {
+    if (isUpdating) return
+    isUpdating = true
+    queueMicrotask(() => {
+      try {
+        for (const storeInfo of storeInfos) {
+          storeInfo.disableTracking = true
+        }
+        onUpdate()
+      } finally {
+        isUpdating = false
+        for (const storeInfo of storeInfos) {
+          storeInfo.disableTracking = false
+        }
+      }
+    })
+  }
+
+  for (const storeInfo of storeInfos) {
+    disposes.push(storeInfo.subscribe(onUpdateDebouncedWithoutTracking))
+  }
+  return () => {
+    disposes.forEach((x) => x())
+  }
+}