docs: ✏️ initial wiki docs

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "docs"]
+	path = docs
+	url = git@github.com:kaisermann/svelte-i18n.wiki.git

docs

@@ -0,0 +1 @@
+Subproject commit acadff6027a315e011a7157ae3b139d5e4cc3ae5

example/rollup.config.js

@@ -39,28 +39,19 @@ export default {
         dedupe,
       }),
       commonjs(),
-      json(),
+      json({
+        namedExports: false,
+        compact: !dev,
+      }),
       legacy &&
         babel({
           extensions: ['.js', '.mjs', '.html', '.svelte'],
           runtimeHelpers: true,
           exclude: ['node_modules/@babel/**'],
-          presets: [
-            [
-              '@babel/preset-env',
-              {
-                targets: '> 0.25%, not dead',
-              },
-            ],
-          ],
+          presets: [['@babel/preset-env', { targets: '> 0.25%, not dead' }]],
           plugins: [
             '@babel/plugin-syntax-dynamic-import',
-            [
-              '@babel/plugin-transform-runtime',
-              {
-                useESModules: true,
-              },
-            ],
+            ['@babel/plugin-transform-runtime', { useESModules: true }],
           ],
         }),
 
@@ -88,7 +79,10 @@ export default {
         dedupe,
       }),
       commonjs(),
-      json(),
+      json({
+        namedExports: false,
+        compact: !dev,
+      }),
     ],
     external: Object.keys(pkg.dependencies).concat(
       require('module').builtinModules ||

example/src/i18n.js

@@ -1,4 +1,4 @@
-import { register, getClientLocale, locale } from 'svelte-i18n'
+import { register } from 'svelte-i18n'
 
 register('en', () => import('../messages/en.json'))
 register('pt-BR', () => import('../messages/pt-BR.json'))

example/src/routes/_layout.svelte

@@ -1,10 +1,10 @@
 <script context="module">
   import { locales, locale, waitLocale,getClientLocale } from 'svelte-i18n'
-  import Lang from 'svelte-i18n/Lang.svelte'
+  import Intl from 'svelte-i18n/Intl.svelte'
 
   export async function preload() {
     const initialLocale = getClientLocale({
-      default: 'pt-BR',
+      default: 'en-US',
       navigator: true
     })
     return locale.set(initialLocale)
@@ -33,19 +33,40 @@
     margin: 0 auto;
     box-sizing: border-box;
   }
+
+  .loading {
+    position: fixed;
+    z-index: 10;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, .5);
+    color: #fff;
+    font-family: monospace;
+    font-size: 4rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+
 </style>
 
-<Lang let:loading>{loading}</Lang>
+<Intl let:loading>
+  {#if loading}
+    <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>
+  <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>

example/src/routes/about/index.svelte

@@ -5,7 +5,7 @@
   register('pt-BR', () => import('./_locales/pt-BR.json'))
   register('es-ES', () => import('./_locales/es-ES.json'))
 
-  export async function preload() {
+  export async function preload(page, session) {
     return waitLocale()
   }
 </script>
@@ -15,9 +15,9 @@
 </script>
 
 <svelte:head>
-  <title>{$_('title.about', { default: 'About' })}</title>
+  <title>{$_('title.about')}</title>
 </svelte:head>
 
-<h1>{$_('about_this_site', { default: 'About this site' })}</h1>
+<h1>{$_('about_this_site')}</h1>
 
-<p>{$_('about_content[0]', { default: "This is the 'about' page. There's not much here." })}</p>
+<p>{$_('about_content[0]')}</p>