Polymer Module Loader
PML is an implementation of the AMD specification. The primary goal of it is to play nice with HTML Imports. Based on IMD. Currently PML supports basic loading of dependencies, HTML imports will be implemented later.
How Do I?
Download and Include PML
PML is distributed as an HTML Import-able HTML file, naturally. Install and use like this:
> bower install panuhorsmalahti/PML --save
Or, with npm:
> npm install panuhorsmalahti/PML --save
We recommend that HTML files that require or define do not directly import PML, but rather let the main page import PML, usually as the very first import. Since PML is fully AMD compliant, all modules defined in HTML imports will work just fine.
Define a Module
Modules are defined exactly as in other AMD systems like RequireJS: Public modules are defined by name:
Here's the definition of a mythical module, 'squidbits', that depends on the modules 'tentacles.html', 'ink' and 'jquery';
Now, since PML is targeted at projects already using HTML Imports, it's likely that the module will be defined inside an HTML file, like so:
<script> tags. These tell the browser to load
'tentacles.html' and 'ink.js'. Because scripts are blocked until imports and
other scripts have loaded and run, and 'tentacles.html' and 'ink.js' define
squidbits's dependencies are guaranteed to be loaded and registered
when the inline script runs.
Note also that the
jquery dependency is loaded automatically wihtout a
Note that we're assuming that
ink.js defines a
ink module here, and
tentacles.html defines an anonymous module.
Define Anonymous / Relative Modules
Private (relative) module names are inferred from the current import:
This module is available at a relative URL, as shown in the above
example. There can be only one anonymous module per HTML document.
If you want to use an existing anonymous module (say, something defined
following the UMD pattern), give it a name with
as attribute on a
You can call require.config to set configuration options. This should be done before loading anything dependencies.
You could import a document:
Or a node directly:
What about ES6 (ES2015) Modules?
They're great. Really, we can't wait for them to be implemented natively in browsers. And until then, compilers and loaders like SystemJS and Babel do allow developers to use ES6 modules now, if they're willing to deal with a build step.
There is a lot to explore with ES6 module loading and HTML Imports. The loading and ordering semantics appear to be fully compatible, and given a configurable enough loader we should be able to let ES6 modules import HTML nodes and vice-versa.