From 303f06cc61cb50e0891c8af9c709287cf686b3c6 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 2 Mar 2022 13:52:50 -0700 Subject: [PATCH 01/10] Step 2: Remove the decorator --- babel.config.js | 1 - package.json | 1 - tsconfig.json | 4 ++-- yarn.lock | 25 +------------------------ 4 files changed, 3 insertions(+), 28 deletions(-) diff --git a/babel.config.js b/babel.config.js index fe720e0a4d..d2248cd0c9 100644 --- a/babel.config.js +++ b/babel.config.js @@ -13,7 +13,6 @@ module.exports = { "@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", diff --git a/package.json b/package.json index 97b3ac6c89..52c2ffebc8 100644 --- a/package.json +++ b/package.json @@ -74,7 +74,6 @@ "@babel/eslint-parser": "^7.12.10", "@babel/eslint-plugin": "^7.12.10", "@babel/plugin-proposal-class-properties": "^7.12.1", - "@babel/plugin-proposal-decorators": "^7.12.12", "@babel/plugin-proposal-export-default-from": "^7.12.1", "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1", "@babel/plugin-proposal-numeric-separator": "^7.12.7", diff --git a/tsconfig.json b/tsconfig.json index b0a58196f5..e48ae0f7b9 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,7 +1,7 @@ { "compilerOptions": { - "experimentalDecorators": true, - "emitDecoratorMetadata": true, + "experimentalDecorators": false, + "emitDecoratorMetadata": false, "resolveJsonModule": true, "esModuleInterop": true, "module": "commonjs", diff --git a/yarn.lock b/yarn.lock index 901e436ebd..169134774e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -116,7 +116,7 @@ browserslist "^4.17.5" semver "^6.3.0" -"@babel/helper-create-class-features-plugin@^7.16.10", "@babel/helper-create-class-features-plugin@^7.16.7", "@babel/helper-create-class-features-plugin@^7.17.1": +"@babel/helper-create-class-features-plugin@^7.16.10", "@babel/helper-create-class-features-plugin@^7.16.7": version "7.17.1" resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.1.tgz#9699f14a88833a7e055ce57dcd3ffdcd25186b21" integrity sha512-JBdSr/LtyYIno/pNnJ75lBcqc3Z1XXujzPanHqjvvrhOA+DTceTFuJi8XjmWTZh4r3fsdfqaCMN0iZemdkxZHQ== @@ -354,17 +354,6 @@ "@babel/helper-plugin-utils" "^7.16.7" "@babel/plugin-syntax-class-static-block" "^7.14.5" -"@babel/plugin-proposal-decorators@^7.12.12": - version "7.17.2" - resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.17.2.tgz#c36372ddfe0360cac1ee331a238310bddca11493" - integrity sha512-WH8Z95CwTq/W8rFbMqb9p3hicpt4RX4f0K659ax2VHxgOyT6qQmUaEVEjIh4WR9Eh9NymkVn5vwsrE68fAQNUw== - dependencies: - "@babel/helper-create-class-features-plugin" "^7.17.1" - "@babel/helper-plugin-utils" "^7.16.7" - "@babel/helper-replace-supers" "^7.16.7" - "@babel/plugin-syntax-decorators" "^7.17.0" - charcodes "^0.2.0" - "@babel/plugin-proposal-dynamic-import@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.16.7.tgz#c19c897eaa46b27634a00fee9fb7d829158704b2" @@ -503,13 +492,6 @@ dependencies: "@babel/helper-plugin-utils" "^7.14.5" -"@babel/plugin-syntax-decorators@^7.17.0": - version "7.17.0" - resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.17.0.tgz#a2be3b2c9fe7d78bd4994e790896bc411e2f166d" - integrity sha512-qWe85yCXsvDEluNP0OyeQjH63DlhAR3W7K9BxxU1MvbDb48tgBG+Ao6IJJ6smPDrrVzSQZrbF6donpkFBMcs3A== - dependencies: - "@babel/helper-plugin-utils" "^7.16.7" - "@babel/plugin-syntax-dynamic-import@^7.8.3": version "7.8.3" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz#62bf98b2da3cd21d626154fc96ee5b3cb68eacb3" @@ -3414,11 +3396,6 @@ character-reference-invalid@^1.0.0: resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560" integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg== -charcodes@^0.2.0: - version "0.2.0" - resolved "https://registry.yarnpkg.com/charcodes/-/charcodes-0.2.0.tgz#5208d327e6cc05f99eb80ffc814707572d1f14e4" - integrity sha512-Y4kiDb+AM4Ecy58YkuZrrSRJBDQdQ2L+NyS1vHHFtNtUjgutcZfx3yp1dAONI/oPaPmyGfCLx5CxL+zauIMyKQ== - cheerio-select@^1.5.0: version "1.5.0" resolved "https://registry.yarnpkg.com/cheerio-select/-/cheerio-select-1.5.0.tgz#faf3daeb31b17c5e1a9dabcee288aaf8aafa5823" From 1bbecdff6c03f56969afb20f5bc046bb74a45fe9 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 2 Mar 2022 14:16:10 -0700 Subject: [PATCH 02/10] Step 3.1: Stop using `getComponent` in tests --- test/app-tests/joining-test.tsx | 10 +++------- test/app-tests/loading-test.tsx | 34 ++++++++++++++++----------------- 2 files changed, 20 insertions(+), 24 deletions(-) diff --git a/test/app-tests/joining-test.tsx b/test/app-tests/joining-test.tsx index 1ea411fec1..046e91ebd7 100644 --- a/test/app-tests/joining-test.tsx +++ b/test/app-tests/joining-test.tsx @@ -18,7 +18,6 @@ limitations under the License. import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg'; import WebPlatform from '../../src/vector/platform/WebPlatform'; -import * as sdk from "matrix-react-sdk/src/index"; import * as jssdk from "matrix-js-sdk/src/matrix"; import "../skin-sdk"; import "../jest-mocks"; @@ -28,15 +27,12 @@ import ReactTestUtils from "react-dom/test-utils"; 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"; import "fake-indexeddb/auto"; import { RoomView as RoomViewClass } from 'matrix-react-sdk/src/components/structures/RoomView'; - - -const MatrixChat = sdk.getComponent('structures.MatrixChat'); -const RoomDirectory = sdk.getComponent('structures.RoomDirectory'); -const RoomPreviewBar = sdk.getComponent('rooms.RoomPreviewBar'); +import MatrixChat from "matrix-react-sdk/src/components/structures/MatrixChat"; +import RoomDirectory from "matrix-react-sdk/src/components/structures/RoomDirectory"; +import RoomPreviewBar from "matrix-react-sdk/src/components/views/rooms/RoomPreviewBar"; const HS_URL='http://localhost'; const IS_URL='http://localhost'; diff --git a/test/app-tests/loading-test.tsx b/test/app-tests/loading-test.tsx index 068164dcee..e008d01e31 100644 --- a/test/app-tests/loading-test.tsx +++ b/test/app-tests/loading-test.tsx @@ -26,9 +26,8 @@ import ReactDOM from 'react-dom'; import ReactTestUtils from 'react-dom/test-utils'; import MatrixReactTestUtils from 'matrix-react-test-utils'; import * as jssdk from 'matrix-js-sdk/src/matrix'; -import * as sdk from 'matrix-react-sdk/src/index'; import {MatrixClientPeg} from 'matrix-react-sdk/src/MatrixClientPeg'; -import {Views} from 'matrix-react-sdk/src/components/structures/MatrixChat'; +import MatrixChat, {Views} from 'matrix-react-sdk/src/components/structures/MatrixChat'; import dis from 'matrix-react-sdk/src/dispatcher/dispatcher'; import * as test_utils from '../test-utils'; import MockHttpBackend from 'matrix-mock-request'; @@ -41,6 +40,8 @@ import {cleanLocalstorage} from "../test-utils"; import {IndexedDBCryptoStore} from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store"; import { RoomView as RoomViewClass } from 'matrix-react-sdk/src/components/structures/RoomView'; import LoginComponent from 'matrix-react-sdk/src/components/structures/auth/Login'; +import WelcomeComponent from "matrix-react-sdk/src/components/views/auth/Welcome"; +import EmbeddedPage from "matrix-react-sdk/src/components/structures/EmbeddedPage"; const DEFAULT_HS_URL='http://my_server'; const DEFAULT_IS_URL='http://my_is'; @@ -124,7 +125,6 @@ describe('loading:', function() { }; } - const MatrixChat = sdk.getComponent('structures.MatrixChat'); const fragParts = parseQsFromFragment(windowLocation); const config = Object.assign({ @@ -269,7 +269,7 @@ describe('loading:', function() { return awaitLoginComponent(matrixChat).then(() => { // we expect a single component ReactTestUtils.findRenderedComponentWithType( - matrixChat, sdk.getComponent('structures.auth.Login')); + matrixChat, LoginComponent); // the only outstanding request should be a GET /login // (in particular there should be no /register request for @@ -290,7 +290,7 @@ describe('loading:', function() { }).then(() => { // once the sync completes, we should have a room view ReactTestUtils.findRenderedComponentWithType( - matrixChat, sdk.getComponent('structures.EmbeddedPage')); + matrixChat, EmbeddedPage); expect(windowLocation.hash).toEqual("#/home"); }); }); @@ -343,7 +343,7 @@ describe('loading:', function() { // once the sync completes, we should have a home page httpBackend.verifyNoOutstandingExpectation(); ReactTestUtils.findRenderedComponentWithType( - matrixChat, sdk.getComponent('structures.EmbeddedPage')); + matrixChat, EmbeddedPage); expect(windowLocation.hash).toEqual("#/home"); }); }); @@ -384,7 +384,7 @@ describe('loading:', function() { // we expect a single component ReactTestUtils.findRenderedComponentWithType( - matrixChat, sdk.getComponent('structures.auth.Login'), + matrixChat, LoginComponent, ); // the only outstanding request should be a GET /login @@ -413,7 +413,7 @@ describe('loading:', function() { // we should see a home page, even though we previously had // a stored mx_last_room_id ReactTestUtils.findRenderedComponentWithType( - matrixChat, sdk.getComponent('structures.EmbeddedPage')); + matrixChat, EmbeddedPage); expect(windowLocation.hash).toEqual("#/home"); }); }); @@ -447,7 +447,7 @@ describe('loading:', function() { // once the sync completes, we should have a welcome page httpBackend.verifyNoOutstandingExpectation(); ReactTestUtils.findRenderedComponentWithType( - matrixChat, sdk.getComponent('auth.Welcome')); + matrixChat, WelcomeComponent); expect(windowLocation.hash).toEqual("#/welcome"); }); }); @@ -480,7 +480,7 @@ describe('loading:', function() { // once the sync completes, we should have a welcome page httpBackend.verifyNoOutstandingExpectation(); ReactTestUtils.findRenderedComponentWithType( - matrixChat, sdk.getComponent('auth.Welcome')); + matrixChat, WelcomeComponent); expect(windowLocation.hash).toEqual("#/welcome"); expect(MatrixClientPeg.get().baseUrl).toEqual(DEFAULT_HS_URL); expect(MatrixClientPeg.get().idBaseUrl).toEqual(DEFAULT_IS_URL); @@ -539,7 +539,7 @@ describe('loading:', function() { }).then(() => { // once the sync completes, we should have a home page ReactTestUtils.findRenderedComponentWithType( - matrixChat, sdk.getComponent('structures.EmbeddedPage')); + matrixChat, EmbeddedPage); // we simulate a click on the 'login' button by firing off // the relevant dispatch. @@ -561,7 +561,7 @@ describe('loading:', function() { // we expect a single component ReactTestUtils.findRenderedComponentWithType( - matrixChat, sdk.getComponent('structures.auth.Login'), + matrixChat, LoginComponent, ); }); @@ -569,7 +569,7 @@ describe('loading:', function() { // ILAG renders this obsolete. I think. it('should allow us to return to the app', function() { const login = ReactTestUtils.findRenderedComponentWithType( - matrixChat, sdk.getComponent('structures.auth.Login') + matrixChat, LoginComponent ); const linkText = 'Return to app'; @@ -586,7 +586,7 @@ describe('loading:', function() { return sleep(1).then(() => { // we should be straight back into the home page ReactTestUtils.findRenderedComponentWithType( - matrixChat, sdk.getComponent('structures.EmbeddedPage')); + matrixChat, EmbeddedPage); }); }); */ @@ -733,19 +733,19 @@ function awaitRoomView(matrixChat, retryLimit?, retryCount?) { function awaitLoginComponent(matrixChat, attempts?) { return MatrixReactTestUtils.waitForRenderedComponentWithType( - matrixChat, sdk.getComponent('structures.auth.Login'), attempts, + matrixChat, LoginComponent, attempts, ); } function awaitWelcomeComponent(matrixChat, attempts?) { return MatrixReactTestUtils.waitForRenderedComponentWithType( - matrixChat, sdk.getComponent('auth.Welcome'), attempts, + matrixChat, WelcomeComponent, attempts, ); } function moveFromWelcomeToLogin(matrixChat) { ReactTestUtils.findRenderedComponentWithType( - matrixChat, sdk.getComponent('auth.Welcome')); + matrixChat, WelcomeComponent); dis.dispatch({ action: 'start_login' }); return awaitLoginComponent(matrixChat); } From 585c777878e4d04b2d92b21ebd2189d963e76f31 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 2 Mar 2022 14:10:42 -0700 Subject: [PATCH 03/10] Step 3.2: Stop using `getComponent` --- src/components/views/auth/VectorAuthPage.tsx | 7 +++---- src/vector/app.tsx | 5 ++--- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/src/components/views/auth/VectorAuthPage.tsx b/src/components/views/auth/VectorAuthPage.tsx index d37739a032..7df756a67d 100644 --- a/src/components/views/auth/VectorAuthPage.tsx +++ b/src/components/views/auth/VectorAuthPage.tsx @@ -15,9 +15,10 @@ limitations under the License. */ import React, { CSSProperties } from 'react'; -import * as sdk from 'matrix-react-sdk/src/index'; import SdkConfig from 'matrix-react-sdk/src/SdkConfig'; +import VectorAuthFooter from "./VectorAuthFooter"; + export default class VectorAuthPage extends React.PureComponent { static replaces = 'AuthPage'; @@ -44,8 +45,6 @@ export default class VectorAuthPage extends React.PureComponent { } render() { - const AuthFooter = sdk.getComponent('auth.AuthFooter'); - const pageStyle = { background: `center/cover fixed url(${VectorAuthPage.getWelcomeBackgroundUrl()})`, }; @@ -80,7 +79,7 @@ export default class VectorAuthPage extends React.PureComponent { { this.props.children } - + ); } diff --git a/src/vector/app.tsx b/src/vector/app.tsx index 7a3abc0c17..b887bef9f8 100644 --- a/src/vector/app.tsx +++ b/src/vector/app.tsx @@ -19,7 +19,6 @@ limitations under the License. */ import React from 'react'; -import * as sdk from 'matrix-react-sdk/src/index'; 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'; @@ -30,6 +29,7 @@ import { IConfigOptions } from "matrix-react-sdk/src/IConfigOptions"; import { logger } from "matrix-js-sdk/src/logger"; 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 VectorBasePlatform from "./platform/VectorBasePlatform"; @@ -133,7 +133,6 @@ export async function loadApp(fragParams: {}) { const defaultDeviceName = snakedConfig.get("default_device_display_name") ?? platform.getDefaultDeviceDisplayName(); - const MatrixChat = sdk.getComponent('structures.MatrixChat'); return ; } -async function verifyServerConfig() { +async function verifyServerConfig(): Promise { let validatedConfig; try { logger.log("Verifying homeserver configuration"); From 384903361d5ff3c608fedecf2105100201c00ca8 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 2 Mar 2022 16:39:14 -0700 Subject: [PATCH 04/10] Step 4: Disable/remove bulk of skinner code --- src/vector/index.ts | 5 +---- src/vector/init.tsx | 21 --------------------- test/skin-sdk.js | 2 +- 3 files changed, 2 insertions(+), 26 deletions(-) diff --git a/src/vector/index.ts b/src/vector/index.ts index 87388799c3..e27129d9aa 100644 --- a/src/vector/index.ts +++ b/src/vector/index.ts @@ -110,7 +110,6 @@ async function start() { preparePlatform, loadOlm, loadConfig, - loadSkin, loadLanguage, loadTheme, loadApp, @@ -160,10 +159,9 @@ async function start() { const loadLanguagePromise = loadLanguage(); // as quickly as we possibly can, set a default theme... const loadThemePromise = loadTheme(); - const loadSkinPromise = loadSkin(); // await things settling so that any errors we have to render have features like i18n running - await settled(loadSkinPromise, loadThemePromise, loadLanguagePromise); + await settled(loadThemePromise, loadLanguagePromise); let acceptBrowser = supportedBrowser; if (!acceptBrowser && window.localStorage) { @@ -211,7 +209,6 @@ async function start() { // assert things started successfully // ################################## await loadOlmPromise; - await loadSkinPromise; await loadThemePromise; await loadLanguagePromise; diff --git a/src/vector/init.tsx b/src/vector/init.tsx index e810d6c826..0e43700ae9 100644 --- a/src/vector/init.tsx +++ b/src/vector/init.tsx @@ -127,27 +127,6 @@ export async function loadLanguage() { } } -export async function loadSkin() { - // Ensure the skin is the very first thing to load for the react-sdk. We don't even want to reference - // the SDK until we have to in imports. - logger.log("Loading skin..."); - // load these async so that its code is not executed immediately and we can catch any exceptions - const [sdk, skin] = await Promise.all([ - import( - /* webpackChunkName: "matrix-react-sdk" */ - /* webpackPreload: true */ - "matrix-react-sdk"), - import( - /* webpackChunkName: "element-web-component-index" */ - /* webpackPreload: true */ - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-ignore - this module is generated so may fail lint - "../component-index"), - ]); - sdk.loadSkin(skin); - logger.log("Skin loaded!"); -} - export async function loadTheme() { setTheme(); } diff --git a/test/skin-sdk.js b/test/skin-sdk.js index eaeff52043..3a3067ea64 100644 --- a/test/skin-sdk.js +++ b/test/skin-sdk.js @@ -6,4 +6,4 @@ import * as sdk from "matrix-react-sdk"; import * as skin from "../src/component-index"; -sdk.loadSkin(skin); +// sdk.loadSkin(skin); From e1f9e9a8f8f64711cd7ac77fb326156b4d0d9320 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 24 Mar 2022 21:42:23 -0600 Subject: [PATCH 05/10] Step 8.1: Remove skin-sdk.js --- test/app-tests/joining-test.tsx | 1 - test/app-tests/loading-test.tsx | 1 - test/skin-sdk.js | 9 --------- 3 files changed, 11 deletions(-) delete mode 100644 test/skin-sdk.js diff --git a/test/app-tests/joining-test.tsx b/test/app-tests/joining-test.tsx index 046e91ebd7..618cb10348 100644 --- a/test/app-tests/joining-test.tsx +++ b/test/app-tests/joining-test.tsx @@ -19,7 +19,6 @@ limitations under the License. import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg'; import WebPlatform from '../../src/vector/platform/WebPlatform'; import * as jssdk from "matrix-js-sdk/src/matrix"; -import "../skin-sdk"; import "../jest-mocks"; import React from "react"; import ReactDOM from "react-dom"; diff --git a/test/app-tests/loading-test.tsx b/test/app-tests/loading-test.tsx index e008d01e31..ccdcaccdda 100644 --- a/test/app-tests/loading-test.tsx +++ b/test/app-tests/loading-test.tsx @@ -19,7 +19,6 @@ limitations under the License. import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg'; import WebPlatform from '../../src/vector/platform/WebPlatform'; -import '../skin-sdk'; import "../jest-mocks"; import React from 'react'; import ReactDOM from 'react-dom'; diff --git a/test/skin-sdk.js b/test/skin-sdk.js deleted file mode 100644 index 3a3067ea64..0000000000 --- a/test/skin-sdk.js +++ /dev/null @@ -1,9 +0,0 @@ -/* - * skin-sdk.js - * - * Skins the react-sdk with the vector components - */ - -import * as sdk from "matrix-react-sdk"; -import * as skin from "../src/component-index"; -// sdk.loadSkin(skin); From 0bcb1d18cefc3393af927599748fa5fa9b74a89c Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 24 Mar 2022 22:23:17 -0600 Subject: [PATCH 06/10] Step 10.1: Ensure the js-sdk browser bundle gets pulled We no longer have implicit imports which would have called this path, so manually call it. We have to disable lint as it doesn't like us doing this, but we only end up with a single entry point. --- src/vector/app.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/vector/app.tsx b/src/vector/app.tsx index b887bef9f8..1c38a2c84a 100644 --- a/src/vector/app.tsx +++ b/src/vector/app.tsx @@ -18,6 +18,9 @@ See the License for the specific language governing permissions and limitations under the License. */ +// To ensure we load the browser-request version +import "matrix-js-sdk"; // eslint-disable-line no-restricted-imports + import React from 'react'; import PlatformPeg from 'matrix-react-sdk/src/PlatformPeg'; import { _td, newTranslatableError } from 'matrix-react-sdk/src/languageHandler'; From 5459c1eb9630da9af26060f48bbf110514a24a94 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 24 Mar 2022 23:43:46 -0600 Subject: [PATCH 07/10] Step 10.2: Move hacky welcome page replacement to react-sdk --- res/welcome.html | 3 +- res/welcome/images/matrix.svg | 153 ------------------ .../structures/VectorEmbeddedPage.tsx | 34 ---- src/i18n/strings/en_EN.json | 2 +- 4 files changed, 3 insertions(+), 189 deletions(-) delete mode 100644 res/welcome/images/matrix.svg delete mode 100644 src/components/structures/VectorEmbeddedPage.tsx diff --git a/res/welcome.html b/res/welcome.html index bb3f84fe64..ef01d8876c 100644 --- a/res/welcome.html +++ b/res/welcome.html @@ -173,7 +173,8 @@ we don't have an account and should hide them. No account == no guest account ei

_t("Welcome to Element")

-

_t("Decentralised, encrypted chat & collaboration powered by [matrix]")

+ +

_t("Decentralised, encrypted chat & collaboration powered by $matrixLogo")

diff --git a/res/welcome/images/matrix.svg b/res/welcome/images/matrix.svg deleted file mode 100644 index 13adcab25a..0000000000 --- a/res/welcome/images/matrix.svg +++ /dev/null @@ -1,153 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/components/structures/VectorEmbeddedPage.tsx b/src/components/structures/VectorEmbeddedPage.tsx deleted file mode 100644 index 85adb2fb3f..0000000000 --- a/src/components/structures/VectorEmbeddedPage.tsx +++ /dev/null @@ -1,34 +0,0 @@ -/* -Copyright 2016 OpenMarket Ltd -Copyright 2017 Vector Creations Ltd -Copyright 2019 New Vector Ltd - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -import EmbeddedPage from 'matrix-react-sdk/src/components/structures/EmbeddedPage'; -import sanitizeHtml from 'sanitize-html'; -import { _t } from 'matrix-react-sdk/src/languageHandler'; - -export default class VectorEmbeddedPage extends EmbeddedPage { - static replaces = 'EmbeddedPage'; - - // we're overriding the base component here, for Element-specific tweaks - translate(s: string) { - s = sanitizeHtml(_t(s)); - // ugly fix for https://github.com/vector-im/element-web/issues/4243 - // eslint-disable-next-line max-len - s = s.replace(/\[matrix\]/, 'Matrix'); - return s; - } -} diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 24cdd0fc3d..aef27979d6 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -26,7 +26,7 @@ "Go to element.io": "Go to element.io", "Failed to start": "Failed to start", "Welcome to Element": "Welcome to Element", - "Decentralised, encrypted chat & collaboration powered by [matrix]": "Decentralised, encrypted chat & collaboration powered by [matrix]", + "Decentralised, encrypted chat & collaboration powered by $matrixLogo": "Decentralised, encrypted chat & collaboration powered by $matrixLogo", "Sign In": "Sign In", "Create Account": "Create Account", "Explore rooms": "Explore rooms" From 5b592eca4fb1ebe597c3c7c0c061aba8f2ce83c2 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 24 Mar 2022 23:41:19 -0600 Subject: [PATCH 08/10] Step 10.3: Use module replacement to achieve component overrides This is the same system as the customisations override, however deliberately using a different JSON file to avoid conflicts. Forks would be expected to use the customisations file, not the components file, to override/add components. --- components.json | 5 ++++ .../views/auth/VectorAuthFooter.tsx | 2 -- .../views/auth/VectorAuthHeaderLogo.tsx | 4 +-- src/components/views/auth/VectorAuthPage.tsx | 8 +++--- webpack.config.js | 26 +++++++++++++------ 5 files changed, 27 insertions(+), 18 deletions(-) create mode 100644 components.json diff --git a/components.json b/components.json new file mode 100644 index 0000000000..cc5046ed69 --- /dev/null +++ b/components.json @@ -0,0 +1,5 @@ +{ + "src/components/views/auth/AuthFooter.tsx": "src/components/views/auth/VectorAuthFooter.tsx", + "src/components/views/auth/AuthHeaderLogo.tsx": "src/components/views/auth/VectorAuthHeaderLogo.tsx", + "src/components/views/auth/AuthPage.tsx": "src/components/views/auth/VectorAuthPage.tsx" +} diff --git a/src/components/views/auth/VectorAuthFooter.tsx b/src/components/views/auth/VectorAuthFooter.tsx index 0cdfdc0a23..87557ab4bd 100644 --- a/src/components/views/auth/VectorAuthFooter.tsx +++ b/src/components/views/auth/VectorAuthFooter.tsx @@ -44,6 +44,4 @@ const VectorAuthFooter = () => { ); }; -VectorAuthFooter.replaces = 'AuthFooter'; - export default VectorAuthFooter; diff --git a/src/components/views/auth/VectorAuthHeaderLogo.tsx b/src/components/views/auth/VectorAuthHeaderLogo.tsx index deaf9cc232..d44e3e5a7b 100644 --- a/src/components/views/auth/VectorAuthHeaderLogo.tsx +++ b/src/components/views/auth/VectorAuthHeaderLogo.tsx @@ -19,9 +19,7 @@ import React from 'react'; import SdkConfig from 'matrix-react-sdk/src/SdkConfig'; export default class VectorAuthHeaderLogo extends React.PureComponent { - static replaces = 'AuthHeaderLogo'; - - render() { + public render() { const brandingConfig = SdkConfig.getObject("branding"); const logoUrl = brandingConfig?.get("auth_header_logo_url") ?? "themes/element/img/logos/element-logo.svg"; diff --git a/src/components/views/auth/VectorAuthPage.tsx b/src/components/views/auth/VectorAuthPage.tsx index 7df756a67d..d2e6d9f8db 100644 --- a/src/components/views/auth/VectorAuthPage.tsx +++ b/src/components/views/auth/VectorAuthPage.tsx @@ -20,12 +20,10 @@ import SdkConfig from 'matrix-react-sdk/src/SdkConfig'; import VectorAuthFooter from "./VectorAuthFooter"; export default class VectorAuthPage extends React.PureComponent { - static replaces = 'AuthPage'; - - static welcomeBackgroundUrl; + private static welcomeBackgroundUrl; // cache the url as a static to prevent it changing without refreshing - static getWelcomeBackgroundUrl() { + private static getWelcomeBackgroundUrl() { if (VectorAuthPage.welcomeBackgroundUrl) return VectorAuthPage.welcomeBackgroundUrl; const brandingConfig = SdkConfig.getObject("branding"); @@ -44,7 +42,7 @@ export default class VectorAuthPage extends React.PureComponent { return VectorAuthPage.welcomeBackgroundUrl; } - render() { + public render() { const pageStyle = { background: `center/cover fixed url(${VectorAuthPage.getWelcomeBackgroundUrl()})`, }; diff --git a/webpack.config.js b/webpack.config.js index ad64899c94..bd20c2cf06 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -50,14 +50,24 @@ try { } catch (e) { // ignore - not important } -const moduleReplacementPlugins = Object.entries(fileOverrides).map(([oldPath, newPath]) => { - 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, '\\.')), - path.resolve(__dirname, newPath), - ); -}); + +function parseOverridesToReplacements(overrides) { + return Object.entries(overrides).map(([oldPath, newPath]) => { + 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, '\\.')), + path.resolve(__dirname, newPath), + ); + }); +} + +const moduleReplacementPlugins = [ + ...parseOverridesToReplacements(require('./components.json')), + + // Allow customisations to override the default components too + ...parseOverridesToReplacements(fileOverrides), +]; module.exports = (env, argv) => { // Establish settings based on the environment and args. From 7bd584abe03a76f0b1fd932c48c8d419994c90b4 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Mon, 28 Mar 2022 15:17:56 -0600 Subject: [PATCH 09/10] Step 13: Update documentation for skinning --- README.md | 7 ---- docs/app-load.md | 3 ++ docs/customisations.md | 6 ++-- docs/skinning thoughts.md | 68 --------------------------------------- docs/theming.md | 2 +- 5 files changed, 7 insertions(+), 79 deletions(-) delete mode 100644 docs/skinning thoughts.md diff --git a/README.md b/README.md index 919d58a1a5..1362830b73 100644 --- a/README.md +++ b/README.md @@ -264,9 +264,6 @@ top of the underlying `matrix-react-sdk`. `matrix-react-sdk` provides both the higher and lower level React components useful for building Matrix communication apps using React. -After creating a new component you must run `yarn reskindex` to regenerate -the `component-index.js` for the app (used in future for skinning). - Please note that Element is intended to run correctly without access to the public internet. So please don't depend on resources (JS libs, CSS, images, fonts) hosted by external CDNs or servers but instead please package all dependencies @@ -313,7 +310,6 @@ cd element-web yarn link matrix-js-sdk yarn link matrix-react-sdk yarn install -yarn reskindex yarn start ``` @@ -364,9 +360,6 @@ ___ When you make changes to `matrix-react-sdk` or `matrix-js-sdk` they should be automatically picked up by webpack and built. -If you add or remove any components from the Element skin, you will need to rebuild -the skin's index by running, `yarn reskindex`. - If any of these steps error with, `file table overflow`, you are probably on a mac 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. diff --git a/docs/app-load.md b/docs/app-load.md index 7908ce68b0..a043d20463 100644 --- a/docs/app-load.md +++ b/docs/app-load.md @@ -1,5 +1,8 @@ # App load order +**Dev note**: As of March 2022, the skin is no longer part of the app load order at all. The document's graphs have +been kept untouched for posterity. + Old slow flow: ![image](https://user-images.githubusercontent.com/2403652/73848963-00a2a080-4821-11ea-97d4-1200fc2638f3.png) diff --git a/docs/customisations.md b/docs/customisations.md index 5af98a01f9..fed7e616f6 100644 --- a/docs/customisations.md +++ b/docs/customisations.md @@ -34,9 +34,9 @@ default, Element Web does *not* ship with this file to prevent conflicts. ### Custom components -Instead of implementing skinning from the react-sdk, maintainers can use the above system to override components -if they wish. Maintenance and API surface compatibility are left as a responsibility for the project - the layering -in Element Web (including the react-sdk) do not make guarantees that properties/state machines won't change. +Maintainers can use the above system to override components if they wish. Maintenance and API surface compatibility are +left as a responsibility for the project - the layering in Element Web (including the react-sdk) do not make guarantees +that properties/state machines won't change. ### Component visibility customisation diff --git a/docs/skinning thoughts.md b/docs/skinning thoughts.md deleted file mode 100644 index 0466aaa035..0000000000 --- a/docs/skinning thoughts.md +++ /dev/null @@ -1,68 +0,0 @@ -== Skinning refactor == - -matrix-react-sdk - - base images - - base CSS - - all the components needed to build a workable app (including the top layer) - -element-web: the Element skin - - Element-specific classes (e.g. login header/footer) - - Element-specific themes - - light - - dark - -i.e. the only things which should go into element-web are bits which apply vector-specific skinning -specifically "Stuff that any other brand would not want to use. (e.g. Element logos, links, T&Cs)" - - Questions: - - Electron app? (should probably be a separate repo in its own right? but might as well go here for now) - - index.html & index.js? (should be in matrix-react-sdk, given the SDK is useless without them?) - -ideally matrix-react-sdk itself should ship with a default skin which actually works built in. - -status skin (can go in the same app for now) - - has status theme - - which inherits from Element light theme - - how do we share graphics between skins? - - shove them into react-sdk, or... - - guess we do ../../vector/img - - this means keeping the skin name in the images (unless /img is a shortcut to the right skin's images) - -out of scope: - - making the components more independent, so they can be used in isolation. - - that said, the bits which should probably be used by being embeded into a different app: - - login/reg - - RoomView + RoomSettings - - MessageComposer - - RoomList - - MemberList - - MemberInfo - - Voip UI - - UserSettings - - sharing different js-sdks between the different isolated modules - -other changes: - - how do we handle i18n? - - each skin should really be its own i18n project. As long as all the commonality stuff is in matrix-react-sdk this shouldn't be too bad. - - ability to associate components with a given skin - - skins/vector/src <-- components - - skins/vector/css - - skins/vector/img - - skins/vector/fonts - - gather together themes (per skin) into a single place too - - skins/vector/themes/foo/css - - skins/vector/themes/foo/img - - skins/vector/themes/foo/fonts - - ideally element-web would contain almost nothing but skins/vector directory. - - ability to entirely replace CSS rather than override it for a given theme - - e.g. if we replace `Login.js` with `StatusLogin.js`, then we should similarly be able to replace `_Login.scss` with `_StatusLogin.scss`. - -random thoughts; - - should we be able to change the entire skin at runtime (more like wordpress) - to the extent of replacing entire components? - - might pose security issues if a theme can be swapped out to replace MatrixChat or other fundamental functionality at runtime - - if so, perhaps skins & themes should converge... - ------------------ - -Immediate plan for Status: - * Implement it as a theme for the Element skin - * Ideally move skins to a sensible level (possibly even including src?) diff --git a/docs/theming.md b/docs/theming.md index 972c65e71f..10dc0008e1 100644 --- a/docs/theming.md +++ b/docs/theming.md @@ -6,7 +6,7 @@ Element app via CSS & custom imagery. 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 Jan 2017, skins are not fully supported; Element is the only available skin. +As of March 2022, skins are not fully supported; Element is the only available skin. To define a theme for Element: From 9c23f6c476955830e5e1d51527c5f358a4a087fb Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Mon, 28 Mar 2022 15:26:22 -0600 Subject: [PATCH 10/10] Step 14: Remove reskindex --- .eslintignore | 1 + .gitignore | 1 + package.json | 9 +++------ scripts/docker-link-repos.sh | 1 - scripts/fetch-develop.deps.sh | 8 -------- src/header | 15 --------------- 6 files changed, 5 insertions(+), 30 deletions(-) delete mode 100644 src/header diff --git a/.eslintignore b/.eslintignore index fabbe10497..e5cc476988 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,2 +1,3 @@ src/vector/modernizr.js +# Legacy skinning file that some people might still have src/component-index.js diff --git a/.gitignore b/.gitignore index 52152e1a11..e0a77f171d 100644 --- a/.gitignore +++ b/.gitignore @@ -16,6 +16,7 @@ electron/pub /config.json /config.json.* /config.local*.json +# Legacy skinning file that some people might still have /src/component-index.js /.tmp /webpack-stats.json diff --git a/package.json b/package.json index 52c2ffebc8..fb1928e05a 100644 --- a/package.json +++ b/package.json @@ -30,21 +30,18 @@ "i18n": "matrix-gen-i18n", "prunei18n": "matrix-prune-i18n", "diff-i18n": "cp src/i18n/strings/en_EN.json src/i18n/strings/en_EN_orig.json && matrix-gen-i18n && matrix-compare-i18n-files src/i18n/strings/en_EN_orig.json src/i18n/strings/en_EN.json", - "reskindex": "reskindex -h src/header", - "reskindex:watch": "reskindex -h src/header -w", - "reskindex:watch-react": "node scripts/yarn-sub.js matrix-react-sdk reskindex:watch", "clean": "rimraf lib webapp", "build": "yarn clean && yarn build:genfiles && yarn build:bundle", "build-stats": "yarn clean && yarn build:genfiles && yarn build:bundle-stats", "build:jitsi": "node scripts/build-jitsi.js", "build:res": "node scripts/copy-res.js", - "build:genfiles": "yarn reskindex && yarn build:res && yarn build:jitsi", + "build:genfiles": "yarn build:res && yarn build:jitsi", "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js", "build:bundle": "webpack --progress --bail --mode production", "build:bundle-stats": "webpack --progress --bail --mode production --json > webpack-stats.json", "dist": "scripts/package.sh", - "start": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n reskindex,reskindex-react,res,element-js \"yarn reskindex:watch\" \"yarn reskindex:watch-react\" \"yarn start:res\" \"yarn start:js\"", - "start:https": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n reskindex,reskindex-react,res,element-js \"yarn reskindex:watch\" \"yarn reskindex:watch-react\" \"yarn start:res\" \"yarn start:js --https\"", + "start": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n res,element-js \"yarn start:res\" \"yarn start:js\"", + "start:https": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n res,element-js \"yarn start:res\" \"yarn start:js --https\"", "start:res": "yarn build:jitsi && 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 --mode development --disable-host-check --hot", "lint": "yarn lint:types && yarn lint:js && yarn lint:style", diff --git a/scripts/docker-link-repos.sh b/scripts/docker-link-repos.sh index 54c89bacae..cf824d87ad 100644 --- a/scripts/docker-link-repos.sh +++ b/scripts/docker-link-repos.sh @@ -32,7 +32,6 @@ cd react-sdk yarn link yarn link matrix-js-sdk yarn --network-timeout=100000 install -yarn reskindex cd ../ echo "Setting up element-web with react-sdk and js-sdk packages" diff --git a/scripts/fetch-develop.deps.sh b/scripts/fetch-develop.deps.sh index 65159d1a1b..71850188a6 100755 --- a/scripts/fetch-develop.deps.sh +++ b/scripts/fetch-develop.deps.sh @@ -92,16 +92,8 @@ pushd matrix-react-sdk yarn link yarn link matrix-js-sdk yarn install --pure-lockfile -yarn reskindex popd yarn link matrix-react-sdk ############################## - -# Link the reskindex binary in place: if we used `yarn link`, -# Yarn would do this for us, but we don't because we'd have -# to define the Yarn binary prefix somewhere so it could put the -# intermediate symlinks there. Instead, we do it ourselves. -mkdir -p node_modules/.bin -ln -sfv ../matrix-react-sdk/scripts/reskindex.js node_modules/.bin/reskindex diff --git a/src/header b/src/header deleted file mode 100644 index e80658c103..0000000000 --- a/src/header +++ /dev/null @@ -1,15 +0,0 @@ -/* -Copyright 2018 New Vector Ltd - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/