VueGWT/vue-gwt

Vue.js integration for GWT 2.8, Vue.js Components in Java

Payam Meyer

@payammeyer

aah that's it, ok it's good.

thanks for your help

Adrien Baron

@adrienbaron

For now we basically type all java Objects to "Object", but we type the rest (including Number and String), here is the mapping if you're interested: https://github.com/VueGWT/vue-gwt/blob/f482248887226543913abf696e5cdd4f4cd05438/processors/src/main/java/com/axellience/vuegwt/processors/component/ComponentExposedTypeGenerator.java#L923

Payam Meyer

@payammeyer

great thanks

Adrien Baron

@adrienbaron

:thumbsup:

Matt Davis

@mdavis95

Very cool to know

Adrien Baron

@adrienbaron

@mdavis95 @payammeyer this also means that boolean props in Vue GWT now behave like in Vue.
Let’s say you have this prop declared:

@Prop
boolean myProp

Not passing it to your component will now make it false by default instead of undefined.
Also, passing it just as an attribute that you don’t bind will set the prop to true:

<my-component my-prop />

Vue does that for a prop when you tell it it’s type is a JS Boolean, which we now do by default as mentioned above :+1:
We have an MR being prepared by @jtrentes that also improves support for Java Boolean Prop. Not binding those will results in null by default, and passing it as an attribute will result in true (to get false you bind explicitly false)

Payam Meyer

@payammeyer

Fantastic

Matt Davis

@mdavis95

👍

Matt Davis

@mdavis95

@adrienbaron vue beta-10 snapshot has been really stable for us. Do you plan on releasing it soon?

Adrien Baron

@adrienbaron

@mdavis that’s great to know! We actually thought about releasing it soon and maybe making it the 1.0 non beta, however GWT 2.9 was released so we should probably update to it before that :+1:

Payam Meyer

@payammeyer

We’ve upgraded to 2.9 internally, @mdavis95 actually helped with testing that. Happy to test VueGWT if you do another beta release with it

Colin Alworth

@niloc132

assuming you use elemental2, jsinterop-base, if you update to 2.9 then please also move to the 1.0.0 of each of those releases (and 2.0.0 of jsinterop-annotations)

Adrien Baron

@adrienbaron

@niloc132 Sure will do! 👌

Colin Alworth

@niloc132

be aware this will make you incompatible with 2.8.x

but it will future proof you, and make you compatible with other libs that are trying for a baseline of gwt2.9/j2cl

Adrien Baron

@adrienbaron

@niloc132 so this mean either we upgrade and are 2.9 only, or we stay like this for now and are not compatible with 2.9?

Colin Alworth

@niloc132

if you use old elemental2, you can still use gwt 2.9

but

you will not be compatible with projects that use stable elemental2

the 1.0.0-RC1 to 1.0.0 transition has breaking changes

that is the line which you have to decide which side you are on

Adrien Baron

@adrienbaron

Ah ok, makes sense, probably should make the transition to stable then 💪

Payam Meyer

@payammeyer

👍🏼

Matt Davis

@mdavis95

transition makes sense to me too

Adrien Baron

@adrienbaron

@mdavis95 @payammeyer would it be OK for you guys to do this transition on the current SNAPSHOT or would you rather see a release of current SNAPSHOT and a new SNAPSHOT with the migration?

Payam Meyer

@payammeyer

Current is fine

Matt Davis

@mdavis95

Yeah either way

Yogh

@yogh_gitlab

Hi folks, I'm looking for a way to include a standard ES6 component in a vueGWT app. The custom element is registered to the DOM outside of vue, and I can include it in a vue template and it will work, however Vue will complain about the element being improperly registered / unknown (vue.js:584 [Vue warn]: Unknown custom element: <sizer-element> - did you register the component correctly?) - to solve this I've added v-pre to the custom element so vue will ignore it and the warning goes away. However, I also have a ref on the element so I can fire some (resize) events into it programmatically - this is no longer evaluated when I add v-pre and so the element I need a reference to will be undefined.

Does anyone have any ideas to how I might achieve this without warnings?

Adrien Baron

@adrienbaron

@yogh_gitlab hey :), just pointing out, those warnings should not display in production mode (will only display on dev mode) so it might not be too bad

Also, is it a standard Vue.js component or is it a Web Component?

Yogh

@yogh_gitlab

it's a Web Component, the extends HTMLElement { sort of thing

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements

Adrien Baron

@adrienbaron

Hum ok, I wonder if Vue.js also doesn't warn on that, they assume all things in templates are Vue components and warn you in case you forgot to register them.

Not sure how to tell Vue that this is OK

Yogh

@yogh_gitlab

just found there's also Vue.config.ignoredElements but I think I might run into the same problem where the ref won't work

Adrien Baron

@adrienbaron

Ah! Yes definitly use that, I think you probably won't have the issue

v-pre makes Vue think this is just "text" so it probably break the ref. The ignoreElements seems to be explicitely defined for your use case 👍

(Meaning telling vue "Yeah I know, you don't know this native element, but trust me, it exists")

Yogh

@yogh_gitlab

Vue.getConfig().addIgnoredElement("sizer-element"); works brilliantly, thanks!

Adrien Baron

@adrienbaron

@yogh_gitlab great! You're probably the first person to use it in Vue GWT ^^

Yogh

@yogh_gitlab

wups it actually didn't, got a cast exception when the addIgnoredElement method tried to cast from String to JsString

this works though:

    final JsString str = Js.cast(ignoredElement);
    this.ignoredElements.push(str);

I believe it tries to cast to a list because .push is a T... varargs

Colin Alworth

@niloc132

varargs in java means you wrap in a java array - but varargs in jsinterop means it will behave as expected in js

if you examine the generated JS, you'll see that the compiler likely did what you expected with regard to the array at least

the String vs JsString is a different issue than varargs i _think? unless i'm misunderstanding you

i may be totally misunderstanding you. what exactly is the classcastexception error message?

24 replies

Matt Davis

@mdavis95

Is Vue gwt going to support Vue 3?

https://twitter.com/vuejsdevelopers/status/1283580110650724357?s=19

Where communities thrive

People

Repo info

Activity