Client hints (#30)

AlemTuzlak · web-flow · commit 3fe05ab9f63a · 2025-02-06T13:47:56.000+01:00
Fixes #

# Description

Please include a summary of the change and which issue is fixed. Please
also include relevant motivation and context.
List any dependencies that are required for this change.

## Type of change

Please mark relevant options with an `x` in the brackets.

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] This change requires a documentation update
- [ ] Algorithm update - updates algorithm
documentation/questions/answers etc.
- [ ] Other (please describe):

# How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide
instructions so we can reproduce. Please also
list any relevant details for your test configuration

- [ ] Integration tests
- [ ] Unit tests
- [ ] Manual tests
- [ ] No tests required

# Reviewer checklist

Mark everything that needs to be checked before merging the PR.

- [ ] Check if the UI is working as expected and is satisfactory
- [ ] Check if the code is well documented
- [ ] Check if the behavior is what is expected
- [ ] Check if the code is well tested
- [ ] Check if the code is readable and well formatted
- [ ] Additional checks (document below if any)

# Screenshots (if appropriate):

# Questions (if appropriate):
diff --git a/app/root.tsx b/app/root.tsx
@@ -4,11 +4,13 @@ import type { LinksFunction } from "react-router"
 import { useChangeLanguage } from "remix-i18next/react"
 import type { Route } from "./+types/root"
 import { LanguageSwitcher } from "./library/language-switcher"
+import { ClientHintCheck, getHints } from "./services/client-hints"
 import tailwindcss from "./tailwind.css?url"
 
-export async function loader({ context }: Route.LoaderArgs) {
+export async function loader({ context, request }: Route.LoaderArgs) {
 	const { lang, clientEnv } = context
-	return { lang, clientEnv }
+	const hints = getHints(request)
+	return { lang, clientEnv, hints }
 }
 
 export const links: LinksFunction = () => [{ rel: "stylesheet", href: tailwindcss }]
@@ -20,7 +22,6 @@ export const handle = {
 export default function App({ loaderData }: Route.ComponentProps) {
 	const { lang, clientEnv } = loaderData
 	useChangeLanguage(lang)
-
 	return (
 		<>
 			<Outlet />
@@ -35,6 +36,7 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
 	return (
 		<html className="overflow-y-auto overflow-x-hidden" lang={i18n.language} dir={i18n.dir()}>
 			<head>
+				<ClientHintCheck />
 				<meta charSet="utf-8" />
 				<meta name="viewport" content="width=device-width, initial-scale=1" />
 				<Meta />
diff --git a/app/services/client-hints.tsx b/app/services/client-hints.tsx
@@ -0,0 +1,47 @@
+import { getHintUtils } from "@epic-web/client-hints"
+import { clientHint as colorSchemeHint, subscribeToSchemeChange } from "@epic-web/client-hints/color-scheme"
+import { clientHint as reducedMotionHint, subscribeToMotionChange } from "@epic-web/client-hints/reduced-motion"
+import { clientHint as timeZoneHint } from "@epic-web/client-hints/time-zone"
+import { useEffect } from "react"
+import { useRevalidator, useRouteLoaderData } from "react-router"
+import type { Route } from "../+types/root"
+
+export const { getHints, getClientHintCheckScript } = getHintUtils({
+	theme: colorSchemeHint,
+	timeZone: timeZoneHint,
+	reducedMotion: reducedMotionHint,
+	// add other hints here
+})
+
+/**
+ * @public
+ * Utility function used to get the time zone for the current users browser on either the client or the server.
+ *  */
+export const getTimeZone = (request?: Request) => getHints(request).timeZone
+
+/**
+ * @public
+ * Utility used to get the client hints for the current users browser.
+ * 	*/
+export function useHints() {
+	const requestInfo = useRouteLoaderData<Route.ComponentProps["loaderData"]>("root")
+	return requestInfo?.hints
+}
+/**
+ * Utility component used to check the client hints on the client and send them to the server.
+ */
+export function ClientHintCheck({ nonce }: { nonce?: string }) {
+	const { revalidate } = useRevalidator()
+	useEffect(() => subscribeToSchemeChange(() => revalidate()), [revalidate])
+	useEffect(() => subscribeToMotionChange(() => revalidate()), [revalidate])
+
+	return (
+		<script
+			nonce={nonce}
+			// biome-ignore lint/security/noDangerouslySetInnerHtml: We want to run this script on the client
+			dangerouslySetInnerHTML={{
+				__html: getClientHintCheckScript(),
+			}}
+		/>
+	)
+}
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
 		"postinstall": "pnpm run typegen"
 	},
 	"dependencies": {
+		"@epic-web/client-hints": "1.3.5",
 		"@forge42/seo-tools": "1.3.0",
 		"@react-router/node": "7.1.5",
 		"clsx": "2.1.1",
@@ -74,7 +75,7 @@
 		"typescript": "5.7.3",
 		"vite": "6.0.11",
 		"vite-plugin-babel": "1.3.0",
-		"vite-plugin-icons-spritesheet": "3.0.0",
+		"vite-plugin-icons-spritesheet": "3.0.1",
 		"vite-tsconfig-paths": "5.1.4",
 		"vitest": "3.0.5",
 		"vitest-browser-react": "0.0.4"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/vite.config.ts b/vite.config.ts
@@ -37,9 +37,6 @@ export default defineConfig({
 			formatter: "biome",
 		}),
 	],
-	build: {
-		assetsInlineLimit: 0,
-	},
 	server: {
 		open: true,
 		// biome-ignore lint/nursery/noProcessEnv: Its ok to use process.env here
