Webcomponent

[kchobantonov]

fixes #79

[netlify[bot]]

✅ Deploy Preview for jsonforms-vuetify-renderers ready!

Name	Link
🔨 Latest commit	6714edf15611ea63865049a57b5a4a06b07ff525
🔍 Latest deploy log	https://app.netlify.com/sites/jsonforms-vuetify-renderers/deploys/63730667c58e010008821dba
😎 Deploy Preview	https://deploy-preview-81--jsonforms-vuetify-renderers.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[kchobantonov]

@sdirix please review - you might want also to adjust to publish the new webcomponent to npm as well as provide a new netlify link that include the webcomponent demo that is built under dist folder

[sdirix]

Thanks for this code on how to wrap the Vuetify renderers into a web component. I'll talk to the team whether it makes sense to bring this into the code base.

If you would like to publish the webcomponent variant on your own we can give a you a shoutout and link to it from the repo and the website.

[kchobantonov]

@sdirix @lucas-koehler - it this is included in the release so we have the webcomponent deployed to npm then I can look to integrate jsonforms-editor with the vuetify renderer set

[kchobantonov]

@sdirix @lucas-koehler just a reminder we want to merge all other PRs before this one so that the webcomponent needs to be adjusted to use the advanced renderer instead of extender renderers - let me know when we can expect other PRs to be merges - most notably the template renderer so that I can adjust this PR

[kchobantonov]

@sdirix @lucas-koehler in the last commit in this PR, I'm extracting the CSS from the library because when we use the rollup vue plugin with { css: true } option then the generated JS file for the library includes the CSS but with the default CSS injector that inject the styles in the HEAD tag. That breaks when we use the library in the webcomponent and the generated CSS does not end up in the shadow dom but inside the HEAD tag which is wrong.

So I have split that into a css file output which can then be included in both the example application and the webcomponent application. The only thing is that when you do npm run wc:serve since the webcomponent is not actually built with the CSS then the generate CSS from the library will still be generated in the HEAD tag because the main entry point is main.js which includes the App.vue but if you do a build with npm run wc:build and the actual webcomponent is created then it is injecting the library generated CSS into the Shadow DOM as expected.

Because of the above I would recommend merging this PR and then later on decide if we want webcomponent to be automatically built with the library - which I highly recommend as well.

[kchobantonov]

@sdirix @lucas-koehler I have update the example application to be able to show the JSONForms view either with using the example built it DemoForm or by using the webcomponent - of course if you check the demo at the moment when you press the web component button it will tell you can it is unable to load the webcomponent simply because during the build we need to include the npm run wc:build between the npm run build and npm run example:build

Let me know when we can expect this to be merged not only because of the web component but also because of the CSS extraction that I have mentioned before - if you see that it will take more time let me know so that we can do a separate PR for the CSS extraction and have another release with that

Thanks

[BartJansseune]

Hi @kchobantonov, I've tried your branch. This seems to do the job, but I discovered that data-app also has to be defined:

    <div data-app="true">
    <vuetify-json-forms id="vuetify-json-forms">
    </vuetify-json-forms>
    </div>

I also have one annoyance: when I want to delete an element, the v-dialog is is displayed as an overlay over the whole window and the message is only in the bottom left corner. Probably has something to do with how the webcomponent is configured. Can you help? Thanks, Bart

[kchobantonov]

@BartJansseune there is no need to have a div with data-app="true" in the host page to wrap the webcomponent. You can check the demo.html when you run - npm run wc:build to build the webcomponent. There is a fix that is patching the vuetify library for now to fix an issue with dropdowns that are looking for data-app in the host page and the replacing of the content in the vuetify library locally (under node_modules) is not been replaced from the first time so you might need to run the build once again when this happens.

Regarding the overlay and we need to see some demo html how you are hosting the form and etc.

[BartJansseune]

@kchobantonov , thanks for your feedback but the problem is still there. I made 2 pages: https://strava.rennersclub.be/vue2.html This one is without the data-app, when you press delete, an overlay appears but there are no buttons. https://strava.rennersclub.be/vue.html This one is with the data-app, when you press delete, an overlay appears with buttons that can only be activated by pressing TAB on the keyboard.

The demo can be found on https://strava.rennersclub.be/demo.html What I noticed is that none of the as enum defined countries are not accepted (this also happens when run locally) Regards, Bart

[BartJansseune]

When I change "vue-cli-service build --target wc-async" to "vue-cli-service build --target wc" and remove the async parts in vue.config.js, things work as expected (so far ;-) )

[kchobantonov]

@BartJansseune thanks for your feedback - it is strange that when you change the async nature of the webcomponent this fixes those issues. For sure when you see this in the console - [Vuetify] Unable to locate target [data-app] - this means that the patch that we have for the vuetify to actually look at the data-app element inside the shadow dom was not applied correctly. Until this vuetify issue is fixed and we have integrated that with the library this patch that we have is necessary to be applied correctly otherwise the dropdown and etc. are not going to be displayed.

I also looked at your example but adding the div with the data-app around the webcomponent is not necessary. this should work without that but the issue is that for whatever reason the fix for vuetify is not been applied correctly in the node_modules folder before building the webcomponent - I have validated that in the example app that also uses the webcomponent for demo we are able to render the tooltip on the correct place. So make sure that the content of the files that we are patching in vuetify is actually changed before the build.

The vuetify version that we have for the example project is vuetify@2.6.12 so if you have newer or older version of that there might be some changes which the patch may not handle - e.g. if the code is not exactly the same as we expect to patch then the patch won't be applied.

Also it is necessary only to include the vuetify-json-forms.min.js file - not all other JS files

[sdirix]

Hi @kchobantonov,

One of the hardest things a maintainer can do is to say "No" to a good contribution. We discussed your proposal internally and came to the conclusion that we don't want to take on the maintenance of this JSON Forms package. We don't think a webcomponent variant of the Vuetify renderer set (or any renderer set) does fit our current vision of the project.

We have some experience doing webcomponent builds: About three years ago we stopped maintaining @jsonforms/webcomponent as the additional effort did not match the benefits.

JSON Forms is meant as a tool for developers to create their own form-based framework, which is why we focus so much on customizability. We focus less on a consumption-ready webcomponent build of one or more specific renderer sets as this does not fit the use cases in which we use JSON Forms ourselves and in our customer projects. Usually it's rather straightforward to create such a build if needed, so if any developer needs a webcomponent build they should be able to create their own.

We'll therefore close this PR. However we want to encourage you do maintain and release this webcomponent package yourself. If you do so we happily shout you out on our Website. We were discussing to add a "Community" page to jsonforms.io, so this would be fitting occasion to create such a page and then link to your release and documentation.

[kchobantonov]

@sdirix thanks for the feedback.

[sdirix]

Hi @kchobantonov,

Can we link to the Webcomponent Variant of the Vuetify renderers in the community section of the website?

[kchobantonov]

@sdirix at the moment I do not have the webcomponent yet in a separate project but I do have it integrated within another project https://github.com/kchobantonov/camunda-jsonforms-plugin - under plugin-ui I have the webcomponent for vuetify as well as the camunda variant that I'm using in the project itself.

Here is the location of the webcomponent inside that project - https://github.com/kchobantonov/camunda-jsonforms-plugin/tree/master/plugin-ui/packages/common-webcomponent

[kchobantonov]

@sdirix here is the new project that I have created that will host only client side code without any references to camunda - https://github.com/kchobantonov/jsonforms-vuetify-webcomponent