feat: 🎸 locale change automatically updates the document lang

Intl.svelte

@@ -1,15 +0,0 @@
-<script context="module">
-  function updateLangAttr(lang) {
-    if (typeof window !== 'undefined') {
-      document.documentElement.setAttribute('lang', lang)
-    }
-  }
-</script>
-
-<script>
-  import { locale, locales, isLoading } from './dist/i18n.mjs'
-
-  $: updateLangAttr($locale)
-</script>
-
-<slot isLoading={$isLoading} locale={$locale} locales={$locales} />

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>

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