react-router 7.15.1 → 8.3.0

package/dist/production/vendor/turbo-stream-v2/flatten.js

@@ -0,0 +1,159 @@
+/**
+ * react-router v8.3.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+//#region vendor/turbo-stream-v2/flatten.ts
+const TIME_LIMIT_MS = 1;
+const getNow = () => Date.now();
+const yieldToMain = () => new Promise((resolve) => setTimeout(resolve, 0));
+async function flatten(input) {
+	const { indices } = this;
+	const existing = indices.get(input);
+	if (existing) return [existing];
+	if (input === void 0) return -7;
+	if (input === null) return -5;
+	if (Number.isNaN(input)) return -2;
+	if (input === Number.POSITIVE_INFINITY) return -6;
+	if (input === Number.NEGATIVE_INFINITY) return -3;
+	if (input === 0 && 1 / input < 0) return -4;
+	const index = this.index++;
+	indices.set(input, index);
+	const stack = [[input, index]];
+	await stringify.call(this, stack);
+	return index;
+}
+async function stringify(stack) {
+	const { deferred, indices, plugins, postPlugins } = this;
+	const str = this.stringified;
+	let lastYieldTime = getNow();
+	const flattenValue = (value) => {
+		const existing = indices.get(value);
+		if (existing) return [existing];
+		if (value === void 0) return -7;
+		if (value === null) return -5;
+		if (Number.isNaN(value)) return -2;
+		if (value === Number.POSITIVE_INFINITY) return -6;
+		if (value === Number.NEGATIVE_INFINITY) return -3;
+		if (value === 0 && 1 / value < 0) return -4;
+		const index = this.index++;
+		indices.set(value, index);
+		stack.push([value, index]);
+		return index;
+	};
+	let i = 0;
+	while (stack.length > 0) {
+		const now = getNow();
+		if (++i % 6e3 === 0 && now - lastYieldTime >= TIME_LIMIT_MS) {
+			await yieldToMain();
+			lastYieldTime = getNow();
+		}
+		const [input, index] = stack.pop();
+		const partsForObj = (obj) => Object.keys(obj).map((k) => `"_${flattenValue(k)}":${flattenValue(obj[k])}`).join(",");
+		let error = null;
+		switch (typeof input) {
+			case "boolean":
+			case "number":
+			case "string":
+				str[index] = JSON.stringify(input);
+				break;
+			case "bigint":
+				str[index] = `["B","${input}"]`;
+				break;
+			case "symbol": {
+				const keyFor = Symbol.keyFor(input);
+				if (!keyFor) error = /* @__PURE__ */ new Error("Cannot encode symbol unless created with Symbol.for()");
+				else str[index] = `["Y",${JSON.stringify(keyFor)}]`;
+				break;
+			}
+			case "object": {
+				if (!input) {
+					str[index] = `-5`;
+					break;
+				}
+				const isArray = Array.isArray(input);
+				let pluginHandled = false;
+				if (!isArray && plugins) for (const plugin of plugins) {
+					const pluginResult = plugin(input);
+					if (Array.isArray(pluginResult)) {
+						pluginHandled = true;
+						const [pluginIdentifier, ...rest] = pluginResult;
+						str[index] = `[${JSON.stringify(pluginIdentifier)}`;
+						if (rest.length > 0) str[index] += `,${rest.map((v) => flattenValue(v)).join(",")}`;
+						str[index] += "]";
+						break;
+					}
+				}
+				if (!pluginHandled) {
+					let result = isArray ? "[" : "{";
+					if (isArray) {
+						for (let i = 0; i < input.length; i++) result += (i ? "," : "") + (i in input ? flattenValue(input[i]) : -1);
+						str[index] = `${result}]`;
+					} else if (input instanceof Date) {
+						const dateTime = input.getTime();
+						str[index] = `["D",${Number.isNaN(dateTime) ? JSON.stringify("invalid") : dateTime}]`;
+					} else if (input instanceof URL) str[index] = `["U",${JSON.stringify(input.href)}]`;
+					else if (input instanceof RegExp) str[index] = `["R",${JSON.stringify(input.source)},${JSON.stringify(input.flags)}]`;
+					else if (input instanceof Set) if (input.size > 0) str[index] = `["S",${[...input].map((val) => flattenValue(val)).join(",")}]`;
+					else str[index] = `["S"]`;
+					else if (input instanceof Map) if (input.size > 0) str[index] = `["M",${[...input].flatMap(([k, v]) => [flattenValue(k), flattenValue(v)]).join(",")}]`;
+					else str[index] = `["M"]`;
+					else if (input instanceof Promise) {
+						str[index] = `["P",${index}]`;
+						deferred[index] = input;
+					} else if (input instanceof Error) {
+						str[index] = `["E",${JSON.stringify(input.message)}`;
+						if (input.name !== "Error") str[index] += `,${JSON.stringify(input.name)}`;
+						str[index] += "]";
+					} else if (Object.getPrototypeOf(input) === null) str[index] = `["N",{${partsForObj(input)}}]`;
+					else if (isPlainObject(input)) str[index] = `{${partsForObj(input)}}`;
+					else error = /* @__PURE__ */ new Error("Cannot encode object with prototype");
+				}
+				break;
+			}
+			default: {
+				const isArray = Array.isArray(input);
+				let pluginHandled = false;
+				if (!isArray && plugins) for (const plugin of plugins) {
+					const pluginResult = plugin(input);
+					if (Array.isArray(pluginResult)) {
+						pluginHandled = true;
+						const [pluginIdentifier, ...rest] = pluginResult;
+						str[index] = `[${JSON.stringify(pluginIdentifier)}`;
+						if (rest.length > 0) str[index] += `,${rest.map((v) => flattenValue(v)).join(",")}`;
+						str[index] += "]";
+						break;
+					}
+				}
+				if (!pluginHandled) error = /* @__PURE__ */ new Error("Cannot encode function or unexpected type");
+			}
+		}
+		if (error) {
+			let pluginHandled = false;
+			if (postPlugins) for (const plugin of postPlugins) {
+				const pluginResult = plugin(input);
+				if (Array.isArray(pluginResult)) {
+					pluginHandled = true;
+					const [pluginIdentifier, ...rest] = pluginResult;
+					str[index] = `[${JSON.stringify(pluginIdentifier)}`;
+					if (rest.length > 0) str[index] += `,${rest.map((v) => flattenValue(v)).join(",")}`;
+					str[index] += "]";
+					break;
+				}
+			}
+			if (!pluginHandled) throw error;
+		}
+	}
+}
+const objectProtoNames = Object.getOwnPropertyNames(Object.prototype).sort().join("\0");
+function isPlainObject(thing) {
+	const proto = Object.getPrototypeOf(thing);
+	return proto === Object.prototype || proto === null || Object.getOwnPropertyNames(proto).sort().join("\0") === objectProtoNames;
+}
+//#endregion
+export { flatten };

