-
Notifications
You must be signed in to change notification settings - Fork 114
/
index.ts
121 lines (110 loc) · 3.84 KB
/
index.ts
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import { createContext, createComponent, useContext, JSX, Context, FlowComponent } from "solid-js";
import type { ContextProviderComponent } from "../node_modules/solid-js/types/reactive/signal.js";
export type ContextProviderProps = {
children?: JSX.Element;
} & Record<string, unknown>;
export type ContextProvider<T extends ContextProviderProps> = (
props: { children: JSX.Element } & T,
) => JSX.Element;
/**
* Create the Context Provider component and useContext function with types inferred from the factory function.
* @param factoryFn Factory function will run when the provider component in executed. It takes the provider component `props` as it's argument, and what it returns will be available in the contexts for all the underlying components.
* @param defaults fallback returned from useContext function if the context wasn't provided
* @returns tuple of `[provider component, useContext function]`
* @example
* ```tsx
* const [CounterProvider, useCounter] = createContextProvider((props: { initial: number }) => {
* const [count, setCount] = createSignal(props.initial);
* const increment = () => setCount(count() + 1)
* return { count, increment };
* });
* // Provide the context
* <CounterProvider initial={1}>
* <App/>
* </CounterProvider>
* // get the context
* const ctx = useCounter()
* ctx?.count() // => 1
* ```
*/
export function createContextProvider<T, P extends ContextProviderProps>(
factoryFn: (props: P) => T,
defaults: T,
): [provider: ContextProvider<P>, useContext: () => T];
export function createContextProvider<T, P extends ContextProviderProps>(
factoryFn: (props: P) => T,
): [provider: ContextProvider<P>, useContext: () => T | undefined];
export function createContextProvider<T, P extends ContextProviderProps>(
factoryFn: (props: P) => T,
defaults?: T,
): [provider: ContextProvider<P>, useContext: () => T | undefined] {
const ctx = createContext(defaults);
return [
props => {
return createComponent(ctx.Provider, {
value: factoryFn(props),
get children() {
return props.children;
},
});
},
() => useContext(ctx),
];
}
/*
MultiProvider inspired by the preact-multi-provider package from Marvin Hagemeister
See https://github.com/marvinhagemeister/preact-multi-provider
Type validation of the `values` array thanks to the amazing @otonashixav (https://github.com/otonashixav)
*/
/**
* A component that allows you to provide multiple contexts at once. It will work exactly like nesting multiple providers as separate components, but it will save you from the nesting.
*
* @param values Array of tuples of `[ContextProviderComponent, value]` or `[Context, value]` or bound `ContextProviderComponent` (that doesn't take a `value` property).
*
* @example
* ```tsx
* // before
* <CounterCtx.Provider value={1}>
* <NameCtx.Provider value="John">
* <App/>
* </NameCtx.Provider>
* </CounterCtx.Provider>
*
* // after
* <MultiProvider values={[
* [CounterCtx.Provider, 1],
* [NameCtx.Provider, "John"]
* ]}>
* <App/>
* </MultiProvider>
* ```
*/
export function MultiProvider<T extends readonly [unknown?, ...unknown[]]>(props: {
values: {
[K in keyof T]:
| readonly [
Context<T[K]> | ContextProviderComponent<T[K]>,
[T[K]][T extends unknown ? 0 : never],
]
| FlowComponent;
};
children: JSX.Element;
}): JSX.Element {
const { values } = props;
const fn = (i: number) => {
let item: any = values[i];
if (!item) return props.children;
const ctxProps: { value?: any; children: JSX.Element } = {
get children() {
return fn(i + 1);
},
};
if (Array.isArray(item)) {
ctxProps.value = item[1];
item = item[0];
if (typeof item !== "function") item = item.Provider;
}
return createComponent(item, ctxProps);
};
return fn(0);
}