Remix 工具

module.exports = {
	serverDependenciesToBundle: [
		/^remix-utils.*/,
		// If you installed is-ip optional dependency you will need these too
		"is-ip",
		"ip-regex",
		"super-regex",
		"clone-regexp",
		"function-timeout",
		"time-span",
		"convert-hrtime",
		"is-regexp",
	],
};

ssr: {
      noExternal: ["remix-utils"],
    },

import { eventStream, useEventSource } from "remix-utils";

import { eventStream } from "remix-utils/sse/server";
import { useEventSource } from "remix-utils/sse/react";

import { promiseHash } from "remix-utils/promise";

export async function loader({ request }: LoaderFunctionArgs) {
	return json(
		await promiseHash({
			user: getUser(request),
			posts: getPosts(request),
		}),
	);
}

import { promiseHash } from "remix-utils/promise";

export async function loader({ request }: LoaderFunctionArgs) {
	return json(
		await promiseHash({
			user: getUser(request),
			posts: promiseHash({
				list: getPosts(request),
				comments: promiseHash({
					list: getComments(request),
					likes: getLikes(request),
				}),
			}),
		}),
	);
}

import { timeout } from "remix-utils/promise";

try {
	let result = await timeout(fetch("https://example.com"), { ms: 100 });
} catch (error) {
	if (error instanceof TimeoutError) {
		// Handle timeout
	}
}

import { timeout } from "remix-utils/promise";

try {
	let controller = new AbortController();
	let result = await timeout(
		fetch("https://example.com", { signal: controller.signal }),
		{ ms: 100, controller },
	);
} catch (error) {
	if (error instanceof TimeoutError) {
		// Handle timeout
	}
}

import { cacheAssets } from "remix-utils/cache-assets";

cacheAssets().catch((error) => {
	// do something with the error, or not
});

import { cacheAssets } from "remix-utils/cache-assets";

cacheAssests({ cacheName: "assets", buildPath: "/build/" }).catch((error) => {
	// do something with the error, or not
});

import { ClientOnly } from "remix-utils/client-only";

export default function Component() {
	return (
		<ClientOnly fallback={<SimplerStaticVersion />}>
			{() => <ComplexComponentNeedingBrowserEnvironment />}
		</ClientOnly>
	);
}

import { ServerOnly } from "remix-utils/server-only";

export default function Component() {
	return (
		<ServerOnly fallback={<ComplexComponentNeedingBrowserEnvironment />}>
			{() => <SimplerStaticVersion />}
		</ServerOnly>
	);
}

import { cors } from "remix-utils/cors";

export async function loader({ request }: LoaderFunctionArgs) {
	let data = await getData(request);
	let response = json<LoaderData>(data);
	return await cors(request, response);
}

import { cors } from "remix-utils/cors";

export async function loader({ request }: LoaderFunctionArgs) {
	let data = await getData(request);
	return await cors(request, json<LoaderData>(data));
}

import { cors } from "remix-utils/cors";

export async function loader({ request }: LoaderFunctionArgs) {
	let data = await getData(request);
	let response = json<LoaderData>(data);
	await cors(request, response); // this mutates the Response object
	return response; // so you can return it here
}

import { cors } from "remix-utils/cors";

const ABORT_DELAY = 5000;

export default function handleRequest(
	request: Request,
	responseStatusCode: number,
	responseHeaders: Headers,
	remixContext: EntryContext,
) {
	let callbackName = isbot(request.headers.get("user-agent"))
		? "onAllReady"
		: "onShellReady";

	return new Promise((resolve, reject) => {
		let didError = false;

		let { pipe, abort } = renderToPipeableStream(
			<RemixServer context={remixContext} url={request.url} />,
			{
				[callbackName]: () => {
					let body = new PassThrough();

					responseHeaders.set("Content-Type", "text/html");

					cors(
						request,
						new Response(body, {
							headers: responseHeaders,
							status: didError ? 500 : responseStatusCode,
						}),
					).then((response) => {
						resolve(response);
					});

					pipe(body);
				},
				onShellError: (err: unknown) => {
					reject(err);
				},
				onError: (error: unknown) => {
					didError = true;

					console.error(error);
				},
			},
		);

		setTimeout(abort, ABORT_DELAY);
	});
}

