From da1e6e040ff919559eb2ada957ed1ad908e2650f Mon Sep 17 00:00:00 2001 From: Matt Brophy Date: Fri, 16 Dec 2022 13:26:32 -0500 Subject: [PATCH] Stabilize SSR data router APIs (#9738) --- .changeset/polite-coins-tap.md | 6 ++++++ examples/ssr-data-router/README.md | 2 +- examples/ssr-data-router/src/entry.server.tsx | 6 +++--- .../__tests__/data-static-router-test.tsx | 9 +++------ packages/react-router-dom/server.tsx | 4 ++-- packages/router/__tests__/router-test.ts | 2 +- packages/router/router.ts | 4 ++-- 7 files changed, 18 insertions(+), 15 deletions(-) create mode 100644 .changeset/polite-coins-tap.md diff --git a/.changeset/polite-coins-tap.md b/.changeset/polite-coins-tap.md new file mode 100644 index 0000000000..9bc913c81e --- /dev/null +++ b/.changeset/polite-coins-tap.md @@ -0,0 +1,6 @@ +--- +"react-router-dom": minor +"@remix-run/router": minor +--- + +Remove `unstable_` prefix from `createStaticHandler`/`createStaticRouter`/`StaticRouterProvider` diff --git a/examples/ssr-data-router/README.md b/examples/ssr-data-router/README.md index 52c74777a3..0693913455 100644 --- a/examples/ssr-data-router/README.md +++ b/examples/ssr-data-router/README.md @@ -13,7 +13,7 @@ This example contains a server (see [server.js](server.js)) that can run in both In the browser entry point (see [src/entry.client.tsx](src/entry.client.tsx)), we use React Router like we would traditionally do in a purely client-side app and render a `` to provide routing context to the rest of the app. The main difference is that instead of using `ReactDOM.createRoot(el).render()` to render the app, since the HTML was already sent by the server, all we need is `ReactDOM.hydrateRoot()`. -On the server (see [src/entry.server.tsx](src/entry.server.tsx)), we create a static request handler using `createStaticHandler` and query for the incoming `Request` we get from Express (note that we convert the Express request to a Web Fetch Request). Once the router is finished with data loading, we use React Router's `` to render the app in the correct state. +On the server (see [src/entry.server.tsx](src/entry.server.tsx)), we create a static request handler using `createStaticHandler` and query for the incoming `Request` we get from Express (note that we convert the Express request to a Web Fetch Request). Once the router is finished with data loading, we use React Router's `` to render the app in the correct state. ## Preview diff --git a/examples/ssr-data-router/src/entry.server.tsx b/examples/ssr-data-router/src/entry.server.tsx index 14ebaf5b4b..5fcf1b44d3 100644 --- a/examples/ssr-data-router/src/entry.server.tsx +++ b/examples/ssr-data-router/src/entry.server.tsx @@ -1,10 +1,10 @@ import type * as express from "express"; -import { unstable_createStaticHandler as createStaticHandler } from "@remix-run/router"; +import { createStaticHandler } from "@remix-run/router"; import * as React from "react"; import ReactDOMServer from "react-dom/server"; import { - unstable_createStaticRouter as createStaticRouter, - unstable_StaticRouterProvider as StaticRouterProvider, + createStaticRouter, + StaticRouterProvider, } from "react-router-dom/server"; import { routes } from "./App"; diff --git a/packages/react-router-dom/__tests__/data-static-router-test.tsx b/packages/react-router-dom/__tests__/data-static-router-test.tsx index 40a674ac86..3323b46226 100644 --- a/packages/react-router-dom/__tests__/data-static-router-test.tsx +++ b/packages/react-router-dom/__tests__/data-static-router-test.tsx @@ -1,10 +1,7 @@ import * as React from "react"; import * as ReactDOMServer from "react-dom/server"; import type { StaticHandlerContext } from "@remix-run/router"; -import { - json, - unstable_createStaticHandler as createStaticHandler, -} from "@remix-run/router"; +import { json, createStaticHandler } from "@remix-run/router"; import { Link, Outlet, @@ -13,8 +10,8 @@ import { useMatches, } from "react-router-dom"; import { - unstable_createStaticRouter as createStaticRouter, - unstable_StaticRouterProvider as StaticRouterProvider, + createStaticRouter, + StaticRouterProvider, } from "react-router-dom/server"; beforeEach(() => { diff --git a/packages/react-router-dom/server.tsx b/packages/react-router-dom/server.tsx index 28bde589b3..041d09c07c 100644 --- a/packages/react-router-dom/server.tsx +++ b/packages/react-router-dom/server.tsx @@ -83,7 +83,7 @@ export interface StaticRouterProviderProps { * A Data Router that may not navigate to any other location. This is useful * on the server where there is no stateful UI. */ -export function unstable_StaticRouterProvider({ +export function StaticRouterProvider({ context, router, hydrate = true, @@ -228,7 +228,7 @@ function generateManifest( return manifest; } -export function unstable_createStaticRouter( +export function createStaticRouter( routes: RouteObject[], context: StaticHandlerContext ): RemixRouter { diff --git a/packages/router/__tests__/router-test.ts b/packages/router/__tests__/router-test.ts index 4d1dcf7f91..3c5defaf0e 100644 --- a/packages/router/__tests__/router-test.ts +++ b/packages/router/__tests__/router-test.ts @@ -14,7 +14,7 @@ import type { import { createMemoryHistory, createRouter, - unstable_createStaticHandler as createStaticHandler, + createStaticHandler, defer, ErrorResponse, IDLE_FETCHER, diff --git a/packages/router/router.ts b/packages/router/router.ts index e406dd2cec..dd5284103d 100644 --- a/packages/router/router.ts +++ b/packages/router/router.ts @@ -1973,7 +1973,7 @@ export function createRouter(init: RouterInit): Router { //#region createStaticHandler //////////////////////////////////////////////////////////////////////////////// -export function unstable_createStaticHandler( +export function createStaticHandler( routes: AgnosticRouteObject[], opts?: { basename?: string; @@ -1981,7 +1981,7 @@ export function unstable_createStaticHandler( ): StaticHandler { invariant( routes.length > 0, - "You must provide a non-empty routes array to unstable_createStaticHandler" + "You must provide a non-empty routes array to createStaticHandler" ); let dataRoutes = convertRoutesToDataRoutes(routes);