open-index/open-npm huggingface dataset:
npm package: @fluent/dom
Description: Fluent bindings for DOM
Author: Mozilla
Latest version: 0.10.2

# @fluent/dom ![](https://github.com/projectfluent/fluent.js/workflows/test/badge.svg)

`@fluent/dom` provides the DOM bindings for [Project Fluent][].

[project fluent]: https://projectfluent.org

## Installation

`@fluent/dom` can be used both on the client-side and the server-side. You
can install it from the npm registry or use it as a standalone script (as the
`FluentDOM` global).

    npm install @fluent/dom

## How to use

The `DOMLocalization` constructor provides the core functionality of
full-fallback ready message formatting. It uses a lazy-resolved
`FluentBundle` objects from the `@fluent/bundle` package to format messages.

On top of that, `DOMLocalization` can localize any DOMFragment by
identifying localizable elements with `data-l10n-id` and translating them.

```javascript
import { DOMLocalization } from "@fluent/dom";

const l10n = new DOMLocalization(
  ["/browser/main.ftl", "/toolkit/menu.ftl"],
  generateBundles
);

l10n.connectRoot(document.documentElement);

l10n.translateRoots();

const h1 = document.querySelector("h1");

// Sets `data-l10n-id` and `data-l10n-args` which triggers
// the `MutationObserver` from `DOMLocalization` and translates the
// element.
l10n.setAttributes(h1, "welcome", { user: "Anna" });
```

For imperative uses straight from the JS code, there's also a `Localization`
class that provides just the API needed to format messages in the running code.

```javascript
import { Localization } from "@fluent/dom";

function* generateBundles() {
  // Some lazy logic for yielding FluentBundles.
  yield* [bundle1, bundle2];
}

const l10n = new Localization(
  document,
  ["/browser/main.ftl", "/toolkit/menu.ftl"],
  generateBundles
);

async function main() {
  const msg = await l10n.formatValue("welcome", { name: "Anna" });
  // → 'Welcome, Anna!'
}
```
npm package: @fluent/langneg
Description: Language Negotiation API for Fluent
Author: Mozilla
Latest version: 0.7.0

# @fluent/langneg ![](https://github.com/projectfluent/fluent.js/workflows/test/badge.svg)

`@fluent/langneg` provides an API for negotiating languages. It's part of
[Project Fluent][]. Its main function is to provide functionality around the
[Intl.Locale][] API with a focus on language negotiation, matching and
selection.

[project fluent]: https://projectfluent.org
[intl.locale]: https://github.com/tc39/proposal-intl-locale

## Installation

`@fluent/langneg` can be used both on the client-side and the server-side.
You can install it from the npm registry or use it as a standalone script.

    npm install @fluent/langneg

## How to use

```javascript
import { negotiateLanguages } from "@fluent/langneg";

const supportedLocales = negotiateLanguages(
  navigator.languages, // requested locales
  ["de", "en-US", "pl"], // available locales
  { defaultLocale: "en-US" }
);
```

The API reference is available at
https://projectfluent.org/fluent.js/langneg.

## Strategies

The API supports three negotiation strategies:

### filtering (default)

In this strategy the algorithm will try to match as many available locales
as possible for each of the requested locale.

Example:

requested: ['de-DE', 'fr-FR']
available: ['it', 'de', 'en-US', 'fr-CA', 'de-DE', 'fr', 'de-AU']

supported: ['de-DE', 'de', 'fr', 'fr-CA']

### matching

In this strategy the algorithm will look for the best matching available
locale for each requested locale.

Example:

requested: ['de-DE', 'fr-FR']
available: ['it', 'de', 'en-US', 'fr-CA', 'de-DE', 'fr', 'de-AU']

supported: ['de-DE', 'fr']

### lookup

In this strategy the algorithm will try to find the single best locale
for the requested locale list among the available locales.

Example:

requested: ['de-DE', 'fr-FR']
available: ['it', 'de', 'en-US', 'fr-CA', 'de-DE', 'fr', 'de-AU']

supported: ['de-DE']

### API use:

```javascript
let supported = negotiateLanguages(requested, available, {
  strategy: "matching",
});
```

## Likely subtags

Fluent Language Negotiation module carries its own minimal list of likely
subtags data, which is useful in finding most likely available locales
in case the requested locale is too generic.

An example of that scenario is when the user requests `en` locale, and
the application supports `en-GB` and `en-US`.
npm package: @fluent/react
Description: Fluent bindings for React
Author: Mozilla
Latest version: 0.15.2

# @fluent/react ![](https://github.com/projectfluent/fluent.js/workflows/test/badge.svg)

`@fluent/react` provides the React bindings for [Project Fluent][].

[project fluent]: https://projectfluent.org

## Installation

`@fluent/react` can be used both on the client-side and the server-side. You
can install it from the npm registry or use it as a standalone script (as the
`FluentReact` global).

    npm install @fluent/react

