Beta 9 Release Note

Beta 9 is here 🎉! This is a big one, with an improved API, lots of new features, and more type safety in your templates.

What's new

Some changes were needed to make Vue GWT compatible with the upcoming GWT3. While doing these changes we found solutions that also improved the APIs.

@Data and @Prop annotation

@Data

The biggest change to the API is the new @Data annotation. This annotation replaces @JsProperty to mark data fields in your components.
A field with this annotation gets automatically observed recursively by Vue.js.

@Component
public class MyComponent implements IsVueComponent {
    @Data Todo myTodo;
}

@Prop

@Prop fields don't need the @JsProperty anymore 🎉!

@Component
public class MyComponent implements IsVueComponent {
    @Prop Todo myTodoProp;
}

About Collections

We aren't completely free of the @JsProperty annotation yet. To be observed, collections fields MUST have the @JsProperty annotation wherever they are. This includes @Prop and @Data fields.

@Component
public class MyComponent implements IsVueComponent {
    @Data
    @JsProperty
    List<Todo> myTodoList;
}

Luckily Beta 9 includes a validator that will throw a compile time error if it finds an invalid collection field, and will check your @Data types recursively for you.
If for some reason you want to disable this validation on a given field, you can use @SuppressWarnings("vue-gwt-collections").

In the future we plan on using ES6 proxies for Observation. This will remove all constraints on Collections, but will come as the cost of not being compatible with IE 11 and bellow. You will however have the choice of the method of Observation you want to use on your project, in case you care about IE compatibility.

Scoped Slots support #37

Scoped Slots are a pretty cool feature from Vue.js and were one of the last big feature missing in Vue GWT, they are now present in Beta 9!

We also support destructuring the slot-scope attribute. And obviously, all usages of slot-scope are typed.

<vue-gwt:import class="com.axellience.Todo"/>

<todo-list :todos="todos">
    <template slot-scope="{ Todo item }">
        <img class="icon" :src="item.getIcon()"/>
        <span class="title">{{ item.getTitle() }}</span>
    </template>
</todo-list>

Head over to our documentation to learn more.

@Ref support

Instead of using vue().$ref() you can now use the @Ref annotation to reference an element or a component from your template.

<my-child ref="child"/>

@Ref ChildComponent child;

This binding is typed and will throw an explicit error at compile time if the type of the @Ref field doesn't match the ref element. It will also throw if it can't find the ref for a given @Ref field.

Checkout our documentation to learn more.

DOM property binding type validation

We now enforce types when binding to a property of a DOM element.

For example this will fail at compile time: <input :disabled="myTodo"/>, as myTodo is not of type boolean.

Thanks to @niloc132 for the idea and to Elemento for the mapping between DOM tag and Elemental2 Java class.

SCSS support in Scoped Style #40

@slavap contributed once more and added support for SCSS to scoped style in components template.
Just add lang="scss" to your scoped style definition and the SCSS will be automatically processed to CSS for you when the template is compiled. You can even use SCSS imports (relative to your current HTML file). Also as with CSS, all the rules are scoped and won't impact any other element in your page.

<div>
  <h1 class="alert-message">Red Alert</h1>
</div>

<style lang="scss" scoped>
  @import '../global/my-variables';
  
  .alert-message {
    color: $alert-color;
  }
</style>

Static imports in the Template #39

You can now use static imports in the template.

<vue-gwt:import static="com.axellience.MyClass.STATIC_FIELD"/>
<vue-gwt:import static="com.axellience.MyClass.staticMethod"/>

<div>{{ STATIC_FIELD + staticMethod("HELLO") }}</div>

Other Features

• Computed properties don't have to be getters anymore.
  If the name of a @Computed method is not detected as a getter, then the name of the method will be used as the name of the property.
  @Computed String myProperty() {} will declare a property myProperty in your template.
• Support isImmediate on @Watch.
• Name of the component is now detected automatically when registering globally, or using VueGwtWidget.
  You can for example do: Vue.component(MyComponentFactory.get()), this will register <my-component> globally.
  (Remember that local registration should always be prefered when possible as it adds type safety to property bindings in the template).

Breaking Changes

• When instantiating the root component, registering a global component or using VueGwtWidget, you now have to pass the instance of your component factory.
  For example: Vue.attach("#myElement", MyComponent.class) becomes Vue.attach("#myElement", MyComponentFactory.get()).
  This negates the need to expose components factories to the window global object.
  This also allows for tree shaking to work correctly as GWT can detect wether or not a given component is used.
  ⚠️ Local components are still registered by passing their class to the @Component annotation: @Component(components = MyChildComponent.class)
• v-model now only works on @Data fields directly, v-model="myField.todo" will throw an explicit exception at compile time.
• vue().$watch does not accept the string syntax anymore, use @Watch or vue().$watch(() -> this.myValue) instead.

Bug Fixes

• In some cases, if a @Computed method didn't do null checks initialisation of the Component could fail.

Thanks to @mdavis95 and @payammeyer for their help testing this release!

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

Beta 7 of Vue GWT is here 🎉!

What's new

Annotation Processors for Templates

