Merge branch 'release/v1.0-beta-5'

Author: adrienbaron

README.md

@@ -7,7 +7,7 @@
 </p>
 
 Vue GWT integrates [Vue.js](https://vuejs.org/) with [GWT 2.8](http://www.gwtproject.org/) using [JsInterop](https://github.com/google/jsinterop-base) and [Elemental2](https://github.com/google/elemental2).
-It lets you write Vue.js components in Java.
+It lets you write Vue Components in Java.
 
 <p align="center">
     <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT License"/>
@@ -18,6 +18,7 @@ It lets you write Vue.js components in Java.
 
 * **Vue.js** Components with a **Java controller**
 * Template expressions **type checking** at compile time
+* [**Web Components** (Custom Elements)](advanced/custom-elements.md) support
 * **HTML templates are compiled** during Java Compilation (only requires Vue.js runtime)
 * Use **regular Java Objects and Collections** in your templates
 * Supports [**injection** in Components](https://axellience.github.io/vue-gwt/essential/dependency-injection.html)

core/pom.xml

@@ -7,7 +7,7 @@
 	<parent>
 		<groupId>com.axellience</groupId>
 		<artifactId>vue-gwt-parent</artifactId>
-		<version>1.0-beta-4</version>
+		<version>1.0-beta-5</version>
 	</parent>
 
 	<artifactId>vue-gwt-core</artifactId>

core/src/main/java/com/axellience/vuegwt/core/annotations/component/Emit.java

@@ -0,0 +1,19 @@
+package com.axellience.vuegwt.core.annotations.component;
+
+import java.lang.annotation.Retention;
+import java.lang.annotation.Target;
+
+import static java.lang.annotation.ElementType.METHOD;
+import static java.lang.annotation.RetentionPolicy.CLASS;
+
+/**
+ * Method annotated with this will emit an event automatically when called
+ * Similar to @Emit() from vue-property-decorator
+ * https://github.com/kaorun343/vue-property-decorator
+ */
+@Target(METHOD)
+@Retention(CLASS)
+public @interface Emit
+{
+    String value() default "";
+}

core/src/main/java/com/axellience/vuegwt/core/annotations/style/Style.java

@@ -7,10 +7,14 @@
 import static java.lang.annotation.RetentionPolicy.SOURCE;
 
 /**
- * Annotation placed on Vue Components
+ * Annotation placed on Style
+ * Will be removed in Vue GWT beta-6.
+ * Please check https://axellience.github.io/vue-gwt/gwt-integration/client-bundles-and-styles.html#styles
+ * to see how to use styles in your templates without this annotation.
  * @author Adrien Baron
  */
 @Target(TYPE)
 @Retention(SOURCE)
+@Deprecated
 public @interface Style
 {}

core/src/main/java/com/axellience/vuegwt/core/client/Vue.java

@@ -2,14 +2,16 @@
 
 import com.axellience.vuegwt.core.client.component.VueComponent;
 import com.axellience.vuegwt.core.client.component.options.VueComponentOptions;
+import com.axellience.vuegwt.core.client.customelement.CustomElementOptions;
+import com.axellience.vuegwt.core.client.customelement.VueCustomElementType;
 import com.axellience.vuegwt.core.client.directive.options.VueDirectiveOptions;
 import com.axellience.vuegwt.core.client.jsnative.jsfunctions.JsRunnable;
 import com.axellience.vuegwt.core.client.tools.VueGWTTools;
 import com.axellience.vuegwt.core.client.vue.VueConfig;
 import com.axellience.vuegwt.core.client.vue.VueFactory;
 import com.axellience.vuegwt.core.client.vue.VueJsConstructor;
-import elemental2.core.Array;
 import elemental2.dom.Element;
+import jsinterop.annotations.JsMethod;
 import jsinterop.annotations.JsOverlay;
 import jsinterop.annotations.JsPackage;
 import jsinterop.annotations.JsProperty;
@@ -133,10 +135,53 @@ public static <T extends VueComponent> VueJsConstructor<T> extendJavaComponent(
         return extendedVueJsConstructor;
     }
 
+    @JsOverlay
+    public static <T extends VueComponent> VueCustomElementType<T> customElement(
+        String componentTag, Class<T> vueComponentClass)
+    {
+        return Vue.customElement(componentTag, vueComponentClass, new CustomElementOptions<>());
+    }
+
+    @JsOverlay
+    public static <T extends VueComponent> VueCustomElementType<T> customElement(
+        String componentTag, VueFactory<T> vueFactory)
+    {
+        return Vue.customElement(componentTag, vueFactory, new CustomElementOptions<>());
+    }
+
+    @JsOverlay
+    public static <T extends VueComponent> VueCustomElementType<T> customElement(
+        String componentTag, VueJsConstructor<T> vueJsConstructor)
+    {
+        return Vue.customElement(componentTag, vueJsConstructor, new CustomElementOptions<>());
+    }
+
+    @JsOverlay
+    public static <T extends VueComponent> VueCustomElementType<T> customElement(
+        String componentTag, Class<T> vueComponentClass, CustomElementOptions<T> options)
+    {
+        return Vue.customElement(componentTag, VueGWT.getFactory(vueComponentClass), options);
+    }
+
+    @JsOverlay
+    public static <T extends VueComponent> VueCustomElementType<T> customElement(
+        String componentTag, VueFactory<T> vueFactory, CustomElementOptions<T> options)
+    {
+        return Vue.customElement(componentTag, vueFactory.getJsConstructor(), options);
+    }
+
+    @JsOverlay
+    public static <T extends VueComponent> VueCustomElementType<T> customElement(
+        String componentTag, VueJsConstructor<T> vueJsConstructor, CustomElementOptions<T> options)
+    {
+        VueCustomElementLibInjector.ensureInjected();
+        return Vue.customElementNative(componentTag, vueJsConstructor, options);
+    }
+
     // @formatter:off
     public static native <T extends VueComponent> VueJsConstructor<T> extend(VueComponentOptions<T> componentOptions);
 
-    public static native void nextTick(JsRunnable callback, Array context);
+    public static native void nextTick(JsRunnable callback);
 
     public static native <T> T set(Object object, String key, T value);
     public static native boolean set(Object object, String key, boolean value);
@@ -151,6 +196,9 @@ public static <T extends VueComponent> VueJsConstructor<T> extendJavaComponent(
     public static native void directive(String id, VueDirectiveOptions directiveOptions);
     public static native VueDirectiveOptions directive(String id);
 
+    @JsMethod(name = "customElement")
+    public static native <T extends VueComponent> VueCustomElementType<T> customElementNative(String componentTag, VueJsConstructor<T> vueJsConstructor, CustomElementOptions options);
+
     public static native <T extends VueComponent> void component(String id, VueComponentOptions<T> componentOptions);
     public static native <T extends VueComponent> void component(String id, VueJsConstructor<T> vueJsConstructor);
     public static native <T extends VueComponent> VueJsConstructor<T> component(String id);

core/src/main/java/com/axellience/vuegwt/core/client/VueCustomElementLibInjector.java

@@ -0,0 +1,32 @@
+package com.axellience.vuegwt.core.client;
+
+import elemental2.dom.DomGlobal;
+import elemental2.dom.HTMLScriptElement;
+import jsinterop.base.JsPropertyMap;
+
+class VueCustomElementLibInjector
+{
+    static void ensureInjected()
+    {
+        if (isCustomElementInjected())
+            return;
+
+        HTMLScriptElement scriptElement =
+            (HTMLScriptElement) DomGlobal.document.createElement("script");
+        scriptElement.text = VUE_CUSTOM_ELEMENT;
+        DomGlobal.document.body.appendChild(scriptElement);
+    }
+
+    private static boolean isCustomElementInjected()
+    {
+        return ((JsPropertyMap) DomGlobal.window).get("VueCustomElement") != null;
+    }
+
+    /**
+     * vue-custom-element v1.4.2
+     * (c) 2017 Karol Fabjańczuk
+     * Modified by Adrien Baron
+     * @license MIT
+     */
+    private static String VUE_CUSTOM_ELEMENT = "!function(e,t){\"object\"==typeof exports&&\"undefined\"!=typeof module?module.exports=t():\"function\"==typeof define&&define.amd?define(t):e.VueCustomElement=t()}(this,function(){\"use strict\";function e(e,t){return e.__proto__=t,e}function t(e,t){if(!e)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return!t||\"object\"!=typeof t&&\"function\"!=typeof t?e:t}function n(){return Reflect.construct(HTMLElement,[],this.__proto__.constructor)}function o(e){function o(){!0===i.shadow&&HTMLElement.prototype.attachShadow&&this.attachShadow({mode:\"open\"}),i.constructorCallback.call(this,this)}function r(){i.connectedCallback.call(this,this)}function c(){i.disconnectedCallback.call(this,this)}function a(e,t,n){i.attributeChangedCallback.call(this,e,t,n,this)}var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(\"undefined\"!=typeof customElements){if(f){var u=function(e){function r(e){var n;!function(e,t){if(!(e instanceof t))throw new TypeError(\"Cannot call a class as a function\")}(this,r);var c=t(this,(r.__proto__||Object.getPrototypeOf(r)).call(this)),a=e?HTMLElement.call(e):c;return o.call(a),n=a,t(c,n)}return function(e,t){if(\"function\"!=typeof t&&null!==t)throw new TypeError(\"Super expression must either be null or a function, not \"+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(r,n),d(r,null,[{key:\"observedAttributes\",get:function(){return i.observedAttributes||[]}}]),r}();return u.prototype.connectedCallback=r,u.prototype.disconnectedCallback=c,u.prototype.attributeChangedCallback=a,customElements.define(e,u),u}var l=function(e){var t=e?HTMLElement.call(e):this;return o.call(t),t};return l.observedAttributes=i.observedAttributes||[],l.prototype=Object.create(HTMLElement.prototype,{constructor:{configurable:!0,writable:!0,value:l}}),l.prototype.connectedCallback=r,l.prototype.disconnectedCallback=c,l.prototype.attributeChangedCallback=a,customElements.define(e,l),l}}function r(e){for(var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=e.length-t,o=new Array(n);n--;)o[n]=e[n+t];return o}function c(e){var t=e,n=[\"true\",\"false\"].indexOf(e)>-1,o=parseFloat(t,10),r=!isNaN(o)&&isFinite(t);return n?t=\"true\"===t:r&&(t=o),t}function a(e,t){if(e&&e.length)e.forEach(function(e){var n=h(e);-1===t.camelCase.indexOf(n)&&t.camelCase.push(n)});else if(e&&\"object\"===(void 0===e?\"undefined\":m(e)))for(var n in e){var o=h(n);-1===t.camelCase.indexOf(o)&&t.camelCase.push(o)}}function i(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],t=arguments[1],n=[];return r(e).forEach(function(e){if(\"#text\"===e.nodeName)e.nodeValue.trim()&&n.push(t(\"span\",e.nodeValue));else if(\"#comment\"!==e.nodeName){var o=function(e){var t={};return r(e.attributes).forEach(function(e){t[\"vue-slot\"===e.nodeName?\"slot\":e.nodeName]=e.nodeValue}),t}(e),c={attrs:o,domProps:{innerHTML:e.innerHTML}};o.slot&&(c.slot=o.slot,o.slot=void 0),n.push(t(e.tagName,c))}}),n}function u(e,t){for(var n=arguments.length,o=Array(n>2?n-2:0),r=2;r<n;r++)o[r-2]=arguments[r];var c=function(e,t){var n={bubbles:!1,cancelable:!1,detail:t},o=void 0;return\"function\"==typeof window.CustomEvent?o=new CustomEvent(e,n):(o=document.createEvent(\"CustomEvent\")).initCustomEvent(e,n.bubbles,n.cancelable,n.detail),o}(t,[].concat(o));e.dispatchEvent(c)}function l(e,t,n,o,r){if(!e.__vue_custom_element__){var a=function(e,t,n){var o=t.propsData||{};return n.hyphenate.forEach(function(t,r){var a=e.attributes[t],i=n.camelCase[r];\"object\"!==(void 0===a?\"undefined\":m(a))||a instanceof Attr?a instanceof Attr&&a.value&&(o[i]=c(a.value)):o[i]=a}),o}(e,n.options,o),l=n.extend({beforeCreate:function(){this.$emit=function(){for(var t,n=arguments.length,o=Array(n),r=0;r<n;r++)o[r]=arguments[r];u.apply(void 0,[e].concat(o)),this.__proto__&&(t=this.__proto__.$emit).call.apply(t,[this].concat(o))}}}),s=e.cloneNode(!0).childNodes,f={propsData:a,props:o.camelCase,computed:{reactiveProps:function(){var e=this,t={};return o.camelCase.forEach(function(n){t[n]=e[n]}),t}},render:function(e){var t={props:this.reactiveProps};return e(l,t,i(s,e))}};if(r.shadow&&e.shadowRoot?(e.shadowRoot.innerHTML=\"<div></div>\",f.el=e.shadowRoot.children[0]):(e.innerHTML=\"<div></div>\",f.el=e.children[0]),function(e,t){t.camelCase.forEach(function(n,o){Object.defineProperty(e,n,{get:function(){return this.__vue_custom_element__[n]},set:function(e){if(\"object\"!==(void 0===e?\"undefined\":m(e))&&\"function\"!=typeof e||!this.__vue_custom_element__)this.setAttribute(t.hyphenate[o],c(e));else{var n=t.camelCase[o];this.__vue_custom_element__[n]=e}}})})}(e,o),e.__vue_custom_element__=new t(f),r.shadow&&r.shadowCss&&e.shadowRoot){var d=document.createElement(\"style\");d.type=\"text/css\",d.appendChild(document.createTextNode(r.shadowCss)),e.shadowRoot.appendChild(d)}e.removeAttribute(\"vce-cloak\"),e.setAttribute(\"vce-ready\",\"\"),u(e,\"vce-ready\")}}function s(e){e.customElement=function(t,n){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=function(e){var t={camelCase:[],hyphenate:[]},n=e.options;return n?(n.mixins&&n.mixins.forEach(function(e){a(e.props,t)}),a(n.props,t),t.camelCase.forEach(function(e){t.hyphenate.push(b(e))}),t):t}(n);return o(t,{constructorCallback:function(e){\"function\"==typeof r.constructorCallback&&r.constructorCallback.call(this,e)},connectedCallback:function(t){this.__detached__||l(this,e,n,i,r),\"function\"==typeof r.connectedCallback&&r.connectedCallback.call(this,t),this.__detached__=!1},disconnectedCallback:function(e){var t=this;this.__detached__=!0,\"function\"==typeof r.disconnectedCallback&&r.disconnectedCallback.call(this,e),setTimeout(function(){t.__detached__&&t.__vue_custom_element__&&t.__vue_custom_element__.$destroy(!0)},r.destroyTimeout||3e3)},attributeChangedCallback:function(e,t,n,o){if(this.__vue_custom_element__&&void 0!==n){var a=h(e);\"function\"==typeof r.attributeChangedCallback&&r.attributeChangedCallback.call(this,o,e,t,n),this.__vue_custom_element__[a]=c(n)}},observedAttributes:i.hyphenate,shadow:!!r.shadow&&!!HTMLElement.prototype.attachShadow})}}Object.setPrototypeOf=Object.setPrototypeOf||e;e.bind(Object);var f=\"undefined\"!=typeof Symbol&&\"undefined\"!=typeof Reflect,d=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,\"value\"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}();Object.setPrototypeOf(n.prototype,HTMLElement.prototype),Object.setPrototypeOf(n,HTMLElement);var p=/-(\\w)/g,h=function(e){return e.replace(p,function(e,t){return t?t.toUpperCase():\"\"})},_=/([^-])([A-Z])/g,b=function(e){return e.replace(_,\"$1-$2\").replace(_,\"$1-$2\").toLowerCase()},m=\"function\"==typeof Symbol&&\"symbol\"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&\"function\"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?\"symbol\":typeof e};return s.createElement=function(e){return new e},\"undefined\"!=typeof window&&window.Vue&&(window.Vue.use(s),s.installed&&(s.installed=!1)),s});";
+}

core/src/main/java/com/axellience/vuegwt/core/client/VueGWT.java

@@ -12,7 +12,7 @@
 import jsinterop.annotations.JsIgnore;
 import jsinterop.annotations.JsPackage;
 import jsinterop.annotations.JsType;
-import jsinterop.base.JsConstructorFn;
+import jsinterop.base.Js;
 import jsinterop.base.JsPropertyMap;
 
 import javax.inject.Provider;
@@ -156,7 +156,7 @@ public static <T extends VueComponent> VueJsConstructor<T> getJsConstructor(
     public static <T extends VueComponent> ComponentJavaConstructor getJavaConstructor(
         Class<T> vueComponentClass)
     {
-        return (ComponentJavaConstructor) JsConstructorFn.of(vueComponentClass);
+        return (ComponentJavaConstructor) Js.asConstructorFn(vueComponentClass);
     }
 
     /**

core/src/main/java/com/axellience/vuegwt/core/client/VueLibInjector.java

@@ -9,7 +9,7 @@
 import com.axellience.vuegwt.core.client.component.options.watch.WatcherRegistration;
 import com.axellience.vuegwt.core.client.vnode.ScopedSlot;
 import com.axellience.vuegwt.core.client.vnode.VNode;
-import elemental2.core.Array;
+import elemental2.core.JsArray;
 import elemental2.dom.Element;
 import jsinterop.annotations.JsOverlay;
 import jsinterop.annotations.JsPackage;
@@ -38,17 +38,17 @@ public abstract class VueComponent
     @JsProperty private VueComponentOptions $options;
     @JsProperty private VueComponent $parent;
     @JsProperty private VueComponent $root;
-    @JsProperty private Array<VueComponent> $children;
+    @JsProperty private JsArray<VueComponent> $children;
     @JsProperty private Object $refs;
-    @JsProperty private JsPropertyMap<Array<VNode>> $slots;
+    @JsProperty private JsPropertyMap<JsArray<VNode>> $slots;
     @JsProperty private JsPropertyMap<ScopedSlot> $scopedSlots;
     @JsProperty private boolean $isServer;
     @JsProperty private Object $ssrContext;
-    @JsProperty private Object $props;
     @JsProperty private Object $vnode;
     @JsProperty private JsPropertyMap<String> $attrs;
     @JsProperty private Object $listeners;
 
+    @JsProperty public JsPropertyMap<Object> $props;
     @JsProperty public String _uid;
 
     // @formatter:off
@@ -115,7 +115,7 @@ public abstract class VueComponent
     }
 
     @JsOverlay
-    public final Array<VueComponent> $children()
+    public final JsArray<VueComponent> $children()
     {
         return $children;
     }
@@ -127,7 +127,7 @@ public abstract class VueComponent
     }
 
     @JsOverlay
-    public final JsPropertyMap<Array<VNode>> $slots()
+    public final JsPropertyMap<JsArray<VNode>> $slots()
     {
         return $slots;
     }
@@ -150,12 +150,6 @@ public abstract class VueComponent
         return $ssrContext;
     }
 
-    @JsOverlay
-    public final Object $props()
-    {
-        return $props;
-    }
-
     @JsOverlay
     public final Object $vnode()
     {