🌐 Auto Translation CLI - Now with React Native Support!

A powerful CLI tool for automating internationalization (i18n) in React & React Native projects

Streamline your translation workflow with intelligent text extraction, automated wrapping, and seamless i18n setup

🚀 Quick Start • 📖 Documentation • 🎯 Examples • 🤝 Contributing

🚨 MAJOR UPDATE ALERT!

📱 React Native Support is Here!

🔥 Using the previous version? Update now to unlock React Native support and enhanced multi-file structure capabilities!

npm update -g auto-translation
# Now supports both React & React Native with advanced file organization!

📱 Perfect for React Native Apps!

Mobile app developers can now automate their i18n workflow with zero hassle

✨ Features That Make You Go WOW!

| 🚀 Lightning Fast | 📱 Universal Support | 🎯 Smart Workflows | 🛡️ Enterprise Ready | |:---------------------:|:------------------------:|:-----------------------:|:------------------------:| | One-command setup | ✅ React Apps | Mode-based configs | Configuration tracking | | Zero configuration | ✅ React Native | Strict mode protection | Version control friendly | | Smart dependency mgmt | 🔜 Node.js Backend | Team collaboration | Scalable architecture |

🧠 Intelligent Detection Engine

• Context-aware text scanning
• JSX/TSX component analysis
• React Native Text component detection
• Multi-file structure support (const en = {...agents})

🔄 Automatic Transformation Magic

• Plain text → t() conversion
• Smart key generation
• Namespace organization
• Multi-language file creation

🎨 Advanced File Organization

• Feature-based translation files
• Nested namespace support
• Clean folder structures
• Resource bundling

🏗️ Multi-Platform Architecture

graph TB
    A[🌐 Auto Translation CLI] --> B[🔵 React Mode]
    A --> C[📱 React Native Mode] 
    A --> D[🟢 Node.js Mode]
    
    B --> E[Web Components<br/>JSX Scanning<br/>React i18next]
    C --> F[Mobile Components<br/>Text Detection<br/>RN Localization]
    D --> G[Server Routes<br/>API i18n<br/>Backend Support]
    
    style A fill:#4F46E5,stroke:#fff,stroke-width:2px,color:#fff
    style B fill:#3B82F6,stroke:#fff,stroke-width:2px,color:#fff
    style C fill:#10B981,stroke:#fff,stroke-width:2px,color:#fff
    style D fill:#F59E0B,stroke:#fff,stroke-width:2px,color:#fff

📦 Installation

💫 Choose Your Installation Method

# 🌟 Install globally (Recommended)
npm install -g auto-translation

# 🚀 Use directly with npx
npx auto-translation

# 📦 Install as dev dependency
npm install --save-dev auto-translation

🔗 Quick Access Links

🚀 Quick Start Guide

Step 1: Initialize Your Project 🎯

npx auto-translation

Interactive Mode Selection:

• 🔵 React - For web applications
• 📱 React Native - For mobile apps
• 🟢 Node.js - Coming soon!

Step 2: Complete i18n Setup ⚡

npx auto-translation init

🎯 What happens during init:

• ✅ Installs react-i18next & i18next
• 🏗️ Creates src/i18n structure
• 📝 Generates index.js config
• 🔧 Sets up namespace files
• 🎨 Multi-file support ready

• ✅ Installs react-native-localization
• 🏗️ Creates src/i18n structure
• 📝 Generates RN-specific config
• 🔧 Sets up screen/component files
• 📱 Mobile-optimized setup

Step 3: Scan & Extract Keys 🔍

npx auto-translation scan

🎯 Interactive File Selection Process:

1. 📂 Choose directories or specific files
2. 🔍 Smart detection of translatable content
3. 📝 Automatic key extraction
4. 🎨 Multi-namespace organization

Step 4: Auto-wrap Plain Text 🪄

npx auto-translation wrap

🔄 Before & After Examples:

React:

function WelcomeScreen() {
  return (
    <div>
      <h1>Welcome to our app</h1>
      <p>Sign in to continue</p>
      <button>Get Started</button>
    </div>
  );
}

React Native:

function WelcomeScreen() {
  return (
    <View>
      <Text>Welcome to our app</Text>
      <Text>Sign in to continue</Text>
      <TouchableOpacity>
        <Text>Get Started</Text>
      </TouchableOpacity>
    </View>
  );
}

