From 9e6b769fb770c1f2fb01910d72c65431c3197b62 Mon Sep 17 00:00:00 2001
From: Tobbe Lundberg <tobbe@tlundberg.com>
Date: Fri, 13 Dec 2024 21:37:45 +0100
Subject: [PATCH] feat(router): Better autocomplete for `<Set>`s (#11769)

---
 .changesets/11769.md        |  3 ++
 packages/router/src/Set.tsx | 75 ++++++++++++++++++++++++-------------
 2 files changed, 53 insertions(+), 25 deletions(-)
 create mode 100644 .changesets/11769.md

diff --git a/.changesets/11769.md b/.changesets/11769.md
new file mode 100644
index 000000000000..13720912a477
--- /dev/null
+++ b/.changesets/11769.md
@@ -0,0 +1,3 @@
+- feat(router): Better autocomplete for `<Set>`s (#11769) by @Tobbe
+
+There's a limit to 10 wrapper components. After that additional props will not be included. To work around this you can either make sure to put wrapper components that doesn't require any props last, or just split your wrappers between multiple `<Set>`s
diff --git a/packages/router/src/Set.tsx b/packages/router/src/Set.tsx
index 98403546a7f7..80b66c284d4e 100644
--- a/packages/router/src/Set.tsx
+++ b/packages/router/src/Set.tsx
@@ -3,12 +3,7 @@ import React from 'react'
 
 import type { AvailableRoutes } from '@redwoodjs/router'
 
-type SetProps<P> = (P extends React.FC ? React.ComponentProps<P> : unknown) & {
-  /**
-   * A react component that the children of the Set will be wrapped
-   * in (typically a Layout component)
-   */
-  wrap?: P
+type RegularSetProps = {
   /**
    *`Routes` nested in a `<Set>` with `private` specified require
    * authentication. When a user is not authenticated and attempts to visit
@@ -23,6 +18,38 @@ type SetProps<P> = (P extends React.FC ? React.ComponentProps<P> : unknown) & {
    * @deprecated Please use `<PrivateSet>` instead and specify this prop there
    */
   unauthenticated?: keyof AvailableRoutes
+}
+
+/**
+ * A set containing public `<Route />`s
+ */
+export function Set<WrapperProps>(
+  props: CommonSetProps<WrapperProps> & RegularSetProps,
+) {
+  // @MARK: Virtual Component, this is actually never rendered
+  // See analyzeRoutes in utils.tsx, inside the isSetNode block
+  return <>{props.children}</>
+}
+
+type CommonSetProps<P> = (P extends React.FC<any>
+  ? React.ComponentProps<P>
+  : P extends React.FC<any>[]
+    ? React.ComponentProps<P[0]> &
+        React.ComponentProps<P[1]> &
+        React.ComponentProps<P[2]> &
+        React.ComponentProps<P[3]> &
+        React.ComponentProps<P[4]> &
+        React.ComponentProps<P[5]> &
+        React.ComponentProps<P[6]> &
+        React.ComponentProps<P[7]> &
+        React.ComponentProps<P[8]> &
+        React.ComponentProps<P[9]>
+    : unknown) & {
+  /**
+   * A React component, or an array of React components, that the children of
+   * the Set will be wrapped in (typically a Layout component and/or a context)
+   */
+  wrap?: P
   /**
    * Route is permitted when authenticated and user has any of the provided
    * roles such as "admin" or ["admin", "editor"]
@@ -36,22 +63,13 @@ type SetProps<P> = (P extends React.FC ? React.ComponentProps<P> : unknown) & {
   whileLoadingPage?: () => ReactElement | null
 }
 
-/**
- * A set containing public `<Route />`s
- */
-export function Set<WrapperProps>(props: SetProps<WrapperProps>) {
-  // @MARK: Virtual Component, this is actually never rendered
-  // See analyzeRoutes in utils.tsx, inside the isSetNode block
-  return <>{props.children}</>
-}
-
-type PrivateSetProps<P> = Omit<SetProps<P>, 'private' | 'unauthenticated'> & {
-  /** The page name where a user will be redirected when not authenticated */
-  unauthenticated: keyof AvailableRoutes
-}
-
 /** @deprecated Please use `<PrivateSet>` instead */
-export function Private<WrapperProps>(props: PrivateSetProps<WrapperProps>) {
+export function Private<WrapperProps>(
+  props: CommonSetProps<WrapperProps> & {
+    /** The page name where a user will be redirected when not authenticated */
+    unauthenticated: keyof AvailableRoutes
+  },
+) {
   // @MARK Virtual Component, this is actually never rendered
   // See analyzeRoutes in utils.tsx, inside the isSetNode block
   return <>{props.children}</>
@@ -60,7 +78,12 @@ export function Private<WrapperProps>(props: PrivateSetProps<WrapperProps>) {
 /**
  * A set containing private `<Route />`s that require authentication to access
  */
-export function PrivateSet<WrapperProps>(props: PrivateSetProps<WrapperProps>) {
+export function PrivateSet<WrapperProps>(
+  props: CommonSetProps<WrapperProps> & {
+    /** The page name where a user will be redirected when not authenticated */
+    unauthenticated: keyof AvailableRoutes
+  },
+) {
   // @MARK Virtual Component, this is actually never rendered
   // See analyzeRoutes in utils.tsx, inside the isSetNode block
   return <>{props.children}</>
@@ -68,7 +91,7 @@ export function PrivateSet<WrapperProps>(props: PrivateSetProps<WrapperProps>) {
 
 export const isSetNode = (
   node: ReactNode,
-): node is ReactElement<SetProps<any>> => {
+): node is ReactElement<CommonSetProps<any> & RegularSetProps> => {
   return (
     React.isValidElement(node) &&
     (node.type === Set || node.type === PrivateSet || node.type === Private) &&
@@ -79,13 +102,15 @@ export const isSetNode = (
 
 export const isPrivateSetNode = (
   node: ReactNode,
-): node is ReactElement<PrivateSetProps<unknown>> => {
+): node is ReactElement<
+  CommonSetProps<unknown> & { unauthenticated: keyof AvailableRoutes }
+> => {
   return React.isValidElement(node) && node.type === PrivateSet
 }
 
 // Only identifies <Private> nodes, not <Set private> nodes
 export const isPrivateNode = (
   node: ReactNode,
-): node is ReactElement<SetProps<any>> => {
+): node is ReactElement<CommonSetProps<any> & RegularSetProps> => {
   return React.isValidElement(node) && node.type === Private
 }