export let handleDataRequest: HandleDataRequestFunction = async (
	response,
	{ request },
) => {
	return await cors(request, response);
};

// app/utils/csrf.server.ts
import { CSRF } from "remix-utils/csrf/server";
import { createCookie } from "@remix-run/node"; // or cloudflare/deno

export const cookie = createCookie("csrf", {
	path: "/",
	httpOnly: true,
	secure: process.env.NODE_ENV === "production",
	sameSite: "lax",
	secrets: ["s3cr3t"],
});

export const csrf = new CSRF({
	cookie,
	// what key in FormData objects will be used for the token, defaults to `csrf`
	formDataKey: "csrf",
	// an optional secret used to sign the token, recommended for extra safety
	secret: "s3cr3t",
});

import { csrf } from "~/utils/csrf.server";

export async function loader({ request }: LoaderFunctionArgs) {
	let token = csrf.generate();
}

let token = csrf.generate(64); // customize token length

import { csrf } from "~/utils/csrf.server";

export async function loader({ request }: LoaderFunctionArgs) {
	let [token, cookieHeader] = await csrf.commitToken();
	return json({ token }, { headers: { "set-cookie": cookieHeader } });
}

import { AuthenticityTokenProvider } from "remix-utils/csrf/react";

let { csrf } = useLoaderData<LoaderData>();
return (
	<AuthenticityTokenProvider token={csrf}>
		<Outlet />
	</AuthenticityTokenProvider>
);

import { Form } from "@remix-run/react";
import { AuthenticityTokenInput } from "remix-utils/csrf/react";

export default function Component() {
	return (
		<Form method="post">
			<AuthenticityTokenInput />
			<input type="text" name="something" />
		</Form>
	);
}

<AuthenticityTokenInput name="customName" />

import { useFetcher } from "@remix-run/react";
import { useAuthenticityToken } from "remix-utils/csrf/react";

export function useMarkAsRead() {
	let fetcher = useFetcher();
	let csrf = useAuthenticityToken();
	return function submit(data) {
		fetcher.submit(
			{ csrf, ...data },
			{ action: "/api/mark-as-read", method: "post" },
		);
	};
}

import { CSRFError } from "remix-utils/csrf/server";
import { redirectBack } from "remix-utils/redirect-back";
import { csrf } from "~/utils/csrf.server";

export async function action({ request }: ActionFunctionArgs) {
	try {
		await csrf.validate(request);
	} catch (error) {
		if (error instanceof CSRFError) {
			// handle CSRF errors
		}
		// handle other possible errors
	}

	// here you know the request is valid
	return redirectBack(request, { fallback: "/fallback" });
}

let formData = await parseMultiPartFormData(request);
try {
	await csrf.validate(formData, request.headers);
} catch (error) {
	// handle errors
}

import { ExistingSearchParams } from "remix-utils/existing-search-params";

<Form>
	<ExistingSearchParams exclude={["page"]} />
	<button type="submit" name="page" value="1">
		1
	</button>
	<button type="submit" name="page" value="2">
		2
	</button>
	<button type="submit" name="page" value="3">
		3
	</button>
</Form>

<Form>
	<ExistingSearchParams exclude={["q", "page"]} />
	<input type="search" name="q" />
	<button type="submit">Search</button>
</Form>

import { ExternalScriptsHandle } from "remix-utils/external-scripts";

type LoaderData = SerializeFrom<typeof loader>;

