0.10.3 • Published 8 years ago
es6pack v0.10.3
Safe and performant ECMAScript 2015 script loading for the browser.
Installation
$ npm install es6packPurpose
- 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
HEADelement must have anitemscopeattribute - resources are declared with
LINKelements that have- a required
itempropattribute with one of the following valuesstyle-resourcescript-resource
- a required
hrefattribute with the resource URL - an optional
mediaattribute 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
relattribute with a resource hint value of sorts
- a required
- the bootload script itself succeeds those
LINKelements
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
MapPromiseProxyReflectSetSymbolWeakMapWeakSet
Host objects feature tests
MutationObserverWebSocketWorkerfetchmatchMediarequestAnimationFramedocumenthas the methodsgetElementsByClassNamequerySelectorAll
HTMLElementinstances have aclassListobjectHTMLScriptElementinstances have a booleanasyncIDL attribute- SVG can be used in HTML
Example
$ npm run prepublish
$ cd example
$ npm startLicense
MIT