remix-run · ryanflorence · Jun 21, 2024 · Jun 21, 2024
diff --git a/.changeset/odd-beds-behave.md b/.changeset/odd-beds-behave.md
@@ -0,0 +1,5 @@
+---
+"react-router": major
+---
+
+renamed RemixContext to FrameworkContext
diff --git a/packages/react-router-dom/index.ts b/packages/react-router-dom/index.ts
@@ -212,7 +212,7 @@ export type {
   UNSAFE_RouteModules,
   UNSAFE_FutureConfig,
   UNSAFE_AssetsManifest,
-  UNSAFE_RemixContextObject,
+  UNSAFE_FrameworkContextObject,
   UNSAFE_EntryRoute,
   UNSAFE_RouteManifest,
   UNSAFE_SingleFetchRedirectResult,
@@ -231,7 +231,7 @@ export {
   UNSAFE_useRouteId,
   UNSAFE_useRoutesImpl,
   UNSAFE_ErrorResponseImpl,
-  UNSAFE_RemixContext,
+  UNSAFE_FrameworkContext as UNSAFE_RemixContext,
   UNSAFE_decodeViaTurboStream,
   UNSAFE_SingleFetchRedirectSymbol,
 } from "react-router";
diff --git a/packages/react-router/__tests__/dom/scroll-restoration-test.tsx b/packages/react-router/__tests__/dom/scroll-restoration-test.tsx
@@ -11,9 +11,9 @@ import {
   ScrollRestoration,
   createBrowserRouter,
 } from "../../index";
-import type { RemixContextObject } from "../../lib/dom/ssr/entry";
+import type { FrameworkContextObject } from "../../lib/dom/ssr/entry";
 import { createMemoryRouter, redirect } from "react-router";
-import { RemixContext, Scripts } from "../../lib/dom/ssr/components";
+import { FrameworkContext, Scripts } from "../../lib/dom/ssr/components";
 import "@testing-library/jest-dom/extend-expect";
 
 describe(`ScrollRestoration`, () => {
@@ -207,7 +207,7 @@ describe(`ScrollRestoration`, () => {
       window.scrollTo = scrollTo;
     });
 
-    let context: RemixContextObject = {
+    let context: FrameworkContextObject = {
       future: {
         v3_fetcherPersist: false,
         v3_relativeSplatPath: false,
@@ -245,9 +245,9 @@ describe(`ScrollRestoration`, () => {
       ]);
 
       render(
-        <RemixContext.Provider value={context}>
+        <FrameworkContext.Provider value={context}>
           <RouterProvider router={router} />
-        </RemixContext.Provider>
+        </FrameworkContext.Provider>
       );
       let script = screen.getByTestId("scroll-script");
       expect(script instanceof HTMLScriptElement).toBe(true);
@@ -272,9 +272,9 @@ describe(`ScrollRestoration`, () => {
         },
       ]);
       render(
-        <RemixContext.Provider value={context}>
+        <FrameworkContext.Provider value={context}>
           <RouterProvider router={router} />
-        </RemixContext.Provider>
+        </FrameworkContext.Provider>
       );
       let script = screen.getByTestId("scroll-script");
       expect(script).toHaveAttribute("nonce", "hello");
@@ -298,9 +298,9 @@ describe(`ScrollRestoration`, () => {
       ]);
       router.state.restoreScrollPosition = 20;
       render(
-        <RemixContext.Provider value={context}>
+        <FrameworkContext.Provider value={context}>
           <RouterProvider router={router} />
-        </RemixContext.Provider>
+        </FrameworkContext.Provider>
       );
 
       expect(scrollToMock).toHaveBeenCalledWith(0, 20);
@@ -322,9 +322,9 @@ describe(`ScrollRestoration`, () => {
         },
       ]);
       render(
-        <RemixContext.Provider value={context}>
+        <FrameworkContext.Provider value={context}>
           <RouterProvider router={router} />
-        </RemixContext.Provider>
+        </FrameworkContext.Provider>
       );
       // Always called when using <ScrollRestoration />
       expect(scrollToMock).toHaveBeenCalledWith(0, 0);

diff --git a/packages/react-router/__tests__/dom/ssr/components-test.tsx b/packages/react-router/__tests__/dom/ssr/components-test.tsx
@@ -10,7 +10,7 @@ import {
   RouterProvider,
 } from "../../../index";
 import { HydratedRouter } from "../../../lib/dom/ssr/browser";
-import { RemixContext } from "../../../lib/dom/ssr/components";
+import { FrameworkContext } from "../../../lib/dom/ssr/components";
 import invariant from "../../../lib/dom/ssr/invariant";
 import { ServerRouter } from "../../../lib/dom/ssr/server";
 import "@testing-library/jest-dom/extend-expect";
@@ -70,9 +70,9 @@ function itPrefetchesPageLinks<
         });
 
         let { container, unmount } = render(
-          <RemixContext.Provider value={context}>
+          <FrameworkContext.Provider value={context}>
             <RouterProvider router={router} />
-          </RemixContext.Provider>
+          </FrameworkContext.Provider>
         );
 
         fireEvent[event](container.firstChild);
@@ -122,9 +122,9 @@ function itPrefetchesPageLinks<
         });
 
         let { container, unmount } = render(
-          <RemixContext.Provider value={context}>
+          <FrameworkContext.Provider value={context}>
             <RouterProvider router={router} />
-          </RemixContext.Provider>
+          </FrameworkContext.Provider>
         );
 
         fireEvent[event](container.firstChild);

