Prepare for React Router 7

packages/adapter/commands/remix_route.ts

@@ -80,7 +80,6 @@ export default class MakeRemixRoute extends BaseCommand {
     }
     if (this.loader) {
       node.add('LoaderFunctionArgs')
-      node.add('json')
       react.add('useLoaderData')
     }
     if (this.clientLoader) {

packages/adapter/stubs/make/route.tsx.stub

@@ -16,9 +16,9 @@ import { {{imports.react}} } from '@remix-run/react'
 
 export const loader = ({ context }: LoaderFunctionArgs) => {
   const { http, make } = context
-  return json({
+  return {
     message: 'Hello from ' + http.request.completeUrl(),
-  })
+  }
 }
 {{{/if}}}
 {{#if flags["client-loader"]}}

packages/reference-app/package.json

@@ -34,7 +34,7 @@
     "@japa/file-system": "^2.3.0",
     "@japa/plugin-adonisjs": "^3.0.0",
     "@japa/runner": "^3.1.2",
-    "@remix-run/dev": "^2.8.1",
+    "@remix-run/dev": "^2.12.1",
     "@swc/core": "^1.4.14",
     "@types/luxon": "^3.4.2",
     "@types/node": "^20.12.7",
@@ -58,10 +58,10 @@
     "@japa/api-client": "^2.0.2",
     "@japa/browser-client": "^2.0.2",
     "@matstack/remix-adonisjs": "*",
-    "@remix-run/css-bundle": "^2.8.1",
-    "@remix-run/node": "^2.8.1",
-    "@remix-run/react": "^2.8.1",
-    "@remix-run/serve": "^2.8.1",
+    "@remix-run/css-bundle": "^2.12.1",
+    "@remix-run/node": "^2.12.1",
+    "@remix-run/react": "^2.12.1",
+    "@remix-run/serve": "^2.12.1",
     "@vinejs/vine": "^2.0.0",
     "edge.js": "^6.0.1",
     "isbot": "^4",

packages/reference-app/resources/remix_app/routes/dashboard.tsx

@@ -1,10 +1,10 @@
-import { LoaderFunctionArgs, json } from '@remix-run/node'
+import { LoaderFunctionArgs } from '@remix-run/node'
 import { useLoaderData } from '@remix-run/react'
 
 export const loader = ({ context }: LoaderFunctionArgs) => {
   const { http } = context
 
-  return json(http.session.all())
+  return http.session.all()
 }
 export default function Page() {
   const data = useLoaderData()

packages/reference-app/resources/remix_app/routes/echo.tsx

@@ -1,12 +1,12 @@
-import { LoaderFunctionArgs, json } from '@remix-run/node'
+import { LoaderFunctionArgs } from '@remix-run/node'
 import { useLoaderData } from '@remix-run/react'
 
 export const loader = ({ request }: LoaderFunctionArgs) => {
   const params = new URL(request.url).searchParams
 
-  return json({
+  return {
     message: params.get('message'),
-  })
+  }
 }
 
 export default function Page() {

packages/reference-app/resources/remix_app/routes/feedback.tsx

@@ -1,10 +1,9 @@
-import { json } from '@remix-run/node'
 import { Form, useActionData } from '@remix-run/react'
 
 export const action = () => {
-  return json({
+  return {
     message: 'Thank you for your feedback!',
-  })
+  }
 }
 
 export default function Page() {

packages/reference-app/resources/remix_app/routes/posts.tsx

@@ -1,15 +1,15 @@
-import { Await, defer, useLoaderData } from '@remix-run/react'
+import { Await, useLoaderData } from '@remix-run/react'
 import { Suspense } from 'react'
 
 export const loader = async () => {
   // simulate a slow loader
-  return defer({
+  return {
     lazyPosts: new Promise<string[]>((resolve) => {
       setTimeout(() => {
         resolve(['Post 1', 'Post 2'])
       }, 100)
     }),
-  })
+  }
 }
 
 export default function Page() {

packages/reference-app/resources/remix_app/routes/profile.tsx

@@ -1,11 +1,10 @@
-import { json } from '@remix-run/node'
 import { useLoaderData } from '@remix-run/react'
 
 export const loader = () => {
-  return json({
+  return {
     userName: 'John Doe',
     email: '[email protected]',
-  })
+  }
 }
 
 export default function Page() {

packages/reference-app/resources/remix_app/routes/resolve_container.tsx

@@ -1,11 +1,11 @@
-import { LoaderFunctionArgs, json } from '@remix-run/node'
+import { LoaderFunctionArgs } from '@remix-run/node'
 import { useLoaderData } from '@remix-run/react'
 
 export const loader = async ({ context }: LoaderFunctionArgs) => {
   const app = await context.make('app')
-  return json({
+  return {
     env: app.getEnvironment(),
-  })
+  }
 }
 
 export default function Page() {

packages/reference-app/vite.config.ts

@@ -1,9 +1,12 @@
-import { vitePlugin as remix } from '@remix-run/dev'
-import { defineConfig } from 'vite'
+import { vitePlugin as remix } from '@remix-run/dev';
+import { defineConfig } from 'vite';
 
 export default defineConfig(({ isSsrBuild }) => ({
   plugins: [
     remix({
+      future: {
+        unstable_singleFetch: true
+      },
       appDirectory: 'resources/remix_app',
       buildDirectory: 'build/remix',
       serverBuildFile: 'server.js',
@@ -17,3 +20,10 @@ export default defineConfig(({ isSsrBuild }) => ({
       : {},
   },
 }))
+
+declare module "@remix-run/node" {
+  // https://remix.run/docs/en/main/guides/single-fetch#enable-single-fetch-types
+  interface Future {
+    unstable_singleFetch: true;
+  }
+}