Implementation of new potential skinning mechanism
With a switch to Only One Webpack™ we need a way to help developers generate the component index without a concurrent watch task. The best way to do this is to have developers import their components, but how do they do that when we support skins? The answer in this commit is to change skinning. Skinning now expects to receive your list of overrides instead of the react-sdk+branded components. For Riot this means we send over *only* the Vector components and not Vector+react-sdk. Components can then be annotated with the `replaceComponent` decorator to have them be skinnable. The decorator must take a string with the dot path of the component because we can't reliably calculate it ourselves, sadly. The decorator does a call to `getComponent` which is where the important part of the branded components not including the react-sdk is important: if the branded app includes the react-sdk then the decorator gets executed before the skin has finished loading, leading to all kinds of fun errors. This is also why the skinner lazily loads the react-sdk components to avoid importing them too early, breaking the app. The decorator will end up receiving null for a component because of the getComponent loop mentioned: the require() call is still in progress when the decorator is called, therefore we can't error out. All usages of getComponent() within the app are safe to not need such an error (the return won't be null, and developers shouldn't use getComponent() after this commit anyways). The AuthPage, being a prominent component, has been converted to demonstrate this working. Changes to riot-web are required to have this work. The reskindex script has also been altered to reflect these skinning changes - it no longer should set the react-sdk as a parent. The eventual end goal is to get rid of `getComponent()` entirely as it'll be easily replaced by imports.
This commit is contained in:
parent
225695ab5c
commit
20a615396b
14 changed files with 77 additions and 33 deletions
1
.babelrc
1
.babelrc
|
@ -15,6 +15,7 @@
|
||||||
"@babel/preset-react"
|
"@babel/preset-react"
|
||||||
],
|
],
|
||||||
"plugins": [
|
"plugins": [
|
||||||
|
["@babel/plugin-proposal-decorators", { "legacy": true }],
|
||||||
"@babel/plugin-proposal-numeric-separator",
|
"@babel/plugin-proposal-numeric-separator",
|
||||||
"@babel/plugin-proposal-class-properties",
|
"@babel/plugin-proposal-class-properties",
|
||||||
"@babel/plugin-proposal-object-rest-spread",
|
"@babel/plugin-proposal-object-rest-spread",
|
||||||
|
|
|
@ -25,6 +25,7 @@ module.exports = {
|
||||||
parserOptions: {
|
parserOptions: {
|
||||||
ecmaFeatures: {
|
ecmaFeatures: {
|
||||||
jsx: true,
|
jsx: true,
|
||||||
|
legacyDecorators: true,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
rules: {
|
rules: {
|
||||||
|
|
|
@ -113,6 +113,7 @@
|
||||||
"@babel/cli": "^7.7.5",
|
"@babel/cli": "^7.7.5",
|
||||||
"@babel/core": "^7.7.5",
|
"@babel/core": "^7.7.5",
|
||||||
"@babel/plugin-proposal-class-properties": "^7.7.4",
|
"@babel/plugin-proposal-class-properties": "^7.7.4",
|
||||||
|
"@babel/plugin-proposal-decorators": "^7.7.4",
|
||||||
"@babel/plugin-proposal-numeric-separator": "^7.7.4",
|
"@babel/plugin-proposal-numeric-separator": "^7.7.4",
|
||||||
"@babel/plugin-proposal-object-rest-spread": "^7.7.4",
|
"@babel/plugin-proposal-object-rest-spread": "^7.7.4",
|
||||||
"@babel/plugin-transform-flow-comments": "^7.7.4",
|
"@babel/plugin-transform-flow-comments": "^7.7.4",
|
||||||
|
|
|
@ -19,7 +19,6 @@ function reskindex() {
|
||||||
prevFiles = files;
|
prevFiles = files;
|
||||||
|
|
||||||
var header = args.h || args.header;
|
var header = args.h || args.header;
|
||||||
var packageJson = JSON.parse(fs.readFileSync('./package.json'));
|
|
||||||
|
|
||||||
var strm = fs.createWriteStream(componentIndexTmp);
|
var strm = fs.createWriteStream(componentIndexTmp);
|
||||||
|
|
||||||
|
@ -34,19 +33,7 @@ function reskindex() {
|
||||||
strm.write(" * so you'd just be trying to swim upstream like a salmon.\n");
|
strm.write(" * so you'd just be trying to swim upstream like a salmon.\n");
|
||||||
strm.write(" * You are not a salmon.\n");
|
strm.write(" * You are not a salmon.\n");
|
||||||
strm.write(" */\n\n");
|
strm.write(" */\n\n");
|
||||||
|
|
||||||
if (packageJson['matrix-react-parent']) {
|
|
||||||
const parentIndex = packageJson['matrix-react-parent'] +
|
|
||||||
'/lib/component-index';
|
|
||||||
strm.write(
|
|
||||||
`let components = require('${parentIndex}').components;
|
|
||||||
if (!components) {
|
|
||||||
throw new Error("'${parentIndex}' didn't export components");
|
|
||||||
}
|
|
||||||
`);
|
|
||||||
} else {
|
|
||||||
strm.write("let components = {};\n");
|
strm.write("let components = {};\n");
|
||||||
}
|
|
||||||
|
|
||||||
for (var i = 0; i < files.length; ++i) {
|
for (var i = 0; i < files.length; ++i) {
|
||||||
var file = files[i].replace('.js', '');
|
var file = files[i].replace('.js', '');
|
||||||
|
|
|
@ -28,15 +28,31 @@ class Skinner {
|
||||||
" b) A component has called getComponent at the root level",
|
" b) A component has called getComponent at the root level",
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
let comp = this.components[name];
|
|
||||||
|
const doLookup = (components) => {
|
||||||
|
if (!components) return null;
|
||||||
|
let comp = components[name];
|
||||||
// XXX: Temporarily also try 'views.' as we're currently
|
// XXX: Temporarily also try 'views.' as we're currently
|
||||||
// leaving the 'views.' off views.
|
// leaving the 'views.' off views.
|
||||||
if (!comp) {
|
if (!comp) {
|
||||||
comp = this.components['views.'+name];
|
comp = components['views.' + name];
|
||||||
|
}
|
||||||
|
return comp;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Check the skin first
|
||||||
|
let comp = doLookup(this.components);
|
||||||
|
|
||||||
|
// If that failed, check against our own components
|
||||||
|
if (!comp) {
|
||||||
|
// Lazily load our own components because they might end up calling .getComponent()
|
||||||
|
comp = doLookup(require("./component-index").components);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Just return nothing instead of erroring - the consumer should be smart enough to
|
||||||
|
// handle this at this point.
|
||||||
if (!comp) {
|
if (!comp) {
|
||||||
throw new Error("No such component: "+name);
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
// components have to be functions.
|
// components have to be functions.
|
||||||
|
|
|
@ -26,6 +26,7 @@ import SdkConfig from "../../../SdkConfig";
|
||||||
import PasswordReset from "../../../PasswordReset";
|
import PasswordReset from "../../../PasswordReset";
|
||||||
import AutoDiscoveryUtils, {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
|
import AutoDiscoveryUtils, {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
|
import AuthPage from "../../views/auth/AuthPage";
|
||||||
|
|
||||||
// Phases
|
// Phases
|
||||||
// Show controls to configure server details
|
// Show controls to configure server details
|
||||||
|
@ -367,7 +368,6 @@ module.exports = createReactClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function() {
|
render: function() {
|
||||||
const AuthPage = sdk.getComponent("auth.AuthPage");
|
|
||||||
const AuthHeader = sdk.getComponent("auth.AuthHeader");
|
const AuthHeader = sdk.getComponent("auth.AuthHeader");
|
||||||
const AuthBody = sdk.getComponent("auth.AuthBody");
|
const AuthBody = sdk.getComponent("auth.AuthBody");
|
||||||
|
|
||||||
|
|
|
@ -26,6 +26,7 @@ import SdkConfig from '../../../SdkConfig';
|
||||||
import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
|
import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
|
||||||
import AutoDiscoveryUtils, {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
|
import AutoDiscoveryUtils, {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
|
||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
|
import AuthPage from "../../views/auth/AuthPage";
|
||||||
|
|
||||||
// For validating phone numbers without country codes
|
// For validating phone numbers without country codes
|
||||||
const PHONE_NUMBER_REGEX = /^[0-9()\-\s]*$/;
|
const PHONE_NUMBER_REGEX = /^[0-9()\-\s]*$/;
|
||||||
|
@ -608,7 +609,6 @@ module.exports = createReactClass({
|
||||||
|
|
||||||
render: function() {
|
render: function() {
|
||||||
const Loader = sdk.getComponent("elements.Spinner");
|
const Loader = sdk.getComponent("elements.Spinner");
|
||||||
const AuthPage = sdk.getComponent("auth.AuthPage");
|
|
||||||
const AuthHeader = sdk.getComponent("auth.AuthHeader");
|
const AuthHeader = sdk.getComponent("auth.AuthHeader");
|
||||||
const AuthBody = sdk.getComponent("auth.AuthBody");
|
const AuthBody = sdk.getComponent("auth.AuthBody");
|
||||||
const loader = this.isBusy() ? <div className="mx_Login_loader"><Loader /></div> : null;
|
const loader = this.isBusy() ? <div className="mx_Login_loader"><Loader /></div> : null;
|
||||||
|
|
|
@ -20,6 +20,7 @@ import PropTypes from 'prop-types';
|
||||||
import sdk from '../../../index';
|
import sdk from '../../../index';
|
||||||
import MatrixClientPeg from '../../../MatrixClientPeg';
|
import MatrixClientPeg from '../../../MatrixClientPeg';
|
||||||
import { _t } from '../../../languageHandler';
|
import { _t } from '../../../languageHandler';
|
||||||
|
import AuthPage from "../../views/auth/AuthPage";
|
||||||
|
|
||||||
module.exports = createReactClass({
|
module.exports = createReactClass({
|
||||||
displayName: 'PostRegistration',
|
displayName: 'PostRegistration',
|
||||||
|
@ -59,7 +60,6 @@ module.exports = createReactClass({
|
||||||
render: function() {
|
render: function() {
|
||||||
const ChangeDisplayName = sdk.getComponent('settings.ChangeDisplayName');
|
const ChangeDisplayName = sdk.getComponent('settings.ChangeDisplayName');
|
||||||
const ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
|
const ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
|
||||||
const AuthPage = sdk.getComponent('auth.AuthPage');
|
|
||||||
const AuthHeader = sdk.getComponent('auth.AuthHeader');
|
const AuthHeader = sdk.getComponent('auth.AuthHeader');
|
||||||
const AuthBody = sdk.getComponent("auth.AuthBody");
|
const AuthBody = sdk.getComponent("auth.AuthBody");
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -30,6 +30,7 @@ import AutoDiscoveryUtils, {ValidatedServerConfig} from "../../../utils/AutoDisc
|
||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
import * as Lifecycle from '../../../Lifecycle';
|
import * as Lifecycle from '../../../Lifecycle';
|
||||||
import MatrixClientPeg from "../../../MatrixClientPeg";
|
import MatrixClientPeg from "../../../MatrixClientPeg";
|
||||||
|
import AuthPage from "../../views/auth/AuthPage";
|
||||||
|
|
||||||
// Phases
|
// Phases
|
||||||
// Show controls to configure server details
|
// Show controls to configure server details
|
||||||
|
@ -576,7 +577,6 @@ module.exports = createReactClass({
|
||||||
render: function() {
|
render: function() {
|
||||||
const AuthHeader = sdk.getComponent('auth.AuthHeader');
|
const AuthHeader = sdk.getComponent('auth.AuthHeader');
|
||||||
const AuthBody = sdk.getComponent("auth.AuthBody");
|
const AuthBody = sdk.getComponent("auth.AuthBody");
|
||||||
const AuthPage = sdk.getComponent('auth.AuthPage');
|
|
||||||
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
||||||
|
|
||||||
let errorText;
|
let errorText;
|
||||||
|
|
|
@ -24,6 +24,7 @@ import Modal from '../../../Modal';
|
||||||
import MatrixClientPeg from "../../../MatrixClientPeg";
|
import MatrixClientPeg from "../../../MatrixClientPeg";
|
||||||
import {sendLoginRequest} from "../../../Login";
|
import {sendLoginRequest} from "../../../Login";
|
||||||
import url from 'url';
|
import url from 'url';
|
||||||
|
import AuthPage from "../../views/auth/AuthPage";
|
||||||
|
|
||||||
const LOGIN_VIEW = {
|
const LOGIN_VIEW = {
|
||||||
LOADING: 1,
|
LOADING: 1,
|
||||||
|
@ -284,7 +285,6 @@ export default class SoftLogout extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const AuthPage = sdk.getComponent("auth.AuthPage");
|
|
||||||
const AuthHeader = sdk.getComponent("auth.AuthHeader");
|
const AuthHeader = sdk.getComponent("auth.AuthHeader");
|
||||||
const AuthBody = sdk.getComponent("auth.AuthBody");
|
const AuthBody = sdk.getComponent("auth.AuthBody");
|
||||||
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
/*
|
/*
|
||||||
Copyright 2015, 2016 OpenMarket Ltd
|
Copyright 2015, 2016 OpenMarket Ltd
|
||||||
Copyright 2019 New Vector Ltd
|
Copyright 2019 New Vector Ltd
|
||||||
|
Copyright 2019 The Matrix.org Foundation C.I.C.
|
||||||
|
|
||||||
Licensed under the Apache License, Version 2.0 (the "License");
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
you may not use this file except in compliance with the License.
|
you may not use this file except in compliance with the License.
|
||||||
|
@ -16,22 +17,21 @@ limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import createReactClass from 'create-react-class';
|
|
||||||
import sdk from '../../../index';
|
import sdk from '../../../index';
|
||||||
|
import {replaceComponent} from "../../../utils/replaceComponent";
|
||||||
|
|
||||||
module.exports = createReactClass({
|
@replaceComponent("views.auth.AuthPage")
|
||||||
displayName: 'AuthPage',
|
export default class AuthPage extends React.PureComponent {
|
||||||
|
render() {
|
||||||
render: function() {
|
|
||||||
const AuthFooter = sdk.getComponent('auth.AuthFooter');
|
const AuthFooter = sdk.getComponent('auth.AuthFooter');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="mx_AuthPage">
|
<div className="mx_AuthPage">
|
||||||
<div className="mx_AuthPage_modal">
|
<div className="mx_AuthPage_modal">
|
||||||
{ this.props.children }
|
{this.props.children}
|
||||||
</div>
|
</div>
|
||||||
<AuthFooter />
|
<AuthFooter />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
},
|
}
|
||||||
});
|
}
|
||||||
|
|
|
@ -17,10 +17,10 @@ limitations under the License.
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import sdk from '../../../index';
|
import sdk from '../../../index';
|
||||||
import SdkConfig from '../../../SdkConfig';
|
import SdkConfig from '../../../SdkConfig';
|
||||||
|
import AuthPage from "./AuthPage";
|
||||||
|
|
||||||
export default class Welcome extends React.PureComponent {
|
export default class Welcome extends React.PureComponent {
|
||||||
render() {
|
render() {
|
||||||
const AuthPage = sdk.getComponent("auth.AuthPage");
|
|
||||||
const EmbeddedPage = sdk.getComponent('structures.EmbeddedPage');
|
const EmbeddedPage = sdk.getComponent('structures.EmbeddedPage');
|
||||||
const LanguageSelector = sdk.getComponent('auth.LanguageSelector');
|
const LanguageSelector = sdk.getComponent('auth.LanguageSelector');
|
||||||
|
|
||||||
|
|
22
src/utils/replaceComponent.ts
Normal file
22
src/utils/replaceComponent.ts
Normal file
|
@ -0,0 +1,22 @@
|
||||||
|
/*
|
||||||
|
Copyright 2019 The Matrix.org Foundation C.I.C.
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import sdk from '../index';
|
||||||
|
|
||||||
|
export function replaceComponent(name: string, origComponent: React.Component) {
|
||||||
|
return () => sdk.getComponent(name) || origComponent;
|
||||||
|
}
|
16
yarn.lock
16
yarn.lock
|
@ -303,6 +303,15 @@
|
||||||
"@babel/helper-create-class-features-plugin" "^7.7.4"
|
"@babel/helper-create-class-features-plugin" "^7.7.4"
|
||||||
"@babel/helper-plugin-utils" "^7.0.0"
|
"@babel/helper-plugin-utils" "^7.0.0"
|
||||||
|
|
||||||
|
"@babel/plugin-proposal-decorators@^7.7.4":
|
||||||
|
version "7.7.4"
|
||||||
|
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.7.4.tgz#58c1e21d21ea12f9f5f0a757e46e687b94a7ab2b"
|
||||||
|
integrity sha512-GftcVDcLCwVdzKmwOBDjATd548+IE+mBo7ttgatqNDR7VG7GqIuZPtRWlMLHbhTXhcnFZiGER8iIYl1n/imtsg==
|
||||||
|
dependencies:
|
||||||
|
"@babel/helper-create-class-features-plugin" "^7.7.4"
|
||||||
|
"@babel/helper-plugin-utils" "^7.0.0"
|
||||||
|
"@babel/plugin-syntax-decorators" "^7.7.4"
|
||||||
|
|
||||||
"@babel/plugin-proposal-dynamic-import@^7.7.4":
|
"@babel/plugin-proposal-dynamic-import@^7.7.4":
|
||||||
version "7.7.4"
|
version "7.7.4"
|
||||||
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.7.4.tgz#dde64a7f127691758cbfed6cf70de0fa5879d52d"
|
resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.7.4.tgz#dde64a7f127691758cbfed6cf70de0fa5879d52d"
|
||||||
|
@ -358,6 +367,13 @@
|
||||||
dependencies:
|
dependencies:
|
||||||
"@babel/helper-plugin-utils" "^7.0.0"
|
"@babel/helper-plugin-utils" "^7.0.0"
|
||||||
|
|
||||||
|
"@babel/plugin-syntax-decorators@^7.7.4":
|
||||||
|
version "7.7.4"
|
||||||
|
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.7.4.tgz#3c91cfee2a111663ff3ac21b851140f5a52a4e0b"
|
||||||
|
integrity sha512-0oNLWNH4k5ZbBVfAwiTU53rKFWIeTh6ZlaWOXWJc4ywxs0tjz5fc3uZ6jKAnZSxN98eXVgg7bJIuzjX+3SXY+A==
|
||||||
|
dependencies:
|
||||||
|
"@babel/helper-plugin-utils" "^7.0.0"
|
||||||
|
|
||||||
"@babel/plugin-syntax-dynamic-import@^7.7.4":
|
"@babel/plugin-syntax-dynamic-import@^7.7.4":
|
||||||
version "7.7.4"
|
version "7.7.4"
|
||||||
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.7.4.tgz#29ca3b4415abfe4a5ec381e903862ad1a54c3aec"
|
resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.7.4.tgz#29ca3b4415abfe4a5ec381e903862ad1a54c3aec"
|
||||||
|
|
Loading…
Reference in a new issue