react-localization 1.0.18 → 2.0.1

package/README.md

@@ -19,7 +19,7 @@ It's possible to force a language different from the interface one.
 
 ## Usage
 
-In the React class that you want to localize require the library and define the strings object passing to the constructor a simple object containing a language key (i.e. en, it, fr..) and then a list of key-value pairs with the needed localized strings.
+In the React class that you want to localize, require the library and define the strings object passing to the constructor a simple object containing a language key (i.e. en, it, fr..) and then a list of key-value pairs with the needed localized strings.
 
  ```js
 // ES6 module syntax

package/dist/react-localization.es.js

@@ -0,0 +1,216 @@
+import f from "react";
+function h() {
+  const i = "en-US";
+  if (typeof navigator > "u")
+    return i;
+  const e = navigator;
+  if (e) {
+    if (e.language)
+      return e.language;
+    if (e.languages && e.languages[0])
+      return e.languages[0];
+    if (e.userLanguage)
+      return e.userLanguage;
+    if (e.browserLanguage)
+      return e.browserLanguage;
+  }
+  return i;
+}
+function d(i, e) {
+  if (e[i]) return i;
+  const t = i.indexOf("-"), a = t >= 0 ? i.substring(0, t) : i;
+  return e[a] ? a : Object.keys(e)[0];
+}
+function _(i) {
+  const e = ["_interfaceLanguage", "_language", "_defaultLanguage", "_defaultLanguageFirstLevelKeys", "_props"];
+  i.forEach((t) => {
+    if (e.indexOf(t) !== -1)
+      throw new Error(`${t} cannot be used as a key. It is a reserved word.`);
+  });
+}
+function p(i) {
+  let e = "";
+  const t = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  for (let a = 0; a < i; a += 1) e += t.charAt(Math.floor(Math.random() * t.length));
+  return e;
+}
+const g = /(\{[\d|\w]+\})/, o = /(\$ref\{[\w|.]+\})/;
+class L {
+  /**
+   * Constructor used to provide the strings objects in various language and the optional callback to get
+   * the interface language
+   * @param {*} props - the strings object
+   * @param {Function} options.customLanguageInterface - the optional method to use to get the InterfaceLanguage
+   * @param {Boolean} options.pseudo - convert all strings to pseudo, helpful when implementing
+   * @param {Boolean} options.pseudoMultipleLanguages - add 40% to pseudo, helps with translations in the future
+   * @param {Boolean} options.logsEnabled - Enable/Disable console.log outputs (default=true)
+   */
+  constructor(e, t) {
+    typeof t == "function" && (t = {
+      customLanguageInterface: t
+    }), this._opts = Object.assign({}, {
+      customLanguageInterface: h,
+      pseudo: !1,
+      pseudoMultipleLanguages: !1,
+      logsEnabled: !0
+    }, t), this._interfaceLanguage = this._opts.customLanguageInterface(), this._language = this._interfaceLanguage, this.setContent(e);
+  }
+  /**
+   * Set the strings objects based on the parameter passed in the constructor
+   * @param {*} props
+   */
+  setContent(e) {
+    const [t] = Object.keys(e);
+    this._defaultLanguage = t, this._defaultLanguageFirstLevelKeys = [], this._props = e, _(Object.keys(e[this._defaultLanguage])), Object.keys(this._props[this._defaultLanguage]).forEach((a) => {
+      typeof this._props[this._defaultLanguage][a] == "string" && this._defaultLanguageFirstLevelKeys.push(a);
+    }), this.setLanguage(this._interfaceLanguage), this._opts.pseudo && this._pseudoAllValues(this._props);
+  }
+  /**
+   * Replace all strings to pseudo value
+   * @param {Object} obj - Loopable object
+   */
+  _pseudoAllValues(e) {
+    Object.keys(e).forEach((t) => {
+      if (typeof e[t] == "object")
+        this._pseudoAllValues(e[t]);
+      else if (typeof e[t] == "string") {
+        if (e[t].indexOf("[") === 0 && e[t].lastIndexOf("]") === e[t].length - 1)
+          return;
+        const a = e[t].split(" ");
+        for (let s = 0; s < a.length; s += 1)
+          if (!a[s].match(g)) {
+            if (!a[s].match(o)) {
+              let n = a[s].length;
+              this._opts.pseudoMultipleLanguages && (n = parseInt(n * 1.4, 10)), a[s] = p(n);
+            }
+          }
+        e[t] = `[${a.join(" ")}]`;
+      }
+    });
+  }
+  /**
+   * Can be used from ouside the class to force a particular language
+   * indipendently from the interface one
+   * @param {*} language
+   */
+  setLanguage(e) {
+    const t = d(e, this._props), a = Object.keys(this._props)[0];
+    if (this._language = t, this._props[t]) {
+      for (let n = 0; n < this._defaultLanguageFirstLevelKeys.length; n += 1)
+        delete this[this._defaultLanguageFirstLevelKeys[n]];
+      let s = Object.assign({}, this._props[this._language]);
+      Object.keys(s).forEach((n) => {
+        this[n] = s[n];
+      }), a !== this._language && (s = this._props[a], this._fallbackValues(s, this));
+    }
+  }
+  /**
+   * Load fallback values for missing translations
+   * @param {*} defaultStrings
+   * @param {*} strings
+   */
+  _fallbackValues(e, t) {
+    Object.keys(e).forEach((a) => {
+      Object.prototype.hasOwnProperty.call(e, a) && !t[a] && t[a] !== "" ? (t[a] = e[a], this._opts.logsEnabled && console.log(`🚧 👷 key '${a}' not found in localizedStrings for language ${this._language} 🚧`)) : typeof t[a] != "string" && this._fallbackValues(e[a], t[a]);
+    });
+  }
+  /**
+   * The current language displayed (could differ from the interface language
+   * if it has been forced manually and a matching translation has been found)
+   */
+  getLanguage() {
+    return this._language;
+  }
+  /**
+   * The current interface language (could differ from the language displayed)
+   */
+  getInterfaceLanguage() {
+    return this._interfaceLanguage;
+  }
+  /**
+   * Return an array containing the available languages passed as props in the constructor
+   */
+  getAvailableLanguages() {
+    return this._availableLanguages || (this._availableLanguages = [], Object.keys(this._props).forEach((e) => {
+      this._availableLanguages.push(e);
+    })), this._availableLanguages;
+  }
+  // Format the passed string replacing the numbered or tokenized placeholders
+  // eg. 1: I'd like some {0} and {1}, or just {0}
+  // eg. 2: I'd like some {bread} and {butter}, or just {bread}
+  // eg. 3: I'd like some $ref{bread} and $ref{butter}, or just $ref{bread}
+  // Use example:
+  // eg. 1: strings.formatString(strings.question, strings.bread, strings.butter)
+  // eg. 2: strings.formatString(strings.question, { bread: strings.bread, butter: strings.butter })
+  // eg. 3: strings.formatString(strings.question)
+  formatString(e, ...t) {
+    let a = e || "";
+    return typeof a == "string" && (a = this.getString(e, null, !0) || a), a.split(o).filter((n) => !!n).map((n) => {
+      if (n.match(o)) {
+        const l = n.slice(5, -1), r = this.getString(l);
+        return r || (this._opts.logsEnabled && console.log(`No Localization ref found for '${n}' in string '${e}'`), `$ref(id:${l})`);
+      }
+      return n;
+    }).join("").split(g).filter((n) => !!n).map((n) => {
+      if (n.match(g)) {
+        const l = n.slice(1, -1);
+        let r = t[l];
+        if (r === void 0) {
+          const u = t[0][l];
+          if (u !== void 0)
+            r = u;
+          else
+            return r;
+        }
+        return r;
+      }
+      return n;
+    }).join("");
+  }
+  // Return a string with the passed key in a different language or defalt if not set
+  // We allow deep . notation for finding strings
+  getString(e, t, a = !1) {
+    try {
+      let s = this._props[t || this._language];
+      const n = e.split(".");
+      for (let l = 0; l < n.length; l += 1) {
+        if (s[n[l]] === void 0)
+          throw Error(n[l]);
+        s = s[n[l]];
+      }
+      return s;
+    } catch (s) {
+      !a && this._opts.logsEnabled && console.log(`No localization found for key '${e}' and language '${t}', failed on ${s.message}`);
+    }
+    return null;
+  }
+  /**
+   * The current props (locale object)
+   */
+  getContent() {
+    return this._props;
+  }
+}
+const c = /(\{[\d|\w]+\})/;
+L.prototype.formatString = (i, ...e) => {
+  let t = !1;
+  const a = (i || "").split(c).filter((s) => !!s).map((s, n) => {
+    if (s.match(c)) {
+      const l = s.slice(1, -1);
+      let r = e[l];
+      if (r == null) {
+        const u = e[0][l];
+        if (u !== void 0)
+          r = u;
+        else
+          return r;
+      }
+      return f.isValidElement(r) ? (t = !0, f.Children.toArray(r).map((u) => ({ ...u, key: n.toString() }))) : r;
+    }
+    return s;
+  });
+  return t ? a : a.join("");
+};
+export {
+  L as default
+};

package/dist/react-localization.umd.js

@@ -0,0 +1 @@
+(function(u,o){typeof exports=="object"&&typeof module<"u"?module.exports=o(require("react")):typeof define=="function"&&define.amd?define(["react"],o):(u=typeof globalThis<"u"?globalThis:u||self,u.ReactLocalization=o(u.React))})(this,function(u){"use strict";function o(){const i="en-US";if(typeof navigator>"u")return i;const e=navigator;if(e){if(e.language)return e.language;if(e.languages&&e.languages[0])return e.languages[0];if(e.userLanguage)return e.userLanguage;if(e.browserLanguage)return e.browserLanguage}return i}function p(i,e){if(e[i])return i;const t=i.indexOf("-"),a=t>=0?i.substring(0,t):i;return e[a]?a:Object.keys(e)[0]}function _(i){const e=["_interfaceLanguage","_language","_defaultLanguage","_defaultLanguageFirstLevelKeys","_props"];i.forEach(t=>{if(e.indexOf(t)!==-1)throw new Error(`${t} cannot be used as a key. It is a reserved word.`)})}function L(i){let e="";const t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for(let a=0;a<i;a+=1)e+=t.charAt(Math.floor(Math.random()*t.length));return e}const f=/(\{[\d|\w]+\})/,c=/(\$ref\{[\w|.]+\})/;class h{constructor(e,t){typeof t=="function"&&(t={customLanguageInterface:t}),this._opts=Object.assign({},{customLanguageInterface:o,pseudo:!1,pseudoMultipleLanguages:!1,logsEnabled:!0},t),this._interfaceLanguage=this._opts.customLanguageInterface(),this._language=this._interfaceLanguage,this.setContent(e)}setContent(e){const[t]=Object.keys(e);this._defaultLanguage=t,this._defaultLanguageFirstLevelKeys=[],this._props=e,_(Object.keys(e[this._defaultLanguage])),Object.keys(this._props[this._defaultLanguage]).forEach(a=>{typeof this._props[this._defaultLanguage][a]=="string"&&this._defaultLanguageFirstLevelKeys.push(a)}),this.setLanguage(this._interfaceLanguage),this._opts.pseudo&&this._pseudoAllValues(this._props)}_pseudoAllValues(e){Object.keys(e).forEach(t=>{if(typeof e[t]=="object")this._pseudoAllValues(e[t]);else if(typeof e[t]=="string"){if(e[t].indexOf("[")===0&&e[t].lastIndexOf("]")===e[t].length-1)return;const a=e[t].split(" ");for(let s=0;s<a.length;s+=1)if(!a[s].match(f)){if(!a[s].match(c)){let n=a[s].length;this._opts.pseudoMultipleLanguages&&(n=parseInt(n*1.4,10)),a[s]=L(n)}}e[t]=`[${a.join(" ")}]`}})}setLanguage(e){const t=p(e,this._props),a=Object.keys(this._props)[0];if(this._language=t,this._props[t]){for(let n=0;n<this._defaultLanguageFirstLevelKeys.length;n+=1)delete this[this._defaultLanguageFirstLevelKeys[n]];let s=Object.assign({},this._props[this._language]);Object.keys(s).forEach(n=>{this[n]=s[n]}),a!==this._language&&(s=this._props[a],this._fallbackValues(s,this))}}_fallbackValues(e,t){Object.keys(e).forEach(a=>{Object.prototype.hasOwnProperty.call(e,a)&&!t[a]&&t[a]!==""?(t[a]=e[a],this._opts.logsEnabled&&console.log(`🚧 👷 key '${a}' not found in localizedStrings for language ${this._language} 🚧`)):typeof t[a]!="string"&&this._fallbackValues(e[a],t[a])})}getLanguage(){return this._language}getInterfaceLanguage(){return this._interfaceLanguage}getAvailableLanguages(){return this._availableLanguages||(this._availableLanguages=[],Object.keys(this._props).forEach(e=>{this._availableLanguages.push(e)})),this._availableLanguages}formatString(e,...t){let a=e||"";return typeof a=="string"&&(a=this.getString(e,null,!0)||a),a.split(c).filter(n=>!!n).map(n=>{if(n.match(c)){const r=n.slice(5,-1),l=this.getString(r);return l||(this._opts.logsEnabled&&console.log(`No Localization ref found for '${n}' in string '${e}'`),`$ref(id:${r})`)}return n}).join("").split(f).filter(n=>!!n).map(n=>{if(n.match(f)){const r=n.slice(1,-1);let l=t[r];if(l===void 0){const g=t[0][r];if(g!==void 0)l=g;else return l}return l}return n}).join("")}getString(e,t,a=!1){try{let s=this._props[t||this._language];const n=e.split(".");for(let r=0;r<n.length;r+=1){if(s[n[r]]===void 0)throw Error(n[r]);s=s[n[r]]}return s}catch(s){!a&&this._opts.logsEnabled&&console.log(`No localization found for key '${e}' and language '${t}', failed on ${s.message}`)}return null}getContent(){return this._props}}const d=/(\{[\d|\w]+\})/;return h.prototype.formatString=(i,...e)=>{let t=!1;const a=(i||"").split(d).filter(s=>!!s).map((s,n)=>{if(s.match(d)){const r=s.slice(1,-1);let l=e[r];if(l==null){const g=e[0][r];if(g!==void 0)l=g;else return l}return u.isValidElement(l)?(t=!0,u.Children.toArray(l).map(g=>({...g,key:n.toString()}))):l}return s});return t?a:a.join("")},h});

package/package.json

@@ -1,11 +1,24 @@
 {
   "name": "react-localization",
-  "version": "1.0.18",
-  "description": "Simple module to localize the React interface using the same syntax used in the ReactNativeLocalization module, use 'npm run build' before publishing",
+  "version": "2.0.1",
+  "description": "Simple module to localize the React interface using the same syntax used in the ReactNativeLocalization module",
+  "type": "module",
+  "main": "./dist/react-localization.umd.js",
+  "module": "./dist/react-localization.es.js",
+  "types": "./dist/LocalizedStrings.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/react-localization.es.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "babel-version": "babel --version",
-    "test": "jasmine",
-    "build": "babel src --out-dir lib"
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "test": "vitest",
+    "prepare": "npm run build"
   },
   "repository": {
     "type": "git",
@@ -17,30 +30,32 @@
     "localization",
     "internationalization",
     "javascript",
-    "typescript",
-    "react",
-    "react-component"
+    "typescript"
   ],
-  "main": "./lib/LocalizedStrings.js",
-  "types": "./lib/LocalizedStrings.d.ts",
   "author": "Stefano Falda <stefano.falda@gmail.com> (http://www.babisoft.com)",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/stefalda/react-localization/issues"
   },
   "homepage": "https://github.com/stefalda/react-localization#readme",
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
   "devDependencies": {
-    "babel-cli": "^6.24.1",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-2": "^6.24.1",
-    "jasmine": "^2.7.0",
-    "react": "^15.6.0"
+    "@testing-library/react": "^16.1.0",
+    "@types/node": "^22.10.5",
+    "@types/react": "^19.0.4",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.7",
+    "vitest": "^2.1.8",
+    "jsdom": "^26.0.0"
   },
   "dependencies": {
-    "localized-strings": "^0.2.0"
-  },
-  "peerDependencies": {
-    "react": "^17.0.0 || ^16.0.0 || ^15.6.0"
+    "localized-strings": "^1.0.0"
   }
 }

package/lib/LocalizedStrings.d.ts

@@ -1,72 +0,0 @@
-declare module 'react-localization' {
-    type Formatted = number | string | JSX.Element;
-    type FormatObject<U extends Formatted> = { [key: string]: U };
-
-    export interface GlobalStrings<T> {
-        [language: string]: T;
-    }
-
-    export interface LocalizedStringsMethods {
-        /**
-         * Can be used from ouside the class to force a particular language
-         * independently from the interface one
-         * @param language 
-         */
-        setLanguage(language: string): void;
-
-        /**
-         *  The current language displayed (could differ from the interface language
-         *  if it has been forced manually and a matching translation has been found)
-         */
-        getLanguage(): string;
-
-        /**
-         * The current interface language (could differ from the language displayed)
-         */
-        getInterfaceLanguage(): string;
-
-        /**
-         * Format the passed string replacing the numbered placeholders
-         * i.e. I'd like some {0} and {1}, or just {0}
-         * Use example:
-         *   strings.formatString(strings.question, strings.bread, strings.butter)
-         */
-        formatString<T extends Formatted>(str: string, ...values: Array<T | FormatObject<T>>): Array<string | T> | string;
-
-        /**
-         * Return an array containing the available languages passed as props in the constructor
-         */
-        getAvailableLanguages(): string[];
-
-        /**
-         * Return a string with the passed key in a different language
-         * @param key 
-         * @param language 
-         */
-        getString(key: string, language?: string, omitWarning?: boolean): string;
-
-        /**
-         * Replace the NamedLocalization object without reinstantiating the object
-         * @param props 
-         */
-        setContent(props: any): void;
-    }
-
-    export type LocalizedStrings<T> = LocalizedStringsMethods & T;
-
-    type GetInterfaceLanguageCallback = () => string;
-
-    interface Options {
-        customLanguageInterface?: GetInterfaceLanguageCallback;
-        logsEnabled?: boolean;
-        pseudo?: boolean;
-        pseudoMultipleLanguages?: boolean;
-    }
-
-    interface LocalizedStringsFactory {
-        new <T>(props: GlobalStrings<T>, options?: Options): LocalizedStrings<T>;
-    }
-
-    var LocalizedStrings: LocalizedStringsFactory;
-    export default LocalizedStrings;
-}

package/lib/LocalizedStrings.js

@@ -1,89 +0,0 @@
-'use strict';
-/**
- * Simple module to localize the React interface using the same syntax
- * used in the ReactNativeLocalization module
- * (https://github.com/stefalda/ReactNativeLocalization)
- *
- * Originally developed by Stefano Falda (stefano.falda@gmail.com)
- *
- * It uses a call to the Navigator/Browser object to get the current interface language,
- * then display the correct language strings or the default language (the first
- * one if a match is not found).
- *
- * This library has been refactored to use the newly created localized-strings package so to
- * unify the code and make it easier to mantain
- *
- * How to use:
- * Check the instructions at:
- * https://github.com/stefalda/react-localization
- */
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _localizedStrings = require('localized-strings');
-
-var _localizedStrings2 = _interopRequireDefault(_localizedStrings);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var placeholderRegex = /(\{[\d|\w]+\})/;
-
-/**
- * Format the passed string replacing the numbered or tokenized placeholders
- * eg. 1: I'd like some {0} and {1}, or just {0}
- * eg. 2: I'd like some {bread} and {butter}, or just {bread}
- * Use example:
- * eg. 1: strings.formatString(strings.question, strings.bread, strings.butter)
- * eg. 2: strings.formatString(strings.question, { bread: strings.bread, butter: strings.butter }
- *
- * THIS METHOD OVERRIDE the one of the parent class by adding support for JSX code
-*/
-_localizedStrings2.default.prototype.formatString = function (str) {
-  for (var _len = arguments.length, valuesForPlaceholders = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    valuesForPlaceholders[_key - 1] = arguments[_key];
-  }
-
-  var hasObject = false;
-  var res = (str || '').split(placeholderRegex).filter(function (textPart) {
-    return !!textPart;
-  }).map(function (textPart, index) {
-    if (textPart.match(placeholderRegex)) {
-      var matchedKey = textPart.slice(1, -1);
-      var valueForPlaceholder = valuesForPlaceholders[matchedKey];
-
-      // If no value found, check if working with an object instead
-      if (valueForPlaceholder == undefined) {
-        var valueFromObjectPlaceholder = valuesForPlaceholders[0][matchedKey];
-        if (valueFromObjectPlaceholder !== undefined) {
-          valueForPlaceholder = valueFromObjectPlaceholder;
-        } else {
-          // If value still isn't found, then it must have been undefined/null
-          return valueForPlaceholder;
-        }
-      }
-
-      if (_react2.default.isValidElement(valueForPlaceholder)) {
-        hasObject = true;
-        return _react2.default.Children.toArray(valueForPlaceholder).map(function (component) {
-          return _extends({}, component, { key: index.toString() });
-        });
-      }
-
-      return valueForPlaceholder;
-    }
-    return textPart;
-  });
-  // If the results contains a object return an array otherwise return a string
-  if (hasObject) return res;
-  return res.join('');
-};
-
-exports.default = _localizedStrings2.default;