From a4f186435e0bf14f3702eaa354fac16f94c15b31 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fre=CC=81de=CC=81ric=20Miserey?= Date: Wed, 27 Sep 2017 20:31:19 +0200 Subject: [PATCH 1/2] Examples: Update tooling and modernize code Ref #76 --- examples/.babelrc | 10 ++++++ examples/components/currency.js | 25 ++++++++------- examples/components/dates.js | 25 ++++++++------- examples/components/messages.js | 54 ++++++++++++++++++++++----------- examples/components/numbers.js | 25 ++++++++------- examples/index.js | 27 +++++++++-------- examples/package.json | 18 ++++++----- examples/webpack.config.js | 22 ++++++++++++++ 8 files changed, 130 insertions(+), 76 deletions(-) create mode 100644 examples/.babelrc create mode 100644 examples/webpack.config.js diff --git a/examples/.babelrc b/examples/.babelrc new file mode 100644 index 0000000..10a5a3f --- /dev/null +++ b/examples/.babelrc @@ -0,0 +1,10 @@ +{ + "presets": [ + "react", + "es2015" + ], + "plugins": [ + "transform-class-properties", + "transform-object-rest-spread" + ] +} diff --git a/examples/components/currency.js b/examples/components/currency.js index 8f6e05a..9c154e4 100644 --- a/examples/components/currency.js +++ b/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 (
@@ -48,4 +46,5 @@ module.exports = React.createClass({
); } -}); +} +export default LocalizedCurrencies; diff --git a/examples/components/dates.js b/examples/components/dates.js index 8a39e55..5a571c1 100644 --- a/examples/components/dates.js +++ b/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 (
@@ -36,4 +34,5 @@ module.exports = React.createClass({
); } -}); +} +export default LocalizedDates; diff --git a/examples/components/messages.js b/examples/components/messages.js index 16a84fb..ae69cc8 100644 --- a/examples/components/messages.js +++ b/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 (
@@ -42,9 +41,29 @@ module.exports = React.createClass({ Bye

Variable Replacement

- ["Wolfgang", "Amadeus", "Mozart"] - -
- {JSON.stringify({first:"Wolfgang", middle:"Amadeus", last:"Mozart"})} - + ["Wolfgang", "Amadeus", "Mozart"] - +
+ { JSON.stringify({ first: "Wolfgang", middle: "Amadeus", last: "Mozart" }) } - +

Element Replacement

+ } + } + > + For more information, see [reactGlobalizeLink]React Globalize[/reactGlobalizeLink] + +
+ } + } + > + Use Element Replacement to localize messages with [strong]markup[/strong] too. +

Gender Inflection

{JSON.stringify({guest:"Mozart", guestGender:"male", host:"Beethoven", hostGender:"male"})} -
@@ -72,4 +91,5 @@ module.exports = React.createClass({
); } -}); +} +export default LocalizedMessages; diff --git a/examples/components/numbers.js b/examples/components/numbers.js index d5cedc5..76eecaa 100644 --- a/examples/components/numbers.js +++ b/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 (
@@ -38,4 +36,5 @@ module.exports = React.createClass({
); } -}); +} +export default LocalizedNumbers; diff --git a/examples/index.js b/examples/index.js index 0d071e6..536b3e9 100644 --- a/examples/index.js +++ b/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( diff --git a/examples/package.json b/examples/package.json index 8e76e58..22063e1 100644 --- a/examples/package.json +++ b/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" } } diff --git a/examples/webpack.config.js b/examples/webpack.config.js new file mode 100644 index 0000000..7959372 --- /dev/null +++ b/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" + } + ] + } +}; From 274e0968d784ac5c1913512cf7f2429752432a94 Mon Sep 17 00:00:00 2001 From: Rafael Xavier de Souza Date: Tue, 17 Oct 2017 14:48:05 -0200 Subject: [PATCH 2/2] Examples: Lint fix --- examples/components/dates.js | 4 ++-- examples/components/messages.js | 16 +++++++--------- examples/components/numbers.js | 6 +++--- examples/index.js | 20 ++++++++++---------- examples/package.json | 4 ++-- package.json | 1 + 6 files changed, 25 insertions(+), 26 deletions(-) diff --git a/examples/components/dates.js b/examples/components/dates.js index 5a571c1..c52c18f 100644 --- a/examples/components/dates.js +++ b/examples/components/dates.js @@ -27,10 +27,10 @@ class LocalizedDates extends React.Component {
time: "medium" - {new Date()}
- datetime: "medium" - {new Date()} + datetime: "medium" - {new Date()}
datetime: "medium" with CSS class - - {new Date()} + {new Date()}
); } diff --git a/examples/components/messages.js b/examples/components/messages.js index ae69cc8..a7ece62 100644 --- a/examples/components/messages.js +++ b/examples/components/messages.js @@ -5,11 +5,11 @@ import { FormatMessage } from "../react-globalize"; class LocalizedMessages extends React.Component { state = { - locale: "en", + locale: "en" }; handleChange = (event) => { this.setState({ - locale: event.target.value, + locale: event.target.value }); } render() { @@ -33,22 +33,21 @@ class LocalizedMessages extends React.Component {
Hi/Bye

Default messages with style

- + Hi
- + Bye

Variable Replacement

- ["Wolfgang", "Amadeus", "Mozart"] - -
- { JSON.stringify({ first: "Wolfgang", middle: "Amadeus", last: "Mozart" }) } - + ["Wolfgang", "Amadeus", "Mozart"] - +
+ {JSON.stringify({first:"Wolfgang", middle:"Amadeus", last:"Mozart"})} -

Element Replacement

} } > @@ -58,7 +57,6 @@ class LocalizedMessages extends React.Component { } } > diff --git a/examples/components/numbers.js b/examples/components/numbers.js index 76eecaa..4d6341c 100644 --- a/examples/components/numbers.js +++ b/examples/components/numbers.js @@ -25,14 +25,14 @@ class LocalizedNumbers extends React.Component {
pi, maximumFractionDigits: 5 - {Math.PI}
- pi, round: 'floor' - {Math.PI} + pi, round: 'floor' - {Math.PI}
10000, minimumFractionDigits: 2 - {10000}
- 0.5, style: 'percent' - {0.5} + 0.5, style: 'percent' - {0.5}
0.5, style: 'percent' with inline styles - - {0.5} + {0.5}
); } diff --git a/examples/index.js b/examples/index.js index 536b3e9..0a83f83 100644 --- a/examples/index.js +++ b/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: { @@ -107,14 +107,14 @@ Globalize.load( Globalize.loadMessages(messages); React.render( - , document.getElementById('currency') + , document.getElementById("currency") ); React.render( - , document.getElementById('dates') + , document.getElementById("dates") ); React.render( - , document.getElementById('messages') + , document.getElementById("messages") ); React.render( - , document.getElementById('numbers') + , document.getElementById("numbers") ); diff --git a/examples/package.json b/examples/package.json index 22063e1..2a0bb26 100644 --- a/examples/package.json +++ b/examples/package.json @@ -13,8 +13,8 @@ "dependencies": { "cldr-data": ">=31", "globalize": "^1.3.0", - "react": "^15.6.0 || ^16.0.0", - "react-dom": "^15.6.0 || ^16.0.0" + "react": "^16.0.0", + "react-dom": "^16.0.0" }, "scripts": { "build": "mkdir -p react-globalize && cp ../dist/*.umd.js react-globalize/index.js && webpack" diff --git a/package.json b/package.json index f3ed6e3..a21031c 100644 --- a/package.json +++ b/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" },