feat: migrate application from Vue 2 to Vue 3

Author: modos189

app/app.js

@@ -1,14 +1,15 @@
 //@license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3
 
-import Vue from 'nativescript-vue'
+import { createApp, registerElement } from 'nativescript-vue'
 
 import { FontIcon, fonticon } from '@nativescript-community/fonticon';
-import BottomSheetPlugin from '@nativescript-community/ui-material-bottomsheet/vue';
+import { BottomSheetPlugin } from '@nativescript-community/ui-material-bottomsheet/vue3';
+import { install as installBottomSheet } from "@nativescript-community/ui-material-bottomsheet";
 import CanvasSVG from '@nativescript-community/ui-svg/vue';
 import ButtonPlugin from '@nativescript-community/ui-material-button/vue';
-import WebViewPlugin from '@nativescript-community/ui-webview/vue';
+import WebView from '@nativescript-community/ui-webview/vue';
 import { CheckBox } from '@nstudio/nativescript-checkbox';
-import CollectionView from '@nativescript-community/ui-collectionview/vue';
+import CollectionView from '@nativescript-community/ui-collectionview/vue3';
 import RipplePlugin from '@nativescript-community/ui-material-ripple/vue';
 import { ImageCacheIt } from '@triniwiz/nativescript-image-cache-it';
 
@@ -20,25 +21,17 @@ import { initializeTracing } from './app-trace';
 initializeTracing();
 ImageCacheIt.enableAutoMM();
 
+// Install BottomSheet plugin
+installBottomSheet();
+
 FontIcon.paths = {
   'fa': './assets/css/Font-Awesome.css',
 };
 FontIcon.loadCssSync();
-Vue.filter('fonticon', fonticon);
-
-import { install } from "@nativescript-community/ui-material-bottomsheet";
-install();
-Vue.use(BottomSheetPlugin);
-
-Vue.use(CanvasSVG);
-Vue.use(ButtonPlugin);
-Vue.use(WebViewPlugin);
-Vue.use(CollectionView);
-Vue.use(RipplePlugin);
 
