gt-next 6.8.0: Static function calls inside translations

Overview

We often find that the more mature a codebase is, the more content is fragmented. Sentences become scattered between functions, utilities, logic, and services.

function getSubject(gender) {
  return gender === "male" ? "boy" : "girl"
}
function getObject(toy, gender) {
  return toy === "ball" ? "ball" : getSubject(gender)
}
 
function Component({ gender, toy }) {
  return (
    <>
      <p>
        The beautiful {getSubject(gender)} plays with the {getObject(toy, gender)}.
      </p>
    </>
  )
}

When it inevitably comes time to internationalize, developers find that they have painted themselves into a corner. Enforcing things like agreement, conjugation, and changes to word order across multiple files is not manageable without a major refactor. Traditionally, this meant manually extracting every possible permutation of each sentence and adding them to a translation dictionary.

In gt-next 6.8.0, we are doubling down on the belief that a strong i18n library adapts to a codebase, rather than the other way around. We are introducing the <Static> component to allow static function calls directly inside translations.

function Component({ gender, toy }) {
  return (
    <T>
      <p>
        The beautiful <Static>{getSubject(gender)}</Static> plays with the <Static>{getObject(toy, gender)}</Static>.
      </p>
    </T>
  )
}

Important Considerations

That being said, we strongly emphasize using the <Static> component carefully and judiciously. The <Static> component, while powerful, can also lead to major increases in the number of translation entries. If used incorrectly, this could have negative effects on load times for an application.

How to use <Static>

Just like the <T> and <Var> components, the <Static> component is a flag that tells the CLI tool where to and where not to look for translatable content. It tells the CLI tool to dereference a function call inside the <Static> tags and catalog all possible content being returned by that function. Treat every return statement as if it had a <T> component wrapping it.

Once the CLI tool has found all possible outputs from a function call, it creates a separate translation entry for each possible output. Because a different translation entry exists for each possible output, we can support agreement, conjugation, and word order in a fragmented sentence: "El niño es hermoso" and "La niña es hermosa".