@appnest/lit-translate - npm Package Compare versions

Comparing version 1.1.4 to 1.1.5

cleanup.d.ts

@@ -1,2 +0,2 @@
-import { NodePart } from "lit-html";
+import { NodePart, AttributePart, BooleanAttributePart, EventPart, PropertyPart } from "lit-html";
 /** #################################################################################
@@ -15,3 +15,3 @@ ** The purpose of this module is to provide an API to clean up the node parts cache.
  */
-export declare function isConnected(part: NodePart): boolean;
+export declare function isConnected(part: NodePart | AttributePart | BooleanAttributePart | EventPart | PropertyPart): boolean;
 /**
@@ -18,0 +18,0 @@ * Removes the disconnected parts from the cache.

cleanup.js

@@ -0,1 +1,2 @@
+import { NodePart, AttributePart } from "lit-html";
 /** #################################################################################
@@ -15,3 +16,11 @@ ** The purpose of this module is to provide an API to clean up the node parts cache.
 export function isConnected(part) {
-    return part.startNode.isConnected;
+    if (part instanceof NodePart) {
+        return part.startNode.isConnected;
+    }
+    else if (part instanceof AttributePart) {
+        return part.committer.element.isConnected;
+    }
+    else {
+        return part.element.isConnected;
+    }
 }
@@ -18,0 +27,0 @@ /**

directive.d.ts

 import { NodePart } from "lit-html";
-import { Values, ValuesCallback } from "./model";
+import { LangChangedEvent, Values, ValuesCallback } from "./model";
 /**
- * Directive that makes translations more efficient.
+ * A lit directive that invokes the callback when the language changes.
  * @param key
@@ -9,2 +9,8 @@ * @param values
  */
-export declare const translate: (key: string, values?: Values | ValuesCallback | undefined, listen?: boolean) => (part: NodePart) => void;
+export declare const langChanged: (cb: (e?: LangChangedEvent | undefined) => any) => (part: NodePart) => void;
+/**
+ * A lit directive that updates the translation when the language changes.
+ * @param key
+ * @param values
+ */
+export declare const translate: (key: string, values?: Values | ValuesCallback | undefined) => (part: NodePart) => void;

directive.js

@@ -14,5 +14,4 @@ import { directive } from "lit-html";
     listenForLangChanged((e) => {
-        for (const [part, { key, values, listen }] of partCache) {
-            if (listen && isConnected(part)) {
-                handleTranslation(part, key, values);
+        for (const [part, cb] of partCache) {
+            if (isConnected(part) && updatePart(part, cb, e)) {
                 part.commit();
@@ -28,17 +27,18 @@ }
  * @param part
- * @param key
- * @param values
+ * @param cb
+ * @param e
  */
-function handleTranslation(part, key, values) {
-    // Translate the key and interpolate the values
-    const translation = get(key, values);
-    // Only set the value if the cache has changed
-    if (part.value === translation) {
-        return;
+function updatePart(part, cb, e) {
+    // Grab the new value
+    const newValue = cb(e);
+    // Only set the value if it has changed
+    if (part.value === newValue) {
+        return false;
     }
-    // Set the value of the new translation
-    part.setValue(translation);
+    // Set the new value
+    part.setValue(newValue);
+    return true;
 }
 /**
- * Directive that makes translations more efficient.
+ * A lit directive that invokes the callback when the language changes.
  * @param key
@@ -48,6 +48,12 @@ * @param values
  */
-export const translate = directive((key, values, listen = true) => (part) => {
-    partCache.set(part, { key, values, listen });
-    handleTranslation(part, key, values);
+export const langChanged = directive((cb) => (part) => {
+    partCache.set(part, cb);
+    updatePart(part, cb);
 });
+/**
+ * A lit directive that updates the translation when the language changes.
+ * @param key
+ * @param values
+ */
+export const translate = (key, values) => langChanged(() => get(key, values));
 //# sourceMappingURL=directive.js.map

model.d.ts

@@ -39,1 +39,2 @@ export declare type Value = object | string | number;
 export declare const CLEANUP_PARTS_MS: number;
+export declare type LangChangedDirectiveCallback = ((e?: LangChangedEvent) => any);

package.json

 {
 	"name": "@appnest/lit-translate",
-	"version": "1.1.4",
+	"version": "1.1.5",
 	"license": "MIT",
@@ -56,5 +56,5 @@ "module": "index.js",
 	"devDependencies": {
-		"@appnest/web-config": "0.2.1",
-		"lit-element": "^2.0.0-rc.3"
+		"@appnest/web-config": "0.2.6",
+		"lit-element": "^2.0.0-rc.5"
 	}
 }

README.md

@@ -8,2 +8,3 @@ # @appnest/lit-translate
 <a href="https://opensource.org/licenses/MIT"><img alt="MIT License" src="https://img.shields.io/badge/License-MIT-yellow.svg" height="20"></img></a>
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@appnest/lit-translate)
 
@@ -10,0 +11,0 @@ ## What is this?

No alert changes

Improved metrics

Total package byte prevSize

30456

increased by4.01%

Lines of code

378

increased by6.18%

Number of lines in readme file

206

increased by0.49%

No dependency changes