feat: 🎸 add waitInitialLocale helper

.eslintignore

@@ -1,2 +1,3 @@
 /test/fixtures
 dist/
+example/

Intl.svelte

@@ -7,9 +7,9 @@
 </script>
 
 <script>
-  import { locale, locales, loading } from './dist/i18n.mjs'
+  import { locale, locales, isLoading } from './dist/i18n.mjs'
 
   $: updateLangAttr($locale)
 </script>
 
-<slot loading={$loading} locale={$locale} locales={$locales} />
+<slot isLoading={$isLoading} locale={$locale} locales={$locales} />

example/src/routes/_layout.svelte

@@ -1,13 +1,12 @@
 <script context="module">
-  import { locales, locale, waitLocale,getClientLocale } from 'svelte-i18n'
+  import { locales, locale, waitInitialLocale } from 'svelte-i18n'
   import Intl from 'svelte-i18n/Intl.svelte'
 
   export async function preload() {
-    const initialLocale = getClientLocale({
+    return waitInitialLocale({
       default: 'en-US',
-      navigator: true
+      navigator: true,
     })
-    return locale.set(initialLocale)
   }
 </script>
 
@@ -16,7 +15,7 @@
 
   const localeLabels = {
     'pt-BR': 'Português',
-    'en': 'English',
+    en: 'English',
     'en-US': 'English US',
     'es-ES': 'Espanõl',
   }
@@ -41,7 +40,7 @@
     right: 0;
     top: 0;
     bottom: 0;
-    background-color: rgba(0, 0, 0, .5);
+    background-color: rgba(0, 0, 0, 0.5);
     color: #fff;
     font-family: monospace;
     font-size: 4rem;
@@ -49,12 +48,10 @@
     justify-content: center;
     align-items: center;
   }
-
-
 </style>
 
-<Intl let:loading>
-  {#if loading}
+<Intl let:isLoading>
+  {#if isLoading}
     <div class="loading">Loading...</div>
   {/if}
 

src/client/includes/loaderQueue.ts

@@ -5,7 +5,7 @@ import {
   addMessagesTo,
 } from '../stores/dictionary'
 import { getCurrentLocale } from '../stores/locale'
-import { $loading } from '../stores/loading'
+import { $isLoading } from '../stores/loading'
 
 import { removeFromLookupCache } from './lookup'
 import { getLocalesFrom } from './utils'
@@ -54,7 +54,7 @@ export async function flushQueue(locale: string = getCurrentLocale()) {
   if (queue.length === 0) return
 
   removeLocaleFromQueue(locale)
-  const loadingDelay = setTimeout(() => $loading.set(true), 200)
+  const loadingDelay = setTimeout(() => $isLoading.set(true), 200)
 
   // todo what happens if some loader fails?
   return Promise.all(queue.map(loader => loader()))
@@ -66,7 +66,7 @@ export async function flushQueue(locale: string = getCurrentLocale()) {
     })
     .then(() => {
       clearTimeout(loadingDelay)
-      $loading.set(false)
+      $isLoading.set(false)
     })
 }
 

src/client/includes/utils.ts

@@ -1,3 +1,5 @@
+import { GetClientLocaleOptions } from '../types'
+
 export function capital(str: string) {
   return str.replace(/(^|\s)\S/, l => l.toLocaleUpperCase())
 }
@@ -47,15 +49,7 @@ export const getClientLocale = ({
   pathname,
   hostname,
   default: defaultLocale,
-}: {
-  navigator?: boolean
-  hash?: string | RegExp
-  search?: string | RegExp
-  fallback?: string
-  default?: string
-  pathname?: RegExp
-  hostname?: RegExp
-}) => {
+}: GetClientLocaleOptions) => {
   let locale
 
   if (typeof window === 'undefined') {

src/client/index.ts

@@ -1,9 +1,20 @@
 import merge from 'deepmerge'
 
-import { MessageObject } from './types'
+import { GetClientLocaleOptions, MessageObject } from './types'
+import { getClientLocale } from './includes/utils'
+import { $locale } from './stores/locale'
 
 // defineMessages allow us to define and extract dynamic message ids
-const defineMessages = (i: Record<string, MessageObject>) => i
+export function defineMessages(i: Record<string, MessageObject>) {
+  return i
+}
+
+export function waitInitialLocale(options: GetClientLocaleOptions | string) {
+  if (typeof options === 'string') {
+    return $locale.set(options)
+  }
+  return $locale.set(getClientLocale(options))
+}
 
 export { $locale as locale, loadLocale as preloadLocale } from './stores/locale'
 export {
@@ -11,13 +22,12 @@ export {
   $locales as locales,
   addMessagesTo,
 } from './stores/dictionary'
-export { $loading as loading } from './stores/loading'
+export { $isLoading as isLoading } from './stores/loading'
 export { $format as format, $format as _, $format as t } from './stores/format'
 
 // utilities
-export { defineMessages, merge }
+export { getClientLocale, merge }
 export { customFormats, addCustomFormats } from './includes/formats'
-export { getClientLocale } from './includes/utils'
 export {
   flushQueue as waitLocale,
   registerLocaleLoader as register,

src/client/stores/loading.ts

@@ -1,3 +1,3 @@
 import { writable } from 'svelte/store'
 
-export const $loading = writable(false)
+export const $isLoading = writable(false)

src/client/types/index.ts

@@ -45,3 +45,13 @@ export interface Formatter extends FormatterFn {
 export interface MessagesLoader {
   (): Promise<any>
 }
+
+export interface GetClientLocaleOptions {
+  navigator?: boolean
+  hash?: string | RegExp
+  search?: string | RegExp
+  fallback?: string
+  default?: string
+  pathname?: RegExp
+  hostname?: RegExp
+}