@deriv-com/translations 1.2.1 → 1.2.3

package/README.md

@@ -36,14 +36,15 @@ To get started, one would need few things to setup first which are:
     - Create a new bucket in the R2 account.
     - Create a new access key in the R2 account.
 3. Add the following secrets to your repository:
-    - `CROWDIN_PROJECT_ID`: Open your crowdin project and navigate to `Tools` tab, you will be able to get the Project ID, store that in your github secrets
-    - `CROWDIN_PERSONAL_TOKEN`: This can be obtained by logging in to your crowdin account and clicking on your profile icon and goto `Settings > API` and create a new personal access token, store that in your github secrets
-    - `R2_ACCOUNT_ID`: R2 account ID from the Cloudflare R2 dashboard
-    - `R2_ACCESS_KEY_ID`: R2 access key ID from the Cloudflare R2 dashboard
-    - `R2_SECRET_ACCESS_KEY`: R2 secret access key from the Cloudflare R2 dashboard
-    - `R2_BUCKET_NAME`: R2 bucket name from the Cloudflare R2 dashboard
+    - `CROWDIN_PROJECT_ID`: Open your crowdin project and navigate to `Tools` tab, you will be able to get the Project ID, store that in your github secrets.
+    - `CROWDIN_PERSONAL_TOKEN`: This can be obtained by logging in to your crowdin account and clicking on your profile icon and goto `Settings > API` and create a new personal access token, store that in your github secrets.
+    - `R2_ACCOUNT_ID`: R2 account ID from the Cloudflare R2 dashboard.
+    - `R2_ACCESS_KEY_ID`: R2 access key ID from the Cloudflare R2 dashboard.
+    - `R2_SECRET_ACCESS_KEY`: R2 secret access key from the Cloudflare R2 dashboard.
+    - `R2_BUCKET_NAME`: R2 bucket name from the Cloudflare R2 dashboard.
 4. Add the following environment variable in your repository:
-    - `PROJECT_NAME`: Add project name in your environment variable which will be used for Cloudflare R2 folder name for translations
+    - `PROJECT_NAME`: Add project name in your environment variable which will be used for Cloudflare R2 folder name for translations.
+    - `CROWDIN_BRANCH_NAME`: Add the branch name for your crowdin project to separate the translations based on environment, this needs to be put into the environment variable instead of secret because the consumer of the package needs it while defining the `cdnUrl` to access the translations.
 5. Setup the github action to sync the translations to the CDN, refer to the [Syncing translations](#syncing-translations) section for more details.
 
 Install the package by running:
@@ -54,7 +55,7 @@ npm install @deriv-com/translations
 
 ### Setup
 
-- initialize translations in main component by importing and calling `initializeI18n` outside of the component function
+- initialize translations in main component by importing and calling `initializeI18n` outside of the component function.
 - pass the return value to the `TranslationProvider` component from `@deriv-com/translations`.
 - pass default language to the `TranslationProvider` component.
 
@@ -86,7 +87,7 @@ import initializeI18n from "@deriv-com/translations";
 initializeI18n({ cdnUrl: "https://cdn.example.com" });
 ```
 
-- For strings use either `localize(...)` or `<Localize />`
+- For strings use either `localize(...)` or `<Localize />`.
 
 ### `Localize` component example:
 
@@ -137,22 +138,22 @@ There is a github action that syncs the translations from Crowdin to the CDN.
 
 The action takes following inputs:
 
-- `PROJECT_SOURCE_DIRECTORY`: Source directory of your project by default it is `src`
-- `CROWDIN_BASE_PATH`: Base path of the translations in the Crowdin project by default it is `.`
-- `CROWDIN_BASE_URL`: Base URL of the CDN where the translations are stored, default is `https://api.crowdin.com`
-- `CROWDIN_BRANCH_NAME`: Running on production, test or staging etc
-- `CROWDIN_PROJECT_ID`: Crowdin project ID which can be found in the crowdin project settings
-- `CROWDIN_PERSONAL_TOKEN`: Crowdin personal token which can be found in the crowdin account settings
-- `R2_ACCOUNT_ID`: R2 account ID from the Cloudflare R2 dashboard
-- `R2_ACCESS_KEY_ID`: R2 access key ID from the Cloudflare R2 dashboard
-- `R2_SECRET_ACCESS_KEY`: R2 secret access key from the Cloudflare R2 dashboard
-- `R2_BUCKET_NAME`: R2 bucket name from the Cloudflare R2 dashboard
+- `PROJECT_SOURCE_DIRECTORY`: Source directory of your project by default it is `src`.
+- `CROWDIN_BASE_PATH`: Base path of the translations in the Crowdin project by default it is `.`.
+- `CROWDIN_BASE_URL`: Base URL of the CDN where the translations are stored, default is `https://api.crowdin.com`.
+- `CROWDIN_BRANCH_NAME`: Running on production, test or staging etc.
+- `CROWDIN_PROJECT_ID`: Crowdin project ID which can be found in the crowdin project settings.
+- `CROWDIN_PERSONAL_TOKEN`: Crowdin personal token which can be found in the crowdin account settings.
+- `R2_ACCOUNT_ID`: R2 account ID from the Cloudflare R2 dashboard.
+- `R2_ACCESS_KEY_ID`: R2 access key ID from the Cloudflare R2 dashboard.
+- `R2_SECRET_ACCESS_KEY`: R2 secret access key from the Cloudflare R2 dashboard.
+- `R2_BUCKET_NAME`: R2 bucket name from the Cloudflare R2 dashboard.
 
-Refer to the action file [here](https://github.com/deriv-com/translations/blob/main/.github/actions/extract_and_sync_translations/action.yml)
+Refer to the action file [here](https://github.com/deriv-com/translations/blob/main/.github/actions/extract_and_sync_translations/action.yml).
 
 ### Example usage of the action in the workflow file:
 
-Copy and paste the following workflow code in your repository in this path`.github/workflows/sync_translations.yml`
+Copy and paste the following workflow code in your repository in this path`.github/workflows/sync_translations.yml`.
 
 ```yaml
 name: Sync translations
@@ -161,19 +162,18 @@ on:
   push:
     branches:
       - 'main'
+  schedule:
+    - cron: '0 */12 * * *'
 
 jobs:
   sync_translations:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout to main branch
-        uses: actions/checkout@v3
-
       - name: Sync translations
         uses: deriv-com/translations/.github/actions/extract_and_sync_translations@main
         with:
           PROJECT_NAME: ${{ env.PROJECT_NAME }}
-          CROWDIN_BRANCH_NAME: ${{ secrets.CROWDIN_BRANCH_NAME }}
+          CROWDIN_BRANCH_NAME: ${{ env.CROWDIN_BRANCH_NAME }}
           CROWDIN_BASE_URL: ${{ env.CROWDIN_BASE_URL }}
           CROWDIN_BASE_PATH: ${{ env.CROWDIN_BASE_PATH }}
           CROWDIN_PROJECT_ID: ${{ secrets.CROWDIN_PROJECT_ID }}

package/dist/components/index.js

@@ -1,9 +1,9 @@
 import { default as e } from "./localize.js";
 import "react/jsx-runtime";
 import "react";
-import "../utils-6G1tiZlP.js";
-import "../i18nInstance-D20fwFYr.js";
+import "../useTranslation-DWHGHs02.js";
 import "../context-f4Bcf4Hs.js";
+import "../i18nInstance-D20fwFYr.js";
 export {
   e as Localize
 };

package/dist/components/localize.js

@@ -1,12 +1,12 @@
-import { jsx as z } from "react/jsx-runtime";
-import { createElement as T, isValidElement as K, Fragment as M, cloneElement as _, Children as J, useContext as U } from "react";
-import { w as X, b as H } from "../utils-6G1tiZlP.js";
-import { g as Y, b as I } from "../i18nInstance-D20fwFYr.js";
-import { I as Z } from "../context-f4Bcf4Hs.js";
-function q(t) {
-  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, "default") ? t.default : t;
+import { jsx as W } from "react/jsx-runtime";
+import { createElement as T, isValidElement as D, Fragment as z, cloneElement as M, Children as _, useContext as J, forwardRef as U } from "react";
+import { w as X, a as K, g as Y, u as Z } from "../useTranslation-DWHGHs02.js";
+import { g as q, b as V } from "../i18nInstance-D20fwFYr.js";
+import { I as G } from "../context-f4Bcf4Hs.js";
+function Q(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var G = {
+var ee = {
   area: !0,
   base: !0,
   br: !0,
@@ -22,344 +22,373 @@ var G = {
   track: !0,
   wbr: !0
 };
-const Q = /* @__PURE__ */ q(G);
-var R = /\s([^'"/\s><]+?)[\s/>]|([^\s=]+)=\s?(".*?"|'.*?')/g;
-function B(t) {
-  var e = { type: "tag", name: "", voidElement: !1, attrs: {}, children: [] }, n = t.match(/<\/?([^\s]+?)[/\s>]/);
-  if (n && (e.name = n[1], (Q[n[1]] || t.charAt(t.length - 2) === "/") && (e.voidElement = !0), e.name.startsWith("!--"))) {
-    var o = t.indexOf("-->");
-    return { type: "comment", comment: o !== -1 ? t.slice(4, o) : "" };
+const te = /* @__PURE__ */ Q(ee);
+var ne = /\s([^'"/\s><]+?)[\s/>]|([^\s=]+)=\s?(".*?"|'.*?')/g;
+function S(e) {
+  var t = { type: "tag", name: "", voidElement: !1, attrs: {}, children: [] }, n = e.match(/<\/?([^\s]+?)[/\s>]/);
+  if (n && (t.name = n[1], (te[n[1]] || e.charAt(e.length - 2) === "/") && (t.voidElement = !0), t.name.startsWith("!--"))) {
+    var o = e.indexOf("-->");
+    return { type: "comment", comment: o !== -1 ? e.slice(4, o) : "" };
   }
-  for (var c = new RegExp(R), s = null; (s = c.exec(t)) !== null; )
+  for (var p = new RegExp(ne), s = null; (s = p.exec(e)) !== null; )
     if (s[0].trim())
       if (s[1]) {
-        var l = s[1].trim(), p = [l, ""];
-        l.indexOf("=") > -1 && (p = l.split("=")), e.attrs[p[0]] = p[1], c.lastIndex--;
+        var i = s[1].trim(), a = [i, ""];
+        i.indexOf("=") > -1 && (a = i.split("=")), t.attrs[a[0]] = a[1], p.lastIndex--;
       } else
-        s[2] && (e.attrs[s[2]] = s[3].trim().substring(1, s[3].length - 1));
-  return e;
+        s[2] && (t.attrs[s[2]] = s[3].trim().substring(1, s[3].length - 1));
+  return t;
 }
-var tt = /<[a-zA-Z0-9\-\!\/](?:"[^"]*"|'[^']*'|[^'">])*>/g, et = /^\s*$/, nt = /* @__PURE__ */ Object.create(null);
-function L(t, e) {
-  switch (e.type) {
+var se = /<[a-zA-Z0-9\-\!\/](?:"[^"]*"|'[^']*'|[^'">])*>/g, re = /^\s*$/, oe = /* @__PURE__ */ Object.create(null);
+function B(e, t) {
+  switch (t.type) {
     case "text":
-      return t + e.content;
+      return e + t.content;
     case "tag":
-      return t += "<" + e.name + (e.attrs ? function(n) {
+      return e += "<" + t.name + (t.attrs ? function(n) {
         var o = [];
-        for (var c in n)
-          o.push(c + '="' + n[c] + '"');
+        for (var p in n)
+          o.push(p + '="' + n[p] + '"');
         return o.length ? " " + o.join(" ") : "";
-      }(e.attrs) : "") + (e.voidElement ? "/>" : ">"), e.voidElement ? t : t + e.children.reduce(L, "") + "</" + e.name + ">";
+      }(t.attrs) : "") + (t.voidElement ? "/>" : ">"), t.voidElement ? e : e + t.children.reduce(B, "") + "</" + t.name + ">";
     case "comment":
-      return t + "<!--" + e.comment + "-->";
+      return e + "<!--" + t.comment + "-->";
   }
 }
-var st = { parse: function(t, e) {
-  e || (e = {}), e.components || (e.components = nt);
-  var n, o = [], c = [], s = -1, l = !1;
-  if (t.indexOf("<") !== 0) {
-    var p = t.indexOf("<");
-    o.push({ type: "text", content: p === -1 ? t : t.substring(0, p) });
+var ae = { parse: function(e, t) {
+  t || (t = {}), t.components || (t.components = oe);
+  var n, o = [], p = [], s = -1, i = !1;
+  if (e.indexOf("<") !== 0) {
+    var a = e.indexOf("<");
+    o.push({ type: "text", content: a === -1 ? e : e.substring(0, a) });
   }
-  return t.replace(tt, function(m, f) {
-    if (l) {
-      if (m !== "</" + n.name + ">")
+  return e.replace(se, function(f, c) {
+    if (i) {
+      if (f !== "</" + n.name + ">")
         return;
-      l = !1;
+      i = !1;
     }
-    var v, E = m.charAt(1) !== "/", k = m.startsWith("<!--"), b = f + m.length, $ = t.charAt(b);
-    if (k) {
-      var y = B(m);
-      return s < 0 ? (o.push(y), o) : ((v = c[s]).children.push(y), o);
+    var g, j = f.charAt(1) !== "/", w = f.startsWith("<!--"), b = c + f.length, x = e.charAt(b);
+    if (w) {
+      var y = S(f);
+      return s < 0 ? (o.push(y), o) : ((g = p[s]).children.push(y), o);
     }
-    if (E && (s++, (n = B(m)).type === "tag" && e.components[n.name] && (n.type = "component", l = !0), n.voidElement || l || !$ || $ === "<" || n.children.push({ type: "text", content: t.slice(b, t.indexOf("<", b)) }), s === 0 && o.push(n), (v = c[s - 1]) && v.children.push(n), c[s] = n), (!E || n.voidElement) && (s > -1 && (n.voidElement || n.name === m.slice(2, -1)) && (s--, n = s === -1 ? o : c[s]), !l && $ !== "<" && $)) {
-      v = s === -1 ? o : c[s].children;
-      var u = t.indexOf("<", b), i = t.slice(b, u === -1 ? void 0 : u);
-      et.test(i) && (i = " "), (u > -1 && s + v.length >= 0 || i !== " ") && v.push({ type: "text", content: i });
+    if (j && (s++, (n = S(f)).type === "tag" && t.components[n.name] && (n.type = "component", i = !0), n.voidElement || i || !x || x === "<" || n.children.push({ type: "text", content: e.slice(b, e.indexOf("<", b)) }), s === 0 && o.push(n), (g = p[s - 1]) && g.children.push(n), p[s] = n), (!j || n.voidElement) && (s > -1 && (n.voidElement || n.name === f.slice(2, -1)) && (s--, n = s === -1 ? o : p[s]), !i && x !== "<" && x)) {
+      g = s === -1 ? o : p[s].children;
+      var m = e.indexOf("<", b), u = e.slice(b, m === -1 ? void 0 : m);
+      re.test(u) && (u = " "), (m > -1 && s + g.length >= 0 || u !== " ") && g.push({ type: "text", content: u });
     }
   }), o;
-}, stringify: function(t) {
-  return t.reduce(function(e, n) {
-    return e + L("", n);
+}, stringify: function(e) {
+  return e.reduce(function(t, n) {
+    return t + B("", n);
   }, "");
 } };
-function S(t, e) {
-  if (!t)
+function H(e, t) {
+  if (!e)
     return !1;
-  const n = t.props ? t.props.children : t.children;
-  return e ? n.length > 0 : !!n;
+  const n = e.props ? e.props.children : e.children;
+  return t ? n.length > 0 : !!n;
 }
-function V(t) {
-  if (!t)
+function R(e) {
+  if (!e)
     return [];
-  const e = t.props ? t.props.children : t.children;
-  return t.props && t.props.i18nIsDynamicList ? P(e) : e;
+  const t = e.props ? e.props.children : e.children;
+  return e.props && e.props.i18nIsDynamicList ? F(t) : t;
 }
-function rt(t) {
-  return Object.prototype.toString.call(t) !== "[object Array]" ? !1 : t.every((e) => K(e));
+function ie(e) {
+  return Object.prototype.toString.call(e) !== "[object Array]" ? !1 : e.every((t) => D(t));
 }
-function P(t) {
-  return Array.isArray(t) ? t : [t];
+function F(e) {
+  return Array.isArray(e) ? e : [e];
 }
-function ot(t, e) {
+function le(e, t) {
   const n = {
-    ...e
+    ...t
   };
-  return n.props = Object.assign(t.props, e.props), n;
+  return n.props = Object.assign(e.props, t.props), n;
 }
-function W(t, e) {
-  if (!t)
+function L(e, t) {
+  if (!e)
     return "";
   let n = "";
-  const o = P(t), c = e.transSupportBasicHtmlNodes && e.transKeepBasicHtmlNodesFor ? e.transKeepBasicHtmlNodesFor : [];
-  return o.forEach((s, l) => {
+  const o = F(e), p = t.transSupportBasicHtmlNodes && t.transKeepBasicHtmlNodesFor ? t.transKeepBasicHtmlNodesFor : [];
+  return o.forEach((s, i) => {
     if (typeof s == "string")
       n += `${s}`;
-    else if (K(s)) {
-      const p = Object.keys(s.props).length, m = c.indexOf(s.type) > -1, f = s.props.children;
-      if (!f && m && p === 0)
+    else if (D(s)) {
+      const a = Object.keys(s.props).length, f = p.indexOf(s.type) > -1, c = s.props.children;
+      if (!c && f && a === 0)
         n += `<${s.type}/>`;
-      else if (!f && (!m || p !== 0))
-        n += `<${l}></${l}>`;
+      else if (!c && (!f || a !== 0))
+        n += `<${i}></${i}>`;
       else if (s.props.i18nIsDynamicList)
-        n += `<${l}></${l}>`;
-      else if (m && p === 1 && typeof f == "string")
-        n += `<${s.type}>${f}</${s.type}>`;
+        n += `<${i}></${i}>`;
+      else if (f && a === 1 && typeof c == "string")
+        n += `<${s.type}>${c}</${s.type}>`;
       else {
-        const v = W(f, e);
-        n += `<${l}>${v}</${l}>`;
+        const g = L(c, t);
+        n += `<${i}>${g}</${i}>`;
       }
     } else if (s === null)
-      H("Trans: the passed in value is invalid - seems you passed in a null child.");
+      K("Trans: the passed in value is invalid - seems you passed in a null child.");
     else if (typeof s == "object") {
       const {
-        format: p,
-        ...m
-      } = s, f = Object.keys(m);
-      if (f.length === 1) {
-        const v = p ? `${f[0]}, ${p}` : f[0];
-        n += `{{${v}}}`;
+        format: a,
+        ...f
+      } = s, c = Object.keys(f);
+      if (c.length === 1) {
+        const g = a ? `${c[0]}, ${a}` : c[0];
+        n += `{{${g}}}`;
       } else
-        H("react-i18next: the passed in object contained more than one variable - the object should look like {{ value, format }} where format is optional.", s);
+        K("react-i18next: the passed in object contained more than one variable - the object should look like {{ value, format }} where format is optional.", s);
     } else
-      H("Trans: the passed in value is invalid - seems you passed in a variable like {number} - please pass in variables for interpolation as full objects like {{number}}.", s);
+      K("Trans: the passed in value is invalid - seems you passed in a variable like {number} - please pass in variables for interpolation as full objects like {{number}}.", s);
   }), n;
 }
-function at(t, e, n, o, c, s) {
-  if (e === "")
+function pe(e, t, n, o, p, s) {
+  if (t === "")
     return [];
-  const l = o.transKeepBasicHtmlNodesFor || [], p = e && new RegExp(l.map((u) => `<${u}`).join("|")).test(e);
-  if (!t && !p && !s)
-    return [e];
-  const m = {};
-  function f(u) {
-    P(u).forEach((a) => {
-      typeof a != "string" && (S(a) ? f(V(a)) : typeof a == "object" && !K(a) && Object.assign(m, a));
+  const i = o.transKeepBasicHtmlNodesFor || [], a = t && new RegExp(i.map((m) => `<${m}`).join("|")).test(t);
+  if (!e && !a && !s)
+    return [t];
+  const f = {};
+  function c(m) {
+    F(m).forEach((l) => {
+      typeof l != "string" && (H(l) ? c(R(l)) : typeof l == "object" && !D(l) && Object.assign(f, l));
     });
   }
-  f(t);
-  const v = st.parse(`<0>${e}</0>`), E = {
-    ...m,
-    ...c
+  c(e);
+  const g = ae.parse(`<0>${t}</0>`), j = {
+    ...f,
+    ...p
   };
-  function k(u, i, a) {
-    const g = V(u), O = $(g, i.children, a);
-    return rt(g) && O.length === 0 || u.props && u.props.i18nIsDynamicList ? g : O;
+  function w(m, u, l) {
+    const v = R(m), O = x(v, u.children, l);
+    return ie(v) && O.length === 0 || m.props && m.props.i18nIsDynamicList ? v : O;
   }
-  function b(u, i, a, g, O) {
-    u.dummy ? (u.children = i, a.push(_(u, {
-      key: g
-    }, O ? void 0 : i))) : a.push(...J.map([u], (h) => {
+  function b(m, u, l, v, O) {
+    m.dummy ? (m.children = u, l.push(M(m, {
+      key: v
+    }, O ? void 0 : u))) : l.push(..._.map([m], (h) => {
       const r = {
         ...h.props
       };
       return delete r.i18nIsDynamicList, T(h.type, {
         ...r,
-        key: g,
+        key: v,
         ref: h.ref
-      }, O ? null : i);
+      }, O ? null : u);
     }));
   }
-  function $(u, i, a) {
-    const g = P(u);
-    return P(i).reduce((h, r, C) => {
-      const N = r.children && r.children[0] && r.children[0].content && n.services.interpolator.interpolate(r.children[0].content, E, n.language);
+  function x(m, u, l) {
+    const v = F(m);
+    return F(u).reduce((h, r, k) => {
+      const C = r.children && r.children[0] && r.children[0].content && n.services.interpolator.interpolate(r.children[0].content, j, n.language);
       if (r.type === "tag") {
-        let j = g[parseInt(r.name, 10)];
-        a.length === 1 && !j && (j = a[0][r.name]), j || (j = {});
-        const d = Object.keys(r.attrs).length !== 0 ? ot({
+        let E = v[parseInt(r.name, 10)];
+        l.length === 1 && !E && (E = l[0][r.name]), E || (E = {});
+        const d = Object.keys(r.attrs).length !== 0 ? le({
           props: r.attrs
-        }, j) : j, w = K(d), A = w && S(r, !0) && !r.voidElement, F = p && typeof d == "object" && d.dummy && !w, D = typeof t == "object" && t !== null && Object.hasOwnProperty.call(t, r.name);
+        }, E) : E, N = D(d), A = N && H(r, !0) && !r.voidElement, P = a && typeof d == "object" && d.dummy && !N, I = typeof e == "object" && e !== null && Object.hasOwnProperty.call(e, r.name);
         if (typeof d == "string") {
-          const x = n.services.interpolator.interpolate(d, E, n.language);
-          h.push(x);
-        } else if (S(d) || A) {
-          const x = k(d, r, a);
-          b(d, x, h, C);
-        } else if (F) {
-          const x = $(g, r.children, a);
-          b(d, x, h, C);
+          const $ = n.services.interpolator.interpolate(d, j, n.language);
+          h.push($);
+        } else if (H(d) || A) {
+          const $ = w(d, r, l);
+          b(d, $, h, k);
+        } else if (P) {
+          const $ = x(v, r.children, l);
+          b(d, $, h, k);
         } else if (Number.isNaN(parseFloat(r.name)))
-          if (D) {
-            const x = k(d, r, a);
-            b(d, x, h, C, r.voidElement);
-          } else if (o.transSupportBasicHtmlNodes && l.indexOf(r.name) > -1)
+          if (I) {
+            const $ = w(d, r, l);
+            b(d, $, h, k, r.voidElement);
+          } else if (o.transSupportBasicHtmlNodes && i.indexOf(r.name) > -1)
             if (r.voidElement)
               h.push(T(r.name, {
-                key: `${r.name}-${C}`
+                key: `${r.name}-${k}`
               }));
             else {
-              const x = $(g, r.children, a);
+              const $ = x(v, r.children, l);
               h.push(T(r.name, {
-                key: `${r.name}-${C}`
-              }, x));
+                key: `${r.name}-${k}`
+              }, $));
             }
           else if (r.voidElement)
             h.push(`<${r.name} />`);
           else {
-            const x = $(g, r.children, a);
-            h.push(`<${r.name}>${x}</${r.name}>`);
+            const $ = x(v, r.children, l);
+            h.push(`<${r.name}>${$}</${r.name}>`);
           }
-        else if (typeof d == "object" && !w) {
-          const x = r.children[0] ? N : null;
-          x && h.push(x);
+        else if (typeof d == "object" && !N) {
+          const $ = r.children[0] ? C : null;
+          $ && h.push($);
         } else
-          b(d, N, h, C, r.children.length !== 1 || !N);
+          b(d, C, h, k, r.children.length !== 1 || !C);
       } else if (r.type === "text") {
-        const j = o.transWrapTextNodes, d = s ? o.unescape(n.services.interpolator.interpolate(r.content, E, n.language)) : n.services.interpolator.interpolate(r.content, E, n.language);
-        j ? h.push(T(j, {
-          key: `${r.name}-${C}`
+        const E = o.transWrapTextNodes, d = s ? o.unescape(n.services.interpolator.interpolate(r.content, j, n.language)) : n.services.interpolator.interpolate(r.content, j, n.language);
+        E ? h.push(T(E, {
+          key: `${r.name}-${k}`
         }, d)) : h.push(d);
       }
       return h;
     }, []);
   }
-  const y = $([{
+  const y = x([{
     dummy: !0,
-    children: t || []
-  }], v, P(t || []));
-  return V(y[0]);
+    children: e || []
+  }], g, F(e || []));
+  return R(y[0]);
 }
-function it(t) {
+function ue(e) {
   let {
-    children: e,
+    children: t,
     count: n,
     parent: o,
-    i18nKey: c,
+    i18nKey: p,
     context: s,
-    tOptions: l = {},
-    values: p,
-    defaults: m,
-    components: f,
-    ns: v,
-    i18n: E,
-    t: k,
+    tOptions: i = {},
+    values: a,
+    defaults: f,
+    components: c,
+    ns: g,
+    i18n: j,
+    t: w,
     shouldUnescape: b,
-    ...$
-  } = t;
-  const y = E || I();
+    ...x
+  } = e;
+  const y = j || V();
   if (!y)
-    return X("You will need to pass in an i18next instance by using i18nextReactModule"), e;
-  const u = k || y.t.bind(y) || ((A) => A);
-  s && (l.context = s);
-  const i = {
-    ...Y(),
+    return X("You will need to pass in an i18next instance by using i18nextReactModule"), t;
+  const m = w || y.t.bind(y) || ((A) => A);
+  s && (i.context = s);
+  const u = {
+    ...q(),
     ...y.options && y.options.react
   };
-  let a = v || u.ns || y.options && y.options.defaultNS;
-  a = typeof a == "string" ? [a] : a || ["translation"];
-  const g = W(e, i), O = m || g || i.transEmptyNodeValue || c, {
+  let l = g || m.ns || y.options && y.options.defaultNS;
+  l = typeof l == "string" ? [l] : l || ["translation"];
+  const v = L(t, u), O = f || v || u.transEmptyNodeValue || p, {
     hashTransKey: h
-  } = i, r = c || (h ? h(g || O) : g || O);
-  y.options && y.options.interpolation && y.options.interpolation.defaultVariables && (p = p && Object.keys(p).length > 0 ? {
-    ...p,
+  } = u, r = p || (h ? h(v || O) : v || O);
+  y.options && y.options.interpolation && y.options.interpolation.defaultVariables && (a = a && Object.keys(a).length > 0 ? {
+    ...a,
     ...y.options.interpolation.defaultVariables
   } : {
     ...y.options.interpolation.defaultVariables
   });
-  const C = p ? l.interpolation : {
+  const k = a ? i.interpolation : {
     interpolation: {
-      ...l.interpolation,
+      ...i.interpolation,
       prefix: "#$?",
       suffix: "?$#"
     }
-  }, N = {
-    ...l,
+  }, C = {
+    ...i,
     count: n,
-    ...p,
-    ...C,
+    ...a,
+    ...k,
     defaultValue: O,
-    ns: a
-  }, j = r ? u(r, N) : O;
-  f && Object.keys(f).forEach((A) => {
-    const F = f[A];
-    if (typeof F.type == "function" || !F.props || !F.props.children || j.indexOf(`${A}/>`) < 0 && j.indexOf(`${A} />`) < 0)
+    ns: l
+  }, E = r ? m(r, C) : O;
+  c && Object.keys(c).forEach((A) => {
+    const P = c[A];
+    if (typeof P.type == "function" || !P.props || !P.props.children || E.indexOf(`${A}/>`) < 0 && E.indexOf(`${A} />`) < 0)
       return;
-    function D() {
-      return T(M, null, F);
+    function I() {
+      return T(z, null, P);
     }
-    f[A] = T(D);
+    c[A] = T(I);
   });
-  const d = at(f || e, j, y, i, N, b), w = o !== void 0 ? o : i.defaultTransParent;
-  return w ? T(w, $, d) : d;
+  const d = pe(c || t, E, y, u, C, b), N = o !== void 0 ? o : u.defaultTransParent;
+  return N ? T(N, x, d) : d;
 }
-function lt(t) {
+function ce(e) {
   let {
-    children: e,
+    children: t,
     count: n,
     parent: o,
-    i18nKey: c,
+    i18nKey: p,
     context: s,
-    tOptions: l = {},
-    values: p,
-    defaults: m,
-    components: f,
-    ns: v,
-    i18n: E,
-    t: k,
+    tOptions: i = {},
+    values: a,
+    defaults: f,
+    components: c,
+    ns: g,
+    i18n: j,
+    t: w,
     shouldUnescape: b,
-    ...$
-  } = t;
+    ...x
+  } = e;
   const {
     i18n: y,
-    defaultNS: u
-  } = U(Z) || {}, i = E || y || I(), a = k || i && i.t.bind(i);
-  return it({
-    children: e,
+    defaultNS: m
+  } = J(G) || {}, u = j || y || V(), l = w || u && u.t.bind(u);
+  return ue({
+    children: t,
     count: n,
     parent: o,
-    i18nKey: c,
+    i18nKey: p,
     context: s,
-    tOptions: l,
-    values: p,
-    defaults: m,
-    components: f,
-    ns: v || a && a.ns || u || i && i.options && i.options.defaultNS,
-    i18n: i,
-    t: k,
+    tOptions: i,
+    values: a,
+    defaults: f,
+    components: c,
+    ns: g || l && l.ns || m || u && u.options && u.options.defaultNS,
+    i18n: u,
+    t: w,
     shouldUnescape: b,
-    ...$
+    ...x
   });
 }
-function yt({
+function fe(e) {
+  let t = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  return function(o) {
+    function p(i) {
+      let {
+        forwardedRef: a,
+        ...f
+      } = i;
+      const [c, g, j] = Z(e, {
+        ...f,
+        keyPrefix: t.keyPrefix
+      }), w = {
+        ...f,
+        t: c,
+        i18n: g,
+        tReady: j
+      };
+      return t.withRef && a ? w.ref = a : !t.withRef && a && (w.forwardedRef = a), T(o, w);
+    }
+    p.displayName = `withI18nextTranslation(${Y(o)})`, p.WrappedComponent = o;
+    const s = (i, a) => T(p, Object.assign({}, i, {
+      forwardedRef: a
+    }));
+    return t.withRef ? U(s) : p;
+  };
+}
+function me({
+  i18n: e,
   i18n_default_text: t,
-  values: e,
-  components: n,
-  options: o,
-  shouldUnescape: c
+  values: n,
+  components: o,
+  options: p,
+  shouldUnescape: s
 }) {
-  return /* @__PURE__ */ z(
-    lt,
+  return /* @__PURE__ */ W(
+    ce,
     {
       defaults: t,
-      values: e,
-      components: n,
-      tOptions: o,
-      shouldUnescape: c
+      i18n: e,
+      values: n,
+      components: o,
+      tOptions: p,
+      shouldUnescape: s
     }
   );
 }
+const be = fe()(me);
 export {
-  yt as default
+  be as default
 };

package/dist/hooks/index.js

@@ -5,7 +5,7 @@ import "react/jsx-runtime";
 import "../crc32-LCGpXEbE.js";
 import "../constants-C3Rdpvgf.js";
 import "../context-f4Bcf4Hs.js";
-import "../utils-6G1tiZlP.js";
+import "../useTranslation-DWHGHs02.js";
 import "../i18nInstance-D20fwFYr.js";
 export {
   l as useTranslations

package/dist/hooks/use-translations.js

@@ -1,91 +1,25 @@
-import { useContext as P, useState as E, useRef as N, useEffect as w } from "react";
-import { TranslationContext as F } from "../provider/translation-provider.js";
-import { c as j } from "../crc32-LCGpXEbE.js";
-import { I as v, R as z } from "../context-f4Bcf4Hs.js";
-import { w as R, h as A, l as C, a as L } from "../utils-6G1tiZlP.js";
-import { g as M, b as U } from "../i18nInstance-D20fwFYr.js";
+import { useContext as s } from "react";
+import { TranslationContext as u } from "../provider/translation-provider.js";
+import { c } from "../crc32-LCGpXEbE.js";
+import { u as m } from "../useTranslation-DWHGHs02.js";
 import "react/jsx-runtime";
 import "../constants-C3Rdpvgf.js";
-const $ = (a, t) => {
-  const u = N();
-  return w(() => {
-    u.current = a;
-  }, [a, t]), u.current;
-};
-function J(a) {
-  let t = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
-  const {
-    i18n: u
-  } = t, {
-    i18n: y,
-    defaultNS: h
-  } = P(v) || {}, e = u || y || U();
-  if (e && !e.reportNamespaces && (e.reportNamespaces = new z()), !e) {
-    R("You will need to pass in an i18next instance by using initReactI18next");
-    const r = (i, s) => typeof s == "string" ? s : s && typeof s == "object" && typeof s.defaultValue == "string" ? s.defaultValue : Array.isArray(i) ? i[i.length - 1] : i, o = [r, {}, !1];
-    return o.t = r, o.i18n = {}, o.ready = !1, o;
-  }
-  e.options.react && e.options.react.wait !== void 0 && R("It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.");
-  const f = {
-    ...M(),
-    ...e.options.react,
-    ...t
-  }, {
-    useSuspense: x,
-    keyPrefix: S
-  } = f;
-  let n = h || e.options && e.options.defaultNS;
-  n = typeof n == "string" ? [n] : n || ["translation"], e.reportNamespaces.addUsedNamespaces && e.reportNamespaces.addUsedNamespaces(n);
-  const l = (e.isInitialized || e.initializedStoreOnce) && n.every((r) => A(r, e, f));
-  function d() {
-    return e.getFixedT(t.lng || null, f.nsMode === "fallback" ? n : n[0], S);
-  }
-  const [b, p] = E(d);
-  let m = n.join();
-  t.lng && (m = `${t.lng}${m}`);
-  const I = $(m), c = N(!0);
-  w(() => {
-    const {
-      bindI18n: r,
-      bindI18nStore: o
-    } = f;
-    c.current = !0, !l && !x && (t.lng ? C(e, t.lng, n, () => {
-      c.current && p(d);
-    }) : L(e, n, () => {
-      c.current && p(d);
-    })), l && I && I !== m && c.current && p(d);
-    function i() {
-      c.current && p(d);
-    }
-    return r && e && e.on(r, i), o && e && e.store.on(o, i), () => {
-      c.current = !1, r && e && r.split(" ").forEach((s) => e.off(s, i)), o && e && o.split(" ").forEach((s) => e.store.off(s, i));
-    };
-  }, [e, m]);
-  const T = N(!0);
-  w(() => {
-    c.current && !T.current && p(d), T.current = !1;
-  }, [e, S]);
-  const g = [b, e, l];
-  if (g.t = b, g.i18n = e, g.ready = l, l || !l && !x)
-    return g;
-  throw new Promise((r) => {
-    t.lng ? C(e, t.lng, n, () => r()) : L(e, n, () => r());
-  });
-}
-function X() {
-  const a = P(F), { ready: t, t: u, i18n: y } = J(), h = (e, f = {}) => u(j.str(e).toString(), { defaultValue: e, ...f });
-  if (!a)
+import "../context-f4Bcf4Hs.js";
+import "../i18nInstance-D20fwFYr.js";
+function x() {
+  const t = s(u), { ready: n, t: o, i18n: a } = m(), e = (r, i = {}) => o(c.str(r).toString(), { defaultValue: r, ...i });
+  if (!t)
     throw new Error(
       "useTranslation has to be used within <TranslationContext.Provider>"
     );
   return {
-    ready: t,
-    localize: h,
-    instance: y,
-    switchLanguage: a.switchLanguage,
-    currentLang: a.currentLang
+    ready: n,
+    localize: e,
+    instance: a,
+    switchLanguage: t.switchLanguage,
+    currentLang: t.currentLang
   };
 }
 export {
-  X as default
+  x as default
 };

package/dist/index.js

@@ -10,7 +10,7 @@ import "./i18nInstance-D20fwFYr.js";
 import "./constants-C3Rdpvgf.js";
 import "react/jsx-runtime";
 import "react";
-import "./utils-6G1tiZlP.js";
+import "./useTranslation-DWHGHs02.js";
 import "./context-f4Bcf4Hs.js";
 export {
   z as Localize,

package/dist/useTranslation-DWHGHs02.js

@@ -0,0 +1,132 @@
+import { useContext as P, useState as $, useRef as w, useEffect as x } from "react";
+import { I as k, R as A } from "./context-f4Bcf4Hs.js";
+import { g as E, b as F } from "./i18nInstance-D20fwFYr.js";
+function j() {
+  if (console && console.warn) {
+    for (var n = arguments.length, e = new Array(n), a = 0; a < n; a++)
+      e[a] = arguments[a];
+    typeof e[0] == "string" && (e[0] = `react-i18next:: ${e[0]}`), console.warn(...e);
+  }
+}
+const T = {};
+function I() {
+  for (var n = arguments.length, e = new Array(n), a = 0; a < n; a++)
+    e[a] = arguments[a];
+  typeof e[0] == "string" && T[e[0]] || (typeof e[0] == "string" && (T[e[0]] = /* @__PURE__ */ new Date()), j(...e));
+}
+const z = (n, e) => () => {
+  if (n.isInitialized)
+    e();
+  else {
+    const a = () => {
+      setTimeout(() => {
+        n.off("initialized", a);
+      }, 0), e();
+    };
+    n.on("initialized", a);
+  }
+};
+function v(n, e, a) {
+  n.loadNamespaces(e, z(n, a));
+}
+function R(n, e, a, f) {
+  typeof a == "string" && (a = [a]), a.forEach((o) => {
+    n.options.ns.indexOf(o) < 0 && n.options.ns.push(o);
+  }), n.loadLanguages(e, z(n, f));
+}
+function U(n, e) {
+  let a = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+  const f = e.languages[0], o = e.options ? e.options.fallbackLng : !1, t = e.languages[e.languages.length - 1];
+  if (f.toLowerCase() === "cimode")
+    return !0;
+  const g = (y, b) => {
+    const r = e.services.backendConnector.state[`${y}|${b}`];
+    return r === -1 || r === 2;
+  };
+  return a.bindI18n && a.bindI18n.indexOf("languageChanging") > -1 && e.services.backendConnector.backend && e.isLanguageChangingTo && !g(e.isLanguageChangingTo, n) ? !1 : !!(e.hasResourceBundle(f, n) || !e.services.backendConnector.backend || e.options.resources && !e.options.partialBundledLanguages || g(f, n) && (!o || g(t, n)));
+}
+function B(n, e) {
+  let a = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+  return !e.languages || !e.languages.length ? (I("i18n.languages were undefined or empty", e.languages), !0) : e.options.ignoreJSONStructure !== void 0 ? e.hasLoadedNamespace(n, {
+    lng: a.lng,
+    precheck: (o, t) => {
+      if (a.bindI18n && a.bindI18n.indexOf("languageChanging") > -1 && o.services.backendConnector.backend && o.isLanguageChangingTo && !t(o.isLanguageChangingTo, n))
+        return !1;
+    }
+  }) : U(n, e, a);
+}
+function W(n) {
+  return n.displayName || n.name || (typeof n == "string" && n.length > 0 ? n : "Unknown");
+}
+const J = (n, e) => {
+  const a = w();
+  return x(() => {
+    a.current = n;
+  }, [n, e]), a.current;
+};
+function Y(n) {
+  let e = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
+  const {
+    i18n: a
+  } = e, {
+    i18n: f,
+    defaultNS: o
+  } = P(k) || {}, t = a || f || F();
+  if (t && !t.reportNamespaces && (t.reportNamespaces = new A()), !t) {
+    I("You will need to pass in an i18next instance by using initReactI18next");
+    const s = (c, i) => typeof i == "string" ? i : i && typeof i == "object" && typeof i.defaultValue == "string" ? i.defaultValue : Array.isArray(c) ? c[c.length - 1] : c, u = [s, {}, !1];
+    return u.t = s, u.i18n = {}, u.ready = !1, u;
+  }
+  t.options.react && t.options.react.wait !== void 0 && I("It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.");
+  const g = {
+    ...E(),
+    ...t.options.react,
+    ...e
+  }, {
+    useSuspense: y,
+    keyPrefix: b
+  } = g;
+  let r = o || t.options && t.options.defaultNS;
+  r = typeof r == "string" ? [r] : r || ["translation"], t.reportNamespaces.addUsedNamespaces && t.reportNamespaces.addUsedNamespaces(r);
+  const l = (t.isInitialized || t.initializedStoreOnce) && r.every((s) => B(s, t, g));
+  function p() {
+    return t.getFixedT(e.lng || null, g.nsMode === "fallback" ? r : r[0], b);
+  }
+  const [L, m] = $(p);
+  let h = r.join();
+  e.lng && (h = `${e.lng}${h}`);
+  const S = J(h), d = w(!0);
+  x(() => {
+    const {
+      bindI18n: s,
+      bindI18nStore: u
+    } = g;
+    d.current = !0, !l && !y && (e.lng ? R(t, e.lng, r, () => {
+      d.current && m(p);
+    }) : v(t, r, () => {
+      d.current && m(p);
+    })), l && S && S !== h && d.current && m(p);
+    function c() {
+      d.current && m(p);
+    }
+    return s && t && t.on(s, c), u && t && t.store.on(u, c), () => {
+      d.current = !1, s && t && s.split(" ").forEach((i) => t.off(i, c)), u && t && u.split(" ").forEach((i) => t.store.off(i, c));
+    };
+  }, [t, h]);
+  const C = w(!0);
+  x(() => {
+    d.current && !C.current && m(p), C.current = !1;
+  }, [t, b]);
+  const N = [L, t, l];
+  if (N.t = L, N.i18n = t, N.ready = l, l || !l && !y)
+    return N;
+  throw new Promise((s) => {
+    e.lng ? R(t, e.lng, r, () => s()) : v(t, r, () => s());
+  });
+}
+export {
+  j as a,
+  W as g,
+  Y as u,
+  I as w
+};

package/dist/utils/localize.d.ts

@@ -1,6 +1,4 @@
 /**
- * @deprecated use the `localize` function from the `useTranslations` hook
- *
  * @param {string} string
  * @param {Record<string, unknown>} values
  * @returns {string}

package/package.json

@@ -16,7 +16,7 @@
     }
   },
   "private": false,
-  "version": "1.2.1",
+  "version": "1.2.3",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build && cp ./src/scripts/deriv-extract-translations.cjs ./dist/deriv-extract-translations.cjs",

package/dist/components/localize.d.ts

@@ -1,9 +0,0 @@
-type TLocalizeProps = {
-    i18n_default_text: string;
-    values?: object;
-    components?: JSX.Element[];
-    options?: Record<string, unknown>;
-    shouldUnescape?: boolean;
-};
-export default function Localize({ i18n_default_text, values, components, options, shouldUnescape, }: TLocalizeProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/utils-6G1tiZlP.js

@@ -1,61 +0,0 @@
-function c() {
-  if (console && console.warn) {
-    for (var a = arguments.length, e = new Array(a), n = 0; n < a; n++)
-      e[n] = arguments[n];
-    typeof e[0] == "string" && (e[0] = `react-i18next:: ${e[0]}`), console.warn(...e);
-  }
-}
-const u = {};
-function f() {
-  for (var a = arguments.length, e = new Array(a), n = 0; n < a; n++)
-    e[n] = arguments[n];
-  typeof e[0] == "string" && u[e[0]] || (typeof e[0] == "string" && (u[e[0]] = /* @__PURE__ */ new Date()), c(...e));
-}
-const i = (a, e) => () => {
-  if (a.isInitialized)
-    e();
-  else {
-    const n = () => {
-      setTimeout(() => {
-        a.off("initialized", n);
-      }, 0), e();
-    };
-    a.on("initialized", n);
-  }
-};
-function h(a, e, n) {
-  a.loadNamespaces(e, i(a, n));
-}
-function m(a, e, n, o) {
-  typeof n == "string" && (n = [n]), n.forEach((t) => {
-    a.options.ns.indexOf(t) < 0 && a.options.ns.push(t);
-  }), a.loadLanguages(e, i(a, o));
-}
-function p(a, e) {
-  let n = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
-  const o = e.languages[0], t = e.options ? e.options.fallbackLng : !1, r = e.languages[e.languages.length - 1];
-  if (o.toLowerCase() === "cimode")
-    return !0;
-  const s = (l, d) => {
-    const g = e.services.backendConnector.state[`${l}|${d}`];
-    return g === -1 || g === 2;
-  };
-  return n.bindI18n && n.bindI18n.indexOf("languageChanging") > -1 && e.services.backendConnector.backend && e.isLanguageChangingTo && !s(e.isLanguageChangingTo, a) ? !1 : !!(e.hasResourceBundle(o, a) || !e.services.backendConnector.backend || e.options.resources && !e.options.partialBundledLanguages || s(o, a) && (!t || s(r, a)));
-}
-function b(a, e) {
-  let n = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
-  return !e.languages || !e.languages.length ? (f("i18n.languages were undefined or empty", e.languages), !0) : e.options.ignoreJSONStructure !== void 0 ? e.hasLoadedNamespace(a, {
-    lng: n.lng,
-    precheck: (t, r) => {
-      if (n.bindI18n && n.bindI18n.indexOf("languageChanging") > -1 && t.services.backendConnector.backend && t.isLanguageChangingTo && !r(t.isLanguageChangingTo, a))
-        return !1;
-    }
-  }) : p(a, e, n);
-}
-export {
-  h as a,
-  c as b,
-  b as h,
-  m as l,
-  f as w
-};