@zayne-labs/toolkit-react 0.8.62 → 0.9.1

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.
@@ -1,5 +1,6 @@
1
+ import * as react from 'react';
1
2
  import { RefCallback } from 'react';
2
- import { AnyFunction, UnionDiscriminator, AnyObject, Prettify } from '@zayne-labs/toolkit-type-helpers';
3
+ import { UnknownObject, AnyFunction, UnionToIntersection as UnionToIntersection$1, UnionDiscriminator, AnyObject, Prettify } from '@zayne-labs/toolkit-type-helpers';
3
4
 
4
5
  type PossibleRef<TRef> = React.Ref<TRef> | undefined;
5
6
  /**
@@ -13,26 +14,156 @@ declare const setRef: <TRef>(ref: PossibleRef<TRef>, node: TRef) => ReturnType<R
13
14
  */
14
15
  declare const composeRefs: <TRef>(refs: Array<PossibleRef<TRef>>) => RefCallback<TRef>;
15
16
 
16
- type FunctionalComponent<TProps> = (props: TProps) => ReturnType<React.FunctionComponent<TProps>> | AnyFunction<React.ReactNode>;
17
- declare const isSlotElement: <TProps>(child: React.ReactNode, SlotWrapper: FunctionalComponent<TProps>) => boolean;
17
+ type FunctionalComponent<TProps extends UnknownObject = never> = React.FunctionComponent<TProps>;
18
+ /**
19
+ * @description Checks if a react child (within the children array) matches the provided SlotComponent using multiple matching strategies:
20
+ * 1. Matches by direct component reference
21
+ * 2. Matches by slot symbol property
22
+ * 3. Matches by stringified component
23
+ * 4. Matches by component name
24
+ */
25
+ declare const matchesSlotComponent: (child: React.ReactNode, SlotComponent: FunctionalComponent) => boolean;
26
+ /**
27
+ * @description Checks if a react child (within the children array) matches any of the provided SlotComponents.
28
+ */
29
+ declare const matchesAnySlotComponent: (child: React.ReactNode, SlotComponents: FunctionalComponent[]) => boolean;
18
30
  type SlotOptions = {
19
31
  errorMessage?: string;
20
32
  throwOnMultipleSlotMatch?: boolean;
21
33
  };
22
34
  /**
23
- * @description Retrieves a single slot element from a collection of React children that matches the provided SlotWrapper component.
35
+ * @description Retrieves a single slot element from a collection of React children that matches the provided SlotComponent component.
24
36
  *
25
- * @throws {AssertionError} When throwOnMultipleSlotMatch is true and multiple slots are found
37
+ * @throws { AssertionError } when throwOnMultipleSlotMatch is true and multiple slots are found
38
+ */
39
+ declare const getSingleSlot: (children: React.ReactNode, SlotComponent: FunctionalComponent, options?: SlotOptions) => react.ReactNode;
40
+ declare const getMultipleSlots: <const TSlotComponents extends FunctionalComponent[]>(children: React.ReactNode, SlotComponents: TSlotComponents, options?: SlotOptions) => {
41
+ regularChildren: react.ReactNode[];
42
+ slots: { [Key in keyof TSlotComponents]: ReturnType<TSlotComponents[Key]>; };
43
+ };
44
+ /**
45
+ * @description Returns all children that are not slot elements (i.e., don't match any of the provided slot components)
26
46
  */
27
- declare const getSlotElement: <TProps = Record<string, unknown>>(children: React.ReactNode, SlotWrapper: FunctionalComponent<TProps>, options?: SlotOptions) => React.ReactElement<TProps> | undefined;
28
- declare const getOtherChildren: <TProps = Record<string, unknown>, TChildren extends React.ReactNode = React.ReactNode>(children: TChildren, SlotWrapperOrWrappers: Array<FunctionalComponent<TProps>> | FunctionalComponent<TProps>) => TChildren extends unknown[] ? TChildren : TChildren[];
47
+ declare const getRegularChildren: (children: React.ReactNode, SlotComponents: FunctionalComponent[]) => react.ReactNode[];
29
48
 
