Package Exports

timeengine-react

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (timeengine-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

timeengine-react

TimeEngine ( timeengine ) Extension for Stateless React programming without props and state

See http://timeengine.github.io

Before

https://facebook.github.io/react/

A Stateful Component

var Timer = React.createClass({
  getInitialState: function() {
    return {secondsElapsed: 0};
  },
  tick: function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
  },
  componentDidMount: function() {
    this.interval = setInterval(this.tick, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },
  render: function() {
    return (
      <div>Seconds Elapsed: {this.state.secondsElapsed}</div>
    );
  }
});

After

A Stateless functional Component (Single statement code!!)

// `.intervalSeq` is to map Immutable-js infinite Sequence
//                       onto TimeEngine infinite Sequence
// map natural numbers sequence onto intervalSeq(1000)
const TimerComponent = () => {
  return __Component(__
    .intervalSeq(Immutable.Range(), 1000)
    .__((count) => (__.log.t = count)) //console.log
    .__((count) => (<div>Timer : {count}</div>)));
};

Physics Equations

const PhysicsComponent = () => {
  //-------Physics-------------------------------
  //MKS system of units
  const V0 = 85.0; // m/s
  const DEG = 40; //degree
  const THETA = DEG / 180 * Math.PI; //radian
  const G = 9.8; //gravity const

  //10msec time resolution
  //t seconds elapsed
  const t = __
    .intervalSeq(Immutable.Range(), 10)
    .__((count) => (count * 10 / 1000));
  const x = t.__((t) => V0 * Math.cos(THETA) * t);
  const y = t.__((t) => V0 * Math.sin(THETA) * t - 1 / 2 * G * Math.pow(t, 2));
  //==================================
  const Drawscale = 1; //1 dot = 1 meter
  const __seqEl = __([x, y]) //atomic update
    .__(([x, y]) => (
    <div>
      <svg height = "250"  width = "100%">
          <circle r="3" fill="red"
      cx = {50 + x * Drawscale} cy = {250 - y * Drawscale}/>
      </svg>
    </div>));

  return __Component(__seqEl);
};

See the live DEMO @ http://timeengine.github.io