In this tutorial we're going to build a set of parser combinators.

What is a parser combinator?

We'll answer the above question in 2 steps

  1. what is a parser?
  2. and.. what is a parser combinator?

So first question: What is parser?

View App.js
import React from 'react';
import reclass from './reclass';
import Greeter from './Greeter';
function App(ctx) {
ctx.state = { civility: 'Mr.' };
function changeCivility(e) {
ctx.setState({ civility: });
View SimpleSagaMiddleware.html
<!doctype html>
<html lang="en">
const sagaMiddleware = store => gen => {
var resolve, reject
var done = new Promise((res, rej) => {
resolve = res


In Redux, reducer composition with combineReducers offers a powerful way to handle complex update logic of an application. A reducer can encapsulate all the ways a part of the state is mutated because it can react to multiple types of actions.

But in some cases there is also a need for another type of factoring: often the update logic is simple (for example setting a single value), and the there are many places in the state shape where the update logic is the same.

View Counter.jsx
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 {
View do-notation.sjs
syntax seq = function (ctx) {
let monad =;
let bodyCtx =;
function next() {
let result
let n =
if(n.done) return #``
View data-driven.js
// Getter a :: () -> a
// gmap :: ((a -> b), Getter a), Getter b
function gmap(fn, getter) {
return () => fn(getter())
// gcombine2 :: ((a,b) -> c, Getter a, Getter ab) -> Getter c
function gcombine2(fn, getter1, getter2) {
View redux-obs-tree.html
<!DOCTYPE html>
<title>Redux basic example</title>
<script src=""></script>
<script src="redux-dirty.js" charset="utf-8"></script>
View rawc.html
<!DOCTYPE html>
<meta charset="utf-8">
<title>Raw DOM Nostalgia</title>
.done {
text-decoration: line-through;
View model-helpers.js
"use strict"
const assign = Object.assign
function push(arr, item) {
let newArr = (arr && arr.slice()) || []
return newArr