refactor: use tsconfig.json "paths" property to reduce instances of d…

…eep relative path referencing (#35)

* refactor: use paths property in tsconfig to reduce deep relative references throughout server files

* refactor: use paths property in tsconfig to reduce deep relative references throughout worker files

* refactor: use paths property in tsconfig to reduce deep relative references throughout client files

* fix: changes to tsconfigs & some packages to correctly resolve aliases

client/src/components/base/inputs/path/path-input.tsx

@@ -1,8 +1,8 @@
-import FileBrowser from '../../../modules/file-browser/file-browser';
-import './path-input.scss';
 import { useState } from 'react';
-import { FileBrowserMode } from '../../../../../../types/file-browser';
-import { DirectoryItem } from '../../../../../../types/directory';
+import { FileBrowserMode } from 'types/file-browser';
+import { DirectoryItem } from 'types/directory';
+import FileBrowser from 'components/modules/file-browser/file-browser';
+import './path-input.scss';
 
 type Params = {
 	id: string;

client/src/components/modules/file-browser/components/file-browser-body.tsx

@@ -1,6 +1,6 @@
 import mime from 'mime';
-import { FileBrowserMode } from '../../../../../../types/file-browser';
-import { Directory, DirectoryItem } from '../../../../../../types/directory';
+import { FileBrowserMode } from 'types/file-browser';
+import { Directory, DirectoryItem } from 'types/directory';
 
 type Params = {
 	mode: FileBrowserMode;

client/src/components/modules/file-browser/file-browser.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useState } from 'react';
-import { FileBrowserMode } from '../../../../../types/file-browser';
-import { Directory, DirectoryItem, DirectoryRequest } from '../../../../../types/directory';
-import ButtonInput from '../../base/inputs/button/button-input';
-import FileBrowserBody from './components/file-browser-body';
 import { useOutletContext } from 'react-router-dom';
-import { PrimaryOutletContextType } from '../../../pages/primary/primary-context';
+import { Directory, DirectoryItem, DirectoryRequest } from 'types/directory';
+import { FileBrowserMode } from 'types/file-browser';
+import ButtonInput from 'components/base/inputs/button/button-input';
+import FileBrowserBody from './components/file-browser-body';
+import { PrimaryOutletContextType } from 'pages/primary/primary-context';
 import './file-browser.scss';
 
 type Params = {

client/src/components/overlays/create-job/create-job-funcs.ts

@@ -1,7 +1,7 @@
 import mime from 'mime';
-import { Directory, DirectoryItems, DirectoryRequest } from '../../../../../types/directory';
-import { HandbrakeOutputExtensions } from '../../../../../types/file-extensions';
 import { Socket } from 'socket.io-client';
+import { Directory, DirectoryItems, DirectoryRequest } from 'types/directory';
+import { HandbrakeOutputExtensions } from 'types/file-extensions';
 
 export async function RequestDirectory(socket: Socket, path: string, isRecursive: boolean = false) {
 	const request: DirectoryRequest = {

client/src/components/overlays/create-job/create-job.tsx

@@ -2,18 +2,18 @@
 
 import { useState } from 'react';
 import { useOutletContext } from 'react-router-dom';
-import { PrimaryOutletContextType } from '../../../pages/primary/primary-context';
-import { QueueRequest } from '../../../../../types/queue';
-import SectionOverlay from '../../section/section-overlay';
-import ButtonGroup from '../../base/inputs/button-group/button-group';
-import { HandbrakeOutputExtensions } from '../../../../../types/file-extensions';
-import ButtonInput from '../../base/inputs/button/button-input';
-import PathInput from '../../base/inputs/path/path-input';
-import { FileBrowserMode } from '../../../../../types/file-browser';
-import SelectInput from '../../base/inputs/select/select-input';
-import TextInput from '../../base/inputs/text/text-input';
-import CheckboxInput from '../../base/inputs/checkbox/checkbox-input';
-import { DirectoryItem, DirectoryItems } from '../../../../../types/directory';
+import { DirectoryItem, DirectoryItems } from 'types/directory';
+import { FileBrowserMode } from 'types/file-browser';
+import { HandbrakeOutputExtensions } from 'types/file-extensions';
+import { QueueRequest } from 'types/queue';
+import { PrimaryOutletContextType } from 'pages/primary/primary-context';
+import ButtonGroup from 'components/base/inputs/button-group/button-group';
+import ButtonInput from 'components/base/inputs/button/button-input';
+import PathInput from 'components/base/inputs/path/path-input';
+import SelectInput from 'components/base/inputs/select/select-input';
+import TextInput from 'components/base/inputs/text/text-input';
+import SectionOverlay from 'components/section/section-overlay';
+import CheckboxInput from 'components/base/inputs/checkbox/checkbox-input';
 import {
 	FilterVideoFiles,
 	GetOutputItemsFromInputItems,

client/src/components/overlays/upload-preset/upload-preset.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
 import { Socket } from 'socket.io-client';
-import { HandbrakePreset } from '../../../../../types/preset';
-import ButtonInput from '../../base/inputs/button/button-input';
+import { HandbrakePreset } from 'types/preset';
+import ButtonInput from 'components/base/inputs/button/button-input';
+import SectionOverlay from 'components/section/section-overlay';
 import './upload-preset.scss';
-import SectionOverlay from '../../section/section-overlay';
 
 type Params = {
 	socket: Socket;

client/src/components/section/section-overlay.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, useContext } from 'react';
-import './section-overlay.scss';
 import { SectionContext } from './section-context';
+import './section-overlay.scss';
 
 type Params = PropsWithChildren & {
 	id: string;

client/src/components/section/section.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import { PropsWithChildren, useRef, useState } from 'react';
-import './section.scss';
 import { SectionContext, SectionContextType } from './section-context';
+import './section.scss';
 
 type Params = PropsWithChildren & {
 	title: string;

client/src/index.tsx

@@ -5,12 +5,12 @@ import './index.scss';
 import '@fontsource/noto-sans';
 import '@fontsource/inter';
 
-import Primary from './pages/primary/primary';
-import Error from './sections/error/error';
-import QueueSection from './sections/queue/queue';
-import WorkersSection from './sections/workers/workers';
-import PresetsSection from './sections/presets/presets';
-import DashboardSection from './sections/dashboard/dashboard';
+import Primary from 'pages/primary/primary';
+import Error from 'sections/error/error';
+import QueueSection from 'sections/queue/queue';
+import WorkersSection from 'sections/workers/workers';
+import PresetsSection from 'sections/presets/presets';
+import DashboardSection from 'sections/dashboard/dashboard';
 
 const routes: RouteObject[] = [
 	{

client/src/pages/primary/primary-context.ts

@@ -1,7 +1,7 @@
 import { Socket } from 'socket.io-client';
-import { Queue, QueueStatus } from '../../../../types/queue';
-import { ConnectionIDs } from '../../../../types/socket';
-import { HandbrakePresetList } from '../../../../types/preset';
+import { Queue, QueueStatus } from 'types/queue';
+import { ConnectionIDs } from 'types/socket';
+import { HandbrakePresetList } from 'types/preset';
 
 export type PrimaryOutletContextType = {
 	socket: Socket;

client/src/pages/primary/primary.tsx

@@ -5,13 +5,13 @@ import { NavLink, Outlet } from 'react-router-dom';
 import { io } from 'socket.io-client';
 // import 'dotenv/config';
 
-import { Queue, QueueStatus } from '../../../../types/queue';
-import { ConnectionIDs } from '../../../../types/socket';
-import { HandbrakePresetList } from '../../../../types/preset';
-import { PrimaryOutletContextType } from './primary-context';
+import { Queue, QueueStatus } from 'types/queue';
+import { ConnectionIDs } from 'types/socket';
+import { HandbrakePresetList } from 'types/preset';
 
-import SideBar from '../../components/modules/side-bar/side-bar';
+import SideBar from 'components/modules/side-bar/side-bar';
 
+import { PrimaryOutletContextType } from './primary-context';
 import './primary.scss';
 
 export default function Primary() {

client/src/sections/dashboard/dashboard.tsx

@@ -1,6 +1,6 @@
 import { useOutletContext } from 'react-router-dom';
-import { PrimaryOutletContextType } from '../../pages/primary/primary-context';
-import Section from '../../components/section/section';
+import { PrimaryOutletContextType } from 'pages/primary/primary-context';
+import Section from 'components/section/section';
 import DashboardSummary from './sub-sections/dashboard-summary';
 import DashboardQueue from './sub-sections/dashboard-queue';
 import DashboardWorkers from './sub-sections/dashboard-workers';

client/src/sections/dashboard/sub-sections/dashboard-presets.tsx

@@ -1,6 +1,6 @@
 import { NavLink } from 'react-router-dom';
-import SubSection from '../../../components/section/sub-section';
-import { HandbrakePresetList } from '../../../../../types/preset';
+import { HandbrakePresetList } from 'types/preset';
+import SubSection from 'components/section/sub-section';
 import './dashboard-presets.scss';
 
 type Params = {

client/src/sections/dashboard/sub-sections/dashboard-queue.tsx

@@ -1,9 +1,9 @@
 import { NavLink } from 'react-router-dom';
-import { Queue } from '../../../../../types/queue';
-import SubSection from '../../../components/section/sub-section';
+import { Queue } from 'types/queue';
+import { TranscodeStage } from 'types/transcode';
+import ProgressBar from 'components/base/progress/progress-bar';
+import SubSection from 'components/section/sub-section';
 import './dashboard-queue.scss';
-import { TranscodeStage } from '../../../../../types/transcode';
-import ProgressBar from '../../../components/base/progress/progress-bar';
 
 type Params = {
 	queue: Queue;

client/src/sections/dashboard/sub-sections/dashboard-summary.tsx

@@ -1,5 +1,5 @@
-import { QueueStatus } from '../../../../../types/queue';
-import SubSection from '../../../components/section/sub-section';
+import { QueueStatus } from 'types/queue';
+import SubSection from 'components/section/sub-section';
 import './dashboard-summary.scss';
 
 type Params = {

client/src/sections/dashboard/sub-sections/dashboard-workers.tsx

@@ -1,7 +1,7 @@
 import { NavLink } from 'react-router-dom';
-import { Queue } from '../../../../../types/queue';
-import SubSection from '../../../components/section/sub-section';
-import { workerID } from '../../../../../types/socket';
+import { Queue } from 'types/queue';
+import { workerID } from 'types/socket';
+import SubSection from 'components/section/sub-section';
 import './dashboard-workers.scss';
 
 type Params = {

client/src/sections/error/error.tsx

@@ -1,4 +1,4 @@
-import Section from '../../components/section/section';
+import Section from 'components/section/section';
 
 export default function Error() {
 	return (

client/src/sections/presets/presets.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { useOutletContext } from 'react-router-dom';
-import { PrimaryOutletContextType } from '../../pages/primary/primary-context';
-import Section from '../../components/section/section';
-import UploadPreset from '../../components/overlays/upload-preset/upload-preset';
+import { PrimaryOutletContextType } from 'pages/primary/primary-context';
+import Section from 'components/section/section';
+import UploadPreset from 'components/overlays/upload-preset/upload-preset';
 import PresetsButtons from './sub-sections/presets-buttons';
 import PresetsList from './sub-sections/presets-list';
 import './presets.scss';

client/src/sections/presets/sub-sections/presets-buttons.tsx

@@ -1,6 +1,6 @@
-import { HandbrakePresetList } from '../../../../../types/preset';
-import ButtonInput from '../../../components/base/inputs/button/button-input';
-import SubSection from '../../../components/section/sub-section';
+import { HandbrakePresetList } from 'types/preset';
+import ButtonInput from 'components/base/inputs/button/button-input';
+import SubSection from 'components/section/sub-section';
 import './presets-buttons.scss';
 
 type Params = {

client/src/sections/presets/sub-sections/presets-list.tsx

@@ -1,6 +1,6 @@
-import { HandbrakePresetList } from '../../../../../types/preset';
-import ButtonInput from '../../../components/base/inputs/button/button-input';
-import SubSection from '../../../components/section/sub-section';
+import { HandbrakePresetList } from 'types/preset';
+import ButtonInput from 'components/base/inputs/button/button-input';
+import SubSection from 'components/section/sub-section';
 import './presets-list.scss';
 
 type Params = {

client/src/sections/queue/components/queue-job.tsx

@@ -1,6 +1,6 @@
-import { Job } from '../../../../../types/queue';
-import { TranscodeStage } from '../../../../../types/transcode';
-import ProgressBar from '../../../components/base/progress/progress-bar';
+import { Job } from 'types/queue';
+import { TranscodeStage } from 'types/transcode';
+import ProgressBar from 'components/base/progress/progress-bar';
 import QueueJobSection from './queue-job-section';
 import './queue-job.scss';
 

client/src/sections/queue/queue.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react';
 import { useOutletContext } from 'react-router-dom';
-import { PrimaryOutletContextType } from '../../pages/primary/primary-context';
-import Section from '../../components/section/section';
+import { PrimaryOutletContextType } from 'pages/primary/primary-context';
+import Section from 'components/section/section';
+import CreateJob from 'components/overlays/create-job/create-job';
 import QueueStatus from './sub-sections/queue-status';
 import QueueJobs from './sub-sections/queue-jobs';
-import CreateJob from '../../components/overlays/create-job/create-job';
 import './queue.scss';
 
 export default function QueueSection() {
@@ -62,7 +62,6 @@ export default function QueueSection() {
 			/>
 			{showCreateJob && (
 				<CreateJob
-					socket={socket}
 					onClose={() => {
 						setShowCreateJob(false);
 					}}

client/src/sections/queue/sub-sections/queue-jobs.tsx

@@ -1,7 +1,7 @@
-import { Queue } from '../../../../../types/queue';
-import ButtonInput from '../../../components/base/inputs/button/button-input';
+import { Queue } from 'types/queue';
+import ButtonInput from 'components/base/inputs/button/button-input';
+import SubSection from 'components/section/sub-section';
 import QueueJob from '../components/queue-job';
-import SubSection from '../../../components/section/sub-section';
 import './queue-jobs.scss';
 
 type Params = {

client/src/sections/queue/sub-sections/queue-status.tsx

@@ -1,7 +1,7 @@
-import SubSection from '../../../components/section/sub-section';
+import { QueueStatus as QueueStatusType } from 'types/queue';
+import SubSection from 'components/section/sub-section';
+import ButtonInput from 'components/base/inputs/button/button-input';
 import './queue-status.scss';
-import ButtonInput from '../../../components/base/inputs/button/button-input';
-import { QueueStatus as QueueStatusType } from '../../../../../types/queue';
 
 type Params = {
 	queueStatus: QueueStatusType;

client/src/sections/workers/sub-sections/workers-status.tsx

@@ -1,5 +1,5 @@
-import ProgressBar from '../../../components/base/progress/progress-bar';
-import SubSection from '../../../components/section/sub-section';
+import ProgressBar from 'components/base/progress/progress-bar';
+import SubSection from 'components/section/sub-section';
 import { WorkerInfo } from '../workers';
 import './workers-status.scss';
 

client/src/sections/workers/sub-sections/workers-summary.tsx

@@ -1,6 +1,6 @@
-import { Queue } from '../../../../../types/queue';
-import { TranscodeStage } from '../../../../../types/transcode';
-import SubSection from '../../../components/section/sub-section';
+import { Queue } from 'types/queue';
+import { TranscodeStage } from 'types/transcode';
+import SubSection from 'components/section/sub-section';
 import { WorkerInfo } from '../workers';
 
 import './workers-summary.scss';

client/src/sections/workers/workers.tsx

@@ -1,6 +1,6 @@
 import { useOutletContext } from 'react-router-dom';
-import { PrimaryOutletContextType } from '../../pages/primary/primary-context';
-import Section from '../../components/section/section';
+import { PrimaryOutletContextType } from 'pages/primary/primary-context';
+import Section from 'components/section/section';
 import WorkersSummary from './sub-sections/workers-summary';
 import WorkersStatus from './sub-sections/workers-status';
 import './workers.scss';

client/tsconfig.json

@@ -1,25 +1,32 @@
 {
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
+	"compilerOptions": {
+		"target": "ES2020",
+		"useDefineForClassFields": true,
+		"lib": ["ES2020", "DOM", "DOM.Iterable"],
+		"module": "ESNext",
+		"skipLibCheck": true,
 
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"noEmit": true,
+		"jsx": "react-jsx",
 
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+		/* Linting */
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true,
+
+		"paths": {
+			"components/*": ["./src/components/*"],
+			"pages/*": ["./src/pages/*"],
+			"sections/*": ["./src/sections/*"],
+			"types/*": ["../types/*"]
+		}
+	},
+	"include": ["src"],
+	"references": [{ "path": "./tsconfig.node.json" }]
 }

client/vite.config.mts

@@ -1,9 +1,10 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import tsconfigPaths from 'vite-tsconfig-paths';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-	plugins: [react()],
+	plugins: [react(), tsconfigPaths()],
 	server: {
 		host: '127.0.0.1',
 		port: process.env.CLIENT_PORT ? parseInt(process.env.CLIENT_PORT) : 5173,