native-document 1.0.17-1.1 → 1.0.17-1.3
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "native-document",
|
|
3
|
-
"version": "1.0.171.
|
|
3
|
+
"version": "1.0.171.3",
|
|
4
4
|
"description": "A reactive JavaScript framework that preserves native DOM simplicity without sacrificing modern features",
|
|
5
5
|
"author": "AfroCodeur <https://github.com/afrocodeur>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -3,34 +3,6 @@ import NativeDocumentError from '../errors/NativeDocumentError';
|
|
|
3
3
|
import {BOOL_ATTRIBUTES_NAME, BOOLEAN_ATTRIBUTES} from './constants.js';
|
|
4
4
|
import {Observable} from '../data/Observable';
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
const addNdDestroy = (element, observable, callback) => {
|
|
8
|
-
if(element.ndDestroy) {
|
|
9
|
-
element.ndAddDestroy(observable, callback);
|
|
10
|
-
return;
|
|
11
|
-
}
|
|
12
|
-
let destroyCallbacks = [];
|
|
13
|
-
|
|
14
|
-
element.ndAddDestroy = (observable, callback) => {
|
|
15
|
-
destroyCallbacks.push(observable);
|
|
16
|
-
destroyCallbacks.push(callback);
|
|
17
|
-
};
|
|
18
|
-
element.ndDestroy = () => {
|
|
19
|
-
|
|
20
|
-
for(let i = 0, len = destroyCallbacks.length; i < len; i+= 2) {
|
|
21
|
-
destroyCallbacks[i].unsubscribe(destroyCallbacks[i+1]);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
destroyCallbacks.length = 0;
|
|
25
|
-
destroyCallbacks = null;
|
|
26
|
-
element.ndAddDestroy = null;
|
|
27
|
-
element.ndDestroy = null;
|
|
28
|
-
element = null;
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
element.ndAddDestroy(observable, callback);
|
|
32
|
-
};
|
|
33
|
-
|
|
34
6
|
/**
|
|
35
7
|
* Applies a reactive class map to an HTMLElement.
|
|
36
8
|
* Each key is a CSS class name; each value is a boolean or ObservableItem<boolean>.
|
|
@@ -47,22 +19,18 @@ export const bindClassAttribute = (element, data) => {
|
|
|
47
19
|
let lastClass = value.val();
|
|
48
20
|
if (typeof lastClass === 'string') {
|
|
49
21
|
element.classes.toggle(lastClass, true);
|
|
50
|
-
|
|
22
|
+
value.subscribe((currentValue) => {
|
|
51
23
|
element.classes.remove(lastClass);
|
|
52
24
|
element.classes.toggle(currentValue, true);
|
|
53
25
|
lastClass = currentValue;
|
|
54
|
-
};
|
|
55
|
-
value.subscribe(callback);
|
|
56
|
-
addNdDestroy(element, value, callback);
|
|
26
|
+
});
|
|
57
27
|
continue;
|
|
58
28
|
}
|
|
59
29
|
}
|
|
60
30
|
|
|
61
31
|
if (value.__$Observable) {
|
|
62
32
|
element.classes.toggle(className, value.val());
|
|
63
|
-
|
|
64
|
-
value.subscribe(callback);
|
|
65
|
-
addNdDestroy(element, value, callback);
|
|
33
|
+
value.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
|
|
66
34
|
continue;
|
|
67
35
|
}
|
|
68
36
|
|
|
@@ -92,26 +60,22 @@ export const bindStyleAttribute = (element, data) => {
|
|
|
92
60
|
if(value.__$Observable) {
|
|
93
61
|
if(isCustomProperty) {
|
|
94
62
|
element.style.setProperty(styleName, value.val());
|
|
95
|
-
|
|
63
|
+
value.subscribe((newValue) => {
|
|
96
64
|
if(newValue === false) {
|
|
97
65
|
element.style.removeProperty(styleName);
|
|
98
66
|
return;
|
|
99
67
|
}
|
|
100
68
|
element.style.setProperty(styleName, newValue);
|
|
101
|
-
};
|
|
102
|
-
value.subscribe(callback);
|
|
103
|
-
addNdDestroy(element, value, callback);
|
|
69
|
+
});
|
|
104
70
|
} else {
|
|
105
71
|
element.style[styleName] = value.val();
|
|
106
|
-
|
|
72
|
+
value.subscribe((newValue) => {
|
|
107
73
|
if(newValue === false) {
|
|
108
74
|
element.style.removeProperty(styleName);
|
|
109
75
|
return;
|
|
110
76
|
}
|
|
111
77
|
element.style[styleName] = newValue;
|
|
112
|
-
};
|
|
113
|
-
value.subscribe(callback);
|
|
114
|
-
addNdDestroy(element, value, callback);
|
|
78
|
+
});
|
|
115
79
|
}
|
|
116
80
|
continue;
|
|
117
81
|
}
|
|
@@ -151,14 +115,10 @@ export const bindBooleanAttribute = (element, attributeName, value) => {
|
|
|
151
115
|
else {
|
|
152
116
|
element.addEventListener('input', () => value.set(element.value));
|
|
153
117
|
}
|
|
154
|
-
|
|
155
|
-
value.subscribe(callback);
|
|
156
|
-
addNdDestroy(element, value, callback);
|
|
118
|
+
value.subscribe((newValue) => element[attributeRealName] = newValue);
|
|
157
119
|
return;
|
|
158
120
|
}
|
|
159
|
-
|
|
160
|
-
value.subscribe(callback);
|
|
161
|
-
addNdDestroy(element, value, callback);
|
|
121
|
+
value.subscribe((newValue) => element[attributeRealName] = (newValue === element.value));
|
|
162
122
|
}
|
|
163
123
|
};
|
|
164
124
|
|
|
@@ -173,15 +133,11 @@ export const bindAttributeWithObservable = (element, attributeName, value) => {
|
|
|
173
133
|
if(attributeName === 'value') {
|
|
174
134
|
element.value = value.val();
|
|
175
135
|
element.addEventListener('input', () => value.set(element.value));
|
|
176
|
-
|
|
177
|
-
value.subscribe(callback);
|
|
178
|
-
addNdDestroy(element, value, callback);
|
|
136
|
+
value.subscribe((newValue) => element.value = newValue);
|
|
179
137
|
return;
|
|
180
138
|
}
|
|
181
139
|
element.setAttribute(attributeName, value.val());
|
|
182
|
-
|
|
183
|
-
value.subscribe(callback);
|
|
184
|
-
addNdDestroy(element, value, callback);
|
|
140
|
+
value.subscribe((newValue) => element.setAttribute(attributeName, newValue));
|
|
185
141
|
};
|
|
186
142
|
|
|
187
143
|
/**
|
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
import Validator from '../utils/validator';
|
|
2
1
|
import AttributesWrapper, { bindClassAttribute, bindStyleAttribute } from './AttributesWrapper';
|
|
3
2
|
import PluginsManager from '../utils/plugins-manager';
|
|
4
|
-
import {call} from '@babel/traverse/lib/path/context';
|
|
5
3
|
|
|
6
4
|
let $textNodeCache = null;
|
|
7
5
|
|
|
@@ -21,9 +19,7 @@ export const ElementCreator = {
|
|
|
21
19
|
*/
|
|
22
20
|
createObservableNode: (parent, observable) => {
|
|
23
21
|
const text = ElementCreator.createObservableNodeWithoutParent(observable);
|
|
24
|
-
|
|
25
|
-
parent.appendChild(text);
|
|
26
|
-
}
|
|
22
|
+
parent && parent.appendChild(text);
|
|
27
23
|
return text;
|
|
28
24
|
},
|
|
29
25
|
/**
|
|
@@ -33,19 +29,8 @@ export const ElementCreator = {
|
|
|
33
29
|
*/
|
|
34
30
|
createObservableNodeWithoutParent: (observable) => {
|
|
35
31
|
const text = ElementCreator.createTextNode();
|
|
36
|
-
|
|
37
|
-
observable.subscribe(callback);
|
|
32
|
+
observable.subscribe(value => text.nodeValue = value);
|
|
38
33
|
text.nodeValue = observable.val();
|
|
39
|
-
let unsubscribe = () => {
|
|
40
|
-
observable.unsubscribe(callback);
|
|
41
|
-
observable = null;
|
|
42
|
-
};
|
|
43
|
-
text.ndDestroy = () => {
|
|
44
|
-
text.nodeValue = null;
|
|
45
|
-
unsubscribe();
|
|
46
|
-
unsubscribe = null;
|
|
47
|
-
text.ndDestroy = null;
|
|
48
|
-
};
|
|
49
34
|
return text;
|
|
50
35
|
},
|
|
51
36
|
/**
|
|
@@ -195,7 +195,7 @@ NDElement.prototype.destroy = function() {
|
|
|
195
195
|
observer.disconnect();
|
|
196
196
|
}
|
|
197
197
|
|
|
198
|
-
const children = this.$element?.querySelectorAll('[data--nd-before-unmount]')
|
|
198
|
+
const children = this.$element?.querySelectorAll('[data--nd-before-unmount]');
|
|
199
199
|
|
|
200
200
|
for(let i = 0, length = children.length; i < length; i++) {
|
|
201
201
|
const child = children[i];
|
|
@@ -205,14 +205,6 @@ NDElement.prototype.destroy = function() {
|
|
|
205
205
|
$lifeCycleObservers.delete(child);
|
|
206
206
|
}
|
|
207
207
|
|
|
208
|
-
const treeWalker = document.createTreeWalker(this.$element, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
|
|
209
|
-
console.log(treeWalker);
|
|
210
|
-
while(treeWalker.nextNode()) {
|
|
211
|
-
const node = treeWalker.currentNode;
|
|
212
|
-
node.ndDestroy?.();
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
this.$element.ndDestroy?.();
|
|
216
208
|
this.$element.__$controller?.abort();
|
|
217
209
|
this.$element.__$controller = null;
|
|
218
210
|
$lifeCycleObservers.delete(this.$element);
|