Hello, thank you for making this awesome library! I just have a question related to the usage of this library with Storybook.

I am using svelte with storybook, and it turns out that I need to properly initialize svelte-i18n somehow by using something like addDecorator in Storybook, but I just don't know how. I've already struggled a lot with this, but I haven't found a workaround for this.

Both Storybook for Svelte and svelte-i18n are at their early stages, so I could not really find much information on the web. So I would be really glad if anybody would knows about this issue could help.

Thank you very much in advance!

Any imports leads to:

Uncaught ReferenceError: o is not defined

main.js

import './lang.js';

lang.js

import { locale, dictionary } from 'svelte-i18n';
locale.set('pt');

It would be great if we could add variables to translations similarly to vsprintf, example:

<script>
addMessages
(
'en',
'validation':
{
'maxChars': 'The "%s" field can contain a maximum of %s characters'
}
);
</script>

<span class="warning"> {$_('validation.maxChars', {}, ['name', 30])} </span>
<!-- The "name" field can contain a maximum of 30 characters -->

Thanks!

Since upgrading to svelte-i18n v3 one or two of my Sapper apps appear to have experienced a regression. When the locale value is set in the preload method (in the interests of SSR) the program throws a window is not defined error. Previously this did not occur under the same circumstances.

<script context='module'>
  import { locale, waitLocale } from 'svelte-i18n'

  export async function preload(page, session) {
    locale.set('ga'); // intention being to set value from session variable
    waitLocale();
  }
</script>

The error:

ReferenceError: window is not defined
    at Object.x.set (D:\PATH\node_modules\svelte-i18n\dist\runtime.cjs.js:16:1820)
    at Object.preload (D:\PATH\__sapper__\dev\server\server.js:5821:20)
    at handle_page (D:\PATH\__sapper__\dev\server\server.js:12096:29)
    at handle_error (D:\PATH\__sapper__\dev\server\server.js:11984:3)
    at handle_page (D:\PATH\__sapper__\dev\server\server.js:12148:5)

Occuring on: all browsers, Mac OS and Windows, v3.1 and 3.2 (I haven't tested 3.0), Rollup build.

I have created a minimal repro here:
https://github.com/rodoch/svelte-i18n-bug-repro

I have managed to fix the issue by adding a window is undefined check to line 69 of /svelte-i18n/src/runtime/stores/locale.ts:

    if (typeof window !== 'undefined' && getCurrentLocale() != null && loadingDelay) {
      loadingTimer = window.setTimeout(() => $isLoading.set(true), loadingDelay)
    } else {
      $isLoading.set(true)
    }

Happy to open a PR if you think this is actually the solution and not a hack!

I can't see from the API any way to query for the currently used locale. I can set the locale with
store.i18n.setLocale('en-US')
and the corresponding
store.i18n.getLocale()
or
store.i18n.currentLocal
seem to not exist

In many localization scenarios, locales can have different formats for dates.
Think en vs jp, for example. Or en-US vs en-GB.

It is thus required to define different date formats for each locale, preferably even in the locale json file itself, so a person doing localization would be able to tune the formats if needed.

It's very hard to figure out how to change date formats at all, here is a working example:

  i18n.init({
    ...
    formats: {
      date: {
        short: {month: 'numeric', day: 'numeric', year: 'numeric'}, // short seems to be the default
        full: {year: 'numeric', month: 'short', day: 'numeric'}
      }
    }
  })

However, it seems to be using exactly the same format for each different locale, maybe according to the browser's default locale?

It doesn't seem to work well with SSR - Everybody gets the same server-rendered result using the default locale, no matter what locale they're using.

So, is it possible to extract locale from HTTP request header on the server side and render the HTML result based on the user's locale?

After updating from 1.1.2-beta to 2.0.0 or later, formatted translations are no longer being formatted.

For example:
{ "page_indicator": "Page {currentPage} of {totalPages}", }

and calling;
{$_('page_indicator', { currentPage: 1, totalPages: 10 })}

will end up in displaying:
Page {currentPage} of {totalPages} instead of replacing the variables.

Downgrading back to 1.1.2-beta fixes makes the formatting functional again.

Has this feature been removed?

Hi guys, congrats for the library.

I'm just integrating this library in a personal project and it works fine, except when I want to use message interpolation.

Describe the bug
An error is shown in the console when trying to use interpolation.
intl_messageformat__WEBPACK_IMPORTED_MODULE_3__ is not a constructor

Expected behavior
The text should be correctly shown.

Information about your project:

• Mac Catalina
• svelte-i18n 2.2.1
• webpack

Additional context
The error seems totally related with the configuration of this package with webpack, so, here you have my webpack config file.

const path = require('path');

const mode = process.env.NODE_ENV || 'development';
const devtool = mode === 'development' ? 'source-map' : false;

module.exports = {
    mode,
    devtool,
    entry: {
        bundle: './src/main.js'
    },
    resolve: {
        alias: {
            svelte: path.resolve('node_modules', 'svelte')
        },
        extensions: ['.mjs', '.svelte', '.ts', '.js'],
        mainFields: ['svelte', 'browser', 'module', 'main'],
    },
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: '[name].js',
    },
    module: {
        rules: [
            {
                test: /\.(svelte)$/,
                use: {
                    loader: 'svelte-loader',
                    options: {
                        preprocess: require('svelte-preprocess')(
                            {
                                typescript: {
                                    transpileOnly: true
                                }
                            })
                    },
                },
            },
            {
                test: /\.(ts)$/,
                loader: 'ts-loader'
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            sassOptions: {
                                includePaths: [
                                    './src/theme',
                                    './node_modules',
                                ]
                            }
                        }
                    }
                ]
            }
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, "/public"),
        compress: true,
        historyApiFallback: true,
    },
};

