Merge branch 'master' into bwindels/vite-mvp

doc/TS-MIGRATION.md

@@ -1,7 +1,9 @@
-# Typescript migration
+# Typescript style guide
 
-## Introduce `abstract` & `override`
+## Use `type` rather than `interface` for named parameters and POJO return values.
 
- - find all methods and getters that throw or are empty in base classes and turn into abstract method or if all methods are abstract, into an interface.
- - change child impls to not call super.method and to add override
- - don't allow implicit override in ts config
+`type` and `interface` can be used somewhat interchangebly used, but let's use `type` to describe data and `interface` to describe (polymorphic) behaviour.
+
+Good examples of data are option objects to have named parameters, and POJO (plain old javascript objects) without any methods, just fields.
+
+Also see [this playground](https://www.typescriptlang.org/play?#code/C4TwDgpgBACghgJwgO2AeTMAlge2QZygF4oBvAKCiqmTgFsIAuKfYBLZAcwG5LqATCABs4IAPzNkAVzoAjCAl4BfcuVCQoAYQAWWIfwzY8hEvCSpDuAlABkZPlQDGOITgTNW7LstWOR+QjMUYHtqKGcCNilHYDcAChxMK3xmIIsk4wBKewcoFRVyPzgArV19KAgAD2AUfkDEYNDqCM9o2IQEjIJmHT0DLvxsijCw-ClIDsSjAkzeEebjEIYAuE5oEgADABJSKeSAOloGJSgsQh29433nVwQlDbnqfKA)

doc/impl-thoughts/SDK.md

@@ -0,0 +1,97 @@
+SDK:
+
+ - we need to compile src/lib.ts to javascript, with a d.ts file generated as well. We need to compile to javascript once for cjs and once of es modules. The package.json looks like this:
+
+we don't need to bundle for the sdk case! we might need to do some transpilation to just plain ES6 (e.g. don't assume ?. and ??) we could use a browserslist query for this e.g. `node 14`. esbuild seems to support this as well, tldraw uses esbuild for their build.
+
+one advantage of not bundling the files for the sdk is that you can still use import overrides in the consuming project build settings. is that an idiomatic way of doing things though?
+
+
+
+```
+"main": "./dist/index.cjs",
+  "exports": {
+    "import": "./dist/index.mjs",
+    "require": "./dist/index.cjs"
+  },
+  "types": "dist/index.d.ts",
+```
+
+this way we will support typescript, non-esm javascript and esm javascript using libhydrogen as an SDK
+
+got this from https://medium.com/dazn-tech/publishing-npm-packages-as-native-es-modules-41ffbc0a9dea
+
+how about the assets?
+
+we also need to build the app
+
+we need to be able to version libhydrogen independently from hydrogen the app? as any api breaking changes will need a major version increase. we probably want to end up with a monorepo where the app uses the sdk as well and we just use the local code with yarn link?
+
+## Assets
+
+we want to provide scss/sass files, but also css that can be included
+https://github.com/webpack/webpack/issues/7353 seems to imply that we just need to include the assets in the published files and from there on it is the consumer of libhydrogen's problem.
+
+
+how does all of this tie in with vite?
+
+
+we want to have hydrogenapp be a consumer of libhydrogen, potentially as two packages in a monorepo ... but we want the SDK to expose views and stylesheets... without having an index.html (which would be in hydrogenapp). this seems a bit odd...?
+
+what would be in hydrogenapp actually? just an index.html file?
+
+I'm not sure it makes sense to have them be 2 different packages in a monorepo, they should really be two artifacts from the same directory.
+
+the stylesheets included in libhydrogen are from the same main.css file as is used in the app
+
+https://www.freecodecamp.org/news/build-a-css-library-with-vitejs/
+
+basically, we import the sass file from src/lib.ts so it is included in the assets there too, and we also create a plugin that emits a file for every sass file as suggested in the link above?
+
+we probably want two different build commands for the app and the sdk though, we could have a parent vite config that both build configs extend from?
+
+
+### Dependency assets
+our dependencies should not be bundled for the SDK case. So if we import aesjs, it would be up to the build system of the consuming project to make that import work.
+
+the paths.ts thingy ... we want to make it easy for people to setup the assets for our dependencies (olm), some assets are also part of the sdk itself. it might make sense to make all of the assets there part of the sdk (e.g. bundle olm.wasm and friends?) although shipping crypto, etc ...
+
+perhaps we should have an include file per build system that treats own assets and dep assets the same by including the package name as wel for our own deps:
+```js
+import _downloadSandboxPath from "@matrix-org/hydrogen-sdk/download-sandbox.html?url";
+import _serviceWorkerPath from "@matrix-org/hydrogen-sdk/sw.js?url"; // not yet sure this is the way to do it
+import olmWasmPath from "@matrix-org/olm/olm.wasm?url";
+import olmJsPath from "@matrix-org/olm/olm.js?url";
+import olmLegacyJsPath from "@matrix-org/olm/olm_legacy.js?url";
+
+export const olmPaths = {
+    wasm: olmWasmPath,
+    legacyBundle: olmLegacyJsPath,
+    wasmBundle: olmJsPath,
+};
+
+export const downloadSandboxPath = _downloadSandboxPath;
+```
+
+we could put this file per build system, as ESM, in dist as well so you can include it to get the paths
+
+
+## Tooling
+
+ - `vite` a more high-level build tool that takes your index.html and turns it into optimized assets that you can host for production, as well as a very fast dev server. is used to have good default settings for our tools, typescript support, and also deals with asset compiling. good dev server. Would be nice to have the same tool for dev and prod. vite has good support for using `import` for anything that is not javascript, where we had an issue with `snowpack` (to get the prod path of an asset).
+ - `rollup`: inlines 
+ - `lerna` is used to handle multi-package monorepos
+ - `esbuild`: a js/ts build tool that we could use for building the lower level sdk where no other assets are involved, `vite` uses it for fast dev builds (`rollup` for prod). For now we won't extract a lower level sdk though.
+
+
+## TODO
+
+ - finish vite app build (without IE11 for now?)
+ - create vite config to build src/lib.ts in cjs and esm, inheriting from a common base config with the app config
+    - this will create a dist folder with
+        - the whole source tree in es and cjs format
+        - an es file to import get the asset paths as they are expected by Platform, per build system
+        - assets from hydrogen itself:
+            - css files and any resource used therein
+            - download-sandbox.html
+        - a type declaration file (index.d.ts)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hydrogen-web",
-  "version": "0.2.21",
+  "version": "0.2.22",
   "description": "A javascript matrix client prototype, trying to minize RAM usage by offloading as much as possible to IndexedDB",
   "main": "src/lib.ts",
   "directories": {
@@ -10,7 +10,7 @@
     "lint": "eslint --cache src/",
     "lint-ts": "eslint src/ -c .ts-eslintrc.js --ext .ts",
     "lint-ci": "eslint src/",
-    "test": "impunity --entry-point src/platform/web/main.js --force-esm-dirs src/ --root-dir src/",
+    "test": "impunity --entry-point src/main.js src/platform/web/Platform.js --force-esm-dirs lib/ src/ --root-dir src/",
     "start": "vite --port 3000",
     "build": "vite build"
   },
@@ -42,9 +42,8 @@
     "eslint": "^7.32.0",
     "fake-indexeddb": "^3.1.2",
     "finalhandler": "^1.1.1",
-    "impunity": "^1.0.1",
+    "impunity": "^1.0.9",
     "mdn-polyfills": "^5.20.0",
-    "node-html-parser": "^4.0.0",
     "postcss": "^8.1.1",
     "postcss-css-variables": "^0.17.0",
     "postcss-flexbugs-fixes": "^4.2.1",
@@ -68,6 +67,7 @@
     "bs58": "^4.0.1",
     "dompurify": "^2.3.0",
     "es6-promise": "https://github.com/bwindels/es6-promise.git#bwindels/expose-flush",
+    "node-html-parser": "^4.0.0",
     "rollup": "^2.26.4",
     "text-encoding": "^0.7.0",
     "vite": "^2.6.3"

src/domain/ViewModel.js

@@ -19,7 +19,7 @@ limitations under the License.
 // we do need to return a disposable from EventEmitter.on, or at least have a method here to easily track a subscription to an EventEmitter
 
 import {EventEmitter} from "../utils/EventEmitter";
