feat: switch to matrix.test.mystiq.app

Fix develop server breaking due to import syntax

.gitignore

@@ -1,5 +1,6 @@
 *.sublime-project
 *.sublime-workspace
+.DS_Store
 node_modules
 fetchlogs
 sessionexports
@@ -7,4 +8,6 @@ bundle.js
 target
 lib
 *.tar.gz
-.eslintcache
+.eslintcache
+.tmp
+tmp/

.ts-eslintrc.js

@@ -19,6 +19,7 @@ module.exports = {
     ],
     rules: {
         "@typescript-eslint/no-floating-promises": 2,
-        "@typescript-eslint/no-misused-promises": 2
+        "@typescript-eslint/no-misused-promises": 2,
+        "semi": ["error", "always"]
     }
 };

.woodpecker.yml

@@ -0,0 +1,18 @@
+pipeline:
+    buildfrontend:
+        image: node:16
+        commands:
+            - yarn install --prefer-offline --frozen-lockfile
+            - yarn test
+            - yarn run lint-ci
+            - yarn run tsc
+            - yarn build
+
+    deploy:
+        image: python
+        when:
+            event: push
+            branch: master
+        commands:
+            - make ci-deploy
+        secrets: [ GITEA_WRITE_DEPLOY_KEY, LIBREPAGES_DEPLOY_SECRET ]

Makefile

@@ -0,0 +1,14 @@
+ci-deploy: ## Deploy from CI/CD. Only call from within CI
+	@if [ "${CI}" != "woodpecker" ]; \
+	then echo "Only call from within CI. Will re-write your local Git configuration. To override, set export CI=woodpecker"; \
+		 exit 1; \
+	fi
+	git config --global user.email "${CI_COMMIT_AUTHOR_EMAIL}"
+	git config --global user.name "${CI_COMMIT_AUTHOR}"
+	./scripts/ci.sh --commit-files librepages target "${CI_COMMIT_AUTHOR} <${CI_COMMIT_AUTHOR_EMAIL}>"
+	./scripts/ci.sh --init "$$GITEA_WRITE_DEPLOY_KEY"
+	./scripts/ci.sh --deploy ${LIBREPAGES_DEPLOY_SECRET}  librepages
+	./scripts/ci.sh --clean
+
+help: ## Prints help for targets with comments
+	@cat $(MAKEFILE_LIST) | grep -E '^[a-zA-Z_-]+:.*?## .*$$' | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'

README.md

