Merge branch 'master' into madlittlemods/matrix-public-archive-scratch-changes
Conflicts: scripts/sdk/base-manifest.json scripts/sdk/build.sh src/domain/session/room/RoomViewModel.js src/platform/web/Platform.js src/platform/web/ui/general/html.ts
This commit is contained in:
commit
c24ac43e72
153 changed files with 3075 additions and 821 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
@ -7,4 +7,5 @@ bundle.js
|
|||
target
|
||||
lib
|
||||
*.tar.gz
|
||||
.eslintcache
|
||||
.eslintcache
|
||||
.tmp
|
||||
|
|
150
CONTRIBUTING.md
Normal file
150
CONTRIBUTING.md
Normal file
|
@ -0,0 +1,150 @@
|
|||
Contributing code to hydrogen-web
|
||||
==================================
|
||||
|
||||
Everyone is welcome to contribute code to hydrogen-web, provided that they are
|
||||
willing to license their contributions under the same license as the project
|
||||
itself. We follow a simple 'inbound=outbound' model for contributions: the act
|
||||
of submitting an 'inbound' contribution means that the contributor agrees to
|
||||
license the code under the same terms as the project's overall 'outbound'
|
||||
license - in this case, Apache Software License v2 (see
|
||||
[LICENSE](LICENSE)).
|
||||
|
||||
How to contribute
|
||||
-----------------
|
||||
|
||||
The preferred and easiest way to contribute changes to the project is to fork
|
||||
it on github, and then create a pull request to ask us to pull your changes
|
||||
into our repo (https://help.github.com/articles/using-pull-requests/)
|
||||
|
||||
We use GitHub's pull request workflow to review the contribution, and either
|
||||
ask you to make any refinements needed or merge it and make them ourselves.
|
||||
|
||||
Things that should go into your PR description:
|
||||
* References to any bugs fixed by the change (in GitHub's `Fixes` notation)
|
||||
* Describe the why and what is changing in the PR description so it's easy for
|
||||
onlookers and reviewers to onboard and context switch.
|
||||
* If your PR makes visual changes, include both **before** and **after** screenshots
|
||||
to easily compare and discuss what's changing.
|
||||
* Include a step-by-step testing strategy so that a reviewer can check out the
|
||||
code locally and easily get to the point of testing your change.
|
||||
* Add comments to the diff for the reviewer that might help them to understand
|
||||
why the change is necessary or how they might better understand and review it.
|
||||
|
||||
We use continuous integration, and all pull requests get automatically tested:
|
||||
if your change breaks the build, then the PR will show that there are failed
|
||||
checks, so please check back after a few minutes.
|
||||
|
||||
Tests
|
||||
-----
|
||||
If your PR is a feature then we require that the PR also includes tests.
|
||||
These need to test that your feature works as expected and ideally test edge cases too.
|
||||
|
||||
Tests are written as unit tests by exporting a `tests` function from the file to be tested.
|
||||
The function returns an object where the key is the test label, and the value is a
|
||||
function that accepts an [assert](https://nodejs.org/api/assert.html) object, and return a Promise or nothing.
|
||||
|
||||
Note that there is currently a limitation that files that are not indirectly included from `src/platform/web/main.js` won't be found by the runner.
|
||||
|
||||
You can run the tests by running `yarn test`.
|
||||
This uses the [impunity](https://github.com/bwindels/impunity) runner.
|
||||
|
||||
We don't require tests for bug fixes.
|
||||
|
||||
In the future we may formalise this more.
|
||||
|
||||
Code style
|
||||
----------
|
||||
The js-sdk aims to target TypeScript/ES6. All new files should be written in
|
||||
TypeScript and existing files should use ES6 principles where possible.
|
||||
|
||||
Please disable any automatic formatting tools you may have active.
|
||||
If present, you'll be asked to undo any unrelated whitespace changes during code review.
|
||||
|
||||
Members should not be exported as a default export in general.
|
||||
In general, avoid using `export default`.
|
||||
|
||||
The remaining code-style for hydrogen is [in the process of being documented](codestyle.md), but
|
||||
contributors are encouraged to read the
|
||||
[code style document for matrix-react-sdk](https://github.com/matrix-org/matrix-react-sdk/blob/master/code_style.md)
|
||||
and follow the principles set out there.
|
||||
|
||||
Please ensure your changes match the cosmetic style of the existing project,
|
||||
and ***never*** mix cosmetic and functional changes in the same commit, as it
|
||||
makes it horribly hard to review otherwise.
|
||||
|
||||
Attribution
|
||||
-----------
|
||||
If you change or create a file, feel free to add yourself to the copyright holders
|
||||
in the license header of that file.
|
||||
|
||||
Sign off
|
||||
--------
|
||||
In order to have a concrete record that your contribution is intentional
|
||||
and you agree to license it under the same terms as the project's license, we've
|
||||
adopted the same lightweight approach that the Linux Kernel
|
||||
(https://www.kernel.org/doc/Documentation/SubmittingPatches), Docker
|
||||
(https://github.com/docker/docker/blob/master/CONTRIBUTING.md), and many other
|
||||
projects use: the DCO (Developer Certificate of Origin:
|
||||
http://developercertificate.org/). This is a simple declaration that you wrote
|
||||
the contribution or otherwise have the right to contribute it to Matrix:
|
||||
|
||||
```
|
||||
Developer Certificate of Origin
|
||||
Version 1.1
|
||||
|
||||
Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
|
||||
660 York Street, Suite 102,
|
||||
San Francisco, CA 94110 USA
|
||||
|
||||
Everyone is permitted to copy and distribute verbatim copies of this
|
||||
license document, but changing it is not allowed.
|
||||
|
||||
Developer's Certificate of Origin 1.1
|
||||
|
||||
By making a contribution to this project, I certify that:
|
||||
|
||||
(a) The contribution was created in whole or in part by me and I
|
||||
have the right to submit it under the open source license
|
||||
indicated in the file; or
|
||||
|
||||
(b) The contribution is based upon previous work that, to the best
|
||||
of my knowledge, is covered under an appropriate open source
|
||||
license and I have the right under that license to submit that
|
||||
work with modifications, whether created in whole or in part
|
||||
by me, under the same open source license (unless I am
|
||||
permitted to submit under a different license), as indicated
|
||||
in the file; or
|
||||
|
||||
(c) The contribution was provided directly to me by some other
|
||||
person who certified (a), (b) or (c) and I have not modified
|
||||
it.
|
||||
|
||||
(d) I understand and agree that this project and the contribution
|
||||
are public and that a record of the contribution (including all
|
||||
personal information I submit with it, including my sign-off) is
|
||||
maintained indefinitely and may be redistributed consistent with
|
||||
this project or the open source license(s) involved.
|
||||
```
|
||||
|
||||
If you agree to this for your contribution, then all that's needed is to
|
||||
include the line in your commit or pull request comment:
|
||||
|
||||
```
|
||||
Signed-off-by: Your Name <your@email.example.org>
|
||||
```
|
||||
|
||||
We accept contributions under a legally identifiable name, such as your name on
|
||||
government documentation or common-law names (names claimed by legitimate usage
|
||||
or repute). Unfortunately, we cannot accept anonymous contributions at this
|
||||
time.
|
||||
|
||||
Git allows you to add this signoff automatically when using the `-s` flag to
|
||||
`git commit`, which uses the name and email set in your `user.name` and
|
||||
`user.email` git configs.
|
||||
|
||||
If you forgot to sign off your commits before making your pull request and are
|
||||
on Git 2.17+ you can mass signoff using rebase:
|
||||
|
||||
```
|
||||
git rebase --signoff origin/develop
|
||||
```
|
25
README.md
25
README.md
|
@ -10,13 +10,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
|
||||
|
||||
|
|
10
doc/SDK.md
10
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/theme-element-light.css";
|
||||
// OR import "hydrogen-view-sdk/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());
|
||||
}
|
||||
}
|
||||
|
|
19
package.json
19
package.json
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "hydrogen-web",
|
||||
"version": "0.2.26",
|
||||
"version": "0.2.29",
|
||||
"description": "A javascript matrix client prototype, trying to minize RAM usage by offloading as much as possible to IndexedDB",
|
||||
"directories": {
|
||||
"doc": "doc"
|
||||
|
@ -10,9 +10,12 @@
|
|||
"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 +33,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 +45,18 @@
|
|||
"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",
|
||||
"text-encoding": "^0.7.0",
|
||||
"typescript": "^4.3.5",
|
||||
"vite": "^2.6.14",
|
||||
"xxhashjs": "^0.2.2",
|
||||
"bs58": "^4.0.1"
|
||||
"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",
|
||||
"another-json": "^0.2.0",
|
||||
"base64-arraybuffer": "^0.2.0",
|
||||
"dompurify": "^2.3.0"
|
||||
"dompurify": "^2.3.0",
|
||||
"off-color": "^2.0.0"
|
||||
}
|
||||
}
|
||||
|
|
18
scripts/.eslintrc.js
Normal file
18
scripts/.eslintrc.js
Normal file
|
@ -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"
|
||||
},
|
||||
};
|
||||
|
282
scripts/build-plugins/rollup-plugin-build-themes.js
Normal file
282
scripts/build-plugins/rollup-plugin-build-themes.js
Normal file
|
@ -0,0 +1,282 @@
|
|||
/*
|
||||
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');
|
||||
|
||||
async function readCSSSource(location) {
|
||||
const fs = require("fs").promises;
|
||||
const path = require("path");
|
||||
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));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function parseBundle(bundle) {
|
||||
const chunkMap = new Map();
|
||||
const assetMap = new Map();
|
||||
let runtimeThemeChunk;
|
||||
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);
|
||||
continue;
|
||||
}
|
||||
if (info.facadeModuleId?.includes("type=runtime")) {
|
||||
/**
|
||||
* We have a separate field in manifest.source just for the runtime theme,
|
||||
* so store this separately.
|
||||
*/
|
||||
runtimeThemeChunk = info;
|
||||
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, assetMap, runtimeThemeChunk };
|
||||
}
|
||||
|
||||
module.exports = function buildThemes(options) {
|
||||
let manifest, variants, defaultDark, defaultLight, defaultThemes = {};
|
||||
let isDevelopment = false;
|
||||
const virtualModuleId = '@theme/'
|
||||
const resolvedVirtualModuleId = '\0' + virtualModuleId;
|
||||
|
||||
return {
|
||||
name: "build-themes",
|
||||
enforce: "pre",
|
||||
|
||||
configResolved(config) {
|
||||
if (config.command === "serve") {
|
||||
isDevelopment = true;
|
||||
}
|
||||
},
|
||||
|
||||
async buildStart() {
|
||||
if (isDevelopment) { return; }
|
||||
const { themeConfig } = options;
|
||||
for (const [name, location] of Object.entries(themeConfig.themes)) {
|
||||
manifest = require(`${location}/manifest.json`);
|
||||
variants = manifest.values.variants;
|
||||
for (const [variant, details] of Object.entries(variants)) {
|
||||
const fileName = `theme-${name}-${variant}.css`;
|
||||
if (name === themeConfig.default && details.default) {
|
||||
// This is the default theme, stash the file name for later
|
||||
if (details.dark) {
|
||||
defaultDark = fileName;
|
||||
defaultThemes["dark"] = `${name}-${variant}`;
|
||||
}
|
||||
else {
|
||||
defaultLight = fileName;
|
||||
defaultThemes["light"] = `${name}-${variant}`;
|
||||
}
|
||||
}
|
||||
// emit the css as built theme bundle
|
||||
this.emitFile({
|
||||
type: "chunk",
|
||||
id: `${location}/theme.css?variant=${variant}${details.dark? "&dark=true": ""}`,
|
||||
fileName,
|
||||
});
|
||||
}
|
||||
// emit the css as runtime theme bundle
|
||||
this.emitFile({
|
||||
type: "chunk",
|
||||
id: `${location}/theme.css?type=runtime`,
|
||||
fileName: `theme-${name}-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 = options.themeConfig.themes[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",
|
||||
}
|
||||
},
|
||||
];
|
||||
},
|
||||
|
||||
generateBundle(_, bundle) {
|
||||
const { assetMap, chunkMap, runtimeThemeChunk } = parseBundle(bundle);
|
||||
const manifestLocations = [];
|
||||
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 = {};
|
||||
/**
|
||||
* Generate a mapping from theme name to asset hashed location of said theme in build output.
|
||||
* This can be used to enumerate themes during runtime.
|
||||
*/
|
||||
for (const chunk of chunkArray) {
|
||||
const [, name, variant] = chunk.fileName.match(/theme-(.+)-(.+)\.css/);
|
||||
builtAssets[`${name}-${variant}`] = assetMap.get(chunk.fileName).fileName;
|
||||
}
|
||||
manifest.source = {
|
||||
"built-assets": builtAssets,
|
||||
"runtime-asset": assetMap.get(runtimeThemeChunk.fileName).fileName,
|
||||
"derived-variables": derivedVariables,
|
||||
"icon": icon
|
||||
};
|
||||
const name = `theme-${manifest.name}.json`;
|
||||
manifestLocations.push(`assets/${name}`);
|
||||
this.emitFile({
|
||||
type: "asset",
|
||||
name,
|
||||
source: JSON.stringify(manifest),
|
||||
});
|
||||
}
|
||||
addThemesToConfig(bundle, manifestLocations, defaultThemes);
|
||||
},
|
||||
}
|
||||
}
|
|
@ -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];
|
||||
|
|
3
scripts/cleanup.sh
Executable file
3
scripts/cleanup.sh
Executable file
|
@ -0,0 +1,3 @@
|
|||
#!/bin/sh
|
||||
# Remove icons created in .tmp
|
||||
rm -rf .tmp
|
|
@ -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
|
||||
|
|
40
scripts/postcss/color.js
Normal file
40
scripts/postcss/color.js
Normal file
|
@ -0,0 +1,40 @@
|
|||
/*
|
||||
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;
|
||||
|
||||
module.exports.derive = function (value, operation, argument, isDark) {
|
||||
const argumentAsNumber = parseInt(argument);
|
||||
if (isDark) {
|
||||
// For dark themes, invert the operation
|
||||
if (operation === 'darker') {
|
||||
operation = "lighter";
|
||||
}
|
||||
else if (operation === 'lighter') {
|
||||
operation = "darker";
|
||||
}
|
||||
}
|
||||
switch (operation) {
|
||||
case "darker": {
|
||||
const newColorString = offColor(value).darken(argumentAsNumber / 100).hex();
|
||||
return newColorString;
|
||||
}
|
||||
case "lighter": {
|
||||
const newColorString = offColor(value).lighten(argumentAsNumber / 100).hex();
|
||||
return newColorString;
|
||||
}
|
||||
}
|
||||
}
|
177
scripts/postcss/css-compile-variables.js
Normal file
177
scripts/postcss/css-compile-variables.js
Normal file
|
@ -0,0 +1,177 @@
|
|||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
let aliasMap;
|
||||
let resolvedMap;
|
||||
let baseVariables;
|
||||
let isDark;
|
||||
|
||||
function getValueFromAlias(alias) {
|
||||
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) {
|
||||
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);
|
||||
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) {
|
||||
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}) {
|
||||
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) {
|
||||
const location = cssFileLocation.match(/(.+)\/.+\.css/)?.[1];
|
||||
const derivedVariables = [
|
||||
...([...resolvedMap.keys()].filter(v => !aliasMap.has(v))),
|
||||
...([...aliasMap.entries()].map(([alias, variable]) => `${alias}=${variable}`))
|
||||
];
|
||||
map.set(location, { "derived-variables": derivedVariables });
|
||||
}
|
||||
|
||||
/**
|
||||
* @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 = {}) => {
|
||||
aliasMap = new Map();
|
||||
resolvedMap = new Map();
|
||||
baseVariables = new Map();
|
||||
isDark = false;
|
||||
|
||||
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;
|
||||
}
|
||||
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));
|
||||
root.walkDecls(decl => resolveDerivedVariable(decl, opts.derive));
|
||||
addResolvedVariablesToRootSelector(root, {Rule, Declaration});
|
||||
if (opts.compiledVariables){
|
||||
populateMapWithDerivedVariables(opts.compiledVariables, cssFileLocation);
|
||||
}
|
||||
// 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;
|
93
scripts/postcss/css-url-processor.js
Normal file
93
scripts/postcss/css-url-processor.js
Normal file
|
@ -0,0 +1,93 @@
|
|||
/*
|
||||
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;
|
||||
let cssPath;
|
||||
|
||||
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) {
|
||||
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)
|
||||
*/
|
||||
cssPath = root.source?.input.file.replace(/[^/]*$/, "");
|
||||
root.walkDecls(decl => processURL(decl, opts.replacer, colorMap));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
module.exports.postcss = true;
|
85
scripts/postcss/css-url-to-variables.js
Normal file
85
scripts/postcss/css-url-to-variables.js
Normal file
|
@ -0,0 +1,85 @@
|
|||
/*
|
||||
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.
|
||||
*/
|
||||
let counter;
|
||||
let urlVariables;
|
||||
const idToPrepend = "icon-url";
|
||||
|
||||
function findAndReplaceUrl(decl) {
|
||||
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 variableName = `${idToPrepend}-${counter++}`;
|
||||
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 }) {
|
||||
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) {
|
||||
const location = cssFileLocation.match(/(.+)\/.+\.css/)?.[1];
|
||||
const sharedObject = map.get(location);
|
||||
sharedObject["icon"] = Object.fromEntries(urlVariables);
|
||||
}
|
||||
|
||||
/* *
|
||||
* @type {import('postcss').PluginCreator}
|
||||
*/
|
||||
module.exports = (opts = {}) => {
|
||||
urlVariables = new Map();
|
||||
counter = 0;
|
||||
return {
|
||||
postcssPlugin: "postcss-url-to-variable",
|
||||
|
||||
Once(root, { Rule, Declaration }) {
|
||||
root.walkDecls(decl => findAndReplaceUrl(decl));
|
||||
if (urlVariables.size) {
|
||||
addResolvedVariablesToRootSelector(root, { Rule, Declaration });
|
||||
}
|
||||
if (opts.compiledVariables){
|
||||
const cssFileLocation = root.source.input.from;
|
||||
populateMapWithIcons(opts.compiledVariables, cssFileLocation);
|
||||
}
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
module.exports.postcss = true;
|
||||
|
54
scripts/postcss/svg-colorizer.js
Normal file
54
scripts/postcss/svg-colorizer.js
Normal file
|
@ -0,0 +1,54 @@
|
|||
/*
|
||||
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 fs = require("fs");
|
||||
const path = require("path");
|
||||
const xxhash = require('xxhashjs');
|
||||
|
||||
function createHash(content) {
|
||||
const hasher = new xxhash.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
|
||||
*/
|
||||
module.exports.buildColorizedSVG = function (svgLocation, primaryColor, secondaryColor) {
|
||||
const svgCode = fs.readFileSync(svgLocation, { encoding: "utf8"});
|
||||
let coloredSVGCode = svgCode.replaceAll("#ff00ff", primaryColor);
|
||||
coloredSVGCode = coloredSVGCode.replaceAll("#00ffff", secondaryColor);
|
||||
if (svgCode === coloredSVGCode) {
|
||||
throw new Error("svg-colorizer made no color replacements! The input svg should only contain colors #ff00ff (primary, case-sensitive) and #00ffff (secondary, case-sensitive).");
|
||||
}
|
||||
const fileName = svgLocation.match(/.+[/\\](.+\.svg)/)[1];
|
||||
const outputName = `${fileName.substring(0, fileName.length - 4)}-${createHash(coloredSVGCode)}.svg`;
|
||||
const outputPath = path.resolve(__dirname, "../../.tmp");
|
||||
try {
|
||||
fs.mkdirSync(outputPath);
|
||||
}
|
||||
catch (e) {
|
||||
if (e.code !== "EEXIST") {
|
||||
throw e;
|
||||
}
|
||||
}
|
||||
const outputFile = `${outputPath}/${outputName}`;
|
||||
fs.writeFileSync(outputFile, coloredSVGCode);
|
||||
return outputFile;
|
||||
}
|
30
scripts/postcss/tests/common.js
Normal file
30
scripts/postcss/tests/common.js
Normal file
|
@ -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);
|
||||
};
|
||||
}
|
||||
|
||||
|
156
scripts/postcss/tests/css-compile-variables.test.js
Normal file
156
scripts/postcss/tests/css-compile-variables.test.js
Normal file
|
@ -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);
|
||||
}
|
||||
};
|
||||
};
|
71
scripts/postcss/tests/css-url-to-variables.test.js
Normal file
71
scripts/postcss/tests/css-url-to-variables.test.js
Normal file
|
@ -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"]);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
|
@ -1,7 +1,19 @@
|
|||
{
|
||||
"name": "hydrogen-view-sdk",
|
||||
"description": "Embeddable matrix client library, including view components",
|
||||
"version": "0.0.5",
|
||||
"main": "./lib-build/hydrogen.es.js",
|
||||
"type": "module"
|
||||
"version": "0.0.12",
|
||||
"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/*"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,12 @@
|
|||
#!/bin/bash
|
||||
# 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
|
||||
|
@ -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
|
||||
|
|
|
@ -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.
|
||||
```
|
||||
|
|
3
scripts/sdk/test/.gitignore
vendored
Normal file
3
scripts/sdk/test/.gitignore
vendored
Normal file
|
@ -0,0 +1,3 @@
|
|||
node_modules
|
||||
dist
|
||||
yarn.lock
|
2
scripts/sdk/test/deps.d.ts
vendored
Normal file
2
scripts/sdk/test/deps.d.ts
vendored
Normal file
|
@ -0,0 +1,2 @@
|
|||
// Keep TypeScripts from complaining about hydrogen-view-sdk not having types yet
|
||||
declare module "hydrogen-view-sdk";
|
21
scripts/sdk/test/esm-entry.ts
Normal file
21
scripts/sdk/test/esm-entry.ts
Normal file
|
@ -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/theme-element-light.css";
|
||||
|
||||
console.log('hydrogenViewSdk', hydrogenViewSdk);
|
||||
console.log('assetPaths', assetPaths);
|
||||
|
||||
console.log('Entry ESM works ✅');
|
12
scripts/sdk/test/index.html
Normal file
12
scripts/sdk/test/index.html
Normal file
|
@ -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>
|
8
scripts/sdk/test/package.json
Normal file
8
scripts/sdk/test/package.json
Normal file
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"name": "test-sdk",
|
||||
"version": "0.0.0",
|
||||
"description": "",
|
||||
"dependencies": {
|
||||
"hydrogen-view-sdk": "link:../../../target"
|
||||
}
|
||||
}
|
13
scripts/sdk/test/test-sdk-in-commonjs-env.js
Normal file
13
scripts/sdk/test/test-sdk-in-commonjs-env.js
Normal file
|
@ -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/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 ✅');
|
19
scripts/sdk/test/test-sdk-in-esm-vite-build-env.js
Normal file
19
scripts/sdk/test/test-sdk-in-esm-vite-build-env.js
Normal file
|
@ -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();
|
|
@ -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;
|
||||
|
|
|
@ -14,11 +14,18 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import {ViewModel} from "./ViewModel.js";
|
||||
import {Options, ViewModel} from "./ViewModel";
|
||||
import {Client} from "../matrix/Client.js";
|
||||
|
||||
export class LogoutViewModel extends ViewModel {
|
||||
constructor(options) {
|
||||
type LogoutOptions = { sessionId: string; } & Options;
|
||||
|
||||
export class LogoutViewModel extends ViewModel<LogoutOptions> {
|
||||
private _sessionId: string;
|
||||
private _busy: boolean;
|
||||
private _showConfirm: boolean;
|
||||
private _error?: Error;
|
||||
|
||||
constructor(options: LogoutOptions) {
|
||||
super(options);
|
||||
this._sessionId = options.sessionId;
|
||||
this._busy = false;
|
||||
|
@ -26,19 +33,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 {
|
||||
return this.urlCreator.urlForSegment("session", true);
|
||||
}
|
||||
|
||||
async logout() {
|
||||
async logout(): Promise<void> {
|
||||
this._busy = true;
|
||||
this._showConfirm = false;
|
||||
this.emitChange("busy");
|
||||
|
@ -53,7 +60,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 {
|
|
@ -18,9 +18,9 @@ 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 {LogoutViewModel} from "./LogoutViewModel";
|
||||
import {SessionPickerViewModel} from "./SessionPickerViewModel.js";
|
||||
import {ViewModel} from "./ViewModel.js";
|
||||
import {ViewModel} from "./ViewModel";
|
||||
|
||||
export class RootViewModel extends ViewModel {
|
||||
constructor(options) {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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,54 +22,80 @@ 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 {URLRouter} from "./navigation/URLRouter";
|
||||
|
||||
export type Options = {
|
||||
platform: Platform
|
||||
logger: ILogger
|
||||
urlCreator: URLRouter
|
||||
navigation: Navigation
|
||||
emitChange?: (params: any) => void
|
||||
}
|
||||
|
||||
export class ViewModel<O extends Options = Options> 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 {
|
||||
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(type: string, onChange: (value: string | true | undefined, type: string) => void) {
|
||||
const segmentObservable = this.navigation.observe(type);
|
||||
const unsubscribe = segmentObservable.subscribe((value: string | true | undefined) => {
|
||||
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
|
||||
|
@ -76,7 +103,7 @@ export class ViewModel extends EventEmitter {
|
|||
//
|
||||
// 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[]) {
|
||||
// just concat for now
|
||||
let result = "";
|
||||
for (let i = 0; i < parts.length; ++i) {
|
||||
|
@ -88,11 +115,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 +123,23 @@ 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(): URLRouter {
|
||||
return this._options.urlCreator;
|
||||
}
|
||||
|
||||
get navigation() {
|
||||
get navigation(): Navigation {
|
||||
return this._options.navigation;
|
||||
}
|
||||
}
|
|
@ -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");
|
|
@ -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 {
|
||||
|
|
|
@ -15,7 +15,7 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import {Client} from "../../matrix/Client.js";
|
||||
import {ViewModel} from "../ViewModel.js";
|
||||
import {ViewModel} from "../ViewModel";
|
||||
import {PasswordLoginViewModel} from "./PasswordLoginViewModel.js";
|
||||
import {StartSSOLoginViewModel} from "./StartSSOLoginViewModel.js";
|
||||
import {CompleteSSOLoginViewModel} from "./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 PasswordLoginViewModel extends ViewModel {
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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";
|
||||
|
||||
|
|
|
@ -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 {addPanelIfNeeded} from "../navigation/index.js";
|
||||
|
||||
function dedupeSparse(roomIds) {
|
||||
|
|
|
@ -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";
|
||||
|
|
|
@ -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";
|
||||
|
||||
|
|
|
@ -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"];
|
||||
|
||||
|
|
|
@ -15,7 +15,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 {RoomTileViewModel} from "./RoomTileViewModel.js";
|
||||
import {InviteTileViewModel} from "./InviteTileViewModel.js";
|
||||
import {RoomBeingCreatedTileViewModel} from "./RoomBeingCreatedTileViewModel.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) {
|
||||
|
|
|
@ -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";
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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";
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -17,18 +17,21 @@ 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";
|
||||
|
||||
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;
|
||||
|
@ -47,12 +50,13 @@ export class RoomViewModel extends ViewModel {
|
|||
try {
|
||||
const timeline = await this._room.openTimeline();
|
||||
console.log('timeline', timeline.entries);
|
||||
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");
|
||||
|
@ -162,7 +166,12 @@ 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 _sendMessage(message, replyingTo) {
|
||||
|
|
|
@ -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";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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 () {}));
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -32,15 +32,15 @@ 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) {
|
||||
console.log('TimelineViewModel asdf', 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;
|
||||
|
|
|
@ -21,8 +21,8 @@ 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;
|
||||
|
|
|
@ -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() {
|
||||
|
@ -126,23 +126,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();
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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),
|
||||
|
|
|
@ -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");
|
||||
},
|
||||
};
|
||||
|
|
|
@ -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() {
|
||||
|
|
94
src/domain/session/room/timeline/tiles/index.ts
Normal file
94
src/domain/session/room/timeline/tiles/index.ts
Normal file
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
}
|
|
@ -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";
|
||||
|
||||
|
|
|
@ -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 {KeyBackupViewModel} from "./KeyBackupViewModel.js";
|
||||
|
||||
class PushNotificationStatus {
|
||||
|
@ -50,6 +50,7 @@ export class SettingsViewModel extends ViewModel {
|
|||
this.minSentImageSizeLimit = 400;
|
||||
this.maxSentImageSizeLimit = 4000;
|
||||
this.pushNotifications = new PushNotificationStatus();
|
||||
this._activeTheme = undefined;
|
||||
}
|
||||
|
||||
get _session() {
|
||||
|
@ -76,6 +77,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 +131,18 @@ export class SettingsViewModel extends ViewModel {
|
|||
return this._formatBytes(this._estimate?.usage);
|
||||
}
|
||||
|
||||
get themes() {
|
||||
return this.platform.themeLoader.themes;
|
||||
}
|
||||
|
||||
get activeTheme() {
|
||||
return this._activeTheme;
|
||||
}
|
||||
|
||||
setTheme(name) {
|
||||
this.platform.themeLoader.setTheme(name);
|
||||
}
|
||||
|
||||
_formatBytes(n) {
|
||||
if (typeof n === "number") {
|
||||
return Math.round(n / (1024 * 1024)).toFixed(1) + " MB";
|
||||
|
|
|
@ -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">
|
||||
|
|
55
src/lib.ts
55
src/lib.ts
|
@ -16,6 +16,7 @@ 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 {RootViewModel} from "./domain/RootViewModel.js";
|
||||
|
@ -27,17 +28,67 @@ export {RoomView} from "./platform/web/ui/session/room/RoomView.js";
|
|||
export {RightPanelView} from "./platform/web/ui/session/rightpanel/RightPanelView.js";
|
||||
export {MediaRepository} from "./matrix/net/MediaRepository";
|
||||
export {TilesCollection} from "./domain/session/room/timeline/TilesCollection.js";
|
||||
export {tilesCreator} from "./domain/session/room/timeline/tilesCreator.js";
|
||||
export {FragmentIdComparer} from "./matrix/room/timeline/FragmentIdComparer.js";
|
||||
export {EventEntry} from "./matrix/room/timeline/entries/EventEntry.js";
|
||||
export {encodeKey, decodeKey, encodeEventIdKey, decodeEventIdKey} from "./matrix/storage/idb/stores/TimelineEventStore";
|
||||
export {Timeline} from "./matrix/room/timeline/Timeline.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";
|
||||
|
|
|
@ -132,14 +132,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,
|
||||
password,
|
||||
initialDeviceDisplayName,
|
||||
});
|
||||
},
|
||||
flowSelector);
|
||||
return registration;
|
||||
}
|
||||
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -214,11 +214,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 +364,154 @@ export class DeviceTracker {
|
|||
return await txn.deviceIdentities.getByCurve25519Key(curve25519Key);
|
||||
}
|
||||
}
|
||||
|
||||
import {createMockStorage} from "../../mocks/Storage";
|
||||
import {Instance as NullLoggerInstance} from "../../logging/NullLogger";
|
||||
|
||||
export function tests() {
|
||||
|
||||
function createUntrackedRoomMock(roomId, joinedUserIds, invitedUserIds = []) {
|
||||
return {
|
||||
isTrackingMembers: false,
|
||||
isEncrypted: true,
|
||||
loadMemberList: () => {
|
||||
const joinedMembers = joinedUserIds.map(userId => {return {membership: "join", roomId, userId};});
|
||||
const invitedMembers = invitedUserIds.map(userId => {return {membership: "invite", roomId, userId};});
|
||||
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;
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
}
|
||||
const roomId = "!abc:hs.tld";
|
||||
|
||||
return {
|
||||
"trackRoom only writes joined members": 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, 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, 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, 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");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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";
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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
|
||||
) {}
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
48
src/matrix/e2ee/olm/types.ts
Normal file
48
src/matrix/e2ee/olm/types.ts
Normal file
|
@ -0,0 +1,48 @@
|
|||
/*
|
||||
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.
|
||||
*/
|
||||
|
||||
export const enum OlmPayloadType {
|
||||
PreKey = 0,
|
||||
Normal = 1
|
||||
}
|
||||
|
||||
export type OlmMessage = {
|
||||
type?: OlmPayloadType,
|
||||
body?: string
|
||||
}
|
||||
|
||||
export type OlmEncryptedMessageContent = {
|
||||
algorithm?: "m.olm.v1.curve25519-aes-sha2"
|
||||
sender_key?: string,
|
||||
ciphertext?: {
|
||||
[deviceCurve25519Key: string]: OlmMessage
|
||||
}
|
||||
}
|
||||
|
||||
export type OlmEncryptedEvent = {
|
||||
type?: "m.room.encrypted",
|
||||
content?: OlmEncryptedMessageContent
|
||||
sender?: string
|
||||
}
|
||||
|
||||
export type OlmPayload = {
|
||||
type?: string;
|
||||
content?: Record<string, any>;
|
||||
sender?: string;
|
||||
recipient?: string;
|
||||
recipient_keys?: {ed25519?: string};
|
||||
keys?: {ed25519?: string};
|
||||
}
|
|
@ -27,8 +27,8 @@ class Request implements IHomeServerRequest {
|
|||
public readonly args: any[];
|
||||
private responseResolve: (result: any) => void;
|
||||
public responseReject: (error: Error) => void;
|
||||
private responseCodeResolve: (result: any) => void;
|
||||
private responseCodeReject: (result: any) => void;
|
||||
private responseCodeResolve?: (result: any) => void;
|
||||
private responseCodeReject?: (result: any) => void;
|
||||
private _requestResult?: IHomeServerRequest;
|
||||
private readonly _responsePromise: Promise<any>;
|
||||
private _responseCodePromise: Promise<any>;
|
||||
|
@ -73,7 +73,7 @@ class Request implements IHomeServerRequest {
|
|||
const response = await this._requestResult?.response();
|
||||
this.responseResolve(response);
|
||||
const responseCode = await this._requestResult?.responseCode();
|
||||
this.responseCodeResolve(responseCode);
|
||||
this.responseCodeResolve?.(responseCode);
|
||||
}
|
||||
|
||||
get requestResult() {
|
||||
|
|
|
@ -18,6 +18,7 @@ import type {HomeServerApi} from "../net/HomeServerApi";
|
|||
import type {BaseRegistrationStage} from "./stages/BaseRegistrationStage";
|
||||
import {DummyAuth} from "./stages/DummyAuth";
|
||||
import {TermsAuth} from "./stages/TermsAuth";
|
||||
import {TokenAuth} from "./stages/TokenAuth";
|
||||
import type {
|
||||
AccountDetails,
|
||||
RegistrationFlow,
|
||||
|
@ -108,6 +109,9 @@ export class Registration {
|
|||
return new DummyAuth(session, params?.[type]);
|
||||
case "m.login.terms":
|
||||
return new TermsAuth(session, params?.[type]);
|
||||
case "org.matrix.msc3231.login.registration_token":
|
||||
case "m.login.registration_token":
|
||||
return new TokenAuth(session, params?.[type], type);
|
||||
default:
|
||||
throw new Error(`Unknown stage: ${type}`);
|
||||
}
|
||||
|
|
48
src/matrix/registration/stages/TokenAuth.ts
Normal file
48
src/matrix/registration/stages/TokenAuth.ts
Normal file
|
@ -0,0 +1,48 @@
|
|||
/*
|
||||
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 {AuthenticationData, RegistrationParams} from "../types";
|
||||
import {BaseRegistrationStage} from "./BaseRegistrationStage";
|
||||
|
||||
export class TokenAuth extends BaseRegistrationStage {
|
||||
private _token?: string;
|
||||
private readonly _type: string;
|
||||
|
||||
constructor(session: string, params: RegistrationParams | undefined, type: string) {
|
||||
super(session, params);
|
||||
this._type = type;
|
||||
}
|
||||
|
||||
|
||||
generateAuthenticationData(): AuthenticationData {
|
||||
if (!this._token) {
|
||||
throw new Error("No token provided for TokenAuth");
|
||||
}
|
||||
return {
|
||||
session: this._session,
|
||||
type: this._type,
|
||||
token: this._token,
|
||||
};
|
||||
}
|
||||
|
||||
setToken(token: string) {
|
||||
this._token = token;
|
||||
}
|
||||
|
||||
get type(): string {
|
||||
return this._type;
|
||||
}
|
||||
}
|
|
@ -14,7 +14,7 @@ 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";
|
||||
import {RetainedValue} from "../../../utils/RetainedValue";
|
||||
|
||||
export class MemberList extends RetainedValue {
|
||||
|
|
|
@ -24,7 +24,6 @@ import {RoomMember} from "../members/RoomMember.js";
|
|||
import {getRelation, ANNOTATION_RELATION_TYPE} from "./relations.js";
|
||||
import {REDACTION_TYPE} from "../common";
|
||||
import {NonPersistedEventEntry} from "./entries/NonPersistedEventEntry.js";
|
||||
import {DecryptionSource} from "../../e2ee/common.js";
|
||||
import {EVENT_TYPE as MEMBER_EVENT_TYPE} from "../members/RoomMember.js";
|
||||
|
||||
export class Timeline {
|
||||
|
|
|
@ -24,19 +24,19 @@ function decodeKey(key: string): { senderKey: string, sessionId: string } {
|
|||
return {senderKey, sessionId};
|
||||
}
|
||||
|
||||
interface OlmSession {
|
||||
export type OlmSessionEntry = {
|
||||
session: string;
|
||||
sessionId: string;
|
||||
senderKey: string;
|
||||
lastUsed: number;
|
||||
}
|
||||
|
||||
type OlmSessionEntry = OlmSession & { key: string };
|
||||
type OlmSessionStoredEntry = OlmSessionEntry & { key: string };
|
||||
|
||||
export class OlmSessionStore {
|
||||
private _store: Store<OlmSessionEntry>;
|
||||
private _store: Store<OlmSessionStoredEntry>;
|
||||
|
||||
constructor(store: Store<OlmSessionEntry>) {
|
||||
constructor(store: Store<OlmSessionStoredEntry>) {
|
||||
this._store = store;
|
||||
}
|
||||
|
||||
|
@ -55,20 +55,20 @@ export class OlmSessionStore {
|
|||
return sessionIds;
|
||||
}
|
||||
|
||||
getAll(senderKey: string): Promise<OlmSession[]> {
|
||||
getAll(senderKey: string): Promise<OlmSessionEntry[]> {
|
||||
const range = this._store.IDBKeyRange.lowerBound(encodeKey(senderKey, ""));
|
||||
return this._store.selectWhile(range, session => {
|
||||
return session.senderKey === senderKey;
|
||||
});
|
||||
}
|
||||
|
||||
get(senderKey: string, sessionId: string): Promise<OlmSession | undefined> {
|
||||
get(senderKey: string, sessionId: string): Promise<OlmSessionEntry | undefined> {
|
||||
return this._store.get(encodeKey(senderKey, sessionId));
|
||||
}
|
||||
|
||||
set(session: OlmSession): void {
|
||||
(session as OlmSessionEntry).key = encodeKey(session.senderKey, session.sessionId);
|
||||
this._store.put(session as OlmSessionEntry);
|
||||
set(session: OlmSessionEntry): void {
|
||||
(session as OlmSessionStoredEntry).key = encodeKey(session.senderKey, session.sessionId);
|
||||
this._store.put(session as OlmSessionStoredEntry);
|
||||
}
|
||||
|
||||
remove(senderKey: string, sessionId: string): void {
|
||||
|
|
|
@ -18,14 +18,14 @@ import {SortedMapList} from "./list/SortedMapList.js";
|
|||
import {FilteredMap} from "./map/FilteredMap.js";
|
||||
import {MappedMap} from "./map/MappedMap.js";
|
||||
import {JoinedMap} from "./map/JoinedMap.js";
|
||||
import {BaseObservableMap} from "./map/BaseObservableMap.js";
|
||||
import {BaseObservableMap} from "./map/BaseObservableMap";
|
||||
// re-export "root" (of chain) collections
|
||||
export { ObservableArray } from "./list/ObservableArray";
|
||||
export { SortedArray } from "./list/SortedArray";
|
||||
export { MappedList } from "./list/MappedList";
|
||||
export { AsyncMappedList } from "./list/AsyncMappedList";
|
||||
export { ConcatList } from "./list/ConcatList";
|
||||
export { ObservableMap } from "./map/ObservableMap.js";
|
||||
export { ObservableMap } from "./map/ObservableMap";
|
||||
|
||||
// avoid circular dependency between these classes
|
||||
// and BaseObservableMap (as they extend it)
|
||||
|
|
|
@ -133,7 +133,7 @@ export class SortedMapList extends BaseObservableList {
|
|||
}
|
||||
}
|
||||
|
||||
import {ObservableMap} from "../map/ObservableMap.js";
|
||||
import {ObservableMap} from "../map/ObservableMap";
|
||||
|
||||
export function tests() {
|
||||
return {
|
||||
|
|
|
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import {BaseObservableMap} from "./BaseObservableMap.js";
|
||||
import {BaseObservableMap} from "./BaseObservableMap";
|
||||
|
||||
export class ApplyMap extends BaseObservableMap {
|
||||
constructor(source, apply) {
|
||||
|
|
|
@ -16,7 +16,14 @@ limitations under the License.
|
|||
|
||||
import {BaseObservable} from "../BaseObservable";
|
||||
|
||||
export class BaseObservableMap extends BaseObservable {
|
||||
export interface IMapObserver<K, V> {
|
||||
onReset(): void;
|
||||
onAdd(key: K, value:V): void;
|
||||
onUpdate(key: K, value: V, params: any): void;
|
||||
onRemove(key: K, value: V): void
|
||||
}
|
||||
|
||||
export abstract class BaseObservableMap<K, V> extends BaseObservable<IMapObserver<K, V>> {
|
||||
emitReset() {
|
||||
for(let h of this._handlers) {
|
||||
h.onReset();
|
||||
|
@ -24,15 +31,15 @@ export class BaseObservableMap extends BaseObservable {
|
|||
}
|
||||
// we need batch events, mostly on index based collection though?
|
||||
// maybe we should get started without?
|
||||
emitAdd(key, value) {
|
||||
emitAdd(key: K, value: V) {
|
||||
for(let h of this._handlers) {
|
||||
h.onAdd(key, value);
|
||||
}
|
||||
}
|
||||
|
||||
emitUpdate(key, value, ...params) {
|
||||
emitUpdate(key, value, params) {
|
||||
for(let h of this._handlers) {
|
||||
h.onUpdate(key, value, ...params);
|
||||
h.onUpdate(key, value, params);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -42,16 +49,7 @@ export class BaseObservableMap extends BaseObservable {
|
|||
}
|
||||
}
|
||||
|
||||
[Symbol.iterator]() {
|
||||
throw new Error("unimplemented");
|
||||
}
|
||||
|
||||
get size() {
|
||||
throw new Error("unimplemented");
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
get(key) {
|
||||
throw new Error("unimplemented");
|
||||
}
|
||||
abstract [Symbol.iterator](): Iterator<[K, V]>;
|
||||
abstract get size(): number;
|
||||
abstract get(key: K): V | undefined;
|
||||
}
|
|
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import {BaseObservableMap} from "./BaseObservableMap.js";
|
||||
import {BaseObservableMap} from "./BaseObservableMap";
|
||||
|
||||
export class FilteredMap extends BaseObservableMap {
|
||||
constructor(source, filter) {
|
||||
|
@ -166,7 +166,7 @@ class FilterIterator {
|
|||
}
|
||||
}
|
||||
|
||||
import {ObservableMap} from "./ObservableMap.js";
|
||||
import {ObservableMap} from "./ObservableMap";
|
||||
export function tests() {
|
||||
return {
|
||||
"filter preloaded list": assert => {
|
||||
|
|
|
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import {BaseObservableMap} from "./BaseObservableMap.js";
|
||||
import {BaseObservableMap} from "./BaseObservableMap";
|
||||
|
||||
export class JoinedMap extends BaseObservableMap {
|
||||
constructor(sources) {
|
||||
|
@ -191,7 +191,7 @@ class SourceSubscriptionHandler {
|
|||
}
|
||||
|
||||
|
||||
import { ObservableMap } from "./ObservableMap.js";
|
||||
import { ObservableMap } from "./ObservableMap";
|
||||
|
||||
export function tests() {
|
||||
|
||||
|
|
|
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import {BaseObservableMap} from "./BaseObservableMap.js";
|
||||
import {BaseObservableMap} from "./BaseObservableMap";
|
||||
|
||||
export class LogMap extends BaseObservableMap {
|
||||
constructor(source, log) {
|
||||
|
|
|
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import {BaseObservableMap} from "./BaseObservableMap.js";
|
||||
import {BaseObservableMap} from "./BaseObservableMap";
|
||||
/*
|
||||
so a mapped value can emit updates on it's own with this._emitSpontaneousUpdate that is passed in the mapping function
|
||||
how should the mapped value be notified of an update though? and can it then decide to not propagate the update?
|
||||
|
|
|
@ -14,15 +14,17 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import {BaseObservableMap} from "./BaseObservableMap.js";
|
||||
import {BaseObservableMap} from "./BaseObservableMap";
|
||||
|
||||
export class ObservableMap extends BaseObservableMap {
|
||||
constructor(initialValues) {
|
||||
export class ObservableMap<K, V> extends BaseObservableMap<K, V> {
|
||||
private readonly _values: Map<K, V>;
|
||||
|
||||
constructor(initialValues?: (readonly [K, V])[]) {
|
||||
super();
|
||||
this._values = new Map(initialValues);
|
||||
}
|
||||
|
||||
update(key, params) {
|
||||
update(key: K, params?: any): boolean {
|
||||
const value = this._values.get(key);
|
||||
if (value !== undefined) {
|
||||
// could be the same value, so it's already updated
|
||||
|
@ -34,7 +36,7 @@ export class ObservableMap extends BaseObservableMap {
|
|||
return false; // or return existing value?
|
||||
}
|
||||
|
||||
add(key, value) {
|
||||
add(key: K, value: V): boolean {
|
||||
if (!this._values.has(key)) {
|
||||
this._values.set(key, value);
|
||||
this.emitAdd(key, value);
|
||||
|
@ -43,7 +45,7 @@ export class ObservableMap extends BaseObservableMap {
|
|||
return false; // or return existing value?
|
||||
}
|
||||
|
||||
remove(key) {
|
||||
remove(key: K): boolean {
|
||||
const value = this._values.get(key);
|
||||
if (value !== undefined) {
|
||||
this._values.delete(key);
|
||||
|
@ -54,39 +56,39 @@ export class ObservableMap extends BaseObservableMap {
|
|||
}
|
||||
}
|
||||
|
||||
set(key, value) {
|
||||
set(key: K, value: V): boolean {
|
||||
if (this._values.has(key)) {
|
||||
// We set the value here because update only supports inline updates
|
||||
this._values.set(key, value);
|
||||
return this.update(key);
|
||||
return this.update(key, undefined);
|
||||
}
|
||||
else {
|
||||
return this.add(key, value);
|
||||
}
|
||||
}
|
||||
|
||||
reset() {
|
||||
reset(): void {
|
||||
this._values.clear();
|
||||
this.emitReset();
|
||||
}
|
||||
|
||||
get(key) {
|
||||
get(key: K): V | undefined {
|
||||
return this._values.get(key);
|
||||
}
|
||||
|
||||
get size() {
|
||||
get size(): number {
|
||||
return this._values.size;
|
||||
}
|
||||
|
||||
[Symbol.iterator]() {
|
||||
[Symbol.iterator](): Iterator<[K, V]> {
|
||||
return this._values.entries();
|
||||
}
|
||||
|
||||
values() {
|
||||
values(): Iterator<V> {
|
||||
return this._values.values();
|
||||
}
|
||||
|
||||
keys() {
|
||||
keys(): Iterator<K> {
|
||||
return this._values.keys();
|
||||
}
|
||||
}
|
||||
|
@ -105,13 +107,16 @@ export function tests() {
|
|||
|
||||
test_add(assert) {
|
||||
let fired = 0;
|
||||
const map = new ObservableMap();
|
||||
const map = new ObservableMap<number, {value: number}>();
|
||||
map.subscribe({
|
||||
onAdd(key, value) {
|
||||
fired += 1;
|
||||
assert.equal(key, 1);
|
||||
assert.deepEqual(value, {value: 5});
|
||||
}
|
||||
},
|
||||
onUpdate() {},
|
||||
onRemove() {},
|
||||
onReset() {}
|
||||
});
|
||||
map.add(1, {value: 5});
|
||||
assert.equal(map.size, 1);
|
||||
|
@ -120,7 +125,7 @@ export function tests() {
|
|||
|
||||
test_update(assert) {
|
||||
let fired = 0;
|
||||
const map = new ObservableMap();
|
||||
const map = new ObservableMap<number, {number: number}>();
|
||||
const value = {number: 5};
|
||||
map.add(1, value);
|
||||
map.subscribe({
|
||||
|
@ -129,7 +134,10 @@ export function tests() {
|
|||
assert.equal(key, 1);
|
||||
assert.deepEqual(value, {number: 6});
|
||||
assert.equal(params, "test");
|
||||
}
|
||||
},
|
||||
onAdd() {},
|
||||
onRemove() {},
|
||||
onReset() {}
|
||||
});
|
||||
value.number = 6;
|
||||
map.update(1, "test");
|
||||
|
@ -138,9 +146,12 @@ export function tests() {
|
|||
|
||||
test_update_unknown(assert) {
|
||||
let fired = 0;
|
||||
const map = new ObservableMap();
|
||||
const map = new ObservableMap<number, {number: number}>();
|
||||
map.subscribe({
|
||||
onUpdate() { fired += 1; }
|
||||
onUpdate() { fired += 1; },
|
||||
onAdd() {},
|
||||
onRemove() {},
|
||||
onReset() {}
|
||||
});
|
||||
const result = map.update(1);
|
||||
assert.equal(fired, 0);
|
||||
|
@ -149,7 +160,7 @@ export function tests() {
|
|||
|
||||
test_set(assert) {
|
||||
let add_fired = 0, update_fired = 0;
|
||||
const map = new ObservableMap();
|
||||
const map = new ObservableMap<number, {value: number}>();
|
||||
map.subscribe({
|
||||
onAdd(key, value) {
|
||||
add_fired += 1;
|
||||
|
@ -160,7 +171,9 @@ export function tests() {
|
|||
update_fired += 1;
|
||||
assert.equal(key, 1);
|
||||
assert.deepEqual(value, {value: 7});
|
||||
}
|
||||
},
|
||||
onRemove() {},
|
||||
onReset() {}
|
||||
});
|
||||
// Add
|
||||
map.set(1, {value: 5});
|
||||
|
@ -174,7 +187,7 @@ export function tests() {
|
|||
|
||||
test_remove(assert) {
|
||||
let fired = 0;
|
||||
const map = new ObservableMap();
|
||||
const map = new ObservableMap<number, {value: number}>();
|
||||
const value = {value: 5};
|
||||
map.add(1, value);
|
||||
map.subscribe({
|
||||
|
@ -182,7 +195,10 @@ export function tests() {
|
|||
fired += 1;
|
||||
assert.equal(key, 1);
|
||||
assert.deepEqual(value, {value: 5});
|
||||
}
|
||||
},
|
||||
onAdd() {},
|
||||
onUpdate() {},
|
||||
onReset() {}
|
||||
});
|
||||
map.remove(1);
|
||||
assert.equal(map.size, 0);
|
||||
|
@ -190,8 +206,8 @@ export function tests() {
|
|||
},
|
||||
|
||||
test_iterate(assert) {
|
||||
const results = [];
|
||||
const map = new ObservableMap();
|
||||
const results: any[] = [];
|
||||
const map = new ObservableMap<number, {number: number}>();
|
||||
map.add(1, {number: 5});
|
||||
map.add(2, {number: 6});
|
||||
map.add(3, {number: 7});
|
||||
|
@ -204,7 +220,7 @@ export function tests() {
|
|||
assert.equal(results.find(([key]) => key === 3)[1].number, 7);
|
||||
},
|
||||
test_size(assert) {
|
||||
const map = new ObservableMap();
|
||||
const map = new ObservableMap<number, {number: number}>();
|
||||
map.add(1, {number: 5});
|
||||
map.add(2, {number: 6});
|
||||
assert.equal(map.size, 2);
|
|
@ -19,6 +19,6 @@ import {hkdf} from "../../utils/crypto/hkdf";
|
|||
|
||||
import {Platform as ModernPlatform} from "./Platform.js";
|
||||
|
||||
export function Platform(container, assetPaths, config, options = null) {
|
||||
return new ModernPlatform(container, assetPaths, config, options, {aesjs, hkdf});
|
||||
export function Platform({ container, assetPaths, config, configURL, options = null }) {
|
||||
return new ModernPlatform({ container, assetPaths, config, configURL, options, cryptoExtras: { aesjs, hkdf }});
|
||||
}
|
||||
|
|
Some files were not shown because too many files have changed in this diff Show more
Reference in a new issue