This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* A strict React.memo memoization function, built off | |
* the one that comes built-in, that throws an error | |
* (in dev) if props change between renders. Props you | |
* want to allow can be passed in as arguments. | |
* | |
* This "don't allow by default" model makes it so | |
* further changes to a component don't silently | |
* undo any memoization optimizations done before. | |
* |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// TS playground: | |
// https://www.typescriptlang.org/play?#code/PTAElByAoAzBXA7AxgFwJYHt6lfaBTAJwBVYAHAGzwB5JRQSK9Q8APZPeAEwGdRvkCOAOYBtALoAaUJAB8ACmRlKALlAiAdJoaUxASlABvWqAJ5FBLIsaQAvgG5IiTP2y5C2vETwuAvK-zESnhyIgDkAIahUqEARlGgoYihepCQwABUtOmgABKETOGmfOgAtkzc5KhCABbkAJ58qCWo5IWgcEhomFmgnHjQOKhd8LzI1eHI7eEtoMjo-oSg4bNBWcCpIKCAvBuA1XswCCgYWIQE6AQAjApBqhqa-ILwomJ6hsam5par9o7Okydn5y8vmYBFOFxCEXisShSRSaTAu32nSOILBACYqB55FYVPQgvojHR3rALCtrN8nCM-qCzmigZM-P8CGiIZFonForDdBsEXsOodMKizgBmTFBZhsDg8PgCYTibHXPGMAlvMwkz7khyUlxM4X00CMmkEYWsqEchJcoA | |
// ✅ | |
function inferTuple< | |
Tuple extends string[], | |
>(tuple: [...Tuple]) { | |
return tuple | |
}; | |
const inferTupleTest = inferTuple(['a', 'b', 'c']) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useApolloClient, Cache } from "@apollo/client"; | |
import { useEffect } from "react"; | |
/* | |
* WriteFragment: A declarative way to write fragments to Apollo cache | |
* using React components. When the fragment props change, the cache is | |
* updated. When then component unmounts, the fragment is deleted. | |
* | |
* This is essentially a reactive version of the cache.writeFragment | |
* method, using the same exact arguments and types. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { ApolloCache, ApolloClient, ApolloLink, NormalizedCacheObject } from '@apollo/client'; | |
class MockedApolloLink extends ApolloLink { | |
split = jest.fn(); | |
concat = jest.fn(); | |
request = jest.fn(); | |
setOnError = jest.fn(); | |
protected onError = jest.fn(); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { useEffect, useRef } from "react"; | |
/* | |
* A type-safe, polymorphic Box to wrap any forwardRef component | |
* with an Intersection Observer. Designed to be used in an | |
* unknown-length array map setting (infinite feed, etc.). | |
* | |
* The `callback` prop is closed over the passed-in `id` prop. | |
* This allows the `callback` prop to keep reference-equality | |
* between renders using something like `useCallback`, which |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
type ActionTypes = 'actionA' | 'actionB' | 'actionC' | 'actionNoPayload'; | |
type ActionPayloads = { | |
actionA: { payload: number }; | |
actionB: { payload: string }; | |
actionC: { foo: boolean; bar: boolean }; | |
}; | |
type Actions = { | |
[key in ActionTypes]: { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// React hook that returns a new key | |
// when its passed in value goes from false to true. | |
// Use this for resetting a child component, firing events, etc! | |
const useNewKey = bool => { | |
const [key, setKey] = useState(bool ? 0 : 1); | |
const newKey = Boolean(bool) === Boolean(key % 2) ? key + 1 : key; | |
useEffect(() => { | |
setKey(newKey); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
type DeepRequiredNonNullable<T> = T extends null | undefined | |
? never | |
: (T extends (infer ElementType)[] | |
? DeepRequiredNonNullable<ElementType>[] | |
: (T extends Record<string | number, any> | |
? { [key in keyof T]-?: DeepRequiredNonNullable<T[key]> } | |
: T)); | |
// Number test | |
type BadPrimitive = number | null | undefined | string; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const areUnsortedArraysEqual = (...arrs) => { | |
const everyEqual = ([first, ...arr], isEqual) => | |
arr.every(item => isEqual(first, item)); | |
return ( | |
everyEqual(arrs, (first, arr) => arr.length === first.length) && | |
everyEqual( | |
arrs.map(arr => | |
arr.reduce( | |
(map, item) => map.set(item, (map.get(item) || 0) + 1), |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Thanks to eddmann.com/posts/cartesian-product-in-javascript | |
const cartesianProduct = (...sets) => | |
sets.reduce((sets, set) => sets.flatMap(x => set.map(y => [...x, y])), [[]]); | |
cartesianProduct( | |
['a', 'b', 'c'], | |
['x', 'y', 'z'], | |
); |