[Question] A way to initialize svelte-i18n for Storybook

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!

[jerriclynsjohn]

Anyone here have a working repo for this combination.

[smoglica]

@9oelM you’re right, using addDecorator is the correct way. I suggest to use it globally in order to initialize svelte-i18n for all stories.

Creation of global decorators can be done in .storybook/preview.js. The tricky part here is that you need to create a wrapper component which will initialize i18n for your story component.

Create your wrapper component for example in .storybook/Wrapper.svelte

// Wrapper.svelte
<script>
import { addMessages, init, getLocaleFromNavigator } from 'svelte-i18n';
import { addMessages } from 'svelte-i18n';

import en from './en.json';
import enUS from './en-US.json';

addMessages('en', en);
addMessages('en-US', enUS);

init({
  fallbackLocale: 'en',
  initialLocale: getLocaleFromNavigator(),
});
</script>

<slot /> // Here where your story component's content will be projected 

Next step it’s telling to Storybook to use the global decorator.

// preview.js
import { addDecorator } from '@storybook/svelte';
import Wrapper from './Wrapper.svelte;

addDecorator(storyFn => {
  const { Component, props, on, WrapperData } = storyFn();

  return {
    Component,
    props,
    on,
    Wrapper,
    WrapperData,
  };
});