@twobirds/microcomponents 0.0.82 → 0.0.84
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.
- package/assets/documentation/MC.md +0 -1
- package/assets/test/test.html +1 -1
- package/dist/MC.d.ts +11 -10
- package/dist/MC.d.ts.map +1 -1
- package/dist/MC.js +137 -200
- package/dist/MC.min.js +157 -296
- package/dist/MC.ts +202 -337
- package/dist/elements.d.ts +1 -1
- package/dist/elements.d.ts.map +1 -1
- package/dist/elements.js +26 -6
- package/dist/elements.min.js +1 -1
- package/dist/elements.ts +50 -7
- package/dist/formValues.js +2 -2
- package/dist/formValues.min.js +1 -1
- package/dist/formValues.ts +3 -3
- package/dist/microcomponents.d.ts +0 -1
- package/dist/microcomponents.d.ts.map +1 -1
- package/dist/microcomponents.js +0 -1
- package/dist/microcomponents.min.js +1 -1
- package/dist/microcomponents.ts +1 -1
- package/dist/observables.d.ts.map +1 -1
- package/dist/observables.js +52 -57
- package/dist/observables.min.js +1 -1
- package/dist/observables.ts +68 -73
- package/package.json +6 -5
- package/public/MC.d.ts +11 -10
- package/public/MC.d.ts.map +1 -1
- package/public/MC.js +137 -200
- package/public/MC.js.map +1 -1
- package/public/MC.min.js +157 -296
- package/public/MC.ts +202 -337
- package/public/documentation/MC.md +0 -1
- package/public/elements.d.ts +1 -1
- package/public/elements.d.ts.map +1 -1
- package/public/elements.js +26 -6
- package/public/elements.js.map +1 -1
- package/public/elements.min.js +1 -1
- package/public/elements.ts +50 -7
- package/public/formValues.js +2 -2
- package/public/formValues.js.map +1 -1
- package/public/formValues.min.js +1 -1
- package/public/formValues.ts +3 -3
- package/public/microcomponents.d.ts +0 -1
- package/public/microcomponents.d.ts.map +1 -1
- package/public/microcomponents.js +0 -1
- package/public/microcomponents.js.map +1 -1
- package/public/microcomponents.min.js +1 -1
- package/public/microcomponents.ts +1 -1
- package/public/observables.d.ts.map +1 -1
- package/public/observables.js +52 -57
- package/public/observables.js.map +1 -1
- package/public/observables.min.js +1 -1
- package/public/observables.ts +68 -73
- package/public/{test/selectors.ts → selectors._ts} +2 -367
- package/public/src/MC.d.ts +37 -0
- package/public/src/MC.d.ts.map +1 -0
- package/public/src/MC.js +316 -0
- package/public/src/MC.js.map +1 -0
- package/public/src/MC.ts +202 -337
- package/public/src/elements.d.ts +5 -0
- package/public/src/elements.d.ts.map +1 -0
- package/public/src/elements.js +68 -0
- package/public/src/elements.js.map +1 -0
- package/public/src/elements.ts +50 -7
- package/public/src/formValues.d.ts +3 -0
- package/public/src/formValues.d.ts.map +1 -0
- package/public/src/formValues.js +162 -0
- package/public/src/formValues.js.map +1 -0
- package/public/src/formValues.ts +3 -3
- package/public/src/helpers.d.ts +14 -0
- package/public/src/helpers.d.ts.map +1 -0
- package/public/src/helpers.js +113 -0
- package/public/src/microcomponents.d.ts +6 -0
- package/public/src/microcomponents.d.ts.map +1 -0
- package/public/src/microcomponents.js +7 -0
- package/public/src/microcomponents.js.map +1 -0
- package/public/src/microcomponents.ts +1 -1
- package/public/src/observables.d.ts +11 -0
- package/public/src/observables.d.ts.map +1 -0
- package/public/src/observables.js +244 -0
- package/public/src/observables.js.map +1 -0
- package/public/src/observables.ts +68 -73
- package/public/{selectors.ts → src/selectors._ts} +2 -367
- package/public/src/test/grandparent.css +11 -0
- package/public/src/test/test/child.d.ts +2 -0
- package/public/src/test/test/child.d.ts.map +1 -0
- package/public/src/test/test/child.js +15 -0
- package/public/src/test/test/child.js.map +1 -0
- package/public/src/test/test/child.ts +21 -0
- package/public/src/test/test/grandchild.d.ts +2 -0
- package/public/src/test/test/grandchild.d.ts.map +1 -0
- package/public/src/test/test/grandchild.js +15 -0
- package/public/src/test/test/grandchild.js.map +1 -0
- package/public/src/test/test/grandchild.ts +21 -0
- package/public/src/test/test/grandparent.d.ts +2 -0
- package/public/src/test/test/grandparent.d.ts.map +1 -0
- package/public/src/test/test/grandparent.js +1 -0
- package/public/src/test/test/grandparent.js.map +1 -0
- package/public/src/test/test/grandparent.ts +29 -0
- package/public/src/test/test/greatgrandchild.d.ts +2 -0
- package/public/src/test/test/greatgrandchild.d.ts.map +1 -0
- package/public/src/test/test/greatgrandchild.js +29 -0
- package/public/src/test/test/greatgrandchild.js.map +1 -0
- package/public/src/test/test/greatgrandchild.ts +42 -0
- package/public/src/test/test/parent.d.ts +2 -0
- package/public/src/test/test/parent.d.ts.map +1 -0
- package/public/src/test/test/parent.js +15 -0
- package/public/src/test/test/parent.js.map +1 -0
- package/public/src/test/test/parent.ts +21 -0
- package/public/src/test/test/testform.d.ts +2 -0
- package/public/src/test/test/testform.d.ts.map +1 -0
- package/public/src/test/test/testform.js +1 -0
- package/public/src/test/test/testform.js.map +1 -0
- package/public/src/test/test/testform.ts +153 -0
- package/public/src/test/test/testfunction.d.ts +3 -0
- package/public/src/test/test/testfunction.d.ts.map +1 -0
- package/public/src/test/test/testfunction.js +7 -0
- package/public/src/test/test/testfunction.js.map +1 -0
- package/public/src/test/test/testfunction.ts +12 -0
- package/public/src/test/test/testmc.d.ts +3 -0
- package/public/src/test/test/testmc.d.ts.map +1 -0
- package/public/src/test/test/testmc.js +10 -0
- package/public/src/test/test/testmc.js.map +1 -0
- package/public/src/test/test/testmc.ts +16 -0
- package/public/src/test/test/testsimpleclass.d.ts +3 -0
- package/public/src/test/test/testsimpleclass.d.ts.map +1 -0
- package/public/src/test/test/testsimpleclass.js +9 -0
- package/public/src/test/test/testsimpleclass.js.map +1 -0
- package/public/src/test/test/testsimpleclass.ts +15 -0
- package/public/src/test/test.d.ts +2 -0
- package/public/src/test/test.d.ts.map +1 -0
- package/public/src/test/test.js +80 -0
- package/public/src/test/test.js.map +1 -0
- package/public/src/test/test.ts +188 -0
- package/public/src/test/testform.css +47 -0
- package/public/src/test/testform.html +56 -0
- package/public/src/test/testform.json +27 -0
- package/public/test/MC.d.ts +11 -10
- package/public/test/MC.d.ts.map +1 -1
- package/public/test/MC.js +137 -200
- package/public/test/MC.min.js +377 -0
- package/public/test/MC.ts +202 -337
- package/public/test/elements.d.ts +1 -1
- package/public/test/elements.d.ts.map +1 -1
- package/public/test/elements.js +26 -6
- package/public/test/elements.min.js +1 -0
- package/public/test/elements.ts +50 -7
- package/public/test/formValues.js +2 -2
- package/public/test/formValues.min.js +1 -0
- package/public/test/formValues.ts +3 -3
- package/public/test/grandparent.css +1 -3
- package/public/test/microcomponents.d.ts +0 -1
- package/public/test/microcomponents.d.ts.map +1 -1
- package/public/test/microcomponents.js +0 -1
- package/public/test/microcomponents.min.js +1 -1
- package/public/test/microcomponents.ts +1 -1
- package/public/test/observables.d.ts.map +1 -1
- package/public/test/observables.js +52 -57
- package/public/test/observables.min.js +1 -0
- package/public/test/observables.ts +68 -73
- package/public/test/test/child.ts +21 -0
- package/public/test/test/grandchild.ts +21 -0
- package/public/test/test/grandparent.d.ts.map +1 -1
- package/public/test/test/grandparent.js +1 -1
- package/public/test/test/grandparent.js.map +1 -1
- package/public/test/test/grandparent.ts +29 -0
- package/public/test/test/greatgrandchild.ts +42 -0
- package/public/test/test/parent.ts +21 -0
- package/public/test/test/testform.js +1 -1
- package/public/test/test/testform.js.map +1 -1
- package/public/test/test/testform.ts +153 -0
- package/public/test/test/testfunction.d.ts +3 -0
- package/public/test/test/testfunction.d.ts.map +1 -0
- package/public/test/test/testfunction.js +7 -0
- package/public/test/test/testfunction.js.map +1 -0
- package/public/test/test/testfunction.ts +12 -0
- package/public/test/test/testmc.d.ts +2 -5
- package/public/test/test/testmc.d.ts.map +1 -1
- package/public/test/test/testmc.js +4 -4
- package/public/test/test/testmc.js.map +1 -1
- package/public/test/test/testmc.ts +16 -0
- package/public/test/test/testsimpleclass.d.ts +3 -0
- package/public/test/test/testsimpleclass.d.ts.map +1 -0
- package/public/test/test/testsimpleclass.js +9 -0
- package/public/test/test/testsimpleclass.js.map +1 -0
- package/public/test/test/testsimpleclass.ts +15 -0
- package/public/test/test.html +1 -1
- package/public/test/test.js +5 -6
- package/public/test/test.js.map +1 -1
- package/public/test/test.ts +188 -0
- package/public/test/testform.css +47 -0
- package/public/test/testform.html +56 -0
- package/public/test/testform.json +3 -3
- package/public/typedoc/assets/navigation.js +1 -1
- package/public/typedoc/assets/search.js +1 -1
- package/public/typedoc/classes/MC.DC.html +6 -4
- package/public/typedoc/classes/MC.MC.html +3 -4
- package/public/typedoc/classes/MC.McBase.html +2 -2
- package/public/typedoc/functions/MC.autoload.html +1 -1
- package/public/typedoc/functions/MC.off.html +1 -0
- package/public/typedoc/functions/MC.on.html +1 -0
- package/public/typedoc/functions/MC.one.html +1 -0
- package/public/typedoc/functions/elements.defineCE.html +1 -1
- package/public/typedoc/functions/elements.getCE.html +1 -1
- package/public/typedoc/functions/formValues.formValues.html +1 -1
- package/public/typedoc/functions/observables.observe.html +1 -1
- package/public/typedoc/interfaces/MC.HTMLMcElement.html +2 -2
- package/public/typedoc/modules/MC.html +7 -6
- package/public/typedoc/modules/elements.html +1 -1
- package/public/typedoc/modules/formValues.html +1 -1
- package/public/typedoc/modules/observables.html +1 -1
- package/public/typedoc/types/observables.Observable.html +1 -1
- package/src/MC.ts +202 -337
- package/src/elements.ts +50 -7
- package/src/formValues.ts +3 -3
- package/src/microcomponents.ts +1 -1
- package/src/observables.ts +68 -73
- package/{dist/selectors.ts → src/selectors._ts} +2 -367
- package/src/test/test/grandparent.ts +12 -4
- package/src/test/test/testform.ts +13 -11
- package/src/test/test/testfunction.ts +12 -0
- package/src/test/test/testmc.ts +13 -9
- package/src/test/test/testsimpleclass.ts +15 -0
- package/src/test/test.ts +8 -20
- package/tasks.md +36 -0
- package/tsconfig.json +2 -2
- package/typedoc.json +1 -1
- package/webpack.config.js +2 -2
- package/dist/McEvent.d.ts +0 -15
- package/dist/McEvent.d.ts.map +0 -1
- package/dist/McEvent.js +0 -71
- package/dist/selectors.d.ts +0 -108
- package/dist/selectors.d.ts.map +0 -1
- package/dist/selectors.js +0 -971
- package/dist/selectors.min.js +0 -1
- package/public/McEvent.d.ts +0 -15
- package/public/McEvent.d.ts.map +0 -1
- package/public/McEvent.js +0 -71
- package/public/McEvent.js.map +0 -1
- package/public/selectors.d.ts +0 -108
- package/public/selectors.d.ts.map +0 -1
- package/public/selectors.js +0 -971
- package/public/selectors.js.map +0 -1
- package/public/selectors.min.js +0 -1
- package/public/src/selectors.ts +0 -1634
- package/public/test/MC.js.map +0 -1
- package/public/test/McEvent.d.ts +0 -15
- package/public/test/McEvent.d.ts.map +0 -1
- package/public/test/McEvent.js +0 -71
- package/public/test/McEvent.js.map +0 -1
- package/public/test/McEvent.ts +0 -96
- package/public/test/elements.js.map +0 -1
- package/public/test/formValues.js.map +0 -1
- package/public/test/microcomponents.js.map +0 -1
- package/public/test/observables.js.map +0 -1
- package/public/test/selectors.d.ts +0 -108
- package/public/test/selectors.d.ts.map +0 -1
- package/public/test/selectors.js +0 -971
- package/public/test/selectors.js.map +0 -1
- package/public/typedoc/classes/MC.McEvent.html +0 -9
- package/public/typedoc/functions/MC.addListener.html +0 -1
- package/public/typedoc/functions/MC.removeListener.html +0 -1
- package/src/McEvent.ts +0 -96
- package/src/selectors.ts +0 -1634
- /package/{dist/McEvent.ts → public/McEvent._ts} +0 -0
- /package/public/{McEvent.ts → src/McEvent._ts} +0 -0
- /package/public/{test → src}/helpers.js.map +0 -0
- /package/{public/src/McEvent.ts → src/McEvent._ts} +0 -0
package/dist/observables.js
CHANGED
|
@@ -1,17 +1,16 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
import { debounce, deepEqual, flattenObject, copyGettersSetters, } from './helpers.js';
|
|
3
|
-
import { DC } from './MC.js';
|
|
3
|
+
import { DC, trigger } from './MC.js';
|
|
4
4
|
function isObservableObject(value) {
|
|
5
5
|
return value != null && typeof value === 'object';
|
|
6
6
|
}
|
|
7
7
|
function getPlaceholders(target) {
|
|
8
8
|
let placeholders = new Set(), regEx = /\{[^\{\}]*\}/g;
|
|
9
|
-
target
|
|
10
|
-
.getAttributeNames()
|
|
9
|
+
(!!target.getAttributeNames ? target.getAttributeNames() : [])
|
|
11
10
|
.filter((attr) => target.getAttribute(attr)?.match(regEx))
|
|
12
11
|
.forEach((attr) => {
|
|
13
|
-
let
|
|
14
|
-
|
|
12
|
+
let placeholders = new Set(target.getAttribute(attr)?.match(regEx));
|
|
13
|
+
placeholders.forEach((placeholder) => placeholders.add(placeholder.replace(/[\{\}]/g, '')));
|
|
15
14
|
});
|
|
16
15
|
[...target.childNodes]
|
|
17
16
|
.filter((childNode) => {
|
|
@@ -33,22 +32,19 @@ class Placeholders extends DC {
|
|
|
33
32
|
oldDisplay = '';
|
|
34
33
|
constructor(target) {
|
|
35
34
|
super(target);
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
that.#attachCallbacks();
|
|
40
|
-
delete that._mc;
|
|
35
|
+
getPlaceholders(target).forEach((property) => (this.data[property] = ''));
|
|
36
|
+
observe(this);
|
|
37
|
+
this.#attachCallbacks();
|
|
41
38
|
}
|
|
42
39
|
#attachCallbacks() {
|
|
43
|
-
let
|
|
44
|
-
target
|
|
45
|
-
.getAttributeNames()
|
|
40
|
+
let target = this.target, hide = false;
|
|
41
|
+
(!!target.getAttributeNames ? target.getAttributeNames() : [])
|
|
46
42
|
.filter((attr) => target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g))
|
|
47
43
|
.forEach((attr) => {
|
|
48
|
-
let
|
|
49
|
-
|
|
44
|
+
let placeholders = new Set(target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g));
|
|
45
|
+
this.data.observe(((template) => (data) => {
|
|
50
46
|
let result = template;
|
|
51
|
-
|
|
47
|
+
placeholders.forEach((placeholder) => {
|
|
52
48
|
result = result.replace(placeholder, data[placeholder.replace(/[\{\}]/g, '')]);
|
|
53
49
|
});
|
|
54
50
|
target.setAttribute(attr, result);
|
|
@@ -61,26 +57,22 @@ class Placeholders extends DC {
|
|
|
61
57
|
})
|
|
62
58
|
.forEach((childNode) => {
|
|
63
59
|
hide = true;
|
|
64
|
-
let
|
|
65
|
-
|
|
60
|
+
let placeholders = new Set(childNode.nodeValue.match(/\{[^\{\}]*\}/g));
|
|
61
|
+
this.data.observe(((template) => (data) => {
|
|
66
62
|
let result = template;
|
|
67
|
-
|
|
63
|
+
placeholders.forEach((placeholder) => {
|
|
68
64
|
result = result.replace(placeholder, data[placeholder.replace(/[\{\}]/g, '')]);
|
|
69
65
|
});
|
|
70
|
-
if (
|
|
71
|
-
|
|
72
|
-
})) {
|
|
73
|
-
if (!!that.oldDisplay) {
|
|
74
|
-
target.style = that.oldDisplay;
|
|
75
|
-
}
|
|
76
|
-
else {
|
|
77
|
-
target.removeAttribute('style');
|
|
78
|
-
}
|
|
79
|
-
delete that.oldDisplay;
|
|
66
|
+
if (!!this.oldDisplay) {
|
|
67
|
+
target.style = this.oldDisplay;
|
|
80
68
|
}
|
|
69
|
+
else {
|
|
70
|
+
target.removeAttribute('style');
|
|
71
|
+
}
|
|
72
|
+
delete this.oldDisplay;
|
|
81
73
|
childNode.nodeValue = result;
|
|
82
74
|
})(childNode.nodeValue));
|
|
83
|
-
|
|
75
|
+
this.oldDisplay = target.getAttribute('style') || '';
|
|
84
76
|
if (hide &&
|
|
85
77
|
!inputs.includes(target.constructor) &&
|
|
86
78
|
target.tagName !== 'FIELDSET') {
|
|
@@ -89,20 +81,21 @@ class Placeholders extends DC {
|
|
|
89
81
|
});
|
|
90
82
|
}
|
|
91
83
|
onData(ev) {
|
|
92
|
-
let
|
|
93
|
-
Object.keys(ev.data).forEach((key) => {
|
|
94
|
-
if (
|
|
95
|
-
data[key] = ev.data[key];
|
|
84
|
+
let data = {};
|
|
85
|
+
Object.keys(ev.detail.data).forEach((key) => {
|
|
86
|
+
if (this.data.hasOwnProperty(key))
|
|
87
|
+
data[key] = ev.detail.data[key];
|
|
96
88
|
});
|
|
97
|
-
if (JSON.stringify(data) !== JSON.stringify(
|
|
98
|
-
Object.assign(
|
|
89
|
+
if (JSON.stringify(data) !== JSON.stringify(this.data))
|
|
90
|
+
Object.assign(this.data, data);
|
|
99
91
|
}
|
|
100
92
|
}
|
|
101
93
|
function getPlaceholderElements(target) {
|
|
102
|
-
let elements =
|
|
94
|
+
let elements = [target]
|
|
103
95
|
.concat([...target.querySelectorAll('*')])
|
|
104
96
|
.filter((e) => !!getPlaceholders(e).length)
|
|
105
|
-
.filter((e) => e
|
|
97
|
+
.filter((e) => e?.tagName !== 'STYLE')
|
|
98
|
+
.reverse();
|
|
106
99
|
return elements;
|
|
107
100
|
}
|
|
108
101
|
function makePlaceholders(element) {
|
|
@@ -133,45 +126,47 @@ function makeObservable(val) {
|
|
|
133
126
|
set callbacks(callbacks) {
|
|
134
127
|
this.#callbacks = callbacks;
|
|
135
128
|
}
|
|
136
|
-
observe(
|
|
137
|
-
this.#callbacks.push(
|
|
129
|
+
observe(callback) {
|
|
130
|
+
this.#callbacks.push(callback);
|
|
138
131
|
return this;
|
|
139
132
|
}
|
|
140
133
|
bind(target) {
|
|
141
|
-
const
|
|
134
|
+
const iso = isObservableObject(this.valueOf());
|
|
142
135
|
if (iso) {
|
|
143
136
|
makePlaceholders(target);
|
|
144
137
|
const placeholders = [
|
|
145
|
-
|
|
146
|
-
|
|
138
|
+
target,
|
|
139
|
+
...target.querySelectorAll('[data-mc]'),
|
|
140
|
+
]
|
|
141
|
+
.filter((e) => !!e?._mc?._placeholders);
|
|
147
142
|
const func = function callback(data) {
|
|
148
|
-
let
|
|
149
|
-
placeholders.forEach((
|
|
150
|
-
if (!
|
|
143
|
+
let flattenedData = flattenObject(data);
|
|
144
|
+
placeholders.forEach((node) => {
|
|
145
|
+
if (!node)
|
|
151
146
|
return;
|
|
152
|
-
|
|
147
|
+
trigger(node, 'data', flattenedData);
|
|
153
148
|
});
|
|
154
149
|
};
|
|
155
|
-
|
|
156
|
-
|
|
150
|
+
this.#callbacks.push(func);
|
|
151
|
+
this.notify();
|
|
157
152
|
}
|
|
158
153
|
else {
|
|
159
|
-
console.warn('IGNORED - cannot bind a non-Object to the dom, IS:', typeof
|
|
154
|
+
console.warn('IGNORED - cannot bind a non-Object to the dom, IS:', typeof this.valueOf(), this);
|
|
160
155
|
}
|
|
161
156
|
return this;
|
|
162
157
|
}
|
|
163
158
|
notify(notify) {
|
|
164
|
-
let
|
|
165
|
-
|
|
166
|
-
? structuredClone(Object.assign({},
|
|
167
|
-
:
|
|
159
|
+
let data = isObservableObject(this.valueOf()) &&
|
|
160
|
+
this.valueOf() instanceof Array === false
|
|
161
|
+
? structuredClone(Object.assign({}, this))
|
|
162
|
+
: this.valueOf();
|
|
168
163
|
if (notify !== undefined) {
|
|
169
|
-
|
|
164
|
+
this.#notify = notify;
|
|
170
165
|
}
|
|
171
|
-
|
|
166
|
+
this.#callbacks.forEach((f) => {
|
|
172
167
|
f(data);
|
|
173
168
|
});
|
|
174
|
-
return
|
|
169
|
+
return this;
|
|
175
170
|
}
|
|
176
171
|
};
|
|
177
172
|
classRepo[ConstructorName] = ObservableClass;
|
package/dist/observables.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.observables=e():t.observables=e()}(this,(()=>(()=>{"use strict";var t={d:(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function r(t){let e={};return[...Object.keys(t)].sort().forEach((n=>{var o;(o=t[n])&&o.constructor&&o.constructor===Object?e[n]=r(t[n]):e[n]=t[n]})),e}function n(t,e=!0){let o={};return[...Object.getOwnPropertyNames(t)].forEach((e=>{if(t[e]&&t[e].constructor&&t[e].constructor===Object){const r=n(t[e],!1);for(const t in r)o[e+"."+t]=r[t]}else o[e]=t[e]})),e?r(o):o}function o(t,e){return JSON.stringify(n(t))===JSON.stringify(n(e))}function c(t,e){let r;return()=>{clearTimeout(r),r=setTimeout((function(){t(...arguments)}),e)}}t.r(e),t.d(e,{observe:()=>x});var a=new Function("try {return this===window;}catch(e){ return false;}");let s=new Set;a()&&Object.keys(HTMLElement.prototype).filter((t=>/^on/.test(t))).forEach((t=>s.add(t)));class i{#t;#e=!1;#r=!1;constructor(t,e={},r="l"){this.#t=t,this.data=e,this.bubble=r}get type(){return this.#t}get stopped(){return this.#e}get immediateStopped(){return this.#r}stopPropagation(){this.#e=!0}stopImmediatePropagation(){this.stopPropagation(),this.#r=!0}}var l=new Function("try {return this===window;}catch(e){ return false;}");let u=new Set;function d(t,e){let r=[];return t.forEach((t=>{if(t&&t instanceof HTMLElement){const n=t?._mc;!e&&n?r=r.concat(Object.values(t._mc)):e&&n&&n[e]&&r.push(n[e])}})),r}function f(t,e,r=!0){let n=[];for(;t;){if(t._mc&&(e?e&&t._mc[e]&&n.push(t._mc[e]):n=n.concat(Object.values(t._mc)),r))return n;t=t.parentNode}return n}function m(t){return t&&t instanceof HTMLElement}function p(t,e,r,n=!1,o=!1){let c={once:!1};n&&(c.capture=n),o&&(c.once=o),t.addEventListener(e,r,c)}function b(t,e,r={}){let n=t;if(!n._mc){let e=E?.debug;E.debug=!1,n._mc=new E(t),E.debug=e,delete n._mc._mc}const o=n._mc;return e.length&&!o[e]&&(o[e]=r,t instanceof HTMLElement&&!t.getAttribute("_mc")&&t.setAttribute("_mc","")),r}function g(t,e){if(!e)return;const r=t?._mc||{};r&&r[e]&&delete r[e],!Object.keys(r).length&&t instanceof HTMLElement&&t.hasAttribute("_mc")&&t.removeAttribute("_mc")}function h(t,e,r={},n="l"){let o=t?._mc;if(!o)return;let c=e instanceof i?new i(e.type,e.data,"l"):new i(e,r,"l"),a="string"!=typeof e?e:new i(e,r,n);[...Object.values(o)].forEach((t=>{t?.trigger&&"function"==typeof t?.trigger&&t?.trigger(c)})),/[ud]/.test(a.bubble)&&y(t,a)}function y(t,e){/[ud]/.test(e.bubble)&&setTimeout((()=>{if(-1===e.bubble.indexOf("l")&&(e.bubble+="l"),e.bubble.indexOf("u")>-1){let r=f(t,"",!0)?.[0].target;r&&E.trigger(r,e)}e.bubble.indexOf("d")>-1&&new Set(t._mc.children().map((t=>t?.target))).forEach((t=>{t&&E.trigger(t,e)}))}),0)}l()&&Object.keys(HTMLElement.prototype).filter((t=>/^on/.test(t))).forEach((t=>u.add(t)));class O{#n;constructor(t,e=!1){var r;this.#n=new WeakRef(t||{}),(r=this).constructor!==E&&setTimeout((()=>{r.trigger("Init")}),0),function(t){if(!l()||t.constructor===E)return;const e=t.target;if(e instanceof HTMLElement){let r=t;Object.getOwnPropertyNames(r.constructor.prototype).filter((t=>/^on[A-Z]|one[A-Z]/.test(t)&&"function"==typeof r.constructor.prototype[t])).forEach((n=>{let o=/^one/.test(n),c=n.replace(/^on[e]{0,1}/,""),a=c.toLowerCase();o&&Object.defineProperty(t,"on"+c,{configurable:!0,enumerable:!1,writable:!0,value:t=>{r.constructor.prototype[n].bind(r)(t)}}),u.has("on"+a)&&p(e,a,(t=>{r.trigger(c,t)}),!1,o)}))}}(this)}get target(){return this.#n.deref()}}class w extends O{_mc={};constructor(t){super(t)}static trigger=h;trigger(t,e={},r="l"){let n=this;if(n.constructor===w||n.constructor===E){let o=t instanceof i?new i(t.type,t.data,"l"):new i(t,e,"l"),c="string"!=typeof t?t:new i(t,e,r);return[...Object.getOwnPropertyNames(n)].forEach((t=>{n[t]?.trigger&&"function"==typeof n[t]?.trigger&&n[t]?.trigger(o)})),void(/[ud]/.test(c.bubble)&&y(n.target,c))}if(n instanceof w||n instanceof E){const n=this,o="string"!=typeof t?t:new i(t,e,r),c="on"+o.type[0].toUpperCase()+o.type.slice(1);if(o.bubble.indexOf("l")>-1&&(o.immediateStopped||"function"!=typeof n[c]||(n[c](o),n.hasOwnProperty(c)&&delete n[c])),o.stopped||"l"===o.bubble)return n;/[ud]/.test(o.bubble)&&y(n.target,o)}}}class E extends O{_mc={};constructor(t,e=!1){super(t)}static add=b;static remove=g;static trigger=h;trigger(t,e={},r){w.prototype.trigger.call(this,t,e,r)}parent(t=""){let e=this.target;return m(e)?f(e.parentNode,t,!0):[]}ancestors(t=""){let e=this?.target;return m(e)?f(this.target.parentNode,t,!1):[]}children(t=""){let e=this?.target;if(!m(e))return[];const r=Math.random().toString().replace(".",""),n='[_mc]:not([temp_id="'+r+'"] [_mc] [_mc])';e.setAttribute("temp_id",r);const o=d([...e.querySelectorAll(n)],t);return e.removeAttribute("temp_id"),o}descendants(t=""){let e=this?.target;return m(e)?d([...e.querySelectorAll("*[_mc]")],t):[]}}const v=new Map,_=new Map;function A(t){const e="./"+t.split("-").join("/")+".js",r=document.createElement("script");return r.setAttribute("src",e),r.setAttribute("blocking","render"),r.async=!0,r.setAttribute("type","module"),r.setAttribute("name",t),r.setAttribute("loading",""),p(r,"load",(t=>{r.removeAttribute("loading"),r.setAttribute("loaded","")})),p(r,"error",(t=>{console.error("could not load Custom Element code from",e)})),r}function j(){[...document.querySelectorAll(":not(:defined)")].filter((t=>!!t&&!customElements.get(t.tagName.toLowerCase())&&!v.has(t.tagName.toLowerCase()))).forEach((t=>{const e=t.tagName.toLowerCase(),r=(e.split("-").join("/"),A(e));p(r,"load",(()=>{v.set(e,customElements.get(t.tagName.toLowerCase()))})),v.set(e,"loading"),document.head.append(r)})),[...document.querySelectorAll('[_mc]:not([_mc=""]')].filter((t=>!!t)).forEach((t=>{const e=t.getAttribute("_mc")?.split(" ").filter((t=>!!t))||[],r=e.filter((t=>!_.has(t)));r?.forEach((t=>{const e=A(t);p(e,"load",(()=>{return e=document.head.querySelector(`script[name="${t}"]`),void setTimeout((function(){const t=e.getAttribute("src"),r=e.getAttribute("name"),n=document.createElement("script");n.async=!0,n.setAttribute("type","module");const o=`\n\n\t\t\timport _ from "${t}";\n\t\t\timport { DC } from "./microcomponents.js";\n\n\t\t\tconst elements = Array.from(document.querySelectorAll('[_mc*="${r}"]')).filter( element => element instanceof HTMLElement );\n\n\t\t\telements.forEach((element) => {\n\t\t\t\t// add class to MCs repository\n\t\t\t\tautoload.state.MCs.set( '${r}', _ );\n\t\t\t\t// add instance to HTMLElement \n\t\t\t\tDC.add(element, _.name, new _(element));\n\t\t\t\t// remove instance name from elements "_mc" attribute\n\t\t\t\telement.setAttribute('_mc', element.getAttribute('_mc').replace('${r}', '').replace( /ww/g, ' ').trim()); \n\t\t\t});\n\n\t\t\tsetTimeout( () => {\n\t\t\t\tdocument.body.querySelector('script[name="${r}]"')?.remove();\n\t\t\t},0);\n\n\t\t`;n.innerHTML=o,document.body.append(n)}),0);var e})),_.set(t,"loading"),document.head.append(e)}));const n=e.filter((t=>_.has(t)&&!_.get(t).length));n?.forEach((e=>{setTimeout((()=>{E.add(t,e,new(N.state.MCs.get(e))(t)),t.getAttribute("_mc").replace("${elementName}","").replace(/\w\w/g," ").trim(),t.setAttribute("_mc")}),5)}))}))}let S=!1,T=null;function N(t=!0){return t?(S=t,T=new MutationObserver(j),setTimeout((()=>{T.observe(document.body,{childList:!0,subtree:!0}),j()}),5),window.autoload=window.autoload||N,S):(T?.disconnect(),T=null,S)}function M(t){return null!=t&&"object"==typeof t}function C(t){let e=new Set,r=/\{[^\{\}]*\}/g;return t.getAttributeNames().filter((e=>t.getAttribute(e)?.match(r))).forEach((n=>{new Set(t.getAttribute(n)?.match(r)).forEach((t=>e.add(t.replace(/[\{\}]/g,""))))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(r))).forEach((t=>{(t.nodeValue||"").match(r).forEach((t=>{e.add(t.replace(/[\{\}]/g,""))}))})),[...e].map((t=>t.replace(/[\{\}]/g,"")))}N.state={CEs:v,MCs:_};const L=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class k extends E{data={};oldDisplay="";constructor(t){super(t);let e=this;C(t).forEach((t=>e.data[t]="")),x(e),e.#o(),delete e._mc}#o(){let t=this,e=t.target,r=!1;e.getAttributeNames().filter((t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g))).forEach((r=>{let n=new Set(e.getAttribute(r)?.match(/\{[^\{\}]*\}/g));var o;t.data.observe((o=e.getAttribute(r),t=>{let c=o;n.forEach((e=>{c=c.replace(e,t[e.replace(/[\{\}]/g,"")])})),e.setAttribute(r,c)}))})),[...e.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((n=>{r=!0;let o=new Set(n.nodeValue.match(/\{[^\{\}]*\}/g));var c;t.data.observe((c=n.nodeValue,r=>{let a=c;o.forEach((t=>{a=a.replace(t,r[t.replace(/[\{\}]/g,"")])})),Object.keys(r).some((t=>!!r[t]))&&(t.oldDisplay?e.style=t.oldDisplay:e.removeAttribute("style"),delete t.oldDisplay),n.nodeValue=a})),t.oldDisplay=e.getAttribute("style)")||"",r&&!L.includes(e.constructor)&&"FIELDSET"!==e.tagName&&(e.style.display="none")}))}onData(t){let e=this,r={};Object.keys(t.data).forEach((n=>{e.data.hasOwnProperty(n)&&(r[n]=t.data[n])})),JSON.stringify(r)!==JSON.stringify(e.data)&&Object.assign(e.data,r)}}const P={};function H(t){let e=t.constructor.name;return P[e]||function(t){const e=t.constructor,r=e.name;let o=class extends e{#c=!0;#a=[];constructor(t){super(t),this.constructor.callbacks=[],M(t)&&Object.getOwnPropertyNames(t).forEach((e=>{this[e]=t[e]}))}get callbacks(){return this.#a}set callbacks(t){this.#a=t}observe(t){return this.#a.push(t),this}bind(t){const e=this;if(M(e.valueOf())){!function(t){var e;(e=t,(e instanceof HTMLElement?[e]:[]).concat([...e.querySelectorAll("*")]).filter((t=>!!C(t).length)).filter((t=>"STYLE"!==t.tagName))).forEach((t=>{t?._mc?._placeholders||E.add(t,"_placeholders",new k(t))}))}(t);const r=[...t.querySelectorAll("[_mc]")].filter((t=>!!t?._mc?._placeholders)),o=function(t){let e=n(t);r.forEach((t=>{t&&t._mc.trigger("data",e)}))};e.#a.push(o),e.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof e.valueOf(),e);return this}notify(t){let e=this,r=M(e.valueOf())&&e.valueOf()instanceof Array==0?structuredClone(Object.assign({},e)):e.valueOf();return void 0!==t&&(e.#c=t),e.#a.forEach((t=>{t(r)})),e}};return P[r]=o,o}(t)}const x=(t,e)=>((e?[e]:[...Object.getOwnPropertyNames(t)]).forEach((e=>{if(t.hasOwnProperty(e)&&"function"!=typeof t[e]&&!t?.[e]?.constructor?.prototype?.observe){if("_"===e[0]||void 0===t?.[e])return t;let r=t[e],n=new(H(r))(r);Object.defineProperty(t,e,{enumerable:!0,get(){if(M(n.valueOf())){let t=structuredClone(Object.assign({},n));setTimeout(c((function(){o(structuredClone(Object.assign({},n)),t)||n.notify()}),0),0)}return n},set(t){if(typeof t==typeof n.valueOf())if(M(n.valueOf())&&n.valueOf()instanceof Array==0){let e=structuredClone(Object.assign({},n));void 0===n?.constructor?.prototype?.observe&&(n=new(H(t))(structuredClone(Object.assign({},t))),function(t,e){const r=Object.getOwnPropertyDescriptors(t);for(const[t,n]of Object.entries(r))("get"in n||"set"in n)&&Object.defineProperty(e,t,n)}(t,n),n.seal()),Object.assign(n,t),setTimeout(c((function(){o(structuredClone(Object.assign({},n)),e)||n.notify()}),0),0)}else{let e=n.valueOf(),r=n.callbacks;t!==e&&(n=new(H(t))(t),n.callbacks=r,n.notify())}else console.warn("IGNORED - cannot change observable types, IS:",typeof n.valueOf(),n,"- CANNOT BECOME:",typeof t)}}),t[e]=r}})),t);return e})()));
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.observables=e():t.observables=e()}(this,(()=>(()=>{"use strict";var t={d:(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function r(t){let e={};return[...Object.keys(t)].sort().forEach((n=>{var o;(o=t[n])&&o.constructor&&o.constructor===Object?e[n]=r(t[n]):e[n]=t[n]})),e}function n(t,e=!0){let o={};return[...Object.getOwnPropertyNames(t)].forEach((e=>{if(t[e]&&t[e].constructor&&t[e].constructor===Object){const r=n(t[e],!1);for(const t in r)o[e+"."+t]=r[t]}else o[e]=t[e]})),e?r(o):o}function o(t,e){return JSON.stringify(n(t))===JSON.stringify(n(e))}function c(t,e){let r;return()=>{clearTimeout(r),r=setTimeout((function(){t(...arguments)}),e)}}t.r(e),t.d(e,{observe:()=>A});var a=new Function("try {return this===window;}catch(e){ return false;}");function s(t,e){let r=[];return t.forEach((t=>{if(t&&t instanceof HTMLElement){const n=t?._mc;!e&&n?r=r.concat(Object.values(t._mc)):e&&n&&n[e]&&r.push(n[e])}})),r}function i(t,e,r=!0){let n=[];for(;t;){if(t._mc&&(e?e&&t._mc[e]&&n.push(t._mc[e]):n=n.concat(Object.values(t._mc)),r))return n;t=t.parentNode}return n}function l(t){return t&&t instanceof HTMLElement}function u(t,e,r={}){let n=t;if(!n._mc){let e=g?.debug;g.debug=!1,n._mc=new g(t),g.debug=e,delete n._mc._mc}const o=n._mc;return e.length&&!o[e]&&(o[e]=r,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),r}function f(t,e){if(!e)return;const r=t?._mc||{};r&&r[e]&&delete r[e],!Object.keys(r).length&&t instanceof HTMLElement&&t.hasAttribute("data-mc")&&t.removeAttribute("data-mc")}function d(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function b(t,e,r,n=!1){t.addEventListener(d(e),r,{capture:!1,once:n})}function h(t,e,r={},n="l"){const o="string"==typeof e?new CustomEvent(d(e),{detail:{data:r,bubble:n}}):e;n.length&&n.indexOf("l")>-1&&t.dispatchEvent(o),/[u|d]/.test(n)&&function(t,e){setTimeout((()=>{-1===e.detail.bubble.indexOf("l")&&(e.detail.bubble+="l"),e.detail.bubble.indexOf("u")>-1&&t.closest("[data-mc]")?.dispatchEvent(e),e.detail.bubble.indexOf("d")>-1&&new Set(t._mc.children().map((t=>t?.target))).forEach((t=>{t&&g.trigger(t,e)}))}),0)}(t,o)}class p{_target;constructor(t,e=!1){var r;this._target=new WeakRef(t||{}),(r=this).constructor!==g&&setTimeout((()=>{r.trigger("Init")}),0),function(t){if(!a()||t.constructor===g)return;const e=t.target;if(e instanceof HTMLElement){let r=t;Object.getOwnPropertyNames(r.constructor.prototype).filter((t=>/^on[A-Z]|one[A-Z]/.test(t)&&"function"==typeof r.constructor.prototype[t])).forEach((t=>{let n=/^one/.test(t),o=t.replace(/^on[e]{0,1}/,""),c=o.toLowerCase(),a=e=>{r[t](e)};e["on"+c]?e.addEventListener(c,a):b(e,o,a,n)}))}}(this)}get target(){return this._target.deref()}}class g extends p{constructor(t,e=!1){super(t)}static add=u;static remove=f;static trigger=h;off(t,e){!function(t,e,r){t.removeEventListener(d(e),r)}(this.target,t,e)}on(t,e){b(this.target,t,e)}one(t,e){!function(t,e,r){b(t,e,r,!0)}(this.target,t,e)}trigger(t,e={},r="l"){}parent(t=""){let e=this.target;return l(e)?i(e.parentNode,t,!0):[]}ancestors(t=""){let e=this?.target;return l(e)?i(this.target.parentNode,t,!1):[]}children(t=""){let e=this?.target;return l(e)?s([...function(t){const e=Math.random().toString().replace(".",""),r='[data-mc]:not([temp_id="'+e+'"] [data-mc] [data-mc])';t.setAttribute("temp_id",e);const n=t.querySelectorAll(r);return t.removeAttribute("temp_id"),n}(e)],t):[]}descendants(t=""){let e=this?.target;return l(e)?s([...e.querySelectorAll("*[data-mc]")],t):[]}}function m(t){return null!=t&&"object"==typeof t}function y(t){let e=new Set,r=/\{[^\{\}]*\}/g;return(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(r))).forEach((e=>{let n=new Set(t.getAttribute(e)?.match(r));n.forEach((t=>n.add(t.replace(/[\{\}]/g,""))))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(r))).forEach((t=>{(t.nodeValue||"").match(r).forEach((t=>{e.add(t.replace(/[\{\}]/g,""))}))})),[...e].map((t=>t.replace(/[\{\}]/g,"")))}new Set;const O=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class v extends g{data={};oldDisplay="";constructor(t){super(t),y(t).forEach((t=>this.data[t]="")),A(this),this.#t()}#t(){let t=this.target,e=!1;(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((e=>{let r=new Set(t.getAttribute(e)?.match(/\{[^\{\}]*\}/g));var n;this.data.observe((n=t.getAttribute(e),o=>{let c=n;r.forEach((t=>{c=c.replace(t,o[t.replace(/[\{\}]/g,"")])})),t.setAttribute(e,c)}))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((r=>{e=!0;let n=new Set(r.nodeValue.match(/\{[^\{\}]*\}/g));this.data.observe((e=>o=>{let c=e;n.forEach((t=>{c=c.replace(t,o[t.replace(/[\{\}]/g,"")])})),this.oldDisplay?t.style=this.oldDisplay:t.removeAttribute("style"),delete this.oldDisplay,r.nodeValue=c})(r.nodeValue)),this.oldDisplay=t.getAttribute("style")||"",e&&!O.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(t){let e={};Object.keys(t.detail.data).forEach((r=>{this.data.hasOwnProperty(r)&&(e[r]=t.detail.data[r])})),JSON.stringify(e)!==JSON.stringify(this.data)&&Object.assign(this.data,e)}}const E={};function j(t){let e=t.constructor.name;return E[e]||function(t){const e=t.constructor,r=e.name;let o=class extends e{#e=!0;#r=[];constructor(t){super(t),this.constructor.callbacks=[],m(t)&&Object.getOwnPropertyNames(t).forEach((e=>{this[e]=t[e]}))}get callbacks(){return this.#r}set callbacks(t){this.#r=t}observe(t){return this.#r.push(t),this}bind(t){if(m(this.valueOf())){!function(t){var e;(e=t,[e].concat([...e.querySelectorAll("*")]).filter((t=>!!y(t).length)).filter((t=>"STYLE"!==t?.tagName)).reverse()).forEach((t=>{t?._mc?._placeholders||g.add(t,"_placeholders",new v(t))}))}(t);const e=[t,...t.querySelectorAll("[data-mc]")].filter((t=>!!t?._mc?._placeholders)),r=function(t){let r=n(t);e.forEach((t=>{t&&h(t,"data",r)}))};this.#r.push(r),this.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof this.valueOf(),this);return this}notify(t){let e=m(this.valueOf())&&this.valueOf()instanceof Array==0?structuredClone(Object.assign({},this)):this.valueOf();return void 0!==t&&(this.#e=t),this.#r.forEach((t=>{t(e)})),this}};return E[r]=o,o}(t)}const A=(t,e)=>((e?[e]:[...Object.getOwnPropertyNames(t)]).forEach((e=>{if(t.hasOwnProperty(e)&&"function"!=typeof t[e]&&!t?.[e]?.constructor?.prototype?.observe){if("_"===e[0]||void 0===t?.[e])return t;let r=t[e],n=new(j(r))(r);Object.defineProperty(t,e,{enumerable:!0,get(){if(m(n.valueOf())){let t=structuredClone(Object.assign({},n));setTimeout(c((function(){o(structuredClone(Object.assign({},n)),t)||n.notify()}),0),0)}return n},set(t){if(typeof t==typeof n.valueOf())if(m(n.valueOf())&&n.valueOf()instanceof Array==0){let e=structuredClone(Object.assign({},n));void 0===n?.constructor?.prototype?.observe&&(n=new(j(t))(structuredClone(Object.assign({},t))),function(t,e){const r=Object.getOwnPropertyDescriptors(t);for(const[t,n]of Object.entries(r))("get"in n||"set"in n)&&Object.defineProperty(e,t,n)}(t,n),n.seal()),Object.assign(n,t),setTimeout(c((function(){o(structuredClone(Object.assign({},n)),e)||n.notify()}),0),0)}else{let e=n.valueOf(),r=n.callbacks;t!==e&&(n=new(j(t))(t),n.callbacks=r,n.notify())}else console.warn("IGNORED - cannot change observable types, IS:",typeof n.valueOf(),n,"- CANNOT BECOME:",typeof t)}}),t[e]=r}})),t);return e})()));
|
package/dist/observables.ts
CHANGED
|
@@ -8,7 +8,7 @@ import {
|
|
|
8
8
|
copyGettersSetters,
|
|
9
9
|
} from './helpers.js';
|
|
10
10
|
|
|
11
|
-
import { DC, HTMLMcElement,
|
|
11
|
+
import { DC, HTMLMcElement, trigger } from './MC.js';
|
|
12
12
|
|
|
13
13
|
function isObservableObject(value: any): boolean {
|
|
14
14
|
return value != null && typeof value === 'object';
|
|
@@ -21,12 +21,11 @@ function getPlaceholders(target: HTMLElement): string[] {
|
|
|
21
21
|
regEx = /\{[^\{\}]*\}/g;
|
|
22
22
|
|
|
23
23
|
// scan attributes
|
|
24
|
-
target
|
|
25
|
-
.getAttributeNames()
|
|
24
|
+
( !!target.getAttributeNames ? target.getAttributeNames() : [] )
|
|
26
25
|
.filter((attr) => target.getAttribute(attr)?.match(regEx)) // extract placeholder(s)
|
|
27
26
|
.forEach((attr) => {
|
|
28
|
-
let
|
|
29
|
-
|
|
27
|
+
let placeholders: Set<string> = new Set(target.getAttribute(attr)?.match(regEx));
|
|
28
|
+
placeholders.forEach((placeholder) =>
|
|
30
29
|
placeholders.add(placeholder.replace(/[\{\}]/g, ''))
|
|
31
30
|
);
|
|
32
31
|
});
|
|
@@ -62,35 +61,31 @@ class Placeholders extends DC {
|
|
|
62
61
|
|
|
63
62
|
constructor(target: HTMLElement) {
|
|
64
63
|
super(target);
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
that.#attachCallbacks();
|
|
69
|
-
delete that._mc; // cleanup, not needed
|
|
64
|
+
getPlaceholders(target).forEach((property) => (this.data[property] = ''));
|
|
65
|
+
observe(this);
|
|
66
|
+
this.#attachCallbacks();
|
|
70
67
|
}
|
|
71
68
|
|
|
72
69
|
#attachCallbacks() {
|
|
73
|
-
let
|
|
74
|
-
target = that.target,
|
|
70
|
+
let target = this.target,
|
|
75
71
|
hide: boolean = false;
|
|
76
72
|
|
|
77
|
-
//console.log('attachCallbacks',
|
|
73
|
+
//console.log('attachCallbacks', this.target);
|
|
78
74
|
|
|
79
75
|
// scan attributes
|
|
80
|
-
target
|
|
81
|
-
.getAttributeNames()
|
|
76
|
+
( !!target.getAttributeNames ? target.getAttributeNames() : [] )
|
|
82
77
|
.filter((attr: string) =>
|
|
83
78
|
target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g)
|
|
84
79
|
) // extract placeholder(s)
|
|
85
80
|
.forEach((attr: string) => {
|
|
86
|
-
let
|
|
81
|
+
let placeholders: Set<string> = new Set(
|
|
87
82
|
target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g)
|
|
88
83
|
);
|
|
89
84
|
// attach callback
|
|
90
|
-
|
|
85
|
+
this.data.observe(
|
|
91
86
|
((template: string) => (data: LooseObject) => {
|
|
92
87
|
let result: string = template;
|
|
93
|
-
|
|
88
|
+
placeholders.forEach((placeholder) => {
|
|
94
89
|
result = result.replace(
|
|
95
90
|
placeholder,
|
|
96
91
|
data[placeholder.replace(/[\{\}]/g, '')]
|
|
@@ -108,44 +103,41 @@ class Placeholders extends DC {
|
|
|
108
103
|
return (
|
|
109
104
|
// is text node and has placeholders
|
|
110
105
|
childNode.nodeType === 3 &&
|
|
111
|
-
((childNode as
|
|
106
|
+
((childNode as Node).nodeValue || '').match(/\{[^\{\}]*\}/g)
|
|
112
107
|
);
|
|
113
108
|
})
|
|
114
109
|
.forEach((childNode) => {
|
|
115
110
|
hide = true;
|
|
116
|
-
let
|
|
111
|
+
let placeholders: Set<string> = new Set(
|
|
117
112
|
childNode.nodeValue.match(/\{[^\{\}]*\}/g)
|
|
118
113
|
);
|
|
119
114
|
|
|
120
115
|
// attach callback
|
|
121
|
-
|
|
116
|
+
this.data.observe(
|
|
122
117
|
((template: string) => (data: LooseObject) => {
|
|
123
118
|
let result: string = template;
|
|
124
|
-
//console.log('text node "', template, '"
|
|
125
|
-
|
|
119
|
+
//console.log('text node "', template, '" callback data:', data);
|
|
120
|
+
placeholders.forEach((placeholder) => {
|
|
126
121
|
result = result.replace(
|
|
127
122
|
placeholder,
|
|
128
123
|
data[placeholder.replace(/[\{\}]/g, '')]
|
|
129
124
|
);
|
|
130
125
|
});
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
if (!!that.oldDisplay) {
|
|
137
|
-
target.style = that.oldDisplay;
|
|
138
|
-
} else {
|
|
139
|
-
target.removeAttribute('style');
|
|
140
|
-
}
|
|
141
|
-
delete that.oldDisplay;
|
|
126
|
+
|
|
127
|
+
if (!!this.oldDisplay) {
|
|
128
|
+
target.style = this.oldDisplay;
|
|
129
|
+
} else {
|
|
130
|
+
target.removeAttribute('style');
|
|
142
131
|
}
|
|
132
|
+
delete this.oldDisplay;
|
|
133
|
+
|
|
143
134
|
childNode.nodeValue = result;
|
|
144
135
|
})(childNode.nodeValue)
|
|
145
136
|
);
|
|
146
137
|
|
|
147
138
|
// hide for now
|
|
148
|
-
|
|
139
|
+
this.oldDisplay = target.getAttribute('style') || ''; // TBD allow null to indicate there was no old style attribute
|
|
140
|
+
|
|
149
141
|
if (
|
|
150
142
|
hide &&
|
|
151
143
|
!inputs.includes((target as any).constructor) &&
|
|
@@ -156,27 +148,25 @@ class Placeholders extends DC {
|
|
|
156
148
|
});
|
|
157
149
|
}
|
|
158
150
|
|
|
159
|
-
onData(ev:
|
|
160
|
-
let
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
if (that.data.hasOwnProperty(key)) data[key] = ev.data[key];
|
|
151
|
+
onData(ev: CustomEvent) {
|
|
152
|
+
let data: LooseObject = {};
|
|
153
|
+
Object.keys(ev.detail.data).forEach((key) => {
|
|
154
|
+
if (this.data.hasOwnProperty(key)) data[key] = ev.detail.data[key];
|
|
164
155
|
});
|
|
165
|
-
//console.log('onData
|
|
166
|
-
if (JSON.stringify(data) !== JSON.stringify(
|
|
167
|
-
Object.assign(
|
|
156
|
+
//console.log( 'Placeholder onData', ev, data );
|
|
157
|
+
if (JSON.stringify(data) !== JSON.stringify(this.data))
|
|
158
|
+
Object.assign(this.data, data); // will trigger callbacks
|
|
168
159
|
}
|
|
169
160
|
}
|
|
170
161
|
|
|
171
162
|
function getPlaceholderElements(
|
|
172
163
|
target: HTMLElement | DocumentFragment | ShadowRoot
|
|
173
164
|
): HTMLElement[] {
|
|
174
|
-
let elements: Array<
|
|
175
|
-
target instanceof HTMLElement ? [target] : []
|
|
176
|
-
)
|
|
165
|
+
let elements: Array<Node> = [target]
|
|
177
166
|
.concat([...(target.querySelectorAll('*') as unknown as HTMLElement[])])
|
|
178
167
|
.filter((e) => !!getPlaceholders(e as HTMLElement).length)
|
|
179
|
-
.filter((e) => e
|
|
168
|
+
.filter((e) => (e as HTMLElement)?.tagName !== 'STYLE')
|
|
169
|
+
.reverse(); // to start with inner elements
|
|
180
170
|
//console.log('getPlaceholderElements', elements);
|
|
181
171
|
return elements as HTMLElement[];
|
|
182
172
|
}
|
|
@@ -232,40 +222,46 @@ function makeObservable(val: any): Class<typeof val>{
|
|
|
232
222
|
this.#callbacks = callbacks
|
|
233
223
|
}
|
|
234
224
|
|
|
235
|
-
observe(
|
|
225
|
+
observe( callback: Function ) {
|
|
236
226
|
//console.log('observe');
|
|
237
|
-
this.#callbacks.push(
|
|
227
|
+
this.#callbacks.push( callback );
|
|
238
228
|
return this;
|
|
239
229
|
}
|
|
240
230
|
|
|
241
231
|
bind(target: HTMLElement | DocumentFragment | ShadowRoot) {
|
|
242
|
-
const
|
|
243
|
-
iso = isObservableObject(that.valueOf());
|
|
232
|
+
const iso = isObservableObject(this.valueOf());
|
|
244
233
|
//console.log('bind', iso, target);
|
|
245
234
|
|
|
246
235
|
if (iso) {
|
|
247
236
|
makePlaceholders(target);
|
|
248
|
-
const placeholders: unknown =
|
|
249
|
-
|
|
250
|
-
|
|
237
|
+
const placeholders: unknown =
|
|
238
|
+
[
|
|
239
|
+
target,
|
|
240
|
+
...target.querySelectorAll('[data-mc]'),
|
|
241
|
+
]
|
|
242
|
+
.filter(
|
|
243
|
+
(e) => !!(e as LooseObject)?._mc?._placeholders
|
|
244
|
+
);
|
|
245
|
+
|
|
251
246
|
//console.log('placeholders:', target, placeholders);
|
|
247
|
+
|
|
252
248
|
const func = function callback(data: LooseObject) {
|
|
253
249
|
// avoid bubbling for speed
|
|
254
|
-
let
|
|
255
|
-
//console.log('inside callback', target,
|
|
256
|
-
(placeholders as
|
|
250
|
+
let flattenedData = flattenObject(data);
|
|
251
|
+
//console.log('inside placeholder callback', target, flattenedData);
|
|
252
|
+
(placeholders as Node[]).forEach((node) => {
|
|
257
253
|
// console.log('trigger callback', e);
|
|
258
|
-
if (!
|
|
259
|
-
(
|
|
254
|
+
if (!node) return;
|
|
255
|
+
trigger(node as HTMLMcElement, 'data', flattenedData);
|
|
260
256
|
});
|
|
261
257
|
};
|
|
262
|
-
(
|
|
263
|
-
|
|
258
|
+
(this as any).#callbacks.push(func);
|
|
259
|
+
this.notify();
|
|
264
260
|
} else {
|
|
265
261
|
console.warn(
|
|
266
262
|
'IGNORED - cannot bind a non-Object to the dom, IS:',
|
|
267
|
-
typeof
|
|
268
|
-
|
|
263
|
+
typeof this.valueOf(),
|
|
264
|
+
this
|
|
269
265
|
);
|
|
270
266
|
}
|
|
271
267
|
|
|
@@ -273,20 +269,19 @@ function makeObservable(val: any): Class<typeof val>{
|
|
|
273
269
|
}
|
|
274
270
|
|
|
275
271
|
notify(notify?: boolean) {
|
|
276
|
-
let
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
: that.valueOf();
|
|
272
|
+
let data =
|
|
273
|
+
isObservableObject(this.valueOf()) &&
|
|
274
|
+
this.valueOf() instanceof Array === false
|
|
275
|
+
? structuredClone(Object.assign({}, this))
|
|
276
|
+
: this.valueOf();
|
|
282
277
|
|
|
283
278
|
if (notify !== undefined) {
|
|
284
|
-
|
|
279
|
+
this.#notify = notify;
|
|
285
280
|
// return;
|
|
286
281
|
}
|
|
287
282
|
|
|
288
|
-
//if (
|
|
289
|
-
(
|
|
283
|
+
//if (this.#notify) console.log('notify', this, data);
|
|
284
|
+
(this as any).#callbacks.forEach((f: Function) => {
|
|
290
285
|
// console.log(
|
|
291
286
|
// (this.constructor as any).callbacks,
|
|
292
287
|
// 'notify: exec callback',
|
|
@@ -296,7 +291,7 @@ function makeObservable(val: any): Class<typeof val>{
|
|
|
296
291
|
f(data);
|
|
297
292
|
});
|
|
298
293
|
|
|
299
|
-
return
|
|
294
|
+
return this;
|
|
300
295
|
}
|
|
301
296
|
};
|
|
302
297
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@twobirds/microcomponents",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.84",
|
|
4
4
|
"description": "Micro Components Organization Class",
|
|
5
5
|
"main": "./dist/microcomponents.ts",
|
|
6
6
|
"types": "./dist/microcomponents.d.ts",
|
|
@@ -9,10 +9,11 @@
|
|
|
9
9
|
"typedoc": "typedoc",
|
|
10
10
|
"webpack": "webpack",
|
|
11
11
|
"clean": "rm -rf build/*; rm -rf dist/*; rm -rf public/*;",
|
|
12
|
-
"prep": "cp src/* build || true; mkdir public || true;",
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
12
|
+
"prep": "cp -R src/* build || true; mkdir public || true; npm run typedoc;",
|
|
13
|
+
"copyToDist": "cp build/*.js dist; cp public/microcomponents.min.js public/test; cp -R build/*.ts* dist; cp *.svg dist;",
|
|
14
|
+
"copyToPublic1": "cp -R assets/* public || true; cp dist/*.* public; cp dist/*.* public/test; mkdir public/src || true; cp -R build/* public/src || true; cp -R build/* public || true;",
|
|
15
|
+
"copyToPublic2": "cp -R build/test/* public/test; cp dist/MicroComponents.svg public; cp public/MicroComponents.svg public/test;",
|
|
16
|
+
"build": "npm run clean; npm run prep; tsc; npm run webpack; npm run copyToDist; npm run copyToPublic1; npm run copyToPublic2;"
|
|
16
17
|
},
|
|
17
18
|
"author": "",
|
|
18
19
|
"license": "ISC",
|
package/public/MC.d.ts
CHANGED
|
@@ -1,36 +1,37 @@
|
|
|
1
1
|
import { LooseObject } from './helpers.js';
|
|
2
|
-
import { McEvent } from './McEvent.js';
|
|
3
2
|
export interface HTMLMcElement extends HTMLElement {
|
|
4
3
|
_mc: LooseObject;
|
|
5
4
|
}
|
|
6
|
-
declare function
|
|
7
|
-
declare function
|
|
8
|
-
declare function
|
|
5
|
+
declare function off(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject): void;
|
|
6
|
+
declare function on(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject, once?: boolean): void;
|
|
7
|
+
declare function one(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject): void;
|
|
8
|
+
declare function trigger(domNode: HTMLElement, event: CustomEvent | string, data?: any, bubble?: string): void;
|
|
9
9
|
declare class McBase {
|
|
10
|
-
|
|
10
|
+
private _target;
|
|
11
11
|
constructor(target?: {
|
|
12
12
|
[key: string]: any;
|
|
13
13
|
}, debug?: boolean);
|
|
14
14
|
get target(): any;
|
|
15
15
|
}
|
|
16
16
|
declare class MC extends McBase {
|
|
17
|
-
_mc?: LooseObject;
|
|
18
17
|
constructor(target?: any);
|
|
19
18
|
static trigger: typeof trigger;
|
|
20
|
-
trigger(ev:
|
|
19
|
+
trigger(ev: string, data?: any, bubble?: string): void;
|
|
21
20
|
}
|
|
22
21
|
declare class DC extends McBase {
|
|
23
|
-
_mc?: LooseObject;
|
|
24
22
|
constructor(target: HTMLElement, debug?: boolean);
|
|
25
23
|
static add: Function;
|
|
26
24
|
static remove: Function;
|
|
27
25
|
static trigger: Function;
|
|
28
|
-
|
|
26
|
+
off(eventName: string, handler: EventListenerOrEventListenerObject): void;
|
|
27
|
+
on(eventName: string, handler: EventListenerOrEventListenerObject): void;
|
|
28
|
+
one(eventName: string, handler: EventListenerOrEventListenerObject): void;
|
|
29
|
+
trigger(ev: CustomEvent | string, data?: any, bubble?: string): void;
|
|
29
30
|
parent(search?: string): any[];
|
|
30
31
|
ancestors(search?: string): any[];
|
|
31
32
|
children(search?: string): any[];
|
|
32
33
|
descendants(search?: string): any[];
|
|
33
34
|
}
|
|
34
35
|
declare function autoload(enable?: boolean): boolean;
|
|
35
|
-
export {
|
|
36
|
+
export { McBase, MC, DC, autoload, on, one, off, trigger };
|
|
36
37
|
//# sourceMappingURL=MC.d.ts.map
|
package/public/MC.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["../src/MC.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["../src/MC.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAiB3C,MAAM,WAAW,aAAc,SAAQ,WAAW;IACjD,GAAG,EAAE,WAAW,CAAC;CACjB;AA2HD,iBAAS,GAAG,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,QAE1F;AAED,iBAAS,EAAE,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,EAAE,IAAI,GAAE,OAAe,QAEhH;AAED,iBAAS,GAAG,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,QAE1F;AAGD,iBAAS,OAAO,CACf,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,WAAW,GAAG,MAAM,EAC3B,IAAI,GAAE,GAAQ,EACd,MAAM,GAAE,MAAY,QAepB;AA4ED,cAAM,MAAM;IACX,OAAO,CAAC,OAAO,CAAe;gBAElB,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,KAAK,GAAE,OAAe;IAUnE,IAAI,MAAM,IAAI,GAAG,CAEhB;CAED;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,CAAC,EAAE,GAAG;IAIxB,MAAM,CAAC,OAAO,iBAAW;IAEzB,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY;CAGxD;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,EAAE,WAAW,EAAE,KAAK,GAAE,OAAe;IAIvD,MAAM,CAAC,GAAG,EAAE,QAAQ,CAAO;IAC3B,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAU;IACjC,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAW;IAEnC,GAAG,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAInE,EAAE,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAIlE,GAAG,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAInE,OAAO,CAAC,EAAE,EAAE,WAAW,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY;IAOtE,MAAM,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMlC,SAAS,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMrC,QAAQ,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAQpC,WAAW,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;CAMvC;AA+GD,iBAAS,QAAQ,CAAC,MAAM,GAAE,OAAc,GAAG,OAAO,CAmBjD;AAID,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC"}
|