React:

function WelcomeScreen() {
  const { t } = useTranslation();
  return (
    <div>
      <h1>{t('welcome_to_our_app')}</h1>
      <p>{t('sign_in_to_continue')}</p>
      <button>{t('get_started')}</button>
    </div>
  );
}

React Native:

function WelcomeScreen() {
  const { t } = useTranslation();
  return (
    <View>
      <Text>{t('welcome_to_our_app')}</Text>
      <Text>{t('sign_in_to_continue')}</Text>
      <TouchableOpacity>
        <Text>{t('get_started')}</Text>
      </TouchableOpacity>
    </View>
  );
}

📋 Complete Command Reference

🎯 Core Commands (Auto-prefixed by mode)

| Command | React Mode | React Native Mode | Description | Status | |---------|:----------:|:-----------------:|-------------|:------:| | init | react-init | rn-init | Complete i18n setup with dependencies | ✅ | | scan | react-scan | rn-scan | Scan and extract translation keys | ✅ | | wrap | react-wrap | rn-wrap | Auto-wrap text with translation calls | ✅ | | file-update | react-file-update | rn-file-update | Manage translation file structure | ✅ | | setup | react-setup | rn-setup | Setup folder structure only | ✅ | | ignore-init | react-ignore-init | rn-ignore-init | Initialize .ignoreKeys file | ✅ |

⚙️ Configuration & Management Commands

| Command | Description | Example Usage | |---------|-------------|---------------| | config | 📊 Show current project configuration | npx auto-translation config | | reset-config | 🔄 Reset configuration to defaults | npx auto-translation reset-config | | npx auto-translation | 🎯 Interactive mode selection menu | Launch main menu |

🎯 Smart Mode System

🧠 Intelligent Command Prefixing

The CLI automatically handles command prefixing based on your selected mode. You just use the clean commands!

# You type:
scan
init  
wrap

# CLI executes:
react-scan
react-init
react-wrap

# You type:
scan
init
wrap

# CLI executes:
rn-scan
rn-init
rn-wrap

# You type:
scan
init
wrap

# CLI executes:
node-scan
node-init
node-wrap

🔒 Strict Mode Protection

Once you run mode-specific commands, the project enters strict mode:

• 🛡️ Prevents accidental cross-mode usage
• 🔐 Locks project to selected mode
• 👥 Ensures team consistency
• ⚡ Maintains workflow integrity

🔓 To unlock strict mode:

npx auto-translation
# Select "🔓 Unlock strict mode" from the interactive menu

📁 Generated Project Structures

🔵 React Project Structure

your-react-app/
├── 📁 src/
│   └── 📁 i18n/
│       ├── 📄 index.js              # Main i18n configuration
│       ├── 📁 locales/
│       │   ├── 📁 en/
│       │   │   ├── 📄 common.json   # Common translations
│       │   │   ├── 📄 agents.json   # Agent-specific terms  
│       │   │   ├── 📄 navigation.json
│       │   │   └── 📄 components.json
│       │   └── 📁 es/
│       │       ├── 📄 common.json
│       │       ├── 📄 agents.json
│       │       ├── 📄 navigation.json
│       │       └── 📄 components.json
│       └── 📄 resources.js          # Multi-file resource loader
├── 📄 .translate-package-config     # Project configuration  
└── 📄 .ignoreKeys                   # Ignored translation terms

📱 React Native Project Structure

your-rn-app/
├── 📁 src/
│   └── 📁 i18n/
│       ├── 📄 index.js              # RN i18n configuration
│       ├── 📁 locales/
│       │   ├── 📁 en/
│       │   │   ├── 📄 common.json
│       │   │   ├── 📄 screens.json  # Screen-specific translations
│       │   │   ├── 📄 components.json
│       │   │   └── 📄 navigation.json
│       │   └── 📁 es/
│       │       ├── 📄 common.json
│       │       ├── 📄 screens.json
│       │       ├── 📄 components.json
│       │       └── 📄 navigation.json
│       └── 📄 resources.js          # Native resource loader
├── 📄 .translate-package-config
└── 📄 .ignoreKeys

💡 Enhanced Multi-File Structure Support

