From 222a2863095d606b19a636240a0b28d30daaab3f Mon Sep 17 00:00:00 2001 From: Matt Brophy Date: Tue, 27 Feb 2024 14:27:17 -0500 Subject: [PATCH] Enhance the LayoutComponent type --- .changeset/loud-games-reply.md | 5 +++++ packages/remix-react/routeModules.ts | 9 +++++++-- packages/remix-react/routes.tsx | 24 ++++++++++++------------ 3 files changed, 24 insertions(+), 14 deletions(-) create mode 100644 .changeset/loud-games-reply.md diff --git a/.changeset/loud-games-reply.md b/.changeset/loud-games-reply.md new file mode 100644 index 00000000000..fc972ef41a0 --- /dev/null +++ b/.changeset/loud-games-reply.md @@ -0,0 +1,5 @@ +--- +"@remix-run/react": patch +--- + +Strengthen the internal LayoutComponent type to accept limited children diff --git a/packages/remix-react/routeModules.ts b/packages/remix-react/routeModules.ts index 415ce60b7bd..7c37854e32d 100644 --- a/packages/remix-react/routeModules.ts +++ b/packages/remix-react/routeModules.ts @@ -1,4 +1,4 @@ -import type { ComponentType } from "react"; +import type { ComponentType, ReactElement } from "react"; import type { ActionFunction as RRActionFunction, ActionFunctionArgs as RRActionFunctionArgs, @@ -78,7 +78,12 @@ export type HydrateFallbackComponent = ComponentType; * Useful for defining the // document shell shared by the * Component, HydrateFallback, and ErrorBoundary */ -export type LayoutComponent = ComponentType; +export type LayoutComponent = ComponentType<{ + children: ReactElement< + unknown, + ErrorBoundaryComponent | HydrateFallbackComponent | RouteComponent + >; +}>; /** * A function that defines `` tags to be inserted into the `` of diff --git a/packages/remix-react/routes.tsx b/packages/remix-react/routes.tsx index 8975c093a27..4f99172bb32 100644 --- a/packages/remix-react/routes.tsx +++ b/packages/remix-react/routes.tsx @@ -91,28 +91,28 @@ function getRouteComponents( return { ...(Component ? { - element: React.createElement( - routeModule.Layout, - null, - React.createElement(Component) + element: ( + + + ), } : { Component }), ...(ErrorBoundary ? { - errorElement: React.createElement( - routeModule.Layout, - null, - React.createElement(ErrorBoundary) + errorElement: ( + + + ), } : { ErrorBoundary }), ...(HydrateFallback ? { - hydrateFallbackElement: React.createElement( - routeModule.Layout, - null, - React.createElement(HydrateFallback) + hydrateFallbackElement: ( + + + ), } : { HydrateFallback }),