<script context="module">
  import { locale, translations, getBrowserLocale } from 'svelte-intl';

  // If you want to split your bundle, you can call this multiple times,
  // the dictionaries will be merged.
  translations.update({
    en: {
      hello: 'Hello, {name}',
    },
    pt: {
      hello: 'Olá, {name}',
    },
  })

  locale.set(getBrowserLocale('en')) // try to use window.navigator.language
</script>

<script>
  // use _ or translate
  import { _ } from 'svelte-intl'

  export let name = 'John'
</script>

<h1> {$_('hello', { name })} </h1>

<script>
  import { get } from 'svelte/store'
  import { translate } from 'svelte-intl'

  const title = get(translate)('title')
</script>

<h1> Title: {title} </h1>
<h1> Reactive Title: {$translate('title')} </h1>

<!-- LanguageSelector.svelte -->
<script>
  import { locale, locales } from 'svelte-intl'

  const setLocale = e => locale.set(e.target.value)
</script>

<select value={$locale} on:change={setLocale}>
  {#each $locales as l}
    <option value={l}> {l} </option>
  {/each}
</select>