From 21405b8f25ab36dc1967b53bdd349e872165dd18 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 28 Jan 2020 12:44:14 +0000 Subject: [PATCH 1/4] Fix skinning and babel tagets --- babel.config.js | 4 ++-- src/Skinner.js | 14 ++++++++------ src/utils/replaceableComponent.ts | 8 ++++++-- 3 files changed, 16 insertions(+), 10 deletions(-) diff --git a/babel.config.js b/babel.config.js index c83be72518..944d9051bb 100644 --- a/babel.config.js +++ b/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", diff --git a/src/Skinner.js b/src/Skinner.js index 3baecc9fb3..1e121b8808 100644 --- a/src/Skinner.js +++ b/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) { diff --git a/src/utils/replaceableComponent.ts b/src/utils/replaceableComponent.ts index 9f617b27f3..92272e533c 100644 --- a/src/utils/replaceableComponent.ts +++ b/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(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; + }; } From d0c28adfb1a13a54e78a7b9c825f824a784db28c Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 28 Jan 2020 12:53:37 +0000 Subject: [PATCH 2/4] Appease the linter --- src/Skinner.js | 2 +- src/utils/replaceableComponent.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Skinner.js b/src/Skinner.js index 1e121b8808..87c5a7be7f 100644 --- a/src/Skinner.js +++ b/src/Skinner.js @@ -42,7 +42,7 @@ class Skinner { }; // Check the skin first - let comp = doLookup(this.components); + const comp = doLookup(this.components); // Just return nothing instead of erroring - the consumer should be smart enough to // handle this at this point. diff --git a/src/utils/replaceableComponent.ts b/src/utils/replaceableComponent.ts index 92272e533c..281ff4c1ac 100644 --- a/src/utils/replaceableComponent.ts +++ b/src/utils/replaceableComponent.ts @@ -32,7 +32,7 @@ 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) { +export function replaceableComponent(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. From a4778cc7e3371f12c32ec991a684c681911e0d1e Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 28 Jan 2020 14:18:12 +0000 Subject: [PATCH 3/4] Remove legacy --- babel.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/babel.config.js b/babel.config.js index 944d9051bb..333e5301af 100644 --- a/babel.config.js +++ b/babel.config.js @@ -14,7 +14,7 @@ module.exports = { "@babel/preset-react" ], "plugins": [ - ["@babel/plugin-proposal-decorators", {"legacy": false, decoratorsBeforeExport: true}], + ["@babel/plugin-proposal-decorators", {decoratorsBeforeExport: true}], "@babel/plugin-proposal-export-default-from", "@babel/plugin-proposal-numeric-separator", "@babel/plugin-proposal-class-properties", From 894568bf7aff3578970e6d577d28a14c19d2bce2 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 28 Jan 2020 14:19:06 +0000 Subject: [PATCH 4/4] Stop using deprecated stuff --- babel.config.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/babel.config.js b/babel.config.js index 333e5301af..3c0c3fcb85 100644 --- a/babel.config.js +++ b/babel.config.js @@ -2,12 +2,9 @@ module.exports = { "sourceMaps": "inline", "presets": [ ["@babel/preset-env", { - "targets": { - "browsers": [ - "last 2 Chrome versions", "last 2 Firefox versions", "last 2 Safari versions" - ] - }, - "modules": "commonjs" + "targets": [ + "last 2 Chrome versions", "last 2 Firefox versions", "last 2 Safari versions" + ], }], "@babel/preset-typescript", "@babel/preset-flow",