be-hive 0.0.50 → 0.0.53

package/README.md

@@ -2,21 +2,62 @@
 
 [![Playwright Tests](https://github.com/bahrus/be-hive/actions/workflows/CI.yml/badge.svg)](https://github.com/bahrus/be-hive/actions/workflows/CI.yml)
 
-## Let it snow in August
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/be-hive?style=for-the-badge)](https://bundlephobia.com/result?p=be-hive)
 
-be-hive is the Queen Bee of the [may-it-be](https://github.com/bahrus/may-it-be) HTML frimework.
+<img src="http://img.badgesize.io/https://cdn.jsdelivr.net/npm/be-hive?compression=gzip">
 
-Specify that ShadowDOM should inherit [be-decorated-based](https://github.com/bahrus/be-decorated) be-hiviors from the parent Shadow DOM (or outside any Shadow DOM).
+<a href="https://nodei.co/npm/be-hive/"><img src="https://nodei.co/npm/be-hive.png"></a>
 
-To activate all the be-decorated beviviors, plop an instance of be-hive inside the Shadow DOM:
+## Inheriting behiviors
+
+[be-hive](https://www.youtube.com/watch?v=SQoOwosJWns) let's it [snow in August](https://www.youtube.com/watch?v=m3dmnOtqrV0).
+
+be-hive allows us to manage and coordinate the [family, or HTML frimework](https://github.com/bahrus/may-it-be) of [be-decorated](https://github.com/bahrus/be-decorated) element behiviors / decorators.  
+
+Without be-hive, the developer is burdened with plopping an instance of each decorator inside each shadow DOM realm.
+
+With the help of the be-hive component, the developer only has to plop a single instance of be-hive inside the Shadow DOM realm, like so:
 
 ```html
 <be-hive></be-hive>
 ```
 
-Allow judicious overriding of if-wants-to-be's.
+This signals that the Shadow DOM realm is opting-in, and allowing element behiviors, and will inherit all the behiviors from the parent Shadow DOM realm, by default.
+
+But the child Shadow DOM realm can develop a personality of its own by:
+
+1.  Adding additional behiviors by adding specific be-decorated elements inside the be-hive instance tag.
+2.  Avoiding naming conflicts by overriding the attribute associated with the inherited behivior.
+3.  Preventing inheriting unwanted behiviors from affecting the child Shadow DOM realm.
+4.  Start over.  Only decorator elements manually added inside the Shadow DOM (preferably inside the be-hive tag, for inheritance to work within)
+
+## Syntax for customizations of inherited behiviors:
+
+```html
+<be-hive overrides='{
+    "be-sharing":{
+        "ifWantsToBe": "familial"
+    },
+    "be-gracious": {
+        "ifWantsToBe": "respectful"
+    },
+    "be-disobedient-without-facing-the-consequences": {
+        "block": "true"
+    }
+}'></be-hive>
+```
 
-## Syntax
+## Be like Sirius Black
+
+If the inherited behiviors are all just too odious to inherit, there's an option to start again:
+
+```html
+<be-hive be-severed>
+</be-hive>
+```
+
+
+## API
 
 
 be-hiviors are registered via function:
@@ -31,16 +72,3 @@ in be-hive/register.js
 be-hive then determines which be-hiviors to inherit.
 
 
-However, be-hive supports an optional "overrides" attribute/property that allows overriding the parent inheritance.
-
-To uses be-hiviors in this way, we need to include one instance of be-hive in our ShadowDOM-based web component.
-
-```html
-<be-hive overrides='{
-    "be-sharing":{
-        "ifWantsToBe": "familial"
-    }
-}'></be-hive>
-```
-
-[TODO]  Expline this coherently.

package/be-hive.js

@@ -1,7 +1,9 @@
-import { XE } from 'xtal-element/src/XE.js';
+import { CE } from 'trans-render/lib/CE.js';
 export class BeHiveCore extends HTMLElement {
     registeredBehaviors = {};
-    intro({}) {
+    intro({ beSevered }) {
+        if (beSevered)
+            return;
         const rn = this.getRootNode();
         const host = rn.host;
         if (!host)
@@ -18,48 +20,56 @@ export class BeHiveCore extends HTMLElement {
             });
         }
     }
-    onOverrides({ overrides }) {
-        for (const key in overrides) {
-            this.register(overrides[key]);
-        }
-    }
-    register(instance) {
-        const localName = instance.localName;
-        if (this.overrides[instance.localName] !== undefined)
+    register(parentInstance) {
+        const parentInstanceLocalName = parentInstance.localName;
+        if (this.querySelector(parentInstanceLocalName) !== null)
             return;
-        if (this.querySelector(localName) !== null)
-            return;
-        this.registeredBehaviors[localName] = instance;
-        const newBehaviorEl = document.createElement(localName);
-        newBehaviorEl.setAttribute('if-wants-to-be', instance.ifWantsToBe);
-        newBehaviorEl.setAttribute('upgrade', instance.upgrade);
+        const override = this.overrides[parentInstanceLocalName];
+        let newInstanceTagName = parentInstanceLocalName;
+        let newIfWantsToBe = parentInstance.ifWantsToBe;
+        if (override !== undefined) {
+            const { ifWantsToBe, block } = override;
+            if (block)
+                return;
+            if (ifWantsToBe !== null) {
+                newIfWantsToBe = ifWantsToBe;
+                newInstanceTagName = 'be-' + ifWantsToBe;
+            }
+        }
+        const newBehaviorEl = document.createElement(parentInstanceLocalName);
+        newBehaviorEl.setAttribute('if-wants-to-be', newIfWantsToBe);
+        newBehaviorEl.setAttribute('upgrade', parentInstance.upgrade);
         this.appendChild(newBehaviorEl);
-        this.latestBehavior = instance;
+        const newRegisteredBehavior = {
+            ...parentInstance,
+            ifWantsToBe: newIfWantsToBe,
+        };
+        this.registeredBehaviors[parentInstanceLocalName] = newRegisteredBehavior;
+        this.latestBehavior = newRegisteredBehavior;
         return newBehaviorEl;
     }
+    onLatestBehavior({ latestBehavior }) {
+        this.dispatchEvent(new CustomEvent('latest-behavior-changed', {
+            detail: {
+                value: latestBehavior,
+            }
+        }));
+    }
 }
 const tagName = 'be-hive';
-const xe = new XE({
+const ce = new CE({
     config: {
         tagName,
         propDefaults: {
             overrides: {},
             isC: true,
-        },
-        propInfo: {
-            latestBehavior: {
-                notify: {
-                    dispatch: true,
-                }
-            }
+            beSevered: false,
         },
         actions: {
             intro: {
                 ifAllOf: ['isC'],
             },
-            onOverrides: {
-                ifAllOf: ['overrides']
-            }
+            onLatestBehavior: 'latestBehavior'
         },
         style: {
             display: 'none',
@@ -67,4 +77,4 @@ const xe = new XE({
     },
     superclass: BeHiveCore
 });
-export const BeHive = xe.classDef;
+export const BeHive = ce.classDef;

package/be-hive.ts

@@ -1,10 +1,11 @@
-import {XE} from 'xtal-element/src/XE.js';
+import {CE} from 'trans-render/lib/CE.js';
 import {BeHiveProps, BeHiveActions, BehaviorKeys} from './types';
 
 export class BeHiveCore extends HTMLElement implements BeHiveActions{
     registeredBehaviors: {[key: string]: BehaviorKeys} = {};
 
-    intro({}: this){
+    intro({beSevered}: this){
+        if(beSevered) return;
         const rn = this.getRootNode();
         const host = (<any>rn).host;
         if(!host) return;
@@ -21,51 +22,65 @@ export class BeHiveCore extends HTMLElement implements BeHiveActions{
             });
         }
     }
-    onOverrides({overrides}: this){
-        for(const key in overrides){
-            this.register(overrides[key]);
-        }
-    }
 
-    register(instance: BehaviorKeys){
-        const localName =  instance.localName;
-        if(this.overrides[instance.localName] !== undefined) return;
-        if(this.querySelector(localName) !== null) return;
-        this.registeredBehaviors[localName] = instance;
-        const newBehaviorEl = document.createElement(localName);
-        newBehaviorEl.setAttribute('if-wants-to-be', instance.ifWantsToBe);
-        newBehaviorEl.setAttribute('upgrade', instance.upgrade);
+
+    register(parentInstance: BehaviorKeys){
+        const parentInstanceLocalName =  parentInstance.localName;
+        if(this.querySelector(parentInstanceLocalName) !== null) return;
+        const override =  this.overrides[parentInstanceLocalName];
+        let newInstanceTagName = parentInstanceLocalName;
+        let newIfWantsToBe = parentInstance.ifWantsToBe;
+        if(override !== undefined){
+            const {ifWantsToBe, block} = override;
+            if(block) return;
+            if(ifWantsToBe !== null){
+                newIfWantsToBe = ifWantsToBe;
+                newInstanceTagName = 'be-' + ifWantsToBe;
+            }
+        }
+        
+        const newBehaviorEl = document.createElement(parentInstanceLocalName);
+        newBehaviorEl.setAttribute('if-wants-to-be', newIfWantsToBe);
+        newBehaviorEl.setAttribute('upgrade', parentInstance.upgrade);
         this.appendChild(newBehaviorEl);
-        this.latestBehavior = instance;
+        const newRegisteredBehavior: BehaviorKeys = {
+            ...parentInstance,
+            ifWantsToBe: newIfWantsToBe,
+            
+        };
+            
+        this.registeredBehaviors[parentInstanceLocalName] = newRegisteredBehavior;
+        this.latestBehavior = newRegisteredBehavior;
         return newBehaviorEl;
     }
+
+
+    onLatestBehavior({latestBehavior}: this): void {
+        this.dispatchEvent(new CustomEvent('latest-behavior-changed', {
+            detail:{
+                value: latestBehavior,
+            }
+        }))
+    }
 }
 
 export interface BeHiveCore extends BeHiveProps{}
 
 const tagName = 'be-hive';
 
-const xe = new XE<BeHiveProps, BeHiveActions>({
+const ce = new CE<BeHiveProps, BeHiveActions>({
     config:{
         tagName,
         propDefaults:{
             overrides: {},
             isC: true,
-        },
-        propInfo:{
-            latestBehavior: {
-                notify:{
-                    dispatch: true,
-                }
-            }
+            beSevered: false,
         },
         actions:{
             intro:{
                 ifAllOf:['isC'],
             },
-            onOverrides:{
-                ifAllOf:['overrides']
-            }
+            onLatestBehavior: 'latestBehavior'
         },
         style:{
             display: 'none',
@@ -74,6 +89,6 @@ const xe = new XE<BeHiveProps, BeHiveActions>({
     superclass: BeHiveCore
 });
 
-export const BeHive = xe.classDef!;
+export const BeHive = ce.classDef!;
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "be-hive",
-  "version": "0.0.50",
+  "version": "0.0.53",
   "keywords": [
     "web-components",
     "web-component",
@@ -27,15 +27,17 @@
     "doc": "custom-elements-manifest analyze"
   },
   "dependencies": {
-    "xtal-element": "0.0.499"
+    "trans-render": "0.0.562"
   },
   "devDependencies": {
-    "@playwright/test": "1.24.2",
+    "@playwright/test": "1.25.0",
     "@skypack/package-check": "0.2.2",
     "may-it-serve": "0.0.2",
     "@custom-elements-manifest/analyzer": "0.6.4",
-    "xtal-editor": "0.0.176",
-    "xtal-shell": "0.0.27"
+    "xtal-editor": "0.0.177",
+    "xtal-shell": "0.0.27",
+    "be-exportable": "0.0.23",
+    "be-functional": "0.0.8"
   },
   "repository": {
     "type": "git",

package/types.d.ts

@@ -4,6 +4,7 @@ export interface BehaviorKeys {
     ifWantsToBe: string,
     upgrade: string,
     localName: string,
+    block?: boolean,
 }
 
 
@@ -12,10 +13,12 @@ export interface BeHiveProps{
     isC: boolean;
     registeredBehaviors: {[key: string]: BehaviorKeys};
     latestBehavior: BehaviorKeys;
+    beSevered: boolean
 }
 
 export interface BeHiveActions{
     intro(self: this): void;
-    onOverrides(self: this): void;
+    //onOverrides(self: this): void;
+    onLatestBehavior(self: this): void;
     register(instance: BehaviorKeys): Element | undefined;
 }