Overview

In gt-next@6.8.0, we introduced the <Static> component to address sentence fragmentation and code reuse in JSX content. The component allows static function calls directly inside translations while preserving word agreement, conjugation, and word order changes across languages. However, this left a gap for string-based translations using gt() and msg(). As with JSX, many applications rely heavily on string construction using utility functions, especially in mature codebases where translatable content is scattered across services, utilities, and business logic.

gt-next 6.12.0 bridges this gap by introducing declareStatic() — the string equivalent of the <Static> component — along with supporting functions declareVar() and decodeVars().

Core Functionality

declareStatic()

Works similarly to <Static> but for string functions. The CLI analyses all possible return paths and creates separate translation entries for each outcome.

const getDisplayName = (name) => {
  return name ? declareVar(name) : 'Someone';
};

gt(`${declareStatic(getDisplayName(name))} says hello.`);

declareVar()

The string equivalent of <Var> - marks dynamic content within declareStatic() functions that should be excluded from hash calculations and handled as variables at runtime. It does this by wrapping dynamic content in an ICU-compatible select statement that resolves to the original dynamic content during interpolation.

const greeting = "Hello, " + declareVar(name);
// "Hello, {_gt_, select, other {name}}"

decodeVars()

Because declareVar() adds ICU-compatible markers in the source text, adding declareVar() on its own can cause issues for existing string-processing logic. To retrieve the original value, you just need to wrap the source string in decodeVars().

const greeting = "Hello, " + declareVar("Brian");
// "Hello, {_gt_, select, other {Brian}}"
const decodedGreeting = decodeVars(greeting);
// "Hello, Brian"

Additional Improvements

Enhanced String Functions

Both gt() and msg() now support concatenating static strings only:

gt("Hello " + "world");
msg("Welcome, " + "Brian");

Expanded <Static> Support

Until now, the <Static> component only supported function invocations as children. Now, it can support arbitrary JSX expressions that can be resolved at build time, such as nested JSX text, ternary operators, conditional statements, and function calls.

function getDisplayName(name) {
  return name ? <Var>{name}</Var> : 'Someone';
};
...
<T>
  <Static>
    Hello {getDisplayName("Brian")}!
    {
      isFriend ? " How are you?" : " What's going on?"
    }
  </Static>
</T>

Performance Considerations

Like <Static>, declareStatic() multiplies translation entries. Each function call with multiple outcomes creates separate translations, and multiple declareStatic() calls in the same string multiply the total entries exponentially. Use this feature judiciously and prefer ICU select statements when the multiplication factor becomes excessive.