AbstractJavaScriptComponent equivalent in Flow?

Is there a migration path from AbstractJavaScriptComponent?
I found it extremely convenient as a wrapper to JS libraries in Vaadin 8.

I second this question. I’m researching migrating to V10 / Flow, and this is a major hold up. I found [this article]
(https://vaadin.com/docs/v11/flow/importing-dependencies/tutorial-importing.html), but I’ve found nothing on client state management (component states) nor the addFunction(…) equivalent.

[PolymerTemplate-based components]
(https://vaadin.com/docs/v11/flow/polymer-templates/tutorial-template-basic.html) should be quite mappable to JavaScriptComponents. State will be replaced by the TemplateModel and @EventHandler / @ClientCallable methods provide a way to communicate directly to the server when the two-way Model binding doesn’t help.

After briefly reviewing the information on Polymer, it’s still unclear how that addresses the original question of a migration path for AbstractJavaScriptComponent integrations. I really want to migrate from V8 to V10+, but this Polymer route looks like it’s not as straightforward as V8 world of wrapping and integrating JavaScript. It would be helpful to have concrete examples of what it might look like to migrate a component that extends AbstractJavaScriptComponent (V8) to a PolymerTemplate (V10) component. I’ve only had a chance to skim the Polymer documentation, but it seems like we’d need to make a client-side wrapper - almost analogous to the V8 JS component connector - but this is unclear. The V8 documentation was much more clear on how to integrate JavaScript components.

If I’m missing something fundamental already outlined in the documentation, my apologies. Please direct me what I missed. Thanks!

Hi! … [here’s a nice example]
(https://github.com/mstahv/tinymce-for-flow) that shows how to integrate a plain javascript component in Vaadin 10+
Basically what you need to do is:

  • Import your javascript libraries with @JavaScript("frontend://mylibrary.js")
  • Extend a built in component or use @Tag("div")
  • Execute javascript by using ui.getPage().executeJavaScript() (you can send the current element as a parameter)
  • Call server side methods by using @ClientCallable (see org.vaadin.tinymce.TinyMce.updateValue() for an example, see also /src/main/resources/META-INF/resources/frontend/tinymceConnector.js for an example of how to call the method from javascript)

Hope it helps!

Thanks martin. I followed that example and I now have some basic code working.

One area I need more help with: can you recommend a pattern I could use to get the return value of a client side function call? (it appears the calls are mostly asynchronous).

Thanks

For now, the only choice, is to fire an event from client side, with the return value in there, and then catch that event from server side with @DomEvent("my-event") or:

getElement().addEventListener("my-event", e->{
			JsonObject eventData = e.getEventData();
			String data = eventData.get("event.detail.myEventData").asString();
			...

It should be possible to write a simple utility method that receives a lambda expression that is going to be called when the event is received so you can do whatever you want with the result.
But yes, the calls are made asynchronously.