Files
react-native-devtools-frontend/docs/localization/localization_apis_V2.md
T
vidorteg 6d2775c5ef Modifying scripts for i18nString localization call
Modifying some scripts that verify the shape of localization calls
to work with the i18nString shorthand:

const i18nString = i18.i18n.getLocalizedString.bind(undefined, str_);

Bug: 1136655
Change-Id: I09a961136dd89e8af11ab33f413f315e61184078
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2469903
Commit-Queue: Vidal Diazleal <vidorteg@microsoft.com>
Reviewed-by: Simon Zünd <szuend@chromium.org>
Reviewed-by: Peter Marshall <petermarshall@chromium.org>
Reviewed-by: Christy Chen <chrche@microsoft.com>
2020-10-14 21:12:22 +00:00

1.7 KiB

Localizable strings in the DevTools frontend need to be wrapped in localization calls. There are two different calls.

i18nString

The basic API to make a string (with or without placeholder) localizable. The first argument is the string reference in UIStrings The second argument is an object for placeholders (if any)

// at the top of example.js file, after import statements

const UIStrings = {
  /**
    * @description This is an example description for my new string with placeholder
    * @example {example for placeholder} PH1
    * @example {example 2 for placeholder 2} PH2
    */
  addAnotherString: 'Another new string I want to add, with {PH1} and {PH2}',
};

message = i18nString(UIStrings.addAnotherString, {PH1: 'a placeholder', PH2: 'another placeholder'});

i18n.i18n.getFormatLocalizedString

This call returns a span element, not a string. It is used when you want to construct a DOM element with a localizable string, or localizable content that contains some other DOM element.

// Create the string in UIString
/**
*@description Message in Coverage View of the Coverage tab
*@example {reload button icon} PH1
*@example {record button icon} PH2
*/
clickTheRecordButtonSToStart: 'Click the reload button {PH1} to reload or record button {PH2} start capturing coverage.',

// Element with localizable content containing two DOM elements that are buttons
const reloadButton = UI.createInlineButton(UI.Toolbar.createActionButtonForId('coverage.start-with-reload'));
const recordButton = UI.createInlineButton(UI.Toolbar.createActionButton(this._toggleRecordAction));
message = i18n.i18n.getFormatLocalizedString(str_, UIStrings.clickTheReloadButtonSToReloadAnd, {PH1: reloadButton, PH2:recordButton });