@3cr/viewer-browser 0.0.248 → 0.0.293

package/test/fakers/data-overlay-data.faker.ts

@@ -1,23 +1,26 @@
-import { DataOverlayData, DataOverlayDataRaw } from '@/types/data-overlay-data';
-import { DataOverlayAnnotation } from '@/types/data-overlay-annotation';
 import { faker } from '@faker-js/faker';
 import { DataOverlayAnnotationFaker } from '@test/fakers/data-overlay-annotation.faker';
-import { DataOverlayAngle } from '@/types/data-overlay-angle';
 import { DataOverlayAngleFaker } from '@test/fakers/data-overlay-angle.faker';
-import { DataOverlayLength } from '@/types/data-overlay-length';
 import { DataOverlayLengthFaker } from '@test/fakers/data-overlay-length.faker';
-import { DataOverlayPolygon } from '@/types/data-overlay-polygon';
 import { DataOverlayPolygonFaker } from '@test/fakers/data-overlay-polygon.faker';
-import { DataOverlayType, Interactiontype } from '@3cr/types-ts';
-import { DataOverlayInteraction } from '@/types/data-overlay-interaction';
+import { DataOverlayType, InteractionType } from '@3cr/types-ts';
 import { DataOverlayInteractionFaker } from '@test/fakers/data-overlay-interaction.faker';