# Integrating with React apps

`@fluent/react` takes advantage of React's Components system and the virtual
DOM. Translations are exposed to components via the _provider_ pattern.

There are many approaches to fetching and storing translations. To allow
maximum flexibility, `@fluent/react` expects the developer to write a little
bit of a setup code related to language negotiation and translation fetching.
It makes `@fluent/react` unopinionated and suitable for many different
scenarios. You will likely also need to install a few other packages:
`@fluent/bundle`, `@fluent/langneg` and `intl-pluralrules`.

Consult the [wiki][] for documentation on how to set up and use
`@fluent/react`.

The API reference is available at https://projectfluent.org/fluent.js/react.

[wiki]: https://github.com/projectfluent/fluent.js/wiki/React-Bindings
npm package: @fluent/sequence
Description: Manage ordered sequences of FluentBundles
Author: Mozilla
Latest version: 0.8.0

# @fluent/sequence ![](https://github.com/projectfluent/fluent.js/workflows/test/badge.svg)

`@fluent/sequence` provides mapping functions from string identifiers to
`FluentBundle` instances taken from synchronous or asynchronous sequences.
It's part of [Project Fluent][].

[project fluent]: https://projectfluent.org

## Installation

`@fluent/sequence` can be used both on the client-side and the server-side.
You can install it from the npm registry or use it as a standalone script (as
the `FluentSequence` global).

    npm install @fluent/sequence

## How to use

An ordered iterable of `FluentBundle` instances can represent the current
negotiated fallback chain of languages. This iterable can be used to find the
best existing translation for a given identifier.

`@fluent/sequence` provides two mapping functions: `mapBundleSync`, and
`mapBundleAsync`. They can be used to find the first `FluentBundle` in the
given iterable which contains the translation with the given identifier. If
the iterable is ordered according to the result of a language negotiation the
returned `FluentBundle` contains the best available translation.

A simple function which formats translations based on the identifier might
be implemented as follows:

```js
import { mapBundleSync } from "@fluent/sequence";

function formatString(id, args) {
  // contexts is a negotiated iterable of FluentBundle instances.
  let ctx = mapBundleSync(contexts, id);

  if (ctx === null) {
    return id;
  }

  let msg = ctx.getMessage(id);
  return ctx.format(msg, args);
}
```

When passing a synchronous iterator to `mapBundleSync`, wrap it in
`CachedSyncIterable` from the [`cached-iterable`][] package. When passing an
asynchronous iterator to `mapBundleAsync`, wrap it in `CachedAsyncIterable`.
This allows multiple calls to `mapContext*` without advancing and eventually
depleting the iterator.

The API reference is available at
https://projectfluent.org/fluent.js/sequence.

[`cached-iterable`]: https://www.npmjs.com/package/cached-iterable
npm package: @fluent/web
Description: Drop-in localization framework for HTML documents
Author: Mozilla
Latest version: 0.2.1

# @fluent/web

`@fluent/web` is a runtime polyfill that binds `Fluent` and `FluentDOM` into
a vanilla Web platform (HTML, DOM, JS).

## Installation

`@fluent/web` provides a glue code that is executed at runtime to construct
`DOMLocalization`, bind it to `document.l10n`, perform initial document
translation and set the event listeners and MutationObserver.

The result `fluent-web.js` file should be included in the HTML file
and any code executing after it will have access to the FluentWeb API.


## Quick start

Clone and run the
[projectfluent/fluent-web](https://github.com/projectfluent/fluent-web)
repository to see the examples:

```sh
git clone https://github.com/projectfluent/fluent-web
cd fluent-web
npm install
npm start
open http://127.0.0.1:8080/examples/simple.html
```


## How to use

The primary access point is the `document.l10n` object of class
`DOMLocalization`. It is already constructed based on the resources
linked from the document and localized into languages negotiated based
on the available languages from the `<meta>` tag and languages
requested via `navigator.languages`.

```html
<html>
  <head>
    <meta name="defaultLanguage" content="en-US">
    <meta name="availableLanguages" content="en-US, fr">
    <link rel="localization" href="locales/{locale}/main.ftl">
    <link rel="localization" href="locales/{locale}/head.ftl">
    <script defer src="./src/fluent-web.js"></script>
  </head>
  <body>
    <h1 data-l10n-id="hello-world"/>
  </body>
</html>
```

```javascript

function showMessage() {
  let msg = await document.l10n.formatValue('confirm-msg')
  alert(msg);
}

let h1 = document.querySelector('h1');
document.l10n.setAttributes(h1, 'welcome', { user: 'Anna' });
```

## Learn more

Find out more about Project Fluent at [projectfluent.org][], including
documentation of the Fluent file format ([FTL][]), links to other packages and
implementations, and information about how to get involved.




[projectfluent.org]: http://projectfluent.org
[FTL]: http://projectfluent.org/fluent/guide/