@llelievr.dev/solid-fluent

@llelievr.dev/solid-fluent provides the Solidjs bindings for Project Fluent.

This code is hightly inspired by @fluent/react as a matter of fact this usage is almost the same.

Quick start

Install it:

1npm i @llelievr.dev/solid-fluent @fluent/bundle
2# or
3yarn add @llelievr.dev/solid-fluent @fluent/bundle
4# or
5pnpm add @llelievr.dev/solid-fluent @fluent/bundle

Use it:

1import { createSignal, ParentComponent, type Component } from 'solid-js'
2import { FluentProvider, Localized, useFluent } from '@llelievr.dev/solid-fluent'
3import { FluentBundle, FluentResource } from '@fluent/bundle'
4
5const DirectString: Component = () => {
6  // you can access fluent translations from the useFluent hook
7  const fluent = useFluent()
8
9  return <>{fluent.getString('welcome', { name: 'Test' })()}</>
10}
11
12const Bold: ParentComponent = props => (
13  <div style={{ background: 'red', display: 'inline-block' }}>{props.children}</div>
14)
15
16const App: Component = () => {
17  // Load your resources, using @fluent/bundle
18  let resource = new FluentResource(`
19-brand-name = Foo 3000
20welcome = Welcome, {$name}, to {-brand-name}!
21elements =
22    .placeholder = I am a placehoder
23    .alt = I am a alt
24markups = <b>I am bold</b> WOW
25  `)
26
27  let resourceFR = new FluentResource(`
28-brand-name = Foo 3000
29welcome = bienvenue {$name}, sur {-brand-name}!
30elements =
31    .placeholder = Je suis un example
32    .alt = I suis une indication
33markups = <b>je suis en gras</b> WOW
34`)
35
36  let bundle = new FluentBundle('en-US')
37  // Attach the resource to a bundle
38  bundle.addResource(resource)
39
40  let bundleFR = new FluentBundle('fr-FR')
41  bundleFR.addResource(resourceFR)
42
43  let [currentBundle, setBundle] = createSignal<FluentBundle>(bundle)
44
45  let lang = 0
46  const randomLang = () => {
47    const bundles = [bundle, bundleFR]
48    setBundle(bundles.at(lang++ % bundles.length) ?? bundle)
49  }
50
51  return (
52    /* provide the a bundle to the fluent provider */
53    <FluentProvider bundle={currentBundle()}>
54      <button onClick={() => randomLang()}>Random lang</button>
55      <DirectString></DirectString>
56      {/* use the Localized to directly replace attributes or div content with your translation keys */}
57      <Localized id="elements" vars={{ name: 'test' }} attrs={{ placeholder: true }}>
58        <input type="text" placeholder="temp" alt="super alt" />
59      </Localized>
60      <Localized id="markups" elems={{ b: <Bold></Bold> }}></Localized>
61
62      <Localized id="markups" elems={{ b: <Bold></Bold> }}>
63        <div>placeholder that will be replace by the markups content</div>
64      </Localized>
65    </FluentProvider>
66  )
67}
68
69export default App