@refinitiv-ui/translate 5.2.5 → 5.4.0-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.3.0](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/translate@5.2.5...@refinitiv-ui/translate@5.3.0) (2022-01-12)
+
+
+### Features
+
+* upgrade `lit` to 2.1.1 ([#156](https://github.com/Refinitiv/refinitiv-ui/issues/156)) ([358ca28](https://github.com/Refinitiv/refinitiv-ui/commit/358ca282491075973f12895bddbac990b79b00e6))
+
+
+
+
+
 ## [5.2.5](https://github.com/Refinitiv/refinitiv-ui/compare/@refinitiv-ui/translate@5.2.4...@refinitiv-ui/translate@5.2.5) (2021-12-21)
 
 **Note:** Version bump only for package @refinitiv-ui/translate

package/README.md

@@ -31,7 +31,7 @@ import {
 } from '@refinitiv-ui/translate';
 
 // import default English language
-import '@refinitiv-ui/phrasebook/lib/locale/en/my-translate-element';
+import '@refinitiv-ui/phrasebook/locale/en/my-translate-element';
 
 @customElement('my-translate-element')
 export class MyTranslateElement extends BasicElement {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinitiv-ui/translate",
-  "version": "5.2.5",
+  "version": "5.4.0-alpha.0",
   "description": "i18n implementation for Element Framework components",
   "author": "Refinitiv",
   "license": "Apache-2.0",
@@ -14,7 +14,7 @@
   },
   "scripts": {
     "build": "tsc --sourceMap --declarationMap",
-    "build:prod": "tsc",
+    "build:prod": "echo \"No build:prod command found\"",
     "build:watch": "npm run build -- --watch --preserveWatchOutput",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
@@ -24,17 +24,19 @@
     "test:watch": "npm run test -- --watch"
   },
   "dependencies": {
-    "@refinitiv-ui/i18n": "^5.2.5",
-    "@refinitiv-ui/phrasebook": "^5.4.0",
-    "lit": "^2.0.0",
+    "lit": "~2.1.1",
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@refinitiv-ui/core": "^5.3.4",
-    "@refinitiv-ui/test-helpers": "^5.1.1"
+    "@refinitiv-ui/core": "^5.4.0",
+    "@refinitiv-ui/test-helpers": "^5.1.2"
+  },
+  "peerDependencies": {
+    "@refinitiv-ui/i18n": "^5.3.0-alpha.0",
+    "@refinitiv-ui/phrasebook": "^5.5.0-alpha.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ab885349431e89df4de68852371581f4cd64d9c1"
+  "gitHead": "de44f7c988b30eec26d37336eb9c6dc6ba54da64"
 }

package/lib/translate.d.ts

@@ -1,43 +0,0 @@
-import type { BasicElement } from '@refinitiv-ui/core';
-import { PartInfo, DirectiveResult } from 'lit/directive.js';
-import { AsyncDirective } from 'lit/async-directive.js';
-import { TranslateOptions, TranslateParams } from '@refinitiv-ui/i18n';
-declare const TranslatePropertyKey: unique symbol;
-declare type DecoratorOptions = {
-    /**
-     * The scope translation should subscribe to.
-     * If not defined, equal to element local name
-     */
-    scope?: string;
-    /**
-     * Decorator mode.
-     * `directive` - used in render function as LitHTML directive
-     * `promise` - can be used everywhere as a promise
-     */
-    mode?: 'directive' | 'promise';
-};
-declare type TranslateFunction = (prototype: BasicElement, name: PropertyKey) => 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:
- * `element.lang` -> `document.lang` -> `navigator.language`
- * @param element HTML element
- * @return element locale
- */
-declare const getLocale: (element: HTMLElement) => string;
-/**
- * Binds an element to translation keys
- * @param [options] decorator `options` or `scope`.
- * If not provided provided, `scope = element.localName` and `mode = 'directive'`
- * @returns translate directive
- */
-declare const translate: (options?: string | DecoratorOptions | undefined) => TranslateFunction;
-export { translate, TranslatePropertyKey, getLocale, Translate, TranslatePromise, TranslateDirective };

package/lib/translate.js

@@ -1,137 +0,0 @@
-import { PartType } from 'lit/directive.js';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { AsyncDirective, directive } from 'lit/async-directive.js';
-import { noChange } from 'lit';
-import { LangAttributeObserver, t } from '@refinitiv-ui/i18n';
-import { Phrasebook } from '@refinitiv-ui/phrasebook';
-const TranslatePropertyKey = Symbol('ef-translate');
-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');
-        }
-    }
-    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 => {
-        return message;
-    })
-        .catch(error => {
-        // 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 key;
-    });
-};
-/**
- * Get locale of the element.
- * Locale is resolved following the algorithm:
- * `element.lang` -> `document.lang` -> `navigator.language`
- * @param element HTML element
- * @return element locale
- */
-const getLocale = (element) => element.lang || LangAttributeObserver.documentLang || navigator.language;
-/**
- * Start observing translations.
- * This step is required when translations are loaded or the `lang` has been
- * after the element has been rendered
- * @param this Function scope. ELF Basic Element
- * @param scope Scope
- * @returns {void}
- */
-const observeTranslations = function (scope = this.localName) {
-    let locale = getLocale(this);
-    // Observe `lang` attribute changes on
-    // document.documentElement and element itself
-    LangAttributeObserver.observe(this, () => {
-        const newLocale = getLocale(this);
-        if (locale !== newLocale) {
-            locale = newLocale;
-            // this ensures that requestUpdate always comes through
-            // however, external applications still can detect that the change is coming for translations
-            // this is better than empty requestUpdate() as in that case in is not possible to detect source of update
-            this.requestUpdate(TranslatePropertyKey, {});
-        }
-    });
-    // Observe new translations for the scope
-    return Phrasebook.observe(scope, () => {
-        this.requestUpdate(TranslatePropertyKey, {});
-    });
-};
-/**
- * Disconnect translation listeners.
- * This step is required to remove all element references from LangAttributeObserver and Phrasebook
- * @param this Function scope. ELF Basic Element
- * @param key Observe key from the `observeTranslations` function
- * @returns {void}
- */
-const disconnectTranslations = function (key) {
-    LangAttributeObserver.disconnect(this);
-    Phrasebook.disconnect(key);
-};
-/**
- * Binds an element to translation keys
- * @param [options] decorator `options` or `scope`.
- * If not provided provided, `scope = element.localName` and `mode = 'directive'`
- * @returns translate directive
- */
-const translate = function (options) {
-    return (prototype, name) => {
-        const scope = options ? typeof options === 'string' ? options : options.scope : undefined;
-        const mode = options && typeof options !== 'string' ? options.mode : 'directive';
-        // Cannot use an element itself as a key.
-        // Element may have multiple translate directives with different scope
-        // Therefore we need a truly unique key
-        let key;
-        const connectedCallback = prototype.connectedCallback;
-        prototype.connectedCallback = function () {
-            connectedCallback.call(this);
-            key = observeTranslations.call(this, scope);
-        };
-        const disconnectedCallback = prototype.disconnectedCallback;
-        prototype.disconnectedCallback = function () {
-            disconnectedCallback.call(this);
-            disconnectTranslations.call(this, key);
-        };
-        const descriptor = mode === 'promise'
-            ? {
-                get() {
-                    return (key, options, translateParams) => {
-                        return translatePromise(scope || this.localName, getLocale(this), key, options, translateParams);
-                    };
-                }
-            } : {
-            get() {
-                return (key, options, translateParams) => {
-                    return translateDirective(scope || this.localName, getLocale(this), key, options, translateParams);
-                };
-            }
-        };
-        Object.defineProperty(prototype, name, Object.assign({
-            enumerable: false,
-            configurable: false
-        }, descriptor));
-    };
-};
-export { translate, TranslatePropertyKey, getLocale };