VueGWT/vue-gwt

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

Candide Kemmler

@ckemmler

can the is attribute be dynamic?

Adrien Baron

@adrienbaron

Cool thing is you can also bind it:

<span :is="modalType" />

Yep

Candide Kemmler

@ckemmler

Awesome!

Thanks @adrienbaron !

Adrien Baron

@adrienbaron

Only thing is the component needs to be registered globally

Using Vue.component("my-component", MyComponent.class)

So with that you should be able to have some kind of modal manager where you can stack modal definitions and it just loop through it and renders them :thumbsup:

Payam Meyer

@payammeyer

@adrienbaron I've recently noticed that I'm getting the following warning:

vue.esm.js:629 [Vue warn]: Invalid prop: type check failed for prop "step". Expected Number with value 2, got String with value "2"

for router query properties that are non-string. The current implementation of vuegwt router forces us to pass in Strings. Is that something you could fix? Or am I doing something wrong?

I can get around it, but I think it would be nice if location took a query map of JsPropertyMap<Object> if that's possible.

Adrien Baron

@adrienbaron

@payammeyer Hum, I think router query property are always strings, they get set on the query from the browser so they always get passed to you as String

It probably works right now if you put a number, because in JS the string "2" will get turned to a number if you try to do an operation with it and a Number

You can check this is right by trying to set the query, and console.log your query prop, you'll probably see the String and not a number

Payam Meyer

@payammeyer

ok so I should be handling it after the property is passed in, that's ok, thanks.

Adrien Baron

@adrienbaron

(for example set the query in the URL yourself and reload the page, i'm pretty sure you'll get a string in your query prop :))

yes :)

You should parse the string yourself :)

Payam Meyer

@payammeyer

I'm fairly sure though I didn't see the warning before, it popped up recently through version upgrades, that's what got me wondering.

Adrien Baron

@adrienbaron

oh right, this is because we added a behavior for @Prop to have automatic type checking

Before we were not passing the type at all to Vue, unless you passed typeCheck=true to @Prop

In latest SNAPSHOT we now by default map the Java type to a JS Type and pass that for every @Prop in the prop definition to Vue

This let Vue do a runtime check (in dev mode) to check that the type getting in the Prop matches the declaration

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

Where communities thrive

People

Repo info

Activity