Hope you can help me.

Thanks!

I as a developer want to prevent the svelte-i18n library work on the client side and leave the text of which was rendered by library on the server side.
I tried to implement this with i18next but failed
It is very important for us to speed up page loading as much as possible.

My main use case for i18n, is supporting multiple versions of English. For example US and AU.
Many words have different spelling, but they are both English so mainly the same.

Instead of having duplicate dictionaries with some minor differences, It would be useful to have a fallback dictionary, so that only the differences would need to be in the 'other' english dictionaries.

Thoughts on this?

Using this is ok:
import { i18n } from 'svelte-i18n'

The error message is:

Error: 'default' is not exported by node_modules/svelte-i18n/dist/i18n.m.js

You could either export the default function or change the docs so things work without changes.

I have in my JSON something like that:

"countries": {
    "singular": "country",
    "list": {
      "AF": "Afghanistan",
      "AL": "Albania",
      "DZ": "Algeria",
      "AS": "American Samoa",
      "AD": "Andorra",
      "AO": "Angola",
      "AI": "Anguilla",
      "AQ": "Antarctica",
      "AG": "Antigua and Barbuda",
      ...
      }
}

and I would like to be able to do that

$_("countries.list")

and get the list of countries as an object.

Right now I get an error telling me that countries.list doesn't exist.
For the moment I will probably use the $dictionary but it is painful because everything is shallow so I need to manually filter each key to find what I want.

Am I missing something?

Is your feature request related to a problem? Please describe.
Currently, we need to do a init on both client and the server, which I believe is unnecessary. And currently I cannot see how to set the initial locale value on client which you detected in your middleware on the server side. Thats what is going to happen on a production environment.

Describe the solution you'd like

This would require large scale changes, but the initialization only needs to be server side, and the init needs to take a parameter for setting initial locale. Right now you have to do a locale.set explicitly. Once the library knows exactly which strings to load, it needs to store the messages in the locale store, the store gets rehydrated on the client, so there is no need to register and do init on client again.

Describe alternatives you've considered

One alternative could be instead of saving all messages in store, we provide a way to access the current locale in the store, and then we use that value on the client to load the message needed. But doing the init on client again seems redundant.

How important is this feature to you?
I would say its pretty important since currently I can't think of any way of passing the server side locale onto the client.

Simply using the default Sapper webpack template:

$ npx degit sveltejs/sapper-template my-app
$ cd my-app/
$ npm i
$ npm i svelte-i18n

with src/client.js including the svelte-i18n example (only destructured import { i18n } to avoid an import error, want me to open another issue?) like so:

import * as sapper from '../__sapper__/client.js';

import { i18n } from 'svelte-i18n'
import { Store } from 'svelte/store'

/** i18n(svelteStore, { dictionary }) */
let store = new Store()

store = i18n(store, {
  dictionary: {
    'pt-BR': {
      message: 'Mensagem',
      greeting: 'Olá {name}, como vai?',
      greetingIndex: 'Olá {0}, como vai?',
      meter: 'metros | metro | metros',
      book: 'livro | livros',
      messages: {
        alert: 'Alerta',
        error: 'Erro',
      },
    },
    'en-US': {
      message: 'Message',
      greeting: 'Hello {name}, how are you?',
      greetingIndex: 'Hello {0}, how are you?',
      meter: 'meters | meter | meters',
      book: 'book | books',
      messages: {
        alert: 'Alert',
        error: 'Error',
      },
    },
  },
})

