mi-intl 0.7.0 → 0.9.0

package/README.md

@@ -29,25 +29,7 @@ import { MiIntlProvider, MiIntlMessage, IntlConsumer } from 'mi-intl'
 
 // define tag for intl-provider
 define('mi-intl-provider', MiIntlProvider)
-
-// connects to MiIntlProvider using IntlConsumer
-define(
-  'mi-message',
-  class extends MiIntlMessage {
-    static get properties () {
-      return { label: {}, value: {} }
-    }
-
-    render() {
-      this.update()
-    }
-
-    update() {
-      // this.t() is provided by MiIntlMessage
-      this.renderRoot.textContent = this.t(this.label, { value: this.value })
-    }
-  }
-)
+define('mi-message', MiIntlMessage)
 
 // define lang selector
 define(

package/dist/cookie.js

@@ -1,13 +1,15 @@
 function cookieParse(cookieStr = "") {
-  const parts = cookieStr.split(/\s*;\s*/), cookies = {};
+  const parts = cookieStr.split(/\s*;\s*/), cookies = Object.create(null);
   for (const part of parts) {
     const [key, val] = part.split('=');
-    if (key) {
+    if (key && !Object.prototype.hasOwnProperty.call(Object.prototype, key)) {
       const value = decodeURIComponent(val);
       cookies[key] = value;
     }
   }
-  return cookies;
+  return {
+    ...cookies
+  };
 }
 
 const fieldContentRegExp = /^[\u0009\u0020-\u007e\u0080-\u00ff]+$/;

package/dist/intl-message.js

@@ -1,15 +1,39 @@
-import { MiElement } from 'mi-element';
+import { MiElement, escHtml } from 'mi-element';
 
 import { IntlConsumer } from './intl-consumer.js';
 
 class MiIntlMessage extends MiElement {
   #context;
+  static get properties() {
+    return {
+      label: {},
+      value: {},
+      unsafeHtml: {
+        type: Boolean,
+        initial: !1
+      }
+    };
+  }
   constructor() {
     super(), this.#context = new IntlConsumer(this);
   }
   t(label, value) {
     return this.#context.value.t(label, value);
   }
+  update() {
+    if ('string' == typeof this.value) try {
+      this.value = JSON.parse(this.value);
+    } catch {
+      this.value = {
+        value: this.value
+      };
+    }
+    if (this.unsafeHtml) {
+      const escValue = {};
+      for (const [key, val] of Object.entries(this.value || {})) escValue[key] = escHtml(val);
+      this.renderRoot.innerHTML = this.t(this.label, escValue);
+    } else this.renderRoot.textContent = this.t(this.label, this.value);
+  }
 }
 
 export { MiIntlMessage };

package/dist/intl-provider.js

@@ -46,13 +46,12 @@ class MiIntlProvider extends MiElement {
     this.i18n = new I18n(options), this.changeLanguage(options?.lng).catch(console.error);
   }
   _contextValue() {
-    const {t: t, lng: lng, getLanguages: getLanguages} = this.i18n ?? {
-      t: () => '',
+    const {lng: lng, getLanguages: getLanguages} = this.i18n ?? {
       lng: '',
       getLanguages: () => []
     };
     return {
-      t: t,
+      t: (label, values) => this.i18n?.t(label, values) ?? '',
       lng: lng,
       getLanguages: getLanguages,
       changeLanguage: this.changeLanguage.bind(this),
@@ -62,7 +61,15 @@ class MiIntlProvider extends MiElement {
   async changeLanguage(lng) {
     this.loading = !0, await (this.i18n?.changeLanguage(lng).finally(() => {
       this.requestUpdate();
-    })), await requestAnimationFrameP(), await requestAnimationFrameP(), this.loading = !1;
+    }));
+    for (let i = 0; i < 2; i++) await requestAnimationFrameP();
+    this.dispatchEvent(new CustomEvent('language-changed', {
+      detail: {
+        lng: lng
+      },
+      bubbles: !0,
+      composed: !0
+    })), this.loading = !1;
   }
   render() {
     const {version: version, lng: lng, defaultNs: defaultNs, localesPath: localesPath, useLabel: useLabel, debug: debug, supportedLngs: supportedLngs, ns: ns} = this;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mi-intl",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "i18n for mi-element",
   "keywords": [
     "i18n",
@@ -36,8 +36,9 @@
     "types"
   ],
   "dependencies": {
-    "intl-messageformat-tiny": "^1.1.0",
-    "mi-element": "0.7.0"
+    "intl-messageformat-tiny": "^1.2.0",
+    "mi-signal": "^0.9.0",
+    "mi-element": "0.9.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",

package/src/cookie.js

@@ -8,15 +8,15 @@
  */
 export function cookieParse(cookieStr = '') {
   const parts = cookieStr.split(/\s*;\s*/)
-  const cookies = {}
+  const cookies = Object.create(null)
   for (const part of parts) {
     const [key, val] = part.split('=')
-    if (key) {
+    if (key && !Object.prototype.hasOwnProperty.call(Object.prototype, key)) {
       const value = decodeURIComponent(val)
       cookies[key] = value
     }
   }
-  return cookies
+  return { ...cookies }
 }
 
 /**

package/src/intl-message.js

@@ -1,4 +1,4 @@
-import { MiElement } from 'mi-element'
+import { MiElement, escHtml } from 'mi-element'
 import { IntlConsumer } from './intl-consumer.js'
 
 /**
@@ -8,34 +8,54 @@ import { IntlConsumer } from './intl-consumer.js'
  * import { define } from 'mi-element'
  * import { MiIntlMessage } from 'mi-intl'
  *
- * define('mi-message',
- *   class extends MiIntlMessage {
- *     static get properties() {
- *       return { label: {}, value: {} }
- *     }
- *     update() {
- *       this.renderRoot.textContent = this.t(this.label, this.value)
- *     }
- *   }
- * )
+ * define('mi-message', MiIntlMessage)
+ * // then use <mi-message label="my.label" value='{ "count": 5 }'></mi-message> in your template
  * ```
  */
 export class MiIntlMessage extends MiElement {
   #context
 
+  static get properties() {
+    return {
+      label: {},
+      value: {},
+      unsafeHtml: { type: Boolean, initial: false }
+    }
+  }
+
   constructor() {
     super()
     this.#context = new IntlConsumer(this)
   }
 
+  /**
+   * @param {string} label
+   * @param {object} [value]
+   * @returns
+   */
   t(label, value) {
     return this.#context.value.t(label, value)
   }
 
-  /*
   update() {
-    // update will be called on every #context.value change
-    // use this.t() there or within a effect
+    // ensure value is an object for interpolation, if it's a string
+    // try to parse it as JSON otherwise use it as a value property
+    if (typeof this.value === 'string') {
+      try {
+        this.value = JSON.parse(this.value)
+      } catch {
+        this.value = { value: this.value }
+      }
+    }
+    if (this.unsafeHtml) {
+      // escape values for interpolation to prevent XSS
+      const escValue = {}
+      for (const [key, val] of Object.entries(this.value || {})) {
+        escValue[key] = escHtml(val)
+      }
+      this.renderRoot.innerHTML = this.t(this.label, escValue)
+    } else {
+      this.renderRoot.textContent = this.t(this.label, this.value)
+    }
   }
-  */
 }

package/src/intl-provider.js

@@ -48,8 +48,10 @@ export class MiIntlProvider extends MiElement {
    * @returns {IntlContext}
    */
   _contextValue() {
-    const { t, lng, getLanguages } = this.i18n ?? {
-      t: () => '',
+    const t = (label, values) => this.i18n?.t(label, values) ?? ''
+
+    const { lng, getLanguages } = this.i18n ?? {
+      t,
       lng: '',
       getLanguages: () => []
     }
@@ -71,9 +73,17 @@ export class MiIntlProvider extends MiElement {
     await this.i18n?.changeLanguage(lng).finally(() => {
       this.requestUpdate()
     })
-    // need to wait two animations frames until all updates have been propagated
-    await requestAnimationFrameP()
-    await requestAnimationFrameP()
+    // need to wait two animation frames until all updates have been propagated
+    for (let i = 0; i < 2; i++) {
+      await requestAnimationFrameP()
+    }
+    this.dispatchEvent(
+      new CustomEvent('language-changed', {
+        detail: { lng },
+        bubbles: true,
+        composed: true
+      })
+    )
     this.loading = false
   }
 

package/types/intl-message.d.ts

@@ -5,20 +5,27 @@
  * import { define } from 'mi-element'
  * import { MiIntlMessage } from 'mi-intl'
  *
- * define('mi-message',
- *   class extends MiIntlMessage {
- *     static get properties() {
- *       return { label: {}, value: {} }
- *     }
- *     update() {
- *       this.renderRoot.textContent = this.t(this.label, this.value)
- *     }
- *   }
- * )
+ * define('mi-message', MiIntlMessage)
+ * // then use <mi-message label="my.label" value='{ "count": 5 }'></mi-message> in your template
  * ```
  */
 export class MiIntlMessage extends MiElement {
-    t(label: any, value: any): any;
+    static get properties(): {
+        label: {};
+        value: {};
+        unsafeHtml: {
+            type: BooleanConstructor;
+            initial: boolean;
+        };
+    };
+    /**
+     * @param {string} label
+     * @param {object} [value]
+     * @returns
+     */
+    t(label: string, value?: object): any;
+    update(): void;
+    value: any;
     #private;
 }
 import { MiElement } from 'mi-element';