sonhanguyen
2/19/2016 - 10:38 AM

esnextbin sketch

esnextbin sketch

esnextbin.md
content_copyfile_download
  • Rendered
  • Source

made with esnextbin

index.html
content_copyfile_download
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <link rel=stylesheet href=http://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/lumen/bootstrap.min.css>
</head>
<body>
  <div id=app>
</body>
</html>
index.js
content_copyfile_download
import { observable, asReference } from 'mobservable'

import React from 'react'
import { observer } from 'mobservable-react'

function reactify(jsxElement) {
  var children = observable(asReference(jsxElement))
  var Reactor = observer(e => children()) // can't do Reactor = children
  return <Reactor>{ children }</Reactor>
}

const e = reactify(<div>First render</div>)

import { render } from 'react-dom'
render(e, document.body)
// React does not allow elements to hold anything other than props
// as for why "children", it makes sense
e.props.children(<div>Late rendering</div>)
package.json
content_copyfile_download
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "mobservable": "1.2.4",
    "react": "0.14.7",
    "mobservable-react": "2.1.4",
    "react-dom": "0.14.7"
  }
}
transpiled.js
content_copyfile_download
'use strict';

var _mobservable = require('mobservable');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _mobservableReact = require('mobservable-react');

var _reactDom = require('react-dom');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function reactify(jsxElement) {
  var children = (0, _mobservable.observable)((0, _mobservable.asReference)(jsxElement));
  var Reactor = (0, _mobservableReact.observer)(function (e) {
    return children();
  }); // can't do Reactor = children
  return _react2.default.createElement(
    Reactor,
    null,
    children
  );
}

var e = reactify(_react2.default.createElement(
  'div',
  null,
  'First render'
));

(0, _reactDom.render)(e, document.body);
// React does not allow elements to hold anything other than props
// as for why "children", it makes sense
e.props.children(_react2.default.createElement(
  'div',
  null,
  'Late rendering'
));