open-index/open-npm huggingface dataset:
npm package: @info.nl/bootload
Description: Conditional script and style resource loading for the browser.
Author: Info.nl
Latest version: 0.1.2

# bootload [![npm version][npm-image]][npm-url] [![code climate][code-climate-image]][code-climate-url]

> Conditional script and style resource loading for the browser.

## Installation

    $ npm install @info.nl/bootload

## Benefits

- conservative *cut the mustard* feature tests
    - [UTSL](http://catb.org/jargon/html/U/UTSL.html)
- expose assets to the preload scanner with declarative syntax
- asynchronous loading, no blocking
- scripts are executed in order of declaration
    - beware that the `DOMContentLoaded` event might have 
      already fired at this point
- progressive enhancement
    - [remember the little guy](https://www.flickr.com/photos/ebednarz/13934016013/)
    - indeed, IE <= 9 **doesn't** cut the mustard
      (cf. [IE <= 8](https://www.flickr.com/photos/ebednarz/13911199966/))
- not YADSL
- specification conforming

## API

- the `HEAD` element must have an `itemscope` attribute
- resources are declared with `LINK` elements that have
    - a required `itemprop` attribute with one of the following values
        - `style-resource`
        - `script-resource`
    - a required `href` attribute with the resource URL
    - an optional `media` attribute with a media query
        - the media query is only evaluated once, 
          when the bootload script is executed; 
          use it with caution and common sense
    - an optional `rel` attribute with a resource hint value
      ([but don't shoot yourself in the foot](https://code.google.com/p/chromium/issues/detail?id=312327))
- the bootload script succeeds those `LINK` elements
  (preferably in the `HEAD` element as well and inline)

## Usage

Since the bootload script should always be included inline,
the module exports the script as a string that can directly 
be used with a template engine.

    var bootload = require('@info.nl/bootload');

Normal style sheets links should be placed **after** this 
inline script because the CSSOM blocks script execution:
[https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/](https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/)

### React example

    import bootload from '@info.nl/bootload';

    <head itemscope>
      [...]
      <link itemprop="style-resource" href="beep.css" />
      <link itemprop="script-resource" href="beep.js" />
      <link itemprop="script-resource" href="boop.js" />
      <script
        dangerouslySetInnerHTML={{__html: bootload}}
        ></script>
      <link href="mobile-first.js" rel="stylesheet" />
    </head>

## License

MIT
    
[npm-image]: https://img.shields.io/npm/v/@info.nl/bootload.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/@info.nl/bootload
[code-climate-image]: https://img.shields.io/codeclimate/github/teamberlin/bootload.svg?style=flat-square
[code-climate-url]: https://codeclimate.com/github/teamberlin/bootload