feat: node.js subpath imports

[dotnize]

Following #77, since we already use #/* for the tsconfig path alias.

Switch from TypeScript path aliases to standard built-in Node.js subpath imports, which is now supported in the shadcn CLI.

This implementation is a bit different/hacky though, and may not be the standard or proper usage, so I'm not yet sure if we should proceed with this exact implementation.

// package.json
{
  "imports": {
    "#/*": [
      "./src/*",
      "./src/*.ts",
      "./src/*.tsx",
      "./src/*/index.ts",
      "./src/*/index.tsx"
    ]
  },
}

This enables "extension guessing", allowing a similar level of DX shortcuts as the TypeScript path aliases we were previously using, without having to specify the extensions or redefine aliases for every folder.

import { env } from "#/env/server"; // - src/env/server.ts
import * as schema from "#/lib/db/schema"; // - src/lib/db/schema/index.ts
import { Button } from "#/components/ui/button"; // - src/components/ui/button.tsx

references:

• https://ui.shadcn.com/docs/package-imports
• https://nodejs.org/api/packages.html#subpath-imports
• module: allow subpath imports that start with #/ nodejs/node#60864
• https://www.typescriptlang.org/docs/handbook/release-notes/typescript-6-0.html#subpath-imports-starting-with-

discussions about this hacky solution:

• Subpath imports with "imports" field in CommonJS does not try to resolve with extensions nodejs/node#51492
• Subpath imports only work for first element in array vitejs/vite#16153

Alternative paths

1. Use the recommended and supported standard that explicitly requires file extensions in imports. Explicit is better than implicit.

   {
     "imports": {
       "#/*": "./src/*"
     },
   }

   import { env } from "#/env/server.js"; // - src/env/server.ts
   import * as schema from "#/lib/db/schema/index.js"; // - src/lib/db/schema/index.ts
   import { Button } from "#/components/ui/button.jsx"; // - src/components/ui/button.tsx

2. Use the setup from shadcn docs. Pre-defined directories and extensions in package.json: .tsx for /components, and .ts only for the rest.

   {
     "imports": {
       "#components/*": "./src/components/*.tsx",
       "#lib/*": "./src/lib/*.ts",
       "#env/*": "./src/hooks/*.ts"
     }
   }

   import { env } from "#env/server"; // - src/env/server.ts
   import * as schema from "#lib/db/schema/index"; // - src/lib/db/schema/index.ts
   import { Button } from "#components/ui/button"; // - src/components/ui/button.tsx

Feedback is welcome.

[netlify]

✅ Deploy Preview for mugnavo-tanstarter ready!

Name	Link
🔨 Latest commit	716b420
🔍 Latest deploy log	https://app.netlify.com/projects/mugnavo-tanstarter/deploys/6a47df9bc557030008c264bd
😎 Deploy Preview	https://deploy-preview-76--mugnavo-tanstarter.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.