Feature UPDATE js src

package.json

@@ -10,7 +10,7 @@
   },
   "scripts": {
     "build": "npm run build:lib",
-    "build:lib": "babel src --out-dir lib",
+    "build:lib": "babel src --out-dir lib && uglifyjs ./lib/index.js -o ./lib/index.min.js",
     "clean": "rimraf lib",
     "lint": "eslint ./src/*",
     "test": "jest",
@@ -43,10 +43,13 @@
     "prop-types": "15.5.8",
     "react": "15.5.4",
     "react-addons-test-utils": "15.5.1",
-    "react-dom": "15.5.4",
-    "rimraf": "2.4.3"
+    "react-dom": "^15.5.4",
+    "react-test-renderer": "^15.6.1",
+    "rimraf": "2.4.3",
+    "uglify-js": "^3.0.17"
   },
   "dependencies": {
+    "shortid": "^2.2.8"
   },
   "peerDependencies": {
     "react": ">=0.14.9",

src/index.jsx

@@ -1,20 +1,24 @@
 import React from 'react';
 import { PropTypes as RPT } from 'prop-types';
 
+import * as shortid from 'shortid';
+
 export default class Script extends React.Component {
 
   static propTypes = {
     onCreate: RPT.func,
     onError: RPT.func.isRequired,
     onLoad: RPT.func.isRequired,
+    onUnload: RPT.func.isRequired,
     url: RPT.string.isRequired,
   };
 
   static defaultProps = {
-    onCreate: () => {},
-    onError: () => {},
-    onLoad: () => {},
-  }
+    onCreate: () => null,
+    onError: () => null,
+    onLoad: () => null,
+    onUnload: () => null,
+  };
 
   // A dictionary mapping script URLs to a dictionary mapping
   // component key to component for all components that are waiting
@@ -36,53 +40,99 @@ export default class Script extends React.Component {
   constructor(props) {
     super(props);
     this.scriptLoaderId = `id${this.constructor.idCount++}`; // eslint-disable-line space-unary-ops, no-plusplus
+    this.pkID = `script-${shortid.generate()}`;
+    this.unmount = () => {
+      const { url, onUnload } = this.props;
+      const observers = this.constructor.scriptObservers[url];
+      const loaded = this.constructor.loadedScripts[url];
+      const errored = this.constructor.erroredScripts[url];
+
+      // If the component is waiting for the script to load, remove the
+      // component from the script's observers before unmounting the component.
+      if (observers) {
+        delete observers[this.scriptLoaderId];
+        // delete (this.constructor.scriptObservers)[url];
+      }
+
+      // If this script has been previously loaded
+      if (loaded) {
+        delete (this.constructor.loadedScripts)[url];
+        const s = document.querySelector(`[data-pkID="${this.pkID}"]`);
+        s.parentNode.removeChild(s);
+        onUnload();
+      }
+
+      // If this script has been previously errored
+      if (errored) {
+        delete (this.constructor.erroredScripts)[url];
+      }
+    };
+    this.generate = () => {
+      const { onError, onLoad, url } = this.props;
+      if (this.constructor.loadedScripts[url]) {
+        onLoad();
+        return;
+      }
+
+      if (this.constructor.erroredScripts[url]) {
+        onError();
+        return;
+      }
+
+      // If the script is loading, add the component to the script's observers
+      // and return. Otherwise, initialize the script's observers with the component
+      // and start loading the script.
+      if (this.constructor.scriptObservers[url]) {
+        this.constructor.scriptObservers[url][this.scriptLoaderId] = this.props;
+        return;
+      }
+
+      this.constructor.scriptObservers[url] = { [this.scriptLoaderId]: this.props };
+
+      this.createScript();
+    };
   }
 
   componentDidMount() {
-    const { onError, onLoad, url } = this.props;
-
-    if (this.constructor.loadedScripts[url]) {
-      onLoad();
-      return;
-    }
-
-    if (this.constructor.erroredScripts[url]) {
-      onError();
-      return;
-    }
+    this.generate();
+  }
 
-    // If the script is loading, add the component to the script's observers
-    // and return. Otherwise, initialize the script's observers with the component
-    // and start loading the script.
-    if (this.constructor.scriptObservers[url]) {
-      this.constructor.scriptObservers[url][this.scriptLoaderId] = this.props;
-      return;
-    }
+  shouldComponentUpdate(nextProps) {
+    let r = false;
+    Object.keys(this.props).forEach((k) => {
+      if (r) return;
+      if (
+        this.props[k] !== nextProps[k] &&
+        !(typeof this.props[k] === 'function' && typeof nextProps[k] === 'function')
+      ) {
+        r = true;
+      }
+    });
+    return r;
+  }
 
-    this.constructor.scriptObservers[url] = { [this.scriptLoaderId]: this.props };
+  componentWillUpdate() {
+    this.unmount();
+  }
 
-    this.createScript();
+  componentDidUpdate() {
+    this.generate();
   }
 
   componentWillUnmount() {
-    const { url } = this.props;
-    const observers = this.constructor.scriptObservers[url];
-
-    // If the component is waiting for the script to load, remove the
-    // component from the script's observers before unmounting the component.
-    if (observers) {
-      delete observers[this.scriptLoaderId];
-    }
+    this.unmount();
   }
 
   createScript() {
     const { onCreate, url } = this.props;
+    const { pkID } = this;
     const script = document.createElement('script');
 
     onCreate();
 
     script.src = url;
     script.async = 1;
+    script.setAttribute('data-pkID', pkID);
 
     const callObserverFuncAndRemoveObserver = (shouldRemoveObserver) => {
       const observers = this.constructor.scriptObservers[url];