fix duplicate requests

Author: leozdgao

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-async-script-loader",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "A decorator for script lazy loading on react component",
   "main": "lib/index.js",
   "scripts": {

src/index.js

@@ -3,37 +3,77 @@ import hoistStatics from 'hoist-non-react-statics'
 import { isDefined, newScript, series, noop } from './utils'
 
 const loadedScript = []
+const pendingScripts = {}
 let failedScript = []
 
-const scriptLoader = (...scripts) => (WrappedComponent) => {
+export function startLoadingScripts(scripts, onComplete = noop) {
+  // sequence load
+  const loadNewScript = (src) => {
+    if (loadedScript.indexOf(src) < 0) {
+      return taskComplete => {
+        const callbacks = pendingScripts[src] || []
+        callbacks.push(taskComplete)
+        pendingScripts[src] = callbacks
+        if (callbacks.length === 1) {
+          return newScript(src)(err => {
+            pendingScripts[src].forEach(cb => cb(err, src))
+            delete pendingScripts[src]
+          })
+        }
+      }
+    }
+  }
+  const tasks = scripts.map(src => {
+    if (Array.isArray(src)) {
+      return src.map(loadNewScript)
+    }
+    else return loadNewScript(src)
+  })
 
-  const addCache = (entry) => {
-    if (loadedScript.indexOf(entry) < 0) {
-      loadedScript.push(entry)
+  series(...tasks)((err, src) => {
+    if (err) {
+      failedScript.push(src)
+    }
+    else {
+      if (Array.isArray(src)) {
+        src.forEach(addCache)
+      }
+      else addCache(src)
     }
+  })(err => {
+    removeFailedScript()
+    onComplete(err)
+  })
+}
+
+const addCache = (entry) => {
+  if (loadedScript.indexOf(entry) < 0) {
+    loadedScript.push(entry)
   }
+}
 
-  const removeFailedScript = () => {
-    if (failedScript.length > 0) {
-      failedScript.forEach((script) => {
-        const node = document.querySelector(`script[src='${script}']`)
-        if (node != null) {
-          node.parentNode.removeChild(node)
-        }
-      })
+const removeFailedScript = () => {
+  if (failedScript.length > 0) {
+    failedScript.forEach((script) => {
+      const node = document.querySelector(`script[src='${script}']`)
+      if (node != null) {
+        node.parentNode.removeChild(node)
+      }
+    })
 
-      failedScript = []
-    }
+    failedScript = []
   }
+}
 
+const scriptLoader = (...scripts) => (WrappedComponent) => {
   class ScriptLoader extends Component {
     static propTypes = {
       onScriptLoaded: T.func
-    };
+    }
 
     static defaultProps = {
       onScriptLoaded: noop
-    };
+    }
 
     constructor (props, context) {
       super(props, context)
@@ -45,30 +85,7 @@ const scriptLoader = (...scripts) => (WrappedComponent) => {
     }
 
     componentDidMount () {
-      // sequence load
-      const loadNewScript = (src) => {
-        if (loadedScript.indexOf(src) < 0) return newScript(src)
-      }
-      const tasks = scripts.map(src => {
-        if (Array.isArray(src)) {
-          return src.map(loadNewScript)
-        }
-        else return loadNewScript(src)
-      })
-
-      series(...tasks)((err, src) => {
-        if (err) {
-          failedScript.push(src)
-        }
-        else {
-          if (Array.isArray(src)) {
-            src.forEach(addCache)
-          }
-          else addCache(src)
-        }
-      })(err => {
-        removeFailedScript()
-
+      startLoadingScripts(scripts, err => {
         this.setState({
           isScriptLoaded: true,
           isScriptLoadSucceed: !err

test/index.spec.js

@@ -18,7 +18,6 @@ function renderTestComponent (deps, onScriptLoaded) {
 function checkScriptLoaded (getComponent, done) {
   return _ => {
     const com = getComponent()
-    console.log(com)
 
     expect(com.props.isScriptLoaded).to.be.true
     expect(com.props.isScriptLoadSucceed).to.be.true
@@ -33,6 +32,8 @@ describe('Test this module', _ => {
       const deps = [ '//cdn.bootcss.com/jquery/2.2.1/jquery.min.js' ]
       const com = renderTestComponent(deps, onScriptLoaded)
 
+      this.timeout(5000)
+
       // check script tags
       deps.forEach(testScript => {
         const tag = document.querySelector(`script[src='${testScript}']`)
@@ -54,11 +55,13 @@ describe('Test this module', _ => {
 
   it('[react-async-script-loader] No redundant script tag will be appended',
     function (done) {
-      const deps = [ '//cdn.bootcss.com/jquery/2.2.1/jquery.min.js' ]
+      const deps = [ '//cdn.bootcss.com/jquery/2.1.1/jquery.min.js' ]
       const com0 = renderTestComponent(deps, checkScriptLoaded(_ => com0, checkAllDone))
       const com1 = renderTestComponent(deps, checkScriptLoaded(_ => com1, checkAllDone))
       let count = 0
 
+      this.timeout(5000)
+
       // check script tags
       deps.forEach(testScript => {
         const tags = document.querySelectorAll(`script[src='${testScript}']`)