declareStatic

Overview

The declareStatic function allows static function calls or variable expressions inside of a string translation. This is useful for writing reusable code, internationalizing fragmented sentences, and preserving word agreement.

const getDisplayName = (condition) => {
  return condition ? "Brian" : 'Archie';
};

gt(`${declareStatic(getDisplayName(condition))} says hello.`);
// Creates two translation entries:
// "Brian says hello." -> "Brian dice hola."
// "Archie says hello." -> "Archie dice hola."

This works by generating distinct translations for each possible outcome, which has the benefit of preserving word agreement, conjugation, and word order changes across languages.

Multiple Translation Entries: declareStatic creates separate translation entries for each possible outcome of the wrapped function, which can significantly increase the number of translations. Use this feature judiciously and prefer ICU select statements when the multiplication factor becomes excessive.

Static Analysis: declareStatic only can only analyze content that is known at build time. Any dynamic content (variables, api calls, etc.) must be wrapped with declareVar.

Reference

Parameters

Name	Type	Description
`content`	`T extends string \| boolean \| number \| null \| undefined`	A static function call that returns translatable content.

Returns

Returns content of type T.

Behavior

Build Time Analysis

During the build process, the CLI tool:

Analyzes the function wrapped by declareStatic
Determines all possible return values from the function (these must be statically analyzable at build time)
Creates separate translation entries for each unique outcome

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.

Example

Reusable Content

You can use declareStatic to handle fragmented sentences or for reusable content with function calls.

import { declareStatic, gt } from 'gt-next';

function getSubject() {
  return "boy";
}

function Component() {
  const translation1 = gt(`The ${declareStatic(getSubject())} is playing.`);
  const translation2 = gt(`The ${declareStatic(getSubject())} is having fun.`);
  const translation3 = gt(`The ${declareStatic(getSubject())} is having a great time.`);
  return <p>{translation1} {translation2} {translation3}</p>;
}

Fragmented Sentences

You can use declareStatic to handle fragmented sentences with function calls.

import { declareStatic, gt } from 'gt-next';

function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}

function Component({ gender }) {
  const translation = gt(`The ${declareStatic(getSubject(gender))} is playing.`);
  return <p>{translation}</p>;
}

Agreement

Without declareStatic, translating agreement is syntactically heavy. You have to add a select statement to handle agreement (plurality, gender, etc.). Then, you must also enumerate each possible outcome.

import { gt } from 'gt-next';

function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}

function Component({ gender }) {
  const translation = gt(
    '{gender, select, boy {The boy is playing.} girl {The girl is playing.} other {}}',
    {
      gender: getSubject(gender) ,
    },
  );
  return <p>{translation}</p>;
}

With declareStatic, agreement becomes trivial. No select statment is required nor do you need to specify every outcome.

import { declareStatic, declareVar, gt } from 'gt-next';

function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}

function Component({ gender }) {
  const translation = gt(`The ${declareStatic(getSubject(gender))} is playing.`);
  return <p>{translation}</p>;
}

By using declareStatic, the CLI tool identifies that getSubject has two possible outcomes, and creates a translation entry for each outcome. By doing so, agreement is handled automatically.

"The boy is playing" -> "El niño está jugando"
"The girl is playing" -> "La niña está jugando"

With Variables

You can combine declareStatic with declareVar for dynamic content.

import { declareStatic, declareVar, gt } from 'gt-next';

function getGreeting(name) {
  return name ? `Hello, ${declareVar(name)}` : 'Hello, stranger';
}

function Component({ name }) {
  const translation = gt(`${declareStatic(getGreeting(name))}! How are you?`);
  return <p>{translation}</p>;
}

Complex Functions

Functions can contain multiple conditional branches and return statements.

import { declareStatic, gt } from 'gt-next';

function getStatusMessage(status, priority) {
  if (status === 'complete') {
    return priority === 'high' ? 'Urgent task completed' : 'Task completed';
  } else if (status === 'pending') {
    return priority === 'high' ? 'Urgent task pending' : 'Task pending';
  }
  return 'Task status unknown';
}

function Component({ status, priority }) {
  const message = gt(`${declareStatic(getStatusMessage(status, priority))}.`);
  return <p>{message}</p>;
}

Inline Expressions and Logic

You can embed logic directly inside of the declareStatic call.

import { declareStatic, gt } from 'gt-next';

function Component({ gender }) {
  const message = gt(`The ${declareStatic(gender === 'male' ? 'boy' : 'girl')} is playing.`);
  return <p>{message}</p>;
}

Notes

