phusick/esnextbin.md

## esnextbin.md

      
    Raw
  

              esnextbin.md
            
          
    made with esnextbin

  
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ESNextbin Sketch</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
  <!-- put additional styles and scripts here -->
</head>
<body>
  <!-- put markup and other contents here -->
  <div id="root"></div>
</body>
</html>

## index.js
import React, {createElement, isValidElement} from 'react';
import ReactDOM from 'react-dom';
import {IntlProvider, FormattedMessage, intlShape} from 'react-intl';

class App extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {};
  }
  render() {
    const {formatMessage} = this.context.intl;

    const {values} = this.props;

    let uid = Math.floor(Math.random() * 0x10000000000).toString(16);
    let tokenRegexp = new RegExp(`(@__ELEMENT-${uid}-\\d+__@)`, 'g');

    let generateToken = (() => {
        let counter = 0;
        return () => `@__ELEMENT-${uid}-${counter += 1}__@`;
    })();

    let tokenizedValues = {};
    let elements        = {};

    Object.keys(values).forEach((name) => {
        let value = values[name];

        if (isValidElement(value)) {
            let token = generateToken();
            tokenizedValues[name] = token;
            elements[token]       = value;
        } else {
            tokenizedValues[name] = value;
        }
    });

    let descriptor = {
      id: 'some.id',
      defaultMessage: '{value} to be localized'
    };
    let formattedMessage = formatMessage(descriptor, tokenizedValues);

    console.log(formattedMessage);

    let nodes = formattedMessage
        .split(tokenRegexp)
        .filter((part) => !!part)
        .map((part) => elements[part] || part);

    let out = createElement('div', null, ...nodes);

    return (
      <FormattedMessage
        id='someId'
        defaultMessage='{value} to be translated'
        values={{
          value: (<span>hohoho</span>)
        }}
      />
    );
  }
}

App.contextTypes = {
  intl: intlShape,
};

ReactDOM.render((
  <IntlProvider locale='en' messages={{}}>
    <App values={{ value: (<span>something</span>)  }}/>
  </IntlProvider>
), document.getElementById('root'));

## package.json
{
  "name": "esnextbin-sketch",
  "version": "0.0.0",
  "dependencies": {
    "react": "0.14.7",
    "react-dom": "0.14.7",
    "react-intl": "2.0.0-beta-2",
    "babel-runtime": "6.5.0"
  }
}

## transpiled.js
'use strict';

var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

var _keys = require('babel-runtime/core-js/object/keys');

var _keys2 = _interopRequireDefault(_keys);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

var _reactDom2 = _interopRequireDefault(_reactDom);

var _reactIntl = require('react-intl');

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

var App = (function (_React$Component) {
  (0, _inherits3.default)(App, _React$Component);

  function App() {
    var _Object$getPrototypeO;

    (0, _classCallCheck3.default)(this, App);

    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    var _this = (0, _possibleConstructorReturn3.default)(this, (_Object$getPrototypeO = (0, _getPrototypeOf2.default)(App)).call.apply(_Object$getPrototypeO, [this].concat(args)));

    _this.state = {};
    return _this;
  }

  (0, _createClass3.default)(App, [{
    key: 'render',
    value: function render() {
      var formatMessage = this.context.intl.formatMessage;
      var values = this.props.values;

      var uid = Math.floor(Math.random() * 0x10000000000).toString(16);
      var tokenRegexp = new RegExp('(@__ELEMENT-' + uid + '-\\d+__@)', 'g');

      var generateToken = (function () {
        var counter = 0;
        return function () {
          return '@__ELEMENT-' + uid + '-' + (counter += 1) + '__@';
        };
      })();

      var tokenizedValues = {};
      var elements = {};

      (0, _keys2.default)(values).forEach(function (name) {
        var value = values[name];

        if ((0, _react.isValidElement)(value)) {
          var token = generateToken();
          tokenizedValues[name] = token;
          elements[token] = value;
        } else {
          tokenizedValues[name] = value;
        }
      });

      var descriptor = {
        id: 'some.id',
        defaultMessage: '{value} to be localized'
      };
      var formattedMessage = formatMessage(descriptor, tokenizedValues);

      console.log(formattedMessage);

      var nodes = formattedMessage.split(tokenRegexp).filter(function (part) {
        return !!part;
      }).map(function (part) {
        return elements[part] || part;
      });

      var out = _react.createElement.apply(undefined, ['div', null].concat((0, _toConsumableArray3.default)(nodes)));

      return _react2.default.createElement(_reactIntl.FormattedMessage, {
        id: 'someId',
        defaultMessage: '{value} to be translated',
        values: {
          value: _react2.default.createElement(
            'span',
            null,
            'hohoho'
          )
        }
      });
    }
  }]);
  return App;
})(_react2.default.Component);

App.contextTypes = {
  intl: _reactIntl.intlShape
};

