Enhance the LayoutComponent type (#8910)

remix-run · Feb 28, 2024 · 97cc8ec · 97cc8ec
1 parent 8de0a5a
commit 97cc8ec
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 14 deletions.
diff --git a/.changeset/loud-games-reply.md 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
@@ -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 <html>/<head>/<body> 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 `<link>` tags to be inserted into the `<head>` of

diff --git 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: (
+              <routeModule.Layout>
+                <Component />
+              </routeModule.Layout>
             ),
           }
         : { Component }),
       ...(ErrorBoundary
         ? {
-            errorElement: React.createElement(
-              routeModule.Layout,
-              null,
-              React.createElement(ErrorBoundary)
+            errorElement: (
+              <routeModule.Layout>
+                <ErrorBoundary />
+              </routeModule.Layout>
             ),
           }
         : { ErrorBoundary }),
       ...(HydrateFallback
         ? {
-            hydrateFallbackElement: React.createElement(
-              routeModule.Layout,
-              null,
-              React.createElement(HydrateFallback)
+            hydrateFallbackElement: (
+              <routeModule.Layout>
+                <HydrateFallback />
+              </routeModule.Layout>
             ),
           }
         : { HydrateFallback }),