native-document 1.0.16-8.2 → 1.0.16-8.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.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/core/wrappers/AttributesWrapper.js +89 -25
  3. package/src/core/wrappers/ElementCreator.js +3 -1
  4. package/src/core/wrappers/prototypes/attributes-extensions.js +94 -84
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "native-document",
3
- "version": "1.0.168.02",
3
+ "version": "1.0.168.03",
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",
package/src/core/wrappers/AttributesWrapper.js CHANGED
@@ -14,7 +14,28 @@ import {Observable} from '../data/Observable';
14
14
  export const bindClassAttribute = (element, data) => {
15
15
  for(const className in data) {
16
16
  const value = data[className];
17
- data[className].handleClassValue(element, className);
17
+ if(value.__$Observable) {
18
+ if(value.__$isObservableChecker) {
19
+ let lastClass = value.val();
20
+ if(typeof lastClass === 'string') {
21
+ element.classes.toggle(lastClass, true);
22
+ value.subscribe((currentValue) => {
23
+ element.classes.remove(lastClass);
24
+ element.classes.toggle(currentValue, true);
25
+ lastClass = currentValue;
26
+ });
27
+ continue;
28
+ }
29
+ }
30
+ element.classes.toggle(className, value.val());
31
+ value.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
32
+ continue;
33
+ }
34
+ if(value.$hydrate) {
35
+ value.$hydrate(element, className);
36
+ continue;
37
+ }
38
+ element.classes.toggle(className, value);
18
39
  }
19
40
  };
20
41
 
