native-document 1.0.90 → 1.0.92
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/dist/native-document.components.min.js +86 -85
- package/dist/native-document.dev.js +138 -122
- package/dist/native-document.dev.js.map +1 -1
- package/dist/native-document.devtools.min.js +1 -1
- package/dist/native-document.min.js +1 -1
- package/package.json +1 -1
- package/src/core/data/ObservableItem.js +102 -80
- package/src/core/elements/control/for-each-array.js +1 -1
- package/src/core/wrappers/AttributesWrapper.js +3 -9
|
@@ -472,7 +472,6 @@ var NativeComponents = (function (exports) {
|
|
|
472
472
|
|
|
473
473
|
this.$previousValue = null;
|
|
474
474
|
this.$currentValue = value;
|
|
475
|
-
this.$isCleanedUp = false;
|
|
476
475
|
|
|
477
476
|
this.$firstListener = null;
|
|
478
477
|
this.$listeners = null;
|
|
@@ -499,16 +498,16 @@ var NativeComponents = (function (exports) {
|
|
|
499
498
|
});
|
|
500
499
|
|
|
501
500
|
ObservableItem.prototype.__$isObservable = true;
|
|
502
|
-
const DEFAULT_OPERATIONS = {};
|
|
503
501
|
const noneTrigger = function() {};
|
|
504
502
|
|
|
505
503
|
ObservableItem.prototype.intercept = function(callback) {
|
|
506
504
|
this.$interceptor = callback;
|
|
505
|
+
this.set = this.$setWithInterceptor;
|
|
507
506
|
return this;
|
|
508
507
|
};
|
|
509
508
|
|
|
510
509
|
ObservableItem.prototype.triggerFirstListener = function(operations) {
|
|
511
|
-
this.$firstListener(this.$currentValue, this.$previousValue, operations
|
|
510
|
+
this.$firstListener(this.$currentValue, this.$previousValue, operations);
|
|
512
511
|
};
|
|
513
512
|
|
|
514
513
|
ObservableItem.prototype.triggerListeners = function(operations) {
|
|
@@ -516,33 +515,12 @@ var NativeComponents = (function (exports) {
|
|
|
516
515
|
const $previousValue = this.$previousValue;
|
|
517
516
|
const $currentValue = this.$currentValue;
|
|
518
517
|
|
|
519
|
-
operations = operations || DEFAULT_OPERATIONS;
|
|
520
518
|
for(let i = 0, length = $listeners.length; i < length; i++) {
|
|
521
519
|
$listeners[i]($currentValue, $previousValue, operations);
|
|
522
520
|
}
|
|
523
521
|
};
|
|
524
522
|
|
|
525
|
-
|
|
526
|
-
if(typeof callbacks === "function") {
|
|
527
|
-
callbacks(value);
|
|
528
|
-
return;
|
|
529
|
-
}
|
|
530
|
-
if (callbacks.set) {
|
|
531
|
-
callbacks.set(value);
|
|
532
|
-
return;
|
|
533
|
-
}
|
|
534
|
-
for(let i = 0, length = callbacks.length; i < length; i++) {
|
|
535
|
-
const callback = callbacks[i];
|
|
536
|
-
callback.set ? callback.set(value) : callback(value);
|
|
537
|
-
|
|
538
|
-
}
|
|
539
|
-
};
|
|
540
|
-
|
|
541
|
-
ObservableItem.prototype.triggerWatchers = function() {
|
|
542
|
-
if(!this.$watchers) {
|
|
543
|
-
return;
|
|
544
|
-
}
|
|
545
|
-
|
|
523
|
+
ObservableItem.prototype.triggerWatchers = function(operations) {
|
|
546
524
|
const $watchers = this.$watchers;
|
|
547
525
|
const $previousValue = this.$previousValue;
|
|
548
526
|
const $currentValue = this.$currentValue;
|
|
@@ -550,20 +528,20 @@ var NativeComponents = (function (exports) {
|
|
|
550
528
|
const $currentValueCallbacks = $watchers.get($currentValue);
|
|
551
529
|
const $previousValueCallbacks = $watchers.get($previousValue);
|
|
552
530
|
if($currentValueCallbacks) {
|
|
553
|
-
|
|
531
|
+
$currentValueCallbacks(true, $previousValue, operations);
|
|
554
532
|
}
|
|
555
533
|
if($previousValueCallbacks) {
|
|
556
|
-
|
|
534
|
+
$previousValueCallbacks(false, $currentValue, operations);
|
|
557
535
|
}
|
|
558
536
|
};
|
|
559
537
|
|
|
560
538
|
ObservableItem.prototype.triggerAll = function(operations) {
|
|
561
|
-
this.triggerWatchers();
|
|
539
|
+
this.triggerWatchers(operations);
|
|
562
540
|
this.triggerListeners(operations);
|
|
563
541
|
};
|
|
564
542
|
|
|
565
543
|
ObservableItem.prototype.triggerWatchersAndFirstListener = function(operations) {
|
|
566
|
-
this.triggerWatchers();
|
|
544
|
+
this.triggerWatchers(operations);
|
|
567
545
|
this.triggerFirstListener(operations);
|
|
568
546
|
};
|
|
569
547
|
|
|
@@ -591,21 +569,8 @@ var NativeComponents = (function (exports) {
|
|
|
591
569
|
};
|
|
592
570
|
ObservableItem.prototype.trigger = noneTrigger;
|
|
593
571
|
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
*/
|
|
597
|
-
ObservableItem.prototype.set = function(data) {
|
|
598
|
-
let newValue = (typeof data === 'function') ? data(this.$currentValue) : data;
|
|
599
|
-
newValue = Validator.isObservable(newValue) ? newValue.val() : newValue;
|
|
600
|
-
|
|
601
|
-
if (this.$interceptor) {
|
|
602
|
-
const result = this.$interceptor(newValue, this.$currentValue);
|
|
603
|
-
|
|
604
|
-
if (result !== undefined) {
|
|
605
|
-
newValue = result;
|
|
606
|
-
}
|
|
607
|
-
}
|
|
608
|
-
|
|
572
|
+
ObservableItem.prototype.$updateWithNewValue = function(newValue) {
|
|
573
|
+
newValue = newValue?.__$isObservable ? newValue.val() : newValue;
|
|
609
574
|
if(this.$currentValue === newValue) {
|
|
610
575
|
return;
|
|
611
576
|
}
|
|
@@ -615,6 +580,30 @@ var NativeComponents = (function (exports) {
|
|
|
615
580
|
this.$previousValue = null;
|
|
616
581
|
};
|
|
617
582
|
|
|
583
|
+
/**
|
|
584
|
+
* @param {*} data
|
|
585
|
+
*/
|
|
586
|
+
ObservableItem.prototype.$setWithInterceptor = function(data) {
|
|
587
|
+
let newValue = (typeof data === 'function') ? data(this.$currentValue) : data;
|
|
588
|
+
const result = this.$interceptor(newValue, this.$currentValue);
|
|
589
|
+
|
|
590
|
+
if (result !== undefined) {
|
|
591
|
+
newValue = result;
|
|
592
|
+
}
|
|
593
|
+
|
|
594
|
+
this.$updateWithNewValue(newValue);
|
|
595
|
+
};
|
|
596
|
+
|
|
597
|
+
/**
|
|
598
|
+
* @param {*} data
|
|
599
|
+
*/
|
|
600
|
+
ObservableItem.prototype.$basicSet = function(data) {
|
|
601
|
+
let newValue = (typeof data === 'function') ? data(this.$currentValue) : data;
|
|
602
|
+
this.$updateWithNewValue(newValue);
|
|
603
|
+
};
|
|
604
|
+
|
|
605
|
+
ObservableItem.prototype.set = ObservableItem.prototype.$basicSet;
|
|
606
|
+
|
|
618
607
|
ObservableItem.prototype.val = function() {
|
|
619
608
|
return this.$currentValue;
|
|
620
609
|
};
|
|
@@ -650,32 +639,19 @@ var NativeComponents = (function (exports) {
|
|
|
650
639
|
}
|
|
651
640
|
MemoryManager.unregister(this.$memoryId);
|
|
652
641
|
this.disconnectAll();
|
|
653
|
-
this.$isCleanedUp = true;
|
|
654
642
|
delete this.$value;
|
|
655
643
|
};
|
|
656
644
|
|
|
657
645
|
/**
|
|
658
646
|
*
|
|
659
647
|
* @param {Function} callback
|
|
660
|
-
* @param {any} target
|
|
661
648
|
* @returns {(function(): void)}
|
|
662
649
|
*/
|
|
663
|
-
ObservableItem.prototype.subscribe = function(callback
|
|
650
|
+
ObservableItem.prototype.subscribe = function(callback) {
|
|
664
651
|
this.$listeners = this.$listeners ?? [];
|
|
665
|
-
if (this.$isCleanedUp) {
|
|
666
|
-
DebugManager.warn('Observable subscription', '⚠️ Attempted to subscribe to a cleaned up observable.');
|
|
667
|
-
return () => {};
|
|
668
|
-
}
|
|
669
|
-
if (typeof callback !== 'function') {
|
|
670
|
-
throw new NativeDocumentError('Callback must be a function');
|
|
671
|
-
}
|
|
672
652
|
|
|
673
653
|
this.$listeners.push(callback);
|
|
674
654
|
this.assocTrigger();
|
|
675
|
-
return () => {
|
|
676
|
-
this.unsubscribe(callback);
|
|
677
|
-
this.assocTrigger();
|
|
678
|
-
};
|
|
679
655
|
};
|
|
680
656
|
|
|
681
657
|
ObservableItem.prototype.on = function(value, callback) {
|
|
@@ -683,40 +659,66 @@ var NativeComponents = (function (exports) {
|
|
|
683
659
|
|
|
684
660
|
let watchValueList = this.$watchers.get(value);
|
|
685
661
|
|
|
662
|
+
if(callback.__$isObservable) {
|
|
663
|
+
callback = callback.set.bind(callback);
|
|
664
|
+
}
|
|
665
|
+
|
|
686
666
|
if(!watchValueList) {
|
|
667
|
+
watchValueList = callback;
|
|
687
668
|
this.$watchers.set(value, callback);
|
|
688
|
-
} else if(!Validator.isArray(watchValueList)) {
|
|
669
|
+
} else if(!Validator.isArray(watchValueList.list)) {
|
|
689
670
|
watchValueList = [watchValueList, callback];
|
|
690
|
-
|
|
671
|
+
callback = (value) => {
|
|
672
|
+
for(let i = 0, length = watchValueList.length; i < length; i++) {
|
|
673
|
+
watchValueList[i](value);
|
|
674
|
+
}
|
|
675
|
+
};
|
|
676
|
+
callback.list = watchValueList;
|
|
677
|
+
this.$watchers.set(value, callback);
|
|
691
678
|
} else {
|
|
692
|
-
watchValueList.push(callback);
|
|
679
|
+
watchValueList.list.push(callback);
|
|
693
680
|
}
|
|
694
681
|
|
|
695
682
|
this.assocTrigger();
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
683
|
+
};
|
|
684
|
+
|
|
685
|
+
/**
|
|
686
|
+
* @param {*} value
|
|
687
|
+
* @param {Function} callback - if omitted, removes all watchers for this value
|
|
688
|
+
*/
|
|
689
|
+
ObservableItem.prototype.off = function(value, callback) {
|
|
690
|
+
if(!this.$watchers) return;
|
|
691
|
+
|
|
692
|
+
const watchValueList = this.$watchers.get(value);
|
|
693
|
+
if(!watchValueList) return;
|
|
694
|
+
|
|
695
|
+
if(!callback || !Array.isArray(watchValueList.list)) {
|
|
696
|
+
this.$watchers?.delete(value);
|
|
706
697
|
this.assocTrigger();
|
|
707
|
-
|
|
698
|
+
return;
|
|
699
|
+
}
|
|
700
|
+
const index = watchValueList.indexOf(callback);
|
|
701
|
+
watchValueList?.splice(index, 1);
|
|
702
|
+
if(watchValueList.length === 1) {
|
|
703
|
+
this.$watchers.set(value, watchValueList[0]);
|
|
704
|
+
}
|
|
705
|
+
else if(watchValueList.length === 0) {
|
|
706
|
+
this.$watchers?.delete(value);
|
|
707
|
+
watchValueList = null;
|
|
708
|
+
}
|
|
709
|
+
this.assocTrigger();
|
|
708
710
|
};
|
|
709
711
|
|
|
710
712
|
ObservableItem.prototype.once = function(predicate, callback) {
|
|
711
713
|
const fn = typeof predicate === 'function' ? predicate : (v) => v === predicate;
|
|
712
714
|
|
|
713
|
-
const
|
|
715
|
+
const handler = (val) => {
|
|
714
716
|
if (fn(val)) {
|
|
715
|
-
|
|
717
|
+
this.unsubscribe(handler);
|
|
716
718
|
callback(val);
|
|
717
719
|
}
|
|
718
|
-
}
|
|
719
|
-
|
|
720
|
+
};
|
|
721
|
+
this.subscribe(handler);
|
|
720
722
|
};
|
|
721
723
|
|
|
722
724
|
/**
|
|
@@ -724,6 +726,7 @@ var NativeComponents = (function (exports) {
|
|
|
724
726
|
* @param {Function} callback
|
|
725
727
|
*/
|
|
726
728
|
ObservableItem.prototype.unsubscribe = function(callback) {
|
|
729
|
+
if(!this.$listeners) return;
|
|
727
730
|
const index = this.$listeners.indexOf(callback);
|
|
728
731
|
if (index > -1) {
|
|
729
732
|
this.$listeners.splice(index, 1);
|
|
@@ -781,6 +784,10 @@ var NativeComponents = (function (exports) {
|
|
|
781
784
|
return String(this.$currentValue);
|
|
782
785
|
};
|
|
783
786
|
|
|
787
|
+
ObservableItem.prototype.valueOf = function() {
|
|
788
|
+
return this.$currentValue;
|
|
789
|
+
};
|
|
790
|
+
|
|
784
791
|
const DocumentObserver = {
|
|
785
792
|
mounted: new WeakMap(),
|
|
786
793
|
mountedSupposedSize: 0,
|
|
@@ -1426,9 +1433,7 @@ var NativeComponents = (function (exports) {
|
|
|
1426
1433
|
* @param {Object} data
|
|
1427
1434
|
*/
|
|
1428
1435
|
function bindClassAttribute(element, data) {
|
|
1429
|
-
const
|
|
1430
|
-
for(let i = 0, length = classNames.length; i < length; i++) {
|
|
1431
|
-
const className = classNames[i];
|
|
1436
|
+
for(const className in data) {
|
|
1432
1437
|
const value = data[className];
|
|
1433
1438
|
if(value.__$isObservable) {
|
|
1434
1439
|
element.classes.toggle(className, value.val());
|
|
@@ -1455,9 +1460,7 @@ var NativeComponents = (function (exports) {
|
|
|
1455
1460
|
* @param {Object} data
|
|
1456
1461
|
*/
|
|
1457
1462
|
function bindStyleAttribute(element, data) {
|
|
1458
|
-
const
|
|
1459
|
-
for(let i = 0, length = keys.length; i < length; i++) {
|
|
1460
|
-
const styleName = keys[i];
|
|
1463
|
+
for(const styleName in data) {
|
|
1461
1464
|
const value = data[styleName];
|
|
1462
1465
|
if(value.__$isObservable) {
|
|
1463
1466
|
element.style[styleName] = value.val();
|
|
@@ -1523,10 +1526,8 @@ var NativeComponents = (function (exports) {
|
|
|
1523
1526
|
* @param {Object} attributes
|
|
1524
1527
|
*/
|
|
1525
1528
|
function AttributesWrapper(element, attributes) {
|
|
1526
|
-
const attributesKeys = Object.keys(attributes);
|
|
1527
1529
|
|
|
1528
|
-
for(
|
|
1529
|
-
const originalAttributeName = attributesKeys[i];
|
|
1530
|
+
for(const originalAttributeName in attributes) {
|
|
1530
1531
|
const attributeName = originalAttributeName.toLowerCase();
|
|
1531
1532
|
let value = attributes[originalAttributeName];
|
|
1532
1533
|
if(value == null) {
|