DoNotation.js

/* global exports */
"use strict";

// module DoNotation

var React = require('react');

function createElement(class_) {
  return function(props) {
    return function(children) {
      var unwrappedChildren = children.map(c => c.value0);
      return React.createElement.apply(React, [class_, props].concat(unwrappedChildren));
    };
  };
}
exports.createElement = createElement;

DoNotation.purs

module DoNotation
  ( ReactElements
  , ReactElementsImpl
  , elements
  ) where

import Prelude
import Data.Array ((..))
import React (ReactElement)

data TaggedElement = StaticElement ReactElement
                   | DynamicElements (Array ReactElement)

data ReactElementsImpl a = ReactElementsImpl (Array TaggedElement) a

type ReactElements = ReactElementsImpl Unit

instance functorReactElementsImpl :: Functor ReactElementsImpl where
  map f (ReactElementsImpl es x) = ReactElementsImpl es (f x)

instance applyReactElementsImpl :: Apply ReactElementsImpl where
  apply (ReactElementsImpl as f) (ReactElementsImpl bs x) = ReactElementsImpl (as <> bs) (f x)

instance bindReactElementsImpl :: Bind ReactElementsImpl where
  bind (ReactElementsImpl es x) f =
    case f x of
      ReactElementsImpl es' y -> ReactElementsImpl (es <> es') y

-- | Produce a dynamic elements value from an array of static or dynamic elements
elements :: Array ReactElements -> ReactElements
elements es = ReactElementsImpl [DynamicElements (flat es)] unit
  where
    flat reArray = do
      reactElements <- reArray
      case reactElements of
        ReactElementsImpl taggedElements _ -> do
          taggedElement <- taggedElements
          case taggedElement of
            StaticElement   rawElem  -> [rawElem]
            DynamicElements rawElems -> rawElems



div' :: ReactElements -> ReactElements
div' _ = ReactElementsImpl [DynamicElements []] unit

span' :: ReactElements -> ReactElements
span' _ = ReactElementsImpl [DynamicElements []] unit

ul' :: ReactElements -> ReactElements
ul' _ = ReactElementsImpl [DynamicElements []] unit

li' :: ReactElements -> ReactElements
li' _ = ReactElementsImpl [DynamicElements []] unit

text :: String -> ReactElements
text _ = ReactElementsImpl [DynamicElements []] unit

render :: Unit -> Array ReactElements

render _ = return $
  div' $ do
    span' (text "This is an example")
    span' (text "of mixed strict and dynamic child elements")
    ul' $ do
      li' (text "first item")
      elements $ (\n -> li' (text ("list item #" ++ show n))) <$> 1..10
      li' (text "last item")