From 7c443179b230ebe048eea20699b54a2e443e05d1 Mon Sep 17 00:00:00 2001
From: Christian Kaisermann <christian@kaisermann.me>
Date: Thu, 21 Nov 2019 23:34:43 -0300
Subject: [PATCH] =?UTF-8?q?docs:=20=E2=9C=8F=EF=B8=8F=20update=20example?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/messages/default.json     |   5 ++
 example/messages/en.json          |   5 ++
 example/messages/es-ES.json       |   5 ++
 example/messages/pt-BR.json       |   5 ++
 example/src/components/Nav.svelte | 116 ++++++++++++++++++------------
 example/src/routes/_layout.svelte |  17 +----
 package.json                      |   1 +
 yarn.lock                         |  26 +++++++
 8 files changed, 119 insertions(+), 61 deletions(-)

diff --git a/example/messages/default.json b/example/messages/default.json
index 16f8ce0..8a73294 100644
--- a/example/messages/default.json
+++ b/example/messages/default.json
@@ -11,5 +11,10 @@
     "success": "Great success!",
     "high_five": "High five",
     "try_editing": "Try editing this file (src/routes/index.svelte) to test live reloading."
+  },
+  "languages": {
+    "pt_BR": "",
+    "en": "",
+    "es_ES": ""
   }
 }
diff --git a/example/messages/en.json b/example/messages/en.json
index 11c0d65..ac0c5e2 100644
--- a/example/messages/en.json
+++ b/example/messages/en.json
@@ -11,5 +11,10 @@
     "success": "Great success!",
     "high_five": "High five",
     "try_editing": "Try editing this file (src/routes/index.svelte) to test live reloading."
+  },
+  "languages": {
+    "pt_BR": "Portugues",
+    "en": "English",
+    "es_ES": "Spanish"
   }
 }
diff --git a/example/messages/es-ES.json b/example/messages/es-ES.json
index 0d15ff4..826134b 100644
--- a/example/messages/es-ES.json
+++ b/example/messages/es-ES.json
@@ -11,5 +11,10 @@
     "success": "Gran éxito!",
     "high_five": "Cinco altos",
     "try_editing": " Intente editar este archivo (src/routes/index.svelte) para probar la recarga en vivo."
+  },
+  "languages": {
+    "pt_BR": "Portugués",
+    "en": "Ingles",
+    "es_ES": "Espanol"
   }
 }
diff --git a/example/messages/pt-BR.json b/example/messages/pt-BR.json
index b1f3f29..1997c22 100644
--- a/example/messages/pt-BR.json
+++ b/example/messages/pt-BR.json
@@ -11,5 +11,10 @@
     "success": "Suuuucesso!",
     "high_five": "Toca aqui",
     "try_editing": "Tente editar este arquivo (src/routes/index.svelte) para testar o recarregamento ao vivo."
+  },
+  "languages": {
+    "pt_BR": "Português",
+    "en": "Inglês",
+    "es_ES": "Espanhol"
   }
 }
diff --git a/example/src/components/Nav.svelte b/example/src/components/Nav.svelte
index eb4c82f..6964fb4 100644
--- a/example/src/components/Nav.svelte
+++ b/example/src/components/Nav.svelte
@@ -1,62 +1,86 @@
 <script>
-  import { _ } from 'svelte-i18n'
-
-	export let segment;
+  import { _, locale, dictionary, locales } from 'svelte-i18n'
+  export let segment
 </script>
 
 <style>
-	nav {
-		border-bottom: 1px solid rgba(255,62,0,0.1);
-		font-weight: 300;
-		padding: 0 1em;
-	}
+  nav {
+    border-bottom: 1px solid rgba(255, 62, 0, 0.1);
+    font-weight: 300;
+    padding: 0 1em;
+    display: flex;
+    justify-content: space-between;
+  }
 
-	ul {
-		margin: 0;
-		padding: 0;
-	}
+  ul {
+    margin: 0;
+    padding: 0;
+  }
 
-	/* clearfix */
-	ul::after {
-		content: '';
-		display: block;
-		clear: both;
-	}
+  /* clearfix */
+  ul::after {
+    content: '';
+    display: block;
+    clear: both;
+  }
 
-	li {
-		display: block;
-		float: left;
-	}
+  li {
+    display: block;
+    float: left;
+  }
 
-	.selected {
-		position: relative;
-		display: inline-block;
-	}
+  .selected {
+    position: relative;
+    display: inline-block;
+  }
 
-	.selected::after {
-		position: absolute;
-		content: '';
-		width: calc(100% - 1em);
-		height: 2px;
-		background-color: rgb(255,62,0);
-		display: block;
-		bottom: -1px;
-	}
+  .selected::after {
+    position: absolute;
+    content: '';
+    width: calc(100% - 1em);
+    height: 2px;
+    background-color: rgb(255, 62, 0);
+    display: block;
+    bottom: -1px;
+  }
 
-	a {
-		text-decoration: none;
-		padding: 1em 0.5em;
-		display: block;
-	}
+  a,
+  .a {
+    cursor: pointer;
+    text-decoration: none;
+    padding: 1em 0.5em;
+    display: block;
+  }
 </style>
 
 <nav>