package/dist/production/vendor/turbo-stream-v2/turbo-stream.js

@@ -0,0 +1,179 @@
+/**
+ * react-router v8.3.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+import "../../lib/router/utils.js";
+import { Deferred, createLineSplittingTransform } from "./utils.js";
+import { flatten } from "./flatten.js";
+import { unflatten } from "./unflatten.js";
+//#region vendor/turbo-stream-v2/turbo-stream.ts
+async function decode(readable, options) {
+	const { plugins } = options ?? {};
+	const done = new Deferred();
+	const reader = readable.pipeThrough(createLineSplittingTransform()).getReader();
+	const decoder = {
+		values: [],
+		hydrated: [],
+		deferred: {},
+		plugins
+	};
+	const decoded = await decodeInitial.call(decoder, reader);
+	let donePromise = done.promise;
+	if (decoded.done) done.resolve();
+	else donePromise = decodeDeferred.call(decoder, reader).then(done.resolve).catch((reason) => {
+		for (const deferred of Object.values(decoder.deferred)) deferred.reject(reason);
+		done.reject(reason);
+	});
+	return {
+		done: donePromise.then(() => reader.closed),
+		value: decoded.value
+	};
+}
+async function decodeInitial(reader) {
+	const read = await reader.read();
+	if (!read.value) throw new SyntaxError();
+	let line;
+	try {
+		line = JSON.parse(read.value);
+	} catch (reason) {
+		throw new SyntaxError();
+	}
+	return {
+		done: read.done,
+		value: unflatten.call(this, line)
+	};
+}
+async function decodeDeferred(reader) {
+	let read = await reader.read();
+	while (!read.done) {
+		if (!read.value) continue;
+		const line = read.value;
+		switch (line[0]) {
+			case "P": {
+				const colonIndex = line.indexOf(":");
+				const deferredId = Number(line.slice(1, colonIndex));
+				const deferred = this.deferred[deferredId];
+				if (!deferred) throw new Error(`Deferred ID ${deferredId} not found in stream`);
+				const lineData = line.slice(colonIndex + 1);
+				let jsonLine;
+				try {
+					jsonLine = JSON.parse(lineData);
+				} catch (reason) {
+					throw new SyntaxError();
+				}
+				const value = unflatten.call(this, jsonLine);
+				deferred.resolve(value);
+				break;
+			}
+			case "E": {
+				const colonIndex = line.indexOf(":");
+				const deferredId = Number(line.slice(1, colonIndex));
+				const deferred = this.deferred[deferredId];
+				if (!deferred) throw new Error(`Deferred ID ${deferredId} not found in stream`);
+				const lineData = line.slice(colonIndex + 1);
+				let jsonLine;
+				try {
+					jsonLine = JSON.parse(lineData);
+				} catch (reason) {
+					throw new SyntaxError();
+				}
+				const value = unflatten.call(this, jsonLine);
+				deferred.reject(value);
+				break;
+			}
+			default: throw new SyntaxError();
+		}
+		read = await reader.read();
+	}
+}
+function encode(input, options) {
+	const { onComplete, plugins, postPlugins, signal } = options ?? {};
+	const encoder = {
+		deferred: {},
+		index: 0,
+		indices: /* @__PURE__ */ new Map(),
+		stringified: [],
+		plugins,
+		postPlugins,
+		signal
+	};
+	const textEncoder = new TextEncoder();
+	let lastSentIndex = 0;
+	return new ReadableStream({ async start(controller) {
+		const id = await flatten.call(encoder, input);
+		if (Array.isArray(id)) throw new Error("This should never happen");
+		if (id < 0) controller.enqueue(textEncoder.encode(`${id}\n`));
+		else {
+			controller.enqueue(textEncoder.encode(`[${encoder.stringified.join(",")}]\n`));
+			lastSentIndex = encoder.stringified.length - 1;
+		}
+		const seenPromises = /* @__PURE__ */ new WeakSet();
+		let processingChain = Promise.resolve();
+		if (Object.keys(encoder.deferred).length) {
+			let raceDone;
+			const racePromise = new Promise((resolve, reject) => {
+				raceDone = resolve;
+				if (signal) {
+					const rejectPromise = () => reject(signal.reason || /* @__PURE__ */ new Error("Signal was aborted."));
+					if (signal.aborted) rejectPromise();
+					else signal.addEventListener("abort", (event) => {
+						rejectPromise();
+					});
+				}
+			});
+			while (Object.keys(encoder.deferred).length > 0) {
+				for (const [deferredId, deferred] of Object.entries(encoder.deferred)) {
+					if (seenPromises.has(deferred)) continue;
+					seenPromises.add(encoder.deferred[Number(deferredId)] = Promise.race([racePromise, deferred]).then((resolved) => {
+						processingChain = processingChain.then(async () => {
+							const id = await flatten.call(encoder, resolved);
+							if (Array.isArray(id)) {
+								controller.enqueue(textEncoder.encode(`P${deferredId}:[["Z",${id[0]}]]\n`));
+								encoder.index++;
+								lastSentIndex++;
+							} else if (id < 0) controller.enqueue(textEncoder.encode(`P${deferredId}:${id}\n`));
+							else {
+								const values = encoder.stringified.slice(lastSentIndex + 1).join(",");
+								controller.enqueue(textEncoder.encode(`P${deferredId}:[${values}]\n`));
+								lastSentIndex = encoder.stringified.length - 1;
+							}
+						});
+						return processingChain;
+					}, (reason) => {
+						processingChain = processingChain.then(async () => {
+							if (!reason || typeof reason !== "object" || !(reason instanceof Error)) reason = /* @__PURE__ */ new Error("An unknown error occurred");
+							const id = await flatten.call(encoder, reason);
+							if (Array.isArray(id)) {
+								controller.enqueue(textEncoder.encode(`E${deferredId}:[["Z",${id[0]}]]\n`));
+								encoder.index++;
+								lastSentIndex++;
+							} else if (id < 0) controller.enqueue(textEncoder.encode(`E${deferredId}:${id}\n`));
+							else {
+								const values = encoder.stringified.slice(lastSentIndex + 1).join(",");
+								controller.enqueue(textEncoder.encode(`E${deferredId}:[${values}]\n`));
+								lastSentIndex = encoder.stringified.length - 1;
+							}
+						});
+						return processingChain;
+					}).finally(() => {
+						delete encoder.deferred[Number(deferredId)];
+					}));
+				}
+				await Promise.race(Object.values(encoder.deferred));
+			}
+			raceDone();
+		}
+		await Promise.all(Object.values(encoder.deferred));
+		await processingChain;
+		controller.close();
+		onComplete?.();
+	} });
+}
+//#endregion
+export { decode, encode };

