@aweebit/react-essentials 0.10.3 → 0.10.5

package/README.md

@@ -20,7 +20,7 @@
 const useEventListener: UseEventListener;
 ```
 
-Defined in: [hooks/useEventListener.ts:135](https://github.com/aweebit/react-essentials/blob/v0.10.3/src/hooks/useEventListener.ts#L135)
+Defined in: [hooks/useEventListener.ts:135](https://github.com/aweebit/react-essentials/blob/v0.10.5/src/hooks/useEventListener.ts#L135)
 
 Adds `handler` as a listener for the event `eventName` of `target` with the
 provided `options` applied
@@ -71,7 +71,7 @@ function useReducerWithDeps<S, A>(
 ): [S, ActionDispatch<A>];
 ```
 
-Defined in: [hooks/useReducerWithDeps.ts:59](https://github.com/aweebit/react-essentials/blob/v0.10.3/src/hooks/useReducerWithDeps.ts#L59)
+Defined in: [hooks/useReducerWithDeps.ts:59](https://github.com/aweebit/react-essentials/blob/v0.10.5/src/hooks/useReducerWithDeps.ts#L59)
 
 `useReducer` hook with an additional dependency array `deps` that resets the
 state to `initialState` when dependencies change
@@ -214,7 +214,7 @@ function useStateWithDeps<S>(
 ): [S, Dispatch<SetStateAction<S>>];
 ```
 
-Defined in: [hooks/useStateWithDeps.ts:62](https://github.com/aweebit/react-essentials/blob/v0.10.3/src/hooks/useStateWithDeps.ts#L62)
+Defined in: [hooks/useStateWithDeps.ts:62](https://github.com/aweebit/react-essentials/blob/v0.10.5/src/hooks/useStateWithDeps.ts#L62)
 
 `useState` hook with an additional dependency array `deps` that resets the
 state to `initialState` when dependencies change
@@ -341,10 +341,10 @@ Dependencies that reset the state to `initialState`
 ## contextualize()
 
 ```ts
-function contextualize(jsx): ContextualizePipe;
+function contextualize(children): ContextualizePipe;
 ```
 
-Defined in: [misc/contextualize.tsx:79](https://github.com/aweebit/react-essentials/blob/v0.10.3/src/misc/contextualize.tsx#L79)
+Defined in: [misc/contextualize.tsx:79](https://github.com/aweebit/react-essentials/blob/v0.10.5/src/misc/contextualize.tsx#L79)
 
 An alternative way to provide context values to component trees that avoids
 ever-increasing indentation
@@ -400,17 +400,17 @@ return contextualize(jsx)
 <tr>
 <td>
 
-`jsx`
+`children`
 
 </td>
 <td>
 
-`Element`
+`ReactNode`
 
 </td>
 <td>
 
-The JSX to contextualize
+The children to contextualize
 
 </td>
 </tr>
@@ -425,8 +425,8 @@ An object with the following properties:
 
 - `with`: a function that accepts a context `Context` and a value `value` for
   it as arguments and returns
-  `contextualize(<Context.Provider value={value}>{jsx}</Context.Provider>)`
-- `end`: a function that returns `jsx`
+  `contextualize(<Context.Provider value={value}>{children}</Context.Provider>)`
+- `end`: a function that returns `children`
 
 ### See
 
@@ -444,7 +444,7 @@ function createSafeContext<T>(): <DisplayName>(displayName) => {
 };
 ```
 
-Defined in: [misc/createSafeContext.ts:62](https://github.com/aweebit/react-essentials/blob/v0.10.3/src/misc/createSafeContext.ts#L62)
+Defined in: [misc/createSafeContext.ts:62](https://github.com/aweebit/react-essentials/blob/v0.10.5/src/misc/createSafeContext.ts#L62)
 
 For a given type `T`, returns a function that produces both a context of that
 type and a hook that returns the current context value if one was provided,
@@ -586,10 +586,10 @@ A function that accepts a single string argument `displayName` (e.g.
 ## wrapJSX()
 
 ```ts
-function wrapJSX(jsx): JSXWrapPipe;
+function wrapJSX<Children>(children): JSXWrapPipe<Children>;
 ```
 
-Defined in: [misc/wrapJSX.tsx:93](https://github.com/aweebit/react-essentials/blob/v0.10.3/src/misc/wrapJSX.tsx#L93)
+Defined in: [misc/wrapJSX.tsx:99](https://github.com/aweebit/react-essentials/blob/v0.10.5/src/misc/wrapJSX.tsx#L99)
 
 An alternative way to compose JSX that avoids ever-increasing indentation
 
@@ -629,6 +629,25 @@ createRoot(document.getElementById('root')!).render(
 );
 ```
 
+### Type Parameters
+
+<table>
+<thead>
+<tr>
+<th>Type Parameter</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>
+
+`Children` _extends_ `ReactNode`
+
+</td>
+</tr>
+</tbody>
+</table>
+
 ### Parameters
 
 <table>
@@ -643,17 +662,17 @@ createRoot(document.getElementById('root')!).render(
 <tr>
 <td>
 
-`jsx`
+`children`
 
 </td>
 <td>
 
-`Element`
+`Children`
 
 </td>
 <td>
 
-The JSX to wrap
+The children to wrap
 
 </td>
 </tr>
@@ -662,14 +681,14 @@ The JSX to wrap
 
 ### Returns
 
-[`JSXWrapPipe`](#jsxwrappipe)
+[`JSXWrapPipe`](#jsxwrappipe)\<`Children`\>
 
 An object with the following properties:
 
 - `with`: a function that accepts a component `Component` and props `props`
   for it as arguments and returns
-  `wrapJSX(<Component {...props}>{jsx}</Component>)`
-- `end`: a function that returns `jsx`
+  `wrapJSX(<Component {...props}>{children}</Component>)`
+- `end`: a function that returns `children`
 
 ### See
 
@@ -685,7 +704,7 @@ type UseEventListener = UseEventListenerWithImplicitWindowTarget &
   UseEventListenerWithAnyExplicitTarget;
 ```
 
-Defined in: [hooks/useEventListener.ts:12](https://github.com/aweebit/react-essentials/blob/v0.10.3/src/hooks/useEventListener.ts#L12)
+Defined in: [hooks/useEventListener.ts:12](https://github.com/aweebit/react-essentials/blob/v0.10.5/src/hooks/useEventListener.ts#L12)
 
 The type of [`useEventListener`](#useeventlistener)
 
@@ -704,7 +723,7 @@ The type of [`useEventListener`](#useeventlistener)
 type UseEventListenerWithImplicitWindowTarget = <K>(...args) => void;
 ```
 
-Defined in: [hooks/useEventListener.ts:21](https://github.com/aweebit/react-essentials/blob/v0.10.3/src/hooks/useEventListener.ts#L21)
+Defined in: [hooks/useEventListener.ts:21](https://github.com/aweebit/react-essentials/blob/v0.10.5/src/hooks/useEventListener.ts#L21)
 
 ### Type Parameters
 
@@ -772,7 +791,7 @@ type UseEventListenerWithExplicitGlobalTarget =
     UseEventListenerWithExplicitTarget<MathMLElement, MathMLElementEventMap>;
 ```
 
-Defined in: [hooks/useEventListener.ts:32](https://github.com/aweebit/react-essentials/blob/v0.10.3/src/hooks/useEventListener.ts#L32)
+Defined in: [hooks/useEventListener.ts:32](https://github.com/aweebit/react-essentials/blob/v0.10.5/src/hooks/useEventListener.ts#L32)
 
 ### See
 
@@ -789,7 +808,7 @@ type UseEventListenerWithExplicitTarget<Target, EventMap> = <T, K>(
 ) => void;
 ```
 
-Defined in: [hooks/useEventListener.ts:44](https://github.com/aweebit/react-essentials/blob/v0.10.3/src/hooks/useEventListener.ts#L44)
+Defined in: [hooks/useEventListener.ts:44](https://github.com/aweebit/react-essentials/blob/v0.10.5/src/hooks/useEventListener.ts#L44)
 
 ### Type Parameters
 
@@ -888,7 +907,7 @@ type UseEventListenerWithAnyExplicitTarget = UseEventListenerWithExplicitTarget<
 >;
 ```
 
-Defined in: [hooks/useEventListener.ts:56](https://github.com/aweebit/react-essentials/blob/v0.10.3/src/hooks/useEventListener.ts#L56)
+Defined in: [hooks/useEventListener.ts:56](https://github.com/aweebit/react-essentials/blob/v0.10.5/src/hooks/useEventListener.ts#L56)
 
 ### See
 
@@ -909,7 +928,7 @@ type UseEventListenerWithImplicitWindowTargetArgs<K> =
     : never;
 ```
 
-Defined in: [hooks/useEventListener.ts:64](https://github.com/aweebit/react-essentials/blob/v0.10.3/src/hooks/useEventListener.ts#L64)
+Defined in: [hooks/useEventListener.ts:64](https://github.com/aweebit/react-essentials/blob/v0.10.5/src/hooks/useEventListener.ts#L64)
 
 ### Type Parameters
 
@@ -954,7 +973,7 @@ type UseEventListenerWithExplicitTargetArgs<EventMap, T, K> = [
 ];
 ```
 
-Defined in: [hooks/useEventListener.ts:78](https://github.com/aweebit/react-essentials/blob/v0.10.3/src/hooks/useEventListener.ts#L78)
+Defined in: [hooks/useEventListener.ts:78](https://github.com/aweebit/react-essentials/blob/v0.10.5/src/hooks/useEventListener.ts#L78)
 
 ### Type Parameters
 
@@ -1000,11 +1019,11 @@ Defined in: [hooks/useEventListener.ts:78](https://github.com/aweebit/react-esse
 ```ts
 type ContextualizePipe = {
   with: ContextualizeWith;
-  end: () => React.JSX.Element;
+  end: () => ReactNode;
 };
 ```
 
-Defined in: [misc/contextualize.tsx:13](https://github.com/aweebit/react-essentials/blob/v0.10.3/src/misc/contextualize.tsx#L13)
+Defined in: [misc/contextualize.tsx:13](https://github.com/aweebit/react-essentials/blob/v0.10.5/src/misc/contextualize.tsx#L13)
 
 The return type of [`contextualize`](#contextualize)
 
@@ -1043,7 +1062,7 @@ The return type of [`contextualize`](#contextualize)
 </td>
 <td>
 
-() => `React.JSX.Element`
+() => `ReactNode`
 
 </td>
 </tr>
@@ -1058,7 +1077,7 @@ The return type of [`contextualize`](#contextualize)
 type ContextualizeWith = <T>(Context, value) => ContextualizePipe;
 ```
 
-Defined in: [misc/contextualize.tsx:23](https://github.com/aweebit/react-essentials/blob/v0.10.3/src/misc/contextualize.tsx#L23)
+Defined in: [misc/contextualize.tsx:23](https://github.com/aweebit/react-essentials/blob/v0.10.5/src/misc/contextualize.tsx#L23)
 
 ### Type Parameters
 
@@ -1130,13 +1149,13 @@ Defined in: [misc/contextualize.tsx:23](https://github.com/aweebit/react-essenti
 ## JSXWrapPipe
 
 ```ts
-type JSXWrapPipe = {
-  with: WrapJSXWith;
-  end: () => React.JSX.Element;
+type JSXWrapPipe<Children> = {
+  with: WrapJSXWith<Children>;
+  end: () => Children;
 };
 ```
 
-Defined in: [misc/wrapJSX.tsx:17](https://github.com/aweebit/react-essentials/blob/v0.10.3/src/misc/wrapJSX.tsx#L17)
+Defined in: [misc/wrapJSX.tsx:19](https://github.com/aweebit/react-essentials/blob/v0.10.5/src/misc/wrapJSX.tsx#L19)
 
 The return type of [`wrapJSX`](#wrapjsx)
 
@@ -1145,6 +1164,25 @@ The return type of [`wrapJSX`](#wrapjsx)
 [`wrapJSX`](#wrapjsx),
 [`WrapJSXWith`](#wrapjsxwith)
 
+### Type Parameters
+
+<table>
+<thead>
+<tr>
+<th>Type Parameter</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>
+
+`Children` _extends_ `ReactNode`
+
+</td>
+</tr>
+</tbody>
+</table>
+
 ### Properties
 
 <table>
@@ -1163,7 +1201,7 @@ The return type of [`wrapJSX`](#wrapjsx)
 </td>
 <td>
 
-[`WrapJSXWith`](#wrapjsxwith)
+[`WrapJSXWith`](#wrapjsxwith)\<`Children`\>
 
 </td>
 </tr>
@@ -1175,7 +1213,7 @@ The return type of [`wrapJSX`](#wrapjsx)
 </td>
 <td>
 
-() => `React.JSX.Element`
+() => `Children`
 
 </td>
 </tr>
@@ -1187,10 +1225,29 @@ The return type of [`wrapJSX`](#wrapjsx)
 ## WrapJSXWith()
 
 ```ts
-type WrapJSXWith = <C>(...args) => JSXWrapPipe;
+type WrapJSXWith<Children> = <C>(...args) => JSXWrapPipe<ReactElement>;
 ```
 
-Defined in: [misc/wrapJSX.tsx:27](https://github.com/aweebit/react-essentials/blob/v0.10.3/src/misc/wrapJSX.tsx#L27)
+Defined in: [misc/wrapJSX.tsx:29](https://github.com/aweebit/react-essentials/blob/v0.10.5/src/misc/wrapJSX.tsx#L29)
+
+### Type Parameters
+
+<table>
+<thead>
+<tr>
+<th>Type Parameter</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>
+
+`Children` _extends_ `ReactNode`
+
+</td>
+</tr>
+</tbody>
+</table>
 
 ### Type Parameters
 
@@ -1229,7 +1286,7 @@ Defined in: [misc/wrapJSX.tsx:27](https://github.com/aweebit/react-essentials/bl
 </td>
 <td>
 
-\[`C`, `...(Record<never, unknown> extends Omit<ComponentProps<C>, "children"> ? [props?: React.JSX.IntrinsicAttributes & Omit<ComponentProps<C>, "children">] : [props: React.JSX.IntrinsicAttributes & Omit<ComponentProps<C>, "children">])`\]
+\[`"children"` _extends_ keyof `ComponentProps`\<`C`\> ? \[`Children`\] _extends_ \[`ComponentProps`\<`C`\>\[`"children"`\]\] ? `C` : `never` : `never`, `...(Record<never, unknown> extends Omit<ComponentProps<C>, "children"> ? [props?: React.JSX.IntrinsicAttributes & Omit<ComponentProps<C>, "children">] : [props: React.JSX.IntrinsicAttributes & Omit<ComponentProps<C>, "children">])`\]
 
 </td>
 </tr>
@@ -1238,7 +1295,7 @@ Defined in: [misc/wrapJSX.tsx:27](https://github.com/aweebit/react-essentials/bl
 
 ### Returns
 
-[`JSXWrapPipe`](#jsxwrappipe)
+[`JSXWrapPipe`](#jsxwrappipe)\<`ReactElement`\>
 
 ### See
 

package/dist/misc/contextualize.d.ts

@@ -1,4 +1,4 @@
-import type { Context, default as React } from 'react';
+import type { Context, ReactNode } from 'react';
 /**
  * The return type of {@linkcode contextualize}
  *
@@ -8,7 +8,7 @@ import type { Context, default as React } from 'react';
  */
 export type ContextualizePipe = {
     with: ContextualizeWith;
-    end: () => React.JSX.Element;
+    end: () => ReactNode;
 };
 /**
  * @see
@@ -56,16 +56,16 @@ export type ContextualizeWith = <T>(Context: Context<T>, value: NoInfer<T>) => C
  *   .end();
  * ```
  *
- * @param jsx The JSX to contextualize
+ * @param children The children to contextualize
  *
  * @returns An object with the following properties:
  * - `with`: a function that accepts a context `Context` and a value `value` for
  *   it as arguments and returns
- *   `contextualize(<Context.Provider value={value}>{jsx}</Context.Provider>)`
- * - `end`: a function that returns `jsx`
+ *   `contextualize(<Context.Provider value={value}>{children}</Context.Provider>)`
+ * - `end`: a function that returns `children`
  *
  * @see
  * {@linkcode ContextualizePipe}
  */
-export declare function contextualize(jsx: React.JSX.Element): ContextualizePipe;
+export declare function contextualize(children: ReactNode): ContextualizePipe;
 //# sourceMappingURL=contextualize.d.ts.map

package/dist/misc/contextualize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"contextualize.d.ts","sourceRoot":"","sources":["../../src/misc/contextualize.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,OAAO,CAAC;AAKvD;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,iBAAiB,CAAC;IACxB,GAAG,EAAE,MAAM,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;CAC9B,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,EAChC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EACnB,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,KACd,iBAAiB,CAAC;AAEvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,iBAAiB,CAWvE"}
+{"version":3,"file":"contextualize.d.ts","sourceRoot":"","sources":["../../src/misc/contextualize.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKhD;;;;;;GAMG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,iBAAiB,CAAC;IACxB,GAAG,EAAE,MAAM,SAAS,CAAC;CACtB,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,EAChC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EACnB,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,KACd,iBAAiB,CAAC;AAEvB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,SAAS,GAAG,iBAAiB,CAWpE"}

package/dist/misc/contextualize.js

@@ -39,24 +39,24 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *   .end();
  * ```
  *
- * @param jsx The JSX to contextualize
+ * @param children The children to contextualize
  *
  * @returns An object with the following properties:
  * - `with`: a function that accepts a context `Context` and a value `value` for
  *   it as arguments and returns
- *   `contextualize(<Context.Provider value={value}>{jsx}</Context.Provider>)`
- * - `end`: a function that returns `jsx`
+ *   `contextualize(<Context.Provider value={value}>{children}</Context.Provider>)`
+ * - `end`: a function that returns `children`
  *
  * @see
  * {@linkcode ContextualizePipe}
  */
-export function contextualize(jsx) {
+export function contextualize(children) {
     return {
         with(Context, value) {
-            return contextualize(_jsx(Context.Provider, { value: value, children: jsx }));
+            return contextualize(_jsx(Context.Provider, { value: value, children: children }));
         },
         end() {
-            return jsx;
+            return children;
         },
     };
 }

package/dist/misc/contextualize.js.map

@@ -1 +1 @@
-{"version":3,"file":"contextualize.js","sourceRoot":"","sources":["../../src/misc/contextualize.tsx"],"names":[],"mappings":";AA2BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,MAAM,UAAU,aAAa,CAAC,GAAsB;IAClD,OAAO;QACL,IAAI,CAAI,OAAmB,EAAE,KAAQ;YACnC,OAAO,aAAa,CAClB,KAAC,OAAO,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,GAAG,GAAoB,CACzD,CAAC;QACJ,CAAC;QACD,GAAG;YACD,OAAO,GAAG,CAAC;QACb,CAAC;KACF,CAAC;AACJ,CAAC"}
+{"version":3,"file":"contextualize.js","sourceRoot":"","sources":["../../src/misc/contextualize.tsx"],"names":[],"mappings":";AA2BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,MAAM,UAAU,aAAa,CAAC,QAAmB;IAC/C,OAAO;QACL,IAAI,CAAI,OAAmB,EAAE,KAAQ;YACnC,OAAO,aAAa,CAClB,KAAC,OAAO,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAAoB,CAC9D,CAAC;QACJ,CAAC;QACD,GAAG;YACD,OAAO,QAAQ,CAAC;QAClB,CAAC;KACF,CAAC;AACJ,CAAC"}

package/dist/misc/wrapJSX.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps, JSXElementConstructor, default as React } from 'react';
+import type { ComponentProps, JSXElementConstructor, default as React, ReactElement, ReactNode } from 'react';
 /**
  * The return type of {@linkcode wrapJSX}
  *
@@ -6,23 +6,23 @@ import type { ComponentProps, JSXElementConstructor, default as React } from 're
  * {@linkcode wrapJSX},
  * {@linkcode WrapJSXWith}
  */
-export type JSXWrapPipe = {
-    with: WrapJSXWith;
-    end: () => React.JSX.Element;
+export type JSXWrapPipe<Children extends ReactNode> = {
+    with: WrapJSXWith<Children>;
+    end: () => Children;
 };
 /**
  * @see
  * {@linkcode wrapJSX},
  * {@linkcode JSXWrapPipe}
  */
-export type WrapJSXWith = <C extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>>(...args: [
-    Component: C,
+export type WrapJSXWith<Children extends ReactNode> = <C extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>>(...args: [
+    Component: 'children' extends keyof ComponentProps<C> ? [Children] extends [ComponentProps<C>['children']] ? C : never : never,
     ...(Record<never, unknown> extends Omit<ComponentProps<C>, 'children'> ? [
         props?: React.JSX.IntrinsicAttributes & Omit<ComponentProps<C>, 'children'>
     ] : [
         props: React.JSX.IntrinsicAttributes & Omit<ComponentProps<C>, 'children'>
     ])
-]) => JSXWrapPipe;
+]) => JSXWrapPipe<ReactElement>;
 /**
  * An alternative way to compose JSX that avoids ever-increasing indentation
  *
@@ -61,16 +61,16 @@ export type WrapJSXWith = <C extends keyof JSX.IntrinsicElements | JSXElementCon
  * );
  * ```
  *
- * @param jsx The JSX to wrap
+ * @param children The children to wrap
  *
  * @returns An object with the following properties:
  * - `with`: a function that accepts a component `Component` and props `props`
  *   for it as arguments and returns
- *   `wrapJSX(<Component {...props}>{jsx}</Component>)`
- * - `end`: a function that returns `jsx`
+ *   `wrapJSX(<Component {...props}>{children}</Component>)`
+ * - `end`: a function that returns `children`
  *
  * @see
  * {@linkcode JSXWrapPipe}
  */
-export declare function wrapJSX(jsx: React.JSX.Element): JSXWrapPipe;
+export declare function wrapJSX<Children extends ReactNode>(children: Children): JSXWrapPipe<Children>;
 //# sourceMappingURL=wrapJSX.d.ts.map

package/dist/misc/wrapJSX.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wrapJSX.d.ts","sourceRoot":"","sources":["../../src/misc/wrapJSX.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,qBAAqB,EACrB,OAAO,IAAI,KAAK,EACjB,MAAM,OAAO,CAAC;AAKf;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,WAAW,CAAC;IAClB,GAAG,EAAE,MAAM,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;CAC9B,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,WAAW,GAErB,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,GAAG,qBAAqB,CAAC,GAAG,CAAC,EACjE,GAAG,IAAI,EAAE;IACP,SAAS,EAAE,CAAC;IACZ,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,SAAS,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,GAClE;QACE,KAAK,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,GACnC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;KACtC,GACD;QACE,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,GAClC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;KACtC,CAAC;CACP,KACE,WAAW,CAAC;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,wBAAgB,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,WAAW,CAc3D"}
+{"version":3,"file":"wrapJSX.d.ts","sourceRoot":"","sources":["../../src/misc/wrapJSX.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,cAAc,EACd,qBAAqB,EACrB,OAAO,IAAI,KAAK,EAChB,YAAY,EACZ,SAAS,EACV,MAAM,OAAO,CAAC;AAKf;;;;;;GAMG;AACH,MAAM,MAAM,WAAW,CAAC,QAAQ,SAAS,SAAS,IAAI;IACpD,IAAI,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC5B,GAAG,EAAE,MAAM,QAAQ,CAAC;CACrB,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,WAAW,CAAC,QAAQ,SAAS,SAAS,IAEhD,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,GAAG,qBAAqB,CAAC,GAAG,CAAC,EACjE,GAAG,IAAI,EAAE;IACP,SAAS,EAAE,UAAU,SAAS,MAAM,cAAc,CAAC,CAAC,CAAC,GACjD,CAAC,QAAQ,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,GAChD,CAAC,GACD,KAAK,GACP,KAAK;IACT,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,SAAS,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,GAClE;QACE,KAAK,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,GACnC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;KACtC,GACD;QACE,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,GAClC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;KACtC,CAAC;CACP,KACE,WAAW,CAAC,YAAY,CAAC,CAAC;AAEjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,wBAAgB,OAAO,CAAC,QAAQ,SAAS,SAAS,EAChD,QAAQ,EAAE,QAAQ,GACjB,WAAW,CAAC,QAAQ,CAAC,CAcvB"}

package/dist/misc/wrapJSX.js

@@ -37,24 +37,24 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * );
  * ```
  *
- * @param jsx The JSX to wrap
+ * @param children The children to wrap
  *
  * @returns An object with the following properties:
  * - `with`: a function that accepts a component `Component` and props `props`
  *   for it as arguments and returns
- *   `wrapJSX(<Component {...props}>{jsx}</Component>)`
- * - `end`: a function that returns `jsx`
+ *   `wrapJSX(<Component {...props}>{children}</Component>)`
+ * - `end`: a function that returns `children`
  *
  * @see
  * {@linkcode JSXWrapPipe}
  */
-export function wrapJSX(jsx) {
+export function wrapJSX(children) {
     return {
         with(Component, props = {}) {
-            return wrapJSX(_jsx(Component, { ...props, children: jsx }));
+            return wrapJSX(_jsx(Component, { ...props, children: children }));
         },
         end() {
-            return jsx;
+            return children;
         },
     };
 }

package/dist/misc/wrapJSX.js.map

@@ -1 +1 @@
-{"version":3,"file":"wrapJSX.js","sourceRoot":"","sources":["../../src/misc/wrapJSX.tsx"],"names":[],"mappings":";AA2CA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,MAAM,UAAU,OAAO,CAAC,GAAsB;IAC5C,OAAO;QACL,IAAI,CACF,SAEiC,EACjC,QAAgB,EAAE;YAElB,OAAO,OAAO,CAAC,KAAC,SAAS,OAAK,KAAK,YAAG,GAAG,GAAa,CAAC,CAAC;QAC1D,CAAC;QACD,GAAG;YACD,OAAO,GAAG,CAAC;QACb,CAAC;KACF,CAAC;AACJ,CAAC"}
+{"version":3,"file":"wrapJSX.js","sourceRoot":"","sources":["../../src/misc/wrapJSX.tsx"],"names":[],"mappings":";AAiDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,MAAM,UAAU,OAAO,CACrB,QAAkB;IAElB,OAAO;QACL,IAAI,CACF,SAEiC,EACjC,QAAgB,EAAE;YAElB,OAAO,OAAO,CAAC,KAAC,SAAS,OAAK,KAAK,YAAG,QAAQ,GAAa,CAAC,CAAC;QAC/D,CAAC;QACD,GAAG;YACD,OAAO,QAAQ,CAAC;QAClB,CAAC;KACF,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aweebit/react-essentials",
-  "version": "0.10.3",
+  "version": "0.10.5",
   "type": "module",
   "repository": "github:aweebit/react-essentials",
   "main": "dist/index.js",

package/src/misc/contextualize.tsx

@@ -1,4 +1,4 @@
-import type { Context, default as React } from 'react';
+import type { Context, ReactNode } from 'react';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import type { wrapJSX } from './wrapJSX.js';
@@ -12,7 +12,7 @@ import type { wrapJSX } from './wrapJSX.js';
  */
 export type ContextualizePipe = {
   with: ContextualizeWith;
-  end: () => React.JSX.Element;
+  end: () => ReactNode;
 };
 
 /**
@@ -65,26 +65,26 @@ export type ContextualizeWith = <T>(
  *   .end();
  * ```
  *
- * @param jsx The JSX to contextualize
+ * @param children The children to contextualize
  *
  * @returns An object with the following properties:
  * - `with`: a function that accepts a context `Context` and a value `value` for
  *   it as arguments and returns
- *   `contextualize(<Context.Provider value={value}>{jsx}</Context.Provider>)`
- * - `end`: a function that returns `jsx`
+ *   `contextualize(<Context.Provider value={value}>{children}</Context.Provider>)`
+ * - `end`: a function that returns `children`
  *
  * @see
  * {@linkcode ContextualizePipe}
  */
-export function contextualize(jsx: React.JSX.Element): ContextualizePipe {
+export function contextualize(children: ReactNode): ContextualizePipe {
   return {
     with<T>(Context: Context<T>, value: T) {
       return contextualize(
-        <Context.Provider value={value}>{jsx}</Context.Provider>,
+        <Context.Provider value={value}>{children}</Context.Provider>,
       );
     },
     end() {
-      return jsx;
+      return children;
     },
   };
 }

package/src/misc/wrapJSX.tsx

@@ -2,6 +2,8 @@ import type {
   ComponentProps,
   JSXElementConstructor,
   default as React,
+  ReactElement,
+  ReactNode,
 } from 'react';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -14,9 +16,9 @@ import type { contextualize } from './contextualize.js';
  * {@linkcode wrapJSX},
  * {@linkcode WrapJSXWith}
  */
-export type JSXWrapPipe = {
-  with: WrapJSXWith;
-  end: () => React.JSX.Element;
+export type JSXWrapPipe<Children extends ReactNode> = {
+  with: WrapJSXWith<Children>;
+  end: () => Children;
 };
 
 /**
@@ -24,11 +26,15 @@ export type JSXWrapPipe = {
  * {@linkcode wrapJSX},
  * {@linkcode JSXWrapPipe}
  */
-export type WrapJSXWith =
+export type WrapJSXWith<Children extends ReactNode> =
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   <C extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>>(
     ...args: [
-      Component: C,
+      Component: 'children' extends keyof ComponentProps<C>
+        ? [Children] extends [ComponentProps<C>['children']]
+          ? C
+          : never
+        : never,
       ...(Record<never, unknown> extends Omit<ComponentProps<C>, 'children'>
         ? [
             props?: React.JSX.IntrinsicAttributes &
@@ -39,7 +45,7 @@ export type WrapJSXWith =
               Omit<ComponentProps<C>, 'children'>,
           ]),
     ]
-  ) => JSXWrapPipe;
+  ) => JSXWrapPipe<ReactElement>;
 
 /**
  * An alternative way to compose JSX that avoids ever-increasing indentation
@@ -79,18 +85,20 @@ export type WrapJSXWith =
  * );
  * ```
  *
- * @param jsx The JSX to wrap
+ * @param children The children to wrap
  *
  * @returns An object with the following properties:
  * - `with`: a function that accepts a component `Component` and props `props`
  *   for it as arguments and returns
- *   `wrapJSX(<Component {...props}>{jsx}</Component>)`
- * - `end`: a function that returns `jsx`
+ *   `wrapJSX(<Component {...props}>{children}</Component>)`
+ * - `end`: a function that returns `children`
  *
  * @see
  * {@linkcode JSXWrapPipe}
  */
-export function wrapJSX(jsx: React.JSX.Element): JSXWrapPipe {
+export function wrapJSX<Children extends ReactNode>(
+  children: Children,
+): JSXWrapPipe<Children> {
   return {
     with(
       Component:
@@ -98,10 +106,10 @@ export function wrapJSX(jsx: React.JSX.Element): JSXWrapPipe {
         | JSXElementConstructor<object>,
       props: object = {},
     ) {
-      return wrapJSX(<Component {...props}>{jsx}</Component>);
+      return wrapJSX(<Component {...props}>{children}</Component>);
     },
     end() {
-      return jsx;
+      return children;
     },
   };
 }