Use fbt in component libraries?

[alexandernanberg]

I'd really like to use fbt in component libraries that bundles their own translations, but from what I can tell this isn't possible since you need to run init etc etc

The API I want to expose from the component lib looks something like this

import { DatePicker, LocaleProvider } from "my-component-lib";

function App() {
  const locale = 'sv-SE' 
  return (
    <LocaleProvider locale={locale}>
      <DatePicker />
    </LocaleProvider>
  );
}

the LocaleProvider passes down the locale thru context and the DatePicker picks it up. The date picker then formats all strings/dates with the provided locale (the component contains all the necessary translations for the locale)

Has anyone built something similar to this? Or would it even be possible?

[mrtnzlml]

Hi @alexandernanberg! I just started working on something similar: https://github.com/adeira/sx-design

I also wanted to have FBT behind the scenes because it's so good. And you are right it's necessary to call init (I do it here). That's not an issue if your main application is not using FBT already. It's getting a bit more tricky when you already have FBT though. Here is my attempt to improve this situation in FBT: #208 (d05d44f)

Basically, this change will allow you to take the existing translations and merge them together with the translations from your component library (since FBT cannot live inside another FBT). Unfortunately, it's not been released yet and it's available only on master. In a meantime, you can merge both of these translations together manually.

[alexandernanberg]

I might give that a shot once it's released then. Thinking if there should be an option to scope fbt to a single module/package. Maybe something like

import {createFbt} from 'fbt'

const fbt = createFbt(translations)

function App() {
  return <fbt desc="Welcome message">Hello world</fbt>
}

I guess the core issue is that fbt uses a singleton for translations, but with the above it would be simpler for libs to use fbt

[jrwats]

Hey all, just published 0.16.6 https://www.npmjs.com/package/fbt.

@alexandernanberg, let me know if that is sufficient or not. And don't be afraid to issue a PR!

[mrtnzlml]

Thanks @jrwats! I just implemented the merging in adeira/universe#2337 and it seems to be working well (see src/sx-design/src/SxDesignProvider.js if you are interested). cc @alexandernanberg