@@ -1,3 +1,5 @@
+[![status-badge](https://ci.batsense.net/api/badges/mystiq/hydrogen-web/status.svg)](https://ci.batsense.net/mystiq/hydrogen-web)
+
 # Hydrogen
 
 A minimal [Matrix](https://matrix.org/) chat client, focused on performance, offline functionality, and broad browser support. This is work in progress and not yet ready for primetime. Bug reports are welcome, but please don't file any feature requests or other missing things to be on par with Element Web.
@@ -10,13 +12,34 @@ Hydrogen's goals are:
  - It is a standalone webapp, but can also be easily embedded into an existing website/webapp to add chat capabilities.
  - Loading (unused) parts of the application after initial page load should be supported
 
+For embedded usage, see the [SDK instructions](doc/SDK.md).
+
 If you find this interesting, come and discuss on [`#hydrogen:matrix.org`](https://matrix.to/#/#hydrogen:matrix.org).
 
 # How to use
 
-Hydrogen is deployed to [hydrogen.element.io](https://hydrogen.element.io). You can run it locally `yarn install` (only the first time) and `yarn start` in the terminal, and point your browser to `http://localhost:3000`. If you prefer, you can also [use docker](doc/docker.md).
+Hydrogen is deployed to [hydrogen.element.io](https://hydrogen.element.io). You can also deploy Hydrogen on your own web server:
 
-Hydrogen uses symbolic links in the codebase, so if you are on Windows, have a look at [making git & symlinks work](https://github.com/git-for-windows/git/wiki/Symbolic-Links) there.
+ 1. Download the [latest release package](https://github.com/vector-im/hydrogen-web/releases).
+ 1. Extract the package to the public directory of your web server.
+ 1. If this is your first deploy:
+    1. copy `config.sample.json` to `config.json` and if needed, make any modifications (unless you've set up your own [sygnal](https://github.com/matrix-org/sygnal) instance, you don't need to change anything in the `push` section).
+    1. Disable caching entirely on the server for:
+        - `index.html`
+        - `sw.js`
+        - `config.json`
+        - All theme manifests referenced in the `themeManifests` of `config.json`, these files are typically called `theme-{name}.json`.
+
+        These resources will still be cached client-side by the service worker. Because of this; you'll still need to refresh the app twice before config.json changes are applied.
+
+## Set up a dev environment
+
+You can run Hydrogen locally by the following commands in the terminal:
+
+ - `yarn install` (only the first time)
+ - `yarn start` in the terminal
+
+Now point your browser to `http://localhost:3000`. If you prefer, you can also [use docker](doc/docker.md).
 
 # FAQ
 

doc/IMPORT-ISSUES.md

@@ -0,0 +1,11 @@
+## How to import common-js dependency using ES6 syntax
+---
+Until [#6632](https://github.com/vitejs/vite/issues/6632) is fixed, such imports should be done as follows:
+
+```ts
+import * as pkg from "off-color";
+// @ts-ignore 
+const offColor = pkg.offColor ?? pkg.default.offColor;
+```
+
+This way build, dev server and unit tests should all work.

doc/SDK.md

@@ -31,7 +31,8 @@ import {
     createNavigation,
     createRouter,
     RoomViewModel,
-    TimelineView
+    TimelineView,
+    viewClassForTile
 } from "hydrogen-view-sdk";
 import downloadSandboxPath from 'hydrogen-view-sdk/download-sandbox.html?url';
 import workerPath from 'hydrogen-view-sdk/main.js?url';
@@ -47,12 +48,13 @@ const assetPaths = {
         wasmBundle: olmJsPath
     }
 };
-import "hydrogen-view-sdk/style.css";
+import "hydrogen-view-sdk/assets/theme-element-light.css";
+// OR import "hydrogen-view-sdk/assets/theme-element-dark.css";
 
 async function main() {
     const app = document.querySelector<HTMLDivElement>('#app')!
     const config = {};
-    const platform = new Platform(app, assetPaths, config, { development: import.meta.env.DEV });
+    const platform = new Platform({container: app, assetPaths, config, options: { development: import.meta.env.DEV }});
     const navigation = createNavigation();
     platform.setNavigation(navigation);
     const urlRouter = createRouter({
@@ -87,7 +89,7 @@ async function main() {
             navigation,
         });
         await vm.load();
-        const view = new TimelineView(vm.timelineViewModel);
+        const view = new TimelineView(vm.timelineViewModel, viewClassForTile);
         app.appendChild(view.mount());
     }
 }

doc/THEMING.md

@@ -0,0 +1,204 @@
+# Theming Documentation
+## Basic Architecture
+A **theme collection** in Hydrogen is represented by a `manifest.json` file and a `theme.css` file.
+The manifest specifies variants (eg: dark,light ...) each of which is a **theme** and maps to a single css file in the build output.
+
+Each such theme is produced by changing the values of variables in the base `theme.css` file with those specified in the variant section of the manifest:
+
+![](images/theming-architecture.png)
+
+More in depth explanations can be found in later sections.
+
+## Structure of `manifest.json`
+[See theme.ts](../src/platform/types/theme.ts)
+
+## Variables
+CSS variables specific to a particular variant are specified in the `variants` section of the manifest:
+```json=
+ "variants": {
+     "light": {
+         ...
+         "variables": {
+             "background-color-primary": "#fff",
+             "text-color": "#2E2F32",
+         }
+     },
+      "dark": {
+         ...
+        "variables": {
+            "background-color-primary": "#21262b",
+            "text-color": "#fff",
+        }
+    }
+ }
+```
+
+These variables will appear in the css file (theme.css):
+```css=
+body {
+    background-color: var(--background-color-primary);
+    color: var(--text-color);
+}
+```
+
+During the build process, this would result in the creation of two css files (one for each variant) where the variables are substitued with the corresponding values specified in the manifest:
+
+*element-light.css*:
+```css=
+body {
+    background-color: #fff;
+    color: #2E2F32;
+}
+```
+
+*element-dark.css*:
+```css=
+body {
+    background-color: #21262b;
+    color: #fff;
+}
+```
+
+## Derived Variables
+In addition to simple substitution of variables in the stylesheet, it is also possible to instruct the build system to first produce a new value from the base variable value before the substitution.
+
+Such derived variables have the form `base_css_variable--operation-arg` and can be read as:
+apply `operation` to `base_css_variable` with argument `arg`.
+
+Continuing with the previous example, it possible to specify:
+```css=
+.left-panel {
+    /* background color should be 20% more darker
+       than background-color-primary */
+    background-color: var(--background-color-primary--darker-20);
+}
+```
+
+Currently supported operations are:
+
+| Operation | Argument | Operates On |
+| -------- | -------- | -------- |
+| darker     | percentage | color |
+| lighter     | percentage | color |
+
+## Aliases
+It is possible give aliases to variables in the `theme.css` file:
+```css=
+:root {
+    font-size: 10px;
+    /* Theme aliases */
+    --icon-color: var(--background-color-secondary--darker-40);
+}
+```
+It is possible to further derive from these aliased variables:
+```css=
+div {
+    background: var(--icon-color--darker-20);
+    --my-alias: var(--icon-color--darker-20);
+    /* Derive from aliased  variable */
+    color: var(--my-alias--lighter-15);
+}
+```
+
+
+## Colorizing svgs
+Along with a change in color-scheme, it may be necessary to change the colors in the svg icons and images. 
+This can be done by supplying the preferred colors with query parameters:
+`my-awesome-logo.svg?primary=base-variable-1&secondary=base-variable-2`  
+
+This instructs the build system to colorize the svg with the given primary and secondary colors.
+`base-variable-1` and `base-variable-2` are the css-variables specified in the `variables` section of the manifest.
+
+For colorizing svgs, the source svg must use `#ff00ff` as the primary color and `#00ffff` as the secondary color:
+
+  
+
+| ![](images/svg-icon-example.png) | ![](images/coloring-process.png) |
+| :--: |:--: |
+| **original source image** | **transformation process** |
+
+## Creating your own theme variant in Hydrogen
+If you're looking to change the color-scheme of the existing Element theme, you only need to add your own variant to the existing `manifest.json`.
+
+The steps are fairly simple:
+1. Copy over an existing variant to the variants section of the manifest.
+2. Change `dark`, `default` and `name` fields.
+3. Give new values to each variable in the `variables` section.
+4. Build hydrogen.
+
+## Creating your own theme collection in Hydrogen
+If a theme variant does not solve your needs, you can create a new theme collection with a different base `theme.css` file.
+1. Create a directory for your new theme-collection under `src/platform/web/ui/css/themes/`.
+2. Create `manifest.json` and `theme.css` files within the newly created directory.
+3. Populate `manifest.json` with the base css variables you wish to use.
+4. Write styles in your `theme.css` file using the base variables, derived variables and colorized svg icons.
+5. Tell the build system where to find this theme-collection by providing the location of this directory to the `themeBuilder` plugin in `vite.config.js`:
+```json=
+...
+themeBuilder({
+    themeConfig: {
+        themes: {
+            element: "./src/platform/web/ui/css/themes/element",
+            awesome: "path/to/theme-directory"
+        },
+        default: "element",
+    },
+    compiledVariables,
+}),
+...
+```
+6. Build Hydrogen.
+
+## Changing the default theme
+To change the default theme used in Hydrogen, modify the `defaultTheme` field in `config.json` file (which can be found in the build output):
+```json=
+"defaultTheme": {
+    "light": theme-id,
+    "dark": theme-id
+}
+```
+
+Here *theme-id* is of the form `theme-variant` where `theme` is the key used when specifying the manifest location of the theme collection in `vite.config.js` and `variant` is the key used in variants section of the manifest.
+
+Some examples of theme-ids are `element-dark` and `element-light`.  
+
+To find the theme-id of some theme, you can look at the built-asset section of the manifest in the build output.
+
+This default theme will render as "Default" option in the theme-chooser dropdown. If the device preference is for dark theme, the dark default is selected and vice versa.
+
+**You'll need to reload twice so that Hydrogen picks up the config changes!**
+
+# Derived Theme(Collection)
+This allows users to theme Hydrogen without the need for rebuilding. Derived theme collections can be thought of as extensions (derivations) of some existing build time theme. 
+
+## Creating a derived theme:
+Here's how you create a new derived theme:
+1. You create a new theme manifest file (eg: theme-awesome.json) and mention which build time theme you're basing your new theme on using the `extends` field. The base css file of the mentioned theme is used for your new theme.
+2. You configure the theme manifest as usual by populating the `variants` field with your desired colors.
+3. You add your new theme manifest to the list of themes in `config.json`.
+
+Refresh Hydrogen twice (once to refresh cache, and once to load) and the new theme should show up in the theme chooser.
+
+## How does it work?
+
+For every theme collection in hydrogen, the build process emits a runtime css file which like the built theme css file contains variables in the css code. But unlike the theme css file, the runtime css file lacks the definition for these variables:
+
+CSS for the built theme:
+```css
+:root {
+    --background-color-primary: #f2f20f;
+}
+
+body {
+    background-color: var(--background-color-primary);
+}
+```
+and the corresponding runtime theme:
+```css
+/* Notice the lack of definiton for --background-color-primary here! */
+body {
+    background-color: var(--background-color-primary);
+}
+```
+
+When hydrogen loads a derived theme, it takes the runtime css file of the extended theme and dynamically adds the variable definition based on the values specified in the manifest. Icons are also colored dynamically and injected as variables using Data URIs.

doc/UI/ui.md

@@ -0,0 +1,206 @@
+## IView components
+
+The [interface](https://github.com/vector-im/hydrogen-web/blob/master/src/platform/web/ui/general/types.ts) adopted by view components is agnostic of how they are rendered to the DOM. This has several benefits:
+ - it allows Hydrogen to not ship a [heavy view framework](https://bundlephobia.com/package/react-dom@18.2.0) that may or may not be used by its SDK users, and also keep bundle size of the app down.
+ - Given the interface is quite simple, is should be easy to integrate this interface into the render lifecycle of other frameworks.
+ - The main implementations used in Hydrogen are [`ListView`](https://github.com/vector-im/hydrogen-web/blob/master/src/platform/web/ui/general/ListView.ts) (rendering [`ObservableList`](https://github.com/vector-im/hydrogen-web/blob/master/src/observable/list/BaseObservableList.ts)s) and [`TemplateView`](https://github.com/vector-im/hydrogen-web/blob/master/src/platform/web/ui/general/TemplateView.ts) (templating and one-way databinding), each only a few 100 lines of code and tailored towards their specific use-case. They work straight with the DOM API and have no other dependencies.
+ - a common inteface allows us to mix and match between these different implementations (and gradually shift if need be in the future) with the code.
+
+## Templates
+
+### Template language
+
+Templates use a mini-DSL language in pure javascript to express declarative templates. This is basically a very thin wrapper around `document.createElement`, `document.createTextNode`, `node.setAttribute` and `node.appendChild` to quickly create DOM trees. The general syntax is as follows:
+```js
+t.tag_name({attribute1: value, attribute2: value, ...}, [child_elements]);
+t.tag_name(child_element);
+t.tag_name([child_elements]);
+```
+**tag_name** can be [most HTML or SVG tags](https://github.com/vector-im/hydrogen-web/blob/master/src/platform/web/ui/general/html.ts#L102-L110).
+
+eg:
+Here is an example HTML segment followed with the code to create it in Hydrogen.
+```html
+<section class="main-section">
+    <h1>Demo</h1>
+    <button class="btn_cool">Click me</button>
+</section>
+```
+```js
+t.section({className: "main-section"},[
+    t.h1("Demo"), 
+    t.button({className:"btn_cool"}, "Click me")
+]);
+```
+
+All these functions return DOM element nodes, e.g. the result of `document.createElement`.
+
+### TemplateView
+
+`TemplateView` builds on top of templating by adopting the IView component model and adding event handling attributes, sub views and one-way databinding.
+In views based on `TemplateView`, you will see a render method with a `t` argument.  
+`t` is `TemplateBuilder` object passed to the render function in `TemplateView`. It also takes a data object to render and bind to, often called `vm`, short for view model from the MVVM pattern Hydrogen uses.
+
+You either subclass `TemplateView` and override the `render` method:
+```js
+class MyView extends TemplateView {
+    render(t, vm) {
+        return t.div(...);
+    }
+}
+```
+
+Or you pass a render function to `InlineTemplateView`:
+```js
+new InlineTemplateView(vm, (t, vm) => {
+    return t.div(...);
+});
+```
+
+**Note:** the render function is only called once to build the initial DOM tree and setup bindings, etc ... Any subsequent updates to the DOM of a component happens through bindings.
+
+#### Event handlers
+
+Any attribute starting with `on` and having a function as a value will be attached as an event listener on the given node. The event handler will be removed during unmounting.
+
+```js
+t.button({onClick: evt => {
+    vm.doSomething(evt.target.value);
+}}, "Click me");
+```
+
+#### Subviews
+
+`t.view(instance)` will mount the sub view (can be any IView) and return its root node so it can be attached in the DOM tree.
+All subviews will be unmounted when the parent view gets unmounted.
+
+```js
+t.div({className: "Container"}, t.view(new ChildView(vm.childViewModel)));
+```
+
+#### One-way data-binding
+
+A binding couples a part of the DOM to a value on the view model. The view model emits an update when any of its properties change, to which the view can subscribe. When an update is received by the view, it will reevaluate all the bindings, and update the DOM accordingly.
+
+A binding can appear in many places where a static value can usually be used in the template tree.
+To create a binding, you pass a function that maps the view value to a static value.
+
+##### Text binding
+
+```js
+t.p(["I've got ", vm => vm.counter, " beans"])
+```
+
+##### Attribute binding
+
+```js
+t.button({disabled: vm => vm.isBusy}, "Submit");
+```
+
+##### Class-name binding
+```js
+t.div({className: {
+    button: true,
+    active: vm => vm.isActive
+}})
+```
+##### Subview binding
+
+So far, all the bindings can only change node values within our tree, but don't change the structure of the DOM. A sub view binding allows you to conditionally add a subview based on the result of a binding function.
+
+All sub view bindings return a DOM (element or comment) node and can be directly added to the DOM tree by including them in your template.
+
+###### map
+
+`t.mapView` allows you to choose a view based on the result of the binding function:
+
+```js
+t.mapView(vm => vm.count, count => {
+    return count > 5 ? new LargeView(count) : new SmallView(count);
+});
+```
+
+Every time the first or binding function returns a different value, the second function is run to create a new view to replace the previous view.
+
+You can also return `null` or `undefined` from the second function to indicate a view should not be rendered. In this case a comment node will be used as a placeholder.
+
+There is also a `t.map` which will create a new template view (with the same value) and you directly provide a render function for it:
+
+```js
+t.map(vm => vm.shape, (shape, t, vm) => {
+    switch (shape) {
+        case "rect": return t.rect();
+        case "circle": return t.circle();
+    }
+})
+```
+
+###### if
+
+`t.ifView` will render the subview if the binding returns a truthy value:
+
+```js
+t.ifView(vm => vm.isActive, vm => new View(vm.someValue));
+```
+
+You equally have `t.if`, which creates a `TemplateView` and passes you the `TemplateBuilder`:
+
+```js
+t.if(vm => vm.isActive, (t, vm) => t.div("active!"));
+```
+
+##### Side-effects
+
+Sometimes you want to imperatively modify your DOM tree based on the value of a binding.
+`mapSideEffect` makes this easy to do:
+
+```js
+let node = t.div();
+t.mapSideEffect(vm => vm.color, (color, oldColor) => node.style.background = color);
+return node;
+```
+
+**Note:** you shouldn't add any bindings, subviews or event handlers from the side-effect callback,
+the safest is to not use the `t` argument at all.
+If you do, they will be added every time the callback is run and only cleaned up when the view is unmounted.
+
+#### `tag` vs `t`
+
+If you don't need a view component with data-binding, sub views and event handler attributes, the template language also is available in `ui/general/html.js` without any of these bells and whistles, exported as `tag`. As opposed to static templates with `tag`, you always use
+`TemplateView` as an instance of a class, as there is some extra state to keep track (bindings, event handlers and subviews).
+
+Although syntactically similar, `TemplateBuilder` and `tag` are not functionally equivalent.  
+Primarily `t` **supports** bindings and event handlers while `tag` **does not**. This is because to remove event listeners, we need to keep track of them, and thus we need to keep this state somewhere which
+we can't do with a simple function call but we can insite the TemplateView class.
+
+```js
+    // The onClick here wont work!!
+    tag.button({className:"awesome-btn", onClick: () => this.foo()});
+
+class MyView extends TemplateView {
+    render(t, vm){
+        // The onClick works here.
+        t.button({className:"awesome-btn", onClick: () => this.foo()});
+    }
+}
+```
+
+## ListView
+
+A view component that renders and updates a list of sub views for every item in a `ObservableList`.
+
+```js
+const list = new ListView({
+    list: someObservableList
+}, listValue => return new ChildView(listValue))
+```
+
+As items are added, removed, moved (change position) and updated, the DOM will be kept in sync.
+
+There is also a `LazyListView` that only renders items in and around the current viewport, with the restriction that all items in the list must be rendered with the same height.
+
+### Sub view updates
+
+Unless the `parentProvidesUpdates` option in the constructor is set to `false`, the ListView will call the `update` method on the child `IView` component when it receives an update event for one of the items in the `ObservableList`.
+
+This way, not every sub view has to have an individual listener on it's view model (a value from the observable list), and all updates go from the observable list to the list view, who then notifies the correct sub view.

package.json

@@ -1,18 +1,24 @@
 {
   "name": "hydrogen-web",
-  "version": "0.2.26",
+  "version": "0.3.1",
   "description": "A javascript matrix client prototype, trying to minize RAM usage by offloading as much as possible to IndexedDB",
   "directories": {
     "doc": "doc"
   },
+  "enginesStrict": {
+    "node": ">=15"
+  },
   "scripts": {
     "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 src/platform/web/Platform.js --force-esm-dirs lib/ src/ --root-dir src/",
+    "test:postcss": "impunity --entry-point  scripts/postcss/tests/css-compile-variables.test.js scripts/postcss/tests/css-url-to-variables.test.js",
+    "test:sdk": "yarn build:sdk && cd ./scripts/sdk/test/ && yarn --no-lockfile && node test-sdk-in-esm-vite-build-env.js && node test-sdk-in-commonjs-env.js",
     "start": "vite --port 3000",
-    "build": "vite build",
-    "build:sdk": "./scripts/sdk/build.sh"
+    "build": "vite build && ./scripts/cleanup.sh",
+    "build:sdk": "./scripts/sdk/build.sh",
+    "watch:sdk": "./scripts/sdk/build.sh && yarn run vite build -c vite.sdk-lib-config.js --watch"
   },
   "repository": {
     "type": "git",
@@ -30,6 +36,7 @@
     "acorn": "^8.6.0",
     "acorn-walk": "^8.2.0",
     "aes-js": "^3.1.2",
+    "bs58": "^4.0.1",
     "core-js": "^3.6.5",
     "es6-promise": "https://github.com/bwindels/es6-promise.git#bwindels/expose-flush",
     "escodegen": "^2.0.0",
@@ -41,17 +48,19 @@
     "node-html-parser": "^4.0.0",
     "postcss-css-variables": "^0.18.0",
     "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-value-parser": "^4.2.0",
     "regenerator-runtime": "^0.13.7",
+    "svgo": "^2.8.0",
     "text-encoding": "^0.7.0",
-    "typescript": "^4.3.5",
-    "vite": "^2.6.14",
-    "xxhashjs": "^0.2.2",
-    "bs58": "^4.0.1"
+    "typescript": "^4.7.0",
+    "vite": "^2.9.8",
+    "xxhashjs": "^0.2.2"
   },
   "dependencies": {
-    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.3.tgz",
+    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
     "another-json": "^0.2.0",
     "base64-arraybuffer": "^0.2.0",
-    "dompurify": "^2.3.0"
+    "dompurify": "^2.3.0",
+    "off-color": "^2.0.0"
   }
 }

scripts/.eslintrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+    "env": {
+        "node": true,
+        "es6": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaVersion": 2020,
+        "sourceType": "module"
+    },
+    "rules": {
+        "no-console": "off",
+        "no-empty": "off",
+        "no-prototype-builtins": "off",
+        "no-unused-vars": "warn"
+    },
+};
+

scripts/build-plugins/rollup-plugin-build-themes.js

@@ -0,0 +1,376 @@
+/*
+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.
+*/
+const path = require('path').posix;
+const {optimize} = require('svgo');
+
+async function readCSSSource(location) {
+    const fs = require("fs").promises;
+    const resolvedLocation = path.resolve(__dirname, "../../", `${location}/theme.css`);
+    const data = await fs.readFile(resolvedLocation);
+    return data;
+}
+
+function getRootSectionWithVariables(variables) {
+    return `:root{\n${Object.entries(variables).reduce((acc, [key, value]) => acc + `--${key}: ${value};\n`, "")} }\n\n`;
+}
+
+function appendVariablesToCSS(variables, cssSource) {
+    return cssSource + getRootSectionWithVariables(variables);
+}
+
+function addThemesToConfig(bundle, manifestLocations, defaultThemes) {
+    for (const [fileName, info] of Object.entries(bundle)) {
+        if (fileName === "config.json") {
+            const source = new TextDecoder().decode(info.source);
+            const config = JSON.parse(source);
+            config["themeManifests"] = manifestLocations;
+            config["defaultTheme"] = defaultThemes;
+            info.source = new TextEncoder().encode(JSON.stringify(config, undefined, 2));
+        }
+    }
+}
+
+/**
+ * Returns an object where keys are the svg file names and the values
+ * are the svg code (optimized)
+ * @param {*} icons Object where keys are css variable names and values are locations of the svg
+ * @param {*} manifestLocation Location of manifest used for resolving path 
+ */
+async function generateIconSourceMap(icons, manifestLocation) {
+    const sources = {};
+    const fileNames = [];
+    const promises = [];
+    const fs = require("fs").promises;
+    for (const icon of Object.values(icons)) {
+        const [location] = icon.split("?");
+        // resolve location against manifestLocation
+        const resolvedLocation = path.resolve(manifestLocation, location);
+        const iconData = fs.readFile(resolvedLocation);
+        promises.push(iconData);
+        const fileName = path.basename(resolvedLocation);
+        fileNames.push(fileName);
+    }
+    const results = await Promise.all(promises);
+    for (let i = 0; i < results.length; ++i)  {
+        const svgString = results[i].toString();
+        const result = optimize(svgString, {
+            plugins: [
+                {
+                    name: "preset-default",
+                    params: {
+                        overrides: { convertColors: false, },
+                    },
+                },
+            ],
+        });
+        const optimizedSvgString = result.data;
+        sources[fileNames[i]] = optimizedSvgString;
+    }
+    return sources;
+}
+
+/**
+ * Returns a mapping from location (of manifest file) to an array containing all the chunks (of css files) generated from that location.
+ * To understand what chunk means in this context, see https://rollupjs.org/guide/en/#generatebundle.
+ * @param {*} bundle Mapping from fileName to AssetInfo | ChunkInfo
+ */
+function getMappingFromLocationToChunkArray(bundle) {
+    const chunkMap = new Map();
+    for (const [fileName, info] of Object.entries(bundle)) {
+        if (!fileName.endsWith(".css") || info.type === "asset" || info.facadeModuleId?.includes("type=runtime")) {
+            continue;
+        }
+        const location = info.facadeModuleId?.match(/(.+)\/.+\.css/)?.[1];
+        if (!location) {
+            throw new Error("Cannot find location of css chunk!");
+        }
+        const array = chunkMap.get(location);
+        if (!array) {
+            chunkMap.set(location, [info]);
+        }
+        else {
+            array.push(info);
+        }
+    }
+    return chunkMap;
+}
+
+/**
+ * Returns a mapping from unhashed file name (of css files) to AssetInfo.
+ * To understand what AssetInfo means in this context, see https://rollupjs.org/guide/en/#generatebundle.
+ * @param {*} bundle Mapping from fileName to AssetInfo | ChunkInfo 
+ */
+function getMappingFromFileNameToAssetInfo(bundle) {
+    const assetMap = new Map();
+    for (const [fileName, info] of Object.entries(bundle)) {
+        if (!fileName.endsWith(".css")) {
+            continue;
+        }
+        if (info.type === "asset") {
+            /**
+             * So this is the css assetInfo that contains the asset hashed file name.
+             * We'll store it in a separate map indexed via fileName (unhashed) to avoid
+             * searching through the bundle array later.
+             */
+            assetMap.set(info.name, info);
+        }
+    }
+    return assetMap;
+}
+
+/**
+ * Returns a mapping from location (of manifest file) to ChunkInfo of the runtime css asset
+ * To understand what ChunkInfo means in this context, see https://rollupjs.org/guide/en/#generatebundle.
+ * @param {*} bundle Mapping from fileName to AssetInfo | ChunkInfo
+ */
+function getMappingFromLocationToRuntimeChunk(bundle) {
+    let runtimeThemeChunkMap = new Map();
+    for (const [fileName, info] of Object.entries(bundle)) {
+        if (!fileName.endsWith(".css") || info.type === "asset") {
+            continue;
+        }
+        const location = info.facadeModuleId?.match(/(.+)\/.+\.css/)?.[1];
+        if (!location) {
+            throw new Error("Cannot find location of css chunk!");
+        }
+        if (info.facadeModuleId?.includes("type=runtime")) {
+            /**
+             * We have a separate field in manifest.source just for the runtime theme,
+             * so store this separately.
+             */
+            runtimeThemeChunkMap.set(location, info);
+        }
+    }
+    return runtimeThemeChunkMap;
+}
+
+module.exports = function buildThemes(options) {
+    let manifest, variants, defaultDark, defaultLight, defaultThemes = {};
+    let isDevelopment = false;
+    const virtualModuleId = '@theme/'
+    const resolvedVirtualModuleId = '\0' + virtualModuleId;
+    const themeToManifestLocation = new Map();
+
+    return {
+        name: "build-themes",
+        enforce: "pre",
+
+        configResolved(config) {
+            if (config.command === "serve") {
+                isDevelopment = true;
+            }
+        },
+
+        async buildStart() {
+            const { themeConfig } = options;
+            for (const location of themeConfig.themes) {
+                manifest = require(`${location}/manifest.json`);
+                const themeCollectionId = manifest.id;
+                themeToManifestLocation.set(themeCollectionId, location);
+                variants = manifest.values.variants;
+                for (const [variant, details] of Object.entries(variants)) {
+                    const fileName = `theme-${themeCollectionId}-${variant}.css`;
+                    if (themeCollectionId === themeConfig.default && details.default) {
+                        // This is the default theme, stash  the file name for later
+                        if (details.dark) {
+                            defaultDark = fileName;
+                            defaultThemes["dark"] = `${themeCollectionId}-${variant}`;
+                        }
+                        else {
+                            defaultLight = fileName;
+                            defaultThemes["light"] = `${themeCollectionId}-${variant}`;
+                        }
+                    }
+                    // emit the css as built theme bundle
+                    if (!isDevelopment) {
+                        this.emitFile({ type: "chunk", id: `${location}/theme.css?variant=${variant}${details.dark ? "&dark=true" : ""}`, fileName, });
+                    }
+                }
+                // emit the css as runtime theme bundle
+                if (!isDevelopment) {
+                    this.emitFile({ type: "chunk", id: `${location}/theme.css?type=runtime`, fileName: `theme-${themeCollectionId}-runtime.css`, });
+                }
+            }
+        },
+
+        resolveId(id) {
+            if (id.startsWith(virtualModuleId)) {
+                return '\0' + id;
+            }
+        },
+
+        async load(id) {
+            if (isDevelopment) {
+                /**
+                 * To load the theme during dev, we need to take a different approach because emitFile is not supported in dev.
+                 * We solve this by resolving virtual file "@theme/name/variant" into the necessary css import.
+                 * This virtual file import is removed when hydrogen is built (see transform hook).
+                 */
+                if (id.startsWith(resolvedVirtualModuleId)) {
+                    let [theme, variant, file] = id.substr(resolvedVirtualModuleId.length).split("/");
+                    if (theme === "default") {
+                        theme = options.themeConfig.default;
+                    }
+                    const location = themeToManifestLocation.get(theme);
+                    const manifest = require(`${location}/manifest.json`);
+                    const variants = manifest.values.variants;
+                    if (!variant || variant === "default") {
+                        // choose the first default variant for now
+                        // this will need to support light/dark variants as well
+                        variant = Object.keys(variants).find(variantName => variants[variantName].default);
+                    }
+                    if (!file) {
+                        file = "index.js";
+                    }
+                    switch (file) {
+                        case "index.js": {
+                            const isDark = variants[variant].dark;
+                            return `import "${path.resolve(`${location}/theme.css`)}${isDark? "?dark=true": ""}";` +
+                                `import "@theme/${theme}/${variant}/variables.css"`;
+                        }
+                        case "variables.css": { 
+                            const variables = variants[variant].variables;
+                            const css =  getRootSectionWithVariables(variables);
+                            return css;
+                        }
+                    }
+                }
+            }
+            else {
+                const result = id.match(/(.+)\/theme.css\?variant=([^&]+)/);
+                if (result) {
+                    const [, location, variant] = result;
+                    const cssSource = await readCSSSource(location);
+                    const config = variants[variant];
+                    return appendVariablesToCSS(config.variables, cssSource);
+                }
+                return null;
+            }
+        },
+
+        transform(code, id) {
+            if (isDevelopment) {
+                return;
+            }
+            /**
+             * Removes develop-only script tag; this cannot be done in transformIndexHtml hook because
+             * by the time that hook runs, the import is added to the bundled js file which would
+             * result in a runtime error.
+             */
+
+            const devScriptTag =
+                /<script type="module"> import "@theme\/.+"; <\/script>/;
+            if (id.endsWith("index.html")) {
+                const htmlWithoutDevScript = code.replace(devScriptTag, "");
+                return htmlWithoutDevScript;
+            }
+        },
+
+        transformIndexHtml(_, ctx) {
+            if (isDevelopment) {
+                // Don't add default stylesheets to index.html on dev
+                return;
+            } 
+            let darkThemeLocation, lightThemeLocation;
+            for (const [, bundle] of Object.entries(ctx.bundle)) {
+                if (bundle.name === defaultDark) {
+                    darkThemeLocation = bundle.fileName;
+                }
+                if (bundle.name === defaultLight) {
+                    lightThemeLocation = bundle.fileName;
+                }
+            }
+            return [
+                {
+                    tag: "link",
+                    attrs: {
+                        rel: "stylesheet",
+                        type: "text/css",
+                        media: "(prefers-color-scheme: dark)",
+                        href: `./${darkThemeLocation}`,
+                        class: "theme",
+                    }
+                },
+                {
+                    tag: "link",
+                    attrs: {
+                        rel: "stylesheet",
+                        type: "text/css",
+                        media: "(prefers-color-scheme: light)",
+                        href: `./${lightThemeLocation}`,
+                        class: "theme",
+                    }
+                },
+            ];
+},
+
+        async generateBundle(_, bundle) {
+            const assetMap = getMappingFromFileNameToAssetInfo(bundle);
+            const chunkMap = getMappingFromLocationToChunkArray(bundle);
+            const runtimeThemeChunkMap = getMappingFromLocationToRuntimeChunk(bundle);
+            const manifestLocations = [];
+            // Location of the directory containing manifest relative to the root of the build output
+            const manifestLocation = "assets";
+            for (const [location, chunkArray] of chunkMap) {
+                const manifest = require(`${location}/manifest.json`);
+                const compiledVariables = options.compiledVariables.get(location);
+                const derivedVariables = compiledVariables["derived-variables"];
+                const icon = compiledVariables["icon"];
+                const builtAssets = {};
+                let themeKey;
+                for (const chunk of chunkArray) {
+                    const [, name, variant] = chunk.fileName.match(/theme-(.+)-(.+)\.css/);
+                    themeKey = name;
+                    const locationRelativeToBuildRoot = assetMap.get(chunk.fileName).fileName;
+                    const locationRelativeToManifest = path.relative(manifestLocation, locationRelativeToBuildRoot);
+                    builtAssets[`${name}-${variant}`] = locationRelativeToManifest;
+                }
+                // Emit the base svg icons as asset
+                const nameToAssetHashedLocation = [];
+                const nameToSource = await generateIconSourceMap(icon, location);
+                for (const [name, source] of Object.entries(nameToSource)) {
+                    const ref = this.emitFile({ type: "asset", name, source });
+                    const assetHashedName = this.getFileName(ref);
+                    nameToAssetHashedLocation[name] = assetHashedName;
+                }
+                // Update icon section in output manifest with paths to the icon in build output 
+                for (const [variable, location] of Object.entries(icon)) {
+                    const [locationWithoutQueryParameters, queryParameters] = location.split("?");
+                    const name = path.basename(locationWithoutQueryParameters);
+                    const locationRelativeToBuildRoot = nameToAssetHashedLocation[name];
+                    const locationRelativeToManifest = path.relative(manifestLocation, locationRelativeToBuildRoot);
+                    icon[variable] = `${locationRelativeToManifest}?${queryParameters}`;
+                }
+                const runtimeThemeChunk = runtimeThemeChunkMap.get(location);
+                const runtimeAssetLocation = path.relative(manifestLocation, assetMap.get(runtimeThemeChunk.fileName).fileName); 
+                manifest.source = {
+                    "built-assets": builtAssets,
+                    "runtime-asset": runtimeAssetLocation,
+                    "derived-variables": derivedVariables,
+                    "icon": icon,
+                };
+                const name = `theme-${themeKey}.json`;
+                manifestLocations.push(`${manifestLocation}/${name}`);
+                this.emitFile({
+                    type: "asset",
+                    name,
+                    source: JSON.stringify(manifest),
+                });
+            }
+            addThemesToConfig(bundle, manifestLocations, defaultThemes);
+        },
+    }
+}

scripts/build-plugins/service-worker.js

@@ -8,7 +8,7 @@ function contentHash(str) {
     return hasher.digest();
 }
 
-function injectServiceWorker(swFile, otherUnhashedFiles, placeholdersPerChunk) {
+function injectServiceWorker(swFile, findUnhashedFileNamesFromBundle, placeholdersPerChunk) {
     const swName = path.basename(swFile);
     let root;
     let version;
@@ -31,6 +31,7 @@ function injectServiceWorker(swFile, otherUnhashedFiles, placeholdersPerChunk) {
             logger = config.logger;
         },
         generateBundle: async function(options, bundle) {
+            const otherUnhashedFiles = findUnhashedFileNamesFromBundle(bundle);
             const unhashedFilenames = [swName].concat(otherUnhashedFiles);
             const unhashedFileContentMap = unhashedFilenames.reduce((map, fileName) => {
                 const chunkOrAsset = bundle[fileName];

scripts/ci.sh

@@ -0,0 +1,165 @@
+#!/bin/bash
+# ci.sh: Helper script to automate deployment operations on CI/CD
+# Copyright © 2022 Aravinth Manivannan <realaravinth@batsense.net>
+# 
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as
+# published by the Free Software Foundation, either version 3 of the
+# License, or (at your option) any later version.
+# 
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+# 
+# You should have received a copy of the GNU Affero General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+set -xEeuo  pipefail
+#source $(pwd)/scripts/lib.sh
+
+readonly SSH_ID_FILE=/tmp/ci-ssh-id
+readonly SSH_REMOTE_NAME=origin-ssh
+readonly PROJECT_ROOT=$(pwd)
+
+match_arg() {
+    if [ $1 == $2 ] || [ $1 == $3 ]
+    then
+        return 0
+    else
+        return 1
+    fi
+}
+
+help() {
+	cat << EOF
+USAGE: ci.sh [SUBCOMMAND]
+Helper script to automate deployment operations on CI/CD
+
+Subcommands
+
+  -c  --clean	cleanup secrets, SSH key and other runtime data
+  -i  --init <SSH_PRIVATE_KEY>	initialize environment, write SSH private to file
+  -d  --deploy <PAGES-SECRET> <TARGET BRANCH>	push branch to Gitea and call Pages server
+  -h  --help	print this help menu
+EOF
+}
+
+# $1: SSH private key
+write_ssh(){
+	truncate --size 0 $SSH_ID_FILE
+	echo "$1" > $SSH_ID_FILE
+	chmod 600 $SSH_ID_FILE
+}
+
+set_ssh_remote() {
+	http_remote_url=$(git remote get-url origin)
+	remote_hostname=$(echo $http_remote_url | cut -d '/' -f 3) 
+	repository_owner=$(echo $http_remote_url | cut -d '/' -f 4)
+	repository_name=$(echo $http_remote_url | cut -d '/' -f 5)
+	ssh_remote="git@$remote_hostname:$repository_owner/$repository_name"
+	ssh_remote="git@git.batsense.net:mystiq/hydrogen-web.git"
+	git remote add $SSH_REMOTE_NAME $ssh_remote
+}
+
+clean() {
+	if [ -f $SSH_ID_FILE ]
+	then
+		shred $SSH_ID_FILE
+		rm $SSH_ID_FILE
+	fi
+}
+
+# $1: branch name
+# $2: directory containing build assets
+# $3: Author in <author-name author@example.com> format
+commit_files() {
+	cd $PROJECT_ROOT
+	original_branch=$(git branch --show-current)
+	tmp_dir=$(mktemp -d)
+	cp -r $2/* $tmp_dir
+
+	if [[ -z $(git ls-remote --heads origin ${1}) ]]
+	then
+		echo "[*] Creating deployment branch $1"
+		git checkout --orphan $1
+	else
+		echo "[*] Deployment branch $1 exists, pulling changes from remote"
+		git fetch origin $1
+		git switch $1 
+	fi
+
+	git rm -rf .
+	/bin/rm -rf *
+	cp -r $tmp_dir/* .
+	git add --all
+	if [ $(git status --porcelain | xargs | sed '/^$/d' | wc -l) -gt 0 ];
+	then
+		echo "[*] Repository has changed, committing changes"
+		git commit \
+			--author="$3" \
+			--message="new deploy: $(date --iso-8601=seconds)"
+	fi
+	git checkout $original_branch
+}
+
+# $1: Pages API secret
+# $2: Deployment target branch
+deploy() {
+	if (( "$#" < 2 ))
+	then
+		help
+	else
+		git -c core.sshCommand="/usr/bin/ssh -oStrictHostKeyChecking=no -i $SSH_ID_FILE"\
+			push --force  $SSH_REMOTE_NAME $2
+		curl -vv --location --request \
+				POST "https://deploy.batsense.net/api/v1/update"\
+				--header 'Content-Type: application/json' \
+				--data-raw "{ \"secret\": \"$1\", \"branch\": \"$2\" }"
+	fi
+}
+
+if (( "$#" < 1 ))
+then
+	help
+	exit -1
+fi
+
+
+if match_arg $1 '-i' '--init'
+then
+	if (( "$#" < 2 ))
+	then
+		help
+		exit -1
+	fi
+	set_ssh_remote
+	write_ssh "$2"
+elif match_arg $1 '-c' '--clean'
+then
+	clean
+elif match_arg $1 '-cf' '--commit-files'
+then
+	if (( "$#" < 4 ))
+	then
+		help
+		exit -1
+	fi
+    commit_files $2 $3 $4
+elif match_arg $1 '-d' '--deploy'
+then
+	if (( "$#" < 3 ))
+	then
+		help
+		exit -1
+	fi
+	deploy $2 $3
+elif match_arg $1 '-h' '--help'
+then
+	help
+else
+	help
+fi
+
+
+

scripts/cleanup.sh

@@ -0,0 +1,3 @@
+#!/bin/sh
+# Remove icons created in .tmp
+rm -rf .tmp

scripts/package.sh

@@ -2,6 +2,9 @@ VERSION=$(jq -r ".version" package.json)
 PACKAGE=hydrogen-web-$VERSION.tar.gz
 yarn build
 pushd target
+# move config file so we don't override it
+# when deploying a new version
+mv config.json config.sample.json
 tar -czvf ../$PACKAGE ./
 popd
 echo $PACKAGE

scripts/postcss/css-compile-variables.js

@@ -0,0 +1,180 @@
+/*
+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.
+*/
+
+const valueParser = require("postcss-value-parser");
+
+/**
+ * This plugin derives new css variables from a given set of base variables.
+ * A derived css variable has the form --base--operation-argument; meaning that the derived
+ * variable has a value that is generated from the base variable "base" by applying "operation"
+ * with given "argument".
+ * 
+ * eg: given the base variable --foo-color: #40E0D0, --foo-color--darker-20 is a css variable
+ * derived from foo-color by making it 20% more darker.
+ * 
+ * All derived variables are added to the :root section.
+ * 
+ * The actual derivation is done outside the plugin in a callback.
+ */
+
+function getValueFromAlias(alias, {aliasMap, baseVariables, resolvedMap}) {
+    const derivedVariable = aliasMap.get(alias);
+    return baseVariables.get(derivedVariable) ?? resolvedMap.get(derivedVariable);
+}
+
+function parseDeclarationValue(value) {
+    const parsed = valueParser(value);
+    const variables = [];
+    parsed.walk(node => {
+        if (node.type !== "function") {
+            return;
+        }
+        switch (node.value) {
+            case "var": {
+                const variable = node.nodes[0];
+                variables.push(variable.value);
+                break;
+            }
+            case "url": {
+                const url = node.nodes[0].value;
+                // resolve url with some absolute url so that we get the query params without using regex
+                const params = new URL(url, "file://foo/bar/").searchParams;
+                const primary = params.get("primary");
+                const secondary = params.get("secondary");
+                if (primary) { variables.push(primary); }
+                if (secondary) { variables.push(secondary); }
+                break;
+            }
+        }
+    });
+    return variables;
+}
+
+function resolveDerivedVariable(decl, derive, maps, isDark) {
+    const { baseVariables, resolvedMap } = maps;
+    const RE_VARIABLE_VALUE = /(?:--)?((.+)--(.+)-(.+))/;
+    const variableCollection = parseDeclarationValue(decl.value);
+    for (const variable of variableCollection) {
+        const matches = variable.match(RE_VARIABLE_VALUE);
+        if (matches) {
+            const [, wholeVariable, baseVariable, operation, argument] = matches;
+            const value = baseVariables.get(baseVariable) ?? getValueFromAlias(baseVariable, maps);
+            if (!value) {
+                throw new Error(`Cannot derive from ${baseVariable} because it is neither defined in config nor is it an alias!`);
+            }
+            const derivedValue = derive(value, operation, argument, isDark);
+            resolvedMap.set(wholeVariable, derivedValue);
+        }
+    }
+}
+
+function extract(decl, {aliasMap, baseVariables}) {
+    if (decl.variable) {
+        // see if right side is of form "var(--foo)"
+        const wholeVariable = decl.value.match(/var\(--(.+)\)/)?.[1];
+        // remove -- from the prop
+        const prop = decl.prop.substring(2);
+        if (wholeVariable) {
+            aliasMap.set(prop, wholeVariable);
+            // Since this is an alias, we shouldn't store it in baseVariables
+            return;
+        }
+        baseVariables.set(prop, decl.value);
+    }
+}
+
+function addResolvedVariablesToRootSelector(root, {Rule, Declaration}, {resolvedMap}) {
+    const newRule = new Rule({ selector: ":root", source: root.source });
+    // Add derived css variables to :root
+    resolvedMap.forEach((value, key) => {
+        const declaration = new Declaration({prop: `--${key}`, value});
+        newRule.append(declaration);
+    });
+    root.append(newRule);
+}
+
+function populateMapWithDerivedVariables(map, cssFileLocation, {resolvedMap, aliasMap}) {
+    const location = cssFileLocation.match(/(.+)\/.+\.css/)?.[1];
+    const derivedVariables = [
+        ...([...resolvedMap.keys()].filter(v => !aliasMap.has(v))),
+        ...([...aliasMap.entries()].map(([alias, variable]) => `${alias}=${variable}`))
+    ];
+    const sharedObject = map.get(location);
+    const output = { "derived-variables": derivedVariables };
+    if (sharedObject) {
+        Object.assign(sharedObject, output);
+    }
+    else {
+        map.set(location, output);
+    }
+}
+
+/**
+ * @callback derive
+ * @param {string} value - The base value on which an operation is applied
+ * @param {string} operation - The operation to be applied (eg: darker, lighter...)
+ * @param {string} argument - The argument for this operation
+ * @param {boolean} isDark - Indicates whether this theme is dark
+ */
+/**
+ * 
+ * @param {Object} opts - Options for the plugin
+ * @param {derive} opts.derive - The callback which contains the logic for resolving derived variables
+ * @param {Map} opts.compiledVariables - A map that stores derived variables so that manifest source sections can be produced
+ */
+module.exports = (opts = {}) => {
+    const aliasMap = new Map();
+    const resolvedMap = new Map();
+    const baseVariables = new Map();
+    const maps = { aliasMap, resolvedMap, baseVariables };
+
+    return {
+        postcssPlugin: "postcss-compile-variables",
+
+        Once(root, {Rule, Declaration, result}) {
+            const cssFileLocation = root.source.input.from;
+            if (cssFileLocation.includes("type=runtime")) {
+                // If this is a runtime theme, don't derive variables.
+                return;
+            }
+            const isDark = cssFileLocation.includes("dark=true");
+            /*
+            Go through the CSS file once to extract all aliases and base variables.
+            We use these when resolving derived variables later.
+            */
+            root.walkDecls(decl => extract(decl, maps));
+            root.walkDecls(decl => resolveDerivedVariable(decl, opts.derive, maps, isDark));
+            addResolvedVariablesToRootSelector(root, {Rule, Declaration}, maps);
+            if (opts.compiledVariables){
+                populateMapWithDerivedVariables(opts.compiledVariables, cssFileLocation, maps);
+            }
+            // Also produce a mapping from alias to completely resolved color
+            const resolvedAliasMap = new Map();
+            aliasMap.forEach((value, key) => {
+                resolvedAliasMap.set(key, resolvedMap.get(value));
+            });
+            // Publish the base-variables, derived-variables and resolved aliases to the other postcss-plugins
+            const combinedMap = new Map([...baseVariables, ...resolvedMap, ...resolvedAliasMap]);
+            result.messages.push({
+                type: "resolved-variable-map",
+                plugin: "postcss-compile-variables",
+                colorMap: combinedMap,
+            });
+        },
+    };
+};
+
+module.exports.postcss = true;

scripts/postcss/css-url-processor.js

@@ -0,0 +1,92 @@
+/*
+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.
+*/
+
+const valueParser = require("postcss-value-parser");
+const  resolve = require("path").resolve;
+
+function colorsFromURL(url, colorMap) {
+    const params = new URL(`file://${url}`).searchParams;
+    const primary = params.get("primary");
+    if (!primary) {
+        return null;
+    }
+    const secondary = params.get("secondary");
+    const primaryColor = colorMap.get(primary);
+    const secondaryColor = colorMap.get(secondary);
+    if (!primaryColor) {
+        throw new Error(`Variable ${primary} not found in resolved color variables!`);
+    }
+    if (secondary && !secondaryColor) {
+        throw new Error(`Variable ${secondary} not found in resolved color variables!`);
+    }
+    return [primaryColor, secondaryColor];
+}
+
+function processURL(decl, replacer, colorMap, cssPath) {
+    const value = decl.value;
+    const parsed = valueParser(value);
+    parsed.walk(node => {
+        if (node.type !== "function" || node.value !== "url") {
+            return;
+        }
+        const urlStringNode = node.nodes[0];
+        const oldURL = urlStringNode.value;
+        const oldURLAbsolute = resolve(cssPath, oldURL);
+        const colors  = colorsFromURL(oldURLAbsolute, colorMap);
+        if (!colors) {
+            // If no primary color is provided via url params, then this url need not be handled.
+            return;
+        }
+        const newURL = replacer(oldURLAbsolute.replace(/\?.+/, ""), ...colors);
+        if (!newURL) {
+            throw new Error("Replacer failed to produce a replacement URL!");
+        }
+        urlStringNode.value = newURL;
+    });
+    decl.assign({prop: decl.prop, value: parsed.toString()})
+}
+
+/* *
+ * @type {import('postcss').PluginCreator}
+ */
+module.exports = (opts = {}) => {
+    return {
+        postcssPlugin: "postcss-url-to-variable",
+
+        Once(root, {result}) {
+            const cssFileLocation = root.source.input.from;
+            if (cssFileLocation.includes("type=runtime")) {
+                // If this is a runtime theme, don't process urls.
+                return;
+            }
+            /*
+            postcss-compile-variables should have sent the list of resolved colours down via results
+            */
+            const {colorMap} = result.messages.find(m => m.type === "resolved-variable-map");
+            if (!colorMap) {
+                throw new Error("Postcss results do not contain resolved colors!");
+            }
+            /*
+            Go through each declaration and if it contains an URL, replace the url with the result
+            of running replacer(url)
+            */
+            const cssPath = root.source?.input.file.replace(/[^/]*$/, "");
+            root.walkDecls(decl => processURL(decl, opts.replacer, colorMap, cssPath));
+        },
+    };
+};
+
+module.exports.postcss = true;

scripts/postcss/css-url-to-variables.js

@@ -0,0 +1,97 @@
+/*
+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.
+*/
+
+const valueParser = require("postcss-value-parser");
+
+/**
+ * This plugin extracts content inside url() into css variables and adds the variables to the root section.
+ * This plugin is used in conjunction with css-url-processor plugin to colorize svg icons.
+ */
+const idToPrepend = "icon-url";
+
+function findAndReplaceUrl(decl, urlVariables, counter) {
+    const value = decl.value;
+    const parsed = valueParser(value);
+    parsed.walk(node => {
+        if (node.type !== "function" || node.value !== "url") {
+            return;
+        }
+        const url = node.nodes[0].value;
+        if (!url.match(/\.svg\?primary=.+/)) {
+            return;
+        }
+        const count = counter.next().value;
+        const variableName = `${idToPrepend}-${count}`;
+        urlVariables.set(variableName, url);
+        node.value = "var";
+        node.nodes = [{ type: "word", value: `--${variableName}` }];
+    });
+    decl.assign({prop: decl.prop, value: parsed.toString()})
+}
+
+function addResolvedVariablesToRootSelector(root, { Rule, Declaration }, urlVariables) {
+    const newRule = new Rule({ selector: ":root", source: root.source });
+    // Add derived css variables to :root
+    urlVariables.forEach((value, key) => {
+        const declaration = new Declaration({ prop: `--${key}`, value: `url("${value}")`});
+        newRule.append(declaration);
+    });
+    root.append(newRule);
+}
+
+function populateMapWithIcons(map, cssFileLocation, urlVariables) {
+    const location = cssFileLocation.match(/(.+)\/.+\.css/)?.[1];
+    const sharedObject = map.get(location);
+    const output = {"icon": Object.fromEntries(urlVariables)};
+    if (sharedObject) {
+        Object.assign(sharedObject, output);
+    }
+    else {
+        map.set(location, output);
+    }
+}
+
+function *createCounter() {
+    for (let i = 0; ; ++i) {
+        yield i;
+    }
+}
+
+/* *
+ * @type {import('postcss').PluginCreator}
+ */
+module.exports = (opts = {}) => {
+    return {
+        postcssPlugin: "postcss-url-to-variable",
+
+        Once(root, { Rule, Declaration }) {
+            const urlVariables = new Map();
+            const counter = createCounter();
+            root.walkDecls(decl => findAndReplaceUrl(decl, urlVariables, counter));
+            const cssFileLocation = root.source.input.from;
+            if (urlVariables.size && !cssFileLocation.includes("type=runtime")) {
+                addResolvedVariablesToRootSelector(root, { Rule, Declaration }, urlVariables);
+            }
+            if (opts.compiledVariables){
+                const cssFileLocation = root.source.input.from;
+                populateMapWithIcons(opts.compiledVariables, cssFileLocation, urlVariables);
+            }
+        },
+    };
+};
+
+module.exports.postcss = true;
+

scripts/postcss/svg-builder.mjs

@@ -0,0 +1,51 @@
+/*
+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 {readFileSync, mkdirSync, writeFileSync} from "fs";
+import {resolve} from "path";
+import {h32} from "xxhashjs";
+import {getColoredSvgString} from "../../src/platform/web/theming/shared/svg-colorizer.mjs";
+
+function createHash(content) {
+    const hasher = new h32(0);
+    hasher.update(content);
+    return hasher.digest();
+}
+
+/**
+ * Builds a new svg with the colors replaced and returns its location.
+ * @param {string} svgLocation The location of the input svg file
+ * @param {string} primaryColor Primary color for the new svg
+ * @param {string} secondaryColor Secondary color for the new svg
+ */
+export function buildColorizedSVG(svgLocation, primaryColor, secondaryColor) {
+    const svgCode = readFileSync(svgLocation, { encoding: "utf8"});
+    const coloredSVGCode = getColoredSvgString(svgCode, primaryColor, secondaryColor);
+    const fileName = svgLocation.match(/.+[/\\](.+\.svg)/)[1];
+    const outputName = `${fileName.substring(0, fileName.length - 4)}-${createHash(coloredSVGCode)}.svg`;
+    const outputPath = resolve(__dirname, "./.tmp");
+    try {
+       mkdirSync(outputPath);
+    }
+    catch (e) {
+        if (e.code !== "EEXIST") {
+            throw e;
+        }
+    }
+    const outputFile = `${outputPath}/${outputName}`;
+    writeFileSync(outputFile, coloredSVGCode);
+    return outputFile;
+}

scripts/postcss/tests/common.js

@@ -0,0 +1,30 @@
+/*
+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.
+*/
+
+const postcss = require("postcss");
+
+module.exports.createTestRunner = function (plugin) {
+    return async function run(input, output, opts = {}, assert) {
+        let result = await postcss([plugin(opts)]).process(input, { from: undefined, });
+        assert.strictEqual(
+            result.css.replaceAll(/\s/g, ""),
+            output.replaceAll(/\s/g, "")
+        );
+        assert.strictEqual(result.warnings().length, 0);
+    };
+}
+
+

scripts/postcss/tests/css-compile-variables.test.js

@@ -0,0 +1,156 @@
+/*
+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.
+*/
+
+const offColor = require("off-color").offColor;
+const postcss = require("postcss");
+const plugin = require("../css-compile-variables");
+const derive = require("../color").derive;
+const run = require("./common").createTestRunner(plugin);
+
+module.exports.tests = function tests() {
+    return {
+        "derived variables are resolved": async (assert) => {
+            const inputCSS = `
+            :root {
+                --foo-color: #ff0;
+            }
+            div {
+                background-color: var(--foo-color--lighter-50);
+            }`;
+            const transformedColor = offColor("#ff0").lighten(0.5);
+            const outputCSS =
+                inputCSS +
+                `
+            :root {
+                --foo-color--lighter-50: ${transformedColor.hex()};
+            }
+            `;
+            await run( inputCSS, outputCSS, {derive}, assert);
+        },
+
+        "derived variables work with alias": async (assert) => {
+            const inputCSS = `
+            :root {
+                --icon-color: #fff;
+            }
+            div {
+                background: var(--icon-color--darker-20);
+                --my-alias: var(--icon-color--darker-20);
+                color: var(--my-alias--lighter-15);
+            }`;
+            const colorDarker = offColor("#fff").darken(0.2).hex();
+            const aliasLighter = offColor(colorDarker).lighten(0.15).hex();
+            const outputCSS = inputCSS + `:root {
+                --icon-color--darker-20: ${colorDarker};
+                --my-alias--lighter-15: ${aliasLighter};
+            }
+            `;
+            await run(inputCSS, outputCSS, {derive}, assert);
+        },
+
+        "derived variable throws if base not present in config": async (assert) => {
+            const css = `:root {
+                color: var(--icon-color--darker-20);
+            }`;
+            assert.rejects(async () => await postcss([plugin({ variables: {} })]).process(css, { from: undefined, }));
+        },
+
+        "multiple derived variable in single declaration is parsed correctly": async (assert) => {
+            const inputCSS = `
+            :root {
+                --foo-color: #ff0;
+            }
+            div {
+                background-color: linear-gradient(var(--foo-color--lighter-50), var(--foo-color--darker-20));
+            }`;
+            const transformedColor1 = offColor("#ff0").lighten(0.5);
+            const transformedColor2 = offColor("#ff0").darken(0.2);
+            const outputCSS =
+                inputCSS +
+                `
+            :root {
+                --foo-color--lighter-50: ${transformedColor1.hex()};
+                --foo-color--darker-20: ${transformedColor2.hex()};
+            }
+            `;
+            await run( inputCSS, outputCSS, {derive}, assert);
+        },
+
+        "multiple aliased-derived variable in single declaration is parsed correctly": async (assert) => {
+            const inputCSS = `
+            :root {
+                --foo-color: #ff0;
+            }
+            div {
+                --my-alias: var(--foo-color);
+                background-color: linear-gradient(var(--my-alias--lighter-50), var(--my-alias--darker-20));
+            }`;
+            const transformedColor1 = offColor("#ff0").lighten(0.5);
+            const transformedColor2 = offColor("#ff0").darken(0.2);
+            const outputCSS =
+                inputCSS +
+                `
+            :root {
+                --my-alias--lighter-50: ${transformedColor1.hex()};
+                --my-alias--darker-20: ${transformedColor2.hex()};
+            }
+            `;
+            await run( inputCSS, outputCSS, {derive}, assert);
+        },
+
+        "compiledVariables map is populated": async (assert) => {
+            const compiledVariables = new Map();
+            const inputCSS = `
+            :root {
+                --icon-color: #fff;
+            }
+            div {
+                background: var(--icon-color--darker-20);
+                --my-alias: var(--icon-color--darker-20);
+                color: var(--my-alias--lighter-15);
+            }`;
+            await postcss([plugin({ derive, compiledVariables })]).process(inputCSS, { from: "/foo/bar/test.css", });
+            const actualArray = compiledVariables.get("/foo/bar")["derived-variables"];
+            const expectedArray = ["icon-color--darker-20", "my-alias=icon-color--darker-20", "my-alias--lighter-15"];
+            assert.deepStrictEqual(actualArray.sort(), expectedArray.sort());
+        },
+
+        "derived variable are supported in urls": async (assert) => {
+            const inputCSS = `
+            :root {
+                --foo-color: #ff0;
+            }
+            div {
+                background-color: var(--foo-color--lighter-50);
+                background: url("./foo/bar/icon.svg?primary=foo-color--darker-5");
+            }
+            a {
+                background: url("foo/bar/icon.svg");
+            }`;
+            const transformedColorLighter = offColor("#ff0").lighten(0.5);
+            const transformedColorDarker = offColor("#ff0").darken(0.05);
+            const outputCSS =
+                inputCSS +
+                `
+            :root {
+                --foo-color--lighter-50: ${transformedColorLighter.hex()};
+                --foo-color--darker-5: ${transformedColorDarker.hex()};
+            }
+            `;
+            await run( inputCSS, outputCSS, {derive}, assert);
+        }
+    };
+};

scripts/postcss/tests/css-url-to-variables.test.js

@@ -0,0 +1,71 @@
+/*
+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.
+*/
+
+const plugin = require("../css-url-to-variables");
+const run = require("./common").createTestRunner(plugin);
+const postcss = require("postcss");
+
+module.exports.tests = function tests() {
+    return {
+        "url is replaced with variable": async (assert) => {
+            const inputCSS = `div {
+                background: no-repeat center/80% url("../img/image.svg?primary=main-color--darker-20");
+            }
+            button {
+                background: url("/home/foo/bar/cool.svg?primary=blue&secondary=green");
+            }`;
+            const outputCSS =
+            `div {
+                background: no-repeat center/80% var(--icon-url-0);
+            }
+            button {
+                background: var(--icon-url-1);
+            }`+
+                `
+            :root {
+                --icon-url-0: url("../img/image.svg?primary=main-color--darker-20");
+                --icon-url-1: url("/home/foo/bar/cool.svg?primary=blue&secondary=green");
+            }
+            `;
+            await run(inputCSS, outputCSS, { }, assert);
+        },
+        "non svg urls without query params are not replaced": async (assert) => {
+            const inputCSS = `div {
+                background: no-repeat url("./img/foo/bar/image.png");
+            }`;
+            await run(inputCSS, inputCSS, {}, assert);
+        },
+        "map is populated with icons": async (assert) => {
+            const compiledVariables = new Map();
+            compiledVariables.set("/foo/bar", { "derived-variables": ["background-color--darker-20", "accent-color--lighter-15"] });
+            const inputCSS = `div {
+                background: no-repeat center/80% url("../img/image.svg?primary=main-color--darker-20");
+            }
+            button {
+                background: url("/home/foo/bar/cool.svg?primary=blue&secondary=green");
+            }`;
+            const expectedObject = {
+                "icon-url-0": "../img/image.svg?primary=main-color--darker-20",
+                "icon-url-1": "/home/foo/bar/cool.svg?primary=blue&secondary=green",
+            };
+            await postcss([plugin({compiledVariables})]).process(inputCSS, { from: "/foo/bar/test.css", });
+            const sharedVariable = compiledVariables.get("/foo/bar");
+            assert.deepEqual(["background-color--darker-20", "accent-color--lighter-15"], sharedVariable["derived-variables"]);
+            assert.deepEqual(expectedObject, sharedVariable["icon"]);
+        }
+    };
+};
+

scripts/release.sh

@@ -1,3 +1,4 @@
+set -e
 if [ -z "$1" ]; then
     echo "provide a new version, current version is $(jq '.version' package.json)"
     exit 1

scripts/sdk/base-manifest.json

@@ -1,7 +1,19 @@
 {
     "name": "hydrogen-view-sdk",
     "description": "Embeddable matrix client library, including view components",
-    "version": "0.0.5",
-    "main": "./hydrogen.es.js",
-    "type": "module"
+    "version": "0.1.0",
+    "main": "./lib-build/hydrogen.cjs.js",
+    "exports": {
+        ".": {
+            "import": "./lib-build/hydrogen.es.js",
+            "require": "./lib-build/hydrogen.cjs.js"
+        },
+        "./paths/vite": "./paths/vite.js",
+        "./style.css": "./asset-build/assets/theme-element-light.css",
+        "./theme-element-light.css": "./asset-build/assets/theme-element-light.css",
+        "./theme-element-dark.css": "./asset-build/assets/theme-element-dark.css",
+        "./main.js": "./asset-build/assets/main.js",
+        "./download-sandbox.html": "./asset-build/assets/download-sandbox.html",
+        "./assets/*": "./asset-build/assets/*"
+    }
 }

scripts/sdk/build.sh

@@ -1,5 +1,13 @@
 #!/bin/bash
-rm -rf target
+# Exit whenever one of the commands fail with a non-zero exit code
+set -e
+set -o pipefail
+# Enable extended globs so we can use the `!(filename)` glob syntax
+shopt -s extglob
+
+# Only remove the directory contents instead of the whole directory to maintain
+# the `npm link`/`yarn link` symlink
+rm -rf target/*
 yarn run vite build -c vite.sdk-assets-config.js
 yarn run vite build -c vite.sdk-lib-config.js
 yarn tsc -p tsconfig-declaration.json
@@ -8,15 +16,10 @@ mkdir target/paths
 # this doesn't work, the ?url imports need to be in the consuming project, so disable for now
 # ./scripts/sdk/transform-paths.js ./src/platform/web/sdk/paths/vite.js ./target/paths/vite.js
 cp doc/SDK.md target/README.md
-pushd target
-pushd asset-build/assets
-mv main.*.js ../../main.js
-mv index.*.css ../../style.css
-mv download-sandbox.*.html ../../download-sandbox.html
-rm *.js *.wasm
-mv ./* ../../
+pushd target/asset-build
+rm index.html
 popd
-rm -rf asset-build
-mv lib-build/* .
-rm -rf lib-build
+pushd target/asset-build/assets
+# Remove all `*.wasm` and `*.js` files except for `main.js`
+rm !(main).js *.wasm
 popd

scripts/sdk/create-manifest.js

@@ -3,21 +3,7 @@ const fs = require("fs");
 const appManifest = require("../../package.json");
 const baseSDKManifest = require("./base-manifest.json");
 /*
-    need to leave exports out of base-manifest.json because of #vite-bug,
-    with the downside that we can't support environments that support
-    both esm and commonjs modules, so we pick just esm.
-    ```
-    "exports": {
-        ".": {
-            "import": "./hydrogen.es.js",
-            "require": "./hydrogen.cjs.js"
-        },
-        "./paths/vite": "./paths/vite.js",
-        "./style.css": "./style.css"
-    },
-    ```
-
-    Also need to leave typescript type definitions out until the
+    Need to leave typescript type definitions out until the
     typescript conversion is complete and all imports in the d.ts files
     exists.
     ```

scripts/sdk/test/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+yarn.lock

scripts/sdk/test/deps.d.ts

@@ -0,0 +1,2 @@
+// Keep TypeScripts from complaining about hydrogen-view-sdk not having types yet
+declare module "hydrogen-view-sdk";

scripts/sdk/test/esm-entry.ts

@@ -0,0 +1,21 @@
+import * as hydrogenViewSdk from "hydrogen-view-sdk";
+import downloadSandboxPath from 'hydrogen-view-sdk/download-sandbox.html?url';
+import workerPath from 'hydrogen-view-sdk/main.js?url';
+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';
+const assetPaths = {
+  downloadSandbox: downloadSandboxPath,
+  worker: workerPath,
+  olm: {
+      wasm: olmWasmPath,
+      legacyBundle: olmLegacyJsPath,
+      wasmBundle: olmJsPath
+  }
+};
+import "hydrogen-view-sdk/assets/theme-element-light.css";
+
+console.log('hydrogenViewSdk', hydrogenViewSdk);
+console.log('assetPaths', assetPaths);
+
+console.log('Entry ESM works ✅');

scripts/sdk/test/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app" class="hydrogen"></div>
+    <script type="module" src="./esm-entry.ts"></script>
+  </body>
+</html>

scripts/sdk/test/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "test-sdk",
+  "version": "0.0.0",
+  "description": "",
+  "dependencies": {
+    "hydrogen-view-sdk": "link:../../../target"
+  }
+}

scripts/sdk/test/test-sdk-in-commonjs-env.js

@@ -0,0 +1,13 @@
+// Make sure the SDK can be used in a CommonJS environment.
+// Usage: node scripts/sdk/test/test-sdk-in-commonjs-env.js
+const hydrogenViewSdk = require('hydrogen-view-sdk');
+
+// Test that the "exports" are available:
+// Worker
+require.resolve('hydrogen-view-sdk/main.js');
+// Styles
+require.resolve('hydrogen-view-sdk/assets/theme-element-light.css');
+// Can access files in the assets/* directory
+require.resolve('hydrogen-view-sdk/assets/main.js');
+
+console.log('SDK works in CommonJS ✅');

scripts/sdk/test/test-sdk-in-esm-vite-build-env.js

@@ -0,0 +1,19 @@
+const { resolve } = require('path');
+const { build } = require('vite');
+
+async function main() {
+  await build({
+    outDir: './dist',
+    build: {
+      rollupOptions: {
+        input: {
+          main: resolve(__dirname, 'index.html')
+        }
+      }
+    }
+  });
+
+  console.log('SDK works in Vite build ✅');
+}
+
+main();

scripts/test-derived-theme/test-theme.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+cp scripts/test-derived-theme/theme.json target/assets/theme-customer.json
+cat target/config.json | jq '.themeManifests += ["assets/theme-customer.json"]' | cat > target/config.temp.json
+rm target/config.json
+mv target/config.temp.json target/config.json

scripts/test-derived-theme/theme.json

@@ -0,0 +1,51 @@
+{
+	"name": "Customer",
+    "extends": "element",
+    "id": "customer",
+	"values": {
+        "variants": {
+            "dark": {
+                "dark": true,
+                "default": true,
+                "name": "Dark",
+                "variables": {
+                    "background-color-primary": "#21262b",
+                    "background-color-secondary": "#2D3239",
+                    "text-color": "#fff",
+                    "accent-color": "#F03F5B",
+                    "error-color": "#FF4B55",
+                    "fixed-white": "#fff",
+                    "room-badge": "#61708b",
+                    "link-color": "#238cf5"
+                }
+            },
+            "light": {
+                "default": true,
+                "name": "Dark",
+                "variables": {
+                    "background-color-primary": "#21262b",
+                    "background-color-secondary": "#2D3239",
+                    "text-color": "#fff",
+                    "accent-color": "#F03F5B",
+                    "error-color": "#FF4B55",
+                    "fixed-white": "#fff",
+                    "room-badge": "#61708b",
+                    "link-color": "#238cf5"
+                }
+            },
+            "red": {
+                "name": "Gruvbox",
+                "variables": {
+                    "background-color-primary": "#282828",
+                    "background-color-secondary": "#3c3836",
+                    "text-color": "#fbf1c7",
+                    "accent-color": "#8ec07c",
+                    "error-color": "#fb4934",
+                    "fixed-white": "#fff",
+                    "room-badge": "#cc241d",
+                    "link-color": "#fe8019"
+                }
+            }
+        }
+    }
+}

src/domain/AccountSetupViewModel.js

@@ -14,14 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {ViewModel} from "./ViewModel.js";
+import {ViewModel} from "./ViewModel";
 import {KeyType} from "../matrix/ssss/index";
 import {Status} from "./session/settings/KeyBackupViewModel.js";
 
 export class AccountSetupViewModel extends ViewModel {
-    constructor(accountSetup) {
-        super();
-        this._accountSetup = accountSetup;
+    constructor(options) {
+        super(options);
+        this._accountSetup = options.accountSetup;
         this._dehydratedDevice = undefined;
         this._decryptDehydratedDeviceViewModel = undefined;
         if (this._accountSetup.encryptedDehydratedDevice) {
@@ -53,7 +53,7 @@ export class AccountSetupViewModel extends ViewModel {
 // this vm adopts the same shape as KeyBackupViewModel so the same view can be reused.
 class DecryptDehydratedDeviceViewModel extends ViewModel {
     constructor(accountSetupViewModel, decryptedCallback) {
-        super();
+        super(accountSetupViewModel.options);
         this._accountSetupViewModel = accountSetupViewModel;
         this._isBusy = false;
         this._status = Status.SetupKey;

src/domain/LogoutViewModel.ts

@@ -14,11 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {ViewModel} from "./ViewModel.js";
+import {Options as BaseOptions, ViewModel} from "./ViewModel";
 import {Client} from "../matrix/Client.js";
+import {SegmentType} from "./navigation/index";
 
-export class LogoutViewModel extends ViewModel {
-    constructor(options) {
+type Options = { sessionId: string; } & BaseOptions;
+
+export class LogoutViewModel extends ViewModel<SegmentType, Options> {
+    private _sessionId: string;
+    private _busy: boolean;
+    private _showConfirm: boolean;
+    private _error?: Error;
+
+    constructor(options: Options) {
         super(options);
         this._sessionId = options.sessionId;
         this._busy = false;
@@ -26,19 +34,19 @@ export class LogoutViewModel extends ViewModel {
         this._error = undefined;
     }
 
-    get showConfirm() {
+    get showConfirm(): boolean {
         return this._showConfirm;
     }
 
-    get busy() {
+    get busy(): boolean {
         return this._busy;
     }
 
-    get cancelUrl() {
+    get cancelUrl(): string | undefined {
         return this.urlCreator.urlForSegment("session", true);
     }
 
-    async logout() {
+    async logout(): Promise<void> {
         this._busy = true;
         this._showConfirm = false;
         this.emitChange("busy");
@@ -53,7 +61,7 @@ export class LogoutViewModel extends ViewModel {
         }
     }
 
-    get status() {
+    get status(): string {
         if (this._error) {
             return this.i18n`Could not log out of device: ${this._error.message}`;
         } else {

src/domain/RootViewModel.js

@@ -17,10 +17,10 @@ limitations under the License.
 import {Client} from "../matrix/Client.js";
 import {SessionViewModel} from "./session/SessionViewModel.js";
 import {SessionLoadViewModel} from "./SessionLoadViewModel.js";
-import {LoginViewModel} from "./login/LoginViewModel.js";
-import {LogoutViewModel} from "./LogoutViewModel.js";
+import {LoginViewModel} from "./login/LoginViewModel";
+import {LogoutViewModel} from "./LogoutViewModel";
 import {SessionPickerViewModel} from "./SessionPickerViewModel.js";
-import {ViewModel} from "./ViewModel.js";
+import {ViewModel} from "./ViewModel";
 
 export class RootViewModel extends ViewModel {
     constructor(options) {
@@ -118,7 +118,7 @@ export class RootViewModel extends ViewModel {
                     // but we also want the change of screen to go through the navigation
                     // so we store the session container in a temporary variable that will be
                     // consumed by _applyNavigation, triggered by the navigation change
-                    // 
+                    //
                     // Also, we should not call _setSection before the navigation is in the correct state,
                     // as url creation (e.g. in RoomTileViewModel)
                     // won't be using the correct navigation base path.

src/domain/SessionLoadViewModel.js

@@ -17,7 +17,7 @@ limitations under the License.
 import {AccountSetupViewModel} from "./AccountSetupViewModel.js";
 import {LoadStatus} from "../matrix/Client.js";
 import {SyncStatus} from "../matrix/Sync.js";
-import {ViewModel} from "./ViewModel.js";
+import {ViewModel} from "./ViewModel";
 
 export class SessionLoadViewModel extends ViewModel {
     constructor(options) {
@@ -43,7 +43,7 @@ export class SessionLoadViewModel extends ViewModel {
             this.emitChange("loading");
             this._waitHandle = this._client.loadStatus.waitFor(s => {
                 if (s === LoadStatus.AccountSetup) {
-                    this._accountSetupViewModel = new AccountSetupViewModel(this._client.accountSetup);
+                    this._accountSetupViewModel = new AccountSetupViewModel(this.childOptions({accountSetup: this._client.accountSetup}));
                 } else {
                     this._accountSetupViewModel = undefined;
                 }

src/domain/SessionPickerViewModel.js

@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 import {SortedArray} from "../observable/index.js";
-import {ViewModel} from "./ViewModel.js";
-import {avatarInitials, getIdentifierColorNumber} from "./avatar.js";
+import {ViewModel} from "./ViewModel";
+import {avatarInitials, getIdentifierColorNumber} from "./avatar";
 
 class SessionItemViewModel extends ViewModel {
     constructor(options, pickerVM) {

src/domain/ViewModel.ts

@@ -1,5 +1,6 @@
 /*
 Copyright 2020 Bruno Windels <bruno@windels.cloud>
+Copyright 2022 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.
@@ -21,62 +22,90 @@ limitations under the License.
 import {EventEmitter} from "../utils/EventEmitter";
 import {Disposables} from "../utils/Disposables";
 
-export class ViewModel extends EventEmitter {
-    constructor(options = {}) {
+import type {Disposable} from "../utils/Disposables";
+import type {Platform} from "../platform/web/Platform";
+import type {Clock} from "../platform/web/dom/Clock";
+import type {ILogger} from "../logging/types";
+import type {Navigation} from "./navigation/Navigation";
+import type {SegmentType} from "./navigation/index";
+import type {IURLRouter} from "./navigation/URLRouter";
+
+export type Options<T extends object = SegmentType> = {
+    platform: Platform;
+    logger: ILogger;
+    urlCreator: IURLRouter<T>;
+    navigation: Navigation<T>;
+    emitChange?: (params: any) => void;
+}
+
+
+export class ViewModel<N extends object = SegmentType, O extends Options<N> = Options<N>> extends EventEmitter<{change: never}> {
+    private disposables?: Disposables;
+    private _isDisposed = false;
+    private _options: Readonly<O>;
+
+    constructor(options: Readonly<O>) {
         super();
-        this.disposables = null;
-        this._isDisposed = false;
         this._options = options;
     }
 
-    childOptions(explicitOptions) {
-        const {navigation, urlCreator, platform} = this._options;
-        return Object.assign({navigation, urlCreator, platform}, explicitOptions);
+    childOptions<T extends Object>(explicitOptions: T): T & Options<N> {
+        return Object.assign({}, this._options, explicitOptions);
     }
 
+    get options(): Readonly<O> { return this._options; }
+
     // makes it easier to pass through dependencies of a sub-view model
-    getOption(name) {
+    getOption<N extends keyof O>(name: N): O[N]  {
         return this._options[name];
     }
 
-    track(disposable) {
+    observeNavigation<T extends keyof N>(type: T, onChange: (value: N[T], type: T) => void): void {
+      const segmentObservable = this.navigation.observe(type);
+      const unsubscribe = segmentObservable.subscribe((value: N[T]) => {
+        onChange(value, type);
+      });
+      this.track(unsubscribe);
+    }
+
+    track<D extends Disposable>(disposable: D): D {
         if (!this.disposables) {
             this.disposables = new Disposables();
         }
         return this.disposables.track(disposable);
     }
 
-    untrack(disposable) {
+    untrack(disposable: Disposable): undefined {
         if (this.disposables) {
             return this.disposables.untrack(disposable);
         }
-        return null;
+        return undefined;
     }
 
-    dispose() {
+    dispose(): void {
         if (this.disposables) {
             this.disposables.dispose();
         }
         this._isDisposed = true;
     }
 
-    get isDisposed() {
+    get isDisposed(): boolean {
         return this._isDisposed;
     }
 
-    disposeTracked(disposable) {
+    disposeTracked(disposable: Disposable | undefined): undefined {
         if (this.disposables) {
             return this.disposables.disposeTracked(disposable);
         }
-        return null;
+        return undefined;
     }
 
     // TODO: this will need to support binding
     // if any of the expr is a function, assume the function is a binding, and return a binding function ourselves
-    // 
+    //
     // translated string should probably always be bindings, unless we're fine with a refresh when changing the language?
     // we probably are, if we're using routing with a url, we could just refresh.
-    i18n(parts, ...expr) {
+    i18n(parts: TemplateStringsArray, ...expr: any[]): string {
         // just concat for now
         let result = "";
         for (let i = 0; i < parts.length; ++i) {
@@ -88,11 +117,7 @@ export class ViewModel extends EventEmitter {
         return result;
     }
 
-    updateOptions(options) {
-        this._options = Object.assign(this._options, options);
-    }
-
-    emitChange(changedProps) {
+    emitChange(changedProps: any): void {
         if (this._options.emitChange) {
             this._options.emitChange(changedProps);
         } else {
@@ -100,27 +125,24 @@ export class ViewModel extends EventEmitter {
         }
     }
 
-    get platform() {
+    get platform(): Platform {
         return this._options.platform;
     }
 
-    get clock() {
+    get clock(): Clock {
         return this._options.platform.clock;
     }
 
-    get logger() {
+    get logger(): ILogger {
         return this.platform.logger;
     }
 
-    /**
-     * The url router, only meant to be used to create urls with from view models.
-     * @return {URLRouter}
-     */
-    get urlCreator() {
+    get urlCreator(): IURLRouter<N> {
         return this._options.urlCreator;
     }
 
-    get navigation() {
-        return this._options.navigation;
+    get navigation(): Navigation<N> {
+        // typescript needs a little help here
+        return this._options.navigation as unknown as Navigation<N>;
     }
 }

src/domain/avatar.ts

@@ -14,7 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-export function avatarInitials(name) {
+import { Platform } from "../platform/web/Platform";
+import { MediaRepository } from "../matrix/net/MediaRepository";
+
+export function avatarInitials(name: string): string {
     let firstChar = name.charAt(0);
     if (firstChar === "!" || firstChar === "@" || firstChar === "#") {
         firstChar = name.charAt(1);
@@ -29,10 +32,10 @@ export function avatarInitials(name) {
  *
  * @return {number}
  */
-function hashCode(str) {
+function hashCode(str: string): number {
     let hash = 0;
-    let i;
-    let chr;
+    let i: number;
+    let chr: number;
     if (str.length === 0) {
         return hash;
     }
@@ -44,11 +47,11 @@ function hashCode(str) {
     return Math.abs(hash);
 }
 
-export function getIdentifierColorNumber(id) {
+export function getIdentifierColorNumber(id: string): number {
     return (hashCode(id) % 8) + 1;
 }
 
-export function getAvatarHttpUrl(avatarUrl, cssSize, platform, mediaRepository) {
+export function getAvatarHttpUrl(avatarUrl: string, cssSize: number, platform: Platform, mediaRepository: MediaRepository): string | null {
     if (avatarUrl) {
         const imageSize = cssSize * platform.devicePixelRatio;
         return mediaRepository.mxcUrlThumbnail(avatarUrl, imageSize, imageSize, "crop");

src/domain/login/CompleteSSOLoginViewModel.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {ViewModel} from "../ViewModel.js";
+import {ViewModel} from "../ViewModel";
 import {LoginFailure} from "../../matrix/Client.js";
 
 export class CompleteSSOLoginViewModel extends ViewModel {

src/domain/login/LoginViewModel.ts

@@ -15,101 +15,145 @@ limitations under the License.
 */
 
 import {Client} from "../../matrix/Client.js";
-import {ViewModel} from "../ViewModel.js";
+import {Options as BaseOptions, ViewModel} from "../ViewModel";
 import {PasswordLoginViewModel} from "./PasswordLoginViewModel.js";
 import {StartSSOLoginViewModel} from "./StartSSOLoginViewModel.js";
 import {CompleteSSOLoginViewModel} from "./CompleteSSOLoginViewModel.js";
 import {LoadStatus} from "../../matrix/Client.js";
 import {SessionLoadViewModel} from "../SessionLoadViewModel.js";
+import {SegmentType} from "../navigation/index";
 
-export class LoginViewModel extends ViewModel {
-    constructor(options) {
+import type {PasswordLoginMethod, SSOLoginHelper, TokenLoginMethod, ILoginMethod} from "../../matrix/login";
+
+type Options = {
+    defaultHomeserver: string;
+    ready: ReadyFn;
+    loginToken?: string;
+} & BaseOptions;
+
+export class LoginViewModel extends ViewModel<SegmentType, Options> {
+    private _ready: ReadyFn;
+    private _loginToken?: string;
+    private _client: Client;
+    private _loginOptions?: LoginOptions;
+    private _passwordLoginViewModel?: PasswordLoginViewModel;
+    private _startSSOLoginViewModel?: StartSSOLoginViewModel;
+    private _completeSSOLoginViewModel?: CompleteSSOLoginViewModel;
+    private _loadViewModel?: SessionLoadViewModel;
+    private _loadViewModelSubscription?: () => void;
+    private _homeserver: string;
+    private _queriedHomeserver?: string;
+    private _abortHomeserverQueryTimeout?: () => void;
+    private _abortQueryOperation?: () => void;
+
+    private _hideHomeserver: boolean = false;
+    private _isBusy: boolean = false;
+    private _errorMessage: string = "";
+
+    constructor(options: Readonly<Options>) {
         super(options);
         const {ready, defaultHomeserver, loginToken} = options;
         this._ready = ready;
         this._loginToken = loginToken;
         this._client = new Client(this.platform);
-        this._loginOptions = null;
-        this._passwordLoginViewModel = null;
-        this._startSSOLoginViewModel = null;
-        this._completeSSOLoginViewModel = null;
-        this._loadViewModel = null;
-        this._loadViewModelSubscription = null;
         this._homeserver = defaultHomeserver;
-        this._queriedHomeserver = null;
-        this._errorMessage = "";
-        this._hideHomeserver = false;
-        this._isBusy = false;
-        this._abortHomeserverQueryTimeout = null;
-        this._abortQueryOperation = null;
         this._initViewModels();
     }
 
-    get passwordLoginViewModel() { return this._passwordLoginViewModel; }
-    get startSSOLoginViewModel() { return this._startSSOLoginViewModel; }
-    get completeSSOLoginViewModel(){ return this._completeSSOLoginViewModel; }
-    get homeserver() { return this._homeserver; }
-    get resolvedHomeserver() { return this._loginOptions?.homeserver; }
-    get errorMessage() { return this._errorMessage; }
-    get showHomeserver() { return !this._hideHomeserver; }
-    get loadViewModel() {return this._loadViewModel; }
-    get isBusy() { return this._isBusy; }
-    get isFetchingLoginOptions() { return !!this._abortQueryOperation; }
+    get passwordLoginViewModel(): PasswordLoginViewModel {
+        return this._passwordLoginViewModel;
+    }
 
-    goBack() {
+    get startSSOLoginViewModel(): StartSSOLoginViewModel {
+        return this._startSSOLoginViewModel;
+    }
+
+    get completeSSOLoginViewModel(): CompleteSSOLoginViewModel {
+        return this._completeSSOLoginViewModel;
+    }
+
+    get homeserver(): string {
+        return this._homeserver;
+    }
+
+    get resolvedHomeserver(): string | undefined {
+        return this._loginOptions?.homeserver;
+    }
+
+    get errorMessage(): string {
+        return this._errorMessage;
+    }
+
+    get showHomeserver(): boolean {
+        return !this._hideHomeserver;
+    }
+
+    get loadViewModel(): SessionLoadViewModel {
+        return this._loadViewModel;
+    }
+
+    get isBusy(): boolean {
+        return this._isBusy;
+    }
+
+    get isFetchingLoginOptions(): boolean {
+        return !!this._abortQueryOperation;
+    }
+
+    goBack(): void {
         this.navigation.push("session");
     }
 
-    async _initViewModels() {
+    private _initViewModels(): void {
         if (this._loginToken) {
             this._hideHomeserver = true;
             this._completeSSOLoginViewModel = this.track(new CompleteSSOLoginViewModel(
                 this.childOptions(
                     {
                         client: this._client,
-                        attemptLogin: loginMethod => this.attemptLogin(loginMethod),
+                        attemptLogin: (loginMethod: TokenLoginMethod) => this.attemptLogin(loginMethod),
                         loginToken: this._loginToken
                     })));
             this.emitChange("completeSSOLoginViewModel");
         }
         else {
-            await this.queryHomeserver();
+            void this.queryHomeserver();
         }
     }
 
-    _showPasswordLogin() {
+    private _showPasswordLogin(): void {
         this._passwordLoginViewModel = this.track(new PasswordLoginViewModel(
             this.childOptions({
                 loginOptions: this._loginOptions,
-                attemptLogin: loginMethod => this.attemptLogin(loginMethod)
+                attemptLogin: (loginMethod: PasswordLoginMethod) => this.attemptLogin(loginMethod)
         })));
         this.emitChange("passwordLoginViewModel");
     }
 
-    _showSSOLogin() {
+    private _showSSOLogin(): void {
         this._startSSOLoginViewModel = this.track(
             new StartSSOLoginViewModel(this.childOptions({loginOptions: this._loginOptions}))
         );
         this.emitChange("startSSOLoginViewModel");
     }
 
-    _showError(message) {
+    private _showError(message: string): void {
         this._errorMessage = message;
         this.emitChange("errorMessage");
     }
 
-    _setBusy(status) {
+    private _setBusy(status: boolean): void {
         this._isBusy = status;
         this._passwordLoginViewModel?.setBusy(status);
         this._startSSOLoginViewModel?.setBusy(status);
         this.emitChange("isBusy");
     }
 
-    async attemptLogin(loginMethod) {
+    async attemptLogin(loginMethod: ILoginMethod): Promise<null> {
         this._setBusy(true);
-        this._client.startWithLogin(loginMethod, {inspectAccountSetup: true});
+        void this._client.startWithLogin(loginMethod, {inspectAccountSetup: true});
         const loadStatus = this._client.loadStatus;
-        const handle = loadStatus.waitFor(status => status !== LoadStatus.Login);
+        const handle = loadStatus.waitFor((status: LoadStatus) => status !== LoadStatus.Login);
         await handle.promise;
         this._setBusy(false);
         const status = loadStatus.get();
@@ -119,11 +163,11 @@ export class LoginViewModel extends ViewModel {
         this._hideHomeserver = true;
         this.emitChange("hideHomeserver");
         this._disposeViewModels();
-        this._createLoadViewModel();
+        void this._createLoadViewModel();
         return null;
     }
 
-    _createLoadViewModel() {
+    private _createLoadViewModel(): void {
         this._loadViewModelSubscription = this.disposeTracked(this._loadViewModelSubscription);
         this._loadViewModel = this.disposeTracked(this._loadViewModel);
         this._loadViewModel = this.track(
@@ -139,7 +183,7 @@ export class LoginViewModel extends ViewModel {
                 })
             )
         );
-        this._loadViewModel.start();
+        void this._loadViewModel.start();
         this.emitChange("loadViewModel");
         this._loadViewModelSubscription = this.track(
             this._loadViewModel.disposableOn("change", () => {
@@ -151,22 +195,22 @@ export class LoginViewModel extends ViewModel {
         );
     }
 
-    _disposeViewModels() {
-        this._startSSOLoginViewModel = this.disposeTracked(this._ssoLoginViewModel);
+    private _disposeViewModels(): void {
+        this._startSSOLoginViewModel = this.disposeTracked(this._startSSOLoginViewModel);
         this._passwordLoginViewModel = this.disposeTracked(this._passwordLoginViewModel);
         this._completeSSOLoginViewModel = this.disposeTracked(this._completeSSOLoginViewModel);
         this.emitChange("disposeViewModels");
     }
 
-    async setHomeserver(newHomeserver) {
+    async setHomeserver(newHomeserver: string): Promise<void> {
         this._homeserver = newHomeserver;
         // clear everything set by queryHomeserver
-        this._loginOptions = null;
-        this._queriedHomeserver = null;
+        this._loginOptions = undefined;
+        this._queriedHomeserver = undefined;
         this._showError("");
         this._disposeViewModels();
         this._abortQueryOperation = this.disposeTracked(this._abortQueryOperation);
-        this.emitChange(); // multiple fields changing
+        this.emitChange("loginViewModels"); // multiple fields changing
         // also clear the timeout if it is still running
         this.disposeTracked(this._abortHomeserverQueryTimeout);
         const timeout = this.clock.createTimeout(1000);
@@ -181,10 +225,10 @@ export class LoginViewModel extends ViewModel {
             }
         }
         this._abortHomeserverQueryTimeout = this.disposeTracked(this._abortHomeserverQueryTimeout);
-        this.queryHomeserver();
+        void this.queryHomeserver();
     }
-    
-    async queryHomeserver() {
+
+    async queryHomeserver(): Promise<void> {
         // don't repeat a query we've just done
         if (this._homeserver === this._queriedHomeserver || this._homeserver === "") {
             return;
@@ -210,7 +254,7 @@ export class LoginViewModel extends ViewModel {
             if (e.name === "AbortError") {
                 return; //aborted, bail out
             } else {
-                this._loginOptions = null;
+                this._loginOptions = undefined;
             }
         } finally {
             this._abortQueryOperation = this.disposeTracked(this._abortQueryOperation);
@@ -221,19 +265,29 @@ export class LoginViewModel extends ViewModel {
             if (this._loginOptions.password) { this._showPasswordLogin(); }
             if (!this._loginOptions.sso && !this._loginOptions.password) {
                 this._showError("This homeserver supports neither SSO nor password based login flows");
-            } 
+            }
         }
         else {
             this._showError(`Could not query login methods supported by ${this.homeserver}`);
         }
     }
 
-    dispose() {
+    dispose(): void {
         super.dispose();
         if (this._client) {
             // if we move away before we're done with initial sync
             // delete the session
-            this._client.deleteSession();
+            void this._client.deleteSession();
         }
     }
 }
+
+type ReadyFn = (client: Client) => void;
+
+// TODO: move to Client.js when its converted to typescript.
+type LoginOptions = {
+    homeserver: string;
+    password?: (username: string, password: string) => PasswordLoginMethod;
+    sso?: SSOLoginHelper;
+    token?: (loginToken: string) => TokenLoginMethod;
+};

src/domain/login/PasswordLoginViewModel.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {ViewModel} from "../ViewModel.js";
+import {ViewModel} from "../ViewModel";
 import {LoginFailure} from "../../matrix/Client.js";
 
 export class PasswordLoginViewModel extends ViewModel {

src/domain/login/StartSSOLoginViewModel.js

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

src/domain/navigation/Navigation.ts

@@ -16,27 +16,49 @@ limitations under the License.
 
 import {BaseObservableValue, ObservableValue} from "../../observable/ObservableValue";
 
-export class Navigation {
-    constructor(allowsChild) {
+
+type AllowsChild<T> = (parent: Segment<T> | undefined, child: Segment<T>) => boolean;
+
+/**
+ * OptionalValue is basically stating that if SegmentType[type] = true:
+ * - Allow this type to be optional
+ * - Give it a default value of undefined
+ * - Also allow it to be true
+ * This lets us do:
+ * const s: Segment<SegmentType> = new Segment("create-room");
+ * instead of
+ * const s: Segment<SegmentType> = new Segment("create-room", undefined);
+ */
+export type OptionalValue<T> = T extends true? [(undefined | true)?]: [T];
+
+export class Navigation<T extends object> {
+    private readonly _allowsChild: AllowsChild<T>;
+    private _path: Path<T>;
+    private readonly _observables: Map<keyof T, SegmentObservable<T>> = new Map();
+    private readonly _pathObservable: ObservableValue<Path<T>>;
+
+    constructor(allowsChild: AllowsChild<T>) {
         this._allowsChild = allowsChild;
         this._path = new Path([], allowsChild);
-        this._observables = new Map();
         this._pathObservable = new ObservableValue(this._path);
     }
 
-    get pathObservable() {
+    get pathObservable(): ObservableValue<Path<T>> {
         return this._pathObservable;
     }
 
-    get path() {
+    get path(): Path<T> {
         return this._path;
     }
 
-    push(type, value = undefined) {
-        return this.applyPath(this.path.with(new Segment(type, value)));
+    push<K extends keyof T>(type: K, ...value: OptionalValue<T[K]>): void {
+        const newPath = this.path.with(new Segment(type, ...value));
+        if (newPath) {
+            this.applyPath(newPath);
+        }
     }
 
-    applyPath(path) {
+    applyPath(path: Path<T>): void {
         // Path is not exported, so you can only create a Path through Navigation,
         // so we assume it respects the allowsChild rules
         const oldPath = this._path;
@@ -60,7 +82,7 @@ export class Navigation {
         this._pathObservable.set(this._path);
     }
 
-    observe(type) {
+    observe(type: keyof T): SegmentObservable<T> {
         let observable = this._observables.get(type);
         if (!observable) {
             observable = new SegmentObservable(this, type);
@@ -69,9 +91,9 @@ export class Navigation {
         return observable;
     }
 
-    pathFrom(segments) {
-        let parent;
-        let i;
+    pathFrom(segments: Segment<any>[]): Path<T> {
+        let parent: Segment<any> | undefined;
+        let i: number;
         for (i = 0; i < segments.length; i += 1) {
             if (!this._allowsChild(parent, segments[i])) {
                 return new Path(segments.slice(0, i), this._allowsChild);
@@ -81,12 +103,12 @@ export class Navigation {
         return new Path(segments, this._allowsChild);
     }
 
-    segment(type, value) {
-        return new Segment(type, value);
+    segment<K extends keyof T>(type: K, ...value: OptionalValue<T[K]>): Segment<T> {
+        return new Segment(type, ...value);
     }
 }
 
-function segmentValueEqual(a, b) {
+function segmentValueEqual<T>(a?: T[keyof T], b?: T[keyof T]): boolean {
     if (a === b) {
         return true;
     }
@@ -103,24 +125,29 @@ function segmentValueEqual(a, b) {
     return false;
 }
 
-export class Segment {
-    constructor(type, value) {
-        this.type = type;
-        this.value = value === undefined ? true : value;
+
+export class Segment<T, K extends keyof T = any> {
+    public value: T[K];
+
+    constructor(public type: K, ...value: OptionalValue<T[K]>) {
+        this.value = (value[0] === undefined ? true : value[0]) as unknown as T[K];
     }
 }
 
-class Path {
-    constructor(segments = [], allowsChild) {
+class Path<T> {
+    private readonly _segments: Segment<T, any>[];
+    private readonly _allowsChild: AllowsChild<T>;
+
+    constructor(segments: Segment<T>[] = [], allowsChild: AllowsChild<T>) {
         this._segments = segments;
         this._allowsChild = allowsChild;
     }
 
-    clone() {
+    clone(): Path<T> {
         return new Path(this._segments.slice(), this._allowsChild);
     }
 
-    with(segment) {
+    with(segment: Segment<T>): Path<T> | undefined {
         let index = this._segments.length - 1;
         do {
             if (this._allowsChild(this._segments[index], segment)) {
@@ -132,10 +159,10 @@ class Path {
             index -= 1;
         } while(index >= -1);
         // allow -1 as well so we check if the segment is allowed as root
-        return null;
+        return undefined;
     }
 
-    until(type) {
+    until(type: keyof T): Path<T> {
         const index = this._segments.findIndex(s => s.type === type);
         if (index !== -1) {
             return new Path(this._segments.slice(0, index + 1), this._allowsChild)
@@ -143,11 +170,11 @@ class Path {
         return new Path([], this._allowsChild);
     }
 
-    get(type) {
+    get(type: keyof T): Segment<T> | undefined {
         return this._segments.find(s => s.type === type);
     }
 
-    replace(segment) {
+    replace(segment: Segment<T>): Path<T> | undefined {
         const index = this._segments.findIndex(s => s.type === segment.type);
         if (index !== -1) {
             const parent = this._segments[index - 1];
@@ -160,10 +187,10 @@ class Path {
                 }
             }
         }
-        return null;
+        return undefined;
     }
 
-    get segments() {
+    get segments(): Segment<T>[] {
         return this._segments;
     }
 }
@@ -172,43 +199,49 @@ class Path {
  * custom observable so it always returns what is in navigation.path, even if we haven't emitted the change yet.
  * This ensures that observers of a segment can also read the most recent value of other segments.
  */
-class SegmentObservable extends BaseObservableValue {
-    constructor(navigation, type) {
+class SegmentObservable<T extends object> extends BaseObservableValue<T[keyof T] | undefined> {
+    private readonly _navigation: Navigation<T>;
+    private _type: keyof T;
+    private _lastSetValue?: T[keyof T];
+        
+    constructor(navigation: Navigation<T>, type: keyof T) {
         super();
         this._navigation = navigation;
         this._type = type;
         this._lastSetValue = navigation.path.get(type)?.value;
     }
 
-    get() {
+    get(): T[keyof T] | undefined {
         const path = this._navigation.path;
         const segment = path.get(this._type);
         const value = segment?.value;
         return value;
     }
 
-    emitIfChanged() {
+    emitIfChanged(): void {
         const newValue = this.get();
-        if (!segmentValueEqual(newValue, this._lastSetValue)) {
+        if (!segmentValueEqual<T>(newValue, this._lastSetValue)) {
             this._lastSetValue = newValue;
             this.emit(newValue);
         }
     }
 }
 
+export type {Path};
+
 export function tests() {
 
     function createMockNavigation() {
         return new Navigation((parent, {type}) => {
             switch (parent?.type) {
                 case undefined:
-                    return type === "1" || "2";
+                    return type === "1" || type === "2";
                 case "1":
                     return type === "1.1";
                 case "1.1":
                     return type === "1.1.1";
                 case "2":
-                    return type === "2.1" || "2.2";
+                    return type === "2.1" || type === "2.2";
                 default:
                     return false;
             }
@@ -216,7 +249,7 @@ export function tests() {
     }
 
     function observeTypes(nav, types) {
-        const changes = [];
+        const changes: {type:string, value:any}[] = [];
         for (const type of types) {
             nav.observe(type).subscribe(value => {
                 changes.push({type, value});
@@ -225,6 +258,12 @@ export function tests() {
         return changes;
     }
 
+    type SegmentType = {
+        "foo": number;
+        "bar": number;
+        "baz": number;
+    }
+
     return {
         "applying a path emits an event on the observable": assert => {
             const nav = createMockNavigation();
@@ -242,18 +281,18 @@ export function tests() {
             assert.equal(changes[1].value, 8);
         },
         "path.get": assert => {
-            const path = new Path([new Segment("foo", 5), new Segment("bar", 6)], () => true);
-            assert.equal(path.get("foo").value, 5);
-            assert.equal(path.get("bar").value, 6);
+            const path = new Path<SegmentType>([new Segment("foo", 5), new Segment("bar", 6)], () => true);
+            assert.equal(path.get("foo")!.value, 5);
+            assert.equal(path.get("bar")!.value, 6);
         },
         "path.replace success": assert => {
-            const path = new Path([new Segment("foo", 5), new Segment("bar", 6)], () => true);
+            const path = new Path<SegmentType>([new Segment("foo", 5), new Segment("bar", 6)], () => true);
             const newPath = path.replace(new Segment("foo", 1));
-            assert.equal(newPath.get("foo").value, 1);
-            assert.equal(newPath.get("bar").value, 6);
+            assert.equal(newPath!.get("foo")!.value, 1);
+            assert.equal(newPath!.get("bar")!.value, 6);
         },
         "path.replace not found": assert => {
-            const path = new Path([new Segment("foo", 5), new Segment("bar", 6)], () => true);
+            const path = new Path<SegmentType>([new Segment("foo", 5), new Segment("bar", 6)], () => true);
             const newPath = path.replace(new Segment("baz", 1));
             assert.equal(newPath, null);
         }

src/domain/navigation/URLRouter.ts

@@ -14,28 +14,55 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-export class URLRouter {
-    constructor({history, navigation, parseUrlPath, stringifyPath}) {
+import type {History} from "../../platform/web/dom/History.js";
+import type {Navigation, Segment, Path, OptionalValue} from "./Navigation";
+import type {SubscriptionHandle} from "../../observable/BaseObservable";
+
+type ParseURLPath<T> = (urlPath: string, currentNavPath: Path<T>, defaultSessionId?: string) => Segment<T>[];
+type StringifyPath<T> = (path: Path<T>) => string;
+
+export interface IURLRouter<T> {
+    attach(): void;
+    dispose(): void;
+    pushUrl(url: string): void;
+    tryRestoreLastUrl(): boolean;
+    urlForSegments(segments: Segment<T>[]): string | undefined;
+    urlForSegment<K extends keyof T>(type: K, ...value: OptionalValue<T[K]>): string | undefined;
+    urlUntilSegment(type: keyof T): string;
+    urlForPath(path: Path<T>): string;
+    openRoomActionUrl(roomId: string): string;
+    createSSOCallbackURL(): string;
+    normalizeUrl(): void;
+}
+
+export class URLRouter<T extends {session: string | boolean}> implements IURLRouter<T> {
+    private readonly _history: History;
+    private readonly _navigation: Navigation<T>;
+    private readonly _parseUrlPath: ParseURLPath<T>;
+    private readonly _stringifyPath: StringifyPath<T>;
+    private _subscription?: SubscriptionHandle;
+    private _pathSubscription?: SubscriptionHandle;
+    private _isApplyingUrl: boolean = false;
+    private _defaultSessionId?: string;
+
+    constructor(history: History, navigation: Navigation<T>, parseUrlPath: ParseURLPath<T>, stringifyPath: StringifyPath<T>) {
         this._history = history;
         this._navigation = navigation;
         this._parseUrlPath = parseUrlPath;
         this._stringifyPath = stringifyPath;
-        this._subscription = null;
-        this._pathSubscription = null;
-        this._isApplyingUrl = false;
         this._defaultSessionId = this._getLastSessionId();
     }
 
-    _getLastSessionId() {
-        const navPath = this._urlAsNavPath(this._history.getLastUrl() || "");
+    private _getLastSessionId(): string | undefined {
+        const navPath = this._urlAsNavPath(this._history.getLastSessionUrl() || "");
         const sessionId = navPath.get("session")?.value;
         if (typeof sessionId === "string") {
             return sessionId;
         }
-        return null;
+        return undefined;
     }
 
-    attach() {
+    attach(): void {
         this._subscription = this._history.subscribe(url => this._applyUrl(url));
         // subscribe to path before applying initial url
         // so redirects in _applyNavPathToHistory are reflected in url bar
@@ -43,12 +70,12 @@ export class URLRouter {
         this._applyUrl(this._history.get());
     }
 
-    dispose() {
-        this._subscription = this._subscription();
-        this._pathSubscription = this._pathSubscription();
+    dispose(): void {
+        if (this._subscription) { this._subscription = this._subscription(); }
+        if (this._pathSubscription) { this._pathSubscription = this._pathSubscription(); }
     }
 
-    _applyNavPathToHistory(path) {
+    private _applyNavPathToHistory(path: Path<T>): void {
         const url = this.urlForPath(path);
         if (url !== this._history.get()) {
             if (this._isApplyingUrl) {
@@ -60,7 +87,7 @@ export class URLRouter {
         }
     }
 
-    _applyNavPathToNavigation(navPath) {
+    private _applyNavPathToNavigation(navPath: Path<T>): void {
         // this will cause _applyNavPathToHistory to be called,
         // so set a flag whether this request came from ourselves
         // (in which case it is a redirect if the url does not match the current one)
@@ -69,22 +96,22 @@ export class URLRouter {
         this._isApplyingUrl = false;
     }
 
-    _urlAsNavPath(url) {
+    private _urlAsNavPath(url: string): Path<T> {
         const urlPath = this._history.urlAsPath(url);
         return this._navigation.pathFrom(this._parseUrlPath(urlPath, this._navigation.path, this._defaultSessionId));
     }
 
-    _applyUrl(url) {
+    private _applyUrl(url: string): void {
         const navPath = this._urlAsNavPath(url);
         this._applyNavPathToNavigation(navPath);
     }
 
-    pushUrl(url) {
+    pushUrl(url: string): void {
         this._history.pushUrl(url);
     }
 
-    tryRestoreLastUrl() {
-        const lastNavPath = this._urlAsNavPath(this._history.getLastUrl() || "");
+    tryRestoreLastUrl(): boolean {
+        const lastNavPath = this._urlAsNavPath(this._history.getLastSessionUrl() || "");
         if (lastNavPath.segments.length !== 0) {
             this._applyNavPathToNavigation(lastNavPath);
             return true;
@@ -92,8 +119,8 @@ export class URLRouter {
         return false;
     }
 
-    urlForSegments(segments) {
-        let path = this._navigation.path;
+    urlForSegments(segments: Segment<T>[]): string | undefined {
+        let path: Path<T> | undefined = this._navigation.path;
         for (const segment of segments) {
             path = path.with(segment);
             if (!path) {
@@ -103,29 +130,29 @@ export class URLRouter {
         return this.urlForPath(path);
     }
 
-    urlForSegment(type, value) {
-        return this.urlForSegments([this._navigation.segment(type, value)]);
+    urlForSegment<K extends keyof T>(type: K, ...value: OptionalValue<T[K]>): string | undefined {
+        return this.urlForSegments([this._navigation.segment(type, ...value)]);
     }
 
-    urlUntilSegment(type) {
+    urlUntilSegment(type: keyof T): string {
         return this.urlForPath(this._navigation.path.until(type));
     }
 
-    urlForPath(path) {
+    urlForPath(path: Path<T>): string {
         return this._history.pathAsUrl(this._stringifyPath(path));
     }
 
-    openRoomActionUrl(roomId) {
+    openRoomActionUrl(roomId: string): string {
         // not a segment to navigation knowns about, so append it manually
         const urlPath = `${this._stringifyPath(this._navigation.path.until("session"))}/open-room/${roomId}`;
         return this._history.pathAsUrl(urlPath);
     }
 
-    createSSOCallbackURL() {
+    createSSOCallbackURL(): string {
         return window.location.origin;
     }
 
-    normalizeUrl() {
+    normalizeUrl(): void {
         // Remove any queryParameters from the URL
         // Gets rid of the loginToken after SSO
         this._history.replaceUrlSilently(`${window.location.origin}/${window.location.hash}`);

src/domain/navigation/index.ts

@@ -14,18 +14,36 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {Navigation, Segment} from "./Navigation.js";
-import {URLRouter} from "./URLRouter.js";
+import {Navigation, Segment} from "./Navigation";
+import {URLRouter} from "./URLRouter";
+import type {Path, OptionalValue} from "./Navigation";
 
-export function createNavigation() {
+export type SegmentType = {
+    "login": true;
+    "session": string | boolean;
+    "sso": string;
+    "logout": true;
+    "room": string;
+    "rooms": string[];
+    "settings": true;
+    "create-room": true;
+    "empty-grid-tile": number;
+    "lightbox": string;
+    "right-panel": true;
+    "details": true;
+    "members": true;
+    "member": string;
+};
+
+export function createNavigation(): Navigation<SegmentType> {
     return new Navigation(allowsChild);
 }
 
-export function createRouter({history, navigation}) {
-    return new URLRouter({history, navigation, stringifyPath, parseUrlPath});
+export function createRouter({history, navigation}: {history: History, navigation: Navigation<SegmentType>}): URLRouter<SegmentType> {
+    return new URLRouter(history, navigation, parseUrlPath, stringifyPath);
 }
 
-function allowsChild(parent, child) {
+function allowsChild(parent: Segment<SegmentType> | undefined, child: Segment<SegmentType>): boolean {
     const {type} = child;
     switch (parent?.type) {
         case undefined:
@@ -45,8 +63,9 @@ function allowsChild(parent, child) {
     }
 }
 
-export function removeRoomFromPath(path, roomId) {
-    const rooms = path.get("rooms");
+export function removeRoomFromPath(path: Path<SegmentType>, roomId: string): Path<SegmentType> | undefined {
+    let newPath: Path<SegmentType> | undefined = path;
+    const rooms = newPath.get("rooms");
     let roomIdGridIndex = -1;
     // first delete from rooms segment
     if (rooms) {
@@ -54,22 +73,22 @@ export function removeRoomFromPath(path, roomId) {
         if (roomIdGridIndex !== -1) {
             const idsWithoutRoom = rooms.value.slice();
             idsWithoutRoom[roomIdGridIndex] = "";
-            path = path.replace(new Segment("rooms", idsWithoutRoom));
+            newPath = newPath.replace(new Segment("rooms", idsWithoutRoom));
         }
     }
-    const room = path.get("room");
+    const room = newPath!.get("room");
     // then from room (which occurs with or without rooms)
     if (room && room.value === roomId) {
         if (roomIdGridIndex !== -1) {
-            path = path.with(new Segment("empty-grid-tile", roomIdGridIndex));
+            newPath = newPath!.with(new Segment("empty-grid-tile", roomIdGridIndex));
         } else {
-            path = path.until("session");
+            newPath = newPath!.until("session");
         }
     }
-    return path;
+    return newPath;
 }
 
-function roomsSegmentWithRoom(rooms, roomId, path) {
+function roomsSegmentWithRoom(rooms: Segment<SegmentType, "rooms">, roomId: string, path: Path<SegmentType>): Segment<SegmentType, "rooms"> {
     if(!rooms.value.includes(roomId)) {
         const emptyGridTile = path.get("empty-grid-tile");
         const oldRoom = path.get("room");
@@ -87,28 +106,28 @@ function roomsSegmentWithRoom(rooms, roomId, path) {
     }
 }
 
-function pushRightPanelSegment(array, segment, value = true) {
+function pushRightPanelSegment<T extends keyof SegmentType>(array: Segment<SegmentType>[], segment: T, ...value: OptionalValue<SegmentType[T]>): void {
     array.push(new Segment("right-panel"));
-    array.push(new Segment(segment, value));
+    array.push(new Segment(segment, ...value));
 }
 
-export function addPanelIfNeeded(navigation, path) {
+export function addPanelIfNeeded<T extends SegmentType>(navigation: Navigation<T>, path: Path<T>): Path<T> {
     const segments = navigation.path.segments;
     const i = segments.findIndex(segment => segment.type === "right-panel");
     let _path = path;
     if (i !== -1) {
         _path = path.until("room");
-        _path = _path.with(segments[i]);
-        _path = _path.with(segments[i + 1]);
+        _path = _path.with(segments[i])!;
+        _path = _path.with(segments[i + 1])!;
     }
     return _path;
 }
 
-export function parseUrlPath(urlPath, currentNavPath, defaultSessionId) {
-    // substr(1) to take of initial /
-    const parts = urlPath.substr(1).split("/");
+export function parseUrlPath(urlPath: string, currentNavPath: Path<SegmentType>, defaultSessionId?: string): Segment<SegmentType>[] {
+    // substring(1) to take of initial /
+    const parts = urlPath.substring(1).split("/");
     const iterator = parts[Symbol.iterator]();
-    const segments = [];
+    const segments: Segment<SegmentType>[] = [];
     let next; 
     while (!(next = iterator.next()).done) {
         const type = next.value;
@@ -170,9 +189,9 @@ export function parseUrlPath(urlPath, currentNavPath, defaultSessionId) {
     return segments;
 }
 
-export function stringifyPath(path) {
+export function stringifyPath(path: Path<SegmentType>): string {
     let urlPath = "";
-    let prevSegment;
+    let prevSegment: Segment<SegmentType> | undefined;
     for (const segment of path.segments) {
         switch (segment.type) {
             case "rooms":
@@ -205,9 +224,15 @@ export function stringifyPath(path) {
 }
 
 export function tests() {
+    function createEmptyPath() {
+        const nav: Navigation<SegmentType> = new Navigation(allowsChild);
+        const path = nav.pathFrom([]);
+        return path;
+    }
+
     return {
         "stringify grid url with focused empty tile": assert => {
-            const nav = new Navigation(allowsChild);
+            const nav: Navigation<SegmentType> = new Navigation(allowsChild);
             const path = nav.pathFrom([
                 new Segment("session", 1),
                 new Segment("rooms", ["a", "b", "c"]),
@@ -217,7 +242,7 @@ export function tests() {
             assert.equal(urlPath, "/session/1/rooms/a,b,c/3");
         },
         "stringify grid url with focused room": assert => {
-            const nav = new Navigation(allowsChild);
+            const nav: Navigation<SegmentType> = new Navigation(allowsChild);
             const path = nav.pathFrom([
                 new Segment("session", 1),
                 new Segment("rooms", ["a", "b", "c"]),
@@ -227,7 +252,7 @@ export function tests() {
             assert.equal(urlPath, "/session/1/rooms/a,b,c/1");
         },
         "stringify url with right-panel and details segment": assert => {
-            const nav = new Navigation(allowsChild);
+            const nav: Navigation<SegmentType> = new Navigation(allowsChild);
             const path = nav.pathFrom([
                 new Segment("session", 1),
                 new Segment("rooms", ["a", "b", "c"]),
@@ -239,13 +264,15 @@ export function tests() {
             assert.equal(urlPath, "/session/1/rooms/a,b,c/1/details");
         },
         "Parse loginToken query parameter into SSO segment": assert => {
-            const segments = parseUrlPath("?loginToken=a1232aSD123");
+            const path = createEmptyPath();
+            const segments = parseUrlPath("?loginToken=a1232aSD123", path);
             assert.equal(segments.length, 1);
             assert.equal(segments[0].type, "sso");
             assert.equal(segments[0].value, "a1232aSD123");
         },
         "parse grid url path with focused empty tile": assert => {
-            const segments = parseUrlPath("/session/1/rooms/a,b,c/3");
+            const path = createEmptyPath();
+            const segments = parseUrlPath("/session/1/rooms/a,b,c/3", path);
             assert.equal(segments.length, 3);
             assert.equal(segments[0].type, "session");
             assert.equal(segments[0].value, "1");
@@ -255,7 +282,8 @@ export function tests() {
             assert.equal(segments[2].value, 3);
         },
         "parse grid url path with focused room": assert => {
-            const segments = parseUrlPath("/session/1/rooms/a,b,c/1");
+            const path = createEmptyPath();
+            const segments = parseUrlPath("/session/1/rooms/a,b,c/1", path);
             assert.equal(segments.length, 3);
             assert.equal(segments[0].type, "session");
             assert.equal(segments[0].value, "1");
@@ -265,7 +293,8 @@ export function tests() {
             assert.equal(segments[2].value, "b");
         },
         "parse empty grid url": assert => {
-            const segments = parseUrlPath("/session/1/rooms/");
+            const path = createEmptyPath();
+            const segments = parseUrlPath("/session/1/rooms/", path);
             assert.equal(segments.length, 3);
             assert.equal(segments[0].type, "session");
             assert.equal(segments[0].value, "1");
@@ -275,7 +304,8 @@ export function tests() {
             assert.equal(segments[2].value, 0);
         },
         "parse empty grid url with focus": assert => {
-            const segments = parseUrlPath("/session/1/rooms//1");
+            const path = createEmptyPath();
+            const segments = parseUrlPath("/session/1/rooms//1", path);
             assert.equal(segments.length, 3);
             assert.equal(segments[0].type, "session");
             assert.equal(segments[0].value, "1");
@@ -285,7 +315,7 @@ export function tests() {
             assert.equal(segments[2].value, 1);
         },
         "parse open-room action replacing the current focused room": assert => {
-            const nav = new Navigation(allowsChild);
+            const nav: Navigation<SegmentType> = new Navigation(allowsChild);
             const path = nav.pathFrom([
                 new Segment("session", 1),
                 new Segment("rooms", ["a", "b", "c"]),
@@ -301,7 +331,7 @@ export function tests() {
             assert.equal(segments[2].value, "d");
         },
         "parse open-room action changing focus to an existing room": assert => {
-            const nav = new Navigation(allowsChild);
+            const nav: Navigation<SegmentType> = new Navigation(allowsChild);
             const path = nav.pathFrom([
                 new Segment("session", 1),
                 new Segment("rooms", ["a", "b", "c"]),
@@ -317,7 +347,7 @@ export function tests() {
             assert.equal(segments[2].value, "a");
         },
         "parse open-room action changing focus to an existing room with details open": assert => {
-            const nav = new Navigation(allowsChild);
+            const nav: Navigation<SegmentType> = new Navigation(allowsChild);
             const path = nav.pathFrom([
                 new Segment("session", 1),
                 new Segment("rooms", ["a", "b", "c"]),
@@ -339,7 +369,7 @@ export function tests() {
             assert.equal(segments[4].value, true);
         },
         "open-room action should only copy over previous segments if there are no parts after open-room": assert => {
-            const nav = new Navigation(allowsChild);
+            const nav: Navigation<SegmentType> = new Navigation(allowsChild);
             const path = nav.pathFrom([
                 new Segment("session", 1),
                 new Segment("rooms", ["a", "b", "c"]),
@@ -361,7 +391,7 @@ export function tests() {
             assert.equal(segments[4].value, "foo");
         },
         "parse open-room action setting a room in an empty tile": assert => {
-            const nav = new Navigation(allowsChild);
+            const nav: Navigation<SegmentType> = new Navigation(allowsChild);
             const path = nav.pathFrom([
                 new Segment("session", 1),
                 new Segment("rooms", ["a", "b", "c"]),
@@ -377,82 +407,83 @@ export function tests() {
             assert.equal(segments[2].value, "d");
         },
         "parse session url path without id": assert => {
-            const segments = parseUrlPath("/session");
+            const path = createEmptyPath();
+            const segments = parseUrlPath("/session", path);
             assert.equal(segments.length, 1);
             assert.equal(segments[0].type, "session");
             assert.strictEqual(segments[0].value, true);
         },
         "remove active room from grid path turns it into empty tile": assert => {
-            const nav = new Navigation(allowsChild);
+            const nav: Navigation<SegmentType> = new Navigation(allowsChild);
             const path = nav.pathFrom([
                 new Segment("session", 1),
                 new Segment("rooms", ["a", "b", "c"]),
                 new Segment("room", "b")
             ]);
             const newPath = removeRoomFromPath(path, "b");
-            assert.equal(newPath.segments.length, 3);
-            assert.equal(newPath.segments[0].type, "session");
-            assert.equal(newPath.segments[0].value, 1);
-            assert.equal(newPath.segments[1].type, "rooms");
-            assert.deepEqual(newPath.segments[1].value, ["a", "", "c"]);
-            assert.equal(newPath.segments[2].type, "empty-grid-tile");
-            assert.equal(newPath.segments[2].value, 1);
+            assert.equal(newPath?.segments.length, 3);
+            assert.equal(newPath?.segments[0].type, "session");
+            assert.equal(newPath?.segments[0].value, 1);
+            assert.equal(newPath?.segments[1].type, "rooms");
+            assert.deepEqual(newPath?.segments[1].value, ["a", "", "c"]);
+            assert.equal(newPath?.segments[2].type, "empty-grid-tile");
+            assert.equal(newPath?.segments[2].value, 1);
         },
         "remove inactive room from grid path": assert => {
-            const nav = new Navigation(allowsChild);
+            const nav: Navigation<SegmentType> = new Navigation(allowsChild);
             const path = nav.pathFrom([
                 new Segment("session", 1),
                 new Segment("rooms", ["a", "b", "c"]),
                 new Segment("room", "b")
             ]);
             const newPath = removeRoomFromPath(path, "a");
-            assert.equal(newPath.segments.length, 3);
-            assert.equal(newPath.segments[0].type, "session");
-            assert.equal(newPath.segments[0].value, 1);
-            assert.equal(newPath.segments[1].type, "rooms");
-            assert.deepEqual(newPath.segments[1].value, ["", "b", "c"]);
-            assert.equal(newPath.segments[2].type, "room");
-            assert.equal(newPath.segments[2].value, "b");
+            assert.equal(newPath?.segments.length, 3);
+            assert.equal(newPath?.segments[0].type, "session");
+            assert.equal(newPath?.segments[0].value, 1);
+            assert.equal(newPath?.segments[1].type, "rooms");
+            assert.deepEqual(newPath?.segments[1].value, ["", "b", "c"]);
+            assert.equal(newPath?.segments[2].type, "room");
+            assert.equal(newPath?.segments[2].value, "b");
         },
         "remove inactive room from grid path with empty tile": assert => {
-            const nav = new Navigation(allowsChild);
+            const nav: Navigation<SegmentType> = new Navigation(allowsChild);
             const path = nav.pathFrom([
                 new Segment("session", 1),
                 new Segment("rooms", ["a", "b", ""]),
                 new Segment("empty-grid-tile", 3)
             ]);
             const newPath = removeRoomFromPath(path, "b");
-            assert.equal(newPath.segments.length, 3);
-            assert.equal(newPath.segments[0].type, "session");
-            assert.equal(newPath.segments[0].value, 1);
-            assert.equal(newPath.segments[1].type, "rooms");
-            assert.deepEqual(newPath.segments[1].value, ["a", "", ""]);
-            assert.equal(newPath.segments[2].type, "empty-grid-tile");
-            assert.equal(newPath.segments[2].value, 3);
+            assert.equal(newPath?.segments.length, 3);
+            assert.equal(newPath?.segments[0].type, "session");
+            assert.equal(newPath?.segments[0].value, 1);
+            assert.equal(newPath?.segments[1].type, "rooms");
+            assert.deepEqual(newPath?.segments[1].value, ["a", "", ""]);
+            assert.equal(newPath?.segments[2].type, "empty-grid-tile");
+            assert.equal(newPath?.segments[2].value, 3);
         },
         "remove active room": assert => {
-            const nav = new Navigation(allowsChild);
+            const nav: Navigation<SegmentType> = new Navigation(allowsChild);
             const path = nav.pathFrom([
                 new Segment("session", 1),
                 new Segment("room", "b")
             ]);
             const newPath = removeRoomFromPath(path, "b");
-            assert.equal(newPath.segments.length, 1);
-            assert.equal(newPath.segments[0].type, "session");
-            assert.equal(newPath.segments[0].value, 1);
+            assert.equal(newPath?.segments.length, 1);
+            assert.equal(newPath?.segments[0].type, "session");
+            assert.equal(newPath?.segments[0].value, 1);
         },
         "remove inactive room doesn't do anything": assert => {
-            const nav = new Navigation(allowsChild);
+            const nav: Navigation<SegmentType> = new Navigation(allowsChild);
             const path = nav.pathFrom([
                 new Segment("session", 1),
                 new Segment("room", "b")
             ]);
             const newPath = removeRoomFromPath(path, "a");
-            assert.equal(newPath.segments.length, 2);
-            assert.equal(newPath.segments[0].type, "session");
-            assert.equal(newPath.segments[0].value, 1);
-            assert.equal(newPath.segments[1].type, "room");
-            assert.equal(newPath.segments[1].value, "b");
+            assert.equal(newPath?.segments.length, 2);
+            assert.equal(newPath?.segments[0].type, "session");
+            assert.equal(newPath?.segments[0].value, 1);
+            assert.equal(newPath?.segments[1].type, "room");
+            assert.equal(newPath?.segments[1].value, "b");
         },
         
     }

src/domain/rageshake.ts

@@ -0,0 +1,65 @@
+/*
+Copyright 2022 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 type {BlobHandle} from "../platform/web/dom/BlobHandle";
+import type {RequestFunction} from "../platform/types/types";
+
+// see https://github.com/matrix-org/rageshake#readme
+type RageshakeData = {
+    // A textual description of the problem. Included in the details.log.gz file.
+    text: string | undefined;
+    // Application user-agent. Included in the details.log.gz file.
+    userAgent: string;
+    // Identifier for the application (eg 'riot-web'). Should correspond to a mapping configured in the configuration file for github issue reporting to work.
+    app: string;
+    // Application version. Included in the details.log.gz file.
+    version: string;
+    // Label to attach to the github issue, and include in the details file.
+    label: string | undefined;
+};
+
+export async function submitLogsToRageshakeServer(data: RageshakeData, logsBlob: BlobHandle, submitUrl: string, request: RequestFunction): Promise<void> {
+    const formData = new Map<string, string | {name: string, blob: BlobHandle}>();
+    if (data.text) {
+        formData.set("text", data.text);
+    }
+    formData.set("user_agent", data.userAgent);
+    formData.set("app", data.app);
+    formData.set("version", data.version);
+    if (data.label) {
+        formData.set("label", data.label);
+    }
+    formData.set("file", {name: "logs.json", blob: logsBlob});
+    const headers: Map<string, string> = new Map();
+    headers.set("Accept", "application/json");
+    const result = request(submitUrl, {
+        method: "POST",
+        body: formData,
+        headers
+    });
+    let response;
+    try {
+        response = await result.response();
+    } catch (err) {
+        throw new Error(`Could not submit logs to ${submitUrl}, got error ${err.message}`);
+    }
+    const {status, body} = response;
+    if (status < 200 || status >= 300) {
+        throw new Error(`Could not submit logs to ${submitUrl}, got status code ${status} with body ${body}`);
+    }
+    // we don't bother with reading report_url from the body as the rageshake server doesn't always return it
+    // and would have to have CORS setup properly for us to be able to read it.
+}

src/domain/session/CreateRoomViewModel.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {ViewModel} from "../ViewModel.js";
+import {ViewModel} from "../ViewModel";
 import {imageToInfo} from "./common.js";
 import {RoomType} from "../../matrix/room/common";
 

src/domain/session/RoomGridViewModel.js

@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {ViewModel} from "../ViewModel.js";
-import {addPanelIfNeeded} from "../navigation/index.js";
+import {ViewModel} from "../ViewModel";
+import {addPanelIfNeeded} from "../navigation/index";
 
 function dedupeSparse(roomIds) {
     return roomIds.map((id, idx) => {
@@ -185,7 +185,7 @@ export class RoomGridViewModel extends ViewModel {
     }
 }
 
-import {createNavigation} from "../navigation/index.js";
+import {createNavigation} from "../navigation/index";
 import {ObservableValue} from "../../observable/ObservableValue";
 
 export function tests() { 

src/domain/session/SessionStatusViewModel.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {ViewModel} from "../ViewModel.js";
+import {ViewModel} from "../ViewModel";
 import {createEnum} from "../../utils/enum";
 import {ConnectionStatus} from "../../matrix/net/Reconnector";
 import {SyncStatus} from "../../matrix/Sync.js";

src/domain/session/SessionViewModel.js

@@ -25,7 +25,7 @@ import {SessionStatusViewModel} from "./SessionStatusViewModel.js";
 import {RoomGridViewModel} from "./RoomGridViewModel.js";
 import {SettingsViewModel} from "./settings/SettingsViewModel.js";
 import {CreateRoomViewModel} from "./CreateRoomViewModel.js";
-import {ViewModel} from "../ViewModel.js";
+import {ViewModel} from "../ViewModel";
 import {RoomViewModelObservable} from "./RoomViewModelObservable.js";
 import {RightPanelViewModel} from "./rightpanel/RightPanelViewModel.js";
 

src/domain/session/leftpanel/BaseTileViewModel.js

@@ -15,8 +15,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar.js";
-import {ViewModel} from "../../ViewModel.js";
+import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar";
+import {ViewModel} from "../../ViewModel";
 
 const KIND_ORDER = ["roomBeingCreated", "invite", "room"];
 

src/domain/session/leftpanel/LeftPanelViewModel.js

@@ -15,13 +15,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {ViewModel} from "../../ViewModel.js";
+import {ViewModel} from "../../ViewModel";
 import {RoomTileViewModel} from "./RoomTileViewModel.js";
 import {InviteTileViewModel} from "./InviteTileViewModel.js";
 import {RoomBeingCreatedTileViewModel} from "./RoomBeingCreatedTileViewModel.js";
 import {RoomFilter} from "./RoomFilter.js";
 import {ApplyMap} from "../../../observable/map/ApplyMap.js";
-import {addPanelIfNeeded} from "../../navigation/index.js";
+import {addPanelIfNeeded} from "../../navigation/index";
 
 export class LeftPanelViewModel extends ViewModel {
     constructor(options) {

src/domain/session/rightpanel/MemberDetailsViewModel.js

@@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {ViewModel} from "../../ViewModel.js";
+import {ViewModel} from "../../ViewModel";
 import {RoomType} from "../../../matrix/room/common";
-import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar.js";
+import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar";
 
 export class MemberDetailsViewModel extends ViewModel {
     constructor(options) {

src/domain/session/rightpanel/MemberListViewModel.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {ViewModel} from "../../ViewModel.js";
+import {ViewModel} from "../../ViewModel";
 import {MemberTileViewModel} from "./MemberTileViewModel.js";
 import {createMemberComparator} from "./members/comparator.js";
 import {Disambiguator} from "./members/disambiguator.js";

src/domain/session/rightpanel/MemberTileViewModel.js

@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {ViewModel} from "../../ViewModel.js";
-import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar.js";
+import {ViewModel} from "../../ViewModel";
+import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar";
 
 export class MemberTileViewModel extends ViewModel {
     constructor(options) {

src/domain/session/rightpanel/RightPanelViewModel.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {ViewModel} from "../../ViewModel.js";
+import {ViewModel} from "../../ViewModel";
 import {RoomDetailsViewModel} from "./RoomDetailsViewModel.js";
 import {MemberListViewModel} from "./MemberListViewModel.js";
 import {MemberDetailsViewModel} from "./MemberDetailsViewModel.js";

src/domain/session/rightpanel/RoomDetailsViewModel.js

@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {ViewModel} from "../../ViewModel.js";
-import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar.js";
+import {ViewModel} from "../../ViewModel";
+import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar";
 
 export class RoomDetailsViewModel extends ViewModel {
     constructor(options) {

src/domain/session/room/ComposerViewModel.js

@@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {ViewModel} from "../../ViewModel.js";
+import {ViewModel} from "../../ViewModel";
 
 export class ComposerViewModel extends ViewModel {
     constructor(roomVM) {
-        super();
+        super(roomVM.options);
         this._roomVM = roomVM;
         this._isEmpty = true;
         this._replyVM = null;

src/domain/session/room/InviteViewModel.js

@@ -15,8 +15,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar.js";
-import {ViewModel} from "../../ViewModel.js";
+import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar";
+import {ViewModel} from "../../ViewModel";
 
 export class InviteViewModel extends ViewModel {
     constructor(options) {

src/domain/session/room/LightboxViewModel.js

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

src/domain/session/room/RoomBeingCreatedViewModel.js

@@ -15,8 +15,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar.js";
-import {ViewModel} from "../../ViewModel.js";
+import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar";
+import {ViewModel} from "../../ViewModel";
 
 export class RoomBeingCreatedViewModel extends ViewModel {
     constructor(options) {

src/domain/session/room/RoomViewModel.js

@@ -17,26 +17,30 @@ limitations under the License.
 
 import {TimelineViewModel} from "./timeline/TimelineViewModel.js";
 import {ComposerViewModel} from "./ComposerViewModel.js"
-import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar.js";
-import {tilesCreator} from "./timeline/tilesCreator.js";
-import {ViewModel} from "../../ViewModel.js";
+import {avatarInitials, getIdentifierColorNumber, getAvatarHttpUrl} from "../../avatar";
+import {ViewModel} from "../../ViewModel";
 import {imageToInfo} from "../common.js";
+// TODO: remove fallback so default isn't included in bundle for SDK users that have their custom tileClassForEntry
+// this is a breaking SDK change though to make this option mandatory
+import {tileClassForEntry as defaultTileClassForEntry} from "./timeline/tiles/index";
+import {RoomStatus} from "../../../matrix/room/common";
 
 export class RoomViewModel extends ViewModel {
     constructor(options) {
         super(options);
-        const {room} = options;
+        const {room, tileClassForEntry} = options;
         this._room = room;
         this._timelineVM = null;
-        this._tilesCreator = null;
+        this._tileClassForEntry = tileClassForEntry ?? defaultTileClassForEntry;
+        this._tileOptions = undefined;
         this._onRoomChange = this._onRoomChange.bind(this);
         this._timelineError = null;
         this._sendError = null;
         this._composerVM = null;
         if (room.isArchived) {
-            this._composerVM = new ArchivedViewModel(this.childOptions({archivedRoom: room}));
+            this._composerVM = this.track(new ArchivedViewModel(this.childOptions({archivedRoom: room})));
         } else {
-            this._composerVM = new ComposerViewModel(this);
+            this._recreateComposerOnPowerLevelChange();
         }
         this._clearUnreadTimout = null;
         this._closeUrl = this.urlCreator.urlUntilSegment("session");
@@ -46,12 +50,13 @@ export class RoomViewModel extends ViewModel {
         this._room.on("change", this._onRoomChange);
         try {
             const timeline = await this._room.openTimeline();
-            this._tilesCreator = tilesCreator(this.childOptions({
+            this._tileOptions = this.childOptions({
                 roomVM: this,
                 timeline,
-            }));
+                tileClassForEntry: this._tileClassForEntry,
+            });
             this._timelineVM = this.track(new TimelineViewModel(this.childOptions({
-                tilesCreator: this._tilesCreator,
+                tileOptions: this._tileOptions,
                 timeline,
             })));
             this.emitChange("timelineViewModel");
@@ -63,6 +68,30 @@ export class RoomViewModel extends ViewModel {
         this._clearUnreadAfterDelay();
     }
 
+    async _recreateComposerOnPowerLevelChange() {
+        const powerLevelObservable = await this._room.observePowerLevels();
+        const canSendMessage = () => powerLevelObservable.get().canSendType("m.room.message");
+        let oldCanSendMessage = canSendMessage();
+        const recreateComposer = newCanSendMessage => {
+            this._composerVM = this.disposeTracked(this._composerVM);
+            if (newCanSendMessage) {
+                this._composerVM = this.track(new ComposerViewModel(this));
+            }
+            else {
+                this._composerVM = this.track(new LowerPowerLevelViewModel(this.childOptions()));
+            }
+            this.emitChange("powerLevelObservable")
+        };
+        this.track(powerLevelObservable.subscribe(() => {
+            const newCanSendMessage = canSendMessage();
+            if (oldCanSendMessage !== newCanSendMessage) {
+                recreateComposer(newCanSendMessage);
+                oldCanSendMessage = newCanSendMessage;
+            }
+        }));
+        recreateComposer(oldCanSendMessage);
+    }
+
     async _clearUnreadAfterDelay() {
         if (this._room.isArchived || this._clearUnreadTimout) {
             return;
@@ -161,21 +190,97 @@ export class RoomViewModel extends ViewModel {
     }
 
     _createTile(entry) {
-        return this._tilesCreator(entry);
+        if (this._tileOptions) {
+            const Tile = this._tileOptions.tileClassForEntry(entry);
+            if (Tile) {
+                return new Tile(entry, this._tileOptions);
+            }
+        }
     }
     
+    async _processCommandJoin(roomName) {
+        try {
+            const roomId = await this._options.client.session.joinRoom(roomName);
+            const roomStatusObserver = await this._options.client.session.observeRoomStatus(roomId);
+            await roomStatusObserver.waitFor(status => status === RoomStatus.Joined);
+            this.navigation.push("room", roomId);
+        } catch (err) {
+            let exc;
+            if ((err.statusCode ?? err.status) === 400) {
+                exc = new Error(`/join : '${roomName}' was not legal room ID or room alias`);
+            } else if ((err.statusCode ?? err.status) === 404 || (err.statusCode ?? err.status) === 502 || err.message == "Internal Server Error") {
+                exc = new Error(`/join : room '${roomName}' not found`);
+            } else if ((err.statusCode ?? err.status) === 403) {
+                exc = new Error(`/join : you're not invited to join '${roomName}'`);
+            } else {
+                exc = err;
+            }
+            this._sendError = exc;
+            this._timelineError = null;
+            this.emitChange("error");
+        }
+    } 
+
+    async _processCommand (message) {
+        let msgtype;
+        const [commandName, ...args] = message.substring(1).split(" ");
+        switch (commandName) {
+            case "me":
+                message = args.join(" ");
+                msgtype = "m.emote";
+                break;
+            case "join":
+                if (args.length === 1) {
+                    const roomName = args[0];
+                    await this._processCommandJoin(roomName);
+                } else {
+                    this._sendError = new Error("join syntax: /join <room-id>");
+                    this._timelineError = null;
+                    this.emitChange("error");
+                }
+                break;
+            case "shrug":
+                message = "¯\\_(ツ)_/¯ " + args.join(" ");
+                msgtype = "m.text";
+                break;
+            case "tableflip":
+                message = "(╯°□°）╯︵ ┻━┻ " + args.join(" ");
+                msgtype = "m.text";
+                break;
+            case "unflip":
+                message = "┬──┬ ノ( ゜-゜ノ) " + args.join(" ");
+                msgtype = "m.text";
+                break;
+            case "lenny":
+                message = "( ͡° ͜ʖ ͡°) " + args.join(" ");
+                msgtype = "m.text";
+                break;
+            default:
+                this._sendError = new Error(`no command name "${commandName}". To send the message instead of executing, please type "/${message}"`);
+                this._timelineError = null;
+                this.emitChange("error");
+                message = undefined;
+       }
+       return {type: msgtype, message: message};
+   }
+    
     async _sendMessage(message, replyingTo) {
         if (!this._room.isArchived && message) {
+            let messinfo = {type : "m.text", message : message};
+            if (message.startsWith("//")) {
+                messinfo.message = message.substring(1).trim();
+            } else if (message.startsWith("/")) {
+                messinfo = await this._processCommand(message);
+            }
             try {
-                let msgtype = "m.text";
-                if (message.startsWith("/me ")) {
-                    message = message.substr(4).trim();
-                    msgtype = "m.emote";
-                }
-                if (replyingTo) {
-                    await replyingTo.reply(msgtype, message);
-                } else {
-                    await this._room.sendEvent("m.room.message", {msgtype, body: message});
+                const msgtype = messinfo.type;
+                const message = messinfo.message;
+                if (msgtype && message) {
+                    if (replyingTo) {
+                        await replyingTo.reply(msgtype, message);
+                    } else {
+                        await this._room.sendEvent("m.room.message", {msgtype, body: message});
+                    }
                 }
             } catch (err) {
                 console.error(`room.sendMessage(): ${err.message}:\n${err.stack}`);
@@ -320,6 +425,11 @@ export class RoomViewModel extends ViewModel {
             this._composerVM.setReplyingTo(entry);
         }
     }
+    
+    dismissError() {
+        this._sendError = null;
+        this.emitChange("error");
+    }
 }
 
 function videoToInfo(video) {
@@ -353,6 +463,16 @@ class ArchivedViewModel extends ViewModel {
     }
 
     get kind() {
-        return "archived";
+        return "disabled";
+    }
+}
+
+class LowerPowerLevelViewModel extends ViewModel {
+    get description() {
+        return this.i18n`You do not have the powerlevel necessary to send messages`;
+    }
+
+    get kind() {
+        return "disabled";
     }
 }

src/domain/session/room/UnknownRoomViewModel.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {ViewModel} from "../../ViewModel.js";
+import {ViewModel} from "../../ViewModel";
 
 export class UnknownRoomViewModel extends ViewModel {
     constructor(options) {
@@ -55,4 +55,4 @@ export class UnknownRoomViewModel extends ViewModel {
     get kind() {
         return "unknown";
     }
-}
+}

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

@@ -1,5 +1,5 @@
 import { linkify } from "./linkify/linkify.js";
-import { getIdentifierColorNumber, avatarInitials } from "../../../avatar.js";
+import { getIdentifierColorNumber, avatarInitials } from "../../../avatar";
 
 /**
  * Parse text into parts such as newline, links and text.

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

@@ -13,7 +13,7 @@ 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 {ObservableMap} from "../../../../observable/map/ObservableMap.js";
+import {ObservableMap} from "../../../../observable/map/ObservableMap";
 
 export class ReactionsViewModel {
     constructor(parentTile) {
@@ -222,7 +222,7 @@ export function tests() {
         };
         const tiles = new MappedList(timeline.entries, entry => {
             if (entry.eventType === "m.room.message") {
-                return new BaseMessageTile({entry, roomVM: {room}, timeline, platform: {logger}});
+                return new BaseMessageTile(entry, {roomVM: {room}, timeline, platform: {logger}});
             }
             return null;
         }, (tile, params, entry) => tile?.updateEntry(entry, params, function () {}));

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

@@ -18,20 +18,27 @@ import {BaseObservableList} from "../../../../observable/list/BaseObservableList
 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.
+// for now, tileClassForEntry should be stable in whether it returns a tile or not.
 // e.g. the decision to create a tile or not should be based on properties
 // not updated later on (e.g. event type)
 // also see big comment in onUpdate
 export class TilesCollection extends BaseObservableList {
-    constructor(entries, tileCreator) {
+    constructor(entries, tileOptions) {
         super();
         this._entries = entries;
         this._tiles = null;
         this._entrySubscription = null;
-        this._tileCreator = tileCreator;
+        this._tileOptions = tileOptions;
         this._emitSpontanousUpdate = this._emitSpontanousUpdate.bind(this);
     }
 
+    _createTile(entry) {
+        const Tile = this._tileOptions.tileClassForEntry(entry);
+        if (Tile) {
+            return new Tile(entry, this._tileOptions);
+        }
+    }
+
     _emitSpontanousUpdate(tile, params) {
         const entry = tile.lowerEntry;
         const tileIdx = this._findTileIdx(entry);
@@ -48,7 +55,7 @@ export class TilesCollection extends BaseObservableList {
         let currentTile = null;
         for (let entry of this._entries) {
             if (!currentTile || !currentTile.tryIncludeEntry(entry)) {
-                currentTile = this._tileCreator(entry);
+                currentTile = this._createTile(entry);
                 if (currentTile) {
                     this._tiles.push(currentTile);
                 }
@@ -121,7 +128,7 @@ export class TilesCollection extends BaseObservableList {
             return;
         }
 
-        const newTile = this._tileCreator(entry);
+        const newTile = this._createTile(entry);
         if (newTile) {
             if (prevTile) {
                 prevTile.updateNextSibling(newTile);
@@ -150,9 +157,9 @@ export class TilesCollection extends BaseObservableList {
         const tileIdx = this._findTileIdx(entry);
         const tile = this._findTileAtIdx(entry, tileIdx);
         if (tile) {
-            const action = tile.updateEntry(entry, params, this._tileCreator);
+            const action = tile.updateEntry(entry, params);
             if (action.shouldReplace) {
-                const newTile = this._tileCreator(entry);
+                const newTile = this._createTile(entry);
                 if (newTile) {
                     this._replaceTile(tileIdx, tile, newTile, action.updateParams);
                     newTile.setUpdateEmit(this._emitSpontanousUpdate);
@@ -303,7 +310,10 @@ export function tests() {
                 }
             }
             const entries = new ObservableArray([{n: 5}, {n: 10}]);
-            const tiles = new TilesCollection(entries, entry => new UpdateOnSiblingTile(entry));
+            const tileOptions = {
+                tileClassForEntry: () => UpdateOnSiblingTile,
+            };
+            const tiles = new TilesCollection(entries, tileOptions);
             let receivedAdd = false;
             tiles.subscribe({
                 onAdd(idx, tile) {
@@ -326,7 +336,10 @@ export function tests() {
                 }
             }
             const entries = new ObservableArray([{n: 5}, {n: 10}, {n: 15}]);
-            const tiles = new TilesCollection(entries, entry => new UpdateOnSiblingTile(entry));
+            const tileOptions = {
+                tileClassForEntry: () => UpdateOnSiblingTile,
+            };
+            const tiles = new TilesCollection(entries, tileOptions);
             const events = [];
             tiles.subscribe({
                 onUpdate(idx, tile) {

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

@@ -32,14 +32,14 @@ to the room timeline, which unload entries from memory.
 when loading, it just reads events from a sortkey backwards or forwards...
 */
 import {TilesCollection} from "./TilesCollection.js";
-import {ViewModel} from "../../../ViewModel.js";
+import {ViewModel} from "../../../ViewModel";
 
 export class TimelineViewModel extends ViewModel {
     constructor(options) {
         super(options);
-        const {timeline, tilesCreator} = options;
+        const {timeline, tileOptions} = options;
         this._timeline = this.track(timeline);
-        this._tiles = new TilesCollection(timeline.entries, tilesCreator);
+        this._tiles = new TilesCollection(timeline.entries, tileOptions);
         this._startTile = null;
         this._endTile = null;
         this._topLoadingPromise = null;

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

@@ -21,12 +21,35 @@ const MAX_HEIGHT = 300;
 const MAX_WIDTH = 400;
 
 export class BaseMediaTile extends BaseMessageTile {
-    constructor(options) {
-        super(options);
+    constructor(entry, options) {
+        super(entry, options);
         this._decryptedThumbnail = null;
         this._decryptedFile = null;
         this._isVisible = false;
         this._error = null;
+        this._downloading = false;
+        this._downloadError = null;
+    }
+
+    async downloadMedia() {
+        if (this._downloading || this.isPending) {
+            return;
+        }
+        const content = this._getContent();
+        const filename = content.body;
+        this._downloading = true;
+        this.emitChange("status");
+        let blob;
+        try {
+            blob = await this._mediaRepository.downloadAttachment(content);
+            this.platform.saveFileAs(blob, filename);
+        } catch (err) {
+            this._downloadError = err;
+        } finally {
+            blob?.dispose();
+            this._downloading = false;
+        }
+        this.emitChange("status");
     }
 
     get isUploading() {
@@ -38,7 +61,7 @@ export class BaseMediaTile extends BaseMessageTile {
         return pendingEvent && Math.round((pendingEvent.attachmentsSentBytes / pendingEvent.attachmentsTotalBytes) * 100);
     }
 
-    get sendStatus() {
+    get status() {
         const {pendingEvent} = this._entry;
         switch (pendingEvent?.status) {
             case SendStatus.Waiting:
@@ -53,6 +76,12 @@ export class BaseMediaTile extends BaseMessageTile {
             case SendStatus.Error:
                 return this.i18n`Error: ${pendingEvent.error.message}`;
             default:
+                if (this._downloadError) {
+                    return `Download failed`;
+                }
+                if (this._downloading) {
+                    return this.i18n`Downloading…`;
+                }
                 return "";
         }
     }

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

@@ -16,11 +16,11 @@ limitations under the License.
 
 import {SimpleTile} from "./SimpleTile.js";
 import {ReactionsViewModel} from "../ReactionsViewModel.js";
-import {getIdentifierColorNumber, avatarInitials, getAvatarHttpUrl} from "../../../../avatar.js";
+import {getIdentifierColorNumber, avatarInitials, getAvatarHttpUrl} from "../../../../avatar";
 
 export class BaseMessageTile extends SimpleTile {
-    constructor(options) {
-        super(options);
+    constructor(entry, options) {
+        super(entry, options);
         this._date = this._entry.timestamp ? new Date(this._entry.timestamp) : null;
         this._isContinuation = false;
         this._reactions = null;
@@ -28,7 +28,7 @@ export class BaseMessageTile extends SimpleTile {
         if (this._entry.annotations || this._entry.pendingAnnotations) {
             this._updateReactions();
         }
-        this._updateReplyTileIfNeeded(options.tilesCreator, undefined);
+        this._updateReplyTileIfNeeded(undefined);
     }
 
     notifyVisible() {
@@ -122,23 +122,27 @@ export class BaseMessageTile extends SimpleTile {
         }
     }
 
-    updateEntry(entry, param, tilesCreator) {
-        const action = super.updateEntry(entry, param, tilesCreator);
+    updateEntry(entry, param) {
+        const action = super.updateEntry(entry, param);
         if (action.shouldUpdate) {
             this._updateReactions();
         }
-        this._updateReplyTileIfNeeded(tilesCreator, param);
+        this._updateReplyTileIfNeeded(param);
         return action;
     }
 
-    _updateReplyTileIfNeeded(tilesCreator, param) {
+    _updateReplyTileIfNeeded(param) {
         const replyEntry = this._entry.contextEntry;
         if (replyEntry) {
             // this is an update to contextEntry used for replyPreview
-            const action = this._replyTile?.updateEntry(replyEntry, param, tilesCreator);
+            const action = this._replyTile?.updateEntry(replyEntry, param);
             if (action?.shouldReplace || !this._replyTile) {
                 this.disposeTracked(this._replyTile);
-                this._replyTile = tilesCreator(replyEntry);
+                const tileClassForEntry = this._options.tileClassForEntry;
+                const ReplyTile = tileClassForEntry(replyEntry);
+                if (ReplyTile) {
+                    this._replyTile = new ReplyTile(replyEntry, this._options);
+                }
             }
             if(action?.shouldUpdate) {
                 this._replyTile?.emitChange();

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

@@ -21,8 +21,8 @@ import {createEnum} from "../../../../../utils/enum";
 export const BodyFormat = createEnum("Plain", "Html");
 
 export class BaseTextTile extends BaseMessageTile {
-    constructor(options) {
-        super(options);
+    constructor(entry, options) {
+        super(entry, options);
         this._messageBody = null;
         this._format = null
     }

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

@@ -18,8 +18,8 @@ import {BaseTextTile} from "./BaseTextTile.js";
 import {UpdateAction} from "../UpdateAction.js";
 
 export class EncryptedEventTile extends BaseTextTile {
-    updateEntry(entry, params, tilesCreator) {
-        const parentResult = super.updateEntry(entry, params, tilesCreator);
+    updateEntry(entry, params) {
+        const parentResult = super.updateEntry(entry, params);
         // event got decrypted, recreate the tile and replace this one with it
         if (entry.eventType !== "m.room.encrypted") {
             // the "shape" parameter trigger tile recreation in TimelineView

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

@@ -20,8 +20,8 @@ import {formatSize} from "../../../../../utils/formatSize";
 import {SendStatus} from "../../../../../matrix/room/sending/PendingEvent.js";
 
 export class FileTile extends BaseMessageTile {
-    constructor(options) {
-        super(options);
+    constructor(entry, options) {
+        super(entry, options);
         this._downloadError = null;
         this._downloading = false;
     }

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

@@ -18,8 +18,8 @@ import {SimpleTile} from "./SimpleTile.js";
 import {UpdateAction} from "../UpdateAction.js";
 
 export class GapTile extends SimpleTile {
-    constructor(options) {
-        super(options);
+    constructor(entry, options) {
+        super(entry, options);
         this._loading = false;
         this._error = null;
         this._isAtTop = true;
@@ -81,8 +81,8 @@ export class GapTile extends SimpleTile {
         this._siblingChanged = true;
     }
 
-    updateEntry(entry, params, tilesCreator) {
-        super.updateEntry(entry, params, tilesCreator);
+    updateEntry(entry, params) {
+        super.updateEntry(entry, params);
         if (!entry.isGap) {
             return UpdateAction.Remove();
         } else {
@@ -125,7 +125,7 @@ export function tests() {
                     tile.updateEntry(newEntry);
                 }
             };
-            const tile = new GapTile({entry: new FragmentBoundaryEntry(fragment, true), roomVM: {room}});
+            const tile = new GapTile(new FragmentBoundaryEntry(fragment, true), {roomVM: {room}});
             await tile.fill();
             await tile.fill();
             await tile.fill();

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

@@ -18,8 +18,8 @@ limitations under the License.
 import {BaseMediaTile} from "./BaseMediaTile.js";
 
 export class ImageTile extends BaseMediaTile {
-    constructor(options) {
-        super(options);
+    constructor(entry, options) {
+        super(entry, options);
         this._lightboxUrl = this.urlCreator.urlForSegments([
             // ensure the right room is active if in grid view
             this.navigation.segment("room", this._room.id),

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

@@ -66,23 +66,25 @@ export class RoomMemberTile extends SimpleTile {
 export function tests() {
     return {
         "user removes display name": (assert) => {
-            const tile = new RoomMemberTile({
-                entry: {
+            const tile = new RoomMemberTile(
+                {
                     prevContent: {displayname: "foo", membership: "join"},
                     content: {membership: "join"},
                     stateKey: "foo@bar.com",
                 },
-            });
+                {}
+            );
             assert.strictEqual(tile.announcement, "foo@bar.com removed their name (foo)");
         },
         "user without display name sets a new display name": (assert) => {
-            const tile = new RoomMemberTile({
-                entry: {
+            const tile = new RoomMemberTile(
+                {
                     prevContent: {membership: "join"},
                     content: {displayname: "foo", membership: "join" },
                     stateKey: "foo@bar.com",
                 },
-            });
+                {}
+            );
             assert.strictEqual(tile.announcement, "foo@bar.com changed their name to foo");
         },
     };

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

@@ -15,13 +15,14 @@ limitations under the License.
 */
 
 import {UpdateAction} from "../UpdateAction.js";
-import {ViewModel} from "../../../../ViewModel.js";
+import {ViewModel} from "../../../../ViewModel";
 import {SendStatus} from "../../../../../matrix/room/sending/PendingEvent.js";
 
 export class SimpleTile extends ViewModel {
-    constructor(options) {
+    constructor(entry, options) {
         super(options);
-        this._entry = options.entry;
+        this._entry = entry;
+        this._emitUpdate = undefined;
     }
     // view model props for all subclasses
     // hmmm, could also do instanceof ... ?
@@ -44,6 +45,10 @@ export class SimpleTile extends ViewModel {
         return this._entry.asEventKey();
     }
 
+    get eventId() {
+        return this._entry.id;
+    }
+
     get isPending() {
         return this._entry.isPending;
     }
@@ -63,16 +68,20 @@ export class SimpleTile extends ViewModel {
 
     // TilesCollection contract below
     setUpdateEmit(emitUpdate) {
-        this.updateOptions({emitChange: paramName => {
+        this._emitUpdate = emitUpdate;
+    }
+
+    /** overrides the emitChange in ViewModel to also emit the update over the tiles collection */
+    emitChange(changedProps) {
+        if (this._emitUpdate) {
             // it can happen that after some network call
             // we switched away from the room and the response
             // comes in, triggering an emitChange in a tile that
             // has been disposed already (and hence the change
             // callback has been cleared by dispose) We should just ignore this.
-            if (emitUpdate) {
-                emitUpdate(this, paramName);
-            }
-        }});
+            this._emitUpdate(this, changedProps);
+        }
+        super.emitChange(changedProps);
     }
 
     get upperEntry() {

src/domain/session/room/timeline/tiles/index.ts

@@ -0,0 +1,94 @@
+/*
+Copyright 2020 Bruno Windels <bruno@windels.cloud>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {GapTile} from "./GapTile.js";
+import {TextTile} from "./TextTile.js";
+import {RedactedTile} from "./RedactedTile.js";
+import {ImageTile} from "./ImageTile.js";
+import {VideoTile} from "./VideoTile.js";
+import {FileTile} from "./FileTile.js";
+import {LocationTile} from "./LocationTile.js";
+import {RoomNameTile} from "./RoomNameTile.js";
+import {RoomMemberTile} from "./RoomMemberTile.js";
+import {EncryptedEventTile} from "./EncryptedEventTile.js";
+import {EncryptionEnabledTile} from "./EncryptionEnabledTile.js";
+import {MissingAttachmentTile} from "./MissingAttachmentTile.js";
+
+import type {SimpleTile} from "./SimpleTile.js";
+import type {Room} from "../../../../../matrix/room/Room";
+import type {Timeline} from "../../../../../matrix/room/timeline/Timeline";
+import type {FragmentBoundaryEntry} from "../../../../../matrix/room/timeline/entries/FragmentBoundaryEntry";
+import type {EventEntry} from "../../../../../matrix/room/timeline/entries/EventEntry";
+import type {PendingEventEntry} from "../../../../../matrix/room/timeline/entries/PendingEventEntry";
+import type {Options as ViewModelOptions} from "../../../../ViewModel";
+
+export type TimelineEntry = FragmentBoundaryEntry | EventEntry | PendingEventEntry;
+export type TileClassForEntryFn = (entry: TimelineEntry) => TileConstructor | undefined;
+export type Options = ViewModelOptions & {
+    room: Room,
+    timeline: Timeline
+    tileClassForEntry: TileClassForEntryFn;
+};
+export type TileConstructor = new (entry: TimelineEntry, options: Options) => SimpleTile;
+
+export function tileClassForEntry(entry: TimelineEntry): TileConstructor | undefined {
+    if (entry.isGap) {
+        return GapTile;
+    } else if (entry.isPending && entry.pendingEvent.isMissingAttachments) {
+        return MissingAttachmentTile;
+    } else if (entry.eventType) {
+        switch (entry.eventType) {
+            case "m.room.message": {
+                if (entry.isRedacted) {
+                    return RedactedTile;
+                }
+                const content = entry.content;
+                const msgtype = content && content.msgtype;
+                switch (msgtype) {
+                    case "m.text":
+                    case "m.notice":
+                    case "m.emote":
+                        return TextTile;
+                    case "m.image":
+                        return ImageTile;
+                    case "m.video":
+                        return VideoTile;
+                    case "m.file":
+                        return FileTile;
+                    case "m.location":
+                        return LocationTile;
+                    default:
+                        // unknown msgtype not rendered
+                        return undefined;
+                }
+            }
+            case "m.room.name":
+                return RoomNameTile;
+            case "m.room.member":
+                return RoomMemberTile;
+            case "m.room.encrypted":
+                if (entry.isRedacted) {
+                    return RedactedTile;
+                }
+                return EncryptedEventTile;
+            case "m.room.encryption":
+                return EncryptionEnabledTile;
+            default:
+                // unknown type not rendered
+                return undefined;
+        }
+    }
+}

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

@@ -1,81 +0,0 @@
-/*
-Copyright 2020 Bruno Windels <bruno@windels.cloud>
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import {GapTile} from "./tiles/GapTile.js";
-import {TextTile} from "./tiles/TextTile.js";
-import {RedactedTile} from "./tiles/RedactedTile.js";
-import {ImageTile} from "./tiles/ImageTile.js";
-import {VideoTile} from "./tiles/VideoTile.js";
-import {FileTile} from "./tiles/FileTile.js";
-import {LocationTile} from "./tiles/LocationTile.js";
-import {RoomNameTile} from "./tiles/RoomNameTile.js";
-import {RoomMemberTile} from "./tiles/RoomMemberTile.js";
-import {EncryptedEventTile} from "./tiles/EncryptedEventTile.js";
-import {EncryptionEnabledTile} from "./tiles/EncryptionEnabledTile.js";
-import {MissingAttachmentTile} from "./tiles/MissingAttachmentTile.js";
-
-export function tilesCreator(baseOptions) {
-    const tilesCreator = function tilesCreator(entry, emitUpdate) {
-        const options = Object.assign({entry, emitUpdate, tilesCreator}, baseOptions);
-        if (entry.isGap) {
-            return new GapTile(options);
-        } else if (entry.isPending && entry.pendingEvent.isMissingAttachments) {
-            return new MissingAttachmentTile(options);
-        } else if (entry.eventType) {
-            switch (entry.eventType) {
-                case "m.room.message": {
-                    if (entry.isRedacted) {
-                        return new RedactedTile(options);
-                    }
-                    const content = entry.content;
-                    const msgtype = content && content.msgtype;
-                    switch (msgtype) {
-                        case "m.text":
-                        case "m.notice":
-                        case "m.emote":
-                            return new TextTile(options);
-                        case "m.image":
-                            return new ImageTile(options);
-                        case "m.video":
-                            return new VideoTile(options);
-                        case "m.file":
-                            return new FileTile(options);
-                        case "m.location":
-                            return new LocationTile(options);
-                        default:
-                            // unknown msgtype not rendered
-                            return null;
-                    }
-                }
-                case "m.room.name":
-                    return new RoomNameTile(options);
-                case "m.room.member":
-                    return new RoomMemberTile(options);
-                case "m.room.encrypted":
-                    if (entry.isRedacted) {
-                        return new RedactedTile(options);
-                    }
-                    return new EncryptedEventTile(options);
-                case "m.room.encryption":
-                    return new EncryptionEnabledTile(options);
-                default:
-                    // unknown type not rendered
-                    return null;
-            }
-        }
-    };
-    return tilesCreator;
-}

src/domain/session/settings/KeyBackupViewModel.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {ViewModel} from "../../ViewModel.js";
+import {ViewModel} from "../../ViewModel";
 import {KeyType} from "../../../matrix/ssss/index";
 import {createEnum} from "../../../utils/enum";
 

src/domain/session/settings/SettingsViewModel.js

@@ -14,8 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {ViewModel} from "../../ViewModel.js";
+import {ViewModel} from "../../ViewModel";
 import {KeyBackupViewModel} from "./KeyBackupViewModel.js";
+import {submitLogsToRageshakeServer} from "../../../domain/rageshake";
 
 class PushNotificationStatus {
     constructor() {
@@ -50,6 +51,8 @@ export class SettingsViewModel extends ViewModel {
         this.minSentImageSizeLimit = 400;
         this.maxSentImageSizeLimit = 4000;
         this.pushNotifications = new PushNotificationStatus();
+        this._activeTheme = undefined;
+        this._logsFeedbackMessage = undefined;
     }
 
     get _session() {
@@ -76,6 +79,9 @@ export class SettingsViewModel extends ViewModel {
         this.sentImageSizeLimit = await this.platform.settingsStorage.getInt("sentImageSizeLimit");
         this.pushNotifications.supported = await this.platform.notificationService.supportsPush();
         this.pushNotifications.enabled = await this._session.arePushNotificationsEnabled();
+        if (!import.meta.env.DEV) {
+            this._activeTheme = await this.platform.themeLoader.getActiveTheme();
+        }
         this.emitChange("");
     }
 
@@ -127,6 +133,14 @@ export class SettingsViewModel extends ViewModel {
         return this._formatBytes(this._estimate?.usage);
     }
 
+    get themeMapping() {
+        return this.platform.themeLoader.themeMapping;
+    }
+
+    get activeTheme() {
+        return this._activeTheme;
+    }
+
     _formatBytes(n) {
         if (typeof n === "number") {
             return Math.round(n / (1024 * 1024)).toFixed(1) + " MB";
@@ -140,6 +154,51 @@ export class SettingsViewModel extends ViewModel {
         this.platform.saveFileAs(logExport.asBlob(), `hydrogen-logs-${this.platform.clock.now()}.json`);
     }
 
+    get canSendLogsToServer() {
+        return !!this.platform.config.bugReportEndpointUrl;
+    }
+
+    get logsServer() {
+        const {bugReportEndpointUrl} = this.platform.config;
+        try {
+            if (bugReportEndpointUrl) {
+                return new URL(bugReportEndpointUrl).hostname;
+            }
+        } catch (e) {}
+        return "";
+    }
+
+    async sendLogsToServer() {
+        const {bugReportEndpointUrl} = this.platform.config;
+        if (bugReportEndpointUrl) {
+            this._logsFeedbackMessage = this.i18n`Sending logs…`;
+            this.emitChange();
+            try {
+                const logExport = await this.logger.export();
+                await submitLogsToRageshakeServer(
+                    {
+                        app: "hydrogen",
+                        userAgent: this.platform.description,
+                        version: DEFINE_VERSION,
+                        text: `Submit logs from settings for user ${this._session.userId} on device ${this._session.deviceId}`,
+                    },
+                    logExport.asBlob(),
+                    bugReportEndpointUrl,
+                    this.platform.request
+                );
+                this._logsFeedbackMessage = this.i18n`Logs sent succesfully!`;
+                this.emitChange();
+            } catch (err) {
+                this._logsFeedbackMessage = err.message;
+                this.emitChange();
+            }
+        }
+    }
+
+    get logsFeedbackMessage() {
+        return this._logsFeedbackMessage;
+    }
+
     async togglePushNotifications() {
         this.pushNotifications.updating = true;
         this.pushNotifications.enabledOnServer = null;
@@ -169,5 +228,11 @@ export class SettingsViewModel extends ViewModel {
             this.emitChange("pushNotifications.serverError");
         }
     }
+
+    changeThemeOption(themeName, themeVariant) {
+        this.platform.themeLoader.setTheme(themeName, themeVariant);
+        // emit so that radio-buttons become displayed/hidden
+        this.emitChange("themeOption");
+    }
 }
 

src/index.html

@@ -2,8 +2,6 @@
 <!-- this file contains all references to include in the SDK asset build (using vite.sdk-assets-config.js) -->
 <html>
 <head>
-    <link rel="stylesheet" type="text/css" href="./platform/web/ui/css/main.css">
-    <link rel="stylesheet" type="text/css" href="./platform/web/ui/css/themes/element/theme.css">
 </head>
 <body>
     <script type="module">

src/lib.ts

@@ -16,8 +16,9 @@ limitations under the License.
 
 export {Platform} from "./platform/web/Platform.js";
 export {Client, LoadStatus} from "./matrix/Client.js";
+export {RoomStatus} from "./matrix/room/common";
 // export main view & view models
-export {createNavigation, createRouter} from "./domain/navigation/index.js";
+export {createNavigation, createRouter} from "./domain/navigation/index";
 export {RootViewModel} from "./domain/RootViewModel.js";
 export {RootView} from "./platform/web/ui/RootView.js";
 export {SessionViewModel} from "./domain/session/SessionViewModel.js";
@@ -25,11 +26,62 @@ export {SessionView} from "./platform/web/ui/session/SessionView.js";
 export {RoomViewModel} from "./domain/session/room/RoomViewModel.js";
 export {RoomView} from "./platform/web/ui/session/room/RoomView.js";
 export {TimelineViewModel} from "./domain/session/room/timeline/TimelineViewModel.js";
+export {tileClassForEntry} from "./domain/session/room/timeline/tiles/index";
+export type {TimelineEntry, TileClassForEntryFn, Options, TileConstructor} from "./domain/session/room/timeline/tiles/index";
+// export timeline tile view models
+export {GapTile} from "./domain/session/room/timeline/tiles/GapTile.js";
+export {TextTile} from "./domain/session/room/timeline/tiles/TextTile.js";
+export {RedactedTile} from "./domain/session/room/timeline/tiles/RedactedTile.js";
+export {ImageTile} from "./domain/session/room/timeline/tiles/ImageTile.js";
+export {VideoTile} from "./domain/session/room/timeline/tiles/VideoTile.js";
+export {FileTile} from "./domain/session/room/timeline/tiles/FileTile.js";
+export {LocationTile} from "./domain/session/room/timeline/tiles/LocationTile.js";
+export {RoomNameTile} from "./domain/session/room/timeline/tiles/RoomNameTile.js";
+export {RoomMemberTile} from "./domain/session/room/timeline/tiles/RoomMemberTile.js";
+export {EncryptedEventTile} from "./domain/session/room/timeline/tiles/EncryptedEventTile.js";
+export {EncryptionEnabledTile} from "./domain/session/room/timeline/tiles/EncryptionEnabledTile.js";
+export {MissingAttachmentTile} from "./domain/session/room/timeline/tiles/MissingAttachmentTile.js";
+export {SimpleTile} from "./domain/session/room/timeline/tiles/SimpleTile.js";
+
 export {TimelineView} from "./platform/web/ui/session/room/TimelineView";
+export {viewClassForTile} from "./platform/web/ui/session/room/common";
+export type {TileViewConstructor, ViewClassForEntryFn} from "./platform/web/ui/session/room/TimelineView";
+// export timeline tile views
+export {AnnouncementView} from "./platform/web/ui/session/room/timeline/AnnouncementView.js";
+export {BaseMediaView} from "./platform/web/ui/session/room/timeline/BaseMediaView.js";
+export {BaseMessageView} from "./platform/web/ui/session/room/timeline/BaseMessageView.js";
+export {FileView} from "./platform/web/ui/session/room/timeline/FileView.js";
+export {GapView} from "./platform/web/ui/session/room/timeline/GapView.js";
+export {ImageView} from "./platform/web/ui/session/room/timeline/ImageView.js";
+export {LocationView} from "./platform/web/ui/session/room/timeline/LocationView.js";
+export {MissingAttachmentView} from "./platform/web/ui/session/room/timeline/MissingAttachmentView.js";
+export {ReactionsView} from "./platform/web/ui/session/room/timeline/ReactionsView.js";
+export {RedactedView} from "./platform/web/ui/session/room/timeline/RedactedView.js";
+export {ReplyPreviewView} from "./platform/web/ui/session/room/timeline/ReplyPreviewView.js";
+export {TextMessageView} from "./platform/web/ui/session/room/timeline/TextMessageView.js";
+export {VideoView} from "./platform/web/ui/session/room/timeline/VideoView.js";
+
 export {Navigation} from "./domain/navigation/Navigation.js";
 export {ComposerViewModel} from "./domain/session/room/ComposerViewModel.js";
 export {MessageComposer} from "./platform/web/ui/session/room/MessageComposer.js";
 export {TemplateView} from "./platform/web/ui/general/TemplateView";
-export {ViewModel} from "./domain/ViewModel.js";
+export {ViewModel} from "./domain/ViewModel";
 export {LoadingView} from "./platform/web/ui/general/LoadingView.js";
 export {AvatarView} from "./platform/web/ui/AvatarView.js";
+export {RoomType} from "./matrix/room/common";
+export {EventEmitter} from "./utils/EventEmitter";
+export {Disposables} from "./utils/Disposables";
+// these should eventually be moved to another library
+export {
+    ObservableArray,
+    SortedArray,
+    MappedList,
+    AsyncMappedList,
+    ConcatList,
+    ObservableMap
+} from "./observable/index";
+export {
+    BaseObservableValue,
+    ObservableValue,
+    RetainedObservableValue
+} from "./observable/ObservableValue";

src/matrix/Client.js

@@ -100,6 +100,8 @@ export class Client {
         });
     }
 
+    // TODO: When converted to typescript this should return the same type
+    // as this._loginOptions is in LoginViewModel.ts (LoginOptions).
     _parseLoginOptions(options, homeserver) {
         /*
         Take server response and return new object which has two props password and sso which
@@ -132,14 +134,15 @@ export class Client {
         });
     }
 
-    async startRegistration(homeserver, username, password, initialDeviceDisplayName) {
+    async startRegistration(homeserver, username, password, initialDeviceDisplayName, flowSelector) {
         const request = this._platform.request;
         const hsApi = new HomeServerApi({homeserver, request});
         const registration = new Registration(hsApi, {
-            username, 
+            username,
             password,
             initialDeviceDisplayName,
-        });
+        },
+        flowSelector);
         return registration;
     }
 
@@ -195,7 +198,7 @@ export class Client {
                     sessionInfo.deviceId = dehydratedDevice.deviceId;
                 }
             }
-            await this._platform.sessionInfoStorage.add(sessionInfo);            
+            await this._platform.sessionInfoStorage.add(sessionInfo);
             // loading the session can only lead to
             // LoadStatus.Error in case of an error,
             // so separate try/catch
@@ -265,7 +268,7 @@ export class Client {
             this._status.set(LoadStatus.SessionSetup);
             await log.wrap("createIdentity", log => this._session.createIdentity(log));
         }
-        
+
         this._sync = new Sync({hsApi: this._requestScheduler.hsApi, storage: this._storage, session: this._session, logger: this._platform.logger});
         // notify sync and session when back online
         this._reconnectSubscription = this._reconnector.connectionStatus.subscribe(state => {
@@ -310,7 +313,7 @@ export class Client {
         this._waitForFirstSyncHandle = this._sync.status.waitFor(s => {
             if (s === SyncStatus.Stopped) {
                 // keep waiting if there is a ConnectionError
-                // as the reconnector above will call 
+                // as the reconnector above will call
                 // sync.start again to retry in this case
                 return this._sync.error?.name !== "ConnectionError";
             }

src/matrix/Session.js

@@ -26,8 +26,8 @@ import {User} from "./User.js";
 import {DeviceMessageHandler} from "./DeviceMessageHandler.js";
 import {Account as E2EEAccount} from "./e2ee/Account.js";
 import {uploadAccountAsDehydratedDevice} from "./e2ee/Dehydration.js";
-import {Decryption as OlmDecryption} from "./e2ee/olm/Decryption.js";
-import {Encryption as OlmEncryption} from "./e2ee/olm/Encryption.js";
+import {Decryption as OlmDecryption} from "./e2ee/olm/Decryption";
+import {Encryption as OlmEncryption} from "./e2ee/olm/Encryption";
 import {Decryption as MegOlmDecryption} from "./e2ee/megolm/Decryption";
 import {KeyLoader as MegOlmKeyLoader} from "./e2ee/megolm/decryption/KeyLoader";
 import {KeyBackup} from "./e2ee/megolm/keybackup/KeyBackup";
@@ -123,25 +123,24 @@ export class Session {
         // TODO: this should all go in a wrapper in e2ee/ that is bootstrapped by passing in the account
         // and can create RoomEncryption objects and handle encrypted to_device messages and device list changes.
         const senderKeyLock = new LockMap();
-        const olmDecryption = new OlmDecryption({
-            account: this._e2eeAccount,
-            pickleKey: PICKLE_KEY,
-            olm: this._olm,
-            storage: this._storage,
-            now: this._platform.clock.now,
-            ownUserId: this._user.id,
+        const olmDecryption = new OlmDecryption(
+            this._e2eeAccount,
+            PICKLE_KEY,
+            this._platform.clock.now,
+            this._user.id,
+            this._olm,
             senderKeyLock
-        });
-        this._olmEncryption = new OlmEncryption({
-            account: this._e2eeAccount,
-            pickleKey: PICKLE_KEY,
-            olm: this._olm,
-            storage: this._storage,
-            now: this._platform.clock.now,
-            ownUserId: this._user.id,
-            olmUtil: this._olmUtil,
+        );
+        this._olmEncryption = new OlmEncryption(
+            this._e2eeAccount,
+            PICKLE_KEY,
+            this._olm,
+            this._storage,
+            this._platform.clock.now,
+            this._user.id,
+            this._olmUtil,
             senderKeyLock
-        });
+        );
         this._keyLoader = new MegOlmKeyLoader(this._olm, PICKLE_KEY, 20);
         this._megolmEncryption = new MegOlmEncryption({
             account: this._e2eeAccount,

src/matrix/e2ee/DecryptionResult.ts

@@ -26,35 +26,41 @@ limitations under the License.
  *                                      see DeviceTracker
  */
 
+import type {DeviceIdentity} from "../storage/idb/stores/DeviceIdentityStore";
 
+type DecryptedEvent = {
+    type?: string,
+    content?: Record<string, any>
+}
 
 export class DecryptionResult {
-    constructor(event, senderCurve25519Key, claimedEd25519Key) {
-        this.event = event;
-        this.senderCurve25519Key = senderCurve25519Key;
-        this.claimedEd25519Key = claimedEd25519Key;
-        this._device = null;
-        this._roomTracked = true;
+    private device?: DeviceIdentity;
+    private roomTracked: boolean = true;
+
+    constructor(
+        public readonly event: DecryptedEvent,
+        public readonly senderCurve25519Key: string,
+        public readonly claimedEd25519Key: string
+    ) {}
+
+    setDevice(device: DeviceIdentity): void {
+        this.device = device;
     }
 
-    setDevice(device) {
-        this._device = device;
+    setRoomNotTrackedYet(): void {
+        this.roomTracked = false;
     }
 
-    setRoomNotTrackedYet() {
-        this._roomTracked = false;
-    }
-
-    get isVerified() {
-        if (this._device) {
-            const comesFromDevice = this._device.ed25519Key === this.claimedEd25519Key;
+    get isVerified(): boolean {
+        if (this.device) {
+            const comesFromDevice = this.device.ed25519Key === this.claimedEd25519Key;
             return comesFromDevice;
         }
         return false;
     }
 
-    get isUnverified() {
-        if (this._device) {
+    get isUnverified(): boolean {
+        if (this.device) {
             return !this.isVerified;
         } else if (this.isVerificationUnknown) {
             return false;
@@ -63,8 +69,8 @@ export class DecryptionResult {
         }
     }
 
-    get isVerificationUnknown() {
+    get isVerificationUnknown(): boolean {
         // verification is unknown if we haven't yet fetched the devices for the room
-        return !this._device && !this._roomTracked;
+        return !this.device && !this.roomTracked;
     }
 }

src/matrix/e2ee/DeviceTracker.js

@@ -15,11 +15,13 @@ limitations under the License.
 */
 
 import {verifyEd25519Signature, SIGNATURE_ALGORITHM} from "./common.js";
+import {HistoryVisibility, shouldShareKey} from "./common.js";
+import {RoomMember} from "../room/members/RoomMember.js";
 
 const TRACKING_STATUS_OUTDATED = 0;
 const TRACKING_STATUS_UPTODATE = 1;
 
-export function addRoomToIdentity(identity, userId, roomId) {
+function addRoomToIdentity(identity, userId, roomId) {
     if (!identity) {
         identity = {
             userId: userId,
@@ -79,28 +81,57 @@ export class DeviceTracker {
         }));
     }
 
-    writeMemberChanges(room, memberChanges, txn) {
-        return Promise.all(Array.from(memberChanges.values()).map(async memberChange => {
-            return this._applyMemberChange(memberChange, txn);
+    /** @return Promise<{added: string[], removed: string[]}> the user ids for who the room was added or removed to the userIdentity,
+     *                                                        and with who a key should be now be shared
+     **/
+    async writeMemberChanges(room, memberChanges, historyVisibility, txn) {
+        const added = [];
+        const removed = [];
+        await Promise.all(Array.from(memberChanges.values()).map(async memberChange => {
+            // keys should now be shared with this member?
+            // add the room to the userIdentity if so
+            if (shouldShareKey(memberChange.membership, historyVisibility)) {
+                if (await this._addRoomToUserIdentity(memberChange.roomId, memberChange.userId, txn)) {
+                    added.push(memberChange.userId);
+                }
+            } else if (shouldShareKey(memberChange.previousMembership, historyVisibility)) {
+                // try to remove room we were previously sharing the key with the member but not anymore
+                const {roomId} = memberChange;
+                // if we left the room, remove room from all user identities in the room
+                if (memberChange.userId === this._ownUserId) {
+                    const userIds = await txn.roomMembers.getAllUserIds(roomId);
+                    await Promise.all(userIds.map(userId => {
+                        return this._removeRoomFromUserIdentity(roomId, userId, txn);
+                    }));
+                } else {
+                    await this._removeRoomFromUserIdentity(roomId, memberChange.userId, txn);
+                }
+                removed.push(memberChange.userId);
+            }
         }));
+        return {added, removed};
     }
 
-    async trackRoom(room, log) {
+    async trackRoom(room, historyVisibility, log) {
         if (room.isTrackingMembers || !room.isEncrypted) {
             return;
         }
-        const memberList = await room.loadMemberList(log);
+        const memberList = await room.loadMemberList(undefined, log);
+        const txn = await this._storage.readWriteTxn([
+            this._storage.storeNames.roomSummary,
+            this._storage.storeNames.userIdentities,
+        ]);
         try {
-            const txn = await this._storage.readWriteTxn([
-                this._storage.storeNames.roomSummary,
-                this._storage.storeNames.userIdentities,
-            ]);
             let isTrackingChanges;
             try {
                 isTrackingChanges = room.writeIsTrackingMembers(true, txn);
                 const members = Array.from(memberList.members.values());
                 log.set("members", members.length);
-                await this._writeJoinedMembers(members, txn);
+                await Promise.all(members.map(async member => {
+                    if (shouldShareKey(member.membership, historyVisibility)) {
+                        await this._addRoomToUserIdentity(member.roomId, member.userId, txn);
+                    }
+                }));
             } catch (err) {
                 txn.abort();
                 throw err;
@@ -112,21 +143,43 @@ export class DeviceTracker {
         }
     }
 
-    async _writeJoinedMembers(members, txn) {
-        await Promise.all(members.map(async member => {
-            if (member.membership === "join") {
-                await this._writeMember(member, txn);
-            }
-        }));
+    async writeHistoryVisibility(room, historyVisibility, syncTxn, log) {
+        const added = [];
+        const removed = [];
+        if (room.isTrackingMembers && room.isEncrypted) {
+            await log.wrap("rewriting userIdentities", async log => {
+                const memberList = await room.loadMemberList(syncTxn, log);
+                try {
+                    const members = Array.from(memberList.members.values());
+                    log.set("members", members.length);
+                    await Promise.all(members.map(async member => {
+                        if (shouldShareKey(member.membership, historyVisibility)) {
+                            if (await this._addRoomToUserIdentity(member.roomId, member.userId, syncTxn)) {
+                                added.push(member.userId);
+                            }
+                        } else {
+                            if (await this._removeRoomFromUserIdentity(member.roomId, member.userId, syncTxn)) {
+                                removed.push(member.userId);
+                            }
+                        }
+                    }));
+                } finally {
+                    memberList.release();
+                }
+            });
+        }
+        return {added, removed};
     }
 
-    async _writeMember(member, txn) {
+    async _addRoomToUserIdentity(roomId, userId, txn) {
         const {userIdentities} = txn;
-        const identity = await userIdentities.get(member.userId);
-        const updatedIdentity = addRoomToIdentity(identity, member.userId, member.roomId);
+        const identity = await userIdentities.get(userId);
+        const updatedIdentity = addRoomToIdentity(identity, userId, roomId);
         if (updatedIdentity) {
             userIdentities.set(updatedIdentity);
+            return true;
         }
+        return false;
     }
 
     async _removeRoomFromUserIdentity(roomId, userId, txn) {
@@ -141,28 +194,9 @@ export class DeviceTracker {
             } else {
                 userIdentities.set(identity);
             }
+            return true;
         }
-    }
-
-    async _applyMemberChange(memberChange, txn) {
-        // TODO: depends whether we encrypt for invited users??
-        // add room
-        if (memberChange.hasJoined) {
-            await this._writeMember(memberChange.member, txn);
-        }
-        // remove room
-        else if (memberChange.hasLeft) {
-            const {roomId} = memberChange;
-            // if we left the room, remove room from all user identities in the room
-            if (memberChange.userId === this._ownUserId) {
-                const userIds = await txn.roomMembers.getAllUserIds(roomId);
-                await Promise.all(userIds.map(userId => {
-                    return this._removeRoomFromUserIdentity(roomId, userId, txn);
-                }));
-            } else {
-                await this._removeRoomFromUserIdentity(roomId, memberChange.userId, txn);
-            }
-        }
+        return false;
     }
 
     async _queryKeys(userIds, hsApi, log) {
@@ -214,11 +248,12 @@ export class DeviceTracker {
         const allDeviceIdentities = [];
         const deviceIdentitiesToStore = [];
         // filter out devices that have changed their ed25519 key since last time we queried them
-        deviceIdentities = await Promise.all(deviceIdentities.map(async deviceIdentity => {
+        await Promise.all(deviceIdentities.map(async deviceIdentity => {
             if (knownDeviceIds.includes(deviceIdentity.deviceId)) {
                 const existingDevice = await txn.deviceIdentities.get(deviceIdentity.userId, deviceIdentity.deviceId);
                 if (existingDevice.ed25519Key !== deviceIdentity.ed25519Key) {
                     allDeviceIdentities.push(existingDevice);
+                    return;
                 }
             }
             allDeviceIdentities.push(deviceIdentity);
@@ -363,3 +398,338 @@ export class DeviceTracker {
         return await txn.deviceIdentities.getByCurve25519Key(curve25519Key);
     }
 }
+
+import {createMockStorage} from "../../mocks/Storage";
+import {Instance as NullLoggerInstance} from "../../logging/NullLogger";
+import {MemberChange} from "../room/members/RoomMember";
+
+export function tests() {
+
+    function createUntrackedRoomMock(roomId, joinedUserIds, invitedUserIds = []) {
+        return {
+            id: roomId,
+            isTrackingMembers: false,
+            isEncrypted: true,
+            loadMemberList: () => {
+                const joinedMembers = joinedUserIds.map(userId => {return RoomMember.fromUserId(roomId, userId, "join");});
+                const invitedMembers = invitedUserIds.map(userId => {return RoomMember.fromUserId(roomId, userId, "invite");});
+                const members = joinedMembers.concat(invitedMembers);
+                const memberMap = members.reduce((map, member) => {
+                    map.set(member.userId, member);
+                    return map;
+                }, new Map());
+                return {members: memberMap, release() {}}
+            },
+            writeIsTrackingMembers(isTrackingMembers) {
+                if (this.isTrackingMembers !== isTrackingMembers) {
+                    return isTrackingMembers;
+                }
+                return undefined;
+            },
+            applyIsTrackingMembersChanges(isTrackingMembers) {
+                if (isTrackingMembers !== undefined) {
+                    this.isTrackingMembers = isTrackingMembers;
+                }
+            },
+        }
+    }
+
+    function createQueryKeysHSApiMock(createKey = (algorithm, userId, deviceId) => `${algorithm}:${userId}:${deviceId}:key`) {
+        return {
+            queryKeys(payload) {
+                const {device_keys: deviceKeys} = payload;
+                const userKeys = Object.entries(deviceKeys).reduce((userKeys, [userId, deviceIds]) => {
+                    if (deviceIds.length === 0) {
+                        deviceIds = ["device1"];
+                    }
+                    userKeys[userId] = deviceIds.filter(d => d === "device1").reduce((deviceKeys, deviceId) => {
+                        deviceKeys[deviceId] = {
+                            "algorithms": [
+                              "m.olm.v1.curve25519-aes-sha2",
+                              "m.megolm.v1.aes-sha2"
+                            ],
+                            "device_id": deviceId,
+                            "keys": {
+                                [`curve25519:${deviceId}`]: createKey("curve25519", userId, deviceId),
+                                [`ed25519:${deviceId}`]: createKey("ed25519", userId, deviceId),
+                            },
+                            "signatures": {
+                                [userId]: {
+                                    [`ed25519:${deviceId}`]: `ed25519:${userId}:${deviceId}:signature`
+                                }
+                            },
+                            "unsigned": {
+                              "device_display_name": `${userId} Phone`
+                            },
+                            "user_id": userId
+                        };
+                        return deviceKeys;
+                    }, {});
+                    return userKeys;
+                }, {});
+                const response = {device_keys: userKeys};
+                return {
+                    async response() {
+                        return response;
+                    }
+                };
+            }
+        };
+    }
+
+    async function writeMemberListToStorage(room, storage) {
+        const txn = await storage.readWriteTxn([
+            storage.storeNames.roomMembers,
+        ]);
+        const memberList = await room.loadMemberList(txn);
+        try {
+            for (const member of memberList.members.values()) {
+                txn.roomMembers.set(member.serialize());
+            }
+        } catch (err) {
+            txn.abort();
+            throw err;
+        } finally {
+            memberList.release();
+        }
+        await txn.complete();
+    }
+
+    const roomId = "!abc:hs.tld";
+
+    return {
+        "trackRoom only writes joined members with history visibility of joined": async assert => {
+            const storage = await createMockStorage();
+            const tracker = new DeviceTracker({
+                storage,
+                getSyncToken: () => "token",
+                olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
+                ownUserId: "@alice:hs.tld",
+                ownDeviceId: "ABCD",
+            });
+            const room = createUntrackedRoomMock(roomId, ["@alice:hs.tld", "@bob:hs.tld"], ["@charly:hs.tld"]);
+            await tracker.trackRoom(room, HistoryVisibility.Joined, NullLoggerInstance.item);
+            const txn = await storage.readTxn([storage.storeNames.userIdentities]);
+            assert.deepEqual(await txn.userIdentities.get("@alice:hs.tld"), {
+                userId: "@alice:hs.tld",
+                roomIds: [roomId],
+                deviceTrackingStatus: TRACKING_STATUS_OUTDATED
+            });
+            assert.deepEqual(await txn.userIdentities.get("@bob:hs.tld"), {
+                userId: "@bob:hs.tld",
+                roomIds: [roomId],
+                deviceTrackingStatus: TRACKING_STATUS_OUTDATED
+            });
+            assert.equal(await txn.userIdentities.get("@charly:hs.tld"), undefined);
+        },
+        "getting devices for tracked room yields correct keys": async assert => {
+            const storage = await createMockStorage();
+            const tracker = new DeviceTracker({
+                storage,
+                getSyncToken: () => "token",
+                olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
+                ownUserId: "@alice:hs.tld",
+                ownDeviceId: "ABCD",
+            });
+            const room = createUntrackedRoomMock(roomId, ["@alice:hs.tld", "@bob:hs.tld"]);
+            await tracker.trackRoom(room, HistoryVisibility.Joined, NullLoggerInstance.item);
+            const hsApi = createQueryKeysHSApiMock();
+            const devices = await tracker.devicesForRoomMembers(roomId, ["@alice:hs.tld", "@bob:hs.tld"], hsApi, NullLoggerInstance.item);
+            assert.equal(devices.length, 2);
+            assert.equal(devices.find(d => d.userId === "@alice:hs.tld").ed25519Key, "ed25519:@alice:hs.tld:device1:key");
+            assert.equal(devices.find(d => d.userId === "@bob:hs.tld").ed25519Key, "ed25519:@bob:hs.tld:device1:key");
+        },
+        "device with changed key is ignored": async assert => {
+            const storage = await createMockStorage();
+            const tracker = new DeviceTracker({
+                storage,
+                getSyncToken: () => "token",
+                olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
+                ownUserId: "@alice:hs.tld",
+                ownDeviceId: "ABCD",
+            });
+            const room = createUntrackedRoomMock(roomId, ["@alice:hs.tld", "@bob:hs.tld"]);
+            await tracker.trackRoom(room, HistoryVisibility.Joined, NullLoggerInstance.item);
+            const hsApi = createQueryKeysHSApiMock();
+            // query devices first time
+            await tracker.devicesForRoomMembers(roomId, ["@alice:hs.tld", "@bob:hs.tld"], hsApi, NullLoggerInstance.item);
+            const txn = await storage.readWriteTxn([storage.storeNames.userIdentities]);
+            // mark alice as outdated, so keys will be fetched again
+            tracker.writeDeviceChanges(["@alice:hs.tld"], txn, NullLoggerInstance.item);
+            await txn.complete();
+            const hsApiWithChangedAliceKey = createQueryKeysHSApiMock((algo, userId, deviceId) => {
+                return `${algo}:${userId}:${deviceId}:${userId === "@alice:hs.tld" ? "newKey" : "key"}`;
+            });
+            const devices = await tracker.devicesForRoomMembers(roomId, ["@alice:hs.tld", "@bob:hs.tld"], hsApiWithChangedAliceKey, NullLoggerInstance.item);
+            assert.equal(devices.length, 2);
+            assert.equal(devices.find(d => d.userId === "@alice:hs.tld").ed25519Key, "ed25519:@alice:hs.tld:device1:key");
+            assert.equal(devices.find(d => d.userId === "@bob:hs.tld").ed25519Key, "ed25519:@bob:hs.tld:device1:key");
+            const txn2 = await storage.readTxn([storage.storeNames.deviceIdentities]);
+            // also check the modified key was not stored
+            assert.equal((await txn2.deviceIdentities.get("@alice:hs.tld", "device1")).ed25519Key, "ed25519:@alice:hs.tld:device1:key");
+        },
+        "change history visibility from joined to invited adds invitees": async assert => {
+            const storage = await createMockStorage();
+            const tracker = new DeviceTracker({
+                storage,
+                getSyncToken: () => "token",
+                olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
+                ownUserId: "@alice:hs.tld",
+                ownDeviceId: "ABCD",
+            });
+            // alice is joined, bob is invited
+            const room = await createUntrackedRoomMock(roomId, 
+                ["@alice:hs.tld"], ["@bob:hs.tld"]);
+            await tracker.trackRoom(room, HistoryVisibility.Joined, NullLoggerInstance.item);
+            const txn = await storage.readWriteTxn([storage.storeNames.userIdentities, storage.storeNames.deviceIdentities]);
+            assert.equal(await txn.userIdentities.get("@bob:hs.tld"), undefined);
+            const {added, removed} = await tracker.writeHistoryVisibility(room, HistoryVisibility.Invited, txn, NullLoggerInstance.item);
+            assert.equal((await txn.userIdentities.get("@bob:hs.tld")).userId, "@bob:hs.tld");
+            assert.deepEqual(added, ["@bob:hs.tld"]);
+            assert.deepEqual(removed, []);
+        },
+        "change history visibility from invited to joined removes invitees": async assert => {
+            const storage = await createMockStorage();
+            const tracker = new DeviceTracker({
+                storage,
+                getSyncToken: () => "token",
+                olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
+                ownUserId: "@alice:hs.tld",
+                ownDeviceId: "ABCD",
+            });
+            // alice is joined, bob is invited
+            const room = await createUntrackedRoomMock(roomId, 
+                ["@alice:hs.tld"], ["@bob:hs.tld"]);
+            await tracker.trackRoom(room, HistoryVisibility.Invited, NullLoggerInstance.item);
+            const txn = await storage.readWriteTxn([storage.storeNames.userIdentities, storage.storeNames.deviceIdentities]);
+            assert.equal((await txn.userIdentities.get("@bob:hs.tld")).userId, "@bob:hs.tld");
+            const {added, removed} = await tracker.writeHistoryVisibility(room, HistoryVisibility.Joined, txn, NullLoggerInstance.item);
+            assert.equal(await txn.userIdentities.get("@bob:hs.tld"), undefined);
+            assert.deepEqual(added, []);
+            assert.deepEqual(removed, ["@bob:hs.tld"]);
+        },
+        "adding invitee with history visibility of invited adds room to userIdentities": async assert => {
+            const storage = await createMockStorage();
+            const tracker = new DeviceTracker({
+                storage,
+                getSyncToken: () => "token",
+                olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
+                ownUserId: "@alice:hs.tld",
+                ownDeviceId: "ABCD",
+            });
+            const room = await createUntrackedRoomMock(roomId, ["@alice:hs.tld"]);
+            await tracker.trackRoom(room, HistoryVisibility.Invited, NullLoggerInstance.item);
+            const txn = await storage.readWriteTxn([storage.storeNames.userIdentities, storage.storeNames.deviceIdentities]);
+            // inviting a new member
+            const inviteChange = new MemberChange(RoomMember.fromUserId(roomId, "@bob:hs.tld", "invite"));
+            const {added, removed} = await tracker.writeMemberChanges(room, [inviteChange], HistoryVisibility.Invited, txn);
+            assert.deepEqual(added, ["@bob:hs.tld"]);
+            assert.deepEqual(removed, []);
+            assert.equal((await txn.userIdentities.get("@bob:hs.tld")).userId, "@bob:hs.tld");
+        },
+        "adding invitee with history visibility of joined doesn't add room": async assert => {
+            const storage = await createMockStorage();
+            const tracker = new DeviceTracker({
+                storage,
+                getSyncToken: () => "token",
+                olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
+                ownUserId: "@alice:hs.tld",
+                ownDeviceId: "ABCD",
+            });
+            const room = await createUntrackedRoomMock(roomId, ["@alice:hs.tld"]);
+            await tracker.trackRoom(room, HistoryVisibility.Joined, NullLoggerInstance.item);
+            const txn = await storage.readWriteTxn([storage.storeNames.userIdentities, storage.storeNames.deviceIdentities]);
+            // inviting a new member
+            const inviteChange = new MemberChange(RoomMember.fromUserId(roomId, "@bob:hs.tld", "invite"));
+            const memberChanges = new Map([[inviteChange.userId, inviteChange]]);
+            const {added, removed} = await tracker.writeMemberChanges(room, memberChanges, HistoryVisibility.Joined, txn);
+            assert.deepEqual(added, []);
+            assert.deepEqual(removed, []);
+            assert.equal(await txn.userIdentities.get("@bob:hs.tld"), undefined);
+        },
+        "getting all devices after changing history visibility now includes invitees": async assert => {
+            const storage = await createMockStorage();
+            const tracker = new DeviceTracker({
+                storage,
+                getSyncToken: () => "token",
+                olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
+                ownUserId: "@alice:hs.tld",
+                ownDeviceId: "ABCD",
+            });
+            const room = createUntrackedRoomMock(roomId, ["@alice:hs.tld"], ["@bob:hs.tld"]);
+            await tracker.trackRoom(room, HistoryVisibility.Invited, NullLoggerInstance.item);
+            const hsApi = createQueryKeysHSApiMock();
+            // write memberlist from room mock to mock storage,
+            // as devicesForTrackedRoom reads directly from roomMembers store.
+            await writeMemberListToStorage(room, storage);
+            const devices = await tracker.devicesForTrackedRoom(roomId, hsApi, NullLoggerInstance.item);
+            assert.equal(devices.length, 2);
+            assert.equal(devices.find(d => d.userId === "@alice:hs.tld").ed25519Key, "ed25519:@alice:hs.tld:device1:key");
+            assert.equal(devices.find(d => d.userId === "@bob:hs.tld").ed25519Key, "ed25519:@bob:hs.tld:device1:key");
+        },
+        "rejecting invite with history visibility of invited removes room from user identity": async assert => {
+            const storage = await createMockStorage();
+            const tracker = new DeviceTracker({
+                storage,
+                getSyncToken: () => "token",
+                olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
+                ownUserId: "@alice:hs.tld",
+                ownDeviceId: "ABCD",
+            });
+            // alice is joined, bob is invited
+            const room = await createUntrackedRoomMock(roomId, ["@alice:hs.tld"], ["@bob:hs.tld"]);
+            await tracker.trackRoom(room, HistoryVisibility.Invited, NullLoggerInstance.item);
+            const txn = await storage.readWriteTxn([storage.storeNames.userIdentities, storage.storeNames.deviceIdentities]);
+            // reject invite
+            const inviteChange = new MemberChange(RoomMember.fromUserId(roomId, "@bob:hs.tld", "leave"), "invite");
+            const memberChanges = new Map([[inviteChange.userId, inviteChange]]);
+            const {added, removed} = await tracker.writeMemberChanges(room, memberChanges, HistoryVisibility.Invited, txn);
+            assert.deepEqual(added, []);
+            assert.deepEqual(removed, ["@bob:hs.tld"]);
+            assert.equal(await txn.userIdentities.get("@bob:hs.tld"), undefined);
+        },
+        "remove room from user identity sharing multiple rooms with us preserves other room": async assert => {
+            const storage = await createMockStorage();
+            const tracker = new DeviceTracker({
+                storage,
+                getSyncToken: () => "token",
+                olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
+                ownUserId: "@alice:hs.tld",
+                ownDeviceId: "ABCD",
+            });
+            // alice is joined, bob is invited
+            const room1 = await createUntrackedRoomMock("!abc:hs.tld", ["@alice:hs.tld", "@bob:hs.tld"]);
+            const room2 = await createUntrackedRoomMock("!def:hs.tld", ["@alice:hs.tld", "@bob:hs.tld"]);
+            await tracker.trackRoom(room1, HistoryVisibility.Joined, NullLoggerInstance.item);
+            await tracker.trackRoom(room2, HistoryVisibility.Joined, NullLoggerInstance.item);
+            const txn1 = await storage.readTxn([storage.storeNames.userIdentities]);
+            assert.deepEqual((await txn1.userIdentities.get("@bob:hs.tld")).roomIds, ["!abc:hs.tld", "!def:hs.tld"]);
+            const leaveChange = new MemberChange(RoomMember.fromUserId(room2.id, "@bob:hs.tld", "leave"), "join");
+            const memberChanges = new Map([[leaveChange.userId, leaveChange]]);
+            const txn2 = await storage.readWriteTxn([storage.storeNames.userIdentities, storage.storeNames.deviceIdentities]);
+            await tracker.writeMemberChanges(room2, memberChanges, HistoryVisibility.Joined, txn2);
+            await txn2.complete();
+            const txn3 = await storage.readTxn([storage.storeNames.userIdentities]);
+            assert.deepEqual((await txn3.userIdentities.get("@bob:hs.tld")).roomIds, ["!abc:hs.tld"]);
+        },
+        "add room to user identity sharing multiple rooms with us preserves other room": async assert => {
+            const storage = await createMockStorage();
+            const tracker = new DeviceTracker({
+                storage,
+                getSyncToken: () => "token",
+                olmUtil: {ed25519_verify: () => {}}, // valid if it does not throw
+                ownUserId: "@alice:hs.tld",
+                ownDeviceId: "ABCD",
+            });
+            // alice is joined, bob is invited
+            const room1 = await createUntrackedRoomMock("!abc:hs.tld", ["@alice:hs.tld", "@bob:hs.tld"]);
+            const room2 = await createUntrackedRoomMock("!def:hs.tld", ["@alice:hs.tld", "@bob:hs.tld"]);
+            await tracker.trackRoom(room1, HistoryVisibility.Joined, NullLoggerInstance.item);
+            const txn1 = await storage.readTxn([storage.storeNames.userIdentities]);
+            assert.deepEqual((await txn1.userIdentities.get("@bob:hs.tld")).roomIds, ["!abc:hs.tld"]);
+            await tracker.trackRoom(room2, HistoryVisibility.Joined, NullLoggerInstance.item);
+            const txn2 = await storage.readTxn([storage.storeNames.userIdentities]);
+            assert.deepEqual((await txn2.userIdentities.get("@bob:hs.tld")).roomIds, ["!abc:hs.tld", "!def:hs.tld"]);
+        },
+    }
+}

src/matrix/e2ee/RoomEncryption.js

@@ -19,8 +19,10 @@ import {groupEventsBySession} from "./megolm/decryption/utils";
 import {mergeMap} from "../../utils/mergeMap";
 import {groupBy} from "../../utils/groupBy";
 import {makeTxnId} from "../common.js";
+import {iterateResponseStateEvents} from "../room/common";
 
 const ENCRYPTED_TYPE = "m.room.encrypted";
+const ROOM_HISTORY_VISIBILITY_TYPE = "m.room.history_visibility";
 // how often ensureMessageKeyIsShared can check if it needs to
 // create a new outbound session
 // note that encrypt could still create a new session
@@ -45,6 +47,7 @@ export class RoomEncryption {
         this._isFlushingRoomKeyShares = false;
         this._lastKeyPreShareTime = null;
         this._keySharePromise = null;
+        this._historyVisibility = undefined;
         this._disposed = false;
     }
 
@@ -77,22 +80,68 @@ export class RoomEncryption {
         this._senderDeviceCache = new Map();    // purge the sender device cache
     }
 
-    async writeMemberChanges(memberChanges, txn, log) {
-        let shouldFlush = false;
-        const memberChangesArray = Array.from(memberChanges.values());
-        // this also clears our session if we leave the room ourselves
-        if (memberChangesArray.some(m => m.hasLeft)) {
+    async writeSync(roomResponse, memberChanges, txn, log) {
+        let historyVisibility = await this._loadHistoryVisibilityIfNeeded(this._historyVisibility, txn);
+        const addedMembers = [];
+        const removedMembers = [];
+        // update the historyVisibility if needed
+        await iterateResponseStateEvents(roomResponse, event => {
+            // TODO: can the same state event appear twice? Hence we would be rewriting the useridentities twice...
+            // we'll see in the logs
+            if(event.state_key === "" && event.type === ROOM_HISTORY_VISIBILITY_TYPE) {
+                const newHistoryVisibility = event?.content?.history_visibility;
+                if (newHistoryVisibility !== historyVisibility) {
+                    return log.wrap({
+                        l: "history_visibility changed",
+                        from: historyVisibility,
+                        to: newHistoryVisibility
+                    }, async log => {
+                        historyVisibility = newHistoryVisibility;
+                        const result = await this._deviceTracker.writeHistoryVisibility(this._room, historyVisibility, txn, log);
+                        addedMembers.push(...result.added);
+                        removedMembers.push(...result.removed);
+                    });
+                }
+            }
+        });
+        // process member changes
+        if (memberChanges.size) {
+            const result = await this._deviceTracker.writeMemberChanges(
+                this._room, memberChanges, historyVisibility, txn);
+            addedMembers.push(...result.added);
+            removedMembers.push(...result.removed);
+        }
+        // discard key if somebody (including ourselves) left
+        if (removedMembers.length) {
             log.log({
                 l: "discardOutboundSession",
-                leftUsers: memberChangesArray.filter(m => m.hasLeft).map(m => m.userId),
+                leftUsers: removedMembers,
             });
             this._megolmEncryption.discardOutboundSession(this._room.id, txn);
         }
-        if (memberChangesArray.some(m => m.hasJoined)) {
-            shouldFlush = await this._addShareRoomKeyOperationForNewMembers(memberChangesArray, txn, log);
+        let shouldFlush = false;
+        // add room to userIdentities if needed, and share the current key with them
+        if (addedMembers.length) {
+            shouldFlush = await this._addShareRoomKeyOperationForMembers(addedMembers, txn, log);
         }
-        await this._deviceTracker.writeMemberChanges(this._room, memberChanges, txn);
-        return shouldFlush;
+        return {shouldFlush, historyVisibility};
+    }
+
+    afterSync({historyVisibility}) {
+        this._historyVisibility = historyVisibility;
+    }
+
+    async _loadHistoryVisibilityIfNeeded(historyVisibility, txn = undefined) {
+        if (!historyVisibility) {
+            if (!txn) {
+                txn = await this._storage.readTxn([this._storage.storeNames.roomState]);
+            }
+            const visibilityEntry = await txn.roomState.get(this._room.id, ROOM_HISTORY_VISIBILITY_TYPE, "");
+            if (visibilityEntry) {
+                return visibilityEntry.event?.content?.history_visibility;
+            }
+        }
+        return historyVisibility;
     }
 
     async prepareDecryptAll(events, newKeys, source, txn) {
@@ -274,10 +323,15 @@ export class RoomEncryption {
     }
 
     async _shareNewRoomKey(roomKeyMessage, hsApi, log) {
+        this._historyVisibility = await this._loadHistoryVisibilityIfNeeded(this._historyVisibility);
+        await this._deviceTracker.trackRoom(this._room, this._historyVisibility, log);
+        const devices = await this._deviceTracker.devicesForTrackedRoom(this._room.id, hsApi, log);
+        const userIds = Array.from(devices.reduce((set, device) => set.add(device.userId), new Set()));
+            
         let writeOpTxn = await this._storage.readWriteTxn([this._storage.storeNames.operations]);
         let operation;
         try {
-            operation = this._writeRoomKeyShareOperation(roomKeyMessage, null, writeOpTxn);
+            operation = this._writeRoomKeyShareOperation(roomKeyMessage, userIds, writeOpTxn);
         } catch (err) {
             writeOpTxn.abort();
             throw err;
@@ -288,8 +342,7 @@ export class RoomEncryption {
         await this._processShareRoomKeyOperation(operation, hsApi, log);
     }
 
-    async _addShareRoomKeyOperationForNewMembers(memberChangesArray, txn, log) {
-        const userIds = memberChangesArray.filter(m => m.hasJoined).map(m => m.userId);
+    async _addShareRoomKeyOperationForMembers(userIds, txn, log) {
         const roomKeyMessage = await this._megolmEncryption.createRoomKeyMessage(
             this._room.id, txn);
         if (roomKeyMessage) {
@@ -342,18 +395,9 @@ export class RoomEncryption {
 
     async _processShareRoomKeyOperation(operation, hsApi, log) {
         log.set("id", operation.id);
-
-        await this._deviceTracker.trackRoom(this._room, log);
-        let devices;
-        if (operation.userIds === null) {
-            devices = await this._deviceTracker.devicesForTrackedRoom(this._room.id, hsApi, log);
-            const userIds = Array.from(devices.reduce((set, device) => set.add(device.userId), new Set()));
-            operation.userIds = userIds;
-            await this._updateOperationsStore(operations => operations.update(operation));
-        } else {
-            devices = await this._deviceTracker.devicesForRoomMembers(this._room.id, operation.userIds, hsApi, log);
-        }
-        
+        this._historyVisibility = await this._loadHistoryVisibilityIfNeeded(this._historyVisibility);
+        await this._deviceTracker.trackRoom(this._room, this._historyVisibility, log);
+        const devices = await this._deviceTracker.devicesForRoomMembers(this._room.id, operation.userIds, hsApi, log);
         const messages = await log.wrap("olm encrypt", log => this._olmEncryption.encrypt(
             "m.room_key", operation.roomKeyMessage, devices, hsApi, log));
         const missingDevices = devices.filter(d => !messages.some(m => m.device === d));
@@ -507,3 +551,143 @@ class BatchDecryptionResult {
         }));
     }
 }
+
+import {createMockStorage} from "../../mocks/Storage";
+import {Clock as MockClock} from "../../mocks/Clock";
+import {poll} from "../../mocks/poll";
+import {Instance as NullLoggerInstance} from "../../logging/NullLogger";
+import {ConsoleLogger} from "../../logging/ConsoleLogger";
+import {HomeServer as MockHomeServer} from "../../mocks/HomeServer.js";
+
+export function tests() {
+    const roomId = "!abc:hs.tld";
+    return {
+        "ensureMessageKeyIsShared tracks room and passes correct history visibility to deviceTracker": async assert => {
+            const storage = await createMockStorage();
+            const megolmMock = {
+                async ensureOutboundSession() { return { }; }
+            };
+            const olmMock = {
+                async encrypt() { return []; }
+            }
+            let isRoomTracked = false;
+            let isDevicesRequested = false;
+            const deviceTracker = {
+                async trackRoom(room, historyVisibility) {
+                    // only assert on first call
+                    if (isRoomTracked) { return; }
+                    assert(!isDevicesRequested);
+                    assert.equal(room.id, roomId);
+                    assert.equal(historyVisibility, "invited");
+                    isRoomTracked = true;
+                },
+                async devicesForTrackedRoom() {
+                    assert(isRoomTracked);
+                    isDevicesRequested = true;
+                    return [];
+                },
+                async devicesForRoomMembers() {
+                    return [];
+                }
+            }
+            const writeTxn = await storage.readWriteTxn([storage.storeNames.roomState]);
+            writeTxn.roomState.set(roomId, {state_key: "", type: ROOM_HISTORY_VISIBILITY_TYPE, content: {
+                history_visibility: "invited"
+            }});
+            await writeTxn.complete();
+            const roomEncryption = new RoomEncryption({
+                room: {id: roomId},
+                megolmEncryption: megolmMock,
+                olmEncryption: olmMock,
+                storage,
+                deviceTracker,
+                clock: new MockClock()
+            });
+            const homeServer = new MockHomeServer();
+            const promise = roomEncryption.ensureMessageKeyIsShared(homeServer.api, NullLoggerInstance.item);
+            // need to poll because sendToDevice isn't first async step
+            const request = await poll(() => homeServer.requests.sendToDevice?.[0]);
+            request.respond({});
+            await promise;
+            assert(isRoomTracked);
+            assert(isDevicesRequested);
+        },
+        "encrypt tracks room and passes correct history visibility to deviceTracker": async assert => {
+            const storage = await createMockStorage();
+            const megolmMock = {
+                async encrypt() { return { roomKeyMessage: {} }; }
+            };
+            const olmMock = {
+                async encrypt() { return []; }
+            }
+            let isRoomTracked = false;
+            let isDevicesRequested = false;
+            const deviceTracker = {
+                async trackRoom(room, historyVisibility) {
+                    // only assert on first call
+                    if (isRoomTracked) { return; }
+                    assert(!isDevicesRequested);
+                    assert.equal(room.id, roomId);
+                    assert.equal(historyVisibility, "invited");
+                    isRoomTracked = true;
+                },
+                async devicesForTrackedRoom() {
+                    assert(isRoomTracked);
+                    isDevicesRequested = true;
+                    return [];
+                },
+                async devicesForRoomMembers() {
+                    return [];
+                }
+            }
+            const writeTxn = await storage.readWriteTxn([storage.storeNames.roomState]);
+            writeTxn.roomState.set(roomId, {state_key: "", type: ROOM_HISTORY_VISIBILITY_TYPE, content: {
+                history_visibility: "invited"
+            }});
+            await writeTxn.complete();
+            const roomEncryption = new RoomEncryption({
+                room: {id: roomId},
+                megolmEncryption: megolmMock,
+                olmEncryption: olmMock,
+                storage,
+                deviceTracker
+            });
+            const homeServer = new MockHomeServer();
+            const promise = roomEncryption.encrypt("m.room.message", {body: "hello"}, homeServer.api, NullLoggerInstance.item);
+            // need to poll because sendToDevice isn't first async step
+            const request = await poll(() => homeServer.requests.sendToDevice?.[0]);
+            request.respond({});
+            await promise;
+            assert(isRoomTracked);
+            assert(isDevicesRequested);
+        },
+        "writeSync passes correct history visibility to deviceTracker": async assert => {
+            const storage = await createMockStorage();
+            let isMemberChangesCalled = false;
+            const deviceTracker = {
+                async writeMemberChanges(room, memberChanges, historyVisibility, txn) {
+                    assert.equal(historyVisibility, "invited");
+                    isMemberChangesCalled = true;
+                    return {removed: [], added: []};
+                },
+                async devicesForRoomMembers() {
+                    return [];
+                }
+            }
+            const writeTxn = await storage.readWriteTxn([storage.storeNames.roomState]);
+            writeTxn.roomState.set(roomId, {state_key: "", type: ROOM_HISTORY_VISIBILITY_TYPE, content: {
+                history_visibility: "invited"
+            }});
+            const memberChanges = new Map([["@alice:hs.tld", {}]]);
+            const roomEncryption = new RoomEncryption({
+                room: {id: roomId},
+                storage,
+                deviceTracker
+            });
+            const roomResponse = {};
+            const txn = await storage.readWriteTxn([storage.storeNames.roomState]);
+            await roomEncryption.writeSync(roomResponse, memberChanges, txn, NullLoggerInstance.item);
+            assert(isMemberChangesCalled);
+        },
+    }
+}

src/matrix/e2ee/common.js

@@ -69,3 +69,28 @@ export function createRoomEncryptionEvent() {
         }
     }
 }
+
+
+// Use enum when converting to TS
+export const HistoryVisibility = Object.freeze({
+    Joined: "joined",
+    Invited: "invited",
+    WorldReadable: "world_readable",
+    Shared: "shared",
+});
+
+export function shouldShareKey(membership, historyVisibility) {
+    switch (historyVisibility) {
+        case HistoryVisibility.WorldReadable:
+            return true;
+        case HistoryVisibility.Shared:
+            // was part of room at some time
+            return membership !== undefined;
+        case HistoryVisibility.Joined:
+            return membership === "join";
+        case HistoryVisibility.Invited:
+            return membership === "invite" || membership === "join";
+        default:
+            return false;
+    }
+}

src/matrix/e2ee/megolm/decryption/SessionDecryption.ts

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {DecryptionResult} from "../../DecryptionResult.js";
+import {DecryptionResult} from "../../DecryptionResult";
 import {DecryptionError} from "../../common.js";
 import {ReplayDetectionEntry} from "./ReplayDetectionEntry";
 import type {RoomKey} from "./RoomKey";

src/matrix/e2ee/olm/Decryption.ts

@@ -16,32 +16,47 @@ limitations under the License.
 
 import {DecryptionError} from "../common.js";
 import {groupBy} from "../../../utils/groupBy";
-import {MultiLock} from "../../../utils/Lock";
-import {Session} from "./Session.js";
-import {DecryptionResult} from "../DecryptionResult.js";
+import {MultiLock, ILock} from "../../../utils/Lock";
+import {Session} from "./Session";
+import {DecryptionResult} from "../DecryptionResult";
+import {OlmPayloadType} from "./types";
+
+import type {OlmMessage, OlmPayload} from "./types";
+import type {Account} from "../Account";
+import type {LockMap} from "../../../utils/LockMap";
+import type {Transaction} from "../../storage/idb/Transaction";
+import type {OlmEncryptedEvent} from "./types";
+import type * as OlmNamespace from "@matrix-org/olm";
+type Olm = typeof OlmNamespace;
 
 const SESSION_LIMIT_PER_SENDER_KEY = 4;
 
-function isPreKeyMessage(message) {
-    return message.type === 0;
-}
+type DecryptionResults = {
+    results: DecryptionResult[],
+    errors: DecryptionError[],
+    senderKeyDecryption: SenderKeyDecryption
+};
 
-function sortSessions(sessions) {
+type CreateAndDecryptResult = {
+    session: Session,
+    plaintext: string
+};
+
+function sortSessions(sessions: Session[]): void {
     sessions.sort((a, b) => {
         return b.data.lastUsed - a.data.lastUsed;
     });
 }
 
 export class Decryption {
-    constructor({account, pickleKey, now, ownUserId, storage, olm, senderKeyLock}) {
-        this._account = account;
-        this._pickleKey = pickleKey;
-        this._now = now;
-        this._ownUserId = ownUserId;
-        this._storage = storage;
-        this._olm = olm;
-        this._senderKeyLock = senderKeyLock;
-    }
+    constructor(
+        private readonly account: Account,
+        private readonly pickleKey: string,
+        private readonly now: () => number,
+        private readonly ownUserId: string,
+        private readonly olm: Olm,
+        private readonly senderKeyLock: LockMap<string>
+    ) {}
     
     // we need to lock because both encryption and decryption can't be done in one txn,
     // so for them not to step on each other toes, we need to lock.
@@ -50,8 +65,8 @@ export class Decryption {
     //  - decryptAll below fails (to release the lock as early as we can)
     //  - DecryptionChanges.write succeeds
     //  - Sync finishes the writeSync phase (or an error was thrown, in case we never get to DecryptionChanges.write) 
-    async obtainDecryptionLock(events) {
-        const senderKeys = new Set();
+    async obtainDecryptionLock(events: OlmEncryptedEvent[]): Promise<ILock> {
+        const senderKeys = new Set<string>();
         for (const event of events) {
             const senderKey = event.content?.["sender_key"];
             if (senderKey) {
@@ -61,7 +76,7 @@ export class Decryption {
         // take a lock on all senderKeys so encryption or other calls to decryptAll (should not happen)
         // don't modify the sessions at the same time
         const locks = await Promise.all(Array.from(senderKeys).map(senderKey => {
-            return this._senderKeyLock.takeLock(senderKey);
+            return this.senderKeyLock.takeLock(senderKey);
         }));
         return new MultiLock(locks);
     }
@@ -83,18 +98,18 @@ export class Decryption {
      * @param  {[type]} events
      * @return {Promise<DecryptionChanges>}        [description]
      */
-    async decryptAll(events, lock, txn) {
+    async decryptAll(events: OlmEncryptedEvent[], lock: ILock, txn: Transaction): Promise<DecryptionChanges> {
         try {
-            const eventsPerSenderKey = groupBy(events, event => event.content?.["sender_key"]);
-            const timestamp = this._now();
+            const eventsPerSenderKey = groupBy(events, (event: OlmEncryptedEvent) => event.content?.["sender_key"]);
+            const timestamp = this.now();
             // decrypt events for different sender keys in parallel
             const senderKeyOperations = await Promise.all(Array.from(eventsPerSenderKey.entries()).map(([senderKey, events]) => {
-                return this._decryptAllForSenderKey(senderKey, events, timestamp, txn);
+                return this._decryptAllForSenderKey(senderKey!, events, timestamp, txn);
             }));
-            const results = senderKeyOperations.reduce((all, r) => all.concat(r.results), []);
-            const errors = senderKeyOperations.reduce((all, r) => all.concat(r.errors), []);
+            const results = senderKeyOperations.reduce((all, r) => all.concat(r.results), [] as DecryptionResult[]);
+            const errors = senderKeyOperations.reduce((all, r) => all.concat(r.errors), [] as DecryptionError[]);
             const senderKeyDecryptions = senderKeyOperations.map(r => r.senderKeyDecryption);
-            return new DecryptionChanges(senderKeyDecryptions, results, errors, this._account, lock);
+            return new DecryptionChanges(senderKeyDecryptions, results, errors, this.account, lock);
         } catch (err) {
             // make sure the locks are release if something throws
             // otherwise they will be released in DecryptionChanges after having written
@@ -104,11 +119,11 @@ export class Decryption {
         }
     }
 
-    async _decryptAllForSenderKey(senderKey, events, timestamp, readSessionsTxn) {
+    async _decryptAllForSenderKey(senderKey: string, events: OlmEncryptedEvent[], timestamp: number, readSessionsTxn: Transaction): Promise<DecryptionResults> {
         const sessions = await this._getSessions(senderKey, readSessionsTxn);
-        const senderKeyDecryption = new SenderKeyDecryption(senderKey, sessions, this._olm, timestamp);
-        const results = [];
-        const errors = [];
+        const senderKeyDecryption = new SenderKeyDecryption(senderKey, sessions, timestamp);
+        const results: DecryptionResult[] = [];
+        const errors: DecryptionError[] = [];
         // events for a single senderKey need to be decrypted one by one
         for (const event of events) {
             try {
@@ -121,10 +136,10 @@ export class Decryption {
         return {results, errors, senderKeyDecryption};
     }
 
-    _decryptForSenderKey(senderKeyDecryption, event, timestamp) {
+    _decryptForSenderKey(senderKeyDecryption: SenderKeyDecryption, event: OlmEncryptedEvent, timestamp: number): DecryptionResult {
         const senderKey = senderKeyDecryption.senderKey;
         const message = this._getMessageAndValidateEvent(event);
-        let plaintext;
+        let plaintext: string | undefined;
         try {
             plaintext = senderKeyDecryption.decrypt(message);
         } catch (err) {
@@ -132,8 +147,8 @@ export class Decryption {
             throw new DecryptionError("OLM_BAD_ENCRYPTED_MESSAGE", event, {senderKey, error: err.message});
         }
         // could not decrypt with any existing session
-        if (typeof plaintext !== "string" && isPreKeyMessage(message)) {
-            let createResult;
+        if (typeof plaintext !== "string" && message.type === OlmPayloadType.PreKey) {
+            let createResult: CreateAndDecryptResult;
             try {
                 createResult = this._createSessionAndDecrypt(senderKey, message, timestamp);
             } catch (error) {
@@ -143,14 +158,14 @@ export class Decryption {
             plaintext = createResult.plaintext;
         }
         if (typeof plaintext === "string") {
-            let payload;
+            let payload: OlmPayload;
             try {
                 payload = JSON.parse(plaintext);
             } catch (error) {
                 throw new DecryptionError("PLAINTEXT_NOT_JSON", event, {plaintext, error});
             }
             this._validatePayload(payload, event);
-            return new DecryptionResult(payload, senderKey, payload.keys.ed25519);
+            return new DecryptionResult(payload, senderKey, payload.keys!.ed25519!);
         } else {
             throw new DecryptionError("OLM_NO_MATCHING_SESSION", event,
                 {knownSessionIds: senderKeyDecryption.sessions.map(s => s.id)});
@@ -158,16 +173,16 @@ export class Decryption {
     }
 
     // only for pre-key messages after having attempted decryption with existing sessions
-    _createSessionAndDecrypt(senderKey, message, timestamp) {
+    _createSessionAndDecrypt(senderKey: string, message: OlmMessage, timestamp: number): CreateAndDecryptResult {
         let plaintext;
         // if we have multiple messages encrypted with the same new session,
         // this could create multiple sessions as the OTK isn't removed yet
         // (this only happens in DecryptionChanges.write)
         // This should be ok though as we'll first try to decrypt with the new session
-        const olmSession = this._account.createInboundOlmSession(senderKey, message.body);
+        const olmSession = this.account.createInboundOlmSession(senderKey, message.body);
         try {
             plaintext = olmSession.decrypt(message.type, message.body);
-            const session = Session.create(senderKey, olmSession, this._olm, this._pickleKey, timestamp);
+            const session = Session.create(senderKey, olmSession, this.olm, this.pickleKey, timestamp);
             session.unload(olmSession);
             return {session, plaintext};
         } catch (err) {
@@ -176,12 +191,12 @@ export class Decryption {
         }
     }
 
-    _getMessageAndValidateEvent(event) {
+    _getMessageAndValidateEvent(event: OlmEncryptedEvent): OlmMessage {
         const ciphertext = event.content?.ciphertext;
         if (!ciphertext) {
             throw new DecryptionError("OLM_MISSING_CIPHERTEXT", event);
         }
-        const message = ciphertext?.[this._account.identityKeys.curve25519];
+        const message = ciphertext?.[this.account.identityKeys.curve25519];
         if (!message) {
             throw new DecryptionError("OLM_NOT_INCLUDED_IN_RECIPIENTS", event);
         }
@@ -189,22 +204,22 @@ export class Decryption {
         return message;
     }
 
-    async _getSessions(senderKey, txn) {
+    async _getSessions(senderKey: string, txn: Transaction): Promise<Session[]> {
         const sessionEntries = await txn.olmSessions.getAll(senderKey);
         // sort most recent used sessions first
-        const sessions = sessionEntries.map(s => new Session(s, this._pickleKey, this._olm));
+        const sessions = sessionEntries.map(s => new Session(s, this.pickleKey, this.olm));
         sortSessions(sessions);
         return sessions;
     }
 
-    _validatePayload(payload, event) {
+    _validatePayload(payload: OlmPayload, event: OlmEncryptedEvent): void {
         if (payload.sender !== event.sender) {
             throw new DecryptionError("OLM_FORWARDED_MESSAGE", event, {sentBy: event.sender, encryptedBy: payload.sender});
         }
-        if (payload.recipient !== this._ownUserId) {
+        if (payload.recipient !== this.ownUserId) {
             throw new DecryptionError("OLM_BAD_RECIPIENT", event, {recipient: payload.recipient});
         }
-        if (payload.recipient_keys?.ed25519 !== this._account.identityKeys.ed25519) {
+        if (payload.recipient_keys?.ed25519 !== this.account.identityKeys.ed25519) {
             throw new DecryptionError("OLM_BAD_RECIPIENT_KEY", event, {key: payload.recipient_keys?.ed25519});
         }
         // TODO: check room_id
@@ -219,21 +234,20 @@ export class Decryption {
 
 // decryption helper for a single senderKey
 class SenderKeyDecryption {
-    constructor(senderKey, sessions, olm, timestamp) {
-        this.senderKey = senderKey;
-        this.sessions = sessions;
-        this._olm = olm;
-        this._timestamp = timestamp;
-    }
+    constructor(
+        public readonly senderKey: string,
+        public readonly sessions: Session[],
+        private readonly timestamp: number
+    ) {}
 
-    addNewSession(session) {
+    addNewSession(session: Session): void {
         // add at top as it is most recent
         this.sessions.unshift(session);
     }
 
-    decrypt(message) {
+    decrypt(message: OlmMessage): string | undefined {
         for (const session of this.sessions) {
-            const plaintext = this._decryptWithSession(session, message);
+            const plaintext = this.decryptWithSession(session, message);
             if (typeof plaintext === "string") {
                 // keep them sorted so will try the same session first for other messages
                 // and so we can assume the excess ones are at the end
@@ -244,11 +258,11 @@ class SenderKeyDecryption {
         }
     }
 
-    getModifiedSessions() {
+    getModifiedSessions(): Session[] {
         return this.sessions.filter(session => session.isModified);
     }
 
-    get hasNewSessions() {
+    get hasNewSessions(): boolean {
         return this.sessions.some(session => session.isNew);
     }
 
@@ -257,19 +271,22 @@ class SenderKeyDecryption {
     // if this turns out to be a real cost for IE11,
     // we could look into adding a less expensive serialization mechanism
     // for olm sessions to libolm
-    _decryptWithSession(session, message) {
+    private decryptWithSession(session: Session, message: OlmMessage): string | undefined {
+        if (message.type === undefined || message.body === undefined) {
+            throw new Error("Invalid message without type or body");
+        }
         const olmSession = session.load();
         try {
-            if (isPreKeyMessage(message) && !olmSession.matches_inbound(message.body)) {
+            if (message.type === OlmPayloadType.PreKey && !olmSession.matches_inbound(message.body)) {
                 return;
             }
             try {
-                const plaintext = olmSession.decrypt(message.type, message.body);
+                const plaintext = olmSession.decrypt(message.type as number, message.body!);
                 session.save(olmSession);
-                session.lastUsed = this._timestamp;
+                session.data.lastUsed = this.timestamp;
                 return plaintext;
             } catch (err) {
-                if (isPreKeyMessage(message)) {
+                if (message.type === OlmPayloadType.PreKey) {
                     throw new Error(`Error decrypting prekey message with existing session id ${session.id}: ${err.message}`);
                 }
                 // decryption failed, bail out
@@ -286,27 +303,27 @@ class SenderKeyDecryption {
  * @property {Array<DecryptionError>} errors  see DecryptionError.event to retrieve the event that failed to decrypt.
  */
 class DecryptionChanges {
-    constructor(senderKeyDecryptions, results, errors, account, lock) {
-        this._senderKeyDecryptions = senderKeyDecryptions;
-        this._account = account;    
-        this.results = results;
-        this.errors = errors;
-        this._lock = lock;
+    constructor(
+        private readonly senderKeyDecryptions: SenderKeyDecryption[],
+        public readonly results: DecryptionResult[],
+        public readonly errors: DecryptionError[],
+        private readonly account: Account,
+        private readonly lock: ILock
+    ) {}
+
+    get hasNewSessions(): boolean {
+        return this.senderKeyDecryptions.some(skd => skd.hasNewSessions);
     }
 
-    get hasNewSessions() {
-        return this._senderKeyDecryptions.some(skd => skd.hasNewSessions);
-    }
-
-    write(txn) {
+    write(txn: Transaction): void {
         try {
-            for (const senderKeyDecryption of this._senderKeyDecryptions) {
+            for (const senderKeyDecryption of this.senderKeyDecryptions) {
                 for (const session of senderKeyDecryption.getModifiedSessions()) {
                     txn.olmSessions.set(session.data);
                     if (session.isNew) {
                         const olmSession = session.load();
                         try {
-                            this._account.writeRemoveOneTimeKey(olmSession, txn);
+                            this.account.writeRemoveOneTimeKey(olmSession, txn);
                         } finally {
                             session.unload(olmSession);
                         }
@@ -322,7 +339,7 @@ class DecryptionChanges {
                 }
             }
         } finally {
-            this._lock.release();
+            this.lock.release();
         }
     }
 }

src/matrix/e2ee/olm/Encryption.ts

@@ -16,7 +16,33 @@ limitations under the License.
 
 import {groupByWithCreator} from "../../../utils/groupBy";
 import {verifyEd25519Signature, OLM_ALGORITHM} from "../common.js";
-import {createSessionEntry} from "./Session.js";
+import {createSessionEntry} from "./Session";
+
+import type {OlmMessage, OlmPayload, OlmEncryptedMessageContent} from "./types";
+import type {Account} from "../Account";
+import type {LockMap} from "../../../utils/LockMap";
+import type {Storage} from "../../storage/idb/Storage";
+import type {Transaction} from "../../storage/idb/Transaction";
+import type {DeviceIdentity} from "../../storage/idb/stores/DeviceIdentityStore";
+import type {HomeServerApi} from "../../net/HomeServerApi";
+import type {ILogItem} from "../../../logging/types";
+import type * as OlmNamespace from "@matrix-org/olm";
+type Olm = typeof OlmNamespace;
+
+type ClaimedOTKResponse = {
+    [userId: string]: {
+        [deviceId: string]: {
+            [algorithmAndOtk: string]: {
+                key: string,
+                signatures: {
+                    [userId: string]: {
+                        [algorithmAndDevice: string]: string
+                    }
+                }
+            }
+        }
+    }
+};
 
 function findFirstSessionId(sessionIds) {
     return sessionIds.reduce((first, sessionId) => {
@@ -36,19 +62,19 @@ const OTK_ALGORITHM = "signed_curve25519";
 const MAX_BATCH_SIZE = 20;
 
 export class Encryption {
-    constructor({account, olm, olmUtil, ownUserId, storage, now, pickleKey, senderKeyLock}) {
-        this._account = account;
-        this._olm = olm;
-        this._olmUtil = olmUtil;
-        this._ownUserId = ownUserId;
-        this._storage = storage;
-        this._now = now;
-        this._pickleKey = pickleKey;
-        this._senderKeyLock = senderKeyLock;
-    }
+    constructor(
+        private readonly account: Account,
+        private readonly pickleKey: string,
+        private readonly olm: Olm,
+        private readonly storage: Storage,
+        private readonly now: () => number,
+        private readonly ownUserId: string,
+        private readonly olmUtil: Olm.Utility,
+        private readonly senderKeyLock: LockMap<string>
+    ) {}
 
-    async encrypt(type, content, devices, hsApi, log) {
-        let messages = [];
+    async encrypt(type: string, content: Record<string, any>, devices: DeviceIdentity[], hsApi: HomeServerApi, log: ILogItem): Promise<EncryptedMessage[]> {
+        let messages: EncryptedMessage[] = [];
         for (let i = 0; i < devices.length ; i += MAX_BATCH_SIZE) {
             const batchDevices = devices.slice(i, i + MAX_BATCH_SIZE);
             const batchMessages = await this._encryptForMaxDevices(type, content, batchDevices, hsApi, log);
@@ -57,12 +83,12 @@ export class Encryption {
         return messages;
     }
 
-    async _encryptForMaxDevices(type, content, devices, hsApi, log) {
+    async _encryptForMaxDevices(type: string, content: Record<string, any>, devices: DeviceIdentity[], hsApi: HomeServerApi, log: ILogItem): Promise<EncryptedMessage[]> {
         // TODO: see if we can only hold some of the locks until after the /keys/claim call (if needed) 
         // take a lock on all senderKeys so decryption and other calls to encrypt (should not happen)
         // don't modify the sessions at the same time
         const locks = await Promise.all(devices.map(device => {
-            return this._senderKeyLock.takeLock(device.curve25519Key);
+            return this.senderKeyLock.takeLock(device.curve25519Key);
         }));
         try {
             const {
@@ -70,9 +96,9 @@ export class Encryption {
                 existingEncryptionTargets,
             } = await this._findExistingSessions(devices);
         
-            const timestamp = this._now(); 
+            const timestamp = this.now(); 
 
-            let encryptionTargets = [];
+            let encryptionTargets: EncryptionTarget[] = [];
             try {
                 if (devicesWithoutSession.length) {
                     const newEncryptionTargets = await log.wrap("create sessions", log => this._createNewSessions(
@@ -100,8 +126,8 @@ export class Encryption {
         }
     }
 
-    async _findExistingSessions(devices) {
-        const txn = await this._storage.readTxn([this._storage.storeNames.olmSessions]);
+    async _findExistingSessions(devices: DeviceIdentity[]): Promise<{devicesWithoutSession: DeviceIdentity[], existingEncryptionTargets: EncryptionTarget[]}> {
+        const txn = await this.storage.readTxn([this.storage.storeNames.olmSessions]);
         const sessionIdsForDevice = await Promise.all(devices.map(async device => {
             return await txn.olmSessions.getSessionIds(device.curve25519Key);
         }));
@@ -116,18 +142,18 @@ export class Encryption {
                 const sessionId = findFirstSessionId(sessionIds);
                 return EncryptionTarget.fromSessionId(device, sessionId);
             }
-        }).filter(target => !!target);
+        }).filter(target => !!target) as EncryptionTarget[];
 
         return {devicesWithoutSession, existingEncryptionTargets};
     }
 
-    _encryptForDevice(type, content, target) {
+    _encryptForDevice(type: string, content: Record<string, any>, target: EncryptionTarget): OlmEncryptedMessageContent {
         const {session, device} = target;
         const plaintext = JSON.stringify(this._buildPlainTextMessageForDevice(type, content, device));
-        const message = session.encrypt(plaintext);
+        const message = session!.encrypt(plaintext);
         const encryptedContent = {
             algorithm: OLM_ALGORITHM,
-            sender_key: this._account.identityKeys.curve25519,
+            sender_key: this.account.identityKeys.curve25519,
             ciphertext: {
                 [device.curve25519Key]: message
             }
@@ -135,27 +161,27 @@ export class Encryption {
         return encryptedContent;
     }
 
-    _buildPlainTextMessageForDevice(type, content, device) {
+    _buildPlainTextMessageForDevice(type: string, content: Record<string, any>, device: DeviceIdentity): OlmPayload {
         return {
             keys: {
-                "ed25519": this._account.identityKeys.ed25519
+                "ed25519": this.account.identityKeys.ed25519
             },
             recipient_keys: {
                 "ed25519": device.ed25519Key
             },
             recipient: device.userId,
-            sender: this._ownUserId,
+            sender: this.ownUserId,
             content,
             type
         }
     }
 
-    async _createNewSessions(devicesWithoutSession, hsApi, timestamp, log) {
+    async _createNewSessions(devicesWithoutSession: DeviceIdentity[], hsApi: HomeServerApi, timestamp: number, log: ILogItem): Promise<EncryptionTarget[]> {
         const newEncryptionTargets = await log.wrap("claim", log => this._claimOneTimeKeys(hsApi, devicesWithoutSession, log));
         try {
             for (const target of newEncryptionTargets) {
                 const {device, oneTimeKey} = target;
-                target.session = await this._account.createOutboundOlmSession(device.curve25519Key, oneTimeKey);
+                target.session = await this.account.createOutboundOlmSession(device.curve25519Key, oneTimeKey);
             }
             await this._storeSessions(newEncryptionTargets, timestamp);
         } catch (err) {
@@ -167,12 +193,12 @@ export class Encryption {
         return newEncryptionTargets;
     }
 
-    async _claimOneTimeKeys(hsApi, deviceIdentities, log) {
+    async _claimOneTimeKeys(hsApi: HomeServerApi, deviceIdentities: DeviceIdentity[], log: ILogItem): Promise<EncryptionTarget[]> {
         // create a Map<userId, Map<deviceId, deviceIdentity>>
         const devicesByUser = groupByWithCreator(deviceIdentities,
-            device => device.userId,
-            () => new Map(),
-            (deviceMap, device) => deviceMap.set(device.deviceId, device)
+            (device: DeviceIdentity) => device.userId,
+            (): Map<string, DeviceIdentity> => new Map(),
+            (deviceMap: Map<string, DeviceIdentity>, device: DeviceIdentity) => deviceMap.set(device.deviceId, device)
         );
         const oneTimeKeys = Array.from(devicesByUser.entries()).reduce((usersObj, [userId, deviceMap]) => {
             usersObj[userId] = Array.from(deviceMap.values()).reduce((devicesObj, device) => {
@@ -188,12 +214,12 @@ export class Encryption {
         if (Object.keys(claimResponse.failures).length) {
             log.log({l: "failures", servers: Object.keys(claimResponse.failures)}, log.level.Warn);
         }
-        const userKeyMap = claimResponse?.["one_time_keys"];
+        const userKeyMap = claimResponse?.["one_time_keys"] as ClaimedOTKResponse;
         return this._verifyAndCreateOTKTargets(userKeyMap, devicesByUser, log);
     }
 
-    _verifyAndCreateOTKTargets(userKeyMap, devicesByUser, log) {
-        const verifiedEncryptionTargets = [];
+    _verifyAndCreateOTKTargets(userKeyMap: ClaimedOTKResponse, devicesByUser: Map<string, Map<string, DeviceIdentity>>, log: ILogItem): EncryptionTarget[] {
+        const verifiedEncryptionTargets: EncryptionTarget[] = [];
         for (const [userId, userSection] of Object.entries(userKeyMap)) {
             for (const [deviceId, deviceSection] of Object.entries(userSection)) {
                 const [firstPropName, keySection] = Object.entries(deviceSection)[0];
@@ -202,7 +228,7 @@ export class Encryption {
                     const device = devicesByUser.get(userId)?.get(deviceId);
                     if (device) {
                         const isValidSignature = verifyEd25519Signature(
-                            this._olmUtil, userId, deviceId, device.ed25519Key, keySection, log);
+                            this.olmUtil, userId, deviceId, device.ed25519Key, keySection, log);
                         if (isValidSignature) {
                             const target = EncryptionTarget.fromOTK(device, keySection.key);
                             verifiedEncryptionTargets.push(target);
@@ -214,8 +240,8 @@ export class Encryption {
         return verifiedEncryptionTargets;
     }
 
-    async _loadSessions(encryptionTargets) {
-        const txn = await this._storage.readTxn([this._storage.storeNames.olmSessions]);
+    async _loadSessions(encryptionTargets: EncryptionTarget[]): Promise<void> {
+        const txn = await this.storage.readTxn([this.storage.storeNames.olmSessions]);
         // given we run loading in parallel, there might still be some
         // storage requests that will finish later once one has failed.
         // those should not allocate a session anymore.
@@ -223,10 +249,10 @@ export class Encryption {
         try {
             await Promise.all(encryptionTargets.map(async encryptionTarget => {
                 const sessionEntry = await txn.olmSessions.get(
-                    encryptionTarget.device.curve25519Key, encryptionTarget.sessionId);
+                    encryptionTarget.device.curve25519Key, encryptionTarget.sessionId!);
                 if (sessionEntry && !failed) {
-                    const olmSession = new this._olm.Session();
-                    olmSession.unpickle(this._pickleKey, sessionEntry.session);
+                    const olmSession = new this.olm.Session();
+                    olmSession.unpickle(this.pickleKey, sessionEntry.session);
                     encryptionTarget.session = olmSession;
                 }
             }));
@@ -240,12 +266,12 @@ export class Encryption {
         }
     }
 
-    async _storeSessions(encryptionTargets, timestamp) {
-        const txn = await this._storage.readWriteTxn([this._storage.storeNames.olmSessions]);
+    async _storeSessions(encryptionTargets: EncryptionTarget[], timestamp: number): Promise<void> {
+        const txn = await this.storage.readWriteTxn([this.storage.storeNames.olmSessions]);
         try {
             for (const target of encryptionTargets) {
                 const sessionEntry = createSessionEntry(
-                    target.session, target.device.curve25519Key, timestamp, this._pickleKey);
+                    target.session!, target.device.curve25519Key, timestamp, this.pickleKey);
                 txn.olmSessions.set(sessionEntry);
             }
         } catch (err) {
@@ -261,23 +287,24 @@ export class Encryption {
 // (and later converted to a session) in case of a new session
 // or an existing session
 class EncryptionTarget {
-    constructor(device, oneTimeKey, sessionId) {
-        this.device = device;
-        this.oneTimeKey = oneTimeKey;
-        this.sessionId = sessionId;
-        // an olmSession, should probably be called olmSession
-        this.session = null;
-    }
+    
+    public session: Olm.Session | null = null;
 
-    static fromOTK(device, oneTimeKey) {
+    constructor(
+        public readonly device: DeviceIdentity, 
+        public readonly oneTimeKey: string | null,
+        public readonly sessionId: string | null
+    ) {}
+
+    static fromOTK(device: DeviceIdentity, oneTimeKey: string): EncryptionTarget {
         return new EncryptionTarget(device, oneTimeKey, null);
     }
 
-    static fromSessionId(device, sessionId) {
+    static fromSessionId(device: DeviceIdentity, sessionId: string): EncryptionTarget {
         return new EncryptionTarget(device, null, sessionId);
     }
 
-    dispose() {
+    dispose(): void {
         if (this.session) {
             this.session.free();
         }
@@ -285,8 +312,8 @@ class EncryptionTarget {
 }
 
 class EncryptedMessage {
-    constructor(content, device) {
-        this.content = content;
-        this.device = device;
-    }
+    constructor(
+        public readonly content: OlmEncryptedMessageContent,
+        public readonly device: DeviceIdentity
+    ) {}
 }

src/matrix/e2ee/olm/Session.ts

@@ -14,7 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-export function createSessionEntry(olmSession, senderKey, timestamp, pickleKey) {
+import type {OlmSessionEntry} from "../../storage/idb/stores/OlmSessionStore";
+import type * as OlmNamespace from "@matrix-org/olm";
+type Olm = typeof OlmNamespace;
+
+export function createSessionEntry(olmSession: Olm.Session, senderKey: string, timestamp: number, pickleKey: string): OlmSessionEntry {
     return {
         session: olmSession.pickle(pickleKey),
         sessionId: olmSession.session_id(),
@@ -24,35 +28,38 @@ export function createSessionEntry(olmSession, senderKey, timestamp, pickleKey)
 }
 
 export class Session {
-    constructor(data, pickleKey, olm, isNew = false) {
-        this.data = data;
-        this._olm = olm;
-        this._pickleKey = pickleKey;
-        this.isNew = isNew;
+    public isModified: boolean;
+
+    constructor(
+        public readonly data: OlmSessionEntry,
+        private readonly pickleKey: string,
+        private readonly olm: Olm,
+        public isNew: boolean = false
+    ) {
         this.isModified = isNew;
     }
 
-    static create(senderKey, olmSession, olm, pickleKey, timestamp) {
+    static create(senderKey: string, olmSession: Olm.Session, olm: Olm, pickleKey: string, timestamp: number): Session {
         const data = createSessionEntry(olmSession, senderKey, timestamp, pickleKey);
         return new Session(data, pickleKey, olm, true);
     }
 
-    get id() {
+    get id(): string {
         return this.data.sessionId;
     }
 
-    load() {
-        const session = new this._olm.Session();
-        session.unpickle(this._pickleKey, this.data.session);
+    load(): Olm.Session {
+        const session = new this.olm.Session();
+        session.unpickle(this.pickleKey, this.data.session);
         return session;
     }
 
-    unload(olmSession) {
+    unload(olmSession: Olm.Session): void {
         olmSession.free();
     }
 
-    save(olmSession) {
-        this.data.session = olmSession.pickle(this._pickleKey);
+    save(olmSession: Olm.Session): void {
+        this.data.session = olmSession.pickle(this.pickleKey);
         this.isModified = true;
     }
 }