Upgrade Vue to latest version

build.conf

@@ -2,7 +2,7 @@
 	"outputDirectory": "./bin",
 	"cacheDirectory": "./bin/_cache",
 	"sourceDirectory": "./src",
-	"webkitVersion": "0.69.1",
+	"webkitVersion": "0.76.0",
 	"webkitURL": "https://dl.nwjs.io/v%s/%s",
 	"manifest": {
 		"name": "wow.export",

src/app.js

@@ -69,6 +69,11 @@ if (!BUILD_RELEASE) {
 process.on('unhandledRejection', e => crash('ERR_UNHANDLED_REJECTION', e.message));
 process.on('uncaughtException', e => crash('ERR_UNHANDLED_EXCEPTION', e.message));
 
+const win = nw.Window.get();
+// Launch DevTools for debug builds.
+if (!BUILD_RELEASE)
+	win.showDevTools();
+
 // Imports
 const os = require('os');
 const path = require('path');
@@ -87,19 +92,19 @@ const ExportHelper = require('./js/casc/export-helper');
 const ExternalLinks = require('./js/external-links');
 const textureRibbon = require('./js/ui/texture-ribbon');
 
-require('./js/components/listbox');
-require('./js/components/listboxb');
-require('./js/components/itemlistbox');
-require('./js/components/checkboxlist');
-require('./js/components/menu-button');
-require('./js/components/file-field');
-require('./js/components/combobox');
-require('./js/components/slider');
-require('./js/components/model-viewer');
-require('./js/components/map-viewer');
-require('./js/components/data-table');
-require('./js/components/resize-layer');
-require('./js/components/context-menu');
+const Listbox = require('./js/components/listbox');
+const Listboxb = require('./js/components/listboxb');
+const Itemlistbox = require('./js/components/itemlistbox');
+const Checkboxlist = require('./js/components/checkboxlist');
+const MenuButton = require('./js/components/menu-button');
+const FileField = require('./js/components/file-field');
+const ComboBox = require('./js/components/combobox');
+const Slider = require('./js/components/slider');
+const ModelViewer = require('./js/components/model-viewer');
+const MapViewer = require('./js/components/map-viewer');
+const DataTable = require('./js/components/data-table');
+const ResizeLayer = require('./js/components/resize-layer');
+const ContextMenu = require('./js/components/context-menu');
 
 const TabTextures = require('./js/ui/tab-textures');
 const TabItems = require('./js/ui/tab-items');
@@ -117,7 +122,6 @@ require('./js/ui/tab-characters');
 
 const RCPServer = require('./js/rcp/rcp-server');
 
-const win = nw.Window.get();
 win.setProgressBar(-1); // Reset taskbar progress in-case it's stuck.
 win.on('close', () => process.exit()); // Ensure we exit when window is closed.
 
@@ -126,10 +130,6 @@ win.on('close', () => process.exit()); // Ensure we exit when window is closed.
 window.ondragover = e => { e.preventDefault(); return false; };
 window.ondrop = e => { e.preventDefault(); return false; };
 
-// Launch DevTools for debug builds.
-if (!BUILD_RELEASE)
-	win.showDevTools();
-
 // Force all links to open in the users default application.
 document.addEventListener('click', function(e) {
 	if (!e.target.matches('[data-external]'))
@@ -147,13 +147,14 @@ document.addEventListener('click', function(e) {
 	// Append the application version to the title bar.
 	document.title += ' v' + nw.App.manifest.version;
 
-	// Interlink error handling for Vue.
-	Vue.config.errorHandler = err => crash('ERR_VUE', err.message);
-
 	// Initialize Vue.
-	core.view = new Vue({
-		el: '#container',
-		data: core.view,
+	const app = Vue.createApp({
+		data() {
+			return core.newView();
+		},
+		created() {
+			core.view = this;
+		},
 		methods: {
 			/**
 			 * Invoked when the user chooses to manually install the Blender add-on.
@@ -269,7 +270,7 @@ document.addEventListener('click', function(e) {
 					if (this.screenStack[0] !== screenID)
 						this.screenStack.unshift(screenID);
 				} else {
-					this.$set(this.screenStack, 0, screenID);
+					this.screenStack[0] = screenID;
 				}
 			},
 
@@ -572,6 +573,24 @@ document.addEventListener('click', function(e) {
 		}
 	});
 
+	// Interlink error handling for Vue.
+	app.config.errorHandler = err => crash('ERR_VUE', err.message);
+
+	app.component('Listbox', Listbox);
+	app.component('Listboxb', Listboxb);
+	app.component('Itemlistbox', Itemlistbox);
+	app.component('Checkboxlist', Checkboxlist);
+	app.component('MenuButton', MenuButton);
+	app.component('FileField', FileField);
+	app.component('ComboBox', ComboBox);
+	app.component('Slider', Slider);
+	app.component('ModelViewer', ModelViewer);
+	app.component('MapViewer', MapViewer);
+	app.component('DataTable', DataTable);
+	app.component('ResizeLayer', ResizeLayer);
+	app.component('ContextMenu', ContextMenu);
+	app.mount('#container');
+
 	// Log some basic information for potential diagnostics.
 	const manifest = nw.App.manifest;
 	const cpus = os.cpus();