@shoelace-style/localize 1.1.2 → 1.1.6

package/README.md

@@ -206,13 +206,13 @@ import { localize, translate as t, formatDate as d, formatNumber as n } from '@s
 
 const template = html<MyElement>`
   <!-- Term -->
-  ${t('hello')}
+  ${x => t(x, 'hello')}
 
   <!-- Date -->
-  ${d('2021-09-15 14:00:00 ET'), { month: 'long', day: 'numeric', year: 'numeric' }}
+  ${x => d(x, '2021-09-15 14:00:00 ET'), { month: 'long', day: 'numeric', year: 'numeric' }}
 
   <!-- Currency -->
-  ${n(1000, { style: 'currency', currency: 'USD'})}
+  ${x => n(x, 1000, { style: 'currency', currency: 'USD'})}
 `;
 
 @customElement({
@@ -224,6 +224,8 @@ export class MyElement extends FASTElement {
 }
 ```
 
+**Note:** This directive requires a context to be passed as the first argument. This is required because of a limitation in FAST's rendering engine that causes inconsistencies when a directive is used as `${t('example')}` vs. `${x => t('example')}`.
+
 ### No Library (Advanced)
 
 To use this without a custom element library, you'll need to follow this pattern.

package/dist/fast.d.ts

@@ -1,6 +1,6 @@
-import type { CaptureType } from '@microsoft/fast-element';
+import type { CaptureType, ExecutionContext, FASTElement } from '@microsoft/fast-element';
 import type { FunctionParams, Translation } from './';
 export declare function localize(): (targetClass: any) => any;
-export declare function translate<K extends keyof Translation, TSource = any>(key: K, ...args: FunctionParams<Translation[K]>): (source: TSource) => string;
-export declare function formatDate<TSource = any>(date: Date | string, options?: Intl.DateTimeFormatOptions): CaptureType<TSource>;
-export declare function formatNumber<TSource = any>(number: number | string, options?: Intl.DateTimeFormatOptions): CaptureType<TSource>;
+export declare function translate<TSource, K extends keyof Translation>(context: ExecutionContext | FASTElement | HTMLElement, key: K, ...args: FunctionParams<Translation[K]>): CaptureType<TSource>;
+export declare function formatDate<TSource = any>(context: ExecutionContext | FASTElement | HTMLElement, date: Date | string, options?: Intl.DateTimeFormatOptions): CaptureType<TSource>;
+export declare function formatNumber<TSource = any>(context: ExecutionContext | FASTElement | HTMLElement, number: number | string, options?: Intl.DateTimeFormatOptions): CaptureType<TSource>;

package/dist/fast.js

@@ -40,18 +40,12 @@ function getLang(source) {
     }
     return lang;
 }
-export function translate(key, ...args) {
-    return (source) => {
-        return t(getLang(source), key, ...args);
-    };
+export function translate(context, key, ...args) {
+    return t(getLang(context), key, ...args);
 }
-export function formatDate(date, options) {
-    return (source) => {
-        return d(getLang(source), date, options);
-    };
+export function formatDate(context, date, options) {
+    return d(getLang(context), date, options);
 }
-export function formatNumber(number, options) {
-    return (source) => {
-        return n(getLang(source), number, options);
-    };
+export function formatNumber(context, number, options) {
+    return n(getLang(context), number, options);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoelace-style/localize",
-  "version": "1.1.2",
+  "version": "1.1.6",
   "description": "A micro library for localizing custom elements.",
   "main": "/dist/index.js",
   "module": "/dist/index.js",

package/src/fast.ts

@@ -1,5 +1,5 @@
 import { connectedElements, detectLanguage, translate as t, formatDate as d, formatNumber as n } from './';
-import type { CaptureType } from '@microsoft/fast-element';
+import type { CaptureType, ExecutionContext, FASTElement } from '@microsoft/fast-element';
 import type { FunctionParams, Translation } from './';
 
 /**
@@ -72,10 +72,12 @@ function getLang(source: any) {
  *
  * Formats a number using the element's current language.
  */
-export function translate<K extends keyof Translation, TSource = any>(key: K, ...args: FunctionParams<Translation[K]>) {
-  return (source: TSource): string => {
-    return t(getLang(source), key, ...args);
-  };
+export function translate<TSource, K extends keyof Translation>(
+  context: ExecutionContext | FASTElement | HTMLElement,
+  key: K,
+  ...args: FunctionParams<Translation[K]>
+): CaptureType<TSource> {
+  return t(getLang(context), key, ...args);
 }
 
 /**
@@ -84,12 +86,11 @@ export function translate<K extends keyof Translation, TSource = any>(key: K, ..
  * Formats a date using the element's current language.
  */
 export function formatDate<TSource = any>(
+  context: ExecutionContext | FASTElement | HTMLElement,
   date: Date | string,
   options?: Intl.DateTimeFormatOptions
 ): CaptureType<TSource> {
-  return (source: TSource): string => {
-    return d(getLang(source), date, options);
-  };
+  return d(getLang(context), date, options);
 }
 
 /**
@@ -98,10 +99,9 @@ export function formatDate<TSource = any>(
  * Formats a number using the element's current language.
  */
 export function formatNumber<TSource = any>(
+  context: ExecutionContext | FASTElement | HTMLElement,
   number: number | string,
   options?: Intl.DateTimeFormatOptions
 ): CaptureType<TSource> {
-  return (source: TSource): string => {
-    return n(getLang(source), number, options);
-  };
+  return n(getLang(context), number, options);
 }