Readability: DOM Functions v JSX; LiveScript v ECMAScript2015; 2 space v 4 space

ECMAScript2015-JSX-4-space.js

// renderDeviceDetailsInfo : Device -> React.Node
const renderDeviceDetailsInfo = function renderDeviceDetailsInfo(device) {
    const volCount = availableVolumes.reduce((acc, vol) =>
        acc + 1 + (vol.subdirs ? vol.subdirs.length : 0)
    , 0);

    return (
        <div className: "device-details-info">
            {
                [    
                    <div key="os-conn-0" className="device-os-and-connection" style={volCount < 7 ? {flexBasis: "50%", maxWidth: "50%", paddingRight: "9rem"} : {}}>
                        <dl className="info-key-value">
                            <dt className="info-key">{"Operating System"}</dt>
                            <dd className="info-value">{"OS X"}</dd>
                        </dl>
                        <dl className="info-key-value">
                            <dt {className: "info-key"},
                                <i className="fa fa-check" />
                                <span>{" LAN"}</span>
                            </dt>
                            <dd className="info-value">{"192.168.1.1:8111"}</dd>
                        </dl>
                        <dl className="info-key-value">
                            <dt className="info-key">
                                <i className="fa fa-times" />
                                <span>{" P2P"}</span>
                            <dd className="info-value">{"none"}</dd>
                        </dl>
                        <dl className="info-key-value">
                            <dt className="info-key">
                                <i className="fa fa-check" />
                                <span>{" Relay"}</span>
                            </dt>
                            <dd className="info-value">{"toast.al"}</dd>
                        </dl>
                    </div>
                ].concat(this.renderVolumes(availableVolumes, volCount));
            }
        </div>
    );
};

LiveScript-No-JSX-2-space.ls

{dd, div, dl, dt, i, span} = React.DOM


# renderDeviceDetailsInfo : Device -> React.Node
renderDeviceDetailsInfo = (device) ->
  volCount = availableVolumes.reduce (acc, vol) ->
    acc + 1 + (if vol.subdirs then vol.subdirs.length else 0)
  , 0
  div {className: "device-details-info"}, [
    div {key: "os-conn-0", className: "device-os-and-connection", style: if volCount < 7 then {flexBasis: "50%", maxWidth: "50%", paddingRight: "9rem"} else {}},
      dl {className: "info-key-value"},
        dt {className: "info-key"}, "Operating System"
        dd {className: "info-value"}, "OS X"
      dl {className: "info-key-value"},
        dt {className: "info-key"},
          i {className: "fa fa-check"}, null
          span null, " LAN"
        dd {className: "info-value"}, "192.168.1.1:8111"
      dl {className: "info-key-value"},
        dt {className: "info-key"},
          i {className: "fa fa-times"}, null
          span null, " P2P"
        dd {className: "info-value"}, "none"
      dl {className: "info-key-value"},
        dt {className: "info-key"},
          i {className: "fa fa-check"}, null
          span null, " Relay"
        dd {className: "info-value"}, "toast.al"
    ].concat renderVolumes availableVolumes, volCount

All my votes are for DOM functions, LiveScript, & 2 spaces