feat: 🎸 locale change automatically updates the document lang

kaisermann · Nov 22, 2019 · 64c8e55 · 64c8e55
1 parent 3ec297e
commit 64c8e55
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 33 deletions.
diff --git a/Intl.svelte b/Intl.svelte
diff --git a/example/src/routes/_layout.svelte b/example/src/routes/_layout.svelte
@@ -1,6 +1,5 @@
 <script context="module">
-  import { locales, locale, waitInitialLocale } from 'svelte-i18n'
-  import Intl from 'svelte-i18n/Intl.svelte'
+  import { locales, locale, isLoading, waitInitialLocale } from 'svelte-i18n'
 
   export async function preload() {
     return waitInitialLocale({
@@ -50,20 +49,18 @@
   }
 </style>
 
-<Intl let:isLoading>
-  {#if isLoading}
-    <div class="loading">Loading...</div>
-  {/if}
+{#if $isLoading}
+  <div class="loading">Loading...</div>
+{/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>
-</Intl>
+<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/src/client/stores/locale.ts b/src/client/stores/locale.ts
@@ -29,6 +29,10 @@ function loadLocale(localeToLoad: string) {
 
 $locale.subscribe((newLocale: string) => {
   current = newLocale
+
+  if (typeof window !== 'undefined') {
+    document.documentElement.setAttribute('lang', newLocale)
+  }
 })
 
 const localeSet = $locale.set