Add TypeScript path aliases for improved imports (#363)

Co-authored-by: Sakuk <[email protected]>
Co-authored-by: Marco Polichetti <[email protected]>

Author: 3 people

jest.config.json

@@ -2,5 +2,9 @@
   "displayName": "react-directus",
   "preset": "ts-jest",
   "testEnvironment": "jsdom",
-  "testMatch": ["<rootDir>/src/**/*(*.)@(spec|test).[tj]s?(x)"]
+  "testMatch": ["<rootDir>/src/**/*(*.)@(spec|test).[tj]s?(x)"],
+  "moduleNameMapper": {
+    "^@/(.*)$": "<rootDir>/src/$1",
+    "^@components/(.*)$": "<rootDir>/src/components/$1"
+  }
 }

src/DirectusProvider.tsx

@@ -7,10 +7,10 @@ import {
   DirectusContextTypeGeneric,
   DirectusImageProps,
   DirectusProviderProps,
-} from './types';
+} from '@/types';
 
-import { DirectusAsset } from './DirectusAsset';
-import { DirectusImage } from './DirectusImage';
+import { DirectusAsset } from '@components/DirectusAsset';
+import { DirectusImage } from '@components/DirectusImage';
 
 // DirectusContextType with any thype that extends TypeMap
 

src/DirectusAsset.spec.tsx renamed to src/components/DirectusAsset.spec.tsx

@@ -1,5 +1,5 @@
-import { DirectusAsset } from './DirectusAsset';
-import { DirectusAssetRenderer } from './types';
+import { DirectusAsset } from '@components/DirectusAsset';
+import { DirectusAssetRenderer } from '@/types';
 import React from 'react';
 import { render } from '@testing-library/react';
 

src/DirectusAsset.tsx renamed to src/components/DirectusAsset.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
-import { DirectusAssetProps } from './types';
-import { DirectusContext } from './DirectusProvider';
+import { DirectusAssetProps } from '@/types';
+import { DirectusContext } from '@/DirectusProvider';
 
 export const DirectusAsset = ({
   apiUrl: propsApiUrl,

src/DirectusImage.spec.tsx renamed to src/components/DirectusImage.spec.tsx

@@ -1,5 +1,5 @@
-import { DirectusImageProps, DirectusImageRenderer } from './types';
-import { DirectusImage } from './DirectusImage';
+import { DirectusImageProps, DirectusImageRenderer } from '@/types';
+import { DirectusImage } from '@components/DirectusImage';
 import React from 'react';
 import { render } from '@testing-library/react';
 

src/DirectusImage.tsx renamed to src/components/DirectusImage.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
-import { DirectusContext } from './DirectusProvider';
-import { DirectusImageProps } from './types';
+import { DirectusContext } from '@/DirectusProvider';
+import { DirectusImageProps } from '@/types';
 
 export const DirectusImage = ({ apiUrl: propsApiUrl, asset, render, ...params }: DirectusImageProps): JSX.Element => {
   const directusContext = React.useContext(DirectusContext);

src/index.ts

@@ -1,3 +1,3 @@
-export { DirectusAsset } from './DirectusAsset';
-export { DirectusImage } from './DirectusImage';
-export { DirectusProvider, useDirectus } from './DirectusProvider';
+export { DirectusProvider, useDirectus } from '@/DirectusProvider';
+export { DirectusAsset } from '@components/DirectusAsset';
+export { DirectusImage } from '@components/DirectusImage';

src/types.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DirectusOptions, IDirectus, TypeMap } from '@directus/sdk';
-import { DirectusAsset } from './DirectusAsset';
-import { DirectusImage } from './DirectusImage';
+import { DirectusAsset } from '@components/DirectusAsset';
+import { DirectusImage } from '@components/DirectusImage';
 
 /**
  * Shape of a generic asset.

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "baseUrl": "src",
     "target": "ES6",
     "module": "ESNext",
     "jsx": "react",
@@ -10,6 +11,10 @@
     "moduleResolution": "node",
     "esModuleInterop": true,
     "noEmit": true,
-    "forceConsistentCasingInFileNames": true
+    "forceConsistentCasingInFileNames": true,
+    "paths": {
+      "@/*": ["*"],
+      "@components/*": ["components/*"],
+    }
   }
 }