react-localization 2.0.1 → 2.0.3

package/README.md

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

@@ -199,7 +199,7 @@ L.prototype.formatString = (i, ...e) => {
       const l = s.slice(1, -1);
       let r = e[l];
       if (r == null) {
-        const u = e[0][l];
+        const u = e[0] ? e[0][l] : void 0;
         if (u !== void 0)
           r = u;
         else

package/dist/react-localization.umd.js

@@ -1 +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});
+(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("-"),n=t>=0?i.substring(0,t):i;return e[n]?n: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 n=0;n<i;n+=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(n=>{typeof this._props[this._defaultLanguage][n]=="string"&&this._defaultLanguageFirstLevelKeys.push(n)}),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 n=e[t].split(" ");for(let s=0;s<n.length;s+=1)if(!n[s].match(f)){if(!n[s].match(c)){let a=n[s].length;this._opts.pseudoMultipleLanguages&&(a=parseInt(a*1.4,10)),n[s]=L(a)}}e[t]=`[${n.join(" ")}]`}})}setLanguage(e){const t=p(e,this._props),n=Object.keys(this._props)[0];if(this._language=t,this._props[t]){for(let a=0;a<this._defaultLanguageFirstLevelKeys.length;a+=1)delete this[this._defaultLanguageFirstLevelKeys[a]];let s=Object.assign({},this._props[this._language]);Object.keys(s).forEach(a=>{this[a]=s[a]}),n!==this._language&&(s=this._props[n],this._fallbackValues(s,this))}}_fallbackValues(e,t){Object.keys(e).forEach(n=>{Object.prototype.hasOwnProperty.call(e,n)&&!t[n]&&t[n]!==""?(t[n]=e[n],this._opts.logsEnabled&&console.log(`🚧 👷 key '${n}' not found in localizedStrings for language ${this._language} 🚧`)):typeof t[n]!="string"&&this._fallbackValues(e[n],t[n])})}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 n=e||"";return typeof n=="string"&&(n=this.getString(e,null,!0)||n),n.split(c).filter(a=>!!a).map(a=>{if(a.match(c)){const r=a.slice(5,-1),l=this.getString(r);return l||(this._opts.logsEnabled&&console.log(`No Localization ref found for '${a}' in string '${e}'`),`$ref(id:${r})`)}return a}).join("").split(f).filter(a=>!!a).map(a=>{if(a.match(f)){const r=a.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 a}).join("")}getString(e,t,n=!1){try{let s=this._props[t||this._language];const a=e.split(".");for(let r=0;r<a.length;r+=1){if(s[a[r]]===void 0)throw Error(a[r]);s=s[a[r]]}return s}catch(s){!n&&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 n=(i||"").split(d).filter(s=>!!s).map((s,a)=>{if(s.match(d)){const r=s.slice(1,-1);let l=e[r];if(l==null){const g=e[0]?e[0][r]:void 0;if(g!==void 0)l=g;else return l}return u.isValidElement(l)?(t=!0,u.Children.toArray(l).map(g=>({...g,key:a.toString()}))):l}return s});return t?n:n.join("")},h});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-localization",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "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",
@@ -39,8 +39,8 @@
   },
   "homepage": "https://github.com/stefalda/react-localization#readme",
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.1.0",
@@ -57,5 +57,13 @@
   },
   "dependencies": {
     "localized-strings": "^1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
   }
 }