-	<ul>
-		<li><a class:selected='{segment === undefined}' href='.'>{$_('nav.home')}</a></li>
-		<li><a class:selected='{segment === "about"}' href='about'>{$_('nav.about')}</a></li>
+  <ul>
+    <li>
+      <a class:selected={segment === undefined} href=".">{$_('nav.home')}</a>
+    </li>
+    <li>
+      <a class:selected={segment === 'about'} href="about">{$_('nav.about')}</a>
+    </li>
 
-		<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
+    <!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
 		     the blog data when we hover over the link or tap it on a touchscreen -->
-		<li><a rel=prefetch class:selected='{segment === "blog"}' href='blog'>{$_('nav.blog')}</a></li>
-	</ul>
+    <li>
+      <a rel="prefetch" class:selected={segment === 'blog'} href="blog">
+        {$_('nav.blog')}
+      </a>
+    </li>
+  </ul>
+  <ul class="lang">
+    {#each $locales as item}
+      <li>
+        <span
+          class="a"
+          class:selected={$locale.includes(item)}
+          href={`#!${item}`}
+          on:click={() => ($locale = item)}>
+          {item.replace('-', '_')}
+        </span>
+      </li>
+    {/each}
+  </ul>
 </nav>
diff --git a/example/src/routes/_layout.svelte b/example/src/routes/_layout.svelte
index 9769934..7771265 100644
--- a/example/src/routes/_layout.svelte
+++ b/example/src/routes/_layout.svelte
@@ -1,5 +1,5 @@
 <script context="module">
-  import { locales, locale, isLoading, waitInitialLocale } from 'svelte-i18n'
+  import { isLoading, waitInitialLocale } from 'svelte-i18n'
 
   export async function preload() {
     return waitInitialLocale({
@@ -12,13 +12,6 @@
 <script>
   import Nav from '../components/Nav.svelte'
 
-  const localeLabels = {
-    'pt-BR': 'Português',
-    en: 'English',
-    'en-US': 'English US',
-    'es-ES': 'Espanõl',
-  }
-
   export let segment
 </script>
 
@@ -54,13 +47,7 @@
 {/if}
 
 <Nav {segment} />
+
 <main>
-  <select bind:value={$locale}>
-    {#each $locales as locale}
-      {#if locale in localeLabels}
-        <option value={locale}>{localeLabels[locale]}</option>
-      {/if}
-    {/each}
-  </select>
   <slot />
 </main>
diff --git a/package.json b/package.json
index ee19b37..8e082cc 100644
--- a/package.json
+++ b/package.json
@@ -80,6 +80,7 @@
     "estree-walker": "^0.9.0",
     "fast-memoize": "^2.5.1",
     "intl-messageformat": "^7.5.2",
+    "messageformat": "^2.3.0",
     "nano-memoize": "^1.1.7",
     "object-resolve-path": "^1.1.1",
     "tiny-glob": "^0.2.6"
diff --git a/yarn.lock b/yarn.lock
index 219791f..ced681e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3434,6 +3434,13 @@ make-error@1.x:
   resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.5.tgz#efe4e81f6db28cadd605c70f29c831b58ef776c8"
   integrity sha512-c3sIjNUow0+8swNwVpqoH4YCShKNFkMaw6oH1mNS2haDZQqkeZFlHS3dhoeEbKKmJB4vXpJucU6oH75aDYeE9g==
 
+make-plural@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/make-plural/-/make-plural-4.3.0.tgz#f23de08efdb0cac2e0c9ba9f315b0dff6b4c2735"
+  integrity sha512-xTYd4JVHpSCW+aqDof6w/MebaMVNTVYBZhbB/vi513xXdiPT92JMVCo0Jq8W2UZnzYRFeVbQiQ+I25l13JuKvA==
+  optionalDependencies:
+    minimist "^1.2.0"
+
 makeerror@1.0.x:
   version "1.0.11"
   resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.11.tgz#e01a5c9109f2af79660e4e8b9587790184f5a96c"
@@ -3458,6 +3465,25 @@ merge-stream@^2.0.0:
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
   integrity sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==
 
+messageformat-formatters@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/messageformat-formatters/-/messageformat-formatters-2.0.1.tgz#0492c1402a48775f751c9b17c0354e92be012b08"
+  integrity sha512-E/lQRXhtHwGuiQjI7qxkLp8AHbMD5r2217XNe/SREbBlSawe0lOqsFb7rflZJmlQFSULNLIqlcjjsCPlB3m3Mg==
+
+messageformat-parser@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/messageformat-parser/-/messageformat-parser-4.1.2.tgz#fd34ec39912a14868a1595eaeb742485ab8ab372"
+  integrity sha512-7dWuifeyldz7vhEuL96Kwq1fhZXBW+TUfbnHN4UCrCxoXQTYjHnR78eI66Gk9LaLLsAvzPNVJBaa66DRfFNaiA==
+
+messageformat@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/messageformat/-/messageformat-2.3.0.tgz#de263c49029d5eae65d7ee25e0754f57f425ad91"
+  integrity sha512-uTzvsv0lTeQxYI2y1NPa1lItL5VRI8Gb93Y2K2ue5gBPyrbJxfDi/EYWxh2PKv5yO42AJeeqblS9MJSh/IEk4w==
+  dependencies:
+    make-plural "^4.3.0"
+    messageformat-formatters "^2.0.1"
+    messageformat-parser "^4.1.2"
+
 micromatch@^3.1.10, micromatch@^3.1.4:
   version "3.1.10"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"