v1.0-beta-9

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!