/**
 * Extend the initial dictionary.
 * Dictionaries are deeply merged.
 * */
store.i18n.extendDictionary({
  'pt-BR': {
    messages: {
      warn: 'Aviso',
      success: 'Sucesso',
    },
  },
  'en-US': {
    messages: {
      warn: 'Warn',
      success: 'Success',
    },
  },
})

/** Set the initial locale */
store.i18n.setLocale('en-US')


sapper.start({
  target: document.querySelector('#sapper'),
  store
});

With

$ npm run dev

In my browser I get:

client.js:91 Uncaught TypeError: fn is not a function
    at set_store (client.js:91)
    at Module.start (client.js:386)
    at Module../src/client.js (client.js:59)
    at __webpack_require__ (bootstrap:767)
    at bootstrap:903
    at bootstrap:903
set_store @ client.js:91
start @ client.js:386
./src/client.js @ client.js:59
__webpack_require__ @ bootstrap:767
(anonymous) @ bootstrap:903
(anonymous) @ bootstrap:903

Describe the bug
2.0.2 went missing on npm and upgrading to 2.1.0 breaks EdgeHTML for me.

Sadly I am on the go right now and cant properly debug with my virtual machine on my laptop.

EDIT:
Just found a very very stupid typo of mine that somehow only led to an error in Edge.

EDIT2:
Due to cache stuff the error was fixed by an old version. Error still occurs.

When I init with

initialLocale: {
    navigator: true
  }

I have the following error:

TypeError: n.lastIndexOf is not a function. (In 'n.lastIndexOf("-")', 'n.lastIndexOf' is undefined)

but if I do it like so:

initialLocale: "en"

it works fine.

Here is a repro
https://codesandbox.io/s/focused-cohen-2zzp2?fontsize=14&hidenavigation=1&theme=dark

Describe the bug
Having followed the instructions on how to setup the library in a Svelte app, I am seeing an error in the browser console when I try to render a formatted message.

Logs
Uncaught Error: [svelte-i18n] Cannot format a message without first setting the initial locale.

To Reproduce
I have created the following code:

// ./src/Shared/lang/index.js
import { init, register, getLocaleFromNavigator } from 'svelte-i18n'

register('en-US', () => import('@Shared/lang/en-US.json'))
// I have other locale files registered as well, but I've commented
// them out temporarily for the sake of trying to get this working

init({
  fallbackLocale: 'en-US',
  initialLocale: getLocaleFromNavigator()
})

// ./src/main.js
import App from '@App/app'
import '@Shared/lang'

const app = new App({
  target: document.body,
  props: {
    global: window
  }
})

window.app = app

export default app

The component that the error seems to be sourced from (the first one in which I am attempting to render a formatted/localied message):

// ./src/Header/MainHeaderNavLinks.svelte
<script>
  import { t, isLoading } from 'svelte-i18n'
</script>

{#if $isLoading}
  <p>Loading</p>
{:else}
  <p>I guess it loaded??</p>
  { $t('components.mainHeaderNavLinks.portfolioLinkLabel') }
{/if}

Expected behavior
I was expecting that it would render my localized message.

Stacktraces

Information about your project:

• Your browser and the version: Google Chrome Version 80.0.3987.122 (Official Build) (64-bit)
• Your operating system: MacOS Version 10.14.6 (18G3020)
• svelte-i18n version 3.0.1
• Webpack (^4.30.0)
• svelte-loader (^2.13.3)

The only other unique thing with this project that is different from other svelte projects I've used this library with successfully, is that I am attempting to wire in redux using svelte-redux-connect. I have looked through it's source code and nothing jumped out at me that seems as if it would get in the way of this, but, maybe that has something to with it that I was unable to see. Not real sure.

This is also the first project on which I have tried to use Webpack as well, though again, I'm not sure how that would make things any different.

Additional context
Unfortunately I cannot share this repo, as it is a private repo. If necessary, I could try to put together a separate project to reproduce the issue. What I'm doing is fairly straight forward I think, but, I can't say for sure. I've tried to add as much detail as possible to try to help narrow this down, but I'm pretty baffled. It seems like $isLoading gets updated to true because it attempts to render my components, but then I see the error above in my browser console, as if the locale file didn't actually load.

This seems related to #51, as it appears to be a very similar browser console error.

Any help would be greatly appreciated, thank you.

any import leads to this console message:

Uncaught ReferenceError: o is not defined

import { locale, dictionary } from 'svelte-i18n';

It would be great if we could use nesting on the json translation files. Like this:

{
    "nesting1": "1 $_(nesting2)",
    "nesting2": "2 $t(nesting3)",
    "nesting3": "3",
}

Hello. What would be the best way to both structure locales files in sapper application and to both request data and load locales in preload function? Currently I am storing separate locales files for each page and then preload the data like that. But there seems to be a lot of cases where data does not load. Any suggestions?

<script context="module"> 
  import { register, waitLocale } from 'svelte-i18n'  
  register('en', () => import('./_locales/en.json'))  
  register('ru', () => import('./_locales/ru.json'))  
   export async function preload({ params, query }, session) {
      const res = await this.fetch('tournaments/${params.tournamentId}.json');
      const data = await res.json();
        if (res.status === 200) {
            await waitLocale()
            return { 
              tournament: data.tournament,
              id: params.tournamentId
            }
        } else {
          this.error(res.status, data.message);
        } 
    }
 }

