feat: patch Await

Author: fredericoo

.changeset/perfect-tools-compete.md

@@ -0,0 +1,5 @@
+---
+'react-router-typesafe': minor
+---
+
+Patch <Await> component

README.md

@@ -55,14 +55,22 @@ const action = makeAction(() => ({ ok: true }));
 
 Feel free to improve the code and submit a pull request. If you're not sure about something, create an issue first to discuss it.
 
-## Patched functions
+## Functions
 
 | Status | Utility              | Before     | After                                                        |
 | ------ | -------------------- | ---------- | ------------------------------------------------------------ |
 | ✅     | `defer`              | `Response` | Generic matching the first argument                          |
 | ✅     | `useLoaderData`      | `unknown`  | Generic function with the type of the loader function passed |
 | ✅     | `useActionData`      | `unknown`  | Generic function with the type of the action function passed |
 | ✅     | `useRouteLoaderData` | `unknown`  | Generic function with the type of the loader function passed |
+| NEW    | `makeLoader`         | `unknown`  | Wrapper around `satisfies` for ergonomics                    |
+| NEW    | `makeAction`         | `unknown`  | Wrapper around `satisfies` for ergonomics                    |
+
+## Patched components
+
+| Status | Component | Before                                        | After                                         |
+| ------ | --------- | --------------------------------------------- | --------------------------------------------- |
+| ✅     | `<Await>` | children render props would be typed as `any` | Generic component makes render props typesafe |
 
 ## About
 

src/__tests__/loader.test.ts renamed to src/__tests__/loader.typetest.ts

@@ -0,0 +1,13 @@
+import { Await as RRAwait } from 'react-router-dom';
+
+export type AwaitResolveRenderFunction<T> = {
+	(data: Awaited<T>): React.ReactNode;
+};
+
+export type AwaitProps<T> = {
+	children: React.ReactNode | AwaitResolveRenderFunction<T>;
+	errorElement?: React.ReactNode;
+	resolve: T;
+};
+
+export const Await = RRAwait as <T>(props: AwaitProps<T>) => React.ReactNode;

src/components/Await.tsx

@@ -0,0 +1,25 @@
+import { test } from 'bun:test';
+import { expectTypeOf } from 'expect-type';
+import { Await } from './Await';
+
+test('render props return awaited promise resolved value', () => {
+	const promiseThatReturnsNumber = Promise.resolve(1);
+
+	const rendered = Await({
+		resolve: promiseThatReturnsNumber,
+		children: resolved => {
+			expectTypeOf(resolved).toEqualTypeOf<number>();
+			return resolved;
+		},
+	});
+});
+
+test('does not error/warn with non-promises', () => {
+	const rendered = Await({
+		resolve: 1,
+		children: resolved => {
+			expectTypeOf(resolved).toEqualTypeOf<number>();
+			return resolved;
+		},
+	});
+});

src/components/Await.typetest.tsx

@@ -0,0 +1 @@
+export * from './Await';

src/components/index.ts

@@ -2,6 +2,7 @@ export { defer } from './defer';
 export { type LoaderData, useLoaderData } from './loader';
 export { type ActionData, useActionData } from './action';
 export { makeLoader, makeAction } from './utils';
+export * from './components';
 
 /** Re-exports for commodity */
 export { type LoaderFunction, type ActionFunction, redirect } from 'react-router-dom';

src/index.ts

@@ -17,6 +17,7 @@
 		"strict": true,
 		"noUncheckedIndexedAccess": true,
 		"noImplicitAny": true,
+		"jsx": "react-jsx",
 		"types": ["bun-types"]
 	},
 	"exclude": ["node_modules"]