Nutritious Pumpkin Meal

    timeengine-react

    4.0.0 • Public • Published

    timeengine-react

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

    https://www.npmjs.com/package/timeengine

    https://www.npmjs.com/package/timeengine-react

    https://github.com/TimeEngine/timeengine

    https://github.com/TimeEngine/timeengine-react

    From version 5.0.0, the project repository has moved to the project page.

    See the Demo and Documentation of the project:

    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 Element (Single statement code!!)

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

    Physics Equations

      const PhysicsElement = () => {
        //MKS system of units
        const V0 = 90.0; // m/s
        const DEG = 45; //degree
        const THETA = DEG / 180 * Math.PI; //radian
        const G = 9.8; //gravity const
        //t seconds elapsed 10msec time resolution
        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="2" fill="red"
            cx = {50 + x * Drawscale} cy = {250 - y * Drawscale}/>
            </svg>
          </div>));
        return __Element(__seqEl);
      };

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

    Install

    npm i timeengine-react

    DownloadsWeekly Downloads

    0

    Version

    4.0.0

    License

    MIT

    Last publish

    Collaborators

    • kenokabe