From fabcf8059235cf2d7fd61c1d3fb044e307335745 Mon Sep 17 00:00:00 2001 From: Ryan Florence Date: Fri, 21 Jun 2024 10:16:24 -0600 Subject: [PATCH] rename RemixContext -> FrameworkContext --- .changeset/odd-beds-behave.md | 5 +++ packages/react-router-dom/index.ts | 4 +- .../__tests__/dom/scroll-restoration-test.tsx | 22 +++++----- .../__tests__/dom/ssr/components-test.tsx | 10 ++--- packages/react-router/index.ts | 4 +- packages/react-router/lib/dom/lib.tsx | 4 +- packages/react-router/lib/dom/ssr/browser.tsx | 6 +-- .../react-router/lib/dom/ssr/components.tsx | 40 ++++++++++--------- packages/react-router/lib/dom/ssr/entry.ts | 4 +- .../lib/dom/ssr/errorBoundaries.tsx | 4 +- .../lib/dom/ssr/routes-test-stub.tsx | 14 ++++--- packages/react-router/lib/dom/ssr/server.tsx | 6 +-- 12 files changed, 68 insertions(+), 55 deletions(-) create mode 100644 .changeset/odd-beds-behave.md diff --git a/.changeset/odd-beds-behave.md b/.changeset/odd-beds-behave.md new file mode 100644 index 0000000000..0a499191a9 --- /dev/null +++ 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 index 6041dd76b0..780b3108e9 100644 --- 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 index 8be85e0287..00da9fd9f9 100644 --- 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( - + - + ); let script = screen.getByTestId("scroll-script"); expect(script instanceof HTMLScriptElement).toBe(true); @@ -272,9 +272,9 @@ describe(`ScrollRestoration`, () => { }, ]); render( - + - + ); let script = screen.getByTestId("scroll-script"); expect(script).toHaveAttribute("nonce", "hello"); @@ -298,9 +298,9 @@ describe(`ScrollRestoration`, () => { ]); router.state.restoreScrollPosition = 20; render( - + - + ); expect(scrollToMock).toHaveBeenCalledWith(0, 20); @@ -322,9 +322,9 @@ describe(`ScrollRestoration`, () => { }, ]); render( - + - + ); // Always called when using 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 index 0f818238f8..069776b61b 100644 --- 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( - + - + ); fireEvent[event](container.firstChild); @@ -122,9 +122,9 @@ function itPrefetchesPageLinks< }); let { container, unmount } = render( - + - + ); fireEvent[event](container.firstChild); diff --git a/packages/react-router/index.ts b/packages/react-router/index.ts index 59eb2434dc..581cfcb480 100644 --- 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 index f66a4b1878..a6207f927f 100644 --- 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 index 38ac17343d..b503c219fb 100644 --- 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 JSX // structure so that useId values hydrate correctly <> - - + {/* This fragment is important to ensure we match the 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 index 868c917cf7..389765b6da 100644 --- 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( - 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 element"); +export function useFrameworkContext(): FrameworkContextObject { + let context = React.useContext(FrameworkContext); + invariant( + context, + "You must render this element inside a element" + ); return context; } @@ -91,7 +94,7 @@ export function usePrefetchBehavior( prefetch: PrefetchBehavior, theirElementProps: PrefetchHandlers ): [boolean, React.RefObject, 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( 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 index 127a3ee2a1..1ab1e3046c 100644 --- 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; } diff --git a/packages/react-router/lib/dom/ssr/errorBoundaries.tsx b/packages/react-router/lib/dom/ssr/errorBoundaries.tsx index 1989251b65..8d04d96fcb 100644 --- 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 index b56bb5444a..36a86ae85d 100644 --- 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>(); - let remixContextRef = React.useRef(); + let remixContextRef = React.useRef(); if (routerRef.current == null) { remixContextRef.current = { @@ -133,9 +137,9 @@ export function createRoutesStub( } return ( - + - + ); }; } diff --git a/packages/react-router/lib/dom/ssr/server.tsx b/packages/react-router/lib/dom/ssr/server.tsx index 2978349b26..46b2a15aee 100644 --- a/packages/react-router/lib/dom/ssr/server.tsx +++ b/packages/react-router/lib/dom/ssr/server.tsx @@ -2,7 +2,7 @@ import type { ReactElement } from "react"; import * as React from "react"; import { createStaticRouter, StaticRouterProvider } from "../server"; -import { RemixContext } from "./components"; +import { FrameworkContext } from "./components"; import type { EntryContext } from "./entry"; import { RemixErrorBoundary } from "./errorBoundaries"; import { createServerRoutes, shouldHydrateRouteLoader } from "./routes"; @@ -74,7 +74,7 @@ export function ServerRouter({ return ( <> - - + {context.serverHandoffStream ? (