🚀 NEW: Advanced support for organized translation files:

// 📄 resources.js - Auto-generated multi-file loader
const en = {
  common: require('./locales/en/common.json'),
  agents: require('./locales/en/agents.json'),
  navigation: require('./locales/en/navigation.json'),
  screens: require('./locales/en/screens.json'),     // RN specific
  components: require('./locales/en/components.json'),
};

const es = {
  common: require('./locales/es/common.json'),
  agents: require('./locales/es/agents.json'),
  navigation: require('./locales/es/navigation.json'),
  screens: require('./locales/es/screens.json'),     // RN specific
  components: require('./locales/es/components.json'),
};

export { en, es };

🎮 Interactive Workflows

📂 Smart File Selection Interface

When running scan, you get a powerful interactive file picker:

npx auto-translation scan

🎯 Features:

• ☑️ Multi-select files and directories
• 👀 Preview file content before processing
• ⏭️ Skip files that shouldn't be translated
• 📱 React Native component auto-detection
• ⚛️ React JSX/TSX intelligent scanning
• 🎨 Syntax highlighting for better visibility

🚫 Ignore Keys Configuration

npx auto-translation ignore-init

📝 Create .ignoreKeys file for:

• 🏷️ Brand names and proper nouns
• 💻 Technical terms and code keywords
• 🎯 Framework-specific terminology (React/RN)
• 🔧 API endpoints and configuration keys
• 📦 Package names and imports

Example .ignoreKeys:

React
useState
useEffect
AsyncStorage
NavigationContainer
axios
localhost

💡 Best Practices & Pro Workflows

🚀 React Web App Setup

# 1. 🎯 Initialize React mode
npx auto-translation
# Choose "🔵 React" mode

# 2. ⚡ Complete i18n setup  
npx auto-translation init

# 3. 📥 Import i18n in your App.js or index.js
import './i18n';

# 4. 🔍 Scan components for translatable content
npx auto-translation scan

# 5. 🪄 Auto-wrap any remaining plain text
npx auto-translation wrap

📱 React Native Mobile App Setup

# 1. 📱 Initialize React Native mode
npx auto-translation
# Choose "📱 React Native" mode

# 2. ⚡ Complete RN i18n setup
npx auto-translation init

# 3. 📥 Import i18n in your App.js
import './src/i18n';

# 4. 🔍 Scan screens and components  
npx auto-translation scan
# Focus on Screen files and reusable components

# 5. 🪄 Auto-wrap Text components
npx auto-translation wrap

👥 Team Collaboration Workflow

📋 Version Control Setup

# Add configuration files
git add .translate-package-config
git add .ignoreKeys
git add src/i18n/

# Commit i18n structure
git commit -m "🌐 Add i18n setup"

🔒 Team Consistency

# Verify project status
npx auto-translation config

# Ensure strict mode active
# Share .ignoreKeys with team

🔄 Regular Maintenance

# Weekly scan for new text
npx auto-translation scan

# Organize translation files
npx auto-translation file-update

🎯 Real-World Usage Examples

📱 E-Commerce React Native App

# 🛍️ Setup for shopping app
npx auto-translation
# Select "📱 React Native"

npx auto-translation init

# 🔍 Scan product screens
npx auto-translation scan
# Select: screens/ProductScreen.js, screens/CartScreen.js, components/ProductCard.js

# 📁 Result: Organized translation files
# - screens.json (product_title, add_to_cart, checkout)
# - components.json (price_label, rating_text)
# - navigation.json (home_tab, cart_tab, profile_tab)

⚛️ SaaS Dashboard React App

# 💼 Setup for business dashboard
npx auto-translation  
# Select "🔵 React"

npx auto-translation init

# 🔍 Scan dashboard components
npx auto-translation scan
# Select: components/Dashboard.js, components/Analytics.js, pages/

# 📊 Result: Feature-based organization
# - dashboard.json (welcome_message, total_sales, analytics)
# - common.json (save, cancel, delete, confirm)
# - navigation.json (dashboard, analytics, settings)

🎮 Gaming React Native App

# 🎮 Setup for mobile game
npx auto-translation
# Select "📱 React Native"

npx auto-translation init

# 🚫 Setup game-specific ignore terms
npx auto-translation ignore-init
# Add: Unity, Firebase, AsyncStorage, GameCenter