export let handle: ExternalScriptsHandle<LoaderData> = {
  scripts({ id, data, params, matches, location, parentsData }) {
    return [
      {
        src: "https://unpkg.com/[email protected]",
        integrity: "sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni",
        crossOrigin: 'anonymous"
      }
    ];
  },
};

import { ExternalScriptsHandle } from "remix-utils/external-scripts";

export let handle: ExternalScriptsHandle = {
  scripts: [
    {
      src: "https://unpkg.com/[email protected]",
      integrity: "sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni",
      crossOrigin: 'anonymous",
      preload: true, // use it to render a <link rel="preload"> for this script
    }
  ],
};

import {
	ExternalScriptsFunction,
	ScriptDescriptor,
} from "remix-utils/external-scripts";

interface AppHandle<LoaderData = unknown> {
	scripts?: ExternalScriptsFunction<LoaderData> | ScriptDescriptor[];
}

export let handle: AppHandle<LoaderData> = {
	scripts, // define scripts as a function or array here
};

import { ExternalScriptsHandle } from "remix-utils/external-scripts";

interface AppHandle<LoaderData = unknown>
	extends ExternalScriptsHandle<LoaderData> {
	// more handle properties here
}

export let handle: AppHandle<LoaderData> = {
	scripts, // define scripts as a function or array here
};

import { Links, LiveReload, Meta, Scripts, ScrollRestoration } from "remix";
import { ExternalScripts } from "remix-utils/external-scripts";

type Props = { children: React.ReactNode; title?: string };

export function Document({ children, title }: Props) {
	return (
		<html lang="en">
			<head>
				<meta charSet="utf-8" />
				<meta name="viewport" content="width=device-width,initial-scale=1" />
				{title ? <title>{title}</title> : null}
				<Meta />
				<Links />
			</head>
			<body>
				{children}
				<ScrollRestoration />
				<ExternalScripts />
				<Scripts />
				<LiveReload />
			</body>
		</html>
	);
}

let shouldHydrate = useShouldHydrate();

return (
	<html lang="en">
		<head>
			<meta charSet="utf-8" />
			<meta name="viewport" content="width=device-width,initial-scale=1" />
			{title ? <title>{title}</title> : null}
			<Meta />
			<Links />
		</head>
		<body>
			{children}
			<ScrollRestoration />
			{shouldHydrate ? <Scripts /> : <ExternalScripts />}
			<LiveReload />
		</body>
	</html>
);

import { useGlobalNavigationState } from "remix-utils/use-global-navigation-state";

export function GlobalPendingUI() {
	let states = useGlobalNavigationState();

	if (state.includes("loading")) {
		// The app is loading.
	}

	if (state.includes("submitting")) {
		// The app is submitting.
	}

	// The app is idle
}

import { useGlobalPendingState } from "remix-utils/use-global-navigation-state";

export function GlobalPendingUI() {
  let globalState = useGlobalPendingState();

  if (globalState === "idle") return null;
  return <Spinner />;
}

import { useGlobalSubmittingState } from "remix-utils/use-global-navigation-state";

export function GlobalPendingUI() {
  let globalState = useGlobalSubmittingState();

  if (globalState === "idle") return null;
  return <Spinner />;
}

import { useGlobalLoadingState } from "remix-utils/use-global-navigation-state";

export function GlobalPendingUI() {
  let globalState = useGlobalLoadingState();

  if (globalState === "idle") return null;
  return <Spinner />;
}

import { useHydrated } from "remix-utils/use-hydrated";

export function Component() {
  let isHydrated = useHydrated();

  if (isHydrated) {
    return <ClientOnlyComponent />;
  }

  return <ServerFallback />;
}

import { useLocales } from "remix-utils/locales/react";
import { getClientLocales } from "remix-utils/locales/server";

// in the root loader
export async function loader({ request }: LoaderFunctionArgs) {
  let locales = getClientLocales(request);
  return json({ locales });
}

