A JavaScript Internationalization Framework

Overview

Twitter Follow Discord Chat Facebook Group

FBT

FBT is an internationalization framework for JavaScript designed to be not just powerful and flexible, but also simple and intuitive. It helps with the following:

  • Organizing your source text for translation
  • Composing grammatically correct translatable UI
  • Eliminating verbose boilerplate for generating UI

Examples

See our demo here See our React Native demo here

Requirements

Building the fbt library

git clone [email protected]:facebook/fbt.git
cd fbt
yarn install

NOTE: if you make changes to the fbt runtime that you'd like to test in the demo-app, be sure to run this command to rebuild the JS code:

yarn build-runtime

Using fbt

See how to use the source directly with Babel and Webpack in our demo-app.

How FBT works

FBT works by transforming your <fbt> and fbt(...) constructs via Babel plugins. These plugins serve to extract strings from source and lookup translated payloads generated at build-time. FBT creates tables of all possible variations for the given fbt phrase and accesses this at runtime.

Full documentation

https://facebook.github.io/fbt

Join the fbt community

See the CONTRIBUTING file for how to help out.

Change log

See CHANGELOG.

List of npm modules published from this repo:

How to release a new npm version

# Go to the module's folder (where package.json is located)
cd fbt-runtime/
# or
# cd packages/babel-plugin-fbt/
# cd packages/babel-plugin-runtime/

# publishes to npm and push new git tag to Github
yarn publish_to_npm_latest

License

FBT is MIT licensed, as found in the LICENSE file.

