v1.0-beta-8

What's new

Using IsVueComponent instead of VueComponent

This version introduces a breaking change necessary for supporting GWT 3 in the future.

Instead of extending the VueComponent class, components must now implement the IsVueComponent interface.

This interface provides a default method vue() that returns your Component as a VueComponent and lets you call all the Vue instance methods.

For example, this Component:

@Component
public class TodoComponent extends VueComponent {
    @Prop
    @JsProperty
    Todo todo;

    @JsMethod
    public void removeTodo() {
        this.$emit("removeTodo", todo);
    }
}

Should be changed to:

@Component
// Change extends to implements
public class TodoComponent implements IsVueComponent { 
    @Prop
    @JsProperty
    Todo todo;

    @JsMethod
    public void removeTodo() {
        // Change this.$emit to vue().$emit
        vue().$emit("removeTodo", todo);
    }
}

We know that this is quite a big breaking change, but our tests with pre-versions of GWT 3 showed that it is necessary. We decided to introduce it now to make the transition as smooth as possible once GWT 3 is released.

See issue #30 for details.

If you encounter any problems don't hesitate to come ask us on our Vue GWT Gitter channel.

Support for Scoped Style

Scoped Style lets you define your Component's CSS alongside it's template. This CSS will only apply to your Component and won't mess with other elements in the page.

For example:

<div>
    <h1>My Title</h1>
    <p>Sample paragraph</p>
</div>
<style scoped>
    h1 {color: red;}
    p {color: blue;}
</style>

This template will give you a red title and a blue paragraph. However other h1 and p in the page won't get the style.

See issue #19 for details.

A big thanks to @slavap for contributing this feature 🎉!

Improvements on Vue JsInterop

• Vue.$nextTick() callback doesn't require a return value anymore.
• $parent(), $root(), $children(), $mount() and $el() are now generic methods.

Added convenience methods to get $refs:

• <T> T $ref(String refName)
• <T> JsArray<T> $refArray(String refName)
• boolean $isRefArray(String refName)

Added integration tests to Vue GWT

We added some integration tests to Vue GWT. Those tests are written using Chai and run in Karma. You can see the full list in our sources.
We will increase coverage in the next versions and write tests for new features/bug fixes.

A big thanks to @jtrentes for his work on this 🎉!

Breaking Changes

$emit doesn't box primitive types anymore

$emit used to box primitive types. Calling $emit(10) would send an event with an Integer 10 as value, and trying to get it as an int in the parent would break at runtime.
This is now fixed, and types are now always preserved:

• Calling $emit(10) will emit an event with int 10 as value.
• Calling $emit((Integer) 10) will emit an event with Integer 10 as value.

See #31 for details.

Rename vue() to getComponent() in VueGwtWidget

In VueGwtWidget (our compatibility Widget for GWT Widgets) the vue() method has been renamed to getComponent().
This is to avoid confusion with the new vue() method from the IsVueComponent interface.

Bug Fixes

• Recursive property bindings are now validated. Fix #33
• Importing a Component missing the @component annotation now throws an explicit error. Fix #34
• char[] are correctly converted to strings in templates. Fix #36