Skip to content

Instantly share code, notes, and snippets.

💭
Copying and pasting from StackOverflow

Cameron Nokes ccnokes

💭
Copying and pasting from StackOverflow
Block or report user

Report or block ccnokes

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
@ccnokes
ccnokes / ObservableMap.ts
Last active Nov 5, 2019
A Map class with built-in event emitter that emits a `update` event whenever something changes
View ObservableMap.ts
class ObservableMap<K, V> extends Map<K, V> {
readonly events = new EventEmitter();
set(key: K, value: V) {
let previousValue = this.get(key);
super.set(key, value);
this.events.emit("update", {
key,
action: "set",
previousValue,
currentValue: this.get(key)
View event-emitter.js
class EventEmitter {
constructor() {
this.target = new EventTarget();
}
on(eventName, listener) {
return this.target.addEventListener(eventName, listener);
}
once(eventName, listener) {
return this.target.addEventListener(eventName, listener, { once: true });
}
@ccnokes
ccnokes / event-emitter.js
Created Oct 30, 2019
Event emitter using the native DOM APIs: EventTarget and CustomEvent
View event-emitter.js
// Who needs eventemitter3, mitt, or some other library when you can use native DOM APIs? 😁
let eventEmitter = new EventTarget();
eventEmitter.addEventListener('test', console.log); // CustomEvent { type: 'test', detail: 123, ... }
eventEmitter.dispatchEvent(new CustomEvent('test', { detail: 123 }));
@ccnokes
ccnokes / wait-with-abortsignal.js
Last active Sep 11, 2019
Use AbortController to implement custom async task cancelling logic. Expounded upon here: https://cameronnokes.com/blog/cancelling-async-tasks-with-abortcontroller/
View wait-with-abortsignal.js
function wait(ms, opts = {}) {
return new Promise((resolve, reject) => {
let timerId = setTimeout(resolve, ms);
if (opts.signal) {
// implement aborting logic for our async operation
opts.signal.addEventListener('abort', event => {
clearTimeout(timerId);
reject(event);
});
}
@ccnokes
ccnokes / AbortController.ts
Created Aug 22, 2019
Minimal AbortController implementation for node.js that doesn't have to shim DOM stuff
View AbortController.ts
import { EventEmitter } from 'events';
class AbortController {
private events = new EventEmitter();
aborted = false;
signal = {
get aborted() {
return this.aborted;
},
@ccnokes
ccnokes / idObj.ts
Last active Aug 22, 2019
Sometimes in React you need a unique `key` to represent an object's identity. Instead of generating an id when you fetch it from an API or generating an id on the fly or using indexes (both will lead to bugs), you can use this which gives you a stable, unique id for an object. Demo: https://codesandbox.io/s/nice-gauss-h424o. Demo with React: htt…
View idObj.ts
let map = new WeakMap(); // weakly holds all object refs (works in IE11+)
let n = 0; // global counter for ids
export function idObj(obj: any) {
if (map.has(obj)) {
return map.get(obj);
} else {
let key = String(++n);
map.set(obj, key);
return key;
@ccnokes
ccnokes / rafScheduler.ts
Created Jun 18, 2019
requestAnimationFrame scheduler
View rafScheduler.ts
/**
* A function for batching RAFs together
*/
export default function RAFScheduler() {
let queue = [];
let rafId;
let scheduled = false;
const DURATION = 10;
return function scheduleRaf(cb: () => void) {
@ccnokes
ccnokes / stash_to_patch.sh
Created Mar 28, 2019
Convert all stashes to patches in a git repository
View stash_to_patch.sh
#!/bin/bash
stash_count=$(git stash list | wc -l)
i=0
while [[ $i -lt $stash_count ]]; do
git stash show -p stash@{$i} > "stash-$i.patch"
i=$(( $i + 1 ))
done
@ccnokes
ccnokes / Batch.ts
Last active Oct 2, 2019
A class that manages the logic of batching items together within a timeframe and then passing those items to a function. Sandbox: https://codesandbox.io/s/v86lv7k89l
View Batch.ts
class Deferred<Type> {
promise: Promise<Type>;
// TODO type these
resolve: any;
reject: any;
then: any;
catch: any;
constructor() {
this.promise = new Promise((resolve, reject) => {
@ccnokes
ccnokes / SparseList.ts
Created Feb 22, 2019
A data structure that wraps a sparse array. Useful for when you know the total size of a list and need to represent it in its full size, but are lazy loading in sections of it. Sandbox: https://codesandbox.io/s/yvrv97k879
View SparseList.ts
class SparseList<T = any> {
private list: T[];
emptySlotsCount: number;
constructor(size: number) {
this.list = new Array(size);
this.emptySlotsCount = size;
}
get size() {
You can’t perform that action at this time.