Integration examples adjustments

README.md

@@ -378,7 +378,7 @@ i18n.runWithLocale(locale, func)
 
 ## Integrations
 
-This section showcases some of the ways of integrating `universe:i18n` with different frameworks. More detailed examples can be found in the `integrations` directory.
+This section showcases some of the ways of integrating `universe:i18n` with different frameworks. More detailed examples can be found in the [`integrations` directory](https://github.com/vazco/meteor-universe-i18n/blob/master/integrations).
 
 ### Integration with React
 

integrations/blaze/App.html

@@ -9,5 +9,5 @@ <h1>Example of i18n</h1>
 
 <template name="i18nTemplate">
   <span>{{__ 'ok'}}</span>
-  <span>{{{__ 'test'}}}</span>
+  <span>{{{__ 'dog'}}}</span>
 </template>

integrations/blaze/en.i18n.yml → integrations/blaze/locales/en.i18n.yml

@@ -1,3 +1,3 @@
 _locale: en
 ok: Okay
-test: <b>Test</b>
+dog: Dog

integrations/blaze/locales/es.i18n.yml

@@ -0,0 +1,3 @@
+_locale: es
+ok: Bien
+dog: Perro

integrations/blaze/reactivei18n.ts

@@ -2,7 +2,8 @@ import { i18n } from 'meteor/universe:i18n';
 import { Template } from 'meteor/templating';
 import { ReactiveVar } from 'meteor/reactive-var';
 
-import './en.i18n.yml';
+import './locales/en.i18n.yml';
+import './es/en.i18n.yml';
 import './main.html';
 
 const localeReactive = new ReactiveVar<string>(i18n.getLocale());

integrations/react/App.tsx

@@ -9,7 +9,6 @@ const Example = () => {
       Are you sure?
       <button>{t('ok')}</button>
       <button>{t('dog')}</button>
-      <input placeholder={t('company.placeholder')} />
     </>
   );
 };

integrations/react/locales/en.i18n.yml

@@ -0,0 +1,3 @@
+_locale: en
+ok: Okay
+dog: Dog

integrations/react/locales/es.i18n.yml

@@ -0,0 +1,3 @@
+_locale: es
+ok: Bien
+dog: Perro

integrations/react/reactivei18n.tsx

@@ -7,7 +7,8 @@ import React, {
   useContext,
 } from 'react';
 
-import './en.i18n.yml';
+import './locales/en.i18n.yml';
+import './locales/es.i18n.yml';
 
 const localeContext = createContext(i18n.getLocale());
 

integrations/svelte/App.svelte

@@ -20,21 +20,20 @@
   <div>
     Locale: {$locale}
     <br />
-    hi: {$t('hi')}
     <br />
     ok: {$t('ok')}
     <br />
-    apple: {$t('apple')}
+    dog: {$t('dog')}
   </div>
   <br />
 
   <!-- Example of updating locale in the DB from client level-->
   Locale to update:
-  <input placeholder="e.g. es" bind:value={localeToUpdate} /><br />
+  <input placeholder="e.g. en" bind:value={localeToUpdate} /><br />
   Key to update:
-  <input placeholder="e.g. apple" bind:value={keyToUpdate} /><br />
+  <input placeholder="e.g. dog" bind:value={keyToUpdate} /><br />
   New value:
-  <input placeholder="e.g. Green apple" bind:value={valueToUpdate} /><br />
+  <input placeholder="e.g. Big dog" bind:value={valueToUpdate} /><br />
   <button
     on:click={() => {
       const newTranslation = {};

integrations/svelte/locales/en.i18n.yml

@@ -1,5 +1,3 @@
 _locale: en
-hi: Hello
 ok: Okay
-apple: Apple
 dog: Dog

integrations/svelte/locales/es.i18n.yml

@@ -1,5 +1,3 @@
 _locale: es
-hi: Hola
 ok: Bien
-apple: Manzana
 dog: Perro

integrations/svelte/server.js

@@ -20,6 +20,8 @@ function refresh(locale, { translations = {}, updatedAt = new Date() }) {
 }
 
 const mergeTranslations = (baseTranslations, translation) => {
+  // This is just a basic example of shallow merge
+  // To assure correct merge of objects deep merge should be used
   return Object.assign({}, translation, baseTranslations);
 };