Fluent react

[KevinMind]

Theoretically, if this babel plugin were to exist, you could use the @fluent/react api and extract your translations automatically. It would be something of a union of the nice DX that we have in AMO with the nice localization format that fluent provides.

Wouldn't it bee nice if we could create our translations using javascript? LIke you want some text, just pass in the text. If you want some dynamic values, just use template literal expressions. Let's make babel do all the work and just write the text we want to see.

your config would look like this

module.exports = {
   plugins: [
    ["@fluent/babel-plugin-react",
      {
        // this would be a similar configuration as https://github.com/gilbsgilbs/babel-plugin-i18next-extract/blob/master/src/config.ts#L3-L36 but tailored for ftl
        locales: [],
        outputPath: '/locales/{{lng}}/{{ns}}.ftl',
      }
    ]
  ]
}

Your react code would look like this

import { useLocalization } from '@fluent/react';
import {usePhotoCount} from 'somewhere';
import {useGender, Gender} from 'else';

export function Component() {
  const { l10n } = useLocalization();

  const photoCount = usePhotoCount();

  // This is friggin typesafe also. you must pass variants for union, enum or Record<string, string> selectors
  const genderedStream = l10n.createMessage<Gender>(userGender, {
    'male': `his photo stream`,
    female: 'her photo stream',
    other: 'their photo stream'
  }, 'female');

  return (
    <main>
      <h1>{l10n.createMessage('This is my title')}</h1>
      <p>
        {l10n.createMessage(
          `The user has added ${photoCount} images to ${genderedStream}`,
          {
             description: 'displaying the number of photos uploaded by the gendered user to the specific stream.'
           }
        )}
      </p>
    </main>
  )
}

This code would generate 2 outputs. One ftl resource file. Including comments and hashed variable and message names

# $userGender (male, female, other)
message-userGender =
  { $userGender ->
    [male] his photo stream
   *[female] her photo stream
    [other] their photo stream
  }

message-sdlfkj = This is my title

# displaying the number of photos uploaded by the gendered user to the specific stream.
message-234lkj = The user has added { $photoCount } images to { $message-userGender }

As well as a javascript bundled output that references the appropriate flt references using the lowest level l10n.getString() api.

export function Component() {
  const { l10n } = useLocalization();

  const photoCount = usePhotoCount();

  const genderedStream = l10n.getString(
    'message-userGender',
    {
       userGender,
    },
    'her photo stream'
  );

  return (
    <main>
      <h1>{l10n.getString('message-sdlfkj', {}, 'This is my title')}</h1>
      <p>
        {l10n.getString(
          'message-234lkj',
          {
            photoCount,
           'message-userGender': genderedStream,
          },
          `The user has added ${photoCount} images to ${genderedStream}`,
        )}
      </p>
    </main>
  )
}

This PR includes a very bare bones version of what this could be. It has been unit tested checking input and output, but the produces fluent has not been run through @fluent/react. There are many potential edge cases to cover here that I won't even try to list.

Just wanted to share a vision of the future that could be awesome.