├── .babelrc
├── .gitignore
├── .npmrc
├── CHANGELOG.md
├── Gruntfile.js
├── README.md
├── dist
    ├── vue-script2.js
    └── vue-script2.min.js
├── package-lock.json
├── package.json
└── src
    └── index.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["@babel/preset-env"]
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | lib
2 | coverage
3 | node_modules
4 | .DS_Store
5 | *.log
6 | *.swp
7 | *~
8 | *.ignore


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | save-prefix = ''


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | ### 2.1.0
 2 | 
 3 | - Better handling of simultaneously loaded components ([#12](https://github.com/taoeffect/vue-script2/issues/12) - thanks **[@vgavro](https://github.com/vgavro)**)
 4 | - Emit vue events for `loaded` and `error` ([#31](https://github.com/taoeffect/vue-script2/issues/31) - thanks **[@vgavro](https://github.com/vgavro)**)
 5 | - Updated all dev dependencies and switched from uglify to terser
 6 | 
 7 | ### 2.0.3
 8 | 
 9 | - Fix inline-source containing HTML entities (via **[@andrispraulitis](https://github.com/andrispraulitis)**)
10 | 
11 | ### 2.0.2
12 | 
13 | - IE Support (via **[@akhoury](https://github.com/akhoury)**)
14 | - Use `render` function instead of `template` (via **[@bichikim](https://github.com/bichikim)**)
15 | - Updated dependencies
16 | - Removed broken `grunt-rollup` and updated `Gruntfile.js` accordingly
17 | 
18 | ## Pre 2.0.2
19 | 
20 | - __2.0.1__ - `crossorigin` Safari fix (thanks [@mingchuno](https://github.com/mingchuno)!)
21 | - __2.0.0__ - Vue 2.x compatible. Requires Vue 2.x. Use 1.2.2 for Vue 1.x.
22 | - __1.2.2__ - Fixes broken `crossorigin` attribute (thx @grempe!)
23 | - __1.2.1__ - Just a bit of perfectionism to fix a non-issue issue
24 | - __1.2.0__ - Added `VueScript2.load` imperative loading
25 | - __1.1.2__ - Another bump to get npm.org to display `script2ify` in the README
26 | - __1.1.1__ - Identical to `1.1.0`, just adds needed package.json info.
27 | - __1.1.0__ - Adds special support for `async` attribute.
28 | - __1.0.0__ - Initial release.
29 | 


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | const rollup = require('rollup')
 2 | const babel = require('rollup-plugin-babel')
 3 | const terser = require('rollup-plugin-terser').terser
 4 | const fs = require('fs')
 5 | 
 6 | module.exports = function (grunt) {
 7 |   require('load-grunt-tasks')(grunt)
 8 | 
 9 |   var pkg = grunt.file.readJSON('package.json')
10 |   var file = pkg['jsnext:main']
11 |   var main = fs.readFileSync(file, 'utf-8')
12 |   var v1 = main.match(/version: '([\d.]+)'/)[1]
13 |   if (v1 !== pkg.version) {
14 |     console.log(`Updating version in ${file}: ${v1} => ${pkg.version}`)
15 |     main = main.replace(`version: '${v1}'`, `version: '${pkg.version}'`)
16 |     fs.writeFileSync(file, main)
17 |   }
18 | 
19 |   var year = new Date().getFullYear()
20 |   year = year === 2016 ? year : `2016-${year}`
21 |   var banner = `/*!
22 |   * ${pkg.name} v${pkg.version}
23 |   * (c) ${year} Greg Slepak
24 |   * @license MIT License
25 |   */`
26 | 
27 |   function pick (o, props) {
28 |     var x = {}
29 |     props.forEach(k => { x[k] = o[k] })
30 |     return x
31 |   }
32 | 
33 |   grunt.initConfig({
34 |     pkg: pkg,
35 |     checkDependencies: { this: { options: { install: true } } },
36 |     exec: {
37 |       eslint: 'node ./node_modules/eslint/bin/eslint.js "**/*.js"'
38 |     },
39 |     rollup: {
40 |       umd: {
41 |         input: 'src/index.js',
42 |         plugins: [babel({ exclude: './node_modules/**' })],
43 |         output: {
44 |           file: `dist/${pkg.name}.js`,
45 |           format: 'umd',
46 |           name: camelCase(pkg.name),
47 |           banner
48 |         }
49 |       },
50 |       ugly: {
51 |         input: 'src/index.js',
52 |         plugins: [
53 |           babel({ exclude: './node_modules/**' }),
54 |           terser({ output: { preamble: banner } })
55 |         ],
56 |         output: {
57 |           file: `dist/${pkg.name}.min.js`,
58 |           format: 'umd',
59 |           name: camelCase(pkg.name)
60 |         }
61 |       }
62 |     }
63 |   })
64 | 
65 |   grunt.registerMultiTask('rollup', async function () {
66 |     // grunt.log.writeln(this.target + ': ', this.data)
67 |     var done = this.async()
68 |     // https://rollupjs.org/guide/en#javascript-api
69 |     const bundle = await rollup.rollup(pick(this.data, ['input', 'plugins']))
70 |     await bundle.write(this.data.output)
71 |     done()
72 |   })
73 | 
74 |   grunt.registerTask('default', ['exec:eslint', 'rollup'])
75 | }
76 | 
77 | function camelCase (s) {
78 |   return s.replace(/(?:^|[-_/])(\w)/g, (_, c) => c ? c.toUpperCase() : '')
79 | }
80 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # VueScript2 - Simple, Familiar Asynchronous Script Loading
  2 | 
  3 | VueScript2 brings back the `<script>` tag to your SPA (Single Page App)!
  4 | 
  5 | This tiny library should take care of all your [declarative](#familiar-declarative-asynchronous-loading-of-scripts) and [imperative](#promise-based-imperative-loading-too) asynchronous loading needs. Web designers can rest easy knowing their existing knowledge of web development is still useful!
  6 | 
  7 | This version is tailored for the [Vue.js](http://vuejs.org) framework, but it's easy to port to [Riot.js](http://riotjs.com) and others.
  8 | 
  9 | VueScript2 is primarily for internal use and not for standalone components that are being shared publicly. Those should be "self-contained" and come with all the JS they need.
 10 | 
 11 | ***NOTE:*** _Requires Vue 2.x. Use version 1.2.2 for Vue 1.x._
 12 | 
 13 | ## Features
 14 | 
 15 | - Just like `<script>` except with a `2`, but [even that can be fixed!](#writing-script-instead-of-script2-using-script2ify)
 16 | - Keep your `app.js` bundle small!
 17 | - Embrace Web Standards™ everyone knows and loves!
 18 | - Easy for web designers to pick up! If you know HTML, you already know how to use it!
 19 | - Tiny! Less than __1kb__! (min+gzip'd)
 20 | - Perfect for use in `.ejs` templates or `.html` files!
 21 | - No more including every library on every page or complicated "code splitting"!
 22 | - Ordered execution based on position in markup!
 23 | - Special [`unload` attribute](#cleanup-unused-resources-with-the-unload-attribute) can be used to keep your app's memory usage low!
 24 | - Does [imperative loading](#promise-based-imperative-loading-too) too!
 25 | 
 26 | ## Installation
 27 | 
 28 | ```
 29 | npm install vue-script2 --save
 30 | ```
 31 | 
 32 | Then enable the plugin (in your `main.js` or wherever):
 33 | 
 34 | ```js
 35 | Vue.use(require('vue-script2'))
 36 | ```
 37 | 
 38 | Or with `import`:
 39 | 
 40 | ```js
 41 | import Vue from 'vue'
 42 | import VS2 from 'vue-script2'
 43 | 
 44 | Vue.use(VS2)
 45 | ```
 46 | 
 47 | ## Usage
 48 | 
 49 | _Note: you can write_ __*`<script>`*__ *instead of* __*`<script2>`*__ _using [`script2ify`!](#writing-script-instead-of-script2-using-script2ify)_ :smile:
 50 | 
 51 | ##### Familiar, declarative, asynchronous loading of scripts
 52 | 
 53 | Using `vue-script2` with [`vue-router`](https://github.com/vuejs/vue-router) is simple. Say that only one of your routes displays a "page" that makes use of jQuery. Well, no need to include all of jQuery in your `app.js` bundle, now you can throw this in:
 54 | 
 55 | ```html
 56 | <script2 src="/path/to/jquery.min.js"></script2>
 57 | ```
 58 | 
 59 | Boom!
 60 | 
 61 | And don't worry, `script2` won't re-download scripts if they're already loaded.
 62 | 
 63 | ##### Promise-based imperative loading too!
 64 | 
 65 | Imperatively load scripts with `VueScript2.load`:
 66 | 
 67 | ```js
 68 | VueScript2.load('/path/to/jquery.min.js').then(function () {
 69 |   $('#msg').text('Hello from VueScript2!')
 70 | })
 71 | ```
 72 | 
 73 | For 99% of use-cases this is totally sufficient and you do not need the overhead of RequireJS or SystemJS or whatever else. That's especially true given that Vue.js is normally used with Browserify or Webpack, which handle complicated dependency management for you.
 74 | 
 75 | _NOTE: scripts injected using `VueScript2.load` are always [`async`](#special-support-for-async-attribute)._
 76 | 
 77 | ##### Delayed execution of inlined JavaScript
 78 | 
 79 | Want to run some JavaScript only when a specific "page"/route is visited and only after a library has finished loading? Simple!
 80 | 
 81 | ```html
 82 | <script2 src="/path/to/jquery.min.js"></script2>
 83 | <script2>
 84 | // Ordered execution should ensure that '$' is available here
 85 | $(document).ready(function () {
 86 |   // this code runs *only* when the route
 87 |   // that contains this code is loaded! :D->-<
 88 | })
 89 | </script2>
 90 | ```
 91 | 
 92 | ##### Cleanup unused resources with the `unload` attribute
 93 | 
 94 | The `unload` attribute accepts JS expressions to run when the component is destroyed. This prevents your SPA from accumulating stuff in memory that's not being used:
 95 | 
 96 | ```html
 97 | <script2 src="/path/to/jquery.min.js" unload="jQuery.noConflict(true)"></script2>
 98 | ```
 99 | 
100 | ##### Special support for `async` attribute
101 | 
102 | Although technically all scripts are inserted with `s.async = false` (since we're using `document.write`, see [this wonderful article](http://www.html5rocks.com/en/tutorials/speed/script-loading/) by [Jake Archibald](https://twitter.com/jaffathecake) for details), setting the `async` attribute does make a meaningful difference.
103 | 
104 | By default, the loading of `<script2>` tags is serialized using promises so that one script loads after another has finished. If you don't care about the loading order, add `async` to have the script injected into the page immediately.
105 | 
106 | You can mix and match so that some `<script2>` tags are loaded immediately while others wait for the ones before them:
107 | 
108 | ```html
109 | <script2 src="jquery.min.js"></script2>
110 | <script2>$('#foo').text('hi!')</script2>
111 | <!-- Load next script immediately, don't wait for jQuery -->
112 | <script2 src="lib.js" async></script2>
113 | ```
114 | 
115 | ## Writing `<script>` instead of `<script2>` using `script2ify`
116 | 
117 | The `script2ify` [browserify](https://github.com/substack/node-browserify) transform below will (fairly safely) dynamically replace `<script>` tags with `<script2>` tags within `.ejs`, `.html`, and even `.vue` files!
118 | 
119 | ```js
120 | var through = require('through2')
121 | // This will replace <script> with <script2> in .html, .vue and .ejs files
122 | // EXCEPT:
123 | // - within <!-- comments -->
124 | // - top-level <script> tags within .vue files
125 | // Additional exclusion per: http://www.rexegg.com/regex-best-trick.html
126 | // Excluding <pre> tags did not seem to work, however.
127 | function script2ify (file) {
128 |   return !/\.(vue|html|ejs)$/.test(file) // edit to support other file types
129 |   ? through()
130 |   : through(function (buf, encoding, cb) {
131 |     // avoid replacing top-level <script> tags in .vue files
132 |     var regex = /\.vue$/.test(file)
133 |     ? /<!--.*?-->|^<script>|^<\/script>|(?:<(\/)?script([ >]))/gm
134 |     : /<!--.*?-->|(?:<(\/)?script([ >]))/gm
135 |     var replacement = (m, p1, p2) => p2 ? `<${p1 || ''}script2${p2}` : m
136 |     cb(null, buf.toString('utf8').replace(regex, replacement))
137 |   })
138 | }
139 | ```
140 | 
141 | ## History
142 | 
143 | See [`CHANGELOG.md`](CHANGELOG.md)
144 | 
145 | # License
146 | 
147 | [MIT](http://opensource.org/licenses/MIT)
148 | 


--------------------------------------------------------------------------------
/dist/vue-script2.js:
--------------------------------------------------------------------------------
  1 | /*!
  2 |   * vue-script2 v2.1.0
  3 |   * (c) 2016-2019 Greg Slepak
  4 |   * @license MIT License
  5 |   */
  6 | (function (global, factory) {
  7 |   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  8 |   typeof define === 'function' && define.amd ? define(factory) :
  9 |   (global = global || self, global.VueScript2 = factory());
 10 | }(this, function () { 'use strict';
 11 | 
 12 |   var Script2 = {
 13 |     installed: false,
 14 |     p: Promise.resolve(),
 15 |     version: '2.1.0',
 16 |     // grunt will overwrite to match package.json
 17 |     loaded: {},
 18 | 
 19 |     // keys are the scripts that is loading or loaded, values are promises
 20 |     install(Vue) {
 21 |       if (Script2.installed) return;
 22 |       var customAttrs = ['unload']; // from: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
 23 |       // 'async' and 'defer' don't allow document.write according to:
 24 |       // http://www.html5rocks.com/en/tutorials/speed/script-loading/
 25 |       // we ignore 'defer' and handle 'async' specially.
 26 | 
 27 |       var props = customAttrs.concat(['src', 'type', 'async', 'integrity', 'text', 'crossorigin']);
 28 |       Vue.component('script2', {
 29 |         props: props,
 30 | 
 31 |         // <slot> is important, see: http://vuejs.org/guide/components.html#Named-Slots
 32 |         // template: '<div style="display:none"><slot></slot></div>',
 33 |         // NOTE: Instead of using `template` we can use the `render` function like so:
 34 |         render(h) {
 35 |           return h('div', {
 36 |             style: 'display:none'
 37 |           }, this.$slots.default);
 38 |         },
 39 | 
 40 |         mounted() {
 41 |           var parent = this.$el.parentElement;
 42 | 
 43 |           if (!this.src) {
 44 |             Script2.p = Script2.p.then(() => {
 45 |               var s = document.createElement('script');
 46 |               var h = this.$el.innerHTML;
 47 |               h = h.replace(/&lt;/gi, '<').replace(/&gt;/gi, '>').replace(/&amp;/gi, '&');
 48 |               s.type = 'text/javascript';
 49 |               s.appendChild(document.createTextNode(h));
 50 |               parent.appendChild(s);
 51 |               this.$emit('loaded'); // any other proper way to do this or emit error?
 52 |             });
 53 |           } else {
 54 |             var opts = _.omitBy(_.pick(this, props), _.isUndefined);
 55 | 
 56 |             opts.parent = parent; // this syntax results in an implicit return
 57 | 
 58 |             var load = () => Script2.load(this.src, opts).then(() => this.$emit('loaded'), err => this.$emit('error', err));
 59 | 
 60 |             _.isUndefined(this.async) || this.async === 'false' ? Script2.p = Script2.p.then(load) // serialize execution
 61 |             : load(); // inject immediately
 62 |           } // see: https://vuejs.org/v2/guide/migration.html#ready-replaced
 63 | 
 64 | 
 65 |           this.$nextTick(() => {
 66 |             // code that assumes this.$el is in-document
 67 |             // NOTE: we could've done this.$el.remove(), but IE sucks, see:
 68 |             //       https://github.com/taoeffect/vue-script2/pull/17
 69 |             this.$el.parentElement.removeChild(this.$el); // remove dummy template <div>
 70 |           });
 71 |         },
 72 | 
 73 |         destroyed() {
 74 |           if (this.unload) {
 75 |             new Function(this.unload)(); // eslint-disable-line
 76 | 
 77 |             delete Script2.loaded[this.src];
 78 |           }
 79 |         }
 80 | 
 81 |       });
 82 |       Script2.installed = true;
 83 |     },
 84 | 
 85 |     load(src) {
 86 |       let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
 87 |         parent: document.head
 88 |       };
 89 | 
 90 |       if (!Script2.loaded[src]) {
 91 |         Script2.loaded[src] = new Promise((resolve, reject) => {
 92 |           var s = document.createElement('script'); // omit the special options that Script2 supports
 93 | 
 94 |           _.defaults2(s, _.omit(opts, ['unload', 'parent']), {
 95 |             type: 'text/javascript'
 96 |           }); // according to: http://www.html5rocks.com/en/tutorials/speed/script-loading/
 97 |           // async does not like 'document.write' usage, which we & vue.js make
 98 |           // heavy use of based on the SPA style. Also, async can result
 99 |           // in code getting executed out of order from how it is inlined on the page.
100 | 
101 | 
102 |           s.async = false; // therefore set this to false
103 | 
104 |           s.src = src; // crossorigin in HTML and crossOrigin in the DOM per HTML spec
105 |           // https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-crossorigin
106 | 
107 |           if (opts.crossorigin) {
108 |             s.crossOrigin = opts.crossorigin;
109 |           } // inspiration from: https://github.com/eldargab/load-script/blob/master/index.js
110 |           // and: https://github.com/ded/script.js/blob/master/src/script.js#L70-L82
111 | 
112 | 
113 |           s.onload = () => resolve(src); // IE should now support onerror and onload. If necessary, take a look
114 |           // at this to add older IE support: http://stackoverflow.com/a/4845802/1781435
115 | 
116 | 
117 |           s.onerror = () => reject(new Error(src));
118 | 
119 |           opts.parent.appendChild(s);
120 |         });
121 |       }
122 | 
123 |       return Script2.loaded[src];
124 |     }
125 | 
126 |   };
127 |   var _ = {
128 |     isUndefined(x) {
129 |       return x === undefined;
130 |     },
131 | 
132 |     pick(o, props) {
133 |       var x = {};
134 |       props.forEach(k => {
135 |         x[k] = o[k];
136 |       });
137 |       return x;
138 |     },
139 | 
140 |     omit(o, props) {
141 |       var x = {};
142 |       Object.keys(o).forEach(k => {
143 |         if (props.indexOf(k) === -1) x[k] = o[k];
144 |       });
145 |       return x;
146 |     },
147 | 
148 |     omitBy(o, pred) {
149 |       var x = {};
150 |       Object.keys(o).forEach(k => {
151 |         if (!pred(o[k])) x[k] = o[k];
152 |       });
153 |       return x;
154 |     },
155 | 
156 |     // custom defaults function suited to our specific purpose
157 |     defaults2(o) {
158 |       for (var _len = arguments.length, sources = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
159 |         sources[_key - 1] = arguments[_key];
160 |       }
161 | 
162 |       sources.forEach(s => {
163 |         Object.keys(s).forEach(k => {
164 |           if (_.isUndefined(o[k]) || o[k] === '') o[k] = s[k];
165 |         });
166 |       });
167 |     }
168 | 
169 |   };
170 | 
171 |   return Script2;
172 | 
173 | }));
174 | 


--------------------------------------------------------------------------------
/dist/vue-script2.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 |   * vue-script2 v2.1.0
3 |   * (c) 2016-2019 Greg Slepak
4 |   * @license MIT License
5 |   */
6 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).VueScript2=t()}(this,function(){"use strict";var e={installed:!1,p:Promise.resolve(),version:"2.1.0",loaded:{},install(r){if(!e.installed){var n=["unload"].concat(["src","type","async","integrity","text","crossorigin"]);r.component("script2",{props:n,render(e){return e("div",{style:"display:none"},this.$slots.default)},mounted(){var r=this.$el.parentElement;if(this.src){var i=t.omitBy(t.pick(this,n),t.isUndefined);i.parent=r;var s=()=>e.load(this.src,i).then(()=>this.$emit("loaded"),e=>this.$emit("error",e));t.isUndefined(this.async)||"false"===this.async?e.p=e.p.then(s):s()}else e.p=e.p.then(()=>{var e=document.createElement("script"),t=this.$el.innerHTML;t=t.replace(/&lt;/gi,"<").replace(/&gt;/gi,">").replace(/&amp;/gi,"&"),e.type="text/javascript",e.appendChild(document.createTextNode(t)),r.appendChild(e),this.$emit("loaded")});this.$nextTick(()=>{this.$el.parentElement.removeChild(this.$el)})},destroyed(){this.unload&&(new Function(this.unload)(),delete e.loaded[this.src])}}),e.installed=!0}},load(r){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{parent:document.head};return e.loaded[r]||(e.loaded[r]=new Promise((e,i)=>{var s=document.createElement("script");t.defaults2(s,t.omit(n,["unload","parent"]),{type:"text/javascript"}),s.async=!1,s.src=r,n.crossorigin&&(s.crossOrigin=n.crossorigin),s.onload=()=>e(r),s.onerror=()=>i(new Error(r)),n.parent.appendChild(s)})),e.loaded[r]}},t={isUndefined:e=>void 0===e,pick(e,t){var r={};return t.forEach(t=>{r[t]=e[t]}),r},omit(e,t){var r={};return Object.keys(e).forEach(n=>{-1===t.indexOf(n)&&(r[n]=e[n])}),r},omitBy(e,t){var r={};return Object.keys(e).forEach(n=>{t(e[n])||(r[n]=e[n])}),r},defaults2(e){for(var r=arguments.length,n=new Array(r>1?r-1:0),i=1;i<r;i++)n[i-1]=arguments[i];n.forEach(r=>{Object.keys(r).forEach(n=>{(t.isUndefined(e[n])||""===e[n])&&(e[n]=r[n])})})}};return e});
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-script2",
 3 |   "version": "2.1.0",
 4 |   "description": "Brings back <script> to your favorite Single Page App!",
 5 |   "main": "dist/vue-script2.js",
 6 |   "jsnext:main": "src/index.js",
 7 |   "scripts": {
 8 |     "test": "echo \"Error: no test specified\" && exit 1"
 9 |   },
10 |   "author": "Greg Slepak",
11 |   "homepage": "https://github.com/taoeffect/vue-script2",
12 |   "bugs": {
13 |     "url": "https://github.com/taoeffect/vue-script2/issues"
14 |   },
15 |   "repository": {
16 |     "type": "git",
17 |     "url": "git://github.com/taoeffect/vue-script2.git"
18 |   },
19 |   "keywords": [
20 |     "script",
21 |     "injection",
22 |     "asynchronous",
23 |     "async",
24 |     "loading",
25 |     "loader",
26 |     "load",
27 |     "spa",
28 |     "vuejs",
29 |     "vue",
30 |     "plugin",
31 |     "component"
32 |   ],
33 |   "license": "MIT",
34 |   "standard": {
35 |     "parser": "babel-eslint",
36 |     "ignore": [
37 |       "dist/*"
38 |     ]
39 |   },
40 |   "eslintConfig": {
41 |     "root": true,
42 |     "parserOptions": {
43 |       "parser": "babel-eslint"
44 |     },
45 |     "extends": [
46 |       "standard"
47 |     ]
48 |   },
49 |   "eslintIgnore": [
50 |     "dist/*",
51 |     "ignored/*"
52 |   ],
53 |   "browserslist": "> 1% and since 2017 and not dead",
54 |   "devDependencies": {
55 |     "@babel/core": "7.4.5",
56 |     "@babel/preset-env": "7.4.5",
57 |     "babel-eslint": "10.0.2",
58 |     "eslint": "6.0.1",
59 |     "eslint-config-standard": "12.0.0",
60 |     "eslint-plugin-import": "2.18.0",
61 |     "eslint-plugin-node": "9.1.0",
62 |     "eslint-plugin-promise": "4.2.1",
63 |     "eslint-plugin-standard": "4.0.0",
64 |     "grunt": "1.0.4",
65 |     "grunt-check-dependencies": "1.0.0",
66 |     "grunt-exec": "3.0.0",
67 |     "load-grunt-tasks": "5.0.0",
68 |     "rollup": "1.16.2",
69 |     "rollup-plugin-babel": "4.3.3",
70 |     "rollup-plugin-terser": "5.0.0"
71 |   }
72 | }
73 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
  1 | var Script2 = {
  2 |   installed: false,
  3 |   p: Promise.resolve(),
  4 |   version: '2.1.0', // grunt will overwrite to match package.json
  5 |   loaded: {}, // keys are the scripts that is loading or loaded, values are promises
  6 |   install (Vue, options = {}) {
  7 |     if (Script2.installed) return
  8 |     var customAttrs = ['unload']
  9 |     // from: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
 10 |     // 'async' and 'defer' don't allow document.write according to:
 11 |     // http://www.html5rocks.com/en/tutorials/speed/script-loading/
 12 |     // we ignore 'defer' and handle 'async' specially.
 13 |     var props = customAttrs.concat(['src', 'type', 'async', 'integrity', 'text', 'crossorigin'])
 14 |     Vue.component('script2', {
 15 |       props: props,
 16 |       // <slot> is important, see: http://vuejs.org/guide/components.html#Named-Slots
 17 |       // template: '<div style="display:none"><slot></slot></div>',
 18 |       // NOTE: Instead of using `template` we can use the `render` function like so:
 19 |       render (h) { return h('div', { style: 'display:none' }, this.$slots.default) },
 20 |       mounted () {
 21 |         var parent = this.$el.parentElement
 22 |         if (!this.src) {
 23 |           Script2.p = Script2.p.then(() => {
 24 |             var s = document.createElement('script')
 25 |             var h = this.$el.innerHTML
 26 |             h = h.replace(/&lt;/gi, '<').replace(/&gt;/gi, '>').replace(/&amp;/gi, '&')
 27 |             s.type = 'text/javascript'
 28 |             s.appendChild(document.createTextNode(h))
 29 |             parent.appendChild(s)
 30 |             this.$emit('loaded') // any other proper way to do this or emit error?
 31 |           })
 32 |         } else {
 33 |           var opts = _.omitBy(_.pick(this, props), _.isUndefined)
 34 |           opts.parent = parent
 35 |           // this syntax results in an implicit return
 36 |           var load = () => Script2.load(this.src, opts).then(
 37 |             () => this.$emit('loaded'),
 38 |             (err) => this.$emit('error', err)
 39 |           )
 40 |           _.isUndefined(this.async) || this.async === 'false'
 41 |             ? Script2.p = Script2.p.then(load) // serialize execution
 42 |             : load() // inject immediately
 43 |         }
 44 |         // see: https://vuejs.org/v2/guide/migration.html#ready-replaced
 45 |         this.$nextTick(() => {
 46 |           // code that assumes this.$el is in-document
 47 |           // NOTE: we could've done this.$el.remove(), but IE sucks, see:
 48 |           //       https://github.com/taoeffect/vue-script2/pull/17
 49 |           this.$el.parentElement.removeChild(this.$el) // remove dummy template <div>
 50 |         })
 51 |       },
 52 |       destroyed () {
 53 |         if (this.unload) {
 54 |           new Function(this.unload)() // eslint-disable-line
 55 |           delete Script2.loaded[this.src]
 56 |         }
 57 |       }
 58 |     })
 59 |     Script2.installed = true
 60 |   },
 61 |   load (src, opts = { parent: document.head }) {
 62 |     if (!Script2.loaded[src]) {
 63 |       Script2.loaded[src] = new Promise((resolve, reject) => {
 64 |         var s = document.createElement('script')
 65 |         // omit the special options that Script2 supports
 66 |         _.defaults2(s, _.omit(opts, ['unload', 'parent']), { type: 'text/javascript' })
 67 |         // according to: http://www.html5rocks.com/en/tutorials/speed/script-loading/
 68 |         // async does not like 'document.write' usage, which we & vue.js make
 69 |         // heavy use of based on the SPA style. Also, async can result
 70 |         // in code getting executed out of order from how it is inlined on the page.
 71 |         s.async = false // therefore set this to false
 72 |         s.src = src
 73 |         // crossorigin in HTML and crossOrigin in the DOM per HTML spec
 74 |         // https://html.spec.whatwg.org/multipage/embedded-content.html#dom-img-crossorigin
 75 |         if (opts.crossorigin) {
 76 |           s.crossOrigin = opts.crossorigin
 77 |         }
 78 |         // inspiration from: https://github.com/eldargab/load-script/blob/master/index.js
 79 |         // and: https://github.com/ded/script.js/blob/master/src/script.js#L70-L82
 80 |         s.onload = () => resolve(src)
 81 |         // IE should now support onerror and onload. If necessary, take a look
 82 |         // at this to add older IE support: http://stackoverflow.com/a/4845802/1781435
 83 |         s.onerror = () => reject(new Error(src))
 84 |         opts.parent.appendChild(s)
 85 |       })
 86 |     }
 87 |     return Script2.loaded[src]
 88 |   }
 89 | }
 90 | 
 91 | var _ = {
 92 |   isUndefined (x) { return x === undefined },
 93 |   pick (o, props) {
 94 |     var x = {}
 95 |     props.forEach(k => { x[k] = o[k] })
 96 |     return x
 97 |   },
 98 |   omit (o, props) {
 99 |     var x = {}
100 |     Object.keys(o).forEach((k) => { if (props.indexOf(k) === -1) x[k] = o[k] })
101 |     return x
102 |   },
103 |   omitBy (o, pred) {
104 |     var x = {}
105 |     Object.keys(o).forEach((k) => { if (!pred(o[k])) x[k] = o[k] })
106 |     return x
107 |   },
108 |   // custom defaults function suited to our specific purpose
109 |   defaults2 (o, ...sources) {
110 |     sources.forEach((s) => {
111 |       Object.keys(s).forEach((k) => {
112 |         if (_.isUndefined(o[k]) || o[k] === '') o[k] = s[k]
113 |       })
114 |     })
115 |   }
116 | }
117 | 
118 | export default Script2
119 | 


--------------------------------------------------------------------------------