package/dist/production/vendor/turbo-stream-v2/unflatten.js

@@ -0,0 +1,199 @@
+/**
+ * react-router v8.3.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+import { SUPPORTED_ERROR_TYPES } from "../../lib/router/utils.js";
+import { Deferred } from "./utils.js";
+//#region vendor/turbo-stream-v2/unflatten.ts
+const globalObj = typeof window !== "undefined" ? window : typeof globalThis !== "undefined" ? globalThis : void 0;
+function unflatten(parsed) {
+	const { hydrated, values } = this;
+	if (typeof parsed === "number") return hydrate.call(this, parsed);
+	if (!Array.isArray(parsed) || !parsed.length) throw new SyntaxError();
+	const startIndex = values.length;
+	for (const value of parsed) values.push(value);
+	hydrated.length = values.length;
+	return hydrate.call(this, startIndex);
+}
+function hydrate(index) {
+	const { hydrated, values, deferred, plugins } = this;
+	let result;
+	const stack = [[index, (v) => {
+		result = v;
+	}]];
+	let postRun = [];
+	while (stack.length > 0) {
+		const [index, set] = stack.pop();
+		switch (index) {
+			case -7:
+				set(void 0);
+				continue;
+			case -5:
+				set(null);
+				continue;
+			case -2:
+				set(NaN);
+				continue;
+			case -6:
+				set(Infinity);
+				continue;
+			case -3:
+				set(-Infinity);
+				continue;
+			case -4:
+				set(-0);
+				continue;
+		}
+		if (hydrated[index]) {
+			set(hydrated[index]);
+			continue;
+		}
+		const value = values[index];
+		if (!value || typeof value !== "object") {
+			hydrated[index] = value;
+			set(value);
+			continue;
+		}
+		if (Array.isArray(value)) if (typeof value[0] === "string") {
+			const [type, b, c] = value;
+			switch (type) {
+				case "D":
+					set(hydrated[index] = new Date(b));
+					continue;
+				case "U":
+					set(hydrated[index] = new URL(b));
+					continue;
+				case "B":
+					set(hydrated[index] = BigInt(b));
+					continue;
+				case "R":
+					set(hydrated[index] = new RegExp(b, c));
+					continue;
+				case "Y":
+					set(hydrated[index] = Symbol.for(b));
+					continue;
+				case "S":
+					const newSet = /* @__PURE__ */ new Set();
+					hydrated[index] = newSet;
+					for (let i = value.length - 1; i > 0; i--) stack.push([value[i], (v) => {
+						newSet.add(v);
+					}]);
+					set(newSet);
+					continue;
+				case "M":
+					const map = /* @__PURE__ */ new Map();
+					hydrated[index] = map;
+					for (let i = value.length - 2; i > 0; i -= 2) {
+						const r = [];
+						stack.push([value[i + 1], (v) => {
+							r[1] = v;
+						}]);
+						stack.push([value[i], (k) => {
+							r[0] = k;
+						}]);
+						postRun.push(() => {
+							map.set(r[0], r[1]);
+						});
+					}
+					set(map);
+					continue;
+				case "N":
+					const obj = Object.create(null);
+					hydrated[index] = obj;
+					for (const key of Object.keys(b).reverse()) {
+						const r = [];
+						stack.push([b[key], (v) => {
+							r[1] = v;
+						}]);
+						stack.push([Number(key.slice(1)), (k) => {
+							r[0] = k;
+						}]);
+						postRun.push(() => {
+							obj[r[0]] = r[1];
+						});
+					}
+					set(obj);
+					continue;
+				case "P":
+					if (hydrated[b]) set(hydrated[index] = hydrated[b]);
+					else {
+						const d = new Deferred();
+						deferred[b] = d;
+						set(hydrated[index] = d.promise);
+					}
+					continue;
+				case "E":
+					const [, message, errorType] = value;
+					let error = errorType && globalObj && SUPPORTED_ERROR_TYPES.includes(errorType) && errorType in globalObj && typeof globalObj[errorType] === "function" ? new globalObj[errorType](message) : new Error(message);
+					hydrated[index] = error;
+					set(error);
+					continue;
+				case "Z":
+					set(hydrated[index] = hydrated[b]);
+					continue;
+				default:
+					if (Array.isArray(plugins)) {
+						const r = [];
+						const vals = value.slice(1);
+						for (let i = 0; i < vals.length; i++) {
+							const v = vals[i];
+							stack.push([v, (v) => {
+								r[i] = v;
+							}]);
+						}
+						postRun.push(() => {
+							for (const plugin of plugins) {
+								const result = plugin(value[0], ...r);
+								if (result) {
+									set(hydrated[index] = result.value);
+									return;
+								}
+							}
+							throw new SyntaxError();
+						});
+						continue;
+					}
+					throw new SyntaxError();
+			}
+		} else {
+			const array = [];
+			hydrated[index] = array;
+			for (let i = 0; i < value.length; i++) {
+				const n = value[i];
+				if (n !== -1) stack.push([n, (v) => {
+					array[i] = v;
+				}]);
+			}
+			set(array);
+			continue;
+		}
+		else {
+			const object = {};
+			hydrated[index] = object;
+			for (const key of Object.keys(value).reverse()) {
+				const r = [];
+				stack.push([value[key], (v) => {
+					r[1] = v;
+				}]);
+				stack.push([Number(key.slice(1)), (k) => {
+					r[0] = k;
+				}]);
+				postRun.push(() => {
+					object[r[0]] = r[1];
+				});
+			}
+			set(object);
+			continue;
+		}
+	}
+	while (postRun.length > 0) postRun.pop()();
+	return result;
+}
+//#endregion
+export { unflatten };