30
- type UnknownProps$1 = Record<never, never>;
31
- declare const mergeTwoProps: <TProps extends UnknownProps$1>(slotProps: TProps | undefined, childProps: TProps | undefined) => TProps;
49
+ /**
50
+ * Possible children types that can be passed to a slot
51
+ */
52
+ type PossibleSlotChildrenType = AnyFunction<React.ReactNode | React.ReactNode[]> | React.ReactNode | React.ReactNode[];
53
+ /**
54
+ * Maps slot names to their corresponding children types
55
+ */
56
+ type GetSlotMapResult<TSlotComponentProps extends GetSlotComponentProps> = UnionToIntersection$1<{
57
+ [TName in keyof TSlotComponentProps as TSlotComponentProps["name"]]: TSlotComponentProps["children"];
58
+ }>;
59
+ /**
60
+ * Symbol used to identify SlotComponent instances
61
+ */
62
+ declare const slotComponentSymbol: unique symbol;
63
+ /**
64
+ * @description Creates a map of named slots from React children. Returns an object mapping slot names to their children,
65
+ * with a default slot for unmatched children.
66
+ *
67
+ * @example
68
+ * ```tsx
69
+ * import { type GetSlotComponentProps, SlotComponent } from "@zayne-labs/toolkit-react/utils"
70
+ *
71
+ * type SlotProps = GetSlotComponentProps<"header" | "footer">;
72
+ *
73
+ * function Parent({ children }: { children: React.ReactNode }) {
74
+ * const slots = getSlotMap<SlotProps>(children);
75
+ *
76
+ * return (
77
+ * <div>
78
+ * <header>{slots.header}</header>
79
+ * <main>{slots.default}</main>
80
+ * <footer>{slots.footer}</footer>
81
+ * </div>
82
+ * );
83
+ * }
84
+ * ```
85
+ *
86
+ * Usage:
87
+ * ```tsx
88
+ * <Parent>
89
+ * <SlotComponent name="header">Header Content</SlotComponent>
90
+ * <div>Random stuff</div>
91
+ * <SlotComponent name="footer">Footer Content</SlotComponent>
92
+ * </Parent>
93
+ * ```
94
+ */
95
+ declare const getSlotMap: <TSlotComponentProps extends GetSlotComponentProps>(children: React.ReactNode) => GetSlotMapResult<TSlotComponentProps> & {
96
+ default: React.ReactNode[];
97
+ };
98
+ /**
99
+ * @description Produce props for the SlotComponent
100
+ */
101
+ type GetSlotComponentProps<TName extends string = string, TChildren extends PossibleSlotChildrenType = PossibleSlotChildrenType> = {
102
+ /** Content to render in the slot */
103
+ children: TChildren;
104
+ /** Name of the slot where content should be rendered */
105
+ name: TName;
106
+ };
107
+ /**
108
+ * @description Function used to create a slot component that defines named slots in a parent component. This component created doesn't render anything,
109
+ * it's used purely for slot definition.
110
+ *
111
+ * @example
112
+ * ```tsx
113
+ * import { type GetSlotComponentProps, createSlotComponent, SlotComponent } from "@zayne-labs/toolkit-react/utils"
114
+ *
115
+ * type SlotProps = GetSlotComponentProps<"header" | "footer">;
116
+ *
117
+ * function Parent({ children }: { children: React.ReactNode }) {
118
+ * const slots = getSlotMap<SlotProps>(children);
119
+ *
120
+ * return (
121
+ * <div>
122
+ * <header>{slots.header}</header>
123
+ * <main>{slots.default}</main>
124
+ * <footer>{slots.footer}</footer>
125
+ * </div>
126
+ * );
127
+ * }
128
+ *
129
+ * Parent.Slot = createSlotComponent<SlotProps>();
130
+ * // OR
131
+ * Parent.Slot = SlotComponent<SlotProps>
132
+ * ```
133
+ *
134
+ *
135
+ * @example
136
+ * Usage:
137
+ ```tsx
138
+ * function App() {
139
+ * return (
140
+ * <Parent>
141
+ * <Parent.Slot name="header">Header Content</Parent.Slot>
142
+ * <div>Default Content</div>
143
+ * <Parent.Slot name="footer">Footer Content</Parent.Slot>
144
+ * </Parent>
145
+ * );
146
+ * }
147
+ * ```
148
+ */
149
+ declare const createSlotComponent: <TBaseSlotComponentProps extends GetSlotComponentProps>() => {
150
+ <TSlotComponentProps extends TBaseSlotComponentProps>(props: TSlotComponentProps): React.ReactNode;
151
+ id: typeof slotComponentSymbol;
152
+ };
153
+ /**
154
+ * @description Slot component created by createSlotComponent
155
+ */
156
+ declare const SlotComponent: {
157
+ <TSlotComponentProps extends GetSlotComponentProps<string, PossibleSlotChildrenType>>(props: TSlotComponentProps): React.ReactNode;
158
+ id: typeof slotComponentSymbol;
159
+ };
32
160
 
33
161
  type UnionToIntersection<TUnion> = (TUnion extends unknown ? (param: TUnion) => void : "") extends (param: infer TParam) => void ? TParam : "";
162
+ type UnknownProps$1 = Record<never, never>;
163
+ declare const mergeProps: <TProps extends UnknownProps$1>(...parameters: Array<TProps | undefined>) => UnionToIntersection<TProps>;
164
+
34
165
  type UnknownProps = Record<never, never>;
35
- declare const mergeProps: <TProps extends UnknownProps>(...parameters: Array<TProps | undefined>) => UnionToIntersection<TProps>;
166
+ declare const mergeTwoProps: <TProps extends UnknownProps>(slotProps: TProps | undefined, childProps: TProps | undefined) => TProps;
36
167
 
37
168
  type ForwardedRefType<TComponent extends HTMLElement | React.ElementType> = TComponent extends React.ElementType ? React.ForwardedRef<React.Ref<TComponent>> : React.ForwardedRef<TComponent>;
38
169
  type InferProps<TComponent extends HTMLElement | React.ElementType> = TComponent extends React.ElementType ? React.ComponentPropsWithRef<TComponent> : React.HTMLAttributes<TComponent>;
@@ -61,4 +192,4 @@ type InferRestOfProps<TElement extends React.ElementType, TProps> = Omit<React.C
61
192
  type MergedPropsWithAs<TElement extends React.ElementType, TProps> = Prettify<Omit<AsProp<TElement>, keyof TProps> & TProps>;
62
193
  type PolymorphicProps<TElement extends React.ElementType, TProps extends AnyObject = NonNullable<unknown>> = MergedPropsWithAs<TElement, TProps> & InferRestOfProps<TElement, TProps>;
63
194
 
