wwf
8 天以前 938c3e5a587ce950a94964ea509b9e7f8834dfae
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import { type Context, type Provider, createContext, useContext } from 'react'
import * as selector from 'use-context-selector'
 
const createCreateCtxFunction = (
  useContextImpl: typeof useContext,
  createContextImpl: typeof createContext) => {
  return function<T>({ name, defaultValue }: CreateCtxOptions<T> = {}): CreateCtxReturn<T> {
    const emptySymbol = Symbol(`empty ${name}`)
    // @ts-expect-error it's ok here
    const context = createContextImpl<T>(defaultValue ?? emptySymbol)
    const useContextValue = () => {
      const ctx = useContextImpl(context)
      if (ctx === emptySymbol)
        throw new Error(`No ${name ?? 'related'} context found.`)
 
      return ctx
    }
    const result = [context.Provider, useContextValue, context] as CreateCtxReturn<T>
    result.context = context
    result.provider = context.Provider
    result.useContextValue = useContextValue
    return result
  }
}
 
type CreateCtxOptions<T> = {
  defaultValue?: T
  name?: string
}
 
type CreateCtxReturn<T> = [Provider<T>, () => T, Context<T>] & {
  context: Context<T>
  provider: Provider<T>
  useContextValue: () => T
}
 
// example
// const [AppProvider, useApp, AppContext] = createCtx<AppContextValue>()
 
export const createCtx = createCreateCtxFunction(useContext, createContext)
 
export const createSelectorCtx = createCreateCtxFunction(
  selector.useContext,
  selector.createContext as typeof createContext,
)