Idea: Help catching forgotten strings

[machour]

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.

[machour]

Replacing the output of components nested inside <Trans> with Xs would make that even nicer 😍

[tricoder42]

Interesting idea 👍

I'll play with it for a while to see what's the best API.

[HriBB]

What about adding an additional command lingui missing, which would show missing translation ids.

[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>

[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]

Released in 2.4.0