After installing and configuring svelte-i8n, I get this error when building/running my app:

[!] Error: Unexpected token (Note that you need rollup-plugin-json to import JSON files)

I think if you added 'rollup-plugin-json', to the svelte-i8n dependency list, it would be better than if everyone having to add it to their projects.

Sometimes just formatting a date to a string is not enough and one needs to manipulate things further, and the lower-level formatToParts can help with this.

This is particularly useful when creating stores the derive from the format one.

Error: UMD and IIFE output formats are not supported for code-splitting builds.

get this error.

Is your feature request related to a problem? Please describe.
Thanks for the excellent work (and example). Because I'm working on a site that includes Arabic (right-to-left) I figured out how I'd support that using svelte-i18n.

Describe the solution you'd like
I updated the example to include RTL Arabic. The source can be found here: https://github.com/dhrp/svelte-i18n/tree/master/example

Describe alternatives you've considered
One thing I considered, is adding 'rtl' more deeply, but for now I've just the directionality css class as a internationalization string instead of first making it a variable.

<nav class={$_('direction')}>

Using a different script influences in which language you write the other languages.. I'd suggest writing them in the native language.

How important is this feature to you?
I think it's important to support RTL, but it appears support is a matter of updating the example, not core.

Additional context
I can easily make this a PR.

In some languages, we have more complicated rules for plural.
Like in Russian https://gist.github.com/tomfun/830fa6d8030d16007bbab50a5b21ef97

Really good list of rules: https://developer.mozilla.org/en-US/docs/Mozilla/Localization/Localization_and_Plurals

I'm currently building a small app using the basic rollup svelte template, and svelte-i18n, and rollup is currently throwing the following warning when I build with locale or dictionary imported.

