chore: configure shared application import aliases

Author: diegolmello

app/theme.tsx app/theme/index.tsxapp/theme.tsx renamed to app/theme/index.tsx

@@ -1,9 +1,9 @@
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import { createContext, useContext, type ComponentType } from 'react';
 
-import { type IThemePreference } from './definitions/ITheme';
-import { type TNavigationOptions } from './definitions/navigationTypes';
-import { colors } from './lib/constants/colors';
+import { type IThemePreference } from '../definitions/ITheme';
+import { type TNavigationOptions } from '../definitions/navigationTypes';
+import { colors } from '../lib/constants/colors';
 
 export type TSupportedThemes = keyof typeof colors;
 export type TColors = (typeof colors)[TSupportedThemes];

babel.config.js

@@ -1,6 +1,9 @@
+const getAliasConfig = require('./config/import-aliases');
+
 module.exports = {
 	presets: ['babel-preset-expo'],
 	plugins: [
+		['module-resolver', { alias: getAliasConfig().babel }],
 		['@babel/plugin-proposal-decorators', { legacy: true }],
 		'@babel/plugin-transform-named-capturing-groups-regex',
 		['module:react-native-dotenv'],

config/import-aliases.js

@@ -0,0 +1,24 @@
+const fs = require('fs');
+const path = require('path');
+
+const tsconfig = JSON.parse(fs.readFileSync(path.resolve(__dirname, '../tsconfig.json'), 'utf8'));
+const paths = tsconfig.compilerOptions.paths;
+
+const entries = Object.entries(paths).sort(([left], [right]) => right.length - left.length);
+
+const stripWildcard = value => value.replace(/\*$/, '');
+const stripAliasSuffix = value => stripWildcard(value).replace(/\/$/, '');
+const relativeTarget = value => stripAliasSuffix(value).replace(/^\.\//, '');
+const relativeTargetWithSlash = value => stripWildcard(value).replace(/^\.\//, '');
+
+const getAliasConfig = () => ({
+	babel: Object.fromEntries(entries.map(([key, [value]]) => [stripAliasSuffix(key), `./${relativeTarget(value)}`])),
+	jest: Object.fromEntries(
+		entries.map(([key, [value]]) => [
+			`^${stripWildcard(key).replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}(.*)$`,
+			`<rootDir>/${relativeTargetWithSlash(value)}$1`
+		])
+	)
+});
+
+module.exports = getAliasConfig;

jest.config.js

@@ -1,3 +1,5 @@
+const getAliasConfig = require('./config/import-aliases');
+
 module.exports = {
 	modulePathIgnorePatterns: ['<rootDir>/.*worktrees/'],
 	testPathIgnorePatterns: [
@@ -16,7 +18,8 @@ module.exports = {
 	collectCoverage: false,
 	moduleNameMapper: {
 		'.+\\.(css|styl|less|sass|scss)$': 'identity-obj-proxy',
-		'.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js'
+		'.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
+		...getAliasConfig().jest
 	},
 	setupFilesAfterEnv: ['./jest.setup.js']
 };

package.json

@@ -192,6 +192,7 @@
 		"@types/url-parse": "^1.4.8",
 		"babel-jest": "~29.7.0",
 		"babel-loader": "~9.1.3",
+		"babel-plugin-module-resolver": "^5.0.3",
 		"babel-plugin-react-compiler": "1.0.0",
 		"babel-plugin-transform-remove-console": "^6.9.4",
 		"babel-preset-expo": "~54.0.9",

pnpm-lock.yaml

@@ -15,7 +15,11 @@
 		"experimentalDecorators": true,
 		"skipLibCheck": true,
 		"forceConsistentCasingInFileNames": true,
-		"resolveJsonModule": true
+		"resolveJsonModule": true,
+		"paths": {
+			"~/*": ["./app/*"],
+			"~/.rnstorybook/*": ["./.rnstorybook/*"]
+		}
 	},
 	"exclude": ["node_modules", "__mocks__", "**/.worktrees/**"]
 }