be-hive 0.0.78 → 0.0.80

package/IDMonitor.js

@@ -0,0 +1,31 @@
+export class IDMonitor {
+    instance;
+    #mut;
+    constructor(instance) {
+        this.instance = instance;
+        const config = { childList: true };
+        instance.querySelectorAll('*').forEach(item => {
+            const { id } = item;
+            if (id) {
+                instance.define(item, false);
+            }
+        });
+        this.#mut = new MutationObserver((mutationList) => {
+            for (const mutation of mutationList) {
+                const { addedNodes } = mutation;
+                if (addedNodes !== undefined) {
+                    for (const addedNode of addedNodes) {
+                        const { id } = addedNode;
+                        if (id) {
+                            instance.define(addedNode, false);
+                        }
+                    }
+                }
+            }
+        });
+        this.#mut.observe(instance, config);
+    }
+    dispose() {
+        this.#mut.disconnect();
+    }
+}

package/IDMonitor.ts

@@ -0,0 +1,31 @@
+import {BeHive} from './be-hive.js';
+import { IHasID } from './types.js';
+export class IDMonitor{
+    #mut: MutationObserver;
+    constructor(public instance: BeHive){
+        const config: MutationObserverInit = { childList: true};
+        instance.querySelectorAll('*').forEach(item => {
+            const {id} = item;
+            if(id){
+                instance.define(item, false);
+            }
+        })
+        this.#mut = new MutationObserver((mutationList: MutationRecord[]) => {
+            for(const mutation of mutationList){
+                const {addedNodes} = mutation;
+                if(addedNodes !== undefined){
+                    for(const addedNode of addedNodes){
+                        const {id} = addedNode as any as IHasID;
+                        if(id){
+                            instance.define(addedNode as any as IHasID, false);
+                        }
+                    }
+                }
+            }
+        });
+        this.#mut.observe(instance, config);
+    }
+    dispose(){
+        this.#mut.disconnect();
+    }
+}

package/README.md