// in any route (including root!)
export default function Component() {
  let locales = useLocales();
  let date = new Date();
  let dateTime = date.toISOString;
  let formattedDate = date.toLocaleDateString(locales, options);
  return <time dateTime={dateTime}>{formattedDate}</time>;
}

import type { ReactNode } from "react";
import { Links, LiveReload, Meta, Scripts } from "@remix-run/react";
import { useShouldHydrate } from "remix-utils/use-should-hydrate";

interface DocumentProps {
	children: ReactNode;
	title?: string;
}

export function Document({ children, title }: DocumentProps) {
	let shouldHydrate = useShouldHydrate();
	return (
		<html lang="en">
			<head>
				<meta charSet="utf-8" />
				<link rel="icon" href="/favicon.png" type="image/png" />
				{title ? <title>{title}</title> : null}
				<Meta />
				<Links />
			</head>
			<body>
				{children}
				{shouldHydrate && <Scripts />}
				<LiveReload />
			</body>
		</html>
	);
}

export let handle = { hydrate: true };

export let handle = {
	hydrate(data: LoaderData) {
		return data.user.isAuthenticated;
	},
};

import { getClientIPAddress } from "remix-utils/get-client-ip-address";

export async function loader({ request }: LoaderFunctionArgs) {
	// using the request
	let ipAddress = getClientIPAddress(request);
	// or using the headers
	let ipAddress = getClientIPAddress(request.headers);
}

import { getClientLocales } from "remix-utils/locales/server";

export async function loader({ request }: LoaderFunctionArgs) {
	// using the request
	let locales = getClientLocales(request);
	// or using the headers
	let locales = getClientLocales(request.headers);
}

import { getClientLocales } from "remix-utils/locales/server";
export async function loader({ request }: LoaderFunctionArgs) {
	let locales = getClientLocales(request);
	let nowDate = new Date();
	let formatter = new Intl.DateTimeFormat(locales, {
		year: "numeric",
		month: "long",
		day: "numeric",
	});
	return json({ now: formatter.format(nowDate) });
}

import { isPrefetch } from "remix-utils/is-prefetch";

export async function loader({ request }: LoaderFunctionArgs) {
	let data = await getData(request);
	let headers = new Headers();

	if (isPrefetch(request)) {
		headers.set("Cache-Control", "private, max-age=5, smax-age=0");
	}

	return json(data, { headers });
}

import { redirectBack } from "remix-utils/redirect-back";

export async function action({ request }: ActionFunctionArgs) {
	throw redirectBack(request, { fallback: "/" });
}

import { notModified } from "remix-utils/responses";

export async function loader({ request }: LoaderFunctionArgs) {
	return notModified();
}

import { javascript } from "remix-utils/responses";

export async function loader({ request }: LoaderFunctionArgs) {
	return javascript("console.log('Hello World')");
}

import { stylesheet } from "remix-utils/responses";

export async function loader({ request }: LoaderFunctionArgs) {
	return stylesheet("body { color: red; }");
}

import { pdf } from "remix-utils/responses";

export async function loader({ request }: LoaderFunctionArgs) {
	return pdf(await generatePDF(request.formData()));
}

import { html } from "remix-utils/responses";

export async function loader({ request }: LoaderFunctionArgs) {
	return html("<h1>Hello World</h1>");
}

import { xml } from "remix-utils/responses";

export async function loader({ request }: LoaderFunctionArgs) {
	return xml("<?xml version='1.0'?><catalog></catalog>");
}

import { txt } from "remix-utils/responses";

export async function loader({ request }: LoaderFunctionArgs) {
	return txt(`
    User-agent: *
    Allow: /
  `);
}

import { createCookie } from "@remix-run/node";
import { createTypedCookie } from "remix-utils/typed-cookie";
import { z } from "zod";

