Skip to content

Commit

Permalink
Stabilize SSR data router APIs
Browse files Browse the repository at this point in the history
  • Loading branch information
brophdawg11 committed Dec 16, 2022
1 parent cd7f118 commit 8a2357a
Show file tree
Hide file tree
Showing 7 changed files with 18 additions and 15 deletions.
6 changes: 6 additions & 0 deletions .changeset/polite-coins-tap.md
@@ -0,0 +1,6 @@
---
"react-router-dom": minor
"@remix-run/router": minor
---

Remove `unstable_` prefix from `createStaticHandler`/`createStaticRouter`/`StaticRouterProvider`
2 changes: 1 addition & 1 deletion examples/ssr-data-router/README.md
Expand Up @@ -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

Expand Down
6 changes: 3 additions & 3 deletions 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";

Expand Down
@@ -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,
Expand All @@ -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(() => {
Expand Down
4 changes: 2 additions & 2 deletions packages/react-router-dom/server.tsx
Expand Up @@ -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,
Expand Down Expand Up @@ -228,7 +228,7 @@ function generateManifest(
return manifest;
}

export function unstable_createStaticRouter(
export function createStaticRouter(
routes: RouteObject[],
context: StaticHandlerContext
): RemixRouter {
Expand Down
2 changes: 1 addition & 1 deletion packages/router/__tests__/router-test.ts
Expand Up @@ -14,7 +14,7 @@ import type {
import {
createMemoryHistory,
createRouter,
unstable_createStaticHandler as createStaticHandler,
createStaticHandler,
defer,
ErrorResponse,
IDLE_FETCHER,
Expand Down
4 changes: 2 additions & 2 deletions packages/router/router.ts
Expand Up @@ -1952,15 +1952,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);
Expand Down

0 comments on commit 8a2357a

Please sign in to comment.