refactor: update module paths for better organization

Author: stambolievv

.eslintrc

@@ -1,6 +1,13 @@
 {
   "root": true,
-  "extends": ["plugin:lit/recommended", "eslint:recommended", "plugin:jsdoc/recommended", "plugin:import/recommended", "plugin:promise/recommended"],
+  "extends": [
+    "plugin:lit/recommended",
+    "eslint:recommended",
+    "plugin:jsdoc/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "plugin:promise/recommended"
+  ],
   "parser": "@babel/eslint-parser",
   "plugins": ["lit", "jsdoc", "import", "promise"],
   "env": {
@@ -41,6 +48,7 @@
     "import/first": "warn",
     "import/newline-after-import":"warn",
     "import/no-empty-named-blocks": "warn",
+    "import/no-unresolved": "off",
     "promise/always-return": "off",
     "promise/catch-or-return": "off"
   }

LICENSE

@@ -186,7 +186,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright [2023] [Deyan "stambolievv" Stamboliev]
+   Copyright [2024] [Deyan "stambolievv" Stamboliev]
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

index.html

@@ -46,9 +46,9 @@
           <li role="menuitem"><a href="<%- APP_HOST_URL %>/cars">Всички автомобили</a></li>
         </ul>
         <ul role="menubar" class="user-navigation" hidden>
-          <li role="menuitem"><a href="#" id="logout-button">Излез</a></li>
+          <li role="menuitem"><a href="#" id="logout-button">Изход</a></li>
         </ul>
-        <ul role="menubar" class="guest-navigation">
+        <ul role="menubar" class="guest-navigation" hidden>
           <li role="menuitem"><a href="<%- APP_HOST_URL %>/user/login">Вход</a></li>
           <li role="menuitem"><a href="<%- APP_HOST_URL %>/user/register">Регистрация</a></li>
         </ul>

jsconfig.json

@@ -13,6 +13,14 @@
     "strict": true, // This enables all of the strict mode family options.
     "checkJs": true, // This is the equivalent of including // @ts-check at the top of all JavaScript files which are included in your project.
     "allowUnreachableCode": false, // This allows picking up dead code paths.
+
+    "baseUrl": ".",
+    "paths": {
+      "@db": ["./src/api/"],
+      "@views": ["./src/views/"],
+      "@templates": ["./src/templates/"],
+      "@utilities": ["./src/utilities/"],
+    }
   },
   "exclude": ["dist", "node_modules"] // This specifies which directories should be excluded from the project.
 }

src/api/api.js

@@ -1,4 +1,4 @@
-import { getUserData, removeUserData } from './services/userService';
+import { getUserData, removeUserData } from '@db';
 
 /**
  * @description Performs a network request to a given path with specified options.

src/api/endpoints.js

@@ -1,4 +1,4 @@
-import { makeQueryParam } from '../utilities';
+import { makeQueryParam } from '@utilities';
 
 /**
  * @description Represents the endpoints related to users database.

src/api/services/carService.js

@@ -1,7 +1,7 @@
 import * as api from '../api';
 import { CAR_ENDPOINTS } from '../endpoints';
-import { getUserData } from './userService';
-import { memoization } from '../../utilities';
+import { getUserData } from '@db';
+import { memoization } from '@utilities';
 import config from '../../config';
 
 /**

src/api/services/repairService.js

@@ -1,7 +1,7 @@
 import * as api from '../api';
 import { REPAIR_ENDPOINTS } from '../endpoints';
-import { getUserData } from './userService';
-import { memoization } from '../../utilities';
+import { getUserData } from '@db';
+import { memoization } from '@utilities';
 
 /**
  * @description Sorts the given objects based on their date properties. If the date properties are not available, it falls back to sorting based on createdAt properties.

src/api/services/userService.js

@@ -1,6 +1,6 @@
 import * as api from '../api';
 import { USER_ENDPOINTS } from '../endpoints';
-import { memoization, updateNavigation } from '../../utilities';
+import { memoization, updateNavigation } from '@utilities';
 import config from '../../config';
 
 /**

src/app.js

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import page from 'page';
 import { decorateContext } from './middleware/render';
-import { loginPage, onLogout, registerPage, carsCatalogPage, createCarPage, editCarPage, repairsCatalogPage, createRepairPage, detailsRepairPage, editRepairPage } from './views';
+import { loginPage, onLogout, registerPage, carsCatalogPage, createCarPage, editCarPage, repairsCatalogPage, createRepairPage, detailsRepairPage, editRepairPage } from '@views';
 
 document.getElementById('logout-button')?.addEventListener('click', onLogout);
 

src/middleware/render.js

@@ -1,6 +1,6 @@
 import { render } from 'lit';
-import { hasUserData } from '../api';
-import { updateNavigation } from '../utilities';
+import { hasUserData } from '@db';
+import { updateNavigation } from '@utilities';
 
 const root = document.getElementById('site-content') || document.body;
 const metaTag = /**@type {HTMLMetaElement | null}*/(document.querySelector('meta[name=viewport]'));

