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
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
aleclarson / Controller.md
Last active Aug 5, 2019
react-spring internals
View Controller.md

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.
View RCTHotKey.md

<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
View RCTLog.mm
#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({
...options,
queries: {
users: gql`...`,
}
@aleclarson
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 => pkg.name === 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
aleclarson / ..README.md
Last active Jun 4, 2019
Use build-if-changed anywhere!
View ..README.md

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.