useTransition, useActionData, useFetcher, shouldReload

This is kinda big but opens up a lot of use cases,

- can build better pending navigation UI with useTransition telling app more detailed information (state, type)
- replaces usePendingFormSubmit and usePendingLocation
- actually aborts stale submissions/loads
- fixes bugs around interrupted submissions/navigations
- actions can return data now
- super useful for form validation, no more screwing around with sessions
- allows apps to call loaders and actions outside of navigation
- manages cancellation of stale submissions and loads
- reloads route data after actions
- commits the freshest reloaded data along the way when there are multiple inflight

allows route modules to decide if they should reload or not

- after submissions
- when the search params change
- when the same href is navigated to

other stuff

- reloads route data when the same href is navigated to
- does not create ghost history entries on interrupted navigation

These old hooks still work, but have been deprecated for the new hooks.

- useRouteData -> useLoaderData
- usePendingFormSubmit -> useTransition().submission
- usePendingLocation -> useTransition().location

Also includes a helping of docs updates

Closes #169, #151, #175, #128, #54, #208

Author: ryanflorence

packages/remix-dev/__tests__/readConfig-test.ts

@@ -71,6 +71,13 @@ describe("readConfig", () => {
             "parentId": "root",
             "path": "action-errors-self-boundary",
           },
+          "routes/actions": Object {
+            "caseSensitive": false,
+            "file": "routes/actions.tsx",
+            "id": "routes/actions",
+            "parentId": "root",
+            "path": "actions",
+          },
           "routes/blog/hello-world": Object {
             "caseSensitive": false,
             "file": "routes/blog/hello-world.mdx",
@@ -106,6 +113,13 @@ describe("readConfig", () => {
             "parentId": "root",
             "path": "empty",
           },
+          "routes/fetchers": Object {
+            "caseSensitive": false,
+            "file": "routes/fetchers.tsx",
+            "id": "routes/fetchers",
+            "parentId": "root",
+            "path": "fetchers",
+          },
           "routes/gists": Object {
             "caseSensitive": false,
             "file": "routes/gists.jsx",

packages/remix-dev/compiler.ts

@@ -431,7 +431,8 @@ const browserSafeRouteExports: { [name: string]: boolean } = {
   default: true,
   handle: true,
   links: true,
-  meta: true
+  meta: true,
+  shouldReload: true
 };
 
 /**

packages/remix-dev/compiler/assets.ts

@@ -24,8 +24,9 @@ interface AssetsManifest {
       caseSensitive?: boolean;
       module: string;
       imports?: string[];
-      hasAction?: boolean;
-      hasLoader?: boolean;
+      hasAction: boolean;
+      hasLoader: boolean;
+      hasErrorBoundary: boolean;
     };
   };
 }
@@ -90,7 +91,8 @@ export async function createAssetsManifest(
         module: resolveUrl(key),
         imports: resolveImports(output.imports),
         hasAction: sourceExports.includes("action"),
-        hasLoader: sourceExports.includes("loader")
+        hasLoader: sourceExports.includes("loader"),
+        hasErrorBoundary: sourceExports.includes("ErrorBoundary")
       };
     }
   }

packages/remix-server-runtime/__tests__/data-test.ts

@@ -1,37 +1,6 @@
 import { ServerBuild } from "../build";
 import { createRequestHandler } from "../server";
 
-describe("actions", () => {
-  it("returns a redirect when actions return a string", async () => {
-    let location = "/just/a/string";
-    let action = async () => location;
-
-    let routeId = "routes/random";
-    let build = ({
-      routes: {
-        [routeId]: {
-          id: routeId,
-          path: "/random",
-          module: { action }
-        }
-      }
-    } as unknown) as ServerBuild;
-
-    let handler = createRequestHandler(build);
-
-    let request = new Request("http://example.com/random", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json"
-      }
-    });
-
-    let res = await handler(request);
-    expect(res.status).toBe(303);
-    expect(res.headers.get("location")).toBe(location);
-  });
-});
-
 describe("loaders", () => {
   // so that HTML/Fetch requests are the same, and so redirects don't hang on to
   // this param for no reason

packages/remix-server-runtime/data.ts

@@ -32,7 +32,7 @@ export async function loadRouteData(
   if (result === undefined) {
     throw new Error(
       `You defined a loader for route "${routeId}" but didn't return ` +
-        `anything from your \`loader\` function. We can't do everything for you! 😅`
+        `anything from your \`loader\` function. Please return a value or \`null\`.`
     );
   }
 
@@ -58,25 +58,14 @@ export async function callRouteAction(
 
   let result = await routeModule.action({ request, context, params });
 
-  if (typeof result === "string") {
-    return new Response("", {
-      status: 303,
-      headers: { Location: result }
-    });
-  }
-
-  if (!isResponse(result) || result.headers.get("Location") == null) {
+  if (result === undefined) {
     throw new Error(
-      `You made a ${request.method} request to ${request.url} but did not return ` +
-        `a redirect. Please \`return newUrlString\` or \`return redirect(newUrl)\` from ` +
-        `your \`action\` function to avoid reposts when users click the back button.`
+      `You defined an action for route "${routeId}" but didn't return ` +
+        `anything from your \`action\` function. Please return a value or \`null\`.`
     );
   }
 
-  return new Response("", {
-    status: 303,
-    headers: result.headers
-  });
+  return isResponse(result) ? result : json(result);
 }
 
 function isResponse(value: any): value is Response {

packages/remix-server-runtime/entry.ts

@@ -14,6 +14,7 @@ export interface EntryContext {
   manifest: AssetsManifest;
   matches: RouteMatch<EntryRoute>[];
   routeData: RouteData;
+  actionData?: RouteData;
   routeModules: RouteModules<EntryRouteModule>;
   serverHandoffString?: string;
 }

packages/remix-server-runtime/headers.ts

@@ -7,23 +7,26 @@ import type { RouteMatch } from "./routeMatching";
 export function getDocumentHeaders(
   build: ServerBuild,
   matches: RouteMatch<ServerRoute>[],
-  routeLoaderResponses: Response[]
+  routeLoaderResponses: Response[],
+  actionResponse?: Response
 ): Headers {
   return matches.reduce((parentHeaders, match, index) => {
     let routeModule = build.routes[match.route.id].module;
     let loaderHeaders = routeLoaderResponses[index]
       ? routeLoaderResponses[index].headers
       : new Headers();
+    let actionHeaders = actionResponse ? actionResponse.headers : new Headers();
     let headers = new Headers(
       routeModule.headers
         ? typeof routeModule.headers === "function"
-          ? routeModule.headers({ loaderHeaders, parentHeaders })
+          ? routeModule.headers({ loaderHeaders, parentHeaders, actionHeaders })
           : routeModule.headers
         : undefined
     );
 
     // Automatically preserve Set-Cookie headers that were set either by the
     // loader or by a parent route.
+    prependCookies(actionHeaders, headers);
     prependCookies(loaderHeaders, headers);
     prependCookies(parentHeaders, headers);
 

packages/remix-server-runtime/routeData.ts

@@ -18,3 +18,7 @@ export async function createRouteData(
     return memo;
   }, {} as RouteData);
 }
+
+export async function createActionData(response: Response): Promise<RouteData> {
+  return extractData(response);
+}

packages/remix-server-runtime/routeModules.ts

@@ -15,9 +15,8 @@ export interface RouteModules<RouteModule> {
  */
 export interface ActionFunction {
   (args: { request: Request; context: AppLoadContext; params: Params }):
-    | Promise<Response | string>
-    | Response
-    | string;
+    | Promise<Response>
+    | Response;
 }
 
 /**
@@ -30,9 +29,11 @@ export type ErrorBoundaryComponent = ComponentType<{ error: Error }>;
  * will be merged with (and take precedence over) headers from parent routes.
  */
 export interface HeadersFunction {
-  (args: { loaderHeaders: Headers; parentHeaders: Headers }):
-    | Headers
-    | HeadersInit;
+  (args: {
+    loaderHeaders: Headers;
+    parentHeaders: Headers;
+    actionHeaders: Headers;
+  }): Headers | HeadersInit;
 }
 
 /**

packages/remix-server-runtime/routes.ts

@@ -14,8 +14,9 @@ interface Route {
 }
 
 export interface EntryRoute extends Route {
-  hasAction?: boolean;
-  hasLoader?: boolean;
+  hasAction: boolean;
+  hasLoader: boolean;
+  hasErrorBoundary: boolean;
   imports?: string[];
   module: string;
 }

packages/remix-server-runtime/server.ts

@@ -13,7 +13,7 @@ import { matchServerRoutes } from "./routeMatching";
 import { ServerMode, isServerMode } from "./mode";
 import type { ServerRoute } from "./routes";
 import { createRoutes } from "./routes";
-import { createRouteData } from "./routeData";
+import { createActionData, createRouteData } from "./routeData";
 import { json } from "./responses";
 import { createServerHandoffString } from "./serverHandoff";
 
@@ -157,18 +157,19 @@ async function handleDocumentRequest(
   };
 
   let actionErrored: boolean = false;
+  let actionResponse: Response | undefined;
 
   if (isActionRequest(request)) {
     let leafMatch = matches[matches.length - 1];
     try {
-      let actionResponse = await callRouteAction(
+      actionResponse = await callRouteAction(
         build,
         leafMatch.route.id,
-        request,
+        request.clone(),
         loadContext,
         leafMatch.params
       );
-      if (actionResponse && isRedirectResponse(actionResponse)) {
+      if (isRedirectResponse(actionResponse)) {
         return actionResponse;
       }
     } catch (error) {
@@ -183,7 +184,10 @@ async function handleDocumentRequest(
 
   let matchesToLoad = actionErrored
     ? getMatchesUpToDeepestErrorBoundary(
-        // get rid of the action, we know we don't want to call it's loader
+        // get rid of the action, we don't want to call it's loader either
+        // because we'll be rendering the error boundary, if you can get access
+        // to the loader data in the error boundary then how the heck is it
+        // supposed to deal with errors in the loader, too?
         matches.slice(0, -1)
       )
     : matches;
@@ -278,18 +282,27 @@ async function handleDocumentRequest(
   let headers = getDocumentHeaders(
     build,
     renderableMatches,
-    routeLoaderResponses
+    routeLoaderResponses,
+    actionResponse
   );
   let entryMatches = createEntryMatches(renderableMatches, build.assets.routes);
   let routeData = await createRouteData(
     renderableMatches,
     routeLoaderResponses
   );
+  let actionData = actionResponse
+    ? {
+        [matches[matches.length - 1].route.id]: await createActionData(
+          actionResponse
+        )
+      }
+    : undefined;
   let routeModules = createEntryRouteModules(build.routes);
   let serverHandoff = {
     matches: entryMatches,
     componentDidCatchEmulator,
-    routeData
+    routeData,
+    actionData
   };
   let entryContext: EntryContext = {
     ...serverHandoff,