Use declareStatic judiciously as it can exponentially increase translation entries
All possible outcomes must be statically analyzable at build time
Variables within static functions should be wrapped with declareVar

Next steps

See declareVar for marking dynamic content within static functions
See decodeVars for extracting original values from declared variables
See <Static> for the JSX equivalent
Read the release notes for more information

Overview

const getDisplayName = (condition) => {
  return condition ? "Brian" : 'Archie';
};

gt(`${declareStatic(getDisplayName(condition))} says hello.`);
// Creates two translation entries:
// "Brian says hello." -> "Brian dice hola."
// "Archie says hello." -> "Archie dice hola."

This works by generating distinct translations for each possible outcome, which has the benefit of preserving word agreement, conjugation, and word order changes across languages.

Static Analysis: declareStatic only can only analyze content that is known at build time. Any dynamic content (variables, api calls, etc.) must be wrapped with declareVar.

Reference

Parameters

Name	Type	Description
`content`	`T extends string \| boolean \| number \| null \| undefined`	A static function call that returns translatable content.

Returns

Returns content of type T.

Behavior

Build Time Analysis

During the build process, the CLI tool:

Analyzes the function wrapped by declareStatic
Determines all possible return values from the function (these must be statically analyzable at build time)
Creates separate translation entries for each unique outcome

Performance Considerations

Example

Reusable Content

You can use declareStatic to handle fragmented sentences or for reusable content with function calls.

import { declareStatic, gt } from 'gt-next';

function getSubject() {
  return "boy";
}

function Component() {
  const translation1 = gt(`The ${declareStatic(getSubject())} is playing.`);
  const translation2 = gt(`The ${declareStatic(getSubject())} is having fun.`);
  const translation3 = gt(`The ${declareStatic(getSubject())} is having a great time.`);
  return <p>{translation1} {translation2} {translation3}</p>;
}

Fragmented Sentences

You can use declareStatic to handle fragmented sentences with function calls.

import { declareStatic, gt } from 'gt-next';

function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}

function Component({ gender }) {
  const translation = gt(`The ${declareStatic(getSubject(gender))} is playing.`);
  return <p>{translation}</p>;
}

Agreement

import { gt } from 'gt-next';

function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}

function Component({ gender }) {
  const translation = gt(
    '{gender, select, boy {The boy is playing.} girl {The girl is playing.} other {}}',
    {
      gender: getSubject(gender) ,
    },
  );
  return <p>{translation}</p>;
}

With declareStatic, agreement becomes trivial. No select statment is required nor do you need to specify every outcome.

import { declareStatic, declareVar, gt } from 'gt-next';

function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}

function Component({ gender }) {
  const translation = gt(`The ${declareStatic(getSubject(gender))} is playing.`);
  return <p>{translation}</p>;
}

By using declareStatic, the CLI tool identifies that getSubject has two possible outcomes, and creates a translation entry for each outcome. By doing so, agreement is handled automatically.

"The boy is playing" -> "El niño está jugando"
"The girl is playing" -> "La niña está jugando"

With Variables

You can combine declareStatic with declareVar for dynamic content.

import { declareStatic, declareVar, gt } from 'gt-next';

function getGreeting(name) {
  return name ? `Hello, ${declareVar(name)}` : 'Hello, stranger';
}

function Component({ name }) {
  const translation = gt(`${declareStatic(getGreeting(name))}! How are you?`);
  return <p>{translation}</p>;
}

Complex Functions

Functions can contain multiple conditional branches and return statements.

import { declareStatic, gt } from 'gt-next';

function getStatusMessage(status, priority) {
  if (status === 'complete') {
    return priority === 'high' ? 'Urgent task completed' : 'Task completed';
  } else if (status === 'pending') {
    return priority === 'high' ? 'Urgent task pending' : 'Task pending';
  }
  return 'Task status unknown';
}

function Component({ status, priority }) {
  const message = gt(`${declareStatic(getStatusMessage(status, priority))}.`);
  return <p>{message}</p>;
}

Inline Expressions and Logic

You can embed logic directly inside of the declareStatic call.

import { declareStatic, gt } from 'gt-next';

function Component({ gender }) {
  const message = gt(`The ${declareStatic(gender === 'male' ? 'boy' : 'girl')} is playing.`);
  return <p>{message}</p>;
}

Notes

Use declareStatic judiciously as it can exponentially increase translation entries
All possible outcomes must be statically analyzable at build time
Variables within static functions should be wrapped with declareVar

Next steps

