0.10.3 • Published 9 years ago

es6pack v0.10.3

Weekly downloads
2
License
MIT
Repository
github
Last release
9 years ago

NPM version

Safe and performant ECMAScript 2015 script loading for the browser.

Installation

$ npm install es6pack

Purpose

  • Use ECMAScript 2015 (sans "transpilation") and contemporary browser APIs as progressive enhancement without bothering the little guy.
  • Expose the conditional script resource URLs to the preload scanner.
  • Load the script resources in parallel without blocking page rendering.
  • Execute the loaded script resources in source order.

Declarative 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
      • for script resources, 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 of sorts
  • the bootload script itself succeeds those LINK elements

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.

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/

React example

const es6pack = require('es6pack');

...

<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: es6pack}}
    ></script>
  <link href="mobile-first.css" rel="stylesheet" />
</head>

ECMAScript 2015 feature tests

evaled

  • const declaration
  • let declaration
  • arrow function
  • default parameter
  • template string
  • object destructuring
  • generator function
  • for/of loop
  • yield
  • spread
  • class/extends

Global objects

  • Map
  • Promise
  • Proxy
  • Reflect
  • Set
  • Symbol
  • WeakMap
  • WeakSet

Host objects feature tests

  • MutationObserver
  • WebSocket
  • Worker
  • fetch
  • matchMedia
  • requestAnimationFrame
  • document has the methods
    • getElementsByClassName
    • querySelectorAll
  • HTMLElement instances have a classList object
  • HTMLScriptElement instances have a boolean async IDL attribute
  • SVG can be used in HTML

Example

$ npm run prepublish
$ cd example
$ npm start

License

MIT

browserenhancementes6non-blockingprogressive
@infinitebrahmanuniverse/nolb-es6@everything-registry/sub-chunk-1597
0.10.3

9 years ago

0.10.2

9 years ago

0.10.1

9 years ago

0.10.0

9 years ago

0.9.0

9 years ago

0.8.0

9 years ago

0.7.0

9 years ago

0.6.0

9 years ago

0.5.0

9 years ago

0.4.0

9 years ago

0.3.0

9 years ago

0.2.0

9 years ago

0.1.0

9 years ago