# 🔍 Scan game screens
npx auto-translation scan
# Select: screens/GameScreen.js, screens/LeaderboardScreen.js

# 🏆 Result: Game-ready i18n
# - screens.json (start_game, high_score, game_over)
# - common.json (play, pause, restart, quit)

🔧 Advanced Configuration

📊 Project Configuration File

The .translate-package-config stores comprehensive project settings:

{
  "mode": "react-native",
  "strictLocked": true,
  "multiFileSupport": true,
  "namespaces": [
    "common",
    "screens", 
    "components",
    "navigation",
    "agents"
  ],
  "supportedLanguages": ["en", "es", "fr", "de"],
  "defaultLanguage": "en",
  "createdAt": "2025-01-15T10:30:00.000Z",
  "lastModified": "2025-01-15T10:35:00.000Z",
  "version": "2.0.0",
  "author": "your-team-name"
}

🎯 Custom Namespace Configuration

# 📁 Create custom namespace structure
npx auto-translation file-update

# Example custom namespaces for different app types:

# 🏪 E-commerce App
# - products.json, cart.json, checkout.json, user.json

# 📱 Social Media App  
# - posts.json, comments.json, profile.json, messages.json

# 🎓 Educational App
# - lessons.json, quizzes.json, progress.json, achievements.json

🚧 Roadmap - Exciting Updates Coming!

🌟 What's Coming Next

🟢 Node.js Mode ✅ Backend route scanning ✅ API response i18n ✅ Server-side rendering 📅 ETA: Q2 2025

🔧 Enhanced Tools ✅ Translation validation ✅ Duplicate key detection ✅ Bulk file operations 📅 ETA: Q2 2025

👥 Team Features ✅ Team workspaces ✅ Translation reviews ✅ Progress tracking 📅 ETA: Q3 2025

🤝 Contributing

💻 Join Our Growing Community!

We love contributions! Here's how to get started:

🍴 Fork Fork the repository

🌿 Branch git checkout -b amazing-feature

✨ Commit Clear, descriptive commits

🚀 PR Submit your pull request

🎯 Areas We'd Love Help With:

• 📱 React Native enhancements and optimizations
• 🎨 UI/UX improvements for CLI experience
• 📖 Documentation improvements and examples
• 🐛 Bug fixes and performance optimizations
• 🧪 Testing coverage and automation
• 🌐 Internationalization of the CLI itself

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support & Community

💬 Get Help & Stay Connected

🐛 Bug Reports GitHub Issues

💬 Questions & Discussions GitHub Discussions

📧 Direct Support [email protected]

📦 NPM Package View on NPM

🌟 Response Times

| Support Channel | Average Response | Severity | |:---------------:|:----------------:|:--------:| | 🚨 Critical Bugs | Within 24 hours | High Priority | | 🐛 General Issues | 2-3 business days | Medium Priority | | 💬 Questions | 3-5 business days | Low Priority | | 📧 Direct Email | 1-2 business days | Variable |

📈 Usage Statistics & Community

📊 Growing Fast!

🔗 Quick Access Links & Resources

🚀 Essential Resources

📚 Additional Resources

🎓 Learning Resources

• 📖 React i18next Documentation
• 📱 React Native Localization Guide
• 🌐 Internationalization Best Practices
• ⚛️ React Documentation

🛠️ Developer Tools

• 🔍 Translation Key Analyzer
• 📊 Usage Statistics Dashboard
• 🎯 Project Templates
• 🤖 CLI Reference Guide

💝 Special Thanks

🙏 Acknowledgments

Special thanks to our amazing contributors and the open-source community:

• 🌟 All our GitHub contributors for their valuable contributions
• 📱 React Native community for feedback and testing
• ⚛️ React community for continuous support
• 🌐 i18next team for their excellent internationalization library
• 💻 Node.js community for the robust ecosystem

🎉 Join the Movement!

Help us make internationalization accessible to every developer

🌟 Star us on GitHub if this tool helps you! ⭐

🌍 Making the world more connected, one translation at a time

🌐 Auto Translation CLI | v2.0.0+ | ⚛️ React & 📱 React Native Ready

💌 Built with love by Asad Rafi and the amazing open-source community