feat(core): New translation messages format (react-boilerplate#931)

* Shrink translation messages files * fix dynamic variable name * fix dynamic variable name * remove eval and fix function name
riseofthetigers · Nov 2, 2016 · 4cb38d9 · 4cb38d9
1 parent b564979
commit 4cb38d9
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 333 deletions.
diff --git a/app/containers/App/constants.js b/app/containers/App/constants.js
@@ -12,3 +12,4 @@
 export const LOAD_REPOS = 'boilerplate/App/LOAD_REPOS';
 export const LOAD_REPOS_SUCCESS = 'boilerplate/App/LOAD_REPOS_SUCCESS';
 export const LOAD_REPOS_ERROR = 'boilerplate/App/LOAD_REPOS_ERROR';
+export const DEFAULT_LOCALE = 'en';
diff --git a/app/i18n.js b/app/i18n.js
@@ -5,6 +5,7 @@
  *
  */
 import { addLocaleData } from 'react-intl';
+import { DEFAULT_LOCALE } from '../app/containers/App/constants';
 
 import enLocaleData from 'react-intl/locale-data/en';
 import deLocaleData from 'react-intl/locale-data/de';
@@ -20,16 +21,22 @@ export const appLocales = [
 import enTranslationMessages from './translations/en.json';
 import deTranslationMessages from './translations/de.json';
 
-export const formatTranslationMessages = (messages) => {
+export const formatTranslationMessages = (locale, messages) => {
+  const defaultFormattedMessages = locale !== DEFAULT_LOCALE ? formatTranslationMessages(DEFAULT_LOCALE, enTranslationMessages) : {};
   const formattedMessages = {};
-  for (const message of messages) {
-    formattedMessages[message.id] = message.message || message.defaultMessage;
+  const messageKeys = Object.keys(messages);
+  for (const messageKey of messageKeys) {
+    if (locale === DEFAULT_LOCALE) {
+      formattedMessages[messageKey] = messages[messageKey];
+    } else {
+      formattedMessages[messageKey] = messages[messageKey] || defaultFormattedMessages[messageKey];
+    }
   }
 
   return formattedMessages;
 };
 
 export const translationMessages = {
-  en: formatTranslationMessages(enTranslationMessages),
-  de: formatTranslationMessages(deTranslationMessages),
+  en: formatTranslationMessages('en', enTranslationMessages),
+  de: formatTranslationMessages('de', deTranslationMessages),
 };
diff --git a/app/translations/de.json b/app/translations/de.json
@@ -1,152 +1,32 @@
-[
-  {
-    "id": "app.components.LocaleToggle.de",
-    "defaultMessage": "de",
-    "message": ""
-  },
-  {
-    "id": "app.components.LocaleToggle.en",
-    "defaultMessage": "en",
-    "message": ""
-  },
-  {
-    "id": "boilerplate.components.Footer.author.message",
-    "defaultMessage": "Made with love by {author}.",
-    "message": "Mit Liebe gemacht von {author}."
-  },
-  {
-    "id": "boilerplate.components.Footer.license.message",
-    "defaultMessage": "This project is licensed under the MIT license.",
-    "message": "Dieses Projekt wird unter der MIT-Lizenz veröffentlicht."
-  },
-  {
-    "id": "boilerplate.containers.FeaturePage.css.header",
-    "defaultMessage": "Features",
-    "message": ""
-  },
-  {
-    "id": "boilerplate.containers.FeaturePage.css.message",
-    "defaultMessage": "Next generation CSS",
-    "message": "Die nächste Generation von CSS"
-  },
-  {
-    "id": "boilerplate.containers.FeaturePage.feedback.header",
-    "defaultMessage": "Instant feedback",
-    "message": "Sofortiges Feedback"
-  },
-  {
-    "id": "boilerplate.containers.FeaturePage.feedback.message",
-    "defaultMessage": "Enjoy the best DX and code your app at the speed of thought! Your\n    saved changes to the CSS and JS are reflected instantaneously\n    without refreshing the page. Preserve application state even when\n    you update something in the underlying code!",
-    "message": "Genießen Sie die beste Entwicklungserfahrung und programmieren Sie Ihre App so schnell wie noch nie! Ihre Änderungen an dem CSS und JavaScript sind sofort reflektiert, ohne die Seite aktualisieren zu müssen. So bleibt der Anwendungszustand bestehen, auch wenn Sie etwas in dem darunter liegenden Code aktualisieren!"
-  },
-  {
-    "id": "boilerplate.containers.FeaturePage.header",
-    "defaultMessage": "Features",
-    "message": ""
-  },
-  {
-    "id": "boilerplate.containers.FeaturePage.home",
-    "defaultMessage": "Home",
-    "message": ""
-  },
-  {
-    "id": "boilerplate.containers.FeaturePage.internationalization.header",
-    "defaultMessage": "Complete i18n Standard Internationalization & Pluralization",
-    "message": "Komplette i18n Standard-Internationalisierung und Pluralisierung"
-  },
-  {
-    "id": "boilerplate.containers.FeaturePage.internationalization.message",
-    "defaultMessage": "Scalable apps need to support multiple languages, easily add and support multiple languages with `react-intl`.",
-    "message": "Das Internet ist global. Mehrsprachige- und Pluralisierungsunterstützung ist entscheidend für große Web-Anwendungen."
-  },
-  {
-    "id": "boilerplate.containers.FeaturePage.javascript.header",
-    "defaultMessage": "Next generation JavaScript",
-    "message": "Die nächste Generation von JavaScript"
-  },
-  {
-    "id": "boilerplate.containers.FeaturePage.javascript.message",
-    "defaultMessage": "Use template strings, object destructuring, arrow functions, JSX\n    syntax and more, today.",
-    "message": "Benutzen Sie ES6 template strings, object destructuring, arrow functions, JSX syntax und mehr, heute."
-  },
-  {
-    "id": "boilerplate.containers.FeaturePage.network.header",
-    "defaultMessage": "Offline-first",
-    "message": ""
-  },
-  {
-    "id": "boilerplate.containers.FeaturePage.network.message",
-    "defaultMessage": "The next frontier in performant web apps: availability without a\n      network connection from the instant your users load the app.",
-    "message": "Die nächste Schwelle für performanten Web-Anwendungen: Verfügbarkeit ohne Netzwerkverbindung wenn Ihre Benutzer die App einmal heruntergeladen haben."
-  },
-  {
-    "id": "boilerplate.containers.FeaturePage.routing.header",
-    "defaultMessage": "Industry-standard routing",
-    "message": "Standard Routing"
-  },
-  {
-    "id": "boilerplate.containers.FeaturePage.routing.message",
-    "defaultMessage": "Write composable CSS that's co-located with your components for\n    complete modularity. Unique generated class names keep the\n    specificity low while eliminating style clashes. Ship only the\n    styles that are on the page for the best performance.",
-    "message": "Schreiben Sie CSS, das am selben Ort wie ihre Komponenten ist. Deterministisch generierte, einzigartige Klassennamen halten die Spezifität niedrig während styling Konflikte vermieden werden. Senden Sie nur das CSS an ihre Benutzer welches dann wirklich sichtbar ist für die schnellste Performance!"
-  },
-  {
-    "id": "boilerplate.containers.FeaturePage.scaffolding.header",
-    "defaultMessage": "Quick scaffolding",
-    "message": "Schnelles Scaffolding"
-  },
-  {
-    "id": "boilerplate.containers.FeaturePage.scaffolding.message",
-    "defaultMessage": "Automate the creation of components, containers, routes, selectors\n  and sagas - and their tests - right from the CLI!",
-    "message": "Automatisieren Sie die Kreation von Komponenten, Containern, Routen, Selektoren und Sagas – und ihre Tests – direkt von dem Terminal!"
-  },
-  {
-    "id": "boilerplate.containers.FeaturePage.state_management.header",
-    "defaultMessage": "Predictable state management",
-    "message": "Berechenbare Stateverwaltung"
-  },
-  {
-    "id": "boilerplate.containers.FeaturePage.state_management.message",
-    "defaultMessage": "Unidirectional data flow allows for change logging and time travel\n    debugging.",
-    "message": "Unidirectional data flow erlaubt uns alle Änderungen ihrer Applikation zu loggen und time travel debugging einzusetzen."
-  },
-  {
-    "id": "boilerplate.containers.HomePage.features.Button",
-    "defaultMessage": "Features",
-    "message": ""
-  },
-  {
-    "id": "boilerplate.containers.HomePage.start_project.header",
-    "defaultMessage": "Start your next react project in seconds",
-    "message": "Beginnen Sie Ihr nächstes React Projekt in Sekunden"
-  },
-  {
-    "id": "boilerplate.containers.HomePage.start_project.message",
-    "defaultMessage": "A highly scalable, offline-first foundation with the best DX and a focus on performance and best practices",
-    "message": "Ein skalierendes, offline-first Fundament mit der besten DX und einem Fokus auf Performance und bewährte Methoden"
-  },
-  {
-    "id": "boilerplate.containers.HomePage.tryme.atPrefix",
-    "defaultMessage": "@",
-    "message": ""
-  },
-  {
-    "id": "boilerplate.containers.HomePage.tryme.header",
-    "defaultMessage": "Try me!",
-    "message": "Probiere mich!"
-  },
-  {
-    "id": "boilerplate.containers.HomePage.tryme.message",
-    "defaultMessage": "Show Github repositories by",
-    "message": "Zeige die Github Repositories von"
-  },
-  {
-    "id": "boilerplate.containers.NotFoundPage.header",
-    "defaultMessage": "Page not found.",
-    "message": "Seite nicht gefunden."
-  },
-  {
-    "id": "boilerplate.containers.NotFoundPage.home",
-    "defaultMessage": "Home",
-    "message": ""
-  }
-]
+{
+  "app.components.LocaleToggle.de": "",
+  "app.components.LocaleToggle.en": "",
+  "boilerplate.components.Footer.author.message": "Mit Liebe gemacht von {author}.",
+  "boilerplate.components.Footer.license.message": "Dieses Projekt wird unter der MIT-Lizenz veröffentlicht.",
+  "boilerplate.containers.FeaturePage.css.header": "",
+  "boilerplate.containers.FeaturePage.css.message": "Die nächste Generation von CSS",
+  "boilerplate.containers.FeaturePage.feedback.header": "Sofortiges Feedback",
+  "boilerplate.containers.FeaturePage.feedback.message": "Genießen Sie die beste Entwicklungserfahrung und programmieren Sie Ihre App so schnell wie noch nie! Ihre Änderungen an dem CSS und JavaScript sind sofort reflektiert, ohne die Seite aktualisieren zu müssen. So bleibt der Anwendungszustand bestehen, auch wenn Sie etwas in dem darunter liegenden Code aktualisieren!",
+  "boilerplate.containers.FeaturePage.header": "",
+  "boilerplate.containers.FeaturePage.home": "",
+  "boilerplate.containers.FeaturePage.internationalization.header": "Komplette i18n Standard-Internationalisierung und Pluralisierung",
+  "boilerplate.containers.FeaturePage.internationalization.message": "Das Internet ist global. Mehrsprachige- und Pluralisierungsunterstützung ist entscheidend für große Web-Anwendungen.",
+  "boilerplate.containers.FeaturePage.javascript.header": "Das Internet ist global. Mehrsprachige- und Pluralisierungsunterstützung ist entscheidend für große Web-Anwendungen.",
+  "boilerplate.containers.FeaturePage.javascript.message": "Benutzen Sie ES6 template strings, object destructuring, arrow functions, JSX syntax und mehr, heute.",
+  "boilerplate.containers.FeaturePage.network.header": "",
+  "boilerplate.containers.FeaturePage.network.message": "The next frontier in performant web apps: availability without a\n      network connection from the instant your users load the app.",
+  "boilerplate.containers.FeaturePage.routing.header": "Standard Routing",
+  "boilerplate.containers.FeaturePage.routing.message": "Schreiben Sie CSS, das am selben Ort wie ihre Komponenten ist. Deterministisch generierte, einzigartige Klassennamen halten die Spezifität niedrig während styling Konflikte vermieden werden. Senden Sie nur das CSS an ihre Benutzer welches dann wirklich sichtbar ist für die schnellste Performance!",
+  "boilerplate.containers.FeaturePage.scaffolding.header": "Schnelles Scaffolding",
+  "boilerplate.containers.FeaturePage.scaffolding.message": "Automatisieren Sie die Kreation von Komponenten, Containern, Routen, Selektoren und Sagas – und ihre Tests – direkt von dem Terminal!",
+  "boilerplate.containers.FeaturePage.state_management.header": "Berechenbare Stateverwaltung",
+  "boilerplate.containers.FeaturePage.state_management.message": "Unidirectional data flow erlaubt uns alle Änderungen ihrer Applikation zu loggen und time travel debugging einzusetzen.",
+  "boilerplate.containers.HomePage.features.Button": "",
+  "boilerplate.containers.HomePage.start_project.header": "Beginnen Sie Ihr nächstes React Projekt in Sekunden",
+  "boilerplate.containers.HomePage.start_project.message": "Ein skalierendes, offline-first Fundament mit der besten DX und einem Fokus auf Performance und bewährte Methoden",
+  "boilerplate.containers.HomePage.tryme.atPrefix": "",
+  "boilerplate.containers.HomePage.tryme.header": "Probiere mich!",
+  "boilerplate.containers.HomePage.tryme.message": "Zeige die Github Repositories von",
+  "boilerplate.containers.NotFoundPage.header": "Seite nicht gefunden.",
+  "boilerplate.containers.NotFoundPage.home": ""
+}