Skip to content

Instantly share code, notes, and snippets.

@n1ru4l
n1ru4l / makePushPullAsyncIterableIterator.ts
Created December 2, 2020 08:35
Without using Symbol.asyncIterator
type Deferred<T> = {
resolve: (value: T) => void;
reject: (value: unknown) => void;
promise: Promise<T>;
};
function createDeferred<T>(): Deferred<T> {
const d = {} as Deferred<T>;
d.promise = new Promise<T>((resolve, reject) => {
@n1ru4l
n1ru4l / use-reset-State.js
Created August 30, 2019 07:02
useResetState
const NO_VALUE_SYMBOL = Symbol("USE_RESET_STATE_NO_VALUE");
const useResetState = (createValue, deps = []) => {
const [, triggerRerender] = useState(createValue);
const stateRef = useRef(NO_VALUE_SYMBOL);
const depsRef = useRef(deps);
if (stateRef.current === NO_VALUE_SYMBOL) {
stateRef.current = createValue();
}
if (depsRef.current.some((value, index) => value !== deps[index])) {
@n1ru4l
n1ru4l / ContextPyramidOfDoomPreventer.tsx
Last active December 7, 2020 13:37
Having a lot of React Contexts?
import * as React from "react";
export type ComponentWithPropsTuple<TProps = any> = [
(props: TProps) => React.ReactElement,
TProps
];
/**
* This component allows rendering Components in a flat structure.
* Some components rely on a lot of differen context providers.
@n1ru4l
n1ru4l / AsyncIteratorUtilities.ts
Created September 21, 2020 16:05
AsyncIteratorUtilities.ts
export const map = <T, O>(map: (input: T) => Promise<O> | O) =>
async function* mapGenerator(asyncIterable: AsyncIterableIterator<T>) {
for await (const value of asyncIterable) {
yield map(value);
}
};
export const filter = <T, U extends T>(filter: (input: T) => input is U) =>
async function* filterGenerator(asyncIterable: AsyncIterableIterator<T>) {
@n1ru4l
n1ru4l / graphql-redis-subscriptions+2.1.2.patch
Last active September 21, 2020 14:34
Correct graphql-subscriptions asyncIterator typings
diff --git a/node_modules/graphql-redis-subscriptions/dist/redis-pubsub.d.ts b/node_modules/graphql-redis-subscriptions/dist/redis-pubsub.d.ts
index cc2e21e..870a2b8 100644
--- a/node_modules/graphql-redis-subscriptions/dist/redis-pubsub.d.ts
+++ b/node_modules/graphql-redis-subscriptions/dist/redis-pubsub.d.ts
@@ -13,7 +13,7 @@ export declare class RedisPubSub implements PubSubEngine {
publish<T>(trigger: string, payload: T): Promise<void>;
subscribe(trigger: string, onMessage: Function, options?: Object): Promise<number>;
unsubscribe(subId: number): void;
- asyncIterator<T>(triggers: string | string[], options?: Object): AsyncIterator<T>;
+ asyncIterator<T>(triggers: string | string[], options?: Object): AsyncIterableIterator<T>;
@n1ru4l
n1ru4l / use-async-clipboard-api.ts
Created May 6, 2020 07:41
Feature Detect AsyncClipboard API with TypeScript and provide it as a React hook
import * as React from "react";
interface ClipboardItem {
new (input: { [contentType: string]: Blob }): ClipboardItem;
}
type AsyncClipboardWriteFunction = (input: ClipboardItem) => Promise<void>;
declare global {
interface Window {
class Stack<TType extends any> {
#revision = 0;
#revisionOffset = 0;
#items = [] as Array<TType>;
#maximumSize: number;
constructor(maxiumSize = 100) {
if (maxiumSize < 1) {
throw new TypeError("Minimum 'maximumSize' is 1.");
}
export type OperatorMatcher<
  TProperty extends string = any,
  TPossibleTypes extends string = any,
  TInput extends { [key in TProperty]: TPossibleTypes } = any
> = {
  [Type in TPossibleTypes]: Operator<
    Extract<TInput, { [key in TProperty]: Type }>,
    any
@n1ru4l
n1ru4l / example.js
Last active August 29, 2019 09:42
React onClickOutside hook
const MyComponent = () => {
const ref = useOnClickOutside(() => alert("sup"));
return <div ref={ref}>Shoop</div>;
}
@n1ru4l
n1ru4l / use-debounced-input-value.ts
Last active June 7, 2019 10:43
Debounce Input Value Hook
import { useEffect, useState } from "react";
const useDebouncedInputValue = (
initialValue: string,
debounceDuration: number = 200
): [string, string, (val: string) => void] => {
const [currentValue, setCurrentValue] = useState(initialValue);
const [debouncedValue, setDebouncedValue] = useState(currentValue);
useEffect(() => {