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.

package.json

@@ -42,7 +42,7 @@
     "electron-updater": "^6.1.4",
     "file-saver": "^2.0.5",
     "markdown-it": "^13.0.2",
-    "vue": "^2.7.14"
+    "vue": "^3.3.7"
   },
   "devDependencies": {
     "@modyfi/vite-plugin-yaml": "^1.0.4",
@@ -52,10 +52,10 @@
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-legacy": "^4.1.1",
-    "@vitejs/plugin-vue2": "^2.2.0",
+    "@vitejs/plugin-vue": "^4.4.0",
     "@vue/eslint-config-airbnb-with-typescript": "^7.0.0",
     "@vue/eslint-config-typescript": "^11.0.3",
-    "@vue/test-utils": "^1.3.6",
+    "@vue/test-utils": "^2.4.1",
     "autoprefixer": "^10.4.16",
     "cypress": "^13.3.1",
     "electron": "^27.0.0",
@@ -97,5 +97,11 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/undergroundwires/privacy.sexy.git"
+  },
+  "optionalDependencies": {
+    "dmg-license": "^1.0.11"
+  },
+  "//optionalDependencies": {
+    "dmg-license": "Required by `electron-builder` for DMG builds on macOS, https://github.com/electron-userland/electron-builder/issues/6489, https://github.com/electron-userland/electron-builder/issues/6520"
   }
 }

src/presentation/assets/styles/_mixins.scss

@@ -35,8 +35,7 @@
     }
 
     .#{$name}-leave-active,
