chop-chop

Chop-Chop

Load styles/scripts synchronously (or asynchronously) via HTML 'preload'.

Harness the power of <link rel="preload"> in Chrome and other modern browsers. This library provides a useful set of utilities that can be used to preload styles and scripts, then load them in order, or just load them straight away — synchronously or asynchronously. To learn more, see: Preload: What Is It Good For? & Chop-Chop Docs.

Installation Options

Install via package

$ npm install chop-chop --save;

Or install via Yarn package

$ yarn add chop-chop;

Or install via unpkg.com CDN

<script src="https://unpkg.com/chop-chop@0.0.8" integrity="sha384-nihFIupLpAen2KgO9BtVN6LcFYEJ0FwRmh9waYwopvof5L0CX6rzF3ikQZSbdcp9" crossorigin="anonymous"></script>

Works in All Modern Browsers

If you need to support IE <= 11 (prior to Edge), older versions of Android, and much older versions of other browsers, you can insert this polyfill before all other script tags. The polyfill.io service fills ES6 features that a user's browser is lacking, based on both UA & feature detection.

<!-- Before ALL other script tags in your document. -->
<!-- Only needed if you want to support much older browsers. -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6&amp;flags=gated"></script>

Quick Example

<script>
  chopChop.preloadThenLoad([
    'https://example.com/styles-a.css',
    'https://example.com/scripts-a.js',

    'https://example.com/styles-b.css',
    'https://example.com/scripts-b.js',

    'https://example.com/styles-c.css',
    'https://example.com/scripts-c.js',
  ])
    .then(function(urls) {
      console.log('Resources loaded in the order given: %o', urls);
    });
</script>

More Examples / Documentation

• See: Chop-Chop Docs

Commercial Use

This software is created, documented and maintained by Jason Caldwell (@jaswrks) and a small team of talented developers at ‹src.works/›. It's open source, but if you use it commercially, please pay what you can.

Development Channels

Always use the latest stable version in production. If you want upcoming changes ahead of time use the @dev or @rc tag, but please do so at your own risk. The @dev and @rc tags are potentially unstable at various times throughout a development cycle, and therefore should not be used in production.

Channel	NPM Tag	Description	SemVer	GitHub
Hackers	@dev	Latest Bleeding Edge potentially-unstable		master (PRs)
Lab Rats	@rc	Next Release Candidate upcoming semi-stable release		releases
Everyone	@latest	Latest Stable Version highly recommended		releases

NPM Consumption Examples

Channel	NPM Tag	NPM package.json
Hackers	@dev	"chop-chop": "dev"
Lab Rats	@rc	"chop-chop": "rc"
Everyone	@latest	"chop-chop": "latest"
Latest Stable Version	"chop-chop": "^0.0.8"

Channel	NPM Tag	NPM Install
Hackers	@dev	npm install chop-chop@dev
Lab Rats	@rc	npm install chop-chop@rc
Everyone	@latest	npm install chop-chop@latest
Latest Stable Version	npm install chop-chop

CDN Directory Indexes

Channel	NPM Tag	CDN Distribution Index
Hackers	@dev	https://unpkg.com/chop-chop@dev/dist/
Lab Rats	@rc	https://unpkg.com/chop-chop@rc/dist/
Everyone	@latest	https://unpkg.com/chop-chop@latest/dist/
Latest Stable Version	https://unpkg.com/chop-chop@0.0.8/dist/

CDN Script URLs

Channel	NPM Tag	CDN Script URL
Hackers	@dev	https://unpkg.com/chop-chop@dev
Lab Rats	@rc	https://unpkg.com/chop-chop@rc
Everyone	@latest	https://unpkg.com/chop-chop@latest
Latest Stable Version	https://unpkg.com/chop-chop@0.0.8

In production, use the latest stable version with an SRI integrity hash.

<script src="https://unpkg.com/chop-chop@0.0.8" integrity="sha384-nihFIupLpAen2KgO9BtVN6LcFYEJ0FwRmh9waYwopvof5L0CX6rzF3ikQZSbdcp9" crossorigin="anonymous"></script>

Tip: Don't use an SRI hash with a tag like @dev, @rc, or @latest. Tags reference a version dynamically; e.g., the @latest tag will point to an updated copy once the next version is released — rendering the SRI invalid. Instead, use a specific @x.x.x version in the URL.

MIT License

For full details see: LICENSE.txt

Changelog

For full details see: CHANGELOG.md

Semantic Versioning

New versions are released following semver.org guidelines.

Pull Requests Welcome

the master branch at GitHub and submit your changes for review.