wrapping js library for web component

[pitc]

In learning NG Client I have seen in this forum references to extending a third party javascript library or functionality to create a web component that can then be used within Servoy IDE.
In my current project I have a need to do a simple image crop. There are many js capabilities out there (see for example https://www.webdesignerdepot.com/2018/05/8-free-javascript-image-cropping-scripts-and-plugins/).
I would like to know if there is a generic approach to wrapping (if that is the correct term) a capability of a third party item to make a web component.
I have read the wiki on WebComponents (https://wiki.servoy.com/display/DOCS/WebComponents) but it is not exactly a step by step tutorial.
I had thought that the IDE might have a "build a web component" wizard or perspective but I do not see one in the latest (2020.12.1) version. Please correct me if that is incorrect.
I have gone through all the webinars but not found one to describe the step by step approach.
I imagine that others have done this before (for example https://forum.servoy.com/viewtopic.php?f=69&t=22250) and may have some learning experience to share.
If I have to learn a lot about the angularjs before I can wrap a 3rd party library that seems like so much effort!
Are there web references that people have used to learn and do what I am looking for?
Tom

[mboegem]

Hi pitc,

All of the web packages that are available through the Servoy Package Manager, can be found on github (https://github.com/Servoy)
You will find examples for what you want to do.

Hope this helps

[pitc]

Thanks Marc,
yes I know about those examples.
What I was looking for was the reasoning behind the various files, the meaning of items.
Better for me is an actual step by step tutorial that explains the why.
Even better is if there is an IDE functionality for building a web component:
For example there should be all the "parts" needed such as files that are perhaps templates that one fills in.
I guess I am a higher level designer in that I look at the requirement such as "allow user to crop an image" then find a suitable solution from the web and then "drop it in the web component designer"!
I will keep looking.
Maybe eventually I will have to muddle through doing my own tutorial - much like: Patrick Talbot's https://wiki.servoy.com/display/DOCS/Creating+Client+Plugins.
Or perhaps there could be some collaboration.

[swingman]

Hi Tom,

I have built some components on my own, but I'm no expert. I started by looking at the source code for the Servoy various components on Github and identified a simple one which I could understand.
Then I inserted my chosen js library, in my case d3.js. I would first do a "hello world"-style test to check the component reads my library. After this I would develop the component outside Servoy to get it working using constants as inputs.
Once working, I paste my code into my Servoy component to check if it still works. After this convert the constants one by one to properties I can set from Servoy, hook up event handlers and so on.

The first one took a while to do, but now I can do them much quicker.

Hope this helps,

Christian