Fix skinning and babel tagets

babel.config.js

@@ -4,7 +4,7 @@ module.exports = {
         ["@babel/preset-env", {
             "targets": {
                 "browsers": [
-                    "last 2 versions"
+                    "last 2 Chrome versions", "last 2 Firefox versions", "last 2 Safari versions"
                 ]
             },
             "modules": "commonjs"
@@ -14,7 +14,7 @@ module.exports = {
         "@babel/preset-react"
     ],
     "plugins": [
-        ["@babel/plugin-proposal-decorators", { "legacy": true }],
+        ["@babel/plugin-proposal-decorators", {"legacy": false, 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."+
@@ -43,12 +44,6 @@ class Skinner {
         // 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) {
@@ -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;
+    };
 }