search

describo / crate-builder-component

A VueJS UI component to build an RO-Crate
MIT License
6 stars 3 forks source link

Crate builder as a Web Component #28

Closed beepsoft closed 1 year ago

beepsoft commented 1 year ago

This is our attempt to export the crate builder component as a web component so that it can be used in projects not based on vuejs (eg. React or vanilla JS projects).

We used this guide: https://vuejs.org/guide/extras/web-components.html

The biggest change is that we had to rename the files from .vue to .ce.vue in order to make them exportable to a web component and we had to use Vite for building the web component. Other than that we only had to change one thing in Shell.component.ce.vue so that it can accept no only an Object for the crate and profile but also a string containing a JSON representation of the crate/profile. This is necessary because web components can only accept strings and not javascript objects.

The wc-test-app-react is a React project for showing how the web component can be used in a project. See README.WebComponent.md for building the web component and running the wc-test-app-react project.

marcolarosa commented 1 year ago

Hi @beepsoft

Thanks for doing this! I've taken a look and there were a few things I wasn't sure about. I was going to write a detailed review here but instead I've produced a test repo to help figure this stuff out: https://github.com/describo/describo-web-component-test. The readme goes into great detail about what I've done and why. Basically, I've ripped off a bunch of things from this pull request and put together a simple repo to develop the proof of concept.

The biggest concern I have is around passing data and methods into the web component. In the current form the pull request can't be accepted because there is no way to pass in a lookup class which means a key piece of functionality inside the component is missing.

Please take a look at the test repo where I explain everything in a lot of detail. Then, when you've had time to have a think about it, let's get together over zoom for a chat about how to proceed. Ok?

beepsoft commented 1 year ago

Hi @marcolarosa,

thanks for the test repo, it was very helpful! I submitted a PR there with some fixes and ideas.

marcolarosa commented 1 year ago

Superseded by 1f6338777ae210e8934cf4a4ea802b45fa076771