src/templates/car/catalog.js

@@ -1,6 +1,6 @@
 import page from 'page';
 import { html } from 'lit';
-import { makeQueryParam } from '../../utilities';
+import { makeQueryParam } from '@utilities';
 import config from '../../config';
 
 /**

src/templates/car/create.js

@@ -1,4 +1,3 @@
-import page from 'page';
 import { html } from 'lit';
 
 /**

src/templates/car/edit.js

@@ -1,4 +1,3 @@
-import page from 'page';
 import { html } from 'lit';
 
 /**

src/templates/repair/catalog.js

@@ -1,6 +1,6 @@
 import page from 'page';
 import { html } from 'lit';
-import { makeQueryParam, formatDateToLocale } from '../../utilities';
+import { makeQueryParam, formatDateToLocale } from '@utilities';
 import config from '../../config';
 
 /**

src/templates/repair/create.js

@@ -1,6 +1,5 @@
-import page from 'page';
 import { html } from 'lit';
-import { getDay } from '../../utilities';
+import { getDay } from '@utilities';
 
 /**
  * @typedef {object} RepairCreatePageProps

src/templates/repair/details.js

@@ -1,6 +1,6 @@
 import page from 'page';
 import { html } from 'lit';
-import { formatDateToLocale } from '../../utilities';
+import { formatDateToLocale } from '@utilities';
 
 /**
  * @typedef {object} RepairDetailsPageProps

src/templates/repair/edit.js

@@ -1,6 +1,6 @@
 import page from 'page';
 import { html } from 'lit';
-import { getDay } from '../../utilities';
+import { getDay } from '@utilities';
 
 /**
  * @typedef {object} RepairEditPageProps

src/utilities/Notice.js

@@ -1,4 +1,4 @@
-import { generateUUID, createElement } from './index';
+import { generateUUID, createElement } from '@utilities';
 
 const MASK_COLOR = 'rgba(0 0 0 / 0.5)';
 const TOAST_AUTO_CLOSE_DEFAULT_DURATION = 3;

src/utilities/updateNavigation.js

@@ -1,4 +1,4 @@
-import { hasUserData } from '../api';
+import { hasUserData } from '@db';
 
 const userNavigation = /**@type {NodeListOf<Element>}*/(document.querySelectorAll('.user-navigation'));
 const guestNavigation = /**@type {NodeListOf<Element>}*/(document.querySelectorAll('.guest-navigation'));

vite.config.js

@@ -3,6 +3,7 @@ import { viteStaticCopy } from 'vite-plugin-static-copy';
 import viteBanner from 'vite-plugin-banner';
 import { createHtmlPlugin } from 'vite-plugin-html';
 import pkg from './package.json';
+import { fileURLToPath, URL } from 'node:url'
 
 const banner = `
 /**
@@ -39,6 +40,9 @@ export default defineConfig({
     },
     rollupOptions: {
       output: {
+        manualChunks: (id) => {
+          if (id.includes('node_modules')) return 'vendor';
+        },
         dir: outputFolder,
         chunkFileNames: '[name].js',
         entryFileNames: '[name].js',
@@ -64,5 +68,13 @@ export default defineConfig({
         return code;
       },
     }
-  ]
+  ],
+  resolve: {
+    alias: {
+      '@db': fileURLToPath(new URL('./src/api/', import.meta.url)),
+      '@views': fileURLToPath(new URL('./src/views/', import.meta.url)),
+      '@templates': fileURLToPath(new URL('./src/templates/', import.meta.url)),
+      '@utilities': fileURLToPath(new URL('./src/utilities/', import.meta.url)),
+    },
+  }
 });