chore: Use @/* as an alias for importing in-package files (#41607)

* Remove extra file.

* Remove unneeded tsconfig.jsons.

* Add @/* alias for importing in-package files to all apps.

* Remove baseUrl from all apps except studio (it'll require changes in almost all files).

* Fix baseUrl issues in docs, ui-library and design-system.

* Fix the typecheck for cms app. Fix all baseUrl errors in the cms app.

* Add deprecated flag to baseUrl in www.

apps/cms/package.json

@@ -17,7 +17,7 @@
     "payload": "cross-env NODE_OPTIONS=--no-deprecation payload",
     "start": "cross-env NODE_OPTIONS=--no-deprecation next start",
     "vercel-build": "pnpm migrate && pnpm build",
-    "typecheck_IGNORED": "tsc --noEmit"
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@payloadcms/admin-bar": "^3.52.0",

apps/cms/src/blocks/Banner/Component.tsx

@@ -1,4 +1,4 @@
-import type { BannerBlock as BannerBlockProps } from 'src/payload-types'
+import type { BannerBlock as BannerBlockProps } from '@/payload-types'
 
 import { cn } from '@/utilities/ui'
 import React from 'react'

apps/cms/src/blocks/Quote/Component.tsx

@@ -1,4 +1,4 @@
-import type { QuoteBlock as QuoteBlockProps } from 'src/payload-types'
+import type { QuoteBlock as QuoteBlockProps } from '@/payload-types'
 
 import React from 'react'
 

apps/cms/src/blocks/YouTube/Component.tsx

@@ -1,4 +1,4 @@
-import type { YouTubeBlock as YouTubeBlockProps } from 'src/payload-types'
+import type { YouTubeBlock as YouTubeBlockProps } from '@/payload-types'
 
 import { cn } from '@/utilities/ui'
 import React from 'react'

apps/cms/src/utilities/getDocument.ts

@@ -1,4 +1,4 @@
-import type { Config } from 'src/payload-types'
+import type { Config } from '@/payload-types'
 
 import configPromise from '@payload-config'
 import { getPayload } from 'payload'

apps/cms/src/utilities/getGlobals.ts

@@ -1,4 +1,4 @@
-import type { Config } from 'src/payload-types'
+import type { Config } from '@/payload-types'
 
 import configPromise from '@payload-config'
 import { getPayload } from 'payload'

apps/cms/tsconfig.json

@@ -3,7 +3,6 @@
     "strict": true,
     "noUncheckedIndexedAccess": true,
     "noImplicitOverride": true,
-    "baseUrl": ".",
     "esModuleInterop": true,
     "target": "ES2022",
     "lib": ["DOM", "DOM.Iterable", "ES2022"],

apps/design-system/config/docs.ts

@@ -1,4 +1,4 @@
-import { MainNavItem, SidebarNavItem } from 'types/nav'
+import { MainNavItem, SidebarNavItem } from '@/types/nav'
 
 interface DocsConfig {
   mainNav?: MainNavItem[]

apps/design-system/contentlayer.config.js

@@ -110,6 +110,7 @@ export const Doc = defineDocumentType(() => ({
 
 export default makeSource({
   contentDirPath: './content',
+  disableImportAliasWarning: true,
   documentTypes: [Doc],
   mdx: {
     remarkPlugins: [remarkGfm, codeImport],

apps/design-system/lib/rehype-component.ts

@@ -1,6 +1,6 @@
 import fs from 'fs'
 import path from 'path'
-import { UnistNode, UnistTree } from 'types/unist'
+import { UnistNode, UnistTree } from '@/types/unist'
 import { u } from 'unist-builder'
 import { visit } from 'unist-util-visit'
 

apps/design-system/lib/rehype-npm-command.ts

@@ -1,4 +1,4 @@
-import { UnistNode, UnistTree } from 'types/unist'
+import { UnistNode, UnistTree } from '@/types/unist'
 import { visit } from 'unist-util-visit'
 
 export function rehypeNpmCommand() {

apps/design-system/tsconfig.json

@@ -16,7 +16,6 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "baseUrl": ".",
     "paths": {
       "@/*": ["./*"],
       "@ui/*": ["./../../packages/ui/src/*"], // handle ui package paths

apps/docs/features/command/DocsCommandProvider.tsx

@@ -3,7 +3,7 @@
 import type { PropsWithChildren } from 'react'
 
 import { CommandProvider } from 'ui-patterns/CommandMenu'
-import { useDocsCommandMenuTelemetry } from 'hooks/useDocsCommandMenuTelemetry'
+import { useDocsCommandMenuTelemetry } from '@/hooks/useDocsCommandMenuTelemetry'
 
 export function DocsCommandProvider({ children }: PropsWithChildren) {
   const { onTelemetry } = useDocsCommandMenuTelemetry()

apps/docs/generator/tsconfig.json

@@ -1,13 +0,0 @@
-// generator files need their own tsconfig.json because they don't like "module": "esnext" setting that nextjs requires in the main tsconfig
-{
-  "compilerOptions": {
-    "incremental": true,
-    "noImplicitAny": false,
-    "baseUrl": ".",
-    "paths": {
-      "~/*": ["./*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
-}

apps/docs/hooks/useDocsCommandMenuTelemetry.ts

@@ -7,7 +7,7 @@ import type {
   CommandMenuCommandClickedEvent,
   CommandMenuSearchSubmittedEvent,
 } from 'common/telemetry-constants'
-import { useSendTelemetryEvent } from 'lib/telemetry'
+import { useSendTelemetryEvent } from '@/lib/telemetry'
 
 export function useDocsCommandMenuTelemetry() {
   const sendTelemetryEvent = useSendTelemetryEvent()

apps/docs/hooks/useFlag.ts

@@ -1,5 +1,5 @@
 import { useContext } from 'react'
-import FlagContext from 'components/Flag/FlagContext'
+import FlagContext from '@/components/Flag/FlagContext'
 
 export function useFlag(name: string) {
   const store: any = useContext(FlagContext)

apps/docs/internals/tsconfig.json

@@ -1,15 +0,0 @@
-// generator files need their own tsconfig.json because they don't like "module": "esnext" setting that nextjs requires in the main tsconfig
-{
-  "compilerOptions": {
-    "incremental": true,
-    "noImplicitAny": false,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "baseUrl": ".",
-    "paths": {
-      "~/*": ["./*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
-}

apps/docs/scripts/tsconfig.json

@@ -1,17 +0,0 @@
-// generator files need their own tsconfig.json because they don't like "module": "esnext" setting that nextjs requires in the main tsconfig
-{
-  "compilerOptions": {
-    "module": "NodeNext",
-    "moduleResolution": "NodeNext",
-    "incremental": true,
-    "noImplicitAny": false,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "baseUrl": ".",
-    "paths": {
-      "~/*": ["./*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
-}

apps/docs/tsconfig.json

@@ -2,9 +2,10 @@
   "compilerOptions": {
     "incremental": true,
     "noImplicitAny": false,
-    "baseUrl": ".",
     "paths": {
+      // @deprecated: use @/ instead of ~/
       "~/*": ["./*"],
+      "@/*": ["./*"],
       "@ui/*": ["./../../packages/ui/src/*"]
     },
     "target": "ES2021",

apps/studio/tsconfig.json

@@ -13,10 +13,12 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "react-jsx",
+    // @deprecated: use @/ instead of importing from root
     "baseUrl": ".",
     "downlevelIteration": true,
     "incremental": true,
     "paths": {
+      "@/*": ["./*"],
       "@ui/*": ["./../../packages/ui/src/*"] // handle ui package paths
     },
     "useDefineForClassFields": true,

apps/ui-library/components/command-copy-button.tsx

@@ -3,7 +3,7 @@
 import { Check, Copy } from 'lucide-react'
 import { useEffect, useState } from 'react'
 
-import { useSendTelemetryEvent } from 'lib/telemetry'
+import { useSendTelemetryEvent } from '@/lib/telemetry'
 import { Button_Shadcn_ } from 'ui'
 
 export function CommandCopyButton({ command }: { command: string }) {

apps/ui-library/config/docs.ts

@@ -1,4 +1,4 @@
-import { SidebarNavGroup } from 'types/nav'
+import { SidebarNavGroup } from '@/types/nav'
 
 export const gettingStarted: SidebarNavGroup = {
   title: 'Getting Started',

apps/ui-library/contentlayer.config.js

@@ -104,6 +104,7 @@ export const Doc = defineDocumentType(() => ({
 
 export default makeSource({
   contentDirPath: './content',
+  disableImportAliasWarning: true,
   documentTypes: [Doc],
   mdx: {
     remarkPlugins: [remarkGfm, codeImport],

apps/ui-library/lib/telemetry.ts

@@ -5,7 +5,7 @@ import { useCallback } from 'react'
 
 import { sendTelemetryEvent } from 'common'
 import { TelemetryEvent } from 'common/telemetry-constants'
-import { API_URL } from 'lib/constants'
+import { API_URL } from '@/lib/constants'
 
 export function useSendTelemetryEvent() {
   const pathname = usePathname()

apps/ui-library/tsconfig.json

@@ -16,7 +16,6 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "baseUrl": ".",
     "paths": {
       "@/*": ["./*"],
       "@ui/*": ["./../../packages/ui/src/*"], // handle ui package paths

apps/www/tsconfig.json

@@ -1,9 +1,12 @@
 {
   "compilerOptions": {
+    // @deprecated: use @/ instead of importing from root
     "baseUrl": ".",
     "paths": {
       "contentlayer/generated": ["./.contentlayer/generated"],
+      // ~/ is deprecated, use @/ instead
       "~/*": ["./*"],
+      "@/*": ["./*"],
       "@ui/*": ["./../../packages/ui/src/*"]
     },
     "downlevelIteration": true,

blocks/vue/tsconfig.json

@@ -16,7 +16,6 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
-    "baseUrl": ".",
     "paths": {
       "@/*": ["./*"]
     },