monaco-editor usage in vaadin java project

[mkit]

Hi, I am new to Vaadin but would like to use this component in my Vaadin Java project. Can you advise me on how to do it?
Thank you in advance for your reply.

[eterna2]

Hey @mkit

This is a polymer based webcomponent. It is not a vaadin component.

Aka u cannot use it inside a Java application - there are no Java bindings to this webcomponent.

U can only use it as a native web application - i.e. javascript/typescript/html ecosystem.

Vaadin UI components are webcomponents (similar to this) but they also wrap a Java lib over the webcomponent so that u can use it in ur java application.

Frontend dev on the npm ecosystem can use vaadin ui components like any regular webcomponent but vaadin java dev cannot use regular webcomponent like vaadin components w/o some additional work to convert it to a vaadin component with java bindings.

Tldr. This is not a vaadin component and does not have java bindings, so u can't use this in a Java application.

[eterna2]

Ok. I went and have a look at how pple use vaadin.

U will need to do something like this. Using vaadin java methods to mimic what we would do in javascript.

https://github.com/vaadin/vaadin-leaflet-example/blob/master/src/main/java/org/vaadin/example/leaflet/ui/LeafletMap.java

Let me see if I can find a better example for u.

[eterna2]

https://vaadin.com/docs/flow/web-components/integrating-a-web-component.html

U need to do this first. But because this is polymer 2 instead of 3 (I haven't got time to update it), it is based on bower rather than npm.

But this shld not be an issue, u can do a normal js script import for all the bower packages instead of using bower.

[eterna2]

U can read more about bower here.

U can refer to this for the bower based webcomponent
https://vaadin.com/docs/v10/flow/web-components/integrating-a-web-component.html

But support will drop after v14 thou.
https://vaadin.com/blog/bower-and-npm-in-vaadin-14-

[mkit]

Thanks a lot @eterna2