mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2025-10-31 00:01:23 +01:00
Code Issues Projects Releases Wiki Activity

Merge pull request #11843 from vector-im/travis/sourcemaps

Browse Source 
Fix sourcemaps by refactoring the build system
This commit is contained in:
Travis Ralston 2020-01-15 10:11:39 -07:00 committed by GitHub
commit 599b263e22
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 3984 additions and 1676 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
.babelrc
View File

@ -1,20 +1,25 @@
{
"presets": [
"react",
"es2015",
"es2016"
],
"plugins": [
[
"transform-builtin-extend",
{
"globals": ["Error"]
}
],
"transform-class-properties",
"transform-object-rest-spread",
"transform-runtime",
"add-module-exports",
"syntax-dynamic-import"
]
"sourceMaps": true,
"presets": [
["@babel/preset-env", {
"targets": {
"browsers": [
"last 2 versions"
]
}
}],
"@babel/preset-typescript",
"@babel/preset-flow",
"@babel/preset-react"
],
"plugins": [
["@babel/plugin-proposal-decorators", {"legacy": true}],
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-transform-flow-comments",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-transform-runtime"
]
}

35
.buildkite/pipeline.yaml
View File

@ -1,11 +1,40 @@
steps:
- label: ":eslint: Lint"
- label: ":eslint: JS Lint"
command:
- "yarn install"
- "yarn lint"
- "yarn lint:js"
plugins:
- docker#v3.0.1:
image: "node:10"
image: "node:12"
# This layer doesn't have a TypeScript linter. This comment is to remind TravisR to fix that.
# - label: ":eslint: TS Lint"
# command:
# - "echo '--- Install js-sdk'"
# - "./scripts/ci/install-deps.sh"
# - "yarn lint:ts"
# plugins:
# - docker#v3.0.1:
# image: "node:12"
- label: ":eslint: Types Lint"
command:
- "yarn install"
- "yarn lint:types"
plugins:
- docker#v3.0.1:
image: "node:12"
- label: "🛠 Build"
command:
- "echo '--- Fetching Dependencies'"
- "./scripts/fetch-develop.deps.sh --depth 1"
- "yarn install"
- "echo '+++ Building Project'"
- "yarn build"
plugins:
- docker#v3.0.1:
image: "node:12"
- label: ":karma: Tests"
agents:

26
.stylelintrc.js Normal file
View File

@ -0,0 +1,26 @@
// Copied from react-sdk
// TODO: Only keep one copy of this for synchronization purposes
module.exports = {
"extends": "stylelint-config-standard",
"plugins": [
"stylelint-scss",
],
"rules": {
"indentation": 4,
"comment-empty-line-before": null,
"declaration-empty-line-before": null,
"length-zero-no-unit": null,
"rule-empty-line-before": null,
"color-hex-length": null,
"max-empty-lines": null,
"number-no-trailing-zeros": null,
"number-leading-zero": null,
"selector-list-comma-newline-after": null,
"at-rule-no-unknown": null,
"no-descending-specificity": null,
"scss/at-rule-no-unknown": [true, {
// https://github.com/vector-im/riot-web/issues/10544
"ignoreAtRules": ["define-mixin"],
}],
}
};

13
karma.conf.js
View File

