New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
fetch-inject
Advanced tools
fetch-inject - npm Package Compare versions
Comparing version 1.0.0 to 1.0.1
| /** | ||
| * MIT License | ||
| * | ||
| * Copyright (c) 2017 Josh Habdas | ||
| * | ||
| * Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| * of this software and associated documentation files (the "Software"), to deal | ||
| * in the Software without restriction, including without limitation the rights | ||
| * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| * copies of the Software, and to permit persons to whom the Software is | ||
| * furnished to do so, subject to the following conditions: | ||
| * | ||
| * The above copyright notice and this permission notice shall be included in all | ||
| * copies or substantial portions of the Software. | ||
| * | ||
| * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
| * SOFTWARE. | ||
| * @licence MIT | ||
| */ | ||
| var fetchInject=function(){"use strict";const e=function(e,t,n,o,c,r,i){r=t.createElement(n),i=t.getElementsByTagName(n)[0],r.appendChild(t.createTextNode(o)),r.onload=c,i.parentNode.insertBefore(r,i)},t=function(e,t,n,o,c,r,i){r=t.createElement(n),i=t.getElementsByTagName(n)[0],r.type="text/css",r.appendChild(t.createTextNode(o)),i.parentNode.insertBefore(r,i)};return function(n){const o=[],c=[],r=[];return n.forEach(e=>c.push(window.fetch(e).then(e=>{return[e.clone().text(),e.blob()]}).then(e=>{return Promise.all(e).then(e=>{o.push({text:e[0],type:e[1].type})})}))),Promise.all(c).then(()=>{return o.forEach(n=>{r.push({then:o=>{"application/javascript"===n.type?e(window,document,"script",n.text,o()):"text/css"===n.type&&(t(window,document,"style",n.text),o())}})}),Promise.all(r)})}}(); |
| { | ||
| "name": "fetch-inject", | ||
| "version": "1.0.0", | ||
| "version": "1.0.1", | ||
| "description": "Inline assets into the DOM using Fetch Injection.", | ||
| "main": "lib/fetch-inject.js", | ||
| "scripts": { | ||
| "build": "npm run lint && rollup -c", | ||
| "test": "echo \"Error: no test specified\" && exit 1", | ||
| "build": "rollup -c", | ||
| "test": "npm run lint", | ||
| "lint": "standard" | ||
@@ -26,3 +26,2 @@ }, | ||
| "devDependencies": { | ||
| "path": "^0.12.7", | ||
| "rollup": "^0.41.4", | ||
@@ -29,0 +28,0 @@ "rollup-plugin-license": "^0.3.0", |
@@ -1,9 +0,17 @@ | ||
| # fetchInject | ||
| # Fetch Inject | ||
| Implements _Fetch Injection_ to dynamically inline assets into the DOM using the [Fetch API](http://devdocs.io/dom/fetch_api), with support for promise chains. | ||
| [](https://www.npmjs.com/package/fetch-inject) | ||
| [](https://www.npmjs.com/package/fetch-inject) | ||
| [](https://www.npmjs.com/package/fetch-inject) | ||
| Dynamically inline assets into the DOM using the Fetch API, with support for promise chains. | ||
| ## Purpose | ||
| Use to inject remote assets into the DOM, then do something with them. Currently supports inlining of `script` _and_ `style` elements. | ||
| Use to inject remote assets, then do something with them. Currently supports inlining of `script` and `style` elements. | ||
| ## Background | ||
| Read about [why I created this](https://hackcabin.com/post/introducing-fetch-injection/) on **_Hack Cabin_**. | ||
| ## Usage | ||
@@ -123,11 +131,9 @@ | ||
| fetchInject([ | ||
| 'https://cdn.jsdelivr.net/jquery/3.1.1/jquery.slim.min.js' | ||
| 'https://cdn.jsdelivr.net/jquery/3.1.1/jquery.slim.min.js', | ||
| 'https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js', | ||
| 'https://cdn.jsdelivr.net/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' | ||
| ]).then(() => { | ||
| fetchInject([ | ||
| 'https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js' | ||
| ]).then(() => { | ||
| fetchInject([ | ||
| 'https://npmcdn.com/bootstrap@4.0.0-alpha.5/dist/js/bootstrap.min.js' | ||
| ]) | ||
| }) | ||
| 'https://npmcdn.com/bootstrap@4.0.0-alpha.5/dist/js/bootstrap.min.js' | ||
| ]) | ||
| }) | ||
@@ -139,3 +145,3 @@ ``` | ||
| **Problem:** | ||
| You want to use library made up of a number of different resources, and then instantiate it upon completion. | ||
| You want to use library composed of several resources and initialize it as soon as possible. | ||
@@ -146,3 +152,3 @@ **Solution:** | ||
| ```js | ||
| const container = document.querySelectorAll('.pswp')[0] | ||
| const container = document.querySelector('.pswp') | ||
| const items = JSON.parse({{ .Params.gallery.main | jsonify }}) | ||
@@ -163,2 +169,3 @@ fetchInject([ | ||
| - Requires you have at least one of `script` or `style` in the `head` of your `document` already, depending on which you're injecting. | ||
| - If the resource uses a relative path (e.g. `url(default-skin.png)`) the relative resource may fail to load. | ||
| - Does not perform any caching. | ||
@@ -175,7 +182,10 @@ - Does not support [Isomorphic rendering](http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/). | ||
| 1. Install dependencies with `npm i` (`brew install node` first on macOS). | ||
| 1. Modify files in `src` directory and run `npm test` to lint the package. | ||
| 1. Create a distributable package using `npm run build`. | ||
| 1. Execute `npm run` for a listing of available commands. | ||
| **Note:** Build variants possible for various module types via the `format` setting in `rollup.config.js`. I intend to switch to ES6 modules as soon as reasonable [browser support](http://caniuse.com/#search=module) is realized. | ||
| ## Contributing | ||
| Please use Issues sparingly. I favor action over words. Send in a Pull Request if you feel strongly something needs to be changed. Otherwise, please create a fork and mind the licensing terms. | ||
| ## Related Libraries | ||
@@ -186,2 +196,5 @@ | ||
| ## License | ||
| MIT License<br> | ||
| Copyright (c) 2017 Josh Habdas |
@@ -1,2 +0,1 @@ | ||
| import path from 'path' | ||
| import uglify from 'rollup-plugin-uglify' | ||
@@ -12,8 +11,7 @@ import license from 'rollup-plugin-license' | ||
| license({ | ||
| banner: { | ||
| file: path.join(__dirname, 'LICENSE') | ||
| } | ||
| banner: `Copyright (c) <%= moment().format('YYYY') %> Josh Habdas\n@licence MIT` | ||
| }) | ||
| ], | ||
| sourceMap: false, | ||
| dest: 'dist/fetch-inject.js' | ||
| } |
Fixed alerts
No tests
QualityPackage does not have any tests. This is a strong signal of a poorly maintained or low quality package.
Found 1 instance in 1 package
Improved metrics
- Dev dependency count
- decreased by-16.67%
5
- Number of low quality alerts
- decreased by-50%
1
- Number of lines in readme file
- increased by7.14%
195
Worsened metrics
- Total package byte prevSize
- decreased by-3.71%
10605
- Lines of code
- decreased by-27.27%
56
No dependency changes