From cbad0b374e07e817354ea98f2675be67132fd26e Mon Sep 17 00:00:00 2001 From: David Smith Date: Fri, 9 Feb 2018 20:33:10 +0000 Subject: [PATCH] Bring up to date with latest version of riw --- README.md | 14 +++--------- package.json | 6 +++++- src/components/App.js | 11 +++------- src/components/Buttons.js | 14 ++++-------- src/components/FileCounter.js | 5 +---- src/components/Text.js | 10 ++------- src/locale/TODO-untranslated.json | 36 +++++++++++++++---------------- src/locale/en-GB.json | 14 ++++++------ src/locale/pt-BR.json | 6 +++--- src/locale/xx-en-reverse.json | 4 ++-- webpack.config.js | 11 +++++++++- yarn.lock | 34 +++++++++++++++++++++++++++++ 12 files changed, 92 insertions(+), 73 deletions(-) diff --git a/README.md b/README.md index 7a2bd2c..a472460 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,17 @@ # riw example -This project demonstrates how [riw](https://github.com/avaragado/riw) integrates with a React app that uses `react-intl`. +This project demonstrates how [riw](https://github.com/avaragado/riw) integrates with a React app that uses `react-intl` and `babel-plugin-react-intl-auto`. -The commit history for the project shows how to add `react-intl` to a React app, and then how to use riw with the app to simplify the localisation workflow. - -Apart from `master` this repository has three branches: - -- At the head of the `react` branch is a React app before i18n, with component strings hardcoded. -- At the head of the `react-intl` branch is the same app, but internationalised with react-intl. -- At the head of the `riw` branch is the internationalised app making use of riw. - -Step through the commits on the `riw` branch to see how easy it is to use riw. For this branch riw was added globally (`yarn global add riw`) so riw doesn't appear in `package.json`. +With this example, riw was added globally (`yarn global add riw`) so riw doesn't appear in `package.json`. You can add riw as a local dependency if you want. This example doesn't demonstrate locale selection in UI or dynamic loading of locale data: those are outside the scope of riw. + ## To run ```bash $ git clone git@github.com:avaragado/riw-example.git $ cd riw-example -$ # optionally: git checkout to see the app at different stages $ yarn install $ yarn start ``` diff --git a/package.json b/package.json index 270d97c..21e9683 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "start": "webpack-dev-server" }, "dependencies": { + "babel-plugin-react-intl-auto": "^1.0.0", "intl": "^1.2.5", "react": "^15.4.2", "react-dom": "^15.4.2", @@ -22,6 +23,9 @@ }, "riw": { "defaultLocale": "en-GB", - "targetLocales": ["pt-BR", "xx-en-reverse"] + "targetLocales": [ + "pt-BR", + "xx-en-reverse" + ] } } diff --git a/src/components/App.js b/src/components/App.js index b08b71d..14116c1 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,19 +1,14 @@ import React from 'react'; import { defineMessages, FormattedMessage } from 'react-intl'; +import messages from './messages'; import Buttons from './Buttons'; import Text from './Text'; import FileCounter from './FileCounter'; const msg = defineMessages({ - hello: { - id: 'App.welcome', - defaultMessage: 'Hello everyone!', - }, - goodbye: { - id: 'App.farewell', - defaultMessage: 'Goodbye', - }, + hello: 'Hello everyone!', + goodbye: 'Goodbye', }); const App = () => ( diff --git a/src/components/Buttons.js b/src/components/Buttons.js index cacea5a..f16bd53 100644 --- a/src/components/Buttons.js +++ b/src/components/Buttons.js @@ -2,16 +2,10 @@ import React from 'react'; import { defineMessages, FormattedMessage } from 'react-intl'; const msg = defineMessages({ - press: { - id: 'Buttons.press', - description: 'User presses button to take an action', - defaultMessage: 'Press me', - }, - cancel: { - id: 'Buttons.cancel', - description: 'User presses button to cancel action', - defaultMessage: 'Cancel', - }, + // User presses button to take an action + press: 'Press me', + // User presses button to cancel action + cancel: 'Cancel', }); const Buttons = () => ( diff --git a/src/components/FileCounter.js b/src/components/FileCounter.js index 9ca8fd4..ead1a53 100644 --- a/src/components/FileCounter.js +++ b/src/components/FileCounter.js @@ -2,10 +2,7 @@ import React from 'react'; import { defineMessages, FormattedMessage } from 'react-intl'; const msg = defineMessages({ - label: { - id: 'FileCounter.label', - defaultMessage: 'You have { numFiles, plural, =0 {no files} one {one file} other {# files} }', - }, + label: 'You have { numFiles, plural, =0 {no files} one {one file} other {# files} }', }); const FileCounter = ({ numFiles }) => ( diff --git a/src/components/Text.js b/src/components/Text.js index 9ba9f1a..2433b01 100644 --- a/src/components/Text.js +++ b/src/components/Text.js @@ -4,14 +4,8 @@ import { defineMessages, FormattedMessage } from 'react-intl'; import FileCounter from './FileCounter'; const msg = defineMessages({ - intro: { - id: 'Text.intro', - defaultMessage: 'This is some interesting text related to {name}.', - }, - thanks: { - id: 'Text.thanks', - defaultMessage: 'Thank you.', - }, + intro: 'This is some interesting text related to {name}.', + thanks: 'Thank you.', }); const Text = ({ name, number }) => ( diff --git a/src/locale/TODO-untranslated.json b/src/locale/TODO-untranslated.json index 2164986..910c49c 100644 --- a/src/locale/TODO-untranslated.json +++ b/src/locale/TODO-untranslated.json @@ -1,58 +1,58 @@ [ { - "id": "App.welcome", + "id": "components.App.hello", "defaultMessage": "Hello everyone!", - "file": "/Users/dave/git-repos/riw-example/src/components/App.js", + "file": "src/components/App.js", "locale": "xx-en-reverse" }, { - "id": "App.farewell", + "id": "components.App.goodbye", "defaultMessage": "Goodbye", - "file": "/Users/dave/git-repos/riw-example/src/components/App.js", + "file": "src/components/App.js", "locale": "pt-BR" }, { - "id": "App.farewell", + "id": "components.App.goodbye", "defaultMessage": "Goodbye", - "file": "/Users/dave/git-repos/riw-example/src/components/App.js", + "file": "src/components/App.js", "locale": "xx-en-reverse" }, { - "id": "Buttons.press", + "id": "components.Buttons.press", "description": "User presses button to take an action", "defaultMessage": "Press me", - "file": "/Users/dave/git-repos/riw-example/src/components/Buttons.js", + "file": "src/components/Buttons.js", "locale": "pt-BR" }, { - "id": "Buttons.press", + "id": "components.Buttons.press", "description": "User presses button to take an action", "defaultMessage": "Press me", - "file": "/Users/dave/git-repos/riw-example/src/components/Buttons.js", + "file": "src/components/Buttons.js", "locale": "xx-en-reverse" }, { - "id": "Text.intro", + "id": "components.Text.intro", "defaultMessage": "This is some interesting text related to {name}.", - "file": "/Users/dave/git-repos/riw-example/src/components/Text.js", + "file": "src/components/Text.js", "locale": "pt-BR" }, { - "id": "Text.intro", + "id": "components.Text.intro", "defaultMessage": "This is some interesting text related to {name}.", - "file": "/Users/dave/git-repos/riw-example/src/components/Text.js", + "file": "src/components/Text.js", "locale": "xx-en-reverse" }, { - "id": "Text.thanks", + "id": "components.Text.thanks", "defaultMessage": "Thank you.", - "file": "/Users/dave/git-repos/riw-example/src/components/Text.js", + "file": "src/components/Text.js", "locale": "pt-BR" }, { - "id": "Text.thanks", + "id": "components.Text.thanks", "defaultMessage": "Thank you.", - "file": "/Users/dave/git-repos/riw-example/src/components/Text.js", + "file": "src/components/Text.js", "locale": "xx-en-reverse" } ] \ No newline at end of file diff --git a/src/locale/en-GB.json b/src/locale/en-GB.json index 4709acd..8bb2263 100644 --- a/src/locale/en-GB.json +++ b/src/locale/en-GB.json @@ -1,9 +1,9 @@ { - "App.welcome": "Hello everyone!", - "App.farewell": "Goodbye", - "Buttons.press": "Press me", - "Buttons.cancel": "Cancel", - "FileCounter.label": "You have {numFiles, plural, =0 {no files} one {one file} other {# files}}", - "Text.intro": "This is some interesting text related to {name}.", - "Text.thanks": "Thank you." + "components.App.hello": "Hello everyone!", + "components.App.goodbye": "Goodbye", + "components.Buttons.press": "Press me", + "components.Buttons.cancel": "Cancel", + "components.FileCounter.label": "You have {numFiles, plural, =0 {no files} one {one file} other {# files}}", + "components.Text.intro": "This is some interesting text related to {name}.", + "components.Text.thanks": "Thank you." } \ No newline at end of file diff --git a/src/locale/pt-BR.json b/src/locale/pt-BR.json index 5c30035..43028f2 100644 --- a/src/locale/pt-BR.json +++ b/src/locale/pt-BR.json @@ -1,5 +1,5 @@ { - "App.welcome": "Olá a todos", - "Buttons.cancel": "Cancelar", - "FileCounter.label": "Você {numFiles, plural, =0 {não tem arquivos} one {tem um arquivo} other {tem # arquivos}}" + "components.App.hello": "Olá a todos", + "components.Buttons.cancel": "Cancelar", + "components.FileCounter.label": "Você {numFiles, plural, =0 {não tem arquivos} one {tem um arquivo} other {tem # arquivos}}" } \ No newline at end of file diff --git a/src/locale/xx-en-reverse.json b/src/locale/xx-en-reverse.json index 21c9970..d3fac8c 100644 --- a/src/locale/xx-en-reverse.json +++ b/src/locale/xx-en-reverse.json @@ -1,4 +1,4 @@ { - "Buttons.cancel": "lecnaC", - "FileCounter.label": "{numFiles, plural, =0 {selif on} one {elif eno} other {selif #}} evah uoY" + "components.Buttons.cancel": "lecnaC", + "components.FileCounter.label": "{numFiles, plural, =0 {selif on} one {elif eno} other {selif #}} evah uoY" } \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index cb09c5e..05b9a38 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -10,6 +10,15 @@ module.exports = { options: { babelrc: false, presets: ['react'], + plugins: [ + [ + "react-intl-auto", + { + removePrefix: "src", + filebase: true + } + ] + ] } }] }, @@ -23,4 +32,4 @@ module.exports = { compress: true, port: 9000 } -}; \ No newline at end of file +}; diff --git a/yarn.lock b/yarn.lock index 8830c92..9f8e3dc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -226,6 +226,12 @@ babel-messages@^6.23.0: dependencies: babel-runtime "^6.22.0" +babel-plugin-react-intl-auto@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/babel-plugin-react-intl-auto/-/babel-plugin-react-intl-auto-1.0.0.tgz#f959a6512489758bd3cf5dcaa6be0ca374901fad" + dependencies: + babel-types "^6.26.0" + babel-plugin-syntax-flow@^6.18.0: version "6.18.0" resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d" @@ -305,6 +311,13 @@ babel-runtime@^6.22.0: core-js "^2.4.0" regenerator-runtime "^0.10.0" +babel-runtime@^6.26.0: + version "6.26.0" + resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe" + dependencies: + core-js "^2.4.0" + regenerator-runtime "^0.11.0" + babel-template@^6.23.0: version "6.23.0" resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.23.0.tgz#04d4f270adbb3aa704a8143ae26faa529238e638" @@ -338,6 +351,15 @@ babel-types@^6.23.0: lodash "^4.2.0" to-fast-properties "^1.0.1" +babel-types@^6.26.0: + version "6.26.0" + resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497" + dependencies: + babel-runtime "^6.26.0" + esutils "^2.0.2" + lodash "^4.17.4" + to-fast-properties "^1.0.3" + babylon@^6.11.0, babylon@^6.15.0: version "6.16.1" resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.16.1.tgz#30c5a22f481978a9e7f8cdfdf496b11d94b404d3" @@ -1503,6 +1525,10 @@ lodash@^4.14.0, lodash@^4.17.2, lodash@^4.2.0: version "4.17.4" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.4.tgz#78203a4d1c328ae1d86dca6460e369b57f4055ae" +lodash@^4.17.4: + version "4.17.5" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511" + longest@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097" @@ -2027,6 +2053,10 @@ regenerator-runtime@^0.10.0: version "0.10.3" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.10.3.tgz#8c4367a904b51ea62a908ac310bf99ff90a82a3e" +regenerator-runtime@^0.11.0: + version "0.11.1" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" + regex-cache@^0.4.2: version "0.4.3" resolved "https://registry.yarnpkg.com/regex-cache/-/regex-cache-0.4.3.tgz#9b1a6c35d4d0dfcef5711ae651e8e9d3d7114145" @@ -2377,6 +2407,10 @@ to-fast-properties@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.2.tgz#f3f5c0c3ba7299a7ef99427e44633257ade43320" +to-fast-properties@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47" + tough-cookie@~2.3.0: version "2.3.2" resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.3.2.tgz#f081f76e4c85720e6c37a5faced737150d84072a"