This is needed because `require()` means something different in webpack - it ends up importing the module as something we didn't expect (and is occasionally async)
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 lays a foundation for redirecting all the traffic through the new store, but for now the core parts of the app need to stop caring if the right panel is open.
With this version of babel (via babel-eslint), eslint now fails
with a somewhat confusing, "Unexpected reserved type number"
(from the flow plugin...) if you get this wrong.
Fixes https://github.com/vector-im/riot-web/issues/11496
Fixes https://github.com/vector-im/riot-web/issues/11385
Fixes https://github.com/vector-im/riot-web/issues/10007
Fixes https://github.com/vector-im/riot-web/issues/9769
React does (kinda) bind `this._isUnmounting` for us in the context of the EventTile, but the EventTile then passes the function straight through to the ReadReceiptMarker component, which then binds it in the context of EventTile. This results in `this._mounted` being falsey all the time, preventing the ReadReceiptMarker from hitting the code where it updates rrInfo in its unmount.
The velocity stuff is smart enough to realize that it has a read receipt and shuffles everything over by one, but when it goes to check the starting height (which will be null/undefined because the RRMarker didn't update it) it assumes it has never seen the receipt before and appends it again - this is what causes some holes/stacking.
By forcefully binding the `this._isUnmounting` function we ensure that the `this._mounted` variable is correctly referenced in the context of the MessagePanel, allowing the RRMarker to update its position, and therefore allowing the velocity behaviour to be consistent.
Removes one of the two places we use Velocity, so we're one step
closer to getting rid of it for good.
Should therefore fix the fact that Velocity is leaking data entries
and therefore <hr> elements.
Hopefully also makes the logic in getEventTiles incrementally simpler,
if still somwewhat byzantine.
Travis Ralston