https://github.com/projectfluent/fluent-web
fluent-web - simple example of a vanilla Web app using Fluent
https://github.com/projectfluent/fluent-web
Last synced: 7 months ago
JSON representation
fluent-web - simple example of a vanilla Web app using Fluent
- Host: GitHub
- URL: https://github.com/projectfluent/fluent-web
- Owner: projectfluent
- Created: 2018-07-24T14:08:51.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-08-21T22:42:35.000Z (over 6 years ago)
- Last Synced: 2025-08-08T16:41:14.124Z (9 months ago)
- Language: JavaScript
- Homepage:
- Size: 32.2 KB
- Stars: 20
- Watchers: 9
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# @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 `` tag and languages
requested via `navigator.languages`.
```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/