diff --git a/packages/react-router/index.ts b/packages/react-router/index.ts
@@ -493,7 +493,7 @@ export {
 };
 
 /** @internal */
-export { RemixContext as UNSAFE_RemixContext } from "./lib/dom/ssr/components";
+export { FrameworkContext as UNSAFE_FrameworkContext } from "./lib/dom/ssr/components";
 
 /** @internal */
 export type { RouteModules as UNSAFE_RouteModules } from "./lib/dom/ssr/routeModules";
@@ -502,7 +502,7 @@ export type { RouteModules as UNSAFE_RouteModules } from "./lib/dom/ssr/routeMod
 export type {
   FutureConfig as UNSAFE_FutureConfig,
   AssetsManifest as UNSAFE_AssetsManifest,
-  RemixContextObject as UNSAFE_RemixContextObject,
+  FrameworkContextObject as UNSAFE_FrameworkContextObject,
 } from "./lib/dom/ssr/entry";
 
 /** @internal */

diff --git a/packages/react-router/lib/dom/lib.tsx b/packages/react-router/lib/dom/lib.tsx
@@ -55,7 +55,7 @@ import {
 import type { PrefetchBehavior, ScriptsProps } from "./ssr/components";
 import {
   PrefetchPageLinks,
-  RemixContext,
+  FrameworkContext,
   mergeRefs,
   usePrefetchBehavior,
 } from "./ssr/components";
@@ -1544,7 +1544,7 @@ export function ScrollRestoration({
   storageKey,
   ...props
 }: ScrollRestorationProps) {
-  let remixContext = React.useContext(RemixContext);
+  let remixContext = React.useContext(FrameworkContext);
   let { basename } = React.useContext(NavigationContext);
   let location = useLocation();
   let matches = useMatches();

diff --git a/packages/react-router/lib/dom/ssr/browser.tsx b/packages/react-router/lib/dom/ssr/browser.tsx
@@ -18,7 +18,7 @@ import {
   decodeViaTurboStream,
   getSingleFetchDataStrategy,
 } from "./single-fetch";
-import { RemixContext } from "./components";
+import { FrameworkContext } from "./components";
 import { RemixErrorBoundary } from "./errorBoundaries";
 
 type SSRInfo = {
@@ -246,7 +246,7 @@ export function HydratedRouter() {
     // This fragment is important to ensure we match the <ServerRouter> JSX
     // structure so that useId values hydrate correctly
     <>
-      <RemixContext.Provider
+      <FrameworkContext.Provider
         value={{
           manifest: ssrInfo.manifest,
           routeModules: ssrInfo.routeModules,
@@ -262,7 +262,7 @@ export function HydratedRouter() {
             future={{ v7_startTransition: true }}
           />
         </RemixErrorBoundary>
-      </RemixContext.Provider>
+      </FrameworkContext.Provider>
       {/*
           This fragment is important to ensure we match the <ServerRouter> JSX
           structure so that useId values hydrate correctly

diff --git a/packages/react-router/lib/dom/ssr/components.tsx b/packages/react-router/lib/dom/ssr/components.tsx
@@ -10,7 +10,7 @@ import {
   type RouterState,
 } from "../../router";
 
-import type { RemixContextObject } from "./entry";
+import type { FrameworkContextObject } from "./entry";
 import invariant from "./invariant";
 import {
   getKeyedLinksForMatches,
@@ -53,16 +53,19 @@ function useDataRouterStateContext() {
 }
 
 ////////////////////////////////////////////////////////////////////////////////
-// RemixContext
+// FrameworkContext
 
-export const RemixContext = React.createContext<RemixContextObject | undefined>(
-  undefined
-);
-RemixContext.displayName = "Remix";
+export const FrameworkContext = React.createContext<
+  FrameworkContextObject | undefined
+>(undefined);
+FrameworkContext.displayName = "FrameworkContext";
 
-export function useRemixContext(): RemixContextObject {
-  let context = React.useContext(RemixContext);
-  invariant(context, "You must render this element inside a <Remix> element");
+export function useFrameworkContext(): FrameworkContextObject {
+  let context = React.useContext(FrameworkContext);
+  invariant(
+    context,
+    "You must render this element inside a <HydratedRouter> element"
+  );
   return context;
 }
 
@@ -91,7 +94,7 @@ export function usePrefetchBehavior<T extends HTMLAnchorElement>(
   prefetch: PrefetchBehavior,
   theirElementProps: PrefetchHandlers
 ): [boolean, React.RefObject<T>, PrefetchHandlers] {
-  let remixContext = React.useContext(RemixContext);
+  let frameworkContext = React.useContext(FrameworkContext);
   let [maybePrefetch, setMaybePrefetch] = React.useState(false);
   let [shouldPrefetch, setShouldPrefetch] = React.useState(false);
   let { onFocus, onBlur, onMouseEnter, onMouseLeave, onTouchStart } =
@@ -139,8 +142,8 @@ export function usePrefetchBehavior<T extends HTMLAnchorElement>(
     setShouldPrefetch(false);
   };
 
-  // No prefetching if not using Remix-style SSR
-  if (!remixContext) {
+  // No prefetching if not using SSR
+  if (!frameworkContext) {
     return [false, ref, {}];
   }
 
@@ -219,7 +222,8 @@ function getActiveMatches(
   @category Components
  */
 export function Links() {
-  let { isSpaMode, manifest, routeModules, criticalCss } = useRemixContext();
+  let { isSpaMode, manifest, routeModules, criticalCss } =
+    useFrameworkContext();
   let { errors, matches: routerMatches } = useDataRouterStateContext();
 
   let matches = getActiveMatches(routerMatches, errors, isSpaMode);
@@ -279,7 +283,7 @@ export function PrefetchPageLinks({
 }
 
 function useKeyedPrefetchLinks(matches: AgnosticDataRouteMatch[]) {
-  let { manifest, routeModules } = useRemixContext();
+  let { manifest, routeModules } = useFrameworkContext();
 
   let [keyedPrefetchLinks, setKeyedPrefetchLinks] = React.useState<
     KeyedHtmlLinkDescriptor[]
@@ -312,7 +316,7 @@ function PrefetchPageLinksImpl({
   matches: AgnosticDataRouteMatch[];
 }) {
   let location = useLocation();
-  let { manifest, routeModules } = useRemixContext();
+  let { manifest, routeModules } = useFrameworkContext();
   let { matches } = useDataRouterStateContext();
 
   let newMatchesForData = React.useMemo(
@@ -412,7 +416,7 @@ function PrefetchPageLinksImpl({
   @category Components
  */
 export function Meta() {
-  let { isSpaMode, routeModules } = useRemixContext();
+  let { isSpaMode, routeModules } = useFrameworkContext();
   let {
     errors,
     matches: routerMatches,
@@ -545,7 +549,7 @@ function isValidMetaTag(tagName: unknown): tagName is "meta" | "link" {
 }
 
 /**
- * Tracks whether Remix has finished hydrating or not, so scripts can be skipped
+ * Tracks whether hydration is finished, so scripts can be skipped
  * during client-side updates.
  */
 let isHydrated = false;
@@ -596,7 +600,7 @@ export type ScriptsProps = Omit<
  */
 export function Scripts(props: ScriptsProps) {
   let { manifest, serverHandoffString, isSpaMode, renderMeta } =
-    useRemixContext();
+    useFrameworkContext();
   let { router, static: isStatic, staticContext } = useDataRouterContext();
   let { matches: routerMatches } = useDataRouterStateContext();
   let navigation = useNavigation();

diff --git a/packages/react-router/lib/dom/ssr/entry.ts b/packages/react-router/lib/dom/ssr/entry.ts
@@ -9,7 +9,7 @@ type SerializedError = {
   message: string;
   stack?: string;
 };
-export interface RemixContextObject {
+export interface FrameworkContextObject {
   manifest: AssetsManifest;
   routeModules: RouteModules;
   criticalCss?: string;
@@ -35,7 +35,7 @@ export interface RemixContextObject {
 
 // Additional React-Router information needed at runtime, but not hydrated
 // through RemixContext
-export interface EntryContext extends RemixContextObject {
+export interface EntryContext extends FrameworkContextObject {
   staticHandlerContext: StaticHandlerContext;
   serverHandoffStream?: ReadableStream<Uint8Array>;
 }

diff --git a/packages/react-router/lib/dom/ssr/errorBoundaries.tsx b/packages/react-router/lib/dom/ssr/errorBoundaries.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { Scripts, useRemixContext } from "./components";
+import { Scripts, useFrameworkContext } from "./components";
 import type { Location } from "../../router/history";
 import { isRouteErrorResponse } from "../../router/utils";
 
@@ -129,7 +129,7 @@ export function BoundaryShell({
   renderScripts?: boolean;
   children: React.ReactNode | React.ReactNode[];
 }) {
-  let { routeModules } = useRemixContext();
+  let { routeModules } = useFrameworkContext();
 
   if (routeModules.root?.Layout) {
     return children;

diff --git a/packages/react-router/lib/dom/ssr/routes-test-stub.tsx b/packages/react-router/lib/dom/ssr/routes-test-stub.tsx
@@ -14,10 +14,14 @@ import type { LinksFunction, MetaFunction, RouteModules } from "./routeModules";
 import type { InitialEntry } from "../../router/history";
 import type { HydrationState } from "../../router/router";
 import { convertRoutesToDataRoutes } from "../../router/utils";
-import type { AssetsManifest, FutureConfig, RemixContextObject } from "./entry";
+import type {
+  AssetsManifest,
+  FutureConfig,
+  FrameworkContextObject,
+} from "./entry";
 import { Outlet, createMemoryRouter } from "../../components";
 import type { EntryRoute } from "./routes";
-import { RemixContext } from "./components";
+import { FrameworkContext } from "./components";
 import { RouterProvider } from "../lib";
 
 interface StubIndexRouteObject
@@ -97,7 +101,7 @@ export function createRoutesStub(
     future,
   }: RoutesTestStubProps) {
     let routerRef = React.useRef<ReturnType<typeof createMemoryRouter>>();
-    let remixContextRef = React.useRef<RemixContextObject>();
+    let remixContextRef = React.useRef<FrameworkContextObject>();
 
     if (routerRef.current == null) {
       remixContextRef.current = {
@@ -133,9 +137,9 @@ export function createRoutesStub(
     }
 
     return (
-      <RemixContext.Provider value={remixContextRef.current}>
+      <FrameworkContext.Provider value={remixContextRef.current}>
         <RouterProvider router={routerRef.current} />
-      </RemixContext.Provider>
+      </FrameworkContext.Provider>
     );
   };
 }