be-hive 0.0.103 → 0.0.104

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/be-hive.js +174 -170
  2. package/beatify.js +57 -0
  3. package/package.json +2 -2
  4. package/types.d.ts +4 -0
package/be-hive.js CHANGED
@@ -1,170 +1,174 @@
1
- import 'be-enhanced/beEnhanced.js';
2
- export class BeHive extends HTMLElement {
3
- constructor() {
4
- super();
5
- this.registeredBehaviors = {};
6
- }
7
- async connectedCallback() {
8
- this.hidden = true;
9
- const overridesAttr = this.getAttribute('overrides');
10
- if (overridesAttr !== null) {
11
- this.overrides = JSON.parse(overridesAttr);
12
- }
13
- else {
14
- this.overrides = {};
15
- }
16
- this.#getInheritedBehaviors();
17
- this.#addMutationObserver();
18
- }
19
- disconnectedCallback() {
20
- if (this.#mutationObserver !== undefined) {
21
- this.#mutationObserver.disconnect();
22
- }
23
- }
24
- #getInheritedBehaviors() {
25
- const rn = this.getRootNode();
26
- const host = rn.host;
27
- if (!host)
28
- return;
29
- const parentShadowRealm = host.getRootNode();
30
- const parentBeHiveInstance = parentShadowRealm.querySelector('be-hive');
31
- if (parentBeHiveInstance !== null) {
32
- const { registeredBehaviors } = parentBeHiveInstance;
33
- for (const key in registeredBehaviors) {
34
- this.register(registeredBehaviors[key]);
35
- }
36
- parentBeHiveInstance.addEventListener('latest-behavior-changed', (e) => {
37
- this.register(e.detail.value);
38
- });
39
- }
40
- }
41
- #mutationObserver;
42
- #addMutationObserver() {
43
- const rn = this.getRootNode();
44
- const config = { attributes: true, childList: true, subtree: true };
45
- const callback = (mutationList, observer) => {
46
- for (const mutation of mutationList) {
47
- if (mutation.type === "childList") {
48
- //console.log("A child node has been added or removed.");
49
- for (const node of mutation.addedNodes) {
50
- this.#inspectNewNode(node);
51
- }
52
- for (const node of mutation.removedNodes) {
53
- const beEnhanced = node.beEnhanced;
54
- if (beEnhanced === undefined)
55
- continue;
56
- for (const key in beEnhanced) {
57
- const enhancement = beEnhanced[key];
58
- const detach = enhancement['detach'];
59
- if (typeof (detach) === 'function') {
60
- const boundDetach = detach.bind(enhancement);
61
- boundDetach(node);
62
- }
63
- }
64
- }
65
- }
66
- else if (mutation.type === "attributes") {
67
- //console.log(`The ${mutation.attributeName} attribute was modified.`);
68
- }
69
- }
70
- };
71
- // Create an observer instance linked to the callback function
72
- const observer = new MutationObserver(callback);
73
- observer.observe(rn, config);
74
- this.#mutationObserver = observer;
75
- }
76
- #inspectNewNode(node) {
77
- if (!(node instanceof Element))
78
- return;
79
- const { beEnhanced } = node;
80
- const { registeredBehaviors } = this;
81
- for (const key in registeredBehaviors) {
82
- const registeredBehavior = registeredBehaviors[key];
83
- const { upgrade } = registeredBehavior;
84
- if (!node.matches(upgrade))
85
- continue;
86
- const namespacedName = beEnhanced.getFQName(key);
87
- if (namespacedName === undefined)
88
- continue;
89
- beEnhanced.attachAttr(namespacedName, key);
90
- }
91
- }
92
- // #getPreciseMatch(key: string, node: Element, allowNonNamespaced = true){
93
- // if(allowNonNamespaced && node.matches(`[${key}]`)) return key;
94
- // let testKey = `enh-by-${key}`;
95
- // let test = `[${testKey}]`;
96
- // if(node.matches(test)) return testKey;
97
- // testKey = `data-enh-by-${key}`;
98
- // test = `[${testKey}]`;
99
- // if(node.matches(test)) return testKey;
100
- // return undefined;
101
- // }
102
- #scanForSingleRegisteredBehavior(localName, behaviorKeys) {
103
- const { ifWantsToBe, upgrade } = behaviorKeys;
104
- const attr = `${upgrade}[${localName}],${upgrade}[enh-by-${localName}],${upgrade}[data-enh-by-${localName}]`;
105
- const rn = this.getRootNode();
106
- rn.querySelectorAll(attr).forEach(el => {
107
- const { beEnhanced } = el;
108
- const namespacedName = beEnhanced.getFQName(localName);
109
- if (namespacedName === undefined)
110
- return;
111
- beEnhanced.attachAttr(namespacedName, localName);
112
- });
113
- }
114
- register(parentInstance) {
115
- const parentInstanceLocalName = parentInstance.localName;
116
- if (this.querySelector(parentInstanceLocalName) !== null)
117
- return;
118
- const override = this.overrides[parentInstanceLocalName];
119
- let newInstanceTagName = parentInstanceLocalName;
120
- let newIfWantsToBe = parentInstance.ifWantsToBe;
121
- let newDisabled = parentInstance.disabled;
122
- if (override !== undefined) {
123
- const { ifWantsToBe, block, unblock } = override;
124
- if (block) {
125
- newDisabled = true;
126
- }
127
- else if (unblock) {
128
- newDisabled = false;
129
- }
130
- if (ifWantsToBe) {
131
- newIfWantsToBe = ifWantsToBe;
132
- newInstanceTagName = 'be-' + ifWantsToBe;
133
- }
134
- }
135
- const beSevered = this.hasAttribute('be-severed');
136
- if (beSevered)
137
- newDisabled = true;
138
- const newBehaviorEl = document.createElement('template');
139
- Object.assign(newBehaviorEl.dataset, {
140
- localName: parentInstanceLocalName,
141
- ifWantsToBe: newIfWantsToBe,
142
- upgrade: parentInstance.upgrade,
143
- });
144
- //parentInstanceLocalName
145
- // newBehaviorEl.setAttribute('if-wants-to-be', newIfWantsToBe);
146
- // newBehaviorEl.setAttribute('upgrade', parentInstance.upgrade);
147
- if (newDisabled)
148
- newBehaviorEl.setAttribute('disabled', '');
149
- this.appendChild(newBehaviorEl);
150
- const newRegisteredBehavior = {
151
- ...parentInstance,
152
- ifWantsToBe: newIfWantsToBe,
153
- disabled: newDisabled,
154
- };
155
- this.registeredBehaviors[parentInstanceLocalName] = newRegisteredBehavior;
156
- this.#scanForSingleRegisteredBehavior(parentInstanceLocalName, newRegisteredBehavior);
157
- //console.log({newRegisteredBehavior});
158
- this.dispatchEvent(new CustomEvent('latest-behavior-changed', {
159
- detail: {
160
- value: newRegisteredBehavior,
161
- }
162
- }));
163
- //this.latestBehaviors = [...this.latestBehaviors, newRegisteredBehavior];
164
- //this.#doSweepingScan();
165
- return newBehaviorEl;
166
- }
167
- }
168
- if (!customElements.get('be-hive')) {
169
- customElements.define('be-hive', BeHive);
170
- }
1
+ import 'be-enhanced/beEnhanced.js';
2
+ export class BeHive extends HTMLElement {
3
+ constructor() {
4
+ super();
5
+ this.registeredBehaviors = {};
6
+ }
7
+ async connectedCallback() {
8
+ this.hidden = true;
9
+ const overridesAttr = this.getAttribute('overrides');
10
+ if (overridesAttr !== null) {
11
+ this.overrides = JSON.parse(overridesAttr);
12
+ }
13
+ else {
14
+ this.overrides = {};
15
+ }
16
+ this.#getInheritedBehaviors();
17
+ this.#addMutationObserver();
18
+ }
19
+ disconnectedCallback() {
20
+ if (this.#mutationObserver !== undefined) {
21
+ this.#mutationObserver.disconnect();
22
+ }
23
+ }
24
+ #getInheritedBehaviors() {
25
+ const rn = this.getRootNode();
26
+ const host = rn.host;
27
+ if (!host)
28
+ return;
29
+ const parentShadowRealm = host.getRootNode();
30
+ const parentBeHiveInstance = parentShadowRealm.querySelector('be-hive');
31
+ if (parentBeHiveInstance !== null) {
32
+ const { registeredBehaviors } = parentBeHiveInstance;
33
+ for (const key in registeredBehaviors) {
34
+ this.register(registeredBehaviors[key]);
35
+ }
36
+ parentBeHiveInstance.addEventListener('latest-behavior-changed', (e) => {
37
+ this.register(e.detail.value);
38
+ });
39
+ }
40
+ }
41
+ #mutationObserver;
42
+ #addMutationObserver() {
43
+ const rn = this.getRootNode();
44
+ const config = { attributes: true, childList: true, subtree: true };
45
+ const callback = (mutationList, observer) => {
46
+ for (const mutation of mutationList) {
47
+ if (mutation.type === "childList") {
48
+ //console.log("A child node has been added or removed.");
49
+ for (const node of mutation.addedNodes) {
50
+ this.#inspectNewNode(node);
51
+ }
52
+ for (const node of mutation.removedNodes) {
53
+ const beEnhanced = node.beEnhanced;
54
+ if (beEnhanced === undefined)
55
+ continue;
56
+ for (const key in beEnhanced) {
57
+ const enhancement = beEnhanced[key];
58
+ const detach = enhancement['detach'];
59
+ if (typeof (detach) === 'function') {
60
+ const boundDetach = detach.bind(enhancement);
61
+ boundDetach(node);
62
+ }
63
+ }
64
+ }
65
+ }
66
+ else if (mutation.type === "attributes") {
67
+ //console.log(`The ${mutation.attributeName} attribute was modified.`);
68
+ }
69
+ }
70
+ };
71
+ // Create an observer instance linked to the callback function
72
+ const observer = new MutationObserver(callback);
73
+ observer.observe(rn, config);
74
+ this.#mutationObserver = observer;
75
+ }
76
+ #inspectNewNode(node) {
77
+ if (!(node instanceof Element))
78
+ return;
79
+ const { beEnhanced } = node;
80
+ const { registeredBehaviors } = this;
81
+ for (const key in registeredBehaviors) {
82
+ const registeredBehavior = registeredBehaviors[key];
83
+ const { upgrade } = registeredBehavior;
84
+ if (!node.matches(upgrade))
85
+ continue;
86
+ const namespacedName = beEnhanced.getFQName(key);
87
+ if (namespacedName === undefined)
88
+ continue;
89
+ beEnhanced.attachAttr(namespacedName, key);
90
+ }
91
+ }
92
+ // #getPreciseMatch(key: string, node: Element, allowNonNamespaced = true){
93
+ // if(allowNonNamespaced && node.matches(`[${key}]`)) return key;
94
+ // let testKey = `enh-by-${key}`;
95
+ // let test = `[${testKey}]`;
96
+ // if(node.matches(test)) return testKey;
97
+ // testKey = `data-enh-by-${key}`;
98
+ // test = `[${testKey}]`;
99
+ // if(node.matches(test)) return testKey;
100
+ // return undefined;
101
+ // }
102
+ #scanForSingleRegisteredBehavior(localName, behaviorKeys) {
103
+ const { ifWantsToBe, upgrade } = behaviorKeys;
104
+ const attr = `${upgrade}[${localName}],${upgrade}[enh-by-${localName}],${upgrade}[data-enh-by-${localName}]`;
105
+ const rn = this.getRootNode();
106
+ rn.querySelectorAll(attr).forEach(el => {
107
+ const { beEnhanced } = el;
108
+ const namespacedName = beEnhanced.getFQName(localName);
109
+ if (namespacedName === undefined)
110
+ return;
111
+ beEnhanced.attachAttr(namespacedName, localName);
112
+ });
113
+ }
114
+ async beatify(content) {
115
+ const { beatify } = await import('./beatify.js');
116
+ return await beatify(content, this);
117
+ }
118
+ register(parentInstance) {
119
+ const parentInstanceLocalName = parentInstance.localName;
120
+ if (this.querySelector(parentInstanceLocalName) !== null)
121
+ return;
122
+ const override = this.overrides[parentInstanceLocalName];
123
+ let newInstanceTagName = parentInstanceLocalName;
124
+ let newIfWantsToBe = parentInstance.ifWantsToBe;
125
+ let newDisabled = parentInstance.disabled;
126
+ if (override !== undefined) {
127
+ const { ifWantsToBe, block, unblock } = override;
128
+ if (block) {
129
+ newDisabled = true;
130
+ }
131
+ else if (unblock) {
132
+ newDisabled = false;
133
+ }
134
+ if (ifWantsToBe) {
135
+ newIfWantsToBe = ifWantsToBe;
136
+ newInstanceTagName = 'be-' + ifWantsToBe;
137
+ }
138
+ }
139
+ const beSevered = this.hasAttribute('be-severed');
140
+ if (beSevered)
141
+ newDisabled = true;
142
+ const newBehaviorEl = document.createElement('template');
143
+ Object.assign(newBehaviorEl.dataset, {
144
+ localName: parentInstanceLocalName,
145
+ ifWantsToBe: newIfWantsToBe,
146
+ upgrade: parentInstance.upgrade,
147
+ });
148
+ //parentInstanceLocalName
149
+ // newBehaviorEl.setAttribute('if-wants-to-be', newIfWantsToBe);
150
+ // newBehaviorEl.setAttribute('upgrade', parentInstance.upgrade);
151
+ if (newDisabled)
152
+ newBehaviorEl.setAttribute('disabled', '');
153
+ this.appendChild(newBehaviorEl);
154
+ const newRegisteredBehavior = {
155
+ ...parentInstance,
156
+ ifWantsToBe: newIfWantsToBe,
157
+ disabled: newDisabled,
158
+ };
159
+ this.registeredBehaviors[parentInstanceLocalName] = newRegisteredBehavior;
160
+ this.#scanForSingleRegisteredBehavior(parentInstanceLocalName, newRegisteredBehavior);
161
+ //console.log({newRegisteredBehavior});
162
+ this.dispatchEvent(new CustomEvent('latest-behavior-changed', {
163
+ detail: {
164
+ value: newRegisteredBehavior,
165
+ }
166
+ }));
167
+ //this.latestBehaviors = [...this.latestBehaviors, newRegisteredBehavior];
168
+ //this.#doSweepingScan();
169
+ return newBehaviorEl;
170
+ }
171
+ }
172
+ if (!customElements.get('be-hive')) {
173
+ customElements.define('be-hive', BeHive);
174
+ }
package/beatify.js ADDED
@@ -0,0 +1,57 @@
1
+ export function beatify(content, beHive, options) {
2
+ const clone = content.cloneNode(true);
3
+ options = options || {
4
+ cleanMicrodata: true //TODO
5
+ };
6
+ const { registeredBehaviors } = beHive;
7
+ const map = new Map();
8
+ for (const key in registeredBehaviors) {
9
+ const registeredBehavior = registeredBehaviors[key];
10
+ const { ifWantsToBe } = registeredBehavior;
11
+ const qry = `[be-${ifWantsToBe}]`; //TODO: include enh-by- and data-enh-by
12
+ const enhancedElements = Array.from(clone.querySelectorAll(qry));
13
+ for (const el of enhancedElements) {
14
+ if (!map.has(el)) {
15
+ map.set(el, new Map());
16
+ }
17
+ const attr = `be-${ifWantsToBe}`;
18
+ const attrVal = el.getAttribute(attr);
19
+ const elMap = map.get(el);
20
+ elMap.set(ifWantsToBe, attrVal);
21
+ el.removeAttribute(attr);
22
+ }
23
+ }
24
+ for (const [el, m] of map) {
25
+ let be = '{';
26
+ for (const [key, val] of m) {
27
+ if (val.startsWith('{')) {
28
+ be += `"${key}": ${val}`;
29
+ }
30
+ else {
31
+ be += `"${key}": "${val}"`;
32
+ }
33
+ }
34
+ be += '}';
35
+ el.setAttribute('be', be);
36
+ }
37
+ return clone;
38
+ // const decoratorElements = Array.from(beHive.children) as any;
39
+ // for(const decorEl of decoratorElements){
40
+ // const ifWantsToBe = (decorEl as any as Element).getAttribute('if-wants-to-be');
41
+ // if(ifWantsToBe === undefined) continue;
42
+ // const isAttr = 'is-' + ifWantsToBe;
43
+ // const beAttr = 'be-' + ifWantsToBe;
44
+ // const qry = `[${isAttr}]`;
45
+ // const converted = Array.from(content.querySelectorAll(qry));
46
+ // if((content as Element).matches !== undefined && (content as Element).matches(qry)) converted.push(content as Element);
47
+ // for(const el of converted){
48
+ // const attr = el.getAttribute(isAttr)!;
49
+ // el.removeAttribute(isAttr);
50
+ // el.setAttribute(beAttr, attr);
51
+ // }
52
+ // }
53
+ }
54
+ export function beBeatified(element) {
55
+ const beHive = element.getRootNode().querySelector('be-hive');
56
+ beatify(element, beHive);
57
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "be-hive",
3
- "version": "0.0.103",
3
+ "version": "0.0.104",
4
4
  "keywords": [
5
5
  "web-components",
6
6
  "web-component",
@@ -26,7 +26,7 @@
26
26
  "serve": "node node_modules/may-it-serve/serve.js"
27
27
  },
28
28
  "dependencies": {
29
- "be-enhanced": "0.0.28"
29
+ "be-enhanced": "0.0.29"
30
30
  },
31
31
  "devDependencies": {
32
32
  "may-it-serve": "0.0.5"
package/types.d.ts CHANGED
@@ -20,6 +20,10 @@ export interface BeHiveProps{
20
20
 
21
21
  }
22
22
 
23
+ export interface BeatifyOptions{
24
+ cleanMicrodata?: boolean,
25
+ }
26
+
23
27
  export interface BeHiveActions{
24
28
  intro(self: this): void;
25
29
  //onOverrides(self: this): void;