mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-21 16:55:34 +03:00
Code Issues Projects Releases Packages Wiki Activity

Apply prettier formatting

Browse source
This commit is contained in:
Michael Weimann 2022-12-09 13:28:29 +01:00
parent a32f12c8f3
commit 7921a6cbf8
No known key found for this signature in database
GPG key ID: 53F535A266BB9584
104 changed files with 12169 additions and 11047 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

107
.eslintrc.js
View file

@ -1,32 +1,23 @@
module.exports = {
plugins: ["matrix-org"],
extends: [
"plugin:matrix-org/babel",
"plugin:matrix-org/react",
],
extends: ["plugin:matrix-org/babel", "plugin:matrix-org/react"],
env: {
browser: true,
node: true,
},
rules: {
// Things we do that break the ideal style
"quotes": "off",
quotes: "off",
},
settings: {
react: {
version: 'detect',
version: "detect",
},
},
overrides: [{
files: [
"src/**/*.{ts,tsx}",
"test/**/*.{ts,tsx}",
"module_system/**/*.{ts,tsx}",
],
extends: [
"plugin:matrix-org/typescript",
"plugin:matrix-org/react",
],
overrides: [
{
files: ["src/**/*.{ts,tsx}", "test/**/*.{ts,tsx}", "module_system/**/*.{ts,tsx}"],
extends: ["plugin:matrix-org/typescript", "plugin:matrix-org/react"],
// NOTE: These rules are frozen and new rules should not be added here.
// New changes belong in https://github.com/matrix-org/eslint-plugin-matrix-org/
rules: {
@ -40,46 +31,60 @@ module.exports = {
"@typescript-eslint/no-non-null-assertion": "off",
// Ban matrix-js-sdk/src imports in favour of matrix-js-sdk/src/matrix imports to prevent unleashing hell.
"no-restricted-imports": ["error", {
"paths": [{
"name": "matrix-js-sdk",
"message": "Please use matrix-js-sdk/src/matrix instead",
}, {
"name": "matrix-js-sdk/",
"message": "Please use matrix-js-sdk/src/matrix instead",
}, {
"name": "matrix-js-sdk/src",
"message": "Please use matrix-js-sdk/src/matrix instead",
}, {
"name": "matrix-js-sdk/src/",
"message": "Please use matrix-js-sdk/src/matrix instead",
}, {
"name": "matrix-js-sdk/src/index",
"message": "Please use matrix-js-sdk/src/matrix instead",
}, {
"name": "matrix-react-sdk",
"message": "Please use matrix-react-sdk/src/index instead",
}, {
"name": "matrix-react-sdk/",
"message": "Please use matrix-react-sdk/src/index instead",
}],
"patterns": [{
"group": ["matrix-js-sdk/lib", "matrix-js-sdk/lib/", "matrix-js-sdk/lib/**"],
"message": "Please use matrix-js-sdk/src/* instead",
}, {
"group": ["matrix-react-sdk/lib", "matrix-react-sdk/lib/", "matrix-react-sdk/lib/**"],
"message": "Please use matrix-react-sdk/src/* instead",
}],
}],
"no-restricted-imports": [
"error",
{
paths: [
{
name: "matrix-js-sdk",
message: "Please use matrix-js-sdk/src/matrix instead",
},
{
name: "matrix-js-sdk/",
message: "Please use matrix-js-sdk/src/matrix instead",
},
{
name: "matrix-js-sdk/src",
message: "Please use matrix-js-sdk/src/matrix instead",
},
{
name: "matrix-js-sdk/src/",
message: "Please use matrix-js-sdk/src/matrix instead",
},
{
name: "matrix-js-sdk/src/index",
message: "Please use matrix-js-sdk/src/matrix instead",
},
{
name: "matrix-react-sdk",
message: "Please use matrix-react-sdk/src/index instead",
},
{
name: "matrix-react-sdk/",
message: "Please use matrix-react-sdk/src/index instead",
},
}, {
files: [
"test/**/*.{ts,tsx}",
],
patterns: [
{
group: ["matrix-js-sdk/lib", "matrix-js-sdk/lib/", "matrix-js-sdk/lib/**"],
message: "Please use matrix-js-sdk/src/* instead",
},
{
group: ["matrix-react-sdk/lib", "matrix-react-sdk/lib/", "matrix-react-sdk/lib/**"],
message: "Please use matrix-react-sdk/src/* instead",
},
],
},
],
},
},
{
files: ["test/**/*.{ts,tsx}"],
rules: {
// We don't need super strict typing in test utilities
"@typescript-eslint/explicit-function-return-type": "off",
"@typescript-eslint/explicit-member-accessibility": "off",
},
}],
},
],
};

4
.github/ISSUE_TEMPLATE/bug-desktop.yml vendored
View file

@ -70,7 +70,7 @@ body:
description: |
Did you know that you can send a /rageshake command from your application to submit logs for this issue? Trigger the defect, then type `/rageshake` into the message input area followed by a description of the problem and send the command. You will be able to add a link to this defect report and submit anonymous logs to the developers.
options:
- 'Yes'
- 'No'
- "Yes"
- "No"
validations:
required: true

4
.github/ISSUE_TEMPLATE/bug-web.yml vendored
View file

@ -78,7 +78,7 @@ body:
description: |
Did you know that you can send a /rageshake command from the web application to submit logs for this issue? Trigger the defect, then type `/rageshake` into the message input area followed by a description of the problem and send the command. You will be able to add a link to this defect report and submit anonymous logs to the developers.
options:
- 'Yes'
- 'No'
- "Yes"
- "No"
validations:
required: true

6
.github/PULL_REQUEST_TEMPLATE.md vendored
View file

@ -2,9 +2,9 @@
## Checklist
* [ ] Tests written for new code (and old code if feasible)
* [ ] Linter and other CI checks pass
* [ ] Sign-off given on the changes (see [CONTRIBUTING.md](https://github.com/vector-im/element-web/blob/develop/CONTRIBUTING.md))
- [ ] Tests written for new code (and old code if feasible)
- [ ] Linter and other CI checks pass
- [ ] Sign-off given on the changes (see [CONTRIBUTING.md](https://github.com/vector-im/element-web/blob/develop/CONTRIBUTING.md))
<!--
If you would like to specify text for the changelog entry other than your PR title, add the following:

4
.github/renovate.json vendored
View file

@ -1,6 +1,4 @@
{
"$schema": "https://docs.renovatebot.com/renovate-schema.json",
"extends": [
"github>matrix-org/renovate-config-element-web"
]
"extends": ["github>matrix-org/renovate-config-element-web"]
}

6
.github/workflows/build.yml vendored
View file

@ -1,8 +1,8 @@
name: Build
on:
pull_request: { }
pull_request: {}
push:
branches: [ master ]
branches: [master]
# develop pushes and repository_dispatch handled in build_develop.yaml
env:
# These must be set for fetchdep.sh to get the right branch
@ -17,7 +17,7 @@ jobs:
- uses: actions/setup-node@v3
with:
cache: 'yarn'
cache: "yarn"
- name: Install Dependencies
run: "./scripts/layered.sh"

13
.github/workflows/build_develop.yml vendored
View file

@ -3,9 +3,9 @@
name: Build and Deploy develop
on:
push:
branches: [ develop ]
branches: [develop]
repository_dispatch:
types: [ element-web-notify ]
types: [element-web-notify]
concurrency:
group: ${{ github.repository_owner }}-${{ github.workflow }}-${{ github.ref_name }}
cancel-in-progress: true
@ -17,15 +17,15 @@ jobs:
runs-on: ubuntu-latest
environment: develop
env:
R2_BUCKET: 'element-web-develop'
R2_BUCKET: "element-web-develop"
R2_URL: ${{ secrets.CF_R2_S3_API }}
R2_PUBLIC_URL: 'https://element-web-develop.element.io'
R2_PUBLIC_URL: "https://element-web-develop.element.io"
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
cache: 'yarn'
cache: "yarn"
- name: Install Dependencies
run: "./scripts/layered.sh"
@ -84,7 +84,7 @@ jobs:
uses: lewagon/wait-on-check-action@v1.2.0
with:
ref: ${{ github.ref }}
running-workflow-name: 'Build & Deploy develop.element.io'
running-workflow-name: "Build & Deploy develop.element.io"
repo-token: ${{ secrets.GITHUB_TOKEN }}
wait-interval: 10
check-regexp: ^((?!SonarCloud|SonarQube|issues|board).)*$
@ -112,4 +112,3 @@ jobs:
- run: |
echo "Deployed to ${{ steps.cfp.outputs.url }}" >> $GITHUB_STEP_SUMMARY

6
.github/workflows/dockerhub.yaml vendored
View file

@ -1,11 +1,11 @@
name: Dockerhub
on:
workflow_dispatch: { }
workflow_dispatch: {}
push:
tags: [ v* ]
tags: [v*]
schedule:
# This job can take a while, and we have usage limits, so just publish develop only twice a day
- cron: '0 7/12 * * *'
- cron: "0 7/12 * * *"
concurrency: ${{ github.ref_name }}
jobs:
buildx:

2
.github/workflows/issue_closed.yml vendored
View file

@ -3,7 +3,7 @@
# For all closed (not planned) issues, comment on rageshakes to move them into the canonical issue if one exists
on:
issues:
types: [ closed ]
types: [closed]
jobs:
tidy:
name: Tidy closed issues

2
.github/workflows/pull_request.yaml vendored
View file

@ -1,7 +1,7 @@
name: Pull Request
on:
pull_request_target:
types: [ opened, edited, labeled, unlabeled, synchronize ]
types: [opened, edited, labeled, unlabeled, synchronize]
concurrency: ${{ github.workflow }}-${{ github.event.pull_request.head.ref }}
jobs:
action:

2
.github/workflows/sonarqube.yml vendored
View file

@ -1,7 +1,7 @@
name: SonarQube
on:
workflow_run:
workflows: [ "Tests" ]
workflows: ["Tests"]
types:
- completed
concurrency:

16
.github/workflows/static_analysis.yaml vendored
View file

@ -1,10 +1,10 @@
name: Static Analysis
on:
pull_request: { }
pull_request: {}
push:
branches: [ develop, master ]
branches: [develop, master]
repository_dispatch:
types: [ element-web-notify ]
types: [element-web-notify]
env:
# These must be set for fetchdep.sh to get the right branch
REPOSITORY: ${{ github.repository }}
@ -18,7 +18,7 @@ jobs:
- uses: actions/setup-node@v3
with:
cache: 'yarn'
cache: "yarn"
- name: Install Dependencies
run: "./scripts/layered.sh"
@ -58,7 +58,7 @@ jobs:
use-check: false
check-fail-mode: added
output-behaviour: annotate
ts-extra-args: '--strict --noImplicitAny'
ts-extra-args: "--strict --noImplicitAny"
files-changed: ${{ steps.files.outputs.files_updated }}
files-added: ${{ steps.files.outputs.files_created }}
files-deleted: ${{ steps.files.outputs.files_deleted }}
@ -76,7 +76,7 @@ jobs:
- uses: actions/setup-node@v3
with:
cache: 'yarn'
cache: "yarn"
# Does not need branch matching as only analyses this layer
- name: Install Deps
@ -93,7 +93,7 @@ jobs:
- uses: actions/setup-node@v3
with:
cache: 'yarn'
cache: "yarn"
# Needs branch matching as it inherits .stylelintrc.js from matrix-react-sdk
- name: Install Dependencies
@ -110,7 +110,7 @@ jobs:
- uses: actions/setup-node@v3
with:
cache: 'yarn'
cache: "yarn"
- name: Install Deps
run: "scripts/layered.sh"

8
.github/workflows/tests.yaml vendored
View file

@ -1,10 +1,10 @@
name: Tests
on:
pull_request: { }
pull_request: {}
push:
branches: [ develop, master ]
branches: [develop, master]
repository_dispatch:
types: [ element-web-notify ]
types: [element-web-notify]
env:
# These must be set for fetchdep.sh to get the right branch
REPOSITORY: ${{ github.repository }}
@ -20,7 +20,7 @@ jobs:
- name: Yarn cache
uses: actions/setup-node@v3
with:
cache: 'yarn'
cache: "yarn"
- name: Install Dependencies
run: "./scripts/layered.sh"

2
.github/workflows/triage-assigned.yml vendored
View file

@ -2,7 +2,7 @@ name: Move issued assigned to specific team members to their boards
on:
issues:
types: [ assigned ]
types: [assigned]
jobs:
web-app-team:

2
.github/workflows/triage-incoming.yml vendored
View file

@ -2,7 +2,7 @@ name: Move new issues into Issue triage board
on:
issues:
types: [ opened ]
types: [opened]
jobs:
automate-project-columns:

2
.github/workflows/triage-move-review-requests.yml vendored
View file

@ -1,7 +1,7 @@
name: Move pull requests asking for review to the relevant project
on:
pull_request_target:
types: [ review_requested ]
types: [review_requested]
jobs:
add_design_pr_to_project:

2
.github/workflows/triage-unlabelled.yml vendored
View file

@ -2,7 +2,7 @@ name: Move unlabelled from needs info columns to triaged
on:
issues:
types: [ unlabeled ]
types: [unlabeled]
jobs:
Move_Unabeled_Issue_On_Project_Board:

2
.github/workflows/upgrade_dependencies.yml vendored
View file

@ -1,6 +1,6 @@
name: Upgrade Dependencies
on:
workflow_dispatch: { }
workflow_dispatch: {}
jobs:
upgrade:
uses: matrix-org/matrix-js-sdk/.github/workflows/upgrade_dependencies.yml@develop

9743
CHANGELOG.md
View file

File diff suppressed because it is too large Load diff

79
CONTRIBUTING.md
View file

@ -1,5 +1,4 @@
Contributing code to Element Web
================================
# Contributing code to Element Web
Everyone is welcome to contribute code to Element Web, provided that they are
willing to license their contributions under the same license as the project
@ -9,8 +8,7 @@ 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
-----------------
## 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
@ -20,26 +18,27 @@ 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:
* A changelog entry in the `Notes` section (see below)
* 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
- A changelog entry in the `Notes` section (see below)
- 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. This information is
also helpful when we come back to look at this in 6 months and ask "why did
we do it like that?" we have a chance of finding out.
* Why didn't it work before? Why does it work now? What use cases does it
- Why didn't it work before? Why does it work now? What use cases does it
unlock?
* If you find yourself adding information on how the code works or why you
- If you find yourself adding information on how the code works or why you
chose to do it the way you did, make sure this information is instead
written as comments in the code itself.
* Sometimes a PR can change considerably as it is developed. In this case,
- Sometimes a PR can change considerably as it is developed. In this case,
the description should be updated to reflect the most recent state of
the PR. (It can be helpful to retain the old content under a suitable
heading, for additional context.)
* Include both **before** and **after** screenshots to easily compare and discuss
- 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
- 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
- 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 rely on information in pull request to populate the information that goes into
@ -50,8 +49,7 @@ used for the changelog entry, but you can specify more options, as follows.
To add a longer, more detailed description of the change for the changelog:
*Fix llama herding bug*
_Fix llama herding bug_
```
Notes: Fix a bug (https://github.com/matrix-org/notaproject/issues/123) where the 'Herd' button would not herd more than 8 Llamas if the moon was in the waxing gibbous phase
@ -60,7 +58,8 @@ Notes: Fix a bug (https://github.com/matrix-org/notaproject/issues/123) where th
For some PRs, it's not useful to have an entry in the user-facing changelog (this is
the default for PRs labelled with `T-Task`):
*Remove outdated comment from `Ungulates.ts`*
_Remove outdated comment from `Ungulates.ts`_
```
Notes: none
```
@ -68,16 +67,18 @@ Notes: none
Sometimes, you're fixing a bug in a downstream project, in which case you want
an entry in that project's changelog. You can do that too:
*Fix another herding bug*
_Fix another herding bug_
```
Notes: Fix a bug where the `herd()` function would only work on Tuesdays
element-web notes: Fix a bug where the 'Herd' button only worked on Tuesdays
```
This example is for Element Web. You can specify:
* matrix-react-sdk
* element-web
* element-desktop
- matrix-react-sdk
- element-web
- element-desktop
If your PR introduces a breaking change, use the `Notes` section in the same
way, additionally adding the `X-Breaking-Change` label (see below). There's no need
@ -85,17 +86,18 @@ to specify in the notes that it's a breaking change - this will be added
automatically based on the label - but remember to tell the developer how to
migrate:
*Remove legacy class*
_Remove legacy class_
```
Notes: Remove legacy `Camelopard` class. `Giraffe` should be used instead.
```
Other metadata can be added using labels.
* `X-Breaking-Change`: A breaking change - adding this label will mean the change causes a *major* version bump.
* `T-Enhancement`: A new feature - adding this label will mean the change causes a *minor* version bump.
* `T-Defect`: A bug fix (in either code or docs).
* `T-Task`: No user-facing changes, eg. code comments, CI fixes, refactors or tests. Won't have a changelog entry unless you specify one.
- `X-Breaking-Change`: A breaking change - adding this label will mean the change causes a _major_ version bump.
- `T-Enhancement`: A new feature - adding this label will mean the change causes a _minor_ version bump.
- `T-Defect`: A bug fix (in either code or docs).
- `T-Task`: No user-facing changes, eg. code comments, CI fixes, refactors or tests. Won't have a changelog entry unless you specify one.
If you don't have permission to add labels, your PR reviewer(s) can work with you
to add them: ask in the PR description or comments.
@ -104,8 +106,8 @@ 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
-----
## Tests
Your PR should include tests.
For new user facing features in `matrix-js-sdk`, `matrix-react-sdk` or `element-web`, you
@ -139,6 +141,7 @@ why it's not possible in your PR.
Some sections of code are not sensible to add coverage for, such as those
which explicitly inhibit noisy logging for tests. Which can be hidden using
an istanbul magic comment as [documented here][1]. See example:
```javascript
/* istanbul ignore if */
if (process.env.NODE_ENV !== "test") {
@ -160,8 +163,8 @@ tests later will become progressively more difficult.
If you're not sure how to approach writing tests for your change, ask for help
in [#element-dev](https://matrix.to/#/#element-dev:matrix.org).
Code style
----------
## Code style
Element Web aims to target TypeScript/ES6. All new files should be written in
TypeScript and existing files should use ES6 principles where possible.
@ -174,11 +177,11 @@ The remaining code style is documented in [code_style.md](./code_style.md).
Contributors are encouraged to it 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
and **_never_** mix cosmetic and functional changes in the same commit, as it
makes it horribly hard to review otherwise.
Attribution
-----------
## Attribution
Everyone who contributes anything to Matrix is welcome to be listed in the
AUTHORS.rst file for the project in question. Please feel free to include a
change to AUTHORS.rst in your pull request to list yourself and a short
@ -187,8 +190,8 @@ give away to contributors - if you feel that Matrix-branded apparel is missing
from your life, please mail us your shipping address to matrix at matrix.org
and we'll try to fix it :)
Sign off
--------
## 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
@ -259,14 +262,11 @@ on Git 2.17+ you can mass signoff using rebase:
git rebase --signoff origin/develop
```
Review expectations
===================
# Review expectations
See https://github.com/vector-im/element-meta/wiki/Review-process
Merge Strategy
==============
# Merge Strategy
The preferred method for merging pull requests is squash merging to keep the
commit history trim, but it is up to the discretion of the team member merging
@ -279,5 +279,4 @@ When stacking pull requests, you may wish to do the following:
2. Branch from your base branch (branch1) to your work branch (branch2), push commits and open a pull request configuring the base to be branch1, saying in the description that it is based on your other PR.
3. Merge the first PR using a merge commit otherwise your stacked PR will need a rebase. Github will automatically adjust the base branch of your other PR to be develop.
[1]: https://github.com/gotwarlost/istanbul/blob/master/ignoring-code-for-coverage.md

113
README.md
View file

@ -7,37 +7,34 @@
[![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=element-web&metric=vulnerabilities)](https://sonarcloud.io/summary/new_code?id=element-web)
[![Bugs](https://sonarcloud.io/api/project_badges/measure?project=element-web&metric=bugs)](https://sonarcloud.io/summary/new_code?id=element-web)
Element
=======
# Element
Element (formerly known as Vector and Riot) is a Matrix web client built using the [Matrix
React SDK](https://github.com/matrix-org/matrix-react-sdk).
Supported Environments
======================
# Supported Environments
Element has several tiers of support for different environments:
* Supported
* Definition: Issues **actively triaged**, regressions **block** the release
* Last 2 major versions of Chrome, Firefox, Safari, and Edge on desktop OSes
* Latest release of official Element Desktop app on desktop OSes
* Desktop OSes means macOS, Windows, and Linux versions for desktop devices
- Supported
- Definition: Issues **actively triaged**, regressions **block** the release
- Last 2 major versions of Chrome, Firefox, Safari, and Edge on desktop OSes
- Latest release of official Element Desktop app on desktop OSes
- Desktop OSes means macOS, Windows, and Linux versions for desktop devices
that are actively supported by the OS vendor and receive security updates
* Experimental
* Definition: Issues **accepted**, regressions **do not block** the release
* Element as an installed PWA via current stable version of Chrome, Firefox, and Safari
* Mobile web for current stable version of Chrome, Firefox, and Safari on Android, iOS, and iPadOS
* Not supported
* Definition: Issues only affecting unsupported environments are **closed**
* Everything else
- Experimental
- Definition: Issues **accepted**, regressions **do not block** the release
- Element as an installed PWA via current stable version of Chrome, Firefox, and Safari
- Mobile web for current stable version of Chrome, Firefox, and Safari on Android, iOS, and iPadOS
- Not supported
- Definition: Issues only affecting unsupported environments are **closed**
- Everything else
For accessing Element on an Android or iOS device, we currently recommend the
native apps [element-android](https://github.com/vector-im/element-android)
and [element-ios](https://github.com/vector-im/element-ios).
Getting Started
===============
# Getting Started
The easiest way to test Element is to just use the hosted copy at <https://app.element.io>.
The `develop` branch is continuously deployed to <https://develop.element.io>
@ -67,11 +64,9 @@ and thus allowed.
To install Element as a desktop application, see [Running as a desktop
app](#running-as-a-desktop-app) below.
Important Security Notes
========================
# Important Security Notes
Separate domains
----------------
## Separate domains
We do not recommend running Element from the same domain name as your Matrix
homeserver. The reason is the risk of XSS (cross-site-scripting)
@ -83,31 +78,25 @@ We have put some coarse mitigations into place to try to protect against this
situation, but it's still not good practice to do it in the first place. See
<https://github.com/vector-im/element-web/issues/1977> for more details.
Configuration best practices
----------------------------
## Configuration best practices
Unless you have special requirements, you will want to add the following to
your web server configuration when hosting Element Web:
* The `X-Frame-Options: SAMEORIGIN` header, to prevent Element Web from being
- The `X-Frame-Options: SAMEORIGIN` header, to prevent Element Web from being
framed and protect from [clickjacking][owasp-clickjacking].
* The `frame-ancestors 'none'` directive to your `Content-Security-Policy`
- The `frame-ancestors 'none'` directive to your `Content-Security-Policy`
header, as the modern replacement for `X-Frame-Options` (though both should be
included since not all browsers support it yet, see
[this][owasp-clickjacking-csp]).
* The `X-Content-Type-Options: nosniff` header, to [disable MIME
- The `X-Content-Type-Options: nosniff` header, to [disable MIME
sniffing][mime-sniffing].
* The `X-XSS-Protection: 1; mode=block;` header, for basic XSS protection in
- The `X-XSS-Protection: 1; mode=block;` header, for basic XSS protection in
legacy browsers.
[mime-sniffing]:
<https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#mime_sniffing>
[owasp-clickjacking-csp]:
<https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking_Defense_Cheat_Sheet.html#content-security-policy-frame-ancestors-examples>
[owasp-clickjacking]:
<https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking_Defense_Cheat_Sheet.html>
[mime-sniffing]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#mime_sniffing
[owasp-clickjacking-csp]: https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking_Defense_Cheat_Sheet.html#content-security-policy-frame-ancestors-examples
[owasp-clickjacking]: https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking_Defense_Cheat_Sheet.html
If you are using nginx, this would look something like the following:
@ -117,7 +106,9 @@ add_header X-Content-Type-Options nosniff;
add_header X-XSS-Protection "1; mode=block";
add_header Content-Security-Policy "frame-ancestors 'none'";
```
For Apache, the configuration looks like:
```
Header set X-Frame-Options SAMEORIGIN
Header set X-Content-Type-Options nosniff
@ -129,8 +120,7 @@ Note: In case you are already setting a `Content-Security-Policy` header
elsewhere, you should modify it to include the `frame-ancestors` directive
instead of adding that last line.
Building From Source
====================
# Building From Source
Element is a modular webapp built with modern ES6 and uses a Node.js build system.
Ensure you have the latest LTS version of Node.js installed.
@ -143,7 +133,7 @@ guide](https://classic.yarnpkg.com/en/docs/install) if you do not have it alread
1. Clone the repo: `git clone https://github.com/vector-im/element-web.git`.
1. Switch to the element-web directory: `cd element-web`.
1. Install the prerequisites: `yarn install`.
* If you're using the `develop` branch, then it is recommended to set up a
- If you're using the `develop` branch, then it is recommended to set up a
proper development environment (see [Setting up a dev
environment](#setting-up-a-dev-environment) below). Alternatively, you
can use <https://develop.element.io> - the continuous integration release of
@ -160,8 +150,7 @@ will not appear in Settings without using the dist script. You can then mount th
`webapp` directory on your web server to actually serve up the app, which is
entirely static content.
Running as a Desktop app
========================
# Running as a Desktop app
Element can also be run as a desktop app, wrapped in Electron. You can download a
pre-built version from <https://element.io/get-started> or, if you prefer,
@ -173,7 +162,7 @@ Many thanks to @aviraldg for the initial work on the Electron integration.
Other options for running as a desktop app:
* @asdf:matrix.org points out that you can use nativefier and it just works(tm)
- @asdf:matrix.org points out that you can use nativefier and it just works(tm)
```bash
yarn global add nativefier
@ -183,8 +172,7 @@ nativefier https://app.element.io/
The [configuration docs](docs/config.md#desktop-app-configuration) show how to
override the desktop app's default settings if desired.
Running from Docker
===================
# Running from Docker
The Docker image can be used to serve element-web as a web server. The easiest way to use
it is to use the prebuilt image:
@ -223,26 +211,22 @@ docker build -t \
.
```
Running in Kubernetes
=====================
# Running in Kubernetes
The provided element-web docker image can also be run from within a Kubernetes cluster.
See the [Kubernetes example](docs/kubernetes.md) for more details.
config.json
===========
# config.json
Element supports a variety of settings to configure default servers, behaviour, themes, etc.
See the [configuration docs](docs/config.md) for more details.
Labs Features
=============
# Labs Features
Some features of Element may be enabled by flags in the `Labs` section of the settings.
Some of these features are described in [labs.md](https://github.com/vector-im/element-web/blob/develop/docs/labs.md).
Caching requirements
====================
# Caching requirements
Element requires the following URLs not to be cached, when/if you are serving Element from your own webserver:
@ -259,8 +243,7 @@ webserver to return `Cache-Control: no-cache` for `/`. This ensures the browser
the next page load after it's been deployed. Note that this is already configured for you in the nginx config of our
Dockerfile.
Development
===========
# Development
Before attempting to develop on Element you **must** read the [developer guide
for `matrix-react-sdk`](https://github.com/matrix-org/matrix-react-sdk#developer-guide), which
@ -290,8 +273,7 @@ CSS hot-reload is available as an opt-in development feature. You can enable it
by defining a `CSS_HOT_RELOAD` environment variable, in a `.env` file in the root
of the repository. See `.env.example` for documentation and an example.
Setting up a dev environment
============================
# Setting up a dev environment
Much of the functionality in Element is actually in the `matrix-react-sdk` and
`matrix-js-sdk` modules. It is possible to set these up in a way that makes it
@ -300,7 +282,7 @@ having to manually rebuild each time.
First clone and build `matrix-js-sdk`:
``` bash
```bash
git clone https://github.com/matrix-org/matrix-js-sdk.git
pushd matrix-js-sdk
yarn link
@ -347,9 +329,9 @@ Wait a few seconds for the initial build to finish; you should see something lik
[element-js] ℹ ｢wdm｣: Compiled successfully.
```
Remember, the command will not terminate since it runs the web server
and rebuilds source files when they change. This development server also
disables caching, so do NOT use it in production.
Remember, the command will not terminate since it runs the web server
and rebuilds source files when they change. This development server also
disables caching, so do NOT use it in production.
Open <http://127.0.0.1:8080/> in your browser to see your newly built Element.
@ -377,7 +359,7 @@ echo fs.inotify.max_user_instances=512 | sudo tee -a /etc/sysctl.conf
sudo sysctl -p
```
___
---
When you make changes to `matrix-react-sdk` or `matrix-js-sdk` they should be
automatically picked up by webpack and built.
@ -386,8 +368,7 @@ If any of these steps error with, `file table overflow`, you are probably on a m
which has a very low limit on max open files. Run `ulimit -Sn 1024` and try again.
You'll need to do this in each new terminal you open before building Element.
Running the tests
-----------------
## Running the tests
There are a number of application-level tests in the `tests` directory; these
are designed to run with Jest and JSDOM. To run them
@ -400,8 +381,7 @@ yarn test
See [matrix-react-sdk](https://github.com/matrix-org/matrix-react-sdk/#end-to-end-tests) for how to run the end-to-end tests.
Translations
============
# Translations
To add a new translation, head to the [translating doc](docs/translating.md).
@ -409,8 +389,7 @@ For a developer guide, see the [translating dev doc](docs/translating-dev.md).
[<img src="https://translate.element.io/widgets/element-web/-/multi-auto.svg" alt="translationsstatus" width="340">](https://translate.element.io/engage/element-web/?utm_source=widget)
Triaging issues
===============
# Triaging issues
Issues are triaged by community members and the Web App Team, following the [triage process](https://github.com/vector-im/element-meta/wiki/Triage-process).

15
babel.config.js
View file

@ -1,18 +1,21 @@
module.exports = {
"sourceMaps": true,
"presets": [
["@babel/preset-env", {
"targets": [
sourceMaps: true,
presets: [
[
"@babel/preset-env",
{
targets: [
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Safari versions",
"last 2 Edge versions",
],
}],
},
],
"@babel/preset-typescript",
"@babel/preset-react",
],
"plugins": [
plugins: [
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-class-properties",

118
code_style.md
View file

@ -3,10 +3,10 @@
This code style applies to projects which the element-web team directly maintains or is reasonably
adjacent to. As of writing, these are:
* element-desktop
* element-web
* matrix-react-sdk
* matrix-js-sdk
- element-desktop
- element-web
- matrix-react-sdk
- matrix-js-sdk
Other projects might extend this code style for increased strictness. For example, matrix-events-sdk
has stricter code organization to reduce the maintenance burden. These projects will declare their code
@ -66,37 +66,24 @@ Unless otherwise specified, the following applies to all code:
```typescript
// Function arguments
function doThing(
arg1: string,
arg2: string,
arg3: string,
): boolean {
return !!arg1
&& !!arg2
&& !!arg3;
function doThing(arg1: string, arg2: string, arg3: string): boolean {
return !!arg1 && !!arg2 && !!arg3;
}
// Calling a function
doThing(
"String 1",
"String 2",
"String 3",
);
doThing("String 1", "String 2", "String 3");
// Reduce line verbosity when possible/reasonable
doThing(
"String1", "String 2",
"A much longer string 3",
);
doThing("String1", "String 2", "A much longer string 3");
// Chaining function calls
something.doThing()
something
.doThing()
.doOtherThing()
.doMore()
.somethingElse(it =>
useIt(it)
);
.somethingElse((it) => useIt(it));
```
4. Use semicolons for block/line termination.
1. Except when defining interfaces, classes, and non-arrow functions specifically.
5. When a statement's body is a single line, it may be written without curly braces, so long as the body is placed on
@ -105,6 +92,7 @@ Unless otherwise specified, the following applies to all code:
```typescript
if (x) doThing();
```
6. Blocks for `if`, `for`, `switch` and so on must have a space surrounding the condition, but not
within the condition.
@ -113,11 +101,13 @@ Unless otherwise specified, the following applies to all code:
doThing();
}
```
7. Mixing of logical operands requires brackets to explicitly define boolean logic.
```typescript
if ((a > b && b > c) || (d < e)) return true;
if ((a > b && b > c) || d < e) return true;
```
8. Ternaries use the same rules as `if` statements, plus the following:
```typescript
@ -125,14 +115,13 @@ Unless otherwise specified, the following applies to all code:
const val = a > b ? doThing() : doOtherThing();
// Multiline is also okay
const val = a > b
? doThing()
: doOtherThing();
const val = a > b ? doThing() : doOtherThing();
// Use brackets when using multiple conditions.
// Maximum 3 conditions, prefer 2 or less.
const val = (a > b && b > c) ? doThing() : doOtherThing();
const val = a > b && b > c ? doThing() : doOtherThing();
```
9. lowerCamelCase is used for function and variable naming.
10. UpperCamelCase is used for general naming.
11. Interface names should not be marked with an uppercase `I`.
@ -142,6 +131,7 @@ Unless otherwise specified, the following applies to all code:
```typescript
let errorMessage: Optional<string>;
```
14. Objects, arrays, enums and so on must have each line terminated with a comma:
```typescript
@ -150,21 +140,16 @@ Unless otherwise specified, the following applies to all code:
else: 2,
};
const arr = [
"one",
"two",
];
const arr = ["one", "two"];
enum Thing {
Foo,
Bar,
}
doThing(
"arg1",
"arg2",
);
doThing("arg1", "arg2");
```
15. Objects can use shorthand declarations, including mixing of types.
```typescript
@ -175,6 +160,7 @@ Unless otherwise specified, the following applies to all code:
// ... or ...
{ room, prop: this.prop }
```
16. Object keys should always be non-strings when possible.
```typescript
@ -184,11 +170,13 @@ Unless otherwise specified, the following applies to all code:
[EventType.RoomMessage]: true,
}
```
17. Explicitly cast to a boolean.
```typescript
!!stringVar || Boolean(stringVar)
!!stringVar || Boolean(stringVar);
```
18. Use `switch` statements when checking against more than a few enum-like values.
19. Use `const` for constants, `let` for mutability.
20. Describe types exhaustively (ensure noImplictAny would pass).
@ -200,6 +188,7 @@ Unless otherwise specified, the following applies to all code:
2. "Conflicted" typically refers to a getter which wants the same name as the underlying variable.
23. Prefer readonly members over getters backed by a variable, unless an internal setter is required.
24. Prefer Interfaces for object definitions, and types for parameter-value-only declarations.
1. Note that an explicit type is optional if not expected to be used outside of the function call,
unlike in this example:
@ -214,6 +203,7 @@ Unless otherwise specified, the following applies to all code:
// ...
}
```
25. Variables/properties which are `public static` should also be `readonly` when possible.
26. Interface and type properties are terminated with semicolons, not commas.
27. Prefer arrow formatting when declaring functions for interfaces/types:
@ -223,6 +213,7 @@ Unless otherwise specified, the following applies to all code:
myCallback: (arg: string) => Promise<void>;
}
```
28. Prefer a type definition over an inline type. For example, define an interface.
29. Always prefer to add types or declare a type over the use of `any`. Prefer inferred types
when they are not `any`.
@ -231,6 +222,7 @@ Unless otherwise specified, the following applies to all code:
31. Export only what can be reused.
32. Prefer a type like `Optional<X>` (`type Optional<T> = T | null | undefined`) instead
of truly optional parameters.
1. A notable exception is when the likelihood of a bug is minimal, such as when a function
takes an argument that is more often not required than required. An example where the
`?` operator is inappropriate is when taking a room ID: typically the caller should
@ -245,6 +237,7 @@ Unless otherwise specified, the following applies to all code:
// ...
}
```
33. There should be approximately one interface, class, or enum per file unless the file is named
"types.ts", "global.d.ts", or ends with "-types.ts".
1. The file name should match the interface, class, or enum name.
@ -273,6 +266,7 @@ Unless otherwise specified, the following applies to all code:
const example1 = "simple string";
const example2 = 'string containing "double quotes"';
```
39. Prefer async-await to promise-chaining
```typescript
@ -312,6 +306,7 @@ Inheriting all the rules of TypeScript, the following additionally apply:
}
}
```
8. Stores must support using an alternative MatrixClient and dispatcher instance.
9. Utilities which require JSX must be split out from utilities which do not. This is to prevent import
cycles during runtime where components accidentally include more of the app than they intended.
@ -323,37 +318,28 @@ Inheriting all the rules of TypeScript, the following additionally apply:
```typescript
function render() {
return <Component
prop1="test"
prop2={this.state.variable}
/>;
return <Component prop1="test" prop2={this.state.variable} />;
// or
return (
<Component
prop1="test"
prop2={this.state.variable}
/>
);
return <Component prop1="test" prop2={this.state.variable} />;
// or if children are needed (infer parens usage)
return <Component
prop1="test"
prop2={this.state.variable}
>{ _t("Short string here") }</Component>;
return (
<Component prop1="test" prop2={this.state.variable}>
{_t("Short string here")}
</Component>
);
return <Component
prop1="test"
prop2={this.state.variable}
>
{ _t("Longer string here") }
</Component>;
return (
<Component prop1="test" prop2={this.state.variable}>
{_t("Longer string here")}
</Component>
);
}
```
13. Curly braces within JSX should be padded with a space, however properties on those components should not.
See above code example.
14. Functions used as properties should either be defined on the class or stored in a variable. They should not
@ -371,7 +357,7 @@ Inheriting all the rules of TypeScript, the following additionally apply:
Note: We use PostCSS + some plugins to process our styles. It looks like SCSS, but actually it is not.
1. Class names must be prefixed with "mx_".
1. Class names must be prefixed with "mx\_".
2. Class names should denote the component which defines them, followed by any context:
1. mx_MyFoo
2. mx_MyFoo_avatar
@ -382,11 +368,13 @@ Note: We use PostCSS + some plugins to process our styles. It looks like SCSS, b
```scss
.mx_MyFoo {
& .mx_MyFoo_avatar { // instead of &_avatar
& .mx_MyFoo_avatar {
// instead of &_avatar
// ...
}
}
```
6. Break multiple selectors over multiple lines this way:
```scss
@ -396,6 +384,7 @@ Note: We use PostCSS + some plugins to process our styles. It looks like SCSS, b
// ...
}
```
7. Non-shared variables should use $lowerCamelCase. Shared variables use $dashed-naming.
8. Overrides to Z indexes, adjustments of dimensions/padding with pixels, and so on should all be
documented for what the values mean:
@ -407,6 +396,7 @@ Note: We use PostCSS + some plugins to process our styles. It looks like SCSS, b
z-index: 10; // above user avatar, but below dialogs
}
```
9. Avoid the use of `!important`. If necessary, add a comment.
## Tests
@ -431,9 +421,7 @@ Note: We use PostCSS + some plugins to process our styles. It looks like SCSS, b
// Use "it should..." terminology
it("should call the correct API", async () => {
// test-specific variables go here
// function calls/state changes go here
// expectations go here
});
});

6
config.sample.json
View file

@ -26,13 +26,11 @@
"uisi_autorageshake_app": "element-auto-uisi",
"default_country_code": "GB",
"show_labs_settings": false,
"features": { },
"features": {},
"default_federate": true,
"default_theme": "light",
"room_directory": {
"servers": [
"matrix.org"
]
"servers": ["matrix.org"]
},
"enable_presence_by_hs_url": {
"https://matrix.org": false,

6
contribute.json
View file

@ -9,9 +9,5 @@
"list": "https://github.com/vector-im/element-web/issues",
"report": "https://github.com/vector-im/element-web/issues/new/choose"
},
"keywords": [
"chat",
"riot",
"matrix"
]
"keywords": ["chat", "riot", "matrix"]
}

43
docs/app-load.md
View file

@ -15,10 +15,10 @@ Current more parallel flow:
digraph G {
node [shape=box];
subgraph cluster_0 {
color=orange;
node [style=filled];
label = "index.ts";
subgraph cluster_0 {
color=orange;
node [style=filled];
label = "index.ts";
entrypoint, s0, ready [shape=point];
rageshake, config, i18n, theme, skin, olm [shape=parallelogram];
@ -52,33 +52,38 @@ digraph G {
skin -> ready [color=red];
theme -> ready [color=red];
i18n -> ready [color=red];
}
subgraph cluster_1 {
color = green;
node [style=filled];
label = "init.tsx";
}
subgraph cluster_1 {
color = green;
node [style=filled];
label = "init.tsx";
ready -> loadApp;
loadApp -> matrixchat;
}
}
}
</code></pre>
</p>
</details>
Key:
+ Parallelogram: async/await task
+ Box: sync task
+ Diamond: conditional branch
+ Egg: user interaction
+ Blue arrow: async task is allowed to settle but allowed to fail
+ Red arrow: async task success is asserted
- Parallelogram: async/await task
- Box: sync task
- Diamond: conditional branch
- Egg: user interaction
- Blue arrow: async task is allowed to settle but allowed to fail
- Red arrow: async task success is asserted
Notes:
+ A task begins when all its dependencies (arrows going into it) are fulfilled.
+ The success of setting up rageshake is never asserted, element-web has a fallback path for running without IDB (and thus rageshake).
+ Everything is awaited to be settled before the Modernizr check, to allow it to make use of things like i18n if they are successful.
- A task begins when all its dependencies (arrows going into it) are fulfilled.
- The success of setting up rageshake is never asserted, element-web has a fallback path for running without IDB (and thus rageshake).
- Everything is awaited to be settled before the Modernizr check, to allow it to make use of things like i18n if they are successful.
Underlying dependencies:
![image](https://user-images.githubusercontent.com/2403652/73848977-08624500-4821-11ea-9830-bb0317c41086.png)

14
docs/choosing-an-issue.md
View file

@ -33,19 +33,19 @@ someone to add something.
When you're looking through the list, here are some things that might make an
issue a **GOOD** choice:
* It is a problem or feature you care about.
* It concerns a type of code you know a little about.
* You think you can understand what's needed.
* It already has approval from Element Web's designers (look for comments from
- It is a problem or feature you care about.
- It concerns a type of code you know a little about.
- You think you can understand what's needed.
- It already has approval from Element Web's designers (look for comments from
members of the
[Product](https://github.com/orgs/vector-im/teams/product/members) or
[Design](https://github.com/orgs/vector-im/teams/design/members) teams).
Here are some things that might make it a **BAD** choice:
* You don't understand it (maybe add a comment asking a clarifying question).
* It sounds difficult, or is part of a larger change you don't know about.
* **It is tagged with `X-Needs-Design` or `X-Needs-Product`.**
- You don't understand it (maybe add a comment asking a clarifying question).
- It sounds difficult, or is part of a larger change you don't know about.
- **It is tagged with `X-Needs-Design` or `X-Needs-Product`.**
**Element Web's Design and Product teams tend to be very busy**, so if you make
changes that require approval from one of those teams, you will probably have

56
docs/config.md
View file

@ -17,7 +17,7 @@ for the desktop app the application will need to be exited fully (including via
## Homeserver configuration
In order for Element to even start you will need to tell it what homeserver to connect to *by default*. Users will be
In order for Element to even start you will need to tell it what homeserver to connect to _by default_. Users will be
able to use a different homeserver if they like, though this can be disabled with `"disable_custom_urls": true` in your
config.
@ -214,8 +214,8 @@ Together, the options might look like this in your config:
"welcome_background_url": "https://example.org/assets/background.jpg",
"auth_header_logo_url": "https://example.org/assets/logo.svg",
"auth_footer_links": [
{"text": "FAQ", "url": "https://example.org/faq"},
{"text": "Donate", "url": "https://example.org/donate"}
{ "text": "FAQ", "url": "https://example.org/faq" },
{ "text": "Donate", "url": "https://example.org/donate" }
]
},
"embedded_pages": {
@ -261,7 +261,7 @@ More information about the Jitsi setup can be found [here](./jitsi.md).
The VoIP and Jitsi options are:
1. `jitsi`: Optional configuration for how to start Jitsi conferences. Currently can only contain a single `preferred_domain`
value which points at the domain of the Jitsi instance. Defaults to `meet.element.io`. This is *not* used if the Jitsi widget
value which points at the domain of the Jitsi instance. Defaults to `meet.element.io`. This is _not_ used if the Jitsi widget
was created by an integration manager, or if the homeserver provides Jitsi information in `/.well-known/matrix/client`. For
example:
```json
@ -284,7 +284,7 @@ The VoIP and Jitsi options are:
}
```
3. `voip`: Optional configuration for various VoIP features. Currently can only contain a single `obey_asserted_identity` value to
send MSC3086-style asserted identity messages during VoIP calls in the room corresponding to the asserted identity. This *must*
send MSC3086-style asserted identity messages during VoIP calls in the room corresponding to the asserted identity. This _must_
only be set in trusted environments. The option defaults to `false`. For example:
```json
{
@ -403,9 +403,7 @@ To add additional "terms and conditions" links throughout the app, use the follo
```json
{
"terms_and_conditions_links": [
{ "text": "Code of conduct", "url": "https://example.org/code-of-conduct" }
]
"terms_and_conditions_links": [{ "text": "Code of conduct", "url": "https://example.org/code-of-conduct" }]
}
```
@ -422,7 +420,7 @@ analytics are deemed impossible and the user won't be asked to opt in to the sys
There are additional root-level options which can be specified:
1. `analytics_owner`: the company name used in dialogs talking about analytics - this defaults to `brand`,
and is useful when the provider of analytics is different from the provider of the Element instance.
and is useful when the provider of analytics is different from the provider of the Element instance.
2. `privacy_policy_url`: URL to the privacy policy including the analytics collection policy.
## Server hosting links
@ -449,7 +447,7 @@ If you're looking to mirror a setup from our production/development environments
"hosting_signup_link": "https://element.io/matrix-services?utm_source=element-web&utm_medium=web",
"host_signup": {
"brand": "Element Home",
"domains": [ "matrix.org" ],
"domains": ["matrix.org"],
"url": "https://ems.element.io/element-home/in-app-loader",
"cookie_policy_url": "https://element.io/cookie-policy",
"privacy_policy_url": "https://element.io/privacy",
@ -487,7 +485,7 @@ Element will check multiple sources when looking for an identity server to use i
the following order of preference:
1. The identity server set in the user's account data
* For a new user, no value is present in their account data. It is only set
- For a new user, no value is present in their account data. It is only set
if the user visits Settings and manually changes their identity server.
2. The identity server provided by the `.well-known` lookup that occurred at
login
@ -514,39 +512,39 @@ preferences.
Currently, the following UI feature flags are supported:
* `UIFeature.urlPreviews` - Whether URL previews are enabled across the entire application.
* `UIFeature.feedback` - Whether prompts to supply feedback are shown.
* `UIFeature.voip` - Whether or not VoIP is shown readily to the user. When disabled,
- `UIFeature.urlPreviews` - Whether URL previews are enabled across the entire application.
- `UIFeature.feedback` - Whether prompts to supply feedback are shown.
- `UIFeature.voip` - Whether or not VoIP is shown readily to the user. When disabled,
Jitsi widgets will still work though they cannot easily be added.
* `UIFeature.widgets` - Whether or not widgets will be shown.
* `UIFeature.flair` - Whether or not community flair is shown in rooms.
* `UIFeature.communities` - Whether or not to show any UI related to communities. Implicitly
- `UIFeature.widgets` - Whether or not widgets will be shown.
- `UIFeature.flair` - Whether or not community flair is shown in rooms.
- `UIFeature.communities` - Whether or not to show any UI related to communities. Implicitly
disables `UIFeature.flair` when disabled.
* `UIFeature.advancedSettings` - Whether or not sections titled "advanced" in room and
- `UIFeature.advancedSettings` - Whether or not sections titled "advanced" in room and
user settings are shown to the user.
* `UIFeature.shareQrCode` - Whether or not the QR code on the share room/event dialog
- `UIFeature.shareQrCode` - Whether or not the QR code on the share room/event dialog
is shown.
* `UIFeature.shareSocial` - Whether or not the social icons on the share room/event dialog
- `UIFeature.shareSocial` - Whether or not the social icons on the share room/event dialog
are shown.
* `UIFeature.identityServer` - Whether or not functionality requiring an identity server
- `UIFeature.identityServer` - Whether or not functionality requiring an identity server
is shown. When disabled, the user will not be able to interact with the identity
server (sharing email addresses, 3PID invites, etc).
* `UIFeature.thirdPartyId` - Whether or not UI relating to third party identifiers (3PIDs)
- `UIFeature.thirdPartyId` - Whether or not UI relating to third party identifiers (3PIDs)
is shown. Typically this is considered "contact information" on the homeserver, and is
not directly related to the identity server.
* `UIFeature.registration` - Whether or not the registration page is accessible. Typically
- `UIFeature.registration` - Whether or not the registration page is accessible. Typically
useful if accounts are managed externally.
* `UIFeature.passwordReset` - Whether or not the password reset page is accessible. Typically
- `UIFeature.passwordReset` - Whether or not the password reset page is accessible. Typically
useful if accounts are managed externally.
* `UIFeature.deactivate` - Whether or not the deactivate account button is accessible. Typically
- `UIFeature.deactivate` - Whether or not the deactivate account button is accessible. Typically
useful if accounts are managed externally.
* `UIFeature.advancedEncryption` - Whether or not advanced encryption options are shown to the
- `UIFeature.advancedEncryption` - Whether or not advanced encryption options are shown to the
user.
* `UIFeature.roomHistorySettings` - Whether or not the room history settings are shown to the user.
- `UIFeature.roomHistorySettings` - Whether or not the room history settings are shown to the user.
This should only be used if the room history visibility options are managed by the server.
* `UIFeature.TimelineEnableRelativeDates` - Display relative date separators (eg: 'Today', 'Yesterday') in the
- `UIFeature.TimelineEnableRelativeDates` - Display relative date separators (eg: 'Today', 'Yesterday') in the
timeline for recent messages. When false day dates will be used.
* `UIFeature.BulkUnverifiedSessionsReminder` - Display popup reminders to verify or remove unverified sessions. Defaults
- `UIFeature.BulkUnverifiedSessionsReminder` - Display popup reminders to verify or remove unverified sessions. Defaults
to true.
## Undocumented / developer options

2
docs/custom-home.md
View file

@ -26,7 +26,6 @@ The home page can be overridden in `config.json` to provide all users of an elem
}
```
## `home.html` Example
The following is a simple example for a custom `home.html`:
@ -62,4 +61,3 @@ It may be needed to set CORS headers for the `home.html` to enable element-deskt
```
add_header Access-Control-Allow-Origin *;
```

5
docs/customisations.md
View file

@ -30,7 +30,7 @@ maintenance.
**Note**: The project deliberately does not exclude `customisations.json` from Git.
This is to ensure that in shared projects it's possible to have a common config. By
default, Element Web does *not* ship with this file to prevent conflicts.
default, Element Web does _not_ ship with this file to prevent conflicts.
### Custom components
@ -41,6 +41,7 @@ that properties/state machines won't change.
### Component visibility customisation
UI for some actions can be hidden via the ComponentVisibility customisation:
- inviting users to rooms and spaces,
- creating rooms,
- creating spaces,
@ -55,6 +56,7 @@ might be shown to the user, but they won't have permission to invite users to
the current room: the button will appear disabled.
For example, to only allow users who meet a certain condition to create spaces:
```typescript
function shouldShowComponent(component: UIComponent): boolean {
if (component === UIComponent.CreateSpaces) {
@ -65,4 +67,5 @@ function shouldShowComponent(component: UIComponent): boolean {
return true;
}
```
In this example, all UI related to creating a space will be hidden unless the users meets the custom condition.

14
docs/feature-flags.md
View file

@ -5,9 +5,9 @@ flexibility and control over when and where those features are enabled.
For example, flags make the following things possible:
* Extended testing of a feature via labs on develop
* Enabling features when ready instead of the first moment the code is released
* Testing a feature with a specific set of users (by enabling only on a specific
- Extended testing of a feature via labs on develop
- Enabling features when ready instead of the first moment the code is released
- Testing a feature with a specific set of users (by enabling only on a specific
Element instance)
The size of the feature controlled by a feature flag may vary widely: it could
@ -37,6 +37,7 @@ When starting work on a feature, we should create a matching feature flag:
1. Add a new
[setting](https://github.com/matrix-org/matrix-react-sdk/blob/develop/src/settings/Settings.tsx)
of the form:
```js
"feature_cats": {
isFeature: true,
@ -45,10 +46,13 @@ When starting work on a feature, we should create a matching feature flag:
default: false,
},
```
2. Check whether the feature is enabled as appropriate:
```js
SettingsStore.getValue("feature_cats")
SettingsStore.getValue("feature_cats");
```
3. Document the feature in the [labs documentation](https://github.com/vector-im/element-web/blob/develop/docs/labs.md)
With these steps completed, the feature is disabled by default, but can be
@ -88,12 +92,14 @@ cover these cases, change the setting's `default` in `Settings.tsx` to `true`.
Once we're confident that a feature is working well, we should remove or convert the flag.
If the feature is meant to be turned off/on by the user:
1. Remove `isFeature` from the [setting](https://github.com/matrix-org/matrix-react-sdk/blob/develop/src/settings/Settings.ts)
2. Change the `default` to `true` (if desired).
3. Remove the feature from the [labs documentation](https://github.com/vector-im/element-web/blob/develop/docs/labs.md)
4. Celebrate! 🥳
If the feature is meant to be forced on (non-configurable):
1. Remove the [setting](https://github.com/matrix-org/matrix-react-sdk/blob/develop/src/settings/Settings.ts)
2. Remove all `getValue` lines that test for the feature.
3. Remove the feature from the [labs documentation](https://github.com/vector-im/element-web/blob/develop/docs/labs.md)

12
docs/jitsi-dev.md
View file

@ -1,7 +1,7 @@
# Jitsi wrapper developer docs
*If you're looking for information on how to set up Jitsi in your Element, see
[jitsi.md](./jitsi.md) instead.*
_If you're looking for information on how to set up Jitsi in your Element, see
[jitsi.md](./jitsi.md) instead._
These docs are for developers wondering how the different conference buttons work
within Element. If you're not a developer, you're probably looking for [jitsi.md](./jitsi.md).
@ -46,11 +46,11 @@ end up creating a widget with a URL like `https://integrations.example.org?widge
The integration manager's wrapper will typically have another iframe to isolate the
widget from the client by yet another layer. The wrapper often provides other functionality
which might not be available on the embedded site, such as a fullscreen button or the
communication layer with the client (all widgets *should* be talking to the client
communication layer with the client (all widgets _should_ be talking to the client
over `postMessage`, even if they aren't going to be using the widget APIs).
Widgets added with the `/addwidget` command will *not* be wrapped as they are not going
through an integration manager. The widgets themselves *should* also work outside of
Widgets added with the `/addwidget` command will _not_ be wrapped as they are not going
through an integration manager. The widgets themselves _should_ also work outside of
Element. Widgets currently have a "pop out" button which opens them in a new tab and
therefore have no connection back to Riot.
@ -92,7 +92,7 @@ and less risky to load. The local wrapper URL is populated with the conference i
from the original widget (which could be a v1 or v2 widget) so the user joins the right
call.
Critically, when the widget URL is reconstructed it does *not* take into account the
Critically, when the widget URL is reconstructed it does _not_ take into account the
config.json's `preferredDomain` for Jitsi. If it did this, users would end up on different
conference servers and therefore different calls entirely.

4
docs/jitsi.md
View file

@ -24,8 +24,9 @@ Element will use the Jitsi server that is embedded in the widget, even if it is
one you configured. This is because conference calls must be held on a single Jitsi
server and cannot be split over multiple servers.
However, you can configure Element to *start* a conference with your Jitsi server by adding
However, you can configure Element to _start_ a conference with your Jitsi server by adding
to your [config](./config.md) the following:
```json
{
"jitsi": {
@ -46,6 +47,7 @@ domain will appear later in the URL as a configuration parameter.
**Hint**: If you want everyone on your homeserver to use the same Jitsi server by
default, and you are using element-web 1.6 or newer, set the following on your homeserver's
`/.well-known/matrix/client` config:
```json
{
"im.vector.riot.jitsi": {

4
docs/kubernetes.md
View file

@ -1,5 +1,4 @@
Running in Kubernetes
=====================
# Running in Kubernetes
In case you would like to deploy element-web in a kubernetes cluster you can use
the provided Kubernetes example below as a starting point. Note that this example assumes the
@ -178,4 +177,3 @@ Then you can deploy it to your cluster with something like `kubectl apply -f my-
number: 80
---

2
docs/labs.md
View file

@ -122,7 +122,7 @@ Switches to a new room search experience.
## Extensible events rendering (`feature_extensible_events`) [In Development]
*Intended for developer use only at the moment.*
_Intended for developer use only at the moment._
Extensible Events are a [new event format](https://github.com/matrix-org/matrix-doc/pull/1767) which
supports graceful fallback in unknown event types. Instead of rendering nothing or a blank space, events

4
docs/memory-profiles-and-leaks.md
View file

@ -22,8 +22,8 @@ and anything newer is still in the warmup stages of the app.
**Memory profiles can contain sensitive information.** If you are submitting a memory
profile to us for debugging purposes, please pick the appropriate Element developer and
send them over an encrypted private message. *Do not share your memory profile in
public channels or with people you do not trust.*
send them over an encrypted private message. _Do not share your memory profile in
public channels or with people you do not trust._
### Taking a memory profile (Firefox)

1
docs/modules.md
View file

@ -34,6 +34,7 @@ our [ILAG module](https://github.com/vector-im/element-web-ilag-module) which wi
structure of a module is and how it works.
The following requirements are key for any module:
1. The module must depend on `@matrix-org/react-sdk-module-api` (usually as a dev dependency).
2. The module's `main` entrypoint must have a `default` export for the `RuntimeModule` instance, supporting a constructor
which takes a single parameter: a `ModuleApi` instance. This instance is passed to `super()`.

62
docs/review.md
View file

@ -10,52 +10,52 @@ When reviewing code, here are some things we look for and also things we avoid:
### We review for
* Correctness
* Performance
* Accessibility
* Security
* Quality via automated and manual testing
* Comments and documentation where needed
* Sharing knowledge of different areas among the team
* Ensuring it's something we're comfortable maintaining for the long term
* Progress indicators and local echo where appropriate with network activity
- Correctness
- Performance
- Accessibility
- Security
- Quality via automated and manual testing
- Comments and documentation where needed
- Sharing knowledge of different areas among the team
- Ensuring it's something we're comfortable maintaining for the long term
- Progress indicators and local echo where appropriate with network activity
### We should avoid
* Style nits that are already handled by the linter
* Dramatically increasing scope
- Style nits that are already handled by the linter
- Dramatically increasing scope
### Good practices
* Use empathetic language
* See also [Mindful Communication in Code
- Use empathetic language
- See also [Mindful Communication in Code
Reviews](https://kickstarter.engineering/a-guide-to-mindful-communication-in-code-reviews-48aab5282e5e)
and [How to Do Code Reviews Like a Human](https://mtlynch.io/human-code-reviews-1/)
* Authors should prefer smaller commits for easier reviewing and bisection
* Reviewers should be explicit about required versus optional changes
* Reviews are conversations and the PR author should feel comfortable
- Authors should prefer smaller commits for easier reviewing and bisection
- Reviewers should be explicit about required versus optional changes
- Reviews are conversations and the PR author should feel comfortable
discussing and pushing back on changes before making them
* Reviewers are encouraged to ask for tests where they believe it is reasonable
* Core team should lead by example through their tone and language
* Take the time to thank and point out good code changes
* Using softer language like "please" and "what do you think?" goes a long way
- Reviewers are encouraged to ask for tests where they believe it is reasonable
- Core team should lead by example through their tone and language
- Take the time to thank and point out good code changes
- Using softer language like "please" and "what do you think?" goes a long way
towards making others feel like colleagues working towards a common goal
### Workflow
* Authors should request review from the element-web team by default (if someone on
- Authors should request review from the element-web team by default (if someone on
the team is clearly the expert in an area, a direct review request to them may
be more appropriate)
* Reviewers should remove the team review request and request review from
- Reviewers should remove the team review request and request review from
themselves when starting a review to avoid double review
* If there are multiple related PRs authors should reference each of the PRs in
- If there are multiple related PRs authors should reference each of the PRs in
the others before requesting review. Reviewers might start reviewing from
different places and could miss other required PRs.
* Avoid force pushing to a PR after the first round of review
* Use the GitHub default of merge commits when landing (avoid alternate options
- Avoid force pushing to a PR after the first round of review
- Use the GitHub default of merge commits when landing (avoid alternate options
like squash or rebase)
* PR author merges after review (assuming they have write access)
* Assign issues only when in progress to indicate to others what can be picked
- PR author merges after review (assuming they have write access)
- Assign issues only when in progress to indicate to others what can be picked
up
## Code Quality
@ -64,9 +64,9 @@ In the past, we have occasionally written different kinds of tests for
Element and the SDKs, but it hasn't been a consistent focus. Going forward, we'd
like to change that.
* For new features, code reviewers will expect some form of automated testing to
- For new features, code reviewers will expect some form of automated testing to
be included by default
* For bug fixes, regression tests are of course great to have, but we don't want
- For bug fixes, regression tests are of course great to have, but we don't want
to block fixes on this, so we won't require them at this time
The above policy is not a strict rule, but instead it's meant to be a
@ -104,9 +104,9 @@ perspective.
In more detail, our usual process for changes that affect the UI or alter user
functionality is:
* For changes that will go live when merged, always flag Design and Product
- For changes that will go live when merged, always flag Design and Product
teams as appropriate
* For changes guarded by a feature flag, Design and Product review is not
- For changes guarded by a feature flag, Design and Product review is not
required (though may still be useful) since we can continue tweaking
As it can be difficult to review design work from looking at just the changed

22
docs/theming.md
View file

@ -1,31 +1,29 @@
Theming Element
============
# Theming Element
Themes are a very basic way of providing simple alternative look & feels to the
Element app via CSS & custom imagery.
They are *NOT* co be confused with 'skins', which describe apps which sit on top
They are _NOT_ co be confused with 'skins', which describe apps which sit on top
of matrix-react-sdk - e.g. in theory Element itself is a react-sdk skin.
As of March 2022, skins are not fully supported; Element is the only available skin.
To define a theme for Element:
1. Pick a name, e.g. `teal`. at time of writing we have `light` and `dark`.
2. Fork `src/skins/vector/css/themes/dark.pcss` to be `teal.pcss`
3. Fork `src/skins/vector/css/themes/_base.pcss` to be `_teal.pcss`
4. Override variables in `_teal.pcss` as desired. You may wish to delete ones
1. Pick a name, e.g. `teal`. at time of writing we have `light` and `dark`.
2. Fork `src/skins/vector/css/themes/dark.pcss` to be `teal.pcss`
3. Fork `src/skins/vector/css/themes/_base.pcss` to be `_teal.pcss`
4. Override variables in `_teal.pcss` as desired. You may wish to delete ones
which don't differ from `_base.pcss`, to make it clear which are being
overridden. If every single colour is being changed (as per `_dark.pcss`)
then you might as well keep them all.
5. Add the theme to the list of entrypoints in webpack.config.js
6. Add the theme to the list of themes in matrix-react-sdk's UserSettings.js
7. Sit back and admire your handywork.
5. Add the theme to the list of entrypoints in webpack.config.js
6. Add the theme to the list of themes in matrix-react-sdk's UserSettings.js
7. Sit back and admire your handywork.
In future, the assets for a theme will probably be gathered together into a
single directory tree.
Custom Themes
=============
# Custom Themes
Themes derived from the built in themes may also be defined in settings.

23
docs/translating-dev.md
View file

@ -15,6 +15,7 @@ Translating strings are done with the `_t()` function found in matrix-react-sdk/
Basically, whenever a translatable string is introduced, you should call either `_t()` immediately OR `_td()` and later `_t()`.
Example:
```
// Module-level constant
const COLORS = {
@ -30,10 +31,10 @@ function getColorName(hex) {
## Adding new strings
1. Check if the import ``import { _t } from 'matrix-react-sdk/src/languageHandler';`` is present. If not add it to the other import statements. Also import `_td` if needed.
1. Add ``_t()`` to your string. (Don't forget curly braces when you assign an expression to JSX attributes in the render method). If the string is introduced at a point before the translation system has not yet been initialized, use `_td()` instead, and call `_t()` at the appropriate time.
1. Run `yarn i18n` to update ``src/i18n/strings/en_EN.json``
1. If you added a string with a plural, you can add other English plural variants to ``src/i18n/strings/en_EN.json`` (remeber to edit the one in the same project as the source file containing your new translation).
1. Check if the import `import { _t } from 'matrix-react-sdk/src/languageHandler';` is present. If not add it to the other import statements. Also import `_td` if needed.
1. Add `_t()` to your string. (Don't forget curly braces when you assign an expression to JSX attributes in the render method). If the string is introduced at a point before the translation system has not yet been initialized, use `_td()` instead, and call `_t()` at the appropriate time.
1. Run `yarn i18n` to update `src/i18n/strings/en_EN.json`
1. If you added a string with a plural, you can add other English plural variants to `src/i18n/strings/en_EN.json` (remeber to edit the one in the same project as the source file containing your new translation).
## Editing existing strings
@ -43,18 +44,18 @@ function getColorName(hex) {
## Adding variables inside a string.
1. Extend your ``_t()`` call. Instead of ``_t(STRING)`` use ``_t(STRING, {})``
1. Extend your `_t()` call. Instead of `_t(STRING)` use `_t(STRING, {})`
1. Decide how to name it. Please think about if the person who has to translate it can understand what it does. E.g. using the name 'recipient' is bad, because a translator does not know if it is the name of a person, an email address, a user ID, etc. Rather use e.g. recipientEmailAddress.
1. Add it to the array in ``_t`` for example ``_t(STRING, {variable: this.variable})``
1. Add the variable inside the string. The syntax for variables is ``%(variable)s``. Please note the _s_ at the end. The name of the variable has to match the previous used name.
1. Add it to the array in `_t` for example `_t(STRING, {variable: this.variable})`
1. Add the variable inside the string. The syntax for variables is `%(variable)s`. Please note the _s_ at the end. The name of the variable has to match the previous used name.
- You can use the special ``count`` variable to choose between multiple versions of the same string, in order to get the correct pluralization. E.g. ``_t('You have %(count)s new messages', { count: 2 })`` would show 'You have 2 new messages', while ``_t('You have %(count)s new messages', { count: 1 })`` would show 'You have one new message' (assuming a singular version of the string has been added to the translation file. See above). Passing in ``count`` is much prefered over having an if-statement choose the correct string to use, because some languages have much more complicated plural rules than english (e.g. they might need a completely different form if there are three things rather than two).
- If you want to translate text that includes e.g. hyperlinks or other HTML you have to also use tag substitution, e.g. ``_t('<a>Click here!</a>', {}, { 'a': (sub) => <a>{sub}</a> })``. If you don't do the tag substitution you will end up showing literally '<a>' rather than making a hyperlink.
- You can also use React components with normal variable substitution if you want to insert HTML markup, e.g. ``_t('Your email address is %(emailAddress)s', { emailAddress: <i>{userEmailAddress}</i> })``.
- You can use the special `count` variable to choose between multiple versions of the same string, in order to get the correct pluralization. E.g. `_t('You have %(count)s new messages', { count: 2 })` would show 'You have 2 new messages', while `_t('You have %(count)s new messages', { count: 1 })` would show 'You have one new message' (assuming a singular version of the string has been added to the translation file. See above). Passing in `count` is much prefered over having an if-statement choose the correct string to use, because some languages have much more complicated plural rules than english (e.g. they might need a completely different form if there are three things rather than two).
- If you want to translate text that includes e.g. hyperlinks or other HTML you have to also use tag substitution, e.g. `_t('<a>Click here!</a>', {}, { 'a': (sub) => <a>{sub}</a> })`. If you don't do the tag substitution you will end up showing literally '<a>' rather than making a hyperlink.
- You can also use React components with normal variable substitution if you want to insert HTML markup, e.g. `_t('Your email address is %(emailAddress)s', { emailAddress: <i>{userEmailAddress}</i> })`.
## Things to know/Style Guides
- Do not use `_t()` inside ``getDefaultProps``: the translations aren't loaded when `getDefaultProps` is called, leading to missing translations. Use `_td()` to indicate that `_t()` will be called on the string later.
- Do not use `_t()` inside `getDefaultProps`: the translations aren't loaded when `getDefaultProps` is called, leading to missing translations. Use `_td()` to indicate that `_t()` will be called on the string later.
- If using translated strings as constants, translated strings can't be in constants loaded at class-load time since the translations won't be loaded. Mark the strings using `_td()` instead and perform the actual translation later.
- If a string is presented in the UI with punctuation like a full stop, include this in the translation strings, since punctuation varies between languages too.
- Avoid "translation in parts", i.e. concatenating translated strings or using translated strings in variable substitutions. Context is important for translations, and translating partial strings this way is simply not always possible.

5
docs/translating.md
View file

@ -27,7 +27,7 @@ If your language is listed go to Step 2a and if not go to Step 2b
## Step 2a: Helping on existing languages.
1. Head to one of the projects listed https://translate.element.io/projects/element-web/
2. Click on the ``translate`` button on the right side of your language
2. Click on the `translate` button on the right side of your language
3. Fill in the translations in the writeable field. You will see the original English string and the string of your second language above.
Head to the explanations under Steb 2b
@ -35,7 +35,7 @@ Head to the explanations under Steb 2b
## Step 2b: Adding a new language
1. Go to one of the projects listed https://translate.element.io/projects/element-web/
2. Click the ``Start new translation`` button at the bottom
2. Click the `Start new translation` button at the bottom
3. Select a language
4. Start translating like in 2a.3
5. Repeat these steps for the other projects which are listed at the link of step 2b.1
@ -58,7 +58,6 @@ A special case is `%(urlStart)s` and `%(urlEnd)s` which are used to mark the beg
You can use inside the translation field "Review needed" checkbox. It will be shown as Strings that need to be reviewed.
### Further reading
The official Weblate doc provides some more in-depth explanation on how to do translations and talks about do and don'ts. You can find it at: https://docs.weblate.org/en/latest/user/translating.html

10
element.io/app/config.json
View file

@ -15,11 +15,7 @@
"uisi_autorageshake_app": "element-auto-uisi",
"showLabsSettings": false,
"roomDirectory": {
"servers": [
"matrix.org",
"gitter.im",
"libera.chat"
]
"servers": ["matrix.org", "gitter.im", "libera.chat"]
},
"enable_presence_by_hs_url": {
"https://matrix.org": false,
@ -38,9 +34,7 @@
"hostSignup": {
"brand": "Element Home",
"cookiePolicyUrl": "https://element.io/cookie-policy",
"domains": [
"matrix.org"
],
"domains": ["matrix.org"],
"privacyPolicyUrl": "https://element.io/privacy",
"termsOfServiceUrl": "https://element.io/terms-of-service",
"url": "https://ems.element.io/element-home/in-app-loader"

10
element.io/develop/config.json
View file

@ -15,11 +15,7 @@
"uisi_autorageshake_app": "element-auto-uisi",
"showLabsSettings": true,
"roomDirectory": {
"servers": [
"matrix.org",
"gitter.im",
"libera.chat"
]
"servers": ["matrix.org", "gitter.im", "libera.chat"]
},
"enable_presence_by_hs_url": {
"https://matrix.org": false,
@ -38,9 +34,7 @@
"hostSignup": {
"brand": "Element Home",
"cookiePolicyUrl": "https://element.io/cookie-policy",
"domains": [
"matrix.org"
],
"domains": ["matrix.org"],
"privacyPolicyUrl": "https://element.io/privacy",
"termsOfServiceUrl": "https://element.io/terms-of-service",
"url": "https://ems.element.io/element-home/in-app-loader"

22
module_system/installer.ts
View file

@ -65,7 +65,7 @@ export function installer(config: BuildConfig): void {
// else must be a module, we assume.
const pkgJsonStr = fs.readFileSync("./package.json", "utf-8");
const optionalDepNames = getOptionalDepNames(pkgJsonStr);
const installedModules = optionalDepNames.filter(d => !currentOptDeps.includes(d));
const installedModules = optionalDepNames.filter((d) => !currentOptDeps.includes(d));
// Ensure all the modules are compatible. We check them all and report at the end to
// try and save the user some time debugging this sort of failure.
@ -133,29 +133,33 @@ function callYarnAdd(dep: string): void {
// goes wrong in restoring the original package details.
childProcess.execSync(`yarn add -O ${dep}`, {
env: process.env,
stdio: ['inherit', 'inherit', 'inherit'],
stdio: ["inherit", "inherit", "inherit"],
});
}
function getOptionalDepNames(pkgJsonStr: string): string[] {
return Object.keys(JSON.parse(pkgJsonStr)?.['optionalDependencies'] ?? {});
return Object.keys(JSON.parse(pkgJsonStr)?.["optionalDependencies"] ?? {});
}
function findDepVersionInPackageJson(dep: string, pkgJsonStr: string): string {
const pkgJson = JSON.parse(pkgJsonStr);
const packages = {
...(pkgJson['optionalDependencies'] ?? {}),
...(pkgJson['devDependencies'] ?? {}),
...(pkgJson['dependencies'] ?? {}),
...(pkgJson["optionalDependencies"] ?? {}),
...(pkgJson["devDependencies"] ?? {}),
...(pkgJson["dependencies"] ?? {}),
};
return packages[dep];
}
function getTopLevelDependencyVersion(dep: string): string {
const dependencyTree = JSON.parse(childProcess.execSync(`npm list ${dep} --depth=0 --json`, {
const dependencyTree = JSON.parse(
childProcess
.execSync(`npm list ${dep} --depth=0 --json`, {
env: process.env,
stdio: ['inherit', 'pipe', 'pipe'],
}).toString('utf-8'));
stdio: ["inherit", "pipe", "pipe"],
})
.toString("utf-8"),
);
/*
What a dependency tree looks like:

16
res/css/structures/ErrorView.pcss
View file

@ -25,17 +25,8 @@ limitations under the License.
background: linear-gradient(to bottom, #c5e0f7 0%, #ffffff 100%);
/* stylelint-disable-next-line function-no-unknown */
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#c5e0f7', endColorstr='#ffffff', GradientType=0);
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Helvetica,
Arial,
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol";
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
color: #000;
width: 100%;
height: 100%;
@ -99,7 +90,8 @@ limitations under the License.
margin: auto 20px auto 0;
}
h1, h2 {
h1,
h2 {
font-weight: 600;
margin-bottom: 32px;
}

2
res/decoder-ring/datatypes.js
View file

@ -20,7 +20,7 @@
class Optional {
static from(value) {
return value && Some.of(value) || None;
return (value && Some.of(value)) || None;
}
map(f) {
return this;

111
res/decoder-ring/decoder.js
View file

@ -10,9 +10,9 @@ async function getBundleName(baseUrl) {
throw new StartupError(`Couldn't fetch index.html to prefill bundle; ${res.status} ${res.statusText}`);
}
const index = await res.text();
return index.split("\n").map((line) =>
line.match(/<script src="bundles\/([^/]+)\/bundle.js"/),
)
return index
.split("\n")
.map((line) => line.match(/<script src="bundles\/([^/]+)\/bundle.js"/))
.filter((result) => result)
.map((result) => result[1])[0];
}
@ -69,7 +69,7 @@ function observeReadableStream(readableStream, pendingContext = {}) {
return;
}
bytesReceived += value.length;
pendingSubject.next(Pending.of({...pendingContext, bytesReceived }));
pendingSubject.next(Pending.of({ ...pendingContext, bytesReceived }));
/* string concatenation is apparently the most performant way to do this */
buffer += utf8Decoder.decode(value);
readNextChunk();
@ -120,25 +120,27 @@ const e = React.createElement;
* Provides user feedback given a FetchStatus object.
*/
function ProgressBar({ fetchStatus }) {
return e('span', { className: "progress "},
return e(
"span",
{ className: "progress " },
fetchStatus.fold({
pending: ({ bytesReceived, length }) => {
if (!bytesReceived) {
return e('span', { className: "spinner" }, "\u29b5");
return e("span", { className: "spinner" }, "\u29b5");
}
const kB = Math.floor(10 * bytesReceived / 1024) / 10;
const kB = Math.floor((10 * bytesReceived) / 1024) / 10;
if (!length) {
return e('span', null, `Fetching (${kB}kB)`);
return e("span", null, `Fetching (${kB}kB)`);
}
const percent = Math.floor(100 * bytesReceived / length);
return e('span', null, `Fetching (${kB}kB) ${percent}%`);
const percent = Math.floor((100 * bytesReceived) / length);
return e("span", null, `Fetching (${kB}kB) ${percent}%`);
},
success: () => e('span', null, "\u2713"),
success: () => e("span", null, "\u2713"),
error: (reason) => {
return e('span', { className: 'error'}, `\u2717 ${reason}`);
return e("span", { className: "error" }, `\u2717 ${reason}`);
},
},
));
}),
);
}
/*
@ -193,13 +195,13 @@ function BundlePicker() {
setColumn(value);
}, []);
/* ------------------------------------------------ */
/* Plumb data-fetching observables through to React */
/* ------------------------------------------------ */
/* Whenever a valid bundle name is input, go see if it's a real bundle on the server */
React.useEffect(() =>
React.useEffect(
() =>
validateBundle(bundle).fold({
some: (value) => {
const subscription = bundleSubject(baseUrl, value)
@ -209,7 +211,8 @@ function BundlePicker() {
},
none: () => setBundleFetchStatus(None),
}),
[baseUrl, bundle]);
[baseUrl, bundle],
);
/* Whenever a valid javascript file is input, see if it corresponds to a sourcemap file and initiate a fetch
* if so. */
@ -218,15 +221,16 @@ function BundlePicker() {
setFileFetchStatus(None);
return;
}
const observable = fetchAsSubject(new URL(`bundles/${bundle}/${file}.map`, baseUrl).toString())
.pipe(
rxjs.operators.map((fetchStatus) => fetchStatus.flatMap(value => {
const observable = fetchAsSubject(new URL(`bundles/${bundle}/${file}.map`, baseUrl).toString()).pipe(
rxjs.operators.map((fetchStatus) =>
fetchStatus.flatMap((value) => {
try {
return Success.of(JSON.parse(value));
} catch (e) {
return FetchError.of(e);
}
})),
}),
),
rxjs.operators.map(Some.of),
);
const subscription = observable.subscribe(setFileFetchStatus);
@ -256,26 +260,33 @@ function BundlePicker() {
});
}, [fileFetchStatus, line, column]);
/* ------ */
/* Render */
/* ------ */
return e('div', {},
e('div', { className: 'inputs' },
e('div', { className: 'baseUrl' },
e('label', { htmlFor: 'baseUrl'}, 'Base URL'),
e('input', {
name: 'baseUrl',
return e(
"div",
{},
e(
"div",
{ className: "inputs" },
e(
"div",
{ className: "baseUrl" },
e("label", { htmlFor: "baseUrl" }, "Base URL"),
e("input", {
name: "baseUrl",
required: true,
pattern: ".+",
onChange: onBaseUrlChange,
value: baseUrl,
}),
),
e('div', { className: 'bundle' },
e('label', { htmlFor: 'bundle'}, 'Bundle'),
e('input', {
name: 'bundle',
e(
"div",
{ className: "bundle" },
e("label", { htmlFor: "bundle" }, "Bundle"),
e("input", {
name: "bundle",
required: true,
pattern: "[0-9a-f]{20}",
onChange: onBundleChange,
@ -286,10 +297,12 @@ function BundlePicker() {
none: () => null,
}),
),
e('div', { className: 'file' },
e('label', { htmlFor: 'file' }, 'File'),
e('input', {
name: 'file',
e(
"div",
{ className: "file" },
e("label", { htmlFor: "file" }, "File"),
e("input", {
name: "file",
required: true,
pattern: ".+\\.js",
onChange: onFileChange,
@ -300,20 +313,24 @@ function BundlePicker() {
none: () => null,
}),
),
e('div', { className: 'line' },
e('label', { htmlFor: 'line' }, 'Line'),
e('input', {
name: 'line',
e(
"div",
{ className: "line" },
e("label", { htmlFor: "line" }, "Line"),
e("input", {
name: "line",
required: true,
pattern: "[0-9]+",
onChange: onLineChange,
value: line,
}),
),
e('div', { className: 'column' },
e('label', { htmlFor: 'column' }, 'Column'),
e('input', {
name: 'column',
e(
"div",
{ className: "column" },
e("label", { htmlFor: "column" }, "Column"),
e("input", {
name: "column",
required: true,
pattern: "[0-9]+",
onChange: onColumnChange,
@ -321,10 +338,12 @@ function BundlePicker() {
}),
),
),
e('div', null,
e(
"div",
null,
result.fold({
none: () => "Select a bundle, file and line",
some: (value) => e('pre', null, value),
some: (value) => e("pre", null, value),
}),
),
);

18
res/decoder-ring/index.html
View file

@ -1,11 +1,11 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rageshake decoder ring</title>
<script crossorigin src="https://unpkg.com/source-map@0.7.3/dist/source-map.js"></script>
<script>
sourceMap.SourceMapConsumer.initialize({
"lib/mappings.wasm": "https://unpkg.com/source-map@0.7.3/lib/mappings.wasm"
"lib/mappings.wasm": "https://unpkg.com/source-map@0.7.3/lib/mappings.wasm",
});
</script>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
@ -18,12 +18,16 @@
<style>
@keyframes spin {
from {transform:rotate(0deg);}
to {transform:rotate(359deg);}
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
body {
font-family: sans-serif
font-family: sans-serif;
}
.spinner {
@ -44,7 +48,7 @@
}
.valid::after {
content: "✓"
content: "✓";
}
label {
@ -68,7 +72,7 @@
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", () => {
try {
ReactDOM.render(React.createElement(Decoder.BundlePicker), document.getElementById("main"))
ReactDOM.render(React.createElement(Decoder.BundlePicker), document.getElementById("main"));
} catch (e) {
const n = document.createElement("div");
n.innerText = `Error starting: ${e.message}`;

2
res/sw.js
View file

@ -1 +1 @@
self.addEventListener('fetch', () => {});
self.addEventListener("fetch", () => {});

116
res/welcome.html
View file

@ -1,14 +1,13 @@
<style type="text/css">
/* we deliberately inline style here to avoid flash-of-CSS problems, and to avoid
/* we deliberately inline style here to avoid flash-of-CSS problems, and to avoid
* voodoo where we have to set display: none by default
*/
h1::after {
h1::after {
content: "!";
}
}
.mx_Parent {
.mx_Parent {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -29,18 +28,18 @@ h1::after {
text-align: center;
padding: 25px 35px;
color: #2e2f32;
}
}
.mx_Logo {
.mx_Logo {
height: 54px;
margin-top: 2px;
}
}
.mx_ButtonGroup {
.mx_ButtonGroup {
margin-top: 10px;
}
}
.mx_ButtonRow {
.mx_ButtonRow {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -54,21 +53,21 @@ h1::after {
justify-content: space-between;
box-sizing: border-box;
margin: 12px 0 0;
}
}
.mx_ButtonRow > * {
.mx_ButtonRow > * {
margin: 0 10px;
}
}
.mx_ButtonRow > *:first-child {
.mx_ButtonRow > *:first-child {
margin-left: 0;
}
}
.mx_ButtonRow > *:last-child {
.mx_ButtonRow > *:last-child {
margin-right: 0;
}
}
.mx_ButtonParent {
.mx_ButtonParent {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -93,69 +92,69 @@ h1::after {
background-position: 10px center;
text-decoration: none;
color: #2e2f32 !important;
}
}
.mx_ButtonLabel {
.mx_ButtonLabel {
margin-left: 20px;
}
}
.mx_Header_title {
.mx_Header_title {
font-size: 24px;
font-weight: 600;
margin: 20px 0 0;
}
}
.mx_Header_subtitle {
.mx_Header_subtitle {
font-size: 12px;
font-weight: normal;
margin: 8px 0 0;
}
}
.mx_ButtonSignIn {
background-color: #368BD6;
.mx_ButtonSignIn {
background-color: #368bd6;
color: white !important;
}
}
.mx_ButtonCreateAccount {
background-color: #0DBD8B;
.mx_ButtonCreateAccount {
background-color: #0dbd8b;
color: white !important;
}
}
.mx_SecondaryButton {
background-color: #FFFFFF;
color: #2E2F32;
}
.mx_SecondaryButton {
background-color: #ffffff;
color: #2e2f32;
}
.mx_Button_iconSignIn {
background-image: url('welcome/images/icon-sign-in.svg');
}
.mx_Button_iconCreateAccount {
background-image: url('welcome/images/icon-create-account.svg');
}
.mx_Button_iconHelp {
background-image: url('welcome/images/icon-help.svg');
}
.mx_Button_iconRoomDirectory {
background-image: url('welcome/images/icon-room-directory.svg');
}
.mx_Button_iconSignIn {
background-image: url("welcome/images/icon-sign-in.svg");
}
.mx_Button_iconCreateAccount {
background-image: url("welcome/images/icon-create-account.svg");
}
.mx_Button_iconHelp {
background-image: url("welcome/images/icon-help.svg");
}
.mx_Button_iconRoomDirectory {
background-image: url("welcome/images/icon-room-directory.svg");
}
/*
/*
.mx_WelcomePage_loggedIn is applied by EmbeddedPage from the Welcome component
If it is set on the page, we should show the buttons. Otherwise, we have to assume
we don't have an account and should hide them. No account == no guest account either.
*/
.mx_WelcomePage:not(.mx_WelcomePage_loggedIn) .mx_WelcomePage_guestFunctions {
.mx_WelcomePage:not(.mx_WelcomePage_loggedIn) .mx_WelcomePage_guestFunctions {
display: none;
}
}
.mx_ButtonRow.mx_WelcomePage_guestFunctions {
.mx_ButtonRow.mx_WelcomePage_guestFunctions {
margin-top: 20px;
}
.mx_ButtonRow.mx_WelcomePage_guestFunctions > div {
}
.mx_ButtonRow.mx_WelcomePage_guestFunctions > div {
margin: 0 auto;
}
}
@media only screen and (max-width: 480px) {
@media only screen and (max-width: 480px) {
.mx_ButtonRow {
flex-direction: column;
}
@ -163,13 +162,12 @@ we don't have an account and should hide them. No account == no guest account ei
.mx_ButtonRow > * {
margin: 0 0 10px 0;
}
}
}
</style>
<div class="mx_Parent">
<a href="https://element.io" target="_blank" rel="noopener">
<img src="welcome/images/logo.svg" alt="" class="mx_Logo"/>
<img src="welcome/images/logo.svg" alt="" class="mx_Logo" />
</a>
<h1 class="mx_Header_title">_t("Welcome to Element")</h1>
<!-- XXX: Our translations system isn't smart enough to recognize variables in the HTML, so we manually do it -->

2
scripts/analyse_unused_exports.js
View file

@ -1,5 +1,5 @@
#!/usr/bin/env node
'use strict';
"use strict";
const fs = require("fs");
const { exec } = require("node:child_process");

10
scripts/build-jitsi.js
View file

@ -21,11 +21,13 @@ if (process.env.HTTPS_PROXY) {
options.agent = new ProxyAgent(process.env.HTTPS_PROXY, { tunnel: true });
}
fetch("https://meet.element.io/libs/external_api.min.js", options).then(res => {
fetch("https://meet.element.io/libs/external_api.min.js", options)
.then((res) => {
const stream = fs.createWriteStream(fname);
return new Promise((resolve, reject) => {
res.body.pipe(stream);
res.body.on('error', err => reject(err));
res.body.on('finish', () => resolve());
res.body.on("error", (err) => reject(err));
res.body.on("finish", () => resolve());
});
}).then(() => console.log('Done with Jitsi download'));
})
.then(() => console.log("Done with Jitsi download"));

170
scripts/copy-res.js
View file

@ -11,52 +11,52 @@ const loaderUtils = require("loader-utils");
// This could readily be automated, but it's nice to explicitly
// control when new languages are available.
const INCLUDE_LANGS = [
{'value': 'bg', 'label': 'Български'},
{'value': 'ca', 'label': 'Català'},
{'value': 'cs', 'label': 'čeština'},
{'value': 'da', 'label': 'Dansk'},
{'value': 'de_DE', 'label': 'Deutsch'},
{'value': 'el', 'label': 'Ελληνικά'},
{'value': 'en_EN', 'label': 'English'},
{'value': 'en_US', 'label': 'English (US)'},
{'value': 'eo', 'label': 'Esperanto'},
{'value': 'es', 'label': 'Español'},
{'value': 'et', 'label': 'Eesti'},
{'value': 'eu', 'label': 'Euskara'},
{'value': 'fi', 'label': 'Suomi'},
{'value': 'fr', 'label': 'Français'},
{'value': 'gl', 'label': 'Galego'},
{'value': 'he', 'label': 'עברית'},
{'value': 'hi', 'label': 'हिन्दी'},
{'value': 'hu', 'label': 'Magyar'},
{'value': 'id', 'label': 'Bahasa Indonesia'},
{'value': 'is', 'label': 'íslenska'},
{'value': 'it', 'label': 'Italiano'},
{'value': 'ja', 'label': '日本語'},
{'value': 'kab', 'label': 'Taqbaylit'},
{'value': 'ko', 'label': '한국어'},
{'value': 'lo', 'label': 'ລາວ'},
{'value': 'lt', 'label': 'Lietuvių'},
{'value': 'lv', 'label': 'Latviešu'},
{'value': 'nb_NO', 'label': 'Norwegian Bokmål'},
{'value': 'nl', 'label': 'Nederlands'},
{'value': 'nn', 'label': 'Norsk Nynorsk'},
{'value': 'pl', 'label': 'Polski'},
{'value': 'pt', 'label': 'Português'},
{'value': 'pt_BR', 'label': 'Português do Brasil'},
{'value': 'ru', 'label': 'Русский'},
{'value': 'sk', 'label': 'Slovenčina'},
{'value': 'sq', 'label': 'Shqip'},
{'value': 'sr', 'label': 'српски'},
{'value': 'sv', 'label': 'Svenska'},
{'value': 'te', 'label': 'తెలుగు'},
{'value': 'th', 'label': 'ไทย'},
{'value': 'tr', 'label': 'Türkçe'},
{'value': 'uk', 'label': 'українська мова'},
{'value': 'vi', 'label': 'Tiếng Việt'},
{'value': 'vls', 'label': 'West-Vlaams'},
{'value': 'zh_Hans', 'label': '简体中文'}, // simplified chinese
{'value': 'zh_Hant', 'label': '繁體中文'}, // traditional chinese
{ value: "bg", label: "Български" },
{ value: "ca", label: "Català" },
{ value: "cs", label: "čeština" },
{ value: "da", label: "Dansk" },
{ value: "de_DE", label: "Deutsch" },
{ value: "el", label: "Ελληνικά" },
{ value: "en_EN", label: "English" },
{ value: "en_US", label: "English (US)" },
{ value: "eo", label: "Esperanto" },
{ value: "es", label: "Español" },
{ value: "et", label: "Eesti" },
{ value: "eu", label: "Euskara" },
{ value: "fi", label: "Suomi" },
{ value: "fr", label: "Français" },
{ value: "gl", label: "Galego" },
{ value: "he", label: "עברית" },
{ value: "hi", label: "हिन्दी" },
{ value: "hu", label: "Magyar" },
{ value: "id", label: "Bahasa Indonesia" },
{ value: "is", label: "íslenska" },
{ value: "it", label: "Italiano" },
{ value: "ja", label: "日本語" },
{ value: "kab", label: "Taqbaylit" },
{ value: "ko", label: "한국어" },
{ value: "lo", label: "ລາວ" },
{ value: "lt", label: "Lietuvių" },
{ value: "lv", label: "Latviešu" },
{ value: "nb_NO", label: "Norwegian Bokmål" },
{ value: "nl", label: "Nederlands" },
{ value: "nn", label: "Norsk Nynorsk" },
{ value: "pl", label: "Polski" },
{ value: "pt", label: "Português" },
{ value: "pt_BR", label: "Português do Brasil" },
{ value: "ru", label: "Русский" },
{ value: "sk", label: "Slovenčina" },
{ value: "sq", label: "Shqip" },
{ value: "sr", label: "српски" },
{ value: "sv", label: "Svenska" },
{ value: "te", label: "తెలుగు" },
{ value: "th", label: "ไทย" },
{ value: "tr", label: "Türkçe" },
{ value: "uk", label: "українська мова" },
{ value: "vi", label: "Tiếng Việt" },
{ value: "vls", label: "West-Vlaams" },
{ value: "zh_Hans", label: "简体中文" }, // simplified chinese
{ value: "zh_Hant", label: "繁體中文" }, // traditional chinese
];
// cpx includes globbed parts of the filename in the destination, but excludes
@ -77,15 +77,13 @@ const COPY_LIST = [
["contribute.json", "webapp"],
];
const parseArgs = require('minimist');
const Cpx = require('cpx');
const chokidar = require('chokidar');
const fs = require('fs');
const rimraf = require('rimraf');
const parseArgs = require("minimist");
const Cpx = require("cpx");
const chokidar = require("chokidar");
const fs = require("fs");
const rimraf = require("rimraf");
const argv = parseArgs(
process.argv.slice(2), {}
);
const argv = parseArgs(process.argv.slice(2), {});
const watch = argv.w;
const verbose = argv.v;
@ -98,12 +96,12 @@ function errCheck(err) {
}
// Check if webapp exists
if (!fs.existsSync('webapp')) {
fs.mkdirSync('webapp');
if (!fs.existsSync("webapp")) {
fs.mkdirSync("webapp");
}
// Check if i18n exists
if (!fs.existsSync('webapp/i18n/')) {
fs.mkdirSync('webapp/i18n/');
if (!fs.existsSync("webapp/i18n/")) {
fs.mkdirSync("webapp/i18n/");
}
function next(i, err) {
@ -132,7 +130,9 @@ function next(i, err) {
});
}
const cb = (err) => { next(i + 1, err) };
const cb = (err) => {
next(i + 1, err);
};
if (watch) {
if (opts.directwatch) {
@ -140,14 +140,12 @@ function next(i, err) {
// which in the case of config.json is '.', which inevitably takes
// ages to crawl. So we create our own watcher on the files
// instead.
const copy = () => { cpx.copy(errCheck) };
chokidar.watch(source)
.on('add', copy)
.on('change', copy)
.on('ready', cb)
.on('error', errCheck);
const copy = () => {
cpx.copy(errCheck);
};
chokidar.watch(source).on("add", copy).on("change", copy).on("ready", cb).on("error", errCheck);
} else {
cpx.on('watch-ready', cb);
cpx.on("watch-ready", cb);
cpx.on("watch-error", cb);
cpx.watch();
}
@ -157,17 +155,14 @@ function next(i, err) {
}
function genLangFile(lang, dest) {
const reactSdkFile = 'node_modules/matrix-react-sdk/src/i18n/strings/' + lang + '.json';
const riotWebFile = 'src/i18n/strings/' + lang + '.json';
const reactSdkFile = "node_modules/matrix-react-sdk/src/i18n/strings/" + lang + ".json";
const riotWebFile = "src/i18n/strings/" + lang + ".json";
let translations = {};
[reactSdkFile, riotWebFile].forEach(function(f) {
[reactSdkFile, riotWebFile].forEach(function (f) {
if (fs.existsSync(f)) {
try {
Object.assign(
translations,
JSON.parse(fs.readFileSync(f).toString())
);
Object.assign(translations, JSON.parse(fs.readFileSync(f).toString()));
} catch (e) {
console.error("Failed: " + f, e);
throw e;
@ -192,16 +187,16 @@ function genLangFile(lang, dest) {
function genLangList(langFileMap) {
const languages = {};
INCLUDE_LANGS.forEach(function(lang) {
INCLUDE_LANGS.forEach(function (lang) {
const normalizedLanguage = lang.value.toLowerCase().replace("_", "-");
const languageParts = normalizedLanguage.split('-');
const languageParts = normalizedLanguage.split("-");
if (languageParts.length == 2 && languageParts[0] == languageParts[1]) {
languages[languageParts[0]] = {'fileName': langFileMap[lang.value], 'label': lang.label};
languages[languageParts[0]] = { fileName: langFileMap[lang.value], label: lang.label };
} else {
languages[normalizedLanguage] = {'fileName': langFileMap[lang.value], 'label': lang.label};
languages[normalizedLanguage] = { fileName: langFileMap[lang.value], label: lang.label };
}
});
fs.writeFile('webapp/i18n/languages.json', JSON.stringify(languages, null, 4), function(err) {
fs.writeFile("webapp/i18n/languages.json", JSON.stringify(languages, null, 4), function (err) {
if (err) {
console.error("Copy Error occured: " + err);
throw new Error("Failed to generate languages.json");
@ -230,7 +225,7 @@ function weblateToCounterpart(inTrs) {
const outTrs = {};
for (const key of Object.keys(inTrs)) {
const keyParts = key.split('|', 2);
const keyParts = key.split("|", 2);
if (keyParts.length === 2) {
let obj = outTrs[keyParts[0]];
if (obj === undefined) {
@ -239,7 +234,7 @@ function weblateToCounterpart(inTrs) {
// This is a transitional edge case if a string went from singular to pluralised and both still remain
// in the translation json file. Use the singular translation as `other` and merge pluralisation atop.
obj = outTrs[keyParts[0]] = {
"other": inTrs[key],
other: inTrs[key],
};
console.warn("Found entry in i18n file in both singular and pluralised form", keyParts[0]);
}
@ -258,8 +253,8 @@ regenerate the file, adding its content-hashed filename to langFileMap
and regenerating languages.json with the new filename
*/
function watchLanguage(lang, dest, langFileMap) {
const reactSdkFile = 'node_modules/matrix-react-sdk/src/i18n/strings/' + lang + '.json';
const riotWebFile = 'src/i18n/strings/' + lang + '.json';
const reactSdkFile = "node_modules/matrix-react-sdk/src/i18n/strings/" + lang + ".json";
const riotWebFile = "src/i18n/strings/" + lang + ".json";
// XXX: Use a debounce because for some reason if we read the language
// file immediately after the FS event is received, the file contents
@ -271,16 +266,13 @@ function watchLanguage(lang, dest, langFileMap) {
}
makeLangDebouncer = setTimeout(() => {
const filename = genLangFile(lang, dest);
langFileMap[lang]=filename;
langFileMap[lang] = filename;
genLangList(langFileMap);
}, 500);
};
[reactSdkFile, riotWebFile].forEach(function(f) {
chokidar.watch(f)
.on('add', makeLang)
.on('change', makeLang)
.on('error', errCheck);
[reactSdkFile, riotWebFile].forEach(function (f) {
chokidar.watch(f).on("add", makeLang).on("change", makeLang).on("error", errCheck);
});
}
@ -294,7 +286,7 @@ const I18N_FILENAME_MAP = INCLUDE_LANGS.reduce((m, l) => {
genLangList(I18N_FILENAME_MAP);
if (watch) {
INCLUDE_LANGS.forEach(l => watchLanguage(l.value, I18N_DEST, I18N_FILENAME_MAP));
INCLUDE_LANGS.forEach((l) => watchLanguage(l.value, I18N_DEST, I18N_FILENAME_MAP));
}
// non-language resources

28
src/@types/global.d.ts vendored
View file

@ -19,20 +19,20 @@ import type { Renderer } from "react-dom";
import type { logger } from "matrix-js-sdk/src/logger";
type ElectronChannel =
"app_onAction" |
"before-quit" |
"check_updates" |
"install_update" |
"ipcCall" |
"ipcReply" |
"loudNotification" |
"preferences" |
"seshat" |
"seshatReply" |
"setBadgeCount" |
"update-downloaded" |
"userDownloadCompleted" |
"userDownloadAction";
| "app_onAction"
| "before-quit"
| "check_updates"
| "install_update"
| "ipcCall"
| "ipcReply"
| "loudNotification"
| "preferences"
| "seshat"
| "seshatReply"
| "setBadgeCount"
| "update-downloaded"
| "userDownloadCompleted"
| "userDownloadAction";
declare global {
interface Window {

2
src/@types/raw-loader.d.ts vendored
View file

@ -1,4 +1,4 @@
declare module '!!raw-loader!*' {
declare module "!!raw-loader!*" {
const contents: string;
export default contents;
}

88
src/async-components/structures/CompatibilityView.tsx
View file

@ -16,7 +16,7 @@ limitations under the License.
import * as React from "react";
import { _t } from "matrix-react-sdk/src/languageHandler";
import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
import SdkConfig from "matrix-react-sdk/src/SdkConfig";
// directly import the style here as this layer does not support rethemedex at this time so no matrix-react-sdk
// PostCSS variables will be accessible.
@ -32,9 +32,13 @@ const CompatibilityView: React.FC<IProps> = ({ onAccept }) => {
let ios = null;
const iosCustomUrl = mobileBuilds?.ios;
if (iosCustomUrl !== null) { // could be undefined or a string
ios = <>
<p><strong>iOS</strong> (iPhone or iPad)</p>
if (iosCustomUrl !== null) {
// could be undefined or a string
ios = (
<>
<p>
<strong>iOS</strong> (iPhone or iPad)
</p>
<a
href={iosCustomUrl || "https://apps.apple.com/app/vector/id1083446067"}
target="_blank"
@ -42,82 +46,93 @@ const CompatibilityView: React.FC<IProps> = ({ onAccept }) => {
>
<img height="48" src="themes/element/img/download/apple.svg" alt="Apple App Store" />
</a>
</>;
</>
);
}
let android = [<p className="mx_Spacer" key="header"><strong>Android</strong></p>];
let android = [
<p className="mx_Spacer" key="header">
<strong>Android</strong>
</p>,
];
const andCustomUrl = mobileBuilds?.android;
const fdroidCustomUrl = mobileBuilds?.fdroid;
if (andCustomUrl !== null) { // undefined or string
android.push(<a
if (andCustomUrl !== null) {
// undefined or string
android.push(
<a
href={andCustomUrl || "https://play.google.com/store/apps/details?id=im.vector.app"}
target="_blank"
className="mx_ClearDecoration"
key="android"
>
<img height="48" src="themes/element/img/download/google.svg" alt="Google Play Store" />
</a>);
</a>,
);
}
if (fdroidCustomUrl !== null) { // undefined or string
android.push(<a
if (fdroidCustomUrl !== null) {
// undefined or string
android.push(
<a
href={fdroidCustomUrl || "https://f-droid.org/repository/browse/?fdid=im.vector.app"}
target="_blank"
className="mx_ClearDecoration"
key="fdroid"
>
<img height="48" src="themes/element/img/download/fdroid.svg" alt="F-Droid" />
</a>);
</a>,
);
}
if (android.length === 1) { // just a header, meaning no links
if (android.length === 1) {
// just a header, meaning no links
android = [];
}
let mobileHeader = <h2 id="step2_heading">{ _t("Use %(brand)s on mobile", { brand }) }</h2>;
let mobileHeader = <h2 id="step2_heading">{_t("Use %(brand)s on mobile", { brand })}</h2>;
if (!android.length && !ios) {
mobileHeader = null;
}
return <div className="mx_ErrorView">
return (
<div className="mx_ErrorView">
<div className="mx_ErrorView_container">
<div className="mx_HomePage_header">
<span className="mx_HomePage_logo">
<img height="42" src="themes/element/img/logos/element-logo.svg" alt="Element" />
</span>
<h1>{ _t("Unsupported browser") }</h1>
<h1>{_t("Unsupported browser")}</h1>
</div>
<div className="mx_HomePage_col">
<div className="mx_HomePage_row">
<div>
<h2 id="step1_heading">{ _t("Your browser can't run %(brand)s", { brand }) }</h2>
<h2 id="step1_heading">{_t("Your browser can't run %(brand)s", { brand })}</h2>
<p>
{ _t(
{_t(
"%(brand)s uses advanced browser features which aren't " +
"supported by your current browser.",
{ brand },
) }
)}
</p>
<p>
{ _t(
'Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, ' +
'or <safariLink>Safari</safariLink> for the best experience.',
{_t(
"Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, " +
"or <safariLink>Safari</safariLink> for the best experience.",
{},
{
'chromeLink': (sub) => <a href="https://www.google.com/chrome">{ sub }</a>,
'firefoxLink': (sub) => <a href="https://firefox.com">{ sub }</a>,
'safariLink': (sub) => <a href="https://apple.com/safari">{ sub }</a>,
chromeLink: (sub) => <a href="https://www.google.com/chrome">{sub}</a>,
firefoxLink: (sub) => <a href="https://firefox.com">{sub}</a>,
safariLink: (sub) => <a href="https://apple.com/safari">{sub}</a>,
},
) }
)}
</p>
<p>
{ _t(
{_t(
"You can continue using your current browser, but some or all features may not work " +
"and the look and feel of the application may be incorrect.",
) }
)}
</p>
<button onClick={onAccept}>
{ _t("I understand the risks and wish to continue") }
</button>
<button onClick={onAccept}>{_t("I understand the risks and wish to continue")}</button>
</div>
</div>
</div>
@ -125,9 +140,9 @@ const CompatibilityView: React.FC<IProps> = ({ onAccept }) => {
<div className="mx_HomePage_col">
<div className="mx_HomePage_row">
<div>
{ mobileHeader }
{ ios }
{ android }
{mobileHeader}
{ios}
{android}
</div>
</div>
</div>
@ -135,12 +150,13 @@ const CompatibilityView: React.FC<IProps> = ({ onAccept }) => {
<div className="mx_HomePage_row mx_Center mx_Spacer">
<p className="mx_Spacer">
<a href="https://element.io" target="_blank" className="mx_FooterLink">
{ _t("Go to element.io") }
{_t("Go to element.io")}
</a>
</p>
</div>
</div>
</div>;
</div>
);
};
export default CompatibilityView;

17
src/async-components/structures/ErrorView.tsx
View file

@ -28,34 +28,33 @@ interface IProps {
}
const ErrorView: React.FC<IProps> = ({ title, messages }) => {
return <div className="mx_ErrorView">
return (
<div className="mx_ErrorView">
<div className="mx_ErrorView_container">
<div className="mx_HomePage_header">
<span className="mx_HomePage_logo">
<img height="42" src="themes/element/img/logos/element-logo.svg" alt="Element" />
</span>
<h1>{ _t("Failed to start") }</h1>
<h1>{_t("Failed to start")}</h1>
</div>
<div className="mx_HomePage_col">
<div className="mx_HomePage_row">
<div>
<h2 id="step1_heading">{ title }</h2>
{ messages && messages.map(msg => <p key={msg}>
{ msg }
</p>) }
<h2 id="step1_heading">{title}</h2>
{messages && messages.map((msg) => <p key={msg}>{msg}</p>)}
</div>
</div>
</div>
<div className="mx_HomePage_row mx_Center mx_Spacer">
<p className="mx_Spacer">
<a href="https://element.io" target="_blank" className="mx_FooterLink">
{ _t("Go to element.io") }
{_t("Go to element.io")}
</a>
</p>
</div>
</div>
</div>;
</div>
);
};
export default ErrorView;

20
src/components/views/auth/VectorAuthFooter.tsx
View file

@ -15,31 +15,33 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { ReactElement } from 'react';
import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
import { _t } from 'matrix-react-sdk/src/languageHandler';
import React, { ReactElement } from "react";
import SdkConfig from "matrix-react-sdk/src/SdkConfig";
import { _t } from "matrix-react-sdk/src/languageHandler";
const VectorAuthFooter = (): ReactElement => {
const brandingConfig = SdkConfig.getObject("branding");
const links = brandingConfig?.get("auth_footer_links") ?? [
{ "text": "Blog", "url": "https://element.io/blog" },
{ "text": "Twitter", "url": "https://twitter.com/element_hq" },
{ "text": "GitHub", "url": "https://github.com/vector-im/element-web" },
{ text: "Blog", url: "https://element.io/blog" },
{ text: "Twitter", url: "https://twitter.com/element_hq" },
{ text: "GitHub", url: "https://github.com/vector-im/element-web" },
];
const authFooterLinks = [];
for (const linkEntry of links) {
authFooterLinks.push(
<a href={linkEntry.url} key={linkEntry.text} target="_blank" rel="noreferrer noopener">
{ linkEntry.text }
{linkEntry.text}
</a>,
);
}
return (
<footer className="mx_AuthFooter" role="contentinfo">
{ authFooterLinks }
<a href="https://matrix.org" target="_blank" rel="noreferrer noopener">{ _t('Powered by Matrix') }</a>
{authFooterLinks}
<a href="https://matrix.org" target="_blank" rel="noreferrer noopener">
{_t("Powered by Matrix")}
</a>
</footer>
);
};

4
src/components/views/auth/VectorAuthHeaderLogo.tsx
View file

@ -15,8 +15,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import * as React from 'react';
import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
import * as React from "react";
import SdkConfig from "matrix-react-sdk/src/SdkConfig";
export default class VectorAuthHeaderLogo extends React.PureComponent {
public render(): React.ReactElement {

20
src/components/views/auth/VectorAuthPage.tsx
View file

@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import * as React from 'react';
import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
import * as React from "react";
import SdkConfig from "matrix-react-sdk/src/SdkConfig";
import VectorAuthFooter from "./VectorAuthFooter";
@ -48,25 +48,25 @@ export default class VectorAuthPage extends React.PureComponent {
};
const modalStyle: React.CSSProperties = {
position: 'relative',
background: 'initial',
position: "relative",
background: "initial",
};
const blurStyle: React.CSSProperties = {
position: 'absolute',
position: "absolute",
top: 0,
right: 0,
bottom: 0,
left: 0,
filter: 'blur(40px)',
filter: "blur(40px)",
background: pageStyle.background,
};
const modalContentStyle: React.CSSProperties = {
display: 'flex',
display: "flex",
zIndex: 1,
background: 'rgba(255, 255, 255, 0.59)',
borderRadius: '8px',
background: "rgba(255, 255, 255, 0.59)",
borderRadius: "8px",
};
return (
@ -74,7 +74,7 @@ export default class VectorAuthPage extends React.PureComponent {
<div className="mx_AuthPage_modal" style={modalStyle}>
<div className="mx_AuthPage_modalBlur" style={blurStyle} />
<div className="mx_AuthPage_modalContent" style={modalContentStyle}>
{ this.props.children }
{this.props.children}
</div>
</div>
<VectorAuthFooter />

21
src/favicon.ts
View file

@ -70,8 +70,8 @@ export default class Favicon {
this.baseImage.setAttribute("crossOrigin", "anonymous");
this.baseImage.onload = (): void => {
// get height and width of the favicon
this.canvas.height = (this.baseImage.height > 0) ? this.baseImage.height : 32;
this.canvas.width = (this.baseImage.width > 0) ? this.baseImage.width : 32;
this.canvas.height = this.baseImage.height > 0 ? this.baseImage.height : 32;
this.canvas.width = this.baseImage.width > 0 ? this.baseImage.width : 32;
this.context = this.canvas.getContext("2d");
this.ready();
};
@ -89,7 +89,10 @@ export default class Favicon {
this.context.drawImage(this.baseImage, 0, 0, this.canvas.width, this.canvas.height);
}
private options(n: number | string, params: IParams): {
private options(
n: number | string,
params: IParams,
): {
n: string | number;
len: number;
x: number;
@ -98,7 +101,7 @@ export default class Favicon {
h: number;
} {
const opt = {
n: ((typeof n) === "number") ? Math.abs(n as number | 0) : n,
n: typeof n === "number" ? Math.abs(n as number | 0) : n,
len: ("" + n).length,
// badge positioning constants as percentages
x: 0.4,
@ -174,8 +177,8 @@ export default class Favicon {
this.context.stroke();
this.context.fillStyle = params.textColor;
if ((typeof opt.n) === "number" && opt.n > 999) {
const count = ((opt.n > 9999) ? 9 : Math.floor(opt.n as number / 1000)) + "k+";
if (typeof opt.n === "number" && opt.n > 999) {
const count = (opt.n > 9999 ? 9 : Math.floor((opt.n as number) / 1000)) + "k+";
this.context.fillText(count, Math.floor(opt.x + opt.w / 2), Math.floor(opt.y + opt.h - opt.h * 0.2));
} else {
this.context.fillText("" + opt.n, Math.floor(opt.x + opt.w / 2), Math.floor(opt.y + opt.h - opt.h * 0.15));
@ -209,7 +212,7 @@ export default class Favicon {
newIcon.setAttribute("href", url);
old.parentNode?.removeChild(old);
} else {
this.icons.forEach(icon => {
this.icons.forEach((icon) => {
icon.setAttribute("href", url);
});
}
@ -236,7 +239,7 @@ export default class Favicon {
const icons: HTMLLinkElement[] = [];
const links = window.document.getElementsByTagName("head")[0].getElementsByTagName("link");
for (const link of links) {
if ((/(^|\s)icon(\s|$)/i).test(link.getAttribute("rel"))) {
if (/(^|\s)icon(\s|$)/i.test(link.getAttribute("rel"))) {
icons.push(link);
}
}
@ -252,7 +255,7 @@ export default class Favicon {
window.document.getElementsByTagName("head")[0].appendChild(elms[0]);
}
elms.forEach(item => {
elms.forEach((item) => {
item.setAttribute("type", "image/png");
});
return elms;

60
src/vector/app.tsx
View file

@ -21,10 +21,10 @@ limitations under the License.
// To ensure we load the browser-matrix version first
import "matrix-js-sdk/src/browser-index";
import React, { ReactElement } from 'react';
import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg';
import { _td, newTranslatableError } from 'matrix-react-sdk/src/languageHandler';
import AutoDiscoveryUtils from 'matrix-react-sdk/src/utils/AutoDiscoveryUtils';
import React, { ReactElement } from "react";
import PlatformPeg from "matrix-react-sdk/src/PlatformPeg";
import { _td, newTranslatableError } from "matrix-react-sdk/src/languageHandler";
import AutoDiscoveryUtils from "matrix-react-sdk/src/utils/AutoDiscoveryUtils";
import { AutoDiscovery } from "matrix-js-sdk/src/autodiscovery";
import * as Lifecycle from "matrix-react-sdk/src/Lifecycle";
import SdkConfig, { parseSsoRedirectOptions } from "matrix-react-sdk/src/SdkConfig";
@ -34,7 +34,7 @@ import { createClient } from "matrix-js-sdk/src/matrix";
import { SnakedObject } from "matrix-react-sdk/src/utils/SnakedObject";
import MatrixChat from "matrix-react-sdk/src/components/structures/MatrixChat";
import { parseQs } from './url_utils';
import { parseQs } from "./url_utils";
import VectorBasePlatform from "./platform/VectorBasePlatform";
import { getScreenFromLocation, init as initRouting, onNewScreen } from "./routing";
@ -58,25 +58,20 @@ window.matrixLogger = logger;
function makeRegistrationUrl(params: object): string {
let url;
if (window.location.protocol === "vector:") {
url = 'https://app.element.io/#/register';
url = "https://app.element.io/#/register";
} else {
url = (
window.location.protocol + '//' +
window.location.host +
window.location.pathname +
'#/register'
);
url = window.location.protocol + "//" + window.location.host + window.location.pathname + "#/register";
}
const keys = Object.keys(params);
for (let i = 0; i < keys.length; ++i) {
if (i === 0) {
url += '?';
url += "?";
} else {
url += '&';
url += "&";
}
const k = keys[i];
url += k + '=' + encodeURIComponent(params[k]);
url += k + "=" + encodeURIComponent(params[k]);
}
return url;
}
@ -99,7 +94,7 @@ export async function loadApp(fragParams: {}): Promise<ReactElement> {
const params = parseQs(window.location);
const urlWithoutQuery = window.location.protocol + '//' + window.location.host + window.location.pathname;
const urlWithoutQuery = window.location.protocol + "//" + window.location.host + window.location.pathname;
logger.log("Vector starting at " + urlWithoutQuery);
(platform as VectorBasePlatform).startUpdater();
@ -115,7 +110,7 @@ export async function loadApp(fragParams: {}): Promise<ReactElement> {
const ssoRedirects = parseSsoRedirectOptions(config);
let autoRedirect = ssoRedirects.immediate === true;
// XXX: This path matching is a bit brittle, but better to do it early instead of in the app code.
const isWelcomeOrLanding = window.location.hash === '#/welcome' || window.location.hash === '#';
const isWelcomeOrLanding = window.location.hash === "#/welcome" || window.location.hash === "#";
if (!autoRedirect && ssoRedirects.on_welcome_page && isWelcomeOrLanding) {
autoRedirect = true;
}
@ -133,10 +128,10 @@ export async function loadApp(fragParams: {}): Promise<ReactElement> {
return;
}
const defaultDeviceName = snakedConfig.get("default_device_display_name")
?? platform.getDefaultDeviceDisplayName();
const defaultDeviceName = snakedConfig.get("default_device_display_name") ?? platform.getDefaultDeviceDisplayName();
return <MatrixChat
return (
<MatrixChat
onNewScreen={onNewScreen}
makeRegistrationUrl={makeRegistrationUrl}
config={config}
@ -146,7 +141,8 @@ export async function loadApp(fragParams: {}): Promise<ReactElement> {
onTokenLoginCompleted={onTokenLoginCompleted}
initialScreenAfterLogin={getScreenFromLocation(window.location)}
defaultDeviceDisplayName={defaultDeviceName}
/>;
/>
);
}
async function verifyServerConfig(): Promise<IConfigOptions> {
@ -164,18 +160,20 @@ async function verifyServerConfig(): Promise<IConfigOptions> {
// validators for that purpose.
const config = SdkConfig.get();
let wkConfig = config['default_server_config']; // overwritten later under some conditions
const serverName = config['default_server_name'];
const hsUrl = config['default_hs_url'];
const isUrl = config['default_is_url'];
let wkConfig = config["default_server_config"]; // overwritten later under some conditions
const serverName = config["default_server_name"];
const hsUrl = config["default_hs_url"];
const isUrl = config["default_is_url"];
const incompatibleOptions = [wkConfig, serverName, hsUrl].filter(i => !!i);
const incompatibleOptions = [wkConfig, serverName, hsUrl].filter((i) => !!i);
if (incompatibleOptions.length > 1) {
// noinspection ExceptionCaughtLocallyJS
throw newTranslatableError(_td(
throw newTranslatableError(
_td(
"Invalid configuration: can only specify one of default_server_config, default_server_name, " +
"or default_hs_url.",
));
),
);
}
if (incompatibleOptions.length < 1) {
// noinspection ExceptionCaughtLocallyJS
@ -191,12 +189,12 @@ async function verifyServerConfig(): Promise<IConfigOptions> {
wkConfig = {
"m.homeserver": {
"base_url": hsUrl,
base_url: hsUrl,
},
};
if (isUrl) {
wkConfig["m.identity_server"] = {
"base_url": isUrl,
base_url: isUrl,
};
}
}
@ -238,7 +236,7 @@ async function verifyServerConfig(): Promise<IConfigOptions> {
// Add the newly built config to the actual config for use by the app
logger.log("Updating SdkConfig with validated discovery information");
SdkConfig.add({ "validated_server_config": validatedConfig });
SdkConfig.add({ validated_server_config: validatedConfig });
return SdkConfig.get();
}

5
src/vector/devcss.ts
View file

@ -28,7 +28,7 @@ limitations under the License.
*
* For more details, see webpack.config.js:184 (string-replace-loader)
*/
if (process.env.NODE_ENV === 'development') {
if (process.env.NODE_ENV === "development") {
("use theming");
/**
* Clean up old hot-module script injections as they hog up memory
@ -40,8 +40,7 @@ if (process.env.NODE_ENV === 'development') {
const elements = Array.from(document.querySelectorAll("script[src*=hot-update]"));
if (elements.length > 1) {
const oldInjects = elements.slice(0, elements.length - 1);
oldInjects.forEach(e => e.remove());
oldInjects.forEach((e) => e.remove());
}
}, 1000);
}

4
src/vector/getconfig.ts
View file

@ -18,8 +18,8 @@ import type { IConfigOptions } from "matrix-react-sdk/src/IConfigOptions";
// Load the config file. First try to load up a domain-specific config of the
// form "config.$domain.json" and if that fails, fall back to config.json.
export async function getVectorConfig(relativeLocation=''): Promise<IConfigOptions> {
if (relativeLocation !== '' && !relativeLocation.endsWith('/')) relativeLocation += '/';
export async function getVectorConfig(relativeLocation = ""): Promise<IConfigOptions> {
if (relativeLocation !== "" && !relativeLocation.endsWith("/")) relativeLocation += "/";
const specificConfigPromise = getConfig(`${relativeLocation}config.${document.domain}.json`);
const generalConfigPromise = getConfig(relativeLocation + "config.json");

49
src/vector/index.ts
View file

@ -22,13 +22,13 @@ import { logger } from "matrix-js-sdk/src/logger";
// These are things that can run before the skin loads - be careful not to reference the react-sdk though.
import { parseQsFromFragment } from "./url_utils";
import './modernizr';
import "./modernizr";
// Require common CSS here; this will make webpack process it into bundle.css.
// Our own CSS (which is themed) is imported via separate webpack entry points
// in webpack.config.js
require('gfm.css/gfm.css');
require('katex/dist/katex.css');
require("gfm.css/gfm.css");
require("katex/dist/katex.css");
/**
* This require is necessary only for purposes of CSS hot-reload, as otherwise
@ -37,8 +37,8 @@ require('katex/dist/katex.css');
*
* On production build it's going to be an empty module, so don't worry about that.
*/
require('./devcss');
require('./localstorage-fix');
require("./devcss");
require("./localstorage-fix");
async function settled(...promises: Array<Promise<any>>): Promise<void> {
for (const prom of promises) {
@ -60,19 +60,16 @@ function checkBrowserFeatures(): boolean {
// in it for some features we depend on.
// Modernizr requires rules to be lowercase with no punctuation.
// ES2018: http://262.ecma-international.org/9.0/#sec-promise.prototype.finally
window.Modernizr.addTest("promiseprototypefinally", () =>
typeof window.Promise?.prototype?.finally === "function");
window.Modernizr.addTest("promiseprototypefinally", () => typeof window.Promise?.prototype?.finally === "function");
// ES2020: http://262.ecma-international.org/#sec-promise.allsettled
window.Modernizr.addTest("promiseallsettled", () =>
typeof window.Promise?.allSettled === "function");
window.Modernizr.addTest("promiseallsettled", () => typeof window.Promise?.allSettled === "function");
// ES2018: https://262.ecma-international.org/9.0/#sec-get-regexp.prototype.dotAll
window.Modernizr.addTest("regexpdotall", () => (
window.RegExp?.prototype &&
!!Object.getOwnPropertyDescriptor(window.RegExp.prototype, "dotAll")?.get
));
window.Modernizr.addTest(
"regexpdotall",
() => window.RegExp?.prototype && !!Object.getOwnPropertyDescriptor(window.RegExp.prototype, "dotAll")?.get,
);
// ES2019: http://262.ecma-international.org/10.0/#sec-object.fromentries
window.Modernizr.addTest("objectfromentries", () =>
typeof window.Object?.fromEntries === "function");
window.Modernizr.addTest("objectfromentries", () => typeof window.Object?.fromEntries === "function");
const featureList = Object.keys(window.Modernizr);
@ -80,8 +77,8 @@ function checkBrowserFeatures(): boolean {
for (const feature of featureList) {
if (window.Modernizr[feature] === undefined) {
logger.error(
"Looked for feature '%s' but Modernizr has no results for this. " +
"Has it been configured correctly?", feature,
"Looked for feature '%s' but Modernizr has no results for this. " + "Has it been configured correctly?",
feature,
);
return false;
}
@ -120,7 +117,8 @@ async function start(): Promise<void> {
} = await import(
/* webpackChunkName: "init" */
/* webpackPreload: true */
"./init");
"./init"
);
try {
// give rageshake a chance to load/fail, we don't actually assert rageshake loads, we allow it to fail if no IDB
@ -178,12 +176,12 @@ async function start(): Promise<void> {
// error handling begins here
// ##########################
if (!acceptBrowser) {
await new Promise<void>(resolve => {
await new Promise<void>((resolve) => {
logger.error("Browser is missing required features.");
// take to a different landing page to AWOOOOOGA at the user
showIncompatibleBrowser(() => {
if (window.localStorage) {
window.localStorage.setItem('mx_accepts_unsupported_browser', String(true));
window.localStorage.setItem("mx_accepts_unsupported_browser", String(true));
}
logger.log("User accepts the compatibility risks.");
resolve();
@ -199,12 +197,13 @@ async function start(): Promise<void> {
if (error.err && error.err instanceof SyntaxError) {
// This uses the default brand since the app config is unavailable.
return showError(_t("Your Element is misconfigured"), [
_t("Your Element configuration contains invalid JSON. " +
"Please correct the problem and reload the page."),
_t(
"The message from the parser is: %(message)s",
{ message: error.err.message || _t("Invalid JSON") },
"Your Element configuration contains invalid JSON. " +
"Please correct the problem and reload the page.",
),
_t("The message from the parser is: %(message)s", {
message: error.err.message || _t("Invalid JSON"),
}),
]);
}
return showError(_t("Unable to load config file: please refresh the page to try again."));
@ -237,7 +236,7 @@ async function start(): Promise<void> {
}
}
start().catch(err => {
start().catch((err) => {
logger.error(err);
// show the static error in an iframe to not lose any context / console data
// with some basic styling to make the iframe full page

2
src/vector/indexeddb-worker.ts
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { IndexedDBStoreWorker } from 'matrix-js-sdk/src/indexeddb-worker';
import { IndexedDBStoreWorker } from "matrix-js-sdk/src/indexeddb-worker";
const remoteWorker = new IndexedDBStoreWorker(postMessage as InstanceType<typeof Worker>["postMessage"]);

57
src/vector/init.tsx
View file

@ -20,7 +20,7 @@ limitations under the License.
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import olmWasmPath from "@matrix-org/olm/olm.wasm";
import Olm from '@matrix-org/olm';
import Olm from "@matrix-org/olm";
import * as ReactDOM from "react-dom";
import * as React from "react";
import * as languageHandler from "matrix-react-sdk/src/languageHandler";
@ -45,7 +45,7 @@ export function preparePlatform(): void {
if (window.electron) {
logger.log("Using Electron platform");
PlatformPeg.set(new ElectronPlatform());
} else if (window.matchMedia('(display-mode: standalone)').matches) {
} else if (window.matchMedia("(display-mode: standalone)").matches) {
logger.log("Using PWA platform");
PlatformPeg.set(new PWAPlatform());
} else {
@ -90,30 +90,35 @@ export function loadOlm(): Promise<void> {
*/
return Olm.init({
locateFile: () => olmWasmPath,
}).then(() => {
})
.then(() => {
logger.log("Using WebAssembly Olm");
}).catch((wasmLoadError) => {
})
.catch((wasmLoadError) => {
logger.log("Failed to load Olm: trying legacy version", wasmLoadError);
return new Promise((resolve, reject) => {
const s = document.createElement('script');
s.src = 'olm_legacy.js'; // XXX: This should be cache-busted too
const s = document.createElement("script");
s.src = "olm_legacy.js"; // XXX: This should be cache-busted too
s.onload = resolve;
s.onerror = reject;
document.body.appendChild(s);
}).then(() => {
})
.then(() => {
// Init window.Olm, ie. the one just loaded by the script tag,
// not 'Olm' which is still the failed wasm version.
return window.Olm.init();
}).then(() => {
})
.then(() => {
logger.log("Using legacy Olm");
}).catch((legacyLoadError) => {
})
.catch((legacyLoadError) => {
logger.log("Both WebAssembly and asm.js Olm failed!", legacyLoadError);
});
});
}
export async function loadLanguage(): Promise<void> {
const prefLang = SettingsStore.getValue("language", null, /*excludeDefault=*/true);
const prefLang = SettingsStore.getValue("language", null, /*excludeDefault=*/ true);
let langs = [];
if (!prefLang) {
@ -140,25 +145,35 @@ export async function loadApp(fragParams: {}): Promise<void> {
const module = await import(
/* webpackChunkName: "element-web-app" */
/* webpackPreload: true */
"./app");
window.matrixChat = ReactDOM.render(await module.loadApp(fragParams),
document.getElementById('matrixchat'));
"./app"
);
window.matrixChat = ReactDOM.render(await module.loadApp(fragParams), document.getElementById("matrixchat"));
}
export async function showError(title: string, messages?: string[]): Promise<void> {
const ErrorView = (await import(
const ErrorView = (
await import(
/* webpackChunkName: "error-view" */
"../async-components/structures/ErrorView")).default;
window.matrixChat = ReactDOM.render(<ErrorView title={title} messages={messages} />,
document.getElementById('matrixchat'));
"../async-components/structures/ErrorView"
)
).default;
window.matrixChat = ReactDOM.render(
<ErrorView title={title} messages={messages} />,
document.getElementById("matrixchat"),
);
}
export async function showIncompatibleBrowser(onAccept): Promise<void> {
const CompatibilityView = (await import(
const CompatibilityView = (
await import(
/* webpackChunkName: "compatibility-view" */
"../async-components/structures/CompatibilityView")).default;
window.matrixChat = ReactDOM.render(<CompatibilityView onAccept={onAccept} />,
document.getElementById('matrixchat'));
"../async-components/structures/CompatibilityView"
)
).default;
window.matrixChat = ReactDOM.render(
<CompatibilityView onAccept={onAccept} />,
document.getElementById("matrixchat"),
);
}
export async function loadModules(): Promise<void> {

20
src/vector/jitsi/index.html
View file

@ -1,12 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<head>
<meta charset="UTF-8" />
<title>Jitsi Widget</title>
</head>
<body>
<div id="jitsiContainer"><!-- the js will put the conference here --></div>
<div id="joinButtonContainer">
</head>
<body>
<div id="jitsiContainer"><!-- the js will put the conference here --></div>
<div id="joinButtonContainer">
<div class="joinConferenceFloating">
<div class="joinConferencePrompt">
<span class="icon"><!-- managed by CSS --></span>
@ -17,8 +17,8 @@
</div>
</div>
</div>
</div>
<!-- This script is not webpacked, and the script is downloaded at build time -->
<script src="./jitsi_external_api.min.js"></script>
</body>
</div>
<!-- This script is not webpacked, and the script is downloaded at build time -->
<script src="./jitsi_external_api.min.js"></script>
</body>
</html>

9
src/vector/jitsi/index.pcss
View file

@ -17,10 +17,10 @@ limitations under the License.
/* TODO: Match the user's theme: https://github.com/vector-im/element-web/issues/12794 */
@font-face {
font-family: 'Nunito';
font-family: "Nunito";
font-style: normal;
font-weight: 400;
src: url('~matrix-react-sdk/res/fonts/Nunito/Nunito-Regular.ttf') format('truetype');
src: url("~matrix-react-sdk/res/fonts/Nunito/Nunito-Regular.ttf") format("truetype");
}
$dark-fg: #edf3ff;
@ -38,7 +38,8 @@ body.theme-light {
color: $light-fg;
}
body, html {
body,
html {
padding: 0;
margin: 0;
}
@ -92,7 +93,7 @@ body, html {
margin-top: -$icon-size; /* to visually center the form */
&::before {
content: '';
content: "";
background-size: contain;
background-color: $dark-fg;
mask-repeat: no-repeat;

89
src/vector/jitsi/index.ts
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { KJUR } from 'jsrsasign';
import { KJUR } from "jsrsasign";
import {
IOpenIDCredentials,
IWidgetApiRequest,
@ -34,7 +34,7 @@ import { getVectorConfig } from "../getconfig";
// We have to trick webpack into loading our CSS for us.
require("./index.pcss");
const JITSI_OPENIDTOKEN_JWT_AUTH = 'openidtoken-jwt';
const JITSI_OPENIDTOKEN_JWT_AUTH = "openidtoken-jwt";
// Dev note: we use raw JS without many dependencies to reduce bundle size.
// We do not need all of React to render a Jitsi conference.
@ -82,9 +82,9 @@ const setupCompleted = (async (): Promise<string | void> => {
// If we have these params, expect a widget API to be available (ie. to be in an iframe
// inside a matrix client). Otherwise, assume we're on our own, eg. have been popped
// out into a browser.
const parentUrl = qsParam('parentUrl', true);
const widgetId = qsParam('widgetId', true);
const theme = qsParam('theme', true);
const parentUrl = qsParam("parentUrl", true);
const widgetId = qsParam("widgetId", true);
const theme = qsParam("theme", true);
if (theme) {
document.body.classList.add(`theme-${theme.replace(" ", "_")}`);
@ -93,10 +93,10 @@ const setupCompleted = (async (): Promise<string | void> => {
// Set this up as early as possible because Element will be hitting it almost immediately.
let widgetApiReady: Promise<void>;
if (parentUrl && widgetId) {
const parentOrigin = new URL(qsParam('parentUrl')).origin;
const parentOrigin = new URL(qsParam("parentUrl")).origin;
widgetApi = new WidgetApi(qsParam("widgetId"), parentOrigin);
widgetApiReady = new Promise<void>(resolve => widgetApi.once("ready", resolve));
widgetApiReady = new Promise<void>((resolve) => widgetApi.once("ready", resolve));
widgetApi.requestCapabilities(VideoConferenceCapabilities);
widgetApi.start();
@ -134,39 +134,39 @@ const setupCompleted = (async (): Promise<string | void> => {
meetApi = null;
closeConference();
} else {
meetApi?.executeCommand('hangup');
meetApi?.executeCommand("hangup");
}
});
handleAction(ElementWidgetActions.MuteAudio, async () => {
if (meetApi && !await meetApi.isAudioMuted()) {
meetApi.executeCommand('toggleAudio');
if (meetApi && !(await meetApi.isAudioMuted())) {
meetApi.executeCommand("toggleAudio");
}
});
handleAction(ElementWidgetActions.UnmuteAudio, async () => {
if (meetApi && await meetApi.isAudioMuted()) {
meetApi.executeCommand('toggleAudio');
if (meetApi && (await meetApi.isAudioMuted())) {
meetApi.executeCommand("toggleAudio");
}
});
handleAction(ElementWidgetActions.MuteVideo, async () => {
if (meetApi && !await meetApi.isVideoMuted()) {
meetApi.executeCommand('toggleVideo');
if (meetApi && !(await meetApi.isVideoMuted())) {
meetApi.executeCommand("toggleVideo");
}
});
handleAction(ElementWidgetActions.UnmuteVideo, async () => {
if (meetApi && await meetApi.isVideoMuted()) {
meetApi.executeCommand('toggleVideo');
if (meetApi && (await meetApi.isVideoMuted())) {
meetApi.executeCommand("toggleVideo");
}
});
handleAction(ElementWidgetActions.TileLayout, async () => {
meetApi?.executeCommand('setTileView', true);
meetApi?.executeCommand("setTileView", true);
});
handleAction(ElementWidgetActions.SpotlightLayout, async () => {
meetApi?.executeCommand('setTileView', false);
meetApi?.executeCommand("setTileView", false);
});
handleAction(ElementWidgetActions.StartLiveStream, async ({ rtmpStreamKey }) => {
if (!meetApi) throw new Error("Conference not joined");
meetApi.executeCommand('startRecording', {
mode: 'stream',
meetApi.executeCommand("startRecording", {
mode: "stream",
// this looks like it should be rtmpStreamKey but we may be on too old
// a version of jitsi meet
//rtmpStreamKey,
@ -178,23 +178,23 @@ const setupCompleted = (async (): Promise<string | void> => {
}
// Populate the Jitsi params now
jitsiDomain = qsParam('conferenceDomain');
conferenceId = qsParam('conferenceId');
displayName = qsParam('displayName', true);
avatarUrl = qsParam('avatarUrl', true); // http not mxc
userId = qsParam('userId');
jitsiAuth = qsParam('auth', true);
roomId = qsParam('roomId', true);
roomName = qsParam('roomName', true);
startAudioOnly = qsParam('isAudioOnly', true) === "true";
isVideoChannel = qsParam('isVideoChannel', true) === "true";
supportsScreensharing = qsParam('supportsScreensharing', true) === "true";
jitsiDomain = qsParam("conferenceDomain");
conferenceId = qsParam("conferenceId");
displayName = qsParam("displayName", true);
avatarUrl = qsParam("avatarUrl", true); // http not mxc
userId = qsParam("userId");
jitsiAuth = qsParam("auth", true);
roomId = qsParam("roomId", true);
roomName = qsParam("roomName", true);
startAudioOnly = qsParam("isAudioOnly", true) === "true";
isVideoChannel = qsParam("isVideoChannel", true) === "true";
supportsScreensharing = qsParam("supportsScreensharing", true) === "true";
// We've reached the point where we have to wait for the config, so do that then parse it.
const instanceConfig = new SnakedObject<IConfigOptions>((await configPromise) ?? <IConfigOptions>{});
const jitsiConfig = instanceConfig.get("jitsi_widget") ?? {};
skipOurWelcomeScreen = (new SnakedObject<IConfigOptions["jitsi_widget"]>(jitsiConfig))
.get("skip_built_in_welcome_screen") ?? false;
skipOurWelcomeScreen =
new SnakedObject<IConfigOptions["jitsi_widget"]>(jitsiConfig).get("skip_built_in_welcome_screen") ?? false;
// Either reveal the prejoin screen, or skip straight to Jitsi depending on the config.
// We don't set up the call yet though as this might lead to failure without the widget API.
@ -238,10 +238,10 @@ function switchVisibleContainers(): void {
}
function toggleConferenceVisibility(inConference: boolean): void {
document.getElementById("jitsiContainer").style.visibility = inConference ? 'unset' : 'hidden';
document.getElementById("jitsiContainer").style.visibility = inConference ? "unset" : "hidden";
// Video rooms have a separate UI for joining, so they should never show our join button
document.getElementById("joinButtonContainer").style.visibility =
(inConference || isVideoChannel) ? 'hidden' : 'unset';
inConference || isVideoChannel ? "hidden" : "unset";
}
function skipToJitsiSplashScreen(): void {
@ -256,7 +256,7 @@ function skipToJitsiSplashScreen(): void {
*/
function createJWTToken(): string {
// Header
const header = { alg: 'HS256', typ: 'JWT' };
const header = { alg: "HS256", typ: "JWT" };
// Payload
const payload = {
// As per Jitsi token auth, `iss` needs to be set to something agreed between
@ -281,12 +281,7 @@ function createJWTToken(): string {
// Sign JWT
// The secret string here is irrelevant, we're only using the JWT
// to transport data to Prosody in the Jitsi stack.
return KJUR.jws.JWS.sign(
'HS256',
JSON.stringify(header),
JSON.stringify(payload),
'notused',
);
return KJUR.jws.JWS.sign("HS256", JSON.stringify(header), JSON.stringify(payload), "notused");
}
async function notifyHangup(errorMessage?: string): Promise<void> {
@ -318,9 +313,10 @@ function closeConference(): void {
function joinConference(audioInput?: string | null, videoInput?: string | null): void {
let jwt;
if (jitsiAuth === JITSI_OPENIDTOKEN_JWT_AUTH) {
if (!openIdToken?.access_token) { // eslint-disable-line camelcase
if (!openIdToken?.access_token) {
// eslint-disable-line camelcase
// We've failing to get a token, don't try to init conference
logger.warn('Expected to have an OpenID credential, cannot initialize widget.');
logger.warn("Expected to have an OpenID credential, cannot initialize widget.");
document.getElementById("widgetActionContainer").innerText = "Failed to load Jitsi widget";
return;
}
@ -400,7 +396,7 @@ function joinConference(audioInput?: string | null, videoInput?: string | null):
meetApi.on("audioMuteStatusChanged", onAudioMuteStatusChanged);
meetApi.on("videoMuteStatusChanged", onVideoMuteStatusChanged);
["videoConferenceJoined", "participantJoined", "participantLeft"].forEach(event => {
["videoConferenceJoined", "participantJoined", "participantLeft"].forEach((event) => {
meetApi.on(event, updateParticipants);
});
@ -472,5 +468,4 @@ const updateParticipants = (): void => {
});
};
const onLog = ({ logLevel, args }): void =>
(parent as unknown as typeof global).mx_rage_logger?.log(logLevel, ...args);
const onLog = ({ logLevel, args }): void => (parent as unknown as typeof global).mx_rage_logger?.log(logLevel, ...args);

4
src/vector/localstorage-fix.ts
View file

@ -4,8 +4,8 @@
* */
if (window.localStorage) {
Object.keys(window.localStorage).forEach(key => {
if (key.indexOf('loglevel:') === 0) {
Object.keys(window.localStorage).forEach((key) => {
if (key.indexOf("loglevel:") === 0) {
window.localStorage.removeItem(key);
}
});

615
src/vector/mobile_guide/index.html
View file

File diff suppressed because one or more lines are too long

71
src/vector/mobile_guide/index.ts
View file

@ -1,17 +1,17 @@
import { logger } from "matrix-js-sdk/src/logger";
import { getVectorConfig } from '../getconfig';
import { getVectorConfig } from "../getconfig";
function onBackToElementClick(): void {
// Cookie should expire in 4 hours
document.cookie = 'element_mobile_redirect_to_guide=false;path=/;max-age=14400';
window.location.href = '../';
document.cookie = "element_mobile_redirect_to_guide=false;path=/;max-age=14400";
window.location.href = "../";
}
// NEVER pass user-controlled content to this function! Hardcoded strings only please.
function renderConfigError(message: string): void {
const contactMsg = "If this is unexpected, please contact your system administrator " +
"or technical support representative.";
const contactMsg =
"If this is unexpected, please contact your system administrator " + "or technical support representative.";
message = `<h2>Error loading Element</h2><p>${message}</p><p>${contactMsg}</p>`;
const toHide = document.getElementsByClassName("mx_HomePage_container");
@ -22,28 +22,28 @@ function renderConfigError(message: string): void {
for (const e of toHide) {
// We have to clear the content because .style.display='none'; doesn't work
// due to an !important in the CSS.
e.innerHTML = '';
e.innerHTML = "";
}
for (const e of errorContainers) {
e.style.display = 'block';
e.style.display = "block";
e.innerHTML = message;
}
}
async function initPage(): Promise<void> {
document.getElementById('back_to_element_button').onclick = onBackToElementClick;
document.getElementById("back_to_element_button").onclick = onBackToElementClick;
const config = await getVectorConfig('..');
const config = await getVectorConfig("..");
// We manually parse the config similar to how validateServerConfig works because
// calling that function pulls in roughly 4mb of JS we don't use.
const wkConfig = config['default_server_config']; // overwritten later under some conditions
const serverName = config['default_server_name'];
const defaultHsUrl = config['default_hs_url'];
const defaultIsUrl = config['default_is_url'];
const wkConfig = config["default_server_config"]; // overwritten later under some conditions
const serverName = config["default_server_name"];
const defaultHsUrl = config["default_hs_url"];
const defaultIsUrl = config["default_is_url"];
const incompatibleOptions = [wkConfig, serverName, defaultHsUrl].filter(i => !!i);
const incompatibleOptions = [wkConfig, serverName, defaultHsUrl].filter((i) => !!i);
if (incompatibleOptions.length > 1) {
return renderConfigError(
"Invalid configuration: can only specify one of default_server_config, default_server_name, " +
@ -54,14 +54,14 @@ async function initPage(): Promise<void> {
return renderConfigError("Invalid configuration: no default server specified.");
}
let hsUrl = '';
let isUrl = '';
let hsUrl = "";
let isUrl = "";
if (wkConfig && wkConfig['m.homeserver']) {
hsUrl = wkConfig['m.homeserver']['base_url'];
if (wkConfig && wkConfig["m.homeserver"]) {
hsUrl = wkConfig["m.homeserver"]["base_url"];
if (wkConfig['m.identity_server']) {
isUrl = wkConfig['m.identity_server']['base_url'];
if (wkConfig["m.identity_server"]) {
isUrl = wkConfig["m.identity_server"]["base_url"];
}
}
@ -70,11 +70,11 @@ async function initPage(): Promise<void> {
try {
const result = await fetch(`https://${serverName}/.well-known/matrix/client`);
const wkConfig = await result.json();
if (wkConfig && wkConfig['m.homeserver']) {
hsUrl = wkConfig['m.homeserver']['base_url'];
if (wkConfig && wkConfig["m.homeserver"]) {
hsUrl = wkConfig["m.homeserver"]["base_url"];
if (wkConfig['m.identity_server']) {
isUrl = wkConfig['m.identity_server']['base_url'];
if (wkConfig["m.identity_server"]) {
isUrl = wkConfig["m.identity_server"]["base_url"];
}
}
} catch (e) {
@ -92,21 +92,20 @@ async function initPage(): Promise<void> {
return renderConfigError("Unable to locate homeserver");
}
if (hsUrl && !hsUrl.endsWith('/')) hsUrl += '/';
if (isUrl && !isUrl.endsWith('/')) isUrl += '/';
if (hsUrl && !hsUrl.endsWith("/")) hsUrl += "/";
if (isUrl && !isUrl.endsWith("/")) isUrl += "/";
if (hsUrl !== 'https://matrix.org/') {
(document.getElementById('configure_element_button') as HTMLAnchorElement).href =
"https://mobile.element.io?hs_url=" + encodeURIComponent(hsUrl) +
"&is_url=" + encodeURIComponent(isUrl);
document.getElementById('step1_heading').innerHTML= '1: Install the app';
document.getElementById('step2_container').style.display = 'block';
document.getElementById('hs_url').innerText = hsUrl;
if (hsUrl !== "https://matrix.org/") {
(document.getElementById("configure_element_button") as HTMLAnchorElement).href =
"https://mobile.element.io?hs_url=" + encodeURIComponent(hsUrl) + "&is_url=" + encodeURIComponent(isUrl);
document.getElementById("step1_heading").innerHTML = "1: Install the app";
document.getElementById("step2_container").style.display = "block";
document.getElementById("hs_url").innerText = hsUrl;
if (isUrl) {
document.getElementById('custom_is').style.display = 'block';
document.getElementById('is_url').style.display = 'block';
document.getElementById('is_url').innerText = isUrl;
document.getElementById("custom_is").style.display = "block";
document.getElementById("is_url").style.display = "block";
document.getElementById("is_url").innerText = isUrl;
}
}
}

422
src/vector/modernizr.js
View file

File diff suppressed because one or more lines are too long

114
src/vector/platform/ElectronPlatform.tsx
View file

@ -19,12 +19,12 @@ limitations under the License.
*/
import { UpdateCheckStatus, UpdateStatus } from "matrix-react-sdk/src/BasePlatform";
import BaseEventIndexManager from 'matrix-react-sdk/src/indexing/BaseEventIndexManager';
import dis from 'matrix-react-sdk/src/dispatcher/dispatcher';
import { _t } from 'matrix-react-sdk/src/languageHandler';
import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
import BaseEventIndexManager from "matrix-react-sdk/src/indexing/BaseEventIndexManager";
import dis from "matrix-react-sdk/src/dispatcher/dispatcher";
import { _t } from "matrix-react-sdk/src/languageHandler";
import SdkConfig from "matrix-react-sdk/src/SdkConfig";
import { IConfigOptions } from "matrix-react-sdk/src/IConfigOptions";
import * as rageshake from 'matrix-react-sdk/src/rageshake/rageshake';
import * as rageshake from "matrix-react-sdk/src/rageshake/rageshake";
import { MatrixClient } from "matrix-js-sdk/src/client";
import { Room } from "matrix-js-sdk/src/models/room";
import Modal from "matrix-react-sdk/src/Modal";
@ -41,35 +41,35 @@ import GenericExpiringToast from "matrix-react-sdk/src/components/views/toasts/G
import { logger } from "matrix-js-sdk/src/logger";
import { MatrixEvent } from "matrix-js-sdk/src/models/event";
import VectorBasePlatform from './VectorBasePlatform';
import VectorBasePlatform from "./VectorBasePlatform";
import { SeshatIndexManager } from "./SeshatIndexManager";
import { IPCManager } from "./IPCManager";
const isMac = navigator.platform.toUpperCase().includes('MAC');
const isMac = navigator.platform.toUpperCase().includes("MAC");
function platformFriendlyName(): string {
// used to use window.process but the same info is available here
if (navigator.userAgent.includes('Macintosh')) {
return 'macOS';
} else if (navigator.userAgent.includes('FreeBSD')) {
return 'FreeBSD';
} else if (navigator.userAgent.includes('OpenBSD')) {
return 'OpenBSD';
} else if (navigator.userAgent.includes('SunOS')) {
return 'SunOS';
} else if (navigator.userAgent.includes('Windows')) {
return 'Windows';
} else if (navigator.userAgent.includes('Linux')) {
return 'Linux';
if (navigator.userAgent.includes("Macintosh")) {
return "macOS";
} else if (navigator.userAgent.includes("FreeBSD")) {
return "FreeBSD";
} else if (navigator.userAgent.includes("OpenBSD")) {
return "OpenBSD";
} else if (navigator.userAgent.includes("SunOS")) {
return "SunOS";
} else if (navigator.userAgent.includes("Windows")) {
return "Windows";
} else if (navigator.userAgent.includes("Linux")) {
return "Linux";
} else {
return 'Unknown';
return "Unknown";
}
}
function onAction(payload: ActionPayload): void {
// Whitelist payload actions, no point sending most across
if (['call_state'].includes(payload.action)) {
window.electron.send('app_onAction', payload);
if (["call_state"].includes(payload.action)) {
window.electron.send("app_onAction", payload);
}
}
@ -102,7 +102,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
false if there is not
or the error if one is encountered
*/
window.electron.on('check_updates', (event, status) => {
window.electron.on("check_updates", (event, status) => {
dis.dispatch<CheckUpdatesPayload>({
action: Action.CheckUpdates,
...getUpdateCheckStatus(status),
@ -110,27 +110,27 @@ export default class ElectronPlatform extends VectorBasePlatform {
});
// try to flush the rageshake logs to indexeddb before quit.
window.electron.on('before-quit', function() {
logger.log('element-desktop closing');
window.electron.on("before-quit", function () {
logger.log("element-desktop closing");
rageshake.flush();
});
window.electron.on('update-downloaded', this.onUpdateDownloaded);
window.electron.on("update-downloaded", this.onUpdateDownloaded);
window.electron.on('preferences', () => {
window.electron.on("preferences", () => {
dis.fire(Action.ViewUserSettings);
});
window.electron.on('userDownloadCompleted', (ev, { id, name }) => {
window.electron.on("userDownloadCompleted", (ev, { id, name }) => {
const key = `DOWNLOAD_TOAST_${id}`;
const onAccept = (): void => {
window.electron.send('userDownloadAction', { id, open: true });
window.electron.send("userDownloadAction", { id, open: true });
ToastStore.sharedInstance().dismissToast(key);
};
const onDismiss = (): void => {
window.electron.send('userDownloadAction', { id });
window.electron.send("userDownloadAction", { id });
};
ToastStore.sharedInstance().addOrReplaceToast({
@ -153,7 +153,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
}
public async getConfig(): Promise<IConfigOptions> {
return this.ipc.call('getConfig');
return this.ipc.call("getConfig");
}
private onUpdateDownloaded = async (ev, { releaseNotes, releaseName }): Promise<void> => {
@ -167,7 +167,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
};
public getHumanReadableName(): string {
return 'Electron Platform'; // no translation required: only used for analytics
return "Electron Platform"; // no translation required: only used for analytics
}
/**
@ -186,7 +186,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
if (this.notificationCount === count) return;
super.setNotificationCount(count);
window.electron.send('setBadgeCount', count);
window.electron.send("setBadgeCount", count);
}
public supportsNotifications(): boolean {
@ -210,29 +210,23 @@ export default class ElectronPlatform extends VectorBasePlatform {
// maybe we should pass basic styling (italics, bold, underline) through from MD
// we only have to strip out < and > as the spec doesn't include anything about things like &amp;
// so we shouldn't assume that all implementations will treat those properly. Very basic tag parsing is done.
if (navigator.userAgent.includes('Linux')) {
msg = msg.replace(/</g, '&lt;').replace(/>/g, '&gt;');
if (navigator.userAgent.includes("Linux")) {
msg = msg.replace(/</g, "&lt;").replace(/>/g, "&gt;");
}
const notification = super.displayNotification(
title,
msg,
avatarUrl,
room,
ev,
);
const notification = super.displayNotification(title, msg, avatarUrl, room, ev);
const handler = notification.onclick as Function;
notification.onclick = (): void => {
handler?.();
this.ipc.call('focusWindow');
this.ipc.call("focusWindow");
};
return notification;
}
public loudNotification(ev: MatrixEvent, room: Room): void {
window.electron.send('loudNotification');
window.electron.send("loudNotification");
}
public needsUrlTooltips(): boolean {
@ -240,7 +234,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
}
public async getAppVersion(): Promise<string> {
return this.ipc.call('getAppVersion');
return this.ipc.call("getAppVersion");
}
public supportsSetting(settingName?: string): boolean {
@ -262,32 +256,32 @@ export default class ElectronPlatform extends VectorBasePlatform {
}
public async canSelfUpdate(): Promise<boolean> {
const feedUrl = await this.ipc.call('getUpdateFeedUrl');
const feedUrl = await this.ipc.call("getUpdateFeedUrl");
return Boolean(feedUrl);
}
public startUpdateCheck(): void {
super.startUpdateCheck();
window.electron.send('check_updates');
window.electron.send("check_updates");
}
public installUpdate(): void {
// IPC to the main process to install the update, since quitAndInstall
// doesn't fire the before-quit event so the main process needs to know
// it should exit.
window.electron.send('install_update');
window.electron.send("install_update");
}
public getDefaultDeviceDisplayName(): string {
const brand = SdkConfig.get().brand;
return _t('%(brand)s Desktop: %(platformName)s', {
return _t("%(brand)s Desktop: %(platformName)s", {
brand,
platformName: platformFriendlyName(),
});
}
public requestNotificationPermission(): Promise<string> {
return Promise.resolve('granted');
return Promise.resolve("granted");
}
public reload(): void {
@ -299,33 +293,33 @@ export default class ElectronPlatform extends VectorBasePlatform {
}
public async setLanguage(preferredLangs: string[]): Promise<any> {
return this.ipc.call('setLanguage', preferredLangs);
return this.ipc.call("setLanguage", preferredLangs);
}
public setSpellCheckEnabled(enabled: boolean): void {
this.ipc.call('setSpellCheckEnabled', enabled).catch(error => {
this.ipc.call("setSpellCheckEnabled", enabled).catch((error) => {
logger.log("Failed to send setSpellCheckEnabled IPC to Electron");
logger.error(error);
});
}
public async getSpellCheckEnabled(): Promise<boolean> {
return this.ipc.call('getSpellCheckEnabled');
return this.ipc.call("getSpellCheckEnabled");
}
public setSpellCheckLanguages(preferredLangs: string[]): void {
this.ipc.call('setSpellCheckLanguages', preferredLangs).catch(error => {
this.ipc.call("setSpellCheckLanguages", preferredLangs).catch((error) => {
logger.log("Failed to send setSpellCheckLanguages IPC to Electron");
logger.error(error);
});
}
public async getSpellCheckLanguages(): Promise<string[]> {
return this.ipc.call('getSpellCheckLanguages');
return this.ipc.call("getSpellCheckLanguages");
}
public async getDesktopCapturerSources(options: GetSourcesOptions): Promise<Array<DesktopCapturerSource>> {
return this.ipc.call('getDesktopCapturerSources', options);
return this.ipc.call("getDesktopCapturerSources", options);
}
public supportsDesktopCapturer(): boolean {
@ -338,7 +332,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
}
public async getAvailableSpellCheckLanguages(): Promise<string[]> {
return this.ipc.call('getAvailableSpellCheckLanguages');
return this.ipc.call("getAvailableSpellCheckLanguages");
}
public getSSOCallbackUrl(fragmentAfterLogin: string): URL {
@ -372,7 +366,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
public async getPickleKey(userId: string, deviceId: string): Promise<string | null> {
try {
return await this.ipc.call('getPickleKey', userId, deviceId);
return await this.ipc.call("getPickleKey", userId, deviceId);
} catch (e) {
// if we can't connect to the password storage, assume there's no
// pickle key
@ -382,7 +376,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
public async createPickleKey(userId: string, deviceId: string): Promise<string | null> {
try {
return await this.ipc.call('createPickleKey', userId, deviceId);
return await this.ipc.call("createPickleKey", userId, deviceId);
} catch (e) {
// if we can't connect to the password storage, assume there's no
// pickle key
@ -392,7 +386,7 @@ export default class ElectronPlatform extends VectorBasePlatform {
public async destroyPickleKey(userId: string, deviceId: string): Promise<void> {
try {
await this.ipc.call('destroyPickleKey', userId, deviceId);
await this.ipc.call("destroyPickleKey", userId, deviceId);
} catch (e) {}
}
}

2
src/vector/platform/IPCManager.ts
View file

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { defer, IDeferred } from 'matrix-js-sdk/src/utils';
import { defer, IDeferred } from "matrix-js-sdk/src/utils";
import { logger } from "matrix-js-sdk/src/logger";
import { ElectronChannel } from "../../@types/global";

2
src/vector/platform/PWAPlatform.ts
View file

@ -24,7 +24,7 @@ export default class PWAPlatform extends WebPlatform {
if (this.notificationCount === count) return;
this.notificationCount = count;
navigator.setAppBadge(count).catch(e => {
navigator.setAppBadge(count).catch((e) => {
logger.error("Failed to update PWA app badge", e);
});
}

38
src/vector/platform/SeshatIndexManager.ts
View file

@ -19,7 +19,7 @@ import BaseEventIndexManager, {
IEventAndProfile,
IIndexStats,
ISearchArgs,
} from 'matrix-react-sdk/src/indexing/BaseEventIndexManager';
} from "matrix-react-sdk/src/indexing/BaseEventIndexManager";
import { IMatrixProfile, IEventWithRoomId as IMatrixEvent, IResultRoomEvents } from "matrix-js-sdk/src/@types/search";
import { IPCManager } from "./IPCManager";
@ -28,35 +28,35 @@ export class SeshatIndexManager extends BaseEventIndexManager {
private readonly ipc = new IPCManager("seshat", "seshatReply");
public async supportsEventIndexing(): Promise<boolean> {
return this.ipc.call('supportsEventIndexing');
return this.ipc.call("supportsEventIndexing");
}
public async initEventIndex(userId: string, deviceId: string): Promise<void> {
return this.ipc.call('initEventIndex', userId, deviceId);
return this.ipc.call("initEventIndex", userId, deviceId);
}
public async addEventToIndex(ev: IMatrixEvent, profile: IMatrixProfile): Promise<void> {
return this.ipc.call('addEventToIndex', ev, profile);
return this.ipc.call("addEventToIndex", ev, profile);
}
public async deleteEvent(eventId: string): Promise<boolean> {
return this.ipc.call('deleteEvent', eventId);
return this.ipc.call("deleteEvent", eventId);
}
public async isEventIndexEmpty(): Promise<boolean> {
return this.ipc.call('isEventIndexEmpty');
return this.ipc.call("isEventIndexEmpty");
}
public async isRoomIndexed(roomId: string): Promise<boolean> {
return this.ipc.call('isRoomIndexed', roomId);
return this.ipc.call("isRoomIndexed", roomId);
}
public async commitLiveEvents(): Promise<void> {
return this.ipc.call('commitLiveEvents');
return this.ipc.call("commitLiveEvents");
}
public async searchEventIndex(searchConfig: ISearchArgs): Promise<IResultRoomEvents> {
return this.ipc.call('searchEventIndex', searchConfig);
return this.ipc.call("searchEventIndex", searchConfig);
}
public async addHistoricEvents(
@ -64,42 +64,42 @@ export class SeshatIndexManager extends BaseEventIndexManager {
checkpoint: ICrawlerCheckpoint | null,
oldCheckpoint: ICrawlerCheckpoint | null,
): Promise<boolean> {
return this.ipc.call('addHistoricEvents', events, checkpoint, oldCheckpoint);
return this.ipc.call("addHistoricEvents", events, checkpoint, oldCheckpoint);
}
public async addCrawlerCheckpoint(checkpoint: ICrawlerCheckpoint): Promise<void> {
return this.ipc.call('addCrawlerCheckpoint', checkpoint);
return this.ipc.call("addCrawlerCheckpoint", checkpoint);
}
public async removeCrawlerCheckpoint(checkpoint: ICrawlerCheckpoint): Promise<void> {
return this.ipc.call('removeCrawlerCheckpoint', checkpoint);
return this.ipc.call("removeCrawlerCheckpoint", checkpoint);
}
public async loadFileEvents(args): Promise<IEventAndProfile[]> {
return this.ipc.call('loadFileEvents', args);
return this.ipc.call("loadFileEvents", args);
}
public async loadCheckpoints(): Promise<ICrawlerCheckpoint[]> {
return this.ipc.call('loadCheckpoints');
return this.ipc.call("loadCheckpoints");
}
public async closeEventIndex(): Promise<void> {
return this.ipc.call('closeEventIndex');
return this.ipc.call("closeEventIndex");
}
public async getStats(): Promise<IIndexStats> {
return this.ipc.call('getStats');
return this.ipc.call("getStats");
}
public async getUserVersion(): Promise<number> {
return this.ipc.call('getUserVersion');
return this.ipc.call("getUserVersion");
}
public async setUserVersion(version: number): Promise<void> {
return this.ipc.call('setUserVersion', version);
return this.ipc.call("setUserVersion", version);
}
public async deleteEventIndex(): Promise<void> {
return this.ipc.call('deleteEventIndex');
return this.ipc.call("deleteEventIndex");
}
}

9
src/vector/platform/VectorBasePlatform.ts
View file

@ -17,8 +17,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import BasePlatform from 'matrix-react-sdk/src/BasePlatform';
import { _t } from 'matrix-react-sdk/src/languageHandler';
import BasePlatform from "matrix-react-sdk/src/BasePlatform";
import { _t } from "matrix-react-sdk/src/languageHandler";
import type { IConfigOptions } from "matrix-react-sdk/src/IConfigOptions";
import { getVectorConfig } from "../getconfig";
@ -35,7 +35,7 @@ export default abstract class VectorBasePlatform extends BasePlatform {
}
public getHumanReadableName(): string {
return 'Vector Base Platform'; // no translation required: only used for analytics
return "Vector Base Platform"; // no translation required: only used for analytics
}
/**
@ -78,8 +78,7 @@ export default abstract class VectorBasePlatform extends BasePlatform {
/**
* Begin update polling, if applicable
*/
public startUpdater(): void {
}
public startUpdater(): void {}
/**
* Get a sensible default display name for the

33
src/vector/platform/WebPlatform.ts
View file

@ -17,15 +17,15 @@ limitations under the License.
*/
import { UpdateCheckStatus, UpdateStatus } from "matrix-react-sdk/src/BasePlatform";
import dis from 'matrix-react-sdk/src/dispatcher/dispatcher';
import { _t } from 'matrix-react-sdk/src/languageHandler';
import dis from "matrix-react-sdk/src/dispatcher/dispatcher";
import { _t } from "matrix-react-sdk/src/languageHandler";
import { hideToast as hideUpdateToast, showToast as showUpdateToast } from "matrix-react-sdk/src/toasts/UpdateToast";
import { Action } from "matrix-react-sdk/src/dispatcher/actions";
import { CheckUpdatesPayload } from 'matrix-react-sdk/src/dispatcher/payloads/CheckUpdatesPayload';
import UAParser from 'ua-parser-js';
import { CheckUpdatesPayload } from "matrix-react-sdk/src/dispatcher/payloads/CheckUpdatesPayload";
import UAParser from "ua-parser-js";
import { logger } from "matrix-js-sdk/src/logger";
import VectorBasePlatform from './VectorBasePlatform';
import VectorBasePlatform from "./VectorBasePlatform";
import { parseQs } from "../url_utils";
const POKE_RATE_MS = 10 * 60 * 1000; // 10 min
@ -43,13 +43,13 @@ export default class WebPlatform extends VectorBasePlatform {
public constructor() {
super();
// Register service worker if available on this platform
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('sw.js');
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("sw.js");
}
}
public getHumanReadableName(): string {
return 'Web Platform'; // no translation required: only used for analytics
return "Web Platform"; // no translation required: only used for analytics
}
/**
@ -65,7 +65,7 @@ export default class WebPlatform extends VectorBasePlatform {
* to display notifications. Otherwise false.
*/
public maySendNotifications(): boolean {
return window.Notification.permission === 'granted';
return window.Notification.permission === "granted";
}
/**
@ -79,7 +79,7 @@ export default class WebPlatform extends VectorBasePlatform {
// annoyingly, the latest spec says this returns a
// promise, but this is only supported in Chrome 46
// and Firefox 47, so adapt the callback API.
return new Promise(function(resolve) {
return new Promise(function (resolve) {
window.Notification.requestPermission((result) => {
resolve(result);
});
@ -142,7 +142,8 @@ export default class WebPlatform extends VectorBasePlatform {
showUpdate: (currentVersion: string, mostRecentVersion: string) => void,
showNoUpdate?: () => void,
): Promise<UpdateStatus> => {
return this.getMostRecentVersion().then((mostRecentVersion) => {
return this.getMostRecentVersion().then(
(mostRecentVersion) => {
const currentVersion = getNormalizedAppVersion(process.env.VERSION);
if (currentVersion !== mostRecentVersion) {
@ -159,13 +160,15 @@ export default class WebPlatform extends VectorBasePlatform {
}
return { status: UpdateCheckStatus.NotAvailable };
}, (err) => {
},
(err) => {
logger.error("Failed to poll for update", err);
return {
status: UpdateCheckStatus.Error,
detail: err.message || err.status ? err.status.toString() : 'Unknown Error',
detail: err.message || err.status ? err.status.toString() : "Unknown Error",
};
});
},
);
};
public startUpdateCheck(): void {
@ -197,7 +200,7 @@ export default class WebPlatform extends VectorBasePlatform {
let osName = ua.getOS().name || "unknown OS";
// Stylise the value from the parser to match Apple's current branding.
if (osName === "Mac OS") osName = "macOS";
return _t('%(appName)s: %(browserName)s on %(osName)s', {
return _t("%(appName)s: %(browserName)s on %(osName)s", {
appName,
browserName,
osName,

31
src/vector/rageshakesetup.ts
View file

@ -33,22 +33,26 @@ import { logger } from "matrix-js-sdk/src/logger";
export function initRageshake(): Promise<void> {
// we manually check persistence for rageshakes ourselves
const prom = rageshake.init(/*setUpPersistence=*/false);
prom.then(() => {
const prom = rageshake.init(/*setUpPersistence=*/ false);
prom.then(
() => {
logger.log("Initialised rageshake.");
logger.log("To fix line numbers in Chrome: " +
"Meatball menu → Settings → Ignore list → Add /rageshake\\.js$");
logger.log(
"To fix line numbers in Chrome: " + "Meatball menu → Settings → Ignore list → Add /rageshake\\.js$",
);
window.addEventListener('beforeunload', () => {
logger.log('element-web closing');
window.addEventListener("beforeunload", () => {
logger.log("element-web closing");
// try to flush the logs to indexeddb
rageshake.flush();
});
rageshake.cleanup();
}, (err) => {
},
(err) => {
logger.error("Failed to initialise rageshake: " + err);
});
},
);
return prom;
}
@ -56,7 +60,7 @@ export function initRageshakeStore(): Promise<void> {
return rageshake.tryInitStorage();
}
window.mxSendRageshake = function(text: string, withLogs?: boolean): void {
window.mxSendRageshake = function (text: string, withLogs?: boolean): void {
const url = SdkConfig.get().bug_report_endpoint_url;
if (!url) {
logger.error("Cannot send a rageshake - no bug_report_endpoint_url configured");
@ -72,9 +76,12 @@ window.mxSendRageshake = function(text: string, withLogs?: boolean): void {
userText: text,
sendLogs: withLogs,
progressCallback: logger.log.bind(console),
}).then(() => {
}).then(
() => {
logger.log("Bug report sent!");
}, (err) => {
},
(err) => {
logger.error(err);
});
},
);
};

9
src/vector/routing.ts
View file

@ -24,7 +24,7 @@ import { parseQsFromFragment } from "./url_utils";
let lastLocationHashSet: string = null;
export function getScreenFromLocation(location: Location): { screen: string, params: QueryDict } {
export function getScreenFromLocation(location: Location): { screen: string; params: QueryDict } {
const fragparts = parseQsFromFragment(location);
return {
screen: fragparts.location.substring(1),
@ -54,11 +54,12 @@ function onHashChange(): void {
// so a web page can update the URL bar appropriately.
export function onNewScreen(screen: string, replaceLast = false): void {
logger.log("newscreen " + screen);
const hash = '#/' + screen;
const hash = "#/" + screen;
lastLocationHashSet = hash;
// if the new hash is a substring of the old one then we are stripping fields e.g `via` so replace history
if (screen.startsWith("room/") &&
if (
screen.startsWith("room/") &&
window.location.hash.includes("/$") === hash.includes("/$") && // only if both did or didn't contain event link
window.location.hash.startsWith(hash)
) {
@ -73,5 +74,5 @@ export function onNewScreen(screen: string, replaceLast = false): void {
}
export function init(): void {
window.addEventListener('hashchange', onHashChange);
window.addEventListener("hashchange", onHashChange);
}

606
src/vector/static/incompatible-browser.html
View file

File diff suppressed because one or more lines are too long

61
src/vector/static/unable-to-load.html
View file

@ -1,11 +1,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>
<style type="text/css">
/* By default, hide the custom IS stuff - enabled in JS */
#custom_is, #is_url {
#custom_is,
#is_url {
display: none;
}
@ -17,7 +16,8 @@
background: #f9fafb;
max-width: 680px;
margin: auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.mx_Button {
@ -27,7 +27,7 @@
margin-left: 4px;
margin-right: 4px;
min-width: 80px;
background-color: #03B381;
background-color: #03b381;
color: #fff;
cursor: pointer;
padding: 12px 22px;
@ -44,7 +44,7 @@
}
.mx_HomePage_header {
color: #2E2F32;
color: #2e2f32;
display: flex;
align-items: center;
justify-content: center;
@ -72,7 +72,7 @@
}
.mx_HomePage_container {
display: block ! important;
display: block !important;
margin: 10px 20px;
}
@ -137,24 +137,42 @@
}
</style>
<meta name="apple-itunes-app" content="app-id=id1083446067">
<meta name="apple-itunes-app" content="app-id=id1083446067" />
</head>
<body>
<div class="mx_HomePage_errorContainer">
<div class="mx_HomePage_errorContainer">
<!-- populated by JS if needed -->
</div>
</div>
<div class="mx_HomePage_container">
<div class="mx_HomePage_container">
<div class="mx_HomePage_header">
<span class="mx_HomePage_logo">
<svg width="34" height="42" viewBox="0 0 34 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.08 8.68C13.08 7.75216 13.8321 7 14.76 7C20.9456 7 25.96 12.0144 25.96 18.2C25.96 19.1278 25.2078 19.88 24.28 19.88C23.3521 19.88 22.6 19.1278 22.6 18.2C22.6 13.8701 19.0899 10.36 14.76 10.36C13.8321 10.36 13.08 9.60784 13.08 8.68Z" fill="#0DBD8B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.92 33.32C20.92 34.2478 20.1679 35 19.24 35C13.0544 35 8.04001 29.9856 8.04001 23.8C8.04001 22.8722 8.79217 22.12 9.72001 22.12C10.6478 22.12 11.4 22.8722 11.4 23.8C11.4 28.1299 14.9101 31.64 19.24 31.64C20.1679 31.64 20.92 32.3922 20.92 33.32Z" fill="#0DBD8B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.68 24.9199C3.75216 24.9199 3 24.1678 3 23.2399C3 17.0543 8.01441 12.0399 14.2 12.0399C15.1278 12.0399 15.88 12.7921 15.88 13.7199C15.88 14.6478 15.1278 15.3999 14.2 15.3999C9.87009 15.3999 6.36 18.91 6.36 23.2399C6.36 24.1678 5.60784 24.9199 4.68 24.9199Z" fill="#0DBD8B"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M29.32 17.0801C30.2478 17.0801 31 17.8322 31 18.7601C31 24.9457 25.9856 29.9601 19.8 29.9601C18.8722 29.9601 18.12 29.2079 18.12 28.2801C18.12 27.3522 18.8722 26.6001 19.8 26.6001C24.1299 26.6001 27.64 23.09 27.64 18.7601C27.64 17.8322 28.3922 17.0801 29.32 17.0801Z" fill="#0DBD8B"/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M13.08 8.68C13.08 7.75216 13.8321 7 14.76 7C20.9456 7 25.96 12.0144 25.96 18.2C25.96 19.1278 25.2078 19.88 24.28 19.88C23.3521 19.88 22.6 19.1278 22.6 18.2C22.6 13.8701 19.0899 10.36 14.76 10.36C13.8321 10.36 13.08 9.60784 13.08 8.68Z"
fill="#0DBD8B"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M20.92 33.32C20.92 34.2478 20.1679 35 19.24 35C13.0544 35 8.04001 29.9856 8.04001 23.8C8.04001 22.8722 8.79217 22.12 9.72001 22.12C10.6478 22.12 11.4 22.8722 11.4 23.8C11.4 28.1299 14.9101 31.64 19.24 31.64C20.1679 31.64 20.92 32.3922 20.92 33.32Z"
fill="#0DBD8B"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M4.68 24.9199C3.75216 24.9199 3 24.1678 3 23.2399C3 17.0543 8.01441 12.0399 14.2 12.0399C15.1278 12.0399 15.88 12.7921 15.88 13.7199C15.88 14.6478 15.1278 15.3999 14.2 15.3999C9.87009 15.3999 6.36 18.91 6.36 23.2399C6.36 24.1678 5.60784 24.9199 4.68 24.9199Z"
fill="#0DBD8B"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M29.32 17.0801C30.2478 17.0801 31 17.8322 31 18.7601C31 24.9457 25.9856 29.9601 19.8 29.9601C18.8722 29.9601 18.12 29.2079 18.12 28.2801C18.12 27.3522 18.8722 26.6001 19.8 26.6001C24.1299 26.6001 27.64 23.09 27.64 18.7601C27.64 17.8322 28.3922 17.0801 29.32 17.0801Z"
fill="#0DBD8B"
/>
</svg>
</span>
<h1>Unable to load</h1>
@ -169,11 +187,8 @@
</div>
<div class="mx_HomePage_row mx_Center mx_Spacer">
<p class="mx_Spacer">
<a href="https://element.io" target="_blank" class="mx_FooterLink">
Go to element.io
</a>
<a href="https://element.io" target="_blank" class="mx_FooterLink"> Go to element.io </a>
</p>
</div>
</div>
</div>
</body>

4
src/vector/url_utils.ts
View file

@ -19,7 +19,7 @@ import { QueryDict, decodeParams } from "matrix-js-sdk/src/utils";
// We want to support some name / value pairs in the fragment
// so we're re-using query string like format
//
export function parseQsFromFragment(location: Location): { location: string, params: QueryDict } {
export function parseQsFromFragment(location: Location): { location: string; params: QueryDict } {
// if we have a fragment, it will start with '#', which we need to drop.
// (if we don't, this will return '').
const fragment = location.hash.substring(1);
@ -27,7 +27,7 @@ export function parseQsFromFragment(location: Location): { location: string, par
// our fragment may contain a query-param-like section. we need to fish
// this out *before* URI-decoding because the params may contain ? and &
// characters which are only URI-encoded once.
const hashparts = fragment.split('?');
const hashparts = fragment.split("?");
const result = {
location: decodeURIComponent(hashparts[0]),

372
test/app-tests/loading-test.tsx
View file

@ -18,27 +18,27 @@ limitations under the License.
/* loading.js: test the myriad paths we have for loading the application */
import "fake-indexeddb/auto";
import React from 'react';
import React from "react";
import { render, screen, fireEvent, waitFor, RenderResult, waitForElementToBeRemoved } from "@testing-library/react";
import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg';
import { MatrixClientPeg } from 'matrix-react-sdk/src/MatrixClientPeg';
import MatrixChat from 'matrix-react-sdk/src/components/structures/MatrixChat';
import dis from 'matrix-react-sdk/src/dispatcher/dispatcher';
import MockHttpBackend from 'matrix-mock-request';
import PlatformPeg from "matrix-react-sdk/src/PlatformPeg";
import { MatrixClientPeg } from "matrix-react-sdk/src/MatrixClientPeg";
import MatrixChat from "matrix-react-sdk/src/components/structures/MatrixChat";
import dis from "matrix-react-sdk/src/dispatcher/dispatcher";
import MockHttpBackend from "matrix-mock-request";
import { makeType } from "matrix-react-sdk/src/utils/TypeUtils";
import { ValidatedServerConfig } from 'matrix-react-sdk/src/utils/ValidatedServerConfig';
import { ValidatedServerConfig } from "matrix-react-sdk/src/utils/ValidatedServerConfig";
import { IndexedDBCryptoStore } from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store";
import { QueryDict, sleep } from "matrix-js-sdk/src/utils";
import "../jest-mocks";
import WebPlatform from '../../src/vector/platform/WebPlatform';
import { parseQs, parseQsFromFragment } from '../../src/vector/url_utils';
import WebPlatform from "../../src/vector/platform/WebPlatform";
import { parseQs, parseQsFromFragment } from "../../src/vector/url_utils";
import { cleanLocalstorage, deleteIndexedDB } from "../test-utils";
const DEFAULT_HS_URL = 'http://my_server';
const DEFAULT_IS_URL = 'http://my_is';
const DEFAULT_HS_URL = "http://my_server";
const DEFAULT_IS_URL = "http://my_is";
describe('loading:', function() {
describe("loading:", function () {
let parentDiv;
let httpBackend;
@ -51,10 +51,10 @@ describe('loading:', function() {
// a promise which resolves when the MatrixChat calls onTokenLoginCompleted
let tokenLoginCompletePromise;
beforeEach(function() {
beforeEach(function () {
httpBackend = new MockHttpBackend();
window.fetch = httpBackend.fetchFn;
parentDiv = document.createElement('div');
parentDiv = document.createElement("div");
// uncomment this to actually add the div to the UI, to help with
// debugging (but slow things down)
@ -64,17 +64,14 @@ describe('loading:', function() {
matrixChat = null;
});
afterEach(async function() {
afterEach(async function () {
console.log(`${Date.now()}: loading: afterEach`);
matrixChat?.unmount();
// unmounting should have cleared the MatrixClientPeg
expect(MatrixClientPeg.get()).toBe(null);
// clear the indexeddbs so we can start from a clean slate next time.
await Promise.all([
deleteIndexedDB('matrix-js-sdk:crypto'),
deleteIndexedDB('matrix-js-sdk:riot-web-sync'),
]);
await Promise.all([deleteIndexedDB("matrix-js-sdk:crypto"), deleteIndexedDB("matrix-js-sdk:riot-web-sync")]);
cleanLocalstorage();
console.log(`${Date.now()}: loading: afterEach complete`);
});
@ -92,19 +89,21 @@ describe('loading:', function() {
windowLocation = {
search: queryString,
hash: uriFragment,
toString: function(): string { return this.search + this.hash; },
toString: function (): string {
return this.search + this.hash;
},
};
function onNewScreen(screen): void {
console.log(Date.now() + " newscreen "+screen);
const hash = '#/' + screen;
console.log(Date.now() + " newscreen " + screen);
const hash = "#/" + screen;
windowLocation.hash = hash;
console.log(Date.now() + " browser URI now "+ windowLocation);
console.log(Date.now() + " browser URI now " + windowLocation);
}
// Parse the given window.location and return parameters that can be used when calling
// MatrixChat.showScreen(screen, params)
function getScreenFromLocation(location): { screen: string, params: QueryDict } {
function getScreenFromLocation(location): { screen: string; params: QueryDict } {
const fragparts = parseQsFromFragment(location);
return {
screen: fragparts.location.substring(1),
@ -114,7 +113,8 @@ describe('loading:', function() {
const fragParts = parseQsFromFragment(windowLocation);
const config = Object.assign({
const config = Object.assign(
{
default_hs_url: DEFAULT_HS_URL,
default_is_url: DEFAULT_IS_URL,
validated_server_config: makeType(ValidatedServerConfig, {
@ -124,15 +124,17 @@ describe('loading:', function() {
isUrl: DEFAULT_IS_URL,
}),
embeddedPages: {
homeUrl: 'data:text/html;charset=utf-8;base64,PGh0bWw+PC9odG1sPg==',
homeUrl: "data:text/html;charset=utf-8;base64,PGh0bWw+PC9odG1sPg==",
},
}, opts.config || {});
},
opts.config || {},
);
PlatformPeg.set(new WebPlatform());
const params = parseQs(windowLocation);
tokenLoginCompletePromise = new Promise<void>(resolve => {
tokenLoginCompletePromise = new Promise<void>((resolve) => {
matrixChat = render(
<MatrixChat
onNewScreen={onNewScreen}
@ -143,8 +145,11 @@ describe('loading:', function() {
enableGuest={true}
onTokenLoginCompleted={resolve}
initialScreenAfterLogin={getScreenFromLocation(windowLocation)}
makeRegistrationUrl={(): string => {throw new Error('Not implemented');}}
/>, parentDiv,
makeRegistrationUrl={(): string => {
throw new Error("Not implemented");
}}
/>,
parentDiv,
);
});
}
@ -155,21 +160,23 @@ describe('loading:', function() {
// returns a promise resolving to the received request
async function expectAndAwaitSync(opts?): Promise<any> {
let syncRequest = null;
httpBackend.when('GET', '/_matrix/client/versions')
.respond(200, {
"versions": ["r0.3.0"],
"unstable_features": {
httpBackend.when("GET", "/_matrix/client/versions").respond(200, {
versions: ["r0.3.0"],
unstable_features: {
"m.lazy_load_members": true,
},
});
const isGuest = opts && opts.isGuest;
if (!isGuest) {
// the call to create the LL filter
httpBackend.when('POST', '/filter').respond(200, { filter_id: 'llfid' });
httpBackend.when('GET', '/pushrules').respond(200, {});
httpBackend.when("POST", "/filter").respond(200, { filter_id: "llfid" });
httpBackend.when("GET", "/pushrules").respond(200, {});
}
httpBackend.when('GET', '/sync')
.check((r) => {syncRequest = r;})
httpBackend
.when("GET", "/sync")
.check((r) => {
syncRequest = r;
})
.respond(200, {});
for (let attempts = 10; attempts > 0; attempts--) {
@ -182,29 +189,35 @@ describe('loading:', function() {
throw new Error("Gave up waiting for /sync");
}
describe("Clean load with no stored credentials:", function() {
it('gives a welcome page by default', function() {
describe("Clean load with no stored credentials:", function () {
it("gives a welcome page by default", function () {
loadApp();
return sleep(1).then(async () => {
return sleep(1)
.then(async () => {
// at this point, we're trying to do a guest registration;
// we expect a spinner
await assertAtLoadingSpinner();
httpBackend.when('POST', '/register').check(function(req) {
expect(req.queryParams.kind).toEqual('guest');
}).respond(403, "Guest access is disabled");
httpBackend
.when("POST", "/register")
.check(function (req) {
expect(req.queryParams.kind).toEqual("guest");
})
.respond(403, "Guest access is disabled");
return httpBackend.flush();
}).then(() => {
})
.then(() => {
// Wait for another trip around the event loop for the UI to update
return awaitWelcomeComponent(matrixChat);
}).then(() => {
})
.then(() => {
return waitFor(() => expect(windowLocation.hash).toEqual("#/welcome"));
});
});
it('should follow the original link after successful login', function() {
it("should follow the original link after successful login", function () {
loadApp({
uriFragment: "#/room/!room:id",
});
@ -213,39 +226,48 @@ describe('loading:', function() {
httpBackend.when("GET", "/versions").respond(200, { versions: ["r0.4.0"] });
httpBackend.when("GET", "/api/v1").respond(200, {});
return sleep(1).then(async () => {
return sleep(1)
.then(async () => {
// at this point, we're trying to do a guest registration;
// we expect a spinner
await assertAtLoadingSpinner();
httpBackend.when('POST', '/register').check(function(req) {
expect(req.queryParams.kind).toEqual('guest');
}).respond(403, "Guest access is disabled");
httpBackend
.when("POST", "/register")
.check(function (req) {
expect(req.queryParams.kind).toEqual("guest");
})
.respond(403, "Guest access is disabled");
return httpBackend.flush();
}).then(() => {
})
.then(() => {
// Wait for another trip around the event loop for the UI to update
return sleep(10);
}).then(() => {
})
.then(() => {
return moveFromWelcomeToLogin(matrixChat);
}).then(() => {
})
.then(() => {
return completeLogin(matrixChat);
}).then(() => {
})
.then(() => {
// once the sync completes, we should have a room view
return awaitRoomView(matrixChat);
}).then(() => {
})
.then(() => {
httpBackend.verifyNoOutstandingExpectation();
expect(windowLocation.hash).toEqual("#/room/!room:id");
// and the localstorage should have been updated
expect(localStorage.getItem('mx_user_id')).toEqual('@user:id');
expect(localStorage.getItem('mx_access_token')).toEqual('access_token');
expect(localStorage.getItem('mx_hs_url')).toEqual(DEFAULT_HS_URL);
expect(localStorage.getItem('mx_is_url')).toEqual(DEFAULT_IS_URL);
expect(localStorage.getItem("mx_user_id")).toEqual("@user:id");
expect(localStorage.getItem("mx_access_token")).toEqual("access_token");
expect(localStorage.getItem("mx_hs_url")).toEqual(DEFAULT_HS_URL);
expect(localStorage.getItem("mx_is_url")).toEqual(DEFAULT_IS_URL);
});
});
it.skip('should not register as a guest when using a #/login link', function() {
it.skip("should not register as a guest when using a #/login link", function () {
loadApp({
uriFragment: "#/login",
});
@ -254,7 +276,8 @@ describe('loading:', function() {
httpBackend.when("GET", "/versions").respond(200, { versions: ["r0.4.0"] });
httpBackend.when("GET", "/api/v1").respond(200, {});
return awaitLoginComponent(matrixChat).then(async () => {
return awaitLoginComponent(matrixChat)
.then(async () => {
await waitForElementToBeRemoved(() => screen.queryAllByLabelText("Loading..."));
// we expect a single <Login> component
await screen.findByRole("main");
@ -263,28 +286,25 @@ describe('loading:', function() {
// the only outstanding request should be a GET /login
// (in particular there should be no /register request for
// guest registration).
const allowedRequests = [
"/_matrix/client/r0/login",
"/versions",
"/api/v1",
];
const allowedRequests = ["/_matrix/client/r0/login", "/versions", "/api/v1"];
for (const req of httpBackend.requests) {
if (req.method === 'GET' && allowedRequests.find(p => req.path.endsWith(p))) {
if (req.method === "GET" && allowedRequests.find((p) => req.path.endsWith(p))) {
continue;
}
throw new Error(`Unexpected HTTP request to ${req}`);
}
return completeLogin(matrixChat);
}).then(() => {
})
.then(() => {
expect(matrixChat.container.querySelector(".mx_HomePage")).toBeTruthy();
expect(windowLocation.hash).toEqual("#/home");
});
});
});
describe("MatrixClient rehydrated from stored credentials:", function() {
beforeEach(async function() {
describe("MatrixClient rehydrated from stored credentials:", function () {
beforeEach(async function () {
localStorage.setItem("mx_hs_url", "http://localhost");
localStorage.setItem("mx_is_url", "http://localhost");
localStorage.setItem("mx_access_token", "access_token");
@ -292,37 +312,39 @@ describe('loading:', function() {
localStorage.setItem("mx_last_room_id", "!last_room:id");
// Create a crypto store as well to satisfy storage consistency checks
const cryptoStore = new IndexedDBCryptoStore(
indexedDB,
"matrix-js-sdk:crypto",
);
const cryptoStore = new IndexedDBCryptoStore(indexedDB, "matrix-js-sdk:crypto");
await cryptoStore.startup();
});
it('shows the last known room by default', function() {
it("shows the last known room by default", function () {
loadApp();
return awaitLoggedIn(matrixChat).then(() => {
return awaitLoggedIn(matrixChat)
.then(() => {
// we are logged in - let the sync complete
return expectAndAwaitSync();
}).then(() => {
})
.then(() => {
// once the sync completes, we should have a room view
return awaitRoomView(matrixChat);
}).then(() => {
})
.then(() => {
httpBackend.verifyNoOutstandingExpectation();
expect(windowLocation.hash).toEqual("#/room/!last_room:id");
});
});
it('shows a home page by default if we have no joined rooms', function() {
it("shows a home page by default if we have no joined rooms", function () {
localStorage.removeItem("mx_last_room_id");
loadApp();
return awaitLoggedIn(matrixChat).then(() => {
return awaitLoggedIn(matrixChat)
.then(() => {
// we are logged in - let the sync complete
return expectAndAwaitSync();
}).then(() => {
})
.then(() => {
// once the sync completes, we should have a home page
httpBackend.verifyNoOutstandingExpectation();
expect(matrixChat.container.querySelector(".mx_HomePage")).toBeTruthy();
@ -330,25 +352,28 @@ describe('loading:', function() {
});
});
it('shows a room view if we followed a room link', function() {
it("shows a room view if we followed a room link", function () {
loadApp({
uriFragment: "#/room/!room:id",
});
return awaitLoggedIn(matrixChat).then(() => {
return awaitLoggedIn(matrixChat)
.then(() => {
// we are logged in - let the sync complete
return expectAndAwaitSync();
}).then(() => {
})
.then(() => {
// once the sync completes, we should have a room view
return awaitRoomView(matrixChat);
}).then(() => {
})
.then(() => {
httpBackend.verifyNoOutstandingExpectation();
expect(windowLocation.hash).toEqual("#/room/!room:id");
});
});
describe('/#/login link:', function() {
beforeEach(function() {
describe("/#/login link:", function () {
beforeEach(function () {
loadApp({
uriFragment: "#/login",
});
@ -357,7 +382,7 @@ describe('loading:', function() {
return expectAndAwaitSync();
});
it('does not show a login view', async function() {
it("does not show a login view", async function () {
await awaitRoomView(matrixChat);
await screen.findByLabelText("Spaces");
@ -366,29 +391,36 @@ describe('loading:', function() {
});
});
describe('Guest auto-registration:', function() {
it('shows a welcome page by default', function() {
describe("Guest auto-registration:", function () {
it("shows a welcome page by default", function () {
loadApp();
return sleep(1).then(async () => {
return sleep(1)
.then(async () => {
// at this point, we're trying to do a guest registration;
// we expect a spinner
await assertAtLoadingSpinner();
httpBackend.when('POST', '/register').check(function(req) {
expect(req.queryParams.kind).toEqual('guest');
}).respond(200, {
httpBackend
.when("POST", "/register")
.check(function (req) {
expect(req.queryParams.kind).toEqual("guest");
})
.respond(200, {
user_id: "@guest:localhost",
access_token: "secret_token",
});
return httpBackend.flush();
}).then(() => {
})
.then(() => {
return awaitLoggedIn(matrixChat);
}).then(() => {
})
.then(() => {
// we are logged in - let the sync complete
return expectAndAwaitSync({ isGuest: true });
}).then(() => {
})
.then(() => {
// once the sync completes, we should have a welcome page
httpBackend.verifyNoOutstandingExpectation();
expect(matrixChat.container.querySelector(".mx_Welcome")).toBeTruthy();
@ -396,28 +428,35 @@ describe('loading:', function() {
});
});
it('uses the default homeserver to register with', function() {
it("uses the default homeserver to register with", function () {
loadApp();
return sleep(1).then(async () => {
return sleep(1)
.then(async () => {
// at this point, we're trying to do a guest registration;
// we expect a spinner
await assertAtLoadingSpinner();
httpBackend.when('POST', '/register').check(function(req) {
httpBackend
.when("POST", "/register")
.check(function (req) {
expect(req.path.startsWith(DEFAULT_HS_URL)).toBe(true);
expect(req.queryParams.kind).toEqual('guest');
}).respond(200, {
expect(req.queryParams.kind).toEqual("guest");
})
.respond(200, {
user_id: "@guest:localhost",
access_token: "secret_token",
});
return httpBackend.flush();
}).then(() => {
})
.then(() => {
return awaitLoggedIn(matrixChat);
}).then(() => {
})
.then(() => {
return expectAndAwaitSync({ isGuest: true });
}).then((req) => {
})
.then((req) => {
expect(req.path.startsWith(DEFAULT_HS_URL)).toBe(true);
// once the sync completes, we should have a welcome page
@ -429,54 +468,69 @@ describe('loading:', function() {
});
});
it('shows a room view if we followed a room link', function() {
it("shows a room view if we followed a room link", function () {
loadApp({
uriFragment: "#/room/!room:id",
});
return sleep(1).then(async () => {
return sleep(1)
.then(async () => {
// at this point, we're trying to do a guest registration;
// we expect a spinner
await assertAtLoadingSpinner();
httpBackend.when('POST', '/register').check(function(req) {
expect(req.queryParams.kind).toEqual('guest');
}).respond(200, {
httpBackend
.when("POST", "/register")
.check(function (req) {
expect(req.queryParams.kind).toEqual("guest");
})
.respond(200, {
user_id: "@guest:localhost",
access_token: "secret_token",
});
return httpBackend.flush();
}).then(() => {
})
.then(() => {
return awaitLoggedIn(matrixChat);
}).then(() => {
})
.then(() => {
return expectAndAwaitSync({ isGuest: true });
}).then(() => {
})
.then(() => {
// once the sync completes, we should have a room view
return awaitRoomView(matrixChat);
}).then(() => {
})
.then(() => {
httpBackend.verifyNoOutstandingExpectation();
expect(windowLocation.hash).toEqual("#/room/!room:id");
});
});
describe('Login as user', function() {
beforeEach(function() {
describe("Login as user", function () {
beforeEach(function () {
// first we have to load the homepage
loadApp();
httpBackend.when('POST', '/register').check(function(req) {
expect(req.queryParams.kind).toEqual('guest');
}).respond(200, {
httpBackend
.when("POST", "/register")
.check(function (req) {
expect(req.queryParams.kind).toEqual("guest");
})
.respond(200, {
user_id: "@guest:localhost",
access_token: "secret_token",
});
return httpBackend.flush().then(() => {
return httpBackend
.flush()
.then(() => {
return awaitLoggedIn(matrixChat);
}).then(() => {
})
.then(() => {
// we got a sync spinner - let the sync complete
return expectAndAwaitSync();
}).then(async () => {
})
.then(async () => {
// once the sync completes, we should have a home page
await waitFor(() => matrixChat.container.querySelector(".mx_HomePage"));
@ -489,13 +543,13 @@ describe('loading:', function() {
// for it to be shown - it's not always, due to the
// collapsing left panel
dis.dispatch({ action: 'start_login' });
dis.dispatch({ action: "start_login" });
return awaitLoginComponent(matrixChat);
});
});
it('should give us a login page', async function() {
it("should give us a login page", async function () {
// we expect a single <Login> component
await screen.findByRole("main");
screen.getAllByText("Sign in");
@ -505,43 +559,49 @@ describe('loading:', function() {
});
});
describe('Token login:', function() {
it('logs in successfully', function() {
describe("Token login:", function () {
it("logs in successfully", function () {
localStorage.setItem("mx_sso_hs_url", "https://homeserver");
localStorage.setItem("mx_sso_is_url", "https://idserver");
loadApp({
queryString: "?loginToken=secretToken",
});
return sleep(1).then(async () => {
return sleep(1)
.then(async () => {
// we expect a spinner while we're logging in
await assertAtLoadingSpinner();
httpBackend.when('POST', '/login').check(function(req) {
httpBackend
.when("POST", "/login")
.check(function (req) {
expect(req.path).toMatch(new RegExp("^https://homeserver/"));
expect(req.data.type).toEqual("m.login.token");
expect(req.data.token).toEqual("secretToken");
}).respond(200, {
})
.respond(200, {
user_id: "@user:localhost",
device_id: 'DEVICE_ID',
device_id: "DEVICE_ID",
access_token: "access_token",
});
return httpBackend.flush();
}).then(() => {
})
.then(() => {
// at this point, MatrixChat should fire onTokenLoginCompleted, which
// makes index.js reload the app. We're not going to attempt to
// simulate the reload - just check that things are left in the
// right state for the reloaded app.
return tokenLoginCompletePromise;
}).then(() => {
})
.then(() => {
// check that the localstorage has been set up in such a way that
// the reloaded app can pick up where we leave off.
expect(localStorage.getItem('mx_user_id')).toEqual('@user:localhost');
expect(localStorage.getItem('mx_access_token')).toEqual('access_token');
expect(localStorage.getItem('mx_hs_url')).toEqual('https://homeserver');
expect(localStorage.getItem('mx_is_url')).toEqual('https://idserver');
expect(localStorage.getItem("mx_user_id")).toEqual("@user:localhost");
expect(localStorage.getItem("mx_access_token")).toEqual("access_token");
expect(localStorage.getItem("mx_hs_url")).toEqual("https://homeserver");
expect(localStorage.getItem("mx_is_url")).toEqual("https://idserver");
});
});
});
@ -551,36 +611,42 @@ describe('loading:', function() {
async function completeLogin(matrixChat: RenderResult): Promise<void> {
// When we switch to the login component, it'll hit the login endpoint
// for proof of life and to get flows. We'll only give it one option.
httpBackend.when('GET', '/login')
.respond(200, { flows: [{ type: "m.login.password" }] });
httpBackend.when("GET", "/login").respond(200, { flows: [{ type: "m.login.password" }] });
httpBackend.flush(); // We already would have tried the GET /login request
// Give the component some time to finish processing the login flows before
// continuing.
await sleep(100);
httpBackend.when('POST', '/login').check(function(req) {
expect(req.data.type).toEqual('m.login.password');
expect(req.data.identifier.type).toEqual('m.id.user');
expect(req.data.identifier.user).toEqual('user');
expect(req.data.password).toEqual('pass');
}).respond(200, {
user_id: '@user:id',
device_id: 'DEVICE_ID',
access_token: 'access_token',
httpBackend
.when("POST", "/login")
.check(function (req) {
expect(req.data.type).toEqual("m.login.password");
expect(req.data.identifier.type).toEqual("m.id.user");
expect(req.data.identifier.user).toEqual("user");
expect(req.data.password).toEqual("pass");
})
.respond(200, {
user_id: "@user:id",
device_id: "DEVICE_ID",
access_token: "access_token",
});
fireEvent.change(matrixChat.container.querySelector("#mx_LoginForm_username"), { target: { value: "user" } });
fireEvent.change(matrixChat.container.querySelector("#mx_LoginForm_password"), { target: { value: "pass" } });
fireEvent.click(screen.getByText("Sign in", { selector: ".mx_Login_submit" }));
return httpBackend.flush().then(() => {
return httpBackend
.flush()
.then(() => {
// Wait for another trip around the event loop for the UI to update
return sleep(1);
}).then(() => {
})
.then(() => {
return expectAndAwaitSync().catch((e) => {
throw new Error("Never got /sync after login: did the client start?");
});
}).then(() => {
})
.then(() => {
httpBackend.verifyNoOutstandingExpectation();
});
}
@ -594,7 +660,7 @@ async function assertAtLoadingSpinner(): Promise<void> {
async function awaitLoggedIn(matrixChat: RenderResult): Promise<void> {
if (matrixChat.container.querySelector(".mx_MatrixChat_wrapper")) return; // already logged in
return new Promise(resolve => {
return new Promise((resolve) => {
const onAction = ({ action }): void => {
if (action !== "on_logged_in") {
return;
@ -621,6 +687,6 @@ async function awaitWelcomeComponent(matrixChat: RenderResult): Promise<void> {
}
function moveFromWelcomeToLogin(matrixChat: RenderResult): Promise<void> {
dis.dispatch({ action: 'start_login' });
dis.dispatch({ action: "start_login" });
return awaitLoginComponent(matrixChat);
}

4
test/jest-mocks.ts
View file

@ -15,9 +15,9 @@ limitations under the License.
*/
// https://jestjs.io/docs/en/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
Object.defineProperty(window, 'matchMedia', {
Object.defineProperty(window, "matchMedia", {
writable: true,
value: jest.fn().mockImplementation(query => ({
value: jest.fn().mockImplementation((query) => ({
matches: false,
media: query,
onchange: null,

6
test/test-utils.ts
View file

@ -34,14 +34,12 @@ export function deleteIndexedDB(dbName: string): Promise<void> {
};
req.onerror = (ev): void => {
reject(new Error(
`${Date.now()}: unable to delete indexeddb ${dbName}: ${req.error}`,
));
reject(new Error(`${Date.now()}: unable to delete indexeddb ${dbName}: ${req.error}`));
};
req.onsuccess = (): void => {
const now = Date.now();
console.log(`${now}: Removed indexeddb instance: ${dbName} in ${now-startTime} ms`);
console.log(`${now}: Removed indexeddb instance: ${dbName} in ${now - startTime} ms`);
resolve();
};
}).catch((e) => {

30
test/unit-tests/vector/getconfig-test.ts
View file

@ -20,88 +20,88 @@ import { getVectorConfig } from "../../../src/vector/getconfig";
fetchMock.config.overwriteRoutes = true;
describe('getVectorConfig()', () => {
describe("getVectorConfig()", () => {
const prevDocumentDomain = document.domain;
const elementDomain = 'app.element.io';
const elementDomain = "app.element.io";
const now = 1234567890;
const specificConfig = {
brand: 'specific',
brand: "specific",
};
const generalConfig = {
brand: 'general',
brand: "general",
};
beforeEach(() => {
document.domain = elementDomain;
// stable value for cachebuster
jest.spyOn(Date, 'now').mockReturnValue(now);
jest.spyOn(Date, "now").mockReturnValue(now);
jest.clearAllMocks();
fetchMock.mockClear();
});
afterAll(() => {
document.domain = prevDocumentDomain;
jest.spyOn(Date, 'now').mockRestore();
jest.spyOn(Date, "now").mockRestore();
});
it('requests specific config for document domain', async () => {
it("requests specific config for document domain", async () => {
fetchMock.getOnce("express:/config.app.element.io.json", specificConfig);
fetchMock.getOnce("express:/config.json", generalConfig);
await expect(getVectorConfig()).resolves.toEqual(specificConfig);
});
it('adds trailing slash to relativeLocation when not an empty string', async () => {
it("adds trailing slash to relativeLocation when not an empty string", async () => {
fetchMock.getOnce("express:../config.app.element.io.json", specificConfig);
fetchMock.getOnce("express:../config.json", generalConfig);
await expect(getVectorConfig("..")).resolves.toEqual(specificConfig);
});
it('returns general config when specific config succeeds but is empty', async () => {
it("returns general config when specific config succeeds but is empty", async () => {
fetchMock.getOnce("express:/config.app.element.io.json", {});
fetchMock.getOnce("express:/config.json", generalConfig);
await expect(getVectorConfig()).resolves.toEqual(generalConfig);
});
it('returns general config when specific config 404s', async () => {
it("returns general config when specific config 404s", async () => {
fetchMock.getOnce("express:/config.app.element.io.json", { status: 404 });
fetchMock.getOnce("express:/config.json", generalConfig);
await expect(getVectorConfig()).resolves.toEqual(generalConfig);
});
it('returns general config when specific config is fetched from a file and is empty', async () => {
it("returns general config when specific config is fetched from a file and is empty", async () => {
fetchMock.getOnce("express:/config.app.element.io.json", 0);
fetchMock.getOnce("express:/config.json", generalConfig);
await expect(getVectorConfig()).resolves.toEqual(generalConfig);
});
it('returns general config when specific config returns a non-200 status', async () => {
it("returns general config when specific config returns a non-200 status", async () => {
fetchMock.getOnce("express:/config.app.element.io.json", { status: 401 });
fetchMock.getOnce("express:/config.json", generalConfig);
await expect(getVectorConfig()).resolves.toEqual(generalConfig);
});
it('returns general config when specific config returns an error', async () => {
it("returns general config when specific config returns an error", async () => {
fetchMock.getOnce("express:/config.app.element.io.json", { throws: "err1" });
fetchMock.getOnce("express:/config.json", generalConfig);
await expect(getVectorConfig()).resolves.toEqual(generalConfig);
});
it('rejects with an error when general config rejects', async () => {
it("rejects with an error when general config rejects", async () => {
fetchMock.getOnce("express:/config.app.element.io.json", { throws: "err-specific" });
fetchMock.getOnce("express:/config.json", { throws: "err-general" });
await expect(getVectorConfig()).rejects.toBe("err-general");
});
it('rejects with an error when config is invalid JSON', async () => {
it("rejects with an error when config is invalid JSON", async () => {
fetchMock.getOnce("express:/config.app.element.io.json", { throws: "err-specific" });
fetchMock.getOnce("express:/config.json", '{"invalid": "json",}');

152
test/unit-tests/vector/platform/ElectronPlatform-test.ts
View file

@ -14,33 +14,34 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import { logger } from 'matrix-js-sdk/src/logger';
import { MatrixEvent, Room } from 'matrix-js-sdk/src/matrix';
import { UpdateCheckStatus } from 'matrix-react-sdk/src/BasePlatform';
import { Action } from 'matrix-react-sdk/src/dispatcher/actions';
import dispatcher from 'matrix-react-sdk/src/dispatcher/dispatcher';
import * as rageshake from 'matrix-react-sdk/src/rageshake/rageshake';
import { logger } from "matrix-js-sdk/src/logger";
import { MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
import { UpdateCheckStatus } from "matrix-react-sdk/src/BasePlatform";
import { Action } from "matrix-react-sdk/src/dispatcher/actions";
import dispatcher from "matrix-react-sdk/src/dispatcher/dispatcher";
import * as rageshake from "matrix-react-sdk/src/rageshake/rageshake";
import ElectronPlatform from '../../../../src/vector/platform/ElectronPlatform';
import ElectronPlatform from "../../../../src/vector/platform/ElectronPlatform";
jest.mock('matrix-react-sdk/src/rageshake/rageshake', () => ({
jest.mock("matrix-react-sdk/src/rageshake/rageshake", () => ({
flush: jest.fn(),
}));
describe('ElectronPlatform', () => {
const defaultUserAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 ' +
'(KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36';
describe("ElectronPlatform", () => {
const defaultUserAgent =
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 " +
"(KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36";
const mockElectron = {
on: jest.fn(),
send: jest.fn(),
};
const dispatchSpy = jest.spyOn(dispatcher, 'dispatch');
const dispatchFireSpy = jest.spyOn(dispatcher, 'fire');
const logSpy = jest.spyOn(logger, 'log').mockImplementation(() => {});
const dispatchSpy = jest.spyOn(dispatcher, "dispatch");
const dispatchFireSpy = jest.spyOn(dispatcher, "fire");
const logSpy = jest.spyOn(logger, "log").mockImplementation(() => {});
const userId = '@alice:server.org';
const deviceId = 'device-id';
const userId = "@alice:server.org";
const deviceId = "device-id";
window.electron = mockElectron;
beforeEach(() => {
@ -53,9 +54,9 @@ describe('ElectronPlatform', () => {
const getElectronEventHandlerCall = (eventType: string): [type: string, handler: Function] | undefined =>
mockElectron.on.mock.calls.find(([type]) => type === eventType);
it('flushes rageshake before quitting', () => {
it("flushes rageshake before quitting", () => {
new ElectronPlatform();
const [event, handler] = getElectronEventHandlerCall('before-quit');
const [event, handler] = getElectronEventHandlerCall("before-quit");
// correct event bound
expect(event).toBeTruthy();
@ -65,9 +66,9 @@ describe('ElectronPlatform', () => {
expect(rageshake.flush).toHaveBeenCalled();
});
it('dispatches view settings action on preferences event', () => {
it("dispatches view settings action on preferences event", () => {
new ElectronPlatform();
const [event, handler] = getElectronEventHandlerCall('preferences');
const [event, handler] = getElectronEventHandlerCall("preferences");
// correct event bound
expect(event).toBeTruthy();
@ -76,10 +77,10 @@ describe('ElectronPlatform', () => {
expect(dispatchFireSpy).toHaveBeenCalledWith(Action.ViewUserSettings);
});
describe('updates', () => {
it('dispatches on check updates action', () => {
describe("updates", () => {
it("dispatches on check updates action", () => {
new ElectronPlatform();
const [event, handler] = getElectronEventHandlerCall('check_updates');
const [event, handler] = getElectronEventHandlerCall("check_updates");
// correct event bound
expect(event).toBeTruthy();
@ -90,9 +91,9 @@ describe('ElectronPlatform', () => {
});
});
it('dispatches on check updates action when update not available', () => {
it("dispatches on check updates action when update not available", () => {
new ElectronPlatform();
const [, handler] = getElectronEventHandlerCall('check_updates');
const [, handler] = getElectronEventHandlerCall("check_updates");
handler({}, false);
expect(dispatchSpy).toHaveBeenCalledWith({
@ -101,26 +102,27 @@ describe('ElectronPlatform', () => {
});
});
it('starts update check', () => {
it("starts update check", () => {
const platform = new ElectronPlatform();
platform.startUpdateCheck();
expect(mockElectron.send).toHaveBeenCalledWith('check_updates');
expect(mockElectron.send).toHaveBeenCalledWith("check_updates");
});
it('installs update', () => {
it("installs update", () => {
const platform = new ElectronPlatform();
platform.installUpdate();
expect(mockElectron.send).toHaveBeenCalledWith('install_update');
expect(mockElectron.send).toHaveBeenCalledWith("install_update");
});
});
it('returns human readable name', () => {
it("returns human readable name", () => {
const platform = new ElectronPlatform();
expect(platform.getHumanReadableName()).toEqual('Electron Platform');
expect(platform.getHumanReadableName()).toEqual("Electron Platform");
});
describe("getDefaultDeviceDisplayName", () => {
it.each([[
it.each([
[
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 " +
"(KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36",
"Element Desktop: macOS",
@ -130,26 +132,12 @@ describe('ElectronPlatform', () => {
"electron/1.0.0 Chrome/53.0.2785.113 Electron/1.4.3 Safari/537.36",
"Element Desktop: Windows",
],
[
"Mozilla/5.0 (X11; Linux i686; rv:21.0) Gecko/20100101 Firefox/21.0",
"Element Desktop: Linux",
],
[
"Mozilla/5.0 (X11; FreeBSD i686; rv:21.0) Gecko/20100101 Firefox/21.0",
"Element Desktop: FreeBSD",
],
[
"Mozilla/5.0 (X11; OpenBSD i686; rv:21.0) Gecko/20100101 Firefox/21.0",
"Element Desktop: OpenBSD",
],
[
"Mozilla/5.0 (X11; SunOS i686; rv:21.0) Gecko/20100101 Firefox/21.0",
"Element Desktop: SunOS",
],
[
"custom user agent",
"Element Desktop: Unknown",
]])("%s = %s", (userAgent, result) => {
["Mozilla/5.0 (X11; Linux i686; rv:21.0) Gecko/20100101 Firefox/21.0", "Element Desktop: Linux"],
["Mozilla/5.0 (X11; FreeBSD i686; rv:21.0) Gecko/20100101 Firefox/21.0", "Element Desktop: FreeBSD"],
["Mozilla/5.0 (X11; OpenBSD i686; rv:21.0) Gecko/20100101 Firefox/21.0", "Element Desktop: OpenBSD"],
["Mozilla/5.0 (X11; SunOS i686; rv:21.0) Gecko/20100101 Firefox/21.0", "Element Desktop: SunOS"],
["custom user agent", "Element Desktop: Unknown"],
])("%s = %s", (userAgent, result) => {
delete window.navigator;
window.navigator = { userAgent } as unknown as Navigator;
const platform = new ElectronPlatform();
@ -157,119 +145,119 @@ describe('ElectronPlatform', () => {
});
});
it('returns true for needsUrlTooltips', () => {
it("returns true for needsUrlTooltips", () => {
const platform = new ElectronPlatform();
expect(platform.needsUrlTooltips()).toBe(true);
});
it('should override browser shortcuts', () => {
it("should override browser shortcuts", () => {
const platform = new ElectronPlatform();
expect(platform.overrideBrowserShortcuts()).toBe(true);
});
it('allows overriding native context menus', () => {
it("allows overriding native context menus", () => {
const platform = new ElectronPlatform();
expect(platform.allowOverridingNativeContextMenus()).toBe(true);
});
it('indicates support for desktop capturer', () => {
it("indicates support for desktop capturer", () => {
const platform = new ElectronPlatform();
expect(platform.supportsDesktopCapturer()).toBe(true);
});
it('indicates no support for jitsi screensharing', () => {
it("indicates no support for jitsi screensharing", () => {
const platform = new ElectronPlatform();
expect(platform.supportsJitsiScreensharing()).toBe(false);
});
describe('notifications', () => {
it('indicates support for notifications', () => {
describe("notifications", () => {
it("indicates support for notifications", () => {
const platform = new ElectronPlatform();
expect(platform.supportsNotifications()).toBe(true);
});
it('may send notifications', () => {
it("may send notifications", () => {
const platform = new ElectronPlatform();
expect(platform.maySendNotifications()).toBe(true);
});
it('pretends to request notification permission', async () => {
it("pretends to request notification permission", async () => {
const platform = new ElectronPlatform();
const result = await platform.requestNotificationPermission();
expect(result).toEqual('granted');
expect(result).toEqual("granted");
});
it('creates a loud notification', async () => {
it("creates a loud notification", async () => {
const platform = new ElectronPlatform();
platform.loudNotification(new MatrixEvent(), new Room('!room:server', {} as any, userId));
expect(mockElectron.send).toHaveBeenCalledWith('loudNotification');
platform.loudNotification(new MatrixEvent(), new Room("!room:server", {} as any, userId));
expect(mockElectron.send).toHaveBeenCalledWith("loudNotification");
});
it('sets notification count when count is changing', async () => {
it("sets notification count when count is changing", async () => {
const platform = new ElectronPlatform();
platform.setNotificationCount(0);
// not called because matches internal notificaiton count
expect(mockElectron.send).not.toHaveBeenCalledWith('setBadgeCount', 0);
expect(mockElectron.send).not.toHaveBeenCalledWith("setBadgeCount", 0);
platform.setNotificationCount(1);
expect(mockElectron.send).toHaveBeenCalledWith('setBadgeCount', 1);
expect(mockElectron.send).toHaveBeenCalledWith("setBadgeCount", 1);
});
});
describe('spellcheck', () => {
it('indicates support for spellcheck settings', () => {
describe("spellcheck", () => {
it("indicates support for spellcheck settings", () => {
const platform = new ElectronPlatform();
expect(platform.supportsSpellCheckSettings()).toBe(true);
});
it('gets available spellcheck languages', () => {
it("gets available spellcheck languages", () => {
const platform = new ElectronPlatform();
mockElectron.send.mockClear();
platform.getAvailableSpellCheckLanguages();
const [channel, { name }] = mockElectron.send.mock.calls[0];
expect(channel).toEqual("ipcCall");
expect(name).toEqual('getAvailableSpellCheckLanguages');
expect(name).toEqual("getAvailableSpellCheckLanguages");
});
});
describe('pickle key', () => {
it('makes correct ipc call to get pickle key', () => {
describe("pickle key", () => {
it("makes correct ipc call to get pickle key", () => {
const platform = new ElectronPlatform();
mockElectron.send.mockClear();
platform.getPickleKey(userId, deviceId);
const [, { name, args }] = mockElectron.send.mock.calls[0];
expect(name).toEqual('getPickleKey');
expect(name).toEqual("getPickleKey");
expect(args).toEqual([userId, deviceId]);
});
it('makes correct ipc call to create pickle key', () => {
it("makes correct ipc call to create pickle key", () => {
const platform = new ElectronPlatform();
mockElectron.send.mockClear();
platform.createPickleKey(userId, deviceId);
const [, { name, args }] = mockElectron.send.mock.calls[0];
expect(name).toEqual('createPickleKey');
expect(name).toEqual("createPickleKey");
expect(args).toEqual([userId, deviceId]);
});
it('makes correct ipc call to destroy pickle key', () => {
it("makes correct ipc call to destroy pickle key", () => {
const platform = new ElectronPlatform();
mockElectron.send.mockClear();
platform.destroyPickleKey(userId, deviceId);
const [, { name, args }] = mockElectron.send.mock.calls[0];
expect(name).toEqual('destroyPickleKey');
expect(name).toEqual("destroyPickleKey");
expect(args).toEqual([userId, deviceId]);
});
});
describe('versions', () => {
it('calls install update', () => {
describe("versions", () => {
it("calls install update", () => {
const platform = new ElectronPlatform();
platform.installUpdate();
expect(mockElectron.send).toHaveBeenCalledWith('install_update');
expect(mockElectron.send).toHaveBeenCalledWith("install_update");
});
});
});

4
test/unit-tests/vector/platform/PWAPlatform-test.ts
View file

@ -21,7 +21,7 @@ import WebPlatform from "../../../../src/vector/platform/WebPlatform";
jest.mock("../../../../src/vector/platform/WebPlatform");
describe('PWAPlatform', () => {
describe("PWAPlatform", () => {
beforeEach(() => {
jest.clearAllMocks();
});
@ -54,7 +54,7 @@ describe('PWAPlatform', () => {
});
it("should handle Navigator::setAppBadge rejecting gracefully", () => {
navigator.setAppBadge = jest.fn().mockRejectedValue(new Error);
navigator.setAppBadge = jest.fn().mockRejectedValue(new Error());
const platform = new PWAPlatform();
expect(() => platform.setNotificationCount(123)).not.toThrow();
});

87
test/unit-tests/vector/platform/WebPlatform-test.ts
View file

@ -15,24 +15,24 @@ limitations under the License.
*/
import fetchMock from "fetch-mock-jest";
import { UpdateCheckStatus } from 'matrix-react-sdk/src/BasePlatform';
import { MatrixClientPeg } from 'matrix-react-sdk/src/MatrixClientPeg';
import { UpdateCheckStatus } from "matrix-react-sdk/src/BasePlatform";
import { MatrixClientPeg } from "matrix-react-sdk/src/MatrixClientPeg";
import WebPlatform from '../../../../src/vector/platform/WebPlatform';
import WebPlatform from "../../../../src/vector/platform/WebPlatform";
fetchMock.config.overwriteRoutes = true;
describe('WebPlatform', () => {
describe("WebPlatform", () => {
beforeEach(() => {
jest.clearAllMocks();
});
it('returns human readable name', () => {
it("returns human readable name", () => {
const platform = new WebPlatform();
expect(platform.getHumanReadableName()).toEqual('Web Platform');
expect(platform.getHumanReadableName()).toEqual("Web Platform");
});
it('registers service worker', () => {
it("registers service worker", () => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore - mocking readonly object
navigator.serviceWorker = { register: jest.fn() };
@ -65,12 +65,14 @@ describe('WebPlatform', () => {
});
describe("getDefaultDeviceDisplayName", () => {
it.each([[
it.each([
[
"https://develop.element.io/#/room/!foo:bar",
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) " +
"Chrome/105.0.0.0 Safari/537.36",
"develop.element.io: Chrome on macOS",
]])("%s & %s = %s", (url, userAgent, result) => {
],
])("%s & %s = %s", (url, userAgent, result) => {
delete window.navigator;
window.navigator = { userAgent } as unknown as Navigator;
delete window.location;
@ -80,66 +82,66 @@ describe('WebPlatform', () => {
});
});
describe('notification support', () => {
describe("notification support", () => {
const mockNotification = {
requestPermission: jest.fn(),
permission: 'notGranted',
permission: "notGranted",
};
beforeEach(() => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
window.Notification = mockNotification;
mockNotification.permission = 'notGranted';
mockNotification.permission = "notGranted";
});
it('supportsNotifications returns false when platform does not support notifications', () => {
it("supportsNotifications returns false when platform does not support notifications", () => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
window.Notification = undefined;
expect(new WebPlatform().supportsNotifications()).toBe(false);
});
it('supportsNotifications returns true when platform supports notifications', () => {
it("supportsNotifications returns true when platform supports notifications", () => {
expect(new WebPlatform().supportsNotifications()).toBe(true);
});
it('maySendNotifications returns true when notification permissions are not granted', () => {
it("maySendNotifications returns true when notification permissions are not granted", () => {
expect(new WebPlatform().maySendNotifications()).toBe(false);
});
it('maySendNotifications returns true when notification permissions are granted', () => {
mockNotification.permission = 'granted';
it("maySendNotifications returns true when notification permissions are granted", () => {
mockNotification.permission = "granted";
expect(new WebPlatform().maySendNotifications()).toBe(true);
});
it('requests notification permissions and returns result ', async () => {
mockNotification.requestPermission.mockImplementation(callback => callback('test'));
it("requests notification permissions and returns result ", async () => {
mockNotification.requestPermission.mockImplementation((callback) => callback("test"));
const platform = new WebPlatform();
const result = await platform.requestNotificationPermission();
expect(result).toEqual('test');
expect(result).toEqual("test");
});
});
describe('app version', () => {
describe("app version", () => {
const envVersion = process.env.VERSION;
const prodVersion = '1.10.13';
const prodVersion = "1.10.13";
beforeEach(() => {
jest.spyOn(MatrixClientPeg, 'userRegisteredWithinLastHours').mockReturnValue(false);
jest.spyOn(MatrixClientPeg, "userRegisteredWithinLastHours").mockReturnValue(false);
});
afterAll(() => {
process.env.VERSION = envVersion;
});
it('should return true from canSelfUpdate()', async () => {
it("should return true from canSelfUpdate()", async () => {
const platform = new WebPlatform();
const result = await platform.canSelfUpdate();
expect(result).toBe(true);
});
it('getAppVersion returns normalized app version', async () => {
it("getAppVersion returns normalized app version", async () => {
process.env.VERSION = prodVersion;
const platform = new WebPlatform();
@ -156,9 +158,11 @@ describe('WebPlatform', () => {
expect(notSemverVersion).toEqual(`version not like semver`);
});
describe('pollForUpdate()', () => {
it('should return not available and call showNoUpdate when current version ' +
'matches most recent version', async () => {
describe("pollForUpdate()", () => {
it(
"should return not available and call showNoUpdate when current version " +
"matches most recent version",
async () => {
process.env.VERSION = prodVersion;
fetchMock.getOnce("/version", prodVersion);
const platform = new WebPlatform();
@ -170,9 +174,10 @@ describe('WebPlatform', () => {
expect(result).toEqual({ status: UpdateCheckStatus.NotAvailable });
expect(showUpdate).not.toHaveBeenCalled();
expect(showNoUpdate).toHaveBeenCalled();
});
},
);
it('should strip v prefix from versions before comparing', async () => {
it("should strip v prefix from versions before comparing", async () => {
process.env.VERSION = prodVersion;
fetchMock.getOnce("/version", `v${prodVersion}`);
const platform = new WebPlatform();
@ -187,9 +192,10 @@ describe('WebPlatform', () => {
expect(showNoUpdate).toHaveBeenCalled();
});
it('should return ready and call showUpdate when current version ' +
'differs from most recent version', async () => {
process.env.VERSION = '0.0.0'; // old version
it(
"should return ready and call showUpdate when current version " + "differs from most recent version",
async () => {
process.env.VERSION = "0.0.0"; // old version
fetchMock.getOnce("/version", prodVersion);
const platform = new WebPlatform();
@ -198,13 +204,14 @@ describe('WebPlatform', () => {
const result = await platform.pollForUpdate(showUpdate, showNoUpdate);
expect(result).toEqual({ status: UpdateCheckStatus.Ready });
expect(showUpdate).toHaveBeenCalledWith('0.0.0', prodVersion);
expect(showUpdate).toHaveBeenCalledWith("0.0.0", prodVersion);
expect(showNoUpdate).not.toHaveBeenCalled();
});
},
);
it('should return ready without showing update when user registered in last 24', async () => {
process.env.VERSION = '0.0.0'; // old version
jest.spyOn(MatrixClientPeg, 'userRegisteredWithinLastHours').mockReturnValue(true);
it("should return ready without showing update when user registered in last 24", async () => {
process.env.VERSION = "0.0.0"; // old version
jest.spyOn(MatrixClientPeg, "userRegisteredWithinLastHours").mockReturnValue(true);
fetchMock.getOnce("/version", prodVersion);
const platform = new WebPlatform();
@ -217,7 +224,7 @@ describe('WebPlatform', () => {
expect(showNoUpdate).not.toHaveBeenCalled();
});
it('should return error when version check fails', async () => {
it("should return error when version check fails", async () => {
fetchMock.getOnce("/version", { throws: "oups" });
const platform = new WebPlatform();
@ -225,7 +232,7 @@ describe('WebPlatform', () => {
const showNoUpdate = jest.fn();
const result = await platform.pollForUpdate(showUpdate, showNoUpdate);
expect(result).toEqual({ status: UpdateCheckStatus.Error, detail: 'Unknown Error' });
expect(result).toEqual({ status: UpdateCheckStatus.Error, detail: "Unknown Error" });
expect(showUpdate).not.toHaveBeenCalled();
expect(showNoUpdate).not.toHaveBeenCalled();
});

16
test/unit-tests/vector/url_utils-test.ts
View file

@ -16,7 +16,7 @@ limitations under the License.
import { parseQsFromFragment, parseQs } from "../../../src/vector/url_utils";
describe("url_utils.ts", function() {
describe("url_utils.ts", function () {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const location: Location = {
@ -24,28 +24,28 @@ describe("url_utils.ts", function() {
search: "",
};
it("parseQsFromFragment", function() {
it("parseQsFromFragment", function () {
location.hash = "/home?foo=bar";
expect(parseQsFromFragment(location)).toEqual({
location: "home",
params: {
"foo": "bar",
foo: "bar",
},
});
});
describe("parseQs", function() {
describe("parseQs", function () {
location.search = "?foo=bar";
expect(parseQs(location)).toEqual({
"foo": "bar",
foo: "bar",
});
});
describe("parseQs with arrays", function() {
describe("parseQs with arrays", function () {
location.search = "?via=s1&via=s2&via=s2&foo=bar";
expect(parseQs(location)).toEqual({
"via": ["s1", "s2", "s2"],
"foo": "bar",
via: ["s1", "s2", "s2"],
foo: "bar",
});
});
});

13
tsconfig.json
View file

@ -13,16 +13,7 @@
"outDir": "./lib",
"declaration": true,
"jsx": "react",
"lib": [
"es2019",
"dom",
"dom.iterable"
]
"lib": ["es2019", "dom", "dom.iterable"]
},
"include": [
"./src/**/*.ts",
"./src/**/*.tsx",
"./test/**/*.ts",
"./test/**/*.tsx"
]
"include": ["./src/**/*.ts", "./src/**/*.tsx", "./test/**/*.ts", "./test/**/*.tsx"]
}

12
tsconfig.module_system.json
View file

@ -4,14 +4,8 @@
"jsx": "preserve",
"declaration": false,
"outDir": "./lib/module_system",
"lib": [
"es2019"
],
"types": [
"node"
]
"lib": ["es2019"],
"types": ["node"]
},
"include": [
"./module_system/**/*.ts"
]
"include": ["./module_system/**/*.ts"]
}

252
webpack.config.js
View file

@ -1,13 +1,13 @@
/* eslint-disable quote-props */
const dotenv = require('dotenv');
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const HtmlWebpackInjectPreload = require('@principalstudio/html-webpack-inject-preload');
const dotenv = require("dotenv");
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const HtmlWebpackInjectPreload = require("@principalstudio/html-webpack-inject-preload");
const SentryCliPlugin = require("@sentry/webpack-plugin");
// Environment variables
@ -17,7 +17,7 @@ const SentryCliPlugin = require("@sentry/webpack-plugin");
dotenv.config();
let ogImageUrl = process.env.RIOT_OG_IMAGE_URL;
if (!ogImageUrl) ogImageUrl = 'https://app.element.io/themes/element/img/logos/opengraph.png';
if (!ogImageUrl) ogImageUrl = "https://app.element.io/themes/element/img/logos/opengraph.png";
if (!process.env.VERSION) {
console.warn("Unset VERSION variable - this may affect build output");
@ -38,14 +38,19 @@ const cssThemes = {
function getActiveThemes() {
// Default to `light` theme when the MATRIX_THEMES environment variable is not defined.
const theme = process.env.MATRIX_THEMES ?? 'light';
return theme.split(',').map(x => x.trim()).filter(Boolean);
const theme = process.env.MATRIX_THEMES ?? "light";
return theme
.split(",")
.map((x) => x.trim())
.filter(Boolean);
}
// See docs/customisations.md
let fileOverrides = {/* {[file: string]: string} */};
let fileOverrides = {
/* {[file: string]: string} */
};
try {
fileOverrides = require('./customisations.json');
fileOverrides = require("./customisations.json");
// stringify the output so it appears in logs correctly, as large files can sometimes get
// represented as `<Object>` which is less than helpful.
@ -59,14 +64,14 @@ function parseOverridesToReplacements(overrides) {
return new webpack.NormalModuleReplacementPlugin(
// because the input is effectively defined by the person running the build, we don't
// need to do anything special to protect against regex overrunning, etc.
new RegExp(oldPath.replace(/\//g, '[\\/\\\\]').replace(/\./g, '\\.')),
new RegExp(oldPath.replace(/\//g, "[\\/\\\\]").replace(/\./g, "\\.")),
path.resolve(__dirname, newPath),
);
});
}
const moduleReplacementPlugins = [
...parseOverridesToReplacements(require('./components.json')),
...parseOverridesToReplacements(require("./components.json")),
// Allow customisations to override the default components too
...parseOverridesToReplacements(fileOverrides),
@ -82,42 +87,42 @@ module.exports = (env, argv) => {
// process.env.CI_PACKAGE is set when yarn build is called from scripts/ci_package.sh
// (called to build nightly and develop.element.io)
const nodeEnv = argv.mode;
const devMode = nodeEnv !== 'production';
const useHMR = process.env.CSS_HOT_RELOAD === '1' && devMode;
const devMode = nodeEnv !== "production";
const useHMR = process.env.CSS_HOT_RELOAD === "1" && devMode;
const enableMinification = !devMode && !process.env.CI_PACKAGE;
const development = {};
if (devMode) {
// High quality, embedded source maps for dev builds
development['devtool'] = "eval-source-map";
development["devtool"] = "eval-source-map";
} else {
if (process.env.CI_PACKAGE) {
// High quality source maps in separate .map files which include the source. This doesn't bulk up the .js
// payload file size, which is nice for performance but also necessary to get the bundle to a small enough
// size that sentry will accept the upload.
development['devtool'] = 'source-map';
development["devtool"] = "source-map";
} else {
// High quality source maps in separate .map files which don't include the source
development['devtool'] = 'nosources-source-map';
development["devtool"] = "nosources-source-map";
}
}
// Resolve the directories for the react-sdk and js-sdk for later use. We resolve these early, so we
// don't have to call them over and over. We also resolve to the package.json instead of the src
// directory, so we don't have to rely on an index.js or similar file existing.
const reactSdkSrcDir = path.resolve(require.resolve("matrix-react-sdk/package.json"), '..', 'src');
const jsSdkSrcDir = path.resolve(require.resolve("matrix-js-sdk/package.json"), '..', 'src');
const reactSdkSrcDir = path.resolve(require.resolve("matrix-react-sdk/package.json"), "..", "src");
const jsSdkSrcDir = path.resolve(require.resolve("matrix-js-sdk/package.json"), "..", "src");
const ACTIVE_THEMES = getActiveThemes();
function getThemesImports() {
const imports = ACTIVE_THEMES.map((t) => {
return cssThemes[`theme-${ t }`].replace('./node_modules/', ''); // theme import path
return cssThemes[`theme-${t}`].replace("./node_modules/", ""); // theme import path
});
const s = JSON.stringify(ACTIVE_THEMES);
return `
window.MX_insertedThemeStylesCounter = 0;
window.MX_DEV_ACTIVE_THEMES = (${ s });
${ imports.map(i => `import("${ i }")`).join('\n') };
window.MX_DEV_ACTIVE_THEMES = (${s});
${imports.map((i) => `import("${i}")`).join("\n")};
`;
}
@ -125,17 +130,17 @@ module.exports = (env, argv) => {
...development,
node: {
// Mock out the NodeFS module: The opus decoder imports this wrongly.
fs: 'empty',
net: 'empty',
tls: 'empty',
crypto: 'empty',
fs: "empty",
net: "empty",
tls: "empty",
crypto: "empty",
},
entry: {
"bundle": "./src/vector/index.ts",
"mobileguide": "./src/vector/mobile_guide/index.ts",
"jitsi": "./src/vector/jitsi/index.ts",
"usercontent": "./node_modules/matrix-react-sdk/src/usercontent/index.ts",
bundle: "./src/vector/index.ts",
mobileguide: "./src/vector/mobile_guide/index.ts",
jitsi: "./src/vector/jitsi/index.ts",
usercontent: "./node_modules/matrix-react-sdk/src/usercontent/index.ts",
...(useHMR ? {} : cssThemes),
},
@ -146,7 +151,7 @@ module.exports = (env, argv) => {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
name: "styles",
test: /\.css$/,
enforce: true,
// Do not add `chunks: 'all'` here because you'll break the app entry point.
@ -181,26 +186,26 @@ module.exports = (env, argv) => {
// the package.json for the dependency. Instead, we rely on the package.json of each
// layer to have our custom alternate fields to load things in the right order. These are
// the defaults of webpack prepended with `matrix_src_`.
mainFields: ['matrix_src_browser', 'matrix_src_main', 'browser', 'main'],
aliasFields: ['matrix_src_browser', 'browser'],
mainFields: ["matrix_src_browser", "matrix_src_main", "browser", "main"],
aliasFields: ["matrix_src_browser", "browser"],
// We need to specify that TS can be resolved without an extension
extensions: ['.js', '.json', '.ts', '.tsx'],
extensions: [".js", ".json", ".ts", ".tsx"],
alias: {
// alias any requires to the react module to the one in our path,
// otherwise we tend to get the react source included twice when
// using `npm link` / `yarn link`.
"react": path.resolve(__dirname, 'node_modules/react'),
"react-dom": path.resolve(__dirname, 'node_modules/react-dom'),
"react": path.resolve(__dirname, "node_modules/react"),
"react-dom": path.resolve(__dirname, "node_modules/react-dom"),
// Same goes for js/react-sdk - we don't need two copies.
"matrix-js-sdk": path.resolve(__dirname, 'node_modules/matrix-js-sdk'),
"matrix-react-sdk": path.resolve(__dirname, 'node_modules/matrix-react-sdk'),
"matrix-js-sdk": path.resolve(__dirname, "node_modules/matrix-js-sdk"),
"matrix-react-sdk": path.resolve(__dirname, "node_modules/matrix-react-sdk"),
// and sanitize-html
"sanitize-html": path.resolve(__dirname, 'node_modules/sanitize-html'),
"sanitize-html": path.resolve(__dirname, "node_modules/sanitize-html"),
// Define a variable so the i18n stuff can load
"$webapp": path.resolve(__dirname, 'webapp'),
"$webapp": path.resolve(__dirname, "webapp"),
},
},
@ -222,7 +227,7 @@ module.exports = (env, argv) => {
rules: [
useHMR && {
test: /devcss\.ts$/,
loader: 'string-replace-loader',
loader: "string-replace-loader",
options: {
search: '"use theming";',
replace: getThemesImports(),
@ -236,7 +241,7 @@ module.exports = (env, argv) => {
test: /\.(ts|js)x?$/,
include: (f) => {
// our own source needs babel-ing
if (f.startsWith(path.resolve(__dirname, 'src'))) return true;
if (f.startsWith(path.resolve(__dirname, "src"))) return true;
// we use the original source files of react-sdk and js-sdk, so we need to
// run them through babel. Because the path tested is the resolved, absolute
@ -251,7 +256,7 @@ module.exports = (env, argv) => {
// not necessary anyway). So, for anything else, don't babel.
return false;
},
loader: 'babel-loader',
loader: "babel-loader",
options: {
cacheDirectory: true,
},
@ -261,18 +266,18 @@ module.exports = (env, argv) => {
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
loader: "css-loader",
options: {
importLoaders: 1,
sourceMap: true,
},
},
{
loader: 'postcss-loader',
ident: 'postcss',
loader: "postcss-loader",
ident: "postcss",
options: {
sourceMap: true,
plugins: () => [
"sourceMap": true,
"plugins": () => [
// Note that we use significantly fewer plugins on the plain
// CSS parser. If we start to parse plain CSS, we end with all
// kinds of nasty problems (like stylesheets not loading).
@ -296,9 +301,9 @@ module.exports = (env, argv) => {
// It's important that this plugin is last otherwise we end
// up with broken CSS.
require('postcss-preset-env')({ stage: 3, browsers: 'last 2 versions' }),
require("postcss-preset-env")({ stage: 3, browsers: "last 2 versions" }),
],
parser: "postcss-scss",
"parser": "postcss-scss",
"local-plugins": true,
},
},
@ -312,8 +317,9 @@ module.exports = (env, argv) => {
* of the JS/TS files.
* Should be MUCH better with webpack 5, but we're stuck to this solution for now.
*/
useHMR ? {
loader: 'style-loader',
useHMR
? {
loader: "style-loader",
/**
* If we refactor the `theme.js` in `matrix-react-sdk` a little bit,
* we could try using `lazyStyleTag` here to add and remove styles on demand,
@ -321,9 +327,8 @@ module.exports = (env, argv) => {
* at least for development purposes.
*/
options: {
insert: function insertBeforeAt(element) {
const parent = document.querySelector('head');
const parent = document.querySelector("head");
// We're in iframe
if (!window.MX_DEV_ACTIVE_THEMES) {
parent.appendChild(element);
@ -334,28 +339,30 @@ module.exports = (env, argv) => {
element.onload = () => {
element.disabled = true;
};
const theme = window.MX_DEV_ACTIVE_THEMES[window.MX_insertedThemeStylesCounter];
element.setAttribute('data-mx-theme', theme);
const theme =
window.MX_DEV_ACTIVE_THEMES[window.MX_insertedThemeStylesCounter];
element.setAttribute("data-mx-theme", theme);
window.MX_insertedThemeStylesCounter++;
parent.appendChild(element);
},
},
} : MiniCssExtractPlugin.loader,
}
: MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
loader: "css-loader",
options: {
importLoaders: 1,
sourceMap: true,
},
},
{
loader: 'postcss-loader',
ident: 'postcss',
loader: "postcss-loader",
ident: "postcss",
options: {
sourceMap: true,
plugins: () => [
"sourceMap": true,
"plugins": () => [
// Note that we use slightly different plugins for PostCSS.
require('postcss-import')(),
require("postcss-import")(),
require("postcss-mixins")(),
require("postcss-simple-vars")(),
require("postcss-nested")(),
@ -364,9 +371,9 @@ module.exports = (env, argv) => {
// It's important that this plugin is last otherwise we end
// up with broken CSS.
require('postcss-preset-env')({ stage: 3, browsers: 'last 2 versions' }),
require("postcss-preset-env")({ stage: 3, browsers: "last 2 versions" }),
],
parser: "postcss-scss",
"parser": "postcss-scss",
"local-plugins": true,
},
},
@ -382,8 +389,8 @@ module.exports = (env, argv) => {
loader: "file-loader",
type: "javascript/auto",
options: {
name: '[name].[hash:7].[ext]',
outputPath: '.',
name: "[name].[hash:7].[ext]",
outputPath: ".",
},
},
{
@ -394,8 +401,8 @@ module.exports = (env, argv) => {
type: "javascript/auto",
options: {
// We deliberately override the name so it makes sense in debugging
name: 'opus-encoderWorker.min.[hash:7].[ext]',
outputPath: '.',
name: "opus-encoderWorker.min.[hash:7].[ext]",
outputPath: ".",
},
},
{
@ -404,12 +411,13 @@ module.exports = (env, argv) => {
// however it seems to work fine for our purposes.
test: /RecorderWorklet\.ts$/,
type: "javascript/auto",
use: [ // executed last -> first, for some reason.
use: [
// executed last -> first, for some reason.
{
loader: "worklet-loader",
options: {
// Override name so we know what it is in the output.
name: 'recorder-worklet.[hash:7].js',
name: "recorder-worklet.[hash:7].js",
},
},
{
@ -426,8 +434,8 @@ module.exports = (env, argv) => {
type: "javascript/auto", // https://github.com/webpack/webpack/issues/6725
options: {
// We deliberately override the name so it makes sense in debugging
name: 'opus-decoderWorker.min.[hash:7].[ext]',
outputPath: '.',
name: "opus-decoderWorker.min.[hash:7].[ext]",
outputPath: ".",
},
},
{
@ -439,8 +447,8 @@ module.exports = (env, argv) => {
options: {
// We deliberately don't change the name because the decoderWorker has this
// hardcoded. This is here to avoid the default wasm rule from adding a hash.
name: 'decoderWorker.min.wasm',
outputPath: '.',
name: "decoderWorker.min.wasm",
outputPath: ".",
},
},
{
@ -451,8 +459,8 @@ module.exports = (env, argv) => {
type: "javascript/auto", // https://github.com/webpack/webpack/issues/6725
options: {
// We deliberately override the name so it makes sense in debugging
name: 'wave-encoderWorker.min.[hash:7].[ext]',
outputPath: '.',
name: "wave-encoderWorker.min.[hash:7].[ext]",
outputPath: ".",
},
},
{
@ -460,9 +468,9 @@ module.exports = (env, argv) => {
// element-web/webapp/i18n during build by copy-res.js
test: /\.*languages.json$/,
type: "javascript/auto",
loader: 'file-loader',
loader: "file-loader",
options: {
name: 'i18n/[name].[hash:7].[ext]',
name: "i18n/[name].[hash:7].[ext]",
},
},
{
@ -470,15 +478,15 @@ module.exports = (env, argv) => {
issuer: /\.(js|ts|jsx|tsx|html)$/,
use: [
{
loader: '@svgr/webpack',
loader: "@svgr/webpack",
options: {
namedExport: 'Icon',
namedExport: "Icon",
svgProps: {
role: 'presentation',
'aria-hidden': true,
"role": "presentation",
"aria-hidden": true,
},
// props set on the svg will override defaults
expandProps: 'end',
expandProps: "end",
svgoConfig: {
plugins: {
// generates a viewbox if missing
@ -486,21 +494,21 @@ module.exports = (env, argv) => {
},
},
esModule: false,
name: '[name].[hash:7].[ext]',
name: "[name].[hash:7].[ext]",
outputPath: getAssetOutputPath,
publicPath: function(url, resourcePath) {
publicPath: function (url, resourcePath) {
const outputPath = getAssetOutputPath(url, resourcePath);
return toPublicPath(outputPath);
},
},
},
{
loader: 'file-loader',
loader: "file-loader",
options: {
esModule: false,
name: '[name].[hash:7].[ext]',
name: "[name].[hash:7].[ext]",
outputPath: getAssetOutputPath,
publicPath: function(url, resourcePath) {
publicPath: function (url, resourcePath) {
const outputPath = getAssetOutputPath(url, resourcePath);
return toPublicPath(outputPath);
},
@ -513,12 +521,12 @@ module.exports = (env, argv) => {
issuer: /\.(pcss|scss|css)$/,
use: [
{
loader: 'file-loader',
loader: "file-loader",
options: {
esModule: false,
name: '[name].[hash:7].[ext]',
name: "[name].[hash:7].[ext]",
outputPath: getAssetOutputPath,
publicPath: function(url, resourcePath) {
publicPath: function (url, resourcePath) {
// CSS image usages end up in the `bundles/[hash]` output
// directory, so we adjust the final path to navigate up
// twice.
@ -537,12 +545,12 @@ module.exports = (env, argv) => {
{
// Assets referenced in CSS files
issuer: /\.(pcss|scss|css)$/,
loader: 'file-loader',
loader: "file-loader",
options: {
esModule: false,
name: '[name].[hash:7].[ext]',
name: "[name].[hash:7].[ext]",
outputPath: getAssetOutputPath,
publicPath: function(url, resourcePath) {
publicPath: function (url, resourcePath) {
// CSS image usages end up in the `bundles/[hash]` output
// directory, so we adjust the final path to navigate up
// twice.
@ -553,12 +561,12 @@ module.exports = (env, argv) => {
},
{
// Assets referenced in HTML and JS files
loader: 'file-loader',
loader: "file-loader",
options: {
esModule: false,
name: '[name].[hash:7].[ext]',
name: "[name].[hash:7].[ext]",
outputPath: getAssetOutputPath,
publicPath: function(url, resourcePath) {
publicPath: function (url, resourcePath) {
const outputPath = getAssetOutputPath(url, resourcePath);
return toPublicPath(outputPath);
},
@ -581,13 +589,13 @@ module.exports = (env, argv) => {
// This is the app's main entry point.
new HtmlWebpackPlugin({
template: './src/vector/index.html',
template: "./src/vector/index.html",
// we inject the links ourselves via the template, because
// HtmlWebpackPlugin will screw up our formatting like the names
// of the themes and which chunks we actually care about.
inject: false,
excludeChunks: ['mobileguide', 'usercontent', 'jitsi'],
excludeChunks: ["mobileguide", "usercontent", "jitsi"],
minify: false,
templateParameters: {
og_image_url: ogImageUrl,
@ -597,40 +605,40 @@ module.exports = (env, argv) => {
// This is the jitsi widget wrapper (embedded, so isolated stack)
new HtmlWebpackPlugin({
template: './src/vector/jitsi/index.html',
filename: 'jitsi.html',
template: "./src/vector/jitsi/index.html",
filename: "jitsi.html",
minify: false,
chunks: ['jitsi'],
chunks: ["jitsi"],
}),
// This is the mobile guide's entry point (separate for faster mobile loading)
new HtmlWebpackPlugin({
template: './src/vector/mobile_guide/index.html',
filename: 'mobile_guide/index.html',
template: "./src/vector/mobile_guide/index.html",
filename: "mobile_guide/index.html",
minify: false,
chunks: ['mobileguide'],
chunks: ["mobileguide"],
}),
// These are the static error pages for when the javascript env is *really unsupported*
new HtmlWebpackPlugin({
template: './src/vector/static/unable-to-load.html',
filename: 'static/unable-to-load.html',
template: "./src/vector/static/unable-to-load.html",
filename: "static/unable-to-load.html",
minify: false,
chunks: [],
}),
new HtmlWebpackPlugin({
template: './src/vector/static/incompatible-browser.html',
filename: 'static/incompatible-browser.html',
template: "./src/vector/static/incompatible-browser.html",
filename: "static/incompatible-browser.html",
minify: false,
chunks: [],
}),
// This is the usercontent sandbox's entry point (separate for iframing)
new HtmlWebpackPlugin({
template: './node_modules/matrix-react-sdk/src/usercontent/index.html',
filename: 'usercontent/index.html',
template: "./node_modules/matrix-react-sdk/src/usercontent/index.html",
filename: "usercontent/index.html",
minify: false,
chunks: ['usercontent'],
chunks: ["usercontent"],
}),
new HtmlWebpackInjectPreload({
@ -643,11 +651,11 @@ module.exports = (env, argv) => {
release: process.env.VERSION,
include: "./webapp/bundles",
errorHandler: (err, invokeErr, compilation) => {
compilation.warnings.push('Sentry CLI Plugin: ' + err.message);
compilation.warnings.push("Sentry CLI Plugin: " + err.message);
console.log(`::warning title=Sentry error::${err.message}`);
},
}),
new webpack.EnvironmentPlugin(['VERSION']),
new webpack.EnvironmentPlugin(["VERSION"]),
].filter(Boolean),
output: {
@ -668,13 +676,11 @@ module.exports = (env, argv) => {
// configuration for the webpack-dev-server
devServer: {
// serve unwebpacked assets from webapp.
contentBase: [
'./webapp',
],
contentBase: ["./webapp"],
// Only output errors, warnings, or new compilations.
// This hides the massive list of modules.
stats: 'minimal',
stats: "minimal",
hotOnly: true,
inline: true,
},
@ -713,5 +719,5 @@ function getAssetOutputPath(url, resourcePath) {
* @returns {string} converted path
*/
function toPublicPath(path) {
return path.replace(/\\/g, '/');
return path.replace(/\\/g, "/");
}