Dynamically inline assets into the DOM using Fetch Injection.

Improve website performance and UX by fetching external assets and inlining them into the DOM programmatically. Get a Promise in return.

• Wraps the Fetch API
• Zero runtime dependencies
• 398 bytes gzipped

Learn about Fetch Injection and why I created this library on Hack Cabin.

Don't like to read? Here's a playground:
https://codepen.io/jhabdas/pen/MpVeOE?editors=0012

Get it on NPM with npm i fetch-inject or Bower with bower install fetch-inject. Also available via CDN using jsDelivr.

1. Call fetchInject with an array of URLs.
2. Optionally, handle the returned Promise.

Problem: You want to prototype some code using the browser as a REPL.

Solution: Skip the emulators and use the real deal:

fetchInject([
  'https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js'
]).then(() => {
  console.log(`Successfully loaded Lodash ${_.VERSION}`)
})

Problem: PageSpeed Insights dings you for loading blocking CSS and unnecessary styles on initial render.

Solution: Inline your critical path CSS and load non-critical styles asynchronously:

fetchInject([
  '/css/non-critical.css',
  'https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css'
])

Problem: Remote assets can lead to jank or, worse yet, SPOF if not handled correctly.

Solution: Asynchronously load remote scripts without blocking:

fetchInject([
  '/bower_components/jquery/dist/jquery.js',
  '/bower_components/what-input/dist/what-input.js'
])

Problem: You want to load a script in response to a event without optimistically preloading the asset.

Solution: Create an event listener, respond to the event and then destroy the listener.

const el = document.querySelector('details summary')
el.onclick = (evt) => {
  fetchInject([
    'https://cdn.jsdelivr.net/smooth-scroll/10.2.1/smooth-scroll.min.js'
  ])
  el.onclick = null  
}

Problem: You need to perform a synchronous operation immediately after an asynchronous script is loaded.

Solution: You could create a script element and use the async and onload attributes. Or you could...

fetchInject([
  'https://cdn.jsdelivr.net/momentjs/2.17.1/moment.min.js'
]).then(() => {
  console.log(`Finish in less than ${moment().endOf('year').fromNow(true)}`)
})

Problem: You need to asynchronously download multiple related assets of different types.

Solution: Specify multiple URLs of different types when calling:

fetchInject([
  'https://cdn.jsdelivr.net/drop/1.4.2/js/drop.min.js',
  'https://cdn.jsdelivr.net/drop/1.4.2/css/drop-theme-arrows-bounce.min.css'
])

Problem: You have several scripts that depend on one another and you want to load them all asynchronously without causing race conditions.

Solution: Call multiple times, forming a promise chain:

fetchInject([
  'https://cdn.jsdelivr.net/jquery/3.1.1/jquery.slim.min.js',
  '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'
  ])
})

Problem: You want to use library composed of several resources and initialize it as soon as possible.

Solution: This is precisely the kind of activity fetchInject works best at:

const container = document.querySelector('.pswp')
const items = JSON.parse({{ .Params.gallery.main | jsonify }})
fetchInject([
  '/css/photoswipe.css',
  '/css/default-skin/default-skin.css',
  '/js/photoswipe.min.js',
  '/js/photoswipe-ui-default.min.js'
]).then(() => {
  const gallery = new PhotoSwipe(container, PhotoSwipeUI_Default, items)
  gallery.init()
})

Problem: You want to load some dependencies which requires some dependencies, which requires a dependency.

Solution: You could scatter some links into your document head, blocking initial page render and bloat your application bundle. Or...

const tether = ['/js/tether.min.js']
const drop = [
  '/js/drop.min.js',
  '/css/drop-theme-arrows-bounce.min.css'
]
const tooltip = [
  '/js/tooltip.min.js',
  '/css/tooltip-theme-arrows.css'
]
fetchInject(tether)
  .then(() => fetchInject(drop))
  .then(() => fetchInject(tooltip))
  .then(() => {
    new Tooltip({
      target: document.querySelector('h1'),
      content: "You moused over the first <b>H1</b>!",
      classes: 'tooltip-theme-arrows',
      position: 'bottom center'
    })
  })

All browsers with support for Fetch and Promises.

Fetch will become available in Safari in the Safari 10.1 release that ships with macOS Sierra 10.12.4 and Safari on iOS 10.3. Jon Davis,  Web Technologies Evangelist

1. Clone the repo with git clone https://github.com/jhabdas/fetch-inject.
2. Install dev dependencies with npm i (brew install node first on macOS).
3. Execute npm run for a listing of available commands.

Please use Issues for bugs and enhancement requests only. If you need support, you know where to go. Thanks!

• fetch - Polyfill for window.fetch
• promise-polyfill - Polyfill for Promises
• es-module-loader - Polyfill for the ES Module Loader
• isomorphic-fetch - A library for using fetch in Node

MIT License 2017 © Josh Habdas