64
- export { type AsProp, type DiscriminatedRenderProps, type ForwardedRefType, type InferProps, type MyCustomCss, type PolymorphicProps, type StateSetter, composeRefs, getOtherChildren, getSlotElement, isSlotElement, mergeProps, mergeTwoProps, setRef };
195
+ export { type AsProp, type DiscriminatedRenderProps, type ForwardedRefType, type GetSlotComponentProps, type InferProps, type MyCustomCss, type PolymorphicProps, SlotComponent, type StateSetter, composeRefs, createSlotComponent, getMultipleSlots, getRegularChildren, getSingleSlot, getSlotMap, matchesAnySlotComponent, matchesSlotComponent, mergeProps, mergeTwoProps, setRef, slotComponentSymbol };
@@ -1,4 +1,4 @@
1
- import { isFunction, AssertionError, isArray, isPlainObject } from '@zayne-labs/toolkit-type-helpers';
1
+ import { isFunction, isPlainObject, AssertionError } from '@zayne-labs/toolkit-type-helpers';
2
2
  import { toArray, mergeClassNames, mergeFunctions } from '@zayne-labs/toolkit-core';
3
3
  import { isValidElement } from 'react';
4
4
 
@@ -22,62 +22,86 @@ var composeRefs = (refs) => {
22
22
  };
23
23
  return refCallBack;
24
24
  };
