Skip to content

Commit 77c37aa

Browse files
adrienbaronadrienbaron
committed
Fix examples in documentation not loading in some cases
1 parent ed56044 commit 77c37aa

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+1015
-773
lines changed

‎docs-source/book/dependencies.md‎

Lines changed: 51 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,58 @@
11
{% raw %}
22
<script src="https://unpkg.com/vue/dist/vue.js"></script>
33
<script>
4-
var basePath = "/";
5-
if (window.location.hostname === "axellience.github.io")
6-
basePath = "/vue-gwt/";
7-
8-
var script = document.createElement("script");
9-
script.src = basePath + "resources/scripts/VueGwtExamples.nocache.js";
10-
document.head.appendChild(script);
11-
</script>
12-
<script>
13-
window.FullJsComponent = Vue.extend({
14-
template: "<div>I Come In Peace From the JS World.</div>"
15-
});
16-
window.FullJsWithMethodsComponent = Vue.extend({
17-
template: "<div>My Value: {{ value }}. My Value x2: {{ multiplyBy2(value) }}</div>",
18-
data: function () {
19-
return {
20-
value: 10
21-
}
22-
},
23-
methods: {
24-
multiplyBy2: function (value) {
25-
return value * 2;
26-
}
4+
(function() {
5+
if (window.VueGwtExamplesService) {
6+
window.VueGwtExamplesService.initExamples();
7+
return;
278
}
28-
});
29-
window.ParentJsComponent = Vue.extend({
30-
data: function () {
31-
return {
32-
parentMessage: "This is a message from the Parent"
33-
};
34-
},
35-
methods: {
36-
parentMultiplyBy2: function (value) {
37-
return value * 2;
38-
}
39-
},
40-
computed: {
41-
parentComputed: function () {
42-
return "Computed Message | " + this.parentMessage;
43-
}
9+
10+
var script = document.createElement("script");
11+
script.src = "https://unpkg.com/vue/dist/vue.js";
12+
script.onload = function () {
13+
window.FullJsComponent = Vue.extend({
14+
template: "<div>I Come In Peace From the JS World.</div>"
15+
});
16+
window.FullJsWithMethodsComponent = Vue.extend({
17+
template: "<div>My Value: {{ value }}. My Value x2: {{ multiplyBy2(value) }}</div>",
18+
data: function () {
19+
return {
20+
value: 10
21+
}
22+
},
23+
methods: {
24+
multiplyBy2: function (value) {
25+
return value * 2;
26+
}
27+
}
28+
});
29+
window.ParentJsComponent = Vue.extend({
30+
data: function () {
31+
return {
32+
parentMessage: "This is a message from the Parent"
33+
};
34+
},
35+
methods: {
36+
parentMultiplyBy2: function (value) {
37+
return value * 2;
38+
}
39+
},
40+
computed: {
41+
parentComputed: function () {
42+
return "Computed Message | " + this.parentMessage;
43+
}
44+
}
45+
});
46+
47+
var basePath = "/";
48+
if (window.location.hostname === "axellience.github.io")
49+
basePath = "/vue-gwt/";
50+
51+
var script = document.createElement("script");
52+
script.src = basePath + "resources/scripts/VueGwtExamples.nocache.js";
53+
document.head.appendChild(script);
4454
}
45-
});
55+
document.head.appendChild(script);
56+
})();
4657
</script>
4758
{% endraw %}

‎docs-source/book/project-setup.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# Setup on Your Project
22

3+
!INCLUDE "dependencies.md"
4+
35
## ✅ Configure Maven
46

57
To add Vue GWT to your Maven project, simply add the following to your `pom.xml`:

‎docs-source/examples/src/main/java/com/axellience/vuegwtexamples/client/VueGwtExamplesApp.java‎

Lines changed: 1 addition & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,7 @@
11
package com.axellience.vuegwtexamples.client;
22

3-
import com.axellience.vuegwt.client.Vue;
43
import com.axellience.vuegwt.client.VueGWT;
5-
import com.axellience.vuegwt.client.component.VueComponent;
6-
import com.axellience.vuegwt.client.tools.JsTools;
7-
import com.axellience.vuegwt.client.vue.VueFactory;
8-
import com.axellience.vuegwt.client.vue.VueJsConstructor;
9-
import com.axellience.vuegwtexamples.client.examples.bindinlinestyle.BindInlineStyleComponent;
10-
import com.axellience.vuegwtexamples.client.examples.buttonplusone.ButtonPlusOneComponent;
11-
import com.axellience.vuegwtexamples.client.examples.canhide.CanHideComponent;
12-
import com.axellience.vuegwtexamples.client.examples.counterwithevent.CounterWithEventComponent;
13-
import com.axellience.vuegwtexamples.client.examples.evennumbers.EvenNumbersComponent;
14-
import com.axellience.vuegwtexamples.client.examples.exclamation.ExclamationComponent;
15-
import com.axellience.vuegwtexamples.client.examples.extendjavacomponent.ChildComponent;
16-
import com.axellience.vuegwtexamples.client.examples.extendsjscomponent.ChildJavaComponent;
17-
import com.axellience.vuegwtexamples.client.examples.focus.FocusDirectiveComponent;
18-
import com.axellience.vuegwtexamples.client.examples.greet.GreetComponent;
19-
import com.axellience.vuegwtexamples.client.examples.hiwhat.HiWhatComponent;
20-
import com.axellience.vuegwtexamples.client.examples.instanciatejscomponent.FullJsWithMethodsComponentFactory;
21-
import com.axellience.vuegwtexamples.client.examples.kitten.KittenComponent;
22-
import com.axellience.vuegwtexamples.client.examples.link.LinkComponent;
23-
import com.axellience.vuegwtexamples.client.examples.melisandre.MelisandreComponent;
24-
import com.axellience.vuegwtexamples.client.examples.message.MessageComponent;
25-
import com.axellience.vuegwtexamples.client.examples.parent.ParentComponent;
26-
import com.axellience.vuegwtexamples.client.examples.propdefaultvalue.ParentPropDefaultValueComponent;
27-
import com.axellience.vuegwtexamples.client.examples.recursive.RecursiveComponent;
28-
import com.axellience.vuegwtexamples.client.examples.reverse.ReverseComponent;
29-
import com.axellience.vuegwtexamples.client.examples.shareddatamodel.SharedDataModelComponent;
30-
import com.axellience.vuegwtexamples.client.examples.simplelink.SimpleLinkComponent;
31-
import com.axellience.vuegwtexamples.client.examples.simplerender.RenderAppComponent;
32-
import com.axellience.vuegwtexamples.client.examples.simpletodolist.SimpleTodoListComponent;
33-
import com.axellience.vuegwtexamples.client.examples.todolist.TodoListComponent;
34-
import com.axellience.vuegwtexamples.client.examples.todotext.TodoTextComponent;
35-
import com.axellience.vuegwtexamples.client.examples.todotextcomputed.TodoTextComputedComponent;
36-
import com.axellience.vuegwtexamples.client.examples.tree.TreeComponent;
37-
import com.axellience.vuegwtexamples.client.examples.vforonobject.VForOnObjectComponent;
38-
import com.axellience.vuegwtexamples.client.examples.vforonobjectwithkey.VForOnObjectWithKeyComponent;
39-
import com.axellience.vuegwtexamples.client.examples.vforonobjectwithkeyandindex.VForOnObjectWithKeyAndIndexComponent;
40-
import com.axellience.vuegwtexamples.client.examples.vforwithindex.VForWithIndexComponent;
41-
import com.axellience.vuegwtexamples.client.examples.vforwithrange.VForWithRangeComponent;
42-
import com.axellience.vuegwtexamples.client.examples.vonwithdomevent.VOnWithDOMEventComponent;
434
import com.google.gwt.core.client.EntryPoint;
44-
import com.google.gwt.dom.client.Document;
455

466
/**
477
* Entry point classes define <code>onModuleLoad()</code>
@@ -54,64 +14,6 @@ public class VueGwtExamplesApp implements EntryPoint
5414
public void onModuleLoad()
5515
{
5616
VueGWT.initWithoutVueLib();
57-
58-
VueJsConstructor vueClass = (VueJsConstructor) JsTools.getWindow().get("FullJsComponent");
59-
VueComponent myComponent = vueClass.instantiate();
60-
myComponent.$mount("#fullJsComponent");
61-
62-
ExampleInjector exampleInjector = DaggerExampleInjector.builder().build();
63-
64-
this.addExample("simpleLinkComponent", SimpleLinkComponent.class);
65-
this.addExample("linkComponent", LinkComponent.class);
66-
this.addExample("canHideComponent", CanHideComponent.class);
67-
this.addExample("simpleTodoListComponent", SimpleTodoListComponent.class);
68-
this.addExample("exclamationComponent", ExclamationComponent.class);
69-
this.addExample("messageComponent", MessageComponent.class);
70-
this.addExample("parentComponent", ParentComponent.class);
71-
this.addExample("todoListComponent", TodoListComponent.class);
72-
this.addExample("melisandreComponent", MelisandreComponent.class);
73-
this.addExample("kittenComponent", KittenComponent.class);
74-
this.addExample("reverseComponent", ReverseComponent.class);
75-
this.addExample("vForWithIndexComponent", VForWithIndexComponent.class);
76-
this.addExample("vForWithRangeComponent", VForWithRangeComponent.class);
77-
this.addExample("vForOnObjectComponent", VForOnObjectComponent.class);
78-
this.addExample("vForOnObjectWithKeyComponent", VForOnObjectWithKeyComponent.class);
79-
this.addExample("vForOnObjectWithKeyAndIndexComponent", VForOnObjectWithKeyAndIndexComponent.class);
80-
this.addExample("evenNumbersComponent", EvenNumbersComponent.class);
81-
this.addExample("bindInlineStyleComponent", BindInlineStyleComponent.class);
82-
this.addExample("buttonPlusOneComponent", ButtonPlusOneComponent.class);
83-
this.addExample("greetComponent", GreetComponent.class);
84-
this.addExample("hiWhatComponent", HiWhatComponent.class);
85-
this.addExample("vOnWithDOMEventComponent", VOnWithDOMEventComponent.class);
86-
this.addExample("todoTextComponent", TodoTextComponent.class);
87-
this.addExample("todoTextComputedComponent", TodoTextComputedComponent.class);
88-
this.addExample("sharedDataModelComponent1", SharedDataModelComponent.class);
89-
this.addExample("sharedDataModelComponent2", SharedDataModelComponent.class);
90-
this.addExample("sharedDataModelComponent3", SharedDataModelComponent.class);
91-
this.addExample("counterWithEventComponent", CounterWithEventComponent.class);
92-
this.addExample("treeComponent", TreeComponent.class);
93-
this.addExample("recursiveComponent", RecursiveComponent.class);
94-
this.addExample("focusDirectiveComponent", FocusDirectiveComponent.class);
95-
this.addExample("renderAppComponent", RenderAppComponent.class);
96-
this.addExample("extendJavaComponent", ChildComponent.class);
97-
this.addExample("extendJsComponent", ChildJavaComponent.class);
98-
this.addExample("fullJsWithMethodsComponent", FullJsWithMethodsComponentFactory.get());
99-
this.addExample("propDefaultValueComponent", ParentPropDefaultValueComponent.class);
100-
this.addExample("gotQuotesComponent", exampleInjector.gotQuoteComponentFactory());
101-
}
102-
103-
private void addExample(String exampleId, Class<? extends VueComponent> exampleVueClass)
104-
{
105-
addExample(exampleId, VueGWT.getFactory(exampleVueClass));
106-
}
107-
108-
private void addExample(String exampleId, VueFactory<? extends VueComponent> exampleVueFactory)
109-
{
110-
// If we find the containing div for this example, we instantiate it
111-
if (Document.get().getElementById(exampleId) != null)
112-
{
113-
VueComponent exampleInstance = Vue.attach("#" + exampleId, exampleVueFactory);
114-
JsTools.getWindow().set(exampleId, exampleInstance);
115-
}
17+
VueGwtExamplesService.initExamples();
11618
}
11719
}

‎docs-source/examples/src/main/java/com/axellience/vuegwtexamples/client/VueGwtExamplesService.java‎

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
package com.axellience.vuegwtexamples.client;
2+
3+
import com.axellience.vuegwt.client.Vue;
4+
import com.axellience.vuegwt.client.VueGWT;
5+
import com.axellience.vuegwt.client.component.VueComponent;
6+
import com.axellience.vuegwt.client.tools.JsTools;
7+
import com.axellience.vuegwt.client.vue.VueFactory;
8+
import com.axellience.vuegwt.client.vue.VueJsConstructor;
9+
import com.axellience.vuegwtexamples.client.examples.bindinlinestyle.BindInlineStyleComponent;
10+
import com.axellience.vuegwtexamples.client.examples.buttonplusone.ButtonPlusOneComponent;
11+
import com.axellience.vuegwtexamples.client.examples.canhide.CanHideComponent;
12+
import com.axellience.vuegwtexamples.client.examples.counterwithevent.CounterWithEventComponent;
13+
import com.axellience.vuegwtexamples.client.examples.evennumbers.EvenNumbersComponent;
14+
import com.axellience.vuegwtexamples.client.examples.exclamation.ExclamationComponent;
15+
import com.axellience.vuegwtexamples.client.examples.extendjavacomponent.ChildComponent;
16+
import com.axellience.vuegwtexamples.client.examples.extendsjscomponent.ChildJavaComponent;
17+
import com.axellience.vuegwtexamples.client.examples.focus.FocusDirectiveComponent;
18+
import com.axellience.vuegwtexamples.client.examples.greet.GreetComponent;
19+
import com.axellience.vuegwtexamples.client.examples.hiwhat.HiWhatComponent;
20+
import com.axellience.vuegwtexamples.client.examples.instanciatejscomponent.FullJsWithMethodsComponentFactory;
21+
import com.axellience.vuegwtexamples.client.examples.kitten.KittenComponent;
22+
import com.axellience.vuegwtexamples.client.examples.link.LinkComponent;
23+
import com.axellience.vuegwtexamples.client.examples.melisandre.MelisandreComponent;
24+
import com.axellience.vuegwtexamples.client.examples.message.MessageComponent;
25+
import com.axellience.vuegwtexamples.client.examples.parent.ParentComponent;
26+
import com.axellience.vuegwtexamples.client.examples.propdefaultvalue.ParentPropDefaultValueComponent;
27+
import com.axellience.vuegwtexamples.client.examples.recursive.RecursiveComponent;
28+
import com.axellience.vuegwtexamples.client.examples.reverse.ReverseComponent;
29+
import com.axellience.vuegwtexamples.client.examples.shareddatamodel.SharedDataModelComponent;
30+
import com.axellience.vuegwtexamples.client.examples.simplelink.SimpleLinkComponent;
31+
import com.axellience.vuegwtexamples.client.examples.simplerender.RenderAppComponent;
32+
import com.axellience.vuegwtexamples.client.examples.simpletodolist.SimpleTodoListComponent;
33+
import com.axellience.vuegwtexamples.client.examples.todolist.TodoListComponent;
34+
import com.axellience.vuegwtexamples.client.examples.todotext.TodoTextComponent;
35+
import com.axellience.vuegwtexamples.client.examples.todotextcomputed.TodoTextComputedComponent;
36+
import com.axellience.vuegwtexamples.client.examples.tree.TreeComponent;
37+
import com.axellience.vuegwtexamples.client.examples.vforonobject.VForOnObjectComponent;
38+
import com.axellience.vuegwtexamples.client.examples.vforonobjectwithkey.VForOnObjectWithKeyComponent;
39+
import com.axellience.vuegwtexamples.client.examples.vforonobjectwithkeyandindex.VForOnObjectWithKeyAndIndexComponent;
40+
import com.axellience.vuegwtexamples.client.examples.vforwithindex.VForWithIndexComponent;
41+
import com.axellience.vuegwtexamples.client.examples.vforwithrange.VForWithRangeComponent;
42+
import com.axellience.vuegwtexamples.client.examples.vonwithdomevent.VOnWithDOMEventComponent;
43+
import com.google.gwt.dom.client.Document;
44+
import jsinterop.annotations.JsPackage;
45+
import jsinterop.annotations.JsType;
46+
47+
@JsType(namespace = JsPackage.GLOBAL)
48+
public class VueGwtExamplesService
49+
{
50+
public static void initExamples()
51+
{
52+
if (Document.get().getElementById("fullJsComponent") != null)
53+
{
54+
VueJsConstructor vueClass = (VueJsConstructor) JsTools.getWindow().get("FullJsComponent");
55+
VueComponent myComponent = vueClass.instantiate();
56+
myComponent.$mount("#fullJsComponent");
57+
}
58+
59+
ExampleInjector exampleInjector = DaggerExampleInjector.builder().build();
60+
61+
addExample("simpleLinkComponent", SimpleLinkComponent.class);
62+
addExample("linkComponent", LinkComponent.class);
63+
addExample("canHideComponent", CanHideComponent.class);
64+
addExample("simpleTodoListComponent", SimpleTodoListComponent.class);
65+
addExample("exclamationComponent", ExclamationComponent.class);
66+
addExample("messageComponent", MessageComponent.class);
67+
addExample("parentComponent", ParentComponent.class);
68+
addExample("todoListComponent", TodoListComponent.class);
69+
addExample("melisandreComponent", MelisandreComponent.class);
70+
addExample("kittenComponent", KittenComponent.class);
71+
addExample("reverseComponent", ReverseComponent.class);
72+
addExample("vForWithIndexComponent", VForWithIndexComponent.class);
73+
addExample("vForWithRangeComponent", VForWithRangeComponent.class);
74+
addExample("vForOnObjectComponent", VForOnObjectComponent.class);
75+
addExample("vForOnObjectWithKeyComponent", VForOnObjectWithKeyComponent.class);
76+
addExample("vForOnObjectWithKeyAndIndexComponent",
77+
VForOnObjectWithKeyAndIndexComponent.class);
78+
addExample("evenNumbersComponent", EvenNumbersComponent.class);
79+
addExample("bindInlineStyleComponent", BindInlineStyleComponent.class);
80+
addExample("buttonPlusOneComponent", ButtonPlusOneComponent.class);
81+
addExample("greetComponent", GreetComponent.class);
82+
addExample("hiWhatComponent", HiWhatComponent.class);
83+
addExample("vOnWithDOMEventComponent", VOnWithDOMEventComponent.class);
84+
addExample("todoTextComponent", TodoTextComponent.class);
85+
addExample("todoTextComputedComponent", TodoTextComputedComponent.class);
86+
addExample("sharedDataModelComponent1", SharedDataModelComponent.class);
87+
addExample("sharedDataModelComponent2", SharedDataModelComponent.class);
88+
addExample("sharedDataModelComponent3", SharedDataModelComponent.class);
89+
addExample("counterWithEventComponent", CounterWithEventComponent.class);
90+
addExample("treeComponent", TreeComponent.class);
91+
addExample("recursiveComponent", RecursiveComponent.class);
92+
addExample("focusDirectiveComponent", FocusDirectiveComponent.class);
93+
addExample("renderAppComponent", RenderAppComponent.class);
94+
addExample("extendJavaComponent", ChildComponent.class);
95+
addExample("extendJsComponent", ChildJavaComponent.class);
96+
addExample("fullJsWithMethodsComponent", FullJsWithMethodsComponentFactory.get());
97+
addExample("propDefaultValueComponent", ParentPropDefaultValueComponent.class);
98+
addExample("gotQuotesComponent", exampleInjector.gotQuoteComponentFactory());
99+
}
100+
101+
private static void addExample(String exampleId, Class<? extends VueComponent> exampleVueClass)
102+
{
103+
addExample(exampleId, VueGWT.getFactory(exampleVueClass));
104+
}
105+
106+
private static void addExample(String exampleId,
107+
VueFactory<? extends VueComponent> exampleVueFactory)
108+
{
109+
// If we find the containing div for this example, we instantiate it
110+
if (Document.get().getElementById(exampleId) != null)
111+
{
112+
VueComponent exampleInstance = Vue.attach("#" + exampleId, exampleVueFactory);
113+
JsTools.getWindow().set(exampleId, exampleInstance);
114+
}
115+
}
116+
}

0 commit comments

Comments
 (0)