media client hints

media-client-hints.ts

import { type ClientHint, getHintUtils } from "@epic-web/client-hints";
import { useEffect } from "react";
import { useRevalidator } from "react-router";

const MOBILE_BREAKPOINT = "(max-width: 1023px)"; // lower than lg

const media = {
  mobile: "mobile",
  desktop: "desktop",
} as const;

type Device = (typeof media)[keyof typeof media];

const mediaClientHint = {
  cookieName: "CH-media",
  getValueCode: `window.matchMedia('${MOBILE_BREAKPOINT}').matches ? '${media.mobile}' : '${media.desktop}'`,
  fallback: media.desktop,
  transform(value) {
    return value === media.mobile ? media.mobile : media.desktop;
  },
} as const satisfies ClientHint<Device>;

const hintsUtils = getHintUtils({
  media: mediaClientHint,
});

export const { getHints } = hintsUtils;

function subscribeToMediaChange(callback: () => void) {
  const schemaMatch = window.matchMedia(MOBILE_BREAKPOINT);

  function handleMediaChange() {
    const value = schemaMatch.matches ? media.mobile : media.desktop;
    document.cookie = `${mediaClientHint.cookieName}=${value}; Max-Age=31536000; SameSite=Lax; Path=/`;
    callback();
  }

  schemaMatch.addEventListener("change", handleMediaChange);

  return () => {
    schemaMatch.removeEventListener("change", handleMediaChange);
  };
}

export function ClientHintCheck({ nonce }: { nonce: string }) {
  const { revalidate } = useRevalidator();

  useEffect(() => subscribeToMediaChange(() => revalidate()), [revalidate]);

  return (
    <script
      nonce={nonce}
      dangerouslySetInnerHTML={{
        __html: hintsUtils.getClientHintCheckScript(),
      }}
    />
  );
}