refactor: Configure path aliases for more consistent imports (#100)

* Configure path aliases for `$server` and `$src` imports

* Add include patterns to ensure all source files are considered

* Replace kit aliases with paths in tsconfig

src/auth/authService.ts

@@ -1,8 +1,8 @@
 import type { LogoutOptions } from "@auth0/auth0-spa-js";
 import { Auth0Client, createAuth0Client, User } from "@auth0/auth0-spa-js";
 
-import { isAuthenticated, user } from "../store";
-import config from "./auth_config";
+import config from "$src/auth/auth_config";
+import { isAuthenticated, user } from "$src/store";
 
 let auth0Client: Auth0Client;
 

src/lib/components/index.ts

@@ -1,14 +1,14 @@
 // shared components
-export { default as Footer } from "./shared/footer.svelte";
-export { default as Header } from "./shared/header.svelte";
-export { default as IconLogin } from "./shared/icon-login.svelte";
-export { default as IconLogo } from "./shared/icon-logo.svelte";
-export { default as IconLogout } from "./shared/icon-logout.svelte";
-export { default as LoginButton } from "./shared/login-button.svelte";
-export { default as ToolsBanner } from "./shared/tools-banner.svelte";
+export { default as Footer } from "$lib/components/shared/footer.svelte";
+export { default as Header } from "$lib/components/shared/header.svelte";
+export { default as IconLogin } from "$lib/components/shared/icon-login.svelte";
+export { default as IconLogo } from "$lib/components/shared/icon-logo.svelte";
+export { default as IconLogout } from "$lib/components/shared/icon-logout.svelte";
+export { default as LoginButton } from "$lib/components/shared/login-button.svelte";
+export { default as ToolsBanner } from "$lib/components/shared/tools-banner.svelte";
 
 // features
-export { default as EbdFormHeader } from "./features/ebd-form-header.svelte";
-export { default as EbdSelect } from "./features/ebd-select.svelte";
-export { default as ExportButton } from "./features/export-button.svelte";
-export { default as FormatVersionSelect } from "./features/format-version-select.svelte";
+export { default as EbdFormHeader } from "$lib/components/features/ebd-form-header.svelte";
+export { default as EbdSelect } from "$lib/components/features/ebd-select.svelte";
+export { default as ExportButton } from "$lib/components/features/export-button.svelte";
+export { default as FormatVersionSelect } from "$lib/components/features/format-version-select.svelte";

src/lib/components/shared/login-button.svelte

@@ -2,9 +2,8 @@
   import { onMount } from "svelte";
 
   import { IconLogin, IconLogout } from "$lib/components";
-
-  import auth from "../../../auth/authService";
-  import { isAuthenticated, user } from "../../../store";
+  import auth from "$src/auth/authService";
+  import { isAuthenticated, user } from "$src/store";
 
   let userEmail: string = "";
 

src/routes/+layout.server.ts

@@ -1,5 +1,5 @@
-import { getEbds } from "../server/ebd-loader";
-import { getFormatVersions } from "../server/format-version-loader";
+import { getEbds } from "$server/ebd-loader";
+import { getFormatVersions } from "$server/format-version-loader";
 
 export const load = async () => {
   const formatVersions = getFormatVersions();

src/routes/+layout.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
-  import "../app.scss";
+  import "$src/app.scss";
 
   import { onMount } from "svelte";
 
   import { goto } from "$app/navigation";
   import { base } from "$app/paths";
   import { page } from "$app/stores";
   import { Footer } from "$lib/components";
-
-  import auth from "../auth/authService";
-  import { isAuthenticated } from "../store";
+  import auth from "$src/auth/authService";
+  import { isAuthenticated } from "$src/store";
 
   let isLoading = true;
 
@@ -27,7 +26,7 @@
     await auth.checkAuth();
     isLoading = false;
 
-    isAuthenticated.subscribe((value) => {
+    isAuthenticated.subscribe((value: boolean) => {
       if (!value && !isLoading && $page.url.pathname !== `${base}/`) {
         goto(`${base}/`);
       }

src/routes/+page.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-  import "../app.scss";
+  import "$src/app.scss";
 
   import { goto } from "$app/navigation";
   import { base } from "$app/paths";
   import { LoginButton, ToolsBanner } from "$lib/components";
-
-  import auth from "../auth/authService";
-  import { isAuthenticated } from "../store";
+  import auth from "$src/auth/authService";
+  import { isAuthenticated } from "$src/store";
 
   async function checkAuthentication() {
     if ($isAuthenticated) {

src/routes/ebd/+layout.svelte

@@ -1,5 +1,5 @@
 <script>
-  import "../../app.scss";
+  import "$src/app.scss";
 </script>
 
 <div class="flex flex-col flex-grow hfill">

src/routes/ebd/+page.server.ts

@@ -1,5 +1,6 @@
-import { getEbds } from "../../server/ebd-loader";
-import { getFormatVersions } from "../../server/format-version-loader";
+import { getEbds } from "$server/ebd-loader";
+import { getFormatVersions } from "$server/format-version-loader";
+
 import type { PageServerLoad } from "./$types";
 
 export const load: PageServerLoad = async () => {

src/routes/ebd/[...ebd]/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import "../../../app.scss";
+  import "$src/app.scss";
 
   import { page } from "$app/stores";
   import { EbdFormHeader } from "$lib/components";

src/routes/ebd/[...ebd]/+page.server.ts

@@ -1,18 +1,26 @@
-import { getFormatVersions } from "../../../server/format-version-loader";
-import { prerenderEntries } from "../../../server/prerender-entries";
+import { getFormatVersions } from "$server/format-version-loader";
+import { prerenderEntries } from "$server/prerender-entries";
+
 import type { PageServerLoad } from "./$types";
 
+interface RouteEntry {
+  ebd: string;
+  filePath: string;
+}
+
 export function entries() {
   const routes = prerenderEntries();
-  return routes.map((route) => ({
+  return routes.map((route: RouteEntry) => ({
     ebd: route.ebd,
   }));
 }
 
 export const load: PageServerLoad = async ({ params }) => {
   const [formatVersion, ebdFile] = params.ebd.split("/");
   const availableVersions = getFormatVersions();
-  const version = availableVersions.find((v) => v.code === formatVersion);
+  const version = availableVersions.find(
+    (v: { code: string }) => v.code === formatVersion,
+  );
 
   return {
     formatVersion: version,

src/server/prerender-entries.ts

@@ -1,7 +1,7 @@
 import { join } from "path";
 
-import { getEbds } from "./ebd-loader";
-import { getFormatVersions } from "./format-version-loader";
+import { getEbds } from "$server/ebd-loader";
+import { getFormatVersions } from "$server/format-version-loader";
 
 export function prerenderEntries() {
   const staticPath = join(process.cwd(), "static", "ebd");

tsconfig.json

@@ -2,14 +2,21 @@
   "extends": "./.svelte-kit/tsconfig.json",
   "compilerOptions": {
     "allowJs": true,
+    "baseUrl": ".",
     "checkJs": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "paths": {
+      "$lib/*": ["src/lib/*"],
+      "$src/*": ["src/*"],
+      "$server/*": ["src/server/*"]
+    },
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,
-    "moduleResolution": "node",
     "types": ["node"]
-  }
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
 }

vite.config.ts

@@ -1,6 +1,13 @@
 import { sveltekit } from "@sveltejs/kit/vite";
 import { defineConfig } from "vite";
+import path from "path";
 
 export default defineConfig({
   plugins: [sveltekit()],
+  resolve: {
+    alias: {
+      $server: path.resolve("./src/server"),
+      $src: path.resolve("./src"),
+    },
+  },
 });