Migrate to Vue 3.0 #230

- Migrate from "Vue 2.X" to "Vue 3.X"
- Migrate from "Vue Test Utils v1" to "Vue Test Utils v2"

Changes in detail:

- Change `inserted` to `mounted`.
- Change `::v-deep` to `:deep`.
- Change to Vue 3.0 `v-modal` syntax.
- Remove old Vue 2.0 transition name, keep the ones for Vue 3.0.
- Use new global mounting API `createApp`.
- Change `destroy` to `unmount`.
- Bootstrapping:
  - Move `provide`s for global dependencies to a bootsrapper from
    `App.vue`.
  - Remove `productionTip` setting (not in Vue 3).
  - Change `IVueBootstrapper` for simplicity and Vue 3 compatible API.
  - Add missing tests.
- Remove `.text` access on `VNode` as it's now internal API of Vue.
- Import `CSSProperties` from `vue` instead of `jsx` package.
- Shims:
  - Remove unused `shims-tsx.d.ts`.
  - Remove `shims-vue.d.ts` that's missing in quickstart template.
- Unit tests:
  - Remove old typing workaround for mounting components.
  - Rename `propsData` to `props`.
  - Remove unneeded `any` cast workarounds.
  - Move stubs and `provide`s under `global` object.

Other changes:

- Add `dmg-license` dependency explicitly due to failing electron builds
  on macOS (electron-userland/electron-builder#6520,
  electron-userland/electron-builder#6489). This was a side-effect of
  updating dependencies for this commit.

src/presentation/components/App.vue

@@ -18,10 +18,6 @@ import TheFooter from '@/presentation/components/TheFooter/TheFooter.vue';
 import TheCodeButtons from '@/presentation/components/Code/CodeButtons/TheCodeButtons.vue';
 import TheScriptArea from '@/presentation/components/Scripts/TheScriptArea.vue';
 import TheSearchBar from '@/presentation/components/TheSearchBar.vue';
-import { buildContext } from '@/application/Context/ApplicationContextFactory';
-import { provideDependencies } from '../bootstrapping/DependencyProvider';
-
-const singletonAppContext = await buildContext();
 
 const OptionalDevToolkit = process.env.NODE_ENV !== 'production'
   ? defineAsyncComponent(() => import('@/presentation/components/DevToolkit/DevToolkit.vue'))
@@ -36,9 +32,7 @@ export default defineComponent({
     TheFooter,
     OptionalDevToolkit,
   },
-  setup() {
-    provideDependencies(singletonAppContext); // In Vue 3.0 we can move it to main.ts
-  },
+  setup() { },
 });
 </script>
 

src/presentation/components/Code/CodeButtons/Instructions/CodeInstruction.vue

@@ -1,7 +1,7 @@
 <template>
   <span class="code-wrapper">
     <span class="dollar">$</span>
-    <code><slot /></code>
+    <code ref="codeElement"><slot /></code>
     <TooltipWrapper>
       <AppIcon
         class="copy-button"
@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, useSlots } from 'vue';
+import { defineComponent, shallowRef } from 'vue';
 import { Clipboard } from '@/infrastructure/Clipboard';
 import TooltipWrapper from '@/presentation/components/Shared/TooltipWrapper.vue';
 import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
@@ -27,15 +27,23 @@ export default defineComponent({
     AppIcon,
   },
   setup() {
-    const slots = useSlots();
+    const codeElement = shallowRef<HTMLElement | undefined>();
 
     function copyCode() {
-      const code = slots.default()[0].text;
+      const element = codeElement.value;
+      if (!element) {
+        throw new Error('Code element could not be found.');
+      }
+      const code = element.textContent;
+      if (!code) {
+        throw new Error('Code element does not contain any text.');
+      }
       Clipboard.copyText(code);
     }
 
     return {
       copyCode,
+      codeElement,
     };
   },
 });

src/presentation/components/Code/TheCodeArea.vue

