How to import an AMD module into a Polymer custom element?

Question

I am converting an existing web application to Polymer. The web application consists of components (in the Knockout component architecture) and modules. Both are loaded using RequireJS. I see how to convert the Knockout components to Polymer custom elements, but not how to deal with the JavaScript modules. RequireJS modules return a JavaScript object which is passed to the JavaScript that depends on it via a parameter to the “define” function. There does not appear to be a way to get that object if the module code is loaded via HTML import rather than RequireJS.

For example, several of the existing components use the moment.js module for date/time manipulation. They load it via RequireJS, which passed them a reference to the moment object. In one of the Polycast videos, Rob Dobson says that the recommended practice would be to write a moment.html file that contains just a <script> tag to import moment.js. A Polymer custom element can then do an HTML import of moment.html, but that does not give the component access to the object returned by the moment.js module. Moment does not put that object in the global namespace, so how does the Polymer custom element get access to the moment object?

I've used moment with Polymer. The only thing you need to do is import the script using source tag and then you can use it directly like moment(date).format('D MMM YYYY') in your ploymer functions — a1626
That use of moment has been deprecated. Using it produces this message in the console: "Deprecation warning: Accessing Moment through the global scope is deprecated, and will be removed in an upcoming release." The point is that the modules in the application do not put anything in the global namespace, but rather pass the reference to the dependent component via the RequireJS "define" function. — Dennis McCarthy
@DennisMcCarthy Actually, moment.js itself adds a moment property to the current context, which is the Window object in the case of HTML imports and <script> tags, making it available globally. It's worth noting that I don't see any deprecation warnings (or any related messages) when the script is imported in HTML. codepen — tony19

Dennis McCarthy Dennis McCarthy · Accepted Answer · 2016-12-19T14:30:48

This from Justin Fagnani of the Polymer team:

"Sounds here like you need a module loader/registry that works with Polymer / HTML Imports. I made such a thing called IMD: https://github.com/PolymerLabs/IMD

It's only a AMD-compliant module registry, but not a loader, so all modules have to be loaded via explicit or tags, which ensures that dependency ordering is preserved."

It does exactly what I was looking for.

How to import an AMD module into a Polymer custom element?

1 Answers