-Vue.registerElement('HTMLLabel', () => require('@nativescript-community/ui-label').Label);
-Vue.registerElement('ImageCacheIt', () => require('@triniwiz/nativescript-image-cache-it').ImageCacheIt);
-Vue.registerElement(
+registerElement('HTMLLabel', () => require('@nativescript-community/ui-label').Label);
+registerElement('ImageCacheIt', () => require('@triniwiz/nativescript-image-cache-it').ImageCacheIt);
+registerElement(
   'CheckBox',
   () => CheckBox,
   {
@@ -49,9 +42,18 @@ Vue.registerElement(
   }
 );
 
-Vue.config.silent = false;
+const app = createApp(Main);
+
+app.config.globalProperties.$filters = {
+  fonticon: fonticon
+};
+
+app.use(store);
+app.use(WebView);
+app.use(CollectionView);
+app.use(CanvasSVG);
+app.use(ButtonPlugin);
+app.use(RipplePlugin);
+app.use(BottomSheetPlugin);
 
-new Vue({
-  render: (h) => h('frame', [h(Main)]),
-  store
-}).$start()
+app.start();

app/components/AppControlPanel/AppControlPanel.vue

@@ -23,7 +23,7 @@
         rippleColor="#ffffff"
         class="fa app-control-button"
         :class="{ 'app-control-button--active': isPanelOpen && (activeButton === 'quick' || activeButton === null) }"
-        :text="'fa-bars' | fonticon"
+        :text="$filters.fonticon('fa-bars')"
         @tap="handleControlButtonTap('quick', $event)"
         @pan="handleControlButtonPan('quick', $event)"
       />
@@ -35,7 +35,7 @@
         rippleColor="#ffffff"
         class="fa app-control-button"
         :class="{ 'app-control-button--active': isPanelOpen && activeButton === 'search' }"
-        :text="'fa-search' | fonticon"
+        :text="$filters.fonticon('fa-search')"
         @tap="handleControlButtonTap('search', $event)"
         @pan="handleControlButtonPan('search', $event)"
       />
@@ -46,7 +46,7 @@
         variant="flat"
         rippleColor="#ffffff"
         class="fa app-control-button"
-        :text="locationButtonIcon | fonticon"
+        :text="$filters.fonticon(locationButtonIcon)"
         @tap="onLocate"
       />
 
@@ -57,7 +57,7 @@
         rippleColor="#ffffff"
         class="fa app-control-button"
         :class="{ 'app-control-button--active': isPanelOpen && activeButton === 'layers' }"
-        :text="'fa-layer-group' | fonticon"
+        :text="$filters.fonticon('fa-layer-group')"
         @tap="handleControlButtonTap('layers', $event)"
         @pan="handleControlButtonPan('layers', $event)"
       />

app/components/AppControlPanel/button-gesture-handler.js

@@ -116,7 +116,7 @@ export const buttonGestureHandlerMixin = {
     });
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     if (this._buttonGestureHandler) {
       this._buttonGestureHandler.cleanup();
     }

app/components/AppControlPanel/components/LayersView.vue

@@ -53,17 +53,17 @@
       rows="50"
       class="block"
     >
+      <template v-for="(layer, index) in overlayLayers" :key="layer.layerId">
         <SVGView
+          v-if="index <= 8"
           class="overlay-portal"
           :class="{ 'overlay-portal--active': layer.active === true }"
           :col="index"
-          v-for="(layer, index) in overlayLayers"
-          v-bind:key="layer.layerId"
-          v-if="index <= 8"
           @tap="onOverlayPortalToggle($event, index)"
           :src="'~/assets/icons/portals/portal_L'+index+'_'+String(layer.active)+'.svg'"
           stretch="aspectFit"
         />
+      </template>
     </GridLayout>
 
     <StackLayout class="block">

app/components/AppControlPanel/components/QuickAccessView.vue

@@ -18,7 +18,7 @@
         class="btn"
         @tap="openSettings"
       >
-        <Label class="fa icon" :text="'fa-tools' | fonticon" horizontalAlignment="center" />
+        <Label class="fa icon" :text="$filters.fonticon('fa-tools')" horizontalAlignment="center" />
         <Label class="text" text="Settings" horizontalAlignment="center" />
       </StackLayout>
 
@@ -28,7 +28,7 @@
         class="btn"
         @tap="openPlugins"
       >
-        <Label class="fa icon" :text="'fa-toolbox' | fonticon" horizontalAlignment="center" />
+        <Label class="fa icon" :text="$filters.fonticon('fa-toolbox')" horizontalAlignment="center" />
         <Label class="text" text="Plugins" horizontalAlignment="center" />
       </StackLayout>
 
@@ -39,7 +39,7 @@
         :class="{ 'active': isDebugActive }"
         @tap="toggleDebugMode"
       >
-        <Label class="fa icon" :class="{ 'active-icon': isDebugActive }" :text="'fa-terminal' | fonticon" horizontalAlignment="center" />
+        <Label class="fa icon" :class="{ 'active-icon': isDebugActive }" :text="$filters.fonticon('fa-terminal')" horizontalAlignment="center" />
         <Label class="text" :class="{ 'active-text': isDebugActive }" text="Debug" horizontalAlignment="center" />
       </StackLayout>
 
@@ -49,7 +49,7 @@
         class="btn"
         @tap="reloadWebView"
       >
-        <Label class="fa icon" :text="'fa-redo' | fonticon" horizontalAlignment="center" />
+        <Label class="fa icon" :text="$filters.fonticon('fa-redo')" horizontalAlignment="center" />
         <Label class="text" text="Reload IITC" horizontalAlignment="center" />
       </StackLayout>
     </GridLayout>
@@ -63,7 +63,7 @@
         rows="50"
         @tap="switchToPane(pane.name)"
       >
-        <Label class="fa icon" :text="pane.icon | fonticon" col="0" row="0" />
+        <Label class="fa icon" :text="$filters.fonticon(pane.icon)" col="0" row="0" />
         <Label class="pane-item-label" :text="pane.label" col="1" row="0" />
       </GridLayout>
     </StackLayout>
@@ -73,6 +73,7 @@
 
 <script>
   import { mapState } from 'vuex';
+  import { $navigateTo } from 'nativescript-vue';
   import SettingsView from '@/components/Settings/SettingsView';
   import PluginsView from '@/components/Settings/PluginsView';
 
@@ -99,7 +100,7 @@
 
     methods: {
       openSettings() {
-        this.$navigateTo(this.settingsScreen, {
+        $navigateTo(this.settingsScreen, {
           animated: true,
           transition: {
             name: 'slideLeft',
@@ -117,7 +118,7 @@
         this.$store.dispatch('ui/toggleDebugMode');
       },
       openPlugins() {
-        this.$navigateTo(this.pluginsScreen, {
+        $navigateTo(this.pluginsScreen, {
           animated: true,
           transition: {
             name: 'slideLeft',

app/components/AppWebView.vue

@@ -173,7 +173,7 @@ export default {
     });
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.store_unsubscribe();
   }
 };

app/components/BaseWebView.vue

@@ -1,7 +1,7 @@
 //@license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-v3
 
 <template>
-  <WebViewExt
+  <AWebView
     ref="webview"
     :src="src"
     :viewPortSize="viewPortSize"
@@ -11,12 +11,11 @@
     @loadFinished="onLoadFinished"
     @loadError="onLoadError"
     @shouldOverrideUrlLoading="onShouldOverrideUrlLoading"
-    @JSBridge="onJSBridge"
   />
 </template>
 
 <script>
-import WebViewExt from '@nota/nativescript-webview-ext/vue'
+import { AWebView } from '@nativescript-community/ui-webview';
 import { isAndroid } from "@nativescript/core";
 import { applyWebViewSettings } from "@/utils/webview/webview-settings";
 import { BaseWebChromeClient } from '@/utils/webview/base-chrome-client';
@@ -123,6 +122,11 @@ export default {
 
       // Setup console log event handlers
       this.setupDebugEventHandlers();
+
+      // Setup JSBridge event handler
+      this.webViewInstance.on('JSBridge', (msg) => {
+        this.$emit('bridge-message', msg.data);
+      });
     },
 
     // Setup event handlers for console bridge
@@ -192,9 +196,6 @@ export default {
       }
     },
 
-    onJSBridge(args) {
-      this.$emit('bridge-message', args.data);
-    },
 
     // Execute JavaScript command in webview
     executeCommand(command) {
@@ -223,7 +224,7 @@ export default {
             this.chromeClient = null;
           }
 
-          const events = ['loaded', 'loadStarted', 'loadFinished', 'loadError', 'shouldOverrideUrlLoading', 'console:log'];
+          const events = ['loaded', 'loadStarted', 'loadFinished', 'loadError', 'shouldOverrideUrlLoading', 'console:log', 'JSBridge'];
           events.forEach(event => {
             try {
               this.webViewInstance.removeEventListener(event);
@@ -265,7 +266,7 @@ export default {
     }
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     try {
       this.cleanupWebView();
 

app/components/DebugConsole/ControlsPanel.vue

@@ -11,31 +11,31 @@
       <MDButton
         col="0"
         class="fa control-button"
-        :text="'fa-arrow-left' | fonticon"
+        :text="$filters.fonticon('fa-arrow-left')"
         variant="flat"
         rippleColor="#ffffff"
         @tap="handleClose"
       />
       <MDButton
         col="2"
         class="fa control-button trash"
-        :text="'fa-trash' | fonticon"
+        :text="$filters.fonticon('fa-trash')"
         variant="flat"
         rippleColor="#ffffff"
         @tap="$emit('clear')"
       />
       <MDButton
         col="3"
         class="fa control-button"
-        :text="'fa-arrow-up' | fonticon"
+        :text="$filters.fonticon('fa-arrow-up')"
         variant="flat"
         rippleColor="#ffffff"
         @tap="navigateHistoryUp"
       />
       <MDButton
         col="4"
         class="fa control-button"
-        :text="'fa-arrow-down' | fonticon"
+        :text="$filters.fonticon('fa-arrow-down')"
         variant="flat"
         rippleColor="#ffffff"
         @tap="navigateHistoryDown"
@@ -59,7 +59,7 @@
       <MDButton
         col="1"
         class="fa btn-primary send-button"
-        :text="'fa-paper-plane' | fonticon"
+        :text="$filters.fonticon('fa-paper-plane')"
         variant="flat"
         rippleColor="#ffffff"
         @tap="executeCommand"