package/dist/production/vendor/turbo-stream-v2/utils.js

@@ -0,0 +1,39 @@
+/**
+ * react-router v8.3.0
+ *
+ * Copyright (c) Remix Software Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+//#region vendor/turbo-stream-v2/utils.ts
+var Deferred = class {
+	promise;
+	resolve;
+	reject;
+	constructor() {
+		this.promise = new Promise((resolve, reject) => {
+			this.resolve = resolve;
+			this.reject = reject;
+		});
+	}
+};
+function createLineSplittingTransform() {
+	const decoder = new TextDecoder();
+	let leftover = "";
+	return new TransformStream({
+		transform(chunk, controller) {
+			const str = decoder.decode(chunk, { stream: true });
+			const parts = (leftover + str).split("\n");
+			leftover = parts.pop() || "";
+			for (const part of parts) controller.enqueue(part);
+		},
+		flush(controller) {
+			if (leftover) controller.enqueue(leftover);
+		}
+	});
+}
+//#endregion
+export { Deferred, createLineSplittingTransform };

package/docs/explanation/backend-for-frontend.md

@@ -0,0 +1,50 @@
+---
+title: Backend For Frontend
+---
+
+# Backend For Frontend
+
+[MODES: framework]
+
+<br/>
+<br/>
+
+While React Router can serve as your fullstack application, it also fits perfectly into the "Backend for Frontend" architecture.
+
+The BFF strategy employs a web server with a job scoped to serving the frontend web app and connecting it to the services it needs: your database, mailer, job queues, existing backend APIs (REST, GraphQL), etc. Instead of your UI integrating directly from the browser to these services, it connects to the BFF, and the BFF connects to your services.
+
+Mature apps already have a lot of backend application code in Ruby, Elixir, PHP, etc., and there's no reason to justify migrating it all to a server-side JavaScript runtime just to get the benefits of React Router. Instead, you can use your React Router app as a backend for your frontend.
+
+You can use `fetch` right from your loaders and actions to your backend.
+
+```tsx lines=[7,13,17]
+import escapeHtml from "escape-html";
+
+export async function loader() {
+  const apiUrl = "https://api.example.com/some-data.json";
+  const res = await fetch(apiUrl, {
+    headers: {
+      Authorization: `Bearer ${process.env.API_TOKEN}`,
+    },
+  });
+
+  const data = await res.json();
+
+  const prunedData = data.map((record) => {
+    return {
+      id: record.id,
+      title: record.title,
+      formattedBody: escapeHtml(record.content),
+    };
+  });
+  return { prunedData };
+}
+```
+
+There are several benefits of this approach vs. fetching directly from the browser. The highlighted lines above show how you can:
+
+1. Simplify third-party integrations and keep tokens and secrets out of client bundles
+2. Prune the data down to send less kB over the network, speeding up your app significantly
+3. Move a lot of code from browser bundles to the server, like `escapeHtml`, which speeds up your app. Additionally, moving code to the server usually makes your code easier to maintain since server-side code doesn't have to worry about UI states for async operations
+
+Again, React Router can be used as your only server by talking directly to the database and other services with server-side JavaScript APIs, but it also works perfectly as a backend for your frontend. Go ahead and keep your existing API server for application logic and let React Router connect the UI to it.

package/docs/explanation/code-splitting.md

@@ -0,0 +1,77 @@
+---
+title: Automatic Code Splitting
+---
+
+# Automatic Code Splitting
+
+[MODES: framework]
+
+<br/>
+<br/>
+
+When using React Router's framework features, your application is automatically code split to improve the performance of initial load times when users visit your application.
+
+## Code Splitting by Route
+
+Consider this simple route config:
+
+```tsx filename=app/routes.ts
+import {
+  type RouteConfig,
+  route,
+} from "@react-router/dev/routes";
+
+export default [
+  route("/contact", "./contact.tsx"),
+  route("/about", "./about.tsx"),
+] satisfies RouteConfig;
+```
+
+Instead of bundling all routes into a single giant build, the modules referenced (`contact.tsx` and `about.tsx`) become entry points to the bundler.
+
+Because these entry points are coupled to URL segments, React Router knows just from a URL which bundles are needed in the browser, and more importantly, which are not.
+
+If the user visits `"/about"` then the bundles for `about.tsx` will be loaded but not `contact.tsx`. This drastically reduces the JavaScript footprint for initial page loads and speeds up your application.
+
+## Route Module Splitting
+
+React Router can also split client-side route exports (`clientLoader`, `clientAction`, `clientMiddleware`, `HydrateFallback`) into separate chunks that can be loaded independently from the route component.
+
+This allows these exports to be fetched and executed while the component code is still downloading, improving performance for client-side data loading.
+
+This behavior is enabled by default. You can set `splitRouteModules` to `false` to opt out, or `"enforce"` to require all routes to be splittable. The `"enforce"` option will cause build failures for routes that cannot be split due to shared code.
+
+```ts filename=react-router.config.ts
+import type { Config } from "@react-router/dev/config";
+
+export default {
+  splitRouteModules: false,
+} satisfies Config;
+```
+
+## Removal of Server Code
+
+Any server-only [Route Module APIs][route-module] will be removed from the bundles. Consider this route module:
+
+```tsx
+export async function loader() {
+  return { message: "hello" };
+}
+
+export async function action() {
+  console.log(Date.now());
+  return { ok: true };
+}
+
+export async function headers() {
+  return { "Cache-Control": "max-age=300" };
+}
+
+export default function Component({ loaderData }) {
+  return <div>{loaderData.message}</div>;
+}
+```
+
+After building for the browser, only the `Component` will still be in the bundle, so you can use server-only code in the other module exports.
+
+[route-module]: ../start/framework/route-module