Examples: Update tooling and modernize code

Ref globalizejs#76

Author: Frédéric Miserey

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>
@@ -36,4 +34,5 @@ module.exports = React.createClass({
             </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
+            locale: event.target.value,
         });
-    },
-    render: function() {
+    }
+    render() {
         return (
             <div>
                 <div>
@@ -42,9 +41,29 @@ module.exports = React.createClass({
                   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"}} />
+                [&quot;Wolfgang&quot;, &quot;Amadeus&quot;, &quot;Mozart&quot;] - <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={
+                        // eslint-disable-next-line jsx-a11y/anchor-has-content, react/self-closing-comp
+                        { 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={
+                        // eslint-disable-next-line react/self-closing-comp
+                        { 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 +91,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>
@@ -38,4 +36,5 @@ module.exports = React.createClass({
             </div>
         );
     }
-});
+}
+export default LocalizedNumbers;

examples/index.js

@@ -89,20 +89,21 @@ 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(

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": "^15.6.0 || ^16.0.0",
+    "react-dom": "^15.6.0 || ^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"
+            }
+        ]
+    }
+};