@refinitiv-ui/translate 5.2.0-next.0 → 5.2.0-next.1

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.2.0-next.1](https://git.sami.int.thomsonreuters.com/elf/refinitiv-ui/compare/@refinitiv-ui/translate@5.2.0-next.0...@refinitiv-ui/translate@5.2.0-next.1) (2021-09-20)
+
+**Note:** Version bump only for package @refinitiv-ui/translate
+
+
+
+
+
 # [5.2.0-next.0](https://git.sami.int.thomsonreuters.com/elf/refinitiv-ui/compare/@refinitiv-ui/translate@5.1.5-next.0...@refinitiv-ui/translate@5.2.0-next.0) (2021-09-16)
 
 

package/lib/translate.d.ts

@@ -1,3 +1,5 @@
+import { PartInfo, DirectiveResult } from 'lit/directive.js';
+import { AsyncDirective } from 'lit/async-directive.js';
 import { BasicElement } from '@refinitiv-ui/core';
 import { TranslateOptions, TranslateParams } from '@refinitiv-ui/i18n';
 declare const TranslatePropertyKey: unique symbol;
@@ -15,9 +17,14 @@ declare type DecoratorOptions = {
     mode?: 'directive' | 'promise';
 };
 declare type TranslateFunction = (prototype: BasicElement, name: PropertyKey) => void;
-declare type TranslateDirective = (key: string, options?: TranslateOptions, translateParams?: TranslateParams) => void;
+declare type TranslateDirective = (key: string, options?: TranslateOptions, translateParams?: TranslateParams) => DirectiveResult<typeof AsyncTranslateDirective>;
 declare type TranslatePromise = (key: string, options?: TranslateOptions, translateParams?: TranslateParams) => Promise<string>;
 declare type Translate = TranslateDirective | TranslatePromise;
+declare class AsyncTranslateDirective extends AsyncDirective {
+    private readonly partType;
+    constructor(partInfo: PartInfo);
+    render(scope: string, locale: string, key: string, options?: TranslateOptions, translateParams?: TranslateParams): symbol;
+}
 /**
  * Get locale of the element.
  * Locale is resolved following the algorithm:

package/lib/translate.js

@@ -1,47 +1,35 @@
-import { directive, NodePart, AttributePart, PropertyPart, isPrimitive } from 'lit-html';
+import { PartType } from 'lit/directive.js';
+import { AsyncDirective, directive } from 'lit/async-directive.js';
+import { unsafeHTML } from '@refinitiv-ui/core';
+import { noChange } from 'lit';
 import { LangAttributeObserver, t } from '@refinitiv-ui/i18n';
 import { Phrasebook } from '@refinitiv-ui/phrasebook';
 const TranslatePropertyKey = Symbol('ef-translate');
-// For each part, remember the value that was last rendered to the part
-const previousNodeValues = new WeakMap();
-const updatePart = (part, value) => {
-    // support unsafeHTML syntax
-    if (part instanceof NodePart) {
-        const previousValue = previousNodeValues.get(part);
-        if (previousValue !== undefined && isPrimitive(value) && value === previousValue.value && part.value === previousValue.fragment) {
-            return;
+class AsyncTranslateDirective extends AsyncDirective {
+    constructor(partInfo) {
+        super(partInfo);
+        this.partType = partInfo.type;
+        if (!(this.partType === PartType.CHILD || this.partType === PartType.ATTRIBUTE || this.partType === PartType.PROPERTY)) {
+            throw new Error('Element Framework Translate can only be used in content, attribute or property bindings');
         }
-        const template = document.createElement('template');
-        template.innerHTML = value; // innerHTML casts to string internally
-        const fragment = document.importNode(template.content, true);
-        previousNodeValues.set(part, { value, fragment });
-        part.setValue(fragment);
-        part.commit();
-        return;
     }
-    part.setValue(value);
-    part.commit();
-};
-const translateDirective = directive((scope, locale, key, options, translateParams) => (part) => {
-    /* istanbul ignore next */
-    if (!(part instanceof NodePart || part instanceof AttributePart || part instanceof PropertyPart)) {
-        throw new Error('Element Framework Translate can only be used in content, attribute or property bindings');
-    }
-    // TODO: support additional API to show some text while translations are loading
-    // it can be just an English translation, greyed div, loading mask etc.
-    Promise.resolve(t(scope, locale, key, options, translateParams))
-        .then(message => {
-        updatePart(part, message);
-    })
-        .catch(error => {
-        updatePart(part, key);
-        // the code may fail if polyfills are not available in IE11 or translate syntax is wrong
-        /* istanbul ignore next */
-        setTimeout(() => {
-            throw new Error(error);
+    render(scope, locale, key, options, translateParams) {
+        Promise.resolve(t(scope, locale, key, options, translateParams))
+            .then(message => {
+            this.setValue(this.partType === PartType.CHILD ? unsafeHTML(message) : message);
+        })
+            .catch(error => {
+            this.setValue(key);
+            // the code may fail if polyfills are not available in IE11 or translate syntax is wrong
+            /* istanbul ignore next */
+            setTimeout(() => {
+                throw new Error(error);
+            });
         });
-    });
-});
+        return noChange;
+    }
+}
+const translateDirective = directive(AsyncTranslateDirective);
 const translatePromise = (scope, locale, key, options, translateParams) => {
     return Promise.resolve(t(scope, locale, key, options, translateParams))
         .then(message => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/translate",
-  "version": "5.2.0-next.0",
+  "version": "5.2.0-next.1",
   "description": "i18n implementation for Element Framework components",
   "author": "Refinitiv",
   "license": "Apache-2.0",
@@ -23,16 +23,16 @@
     "test:watch": "npm run test -- --watch"
   },
   "dependencies": {
-    "@refinitiv-ui/core": "^5.1.0-next.0",
-    "@refinitiv-ui/i18n": "^5.1.5-next.1",
+    "@refinitiv-ui/core": "^5.1.0-next.1",
+    "@refinitiv-ui/i18n": "^5.1.5-next.2",
     "@refinitiv-ui/phrasebook": "^5.1.3-next.1",
-    "lit-html": "^1.4.1"
+    "lit": "^2.0.0-rc.4"
   },
   "devDependencies": {
-    "@refinitiv-ui/test-helpers": "^5.0.2-next.1"
+    "@refinitiv-ui/test-helpers": "^5.0.2-next.2"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2af1587b19b6397e123bb85ad793042cf0182d4a"
+  "gitHead": "1a106b6e43552d132ebff6e0bac71045a6de9a82"
 }