How to depend on a JavaScript file from/in an included component...?

Flow
1

I would like my V14 UI application to depend on / use a JavaScript file from within a Maven-included component. Can anyone tell me how to achieve that…?

I am writing an adapter for Mapbox [1]
, where this would help me to avoid having to duplicate the mapbox.js file that contains the JS part of the adapter in the UI component where it is used.

Much appreciated…!

[1]

2

Just found this older post: https://vaadin.com/forum/thread/14045163/how-to-pack-server-side-java-script-in-executable-jar-file.

3

\u0000I’ve tried various combinations, but have not been successful yet. Can someone give me a hint how to add a @JsModule and @CssImport to my MapboxMap class that extends Div…? And where to put the JS and CSS source files…? \uD83D\uDE4F\uD83C\uDFFB

4

Perhaps this thread is helpful

https://vaadin.com/forum/thread/17979931/vaadin-14-component-based-on-node-module

5

Hi,

For a jar, you should put your resource files (css imported by CssImport and Javacript) in src/main/resources/META-INF/resources/frontend

Here an example: https://github.com/jcgueriaud1/custom-media-query/

I prefer to split my add-on into 2 modules, one for the jar file and for my test project but that shouldn’t matter:
Here another example here (split into 2 maven modules): https://github.com/jcgueriaud1/sortable-layout

If you are using cdn, or external js it’s much easier. It can be tricky if you want to use webpack (it may depend on mapbox js library). You can start with cdn then try to switch to webpack and npmpackage later.

Here some example of different js integration: https://github.com/jcgueriaud1/vaadin-tooltip-js

6

Thank you Peter, Jean-Christophe, I have been able to load the includes now. Turned out I was looking for the problem in the wrong location - in the class, rather than in the pom.xml, which contained a misconfiguration.

For me, adding the includes via tags [1]
does not work, but it worked via the page object [2]
.

I’ve updated GitHub. To be continued.

[1]

  • @JavaScript("./mapbox.js"); @CssImport("./mapbox.css") // at the top of the class definition

[2]

  • page.addStyleSheet("./mapbox.css"); page.addJavaScript("./mapbox.js");