be-intl 0.0.0 → 0.0.1

package/README.md

@@ -1 +1,43 @@
-# be-intl
+# be-intl
+
+Format numbers, dates automatically and semantically.
+
+[![Playwright Tests](https://github.com/bahrus/be-intl/actions/workflows/CI.yml/badge.svg?branch=baseline)](https://github.com/bahrus/be-intl/actions/workflows/CI.yml)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/be-intl?style=for-the-badge)](https://bundlephobia.com/result?p=be-intl)
+<img src="http://img.badgesize.io/https://cdn.jsdelivr.net/npm/be-intl?compression=gzip">
+[![NPM version](https://badge.fury.io/js/be-intl.png)](http://badge.fury.io/js/be-intl)
+
+```html
+<data value=123456.789 lang="de-DE" be-intl='{ "style": "currency", "currency": "EUR" }'></data>
+```
+
+emits
+
+```html
+<data value=123456.789 lang="de-DE" be-intl='{ "style": "currency", "currency": "EUR" }'>123.456,79 €</data>
+```
+
+## Viewing Locally
+
+1.  Install git.
+2.  Fork/clone this repo.
+3.  Install node.
+4.  Open command window to folder where you cloned this repo.
+5.  > npm install
+6.  > npm run serve
+7.  Open http://localhost:3030/demo in a modern browser.
+
+## Importing in ES Modules:
+
+```JavaScript
+import 'be-intl/be-intl.js';
+
+```
+
+## Using from CDN:
+
+```html
+<script type=module crossorigin=anonymous>
+    import 'https://esm.run/be-intl';
+</script>
+```

package/be-intl.js

@@ -0,0 +1,126 @@
+import { BE, propDefaults, propInfo } from 'be-enhanced/BE.js';
+import { XE } from 'xtal-element/XE.js';
+import { register } from 'be-hive/register.js';
+export class BeIntl extends BE {
+    static get beConfig() {
+        return {
+            parse: true,
+            primaryProp: 'format',
+            primaryPropReq: true,
+        };
+    }
+    async attach(enhancedElement, enhancementInfo) {
+        await super.attach(enhancedElement, enhancementInfo);
+        import('be-propagating/be-propagating.js');
+        const base = await enhancedElement.beEnhanced.whenResolved('be-propagating');
+        const propagator = base.propagators.get('self');
+        propagator.addEventListener('lang', e => {
+            this.locale = e.detail.newVal;
+        });
+        switch (enhancedElement.localName) {
+            case 'data':
+            case 'output':
+                {
+                    propagator.addEventListener('value', e => {
+                        const newVal = e.detail.newVal;
+                        switch (typeof newVal) {
+                            case 'string':
+                                if (!newVal) {
+                                    this.value = 0;
+                                }
+                                break;
+                            default:
+                                this.value = newVal;
+                        }
+                    });
+                    const val = enhancedElement.value;
+                    if (val !== '') {
+                        this.value = JSON.parse(val);
+                    }
+                }
+                break;
+            case 'time':
+                {
+                    propagator.addEventListener('dateTime', e => {
+                        const newVal = e.detail.newVal;
+                        switch (typeof newVal) {
+                            case 'string':
+                                try {
+                                    this.value = new Date(newVal);
+                                }
+                                catch (e) {
+                                    console.error(e);
+                                }
+                            default:
+                                if (newVal instanceof Date) {
+                                    this.value = newVal;
+                                }
+                        }
+                    });
+                    const val = enhancedElement.dateTime;
+                    if (val !== '') {
+                        try {
+                            this.value = new Date(val);
+                        }
+                        catch (e) {
+                            console.error(e);
+                        }
+                    }
+                }
+                break;
+        }
+        this.locale = enhancedElement.lang || defaultLocale;
+    }
+    formatNumber(self) {
+        const { enhancedElement, value, intlNumberFormat } = self;
+        enhancedElement.textContent = intlNumberFormat.format(value);
+    }
+    formatDate(self) {
+        const { enhancedElement, value, intlNumberFormat } = self;
+        enhancedElement.textContent = this.intlDateFormat.format(value);
+    }
+    onFormattingChange(self) {
+        const { enhancedElement, locale, format } = self;
+        switch (enhancedElement.localName) {
+            case 'time':
+                return {
+                    intlDateFormat: new Intl.DateTimeFormat(locale, format)
+                };
+            default:
+                return {
+                    intlNumberFormat: new Intl.NumberFormat(locale, format)
+                };
+        }
+    }
+}
+const defaultLocale = new Intl.NumberFormat().resolvedOptions().locale;
+const tagName = 'be-intl';
+const ifWantsToBe = 'intl';
+const upgrade = 'data,time,output';
+const xe = new XE({
+    config: {
+        tagName,
+        propDefaults: {
+            ...propDefaults,
+        },
+        propInfo: {
+            ...propInfo
+        },
+        actions: {
+            formatNumber: {
+                ifKeyIn: ['value'],
+                ifAllOf: ['intlNumberFormat']
+            },
+            formatDate: {
+                ifKeyIn: ['value'],
+                ifAllOf: ['intlDateFormat']
+            },
+            onFormattingChange: {
+                ifAllOf: ['locale'],
+                ifKeyIn: ['format']
+            }
+        }
+    },
+    superclass: BeIntl
+});
+register(ifWantsToBe, upgrade, tagName);

package/package.json

@@ -1,10 +1,39 @@
 {
   "name": "be-intl",
-  "version": "0.0.0",
-  "description": "",
-  "main": "index.js",
+  "version": "0.0.1",
+  "keywords": [
+    "web-components",
+    "web-component",
+    "custom-element",
+    "custom-elements"
+  ],
+  "description": "Format numbers, dates automatically and semantically.",
+  "main": "be-intl.js",
+  "module": "be-intl.js",
+  "exports": {
+    ".": "./be-intl.js",
+    "./be-intl.js": "./be-intl.js"
+  },
+  "files": [
+    "*.js",
+    "types.d.ts"
+  ],
+  "types": "types.d.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "playwright test",
+    "serve": "node node_modules/may-it-serve/serve.js",
+    "safari": "npx playwright wk http://localhost:3030"
+  },
+  "dependencies": {
+    "be-enhanced": "0.0.21",
+    "be-hive": "0.0.95",
+    "be-propagating": "0.0.10",
+    "trans-render": "0.0.683",
+    "xtal-element": "0.0.562"
+  },
+  "devDependencies": {
+    "may-it-serve": "0.0.5",
+    "@playwright/test": "1.34.3"
   },
   "author": "",
   "license": "MIT"

package/types.d.ts

@@ -0,0 +1,27 @@
+import { ActionOnEventConfigs } from "trans-render/froop/types";
+import {IBE, Declarations} from 'be-enhanced/types';
+
+export interface EndUserProps extends IBE<HTMLDataElement | HTMLTimeElement | HTMLOutputElement>{
+    format?: Intl.NumberFormatOptions | Intl.DateTimeFormatOptions,
+    value?: number | Date;
+    locale?: string;
+}
+
+export interface AllProps extends EndUserProps{
+    intlDateFormat?: Intl.DateTimeFormat,
+    intlNumberFormat?: Intl.NumberFormat,
+}
+
+export type AP = AllProps;
+
+export type PAP = Partial<AP>;
+
+export type ProPAP = Promise<PAP>;
+
+export type POA = [PAP | undefined, ActionOnEventConfigs<PAP, Actions>];
+
+export interface Actions{
+    formatNumber(self: this): void;
+    formatDate(self: this): void;
+    onFormattingChange(self: this): PAP;
+}