feat: SerializeFrom: remix-run/react-router#12417

Author: DennisKraaijeveld

app/root.tsx

@@ -1,24 +1,22 @@
-import {
-    data,
-    type LoaderFunctionArgs,
-    type HeadersFunction,
-    type LinksFunction,
-    type MetaFunction,
-} from 'react-router';
-import {
-    Form,
-    Link,
-    Links,
-    Meta,
-    Outlet,
-    Scripts,
-    ScrollRestoration,
-    useLoaderData,
-    useMatches,
-    useSubmit,
-} from 'react-router';
 import { withSentry } from '@sentry/remix'
 import { useRef } from 'react'
+import {
+	data,
+	type LoaderFunctionArgs,
+	type HeadersFunction,
+	type LinksFunction,
+	type MetaFunction,
+	Form,
+	Link,
+	Links,
+	Meta,
+	Outlet,
+	Scripts,
+	ScrollRestoration,
+	useLoaderData,
+	useMatches,
+	useSubmit,
+} from 'react-router'
 import { HoneypotProvider } from 'remix-utils/honeypot/react'
 import appleTouchIconAssetUrl from './assets/favicons/apple-touch-icon.png'
 import faviconAssetUrl from './assets/favicons/favicon.svg'

app/routes/settings+/profile.connections.tsx

@@ -5,7 +5,6 @@ import {
 	data,
 	type LoaderFunctionArgs,
 	type ActionFunctionArgs,
-	type SerializeFrom,
 	type HeadersFunction,
 	useFetcher,
 	useLoaderData,
@@ -159,6 +158,8 @@ export default function Connections() {
 	)
 }
 
+type SerializeFrom<T> = ReturnType<typeof useLoaderData<T>>
+
 function Connection({
 	connection,
 	canDelete,

app/routes/users+/$username_+/__note-editor.tsx

@@ -9,9 +9,8 @@ import {
 } from '@conform-to/react'
 import { getZodConstraint, parseWithZod } from '@conform-to/zod'
 import { type Note, type NoteImage } from '@prisma/client'
-import { type SerializeFrom } from 'react-router';
-import { Form, useActionData } from 'react-router';
 import { useState } from 'react'
+import { Form, useActionData, type useLoaderData } from 'react-router'
 import { z } from 'zod'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { floatingToolbarClassName } from '#app/components/floating-toolbar.tsx'
@@ -44,6 +43,8 @@ const ImageFieldsetSchema = z.object({
 
 export type ImageFieldset = z.infer<typeof ImageFieldsetSchema>
 
+type SerializeFrom<T> = ReturnType<typeof useLoaderData<T>>
+
 export const NoteEditorSchema = z.object({
 	id: z.string().optional(),
 	title: z.string().min(titleMinLength).max(titleMaxLength),

app/utils/user.ts

@@ -1,7 +1,9 @@
-import { type SerializeFrom, useRouteLoaderData } from 'react-router'
+import { useRouteLoaderData } from 'react-router'
 import { type loader as rootLoader } from '#app/root.tsx'
 
-function isUser(user: any): user is SerializeFrom<typeof rootLoader>['user'] {
+function isUser(
+	user: any,
+): user is Awaited<ReturnType<typeof rootLoader>>['data']['user'] {
 	return user && typeof user === 'object' && typeof user.id === 'string'
 }