Sapper usage about svelte-i18n HOT 8 CLOSED

My bad. Sapper client start store property must be a function. So for the above example:

sapper.start({
  target: document.querySelector('#sapper'),
  store: data => {
    // `data` is whatever was in the server-side store
    store.set(data);
    return store;
  }
});

Thanks anyway @kaisermann

from svelte-i18n.

@rveciana yes I could get svelte-i18n run in Sapper for Svelte 2.x.
The problem is that the store returned by the server must be serializable (i.e. without function). So inside the sapper middleware store hook of the server you must delete the _ function attribute that svelte-i18n adds to the store before sending it. See sveltejs/sapper#230 for more details.

Recently I had some issues (weird dependencies problems) with svelte-i18n but instead of fixing them I'm waiting for i18n support in Svelte/Sapper 3. 🤞

IMHO if you are starting a new Svelte app, you should use Svelte 3 latest beta (along with Sapper v0.26.0-alpha.3) and wait for its i18n system to avoid rewriting everything soon… 😉

from svelte-i18n.

Hi @Mattinn when I was using Svelte/Sapper (I now use Elm ❤️) I was doing something like that (simplified and translated from CoffeeScript source, hopefully without errors):

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

let store = new Store({
  locale: 'en',
  // ...
})

store = i18n(store, {dictionary: {}})
export default store

// server.js
import * as sapper from '../__sapper__/server'
import express from 'express'
import {Store} from 'svelte/store'
import defaultStore from '/store'
import {i18n} from 'svelte-i18n'

const app = express()
const defaultValues = defaultStore.get()


// subclassing Store to make its instances serializable
class ServerStore extends Store {
  get(...args) {
    let result = {...super(...args)}
    delete result._
    return result
  }
}

const sapperMiddleware = sapper.middleware({
  store(req, res) {
    const lang = req.acceptsLanguages(['en', 'fr']) || 'en'
    res.set('Content-Language', lang)
    let store = new ServerStore(defaultValues)
    store = i18n(store, {dictionary: {[lang]: {foo: "bar"}}})
    store.i18n.setLocale(lang)
    return store
  }
})


app.use(sapperMiddleware)

export default app

Hope it helps…

from svelte-i18n.

Thanks @laurentpayot this clears it up quite well !

from svelte-i18n.

I still haven't had the time to play around with sapper yet, so any help with this is welcome 😁

from svelte-i18n.

Excuse me if it's the wrong place. Did you get the svelte-i18n run in sapper?
I've tried it, but in the first render, the store is not set.
You didn't mention that the store has to be set in the server.js file too.
My example is here: https://github.com/rveciana/sapper-i18n

from svelte-i18n.

@rveciana I haven't messed around with sapper yet, just pure svelte. I will check out your example!

from svelte-i18n.

The problem is that the store returned by the server must be serializable (i.e. without function). So inside the sapper middleware store hook of the server you must delete the _ function attribute that svelte-i18n adds to the store before sending it.

Hi @laurentpayot could you provide an example of how that is done? After reading this thread and the one you linked I am quite lost

.use(
    sapper.middleware({
      store: req => {
        return new Store({
          user: req.user,
          get() {
            const res = { ...this._state };
            delete res._;
            return res;
          }
        });
      }
    })

from svelte-i18n.