-import {Disposables} from "../utils/Disposables.js";
+import {Disposables} from "../utils/Disposables";
 
 export class ViewModel extends EventEmitter {
     constructor(options = {}) {

src/domain/session/SessionStatusViewModel.js

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import {ViewModel} from "../ViewModel.js";
-import {createEnum} from "../../utils/enum.js";
+import {createEnum} from "../../utils/enum";
 import {ConnectionStatus} from "../../matrix/net/Reconnector.js";
 import {SyncStatus} from "../../matrix/Sync.js";
 

src/domain/session/room/timeline/ReactionsViewModel.js

@@ -184,11 +184,11 @@ import {Clock as MockClock} from "../../../../mocks/Clock.js";
 import {createMockStorage} from "../../../../mocks/Storage";
 import {ListObserver} from "../../../../mocks/ListObserver.js";
 import {createEvent, withTextBody, withContent} from "../../../../mocks/event.js";
-import {NullLogItem, NullLogger} from "../../../../logging/NullLogger.js";
+import {NullLogItem, NullLogger} from "../../../../logging/NullLogger";
 import {HomeServer as MockHomeServer} from "../../../../mocks/HomeServer.js";
 // other imports
 import {BaseMessageTile} from "./tiles/BaseMessageTile.js";
-import {MappedList} from "../../../../observable/list/MappedList.js";
+import {MappedList} from "../../../../observable/list/MappedList";
 import {ObservableValue} from "../../../../observable/ObservableValue";
 import {PowerLevels} from "../../../../matrix/room/PowerLevels.js";
 

src/domain/session/room/timeline/TilesCollection.js

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import {BaseObservableList} from "../../../../observable/list/BaseObservableList";
-import {sortedIndex} from "../../../../utils/sortedIndex.js";
+import {sortedIndex} from "../../../../utils/sortedIndex";
 
 // maps 1..n entries to 0..1 tile. Entries are what is stored in the timeline, either an event or fragmentboundary
 // for now, tileCreator should be stable in whether it returns a tile or not.
@@ -253,7 +253,7 @@ export class TilesCollection extends BaseObservableList {
     }
 }
 
-import {ObservableArray} from "../../../../observable/list/ObservableArray.js";
+import {ObservableArray} from "../../../../observable/list/ObservableArray";
 import {UpdateAction} from "./UpdateAction.js";
 
 export function tests() {

src/domain/session/room/timeline/tiles/BaseTextTile.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 import {BaseMessageTile} from "./BaseMessageTile.js";
 import {stringAsBody} from "../MessageBody.js";
-import {createEnum} from "../../../../../utils/enum.js";
+import {createEnum} from "../../../../../utils/enum";
 
 export const BodyFormat = createEnum("Plain", "Html");
 

src/domain/session/room/timeline/tiles/FileTile.js

@@ -16,7 +16,7 @@ limitations under the License.
 */
 
 import {BaseMessageTile} from "./BaseMessageTile.js";
-import {formatSize} from "../../../../../utils/formatSize.js";
+import {formatSize} from "../../../../../utils/formatSize";
 import {SendStatus} from "../../../../../matrix/room/sending/PendingEvent.js";
 
 export class FileTile extends BaseMessageTile {

src/domain/session/settings/SessionBackupViewModel.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 import {ViewModel} from "../../ViewModel.js";
 import {KeyType} from "../../../matrix/ssss/index.js";
-import {createEnum} from "../../../utils/enum.js";
+import {createEnum} from "../../../utils/enum";
 
 export const Status = createEnum("Enabled", "SetupKey", "SetupPhrase", "Pending"); 
 

src/logging/BaseLogger.ts

@@ -15,23 +15,29 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {LogItem} from "./LogItem.js";
-import {LogLevel, LogFilter} from "./LogFilter.js";
+import {LogItem} from "./LogItem";
+import {LogLevel, LogFilter} from "./LogFilter";
+import type {ILogger, ILogExport, FilterCreator, LabelOrValues, LogCallback, ILogItem, ISerializedItem} from "./types";
+import type {Platform} from "../platform/web/Platform.js";
 
-export class BaseLogger {
-    constructor({platform}) {
-        this._openItems = new Set();
+export abstract class BaseLogger implements ILogger {
+    protected _openItems: Set<LogItem> = new Set();
+    protected _platform: Platform;
+    protected _serializedTransformer: (item: ISerializedItem) => ISerializedItem;
+
+    constructor({platform, serializedTransformer = (item: ISerializedItem) => item}) {
         this._platform = platform;
+        this._serializedTransformer = serializedTransformer;
     }
 
-    log(labelOrValues, logLevel = LogLevel.Info) {
-        const item = new LogItem(labelOrValues, logLevel, null, this);
-        item._end = item._start;
-        this._persistItem(item, null, false);
+    log(labelOrValues: LabelOrValues, logLevel: LogLevel = LogLevel.Info): void {
+        const item = new LogItem(labelOrValues, logLevel, this);
+        item.end = item.start;
+        this._persistItem(item, undefined, false);
     }
 
     /** if item is a log item, wrap the callback in a child of it, otherwise start a new root log item. */
-    wrapOrRun(item, labelOrValues, callback, logLevel = null, filterCreator = null) {
+    wrapOrRun<T>(item: ILogItem | undefined, labelOrValues: LabelOrValues, callback: LogCallback<T>, logLevel?: LogLevel, filterCreator?: FilterCreator): T {
         if (item) {
             return item.wrap(labelOrValues, callback, logLevel, filterCreator);
         } else {
@@ -43,28 +49,31 @@ export class BaseLogger {
     where the (async) result or errors are not propagated but still logged.
     Useful to pair with LogItem.refDetached.
 
-    @return {LogItem} the log item added, useful to pass to LogItem.refDetached */
-    runDetached(labelOrValues, callback, logLevel = null, filterCreator = null) {
-        if (logLevel === null) {
+    @return {ILogItem} the log item added, useful to pass to LogItem.refDetached */
+    runDetached<T>(labelOrValues: LabelOrValues, callback: LogCallback<T>, logLevel?: LogLevel, filterCreator?: FilterCreator): ILogItem {
+        if (!logLevel) {
             logLevel = LogLevel.Info;
         }
-        const item = new LogItem(labelOrValues, logLevel, null, this);
-        this._run(item, callback, logLevel, filterCreator, false /* don't throw, nobody is awaiting */);
+        const item = new LogItem(labelOrValues, logLevel, this);
+        this._run(item, callback, logLevel, false /* don't throw, nobody is awaiting */, filterCreator);
         return item;
     }
 
     /** run a callback wrapped in a log operation.
     Errors and duration are transparently logged, also for async operations.
     Whatever the callback returns is returned here. */
-    run(labelOrValues, callback, logLevel = null, filterCreator = null) {
-        if (logLevel === null) {
+    run<T>(labelOrValues: LabelOrValues, callback: LogCallback<T>, logLevel?: LogLevel, filterCreator?: FilterCreator): T {
+        if (logLevel === undefined) {
             logLevel = LogLevel.Info;
         }
-        const item = new LogItem(labelOrValues, logLevel, null, this);
-        return this._run(item, callback, logLevel, filterCreator, true);
+        const item = new LogItem(labelOrValues, logLevel, this);
+        return this._run(item, callback, logLevel, true, filterCreator);
     }
 
-    _run(item, callback, logLevel, filterCreator, shouldThrow) {
+    _run<T>(item: LogItem, callback: LogCallback<T>, logLevel: LogLevel, wantResult: true, filterCreator?: FilterCreator): T;
+    // we don't return if we don't throw, as we don't have anything to return when an error is caught but swallowed for the fire-and-forget case.
+    _run<T>(item: LogItem, callback: LogCallback<T>, logLevel: LogLevel, wantResult: false, filterCreator?: FilterCreator): void;
+    _run<T>(item: LogItem, callback: LogCallback<T>, logLevel: LogLevel, wantResult: boolean, filterCreator?: FilterCreator): T | void {
         this._openItems.add(item);
 
         const finishItem = () => {
@@ -88,24 +97,29 @@ export class BaseLogger {
         };
 
         try {
-            const result = item.run(callback);
+            let result = item.run(callback);
             if (result instanceof Promise) {
-                return result.then(promiseResult => {
+                result =  result.then(promiseResult => {
                     finishItem();
                     return promiseResult;
                 }, err => {
                     finishItem();
-                    if (shouldThrow) {
+                    if (wantResult) {
                         throw err;
                     }
-                });
+                }) as unknown as T;
+                if (wantResult) {
+                    return result;
+                }
             } else {
                 finishItem();
+                if(wantResult) {
                     return result;
                 }
+            }
         } catch (err) {
             finishItem();
-            if (shouldThrow) {
+            if (wantResult) {
                 throw err;
             }
         }
@@ -127,24 +141,20 @@ export class BaseLogger {
         this._openItems.clear();
     }
 
-    _persistItem() {
-        throw new Error("not implemented");
-    }
+    abstract _persistItem(item: LogItem, filter?: LogFilter, forced?: boolean): void;
 
-    async export() {
-        throw new Error("not implemented");
-    }
+    abstract export(): Promise<ILogExport | undefined>;
 
     // expose log level without needing 
-    get level() {
+    get level(): typeof LogLevel {
         return LogLevel;
     }
 
-    _now() {
+    _now(): number {
         return this._platform.clock.now();
     }
 
-    _createRefId() {
+    _createRefId(): number {
         return Math.round(this._platform.random() * Number.MAX_SAFE_INTEGER);
     }
 }

src/logging/ConsoleLogger.ts

@@ -13,32 +13,35 @@ 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.
 */
-import {BaseLogger} from "./BaseLogger.js";
+import {BaseLogger} from "./BaseLogger";
+import {LogItem} from "./LogItem";
+import type {ILogItem, LogItemValues, ILogExport} from "./types";
 
 export class ConsoleLogger extends BaseLogger {
-    _persistItem(item) {
+    _persistItem(item: LogItem): void {
         printToConsole(item);
     }
+
+    async export(): Promise<ILogExport | undefined> {
+        return undefined;
+    }
 }
 
 const excludedKeysFromTable = ["l", "id"];
-function filterValues(values) {
-    if (!values) {
-        return null;
-    }
+function filterValues(values: LogItemValues): LogItemValues | null {
     return Object.entries(values)
         .filter(([key]) => !excludedKeysFromTable.includes(key))
-        .reduce((obj, [key, value]) => {
+        .reduce((obj: LogItemValues, [key, value]) => {
             obj = obj || {};
             obj[key] = value;
             return obj;
         }, null);
 }
 
-function printToConsole(item) {
+function printToConsole(item: LogItem): void {
     const label = `${itemCaption(item)} (${item.duration}ms)`;
-    const filteredValues = filterValues(item._values);
-    const shouldGroup = item._children || filteredValues;
+    const filteredValues = filterValues(item.values);
+    const shouldGroup = item.children || filteredValues;
     if (shouldGroup) {
         if (item.error) {
             console.group(label);
@@ -58,8 +61,8 @@ function printToConsole(item) {
     if (filteredValues) {
         console.table(filteredValues);
     }
-    if (item._children) {
-        for(const c of item._children) {
+    if (item.children) {
+        for(const c of item.children) {
             printToConsole(c);
         }
     }
@@ -68,18 +71,18 @@ function printToConsole(item) {
     }
 }
 
-function itemCaption(item) {
-    if (item._values.t === "network") {
-        return `${item._values.method} ${item._values.url}`;
-    } else if (item._values.l && typeof item._values.id !== "undefined") {
-        return `${item._values.l} ${item._values.id}`;
-    } else if (item._values.l && typeof item._values.status !== "undefined") {
-        return `${item._values.l} (${item._values.status})`;
-    } else if (item._values.l && item.error) {
-        return `${item._values.l} failed`;
-    } else if (typeof item._values.ref !== "undefined") {
-        return `ref ${item._values.ref}`;
+function itemCaption(item: ILogItem): string {
+    if (item.values.t === "network") {
+        return `${item.values.method} ${item.values.url}`;
+    } else if (item.values.l && typeof item.values.id !== "undefined") {
+        return `${item.values.l} ${item.values.id}`;
+    } else if (item.values.l && typeof item.values.status !== "undefined") {
+        return `${item.values.l} (${item.values.status})`;
+    } else if (item.values.l && item.error) {
+        return `${item.values.l} failed`;
+    } else if (typeof item.values.ref !== "undefined") {
+        return `ref ${item.values.ref}`;
     } else {
-        return item._values.l || item._values.type;
+        return item.values.l || item.values.type;
     }
 }

src/logging/IDBLogger.ts

@@ -22,10 +22,25 @@ import {
     iterateCursor,
     fetchResults,
 } from "../matrix/storage/idb/utils";
-import {BaseLogger} from "./BaseLogger.js";
+import {BaseLogger} from "./BaseLogger";
+import type {Interval} from "../platform/web/dom/Clock";
+import type {Platform} from "../platform/web/Platform.js";
+import type {BlobHandle} from "../platform/web/dom/BlobHandle.js";
+import type {ILogItem, ILogExport, ISerializedItem} from "./types";
+import type {LogFilter} from "./LogFilter";
+
+type QueuedItem = {
+    json: string;
+    id?: number;
+}
 
 export class IDBLogger extends BaseLogger {
-    constructor(options) {
+    private readonly _name: string;
+    private readonly _limit: number;
+    private readonly _flushInterval: Interval;
+    private _queuedItems: QueuedItem[];
+
+    constructor(options: {name: string, flushInterval?: number, limit?: number, platform: Platform, serializedTransformer?: (item: ISerializedItem) => ISerializedItem}) {
         super(options);
         const {name, flushInterval = 60 * 1000, limit = 3000} = options;
         this._name = name;
@@ -36,18 +51,19 @@ export class IDBLogger extends BaseLogger {
         this._flushInterval = this._platform.clock.createInterval(() => this._tryFlush(), flushInterval);
     }
 
-    dispose() {
+    // TODO: move dispose to ILogger, listen to pagehide elsewhere and call dispose from there, which calls _finishAllAndFlush
+    dispose(): void {
         window.removeEventListener("pagehide", this, false);
         this._flushInterval.dispose();
     }
 
-    handleEvent(evt) {
+    handleEvent(evt: Event): void {
         if (evt.type === "pagehide") {
             this._finishAllAndFlush();
         }
     }
 
-    async _tryFlush() {
+    async _tryFlush(): Promise<void> {
         const db = await this._openDB();
         try {
             const txn = db.transaction(["logs"], "readwrite");
@@ -77,13 +93,13 @@ export class IDBLogger extends BaseLogger {
         }
     }
 
-    _finishAllAndFlush() {
+    _finishAllAndFlush(): void {
         this._finishOpenItems();
         this.log({l: "pagehide, closing logs", t: "navigation"});
         this._persistQueuedItems(this._queuedItems);
     }
 
-    _loadQueuedItems() {
+    _loadQueuedItems(): QueuedItem[] {
         const key = `${this._name}_queuedItems`;
         try {
             const json = window.localStorage.getItem(key);
@@ -97,18 +113,21 @@ export class IDBLogger extends BaseLogger {
         return [];
     }
 
-    _openDB() {
+    _openDB(): Promise<IDBDatabase> {
         return openDatabase(this._name, db => db.createObjectStore("logs", {keyPath: "id", autoIncrement: true}), 1);
     }
     
-    _persistItem(logItem, filter, forced) {
-        const serializedItem = logItem.serialize(filter, forced);
+    _persistItem(logItem: ILogItem, filter: LogFilter, forced: boolean): void {
+        const serializedItem = logItem.serialize(filter, undefined, forced);
+        if (serializedItem) {
+            const transformedSerializedItem = this._serializedTransformer(serializedItem);
             this._queuedItems.push({
-            json: JSON.stringify(serializedItem)
+                json: JSON.stringify(transformedSerializedItem)
             });
         }
+    }
 
-    _persistQueuedItems(items) {
+    _persistQueuedItems(items: QueuedItem[]): void {
         try {
             window.localStorage.setItem(`${this._name}_queuedItems`, JSON.stringify(items));
         } catch (e) {
@@ -116,12 +135,12 @@ export class IDBLogger extends BaseLogger {
         }
     }
 
-    async export() {
+    async export(): Promise<ILogExport> {
         const db = await this._openDB();
         try {
             const txn = db.transaction(["logs"], "readonly");
             const logs = txn.objectStore("logs");
-            const storedItems = await fetchResults(logs.openCursor(), () => false);
+            const storedItems: QueuedItem[] = await fetchResults(logs.openCursor(), () => false);
             const allItems = storedItems.concat(this._queuedItems);
             return new IDBLogExport(allItems, this, this._platform);
         } finally {
@@ -131,19 +150,22 @@ export class IDBLogger extends BaseLogger {
         }
     }
 
-    async _removeItems(items) {
+    async _removeItems(items: QueuedItem[]): Promise<void> {
         const db = await this._openDB();
         try {
             const txn = db.transaction(["logs"], "readwrite");
             const logs = txn.objectStore("logs");
             for (const item of items) {
-                const queuedIdx = this._queuedItems.findIndex(i => i.id === item.id);
-                if (queuedIdx === -1) {
+                if (typeof item.id === "number") {
                     logs.delete(item.id);
                 } else {
+                    // assume the (non-persisted) object in each array will be the same
+                    const queuedIdx = this._queuedItems.indexOf(item);
+                    if (queuedIdx === -1) {
                         this._queuedItems.splice(queuedIdx, 1);
                     }
                 }
+            }
             await txnAsPromise(txn);
         } finally {
             try {
@@ -153,33 +175,37 @@ export class IDBLogger extends BaseLogger {
     }
 }
 
-class IDBLogExport {
-    constructor(items, logger, platform) {
+class IDBLogExport implements ILogExport {
+    private readonly _items: QueuedItem[];
+    private readonly _logger: IDBLogger;
+    private readonly _platform: Platform;
+
+    constructor(items: QueuedItem[], logger: IDBLogger, platform: Platform) {
         this._items = items;
         this._logger = logger;
         this._platform = platform;
     }
     
-    get count() {
+    get count(): number {
         return this._items.length;
     }
 
     /**
      * @return {Promise}
      */
-    removeFromStore() {
+    removeFromStore(): Promise<void> {
         return this._logger._removeItems(this._items);
     }
 
-    asBlob() {
+    asBlob(): BlobHandle {
         const log = {
             formatVersion: 1,
             appVersion: this._platform.updateService?.version,
             items: this._items.map(i => JSON.parse(i.json))
         };
         const json = JSON.stringify(log);
-        const buffer = this._platform.encoding.utf8.encode(json);
-        const blob = this._platform.createBlob(buffer, "application/json");
+        const buffer: Uint8Array = this._platform.encoding.utf8.encode(json);
+        const blob: BlobHandle = this._platform.createBlob(buffer, "application/json");
         return blob;
     }
 }

src/logging/LogFilter.ts

@@ -14,31 +14,35 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-export const LogLevel = {
-    All: 1,
-    Debug: 2,
-    Detail: 3,
-    Info: 4,
-    Warn: 5,
-    Error: 6,
-    Fatal: 7,
-    Off: 8,
+import type {ILogItem, ISerializedItem} from "./types";
+
+export enum LogLevel {
+    All = 1,
+    Debug,
+    Detail,
+    Info,
+    Warn,
+    Error,
+    Fatal,
+    Off
 }
 
 export class LogFilter {
-    constructor(parentFilter) {
+    private _min?: LogLevel;
+    private _parentFilter?: LogFilter;
+
+    constructor(parentFilter?: LogFilter) {
         this._parentFilter = parentFilter;
-        this._min = null;
     }
 
-    filter(item, children) {
+    filter(item: ILogItem, children: ISerializedItem[] | null): boolean {
         if (this._parentFilter) {
             if (!this._parentFilter.filter(item, children)) {
                 return false;
             }
         }
         // neither our children or us have a loglevel high enough, filter out.
-        if (this._min !== null && !Array.isArray(children) && item.logLevel < this._min) {
+        if (this._min !== undefined && !Array.isArray(children) && item.logLevel < this._min) {
             return false;
         } else {
             return true;
@@ -46,7 +50,7 @@ export class LogFilter {
     }
 
     /* methods to build the filter */
-    minLevel(logLevel) {
+    minLevel(logLevel: LogLevel): LogFilter {
         this._min = logLevel;
         return this;
     }

src/logging/LogItem.ts

@@ -15,39 +15,47 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {LogLevel, LogFilter} from "./LogFilter.js";
+import {LogLevel, LogFilter} from "./LogFilter";
+import type {BaseLogger} from "./BaseLogger";
+import type {ISerializedItem, ILogItem, LogItemValues, LabelOrValues, FilterCreator, LogCallback} from "./types";
 
-export class LogItem {
-    constructor(labelOrValues, logLevel, filterCreator, logger) {
+export class LogItem implements ILogItem {
+    public readonly start: number;
+    public logLevel: LogLevel;
+    public error?: Error;
+    public end?: number;
+    private _values: LogItemValues;
+    private _logger: BaseLogger;
+    private _filterCreator?: FilterCreator;
+    private _children?: Array<LogItem>;
+
+    constructor(labelOrValues: LabelOrValues, logLevel: LogLevel, logger: BaseLogger, filterCreator?: FilterCreator) {
         this._logger = logger;
-        this._start = logger._now();
-        this._end = null;
+        this.start = logger._now();
         // (l)abel
         this._values = typeof labelOrValues === "string" ? {l: labelOrValues} : labelOrValues;
-        this.error = null;
         this.logLevel = logLevel;
-        this._children = null;
         this._filterCreator = filterCreator;
     }
 
     /** start a new root log item and run it detached mode, see BaseLogger.runDetached */
-    runDetached(labelOrValues, callback, logLevel, filterCreator) {
+    runDetached(labelOrValues: LabelOrValues, callback: LogCallback<unknown>, logLevel?: LogLevel, filterCreator?: FilterCreator): ILogItem {
         return this._logger.runDetached(labelOrValues, callback, logLevel, filterCreator);
     }
 
     /** start a new detached root log item and log a reference to it from this item */
-    wrapDetached(labelOrValues, callback, logLevel, filterCreator) {
+    wrapDetached(labelOrValues: LabelOrValues, callback: LogCallback<unknown>, logLevel?: LogLevel, filterCreator?: FilterCreator): void {
         this.refDetached(this.runDetached(labelOrValues, callback, logLevel, filterCreator));
     }
 
     /** logs a reference to a different log item, usually obtained from runDetached.
     This is useful if the referenced operation can't be awaited. */
-    refDetached(logItem, logLevel = null) {
+    refDetached(logItem: ILogItem, logLevel?: LogLevel): void {
         logItem.ensureRefId();
-        return this.log({ref: logItem._values.refId}, logLevel);
+        this.log({ref: logItem.values.refId}, logLevel);
     }
 
-    ensureRefId() {
+    ensureRefId(): void {
         if (!this._values.refId) {
             this.set("refId", this._logger._createRefId());
         }
@@ -56,29 +64,33 @@ export class LogItem {
     /**
      * Creates a new child item and runs it in `callback`.
      */
-    wrap(labelOrValues, callback, logLevel = null, filterCreator = null) {
+    wrap<T>(labelOrValues: LabelOrValues, callback: LogCallback<T>, logLevel?: LogLevel, filterCreator?: FilterCreator): T {
         const item = this.child(labelOrValues, logLevel, filterCreator);
         return item.run(callback);
     }
 
-    get duration() {
-        if (this._end) {
-            return this._end - this._start;
+    get duration(): number | undefined {
+        if (this.end) {
+            return this.end - this.start;
         } else {
-            return null;
+            return undefined;
         }
     }
 
-    durationWithoutType(type) {
-        return this.duration - this.durationOfType(type);
+    durationWithoutType(type: string): number | undefined {
+        const durationOfType = this.durationOfType(type);
+        if (this.duration && durationOfType) {
+            return this.duration - durationOfType;
+        }
     }
 
-    durationOfType(type) {
+    durationOfType(type: string): number | undefined {
         if (this._values.t === type) {
             return this.duration;
         } else if (this._children) {
             return this._children.reduce((sum, c) => {
-                return sum + c.durationOfType(type);
+                const duration = c.durationOfType(type);
+                return sum + (duration ?? 0);
             }, 0);
         } else {
             return 0;
@@ -91,12 +103,12 @@ export class LogItem {
      * 
      * Hence, the child item is not returned.
      */
-    log(labelOrValues, logLevel = null) {
-        const item = this.child(labelOrValues, logLevel, null);
-        item._end = item._start;
+    log(labelOrValues: LabelOrValues, logLevel?: LogLevel): void {
+        const item = this.child(labelOrValues, logLevel);
+        item.end = item.start;
     }
 
-    set(key, value) {
+    set(key: string | object, value?: unknown): void {
         if(typeof key === "object") {
             const values = key;
             Object.assign(this._values, values);
@@ -105,7 +117,7 @@ export class LogItem {
         }
     }
 
-    serialize(filter, parentStartTime = null, forced) {
+    serialize(filter: LogFilter, parentStartTime: number | undefined, forced: boolean): ISerializedItem | undefined {
         if (this._filterCreator) {
             try {
                 filter = this._filterCreator(new LogFilter(filter), this);
@@ -113,10 +125,10 @@ export class LogItem {
                 console.error("Error creating log filter", err);
             }
         }
-        let children;
-        if (this._children !== null) {
-            children = this._children.reduce((array, c) => {
-                const s = c.serialize(filter, this._start, false);
+        let children: Array<ISerializedItem> | null = null;
+        if (this._children) {
+            children = this._children.reduce((array: Array<ISerializedItem>, c) => {
+                const s = c.serialize(filter, this.start, false);
                 if (s) {
                     if (array === null) {
                         array = [];
@@ -127,12 +139,12 @@ export class LogItem {
             }, null);
         }
         if (filter && !filter.filter(this, children)) {
-            return null;
+            return;
         }
         // in (v)alues, (l)abel and (t)ype are also reserved.
-        const item = {
+        const item: ISerializedItem = {
             // (s)tart
-            s: parentStartTime === null ? this._start : this._start - parentStartTime,
+            s: typeof parentStartTime === "number" ? this.start - parentStartTime : this.start,
             // (d)uration
             d: this.duration,
             // (v)alues
@@ -171,20 +183,19 @@ export class LogItem {
      * @param  {Function} callback [description]
      * @return {[type]}            [description]
      */
-    run(callback) {
-        if (this._end !== null) {
+    run<T>(callback: LogCallback<T>): T {
+        if (this.end !== undefined) {
             console.trace("log item is finished, additional logs will likely not be recorded");
         }
-        let result;
         try {
-            result = callback(this);
+            const result = callback(this);
             if (result instanceof Promise) {
                 return result.then(promiseResult => {
                     this.finish();
                     return promiseResult;
                 }, err => {
                     throw this.catch(err);
-                });
+                }) as unknown as T;
             } else {
                 this.finish();
                 return result;
@@ -198,45 +209,53 @@ export class LogItem {
      * finished the item, recording the end time. After finishing, an item can't be modified anymore as it will be persisted.
      * @internal shouldn't typically be called by hand. allows to force finish if a promise is still running when closing the app
      */
-    finish() {
-        if (this._end === null) {
-            if (this._children !== null) {
+    finish(): void {
+        if (this.end === undefined) {
+            if (this._children) {
                 for(const c of this._children) {
                     c.finish();
                 }
             }
-            this._end = this._logger._now();
+            this.end = this._logger._now();
         }
     }
 
     // expose log level without needing import everywhere
-    get level() {
+    get level(): typeof LogLevel {
         return LogLevel;
     }
 
-    catch(err) {
+    catch(err: Error): Error {
         this.error = err;
         this.logLevel = LogLevel.Error;
         this.finish();
         return err;
     }
 
-    child(labelOrValues, logLevel, filterCreator) {
-        if (this._end !== null) {
+    child(labelOrValues: LabelOrValues, logLevel?: LogLevel, filterCreator?: FilterCreator): LogItem {
+        if (this.end) {
             console.trace("log item is finished, additional logs will likely not be recorded");
         }
         if (!logLevel) {
             logLevel = this.logLevel || LogLevel.Info;
         }
-        const item = new LogItem(labelOrValues, logLevel, filterCreator, this._logger);
-        if (this._children === null) {
+        const item = new LogItem(labelOrValues, logLevel, this._logger, filterCreator);
+        if (!this._children) {
             this._children = [];
         }
         this._children.push(item);
         return item;
     }
 
-    get logger() {
+    get logger(): BaseLogger {
         return this._logger;
     }
+
+    get values(): LogItemValues {
+        return this._values;
+    }
+
+    get children(): Array<LogItem> | undefined {
+        return this._children;
+    }
 }

src/logging/NullLogger.js

@@ -1,99 +0,0 @@
-/*
-Copyright 2021 The Matrix.org Foundation C.I.C.
-
-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.
-*/
-import {LogLevel} from "./LogFilter.js";
-
-function noop () {}
-
-
-export class NullLogger {
-    constructor() {
-        this.item = new NullLogItem(this);
-    }
-
-    log() {}
-
-    run(_, callback) {
-        return callback(this.item);    
-    }
-
-    wrapOrRun(item, _, callback) {
-        if (item) {
-            return item.wrap(null, callback);
-        } else {
-            return this.run(null, callback);
-        }
-    }
-
-    runDetached(_, callback) {
-        new Promise(r => r(callback(this.item))).then(noop, noop);
-    }
-
-    async export() {
-        return null;
-    }
-
-    get level() {
-        return LogLevel;
-    }
-}
-
-export class NullLogItem {
-    constructor(logger) {
-        this.logger = logger;
-    }
-
-    wrap(_, callback) {
-        return callback(this);
-    }
-    log() {}
-    set() {}
-
-    runDetached(_, callback) {
-        new Promise(r => r(callback(this))).then(noop, noop);
-    }
-
-    wrapDetached(_, callback) {
-        return this.refDetached(null, callback);
-    }
-
-    run(callback) {
-        return callback(this);
-    }
-
-    refDetached() {}
-
-    ensureRefId() {}
-
-    get level() {
-        return LogLevel;
-    }
-
-    get duration() {
-        return 0;
-    }
-
-    catch(err) {
-        return err;
-    }
-
-    child() {
-        return this;
-    }
-
-    finish() {}
-}
-
-export const Instance = new NullLogger(); 

src/logging/NullLogger.ts

@@ -0,0 +1,106 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+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.
+*/
+import {LogLevel} from "./LogFilter";
+import type {ILogger, ILogExport, ILogItem, LabelOrValues, LogCallback, LogItemValues} from "./types";
+
+function noop (): void {}
+
+export class NullLogger implements ILogger {
+    public readonly item: ILogItem = new NullLogItem(this);
+
+    log(): void {}
+
+    run<T>(_, callback: LogCallback<T>): T {
+        return callback(this.item);    
+    }
+
+    wrapOrRun<T>(item: ILogItem | undefined, _, callback: LogCallback<T>): T {
+        if (item) {
+            return item.wrap(_, callback);
+        } else {
+            return this.run(_, callback);
+        }
+    }
+
+    runDetached(_, callback): ILogItem {
+        new Promise(r => r(callback(this.item))).then(noop, noop);
+        return this.item;
+    }
+
+    async export(): Promise<ILogExport | undefined> {
+        return undefined;
+    }
+
+    get level(): typeof LogLevel {
+        return LogLevel;
+    }
+}
+
+export class NullLogItem implements ILogItem {
+    public readonly logger: NullLogger;
+    public readonly logLevel: LogLevel;
+    public children?: Array<ILogItem>;
+    public values: LogItemValues;
+    public error?: Error;
+
+    constructor(logger: NullLogger) {
+        this.logger = logger;
+    }
+
+    wrap<T>(_: LabelOrValues, callback: LogCallback<T>): T {
+        return callback(this);
+    }
+
+    log(): void {}
+    set(): void {}
+
+    runDetached(_: LabelOrValues, callback: LogCallback<unknown>): ILogItem {
+        new Promise(r => r(callback(this))).then(noop, noop);
+        return this;
+    }
+
+    wrapDetached(_: LabelOrValues, _callback: LogCallback<unknown>): void {
+        return this.refDetached();
+    }
+
+    refDetached(): void {}
+
+    ensureRefId(): void {}
+
+    get level(): typeof LogLevel {
+        return LogLevel;
+    }
+
+    get duration(): 0 {
+        return 0;
+    }
+
+    catch(err: Error): Error {
+        return err;
+    }
+
+    child(): ILogItem  {
+        return this;
+    }
+
+    finish(): void {}
+
+    serialize(): undefined {
+        return undefined;
+    }
+}
+
+export const Instance = new NullLogger(); 

src/logging/types.ts

@@ -0,0 +1,82 @@
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+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.
+*/
+
+import {LogLevel, LogFilter} from "./LogFilter";
+import type {BaseLogger} from "./BaseLogger";
+import type {BlobHandle} from "../platform/web/dom/BlobHandle.js";
+
+export interface ISerializedItem {
+    s: number;
+    d?: number;
+    v: LogItemValues;
+    l: LogLevel;
+    e?: {
+        stack?: string;
+        name: string;
+        message: string;
+    };
+    f?: boolean;
+    c?: Array<ISerializedItem>;
+};
+
+export interface ILogItem {
+    logLevel: LogLevel;
+    error?: Error;
+    readonly logger: ILogger;
+    readonly level: typeof LogLevel;
+    readonly end?: number;
+    readonly start?: number;
+    readonly values: LogItemValues;
+    wrap<T>(labelOrValues: LabelOrValues, callback: LogCallback<T>, logLevel?: LogLevel, filterCreator?: FilterCreator): T;
+    log(labelOrValues: LabelOrValues, logLevel?: LogLevel): void;
+    set(key: string | object, value: unknown): void;
+    runDetached(labelOrValues: LabelOrValues, callback: LogCallback<unknown>, logLevel?: LogLevel, filterCreator?: FilterCreator): ILogItem;
+    wrapDetached(labelOrValues: LabelOrValues, callback: LogCallback<unknown>, logLevel?: LogLevel, filterCreator?: FilterCreator): void;
+    refDetached(logItem: ILogItem, logLevel?: LogLevel): void;
+    ensureRefId(): void;
+    catch(err: Error): Error;
+    serialize(filter: LogFilter, parentStartTime: number | undefined, forced: boolean): ISerializedItem | undefined;
+}
+
+export interface ILogger {
+    log(labelOrValues: LabelOrValues, logLevel?: LogLevel): void;
+    wrapOrRun<T>(item: ILogItem | undefined, labelOrValues: LabelOrValues, callback: LogCallback<T>, logLevel?: LogLevel, filterCreator?: FilterCreator): T;
+    runDetached<T>(labelOrValues: LabelOrValues, callback: LogCallback<T>, logLevel?: LogLevel, filterCreator?: FilterCreator): ILogItem;
+    run<T>(labelOrValues: LabelOrValues, callback: LogCallback<T>, logLevel?: LogLevel, filterCreator?: FilterCreator): T;
+    export(): Promise<ILogExport | undefined>;
+    get level(): typeof LogLevel;
+}
+
+export interface ILogExport {
+    get count(): number;
+    removeFromStore(): Promise<void>;
+    asBlob(): BlobHandle;
+}
+
+export type LogItemValues = {
+    l?: string;
+    t?: string;
+    id?: unknown;
+    status?: string | number;
+    refId?: number;
+    ref?: number;
+    [key: string]: any
+}
+
+export type LabelOrValues = string | LogItemValues;
+export type FilterCreator = ((filter: LogFilter, item: ILogItem) => LogFilter);
+export type LogCallback<T> = (item: ILogItem) => T;

src/logging/utils.js

@@ -1,16 +0,0 @@
-// these are helper functions if you can't assume you always have a log item (e.g. some code paths call with one set, others don't)
-// if you know you always have a log item, better to use the methods on the log item than these utility functions.
-
-import {Instance as NullLoggerInstance} from "./NullLogger.js";
-
-export function wrapOrRunNullLogger(logItem, labelOrValues, callback, logLevel = null, filterCreator = null) {
-    if (logItem) {
-        return logItem.wrap(logItem, labelOrValues, callback, logLevel, filterCreator);
-    } else {
-        return NullLoggerInstance.run(null, callback);
-    }
-}
-
-export function ensureLogItem(logItem) {
-    return logItem || NullLoggerInstance.item;
-}

src/logging/utils.ts

@@ -0,0 +1,18 @@
+// these are helper functions if you can't assume you always have a log item (e.g. some code paths call with one set, others don't)
+// if you know you always have a log item, better to use the methods on the log item than these utility functions.
+
+import {Instance as NullLoggerInstance} from "./NullLogger";
+import type {FilterCreator, ILogItem, LabelOrValues, LogCallback} from "./types";
+import {LogLevel} from "./LogFilter";
+
+export function wrapOrRunNullLogger<T>(logItem: ILogItem | undefined, labelOrValues: LabelOrValues, callback: LogCallback<T>, logLevel?: LogLevel, filterCreator?: FilterCreator): T | Promise<T> {
+    if (logItem) {
+        return logItem.wrap(labelOrValues, callback, logLevel, filterCreator);
+    } else {
+        return NullLoggerInstance.run(null, callback);
+    }
+}
+
+export function ensureLogItem(logItem: ILogItem): ILogItem {
+    return logItem || NullLoggerInstance.item;
+}

src/matrix/Session.js

@@ -34,7 +34,7 @@ import {Encryption as MegOlmEncryption} from "./e2ee/megolm/Encryption.js";
 import {MEGOLM_ALGORITHM} from "./e2ee/common.js";
 import {RoomEncryption} from "./e2ee/RoomEncryption.js";
 import {DeviceTracker} from "./e2ee/DeviceTracker.js";
-import {LockMap} from "../utils/LockMap.js";
+import {LockMap} from "../utils/LockMap";
 import {groupBy} from "../utils/groupBy";
 import {
     keyFromCredential as ssssKeyFromCredential,

src/matrix/SessionContainer.js

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {createEnum} from "../utils/enum.js";
+import {createEnum} from "../utils/enum";
 import {lookupHomeserver} from "./well-known.js";
 import {AbortableOperation} from "../utils/AbortableOperation";
 import {ObservableValue} from "../observable/ObservableValue";
@@ -329,7 +329,16 @@ export class SessionContainer {
                 request: this._platform.request,
             });
             const olm = await this._olmPromise;
-            const encryptedDehydratedDevice = await getDehydratedDevice(hsApi, olm, this._platform, log);
+            let encryptedDehydratedDevice;
+            try {
+                encryptedDehydratedDevice = await getDehydratedDevice(hsApi, olm, this._platform, log);
+            } catch (err) {
+                if (err.name === "HomeServerError") {
+                    log.set("not_supported", true);
+                } else {
+                    throw err;
+                }
+            }
             if (encryptedDehydratedDevice) {
                 let resolveStageFinish;
                 const promiseStageFinish = new Promise(r => resolveStageFinish = r);

src/matrix/Sync.js

@@ -16,7 +16,7 @@ limitations under the License.
 */
 
 import {ObservableValue} from "../observable/ObservableValue";
-import {createEnum} from "../utils/enum.js";
+import {createEnum} from "../utils/enum";
 
 const INCREMENTAL_TIMEOUT = 30000;
 

src/matrix/e2ee/RoomEncryption.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 import {MEGOLM_ALGORITHM, DecryptionSource} from "./common.js";
 import {groupEventsBySession} from "./megolm/decryption/utils";
-import {mergeMap} from "../../utils/mergeMap.js";
+import {mergeMap} from "../../utils/mergeMap";
 import {groupBy} from "../../utils/groupBy";
 import {makeTxnId} from "../common.js";
 

src/matrix/e2ee/common.js

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import anotherjson from "another-json";
-import {createEnum} from "../../utils/enum.js";
+import {createEnum} from "../../utils/enum";
 
 export const DecryptionSource = createEnum("Sync", "Timeline", "Retry");
 

src/matrix/e2ee/megolm/Decryption.ts

@@ -26,7 +26,7 @@ import type {OlmWorker} from "../OlmWorker";
 import type {Transaction} from "../../storage/idb/Transaction";
 import type {TimelineEvent} from "../../storage/types";
 import type {DecryptionResult} from "../DecryptionResult";
-import type {LogItem} from "../../../logging/LogItem";
+import type {ILogItem} from "../../../logging/types";
 
 export class Decryption {
     private keyLoader: KeyLoader;
@@ -136,7 +136,7 @@ export class Decryption {
      * Extracts room keys from decrypted device messages.
      * The key won't be persisted yet, you need to call RoomKey.write for that.
      */
-    roomKeysFromDeviceMessages(decryptionResults: DecryptionResult[], log: LogItem): IncomingRoomKey[] {
+    roomKeysFromDeviceMessages(decryptionResults: DecryptionResult[], log: ILogItem): IncomingRoomKey[] {
         const keys: IncomingRoomKey[] = [];
         for (const dr of decryptionResults) {
             if (dr.event?.type !== "m.room_key" || dr.event.content?.algorithm !== MEGOLM_ALGORITHM) {

src/matrix/e2ee/megolm/decryption/DecryptionPreparation.js

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import {DecryptionChanges} from "./DecryptionChanges.js";
-import {mergeMap} from "../../../../utils/mergeMap.js";
+import {mergeMap} from "../../../../utils/mergeMap";
 
 /**
  * Class that contains all the state loaded from storage to decrypt the given events

src/matrix/e2ee/olm/Decryption.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 import {DecryptionError} from "../common.js";
 import {groupBy} from "../../../utils/groupBy";
-import {MultiLock} from "../../../utils/Lock.js";
+import {MultiLock} from "../../../utils/Lock";
 import {Session} from "./Session.js";
 import {DecryptionResult} from "../DecryptionResult.js";
 

src/matrix/error.js

@@ -38,7 +38,7 @@ export class HomeServerError extends Error {
     }
 }
 
-export {AbortError} from "../utils/error.js";
+export {AbortError} from "../utils/error";
 
 export class ConnectionError extends Error {
     constructor(message, isTimeout) {

src/matrix/net/ExponentialRetryDelay.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {AbortError} from "../../utils/error.js";
+import {AbortError} from "../../utils/error";
 
 export class ExponentialRetryDelay {
     constructor(createTimeout) {

src/matrix/net/Reconnector.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {createEnum} from "../../utils/enum.js";
+import {createEnum} from "../../utils/enum";
 import {ObservableValue} from "../../observable/ObservableValue";
 
 export const ConnectionStatus = createEnum(

src/matrix/net/RequestScheduler.js

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {AbortError} from "../../utils/error.js";
+import {AbortError} from "../../utils/error";
 import {HomeServerError} from "../error.js";
 import {HomeServerApi} from "./HomeServerApi.js";
 import {ExponentialRetryDelay} from "./ExponentialRetryDelay.js";

src/matrix/room/BaseRoom.js

@@ -27,7 +27,7 @@ import {Heroes} from "./members/Heroes.js";
 import {EventEntry} from "./timeline/entries/EventEntry.js";
 import {ObservedEventMap} from "./ObservedEventMap.js";
 import {DecryptionSource} from "../e2ee/common.js";
-import {ensureLogItem} from "../../logging/utils.js";
+import {ensureLogItem} from "../../logging/utils";
 import {PowerLevels} from "./PowerLevels.js";
 import {RetainedObservableValue} from "../../observable/ObservableValue";
 

src/matrix/room/Invite.js

@@ -244,7 +244,7 @@ export class Invite extends EventEmitter {
     }
 }
 
-import {NullLogItem} from "../../logging/NullLogger.js";
+import {NullLogItem} from "../../logging/NullLogger";
 import {Clock as MockClock} from "../../mocks/Clock.js";
 import {default as roomInviteFixture} from "../../fixtures/matrix/invites/room.js";
 import {default as dmInviteFixture} from "../../fixtures/matrix/invites/dm.js";

src/matrix/room/members/MemberList.js

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import {ObservableMap} from "../../../observable/map/ObservableMap.js";
-import {RetainedValue} from "../../../utils/RetainedValue.js";
+import {RetainedValue} from "../../../utils/RetainedValue";
 
 export class MemberList extends RetainedValue {
     constructor({members, closeCallback}) {

src/matrix/room/sending/PendingEvent.js

@@ -13,8 +13,8 @@ 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.
 */
-import {createEnum} from "../../../utils/enum.js";
-import {AbortError} from "../../../utils/error.js";
+import {createEnum} from "../../../utils/enum";
+import {AbortError} from "../../../utils/error";
 import {REDACTION_TYPE} from "../common.js";
 import {getRelationFromContent, getRelationTarget, setRelationTarget} from "../timeline/relations.js";
 

src/matrix/room/sending/SendQueue.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {SortedArray} from "../../../observable/list/SortedArray.js";
+import {SortedArray} from "../../../observable/list/SortedArray";
 import {ConnectionError} from "../../error.js";
 import {PendingEvent, SendStatus} from "./PendingEvent.js";
 import {makeTxnId, isTxnId} from "../../common.js";
@@ -353,7 +353,7 @@ export class SendQueue {
 import {HomeServer as MockHomeServer} from "../../../mocks/HomeServer.js";
 import {createMockStorage} from "../../../mocks/Storage";
 import {ListObserver} from "../../../mocks/ListObserver.js";
-import {NullLogger, NullLogItem} from "../../../logging/NullLogger.js";
+import {NullLogger, NullLogItem} from "../../../logging/NullLogger";
 import {createEvent, withTextBody, withTxnId} from "../../../mocks/event.js";
 import {poll} from "../../../mocks/poll.js";
 import {createAnnotation} from "../timeline/relations.js";

src/matrix/room/timeline/Timeline.js

@@ -16,7 +16,7 @@ limitations under the License.
 */
 
 import {SortedArray, AsyncMappedList, ConcatList, ObservableArray} from "../../../observable/index.js";
-import {Disposables} from "../../../utils/Disposables.js";
+import {Disposables} from "../../../utils/Disposables";
 import {Direction} from "./Direction";
 import {TimelineReader} from "./persistence/TimelineReader.js";
 import {PendingEventEntry} from "./entries/PendingEventEntry.js";
@@ -346,7 +346,7 @@ import {Clock as MockClock} from "../../../mocks/Clock.js";
 import {createMockStorage} from "../../../mocks/Storage";
 import {ListObserver} from "../../../mocks/ListObserver.js";
 import {createEvent, withTextBody, withContent, withSender} from "../../../mocks/event.js";
-import {NullLogItem} from "../../../logging/NullLogger.js";
+import {NullLogItem} from "../../../logging/NullLogger";
 import {EventEntry} from "./entries/EventEntry.js";
 import {User} from "../../User.js";
 import {PendingEvent} from "../sending/PendingEvent.js";

src/matrix/room/timeline/persistence/GapWriter.js

@@ -205,7 +205,7 @@ import {FragmentIdComparer} from "../FragmentIdComparer.js";
 import {RelationWriter} from "./RelationWriter.js";
 import {createMockStorage} from "../../../../mocks/Storage";
 import {FragmentBoundaryEntry} from "../entries/FragmentBoundaryEntry.js";
-import {NullLogItem} from "../../../../logging/NullLogger.js";
+import {NullLogItem} from "../../../../logging/NullLogger";
 import {TimelineMock, eventIds, eventId} from "../../../../mocks/TimelineMock.ts";
 import {SyncWriter} from "./SyncWriter.js";
 import {MemberWriter} from "./MemberWriter.js";

src/matrix/room/timeline/persistence/RelationWriter.js

@@ -257,7 +257,7 @@ import {createMockStorage} from "../../../../mocks/Storage";
 import {createEvent, withTextBody, withRedacts, withContent} from "../../../../mocks/event.js";
 import {createAnnotation} from "../relations.js";
 import {FragmentIdComparer} from "../FragmentIdComparer.js";
-import {NullLogItem} from "../../../../logging/NullLogger.js";
+import {NullLogItem} from "../../../../logging/NullLogger";
 
 export function tests() {
     const fragmentIdComparer = new FragmentIdComparer([]);

src/matrix/room/timeline/persistence/SyncWriter.js

@@ -258,7 +258,7 @@ export class SyncWriter {
 
 import {createMockStorage} from "../../../../mocks/Storage";
 import {createEvent, withTextBody} from "../../../../mocks/event.js";
-import {Instance as nullLogger} from "../../../../logging/NullLogger.js";
+import {Instance as nullLogger} from "../../../../logging/NullLogger";
 export function tests() {
     const roomId = "!abc:hs.tld";
     return {

src/matrix/ssss/index.js

@@ -18,7 +18,7 @@ import {KeyDescription, Key} from "./common.js";
 import {keyFromPassphrase} from "./passphrase.js";
 import {keyFromRecoveryKey} from "./recoveryKey.js";
 import {SESSION_E2EE_KEY_PREFIX} from "../e2ee/common.js";
-import {createEnum} from "../../utils/enum.js";
+import {createEnum} from "../../utils/enum";
 
 const SSSS_KEY = `${SESSION_E2EE_KEY_PREFIX}ssssKey`;
 

src/matrix/storage/idb/QueryTarget.ts

@@ -16,7 +16,7 @@ limitations under the License.
 
 import {iterateCursor, DONE, NOT_DONE, reqAsPromise} from "./utils";
 import {StorageError} from "../common";
-import {LogItem} from "../../../logging/LogItem.js";
+import {ILogItem} from "../../../logging/types";
 import {IDBKey} from "./Transaction";
 
 // this is the part of the Transaction class API that is used here and in the Store subclass,
@@ -25,7 +25,7 @@ export interface ITransaction {
     idbFactory: IDBFactory;
     IDBKeyRange: typeof IDBKeyRange;
     databaseName: string;
-    addWriteError(error: StorageError, refItem: LogItem | undefined, operationName: string, keys: IDBKey[] | undefined);
+    addWriteError(error: StorageError, refItem: ILogItem | undefined, operationName: string, keys: IDBKey[] | undefined);
 }
 
 type Reducer<A,B> = (acc: B, val: A) => B
@@ -277,7 +277,7 @@ export function tests() {
 
     class MockTransaction extends MockIDBImpl {
         get databaseName(): string { return "mockdb"; }
-        addWriteError(error: StorageError, refItem: LogItem | undefined, operationName: string, keys: IDBKey[] | undefined) {}
+        addWriteError(error: StorageError, refItem: ILogItem | undefined, operationName: string, keys: IDBKey[] | undefined) {}
     }
 
     interface TestEntry {

src/matrix/storage/idb/Storage.ts

@@ -18,7 +18,7 @@ import {IDOMStorage} from "./types";
 import {Transaction} from "./Transaction";
 import { STORE_NAMES, StoreNames, StorageError } from "../common";
 import { reqAsPromise } from "./utils";
-import { BaseLogger } from "../../../logging/BaseLogger.js";
+import { ILogger } from "../../../logging/types";
 
 const WEBKITEARLYCLOSETXNBUG_BOGUS_KEY = "782rh281re38-boguskey";
 
@@ -26,13 +26,13 @@ export class Storage {
     private _db: IDBDatabase;
     private _hasWebkitEarlyCloseTxnBug: boolean;
 
-    readonly logger: BaseLogger;
+    readonly logger: ILogger;
     readonly idbFactory: IDBFactory
     readonly IDBKeyRange: typeof IDBKeyRange;
     readonly storeNames: typeof StoreNames;
     readonly localStorage: IDOMStorage;
 
-    constructor(idbDatabase: IDBDatabase, idbFactory: IDBFactory, _IDBKeyRange: typeof IDBKeyRange, hasWebkitEarlyCloseTxnBug: boolean, localStorage: IDOMStorage, logger: BaseLogger) {
+    constructor(idbDatabase: IDBDatabase, idbFactory: IDBFactory, _IDBKeyRange: typeof IDBKeyRange, hasWebkitEarlyCloseTxnBug: boolean, localStorage: IDOMStorage, logger: ILogger) {
         this._db = idbDatabase;
         this.idbFactory = idbFactory;
         this.IDBKeyRange = _IDBKeyRange;

src/matrix/storage/idb/StorageFactory.ts

@@ -20,11 +20,10 @@ import { openDatabase, reqAsPromise } from "./utils";
 import { exportSession, importSession, Export } from "./export";
 import { schema } from "./schema";
 import { detectWebkitEarlyCloseTxnBug } from "./quirks";
-import { BaseLogger } from "../../../logging/BaseLogger.js";
-import { LogItem } from "../../../logging/LogItem.js";
+import { ILogItem } from "../../../logging/types";
 
 const sessionName = (sessionId: string) => `hydrogen_session_${sessionId}`;
-const openDatabaseWithSessionId = function(sessionId: string, idbFactory: IDBFactory, localStorage: IDOMStorage, log: LogItem) {
+const openDatabaseWithSessionId = function(sessionId: string, idbFactory: IDBFactory, localStorage: IDOMStorage, log: ILogItem) {
     const create = (db, txn, oldVersion, version) => createStores(db, txn, oldVersion, version, localStorage, log);
     return openDatabase(sessionName(sessionId), create, schema.length, idbFactory);
 }
@@ -63,7 +62,7 @@ export class StorageFactory {
         this._localStorage = localStorage;
     }
 
-    async create(sessionId: string, log: LogItem): Promise<Storage> {
+    async create(sessionId: string, log: ILogItem): Promise<Storage> {
         await this._serviceWorkerHandler?.preventConcurrentSessionAccess(sessionId);
         requestPersistedStorage().then(persisted => {
             // Firefox lies here though, and returns true even if the user denied the request
@@ -83,23 +82,25 @@ export class StorageFactory {
         return reqAsPromise(req);
     }
 
-    async export(sessionId: string, log: LogItem): Promise<Export> {
+    async export(sessionId: string, log: ILogItem): Promise<Export> {
         const db = await openDatabaseWithSessionId(sessionId, this._idbFactory, this._localStorage, log);
         return await exportSession(db);
     }
 
-    async import(sessionId: string, data: Export, log: LogItem): Promise<void> {
+    async import(sessionId: string, data: Export, log: ILogItem): Promise<void> {
         const db = await openDatabaseWithSessionId(sessionId, this._idbFactory, this._localStorage, log);
         return await importSession(db, data);
     }
 }
 
-async function createStores(db: IDBDatabase, txn: IDBTransaction, oldVersion: number | null, version: number, localStorage: IDOMStorage, log: LogItem): Promise<void> {
+async function createStores(db: IDBDatabase, txn: IDBTransaction, oldVersion: number | null, version: number, localStorage: IDOMStorage, log: ILogItem): Promise<void> {
     const startIdx = oldVersion || 0;
-    return log.wrap({l: "storage migration", oldVersion, version}, async log => {
+    return log.wrap(
+        { l: "storage migration", oldVersion, version },
+        async (log) => {
             for (let i = startIdx; i < version; ++i) {
                 const migrationFunc = schema[i];
-            await log.wrap(`v${i + 1}`, log => migrationFunc(db, txn, localStorage, log));
+                await log.wrap(`v${i + 1}`, (log) => migrationFunc(db, txn, localStorage, log));
             }
         });
 }

src/matrix/storage/idb/Store.ts

@@ -18,7 +18,7 @@ import {QueryTarget, IDBQuery, ITransaction} from "./QueryTarget";
 import {IDBRequestError, IDBRequestAttemptError} from "./error";
 import {reqAsPromise} from "./utils";
 import {Transaction, IDBKey} from "./Transaction";
-import {LogItem} from "../../../logging/LogItem.js";
+import {ILogItem} from "../../../logging/types";
 
 const LOG_REQUESTS = false;
 
@@ -145,7 +145,7 @@ export class Store<T> extends QueryTarget<T> {
         return new QueryTarget<T>(new QueryTargetWrapper<T>(this._idbStore.index(indexName)), this._transaction);
     }
 
-    put(value: T, log?: LogItem): void {
+    put(value: T, log?: ILogItem): void {
         // If this request fails, the error will bubble up to the transaction and abort it,
         // which is the behaviour we want. Therefore, it is ok to not create a promise for this
         // request and await it.
@@ -160,13 +160,13 @@ export class Store<T> extends QueryTarget<T> {
         this._prepareErrorLog(request, log, "put", undefined, value);
     }
 
-    add(value: T, log?: LogItem): void {
+    add(value: T, log?: ILogItem): void {
         // ok to not monitor result of request, see comment in `put`.
         const request = this._idbStore.add(value);
         this._prepareErrorLog(request, log, "add", undefined, value);
     }
 
-    async tryAdd(value: T, log: LogItem): Promise<boolean> {
+    async tryAdd(value: T, log: ILogItem): Promise<boolean> {
         try {
             await reqAsPromise(this._idbStore.add(value));
             return true;
@@ -181,13 +181,13 @@ export class Store<T> extends QueryTarget<T> {
         }
     }
 
-    delete(keyOrKeyRange: IDBValidKey | IDBKeyRange, log?: LogItem): void {
+    delete(keyOrKeyRange: IDBValidKey | IDBKeyRange, log?: ILogItem): void {
         // ok to not monitor result of request, see comment in `put`.
         const request = this._idbStore.delete(keyOrKeyRange);
         this._prepareErrorLog(request, log, "delete", keyOrKeyRange, undefined);
     }
 
-    private _prepareErrorLog(request: IDBRequest, log: LogItem | undefined, operationName: string, key: IDBKey | undefined, value: T | undefined) {
+    private _prepareErrorLog(request: IDBRequest, log: ILogItem | undefined, operationName: string, key: IDBKey | undefined, value: T | undefined) {
         if (log) {
             log.ensureRefId();
         }

src/matrix/storage/idb/Transaction.ts

@@ -36,15 +36,14 @@ import {OutboundGroupSessionStore} from "./stores/OutboundGroupSessionStore";
 import {GroupSessionDecryptionStore} from "./stores/GroupSessionDecryptionStore";
 import {OperationStore} from "./stores/OperationStore";
 import {AccountDataStore} from "./stores/AccountDataStore";
-import {LogItem} from "../../../logging/LogItem.js";
-import {BaseLogger} from "../../../logging/BaseLogger.js";
+import type {ILogger, ILogItem} from "../../../logging/types";
 
 export type IDBKey = IDBValidKey | IDBKeyRange;
 
 class WriteErrorInfo {
     constructor(
         public readonly error: StorageError,
-        public readonly refItem: LogItem | undefined,
+        public readonly refItem: ILogItem | undefined,
         public readonly operationName: string,
         public readonly keys: IDBKey[] | undefined,
     ) {}
@@ -77,7 +76,7 @@ export class Transaction {
         return this._storage.databaseName;
     }
 
-    get logger(): BaseLogger {
+    get logger(): ILogger {
         return this._storage.logger;
     }
 
@@ -169,7 +168,7 @@ export class Transaction {
         return this._store(StoreNames.accountData, idbStore => new AccountDataStore(idbStore));
     }
 
-    async complete(log?: LogItem): Promise<void> {
+    async complete(log?: ILogItem): Promise<void> {
         try {
             await txnAsPromise(this._txn);
         } catch (err) {
@@ -190,7 +189,7 @@ export class Transaction {
         return error;
     }
 
-    abort(log?: LogItem): void {
+    abort(log?: ILogItem): void {
         // TODO: should we wrap the exception in a StorageError?
         try {
             this._txn.abort();
@@ -202,14 +201,14 @@ export class Transaction {
         }
     }
 
-    addWriteError(error: StorageError, refItem: LogItem | undefined, operationName: string, keys: IDBKey[] | undefined) {
+    addWriteError(error: StorageError, refItem: ILogItem | undefined, operationName: string, keys: IDBKey[] | undefined) {
         // don't log subsequent `AbortError`s
         if (error.errcode !== "AbortError" || this._writeErrors.length === 0) {
             this._writeErrors.push(new WriteErrorInfo(error, refItem, operationName, keys));
         }
     }
 
-    private _logWriteErrors(parentItem: LogItem | undefined) {
+    private _logWriteErrors(parentItem: ILogItem | undefined) {
         const callback = errorGroupItem => {
             // we don't have context when there is no parentItem, so at least log stores
             if (!parentItem) {

src/matrix/storage/idb/schema.ts

@@ -11,10 +11,10 @@ import {SessionStore} from "./stores/SessionStore";
 import {Store} from "./Store";
 import {encodeScopeTypeKey} from "./stores/OperationStore";
 import {MAX_UNICODE} from "./stores/common";
-import {LogItem} from "../../../logging/LogItem.js";
+import {ILogItem} from "../../../logging/types";
 
 
-export type MigrationFunc = (db: IDBDatabase, txn: IDBTransaction, localStorage: IDOMStorage, log: LogItem) => Promise<void> | void;
+export type MigrationFunc = (db: IDBDatabase, txn: IDBTransaction, localStorage: IDOMStorage, log: ILogItem) => Promise<void> | void;
 // FUNCTIONS SHOULD ONLY BE APPENDED!!
 // the index in the array is the database version
 export const schema: MigrationFunc[] = [
@@ -166,7 +166,7 @@ function createTimelineRelationsStore(db: IDBDatabase) : void {
 }
 
 //v11 doesn't change the schema, but ensures all userIdentities have all the roomIds they should (see #470)
-async function fixMissingRoomsInUserIdentities(db: IDBDatabase, txn: IDBTransaction, localStorage: IDOMStorage, log: LogItem) {
+async function fixMissingRoomsInUserIdentities(db: IDBDatabase, txn: IDBTransaction, localStorage: IDOMStorage, log: ILogItem) {
     const roomSummaryStore = txn.objectStore("roomSummary");
     const trackedRoomIds: string[] = [];
     await iterateCursor<SummaryData>(roomSummaryStore.openCursor(), roomSummary => {
@@ -220,7 +220,7 @@ async function changeSSSSKeyPrefix(db: IDBDatabase, txn: IDBTransaction) {
     }
 }
 // v13
-async function backupAndRestoreE2EEAccountToLocalStorage(db: IDBDatabase, txn: IDBTransaction, localStorage: IDOMStorage, log: LogItem) {
+async function backupAndRestoreE2EEAccountToLocalStorage(db: IDBDatabase, txn: IDBTransaction, localStorage: IDOMStorage, log: ILogItem) {
     const session = txn.objectStore("session");
     // the Store object gets passed in several things through the Transaction class (a wrapper around IDBTransaction),
     // the only thing we should need here is the databaseName though, so we mock it out.

src/matrix/storage/idb/stores/SessionStore.ts

@@ -16,8 +16,8 @@ limitations under the License.
 import {Store} from "../Store";
 import {IDOMStorage} from "../types";
 import {SESSION_E2EE_KEY_PREFIX} from "../../../e2ee/common.js";
-import {LogItem} from "../../../../logging/LogItem.js";
 import {parse, stringify} from "../../../../utils/typedJSON";
+import type {ILogItem} from "../../../../logging/types";
 
 export interface SessionEntry {
     key: string;
@@ -64,7 +64,7 @@ export class SessionStore {
         });
     }
 
-    async tryRestoreE2EEIdentityFromLocalStorage(log: LogItem): Promise<boolean> {
+    async tryRestoreE2EEIdentityFromLocalStorage(log: ILogItem): Promise<boolean> {
         let success = false;
         const lsPrefix = this._localStorageKeyPrefix;
         const prefix = lsPrefix + SESSION_E2EE_KEY_PREFIX;

src/matrix/storage/idb/stores/TimelineEventStore.ts

@@ -20,7 +20,7 @@ import { encodeUint32, decodeUint32 } from "../utils";
 import {KeyLimits} from "../../common";
 import {Store} from "../Store";
 import {TimelineEvent, StateEvent} from "../../types";
-import {LogItem} from "../../../../logging/LogItem.js";
+import {ILogItem} from "../../../../logging/types";
 
 interface Annotation {
     count: number;
@@ -286,7 +286,7 @@ export class TimelineEventStore {
      * 
      * Returns if the event was not yet known and the entry was written.
      */
-    tryInsert(entry: TimelineEventEntry, log: LogItem): Promise<boolean> {
+    tryInsert(entry: TimelineEventEntry, log: ILogItem): Promise<boolean> {
         (entry as TimelineEventStorageEntry).key = encodeKey(entry.roomId, entry.fragmentId, entry.eventIndex);
         (entry as TimelineEventStorageEntry).eventIdKey = encodeEventIdKey(entry.roomId, entry.event.event_id);
         return this._timelineStore.tryAdd(entry as TimelineEventStorageEntry, log);
@@ -320,7 +320,7 @@ export class TimelineEventStore {
 import {createMockStorage} from "../../../../mocks/Storage";
 import {createEvent, withTextBody} from "../../../../mocks/event.js";
 import {createEventEntry} from "../../../room/timeline/persistence/common.js";
-import {Instance as logItem} from "../../../../logging/NullLogger.js";
+import {Instance as nullLogger} from "../../../../logging/NullLogger";
 
 export function tests() {
 
@@ -368,7 +368,7 @@ export function tests() {
             let eventKey = EventKey.defaultFragmentKey(109);
             for (const insertedId of insertedIds) {
                 const entry = createEventEntry(eventKey.nextKey(), roomId, createEventWithId(insertedId));
-                assert(await txn.timelineEvents.tryInsert(entry, logItem));
+                assert(await txn.timelineEvents.tryInsert(entry, nullLogger.item));
                 eventKey = eventKey.nextKey();
             }
             const eventKeyMap = await txn.timelineEvents.getEventKeysForIds(roomId, checkedIds);

src/matrix/storage/idb/utils.ts

@@ -17,7 +17,7 @@ limitations under the License.
 
 import { IDBRequestError } from "./error";
 import { StorageError } from "../common";
-import { AbortError } from "../../../utils/error.js";
+import { AbortError } from "../../../utils/error";
 
 let needsSyncPromise = false;
 

src/mocks/Request.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {AbortError} from "../utils/error.js";
+import {AbortError} from "../utils/error";
 
 export class BaseRequest {
     constructor() {

src/mocks/Storage.ts

@@ -21,7 +21,7 @@ import FDBKeyRange from "fake-indexeddb/lib/FDBKeyRange.js";
 import {StorageFactory} from "../matrix/storage/idb/StorageFactory";
 import {IDOMStorage} from "../matrix/storage/idb/types";
 import {Storage} from "../matrix/storage/idb/Storage";
-import {Instance as nullLogger} from "../logging/NullLogger.js";
+import {Instance as nullLogger} from "../logging/NullLogger";
 import {openDatabase, CreateObjectStore} from "../matrix/storage/idb/utils";
 
 export function createMockStorage(): Promise<Storage> {

src/observable/ObservableValue.ts

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {AbortError} from "../utils/error.js";
+import {AbortError} from "../utils/error";
 import {BaseObservable} from "./BaseObservable";
 
 // like an EventEmitter, but doesn't have an event type

src/observable/index.js

@@ -20,11 +20,11 @@ import {MappedMap} from "./map/MappedMap.js";
 import {JoinedMap} from "./map/JoinedMap.js";
 import {BaseObservableMap} from "./map/BaseObservableMap.js";
 // re-export "root" (of chain) collections
-export { ObservableArray } from "./list/ObservableArray.js";
-export { SortedArray } from "./list/SortedArray.js";
-export { MappedList } from "./list/MappedList.js";
-export { AsyncMappedList } from "./list/AsyncMappedList.js";
-export { ConcatList } from "./list/ConcatList.js";
+export { ObservableArray } from "./list/ObservableArray";
+export { SortedArray } from "./list/SortedArray";
+export { MappedList } from "./list/MappedList";
+export { AsyncMappedList } from "./list/AsyncMappedList";
+export { ConcatList } from "./list/ConcatList";
 export { ObservableMap } from "./map/ObservableMap.js";
 
 // avoid circular dependency between these classes

src/observable/list/AsyncMappedList.ts

@@ -15,15 +15,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {BaseMappedList, runAdd, runUpdate, runRemove, runMove, runReset} from "./BaseMappedList";
+import {IListObserver} from "./BaseObservableList";
+import {BaseMappedList, Mapper, Updater, runAdd, runUpdate, runRemove, runMove, runReset} from "./BaseMappedList";
 
-export class AsyncMappedList extends BaseMappedList {
-    constructor(sourceList, mapper, updater, removeCallback) {
-        super(sourceList, mapper, updater, removeCallback);
-        this._eventQueue = null;
-    }
+export class AsyncMappedList<F,T> extends BaseMappedList<F,T,Promise<T>> implements IListObserver<F> {
+    private _eventQueue: AsyncEvent<F>[] | null = null;
+    private _flushing: boolean = false;
 
-    onSubscribeFirst() {
+    onSubscribeFirst(): void {
         this._sourceUnsubscribe = this._sourceList.subscribe(this);
         this._eventQueue = [];
         this._mappedValues = [];
@@ -35,122 +34,112 @@ export class AsyncMappedList extends BaseMappedList {
         this._flush();
     }
 
-    async _flush() {
+    async _flush(): Promise<void> {
         if (this._flushing) {
             return;
         }
         this._flushing = true;
         try {
-            while (this._eventQueue.length) {
-                const event = this._eventQueue.shift();
-                await event.run(this);
+            while (this._eventQueue!.length) {
+                const event = this._eventQueue!.shift();
+                await event!.run(this);
             }
         } finally {
             this._flushing = false;
         }
     }
 
-    onReset() {
+    onReset(): void {
         if (this._eventQueue) {
             this._eventQueue.push(new ResetEvent());
             this._flush();
         }
     }
 
-    onAdd(index, value) {
+    onAdd(index: number, value: F): void {
         if (this._eventQueue) {
             this._eventQueue.push(new AddEvent(index, value));
             this._flush();
         }
     }
 
-    onUpdate(index, value, params) {
+    onUpdate(index: number, value: F, params: any): void {
         if (this._eventQueue) {
             this._eventQueue.push(new UpdateEvent(index, value, params));
             this._flush();
         }
     }
 
-    onRemove(index) {
+    onRemove(index: number): void {
         if (this._eventQueue) {
             this._eventQueue.push(new RemoveEvent(index));
             this._flush();
         }
     }
 
-    onMove(fromIdx, toIdx) {
+    onMove(fromIdx: number, toIdx: number): void {
         if (this._eventQueue) {
             this._eventQueue.push(new MoveEvent(fromIdx, toIdx));
             this._flush();
         }
     }
 
-    onUnsubscribeLast() {
-        this._sourceUnsubscribe();
+    onUnsubscribeLast(): void {
+        this._sourceUnsubscribe!();
         this._eventQueue = null;
         this._mappedValues = null;
     }
 }
 
-class AddEvent {
-    constructor(index, value) {
-        this.index = index;
-        this.value = value;
-    }
+type AsyncEvent<F> = AddEvent<F> | UpdateEvent<F> | RemoveEvent<F> | MoveEvent<F> | ResetEvent<F>
 
-    async run(list) {
+class AddEvent<F> {
+    constructor(public index: number, public value: F) {}
+
+    async run<T>(list: AsyncMappedList<F,T>): Promise<void> {
         const mappedValue = await list._mapper(this.value);
         runAdd(list, this.index, mappedValue);
     }
 }
 
-class UpdateEvent {
-    constructor(index, value, params) {
-        this.index = index;
-        this.value = value;
-        this.params = params;
-    }
+class UpdateEvent<F> {
+    constructor(public index: number, public value: F, public params: any) {}
 
-    async run(list) {
+    async run<T>(list: AsyncMappedList<F,T>): Promise<void> {
         runUpdate(list, this.index, this.value, this.params);
     }
 }
 
-class RemoveEvent {
-    constructor(index) {
-        this.index = index;
-    }
+class RemoveEvent<F> {
+    constructor(public index: number) {}
 
-    async run(list) {
+    async run<T>(list: AsyncMappedList<F,T>): Promise<void> {
         runRemove(list, this.index);
     }
 }
 
-class MoveEvent {
-    constructor(fromIdx, toIdx) {
-        this.fromIdx = fromIdx;
-        this.toIdx = toIdx;
-    }
+class MoveEvent<F> {
+    constructor(public fromIdx: number, public toIdx: number) {}
 
-    async run(list) {
+    async run<T>(list: AsyncMappedList<F,T>): Promise<void> {
         runMove(list, this.fromIdx, this.toIdx);
     }
 }
 
-class ResetEvent {
-    async run(list) {
+class ResetEvent<F> {
+    async run<T>(list: AsyncMappedList<F,T>): Promise<void> {
         runReset(list);
     }
 }
 
-import {ObservableArray} from "./ObservableArray.js";
+import {ObservableArray} from "./ObservableArray";
 import {ListObserver} from "../../mocks/ListObserver.js";
 
 export function tests() {
     return {
         "events are emitted in order": async assert => {
             const double = n => n * n;
-            const source = new ObservableArray();
+            const source = new ObservableArray<number>();
             const mapper = new AsyncMappedList(source, async n => {
                 await new Promise(r => setTimeout(r, n));
                 return {n: double(n)};

src/observable/list/BaseMappedList.ts

@@ -21,15 +21,15 @@ import {findAndUpdateInArray} from "./common";
 export type Mapper<F,T> = (value: F) => T
 export type Updater<F,T> = (mappedValue: T, params: any, value: F) => void;
 
-export class BaseMappedList<F,T> extends BaseObservableList<T> {
+export class BaseMappedList<F,T,R = T> extends BaseObservableList<T> {
     protected _sourceList: BaseObservableList<F>;
     protected _sourceUnsubscribe: (() => void) | null = null;
-    _mapper: Mapper<F,T>;
-    _updater: Updater<F,T>;
+    _mapper: Mapper<F,R>;
+    _updater?: Updater<F,T>;
     _removeCallback?: (value: T) => void;
     _mappedValues: T[] | null = null;
 
-    constructor(sourceList: BaseObservableList<F>, mapper: Mapper<F,T>, updater: Updater<F,T>, removeCallback?: (value: T) => void) {
+    constructor(sourceList: BaseObservableList<F>, mapper: Mapper<F,R>, updater?: Updater<F,T>, removeCallback?: (value: T) => void) {
         super();
         this._sourceList = sourceList;
         this._mapper = mapper;
@@ -50,12 +50,12 @@ export class BaseMappedList<F,T> extends BaseObservableList<T> {
     }
 }
 
-export function runAdd<F,T>(list: BaseMappedList<F,T>, index: number, mappedValue: T): void {
+export function runAdd<F,T,R>(list: BaseMappedList<F,T,R>, index: number, mappedValue: T): void {
     list._mappedValues!.splice(index, 0, mappedValue);
     list.emitAdd(index, mappedValue);
 }
 
-export function runUpdate<F,T>(list: BaseMappedList<F,T>, index: number, value: F, params: any): void {
+export function runUpdate<F,T,R>(list: BaseMappedList<F,T,R>, index: number, value: F, params: any): void {
     const mappedValue = list._mappedValues![index];
     if (list._updater) {
         list._updater(mappedValue, params, value);
@@ -63,7 +63,7 @@ export function runUpdate<F,T>(list: BaseMappedList<F,T>, index: number, value:
     list.emitUpdate(index, mappedValue, params);
 }
 
-export function runRemove<F,T>(list: BaseMappedList<F,T>, index: number): void {
+export function runRemove<F,T,R>(list: BaseMappedList<F,T,R>, index: number): void {
     const mappedValue = list._mappedValues![index];
     list._mappedValues!.splice(index, 1);
     if (list._removeCallback) {
@@ -72,14 +72,14 @@ export function runRemove<F,T>(list: BaseMappedList<F,T>, index: number): void {
     list.emitRemove(index, mappedValue);
 }
 
-export function runMove<F,T>(list: BaseMappedList<F,T>, fromIdx: number, toIdx: number): void {
+export function runMove<F,T,R>(list: BaseMappedList<F,T,R>, fromIdx: number, toIdx: number): void {
     const mappedValue = list._mappedValues![fromIdx];
     list._mappedValues!.splice(fromIdx, 1);
     list._mappedValues!.splice(toIdx, 0, mappedValue);
     list.emitMove(fromIdx, toIdx, mappedValue);
 }
 
-export function runReset<F,T>(list: BaseMappedList<F,T>): void {
+export function runReset<F,T,R>(list: BaseMappedList<F,T,R>): void {
     list._mappedValues = [];
     list.emitReset();
 }

src/observable/list/BaseObservableList.ts

@@ -24,7 +24,18 @@ export interface IListObserver<T> {
     onMove(from: number, to: number, value: T, list: BaseObservableList<T>): void
 }
 
-export abstract class BaseObservableList<T> extends BaseObservable<IListObserver<T>> {
+export function defaultObserverWith<T>(overrides: { [key in keyof IListObserver<T>]?: IListObserver<T>[key] }): IListObserver<T> {
+    const defaults = {
+        onReset(){},
+        onAdd(){},
+        onUpdate(){},
+        onRemove(){},
+        onMove(){},
+    }
+    return Object.assign(defaults, overrides);
+}
+
+export abstract class BaseObservableList<T> extends BaseObservable<IListObserver<T>> implements Iterable<T> {
     emitReset() {
         for(let h of this._handlers) {
             h.onReset(this);
@@ -38,7 +49,7 @@ export abstract class BaseObservableList<T> extends BaseObservable<IListObserver
         }
     }
 
-    emitUpdate(index: number, value: T, params: any): void {
+    emitUpdate(index: number, value: T, params?: any): void {
         for(let h of this._handlers) {
             h.onUpdate(index, value, params, this);
         }
@@ -58,6 +69,6 @@ export abstract class BaseObservableList<T> extends BaseObservable<IListObserver
         }
     }
 
-    abstract [Symbol.iterator](): IterableIterator<T>;
+    abstract [Symbol.iterator](): Iterator<T>;
     abstract get length(): number;
 }

src/observable/list/ConcatList.ts

@@ -14,16 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {BaseObservableList} from "./BaseObservableList";
+import {BaseObservableList, IListObserver} from "./BaseObservableList";
 
-export class ConcatList extends BaseObservableList {
-    constructor(...sourceLists) {
+export class ConcatList<T> extends BaseObservableList<T> implements IListObserver<T> {
+    protected _sourceLists: BaseObservableList<T>[];
+    protected _sourceUnsubscribes: (() => void)[] | null = null;
+
+    constructor(...sourceLists: BaseObservableList<T>[]) {
         super();
         this._sourceLists = sourceLists;
-        this._sourceUnsubscribes = null;
     }
 
-    _offsetForSource(sourceList) {
+    _offsetForSource(sourceList: BaseObservableList<T>): number {
         const listIdx = this._sourceLists.indexOf(sourceList);
         let offset = 0;
         for (let i = 0; i < listIdx; ++i) {
@@ -32,17 +34,17 @@ export class ConcatList extends BaseObservableList {
         return offset;
     }
 
-    onSubscribeFirst() {
+    onSubscribeFirst(): void {
         this._sourceUnsubscribes = this._sourceLists.map(sourceList => sourceList.subscribe(this));
     }
 
-    onUnsubscribeLast() {
-        for (const sourceUnsubscribe of this._sourceUnsubscribes) {
+    onUnsubscribeLast(): void {
+        for (const sourceUnsubscribe of this._sourceUnsubscribes!) {
             sourceUnsubscribe();
         }
     }
 
-    onReset() {
+    onReset(): void {
         // TODO: not ideal if other source lists are large
         // but working impl for now
         // reset, and 
@@ -54,11 +56,11 @@ export class ConcatList extends BaseObservableList {
         }
     }
 
-    onAdd(index, value, sourceList) {
+    onAdd(index: number, value: T, sourceList: BaseObservableList<T>): void {
         this.emitAdd(this._offsetForSource(sourceList) + index, value);
     }
 
-    onUpdate(index, value, params, sourceList) {
+    onUpdate(index: number, value: T, params: any, sourceList: BaseObservableList<T>): void {
         // 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) {
@@ -67,16 +69,16 @@ export class ConcatList extends BaseObservableList {
         this.emitUpdate(this._offsetForSource(sourceList) + index, value, params);
     }
 
-    onRemove(index, value, sourceList) {
+    onRemove(index: number, value: T, sourceList: BaseObservableList<T>): void {
         this.emitRemove(this._offsetForSource(sourceList) + index, value);
     }
 
-    onMove(fromIdx, toIdx, value, sourceList) {
+    onMove(fromIdx: number, toIdx: number, value: T, sourceList: BaseObservableList<T>): void {
         const offset = this._offsetForSource(sourceList);
         this.emitMove(offset + fromIdx, offset + toIdx, value);
     }
 
-    get length() {
+    get length(): number {
         let len = 0;
         for (let i = 0; i < this._sourceLists.length; ++i) {
             len += this._sourceLists[i].length;
@@ -104,7 +106,8 @@ export class ConcatList extends BaseObservableList {
     }
 }
 
-import {ObservableArray} from "./ObservableArray.js";
+import {ObservableArray} from "./ObservableArray";
+import {defaultObserverWith} from "./BaseObservableList";
 export async function tests() {
     return {
         test_length(assert) {
@@ -133,13 +136,13 @@ export async function tests() {
             const list2 = new ObservableArray([11, 12, 13]);
             const all = new ConcatList(list1, list2);
             let fired = false;
-            all.subscribe({
+            all.subscribe(defaultObserverWith({
                 onAdd(index, value) {
                     fired = true;
                     assert.equal(index, 4);
                     assert.equal(value, 11.5);
                 }
-            });
+            }));
             list2.insert(1, 11.5);
             assert(fired);
         },
@@ -148,13 +151,13 @@ export async function tests() {
             const list2 = new ObservableArray([11, 12, 13]);
             const all = new ConcatList(list1, list2);
             let fired = false;
-            all.subscribe({
+            all.subscribe(defaultObserverWith({
                 onUpdate(index, value) {
                     fired = true;
                     assert.equal(index, 4);
                     assert.equal(value, 10);
                 }
-            });
+            }));
             list2.emitUpdate(1, 10);
             assert(fired);
         },

src/observable/list/MappedList.ts

@@ -15,9 +15,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import {IListObserver} from "./BaseObservableList";
 import {BaseMappedList, runAdd, runUpdate, runRemove, runMove, runReset} from "./BaseMappedList";
 
-export class MappedList extends BaseMappedList {
+export class MappedList<F,T> extends BaseMappedList<F,T> implements IListObserver<F> {
     onSubscribeFirst() {
         this._sourceUnsubscribe = this._sourceList.subscribe(this);
         this._mappedValues = [];
@@ -26,16 +27,16 @@ export class MappedList extends BaseMappedList {
         }
     }
 
-    onReset() {
+    onReset(): void {
         runReset(this);
     }
 
-    onAdd(index, value) {
+    onAdd(index: number, value: F): void {
         const mappedValue = this._mapper(value);
         runAdd(this, index, mappedValue);
     }
 
-    onUpdate(index, value, params) {
+    onUpdate(index: number, value: F, params: any): void {
         // if an update is emitted while calling source.subscribe() from onSubscribeFirst, ignore it
         if (!this._mappedValues) {
             return;
@@ -43,24 +44,25 @@ export class MappedList extends BaseMappedList {
         runUpdate(this, index, value, params);
     }
 
-    onRemove(index) {
+    onRemove(index: number): void {
         runRemove(this, index);
     }
 
-    onMove(fromIdx, toIdx) {
+    onMove(fromIdx: number, toIdx: number): void {
         runMove(this, fromIdx, toIdx);
     }
 
-    onUnsubscribeLast() {
-        this._sourceUnsubscribe();
+    onUnsubscribeLast(): void {
+        this._sourceUnsubscribe!();
     }
 }
 
-import {ObservableArray} from "./ObservableArray.js";
+import {ObservableArray} from "./ObservableArray";
 import {BaseObservableList} from "./BaseObservableList";
+import {defaultObserverWith} from "./BaseObservableList";
 
 export async function tests() {
-    class MockList extends BaseObservableList {
+    class MockList extends BaseObservableList<number> {
         get length() {
             return 0;
         }
@@ -74,26 +76,26 @@ export async function tests() {
             const source = new MockList();
             const mapped = new MappedList(source, n => {return {n: n*n};});
             let fired = false;
-            const unsubscribe = mapped.subscribe({
+            const unsubscribe = mapped.subscribe(defaultObserverWith({
                 onAdd(idx, value) {
                     fired = true;
                     assert.equal(idx, 0);
                     assert.equal(value.n, 36);
                 }
-            });
+            }));
             source.emitAdd(0, 6);
             assert(fired);
             unsubscribe();
         },
         test_update(assert) {
             const source = new MockList();
-            const mapped = new MappedList(
+            const mapped = new MappedList<number, { n: number, m?: number }>(
                 source,
                 n => {return {n: n*n};},
                 (o, p, n) => o.m = n*n
             );
             let fired = false;
-            const unsubscribe = mapped.subscribe({
+            const unsubscribe = mapped.subscribe(defaultObserverWith({
                 onAdd() {},
                 onUpdate(idx, value) {
                     fired = true;
@@ -101,7 +103,7 @@ export async function tests() {
                     assert.equal(value.n, 36);
                     assert.equal(value.m, 49);
                 }
-            });
+            }));
             source.emitAdd(0, 6);
             source.emitUpdate(0, 7);
             assert(fired);
@@ -113,9 +115,9 @@ export async function tests() {
                 source,
                 n => {return n*n;}
             );
-            mapped.subscribe({
+            mapped.subscribe(defaultObserverWith({
                 onUpdate() { assert.fail(); }
-            });
+            }));
             assert.equal(mapped.findAndUpdate(
                 n => n === 100,
                 () => assert.fail()
@@ -127,9 +129,9 @@ export async function tests() {
                 source,
                 n => {return n*n;}
             );
-            mapped.subscribe({
+            mapped.subscribe(defaultObserverWith({
                 onUpdate() { assert.fail(); }
-            });
+            }));
             let fired = false;
             assert.equal(mapped.findAndUpdate(
                 n => n === 9,
@@ -148,14 +150,14 @@ export async function tests() {
                 n => {return n*n;}
             );
             let fired = false;
-            mapped.subscribe({
+            mapped.subscribe(defaultObserverWith({
                 onUpdate(idx, n, params) {
                     assert.equal(idx, 1);
                     assert.equal(n, 9);
                     assert.equal(params, "param");
                     fired = true;
                 }
-            });
+            }));
             assert.equal(mapped.findAndUpdate(n => n === 9, () => "param"), true);
             assert.equal(fired, true);
         },

src/observable/list/ObservableArray.ts

@@ -16,52 +16,62 @@ limitations under the License.
 
 import {BaseObservableList} from "./BaseObservableList";
 
-export class ObservableArray extends BaseObservableList {
-    constructor(initialValues = []) {
+export class ObservableArray<T> extends BaseObservableList<T> {
+    private _items: T[];
+
+    constructor(initialValues: T[] = []) {
         super();
         this._items = initialValues;
     }
 
-    append(item) {
+    append(item: T): void {
         this._items.push(item);
         this.emitAdd(this._items.length - 1, item);
     }
 
-    remove(idx) {
+    remove(idx: number): void {
         const [item] = this._items.splice(idx, 1);
         this.emitRemove(idx, item);
     }
 
-    insertMany(idx, items) {
+    insertMany(idx: number, items: T[]): void {
         for(let item of items) {
             this.insert(idx, item);
             idx += 1;
         }
     }
 
-    insert(idx, item) {
+    insert(idx: number, item: T): void {
         this._items.splice(idx, 0, item);
         this.emitAdd(idx, item);
     }
 
-    update(idx, item, params = null) {
+    move(fromIdx: number, toIdx: number): void {
+        if (fromIdx < this._items.length && toIdx < this._items.length) {
+            const [item] = this._items.splice(fromIdx, 1);
+            this._items.splice(toIdx, 0, item);
+            this.emitMove(fromIdx, toIdx, item);
+        }
+    }
+
+    update(idx: number, item: T, params: any = null): void {
         if (idx < this._items.length) {
             this._items[idx] = item;
             this.emitUpdate(idx, item, params);
         }
     }
 
-    get array() {
+    get array(): Readonly<T[]> {
         return this._items;
     }
 
-    at(idx) {
+    at(idx: number): T | undefined {
         if (this._items && idx >= 0 && idx < this._items.length) {
             return this._items[idx];
         }
     }
 
-    get length() {
+    get length(): number {
         return this._items.length;
     }
 

src/observable/list/SortedArray.ts

@@ -15,21 +15,23 @@ limitations under the License.
 */
 
 import {BaseObservableList} from "./BaseObservableList";
-import {sortedIndex} from "../../utils/sortedIndex.js";
+import {sortedIndex} from "../../utils/sortedIndex";
 import {findAndUpdateInArray} from "./common";
 
-export class SortedArray extends BaseObservableList {
-    constructor(comparator) {
+export class SortedArray<T> extends BaseObservableList<T> {
+    private _comparator: (left: T, right: T) => number;
+    private _items: T[] = [];
+
+    constructor(comparator: (left: T, right: T) => number) {
         super();
         this._comparator = comparator;
-        this._items = [];
     }
 
-    setManyUnsorted(items) {
+    setManyUnsorted(items: T[]): void {
         this.setManySorted(items);
     }
 
-    setManySorted(items) {
+    setManySorted(items: T[]): void {
         // TODO: we can make this way faster by only looking up the first and last key,
         // and merging whatever is inbetween with items
         // if items is not sorted, 💩🌀 will follow!
@@ -42,11 +44,11 @@ export class SortedArray extends BaseObservableList {
         }
     }
 
-    findAndUpdate(predicate, updater) {
+    findAndUpdate(predicate: (value: T) => boolean, updater: (value: T) => any | false): boolean {
         return findAndUpdateInArray(predicate, this._items, this, updater);
     }
 
-    getAndUpdate(item, updater, updateParams = null) {
+    getAndUpdate(item: T, updater: (existing: T, item: T) => any, updateParams: any = null): void {
         const idx = this.indexOf(item);
         if (idx !== -1) {
             const existingItem = this._items[idx];
@@ -56,7 +58,7 @@ export class SortedArray extends BaseObservableList {
         }
     }
 
-    update(item, updateParams = null) {
+    update(item: T, updateParams: any = null): void {
         const idx = this.indexOf(item);
         if (idx !== -1) {
             this._items[idx] = item;
@@ -64,7 +66,7 @@ export class SortedArray extends BaseObservableList {
         }
     }
 
-    indexOf(item) {
+    indexOf(item: T): number {
         const idx = sortedIndex(this._items, item, this._comparator);
         if (idx < this._items.length && this._comparator(this._items[idx], item) === 0) {
             return idx;
@@ -73,7 +75,7 @@ export class SortedArray extends BaseObservableList {
         }
     }
 
-    _getNext(item) {
+    _getNext(item: T): T | undefined {
         let idx = sortedIndex(this._items, item, this._comparator);
         while(idx < this._items.length && this._comparator(this._items[idx], item) <= 0) {
             idx += 1;
@@ -81,7 +83,7 @@ export class SortedArray extends BaseObservableList {
         return this.get(idx);
     }
 
-    set(item, updateParams = null) {
+    set(item: T, updateParams: any = null): void {
         const idx = sortedIndex(this._items, item, this._comparator);
         if (idx >= this._items.length || this._comparator(this._items[idx], item) !== 0) {
             this._items.splice(idx, 0, item);
@@ -92,21 +94,21 @@ export class SortedArray extends BaseObservableList {
         }
     }
 
-    get(idx) {
+    get(idx: number): T | undefined {
         return this._items[idx];
     }
 
-    remove(idx) {
+    remove(idx: number): void {
         const item = this._items[idx];
         this._items.splice(idx, 1);
         this.emitRemove(idx, item);
     }
 
-    get array() {
+    get array(): T[] {
         return this._items;
     }
 
-    get length() {
+    get length(): number {
         return this._items.length;
     }
 
@@ -116,8 +118,11 @@ export class SortedArray extends BaseObservableList {
 }
 
 // iterator that works even if the current value is removed while iterating
-class Iterator {
-    constructor(sortedArray) {
+class Iterator<T> {
+    private _sortedArray: SortedArray<T> | null
+    private _current: T | null | undefined
+
+    constructor(sortedArray: SortedArray<T>) {
         this._sortedArray = sortedArray;
         this._current = null;
     }
@@ -145,7 +150,7 @@ class Iterator {
 export function tests() {
     return {
         "setManyUnsorted": assert => {
-            const sa = new SortedArray((a, b) => a.localeCompare(b));
+            const sa = new SortedArray<string>((a, b) => a.localeCompare(b));
             sa.setManyUnsorted(["b", "a", "c"]);
             assert.equal(sa.length, 3);
             assert.equal(sa.get(0), "a");
@@ -153,7 +158,7 @@ export function tests() {
             assert.equal(sa.get(2), "c");
         }, 
         "_getNext": assert => {
-            const sa = new SortedArray((a, b) => a.localeCompare(b));
+            const sa = new SortedArray<string>((a, b) => a.localeCompare(b));
             sa.setManyUnsorted(["b", "a", "f"]);
             assert.equal(sa._getNext("a"), "b");
             assert.equal(sa._getNext("b"), "f");
@@ -162,7 +167,7 @@ export function tests() {
             assert.equal(sa._getNext("f"), undefined);
         },
         "iterator with removals": assert => {
-            const queue = new SortedArray((a, b) => a.idx - b.idx);
+            const queue = new SortedArray<{idx: number}>((a, b) => a.idx - b.idx);
             queue.setManyUnsorted([{idx: 5}, {idx: 3}, {idx: 1}, {idx: 4}, {idx: 2}]);
             const it = queue[Symbol.iterator]();
             assert.equal(it.next().value.idx, 1);

src/observable/list/SortedMapList.js

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import {BaseObservableList} from "./BaseObservableList";
-import {sortedIndex} from "../../utils/sortedIndex.js";
+import {sortedIndex} from "../../utils/sortedIndex";
 
 /*
 

src/platform/web/LegacyPlatform.js

@@ -15,7 +15,8 @@ limitations under the License.
 */
 
 import aesjs from "aes-js";
-import {hkdf} from "../../utils/crypto/hkdf.js";
+import {hkdf} from "../../utils/crypto/hkdf";
+
 import {Platform as ModernPlatform} from "./Platform.js";
 
 export function Platform(container, paths) {

src/platform/web/Platform.js

@@ -21,8 +21,8 @@ import {SessionInfoStorage} from "../../matrix/sessioninfo/localstorage/SessionI
 import {SettingsStorage} from "./dom/SettingsStorage.js";
 import {Encoding} from "./utils/Encoding.js";
 import {OlmWorker} from "../../matrix/e2ee/OlmWorker.js";
-import {IDBLogger} from "../../logging/IDBLogger.js";
-import {ConsoleLogger} from "../../logging/ConsoleLogger.js";
+import {IDBLogger} from "../../logging/IDBLogger";
+import {ConsoleLogger} from "../../logging/ConsoleLogger";
 import {RootView} from "./ui/RootView.js";
 import {Clock} from "./dom/Clock.js";
 import {ServiceWorkerHandler} from "./dom/ServiceWorkerHandler.js";
@@ -35,7 +35,7 @@ import {WorkerPool} from "./dom/WorkerPool.js";
 import {BlobHandle} from "./dom/BlobHandle.js";
 import {hasReadPixelPermission, ImageHandle, VideoHandle} from "./dom/ImageHandle.js";
 import {downloadInIframe} from "./dom/download.js";
-import {Disposables} from "../../utils/Disposables.js";
+import {Disposables} from "../../utils/Disposables";
 import {parseHTML} from "./parsehtml.js";
 import {handleAvatarError} from "./ui/avatar.js";
 
@@ -132,11 +132,7 @@ export class Platform {
         this.clock = new Clock();
         this.encoding = new Encoding();
         this.random = Math.random;
-        if (options?.development) {
-            this.logger = new ConsoleLogger({platform: this});
-        } else {
-            this.logger = new IDBLogger({name: "hydrogen_logs", platform: this});
-        }
+        this._createLogger(options?.development);
         this.history = new History();
         this.onlineStatus = new OnlineStatus();
         this._serviceWorkerHandler = null;
@@ -162,6 +158,21 @@ export class Platform {
         this._disposables = new Disposables();
     }
 
+    _createLogger(isDevelopment) {
+        // Make sure that loginToken does not end up in the logs
+        const transformer = (item) => {
+            if (item.e?.stack) {
+                item.e.stack = item.e.stack.replace(/(?<=\/\?loginToken=).+/, "<snip>");
+            }
+            return item;
+        };
+        if (isDevelopment) {
+            this.logger = new ConsoleLogger({platform: this});
+        } else {
+            this.logger = new IDBLogger({name: "hydrogen_logs", platform: this, serializedTransformer: transformer});
+        }
+    }
+
     get updateService() {
         return this._serviceWorkerHandler;
     }
@@ -272,3 +283,30 @@ export class Platform {
         this._disposables.dispose();
     }
 }
+
+import {LogItem} from "../../logging/LogItem";
+export function tests() {
+    return {
+        "loginToken should not be in logs": (assert) => {
+            const transformer = (item) => {
+                if (item.e?.stack) {
+                    item.e.stack = item.e.stack.replace(/(?<=\/\?loginToken=).+/, "<snip>");
+                }
+                return item;
+            };
+            const logger = {
+                _queuedItems: [],
+                _serializedTransformer: transformer,
+                _now: () => {}
+            };
+            logger.persist = IDBLogger.prototype._persistItem.bind(logger);
+            const logItem = new LogItem("test", 1, logger);
+            logItem.error = new Error();
+            logItem.error.stack = "main http://localhost:3000/src/main.js:55\n<anonymous> http://localhost:3000/?loginToken=secret:26"
+            logger.persist(logItem, null, false);
+            const item = logger._queuedItems.pop();
+            console.log(item);
+            assert.strictEqual(item.json.search("secret"), -1);
+        }
+    };
+}

src/platform/web/dom/Clock.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {AbortError} from "../../../utils/error.js";
+import {AbortError} from "../../../utils/error";
 
 class Timeout {
     constructor(ms) {

src/platform/web/dom/WorkerPool.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {AbortError} from "../../../utils/error.js";
+import {AbortError} from "../../../utils/error";
 
 class WorkerState {
     constructor(worker) {

src/platform/web/dom/request/fetch.js

@@ -19,7 +19,7 @@ import {
     AbortError,
     ConnectionError
 } from "../../../../matrix/error.js";
-import {abortOnTimeout} from "../../../../utils/timeout.js";
+import {abortOnTimeout} from "../../../../utils/timeout";
 import {addCacheBuster} from "./common.js";
 import {xhrRequest} from "./xhr.js";
 

src/platform/web/sw.js

@@ -69,7 +69,14 @@ async function purgeOldCaches() {
 }
 
 self.addEventListener('fetch', (event) => {
+    /*
+    service worker shouldn't handle xhr uploads because otherwise
+    the progress events won't fire.
+    This has to do with xhr not being supported in service workers.
+    */
+    if (event.request.method === "GET") {
         event.respondWith(handleRequest(event.request));
+    }
 });
 
 function isCacheableThumbnail(url) {

src/platform/web/ui/css/themes/element/theme.css

@@ -548,6 +548,8 @@ a {
     box-sizing: border-box;
     overflow: hidden;
     max-height: 113px; /* 5 lines */
+    overflow-y: auto;
+    overflow-y: overlay;
 }
 
 .MessageComposer_input > button.send {

src/platform/web/ui/general/LazyListView.js

@@ -1,280 +0,0 @@
-/*
-Copyright 2021 The Matrix.org Foundation C.I.C.
-
-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.
-*/
-
-import {el} from "./html";
-import {mountView} from "./utils";
-import {ListView} from "./ListView";
-import {insertAt} from "./utils";
-
-class ItemRange {
-    constructor(topCount, renderCount, bottomCount) {
-        this.topCount = topCount;
-        this.renderCount = renderCount;
-        this.bottomCount = bottomCount;
-    }
-
-    contains(range) {
-        // don't contain empty ranges
-        // as it will prevent clearing the list
-        // once it is scrolled far enough out of view
-        if (!range.renderCount && this.renderCount) {
-            return false;
-        }
-        return range.topCount >= this.topCount &&
-            (range.topCount + range.renderCount) <= (this.topCount + this.renderCount);
-    }
-
-    containsIndex(idx) {
-        return idx >= this.topCount && idx <= (this.topCount + this.renderCount);
-    }
-
-    expand(amount) {
-        // don't expand ranges that won't render anything
-        if (this.renderCount === 0) {
-            return this;
-        }
-
-        const topGrow = Math.min(amount, this.topCount);
-        const bottomGrow = Math.min(amount, this.bottomCount);
-        return new ItemRange(
-            this.topCount - topGrow,
-            this.renderCount + topGrow + bottomGrow,
-            this.bottomCount - bottomGrow,
-        );
-    }
-
-    totalSize() {
-        return this.topCount + this.renderCount + this.bottomCount;
-    }
-
-    normalize(idx) {
-        /*
-        map index from list to index in rendered range
-        eg: if the index range of this._list is [0, 200] and we have rendered
-        elements in range [50, 60] then index 50 in list must map to index 0
-        in DOM tree/childInstance array.
-        */
-        return idx - this.topCount;
-    }
-}
-
-export class LazyListView extends ListView {
-    constructor({itemHeight, overflowMargin = 5, overflowItems = 20,...options}, childCreator) {
-        super(options, childCreator);
-        this._itemHeight = itemHeight;
-        this._overflowMargin = overflowMargin;
-        this._overflowItems = overflowItems;
-    }
-
-    _getVisibleRange() {
-        const length = this._list ? this._list.length : 0;
-        const scrollTop = this._parent.scrollTop;
-        const topCount = Math.min(Math.max(0, Math.floor(scrollTop / this._itemHeight)), length);
-        const itemsAfterTop = length - topCount;
-        const visibleItems = this._height !== 0 ? Math.ceil(this._height / this._itemHeight) : 0;
-        const renderCount = Math.min(visibleItems, itemsAfterTop);
-        const bottomCount = itemsAfterTop - renderCount;
-        return new ItemRange(topCount, renderCount, bottomCount);
-    }
-
-    _renderIfNeeded(forceRender = false) {
-        /*
-        forceRender only because we don't optimize onAdd/onRemove yet.
-        Ideally, onAdd/onRemove should only render whatever has changed + update padding + update renderRange
-        */
-        const range = this._getVisibleRange();
-        const intersectRange = range.expand(this._overflowMargin);
-        const renderRange = range.expand(this._overflowItems);
-        // only update render Range if the new range + overflowMargin isn't contained by the old anymore 
-        // or if we are force rendering
-        if (forceRender || !this._renderRange.contains(intersectRange)) {
-            this._renderRange = renderRange;
-            this._renderElementsInRange();
-        }
-    }
-
-    async _initialRender() {
-        /*
-        Wait two frames for the return from mount() to be inserted into DOM.
-        This should be enough, but if this gives us trouble we can always use
-        MutationObserver.
-        */
-        await new Promise(r => requestAnimationFrame(r));
-        await new Promise(r => requestAnimationFrame(r));
-
-        this._height = this._parent.clientHeight;
-        if (this._height === 0) { console.error("LazyListView could not calculate parent height."); }
-        const range = this._getVisibleRange();
-        const renderRange = range.expand(this._overflowItems);
-        this._renderRange = renderRange;
-        this._renderElementsInRange();
-    }
-
-    _itemsFromList(start, end) {
-        const array = [];
-        let i = 0;
-        for (const item of this._list) {
-            if (i >= start && i < end) {
-                array.push(item);
-            }
-            i = i + 1;
-        }
-        return array;
-    }
-
-    _itemAtIndex(idx) {
-        let i = 0;
-        for (const item of this._list) {
-            if (i === idx) {
-                return item;
-            }
-            i = i + 1;
-        }
-        return null;
-    }
-
-    _renderElementsInRange() {
-        const { topCount, renderCount, bottomCount } = this._renderRange;
-        const paddingTop = topCount * this._itemHeight;
-        const paddingBottom = bottomCount * this._itemHeight;
-        const renderedItems = this._itemsFromList(topCount, topCount + renderCount);
-        this._root.style.paddingTop = `${paddingTop}px`;
-        this._root.style.paddingBottom = `${paddingBottom}px`;
-        for (const child of this._childInstances) {
-            this._removeChild(child);
-        }
-        this._childInstances = [];
-        const fragment = document.createDocumentFragment();
-        for (const item of renderedItems) {
-            const view = this._childCreator(item);
-            this._childInstances.push(view);
-            fragment.appendChild(mountView(view, this._mountArgs));
-        }
-        this._root.appendChild(fragment);
-    }
-
-    mount() {
-        const root = super.mount();
-        this._parent = el("div", {className: "LazyListParent"}, root);
-        /*
-        Hooking to scroll events can be expensive.
-        Do we need to do more (like event throttling)?
-        */
-        this._parent.addEventListener("scroll", () => this._renderIfNeeded());
-        this._initialRender();
-        return this._parent;
-    }
-
-    update(attributes) {
-        this._renderRange = null;
-        super.update(attributes);
-        this._initialRender();
-    }
-
-    loadList() {
-        if (!this._list) { return; }
-        this._subscription = this._list.subscribe(this);
-        this._childInstances = [];
-        /*
-        super.loadList() would render the entire list at this point.
-        We instead lazy render a part of the list in _renderIfNeeded
-        */
-    }
-
-    _removeChild(child) {
-        child.root().remove();
-        child.unmount();
-    }
-
-    // If size of the list changes, re-render
-    onAdd() {
-        this._renderIfNeeded(true);
-    }
-
-    onRemove() {
-        this._renderIfNeeded(true);
-    }
-
-    onUpdate(idx, value, params) {
-        if (this._renderRange.containsIndex(idx)) {
-            const normalizedIdx = this._renderRange.normalize(idx);
-            super.onUpdate(normalizedIdx, value, params);
-        }
-    }
-    
-    recreateItem(idx, value) {
-        if (this._renderRange.containsIndex(idx)) {
-            const normalizedIdx = this._renderRange.normalize(idx);
-            super.recreateItem(normalizedIdx, value)
-        }
-    }
-
-    /**
-     * Render additional element from top or bottom to offset the outgoing element
-     */
-    _renderExtraOnMove(fromIdx, toIdx) {
-        const {topCount, renderCount} = this._renderRange;
-        if (toIdx < fromIdx) {
-            // Element is moved up the list, so render element from top boundary
-            const index = topCount;
-            const child = this._childCreator(this._itemAtIndex(index));
-            this._childInstances.unshift(child);
-            this._root.insertBefore(mountView(child, this._mountArgs), this._root.firstChild);
-        }
-        else {
-            // Element is moved down the list, so render element from bottom boundary
-            const index = topCount + renderCount - 1;
-            const child = this._childCreator(this._itemAtIndex(index));
-            this._childInstances.push(child);
-            this._root.appendChild(mountView(child, this._mountArgs));
-        }
-    }
-
-    /**
-     * Remove an element from top or bottom to make space for the incoming element 
-     */
-    _removeElementOnMove(fromIdx, toIdx) {
-        // If element comes from the bottom, remove element at bottom and vice versa
-        const child = toIdx < fromIdx ? this._childInstances.pop() : this._childInstances.shift();
-        this._removeChild(child);
-    }
-
-    onMove(fromIdx, toIdx, value) {
-        const fromInRange = this._renderRange.containsIndex(fromIdx);
-        const toInRange = this._renderRange.containsIndex(toIdx);
-        const normalizedFromIdx = this._renderRange.normalize(fromIdx);
-        const normalizedToIdx = this._renderRange.normalize(toIdx);
-        if (fromInRange && toInRange) {
-            super.onMove(normalizedFromIdx, normalizedToIdx, value);
-        }
-        else if (fromInRange && !toInRange) {
-            this.onBeforeListChanged();
-            const [child] = this._childInstances.splice(normalizedFromIdx, 1);
-            this._removeChild(child);
-            this._renderExtraOnMove(fromIdx, toIdx);
-            this.onListChanged();
-        }
-        else if (!fromInRange && toInRange) {
-            this.onBeforeListChanged();
-            const child = this._childCreator(value);
-            this._removeElementOnMove(fromIdx, toIdx);
-            this._childInstances.splice(normalizedToIdx, 0, child);
-            insertAt(this._root, normalizedToIdx, mountView(child, this._mountArgs));
-            this.onListChanged();
-        }
-    }
-
-}

src/platform/web/ui/general/LazyListView.ts

@@ -0,0 +1,201 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+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.
+*/
+
+import {tag} from "./html";
+import {removeChildren, mountView} from "./utils";
+import {ListRange, ResultType, AddRemoveResult} from "./ListRange";
+import {ListView, IOptions as IParentOptions} from "./ListView";
+import {IView} from "./types";
+
+export interface IOptions<T, V> extends IParentOptions<T, V> {
+    itemHeight: number;
+    overflowItems?: number;
+}
+
+export class LazyListView<T, V extends IView> extends ListView<T, V> {
+    private renderRange?: ListRange;
+    private height?: number;
+    private itemHeight: number;
+    private overflowItems: number;
+    private scrollContainer?: HTMLElement;
+
+    constructor(
+        {itemHeight, overflowItems = 20, ...options}: IOptions<T, V>, 
+        childCreator: (value: T) => V
+    ) {
+        super(options, childCreator);
+        this.itemHeight = itemHeight;
+        this.overflowItems = overflowItems;
+    }
+
+    handleEvent(e: Event) {
+        if (e.type === "scroll") {
+            this.handleScroll();
+        } else {
+            super.handleEvent(e);
+        }
+    }
+
+    handleScroll() {
+        const visibleRange = this._getVisibleRange();
+        // don't contain empty ranges
+        // as it will prevent clearing the list
+        // once it is scrolled far enough out of view
+        if (visibleRange.length !== 0 && !this.renderRange!.contains(visibleRange)) {
+            const prevRenderRange = this.renderRange!;
+            this.renderRange = visibleRange.expand(this.overflowItems);
+            this.renderUpdate(prevRenderRange, this.renderRange);
+        }
+    }
+    
+    // override
+    async loadList() {
+        /*
+        Wait two frames for the return from mount() to be inserted into DOM.
+        This should be enough, but if this gives us trouble we can always use
+        MutationObserver.
+        */
+        await new Promise(r => requestAnimationFrame(r));
+        await new Promise(r => requestAnimationFrame(r));
+
+        if (!this._list) {
+            return;
+        }
+        this._subscription = this._list.subscribe(this);
+        const visibleRange = this._getVisibleRange();
+        this.renderRange = visibleRange.expand(this.overflowItems);
+        this._childInstances = [];
+        this.reRenderFullRange(this.renderRange);
+    }
+
+    private _getVisibleRange() {
+        const {clientHeight, scrollTop} = this.root()!;
+        if (clientHeight === 0) {
+            throw new Error("LazyListView height is 0");
+        }
+        return ListRange.fromViewport(this._list.length, this.itemHeight, clientHeight, scrollTop);
+    }
+
+    private reRenderFullRange(range: ListRange) {
+        removeChildren(this._listElement!);
+        const fragment = document.createDocumentFragment();
+        const it = this._list[Symbol.iterator]();
+        this._childInstances!.length = 0;
+        range.forEachInIterator(it, item => {
+            const child = this._childCreator(item);
+            this._childInstances!.push(child);
+            fragment.appendChild(mountView(child, this._mountArgs));
+        });
+        this._listElement!.appendChild(fragment);
+        this.adjustPadding(range);
+    }
+
+    private renderUpdate(prevRange: ListRange, newRange: ListRange) {
+        if (newRange.intersects(prevRange)) {
+            // remove children in reverse order so child index isn't affected by previous removals
+            for (const idxInList of prevRange.reverseIterable()) {
+                if (!newRange.containsIndex(idxInList)) {
+                    const localIdx = idxInList - prevRange.start;
+                    this.removeChild(localIdx);
+                }
+            }
+            // use forEachInIterator instead of for loop as we need to advance
+            // the list iterator to the start of the range first
+            newRange.forEachInIterator(this._list[Symbol.iterator](), (item, idxInList) => {
+                if (!prevRange.containsIndex(idxInList)) {
+                    const localIdx = idxInList - newRange.start;
+                    this.addChild(localIdx, item);
+                }
+            });
+            this.adjustPadding(newRange);
+        } else {
+            this.reRenderFullRange(newRange);
+        }
+    }
+
+    private adjustPadding(range: ListRange) {
+        const paddingTop = range.start * this.itemHeight;
+        const paddingBottom = (range.totalLength - range.end) * this.itemHeight;
+        const style = this._listElement!.style;
+        style.paddingTop = `${paddingTop}px`;
+        style.paddingBottom = `${paddingBottom}px`;
+    }
+
+    mount() {
+        const listElement = super.mount();
+        this.scrollContainer = tag.div({className: "LazyListParent"}, listElement) as HTMLElement;
+        this.scrollContainer.addEventListener("scroll", this);
+        return this.scrollContainer;
+    }
+
+    unmount() {
+        this.root()!.removeEventListener("scroll", this);
+        this.scrollContainer = undefined;
+        super.unmount();
+    }
+
+    root(): Element | undefined {
+        return this.scrollContainer;
+    }
+
+    private get _listElement(): HTMLElement | undefined {
+        return super.root() as HTMLElement | undefined;
+    }
+
+    onAdd(idx: number, value: T) {
+        const result = this.renderRange!.queryAdd(idx, value, this._list);
+        this.applyRemoveAddResult(result);
+    }
+
+    onRemove(idx: number, value: T) {
+        const result = this.renderRange!.queryRemove(idx, this._list);
+        this.applyRemoveAddResult(result);
+    }
+
+    onMove(fromIdx: number, toIdx: number, value: T) {
+        const result = this.renderRange!.queryMove(fromIdx, toIdx, value, this._list);
+        if (result) {
+            if (result.type === ResultType.Move) {
+                this.moveChild(
+                    this.renderRange!.toLocalIndex(result.fromIdx),
+                    this.renderRange!.toLocalIndex(result.toIdx)
+                );
+            } else {
+                this.applyRemoveAddResult(result);
+            }
+        }
+    }
+
+    onUpdate(i: number, value: T, params: any) {
+        if (this.renderRange!.containsIndex(i)) {
+            this.updateChild(this.renderRange!.toLocalIndex(i), value, params);
+        }
+    }
+
+    private applyRemoveAddResult(result: AddRemoveResult<T>) {
+        // order is important here, the new range can have a different start
+        if (result.type === ResultType.Remove || result.type === ResultType.RemoveAndAdd) {
+            this.removeChild(this.renderRange!.toLocalIndex(result.removeIdx));
+        }
+        if (result.newRange) {
+            this.renderRange = result.newRange;
+            this.adjustPadding(this.renderRange)
+        }
+        if (result.type === ResultType.Add || result.type === ResultType.RemoveAndAdd) {
+            this.addChild(this.renderRange!.toLocalIndex(result.addIdx), result.value);
+        }
+    }
+}

src/platform/web/ui/general/ListRange.ts

@@ -0,0 +1,557 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+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.
+*/
+
+import {Range, RangeZone} from "./Range";
+import {defaultObserverWith} from "../../../../observable/list/BaseObservableList";
+
+function skipOnIterator<T>(it: Iterator<T>, pos: number): boolean {
+    let i = 0;
+    while (i < pos) {
+        i += 1;
+        if(it.next().done) {
+            return false;
+        }
+    }
+    return true;
+}
+
+function getIteratorValueAtIdx<T>(it: Iterator<T>, idx: number): undefined | T {
+    if (skipOnIterator(it, idx)) {
+        const result = it.next();
+        if (!result.done) {
+            return result.value;
+        }
+    }
+    return undefined;
+}
+
+export enum ResultType {
+    Move,
+    Add,
+    Remove,
+    RemoveAndAdd,
+    UpdateRange
+}
+
+export interface MoveResult {
+    type: ResultType.Move;
+    fromIdx: number;
+    toIdx: number
+}
+
+interface AddResult<T> {
+    type: ResultType.Add;
+    newRange?: ListRange;
+    /** the list index of an item to add */
+    addIdx: number;
+    /** the value to add at addIdx */
+    value: T
+}
+
+interface RemoveResult {
+    type: ResultType.Remove;
+    newRange?: ListRange;
+    /** the list index of an item to remove, before the add or remove event has been taken into account */
+    removeIdx: number;
+}
+
+// need to repeat the fields from RemoveResult and AddResult here
+// to make the discriminated union work
+interface RemoveAndAddResult<T> {
+    type: ResultType.RemoveAndAdd;
+    newRange?: ListRange;
+    /** the list index of an item to remove, before the add or remove event has been taken into account */
+    removeIdx: number;
+    /** the list index of an item to add */
+    addIdx: number;
+    /** the value to add at addIdx */
+    value: T;
+}
+
+interface UpdateRangeResult {
+    type: ResultType.UpdateRange;
+    newRange?: ListRange;
+}
+
+export type AddRemoveResult<T> = AddResult<T> | RemoveResult | RemoveAndAddResult<T> | UpdateRangeResult;
+
+export class ListRange extends Range {
+    constructor(
+        start: number,
+        end: number,
+        private _totalLength: number,
+        private _viewportItemCount: number = end - start
+    ) {
+        super(start, end);
+    }
+
+    expand(amount: number): ListRange {
+        // don't expand ranges that won't render anything
+        if (this.length === 0) {
+            return this;
+        }
+        const newStart = Math.max(0, this.start - amount);
+        const newEnd = Math.min(this.totalLength, this.end + amount);
+        return new ListRange(
+            newStart,
+            newEnd,
+            this.totalLength,
+            this._viewportItemCount
+        );
+    }
+
+    get totalLength(): number {
+        return this._totalLength;
+    }
+
+    get viewportItemCount(): number {
+        return this._viewportItemCount;
+    }
+
+    static fromViewport(listLength: number, itemHeight: number, listHeight: number, scrollTop: number) {
+        const topCount = Math.min(Math.max(0, Math.floor(scrollTop / itemHeight)), listLength);
+        const itemsAfterTop = listLength - topCount;
+        const viewportItemCount = listHeight !== 0 ? Math.ceil(listHeight / itemHeight) : 0;
+        const renderCount = Math.min(viewportItemCount, itemsAfterTop);
+        return new ListRange(topCount, topCount + renderCount, listLength, viewportItemCount);
+    }
+
+    queryAdd<T>(idx: number, value: T, list: Iterable<T>): AddRemoveResult<T> {
+        const maxAddIdx = this.viewportItemCount > this.length ? this.end : this.end - 1;
+        if (idx <= maxAddIdx) {
+            // use maxAddIdx to allow to grow the range by one at a time
+            // if the viewport isn't filled yet
+            const addIdx = this.clampIndex(idx, maxAddIdx);
+            const addValue = addIdx === idx ? value : getIteratorValueAtIdx(list[Symbol.iterator](), addIdx)!;
+            return this.createAddResult<T>(addIdx, addValue);
+        } else {
+            // if the add happened after the range, we only update the range with the new length
+            return {type: ResultType.UpdateRange, newRange: this.deriveRange(1, 0)};
+        }
+    }
+
+    queryRemove<T>(idx: number, list: Iterable<T>): AddRemoveResult<T> {
+        if (idx < this.end) {
+            const removeIdx = this.clampIndex(idx);
+            return this.createRemoveResult(removeIdx, list);
+        } else {
+            return {type: ResultType.UpdateRange, newRange: this.deriveRange(-1, 0)};
+        }
+    }
+
+    queryMove<T>(fromIdx: number, toIdx: number, value: T, list: Iterable<T>): MoveResult | AddRemoveResult<T> | undefined {
+        const fromZone = this.getIndexZone(fromIdx);
+        const toZone = this.getIndexZone(toIdx);
+        if (fromZone === toZone) {
+            if (fromZone === RangeZone.Before || fromZone === RangeZone.After) {
+                return;
+            } else if (fromZone === RangeZone.Inside) {
+                return {type: ResultType.Move, fromIdx, toIdx};
+            }
+        } else {
+            const addIdx = this.clampIndex(toIdx);
+            const removeIdx = this.clampIndex(fromIdx);
+            const addValue = addIdx === toIdx ? value : getIteratorValueAtIdx(list[Symbol.iterator](), addIdx)!;
+            return {type: ResultType.RemoveAndAdd, removeIdx, addIdx, value: addValue};
+        }
+    }
+
+    private createAddResult<T>(addIdx: number, value: T): AddRemoveResult<T> {
+        // if the view port isn't filled yet, we don't remove
+        if (this.viewportItemCount > this.length) {
+            return {type: ResultType.Add, addIdx, value, newRange: this.deriveRange(1, 1)};
+        } else {
+            const removeIdx = this.clampIndex(Number.MAX_SAFE_INTEGER);
+            return {type: ResultType.RemoveAndAdd, removeIdx, addIdx, value, newRange: this.deriveRange(1, 0)};
+        }
+    }
+
+    private createRemoveResult<T>(removeIdx: number, list: Iterable<T>): AddRemoveResult<T> {
+        if (this.end < this.totalLength) {
+            // we have items below the range, we can add one from there to fill the viewport
+            const addIdx = this.clampIndex(Number.MAX_SAFE_INTEGER);
+            // we assume the value has already been removed from the list,
+            // so we can just look up the next value which is already at the same idx
+            const value = getIteratorValueAtIdx(list[Symbol.iterator](), addIdx)!;
+            return {type: ResultType.RemoveAndAdd, removeIdx, value, addIdx, newRange: this.deriveRange(-1, 0)};
+        } else if (this.start !== 0) {
+            // move the range 1 item up so we still display a viewport full of items
+            const newRange = this.deriveRange(-1, 0, 1);
+            const addIdx = newRange.start;
+            // we assume the value has already been removed from the list,
+            // so we can just look up the next value which is already at the same idx
+            const value = getIteratorValueAtIdx(list[Symbol.iterator](), addIdx)!;
+            return {type: ResultType.RemoveAndAdd, removeIdx, value, addIdx, newRange};
+        } else {
+            // we can't add at the bottom nor top, already constrained
+            return {type: ResultType.Remove, removeIdx, newRange: this.deriveRange(-1, 0)};
+        }
+    }
+
+    private deriveRange(totalLengthInc: number, viewportItemCountDecr: number, startDecr: number = 0): ListRange {
+        const start = this.start - startDecr;
+        const totalLength = this.totalLength + totalLengthInc;
+        // prevent end being larger than totalLength
+        const end = Math.min(Math.max(start, this.end - startDecr + viewportItemCountDecr), totalLength);
+        return new ListRange(
+            start,
+            end,
+            totalLength,
+            this.viewportItemCount
+        );
+    }
+}
+
+import {ObservableArray} from "../../../../observable/list/ObservableArray";
+
+export function tests() {
+    return {
+        "fromViewport": assert => {
+            const range = ListRange.fromViewport(10, 20, 90, 30);
+            assert.equal(range.start, 1);
+            assert.equal(range.end, 6);
+            assert.equal(range.totalLength, 10);
+        },
+        "fromViewport at end": assert => {
+            const itemHeight = 20;
+            const range = ListRange.fromViewport(10, itemHeight, 3 * itemHeight, 7 * itemHeight);
+            assert.equal(range.start, 7);
+            assert.equal(range.end, 10);
+            assert.equal(range.totalLength, 10);
+        },
+        "fromViewport with not enough items to fill viewport": assert => {
+            const itemHeight = 20;
+            const range = ListRange.fromViewport(5, itemHeight, 8 * itemHeight, 0);
+            assert.equal(range.start, 0);
+            assert.equal(range.end, 5);
+            assert.equal(range.totalLength, 5);
+            assert.equal(range.length, 5);
+            assert.equal(range.viewportItemCount, 8);
+        },
+        "expand at start of list": assert => {
+            const range = new ListRange(1, 5, 10);
+            const expanded = range.expand(2);
+            assert.equal(expanded.start, 0);
+            assert.equal(expanded.end, 7);
+            assert.equal(expanded.totalLength, 10);
+            assert.equal(expanded.length, 7);
+        },
+        "expand at end of list": assert => {
+            const range = new ListRange(7, 9, 10);
+            const expanded = range.expand(2);
+            assert.equal(expanded.start, 5);
+            assert.equal(expanded.end, 10);
+            assert.equal(expanded.totalLength, 10);
+            assert.equal(expanded.length, 5);
+        },
+        "expand in middle of list": assert => {
+            const range = new ListRange(4, 6, 10);
+            const expanded = range.expand(2);
+            assert.equal(expanded.start, 2);
+            assert.equal(expanded.end, 8);
+            assert.equal(expanded.totalLength, 10);
+            assert.equal(expanded.length, 6);
+        },
+        "queryAdd with addition before range": assert => {
+            const list = new ObservableArray(["b", "c", "d", "e"]);
+            const range = new ListRange(1, 3, list.length);
+            let added = false;
+            list.subscribe(defaultObserverWith({
+                onAdd(idx, value) {
+                    added = true;
+                    const result = range.queryAdd(idx, value, list);
+                    assert.deepEqual(result, {
+                        type: ResultType.RemoveAndAdd,
+                        removeIdx: 2,
+                        addIdx: 1,
+                        value: "b",
+                        newRange: new ListRange(1, 3, 5)
+                    });
+                }
+            }));
+            list.insert(0, "a");
+            assert(added);
+        },
+        "queryAdd with addition within range": assert => {
+            const list = new ObservableArray(["a", "b", "d", "e"]);
+            const range = new ListRange(1, 3, list.length);
+            let added = false;
+            list.subscribe(defaultObserverWith({
+                onAdd(idx, value) {
+                    added = true;
+                    const result = range.queryAdd(idx, value, list);
+                    assert.deepEqual(result, {
+                        type: ResultType.RemoveAndAdd,
+                        removeIdx: 2,
+                        addIdx: 2,
+                        value: "c",
+                        newRange: new ListRange(1, 3, 5)
+                    });
+                }
+            }));
+            list.insert(2, "c");
+            assert(added);
+        },
+        "queryAdd with addition after range": assert => {
+            const list = new ObservableArray(["a", "b", "c", "d"]);
+            const range = new ListRange(1, 3, list.length);
+            let added = false;
+            list.subscribe(defaultObserverWith({
+                onAdd(idx, value) {
+                    added = true;
+                    const result = range.queryAdd(idx, value, list);
+                    assert.deepEqual(result, {
+                        type: ResultType.UpdateRange,
+                        newRange: new ListRange(1, 3, 5)
+                    });
+                }
+            }));
+            list.insert(4, "e");
+            assert(added);
+        },
+        "queryAdd with too few items to fill viewport grows the range": assert => {
+            const list = new ObservableArray(["a", "b", "d"]);
+            const viewportItemCount = 4;
+            const range = new ListRange(0, 3, list.length, viewportItemCount);
+            let added = false;
+            list.subscribe(defaultObserverWith({
+                onAdd(idx, value) {
+                    added = true;
+                    const result = range.queryAdd(idx, value, list);
+                    assert.deepEqual(result, {
+                        type: ResultType.Add,
+                        newRange: new ListRange(0, 4, 4),
+                        addIdx: 2,
+                        value: "c"
+                    });
+                }
+            }));
+            list.insert(2, "c");
+            assert(added);
+        },
+        "queryRemove with removal before range": assert => {
+            const list = new ObservableArray(["a", "b", "c", "d", "e"]);
+            const range = new ListRange(1, 3, list.length);
+            let removed = false;
+            list.subscribe(defaultObserverWith({
+                onRemove(idx) {
+                    removed = true;
+                    const result = range.queryRemove(idx, list);
+                    assert.deepEqual(result, {
+                        type: ResultType.RemoveAndAdd,
+                        removeIdx: 1,
+                        addIdx: 2,
+                        value: "d",
+                        newRange: new ListRange(1, 3, 4)
+                    });
+                }
+            }));
+            list.remove(0);
+            assert(removed);
+        },
+        "queryRemove with removal within range": assert => {
+            const list = new ObservableArray(["a", "b", "c", "d", "e"]);
+            const range = new ListRange(1, 3, list.length);
+            let removed = false;
+            list.subscribe(defaultObserverWith({
+                onRemove(idx) {
+                    removed = true;
+                    const result = range.queryRemove(idx, list);
+                    assert.deepEqual(result, {
+                        type: ResultType.RemoveAndAdd,
+                        removeIdx: 2,
+                        addIdx: 2,
+                        value: "d",
+                        newRange: new ListRange(1, 3, 4)
+                    });
+                    assert.equal(list.length, 4);
+                }
+            }));
+            list.remove(2);
+            assert(removed);
+        },
+        "queryRemove with removal after range": assert => {
+            const list = new ObservableArray(["a", "b", "c", "d", "e"]);
+            const range = new ListRange(1, 3, list.length);
+            let removed = false;
+            list.subscribe(defaultObserverWith({
+                onRemove(idx) {
+                    removed = true;
+                    const result = range.queryRemove(idx, list);
+                    assert.deepEqual(result, {
+                        type: ResultType.UpdateRange,
+                        newRange: new ListRange(1, 3, 4)
+                    });
+                }
+            }));
+            list.remove(3);
+            assert(removed);
+        },
+        "queryRemove at bottom of range moves range one up": assert => {
+            const list = new ObservableArray(["a", "b", "c"]);
+            const range = new ListRange(1, 3, list.length);
+            let removed = false;
+            list.subscribe(defaultObserverWith({
+                onRemove(idx) {
+                    removed = true;
+                    const result = range.queryRemove(idx, list);
+                    assert.deepEqual(result, {
+                        newRange: new ListRange(0, 2, 2),
+                        type: ResultType.RemoveAndAdd,
+                        removeIdx: 2,
+                        addIdx: 0,
+                        value: "a"
+                    });
+                }
+            }));
+            list.remove(2);
+            assert(removed);
+        },
+        "queryRemove with range on full length shrinks range": assert => {
+            const list = new ObservableArray(["a", "b", "c"]);
+            const range = new ListRange(0, 3, list.length);
+            let removed = false;
+            list.subscribe(defaultObserverWith({
+                onRemove(idx) {
+                    removed = true;
+                    const result = range.queryRemove(idx, list);
+                    assert.deepEqual(result, {
+                        newRange: new ListRange(0, 2, 2, 3),
+                        type: ResultType.Remove,
+                        removeIdx: 2,
+                    });
+                }
+            }));
+            list.remove(2);
+            assert(removed);
+        },
+        "queryMove with move inside range": assert => {
+            const list = new ObservableArray(["a", "b", "c", "d", "e"]);
+            const range = new ListRange(1, 4, list.length);
+            let moved = false;
+            list.subscribe(defaultObserverWith({
+                onMove(fromIdx, toIdx, value) {
+                    moved = true;
+                    const result = range.queryMove(fromIdx, toIdx, value, list);
+                    assert.deepEqual(result, {
+                        type: ResultType.Move,
+                        fromIdx: 2,
+                        toIdx: 3
+                    });
+                }
+            }));
+            list.move(2, 3);
+            assert(moved);
+        },
+        "queryMove with move from before to inside range": assert => {
+            const list = new ObservableArray(["a", "b", "c", "d", "e"]);
+            const range = new ListRange(2, 5, list.length);
+            let moved = false;
+            list.subscribe(defaultObserverWith({
+                onMove(fromIdx, toIdx, value) {
+                    moved = true;
+                    const result = range.queryMove(fromIdx, toIdx, value, list);
+                    assert.deepEqual(result, {
+                        type: ResultType.RemoveAndAdd,
+                        removeIdx: 2,
+                        addIdx: 3,
+                        value: "a"
+                    });
+                }
+            }));
+            list.move(0, 3); // move "a" to after "d"
+            assert(moved);
+        },
+        "queryMove with move from after to inside range": assert => {
+            const list = new ObservableArray(["a", "b", "c", "d", "e"]);
+            const range = new ListRange(0, 3, list.length);
+            let moved = false;
+            list.subscribe(defaultObserverWith({
+                onMove(fromIdx, toIdx, value) {
+                    moved = true;
+                    const result = range.queryMove(fromIdx, toIdx, value, list);
+                    assert.deepEqual(result, {
+                        type: ResultType.RemoveAndAdd,
+                        removeIdx: 2,
+                        addIdx: 1,
+                        value: "e"
+                    });
+                }
+            }));
+            list.move(4, 1); // move "e" to before "b"
+            assert(moved);
+        },
+        "queryMove with move inside range to after": assert => {
+            const list = new ObservableArray(["a", "b", "c", "d", "e"]);
+            const range = new ListRange(0, 3, list.length);
+            let moved = false;
+            list.subscribe(defaultObserverWith({
+                onMove(fromIdx, toIdx, value) {
+                    moved = true;
+                    const result = range.queryMove(fromIdx, toIdx, value, list);
+                    assert.deepEqual(result, {
+                        type: ResultType.RemoveAndAdd,
+                        removeIdx: 1,
+                        addIdx: 2,
+                        value: "d"
+                    });
+                }
+            }));
+            list.move(1, 3); // move "b" to after "d"
+            assert(moved);
+        },
+        "queryMove with move inside range to before": assert => {
+            const list = new ObservableArray(["a", "b", "c", "d", "e"]);
+            const range = new ListRange(2, 5, list.length);
+            let moved = false;
+            list.subscribe(defaultObserverWith({
+                onMove(fromIdx, toIdx, value) {
+                    moved = true;
+                    const result = range.queryMove(fromIdx, toIdx, value, list);
+                    assert.deepEqual(result, {
+                        type: ResultType.RemoveAndAdd,
+                        removeIdx: 3,
+                        addIdx: 2,
+                        value: "b"
+                    });
+                }
+            }));
+            list.move(3, 0); // move "d" to before "a"
+            assert(moved);
+        },
+        "queryMove with move from before range to after": assert => {
+            const list = new ObservableArray(["a", "b", "c", "d", "e"]);
+            const range = new ListRange(1, 4, list.length);
+            let moved = false;
+            list.subscribe(defaultObserverWith({
+                onMove(fromIdx, toIdx, value) {
+                    moved = true;
+                    const result = range.queryMove(fromIdx, toIdx, value, list);
+                    assert.deepEqual(result, {
+                        type: ResultType.RemoveAndAdd,
+                        removeIdx: 1,
+                        addIdx: 3,
+                        value: "e"
+                    });
+                }
+            }));
+            list.move(0, 4); // move "a" to after "e"
+            assert(moved);
+        },
+        // would be good to test here what multiple mutations look like with executing the result of queryXXX
+        // on an array, much like we do in the view.
+    };
+}

src/platform/web/ui/general/ListView.ts

@@ -17,10 +17,10 @@ limitations under the License.
 import {el} from "./html";
 import {mountView, insertAt} from "./utils";
 import {SubscriptionHandle} from "../../../../observable/BaseObservable";
-import {BaseObservableList as ObservableList} from "../../../../observable/list/BaseObservableList";
+import {BaseObservableList as ObservableList, IListObserver} from "../../../../observable/list/BaseObservableList";
 import {IView, IMountArgs} from "./types";
 
-interface IOptions<T, V> {
+export interface IOptions<T, V> {
     list: ObservableList<T>,
     onItemClick?: (childView: V, evt: UIEvent) => void,
     className?: string,
@@ -28,17 +28,17 @@ interface IOptions<T, V> {
     parentProvidesUpdates?: boolean
 }
 
-export class ListView<T, V extends IView> implements IView {
+export class ListView<T, V extends IView> implements IView, IListObserver<T> {
 
     private _onItemClick?: (childView: V, evt: UIEvent) => void;
-    private _list: ObservableList<T>;
     private _className?: string;
     private _tagName: string;
     private _root?: Element;
-    private _subscription?: SubscriptionHandle;
-    private _childCreator: (value: T) => V;
-    private _childInstances?: V[];
-    private _mountArgs: IMountArgs;
+    protected _subscription?: SubscriptionHandle;
+    protected _childCreator: (value: T) => V;
+    protected _mountArgs: IMountArgs;
+    protected _list: ObservableList<T>;
+    protected _childInstances?: V[];
 
     constructor(
         {list, onItemClick, className, tagName = "ul", parentProvidesUpdates = true}: IOptions<T, V>, 
@@ -145,31 +145,48 @@ export class ListView<T, V extends IView> implements IView {
     }
 
     onAdd(idx: number, value: T) {
-        const child = this._childCreator(value);
-        this._childInstances!.splice(idx, 0, child);
-        insertAt(this._root!, idx, mountView(child, this._mountArgs));
+        this.addChild(idx, value);
     }
 
     onRemove(idx: number, value: T) {
-        const [child] = this._childInstances!.splice(idx, 1);
+        this.removeChild(idx);
+    }
+
+    onMove(fromIdx: number, toIdx: number, value: T) {
+        this.moveChild(fromIdx, toIdx);
+    }
+
+    onUpdate(i: number, value: T, params: any) {
+        this.updateChild(i, value, params);
+    }
+
+    protected addChild(childIdx: number, value: T) {
+        const child = this._childCreator(value);
+        this._childInstances!.splice(childIdx, 0, child);
+        insertAt(this._root!, childIdx, mountView(child, this._mountArgs));
+    }
+
+    protected removeChild(childIdx: number) {
+        const [child] = this._childInstances!.splice(childIdx, 1);
         child.root()!.remove();
         child.unmount();
     }
 
-    onMove(fromIdx: number, toIdx: number, value: T) {
-        const [child] = this._childInstances!.splice(fromIdx, 1);
-        this._childInstances!.splice(toIdx, 0, child);
+    protected moveChild(fromChildIdx: number, toChildIdx: number) {
+        const [child] = this._childInstances!.splice(fromChildIdx, 1);
+        this._childInstances!.splice(toChildIdx, 0, child);
         child.root()!.remove();
-        insertAt(this._root!, toIdx, child.root()! as Element);
+        insertAt(this._root!, toChildIdx, child.root()! as Element);
     }
 
-    onUpdate(i: number, value: T, params: any) {
+    protected updateChild(childIdx: number, value: T, params: any) {
         if (this._childInstances) {
-            const instance = this._childInstances![i];
+            const instance = this._childInstances![childIdx];
             instance && instance.update(value, params);
         }
     }
 
+    // TODO: is this the list or view index? 
     protected recreateItem(index: number, value: T) {
         if (this._childInstances) {
             const child = this._childCreator(value);

src/platform/web/ui/general/Range.ts

@@ -0,0 +1,225 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+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.
+*/
+
+// start is included in the range,
+// end is excluded,
+// so [2, 2[ means an empty range
+export class Range {
+    constructor(
+        public readonly start: number,
+        public readonly end: number
+    ) {}
+
+    get length() {
+        return this.end - this.start;
+    }
+
+    contains(range: Range): boolean {
+        return range.start >= this.start && range.end <= this.end;
+    }
+
+    containsIndex(idx: number): boolean {
+        return idx >= this.start && idx < this.end;
+    }
+
+    toLocalIndex(idx: number) {
+        return idx - this.start;
+    }
+
+    intersects(range: Range): boolean {
+        return range.start < this.end && this.start < range.end;
+    }
+
+    forEachInIterator<T>(it: Iterator<T>, callback: ((T, i: number) => void)) {
+        let i = 0;
+        for (i = 0; i < this.start; i += 1) {
+            it.next();
+        }
+        for (i = 0; i < this.length; i += 1) {
+            const result = it.next();
+            if (result.done) {
+                break;
+            } else {
+                callback(result.value, this.start + i);
+            }
+        }
+    }
+
+    [Symbol.iterator](): Iterator<number> {
+        return new RangeIterator(this);
+    }
+
+    reverseIterable(): Iterable<number> {
+        return new ReverseRangeIterator(this);
+    }
+
+    clampIndex(idx: number, end = this.end - 1) {
+        return Math.min(Math.max(this.start, idx), end);
+    }
+
+    getIndexZone(idx): RangeZone {
+        if (idx < this.start) {
+            return RangeZone.Before;
+        } else if (idx < this.end) {
+            return RangeZone.Inside;
+        } else {
+            return RangeZone.After;
+        }
+    }
+}
+
+export enum RangeZone {
+    Before = 1,
+    Inside,
+    After
+}
+
+class RangeIterator implements Iterator<number> {
+    private idx: number;
+    constructor(private readonly range: Range) {
+        this.idx = range.start - 1;
+    }
+
+    next(): IteratorResult<number> {
+        if (this.idx < (this.range.end - 1)) {
+            this.idx += 1;
+            return {value: this.idx, done: false};
+        } else {
+            return {value: undefined, done: true};
+        }
+    }
+}
+
+class ReverseRangeIterator implements Iterable<number>, Iterator<number> {
+    private idx: number;
+    constructor(private readonly range: Range) {
+        this.idx = range.end;
+    }
+
+    [Symbol.iterator]() {
+        return this;
+    }
+
+    next(): IteratorResult<number> {
+        if (this.idx > this.range.start) {
+            this.idx -= 1;
+            return {value: this.idx, done: false};
+        } else {
+            return {value: undefined, done: true};
+        }
+    }
+}
+
+export function tests() {
+    return {
+        "length": assert => {
+            const a = new Range(2, 5);
+            assert.equal(a.length, 3);
+        },
+        "iterator": assert => {
+            assert.deepEqual(Array.from(new Range(2, 5)), [2, 3, 4]);
+        },
+        "reverseIterable": assert => {
+            assert.deepEqual(Array.from(new Range(2, 5).reverseIterable()), [4, 3, 2]);
+        },
+        "containsIndex": assert => {
+            const a = new Range(2, 5);
+            assert.equal(a.containsIndex(0), false);
+            assert.equal(a.containsIndex(1), false);
+            assert.equal(a.containsIndex(2), true);
+            assert.equal(a.containsIndex(3), true);
+            assert.equal(a.containsIndex(4), true);
+            assert.equal(a.containsIndex(5), false);
+            assert.equal(a.containsIndex(6), false);
+        },
+        "intersects returns false for touching ranges": assert => {
+            const a = new Range(2, 5);
+            const b = new Range(5, 10);
+            assert.equal(a.intersects(b), false);
+            assert.equal(b.intersects(a), false);
+        },
+        "intersects returns false": assert => {
+            const a = new Range(2, 5);
+            const b = new Range(50, 100);
+            assert.equal(a.intersects(b), false);
+            assert.equal(b.intersects(a), false);
+        },
+        "intersects returns true for 1 overlapping item": assert => {
+            const a = new Range(2, 5);
+            const b = new Range(4, 10);
+            assert.equal(a.intersects(b), true);
+            assert.equal(b.intersects(a), true);
+        },
+        "contains beyond left edge": assert => {
+            const a = new Range(2, 5);
+            const b = new Range(1, 3);
+            assert.equal(a.contains(b), false);
+        },
+        "contains at left edge": assert => {
+            const a = new Range(2, 5);
+            const b = new Range(2, 3);
+            assert.equal(a.contains(b), true);
+        },
+        "contains between edges": assert => {
+            const a = new Range(2, 5);
+            const b = new Range(3, 4);
+            assert.equal(a.contains(b), true);
+        },
+        "contains at right edge": assert => {
+            const a = new Range(2, 5);
+            const b = new Range(3, 5);
+            assert.equal(a.contains(b), true);
+        },
+        "contains beyond right edge": assert => {
+            const a = new Range(2, 5);
+            const b = new Range(4, 6);
+            assert.equal(a.contains(b), false);
+        },
+        "contains for non-intersecting ranges": assert => {
+            const a = new Range(2, 5);
+            const b = new Range(5, 6);
+            assert.equal(a.contains(b), false);
+        },
+        "forEachInIterator with more values available": assert => {
+            const callbackValues: {v: string, i: number}[] = [];
+            const values = ["a", "b", "c", "d", "e", "f"];
+            const it = values[Symbol.iterator]();
+            new Range(2, 5).forEachInIterator(it, (v, i) => callbackValues.push({v, i}));
+            assert.deepEqual(callbackValues, [
+                {v: "c", i: 2},
+                {v: "d", i: 3},
+                {v: "e", i: 4},
+            ]);
+        },
+        "forEachInIterator with fewer values available": assert => {
+            const callbackValues: {v: string, i: number}[] = [];
+            const values = ["a", "b", "c"];
+            const it = values[Symbol.iterator]();
+            new Range(2, 5).forEachInIterator(it, (v, i) => callbackValues.push({v, i}));
+            assert.deepEqual(callbackValues, [
+                {v: "c", i: 2},
+            ]);
+        },
+        "clampIndex": assert => {
+            assert.equal(new Range(2, 5).clampIndex(0), 2);
+            assert.equal(new Range(2, 5).clampIndex(2), 2);
+            assert.equal(new Range(2, 5).clampIndex(3), 3);
+            assert.equal(new Range(2, 5).clampIndex(4), 4);
+            assert.equal(new Range(2, 5).clampIndex(5), 4);
+            assert.equal(new Range(2, 5).clampIndex(10), 4);
+        }
+    };
+}

src/platform/web/ui/general/utils.ts

@@ -50,3 +50,7 @@ export function insertAt(parentNode: Element, idx: number, childNode: Node): voi
         parentNode.insertBefore(childNode, nextDomNode);
     }
 }
+
+export function removeChildren(parentNode: Element): void {
+    parentNode.innerHTML = '';
+}

src/platform/web/ui/session/rightpanel/MemberListView.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {LazyListView} from "../../general/LazyListView.js";
+import {LazyListView} from "../../general/LazyListView";
 import {MemberTileView} from "./MemberTileView.js";
 
 export class MemberListView extends LazyListView {

src/utils/AbortableOperation.ts

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-interface IAbortable {
+export interface IAbortable {
     abort();
 }
 

src/utils/Disposables.ts

@@ -14,7 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-function disposeValue(value) {
+export interface IDisposable {
+    dispose(): void;
+}
+
+type Disposable = IDisposable | (() => void);
+
+function disposeValue(value: Disposable): void {
     if (typeof value === "function") {
         value();
     } else {
@@ -22,16 +28,14 @@ function disposeValue(value) {
     }
 }
 
-function isDisposable(value) {
+function isDisposable(value: Disposable): boolean {
     return value && (typeof value === "function" || typeof value.dispose === "function");
 }
 
 export class Disposables {
-    constructor() {
-        this._disposables = [];
-    }
+    private _disposables: Disposable[] | null = [];
 
-    track(disposable) {
+    track(disposable: Disposable): Disposable {
         if (!isDisposable(disposable)) {
             throw new Error("Not a disposable");
         }
@@ -40,19 +44,23 @@ export class Disposables {
             disposeValue(disposable);
             return disposable;
         }
-        this._disposables.push(disposable);
+        this._disposables!.push(disposable);
         return disposable;
     }
 
-    untrack(disposable) {
-        const idx = this._disposables.indexOf(disposable);
+    untrack(disposable: Disposable): null {
+        if (this.isDisposed) {
+            console.warn("Disposables already disposed, cannot untrack");
+            return null;
+        }
+        const idx = this._disposables!.indexOf(disposable);
         if (idx >= 0) {
-            this._disposables.splice(idx, 1);
+            this._disposables!.splice(idx, 1);
         }
         return null;
     }
 
-    dispose() {
+    dispose(): void {
         if (this._disposables) {
             for (const d of this._disposables) {
                 disposeValue(d);
@@ -61,17 +69,17 @@ export class Disposables {
         }
     }
 
-    get isDisposed() {
+    get isDisposed(): boolean {
         return this._disposables === null;
     }
 
-    disposeTracked(value) {
+    disposeTracked(value: Disposable): null {
         if (value === undefined || value === null || this.isDisposed) {
             return null;
         }
-        const idx = this._disposables.indexOf(value);
+        const idx = this._disposables!.indexOf(value);
         if (idx !== -1) {
-            const [foundValue] = this._disposables.splice(idx, 1);
+            const [foundValue] = this._disposables!.splice(idx, 1);
             disposeValue(foundValue);
         } else {
             console.warn("disposable not found, did it leak?", value);

src/utils/Lock.ts

@@ -15,12 +15,10 @@ limitations under the License.
 */
 
 export class Lock {
-    constructor() {
-        this._promise = null;
-        this._resolve = null;
-    }
+    private _promise?: Promise<void>;
+    private _resolve?: (() => void);
 
-    tryTake() {
+    tryTake(): boolean {
         if (!this._promise) {
             this._promise = new Promise(resolve => {
                 this._resolve = resolve;
@@ -30,36 +28,36 @@ export class Lock {
         return false;
     }
 
-    async take() {
+    async take(): Promise<void> {
         while(!this.tryTake()) {
             await this.released();
         }
     }
 
-    get isTaken() {
+    get isTaken(): boolean {
         return !!this._promise;
     }
 
-    release() {
+    release(): void {
         if (this._resolve) {
-            this._promise = null;
+            this._promise = undefined;
             const resolve = this._resolve;
-            this._resolve = null;
+            this._resolve = undefined;
             resolve();
         }
     }
 
-    released() {
+    released(): Promise<void> | undefined {
         return this._promise;
     }
 }
 
 export class MultiLock {
-    constructor(locks) {
-        this.locks = locks;
+
+    constructor(public readonly locks: Lock[]) {
     }
 
-    release() {
+    release(): void {
         for (const lock of this.locks) {
             lock.release();
         }
@@ -86,9 +84,9 @@ export function tests() {
             lock.tryTake();
 
             let first;
-            lock.released().then(() => first = lock.tryTake());
+            lock.released()!.then(() => first = lock.tryTake());
             let second;
-            lock.released().then(() => second = lock.tryTake());
+            lock.released()!.then(() => second = lock.tryTake());
             const promise = lock.released();
             lock.release();
             await promise;

src/utils/LockMap.ts

@@ -14,14 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {Lock} from "./Lock.js";
+import {Lock} from "./Lock";
 
-export class LockMap {
-    constructor() {
-        this._map = new Map();
-    }
+export class LockMap<T> {
+    private readonly _map: Map<T, Lock> = new Map();
 
-    async takeLock(key) {
+    async takeLock(key: T): Promise<Lock> {
         let lock = this._map.get(key);
         if (lock) {
             await lock.take();
@@ -31,10 +29,10 @@ export class LockMap {
             this._map.set(key, lock);
         }
         // don't leave old locks lying around
-        lock.released().then(() => {
+        lock.released()!.then(() => {
             // give others a chance to take the lock first
             Promise.resolve().then(() => {
-                if (!lock.isTaken) {
+                if (!lock!.isTaken) {
                     this._map.delete(key);
                 }
             });
@@ -67,6 +65,7 @@ export function tests() {
                 ranSecond = true;
                 assert.equal(returnedLock.isTaken, true);
                 // peek into internals, naughty
+                // @ts-ignore
                 assert.equal(lockMap._map.get("foo"), returnedLock);
             });
             lock.release();
@@ -84,6 +83,7 @@ export function tests() {
             // double delay to make sure cleanup logic ran
             await Promise.resolve();
             await Promise.resolve();
+            // @ts-ignore
             assert.equal(lockMap._map.has("foo"), false);
         },
         

src/utils/RetainedValue.ts

@@ -15,16 +15,18 @@ limitations under the License.
 */
 
 export class RetainedValue {
-    constructor(freeCallback) {
+    private readonly _freeCallback: () => void;
+    private _retentionCount: number = 1;
+
+    constructor(freeCallback: () => void) {
         this._freeCallback = freeCallback;
-        this._retentionCount = 1;
     }
 
-    retain() {
+    retain(): void {
         this._retentionCount += 1;
     }
 
-    release() {
+    release(): void {
         this._retentionCount -= 1;
         if (this._retentionCount === 0) {
             this._freeCallback();

src/utils/crypto/hkdf.ts

@@ -6,8 +6,10 @@
  * Based on https://github.com/junkurihara/jscu/blob/develop/packages/js-crypto-hkdf/src/hkdf.ts
  */
 
+import type {Crypto} from "../../platform/web/dom/Crypto.js";
+
 // forked this code to make it use the cryptoDriver for HMAC that is more backwards-compatible
-export async function hkdf(cryptoDriver, key, salt, info, hash, length) {
+export async function hkdf(cryptoDriver: Crypto, key: Uint8Array, salt: Uint8Array, info: Uint8Array, hash: "SHA-256" | "SHA-512", length: number): Promise<Uint8Array> {
     length = length / 8;
     const len = cryptoDriver.digestSize(hash);
 

src/utils/crypto/pbkdf2.ts

@@ -6,17 +6,19 @@
  * Based on https://github.com/junkurihara/jscu/blob/develop/packages/js-crypto-pbkdf/src/pbkdf.ts
  */
 
+import type {Crypto} from "../../platform/web/dom/Crypto.js";
+
 // not used atm, but might in the future
 // forked this code to make it use the cryptoDriver for HMAC that is more backwards-compatible
 
 
-const nwbo = (num, len) => {
+const nwbo = (num: number, len: number): Uint8Array => {
   const arr = new Uint8Array(len);
   for(let i=0; i<len; i++) arr[i] = 0xFF && (num >> ((len - i - 1)*8));
   return arr;
 };
 
-export async function pbkdf2(cryptoDriver, password, iterations, salt, hash, length) {
+export async function pbkdf2(cryptoDriver: Crypto, password: Uint8Array, iterations: number, salt: Uint8Array, hash: "SHA-256" | "SHA-512", length: number): Promise<Uint8Array> {
     const dkLen = length / 8;
     if (iterations <= 0) {
         throw new Error('InvalidIterationCount');
@@ -30,7 +32,7 @@ export async function pbkdf2(cryptoDriver, password, iterations, salt, hash, len
     const l = Math.ceil(dkLen/hLen);
     const r = dkLen - (l-1)*hLen;
 
-    const funcF = async (i) => {
+    const funcF = async (i: number) => {
         const seed = new Uint8Array(salt.length + 4);
         seed.set(salt);
         seed.set(nwbo(i+1, 4), salt.length);
@@ -46,7 +48,7 @@ export async function pbkdf2(cryptoDriver, password, iterations, salt, hash, len
         return {index: i, value: outputF};
     };
 
-    const Tis = [];
+    const Tis: Promise<{index: number, value: Uint8Array}>[] = [];
     const DK = new Uint8Array(dkLen);
     for(let i = 0; i < l; i++) {
         Tis.push(funcF(i));

src/utils/enum.ts

@@ -14,12 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-export function createEnum(...values) {
+export function createEnum(...values: string[]): Readonly<{}> {
     const obj = {};
     for (const value of values) {
-        if (typeof value !== "string") {
-            throw new Error("Invalid enum value name" + value?.toString());
-        }
         obj[value] = value;
     }
     return Object.freeze(obj);

src/utils/error.ts

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 export class AbortError extends Error {
-    get name() {
+    get name(): string {
         return "AbortError";
     }
 }

src/utils/formatSize.ts

@@ -14,7 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-export function formatSize(size, decimals = 2) {
+
+export function formatSize(size: number, decimals: number = 2): string {
     if (Number.isSafeInteger(size)) {
         const base = Math.min(3, Math.floor(Math.log(size) / Math.log(1024)));
         const formattedSize = Math.round(size / Math.pow(1024, base)).toFixed(decimals);
@@ -25,4 +26,5 @@ export function formatSize(size, decimals = 2) {
             case 3: return `${formattedSize} GB`;
         }
     }
+    return "";
 }

src/utils/mergeMap.ts

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-export function mergeMap(src, dst) {
+export function mergeMap<K, V>(src: Map<K, V> | undefined, dst: Map<K, V>): void {
     if (src) {
         for (const [key, value] of src.entries()) {
             dst.set(key, value);

src/utils/sortedIndex.ts

@@ -22,7 +22,7 @@ limitations under the License.
  * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
  * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
  */
-export function sortedIndex(array, value, comparator) {
+export function sortedIndex<T>(array: T[], value: T, comparator: (x:T, y:T) => number): number {
     let low = 0;
     let high = array.length;
 

src/utils/timeout.ts

@@ -16,9 +16,12 @@ limitations under the License.
 */
 
 import {ConnectionError} from "../matrix/error.js";
+import type {Timeout} from "../platform/web/dom/Clock.js"
+import type {IAbortable} from "./AbortableOperation";
 
+type TimeoutCreator = (ms: number) => Timeout;
 
-export function abortOnTimeout(createTimeout, timeoutAmount, requestResult, responsePromise) {
+export function abortOnTimeout(createTimeout: TimeoutCreator, timeoutAmount: number, requestResult: IAbortable, responsePromise: Promise<Response>) {
     const timeout = createTimeout(timeoutAmount);
     // abort request if timeout finishes first
     let timedOut = false;

yarn.lock

@@ -2510,114 +2510,120 @@ es-module-lexer@^0.6.0:
   version "4.2.8"
   resolved "https://github.com/bwindels/es6-promise.git#112f78f5829e627055b0ff56a52fecb63f6003b1"
 
-esbuild-android-arm64@0.13.4:
-  version "0.13.4"
-  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.13.4.tgz#5178a20d2b7aba741a31c19609f9e67b346996b9"
-  integrity sha512-elDJt+jNyoHFId0/dKsuVYUPke3EcquIyUwzJCH17a3ERglN3A9aMBI5zbz+xNZ+FbaDNdpn0RaJHCFLbZX+fA==
+esbuild-android-arm64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.13.15.tgz#3fc3ff0bab76fe35dd237476b5d2b32bb20a3d44"
+  integrity sha512-m602nft/XXeO8YQPUDVoHfjyRVPdPgjyyXOxZ44MK/agewFFkPa8tUo6lAzSWh5Ui5PB4KR9UIFTSBKh/RrCmg==
 
-esbuild-darwin-64@0.13.4:
-  version "0.13.4"
-  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.13.4.tgz#7a3e66c8e1271b650541b25eed65c84f3564a69d"
-  integrity sha512-zJQGyHRAdZUXlRzbN7W+7ykmEiGC+bq3Gc4GxKYjjWTgDRSEly98ym+vRNkDjXwXYD3gGzSwvH35+MiHAtWvLA==
+esbuild-darwin-64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-64/-/esbuild-darwin-64-0.13.15.tgz#8e9169c16baf444eacec60d09b24d11b255a8e72"
+  integrity sha512-ihOQRGs2yyp7t5bArCwnvn2Atr6X4axqPpEdCFPVp7iUj4cVSdisgvEKdNR7yH3JDjW6aQDw40iQFoTqejqxvQ==
 
-esbuild-darwin-arm64@0.13.4:
-  version "0.13.4"
-  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.13.4.tgz#793feca6032b2a57ef291eb9b2d33768d60a49d6"
-  integrity sha512-r8oYvAtqSGq8HNTZCAx4TdLE7jZiGhX9ooGi5AQAey37MA6XNaP8ZNlw9OCpcgpx3ryU2WctXwIqPzkHO7a8dg==
+esbuild-darwin-arm64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-darwin-arm64/-/esbuild-darwin-arm64-0.13.15.tgz#1b07f893b632114f805e188ddfca41b2b778229a"
+  integrity sha512-i1FZssTVxUqNlJ6cBTj5YQj4imWy3m49RZRnHhLpefFIh0To05ow9DTrXROTE1urGTQCloFUXTX8QfGJy1P8dQ==
 
-esbuild-freebsd-64@0.13.4:
-  version "0.13.4"
-  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.13.4.tgz#294aec3c2cf4b41fb6900212fc9c33dd8fbbb4a2"
-  integrity sha512-u9DRGkn09EN8+lCh6z7FKle7awi17PJRBuAKdRNgSo5ZrH/3m+mYaJK2PR2URHMpAfXiwJX341z231tSdVe3Yw==
+esbuild-freebsd-64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-64/-/esbuild-freebsd-64-0.13.15.tgz#0b8b7eca1690c8ec94c75680c38c07269c1f4a85"
+  integrity sha512-G3dLBXUI6lC6Z09/x+WtXBXbOYQZ0E8TDBqvn7aMaOCzryJs8LyVXKY4CPnHFXZAbSwkCbqiPuSQ1+HhrNk7EA==
 
-esbuild-freebsd-arm64@0.13.4:
-  version "0.13.4"
-  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.13.4.tgz#09fe66c751c12f9b976976b1d83f3de594cb2787"
-  integrity sha512-q3B2k68Uf6gfjATjcK16DqxvjqRQkHL8aPoOfj4op+lSqegdXvBacB1d8jw8PxbWJ8JHpdTLdAVUYU80kotQXA==
+esbuild-freebsd-arm64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-freebsd-arm64/-/esbuild-freebsd-arm64-0.13.15.tgz#2e1a6c696bfdcd20a99578b76350b41db1934e52"
+  integrity sha512-KJx0fzEDf1uhNOZQStV4ujg30WlnwqUASaGSFPhznLM/bbheu9HhqZ6mJJZM32lkyfGJikw0jg7v3S0oAvtvQQ==
 
-esbuild-linux-32@0.13.4:
-  version "0.13.4"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.13.4.tgz#a9f0793d7bcc9cef4f4ffa4398c525877fba5839"
-  integrity sha512-UUYJPHSiKAO8KoN3Ls/iZtgDLZvK5HarES96aolDPWZnq9FLx4dIHM/x2z4Rxv9IYqQ/DxlPoE2Co1UPBIYYeA==
+esbuild-linux-32@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-32/-/esbuild-linux-32-0.13.15.tgz#6fd39f36fc66dd45b6b5f515728c7bbebc342a69"
+  integrity sha512-ZvTBPk0YWCLMCXiFmD5EUtB30zIPvC5Itxz0mdTu/xZBbbHJftQgLWY49wEPSn2T/TxahYCRDWun5smRa0Tu+g==
 
-esbuild-linux-64@0.13.4:
-  version "0.13.4"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.13.4.tgz#c0d0b4c9d62e3bbf8bdf2cece37403aa6d60fc2e"
-  integrity sha512-+RnohAKiiUW4UHLGRkNR1AnENW1gCuDWuygEtd4jxTNPIoeC7lbXGor7rtgjj9AdUzFgOEvAXyNNX01kJ8NueQ==
+esbuild-linux-64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-64/-/esbuild-linux-64-0.13.15.tgz#9cb8e4bcd7574e67946e4ee5f1f1e12386bb6dd3"
+  integrity sha512-eCKzkNSLywNeQTRBxJRQ0jxRCl2YWdMB3+PkWFo2BBQYC5mISLIVIjThNtn6HUNqua1pnvgP5xX0nHbZbPj5oA==
 
-esbuild-linux-arm64@0.13.4:
-  version "0.13.4"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.13.4.tgz#1292d97bfa64a08d12728f8a7837bf92776c779b"
-  integrity sha512-+A188cAdd6QuSRxMIwRrWLjgphQA0LDAQ/ECVlrPVJwnx+1i64NjDZivoqPYLOTkSPIKntiWwMhhf0U5/RrPHQ==
+esbuild-linux-arm64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm64/-/esbuild-linux-arm64-0.13.15.tgz#3891aa3704ec579a1b92d2a586122e5b6a2bfba1"
+  integrity sha512-bYpuUlN6qYU9slzr/ltyLTR9YTBS7qUDymO8SV7kjeNext61OdmqFAzuVZom+OLW1HPHseBfJ/JfdSlx8oTUoA==
 
-esbuild-linux-arm@0.13.4:
-  version "0.13.4"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.13.4.tgz#186cd9b8885ac132b9953a4a0afe668168debd10"
-  integrity sha512-BH5gKve4jglS7UPSsfwHSX79I5agC/lm4eKoRUEyo8lwQs89frQSRp2Xup+6SFQnxt3md5EsKcd2Dbkqeb3gPA==
+esbuild-linux-arm@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-arm/-/esbuild-linux-arm-0.13.15.tgz#8a00e99e6a0c6c9a6b7f334841364d8a2b4aecfe"
+  integrity sha512-wUHttDi/ol0tD8ZgUMDH8Ef7IbDX+/UsWJOXaAyTdkT7Yy9ZBqPg8bgB/Dn3CZ9SBpNieozrPRHm0BGww7W/jA==
 
-esbuild-linux-mips64le@0.13.4:
-  version "0.13.4"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.13.4.tgz#42049bf72bc586817b4a51cc9e32148d13e5e807"
-  integrity sha512-0xkwtPaUkG5xMTFGaQPe1AadSe5QAiQuD4Gix1O9k5Xo/U8xGIkw9UFUTvfEUeu71vFb6ZgsIacfP1NLoFjWNw==
+esbuild-linux-mips64le@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-mips64le/-/esbuild-linux-mips64le-0.13.15.tgz#36b07cc47c3d21e48db3bb1f4d9ef8f46aead4f7"
+  integrity sha512-KlVjIG828uFPyJkO/8gKwy9RbXhCEUeFsCGOJBepUlpa7G8/SeZgncUEz/tOOUJTcWMTmFMtdd3GElGyAtbSWg==
 
-esbuild-linux-ppc64le@0.13.4:
-  version "0.13.4"
-  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.13.4.tgz#adf1ce2ef2302757c4383887da6ac4dd25be9d4f"
-  integrity sha512-E1+oJPP7A+j23GPo3CEpBhGwG1bni4B8IbTA3/3rvzjURwUMZdcN3Fhrz24rnjzdLSHmULtOE4VsbT42h1Om4Q==
+esbuild-linux-ppc64le@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-linux-ppc64le/-/esbuild-linux-ppc64le-0.13.15.tgz#f7e6bba40b9a11eb9dcae5b01550ea04670edad2"
+  integrity sha512-h6gYF+OsaqEuBjeesTBtUPw0bmiDu7eAeuc2OEH9S6mV9/jPhPdhOWzdeshb0BskRZxPhxPOjqZ+/OqLcxQwEQ==
 
-esbuild-node-loader@^0.3.1:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/esbuild-node-loader/-/esbuild-node-loader-0.3.2.tgz#39918776ece52da31f771be9dbcedc459ccf814b"
-  integrity sha512-4Y6sTwvB5pH+A7gmpd/xzyPkOZC4nmEWRoGBi4BQoE0DhZvrrzHqSmT+jb4x7m1rwv4BCuNbajN13LN8D0PGoA==
+esbuild-netbsd-64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-netbsd-64/-/esbuild-netbsd-64-0.13.15.tgz#a2fedc549c2b629d580a732d840712b08d440038"
+  integrity sha512-3+yE9emwoevLMyvu+iR3rsa+Xwhie7ZEHMGDQ6dkqP/ndFzRHkobHUKTe+NCApSqG5ce2z4rFu+NX/UHnxlh3w==
+
+esbuild-node-loader@^0.6.3:
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/esbuild-node-loader/-/esbuild-node-loader-0.6.3.tgz#3b90012f8bc2fcbb2ef76a659482c2c99840c5e8"
+  integrity sha512-Bf6o8SiMMh5+r20jsjAThNOtzo3t8Ye4Qdzz+twWHnxu28SdkGUr5ahq8iX0qbd+I9ge8sLNX7oQoNW1YzHlqA==
   dependencies:
-    esbuild "^0.13.2"
+    esbuild "^0.13.12"
 
-esbuild-openbsd-64@0.13.4:
-  version "0.13.4"
-  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.13.4.tgz#1c8122101898c52a20c8786935cf3eb7a19b83b4"
-  integrity sha512-xEkI1o5HYxDzbv9jSox0EsDxpwraG09SRiKKv0W8pH6O3bt+zPSlnoK7+I7Q69tkvONkpIq5n2o+c55uq0X7cw==
+esbuild-openbsd-64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-openbsd-64/-/esbuild-openbsd-64-0.13.15.tgz#b22c0e5806d3a1fbf0325872037f885306b05cd7"
+  integrity sha512-wTfvtwYJYAFL1fSs8yHIdf5GEE4NkbtbXtjLWjM3Cw8mmQKqsg8kTiqJ9NJQe5NX/5Qlo7Xd9r1yKMMkHllp5g==
 
-esbuild-sunos-64@0.13.4:
-  version "0.13.4"
-  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.13.4.tgz#4ec95faa14a60f295fe485bebffefff408739337"
-  integrity sha512-bjXUMcODMnB6hQicLBBmmnBl7OMDyVpFahKvHGXJfDChIi5udiIRKCmFUFIRn+AUAKVlfrofRKdyPC7kBsbvGQ==
+esbuild-sunos-64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-sunos-64/-/esbuild-sunos-64-0.13.15.tgz#d0b6454a88375ee8d3964daeff55c85c91c7cef4"
+  integrity sha512-lbivT9Bx3t1iWWrSnGyBP9ODriEvWDRiweAs69vI+miJoeKwHWOComSRukttbuzjZ8r1q0mQJ8Z7yUsDJ3hKdw==
 
-esbuild-windows-32@0.13.4:
-  version "0.13.4"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.13.4.tgz#3182c380487b797b04d0ec2c80c2945666869080"
-  integrity sha512-z4CH07pfyVY0XF98TCsGmLxKCl0kyvshKDbdpTekW9f2d+dJqn5mmoUyWhpSVJ0SfYWJg86FoD9nMbbaMVyGdg==
+esbuild-windows-32@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-32/-/esbuild-windows-32-0.13.15.tgz#c96d0b9bbb52f3303322582ef8e4847c5ad375a7"
+  integrity sha512-fDMEf2g3SsJ599MBr50cY5ve5lP1wyVwTe6aLJsM01KtxyKkB4UT+fc5MXQFn3RLrAIAZOG+tHC+yXObpSn7Nw==
 
-esbuild-windows-64@0.13.4:
-  version "0.13.4"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.13.4.tgz#b9e995f92d81f433a04f33611e603e82f9232e69"
-  integrity sha512-uVL11vORRPjocGLYam67rwFLd0LvkrHEs+JG+1oJN4UD9MQmNGZPa4gBHo6hDpF+kqRJ9kXgQSeDqUyRy0tj/Q==
+esbuild-windows-64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-64/-/esbuild-windows-64-0.13.15.tgz#1f79cb9b1e1bb02fb25cd414cb90d4ea2892c294"
+  integrity sha512-9aMsPRGDWCd3bGjUIKG/ZOJPKsiztlxl/Q3C1XDswO6eNX/Jtwu4M+jb6YDH9hRSUflQWX0XKAfWzgy5Wk54JQ==
 
-esbuild-windows-arm64@0.13.4:
-  version "0.13.4"
-  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.13.4.tgz#fb239532f07b764d158f4cc787178ef4c6fadb5c"
-  integrity sha512-vA6GLvptgftRcDcWngD5cMlL4f4LbL8JjU2UMT9yJ0MT5ra6hdZNFWnOeOoEtY4GtJ6OjZ0i+81sTqhAB0fMkg==
+esbuild-windows-arm64@0.13.15:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild-windows-arm64/-/esbuild-windows-arm64-0.13.15.tgz#482173070810df22a752c686509c370c3be3b3c3"
+  integrity sha512-zzvyCVVpbwQQATaf3IG8mu1IwGEiDxKkYUdA4FpoCHi1KtPa13jeScYDjlW0Qh+ebWzpKfR2ZwvqAQkSWNcKjA==
 
-esbuild@^0.13.2:
-  version "0.13.4"
-  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.13.4.tgz#ce2deb56c4fb360938311cbfc67f8e467bb6841b"
-  integrity sha512-wMA5eUwpavTBiNl+It6j8OQuKVh69l6z4DKDLzoTIqC+gChnPpcmqdA8WNHptUHRnfyML+mKEQPlW7Mybj8gHg==
+esbuild@^0.13.12, esbuild@^0.13.2:
+  version "0.13.15"
+  resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.13.15.tgz#db56a88166ee373f87dbb2d8798ff449e0450cdf"
+  integrity sha512-raCxt02HBKv8RJxE8vkTSCXGIyKHdEdGfUmiYb8wnabnaEmHzyW7DCHb5tEN0xU8ryqg5xw54mcwnYkC4x3AIw==
   optionalDependencies:
-    esbuild-android-arm64 "0.13.4"
-    esbuild-darwin-64 "0.13.4"
-    esbuild-darwin-arm64 "0.13.4"
-    esbuild-freebsd-64 "0.13.4"
-    esbuild-freebsd-arm64 "0.13.4"
-    esbuild-linux-32 "0.13.4"
-    esbuild-linux-64 "0.13.4"
-    esbuild-linux-arm "0.13.4"
-    esbuild-linux-arm64 "0.13.4"
-    esbuild-linux-mips64le "0.13.4"
-    esbuild-linux-ppc64le "0.13.4"
-    esbuild-openbsd-64 "0.13.4"
-    esbuild-sunos-64 "0.13.4"
-    esbuild-windows-32 "0.13.4"
-    esbuild-windows-64 "0.13.4"
-    esbuild-windows-arm64 "0.13.4"
+    esbuild-android-arm64 "0.13.15"
+    esbuild-darwin-64 "0.13.15"
+    esbuild-darwin-arm64 "0.13.15"
+    esbuild-freebsd-64 "0.13.15"
+    esbuild-freebsd-arm64 "0.13.15"
+    esbuild-linux-32 "0.13.15"
+    esbuild-linux-64 "0.13.15"
+    esbuild-linux-arm "0.13.15"
+    esbuild-linux-arm64 "0.13.15"
+    esbuild-linux-mips64le "0.13.15"
+    esbuild-linux-ppc64le "0.13.15"
+    esbuild-netbsd-64 "0.13.15"
+    esbuild-openbsd-64 "0.13.15"
+    esbuild-sunos-64 "0.13.15"
+    esbuild-windows-32 "0.13.15"
+    esbuild-windows-64 "0.13.15"
+    esbuild-windows-arm64 "0.13.15"
 
 esbuild@~0.9.0:
   version "0.9.7"
@@ -3335,14 +3341,14 @@ import-fresh@^3.0.0, import-fresh@^3.2.1:
     parent-module "^1.0.0"
     resolve-from "^4.0.0"
 
-impunity@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/impunity/-/impunity-1.0.2.tgz#17819562cef60a4e74dd095438012131211687f4"
-  integrity sha512-tv61TSxBUd02Tap2IFajD8pQ+PCo4/lZG4DOd4nWmRYyH/KyxKEU6I0u4jn3mqWhCF6ECdRh5g98abWcvNPcHA==
+impunity@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/impunity/-/impunity-1.0.9.tgz#8524d96f07c26987519ec693c4c4d3ab49254b03"
+  integrity sha512-tfy7GRHeE9JVURKM7dqfTAZItGFeA/DRrlhgMLUuzSig3jF+AYSUV26tGTMGrfCN0Cb9hNz6xrZnNwa5M1hz4Q==
   dependencies:
     colors "^1.3.3"
     commander "^6.1.0"
-    esbuild-node-loader "^0.3.1"
+    esbuild-node-loader "^0.6.3"
 
 imurmurhash@^0.1.4:
   version "0.1.4"