chenglou

Interesting part (unmounting & API) is at the end if you're not interested in the rest =).

Stress Tests

This animation proposal is just an attempt. In case it doesn't work out, I've gathered a few examples that can test the power of a future animation system.

1. Parent is an infinitely spinning ball, and has a child ball that is also spinning. Clicking on the parent causes child to reverse spinning direction. This tests the ability of the animation system to compose animation, not in the sense of applying multiple interpolations to one or more variables passed onto the child (this should be trivial), but in the sense that the parent's constantly updating at the same time as the child, and has to ensure that it passes the animation commands correctly to it. This also tests that we can still intercept these animations (the clicking) and immediately change their configuration instead of queueing them.

2. Typing letters and let them fly in concurrently. This tests concurrency, coordination of an array of ch

chenglou

let routes = {
  // Regular JS regex over cleaned up URL.
  'book/(\\d+)?/edit': (id) => console.log('handleBookEdit', id),
  'book/(\\d+)?/.+': (_id, _) => console.log('noSuchBookOperation'),
  'book/(\\d+)?': (id) => console.log('getBook', id),

  'shop/(\\d+)?/(\\d+)?': (a, b) => console.log('showSecretShopPage', a, b),
  'shop/index': () => console.log('showShoppingPage'),
  'shop/(.+)': (rest) => console.log('nestedMatch', rest),
  'shop': () => console.log('showShoppingPage'),

chenglou

function pointsOnEllipse1(cx, cy, rx, ry, n) {
  const points = Array(n);

  const step = Math.PI / (n / 2);
  let sin = 0;
  let cos = 1;

  const a = Math.cos(step);
  const b = Math.sin(step);

chenglou

/* Infinite stream of numbers! 
Format: `[number, suspendedStream]` where suspendedStream is really just a
function that, upon calling, returns another `[number, suspendedStream]`.
*/

function head(a) {
  return a[0];
}

function tail(a) {

chenglou

// bindings can be isolated/upstreamed. I'm inlining it just for the example
type request;
type response;
[@bs.new] external makeXMLHttpRequest: unit => request = "XMLHttpRequest";
[@bs.send] external addEventListener: (request, string, unit => unit) => unit = "addEventListener";
[@bs.get] external response: request => response = "response";
[@bs.send] external open_: (request, string, string) => unit = "open";
[@bs.send] external send: request => unit = "send";
[@bs.send] external abort: request => unit = "abort";
// =========

chenglou

// This is a proper alternative to
// https://github.com/BuckleScript/bucklescript/blob/b9508105b1a35537bdea9a1fabd10f6c65f776b4/jscomp/bsb/templates/react-hooks/src/FetchedDogPictures/FetchedDogPictures.re#L14
// The one in that file uses Promise, but that's *wrong*.
// We only used promise as a demo of its API. We'll remove it soon.

// As you can see below, the pure XMLHttpRequest code is just as clean,
// less mysterious for all, more performant, extensible, and actually correct.

// Ignore these externals for now. They're just for illustration
// purposes. I just copy pasted the Js code from

chenglou

key is pretty much crucial for state perservation in React. As of React 0.13 it can't do the following things:

• Clone state

<Comp key={1} /><Comp key={1} />

• Preserve component state across different parents:

chenglou

(+) infix operator

Before:

Cn.("one" + "two" + "three")

After:

`one two three`

append

chenglou

# npm/make/brew autocompletions are super slow. Disable them so that auto-fu's
# completion doesn't trigger for these
noopt() {}
compdef noopt npm
compdef noopt make
compdef noopt brew

# Fork with cleaned-up readme:
# https://github.com/HerringtonDarkholme/auto-fu.zsh

chenglou

open Result
open TopTypes
open Infix

let extend = (obj, items) => Json.obj(obj) |?>> current => Json.Object(current @ items)

let log = Log.log

let maybeHash = (h, k) => if Hashtbl.mem(h, k) { Some(Hashtbl.find(h, k)) } else { None }