be-intl 0.0.47 → 0.0.49

package/README.md

@@ -45,30 +45,23 @@ The semantic example above involves a lot of keyboard tapping of the letters "be
 🌐-weekday=long 🌐-year=numeric 🌐-month=long 🌐-day=numeric></time>
 ```
 
-## Viewing Locally
+## Viewing Demos Locally
 
-Any web server than can serve static files will do, but...
+1. Install git
+2. Fork/clone this repo
+3. Install node.js
+4. Open command window to folder where you cloned this repo
+5. > git submodule add https://github.com/bahrus/types.git types
+6. > git submodule update --init --recursive
+7. > npm install
+8. > npm run build
+9. > npm run serve
+10. Open http://localhost:8000/demo/ in a modern browser
 
-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';
+## Running Tests
 
 ```
-
-## Using from CDN:
-
-```html
-<script type=module crossorigin=anonymous>
-    import 'https://esm.run/be-intl';
-</script>
+> npm run test
 ```
 
+

package/be-intl.js

@@ -1,87 +1,148 @@
 // @ts-check
-import { propInfo, rejected, resolved } from 'be-enhanced/cc.js';
-import { BeValueAdded } from 'be-value-added/be-value-added.js';
-/** @import {Actions, AP} from './ts-refs/be-intl/types' */
-/** @import {BEConfig, IEnhancement, BEAllProps} from './ts-refs/be-enhanced/types.d.ts' */
-/** @import {Positraction, PropLookup, PropInfo} from './ts-refs/trans-render/froop/types.d.ts' */
-/** @import {BVAActions, BVAAllProps, BVAP} from './ts-refs/be-value-added/types' */;
+/** @import {Actions, PAP, AllProps, AP} from './types/be-intl/types' */;
+/** @import {RoundaboutOptions} from './types/roundabout/types' */;
+/** @import {ElementEnhancementGateway, SpawnContext} from './types/assign-gingerly/types' */;
+/** @import {EMC} from './types/mount-observer/types' */;
+/** @import {RAConfig} from './types/roundabout/types' */;
+
+const defaultLocale = new Intl.NumberFormat().resolvedOptions().locale;
+
+/** Semantic sugar attributes folded into `format`. */
+const SEMANTIC_KEYS = ['style', 'currency', 'weekday', 'year', 'month', 'day'];
 
 /**
  * @implements {Actions}
  */
