@localey/react

@localey/react

React and JSX adapter for Localey.

This package provides the logic necessary for Localey to understand and manipulate React source code. It utilizes high-precision Abstract Syntax Tree (AST) traversal to identify hardcoded strings within JSX elements and component properties.

Detection Logic

The adapter utilizes the @babel/parser and @babel/traverse packages to analyze source code. It targets specific nodes within the AST that predominantly contain user-facing text.

Supported Patterns

• JSX Text Nodes: Standard text content between opening and closing JSX tags.
• Component Attributes: String literals passed to props (e.g., label, title, placeholder).
• Conditional Strings: Support for strings within ternary operators and template literals is currently handled via AST inspection.

Code Transformation

During the extract process, this adapter replaces string literals with JSX expression containers.

• Pattern: text -> {t("key")}
• Attribute Pattern: attr="value" -> attr={t("key")}

Technical Implementation

• Parser Configuration: The adapter is configured to support both .js/.jsx and .ts/.tsx files by enabling the jsx and typescript Babel plugins.
• AST Visitor: Implementation of the Visitor pattern to efficiently navigate the tree and identify candidates for localization.
• Generator: Uses @babel/generator to reconstruct the source code from the modified AST, ensuring syntactic correctness.