feat: import-alias

.eslintrc

@@ -35,7 +35,7 @@
             "position": "before"
           },
           {
-            "pattern": "@src/**",
+            "pattern": "@/**",
             "group": "internal"
           }
         ],
@@ -71,7 +71,8 @@
     "import/resolver": {
       "node": {
         "extensions": [".js", ".ts", ".tsx"]
-      }
+      },
+      "babel-module": {}
     }
   }
 }

babel.config.js

@@ -1,3 +1,15 @@
 module.exports = {
   presets: ['module:@react-native/babel-preset'],
+  plugins: [
+    [
+      'module-resolver',
+      {
+        root: ['./src'],
+        extensions: ['.tsx', '.ts', '.js', '.json'],
+        alias: {
+          '@': './src',
+        },
+      },
+    ],
+  ],
 };

docs/docs/guides/11-ripple-effect.md

@@ -14,7 +14,7 @@ The ripple effect on the iOS platform is replaced by a highlight effect.
 
 The `rippleColor` prop is available for every pressable component which allows you to set the color of the ripple effect. For the instance, to make the `Button` component's ripple effect transparent, simply pass the desired color value to the prop:
 
-```
+```typescript
 <Button
   rippleColor="#FF000020"
   icon="camera"
@@ -28,7 +28,7 @@ The `rippleColor` prop is available for every pressable component which allows y
 
 To disable the ripple effect in **all** of Paper's components set `rippleEffectEnabled: false` on the `settings` prop of `PaperProvider`.
 
-```
+```typescript
 import { Provider as PaperProvider } from 'react-native-paper';
 // ...
 

docs/plugins/docusaurus-react-native-plugin.js

@@ -8,6 +8,7 @@ module.exports = function () {
         mergeStrategy: { 'resolve.extensions': 'prepend' },
         resolve: {
           alias: {
+            '@': path.resolve(__dirname, '../../src'),
             react: path.resolve('node_modules/react'),
             'react-native$': 'react-native-web',
             'react-native-paper': path.resolve('../src'),

example/babel.config.js

@@ -20,6 +20,7 @@ module.exports = function (api) {
             ),
             // For development, we want to alias the library to the source
             [pak.name]: path.join(__dirname, '..', 'src'),
+            '@': path.join(__dirname, '..', 'src'),
           },
         },
       ],

example/tsconfig.json

@@ -1,3 +1,8 @@
 {
   "extends": "../tsconfig",
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["../src/*"]
+    }
+  }
 }

package.json

