Support jspm packaging

[olanod]

I would be nice for those using jspm package system to be able to install polymer components and not having to use bower.
The reason they don't work out of the box with jspm right now is that polymer components depend on each other using relative paths assuming there's a specific directory structure. jspm adds versioning to the directory names which breaks the importing.
I don't know if there's an easy workaround or if polymer elements could implement js modules instead of HTML imports so they can be imported from javaScript.

[cdata]

We're discussing module / dependency resolution strategies and we will probably have a better solution for this eventually. In the mean time, bower is likely going to be your best bet.

[techniq]

:+1:

[adrianhall]

jspm install github:Polymer/polymer cd jspm_packages/github/Polymer/polymer@0.8.0 vulcanize polymer.html --inline --strip -output dist/polymer.html

Admittedly, it would be two less steps if they checked in the dist/polymer.html, but I don't see a major issue with jspm.

[zeitiger]

:+1:

This issue is still up to date with Polymer 1.0

We need a loader plugin, similar to https://github.com/systemjs/plugin-css

• A package.json file with a main definition is needed for all elements (or define an override main definition)
• Additional all PolymerElements that I see use relative paths within there HTML parts and that doesn't match with version based path that is JSPM using. So you have to intercept all relative paths ...

I made at the moment a workaround with my gulp build chain copy all PolymerElements and remove the version within the path. But that isn't good solution IMHO

[bmcorser]

I used jspm-bower-endpoint with:

npm install -g jspm-bower-endpoint
jspm registry create bower jspm-bower-endpoint

Then things like the following are possible:

jspm install bower:polymer

I'm a bit lost as to how I then start writing Polymer code and have it bundled by JSPM ...

[herkulano]

We are trying to do the same, but there are some inherent problems in the way Polymer elements are setup, especially its HTML Imports folder structure.

https://github.com/biojs/biojs3/issues/4#issuecomment-120107994

[wilzbach]

In case someone wants to load Polymer as pure JavaScript dependency - I did the extra work to strip all html tags automatically. It would be great if the Polymer team could do provide for us - I am happy to make a nice PR ;-)

jspm i github:greenify/polymer-js

Because it is wrapped as a proper module, you can specify Polymer a true dependency like

var Polymer = require('polymer');

or

System.import('polymer').then(function(Polymer){
 // ...
});

It doesn't solve the problem of injecting HTML & CSS into your module, but I hope this is the first step ;-)

[Hypercubed]

Hello, Similar to @greenify's solution and @zeitiger's suggestion I created a SystemJS plugin that does HTML imports (https://github.com/Hypercubed/systemjs-plugin-html). Works great for loading Polymer itself (which only has internal relative links) but will not work for Polymer elements. I thought about rewriting relative links within the html file on import but a) I don't see a clear way to map relative bower links to jspm paths b) script tags within the HTML import are not processed by SystemJS and therefore would need to include the full jspm_components path c) the paths would no longer be resolved on bundling.

[addyosmani]

@greenify @Hypercubed It's great to see more explorations around a JSPM workflow being done here. For now, the Polymer team are focusing on the core library, elements and tooling and our primary package manager (Bower).

For others: As we currently still use Bower for this, you may end up needing to use GitHub to pull down Polymer with JSPM (jspm install github:Polymer/polymer) or installing Bower specifically for Polymer (I know this isn't ideal and we apologise). The jspm-bower-endpoint solution can also be used here.

You might also find insights into ways other folks are getting JSPM to play with Polymer by searching GitHub (https://github.com/search?q=jspm+polymer&type=Code&utf8=✓). I hope that in the not too distant future we have a better story here. JSPM rocks.

[CxRes]

Now that Polymer is in production, has this issue been resolved???

[bmcorser]

I think it might be possible to publish Polymer packages on the JSPM registry, shimmed to give System.js the correct paths. It would be cool if the Polymer team could do this, but I think it might be on the JSPM community to take care of it.

On Sat, 12 Dec 2015 14:31 CxRes notifications@github.com wrote:

Now that Polymer is in production, has this issue been resolved???

— Reply to this email directly or view it on GitHub https://github.com/Polymer/polymer/issues/1133#issuecomment-164158472.

[olanod]

The real solution will be to switch to ES6 module system and forget about HTML imports, the standard doesn't seem to have a bright future.

[miztroh-zz]

@olanod But modules don't address deduplication of network resources like HTML Imports do ... right? While I'm excited about ES6 modules and look forward to the day when they Just Work across browsers without transpilation, I'd hate to lose out on the benefits of HTML Imports. I hope see some middle ground here.

[CxRes]

@miztroh: I believe JSPM does implement deduplication (My understanding, and forgive me if I am wrong, is that SystemJS does everything HTML Imports does, which is one of the arguments Firefox uses for not implementing the latter). And for those of us using SystemJS with ES6, we use a transpiler anyway.

[miztroh-zz]

When I say deduplication, I mean a scenario in which multiple custom elements utilize the same resource under the hood and the browser only sends one request to fetch it instead of 2. A module loader may do something like this (I've not used SystemJS), but I'd much rather have something like that handled at the platform level instead of by a module loader. As JSPM is a package manager, I don't think it's applicable in a discussion about deduplication of runtime network requests.

[alex94cp]

Hi, I got to this thread because I wanted to use Polymer with JSPM. I've recently started to read more about polymer, but there's something I don't understand. I'm assuming Polymer is essentially a javascript library, right? If that's true, it feels awkward to have what are essentially javascript source files in html disguise (for polymer elements, the opposite is true, so this does not apply to them). Could someone please explain me the rationale? Were polymer to be distributed as a regular js library, it'd be easier to use it with npm, jspm... or am I missing something? (Of course, the Polymer-as-a-library wouldn't address the polymer-elements relative-imports issue)

[CxRes]

@alex94puchades Its not rational but the rationale is that everything should be an html tag since web-components and hence polymer components are web-tags. For pure consumers this "sort of" looks nicer but I agree with you that its downright silly. Meanwhile if you want to use it with jspm, the trick is to include the plugin systemjs-plugin-html - https://github.com/Hypercubed/systemjs-plugin-html . Also, If you by chance do not want to bundle the component during your build then do import 'html' import 'my_component.html!'

[dfreedm]

We will be evaluating new package management solutions soon, but jspm probably won't be the answer.

[CxRes]

@azakus Can you possibly give us a timeline on soon or some place where we can follow the discussion on this?