@ -2,7 +2,7 @@
var path = require('path');
var webpack = require('webpack');
var webpack_config = require('./webpack.config');
var wp_config = require('./webpack.config');
/*
* We use webpack to build our tests. It's a pain to have to wait for webpack
@ -20,6 +20,8 @@ var testFile = process.env.KARMA_TEST_FILE || 'test/all-tests.js';
process.env.PHANTOMJS_BIN = 'node_modules/.bin/phantomjs';
process.env.Q_DEBUG = 1;
const webpack_config = wp_config({}, {mode: "development"});
/* the webpack config is based on the real one, to (a) try to simulate the
* deployed environment as closely as possible, and (b) to avoid a shedload of
* cut-and-paste.
@ -35,12 +37,6 @@ delete webpack_config['entry'];
// make sure we're flagged as development to avoid wasting time optimising
webpack_config.mode = 'development';
// add ./test as a search path for js
webpack_config.module.rules.unshift({
test: /\.js$/, use: "babel-loader",
include: [path.resolve('./src'), path.resolve('./test')],
});
// disable parsing for sinon, because it
// tries to do voodoo with 'require' which upsets
// webpack (https://github.com/webpack/webpack/issues/304)
@ -54,8 +50,6 @@ webpack_config.resolve.modules = [
"node_modules"
];
webpack_config.devtool = 'inline-source-map';
module.exports = function (config) {
const myconfig = {
// frameworks to use
@ -64,7 +58,6 @@ module.exports = function (config) {
// list of files / patterns to load in the browser
files: [
'node_modules/babel-polyfill/browser.js',
testFile,
// make the images available via our httpd. They will be avaliable

136
package.json
View File

@ -11,62 +11,56 @@
},
"license": "Apache-2.0",
"files": [
"AUTHORS.rst",
"CONTRIBUTING.rst",
"deploy",
"docs",
"karma.conf.js",
"lib",
"release.sh",
"scripts",
"res",
"src",
"test",
"webpack.config.js"
"webpack.config.js",
"scripts",
"docs",
"release.sh",
"karma.conf.js",
"deploy",
"CHANGELOG.md",
"CONTRIBUTING.rst",
"LICENSE",
"README.md",
"AUTHORS.rst",
"package.json"
],
"style": "bundle.css",
"matrix-react-parent": "matrix-react-sdk",
"scripts": {
"reskindex": "reskindex -h src/header",
"reskindex:watch": "reskindex -h src/header -w",
"i18n": "matrix-gen-i18n",
"prunei18n": "matrix-prune-i18n",
"diff-i18n": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && yarn i18n && node scripts/compare-file.js src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json",
"postinstall": "node scripts/yarn-sub.js matrix-js-sdk install && node scripts/yarn-sub.js matrix-react-sdk install",
"reskindex": "reskindex -h src/header",
"reskindex:watch": "reskindex -h src/header -w",
"clean": "rimraf lib webapp electron_app/dist",
"build": "yarn clean && yarn build:genfiles && yarn build:compile && yarn build:types && yarn build:bundle",
"build:res": "node scripts/copy-res.js",
"build:genfiles": "yarn reskindex && yarn build:res",
"build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
"build:compile": "yarn reskindex && babel --source-maps -d lib src",
"build:compile": "babel -d lib --verbose --extensions \".ts,.js\" src",
"build:bundle": "cross-env NODE_ENV=production webpack -p --progress --bail --mode production",
"build:bundle:dev": "webpack --progress --bail --mode development",
"build:electron": "yarn clean && yarn build && yarn install:electron && electron-builder -wml --ia32 --x64",
"build:electron": "yarn build && yarn install:electron && electron-builder -wml --ia32 --x64",
"build:electron:linux": "yarn build && electron-builder -l --x64",
"build:electron:macos": "yarn build && electron-builder -m --x64",
"build:electron:windows": "yarn build && electron-builder -w --ia32 --x64",
"build:react-sdk": "node scripts/yarn-sub.js matrix-react-sdk build",
"build:js-sdk": "node scripts/yarn-sub.js matrix-js-sdk start:init",
"build": "yarn build:js-sdk && yarn build:react-sdk && yarn reskindex && yarn build:res && yarn build:bundle",
"build:dev": "yarn build:js-sdk && yarn build:react-sdk && yarn reskindex && yarn build:res && yarn build:bundle:dev",
"dist": "scripts/package.sh",
"build:types": "tsc --emitDeclarationOnly",
"install:electron": "electron-builder install-app-deps",
"electron": "yarn install:electron && electron .",
"dist": "scripts/package.sh",
"start": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n reskindex,res,riot-js \"yarn reskindex:watch\" \"yarn start:res\" \"yarn start:js\"",
"start:res": "node scripts/copy-res.js -w",
"start:js": "webpack-dev-server --host=0.0.0.0 --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js -w --progress --mode development",
"start:js:prod": "cross-env NODE_ENV=production webpack-dev-server -w --progress --mode production",
"start:js-sdk": "node scripts/yarn-sub.js matrix-js-sdk start:watch",
"start:js-sdk:prod": "cross-env NODE_ENV=production node scripts/yarn-sub.js matrix-js-sdk start:watch",
"start:react-sdk": "node scripts/yarn-sub.js matrix-react-sdk start:all",
"start:react-sdk:prod": "cross-env NODE_ENV=production node scripts/yarn-sub.js matrix-react-sdk start:all",
"start": "yarn build:js-sdk && yarn build:react-sdk && concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n js-sdk,react-sdk,reskindex,res,riot-js \"yarn start:js-sdk\" \"yarn start:react-sdk\" \"yarn reskindex:watch\" \"yarn start:res\" \"yarn start:js\"",
"start:prod": "yarn build:js-sdk && yarn build:react-sdk && concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n js-sdk,react-sdk,reskindex,res,riot-js \"yarn start:js-sdk:prod\" \"yarn start:react-sdk:prod\" \"yarn reskindex:watch\" \"yarn start:res\" \"yarn start:js:prod\"",
"lint": "eslint src/",
"lintall": "eslint src/ test/",
"clean": "rimraf lib webapp electron_app/dist",
"prepare": "yarn clean && yarn build:compile",
"test": "karma start --single-run=true --autoWatch=false --browsers VectorChromeHeadless",
"test-multi": "karma start"
"electron": "yarn build && yarn install:electron && electron .",
"lint": "yarn lint:types && yarn lint:ts && yarn lint:js && yarn lint:style",
"lint:js": "eslint src",
"lint:ts": "echo 'We don't actually have a typescript linter at this layer because tslint is being removed from our stack. Presumably your TS is fine.'",
"lint:types": "tsc --noEmit",
"lint:style": "stylelint 'res/css/**/*.scss'",
"test": "yarn build:genfiles && karma start --single-run=true --autoWatch=false --browsers VectorChromeHeadless",
"test:multi": "yarn build:genfiles && karma start"
},
"dependencies": {
"babel-polyfill": "^6.26.0",
"babel-runtime": "^6.26.0",
"browser-request": "^0.3.3",
"favico.js": "^0.3.10",
"gemini-scrollbar": "github:matrix-org/gemini-scrollbar#91e1e566",
@ -85,27 +79,32 @@
"url": "^0.11.0"
},
"devDependencies": {
"autoprefixer": "^6.6.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "^8.1.1",
"babel-loader": "^7.1.5",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-builtin-extend": "^1.1.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-preset-es2017": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"@babel/cli": "^7.7.5",
"@babel/core": "^7.7.5",
"@babel/plugin-proposal-class-properties": "^7.7.4",
"@babel/plugin-proposal-decorators": "^7.7.4",
"@babel/plugin-proposal-export-default-from": "^7.7.4",
"@babel/plugin-proposal-numeric-separator": "^7.7.4",
"@babel/plugin-proposal-object-rest-spread": "^7.7.4",
"@babel/plugin-syntax-dynamic-import": "^7.7.4",
"@babel/plugin-transform-flow-comments": "^7.7.4",
"@babel/plugin-transform-runtime": "^7.7.6",
"@babel/preset-env": "^7.7.6",
"@babel/preset-flow": "^7.7.4",
"@babel/preset-react": "^7.7.4",
"@babel/preset-typescript": "^7.7.4",
"@babel/register": "^7.7.4",
"@babel/runtime": "^7.7.6",
"@types/react": "^16.9.17",
"@types/react-dom": "^16.9.4",
"autoprefixer": "^9.7.3",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.6",
"chokidar": "^2.0.4",
"concurrently": "^4.0.1",
"cpx": "^1.3.2",
"cross-env": "^4.0.0",
"css-loader": "^2.1.0",
"cross-env": "^6.0.3",
"css-loader": "^3.3.2",
"electron-builder": "^21.2.0",
"electron-builder-squirrel-windows": "^21.2.0",
"electron-devtools-installer": "^2.2.4",
@ -119,7 +118,7 @@
"eslint-plugin-react-hooks": "^2.2.0",
"expect": "^1.16.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^3.0.1",
"file-loader": "^5.0.2",
"fs-extra": "^0.30.0",
"html-webpack-plugin": "^3.2.0",
"json-loader": "^0.5.3",
@ -135,23 +134,28 @@
"loader-utils": "^1.2.3",
"matrix-mock-request": "^1.2.3",
"matrix-react-test-utils": "^0.2.2",
"mini-css-extract-plugin": "^0.8.0",
"minimist": "^1.2.0",
"mkdirp": "^0.5.1",
"mocha": "^5.2.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-extend": "^1.0.5",
"postcss-import": "^11.1.0",
"postcss-loader": "^2.1.6",
"postcss-mixins": "^6.2.0",
"postcss-nested": "^3.0.0",
"postcss-scss": "^1.0.6",
"postcss-simple-vars": "^4.1.0",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-mixins": "^6.2.3",
"postcss-nested": "^4.2.1",
"postcss-preset-env": "^6.7.0",
"postcss-scss": "^2.0.0",
"postcss-simple-vars": "^5.0.2",
"postcss-strip-inline-comments": "^0.1.5",
"rimraf": "^2.4.3",
"shell-escape": "^0.2.0",
"source-map-loader": "^0.2.4",
"webpack": "^4.23.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.11"
"stylelint": "^12.0.1",
"terser-webpack-plugin": "^2.3.0",
"typescript": "^3.7.3",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
},
"build": {
"appId": "im.riot.app",

14
postcss.config.js
View File

@ -1,14 +0,0 @@
module.exports = {
plugins: [
require("postcss-import")(),
require("autoprefixer")(),
require("postcss-simple-vars")(),
require("postcss-extend")(),
require("postcss-nested")(),
require("postcss-mixins")(),
require("postcss-easings")(),
require("postcss-strip-inline-comments")(),
],
"parser": "postcss-scss",
"local-plugins": true,
};

2
scripts/fetch-develop.deps.sh
View File

@ -78,6 +78,7 @@ dodep matrix-org matrix-js-sdk
pushd matrix-js-sdk
yarn link
yarn install
yarn build
popd
yarn link matrix-js-sdk
@ -95,6 +96,7 @@ pushd matrix-react-sdk
yarn link
yarn link matrix-js-sdk
yarn install
yarn build
popd
yarn link matrix-react-sdk

7
scripts/package.sh
View File

@ -2,11 +2,6 @@
set -e
dev=""
if [ "$1" = '-d' ]; then
dev=":dev"
fi
if [ -n "$DIST_VERSION" ]; then
version=$DIST_VERSION
else
@ -14,7 +9,7 @@ else
fi
yarn clean
yarn build$dev
yarn build
# include the sample config in the tarball. Arguably this should be done by
# `yarn build`, but it's just too painful.

4
src/components/structures/VectorEmbeddedPage.js
View File

@ -18,9 +18,9 @@ limitations under the License.
'use strict';
import EmbeddedPage from 'matrix-react-sdk/lib/components/structures/EmbeddedPage';
import EmbeddedPage from 'matrix-react-sdk/src/components/structures/EmbeddedPage';
import sanitizeHtml from 'sanitize-html';
import { _t } from 'matrix-react-sdk/lib/languageHandler';
import { _t } from 'matrix-react-sdk/src/languageHandler';
export default class VectorEmbeddedPage extends EmbeddedPage {
static replaces = 'EmbeddedPage';

12
src/components/views/auth/VectorAuthFooter.js
View File

@ -16,11 +16,10 @@ limitations under the License.
*/
import React from 'react';
import SdkConfig from 'matrix-react-sdk/lib/SdkConfig';
import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
import { _t } from 'matrix-react-sdk/src/languageHandler';
import { _t } from 'matrix-react-sdk/lib/languageHandler';
module.exports = () => {
const VectorAuthFooter = () => {
const brandingConfig = SdkConfig.get().branding;
let links = [
{"text": "blog", "url": "https://blog.riot.im"},
@ -48,4 +47,7 @@ module.exports = () => {
</div>
);
};
module.exports.replaces = 'AuthFooter';
VectorAuthFooter.replaces = 'AuthFooter';
export default VectorAuthFooter;

2
src/components/views/auth/VectorAuthHeaderLogo.js
View File

@ -19,7 +19,7 @@ limitations under the License.
import React from 'react';
import PropTypes from 'prop-types';
import SdkConfig from 'matrix-react-sdk/lib/SdkConfig';
import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
export default class VectorAuthHeaderLogo extends React.PureComponent {
static replaces = 'AuthHeaderLogo'

4
src/components/views/auth/VectorAuthPage.js
View File

@ -17,8 +17,8 @@ limitations under the License.
'use strict';
import React from 'react';
import sdk from 'matrix-react-sdk/lib/index';
import SdkConfig from 'matrix-react-sdk/lib/SdkConfig';
import * as sdk from 'matrix-react-sdk/src/index';
import SdkConfig from 'matrix-react-sdk/src/SdkConfig';
export default class VectorAuthPage extends React.PureComponent {
static replaces = 'AuthPage'

9
src/components/views/auth/VectorCustomServerDialog.js
View File

@ -16,13 +16,13 @@ limitations under the License.
*/
import React from "react";
import { _t } from 'matrix-react-sdk/lib/languageHandler';
import { _t } from 'matrix-react-sdk/src/languageHandler';
/**
* This is identical to `CustomServerDialog` except for replacing "this app"
* with "Riot".
*/
module.exports = ({onFinished}) => {
const VectorCustomServerDialog = ({onFinished}) => {
return (
<div className="mx_ErrorDialog">
<div className="mx_Dialog_title">
@ -44,4 +44,7 @@ module.exports = ({onFinished}) => {
</div>
);
};
module.exports.replaces = 'CustomServerDialog';
VectorCustomServerDialog.replaces = 'CustomServerDialog';
export default VectorCustomServerDialog;

26
src/vector/index.js
View File

@ -35,15 +35,15 @@ global.React = React;
import './modernizr';
import ReactDOM from 'react-dom';
import sdk from 'matrix-react-sdk';
import PlatformPeg from 'matrix-react-sdk/lib/PlatformPeg';
import * as sdk from 'matrix-react-sdk';
import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg';
sdk.loadSkin(require('../component-index'));
import VectorConferenceHandler from 'matrix-react-sdk/lib/VectorConferenceHandler';
import * as languageHandler from 'matrix-react-sdk/lib/languageHandler';
import {_t, _td, newTranslatableError} from 'matrix-react-sdk/lib/languageHandler';
import AutoDiscoveryUtils from 'matrix-react-sdk/lib/utils/AutoDiscoveryUtils';
import {AutoDiscovery} from "matrix-js-sdk/lib/autodiscovery";
import * as Lifecycle from "matrix-react-sdk/lib/Lifecycle";
import * as VectorConferenceHandler from 'matrix-react-sdk/src/VectorConferenceHandler';
import * as languageHandler from 'matrix-react-sdk/src/languageHandler';
import {_t, _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 url from 'url';
@ -52,14 +52,14 @@ import {parseQs, parseQsFromFragment} from './url_utils';
import ElectronPlatform from './platform/ElectronPlatform';
import WebPlatform from './platform/WebPlatform';
import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
import SettingsStore from "matrix-react-sdk/lib/settings/SettingsStore";
import SdkConfig from "matrix-react-sdk/lib/SdkConfig";
import {setTheme} from "matrix-react-sdk/lib/theme";
import {MatrixClientPeg} from 'matrix-react-sdk/src/MatrixClientPeg';
import SettingsStore from "matrix-react-sdk/src/settings/SettingsStore";
import SdkConfig from "matrix-react-sdk/src/SdkConfig";
import {setTheme} from "matrix-react-sdk/src/theme";
import Olm from 'olm';
import CallHandler from 'matrix-react-sdk/lib/CallHandler';
import CallHandler from 'matrix-react-sdk/src/CallHandler';
let lastLocationHashSet = null;

2
src/vector/indexeddb-worker.js
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/lib/indexeddb-worker.js';
import {IndexedDBStoreWorker} from 'matrix-js-sdk/src/indexeddb-worker.js';
const remoteWorker = new IndexedDBStoreWorker(postMessage);

8
src/vector/platform/ElectronPlatform.js
View File

@ -20,10 +20,10 @@ limitations under the License.
*/
import VectorBasePlatform, {updateCheckStatusEnum} from './VectorBasePlatform';
import BaseEventIndexManager from 'matrix-react-sdk/lib/indexing/BaseEventIndexManager';
import dis from 'matrix-react-sdk/lib/dispatcher';
import { _t } from 'matrix-react-sdk/lib/languageHandler';
import rageshake from 'matrix-react-sdk/lib/rageshake/rageshake';
import BaseEventIndexManager from 'matrix-react-sdk/src/indexing/BaseEventIndexManager';
import dis from 'matrix-react-sdk/src/dispatcher';
import { _t } from 'matrix-react-sdk/src/languageHandler';
import * as rageshake from 'matrix-react-sdk/src/rageshake/rageshake';
const ipcRenderer = window.ipcRenderer;

6
src/vector/platform/VectorBasePlatform.js
View File

@ -19,9 +19,9 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import BasePlatform from 'matrix-react-sdk/lib/BasePlatform';
import { _t } from 'matrix-react-sdk/lib/languageHandler';
import dis from 'matrix-react-sdk/lib/dispatcher';
import BasePlatform from 'matrix-react-sdk/src/BasePlatform';
import { _t } from 'matrix-react-sdk/src/languageHandler';
import dis from 'matrix-react-sdk/src/dispatcher';
import {getVectorConfig} from "../getconfig";
import Favico from 'favico.js';

4
src/vector/platform/WebPlatform.js
View File

@ -19,8 +19,8 @@ limitations under the License.
import VectorBasePlatform, {updateCheckStatusEnum} from './VectorBasePlatform';
import request from 'browser-request';
import dis from 'matrix-react-sdk/lib/dispatcher.js';
import { _t } from 'matrix-react-sdk/lib/languageHandler';
import dis from 'matrix-react-sdk/src/dispatcher.js';
import { _t } from 'matrix-react-sdk/src/languageHandler';
import url from 'url';
import UAParser from 'ua-parser-js';

6
src/vector/rageshakesetup.js
View File

@ -25,8 +25,8 @@ limitations under the License.
* from the rageshake.)
*/
import rageshake from "matrix-react-sdk/lib/rageshake/rageshake";
import SdkConfig from "matrix-react-sdk/lib/SdkConfig";
import * as rageshake from "matrix-react-sdk/src/rageshake/rageshake";
import SdkConfig from "matrix-react-sdk/src/SdkConfig";
function initRageshake() {
rageshake.init().then(() => {
@ -54,7 +54,7 @@ global.mxSendRageshake = function(text, withLogs) {
console.error("Cannot send a rageshake without a message - please tell us what went wrong");
return;
}
require(['matrix-react-sdk/lib/rageshake/submit-rageshake'], (s) => {
require(['matrix-react-sdk/src/rageshake/submit-rageshake'], (s) => {
s(SdkConfig.get().bug_report_endpoint_url, {
userText: text,
sendLogs: withLogs,

2
src/vector/url_utils.js → src/vector/url_utils.ts
View File

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import qs from 'querystring';
import * as qs from 'querystring';
// We want to support some name / value pairs in the fragment
// so we're re-using query string like format

29
test/app-tests/joining.js
View File

@ -16,30 +16,27 @@ limitations under the License.
/* joining.js: tests for the various paths when joining a room */
import PlatformPeg from 'matrix-react-sdk/lib/PlatformPeg';
import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg';
import WebPlatform from '../../src/vector/platform/WebPlatform';
import * as sdk from "matrix-react-sdk";
import * as jssdk from "matrix-js-sdk";
import "../skin-sdk";
import React from "react";
import ReactDOM from "react-dom";
import ReactTestUtils from "react-dom/test-utils";
import expect from "expect";
import {makeType} from "matrix-react-sdk/src/utils/TypeUtils";
import {ValidatedServerConfig} from "matrix-react-sdk/src/utils/AutoDiscoveryUtils";
import {sleep} from "../test-utils";
import * as test_utils from "../test-utils";
import MockHttpBackend from "matrix-mock-request";
require('skin-sdk');
const jssdk = require('matrix-js-sdk');
const sdk = require('matrix-react-sdk');
const MatrixChat = sdk.getComponent('structures.MatrixChat');
const RoomDirectory = sdk.getComponent('structures.RoomDirectory');
const RoomPreviewBar = sdk.getComponent('rooms.RoomPreviewBar');
const RoomView = sdk.getComponent('structures.RoomView');
const React = require('react');
const ReactDOM = require('react-dom');
const ReactTestUtils = require('react-dom/test-utils');
const expect = require('expect');
import {makeType} from "matrix-react-sdk/lib/utils/TypeUtils";
import {ValidatedServerConfig} from "matrix-react-sdk/lib/utils/AutoDiscoveryUtils";
import {sleep} from "../test-utils";
const test_utils = require('../test-utils');
const MockHttpBackend = require('matrix-mock-request');
const HS_URL='http://localhost';
const IS_URL='http://localhost';
const USER_ID='@me:localhost';

25
test/app-tests/loading.js
View File

@ -16,30 +16,25 @@ limitations under the License.
/* loading.js: test the myriad paths we have for loading the application */
import PlatformPeg from 'matrix-react-sdk/lib/PlatformPeg';
import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg';
import WebPlatform from '../../src/vector/platform/WebPlatform';
import 'skin-sdk';
import '../skin-sdk';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactTestUtils from 'react-dom/test-utils';
import expect from 'expect';
import MatrixReactTestUtils from 'matrix-react-test-utils';
import jssdk from 'matrix-js-sdk';
import sdk from 'matrix-react-sdk';
import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
import * as languageHandler from 'matrix-react-sdk/lib/languageHandler';
import {VIEWS} from 'matrix-react-sdk/lib/components/structures/MatrixChat';
import dis from 'matrix-react-sdk/lib/dispatcher';
import * as jssdk from 'matrix-js-sdk';
import * as sdk from 'matrix-react-sdk';
import {MatrixClientPeg} from 'matrix-react-sdk/src/MatrixClientPeg';
import * as languageHandler from 'matrix-react-sdk/src/languageHandler';
import {VIEWS} from 'matrix-react-sdk/src/components/structures/MatrixChat';
import dis from 'matrix-react-sdk/src/dispatcher';
import * as test_utils from '../test-utils';
import MockHttpBackend from 'matrix-mock-request';
import {parseQs, parseQsFromFragment} from '../../src/vector/url_utils';
import {makeType} from "matrix-react-sdk/lib/utils/TypeUtils";
import {ValidatedServerConfig} from "matrix-react-sdk/lib/utils/AutoDiscoveryUtils";
import {makeType} from "matrix-react-sdk/src/utils/TypeUtils";
import {ValidatedServerConfig} from "matrix-react-sdk/src/utils/AutoDiscoveryUtils";
import {sleep} from "../test-utils";
const DEFAULT_HS_URL='http://my_server';

5
test/skin-sdk.js
View File

@ -4,5 +4,6 @@
* Skins the react-sdk with the vector components
*/
const sdk = require('matrix-react-sdk');
sdk.loadSkin(require('../src/component-index'));
import * as sdk from "matrix-react-sdk";
import * as skin from "../src/component-index";
sdk.loadSkin(skin);

19
tsconfig.json Normal file
View File

@ -0,0 +1,19 @@
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"module": "commonjs",
"moduleResolution": "node",
"target": "es2016",
"noImplicitAny": false,
"sourceMap": false,
"outDir": "./lib",
"declaration": true,
"types": [
"node"
]
},
"include": [
"./src/**/*.ts"
]
}

331
webpack.config.js
View File

@ -1,18 +1,17 @@
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
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 webpack = require("webpack");
let og_image_url = process.env.RIOT_OG_IMAGE_URL;
if (!og_image_url) og_image_url = 'https://riot.im/app/themes/riot/img/logos/riot-im-logo-black-text.png';
module.exports = {
module.exports = (env, argv) => ({
entry: {
// Load babel-polyfill first to avoid issues where some imports (namely react)
// are potentially loaded before babel-polyfill.
"bundle": ["babel-polyfill", "./src/vector/index.js"],
"bundle": "./src/vector/index.js",
"indexeddb-worker": "./src/vector/indexeddb-worker.js",
"mobileguide": "./src/vector/mobile_guide/index.js",
// CSS themes
@ -21,10 +20,176 @@ module.exports = {
"theme-light-custom": "./node_modules/matrix-react-sdk/res/themes/light-custom/css/light-custom.scss",
"theme-dark-custom": "./node_modules/matrix-react-sdk/res/themes/dark-custom/css/dark-custom.scss",
},
optimization: {
// Put all of our CSS into one useful place - this is needed for MiniCssExtractPlugin.
// Previously we used a different extraction plugin that did this magic for us, but
// now we need to consider that the CSS needs to be bundled up together.
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
enforce: true,
// Do not add `chunks: 'all'` here because you'll break the app entry point.
},
},
},
// Minification is normally enabled by default for webpack in production mode, but
// we use a CSS optimizer too and need to manage it ourselves.
minimize: argv.mode === 'production',
minimizer: argv.mode === 'production' ? [new TerserPlugin({}), new OptimizeCSSAssetsPlugin({})] : [],
},
resolve: {
// We define an alternative import path so we can safely use src/ across the react-sdk
// and js-sdk. We already import from src/ where possible to ensure our source maps are
// extremely accurate (and because we're capable of compiling the layers manually rather
// than relying on partially-mangled output from babel), though we do need to fix the
// package level import (stuff like `import {Thing} from "matrix-js-sdk"` for example).
// We can't use the aliasing down below to point at src/ because that'll fail to resolve
// 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'],
// We need to specify that TS can be resolved without an extension
extensions: ['.js', '.json', '.ts'],
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'),
// same goes for js-sdk - we don't need two copies.
"matrix-js-sdk": path.resolve(__dirname, 'node_modules/matrix-js-sdk'),
// Define a variable so the i18n stuff can load
"$webapp": path.resolve(__dirname, 'webapp'),
},
},
module: {
noParse: [
// for cross platform compatibility use [\\\/] as the path separator
// this ensures that the regex trips on both Windows and *nix
// don't parse the languages within highlight.js. They cause stack
// overflows (https://github.com/webpack/webpack/issues/1721), and
// there is no need for webpack to parse them - they can just be
// included as-is.
/highlight\.js[\\\/]lib[\\\/]languages/,
// olm takes ages for webpack to process, and it's already heavily
// optimised, so there is little to gain by us uglifying it.
/olm[\\\/](javascript[\\\/])?olm\.js$/,
],
rules: [
{ enforce: 'pre', test: /\.js$/, use: "source-map-loader", exclude: /node_modules/, },
{ test: /\.js$/, use: "babel-loader", include: path.resolve(__dirname, 'src') },
{
test: /\.(ts|js)x?$/,
exclude: /node_modules/,
loader: 'babel-loader',
options: {
cacheDirectory: true,
// These two options are needed to load the babelrc file and
// apply it to node_modules (ie: react-sdk and js-sdk). We
// could put the babel config in this block instead, but we
// publish riot-web to npm for some reason and that seems to
// ship a lib directory. Therefore, we need the babel config
// in a place where babel and babel-loader can reach it.
babelrc: true,
configFile: path.resolve(__dirname, ".babelrc"),
}
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 1,
sourceMap: true,
}
},
{
loader: 'postcss-loader',
ident: 'postcss',
options: {
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).
//
// You might have noticed that we're also sending regular CSS
// through PostCSS. This looks weird, and in fact is probably
// not what you'd expect, however in order for our CSS build
// to work nicely we have to do this. Because down the line
// our SCSS stylesheets reference plain CSS we have to load
// the plain CSS through PostCSS so it can find it safely. This
// also acts like a babel-for-css by transpiling our (S)CSS
// down/up to the right browser support (prefixes, etc).
// Further, if we don't do this then PostCSS assumes that our
// plain CSS is SCSS and it really doesn't like that, even
// though plain CSS should be compatible. The chunking options
// at the top of this webpack config help group the SCSS and
// plain CSS together for the bundler.
require("postcss-simple-vars")(),
require("postcss-strip-inline-comments")(),
// 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'}),
],
parser: "postcss-scss",
"local-plugins": true,
},
},
]
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
importLoaders: 1,
sourceMap: true,
}
},
{
loader: 'postcss-loader',
ident: 'postcss',
options: {
sourceMap: true,
plugins: () => [
// Note that we use slightly different plugins for SCSS.
require('postcss-import')(),
require("postcss-simple-vars")(),
require("postcss-extend")(),
require("postcss-nested")(),
require("postcss-mixins")(),
require("postcss-easings")(),
require("postcss-strip-inline-comments")(),
// 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'}),
],
parser: "postcss-scss",
"local-plugins": true,
},
},
]
},
{
test: /\.wasm$/,
loader: "file-loader",
@ -34,34 +199,6 @@ module.exports = {
outputPath: '.',
},
},
{
test: /\.scss$/,
// 1. postcss-loader turns the SCSS into normal CSS.
// 2. css-loader turns the CSS into a JS module whose default
// export is a string containing the CSS, while also adding
// the images and fonts from CSS as Webpack inputs.
// 3. ExtractTextPlugin turns that string into a separate asset.
use: ExtractTextPlugin.extract({
use: [
"css-loader",
{
loader: 'postcss-loader',
options: {
config: {
path: './postcss.config.js',
},
},
},
],
}),
},
{
// this works similarly to the scss case, without postcss.
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: "css-loader",
}),
},
{
// cache-bust languages.json file placed in
// riot-web/webapp/i18n during build by copy-res.js
@ -82,6 +219,7 @@ module.exports = {
issuer: /\.(scss|css)$/,
loader: 'file-loader',
options: {
esModule: false,
name: '[name].[hash:7].[ext]',
outputPath: getImgOutputPath,
publicPath: function(url, resourcePath) {
@ -97,6 +235,7 @@ module.exports = {
// Assets referenced in HTML and JS files
loader: 'file-loader',
options: {
esModule: false,
name: '[name].[hash:7].[ext]',
outputPath: getImgOutputPath,
publicPath: function(url, resourcePath) {
@ -107,26 +246,50 @@ module.exports = {
},
],
},
],
noParse: [
// for cross platform compatibility use [\\\/] as the path separator
// this ensures that the regex trips on both Windows and *nix
// don't parse the languages within highlight.js. They cause stack
// overflows (https://github.com/webpack/webpack/issues/1721), and
// there is no need for webpack to parse them - they can just be
// included as-is.
/highlight\.js[\\\/]lib[\\\/]languages/,
// olm takes ages for webpack to process, and it's already heavily
// optimised, so there is little to gain by us uglifying it.
/olm[\\\/](javascript[\\\/])?olm\.js$/,
],
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
},
}),
// This exports our CSS using the splitChunks and loaders above.
new MiniCssExtractPlugin({
filename: 'bundles/[hash]/[name].css',
ignoreOrder: false, // Enable to remove warnings about conflicting order
}),
// This is the app's main entry point.
new HtmlWebpackPlugin({
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'],
minify: argv.mode === 'production',
vars: {
og_image_url: og_image_url,
},
}),
// 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',
minify: argv.mode === 'production',
chunks: ['mobileguide'],
}),
],
output: {
path: path.join(__dirname, "webapp"),
// The generated JS (and CSS, from the ExtractTextPlugin) are put in a
// The generated JS (and CSS, from the extraction plugin) are put in a
// unique subdirectory for the build. There will only be one such
// 'bundle' directory in the generated tarball; however, hosting
// servers can collect 'bundles' from multiple versions into one
@ -135,62 +298,12 @@ module.exports = {
// chunks even after the app is redeployed.
filename: "bundles/[hash]/[name].js",
chunkFilename: "bundles/[hash]/[name].js",
devtoolModuleFilenameTemplate: function(info) {
// Reading input source maps gives only relative paths here for
// everything. Until I figure out how to fix this, this is a
// workaround.
// We use the relative resource path with any '../'s on the front
// removed which gives a tree with matrix-react-sdk and vector
// trees smashed together, but this fixes everything being under
// various levels of '.' and '..'
// Also, sometimes the resource path is absolute.
return path.relative(process.cwd(), info.resourcePath).replace(/^[\/\.]*/, '');
},
},
resolve: {
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('./node_modules/react'),
"react-dom": path.resolve('./node_modules/react-dom'),
// same goes for js-sdk
"matrix-js-sdk": path.resolve('./node_modules/matrix-js-sdk'),
"$webapp": path.resolve('./webapp'),
},
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
},
}),
new ExtractTextPlugin("bundles/[hash]/[name].css", {
allChunks: true,
}),
new HtmlWebpackPlugin({
template: './src/vector/index.html',
// we inject the links ourselves via the template, because
// HtmlWebpackPlugin wants to put the script tags either at the
// bottom of <head> or the bottom of <body>, and I'm a bit scared
// about moving them.
inject: false,
excludeChunks: ['mobileguide'],
vars: {
og_image_url: og_image_url,
},
}),
new HtmlWebpackPlugin({
template: './src/vector/mobile_guide/index.html',
filename: 'mobile_guide/index.html',
chunks: ['mobileguide'],
}),
],
devtool: 'source-map',
// DO NOT enable this option. It makes the source maps all wonky. Instead,
// we end up including the sourcemaps through the loaders which makes them
// more accurate.
//devtool: "source-map",
// configuration for the webpack-dev-server
devServer: {
@ -202,13 +315,13 @@ module.exports = {
chunks: false,
},
// hot mdule replacement doesn't work (I think we'd need react-hot-reload?)
// hot module replacement doesn't work (I think we'd need react-hot-reload?)
// so webpack-dev-server reloads the page on every update which is quite
// tedious in Riot since that can take a while.
hot: false,
inline: false,
},
};
});
/**
* Merge assets found via CSS and imports into a single tree, while also preserving

4890
yarn.lock
View File

File diff suppressed because it is too large Load Diff