Thanks so much Sebastien for posting this feedback. I think the methods you have here really are the best way to combine SystemJS with web components. It would be great to take the lessons you have learnt here and be able to turn them into something we can share more widely.
In terms of the build, it sounds like exactly the right way to do it as well. The issue you had with needing to import a web component dependency could be avoided if we had support for the <module> tag in web components. Consider if your example at https://github.com/guardian/windsock/blob/master/src/main/resources/public/elements/windsock-data.html looked like: <link rel="import" href="../bower_components/polymer/polymer.html"> <module name="windsock:elements/windsock-data"> <polymer-element name="windsock-data" attributes="src refresh sink-notices"> </polymer-element> *If we could propose that the <module> tag loads, but doesn't execute **(System.load provides this functionality) **until the modules in the sub-imports have executed first, we may have a unified solution for that.* I'd be very interested to hear from the web component team if something along these lines could be possible between the module loader and HTML import specifications in due course. On 20 August 2014 21:26, 'Steve Orvell' via Polymer < [email protected]> wrote: > Thanks for the detailed feedback. > > It seems like you have a handle on the build issues. There a lot of > options here but if you can think of a specific feature vulcanize should > have, please feel free to post an issue. Maybe you already did this, but > note that Vulcanize can concat scripts in imports. If that output needs > further processing for SystemJS, perhaps Vulcanizer's output is the input > for the SystemJS compressor. > > For the ordering issues, the Polymer requirement is that dependencies are > registered in the order in which they are used. For example, if x-bar > extends x-foo, x-foo must be registered first. Polymer 0.3.5 improved > support for async scripts. Polymer now waits to register elements until all > `<polymer-element>` declarations have their accompanying scripts before > registering elements. If you used this version, I don't expect to need to > specifically order things other than the noted requirement. > > > > > On Wed, Aug 20, 2014 at 3:45 AM, Sébastien Cevey <[email protected] > > wrote: > >> (I've been wanting to post this for a while, but this thread on >> requirejs+polymer prompted me to give it a try, apologies for the Subject >> hijacking) >> >> FYI, and as discussed with Eric & Addy at the recent Polymer event at the >> Google Campus in London, I've been experimenting with using Polymer in >> combination with SystemJS. In other words, I'm using >> <script>System.import('the-js');</script> inside the HTMLImport, instead of >> a static <script src="the-js.js"></script> definition. >> >> The advantage of using SystemJS is that I can then write my JS definition >> using ES6 (or in fact anything I want, incl. AMD or CJS), using the ES6 >> module import syntax too. Makes the code a lot neater, and avoid faffing >> with the manual RequireJS config (I use jspm to generate and manage the >> System config). It is also the only sane way I can think of (besides >> RequireJS) to have an HTML import depend on a JS file that itself depends >> on another JS file. >> >> The code is Open Source here if you want to take a look: >> >> >> https://github.com/guardian/windsock/tree/master/src/main/resources/public/elements >> (apologies for the poor docs at the root, it's not yet 100% ready for >> prime time...) >> >> >> One of the issues with using System.import (or RequireJS' require, for >> that matter) in the HTML import is that unlike the static <script>, it is >> asynchronous. I had issues when using composition of components, where >> Polymer was failing some template binding due to dependencies being defined >> in the wrong order. I had to resort to manually expliciting the >> dependencies of the JS files *on top of* the declarative dependencies in >> the HTML files. >> >> For example, see the following JS dependency: >> >> >> https://github.com/guardian/windsock/blob/master/src/main/resources/public/elements/windsock-admin.js#L5 >> (ensure windsock-data Polymer element is defined before windsock-admin, >> because admin uses data) >> >> which unfortunately has to mirror the corresponding HTML dependency: >> >> >> https://github.com/guardian/windsock/blob/master/src/main/resources/public/elements/windsock-admin.html#L2 >> >> This is rather annoying, but I wasn't able to find a way around it, >> seeing as mixing HTMLImport and SystemJS results in a mix of sync and async >> dependencies, while Polymer requires a strict order for elements to be >> defined (AFAIU)... >> >> >> Another challenge was the bundling of elements for leaner distribution. >> Vulcanize is aware of static <script>s, but not System.import calls (or >> require() calls if using RequireJS), so no JS is pulled into the vulcanized >> output. On the other hand, jspm bundle is quite happy to bundle JS modules >> into one, but it obviously doesn't know about HTML imports. >> >> My extremely hacky (but oddly functional) solution comes in the form of a >> build script that combines vulcanize and jspm bundle, prepending the >> SystemJS bundle to the vulcanize output: >> >> >> https://github.com/guardian/windsock/blob/master/src/main/resources/public/make-dist.sh >> >> Some of the hackery, esp the hack around the AMD define at the bottom, >> should hopefully go away as fixes are incorporated into SystemJS instead. >> >> It's all still a bit rough, but I hope it proves it can all be done, >> albeit slightly more painfully than it ought to be... >> >> >> Any insight or ideas for making this all better natively supported would >> be very much welcome. I know there are discussions about HTMLImport vs >> System loader on es-discuss at the moment, but it'd be great to start >> thinking of ways to get all of this working together without extra hassle! >> >> Thanks for all the great work on Polymer! >> >> >> -- >> Sébastien Cevey >> The Guardian / Software Developer >> >> >> On 20 August 2014 08:49, <[email protected]> wrote: >> >>> Hi, >>> >>> is there any progress related to this topic? >>> >>> BR, >>> Alessandro >>> >>> >>> On Wednesday, February 26, 2014 10:09:55 AM UTC+2, Eric Bidelman wrote: >>> >>>> Scott, don't you have a new HTML import + JS module loader POC or brain >>>> dump somewhere? Am I making that up? >>>> On Feb 25, 2014 4:21 PM, "Gabriel Gartz" <[email protected]> wrote: >>>> >>>>> I like the idea of using requirejs and polymer project together, >>>>> some points: >>>>> >>>>> * Requirejs system migration: you just can't re-develop everything to >>>>> work with only polymer from one day to another. >>>>> * Using logical libs for a custom element: Some custom elements can be >>>>> very complex, using the require js allow you to easier coding with >>>>> namespace and modules dependence. >>>>> >>>>> Other points, it's possible to create a Custom Element to trigger and >>>>> manipulate requirejs, but you need to load polymer project before the >>>>> requirejs. >>>>> And finally the problem with requirejs loading before polymer project >>>>> it's in the way that requirejs create and use script elements to append on >>>>> the head from the DOM, where the ShadowDOM from Polymer decorate the >>>>> elements and if isn't decorated it throw a assert exception, so if require >>>>> is loaded before to load polymer it wont work. >>>>> >>>>> Em quinta-feira, 25 de julho de 2013 09h26min45s UTC-3, Joern Turner >>>>> escreveu: >>>>>> >>>>>> sorry, if that's a recurring question having answered elsewhere >>>>>> already. After searching the discussions i only found some remarks on >>>>>> that >>>>>> but no defnitive answer. >>>>>> >>>>>> We're also very interested to load polymer with requirejs or at least >>>>>> use them in conjunction. Anybody found a solution to that? Any pragmatic >>>>>> approach would be welcome. >>>>>> >>>>>> Second: after reading for a while i haven't found answers to the >>>>>> questions what polymer does to the global objects (window, document ...) >>>>>> and how/if it changes the javascript language. >>>>>> >>>>>> Thanks, >>>>>> >>>>>> Joern >>>>>> >>>>> Follow Polymer on Google+: plus.google.com/107187849809354688692 >>>>> --- >>>>> You received this message because you are subscribed to the Google >>>>> Groups "Polymer" group. >>>>> To unsubscribe from this group and stop receiving emails from it, send >>>>> an email to [email protected]. >>>>> >>>>> To view this discussion on the web visit https://groups.google.com/d/ >>>>> msgid/polymer-dev/ca2cc747-8c1e-476e-8f9d-774f622a9ebb% >>>>> 40googlegroups.com. >>>>> For more options, visit https://groups.google.com/groups/opt_out. >>>>> >>>> Follow Polymer on Google+: plus.google.com/107187849809354688692 >>> --- >>> You received this message because you are subscribed to the Google >>> Groups "Polymer" group. >>> To unsubscribe from this group and stop receiving emails from it, send >>> an email to [email protected]. >>> To view this discussion on the web visit >>> https://groups.google.com/d/msgid/polymer-dev/5d9ab14d-8f23-4708-a387-e7cf67326823%40googlegroups.com >>> <https://groups.google.com/d/msgid/polymer-dev/5d9ab14d-8f23-4708-a387-e7cf67326823%40googlegroups.com?utm_medium=email&utm_source=footer> >>> . >>> For more options, visit https://groups.google.com/d/optout. >>> >> >> >> >> >> ------------------------------ >> Visit theguardian.com. On your mobile and tablet, download the Guardian >> iPhone and Android apps theguardian.com/guardianapp and our tablet >> editions theguardian.com/editions. Save up to 57% by subscribing to the >> Guardian and Observer - choose the papers you want and get full digital >> access. Visit subscribe.theguardian.com >> >> This e-mail and all attachments are confidential and may also be >> privileged. If you are not the named recipient, please notify the sender >> and delete the e-mail and all attachments immediately. Do not disclose the >> contents to another person. You may not use the information for any >> purpose, or store, or copy, it in any way. Guardian News & Media Limited >> is not liable for any computer viruses or other material transmitted with >> or as part of this e-mail. You should employ virus checking software. >> >> Guardian News & Media Limited is a member of Guardian Media Group plc. >> Registered >> Office: PO Box 68164, Kings Place, 90 York Way, London, N1P 2AP. Registered >> in England Number 908396 >> >> >> Follow Polymer on Google+: plus.google.com/107187849809354688692 >> --- >> You received this message because you are subscribed to the Google Groups >> "Polymer" group. >> To unsubscribe from this group and stop receiving emails from it, send an >> email to [email protected]. >> To view this discussion on the web visit >> https://groups.google.com/d/msgid/polymer-dev/CALft9sTqmi_ichzKCtD%3DZn%3Dv-cukEGpSgPC-v-yVHLgcK2Tqyw%40mail.gmail.com >> <https://groups.google.com/d/msgid/polymer-dev/CALft9sTqmi_ichzKCtD%3DZn%3Dv-cukEGpSgPC-v-yVHLgcK2Tqyw%40mail.gmail.com?utm_medium=email&utm_source=footer> >> . >> For more options, visit https://groups.google.com/d/optout. >> > > Follow Polymer on Google+: plus.google.com/107187849809354688692 > --- > You received this message because you are subscribed to the Google Groups > "Polymer" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To view this discussion on the web visit > https://groups.google.com/d/msgid/polymer-dev/CA%2BrMWZgN-GaRS1sMue%2BEyZq-%3DutmLbwXNQxW4txNNJBKYn_pmg%40mail.gmail.com > <https://groups.google.com/d/msgid/polymer-dev/CA%2BrMWZgN-GaRS1sMue%2BEyZq-%3DutmLbwXNQxW4txNNJBKYn_pmg%40mail.gmail.com?utm_medium=email&utm_source=footer> > . > > For more options, visit https://groups.google.com/d/optout. > Follow Polymer on Google+: plus.google.com/107187849809354688692 --- You received this message because you are subscribed to the Google Groups "Polymer" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CAGu7HE%3DN%2BRTxLhvEsNayu1o56tQnXXpB59MaH-TqrWzNc5OQ0A%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
