@forter/directives - npm Package Compare versions

Comparing version 3.0.7 to 3.1.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [3.1.0](https://github.com/forter/web-components/compare/@forter/directives@3.0.7...@forter/directives@3.1.0) (2022-06-28)
+
+
+### Features
+
+* **directives:** enhance translate to support literal template ([#1021](https://github.com/forter/web-components/issues/1021)) ([f84b712](https://github.com/forter/web-components/commit/f84b712))
+
+
+
+
+
 ## [3.0.7](https://github.com/forter/web-components/compare/@forter/directives@3.0.6...@forter/directives@3.0.7) (2022-04-27)
@@ -8,0 +19,0 @@

package.json

 {
   "name": "@forter/directives",
-  "version": "3.0.7",
+  "version": "3.1.0",
   "description": "lit-html directives for Forter Components",
@@ -47,3 +47,3 @@ "main": "index.js",
   },
-  "gitHead": "d3a92219e1e8d10a9f196254b5f35f09623ae6eb"
+  "gitHead": "011f71f414e87011363837d675ba0c7245adbbe6"
 }

src/translate/translate.js

@@ -8,7 +8,22 @@ import { get } from '../get';
  * @param  {String} key Key to look up in translation table
+ * @param  {Object} values object with keys and values to be injected to the translation template
+ * @example
+ * // language content
+ * { WELCOME: 'welcome {name}!' }
+ * // call translate with values
+ * translate('WELCOME', { name: 'Snufkin' })
+ * // returns "welcome Snufkin!"
  * @return {String}     Translated string. Defaults to key when lookup fails.
  */
-export const translate = key => {
+export function translate(key, values) {
   const currentLang = langsConfig.getLanguage() || 'en';
-  return get(langsConfig.langs[currentLang] || {}, key) || key;
-};
+  const translation = get(langsConfig.langs[currentLang] || {}, key);
+  if (translation && values && Object.keys(values).length) {
+    return translation.replace(/{\s*[\w]+\s*}/g, function(path) {
+      const injectKey = path.substring(1, path.length - 1);
+      return values[injectKey] || path;
+    });
+  }
+
+  return translation || key;
+}

src/translate/translate.spec.js

@@ -23,3 +23,3 @@ /* eslint import/no-extraneous-dependencies: 0 */
 
-  it('should translate properly WELCOME to welcome', async () => {
+  it('should return key if translation language wasn\'t found', async () => {
     withLangs(
@@ -38,2 +38,31 @@ {
   });
+
+  it('should translate properly when values are added', async () => {
+    withLangs(
+      {
+        en: { WELCOME: 'Welcome to the {place} {name}!' },
+      },
+      ()=> {}
+    );
+
+    const element = await fixture(html`
+      <div>${translate('WELCOME', { name: 'Ironman', place: 'team' })}</div>
+    `);
+
+    expect(element.innerText).to.have.string('Welcome to the team Ironman!');
+  });
+
+  it('should return translate as is if no tags found', async () => {
+    const tarnslationMap = { WELCOME: 'Welcome to the {place} {name}!' };
+    withLangs(
+      { en: tarnslationMap },
+      ()=> {}
+    );
+
+    const element = await fixture(html`
+      <div>${translate('WELCOME', {})}</div>
+    `);
+
+    expect(element.innerText).to.have.string(tarnslationMap.WELCOME);
+  });
 });

translate/translate.js

@@ -9,11 +9,27 @@ import { get } from '../get/get.js';
  * @param  {String} key Key to look up in translation table
+ * @param  {Object} values object with keys and values to be injected to the translation template
+ * @example
+ * // language content
+ * { WELCOME: 'welcome {name}!' }
+ * // call translate with values
+ * translate('WELCOME', { name: 'Snufkin' })
+ * // returns "welcome Snufkin!"
  * @return {String}     Translated string. Defaults to key when lookup fails.
  */
 
-const translate = key => {
+function translate(key, values) {
   const currentLang = langsConfig.getLanguage() || 'en';
-  return get(langsConfig.langs[currentLang] || {}, key) || key;
-};
+  const translation = get(langsConfig.langs[currentLang] || {}, key);
 
+  if (translation && values && Object.keys(values).length) {
+    return translation.replace(/{\s*[\w]+\s*}/g, function (path) {
+      const injectKey = path.substring(1, path.length - 1);
+      return values[injectKey] || path;
+    });
+  }
+
+  return translation || key;
+}
+
 export { translate };
 //# sourceMappingURL=translate.js.map

No alert changes

Improved metrics

Total package byte prevSize

53711

increased by6.4%

Lines of code

638

increased by8.69%

No dependency changes