chore(rsc): Make Router-related imports safer for RSC (#11644)

packages/internal/src/routes.ts

@@ -3,7 +3,7 @@ import path from 'path'
 import chalk from 'chalk'
 
 import { getPaths, getRouteHookForPage } from '@redwoodjs/project-config'
-import { getRouteRegexAndParams } from '@redwoodjs/router'
+import { getRouteRegexAndParams } from '@redwoodjs/router/dist/util'
 import { getProject } from '@redwoodjs/structure/dist/index.js'
 import type { RWRoute } from '@redwoodjs/structure/dist/model/RWRoute'
 

packages/router/ambient.d.ts

@@ -1,5 +1,4 @@
 /* eslint-disable no-var */
-/* eslint-disable no-var */
 /// <reference types="react/experimental" />
 
 declare global {

packages/router/package.json

@@ -47,6 +47,10 @@
       "import": "./dist/util.js",
       "require": "./dist/cjs/util.js"
     },
+    "./react-util": {
+      "import": "./dist/react-util.js",
+      "require": "./dist/cjs/react-util.js"
+    },
     "./rscCss": {
       "require": "./dist/cjs/rsc/rscCss.js",
       "import": "./dist/rsc/rscCss.js"

packages/router/src/react-util.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react'
+import { Children, isValidElement } from 'react'
+
+export function flattenAll(children: ReactNode): ReactNode[] {
+  const childrenArray = Children.toArray(children)
+
+  return childrenArray.flatMap((child) => {
+    if (isValidElement(child) && child.props.children) {
+      return [child, ...flattenAll(child.props.children)]
+    }
+
+    return [child]
+  })
+}

packages/router/src/util.ts

@@ -1,19 +1,5 @@
 // These are utils that can be shared between both server- and client components
 
-import type { ReactNode } from 'react'
-import { Children, isValidElement } from 'react'
-
-export function flattenAll(children: ReactNode): ReactNode[] {
-  const childrenArray = Children.toArray(children)
-
-  return childrenArray.flatMap((child) => {
-    if (isValidElement(child) && child.props.children) {
-      return [child, ...flattenAll(child.props.children)]
-    }
-
-    return [child]
-  })
-}
 /**
  * Get param name, type, and match for a route.
  *

packages/storybook/src/mocks/MockRouter.tsx

@@ -7,9 +7,10 @@
 
 import type React from 'react'
 
+import { flattenAll } from '@redwoodjs/router/dist/react-util'
 import { isValidRoute } from '@redwoodjs/router/dist/route-validators'
 import type { RouterProps } from '@redwoodjs/router/dist/router'
-import { flattenAll, replaceParams } from '@redwoodjs/router/dist/util'
+import { replaceParams } from '@redwoodjs/router/dist/util'
 
 export * from '@redwoodjs/router/dist/index'
 

packages/testing/src/web/MockRouter.tsx

@@ -1,14 +1,12 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 import type React from 'react'
 
+import { flattenAll } from '@redwoodjs/router/dist/react-util'
 // Bypass the `main` field in `package.json` because we alias `@redwoodjs/router`
 // for jest and Storybook. Not doing so would cause an infinite loop.
 // See: ./packages/testing/config/jest/web/jest-preset.js
-// @ts-ignore
 import { isValidRoute } from '@redwoodjs/router/dist/route-validators'
 import type { RouterProps } from '@redwoodjs/router/dist/router'
-import { flattenAll, replaceParams } from '@redwoodjs/router/dist/util'
-// @ts-ignore
+import { replaceParams } from '@redwoodjs/router/dist/util'
 export * from '@redwoodjs/router/dist/index'
 
 export const routes: { [routeName: string]: () => string } = {}