Idea: Help catching forgotten strings

Hi @tricoder42 and cheers for this excellent library 🙌

What would you think about implementing some kind of debug mode in js-lingui that can be turned on/off by the developer to quickly spot the places where he forgot to use <Trans> ?

Here’s what it would look like:

Normal mode	Debug mode

This helps to see that the last string “commented on pull request” was totally forgotten while translating the application.

The number/length of xxxx would match the original string to keep the UI balance.

[tricoder42]

@HriBB That’s also an interesting idea. We could leverage info about origin of messages and either show compact version (missing IDs) or verbose one (missing ID and location in code)

[tricoder42]

My proposal here:

Add a new prop missing to I18nProvider. This value will be used when translation isn’t available, but only in development.

It may be a simple string:

<I18nProvider missing="xxxxxxx"><App /></I18nProvider>

or a fancy component which reports all missing translations (pseudo code):

const missing = {}

function DebugToolbarSink({ language, id }) {
   missing[language] = missing[language] || {}
   missing[language][id] = true
   return '⚠️'
}

function DebugToolbar() {
  return <ul>{Object.keys(missing[language]).map(id => <li>id</id>)}</ul>
}

<I18nProvider missing={DebugToolbarSink}>
   <App />
   <DebugToolbar />
</I18nProvider>