Update the documentation to be closer to Vue.js official one

adrienbaron · adrienbaron · commit c9d3419adbd1 · 2017-09-10T19:47:37.000+02:00
diff --git a/docs-source/book/SUMMARY.md b/docs-source/book/SUMMARY.md
@@ -8,7 +8,7 @@
     * [Handling User Input](introduction/README.md#handling-user-input)
     * [Composing with Components](introduction/README.md#composing-with-components)
 
-## Essential Topics
+## Essentials
 * [The Vue Instance](essential/the-vue-instance.md)
 * [Template Syntax](essential/template-syntax.md)
 * [Computed Properties and Watchers](essential/computed-and-watchers.md)
@@ -24,9 +24,24 @@
     * [Content Distribution with Slots](essential/components.md#content-distribution)
     * [Dynamic Components](essential/components.md#dynamic-components)
 
+## Transitions & Animation
+* [Enter/Leave & List Transitions](transitions/transitions.md)
+* [State Transitions](transitions/transitioning-state.md)
+
+## Reusability & Composition
+* [Extending Components](composition/extending-components.md)
+    * [Extending Java Components](composition/extending-components.md#extending-java-component)
+    * [Extending JS Components](composition/extending-components.md#extending-js-component)
+* [Custom Directives](composition/custom-directives.md)
+* [Render Function](composition/render-function.md)
+    * [Basics](composition/render-function.md#basics)
+    * [The `VNodeBuilder` Instance](composition/render-function.md#v-node-builder-instance)
+    * [Replacing Template Features with Plain Java](composition/render-function.md#replacing-template-feature-in-java)
+* [Plugins](composition/plugins.md)
+
 ## Integration with GWT
 * [Styles](gwt-integration/styles.md)
-* [Client Bundles (Images)](gwt-integration/client-bundles.md)
+* [Client Bundles](gwt-integration/client-bundles.md)
 * [User Panels](gwt-integration/user-panels.md)
 * [JsInterop](js-interop/README.md)
     * [JsObject](js-interop/README.md#js-object)
@@ -35,18 +50,14 @@
     * [array](js-interop/README.md#array)
     * [JsTools](js-interop/README.md#js-tools)
 
+## Tooling
+* [Unit Testing](tooling/unit-testing.md)
+
+## Scaling Up
+* [Routing](scaling-up/routing.md)
+
 ## Advanced Topics
 * [Integrating With JS Components](advanced/integrating-with-js-components.md)
     * [Using JS Components in Java](advanced/integrating-with-js-components.md#using-js-components-in-java)
     * [Using our Java Components in JS](advanced/integrating-with-js-components.md#using-java-components-in-js)
-* [Extending Components](advanced/extending-components.md)
-    * [Extending Java Components](advanced/extending-components.md#extending-java-component)
-    * [Extending JS Components](advanced/extending-components.md#extending-js-component)
-* [Render Function](advanced/render-function.md)
-    * [Basics](advanced/render-function.md#basics)
-    * [The `VNodeBuilder` Instance](advanced/render-function.md#v-node-builder-instance)
-    * [Replacing Template Features with Plain Java](advanced/render-function.md#replacing-template-feature-in-java)
-* [Custom Directives](advanced/custom-directives.md)
-* [Plugins](advanced/plugins.md)
-* [Routing](advanced/routing.md)
-* [And more!](advanced/and-more.md)
+* [Unsupported Features](advanced/unsupported-features.md)
diff --git a/docs-source/book/advanced/and-more.md b/docs-source/book/advanced/and-more.md
diff --git a/docs-source/book/advanced/integrating-with-js-components.md b/docs-source/book/advanced/integrating-with-js-components.md
@@ -147,7 +147,7 @@ You can then simply use it in your Java Component template:
 
 ### Extending a JS Component
 
-We can also [extend JS Components](extending-components.md#extending-js-component) (this is required for some Vue plugins for example).
+We can also [extend JS Components](../composition/extending-components.md#extending-js-component) (this is required for some Vue plugins for example).
 
 ## Using our Java Components in JS {#using-java-components-in-js}
 
diff --git a/docs-source/book/advanced/unsupported-features.md b/docs-source/book/advanced/unsupported-features.md
@@ -0,0 +1,16 @@
+# Unsupported Features
+
+Vue GWT doesn't support all of Vue.js features yet.
+If you would like to help we are [open to contributions](https://github.com/Axellience/vue-gwt)!
+
+Here is the list of unsupported features:
+
+* [Mixins](https://vuejs.org/v2/guide/mixins.html)
+    * For now you can use [Java inheritance to extend a given Component](extending-components.md) instead.
+* [Filters](https://vuejs.org/v2/guide/filters.html)
+    * Would require the Vue GWT parser to support those expressions. Type checking would also be challenging.
+* [State Management](https://vuejs.org/v2/guide/state-management.html)
+    * Would require JsInterop for Vuex.
+* [Server Side Rendering](https://vuejs.org/v2/guide/ssr.html)
+    * Vue GWT components compiled and loaded in a Vue.js app should work server side (but not tested).
+    * Full Vue GWT app would probably not work server side or would require lots of work.
diff --git a/docs-source/book/composition/custom-directives.md b/docs-source/book/composition/custom-directives.md
diff --git a/docs-source/book/composition/extending-components.md b/docs-source/book/composition/extending-components.md
@@ -90,7 +90,7 @@ And here is the traditional live example for proof 😉  :
 
 ## Extending an existing JS Component {#extending-js-component}
 
-Has you saw in [integrating with JS Components](integrating-with-js-components.md) that we can use JS Components in Vue GWT.
+Has you saw in [integrating with JS Components](../advanced/integrating-with-js-components.md) that we can use JS Components in Vue GWT.
 
 Well, we can also extends them!
 
diff --git a/docs-source/book/composition/plugins.md b/docs-source/book/composition/plugins.md
@@ -41,5 +41,5 @@ This can be useful if your plugin requires some kind of registration, or other s
 
 ## Example With Vue Router
 
-We built a [JsInterop wrapper of the Vue Router](routing.md) plugin for you.
+We built a [JsInterop wrapper of the Vue Router](../scaling-up/routing.md) plugin for you.
 You can [checkout how it works](https://github.com/Axellience/vue-router-gwt) if you need a working example of integration.
diff --git a/docs-source/book/composition/render-function.md b/docs-source/book/composition/render-function.md
diff --git a/docs-source/book/gwt-integration/client-bundles.md b/docs-source/book/gwt-integration/client-bundles.md
@@ -1,18 +1,17 @@
-# GWT Client Bundles (Images)
+# GWT Client Bundles
 
 !INCLUDE "../dependencies.md"
 
 Vue GWT also support GWT `ClientBundles`.
 
-Let see how this work with an example.
+Lets see how this work with an example.
 
 ***KittenClientBundle.java***
 
 First, we create a simple `ClientBundle` with an `ImageResource`:
 
 ```java
-public interface KittenClientBundle extends ClientBundle
-{
+public interface KittenClientBundle extends ClientBundle {
     KittenClientBundle INSTANCE = GWT.create(KittenClientBundle.class);
 
     @Source("kitten.jpg")
@@ -25,13 +24,16 @@ There is no need for any special annotations on it.
 ***KittenClientBundle.java***
 
 We then create a Component to use our `ClientBundle`.
-In this component we add a public field for our `KittenClientBundle`.
+In this component we add a computed property for our `KittenClientBundle`.
 This will expose the bundle to the Template.
 
 ```java
 @Component
 public class KittenComponent extends VueComponent {
-    @JsProperty KittenClientBundle myKittenBundle = KittenClientBundle.INSTANCE;
+    @Computed
+    public KittenClientBundle getMyKittenBundle() {
+        return KittenClientBundle.INSTANCE;
+    }
 }
 ```
 
@@ -43,13 +45,14 @@ We can then simply access our bundle instance from the template:
 <img v-bind:src="myKittenBundle.myKitten().getSafeUri().asString()"/>
 ```
 
-
 {% raw %}
 <div class="example-container" data-name="kittenComponent">
     <span id="kittenComponent"></span>
 </div>
 {% endraw %}
 
+You could also directly expose your ImageResource to the template, it's really up to you.
+
 ## Hey, Couldn't I Use This for Styles?
 
 Yes you can.
diff --git a/docs-source/book/scaling-up/routing.md b/docs-source/book/scaling-up/routing.md
diff --git a/docs-source/book/tooling/unit-testing.md b/docs-source/book/tooling/unit-testing.md
@@ -0,0 +1,61 @@
+# Unit Testing
+
+Components written using Vue GWT can be unit tested using Java testing frameworks like `JUnit`.
+You can just instantiate an instance of your Java Component in your unit test with `new`.
+
+You can then call Vue hooks like `created` in your test to initialize your Component.
+
+There are a few limitations though:
+
+* If your code calls methods of `JsObject` or `JsArray`, it won't work in Java.
+* Parts of your code that call native methods like `$watch` or `$emit` won't work either.
+
+You might want to separate the calls to these methods/object in methods that shouldn't be tested.
+
+Example of a Unit test for a Pagination Component:
+
+```java
+public class PaginationComponentTest {
+    PaginationComponent paginationComponent;
+
+    @Before
+    public void setUp() throws Exception {
+        paginationComponent = new PaginationComponent();
+        paginationComponent.created();
+    }
+
+    @Test
+    public void getPageNumbers_singlePage() {
+        paginationComponent.page = createPage(0, 1, 10);
+        assertEquals(Collections.singletonList(0), paginationComponent.getPageNumbers());
+    }
+    
+    @Test
+    public void getPageNumbers_twoPages() {
+        paginationComponent.page = createPage(1, 2, 10);
+        assertEquals(Arrays.asList(0, 1), paginationComponent.getPageNumbers());
+    }
+
+    @Test
+    public void getPageNumbers_fourPages() {
+        paginationComponent.page = createPage(3, 4, 10);
+        assertEquals(Arrays.asList(0, 1, 2, 3), paginationComponent.getPageNumbers());
+    }
+    
+    // ...
+    
+    private Page createPage(int number, int totalPages, int size) {
+        return getPage(number, totalPages, size, totalPages * size);
+    }
+
+    private Page createPage(int number, int totalPages, int size, int totalElements) {
+        Page result = new Page();
+        result.number = number;
+        result.totalPages = totalPages;
+        result.size = size;
+        result.totalElements = totalElements;
+
+        return result;
+    }
+}
+```
diff --git a/docs-source/book/transitions/transitioning-state.md b/docs-source/book/transitions/transitioning-state.md
@@ -0,0 +1,6 @@
+# State Transitions
+
+There is nothing specific to Vue GWT in this part.
+You would need to code the transitions code yourself, or code JsInterop for [tween.js](https://github.com/tweenjs/tween.js/) though.
+
+Checkout [Vue.js documentation about State Transitions](https://vuejs.org/v2/guide/transitioning-state.html).
diff --git a/docs-source/book/transitions/transitions.md b/docs-source/book/transitions/transitions.md
@@ -0,0 +1,6 @@
+# Enter/Leave & List Transitions
+
+There is nothing specific to Vue GWT in this part.
+It will work for the most part, except when using Velocity (which would require JsInterop for [Velocity](http://velocityjs.org/)).
+
+You can checkout [Vue.js documentation about Enter/Leave and List Transitions](https://vuejs.org/v2/guide/transitions.html).