@@ -70,6 +70,37 @@ If one Shadow DOM blocks an inherited behivior, child Shadow DOMs can bring it b
 }'></be-hive>
 ```
 
+## Scoped templates [TODO]
+
+be-hive can also manage "scoped templates" -- templates contained inside be-hive elements in higher up ShadowDOM can "cascade down".
+
+```html
+<my-element>
+    #shadow
+        <be-hive>
+            <template id=open-menu>
+            ...
+            </template>
+        </be-hive>
+        <my-child-element>
+            <be-hive>
+            </be-hive>
+        </my-child-element>
+</my-element>
+```
+
+from within my-child-element:
+
+```JavaScript
+const openMenuTempl = await this.querySelector('be-hive').whenDefined('open-menu');
+```
+
+Can also programmatically register template:
+
+```JavaScript
+this.querySelector('be-hive').define(templ);
+```
+
 ## API
 
 

package/be-hive.js

@@ -1,10 +1,12 @@
 export class BeHive extends HTMLElement {
+    #monitor;
     constructor() {
         super();
         this.registeredBehaviors = {};
-        this.hidden = true;
+        this.refs = {};
     }
-    connectedCallback() {
+    async connectedCallback() {
+        this.hidden = true;
         const overridesAttr = this.getAttribute('overrides');
         if (overridesAttr !== null) {
             this.overrides = JSON.parse(overridesAttr);
@@ -13,6 +15,13 @@ export class BeHive extends HTMLElement {
             this.overrides = {};
         }
         this.#getInheritedBehaviors();
+        const { IDMonitor } = await import('./IDMonitor.js');
+        this.#monitor = new IDMonitor(this);
+    }
+    disconnectedCallback() {
+        if (this.#monitor !== undefined) {
+            this.#monitor.dispose();
+        }
     }
     #getInheritedBehaviors() {
         const rn = this.getRootNode();
@@ -22,13 +31,19 @@ export class BeHive extends HTMLElement {
         const parentShadowRealm = host.getRootNode();
         const parentBeHiveInstance = parentShadowRealm.querySelector('be-hive');
         if (parentBeHiveInstance !== null) {
-            const { registeredBehaviors } = parentBeHiveInstance;
+            const { registeredBehaviors, refs } = parentBeHiveInstance;
             for (const key in registeredBehaviors) {
                 this.register(registeredBehaviors[key]);
             }
             parentBeHiveInstance.addEventListener('latest-behavior-changed', (e) => {
                 this.register(e.detail.value);
             });
+            for (const id in refs) {
+                this.define(refs[id], true);
+            }
+            parentBeHiveInstance.addEventListener('new-ref', (e) => {
+                this.define(e.detail.value, true);
+            });
         }
     }
     register(parentInstance) {
@@ -75,6 +90,35 @@ export class BeHive extends HTMLElement {
         //this.latestBehaviors = [...this.latestBehaviors, newRegisteredBehavior];
         return newBehaviorEl;
     }
+    define(ref, noReplace) {
+        if (noReplace) {
+            if (this.refs[ref.id] !== undefined)
+                return;
+        }
+        this.refs[ref.id] = ref;
+        this.dispatchEvent(new CustomEvent('new-ref', {
+            detail: {
+                value: ref,
+            }
+        }));
+    }
+    get(id) {
+        return this.refs[id];
+    }
+    whenDefined(id) {
+        return new Promise(resolve => {
+            const ref = this.get(id);
+            if (ref !== undefined) {
+                resolve(ref);
+                return;
+            }
+            this.addEventListener('new-ref', e => {
+                const ref = e.detail.value;
+                if (ref.id === id)
+                    resolve(ref);
+            }, { once: true });
+        });
+    }
 }
 if (!customElements.get('be-hive')) {
     customElements.define('be-hive', BeHive);

package/be-hive.ts

@@ -1,19 +1,30 @@
-import {BeHiveProps, BeHiveActions, BehaviorKeys} from './types';
+import {BeHiveProps, BeHiveActions, BehaviorKeys, IHasID, IDisposable} from './types';
 export class BeHive extends HTMLElement{
+
+    #monitor?: IDisposable;
     constructor(){
         super();
         this.registeredBehaviors = {};
-        this.hidden = true;
+        this.refs = {};
+
     }
-    connectedCallback(){
+    async connectedCallback(){
+        this.hidden = true;
         const overridesAttr = this.getAttribute('overrides');
         if(overridesAttr !== null){
             this.overrides = JSON.parse(overridesAttr);
         }else{
             this.overrides = {};
         }
-        
         this.#getInheritedBehaviors();
+        const {IDMonitor} = await import('./IDMonitor.js');
+        this.#monitor = new IDMonitor(this);
+    }
+
+    disconnectedCallback(){
+        if(this.#monitor !== undefined){
+            this.#monitor.dispose();
+        }
     }
 
     #getInheritedBehaviors(){
@@ -23,7 +34,7 @@ export class BeHive extends HTMLElement{
         const parentShadowRealm = host.getRootNode();
         const parentBeHiveInstance = parentShadowRealm.querySelector('be-hive') as BeHiveProps & Element;
         if(parentBeHiveInstance !== null){
-            const {registeredBehaviors} = parentBeHiveInstance;
+            const {registeredBehaviors, refs} = parentBeHiveInstance;
             for(const key in registeredBehaviors){
                 this.register(registeredBehaviors[key]);
             }
@@ -31,6 +42,15 @@ export class BeHive extends HTMLElement{
             parentBeHiveInstance.addEventListener('latest-behavior-changed', (e: Event) => {
                 this.register((<any>e).detail.value);
             });
+
+            for(const id in refs){
+                this.define(refs[id], true);
+            }
+
+            parentBeHiveInstance.addEventListener('new-ref', (e: Event) => {
+                this.define((<any>e).detail.value, true);
+            });
+            
         }
     }
 
@@ -78,7 +98,35 @@ export class BeHive extends HTMLElement{
         return newBehaviorEl;
     }
 
+    define(ref: IHasID, noReplace: boolean){
+        if(noReplace){
+            if(this.refs[ref.id] !== undefined) return;
+        }
+        this.refs[ref.id] = ref;
+        this.dispatchEvent(new CustomEvent('new-ref', {
+            detail:{
+                value: ref,
+            }
+        }));
+    }
+
+    get(id: string){
+        return this.refs[id];
+    }
 
+    whenDefined(id: string): Promise<IHasID>{
+        return new Promise(resolve => {
+            const ref = this.get(id);
+            if(ref !== undefined){
+                resolve(ref);
+                return;
+            }
+            this.addEventListener('new-ref', e => {
+                const ref = (<any>e).detail.value as IHasID;
+                if(ref.id === id) resolve(ref);
+            }, {once: true});
+        });
+    }
 }
 
 if(!customElements.get('be-hive')){

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "be-hive",
-  "version": "0.0.78",
+  "version": "0.0.80",
   "keywords": [
     "web-components",
     "web-component",
@@ -28,13 +28,13 @@
     "doc": "custom-elements-manifest analyze"
   },
   "devDependencies": {
-    "@playwright/test": "1.27.1",
+    "@playwright/test": "1.29.2",
     "@skypack/package-check": "0.2.2",
     "may-it-serve": "0.0.4",
     "@custom-elements-manifest/analyzer": "0.6.4",
     "xtal-shell": "0.0.27",
-    "be-functional": "0.0.17",
-    "be-exportable": "0.0.50"
+    "be-functional": "0.0.18",
+    "be-exportable": "0.0.62"
   },
   "repository": {
     "type": "git",

package/types.d.ts

@@ -15,7 +15,9 @@ export interface BeHiveProps{
     isC: boolean;
     registeredBehaviors: {[key: string]: BehaviorKeys};
     latestBehaviors: BehaviorKeys[];
-    beSevered: boolean
+    refs: {[key: string]: IHasID};
+    beSevered: boolean;
+    
 }
 
 export interface BeHiveActions{
@@ -27,4 +29,14 @@ export interface BeHiveActions{
 
 export interface LatestBehaviorEvent{
     value: BehaviorKeys;
-}
+}
+
+export interface IHasID{
+    id: string;
+}
+
+export interface IDisposable{
+    dispose(): void;
+}
+
+export type Disposable = {new(): IDisposable};