manolo / gwt-polymer-elements

Polymer Web Components for GWT. A collection of Material Design widgets for desktop and mobile.
Apache License 2.0
155 stars 49 forks source link

Vulcanize integration #107

Closed spirylics closed 7 years ago

spirylics commented 8 years ago

Hi,

Is it possible to combine gwt-polymer and vulcanize ? Imports are made in java code (and so imported in javascript), vulcanize is blind...

manolo commented 8 years ago

gwt-polymer-elements does not include any utility to run vulcanize, but, since 1.3.2.0 it supports that you import all the dependencies by your own, not doing automatic imports.

Basically, you have to manually create an auxiliary.html file with all the dependencies (web components) your app uses and run vulcanize on that file. Install the output of vulcanize in your public folder and include if in your index.html.

Disclaimer: I have not tested it yet, so I maintain this issue opened until we test this procedure and document it.

ghost commented 8 years ago

Vulcanizing with polymer.html excluded (and imported manually) seems to work. Unfortunately I've struggled with custom styles (see this question on stackoverflow). Seems I have to refactor my project first...

ghost commented 8 years ago

Update: the combination of Widgets and UIBinder causes LazyDomElement exceptions ("element not attached to the DOM") in some cases. Perhaps the strategy of UIBinder to attach Widgets logically first and the Webcomponents lifecycle does not fit together?

With elements it is working. Seems widgets are dead before GWT 3.0...

yadavharsh commented 8 years ago

Hi @muelbr can you share some sample achieving vulcanize using gwt polymer elements?

ghost commented 8 years ago

Hm, there is nothing special.

  1. Develop your app with gwt polymer elements as recommended here: GWT & Polymer / Elements UI
  2. In onModuleLoad replace Polymer.importHref() just with Polymer.whenReady()
  3. In your host file index.html add the vulcanized components file statically <link rel="import" href="vulcanized.html">
manolo commented 8 years ago

@muelbr Thanks for sharing your approach. Do you mind to contribute writing a .md file so as we can officially publish here ?

Note: in Vaadin, we are not yet going to develop any utility to automatically vulcanize (for instance when compiling gwtc) until we don't know more about the future of the compiler. Generators could do the work but are going to be deprecated. A process developed in java could be tough. Vulcanize is still being developed and optimised. PWA + HTTP2.0 would use push instead of Vulcanize, etc.

trohr commented 7 years ago

Hi @manolo, would it be possible to make it so that we can use the vulcanized polymer files and still use Polymer-GWT Widgets? As far as I can see, only thing that impedes this option is that every PolymerWidget calls Polymer.ensureCustomElement (getElement(), src);. If there were some property, say static private boolean ENSURE_CUSTOM_ELEMENTS_LOADED = true; that would control whether the loading of the element source is called, only thing that should be needed is to import the vulcanized file the same way with elements using Polymer.whenReady() Am I right? If yes, would you be so kind as to enable this option? We have an application coded around PolymerWidgets and we struggle with loading speeds and the fact that not all element definitions are loaded before the components are displayed. We hope that vulcanizing would solve our problems.

manolo commented 7 years ago

Fixed in 1.7.0.0. Import your elements or vulcanized bundle in your host file, and widgets will take care of not importing if the component is already registered.

lilletech commented 7 years ago

It's working like a charm, just an issue (only in chrome) using the paper-card in the vulcanized file.

ghost commented 7 years ago

Here is a deeper explanation of problems when using Polymer-Widgets and static imports...

PaperDropdownMenu fails after initial import