Upgrade dependencies

package.json

@@ -45,7 +45,7 @@
   "sideEffects": false,
   "scripts": {
     "prepare": "npm run build",
-    "build": "tsc --project tsconfig.json --module ESNext --outDir ./build",
+    "build": "tsc --project tsconfig.json --outDir ./build",
     "postbuild": "prettier --write \"build/**/*.js\" \"build/**/*.d.ts\"",
     "format": "prettier --write \"src/**/*.ts\" \"src/**/*.tsx\" \"test/**/*.ts\" \"test/**/*.tsx\"",
     "typecheck": "tsc --project tsconfig.json --noEmit",
@@ -94,7 +94,7 @@
     "@remix-run/router": "^1.7.2",
     "crypto-js": "^4.1.1",
     "intl-parse-accept-language": "^1.0.0",
-    "is-ip": "^3.1.0",
+    "is-ip": "^5.0.1",
     "react": "^18.0.0",
     "zod": "^3.22.4"
   },
@@ -135,39 +135,39 @@
     "@remix-run/react": "^2.0.0",
     "@remix-run/router": "^1.7.2",
     "@remix-run/testing": "^2.0.0",
-    "@testing-library/jest-dom": "^5.15.0",
-    "@testing-library/react": "^12.1.2",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
     "@types/crypto-js": "^4.1.2",
-    "@types/react": "^17.0.14",
-    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.3.0",
-    "@vitejs/plugin-react": "^4.0.4",
-    "@vitest/coverage-v8": "^0.34.1",
+    "@types/react": "^18.2.25",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
+    "@vitejs/plugin-react": "^4.1.0",
+    "@vitest/coverage-v8": "^0.34.6",
     "eslint": "^8.12.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-import-resolver-typescript": "^2.5.0",
-    "eslint-plugin-cypress": "^2.11.3",
-    "eslint-plugin-import": "^2.22.1",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-cypress": "^2.15.1",
+    "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jest-dom": "^5.1.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-testing-library": "^5.1.0",
-    "eslint-plugin-unicorn": "^41.0.1",
-    "happy-dom": "^10.9.0",
-    "msw": "^1.2.3",
-    "prettier": "^2.5.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-testing-library": "^6.0.2",
+    "eslint-plugin-unicorn": "^48.0.1",
+    "happy-dom": "^12.9.0",
+    "msw": "^1.3.2",
+    "prettier": "^3.0.3",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "ts-node": "^10.4.0",
-    "typescript": "^5.1.6",
-    "vite": "^4.4.9",
-    "vitest": "^0.34.1",
+    "ts-node": "^10.9.1",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.11",
+    "vitest": "^0.34.6",
     "zod": "^3.22.4"
   },
   "dependencies": {
-    "type-fest": "^2.5.2"
+    "type-fest": "^4.3.3"
   }
 }

prettier.config.mjs → prettier.config.js

@@ -2,4 +2,5 @@
 /** @type {import("prettier").Config} */
 export default {
   trailingComma: "all",
+  useTabs: true,
 };

src/client/cache-assets.ts