-class BeIntl extends BeValueAdded {
+class BeIntl {
+
     /**
-     * @type {BEConfig<AP & BEAllProps, Actions & IEnhancement>}
+     * @this {AllProps & Actions}
+     * @param {Element & ElementEnhancementGateway} enhancedElement
+     * @param {SpawnContext} ctx
+     * @param {PAP} initVals
      */
-    static config = {
-        propInfo: {
-            ...propInfo,
-            locale: {},
-            format: {},
-            intlDateFormat: {},
-            intlNumberFormat: {},
-            currency: {},
-        },
-        actions: {
-            
-            hydrate: {
-                ifAllOf: ['attached'],
-            },
-            formatNumber: {
-                ifKeyIn: ['value'],
-                ifAllOf: ['intlNumberFormat']
-            },
-            formatDate: {
-                ifKeyIn: ['value'],
-                ifAllOf: ['intlDateFormat']
-            },
-            onFormattingChange: {
-                ifAllOf: ['locale'],
-                ifKeyIn: ['format', 'currency']
+    constructor(enhancedElement, ctx, initVals){
+        this.init(this, enhancedElement, ctx, initVals);
+    }
+
+    /**
+     * @param {AllProps} self
+     * @param {Element & ElementEnhancementGateway} enhancedElement
+     * @param {SpawnContext} ctx
+     * @param {PAP} initVals
+     */
+    async init(self, enhancedElement, ctx, initVals){
+        const {customData} = /** @type {EMC<any, AllProps, Element, RAConfig<AllProps, Actions>>} */ (ctx.emc);
+        /**
+         * @type {RoundaboutOptions}
+         */
+        const raOptions = {
+            ...customData,
+            vm: self,
+            initialPropVals: {
+                enhancedElement,
+                ...customData?.defaultPropVals,
+                ...initVals
             }
-        },
-        positractions: [
-            /** @type {Positraction<BVAP & BEAllProps>} */
-            (resolved), 
-            /** @type {Positraction<BVAP & BEAllProps>} */
-            (rejected),
-        ]
-    };
+        };
+        await (await import('roundabout-lib/roundabout.js')).roundabout(raOptions);
+        self.initialized = true;
+    }
+
     /**
-     * 
-     * @param {AP & BEAllProps} self 
-     * @returns {void}
+     * Wire up live-update observation, resolve the locale, and seed the value.
+     * @param {AP} self
+     * @returns {Promise<PAP>}
      */
-    formatNumber(self) {
-        const { enhancedElement, value } = self;
-        if (value === undefined) {
-            enhancedElement.textContent = '';
-            return;
+    async hydrate(self){
+        const {enhancedElement} = self;
+        if(enhancedElement instanceof HTMLElement){
+            enhancedElement.ariaLive = 'polite';
+        }
+
+        // Re-format whenever the element's underlying value property changes.
+        // <data>/<output> reflect through `value`, <time> through `dateTime`.
+        const valueProp = enhancedElement.localName === 'time' ? 'dateTime' : 'value';
+        const inference = await infer(enhancedElement);
+        const propagator = await inference.getPropagator();
+        propagator.addEventListener(valueProp, () => {
+            self.value = inference.value;
+        });
+
+        // Opt-in: track lang changes.
+        if(self.observeLang && enhancedElement instanceof HTMLElement){
+            const langObserver = new MutationObserver(() => {
+                self.locale = enhancedElement.lang || defaultLocale;
+            });
+            langObserver.observe(enhancedElement, {attributes: true, attributeFilter: ['lang']});
         }
-        const { intlNumberFormat } = self;
-        enhancedElement.textContent = intlNumberFormat.format(value);
+
+        const locale = self.locale
+            || (enhancedElement instanceof HTMLElement ? enhancedElement.lang : '')
+            || defaultLocale;
+        return {locale, value: inference.value};
     }
-    formatDate(self) {
-        const { enhancedElement, value, intlNumberFormat } = self;
-        enhancedElement.textContent = self.intlDateFormat.format(value);
+
+    /**
+     * (Re)build the Intl formatter. `value` is seeded by `hydrate` and kept
+     * fresh by the propagator, so it isn't read here.
+     * @param {AP} self
+     * @returns {PAP}
+     */
+    onFormattingChange(self){
+        const {enhancedElement, locale} = self;
+        // Explicit JSON (`self.format`) wins; semantic sub-attributes fill the gaps.
+        const format = {.../** @type {Record<string, any>} */ (self.format || {})};
+        for(const key of SEMANTIC_KEYS){
+            const val = /** @type {Record<string, any>} */ (self)[key];
+            if(val !== undefined && format[key] === undefined) format[key] = val;
+        }
+        if(enhancedElement.localName === 'time'){
+            return {
+                intlDateFormat: new Intl.DateTimeFormat(locale, /** @type {Intl.DateTimeFormatOptions} */ (format)),
+                resolved: true,
+            };
+        }
+        return {
+            intlNumberFormat: new Intl.NumberFormat(locale, /** @type {Intl.NumberFormatOptions} */ (format)),
+            resolved: true,
+        };
     }
-    onFormattingChange(self) {
-        const { enhancedElement, locale, format, currency } = self;
-        switch (enhancedElement.localName) {
-            case 'time':
-                return {
-                    intlDateFormat: new Intl.DateTimeFormat(locale, format),
-                    resolved: true
-                };
-            default:
-                if (currency !== undefined)
-                    format.currency = currency;
-                return {
-                    intlNumberFormat: new Intl.NumberFormat(locale, format),
-                    resolved: true
-                };
+
+    /**
+     * @param {AP} self
+     */
+    formatNumber(self){
+        const {enhancedElement, value, intlNumberFormat} = self;
+        if(intlNumberFormat === undefined || value === undefined || value === null){
+            enhancedElement.textContent = '';
+            return;
         }
+        enhancedElement.textContent = intlNumberFormat.format(/** @type {number} */ (value));
     }
+
+    /**
+     * @param {AP} self
+     */
+    formatDate(self){
+        const {enhancedElement, value, intlDateFormat} = self;
+        if(intlDateFormat === undefined || value === undefined || value === null) return;
+        enhancedElement.textContent = intlDateFormat.format(/** @type {Date} */ (value));
+    }
+}
+
+/**
+ * Resolve the `inferencer` enhancement instance for an element. Typed loosely
+ * (`Promise<any>`) so the class doesn't couple to the `Infer` shape; `.value`
+ * is a live, type-coerced read (`Date` for `<time>`, `number` for `<data>`),
+ * `getPropagator()` emits on value-property changes.
+ * @param {Element & ElementEnhancementGateway} from
+ * @returns {Promise<any>}
+ */
+async function infer(from){
+    return /** @type {any} */ (
+        from.enh.get((await import('inferencer/inferencer.js')).registryItem)
+    );
 }
-await BeIntl.bootUp();
+
 export { BeIntl };

package/emc.json

@@ -0,0 +1,71 @@
+{
+    "enhConfig": {
+        "enhKey": "BeIntl",
+        "spawn": "be-intl/be-intl.js",
+        "withAttrs": {
+            "base": "be-intl",
+            "_base": {
+                "mapsTo": "format",
+                "instanceOf": "Object",
+                "valIfNull": {}
+            },
+            "style": "${base}-style",
+            "currency": "${base}-currency",
+            "weekday": "${base}-weekday",
+            "year": "${base}-year",
+            "month": "${base}-month",
+            "day": "${base}-day",
+            "observeLang": "${base}-observe-lang",
+            "_observeLang": {
+                "instanceOf": "Boolean"
+            }
+        }
+    },
+    "customData": {
+        "weakRef": {
+            "properties": [
+                "enhancedElement"
+            ]
+        },
+        "actions": {
+            "hydrate": {
+                "ifAllOf": [
+                    "enhancedElement",
+                    "initialized"
+                ],
+                "ifKeyIn": [
+                    "initialized"
+                ]
+            },
+            "onFormattingChange": {
+                "ifAllOf": [
+                    "locale",
+                    "initialized"
+                ],
+                "ifKeyIn": [
+                    "locale",
+                    "format",
+                    "initialized"
+                ]
+            },
+            "formatNumber": {
+                "ifAllOf": [
+                    "intlNumberFormat"
+                ],
+                "ifKeyIn": [
+                    "value",
+                    "intlNumberFormat"
+                ]
+            },
+            "formatDate": {
+                "ifAllOf": [
+                    "intlDateFormat"
+                ],
+                "ifKeyIn": [
+                    "value",
+                    "intlDateFormat"
+                ]
+            }
+        }
+    }
+}

package/package.json

@@ -1,42 +1,46 @@
-{
-  "name": "be-intl",
-  "version": "0.0.47",
-  "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",
-    "./behivior.js": "./behivior.js"
-  },
-  "files": [
-    "*.js",
-    "types.d.ts"
-  ],
-  "types": "./ts-refs/types.d.ts",
-  "scripts": {
-    "test": "playwright test",
-    "serve": "node node_modules/may-it-serve/serve.js",
-    "safari": "npx playwright wk http://localhost:3030",
-    "update": "ncu -u && npm install"
-  },
-  "dependencies": {
-    "be-enhanced": "0.0.133",
-    "be-hive": "0.0.202",
-    "be-propagating": "0.0.58",
-    "be-value-added": "0.0.51",
-    "trans-render": "0.0.825"
-  },
-  "devDependencies": {
-    "may-it-serve": "0.0.8",
-    "@playwright/test": "1.46.0"
-  },
-  "author": "anderson.bruce.b@gmail.com",
-  "license": "MIT"
-}
+{
+  "name": "be-intl",
+  "version": "0.0.49",
+  "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",
+    "./🌐.js": "./🌐.js",
+    "./emc.json": "./emc.json",
+    "./🌐.json": "./🌐.json"
+  },
+  "files": [
+    "*.js",
+    "*.json",
+    "types.d.ts"
+  ],
+  "types": "./types/be-intl/types.d.ts",
+  "scripts": {
+    "build": "node emc.mjs > emc.json && node 🌐.mjs > 🌐.json",
+    "serve": "node ./node_modules/spa-ssi/serve.js",
+    "test": "playwright test",
+    "safari": "npx playwright wk http://localhost:8000",
+    "update": "ncu -u && npm install"
+  },
+  "dependencies": {
+    "assign-gingerly": "0.0.92",
+    "be-hive": "0.1.18",
+    "inferencer": "0.0.13",
+    "mount-observer": "0.1.53",
+    "roundabout-lib": "0.0.36"
+  },
+  "devDependencies": {
+    "spa-ssi": "0.0.27",
+    "@playwright/test": "1.62.1"
+  },
+  "author": "anderson.bruce.b@gmail.com",
+  "license": "MIT"
+}

package//360/237/214/220.json

@@ -0,0 +1,71 @@
+{
+    "enhConfig": {
+        "enhKey": "🌐",
+        "spawn": "be-intl/be-intl.js",
+        "withAttrs": {
+            "base": "🌐",
+            "_base": {
+                "mapsTo": "format",
+                "instanceOf": "Object",
+                "valIfNull": {}
+            },
+            "style": "${base}-style",
+            "currency": "${base}-currency",
+            "weekday": "${base}-weekday",
+            "year": "${base}-year",
+            "month": "${base}-month",
+            "day": "${base}-day",
+            "observeLang": "${base}-observe-lang",
+            "_observeLang": {
+                "instanceOf": "Boolean"
+            }
+        }
+    },
+    "customData": {
+        "weakRef": {
+            "properties": [
+                "enhancedElement"
+            ]
+        },
+        "actions": {
+            "hydrate": {
+                "ifAllOf": [
+                    "enhancedElement",
+                    "initialized"
+                ],
+                "ifKeyIn": [
+                    "initialized"
+                ]
+            },
+            "onFormattingChange": {
+                "ifAllOf": [
+                    "locale",
+                    "initialized"
+                ],
+                "ifKeyIn": [
+                    "locale",
+                    "format",
+                    "initialized"
+                ]
+            },
+            "formatNumber": {
+                "ifAllOf": [
+                    "intlNumberFormat"
+                ],
+                "ifKeyIn": [
+                    "value",
+                    "intlNumberFormat"
+                ]
+            },
+            "formatDate": {
+                "ifAllOf": [
+                    "intlDateFormat"
+                ],
+                "ifKeyIn": [
+                    "value",
+                    "intlDateFormat"
+                ]
+            }
+        }
+    }
+}

package/behivior.js

@@ -1,60 +0,0 @@
-// @ts-check
-import { BeHive, MountObserver, seed } from 'be-hive/be-hive.js';
-const defaultLocale = new Intl.NumberFormat().resolvedOptions().locale;
-/** @import {EMC} from './ts-refs/trans-render/be/types.d.ts' */
-
-/**
- * @type {EMC}
- */
-export const emc = {
-    base: 'be-intl',
-    branches: ['', 'style', 'currency', 'weekday', 'year', 'month', 'day'],
-    map: {
-        '0.0': {
-            instanceOf: 'Object',
-            mapsTo: 'format',
-            valIfFalsy: {},
-        },
-        '1.0': {
-            instanceOf: 'String',
-            mapsTo: '?.format?.style'
-        },
-        '2.0': {
-            instanceOf: 'String',
-            mapsTo: '?.format?.currency'
-        },
-        '3.0': {
-            instanceOf: 'String',
-            mapsTo: '?.format?.weekday'
-        },
-        '4.0': {
-            instanceOf: 'String',
-            mapsTo: '?.format?.year'
-        },
-        '5.0': {
-            instanceOf: 'String',
-            mapsTo: '?.format?.month'
-        },
-        '6.0': {
-            instanceOf: 'String',
-            mapsTo: '?.format?.day'
-        }
-    },
-    osotas: [
-        {
-            name: 'lang',
-            valIfNull: defaultLocale,
-            mapsTo: 'locale',
-        }
-    ],
-    enhPropKey: 'beIntl',
-    importEnh: async () => {
-        const { BeIntl } = 
-        /** @type {{new(): IEnhancement<Element>}} */ 
-        /** @type {any} */
-        (await import('./be-intl.js'));
-        return BeIntl;
-    }
-};
-const mose = seed(emc);
-MountObserver.synthesize(document, BeHive, mose);

package//360/237/214/220.js

@@ -1,15 +0,0 @@
-// @ts-check
-import { MountObserver, seed, BeHive } from 'be-hive/be-hive.js';
-import { emc as baseEMC } from './behivior.js';
-/** @import {EMC} from './ts-refs/trans-render/be/types.d.ts' */
-
-/**
- * @type {EMC}
- */
-export const emc = {
-    ...baseEMC,
-    base: '🌐',
-    enhPropKey: '🌐',
-};
-const mose = seed(emc);
-MountObserver.synthesize(document, BeHive, mose);