Skip to content

Instantly share code, notes, and snippets.

View mrjacobbloom's full-sized avatar
🎄

Jacob mrjacobbloom

🎄
View GitHub Profile
/**
* React DevTools keeps not working for me lately. So here's a function that,
* given a DOM element, finds its nearest ancestor component. Paste it into
* the console and call `getParentComponent($1)`. It Probably only works when
* React is in dev mode.
*
* @param {HTMLElement} elem - Input DOM element
* @returns {import('react').ReactElement} Nearest parent component.
*/
const getParentComponent = (elem) => {
@mrjacobbloom
mrjacobbloom / JLox-AST.ts
Last active July 23, 2021 16:41
A way to structure your Lox AST file in TypeScript that sidesteps code generation and still uses the visitor pattern
/**
* Here's a way to structure your Lox AST file in TypeScript that sidesteps code generation
* (Lox is the language you build in "Crafting Interpreters" by Bob Nystrom)
* Would it have been more TSy to have the AST nodes just be interfaces? Probably, but
* I wanted to follow the book and its visitor pattern.
*/
export abstract class Expr {
public accept<T>(visitor: ExprVisitor<T>): T {
// Decide what the correct visitXExpr method name should be using the class's name
/**
* How to extend/augment the types for a 3rd-party TypeScript module. For example, if its DefinitelyTyped typings are incomplete.
* (In most cases it's better to submit a pull request to DefinitelyTyped with the corrected types!)
*/
declare module 'quill' {
const OrigQuill: typeof import('../../../node_modules/@types/quill').Quill;
class Quill extends OrigQuill {
// In this case, we're extending the type for the Quill class if it's using the "Bubble" theme
public theme?: {
/*
* ELIZA
* ELIZA is a simple chatbot developed in the 1960s that acts like a Rogerian psychotherapist
* This is an attempt to port her into the TypeScript type system. By that, I mean all of the
* logic for this chatbot exists in the "types" side of TypeScript and is removed when you
* compile it to JavaScript. This is possible because TypeScript recently added very basic
* support for parsing string literal types (see https://github.com/microsoft/TypeScript/pull/40336)
*
* By Jacob Bloom @mrjacobbloom
* Prompts and responses adapted from here: https://github.com/codeanticode/eliza/blob/master/data/eliza.script
/**
* Represents a value 0-1 inclusive. Just here to help me keep my math straight
*/
type Normalized = number & { __normalized__: undefined };
interface RGB { r: number; g: number; b: number; }
// CONTROLS
const TEXT = 'John Doe';
const FG_COLOR: RGB = { r: 72, g: 125, b: 175 }; // note: bg color should be #FFEADA
@mrjacobbloom
mrjacobbloom / type-system-integer-addition.d.ts
Last active May 31, 2020 19:57
Integer addition in the TypeScript type system
// An implementation of arithmetic (well, of integer addition) in the TypeScript type system
// base-10 adaptation of this: https://blog.joshuakgoldberg.com/binary-arithmetic/
// note: this whole program is opposite endianness from the original article because Arabic numbers are RTL
type Digit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
/**
* Our integer type, a tuple of digits with length 1-6
* Note: for a simpler version with static-length Int, see the second revision of this gist
*/
@mrjacobbloom
mrjacobbloom / onChangeCurry.tsx
Last active May 14, 2020 22:17
TypeScript curried onChange handler for controlled input
import * as React from 'react';
import { Form, FormControl } from 'react-bootstrap';
interface IMyComponentState = {
foo: string;
bar: string;
}
export class MyComponent extends React.Component<{}, IMyComponentState> {
public state = {
@mrjacobbloom
mrjacobbloom / proposal-await-all.md
Last active November 19, 2019 19:05
A Syntax for Parallelism in ECMAScript: await.all {...}

A Syntax for Parallelism in ECMAScript: await.all {...}

This document proposes a new syntax for parallel promises in ECMAScript. Wherever await is available, the following syntax would also become available:

await.all {
  statement;
 statement;
@mrjacobbloom
mrjacobbloom / Undefined-polyfill.js
Last active June 25, 2019 15:56
Polyfill to add support for the global Undefined object to browsers that do not yet support it.
// Polyfill to add support for the global Undefined object to browsers that do not yet support it.
// Released into the public domain by Jacob Bloom
(() => {
const global_ = typeof globalThis !== 'undefined' ? globalThis :
typeof self !== 'undefined' ? self :
typeof window !== 'undefined' ? window :
typeof global !== 'undefined' ? global : null;
if (global_ === null) throw new Error('Cannot polyfill Undefined: unable to locate global object');
if('Undefined' in global_) return;
@mrjacobbloom
mrjacobbloom / swizzler.js
Last active March 14, 2019 23:47
Use JS proxies to make a `vec(1,2,3,4)` class that allows for swizzling like in GLSL -- https://www.khronos.org/opengl/wiki/Data_Type_(GLSL)#Swizzling
export class Vec {
constructor(...values) {
this.values = this.constructor.flatten(values);
this.self = this;
this.proxy = new Proxy(this, this.constructor.handler);
return this.proxy;
}
static flatten(values) {
const flatValues = [];
for(const value of values) {