1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
|
STUDIP.ready(() => {
document.querySelectorAll('[data-vue-app]:not([data-vue-app-created])').forEach((node) => {
const config = Object.assign(
{
components: [],
plugins: {},
stores: {}
},
JSON.parse(node.dataset.vueApp)
);
let components = {};
config.components.forEach(component => {
const name = component.split('/').reverse()[0];
components[name] = () => {
// TODO: I wonder if this works with Vue3
const temp = import(`../../../vue/components/${component}.vue`);
temp.then(({default: c}) => {
const mounted = c.mounted ?? null;
c.mounted = function (...args) {
if (
this.$el instanceof Element
&& this.$el.closest('.studip-dialog')
&& this.$el.querySelector('[data-dialog-button]')
) {
this.$el.closest('.studip-dialog')
.querySelector('.ui-dialog-buttonpane')
.remove();
}
if (mounted) {
mounted.call(this, args);
}
};
return c;
})
return temp;
};
});
STUDIP.Vue.load().then(({createApp, store, Vue}) => {
const promises = [Promise.resolve()];
for (const [index, name] of Object.entries(config.stores)) {
promises.push(
import(`../../../vue/store/${name}.js`).then(storeConfig => {
store.registerModule(index, storeConfig.default);
const dataElement = document.getElementById(`vue-store-data-${index}`);
if (dataElement) {
const data = JSON.parse(dataElement.innerText);
Object.keys(data).forEach(command => {
store.commit(`${index}/${command}`, data[command]);
});
dataElement.remove();
}
})
);
}
for (const [plugin, filename] of Object.entries(config.plugins)) {
promises.push(
import(`../../../vue/plugins/${filename}.js`)
.then((temp) => Vue.use(temp[plugin], { store }))
);
}
Promise.all(promises).then(() => {
createApp({
components,
store,
beforeCreate() {
STUDIP.Vue.emit('VueAppWillCreate', this);
},
created() {
STUDIP.Vue.emit('VueAppDidCreate', this);
},
beforeMount() {
STUDIP.Vue.emit('VueAppWillMount', this);
},
mounted() {
STUDIP.Vue.emit('VueAppDidMount', this);
},
beforeUpdate() {
STUDIP.Vue.emit('VueAppWillUpdate', this);
},
updated() {
STUDIP.Vue.emit('VueAppDidUpdate', this);
},
beforeDestroy() {
STUDIP.Vue.emit('VueAppWillDestroy', this);
},
destroyed() {
STUDIP.Vue.emit('VueAppDidDestroy', this);
},
}).$mount(node);
});
});
node.dataset.vueAppCreated = 'true';
});
});
|
