├── .gitignore
├── .groc.json
├── .jshintrc
├── README.md
├── demo
    ├── custom-elements-old
    │   ├── index.html
    │   ├── squid.js
    │   └── squidbits.html
    ├── custom-elements
    │   ├── index.html
    │   ├── squid-es5-combined.html
    │   ├── squid-es5-split.js
    │   ├── squid-es6-combined.html
    │   ├── squid-es6-split.js
    │   └── squidbits.html
    ├── index.html
    └── scoped-script
    │   ├── awesomesauce.js
    │   ├── index.html
    │   └── swoot.html
├── dist
    ├── html-exports.debug.js
    ├── html-exports.js
    ├── html-exports.min.js
    └── sysjs-plugin
    │   ├── html.debug.js
    │   ├── html.js
    │   └── html.min.js
├── gulpfile.js
├── package.json
├── src
    ├── documentloader.js
    ├── loaderhooks.js
    ├── scopedscript.js
    ├── sysjs-plugin.js
    ├── system.js
    └── util.js
└── test
    ├── fixtures
        ├── foo.js
        ├── nameddefault.html
        ├── resources.html
        ├── resources
        │   ├── import.html
        │   ├── script.js
        │   ├── style-import-nested.css
        │   ├── style-import.css
        │   └── style-link.css
        ├── scoped.html
        ├── scopedexport.html
        ├── simpledefault.html
        └── words.html
    ├── index.html
    ├── shared
        └── fixtures.js
    └── unit
        ├── exports.html
        ├── resources.html
        ├── scopedscript.html
        ├── systemjs.html
        └── systemjs
            └── thing.html


/.gitignore:
--------------------------------------------------------------------------------
1 | /doc/
2 | /node_modules/
3 | .DS_Store
4 | 


--------------------------------------------------------------------------------
/.groc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "glob": ["README.md", "src/**/*.js"],
3 |   "github": false,
4 |   "repository-url": "https://github.com/nevir/html-exports"
5 | }
6 | 


--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "camelcase": true,
 3 |   "eqeqeq":    true,
 4 |   "forin":     true,
 5 |   "indent":    2,
 6 |   "newcap":    true,
 7 |   "noarg":     true,
 8 |   "nonbsp":    true,
 9 |   "quotmark":  "single",
