|
| 1 | +--- |
| 2 | +name: generate-translations |
| 3 | +description: Use when new translation keys are added to packages to generate new translations strings |
| 4 | +allowed-tools: Write, Bash(date:*), Bash(mkdir -p *) |
| 5 | +--- |
| 6 | + |
| 7 | +# Translation Generation Guide |
| 8 | + |
| 9 | +Payload has two separate translation systems: |
| 10 | + |
| 11 | +1. **Core Translations** - for core Payload packages (packages/ui, packages/payload, packages/next) |
| 12 | +2. **Plugin Translations** - for plugins (packages/plugin-\*) |
| 13 | + |
| 14 | +## Table of Contents |
| 15 | + |
| 16 | +- [1. Core Translations](#1-core-translations) |
| 17 | +- [2. Plugin Translations](#2-plugin-translations) |
| 18 | + - [Scaffolding New Plugin Translations](#scaffolding-new-plugin-translations) |
| 19 | +- [Important Notes](#important-notes) |
| 20 | + |
| 21 | +--- |
| 22 | + |
| 23 | +## 1. Core Translations |
| 24 | + |
| 25 | +**When to use:** Adding translations to core Payload packages (packages/ui, packages/payload, packages/next) |
| 26 | + |
| 27 | +### Steps: |
| 28 | + |
| 29 | +1. **Add the English translation** to `packages/translations/src/languages/en.ts` |
| 30 | + |
| 31 | + - Add your new key/value to the appropriate section (e.g., `authentication`, `general`, `fields`, etc.) |
| 32 | + - Use nested objects for organization |
| 33 | + - Example: |
| 34 | + ```typescript |
| 35 | + export const enTranslations = { |
| 36 | + authentication: { |
| 37 | + // ... existing keys |
| 38 | + newFeature: 'New Feature Text', |
| 39 | + }, |
| 40 | + } |
| 41 | + ``` |
| 42 | + |
| 43 | +2. **Add client key** (if needed for client-side usage) to `packages/translations/src/clientKeys.ts` |
| 44 | + |
| 45 | + - Add the translation key path using colon notation |
| 46 | + - Example: `'authentication:newFeature'` |
| 47 | + - Client keys are used for translations that need to be available in the browser |
| 48 | + |
| 49 | +3. **Generate translations for all languages** |
| 50 | + - Change directory: `cd tools/scripts` |
| 51 | + - Run: `pnpm generateTranslations:core` |
| 52 | + - This auto-translates your new English keys to all other supported languages |
| 53 | + |
| 54 | +--- |
| 55 | + |
| 56 | +## 2. Plugin Translations |
| 57 | + |
| 58 | +**When to use:** Adding translations to any plugin package (packages/plugin-\*) |
| 59 | + |
| 60 | +### Steps: |
| 61 | + |
| 62 | +1. **Verify plugin has translations folder** |
| 63 | + |
| 64 | + - Check if `packages/plugin-{name}/src/translations` exists |
| 65 | + - If it doesn't exist, see "Scaffolding New Plugin Translations" below |
| 66 | + |
| 67 | +2. **Add the English translation** to the plugin's `packages/plugin-{name}/src/translations/languages/en.ts` |
| 68 | + |
| 69 | + - Plugin translations are namespaced under the plugin name |
| 70 | + - Example for plugin-multi-tenant: |
| 71 | + ```typescript |
| 72 | + export const enTranslations = { |
| 73 | + 'plugin-multi-tenant': { |
| 74 | + 'new-feature-label': 'New Feature', |
| 75 | + }, |
| 76 | + } |
| 77 | + ``` |
| 78 | + |
| 79 | +3. **Generate translations for all languages** |
| 80 | + - Change directory: `cd tools/scripts` |
| 81 | + - Run the plugin-specific script: `pnpm generateTranslations:plugin-{name}` |
| 82 | + - Examples: |
| 83 | + - `pnpm generateTranslations:plugin-multi-tenant` |
| 84 | + - `pnpm generateTranslations:plugin-ecommerce` |
| 85 | + - `pnpm generateTranslations:plugin-import-export` |
| 86 | + |
| 87 | +### Scaffolding New Plugin Translations |
| 88 | + |
| 89 | +If a plugin doesn't have a translations folder yet, **ask the user if they want to scaffold one**. |
| 90 | + |
| 91 | +#### Structure to create: |
| 92 | + |
| 93 | +``` |
| 94 | +packages/plugin-{name}/src/translations/ |
| 95 | +├── index.ts |
| 96 | +├── types.ts |
| 97 | +└── languages/ |
| 98 | + ├── en.ts |
| 99 | + ├── es.ts |
| 100 | + └── ... (all other language files) |
| 101 | +``` |
| 102 | +
|
| 103 | +#### Files to create: |
| 104 | +
|
| 105 | +1. **types.ts** - Define the plugin's translation types |
| 106 | +2. **index.ts** - Export all translations and re-export types |
| 107 | +3. **languages/en.ts** - English translations (the source for generation) |
| 108 | +4. **languages/\*.ts** - Other language files (initially empty, will be generated) |
| 109 | +
|
| 110 | +#### Generation script to create: |
| 111 | +
|
| 112 | +1. Create `tools/scripts/src/generateTranslations/plugin-{name}.ts` |
| 113 | +
|
| 114 | + - Use `plugin-multi-tenant.ts` as a template |
| 115 | + - Update the import paths to point to the new plugin |
| 116 | + - Update the targetFolder path |
| 117 | +
|
| 118 | +2. Add script to `tools/scripts/package.json`: |
| 119 | + ```json |
| 120 | + "generateTranslations:plugin-{name}": "node --no-deprecation --import @swc-node/register/esm-register src/generateTranslations/plugin-{name}.ts" |
| 121 | + ``` |
| 122 | + |
| 123 | +--- |
| 124 | + |
| 125 | +## Important Notes |
| 126 | + |
| 127 | +- All translation generation requires `OPENAI_KEY` environment variable to be set |
| 128 | +- The generation scripts use OpenAI to translate from English to other languages |
| 129 | +- Always add translations to English first - it's the source of truth |
| 130 | +- **Core translations**: Client keys are only needed for translations used in the browser/admin UI |
| 131 | +- **Plugin translations**: Automatically namespaced under the plugin name to avoid conflicts |
0 commit comments