npm - react-localization - Versions diffs - 1.0.19 → 2.0.2 - Mend

react-localization 1.0.19 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md +84 -43
package/dist/react-localization.es.js +216 -0
package/dist/react-localization.umd.js +1 -0
package/package.json +35 -20
package/lib/LocalizedStrings.d.ts +0 -72
package/lib/LocalizedStrings.js +0 -89

package/README.md CHANGED Viewed

@@ -1,15 +1,29 @@
 # react-localization
 Simple module to localize the React interface using the same syntax used in the
 [ReactNativeLocalization module](https://github.com/stefalda/ReactNativeLocalization/).
+## React 19 support
+Version 2.0 has been recreated to support React 19, removing babel and adding vite tooling.
+If you work with previous versions of react you can use version 1.x.
 ### Note about version 1.x
- This library has been refactored to use the newly created [localized-strings package](https://github.com/stefalda/localized-strings), now added as a dependency, so to unify the code and make it easier to mantain
- All the basic code is now in the localized-strings project but this React version add support for embedding JSX code in the formatted strings, by overriding the formatString method.
+This library has been refactored to use the newly created
+[localized-strings package](https://github.com/stefalda/localized-strings), now
+added as a dependency, so to unify the code and make it easier to mantain
+All the basic code is now in the localized-strings project but this React
+version add support for embedding JSX code in the formatted strings, by
+overriding the formatString method.
 ## How it works
-The library uses the current interface language, then it loads and displays the strings matching the current interface locale or the default language (the first one if a match is not found) if a specific localization can't be found.
+The library uses the current interface language, then it loads and displays the
+strings matching the current interface locale or the default language (the first
+one if a match is not found) if a specific localization can't be found.
 It's possible to force a language different from the interface one.
@@ -19,61 +33,71 @@ 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
+```js
 // ES6 module syntax
-import LocalizedStrings from 'react-localization';
+import LocalizedStrings from "react-localization";
 let strings = new LocalizedStrings({
-  en:{
-    how:"How do you want your egg today?",
-    boiledEgg:"Boiled egg",
-    softBoiledEgg:"Soft-boiled egg",
-    choice:"How to choose the egg"
+  en: {
+    how: "How do you want your egg today?",
+    boiledEgg: "Boiled egg",
+    softBoiledEgg: "Soft-boiled egg",
+    choice: "How to choose the egg",
   },
   it: {
-    how:"Come vuoi il tuo uovo oggi?",
-    boiledEgg:"Uovo sodo",
-    softBoiledEgg:"Uovo alla coque",
-    choice:"Come scegliere l'uovo"
-  }
+    how: "Come vuoi il tuo uovo oggi?",
+    boiledEgg: "Uovo sodo",
+    softBoiledEgg: "Uovo alla coque",
+    choice: "Come scegliere l'uovo",
+  },
 });
 ```
-Then use the `strings` object literal directly in the render method accessing the key of the localized string.
+Then use the `strings` object literal directly in the render method accessing
+the key of the localized string.
 ```js
 <Text style={styles.title}>
   {strings.how}
-</Text>
+</Text>;
 ```
-The first language is considered the default one, so if a translation is missing for the selected language, the default one is shown and a line is written to the log as a reminder.
+The first language is considered the default one, so if a translation is missing
+for the selected language, the default one is shown and a line is written to the
+log as a reminder.
 #### Update / Overwrite Locale
-You might have default localized in the build but then download the latest localization strings from a server. Use setContent to overwrite the whole object.
+You might have default localized in the build but then download the latest
+localization strings from a server. Use setContent to overwrite the whole
+object.
 **NOTE** that this will remove all other localizations if used.
 ```js
 strings.setContent({
-  en:{
-    how:"How do you want your egg todajsie?",
-    boiledEgg:"Boiled eggsie",
-    softBoiledEgg:"Soft-boiled egg",
-    choice:"How to choose the egg"
-  }
-})
+  en: {
+    how: "How do you want your egg todajsie?",
+    boiledEgg: "Boiled eggsie",
+    softBoiledEgg: "Soft-boiled egg",
+    choice: "How to choose the egg",
+  },
+});
 ```
 ## API
-* setLanguage(languageCode) - to force manually a particular language
-* getLanguage() - to get the current displayed language
-* getInterfaceLanguage() - to get the current device interface language
-* formatString() - formats the input string and returns a new string, replacing its placeholders with the other arguments strings
+- setLanguage(languageCode) - to force manually a particular language
+- getLanguage() - to get the current displayed language
+- getInterfaceLanguage() - to get the current device interface language
+- formatString() - formats the input string and returns a new string, replacing
+  its placeholders with the other arguments strings
 ```js
   en:{
     bread:"bread",
@@ -108,18 +132,28 @@ Typical usage is to render it in a JSX with `formatString` calls inlined:
 ```jsx
 <div>
- <SomeComponent food={strings.formatString(strings.question, strings.bread, "jam")} />
- <p>Usage with an object parameter: {
-  strings.formatString(strings.currentDate, { month: "February", day: 13, year: 2050 })
- }></p>
-</div>
+  <SomeComponent
+    food={strings.formatString(strings.question, strings.bread, "jam")}
+  />
+  <p>
+    Usage with an object parameter:{" "}
+    {strings.formatString(strings.currentDate, {
+      month: "February",
+      day: 13,
+      year: 2050,
+    })}>
+  </p>
+</div>;
 ```
 **Beware: do not define a string key as formatString!**
-* setContent(props) - to dynamically load another set of strings
-* getAvailableLanguages() - to get an array of the languages passed in the constructor
+- setContent(props) - to dynamically load another set of strings
+- getAvailableLanguages() - to get an array of the languages passed in the
+  constructor
 ## Examples
 To force a particular language use something like this:
 ```js
@@ -128,12 +162,17 @@ _onSetLanguageToItalian() {
   this.setState({});
 }
 ```
 ## Typescript support
-Because of the dynamically generated class properties, it's a little tricky to have the autocomplete functionality working.
+Because of the dynamically generated class properties, it's a little tricky to
+have the autocomplete functionality working.
 Anyway it's possible to gain the desired results by:
-1. defining an Interface that extends the LocalizedStringsMethods interface and has all the object string's keys
-2. defining that the LocalizedStrings instance implements that interface
+1. defining an Interface that extends the LocalizedStringsMethods interface and
+   has all the object string's keys
+2. defining that the LocalizedStrings instance implements that interface
 This is the suggested solution to work with Typescript:
@@ -154,7 +193,9 @@ this.strings = new LocalizedStrings({
                 time: "Time"
             }
         });
 ```
 ## Questions or suggestions?
-Feel free to contact me on [Twitter](https://twitter.com/talpaz) or [open an issue](https://github.com/stefalda/react-localization/issues/new).
+Feel free to contact me on [Twitter](https://twitter.com/talpaz) or
+[open an issue](https://github.com/stefalda/react-localization/issues/new).

package/dist/react-localization.es.js ADDED Viewed

@@ -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] ? e[0][l] : void 0;
+        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 ADDED Viewed

@@ -0,0 +1 @@

package/package.json CHANGED Viewed

@@ -1,11 +1,24 @@
 {
   "name": "react-localization",
-  "version": "1.0.19",
-  "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.2",
+  "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": "^18.0.0 || ^17.0.0 || ^16.0.0 || ^15.6.0"
+    "localized-strings": "^1.0.0"
   }
 }

package/lib/LocalizedStrings.d.ts DELETED Viewed

@@ -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 DELETED Viewed

@@ -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;