Merge pull request #3957 from matrix-org/travis/babel-skinning

Fix skinning and babel targets

babel.config.js

@@ -2,19 +2,16 @@ module.exports = {
     "sourceMaps": "inline",
     "presets": [
         ["@babel/preset-env", {
-            "targets": {
+            "targets": [
-                "browsers": [
+                "last 2 Chrome versions", "last 2 Firefox versions", "last 2 Safari versions"
-                    "last 2 versions"
+            ],
-                ]
-            },
-            "modules": "commonjs"
         }],
         "@babel/preset-typescript",
         "@babel/preset-flow",
         "@babel/preset-react"
     ],
     "plugins": [
-        ["@babel/plugin-proposal-decorators", { "legacy": true }],
+        ["@babel/plugin-proposal-decorators", {decoratorsBeforeExport: true}],
         "@babel/plugin-proposal-export-default-from",
         "@babel/plugin-proposal-numeric-separator",
         "@babel/plugin-proposal-class-properties",

src/Skinner.js

@@ -20,6 +20,7 @@ class Skinner {
     }
 
     getComponent(name) {
+        if (!name) throw new Error(`Invalid component name: ${name}`);
         if (this.components === null) {
             throw new Error(
                 "Attempted to get a component before a skin has been loaded."+
@@ -41,13 +42,7 @@ class Skinner {
         };
 
         // Check the skin first
-        let comp = doLookup(this.components);
+        const 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.
@@ -75,6 +70,13 @@ class Skinner {
             const comp = skinObject.components[compKeys[i]];
             this.addComponent(compKeys[i], comp);
         }
+
+        // Now that we have a skin, load our components too
+        const idx = require("./component-index");
+        if (!idx || !idx.components) throw new Error("Invalid react-sdk component index");
+        for (const c in idx.components) {
+            if (!this.components[c]) this.components[c] = idx.components[c];
+        }
     }
 
     addComponent(name, comp) {

src/utils/replaceableComponent.ts

@@ -32,9 +32,13 @@ import * as sdk from '../index';
  * with a skinned version. If no skinned version is available, this component
  * will be used.
  */
-export function replaceableComponent(name: string, origComponent: React.Component) {
+export function replaceableComponent<T extends{new(...args: any[])}>(name: string) {
     // Decorators return a function to override the class (origComponent). This
     // ultimately assumes that `getComponent()` won't throw an error and instead
     // return a falsey value like `null` when the skin doesn't have a component.
-    return () => sdk.getComponent(name) || origComponent;
+    return (origComponent) => {
+        const c = sdk.getComponent(name) || origComponent;
+        c.kind = "class"; // appeases babel
+        return c;
+    };
 }