feat: node.js subpath imports

.agents/tanstack-patterns.md

@@ -61,13 +61,13 @@ Server functions wrapped in `createServerFn` can be imported statically. Never u
 // Bad: dynamic import causes bundler issues
 const rolesQuery = useQuery({
   queryFn: async () => {
-    const { $listRoles } = await import("@/utils/roles.server");
+    const { $listRoles } = await import("#utils/roles.server");
     return $listRoles({ data: {} });
   },
 });
 
 // Good: static import
-import { $listRoles } from "@/utils/roles.server";
+import { $listRoles } from "#utils/roles.server";
 
 const rolesQuery = useQuery({
   queryFn: async () => $listRoles({ data: {} }),

components.json

@@ -13,11 +13,11 @@
   "iconLibrary": "lucide",
   "rtl": false,
   "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
+    "components": "#components",
+    "utils": "#lib/utils",
+    "ui": "#components/ui",
+    "lib": "#lib",
+    "hooks": "#hooks"
   },
   "menuColor": "default",
   "menuAccent": "subtle",

drizzle.config.ts

@@ -1,6 +1,6 @@
 import type { Config } from "drizzle-kit";
 
-import { env } from "@/env/server";
+import { env } from "#env/server";
 
 export default {
   out: "./drizzle",

package.json

@@ -2,6 +2,15 @@
   "name": "tanstarter",
   "private": true,
   "type": "module",
+  "imports": {
+    "#*": [
+      "./src/*",
+      "./src/*.ts",
+      "./src/*.tsx",
+      "./src/*/index.ts",
+      "./src/*/index.tsx"
+    ]
+  },
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",

src/components/_DELETE_ME_intro_page.tsx

@@ -6,10 +6,10 @@ import { Suspense } from "react";
 import { useState } from "react";
 import { toast } from "sonner";
 
-import { SignOutButton } from "@/components/sign-out-button";
-import { ThemeToggle } from "@/components/theme-toggle";
-import { Button } from "@/components/ui/button";
-import { useAuthSuspense } from "@/lib/auth/hooks";
+import { SignOutButton } from "#components/sign-out-button";
+import { ThemeToggle } from "#components/theme-toggle";
+import { Button } from "#components/ui/button";
+import { useAuthSuspense } from "#lib/auth/hooks";
 
 /**
  * This is the intro component for TanStarter, which you may delete after creating the project.

src/components/sign-in-social-button.tsx

@@ -1,8 +1,8 @@
 import { useMutation } from "@tanstack/react-query";
 import { toast } from "sonner";
 
-import { Button } from "@/components/ui/button";
-import { authClient } from "@/lib/auth/auth-client";
+import { Button } from "#components/ui/button";
+import { authClient } from "#lib/auth/auth-client";
 
 interface SocialLoginButtonProps {
   provider: string;

src/components/sign-out-button.tsx

@@ -1,9 +1,9 @@
 import { useQueryClient } from "@tanstack/react-query";
 import { useRouter } from "@tanstack/react-router";
 
-import { Button } from "@/components/ui/button";
-import { authClient } from "@/lib/auth/auth-client";
-import { authQueryOptions } from "@/lib/auth/queries";
+import { Button } from "#components/ui/button";
+import { authClient } from "#lib/auth/auth-client";
+import { authQueryOptions } from "#lib/auth/queries";
 
 export function SignOutButton() {
   const queryClient = useQueryClient();

src/components/theme-toggle.tsx

@@ -1,13 +1,13 @@
 import { SunIcon, MoonIcon } from "lucide-react";
 
-import { useTheme } from "@/components/theme-provider";
-import { Button } from "@/components/ui/button";
+import { useTheme } from "#components/theme-provider";
+import { Button } from "#components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+} from "#components/ui/dropdown-menu";
 
 export function ThemeToggle() {
   const { theme, setTheme } = useTheme();

src/components/ui/button.tsx

@@ -1,7 +1,7 @@
 import { Button as ButtonPrimitive } from "@base-ui/react/button";
 import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils";
+import { cn } from "#lib/utils";
 
 const buttonVariants = cva(
   "group/button inline-flex shrink-0 items-center justify-center rounded-4xl border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",

src/components/ui/dropdown-menu.tsx

@@ -2,7 +2,7 @@ import { Menu as MenuPrimitive } from "@base-ui/react/menu";
 import { ChevronRightIcon, CheckIcon } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "#lib/utils";
 
 function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {
   return <MenuPrimitive.Root data-slot="dropdown-menu" {...props} />;

src/components/ui/input.tsx

@@ -1,7 +1,7 @@
 import { Input as InputPrimitive } from "@base-ui/react/input";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "#lib/utils";
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (

src/components/ui/label.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+import { cn } from "#lib/utils";
 
 function Label({ className, ...props }: React.ComponentProps<"label">) {
   return (

src/components/ui/sonner.tsx

@@ -9,7 +9,7 @@ import {
 } from "lucide-react";
 import { Toaster as Sonner, type ToasterProps } from "sonner";
 
-import { useTheme } from "@/components/theme-provider";
+import { useTheme } from "#components/theme-provider";
 
 const Toaster = ({ ...props }: ToasterProps) => {
   const { theme } = useTheme();

src/lib/auth/auth-client.ts

@@ -1,6 +1,6 @@
 import { createAuthClient } from "better-auth/react";
 
-import { env } from "@/env/client";
+import { env } from "#env/client";
 
 /**
  * https://better-auth.com/docs/concepts/client

src/lib/auth/auth.ts

@@ -3,9 +3,9 @@ import { drizzleAdapter } from "@better-auth/drizzle-adapter";
 import { betterAuth } from "better-auth/minimal";
 import { tanstackStartCookies } from "better-auth/tanstack-start";
 
-import { env } from "@/env/server";
-import { db } from "@/lib/db";
-import * as schema from "@/lib/db/schema";
+import { env } from "#env/server";
+import { db } from "#lib/db";
+import * as schema from "#lib/db/schema";
 
 export const auth = betterAuth({
   baseURL: env.VITE_BASE_URL,

src/lib/auth/functions.ts

@@ -1,7 +1,7 @@
 import { createServerFn, createServerOnlyFn } from "@tanstack/react-start";
 import { getRequest, setResponseHeader } from "@tanstack/react-start/server";
 
-import { auth } from "@/lib/auth/auth";
+import { auth } from "#lib/auth/auth";
 
 /**
  * This server function is meant to be called via authQueryOptions() in queries.ts,

src/lib/auth/middleware.ts

@@ -1,7 +1,7 @@
 import { createMiddleware } from "@tanstack/react-start";
 import { setResponseStatus } from "@tanstack/react-start/server";
 
-import { _getUser } from "@/lib/auth/functions";
+import { _getUser } from "#lib/auth/functions";
 
 // https://tanstack.com/start/latest/docs/framework/react/guide/middleware
 

src/lib/db/index.ts

@@ -2,8 +2,8 @@ import "@tanstack/react-start/server-only";
 import { drizzle } from "drizzle-orm/postgres-js";
 import postgres from "postgres";
 
-import { env } from "@/env/server";
-import * as schema from "@/lib/db/schema";
+import { env } from "#env/server";
+import * as schema from "#lib/db/schema";
 
 const client = postgres(env.DATABASE_URL);
 

src/router.tsx

@@ -2,8 +2,8 @@ import { QueryClient } from "@tanstack/react-query";
 import { createRouter } from "@tanstack/react-router";
 import { setupRouterSsrQueryIntegration } from "@tanstack/react-router-ssr-query";
 
-import { DefaultCatchBoundary } from "@/components/default-catch-boundary";
-import { DefaultNotFound } from "@/components/default-not-found";
+import { DefaultCatchBoundary } from "#components/default-catch-boundary";
+import { DefaultNotFound } from "#components/default-not-found";
 
 import { routeTree } from "./routeTree.gen";
 

src/routes/__root.tsx

@@ -5,11 +5,11 @@ import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
 import { createRootRouteWithContext, HeadContent, Scripts } from "@tanstack/react-router";
 import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
 
-import { ThemeProvider } from "@/components/theme-provider";
-import { Toaster } from "@/components/ui/sonner";
-import type { AuthQueryResult } from "@/lib/auth/queries";
+import { ThemeProvider } from "#components/theme-provider";
+import { Toaster } from "#components/ui/sonner";
+import type { AuthQueryResult } from "#lib/auth/queries";
 
-import appCss from "@/styles.css?url";
+import appCss from "#styles.css?url";
 
 interface MyRouterContext {
   queryClient: QueryClient;

src/routes/_auth/app/index.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from "@tanstack/react-router";
 
-import { useAuthSuspense } from "@/lib/auth/hooks";
+import { useAuthSuspense } from "#lib/auth/hooks";
 
 export const Route = createFileRoute("/_auth/app/")({
   component: AppIndex,

src/routes/_auth/app/route.tsx

@@ -1,8 +1,8 @@
 import { createFileRoute, Link, Outlet } from "@tanstack/react-router";
 
-import { SignOutButton } from "@/components/sign-out-button";
-import { ThemeToggle } from "@/components/theme-toggle";
-import { Button } from "@/components/ui/button";
+import { SignOutButton } from "#components/sign-out-button";
+import { ThemeToggle } from "#components/theme-toggle";
+import { Button } from "#components/ui/button";
 
 export const Route = createFileRoute("/_auth/app")({
   component: AppLayout,

src/routes/_auth/route.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
 
-import { authQueryOptions } from "@/lib/auth/queries";
+import { authQueryOptions } from "#lib/auth/queries";
 
 /**
  * This is the _auth layout, which enables 'protected routes'

src/routes/_guest/login.tsx

@@ -4,11 +4,11 @@ import { createFileRoute, Link } from "@tanstack/react-router";
 import { GalleryVerticalEndIcon, LoaderCircleIcon } from "lucide-react";
 import { toast } from "sonner";
 
-import { SignInSocialButton } from "@/components/sign-in-social-button";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { authClient } from "@/lib/auth/auth-client";
+import { SignInSocialButton } from "#components/sign-in-social-button";
+import { Button } from "#components/ui/button";
+import { Input } from "#components/ui/input";
+import { Label } from "#components/ui/label";
+import { authClient } from "#lib/auth/auth-client";
 
 export const Route = createFileRoute("/_guest/login")({
   component: LoginForm,

src/routes/_guest/route.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
 
-import { authQueryOptions } from "@/lib/auth/queries";
+import { authQueryOptions } from "#lib/auth/queries";
 
 export const Route = createFileRoute("/_guest")({
   component: RouteComponent,

src/routes/_guest/signup.tsx

@@ -4,12 +4,12 @@ import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
 import { GalleryVerticalEndIcon, LoaderCircleIcon } from "lucide-react";
 import { toast } from "sonner";
 
-import { SignInSocialButton } from "@/components/sign-in-social-button";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { authClient } from "@/lib/auth/auth-client";
-import { authQueryOptions } from "@/lib/auth/queries";
+import { SignInSocialButton } from "#components/sign-in-social-button";
+import { Button } from "#components/ui/button";
+import { Input } from "#components/ui/input";
+import { Label } from "#components/ui/label";
+import { authClient } from "#lib/auth/auth-client";
+import { authQueryOptions } from "#lib/auth/queries";
 
 export const Route = createFileRoute("/_guest/signup")({
   component: SignupForm,

src/routes/api/auth/$.ts

@@ -1,6 +1,6 @@
 import { createFileRoute } from "@tanstack/react-router";
 
-import { auth } from "@/lib/auth/auth";
+import { auth } from "#lib/auth/auth";
 
 export const Route = createFileRoute("/api/auth/$")({
   server: {

src/routes/index.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute } from "@tanstack/react-router";
 
-import { IntroPageDeleteMe } from "@/components/_DELETE_ME_intro_page";
+import { IntroPageDeleteMe } from "#components/_DELETE_ME_intro_page";
 
 export const Route = createFileRoute("/")({
   component: HomePage,

tsconfig.json

@@ -13,9 +13,7 @@
     "target": "ES2022",
     "allowJs": true,
     "forceConsistentCasingInFileNames": true,
-    "paths": {
-      "@/*": ["./src/*"]
-    },
+    "resolvePackageJsonImports": true,
     "noEmit": true,
     "strictNullChecks": true,
     "types": ["node", "vite/client"]

vite.config.ts

@@ -7,9 +7,6 @@ import { nitro } from "nitro/vite";
 import { defineConfig } from "vite";
 
 export default defineConfig({
-  resolve: {
-    tsconfigPaths: true,
-  },
   server: {
     port: 3000,
   },