import alias config

Expensify · Oct 28, 2023 · 419e077 · 419e077
1 parent 70900ae
commit 419e077
Show file tree

Hide file tree

Showing 8 changed files with 449 additions and 93 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -24,7 +24,7 @@ const restrictedImportPatterns = [
 ];
 
 module.exports = {
-    extends: ['expensify', 'plugin:storybook/recommended', 'plugin:react-hooks/recommended', 'plugin:react-native-a11y/basic', 'prettier'],
+    extends: ['expensify', 'plugin:storybook/recommended', 'plugin:react-hooks/recommended', 'plugin:react-native-a11y/basic', 'plugin:@dword-design/import-alias/recommended', 'prettier'],
     plugins: ['react-hooks', 'react-native-a11y'],
     parser: 'babel-eslint',
     ignorePatterns: ['!.*', 'src/vendor', '.github/actions/**/index.js', 'desktop/dist/*.js', 'dist/*.js', 'node_modules/.bin/**', 'node_modules/.cache/**', '.git/**'],
@@ -49,8 +49,31 @@ module.exports = {
                         touchables: ['PressableWithoutFeedback', 'PressableWithFeedback'],
                     },
                 ],
+                '@dword-design/import-alias/prefer-alias': [
+                    'warn',
+                    {
+                        alias: {
+                            '@assets': './assets',
+                            '@components': './src/components',
+                            '@hooks': './src/hooks',
+                            // This is needed up here, if not @libs/actions would take the priority
+                            '@userActions': './src/libs/actions',
+                            '@libs': './src/libs',
+                            '@navigation': './src/libs/Navigation',
+                            '@pages': './src/pages',
+                            '@styles': './src/styles',
+                            // This path is provide alias for files like `ONYXKEYS` and `CONST`.
+                            '@src': './src',
+                        },
+                    },
+                ],
             },
         },
+        // This helps disable the `prefer-alias` rule to be enabled for specific directories
+        {
+            files: ['tests/**/*.js', 'tests/**/*.ts', 'tests/**/*.jsx', 'assets/**/*.js', '.storybook/**/*.js'],
+            rules: {'@dword-design/import-alias/prefer-alias': ['off']},
+        },
         {
             files: ['*.js', '*.jsx'],
             settings: {

diff --git a/.prettierrc.js b/.prettierrc.js
@@ -6,4 +6,7 @@ module.exports = {
     arrowParens: 'always',
     printWidth: 190,
     singleAttributePerLine: true,
+    importOrder: ['@assets/(.*)$', '@components/(.*)$', '@hooks/(.*)$', '@libs/(.*)$', '@navigation/(.*)$', '@pages/(.*)$', '@styles/(.*)$', '@userActions/(.*)$', '@src/(.*)$', '^[./]'],
+    importOrderSortSpecifiers: true,
+    importOrderCaseInsensitive: true,
 };
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
@@ -28,6 +28,9 @@ module.exports = ({config}) => {
         'react-native-web': '@expensify/react-native-web',
         '@react-native-community/netinfo': path.resolve(__dirname, '../__mocks__/@react-native-community/netinfo.js'),
         '@react-navigation/native': path.resolve(__dirname, '../__mocks__/@react-navigation/native'),
+
+        // Module alias support for storybook files, coping from `webpack.common.js`
+        ...custom.resolve.alias,
     };
 
     // Necessary to overwrite the values in the existing DefinePlugin hardcoded to the Config staging values

diff --git a/babel.config.js b/babel.config.js
@@ -41,6 +41,42 @@ const metro = {
         ['@babel/plugin-proposal-private-property-in-object', {loose: true}],
         // The reanimated babel plugin needs to be last, as stated here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation
         'react-native-reanimated/plugin',
+        // Import alias for native devices
+        [
+            'module-resolver',
+            {
+                extensions: [
+                    '.native.js',
+                    '.native.jsx',
+                    '.native.ts',
+                    '.native.tsx',
+                    '.js',
+                    '.jsx',
+                    '.ts',
+                    '.tsx',
+                    '.ios.js',
+                    '.ios.jsx',
+                    '.ios.ts',
+                    '.ios.tsx',
+                    '.android.js',
+                    '.android.jsx',
+                    '.android.ts',
+                    '.android.tx',
+                ],
+                alias: {
+                    '@assets': './assets',
+                    '@components': './src/components',
+                    '@hooks': './src/hooks',
+                    '@libs': './src/libs',
+                    '@navigation': './src/libs/Navigation',
+                    '@pages': './src/pages',
+                    '@styles': './src/styles',
+                    // This path is provide alias for files like `ONYXKEYS` and `CONST`.
+                    '@src': './src',
+                    '@userActions': './src/libs/actions',
+                },
+            },
+        ],
     ],
 };
 

diff --git a/config/webpack/webpack.common.js b/config/webpack/webpack.common.js
@@ -187,6 +187,19 @@ const webpackConfig = ({envFile = '.env', platform = 'web'}) => ({
             'react-native-web': '@expensify/react-native-web',
             'react-content-loader/native': 'react-content-loader',
             'lottie-react-native': 'react-native-web-lottie',
+
+            // Module alias for web & desktop
+            // https://webpack.js.org/configuration/resolve/#resolvealias
+            '@assets': path.resolve(__dirname, '../../assets'),
+            '@components': path.resolve(__dirname, '../../src/components/'),
+            '@hooks': path.resolve(__dirname, '../../src/hooks/'),
+            '@libs': path.resolve(__dirname, '../../src/libs/'),
+            '@navigation': path.resolve(__dirname, '../../src/libs/Navigation/'),
+            '@pages': path.resolve(__dirname, '../../src/pages/'),
+            '@styles': path.resolve(__dirname, '../../src/styles/'),
+            // This path is provide alias for files like `ONYXKEYS` and `CONST`.
+            '@src': path.resolve(__dirname, '../../src/'),
+            '@userActions': path.resolve(__dirname, '../../src/libs/actions/'),
         },
 
         // React Native libraries may have web-specific module implementations that appear with the extension `.web.js`