Provide simple debug mode

[ansonlouis]

It would be useful to provide some sort of debug mode that can slightly alter the output when enabled. This can help devs see strings that are going through fbt and, more importantly, notice strings that are not going through fbt. Perhaps this could be an option in the babel plugins or an option in init.

A simple proposal, using the init route, would be to allow a final string transform function. This would allow devs to create their own format for debug mode, such as wrapping the string in brackets "[this string is translated]". I looked into several ways of going about this with the current api, but they are fairly hacky and may break easily.

[pkqinys]

I want to clarify your question. Are you asking for

• the ability to add special flags in the translation(results of running yarn translate-fbts)
  OR
• the ability to highlight translated/untranslated strings during runtime.

The latter is kind of supported if you are running in DEV mode:

fbt/runtime/nonfb/FbtTranslations.js

Lines 34 to 38 in 53d256d

	if (__DEV__) {
	if (!table && locale !== DEFAULT_SRC_LOCALE) {
	console.warn('Translations have not been provided');
	}
	}

[ansonlouis]

This would be runtime and would affect the output in the actual DOM (production = "My string", development = "[My string]"). This is just for an eyeball test to help catch bugs while developing and ensure necessary strings are being run through the library. If you have ideas on better ways to achieve this goal then that's certainly welcome.

[pkqinys]

This would be runtime and would affect the output in the actual DOM

Oh I see. You can indeed take advantage of the fbtInit() method.

FbtHooks.js declares a getTranslatedInput() method that determines how to get the final translated text. You can find its default implementation in FbtTranslations.js.

You pass into fbtInit()a custom implementation of getTranslatedInput() that:

1. Looks up a string's translation.
2. if the translation exists, wrap it in [] and return it.
3. Otherwise return null (which will make the text show up as English string in the actual DOM)

[ansonlouis]

Sweet thanks! We actually got it to work through a similar fashion

getFbtResult: result => {
    return new FbtResult(['[', ...result.contents, ']']);
}

Please comment if this approach would cause problems

[pkqinys]

I don't think that will work. result.contents could be translated string or English string, which means every UI string will show up inside a [] regardless whether it was translated