0.0.24

be-calculating.js

@@ -0,0 +1,134 @@
+import { config as beCnfg } from 'be-enhanced/config.js';
+import { BE } from 'be-enhanced/BE.js';
+class BeCalculating extends BE {
+    static config = {
+        propInfo: {
+            ...beCnfg.propInfo,
+            for: {}
+        },
+        actions: {
+            parseForAttr: {
+                ifAllOf: ['for']
+            }
+        }
+    };
+    parseForAttr(self) {
+        const { enhancedElement } = self;
+        console.log(enhancedElement);
+        return {};
+    }
+    // getDefaultForAttribute(self: this): PAP {
+    //     const {enhancedElement} = self;
+    //     switch(enhancedElement.localName){
+    //         case 'output':
+    //             return {
+    //                 forAttribute: 'for'
+    //             } as PAP;
+    //         default:
+    //             throw "Need list of id's"
+    //     }
+    // }
+    // getAttrExpr(self: this): PAP {
+    //     const {enhancedElement, recalculateOn: r} = self;
+    //     const recalculateOn = enhancedElement.hasAttribute('oninput') ? 'input':  'change';
+    //     const attrExpr = enhancedElement.getAttribute('oninput') || enhancedElement.getAttribute('onchange');
+    //     const scriptRef = attrExpr  ? undefined : 'previousElementSibling';
+    //     return {
+    //         attrExpr,
+    //         recalculateOn,
+    //         scriptRef,
+    //     };
+    // }
+    onAttrExpr(self) {
+        const { attrExpr } = self;
+        //TODO optimize
+        const scriptEl = document.createElement('script');
+        scriptEl.innerHTML = attrExpr;
+        return {
+            scriptEl
+        };
+    }
+    async findScriptEl(self) {
+        const { scriptRef, enhancedElement } = self;
+        const { findRealm } = await import('trans-render/lib/findRealm.js');
+        const scriptEl = await findRealm(enhancedElement, scriptRef);
+        if (scriptEl === null)
+            throw 404;
+        return {
+            scriptEl
+        };
+    }
+    async importSymbols(self) {
+        const { scriptEl, nameOfCalculator } = self;
+        import('be-exportable/be-exportable.js');
+        if (!scriptEl.src) {
+            const { rewrite } = await import('./rewrite.js');
+            rewrite(self, scriptEl);
+        }
+        const exportable = await scriptEl.beEnhanced.whenResolved('be-exportable');
+        return {
+            calculator: exportable.exports[nameOfCalculator]
+        };
+    }
+    #controllers;
+    async observe(self) {
+        const { args, searchBy, searchScope, recalculateOn } = self;
+        const defaultLink = {
+            localInstance: 'local',
+            enhancement: 'beCalculating',
+            downstreamPropName: 'propertyBag',
+            observe: {
+                attr: searchBy,
+                isFormElement: true,
+                names: args,
+                scope: searchScope,
+                on: recalculateOn
+            }
+        };
+        const { observe } = await import('be-linked/observe.js');
+        await observe(self, defaultLink);
+        const { propertyBag, calculator } = self;
+        this.#disconnect();
+        this.#controllers = [];
+        for (const arg of args) {
+            const ac = new AbortController();
+            propertyBag.addEventListener(arg, async (e) => {
+                const result = await calculator(propertyBag, e.detail);
+                Object.assign(self, result);
+            }, { signal: ac.signal });
+            this.#controllers.push(ac);
+        }
+        const result = await calculator(propertyBag);
+        Object.assign(self, result);
+        return {
+            //value: await calculator!(propertyBag!),
+            resolved: true,
+        };
+    }
+    #disconnect() {
+        if (this.#controllers !== undefined) {
+            for (const ac of this.#controllers) {
+                ac.abort();
+            }
+            this.#controllers = undefined;
+        }
+    }
+    async detach(detachedElement) {
+        this.#disconnect();
+    }
+    getArgs(self) {
+        const { for: forString } = self;
+        let forS = forString;
+        if (!forS) {
+            const { forAttribute, enhancedElement } = self;
+            forS = enhancedElement.getAttribute(forAttribute);
+        }
+        if (!forS)
+            throw 404;
+        return {
+            args: forS.split(' ')
+        };
+    }
+}
+await BeCalculating.bootUp();
+export { BeCalculating };

be-calculating.ts

@@ -6,33 +6,48 @@ import {Link} from 'be-linked/types';
 import {AllProps as BeExportableAllProps} from 'be-exportable/types';
 
 