let cookie = createCookie("returnTo", cookieOptions);
// I recommend you to always add `nullable` to your schema, if a cookie didn't
// come with the request Cookie header Remix will return null, and it can be
// useful to remove it later when clearing the cookie
let schema = z.string().url().nullable();

// pass the cookie and the schema
let typedCookie = createTypedCookie({ cookie, schema });

// this will be a string and also a URL
let returnTo = await typedCookie.parse(request.headers.get("Cookie"));

// this will not pass the schema validation and throw a ZodError
await typedCookie.serialize("a random string that's not a URL");
// this will make TS yell because it's not a string, if you ignore it it will
// throw a ZodError
await typedCookie.serialize(123);

let cookie = createCookie("session", cookieOptions);
let schema = z.object({ token: z.string() }).nullable();

let sessionStorage = createCookieSessionStorage({
	cookie: createTypedCookie({ cookie, schema }),
});

// if this works then the correct data is stored in the session
let session = sessionStorage.getSession(request.headers.get("Cookie"));

session.unset("token"); // remove a required key from the session

// this will throw a ZodError because the session is missing the required key
await sessionStorage.commitSession(session);

let cookie = createCookie("session", cookieOptions);

let schema = z
	.object({
		token: z.string().refine(async (token) => {
			let user = await getUserByToken(token);
			return user !== null;
		}, "INVALID_TOKEN"),
	})
	.nullable();

let sessionTypedCookie = createTypedCookie({ cookie, schema });

// this will throw if the token stored in the cookie is not valid anymore
sessionTypedCookie.parse(request.headers.get("Cookie"));

// Set the value as null and expires as current date - 1 second so the browser expires the cookie
await typedCookie.serialize(null, { expires: new Date(Date.now() - 1) });

let cookie = createCookie("returnTo", cookieOptions);
let schema = z.string().url().nullable();

let typedCookie = createTypedCookie({ cookie, schema });

await typedCookie.serialize("some fake url to pass schema validation", {
	expires: new Date(Date.now() - 1),
});

import { createCookieSessionStorage } from "@remix-run/node";
import { createTypedSessionStorage } from "remix-utils/typed-session";
import { z } from "zod";

let schema = z.object({
	token: z.string().optional(),
	count: z.number().default(1),
});

// you can use a Remix's Cookie container or a Remix Utils' Typed Cookie container
let sessionStorage = createCookieSessionStorage({ cookie });

// pass the session storage and the schema
let typedSessionStorage = createTypedSessionStorage({ sessionStorage, schema });

let session = typedSessionStorage.getSession(request.headers.get("Cookie"));

session.get("token"); // this will be a string or undefined
session.get("count"); // this will be a number
session.get("random"); // this will make TS yell because it's not in the schema

session.has("token"); // this will be a boolean
session.has("count"); // this will be a boolean

// this will make TS yell because it's not a string, if you ignore it it will
// throw a ZodError
session.set("token", 123);

let schema = z.object({
	token: z
		.string()
		.optional()
		.refine(async (token) => {
			if (!token) return true; // handle optionallity
			let user = await getUserByToken(token);
			return user !== null;
		}, "INVALID_TOKEN"),
});

let typedSessionStorage = createTypedSessionStorage({ sessionStorage, schema });

// this will throw if the token stored in the session is not valid anymore
typedSessionStorage.getSession(request.headers.get("Cookie"));

// app/routes/sse.time.ts
import { eventStream } from "remix-utils/sse/server";
import { interval } from "remix-utils/timers";

export async function loader({ request }: LoaderFunctionArgs) {
	return eventStream(request.signal, function setup(send) {
		async function run() {
			for await (let _ of interval(1000, { signal: request.signal })) {
				send({ event: "time", data: new Date().toISOString() });
			}
		}

		run();
	});
}

// app/components/counter.ts
import { useEventSource } from "remix-utils/sse/react";

