react-localization - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

lib/LocalizedStrings.js

@@ -43,3 +43,3 @@ 'use strict';
 
-var placeholderRegex = /(\{\d+\})/;
+var placeholderRegex = /(\{[\d|\w]+\})/;
 var isReactComponent = function isReactComponent(value) {
@@ -142,3 +142,3 @@ return _typeof(value.$$typeof) === 'symbol';
 
-        //Load fallback values for missing translations 
+        //Load fallback values for missing translations
 
@@ -192,6 +192,8 @@ }, {
 
-        //Format the passed string replacing the numbered placeholders
-        //i.e. I'd like some {0} and {1}, or just {0}
+        //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:
-        //  strings.formatString(strings.question, strings.bread, strings.butter)
+        //eg. 1: strings.formatString(strings.question, strings.bread, strings.butter)
+        //eg. 2: strings.formatString(strings.question, { bread: strings.bread, butter: strings.butter })
 
@@ -209,6 +211,15 @@ }, {
                 if (textPart.match(placeholderRegex)) {
-                    var valueForPlaceholder = valuesForPlaceholders[textPart.slice(1, -1)];
-                    return isReactComponent(valueForPlaceholder) ? _react2.default.Children.toArray(valueForPlaceholder).map(function (component) {
-                        return _extends({}, component, { key: index.toString() });
-                    }) : valueForPlaceholder;
+                    var matchedKey = textPart.slice(1, -1),
+                        valueForPlaceholder = valuesForPlaceholders[matchedKey];
+
+                    if (valueForPlaceholder) {
+                        if (isReactComponent(valueForPlaceholder)) {
+                            return _react2.default.Children.toArray(valueForPlaceholder).map(function (component) {
+                                return _extends({}, component, { key: index.toString() });
+                            });
+                        }
+                        return valueForPlaceholder;
+                    } else {
+                        return valuesForPlaceholders[0][matchedKey];
+                    }
                 }
@@ -219,3 +230,3 @@ return textPart;
 
-        //Return a string with the passed key in a different language 
+        //Return a string with the passed key in a different language
 
@@ -222,0 +233,0 @@ }, {

package.json

 {
   "name": "react-localization",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Simple module to localize the React interface using the same syntax used in the ReactNativeLocalization module, use 'npm run build' before publishing",
@@ -5,0 +5,0 @@ "scripts": {

README.md

 # react-localization
-Simple module to localize the React interface using the same syntax used in the 
+Simple module to localize the React interface using the same syntax used in the
 [ReactNativeLocalization module](https://github.com/stefalda/ReactNativeLocalization/).
@@ -62,2 +62,5 @@
     iAmText: 'I am {0} text',
+    ...
+    january: 'January',
+    currentDate: 'The current date is {month} {day}, {year}!'
   }
@@ -67,7 +70,16 @@ ...
 
-  // you can also use React component as placeholder values! Useful when using links or customizing style
+  // React components can be used as placeholder values! Useful when using links or customizing style
   strings.formatString(strings.onlyForMembers, <a href="http://login.com">{strings.login}</a>)
   strings.formatString(strings.iAmText, <b>{strings.bold}</b>)
+
+  // Named tokens can also be used to give some extra context to the format strings
+  // You cannot mix tokens, something like formatString('{0}, {name}', 'Hello', {name: 'Bob'}) won't work
+  strings.formatString(strings.currentDate, {
+    month: strings.january,
+    day: 12,
+    year: 2018
+  })
 ```
 **Beware: do not define a string key as formatString!**
+
 * setContent(props) - to dynamically load another set of strings
@@ -88,2 +100,1 @@ * getAvailableLanguages() - to get an array of the languages passed in the constructor
 Feel free to contact me on [Twitter](https://twitter.com/talpaz) or [open an issue](https://github.com/stefalda/react-localization/issues/new).
-

spec/LocalizedStrings.spec.js

@@ -69,7 +69,7 @@ import React from 'react';
   });
-  
+
   it('Extract complex value from other language', function () {
     expect(strings.ratings.good).toEqual('buono');
   });
-  
+
   it('Get missing key from other language', function () {
@@ -134,2 +134,3 @@ expect(strings.missing).toEqual('missing value');
         helloThere: "Hello {0}! Are you sure {0} is your name?",
+        namedTokens: "The current date is {month} {day}, {year}!",
       },
@@ -157,3 +158,13 @@ fi: {
     });
+
+    it('Handles named tokens as part of the format string', () => {
+      const formatTokens = {
+        month: "January",
+        day: "12",
+        year: "2018"
+      };
+      expect(reactStrings.formatString(reactStrings.namedTokens, formatTokens))
+        .toEqual(["The current date is ", "January", " ", "12", ", ", "2018", "!"]);
+    })
   });
-});
+});

src/LocalizedStrings.js

@@ -21,3 +21,3 @@ 'use strict';
 
-const placeholderRegex = /(\{\d+\})/;
+const placeholderRegex = /(\{[\d|\w]+\})/;
 const isReactComponent = value => typeof value.$$typeof === 'symbol';
@@ -87,3 +87,3 @@
 
-    //Load fallback values for missing translations 
+    //Load fallback values for missing translations
     _fallbackValues(defaultStrings, strings) {
@@ -126,6 +126,8 @@ for (var key in defaultStrings) {
 
-    //Format the passed string replacing the numbered placeholders
-    //i.e. I'd like some {0} and {1}, or just {0}
+    //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:
-    //  strings.formatString(strings.question, strings.bread, strings.butter)
+    //eg. 1: strings.formatString(strings.question, strings.bread, strings.butter)
+    //eg. 2: strings.formatString(strings.question, { bread: strings.bread, butter: strings.butter })
     formatString(str, ...valuesForPlaceholders) {
@@ -137,6 +139,13 @@ return str
                 if (textPart.match(placeholderRegex)) {
-                    const valueForPlaceholder = valuesForPlaceholders[textPart.slice(1, -1)];
-                    return isReactComponent(valueForPlaceholder)
-                        ? React.Children.toArray(valueForPlaceholder).map(component => ({...component, key: index.toString()}))
-                        : valueForPlaceholder;
+                    const matchedKey = textPart.slice(1, -1),
+                          valueForPlaceholder = valuesForPlaceholders[matchedKey];
+
+                    if(valueForPlaceholder) {
+                      if(isReactComponent(valueForPlaceholder)) {
+                        return React.Children.toArray(valueForPlaceholder).map(component => ({...component, key: index.toString()}));
+                      }
+                      return valueForPlaceholder;
+                    } else {
+                      return valuesForPlaceholders[0][matchedKey];
+                    }
                 }
@@ -147,3 +156,3 @@ return textPart;
 
-    //Return a string with the passed key in a different language 
+    //Return a string with the passed key in a different language
     getString(key, language) {
@@ -157,2 +166,2 @@ try {
     }
-}
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

98

increased by12.64%

Worsened metrics

Total package byte prevSize

32351

decreased by-70.78%

Number of package files

12

decreased by-14.29%

Lines of code

620

decreased by-76.59%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes