react-async-script - npm Package Compare versions

Comparing version 0.10.0 to 0.11.0

CHANGELOG.md

@@ -0,5 +1,13 @@
+v0.11.0 - Sun, 29 Jul 2018 11:58:00 PST
+--------------------------------------
+
+- Remove transform runtime [(#29)](https://github.com/dozoisch/react-async-script/pull/29)
+- Added dynamic url capability [(#30)](https://github.com/dozoisch/react-async-script/pull/30)
+
+
+
 v0.10.0 - Tue, 24 Jul 2018 14:40:00 PST
 --------------------------------------
 
-- Clean up use of Map to remove core-js polyfills [(#27)](github.com/dozoisch/react-async-script/pull/27)
+- Clean up use of Map to remove core-js polyfills [(#27)](https://github.com/dozoisch/react-async-script/pull/27)
 
@@ -11,3 +19,3 @@
 
-- Fixed issue where method was not bound properly [(#19)](github.com/dozoisch/react-async-script/pull/19)
+- Fixed issue where method was not bound properly [(#19)](https://github.com/dozoisch/react-async-script/pull/19)
 
@@ -19,3 +27,3 @@
 
-- Changed updated to react >=15.5 [(#18)](github.com/dozoisch/react-async-script/pull/18)
+- Changed updated to react >=15.5 [(#18)](https://github.com/dozoisch/react-async-script/pull/18)
 
@@ -27,3 +35,3 @@
 
-- Added removeOnUnmount parameter [(#14)](github.com/dozoisch/react-async-script/pull/14)
+- Added removeOnUnmount parameter [(#14)](https://github.com/dozoisch/react-async-script/pull/14)
 
@@ -35,3 +43,3 @@
 
-- Updated deps to react 15 and babel 6 [(#13)](github.com/dozoisch/react-async-script/pull/13)
+- Updated deps to react 15 and babel 6 [(#13)](https://github.com/dozoisch/react-async-script/pull/13)
 - Go back to manual changelogs
@@ -44,3 +52,3 @@
 
-- [0bc67b2](../../commit/0bc67b2) [fixed] typo in documentation [(#9)](github.com/dozoisch/react-async-script/pull/9)
+- [0bc67b2](../../commit/0bc67b2) [fixed] typo in documentation [(#9)](https://github.com/dozoisch/react-async-script/pull/9)
 
@@ -47,0 +55,0 @@

lib/async-script-loader.js

@@ -5,22 +5,4 @@ "use strict";
 
-var _extends2 = require("babel-runtime/helpers/extends");
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var _extends3 = _interopRequireDefault(_extends2);
-
-var _objectWithoutProperties2 = require("babel-runtime/helpers/objectWithoutProperties");
-
-var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
-
-var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");
-
-var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
-
-var _possibleConstructorReturn2 = require("babel-runtime/helpers/possibleConstructorReturn");
-
-var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
-
-var _inherits2 = require("babel-runtime/helpers/inherits");
-
-var _inherits3 = _interopRequireDefault(_inherits2);
-
 exports.default = makeAsyncScript;
@@ -38,2 +20,10 @@
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 var SCRIPT_MAP = {};
@@ -44,3 +34,3 @@
 
-function makeAsyncScript(Component, scriptURL, options) {
+function makeAsyncScript(Component, getScriptURL, options) {
   options = options || {};
@@ -50,10 +40,11 @@ var wrappedComponentName = Component.displayName || Component.name || "Component";
   var AsyncScriptLoader = function (_React$Component) {
-    (0, _inherits3.default)(AsyncScriptLoader, _React$Component);
+    _inherits(AsyncScriptLoader, _React$Component);
 
     function AsyncScriptLoader() {
-      (0, _classCallCheck3.default)(this, AsyncScriptLoader);
+      _classCallCheck(this, AsyncScriptLoader);
 
-      var _this = (0, _possibleConstructorReturn3.default)(this, _React$Component.call(this));
+      var _this = _possibleConstructorReturn(this, _React$Component.call(this));
 
       _this.state = {};
+      _this.__scriptURL = "";
       return _this;
@@ -69,9 +60,30 @@ }
 
+    AsyncScriptLoader.prototype.setupScriptURL = function setupScriptURL() {
+      this.__scriptURL = typeof getScriptURL === "function" ? getScriptURL() : getScriptURL;
+      return this.__scriptURL;
+    };
+
     AsyncScriptLoader.prototype.getComponent = function getComponent() {
-      return this.childComponent;
+      return this.__childComponent;
     };
 
+    AsyncScriptLoader.prototype.asyncScriptLoaderHandleLoad = function asyncScriptLoaderHandleLoad(state) {
+      this.setState(state, this.props.asyncScriptOnLoad);
+    };
+
+    AsyncScriptLoader.prototype.asyncScriptLoaderTriggerOnScriptLoaded = function asyncScriptLoaderTriggerOnScriptLoaded() {
+      var mapEntry = SCRIPT_MAP[this.__scriptURL];
+      if (!mapEntry || !mapEntry.loaded) {
+        throw new Error("Script is not loaded.");
+      }
+      for (var obsKey in mapEntry.observers) {
+        mapEntry.observers[obsKey](mapEntry);
+      }
+      delete window[options.callbackName];
+    };
+
     AsyncScriptLoader.prototype.componentDidMount = function componentDidMount() {
       var _this2 = this;
 
+      var scriptURL = this.setupScriptURL();
       var key = this.asyncScriptLoaderGetScriptLoaderID();
@@ -110,3 +122,3 @@ var _options = options,
       script.src = scriptURL;
-      script.async = 1;
+      script.async = true;
 
@@ -127,3 +139,5 @@ var callObserverFuncAndRemoveObserver = function callObserverFuncAndRemoveObserver(func) {
       if (callbackName && typeof window !== "undefined") {
-        window[callbackName] = AsyncScriptLoader.asyncScriptLoaderTriggerOnScriptLoaded;
+        window[callbackName] = function () {
+          return _this2.asyncScriptLoaderTriggerOnScriptLoaded();
+        };
       }
@@ -171,8 +185,5 @@
 
-    AsyncScriptLoader.prototype.asyncScriptLoaderHandleLoad = function asyncScriptLoaderHandleLoad(state) {
-      this.setState(state, this.props.asyncScriptOnLoad);
-    };
-
     AsyncScriptLoader.prototype.componentWillUnmount = function componentWillUnmount() {
       // Remove tag script
+      var scriptURL = this.__scriptURL;
       if (options.removeOnUnmount === true) {
@@ -203,5 +214,6 @@ var allScripts = document.getElementsByTagName("script");
       // remove asyncScriptOnLoad from childprops
+
       var _props = this.props,
           asyncScriptOnLoad = _props.asyncScriptOnLoad,
-          childProps = (0, _objectWithoutProperties3.default)(_props, ["asyncScriptOnLoad"]);
+          childProps = _objectWithoutProperties(_props, ["asyncScriptOnLoad"]);
 
@@ -211,5 +223,7 @@ if (globalName && typeof window !== "undefined") {
       }
-      return _react2.default.createElement(Component, (0, _extends3.default)({ ref: function ref(comp) {
-          _this3.childComponent = comp;
-        } }, childProps));
+      return _react2.default.createElement(Component, _extends({
+        ref: function ref(comp) {
+          _this3.__childComponent = comp;
+        }
+      }, childProps));
     };
@@ -224,12 +238,2 @@
   };
-  AsyncScriptLoader.asyncScriptLoaderTriggerOnScriptLoaded = function () {
-    var mapEntry = SCRIPT_MAP[scriptURL];
-    if (!mapEntry || !mapEntry.loaded) {
-      throw new Error("Script is not loaded.");
-    }
-    for (var obsKey in mapEntry.observers) {
-      mapEntry.observers[obsKey](mapEntry);
-    }
-    delete window[options.callbackName];
-  };
 
@@ -236,0 +240,0 @@ if (options.exposeFuncs) {

package.json

 {
   "name": "react-async-script",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "A composition mixin for loading scripts asynchronously for React",
@@ -5,0 +5,0 @@ "main": "lib/async-script-loader.js",

README.md

@@ -23,6 +23,6 @@ # React Async Script Loader
 
-The api is very simple `makeAsyncScriptLoader(Component, scriptUrl, options)`. Where options can contain exposeFuncs, callbackName and globalName.
+The api is very simple `makeAsyncScriptLoader(Component, getScriptUrl, options)`. Where options can contain exposeFuncs, callbackName and globalName.
 
 - Component: The component to wrap.
-- scriptUrl: the full of the script tag.
+- getScriptUrl: a string or function that returns the full URL of the script tag.
 - options *(optional)*:
@@ -29,0 +29,0 @@ - exposeFuncs: Array of String. It'll create a function that will call the child component with the same name. It passes arguments and return value.

src/async-script-loader.js

@@ -9,5 +9,6 @@ import React from "react";
 
-export default function makeAsyncScript(Component, scriptURL, options) {
+export default function makeAsyncScript(Component, getScriptURL, options) {
   options = options || {};
-  const wrappedComponentName = Component.displayName || Component.name || "Component";
+  const wrappedComponentName =
+    Component.displayName || Component.name || "Component";
 
@@ -18,2 +19,3 @@ class AsyncScriptLoader extends React.Component {
       this.state = {};
+      this.__scriptURL = "";
     }
@@ -28,7 +30,29 @@
 
+    setupScriptURL() {
+      this.__scriptURL =
+        typeof getScriptURL === "function" ? getScriptURL() : getScriptURL;
+      return this.__scriptURL;
+    }
+
     getComponent() {
-      return this.childComponent;
+      return this.__childComponent;
     }
 
+    asyncScriptLoaderHandleLoad(state) {
+      this.setState(state, this.props.asyncScriptOnLoad);
+    }
+
+    asyncScriptLoaderTriggerOnScriptLoaded() {
+      let mapEntry = SCRIPT_MAP[this.__scriptURL];
+      if (!mapEntry || !mapEntry.loaded) {
+        throw new Error("Script is not loaded.");
+      }
+      for (let obsKey in mapEntry.observers) {
+        mapEntry.observers[obsKey](mapEntry);
+      }
+      delete window[options.callbackName];
+    }
+
     componentDidMount() {
+      const scriptURL = this.setupScriptURL();
       const key = this.asyncScriptLoaderGetScriptLoaderID();
@@ -46,3 +70,3 @@ const { globalName, callbackName } = options;
         }
-        entry.observers[key] = (entry) => this.asyncScriptLoaderHandleLoad(entry);
+        entry.observers[key] = entry => this.asyncScriptLoaderHandleLoad(entry);
         return;
@@ -52,3 +76,3 @@ }
       let observers = {};
-      observers[key] = (entry) => this.asyncScriptLoaderHandleLoad(entry);
+      observers[key] = entry => this.asyncScriptLoaderHandleLoad(entry);
       SCRIPT_MAP[scriptURL] = {
@@ -62,5 +86,5 @@ loaded: false,
       script.src = scriptURL;
-      script.async = 1;
+      script.async = true;
 
-      let callObserverFuncAndRemoveObserver = (func) => {
+      let callObserverFuncAndRemoveObserver = func => {
         if (SCRIPT_MAP[scriptURL]) {
@@ -79,3 +103,4 @@ let mapEntry = SCRIPT_MAP[scriptURL];
       if (callbackName && typeof window !== "undefined") {
-        window[callbackName] = AsyncScriptLoader.asyncScriptLoaderTriggerOnScriptLoaded;
+        window[callbackName] = () =>
+          this.asyncScriptLoaderTriggerOnScriptLoaded();
       }
@@ -87,3 +112,3 @@
           mapEntry.loaded = true;
-          callObserverFuncAndRemoveObserver( (observer) => {
+          callObserverFuncAndRemoveObserver(observer => {
             if (callbackName) {
@@ -97,7 +122,7 @@ return false;
       };
-      script.onerror = (event) => {
+      script.onerror = event => {
         let mapEntry = SCRIPT_MAP[scriptURL];
         if (mapEntry) {
           mapEntry.errored = true;
-          callObserverFuncAndRemoveObserver( (observer) => {
+          callObserverFuncAndRemoveObserver(observer => {
             observer(mapEntry);
@@ -125,11 +150,8 @@ return true;
 
-    asyncScriptLoaderHandleLoad(state) {
-      this.setState(state, this.props.asyncScriptOnLoad);
-    }
-
     componentWillUnmount() {
       // Remove tag script
+      const scriptURL = this.__scriptURL;
       if (options.removeOnUnmount === true) {
         const allScripts = document.getElementsByTagName("script");
-        for(let i = 0; i < allScripts.length; i += 1) {
+        for (let i = 0; i < allScripts.length; i += 1) {
           if (allScripts[i].src.indexOf(scriptURL) > -1) {
@@ -157,5 +179,15 @@ if (allScripts[i].parentNode) {
       if (globalName && typeof window !== "undefined") {
-        childProps[globalName] = typeof window[globalName] !== "undefined" ? window[globalName] : undefined;
+        childProps[globalName] =
+          typeof window[globalName] !== "undefined"
+            ? window[globalName]
+            : undefined;
       }
-      return <Component ref={(comp) => {this.childComponent = comp; }} {...childProps} />;
+      return (
+        <Component
+          ref={comp => {
+            this.__childComponent = comp;
+          }}
+          {...childProps}
+        />
+      );
     }
@@ -167,12 +199,2 @@ }
   };
-  AsyncScriptLoader.asyncScriptLoaderTriggerOnScriptLoaded = function() {
-    let mapEntry = SCRIPT_MAP[scriptURL];
-    if (!mapEntry || !mapEntry.loaded) {
-      throw new Error("Script is not loaded.");
-    }
-    for (let obsKey in mapEntry.observers) {
-      mapEntry.observers[obsKey](mapEntry);
-    }
-    delete window[options.callbackName];
-  };
 
@@ -179,0 +201,0 @@ if (options.exposeFuncs) {

No alert changes

Improved metrics

Total package byte prevSize

25356

increased by7.57%

Lines of code

386

increased by7.52%

No dependency changes