chore: switch to node's native path aliasing

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>

Author: ferferga

frontend/package.json

@@ -5,6 +5,9 @@
   "browserslist": [
     "defaults and supports es6-module"
   ],
+  "imports": {
+    "#/*": "./src/*"
+  },
   "scripts": {
     "analyze:bundle": "vite build --mode analyze:bundle",
     "analyze:cycles": "vite build --mode analyze:cycles",

frontend/scripts/paths.ts

@@ -1,9 +1,3 @@
 import { resolve } from 'node:path';
 
 export const localeFilesFolder = resolve('locales/**');
-export const srcRoot = `${resolve('src')}/`;
-export const entrypoints = {
-  index: resolve('index.html'),
-  main: `${srcRoot}/main.ts`,
-  splashscreen: `${srcRoot}/splashscreen.ts`
-};

frontend/src/components/Buttons/FilterButton.vue

@@ -172,8 +172,8 @@ import { type BaseItemDto, ItemFilter } from '@jellyfin/sdk/lib/generated-client
 import { getFilterApi } from '@jellyfin/sdk/lib/utils/api/filter-api';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { remote } from '@/plugins/remote';
-import { useSnackbar } from '@/composables/use-snackbar';
+import { remote } from '#/plugins/remote';
+import { useSnackbar } from '#/composables/use-snackbar';
 
 export type FeatureFilters =
   | 'HasSubtitles'

frontend/src/components/Buttons/LikeButton.vue

@@ -13,7 +13,7 @@ import { getUserLibraryApi } from '@jellyfin/sdk/lib/utils/api/user-library-api'
 import IMdiHeart from 'virtual:icons/mdi/heart';
 import IMdiHeartOutline from 'virtual:icons/mdi/heart-outline';
 import { computed, ref } from 'vue';
-import { useApi } from '@/composables/apis';
+import { useApi } from '#/composables/apis';
 
 const { size = 'small', item } = defineProps<{ item: BaseItemDto; size?: string }>();
 /**

frontend/src/components/Buttons/MarkPlayedButton.vue

@@ -13,8 +13,8 @@ import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import { getPlaystateApi } from '@jellyfin/sdk/lib/utils/api/playstate-api';
 import IMdiCheck from 'virtual:icons/mdi/check';
 import { computed, ref } from 'vue';
-import { canMarkWatched } from '@/utils/items';
-import { useApi } from '@/composables/apis';
+import { canMarkWatched } from '#/utils/items';
+import { useApi } from '#/composables/apis';
 
 const { item } = defineProps<{
   item: BaseItemDto;

frontend/src/components/Buttons/Playback/NextTrackButton.vue

@@ -11,5 +11,5 @@
 </template>
 
 <script setup lang="ts">
-import { playbackManager } from '@/store/playback-manager';
+import { playbackManager } from '#/store/playback-manager';
 </script>

frontend/src/components/Buttons/Playback/PlayButton.vue

@@ -42,9 +42,9 @@
 <script setup lang="ts">
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
 import { ref } from 'vue';
-import { playbackManager } from '@/store/playback-manager';
-import { canPlay, canResume } from '@/utils/items';
-import { ticksToMs } from '@/utils/time';
+import { playbackManager } from '#/store/playback-manager';
+import { canPlay, canResume } from '#/utils/items';
+import { ticksToMs } from '#/utils/time';
 
 const {
   item,

frontend/src/components/Buttons/Playback/PlayPauseButton.vue

@@ -15,7 +15,7 @@ import IMdiExclamation from 'virtual:icons/mdi/exclamation';
 import IMdiPauseCircleOutline from 'virtual:icons/mdi/pause-circle-outline';
 import IMdiPlayCircleOutline from 'virtual:icons/mdi/play-circle-outline';
 import { computed } from 'vue';
-import { PlaybackStatus, playbackManager } from '@/store/playback-manager';
+import { PlaybackStatus, playbackManager } from '#/store/playback-manager';
 
 const playPauseIcon = computed(() => {
   if (playbackManager.isPaused.value) {

frontend/src/components/Buttons/Playback/PlaybackSettingsButton.vue

@@ -22,8 +22,9 @@
             <VCol :cols="8">
               <VSelect
                 density="comfortable"
-                hide-details
-                disabled />
+
+                disabled
+                hide-details />
             </VCol>
           </VRow>
           <VRow align="center">
@@ -95,8 +96,8 @@
 import { computed, shallowRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { isObj, isStr, isUndef } from '@jellyfin-vue/shared/validation';
-import { playbackManager } from '@/store/playback-manager';
-import { playerElement } from '@/store/player-element';
+import { playbackManager } from '#/store/playback-manager';
+import { playerElement } from '#/store/player-element';
 
 const menuModel = defineModel<boolean>();
 const { t } = useI18n();

frontend/src/components/Buttons/Playback/PreviousTrackButton.vue

@@ -12,5 +12,5 @@
 
 <script setup lang="ts">
 import IMdiSkipPrevious from 'virtual:icons/mdi/skip-previous';
-import { playbackManager } from '@/store/playback-manager';
+import { playbackManager } from '#/store/playback-manager';
 </script>

frontend/src/components/Buttons/Playback/RepeatButton.vue

@@ -14,7 +14,7 @@
 import IMdiRepeat from 'virtual:icons/mdi/repeat';
 import IMdiRepeatOnce from 'virtual:icons/mdi/repeat-once';
 import { computed } from 'vue';
-import { RepeatMode, playbackManager } from '@/store/playback-manager';
+import { RepeatMode, playbackManager } from '#/store/playback-manager';
 
 const repeatIcon = computed(() =>
   playbackManager.repeatMode.value === RepeatMode.RepeatOne

frontend/src/components/Buttons/Playback/ShuffleButton.vue

@@ -11,5 +11,5 @@
 </template>
 
 <script setup lang="ts">
-import { playbackManager } from '@/store/playback-manager';
+import { playbackManager } from '#/store/playback-manager';
 </script>

frontend/src/components/Buttons/QueueButton.vue

@@ -75,8 +75,8 @@ import IMdiPlaylistMusic from 'virtual:icons/mdi/playlist-music';
 import IMdiShuffle from 'virtual:icons/mdi/shuffle';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { getTotalEndsAtTime } from '@/utils/time';
-import { InitMode, playbackManager } from '@/store/playback-manager';
+import { getTotalEndsAtTime } from '#/utils/time';
+import { InitMode, playbackManager } from '#/store/playback-manager';
 
 const { size = 40, closeOnClick = false } = defineProps<{
   size?: number;

frontend/src/components/Buttons/ScrollToTopButton.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import { windowScroll } from '@/store';
+import { windowScroll } from '#/store';
 
 const { y } = windowScroll;
 

frontend/src/components/Buttons/SubtitleSelectionButton.vue

@@ -41,8 +41,8 @@ import { SubtitleDeliveryMethod } from '@jellyfin/sdk/lib/generated-client';
 import IMdiCheck from 'virtual:icons/mdi/check';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { playbackManager } from '@/store/playback-manager';
-import { playerElement } from '@/store/player-element';
+import { playbackManager } from '#/store/playback-manager';
+import { playerElement } from '#/store/player-element';
 
 const menuModel = defineModel<boolean>();
 

frontend/src/components/Forms/AddServerForm.vue

@@ -47,8 +47,8 @@
 import { shallowRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { remote } from '@/plugins/remote';
-import { jsonConfig } from '@/utils/external-config';
+import { remote } from '#/plugins/remote';
+import { jsonConfig } from '#/utils/external-config';
 
 const router = useRouter();
 const i18n = useI18n();

frontend/src/components/Forms/LoginForm.vue

@@ -72,9 +72,9 @@ import IconEye from 'virtual:icons/mdi/eye';
 import IconEyeOff from 'virtual:icons/mdi/eye-off';
 import { ref, shallowRef } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { fetchIndexPage } from '@/utils/items';
-import { remote } from '@/plugins/remote';
-import { jsonConfig } from '@/utils/external-config';
+import { fetchIndexPage } from '#/utils/items';
+import { remote } from '#/plugins/remote';
+import { jsonConfig } from '#/utils/external-config';
 
 const { user, disabled } = defineProps<{ user?: UserDto; disabled?: boolean }>();
 

frontend/src/components/Item/Card/GenericItemCard.vue

@@ -49,9 +49,8 @@
 <script setup lang="ts">
 import { useAttrs, computed } from 'vue';
 import { isNil } from '@jellyfin-vue/shared/validation';
-import { hasFinePointer } from '@/store';
-import type { CardShapes } from '@/utils/items';
-import JOverlay from '@/components/lib/JOverlay.vue';
+import { hasFinePointer } from '#/store';
+import type { CardShapes } from '#/utils/items';
 
 const { shape, progress, overlay, forceOverlay, to, margin } = defineProps<{
   shape: CardShapes;

frontend/src/components/Item/Card/ItemCard.vue

@@ -83,8 +83,8 @@ import {
   canPlay,
   getItemDetailsLink,
   getShapeFromItemType
-} from '@/utils/items';
-import { taskManager } from '@/store/task-manager';
+} from '#/utils/items';
+import { taskManager } from '#/store/task-manager';
 
 const { item, shape, overlay, text, margin } = defineProps<{
   item: BaseItemDto;

frontend/src/components/Item/Card/ServerCard.vue

@@ -43,8 +43,8 @@
 <script setup lang="ts">
 import { shallowRef } from 'vue';
 import { useRouter } from 'vue-router';
-import { remote } from '@/plugins/remote';
-import type { ServerInfo } from '@/plugins/remote/auth';
+import { remote } from '#/plugins/remote';
+import type { ServerInfo } from '#/plugins/remote/auth';
 
 const { serverInfo } = defineProps<{ serverInfo: ServerInfo }>();
 

frontend/src/components/Item/Identify/IdentifyDialog.vue

@@ -21,7 +21,7 @@
     </template>
 
     <VCardText
-      class="pa-0 px-2 flex-grow-1"
+      class="pa-0 flex-grow-1 px-2"
       :class="{
         'd-flex': !$vuetify.display.mobile,
         'flex-row': !$vuetify.display.mobile
@@ -47,7 +47,7 @@
         </VWindowItem>
         <VWindowItem value="resultsMenu">
           <h3>{{ $t('results') }}</h3>
-          <div class="mt-2 text-subtitle-1">
+          <div class="text-subtitle-1 mt-2">
             {{ $t('identifyInstructResult') }}
           </div>
           <VCheckbox
@@ -97,9 +97,9 @@ import { getItemLookupApi } from '@jellyfin/sdk/lib/utils/api/item-lookup-api';
 import { computed, ref, shallowRef, toRaw } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { isArray, isNil, isStr } from '@jellyfin-vue/shared/validation';
-import { useConfirmDialog } from '@/composables/use-confirm-dialog';
-import { useSnackbar } from '@/composables/use-snackbar';
-import { remote } from '@/plugins/remote';
+import { useConfirmDialog } from '#/composables/use-confirm-dialog';
+import { useSnackbar } from '#/composables/use-snackbar';
+import { remote } from '#/plugins/remote';
 
 interface IdentifyField {
   key: string;

frontend/src/components/Item/Identify/IdentifyResults.vue

@@ -35,7 +35,7 @@ import type {
   RemoteSearchResult
 } from '@jellyfin/sdk/lib/generated-client';
 import { computed } from 'vue';
-import { getShapeFromItemType } from '@/utils/items';
+import { getShapeFromItemType } from '#/utils/items';
 
 const { items, itemType } = defineProps<{
   items: RemoteSearchResult[];

frontend/src/components/Item/ItemGrid.vue

@@ -57,7 +57,7 @@
 
 <script setup lang="ts">
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
-import { useResponsiveClasses } from '@/composables/use-responsive-classes';
+import { useResponsiveClasses } from '#/composables/use-responsive-classes';
 
 const { items, large, noVirtual } = defineProps<{
   items: BaseItemDto[];

frontend/src/components/Item/ItemMenu.vue

@@ -83,13 +83,13 @@ import {
   getItemIdFromSourceIndex,
   getItemSeasonDownloadMap,
   getItemSeriesDownloadMap
-} from '@/utils/items';
-import { taskManager } from '@/store/task-manager';
-import { playbackManager } from '@/store/playback-manager';
-import { apiStore } from '@/store/api';
-import { remote } from '@/plugins/remote';
-import { useSnackbar } from '@/composables/use-snackbar';
-import { useConfirmDialog } from '@/composables/use-confirm-dialog';
+} from '#/utils/items';
+import { taskManager } from '#/store/task-manager';
+import { playbackManager } from '#/store/playback-manager';
+import { apiStore } from '#/store/api';
+import { remote } from '#/plugins/remote';
+import { useSnackbar } from '#/composables/use-snackbar';
+import { useConfirmDialog } from '#/composables/use-confirm-dialog';
 
 interface MenuOption {
   title: string;

frontend/src/components/Item/MediaDetail/MediaDetailContent.vue

@@ -20,8 +20,8 @@ import type {
 } from '@jellyfin/sdk/lib/generated-client';
 import { useI18n } from 'vue-i18n';
 import { isNumber, isBool } from '@jellyfin-vue/shared/validation';
-import { getLocaleName } from '@/utils/i18n';
-import { formatBitRate } from '@/utils/items';
+import { getLocaleName } from '#/utils/i18n';
+import { formatBitRate } from '#/utils/items';
 
 const { stream, videoTimestamp } = defineProps<{
   stream: MediaStream;

frontend/src/components/Item/MediaDetail/MediaDetailDialog.vue

@@ -29,7 +29,7 @@
 
     <VCardText
       v-if="selectedMediaSource"
-      class="d-flex flex-column flex-grow-1 pa-3">
+      class="d-flex flex-grow-1 flex-column pa-3">
       <template v-if="(selectedMediaSource.MediaStreams?.length ?? 0) > 0">
         <VTabs
           v-model="currentTab"
@@ -148,8 +148,8 @@ import type {
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { isArray, isNil, isNumber } from '@jellyfin-vue/shared/validation';
-import { getLocaleName } from '@/utils/i18n';
-import { formatBitRate, formatFileSize } from '@/utils/items';
+import { getLocaleName } from '#/utils/i18n';
+import { formatBitRate, formatFileSize } from '#/utils/items';
 
 const { item, mediaSourceIndex } = defineProps<{ item: BaseItemDto; mediaSourceIndex?: number }>();
 

frontend/src/components/Item/MediaInfo.vue

@@ -32,7 +32,7 @@
 
 <script setup lang="ts">
 import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
-import { getEndsAtTime, getRuntimeTime } from '@/utils/time';
+import { getEndsAtTime, getRuntimeTime } from '#/utils/time';
 
 const { item, year, rating, runtime, tracks, endsAt } = defineProps<{
   item: BaseItemDto;

frontend/src/components/Item/MediaSourceSelector.vue

@@ -20,8 +20,8 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 import type { MediaSourceInfo } from '@jellyfin/sdk/lib/generated-client';
-import { isNil } from '@/utils/validation';
-import { getItemizedSelect } from '@/utils/forms';
+import { isNil } from '@jellyfin-vue/shared/validation';
+import { getItemizedSelect } from '#/utils/forms';
 
 const { sources, defaultSourceIndex, label } = defineProps<{
   sources: MediaSourceInfo[];

frontend/src/components/Item/MediaStreamSelector.vue

@@ -32,9 +32,9 @@ import IMdiSurroundSound51 from 'virtual:icons/mdi/surround-sound-5-1';
 import IMdiSurroundSound71 from 'virtual:icons/mdi/surround-sound-7-1';
 import IMdiSurroundSound from 'virtual:icons/mdi/surround-sound';
 import { watchImmediate } from '@vueuse/core';
-import { getLocaleName } from '@/utils/i18n';
-import { upperFirst } from '@/utils/data-manipulation';
-import { isNil } from '@/utils/validation';
+import { isNil } from '@jellyfin-vue/shared/validation';
+import { getLocaleName } from '#/utils/i18n';
+import { upperFirst } from '#/utils/data-manipulation';
 
 const { mediaStreams, type, defaultStreamIndex } = defineProps<{
   mediaStreams: MediaStream[];

frontend/src/components/Item/Metadata/ImageEditor.vue

@@ -22,7 +22,7 @@
         </div>
         <div
           v-if="item.Width && item.Height"
-          class="text-center text-body-2 text--secondary">
+          class="text-center text--secondary text-body-2">
           {{ t('dimensions', { width: item.Width, height: item.Height }) }}
         </div>
         <VCardActions class="justify-center">
@@ -110,8 +110,8 @@ import { useI18n } from 'vue-i18n';
 import { watchImmediate } from '@vueuse/core';
 import {
   getImageInfo
-} from '@/utils/images';
-import { remote } from '@/plugins/remote';
+} from '#/utils/images';
+import { remote } from '#/plugins/remote';
 
 const { metadata } = defineProps<{ metadata: BaseItemDto }>();
 

frontend/src/components/Item/Metadata/ImageSearch.vue

@@ -122,8 +122,8 @@ import {
 import { getRemoteImageApi } from '@jellyfin/sdk/lib/utils/api/remote-image-api';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { getLocaleName } from '@/utils/i18n';
-import { remote } from '@/plugins/remote';
+import { getLocaleName } from '#/utils/i18n';
+import { remote } from '#/plugins/remote';
 
 const { metadata, dialog } = defineProps<{
   metadata: BaseItemDto;

frontend/src/components/Item/Metadata/MetadataEditor.vue

@@ -235,11 +235,11 @@ import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { watchImmediate } from '@vueuse/core';
 import { isArray, isNil } from '@jellyfin-vue/shared/validation';
-import { getItemImageUrl } from '@/utils/images';
-import { remote } from '@/plugins/remote';
-import { useSnackbar } from '@/composables/use-snackbar';
-import { useDateFns } from '@/composables/use-datefns';
-import { pick } from '@/utils/data-manipulation';
+import { getItemImageUrl } from '#/utils/images';
+import { remote } from '#/plugins/remote';
+import { useSnackbar } from '#/composables/use-snackbar';
+import { useDateFns } from '#/composables/use-datefns';
+import { pick } from '#/utils/data-manipulation';
 
 interface ContentOption {
   value: string;