be-hive 0.0.79 → 0.0.81

package/IDMonitor.void

@@ -0,0 +1,32 @@
+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(element => {
+            const {id} = element;
+            if(id){
+                instance.define({element, meta: {}}, false);
+            }
+        })
+        this.#mut = new MutationObserver((mutationList: MutationRecord[]) => {
+            for(const mutation of mutationList){
+                const {addedNodes} = mutation;
+                if(addedNodes !== undefined){
+                    for(const addedNode of addedNodes){
+                        const element = addedNode as any as IHasID;
+                        const {id} = element
+                        if(id){
+                            instance.define({element, meta: {}}, false);
+                        }
+                    }
+                }
+            }
+        });
+        this.#mut.observe(instance, config);
+    }
+    dispose(){
+        this.#mut.disconnect();
+    }
+}

package/README.md

@@ -70,6 +70,40 @@ If one Shadow DOM blocks an inherited behivior, child Shadow DOMs can bring it b
 }'></be-hive>
 ```
 
+## Scoped refs [WIP]
+
+be-hive can also manage "scoped refs" -- 
+
+1.  Placing a DOM element, such as a template, with an id inside the be-vive element "registers" it.
+2.  Elements contained inside be-hive elements in higher up ShadowDOM realms 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
 
 
@@ -83,6 +117,5 @@ in be-hive/register.js
 
 
 be-hive then determines which be-hiviors to inherit.
-
-[TODO]  Provide a "registry" for be-hiviors to read common meta information.  Create a property that is an ES6 proxy, transmits event on all prop changes?  
+  
 

package/be-hive.js

@@ -1,9 +1,11 @@
 export class BeHive extends HTMLElement {
+    //#monitor?: IDisposable;
     constructor() {
         super();
-        this.registeredBehaviors = {};
+        // this.registeredBehaviors = {};
+        // this.refs = {};
     }
-    connectedCallback() {
+    async connectedCallback() {
         this.hidden = true;
         const overridesAttr = this.getAttribute('overrides');
         if (overridesAttr !== null) {
@@ -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();
@@ -29,6 +38,12 @@ export class BeHive extends HTMLElement {
             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: Event) => {
+            //     this.define((<any>e).detail.value, true);
+            // });
         }
     }
     register(parentInstance) {

package/be-hive.ts

@@ -1,11 +1,14 @@
-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.registeredBehaviors = {};
+        // this.refs = {};
+
     }
-    connectedCallback(){
+    async connectedCallback(){
         this.hidden = true;
         const overridesAttr = this.getAttribute('overrides');
         if(overridesAttr !== null){
@@ -13,8 +16,15 @@ export class BeHive extends HTMLElement{
         }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(){
@@ -32,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);
+            // });
+            
         }
     }
 
@@ -79,7 +98,35 @@ export class BeHive extends HTMLElement{
         return newBehaviorEl;
     }
 
+    // define(ref: Ref, noReplace: boolean){
+    //     if(noReplace){
+    //         if(this.refs[ref.element.id] !== undefined) return;
+    //     }
+    //     this.refs[ref.element.id] = ref;
+    //     this.dispatchEvent(new CustomEvent('new-ref', {
+    //         detail:{
+    //             value: ref,
+    //         } as INewDefEvent,
+    //     }));
+    // }
+
+    // get(id: string){
+    //     return this.refs[id];
+    // }
 
+    // whenDefined(id: string): Promise<Ref>{
+    //     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 Ref;
+    //             if(ref.element.id === id) resolve(ref);
+    //         }, {once: true});
+    //     });
+    // }
 }
 
 if(!customElements.get('be-hive')){

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "be-hive",
-  "version": "0.0.79",
+  "version": "0.0.81",
   "keywords": [
     "web-components",
     "web-component",
@@ -28,13 +28,13 @@
     "doc": "custom-elements-manifest analyze"
   },
   "devDependencies": {
-    "@playwright/test": "1.29.1",
+    "@playwright/test": "1.30.0",
     "@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.52"
+    "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]: Ref};
+    beSevered: boolean;
+    
 }
 
 export interface BeHiveActions{
@@ -27,4 +29,23 @@ export interface BeHiveActions{
 
 export interface LatestBehaviorEvent{
     value: BehaviorKeys;
-}
+}
+
+export interface IHasID{
+    id: string;
+}
+
+// export interface Ref<TElement = IHasID, Meta = any>{
+//     element: TElement,
+//     meta: Meta
+// }
+
+export interface IDisposable{
+    dispose(): void;
+}
+
+export type Disposable = {new(): IDisposable};
+
+// export interface INewDefEvent{
+//     value: Ref
+// }