chore: introduce package-level path aliases

Author: G07cha

packages/nextjs-plugin/tsconfig.json

@@ -1,6 +1,7 @@
 {
 	"extends": ["@tsconfig/node24/tsconfig.json"],
 	"compilerOptions": {
+		"baseUrl": ".",
 		"outDir": "./dist",
 		"declaration": true,
 		"declarationMap": true,

packages/web-extension/entrypoints/background.ts

@@ -6,8 +6,8 @@ import {
 	isDetectionMessage,
 	isDevToolsQueryMessage,
 	sendMessageToTab,
-} from "../utils/messaging";
-import type { NextjsDetectionResult } from "../utils/nextjs-detector";
+} from "~/utils/messaging";
+import type { NextjsDetectionResult } from "~/utils/nextjs-detector";
 
 interface TabState {
 	detectionResult: NextjsDetectionResult | null;

packages/web-extension/entrypoints/content.ts

@@ -1,7 +1,7 @@
 import debounce from "debounce";
 import { defineContentScript } from "wxt/utils/define-content-script";
-import { ExtensionMessageType, sendMessage } from "../utils/messaging";
-import { detectNextjs } from "../utils/nextjs-detector";
+import { ExtensionMessageType, sendMessage } from "~/utils/messaging";
+import { detectNextjs } from "~/utils/nextjs-detector";
 
 export default defineContentScript({
 	matches: ["<all_urls>"],

packages/web-extension/entrypoints/devtools-panel/App.tsx

@@ -5,8 +5,8 @@ import {
 	filterSpansWithoutChildren,
 	mapServerEventToSpanTree,
 	type SpanTree,
-} from "../../utils/spans";
-import { useWS } from "../../utils/ws";
+} from "~/utils/spans";
+import { useWS } from "~/utils/ws";
 import { ConnectionBanner } from "./components/connection-banner";
 import SidePanel from "./components/panel";
 import HttpRequestsTable, {

packages/web-extension/entrypoints/devtools-panel/components/card.tsx

@@ -1,4 +1,4 @@
-import { cn } from "../../../utils/style";
+import { cn } from "~/utils/style";
 
 export interface CardProps {
 	children: React.ReactNode;

packages/web-extension/entrypoints/devtools-panel/components/connection-banner.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { ConnectionStatus } from "../../../utils/ws";
+import { ConnectionStatus } from "~/utils/ws";
 
 export function ConnectionBanner({ status }: { status: ConnectionStatus }) {
 	const colorClass = useMemo(() => {

packages/web-extension/entrypoints/devtools-panel/components/panel.tsx

@@ -8,9 +8,9 @@ import {
 	useState,
 } from "react";
 import type { RequestSpan, ResponseSpan, Span } from "@/packages/types";
-import { cn } from "../../../utils/style";
-import { formatDuration } from "../../../utils/time";
-import { assertType } from "../../../utils/type";
+import { cn } from "~/utils/style";
+import { formatDuration } from "~/utils/time";
+import { assertType } from "~/utils/type";
 import { Card } from "./card";
 import { CodeBlock } from "./code-block";
 import { CollapsibleSection } from "./collapsible-section";

packages/web-extension/entrypoints/devtools-panel/components/table.tsx

@@ -1,8 +1,8 @@
 import { useCallback, useMemo, useRef, useState } from "react";
 import type { RequestSpan, ResponseSpan, Span } from "@/packages/types";
-import type { SpanTree } from "../../../utils/spans";
-import { cn } from "../../../utils/style";
-import { formatDuration } from "../../../utils/time";
+import type { SpanTree } from "~/utils/spans";
+import { cn } from "~/utils/style";
+import { formatDuration } from "~/utils/time";
 
 type SpanNode = {
 	// Server span data (from span-start/span-end events)
@@ -158,11 +158,8 @@ export function transformSpanTreeToTableData(
 		}
 	}
 
-	// Convert SpanTree (Record) to array of nodes for processing
-	const nodes = Object.values(spanTree);
-
 	// Find root nodes (nodes without parents or with parents not in the current tree)
-	const rootNodes = nodes.filter((node) => {
+	const rootNodes = Object.values(spanTree).filter((node) => {
 		const parentId = node.parentSpanId;
 		return !parentId || !spanTree[parentId];
 	});

packages/web-extension/entrypoints/devtools-panel/components/waterfall-chart.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
-import type { SpanNode, SpanTree } from "../../../utils/spans";
-import { cn } from "../../../utils/style";
-import { formatDuration } from "../../../utils/time";
+import type { SpanNode, SpanTree } from "~/utils/spans";
+import { cn } from "~/utils/style";
+import { formatDuration } from "~/utils/time";
 
 interface TimingData {
 	id: string;

packages/web-extension/entrypoints/devtools-panel/main.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
-import "../../assets/tailwind.css";
+import "~/assets/tailwind.css";
 
 const rootElement = document.getElementById("root");
 if (!rootElement) throw new Error("Failed to find the root element");