Hoist non react statics

README.md

@@ -13,7 +13,6 @@ A React HOC for loading 3rd party scripts asynchronously. This HOC allows you to
 - `Component`: The *Component* to wrap.
 - `getScriptUrl`: *string* or *function* that returns the full URL of the script tag.
 - `options` *(optional)*:
-    - `exposeFuncs`: *array of strings* : It'll create a function that will call the child component with the same name. It passes arguments and return value.
     - `callbackName`: *string* : If the script needs to call a global function when finished loading *(for example: `recaptcha/api.js?onload=callbackName`)*. Please provide the callback name here and it will be autoregistered on `window` for you.
     - `globalName`: *string* : If wanted, provide the globalName of the loaded script. It'll be injected on the component with the same name *(ex: "grecaptcha")*
     - `removeOnUnmount`: *boolean* **default=false** : If set to `true` removes the script tag on the component unmount
@@ -73,38 +72,6 @@ React.render(
 );
 ```
 
-## Expose Functions
-
-This is really useful if the child component has some utility functions (like `getValue`) that you would like the wrapper to expose.
-
-You can still retrieve the child component using `getComponent()`.
-
-### Example
-
-```js
-class MockedComponent extends React.Component {
-
-  callsACallback(fn) {
-    fn();
-  },
-
-  render() {
-    return <span/>;
-  }
-};
-MockedComponent.displayName = "MockedComponent";
-
-let ComponentWrapper = makeAsyncScriptLoader("http://example.com", {
-  exposeFuncs: ["callsACallback"]
-})(MockedComponent);
-
-const instance = ReactTestUtils.renderIntoDocument(
-  <ComponentWrapper />
-);
-
-instance.callsACallback(function () { console.log("Called from child", this.constructor.displayName); });
-```
-
 ## Notes
 
 Pre `1.0.0` and - `React < 15.5.*` support details in [0.11.1](https://github.com/dozoisch/react-async-script/tree/v0.11.1).

package.json

@@ -38,6 +38,7 @@
     "babel-runtime": "^6.0.0",
     "chai": "^3.5.0",
     "es5-shim": "~4.1.3",
+    "es6-shim": "^0.35.3",
     "eslint": "~1.6.0",
     "eslint-config-defaults": "~7.0.1",
     "eslint-plugin-react": "~3.5.1",
@@ -51,15 +52,16 @@
     "karma-sourcemap-loader": "~0.3.5",
     "karma-webpack": "~1.7.0",
     "mocha": "~2.3.3",
-    "phantomjs": "^1.9.18",
-    "react": "^15.5.0",
-    "react-dom": "^15.5.0",
+    "phantomjs": "^2.0.0",
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2",
     "webpack": "~1.14.0"
   },
   "peerDependencies": {
     "react": ">=15.5.0"
   },
   "dependencies": {
+    "hoist-non-react-statics": "^3.0.1",
     "prop-types": ">=15.5.0"
   }
 }

src/async-script-loader.js

@@ -1,5 +1,6 @@
 import { Component, createElement } from "react";
 import PropTypes from "prop-types";
+import hoistStatics from "hoist-non-react-statics";
 
 let SCRIPT_MAP = {};
 
@@ -186,13 +187,6 @@ export default function makeAsyncScript(getScriptURL, options) {
       asyncScriptOnLoad: PropTypes.func,
     };
 
-    if (options.exposeFuncs) {
-      options.exposeFuncs.forEach(funcToExpose => {
-        AsyncScriptLoader.prototype[funcToExpose] = function() {
-          return this.getComponent()[funcToExpose](...arguments);
-        };
-      });
-    }
-    return AsyncScriptLoader;
+    return hoistStatics(AsyncScriptLoader, WrappedComponent);
   }
 }

test/async-script-loader-spec.js

@@ -4,8 +4,7 @@ import ReactTestUtils from "react-dom/test-utils";
 import makeAsyncScriptLoader from "../src/async-script-loader";
 
 class MockedComponent extends React.Component {
-  callsACallback(fn) {
-    assert.equal(this.constructor.name, "MockedComponent");
+  static callsACallback(fn) {
     fn();
   }
 
@@ -121,14 +120,10 @@ describe("AsyncScriptLoader", () => {
     instance.componentWillUnmount();
   });
 
-  it("should expose functions with scope correctly", (done) => {
-    const ComponentWrapper = makeAsyncScriptLoader("http://example.com/?functions=true", {
-      exposeFuncs: ["callsACallback"],
-    })(MockedComponent);
-    const instance = ReactTestUtils.renderIntoDocument(
-      <ComponentWrapper />
-    );
-    instance.callsACallback(done);
+  it("should expose statics", (done) => {
+    const URL = "http://example.com/?functions=true";
+    const ComponentWrapper = makeAsyncScriptLoader(URL)(MockedComponent);
+    ComponentWrapper.callsACallback(done);
   });
 
   it("should not remove tag script on removeOnUnmount option not set", () => {
@@ -156,4 +151,23 @@ describe("AsyncScriptLoader", () => {
     assert.equal(unmounted, true, "successfully unmounted");
     assert.equal(hasScript(URL), false, "Url not in document after unmounting");
   });
+
+  it("should allow you to access methods on the wrappedComponent via getComponent", (done) => {
+    class MockedComponentMethod extends React.Component {
+      callsACallback(fn) {
+        assert.equal(this.constructor.name, "MockedComponentMethod");
+        fn();
+      }
+      render() { return <span/>; }
+    }
+    const URL = "http://example.com/?getComponent=true";
+    const ComponentWrapper = makeAsyncScriptLoader(URL)(MockedComponentMethod);
+    const instance = ReactTestUtils.renderIntoDocument(
+      <ComponentWrapper />
+    );
+    const wrappedComponent = instance.getComponent();
+
+    assert.equal(hasScript(URL), true, "Url in document");
+    wrappedComponent.callsACallback(done);
+  });
 });

test/index.js

@@ -1,3 +1,4 @@
 import "es5-shim";
+import "es6-shim";
 const testsContext = require.context(".", true, /-spec$/);
 testsContext.keys().forEach(testsContext);