feat(web-ts-results): add vite-tsconfig-paths

nakrovati · nakrovati · commit c0ef7b56d4f6 · 2023-10-08T00:45:01.000+04:00
diff --git a/webdriver-ts-results/package-lock.json b/webdriver-ts-results/package-lock.json
diff --git a/webdriver-ts-results/package.json b/webdriver-ts-results/package.json
@@ -29,6 +29,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "typescript": "^5.2.2",
     "vite": "^4.4.9",
-    "vite-plugin-singlefile": "^0.13.5"
+    "vite-plugin-singlefile": "^0.13.5",
+    "vite-tsconfig-paths": "^4.2.1"
   }
 }
diff --git a/webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTable.tsx b/webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTable.tsx
@@ -5,7 +5,7 @@ import {
   Framework,
   ResultLookup,
   CpuDurationMode,
-} from "../../Common";
+} from "@/Common";
 import BoxPlotTableRows from "./BoxPlotTableRows";
 
 interface Props {
diff --git a/webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTableRow.tsx b/webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTableRow.tsx
@@ -1,10 +1,5 @@
 import React from "react";
-import {
-  Benchmark,
-  Framework,
-  ResultLookup,
-  CpuDurationMode,
-} from "../../Common";
+import { Benchmark, Framework, ResultLookup, CpuDurationMode } from "@/Common";
 import BoxPlotTableChart from "./BoxPlotTableChart";
 
 interface Props {
diff --git a/webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTableRows.tsx b/webdriver-ts-results/src/components/BoxPlotTable/BoxPlotTableRows.tsx
@@ -1,10 +1,5 @@
 import React from "react";
-import {
-  Benchmark,
-  Framework,
-  ResultLookup,
-  CpuDurationMode,
-} from "../../Common";
+import { Benchmark, Framework, ResultLookup, CpuDurationMode } from "@/Common";
 import BoxPlotTableRow from "./BoxPlotTableRow";
 
 interface Props {
diff --git a/webdriver-ts-results/src/components/selection/BenchmarkSelector/BenchmarkSelectorCategory.tsx b/webdriver-ts-results/src/components/selection/BenchmarkSelector/BenchmarkSelectorCategory.tsx
@@ -1,7 +1,7 @@
 import React from "react";
-import { BenchmarkType } from "../../../Common";
-import { useRootStore } from "../../../reducer";
-import SelectorContentContainer from "../SelectorContentContainer";
+import { BenchmarkType } from "@/Common";
+import { useRootStore } from "@/reducer";
+import SelectorContentContainer from "@components/selection/SelectorContentContainer";
 import BenchmarkSelectorList from "./BenchmarkSelectorList";
 
 interface Props {
diff --git a/webdriver-ts-results/src/components/selection/BenchmarkSelector/BenchmarkSelectorList.tsx b/webdriver-ts-results/src/components/selection/BenchmarkSelector/BenchmarkSelectorList.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import type { Benchmark } from "../../../Common";
+import type { Benchmark } from "@/Common";
 
 interface Props {
   benchmarks: Array<Benchmark>;
diff --git a/webdriver-ts-results/src/components/selection/BenchmarkSelector/index.tsx b/webdriver-ts-results/src/components/selection/BenchmarkSelector/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { BenchmarkType } from "../../../Common";
-import Dropdown from "../../ui/Dropdown";
+import { BenchmarkType } from "@/Common";
+import Dropdown from "@components/ui/Dropdown";
 import BenchmarkSelectorCategory from "./BenchmarkSelectorCategory";
 
 const BenchmarkSelector = () => {
diff --git a/webdriver-ts-results/src/components/selection/CopyPasteSelection.tsx b/webdriver-ts-results/src/components/selection/CopyPasteSelection.tsx
@@ -1,9 +1,9 @@
 import React from "react";
 import { useCallback } from "react";
 import { useEffect } from "react";
-import { useRootStore } from "../../reducer";
-import PasteIcon from "../../assets/icons/PasteIcon";
-import CopyIcon from "../../assets/icons/CopyIcon";
+import { useRootStore } from "@/reducer";
+import PasteIcon from "@/assets/icons/PasteIcon";
+import CopyIcon from "@/assets/icons/CopyIcon";
 import "./CopyPasteSelection.css";
 
 const CopyPasteSelection = () => {
diff --git a/webdriver-ts-results/src/components/selection/FrameworkSelector/FrameworkSelectorCategory.tsx b/webdriver-ts-results/src/components/selection/FrameworkSelector/FrameworkSelectorCategory.tsx
@@ -1,7 +1,7 @@
 import React from "react";
-import SelectorContentContainer from "../SelectorContentContainer";
-import { FrameworkType } from "../../../Common";
-import { useRootStore } from "../../../reducer";
+import SelectorContentContainer from "@components/selection/SelectorContentContainer";
+import { FrameworkType } from "@/Common";
+import { useRootStore } from "@/reducer";
 import FrameworkSelectorList from "./FrameworkSelectorList";
 
 interface Props {
diff --git a/webdriver-ts-results/src/components/selection/FrameworkSelector/FrameworkSelectorList.tsx b/webdriver-ts-results/src/components/selection/FrameworkSelector/FrameworkSelectorList.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Framework } from "../../../Common";
+import { Framework } from "@/Common";
 
 interface Props {
   frameworks: Array<Framework>;
diff --git a/webdriver-ts-results/src/components/selection/FrameworkSelector/index.tsx b/webdriver-ts-results/src/components/selection/FrameworkSelector/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { FrameworkType } from "../../../Common";
-import Dropdown from "../../ui/Dropdown";
+import { FrameworkType } from "@/Common";
+import Dropdown from "@components/ui/Dropdown";
 import FrameworkSelectorCategory from "./FrameworkSelectorCategory";
 
 const FrameworkSelector = () => {
diff --git a/webdriver-ts-results/src/components/selection/ModeSelectionPanel/DisplayModeSelector.tsx b/webdriver-ts-results/src/components/selection/ModeSelectionPanel/DisplayModeSelector.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { DisplayMode } from "../../../Common";
+import { DisplayMode } from "@/Common";
 
 interface Props {
   displayMode: DisplayMode;
diff --git a/webdriver-ts-results/src/components/selection/ModeSelectionPanel/DurationModeSelector.tsx b/webdriver-ts-results/src/components/selection/ModeSelectionPanel/DurationModeSelector.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { CpuDurationMode } from "../../../Common";
+import { CpuDurationMode } from "@/Common";
 
 interface Props {
   cpuDurationMode: CpuDurationMode;
diff --git a/webdriver-ts-results/src/components/selection/ModeSelectionPanel/index.tsx b/webdriver-ts-results/src/components/selection/ModeSelectionPanel/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { useRootStore } from "../../../reducer";
+import { useRootStore } from "@/reducer";
 import DisplayModeSelector from "./DisplayModeSelector";
 import DurationModeSelector from "./DurationModeSelector";
 import "./ModeSelectionPanel.css";
diff --git a/webdriver-ts-results/tsconfig.json b/webdriver-ts-results/tsconfig.json
@@ -11,7 +11,12 @@
     "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@components/*": ["./src/components/*"],
+    }
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]
diff --git a/webdriver-ts-results/vite.config.ts b/webdriver-ts-results/vite.config.ts
@@ -1,5 +1,6 @@
 import { defineConfig } from "vite";
 import { viteSingleFile } from "vite-plugin-singlefile";
+import tsconfigPaths from "vite-tsconfig-paths";
 import react from "@vitejs/plugin-react";
 
 const needSinglefile = !!process.env.SINGLEFILE;
@@ -19,5 +20,5 @@ export default defineConfig({
       },
     },
   },
-  plugins: [react(), needSinglefile && viteSingleFile()],
+  plugins: [react(), tsconfigPaths(), needSinglefile && viteSingleFile()],
 });

Original file line number	Diff line number	Diff line change
`@@ -29,6 +29,7 @@`
`29`	`29`	`"eslint-plugin-react-hooks": "^4.6.0",`
`30`	`30`	`"typescript": "^5.2.2",`
`31`	`31`	`"vite": "^4.4.9",`
`32`		`- "vite-plugin-singlefile": "^0.13.5"`
	`32`	`+ "vite-plugin-singlefile": "^0.13.5",`
	`33`	`+ "vite-tsconfig-paths": "^4.2.1"`
`33`	`34`	`}`
`34`	`35`	`}`