-export class BeCalculating extends BE implements Actions{
+class BeCalculating extends BE<any, any, HTMLOutputElement | HTMLMetaElement> implements Actions{
     static override config: BEConfig<AP & BEAllProps, Actions & IEnhancement, any> = {
-
+        propInfo:{
+            ...beCnfg.propInfo,
+            for:{}
+        },
+        actions: {
+            parseForAttr:{
+                ifAllOf: ['for']
+            }
+        }
     };
-    getDefaultForAttribute(self: this): PAP {
+    parseForAttr(self: this): PAP {
         const {enhancedElement} = self;
-        switch(enhancedElement.localName){
-            case 'output':
-                return {
-                    forAttribute: 'for'
-                } as PAP;
-            default:
-                throw "Need list of id's"
+        console.log(enhancedElement);
+        return {
+
         }
     }
+    // getDefaultForAttribute(self: this): PAP {
+    //     const {enhancedElement} = self;
+    //     switch(enhancedElement.localName){
+    //         case 'output':
+    //             return {
+    //                 forAttribute: 'for'
+    //             } as PAP;
+    //         default:
+    //             throw "Need list of id's"
+    //     }
+    // }
 
-    getAttrExpr(self: this): PAP {
-        const {enhancedElement, recalculateOn: r} = self;
-        const recalculateOn = enhancedElement.hasAttribute('oninput') ? 'input':  'change';
-        const attrExpr = enhancedElement.getAttribute('oninput') || enhancedElement.getAttribute('onchange');
-        const scriptRef = attrExpr  ? undefined : 'previousElementSibling';
-        return {
-            attrExpr,
-            recalculateOn,
-            scriptRef,
-        };
-    }
+    // getAttrExpr(self: this): PAP {
+    //     const {enhancedElement, recalculateOn: r} = self;
+    //     const recalculateOn = enhancedElement.hasAttribute('oninput') ? 'input':  'change';
+    //     const attrExpr = enhancedElement.getAttribute('oninput') || enhancedElement.getAttribute('onchange');
+    //     const scriptRef = attrExpr  ? undefined : 'previousElementSibling';
+    //     return {
+    //         attrExpr,
+    //         recalculateOn,
+    //         scriptRef,
+    //     };
+    // }
 
     onAttrExpr(self: this): PAP {
         const {attrExpr} = self;
@@ -140,4 +155,8 @@ export class BeCalculating extends BE implements Actions{
     // }
 }
 
-export interface BeCalculating extends AP{}
+interface BeCalculating extends AP{}
+
+await BeCalculating.bootUp();
+
+export {BeCalculating};

behivior.js

@@ -0,0 +1,20 @@
+import { BeHive, seed, MountObserver } from 'be-hive/be-hive.js';
+export const emc = {
+    base: 'be-calculating',
+    enhPropKey: 'beCalculating',
+    // map: {
+    //     '0.0': 'ni'
+    // },
+    osotas: [
+        {
+            name: 'for',
+            mapsTo: 'for'
+        }
+    ],
+    importEnh: async () => {
+        const { BeCalculating } = await import('./be-calculating.js');
+        return BeCalculating;
+    }
+};
+const mose = seed(emc);
+MountObserver.synthesize(document, BeHive, mose);

behivior.ts

@@ -3,12 +3,22 @@ import {BeHive, EMC, seed, MountObserver} from 'be-hive/be-hive.js';
 export const emc: EMC = {
     base: 'be-calculating',
     enhPropKey: 'beCalculating',
-    map: {
-        '0.0': 'ni'
-    },
+    // map: {
+    //     '0.0': 'ni'
+    // },
+    osotas: [
+        {
+            name: 'for',
+            mapsTo: 'for'
+        }
+    ],
     importEnh: async () => {
         const {BeCalculating} = await import('./be-calculating.js');
         return BeCalculating;
     }
 
-};
+};
+
+const mose = seed(emc);
+
+MountObserver.synthesize(document, BeHive, mose);

demo/Example1a.html

@@ -10,7 +10,7 @@
     <form>
         <input type="range" id="a" value="50">
         +<input type="number" id="b" value="25">
-        =<output for="a b" be-calculating onchange="a+b"></output>
+        =<output for="a b" be-calculating oninput="a+b"></output>
     </form>
     <script type=importmap>
         {
@@ -20,8 +20,7 @@
                 "be-hive/":  "../node_modules/be-hive/",
                 "be-linked/": "../node_modules/be-linked/",
                 "mount-observer/": "../node_modules/mount-observer/",
-                "trans-render/": "../node_modules/trans-render/",
-                "xtal-element/": "../node_modules/xtal-element/"
+                "trans-render/": "../node_modules/trans-render/"
             }
         }
     </script>