25
- var isSlotElement = (child, SlotWrapper) => {
25
+ var matchesSlotComponent = (child, SlotComponent2) => {
26
26
  if (!isValidElement(child)) {
27
27
  return false;
28
28
  }
29
- if (child.type.slot === SlotWrapper.slot) {
29
+ if (child.type === SlotComponent2) {
30
30
  return true;
31
31
  }
32
- if (child.type.name === SlotWrapper.name) {
32
+ if (child.type.slotSymbol === SlotComponent2.slotSymbol) {
33
33
  return true;
34
34
  }
35
- if (child.type === SlotWrapper) {
35
+ if (child.type.name === SlotComponent2.name) {
36
36
  return true;
37
37
  }
38
- return child.type.toString() === SlotWrapper.toString();
38
+ return child.type.toString() === SlotComponent2.toString();
39
39
  };
40
- var getSlotElement = (children, SlotWrapper, options = {}) => {
40
+ var matchesAnySlotComponent = (child, SlotComponents) => {
41
+ const matchesSlot = SlotComponents.some((SlotComponent2) => matchesSlotComponent(child, SlotComponent2));
42
+ return matchesSlot;
43
+ };
44
+ var calculateSlotOccurrences = (childrenArray, SlotComponent2) => {
45
+ let count = 0;
46
+ for (const child of childrenArray) {
47
+ if (!matchesSlotComponent(child, SlotComponent2)) continue;
48
+ count += 1;
49
+ }
50
+ return count;
51
+ };
52
+ var getSingleSlot = (children, SlotComponent2, options = {}) => {
41
53
  const {
42
54
  errorMessage = "Only one instance of the SlotComponent is allowed",
43
55
  throwOnMultipleSlotMatch = false
44
56
  } = options;
45
57
  const childrenArray = toArray(children);
46
- const Slot = childrenArray.filter((child) => isSlotElement(child, SlotWrapper));
47
- if (throwOnMultipleSlotMatch && Slot.length > 1) {
58
+ const shouldThrow = throwOnMultipleSlotMatch && calculateSlotOccurrences(childrenArray, SlotComponent2) > 1;
59
+ if (shouldThrow) {
48
60
  throw new AssertionError(errorMessage);
49
61
  }
50
- return Slot[0];
62
+ const slotElement = childrenArray.find((child) => matchesSlotComponent(child, SlotComponent2));
63
+ return slotElement;
64
+ };
65
+ var getMultipleSlots = (children, SlotComponents, options) => {
66
+ const slots = SlotComponents.map(
67
+ (SlotComponent2) => getSingleSlot(children, SlotComponent2, options)
68
+ );
69
+ const regularChildren = getRegularChildren(children, SlotComponents);
70
+ return { regularChildren, slots };
51
71
  };
52
- var isSlotElementMultiple = (child, SlotWrapperArray) => SlotWrapperArray.some((slotWrapper) => isSlotElement(child, slotWrapper));
53
- var getOtherChildren = (children, SlotWrapperOrWrappers) => {
72
+ var getRegularChildren = (children, SlotComponents) => {
54
73
  const childrenArray = toArray(children);
55
- const otherChildren = isArray(SlotWrapperOrWrappers) ? childrenArray.filter((child) => !isSlotElementMultiple(child, SlotWrapperOrWrappers)) : childrenArray.filter((child) => !isSlotElement(child, SlotWrapperOrWrappers));
56
- return otherChildren;
74
+ const regularChildren = childrenArray.filter(
75
+ (child) => !matchesAnySlotComponent(child, SlotComponents)
76
+ );
77
+ return regularChildren;
57
78
  };
58
- var mergeTwoProps = (slotProps, childProps) => {
59
- if (!slotProps || !childProps) {
60
- return childProps ?? slotProps ?? {};
61
- }
62
- const overrideProps = { ...childProps };
63
- for (const propName of Object.keys(slotProps)) {
64
- const slotPropValue = slotProps[propName];
65
- const childPropValue = childProps[propName];
66
- if (propName === "style" && isPlainObject(slotPropValue) && isPlainObject(childPropValue)) {
67
- overrideProps[propName] = { ...slotPropValue, ...childPropValue };
68
- continue;
69
- }
70
- if (propName === "className" || propName === "class") {
71
- overrideProps[propName] = mergeClassNames(slotPropValue, childPropValue);
79
+ var slotComponentSymbol = Symbol("SlotComponent");
80
+ var getSlotMap = (children) => {
81
+ const childrenArray = toArray(children);
82
+ const slots = {
83
+ default: []
84
+ };
85
+ for (const child of childrenArray) {
86
+ const isSlotElementWithName = isValidElement(child) && child.type.id === slotComponentSymbol && child.props.name;
87
+ const isRegularElementWithSlotName = isValidElement(child) && child.props["data-slot-name"];
88
+ if (!isSlotElementWithName && !isRegularElementWithSlotName) {
89
+ slots.default.push(child);
72
90
  continue;
73
91
  }
74
- const isHandler = propName.startsWith("on");
75
- if (isHandler && isFunction(slotPropValue) && isFunction(childPropValue)) {
76
- overrideProps[propName] = mergeFunctions(childPropValue, slotPropValue);
77
- }
92
+ const slotName = isSlotElementWithName ? child.props.name : child.props["data-slot-name"];
93
+ slots[slotName] = child.props.children;
78
94
  }
79
- return { ...slotProps, ...overrideProps };
95
+ return slots;
80
96
  };
97
+ var createSlotComponent = () => {
98
+ function SlotComponent2(props) {
99
+ return null;
100
+ }
101
+ SlotComponent2.id = slotComponentSymbol;
102
+ return SlotComponent2;
103
+ };
104
+ var SlotComponent = createSlotComponent();
81
105
  var handleMergePropsIntoResult = (mergedResult, propsObject) => {
82
106
  for (const propName of Object.keys(mergedResult)) {
83
107
  const mergedResultValue = mergedResult[propName];
@@ -114,7 +138,30 @@ var mergeProps = (...parameters) => {
114
138
  }
115
139
  return mergedResult;
116
140
  };
141
+ var mergeTwoProps = (slotProps, childProps) => {
142
+ if (!slotProps || !childProps) {
143
+ return childProps ?? slotProps ?? {};
144
+ }
145
+ const overrideProps = { ...childProps };
146
+ for (const propName of Object.keys(slotProps)) {
147
+ const slotPropValue = slotProps[propName];
148
+ const childPropValue = childProps[propName];
149
+ if (propName === "style" && isPlainObject(slotPropValue) && isPlainObject(childPropValue)) {
150
+ overrideProps[propName] = { ...slotPropValue, ...childPropValue };
151
+ continue;
152
+ }
153
+ if (propName === "className" || propName === "class") {
154
+ overrideProps[propName] = mergeClassNames(slotPropValue, childPropValue);
155
+ continue;
156
+ }
157
+ const isHandler = propName.startsWith("on");
158
+ if (isHandler && isFunction(slotPropValue) && isFunction(childPropValue)) {
159
+ overrideProps[propName] = mergeFunctions(childPropValue, slotPropValue);
160
+ }
161
+ }
162
+ return { ...slotProps, ...overrideProps };
163
+ };
117
164
 
118
- export { composeRefs, getOtherChildren, getSlotElement, isSlotElement, mergeProps, mergeTwoProps, setRef };
165
+ export { SlotComponent, composeRefs, createSlotComponent, getMultipleSlots, getRegularChildren, getSingleSlot, getSlotMap, matchesAnySlotComponent, matchesSlotComponent, mergeProps, mergeTwoProps, setRef, slotComponentSymbol };
119
166
  //# sourceMappingURL=index.js.map
120
167
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/utils/composeRefs.ts","../../../src/utils/getSlotElement.ts","../../../src/utils/mergeTwoProps.ts","../../../src/utils/mergeProps.ts"],"names":["isFunction","mergeClassNames","isPlainObject","mergeFunctions"],"mappings":"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","file":"index.js","sourcesContent":["import { isFunction } from \"@zayne-labs/toolkit-type-helpers\";\nimport type { RefCallback } from \"react\";\n\ntype PossibleRef<TRef> = 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>(ref: PossibleRef<TRef>, node: TRef): 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>(refs: Array<PossibleRef<TRef>>): RefCallback<TRef> => {\n\tconst refCallBack: 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\t// == React 18 may not call the cleanup function so we need to call it manually on element unmount\n\t\tif (!node) {\n\t\t\tcleanupFn();\n\t\t\treturn;\n\t\t}\n\n\t\treturn cleanupFn;\n\t};\n\n\treturn refCallBack;\n};\n","import { toArray } from \"@zayne-labs/toolkit-core\";\nimport { type AnyFunction, AssertionError, isArray } from \"@zayne-labs/toolkit-type-helpers\";\nimport { isValidElement } from \"react\";\n\ntype Noop = () => void;\ntype WithSlot = { slot?: string };\n\ntype FunctionalComponent<TProps> = (\n\tprops: TProps\n\t// eslint-disable-next-line perfectionist/sort-union-types -- Lets keep the first one first\n) => ReturnType<React.FunctionComponent<TProps>> | AnyFunction<React.ReactNode>;\n\n// TODO - Add support for thing like <div slot=\"foo\"> OR <Slot name=\"foo\">\nexport const isSlotElement = <TProps>(\n\tchild: React.ReactNode,\n\tSlotWrapper: FunctionalComponent<TProps>\n) => {\n\tif (!isValidElement(child)) {\n\t\treturn false;\n\t}\n\n\tif ((child.type as WithSlot).slot === (SlotWrapper as WithSlot).slot) {\n\t\treturn true;\n\t}\n\n\tif ((child.type as Noop).name === (SlotWrapper as Noop).name) {\n\t\treturn true;\n\t}\n\n\tif (child.type === SlotWrapper) {\n\t\treturn true;\n\t}\n\n\treturn child.type.toString() === SlotWrapper.toString();\n};\n\ntype SlotOptions = {\n\terrorMessage?: string;\n\tthrowOnMultipleSlotMatch?: boolean;\n};\n\n/**\n * @description Retrieves a single slot element from a collection of React children that matches the provided SlotWrapper component.\n *\n * @throws {AssertionError} When throwOnMultipleSlotMatch is true and multiple slots are found\n */\nexport const getSlotElement = <TProps = Record<string, unknown>>(\n\tchildren: React.ReactNode,\n\tSlotWrapper: FunctionalComponent<TProps>,\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 childrenArray = toArray<React.ReactNode>(children);\n\n\tconst Slot = childrenArray.filter((child) => isSlotElement(child, SlotWrapper));\n\n\tif (throwOnMultipleSlotMatch && Slot.length > 1) {\n\t\tthrow new AssertionError(errorMessage);\n\t}\n\n\treturn Slot[0] as React.ReactElement<TProps> | undefined;\n};\n\nconst isSlotElementMultiple = <TProps>(\n\tchild: React.ReactNode,\n\tSlotWrapperArray: Array<FunctionalComponent<TProps>>\n) => SlotWrapperArray.some((slotWrapper) => isSlotElement(child, slotWrapper));\n\n// Check if the child is a Slot element by matching any in the SlotWrapperArray\nexport const getOtherChildren = <\n\tTProps = Record<string, unknown>,\n\tTChildren extends React.ReactNode = React.ReactNode,\n>(\n\tchildren: TChildren,\n\tSlotWrapperOrWrappers: Array<FunctionalComponent<TProps>> | FunctionalComponent<TProps>\n) => {\n\tconst childrenArray = toArray<TChildren>(children);\n\n\tconst otherChildren = isArray(SlotWrapperOrWrappers)\n\t\t? childrenArray.filter((child) => !isSlotElementMultiple(child, SlotWrapperOrWrappers))\n\t\t: childrenArray.filter((child) => !isSlotElement(child, SlotWrapperOrWrappers));\n\n\treturn otherChildren as TChildren extends unknown[] ? TChildren : TChildren[];\n};\n","import { mergeClassNames, mergeFunctions } from \"@zayne-labs/toolkit-core\";\nimport { isFunction, isPlainObject } from \"@zayne-labs/toolkit-type-helpers\";\n\ntype UnknownProps = Record<never, never>;\n\nconst mergeTwoProps = <TProps extends UnknownProps>(\n\tslotProps: TProps | undefined,\n\tchildProps: TProps | undefined\n): TProps => {\n\tif (!slotProps || !childProps) {\n\t\treturn childProps ?? slotProps ?? ({} as TProps);\n\t}\n\n\t// == all child props should override slotProps\n\tconst overrideProps = { ...childProps } as Record<string, unknown>;\n\n\tfor (const propName of Object.keys(slotProps)) {\n\t\tconst slotPropValue = (slotProps as Record<string, unknown>)[propName];\n\t\tconst childPropValue = (childProps as Record<string, unknown>)[propName];\n\n\t\t// == if it's `style`, we merge them\n\t\tif (propName === \"style\" && isPlainObject(slotPropValue) && isPlainObject(childPropValue)) {\n\t\t\toverrideProps[propName] = { ...slotPropValue, ...childPropValue };\n\t\t\tcontinue;\n\t\t}\n\n\t\t// == if it's `className` or `class`, we merge them\n\t\tif (propName === \"className\" || propName === \"class\") {\n\t\t\toverrideProps[propName] = mergeClassNames(slotPropValue as string, childPropValue as string);\n\t\t\tcontinue;\n\t\t}\n\n\t\tconst isHandler = propName.startsWith(\"on\");\n\n\t\t// == if the handler exists on both, we compose them\n\t\tif (isHandler && isFunction(slotPropValue) && isFunction(childPropValue)) {\n\t\t\toverrideProps[propName] = mergeFunctions(childPropValue, slotPropValue);\n\t\t}\n\t}\n\n\treturn { ...slotProps, ...overrideProps };\n};\n\nexport { mergeTwoProps };\n","import { mergeClassNames, mergeFunctions } from \"@zayne-labs/toolkit-core\";\nimport { isFunction, isPlainObject } from \"@zayne-labs/toolkit-type-helpers\";\n\n// const CSS_REGEX = /((?:--)?(?:\\w+-?)+)\\s*:\\s*([^;]*)/g;\n\n// const serialize = (style: string): Record<string, string> => {\n// \tconst res: Record<string, string> = {};\n// \tlet match: RegExpExecArray | null;\n// \twhile ((match = CSS_REGEX.exec(style))) {\n// \t\tres[match[1]!] = match[2]!;\n// \t}\n// \treturn res;\n// };\n\n// const css = (\n// \ta: Record<string, string> | string | undefined,\n// \tb: Record<string, string> | string | undefined\n// ): Record<string, string> | string => {\n// \tif (isString(a)) {\n// \t\tif (isString(b)) return `${a};${b}`;\n// \t\ta = serialize(a);\n// \t} else if (isString(b)) {\n// \t\tb = serialize(b);\n// \t}\n// \treturn Object.assign({}, a ?? {}, b ?? {});\n// };\n\ntype UnionToIntersection<TUnion> = (TUnion extends unknown ? (param: TUnion) => void : \"\") extends (\n\tparam: infer TParam\n) => void\n\t? TParam\n\t: \"\";\n\n/* eslint-disable no-param-reassign -- Mutation is fine here since it's an internally managed object */\nconst handleMergePropsIntoResult = (\n\tmergedResult: Record<string, unknown>,\n\tpropsObject: Record<string, unknown>\n) => {\n\tfor (const propName of Object.keys(mergedResult)) {\n\t\tconst mergedResultValue = mergedResult[propName];\n\t\tconst propsObjectValue = propsObject[propName];\n\n\t\tif (propName === \"className\" || propName === \"class\") {\n\t\t\tmergedResult[propName] = mergeClassNames(mergedResultValue as string, propsObjectValue as string);\n\t\t\tcontinue;\n\t\t}\n\n\t\tif (propName === \"style\" && isPlainObject(mergedResultValue) && isPlainObject(propsObjectValue)) {\n\t\t\t// mergedResult[propName] = css(mergedResultValue, propsObjectValue);\n\t\t\tmergedResult[propName] = { ...mergedResultValue, ...propsObjectValue };\n\t\t\tcontinue;\n\t\t}\n\n\t\tconst isHandler = propName.startsWith(\"on\");\n\n\t\tif (isHandler && isFunction(mergedResultValue) && isFunction(propsObjectValue)) {\n\t\t\tmergedResult[propName] = mergeFunctions(propsObjectValue, mergedResultValue);\n\t\t\tcontinue;\n\t\t}\n\n\t\tmergedResult[propName] = propsObjectValue !== undefined ? propsObjectValue : mergedResultValue;\n\t}\n};\n\nconst addMissingPropsToResult = (\n\tmergedResult: Record<string, unknown>,\n\tpropsObject: Record<string, unknown>\n) => {\n\tfor (const propName of Object.keys(propsObject)) {\n\t\tif (mergedResult[propName] === undefined) {\n\t\t\tmergedResult[propName] = propsObject[propName];\n\t\t}\n\t}\n};\n/* eslint-enable no-param-reassign -- Mutation is fine here since it's an internally managed object */\n\ntype UnknownProps = Record<never, never>;\n\nconst mergeProps = <TProps extends UnknownProps>(\n\t...parameters: Array<TProps | undefined>\n): UnionToIntersection<TProps> => {\n\tconst mergedResult: Record<string, unknown> = {};\n\n\tfor (const propsObject of parameters) {\n\t\tif (!propsObject) continue;\n\n\t\thandleMergePropsIntoResult(mergedResult, propsObject);\n\n\t\t// == Add props from propsObject that are not in the mergedResult\n\t\taddMissingPropsToResult(mergedResult, propsObject);\n\t}\n\n\treturn mergedResult as never;\n};\n\nexport { mergeProps };\n"]}
1
+ {"version":3,"sources":["../../../src/utils/composeRefs.ts","../../../src/utils/getSlotElement.ts","../../../src/utils/getSlotMap.ts","../../../src/utils/mergeProps.ts","../../../src/utils/mergeTwoProps.ts"],"names":["SlotComponent","toArray","isValidElement","isFunction","isPlainObject","mergeClassNames","mergeFunctions"],"mappings":"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","file":"index.js","sourcesContent":["import { isFunction } from \"@zayne-labs/toolkit-type-helpers\";\nimport type { RefCallback } from \"react\";\n\ntype PossibleRef<TRef> = 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>(ref: PossibleRef<TRef>, node: TRef): 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>(refs: Array<PossibleRef<TRef>>): RefCallback<TRef> => {\n\tconst refCallBack: 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\t// == React 18 may not call the cleanup function so we need to call it manually on element unmount\n\t\tif (!node) {\n\t\t\tcleanupFn();\n\t\t\treturn;\n\t\t}\n\n\t\treturn cleanupFn;\n\t};\n\n\treturn refCallBack;\n};\n","import { toArray } from \"@zayne-labs/toolkit-core\";\nimport { AssertionError, type UnknownObject } from \"@zayne-labs/toolkit-type-helpers\";\nimport { isValidElement } from \"react\";\n\ntype FunctionalComponent<TProps extends UnknownObject = never> = React.FunctionComponent<TProps>;\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 direct component reference\n * 2. Matches by slot symbol property\n * 3. Matches by stringified component\n * 4. Matches by component name\n */\nexport const matchesSlotComponent = (child: React.ReactNode, SlotComponent: FunctionalComponent) => {\n\tif (!isValidElement(child)) {\n\t\treturn false;\n\t}\n\n\tif (child.type === SlotComponent) {\n\t\treturn true;\n\t}\n\n\ttype WithSlot = { readonly slotSymbol?: unique symbol };\n\n\tif ((child.type as WithSlot).slotSymbol === (SlotComponent as WithSlot).slotSymbol) {\n\t\treturn true;\n\t}\n\n\tif ((child.type as FunctionalComponent).name === SlotComponent.name) {\n\t\treturn true;\n\t}\n\n\treturn child.type.toString() === SlotComponent.toString();\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\terrorMessage?: string;\n\tthrowOnMultipleSlotMatch?: boolean;\n};\n\n/**\n * @description Counts how many times a 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 childrenArray = toArray<React.ReactNode>(children);\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\nexport const getMultipleSlots = <const TSlotComponents extends FunctionalComponent[]>(\n\tchildren: React.ReactNode,\n\tSlotComponents: TSlotComponents,\n\toptions?: SlotOptions\n) => {\n\ttype SlotsType = { [Key in keyof TSlotComponents]: ReturnType<TSlotComponents[Key]> };\n\n\tconst slots = SlotComponents.map((SlotComponent) =>\n\t\tgetSingleSlot(children, SlotComponent, options)\n\t) as SlotsType;\n\n\tconst regularChildren = getRegularChildren(children, SlotComponents);\n\n\treturn { regularChildren, slots };\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 = (children: React.ReactNode, SlotComponents: FunctionalComponent[]) => {\n\tconst childrenArray = toArray<React.ReactNode>(children);\n\n\tconst regularChildren = childrenArray.filter(\n\t\t(child) => !matchesAnySlotComponent(child, SlotComponents)\n\t);\n\n\treturn regularChildren;\n};\n","import { toArray } from \"@zayne-labs/toolkit-core\";\nimport type { AnyFunction, UnionToIntersection } from \"@zayne-labs/toolkit-type-helpers\";\nimport { isValidElement } from \"react\";\n\n/**\n * Possible children types that can be passed to a slot\n */\ntype PossibleSlotChildrenType =\n\t| AnyFunction<React.ReactNode | React.ReactNode[]>\n\t| React.ReactNode\n\t| React.ReactNode[];\n\n/**\n * Maps slot names to their corresponding children types\n */\ntype GetSlotMapResult<TSlotComponentProps extends GetSlotComponentProps> = UnionToIntersection<{\n\t[TName in keyof TSlotComponentProps as TSlotComponentProps[\"name\"]]: TSlotComponentProps[\"children\"];\n}>;\n\n/**\n * Symbol used to identify SlotComponent instances\n */\nexport const slotComponentSymbol = Symbol(\"SlotComponent\");\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) => {\n\tconst childrenArray = toArray<React.ReactNode>(children);\n\n\tconst slots: Record<string, PossibleSlotChildrenType> & { default: React.ReactNode[] } = {\n\t\tdefault: [],\n\t};\n\n\tfor (const child of childrenArray) {\n\t\ttype SlotElementProps = TSlotComponentProps & { \"data-slot-name\": never };\n\n\t\ttype RegularElementProps = Pick<TSlotComponentProps, \"children\"> & {\n\t\t\t\"data-slot-name\": string;\n\t\t\tname: never;\n\t\t};\n\n\t\tconst isSlotElementWithName =\n\t\t\tisValidElement<SlotElementProps>(child)\n\t\t\t&& (child.type as typeof SlotComponent).id === slotComponentSymbol\n\t\t\t&& child.props.name;\n\n\t\tconst isRegularElementWithSlotName =\n\t\t\tisValidElement<RegularElementProps>(child) && child.props[\"data-slot-name\"];\n\n\t\tif (!isSlotElementWithName && !isRegularElementWithSlotName) {\n\t\t\tslots.default.push(child);\n\t\t\tcontinue;\n\t\t}\n\n\t\tconst slotName = isSlotElementWithName ? child.props.name : child.props[\"data-slot-name\"];\n\n\t\tslots[slotName] = child.props.children;\n\t}\n\n\treturn slots as GetSlotMapResult<TSlotComponentProps> & { default: React.ReactNode[] };\n};\n\n/**\n * @description Produce props for the SlotComponent\n */\nexport type GetSlotComponentProps<\n\tTName extends string = string,\n\tTChildren extends PossibleSlotChildrenType = PossibleSlotChildrenType,\n> = {\n\t/** Content to render in the slot */\n\tchildren: TChildren;\n\t/** Name of the slot where content should be rendered */\n\tname: TName;\n};\n\n/**\n * @description Function used to create a slot component that defines named slots in a parent component. This component created doesn't render anything,\n * it's used purely for slot definition.\n *\n * @example\n * ```tsx\n * import { type GetSlotComponentProps, createSlotComponent, 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 * Parent.Slot = createSlotComponent<SlotProps>();\n * // OR\n * Parent.Slot = SlotComponent<SlotProps>\n * ```\n *\n *\n * @example\n * Usage:\n\t```tsx\n * function App() {\n * return (\n * <Parent>\n * <Parent.Slot name=\"header\">Header Content</Parent.Slot>\n * <div>Default Content</div>\n * <Parent.Slot name=\"footer\">Footer Content</Parent.Slot>\n * </Parent>\n * );\n * }\n * ```\n */\n\nexport const createSlotComponent = <TBaseSlotComponentProps extends GetSlotComponentProps>() => {\n\tfunction SlotComponent<TSlotComponentProps extends TBaseSlotComponentProps>(\n\t\t// eslint-disable-next-line ts-eslint/no-unused-vars -- The props here are just for type definition really, as this component doesn't need to render anything\n\t\tprops: TSlotComponentProps\n\t) {\n\t\treturn null as React.ReactNode;\n\t}\n\n\tSlotComponent.id = slotComponentSymbol;\n\n\treturn SlotComponent;\n};\n\n/**\n * @description Slot component created by createSlotComponent\n */\nexport const SlotComponent = createSlotComponent();\n","import { mergeClassNames, mergeFunctions } from \"@zayne-labs/toolkit-core\";\nimport { isFunction, isPlainObject } from \"@zayne-labs/toolkit-type-helpers\";\n\n// const CSS_REGEX = /((?:--)?(?:\\w+-?)+)\\s*:\\s*([^;]*)/g;\n\n// const serialize = (style: string): Record<string, string> => {\n// \tconst res: Record<string, string> = {};\n// \tlet match: RegExpExecArray | null;\n// \twhile ((match = CSS_REGEX.exec(style))) {\n// \t\tres[match[1]!] = match[2]!;\n// \t}\n// \treturn res;\n// };\n\n// const css = (\n// \ta: Record<string, string> | string | undefined,\n// \tb: Record<string, string> | string | undefined\n// ): Record<string, string> | string => {\n// \tif (isString(a)) {\n// \t\tif (isString(b)) return `${a};${b}`;\n// \t\ta = serialize(a);\n// \t} else if (isString(b)) {\n// \t\tb = serialize(b);\n// \t}\n// \treturn Object.assign({}, a ?? {}, b ?? {});\n// };\n\ntype UnionToIntersection<TUnion> = (TUnion extends unknown ? (param: TUnion) => void : \"\") extends (\n\tparam: infer TParam\n) => void\n\t? TParam\n\t: \"\";\n\n/* eslint-disable no-param-reassign -- Mutation is fine here since it's an internally managed object */\nconst handleMergePropsIntoResult = (\n\tmergedResult: Record<string, unknown>,\n\tpropsObject: Record<string, unknown>\n) => {\n\tfor (const propName of Object.keys(mergedResult)) {\n\t\tconst mergedResultValue = mergedResult[propName];\n\t\tconst propsObjectValue = propsObject[propName];\n\n\t\tif (propName === \"className\" || propName === \"class\") {\n\t\t\tmergedResult[propName] = mergeClassNames(mergedResultValue as string, propsObjectValue as string);\n\t\t\tcontinue;\n\t\t}\n\n\t\tif (propName === \"style\" && isPlainObject(mergedResultValue) && isPlainObject(propsObjectValue)) {\n\t\t\t// mergedResult[propName] = css(mergedResultValue, propsObjectValue);\n\t\t\tmergedResult[propName] = { ...mergedResultValue, ...propsObjectValue };\n\t\t\tcontinue;\n\t\t}\n\n\t\tconst isHandler = propName.startsWith(\"on\");\n\n\t\tif (isHandler && isFunction(mergedResultValue) && isFunction(propsObjectValue)) {\n\t\t\tmergedResult[propName] = mergeFunctions(propsObjectValue, mergedResultValue);\n\t\t\tcontinue;\n\t\t}\n\n\t\tmergedResult[propName] = propsObjectValue !== undefined ? propsObjectValue : mergedResultValue;\n\t}\n};\n\nconst addMissingPropsToResult = (\n\tmergedResult: Record<string, unknown>,\n\tpropsObject: Record<string, unknown>\n) => {\n\tfor (const propName of Object.keys(propsObject)) {\n\t\tif (mergedResult[propName] === undefined) {\n\t\t\tmergedResult[propName] = propsObject[propName];\n\t\t}\n\t}\n};\n/* eslint-enable no-param-reassign -- Mutation is fine here since it's an internally managed object */\n\ntype UnknownProps = Record<never, never>;\n\nconst mergeProps = <TProps extends UnknownProps>(\n\t...parameters: Array<TProps | undefined>\n): UnionToIntersection<TProps> => {\n\tconst mergedResult: Record<string, unknown> = {};\n\n\tfor (const propsObject of parameters) {\n\t\tif (!propsObject) continue;\n\n\t\thandleMergePropsIntoResult(mergedResult, propsObject);\n\n\t\t// == Add props from propsObject that are not in the mergedResult\n\t\taddMissingPropsToResult(mergedResult, propsObject);\n\t}\n\n\treturn mergedResult as never;\n};\n\nexport { mergeProps };\n","import { mergeClassNames, mergeFunctions } from \"@zayne-labs/toolkit-core\";\nimport { isFunction, isPlainObject } from \"@zayne-labs/toolkit-type-helpers\";\n\ntype UnknownProps = Record<never, never>;\n\nconst mergeTwoProps = <TProps extends UnknownProps>(\n\tslotProps: TProps | undefined,\n\tchildProps: TProps | undefined\n): TProps => {\n\tif (!slotProps || !childProps) {\n\t\treturn childProps ?? slotProps ?? ({} as TProps);\n\t}\n\n\t// == all child props should override slotProps\n\tconst overrideProps = { ...childProps } as Record<string, unknown>;\n\n\tfor (const propName of Object.keys(slotProps)) {\n\t\tconst slotPropValue = (slotProps as Record<string, unknown>)[propName];\n\t\tconst childPropValue = (childProps as Record<string, unknown>)[propName];\n\n\t\t// == if it's `style`, we merge them\n\t\tif (propName === \"style\" && isPlainObject(slotPropValue) && isPlainObject(childPropValue)) {\n\t\t\toverrideProps[propName] = { ...slotPropValue, ...childPropValue };\n\t\t\tcontinue;\n\t\t}\n\n\t\t// == if it's `className` or `class`, we merge them\n\t\tif (propName === \"className\" || propName === \"class\") {\n\t\t\toverrideProps[propName] = mergeClassNames(slotPropValue as string, childPropValue as string);\n\t\t\tcontinue;\n\t\t}\n\n\t\tconst isHandler = propName.startsWith(\"on\");\n\n\t\t// == if the handler exists on both, we compose them\n\t\tif (isHandler && isFunction(slotPropValue) && isFunction(childPropValue)) {\n\t\t\toverrideProps[propName] = mergeFunctions(childPropValue, slotPropValue);\n\t\t}\n\t}\n\n\treturn { ...slotProps, ...overrideProps };\n};\n\nexport { mergeTwoProps };\n"]}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@zayne-labs/toolkit-react",
3
3
  "type": "module",
4
- "version": "0.8.62",
4
+ "version": "0.9.1",
5
5
  "description": "A collection of utility functions, types and composables used by my other projects. Nothing too fancy but can be useful.",
6
6
  "author": "Ryan Zayne",
7
7
  "license": "MIT",
@@ -50,8 +50,8 @@
50
50
  }
51
51
  },
52
52
  "dependencies": {
53
- "@zayne-labs/toolkit-core": "0.8.62",
54
- "@zayne-labs/toolkit-type-helpers": "0.8.62"
53
+ "@zayne-labs/toolkit-core": "0.9.1",
54
+ "@zayne-labs/toolkit-type-helpers": "0.9.1"
55
55
  },
56
56
  "devDependencies": {
57
57
  "@arethetypeswrong/cli": "^0.17.4",
@@ -86,7 +86,7 @@
86
86
  },
87
87
  {
88
88
  "path": "./src/utils/index.ts",
89
- "limit": "1 kb"
89
+ "limit": "2 kb"
90
90
  },
91
91
  {
92
92
  "path": "./src/zustand/index.ts",