Skip to content

Instantly share code, notes, and snippets.

Avatar

Daniel Steigerwald steida

View GitHub Profile
View createTypedWorker.ts
/**
* Typed Web Worker.
*
* type InputData = { name: string };
* type OutputData = { nameLength: number }
*
* // main.js
* const worker = createTypedWorker<InputData, OutputData>(worker);
*
* // worker.js
@steida
steida / FitText.tsx
Created Nov 7, 2021
Fit text to container for React Native for Web. Fast. Reliable. Done.
View FitText.tsx
import { pipe } from 'fp-ts/function';
import { lens } from 'monocle-ts';
import { memo, useLayoutEffect, useRef, useState } from 'react';
import { LayoutChangeEvent, Text, View } from 'react-native';
import { useTheme } from '../contexts/ThemeContext';
const isOverflown = ({
clientWidth,
clientHeight,
scrollWidth,
View createTheme.ts
import { ColorSchemeName, Platform, StyleSheet, ViewStyle } from 'react-native';
// AFAIK, Android has a problem with negative margins.
type RhythmSize = 'XXS' | 'XS' | 'Sm' | '' | 'Lg' | 'XL' | 'XXL';
type RhythmProp =
| `${
| 'm'
| 'p'
| `${'m' | 'p'}${'l' | 'r' | 't' | 'b' | 'v' | 'h'}`}${RhythmSize}`
| `${'w' | 'h' | `${'max' | 'min'}${'W' | 'H'}`}${RhythmSize}`
View Text.tsx
import Link, { LinkProps } from 'next/link';
import React, {
forwardRef,
ReactNode,
useCallback,
useMemo,
useState,
} from 'react';
import {
StyleSheet,
View Text.tsx
import Link from 'next/link';
import React, {
forwardRef,
ReactNode,
useCallback,
useMemo,
useState,
} from 'react';
import {
StyleSheet,
View useMutation.ts
import { either } from 'fp-ts';
import { constVoid } from 'fp-ts/lib/function';
import { pipe } from 'fp-ts/lib/pipeable';
import * as t from 'io-ts';
import { useCallback } from 'react';
import { Api } from '../types';
import { useApi } from './useApi';
import { Form, useForm } from './useForm';
export const useMutation = <
View useMutation.ts
import * as E from 'fp-ts/lib/Either';
import { absurd, constVoid } from 'fp-ts/lib/function';
import { pipe } from 'fp-ts/lib/pipeable';
import * as TE from 'fp-ts/lib/TaskEither';
import * as t from 'io-ts';
import { useCallback } from 'react';
import { Api, ApiError, FetchError } from '../types';
import { Form, useForm } from './useForm';
// Basically, every HTTP request is a mutation.
@steida
steida / setImmediate.ts
Created Oct 5, 2019
Minimal modern setImmediate polyfill
View setImmediate.ts
// Draft uses YuzuJS/setImmediate polyfill, which can be reduced to this code.
// But it seems request requestAnimationFrame is good enough.
// TODO: Will it work with queue fix?
// // https://github.com/google/closure-library/blob/master/closure/goog/async/nexttick.js#L209
const setImmediate = (() => {
const channel = new MessageChannel();
let head: any = {};
let tail = head;
channel.port1.onmessage = () => {
if (head.next !== undefined) {
View resolveImmediate.ts
// https://github.com/facebook/fbjs/blob/master/packages/fbjs/src/core/resolveImmediate.js
const resolvedPromise = Promise.resolve();
function throwNext(error: any) {
setTimeout(() => {
throw error;
}, 0);
}
View useRovingTabIndex.tsx
import React, {
useEffect,
createContext,
FunctionComponent,
useRef,
MutableRefObject,
useCallback,
useContext,
useReducer,
Reducer,