SanderSpies

const test = (props) => (
	<div>
		{match(props).with(
			(String) => <div>Should work {props}</div>,
			({bar = '1', test: {x = false}}) => <div>Super cool {bar}</div>,
			({bar = '5', test: {y = true}}) => <div>Mega cool {test.y} {y}</div>,
			([a = 3, {x = 4}, z]) =>
				<nesting>
					{match(z).with(
						({bar = '5', test: {y = true}}) => 

SanderSpies

let context = createGlobalContext null in 
let script = createStringWithUTF8CString "(function(){return 'Hi OCaml, this is your friend JavaScriptCore.';})();" in 
let valueref = evaluateScript context script null null 0 null in
let result = valueToString context valueref null in
let ocaml_str = toOCamlString result in (
    print_string ocaml_str;
    releaseString script;
    releaseGlobalContext context;
    releaseOCamlString ocaml_str);;

SanderSpies

open ReactDOM

module MyComponent = struct
  (* Component Properties *)
  type props = {count: int}

  (* Hey, state can be any type! *)
  type state = string

  (* Initializer *)

SanderSpies

var ApplicationStyles = StyleSheet.create`

  .normalStyle {
    background-color: white;
    font-size: 10pt;
    padding: 1em;
    margin: 10px;
  }

  .childStyle {

SanderSpies

var foo = <div>
if (foo) {
   <something>
   for(var i = 0, l = 10; i < 10; i++) {
     <a prop={i} />
   }
   </something>
}
"2222"
</div>;

SanderSpies

/**
 * @jsx React.DOM
 */
'use strict';

var React           = require('react');
var Animation       = require('react-magician');

class Foo extends React.Component {

SanderSpies

/**
 * @jsx React.DOM
 */
'use strict';

var React           = require('react');
var ReactAnimation  = require('react-animation');
var Animation       = ReactAnimation.Animation;

class Foo extends React.Component {

SanderSpies

So this is my current solution for "fixing" the implicit nature of CSS. It basically replaces CSS selectors, classNames, etc. with the ability to directly reference to a style from JavaScript.

/**
 * @jsx React.DOM
 */
'use strict';

var React = require('react');
var ReactStyle = require('react-style');

SanderSpies

'use strict';

var merge = require('../vendor/merge');

var TransitionMixin = {

  transitionStart: function(opt) {
    var self = this;
    return new Promise(function(resolve) {
      opt.transition = 'all ' + opt.duration + ' linear';

SanderSpies

var allInitial;
var testElement = document.createElement('div');
// Firefox
if ('all' in testElement.style) {
  allInitial = {
    all: 'initial'
  };
}
else {
  testElement.style.display = 'initial';