Crate builder as a Web Component #28
Conversation
When running in vuejs we need to use index.js, while when building the web component via `npm run build:vite` we need to start at index.wc.js. Now both the original vuejs dev app and the wc test app work.
This was an earlier trial, it runs out we don't need it.
|
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? |
|
Hi @marcolarosa, thanks for the test repo, it was very helpful! I submitted a PR there with some fixes and ideas. |
Replace webpack with vite; add web component entry points This commit replaces the webpack develop / build system originally used with one based on vite. It also adds in the relevant web component entry points as developed by @beepsoft and his team that came from #28 and describo/describo-web-component-test#1 and other conversations. Great work @beepsoft and team! * toggle loading properties when getting entity * load tgt entity data if not already provided ; add loading indicator * deprecate webpack dev env; setup vite based env * add webcomponent entry point
|
Superseded by 1f63387 |
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
.vueto.ce.vuein 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 inShell.component.ce.vueso 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-reactis a React project for showing how the web component can be used in a project. SeeREADME.WebComponent.mdfor building the web component and running thewc-test-app-reactproject.