More fixing up of vector skin

package.json

@@ -10,9 +10,9 @@
   "license": "Apache-2.0",
   "style": "bundle.css",
   "scripts": {
-    "reskindex": "reskindex base -h src/skins/base/header",
+    "reskindex": "reskindex vector -h src/skins/vector/header",
-    "build": "NODE_ENV=production browserify --ignore olm -t reactify src/index.js | uglifyjs -c -m -o vector/bundle.js",
+    "build": "NODE_ENV=production browserify --ignore olm -t reactify vector/index.js | uglifyjs -c -m -o vector/bundle.js",
-    "start": "parallelshell 'watchify --ignore olm -v -d -t reactify src/index.js -o vector/bundle.js' 'npm run start:skins:css' 'http-server vector'",
+    "start": "parallelshell 'watchify --ignore olm -v -d -t reactify vector/index.js -o vector/bundle.js' 'npm run start:skins:css' 'http-server vector'",
     "build:skins:js": "babel src/skins -d lib/skins --source-maps",
     "build:skins:css": "catw 'src/skins/base/css/**/*.css' -o vector/bundle.css -c uglifycss --no-watch",
     "start:skins:css": "catw 'src/skins/base/css/**/*.css' -o vector/bundle.css",

src/skins/vector/header

@@ -0,0 +1,15 @@
+/*
+Copyright 2015 OpenMarket 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.
+*/

src/skins/vector/skindex.js

@@ -0,0 +1,92 @@
+/*
+Copyright 2015 OpenMarket 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.
+*/
+
+/*
+ * THIS FILE IS AUTO-GENERATED
+ * You can edit it you like, but your changes will be overwritten,
+ * so you'd just be trying to swim upstream like a salmon.
+ * You are not a salmon.
+ */
+
+var skin = {
+    atoms: {},
+    molecules: {},
+    organisms: {},
+    templates: {},
+    pages: {}
+};
+
+skin.atoms.EditableText = require('./views/atoms/EditableText');
+skin.atoms.EnableNotificationsButton = require('./views/atoms/EnableNotificationsButton');
+skin.atoms.ImageView = require('./views/atoms/ImageView');
+skin.atoms.LogoutButton = require('./views/atoms/LogoutButton');
+skin.atoms.MemberAvatar = require('./views/atoms/MemberAvatar');
+skin.atoms.MessageTimestamp = require('./views/atoms/MessageTimestamp');
+skin.atoms.RoomAvatar = require('./views/atoms/RoomAvatar');
+skin.atoms.create_room = {};
+skin.atoms.create_room.CreateRoomButton = require('./views/atoms/create_room/CreateRoomButton');
+skin.atoms.create_room.Presets = require('./views/atoms/create_room/Presets');
+skin.atoms.create_room.RoomAlias = require('./views/atoms/create_room/RoomAlias');
+skin.atoms.voip = {};
+skin.atoms.voip.VideoFeed = require('./views/atoms/voip/VideoFeed');
+skin.molecules.BottomLeftMenu = require('./views/molecules/BottomLeftMenu');
+skin.molecules.ChangeAvatar = require('./views/molecules/ChangeAvatar');
+skin.molecules.ChangePassword = require('./views/molecules/ChangePassword');
+skin.molecules.ContextualMenu = require('./views/molecules/ContextualMenu');
+skin.molecules.DateSeparator = require('./views/molecules/DateSeparator');
+skin.molecules.EventAsTextTile = require('./views/molecules/EventAsTextTile');
+skin.molecules.MEmoteTile = require('./views/molecules/MEmoteTile');
+skin.molecules.MFileTile = require('./views/molecules/MFileTile');
+skin.molecules.MImageTile = require('./views/molecules/MImageTile');
+skin.molecules.MNoticeTile = require('./views/molecules/MNoticeTile');
+skin.molecules.MRoomMemberTile = require('./views/molecules/MRoomMemberTile');
+skin.molecules.MTextTile = require('./views/molecules/MTextTile');
+skin.molecules.MatrixToolbar = require('./views/molecules/MatrixToolbar');
+skin.molecules.MemberInfo = require('./views/molecules/MemberInfo');
+skin.molecules.MemberTile = require('./views/molecules/MemberTile');
+skin.molecules.MessageComposer = require('./views/molecules/MessageComposer');
+skin.molecules.MessageTile = require('./views/molecules/MessageTile');
+skin.molecules.ProgressBar = require('./views/molecules/ProgressBar');
+skin.molecules.RoomCreate = require('./views/molecules/RoomCreate');
+skin.molecules.RoomDropTarget = require('./views/molecules/RoomDropTarget');
+skin.molecules.RoomHeader = require('./views/molecules/RoomHeader');
+skin.molecules.RoomSettings = require('./views/molecules/RoomSettings');
+skin.molecules.RoomTile = require('./views/molecules/RoomTile');
+skin.molecules.SenderProfile = require('./views/molecules/SenderProfile');
+skin.molecules.ServerConfig = require('./views/molecules/ServerConfig');
+skin.molecules.UnknownMessageTile = require('./views/molecules/UnknownMessageTile');
+skin.molecules.UserSelector = require('./views/molecules/UserSelector');
+skin.molecules.voip = {};
+skin.molecules.voip.CallView = require('./views/molecules/voip/CallView');
+skin.molecules.voip.IncomingCallBox = require('./views/molecules/voip/IncomingCallBox');
+skin.molecules.voip.VideoView = require('./views/molecules/voip/VideoView');
+skin.organisms.CreateRoom = require('./views/organisms/CreateRoom');
+skin.organisms.ErrorDialog = require('./views/organisms/ErrorDialog');
+skin.organisms.LeftPanel = require('./views/organisms/LeftPanel');
+skin.organisms.LogoutPrompt = require('./views/organisms/LogoutPrompt');
+skin.organisms.MemberList = require('./views/organisms/MemberList');
+skin.organisms.Notifier = require('./views/organisms/Notifier');
+skin.organisms.QuestionDialog = require('./views/organisms/QuestionDialog');
+skin.organisms.RightPanel = require('./views/organisms/RightPanel');
+skin.organisms.RoomDirectory = require('./views/organisms/RoomDirectory');
+skin.organisms.RoomList = require('./views/organisms/RoomList');
+skin.organisms.RoomView = require('./views/organisms/RoomView');
+skin.organisms.UserSettings = require('./views/organisms/UserSettings');
+skin.pages.MatrixChat = require('./views/pages/MatrixChat');
+skin.templates.Login = require('./views/templates/Login');
+skin.templates.Register = require('./views/templates/Register');
+
+module.exports = skin;

src/skins/vector/skinfo.json

@@ -0,0 +1,3 @@
+{
+    "baseSkin": ""
+}

src/skins/vector/views/molecules/EventAsTextTile.js

@@ -20,7 +20,7 @@ var React = require('react');
 
 var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
 var EventAsTextTileController = require('matrix-react-sdk/lib/controllers/molecules/EventAsTextTile')
-var ComponentBroker = require('../../../../src/ComponentBroker');
+var sdk = require('matrix-react-sdk')
 var MessageTimestamp = ComponentBroker.get('atoms/MessageTimestamp');
 var MemberAvatar = ComponentBroker.get('atoms/MemberAvatar');
 var TextForEvent = require("../../../../src/TextForEvent");
@@ -30,6 +30,9 @@ module.exports = React.createClass({
     mixins: [EventAsTextTileController],
 
     render: function() {
+        var MessageTimestamp = sdk.getComponent('atoms.MessageTimestamp');
+        var MemberAvatar = sdk.getComponent('atoms.MemberAvatar');
+
         var text = TextForEvent.textForEvent(this.props.mxEvent);
         if (text == null || text.length == 0) return null;
 

src/skins/vector/views/molecules/MImageTile.js

@@ -23,9 +23,7 @@ var MImageTileController = require('matrix-react-sdk/lib/controllers/molecules/M
 
 var MatrixClientPeg = require('../../../../src/MatrixClientPeg');
 var Modal = require('../../../../src/Modal');
-var ComponentBroker = require('../../../../src/ComponentBroker');
+var sdk = require('matrix-react-sdk')
-
-var ImageView = ComponentBroker.get("atoms/ImageView");
 
 module.exports = React.createClass({
     displayName: 'MImageTile',
@@ -59,6 +57,7 @@ module.exports = React.createClass({
             ev.preventDefault();
             var content = this.props.mxEvent.getContent();
             var httpUrl = MatrixClientPeg.get().mxcUrlToHttp(content.url);
+            var ImageView = sdk.getComponent("atoms.ImageView");
             Modal.createDialog(ImageView, {
                 src: httpUrl,
                 width: content.info.w,

src/skins/vector/views/molecules/MRoomMemberTile.js

@@ -21,10 +21,8 @@ var React = require('react');
 var MRoomMemberTileController = require('matrix-react-sdk/lib/controllers/molecules/MRoomMemberTile')
 
 var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
-var ComponentBroker = require('../../../../src/ComponentBroker');
+var sdk = require('matrix-react-sdk')
 var TextForEvent = require('../../../../src/TextForEvent');
-var MessageTimestamp = ComponentBroker.get('atoms/MessageTimestamp');
-var MemberAvatar = ComponentBroker.get('atoms/MemberAvatar');
 
 module.exports = React.createClass({
     displayName: 'MRoomMemberTile',
@@ -39,6 +37,8 @@ module.exports = React.createClass({
         var timestamp = this.props.last ? <MessageTimestamp ts={this.props.mxEvent.getTs()} /> : null;
         var text = this.getMemberEventText();
         if (!text) return <div/>;
+        var MessageTimestamp = sdk.getComponent('atoms.MessageTimestamp');
+        var MemberAvatar = sdk.getComponent('atoms.MemberAvatar');
         return (
             <div className="mx_MessageTile mx_MessageTile_notice">
                 <div className="mx_MessageTile_avatar">

src/skins/vector/views/molecules/MatrixToolbar.js

@@ -18,23 +18,21 @@ limitations under the License.
 
 var React = require('react');
 
-var ComponentBroker = require('../../../../src/ComponentBroker');
+var sdk = require('matrix-react-sdk')
-
-var LogoutButton = ComponentBroker.get("atoms/LogoutButton");
-var EnableNotificationsButton = ComponentBroker.get("atoms/EnableNotificationsButton");
 
 var MatrixToolbarController = require('matrix-react-sdk/lib/controllers/molecules/MatrixToolbar')
-var Notifier = ComponentBroker.get('organisms/Notifier');
 
 module.exports = React.createClass({
     displayName: 'MatrixToolbar',
     mixins: [MatrixToolbarController],
 
     hideToolbar: function() {
+        var Notifier = sdk.getComponent('organisms.Notifier');
         Notifier.setToolbarHidden(true);
     },
 
     render: function() {
+        var EnableNotificationsButton = sdk.getComponent("atoms.EnableNotificationsButton");
         return (
             <div className="mx_MatrixToolbar">
                 You are not receiving desktop notifications. <EnableNotificationsButton />

src/skins/vector/views/molecules/MemberInfo.js

@@ -20,8 +20,6 @@ var React = require('react');
 
 var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
 var MemberInfoController = require('matrix-react-sdk/lib/controllers/molecules/MemberInfo')
-var ComponentBroker = require('../../../../src/ComponentBroker');
-var MemberAvatar = ComponentBroker.get('atoms/MemberAvatar');
 
 module.exports = React.createClass({
     displayName: 'MemberInfo',

src/skins/vector/views/molecules/MemberTile.js

@@ -19,13 +19,10 @@ limitations under the License.
 var React = require('react');
 
 var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
-var ComponentBroker = require('../../../../src/ComponentBroker');
+var sdk = require('matrix-react-sdk')
 var Modal = require("../../../../src/Modal");
 var ContextualMenu = require("../../../../src/ContextualMenu");
 var MemberTileController = require('matrix-react-sdk/lib/controllers/molecules/MemberTile')
-var MemberInfo = ComponentBroker.get('molecules/MemberInfo');
-var ErrorDialog = ComponentBroker.get("organisms/ErrorDialog");
-var MemberAvatar = ComponentBroker.get('atoms/MemberAvatar');
 
 // The Lato WOFF doesn't include sensible combining diacritics, so Chrome chokes on rendering them.
 // Revert to Arial when this happens, which on OSX works at least.
@@ -46,6 +43,7 @@ module.exports = React.createClass({
     onClick: function(e) {
         var self = this;
         self.setState({ 'menu': true });
+        var MemberInfo = sdk.getComponent('molecules.MemberInfo');
         ContextualMenu.createMenu(MemberInfo, {
             member: self.props.member,
             right: window.innerWidth - e.pageX,
@@ -153,6 +151,7 @@ module.exports = React.createClass({
                 </div>
         }
 
+        var MemberAvatar = sdk.getComponent('atoms.MemberAvatar');
         return (
             <div className={mainClassName} title={ this.getPowerLabel() } onClick={ this.onClick } onMouseEnter={ this.mouseEnter } onMouseLeave={ this.mouseLeave }>
                 <div className="mx_MemberTile_avatar">

src/skins/vector/views/molecules/MessageComposer.js

@@ -22,8 +22,7 @@ var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
 var MessageComposerController = require('matrix-react-sdk/lib/controllers/molecules/MessageComposer')
 var ContentMessages = require("../../../../src/ContentMessages");
 
-var ComponentBroker = require('../../../../src/ComponentBroker');
+var sdk = require('matrix-react-sdk')
-var MemberAvatar = ComponentBroker.get('atoms/MemberAvatar');
 
 module.exports = React.createClass({
     displayName: 'MessageComposer',
@@ -45,6 +44,7 @@ module.exports = React.createClass({
     render: function() {
         var me = this.props.room.getMember(MatrixClientPeg.get().credentials.userId);
         var uploadInputStyle = {display: 'none'};
+        var MemberAvatar = sdk.getComponent('atoms.MemberAvatar');
         return (
             <div className="mx_MessageComposer">
                 <div className="mx_MessageComposer_wrapper">

src/skins/vector/views/molecules/MessageTile.js

@@ -21,21 +21,7 @@ var React = require('react');
 var classNames = require("classnames");
 
 var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
-var ComponentBroker = require('../../../../src/ComponentBroker');
+var sdk = require('matrix-react-sdk')
-
-var MessageTimestamp = ComponentBroker.get('atoms/MessageTimestamp');
-var SenderProfile = ComponentBroker.get('molecules/SenderProfile');
-var MemberAvatar = ComponentBroker.get('atoms/MemberAvatar');
-
-var UnknownMessageTile = ComponentBroker.get('molecules/UnknownMessageTile');
-
-var tileTypes = {
-    'm.text': ComponentBroker.get('molecules/MTextTile'),
-    'm.notice': ComponentBroker.get('molecules/MNoticeTile'),
-    'm.emote': ComponentBroker.get('molecules/MEmoteTile'),
-    'm.image': ComponentBroker.get('molecules/MImageTile'),
-    'm.file': ComponentBroker.get('molecules/MFileTile')
-};
 
 var MessageTileController = require('matrix-react-sdk/lib/controllers/molecules/MessageTile')
 
@@ -44,6 +30,20 @@ module.exports = React.createClass({
     mixins: [MessageTileController],
 
     render: function() {
+        var MessageTimestamp = sdk.getComponent('atoms.MessageTimestamp');
+        var SenderProfile = sdk.getComponent('molecules.SenderProfile');
+        var MemberAvatar = sdk.getComponent('atoms.MemberAvatar');
+
+        var UnknownMessageTile = sdk.getComponent('molecules.UnknownMessageTile');
+
+        var tileTypes = {
+            'm.text': sdk.getComponent('molecules.MTextTile'),
+            'm.notice': sdk.getComponent('molecules.MNoticeTile'),
+            'm.emote': sdk.getComponent('molecules.MEmoteTile'),
+            'm.image': sdk.getComponent('molecules.MImageTile'),
+            'm.file': sdk.getComponent('molecules.MFileTile')
+        };
+
         var content = this.props.mxEvent.getContent();
         var msgtype = content.msgtype;
         var TileType = UnknownMessageTile;

src/skins/vector/views/molecules/RoomHeader.js

@@ -17,12 +17,10 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
-var ComponentBroker = require('../../../../src/ComponentBroker');
+var sdk = require('matrix-react-sdk')
 
 var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
 var RoomHeaderController = require('matrix-react-sdk/lib/controllers/molecules/RoomHeader')
-var EditableText = ComponentBroker.get("atoms/EditableText");
-var RoomAvatar = ComponentBroker.get('atoms/RoomAvatar');
 
 module.exports = React.createClass({
     displayName: 'RoomHeader',
@@ -39,6 +37,8 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        var EditableText = sdk.getComponent("atoms.EditableText");
+        var RoomAvatar = sdk.getComponent('atoms.RoomAvatar');
 
         var header;
         if (this.props.simpleHeader) {

src/skins/vector/views/molecules/RoomTile.js

@@ -23,8 +23,7 @@ var RoomTileController = require('matrix-react-sdk/lib/controllers/molecules/Roo
 
 var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
 
-var ComponentBroker = require('../../../../src/ComponentBroker');
+var sdk = require('matrix-react-sdk')
-var RoomAvatar = ComponentBroker.get('atoms/RoomAvatar');
 
 module.exports = React.createClass({
     displayName: 'RoomTile',
@@ -58,6 +57,7 @@ module.exports = React.createClass({
             nameCell = <div className="mx_RoomTile_name">{name}</div>;
         }
         */
+        var RoomAvatar = sdk.getComponent('atoms.RoomAvatar');
         return (
             <div className={classes} onClick={this.onClick}>
                 <div className="mx_RoomTile_avatar">

src/skins/vector/views/molecules/ServerConfig.js

@@ -18,9 +18,7 @@ limitations under the License.
 
 var React = require('react');
 var Modal = require('../../../../src/Modal');
-var ComponentBroker = require('../../../../src/ComponentBroker');
+var sdk = require('matrix-react-sdk')
-
-var ErrorDialog = ComponentBroker.get('organisms/ErrorDialog');
 
 var ServerConfigController = require('matrix-react-sdk/lib/controllers/molecules/ServerConfig')
 
@@ -29,6 +27,7 @@ module.exports = React.createClass({
     mixins: [ServerConfigController],
 
     showHelpPopup: function() {
+        var ErrorDialog = sdk.getComponent('organisms.ErrorDialog');
         Modal.createDialog(ErrorDialog, {
           title: 'Custom Server Options',
           description: "You can use the custom server options to log into other Matrix servers by specifying a different Home server URL. This allows you to use Vector with an existing Matrix account on a different Home server. You can also set a cutom Identity server but this will affect people ability to find you if you use a server in a group other than tha main Matrix.org group.",

src/skins/vector/views/molecules/voip/CallView.js

@@ -19,11 +19,10 @@ limitations under the License.
 var React = require('react');
 
 var MatrixClientPeg = require("../../../../../src/MatrixClientPeg");
-var ComponentBroker = require('../../../../../src/ComponentBroker');
+var sdk = require('matrix-react-sdk')
 var CallViewController = require(
-    "../../../../../src/controllers/molecules/voip/CallView"
+    "matrix-react-sdk/lib/controllers/molecules/voip/CallView"
 );
-var VideoView = ComponentBroker.get('molecules/voip/VideoView');
 
 module.exports = React.createClass({
     displayName: 'CallView',
@@ -34,6 +33,7 @@ module.exports = React.createClass({
     },
 
     render: function(){
+        var VideoView = sdk.getComponent('molecules.voip.VideoView');
         return (
             <VideoView ref="video"/>
         );

src/skins/vector/views/molecules/voip/VideoView.js

@@ -19,9 +19,8 @@ limitations under the License.
 var React = require('react');
 
 var MatrixClientPeg = require("../../../../../src/MatrixClientPeg");
-var ComponentBroker = require('../../../../../src/ComponentBroker');
+var sdk = require('matrix-react-sdk')
 var VideoViewController = require('matrix-react-sdk/lib/controllers/molecules/voip/VideoView')
-var VideoFeed = ComponentBroker.get('atoms/voip/VideoFeed');
 
 module.exports = React.createClass({
     displayName: 'VideoView',
@@ -36,6 +35,7 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        var VideoFeed = sdk.getComponent('atoms.voip.VideoFeed');
         return (
             <div className="mx_VideoView">
                 <div className="mx_VideoView_remoteVideoFeed">

src/skins/vector/views/organisms/CreateRoom.js

@@ -20,16 +20,10 @@ var React = require('react');
 
 var CreateRoomController = require('matrix-react-sdk/lib/controllers/organisms/CreateRoom')
 
-var ComponentBroker = require('../../../../src/ComponentBroker');
+var sdk = require('matrix-react-sdk')
 
 var PresetValues = require('../../../../src/controllers/atoms/create_room/Presets').Presets;
 
-var CreateRoomButton = ComponentBroker.get("atoms/create_room/CreateRoomButton");
-var RoomAlias = ComponentBroker.get("atoms/create_room/RoomAlias");
-var Presets = ComponentBroker.get("atoms/create_room/Presets");
-var UserSelector = ComponentBroker.get("molecules/UserSelector");
-var RoomHeader = ComponentBroker.get("molecules/RoomHeader");
-
 var Loader = require("react-loader");
 
 
@@ -140,6 +134,13 @@ module.exports = React.createClass({
                     </div>
                 );
             }
+
+            var CreateRoomButton = sdk.getComponent("atoms.create_room.CreateRoomButton");
+            var RoomAlias = sdk.getComponent("atoms.create_room.RoomAlias");
+            var Presets = sdk.getComponent("atoms.create_room.Presets");
+            var UserSelector = sdk.getComponent("molecules.UserSelector");
+            var RoomHeader = sdk.getComponent("molecules.RoomHeader");
+
             return (
                 <div className="mx_CreateRoom">
                     <RoomHeader simpleHeader="Create room" />

src/skins/vector/views/organisms/LeftPanel.js

@@ -17,17 +17,17 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
-var ComponentBroker = require('../../../../src/ComponentBroker');
+var sdk = require('matrix-react-sdk')
-
-var RoomList = ComponentBroker.get('organisms/RoomList');
-var BottomLeftMenu = ComponentBroker.get('molecules/BottomLeftMenu');
-var IncomingCallBox = ComponentBroker.get('molecules/voip/IncomingCallBox');
-var RoomCreate = ComponentBroker.get('molecules/RoomCreate');
 
 module.exports = React.createClass({
     displayName: 'LeftPanel',
 
     render: function() {
+        var RoomList = sdk.getComponent('organisms.RoomList');
+        var BottomLeftMenu = sdk.getComponent('molecules.BottomLeftMenu');
+        var IncomingCallBox = sdk.getComponent('molecules.voip.IncomingCallBox');
+        var RoomCreate = sdk.getComponent('molecules.RoomCreate');
+
         return (
             <aside className="mx_LeftPanel">
                 <img className="mx_LeftPanel_hideButton" src="img/hide.png" width="32" height="32" alt="<"/>

src/skins/vector/views/organisms/MemberList.js

@@ -21,10 +21,7 @@ var classNames = require('classnames');
 
 var MemberListController = require('matrix-react-sdk/lib/controllers/organisms/MemberList')
 
-var ComponentBroker = require('../../../../src/ComponentBroker');
+var sdk = require('matrix-react-sdk')
-
-var MemberTile = ComponentBroker.get("molecules/MemberTile");
-var EditableText = ComponentBroker.get("atoms/EditableText");
 
 
 module.exports = React.createClass({
@@ -48,6 +45,8 @@ module.exports = React.createClass({
     },
 
     makeMemberTiles: function() {
+        var MemberTile = sdk.getComponent("molecules.MemberTile");
+
         var self = this;
         return Object.keys(self.state.memberDict).map(function(userId) {
             var m = self.state.memberDict[userId];
@@ -81,6 +80,7 @@ module.exports = React.createClass({
             mx_MemberTile_inviteEditing: this.state.editing,
         });
 
+        var EditableText = sdk.getComponent("atoms.EditableText");
         return (
             <div className={ classes } onClick={ this.onClickInvite } >
                 <div className="mx_MemberTile_avatar"><img src="img/create-big.png" width="40" height="40" alt=""/></div>            

src/skins/vector/views/organisms/RightPanel.js

@@ -17,9 +17,7 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
-var ComponentBroker = require('../../../../src/ComponentBroker');
+var sdk = require('matrix-react-sdk')
-
-var MemberList = ComponentBroker.get('organisms/MemberList');
 
 module.exports = React.createClass({
     displayName: 'RightPanel',
@@ -47,6 +45,7 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        var MemberList = sdk.getComponent('organisms.MemberList');
         var buttonGroup;
         var panel;
         if (this.props.roomId) {

src/skins/vector/views/organisms/RoomDirectory.js

@@ -20,9 +20,7 @@ var React = require('react');
 
 var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
 var Modal = require("../../../../src/Modal");
-var ComponentBroker = require('../../../../src/ComponentBroker');
+var sdk = require('matrix-react-sdk')
-var ErrorDialog = ComponentBroker.get("organisms/ErrorDialog");
-var RoomHeader = ComponentBroker.get('molecules/RoomHeader');
 var dis = require("../../../../src/dispatcher");
 
 var Loader = require("react-loader");
@@ -44,6 +42,7 @@ module.exports = React.createClass({
             if (err) {
                 self.setState({ loading: false });                
                 console.error("Failed to get publicRooms: %s", JSON.stringify(err));
+                var ErrorDialog = sdk.getComponent("organisms.ErrorDialog");
                 Modal.createDialog(ErrorDialog, {
                     title: "Failed to get public room list",
                     description: err.message
@@ -128,6 +127,7 @@ module.exports = React.createClass({
             );
         }
 
+        var RoomHeader = sdk.getComponent('molecules.RoomHeader');
         return (
             <div className="mx_RoomDirectory">
                 <RoomHeader simpleHeader="Public Rooms" />

src/skins/vector/views/organisms/RoomList.js

@@ -17,9 +17,7 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
-var ComponentBroker = require('../../../../src/ComponentBroker');
+var sdk = require('matrix-react-sdk')
-var CallView = ComponentBroker.get('molecules/voip/CallView');
-var RoomDropTarget = ComponentBroker.get('molecules/RoomDropTarget');
 
 var RoomListController = require('matrix-react-sdk/lib/controllers/organisms/RoomList')
 
@@ -28,6 +26,9 @@ module.exports = React.createClass({
     mixins: [RoomListController],
 
     render: function() {
+        var CallView = sdk.getComponent('molecules.voip.CallView');
+        var RoomDropTarget = sdk.getComponent('molecules.RoomDropTarget');
+
         var callElement;
         if (this.state.show_call_element) {
             callElement = <CallView className="mx_MatrixChat_callView"/>

src/skins/vector/views/organisms/RoomView.js

@@ -20,16 +20,11 @@ var React = require('react');
 
 var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
 
-var ComponentBroker = require('../../../../src/ComponentBroker');
+var sdk = require('matrix-react-sdk')
 var classNames = require("classnames");
 var filesize = require('filesize');
 var q = require('q');
 
-var MessageTile = ComponentBroker.get('molecules/MessageTile');
-var RoomHeader = ComponentBroker.get('molecules/RoomHeader');
-var MessageComposer = ComponentBroker.get('molecules/MessageComposer');
-var CallView = ComponentBroker.get("molecules/voip/CallView");
-var RoomSettings = ComponentBroker.get("molecules/RoomSettings");
 var RoomViewController = require('matrix-react-sdk/lib/controllers/organisms/RoomView')
 
 var Loader = require("react-loader");
@@ -82,6 +77,11 @@ module.exports = React.createClass({
     },
 
     render: function() {
+        var RoomHeader = sdk.getComponent('molecules.RoomHeader');
+        var MessageComposer = sdk.getComponent('molecules.MessageComposer');
+        var CallView = sdk.getComponent("molecules.voip.CallView");
+        var RoomSettings = sdk.getComponent("molecules.RoomSettings");
+
         if (!this.state.room) {
             if (this.props.roomId) {
                 return (

src/skins/vector/views/organisms/UserSettings.js

@@ -14,16 +14,11 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
-var ComponentBroker = require('../../../../src/ComponentBroker');
+var sdk = require('matrix-react-sdk')
 var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
 
 var UserSettingsController = require('matrix-react-sdk/lib/controllers/organisms/UserSettings')
 
-var EditableText = ComponentBroker.get('atoms/EditableText');
-var EnableNotificationsButton = ComponentBroker.get('atoms/EnableNotificationsButton');
-var ChangeAvatar = ComponentBroker.get('molecules/ChangeAvatar');
-var ChangePassword = ComponentBroker.get('molecules/ChangePassword');
-var LogoutPrompt = ComponentBroker.get('organisms/LogoutPrompt');
 var Loader = require("react-loader");
 
 var Modal = require("../../../../src/Modal");
@@ -34,6 +29,7 @@ module.exports = React.createClass({
 
     editAvatar: function() {
         var url = MatrixClientPeg.get().mxcUrlToHttp(this.state.avatarUrl);
+        var ChangeAvatar = sdk.getComponent('molecules.ChangeAvatar');
         Modal.createDialog(ChangeAvatar, {initialAvatarUrl: url});
     },
 
@@ -50,6 +46,7 @@ module.exports = React.createClass({
     },
 
     onLogoutClicked: function(ev) {
+        var LogoutPrompt = sdk.getComponent('organisms.LogoutPrompt');
         this.logoutModal = Modal.createDialog(LogoutPrompt, {onCancel: this.onLogoutPromptCancel});
     },
 
@@ -62,6 +59,9 @@ module.exports = React.createClass({
             case this.Phases.Loading:
                 return <Loader />
             case this.Phases.Display:
+                var EditableText = sdk.getComponent('atoms/EditableText');
+                var EnableNotificationsButton = sdk.getComponent('atoms/EnableNotificationsButton');
+                var ChangePassword = sdk.getComponent('molecules/ChangePassword');
                 return (
                     <div className="mx_UserSettings">
                         <div className="mx_UserSettings_User">

src/skins/vector/views/pages/MatrixChat.js

@@ -17,18 +17,7 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
-var ComponentBroker = require('../../../../src/ComponentBroker');
+var sdk = require('matrix-react-sdk')
-
-var LeftPanel = ComponentBroker.get('organisms/LeftPanel');
-var RoomView = ComponentBroker.get('organisms/RoomView');
-var RightPanel = ComponentBroker.get('organisms/RightPanel');
-var Login = ComponentBroker.get('templates/Login');
-var UserSettings = ComponentBroker.get('organisms/UserSettings');
-var Register = ComponentBroker.get('templates/Register');
-var CreateRoom = ComponentBroker.get('organisms/CreateRoom');
-var RoomDirectory = ComponentBroker.get('organisms/RoomDirectory');
-var MatrixToolbar = ComponentBroker.get('molecules/MatrixToolbar');
-var Notifier = ComponentBroker.get('organisms/Notifier');
 
 var MatrixChatController = require('matrix-react-sdk/lib/controllers/pages/MatrixChat')
 
@@ -52,6 +41,16 @@ module.exports = React.createClass({
 
     render: function() {
         if (this.state.logged_in && this.state.ready) {
+            var LeftPanel = sdk.getComponent('organisms.LeftPanel');
+            var RoomView = sdk.getComponent('organisms.RoomView');
+            var RightPanel = sdk.getComponent('organisms.RightPanel');
+            var Login = sdk.getComponent('templates.Login');
+            var UserSettings = sdk.getComponent('organisms.UserSettings');
+            var Register = sdk.getComponent('templates.Register');
+            var CreateRoom = sdk.getComponent('organisms.CreateRoom');
+            var RoomDirectory = sdk.getComponent('organisms.RoomDirectory');
+            var MatrixToolbar = sdk.getComponent('molecules.MatrixToolbar');
+            var Notifier = sdk.getComponent('organisms.Notifier');
 
             var page_element;
             var right_panel = "";

src/skins/vector/views/templates/Login.js

@@ -18,16 +18,13 @@ limitations under the License.
 
 var React = require('react');
 
-var ComponentBroker = require("../../../../src/ComponentBroker");
+var sdk = require('matrix-react-sdk')
 var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
 
-var ProgressBar = ComponentBroker.get("molecules/ProgressBar");
 var Loader = require("react-loader");
 
 var LoginController = require('matrix-react-sdk/lib/controllers/templates/Login')
 
-var ServerConfig = ComponentBroker.get("molecules/ServerConfig");
-
 module.exports = React.createClass({
     DEFAULT_HS_URL: 'https://matrix.org',
     DEFAULT_IS_URL: 'https://vector.im',
@@ -119,6 +116,8 @@ module.exports = React.createClass({
             case 'fetch_stages':
                 var serverConfigStyle = {};
                 serverConfigStyle.display = this.state.serverConfigVisible ? 'block' : 'none';
+                var ServerConfig = sdk.getComponent("molecules.ServerConfig");
+
                 return (
                     <div>
                         <input className="mx_Login_checkbox" id="advanced" type="checkbox" checked={this.state.serverConfigVisible} onChange={this.onServerConfigVisibleChange} />

src/skins/vector/views/templates/Register.js

@@ -18,14 +18,12 @@ limitations under the License.
 
 var React = require('react');
 
-var ComponentBroker = require("../../../../src/ComponentBroker");
+var sdk = require('matrix-react-sdk')
 
 var Loader = require("react-loader");
 
 var RegisterController = require('matrix-react-sdk/lib/controllers/templates/Register')
 
-var ServerConfig = ComponentBroker.get("molecules/ServerConfig");
-
 module.exports = React.createClass({
     DEFAULT_HS_URL: 'https://matrix.org',
     DEFAULT_IS_URL: 'https://vector.im',
@@ -98,6 +96,7 @@ module.exports = React.createClass({
             case 'initial':
                 var serverConfigStyle = {};
                 serverConfigStyle.display = this.state.serverConfigVisible ? 'block' : 'none';
+                var ServerConfig = sdk.getComponent("molecules.ServerConfig");
                 return (
                     <div>
                         <form onSubmit={this.onInitialStageSubmit}>

vector/index.js

@@ -17,12 +17,8 @@ limitations under the License.
 'use strict';
 
 var React = require("react");
-// In normal usage of the module:
+var sdk = require("matrix-react-sdk");
-//var MatrixReactSdk = require("matrix-react-sdk");
+sdk.loadSkin(require('../src/skins/vector/skindex'));
-// Or to import the source directly from the file system:
-// (This is useful for debugging the SDK as it seems source
-// maps cannot pass through two stages).
-var MatrixReactSdk = require("../../src/index");
 
 var lastLocationHashSet = null;
 
@@ -78,8 +74,9 @@ var makeRegistrationUrl = function() {
            '#/register';
 }
 
+var MatrixChat = sdk.getComponent('pages.MatrixChat');
 window.matrixChat = React.render(
-    <MatrixReactSdk.MatrixChat onNewScreen={onNewScreen} registrationUrl={makeRegistrationUrl()} />,
+    <MatrixChat onNewScreen={onNewScreen} registrationUrl={makeRegistrationUrl()} />,
     document.getElementById('matrixchat')
 );