simonrelet

import { fetchDedupe, getRequestKey, isRequestInFlight } from 'fetch-dedupe'
import { useEffect, useRef, useState } from 'react'

// This in the Fetch component transposed in hooks.
// https://github.com/jamesplease/react-request/issues/199
// https://github.com/jamesplease/react-request/blob/master/src/fetch.js

// This object is our cache.
// The keys of the object are requestKeys.
// The value of each key is a Response instance.

simonrelet

import React from 'react'

/**
 * @typedef {object} State The state of asynchronous hooks.
 * @property {object | null} error The error.
 * @property {boolean} pending Whether the call is pending.
 * @property {any | null} result The result of the asynchronous call.
 */

/** @type {State} */

simonrelet

/**
 * @typedef {object} Mapper
 * @property {function(any): any} fromAPI
 * @property {function(any): any} toAPI
 *
 * @typedef {object} Config
 * @property {string} [name]
 * @property {Mapper} [mapper]
 *
 * @typedef {Object.<string, string | Config>} MixedMappings

simonrelet

/** Geohashes are in base32. */
const MAX_CHILDREN_COUNT = 32

/**
 * Compress an array of Geohashes using Hash Tree compression.
 *
 * @param {string[]} geohashes Array of Geohashes.
 * @param {number} [minChildrenCount=32] The minimum number of children to concider a node full.
 * @returns {string[]} A compressed version of the Geohashes.
 */

simonrelet

import invariant from 'invariant'
import warning from 'warning'

function identity(state) {
  return state
}

function parse(serializedJSON) {
  if (serializedJSON) {
    try {

simonrelet

import throttle from 'lodash.throttle'

const DEFAULT_HISTORY_CAPACITY = 50
const DEFAULT_PUSH_THROTTLE_TIMEOUT = 500

/**
 * The object defining the internal state of a History returned by
 * `History.getState`.
 *
 * @template T

simonrelet

Extracted from https://stackoverflow.com/a/50396312

TypeScript: A world of Types and Values

As you are likely aware, TypeScript adds a static type system to JavaScript, and that type system gets erased when the code is transpiled. The syntax of TypeScript is such that some expressions and statements refer to values that exist at runtime, while other expressions and statements refer to types that exist only at design/compile time. Values have types, but they are not types themselves. Importantly, there are some places in the code where the compiler will expect a value and interpret the expression it finds as a value if possible, and other places where the compiler will expect a type and interpret the expression it finds as a type if possible.

The compiler does not care or get confused if it is possible for an expression to be interpreted as both a value and a type.

simonrelet

// Shared URL query that can be imported from anywhere.
const PaginationUrlQuerySchema = z.object({
  // Use .catch() in order to return a default value when validation fails.
  // See https://zod.dev/?id=catch
  page: z.coerce.number().min(0).catch(0),
});

// Page specific URL query combined with shared ones.
const MyPageUrlQuerySchema = PaginationUrlQuerySchema.extend({
  enum: z.enum(["foo", "bar"]).catch("foo"),

simonrelet

import { useMemo } from "react";

export function useComposedRef<TElement>(handlers: RefHandler<TElement>[]) {
  // We actually want the handlers to be the dependency list.
  // eslint-disable-next-line react-hooks/exhaustive-deps
  return useMemo(() => composeRefs(handlers), handlers);
}

function composeRefs<TElement>(
  handlers: RefHandler<TElement>[],

simonrelet

import { useSearchParams } from "@remix-run/react";
import isEqual from "lodash.isequal";
import { useCallback, useMemo } from "react";
import type { NavigateOptions } from "react-router";

export function useParsedSearchParams<
  TOutput extends object,
  TInput extends object,
>(delegate: URLSearchParamsDelegate<TOutput, TInput>) {
  const [searchParams, setSearchParams] = useSearchParams();