See declareVar for marking dynamic content within static functions
See decodeVars for extracting original values from declared variables
See <Static> for the JSX equivalent
Read the release notes for more information

Overview

const getDisplayName = (condition) => {
  return condition ? "Brian" : 'Archie';
};

gt(`${declareStatic(getDisplayName(condition))} says hello.`);
// Creates two translation entries:
// "Brian says hello." -> "Brian dice hola."
// "Archie says hello." -> "Archie dice hola."

This works by generating distinct translations for each possible outcome, which has the benefit of preserving word agreement, conjugation, and word order changes across languages.

Static Analysis: declareStatic only can only analyze content that is known at build time. Any dynamic content (variables, api calls, etc.) must be wrapped with declareVar.

Reference

Parameters

Name	Type	Description
`content`	`T extends string \| boolean \| number \| null \| undefined`	A static function call that returns translatable content.

Returns

Returns content of type T.

Behavior

Build Time Analysis

During the build process, the CLI tool:

Analyzes the function wrapped by declareStatic
Determines all possible return values from the function (these must be statically analyzable at build time)
Creates separate translation entries for each unique outcome

Performance Considerations

Example

Reusable Content

You can use declareStatic to handle fragmented sentences or for reusable content with function calls.

import { declareStatic, gt } from 'gt-next';

function getSubject() {
  return "boy";
}

function Component() {
  const translation1 = gt(`The ${declareStatic(getSubject())} is playing.`);
  const translation2 = gt(`The ${declareStatic(getSubject())} is having fun.`);
  const translation3 = gt(`The ${declareStatic(getSubject())} is having a great time.`);
  return <p>{translation1} {translation2} {translation3}</p>;
}

Fragmented Sentences

You can use declareStatic to handle fragmented sentences with function calls.

import { declareStatic, gt } from 'gt-next';

function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}

function Component({ gender }) {
  const translation = gt(`The ${declareStatic(getSubject(gender))} is playing.`);
  return <p>{translation}</p>;
}

Agreement

import { gt } from 'gt-next';

function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}

function Component({ gender }) {
  const translation = gt(
    '{gender, select, boy {The boy is playing.} girl {The girl is playing.} other {}}',
    {
      gender: getSubject(gender) ,
    },
  );
  return <p>{translation}</p>;
}

With declareStatic, agreement becomes trivial. No select statment is required nor do you need to specify every outcome.

import { declareStatic, declareVar, gt } from 'gt-next';

function getSubject(gender) {
  return gender === 'male' ? 'boy' : 'girl';
}

function Component({ gender }) {
  const translation = gt(`The ${declareStatic(getSubject(gender))} is playing.`);
  return <p>{translation}</p>;
}

By using declareStatic, the CLI tool identifies that getSubject has two possible outcomes, and creates a translation entry for each outcome. By doing so, agreement is handled automatically.

"The boy is playing" -> "El niño está jugando"
"The girl is playing" -> "La niña está jugando"

With Variables

You can combine declareStatic with declareVar for dynamic content.

import { declareStatic, declareVar, gt } from 'gt-next';

function getGreeting(name) {
  return name ? `Hello, ${declareVar(name)}` : 'Hello, stranger';
}

function Component({ name }) {
  const translation = gt(`${declareStatic(getGreeting(name))}! How are you?`);
  return <p>{translation}</p>;
}

Complex Functions

Functions can contain multiple conditional branches and return statements.

import { declareStatic, gt } from 'gt-next';

function getStatusMessage(status, priority) {
  if (status === 'complete') {
    return priority === 'high' ? 'Urgent task completed' : 'Task completed';
  } else if (status === 'pending') {
    return priority === 'high' ? 'Urgent task pending' : 'Task pending';
  }
  return 'Task status unknown';
}

function Component({ status, priority }) {
  const message = gt(`${declareStatic(getStatusMessage(status, priority))}.`);
  return <p>{message}</p>;
}

Inline Expressions and Logic

You can embed logic directly inside of the declareStatic call.

import { declareStatic, gt } from 'gt-next';

function Component({ gender }) {
  const message = gt(`The ${declareStatic(gender === 'male' ? 'boy' : 'girl')} is playing.`);
  return <p>{message}</p>;
}

Notes

Use declareStatic judiciously as it can exponentially increase translation entries
All possible outcomes must be statically analyzable at build time
Variables within static functions should be wrapped with declareVar

Next steps

See declareVar for marking dynamic content within static functions
See decodeVars for extracting original values from declared variables
See <Static> for the JSX equivalent
Read the release notes for more information

declareStatic

On this page

declareStatic

On this page

declareStatic

On this page