function Counter() {
	// Here `/sse/time` is the resource route returning an eventStream response
	let time = useEventSource("/sse/time", { event: "time" });

	if (!time) return null;

	return (
		<time dateTime={time}>
			{new Date(time).toLocaleTimeString("en", {
				minute: "2-digit",
				second: "2-digit",
				hour: "2-digit",
			})}
		</time>
	);
}

let map: EventSourceMap = new Map();
return (
	<EventSourceProvider value={map}>
		<YourAppOrPartOfIt />
	</EventSourceProvider>
);

import { rollingCookie } from "remix-utils/rolling-cookie";

import { sessionCookie } from "~/session.server";

export default function handleRequest(
	request: Request,
	responseStatusCode: number,
	responseHeaders: Headers,
	remixContext: EntryContext,
) {
	await rollingCookie(sessionCookie, request, responseHeaders);

	return isbot(request.headers.get("user-agent"))
		? handleBotRequest(
				request,
				responseStatusCode,
				responseHeaders,
				remixContext,
		  )
		: handleBrowserRequest(
				request,
				responseStatusCode,
				responseHeaders,
				remixContext,
		  );
}

import { rollingCookie } from "remix-utils/rolling-cookie";

export let handleDataRequest: HandleDataRequestFunction = async (
	response: Response,
	{ request },
) => {
	let cookieValue = await sessionCookie.parse(
		responseHeaders.get("set-cookie"),
	);
	if (!cookieValue) {
		cookieValue = await sessionCookie.parse(request.headers.get("cookie"));
		responseHeaders.append(
			"Set-Cookie",
			await sessionCookie.serialize(cookieValue),
		);
	}

	return response;
};

import { namedAction } from "remix-utils/named-action";

export async function action({ request }: ActionFunctionArgs) {
	return namedAction(request, {
		async create() {
			// do create
		},
		async update() {
			// do update
		},
		async delete() {
			// do delete
		},
	});
}

export default function Component() {
	return (
		<>
			<Form method="post" action="?/create">
				...
			</Form>

			<Form method="post" action="?/update">
				...
			</Form>

			<Form method="post" action="?/delete">
				...
			</Form>
		</>
	);
}

import { preloadRouteAssets, preloadLinkedAssets, preloadModuleAssets } from "remix-utils/preload-route-assets";

// entry.server.tsx
export default function handleRequest(
  request: Request,
  statusCode: number,
  headers: Headers,
  context: EntryContext,
) {
  let markup = renderToString(
    <RemixServer context={context} url={request.url} />,
  );
  headers.set("Content-Type", "text/html");

  preloadRouteAssets(context, headers); // add this line
  // preloadLinkedAssets(context, headers);
  // preloadModuleAssets(context, headers);

  return new Response("<!DOCTYPE html>" + markup, {
    status: statusCode,
    headers: headers,
  });
}

import { safeRedirect } from "remix-utils/safe-redirect";

export async function loader({ request }: LoaderFunctionArgs) {
	let { searchParams } = new URL(request.url);
	let redirectTo = searchParams.get("redirectTo");
	return redirect(safeRedirect(redirectTo, "/home"));
}

export async function loader({ params }: LoaderData) {
	let postId = z.string().parse(params.postId);
	let [post, comments] = await Promise.all([getPost(), getComments()]);
	return json({ post, comments });

	async function getPost() {
		/* … */
	}
	async function getComments() {
		/* … */
	}
}

import { jsonHash } from "remix-utils/json-hash";

export async function loader({ params }: LoaderData) {
	let postId = z.string().parse(params.postId);
	return jsonHash({
		async post() {
			// Implement me
		},
		async comments() {
			// Implement me
		},
	});
}

import { jsonHash } from "remix-utils/json-hash";

export async function loader({ params }: LoaderData) {
	let postId = z.string().parse(params.postId);
	return jsonHash({
		postId, // value
		comments: getComments(), // Promise
		slug() {
			// Non-async function
			return postId.split("-").at(1); // get slug from postId param
		},
		async post() {
			// Async function
			return await getPost(postId);
		},
	});

	async function getComments() {
		/* … */
	}
}

