Skip to content

Instantly share code, notes, and snippets.

Cookin' up somethin' good

Alec Larson aleclarson

Cookin' up somethin' good
Block or report user

Report or block aleclarson

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
aleclarson / useSubscriber.jsx
Created Aug 16, 2019
useSubscriber: Baked-in hook that lets subscribers notify React when data goes stale
View useSubscriber.jsx
import {useSubscriber} from 'react'
const MyComponent = (props) => {
// Get the current value of an observable
const value = props.value.get()
// Subscribe to the observable in the render phase
useSubscriber(forceUpdate => {
// This code runs immediately, instead of acting like "useEffect"
const unsub = props.value.subscribe(() => {
aleclarson /
Last active Aug 5, 2019
react-spring internals

The Controller class

Valid for v9.0.0+

  • Every animation is managed by a Controller instance.
  • Many controllers usually exist. For example, every useSpring call has its own controller.
  • Every controller has a flat map of animated values and/or animated arrays.
  • The update method pushes the given props object onto the "update queue". The props objects remain queued until the start method is called.
  • When start is called, animations are created and/or updated.

<HotKey> for react-native-macos

There are two types of hotkeys: global and local.

  • Global hotkeys work even when the application is inactive.
  • Local hotkeys only work when the application is active.

The implementation for global hotkeys would be adapted from davedelong/DDHotKey.

The implementation for local hotkeys would use the RCTKeyCommands class that already exists.

View bind.ts
export interface Lens<T> {
(): T
(newValue: T): void
export function bind<T>(get: () => T, set: (newValue: T) => void): Lens<T>
export function bind<T, U>(target: Map<T, U>, key: T): Lens<U>
export function bind<T extends object, P extends keyof T>(
target: T,
key: P
#include <os/log.h>
RCTLogFunction RCTDefaultLogFunction = ^(
RCTLogLevel level,
__unused RCTLogSource source,
NSString *fileName,
NSNumber *lineNumber,
NSString *message
View vana-gql.tsx
import * as React from 'react'
import { UserView } from './components/user'
import gql from 'vana/gql'
// Create a data store with vana.useGraphQL
const data = gql.create({
queries: {
users: gql`...`,
aleclarson / runTopological.ts
Created Jun 10, 2019
Run an async action in topological order (dependencies run first)
View runTopological.ts
export const runTopological = <T>(
packages: PackageJson[],
action: (pkg: PackageJson) => Promise<T>
): Promise<T[]> => {
const promises: Promise<T>[] = []
const run = (pkg: PackageJson, i: number) =>
promises[i] ||
(promises[i] = Promise.all(
Object.keys(pkg.dependencies || {}).map(name => {
const i = packages.findIndex(pkg => === name)
View createKeyedInterpolator.ts
// Convert "translate(10px) rotate(0)" into ["translate", "rotate"]
// This helps interpolate strings of different arity.
const keyRegex = /(?:^| )([\w-]+)\(([^ ,]+(?:(?:,[ ]*|[ ]+)[^ ,)]+)*)\)/g
* Create a specialized interpolator for strings like:
* "translate(...) rotate(...)"
View debug.js
const debug = (name, val) => {
console.log(name, val)
return val
const debugFn = (name, fn) => {
return (...args) => {
console.log(name + ':arguments %O', args)
const result = fn(...args)
aleclarson /
Last active Jun 4, 2019
Use build-if-changed anywhere!

Want to use build-if-changed on packages without the risk of forgetting to add .bic_cache to their .gitignore files before you commit?

Just add the following to your ~/.gitconfig and ~/.gitignore files!

You can’t perform that action at this time.