proof of concept for not wrapping interpolation objects in <n></n>

phiresky · Nov 24, 2017 · 422fd56 · 422fd56
1 parent 712ace7
commit 422fd56
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 13 deletions.
diff --git a/src/Trans.js b/src/Trans.js
@@ -31,9 +31,9 @@ function nodesToString(mem, children, index) {
 
       const keys = Object.keys(clone);
       if (format && keys.length === 1) {
-        mem = `${mem}<${elementKey}>{{${keys[0]}, ${format}}}</${elementKey}>`;
+        mem = `${mem}{{${keys[0]}, ${format}}}`;
       } else if (keys.length === 1) {
-        mem = `${mem}<${elementKey}>{{${keys[0]}}}</${elementKey}>`;
+        mem = `${mem}{{${keys[0]}}}`;
       } else if (console && console.warn) {
         // not a valid interpolation object (can only contain one value plus format)
         console.warn(`react-i18next: the passed in object contained more than one variable - the object should look like {{ value, format }} where format is optional.`, child)
@@ -48,6 +48,18 @@ function nodesToString(mem, children, index) {
 
 function renderNodes(children, targetString, i18n) {
 
+  const data = {};
+  function getData(children) {
+    if (Object.prototype.toString.call(children) !== '[object Array]') children = [children];
+    for (const child of children) {
+      if (typeof child === 'string') continue;
+      if (hasChildren(child)) getData(getChildren(child));
+      else if (typeof child === 'object' && !React.isValidElement(child)) Object.assign(data, child);
+    }
+  }
+  getData(children);
+  targetString = i18n.services.interpolator.interpolate(targetString, data, i18n.language);
+
   // parse ast from string with additional wrapper tag
   // -> avoids issues in parser removing prepending text nodes
   const ast = HTML.parse(`<0>${targetString}</0>`);
@@ -71,9 +83,6 @@ function renderNodes(children, targetString, i18n) {
             { ...child.props, key: i },
             inner
           ));
-        } else if (typeof child === 'object' && !isElement) {
-          const interpolated = i18n.services.interpolator.interpolate(node.children[0].content, child, i18n.language);
-          mem.push(interpolated);
         } else {
           mem.push(child);
         }

diff --git a/test/i18n.js b/test/i18n.js
@@ -13,14 +13,14 @@ i18n
           interpolateKey: 'add {{insert}} {{up, uppercase}}',
           interpolateKey2: '<strong>add</strong> {{insert}} {{up, uppercase}}',
           transTest1: "Go <1>there</1>.",
-          transTest2: "Hello <1><0>{{name}}</0></1>, you have <3>{{count}}</3> message. Open <5>hear</5>.",
-          transTest2_plural: "Hello <1><0>{{name}}</0></1>, you have <3>{{count}}</3> messages. Open <5>here</5>.",
-          testTransKey1: "<0>{{numOfItems}}</0> item matched.",
-          testTransKey1_plural: "<0>{{numOfItems}}</0> items matched.",
-          testTransKey2: "<0><0>{{numOfItems}}</0></0> item matched.",
-          testTransKey2_plural: "<0><0>{{numOfItems}}</0></0> items matched.",
-          testTransKey3: "Result: <1><0>{{numOfItems}}</0></1> item matched.",
-          testTransKey3_plural: "Result: <1><0>{{numOfItems}}</0></1> items matched."
+          transTest2: "Hello <1><0>{{name}}</0></1>, you have {{count}} message. Open <5>hear</5>.",
+          transTest2_plural: "Hello <1>{{name}}</1>, you have {{count}} messages. Open <5>here</5>.",
+          testTransKey1: "{{numOfItems}} item matched.",
+          testTransKey1_plural: "{{numOfItems}} items matched.",
+          testTransKey2: "<0>{{numOfItems}}</0> item matched.",
+          testTransKey2_plural: "<0>{{numOfItems}}</0> items matched.",
+          testTransKey3: "Result: <1>{{numOfItems}}</1> item matched.",
+          testTransKey3_plural: "Result: <1>{{numOfItems}}</1> items matched."
         }
       }
     },