Need help with Integration of a Polymer Web Component

Flow
1

Hi,

Im trying to integrate a
webcomponent
. I added the webjar to
webjars.org
 and downloaded the addon starter from
vaadin.com/start/v10-component
.

pom.xml:

        <dependency>
            <groupId>org.webjars.bower</groupId>
            <artifactId>github-com-LostInBrittany-granite-ink</artifactId>
            <version>0.2.0</version>
        </dependency>
        <dependency>
            <groupId>org.webjars.bower</groupId>
            <artifactId>github-com-webcomponents-shadycss</artifactId>
            <version>v1.0.0</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/org.webjars.bower/webcomponentsjs -->
        <dependency>
            <groupId>org.webjars.bower</groupId>
            <artifactId>webcomponentsjs</artifactId>
            <version>1.0.22</version>
        </dependency>

My Component class:

@Tag("granite-ink")
@HtmlImport("bower_components/granite-ink/granite-ink.html")
public class GraniteInk extends Component {

    public GraniteInk() {
    }
}

Next i downloaded the
project-base starter
 and added my addon project as a dependency.
When i run the application with jetty i get the following log message and the component does not get displayed.

[qtp891715540-23]
 WARN com.vaadin.flow.server.DefaultDeploymentConfiguration - Have located multiple webcomponents-loader.js polyfills: '[webjars/webcomponentsjs/webcomponents-loader.js, webjars/webcomponentsjs/1.0.22/webcomponents-loader.js]
', using the first one
[qtp891715540-23]
 INFO com.vaadin.flow.server.DefaultDeploymentConfiguration - Will use webcomponents-loader.js polyfill discovered in webjars/webcomponentsjs
[qtp891715540-23]
 INFO com.vaadin.flow.component.internal.HtmlDependencyParser - Can't find resource 'styles/shared-styles.html' via the servlet context
[qtp891715540-23]
 INFO com.vaadin.flow.component.internal.HtmlDependencyParser - Can't find resource 'src/example-template.html' via the servlet context
[qtp891715540-23]
 INFO com.vaadin.flow.component.internal.HtmlDependencyParser - Can't find resource 'bower_components/granite-ink/granite-ink.html' via the servlet context

I also tried the same process with paper-slider and another webcomponent. I read the docs about webjars/Bower. Manually downloading the ressources with bower didnt work aswell.

Help is very appreciated

regards

A B

2

Hi,

There are unfortunately two types of Bower webjars at the moment:

  • The old ones with artifactId org.webjars.bower. These are not supported by Flow because they have various problems (same dependency can have multiple names, version numbers sometimes start with a v, sometimes not etc).
  • The new ones with artifactId org.webjars.bowergithub.<something>. These were created because of the problems with the old webjars and these are supported by Flow.

Even more unfortunately, the UI for deploying webjars at https://www.webjars.org/ still only support the old style webjars. The only way to deploy the new style webjars at the moment is through a REST API:

curl -X POST "https://www.webjars.org/deploy?webJarType=BowerGitHub&nameOrUrlish=https://github.com/vpusher/game-card&version=v1.0.6"

The webcomponents-loader.js related warnings should disappear once you no longer include org.webjars.bower/webcomponentsjs.
The HtmlDependencyParser messages are unrelated and will no longer appear when using beta3, which is not yet released.

3

Hi,

thank you for your quick response and good explanation!

With your help i could resolve my webjars-dependency issues, but i still have trouble getting the component displayed.
I switched the webcomponent from
granite-ink
to
sign-here
, because i could not create a webjar with curl for the granite-ink component.

When i now run the application i get the following error messages (see screenshot in my next post):

- ReferenceError: SignaturePad is not defined

(
the “sign-here” component is based on
SignaturePad

)

pom:

       
<dependency>
            <groupId>org.webjars.bowergithub.captaincodeman</groupId>
            <artifactId>sign-here</artifactId>
            <version>0.0.1</version>
        </dependency>

log:

[qtp122461713-38]
 INFO com.vaadin.flow.server.DefaultDeploymentConfiguration - Will use webcomponents-loader.js polyfill discovered in webjars/webcomponentsjs
[qtp122461713-38]
 INFO com.vaadin.flow.component.internal.HtmlDependencyParser - Can't find resource 'styles/shared-styles.html' via the servlet context
[qtp122461713-38]
 INFO com.vaadin.flow.component.internal.HtmlDependencyParser - Can't find resource 'bower_components/sign-here/sign-here.html' via the servlet context
[qtp122461713-38]
 INFO com.vaadin.flow.component.internal.HtmlDependencyParser - Can't find resource 'src/example-template.html' via the servlet context

It looks like the error could be related to this issue:
https://github.com/Polymer/polymer/issues/3948

4

screenshot
42801.png

5

Looks like sign-here depends on signature_pad but it fails to find signature_pad.min.js (the first error in the console is usually the only relevant one). Maybe the browser tries to load it from the incorrect place or your project is missing the transivtive signature_pad webjar dependency or then something else went wrong.

Check the URL first and that your dependency tree contains signature_pad