#22 - WIP: Monkey implements styled <T>s when translations are missing

examples/src/app.js

@@ -37,6 +37,15 @@ const messages = {
             "Close"
           ]
         },
+        "Hello": {
+          "msgid": "Hello",
+          "comments": {
+            "reference": "./src/filtering/components/FilterBox.jsx:29"
+          },
+          "msgstr": [
+            "Hello"
+          ]
+        },
       }
     }
   },
@@ -73,6 +82,15 @@ const messages = {
             "Stäng"
           ]
         },
+        "Hello": {
+          "msgid": "Hello",
+          "comments": {
+            "reference": "./src/filtering/components/FilterBox.jsx:29"
+          },
+          "msgstr": [
+            "Hallå"
+          ]
+        },
       }
     }
   }
@@ -103,7 +121,7 @@ const ClickableNumber = () =>
  * Example app
  */
 const App = () =>
-  <LionessProvider locale="sv" messages={messages}>
+  <LionessProvider locale="sv" messages={messages} debug>
     <div className="App">
       <pre>{'<T message="Clap {{ num }} times" num={<ClickableNumber />} />'}</pre>
       <T message="Clap {{ num }} times" num={<ClickableNumber />} />

src/components/LionessProvider.js

@@ -29,6 +29,10 @@ class LionessProvider extends Component {
     ...contextTypes,
   }
 
+  // state = {
+  //   missingTranslations: [],
+  // }
+
   constructor(props) {
     super(props)
 
@@ -62,6 +66,12 @@ class LionessProvider extends Component {
       tcn: tcn(interpolateComponents, this.gt.ngettext.bind(this.gt)),
       tcp: tcp(interpolateComponents, this.gt.pgettext.bind(this.gt)),
       tcnp: tcnp(interpolateComponents, this.gt.npgettext.bind(this.gt)),
+      debug: this.props.debug === true,
+      onMissingTranslation: (callback) => {
+        const gtCallback = msg => callback(msg)
+        this.gt.on('error', gtCallback)
+        return () => this.gt.off('error', gtCallback)
+      },
     }
   }
 

src/components/T.js

@@ -20,6 +20,8 @@ class T extends Component {
     context: PropTypes.string,
     count: PropTypes.number,
     tcnp: PropTypes.func.isRequired,
+    onMissingTranslation: PropTypes.func.isRequired,
+    debug: PropTypes.bool.isRequired,
   }
 
   static defaultProps = {
@@ -30,8 +32,22 @@ class T extends Component {
     count: 1,
   }
 
+  listenForError() {
+
+  }
+
   render() {
-    const { message, messagePlural, context, count, children, tcnp, ...scope } = this.props
+    const {
+      message,
+      messagePlural,
+      context,
+      count,
+      children,
+      tcnp,
+      debug,
+      onMissingTranslation,
+      ...scope,
+    } = this.props
 
     delete scope.t
     delete scope.tp
@@ -43,11 +59,27 @@ class T extends Component {
 
     const msgid = message || children || ''
 
+    let isMissing = false
+    const unsubscribe = onMissingTranslation(msg => {
+      const [, errMsgid] = /msgid "([^"]*)"/.exec(msg)
+      const [, errMsgctxt] = /msgctxt "([^"]*)"/.exec(msg)
+
+      if (msgid === errMsgid && context === errMsgctxt) {
+        isMissing = true
+      }
+    })
+
     const translatedContent = tcnp(context, msgid, messagePlural, count, { ...scope, count })
 
-    return typeof translatedContent === 'string'
+    unsubscribe()
+
+    const output = typeof translatedContent === 'string'
       ? <span>{translatedContent}</span>
       : translatedContent
+
+    return debug === true && isMissing === true
+      ? <span style={{ outline: '1px solid red' }}>{output}</span>
+      : output
   }
 }
 

src/contextTypes.js

@@ -9,3 +9,5 @@ export const tc = PropTypes.func
 export const tcn = PropTypes.func
 export const tcp = PropTypes.func
 export const tcnp = PropTypes.func
+export const debug = PropTypes.bool
+export const onMissingTranslation = PropTypes.func