Remove lazy loading route components (#12)

* update package.json build path

* change prod base url to dev_url for deploy tests

* remove lazy loading route components

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "vite",
     "serve": "vite preview",
-    "build": "vite build --emptyOutDir --outDir ../swing/client",
+    "build": "vite build --emptyOutDir --outDir dist",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
   },
   "dependencies": {

src/components/AlbumView/Header.vue

@@ -79,20 +79,19 @@
 import { ref } from "vue";
 
 import ArtistName from "@/components/shared/ArtistName.vue";
+import { isLight } from "@/composables/colors/album";
+import { favType, playSources } from "@/composables/enums";
 import { paths } from "@/config";
+import { Routes } from "@/router";
 import { albumHeaderSmall } from "@/stores/content-width";
 import useNavStore from "@/stores/nav";
 import useAlbumStore from "@/stores/pages/album";
 import { formatSeconds, useVisibility } from "@/utils";
-import { isLight } from "@/composables/colors/album";
-import { favType, playSources } from "@/composables/enums";
-import { Album } from "@/interfaces";
-import { Routes } from "@/router/routes";
 import HeartSvg from "../shared/HeartSvg.vue";
 
-import PlayBtnRect from "../shared/PlayBtnRect.vue";
 import favoriteHandler from "@/composables/favoriteHandler";
 import { storeToRefs } from "pinia";
+import PlayBtnRect from "../shared/PlayBtnRect.vue";
 
 // const props = defineProps<{
 //   album: Album;

src/components/BottomBar.vue

@@ -84,7 +84,7 @@
 </template>
 
 <script setup lang="ts">
-import { Routes } from "@/router/routes";
+import { Routes } from "@/router";
 import { paths } from "@/config";
 import { formatSeconds } from "@/utils";
 import { favType } from "@/composables/enums";

src/components/FolderView/FolderItem.vue

@@ -16,7 +16,7 @@
 
 <script setup lang="ts">
 import { Folder } from "@/interfaces";
-import { Routes } from "@/router/routes";
+import { Routes } from "@/router";
 
 import FolderSvg from "@/assets/icons/folder.svg";
 import SymLinkSvg from "@/assets/icons/symlink.svg";

src/components/LeftSidebar/Navigation.vue

@@ -31,14 +31,14 @@
 </template>
 
 <script setup lang="ts">
-import { Routes } from "@/router/routes";
+import { Routes } from "@/router";
+import useSearchStore from "@/stores/search";
 import FolderSvg from "../../assets/icons/folder-1.svg";
+import HeartSvg from "../../assets/icons/heart.svg";
 import PlaylistSvg from "../../assets/icons/playlist-1.svg";
 import QueueSvg from "../../assets/icons/queue.svg";
 import SearchSvg from "../../assets/icons/search.svg";
 import SettingsSvg from "../../assets/icons/settings.svg";
-import HeartSvg from "../../assets/icons/heart.svg";
-import useSearchStore from "@/stores/search";
 
 const menus = [
   {

src/components/modals/NewPlaylist.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { Routes } from "@/router/routes";
+import { Routes } from "@/router";
 import usePlaylistStore from "@/stores/pages/playlists";
 import { onMounted } from "vue";
 import { useRoute } from "vue-router";

src/components/nav/NavBar.vue

@@ -45,18 +45,18 @@ import { ref, watch } from "vue";
 import { useRoute } from "vue-router";
 
 import { subPath } from "@/interfaces";
-import { Routes } from "@/router/routes";
+import { Routes } from "@/router";
 import { createSubPaths } from "@/utils";
 
 import NavButtons from "./NavButtons.vue";
 
+import ArtistDiscographyTitle from "./Titles/ArtistDiscographyTitle.vue";
 import FolderTitle from "./Titles/Folder.vue";
-import SimpleNav from "./Titles/SimpleNav.vue";
 import PlaylistsTitle from "./Titles/PlaylistsTitle.vue";
 import QueueTitle from "./Titles/QueueTitle.vue";
 import SearchTitle from "./Titles/SearchTitle.vue";
 import SettingsTitle from "./Titles/SettingsTitle.vue";
-import ArtistDiscographyTitle from "./Titles/ArtistDiscographyTitle.vue";
+import SimpleNav from "./Titles/SimpleNav.vue";
 
 const route = useRoute();
 const subPaths = ref<subPath[]>([]);

src/components/nav/Titles/Folder.vue

@@ -35,7 +35,7 @@
 <script setup lang="ts">
 import SearchInput from "@/components/shared/NavSearchInput.vue";
 import { subPath } from "@/interfaces";
-import { Routes } from "@/router/routes";
+import { Routes } from "@/router";
 import { focusElemByClass } from "@/utils";
 import { onUpdated } from "vue";
 

src/components/nav/Titles/QueueTitle.vue

@@ -17,17 +17,17 @@
 <script setup lang="ts">
 import QueueActions from "@/components/RightSideBar/Queue/QueueActions.vue";
 import { FromOptions } from "@/composables/enums";
+import { Routes } from "@/router";
 import useQueueStore from "@/stores/queue";
-import { Routes } from "@/router/routes";
 
 import AlbumSvg from "@/assets/icons/album.svg";
+import ArtistSvg from "@/assets/icons/artist.svg";
 import FolderSvg from "@/assets/icons/folder.svg";
 import PlaylistSvg from "@/assets/icons/playlist.svg";
 import SearchSvg from "@/assets/icons/search.svg";
-import ArtistSvg from "@/assets/icons/artist.svg";
 
-import { RouteLocationRaw } from "vue-router";
 import HeartSvg from "@/assets/icons/heart.fill.svg";
+import { RouteLocationRaw } from "vue-router";
 
 const queue = useQueueStore();
 

src/components/nav/Titles/SearchTitle.vue

@@ -17,11 +17,11 @@
 </template>
 
 <script setup lang="ts">
-import { Routes } from "@/router/routes";
+import { Routes } from "@/router";
 
-import useSearchStore from "@/stores/search";
 import Tabs from "@/components/RightSideBar/Search/TabsWrapper.vue";
 import SearchInput from "@/components/RightSideBar/SearchInput.vue";
+import useSearchStore from "@/stores/search";
 
 const search = useSearchStore();
 const tabs = ["tracks", "albums", "artists"];

src/components/shared/AlbumCard.vue

@@ -45,8 +45,8 @@ import { Album } from "../../interfaces";
 import PlayBtn from "./PlayBtn.vue";
 
 import { playSources } from "@/composables/enums";
+import { Routes } from "@/router";
 import useAlbumStore from "@/stores/pages/album";
-import { Routes } from "@/router/routes";
 
 const imguri = paths.images.thumb.large;
 defineProps<{

src/components/shared/ArtistCard.vue

@@ -18,7 +18,7 @@
 
 <script setup lang="ts">
 import { Artist } from "@/interfaces";
-import { Routes } from "@/router/routes";
+import { Routes } from "@/router";
 import { paths } from "../../config";
 
 const imguri = paths.images.artist.large;

src/components/shared/ArtistName.vue

@@ -30,7 +30,7 @@
 
 <script setup lang="ts">
 import { Artist } from "@/interfaces";
-import { Routes } from "@/router/routes";
+import { Routes } from "@/router";
 
 const props = defineProps<{
   artists: Artist[] | null;

src/components/shared/NavSearchInput.vue

@@ -28,7 +28,7 @@ import useFolderStore from "@/stores/pages/folder";
 import usePStore from "@/stores/pages/playlist";
 
 import SearchSvg from "@/assets/icons/search.svg";
-import { Routes } from "@/router/routes";
+import { Routes } from "@/router";
 
 const clicked = ref(false);
 const [playlist, album, folder] = [

src/composables/state.ts

@@ -1,11 +1,7 @@
 import { ref } from "@vue/reactivity";
 
 const loading = ref(false);
-const settings = {
-  uri: "http://10.5.8.81:1970",
-};
 
 export default {
   loading,
-  settings,
 };

src/config.ts

@@ -1,7 +1,7 @@
 const development = import.meta.env.DEV;
 const dev_url = "http://localhost:1970";
 
-const baseApiUrl = development ? dev_url : "";
+const baseApiUrl = development ? dev_url : dev_url;
 const baseImgUrl = baseApiUrl + "/img";
 
 const imageRoutes = {

src/contexts/track_context.ts

@@ -2,7 +2,7 @@ import { Artist, Playlist, Track } from "../interfaces";
 
 // @ts-ignore
 import { Option } from "../interfaces";
-import Router from "../router";
+import { Routes, router as Router } from "@/router";
 
 import {
   addTrackToPlaylist,
@@ -11,7 +11,6 @@ import {
 
 import useModalStore from "../stores/modal";
 import useQueueStore from "../stores/queue";
-import { Routes } from "@/router/routes";
 /**
  * Returns a list of context menu items for a track.
  * @param  {any} track a track object.

src/main.ts

@@ -11,9 +11,8 @@ import {
 import { autoAnimatePlugin } from "@formkit/auto-animate/vue";
 import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
 
-
 import App from "./App.vue";
-import router from "./router";
+import { router } from "./router";
 import vTooltip from "./directives/vTooltip";
 
 import "./assets/scss/index.scss";

src/router/index.ts

@@ -1,10 +1,223 @@
-import { routes } from "./routes";
 import { createRouter, createWebHashHistory, RouterOptions } from "vue-router";
 
-const router = createRouter({
+import state from "@/composables/state";
+import useAlbumPageStore from "@/stores/pages/album";
+import useFolderPageStore from "@/stores/pages/folder";
+import usePlaylistPageStore from "@/stores/pages/playlist";
+import usePlaylistListPageStore from "@/stores/pages/playlists";
+import useArtistPageStore from "@/stores/pages/artist";
+
+import FolderView from "@/views/FolderView.vue";
+import PlaylistListView from "@/views/PlaylistList.vue";
+import PlaylistView from "@/views/PlaylistView/index.vue";
+import AlbumsExplorer from "@/views/AlbumsExplorer.vue";
+import AlbumView from "@/views/AlbumView/index.vue";
+import ArtistExplorer from "@/views/ArtistsExplorer.vue";
+import ArtistView from "@/views/ArtistView";
+import ArtistTracksView from "@/views/ArtistTracks.vue";
+import ArtistDiscographyView from "@/views/AlbumsGrid.vue";
+import SettingsView from "@/views/SettingsView.vue";
+import SearchView from "@/views/SearchView";
+import QueueView from "@/views/QueueView.vue";
+import FavoritesView from "@/views/Favorites.vue";
+import FavoriteAlbums from "@/views/FavoriteAlbums.vue";
+import FavoriteTracks from "@/views/FavoriteTracks.vue";
+import FavoriteArtists from "@/views/FavoriteArtists.vue";
+import NotFound from "@/views/NotFound.vue";
+
+const home = {
+  path: "/",
+  name: "Home",
+  redirect: "/folder/$home",
+};
+
+const folder = {
+  path: "/folder/:path",
+  name: "FolderView",
+  component: FolderView,
+  beforeEnter: async (to: any) => {
+    state.loading.value = true;
+    await useFolderPageStore()
+      .fetchAll(to.params.path)
+      .then(() => {
+        state.loading.value = false;
+      });
+  },
+};
+
+const playlists = {
+  path: "/playlists",
+  name: "PlaylistList",
+  component: PlaylistListView,
+  beforeEnter: async () => {
+    state.loading.value = true;
+    await usePlaylistListPageStore()
+      .fetchAll()
+      .then(() => {
+        state.loading.value = false;
+      });
+  },
+};
+
+const playlistView = {
+  path: "/playlist/:pid",
+  name: "PlaylistView",
+  component: PlaylistView,
+  beforeEnter: async (to: any) => {
+    state.loading.value = true;
+    await usePlaylistPageStore()
+      .fetchAll(to.params.pid)
+      .then(() => {
+        state.loading.value = false;
+      });
+  },
+};
+
+const albums = {
+  path: "/albums",
+  name: "AlbumsView",
+  component: AlbumsExplorer,
+};
+
+const albumView = {
+  path: "/albums/:hash",
+  name: "AlbumView",
+  component: AlbumView,
+  beforeEnter: async (to: any) => {
+    state.loading.value = true;
+    const store = useAlbumPageStore();
+
+    await store.fetchTracksAndArtists(to.params.hash).then(() => {
+      state.loading.value = false;
+    });
+  },
+};
+
+const artists = {
+  path: "/artists",
+  name: "ArtistsView",
+  component: ArtistExplorer,
+};
+
+const artistView = {
+  path: "/artists/:hash",
+  name: "ArtistView",
+  component: ArtistView,
+  beforeEnter: async (to: any) => {
+    state.loading.value = true;
+
+    await useArtistPageStore()
+      .getData(to.params.hash)
+      .then(() => {
+        state.loading.value = false;
+      });
+  },
+};
+
+const ArtistTracks = {
+  path: "/artists/:hash/tracks",
+  name: "ArtistTracks",
+  component: ArtistTracksView,
+};
+
+const artistDiscography = {
+  path: "/artists/:hash/discography",
+  name: "ArtistDiscographyView",
+  component: ArtistDiscographyView,
+};
+
+const settings = {
+  path: "/settings",
+  name: "SettingsView",
+  component: SettingsView,
+};
+
+const search = {
+  path: "/search/:page",
+  name: "SearchView",
+  component: SearchView,
+};
+
+const queue = {
+  path: "/queue",
+  name: "QueueView",
+  component: QueueView,
+};
+
+const favorites = {
+  path: "/favorites",
+  name: "FavoritesView",
+  component: FavoritesView,
+};
+
+const favoriteAlbums = {
+  path: "/favorites/albums",
+  name: "FavoriteAlbums",
+  component: FavoriteAlbums,
+};
+
+const favoriteTracks = {
+  path: "/favorites/tracks",
+  name: "FavoriteTracks",
+  component: FavoriteTracks,
+};
+
+const favoriteArtists = {
+  path: "/favorites/artists",
+  name: "FavoriteArtists",
+  component: FavoriteArtists,
+};
+
+const notFound = {
+  name: "NotFound",
+  path: "/:pathMatch(.*)",
+  component: NotFound,
+};
+
+const routes = [
+  home,
+  folder,
+  playlists,
+  playlistView,
+  albums,
+  albumView,
+  artists,
+  artistView,
+  artistDiscography,
+  settings,
+  search,
+  queue,
+  notFound,
+  ArtistTracks,
+  favorites,
+  favoriteAlbums,
+  favoriteTracks,
+  favoriteArtists,
+];
+
+export const Routes = {
+  home: home.name,
+  folder: folder.name,
+  playlists: playlists.name,
+  playlist: playlistView.name,
+  albums: albums.name,
+  album: albumView.name,
+  artists: artists.name,
+  artist: artistView.name,
+  artistDiscography: artistDiscography.name,
+  settings: settings.name,
+  search: search.name,
+  queue: queue.name,
+  notFound: notFound.name,
+  artistTracks: ArtistTracks.name,
+  favorites: favorites.name,
+  favoriteAlbums: favoriteAlbums.name,
+  favoriteTracks: favoriteTracks.name,
+  favoriteArtists: favoriteArtists.name,
+};
+
+export const router = createRouter({
   mode: "hash",
   history: createWebHashHistory(import.meta.env.BASE_URL),
   routes,
 } as RouterOptions);
-
-export default router;

src/router/routes.ts

@@ -1,199 +0,0 @@
-import state from "@/composables/state";
-import useAlbumPageStore from "@/stores/pages/album";
-import useFolderPageStore from "@/stores/pages/folder";
-import usePlaylistPageStore from "@/stores/pages/playlist";
-import usePlaylistListPageStore from "@/stores/pages/playlists";
-import useArtistPageStore from "@/stores/pages/artist";
-
-const home = {
-  path: "/",
-  name: "Home",
-  redirect: "/folder/$home",
-};
-
-const folder = {
-  path: "/folder/:path",
-  name: "FolderView",
-  component: () => import("@/views/FolderView.vue"),
-  beforeEnter: async (to: any) => {
-    state.loading.value = true;
-    await useFolderPageStore()
-      .fetchAll(to.params.path)
-      .then(() => {
-        state.loading.value = false;
-      });
-  },
-};
-
-const playlists = {
-  path: "/playlists",
-  name: "PlaylistList",
-  component: () => import("@/views/PlaylistList.vue"),
-  beforeEnter: async () => {
-    state.loading.value = true;
-    await usePlaylistListPageStore()
-      .fetchAll()
-      .then(() => {
-        state.loading.value = false;
-      });
-  },
-};
-
-const playlistView = {
-  path: "/playlist/:pid",
-  name: "PlaylistView",
-  component: () => import("@/views/PlaylistView/index.vue"),
-  beforeEnter: async (to: any) => {
-    state.loading.value = true;
-    await usePlaylistPageStore()
-      .fetchAll(to.params.pid)
-      .then(() => {
-        state.loading.value = false;
-      });
-  },
-};
-
-const albums = {
-  path: "/albums",
-  name: "AlbumsView",
-  component: () => import("@/views/AlbumsExplorer.vue"),
-};
-
-const albumView = {
-  path: "/albums/:hash",
-  name: "AlbumView",
-  component: () => import("@/views/AlbumView/index.vue"),
-  beforeEnter: async (to: any) => {
-    state.loading.value = true;
-    const store = useAlbumPageStore();
-
-    await store.fetchTracksAndArtists(to.params.hash).then(() => {
-      state.loading.value = false;
-    });
-  },
-};
-
-const artists = {
-  path: "/artists",
-  name: "ArtistsView",
-  component: () => import("@/views/ArtistsExplorer.vue"),
-};
-
-const artistView = {
-  path: "/artists/:hash",
-  name: "ArtistView",
-  component: () => import("@/views/ArtistView"),
-  beforeEnter: async (to: any) => {
-    state.loading.value = true;
-
-    await useArtistPageStore()
-      .getData(to.params.hash)
-      .then(() => {
-        state.loading.value = false;
-      });
-  },
-};
-
-const ArtistTracks = {
-  path: "/artists/:hash/tracks",
-  name: "ArtistTracks",
-  component: () => import("@/views/ArtistTracks.vue"),
-};
-
-const artistDiscography = {
-  path: "/artists/:hash/discography",
-  name: "ArtistDiscographyView",
-  component: () => import("@/views/AlbumsGrid.vue"),
-};
-
-const settings = {
-  path: "/settings",
-  name: "SettingsView",
-  component: () => import("@/views/SettingsView.vue"),
-};
-
-const search = {
-  path: "/search/:page",
-  name: "SearchView",
-  component: () => import("@/views/SearchView"),
-};
-
-const queue = {
-  path: "/queue",
-  name: "QueueView",
-  component: () => import("@/views/QueueView.vue"),
-};
-
-const favorites = {
-  path: "/favorites",
-  name: "FavoritesView",
-  component: () => import("@/views/Favorites.vue"),
-};
-
-const favoriteAlbums = {
-  path: "/favorites/albums",
-  name: "FavoriteAlbums",
-  component: () => import("@/views/FavoriteAlbums.vue"),
-};
-
-const favoriteTracks = {
-  path: "/favorites/tracks",
-  name: "FavoriteTracks",
-  component: () => import("@/views/FavoriteTracks.vue"),
-};
-
-const favoriteArtists = {
-  path: "/favorites/artists",
-  name: "FavoriteArtists",
-  component: () => import("@/views/FavoriteArtists.vue"),
-};
-
-const notFound = {
-  name: "NotFound",
-  path: "/:pathMatch(.*)",
-  component: () => import("@/views/NotFound.vue"),
-};
-
-const routes = [
-  home,
-  folder,
-  playlists,
-  playlistView,
-  albums,
-  albumView,
-  artists,
-  artistView,
-  artistDiscography,
-  settings,
-  search,
-  queue,
-  notFound,
-  ArtistTracks,
-  favorites,
-  favoriteAlbums,
-  favoriteTracks,
-  favoriteArtists,
-];
-
-const Routes = {
-  home: home.name,
-  folder: folder.name,
-  playlists: playlists.name,
-  playlist: playlistView.name,
-  albums: albums.name,
-  album: albumView.name,
-  artists: artists.name,
-  artist: artistView.name,
-  artistDiscography: artistDiscography.name,
-  settings: settings.name,
-  search: search.name,
-  queue: queue.name,
-  notFound: notFound.name,
-  artistTracks: ArtistTracks.name,
-  favorites: favorites.name,
-  favoriteAlbums: favoriteAlbums.name,
-  favoriteTracks: favoriteTracks.name,
-  favoriteArtists: favoriteArtists.name,
-};
-
-export { routes, Routes };

src/stores/search.ts

@@ -3,8 +3,7 @@ import { useDebounce } from "@vueuse/core";
 import { defineStore } from "pinia";
 import { watch } from "vue";
 import { useRoute } from "vue-router";
-import { Routes } from "@/router/routes";
+import { router, Routes } from "@/router";
-import router from "@/router";
 
 import {
   loadMoreAlbums,

src/views/FolderView.vue

@@ -108,9 +108,9 @@ onBeforeRouteLeave(() => {
 </script>
 
 
-<style lang="scss">
+<!-- <style lang="scss">
-// .folder-view {
+.folder-view {
-//   background-color: $red;
+  background-color: $red;
-//   padding-left: 0 !important;
+  padding-left: 0 !important;
-// }
+}
-</style>
+</style> -->