@repo/eslint-config

Collection of internal ESLint configurations and custom rules for the crossplatform.ai monorepo.

Custom Rules

no-module-dependencies

Purpose: Enforce zero-dependency policy for shared framework modules.

Framework modules must not have runtime dependencies on other framework modules. Instead of importing sibling modules directly, modules define interfaces that consuming applications implement and inject.

Checks:

• Module package.json files must have empty dependencies field
• External libraries allowed in devDependencies (for testing and type resolution)

Configuration:

{
  'custom/no-module-dependencies': 'error',
}

Example:

✅ Allowed:

{
  "name": "@repo/cache",
  "dependencies": {},
  "devDependencies": {
    "redis": "^4.7.1"
  }
}

❌ Blocked:

{
  "name": "@repo/cache",
  "dependencies": {
    "redis": "^4.7.1" // ❌ Runtime dependency not allowed
  }
}

no-package-imports

Purpose: Enforce package independence - packages must not import from modules or other packages.

Packages are primitive utilities and should be self-contained. This prevents circular dependencies and tight coupling.

Options:

• exempt: Array of package names exempt from this rule (use sparingly during migration)
• allowTypeOnlyImports: Boolean - allow type-only imports from modules (default: false)

Configuration:

{
  'no-package-imports/no-package-imports': [
    'error',
    {
      allowTypeOnlyImports: true,  // Enable type-only imports
    },
  ],
}

Examples:

✅ Allowed with allowTypeOnlyImports: true:

// Type-only import (zero runtime coupling)
import type { BaseBranchInfo, CommitFile } from '@repo/git-core';

{
  "devDependencies": {
    "@repo/git-core": "workspace:*" // Type resolution only
  }
}

❌ Blocked:

// Runtime import from module
import { GitService } from '@repo/git-core'; // ❌ Blocked

{
  "dependencies": {
    "@repo/git-core": "workspace:*" // ❌ Runtime dependency blocked
  }
}

Rationale:

Type-only imports create zero runtime coupling while enabling type sharing. This maintains architectural boundaries while eliminating duplicate type definitions.

• Type-only imports are erased during TypeScript compilation
• DevDependencies provide types for IDE/TypeScript without bundling
• ESLint enforces the boundary between type imports and runtime imports
• Prevents architectural erosion through automation

See Also:

• modules/README.md - "Type Sharing Between Modules and Packages" section
• AGENTS.md - "Type Definition Standards" section

no-unstable-inline-props

Purpose: Prevent unnecessary re-renders caused by inline objects and arrays passed as props to React Native components.

Inline objects and arrays create new references on every render, triggering re-renders even when content is identical. This rule enforces stable references using a three-tier strategy.

Configuration:

{
  'no-unstable-inline-props/no-unstable-inline-props': [
    'error',
    {
      components: ['View', 'SafeAreaView', 'Provider', 'ThemeProvider'],  // Components to check
      props: ['edges', 'value', 'config', 'options', 'style'],  // Props to check
    },
  ],
}

Strategy (in order of preference):

1. Static styles → StyleSheet.create() (best performance)
2. Simple dynamic values → StyleSheet + array merge (good performance)
3. Complex computed → useMemo (rare, only when necessary)

Examples:

✅ Static styles - Use StyleSheet.create():

// Module-level StyleSheet
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
});

function MyComponent() {
  return <View style={styles.container}>...</View>;
}

✅ Simple dynamic values - StyleSheet + array merge:

const styles = StyleSheet.create({
  base: { padding: 16 },
  active: { backgroundColor: 'blue' },
});

function MyComponent({ isActive }: { isActive: boolean }) {
  // Array merge - efficient and readable
  return <View style={[styles.base, isActive && styles.active]}>...</View>;
}

✅ Complex computed - useMemo (rare):

function MyComponent({ rotation, scale }: { rotation: number; scale: number }) {
  // Only use useMemo for expensive computations or complex transforms
  const computedStyle = useMemo(
    () => ({
      transform: [
        { rotate: `${rotation}deg` },
        { scale },
        { translateX: Math.sin(rotation) * 100 },
      ],
    }),
    [rotation, scale]
  );

  return <View style={computedStyle}>...</View>;
}

❌ Blocked - Inline objects:

function MyComponent() {
  // ❌ New object created every render
  return <View style={{ flex: 1, padding: 16 }}>...</View>;
}

❌ Blocked - Inline arrays:

function MyComponent() {
  // ❌ New array created every render
  return <SafeAreaView edges={['top', 'bottom']}>...</SafeAreaView>;
}

Rationale:

• StyleSheet.create() has zero runtime cost - styles are created once at module load
• Array merging is fast and type-safe with proper StyleSheet types
• useMemo adds overhead (dependency tracking, comparison) - only justified for expensive operations
• Inline objects/arrays cause re-renders throughout the component tree

Other Custom Rules

• no-disable-next-line: Prevents // eslint-disable-next-line comments
• no-eslint-disable-block: Prevents /* eslint-disable */ block comments
• no-hardcoded-urls: Prevents hardcoded URLs in code
• no-platform-os: Prevents direct use of os.platform() (use dependency injection)
• require-modal-conditional: Requires conditional rendering for modal components
• And more... (see custom-rules/ directory)

Configuration Files

• base.js - Base ESLint configuration for all packages
• next.js - Next.js-specific configuration
• react-internal.js - React-specific configuration

Usage

// eslint.config.js
const baseConfig = require('@repo/eslint-config/base');

module.exports = [
  ...baseConfig,
  // Your custom rules
];