Enable pass-through requests with unstable_url (#234)

Switch routing redirects and docs loaders to React Router's normalized unstable_url so behavior stays consistent when raw request URLs include data-request internals.

Author: brookslybrand

app/modules/http-utils/ensure-secure.ts

@@ -1,11 +1,14 @@
 import { redirect, type MiddlewareFunction } from "react-router";
 
-export const ensureSecure: MiddlewareFunction = async ({ request }) => {
+export const ensureSecure: MiddlewareFunction = async ({
+  request,
+  unstable_url,
+}) => {
   let proto = request.headers.get("x-forwarded-proto");
   // this indirectly allows `http://localhost` because there is no
   // "x-forwarded-proto" in the local server headers
   if (proto === "http") {
-    let secureUrl = new URL(request.url);
+    let secureUrl = new URL(unstable_url);
     secureUrl.protocol = "https:";
     throw redirect(secureUrl.toString());
   }

app/modules/http-utils/remove-slashes.ts

@@ -1,9 +1,9 @@
 import { redirect, type MiddlewareFunction } from "react-router";
 
 export const removeTrailingSlashes: MiddlewareFunction = async ({
-  request,
+  unstable_url,
 }) => {
-  let url = new URL(request.url);
+  let url = new URL(unstable_url);
   if (url.pathname.endsWith("/") && url.pathname !== "/") {
     url.pathname = url.pathname.slice(0, -1);
     throw redirect(url.toString());

app/modules/redirects/.server/index.ts

@@ -13,11 +13,10 @@ import { getRedirects } from "./get-redirects";
  * /docs/*  /api/*
  * ```
  *
- * @param request Web Fetch Request to possibly redirect
+ * @param unstable_url Normalized location URL (see `future.unstable_passThroughRequests`)
  */
-export const handleRedirects: MiddlewareFunction = async ({ request }) => {
+export const handleRedirects: MiddlewareFunction = async ({ unstable_url }) => {
   let redirects = await getRedirects();
-  let url = new URL(request.url);
-  let response = await checkUrl(url.pathname, redirects);
+  let response = await checkUrl(unstable_url.pathname, redirects);
   if (response) throw response;
 };

app/pages/doc.tsx

@@ -14,8 +14,8 @@ import type { Route } from "./+types/doc";
 
 export { ErrorBoundary } from "~/components/doc-error-boundary";
 
-export async function loader({ request, params }: Route.LoaderArgs) {
-  let url = new URL(request.url);
+export async function loader({ unstable_url, params }: Route.LoaderArgs) {
+  let url = new URL(unstable_url);
   let splat = params["*"] ?? "";
 
   const { ref, slug, githubPath, githubEditPath } = parseDocUrl(url, splat);

app/pages/docs-layout.tsx

@@ -15,8 +15,8 @@ import { useCodeBlockCopyButton } from "~/ui/utils";
 
 import docsCss from "~/styles/docs.css?url";
 
-export async function loader({ request, params }: Route.LoaderArgs) {
-  let url = new URL(request.url);
+export async function loader({ unstable_url, params }: Route.LoaderArgs) {
+  let url = new URL(unstable_url);
   if (!url.pathname.endsWith("/")) {
     url.pathname += "/";
   }

app/pages/redirect-major-version.tsx

@@ -3,8 +3,8 @@ import { getRepoTags } from "~/modules/gh-docs/.server";
 import * as semver from "semver";
 import type { Route } from "./+types/redirect-major-version";
 
-export async function loader({ request }: Route.LoaderArgs) {
-  let url = new URL(request.url);
+export async function loader({ unstable_url }: Route.LoaderArgs) {
+  let url = new URL(unstable_url);
   let [, s, ...rest] = url.pathname.split("/");
 
   let versions = await getRepoTags();

react-router.config.ts

@@ -3,6 +3,7 @@ import type { Config } from "@react-router/dev/config";
 export default {
   future: {
     unstable_optimizeDeps: true,
+    unstable_passThroughRequests: true,
     v8_splitRouteModules: "enforce",
     v8_middleware: true,
     v8_viteEnvironmentApi: true,