Skip to content

Commit 3a9fb93

Browse files
paulhobbelpaulhobbel
committed
chore(vue): migrate away from class components
1 parent 547c886 commit 3a9fb93

26 files changed

+878
-776
lines changed

‎WebUI/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"private": true,
33
"version": "0.0.0",
44
"dependencies": {
5-
"@vue/composition-api": "1.6.3",
5+
"@vue/composition-api": "1.7.2",
66
"axios": "^0.21.0",
77
"camera-controls": "1.37.4",
88
"element-ui": "2.15.9",

‎WebUI/pnpm-lock.yaml‎

Lines changed: 12 additions & 12 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎WebUI/src/App.vue‎

Lines changed: 19 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55
</div>
66
</template>
77
<script lang="ts">
8-
import Vue from 'vue';
9-
import { Component, Prop } from 'vue-property-decorator';
8+
import { defineComponent } from '@vue/composition-api';
109
import '@/style/reset.scss';
1110
import '@/style/style.scss';
1211
@@ -16,34 +15,25 @@ import './style/icons.scss';
1615
1716
import ActiveView from '@/script/components/Views/ActiveView.vue';
1817
19-
@Component({
20-
components: {
21-
ActiveView
22-
}
23-
})
24-
export default class App extends Vue {
25-
mounted() {
26-
console.log('UI RELOADED');
27-
this.$nextTick(() => {
28-
window.vext.SendEvent('UIReloaded');
29-
});
30-
}
18+
export default defineComponent({
19+
name: 'App',
20+
components: {
21+
ActiveView
22+
},
23+
mounted() {
24+
console.log('UI RELOADED');
25+
this.$nextTick(() => {
26+
window.vext.SendEvent('UIReloaded');
27+
});
28+
},
29+
beforeDestroy() {
30+
console.log('Reloading UI');
31+
// Hack to force a complete UI reload when a component is destroyed because we did a hot-reload
3132
32-
@Prop()
33-
public title: string;
34-
35-
get editor() {
36-
return window.editor;
37-
}
38-
39-
public beforeDestroy() {
40-
console.log('Reloading UI');
41-
// Hack to force a complete UI reload when a component is destroyed because we did a hot-reload
42-
43-
// eslint-disable-next-line no-self-assign
44-
window.location = window.location;
45-
}
46-
}
33+
// eslint-disable-next-line no-self-assign
34+
window.location = window.location;
35+
}
36+
});
4737
</script>
4838

4939
<style scoped>

‎WebUI/src/script/components/GoldenLayoutHolder.vue‎

Lines changed: 40 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -39,56 +39,55 @@
3939
</template>
4040

4141
<script lang="ts">
42-
import { Component, Vue } from 'vue-property-decorator';
42+
import { defineComponent } from '@vue/composition-api';
4343
import ExplorerComponent from '@/script/components/EditorComponents/ExplorerComponent.vue';
44-
import ConsoleComponent from '@/script/components/EditorComponents/ConsoleComponent.vue';
4544
import ViewportComponent from '@/script/components/EditorComponents/ViewportComponent.vue';
4645
import HierarchyComponent from '@/script/components/EditorComponents/HierarchyComponent.vue';
4746
import InspectorComponent from '@/script/components/EditorComponents/Inspector/InspectorComponent.vue';
4847
import HistoryComponent from '@/script/components/EditorComponents/HistoryComponent.vue';
4948
import PerfectScrollbar from 'perfect-scrollbar';
5049
51-
@Component({
52-
components: {
53-
ExplorerComponent,
54-
ConsoleComponent,
55-
ViewportComponent,
56-
HierarchyComponent,
57-
InspectorComponent,
58-
HistoryComponent
59-
}
60-
})
61-
export default class GoldenLayoutHolder extends Vue {
62-
onInitialised() {
63-
const viewport = document.getElementById('viewport-component');
64-
if (viewport !== null && viewport.parentElement !== null && viewport.parentElement.parentElement !== null) {
65-
viewport.parentElement.parentElement.setAttribute('id', 'viewport-container');
66-
}
67-
this.onMount();
68-
}
50+
export default defineComponent({
51+
name: 'GoldenLayoutHolder',
52+
components: {
53+
ExplorerComponent,
54+
ViewportComponent,
55+
HierarchyComponent,
56+
InspectorComponent,
57+
HistoryComponent
58+
},
59+
methods: {
60+
onInitialised() {
61+
const viewport = document.getElementById('viewport-component');
62+
if (viewport !== null && viewport.parentElement !== null && viewport.parentElement.parentElement !== null) {
63+
viewport.parentElement.parentElement.setAttribute('id', 'viewport-container');
64+
}
65+
this.onMount();
66+
},
6967
70-
onStackCreated(stack: any) {
71-
this.$nextTick(() => {
72-
if (stack.contentItems.length > 0) {
73-
if (!stack.contentItems[0].vueObject.$vnode.context.showHeader) {
74-
stack.header.position();
75-
}
76-
}
77-
});
78-
}
68+
onStackCreated(stack: any) {
69+
this.$nextTick(() => {
70+
if (stack.contentItems.length > 0) {
71+
if (!stack.contentItems[0].vueObject.$vnode.context.showHeader) {
72+
stack.header.position();
73+
}
74+
}
75+
});
76+
},
7977
80-
onMount() {
81-
this.$nextTick(() => {
82-
(this.$refs.gl as any).layout.onResize();
83-
const scrollables = document.getElementsByClassName('scrollable');
84-
for (const scrollable of scrollables as any) {
85-
new PerfectScrollbar(scrollable as HTMLElement, {
86-
minScrollbarLength: 35
87-
});
88-
}
89-
});
90-
}
91-
}
78+
onMount() {
79+
this.$nextTick(() => {
80+
(this.$refs.gl as any).layout.onResize();
81+
const scrollables = document.getElementsByClassName('scrollable');
82+
for (const scrollable of scrollables as any) {
83+
new PerfectScrollbar(scrollable as HTMLElement, {
84+
minScrollbarLength: 35
85+
});
86+
}
87+
});
88+
}
89+
}
90+
});
9291
</script>
9392

9493
<style>

‎WebUI/src/script/components/InfoTopBar.vue‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,11 @@
66
</template>
77

88
<script lang="ts">
9-
import { Component, Prop, Vue } from 'vue-property-decorator';
9+
import { defineComponent } from '@vue/composition-api';
1010
11-
@Component
12-
export default class InfoTopBar extends Vue {
13-
@Prop()
14-
keyName: string;
15-
16-
@Prop()
17-
description: string;
18-
}
11+
export default defineComponent({
12+
name: 'InfoTopBar',
13+
});
1914
</script>
2015

2116
<style lang="scss" scoped>

‎WebUI/src/script/components/KeyTip.vue‎

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -15,26 +15,34 @@
1515
</template>
1616

1717
<script lang="ts">
18-
import { Component, Prop, Vue } from 'vue-property-decorator';
18+
import { defineComponent } from '@vue/composition-api';
1919
20-
@Component
21-
export default class KeyTip extends Vue {
22-
@Prop()
23-
keys: string | string[];
24-
25-
@Prop()
26-
needsCtrl?: boolean;
27-
28-
@Prop()
29-
needsShift?: boolean;
30-
31-
@Prop()
32-
description?: string;
33-
34-
get multiKey() {
35-
return Array.isArray(this.keys);
36-
}
37-
}
20+
export default defineComponent({
21+
name: 'KeyTip',
22+
props: {
23+
keys: {
24+
type: [String, Array],
25+
required: true
26+
},
27+
needsCtrl: {
28+
type: Boolean,
29+
required: false
30+
},
31+
needsShift: {
32+
type: Boolean,
33+
required: false
34+
},
35+
description: {
36+
type: String,
37+
required: false
38+
}
39+
},
40+
computed: {
41+
multiKey(): boolean {
42+
return Array.isArray(this.keys);
43+
}
44+
}
45+
});
3846
</script>
3947

4048
<style lang="scss" scoped>

‎WebUI/src/script/components/Views/ActiveView.vue‎

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,27 +7,35 @@
77
</template>
88

99
<script lang="ts">
10-
import { Component, Vue } from 'vue-property-decorator';
10+
import { defineComponent } from '@vue/composition-api';
1111
import { VIEW } from '../../types/Enums';
1212
import { signals } from '@/script/modules/Signals';
1313
import EditorView from '@/script/components/Views/EditorView.vue';
1414
import PlayingView from '@/script/components/Views/PlayingView.vue';
1515
import LoadingView from '@/script/components/Views/LoadingView.vue';
16-
@Component({
17-
components: { LoadingView, PlayingView, EditorView }
18-
})
19-
export default class ActiveView extends Vue {
20-
activeViewName: VIEW = VIEW.EDITOR;
21-
viewEnum = VIEW;
2216
23-
mounted() {
24-
signals.setActiveView.connect(this.onSetActiveView.bind(this));
25-
}
26-
27-
onSetActiveView(newActiveView: VIEW) {
28-
this.activeViewName = newActiveView;
29-
}
30-
}
17+
export default defineComponent({
18+
name: 'ActiveView',
19+
components: {
20+
EditorView,
21+
PlayingView,
22+
LoadingView
23+
},
24+
data() {
25+
return {
26+
activeViewName: VIEW.EDITOR,
27+
viewEnum: VIEW
28+
};
29+
},
30+
mounted() {
31+
signals.setActiveView.connect(this.onSetActiveView.bind(this));
32+
},
33+
methods: {
34+
onSetActiveView(newActiveView: VIEW) {
35+
this.activeViewName = newActiveView;
36+
}
37+
}
38+
});
3139
</script>
3240

3341
<style>

0 commit comments

Comments
 (0)