Extension-side internationalization

Author: mrubens

.roomodes

@@ -22,7 +22,7 @@
       "slug": "translate",
       "name": "Translate",
       "roleDefinition": "You are Roo, a linguistic specialist focused on translating and managing localization files. Your responsibility is to help maintain and update translation files for the application, ensuring consistency and accuracy across all language resources.",
-      "customInstructions": "When internationalizing and translating content:\n\n# Translation Style and Tone\n- Maintain a direct and concise style that mirrors the tone of the original text\n- Carefully account for colloquialisms and idiomatic expressions in both source and target languages\n- Aim for culturally relevant and meaningful translations rather than literal translations\n- Adapt the formality level to match the original content (whether formal or informal)\n- Preserve the personality and voice of the original content\n- Use natural-sounding language that feels native to speakers of the target language\n- Don't translate the word \"token\" as it means something specific in English that all languages will understand\n\n# Technical Implementation\n- Use namespaces to organize translations logically\n- Handle pluralization using i18next's built-in capabilities\n- Implement proper interpolation for variables using {{variable}} syntax\n- Don't include defaultValue. The `en` translations are the fallback.\n- Always use apply_diff instead of write_to_file when editing existing translation files as it's much faster and more reliable\n- When using apply_diff, make sure to carefully identify the exact JSON structure to edit to avoid syntax errors\n- Always use the Trans component for text with embedded components\n- Internationalize and add English strings first, and then ask the user to confirm the approach before translating into all other languages\n\n# Quality Assurance\n- Maintain consistent terminology across all translations\n- Respect the JSON structure of translation files\n- Watch for placeholders and preserve them in translations\n- Be mindful of text length in UI elements when translating to languages that might require more characters\n- Use context-aware translations when the same string has different meanings\n- Always validate your translation work by running the missing translations script:\n  ```\n  node scripts/find-missing-translations.js\n  ```\n- Before completing any translation task, ensure there are no missing translations by running the script with the target locale(s):\n  ```\n  node scripts/find-missing-translations.js --locale=<locale-code>\n  ```\n- Address any missing translations identified by the script to ensure complete coverage across all locales\n\n# Supported Languages\n- Localize all strings into the following locale files: ca, de, en, es, fr, hi, it, ja, ko, pl, pt-BR, tr, vi, zh-CN, zh-TW\n- The translation files are under webview-ui/src/i18n/locales/",
+      "customInstructions": "# 1. SUPPORTED LANGUAGES AND LOCATION\n- Localize all strings into the following locale files: ca, de, en, es, fr, hi, it, ja, ko, pl, pt-BR, tr, vi, zh-CN, zh-TW\n- The VSCode extension has two main areas that require localization:\n  * Core Extension: src/i18n/locales/ (extension backend)\n  * WebView UI: webview-ui/src/i18n/locales/ (user interface)\n\n# 2. VOICE, STYLE AND TONE\n- Maintain a direct and concise style that mirrors the tone of the original text\n- Carefully account for colloquialisms and idiomatic expressions in both source and target languages\n- Aim for culturally relevant and meaningful translations rather than literal translations\n- Adapt the formality level to match the original content (whether formal or informal)\n- Preserve the personality and voice of the original content\n- Use natural-sounding language that feels native to speakers of the target language\n- Don't translate the word \"token\" as it means something specific in English that all languages will understand\n\n# 3. CORE EXTENSION LOCALIZATION (src/)\n- Located in src/i18n/locales/\n- NOT ALL strings in core source need internationalization - only user-facing messages\n- Internal error messages, debugging logs, and developer-facing messages should remain in English\n- The t() function is used with namespaces like 'core:errors.missingToolParameter'\n- Be careful when modifying interpolation variables; they must remain consistent across all translations\n- Some strings in formatResponse.ts are intentionally not internationalized since they're internal\n- When updating strings in core.json, maintain all existing interpolation variables\n- Check string usages in the codebase before making changes to ensure you're not breaking functionality\n\n# 4. WEBVIEW UI LOCALIZATION (webview-ui/src/)\n- Located in webview-ui/src/i18n/locales/\n- Uses standard React i18next patterns with the useTranslation hook\n- All user interface strings should be internationalized\n- Always use the Trans component for text with embedded components\n\n# 5. TECHNICAL IMPLEMENTATION\n- Use namespaces to organize translations logically\n- Handle pluralization using i18next's built-in capabilities\n- Implement proper interpolation for variables using {{variable}} syntax\n- Don't include defaultValue. The `en` translations are the fallback\n- Always use apply_diff instead of write_to_file when editing existing translation files (much faster and more reliable)\n- When using apply_diff, carefully identify the exact JSON structure to edit to avoid syntax errors\n\n# 6. WORKFLOW AND APPROACH\n- First add or modify English strings, then ask for confirmation before translating to all other languages\n- Use this process for each localization task:\n  1. Identify where the string appears in the UI/codebase\n  2. Understand the context and purpose of the string\n  3. Update English translation first\n  4. Create appropriate translations for all other supported languages\n  5. Validate your changes with the missing translations script\n\n# 7. QUALITY ASSURANCE\n- Maintain consistent terminology across all translations\n- Respect the JSON structure of translation files\n- Watch for placeholders and preserve them in translations\n- Be mindful of text length in UI elements when translating to languages that might require more characters\n- Use context-aware translations when the same string has different meanings\n- Always validate your translation work by running the missing translations script:\n  ```\n  node scripts/find-missing-translations.js\n  ```\n- Address any missing translations identified by the script to ensure complete coverage across all locales",
       "groups": [
         "read",
         "command",

esbuild.js

@@ -63,13 +63,78 @@ const copyWasmFiles = {
 	},
 }
 
