requirebin sketch

index.js

var compose = require("fn.js").compose;
var pipeline = require("fn.js").pipeline;
var partial = require("fn.js").partial;
var insertCss = require("insert-css");

insertCss("body { padding: 20px } \
           .selected { font-weight: bold; color: red; font-family: Consolas; font-size: 18px; }\
           .important { color: blue }");

// string, string returns DomElement
// el :: string -> string -> DomElement
function el(type, txt) {
  var elm = document.createElement(type);
  elm.textContent = txt;
  return elm;
}

// string, string returns DomElement
// el :: DomElement -> string -> DomElement
function addClassname(txt, el) {
	el.classList.add(txt);
  return el;
}

// appendToBody :: DomElement -> ()
function appendToBody(el) {
  document.body.appendChild(el);
}

// findElByClass :: string -> DomElement
function findElByClass(name) {
  return document.querySelector("." + name);
}

// functor map.
function fmap(fn) {
  return function (value) {  
    // console.log("fmapping ", value);
  	return value.fmap(fn);
  }
}

function Nothing() {
  return { 
    value: null, 
    fmap: function () {
      return Nothing();
    }
  }; 
}

function Maybe(value) {
  return {
    value: value,
    fmap: function (fn) {
      if (value) {
        return Maybe(fn(value));
      }
      
      return Nothing();
    }
  }
}
  
var div = partial(el, "div");
var addSelected = partial(addClassname, "selected");

var el1 = pipeline(div, addSelected, appendToBody);
var el2 = pipeline(div, appendToBody);

var addImportant = partial(addClassname, "important");

var addImportantToElWithClass = pipeline(fmap(findElByClass), fmap(addImportant));

el1("Hello world");
el2("Fooy is cooly");

var r = addImportantToElWithClass(Maybe("active"));

if (!r.value) {
  alert("NOTHING"); 
}

minified.js

