Stabilize unstable_dataStrategy (#11969)

Author: brophdawg11

.changeset/violet-beds-swim.md

@@ -0,0 +1,5 @@
+---
+"react-router": minor
+---
+
+Stabilize `unstable_dataStrategy`

integration/defer-loader-test.ts

@@ -28,9 +28,9 @@ test.describe("deferred loaders", () => {
         `,
 
         "app/routes/redirect.tsx": js`
-          import { unstable_data } from 'react-router';
+          import { data } from 'react-router';
           export function loader() {
-            return unstable_data(
+            return data(
               { food: "pizza" },
               {
                 status: 301,

integration/single-fetch-test.ts

@@ -110,7 +110,7 @@ const files = {
   `,
 
   "app/routes/data-with-response.tsx": js`
-    import { useActionData, useLoaderData, unstable_data as data } from "react-router";
+    import { useActionData, useLoaderData, data } from "react-router";
 
     export function headers ({ actionHeaders, loaderHeaders, errorHeaders }) {
       if ([...actionHeaders].length > 0) {
@@ -253,7 +253,7 @@ test.describe("single-fetch", () => {
     });
   });
 
-  test("loads proper data (via unstable_data) on single fetch loader requests", async () => {
+  test("loads proper data (via data()) on single fetch loader requests", async () => {
     let fixture = await createFixture({
       files,
     });
@@ -280,7 +280,7 @@ test.describe("single-fetch", () => {
     });
   });
 
-  test("loads proper data (via unstable_data) on single fetch action requests", async () => {
+  test("loads proper data (via data()) on single fetch action requests", async () => {
     let fixture = await createFixture({
       files,
     });
@@ -505,28 +505,28 @@ test.describe("single-fetch", () => {
     expect(urls).toEqual([]);
   });
 
-  test("does not revalidate on 4xx/5xx action responses (via unstable_data)", async ({
+  test("does not revalidate on 4xx/5xx action responses (via data())", async ({
     page,
   }) => {
     let fixture = await createFixture({
       files: {
         ...files,
         "app/routes/action.tsx": js`
-          import { Form, Link, useActionData, useLoaderData, useNavigation, unstable_data } from 'react-router';
+          import { Form, Link, useActionData, useLoaderData, useNavigation, data } from 'react-router';
 
           export async function action({ request }) {
             let fd = await request.formData();
             if (fd.get('throw') === "5xx") {
-              throw unstable_data("Thrown 500", { status: 500 });
+              throw data("Thrown 500", { status: 500 });
             }
             if (fd.get('throw') === "4xx") {
-              throw unstable_data("Thrown 400", { status: 400 });
+              throw data("Thrown 400", { status: 400 });
             }
             if (fd.get('return') === "5xx") {
-              return unstable_data("Returned 500", { status: 500 });
+              return data("Returned 500", { status: 500 });
             }
             if (fd.get('return') === "4xx") {
-              return unstable_data("Returned 400", { status: 400 });
+              return data("Returned 400", { status: 400 });
             }
             return null;
           }

packages/react-router/__tests__/data-memory-router-test.tsx

@@ -3292,7 +3292,7 @@ describe("createMemoryRouter", () => {
             />
           </Route>
         ),
-        { initialEntries: ["/foo"], unstable_dataStrategy: urlDataStrategy }
+        { initialEntries: ["/foo"], dataStrategy: urlDataStrategy }
       );
       let { container } = render(<RouterProvider router={router} />);
 

packages/react-router/__tests__/router/ssr-test.ts

@@ -1403,7 +1403,7 @@ describe("ssr", () => {
         let { query } = createStaticHandler(SSR_ROUTES);
 
         let context = await query(createRequest("/custom"), {
-          unstable_dataStrategy: urlDataStrategy,
+          dataStrategy: urlDataStrategy,
         });
         expect(context).toMatchObject({
           actionData: null,
@@ -2251,7 +2251,7 @@ describe("ssr", () => {
         let data;
 
         data = await queryRoute(createRequest("/custom"), {
-          unstable_dataStrategy: urlDataStrategy,
+          dataStrategy: urlDataStrategy,
         });
         expect(data).toBeInstanceOf(URLSearchParams);
         expect((data as URLSearchParams).get("foo")).toBe("bar");

packages/react-router/__tests__/router/utils/data-router-setup.ts

@@ -339,7 +339,7 @@ export function setup({
     routes: enhanceRoutes(routes),
     hydrationData,
     window: testWindow,
-    unstable_dataStrategy: dataStrategy,
+    dataStrategy: dataStrategy,
   });
 
   let fetcherData = getFetcherData(currentRouter);

packages/react-router/index.ts

@@ -23,10 +23,10 @@ export type {
 export type {
   ActionFunction,
   ActionFunctionArgs,
-  DataStrategyFunction as unstable_DataStrategyFunction,
-  DataStrategyFunctionArgs as unstable_DataStrategyFunctionArgs,
-  DataStrategyMatch as unstable_DataStrategyMatch,
-  DataStrategyResult as unstable_DataStrategyResult,
+  DataStrategyFunction,
+  DataStrategyFunctionArgs,
+  DataStrategyMatch,
+  DataStrategyResult,
   DataWithResponseInit as UNSAFE_DataWithResponseInit,
   ErrorResponse,
   FormEncType,
@@ -58,7 +58,7 @@ export {
   IDLE_BLOCKER,
 } from "./lib/router/router";
 export {
-  data as unstable_data,
+  data,
   generatePath,
   isRouteErrorResponse,
   json,

packages/react-router/lib/components.tsx

@@ -144,7 +144,7 @@ export function createMemoryRouter(
     hydrationData?: HydrationState;
     initialEntries?: InitialEntry[];
     initialIndex?: number;
-    unstable_dataStrategy?: DataStrategyFunction;
+    dataStrategy?: DataStrategyFunction;
     patchRoutesOnNavigation?: PatchRoutesOnNavigationFunction;
   }
 ): RemixRouter {
@@ -158,7 +158,7 @@ export function createMemoryRouter(
     hydrationData: opts?.hydrationData,
     routes,
     mapRouteProperties,
-    unstable_dataStrategy: opts?.unstable_dataStrategy,
+    dataStrategy: opts?.dataStrategy,
     patchRoutesOnNavigation: opts?.patchRoutesOnNavigation,
   }).initialize();
 }

packages/react-router/lib/dom-export/hydrated-router.tsx

@@ -169,7 +169,7 @@ function createHydratedRouter(): RemixRouter {
     basename: ssrInfo.context.basename,
     hydrationData,
     mapRouteProperties,
-    unstable_dataStrategy: getSingleFetchDataStrategy(
+    dataStrategy: getSingleFetchDataStrategy(
       ssrInfo.manifest,
       ssrInfo.routeModules,
       () => router

packages/react-router/lib/dom/lib.tsx

@@ -122,7 +122,7 @@ interface DOMRouterOpts {
   basename?: string;
   future?: Partial<FutureConfig>;
   hydrationData?: HydrationState;
-  unstable_dataStrategy?: DataStrategyFunction;
+  dataStrategy?: DataStrategyFunction;
   patchRoutesOnNavigation?: PatchRoutesOnNavigationFunction;
   window?: Window;
 }
@@ -141,7 +141,7 @@ export function createBrowserRouter(
     hydrationData: opts?.hydrationData || parseHydrationData(),
     routes,
     mapRouteProperties,
-    unstable_dataStrategy: opts?.unstable_dataStrategy,
+    dataStrategy: opts?.dataStrategy,
     patchRoutesOnNavigation: opts?.patchRoutesOnNavigation,
     window: opts?.window,
   }).initialize();
@@ -161,7 +161,7 @@ export function createHashRouter(
     hydrationData: opts?.hydrationData || parseHydrationData(),
     routes,
     mapRouteProperties,
-    unstable_dataStrategy: opts?.unstable_dataStrategy,
+    dataStrategy: opts?.dataStrategy,
     patchRoutesOnNavigation: opts?.patchRoutesOnNavigation,
     window: opts?.window,
   }).initialize();