chore(clerk-js): Add support for import alias (#6030)

Author: dstaley

.changeset/rich-candies-wish.md

@@ -0,0 +1,2 @@
+---
+---

packages/clerk-js/jest.config.js

@@ -37,6 +37,9 @@ const config = {
   // ],
   transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\](?!(@formkit/auto-animate/react)).+\\.(js|jsx|mjs|cjs|ts|tsx)$'],
   moduleDirectories: ['node_modules', '<rootDir>/src'],
+  moduleNameMapper: {
+    '@/(.*)': '<rootDir>/src/$1',
+  },
   transform: {
     '^.+\\.m?tsx?$': ['ts-jest', { tsconfig: 'tsconfig.test.json', diagnostics: false }],
     // '^.+\\.m?tsx?$': ['@swc/jest'],

packages/clerk-js/rspack.config.js

@@ -41,6 +41,9 @@ const common = ({ mode, variant, disableRHC = false }) => {
   return {
     mode,
     resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './src'),
+      },
       // Attempt to resolve these extensions in order
       // @see https://webpack.js.org/configuration/resolve/#resolveextensions
       extensions: ['.ts', '.tsx', '.mjs', '.js', '.jsx'],

packages/clerk-js/src/ui/components/SignIn/SignIn.tsx

@@ -2,21 +2,22 @@ import { useClerk } from '@clerk/shared/react';
 import type { SignInModalProps, SignInProps } from '@clerk/types';
 import React from 'react';
 
-import { SessionTasks as LazySessionTasks } from '../../../ui/lazyModules/components';
-import { normalizeRoutingOptions } from '../../../utils/normalizeRoutingOptions';
-import { SignInEmailLinkFlowComplete, SignUpEmailLinkFlowComplete } from '../../common/EmailLinkCompleteFlowCard';
+import { SignInEmailLinkFlowComplete, SignUpEmailLinkFlowComplete } from '@/ui/common/EmailLinkCompleteFlowCard';
 import {
   SignInContext,
   SignUpContext,
   useSignInContext,
   useSignUpContext,
   withCoreSessionSwitchGuard,
-} from '../../contexts';
-import { Flow } from '../../customizables';
-import { useFetch } from '../../hooks';
-import { usePreloadTasks } from '../../hooks/usePreloadTasks';
-import { Route, Switch, useRouter, VIRTUAL_ROUTER_BASE_PATH } from '../../router';
-import type { SignUpCtx } from '../../types';
+} from '@/ui/contexts';
+import { Flow } from '@/ui/customizables';
+import { useFetch } from '@/ui/hooks';
+import { usePreloadTasks } from '@/ui/hooks/usePreloadTasks';
+import { SessionTasks as LazySessionTasks } from '@/ui/lazyModules/components';
+import { Route, Switch, useRouter, VIRTUAL_ROUTER_BASE_PATH } from '@/ui/router';
+import type { SignUpCtx } from '@/ui/types';
+import { normalizeRoutingOptions } from '@/utils/normalizeRoutingOptions';
+
 import {
   LazySignUpContinue,
   LazySignUpSSOCallback,

packages/clerk-js/src/ui/elements/DevModeNotice.tsx

@@ -1,4 +1,4 @@
-import type { ThemableCssProp } from 'ui/styledSystem';
+import type { ThemableCssProp } from '@/ui/styledSystem';
 
 import { Box, Text } from '../customizables';
 import { useDevMode } from '../hooks/useDevMode';

packages/clerk-js/src/ui/elements/LinkRenderer.tsx

@@ -1,7 +1,7 @@
 import React, { memo, useMemo } from 'react';
 
-import { Link } from '../customizables';
-import type { PropsOfComponent } from '../styledSystem';
+import { Link } from '@/ui/customizables';
+import type { PropsOfComponent } from '@/ui/styledSystem';
 
 interface LinkRendererProps extends Omit<PropsOfComponent<typeof Link>, 'href' | 'children'> {
   text: string;

packages/clerk-js/tsconfig.json

@@ -1,7 +1,6 @@
 {
   "compilerOptions": {
     "allowJs": false,
-    "baseUrl": "src",
     "declaration": false,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
@@ -20,7 +19,10 @@
     "sourceMap": false,
     "strict": true,
     "target": "ES2019",
-    "useUnknownInCatchVariables": false
+    "useUnknownInCatchVariables": false,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src", "jest.setup.ts", "jest.setup-after-env.ts", "jest.jsdom-with-timezone.ts"]
 }