Migrate to Vue 3 Migration Build (#6767)

* Replacing all instances of the new Vue() component creation pattern
* In Vue 3, components cannot be created on the fly and mounted off-DOM. The suggested fix from Vue is to use createApp, but in the context of Open MCT this means dozens of Vue apps being created and destroyed at any given moment. Instead, we have used a community hack for creating individual components.
* beforeDestroy() -> beforeUnmount()
* destroyed() -> unmounted()
* The addition of deep: true option on Array listeners is now required to detect Array changes
* Open MCT is now mounted on a child div instead of directly on document.body


---------

Co-authored-by: Scott Bell <scott@traclabs.com>
Co-authored-by: Andrew Henry <akhenry@gmail.com>
Co-authored-by: John Hill <john.c.hill@nasa.gov>

src/plugins/timeConductor/Conductor.vue

@@ -155,7 +155,7 @@ export default {
     this.openmct.time.on(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setTimeSystem);
     this.openmct.time.on(TIME_CONTEXT_EVENTS.modeChanged, this.setMode);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     document.removeEventListener('keydown', this.handleKeyDown);
     document.removeEventListener('keyup', this.handleKeyUp);
 

src/plugins/timeConductor/ConductorHistory.vue

@@ -204,7 +204,7 @@ export default {
         currentHistory.length = this.MAX_RECORDS_LENGTH;
       }
 
-      this.$set(this[this.currentHistory], key, currentHistory);
+      this[this.currentHistory][key] = currentHistory;
       this.persistHistoryToLocalStorage();
     },
     selectTimespan(timespan) {

src/plugins/timeConductor/ConductorInputsFixed.vue

@@ -24,7 +24,7 @@
     v-if="readOnly === false"
     :input-bounds="bounds"
     :input-time-system="timeSystem"
-    @focus.native="$event.target.select()"
+    @focus="$event.target.select()"
     @update="setBoundsFromView"
     @dismiss="dismiss"
   />
@@ -124,7 +124,7 @@ export default {
     this.openmct.time.on(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setTimeSystem);
     this.setTimeContext();
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.openmct.time.off(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setTimeSystem);
     this.stopFollowingTimeContext();
   },

src/plugins/timeConductor/ConductorInputsRealtime.vue

@@ -23,7 +23,7 @@
   <time-popup-realtime
     v-if="readOnly === false"
     :offsets="offsets"
-    @focus.native="$event.target.select()"
+    @focus="$event.target.select()"
     @update="timePopUpdate"
     @dismiss="dismiss"
   />
@@ -148,7 +148,7 @@ export default {
     this.openmct.time.on(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setTimeSystem);
     this.setTimeContext();
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.openmct.time.off(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setTimeSystem);
     this.stopFollowingTime();
   },

src/plugins/timeConductor/ConductorMode.vue

@@ -58,7 +58,7 @@ export default {
       }
     }
   },
-  data: function () {
+  data() {
     const mode = this.openmct.time.getMode();
 
     return {
@@ -73,7 +73,7 @@ export default {
       }
     }
   },
-  mounted: function () {
+  mounted() {
     this.loadModes();
   },
   methods: {

src/plugins/timeConductor/ConductorTimeSystem.vue

@@ -62,7 +62,7 @@ export default {
       }
     }
   },
-  data: function () {
+  data() {
     let activeClock = this.openmct.time.getClock();
 
     return {
@@ -70,11 +70,11 @@ export default {
       timeSystems: this.getValidTimesystemsForClock(activeClock)
     };
   },
-  mounted: function () {
+  mounted() {
     this.openmct.time.on(TIME_CONTEXT_EVENTS.timeSysteChanged, this.setViewFromTimeSystem);
     this.openmct.time.on(TIME_CONTEXT_EVENTS.clockChanged, this.setViewFromClock);
   },
-  destroyed: function () {
+  unmounted() {
     this.openmct.time.off(TIME_CONTEXT_EVENTS.timeSystemChanged, this.setViewFromTimeSystem);
     this.openmct.time.on(TIME_CONTEXT_EVENTS.clockChanged, this.setViewFromClock);
   },

src/plugins/timeConductor/independent/IndependentTimeConductor.vue

@@ -195,7 +195,7 @@ export default {
   mounted() {
     this.initialize();
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.stopFollowingTimeContext();
     this.destroyIndependentTime();
   },

src/plugins/timeConductor/plugin.js

@@ -21,6 +21,7 @@
  *****************************************************************************/
 
 import Conductor from './Conductor.vue';
+import { markRaw } from 'vue';
 import { FIXED_MODE_KEY, REALTIME_MODE_KEY } from '../../api/time/constants';
 
 function isTruthy(a) {
@@ -101,16 +102,17 @@ function throwIfError(configResult) {
 }
 
 function mountComponent(openmct, configuration) {
-  openmct.layout.conductorComponent = Object.create({
+  const conductorApp = {
     components: {
       Conductor
     },
-    template: '<conductor></conductor>',
     provide: {
       openmct: openmct,
       configuration: configuration
-    }
-  });
+    },
+    template: '<conductor />'
+  };
+  openmct.layout.conductorComponent = markRaw(conductorApp);
 }
 
 export default function (config) {