Comments
  • [docs] add docs of how to integrate with an existing react app

    [docs] add docs of how to integrate with an existing react app

    it would be great to have a step by step tutorial on docs of how to setup fbt in an existing React app project

    which packages should we install? how should we modify our babel config? should we modify our webpack config? how to translate new generated hash keys?

    documentation 
    opened by sibelius 17
  • Migration Website to Docusaurus 2 Alpha

    Migration Website to Docusaurus 2 Alpha

    Hi there! The Docusaurus team is currently developing Docusaurus 2 and are almost done with an MVP that doesn't include translations and versioning features, which means there's feature parity with your website's current usage of Docusaurus.

    Docusaurus 2 brings about many improvements:

    • Client-side rendering with prerendering (site renders without JavaScript!)
    • More flexible appearance - Customizable layouts, CSS modules, etc
    • Embeddable interactive React components within markdown via MDX

    I will be your POC in helping you throughout the migration process. Let me know what you think!

    cc @yangshun @endiliey

    external_contributor 
    opened by dtaylorbrown 14
  • New arg split-by-locale-to added to translate.js

    New arg split-by-locale-to added to translate.js

    This PR adds the functionality to translate.js to split the translations into separate files based on local. The arg to do so is called 'split-by-locale-to', and I'm open for suggestions on the naming of the arg. This functionality will reduce the manual work of code splitting / lazy load translations based on locale.

    The PR was based on the discussions in this issue. However, the implementation differs a bit from the solution presented here. The reason for the difference is that translate.js outputs default to stdout, which would be messy to deal with when we want to output to several files. The solution here could have been used if a new script was created, however in my opinion it seems like a better option to add an arg instead to the existing script.

    NOTE: I'm probably overseeing something, but I was not able to run any linter or any tests for the project before the commit. Seems like there are no eslint config? And there are only test scripts and a jest config added for the demo app?

    CLA Signed Merged external_contributor 
    opened by AdamRamberg 12
  • fix IE 11 development

    fix IE 11 development

    Summary

    Rewrote the Object.defineProperty check in such a way so that IE11 will not fail as it currently still does.

    Test plan

    Run tests through IE11, ensure current test suite does not fail

    CLA Signed Merged external_contributor 
    opened by thewillhuang 10
  • added __self to fbt ignored props

    added __self to fbt ignored props

    Summary

    Recently, a bugfix went out for babel-plugin-transform-react-jsx-self that moves adding the __self JSX attribute before the arrow function transform. This has the side effect of adding the __self attribute before the fbt transform as well. This PR marks __self as a passed through but purposefully ignored attribute so that this change does not cause fbt to throw because of an unknown attribute

    Test plan

    I wrote a test to verify that the attribute is ignored. I also manually changed the code in the WWW repo and verified running the self transform in conjunction with this transform no longer throws an error.

    CLA Signed Merged external_contributor 
    opened by lunaruan 10
  • FbtTranslations: add support for modifying registered translations

    FbtTranslations: add support for modifying registered translations

    This change adds a new function getRegisteredTranslations into FbtTranslations which allows us to retrieve registered translations. For convenience, it also adds a new mergeTranslations function that allows us to append the translations.

    Use-case: I have an application with FBT and a design system with its own FBT as well. Unfortunately, registering translations overwrites any translations previously registered so the design system (or the application) cannot register their own translations without conflicting with the other part. One solution could be to get already registered translations and re-register them modified. Another solution is to merge these two translations together.

    There are many other possible solutions so I am open to suggestions how to make it better.

    CLA Signed Merged 
    opened by mrtnzlml 8
  • Throwing syntax error for yarn manifest command

    Throwing syntax error for yarn manifest command

    I just cloned the repo and started executing the commands to run the demo-app and it gives syntax error for yarn manifest command. This is the error I am getting - SyntaxError: missing ) after argument list at wrapSafe (internal/modules/cjs/loader.js:1054:16) . Please provide the fix for this.

    opened by pranjalBakshi 8
  • Next.js babel preset

    Next.js babel preset

    1) Integration with Next.js (TypeScript)

    I don't know how can I fix the next problem:

    import * as React from 'react';
    
    // @ts-ignore : 'fbt' is declared but its value is never read.
    import fbt from 'fbt'; 
    
    console.log(fbt); // ( 1 ) 
    
    // @ts-ignore
    const node = <fbt desc='desc-text'>Some text</fbt>;
    
    1. When I commented on this line I get next build error: fbt is not bound. Did you forget to require('fbt')

    Did It mean that webpack bundle remove unused import before babel transpilation?

    2) Empty childParentMappings:{}

    And node_modules/babel-plugin-fbt/bin/collectFBT.js couldn't collect any phrases from code


    DEMO Next.js App

    dependencies": {
        "fbt": "^0.9.51",
        "babel-plugin-fbt": "^0.9.12",
        "babel-plugin-fbt-runtime": "^0.9.1",
    }
    
    external_contributor 
    opened by retyui 8
  • JSX Support short bool syntax

    JSX Support short bool syntax

    For next example

    <fbt desc="" doNotExtract>Test</fbt>
    

    I get this error:

        TypeError: Cannot read property 'type' of null
    
          at node_modules/babel-plugin-fbt/FbtUtil.js:140:15
              at Array.forEach (<anonymous>)
          at getOptionsFromAttributes (node_modules/babel-plugin-fbt/FbtUtil.js:130:18)
          at PluginPass.JSXElement (node_modules/babel-plugin-fbt/index.js:153:13)
          at newFn (node_modules/@babel/traverse/lib/visitors.js:193:21)
          at NodePath._call (node_modules/@babel/traverse/lib/path/context.js:53:20)
          at NodePath.call (node_modules/@babel/traverse/lib/path/context.js:40:17)
          at NodePath.visit (node_modules/@babel/traverse/lib/path/context.js:88:12)
          at TraversalContext.visitQueue (node_modules/@babel/traverse/lib/context.js:118:16)
          at TraversalContext.visitSingle (node_modules/@babel/traverse/lib/context.js:90:19)
    
    // this example work fine
    <fbt desc="" doNotExtract={true}>Test</fbt>
    
    {
        "babel-plugin-fbt": "^0.9.14",
    }
    
    enhancement external_contributor 
    opened by retyui 7
  • build(deps): Bump ws from 6.2.1 to 6.2.2 in /website

    build(deps): Bump ws from 6.2.1 to 6.2.2 in /website

    Bumps ws from 6.2.1 to 6.2.2.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    CLA Signed Merged dependencies 
    opened by dependabot[bot] 6
  • docs(website): add DocSearch as recommended by docusaurus.

    docs(website): add DocSearch as recommended by docusaurus.

    👋 team,

    I am working on DocSearch. We have an integration for Docusaurus. We thought it is a shame you can not also used this search that you can find on reactjs for example.

    This PR will add DocSearch to the documentation website. It will allow an user to have a learn-as-you-type experience by displaying results thanks to a dropdown in a live way.

    Let me know if you need anything.

    CLA Signed Merged external_contributor 
    opened by s-pace 6
Owner
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Facebook
🌍📖 A readable, automated, and optimized (5 kb) internationalization for JavaScript

Linguijs ?? ?? A readable, automated, and optimized (5 kb) internationalization for JavaScript Documentation · Documentation 2.x · Quickstart · Exampl

Lingui 3.5k Jan 2, 2023
🌐jQuery based internationalization library

