Use with Paper Element collection/use when Polymer(..) registration is embedded in HTML file

[VictorBlomberg]

Hi,

Any idea about how one could use this with the Polymer Paper Element collection, where the JavaScript part is included in the main HTML file, like in the Polymer/paper-dropdown repo.

Still trying to grasp the whole thing, so you'll have to excuse me if it's a dumb question.

Victor

[JonDum]

no no not a dumb question at all.

Right now you have to manually import the the core- and paper- elements with link tags:

<link rel='import' href="../bower_components/core-dropdown/core-dropdown.html">

I wanted to use polymer-loader to also require() these into the bundle, but this turned out to be non-trivial because imports can have their own dependancies in the form of script and link tags. I had an idea to use Polymer's vulcanize inside polymer-loader to create a bundle from a core/paper component which then can be required like your own custom elements. This would work in theory except that there'd be tons of duplicate code for shared resources between core/paper elements. If you have any other ideas I'm all hears.

[VictorBlomberg]

Thank you for your reply!

Edit: The below suggestion is probably not one of my strongest contributions to the world. Hadn't the deduplication been on file level it may have helped us, but not now. I'll think this over a bit more and come back again.

This would work in theory except that there'd be tons of duplicate code for shared resources between core/paper elements.

Yes, that would be an issue. Would it be possible to make use of the deduplication feature in webpack (optimization page, plugins page)? It would of course be nice to not rely on such a feature (especially as it's stated that "This is experimental and may crash, because of some missing implementations"), but if it can solve the problem, that would be a huge help?

It seems to only do deduplication on file level, so the question is if that's good enough?

[JonDum]

The dedupe plugin works very well with javascript, but webpack doesn't know how to tokenize html, if I'm not mistaken.

Maybe the all-mighty @sokra could chime in on that.

We would need a plugin or something to tell the internal module resolver how to handle certain .html files as imports and tokenize the html and resolve its dependancies as first class webpack modules so the regular webpack systems can properly bundle/chunk it all. This would be the right way, but it's beyond my level of expertise with the deep-down insides of webpack. The hacky way would be like what I talked about before.

[JonDum]

As a stop gap, it may be possible to just load the root component you are trying to require and let the imports polyfill load its dependancies at runtime...

[VictorBlomberg]

We would need a plugin or something to tell the internal module resolver how to handle certain .html files as imports and tokenize the html and resolve its dependancies as first class webpack modules so the regular webpack systems can properly bundle/chunk it all. This would be the right way, but it's beyond my level of expertise with the deep-down insides of webpack.

Which means we would need to be able to

1. give a web component HTML file to the polymer-loader, which
2. finds all external dependencies in the file as well as
3. embedded styles and scripts, and
4. makes a script of the embedded scripts, which
5. uses require() to resolve all external dependencies (including other web components) and embedded styles,
6. and patches the Polymer registration to use "imperative registering" with what's left of the HTML file with embedded scripts and styles and external dependencies stripped out.

... if I understand it correctly?

[JonDum]

More or less, yes. Except you can't strip out the external dependencies in the final imperative registration, they'll be duplicated in the DOM, but wouldn't be downloaded more than once so it's fine.