Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ module.exports = {
"node": true,
"browser": true,
"es6": true,
"mocha": true
"jest": true
},
"globals": {
"document": true,
Expand Down
2 changes: 1 addition & 1 deletion .travis.yml
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
language: node_js
node_js:
- "8"
- "10"
after_success: 'npm run coveralls'
9 changes: 8 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
# CHANGELOG

## [1.0.0-alpha]
## [NEXT]
### Refactored
- Changed unit tests from mocha to jest
- Updated test to get 100% coverage
- Updated and cleaned up code
- Removed unused npm scripts and devDependencies

## [1.0.1]
### Refactored
- Refactor the way dynamic script generator was returning
- Use promises and resolved promises to handle multiple request.
Expand Down
69 changes: 28 additions & 41 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,11 @@

# Script Loader
A script loader for modular components in es6 (build process coming soon). This is built so that each components being responsible for what 3rd party dependencies they need.
- if script has not been loaded, it will load the script, run the one time setup callback, then execute the `then`
- if a script has already been loaded, it will execute the `then`
- if script has not been loaded, it will load the script, and return a promise
- `onLoadHandler` and `onErrorHandler` will execute on script load and on script error
- script promise will be resolved when the script is loaded, rejects if it errors
- if a script has already been requested to load throught dynamic script loader, it will return the existing promise
- all script proimses are added to `window.dynamicScriptLoader` global object

# Install
`npm i -S dynamic-script-loader`
Expand All @@ -13,21 +16,16 @@ A script loader for modular components in es6 (build process coming soon). This
simple

```
const ScriptLoader = require('dynamic-script-loader')
const script = new ScriptLoader()

script.load({
src: '//path/to/someExternalJS.js',
async: true, // default to true, you can leave this out
}), function oneTimeSetUp () {
// window.someExternalJS setup here
})
.then(function externalJSSuccessResolver () {
// this runs after one time setup
})
.catch(function scriptDidntLoad () {
console.log(':(')
})
const scriptLoader = require('dynamic-script-loader')

scriptLoader({
src: ''//path/to/someExternalJS.js'
},
onLoadHandler, // optional
onErrorHandler // optional
)
.then(resolverFunction)
.catch(catchFunction)
```

## Vue
Expand All @@ -37,12 +35,11 @@ heres a couple of ways you can use the script loader

### using it as a method
```
import DynamicScriptLoader from 'dynamic-script-loader'
import scriptLoader from 'dynamic-script-loader'

Vue.use({
install: function (Vue, options) {
Vue.prototype.$script = new DynamicScriptLoader()
}
Vue.prototype.$scriptLoader = scriptLoader
})

// inside a Vue component
Expand All @@ -55,7 +52,7 @@ data () {

mounted () {
// the loader will not load libraries if they have already been loaded
this.$script.load({
this.$scriptLoader({
src: '//some-cdn/src/js/library.js',
async: true
}, () => {
Expand All @@ -75,32 +72,22 @@ mounted () {
}
```

# TODO
- build process and export to dist folder
- remove class style and use more functional
# CAVEATS
script loading uses URL's as unique keys so if urls change by for example, query string, then the script will try to load it again.
**example:**
- urlA = `//www.example.com/script.js`
- urlB = `https://www.example.com/script.js`
- urlC = `https://www.example.com/script.js?hi`

would like to use this as
the script loader will treat these as separate javascript files

```
script.load('//path/to/someExternalJS.js')
.once(() => {
// one time setup
})
.then(() => {
// success! :D
})
.catch(() => {
// failure! D:
})
```

or instead of `once` maybe `setup` ?
# TODO
- use typescript!

# Contributing

- `git clone git@github.com:john-ko/dynamic-script-loader.git`
- `cd dynamic-script-loader`
- `npm install`
- `add changes`
- `npm run test:unit`
- `npm run test:e2e`
- `npm test`
Loading