require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({"fn.js":[function(require,module,exports){(function(root,factory){if(typeof define==="function"&&define.amd){define(factory)}else if(typeof exports==="object"){module.exports=factory(require,exports,module)}else{root.fn=factory()}})(this,function(require,exports,module){"use strict";var fn={};fn.toArray=function(collection){return[].slice.call(collection)};fn.cloneArray=fn.toArray;fn.op={"+":function(value1,value2){return value1+value2},"-":function(value1,value2){return value1-value2},"*":function(value1,value2){return value1*value2},"/":function(value1,value2){return value1/value2},"==":function(value1,value2){return value1==value2},"===":function(value1,value2){return value1===value2}};fn.type=function(value){return value==null?""+value:{}.toString.call(value).slice(8,-1).toLowerCase()};fn.is=function(type,value){return type===fn.type(value)};fn.apply=function(handler,args){return handler.apply(null,args)};fn.concat=function(){var args=fn.toArray(arguments);var first=args[0];if(!fn.is("array",first)&&!fn.is("string",first)){first=args.length?[first]:[]}return first.concat.apply(first,args.slice(1))};fn.partial=function(){var args=fn.toArray(arguments);var handler=args[0];var partialArgs=args.slice(1);return function(){return fn.apply(handler,fn.concat(partialArgs,fn.toArray(arguments)))}};fn.identity=function(arg){return arg};var currier=function makeCurry(rightward){return function(handler,arity){if(handler.curried){return handler}arity=arity||handler.length;var curry=function curry(){var args=fn.toArray(arguments);if(args.length>=arity){var transform=rightward?"reverse":"identity";return fn.apply(handler,fn[transform](args))}var inner=function(){return fn.apply(curry,args.concat(fn.toArray(arguments)))};inner.curried=true;return inner};curry.curried=true;return curry}};fn.curry=currier(false);fn.curryRight=currier(true);fn.properties=function(object){var accumulator=[];for(var property in object){if(object.hasOwnProperty(property)){accumulator.push(property)}}return accumulator};fn.each=function(handler,collection,params){for(var index=0,collectionLength=collection.length;index<collectionLength;index++){fn.apply(handler,fn.concat([collection[index],index,collection],params))}};fn.reduce=function(handler,accumulator,collection,params){fn.each(function(value,index){accumulator=fn.apply(handler,fn.concat([accumulator,value,index],params))},collection);return accumulator};fn.filter=function(expression,collection){return fn.reduce(function(accumulator,item,index){expression(item,index)&&accumulator.push(item);return accumulator},[],collection)};fn.op["++"]=fn.partial(fn.op["+"],1);fn.op["--"]=fn.partial(fn.op["+"],-1);fn.map=function(handler,collection,params){return fn.reduce(function(accumulator,value,index){accumulator.push(fn.apply(handler,fn.concat([value,index,collection],params)));return accumulator},[],collection)};fn.reverse=function(collection){return fn.cloneArray(collection).reverse()};fn.pipeline=function(){var functions=fn.toArray(arguments);return function(){return fn.reduce(function(args,func){return[fn.apply(func,args)]},fn.toArray(arguments),functions)[0]}};fn.compose=function(){return fn.apply(fn.pipeline,fn.reverse(arguments))};fn.prop=fn.curry(function(name,object){return object[name]});fn.merge=function(){return fn.reduce(function(accumulator,value){fn.each(function(property){accumulator[property]=value[property]},fn.properties(value));return accumulator},{},fn.toArray(arguments))};fn.memoize=function memoize(handler,serializer){var cache={};return function(){var args=fn.toArray(arguments);var key=serializer?serializer(args):memoize.serialize(args);return key in cache?cache[key]:cache[key]=fn.apply(handler,args)}};fn.memoize.serialize=function(values){return fn.type(values[0])+"|"+JSON.stringify(values[0])};fn.flip=function(handler){return function(){return fn.apply(handler,fn.reverse(arguments))}};fn.delay=function(handler,msDelay){return setTimeout(handler,msDelay)};fn.delayFor=fn.flip(fn.delay);fn.delayed=function(handler,msDelay){return function(){return fn.delay(fn.partial(handler,fn.toArray(arguments)),msDelay)}};fn.delayedFor=fn.flip(fn.delayed);fn.async=fn.compose(fn.partial(fn.delayedFor,0));fn.throttle=function(handler,msDelay){var throttling;return function(){var args=fn.toArray(arguments);if(throttling){return}throttling=fn.delay(function(){throttling=false;fn.apply(handler,args)},msDelay)}};fn.debounce=function(handler,msDelay){var debouncing;return function(){var args=fn.toArray(arguments);if(debouncing){clearTimeout(debouncing)}debouncing=fn.delay(function(){debouncing=false;fn.apply(handler,args)},msDelay)}};return fn})},{}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({"fn.js":[function(require,module,exports){(function(root,factory){if(typeof define==="function"&&define.amd){define(factory)}else if(typeof exports==="object"){module.exports=factory(require,exports,module)}else{root.fn=factory()}})(this,function(require,exports,module){"use strict";var fn={};fn.toArray=function(collection){return[].slice.call(collection)};fn.cloneArray=fn.toArray;fn.op={"+":function(value1,value2){return value1+value2},"-":function(value1,value2){return value1-value2},"*":function(value1,value2){return value1*value2},"/":function(value1,value2){return value1/value2},"==":function(value1,value2){return value1==value2},"===":function(value1,value2){return value1===value2}};fn.type=function(value){return value==null?""+value:{}.toString.call(value).slice(8,-1).toLowerCase()};fn.is=function(type,value){return type===fn.type(value)};fn.apply=function(handler,args){return handler.apply(null,args)};fn.concat=function(){var args=fn.toArray(arguments);var first=args[0];if(!fn.is("array",first)&&!fn.is("string",first)){first=args.length?[first]:[]}return first.concat.apply(first,args.slice(1))};fn.partial=function(){var args=fn.toArray(arguments);var handler=args[0];var partialArgs=args.slice(1);return function(){return fn.apply(handler,fn.concat(partialArgs,fn.toArray(arguments)))}};fn.identity=function(arg){return arg};var currier=function makeCurry(rightward){return function(handler,arity){if(handler.curried){return handler}arity=arity||handler.length;var curry=function curry(){var args=fn.toArray(arguments);if(args.length>=arity){var transform=rightward?"reverse":"identity";return fn.apply(handler,fn[transform](args))}var inner=function(){return fn.apply(curry,args.concat(fn.toArray(arguments)))};inner.curried=true;return inner};curry.curried=true;return curry}};fn.curry=currier(false);fn.curryRight=currier(true);fn.properties=function(object){var accumulator=[];for(var property in object){if(object.hasOwnProperty(property)){accumulator.push(property)}}return accumulator};fn.each=function(handler,collection,params){for(var index=0,collectionLength=collection.length;index<collectionLength;index++){fn.apply(handler,fn.concat([collection[index],index,collection],params))}};fn.reduce=function(handler,accumulator,collection,params){fn.each(function(value,index){accumulator=fn.apply(handler,fn.concat([accumulator,value,index],params))},collection);return accumulator};fn.filter=function(expression,collection){return fn.reduce(function(accumulator,item,index){expression(item,index)&&accumulator.push(item);return accumulator},[],collection)};fn.op["++"]=fn.partial(fn.op["+"],1);fn.op["--"]=fn.partial(fn.op["+"],-1);fn.map=function(handler,collection,params){return fn.reduce(function(accumulator,value,index){accumulator.push(fn.apply(handler,fn.concat([value,index,collection],params)));return accumulator},[],collection)};fn.reverse=function(collection){return fn.cloneArray(collection).reverse()};fn.pipeline=function(){var functions=fn.toArray(arguments);return function(){return fn.reduce(function(args,func){return[fn.apply(func,args)]},fn.toArray(arguments),functions)[0]}};fn.compose=function(){return fn.apply(fn.pipeline,fn.reverse(arguments))};fn.prop=fn.curry(function(name,object){return object[name]});fn.merge=function(){return fn.reduce(function(accumulator,value){fn.each(function(property){accumulator[property]=value[property]},fn.properties(value));return accumulator},{},fn.toArray(arguments))};fn.memoize=function memoize(handler,serializer){var cache={};return function(){var args=fn.toArray(arguments);var key=serializer?serializer(args):memoize.serialize(args);return key in cache?cache[key]:cache[key]=fn.apply(handler,args)}};fn.memoize.serialize=function(values){return fn.type(values[0])+"|"+JSON.stringify(values[0])};fn.flip=function(handler){return function(){return fn.apply(handler,fn.reverse(arguments))}};fn.delay=function(handler,msDelay){return setTimeout(handler,msDelay)};fn.delayFor=fn.flip(fn.delay);fn.delayed=function(handler,msDelay){return function(){return fn.delay(fn.partial(handler,fn.toArray(arguments)),msDelay)}};fn.delayedFor=fn.flip(fn.delayed);fn.async=fn.compose(fn.partial(fn.delayedFor,0));fn.throttle=function(handler,msDelay){var throttling;return function(){var args=fn.toArray(arguments);if(throttling){return}throttling=fn.delay(function(){throttling=false;fn.apply(handler,args)},msDelay)}};fn.debounce=function(handler,msDelay){var debouncing;return function(){var args=fn.toArray(arguments);if(debouncing){clearTimeout(debouncing)}debouncing=fn.delay(function(){debouncing=false;fn.apply(handler,args)},msDelay)}};return fn})},{}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({"fn.js":[function(require,module,exports){(function(root,factory){if(typeof define==="function"&&define.amd){define(factory)}else if(typeof exports==="object"){module.exports=factory(require,exports,module)}else{root.fn=factory()}})(this,function(require,exports,module){"use strict";var fn={};fn.toArray=function(collection){return[].slice.call(collection)};fn.cloneArray=fn.toArray;fn.op={"+":function(value1,value2){return value1+value2},"-":function(value1,value2){return value1-value2},"*":function(value1,value2){return value1*value2},"/":function(value1,value2){return value1/value2},"==":function(value1,value2){return value1==value2},"===":function(value1,value2){return value1===value2}};fn.type=function(value){return value==null?""+value:{}.toString.call(value).slice(8,-1).toLowerCase()};fn.is=function(type,value){return type===fn.type(value)};fn.apply=function(handler,args){return handler.apply(null,args)};fn.concat=function(){var args=fn.toArray(arguments);var first=args[0];if(!fn.is("array",first)&&!fn.is("string",first)){first=args.length?[first]:[]}return first.concat.apply(first,args.slice(1))};fn.partial=function(){var args=fn.toArray(arguments);var handler=args[0];var partialArgs=args.slice(1);return function(){return fn.apply(handler,fn.concat(partialArgs,fn.toArray(arguments)))}};fn.identity=function(arg){return arg};var currier=function makeCurry(rightward){return function(handler,arity){if(handler.curried){return handler}arity=arity||handler.length;var curry=function curry(){var args=fn.toArray(arguments);if(args.length>=arity){var transform=rightward?"reverse":"identity";return fn.apply(handler,fn[transform](args))}var inner=function(){return fn.apply(curry,args.concat(fn.toArray(arguments)))};inner.curried=true;return inner};curry.curried=true;return curry}};fn.curry=currier(false);fn.curryRight=currier(true);fn.properties=function(object){var accumulator=[];for(var property in object){if(object.hasOwnProperty(property)){accumulator.push(property)}}return accumulator};fn.each=function(handler,collection,params){for(var index=0,collectionLength=collection.length;index<collectionLength;index++){fn.apply(handler,fn.concat([collection[index],index,collection],params))}};fn.reduce=function(handler,accumulator,collection,params){fn.each(function(value,index){accumulator=fn.apply(handler,fn.concat([accumulator,value,index],params))},collection);return accumulator};fn.filter=function(expression,collection){return fn.reduce(function(accumulator,item,index){expression(item,index)&&accumulator.push(item);return accumulator},[],collection)};fn.op["++"]=fn.partial(fn.op["+"],1);fn.op["--"]=fn.partial(fn.op["+"],-1);fn.map=function(handler,collection,params){return fn.reduce(function(accumulator,value,index){accumulator.push(fn.apply(handler,fn.concat([value,index,collection],params)));return accumulator},[],collection)};fn.reverse=function(collection){return fn.cloneArray(collection).reverse()};fn.pipeline=function(){var functions=fn.toArray(arguments);return function(){return fn.reduce(function(args,func){return[fn.apply(func,args)]},fn.toArray(arguments),functions)[0]}};fn.compose=function(){return fn.apply(fn.pipeline,fn.reverse(arguments))};fn.prop=fn.curry(function(name,object){return object[name]});fn.merge=function(){return fn.reduce(function(accumulator,value){fn.each(function(property){accumulator[property]=value[property]},fn.properties(value));return accumulator},{},fn.toArray(arguments))};fn.memoize=function memoize(handler,serializer){var cache={};return function(){var args=fn.toArray(arguments);var key=serializer?serializer(args):memoize.serialize(args);return key in cache?cache[key]:cache[key]=fn.apply(handler,args)}};fn.memoize.serialize=function(values){return fn.type(values[0])+"|"+JSON.stringify(values[0])};fn.flip=function(handler){return function(){return fn.apply(handler,fn.reverse(arguments))}};fn.delay=function(handler,msDelay){return setTimeout(handler,msDelay)};fn.delayFor=fn.flip(fn.delay);fn.delayed=function(handler,msDelay){return function(){return fn.delay(fn.partial(handler,fn.toArray(arguments)),msDelay)}};fn.delayedFor=fn.flip(fn.delayed);fn.async=fn.compose(fn.partial(fn.delayedFor,0));fn.throttle=function(handler,msDelay){var throttling;return function(){var args=fn.toArray(arguments);if(throttling){return}throttling=fn.delay(function(){throttling=false;fn.apply(handler,args)},msDelay)}};fn.debounce=function(handler,msDelay){var debouncing;return function(){var args=fn.toArray(arguments);if(debouncing){clearTimeout(debouncing)}debouncing=fn.delay(function(){debouncing=false;fn.apply(handler,args)},msDelay)}};return fn})},{}]},{},[]);require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({"insert-css":[function(require,module,exports){var inserted={};module.exports=function(css,options){if(inserted[css])return;inserted[css]=true;var elem=document.createElement("style");elem.setAttribute("type","text/css");if("textContent"in elem){elem.textContent=css}else{elem.styleSheet.cssText=css}var head=document.getElementsByTagName("head")[0];if(options&&options.prepend){head.insertBefore(elem,head.childNodes[0])}else{head.appendChild(elem)}}},{}]},{},[]);var compose=require("fn.js").compose;var pipeline=require("fn.js").pipeline;var partial=require("fn.js").partial;var insertCss=require("insert-css");insertCss("body { padding: 20px }            .selected { font-weight: bold; color: red; font-family: Consolas; font-size: 18px; }           .important { color: blue }");function el(type,txt){var elm=document.createElement(type);elm.textContent=txt;return elm}function addClassname(txt,el){el.classList.add(txt);return el}function appendToBody(el){document.body.appendChild(el)}function findElByClass(name){return document.querySelector("."+name)}function fmap(fn){return function(value){return value.fmap(fn)}}function Nothing(){return{value:null,fmap:function(){return Nothing()}}}function Maybe(value){return{value:value,fmap:function(fn){if(value){return Maybe(fn(value))}return Nothing()}}}var div=partial(el,"div");var addSelected=partial(addClassname,"selected");var el1=pipeline(div,addSelected,appendToBody);var el2=pipeline(div,appendToBody);var addImportant=partial(addClassname,"important");var addImportantToElWithClass=pipeline(fmap(findElByClass),fmap(addImportant));el1("Hello world");el2("Fooy is cooly");var r=addImportantToElWithClass(Maybe("active"));if(!r.value){alert("NOTHING")}

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "fn.js": "0.8.1",
    "insert-css": "0.2.0"
  }
}

page-head.html

<style type='text/css'>html, body { margin: 0; padding: 0; border: 0; }
body, html { height: 100%; width: 100%; }</style>

requirebin.md

made with requirebin