# Internationalization in the Breakdance

The builder uses WordPress's i18n system (`wp.i18n`) with the "breakdance" text domain set by default.

## Translation Functions

All functions are available in templates and TypeScript (import from `@/lib/i18n` or use via `this`):

- **`__()`** - Simple translation: `__("Hello World")`
- **`_x()`** - Translation with context: `_x("Post", "button label")`
- **`_nx()`** - Plural translation: `_nx("1 item", "%s items", count, "context")`
- **`sprintf()`** - String formatting: `sprintf(__("Welcome, %s!"), userName)`
- **`_doc()`** - Translation with explanation (for translators): `_doc("ID %s", "%s: ID number")`
- **`_xdoc()`** - Combined context and documentation: `_xdoc("Post", "button", "Action button")`

## Usage Examples

**In Vue templates:**
```vue
<template>
  <div>
    <h1>{{ __("Page Title") }}</h1>
    <p>{{ sprintf(__("Welcome, %s!"), userName) }}</p>
    <span>{{ _doc("ID %s", "%s: ID number") }}</span>
  </div>
</template>
```

> **Note:** Translation functions are automatically available in templates via the global `i18nMixin`, so no imports are needed.

**In TypeScript:**
```typescript
import { __, sprintf } from "@/lib/i18n";

@Component
export default class MyComponent extends Vue {
  get message() {
    return sprintf(__("Count: %s"), this.count);
  }
}
```

## Translation Extraction

Strings are automatically extracted during development and build from `.vue` and `.ts` files.

## Key Files

- `builder/src/lib/i18n/index.ts` - Core i18n functions
- `builder/src/util/mixins.ts` - `i18nMixin` for Vue components
- `build-tools/extract-translations.js` - String extraction tool
- `plugin/loader/loader-utils.php` - PHP translation loading

## Best Practices

1. Always use translation functions for user-facing strings
2. Use `_x()` for ambiguous strings that need context
3. Use `sprintf()` for formatting (not string concatenation)
4. Use `_doc()` to document complex strings for translators