export default function Component() {
	// all correctly typed
	let { postId, comments, slug, post } = useLoaderData<typeof loader>();

	// more code…
}

import { useDelegatedAnchors } from "remix-utils/use-delegated-anchors";

export async function loader() {
	let content = await fetchContentFromCMS();
	return json({ content });
}

export default function Component() {
	let { content } = useLoaderData<typeof loader>();

	let ref = useRef<HTMLDivElement>(null);
	useDelegatedAnchors(ref);

	return <article ref={ref} dangerouslySetInnerHTML={{ __html: content }} />;
}

import { PrefetchPageAnchors } from "remix-utils/use-delegated-anchors";

export async function loader() {
	let content = await fetchContentFromCMS();
	return json({ content });
}

export default function Component() {
	let { content } = useLoaderData<typeof loader>();

	return (
		<PrefetchPageAnchors>
			<article ref={ref} dangerouslySetInnerHTML={{ __html: content }} />
		</PrefetchPageAnchors>
	);
}

import { useDebounceFetcher } from "remix-utils/use-debounce-fetcher";

export function Component({ data }) {
	let fetcher = useDebounceFetcher<Type>();

	function handleClick() {
		fetcher.submit(data, { debounceTimeout: 1000 });
	}

	return (
		<button type="button" onClick={handleClick}>
			Do Something
		</button>
	);
}

import { useDebounceSubmit } from "remix-utils/use-debounce-submit";

export function Component({ name }) {
	let submit = useDebounceSubmit();

	return (
		<input
			name={name}
			type="text"
			onChange={(event) => {
				submit(event.target.form, {
					navigate: false, // use a fetcher instead of a page navigation
					fetcherKey: name, // cancel any previous fetcher with the same key
					debounceTimeout: 1000,
				});
			}}
			onBlur={() => {
				submit(event.target.form, {
					navigate: false,
					fetcherKey: name,
					debounceTimeout: 0, // submit immediately, canceling any pending fetcher
				});
			}}
		/>
	);
}

import { getFetcherType } from "remix-utils/fetcher-type";

function Component() {
	let fetcher = useFetcher();
	let navigation = useNavigation();
	let fetcherType = getFetcherType(fetcher, navigation);
	useEffect(() => {
		if (fetcherType === "done") {
			// do something once the fetcher is done submitting the data
		}
	}, [fetcherType]);
}

import { useFetcherType } from "remix-utils/fetcher-type";

function Component() {
	let fetcher = useFetcher();
	let fetcherType = useFetcherType(fetcher);
	useEffect(() => {
		if (fetcherType === "done") {
			// do something once the fetcher is done submitting the data
		}
	}, [fetcherType]);
}

import { type FetcherType } from "remix-utils/fetcher-type";

function useCallbackOnDone(type: FetcherType, cb) {
	useEffect(() => {
		if (type === "done") cb();
	}, [type, cb]);
}

import { respondTo } from "remix-utils/respond-to";

export async function loader({ request }: LoaderFunctionArgs) {
  // do any work independent of the response type before respondTo
  let data = await getData(request);

  let headers = new Headers({ vary: "accept" });

  // Here we will decide how to respond to different content types
  return respondTo(request, {
    // The handler can be a subtype handler, in `text/html` html is the subtype
    html() {
      // We can call any function only really need to respond to this
      // content-type
      let body = ReactDOMServer.renderToString(<UI {...data} />);
      headers.append("content-type", "text/html");
      return new Response(body, { headers });
    },
    // It can also be a highly specific type
    async "application/rss+xml"() {
      // we can do more async work inside this code if needed
      let body = await generateRSSFeed(data);
      headers.append("content-type", "application/rss+xml");
      return new Response(body, { headers });
    },
    // Or a generic type
    async text() {
      // To respond to any text type, e.g. text/plain, text/csv, etc.
      let body = generatePlain(data);
      headers.append("content-type", "text/plain");
      return new Response(body, { headers });
    },
    // The default will be used if the accept header doesn't match any of the
    // other handlers
    default() {
      // Here we could have a default type of response, e.g. use json by
      // default, or we can return a 406 which means the server can't respond
      // with any of the requested content types
      return new Response("Not Acceptable", { status: 406 });
    },
  });
}

