Skip to content

Commit 6bd8362

Browse files
brophdawg11brophdawg11
authored
Remove json() utility (#12146)
1 parent 66613c0 commit 6bd8362

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+592
-782
lines changed

‎.changeset/strange-jeans-give.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"react-router": patch
3+
---
4+
5+
Remove the deprecated `json` utility
6+
7+
- You can use [`Response.json`](https://developer.mozilla.org/en-US/docs/Web/API/Response/json_static) if you still need to construct JSON responses in your app

‎docs/misc/resource-routes.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,8 @@ For example, consider a UI Route that renders a report, note the link:
2626
export async function loader({
2727
params,
2828
}: LoaderFunctionArgs) {
29-
return json(await getReport(params.id));
29+
let report = await getReport(params.id);
30+
return report;
3031
}
3132

3233
export default function Report() {

‎integration/abort-signal-test.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,16 @@ test.beforeAll(async () => {
1515
fixture = await createFixture({
1616
files: {
1717
"app/routes/_index.tsx": js`
18-
import { json } from "react-router";
1918
import { useActionData, useLoaderData, Form } from "react-router";
2019
2120
export async function action ({ request }) {
2221
// New event loop causes express request to close
2322
await new Promise(r => setTimeout(r, 0));
24-
return json({ aborted: request.signal.aborted });
23+
return { aborted: request.signal.aborted };
2524
}
2625
2726
export function loader({ request }) {
28-
return json({ aborted: request.signal.aborted });
27+
return { aborted: request.signal.aborted };
2928
}
3029
3130
export default function Index() {

‎integration/bug-report-test.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,10 @@ test.beforeAll(async () => {
5959
////////////////////////////////////////////////////////////////////////////
6060
files: {
6161
"app/routes/_index.tsx": js`
62-
import { json } from "react-router";
6362
import { useLoaderData, Link } from "react-router";
6463
6564
export function loader() {
66-
return json("pizza");
65+
return "pizza";
6766
}
6867
6968
export default function Index() {

‎integration/catch-boundary-data-test.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@ test.describe("ErrorBoundary (thrown responses)", () => {
4040
fixture = await createFixture({
4141
files: {
4242
"app/root.tsx": js`
43-
import { json } from "react-router";
4443
import {
4544
Links,
4645
Meta,
@@ -50,7 +49,7 @@ test.describe("ErrorBoundary (thrown responses)", () => {
5049
useMatches,
5150
} from "react-router";
5251
53-
export const loader = () => json("${ROOT_DATA}");
52+
export const loader = () => "${ROOT_DATA}";
5453
5554
export default function Root() {
5655
const data = useLoaderData();

‎integration/catch-boundary-test.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,10 @@ test.describe("ErrorBoundary (thrown responses)", () => {
3030
fixture = await createFixture({
3131
files: {
3232
"app/root.tsx": js`
33-
import { json } from "react-router";
3433
import { Links, Meta, Outlet, Scripts, useMatches } from "react-router";
3534
3635
export function loader() {
37-
return json({ data: "ROOT LOADER" });
36+
return { data: "ROOT LOADER" };
3837
}
3938
4039
export default function Root() {

‎integration/client-data-test.ts

Lines changed: 10 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,9 @@ function getFiles({
4949
}
5050
`,
5151
"app/routes/parent.tsx": js`
52-
import { json } from "react-router"
5352
import { Outlet, useLoaderData } from "react-router"
5453
export function loader() {
55-
return json({ message: 'Parent Server Loader'});
54+
return { message: 'Parent Server Loader' };
5655
}
5756
${
5857
parentClientLoader
@@ -89,13 +88,12 @@ function getFiles({
8988
}
9089
`,
9190
"app/routes/parent.child.tsx": js`
92-
import { json } from "react-router"
9391
import { Form, Outlet, useActionData, useLoaderData } from "react-router"
9492
export function loader() {
95-
return json({ message: 'Child Server Loader'});
93+
return { message: 'Child Server Loader' };
9694
}
9795
export function action() {
98-
return json({ message: 'Child Server Action'});
96+
return { message: 'Child Server Action' };
9997
}
10098
${
10199
childClientLoader
@@ -417,18 +415,13 @@ test.describe("Client Data", () => {
417415
}),
418416
"app/routes/parent.child.tsx": js`
419417
import * as React from 'react';
420-
import { json } from "react-router";
421418
import { useLoaderData } from "react-router";
422419
export function loader() {
423-
return json({
424-
message: "Child Server Loader Data",
425-
});
420+
return { message: "Child Server Loader Data" };
426421
}
427422
export async function clientLoader({ serverLoader }) {
428423
await new Promise(r => setTimeout(r, 100));
429-
return {
430-
message: "Child Client Loader Data",
431-
};
424+
return { message: "Child Client Loader Data" };
432425
}
433426
export function HydrateFallback() {
434427
return <p>SHOULD NOT SEE ME</p>
@@ -600,19 +593,14 @@ test.describe("Client Data", () => {
600593
}),
601594
"app/routes/parent.child.tsx": js`
602595
import * as React from 'react';
603-
import { json } from "react-router";
604596
import { useLoaderData, useRevalidator } from "react-router";
605597
let isFirstCall = true;
606598
export async function loader({ serverLoader }) {
607599
if (isFirstCall) {
608600
isFirstCall = false
609-
return json({
610-
message: "Child Server Loader Data (1)",
611-
});
601+
return { message: "Child Server Loader Data (1)" };
612602
}
613-
return json({
614-
message: "Child Server Loader Data (2+)",
615-
});
603+
return { message: "Child Server Loader Data (2+)" };
616604
}
617605
export async function clientLoader({ serverLoader }) {
618606
await new Promise(r => setTimeout(r, 100));
@@ -671,13 +659,9 @@ test.describe("Client Data", () => {
671659
export async function loader({ serverLoader }) {
672660
if (isFirstCall) {
673661
isFirstCall = false
674-
return json({
675-
message: "Child Server Loader Data (1)",
676-
});
662+
return { message: "Child Server Loader Data (1)" };
677663
}
678-
return json({
679-
message: "Child Server Loader Data (2+)",
680-
});
664+
return { message: "Child Server Loader Data (2+)" };
681665
}
682666
let isFirstClientCall = true;
683667
export async function clientLoader({ serverLoader }) {
@@ -799,7 +783,7 @@ test.describe("Client Data", () => {
799783
"app/routes/parent.tsx": js`
800784
import { Outlet, useLoaderData, useRouteLoaderData, useRouteError } from 'react-router'
801785
export function loader() {
802-
return { message: 'Parent Server Loader'};
786+
return { message: 'Parent Server Loader' };
803787
}
804788
export async function clientLoader({ serverLoader }) {
805789
console.log('running parent client loader')

‎integration/error-data-request-test.ts

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -58,10 +58,8 @@ test.describe("ErrorBoundary", () => {
5858
`,
5959

6060
[`app/routes/loader-return-json.jsx`]: js`
61-
import { json } from "react-router";
62-
6361
export async function loader() {
64-
return json({ ok: true });
62+
return { ok: true };
6563
}
6664
6765
export default function () {
@@ -80,10 +78,8 @@ test.describe("ErrorBoundary", () => {
8078
`,
8179

8280
[`app/routes/action-return-json.jsx`]: js`
83-
import { json } from "react-router";
84-
8581
export async function action() {
86-
return json({ ok: true });
82+
return { ok: true };
8783
}
8884
8985
export default function () {

‎integration/fetcher-layout-test.ts

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,9 @@ test.beforeAll(async () => {
1515
fixture = await createFixture({
1616
files: {
1717
"app/routes/layout-action.tsx": js`
18-
import { json } from "react-router";
1918
import { Outlet, useFetcher, useFormAction } from "react-router";
2019
21-
export let action = ({ params }) => json("layout action data");
20+
export let action = ({ params }) => "layout action data";
2221
2322
export default function ActionLayout() {
2423
let fetcher = useFetcher();
@@ -40,16 +39,15 @@ test.beforeAll(async () => {
4039
`,
4140

4241
"app/routes/layout-action._index.tsx": js`
43-
import { json } from "react-router";
4442
import {
4543
useFetcher,
4644
useFormAction,
4745
useLoaderData,
4846
} from "react-router";
4947
50-
export let loader = ({ params }) => json("index data");
48+
export let loader = ({ params }) => "index data";
5149
52-
export let action = ({ params }) => json("index action data");
50+
export let action = ({ params }) => "index action data";
5351
5452
export default function ActionLayoutIndex() {
5553
let data = useLoaderData();
@@ -71,16 +69,15 @@ test.beforeAll(async () => {
7169
`,
7270

7371
"app/routes/layout-action.$param.tsx": js`
74-
import { json } from "react-router";
7572
import {
7673
useFetcher,
7774
useFormAction,
7875
useLoaderData,
7976
} from "react-router";
8077
81-
export let loader = ({ params }) => json(params.param);
78+
export let loader = ({ params }) => params.param;
8279
83-
export let action = ({ params }) => json("param action data");
80+
export let action = ({ params }) => "param action data";
8481
8582
export default function ActionLayoutChild() {
8683
let data = useLoaderData();
@@ -102,10 +99,9 @@ test.beforeAll(async () => {
10299
`,
103100

104101
"app/routes/layout-loader.tsx": js`
105-
import { json } from "react-router";
106102
import { Outlet, useFetcher, useFormAction } from "react-router";
107103
108-
export let loader = () => json("layout loader data");
104+
export let loader = () => "layout loader data";
109105
110106
export default function LoaderLayout() {
111107
let fetcher = useFetcher();
@@ -127,14 +123,13 @@ test.beforeAll(async () => {
127123
`,
128124

129125
"app/routes/layout-loader._index.tsx": js`
130-
import { json } from "react-router";
131126
import {
132127
useFetcher,
133128
useFormAction,
134129
useLoaderData,
135130
} from "react-router";
136131
137-
export let loader = ({ params }) => json("index data");
132+
export let loader = ({ params }) => "index data";
138133
139134
export default function ActionLayoutIndex() {
140135
let fetcher = useFetcher();
@@ -154,14 +149,13 @@ test.beforeAll(async () => {
154149
`,
155150

156151
"app/routes/layout-loader.$param.tsx": js`
157-
import { json } from "react-router";
158152
import {
159153
useFetcher,
160154
useFormAction,
161155
useLoaderData,
162156
} from "react-router";
163157
164-
export let loader = ({ params }) => json(params.param);
158+
export let loader = ({ params }) => params.param;
165159
166160
export default function ActionLayoutChild() {
167161
let fetcher = useFetcher();

‎integration/fetcher-test.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,6 @@ test.describe("useFetcher", () => {
149149
`,
150150

151151
"app/routes/fetcher-echo.tsx": js`
152-
import { json } from "react-router";
153152
import { useFetcher } from "react-router";
154153
155154
export async function action({ request }) {
@@ -164,13 +163,13 @@ test.describe("useFetcher", () => {
164163
} else {
165164
value = (await request.formData()).get('value');
166165
}
167-
return json({ data: "ACTION (" + contentType + ") " + value })
166+
return { data: "ACTION (" + contentType + ") " + value }
168167
}
169168
170169
export async function loader({ request }) {
171170
await new Promise(r => setTimeout(r, 1000));
172171
let value = new URL(request.url).searchParams.get('value');
173-
return json({ data: "LOADER " + value })
172+
return { data: "LOADER " + value }
174173
}
175174
176175
export default function Index() {

0 commit comments

Comments
 (0)