remove all json calls

app/root.tsx

@@ -10,7 +10,7 @@ import {
   useMatches,
   useRouteError,
 } from "@remix-run/react";
-import { json } from "@remix-run/node";
+import { unstable_data as data } from "@remix-run/node";
 import type { LoaderFunctionArgs } from "@remix-run/node";
 import {
   load as loadFathom,
@@ -34,7 +34,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
 
   let colorScheme = await parseColorScheme(request);
 
-  return json(
+  return data(
     {
       colorScheme,
       host: url.host,

app/routes/$.tsx

@@ -1,6 +1,6 @@
 import { handleRedirects } from "~/lib/http.server";
 import type { LoaderFunctionArgs } from "@remix-run/node";
-import { redirect, json } from "@remix-run/node";
+import { redirect } from "@remix-run/node";
 import { getRepoDoc } from "~/lib/gh-docs";
 
 // We use the catch-all route to attempt to find a doc for the given path. If a
@@ -44,7 +44,7 @@ function handleStaticFileRequests(param: string | undefined) {
   if (
     SAFE_STATIC_FILE_EXTENSIONS.some((ext) => !!(param && param.endsWith(ext)))
   ) {
-    throw json({}, { status: 404 });
+    throw new Response(null, { status: 404 });
   }
 }
 
@@ -62,7 +62,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     // cache but we should probably fix it anyway.
     return redirect(`/docs/${lang}/${ref}/${params["*"]}`);
   } catch (_) {}
-  throw json({}, { status: 404 });
+  throw new Response(null, { status: 404 });
 };
 
 export default function () {

app/routes/[_]actions.newsletter.tsx

@@ -15,8 +15,8 @@ export const action = async ({ request }: ActionFunctionArgs) => {
   try {
     await subscribeToNewsletter(email);
   } catch (e: any) {
-    return data({ error: e.message || "Unknown error", ok: false });
+    return { error: e.message || "Unknown error", ok: false };
   }
 
-  return data({ error: null, ok: true });
+  return { error: null, ok: true };
 };

app/routes/_extras.blog.$slug.tsx

@@ -5,7 +5,7 @@ import type {
 } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import type { MetaFunction } from "@remix-run/react";
-import { json } from "@remix-run/node";
+import { unstable_data as data } from "@remix-run/node";
 import invariant from "tiny-invariant";
 
 import { getBlogPost } from "~/lib/blog.server";
@@ -24,7 +24,7 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => {
 
   let post = await getBlogPost(slug);
 
-  return json(
+  return data(
     { siteUrl, post },
     { headers: { "Cache-Control": CACHE_CONTROL.DEFAULT } },
   );

app/routes/_extras.blog._index.tsx

@@ -2,13 +2,13 @@ import * as React from "react";
 import type { LoaderFunctionArgs } from "@remix-run/node";
 import { useLoaderData, Link } from "@remix-run/react";
 import type { MetaFunction } from "@remix-run/react";
-import { json } from "@remix-run/node";
+import { unstable_data as data } from "@remix-run/node";
 import { Subscribe } from "~/ui/subscribe";
 import { CACHE_CONTROL } from "~/lib/http.server";
 import { getBlogPostListings } from "~/lib/blog.server";
 
 export const loader = async (_: LoaderFunctionArgs) => {
-  return json(
+  return data(
     { posts: await getBlogPostListings() },
     { headers: { "Cache-Control": CACHE_CONTROL.DEFAULT } },
   );

app/routes/_extras.resources.$.tsx

@@ -1,6 +1,6 @@
 // Pull full readme for this page from GitHub
 import {
-  json,
+  unstable_data as data,
   type LoaderFunctionArgs,
   type HeadersFunction,
   type MetaFunction,
@@ -22,13 +22,13 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
   let resource = await getResource(resourceSlug, { octokit });
 
   if (!resource) {
-    throw json({}, { status: 404 });
+    throw new Response(null, { status: 404 });
   }
 
   let requestUrl = new URL(request.url);
   let siteUrl = `${requestUrl.protocol}//${requestUrl.host}/resources/${resourceSlug}`;
 
-  return json(
+  return data(
     {
       siteUrl,
       resource,

app/routes/_extras.resources._index/route.tsx

@@ -1,5 +1,5 @@
 import {
-  json,
+  unstable_data as data,
   type LoaderFunctionArgs,
   type HeadersFunction,
   type MetaFunction,
@@ -17,10 +17,10 @@ import {
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   let requestUrl = new URL(request.url);
   let siteUrl = requestUrl.protocol + "//" + requestUrl.host;
-  let data = await getResourcesForRequest(request);
+  let resource = await getResourcesForRequest(request);
 
-  return json(
-    { ...data, siteUrl },
+  return data(
+    { ...resource, siteUrl },
     { headers: { "Cache-Control": CACHE_CONTROL.DEFAULT } },
   );
 };

app/routes/_extras.showcase.tsx

@@ -1,5 +1,5 @@
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
-import { json } from "@remix-run/node";
+import { unstable_data as data } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { Fragment, forwardRef, useRef } from "react";
 import type { ShowcaseExample } from "~/lib/showcase.server";
@@ -12,7 +12,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
   let requestUrl = new URL(request.url);
   let siteUrl = requestUrl.protocol + "//" + requestUrl.host;
 
-  return json(
+  return data(
     { siteUrl, showcaseExamples },
     { headers: { "Cache-Control": CACHE_CONTROL.DEFAULT } },
   );

app/routes/_marketing._index.tsx

@@ -1,10 +1,9 @@
 import { useLoaderData } from "@remix-run/react";
 import type { MetaFunction } from "@remix-run/react";
-import { json } from "@remix-run/node";
+import { unstable_data as data } from "@remix-run/node";
 import type { HeadersFunction, LoaderFunctionArgs } from "@remix-run/node";
 import { OutlineButtonLink, PrimaryButtonLink } from "~/ui/buttons";
 import { getMarkdownTutPage } from "~/lib/mdtut.server";
-import type { Prose, Sequence } from "~/lib/mdtut.server";
 import "~/styles/index.css";
 import { Red } from "~/ui/gradients";
 import { BigTweet, TweetCarousel, tweets } from "~/ui/twitter-cards";
@@ -24,14 +23,6 @@ export const meta: MetaFunction<typeof loader> = (args) => {
   return getMeta({ title, description, siteUrl, image });
 };
 
-type LoaderData = {
-  sample: Prose;
-  sampleSm: Prose;
-  siteUrl: string | undefined;
-  mutations: Sequence;
-  errors: Sequence;
-};
-
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   let [[sample], [sampleSm], [, mutations], [, errors]] = await Promise.all([
     getMarkdownTutPage("marketing/sample/sample.md"),
@@ -48,15 +39,16 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
   let requestUrl = new URL(request.url);
   let siteUrl = requestUrl.protocol + "//" + requestUrl.host;
 
-  let data: LoaderData = {
-    sample,
-    sampleSm,
-    siteUrl,
-    mutations,
-    errors,
-  };
-
-  return json(data, { headers: { "Cache-Control": CACHE_CONTROL.DEFAULT } });
+  return data(
+    {
+      sample,
+      sampleSm,
+      siteUrl,
+      mutations,
+      errors,
+    },
+    { headers: { "Cache-Control": CACHE_CONTROL.DEFAULT } },
+  );
 };
 
 export const headers: HeadersFunction = ({ loaderHeaders }) => {
@@ -65,7 +57,7 @@ export const headers: HeadersFunction = ({ loaderHeaders }) => {
 };
 
 export default function Index() {
-  let { mutations, errors } = useLoaderData<LoaderData>();
+  let { mutations, errors } = useLoaderData<typeof loader>();
   return (
     <div x-comp="Index">
       <div className="h-8" />
@@ -84,7 +76,7 @@ export default function Index() {
 }
 
 function Hero() {
-  let { sample, sampleSm } = useLoaderData<LoaderData>();
+  let { sample, sampleSm } = useLoaderData<typeof loader>();
   return (
     <Fragment>
       <h1 className="sr-only">Welcome to Remix</h1>

app/routes/conf.2022._index.tsx

@@ -1,4 +1,4 @@
-import { json } from "@remix-run/node";
+import { unstable_data as data } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import type { LoaderFunctionArgs } from "@remix-run/node";
 import type { MetaFunction } from "@remix-run/react";
@@ -52,7 +52,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
   let requestUrl = new URL(request.url);
   let siteUrl = requestUrl.protocol + "//" + requestUrl.host;
 
-  return json(
+  return data(
     { siteUrl, speakers: speakersShuffled, sponsors },
     { headers: { "Cache-Control": CACHE_CONTROL.DEFAULT } },
   );

app/routes/conf.2022._inner.speakers.$speakerSlug.tsx

@@ -7,7 +7,7 @@ import {
   useRouteError,
 } from "@remix-run/react";
 import type { MetaFunction } from "@remix-run/react";
-import { json } from "@remix-run/node";
+import { unstable_data as data } from "@remix-run/node";
 import { getSpeakers, getTalks } from "~/lib/conf2022.server";
 import "~/styles/conf-speaker.css";
 import { CACHE_CONTROL } from "~/lib/http.server";
@@ -45,7 +45,7 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
     .filter((t) => t.speakers.includes(speaker.name))
     // get rid of the description, we only use the HTML
     .map(({ description, ...rest }) => rest);
-  return json(
+  return data(
     { speaker, talks },
     { headers: { "Cache-Control": CACHE_CONTROL.DEFAULT } },
   );

app/routes/conf.2022._inner.venue.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import type { LoaderFunctionArgs } from "@remix-run/node";
-import { json } from "@remix-run/node";
 import type { MetaFunction } from "@remix-run/react";
 import { useLoaderData, Link } from "@remix-run/react";
 import { primaryButtonLinkClass } from "~/ui/buttons";
@@ -28,9 +27,9 @@ const hotelImages = [
 const TOTAL_HOTEL_IMAGES = hotelImages.length;
 
 export const loader = async (_: LoaderFunctionArgs) => {
-  return json({
+  return {
     hotelImageNumber: Math.floor(Math.random() * TOTAL_HOTEL_IMAGES) + 1,
-  });
+  };
 };
 
 const map = (

app/routes/conf.2023._index.tsx

@@ -1,4 +1,4 @@
-import { json } from "@remix-run/node";
+import { unstable_data as data } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import type { MetaFunction } from "@remix-run/react";
 import type { LoaderFunctionArgs } from "@remix-run/node";
@@ -21,7 +21,7 @@ export const meta: MetaFunction<typeof loader> = (args) => {
   return getMeta({
     title: "Remix Conf — May 2023",
     description:
-      "Join us in Salt Lake City, UT for our innaugural conference. Featuring distinguished speakers, workshops, and lots of fun in between. See you there!",
+      "Join us in Salt Lake City, UT for our inaugural conference. Featuring distinguished speakers, workshops, and lots of fun in between. See you there!",
     siteUrl: siteUrl ? `${siteUrl}/conf` : undefined,
     image: siteUrl ? `${siteUrl}/conf-images/2023/og_image.jpg` : undefined,
   });
@@ -47,7 +47,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 
   let requestUrl = new URL(request.url);
   let siteUrl = requestUrl.protocol + "//" + requestUrl.host;
-  return json(
+  return data(
     {
       siteUrl,
       sponsors,

app/routes/conf.2023._inner.schedule.tsx

@@ -8,7 +8,7 @@ import {
 import type { MetaFunction } from "@remix-run/react";
 import cx from "clsx";
 import type { LoaderFunctionArgs } from "@remix-run/node";
-import { json } from "@remix-run/node";
+import { unstable_data as data } from "@remix-run/node";
 import { formatDate, getSchedules } from "~/lib/conf2023.server";
 import { CACHE_CONTROL } from "~/lib/http.server";
 import { slugify } from "~/ui/primitives/utils";
@@ -20,7 +20,7 @@ export async function loader(_: LoaderFunctionArgs) {
     style: "long",
     type: "conjunction",
   });
-  return json(
+  return data(
     {
       schedules: schedules.map((schedule) => {
         return {

app/routes/conf.2023._inner.speakers.$speakerSlug.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import type { LoaderFunctionArgs } from "@remix-run/node";
-import { json } from "@remix-run/node";
+import { unstable_data as data } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import type { MetaFunction } from "@remix-run/react";
 import "~/styles/conf-speaker.css";
@@ -35,7 +35,7 @@ export async function loader({ params }: LoaderFunctionArgs) {
       getConfSessions(),
     ]);
   } catch (err) {
-    throw json(
+    throw data(
       {
         error:
           err && typeof err === "object" && "message" in err
@@ -47,12 +47,12 @@ export async function loader({ params }: LoaderFunctionArgs) {
   }
 
   if (!speaker) {
-    throw json(null, 404);
+    throw new Response(null, { status: 404 });
   }
   let speakerSessions = allSessions.filter((session) =>
     (session.speakers || []).some((sp) => sp.id === speaker?.id),
   );
-  return json(
+  return data(
     {
       speaker: {
         ...speaker,

app/routes/conf.2023.tsx

@@ -5,7 +5,7 @@ import {
   useLoaderData,
   useMatches,
 } from "@remix-run/react";
-import { json } from "@remix-run/node";
+import { unstable_data as data } from "@remix-run/node";
 import type { LoaderFunctionArgs } from "@remix-run/node";
 import { Link, NavLink } from "~/ui/link";
 import { Wordmark } from "~/ui/logo";
@@ -35,7 +35,7 @@ export const handle = { forceDark: true };
 const EARLY_BIRD_ENDING_TIME = 1646121600000;
 
 export const loader = async (_: LoaderFunctionArgs) => {
-  return json(
+  return data(
     { earlyBird: Date.now() < EARLY_BIRD_ENDING_TIME },
     { headers: { "Cache-Control": CACHE_CONTROL.conf } },
   );

app/routes/docs.$lang.$ref.tsx

@@ -11,7 +11,7 @@ import {
   useResolvedPath,
   matchPath,
 } from "@remix-run/react";
-import { json, redirect } from "@remix-run/node";
+import { redirect } from "@remix-run/node";
 import type { LoaderFunctionArgs, HeadersFunction } from "@remix-run/node";
 import cx from "clsx";
 import { DocSearch } from "~/ui/docsearch";
@@ -61,7 +61,7 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
   let releaseBranch = "main";
   let isLatest = ref === releaseBranch || ref === latestVersion;
 
-  return json({
+  return {
     menu,
     versions: getLatestVersionHeads(tags),
     latestVersion,
@@ -70,7 +70,7 @@ export const loader = async ({ params }: LoaderFunctionArgs) => {
     currentGitHubRef: ref,
     lang,
     isLatest,
-  });
+  };
 };
 
 export const headers: HeadersFunction = () => {