@@ -1,15 +1,15 @@
 export interface CacheAssetsOptions {
-  /**
-   * The name of the cache to use inside the browser Cache Storage
-   * @default "assets"
-   */
-  cacheName?: string;
-  /**
-   * The path prefix for all build assets, if you used a subdomain ensure this
-   * is only the pathname part.
-   * @default "/build/"
-   */
-  buildPath?: string;
+	/**
+	 * The name of the cache to use inside the browser Cache Storage
+	 * @default "assets"
+	 */
+	cacheName?: string;
+	/**
+	 * The path prefix for all build assets, if you used a subdomain ensure this
+	 * is only the pathname part.
+	 * @default "/build/"
+	 */
+	buildPath?: string;
 }
 
 /**
@@ -21,69 +21,69 @@ export interface CacheAssetsOptions {
  * **This can only be run inside entry.client**
  */
 export async function cacheAssets({
-  cacheName = "assets",
-  buildPath = "/build/",
+	cacheName = "assets",
+	buildPath = "/build/",
 }: CacheAssetsOptions = {}) {
-  let paths = getFilePaths();
-  let cache = await caches.open(cacheName);
-  let urls = await getCachedUrls(cache, buildPath);
-  await removeOldAssets(cache, paths, urls);
-  await addNewAssets(cache, paths, urls);
+	let paths = getFilePaths();
+	let cache = await caches.open(cacheName);
+	let urls = await getCachedUrls(cache, buildPath);
+	await removeOldAssets(cache, paths, urls);
+	await addNewAssets(cache, paths, urls);
 }
 
 function getFilePaths() {
-  try {
-    return unique([
-      ...Object.values(window.__remixManifest.routes).flatMap((route) => {
-        return [route.module, ...(route.imports ?? [])];
-      }),
-      window.__remixManifest.url,
-      window.__remixManifest.entry.module,
-      ...window.__remixManifest.entry.imports,
-    ]);
-  } catch {
-    throw new Error("Failed to get file paths from Remix manifest");
-  }
+	try {
+		return unique([
+			...Object.values(window.__remixManifest.routes).flatMap((route) => {
+				return [route.module, ...(route.imports ?? [])];
+			}),
+			window.__remixManifest.url,
+			window.__remixManifest.entry.module,
+			...window.__remixManifest.entry.imports,
+		]);
+	} catch {
+		throw new Error("Failed to get file paths from Remix manifest");
+	}
 }
 
 async function getCachedUrls(
-  cache: Cache,
-  buildPath: CacheAssetsOptions["buildPath"] = "/build/"
+	cache: Cache,
+	buildPath: CacheAssetsOptions["buildPath"] = "/build/",
 ) {
-  try {
-    let keys = await cache.keys();
-    return keys
-      .map((key) => {
-        return new URL(key.url);
-      })
-      .filter((url) => url.hostname === window.location.hostname)
-      .map((url) => url.pathname)
-      .filter((pathname) => pathname.startsWith(buildPath));
-  } catch {
-    throw new Error("Failed to retrieve cached URLs");
-  }
+	try {
+		let keys = await cache.keys();
+		return keys
+			.map((key) => {
+				return new URL(key.url);
+			})
+			.filter((url) => url.hostname === window.location.hostname)
+			.map((url) => url.pathname)
+			.filter((pathname) => pathname.startsWith(buildPath));
+	} catch {
+		throw new Error("Failed to retrieve cached URLs");
+	}
 }
 
 async function removeOldAssets(cache: Cache, paths: string[], urls: string[]) {
-  try {
-    await Promise.all(
-      urls
-        .filter((pathname) => !paths.includes(pathname))
-        .map((pathname) => cache.delete(pathname))
-    );
-  } catch {
-    throw new Error("Failed to remove old assets from the cache");
-  }
+	try {
+		await Promise.all(
+			urls
+				.filter((pathname) => !paths.includes(pathname))
+				.map((pathname) => cache.delete(pathname)),
+		);
+	} catch {
+		throw new Error("Failed to remove old assets from the cache");
+	}
 }
 
 async function addNewAssets(cache: Cache, paths: string[], urls: string[]) {
-  try {
-    await cache.addAll(paths.filter((path) => !urls.includes(path)));
-  } catch {
-    throw new Error("Failed to add new assets to the cache");
-  }
+	try {
+		await cache.addAll(paths.filter((path) => !urls.includes(path)));
+	} catch {
+		throw new Error("Failed to add new assets to the cache");
+	}
 }
 
 function unique<Value>(array: Value[]): Value[] {
-  return [...new Set(array)];
+	return [...new Set(array)];
 }

src/common/promise.ts