+import {
+  DataOverlayData,
+  DataOverlayAnnotation,
+  DataOverlayInteraction,
+  DataOverlayDataRaw,
+  DataOverlayLength,
+  DataOverlayPolygon,
+  DataOverlayAngle
+} from '@3cr/viewer-types-ts';
 
 export class DataOverlayDataFaker {
   static annotation(): DataOverlayData<DataOverlayAnnotation> {
     return DataOverlayDataFaker.random(DataOverlayAnnotationFaker.random(), DataOverlayType.Annotation);
   }
 
-  static annotationEvent(type: Interactiontype): DataOverlayData<DataOverlayInteraction<DataOverlayAnnotation>> {
+  static annotationEvent(type: InteractionType): DataOverlayData<DataOverlayInteraction<DataOverlayAnnotation>> {
     return DataOverlayDataFaker.random(DataOverlayInteractionFaker.annotation(type), DataOverlayType.Annotation);
   }
 
@@ -25,7 +28,7 @@ export class DataOverlayDataFaker {
     return DataOverlayDataFaker.randomRaw(DataOverlayAnnotationFaker.randomRaw(), DataOverlayType.Annotation);
   }
 
-  static annotationEventRaw(type: Interactiontype): DataOverlayDataRaw {
+  static annotationEventRaw(type: InteractionType): DataOverlayDataRaw {
     return DataOverlayDataFaker.randomRaw(DataOverlayInteractionFaker.annotationRaw(type), DataOverlayType.Annotation);
   }
 
@@ -33,7 +36,7 @@ export class DataOverlayDataFaker {
     return DataOverlayDataFaker.random(DataOverlayLengthFaker.random(), DataOverlayType.Length);
   }
 
-  static lengthEvent(type: Interactiontype): DataOverlayData<DataOverlayInteraction<DataOverlayLength>> {
+  static lengthEvent(type: InteractionType): DataOverlayData<DataOverlayInteraction<DataOverlayLength>> {
     return DataOverlayDataFaker.random(DataOverlayInteractionFaker.length(type), DataOverlayType.Length);
   }
 
@@ -41,7 +44,7 @@ export class DataOverlayDataFaker {
     return DataOverlayDataFaker.randomRaw(DataOverlayLengthFaker.randomRaw(), DataOverlayType.Length);
   }
 
-  static lengthEventRaw(type: Interactiontype): DataOverlayDataRaw {
+  static lengthEventRaw(type: InteractionType): DataOverlayDataRaw {
     return DataOverlayDataFaker.randomRaw(DataOverlayInteractionFaker.lengthRaw(type), DataOverlayType.Length);
   }
 
@@ -49,7 +52,7 @@ export class DataOverlayDataFaker {
     return DataOverlayDataFaker.random(DataOverlayPolygonFaker.random(), DataOverlayType.Polygon);
   }
 
-  static polygonEvent(type: Interactiontype): DataOverlayData<DataOverlayInteraction<DataOverlayPolygon>> {
+  static polygonEvent(type: InteractionType): DataOverlayData<DataOverlayInteraction<DataOverlayPolygon>> {
     return DataOverlayDataFaker.random(DataOverlayInteractionFaker.polygon(type), DataOverlayType.Polygon);
   }
 
@@ -57,7 +60,7 @@ export class DataOverlayDataFaker {
     return DataOverlayDataFaker.randomRaw(DataOverlayPolygonFaker.randomRaw(), DataOverlayType.Polygon);
   }
 
-  static polygonEventRaw(type: Interactiontype): DataOverlayDataRaw {
+  static polygonEventRaw(type: InteractionType): DataOverlayDataRaw {
     return DataOverlayDataFaker.randomRaw(DataOverlayInteractionFaker.polygonRaw(type), DataOverlayType.Polygon);
   }
 
@@ -65,7 +68,7 @@ export class DataOverlayDataFaker {
     return DataOverlayDataFaker.random(DataOverlayAngleFaker.random(), DataOverlayType.Angle);
   }
 
-  static angleEvent(type: Interactiontype): DataOverlayData<DataOverlayInteraction<DataOverlayAngle>> {
+  static angleEvent(type: InteractionType): DataOverlayData<DataOverlayInteraction<DataOverlayAngle>> {
     return DataOverlayDataFaker.random(DataOverlayInteractionFaker.angle(type), DataOverlayType.Angle);
   }
 
@@ -73,7 +76,7 @@ export class DataOverlayDataFaker {
     return DataOverlayDataFaker.randomRaw(DataOverlayAngleFaker.randomRaw(), DataOverlayType.Angle);
   }
 
-  static angleEventRaw(type: Interactiontype): DataOverlayDataRaw {
+  static angleEventRaw(type: InteractionType): DataOverlayDataRaw {
     return DataOverlayDataFaker.randomRaw(DataOverlayInteractionFaker.angleRaw(type), DataOverlayType.Angle);
   }
 

package/test/fakers/data-overlay-interaction.faker.ts

@@ -1,50 +1,58 @@
-import { DataOverlayInteraction, DataOverlayInteractionRaw } from '@/types/data-overlay-interaction';
-import { DataOverlayAnnotation, DataOverlayAnnotationRaw } from '@/types/data-overlay-annotation';
 import { DataOverlayAnnotationFaker } from '@test/fakers/data-overlay-annotation.faker';
-import { DataOverlayLength, DataOverlayLengthRaw } from '@/types/data-overlay-length';
 import { DataOverlayLengthFaker } from '@test/fakers/data-overlay-length.faker';
-import { DataOverlayPolygon, DataOverlayPolygonRaw } from '@/types/data-overlay-polygon';
 import { DataOverlayPolygonFaker } from '@test/fakers/data-overlay-polygon.faker';
-import { DataOverlayAngle, DataOverlayAngleRaw } from '@/types/data-overlay-angle';
 import { DataOverlayAngleFaker } from '@test/fakers/data-overlay-angle.faker';
-import { DataOverlay, DataOverlayRaw } from '@/types/data-overlay';
 import { faker } from '@faker-js/faker';
-import { Interactiontype } from '@3cr/types-ts';
+import { InteractionType } from '@3cr/types-ts';
+import {
+  DataOverlay,
+  DataOverlayAngle,
+  DataOverlayAngleRaw,
+  DataOverlayAnnotation,
+  DataOverlayAnnotationRaw,
+  DataOverlayInteraction,
+  DataOverlayInteractionRaw,
+  DataOverlayLength,
+  DataOverlayLengthRaw,
+  DataOverlayPolygon,
+  DataOverlayPolygonRaw,
+  DataOverlayRaw
+} from '@3cr/viewer-types-ts';
 
 export class DataOverlayInteractionFaker {
-  static annotation(interaction: Interactiontype): DataOverlayInteraction<DataOverlayAnnotation> {
+  static annotation(interaction: InteractionType): DataOverlayInteraction<DataOverlayAnnotation> {
     return DataOverlayInteractionFaker.random(DataOverlayAnnotationFaker.random(), interaction);
   }
 
-  static annotationRaw(interaction: Interactiontype): DataOverlayInteractionRaw<DataOverlayAnnotationRaw> {
+  static annotationRaw(interaction: InteractionType): DataOverlayInteractionRaw<DataOverlayAnnotationRaw> {
     return DataOverlayInteractionFaker.randomRaw(DataOverlayAnnotationFaker.randomRaw(), interaction);
   }
 
-  static length(interaction: Interactiontype): DataOverlayInteraction<DataOverlayLength> {
+  static length(interaction: InteractionType): DataOverlayInteraction<DataOverlayLength> {
     return DataOverlayInteractionFaker.random(DataOverlayLengthFaker.random(), interaction);
   }
 
-  static lengthRaw(interaction: Interactiontype): DataOverlayInteractionRaw<DataOverlayLengthRaw> {
+  static lengthRaw(interaction: InteractionType): DataOverlayInteractionRaw<DataOverlayLengthRaw> {
     return DataOverlayInteractionFaker.randomRaw(DataOverlayLengthFaker.randomRaw(), interaction);
   }
 
-  static polygon(interaction: Interactiontype): DataOverlayInteraction<DataOverlayPolygon> {
+  static polygon(interaction: InteractionType): DataOverlayInteraction<DataOverlayPolygon> {
     return DataOverlayInteractionFaker.random(DataOverlayPolygonFaker.random(), interaction);
   }
 
-  static polygonRaw(interaction: Interactiontype): DataOverlayInteractionRaw<DataOverlayPolygonRaw> {
+  static polygonRaw(interaction: InteractionType): DataOverlayInteractionRaw<DataOverlayPolygonRaw> {
     return DataOverlayInteractionFaker.randomRaw(DataOverlayPolygonFaker.randomRaw(), interaction);
   }
 
-  static angle(interaction: Interactiontype): DataOverlayInteraction<DataOverlayAngle> {
+  static angle(interaction: InteractionType): DataOverlayInteraction<DataOverlayAngle> {
     return DataOverlayInteractionFaker.random(DataOverlayAngleFaker.random(), interaction);
   }
 
-  static angleRaw(interaction: Interactiontype): DataOverlayInteractionRaw<DataOverlayAngleRaw> {
+  static angleRaw(interaction: InteractionType): DataOverlayInteractionRaw<DataOverlayAngleRaw> {
     return DataOverlayInteractionFaker.randomRaw(DataOverlayAngleFaker.randomRaw(), interaction);
   }
 
-  private static random<T extends DataOverlay>(data: T, type: Interactiontype): DataOverlayInteraction<T> {
+  private static random<T extends DataOverlay>(data: T, type: InteractionType): DataOverlayInteraction<T> {
     return {
       Version: faker.system.semver(),
       DataOverlay: data,
@@ -52,7 +60,7 @@ export class DataOverlayInteractionFaker {
     };
   }
 
-  private static randomRaw<T extends DataOverlayRaw>(data: T, type: Interactiontype): DataOverlayInteractionRaw<T> {
+  private static randomRaw<T extends DataOverlayRaw>(data: T, type: InteractionType): DataOverlayInteractionRaw<T> {
     return {
       Version: faker.system.semver(),
       DataOverlay: data,

package/test/fakers/data-overlay-length.faker.ts

@@ -1,8 +1,8 @@
-import { DataOverlayLength, DataOverlayLengthRaw } from '@/types/data-overlay-length';
 import { faker } from '@faker-js/faker';
 import { CallToActionFaker } from '@test/fakers/call-to-action.faker';
 import { Vector3Faker } from '@test/fakers/vector3.faker';
 import { InvertTransformFaker } from '@test/fakers/invert-transform.faker';
+import { DataOverlayLength, DataOverlayLengthRaw } from '@3cr/viewer-types-ts';
 
 export class DataOverlayLengthFaker {
   static random(): DataOverlayLength {

package/test/fakers/data-overlay-mcad.faker.ts

@@ -1,10 +1,10 @@
-import { DataOverlayMcad, DataOverlayMcadRaw } from '@/types/data-overlay-mcad';
 import { faker } from '@faker-js/faker';
 import { CallToActionFaker } from '@test/fakers/call-to-action.faker';
 import { Vector3Faker } from '@test/fakers/vector3.faker';
 import { InvertTransformFaker } from '@test/fakers/invert-transform.faker';
 import { ColourFaker } from '@test/fakers/colour.faker';
 import { OrientationFaker } from '@test/fakers/orientation.faker';
+import { DataOverlayMcad, DataOverlayMcadRaw } from '@3cr/viewer-types-ts';
 
 export class DataOverlayMcadFaker {
   static random(): DataOverlayMcad {
@@ -22,9 +22,10 @@ export class DataOverlayMcadFaker {
   }
 
   private static randomBase() {
+    const keyId = faker.string.uuid();
     return {
       Version: faker.system.semver(),
-      Id: faker.string.uuid(),
+      Id: keyId,
       Title: faker.lorem.word(),
       Description: faker.lorem.text(),
       Position: Vector3Faker.random(),
@@ -33,7 +34,7 @@ export class DataOverlayMcadFaker {
       Inverted: InvertTransformFaker.random(),
       Colour: ColourFaker.random(),
       Visibility: faker.datatype.boolean(),
-      Key: faker.string.uuid(),
+      Key: keyId,
       Orientation: OrientationFaker.random()
     };
   }

package/test/fakers/data-overlay-polygon.faker.ts

@@ -1,8 +1,8 @@
-import { DataOverlayPolygon, DataOverlayPolygonRaw } from '@/types/data-overlay-polygon';
 import { faker } from '@faker-js/faker';
 import { Vector3Faker } from '@test/fakers/vector3.faker';
 import { InvertTransformFaker } from '@test/fakers/invert-transform.faker';
 import { CallToActionFaker } from '@test/fakers/call-to-action.faker';
+import { DataOverlayPolygon, DataOverlayPolygonRaw } from '@3cr/viewer-types-ts';
 
 export class DataOverlayPolygonFaker {
   static random(): DataOverlayPolygon {

package/test/fakers/feature.faker.ts

@@ -0,0 +1,13 @@
+import { Feature } from '@/types/feature';
+import { faker } from '@faker-js/faker';
+
+export class FeatureFaker {
+  static random(): Feature {
+    return {
+      title: faker.lorem.words(),
+      version: faker.system.semver(),
+      createdAt: faker.date.past(),
+      html: faker.lorem.paragraph()
+    };
+  }
+}

package/test/fakers/file.faker.ts

@@ -0,0 +1,11 @@
+import { faker } from '@faker-js/faker';
+
+export class FileFaker {
+  static random(): File {
+    return {
+      name: faker.system.fileName(),
+      lastModified: faker.date.past().getTime(),
+      size: faker.number.int({ min: 1024, max: 1024 * 8 })
+    } as File;
+  }
+}

package/test/fakers/gpt-question.faker.ts

@@ -1,5 +1,5 @@
 import { faker } from '@faker-js/faker';
-import { GptQuestion } from '@/types/gpt-question';
+import { GptQuestion } from '@3cr/viewer-types-ts';
 
 export class GptQuestionFaker {
   static random(): GptQuestion {

package/test/fakers/gpt-response.faker.ts

@@ -1,6 +1,6 @@
 import { faker } from '@faker-js/faker';
 import { GptQuestionFaker } from '@test/fakers/gpt-question.faker';
-import { GptResponsePayload } from '@/types/gpt-response-payload';
+import { GptResponsePayload } from '@3cr/viewer-types-ts';
 
 export class GptResponseFaker {
   static random(): GptResponsePayload {

package/test/fakers/mcad-object-interaction.faker.ts

@@ -1,10 +1,10 @@
 import { faker } from '@faker-js/faker';
-import { McadObjectInteraction, McadObjectInteractionRaw } from '@/types/mcad-object-interaction';
 import { DataOverlayMcadFaker } from '@test/fakers/data-overlay-mcad.faker';
-import { Interactiontype } from '@3cr/types-ts';
+import { InteractionType } from '@3cr/types-ts';
+import { McadObjectInteraction, McadObjectInteractionRaw } from '@3cr/viewer-types-ts';
 
 export class McadObjectInteractionFaker {
-  static random(interaction: Interactiontype): McadObjectInteraction {
+  static random(interaction: InteractionType): McadObjectInteraction {
     return {
       Version: faker.system.semver(),
       Mcad: DataOverlayMcadFaker.random(),
@@ -12,7 +12,7 @@ export class McadObjectInteractionFaker {
     };
   }
 
-  static randomRaw(interaction: Interactiontype): McadObjectInteractionRaw {
+  static randomRaw(interaction: InteractionType): McadObjectInteractionRaw {
     return {
       Version: faker.system.semver(),
       Mcad: DataOverlayMcadFaker.randomRaw(),

package/test/fakers/orientation.faker.ts

@@ -7,7 +7,7 @@ export class OrientationFaker {
   static random(): OrientationSetting {
     return {
       Version: faker.system.semver(),
-      Modifiers: faker.helpers.enumValue(Orientation),
+      Orientation: faker.helpers.enumValue(Orientation),
       ReferencePoint: Vector3Faker.random(),
       Position: Vector3Faker.random(),
       Rotation: Vector3Faker.random(),

package/test/fakers/segment-angle.faker.ts

@@ -1,5 +1,5 @@
-import { SegmentAngle } from '@/types/segment-angle';
 import { faker } from '@faker-js/faker';
+import { SegmentAngle } from '@3cr/viewer-types-ts';
 
 export class SegmentAngleFaker {
   static random(): SegmentAngle {

package/test/fakers/upload.faker.ts

@@ -0,0 +1,14 @@
+import { faker } from '@faker-js/faker';
+import { Upload } from '@3cr/viewer-types-ts';
+
+export class UploadFaker {
+  static random(): Upload {
+    return {
+      id: faker.string.uuid(),
+      title: faker.lorem.words(),
+      subtitle: faker.lorem.words(),
+      status: faker.helpers.arrayElement(['uploading', 'completed', 'failed', 'cancelled']),
+      progress: faker.number.float()
+    };
+  }
+}

package/test/getAnimationFrame.ts

@@ -0,0 +1,3 @@
+export async function getAnimationFrame(): Promise<void> {
+  return await new Promise((res) => requestAnimationFrame(() => res()));
+}

package/test/plugins/findByTestId.ts

@@ -1,20 +1,26 @@
-import { config, DOMWrapper, VueWrapper } from '@vue/test-utils';
-import { ComponentOptions } from 'vue';
+import { config, DOMWrapper } from '@vue/test-utils';
+import { ComponentPublicInstance } from 'vue';
+import WrapperLike from '@vue/test-utils/dist/interfaces/wrapperLike';
 
 declare module '@vue/test-utils' {
-  interface VueWrapper {
+  interface VueWrapper<VM, T extends ComponentPublicInstance> {
     findByTestId(selector: string): DOMWrapper<HTMLElement>;
-    findComponentByTestId<T extends ComponentOptions>(selector: string): VueWrapper<T>;
+    findComponentByTestId<U>(selector: string): VueWrapper<U>;
+  }
+
+  interface DOMWrapper<NodeType extends Node> {
+    findByTestId(selector: string): DOMWrapper<HTMLElement>;
+    findComponentByTestId<U>(selector: string): VueWrapper<U>;
   }
 }
 
-const findByTestIdPlugin = (wrapper: VueWrapper<unknown>) => {
+const findByTestIdPlugin = (wrapper: WrapperLike) => {
   function findByTestId(selector: string): DOMWrapper<HTMLElement> {
     const testId = `[data-testid="${selector}"]`;
     return wrapper.find(testId);
   }
 
-  function findComponentByTestId<T extends ComponentOptions>(selector: string) {
+  function findComponentByTestId<T extends ComponentPublicInstance>(selector: string) {
     const testId = `[data-testid="${selector}"]`;
     return wrapper.findComponent<T>(testId);
   }
@@ -23,3 +29,4 @@ const findByTestIdPlugin = (wrapper: VueWrapper<unknown>) => {
 };
 
 config.plugins.VueWrapper.install(findByTestIdPlugin);
+config.plugins.DOMWrapper.install(findByTestIdPlugin);

package/test/plugins/pinia.ts

@@ -0,0 +1,20 @@
+import { config, mount } from '@vue/test-utils';
+import { createTestingPinia } from '@pinia/testing';
+import { createPinia, setActivePinia } from 'pinia';
+import { defineComponent } from 'vue';
+
+config.global.plugins.push(createTestingPinia());
+
+const Empty = defineComponent({
+  template: `
+    <div >
+    </div>
+  `
+});
+export function mountAndFakePiniaWrapper() {
+  const wrapper = mount(Empty, {
+    plugins: [createTestingPinia({ createSpy: vi.fn })]
+  });
+  setActivePinia(createPinia());
+  return wrapper;
+}

package/test/plugins/vitest.d.ts

@@ -0,0 +1,8 @@
+interface CustomMatchers<R = unknown> {
+  toBeTypeOrNull: (constructor: unknown) => R;
+}
+
+declare module 'vitest' {
+  interface Assertion<T = any> extends CustomMatchers<T> {}
+  interface AsymmetricMatchersContaining extends CustomMatchers {}
+}

package/test/plugins/vue-i18n.ts

@@ -0,0 +1,22 @@
+import { config } from '@vue/test-utils';
+import { createI18n } from 'vue-i18n';
+import { ref } from 'vue';
+import { MockImportOriginal } from '@test/MockImportOriginal';
+
+vi.mock('vue-i18n', async (importOriginal: MockImportOriginal<typeof import('vue-i18n')>) => {
+  const module = await importOriginal();
+  return {
+    ...module,
+    useI18n: vi.fn().mockImplementation(() => {
+      return {
+        availableLocales: [],
+        locale: ref<string>(''),
+        setLocaleMessage: vi.fn(),
+        t: vi.fn((key: string) => key),
+        tm: vi.fn((key: string) => [key])
+      };
+    })
+  };
+});
+
+config.global.plugins.push(createI18n({ legacy: false }));

package/test/plugins/vuetify.ts

@@ -3,6 +3,16 @@ import { createVuetify } from 'vuetify';
 import * as components from 'vuetify/components';
 import * as directives from 'vuetify/directives';
 import { VTreeview, VTreeviewItem } from 'vuetify/labs/components';
+import { ref } from 'vue';
+import { MockImportOriginal } from '@test/MockImportOriginal';
+
+vi.mock('vuetify', async (importOriginal: MockImportOriginal<typeof import('vuetify')>) => ({
+  ...(await importOriginal()),
+  useTheme: vi.fn(() => ({
+    global: { name: ref('light') },
+    current: ref({ dark: false })
+  }))
+}));
 
 config.global.plugins.push(
   createVuetify({

package/test/setup.ts

@@ -1,12 +1,33 @@
 import '@test/plugins/findByTestId';
+import '@test/plugins/pinia';
+import '@test/plugins/vue-i18n';
 import '@test/plugins/vuetify';
+import { CrowdinWrapper } from '@3cr/translations-ts/src/crowdin';
+import { MockImportOriginal } from '@test/MockImportOriginal';
 
 global.ResizeObserver = require('resize-observer-polyfill');
 
-vi.mock('@3cr/sdk-browser', async (importOriginal) => {
-  const mod = await importOriginal<typeof import('@3cr/sdk-browser')>();
+CrowdinWrapper.Instantiate().i18n = { t: vi.fn().mockImplementation((x: any) => x) } as any;
+window.mobileCheck = () => false;
+vi.stubGlobal(
+  'matchMedia',
+  vi.fn().mockImplementation(() => {
+    return {
+      matches: true,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn()
+    };
+  })
+);
+
+vi.stubGlobal('localStorage', {
+  getItem: vi.fn(),
+  setItem: vi.fn()
+});
+
+vi.mock('@3cr/sdk-browser', async (importOriginal: MockImportOriginal<typeof import('@3cr/sdk-browser')>) => {
   return {
-    ...mod,
+    ...(await importOriginal()),
     registerVersion: vi.fn(),
     createInstance: vi.fn(),
     executePayload: vi.fn(),
@@ -14,12 +35,16 @@ vi.mock('@3cr/sdk-browser', async (importOriginal) => {
   };
 });
 
-vi.mock('@kyvg/vue3-notification', async (importOriginal) => {
-  const mod = await importOriginal<typeof import('@kyvg/vue3-notification')>();
-  return {
-    ...mod,
-    useNotification: vi.fn().mockReturnValue({
-      notify: vi.fn()
-    })
-  };
-});
+vi.mock(
+  '@kyvg/vue3-notification',
+  async (importOriginal: MockImportOriginal<typeof import('@kyvg/vue3-notification')>) => {
+    return {
+      ...(await importOriginal()),
+      useNotification: vi.fn().mockReturnValue({
+        notify: vi.fn()
+      })
+    };
+  }
+);
+//Note: Silences Vue warnings about injection in Unit Tests
+vi.spyOn(console, 'warn').mockImplementation(() => undefined);

package/tsconfig.json

@@ -18,7 +18,7 @@
     "noUnusedLocals": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
-    "isolatedModules": false,
+    "isolatedModules": true,
     "skipLibCheck": true
   },
   "include": ["**/*.ts", "**/*.vue"],

package/vite.config.mts

@@ -1,30 +1,59 @@
-import Components from 'unplugin-vue-components/vite';
 import Vue from '@vitejs/plugin-vue';
-import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
-import ViteFonts from 'unplugin-fonts/vite';
+import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
+import Unfonts from 'unplugin-fonts/vite';
 import { defineConfig } from 'vite';
 import { fileURLToPath, URL } from 'node:url';
 import { injectedStyleId } from './src/config';
 import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
+import Components from 'unplugin-vue-components/vite';
+import NotificationsResolver from '@kyvg/vue3-notification/auto-import-resolver';
+import dns from 'node:dns';
+
+dns.setDefaultResultOrder('verbatim');
 
 export default defineConfig({
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+        silenceDeprecations: ['legacy-js-api']
+      },
+      sass: {
+        api: 'modern-compiler',
+        silenceDeprecations: ['legacy-js-api']
+      }
+    }
+  },
   plugins: [
+    Components({
+      resolvers: [NotificationsResolver('Alert')]
+    }),
     Vue({
-      template: { transformAssetUrls },
+      template: { transformAssetUrls }
+    }),
+    vuetify({
+      styles: {
+        configFile: 'src/assets/_settings.scss'
+      }
     }),
-    Vuetify(),
     Components(),
     cssInjectedByJsPlugin({
       styleId: injectedStyleId
     }),
-    ViteFonts({
+    Unfonts({
       google: {
-        families: [{
-          name: 'Roboto',
-          styles: 'wght@100;300;400;500;700;900',
-        }],
-      },
-    }),
+        families: [
+          {
+            name: 'Plus Jakarta Sans',
+            styles: 'ital,wght@0,200..800;1,200..800'
+          },
+          {
+            name: 'Material Symbols Outlined',
+            styles: 'opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200'
+          }
+        ]
+      }
+    })
   ],
   define: { 'process.env': {} },
   build: {
@@ -33,7 +62,7 @@ export default defineConfig({
       entry: 'src/main.ts',
       name: 'Viewer3CR',
       fileName: 'Viewer3CR',
-      formats: ['cjs', 'es', 'umd'],
+      formats: ['cjs', 'es', 'umd']
     },
     rollupOptions: {
       output: {
@@ -45,17 +74,18 @@ if (globalThis.Viewer3CR) {
   }
 }
 `
-      },
-    },
+      }
+    }
   },
   resolve: {
     alias: [
       { find: '@test', replacement: fileURLToPath(new URL('./test', import.meta.url)) },
       { find: '@', replacement: fileURLToPath(new URL('./src', import.meta.url)) }
     ],
-    extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue'],
+    extensions: ['.js', '.json', '.jsx', '.mjs', '.ts', '.tsx', '.vue']
   },
   server: {
-    port: 3000,
-  },
+    host: 'localhost',
+    port: 3000
+  }
 });