Skip to content

Instantly share code, notes, and snippets.

@phusick

phusick/esnextbin.md

Last active February 29, 2016 13:10
Show Gist options
  • Save phusick/9a7d5b98008328ce7b5e to your computer and use it in GitHub Desktop.
Save phusick/9a7d5b98008328ce7b5e to your computer and use it in GitHub Desktop.
Download ZIP
esnextbin sketch
Raw
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>
Raw
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'));
Raw
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"
}
}
Raw
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'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment