@zayne-labs/toolkit-react 0.11.19 → 0.11.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/hooks/createCustomContext.d.ts +21 -0
- package/dist/esm/hooks/createCustomContext.js +25 -0
- package/dist/esm/hooks/createCustomContext.js.map +1 -0
- package/dist/esm/hooks/effects/useAfterMountEffect.d.ts +7 -0
- package/dist/esm/hooks/effects/useAfterMountEffect.js +19 -0
- package/dist/esm/hooks/effects/useAfterMountEffect.js.map +1 -0
- package/dist/esm/hooks/effects/useAsyncEffect.d.ts +5 -0
- package/dist/esm/hooks/effects/useAsyncEffect.js +20 -0
- package/dist/esm/hooks/effects/useAsyncEffect.js.map +1 -0
- package/dist/esm/hooks/effects/useEffectOnce.d.ts +5 -0
- package/dist/esm/hooks/effects/useEffectOnce.js +17 -0
- package/dist/esm/hooks/effects/useEffectOnce.js.map +1 -0
- package/dist/esm/hooks/effects/useLifeCycle.d.ts +13 -0
- package/dist/esm/hooks/effects/useLifeCycle.js +16 -0
- package/dist/esm/hooks/effects/useLifeCycle.js.map +1 -0
- package/dist/esm/hooks/effects/useMountEffect.d.ts +5 -0
- package/dist/esm/hooks/effects/useMountEffect.js +10 -0
- package/dist/esm/hooks/effects/useMountEffect.js.map +1 -0
- package/dist/esm/hooks/effects/useUnMountEffect.d.ts +7 -0
- package/dist/esm/hooks/effects/useUnMountEffect.js +8 -0
- package/dist/esm/hooks/effects/useUnMountEffect.js.map +1 -0
- package/dist/esm/hooks/index.d.ts +27 -2
- package/dist/esm/hooks/index.js +27 -2
- package/dist/esm/hooks/useAnimateElementRefs.d.ts +19 -0
- package/dist/esm/hooks/useAnimateElementRefs.js +54 -0
- package/dist/esm/hooks/useAnimateElementRefs.js.map +1 -0
- package/dist/esm/hooks/useAnimationInterval.d.ts +15 -0
- package/dist/esm/hooks/useAnimationInterval.js +27 -0
- package/dist/esm/hooks/useAnimationInterval.js.map +1 -0
- package/dist/esm/hooks/useCallbackRef.d.ts +13 -0
- package/dist/esm/hooks/useCallbackRef.js +19 -0
- package/dist/esm/hooks/useCallbackRef.js.map +1 -0
- package/dist/esm/hooks/useClickOutside.d.ts +14 -0
- package/dist/esm/hooks/useClickOutside.js +25 -0
- package/dist/esm/hooks/useClickOutside.js.map +1 -0
- package/dist/esm/hooks/useComposeRefs.d.ts +8 -0
- package/dist/esm/hooks/useComposeRefs.js +11 -0
- package/dist/esm/hooks/useComposeRefs.js.map +1 -0
- package/dist/esm/hooks/useConstant.d.ts +6 -0
- package/dist/esm/hooks/useConstant.js +17 -0
- package/dist/esm/hooks/useConstant.js.map +1 -0
- package/dist/esm/hooks/useControllable.d.ts +55 -0
- package/dist/esm/hooks/useControllable.js +79 -0
- package/dist/esm/hooks/useControllable.js.map +1 -0
- package/dist/esm/hooks/useCopyToClipboard.d.ts +15 -0
- package/dist/esm/hooks/useCopyToClipboard.js +49 -0
- package/dist/esm/hooks/useCopyToClipboard.js.map +1 -0
- package/dist/esm/hooks/useDebounce.d.ts +23 -0
- package/dist/esm/hooks/useDebounce.js +32 -0
- package/dist/esm/hooks/useDebounce.js.map +1 -0
- package/dist/esm/hooks/useDisclosure.d.ts +14 -0
- package/dist/esm/hooks/useDisclosure.js +42 -0
- package/dist/esm/hooks/useDisclosure.js.map +1 -0
- package/dist/esm/hooks/useIsHydrated.d.ts +28 -0
- package/dist/esm/hooks/useIsHydrated.js +39 -0
- package/dist/esm/hooks/useIsHydrated.js.map +1 -0
- package/dist/esm/hooks/useLocationState.d.ts +17 -0
- package/dist/esm/hooks/useLocationState.js +24 -0
- package/dist/esm/hooks/useLocationState.js.map +1 -0
- package/dist/esm/hooks/useScrollObserver.d.ts +11 -0
- package/dist/esm/hooks/useScrollObserver.js +44 -0
- package/dist/esm/hooks/useScrollObserver.js.map +1 -0
- package/dist/esm/hooks/useSearch.d.ts +12 -0
- package/dist/esm/hooks/useSearch.js +40 -0
- package/dist/esm/hooks/useSearch.js.map +1 -0
- package/dist/esm/hooks/useSearchParams.d.ts +12 -0
- package/dist/esm/hooks/useSearchParams.js +36 -0
- package/dist/esm/hooks/useSearchParams.js.map +1 -0
- package/dist/esm/hooks/useShallowCompare.d.ts +8 -0
- package/dist/esm/hooks/useShallowCompare.js +26 -0
- package/dist/esm/hooks/useShallowCompare.js.map +1 -0
- package/dist/esm/hooks/useStorageState.d.ts +20 -0
- package/dist/esm/hooks/useStorageState.js +54 -0
- package/dist/esm/hooks/useStorageState.js.map +1 -0
- package/dist/esm/hooks/useStore.d.ts +8 -0
- package/dist/esm/hooks/useStore.js +13 -0
- package/dist/esm/hooks/useStore.js.map +1 -0
- package/dist/esm/hooks/useThrottle.d.ts +15 -0
- package/dist/esm/hooks/useThrottle.js +27 -0
- package/dist/esm/hooks/useThrottle.js.map +1 -0
- package/dist/esm/hooks/useToggle.d.ts +6 -0
- package/dist/esm/hooks/useToggle.js +18 -0
- package/dist/esm/hooks/useToggle.js.map +1 -0
- package/dist/esm/utils/composeEventHandlers.d.ts +8 -0
- package/dist/esm/utils/composeEventHandlers.js +36 -0
- package/dist/esm/utils/composeEventHandlers.js.map +1 -0
- package/dist/esm/utils/composeRefs.d.ts +17 -0
- package/dist/esm/utils/composeRefs.js +28 -0
- package/dist/esm/utils/composeRefs.js.map +1 -0
- package/dist/esm/utils/getSlot/getSlot.d.ts +60 -0
- package/dist/esm/utils/getSlot/getSlot.js +78 -0
- package/dist/esm/utils/getSlot/getSlot.js.map +1 -0
- package/dist/esm/utils/getSlotMap/getSlotMap.d.ts +86 -0
- package/dist/esm/utils/getSlotMap/getSlotMap.js +87 -0
- package/dist/esm/utils/getSlotMap/getSlotMap.js.map +1 -0
- package/dist/esm/utils/index.d.ts +8 -1
- package/dist/esm/utils/index.js +6 -1
- package/dist/esm/utils/mergeProps.d.ts +20 -0
- package/dist/esm/utils/mergeProps.js +31 -0
- package/dist/esm/utils/mergeProps.js.map +1 -0
- package/dist/esm/utils/mergeTwoProps.d.ts +5 -0
- package/dist/esm/utils/mergeTwoProps.js +42 -0
- package/dist/esm/utils/mergeTwoProps.js.map +1 -0
- package/dist/esm/utils/types/common.d.ts +43 -0
- package/dist/esm/utils/types/polymorphism.d.ts +13 -0
- package/dist/esm/zustand/createReactZustandStore.js +8 -0
- package/dist/esm/zustand/createReactZustandStore.js.map +1 -0
- package/dist/esm/zustand/createZustandContext.d.ts +13 -0
- package/dist/esm/zustand/createZustandContext.js +21 -0
- package/dist/esm/zustand/createZustandContext.js.map +1 -0
- package/dist/esm/zustand/createZustandStoreWithCombine.d.ts +12 -0
- package/dist/esm/zustand/createZustandStoreWithCombine.js +14 -0
- package/dist/esm/zustand/createZustandStoreWithCombine.js.map +1 -0
- package/dist/esm/zustand/createZustandStoreWithSubscribe.d.ts +17 -0
- package/dist/esm/zustand/createZustandStoreWithSubscribe.js +16 -0
- package/dist/esm/zustand/createZustandStoreWithSubscribe.js.map +1 -0
- package/dist/esm/zustand/index.d.ts +4 -38
- package/dist/esm/zustand/index.js +4 -42
- package/dist/esm/zustand/types.d.ts +20 -0
- package/package.json +11 -16
- package/dist/esm/hooks-iZivekUZ.js +0 -635
- package/dist/esm/hooks-iZivekUZ.js.map +0 -1
- package/dist/esm/index-DlScRgBk.d.ts +0 -228
- package/dist/esm/index-ouFKofvj.d.ts +0 -293
- package/dist/esm/utils-Bvs8tFDM.js +0 -279
- package/dist/esm/utils-Bvs8tFDM.js.map +0 -1
- package/dist/esm/zustand/index.js.map +0 -1
|
@@ -1,279 +0,0 @@
|
|
|
1
|
-
import { Fragment, isValidElement } from "react";
|
|
2
|
-
import { toArray } from "@zayne-labs/toolkit-core";
|
|
3
|
-
import { AssertionError, isArray, isFunction, isObject } from "@zayne-labs/toolkit-type-helpers";
|
|
4
|
-
|
|
5
|
-
//#region src/utils/composeEventHandlers.ts
|
|
6
|
-
const isSyntheticEvent = (event) => {
|
|
7
|
-
return isObject(event) && Object.hasOwn(event, "nativeEvent");
|
|
8
|
-
};
|
|
9
|
-
const composeTwoEventHandlers = (formerHandler, latterHandler) => {
|
|
10
|
-
const mergedEventHandler = (event) => {
|
|
11
|
-
if (isSyntheticEvent(event)) {
|
|
12
|
-
const result$1 = latterHandler?.(event);
|
|
13
|
-
if (!event.defaultPrevented) formerHandler?.(event);
|
|
14
|
-
return result$1;
|
|
15
|
-
}
|
|
16
|
-
const result = latterHandler?.(event);
|
|
17
|
-
formerHandler?.(event);
|
|
18
|
-
return result;
|
|
19
|
-
};
|
|
20
|
-
return mergedEventHandler;
|
|
21
|
-
};
|
|
22
|
-
const composeEventHandlers = (...eventHandlerArray) => {
|
|
23
|
-
const mergedEventHandler = (event) => {
|
|
24
|
-
if (eventHandlerArray.length === 0) return;
|
|
25
|
-
if (eventHandlerArray.length === 1) return eventHandlerArray[0]?.(event);
|
|
26
|
-
let accumulatedHandlers;
|
|
27
|
-
for (const eventHandler of eventHandlerArray) {
|
|
28
|
-
if (!eventHandler) continue;
|
|
29
|
-
accumulatedHandlers = composeTwoEventHandlers(accumulatedHandlers, eventHandler);
|
|
30
|
-
}
|
|
31
|
-
return accumulatedHandlers?.(event);
|
|
32
|
-
};
|
|
33
|
-
return mergedEventHandler;
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
//#endregion
|
|
37
|
-
//#region src/utils/composeRefs.ts
|
|
38
|
-
/**
|
|
39
|
-
* @description Set a given ref to a given value.
|
|
40
|
-
*
|
|
41
|
-
* This utility takes care of different types of refs: callback refs and RefObject(s)
|
|
42
|
-
*/
|
|
43
|
-
const setRef = (ref, node) => {
|
|
44
|
-
if (!ref) return;
|
|
45
|
-
if (isFunction(ref)) return ref(node);
|
|
46
|
-
ref.current = node;
|
|
47
|
-
};
|
|
48
|
-
/**
|
|
49
|
-
* @description A utility to combine refs. Accepts callback refs and RefObject(s)
|
|
50
|
-
*/
|
|
51
|
-
const composeRefs = (...refs) => {
|
|
52
|
-
const mergedRefCallBack = (node) => {
|
|
53
|
-
const cleanupFnArray = refs.map((ref) => setRef(ref, node));
|
|
54
|
-
const cleanupFn = () => cleanupFnArray.forEach((cleanup) => cleanup?.());
|
|
55
|
-
return cleanupFn;
|
|
56
|
-
};
|
|
57
|
-
return mergedRefCallBack;
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
//#endregion
|
|
61
|
-
//#region src/utils/getSlot/getSlot.ts
|
|
62
|
-
const isWithSlotSymbol = (component) => {
|
|
63
|
-
return "slotSymbol" in component && Boolean(component.slotSymbol);
|
|
64
|
-
};
|
|
65
|
-
const isWithSlotReference = (component) => {
|
|
66
|
-
return "slotReference" in component && Boolean(component.slotReference);
|
|
67
|
-
};
|
|
68
|
-
/**
|
|
69
|
-
* @description Checks if a react child (within the children array) matches the provided SlotComponent using multiple matching strategies:
|
|
70
|
-
* 1. Matches by slot symbol property
|
|
71
|
-
* 2. Matches by component name
|
|
72
|
-
*/
|
|
73
|
-
const matchesSlotComponent = (child, SlotComponent) => {
|
|
74
|
-
if (!isValidElement(child) || !isFunction(child.type)) return false;
|
|
75
|
-
const resolvedChildType = isWithSlotReference(child.type) ? child.type.slotReference : child.type;
|
|
76
|
-
if (isWithSlotSymbol(resolvedChildType) && isWithSlotSymbol(SlotComponent) && resolvedChildType.slotSymbol === SlotComponent.slotSymbol) return true;
|
|
77
|
-
if (child.type.name === SlotComponent.name) return true;
|
|
78
|
-
return false;
|
|
79
|
-
};
|
|
80
|
-
/**
|
|
81
|
-
* @description Checks if a react child (within the children array) matches any of the provided SlotComponents.
|
|
82
|
-
*/
|
|
83
|
-
const matchesAnySlotComponent = (child, SlotComponents) => {
|
|
84
|
-
return SlotComponents.some((SlotComponent) => matchesSlotComponent(child, SlotComponent));
|
|
85
|
-
};
|
|
86
|
-
/**
|
|
87
|
-
* @description Counts how many times a given slot component appears in an array of children
|
|
88
|
-
* @internal
|
|
89
|
-
*/
|
|
90
|
-
const calculateSlotOccurrences = (childrenArray, SlotComponent) => {
|
|
91
|
-
let count = 0;
|
|
92
|
-
for (const child of childrenArray) {
|
|
93
|
-
if (!matchesSlotComponent(child, SlotComponent)) continue;
|
|
94
|
-
count += 1;
|
|
95
|
-
}
|
|
96
|
-
return count;
|
|
97
|
-
};
|
|
98
|
-
/**
|
|
99
|
-
* @description Retrieves a single slot element from a collection of React children that matches the provided SlotComponent component.
|
|
100
|
-
*
|
|
101
|
-
* @throws { AssertionError } when throwOnMultipleSlotMatch is true and multiple slots are found
|
|
102
|
-
*/
|
|
103
|
-
const getSingleSlot = (children, SlotComponent, options = {}) => {
|
|
104
|
-
const { errorMessage = "Only one instance of the SlotComponent is allowed", throwOnMultipleSlotMatch = false } = options;
|
|
105
|
-
const actualChildren = isValidElement(children) && children.type === Fragment ? children.props.children : children;
|
|
106
|
-
const childrenArray = toArray(actualChildren);
|
|
107
|
-
if (throwOnMultipleSlotMatch && calculateSlotOccurrences(childrenArray, SlotComponent) > 1) throw new AssertionError(errorMessage);
|
|
108
|
-
return childrenArray.find((child) => matchesSlotComponent(child, SlotComponent));
|
|
109
|
-
};
|
|
110
|
-
/**
|
|
111
|
-
* @description The same as getSingleSlot, but for multiple slot components
|
|
112
|
-
*/
|
|
113
|
-
const getMultipleSlots = (children, SlotComponents, options) => {
|
|
114
|
-
const { errorMessage, throwOnMultipleSlotMatch } = options ?? {};
|
|
115
|
-
const slots = SlotComponents.map((SlotComponent, index) => getSingleSlot(children, SlotComponent, {
|
|
116
|
-
errorMessage: isArray(errorMessage) ? errorMessage[index] : errorMessage,
|
|
117
|
-
throwOnMultipleSlotMatch: isArray(throwOnMultipleSlotMatch) ? throwOnMultipleSlotMatch[index] : throwOnMultipleSlotMatch
|
|
118
|
-
}));
|
|
119
|
-
return {
|
|
120
|
-
regularChildren: getRegularChildren(children, SlotComponents),
|
|
121
|
-
slots
|
|
122
|
-
};
|
|
123
|
-
};
|
|
124
|
-
/**
|
|
125
|
-
* @description Returns all children that are not slot elements (i.e., don't match any of the provided slot components)
|
|
126
|
-
*/
|
|
127
|
-
const getRegularChildren = (children, SlotComponentOrComponents) => {
|
|
128
|
-
const actualChildren = isValidElement(children) && children.type === Fragment ? children.props.children : children;
|
|
129
|
-
return toArray(actualChildren).filter((child) => !matchesAnySlotComponent(child, toArray(SlotComponentOrComponents)));
|
|
130
|
-
};
|
|
131
|
-
|
|
132
|
-
//#endregion
|
|
133
|
-
//#region src/utils/getSlotMap/getSlotMap.ts
|
|
134
|
-
/**
|
|
135
|
-
* Symbol used to identify SlotComponent instances
|
|
136
|
-
*/
|
|
137
|
-
const slotComponentSymbol = Symbol("slot-component");
|
|
138
|
-
/**
|
|
139
|
-
* @description Creates a map of named slots from React children. Returns an object mapping slot names to their children,
|
|
140
|
-
* with a default slot for unmatched children.
|
|
141
|
-
*
|
|
142
|
-
* @example
|
|
143
|
-
* ```tsx
|
|
144
|
-
* import { type GetSlotComponentProps, SlotComponent } from "@zayne-labs/toolkit-react/utils"
|
|
145
|
-
*
|
|
146
|
-
* type SlotProps = GetSlotComponentProps<"header" | "footer">;
|
|
147
|
-
*
|
|
148
|
-
* function Parent({ children }: { children: React.ReactNode }) {
|
|
149
|
-
* const slots = getSlotMap<SlotProps>(children);
|
|
150
|
-
*
|
|
151
|
-
* return (
|
|
152
|
-
* <div>
|
|
153
|
-
* <header>{slots.header}</header>
|
|
154
|
-
* <main>{slots.default}</main>
|
|
155
|
-
* <footer>{slots.footer}</footer>
|
|
156
|
-
* </div>
|
|
157
|
-
* );
|
|
158
|
-
* }
|
|
159
|
-
* ```
|
|
160
|
-
*
|
|
161
|
-
* Usage:
|
|
162
|
-
* ```tsx
|
|
163
|
-
* <Parent>
|
|
164
|
-
* <SlotComponent name="header">Header Content</SlotComponent>
|
|
165
|
-
* <div>Random stuff</div>
|
|
166
|
-
* <SlotComponent name="footer">Footer Content</SlotComponent>
|
|
167
|
-
* </Parent>
|
|
168
|
-
* ```
|
|
169
|
-
*/
|
|
170
|
-
const getSlotMap = (children) => {
|
|
171
|
-
const slots = { default: [] };
|
|
172
|
-
const actualChildren = isValidElement(children) && children.type === Fragment ? children.props.children : children;
|
|
173
|
-
const childrenArray = toArray(actualChildren);
|
|
174
|
-
for (const child of childrenArray) {
|
|
175
|
-
if (!isValidElement(child) || !isFunction(child.type)) {
|
|
176
|
-
slots.default.push(child);
|
|
177
|
-
continue;
|
|
178
|
-
}
|
|
179
|
-
const childType = child.type;
|
|
180
|
-
if (!(childType.slotSymbol === slotComponentSymbol && Boolean(childType.slotName ?? child.props.name))) {
|
|
181
|
-
slots.default.push(child);
|
|
182
|
-
continue;
|
|
183
|
-
}
|
|
184
|
-
const slotName = childType.slotName ?? child.props.name;
|
|
185
|
-
if (slotName === "default") {
|
|
186
|
-
slots.default.push(child);
|
|
187
|
-
continue;
|
|
188
|
-
}
|
|
189
|
-
slots[slotName] = child;
|
|
190
|
-
}
|
|
191
|
-
return slots;
|
|
192
|
-
};
|
|
193
|
-
/**
|
|
194
|
-
* @description Creates a slot component
|
|
195
|
-
*/
|
|
196
|
-
const createSlotComponent = () => {
|
|
197
|
-
const SlotComponent = (props) => props.children;
|
|
198
|
-
SlotComponent.slotSymbol = slotComponentSymbol;
|
|
199
|
-
return SlotComponent;
|
|
200
|
-
};
|
|
201
|
-
function DefaultSlotComponent(props) {
|
|
202
|
-
return props.children;
|
|
203
|
-
}
|
|
204
|
-
/**
|
|
205
|
-
* @description Adds a slot symbol and name to a slot component passed in
|
|
206
|
-
*/
|
|
207
|
-
const withSlotNameAndSymbol = (name, SlotComponent = DefaultSlotComponent) => {
|
|
208
|
-
SlotComponent.slotSymbol = slotComponentSymbol;
|
|
209
|
-
SlotComponent.slotName = name;
|
|
210
|
-
return SlotComponent;
|
|
211
|
-
};
|
|
212
|
-
|
|
213
|
-
//#endregion
|
|
214
|
-
//#region src/utils/mergeTwoProps.ts
|
|
215
|
-
const isEventHandler = (key, value) => {
|
|
216
|
-
const thirdCharCode = key.codePointAt(2);
|
|
217
|
-
if (!isFunction(value) || thirdCharCode === void 0) return false;
|
|
218
|
-
return key.startsWith("on") && thirdCharCode >= 65 && thirdCharCode <= 90;
|
|
219
|
-
};
|
|
220
|
-
const mergeTwoClassNames = (formerClassName, latterClassName) => {
|
|
221
|
-
if (!latterClassName || !formerClassName) return latterClassName || formerClassName;
|
|
222
|
-
return formerClassName + " " + latterClassName;
|
|
223
|
-
};
|
|
224
|
-
const mergeTwoProps = (formerProps, latterProps) => {
|
|
225
|
-
if (!latterProps || !formerProps) return latterProps ?? formerProps ?? {};
|
|
226
|
-
const propsAccumulator = { ...formerProps };
|
|
227
|
-
for (const latterPropName of Object.keys(latterProps)) {
|
|
228
|
-
const formerPropValue = formerProps[latterPropName];
|
|
229
|
-
const latterPropValue = latterProps[latterPropName];
|
|
230
|
-
if (latterPropName === "className" || latterPropName === "class") {
|
|
231
|
-
propsAccumulator[latterPropName] = mergeTwoClassNames(formerPropValue, latterPropValue);
|
|
232
|
-
continue;
|
|
233
|
-
}
|
|
234
|
-
if (latterPropName === "style") {
|
|
235
|
-
propsAccumulator[latterPropName] = {
|
|
236
|
-
...formerPropValue,
|
|
237
|
-
...latterPropValue
|
|
238
|
-
};
|
|
239
|
-
continue;
|
|
240
|
-
}
|
|
241
|
-
if (isEventHandler(latterPropName, latterPropValue)) {
|
|
242
|
-
propsAccumulator[latterPropName] = composeTwoEventHandlers(formerPropValue, latterPropValue);
|
|
243
|
-
continue;
|
|
244
|
-
}
|
|
245
|
-
propsAccumulator[latterPropName] = latterPropValue;
|
|
246
|
-
}
|
|
247
|
-
return propsAccumulator;
|
|
248
|
-
};
|
|
249
|
-
|
|
250
|
-
//#endregion
|
|
251
|
-
//#region src/utils/mergeProps.ts
|
|
252
|
-
/**
|
|
253
|
-
* Merges multiple sets of React props.
|
|
254
|
-
*
|
|
255
|
-
* - It follows the Object.assign pattern where the rightmost object's fields overwrite
|
|
256
|
-
* the conflicting ones from others. This doesn't apply to event handlers, `className` and `style` props.
|
|
257
|
-
* - Event handlers are merged such that they are called in sequence (the rightmost one being called first),
|
|
258
|
-
* and allows the user to prevent the previous event handlers from being executed by calling the `preventDefault` method.
|
|
259
|
-
* - It also merges the `className` and `style` props, whereby the classes are concatenated
|
|
260
|
-
* and the rightmost styles overwrite the previous ones.
|
|
261
|
-
*
|
|
262
|
-
* @important **`ref` is not merged.**
|
|
263
|
-
* @param props props to merge.
|
|
264
|
-
* @returns the merged props.
|
|
265
|
-
*/
|
|
266
|
-
const mergeProps = (...propsObjectArray) => {
|
|
267
|
-
if (propsObjectArray.length === 0) return {};
|
|
268
|
-
if (propsObjectArray.length === 1) return propsObjectArray[0];
|
|
269
|
-
let accumulatedProps = {};
|
|
270
|
-
for (const propsObject of propsObjectArray) {
|
|
271
|
-
if (!propsObject) continue;
|
|
272
|
-
accumulatedProps = mergeTwoProps(accumulatedProps, propsObject);
|
|
273
|
-
}
|
|
274
|
-
return accumulatedProps;
|
|
275
|
-
};
|
|
276
|
-
|
|
277
|
-
//#endregion
|
|
278
|
-
export { composeEventHandlers, composeRefs, composeTwoEventHandlers, createSlotComponent, getMultipleSlots, getRegularChildren, getSingleSlot, getSlotMap, matchesAnySlotComponent, matchesSlotComponent, mergeProps, mergeTwoProps, setRef, slotComponentSymbol, withSlotNameAndSymbol };
|
|
279
|
-
//# sourceMappingURL=utils-Bvs8tFDM.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils-Bvs8tFDM.js","names":["result","accumulatedHandlers: AnyFunction | undefined","mergedRefCallBack: RefCallback<TRef>","ReactFragment","slots: Record<string, TSlotComponentProps[\"children\"]> & { default: React.ReactNode[] }","ReactFragment","accumulatedProps: Record<string, unknown>"],"sources":["../../src/utils/composeEventHandlers.ts","../../src/utils/composeRefs.ts","../../src/utils/getSlot/getSlot.ts","../../src/utils/getSlotMap/getSlotMap.ts","../../src/utils/mergeTwoProps.ts","../../src/utils/mergeProps.ts"],"sourcesContent":["import { type AnyFunction, isObject } from \"@zayne-labs/toolkit-type-helpers\";\n\nconst isSyntheticEvent = (event: unknown): event is React.SyntheticEvent => {\n\treturn isObject(event) && Object.hasOwn(event, \"nativeEvent\");\n};\n\nexport const composeTwoEventHandlers = (\n\tformerHandler: AnyFunction | undefined,\n\tlatterHandler: AnyFunction | undefined\n) => {\n\tconst mergedEventHandler = (event: unknown) => {\n\t\tif (isSyntheticEvent(event)) {\n\t\t\tconst result = latterHandler?.(event) as unknown;\n\n\t\t\tif (!event.defaultPrevented) {\n\t\t\t\tformerHandler?.(event);\n\t\t\t}\n\n\t\t\treturn result;\n\t\t}\n\n\t\tconst result = latterHandler?.(event) as unknown;\n\t\tformerHandler?.(event);\n\t\treturn result;\n\t};\n\n\treturn mergedEventHandler;\n};\n\nexport const composeEventHandlers = (...eventHandlerArray: Array<AnyFunction | undefined>) => {\n\tconst mergedEventHandler = (event: unknown) => {\n\t\tif (eventHandlerArray.length === 0) return;\n\n\t\tif (eventHandlerArray.length === 1) {\n\t\t\treturn eventHandlerArray[0]?.(event) as unknown;\n\t\t}\n\n\t\tlet accumulatedHandlers: AnyFunction | undefined;\n\n\t\tfor (const eventHandler of eventHandlerArray) {\n\t\t\tif (!eventHandler) continue;\n\n\t\t\taccumulatedHandlers = composeTwoEventHandlers(accumulatedHandlers, eventHandler);\n\t\t}\n\n\t\treturn accumulatedHandlers?.(event) as unknown;\n\t};\n\n\treturn mergedEventHandler;\n};\n","import { isFunction } from \"@zayne-labs/toolkit-type-helpers\";\nimport type { RefCallback } from \"react\";\n\nexport type PossibleRef<TRef extends HTMLElement> = React.Ref<TRef> | undefined;\n\n/**\n * @description Set a given ref to a given value.\n *\n * This utility takes care of different types of refs: callback refs and RefObject(s)\n */\nexport const setRef = <TRef extends HTMLElement>(\n\tref: PossibleRef<TRef>,\n\tnode: TRef | null\n): ReturnType<RefCallback<TRef>> => {\n\tif (!ref) return;\n\n\tif (isFunction(ref)) {\n\t\treturn ref(node);\n\t}\n\n\t// eslint-disable-next-line no-param-reassign -- Mutation is needed here\n\tref.current = node;\n};\n\n/**\n * @description A utility to combine refs. Accepts callback refs and RefObject(s)\n */\nexport const composeRefs = <TRef extends HTMLElement>(\n\t...refs: Array<PossibleRef<TRef>>\n): RefCallback<TRef> => {\n\tconst mergedRefCallBack: RefCallback<TRef> = (node) => {\n\t\tconst cleanupFnArray = refs.map((ref) => setRef(ref, node));\n\n\t\tconst cleanupFn = () => cleanupFnArray.forEach((cleanup) => cleanup?.());\n\n\t\treturn cleanupFn;\n\t};\n\n\treturn mergedRefCallBack;\n};\n","import { toArray } from \"@zayne-labs/toolkit-core\";\nimport {\n\ttype AnyFunction,\n\tAssertionError,\n\tisArray,\n\tisFunction,\n\ttype Prettify,\n\ttype UnknownObject,\n} from \"@zayne-labs/toolkit-type-helpers\";\nimport { isValidElement, Fragment as ReactFragment } from \"react\";\nimport type { InferProps } from \"../types\";\n\nexport type FunctionalComponent<TProps extends UnknownObject = never> = React.FunctionComponent<TProps>;\n\nconst isWithSlotSymbol = <TFunction extends AnyFunction>(\n\tcomponent: TFunction\n): component is Record<\"slotSymbol\", unknown> & TFunction => {\n\treturn \"slotSymbol\" in component && Boolean(component.slotSymbol);\n};\n\nconst isWithSlotReference = <TFunction extends AnyFunction>(\n\tcomponent: TFunction\n): component is Record<\"slotReference\", unknown> & TFunction => {\n\treturn \"slotReference\" in component && Boolean(component.slotReference);\n};\n/**\n * @description Checks if a react child (within the children array) matches the provided SlotComponent using multiple matching strategies:\n * 1. Matches by slot symbol property\n * 2. Matches by component name\n */\n\nexport const matchesSlotComponent = (child: React.ReactNode, SlotComponent: FunctionalComponent) => {\n\tif (!isValidElement(child) || !isFunction(child.type)) {\n\t\treturn false;\n\t}\n\n\tconst resolvedChildType =\n\t\tisWithSlotReference(child.type) ? (child.type.slotReference as FunctionalComponent) : child.type;\n\n\tconst hasMatchingSlotSymbol =\n\t\tisWithSlotSymbol(resolvedChildType)\n\t\t&& isWithSlotSymbol(SlotComponent)\n\t\t&& resolvedChildType.slotSymbol === SlotComponent.slotSymbol;\n\n\tif (hasMatchingSlotSymbol) {\n\t\treturn true;\n\t}\n\n\tif (child.type.name === SlotComponent.name) {\n\t\treturn true;\n\t}\n\n\treturn false;\n};\n\n/**\n * @description Checks if a react child (within the children array) matches any of the provided SlotComponents.\n */\nexport const matchesAnySlotComponent = (child: React.ReactNode, SlotComponents: FunctionalComponent[]) => {\n\tconst matchesSlot = SlotComponents.some((SlotComponent) => matchesSlotComponent(child, SlotComponent));\n\n\treturn matchesSlot;\n};\n\ntype SlotOptions = {\n\t/**\n\t * @description The error message to throw when multiple slots are found for a given slot component\n\t */\n\terrorMessage?: string;\n\t/**\n\t * @description When true, an AssertionError will be thrown if multiple slots are found for a given slot component\n\t */\n\tthrowOnMultipleSlotMatch?: boolean;\n};\n\n/**\n * @description Counts how many times a given slot component appears in an array of children\n * @internal\n */\nconst calculateSlotOccurrences = (\n\tchildrenArray: React.ReactNode[],\n\tSlotComponent: FunctionalComponent\n) => {\n\tlet count = 0;\n\n\tfor (const child of childrenArray) {\n\t\tif (!matchesSlotComponent(child, SlotComponent)) continue;\n\n\t\tcount += 1;\n\t}\n\n\treturn count;\n};\n\n/**\n * @description Retrieves a single slot element from a collection of React children that matches the provided SlotComponent component.\n *\n * @throws { AssertionError } when throwOnMultipleSlotMatch is true and multiple slots are found\n */\nexport const getSingleSlot = (\n\tchildren: React.ReactNode,\n\tSlotComponent: FunctionalComponent,\n\toptions: SlotOptions = {}\n) => {\n\tconst {\n\t\terrorMessage = \"Only one instance of the SlotComponent is allowed\",\n\t\tthrowOnMultipleSlotMatch = false,\n\t} = options;\n\n\tconst actualChildren =\n\t\tisValidElement<InferProps<typeof ReactFragment>>(children) && children.type === ReactFragment ?\n\t\t\tchildren.props.children\n\t\t:\tchildren;\n\n\tconst childrenArray = toArray<React.ReactNode>(actualChildren);\n\n\tconst shouldThrow =\n\t\tthrowOnMultipleSlotMatch && calculateSlotOccurrences(childrenArray, SlotComponent) > 1;\n\n\tif (shouldThrow) {\n\t\tthrow new AssertionError(errorMessage);\n\t}\n\n\tconst slotElement = childrenArray.find((child) => matchesSlotComponent(child, SlotComponent));\n\n\treturn slotElement;\n};\n\n// NOTE - You can imitate const type parameter by extending readonly[] | []\n\ntype MultipleSlotsOptions = {\n\t/**\n\t * @description The error message to throw when multiple slots are found for a given slot component\n\t * If a string is provided, the same message will be used for all slot components\n\t * If an array is provided, each string in the array will be used as the errorMessage for the corresponding slot component\n\t */\n\terrorMessage?: string | string[];\n\t/**\n\t * @description When true, an AssertionError will be thrown if multiple slots are found for a given slot component\n\t * If a boolean is provided, the same value will be used for all slot components\n\t * If an array is provided, each boolean in the array will be used as the throwOnMultipleSlotMatch value for the corresponding slot component\n\t */\n\tthrowOnMultipleSlotMatch?: boolean | boolean[];\n};\n\ntype GetMultipleSlotsResult<TSlotComponents extends FunctionalComponent[]> = {\n\tregularChildren: React.ReactNode[];\n\tslots: { [Key in keyof TSlotComponents]: ReturnType<TSlotComponents[Key]> };\n};\n\n/**\n * @description The same as getSingleSlot, but for multiple slot components\n */\nexport const getMultipleSlots = <const TSlotComponents extends FunctionalComponent[]>(\n\tchildren: React.ReactNode,\n\tSlotComponents: TSlotComponents,\n\toptions?: MultipleSlotsOptions\n): Prettify<GetMultipleSlotsResult<TSlotComponents>> => {\n\tconst { errorMessage, throwOnMultipleSlotMatch } = options ?? {};\n\n\tconst slots = SlotComponents.map((SlotComponent, index) =>\n\t\tgetSingleSlot(children, SlotComponent, {\n\t\t\terrorMessage: isArray(errorMessage) ? errorMessage[index] : errorMessage,\n\t\t\tthrowOnMultipleSlotMatch:\n\t\t\t\tisArray(throwOnMultipleSlotMatch) ? throwOnMultipleSlotMatch[index] : throwOnMultipleSlotMatch,\n\t\t})\n\t);\n\n\tconst regularChildren = getRegularChildren(children, SlotComponents);\n\n\treturn { regularChildren, slots } as GetMultipleSlotsResult<TSlotComponents>;\n};\n\n/**\n * @description Returns all children that are not slot elements (i.e., don't match any of the provided slot components)\n */\nexport const getRegularChildren = (\n\tchildren: React.ReactNode,\n\tSlotComponentOrComponents: FunctionalComponent | FunctionalComponent[]\n) => {\n\tconst actualChildren =\n\t\tisValidElement<InferProps<typeof ReactFragment>>(children) && children.type === ReactFragment ?\n\t\t\tchildren.props.children\n\t\t:\tchildren;\n\n\tconst childrenArray = toArray<React.ReactNode>(actualChildren);\n\n\tconst regularChildren = childrenArray.filter(\n\t\t(child) => !matchesAnySlotComponent(child, toArray(SlotComponentOrComponents))\n\t);\n\n\treturn regularChildren;\n};\n","import { toArray } from \"@zayne-labs/toolkit-core\";\nimport {\n\ttype CallbackFn,\n\ttype EmptyObject,\n\tisFunction,\n\ttype Prettify,\n\ttype UnionToIntersection,\n\ttype UnknownObject,\n} from \"@zayne-labs/toolkit-type-helpers\";\nimport { isValidElement, Fragment as ReactFragment } from \"react\";\nimport type { InferProps } from \"../types\";\n\ntype GetSlotName<TSlotComponentProps extends GetSlotComponentProps> =\n\tstring extends TSlotComponentProps[\"name\"] ? never\n\t: \"default\" extends TSlotComponentProps[\"name\"] ? never\n\t: TSlotComponentProps[\"name\"];\n\ntype GetSpecificSlotsType<TSlotComponentProps extends GetSlotComponentProps> = {\n\t// This conditional before the remapping will prevent an Indexed Record type from showing up if the props are not passed, enhancing type safety\n\t[TName in keyof TSlotComponentProps as GetSlotName<TSlotComponentProps>]: Extract<\n\t\tTSlotComponentProps[\"children\"],\n\t\tReact.ReactNode\n\t>;\n};\n\n/**\n * Maps slot names to their corresponding children types\n */\nexport type GetSlotMapResult<TSlotComponentProps extends GetSlotComponentProps> = UnionToIntersection<\n\tGetSpecificSlotsType<TSlotComponentProps>\n> & { default: React.ReactNode[] };\n\n/**\n * Symbol used to identify SlotComponent instances\n */\nexport const slotComponentSymbol = Symbol(\"slot-component\");\n\n/**\n * @description Creates a map of named slots from React children. Returns an object mapping slot names to their children,\n * with a default slot for unmatched children.\n *\n * @example\n * ```tsx\n * import { type GetSlotComponentProps, SlotComponent } from \"@zayne-labs/toolkit-react/utils\"\n *\n * type SlotProps = GetSlotComponentProps<\"header\" | \"footer\">;\n *\n * function Parent({ children }: { children: React.ReactNode }) {\n * const slots = getSlotMap<SlotProps>(children);\n *\n * return (\n * <div>\n * <header>{slots.header}</header>\n * <main>{slots.default}</main>\n * <footer>{slots.footer}</footer>\n * </div>\n * );\n * }\n * ```\n *\n * Usage:\n * ```tsx\n * <Parent>\n * <SlotComponent name=\"header\">Header Content</SlotComponent>\n * <div>Random stuff</div>\n * <SlotComponent name=\"footer\">Footer Content</SlotComponent>\n * </Parent>\n * ```\n */\nexport const getSlotMap = <TSlotComponentProps extends GetSlotComponentProps>(\n\tchildren: React.ReactNode\n): Prettify<GetSlotMapResult<TSlotComponentProps>> => {\n\tconst slots: Record<string, TSlotComponentProps[\"children\"]> & { default: React.ReactNode[] } = {\n\t\tdefault: [],\n\t};\n\n\tconst isFragment = isValidElement<InferProps<HTMLElement>>(children) && children.type === ReactFragment;\n\n\tconst actualChildren = isFragment ? children.props.children : children;\n\n\tconst childrenArray = toArray<React.ReactNode>(actualChildren);\n\n\tfor (const child of childrenArray) {\n\t\tif (!isValidElement<TSlotComponentProps>(child) || !isFunction(child.type)) {\n\t\t\tslots.default.push(child);\n\t\t\tcontinue;\n\t\t}\n\n\t\tconst childType = child.type as SlotWithNameAndSymbol;\n\n\t\tconst isSlotElement =\n\t\t\tchildType.slotSymbol === slotComponentSymbol && Boolean(childType.slotName ?? child.props.name);\n\n\t\tif (!isSlotElement) {\n\t\t\tslots.default.push(child);\n\t\t\tcontinue;\n\t\t}\n\n\t\tconst slotName = childType.slotName ?? child.props.name;\n\n\t\tif (slotName === \"default\") {\n\t\t\tslots.default.push(child);\n\t\t\tcontinue;\n\t\t}\n\n\t\tslots[slotName] = child;\n\t}\n\n\treturn slots as GetSlotMapResult<TSlotComponentProps>;\n};\n\n/**\n * @description Produce props for the SlotComponent\n *\n * @example\n * ```ts\n * // Pattern One (slot or slots have same children type, which is just React.ReactNode by default)\n * type SlotProps = GetSlotComponentProps<\"header\" | \"content\" | \"footer\">;\n *\n * // Pattern Two (some slots can have different children type)\n * type SlotProps = GetSlotComponentProps<\"header\", React.ReactNode> | GetSlotComponentProps<\"header\", (renderProp: RenderProp) => React.ReactNode>;\n * ```\n */\nexport type GetSlotComponentProps<\n\tTName extends string = string,\n\tTChildren extends CallbackFn<never, React.ReactNode> | React.ReactNode =\n\t\t| CallbackFn<never, React.ReactNode>\n\t\t| React.ReactNode,\n> = {\n\tchildren: TChildren;\n\t/**\n\t * Name of the slot where content should be rendered\n\t */\n\tname: TName;\n};\n\n/**\n * @description Creates a slot component\n */\nexport const createSlotComponent = <TSlotComponentProps extends GetSlotComponentProps>() => {\n\tconst SlotComponent = (props: TSlotComponentProps) => props.children as React.ReactNode;\n\n\tSlotComponent.slotSymbol = slotComponentSymbol;\n\n\treturn SlotComponent;\n};\n\ntype SlotWithNameAndSymbol<\n\tTSlotComponentProps extends GetSlotComponentProps = GetSlotComponentProps,\n\tTOtherProps extends UnknownObject = EmptyObject,\n> = {\n\t(props: Pick<TSlotComponentProps, \"children\"> & TOtherProps): React.ReactNode;\n\treadonly slotName?: TSlotComponentProps[\"name\"];\n\treadonly slotSymbol?: symbol;\n};\n\nfunction DefaultSlotComponent(props: Pick<GetSlotComponentProps, \"children\">): React.ReactNode {\n\treturn props.children as React.ReactNode;\n}\n\n/**\n * @description Adds a slot symbol and name to a slot component passed in\n */\nexport const withSlotNameAndSymbol = <\n\tTSlotComponentProps extends GetSlotComponentProps,\n\tTOtherProps extends UnknownObject = EmptyObject,\n>(\n\tname: TSlotComponentProps[\"name\"],\n\tSlotComponent: SlotWithNameAndSymbol<TSlotComponentProps, TOtherProps> = DefaultSlotComponent\n) => {\n\t/* eslint-disable no-param-reassign -- This is necessary */\n\t// @ts-expect-error -- This is necessary for the time being, to prevent type errors and accidental overrides on consumer side\n\tSlotComponent.slotSymbol = slotComponentSymbol;\n\t// @ts-expect-error -- This is necessary for the time being, to prevent type errors and accidental overrides on consumer side\n\tSlotComponent.slotName = name;\n\n\t/* eslint-enable no-param-reassign -- This is necessary */\n\n\treturn SlotComponent;\n};\n","import { type AnyFunction, isFunction } from \"@zayne-labs/toolkit-type-helpers\";\nimport { composeTwoEventHandlers } from \"./composeEventHandlers\";\n\n// == This approach is more efficient than using a regex.\nconst isEventHandler = (key: string, value: unknown): value is AnyFunction => {\n\tconst thirdCharCode = key.codePointAt(2);\n\n\tif (!isFunction(value) || thirdCharCode === undefined) {\n\t\treturn false;\n\t}\n\n\tconst isHandler = key.startsWith(\"on\") && thirdCharCode >= 65 /* A */ && thirdCharCode <= 90; /* Z */\n\n\treturn isHandler;\n};\n\nconst mergeTwoClassNames = (formerClassName: string | undefined, latterClassName: string | undefined) => {\n\tif (!latterClassName || !formerClassName) {\n\t\t// eslint-disable-next-line ts-eslint/prefer-nullish-coalescing -- Logical OR is fit for this case\n\t\treturn latterClassName || formerClassName;\n\t}\n\n\t// eslint-disable-next-line prefer-template -- String concatenation is more performant than template literals in this case\n\treturn formerClassName + \" \" + latterClassName;\n};\n\nexport const mergeTwoProps = <TProps extends Record<never, never>>(\n\tformerProps: TProps | undefined,\n\tlatterProps: TProps | undefined\n): TProps => {\n\t// == If no props are provided, return an empty object\n\tif (!latterProps || !formerProps) {\n\t\treturn latterProps ?? formerProps ?? ({} as TProps);\n\t}\n\n\tconst propsAccumulator = { ...formerProps } as Record<string, unknown>;\n\n\tfor (const latterPropName of Object.keys(latterProps)) {\n\t\tconst formerPropValue = (formerProps as Record<string, unknown>)[latterPropName];\n\t\tconst latterPropValue = (latterProps as Record<string, unknown>)[latterPropName];\n\n\t\t// == If the prop is `className` or `class`, we merge them\n\t\tif (latterPropName === \"className\" || latterPropName === \"class\") {\n\t\t\tpropsAccumulator[latterPropName] = mergeTwoClassNames(\n\t\t\t\tformerPropValue as string,\n\t\t\t\tlatterPropValue as string\n\t\t\t);\n\t\t\tcontinue;\n\t\t}\n\n\t\t// == If the prop is `style`, we merge them\n\t\tif (latterPropName === \"style\") {\n\t\t\tpropsAccumulator[latterPropName] = {\n\t\t\t\t...(formerPropValue as object),\n\t\t\t\t...(latterPropValue as object),\n\t\t\t};\n\t\t\tcontinue;\n\t\t}\n\n\t\t// == If the handler exists on both, we compose them\n\t\tif (isEventHandler(latterPropName, latterPropValue)) {\n\t\t\tpropsAccumulator[latterPropName] = composeTwoEventHandlers(\n\t\t\t\tformerPropValue as AnyFunction | undefined,\n\t\t\t\tlatterPropValue\n\t\t\t);\n\n\t\t\tcontinue;\n\t\t}\n\n\t\t// == latterProps override by default\n\t\tpropsAccumulator[latterPropName] = latterPropValue;\n\t}\n\n\treturn propsAccumulator as TProps;\n};\n","import { mergeTwoProps } from \"./mergeTwoProps\";\n\ntype UnionToIntersection<TUnion> =\n\t(TUnion extends unknown ? (param: TUnion) => void : \"\") extends (param: infer TParam) => void ? TParam\n\t:\t\"\";\n\n/**\n * Merges multiple sets of React props.\n *\n * - It follows the Object.assign pattern where the rightmost object's fields overwrite\n * the conflicting ones from others. This doesn't apply to event handlers, `className` and `style` props.\n * - Event handlers are merged such that they are called in sequence (the rightmost one being called first),\n * and allows the user to prevent the previous event handlers from being executed by calling the `preventDefault` method.\n * - It also merges the `className` and `style` props, whereby the classes are concatenated\n * and the rightmost styles overwrite the previous ones.\n *\n * @important **`ref` is not merged.**\n * @param props props to merge.\n * @returns the merged props.\n */\n\nconst mergeProps = <TProps extends Record<never, never>>(\n\t...propsObjectArray: Array<TProps | undefined>\n): UnionToIntersection<TProps> => {\n\tif (propsObjectArray.length === 0) {\n\t\treturn {} as never;\n\t}\n\n\tif (propsObjectArray.length === 1) {\n\t\treturn propsObjectArray[0] as never;\n\t}\n\n\tlet accumulatedProps: Record<string, unknown> = {};\n\n\tfor (const propsObject of propsObjectArray) {\n\t\tif (!propsObject) continue;\n\n\t\taccumulatedProps = mergeTwoProps(accumulatedProps, propsObject);\n\t}\n\n\treturn accumulatedProps as never;\n};\n\nexport { mergeProps };\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["createStore"],"sources":["../../../src/zustand/createZustandContext.ts","../../../src/zustand/createZustandStoreWithCombine.ts","../../../src/zustand/createZustandStoreWithSubscribe.ts"],"sourcesContent":["import type { StoreApi } from \"@zayne-labs/toolkit-core\";\nimport type { SelectorFn } from \"@zayne-labs/toolkit-type-helpers\";\nimport { createElement } from \"react\";\nimport { type CustomContextOptions, createCustomContext, useStore } from \"../hooks\";\n\nconst createZustandContext = <\n\tTState extends Record<string, unknown>,\n\tTStore extends StoreApi<TState> = StoreApi<TState>,\n>(\n\toptions?: CustomContextOptions<TStore, true>\n) => {\n\tconst [Provider, useCustomContext] = createCustomContext(options);\n\n\ttype ZustandStoreContextProviderProps = {\n\t\tchildren: React.ReactNode;\n\t\tstore: TStore;\n\t};\n\n\tfunction ZustandStoreContextProvider(props: ZustandStoreContextProviderProps) {\n\t\tconst { children, store } = props;\n\n\t\treturn createElement(Provider, { value: store }, children);\n\t}\n\n\tconst useZustandStoreContext = <TResult = TState>(selector?: SelectorFn<TState, TResult>): TResult => {\n\t\tconst zustandStore = useCustomContext();\n\n\t\treturn useStore(zustandStore, selector);\n\t};\n\n\treturn [ZustandStoreContextProvider, useZustandStoreContext] as [\n\t\tZustandStoreContextProvider: typeof ZustandStoreContextProvider,\n\t\tuseZustandStoreContext: typeof useZustandStoreContext,\n\t];\n};\n\nexport { createZustandContext };\n","import type { AnyFunction, AnyObject, Prettify } from \"@zayne-labs/toolkit-type-helpers\";\nimport { create, createStore, type StateCreator, type StoreMutatorIdentifier } from \"zustand\";\n\ntype Write<TInitialState, TExtraState> = Prettify<Omit<TInitialState, keyof TExtraState> & TExtraState>;\n\nexport const combine =\n\t<\n\t\tTInitialState extends AnyObject,\n\t\tTExtraState extends AnyObject,\n\t\tMps extends Array<[StoreMutatorIdentifier, unknown]> = [],\n\t\tMcs extends Array<[StoreMutatorIdentifier, unknown]> = [],\n\t>(\n\t\tinitialState: TInitialState,\n\t\tstoreCreator: StateCreator<TInitialState, Mps, Mcs, TExtraState>\n\t): StateCreator<Write<TInitialState, TExtraState>, Mps, Mcs> =>\n\t// eslint-disable-next-line ts-eslint/no-unsafe-return -- We don't know what the storeCreator will return\n\t(...params) => ({\n\t\t...initialState,\n\t\t...(storeCreator as AnyFunction)(...params),\n\t});\n\nexport const createStoreWithCombine = <TInitialState extends AnyObject, TExtraState extends AnyObject>(\n\t...params: Parameters<typeof combine<TInitialState, TExtraState>>\n) => createStore(combine(...params));\n\nexport const createWithCombine = <TInitialState extends AnyObject, TExtraState extends AnyObject>(\n\t...params: Parameters<typeof combine<TInitialState, TExtraState>>\n) => create(combine(...params));\n","import { createStore, type StoreApi } from \"@zayne-labs/toolkit-core\";\nimport type { SelectorFn } from \"@zayne-labs/toolkit-type-helpers\";\nimport type { Mutate, StoreMutatorIdentifier, UseBoundStore } from \"zustand\";\nimport { useStore } from \"../hooks\";\n\ntype Get<T, K, F> = K extends keyof T ? T[K] : F;\n\nexport type StateCreator<\n\tT,\n\tMis extends Array<[StoreMutatorIdentifier, unknown]> = [],\n\tMos extends Array<[StoreMutatorIdentifier, unknown]> = [],\n\tU = T,\n> = { $$storeMutators?: Mos } & ((\n\tsetState: Get<Mutate<StoreApi<T>, Mis>, \"setState\", never>,\n\tgetState: Get<Mutate<StoreApi<T>, Mis>, \"getState\", never>,\n\tstore: Mutate<StoreApi<T>, Mis>\n) => U);\n\ntype CreateStoreWithSubscribe = {\n\t<T, Mos extends Array<[StoreMutatorIdentifier, unknown]> = []>(\n\t\tinitializer: StateCreator<T, [], Mos>\n\t): Mutate<StoreApi<T>, Mos>;\n\n\t<T>(): <Mos extends Array<[StoreMutatorIdentifier, unknown]> = []>(\n\t\tinitializer: StateCreator<T, [], Mos>\n\t) => Mutate<StoreApi<T>, Mos>;\n};\n\nexport const createStoreWithSubscribe = (<TState>(stateInitializer: StateCreator<TState> | undefined) =>\n\tstateInitializer ? createStore(stateInitializer) : createStore) as CreateStoreWithSubscribe;\n\ntype CreateWithSubscribe = {\n\t<T, Mos extends Array<[StoreMutatorIdentifier, unknown]> = []>(\n\t\tinitializer: StateCreator<T, [], Mos>\n\t): UseBoundStore<Mutate<StoreApi<T>, Mos>>;\n\t<T>(): <Mos extends Array<[StoreMutatorIdentifier, unknown]> = []>(\n\t\tinitializer: StateCreator<T, [], Mos>\n\t) => UseBoundStore<Mutate<StoreApi<T>, Mos>>;\n};\n\nconst createWithSubscribeImpl = <TState>(createState: StateCreator<TState>) => {\n\tconst store = createStore(createState);\n\n\tconst useBoundStore = (selector?: SelectorFn<TState, unknown>) => useStore(store, selector);\n\n\tObject.assign(useBoundStore, store);\n\n\treturn useBoundStore;\n};\n\nexport const createWithSubscribe = (<TState>(stateInitializer: StateCreator<TState> | undefined) =>\n\tstateInitializer ?\n\t\tcreateWithSubscribeImpl(stateInitializer)\n\t:\tcreateWithSubscribeImpl) as CreateWithSubscribe;\n"],"mappings":";;;;;;;AAKA,MAAM,wBAIL,YACI;CACJ,MAAM,CAAC,UAAU,oBAAoB,oBAAoB,QAAQ;CAOjE,SAAS,4BAA4B,OAAyC;EAC7E,MAAM,EAAE,UAAU,UAAU;AAE5B,SAAO,cAAc,UAAU,EAAE,OAAO,OAAO,EAAE,SAAS;;CAG3D,MAAM,0BAA4C,aAAoD;EACrG,MAAM,eAAe,kBAAkB;AAEvC,SAAO,SAAS,cAAc,SAAS;;AAGxC,QAAO,CAAC,6BAA6B,uBAAuB;;;;;ACzB7D,MAAa,WAOX,cACA,kBAGA,GAAG,YAAY;CACf,GAAG;CACH,GAAI,aAA6B,GAAG,OAAO;CAC3C;AAEF,MAAa,0BACZ,GAAG,WACCA,cAAY,QAAQ,GAAG,OAAO,CAAC;AAEpC,MAAa,qBACZ,GAAG,WACC,OAAO,QAAQ,GAAG,OAAO,CAAC;;;;ACC/B,MAAa,6BAAqC,qBACjD,mBAAmB,YAAY,iBAAiB,GAAG;AAWpD,MAAM,2BAAmC,gBAAsC;CAC9E,MAAM,QAAQ,YAAY,YAAY;CAEtC,MAAM,iBAAiB,aAA2C,SAAS,OAAO,SAAS;AAE3F,QAAO,OAAO,eAAe,MAAM;AAEnC,QAAO;;AAGR,MAAa,wBAAgC,qBAC5C,mBACC,wBAAwB,iBAAiB,GACxC"}
|