@@ -28,11 +49,39 @@ export const bindClassAttribute = (element, data) => {
28
49
  * @param {Record<string, string|ObservableItem<string>>} data - Style map
29
50
  */
30
51
  export const bindStyleAttribute = (element, data) => {
31
- const keys = Object.keys(data);
32
- const length = keys.length;
33
- for(let i = 0; i < length; i++) {
34
- const styleName = keys[i];
35
- data[styleName].handleStyleProperty(element, styleName);
52
+ for(const styleName in data) {
53
+ const value = data[styleName];
54
+ const isCustomProperty = styleName.startsWith('--');
55
+
56
+ if(value.__$Observable) {
57
+ if(isCustomProperty) {
58
+ element.style.setProperty(styleName, value.val());
59
+ value.subscribe((newValue) => {
60
+ if(newValue === false) {
61
+ element.style.removeProperty(styleName);
62
+ return;
63
+ }
64
+ element.style.setProperty(styleName, newValue);
65
+ });
66
+ } else {
67
+ element.style[styleName] = value.val();
68
+ value.subscribe((newValue) => {
69
+ if(newValue === false) {
70
+ element.style.removeProperty(styleName);
71
+ return;
72
+ }
73
+ element.style[styleName] = newValue;
74
+ });
75
+ }
76
+ continue;
77
+ }
78
+
79
+ if(isCustomProperty) {
80
+ element.style.setProperty(styleName, value);
81
+ continue;
82
+ }
83
+
84
+ element.style[styleName] = value;
36
85
  }
37
86
  };
38
87
 
@@ -43,8 +92,30 @@ export const bindStyleAttribute = (element, data) => {
43
92
  * @param {boolean|number|Observable} value
44
93
  */
45
94
  export const bindBooleanAttribute = (element, attributeName, value) => {
46
- const attributeRealName = BOOL_ATTRIBUTES_NAME[attributeName] || attributeName;
47
- value.handleNdBooleanAttribute(element, attributeRealName);
95
+ const isObservable = value.__$isObservable;
96
+ const defaultValue = isObservable? value.val() : value;
97
+
98
+ const attributeRealName = BOOL_ATTRIBUTES_NAME[attributeName];
99
+
100
+ if(typeof defaultValue === 'boolean') {
101
+ element[attributeRealName] = defaultValue;
102
+ }
103
+ else {
104
+ element[attributeRealName] = defaultValue === element.value;
105
+ }
106
+ if(isObservable) {
107
+ if(attributeName === 'checked') {
108
+ if(typeof defaultValue === 'boolean') {
109
+ element.addEventListener('input', () => value.set(element[attributeRealName]));
110
+ }
111
+ else {
112
+ element.addEventListener('input', () => value.set(element.value));
113
+ }
114
+ value.subscribe((newValue) => element[attributeRealName] = newValue);
115
+ return;
116
+ }
117
+ value.subscribe((newValue) => element[attributeRealName] = (newValue === element.value));
118
+ }
48
119
  };
49
120
 
50
121
 
@@ -55,14 +126,15 @@ export const bindBooleanAttribute = (element, attributeName, value) => {
55
126
  * @param {Observable} value
56
127
  */
57
128
  export const bindAttributeWithObservable = (element, attributeName, value) => {
58
- if(attributeName !== 'value') {
59
- value.subscribe((newValue) => element.setAttribute(attributeName, newValue));
60
- element.setAttribute(attributeName, value.val());
129
+ const applyValue = attributeName === 'value' ? (newValue) => element.value = newValue : (newValue) => element.setAttribute(attributeName, newValue);
130
+ value.subscribe(applyValue);
131
+
132
+ if(attributeName === 'value') {
133
+ element.value = value.val();
134
+ element.addEventListener('input', () => value.set(element.value));
61
135
  return;
62
136
  }
63
- value.subscribe((newValue) => element.value = newValue);
64
- element.value = value.val();
65
- element.addEventListener('input', () => value.set(element.value));
137
+ element.setAttribute(attributeName, value.val());
66
138
  };
67
139
 
68
140
  /**
@@ -76,21 +148,13 @@ const AttributesWrapper = (element, attributes) => {
76
148
  Validator.validateAttributes(attributes);
77
149
  }
78
150
 
79
- if(!attributes) {
80
- return;
81
- }
82
-
83
- const keys = Object.keys(attributes);
84
- const length = keys.length;
85
-
86
- for(let i = 0; i < length; i++) {
87
- const originalAttributeName = keys[i];
151
+ for(const originalAttributeName in attributes) {
88
152
  const value = attributes[originalAttributeName];
89
153
  if(value == null) {
90
154
  continue;
91
155
  }
92
- value.handleNdAttribute(element, originalAttributeName.toLowerCase());
93
-
156
+ const attributeName = originalAttributeName.toLowerCase();
157
+ value.handleNdAttribute(element, attributeName);
94
158
  }
95
159
  return element;
96
160
  };
package/src/core/wrappers/ElementCreator.js CHANGED
@@ -93,11 +93,13 @@ export const ElementCreator = {
93
93
  return null;
94
94
  }
95
95
  do {
96
- child = child.toNdElement();
96
+ child = child.toNdElement();
97
97
  if(Validator.isElement(child)) {
98
98
  return child;
99
99
  }
100
100
  } while (child.toNdElement);
101
+
102
+ return ElementCreator.createStaticTextNode(null, child);
101
103
  },
102
104
  /**
103
105
  *
package/src/core/wrappers/prototypes/attributes-extensions.js CHANGED
@@ -6,6 +6,7 @@ import TemplateBinding from '../TemplateBinding';
6
6
  import { BOOLEAN_ATTRIBUTES } from '../constants';
7
7
  import { Observable } from '../../data/Observable';
8
8
  import ObservableChecker from '../../data/ObservableChecker';
9
+ import { ObservableWhen } from '../../data/ObservableWhen';
9
10
 
10
11
  /**
11
12
  * Extends a prototype with a non-enumerable, configurable, writable property.
@@ -39,13 +40,15 @@ extendsPrototype(Object, 'handleNdAttribute', function(element, attributeName) {
39
40
  element.setAttribute(attributeName, JSON.stringify(this));
40
41
  });
41
42
 
42
- extendsPrototype(ObservableItem, 'handleNdAttribute', function(element, attributeName) {
43
+ const handleAttributeFn = function(element, attributeName) {
43
44
  if (BOOLEAN_ATTRIBUTES.has(attributeName)) {
44
45
  this.handleNdBooleanAttribute(element, attributeName);
45
46
  return;
46
47
  }
47
48
  bindAttributeWithObservable(element, attributeName, this);
48
- });
49
+ };
50
+ extendsPrototype(ObservableItem, 'handleNdAttribute', handleAttributeFn);
51
+ extendsPrototype(ObservableWhen, 'handleNdAttribute', handleAttributeFn);
49
52
 
50
53
  extendsPrototype(TemplateBinding, 'handleNdAttribute', function(element, attributeName) {
51
54
  this.$hydrate(element, attributeName);
@@ -77,7 +80,7 @@ extendsPrototype(String, 'handleNdBooleanAttribute', function(element, attribute
77
80
  element[attributeName] = this === element.value;
78
81
  });
79
82
 
80
- extendsPrototype(ObservableItem, 'handleNdBooleanAttribute', function(element, attributeName) {
83
+ const booleanAttributeFn = function(element, attributeName) {
81
84
  const defaultValue = this.val();
82
85
  defaultValue.handleNdBooleanAttribute(element, attributeName);
83
86
 
@@ -92,88 +95,95 @@ extendsPrototype(ObservableItem, 'handleNdBooleanAttribute', function(element, a
92
95
  }
93
96
 
94
97
  this.subscribe((newValue) => element[attributeName] = (newValue === element.value));
95
- });
98
+ };
99
+ extendsPrototype(ObservableItem, 'handleNdBooleanAttribute', booleanAttributeFn);
100
+ extendsPrototype(ObservableWhen, 'handleNdBooleanAttribute', booleanAttributeFn);
96
101
 
97
102
  // -- handleStyleProperty ------------------------------------------------------
98
-
99
- extendsPrototype(String, 'handleStyleProperty', function(element, styleName) {
100
- const isCustomProperty = styleName.startsWith('--');
101
- if (isCustomProperty) {
102
- element.style.setProperty(styleName, this);
103
- return;
104
- }
105
- element.style[styleName] = this;
106
- });
107
-
108
- extendsPrototype(Number, 'handleStyleProperty', String.prototype.handleStyleProperty);
109
-
110
- extendsPrototype(ObservableItem, 'handleStyleProperty', function(element, styleName) {
111
- const isCustomProperty = styleName.startsWith('--');
112
-
113
- if (isCustomProperty) {
114
- element.style.setProperty(styleName, this.val());
115
- this.subscribe((newValue) => {
116
- if (newValue === false) {
117
- element.style.removeProperty(styleName);
118
- return;
119
- }
120
- element.style.setProperty(styleName, newValue);
121
- });
122
- return;
123
- }
124
-
125
- element.style[styleName] = this.val();
126
- this.subscribe((newValue) => {
127
- if (newValue === false) {
128
- element.style.removeProperty(styleName);
129
- return;
130
- }
131
- element.style[styleName] = newValue;
132
- });
133
- });
134
-
135
- extendsPrototype(Array, 'handleStyleProperty', function(element, styleName) {
136
- const dependencies = this.filter((item) => item.__$Observable);
137
- if (dependencies.length) {
138
- const style = Observable.computed(
139
- () => this.map((item) => item.valueOf()).join(', '),
140
- dependencies,
141
- );
142
- style.handleStyleProperty(element, styleName);
143
- return;
144
- }
145
- element.style[styleName] = this.join(', ');
146
- });
103
+ //
104
+ // extendsPrototype(String, 'handleStyleProperty', function(element, styleName) {
105
+ // const isCustomProperty = styleName.startsWith('--');
106
+ // if (isCustomProperty) {
107
+ // element.style.setProperty(styleName, this);
108
+ // return;
109
+ // }
110
+ // element.style[styleName] = this;
111
+ // });
112
+ //
113
+ // extendsPrototype(Number, 'handleStyleProperty', String.prototype.handleStyleProperty);
114
+ //
115
+ // extendsPrototype(ObservableItem, 'handleStyleProperty', function(element, styleName) {
116
+ // const isCustomProperty = styleName.startsWith('--');
117
+ //
118
+ // if (isCustomProperty) {
119
+ // element.style.setProperty(styleName, this.val());
120
+ // this.subscribe((newValue) => {
121
+ // if (newValue === false) {
122
+ // element.style.removeProperty(styleName);
123
+ // return;
124
+ // }
125
+ // element.style.setProperty(styleName, newValue);
126
+ // });
127
+ // return;
128
+ // }
129
+ //
130
+ // element.style[styleName] = this.val();
131
+ // this.subscribe((newValue) => {
132
+ // if (newValue === false) {
133
+ // element.style.removeProperty(styleName);
134
+ // return;
135
+ // }
136
+ // element.style[styleName] = newValue;
137
+ // });
138
+ // });
139
+ //
140
+ // extendsPrototype(Array, 'handleStyleProperty', function(element, styleName) {
141
+ // const dependencies = this.filter((item) => item.__$Observable);
142
+ // if (dependencies.length) {
143
+ // const style = Observable.computed(
144
+ // () => this.map((item) => item.valueOf()).join(', '),
145
+ // dependencies,
146
+ // );
147
+ // style.handleStyleProperty(element, styleName);
148
+ // return;
149
+ // }
150
+ // element.style[styleName] = this.join(', ');
151
+ // });
147
152
 
148
153
  // -- handleClassValue ------------------------------------------------------
149
- extendsPrototype(ObservableItem, 'handleClassValue', function(element, className) {
150
- element.classes.toggle(className, this.val());
151
- this.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
152
- });
153
-
154
- extendsPrototype(ObservableChecker, 'handleClassValue', function(element, className) {
155
- let lastClass = this.val();
156
- if(typeof lastClass === 'string') {
157
- element.classes.toggle(lastClass, true);
158
- this.subscribe((currentValue) => {
159
- element.classes.remove(lastClass);
160
- element.classes.toggle(currentValue, true);
161
- lastClass = currentValue;
162
- });
163
- return;
164
- }
165
- element.classes.toggle(className, this.val());
166
- this.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
167
- });
168
-
169
- extendsPrototype(TemplateBinding, 'handleClassValue', function(element, className) {
170
- this.$hydrate(element, className);
171
- });
172
-
173
- extendsPrototype(String, 'handleClassValue', function(element, className) {
174
- element.classes.toggle(className, this);
175
- });
176
-
177
- extendsPrototype(Boolean, 'handleClassValue', function(element, className) {
178
- element.classes.toggle(className);
179
- });
154
+ // extendsPrototype(ObservableItem, 'handleClassValue', function(element, className) {
155
+ // element.classes.toggle(className, this.val());
156
+ // this.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
157
+ // });
158
+ //
159
+ // extendsPrototype(ObservableWhen, 'handleClassValue', function(element, className) {
160
+ // element.classes.toggle(className, this.val());
161
+ // this.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
162
+ // });
163
+ //
164
+ // extendsPrototype(ObservableChecker, 'handleClassValue', function(element, className) {
165
+ // let lastClass = this.val();
166
+ // if(typeof lastClass === 'string') {
167
+ // element.classes.toggle(lastClass, true);
168
+ // this.subscribe((currentValue) => {
169
+ // element.classes.remove(lastClass);
170
+ // element.classes.toggle(currentValue, true);
171
+ // lastClass = currentValue;
172
+ // });
173
+ // return;
174
+ // }
175
+ // element.classes.toggle(className, this.val());
176
+ // this.subscribe((shouldAdd) => element.classes.toggle(className, shouldAdd));
177
+ // });
178
+ //
179
+ // extendsPrototype(TemplateBinding, 'handleClassValue', function(element, className) {
180
+ // this.$hydrate(element, className);
181
+ // });
182
+ //
183
+ // extendsPrototype(String, 'handleClassValue', function(element, className) {
184
+ // element.classes.toggle(className, this);
185
+ // });
186
+ //
187
+ // extendsPrototype(Boolean, 'handleClassValue', function(element, className) {
188
+ // element.classes.toggle(className);
189
+ // });