jQuery.i18n NOTE: For jquery independent version of this library, see https://github.com/wikimedia/banana-i18n jQuery.i18n is a jQuery based Javascrip

Wikimedia 649 Jan 4, 2023
Internationalization for react done right. Using the i18next i18n ecosystem.

react-i18next IMPORTANT: Master Branch is the new v10 using hooks. $ v10.0.0 npm i react-i18next react-native: To use hooks within react-native, you m

i18next 7.9k Dec 30, 2022
:globe_with_meridians: Internationalization plugin for Vue.js

vue-i18n Internationalization plugin for Vue.js ?? Gold Sponsors ?? Silver Sponsors ?? Bronze Sponsors ⚠️ NOTICE This repository is for Vue I18n v8.x.

kazuya kawaguchi 6.9k Dec 29, 2022
A general purpose internationalization library in 292 bytes

A general purpose internationalization library in 298 bytes! Features Simple and Familiar API Unobstrusive and Unopinionated Less than 300 bytes – inc

Luke Edwards 713 Dec 21, 2022
The alternative internationalization (i18n) library for Angular

NGX Locutus The alternative Angular Translation Library used for large scale microfrontend translations. No more worrying about shared translation ass

Stefan Haas 9 May 31, 2022
Type-safe internationalization (i18n) for Next.js

Type-safe internationalization (i18n) for Next.js Features Usage Examples Scoped translations Change current locale Use JSON files instead of TS for l

Tom Lienard 251 Dec 22, 2022
Give your JavaScript the ability to speak many languages.

Polyglot.js Polyglot.js is a tiny I18n helper library written in JavaScript, made to work both in the browser and in CommonJS environments (Node). It

Airbnb 3.6k Jan 2, 2023
human friendly i18n for javascript (node.js + browser)

BabelFish - human friendly i18n for JS Internationalisation with easy syntax for node.js and browser. Classic solutions use multiple phrases for plura

Nodeca 246 Nov 20, 2022
:orange_book: simple approach for javascript localization

ttag ⚠️ This project was previously named c-3po. Some of the talks, presentations, and documentation may reference it with both names. Modern javascri

ttag 307 Jan 2, 2023
ICU MessageFormat for Javascript - i18n Plural and Gender Capable Messages

messageformat The experience and subtlety of your program's text can be important. Messageformat is a mechanism for handling both pluralization and ge

null 1.6k Dec 23, 2022
ICU MessageFormat for Javascript - i18n Plural and Gender Capable Messages

messageformat The experience and subtlety of your program's text can be important. Messageformat is a mechanism for handling both pluralization and ge

null 1.6k Dec 23, 2022
Gettext Style i18n for Modern JavaScript Apps

Jed Gettext Style i18n for Modern JavaScript Apps For more info

null 879 Dec 14, 2022
Internationalization for svelte framework. Based on i18next ecosystem

svelte-i18next Svelte wrapper for i18next npm i svelte-i18next i18next Implementation This library wraps an i18next instance in a Svelte Store to obs

Nishu Goel 20 Dec 9, 2022
lightweight jQuery plugin for providing internationalization to javascript from ‘.properties’ files

jQuery.i18n.properties About jQuery.i18n.properties is a lightweight jQuery plugin for providing internationalization to javascript from ‘.properties’

null 408 Dec 25, 2022
🌍📖 A readable, automated, and optimized (5 kb) internationalization for JavaScript

Linguijs ?? ?? A readable, automated, and optimized (5 kb) internationalization for JavaScript Documentation · Documentation 2.x · Quickstart · Exampl

Lingui 3.5k Jan 2, 2023
A fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects.

?? typesafe-i18n A fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects. Advantages ?? lightwe

Hofer Ivan 1.3k Jan 4, 2023
Internationalization for react done right. Using the i18next i18n ecosystem.

react-i18next IMPORTANT: Master Branch is the new v10 using hooks. $ v10.0.0 npm i react-i18next react-native: To use hooks within react-native, you m

i18next 7.9k Jan 9, 2023
:globe_with_meridians: Internationalization plugin for Vue.js

vue-i18n Internationalization plugin for Vue.js ?? Gold Sponsors ?? Silver Sponsors ?? Bronze Sponsors ⚠️ NOTICE This repository is for Vue I18n v8.x.

kazuya kawaguchi 6.9k Jan 8, 2023
🌐jQuery based internationalization library

jQuery.i18n NOTE: For jquery independent version of this library, see https://github.com/wikimedia/banana-i18n jQuery.i18n is a jQuery based Javascrip

Wikimedia 649 Jan 4, 2023