♻️ refactor: add the @ alias for imports

Author: pyanderson

frontend/js/index.tsx

@@ -4,7 +4,7 @@ import { createRoot } from "react-dom/client";
 
 import App from "./App";
 
-import "../css/style.css";
+import "@/css/style.css";
 
 Sentry.init({
   dsn: window.SENTRY_DSN,

frontend/js/loaders/users.ts

@@ -1,6 +1,6 @@
 import { redirectDocument } from "react-router";
 
-import { ApiError, UsersService } from "../api";
+import { ApiError, UsersService } from "@/js/api";
 
 export async function usersLoader({ request }: { request: Request }) {
   const url = new URL(request.url);

frontend/js/pages/Home.tsx

@@ -1,8 +1,8 @@
 import { useState, useEffect } from "react";
 
-import DjangoImgSrc from "../../assets/images/django-logo-negative.png";
-import { RestService } from "../api";
-import { TopNav } from "../components";
+import DjangoImgSrc from "@/assets/images/django-logo-negative.png";
+import { RestService } from "@/js/api";
+import { TopNav } from "@/js/components";
 
 const Home = () => {
   const [showBugComponent, setShowBugComponent] = useState(false);

frontend/js/pages/__tests__/Home.spec.tsx

@@ -1,10 +1,10 @@
 import { render, screen, waitFor } from "@testing-library/react";
 import { MemoryRouter } from "react-router";
 
-import { RestService } from "../../api";
-import Home from "../Home";
+import { RestService } from "@/js/api";
+import Home from "@/js/pages/Home";
 
-jest.mock("../../api", () => ({
+jest.mock("@/js/api", () => ({
   RestService: {
     restRestCheckRetrieve: jest.fn(),
   },

frontend/js/routes/index.ts

@@ -1,8 +1,8 @@
 import { createBrowserRouter } from "react-router";
 
-import { usersLoader } from "../loaders";
-import Home from "../pages/Home";
-import Users from "../pages/Users";
+import { usersLoader } from "@/js/loaders";
+import Home from "@/js/pages/Home";
+import Users from "@/js/pages/Users";
 
 const router = createBrowserRouter([
   { index: true, Component: Home },

frontend/js/types/assets.d.ts

@@ -0,0 +1,13 @@
+// CSS
+declare module "*.css";
+// Images and Fonts
+declare module "*.png";
+declare module "*.jpg";
+declare module "*.jpeg";
+declare module "*.gif";
+declare module "*.webp";
+declare module "*.svg";
+declare module "*.woff";
+declare module "*.woff2";
+declare module "*.ttf";
+declare module "*.eot";

jest.config.js

@@ -3,6 +3,7 @@
 module.exports = {
   moduleNameMapper: {
     "^.+\\.(css|scss|png|svg|jpg|jpeg|gif|webp)$": "jest-transform-stub",
+    "^@/(.*)$": "<rootDir>/frontend/$1",
   },
   transformIgnorePatterns: ["node_modules/*"],
   modulePaths: ["frontend", "frontend/js", "frontend/js/app"],

tsconfig.json

@@ -5,12 +5,12 @@
     "target": "ES2021",
 
     "allowJs": true,
-    "baseUrl": "./",
+    "baseUrl": ".",
     "esModuleInterop": true,
     "jsx": "react-jsx",
     "moduleResolution": "bundler",
     "noEmit": true,
-    "paths": { "*": ["./frontend/*", "./frontend/js/*"] },
+    "paths": { "@/*": ["frontend/*"] },
     "skipLibCheck": true,
     "strict": true,
     "types": ["node", "jest", "@testing-library/jest-dom"]

webpack.config.js

@@ -76,6 +76,7 @@ module.exports = (env, argv) => {
     ].filter(Boolean),
     resolve: {
       modules: [nodeModulesDir, path.resolve(__dirname, "frontend/js/")],
+      alias: { "@": path.resolve(__dirname, "frontend") },
       extensions: [".js", ".jsx", ".ts", ".tsx"],
     },
     optimization: {