andymatuschak

A composable pattern for pure state machines with effects

State machines are everywhere in interactive systems, but they're rarely defined clearly and explicitly. Given some big blob of code including implicit state machines, which transitions are possible and under what conditions? What effects take place on what transitions?

There are existing design patterns for state machines, but all the patterns I've seen complect side effects with the structure of the state machine itself. Instances of these patterns are difficult to test without mocking, and they end up with more dependencies. Worse, the classic patterns compose poorly: hierarchical state machines are typically not straightforward extensions. The functional programming world has solutions, but they don't transpose neatly enough to be broadly usable in mainstream languages.

Here I present a composable pattern for pure state machiness with effects,

yelouafi

import React, { Component } from 'react'
import { runSaga, delay } from 'redux-saga'
import { take, put, call } from 'redux-saga/effects'

// helper functions
const bindFunc = (comp, method) => (...args) => method.apply(comp, args)
const bindSaga = (comp, method) => (...args) => runSaga(method.apply(comp, args), {})

export default class Counter extends React.Component {

knowbody

// quick snippet to check the connection in your RN app
// dispatches an `setIsConnected` action every time the NetInfo changes (on/off network)

componentDidMount() {
  const dispatchConnected = isConnected => this.props.dispatch(setIsConnected(isConnected));

  NetInfo.isConnected.fetch().then().done(() => {
    NetInfo.isConnected.addEventListener('change', dispatchConnected);
  });
}

capaj

import React from 'react'
import {observer} from 'mobx-react'
import {observable} from 'mobx'

const state = observable({
  value: 0
})

const Comp = (props) => {
  return <div onClick={() => state.value++}>click to increase counter value: {state.value}</div>

sibelius

README

Why this transform is necessary?

Until React Native 24, you import React from 'react-native' package, but this will change on RN 25, you will need to import React from 'react'. You probably have many files that does this, so I've created a codemod to save you a bunch of time

How to use this

• Install jscodeshif

yelouafi

// Observable is an Union Type, with the following variants
const Empty   = () => ['EMPTY']
const Cons    = (head, tail) => ['CONS', head, tail]
const Future  = promise => ['FUTURE', promise]

// race between 2 promises; each promise will resolve to a lazy value
const lazyRace = (p1, p2) => Promise.race([p1,p2]).then(lazy => lazy())

// function composition
const compose = (...fns) => (arg) => fns.reduceRight((res, f) => f(res), arg)

jorangreef

#!/bin/bash
# Invoke this script with a relative '.app' path, for example:
# codesign-electron.sh "darwin-x64/Electron.app"

# 1. Run the following command to get a list of identities:
# security find-identity

# 2. Now set the value of the identity variable below to the identity you want to use:
identity="Developer ID Application: ... (...)"

remojansen

function logClass(target: any) {
 
  // save a reference to the original constructor
  var original = target;
 
  // a utility function to generate instances of a class
  function construct(constructor, args) {
    var c : any = function () {
      return constructor.apply(this, args);
    }

adamreisnz

Setup GitHub issue labels script

MoOx

// go on you labels pages
// eg https://github.com/cssnext/cssnext/labels
// paste this script in your console
// copy the output and now you can import it using https://github.com/popomore/github-labels !

var labels = [];
[].slice.call(document.querySelectorAll(".label-link"))
.forEach(function(element) {
  labels.push({
    name: element.textContent.trim(),