@@ -4,7 +4,7 @@
 export type PromiseHash = Record<string, Promise<unknown>>;
 
 export type AwaitedPromiseHash<Hash extends PromiseHash> = {
-  [Key in keyof Hash]: Awaited<Hash[Key]>;
+	[Key in keyof Hash]: Awaited<Hash[Key]>;
 };
 
 /**
@@ -36,13 +36,13 @@ export type AwaitedPromiseHash<Hash extends PromiseHash> = {
  * }
  */
 export async function promiseHash<Hash extends PromiseHash>(
-  hash: Hash
+	hash: Hash,
 ): Promise<AwaitedPromiseHash<Hash>> {
-  return Object.fromEntries(
-    await Promise.all(
-      Object.entries(hash).map(async ([key, promise]) => [key, await promise])
-    )
-  );
+	return Object.fromEntries(
+		await Promise.all(
+			Object.entries(hash).map(async ([key, promise]) => [key, await promise]),
+		),
+	);
 }
 
 /**
@@ -85,33 +85,33 @@ let TIMEOUT = Symbol("TIMEOUT");
  * }
  */
 export function timeout<Value>(
-  promise: Promise<Value>,
-  options: { controller?: AbortController; ms: number }
+	promise: Promise<Value>,
+	options: { controller?: AbortController; ms: number },
 ): Promise<Value> {
-  return new Promise(async (resolve, reject) => {
-    let timer: NodeJS.Timeout | null = null;
+	return new Promise(async (resolve, reject) => {
+		let timer: NodeJS.Timeout | null = null;
 
-    try {
-      let result = await Promise.race([
-        promise,
-        new Promise((resolve) => {
-          timer = setTimeout(() => resolve(TIMEOUT), options.ms);
-        }),
-      ]);
+		try {
+			let result = await Promise.race([
+				promise,
+				new Promise((resolve) => {
+					timer = setTimeout(() => resolve(TIMEOUT), options.ms);
+				}),
+			]);
 
-      if (timer) clearTimeout(timer);
+			if (timer) clearTimeout(timer);
 
-      if (result === TIMEOUT) {
-        if (options.controller) options.controller.abort();
-        return reject(new TimeoutError(`Timed out after ${options.ms}ms`));
-      }
+			if (result === TIMEOUT) {
+				if (options.controller) options.controller.abort();
+				return reject(new TimeoutError(`Timed out after ${options.ms}ms`));
+			}
 
-      return resolve(result as Awaited<Value>);
-    } catch (error) {
-      if (timer) clearTimeout(timer);
-      reject(error);
-    }
-  });
+			return resolve(result as Awaited<Value>);
+		} catch (error) {
+			if (timer) clearTimeout(timer);
+			reject(error);
+		}
+	});
 }
 
 /**
@@ -126,8 +126,8 @@ export function timeout<Value>(
  * }
  */
 export class TimeoutError extends Error {
-  constructor(message: string) {
-    super(message);
-    this.name = "TimeoutError";
-  }
+	constructor(message: string) {
+		super(message);
+		this.name = "TimeoutError";
+	}
 }

src/react/authenticity-token.tsx

@@ -1,12 +1,12 @@
 import * as React from "react";
 
 export interface AuthenticityTokenProviderProps {
-  children: React.ReactNode;
-  token: string;
+	children: React.ReactNode;
+	token: string;
 }
 
 export interface AuthenticityTokenInputProps {
-  name?: string;
+	name?: string;
 }
 
 let context = React.createContext<string | null>(null);
@@ -23,10 +23,10 @@ let context = React.createContext<string | null>(null);
  * )
  */
 export function AuthenticityTokenProvider({
-  children,
-  token,
+	children,
+	token,
 }: AuthenticityTokenProviderProps) {
-  return <context.Provider value={token}>{children}</context.Provider>;
+	return <context.Provider value={token}>{children}</context.Provider>;
 }
 
 /**
@@ -42,9 +42,9 @@ export function AuthenticityTokenProvider({
  * }
  */
 export function useAuthenticityToken() {
-  let token = React.useContext(context);
-  if (!token) throw new Error("Missing AuthenticityTokenProvider.");
-  return token;
+	let token = React.useContext(context);
+	if (!token) throw new Error("Missing AuthenticityTokenProvider.");
+	return token;
 }
 
 /**
@@ -64,8 +64,8 @@ export function useAuthenticityToken() {
  * <AuthenticityTokenInput name="authenticity_token" />
  */
 export function AuthenticityTokenInput({
-  name = "csrf",
+	name = "csrf",
 }: AuthenticityTokenInputProps) {
-  let token = useAuthenticityToken();
-  return <input type="hidden" value={token} name={name} />;
+	let token = useAuthenticityToken();
+	return <input type="hidden" value={token} name={name} />;
 }