create-effect-with-target

1import { isBrowser, isEqual, isFunction } from 'es-toolkit'
2import { useRef } from 'react'
3import { useUnmount } from '@/registry/hooks/use-unmount'
4import type {
5  DependencyList,
6  EffectCallback,
7  RefObject,
8  useEffect,
9  useLayoutEffect,
10} from 'react'
11 
12type TargetValue<T> = T | undefined | null
13 
14type TargetType = HTMLElement | Element | Window | Document
15 
16export type BasicTarget<T extends TargetType = Element> =
17  | (() => TargetValue<T>)
18  | TargetValue<T>
19  | RefObject<TargetValue<T>>
20 
21export function getTargetElement<T extends TargetType>(
22  target: BasicTarget<T>,
23  defaultElement?: T,
24) {
25  if (!isBrowser) {
26    return undefined
27  }
28 
29  if (!target) {
30    return defaultElement
31  }
32 
33  let targetElement: TargetValue<T>
34 
35  if (isFunction(target)) {
36    targetElement = target()
37  } else if ('current' in target) {
38    targetElement = target.current
39  } else {
40    targetElement = target
41  }
42 
43  return targetElement
44}
45 
46export function createEffectWithTarget(
47  useEffectType: typeof useEffect | typeof useLayoutEffect,
48) {
49  /**
50   *
51   * @param effect
52   * @param deps
53   * @param target target should compare ref.current vs ref.current, dom vs dom, ()=>dom vs ()=>dom
54   */
55  const useEffectWithTarget = (
56    effect: EffectCallback,
57    deps: DependencyList,
58    target: BasicTarget<any> | BasicTarget<any>[],
59  ) => {
60    const hasInitRef = useRef(false)
61 
62    const lastElementRef = useRef<(Element | null)[]>([])
63    const lastDepsRef = useRef<DependencyList>([])
64 
65    const unLoadRef = useRef<any>(undefined)
66 
67    useEffectType(() => {
68      const targets = Array.isArray(target) ? target : [target]
69      const els = targets.map((item) => getTargetElement(item))
70 
71      // init run
72      if (!hasInitRef.current) {
73        hasInitRef.current = true
74        lastElementRef.current = els
75        lastDepsRef.current = deps
76 
77        unLoadRef.current = effect()
78        return
79      }
80 
81      if (
82        els.length !== lastElementRef.current.length ||
83        !isEqual(lastElementRef.current, els) ||
84        !isEqual(lastDepsRef.current, deps)
85      ) {
86        unLoadRef.current?.()
87 
88        lastElementRef.current = els
89        lastDepsRef.current = deps
90        unLoadRef.current = effect()
91      }
92    })
93 
94    useUnmount(() => {
95      unLoadRef.current?.()
96      // for react-refresh
97      hasInitRef.current = false
98    })
99  }
100 
101  return useEffectWithTarget
102}