remove i18n.parts and switch fully to JSX syntax

src/background/background.ts

@@ -27,8 +27,8 @@ window.addEventListener("load", () => {
   // TypeScript does not allow ".js" extensions in the
   // module name, so SystemJS must add it.
   System.config({
-                 defaultJSExtensions: true,
-                });
+   defaultJSExtensions: true,
+  });
 
   System.import("../wxBackend")
     .then((wxMessaging: any) => {

src/i18n.tsx

@@ -105,7 +105,7 @@ function getPluralValue (values: any) {
 
 
 /**
- * Store information about the result of the last to i18n() or i18n.parts()
+ * Store information about the result of the last to i18n().
  *
  * @param i18nString   the string template as found in i18n.strings
  * @param pluralValue  value returned by getPluralValue()
@@ -146,42 +146,6 @@ try {
 i18n.strings = {};
 
 
-/**
- * Interpolate i18nized values with arbitrary objects.
- * @return Array of strings/objects.
- */
-i18n.parts = function(strings: string[], ...values: any[]) {
-  init();
-  if ("object" !== typeof jed) {
-    // Fallback implementation in case i18n lib is not there
-    let parts: string[] = [];
-
-    for (let i = 0; i < strings.length; i++) {
-      parts.push(strings[i]);
-      if (i < values.length) {
-        parts.push(values[i]);
-      }
-    }
-    return parts;
-  }
-
-  let str = toI18nString(strings);
-  let n = getPluralValue(values);
-  let tr = jed.ngettext(str, str, n).split(/%(\d+)\$s/);
-  let parts: string[] = [];
-  for (let i = 0; i < tr.length; i++) {
-    if (0 == i % 2) {
-      parts.push(tr[i]);
-    } else {
-      parts.push(values[parseInt(tr[i]) - 1]);
-    }
-  }
-
-  setI18nResult(str, n);
-  return parts;
-};
-
-
 /**
  * Pluralize based on first numeric parameter in the template.
  * @todo The plural argument is used for extraction by pogen.js

src/popup/popup.tsx

@@ -336,20 +336,20 @@ function formatHistoryItem(historyItem: HistoryRecord) {
   switch (historyItem.type) {
     case "create-reserve":
       return (
-        <p>
-          {i18n.parts`Bank requested reserve (${abbrev(d.reservePub)}) for ${prettyAmount(
-            d.requestedAmount)}.`}
-        </p>
+        <i18n.Translate wrap="p">
+          Bank requested reserve (<span>{abbrev(d.reservePub)}</span>) for <span>{prettyAmount(d.requestedAmount)}</span>.
+        </i18n.Translate>
       );
     case "confirm-reserve": {
       // FIXME: eventually remove compat fix
       let exchange = d.exchangeBaseUrl ? URI(d.exchangeBaseUrl).host() : "??";
-      let amount = prettyAmount(d.requestedAmount);
       let pub = abbrev(d.reservePub);
       return (
-        <p>
-          {i18n.parts`Started to withdraw ${amount} from ${exchange} (${pub}).`}
-        </p>
+        <i18n.Translate wrap="p">
+          Started to withdraw
+          {" "}{prettyAmount(d.requestedAmount)}{" "}
+          from <span>{exchange}</span> (<span>{pub}</span>).
+        </i18n.Translate>
       );
     }
     case "offer-contract": {
@@ -357,9 +357,9 @@ function formatHistoryItem(historyItem: HistoryRecord) {
       let linkElem = <a href={link}>{abbrev(d.contractHash)}</a>;
       let merchantElem = <em>{abbrev(d.merchantName, 15)}</em>;
       return (
-        <p>
-          {i18n.parts`Merchant ${merchantElem} offered contract ${linkElem}.`}
-        </p>
+        <i18n.Translate wrap="p">
+          Merchant <em>{abbrev(d.merchantName, 15)}</em> offered contract <a href={link}>{abbrev(d.contractHash)}</a>;
+        </i18n.Translate>
       );
     }
     case "depleted-reserve": {
@@ -367,9 +367,9 @@ function formatHistoryItem(historyItem: HistoryRecord) {
       let amount = prettyAmount(d.requestedAmount);
       let pub = abbrev(d.reservePub);
       return (
-        <p>
-          {i18n.parts`Withdrew ${amount} from ${exchange} (${pub}).`}
-        </p>
+        <i18n.Translate wrap="p">
+          Withdrew <span>{amount}</span> from <span>{exchange}</span> (<span>{pub}</span>).
+        </i18n.Translate>
       );
     }
     case "pay": {
@@ -378,12 +378,13 @@ function formatHistoryItem(historyItem: HistoryRecord) {
       let merchantElem = <em>{abbrev(d.merchantName, 15)}</em>;
       let fulfillmentLinkElem = <a href={url} onClick={openTab(url)}>view product</a>;
       return (
-        <p>
-          {i18n.parts`Paid ${prettyAmount(d.amount)} to merchant ${merchantElem}.  (${fulfillmentLinkElem})`}
-        </p>);
+        <i18n.Translate wrap="p">
+          Paid <span>{prettyAmount(d.amount)}</span> to merchant <span>{merchantElem}</span>.  (<span>{fulfillmentLinkElem}</span>)
+        </i18n.Translate>
+      );
     }
     default:
-      return (<p>i18n`Unknown event (${historyItem.type})`</p>);
+      return (<p>{i18n`Unknown event (${historyItem.type})`}</p>);
   }
 }
 
@@ -513,8 +514,8 @@ function WalletDebug(props: any) {
 function openExtensionPage(page: string) {
   return function() {
     chrome.tabs.create({
-                         "url": chrome.extension.getURL(page)
-                       });
+      "url": chrome.extension.getURL(page)
+    });
   }
 }
 
@@ -522,7 +523,7 @@ function openExtensionPage(page: string) {
 function openTab(page: string) {
   return function() {
     chrome.tabs.create({
-                         "url": page
-                       });
+      "url": page
+    });
   }
 }