JavaScript interoperability documentation

Flow
1

Hello, I want to integrate some JS libraries in my Vaadin Flow 25 (Java 21) project. I do not wish to create an add-on or a separate project, so I figured the most appropriate way is the one described there : https://vaadin.com/docs/latest/flow/component-internals/web-components/an-in-project-web-component.

I struggled a long time on it and I found that it is not as explicit as it could be, especially for Java people that wish to avoid JavaScript as much as possible. For instance the above docs do not show :

  • that you can use typescript
  • that you can use the added @NpmPackage in the typescript code to wrap an npm package
  • how to bind to deeper Lit features

I created a simple AgGrid wrapper because I need the pivot table : https://github.com/AntoineHazebrouck/js-interop. I think that this way makes it easier to understand how to bind Java to JS.

Could we work on an update for this part of the documentation so that it could showcase more use cases that people might need ? I think that this is a pretty important topic that might deter people from choosing Vaadin over a classic SPA if they have doubts about the flexibility.

Also, I quite don’t understand why @NpmPackage would reside on the component itself rather than in a dedicated npm packages config ?

2

Thanks for the feedback about the documentation. There are certainly some things to improve there.

It makes sense to have @NpmPackage next to the @JsModule annotation that references files from that package. And @JsModule definitely belongs on the component class rather than in a separate config so that the framework can automatically optimize the production bundle to only load scripts in the browser when they are actually needed.