10 |   "undef":     true,
11 |   "unused":    true,
12 |   "asi":       true,
13 |   "boss":      true,
14 |   "esnext":    true,
15 |   "browser":   true,
16 |   "node":      true
17 | }
18 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # HTML Exports
  2 | 
  3 | Why let JavaScript have all the fun? HTML documents can be modules too!
  4 | 
  5 | 
  6 | ## The Syntax
  7 | 
  8 | ### Declaring Exports
  9 | 
 10 | Just like ES6 modules, you can choose particular values to export from a HTML document. Simply place an `export` attribute on any element with that you wish to export:
 11 | 
 12 | ```html
 13 | <div export id="user">...</div>
 14 | ```
 15 | 
 16 | You can also declare the default export of the document by tagging an element with `default` (`id` is optional).
 17 | 
 18 | ```html
 19 | <section export default id="post">...</section>
 20 | ```
 21 | 
 22 | If you don't declare a default export, the document is exported.
 23 | 
 24 | 
 25 | ### Declaring Dependencies
 26 | 
 27 | You can also declare dependencies on other modules from HTML.
 28 | 
 29 | ```html
 30 | <import src="Polymer"/>
 31 | ```
 32 | 
 33 | Similar to ES6's `import` syntax, you can import particular values from the module, too. A default export can be imported via:
 34 | 
 35 | ```html
 36 | <import src="jQuery" as="$"/>
 37 | ```
 38 | 
 39 | Named exports can also be imported via the `values` attribute:
 40 | 
 41 | ```html
 42 | <import src="ng/di/annotations" value="Inject"/>
 43 | ```
 44 | 
 45 | _Not supported yet: Some way of aliasing named imports. The technical side is straightforward, but a decent syntax is unclear. Suggestions welcome!_
 46 | 
 47 | 
 48 | ### Using Imported Values
 49 | 
 50 | We also introduce the concept of "scoped" `<script>` elements, that is a close analogue to [the `<module>` element](https://github.com/ModuleLoader/es6-module-loader#module-tag), but for ES5. It gives you the following:
 51 | 
 52 | * Any values imported by the document are made available to a scoped script.
 53 | * Scoped scripts run in strict mode.
 54 | * Scoped scripts execute asynchronously (i.e. once all modules have loaded).
 55 | * Scoped scripts can export values via CommonJS-style `exports`.
 56 | 
 57 | For example:
 58 | 
 59 | ```html
 60 | <import src="jQuery" as="$"/>
 61 | <script type="scoped">
 62 | $(function() {
 63 |   // doing things!
 64 | })
 65 | </script>
 66 | ```
 67 | 
 68 | That example is equivalent to the ES6 form:
 69 | 
 70 | ```html
 71 | <module>
 72 | import $ from 'jQuery'
 73 | $(() => {
 74 |   // doing things!
 75 | })
 76 | </module>
 77 | ```
 78 | 
 79 | #### Exporting Values From Script
 80 | 
 81 | As mentioned above, you can export values from a scoped script! These values are exported as part of the HTML module. You can even mix and match:
 82 | 
 83 | ```html
 84 | <template export id="tentacle">...</template>
 85 | <script type="scoped">
 86 | exports.default = function Squid() {
 87 |   // Oh hay there, I'm a squid!
 88 | }
 89 | </script>
 90 | ```
 91 | 
 92 | 
 93 | ### Importing HTML Modules Via ES6 
 94 | 
 95 | Just treat a HTML module as you would any other module:
 96 | 
 97 | ```
 98 | import { user, post } from './templates.html'
 99 | ```
100 | 
101 | `user` and `post` are the _elements_ exported by `templates.html`!
102 | 
103 | 
104 | ## Using It
105 | 
106 | Include [`html-exports.min.js`](dist/) (~0.8KB gzipped) in your page, after loading [es6-module-loader](https://github.com/ModuleLoader/es6-module-loader) and [SystemJS](https://github.com/systemjs/systemjs).
107 | 
108 | ```html
109 | <script src="es6-module-loader.js"></script>
110 | <script src="system.js"></script>
111 | <script src="html-exports.min.js"></script>
112 | ```
113 | 
114 | This gives you the default behavior where any module with a `.html` extension is treated as a HTML module. SystemJS is only necessary if you are loading ES5 code (e.g. CommonJS or AMD modules).
115 | 
116 | 
117 | ### Compatibility
118 | 
119 | This library currently supports IE9+ and evergreen browsers.
120 | 
121 | For browsers that do not support HTML imports (i.e. everything but Chrome), you will need to [polyfill it](https://github.com/webcomponents/webcomponentsjs):
122 | 
123 | ```html
124 | <script src="HTMLImports.min.js"></script>
125 | <script src="html-exports.min.js"></script>
126 | ```
127 | 
128 | 
129 | ### SystemJS
130 | 
131 | Alternatively, you can use the SystemJS plugin by grabbing [a build](dist/sysjs-plugin) of it, renaming your build to `html.js` and placing that build somewhere on your load path for SystemJS to discover.
132 | 
133 | You can then load HTML modules via:
134 | 
135 | ```js
136 | // Implicit plugin name
137 | import { user, post } from './templates.html!'
138 | // Or explicit plugin name:
139 | import { user, post } from './templates.html!html'
140 | ```
141 | 
142 | 
143 | ## Playing With It
144 | 
145 | Try out the demo:
146 | 
147 | ```sh
148 | gulp demo
149 | ```
150 | 
151 | 
152 | ## Hacking On It
153 | 
154 | Run this in the background for continuous testing/building:
155 | 
156 | ```sh
157 | gulp
158 | ```
159 | 
160 | 
161 | ## Understanding It
162 | 
163 | For a deeper understanding of how HTML Exports works, take a look at [the annotated source](https://nevir.github.io/html-exports).
164 | 


--------------------------------------------------------------------------------
/demo/custom-elements-old/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 6 |   <title>HTML Exports!</title>
 7 | 
 8 |   <!-- The polyfill, and dependencies. -->
 9 |   <script src="../../node_modules/traceur/bin/traceur.js"></script>
10 |   <script src="../../node_modules/es6-module-loader/dist/es6-module-loader.js"></script>
11 |   <script src="../../dist/html-exports.min.js"></script>
12 | 
13 |   <style>
14 |     x-squid {
15 |       margin: 1em;
16 |     }
17 |   </style>
18 | 
19 |   <script type="module">
20 |     import { Squid } from './squid'
21 |     document.registerElement('x-squid', Squid)
22 |   </script>
23 | 
24 |   <script>
25 |     System.import('./squidbits.html').then(function(exports) {
26 |       var squidbits = document.getElementById('squidbits')
27 |       squidbits.textContent = './squidbits.html exports: ' + Object.keys(exports).join(', ')
28 |     })
29 |   </script>
30 | </head>
31 | <body>
32 |   <h1>HTML Exports Custom Element Demo</h1>
33 |   <div id="squidbits"></div>
34 | 
35 |   <x-squid></x-squid>
36 | </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/demo/custom-elements-old/squid.js:
--------------------------------------------------------------------------------
 1 | import { tentacle, ink } from './squidbits.html'
 2 | 
 3 | export class Squid extends HTMLElement {
 4 |   attachedCallback() {
 5 |     this.name         = this.tagName.toLowerCase()
 6 |     this.numTentacles = parseInt(this.getAttribute('tentacles') || 2)
 7 |     console.debug(this.name, '#attachedCallback')
 8 | 
 9 |     var root = this.createShadowRoot()
10 | 
11 |     var mantle = this.ownerDocument.createElement('div')
12 |     mantle.textContent = '<' + this.name + '>'
13 |     root.appendChild(mantle)
14 | 
15 |     root.appendChild(this.ownerDocument.importNode(ink.content, true))
16 |     for (var i = 0; i < this.numTentacles; i++) {
17 |       root.appendChild(this.ownerDocument.importNode(tentacle.content, true))
18 |     }
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/demo/custom-elements-old/squidbits.html:
--------------------------------------------------------------------------------
1 | <template export id="tentacle">
2 |   <svg width="200px" height="200px">
3 |     <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
4 |   </svg>
5 | </template>
6 | 
7 | <template export id="ink">✗</template>
8 | 


--------------------------------------------------------------------------------
/demo/custom-elements/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 6 |   <title>HTML Exports!</title>
 7 | 
 8 |   <!-- The polyfill, and dependencies. -->
 9 |   <script src="../../node_modules/traceur/bin/traceur.js"></script>
10 |   <script src="../../node_modules/es6-module-loader/dist/es6-module-loader.src.js"></script>
11 |   <script src="../../node_modules/systemjs/dist/system.src.js"></script>
12 |   <script src="../../dist/html-exports.debug.js"></script>
13 | 
14 |   <style>
15 |     squid-es5-combined, squid-es5-split, squid-es6-combined, squid-es6-split {
16 |       display: block;
17 |       border:  1px solid #ccc;
18 |       padding: .5em;
19 |     }
20 |   </style>
21 | 
22 |   <script type="module">
23 |     // This appears to be a System.js bug. Even though squid-es5-split depends
24 |     // on squidbits.html, System.js loads it *after* executing squid-es5-split.
25 |     import './squidbits.html'
26 | 
27 |     import SquidES5Combined from './squid-es5-combined.html'
28 |     import SquidES5Split    from './squid-es5-split'
29 |     import SquidES6Combined from './squid-es6-combined.html'
30 |     import SquidES6Split    from './squid-es6-split'
31 | 
32 |     document.registerElement('squid-es5-combined', SquidES5Combined)
33 |     document.registerElement('squid-es5-split',    SquidES5Split)
34 |     document.registerElement('squid-es6-combined', SquidES6Combined)
35 |     document.registerElement('squid-es6-split',    SquidES6Split)
36 |   </script>
37 | </head>
38 | <body>
39 |   <h1>HTML Exports Custom Element Demo</h1>
40 | 
41 |   <p>
42 |     HTML exports gives us a ton of flexibility around how modules are organized.
43 |     This demo serves as an example of organizational methods, by focusing on a
44 |     custom element.
45 |   </p>
46 |   <p>
47 |     Each example exports a prototype for the element, which we register directly
48 |     via this document.
49 |   </p>
50 | 
51 |   <h2>&lt;squid-es5-combined&gt;</h2>
52 |   <p>
53 |     Both the element prototype and its templates are declared in the same file
54 |     (squid-es5-combined.html), with an ES5 element definition.
55 |   </p>
56 |   <squid-es5-combined></squid-es5-combined>
57 | 
58 |   <h2>&lt;squid-es5-split&gt;</h2>
59 |   <p>
60 |     Another option is to structure your code as an ES5 module that imports its
61 |     templates separately. See squid-es5-split.js for a CommonJS approach.
62 |   </p>
63 |   <squid-es5-split></squid-es5-split>
64 | 
65 |   <h2>&lt;squid-es6-combined&gt;</h2>
66 |   <p>
67 |     Both the element prototype and its templates are declared in the same file
68 |     (squid-es6-combined.html), with an ES6 element definition.
69 |   </p>
70 |   <squid-es6-combined></squid-es6-combined>
71 | 
72 |   <h2>&lt;squid-es6-split&gt;</h2>
73 |   <p>
74 |     A third option is to declare your element as an ES6 module and class that
75 |     imports its templates separately. See squid-es6-split.js for this approach.
76 |   </p>
77 |   <squid-es6-split></squid-es6-split>
78 | 
79 | </body>
80 | </html>
81 | 


--------------------------------------------------------------------------------
/demo/custom-elements/squid-es5-combined.html:
--------------------------------------------------------------------------------
 1 | <!-- Example mixed-mode HTML module. -->
 2 | 
 3 | <!-- We export elements (in case someone wants to consume just the templates) -->
 4 | <template export id="ink">✗</template>
 5 | <template export id="tentacle">
 6 |   <svg width="200px" height="200px">
 7 |     <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
 8 |   </svg>
 9 | </template>
10 | 
11 | <!-- And we also export JS values via a scoped script -->
12 | <script type="scoped">
13 |   exports.default = Squid
14 | 
15 |   function Squid() {}
16 |   Squid.prototype = Object.create(HTMLElement.prototype)
17 | 
18 |   Squid.prototype.attachedCallback = function attachedCallback() {
19 |     this.name = this.tagName.toLowerCase()
20 |     console.debug(this.name, '#attachedCallback')
21 | 
22 |     var root = this.createShadowRoot()
23 |     // Note that `ink` and `tentacle` are made available to the scoped script
24 |     // because they were exported (as a convenience).
25 |     root.appendChild(this.ownerDocument.importNode(ink.content, true))
26 |     for (var i = 0; i < 2; i++) {
27 |       root.appendChild(this.ownerDocument.importNode(tentacle.content, true))
28 |     }
29 |   }
30 | </script>
31 | 


--------------------------------------------------------------------------------
/demo/custom-elements/squid-es5-split.js:
--------------------------------------------------------------------------------
 1 | var squidbits = require('./squidbits.html')
 2 | 
 3 | module.exports = Squid
 4 | 
 5 | function Squid() {}
 6 | Squid.prototype = Object.create(HTMLElement.prototype)
 7 | 
 8 | Squid.prototype.attachedCallback = function attachedCallback() {
 9 |   this.name = this.tagName.toLowerCase()
10 |   console.debug(this.name, '#attachedCallback')
11 | 
12 |   var root = this.createShadowRoot()
13 |   // Note that `ink` and `tentacle` are made available to the scoped script
14 |   // because they were exported (as a convenience).
15 |   root.appendChild(this.ownerDocument.importNode(squidbits.ink.content, true))
16 |   for (var i = 0; i < 2; i++) {
17 |     root.appendChild(this.ownerDocument.importNode(squidbits.tentacle.content, true))
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/demo/custom-elements/squid-es6-combined.html:
--------------------------------------------------------------------------------
 1 | <!-- Example mixed-mode HTML module. -->
 2 | 
 3 | <!-- We export elements (in case someone wants to consume just the templates) -->
 4 | <template export id="ink">✗</template>
 5 | <template export id="tentacle">
 6 |   <svg width="200px" height="200px">
 7 |     <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
 8 |   </svg>
 9 | </template>
10 | 
11 | <!-- And we also export JS values via a scoped script -->
12 | <script type="module">
13 |   export default class Squid extends HTMLElement {
14 |     attachedCallback() {
15 |       this.name = this.tagName.toLowerCase()
16 |       console.debug(this.name, '#attachedCallback')
17 | 
18 |       var root = this.createShadowRoot()
19 |       // Note that `ink` and `tentacle` are made available to the scoped script
20 |       // because they were exported (as a convenience).
21 |       root.appendChild(this.ownerDocument.importNode(ink.content, true))
22 |       for (var i = 0; i < 2; i++) {
23 |         root.appendChild(this.ownerDocument.importNode(tentacle.content, true))
24 |       }
25 |     }
26 |   }
27 | </script>
28 | 


--------------------------------------------------------------------------------
/demo/custom-elements/squid-es6-split.js:
--------------------------------------------------------------------------------
 1 | import { tentacle, ink } from './squidbits.html'
 2 | 
 3 | export default class Squid extends HTMLElement {
 4 |   attachedCallback() {
 5 |     this.name = this.tagName.toLowerCase()
 6 |     console.debug(this.name, '#attachedCallback')
 7 | 
 8 |     var root = this.createShadowRoot()
 9 |     // Note that `ink` and `tentacle` are made available to the scoped script
10 |     // because they were exported (as a convenience).
11 |     root.appendChild(this.ownerDocument.importNode(ink.content, true))
12 |     for (var i = 0; i < 2; i++) {
13 |       root.appendChild(this.ownerDocument.importNode(tentacle.content, true))
14 |     }
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/demo/custom-elements/squidbits.html:
--------------------------------------------------------------------------------
1 | <template export id="tentacle">
2 |   <svg width="200px" height="200px">
3 |     <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
4 |   </svg>
5 | </template>
6 | 
7 | <template export id="ink">✗</template>
8 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 6 |   <title>HTML Exports!</title>
 7 | </head>
 8 | <body>
 9 |   <h1>HTML Exports Demos</h1>
10 |   <ul>
11 |     <li><a href="custom-elements">Custom Elements</a></li>
12 |     <li><a href="scoped-script">Scoped Scripts</a></li>
13 |   </ul>
14 | </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/demo/scoped-script/awesomesauce.js:
--------------------------------------------------------------------------------
1 | export default () => {
2 |   alert('Awesomesauce!')
3 | }
4 | 


--------------------------------------------------------------------------------
/demo/scoped-script/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 6 |   <title>HTML Exports!</title>
 7 | 
 8 |   <!-- The polyfill, and dependencies. -->
 9 |   <script src="../../node_modules/traceur/bin/traceur.js"></script>
10 |   <script src="../../node_modules/es6-module-loader/dist/es6-module-loader.js"></script>
11 |   <script src="../../node_modules/systemjs/dist/system.js"></script>
12 |   <script src="../../dist/html-exports.debug.js"></script>
13 | 
14 |   <!-- Declared dependencies in HTML! -->
15 |   <import src="./awesomesauce" as="doAwesomeThings">
16 | 
17 |   <!-- Using values from those dependencies! -->
18 |   <script type="scoped">
19 |     var button = document.createElement('button')
20 |     button.textContent = 'Awesome from <script type="scoped">'
21 |     button.addEventListener('click', doAwesomeThings)
22 |     document.body.appendChild(button)
23 |   </script>
24 | 
25 |   <script type="module">
26 |     // Values exported by scoped scripts in a HTML module are also exported!
27 |     import { sweet, woot } from './swoot.html'
28 | 
29 |     var button = document.createElement('button')
30 |     button.textContent = 'Indirectly awesome!'
31 |     button.addEventListener('click', woot.bind(null, sweet))
32 |     document.body.appendChild(button)
33 |   </script>
34 | </head>
35 | <body>
36 |   <h1>HTML Exports Scoped Scripts Demo</h1>
37 | </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/demo/scoped-script/swoot.html:
--------------------------------------------------------------------------------
1 | <script type="scoped">
2 | console.log('in scoped script', exports, arguments)
3 | exports.sweet = 'Sweet!'
4 | exports.woot  = alert
5 | </script>
6 | 


--------------------------------------------------------------------------------
/dist/html-exports.debug.js:
--------------------------------------------------------------------------------
  1 | // # Internal Helpers
  2 | 
  3 | ;(function(scope) {
  4 |   'use strict'
  5 | 
  6 |   var _util = {}
  7 |   scope._util = _util
  8 | 
  9 |   // ## `flattenValueTuples`
 10 | 
 11 |   // After collecting value tuples ([key, value, source]), we can flatten them
 12 |   // into an value map, and also warn about any masked values.
 13 |   scope._util.flattenValueTuples = function flattenValueTuples(valueTuples, ignore) {
 14 |     var valueMap = {}
 15 |     var masked   = []
 16 |     for (var i = 0, tuple; tuple = valueTuples[i]; i++) {
 17 |       var key = tuple[0]
 18 |       if (key in valueMap && (!ignore || ignore.indexOf(key) === -1)) {
 19 |         masked.push(key)
 20 |       }
 21 |       valueMap[key] = tuple[1]
 22 |     }
 23 | 
 24 |     if (masked.length) {
 25 |       masked.forEach(_warnMaskedValues.bind(null, valueTuples))
 26 |     }
 27 | 
 28 |     return valueMap
 29 |   }
 30 | 
 31 |   // It's important that we give authors as much info as possible to diagnose
 32 |   // any problems with their source. So, we spend a bit of computational effort
 33 |   // whenever values are masked (imports, exports, etc).
 34 |   function _warnMaskedValues(valueTuples, key) {
 35 |     var conflicting = valueTuples.filter(function(tuple) {
 36 |       return tuple[0] === key
 37 |     }).map(function(tuple) {
 38 |       return tuple[2]
 39 |     })
 40 |     console.warn.apply(console,
 41 |       ['Multiple values named "' + key + '" were evaluated:'].concat(conflicting)
 42 |     )
 43 |   }
 44 | 
 45 | })(this.HTMLExports = this.HTMLExports || {})
 46 | 
 47 | // # LoaderHooks
 48 | 
 49 | // `HTMLExports.LoaderHooks` is a mixable map of loader hooks that provide the
 50 | // underlying behavior for loading HTML documents as modules.
 51 | //
 52 | // These hooks are designed to be consumed via various interfaces:
 53 | //
 54 | //  * They are indirectly mixed into [`DocumentLoader`](documentloader.html).
 55 | //
 56 | //  * They can be mixed into any existing loader via [`DocumentLoader.mixin`](documentloader.html#-documentloader-mixin-).
 57 | //
 58 | //  * They can be used via a [SystemJS plugin](sysjs-plugin.html).
 59 | //
 60 | ;(function(scope) {
 61 |   'use strict'
 62 | 
 63 |   var LoaderHooks = {}
 64 |   scope.LoaderHooks = LoaderHooks
 65 | 
 66 |   // ## `LoaderHooks.fetch`
 67 | 
 68 |   // Documents are fetched via a dynamic HTML import. This ensures that the
 69 |   // document's linked resources (stylesheets, scripts, etc) are also properly
 70 |   // loaded.
 71 |   //
 72 |   // The alternative would be for us to fetch document source and construct/load
 73 |   // HTML documents ourselves. This becomes rather complex, and would end up
 74 |   // duplicating much of the logic expressed by the HTML Imports polyfill.
 75 |   LoaderHooks.fetch = function fetchHTML(load) {
 76 |     console.debug('HTMLExports.LoaderHooks.fetch(', load, ')')
 77 | 
 78 |     return new Promise(function(resolve, reject) {
 79 |       var link = _newDynamicImport(load.address)
 80 | 
 81 |       link.addEventListener('error', function() {
 82 |         reject(new Error('Unknown failure when fetching URL: ' + load.address))
 83 |       })
 84 | 
 85 |       link.addEventListener('load', function() {
 86 |         // One problem with the module loader spec is that the `instantiate`
 87 |         // step does not support asynchronous execution. We want that, so that
 88 |         // we can ensure that any async-executed scripts in the document defer
 89 |         // its load (also so we can extract exports from them).
 90 |         //
 91 |         // Thus, we perform any async logic during load to emulate that (if
 92 |         // scoped scripts are enabled).
 93 |         var runScripts = scope.runScopedScripts && scope.runScopedScripts(link.import) || Promise.resolve()
 94 |         runScripts.then(function() {
 95 |           // Another difficulty of the module loader spec is that it rightfully
 96 |           // assumes that all sources are a `String`. Because we completely skip
 97 |           // over raw source, we need to be a little more crafty by placing the
 98 |           // real source in a side channel.
 99 |           load.metadata.importedHTMLDocument = link.import
100 |           // And then, to appease the spec/SystemJS, we provide a dummy value for
101 |           // `source`.
102 |           resolve('')
103 |         })
104 |       })
105 |     })
106 |   }
107 | 
108 |   // ## `LoaderHooks.instantiate`
109 | 
110 |   // Once we have a document fetched via HTML imports, we can extract the
111 |   // its dependencies and exported values.
112 |   //
113 |   // However, it is worth noting that we gain the same document semantics as
114 |   // HTML imports: stylesheets are merged into the root document, scripts
115 |   // evaluate globally, etc. Good for simplifying code, not great for scoping.
116 |   //
117 |   // Furthermore, imports are not considered loaded until all of their linked
118 |   // dependencies (stylesheets, scripts, etc) have also loaded. This makes
119 |   // prefetching declared module dependencies difficult/impossible.
120 |   LoaderHooks.instantiate = function instantiateHTML(load) {
121 |     console.debug('HTMLExports.LoaderHooks.instantiate(', load, ')')
122 |     var doc = load.metadata.importedHTMLDocument
123 |     if (!doc) {
124 |       throw new Error('HTMLExports bug: Expected fetched Document in metadata')
125 |     }
126 | 
127 |     return {
128 |       deps: scope.depsFor(doc).map(function(d) { return d.name }),
129 |       execute: function executeHTML() {
130 |         return this.newModule(scope.exportsFor(doc))
131 |       }.bind(this),
132 |     }
133 |   }
134 | 
135 |   // ## Document Processing
136 | 
137 |   // ### `HTMLExports.depsFor`
138 | 
139 |   // HTML modules can declare dependencies on any other modules via the `import`
140 |   // element:
141 |   //
142 |   // ```html
143 |   // <import src="some-module">
144 |   // ```
145 |   scope.depsFor = function depsFor(document) {
146 |     var declaredDependencies = document.querySelectorAll('import[src]')
147 |     return Array.prototype.map.call(declaredDependencies, function(importNode) {
148 |       // Much like ES6's import syntax, you can also choose which exported
149 |       // values to bring into scope, and rename them.
150 |       var aliases = {}
151 |       // The default export can be imported via the `as` attribute:
152 |       //
153 |       // ```html
154 |       // <import src="jQuery" as="$">
155 |       // ```
156 |       if (importNode.hasAttribute('as')) {
157 |         aliases.default = importNode.getAttribute('as')
158 |       }
159 |       // Named exports can be imported via the `values` attribute (space
160 |       // separated).
161 |       //
162 |       // ```html
163 |       // <import src="lodash" values="compact">
164 |       // ```
165 |       if (importNode.hasAttribute('values')) {
166 |         importNode.getAttribute('values').split(/\s+/).forEach(function(key) {
167 |           if (key === '') return
168 |           aliases[key] = key
169 |         })
170 |       }
171 | 
172 |       // Each dependency returned is an object with:
173 |       return {
174 |         // * `name`: The declared name; you may want to `normalize` it.
175 |         name: importNode.getAttribute('src'),
176 |         // * `aliases`: A map of exported values to the keys they should be
177 |         //              exposed as.
178 |         aliases: aliases,
179 |         // * `source`: Source element, to aid in debugging. Expect a beating if
180 |         //             you leak this!
181 |         source: importNode,
182 |       }
183 |     })
184 |   }
185 | 
186 |   // ### `HTMLExports.exportsFor`
187 | 
188 |   // HTML modules can export elements that are tagged with `export`.
189 |   scope._exportTuplesFor = function _exportTuplesFor(document) {
190 |     //- We collect [key, value, source] and then flatten at the end.
191 |     var valueTuples = []
192 |     // They can either be named elements (via `id`), such as:
193 |     //
194 |     // ```html
195 |     // <div export id="foo">...</div>
196 |     // ```
197 |     var exportedNodes = document.querySelectorAll('[export][id]')
198 |     for (var i = 0, node; node = exportedNodes[i]; i++) {
199 |       valueTuples.push([node.getAttribute('id'), node, node])
200 |     }
201 | 
202 |     // Or they can be the default export when tagged with `default`:
203 |     //
204 |     // ```html
205 |     // <div export default>...</div>
206 |     // ```
207 |     var defaultNodes = document.querySelectorAll('[export][default]')
208 |     if (defaultNodes.length > 1) {
209 |       throw new Error('Only one default export is allowed per document')
210 |     } else if (defaultNodes.length === 1) {
211 |       valueTuples.push(['default', defaultNodes[0], defaultNodes[0]])
212 |     // Otherwise, the default export will be the document.
213 |     } else {
214 |       valueTuples.push(['default', document, document])
215 |     }
216 | 
217 |     // Furthermore, values exported by `<script type="scoped">` blocks are also
218 |     // exported via the document. This depends on `HTMLExports.runScopedScripts`
219 |     // having been run already.
220 |     var scopedScripts = document.querySelectorAll('script[type="scoped"]')
221 |     for (i = 0; node = scopedScripts[i]; i++) {
222 |       if (!node.exports) continue;
223 |       var keys = Object.keys(node.exports)
224 |       for (var j = 0, key; key = keys[j]; j++) {
225 |         valueTuples.push([key, node.exports[key], node])
226 |       }
227 |     }
228 | 
229 |     return valueTuples
230 |   }
231 | 
232 |   scope.exportsFor = function exportsFor(document) {
233 |     return scope._util.flattenValueTuples(scope._exportTuplesFor(document), ['default'])
234 |   }
235 | 
236 |   // ## Internal Implementation
237 | 
238 |   function _newDynamicImport(address) {
239 |     var link = document.createElement('link')
240 |     link.setAttribute('rel', 'import')
241 |     link.setAttribute('href', address)
242 |     link.setAttribute('module', '')  // Annotate the link for debugability.
243 | 
244 |     document.head.appendChild(link)
245 | 
246 |     return link
247 |   }
248 | 
249 | })(this.HTMLExports = this.HTMLExports || {})
250 | 
251 | // # DocumentLoader
252 | 
253 | ;(function(scope) {
254 |   'use strict'
255 | 
256 |   scope.DocumentLoader = DocumentLoader
257 | 
258 |   // `HTMLExports.DocumentLoader` is a module loader that loads any modules with
259 |   // a `.html` extension as a HTML module. See [`HTMLExports.LoaderHooks`](loaderhooks.html)
260 |   // for the underlying behavior.
261 |   function DocumentLoader(options) {
262 |     Reflect.Loader.call(this, options || {})
263 |   }
264 |   DocumentLoader.prototype = Object.create(Reflect.Loader.prototype)
265 | 
266 |   // ### `DocumentLoader.mixin`
267 | 
268 |   // Rather than instantiating and managing a `DocumentLoader` directly, you
269 |   // will frequently want to mix `DocumentLoader`'s behavior into an existing
270 |   // loader.
271 |   //
272 |   // For example, to override the default system loader:
273 |   //
274 |   // ```js
275 |   // HTMLExports.DocumentLoader.mixin(System)
276 |   // ```
277 |   //
278 |   DocumentLoader.mixin = function mixin(loader) {
279 |     console.debug('DocumentLoader.mixin(', loader, ')')
280 | 
281 |     Object.keys(scope.LoaderHooks).forEach(function(hookName) {
282 |       console.assert(hookName !== 'normalize', 'only supports hooks that accept a load record')
283 | 
284 |       var htmlHook   = scope.LoaderHooks[hookName]
285 |       var parentHook = loader[hookName]
286 |       loader[hookName] = function(load) {
287 |         return (_isHtml(load) ? htmlHook : parentHook).apply(this, arguments)
288 |       }
289 |     })
290 | 
291 |     // If the author is using es6-module-loader or SystemJS, an entry is added
292 |     // to their `paths` property so that `.html` addresses are not resolved as
293 |     // `.html.js`.
294 |     if (loader.paths) {
295 |       loader.paths['*.html'] = '*.html'
296 |     }
297 |   }
298 | 
299 |   DocumentLoader.mixin(DocumentLoader.prototype)
300 | 
301 |   // ## Internal Implementation
302 | 
303 |   // Any module with an extension of `.html` is assumed to represent a HTML
304 |   // document.
305 |   //
306 |   // We cannot perform any smarter heuristics (such as checking content type),
307 |   // as this check is performed before the `fetch` step completes.
308 |   function _isHtml(load) {
309 |     var path = load.address || load.name
310 |     return path && path.slice(-5) === '.html'
311 |   }
312 | 
313 | })(this.HTMLExports = this.HTMLExports || {})
314 | 
315 | // # Scoped Scripts
316 | 
317 | ;(function(scope) {
318 |   'use strict'
319 | 
320 |   // ### `HTMLExports.runScopedScripts`
321 | 
322 |   // Processes any scoped scripts, and executes them after all declared imports
323 |   // within a document have loaded.
324 |   scope.runScopedScripts = function runScopedScripts(document) {
325 |     return new Promise(function(resolve, reject) {
326 |       var deps     = scope.depsFor(document)
327 |       var options  = {name: document.baseURI || document.location.pathname}
328 |       var promises = deps.map(function(dep) {
329 |         return System.import(dep.name, options)
330 |       })
331 |       Promise.all(promises).then(function(allExports) {
332 |         _fireEvent(document, 'DeclaredImportsLoaded')
333 | 
334 |         // A scoped script can be declared as:
335 |         //
336 |         // ```html
337 |         // <script type="scoped">...</script>
338 |         // ```
339 |         var scripts = document.querySelectorAll('script[type="scoped"]')
340 |         if (!scripts.length) { return resolve() }
341 | 
342 |         var exportMap = _resolveExports(allExports, deps, document)
343 |         try {
344 |           for (var i = 0, script; script = scripts[i]; i++) {
345 |             _executeScript(exportMap, script)
346 |           }
347 |         // If any scripts fail to execute, we fail the entire load.
348 |         } catch (error) {
349 |           reject(error)
350 |         }
351 | 
352 |         resolve()
353 |       })
354 |     })
355 |   }
356 | 
357 |   // ## Internal Implementation
358 | 
359 |   // After we have loaded all the declared imports for a particular document,
360 |   // we need to flatten the imported values into a set of (aliased) keys and
361 |   // their values.
362 |   function _resolveExports(allExports, deps, document) {
363 |     console.assert(allExports.length === deps.length, 'declared dependencies do not match loaded exports')
364 |     var valueTuples = []
365 |     for (var i = 0, dep; dep = deps[i]; i++) {
366 |       var keys = Object.keys(dep.aliases)
367 |       for (var j = 0, key; key = keys[j]; j++) {
368 |         var alias = dep.aliases[key]
369 |         if (!(key in allExports[i])) {
370 |           console.warn('"' + key + '" was requested, but not exported from "' + dep.name + '".', dep.source)
371 |         }
372 |         valueTuples.push([alias, allExports[i][key], dep.source])
373 |       }
374 |     }
375 | 
376 |     // As a convenience, we also expose values exported by the current document.
377 |     valueTuples = valueTuples.concat(scope._exportTuplesFor(document))
378 |     var exportMap = scope._util.flattenValueTuples(valueTuples)
379 |     // We have to be careful not to expose the document's default value though.
380 |     delete exportMap.default
381 | 
382 |     return exportMap
383 |   }
384 | 
385 |   // After all the imported values are flattened and validated, it is time to
386 |   // execute the scoped scripts within the document.
387 |   function _executeScript(exportMap, script) {
388 |     // Scoped scripts follow the same lifecycle events as a regular `<script>`
389 |     // element. See http://www.w3.org/TR/html5/scripting-1.html
390 |     if (!_fireEvent(script, 'beforescriptexecute', true, true)) {
391 |       // You can cancel a scoped script by canceling `beforescriptexecute`.
392 |       console.debug('scoped script', script, 'was canceled')
393 |       return
394 |     } else {
395 |       console.debug('executing scoped script', script, 'scoped imports:', exportMap)
396 |     }
397 | 
398 |     var keys   = Object.keys(exportMap)
399 |     var values = keys.map(function(k) { return exportMap[k] })
400 |     // We support CommonJS style exports for scoped scripts. Ideally, we'd be
401 |     // reusing `System.module`, but there doesn't appear to be a clean way of
402 |     // also supporting scoped imports via that mechanism.
403 |     if ('exports' in exportMap || 'module' in exportMap) {
404 |       throw new Error('"exports" and "module" are reserved names for scoped scripts')
405 |     }
406 |     keys.push('exports', 'module')
407 |     values.push({})
408 |     values.push({exports: values[values.length - 1]})
409 |     var module = values[values.length - 1]
410 | 
411 |     // Scoped scripts are evaluated in strict mode. It's the future!
412 |     var source = '"use strict";\n' + script.textContent
413 | 
414 |     // Currently, each script gets its own closure that includes any scoped
415 |     // values imported by the document's declare imports. This also acts as a
416 |     // convenient sandbox for scripts.
417 |     try {
418 |       var func = Function.apply(null, keys.concat([source]))
419 |       func.apply(null, values)
420 |     } catch (error) {
421 |       console.error(
422 |         'Failure executing scoped script:', error.message, '\n',
423 |         'Imported values:', exportMap, '\n',
424 |         'Script body:', source, '\n')
425 |       throw error
426 |     } finally {
427 |       // Once a script has executed (for better or worse), we fire script
428 |       // lifecycle events. Interestingly, the spec (and native impls) do not
429 |       // appear to fire an `error` event for scripting errors, so we omit that.
430 |       //
431 |       // See http://www.w3.org/TR/html5/scripting-1.html for behavior.
432 |       _fireEvent(script, 'afterscriptexecute', true)
433 |       setTimeout(function() { _fireEvent(script, 'load') }, 0)
434 |     }
435 | 
436 |     // Once a scoped script has run, its exports are exposed via the `exports`
437 |     // property on the script's element.
438 |     script.exports = module.exports
439 |   }
440 | 
441 |   function _fireEvent(node, eventName, bubble, cancelable) {
442 |     var event = new Event(eventName)
443 |     event.bubbles    = !!bubble
444 |     event.cancelable = !!cancelable
445 |     return node.dispatchEvent(event)
446 |   }
447 | 
448 | })(this.HTMLExports = this.HTMLExports || {})
449 | 
450 | // # Global Behavior
451 | ;(function(scope) {
452 |   'use strict'
453 | 
454 |   // When HTML Exports is used normally, it is mixed into the `System` loader.
455 |   scope.DocumentLoader.mixin(System)
456 | 
457 |   //
458 |   document.addEventListener('DOMContentLoaded', function() {
459 |     scope.runScopedScripts(document)
460 |   })
461 | 
462 | })(this.HTMLExports = this.HTMLExports || {})
463 | 


--------------------------------------------------------------------------------
/dist/html-exports.js:
--------------------------------------------------------------------------------
  1 | // # Internal Helpers
  2 | 
  3 | ;(function(scope) {
  4 |   'use strict'
  5 | 
  6 |   var _util = {}
  7 |   scope._util = _util
  8 | 
  9 |   // ## `flattenValueTuples`
 10 | 
 11 |   // After collecting value tuples ([key, value, source]), we can flatten them
 12 |   // into an value map, and also warn about any masked values.
 13 |   scope._util.flattenValueTuples = function flattenValueTuples(valueTuples, ignore) {
 14 |     var valueMap = {}
 15 |     var masked   = []
 16 |     for (var i = 0, tuple; tuple = valueTuples[i]; i++) {
 17 |       var key = tuple[0]
 18 |       if (key in valueMap && (!ignore || ignore.indexOf(key) === -1)) {
 19 |         masked.push(key)
 20 |       }
 21 |       valueMap[key] = tuple[1]
 22 |     }
 23 | 
 24 |     if (masked.length) {
 25 |       masked.forEach(_warnMaskedValues.bind(null, valueTuples))
 26 |     }
 27 | 
 28 |     return valueMap
 29 |   }
 30 | 
 31 |   // It's important that we give authors as much info as possible to diagnose
 32 |   // any problems with their source. So, we spend a bit of computational effort
 33 |   // whenever values are masked (imports, exports, etc).
 34 |   function _warnMaskedValues(valueTuples, key) {
 35 |     var conflicting = valueTuples.filter(function(tuple) {
 36 |       return tuple[0] === key
 37 |     }).map(function(tuple) {
 38 |       return tuple[2]
 39 |     })
 40 |     console.warn.apply(console,
 41 |       ['Multiple values named "' + key + '" were evaluated:'].concat(conflicting)
 42 |     )
 43 |   }
 44 | 
 45 | })(this.HTMLExports = this.HTMLExports || {})
 46 | 
 47 | // # LoaderHooks
 48 | 
 49 | // `HTMLExports.LoaderHooks` is a mixable map of loader hooks that provide the
 50 | // underlying behavior for loading HTML documents as modules.
 51 | //
 52 | // These hooks are designed to be consumed via various interfaces:
 53 | //
 54 | //  * They are indirectly mixed into [`DocumentLoader`](documentloader.html).
 55 | //
 56 | //  * They can be mixed into any existing loader via [`DocumentLoader.mixin`](documentloader.html#-documentloader-mixin-).
 57 | //
 58 | //  * They can be used via a [SystemJS plugin](sysjs-plugin.html).
 59 | //
 60 | ;(function(scope) {
 61 |   'use strict'
 62 | 
 63 |   var LoaderHooks = {}
 64 |   scope.LoaderHooks = LoaderHooks
 65 | 
 66 |   // ## `LoaderHooks.fetch`
 67 | 
 68 |   // Documents are fetched via a dynamic HTML import. This ensures that the
 69 |   // document's linked resources (stylesheets, scripts, etc) are also properly
 70 |   // loaded.
 71 |   //
 72 |   // The alternative would be for us to fetch document source and construct/load
 73 |   // HTML documents ourselves. This becomes rather complex, and would end up
 74 |   // duplicating much of the logic expressed by the HTML Imports polyfill.
 75 |   LoaderHooks.fetch = function fetchHTML(load) {
 76 | 
 77 |     return new Promise(function(resolve, reject) {
 78 |       var link = _newDynamicImport(load.address)
 79 | 
 80 |       link.addEventListener('error', function() {
 81 |         reject(new Error('Unknown failure when fetching URL: ' + load.address))
 82 |       })
 83 | 
 84 |       link.addEventListener('load', function() {
 85 |         // One problem with the module loader spec is that the `instantiate`
 86 |         // step does not support asynchronous execution. We want that, so that
 87 |         // we can ensure that any async-executed scripts in the document defer
 88 |         // its load (also so we can extract exports from them).
 89 |         //
 90 |         // Thus, we perform any async logic during load to emulate that (if
 91 |         // scoped scripts are enabled).
 92 |         var runScripts = scope.runScopedScripts && scope.runScopedScripts(link.import) || Promise.resolve()
 93 |         runScripts.then(function() {
 94 |           // Another difficulty of the module loader spec is that it rightfully
 95 |           // assumes that all sources are a `String`. Because we completely skip
 96 |           // over raw source, we need to be a little more crafty by placing the
 97 |           // real source in a side channel.
 98 |           load.metadata.importedHTMLDocument = link.import
 99 |           // And then, to appease the spec/SystemJS, we provide a dummy value for
100 |           // `source`.
101 |           resolve('')
102 |         })
103 |       })
104 |     })
105 |   }
106 | 
107 |   // ## `LoaderHooks.instantiate`
108 | 
109 |   // Once we have a document fetched via HTML imports, we can extract the
110 |   // its dependencies and exported values.
111 |   //
112 |   // However, it is worth noting that we gain the same document semantics as
113 |   // HTML imports: stylesheets are merged into the root document, scripts
114 |   // evaluate globally, etc. Good for simplifying code, not great for scoping.
115 |   //
116 |   // Furthermore, imports are not considered loaded until all of their linked
117 |   // dependencies (stylesheets, scripts, etc) have also loaded. This makes
118 |   // prefetching declared module dependencies difficult/impossible.
119 |   LoaderHooks.instantiate = function instantiateHTML(load) {
120 |     var doc = load.metadata.importedHTMLDocument
121 |     if (!doc) {
122 |       throw new Error('HTMLExports bug: Expected fetched Document in metadata')
123 |     }
124 | 
125 |     return {
126 |       deps: scope.depsFor(doc).map(function(d) { return d.name }),
127 |       execute: function executeHTML() {
128 |         return this.newModule(scope.exportsFor(doc))
129 |       }.bind(this),
130 |     }
131 |   }
132 | 
133 |   // ## Document Processing
134 | 
135 |   // ### `HTMLExports.depsFor`
136 | 
137 |   // HTML modules can declare dependencies on any other modules via the `import`
138 |   // element:
139 |   //
140 |   // ```html
141 |   // <import src="some-module">
142 |   // ```
143 |   scope.depsFor = function depsFor(document) {
144 |     var declaredDependencies = document.querySelectorAll('import[src]')
145 |     return Array.prototype.map.call(declaredDependencies, function(importNode) {
146 |       // Much like ES6's import syntax, you can also choose which exported
147 |       // values to bring into scope, and rename them.
148 |       var aliases = {}
149 |       // The default export can be imported via the `as` attribute:
150 |       //
151 |       // ```html
152 |       // <import src="jQuery" as="$">
153 |       // ```
154 |       if (importNode.hasAttribute('as')) {
155 |         aliases.default = importNode.getAttribute('as')
156 |       }
157 |       // Named exports can be imported via the `values` attribute (space
158 |       // separated).
159 |       //
160 |       // ```html
161 |       // <import src="lodash" values="compact">
162 |       // ```
163 |       if (importNode.hasAttribute('values')) {
164 |         importNode.getAttribute('values').split(/\s+/).forEach(function(key) {
165 |           if (key === '') return
166 |           aliases[key] = key
167 |         })
168 |       }
169 | 
170 |       // Each dependency returned is an object with:
171 |       return {
172 |         // * `name`: The declared name; you may want to `normalize` it.
173 |         name: importNode.getAttribute('src'),
174 |         // * `aliases`: A map of exported values to the keys they should be
175 |         //              exposed as.
176 |         aliases: aliases,
177 |         // * `source`: Source element, to aid in debugging. Expect a beating if
178 |         //             you leak this!
179 |         source: importNode,
180 |       }
181 |     })
182 |   }
183 | 
184 |   // ### `HTMLExports.exportsFor`
185 | 
186 |   // HTML modules can export elements that are tagged with `export`.
187 |   scope._exportTuplesFor = function _exportTuplesFor(document) {
188 |     //- We collect [key, value, source] and then flatten at the end.
189 |     var valueTuples = []
190 |     // They can either be named elements (via `id`), such as:
191 |     //
192 |     // ```html
193 |     // <div export id="foo">...</div>
194 |     // ```
195 |     var exportedNodes = document.querySelectorAll('[export][id]')
196 |     for (var i = 0, node; node = exportedNodes[i]; i++) {
197 |       valueTuples.push([node.getAttribute('id'), node, node])
198 |     }
199 | 
200 |     // Or they can be the default export when tagged with `default`:
201 |     //
202 |     // ```html
203 |     // <div export default>...</div>
204 |     // ```
205 |     var defaultNodes = document.querySelectorAll('[export][default]')
206 |     if (defaultNodes.length > 1) {
207 |       throw new Error('Only one default export is allowed per document')
208 |     } else if (defaultNodes.length === 1) {
209 |       valueTuples.push(['default', defaultNodes[0], defaultNodes[0]])
210 |     // Otherwise, the default export will be the document.
211 |     } else {
212 |       valueTuples.push(['default', document, document])
213 |     }
214 | 
215 |     // Furthermore, values exported by `<script type="scoped">` blocks are also
216 |     // exported via the document. This depends on `HTMLExports.runScopedScripts`
217 |     // having been run already.
218 |     var scopedScripts = document.querySelectorAll('script[type="scoped"]')
219 |     for (i = 0; node = scopedScripts[i]; i++) {
220 |       if (!node.exports) continue;
221 |       var keys = Object.keys(node.exports)
222 |       for (var j = 0, key; key = keys[j]; j++) {
223 |         valueTuples.push([key, node.exports[key], node])
224 |       }
225 |     }
226 | 
227 |     return valueTuples
228 |   }
229 | 
230 |   scope.exportsFor = function exportsFor(document) {
231 |     return scope._util.flattenValueTuples(scope._exportTuplesFor(document), ['default'])
232 |   }
233 | 
234 |   // ## Internal Implementation
235 | 
236 |   function _newDynamicImport(address) {
237 |     var link = document.createElement('link')
238 |     link.setAttribute('rel', 'import')
239 |     link.setAttribute('href', address)
240 |     link.setAttribute('module', '')  // Annotate the link for debugability.
241 | 
242 |     document.head.appendChild(link)
243 | 
244 |     return link
245 |   }
246 | 
247 | })(this.HTMLExports = this.HTMLExports || {})
248 | 
249 | // # DocumentLoader
250 | 
251 | ;(function(scope) {
252 |   'use strict'
253 | 
254 |   scope.DocumentLoader = DocumentLoader
255 | 
256 |   // `HTMLExports.DocumentLoader` is a module loader that loads any modules with
257 |   // a `.html` extension as a HTML module. See [`HTMLExports.LoaderHooks`](loaderhooks.html)
258 |   // for the underlying behavior.
259 |   function DocumentLoader(options) {
260 |     Reflect.Loader.call(this, options || {})
261 |   }
262 |   DocumentLoader.prototype = Object.create(Reflect.Loader.prototype)
263 | 
264 |   // ### `DocumentLoader.mixin`
265 | 
266 |   // Rather than instantiating and managing a `DocumentLoader` directly, you
267 |   // will frequently want to mix `DocumentLoader`'s behavior into an existing
268 |   // loader.
269 |   //
270 |   // For example, to override the default system loader:
271 |   //
272 |   // ```js
273 |   // HTMLExports.DocumentLoader.mixin(System)
274 |   // ```
275 |   //
276 |   DocumentLoader.mixin = function mixin(loader) {
277 | 
278 |     Object.keys(scope.LoaderHooks).forEach(function(hookName) {
279 | 
280 |       var htmlHook   = scope.LoaderHooks[hookName]
281 |       var parentHook = loader[hookName]
282 |       loader[hookName] = function(load) {
283 |         return (_isHtml(load) ? htmlHook : parentHook).apply(this, arguments)
284 |       }
285 |     })
286 | 
287 |     // If the author is using es6-module-loader or SystemJS, an entry is added
288 |     // to their `paths` property so that `.html` addresses are not resolved as
289 |     // `.html.js`.
290 |     if (loader.paths) {
291 |       loader.paths['*.html'] = '*.html'
292 |     }
293 |   }
294 | 
295 |   DocumentLoader.mixin(DocumentLoader.prototype)
296 | 
297 |   // ## Internal Implementation
298 | 
299 |   // Any module with an extension of `.html` is assumed to represent a HTML
300 |   // document.
301 |   //
302 |   // We cannot perform any smarter heuristics (such as checking content type),
303 |   // as this check is performed before the `fetch` step completes.
304 |   function _isHtml(load) {
305 |     var path = load.address || load.name
306 |     return path && path.slice(-5) === '.html'
307 |   }
308 | 
309 | })(this.HTMLExports = this.HTMLExports || {})
310 | 
311 | // # Scoped Scripts
312 | 
313 | ;(function(scope) {
314 |   'use strict'
315 | 
316 |   // ### `HTMLExports.runScopedScripts`
317 | 
318 |   // Processes any scoped scripts, and executes them after all declared imports
319 |   // within a document have loaded.
320 |   scope.runScopedScripts = function runScopedScripts(document) {
321 |     return new Promise(function(resolve, reject) {
322 |       var deps     = scope.depsFor(document)
323 |       var options  = {name: document.baseURI || document.location.pathname}
324 |       var promises = deps.map(function(dep) {
325 |         return System.import(dep.name, options)
326 |       })
327 |       Promise.all(promises).then(function(allExports) {
328 |         _fireEvent(document, 'DeclaredImportsLoaded')
329 | 
330 |         // A scoped script can be declared as:
331 |         //
332 |         // ```html
333 |         // <script type="scoped">...</script>
334 |         // ```
335 |         var scripts = document.querySelectorAll('script[type="scoped"]')
336 |         if (!scripts.length) { return resolve() }
337 | 
338 |         var exportMap = _resolveExports(allExports, deps, document)
339 |         try {
340 |           for (var i = 0, script; script = scripts[i]; i++) {
341 |             _executeScript(exportMap, script)
342 |           }
343 |         // If any scripts fail to execute, we fail the entire load.
344 |         } catch (error) {
345 |           reject(error)
346 |         }
347 | 
348 |         resolve()
349 |       })
350 |     })
351 |   }
352 | 
353 |   // ## Internal Implementation
354 | 
355 |   // After we have loaded all the declared imports for a particular document,
356 |   // we need to flatten the imported values into a set of (aliased) keys and
357 |   // their values.
358 |   function _resolveExports(allExports, deps, document) {
359 |     var valueTuples = []
360 |     for (var i = 0, dep; dep = deps[i]; i++) {
361 |       var keys = Object.keys(dep.aliases)
362 |       for (var j = 0, key; key = keys[j]; j++) {
363 |         var alias = dep.aliases[key]
364 |         if (!(key in allExports[i])) {
365 |           console.warn('"' + key + '" was requested, but not exported from "' + dep.name + '".', dep.source)
366 |         }
367 |         valueTuples.push([alias, allExports[i][key], dep.source])
368 |       }
369 |     }
370 | 
371 |     // As a convenience, we also expose values exported by the current document.
372 |     valueTuples = valueTuples.concat(scope._exportTuplesFor(document))
373 |     var exportMap = scope._util.flattenValueTuples(valueTuples)
374 |     // We have to be careful not to expose the document's default value though.
375 |     delete exportMap.default
376 | 
377 |     return exportMap
378 |   }
379 | 
380 |   // After all the imported values are flattened and validated, it is time to
381 |   // execute the scoped scripts within the document.
382 |   function _executeScript(exportMap, script) {
383 |     // Scoped scripts follow the same lifecycle events as a regular `<script>`
384 |     // element. See http://www.w3.org/TR/html5/scripting-1.html
385 |     if (!_fireEvent(script, 'beforescriptexecute', true, true)) {
386 |       // You can cancel a scoped script by canceling `beforescriptexecute`.
387 |       return
388 |     } else {
389 |     }
390 | 
391 |     var keys   = Object.keys(exportMap)
392 |     var values = keys.map(function(k) { return exportMap[k] })
393 |     // We support CommonJS style exports for scoped scripts. Ideally, we'd be
394 |     // reusing `System.module`, but there doesn't appear to be a clean way of
395 |     // also supporting scoped imports via that mechanism.
396 |     if ('exports' in exportMap || 'module' in exportMap) {
397 |       throw new Error('"exports" and "module" are reserved names for scoped scripts')
398 |     }
399 |     keys.push('exports', 'module')
400 |     values.push({})
401 |     values.push({exports: values[values.length - 1]})
402 |     var module = values[values.length - 1]
403 | 
404 |     // Scoped scripts are evaluated in strict mode. It's the future!
405 |     var source = '"use strict";\n' + script.textContent
406 | 
407 |     // Currently, each script gets its own closure that includes any scoped
408 |     // values imported by the document's declare imports. This also acts as a
409 |     // convenient sandbox for scripts.
410 |     try {
411 |       var func = Function.apply(null, keys.concat([source]))
412 |       func.apply(null, values)
413 |     } catch (error) {
414 |       console.error(
415 |         'Failure executing scoped script:', error.message, '\n',
416 |         'Imported values:', exportMap, '\n',
417 |         'Script body:', source, '\n')
418 |       throw error
419 |     } finally {
420 |       // Once a script has executed (for better or worse), we fire script
421 |       // lifecycle events. Interestingly, the spec (and native impls) do not
422 |       // appear to fire an `error` event for scripting errors, so we omit that.
423 |       //
424 |       // See http://www.w3.org/TR/html5/scripting-1.html for behavior.
425 |       _fireEvent(script, 'afterscriptexecute', true)
426 |       setTimeout(function() { _fireEvent(script, 'load') }, 0)
427 |     }
428 | 
429 |     // Once a scoped script has run, its exports are exposed via the `exports`
430 |     // property on the script's element.
431 |     script.exports = module.exports
432 |   }
433 | 
434 |   function _fireEvent(node, eventName, bubble, cancelable) {
435 |     var event = new Event(eventName)
436 |     event.bubbles    = !!bubble
437 |     event.cancelable = !!cancelable
438 |     return node.dispatchEvent(event)
439 |   }
440 | 
441 | })(this.HTMLExports = this.HTMLExports || {})
442 | 
443 | // # Global Behavior
444 | ;(function(scope) {
445 |   'use strict'
446 | 
447 |   // When HTML Exports is used normally, it is mixed into the `System` loader.
448 |   scope.DocumentLoader.mixin(System)
449 | 
450 |   //
451 |   document.addEventListener('DOMContentLoaded', function() {
452 |     scope.runScopedScripts(document)
453 |   })
454 | 
455 | })(this.HTMLExports = this.HTMLExports || {})
456 | 


--------------------------------------------------------------------------------
/dist/html-exports.min.js:
--------------------------------------------------------------------------------
1 | !function(t){"use strict";function e(t,e){var r=t.filter(function(t){return t[0]===e}).map(function(t){return t[2]});console.warn.apply(console,['Multiple values named "'+e+'" were evaluated:'].concat(r))}var r={};t._util=r,t._util.flattenValueTuples=function(t,r){for(var n,o={},u=[],s=0;n=t[s];s++){var a=n[0];a in o&&(!r||-1===r.indexOf(a))&&u.push(a),o[a]=n[1]}return u.length&&u.forEach(e.bind(null,t)),o}}(this.HTMLExports=this.HTMLExports||{}),function(t){"use strict";function e(t){var e=document.createElement("link");return e.setAttribute("rel","import"),e.setAttribute("href",t),e.setAttribute("module",""),document.head.appendChild(e),e}var r={};t.LoaderHooks=r,r.fetch=function(r){return new Promise(function(n,o){var u=e(r.address);u.addEventListener("error",function(){o(new Error("Unknown failure when fetching URL: "+r.address))}),u.addEventListener("load",function(){var e=t.runScopedScripts&&t.runScopedScripts(u.import)||Promise.resolve();e.then(function(){r.metadata.importedHTMLDocument=u.import,n("")})})})},r.instantiate=function(e){var r=e.metadata.importedHTMLDocument;if(!r)throw new Error("HTMLExports bug: Expected fetched Document in metadata");return{deps:t.depsFor(r).map(function(t){return t.name}),execute:function(){return this.newModule(t.exportsFor(r))}.bind(this)}},t.depsFor=function(t){var e=t.querySelectorAll("import[src]");return Array.prototype.map.call(e,function(t){var e={};return t.hasAttribute("as")&&(e.default=t.getAttribute("as")),t.hasAttribute("values")&&t.getAttribute("values").split(/\s+/).forEach(function(t){""!==t&&(e[t]=t)}),{name:t.getAttribute("src"),aliases:e,source:t}})},t._exportTuplesFor=function(t){for(var e,r=[],n=t.querySelectorAll("[export][id]"),o=0;e=n[o];o++)r.push([e.getAttribute("id"),e,e]);var u=t.querySelectorAll("[export][default]");if(u.length>1)throw new Error("Only one default export is allowed per document");r.push(1===u.length?["default",u[0],u[0]]:["default",t,t]);var s=t.querySelectorAll('script[type="scoped"]');for(o=0;e=s[o];o++)if(e.exports)for(var a,i=Object.keys(e.exports),c=0;a=i[c];c++)r.push([a,e.exports[a],e]);return r},t.exportsFor=function(e){return t._util.flattenValueTuples(t._exportTuplesFor(e),["default"])}}(this.HTMLExports=this.HTMLExports||{}),function(t){"use strict";function e(t){Reflect.Loader.call(this,t||{})}function r(t){var e=t.address||t.name;return e&&".html"===e.slice(-5)}t.DocumentLoader=e,e.prototype=Object.create(Reflect.Loader.prototype),e.mixin=function(e){Object.keys(t.LoaderHooks).forEach(function(n){var o=t.LoaderHooks[n],u=e[n];e[n]=function(t){return(r(t)?o:u).apply(this,arguments)}}),e.paths&&(e.paths["*.html"]="*.html")},e.mixin(e.prototype)}(this.HTMLExports=this.HTMLExports||{}),function(t){"use strict";function e(e,r,n){for(var o,u=[],s=0;o=r[s];s++)for(var a,i=Object.keys(o.aliases),c=0;a=i[c];c++){var p=o.aliases[a];a in e[s]||console.warn('"'+a+'" was requested, but not exported from "'+o.name+'".',o.source),u.push([p,e[s][a],o.source])}u=u.concat(t._exportTuplesFor(n));var l=t._util.flattenValueTuples(u);return delete l.default,l}function r(t,e){if(n(e,"beforescriptexecute",!0,!0)){var r=Object.keys(t),o=r.map(function(e){return t[e]});if("exports"in t||"module"in t)throw new Error('"exports" and "module" are reserved names for scoped scripts');r.push("exports","module"),o.push({}),o.push({exports:o[o.length-1]});var u=o[o.length-1],s='"use strict";\n'+e.textContent;try{var a=Function.apply(null,r.concat([s]));a.apply(null,o)}catch(i){throw console.error("Failure executing scoped script:",i.message,"\n","Imported values:",t,"\n","Script body:",s,"\n"),i}finally{n(e,"afterscriptexecute",!0),setTimeout(function(){n(e,"load")},0)}e.exports=u.exports}}function n(t,e,r,n){var o=new Event(e);return o.bubbles=!!r,o.cancelable=!!n,t.dispatchEvent(o)}t.runScopedScripts=function(o){return new Promise(function(u,s){var a=t.depsFor(o),i={name:o.baseURI||o.location.pathname},c=a.map(function(t){return System.import(t.name,i)});Promise.all(c).then(function(t){n(o,"DeclaredImportsLoaded");var i=o.querySelectorAll('script[type="scoped"]');if(!i.length)return u();var c=e(t,a,o);try{for(var p,l=0;p=i[l];l++)r(c,p)}catch(d){s(d)}u()})})}}(this.HTMLExports=this.HTMLExports||{}),function(t){"use strict";t.DocumentLoader.mixin(System),document.addEventListener("DOMContentLoaded",function(){t.runScopedScripts(document)})}(this.HTMLExports=this.HTMLExports||{});


--------------------------------------------------------------------------------
/dist/sysjs-plugin/html.debug.js:
--------------------------------------------------------------------------------
  1 | // # Internal Helpers
  2 | 
  3 | ;(function(scope) {
  4 |   'use strict'
  5 | 
  6 |   var _util = {}
  7 |   scope._util = _util
  8 | 
  9 |   // ## `flattenValueTuples`
 10 | 
 11 |   // After collecting value tuples ([key, value, source]), we can flatten them
 12 |   // into an value map, and also warn about any masked values.
 13 |   scope._util.flattenValueTuples = function flattenValueTuples(valueTuples, ignore) {
 14 |     var valueMap = {}
 15 |     var masked   = []
 16 |     for (var i = 0, tuple; tuple = valueTuples[i]; i++) {
 17 |       var key = tuple[0]
 18 |       if (key in valueMap && (!ignore || ignore.indexOf(key) === -1)) {
 19 |         masked.push(key)
 20 |       }
 21 |       valueMap[key] = tuple[1]
 22 |     }
 23 | 
 24 |     if (masked.length) {
 25 |       masked.forEach(_warnMaskedValues.bind(null, valueTuples))
 26 |     }
 27 | 
 28 |     return valueMap
 29 |   }
 30 | 
 31 |   // It's important that we give authors as much info as possible to diagnose
 32 |   // any problems with their source. So, we spend a bit of computational effort
 33 |   // whenever values are masked (imports, exports, etc).
 34 |   function _warnMaskedValues(valueTuples, key) {
 35 |     var conflicting = valueTuples.filter(function(tuple) {
 36 |       return tuple[0] === key
 37 |     }).map(function(tuple) {
 38 |       return tuple[2]
 39 |     })
 40 |     console.warn.apply(console,
 41 |       ['Multiple values named "' + key + '" were evaluated:'].concat(conflicting)
 42 |     )
 43 |   }
 44 | 
 45 | })(this.HTMLExports = this.HTMLExports || {})
 46 | 
 47 | // # LoaderHooks
 48 | 
 49 | // `HTMLExports.LoaderHooks` is a mixable map of loader hooks that provide the
 50 | // underlying behavior for loading HTML documents as modules.
 51 | //
 52 | // These hooks are designed to be consumed via various interfaces:
 53 | //
 54 | //  * They are indirectly mixed into [`DocumentLoader`](documentloader.html).
 55 | //
 56 | //  * They can be mixed into any existing loader via [`DocumentLoader.mixin`](documentloader.html#-documentloader-mixin-).
 57 | //
 58 | //  * They can be used via a [SystemJS plugin](sysjs-plugin.html).
 59 | //
 60 | ;(function(scope) {
 61 |   'use strict'
 62 | 
 63 |   var LoaderHooks = {}
 64 |   scope.LoaderHooks = LoaderHooks
 65 | 
 66 |   // ## `LoaderHooks.fetch`
 67 | 
 68 |   // Documents are fetched via a dynamic HTML import. This ensures that the
 69 |   // document's linked resources (stylesheets, scripts, etc) are also properly
 70 |   // loaded.
 71 |   //
 72 |   // The alternative would be for us to fetch document source and construct/load
 73 |   // HTML documents ourselves. This becomes rather complex, and would end up
 74 |   // duplicating much of the logic expressed by the HTML Imports polyfill.
 75 |   LoaderHooks.fetch = function fetchHTML(load) {
 76 |     console.debug('HTMLExports.LoaderHooks.fetch(', load, ')')
 77 | 
 78 |     return new Promise(function(resolve, reject) {
 79 |       var link = _newDynamicImport(load.address)
 80 | 
 81 |       link.addEventListener('error', function() {
 82 |         reject(new Error('Unknown failure when fetching URL: ' + load.address))
 83 |       })
 84 | 
 85 |       link.addEventListener('load', function() {
 86 |         // One problem with the module loader spec is that the `instantiate`
 87 |         // step does not support asynchronous execution. We want that, so that
 88 |         // we can ensure that any async-executed scripts in the document defer
 89 |         // its load (also so we can extract exports from them).
 90 |         //
 91 |         // Thus, we perform any async logic during load to emulate that (if
 92 |         // scoped scripts are enabled).
 93 |         var runScripts = scope.runScopedScripts && scope.runScopedScripts(link.import) || Promise.resolve()
 94 |         runScripts.then(function() {
 95 |           // Another difficulty of the module loader spec is that it rightfully
 96 |           // assumes that all sources are a `String`. Because we completely skip
 97 |           // over raw source, we need to be a little more crafty by placing the
 98 |           // real source in a side channel.
 99 |           load.metadata.importedHTMLDocument = link.import
100 |           // And then, to appease the spec/SystemJS, we provide a dummy value for
101 |           // `source`.
102 |           resolve('')
103 |         })
104 |       })
105 |     })
106 |   }
107 | 
108 |   // ## `LoaderHooks.instantiate`
109 | 
110 |   // Once we have a document fetched via HTML imports, we can extract the
111 |   // its dependencies and exported values.
112 |   //
113 |   // However, it is worth noting that we gain the same document semantics as
114 |   // HTML imports: stylesheets are merged into the root document, scripts
115 |   // evaluate globally, etc. Good for simplifying code, not great for scoping.
116 |   //
117 |   // Furthermore, imports are not considered loaded until all of their linked
118 |   // dependencies (stylesheets, scripts, etc) have also loaded. This makes
119 |   // prefetching declared module dependencies difficult/impossible.
120 |   LoaderHooks.instantiate = function instantiateHTML(load) {
121 |     console.debug('HTMLExports.LoaderHooks.instantiate(', load, ')')
122 |     var doc = load.metadata.importedHTMLDocument
123 |     if (!doc) {
124 |       throw new Error('HTMLExports bug: Expected fetched Document in metadata')
125 |     }
126 | 
127 |     return {
128 |       deps: scope.depsFor(doc).map(function(d) { return d.name }),
129 |       execute: function executeHTML() {
130 |         return this.newModule(scope.exportsFor(doc))
131 |       }.bind(this),
132 |     }
133 |   }
134 | 
135 |   // ## Document Processing
136 | 
137 |   // ### `HTMLExports.depsFor`
138 | 
139 |   // HTML modules can declare dependencies on any other modules via the `import`
140 |   // element:
141 |   //
142 |   // ```html
143 |   // <import src="some-module">
144 |   // ```
145 |   scope.depsFor = function depsFor(document) {
146 |     var declaredDependencies = document.querySelectorAll('import[src]')
147 |     return Array.prototype.map.call(declaredDependencies, function(importNode) {
148 |       // Much like ES6's import syntax, you can also choose which exported
149 |       // values to bring into scope, and rename them.
150 |       var aliases = {}
151 |       // The default export can be imported via the `as` attribute:
152 |       //
153 |       // ```html
154 |       // <import src="jQuery" as="$">
155 |       // ```
156 |       if (importNode.hasAttribute('as')) {
157 |         aliases.default = importNode.getAttribute('as')
158 |       }
159 |       // Named exports can be imported via the `values` attribute (space
160 |       // separated).
161 |       //
162 |       // ```html
163 |       // <import src="lodash" values="compact">
164 |       // ```
165 |       if (importNode.hasAttribute('values')) {
166 |         importNode.getAttribute('values').split(/\s+/).forEach(function(key) {
167 |           if (key === '') return
168 |           aliases[key] = key
169 |         })
170 |       }
171 | 
172 |       // Each dependency returned is an object with:
173 |       return {
174 |         // * `name`: The declared name; you may want to `normalize` it.
175 |         name: importNode.getAttribute('src'),
176 |         // * `aliases`: A map of exported values to the keys they should be
177 |         //              exposed as.
178 |         aliases: aliases,
179 |         // * `source`: Source element, to aid in debugging. Expect a beating if
180 |         //             you leak this!
181 |         source: importNode,
182 |       }
183 |     })
184 |   }
185 | 
186 |   // ### `HTMLExports.exportsFor`
187 | 
188 |   // HTML modules can export elements that are tagged with `export`.
189 |   scope._exportTuplesFor = function _exportTuplesFor(document) {
190 |     //- We collect [key, value, source] and then flatten at the end.
191 |     var valueTuples = []
192 |     // They can either be named elements (via `id`), such as:
193 |     //
194 |     // ```html
195 |     // <div export id="foo">...</div>
196 |     // ```
197 |     var exportedNodes = document.querySelectorAll('[export][id]')
198 |     for (var i = 0, node; node = exportedNodes[i]; i++) {
199 |       valueTuples.push([node.getAttribute('id'), node, node])
200 |     }
201 | 
202 |     // Or they can be the default export when tagged with `default`:
203 |     //
204 |     // ```html
205 |     // <div export default>...</div>
206 |     // ```
207 |     var defaultNodes = document.querySelectorAll('[export][default]')
208 |     if (defaultNodes.length > 1) {
209 |       throw new Error('Only one default export is allowed per document')
210 |     } else if (defaultNodes.length === 1) {
211 |       valueTuples.push(['default', defaultNodes[0], defaultNodes[0]])
212 |     // Otherwise, the default export will be the document.
213 |     } else {
214 |       valueTuples.push(['default', document, document])
215 |     }
216 | 
217 |     // Furthermore, values exported by `<script type="scoped">` blocks are also
218 |     // exported via the document. This depends on `HTMLExports.runScopedScripts`
219 |     // having been run already.
220 |     var scopedScripts = document.querySelectorAll('script[type="scoped"]')
221 |     for (i = 0; node = scopedScripts[i]; i++) {
222 |       if (!node.exports) continue;
223 |       var keys = Object.keys(node.exports)
224 |       for (var j = 0, key; key = keys[j]; j++) {
225 |         valueTuples.push([key, node.exports[key], node])
226 |       }
227 |     }
228 | 
229 |     return valueTuples
230 |   }
231 | 
232 |   scope.exportsFor = function exportsFor(document) {
233 |     return scope._util.flattenValueTuples(scope._exportTuplesFor(document), ['default'])
234 |   }
235 | 
236 |   // ## Internal Implementation
237 | 
238 |   function _newDynamicImport(address) {
239 |     var link = document.createElement('link')
240 |     link.setAttribute('rel', 'import')
241 |     link.setAttribute('href', address)
242 |     link.setAttribute('module', '')  // Annotate the link for debugability.
243 | 
244 |     document.head.appendChild(link)
245 | 
246 |     return link
247 |   }
248 | 
249 | })(this.HTMLExports = this.HTMLExports || {})
250 | 
251 | // # SystemJS Plugin
252 | 
253 | // Note that there is an assumption that `HTMLExports.LoaderHooks` exists in the
254 | // scope (which is taken care of by the build process).
255 | var LoaderHooks = this.HTMLExports.LoaderHooks
256 | 
257 | Object.keys(LoaderHooks).forEach(function(hookName) {
258 |   exports[hookName] = LoaderHooks[hookName]
259 | })
260 | 
261 | // SystemJS' plugin interface has a slightly different interface for the
262 | // `instantiate` hook. It expects the module to be directly returned:
263 | exports.instantiate = function instantiateHTML() {
264 |   return LoaderHooks.instantiate.apply(this, arguments).execute()
265 | }
266 | 


--------------------------------------------------------------------------------
/dist/sysjs-plugin/html.js:
--------------------------------------------------------------------------------
  1 | // # Internal Helpers
  2 | 
  3 | ;(function(scope) {
  4 |   'use strict'
  5 | 
  6 |   var _util = {}
  7 |   scope._util = _util
  8 | 
  9 |   // ## `flattenValueTuples`
 10 | 
 11 |   // After collecting value tuples ([key, value, source]), we can flatten them
 12 |   // into an value map, and also warn about any masked values.
 13 |   scope._util.flattenValueTuples = function flattenValueTuples(valueTuples, ignore) {
 14 |     var valueMap = {}
 15 |     var masked   = []
 16 |     for (var i = 0, tuple; tuple = valueTuples[i]; i++) {
 17 |       var key = tuple[0]
 18 |       if (key in valueMap && (!ignore || ignore.indexOf(key) === -1)) {
 19 |         masked.push(key)
 20 |       }
 21 |       valueMap[key] = tuple[1]
 22 |     }
 23 | 
 24 |     if (masked.length) {
 25 |       masked.forEach(_warnMaskedValues.bind(null, valueTuples))
 26 |     }
 27 | 
 28 |     return valueMap
 29 |   }
 30 | 
 31 |   // It's important that we give authors as much info as possible to diagnose
 32 |   // any problems with their source. So, we spend a bit of computational effort
 33 |   // whenever values are masked (imports, exports, etc).
 34 |   function _warnMaskedValues(valueTuples, key) {
 35 |     var conflicting = valueTuples.filter(function(tuple) {
 36 |       return tuple[0] === key
 37 |     }).map(function(tuple) {
 38 |       return tuple[2]
 39 |     })
 40 |     console.warn.apply(console,
 41 |       ['Multiple values named "' + key + '" were evaluated:'].concat(conflicting)
 42 |     )
 43 |   }
 44 | 
 45 | })(this.HTMLExports = this.HTMLExports || {})
 46 | 
 47 | // # LoaderHooks
 48 | 
 49 | // `HTMLExports.LoaderHooks` is a mixable map of loader hooks that provide the
 50 | // underlying behavior for loading HTML documents as modules.
 51 | //
 52 | // These hooks are designed to be consumed via various interfaces:
 53 | //
 54 | //  * They are indirectly mixed into [`DocumentLoader`](documentloader.html).
 55 | //
 56 | //  * They can be mixed into any existing loader via [`DocumentLoader.mixin`](documentloader.html#-documentloader-mixin-).
 57 | //
 58 | //  * They can be used via a [SystemJS plugin](sysjs-plugin.html).
 59 | //
 60 | ;(function(scope) {
 61 |   'use strict'
 62 | 
 63 |   var LoaderHooks = {}
 64 |   scope.LoaderHooks = LoaderHooks
 65 | 
 66 |   // ## `LoaderHooks.fetch`
 67 | 
 68 |   // Documents are fetched via a dynamic HTML import. This ensures that the
 69 |   // document's linked resources (stylesheets, scripts, etc) are also properly
 70 |   // loaded.
 71 |   //
 72 |   // The alternative would be for us to fetch document source and construct/load
 73 |   // HTML documents ourselves. This becomes rather complex, and would end up
 74 |   // duplicating much of the logic expressed by the HTML Imports polyfill.
 75 |   LoaderHooks.fetch = function fetchHTML(load) {
 76 | 
 77 |     return new Promise(function(resolve, reject) {
 78 |       var link = _newDynamicImport(load.address)
 79 | 
 80 |       link.addEventListener('error', function() {
 81 |         reject(new Error('Unknown failure when fetching URL: ' + load.address))
 82 |       })
 83 | 
 84 |       link.addEventListener('load', function() {
 85 |         // One problem with the module loader spec is that the `instantiate`
 86 |         // step does not support asynchronous execution. We want that, so that
 87 |         // we can ensure that any async-executed scripts in the document defer
 88 |         // its load (also so we can extract exports from them).
 89 |         //
 90 |         // Thus, we perform any async logic during load to emulate that (if
 91 |         // scoped scripts are enabled).
 92 |         var runScripts = scope.runScopedScripts && scope.runScopedScripts(link.import) || Promise.resolve()
 93 |         runScripts.then(function() {
 94 |           // Another difficulty of the module loader spec is that it rightfully
 95 |           // assumes that all sources are a `String`. Because we completely skip
 96 |           // over raw source, we need to be a little more crafty by placing the
 97 |           // real source in a side channel.
 98 |           load.metadata.importedHTMLDocument = link.import
 99 |           // And then, to appease the spec/SystemJS, we provide a dummy value for
100 |           // `source`.
101 |           resolve('')
102 |         })
103 |       })
104 |     })
105 |   }
106 | 
107 |   // ## `LoaderHooks.instantiate`
108 | 
109 |   // Once we have a document fetched via HTML imports, we can extract the
110 |   // its dependencies and exported values.
111 |   //
112 |   // However, it is worth noting that we gain the same document semantics as
113 |   // HTML imports: stylesheets are merged into the root document, scripts
114 |   // evaluate globally, etc. Good for simplifying code, not great for scoping.
115 |   //
116 |   // Furthermore, imports are not considered loaded until all of their linked
117 |   // dependencies (stylesheets, scripts, etc) have also loaded. This makes
118 |   // prefetching declared module dependencies difficult/impossible.
119 |   LoaderHooks.instantiate = function instantiateHTML(load) {
120 |     var doc = load.metadata.importedHTMLDocument
121 |     if (!doc) {
122 |       throw new Error('HTMLExports bug: Expected fetched Document in metadata')
123 |     }
124 | 
125 |     return {
126 |       deps: scope.depsFor(doc).map(function(d) { return d.name }),
127 |       execute: function executeHTML() {
128 |         return this.newModule(scope.exportsFor(doc))
129 |       }.bind(this),
130 |     }
131 |   }
132 | 
133 |   // ## Document Processing
134 | 
135 |   // ### `HTMLExports.depsFor`
136 | 
137 |   // HTML modules can declare dependencies on any other modules via the `import`
138 |   // element:
139 |   //
140 |   // ```html
141 |   // <import src="some-module">
142 |   // ```
143 |   scope.depsFor = function depsFor(document) {
144 |     var declaredDependencies = document.querySelectorAll('import[src]')
145 |     return Array.prototype.map.call(declaredDependencies, function(importNode) {
146 |       // Much like ES6's import syntax, you can also choose which exported
147 |       // values to bring into scope, and rename them.
148 |       var aliases = {}
149 |       // The default export can be imported via the `as` attribute:
150 |       //
151 |       // ```html
152 |       // <import src="jQuery" as="$">
153 |       // ```
154 |       if (importNode.hasAttribute('as')) {
155 |         aliases.default = importNode.getAttribute('as')
156 |       }
157 |       // Named exports can be imported via the `values` attribute (space
158 |       // separated).
159 |       //
160 |       // ```html
161 |       // <import src="lodash" values="compact">
162 |       // ```
163 |       if (importNode.hasAttribute('values')) {
164 |         importNode.getAttribute('values').split(/\s+/).forEach(function(key) {
165 |           if (key === '') return
166 |           aliases[key] = key
167 |         })
168 |       }
169 | 
170 |       // Each dependency returned is an object with:
171 |       return {
172 |         // * `name`: The declared name; you may want to `normalize` it.
173 |         name: importNode.getAttribute('src'),
174 |         // * `aliases`: A map of exported values to the keys they should be
175 |         //              exposed as.
176 |         aliases: aliases,
177 |         // * `source`: Source element, to aid in debugging. Expect a beating if
178 |         //             you leak this!
179 |         source: importNode,
180 |       }
181 |     })
182 |   }
183 | 
184 |   // ### `HTMLExports.exportsFor`
185 | 
186 |   // HTML modules can export elements that are tagged with `export`.
187 |   scope._exportTuplesFor = function _exportTuplesFor(document) {
188 |     //- We collect [key, value, source] and then flatten at the end.
189 |     var valueTuples = []
190 |     // They can either be named elements (via `id`), such as:
191 |     //
192 |     // ```html
193 |     // <div export id="foo">...</div>
194 |     // ```
195 |     var exportedNodes = document.querySelectorAll('[export][id]')
196 |     for (var i = 0, node; node = exportedNodes[i]; i++) {
197 |       valueTuples.push([node.getAttribute('id'), node, node])
198 |     }
199 | 
200 |     // Or they can be the default export when tagged with `default`:
201 |     //
202 |     // ```html
203 |     // <div export default>...</div>
204 |     // ```
205 |     var defaultNodes = document.querySelectorAll('[export][default]')
206 |     if (defaultNodes.length > 1) {
207 |       throw new Error('Only one default export is allowed per document')
208 |     } else if (defaultNodes.length === 1) {
209 |       valueTuples.push(['default', defaultNodes[0], defaultNodes[0]])
210 |     // Otherwise, the default export will be the document.
211 |     } else {
212 |       valueTuples.push(['default', document, document])
213 |     }
214 | 
215 |     // Furthermore, values exported by `<script type="scoped">` blocks are also
216 |     // exported via the document. This depends on `HTMLExports.runScopedScripts`
217 |     // having been run already.
218 |     var scopedScripts = document.querySelectorAll('script[type="scoped"]')
219 |     for (i = 0; node = scopedScripts[i]; i++) {
220 |       if (!node.exports) continue;
221 |       var keys = Object.keys(node.exports)
222 |       for (var j = 0, key; key = keys[j]; j++) {
223 |         valueTuples.push([key, node.exports[key], node])
224 |       }
225 |     }
226 | 
227 |     return valueTuples
228 |   }
229 | 
230 |   scope.exportsFor = function exportsFor(document) {
231 |     return scope._util.flattenValueTuples(scope._exportTuplesFor(document), ['default'])
232 |   }
233 | 
234 |   // ## Internal Implementation
235 | 
236 |   function _newDynamicImport(address) {
237 |     var link = document.createElement('link')
238 |     link.setAttribute('rel', 'import')
239 |     link.setAttribute('href', address)
240 |     link.setAttribute('module', '')  // Annotate the link for debugability.
241 | 
242 |     document.head.appendChild(link)
243 | 
244 |     return link
245 |   }
246 | 
247 | })(this.HTMLExports = this.HTMLExports || {})
248 | 
249 | // # SystemJS Plugin
250 | 
251 | // Note that there is an assumption that `HTMLExports.LoaderHooks` exists in the
252 | // scope (which is taken care of by the build process).
253 | var LoaderHooks = this.HTMLExports.LoaderHooks
254 | 
255 | Object.keys(LoaderHooks).forEach(function(hookName) {
256 |   exports[hookName] = LoaderHooks[hookName]
257 | })
258 | 
259 | // SystemJS' plugin interface has a slightly different interface for the
260 | // `instantiate` hook. It expects the module to be directly returned:
261 | exports.instantiate = function instantiateHTML() {
262 |   return LoaderHooks.instantiate.apply(this, arguments).execute()
263 | }
264 | 


--------------------------------------------------------------------------------
/dist/sysjs-plugin/html.min.js:
--------------------------------------------------------------------------------
1 | !function(t){"use strict";function e(t,e){var r=t.filter(function(t){return t[0]===e}).map(function(t){return t[2]});console.warn.apply(console,['Multiple values named "'+e+'" were evaluated:'].concat(r))}var r={};t._util=r,t._util.flattenValueTuples=function(t,r){for(var o,n={},u=[],a=0;o=t[a];a++){var i=o[0];i in n&&(!r||-1===r.indexOf(i))&&u.push(i),n[i]=o[1]}return u.length&&u.forEach(e.bind(null,t)),n}}(this.HTMLExports=this.HTMLExports||{}),function(t){"use strict";function e(t){var e=document.createElement("link");return e.setAttribute("rel","import"),e.setAttribute("href",t),e.setAttribute("module",""),document.head.appendChild(e),e}var r={};t.LoaderHooks=r,r.fetch=function(r){return new Promise(function(o,n){var u=e(r.address);u.addEventListener("error",function(){n(new Error("Unknown failure when fetching URL: "+r.address))}),u.addEventListener("load",function(){var e=t.runScopedScripts&&t.runScopedScripts(u.import)||Promise.resolve();e.then(function(){r.metadata.importedHTMLDocument=u.import,o("")})})})},r.instantiate=function(e){var r=e.metadata.importedHTMLDocument;if(!r)throw new Error("HTMLExports bug: Expected fetched Document in metadata");return{deps:t.depsFor(r).map(function(t){return t.name}),execute:function(){return this.newModule(t.exportsFor(r))}.bind(this)}},t.depsFor=function(t){var e=t.querySelectorAll("import[src]");return Array.prototype.map.call(e,function(t){var e={};return t.hasAttribute("as")&&(e.default=t.getAttribute("as")),t.hasAttribute("values")&&t.getAttribute("values").split(/\s+/).forEach(function(t){""!==t&&(e[t]=t)}),{name:t.getAttribute("src"),aliases:e,source:t}})},t._exportTuplesFor=function(t){for(var e,r=[],o=t.querySelectorAll("[export][id]"),n=0;e=o[n];n++)r.push([e.getAttribute("id"),e,e]);var u=t.querySelectorAll("[export][default]");if(u.length>1)throw new Error("Only one default export is allowed per document");r.push(1===u.length?["default",u[0],u[0]]:["default",t,t]);var a=t.querySelectorAll('script[type="scoped"]');for(n=0;e=a[n];n++)if(e.exports)for(var i,s=Object.keys(e.exports),l=0;i=s[l];l++)r.push([i,e.exports[i],e]);return r},t.exportsFor=function(e){return t._util.flattenValueTuples(t._exportTuplesFor(e),["default"])}}(this.HTMLExports=this.HTMLExports||{});var LoaderHooks=this.HTMLExports.LoaderHooks;Object.keys(LoaderHooks).forEach(function(t){exports[t]=LoaderHooks[t]}),exports.instantiate=function(){return LoaderHooks.instantiate.apply(this,arguments).execute()};


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
  1 | var _         = require('lodash')
  2 | var concat    = require('gulp-concat')
  3 | var groc      = require('gulp-groc')
  4 | var gulp      = require('gulp')
  5 | var jshint    = require('gulp-jshint')
  6 | var notify    = require('gulp-notify')
  7 | var path      = require('path')
  8 | var rename    = require('gulp-rename')
  9 | var replace   = require('gulp-replace')
 10 | var uglify    = require('gulp-uglify')
 11 | var webserver = require('gulp-webserver')
 12 | 
 13 | var ALL_SOURCES  = ['gulpfile.js', '{demo,src,test}/**/*.{html,js}']
 14 | var MAIN_SOURCES = ['src/**/*.js']
 15 | var PROJECT_ROOT = __dirname
 16 | 
 17 | var BUILD_VARIATIONS = {
 18 |   main: {
 19 |     sources:  ['src/util.js', 'src/loaderhooks.js', 'src/documentloader.js', 'src/scopedscript.js', 'src/system.js'],
 20 |     destBase: './dist/html-exports',
 21 |   },
 22 |   sysjs: {
 23 |     sources:  ['src/util.js', 'src/loaderhooks.js', 'src/sysjs-plugin.js'],
 24 |     destBase: './dist/sysjs-plugin/html',
 25 |   },
 26 | }
 27 | 
 28 | // Tasks
 29 | 
 30 | require('web-component-tester').gulp.init(gulp);
 31 | gulp.task('default', ['watch', 'build', 'test:style', 'doc'])
 32 | gulp.task('test',    ['test:style', 'test:local'])
 33 | 
 34 | gulp.task('watch', function() {
 35 |   watching = true
 36 |   return gulp.watch(ALL_SOURCES, {debounceDelay: 10}, ['test:style', 'build', 'doc'])
 37 | })
 38 | 
 39 | gulp.task('demo', ['build'], function() {
 40 |   return gulp.src('.')
 41 |     .pipe(webserver({
 42 |       livereload: true,
 43 |       open:       '/demo/',
 44 |     }))
 45 | })
 46 | 
 47 | gulp.task('doc', function() {
 48 |   return gulp.src('src/**/*.js')
 49 |     .pipe(groc())
 50 | })
 51 | 
 52 | gulp.task('test:style', function() {
 53 |   return gulp.src(MAIN_SOURCES)
 54 |     .pipe(jshint.extract('auto'))
 55 |     .pipe(jshint())
 56 |     .pipe(jshint.reporter('jshint-stylish'))
 57 |     .pipe(jshint.reporter('fail'))
 58 |     .on('error', onError)
 59 | })
 60 | 
 61 | // Build Variations
 62 | 
 63 | _.each(BUILD_VARIATIONS, function(config, name) {
 64 |   var targetBase = 'build:' + name
 65 |   function target(kind) {
 66 |     return targetBase + ':' + kind
 67 |   }
 68 | 
 69 |   function dest(kind) {
 70 |     return config.destBase + (kind === 'release' ? '' : '.' + kind) + '.js'
 71 |   }
 72 | 
 73 |   gulp.task(targetBase, [target('debug'), target('release'), target('min')])
 74 | 
 75 |   gulp.task(target('debug'), function() {
 76 |     return gulp.src(config.sources)
 77 |       .pipe(concat(dest('debug')))
 78 |       .pipe(gulp.dest('.'))
 79 |   })
 80 | 
 81 |   gulp.task(target('release'), [target('debug')], function() {
 82 |     return gulp.src([dest('debug')])
 83 |       .pipe(replace(/\n\s*console.(debug|assert)[^\n]+/g, ''))
 84 |       .pipe(rename(dest('release')))
 85 |       .pipe(gulp.dest('.'))
 86 |   })
 87 | 
 88 |   gulp.task(target('min'), [target('release')], function() {
 89 |     return gulp.src([dest('release')])
 90 |       .pipe(uglify())
 91 |       .pipe(rename(dest('min')))
 92 |       .pipe(gulp.dest('.'))
 93 |   })
 94 | })
 95 | 
 96 | var variations = _.keys(BUILD_VARIATIONS)
 97 | gulp.task('build',         _.map(variations, function(v) { return 'build:' + v }))
 98 | gulp.task('build:debug',   _.map(variations, function(v) { return 'build:' + v + ':debug' }))
 99 | gulp.task('build:release', _.map(variations, function(v) { return 'build:' + v + ':release' }))
100 | gulp.task('build:min',     _.map(variations, function(v) { return 'build:' + v + ':min' }))
101 | 
102 | // Pretty errors for our various tasks.
103 | 
104 | var watching = false
105 | 
106 | function onError(error) {
107 |   if (watching) {
108 |     var message = error.message.replace(new RegExp(PROJECT_ROOT + path.sep, 'g'), '')
109 |     notify.onError(message)(this)
110 |   }
111 | }
112 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "html-exports",
 3 |   "devDependencies": {
 4 |     "es6-module-loader": "*",
 5 |     "gulp": "^3.8.10",
 6 |     "gulp-concat": "^2.4.2",
 7 |     "gulp-groc": "nevir/gulp-groc#master",
 8 |     "gulp-jshint": "^1.9.0",
 9 |     "gulp-notify": "^2.0.1",
10 |     "gulp-rename": "^1.2.0",
11 |     "gulp-replace": "^0.5.0",
12 |     "gulp-uglify": "^1.0.2",
13 |     "gulp-webserver": "^0.8.7",
14 |     "jshint-stylish": "^1.0.0",
15 |     "lazypipe": "^0.2.2",
16 |     "lodash": "^2.4.1",
17 |     "systemjs": "*",
18 |     "traceur": "*",
19 |     "web-component-tester": "*",
20 |     "webcomponents.js": "^0.5.1-1"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/src/documentloader.js:
--------------------------------------------------------------------------------
 1 | // # DocumentLoader
 2 | 
 3 | ;(function(scope) {
 4 |   'use strict'
 5 | 
 6 |   scope.DocumentLoader = DocumentLoader
 7 | 
 8 |   // `HTMLExports.DocumentLoader` is a module loader that loads any modules with
 9 |   // a `.html` extension as a HTML module. See [`HTMLExports.LoaderHooks`](loaderhooks.html)
10 |   // for the underlying behavior.
11 |   function DocumentLoader(options) {
12 |     Reflect.Loader.call(this, options || {})
13 |   }
14 |   DocumentLoader.prototype = Object.create(Reflect.Loader.prototype)
15 | 
16 |   // ### `DocumentLoader.mixin`
17 | 
18 |   // Rather than instantiating and managing a `DocumentLoader` directly, you
19 |   // will frequently want to mix `DocumentLoader`'s behavior into an existing
20 |   // loader.
21 |   //
22 |   // For example, to override the default system loader:
23 |   //
24 |   // ```js
25 |   // HTMLExports.DocumentLoader.mixin(System)
26 |   // ```
27 |   //
28 |   DocumentLoader.mixin = function mixin(loader) {
29 |     console.debug('DocumentLoader.mixin(', loader, ')')
30 | 
31 |     Object.keys(scope.LoaderHooks).forEach(function(hookName) {
32 |       console.assert(hookName !== 'normalize', 'only supports hooks that accept a load record')
33 | 
34 |       var htmlHook   = scope.LoaderHooks[hookName]
35 |       var parentHook = loader[hookName]
36 |       loader[hookName] = function(load) {
37 |         return (_isHtml(load) ? htmlHook : parentHook).apply(this, arguments)
38 |       }
39 |     })
40 | 
41 |     // If the author is using es6-module-loader or SystemJS, an entry is added
42 |     // to their `paths` property so that `.html` addresses are not resolved as
43 |     // `.html.js`.
44 |     if (loader.paths) {
45 |       loader.paths['*.html'] = '*.html'
46 |     }
47 |   }
48 | 
49 |   DocumentLoader.mixin(DocumentLoader.prototype)
50 | 
51 |   // ## Internal Implementation
52 | 
53 |   // Any module with an extension of `.html` is assumed to represent a HTML
54 |   // document.
55 |   //
56 |   // We cannot perform any smarter heuristics (such as checking content type),
57 |   // as this check is performed before the `fetch` step completes.
58 |   function _isHtml(load) {
59 |     var path = load.address || load.name
60 |     return path && path.slice(-5) === '.html'
61 |   }
62 | 
63 | })(this.HTMLExports = this.HTMLExports || {})
64 | 


--------------------------------------------------------------------------------
/src/loaderhooks.js:
--------------------------------------------------------------------------------
  1 | // # LoaderHooks
  2 | 
  3 | // `HTMLExports.LoaderHooks` is a mixable map of loader hooks that provide the
  4 | // underlying behavior for loading HTML documents as modules.
  5 | //
  6 | // These hooks are designed to be consumed via various interfaces:
  7 | //
  8 | //  * They are indirectly mixed into [`DocumentLoader`](documentloader.html).
  9 | //
 10 | //  * They can be mixed into any existing loader via [`DocumentLoader.mixin`](documentloader.html#-documentloader-mixin-).
 11 | //
 12 | //  * They can be used via a [SystemJS plugin](sysjs-plugin.html).
 13 | //
 14 | ;(function(scope) {
 15 |   'use strict'
 16 | 
 17 |   var LoaderHooks = {}
 18 |   scope.LoaderHooks = LoaderHooks
 19 | 
 20 |   // ## `LoaderHooks.fetch`
 21 | 
 22 |   // Documents are fetched via a dynamic HTML import. This ensures that the
 23 |   // document's linked resources (stylesheets, scripts, etc) are also properly
 24 |   // loaded.
 25 |   //
 26 |   // The alternative would be for us to fetch document source and construct/load
 27 |   // HTML documents ourselves. This becomes rather complex, and would end up
 28 |   // duplicating much of the logic expressed by the HTML Imports polyfill.
 29 |   LoaderHooks.fetch = function fetchHTML(load) {
 30 |     console.debug('HTMLExports.LoaderHooks.fetch(', load, ')')
 31 | 
 32 |     return new Promise(function(resolve, reject) {
 33 |       var link = _newDynamicImport(load.address)
 34 | 
 35 |       link.addEventListener('error', function() {
 36 |         reject(new Error('Unknown failure when fetching URL: ' + load.address))
 37 |       })
 38 | 
 39 |       link.addEventListener('load', function() {
 40 |         // One problem with the module loader spec is that the `instantiate`
 41 |         // step does not support asynchronous execution. We want that, so that
 42 |         // we can ensure that any async-executed scripts in the document defer
 43 |         // its load (also so we can extract exports from them).
 44 |         //
 45 |         // Thus, we perform any async logic during load to emulate that (if
 46 |         // scoped scripts are enabled).
 47 |         var runScripts = scope.runScopedScripts && scope.runScopedScripts(link.import) || Promise.resolve()
 48 |         runScripts.then(function() {
 49 |           // Another difficulty of the module loader spec is that it rightfully
 50 |           // assumes that all sources are a `String`. Because we completely skip
 51 |           // over raw source, we need to be a little more crafty by placing the
 52 |           // real source in a side channel.
 53 |           load.metadata.importedHTMLDocument = link.import
 54 |           // And then, to appease the spec/SystemJS, we provide a dummy value for
 55 |           // `source`.
 56 |           resolve('')
 57 |         })
 58 |       })
 59 |     })
 60 |   }
 61 | 
 62 |   // ## `LoaderHooks.instantiate`
 63 | 
 64 |   // Once we have a document fetched via HTML imports, we can extract the
 65 |   // its dependencies and exported values.
 66 |   //
 67 |   // However, it is worth noting that we gain the same document semantics as
 68 |   // HTML imports: stylesheets are merged into the root document, scripts
 69 |   // evaluate globally, etc. Good for simplifying code, not great for scoping.
 70 |   //
 71 |   // Furthermore, imports are not considered loaded until all of their linked
 72 |   // dependencies (stylesheets, scripts, etc) have also loaded. This makes
 73 |   // prefetching declared module dependencies difficult/impossible.
 74 |   LoaderHooks.instantiate = function instantiateHTML(load) {
 75 |     console.debug('HTMLExports.LoaderHooks.instantiate(', load, ')')
 76 |     var doc = load.metadata.importedHTMLDocument
 77 |     if (!doc) {
 78 |       throw new Error('HTMLExports bug: Expected fetched Document in metadata')
 79 |     }
 80 | 
 81 |     return {
 82 |       deps: scope.depsFor(doc).map(function(d) { return d.name }),
 83 |       execute: function executeHTML() {
 84 |         return this.newModule(scope.exportsFor(doc))
 85 |       }.bind(this),
 86 |     }
 87 |   }
 88 | 
 89 |   // ## Document Processing
 90 | 
 91 |   // ### `HTMLExports.depsFor`
 92 | 
 93 |   // HTML modules can declare dependencies on any other modules via the `import`
 94 |   // element:
 95 |   //
 96 |   // ```html
 97 |   // <import src="some-module">
 98 |   // ```
 99 |   scope.depsFor = function depsFor(document) {
100 |     var declaredDependencies = document.querySelectorAll('import[src]')
101 |     return Array.prototype.map.call(declaredDependencies, function(importNode) {
102 |       // Much like ES6's import syntax, you can also choose which exported
103 |       // values to bring into scope, and rename them.
104 |       var aliases = {}
105 |       // The default export can be imported via the `as` attribute:
106 |       //
107 |       // ```html
108 |       // <import src="jQuery" as="$">
109 |       // ```
110 |       if (importNode.hasAttribute('as')) {
111 |         aliases.default = importNode.getAttribute('as')
112 |       }
113 |       // Named exports can be imported via the `values` attribute (space
114 |       // separated).
115 |       //
116 |       // ```html
117 |       // <import src="lodash" values="compact">
118 |       // ```
119 |       if (importNode.hasAttribute('values')) {
120 |         importNode.getAttribute('values').split(/\s+/).forEach(function(key) {
121 |           if (key === '') return
122 |           aliases[key] = key
123 |         })
124 |       }
125 | 
126 |       // Each dependency returned is an object with:
127 |       return {
128 |         // * `name`: The declared name; you may want to `normalize` it.
129 |         name: importNode.getAttribute('src'),
130 |         // * `aliases`: A map of exported values to the keys they should be
131 |         //              exposed as.
132 |         aliases: aliases,
133 |         // * `source`: Source element, to aid in debugging. Expect a beating if
134 |         //             you leak this!
135 |         source: importNode,
136 |       }
137 |     })
138 |   }
139 | 
140 |   // ### `HTMLExports.exportsFor`
141 | 
142 |   // HTML modules can export elements that are tagged with `export`.
143 |   scope._exportTuplesFor = function _exportTuplesFor(document) {
144 |     //- We collect [key, value, source] and then flatten at the end.
145 |     var valueTuples = []
146 |     // They can either be named elements (via `id`), such as:
147 |     //
148 |     // ```html
149 |     // <div export id="foo">...</div>
150 |     // ```
151 |     var exportedNodes = document.querySelectorAll('[export][id]')
152 |     for (var i = 0, node; node = exportedNodes[i]; i++) {
153 |       valueTuples.push([node.getAttribute('id'), node, node])
154 |     }
155 | 
156 |     // Or they can be the default export when tagged with `default`:
157 |     //
158 |     // ```html
159 |     // <div export default>...</div>
160 |     // ```
161 |     var defaultNodes = document.querySelectorAll('[export][default]')
162 |     if (defaultNodes.length > 1) {
163 |       throw new Error('Only one default export is allowed per document')
164 |     } else if (defaultNodes.length === 1) {
165 |       valueTuples.push(['default', defaultNodes[0], defaultNodes[0]])
166 |     // Otherwise, the default export will be the document.
167 |     } else {
168 |       valueTuples.push(['default', document, document])
169 |     }
170 | 
171 |     // Furthermore, values exported by `<script type="scoped">` blocks are also
172 |     // exported via the document. This depends on `HTMLExports.runScopedScripts`
173 |     // having been run already.
174 |     var scopedScripts = document.querySelectorAll('script[type="scoped"]')
175 |     for (i = 0; node = scopedScripts[i]; i++) {
176 |       if (!node.exports) continue;
177 |       var keys = Object.keys(node.exports)
178 |       for (var j = 0, key; key = keys[j]; j++) {
179 |         valueTuples.push([key, node.exports[key], node])
180 |       }
181 |     }
182 | 
183 |     return valueTuples
184 |   }
185 | 
186 |   scope.exportsFor = function exportsFor(document) {
187 |     return scope._util.flattenValueTuples(scope._exportTuplesFor(document), ['default'])
188 |   }
189 | 
190 |   // ## Internal Implementation
191 | 
192 |   function _newDynamicImport(address) {
193 |     var link = document.createElement('link')
194 |     link.setAttribute('rel', 'import')
195 |     link.setAttribute('href', address)
196 |     link.setAttribute('module', '')  // Annotate the link for debugability.
197 | 
198 |     document.head.appendChild(link)
199 | 
200 |     return link
201 |   }
202 | 
203 | })(this.HTMLExports = this.HTMLExports || {})
204 | 


--------------------------------------------------------------------------------
/src/scopedscript.js:
--------------------------------------------------------------------------------
  1 | // # Scoped Scripts
  2 | 
  3 | ;(function(scope) {
  4 |   'use strict'
  5 | 
  6 |   // ### `HTMLExports.runScopedScripts`
  7 | 
  8 |   // Processes any scoped scripts, and executes them after all declared imports
  9 |   // within a document have loaded.
 10 |   scope.runScopedScripts = function runScopedScripts(document) {
 11 |     return new Promise(function(resolve, reject) {
 12 |       var deps     = scope.depsFor(document)
 13 |       var options  = {name: document.baseURI || document.location.pathname}
 14 |       var promises = deps.map(function(dep) {
 15 |         return System.import(dep.name, options)
 16 |       })
 17 |       Promise.all(promises).then(function(allExports) {
 18 |         _fireEvent(document, 'DeclaredImportsLoaded')
 19 | 
 20 |         // A scoped script can be declared as:
 21 |         //
 22 |         // ```html
 23 |         // <script type="scoped">...</script>
 24 |         // ```
 25 |         var scripts = document.querySelectorAll('script[type="scoped"]')
 26 |         if (!scripts.length) { return resolve() }
 27 | 
 28 |         var exportMap = _resolveExports(allExports, deps, document)
 29 |         try {
 30 |           for (var i = 0, script; script = scripts[i]; i++) {
 31 |             _executeScript(exportMap, script)
 32 |           }
 33 |         // If any scripts fail to execute, we fail the entire load.
 34 |         } catch (error) {
 35 |           reject(error)
 36 |         }
 37 | 
 38 |         resolve()
 39 |       })
 40 |     })
 41 |   }
 42 | 
 43 |   // ## Internal Implementation
 44 | 
 45 |   // After we have loaded all the declared imports for a particular document,
 46 |   // we need to flatten the imported values into a set of (aliased) keys and
 47 |   // their values.
 48 |   function _resolveExports(allExports, deps, document) {
 49 |     console.assert(allExports.length === deps.length, 'declared dependencies do not match loaded exports')
 50 |     var valueTuples = []
 51 |     for (var i = 0, dep; dep = deps[i]; i++) {
 52 |       var keys = Object.keys(dep.aliases)
 53 |       for (var j = 0, key; key = keys[j]; j++) {
 54 |         var alias = dep.aliases[key]
 55 |         if (!(key in allExports[i])) {
 56 |           console.warn('"' + key + '" was requested, but not exported from "' + dep.name + '".', dep.source)
 57 |         }
 58 |         valueTuples.push([alias, allExports[i][key], dep.source])
 59 |       }
 60 |     }
 61 | 
 62 |     // As a convenience, we also expose values exported by the current document.
 63 |     valueTuples = valueTuples.concat(scope._exportTuplesFor(document))
 64 |     var exportMap = scope._util.flattenValueTuples(valueTuples)
 65 |     // We have to be careful not to expose the document's default value though.
 66 |     delete exportMap.default
 67 | 
 68 |     return exportMap
 69 |   }
 70 | 
 71 |   // After all the imported values are flattened and validated, it is time to
 72 |   // execute the scoped scripts within the document.
 73 |   function _executeScript(exportMap, script) {
 74 |     // Scoped scripts follow the same lifecycle events as a regular `<script>`
 75 |     // element. See http://www.w3.org/TR/html5/scripting-1.html
 76 |     if (!_fireEvent(script, 'beforescriptexecute', true, true)) {
 77 |       // You can cancel a scoped script by canceling `beforescriptexecute`.
 78 |       console.debug('scoped script', script, 'was canceled')
 79 |       return
 80 |     } else {
 81 |       console.debug('executing scoped script', script, 'scoped imports:', exportMap)
 82 |     }
 83 | 
 84 |     var keys   = Object.keys(exportMap)
 85 |     var values = keys.map(function(k) { return exportMap[k] })
 86 |     // We support CommonJS style exports for scoped scripts. Ideally, we'd be
 87 |     // reusing `System.module`, but there doesn't appear to be a clean way of
 88 |     // also supporting scoped imports via that mechanism.
 89 |     if ('exports' in exportMap || 'module' in exportMap) {
 90 |       throw new Error('"exports" and "module" are reserved names for scoped scripts')
 91 |     }
 92 |     keys.push('exports', 'module')
 93 |     values.push({})
 94 |     values.push({exports: values[values.length - 1]})
 95 |     var module = values[values.length - 1]
 96 | 
 97 |     // Scoped scripts are evaluated in strict mode. It's the future!
 98 |     var source = '"use strict";\n' + script.textContent
 99 | 
100 |     // Currently, each script gets its own closure that includes any scoped
101 |     // values imported by the document's declare imports. This also acts as a
102 |     // convenient sandbox for scripts.
103 |     try {
104 |       var func = Function.apply(null, keys.concat([source]))
105 |       func.apply(null, values)
106 |     } catch (error) {
107 |       console.error(
108 |         'Failure executing scoped script:', error.message, '\n',
109 |         'Imported values:', exportMap, '\n',
110 |         'Script body:', source, '\n')
111 |       throw error
112 |     } finally {
113 |       // Once a script has executed (for better or worse), we fire script
114 |       // lifecycle events. Interestingly, the spec (and native impls) do not
115 |       // appear to fire an `error` event for scripting errors, so we omit that.
116 |       //
117 |       // See http://www.w3.org/TR/html5/scripting-1.html for behavior.
118 |       _fireEvent(script, 'afterscriptexecute', true)
119 |       setTimeout(function() { _fireEvent(script, 'load') }, 0)
120 |     }
121 | 
122 |     // Once a scoped script has run, its exports are exposed via the `exports`
123 |     // property on the script's element.
124 |     script.exports = module.exports
125 |   }
126 | 
127 |   function _fireEvent(node, eventName, bubble, cancelable) {
128 |     var event = new Event(eventName)
129 |     event.bubbles    = !!bubble
130 |     event.cancelable = !!cancelable
131 |     return node.dispatchEvent(event)
132 |   }
133 | 
134 | })(this.HTMLExports = this.HTMLExports || {})
135 | 


--------------------------------------------------------------------------------
/src/sysjs-plugin.js:
--------------------------------------------------------------------------------
 1 | // # SystemJS Plugin
 2 | 
 3 | // Note that there is an assumption that `HTMLExports.LoaderHooks` exists in the
 4 | // scope (which is taken care of by the build process).
 5 | var LoaderHooks = this.HTMLExports.LoaderHooks
 6 | 
 7 | Object.keys(LoaderHooks).forEach(function(hookName) {
 8 |   exports[hookName] = LoaderHooks[hookName]
 9 | })
10 | 
11 | // SystemJS' plugin interface has a slightly different interface for the
12 | // `instantiate` hook. It expects the module to be directly returned:
13 | exports.instantiate = function instantiateHTML() {
14 |   return LoaderHooks.instantiate.apply(this, arguments).execute()
15 | }
16 | 


--------------------------------------------------------------------------------
/src/system.js:
--------------------------------------------------------------------------------
 1 | // # Global Behavior
 2 | ;(function(scope) {
 3 |   'use strict'
 4 | 
 5 |   // When HTML Exports is used normally, it is mixed into the `System` loader.
 6 |   scope.DocumentLoader.mixin(System)
 7 | 
 8 |   //
 9 |   document.addEventListener('DOMContentLoaded', function() {
10 |     scope.runScopedScripts(document)
11 |   })
12 | 
13 | })(this.HTMLExports = this.HTMLExports || {})
14 | 


--------------------------------------------------------------------------------
/src/util.js:
--------------------------------------------------------------------------------
 1 | // # Internal Helpers
 2 | 
 3 | ;(function(scope) {
 4 |   'use strict'
 5 | 
 6 |   var _util = {}
 7 |   scope._util = _util
 8 | 
 9 |   // ## `flattenValueTuples`
10 | 
11 |   // After collecting value tuples ([key, value, source]), we can flatten them
12 |   // into an value map, and also warn about any masked values.
13 |   scope._util.flattenValueTuples = function flattenValueTuples(valueTuples, ignore) {
14 |     var valueMap = {}
15 |     var masked   = []
16 |     for (var i = 0, tuple; tuple = valueTuples[i]; i++) {
17 |       var key = tuple[0]
18 |       if (key in valueMap && (!ignore || ignore.indexOf(key) === -1)) {
19 |         masked.push(key)
20 |       }
21 |       valueMap[key] = tuple[1]
22 |     }
23 | 
24 |     if (masked.length) {
25 |       masked.forEach(_warnMaskedValues.bind(null, valueTuples))
26 |     }
27 | 
28 |     return valueMap
29 |   }
30 | 
31 |   // It's important that we give authors as much info as possible to diagnose
32 |   // any problems with their source. So, we spend a bit of computational effort
33 |   // whenever values are masked (imports, exports, etc).
34 |   function _warnMaskedValues(valueTuples, key) {
35 |     var conflicting = valueTuples.filter(function(tuple) {
36 |       return tuple[0] === key
37 |     }).map(function(tuple) {
38 |       return tuple[2]
39 |     })
40 |     console.warn.apply(console,
41 |       ['Multiple values named "' + key + '" were evaluated:'].concat(conflicting)
42 |     )
43 |   }
44 | 
45 | })(this.HTMLExports = this.HTMLExports || {})
46 | 


--------------------------------------------------------------------------------
/test/fixtures/foo.js:
--------------------------------------------------------------------------------
1 | export default 'I am Foo'
2 | export var bar = 'I am Foo Bar'
3 | export var baz = 'I am Foo Baz'
4 | 


--------------------------------------------------------------------------------
/test/fixtures/nameddefault.html:
--------------------------------------------------------------------------------
1 | <span export default id="foo">bar</span>
2 | <span default>nope</span>
3 | 


--------------------------------------------------------------------------------
/test/fixtures/resources.html:
--------------------------------------------------------------------------------
 1 | <span export id="sentinel">loaded</span>
 2 | 
 3 | <script src="resources/script.js"></script>
 4 | 
 5 | <link export id="linkedstyle" rel="stylesheet" href="resources/style-link.css">
 6 | 
 7 | <style export id="importedstyle">
 8 | @import url("resources/style-import.css")
 9 | </style>
10 | 
11 | <link rel="import" href="resources/import.html">
12 | 


--------------------------------------------------------------------------------
/test/fixtures/resources/import.html:
--------------------------------------------------------------------------------
1 | <script>
2 | window.IMPORT_FIXTURE_LOADED = true
3 | </script>
4 | 


--------------------------------------------------------------------------------
/test/fixtures/resources/script.js:
--------------------------------------------------------------------------------
1 | window.SCRIPT_FIXTURE_LOADED = true
2 | 


--------------------------------------------------------------------------------
/test/fixtures/resources/style-import-nested.css:
--------------------------------------------------------------------------------
1 | .fixture-target {padding-bottom: 3px;}
2 | 


--------------------------------------------------------------------------------
/test/fixtures/resources/style-import.css:
--------------------------------------------------------------------------------
1 | .fixture-target {padding-right: 2px;}
2 | 


--------------------------------------------------------------------------------
/test/fixtures/resources/style-link.css:
--------------------------------------------------------------------------------
1 | @import "style-import-nested.css";
2 | 
3 | .fixture-target {padding-top: 1px;}
4 | 


--------------------------------------------------------------------------------
/test/fixtures/scoped.html:
--------------------------------------------------------------------------------
1 | <import src="./foo" as="MegaFoo" values="bar baz">
2 | 
3 | <script type="scoped">
4 |   _importedScript.MegaFoo = MegaFoo
5 |   _importedScript.bar     = bar
6 |   _importedScript.baz     = baz
7 | </script>
8 | 


--------------------------------------------------------------------------------
/test/fixtures/scopedexport.html:
--------------------------------------------------------------------------------
1 | <script type="scoped">
2 | exports.stuff = 1
3 | </script>
4 | 
5 | <script type="scoped">
6 | exports.things = 2
7 | </script>
8 | 


--------------------------------------------------------------------------------
/test/fixtures/simpledefault.html:
--------------------------------------------------------------------------------
1 | <span export default>fizz</span>
2 | <span default>nope</span>
3 | 


--------------------------------------------------------------------------------
/test/fixtures/words.html:
--------------------------------------------------------------------------------
1 | <span export id="one">Lorem</span>
2 | <span export id="two">ipsum</span>
3 | <span id="three">dolor</span>
4 | 


--------------------------------------------------------------------------------
/test/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <script src="../node_modules/webcomponents.js/webcomponents.js"></script>
 6 |   <script src="../node_modules/web-component-tester/browser.js"></script>
 7 |   <script src="../node_modules/es6-module-loader/dist/es6-module-loader.js"></script>
 8 |   <script src="../node_modules/systemjs/dist/system.js"></script>
 9 | </head>
10 | <body>
11 |   <script>
12 |     WCT.loadSuites([
13 |       'unit/exports.html',
14 |       'unit/resources.html',
15 |       'unit/scopedscript.html',
16 |       'unit/systemjs.html',
17 |     ])
18 |   </script>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/test/shared/fixtures.js:
--------------------------------------------------------------------------------
 1 | /* jshint -W098 */
 2 | 
 3 | function importFixtures(paths) {
 4 |   var fixtures = {}
 5 | 
 6 |   // Ideally this is not needed, but see:
 7 |   // https://github.com/ModuleLoader/es6-module-loader/issues/255
 8 |   var importOptions = {name: document.location.pathname}
 9 | 
10 |   var imports = paths.map(function(path) {
11 |     return System.import('../fixtures/' + path, importOptions).then(function(mod) {
12 |       fixtures[path.replace(/\..+$/, '')] = mod
13 |     })
14 |   })
15 | 
16 |   // Block tests until all the fixtures have loaded
17 |   before(function(done) {
18 |     Promise.all(imports).then(function() { done() })
19 |   })
20 | 
21 |   return fixtures
22 | }
23 | 
24 | /* jshint +W098 */
25 | 


--------------------------------------------------------------------------------
/test/unit/exports.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <script src="../../node_modules/webcomponents.js/webcomponents.js"></script>
 6 |   <script src="../../node_modules/web-component-tester/browser.js"></script>
 7 |   <script src="../../node_modules/es6-module-loader/dist/es6-module-loader.js"></script>
 8 |   <script src="../../dist/html-exports.js"></script>
 9 |   <script src="../shared/fixtures.js"></script>
10 | </head>
11 | <body>
12 |   <script>
13 |     var fixtures = importFixtures([
14 |       'nameddefault.html',
15 |       'scopedexport.html',
16 |       'simpledefault.html',
17 |       'words.html',
18 |     ])
19 | 
20 |     // Yay, tautology!
21 |     specify('exported elements are exported', function() {
22 |       expect(fixtures.words.one.textContent).to.equal('Lorem')
23 |       expect(fixtures.words.two.textContent).to.equal('ipsum')
24 |     })
25 | 
26 |     specify('elements with just an id are not exported', function() {
27 |       expect(fixtures.words.three).to.equal(undefined)
28 |     })
29 | 
30 |     specify('the document is the default default export', function() {
31 |       expect(fixtures.words.default).to.be.an.instanceOf(Document)
32 |       expect(fixtures.words.default.baseURI).to.match(/fixtures\/words\.html/)
33 |       expect(fixtures.scopedexport.default).to.be.an.instanceOf(Document)
34 |       expect(fixtures.scopedexport.default.baseURI).to.match(/fixtures\/scopedexport\.html/)
35 |     })
36 | 
37 |     specify('default exports can be declared without an id', function() {
38 |       expect(fixtures.simpledefault.default.textContent).to.equal('fizz')
39 |     })
40 | 
41 |     specify('default exports can be declared with an id', function() {
42 |       expect(fixtures.nameddefault.foo).to.equal(fixtures.nameddefault.default)
43 |       expect(fixtures.nameddefault.default.textContent).to.equal('bar')
44 |     })
45 | 
46 |     specify('values can be exported from <script type="scoped">', function() {
47 |       expect(fixtures.scopedexport.stuff).to.equal(1)
48 |       expect(fixtures.scopedexport.things).to.equal(2)
49 |     })
50 |   </script>
51 | </body>
52 | </html>
53 | 


--------------------------------------------------------------------------------
/test/unit/resources.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <script src="../../node_modules/webcomponents.js/webcomponents.js"></script>
 6 |   <script src="../../node_modules/web-component-tester/browser.js"></script>
 7 |   <script src="../../node_modules/es6-module-loader/dist/es6-module-loader.js"></script>
 8 |   <script src="../../dist/html-exports.min.js"></script>
 9 |   <script src="../shared/fixtures.js"></script>
10 | </head>
11 | <body>
12 |   <script>
13 |     var fixtures = importFixtures(['resources.html'])
14 | 
15 |     var styledEl = document.createElement('div')
16 |     styledEl.classList.add('fixture-target')
17 |     document.body.appendChild(styledEl)
18 | 
19 |     specify('resources don\'t screw with the module loading process', function() {
20 |       expect(fixtures.resources.sentinel.textContent).to.equal('loaded')
21 |     })
22 | 
23 |     specify('<script src=""> loads relative to the module', function() {
24 |       expect(window.SCRIPT_FIXTURE_LOADED).to.equal(true)
25 |     })
26 | 
27 |     specify('<link rel="stylesheet"> loads relative to the module', function() {
28 |       expect(getComputedStyle(styledEl).paddingTop).to.equal('1px')
29 |     })
30 | 
31 |     specify('CSS @import loads relative to the module', function() {
32 |       expect(getComputedStyle(styledEl).paddingRight).to.equal('2px')
33 |     })
34 | 
35 |     specify('Nested CSS @import loads relative to the stylesheet', function() {
36 |       expect(getComputedStyle(styledEl).paddingBottom).to.equal('3px')
37 |     })
38 | 
39 |     specify('<link rel="import"> loads relative to the module', function() {
40 |       expect(window.IMPORT_FIXTURE_LOADED).to.equal(true)
41 |     })
42 | 
43 |   </script>
44 | </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/test/unit/scopedscript.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <script src="../../node_modules/webcomponents.js/webcomponents.js"></script>
 6 |   <script src="../../node_modules/web-component-tester/browser.js"></script>
 7 |   <script src="../../node_modules/traceur/bin/traceur.js"></script>
 8 |   <script src="../../node_modules/es6-module-loader/dist/es6-module-loader.js"></script>
 9 |   <script src="../../dist/html-exports.debug.js"></script>
10 |   <script src="../shared/fixtures.js"></script>
11 | 
12 |   <import src="../fixtures/foo" as="MegaFoo" values="bar baz">
13 | </head>
14 | <body>
15 |   <script>
16 |     _scopedScript   = {}
17 |     _scopedModule   = {}
18 |     _importedScript = {}  // in fixtures/scoped.html
19 |   </script>
20 | 
21 |   <script type="scoped">
22 |     _scopedScript.MegaFoo = MegaFoo
23 |     _scopedScript.bar     = bar
24 |     _scopedScript.baz     = baz
25 |   </script>
26 | 
27 |   <script>
28 |     var fixtures = importFixtures(['scoped.html'])
29 | 
30 |     var importsLoaded = new Promise(function(resolve, reject) {
31 |       document.addEventListener('DeclaredImportsLoaded', resolve)
32 |     })
33 |     // Both test that the event fires, and block subsequent tests from running
34 |     // until it does.
35 |     specify('DeclaredImportsLoaded fires when imports have loaded', function(done) {
36 |       importsLoaded.then(function(event) {
37 |         var fullPath = System.normalize('../fixtures/foo', document.location.href)
38 |         expect(System.has(fullPath)).to.eq(true)
39 |         done()
40 |       })
41 |     })
42 | 
43 |     function scopedTagCommon(values) {
44 |       specify('pulls default imports', function() {
45 |         expect(values.MegaFoo).to.equal('I am Foo')
46 |       })
47 | 
48 |       specify('pulls named imports', function() {
49 |         expect(values.bar).to.equal('I am Foo Bar')
50 |         expect(values.baz).to.equal('I am Foo Baz')
51 |       })
52 | 
53 |       specify('pulls renamed imports')
54 |     }
55 | 
56 |     describe('<script type="scoped"> in the root document', function() {
57 |       scopedTagCommon(_scopedScript)
58 |     })
59 | 
60 |     describe('<script type="scoped"> in an import', function() {
61 |       scopedTagCommon(_importedScript)
62 |     })
63 |   </script>
64 | </body>
65 | </html>
66 | 


--------------------------------------------------------------------------------
/test/unit/systemjs.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <script src="../../node_modules/webcomponents.js/webcomponents.js"></script>
 6 |   <script src="../../node_modules/web-component-tester/browser.js"></script>
 7 |   <script src="../../node_modules/es6-module-loader/dist/es6-module-loader.js"></script>
 8 |   <script src="../../node_modules/systemjs/dist/system.js"></script>
 9 | </head>
10 | <body>
11 |   <script>
12 |     System.paths.html = '../../dist/sysjs-plugin/html.min.js'
13 | 
14 |     specify('Works with implicit plugin names', function(done) {
15 |       // Some combination of SystemJS and es6-module-loader's pathing makes
16 |       // relative URLs really weird here, so we set up a fixture relative to the
17 |       // current document, rather than trying to get ../ to work.
18 |       System.import('systemjs/thing.html!html').then(function(exports) {
19 |         expect(exports.foo.textContent).to.equal('bar')
20 |         done()
21 |       }, done)
22 |     })
23 |   </script>
24 | </body>
25 | </html>
26 | 


--------------------------------------------------------------------------------
/test/unit/systemjs/thing.html:
--------------------------------------------------------------------------------
1 | <div export id="foo">bar</div>
2 | 


--------------------------------------------------------------------------------