Epic task: replace `React.`

[MengLinMaker]

Another approach to tackling porting with cyclic dependencies

Layer 1

• [ ] routerContext.tsx
  • [ ] 4:const routerContext = React.createContext<Router<any, any>>(null!)
• [ ] CatchBoundary.tsx
  • [ ] 7: children: React.ReactNode
  • [ ] 19: return React.createElement(errorComponent, {
  • [ ] 31:class CatchBoundaryImpl extends React.Component<{
  • [ ] 36: }) => React.ReactNode
  • [ ] 81: const [show, setShow] = React.useState(process.env.NODE_ENV !== 'production')
• [ ] ScriptOnce.tsx
  • [ ] 6:}: { children: string; log?: boolean } & React.HTMLProps) {
• [ ] matchContext.tsx
  • [ ] 3:export const matchContext = React.createContext<string | undefined>(undefined)
• [ ] utils.ts
  • [ ] 6: const fnRef = React.useRef(fn)
  • [ ] 9: const ref = React.useRef((...args: Array) => fnRef.current(...args))
  • [ ] 14: typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect
  • [ ] 21: const ref = React.useRef<{ value: T; prev: T | null }>({
  • [ ] 57: * const ref = React.useRef(null)
  • [ ] 68: ref: React.RefObject,
  • [ ] 73: const isIntersectionObserverAvailable = React.useRef(
  • [ ] 77: const observerRef = React.useRef<IntersectionObserver | null>(null)
  • [ ] 79: React.useEffect(() => {
  • [ ] 103: * React hook to take a React.ForwardedRef and returns a ref that can be used on a DOM element.
  • [ ] 109: * const MyComponent = React.forwardRef((props, ref) => {
  • [ ] 115:export function useForwardedRef(ref?: React.ForwardedRef) {
  • [ ] 116: const innerRef = React.useRef(null)
  • [ ] 118: React.useEffect(() => {

Layer 2

• [ ] useRouter.tsx
  • [ ] 9: const value = React.useContext(getRouterContext())

Layer 3

• [ ] useNavigate.tsx
  • [ ] 25: return React.useCallback(
  • [ ] 59: React.useEffect(() => {
• [ ] scroll-restoration.tsx
  • [ ] 8: typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect
• [ ] useBlocker.tsx
  • [ ] 41: const [resolver, setResolver] = React.useState({
  • [ ] 47: React.useEffect(() => {

Layer 4

• [ ] not-found.tsx
  • [ ] 36: fallback?: (error: NotFoundError) => React.ReactElement
  • [ ] 38: children: React.ReactNode
• [ ] link.tsx
  • [ ] 586: forwardedRef?: React.ForwardedRef,
  • [ ] 587:): React.ComponentPropsWithRef<'a'> {
  • [ ] 589: const [isTransitioning, setIsTransitioning] = React.useState(false)
  • [ ] 590: const hasRenderFetched = React.useRef(false)
  • [ ] 636: const type: 'internal' | 'external' = React.useMemo(() => {
  • [ ] 647: const next = React.useMemo(
  • [ ] 651: const preload = React.useMemo(
  • [ ] 704: const doPreload = React.useCallback(() => {
  • [ ] 711: const preloadViewportIoCallback = React.useCallback(
  • [ ] 740: ref: innerRef as React.ComponentPropsWithRef<'a'>['ref'],
  • [ ] 836: const resolvedActiveProps: React.HTMLAttributes = isActive
  • [ ] 841: const resolvedInactiveProps: React.HTMLAttributes =
  • [ ] 867: ref: innerRef as React.ComponentPropsWithRef<'a'>['ref'],
  • [ ] 886:type UseLinkReactProps = TComp extends keyof React.JSX.IntrinsicElements
  • [ ] 887: ? React.JSX.IntrinsicElements[TComp]
  • [ ] 888: : React.PropsWithoutRef<
  • [ ] 889: TComp extends React.ComponentType ? TProps : never
  • [ ] 891: React.RefAttributes<
  • [ ] 893: | React.FC<{ ref: infer TRef }>
  • [ ] 894: | React.Component<{ ref: infer TRef }>
  • [ ] 950: | React.ReactNode
  • [ ] 954: }) => React.ReactNode)
  • [ ] 989:) => React.ReactElement
  • [ ] 994: return React.forwardRef(function CreatedLink(props, ref) {
  • [ ] 999:export const Link: LinkComponent<'a'> = React.forwardRef<Element, any>(
  • [ ] 1017: return React.createElement(
• [ ] Transitioner.tsx
  • [ ] 10: const mountLoadForRouter = React.useRef({ router, mounted: false })
  • [ ] 16: const [isTransitioning, startReactTransition_] = React.useTransition()
  • [ ] 37: React.useEffect(() => {

Layer 5

• [ ] router.ts
  • [ ] 105: TSR_ROUTER_CONTEXT?: React.Context<Router<any, any>>
  • [ ] 291: defaultOnCatch?: (error: Error, errorInfo: React.ErrorInfo) => void
  • [ ] 396: Wrap?: (props: { children: any }) => React.JSX.Element
  • [ ] 406: InnerWrap?: (props: { children: any }) => React.JSX.Element

Layer 6

• [ ] route.ts
  • [ ] #64
  • [ ] #65
  • [ ] #66
  • [ ] #67
  • [ ] #68
• [ ] Match.tsx
  • [ ] 22:export const Match = React.memo(function MatchImpl({
  • [ ] 61: ? React.Suspense
  • [ ] 100: return React.createElement(routeNotFoundComponent, error as any)
  • [ ] 111:export const MatchInner = React.memo(function MatchInnerImpl({
  • [ ] 133: const out = React.useMemo(() => {
  • [ ] 139: // const ref = React.useRef(value)
  • [ ] 256:export const Outlet = React.memo(function OutletImpl() {
  • [ ] 258: const matchId = React.useContext(matchContext)
  • [ ] 303: {nextMatch}</React.Suspense>

Layer 7

• [ ] awaited.tsx
  • [ ] 56: fallback?: React.ReactNode
  • [ ] 57: children: (result: T) => React.ReactNode
  • [ ] 62: return {inner}</React.Suspense>
  • [ ] 69: fallback?: React.ReactNode
  • [ ] 70: children: (result: T) => React.ReactNode
  • [ ] 72:): React.JSX.Element {
  • [ ] 74: return props.children(data) as React.JSX.Element
• [ ] lazyRouteComponent.tsx
  • [ ] 20:}: React.PropsWithChildren<{ fallback?: React.ReactNode }>) {
  • [ ] 29: return React.useSyncExternalStore(
  • [ ] 112: {React.createElement(comp, props)}
  • [ ] 116: return React.createElement(comp, props)
• [ ] Matches.tsx
  • [ ] #69
  • [ ] #70
  • [ ] #71
  • [ ] 214: : React.Suspense
  • [ ] 293: return React.useCallback(
  • [ ] 335: | React.ReactNode
  • [ ] 392: const contextMatchId = React.useContext(matchContext)
  • [ ] 412: const contextMatchId = React.useContext(matchContext)

Layer 8

• [ ] RouterProvider.tsx
  • [ ] 65: children: React.ReactNode