Annotation Processors are now used for template processing, this has several advantages:

• Errors in HTML templates are caught by your IDE at build time.
• Less boilerplate classes are generated.
• No more dependency on GWT 2.x generators. Should make Vue GWT compatible with GWT 3.x out of the box.

⚠This require some setup on your project and IDE to work. Please check our migration guide to see how to update your project.

New HTML parser

We migrated from jsoup to Jericho for template HTML parsing.

When encountering a tag at an invalid place in HTML, jsoup was dropping it silently whereas Jericho is keeping it. This mean that for example this template will now work correctly:

<table>
    <tr>
        <my-child-component/>
    </tr>
</table>

See issue #25 for details.

Upgraded to Vue.js v2.5.16

Bug Fixes

• Property binding is now checked when using camelCase or the is attribute. Fix #24
• Java methods are generated correctly when using a loop variable multiple time in a Template Expression. Fix #26

Breaking Changes

VueGwtWidget is now in it's own maven dependency. This allow to depend on Vue GWT without including GWT User if you don't need it.
If you are currently using it simply add this Maven Dependency to your pom.xml:

<dependency>
	<groupId>com.axellience</groupId>
	<artifactId>vue-gwt-gwt2</artifactId>
	<version>1.0.0-beta-7</version>
</dependency>

And this in your gwt.xml:

<inherits name='com.axellience.vuegwt.GWT2'/>

Vue GWT beta 6 is here 🎉!

It's packed with new features and bug fixes.

What's new

Compile time @Prop binding validation (See #21)

If you have a MyTodoComponent with a required @Prop todo, then the following will break at compile time:

<my-todo :todo="user"/>
<my-todo :todo="123"/>
<my-todo todo="someValue"/>
<my-todo/>

Vue.js Dev Mode

VueGWT.init() now injects Vue.js development runtime in GWT SuperDevMode.

This lets you use the Vue.js devtools for Chrome or Firefox with Vue GWT 🚀.

Open the your browser dev tools, reload your page and go to the Vue tab to see all your Components, edit their properties and more!

It's also possible to force development mode when not using SuperDevMode by adding: <set-property name="vuegwt.environment" value="development"/> to your app .gwt.xml. Beware that development version of Vue.js is not minified.

And more:

• Support expressions in Range v-for. (See #22)
• Throw an explicit error for empty bindings. (See #18)
• Throw an explicit error if @PropValidator methods don't return a boolean. (See #20)
• Upgrade to Vue.js 2.5.13
• Upgrade to elemental2 RC1 and jsinterop-base RC1.

Bug fixes

• Fix @Computed properties conflicting with injection. (Fixes #23)

Breaking changes

• Type of range v-for loop variable must now be explicitly set.
  Replace v-for="i in 10" with v-for="int i in 10".

• Renamed propertyName from various annotations to value. (See #20)
  You should now use @Watch("myProperty") instead of @Watch(propertyName = "myProperty").
  List of affected annotations: @Computed, @PropDefault, @PropValidator, @Watch.

• Removed @Style annotation and vuegwt:import for style, as planed in beta-5.
  This is to make Vue GWT less dependent of GWT 2.x. Check here to see how to use CssResources in your templates.

5th beta release of Vue GWT.

What's new:

• Integrated Custom Elements (Web Components) support 🎉! Turn any of your Vue GWT Component into a Custom Element in one line 👍.
• $props can now be passed in template (Closes #17)
• Support @Emit annotation same as vue-property-decorator (Closes #14)
• Upgrade to JsInterop base beta-3 and Elemental2 beta-2
• Unboxed primitive types don't have to be casted anymore in templates. You can do :my-property="true" instead of :my-property="(boolean) true" (See #15)

Deprecated:

• @Style annotation and vue-gwt:import for style have been deprecated, they will be removed in beta-6. This is to make Vue GWT less dependent of GWT 2.x. Check here to see how to use CssResources in your templates.

Breaking changes:

• $props() component method is replaced with an attribute named $props for consistency
• Vue.nextTick() now only takes a callback as parameter
• Due to Elemental2 upgrade Array<> is now JsArray<>

Thanks a lot to @slavap for his feedback that helped improve this release!

4th beta release of Vue GWT 🎉

This release brings a lot of changes:

• Refactor in Maven modules (Closes #8)
• Uses Elemental2 and JsInterop base instead of relying on custom implementations
• Drop use of GWT resources and only use a single GWT 2.x generator for templates
• Update to Vue.js 2.5.5 (Closes #6)

It also brings some fixes:

• Fix issues with Collection and Map observation (Closes #9)
• VueGwtPanel is renamed to VueGwtWidget and now behaves correctly when removed (Closes #7)
• The name of a Component is taken into account when importing it in another Component (Closes #10)
• JsProperty of type array doesn't work #12
• Components with static render functions don't compile #11

To update your project from beta-2 please refer to our update guide.
We tried to put all changes that were necessary but breaking in a single release.
In the future release will try to keep breaking changes to a minimum.

Second beta release of Vue GWT.

What's new?

• Support for Dagger2 injection
• Upgrade to Vue.js 2.4.3

First beta release of Vue GWT.