DrBoolean

  render: function() {
    return (
      <div className="slds-notify-container">
        <div className="slds-notify slds-notify--alert" role="alert">
          <span className="slds-assistive-text">info</span>
          <button className="slds-button slds-notify__close slds-icon--small">
            <svg aria-hidden="true" className="slds-button__icon slds-button__icon--inverse" dangerouslySetInnerHTML={{__html:'<use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#close"></use>'}}>
            </svg>
            <span className="slds-assistive-text">Close</span>
          </button>

DrBoolean

var Notification = React.createClass({

  render: function() {
    var theme = this.props.theme || 'info';
    var themeClass = 'slds-theme--' + theme;
    var className = "slds-notify slds-notify-alert " + themeClass;

    return (
      <div className="slds-notify-container">
        <div className={className} role="alert">

DrBoolean

var Notification = function(variant) {
  var comp = React.createClass({
    render: function() {
      var theme = this.props.theme || 'info';
      var themeClass = 'slds-theme--' + theme;
      var className = "slds-notify slds-notify--" + variant + ' ' + themeClass;

      return (
        <div className="slds-notify-container">
          <div className={className} role="alert">

DrBoolean

var App = React.createClass({

  render: function() {
    return (
      <div>
        <Notification.Toast theme="error">
          <h2 className="slds-text-heading--small">Beware of the Trash Dragons!</h2>
        </Notification.Toast>
      </div>
    );

DrBoolean

var App = React.createClass({

  render: function() {
    return (
      <div>
        <Notification theme="error">
          <h2 className="slds-text-heading--small">Beware of the Trash Dragons!</h2>
        </Notification>
      </div>
    );

DrBoolean

// createView = {} -> Html

//+ setHtml :: String -> Html -> IO DOM
var setHtml = curry(function(sel, h){
  return new IO(function() {return jQuery(sel).html(h) })
})

var updateDom = compose(setHtml('#tag-cloud'), createView)
// IO(DOM)

DrBoolean

Debugging Functional

What's the problem

When working with ramda or lodash-fp, one may run into some rather cryptic error messages. When trying to console.log a function we're presented with the guts of some internal curry or compose implementation that tells us nothing. At Loop/Recur we enjoy working with Functional JavaScript so I'd like to see this improve.

This post will demonstrate a simple solution that can go a long way to enhance the debugging experience in functional JavaScript applications.

Test subjects

DrBoolean

var add = curry(function add(x, y){ return x + y });
var map = curry(function map(f, xs){ return xs.map(f) });
var head = function(xs){ return xs[0] };

DrBoolean

function curry(fx) {
  var arity = fx.length;

  function f1() {
    var args = Array.prototype.slice.call(arguments, 0);
    if (args.length >= arity) return fx.apply(null, args);

    function f2() {
      return f1.apply(null, args.concat(Array.prototype.slice.call(arguments, 0))); 
    }

DrBoolean

var inc = add(1);

console.log(inc)
// function f2() {
//   return f1.apply(null, args.concat(Array.prototype.slice.call(arguments, 0)));
// }