rollup v1.23.1
bundles src/main.js → public\bundle.js...
LiveReload enabled
(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en/#error-this-is-undefined       
node_modules\intl-messageformat\lib\core.js
4: See the accompanying LICENSE file for terms.
5: */
6: var __extends = (this && this.__extends) || (function () {
                    ^
7:     var extendStatics = function (d, b) {
8:         extendStatics = Object.setPrototypeOf ||
...and 3 other occurrences
node_modules\intl-messageformat\lib\compiler.js
4: See the accompanying LICENSE file for terms.
5: */
6: var __extends = (this && this.__extends) || (function () {
                    ^
7:     var extendStatics = function (d, b) {
8:         extendStatics = Object.setPrototypeOf ||
...and 1 other occurrence

My package.json

{
  "name": "svelte-app",
  "version": "1.0.0",
  "devDependencies": {
    "npm-run-all": "^4.1.5",
    "rollup": "^1.23.0",
    "rollup-plugin-commonjs": "^10.0.0",
    "rollup-plugin-livereload": "^1.0.0",
    "rollup-plugin-node-resolve": "^5.2.0",
    "rollup-plugin-svelte": "^5.1.0",
    "rollup-plugin-terser": "^5.1.2",
    "svelte": "^3.12.0"
  },
  "dependencies": {
    "date-fns": "^2.4.1",
    "lodash": "^4.17.15",
    "sirv-cli": "^0.4.4",
    "svelte-i18n": "^1.1.2-beta",
    "svelte-routing": "^1.4.0"
  },
  "scripts": {
    "build": "rollup -c",
    "autobuild": "rollup -c -w",
    "dev": "run-p start:dev autobuild",
    "start": "sirv public --single",
    "start:dev": "sirv public --single --dev"
  }
}

Anyone have any insights here?

Describe the bug
From a svelte application I have a runtime error TypeError: t is undefined. This one is probably related to the issue spotted by rollup.

Logs

(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en/#error-this-is-undefined
node_modules/intl-messageformat/lib/core.js
4: See the accompanying LICENSE file for terms.
5: */
6: var __assign = (this && this.__assign) || function () {
                   ^
7:     __assign = Object.assign || function(t) {
8:         for (var s, i = 1, n = arguments.length; i < n; i++) {
...and 1 other occurrence
node_modules/intl-messageformat/lib/formatters.js
1: var __extends = (this && this.__extends) || (function () {
                    ^
2:     var extendStatics = function (d, b) {
3:         extendStatics = Object.setPrototypeOf ||
...and 3 other occurrences
node_modules/intl-format-cache/lib/index.js
4: See the accompanying LICENSE file for terms.
5: */
6: var __spreadArrays = (this && this.__spreadArrays) || function () {
                         ^
7:     for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
8:     for (var r = Array(s), k = 0, i = 0; i < il; i++)
...and 1 other occurrence

...and 3 other files
created public/build/bundle.js in 1.7s

To Reproduce
Maybe it is related to my misunderstanding of how to init svelte-i18n on Svelte app.
Here an extract of my app.

i18n.js

import { register, init, getLocaleFromNavigator } from 'svelte-i18n'          
                                                                             
export function loadi18n() {                             
  register('en', () => fetch('/i18n/en.json').then(r => r.json()))
  register('fr', () => fetch('/i18n/fr.json').then(r => r.json()))                                             
                                                                                
  init({                                                                        
    fallbackLocale: 'en',                                                                                              
    initialLocale: getLocaleFromNavigator()                                                                            
  })                                                                                                                   
} 

App.svelte

<script>
  import { loadi18n } from './i18n.js'
  loadi18n()
 import { _, isLoading } from 'svelte-i18n'
</script>

{#if $isLoading}
  Please wait...
{:else}
  {$_('summary')}
{/if} 

Expected behavior
rollup build svelte app without any warnings and svelte runtime works without any errors.

Stacktraces

Information about your project:

• Your browser and the version: Firefox 74.0

• Your operating system: Fedora 31

• svelte-i18n 3.0.3

• Rollup

Env
"svelte-i18n": "^2.1.1"
"sapper": "^0.27.0",
"svelte": "^3.0.0"

Describe the bug
Adding the following shows trail of debug logs within the console.

//i18n.js
import { register, init } from 'svelte-i18n';

Logs

When accessing localhost in a browser after adding the following to _layout.svelte

<script context="module">
  import { waitLocale } from 'svelte-i18n';

  export async function preload() {
    // awaits for the loading of the 'en-US' and 'en' dictionaries
    return waitLocale();
  }
</script>

I get the following error within the console and the page no longer loads.

Is there a way to dinamically change between dictionaries?

Describe the solution you'd like
an exported function from the library that allows to change between dictionaries programmatically

Describe alternatives you've considered
I haven't found a workaround yet

How important is this feature to you?
Will be a huge improvement to the library, it seems that it's the only thing lacking of the base features of i18n

Hi,
I have an issue when trying to build a really simple example - just two files and "svelte-i18n": "^1.0.7":

Error: 'locale' is not exported by node_modules/svelte-i18n/dist/i18n.umd.js

main.js

import './i18n.js';
import App from './App.svelte';

const app = new App({
	target: document.body,
	props: {
		name: 'world'
	}
});
export default app;

i18n.js

import { locale, dictionary } from 'svelte-i18n'
locale.subscribe(()=>{
    console.log('locale changed');
});

rollup v1.27.0
bundles src/main.js → public/bundle.js...
[!] (plugin svelte) ValidationError: $ is an illegal variable name
src/components/Topnav.svelte
 6:         </li>
 7:         <li>
 8:             <a href="/signup" use:active use:link>{$('Signup')}</a>
                                                       ^
 9:         </li>
10:     {:else}

Not sure what I'm doing wrong.

<nav id="topnav">
    <ul>
    {#if !$token}
        <li>
            <a href="/login" use:active use:link>{$_('Login')}</a>
        </li>
        <li>
            <a href="/signup" use:active use:link>{$('Signup')}</a>
        </li>
    {:else}
        <li>
            <a href="/" on:click|once={logout}>{$('Logout')}</a>
        </li>
    {/if}
    </ul>
</nav>
<script>
    import { _ } from 'svelte-i18n'
    import { link, push } from 'svelte-spa-router'
    import active from 'svelte-spa-router/active'
    import { token } from '../stores/token';

    function logout(e) {
        e.preventDefault();
        token.set(null);
        push('/');
    }
</script>

<style>
#topnav {

    & ul {
        display: flex;
        justify-content: flex-end;
        list-style-type: none;

        & li {
            margin-left: 1rem;

            & a {
                padding: .5rem 1rem;
            }
        }
    }
}
</style>

Typescript compiler doesn't like svelte-i18n in strict mode

Is it possible to format numbers with B for billion, M for million, K for thousands?

For example, 3200000 shoud be 3,2M

In the Safari browser (Version 12.1.1) using ICU message format for interpolation leads to an error:

Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating '(_a = Intl.PluralRules).bind')

The global object Intl is empty. And binding of Intl.PluralRules cause to the error.

devDependencies

"sapper": "^0.27.9",
"svelte": "^3.12.1",
"svelte-i18n": "^1.1.2-beta",

When building my Svelte app, I'm getting these errors from svelte-i8n (and it's dependencies.) One thing I noticed is that the intel-messageformat project is archived. Perhaps, it's obsolete and needs to be replaced?

yarn run v1.21.1
warning package.json: No license field
$ rollup -c

src/main.js → public/bundle.js...
(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en/#error-this-is-undefined
node_modules/intl-messageformat/lib/core.js
4: See the accompanying LICENSE file for terms.
5: */
6: var __assign = (this && this.__assign) || function () {
                   ^
7:     __assign = Object.assign || function(t) {
8:         for (var s, i = 1, n = arguments.length; i < n; i++) {
...and 1 other occurrence
node_modules/intl-messageformat/lib/formatters.js
1: var __extends = (this && this.__extends) || (function () {
                    ^
2:     var extendStatics = function (d, b) {
3:         extendStatics = Object.setPrototypeOf ||
...and 3 other occurrences
node_modules/intl-format-cache/lib/index.js
4: See the accompanying LICENSE file for terms.
5: */
6: var __spreadArrays = (this && this.__spreadArrays) || function () {
                         ^
7:     for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
8:     for (var r = Array(s), k = 0, i = 0; i < il; i++)
...and 1 other occurrence

...and 3 other files

Hi,

Thanks for your work :)

I created a directory called "i18n" (original) in which, I have an index.js and a fr-FR.js

index.js

import {dictionary, locale} from 'svelte-i18n';
import frFr from './fr-FR';

dictionary.set({
  'fr-FR': frFr
});

fr-FR.js

export default {
  APP: {
    NAME: 'Camembert',
  },
};

When I want to use it, I have this message in the console
svelteI18n is not defined at main.js

Here is my main.js

import App from './App.svelte';
import './i18n';

const app = new App({
  target: document.body,
});

export default app;

My IDE (Webstorm) and the compiler say that svelte-i18n is a unresolved module ... but I installed it via npm and it's in my package.json
"svelte-i18n": "^1.0.4"

Can you help me with that ?

When attempting to use the CLI, I get -bash: svelte-i18n: command not found. Sorry — I feel like I'm missing something really basic here. 😅

Information about your project:

• Your operating system: MacOS 10.14.6

• svelte-i18n version: 3.0.3

• Whether your project uses Webpack or Rollup: Rollup

First of all, thanks for the great library. It worked like a charm for me.

That said, i've noticed that the app is bigger than I expected it to be, around 12KB after gzip. Part of the problem is that svelte has spoiled me when it comes to the size of the bundles, if this was an angular or ember library I wouldn't bat an eye at the size.

However, it couldn't avoid notice that my 17kb gzipped app grew to 29kb app after adding svelte-i18n and ~20 translations, which is a 70% increase.

Just listing some low hanging fruit to make the library smaller, checking if you think it's worth to pursue them. I might help actually.

• Right now, the format store's value is a function that has time, date, number, capital, title, upper and lower properties attached. Because of that, rollup cannot treeshake unused features. If functions for formatting dates, times and numbers were explicit exported, rollup could just remove the unused stuff (for instance, I only format messages and times, not dates nor numbers).
  Arguably, capital, title, upper and lower may not even belong in this library, but I can see how they are convenient.

• Maybe getClientLocale could be something users also explicitly import if they care:

import { getClientLocale, init } from 'svelte-i18n';
 init({
  fallbackLocale: "en",
  initialLocale: getClientLocale({ navigator: true }),
  ...
})

• Lastly, and this is the big one really, use intl-messageformat to compile translations during the build step. That library accounts for 4/5ths of the size of svelte-i18n. If we could compile ahead of time the translations, we could not ship the library at all. We'd have to assess if the compiled JS functions, once uglified, would be bigger than the equivalent strings using the ICU message format. I reckon that they would be slightly bigger, but probably still smaller than shipping the library unless you have thousands of translations the use plural/select or interpolations. And since we already have the functions we wouldn't have to use memoize to cache the slow parsing process.

Are you interested in investigating any of the above? The last one fits very well with svelte's compiler philosophy.

For a project, I need to get the current locale selected by the plugin (chosen between the browser local or the fallback locale), to send it to my server. There is a way to do that?

I've thinked about a getCurrentLocale() methode that send maybe the code of the locale, or getCurrentLocaleJson() that return the name of the JSON File.

This feature is not very important, if there is no way to do that, I can find a way to do it, but if there is a method juste for that it's can be cool!

Thanks for this very usefull lib!

Describe the bug
I started on a web page that should use translations. It works fine on my mac and chrome. Using the cell phone (android) chrome it does not show deep keys. so a.b will not work, but c does.

Logs
I dont know how to get mobile logs.

To Reproduce
Go to https://vkb.hilsendeger.dev/ on your cell phone. It is under development.

Expected behavior
deep keys work fine on mobile devices.

Stacktraces
If you have a stack trace to include, we recommend putting inside a <details> block for the sake of the thread's readability:

Information about your project:

• Your browser and the version: chrome

• Your operating system: android

• svelte-i18n version 3.0.3

• Whether your project uses Webpack or Rollup: webpack

Describe the bug
When I enable cross page transitions using crossfade transition the

<script>
let title = 'global.nav.article';
</script>

{$_(title)}

returns the text global.nav.article and not the expected translation value.
If I take the same object and place it on a page where there is no crossfade page transition then the correct value is displayed.

The prior page works but the page where we are transitioning to does not show the correct value on selecting back the prior page displays values correctly.

Logs
No errors are displayed.

To Reproduce
Will create a demo repo soon.

Expected behavior
I expect the translated value to appear not the object path - global.nav.article

Stacktraces
n/a

Information about your project:

• Your browser and the version:
  chrome 83/84.0.4119.0

• Your operating system:
  Win10

• svelte-i18n version (Please check you can reproduce the issue with the latest release!)
  "svelte-i18n": "^2.3.1" - from latest npm I will try the latest from this repo.

• Whether your project uses Webpack or Rollup
  Rollup

Additional context
n/a

Describe the bug
When I try open _error route with some translate in it or in _layout, library throw error

Logs

To Reproduce

1. Clone i18n example repo
2. Add some translate in _error OR _layout ({$_('title.index', { default: 'Sapper project template!' })}, for example)
3. Open dont exist page (http://localhost:3000/ds)

Information about your project:

• Browser: Chrome 82.0.4067.0

• OS: Windows 10

• svelte-i18n version: latest

• Bundler: Rollup

Currently, I use my implementation but very close to your library.
The main problem with this approach - we still have no normal tools to:

• 1. Get all keys from js/html files.
• 2. Check missing keys.
• 3. Check duplicate.
• 4. Probably integration with gettext format.

Currently, I use, my small in-house scripts base on "i18n-extract" and it has many problems like:

1. i18n-extract can parse only JS it's why I parse dev bundle and lost key positions.
2. for use i18n-extract from nodejs and load translation from a project I converted this files to .mjs (nodejs can't in es6 import for js extension)

I think should be a better way, more integrated with svelte and probably with the rollup.

Describe the bug
Trying to run the CLI for extracting, always returns Unexpected token u in JSON at position 0

To Reproduce
Simply run: yarn run svelte-i18n extract src/**/*.svelte

Expected behavior
Create the expected json file

Stacktraces

✗ yarn run svelte-i18n extract src/**/*.svelte 
yarn run v1.17.0
$ /Users/josesachs/sapper-proj/node_modules/.bin/svelte-i18n extract src/components/Checkbox.svelte src/components/HotelSlides.svelte src/components/InputBox.svelte src/components/blocks/About.svelte src/components/blocks/CityHero.svelte src/components/blocks/FadeShow.svelte src/components/blocks/HotelSlides.svelte src/components/blocks/Hotels.svelte src/components/blocks/PromoSlide.svelte src/components/blocks/Promos.svelte src/components/blocks/ReservationDetail.svelte src/components/blocks/ResultInfo.svelte src/components/blocks/RoomList.svelte src/components/blocks/RoomListMobile.svelte src/components/blocks/SearchBox.svelte src/components/blocks/ServiceBox.svelte src/components/blocks/Services.svelte src/components/blocks/SlideShow.svelte src/components/blocks/StepsBox.svelte src/components/cards/PromoHotel.svelte src/components/cards/RoomResult.svelte src/components/dropdowns/Calendar.svelte src/components/dropdowns/CalendarDropdown.svelte src/components/dropdowns/CurrencyDropdown.svelte src/components/dropdowns/Dropdown.svelte src/components/dropdowns/DropdownLabeless.svelte src/components/dropdowns/Month.svelte src/components/dropdowns/RoomsDropdown.svelte src/components/dropdowns/SelectDropdown.svelte src/components/emails/reservation.svelte src/components/layout/Contact.svelte src/components/layout/FloatingIcons.svelte src/components/layout/Footer.svelte src/components/layout/Header.svelte src/components/layout/Menu.svelte src/components/layout/Newsletter.svelte src/components/layout/OuterHeader.svelte src/components/layout/ProgressBar.svelte src/node_modules/@sapper/internal/App.svelte src/node_modules/@sapper/internal/error.svelte src/node_modules/@sapper/internal/layout.svelte src/routes/[city]/[hotel]/index.svelte src/routes/[city]/[hotel]/room/[slug].svelte src/routes/[city]/[hotel]/search.svelte src/routes/[city]/index.svelte src/routes/_error.svelte src/routes/_layout.svelte src/routes/contacto.svelte src/routes/eventos.svelte src/routes/index.svelte src/routes/promos/[slug].svelte src/routes/reservation/booknow.svelte src/routes/reservation/debug.svelte src/routes/reservation/email.svelte src/routes/reservation/review.svelte
SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at /Users/josesachs/sapper-proj/node_modules/svelte-i18n/dist/cli.js:17:3905
    at async Command.<anonymous> (/Users/josesachs/sapper-proj/node_modules/svelte-i18n/dist/cli.js:17:3881)

Information about your project:

• Your browser and the version: Chrome 79.0.3945

• Your operating system: macOS Mojave 10.14.5

• svelte-i18n version 2.3.0

• Using Rollup

I'd rather not do import { _ } from 'svelte-i18n in every file. Is there a way to globally expose this to my app such that all the component files have it?

I'm using rollupjs

i18n.mjs:1 Uncaught Error: [svelte-i18n] Locale "it-IT" not found.
    at Object.ct.set (i18n.mjs:1)
    at locale.js:17
    at main.js:12

I have english (en) and german (de) defined as my locales, but if I change my language in Chrome to Italian (it-IT). It fails with the above error.

Here is my config:

import { locale, dictionary, getClientLocale } from 'svelte-i18n'
import { de, fr, en } from './i18n'

// Define a locale dictionary
dictionary.set({
  de,
  fr,
  en,
})

// This is a store, so we can subscribe to its changes
locale.subscribe(() => {
  console.log('locale change')
})

// svelte-i18n exports a method to help getting the current client locale
locale.set(
  getClientLocale({
    // the fallback locale, if didn't find any
    fallback: 'en',
    // set to 'true' to check the 'window.navigator.language'
    navigator: true,
    // // set the key name to look for a locale on 'window.location.search'
    // // 'example.com?locale=en-US'
    // search: 'lang'
  }),
)

// Set the current locale to en-US
// locale.set('en')

I just get a blank page (demo: https://puump.com)

I see the example app is implemented with Sapper. Are there any up-to-date examples for using this library with Svelte. e.g. How about showing an example integrating with https://github.com/sveltejs/template ?

Asking as when I tried to integrate with an existing Svelte app, I had no success.

I'm getting this when I build:

[!] Error: UMD and IIFE output formats are not supported for code-splitting builds.
Error: UMD and IIFE output formats are not supported for code-splitting builds.

yarn run v1.21.1
warning package.json: No license field
$ run-s build start
warning package.json: No license field
$ rollup -c

src/main.js → public/build/bundle.js...
(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en/#error-this-is-undefined
node_modules/intl-messageformat/lib/core.js
4: See the accompanying LICENSE file for terms.
5: */
6: var __assign = (this && this.__assign) || function () {
                   ^
7:     __assign = Object.assign || function(t) {
8:         for (var s, i = 1, n = arguments.length; i < n; i++) {
...and 1 other occurrence
node_modules/intl-messageformat/lib/formatters.js
1: var __extends = (this && this.__extends) || (function () {
                    ^
2:     var extendStatics = function (d, b) {
3:         extendStatics = Object.setPrototypeOf ||
...and 3 other occurrences
node_modules/intl-format-cache/lib/index.js
4: See the accompanying LICENSE file for terms.
5: */
6: var __spreadArrays = (this && this.__spreadArrays) || function () {
                         ^
7:     for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
8:     for (var r = Array(s), k = 0, i = 0; i < il; i++)
...and 1 other occurrence

...and 3 other files```

Uncaught Error: [svelte-i18n] Locale "en-US" not found. at Object.g.set (i18n.mjs:1) at locale.js:4 at main.js:12