This repository has been archived on 2022-08-19. You can view files and clone it, but cannot push or open issues or pull requests.
hydrogen-web/src/observable/list/ConcatList.ts

166 lines
5.6 KiB
TypeScript
Raw Normal View History

2020-08-05 22:08:55 +05:30
/*
Copyright 2020 Bruno Windels <bruno@windels.cloud>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
2021-09-30 07:58:00 +05:30
import {BaseObservableList, IListObserver} from "./BaseObservableList";
2019-07-29 22:48:11 +05:30
2021-09-30 07:58:00 +05:30
export class ConcatList<T> extends BaseObservableList<T> implements IListObserver<T> {
protected _sourceLists: BaseObservableList<T>[];
protected _sourceUnsubscribes: (() => void)[] | null = null;
constructor(...sourceLists: BaseObservableList<T>[]) {
2019-07-29 22:48:11 +05:30
super();
this._sourceLists = sourceLists;
}
2021-09-30 07:58:00 +05:30
_offsetForSource(sourceList: BaseObservableList<T>): number {
2019-07-29 22:48:11 +05:30
const listIdx = this._sourceLists.indexOf(sourceList);
let offset = 0;
for (let i = 0; i < listIdx; ++i) {
offset += this._sourceLists[i].length;
}
return offset;
}
2021-09-30 07:58:00 +05:30
onSubscribeFirst(): void {
guard against updates emitted while populating during first subscription This came up now because Timeline uses a MappedList to map PendingEvents to PendingEventEntries. In the map function, we setup links between entries to support local echo for relations. When opening a timeline that has unsent relations, the initial populating of the MappedList will try to emit an update for the target entry in remoteEntries. This all happens while the ListView of the timeline is calling subscribe and all collections in the chain are populating themselves based on their sources. This usually entails calling subscribe on the source, and now you are subscribed, iterate over the source (as you're not allowed to query an unsubscribed observable collection, as it might not be populated yet, and even if it did, it wouldn't be guaranteed to be up to date as events aren't flowing yet). So in this concrete example, TilesCollection hadn't populated its tiles yet and when the update to the target of the unsent relation reached TilesCollection, the tiles array was still null and it crashed. I thought what would be the best way to fix this and have a solid model for observable collections to ensure they are always compatible with each other. I considered splitting up the subscription process in two steps where you'd first populate the source and then explicitly start events flowing. I didn't go with this way because it's really only updates that make sense to be emitted during setup. A missed update wouldn't usually bring the collections out of sync like a missed add or remove would. It would just mean the UI isn't updated (or any subsequent filtered collections are not updated), but this should be fine to ignore during setup, as you can rely on the subscribing collections down the chain picking up the update while populating. If we ever want to support add or remove events during setup, we would have to explicitly support them, but for now they are correct to throw. So for now, just ignore update events that happen during setup where needed.
2021-05-27 13:32:05 +05:30
this._sourceUnsubscribes = this._sourceLists.map(sourceList => sourceList.subscribe(this));
2019-07-29 22:48:11 +05:30
}
2021-09-30 07:58:00 +05:30
onUnsubscribeLast(): void {
for (const sourceUnsubscribe of this._sourceUnsubscribes!) {
2019-07-29 22:48:11 +05:30
sourceUnsubscribe();
}
}
2021-09-30 07:58:00 +05:30
onReset(): void {
2019-07-29 22:48:11 +05:30
// TODO: not ideal if other source lists are large
// but working impl for now
// reset, and
this.emitReset();
let idx = 0;
for(const item of this) {
this.emitAdd(idx, item);
idx += 1;
}
}
2021-09-30 07:58:00 +05:30
onAdd(index: number, value: T, sourceList: BaseObservableList<T>): void {
2019-07-29 22:48:11 +05:30
this.emitAdd(this._offsetForSource(sourceList) + index, value);
}
2021-09-30 07:58:00 +05:30
onUpdate(index: number, value: T, params: any, sourceList: BaseObservableList<T>): void {
guard against updates emitted while populating during first subscription This came up now because Timeline uses a MappedList to map PendingEvents to PendingEventEntries. In the map function, we setup links between entries to support local echo for relations. When opening a timeline that has unsent relations, the initial populating of the MappedList will try to emit an update for the target entry in remoteEntries. This all happens while the ListView of the timeline is calling subscribe and all collections in the chain are populating themselves based on their sources. This usually entails calling subscribe on the source, and now you are subscribed, iterate over the source (as you're not allowed to query an unsubscribed observable collection, as it might not be populated yet, and even if it did, it wouldn't be guaranteed to be up to date as events aren't flowing yet). So in this concrete example, TilesCollection hadn't populated its tiles yet and when the update to the target of the unsent relation reached TilesCollection, the tiles array was still null and it crashed. I thought what would be the best way to fix this and have a solid model for observable collections to ensure they are always compatible with each other. I considered splitting up the subscription process in two steps where you'd first populate the source and then explicitly start events flowing. I didn't go with this way because it's really only updates that make sense to be emitted during setup. A missed update wouldn't usually bring the collections out of sync like a missed add or remove would. It would just mean the UI isn't updated (or any subsequent filtered collections are not updated), but this should be fine to ignore during setup, as you can rely on the subscribing collections down the chain picking up the update while populating. If we ever want to support add or remove events during setup, we would have to explicitly support them, but for now they are correct to throw. So for now, just ignore update events that happen during setup where needed.
2021-05-27 13:32:05 +05:30
// if an update is emitted while calling source.subscribe() from onSubscribeFirst, ignore it
// as we are not supposed to call `length` on any uninitialized list
if (!this._sourceUnsubscribes) {
return;
}
2019-07-29 23:33:22 +05:30
this.emitUpdate(this._offsetForSource(sourceList) + index, value, params);
2019-07-29 22:48:11 +05:30
}
2021-09-30 07:58:00 +05:30
onRemove(index: number, value: T, sourceList: BaseObservableList<T>): void {
2019-07-29 22:48:11 +05:30
this.emitRemove(this._offsetForSource(sourceList) + index, value);
}
2021-09-30 07:58:00 +05:30
onMove(fromIdx: number, toIdx: number, value: T, sourceList: BaseObservableList<T>): void {
2019-07-29 22:48:11 +05:30
const offset = this._offsetForSource(sourceList);
this.emitMove(offset + fromIdx, offset + toIdx, value);
}
2021-09-30 07:58:00 +05:30
get length(): number {
2019-07-29 22:48:11 +05:30
let len = 0;
for (let i = 0; i < this._sourceLists.length; ++i) {
len += this._sourceLists[i].length;
}
return len;
}
[Symbol.iterator]() {
let sourceListIdx = 0;
let it = this._sourceLists[0][Symbol.iterator]();
return {
next: () => {
let result = it.next();
while (result.done) {
sourceListIdx += 1;
if (sourceListIdx >= this._sourceLists.length) {
return result; //done
}
it = this._sourceLists[sourceListIdx][Symbol.iterator]();
result = it.next();
}
return result;
}
}
}
}
2021-09-30 07:21:02 +05:30
import {ObservableArray} from "./ObservableArray";
2021-09-30 07:58:00 +05:30
import {defaultObserverWith} from "./BaseObservableList";
2019-07-29 22:48:11 +05:30
export async function tests() {
return {
test_length(assert) {
const all = new ConcatList(
new ObservableArray([1, 2, 3]),
new ObservableArray([11, 12, 13])
);
assert.equal(all.length, 6);
},
test_iterator(assert) {
const all = new ConcatList(
new ObservableArray([1, 2, 3]),
new ObservableArray([11, 12, 13])
);
const it = all[Symbol.iterator]();
assert.equal(it.next().value, 1);
assert.equal(it.next().value, 2);
assert.equal(it.next().value, 3);
assert.equal(it.next().value, 11);
assert.equal(it.next().value, 12);
assert.equal(it.next().value, 13);
assert(it.next().done);
},
test_add(assert) {
const list1 = new ObservableArray([1, 2, 3]);
const list2 = new ObservableArray([11, 12, 13]);
const all = new ConcatList(list1, list2);
let fired = false;
2021-09-30 07:58:00 +05:30
all.subscribe(defaultObserverWith({
2019-07-29 22:48:11 +05:30
onAdd(index, value) {
fired = true;
assert.equal(index, 4);
assert.equal(value, 11.5);
}
2021-09-30 07:58:00 +05:30
}));
2019-07-29 22:48:11 +05:30
list2.insert(1, 11.5);
assert(fired);
},
2019-07-29 23:33:06 +05:30
test_update(assert) {
const list1 = new ObservableArray([1, 2, 3]);
const list2 = new ObservableArray([11, 12, 13]);
const all = new ConcatList(list1, list2);
let fired = false;
2021-09-30 07:58:00 +05:30
all.subscribe(defaultObserverWith({
2019-07-29 23:33:06 +05:30
onUpdate(index, value) {
fired = true;
assert.equal(index, 4);
assert.equal(value, 10);
}
2021-09-30 07:58:00 +05:30
}));
2019-07-29 23:33:06 +05:30
list2.emitUpdate(1, 10);
assert(fired);
},
2019-07-29 22:48:11 +05:30
};
}