@@ -185,14 +185,16 @@ function getDefaultCode(language: ScriptingLanguage): string {
 <style scoped lang="scss">
 @use "@/presentation/assets/styles/main" as *;
 
-::v-deep .code-area {
-  min-height: 200px;
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  &__highlight {
-    background-color: $color-secondary-light;
-    position: absolute;
+:deep() {
+  .code-area {
+    min-height: 200px;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    &__highlight {
+      background-color: $color-secondary-light;
+      position: absolute;
+    }
   }
 }
 </style>

src/presentation/components/Scripts/Menu/MenuOptionList.vue

@@ -28,8 +28,8 @@ $gap: 0.25rem;
   font-family: $font-normal;
   display: flex;
   align-items: center;
-  .items {
-    * + *::before {
+  :deep(.items) {
+    > * + *::before {
       content: '|';
       padding-right: $gap;
       padding-left: $gap;

src/presentation/components/Scripts/Menu/MenuOptionListItem.vue

@@ -1,5 +1,9 @@
 <template>
-  <span> <!-- Parent wrapper allows adding content inside with CSS without making it clickable -->
+  <span>
+    <!--
+      Parent wrapper allows `MenuOptionList` to safely add content inside
+      such as adding content in `::before` block without making it clickable.
+    -->
     <span
       v-bind:class="{
         disabled: !enabled,

src/presentation/components/Scripts/View/Cards/NonCollapsingDirective.ts

@@ -11,7 +11,7 @@ export function hasDirective(el: Element): boolean {
 }
 
 export const NonCollapsing: ObjectDirective<HTMLElement> = {
-  inserted(el: HTMLElement) { // In Vue 3, use "mounted"
+  mounted(el: HTMLElement) {
     el.setAttribute(attributeName, '');
   },
 };

src/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.vue

@@ -20,7 +20,7 @@ import { defineComponent, computed } from 'vue';
 
 export default defineComponent({
   props: {
-    value: Boolean,
+    modelValue: Boolean,
     label: {
       type: String,
       required: true,
@@ -32,19 +32,19 @@ export default defineComponent({
   },
   emits: {
     /* eslint-disable @typescript-eslint/no-unused-vars */
-    input: (isChecked: boolean) => true,
+    'update:modelValue': (isChecked: boolean) => true,
     /* eslint-enable @typescript-eslint/no-unused-vars */
   },
   setup(props, { emit }) {
     const isChecked = computed({
       get() {
-        return props.value;
+        return props.modelValue;
       },
       set(value: boolean) {
-        if (value === props.value) {
+        if (value === props.modelValue) {
           return;
         }
-        emit('input', value);
+        emit('update:modelValue', value);
       },
     });
 

src/presentation/components/Scripts/View/Tree/TreeView/Node/HierarchicalTreeNode.vue

@@ -184,10 +184,7 @@ export default defineComponent({
     transform: translateX(0);
   }
 
-  .#{$name}-enter,
-  // Vue 2.X compatibility
   .#{$name}-enter-from,
-  // Vue 3.X compatibility
   .#{$name}-leave-to {
     opacity: 0;
     transform: translateX(-2em);

src/presentation/components/Shared/Icon/AppIcon.vue

@@ -30,7 +30,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .inline-icon {
   display: inline-block;
-  ::v-deep svg { // using ::v-deep because when v-html is used the content doesn't go through Vue's template compiler.
+  :deep(svg) { // using :deep because when v-html is used the content doesn't go through Vue's template compiler.
     display: inline-block;
     height: 1em;
     overflow: visible;

src/presentation/components/Shared/Icon/UseSvgLoader.ts

@@ -62,7 +62,7 @@ const RawSvgLoaders = import.meta.glob('@/presentation/assets/icons/**/*.svg', {
 });
 
 function modifySvg(svgSource: string): string {
-  const parser = new DOMParser();
+  const parser = new window.DOMParser();
   const doc = parser.parseFromString(svgSource, 'image/svg+xml');
   let svgRoot = doc.documentElement;
   svgRoot = removeSvgComments(svgRoot);

src/presentation/components/Shared/Modal/ModalContainer.vue

@@ -36,11 +36,11 @@ export default defineComponent({
   },
   emits: {
     /* eslint-disable @typescript-eslint/no-unused-vars */
-    input: (isOpen: boolean) => true,
+    'update:modelValue': (isOpen: boolean) => true,
     /* eslint-enable @typescript-eslint/no-unused-vars */
   },
   props: {
-    value: {
+    modelValue: {
       type: Boolean,
       required: true,
     },
@@ -67,13 +67,13 @@ export default defineComponent({
     onModalFullyTransitionedOut(() => {
       isRendered.value = false;
       resetTransitionStatus();
-      if (props.value) {
-        emit('input', false);
+      if (props.modelValue) {
+        emit('update:modelValue', false);
       }
     });
 
     watchEffect(() => {
-      if (props.value) {
+      if (props.modelValue) {
         open();
       } else {
         close();
@@ -99,8 +99,8 @@ export default defineComponent({
 
       isOpen.value = false;
 
-      if (props.value) {
-        emit('input', false);
+      if (props.modelValue) {
+        emit('update:modelValue', false);
       }
     }
 
@@ -115,8 +115,8 @@ export default defineComponent({
         isOpen.value = true;
       });
 
-      if (!props.value) {
-        emit('input', true);
+      if (!props.modelValue) {
+        emit('update:modelValue', true);
       }
     }
 

src/presentation/components/Shared/Modal/ModalDialog.vue

@@ -28,21 +28,21 @@ export default defineComponent({
   },
   emits: {
     /* eslint-disable @typescript-eslint/no-unused-vars */
-    input: (isOpen: boolean) => true,
+    'update:modelValue': (isOpen: boolean) => true,
     /* eslint-enable @typescript-eslint/no-unused-vars */
   },
   props: {
-    value: {
+    modelValue: {
       type: Boolean,
       required: true,
     },
   },
   setup(props, { emit }) {
     const showDialog = computed({
-      get: () => props.value,
+      get: () => props.modelValue,
       set: (value) => {
-        if (value !== props.value) {
-          emit('input', value);
+        if (value !== props.modelValue) {
+          emit('update:modelValue', value);
         }
       },
     });

src/presentation/components/Shared/TooltipWrapper.vue

@@ -28,7 +28,7 @@ import {
 } from '@floating-ui/vue';
 import { defineComponent, shallowRef, computed } from 'vue';
 import { useResizeObserverPolyfill } from '@/presentation/components/Shared/Hooks/UseResizeObserverPolyfill';
-import type { CSSProperties } from 'vue/types/jsx'; // In Vue 3.0 import from 'vue'
+import type { CSSProperties } from 'vue';
 
 const GAP_BETWEEN_TOOLTIP_AND_TRIGGER_IN_PX = 2;
 const ARROW_SIZE_IN_PX = 4;
@@ -105,9 +105,8 @@ function getArrowPositionStyles(
   } else if (y) { // either X or Y is calculated
     style.top = `${y}px`;
   }
-  const oppositeSide = getCounterpartBoxOffsetProperty(placement) as never;
-  // Cast to `never` due to ts(2590) from JSX import. Remove after migrating to Vue 3.0.
-  style[oppositeSide] = `-${ARROW_SIZE_IN_PX}px`;
+  const oppositeSide = getCounterpartBoxOffsetProperty(placement);
+  style[oppositeSide.toString()] = `-${ARROW_SIZE_IN_PX}px`;
   return style;
 }