Stabilize SSR data router APIs (#9738)

.changeset/polite-coins-tap.md

@@ -0,0 +1,6 @@
+---
+"react-router-dom": minor
+"@remix-run/router": minor
+---
+
+Remove `unstable_` prefix from `createStaticHandler`/`createStaticRouter`/`StaticRouterProvider`

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 `<DataBrowserRouter>` 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 `<unstable_DataStaticRouter>` 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 `<DataStaticRouter>` to render the app in the correct state.
 
 ## Preview
 

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";
 

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(() => {

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 {

packages/router/__tests__/router-test.ts

@@ -14,7 +14,7 @@ import type {
 import {
   createMemoryHistory,
   createRouter,
-  unstable_createStaticHandler as createStaticHandler,
+  createStaticHandler,
   defer,
   ErrorResponse,
   IDLE_FETCHER,

packages/router/router.ts

@@ -1973,15 +1973,15 @@ export function createRouter(init: RouterInit): Router {
 //#region createStaticHandler
 ////////////////////////////////////////////////////////////////////////////////
 
-export function unstable_createStaticHandler(
+export function createStaticHandler(
   routes: AgnosticRouteObject[],
   opts?: {
     basename?: string;
   }
 ): 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);