diff --git a/karma.conf.js b/karma.conf.js index 732eb88..2086d6c 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -16,7 +16,8 @@ module.exports = function (config) { // list of files / patterns to load in the browser files: [ - 'tests.webpack.js' + 'tests.webpack.js', + './node_modules/es6-promise/dist/es6-promise.js' ], // list of files to exclude diff --git a/package.json b/package.json index 82da577..020c5f7 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "babel-preset-react": "^6.1.18", "babel-preset-stage-0": "^6.1.18", "chai": "~3.5.0", + "es6-promise": "^4.2.4", "eslint": "^1.9.0", "karma": "~0.13.22", "karma-chai": "~0.1.0", diff --git a/src/index.js b/src/index.js index 93b1492..6d0d805 100644 --- a/src/index.js +++ b/src/index.js @@ -2,49 +2,53 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import hoistStatics from 'hoist-non-react-statics' import { newScript, series, noop } from './utils' +// const Promise = require('es6-promise').Promise; const loadedScript = [] const pendingScripts = {} let failedScript = [] -export function startLoadingScripts(scripts, onComplete = noop) { - // sequence load - const loadNewScript = (script) => { - const src = typeof script === 'object' ? script.src : script - if (loadedScript.indexOf(src) < 0) { - return taskComplete => { - const callbacks = pendingScripts[src] || [] - callbacks.push(taskComplete) - pendingScripts[src] = callbacks - if (callbacks.length === 1) { - return newScript(script)(err => { - pendingScripts[src].forEach(cb => cb(err, src)) - delete pendingScripts[src] - }) - } +export function startLoadingScripts(scripts) { + return new Promise ((resolve,reject) => { + // sequence load + const loadNewScript = (script) => { + const src = typeof script === 'object' ? script.src : script + if (loadedScript.indexOf(src) < 0) { + return taskComplete => { + const callbacks = pendingScripts[src] || [] + callbacks.push(taskComplete) + pendingScripts[src] = callbacks + if (callbacks.length === 1) { + return newScript(script)(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 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() - onComplete(err) + series(...tasks)((err, src) => { + if (err) { + failedScript.push(src) + } + else { + if (Array.isArray(src)) { + src.forEach(addCache) + } + else addCache(src) + } + })(err => { + removeFailedScript() + if (err) reject(err) + else resolve() + }) }) } @@ -90,18 +94,19 @@ const scriptLoader = (...scripts) => (WrappedComponent) => { componentDidMount () { this._isMounted = true; - startLoadingScripts(scripts, err => { - if(this._isMounted) { - this.setState({ - isScriptLoaded: true, - isScriptLoadSucceed: !err - }, () => { - if (!err) { - this.props.onScriptLoaded() + startLoadingScripts(scripts).then((result, error) => { + if(this._isMounted) { + this.setState({ + isScriptLoaded: true, + isScriptLoadSucceed: !error + }, () => { + if (!error) { + this.props.onScriptLoaded() + } + }) } - }) - } - }) + + }) } componentWillUnmount () { diff --git a/test/index.spec.js b/test/index.spec.js index 318f242..5704677 100644 --- a/test/index.spec.js +++ b/test/index.spec.js @@ -1,6 +1,7 @@ const ReactTestUtils = require('react-dom/test-utils') const React = require('react') const AsyncScriptLoader = require('../src').default +require('es6-promise').polyfill(); class TestComponent extends React.Component { render () {