Examples: Update tooling and modernize code

examples/.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    "react",
+    "es2015"
+  ],
+  "plugins": [
+    "transform-class-properties",
+    "transform-object-rest-spread"
+  ]
+}

examples/components/currency.js

@@ -1,18 +1,16 @@
-var FormatCurrency = require('../react-globalize').FormatCurrency;
-var React = require('react');
+import React from "react";
+import { FormatCurrency } from "../react-globalize";
 
-module.exports = React.createClass({
-    getInitialState: function() {
-        return {
-            locale: "en"
-        };
-    },
-    handleChange: function( event ) {
+class LocalizedCurrencies extends React.PureComponent {
+    state = {
+        locale: "en",
+    };
+    handleChange = (event) => {
         this.setState({
-            locale: event.target.value
+            locale: event.target.value,
         });
-    },
-    render: function() {
+    }
+    render() {
         return (
             <div>
                 <div>
@@ -48,4 +46,5 @@ module.exports = React.createClass({
             </div>
         );
     }
-});
+}
+export default LocalizedCurrencies;

examples/components/dates.js

@@ -1,18 +1,16 @@
-var FormatDate = require('../react-globalize').FormatDate;
-var React = require('react');
+import React from "react";
+import { FormatDate } from "../react-globalize";
 
-module.exports = React.createClass({
-    getInitialState: function() {
-        return {
-            locale: "en"
-        };
-    },
-    handleChange: function( event ) {
+class LocalizedDates extends React.Component {
+    state = {
+        locale: "en",
+    };
+    handleChange = (event) => {
         this.setState({
-            locale: event.target.value
+            locale: event.target.value,
         });
-    },
-    render: function() {
+    }
+    render() {
         return (
             <div>
                 <div>
@@ -29,11 +27,12 @@ module.exports = React.createClass({
                 <br/>
                 time: "medium" - <FormatDate locale={this.state.locale} pattern={{ time: "medium" }}>{new Date()}</FormatDate>
                 <br/>
-                datetime: "medium" - <FormatDate locale={this.state.locale} pattern={{ datetime: 'medium' }}>{new Date()}</FormatDate>
+                datetime: "medium" - <FormatDate locale={this.state.locale} pattern={{ datetime: "medium" }}>{new Date()}</FormatDate>
                 <br/>
                 datetime: "medium" with CSS class -
-                <FormatDate className='secondClass' locale={this.state.locale} pattern={{ datetime: 'medium' }}>{new Date()}</FormatDate>
+                <FormatDate className='secondClass' locale={this.state.locale} pattern={{ datetime: "medium" }}>{new Date()}</FormatDate>
             </div>
         );
     }
-});
+}
+export default LocalizedDates;

examples/components/messages.js

@@ -1,19 +1,18 @@
-var FormatMessage = require('../react-globalize').FormatMessage;
-var React = require('react');
-var Globalize = require('globalize');
+import React from "react";
+import Globalize from "globalize";
+import { FormatMessage } from "../react-globalize";
 
-module.exports = React.createClass({
-    getInitialState: function() {
-        return {
-            locale: "en"
-        };
-    },
-    handleChange: function( event ) {
+
+class LocalizedMessages extends React.Component {
+    state = {
+        locale: "en"
+    };
+    handleChange = (event) => {
         this.setState({
             locale: event.target.value
         });
-    },
-    render: function() {
+    }
+    render() {
         return (
             <div>
                 <div>
@@ -34,17 +33,35 @@ module.exports = React.createClass({
                 <br/>
                 <FormatMessage locale={this.state.locale}>Hi/Bye</FormatMessage>
                 <h3>Default messages with style</h3>
-                <FormatMessage style={{color: 'red'}} locale={this.state.locale}>
+                <FormatMessage style={{color: "red"}} locale={this.state.locale}>
                   Hi
                 </FormatMessage>
                 <br/>
-                <FormatMessage style={{color: 'blue'}} locale={this.state.locale}>
+                <FormatMessage style={{color: "blue"}} locale={this.state.locale}>
                   Bye
                 </FormatMessage>
                 <h3>Variable Replacement</h3>
                 ["Wolfgang", "Amadeus", "Mozart"] - <FormatMessage locale={this.state.locale} path="variables/hello" variables={["Wolfgang", "Amadeus", "Mozart"]} />
                 <br/>
                 {JSON.stringify({first:"Wolfgang", middle:"Amadeus", last:"Mozart"})} - <FormatMessage locale={this.state.locale} path="variables/hey" variables={{first:"Wolfgang", middle:"Amadeus", last:"Mozart"}} />
+                <h3>Element Replacement</h3>
+                <FormatMessage
+                    locale={this.state.locale}
+                    elements={
+                        { reactGlobalizeLink: <a href="https://github.com/jquery-support/react-globalize"></a> }
+                    }
+                >
+                    For more information, see [reactGlobalizeLink]React Globalize[/reactGlobalizeLink]
+                </FormatMessage>
+                <br />
+                <FormatMessage
+                    locale={this.state.locale}
+                    elements={
+                        { strong: <strong></strong> }
+                    }
+                >
+                    Use Element Replacement to localize messages with [strong]markup[/strong] too.
+                </FormatMessage>
                 <h3>Gender Inflection</h3>
                 {JSON.stringify({guest:"Mozart", guestGender:"male", host:"Beethoven", hostGender:"male"})} - <FormatMessage locale={this.state.locale} path="party" variables={{guest:"Mozart", guestGender:"male", host:"Beethoven", hostGender:"male"}} />
                 <br/>
@@ -72,4 +89,5 @@ module.exports = React.createClass({
             </div>
         );
     }
-});
+}
+export default LocalizedMessages;

examples/components/numbers.js

@@ -1,18 +1,16 @@
-var FormatNumber = require('../react-globalize').FormatNumber;
-var React = require('react');
+import React from "react";
+import { FormatNumber } from "../react-globalize";
 
-module.exports = React.createClass({
-    getInitialState: function() {
-        return {
-            locale: "en"
-        };
-    },
-    handleChange: function( event ) {
+class LocalizedNumbers extends React.Component {
+    state = {
+        locale: "en",
+    };
+    handleChange = (event) => {
         this.setState({
-            locale: event.target.value
+            locale: event.target.value,
         });
-    },
-    render: function() {
+    }
+    render() {
         return (
             <div>
                 <div>
@@ -27,15 +25,16 @@ module.exports = React.createClass({
                 <br/>
                 pi, maximumFractionDigits: 5 - <FormatNumber locale={this.state.locale} options={{ maximumFractionDigits: 5 }}>{Math.PI}</FormatNumber>
                 <br/>
-                pi, round: 'floor' - <FormatNumber locale={this.state.locale} options={{ round: 'floor' }}>{Math.PI}</FormatNumber>
+                pi, round: 'floor' - <FormatNumber locale={this.state.locale} options={{ round: "floor" }}>{Math.PI}</FormatNumber>
                 <br/>
                 10000, minimumFractionDigits: 2 - <FormatNumber locale={this.state.locale} options={{ minimumFractionDigits: 2 }}>{10000}</FormatNumber>
                 <br/>
-                0.5, style: 'percent' - <FormatNumber locale={this.state.locale} options={{ style: 'percent' }}>{0.5}</FormatNumber>
+                0.5, style: 'percent' - <FormatNumber locale={this.state.locale} options={{ style: "percent" }}>{0.5}</FormatNumber>
                 <br/>
                 0.5, style: 'percent' with inline styles -
-                <FormatNumber style={{fontWeight: 'bold', color: 'chocolate'}} locale={this.state.locale} options={{ style: 'percent' }}>{0.5}</FormatNumber>
+                <FormatNumber style={{fontWeight: "bold", color: "chocolate"}} locale={this.state.locale} options={{ style: "percent" }}>{0.5}</FormatNumber>
             </div>
         );
     }
-});
+}
+export default LocalizedNumbers;

examples/index.js

@@ -1,9 +1,9 @@
-var React = require('react');
-var Globalize = require('globalize');
-var LocalizedCurrencies = require('./components/currency');
-var LocalizedDates = require('./components/dates');
-var LocalizedMessages = require('./components/messages');
-var LocalizedNumbers = require('./components/numbers');
+var React = require("react");
+var Globalize = require("globalize");
+var LocalizedCurrencies = require("./components/currency");
+var LocalizedDates = require("./components/dates");
+var LocalizedMessages = require("./components/messages");
+var LocalizedNumbers = require("./components/numbers");
 
 var messages = {
     en: {
@@ -89,31 +89,32 @@ var messages = {
 };
 
 Globalize.load(
-    require( 'cldr-data/main/en/ca-gregorian' ),
-    require( 'cldr-data/main/en/timeZoneNames' ),
-    require( 'cldr-data/main/en/numbers' ),
-    require( 'cldr-data/main/en/currencies' ),
-    require( 'cldr-data/main/pt/ca-gregorian' ),
-    require( 'cldr-data/main/pt/timeZoneNames' ),
-    require( 'cldr-data/main/pt/numbers' ),
-    require( 'cldr-data/main/pt/currencies' ),
-    require( 'cldr-data/supplemental/currencyData' ),
-    require( 'cldr-data/supplemental/plurals' ),
-    require( 'cldr-data/supplemental/likelySubtags' ),
-    require( 'cldr-data/supplemental/timeData' ),
-    require( 'cldr-data/supplemental/weekData' )
+    require("cldr-data/main/en/ca-gregorian"),
+    require("cldr-data/main/en/timeZoneNames"),
+    require("cldr-data/main/en/numbers"),
+    require("cldr-data/main/en/currencies"),
+    require("cldr-data/main/pt/ca-gregorian"),
+    require("cldr-data/main/pt/timeZoneNames"),
+    require("cldr-data/main/pt/numbers"),
+    require("cldr-data/main/pt/currencies"),
+    require("cldr-data/supplemental/currencyData"),
+    require("cldr-data/supplemental/plurals"),
+    require("cldr-data/supplemental/likelySubtags"),
+    require("cldr-data/supplemental/timeData"),
+    require("cldr-data/supplemental/weekData"),
 );
+
 Globalize.loadMessages(messages);
 
 React.render(
-    <LocalizedCurrencies />, document.getElementById('currency')
+    <LocalizedCurrencies />, document.getElementById("currency")
 );
 React.render(
-    <LocalizedDates />, document.getElementById('dates')
+    <LocalizedDates />, document.getElementById("dates")
 );
 React.render(
-    <LocalizedMessages />, document.getElementById('messages')
+    <LocalizedMessages />, document.getElementById("messages")
 );
 React.render(
-    <LocalizedNumbers />, document.getElementById('numbers')
+    <LocalizedNumbers />, document.getElementById("numbers")
 );

examples/package.json

@@ -1,18 +1,22 @@
-
 {
   "name": "react-globalize-example",
   "description": "Examples demonstrating use of the components",
   "main": "index.js",
   "devDependencies": {
-    "browserify": "^6.3.3",
-    "reactify": "^0.17.1"
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "imports-loader": "^0.7.1",
+    "webpack": "^3.6.0"
   },
   "dependencies": {
-    "cldr-data": "~26.0.9",
-    "react": "~0.13.1",
-    "globalize": "~1.0.0-alpha.18"
+    "cldr-data": ">=31",
+    "globalize": "^1.3.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
   },
   "scripts": {
-    "build": "mkdir -p react-globalize && cp ../dist/*.js react-globalize/ && browserify --debug --transform reactify index.js > app.js"
+    "build": "mkdir -p react-globalize && cp ../dist/*.umd.js react-globalize/index.js && webpack"
   }
 }

examples/webpack.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+    entry: [
+        "./index.js"
+    ],
+    output: {
+        filename: "./app.js"
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(js|jsx)$/,
+                exclude: /node_modules/,
+                loader: require.resolve("babel-loader")
+            },
+            {
+                test: /\.(js|jsx)$/,
+                include: /node_modules/,
+                use: "imports-loader?define=>false"
+            }
+        ]
+    }
+};

package.json

@@ -15,6 +15,7 @@
   "scripts": {
     "build": "rollup -c",
     "lint": "eslint rollup.config.js src test",
+    "lint:examples": "eslint --fix examples",
     "test": "mocha test",
     "prepublish": "npm run build"
   },