@@ -1,14 +1,13 @@
 {
   "name": "react-native-paper",
-  "version": "5.14.5",
+  "version": "5.15.0",
   "description": "Material design for React Native",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
-  "react-native": "src/index.tsx",
+  "react-native": "lib/module/index.js",
   "source": "src/index.tsx",
   "types": "lib/typescript/index.d.ts",
   "files": [
-    "src",
     "lib",
     "react-navigation",
     "babel.js"
@@ -42,7 +41,7 @@
     "lint": "yarn lint-no-fix --fix",
     "lint-no-fix": "eslint --ext '.js,.ts,.tsx' .",
     "test": "jest",
-    "prepack": "bob build && node ./scripts/generate-mappings.js",
+    "prepack": "bob build && node ./scripts/resolve-aliases.js && node ./scripts/generate-mappings.js",
     "release": "release-it",
     "docs": "yarn --cwd docs",
     "example": "yarn --cwd example"
@@ -80,12 +79,15 @@
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^29.6.3",
     "babel-loader": "^8.2.3",
+    "babel-plugin-module-resolver": "^5.0.0",
     "babel-test": "^0.1.1",
     "chalk": "^4.0.0",
     "commitlint": "^8.3.4",
     "conventional-changelog-cli": "^2.0.11",
     "dedent": "^0.7.0",
     "eslint": "8.31.0",
+    "eslint-import-resolver-babel-module": "^5.3.1",
+    "eslint-import-resolver-typescript": "^3.5.2",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-local-rules": "^1.3.2",
     "glob": "^7.1.3",

scripts/generate-ts-tests.js

@@ -36,7 +36,7 @@ const getFiles = () =>
 const writeFiles = (files) => {
   mkdirSync(DESTINATION_DIR);
 
-  files.forEach((f) =>
+  files.map((f) =>
     writeFileSync(
       path.join(
         DESTINATION_DIR,

scripts/resolve-aliases.js

@@ -0,0 +1,96 @@
+const fs = require('fs');
+const path = require('path');
+
+const LIB_DIR = path.resolve(__dirname, '..', 'lib');
+const ALIAS_PREFIX = '@/';
+
+// Recursively find all files with given extensions
+function findFiles(dir, extensions) {
+  const results = [];
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const fullPath = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      results.push(...findFiles(fullPath, extensions));
+    } else if (extensions.some((ext) => entry.name.endsWith(ext))) {
+      results.push(fullPath);
+    }
+  }
+  return results;
+}
+
+// Given a file path inside lib/<target>/..., compute the relative path
+// from the file's directory to the target root (e.g. lib/commonjs/)
+function resolveAlias(filePath, targetRoot, importPath) {
+  if (!importPath.startsWith(ALIAS_PREFIX)) {
+    return importPath;
+  }
+
+  const stripped = importPath.slice(ALIAS_PREFIX.length);
+  const fileDir = path.dirname(filePath);
+  let relativePath = path.relative(fileDir, path.join(targetRoot, stripped));
+
+  // Ensure it starts with ./ or ../
+  if (!relativePath.startsWith('.')) {
+    relativePath = `./${relativePath}`;
+  }
+
+  return relativePath;
+}
+
+// Patterns that match import/require statements with @/ aliases
+// Handles: require("@/..."), from '@/...', from "@/...", import("@/...")
+const IMPORT_PATTERN =
+  /(require\(["']|from\s+["']|import\(["'])(@\/[^"']+)(["'])/g;
+
+function processFile(filePath, targetRoot) {
+  const content = fs.readFileSync(filePath, 'utf8');
+  const updated = content.replace(
+    IMPORT_PATTERN,
+    (_match, prefix, importPath, suffix) => {
+      const resolved = resolveAlias(filePath, targetRoot, importPath);
+      return prefix + resolved + suffix;
+    }
+  );
+
+  if (content !== updated) {
+    fs.writeFileSync(filePath, updated);
+    return true;
+  }
+  return false;
+}
+
+// Process each build target directory
+const targets = [
+  { dir: 'commonjs', extensions: ['.js', '.js.map'] },
+  { dir: 'module', extensions: ['.js', '.js.map'] },
+  { dir: 'typescript', extensions: ['.d.ts', '.d.ts.map'] },
+];
+
+let totalResolved = 0;
+
+for (const target of targets) {
+  const targetDir = path.join(LIB_DIR, target.dir);
+  if (!fs.existsSync(targetDir)) {
+    continue;
+  }
+
+  const files = findFiles(targetDir, target.extensions);
+  let count = 0;
+
+  for (const file of files) {
+    if (processFile(file, targetDir)) {
+      count++;
+    }
+  }
+
+  if (count > 0) {
+    console.log(`Resolved aliases in ${count} files in lib/${target.dir}/`);
+    totalResolved += count;
+  }
+}
+
+if (totalResolved > 0) {
+  console.log(`Done — resolved @/ aliases in ${totalResolved} files total.`);
+} else {
+  console.log('No @/ aliases found in build output.');
+}

src/components/Appbar/Appbar.tsx

@@ -11,6 +11,9 @@ import {
 
 import color from 'color';
 
+import { useInternalTheme } from '@/core/theming';
+import type { MD3Elevation, ThemeProp } from '@/types';
+
 import AppbarContent from './AppbarContent';
 import {
   AppbarModes,
@@ -21,8 +24,6 @@ import {
   filterAppbarActions,
   AppbarChildProps,
 } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import type { MD3Elevation, ThemeProp } from '../../types';
 import Surface from '../Surface';
 
 export type Props = Omit<

src/components/Appbar/AppbarAction.tsx

@@ -8,13 +8,13 @@ import type {
 } from 'react-native';
 
 import color from 'color';
-import type { ThemeProp } from 'src/types';
 
-import { useInternalTheme } from '../../core/theming';
-import { black } from '../../styles/themes/v2/colors';
-import { forwardRef } from '../../utils/forwardRef';
-import type { IconSource } from '../Icon';
-import IconButton from '../IconButton/IconButton';
+import type { IconSource } from '@/components/Icon';
+import IconButton from '@/components/IconButton/IconButton';
+import { useInternalTheme } from '@/core/theming';
+import { black } from '@/styles/themes/v2/colors';
+import type { ThemeProp } from '@/types';
+import { forwardRef } from '@/utils/forwardRef';
 
 export type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
   /**
@@ -71,11 +71,11 @@ export type Props = React.ComponentPropsWithoutRef<typeof IconButton> & {
  * const MORE_ICON = Platform.OS === 'ios' ? 'dots-horizontal' : 'dots-vertical';
  *
  * const MyComponent = () => (
- *     <Appbar.Header>
- *        <Appbar.Content title="Title" subtitle={'Subtitle'} />
- *         <Appbar.Action icon="magnify" onPress={() => {}} />
- *         <Appbar.Action icon={MORE_ICON} onPress={() => {}} />
- *     </Appbar.Header>
+ *   <Appbar.Header>
+ *      <Appbar.Content title="Title" subtitle={'Subtitle'} />
+ *       <Appbar.Action icon="magnify" onPress={() => {}} />
+ *       <Appbar.Action icon={MORE_ICON} onPress={() => {}} />
+ *   </Appbar.Header>
  * );
  *
  * export default MyComponent;

src/components/Appbar/AppbarBackAction.tsx

@@ -7,10 +7,11 @@ import type {
   ViewStyle,
 } from 'react-native';
 
-import type { $Omit } from './../../types';
+import type { $Omit } from '@/types';
+import { forwardRef } from '@/utils/forwardRef';
+
 import AppbarAction from './AppbarAction';
 import AppbarBackIcon from './AppbarBackIcon';
-import { forwardRef } from '../../utils/forwardRef';
 
 export type Props = $Omit<
   React.ComponentPropsWithoutRef<typeof AppbarAction>,
@@ -49,9 +50,9 @@ export type Props = $Omit<
  * import { Appbar } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *     <Appbar.Header>
- *       <Appbar.BackAction onPress={() => {}} />
- *     </Appbar.Header>
+ *   <Appbar.Header>
+ *     <Appbar.BackAction onPress={() => {}} />
+ *   </Appbar.Header>
  * );
  *
  * export default MyComponent;

src/components/Appbar/AppbarBackIcon.tsx

@@ -18,7 +18,7 @@ const AppbarBackIcon = ({ size, color }: { size: number; color: string }) => {
       ]}
     >
       <Image
-        source={require('../../assets/back-chevron.png')}
+        source={require('@/assets/back-chevron.png')}
         style={[
           styles.icon,
           { tintColor: color, width: iosIconSize, height: iosIconSize },

src/components/Appbar/AppbarContent.tsx

@@ -14,11 +14,12 @@ import {
 
 import color from 'color';
 
+import Text, { TextRef } from '@/components/Typography/Text';
+import { useInternalTheme } from '@/core/theming';
+import { white } from '@/styles/themes/v2/colors';
+import type { $RemoveChildren, MD3TypescaleKey, ThemeProp } from '@/types';
+
 import { modeTextVariant } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import { white } from '../../styles/themes/v2/colors';
-import type { $RemoveChildren, MD3TypescaleKey, ThemeProp } from '../../types';
-import Text, { TextRef } from '../Typography/Text';
 
 type TitleString = {
   title: string;
@@ -92,9 +93,9 @@ export type Props = $RemoveChildren<typeof View> & {
  * import { Appbar } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *     <Appbar.Header>
- *        <Appbar.Content title="Title" />
- *     </Appbar.Header>
+ *   <Appbar.Header>
+ *      <Appbar.Content title="Title" />
+ *   </Appbar.Header>
  * );
  *
  * export default MyComponent;

src/components/Appbar/AppbarHeader.tsx

@@ -11,16 +11,17 @@ import {
 
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { useInternalTheme } from '@/core/theming';
+import shadow from '@/styles/shadow';
+import type { ThemeProp } from '@/types';
+
 import { Appbar } from './Appbar';
 import {
   DEFAULT_APPBAR_HEIGHT,
   getAppbarBackgroundColor,
   modeAppbarHeight,
   getAppbarBorders,
 } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import shadow from '../../styles/shadow';
-import type { ThemeProp } from '../../types';
 
 export type Props = Omit<
   React.ComponentProps<typeof Appbar>,

src/components/Appbar/utils.ts

@@ -2,9 +2,9 @@ import React from 'react';
 import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
 import { StyleSheet, Animated } from 'react-native';
 
-import overlay from '../../styles/overlay';
-import { black, white } from '../../styles/themes/v2/colors';
-import type { InternalTheme, ThemeProp } from '../../types';
+import overlay from '@/styles/overlay';
+import { black, white } from '@/styles/themes/v2/colors';
+import type { InternalTheme, ThemeProp } from '@/types';
 
 export type AppbarModes = 'small' | 'medium' | 'large' | 'center-aligned';
 

src/components/Avatar/AvatarIcon.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
-import { useInternalTheme } from '../../core/theming';
-import { white } from '../../styles/themes/v2/colors';
-import type { ThemeProp } from '../../types';
-import getContrastingColor from '../../utils/getContrastingColor';
+import { useInternalTheme } from '@/core/theming';
+import { white } from '@/styles/themes/v2/colors';
+import type { ThemeProp } from '@/types';
+import getContrastingColor from '@/utils/getContrastingColor';
+
 import Icon, { IconSource } from '../Icon';
 
 const defaultSize = 64;