import { parseAcceptHeader } from "remix-utils/parse-accept-header";

let parsed = parseAcceptHeader(
	"text/html, application/xhtml+xml, application/xml;q=0.9, image/webp, image/*, */*;q=0.8",
);

import { Honeypot } from "remix-utils/honeypot/server";

// Create a new Honeypot instance, the values here are the defaults, you can
// customize them
export const honeypot = new Honeypot({
	randomizeNameFieldName: false,
	nameFieldName: "name__confirm",
	validFromFieldName: "from__confirm", // null to disable it
	encryptionSeed: undefined, // Ideally it should be unique even between processes
});

// app/root.tsx
import { honeypot } from "~/honeypot.server";

export async function loader() {
	// more code here
	return json({ honeypotInputProps: honeypot.getInputProps() });
}

import { HoneypotProvider } from "remix-utils/honeypot/react";

export default function Component() {
	// more code here
	return (
		// some JSX
		<HoneypotProvider {...honeypotInputProps}>
			<Outlet />
		</HoneypotProvider>
		// end that JSX
	);
}

import { HoneypotInputs } from "remix-utils/honeypot/react";

function SomePublicForm() {
	return (
		<Form method="post">
			<HoneypotInputs label="Please leave this field blank" />
			{/* more inputs and some buttons */}
		</Form>
	);
}

import { SpamError } from "remix-utils/honeypot/server";
import { honeypot } from "~/honeypot.server";

export async function action({ request }) {
	let formData = await request.formData();
	try {
		honeypot.check(formData);
	} catch (error) {
		if (error instanceof SpamError) {
			// handle spam requests here
		}
		// handle any other possible error here, e.g. re-throw since nothing else
		// should be thrown
	}
	// the rest of your action
}

import {
	fetchDest,
	fetchMode,
	fetchSite,
	isUserInitiated,
} from "remix-utils/sec-fetch";

import { fetchDest } from "remix-utils/sec-fetch";

export async function action({ request }: ActionFunctionArgs) {
	let data = await getDataSomehow();

	// if the request was made with JS, we can just return json
	if (fetchDest(request) === "empty") return json(data);
	// otherwise we redirect to avoid a reload to trigger a new submission
	return redirect(destination);
}

import { fetchMode } from "remix-utils/sec-fetch";

export async function loader({ request }: LoaderFunctionArgs) {
	let mode = fetchMode(request);
	// do something based on the mode value
}

import { fetchSite } from "remix-utils/sec-fetch";

export async function loader({ request }: LoaderFunctionArgs) {
	let site = fetchSite(request);
	// do something based on the site value
}

import { isUserInitiated } from "remix-utils/sec-fetch";

export async function loader({ request }: LoaderFunctionArgs) {
	let userInitiated = isUserInitiated(request);
	// do something based on the userInitiated value
}

import { wait } from "remix-utils/timers";

export async function loader({ request }: LoaderFunctionArgs) {
	await wait(1000, { signal: request.signal });
	// do something after 1 second
}

import { eventStream } from "remix-utils/sse/server";
import { interval } from "remix-utils/timers";

export async function loader({ request }: LoaderFunctionArgs) {
	return eventStream(request.signal, function setup(send) {
		async function run() {
			for await (let _ of interval(1000, { signal: request.signal })) {
				send({ event: "time", data: new Date().toISOString() });
			}
		}

		run();
	});
}