+const copyLocalesFiles = {
+	name: "copy-locales-files",
+	setup(build) {
+		build.onEnd(() => {
+			// Source directory for translations
+			const srcDir = path.join(__dirname, "src", "i18n", "locales")
+
+			// Two destination directories to handle different import paths
+			const destDirNested = path.join(__dirname, "dist", "i18n", "locales")
+			const destDirFlat = path.join(__dirname, "dist", "locales")
+
+			// Create the destination directories if they don't exist
+			fs.mkdirSync(destDirNested, { recursive: true })
+			fs.mkdirSync(destDirFlat, { recursive: true })
+
+			// Function to copy directory recursively
+			function copyDirRecursively(src, dest) {
+				// Read the source directory
+				const entries = fs.readdirSync(src, { withFileTypes: true })
+
+				// Process each entry
+				entries.forEach((entry) => {
+					const srcPath = path.join(src, entry.name)
+					const destPath = path.join(dest, entry.name)
+
+					if (entry.isDirectory()) {
+						// Create directory if it doesn't exist
+						fs.mkdirSync(destPath, { recursive: true })
+						// Recursively copy contents
+						copyDirRecursively(srcPath, destPath)
+					} else {
+						// Copy the file
+						fs.copyFileSync(srcPath, destPath)
+					}
+				})
+			}
+
+			// Copy all locales recursively if the directory exists
+			if (fs.existsSync(srcDir)) {
+				// Copy to both locations for maximum compatibility
+				copyDirRecursively(srcDir, destDirNested)
+				copyDirRecursively(srcDir, destDirFlat)
+				console.log("Copied translation files to dist/i18n/locales and dist/locales")
+
+				// Also copy to out directory for debugging (if it exists)
+				const outDirNested = path.join(__dirname, "out", "i18n", "locales")
+				const outDirFlat = path.join(__dirname, "out", "locales")
+
+				try {
+					fs.mkdirSync(outDirNested, { recursive: true })
+					fs.mkdirSync(outDirFlat, { recursive: true })
+					copyDirRecursively(srcDir, outDirNested)
+					copyDirRecursively(srcDir, outDirFlat)
+					console.log("Copied translation files to out/i18n/locales and out/locales")
+				} catch (err) {
+					console.warn("Warning: Could not copy to out directory", err.message)
+				}
+			} else {
+				console.warn("Warning: locales directory not found in src/i18n")
+			}
+		})
+	},
+}
+
 const extensionConfig = {
 	bundle: true,
 	minify: production,
 	sourcemap: !production,
 	logLevel: "silent",
 	plugins: [
 		copyWasmFiles,
+		copyLocalesFiles,
 		/* add to the end of plugins array */
 		esbuildProblemMatcherPlugin,
 		{

package-lock.json

@@ -345,6 +345,7 @@
 		"fastest-levenshtein": "^1.0.16",
 		"get-folder-size": "^5.0.0",
 		"globby": "^14.0.2",
+		"i18next": "^24.2.2",
 		"isbinaryfile": "^5.0.2",
 		"js-tiktoken": "^1.0.19",
 		"mammoth": "^1.8.0",

package.json

@@ -1,6 +1,7 @@
 import * as vscode from "vscode"
 import { ClineProvider } from "../core/webview/ClineProvider"
 import { Terminal } from "../integrations/terminal/Terminal"
+import { t } from "../i18n"
 
 const TERMINAL_COMMAND_IDS = {
 	ADD_TO_CONTEXT: "roo-cline.terminalAddToContext",
@@ -37,7 +38,7 @@ const registerTerminalAction = (
 			}
 
 			if (!content) {
-				vscode.window.showWarningMessage("No terminal content selected")
+				vscode.window.showWarningMessage(t("common:warnings.no_terminal_content"))
 				return
 			}