JSX Monoid

jsx-monoid.js

import React from 'react';

const fragment = children => React.createElement.apply(
  null,
  [React.Fragment, {}].concat(children)
);

const jsx = createMonoid({
  indentity: null,
  semigroup: (a, b) => fragment([a, b]),
});

log(jsx.id) // => null

/**
 * Will yield:
 *
 * <React.Fragment>
 *   <div />
 *   <span />
 * </React.Fragment>
 */
log(jsx.append(<div />, <span />))

/**
 * Conceptually, yang akan kita liat pada screen
 * hanya <div> kosong. Kita gak akan bisa liat
 * tulisan "null" ya kan? 😄
 *
 * <React.Fragment>
 *   <div />
 * </React.Fragment>
 */
log(jsx.append(<div />, jsx.id))
log(jsx.append(jsx.id, <div />))