-    .#{$name}-enter, // Vue 2.X compatibility
+    .#{$name}-enter-from
-    .#{$name}-enter-from // Vue 3.X compatibility
     {
         opacity: 0;
 

src/presentation/bootstrapping/ApplicationBootstrapper.ts

@@ -1,20 +1,23 @@
-import { VueConstructor, IVueBootstrapper } from './IVueBootstrapper';
+import { Bootstrapper } from './Bootstrapper';
-import { VueBootstrapper } from './Modules/VueBootstrapper';
 import { RuntimeSanityValidator } from './Modules/RuntimeSanityValidator';
 import { AppInitializationLogger } from './Modules/AppInitializationLogger';
+import { DependencyBootstrapper } from './Modules/DependencyBootstrapper';
+import type { App } from 'vue';
 
-export class ApplicationBootstrapper implements IVueBootstrapper {
+export class ApplicationBootstrapper implements Bootstrapper {
-  public bootstrap(vue: VueConstructor): void {
+  constructor(private readonly bootstrappers = ApplicationBootstrapper.getAllBootstrappers()) { }
-    const bootstrappers = ApplicationBootstrapper.getAllBootstrappers();
+
-    for (const bootstrapper of bootstrappers) {
+  public async bootstrap(app: App): Promise<void> {
-      bootstrapper.bootstrap(vue);
+    for (const bootstrapper of this.bootstrappers) {
+      // eslint-disable-next-line no-await-in-loop
+      await bootstrapper.bootstrap(app); // Not running `Promise.all` because order matters.
     }
   }
 
-  private static getAllBootstrappers(): IVueBootstrapper[] {
+  private static getAllBootstrappers(): Bootstrapper[] {
     return [
-      new VueBootstrapper(),
       new RuntimeSanityValidator(),
+      new DependencyBootstrapper(),
       new AppInitializationLogger(),
     ];
   }

src/presentation/bootstrapping/Bootstrapper.ts

@@ -0,0 +1,5 @@
+import type { App } from 'vue';
+
+export interface Bootstrapper {
+  bootstrap(app: App): Promise<void>;
+}

src/presentation/bootstrapping/IVueBootstrapper.ts

@@ -1,7 +0,0 @@
-import { VueConstructor } from 'vue';
-
-export interface IVueBootstrapper {
-  bootstrap(vue: VueConstructor): void;
-}
-
-export { VueConstructor };

src/presentation/bootstrapping/Modules/AppInitializationLogger.ts

@@ -1,13 +1,13 @@
 import { ILogger } from '@/infrastructure/Log/ILogger';
-import { IVueBootstrapper } from '../IVueBootstrapper';
+import { Bootstrapper } from '../Bootstrapper';
 import { ClientLoggerFactory } from '../ClientLoggerFactory';
 
-export class AppInitializationLogger implements IVueBootstrapper {
+export class AppInitializationLogger implements Bootstrapper {
   constructor(
     private readonly logger: ILogger = ClientLoggerFactory.Current.logger,
   ) { }
 
-  public bootstrap(): void {
+  public async bootstrap(): Promise<void> {
     // Do not remove [APP_INIT]; it's a marker used in tests.
     this.logger.info('[APP_INIT] Application is initialized.');
   }

src/presentation/bootstrapping/Modules/DependencyBootstrapper.ts

@@ -0,0 +1,20 @@
+import { inject, type App } from 'vue';
+import { buildContext } from '@/application/Context/ApplicationContextFactory';
+import { provideDependencies } from '@/presentation/bootstrapping/DependencyProvider';
+import { Bootstrapper } from '../Bootstrapper';
+
+export class DependencyBootstrapper implements Bootstrapper {
+  constructor(
+    private readonly contextFactory = buildContext,
+    private readonly dependencyProvider = provideDependencies,
+    private readonly injector = inject,
+  ) { }
+
+  public async bootstrap(app: App): Promise<void> {
+    const context = await this.contextFactory();
+    this.dependencyProvider(context, {
+      provide: app.provide,
+      inject: this.injector,
+    });
+  }
+}

src/presentation/bootstrapping/Modules/RuntimeSanityValidator.ts

@@ -1,12 +1,12 @@
 import { validateRuntimeSanity } from '@/infrastructure/RuntimeSanity/SanityChecks';
-import { IVueBootstrapper } from '../IVueBootstrapper';
+import { Bootstrapper } from '../Bootstrapper';
 
-export class RuntimeSanityValidator implements IVueBootstrapper {
+export class RuntimeSanityValidator implements Bootstrapper {
   constructor(private readonly validator = validateRuntimeSanity) {
 
   }
 
-  public bootstrap(): void {
+  public async bootstrap(): Promise<void> {
     this.validator({
       validateEnvironmentVariables: true,
       validateWindowVariables: true,

src/presentation/bootstrapping/Modules/VueBootstrapper.ts

@@ -1,8 +0,0 @@
-import { VueConstructor, IVueBootstrapper } from '../IVueBootstrapper';
-
-export class VueBootstrapper implements IVueBootstrapper {
-  public bootstrap(vue: VueConstructor): void {
-    const { config } = vue;
-    config.productionTip = false;
-  }
-}

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() {
+  setup() { },
-    provideDependencies(singletonAppContext); // In Vue 3.0 we can move it to main.ts
-  },
 });
 </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,7 +185,8 @@ function getDefaultCode(language: ScriptingLanguage): string {
 <style scoped lang="scss">
 @use "@/presentation/assets/styles/main" as *;
 
-::v-deep .code-area {
+:deep() {
+  .code-area {
     min-height: 200px;
     width: 100%;
     height: 100%;
@@ -195,4 +196,5 @@ function getDefaultCode(language: ScriptingLanguage): string {
       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 {
+  :deep(.items) {
-    * + *::before {
+    > * + *::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) {
+      if (props.modelValue) {
-        emit('input', false);
+        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) {
+      if (props.modelValue) {
-        emit('input', false);
+        emit('update:modelValue', false);
       }
     }
 
@@ -115,8 +115,8 @@ export default defineComponent({
         isOpen.value = true;
       });
 
-      if (!props.value) {
+      if (!props.modelValue) {
-        emit('input', true);
+        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) {
+        if (value !== props.modelValue) {
-          emit('input', value);
+          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;
+  const oppositeSide = getCounterpartBoxOffsetProperty(placement);
-  // Cast to `never` due to ts(2590) from JSX import. Remove after migrating to Vue 3.0.
+  style[oppositeSide.toString()] = `-${ARROW_SIZE_IN_PX}px`;
-  style[oppositeSide] = `-${ARROW_SIZE_IN_PX}px`;
   return style;
 }
 

src/presentation/main.ts

@@ -1,10 +1,10 @@
-import Vue from 'vue';
+import { createApp } from 'vue';
 import App from './components/App.vue';
 import { ApplicationBootstrapper } from './bootstrapping/ApplicationBootstrapper';
 
-new ApplicationBootstrapper()
+const app = createApp(App);
-  .bootstrap(Vue);
 
-new Vue({
+await new ApplicationBootstrapper()
-  render: (h) => h(App),
+  .bootstrap(app);
-}).$mount('#app');
+
+app.mount('#app');

src/presentation/shims-tsx.d.ts

@@ -1,15 +0,0 @@
-import Vue, { VNode } from 'vue';
-
-declare global {
-  namespace JSX {
-    interface Element extends VNode {
-    }
-
-    interface ElementClass extends Vue {
-    }
-
-    interface IntrinsicElements {
-      [elem: string]: any;
-    }
-  }
-}

src/presentation/shims-vue.d.ts

@@ -1,7 +0,0 @@
-/* eslint-disable */
-
-declare module '*.vue' {
-  import { DefineComponent } from 'vue';
-  const component: DefineComponent;
-  export default component;
-}

tests/shared/bootstrap/setup.ts

@@ -1,4 +1,4 @@
 import { afterEach } from 'vitest';
-import { enableAutoDestroy } from '@vue/test-utils';
+import { enableAutoUnmount } from '@vue/test-utils';
 
-enableAutoDestroy(afterEach);
+enableAutoUnmount(afterEach);

tests/unit/presentation/bootstrapping/ApplicationBootstrapper.spec.ts

@@ -0,0 +1,56 @@
+import { describe, it, expect } from 'vitest';
+import { BootstrapperStub } from '@tests/unit/shared/Stubs/BootstrapperStub';
+import { ApplicationBootstrapper } from '@/presentation/bootstrapping/ApplicationBootstrapper';
+import { expectThrowsAsync } from '@tests/unit/shared/Assertions/ExpectThrowsAsync';
+import type { App } from 'vue';
+
+describe('ApplicationBootstrapper', () => {
+  it('calls bootstrap on each bootstrapper', async () => {
+    // arrange
+    const bootstrapper1 = new BootstrapperStub();
+    const bootstrapper2 = new BootstrapperStub();
+    const sut = new ApplicationBootstrapper([bootstrapper1, bootstrapper2]);
+    // act
+    await sut.bootstrap({} as App);
+    // assert
+    expect(bootstrapper1.callHistory.map((c) => c.methodName === 'bootstrap')).to.have.lengthOf(1);
+    expect(bootstrapper2.callHistory.map((c) => c.methodName === 'bootstrap')).to.have.lengthOf(1);
+  });
+
+  it('calls bootstrap in the correct order', async () => {
+    // arrange
+    const callOrder: number[] = [];
+    const bootstrapper1 = {
+      async bootstrap(): Promise<void> {
+        callOrder.push(1);
+      },
+    };
+    const bootstrapper2 = {
+      async bootstrap(): Promise<void> {
+        callOrder.push(2);
+      },
+    };
+    const sut = new ApplicationBootstrapper([bootstrapper1, bootstrapper2]);
+    // act
+    await sut.bootstrap({} as App);
+    // assert
+    expect(callOrder).to.deep.equal([1, 2]);
+  });
+
+  it('stops if a bootstrapper fails', async () => {
+    // arrange
+    const expectedError = 'Bootstrap failed';
+    const bootstrapper1 = {
+      async bootstrap(): Promise<void> {
+        throw new Error(expectedError);
+      },
+    };
+    const bootstrapper2 = new BootstrapperStub();
+    const sut = new ApplicationBootstrapper([bootstrapper1, bootstrapper2]);
+    // act
+    const act = async () => { await sut.bootstrap({} as App); };
+    // assert
+    await expectThrowsAsync(act, expectedError);
+    expect(bootstrapper2.callHistory.map((c) => c.methodName === 'bootstrap')).to.have.lengthOf(0);
+  });
+});

tests/unit/presentation/bootstrapping/Modules/AppInitializationLogger.spec.ts

@@ -3,13 +3,13 @@ import { AppInitializationLogger } from '@/presentation/bootstrapping/Modules/Ap
 import { LoggerStub } from '@tests/unit/shared/Stubs/LoggerStub';
 
 describe('AppInitializationLogger', () => {
-  it('logs the app initialization marker upon bootstrap', () => {
+  it('logs the app initialization marker upon bootstrap', async () => {
     // arrange
     const marker = '[APP_INIT]';
     const loggerStub = new LoggerStub();
     const sut = new AppInitializationLogger(loggerStub);
     // act
-    sut.bootstrap();
+    await sut.bootstrap();
     // assert
     expect(loggerStub.callHistory).to.have.lengthOf(1);
     expect(loggerStub.callHistory[0].args).to.have.lengthOf(1);

tests/unit/presentation/bootstrapping/Modules/DependencyBootstrapper.spec.ts

@@ -0,0 +1,120 @@
+import { describe, it, expect } from 'vitest';
+import { ApplicationContextStub } from '@tests/unit/shared/Stubs/ApplicationContextStub';
+import { DependencyBootstrapper } from '@/presentation/bootstrapping/Modules/DependencyBootstrapper';
+import { IApplicationContext } from '@/application/Context/IApplicationContext';
+import { VueDependencyInjectionApiStub } from '@tests/unit/shared/Stubs/VueDependencyInjectionApiStub';
+import { buildContext } from '@/application/Context/ApplicationContextFactory';
+import { provideDependencies } from '@/presentation/bootstrapping/DependencyProvider';
+import type { App, inject } from 'vue';
+
+describe('DependencyBootstrapper', () => {
+  describe('bootstrap', () => {
+    it('calls the contextFactory', async () => {
+      // arrange
+      const { mockContext, mockApp } = createMocks();
+      let contextFactoryCalled = false;
+      const sut = new DependencyBootstrapperBuilder()
+        .withContextFactory(async () => {
+          contextFactoryCalled = true;
+          return mockContext;
+        })
+        .build();
+      // act
+      await sut.bootstrap(mockApp);
+      // assert
+      expect(contextFactoryCalled).to.equal(true);
+    });
+    it('provides correct context to dependency provider', async () => {
+      // arrange
+      const { mockContext, mockApp } = createMocks();
+      const expectedContext = mockContext;
+      let actualContext: IApplicationContext | undefined;
+      const sut = new DependencyBootstrapperBuilder()
+        .withContextFactory(async () => expectedContext)
+        .withDependencyProvider((...params) => {
+          const [context] = params;
+          actualContext = context;
+        })
+        .build();
+      // act
+      await sut.bootstrap(mockApp);
+      // assert
+      expect(actualContext).to.equal(expectedContext);
+    });
+    it('provides correct provide function to dependency provider', async () => {
+      // arrange
+      const { mockApp, provideMock } = createMocks();
+      const expectedProvide = provideMock;
+      let actualProvide: typeof expectedProvide | undefined;
+      const sut = new DependencyBootstrapperBuilder()
+        .withDependencyProvider((...params) => {
+          actualProvide = params[1]?.provide;
+        })
+        .build();
+      // act
+      await sut.bootstrap(mockApp);
+      // assert
+      expect(actualProvide).to.equal(expectedProvide);
+    });
+    it('provides correct inject function to dependency provider', async () => {
+      // arrange
+      const { mockApp } = createMocks();
+      const expectedInjector = new VueDependencyInjectionApiStub().inject;
+      let actualInjector: Injector | undefined;
+      const sut = new DependencyBootstrapperBuilder()
+        .withInjector(expectedInjector)
+        .withDependencyProvider((...params) => {
+          actualInjector = params[1]?.inject;
+        })
+        .build();
+      // act
+      await sut.bootstrap(mockApp);
+      // assert
+      expect(actualInjector).to.equal(expectedInjector);
+    });
+  });
+});
+
+function createMocks() {
+  const provideMock = new VueDependencyInjectionApiStub().provide;
+  const mockContext = new ApplicationContextStub();
+  const mockApp = {
+    provide: provideMock,
+  } as unknown as App;
+  return { mockContext, mockApp, provideMock };
+}
+
+type Injector = typeof inject;
+type Provider = typeof provideDependencies;
+type ContextFactory = typeof buildContext;
+
+class DependencyBootstrapperBuilder {
+  private contextFactory: ContextFactory = () => Promise.resolve(new ApplicationContextStub());
+
+  private dependencyProvider: Provider = () => new VueDependencyInjectionApiStub().provide;
+
+  private injector: Injector = () => new VueDependencyInjectionApiStub().inject;
+
+  public withContextFactory(contextFactory: ContextFactory): this {
+    this.contextFactory = contextFactory;
+    return this;
+  }
+
+  public withInjector(injector: Injector): this {
+    this.injector = injector;
+    return this;
+  }
+
+  public withDependencyProvider(dependencyProvider: Provider): this {
+    this.dependencyProvider = dependencyProvider;
+    return this;
+  }
+
+  public build(): DependencyBootstrapper {
+    return new DependencyBootstrapper(
+      this.contextFactory,
+      this.dependencyProvider,
+      this.injector,
+    );
+  }
+}

tests/unit/presentation/bootstrapping/Modules/RuntimeSanityValidator.spec.ts

@@ -1,9 +1,10 @@
 import { describe, it, expect } from 'vitest';
 import { ISanityCheckOptions } from '@/infrastructure/RuntimeSanity/Common/ISanityCheckOptions';
 import { RuntimeSanityValidator } from '@/presentation/bootstrapping/Modules/RuntimeSanityValidator';
+import { expectDoesNotThrowAsync, expectThrowsAsync } from '@tests/unit/shared/Assertions/ExpectThrowsAsync';
 
 describe('RuntimeSanityValidator', () => {
-  it('calls validator with correct options upon bootstrap', () => {
+  it('calls validator with correct options upon bootstrap', async () => {
     // arrange
     const expectedOptions: ISanityCheckOptions = {
       validateEnvironmentVariables: true,
@@ -15,11 +16,11 @@ describe('RuntimeSanityValidator', () => {
     };
     const sut = new RuntimeSanityValidator(validatorMock);
     // act
-    sut.bootstrap();
+    await sut.bootstrap();
     // assert
     expect(actualOptions).to.deep.equal(expectedOptions);
   });
-  it('propagates the error if validator fails', () => {
+  it('propagates the error if validator fails', async () => {
     // arrange
     const expectedMessage = 'message thrown from validator';
     const validatorMock = () => {
@@ -27,17 +28,17 @@ describe('RuntimeSanityValidator', () => {
     };
     const sut = new RuntimeSanityValidator(validatorMock);
     // act
-    const act = () => sut.bootstrap();
+    const act = async () => { await sut.bootstrap(); };
     // assert
-    expect(act).to.throw(expectedMessage);
+    await expectThrowsAsync(act, expectedMessage);
   });
-  it('runs successfully if validator passes', () => {
+  it('runs successfully if validator passes', async () => {
     // arrange
     const validatorMock = () => { /* NOOP */ };
     const sut = new RuntimeSanityValidator(validatorMock);
     // act
-    const act = () => sut.bootstrap();
+    const act = async () => { await sut.bootstrap(); };
     // assert
-    expect(act).to.not.throw();
+    await expectDoesNotThrowAsync(act);
   });
 });

tests/unit/presentation/components/Scripts/View/Cards/NonCollapsingDirective.spec.ts

@@ -5,11 +5,11 @@ const expectedAttributeName = 'data-interaction-does-not-collapse';
 
 describe('NonCollapsingDirective', () => {
   describe('NonCollapsing', () => {
-    it('adds expected attribute to the element when inserted', () => {
+    it('adds expected attribute to the element when mounted', () => {
       // arrange
       const element = createElementMock();
       // act
-      NonCollapsing.inserted(element, undefined, undefined, undefined);
+      NonCollapsing.mounted(element, undefined, undefined, undefined);
       // assert
       expect(element.hasAttribute(expectedAttributeName));
     });

tests/unit/presentation/components/Scripts/View/TheScriptsView.spec.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest';
-import { Wrapper, shallowMount } from '@vue/test-utils';
+import { VueWrapper, shallowMount } from '@vue/test-utils';
 import TheScriptsView from '@/presentation/components/Scripts/View/TheScriptsView.vue';
 import ScriptsTree from '@/presentation/components/Scripts/View/Tree/ScriptsTree.vue';
 import CardList from '@/presentation/components/Scripts/View/Cards/CardList.vue';
@@ -392,7 +392,7 @@ describe('TheScriptsView.vue', () => {
   });
 });
 
-function expectComponentsToNotExist(wrapper: Wrapper<Vue>, components: readonly unknown[]) {
+function expectComponentsToNotExist(wrapper: VueWrapper, components: readonly unknown[]) {
   const existingUnexpectedComponents = components
     .map((component) => wrapper.findComponent(component))
     .filter((component) => component.exists());
@@ -404,6 +404,7 @@ function mountComponent(options?: {
   readonly viewType?: ViewType,
 }) {
   return shallowMount(TheScriptsView, {
+    global: {
       provide: {
         [InjectionKeys.useCollectionState as symbol]:
           () => options?.useCollectionState ?? new UseCollectionStateStub().get(),
@@ -412,7 +413,8 @@ function mountComponent(options?: {
         [InjectionKeys.useAutoUnsubscribedEvents as symbol]:
           () => new UseAutoUnsubscribedEventsStub().get(),
       },
-    propsData: {
+    },
+    props: {
       currentView: options?.viewType === undefined ? ViewType.Tree : options.viewType,
     },
   });

tests/unit/presentation/components/Scripts/View/Tree/NodeContent/ToggleSwitch.spec.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import {
-  Wrapper, shallowMount,
+  VueWrapper, shallowMount,
   mount,
 } from '@vue/test-utils';
 import { nextTick, defineComponent } from 'vue';
@@ -92,11 +92,11 @@ describe('ToggleSwitch.vue', () => {
           const { checkboxWrapper } = getCheckboxElement(wrapper);
 
           // act
-          await checkboxWrapper.setChecked(newCheckValue);
+          await checkboxWrapper.setValue(newCheckValue);
           await nextTick();
 
           // assert
-          expect(wrapper.emitted().input).to.deep.equal([[newCheckValue]]);
+          expect(wrapper.emitted('update:modelValue')).to.deep.equal([[newCheckValue]]);
         });
       });
     });
@@ -122,11 +122,11 @@ describe('ToggleSwitch.vue', () => {
           const { checkboxWrapper } = getCheckboxElement(wrapper);
 
           // act
-          await checkboxWrapper.setChecked(value);
+          await checkboxWrapper.setValue(value);
           await nextTick();
 
           // assert
-          expect(wrapper.emitted().input).to.equal(undefined);
+          expect(wrapper.emitted('update:modelValue')).to.deep.equal(undefined);
         });
       });
     });
@@ -145,7 +145,6 @@ describe('ToggleSwitch.vue', () => {
       await nextTick();
 
       // assert
-      expect(switchWrapper.exists());
       const receivedEvents = parentWrapper.emitted(parentClickEventName);
       expect(receivedEvents).to.equal(undefined);
     });
@@ -161,14 +160,13 @@ describe('ToggleSwitch.vue', () => {
       await nextTick();
 
       // assert
-      expect(switchWrapper.exists());
       const receivedEvents = parentWrapper.emitted(parentClickEventName);
       expect(receivedEvents).to.have.lengthOf(1);
     });
   });
 });
 
-function getCheckboxElement(wrapper: Wrapper<Vue>) {
+function getCheckboxElement(wrapper: VueWrapper) {
   const checkboxWrapper = wrapper.find(DOM_INPUT_TOGGLE_CHECKBOX_SELECTOR);
   const checkboxElement = checkboxWrapper.element as HTMLInputElement;
   return {
@@ -184,9 +182,9 @@ function mountComponent(options?: {
     readonly stopClickPropagation?: boolean,
   }
 }) {
-  const wrapper = shallowMount(ToggleSwitch as unknown, {
+  const wrapper = shallowMount(ToggleSwitch, {
-    propsData: {
+    props: {
-      value: options?.properties?.modelValue,
+      modelValue: options?.properties?.modelValue,
       label: options?.properties?.label ?? 'test-label',
       stopClickPropagation: options?.properties?.stopClickPropagation,
     },
@@ -225,10 +223,12 @@ function mountToggleSwitchParent(options?: {
     },
   });
   const wrapper = mount(
-    parentComponent as unknown,
+    parentComponent,
     {
+      global: {
         stubs: { ToggleSwitch: false },
       },
+    },
   );
   return {
     wrapper,

tests/unit/presentation/components/Scripts/View/Tree/TreeView/Node/UseKeyboardInteractionState.spec.ts

@@ -64,7 +64,7 @@ describe('useKeyboardInteractionState', () => {
       const { listeners, windowStub } = createWindowStub();
       // act
       const { wrapper } = mountWrapperComponent(windowStub);
-      wrapper.destroy();
+      wrapper.unmount();
       await nextTick();
       // assert
       expect(listeners.keydown).to.have.lengthOf(0);

tests/unit/presentation/components/Scripts/View/Tree/TreeView/Node/UseNodeState.spec.ts

@@ -77,11 +77,13 @@ function mountWrapperComponent(nodeWatcher: WatchSource<ReadOnlyTreeNode | undef
       template: '<div></div>',
     }),
     {
+      global: {
         provide: {
           [InjectionKeys.useAutoUnsubscribedEvents as symbol]:
             () => new UseAutoUnsubscribedEventsStub().get(),
         },
       },
+    },
   );
   return {
     wrapper,

tests/unit/presentation/components/Scripts/View/Tree/TreeView/UseCurrentTreeNodes.spec.ts

@@ -68,11 +68,13 @@ function mountWrapperComponent(treeWatcher: WatchSource<TreeRoot | undefined>) {
       template: '<div></div>',
     }),
     {
+      global: {
         provide: {
           [InjectionKeys.useAutoUnsubscribedEvents as symbol]:
             () => new UseAutoUnsubscribedEventsStub().get(),
         },
       },
+    },
   );
   return {
     wrapper,

tests/unit/presentation/components/Scripts/View/Tree/TreeView/UseNodeStateChangeAggregator.spec.ts

@@ -334,11 +334,13 @@ class UseNodeStateChangeAggregatorBuilder {
         template: '<div></div>',
       }),
       {
+        global: {
           provide: {
             [InjectionKeys.useAutoUnsubscribedEvents as symbol]:
               () => this.events.get(),
           },
         },
+      },
     );
     return {
       wrapper,

tests/unit/presentation/components/Scripts/View/Tree/TreeViewAdapter/UseCollectionSelectionStateUpdater.spec.ts

@@ -170,9 +170,11 @@ function mountWrapperComponent() {
     },
     template: '<div></div>',
   }, {
+    global: {
       provide: {
         [InjectionKeys.useCollectionState as symbol]: () => useStateStub.get(),
       },
+    },
   });
 
   return {

tests/unit/presentation/components/Scripts/View/Tree/TreeViewAdapter/UseSelectedScriptNodeIds.spec.ts

@@ -60,12 +60,14 @@ function mountWrapperComponent(scenario?: {
     },
     template: '<div></div>',
   }, {
+    global: {
       provide: {
         [InjectionKeys.useCollectionState as symbol]:
           () => useStateStub.get(),
         [InjectionKeys.useAutoUnsubscribedEvents as symbol]:
           () => new UseAutoUnsubscribedEventsStub().get(),
       },
+    },
   });
 
   return {

tests/unit/presentation/components/Scripts/View/Tree/TreeViewAdapter/UseTreeViewFilterEvent.spec.ts

@@ -146,12 +146,14 @@ function mountWrapperComponent(options?: {
     },
     template: '<div></div>',
   }, {
+    global: {
       provide: {
         [InjectionKeys.useCollectionState as symbol]:
           () => useStateStub.get(),
         [InjectionKeys.useAutoUnsubscribedEvents as symbol]:
           () => new UseAutoUnsubscribedEventsStub().get(),
       },
+    },
   });
 
   return {

tests/unit/presentation/components/Scripts/View/Tree/TreeViewAdapter/UseTreeViewNodeInput.spec.ts

@@ -104,9 +104,11 @@ function mountWrapperComponent(categoryIdWatcher: WatchSource<number | undefined
     },
     template: '<div></div>',
   }, {
+    global: {
       provide: {
         [InjectionKeys.useCollectionState as symbol]: () => useStateStub.get(),
       },
+    },
   });
 
   return {

tests/unit/presentation/components/Shared/Hooks/UseAutoUnsubscribedEvents.spec.ts

@@ -44,7 +44,7 @@ describe('UseAutoUnsubscribedEvents', () => {
     });
   });
   describe('event unsubscription', () => {
-    it('unsubscribes from all events when the associated component is destroyed', () => {
+    it('unsubscribes from all events when the associated component is unmounted', () => {
       // arrange
       const events = new EventSubscriptionCollectionStub();
       const expectedCall: FunctionKeys<EventSubscriptionCollection> = 'unsubscribeAll';
@@ -58,7 +58,7 @@ describe('UseAutoUnsubscribedEvents', () => {
       events.callHistory.length = 0;
 
       // act
-      stubComponent.destroy();
+      stubComponent.unmount();
 
       // assert
       expect(events.callHistory).to.have.lengthOf(1);

tests/unit/presentation/components/Shared/Icon/AppIcon.spec.ts

@@ -62,12 +62,14 @@ function mountComponent(options: {
   readonly loader: UseSvgLoaderStub,
 }) {
   return shallowMount(AppIcon, {
-    propsData: {
+    props: {
       icon: options.iconPropValue,
     },
+    global: {
       provide: {
         useSvgLoaderHook: options.loader.get(),
       },
+    },
   });
 }
 

tests/unit/presentation/components/Shared/Modal/Hooks/UseEscapeKeyListener.spec.ts

@@ -56,7 +56,7 @@ describe('useEscapeKeyListener', () => {
 
     // act
     const wrapper = createComponent();
-    wrapper.destroy();
+    wrapper.unmount();
     await nextTick();
 
     // assert

tests/unit/presentation/components/Shared/Modal/Hooks/UseLockBodyBackgroundScroll.spec.ts

@@ -79,7 +79,7 @@ describe('useLockBodyBackgroundScroll', () => {
 
       // act
       const { component } = createComponent(true);
-      component.destroy();
+      component.unmount();
       await nextTick();
 
       // assert
@@ -92,7 +92,7 @@ describe('useLockBodyBackgroundScroll', () => {
       const { component } = createComponent(true);
 
       // act
-      component.destroy();
+      component.unmount();
       await nextTick();
 
       // assert

tests/unit/presentation/components/Shared/Modal/ModalContainer.spec.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest';
 import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import ModalContainer from '@/presentation/components/Shared/Modal/ModalContainer.vue';
 
 const DOM_MODAL_CONTAINER_SELECTOR = '.modal-container';
@@ -32,18 +33,27 @@ describe('ModalContainer.vue', () => {
   });
 
   describe('modal open/close', () => {
-    it('opens when model prop changes from false to true', async () => {
+    it('renders the model when prop changes from false to true', async () => {
       // arrange
       const wrapper = mountComponent({ modelValue: false });
 
       // act
-      await wrapper.setProps({ value: true });
+      await wrapper.setProps({ modelValue: true });
 
-      // assert after updating props
+      // assert
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      expect(wrapper.vm.isRendered).to.equal(true);
-      expect((wrapper.vm as any).isRendered).to.equal(true);
+    });
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
-      expect((wrapper.vm as any).isOpen).to.equal(true);
+    it('opens the model when prop changes from false to true', async () => {
+      // arrange
+      const wrapper = mountComponent({ modelValue: false });
+
+      // act
+      await wrapper.setProps({ modelValue: true });
+      await nextTick();
+
+      // assert
+      expect(wrapper.vm.isOpen).to.equal(true);
     });
 
     it('closes when model prop changes from true to false', async () => {
@@ -51,11 +61,10 @@ describe('ModalContainer.vue', () => {
       const wrapper = mountComponent({ modelValue: true });
 
       // act
-      await wrapper.setProps({ value: false });
+      await wrapper.setProps({ modelValue: false });
 
-      // assert after updating props
+      // assert
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      expect(wrapper.vm.isOpen).to.equal(false);
-      expect((wrapper.vm as any).isOpen).to.equal(false);
       // isRendered will not be true directly due to transition
     });
 
@@ -70,7 +79,7 @@ describe('ModalContainer.vue', () => {
       await wrapper.vm.$nextTick();
 
       // assert
-      expect(wrapper.emitted().input[0]).to.deep.equal([false]);
+      expect(wrapper.emitted('update:modelValue')).to.deep.equal([[false]]);
       restore();
     });
 
@@ -86,7 +95,7 @@ describe('ModalContainer.vue', () => {
       await wrapper.vm.$nextTick();
 
       // assert
-      expect(wrapper.emitted().input[0]).to.deep.equal([false]);
+      expect(wrapper.emitted('update:modelValue')).to.deep.equal([[false]]);
     });
   });
 
@@ -118,7 +127,7 @@ describe('ModalContainer.vue', () => {
       await wrapper.vm.$nextTick();
 
       // assert
-      expect(wrapper.emitted().input).to.equal(undefined);
+      expect(wrapper.emitted('update:modelValue')).to.equal(undefined);
     });
 
     it('closes on overlay click if prop is true', async () => {
@@ -131,7 +140,7 @@ describe('ModalContainer.vue', () => {
       await wrapper.vm.$nextTick();
 
       // assert
-      expect(wrapper.emitted().input[0]).to.deep.equal([false]);
+      expect(wrapper.emitted('update:modelValue')).to.deep.equal([[false]]);
     });
   });
 });
@@ -142,14 +151,15 @@ function mountComponent(options: {
   readonly slotHtml?: string,
   readonly attachToDocument?: boolean,
 }) {
-  return shallowMount(ModalContainer as unknown, {
+  return shallowMount(ModalContainer, {
-    propsData: {
+    props: {
-      value: options.modelValue,
+      modelValue: options.modelValue,
       ...(options.closeOnOutsideClick !== undefined ? {
         closeOnOutsideClick: options.closeOnOutsideClick,
       } : {}),
     },
     slots: options.slotHtml !== undefined ? { default: options.slotHtml } : undefined,
+    global: {
       stubs: {
         [COMPONENT_MODAL_OVERLAY_NAME]: {
           name: COMPONENT_MODAL_OVERLAY_NAME,
@@ -160,6 +170,7 @@ function mountComponent(options: {
           template: '<slot />',
         },
       },
+    },
   });
 }
 

tests/unit/presentation/components/Shared/Modal/ModalContent.spec.ts

@@ -96,8 +96,8 @@ function mountComponent(options?: {
   readonly showProperty?: boolean,
   readonly slotHtml?: string,
 }) {
-  return shallowMount(ModalContent as unknown, {
+  return shallowMount(ModalContent, {
-    propsData: options?.showProperty !== undefined ? { show: options?.showProperty } : undefined,
+    props: options?.showProperty !== undefined ? { show: options?.showProperty } : undefined,
     slots: options?.slotHtml !== undefined ? { default: options?.slotHtml } : undefined,
   });
 }

tests/unit/presentation/components/Shared/Modal/ModalDialog.spec.ts

@@ -23,7 +23,7 @@ describe('ModalDialog.vue', () => {
 
       // assert
       const modalContainerWrapper = wrapper.findComponent(ModalContainer);
-      expect(modalContainerWrapper.props('value')).to.equal(true);
+      expect(modalContainerWrapper.props('modelValue')).to.equal(true);
     });
     it('given false', () => {
       // arrange & act
@@ -31,7 +31,7 @@ describe('ModalDialog.vue', () => {
 
       // assert
       const modalContainerWrapper = wrapper.findComponent(ModalContainer);
-      expect(modalContainerWrapper.props('value')).to.equal(false);
+      expect(modalContainerWrapper.props('modelValue')).to.equal(false);
     });
   });
 
@@ -57,7 +57,7 @@ describe('ModalDialog.vue', () => {
       await wrapper.vm.$nextTick();
 
       // assert
-      expect(wrapper.emitted().input[0]).to.deep.equal([false]);
+      expect(wrapper.emitted('update:modelValue')).to.deep.equal([[false]]);
     });
   });
 });
@@ -68,15 +68,17 @@ function mountComponent(options?: {
   readonly deepMount?: boolean,
 }) {
   const mountFunction = options?.deepMount === true ? mount : shallowMount;
-  const wrapper = mountFunction(ModalDialog as unknown, {
+  const wrapper = mountFunction(ModalDialog, {
-    propsData: options?.modelValue !== undefined ? { value: options?.modelValue } : undefined,
+    props: options?.modelValue !== undefined ? { modelValue: options?.modelValue } : undefined,
     slots: options?.slotHtml !== undefined ? { default: options?.slotHtml } : undefined,
+    global: {
       stubs: options?.deepMount === true ? undefined : {
         [MODAL_CONTAINER_COMPONENT_NAME]: {
           name: MODAL_CONTAINER_COMPONENT_NAME,
           template: '<slot />',
         },
       },
+    },
   });
   return wrapper;
 }

tests/unit/presentation/components/Shared/Modal/ModalOverlay.spec.ts

@@ -99,7 +99,7 @@ describe('ModalOverlay.vue', () => {
 });
 
 function mountComponent(options?: { readonly showProperty?: boolean }) {
-  return shallowMount(ModalOverlay as unknown, {
+  return shallowMount(ModalOverlay, {
-    propsData: options?.showProperty !== undefined ? { show: options?.showProperty } : undefined,
+    props: options?.showProperty !== undefined ? { show: options?.showProperty } : undefined,
   });
 }

tests/unit/shared/Assertions/ExpectThrowsAsync.ts

@@ -16,3 +16,15 @@ export async function expectThrowsAsync(
     expect(error.message).to.equal(errorMessage);
   }
 }
+
+export async function expectDoesNotThrowAsync(
+  method: () => Promise<unknown>,
+) {
+  let error: Error | undefined;
+  try {
+    await method();
+  } catch (err) {
+    error = err;
+  }
+  expect(error).toBeUndefined();
+}

tests/unit/shared/Stubs/BootstrapperStub.ts

@@ -0,0 +1,14 @@
+import { App } from 'vue';
+import { Bootstrapper } from '@/presentation/bootstrapping/Bootstrapper';
+import { StubWithObservableMethodCalls } from './StubWithObservableMethodCalls';
+
+export class BootstrapperStub
+  extends StubWithObservableMethodCalls<Bootstrapper>
+  implements Bootstrapper {
+  async bootstrap(app: App): Promise<void> {
+    this.registerMethodCall({
+      methodName: 'bootstrap',
+      args: [app],
+    });
+  }
+}

vite.config.ts

@@ -1,8 +1,8 @@
 /// <reference types="vitest" />
 import { resolve } from 'path';
 import { defineConfig, UserConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
 import legacy from '@vitejs/plugin-legacy';
-import vue from '@vitejs/plugin-vue2';
 import ViteYaml from '@modyfi/vite-plugin-yaml';
 import distDirs from './dist-dirs.json' assert { type: 'json' };
 import { getAliasesFromTsConfig, getClientEnvironmentVariables, getSelfDirectoryAbsolutePath } from './vite-config-helper';