_reactDom2.default.render(_react2.default.createElement(
  _reactIntl.IntlProvider,
  { locale: 'en', messages: {} },
  _react2.default.createElement(App, { values: { value: _react2.default.createElement(
        'span',
        null,
        'something'
      ) } })
), document.getElementById('root'));
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>ESNextbin Sketch</title>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
	<!-- put additional styles and scripts here -->
	</head>
	<body>
	<!-- put markup and other contents here -->
	<div id="root"></div>
	</body>
	</html>
	import React, {createElement, isValidElement} from 'react';
	import ReactDOM from 'react-dom';
	import {IntlProvider, FormattedMessage, intlShape} from 'react-intl';

	class App extends React.Component {
	constructor(...args) {
	super(...args);
	this.state = {};
	}
	render() {
	const {formatMessage} = this.context.intl;

	const {values} = this.props;

	let uid = Math.floor(Math.random() * 0x10000000000).toString(16);
	let tokenRegexp = new RegExp(`(@__ELEMENT-${uid}-\\d+__@)`, 'g');

	let generateToken = (() => {
	let counter = 0;
	return () => `@__ELEMENT-${uid}-${counter += 1}__@`;
	})();

	let tokenizedValues = {};
	let elements = {};

	Object.keys(values).forEach((name) => {
	let value = values[name];

	if (isValidElement(value)) {
	let token = generateToken();
	tokenizedValues[name] = token;
	elements[token] = value;
	} else {
	tokenizedValues[name] = value;
	}
	});

	let descriptor = {
	id: 'some.id',
	defaultMessage: '{value} to be localized'
	};
	let formattedMessage = formatMessage(descriptor, tokenizedValues);

	console.log(formattedMessage);

	let nodes = formattedMessage
	.split(tokenRegexp)
	.filter((part) => !!part)
	.map((part) => elements[part] \|\| part);

	let out = createElement('div', null, ...nodes);

	return (
	<FormattedMessage
	id='someId'
	defaultMessage='{value} to be translated'
	values={{
	value: (<span>hohoho</span>)
	}}
	/>
	);
	}
	}

	App.contextTypes = {
	intl: intlShape,
	};

	ReactDOM.render((
	<IntlProvider locale='en' messages={{}}>
	<App values={{ value: (<span>something</span>) }}/>
	</IntlProvider>
	), document.getElementById('root'));
	{
	"name": "esnextbin-sketch",
	"version": "0.0.0",
	"dependencies": {
	"react": "0.14.7",
	"react-dom": "0.14.7",
	"react-intl": "2.0.0-beta-2",
	"babel-runtime": "6.5.0"
	}
	}
	'use strict';

	var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');

	var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);

	var _keys = require('babel-runtime/core-js/object/keys');

	var _keys2 = _interopRequireDefault(_keys);

	var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

	var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

	var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

	var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

	var _createClass2 = require('babel-runtime/helpers/createClass');

	var _createClass3 = _interopRequireDefault(_createClass2);

	var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

	var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

	var _inherits2 = require('babel-runtime/helpers/inherits');

	var _inherits3 = _interopRequireDefault(_inherits2);

	var _react = require('react');

	var _react2 = _interopRequireDefault(_react);

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

	var _reactDom2 = _interopRequireDefault(_reactDom);

	var _reactIntl = require('react-intl');

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

	var App = (function (_React$Component) {
	(0, _inherits3.default)(App, _React$Component);

	function App() {
	var _Object$getPrototypeO;

	(0, _classCallCheck3.default)(this, App);

	for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
	args[_key] = arguments[_key];
	}

	var _this = (0, _possibleConstructorReturn3.default)(this, (_Object$getPrototypeO = (0, _getPrototypeOf2.default)(App)).call.apply(_Object$getPrototypeO, [this].concat(args)));

	_this.state = {};
	return _this;
	}

	(0, _createClass3.default)(App, [{
	key: 'render',
	value: function render() {
	var formatMessage = this.context.intl.formatMessage;
	var values = this.props.values;

	var uid = Math.floor(Math.random() * 0x10000000000).toString(16);
	var tokenRegexp = new RegExp('(@__ELEMENT-' + uid + '-\\d+__@)', 'g');

	var generateToken = (function () {
	var counter = 0;
	return function () {
	return '@__ELEMENT-' + uid + '-' + (counter += 1) + '__@';
	};
	})();

	var tokenizedValues = {};
	var elements = {};

	(0, _keys2.default)(values).forEach(function (name) {
	var value = values[name];

	if ((0, _react.isValidElement)(value)) {
	var token = generateToken();
	tokenizedValues[name] = token;
	elements[token] = value;
	} else {
	tokenizedValues[name] = value;
	}
	});

	var descriptor = {
	id: 'some.id',
	defaultMessage: '{value} to be localized'
	};
	var formattedMessage = formatMessage(descriptor, tokenizedValues);

	console.log(formattedMessage);

	var nodes = formattedMessage.split(tokenRegexp).filter(function (part) {
	return !!part;
	}).map(function (part) {
	return elements[part] \|\| part;
	});

	var out = _react.createElement.apply(undefined, ['div', null].concat((0, _toConsumableArray3.default)(nodes)));

	return _react2.default.createElement(_reactIntl.FormattedMessage, {
	id: 'someId',
	defaultMessage: '{value} to be translated',
	values: {
	value: _react2.default.createElement(
	'span',
	null,
	'hohoho'
	)
	}
	});
	}
	}]);
	return App;
	})(_react2.default.Component);

	App.contextTypes = {
	intl: _reactIntl.intlShape
	};

	_reactDom2.default.render(_react2.default.createElement(
	_reactIntl.IntlProvider,
	{ locale: 'en', messages: {} },
	_react2.default.createElement(App, { values: { value: _react2.default.createElement(
	'span',
	null,
	'something'
	) } })
	), document.getElementById('root'));