bctranslate 1.0.0 → 1.0.2

package/src/parsers/react.js

@@ -1,13 +1,10 @@
 import * as babelParser from '@babel/parser';
 import _traverse from '@babel/traverse';
-import _generate from '@babel/generator';
-import * as t from '@babel/types';
 import MagicString from 'magic-string';
-import { hashKey, isTranslatable } from '../utils.js';
+import { contextKey, isTranslatable } from '../utils.js';
 
 // Handle ESM default export quirks
 const traverse = _traverse.default || _traverse;
-const generate = _generate.default || _generate;
 
 /**
  * Non-translatable JSX attribute names.
@@ -25,8 +22,31 @@ const ATTR_WHITELIST = new Set([
   'aria-placeholder', 'aria-description',
 ]);
 
+/**
+ * Walk up the Babel path tree to find the nearest enclosing function
+ * with a BlockStatement body — that is the React component function.
+ * Returns the character offset right after the opening `{`.
+ */
+function findComponentBodyStart(jsxPath) {
+  let p = jsxPath.parentPath;
+  while (p) {
+    const { node } = p;
+    if (
+      (node.type === 'FunctionDeclaration' ||
+        node.type === 'FunctionExpression' ||
+        node.type === 'ArrowFunctionExpression') &&
+      node.body?.type === 'BlockStatement'
+    ) {
+      return node.body.start + 1; // right after opening {
+    }
+    p = p.parentPath;
+  }
+  return -1;
+}
+
 /**
  * Parse a JSX/TSX file and extract translatable strings.
+ * Hook injection uses AST-derived character positions — no regex.
  */
 export function parseReact(source, filePath) {
   const extracted = [];
@@ -45,13 +65,12 @@ export function parseReact(source, filePath) {
         'decorators-legacy',
       ].filter(Boolean),
     });
-  } catch (err) {
-    // If Babel fails, return unmodified
+  } catch {
     return { source, extracted: [], modified: false };
   }
 
   const s = new MagicString(source);
-  let needsImport = false;
+  let hookInsertPos = -1;
 
   traverse(ast, {
     // JSX text children: <div>Hello World</div>
@@ -59,28 +78,23 @@ export function parseReact(source, filePath) {
       const text = path.node.value.trim();
       if (!isTranslatable(text)) return;
 
-      const key = hashKey(text);
-      const start = path.node.start;
-      const end = path.node.end;
-
-      // Preserve whitespace
+      const key = contextKey(text, filePath);
+      const { start, end } = path.node;
       const original = path.node.value;
       const leadingWs = original.match(/^(\s*)/)[1];
       const trailingWs = original.match(/(\s*)$/)[1];
 
       s.overwrite(start, end, `${leadingWs}{t('${key}')}${trailingWs}`);
       extracted.push({ key, text, context: 'jsx-text' });
-      needsImport = true;
+
+      if (hookInsertPos === -1) hookInsertPos = findComponentBodyStart(path);
     },
 
     // JSX string attributes: <input placeholder="Enter name" />
     JSXAttribute(path) {
       const name = path.node.name?.name;
-      if (!name) return;
-
-      if (ATTR_BLACKLIST.has(name)) return;
+      if (!name || ATTR_BLACKLIST.has(name)) return;
 
-      // Only translate whitelisted attrs, or unknown attrs if they have translatable values
       const value = path.node.value;
       if (!value || value.type !== 'StringLiteral') return;
 
@@ -88,60 +102,41 @@ export function parseReact(source, filePath) {
       if (!isTranslatable(text)) return;
       if (!ATTR_WHITELIST.has(name) && text.length < 3) return;
 
-      const key = hashKey(text);
-      const attrStart = path.node.start;
-      const attrEnd = path.node.end;
-
-      s.overwrite(attrStart, attrEnd, `${name}={t('${key}')}`);
+      const key = contextKey(text, filePath);
+      s.overwrite(path.node.start, path.node.end, `${name}={t('${key}')}`);
       extracted.push({ key, text, context: `jsx-attr-${name}` });
-      needsImport = true;
+
+      if (hookInsertPos === -1) hookInsertPos = findComponentBodyStart(path);
     },
 
-    // String literals in common patterns (not JSX)
+    // alert('...'), confirm('...')
     CallExpression(path) {
       const callee = path.node.callee;
-      const calleeName = callee.name || (callee.property && callee.property.name);
-
-      // alert('...'), confirm('...'), toast('...')
-      if (['alert', 'confirm'].includes(calleeName)) {
-        const arg = path.node.arguments[0];
-        if (arg && arg.type === 'StringLiteral' && isTranslatable(arg.value)) {
-          const key = hashKey(arg.value);
-          s.overwrite(arg.start, arg.end, `t('${key}')`);
-          extracted.push({ key, text: arg.value, context: 'call-arg' });
-          needsImport = true;
-        }
+      const calleeName = callee.name || callee.property?.name;
+      if (!['alert', 'confirm'].includes(calleeName)) return;
+
+      const arg = path.node.arguments[0];
+      if (arg?.type === 'StringLiteral' && isTranslatable(arg.value)) {
+        const key = contextKey(arg.value, filePath);
+        s.overwrite(arg.start, arg.end, `t('${key}')`);
+        extracted.push({ key, text: arg.value, context: 'call-arg' });
       }
     },
   });
 
-  // Add useTranslation import if needed
-  if (needsImport) {
-    const hasUseTranslation = source.includes('useTranslation');
-    if (!hasUseTranslation) {
-      // Find the first import statement or top of file
-      let insertPos = 0;
-      const importMatch = source.match(/^import\s.+$/m);
-      if (importMatch) {
-        // Insert after all imports
-        const lastImportMatch = [...source.matchAll(/^import\s.+$/gm)];
-        if (lastImportMatch.length > 0) {
-          const last = lastImportMatch[lastImportMatch.length - 1];
-          insertPos = last.index + last[0].length;
-        }
+  // ── Inject import and hook using AST-derived positions ───────────────────────
+  if (extracted.length > 0) {
+    if (!source.includes('useTranslation')) {
+      // Find the last ImportDeclaration node — safe even with 'use client' directives
+      let lastImportEnd = 0;
+      for (const node of ast.program.body) {
+        if (node.type === 'ImportDeclaration') lastImportEnd = node.end;
       }
-
-      s.appendRight(insertPos, `\nimport { useTranslation } from 'react-i18next';\n`);
+      s.appendRight(lastImportEnd, `\nimport { useTranslation } from 'react-i18next';`);
     }
 
-    // Add const { t } = useTranslation() if not present
-    if (!source.includes('useTranslation()')) {
-      // Find the function body
-      const funcMatch = source.match(/(?:function\s+\w+|const\s+\w+\s*=\s*(?:\([^)]*\)\s*=>|\w+\s*=>))\s*\{/);
-      if (funcMatch) {
-        const insertAt = funcMatch.index + funcMatch[0].length;
-        s.appendRight(insertAt, `\n  const { t } = useTranslation();\n`);
-      }
+    if (!source.includes('useTranslation()') && hookInsertPos > 0) {
+      s.appendRight(hookInsertPos, `\n  const { t } = useTranslation();\n`);
     }
   }
 
@@ -150,4 +145,4 @@ export function parseReact(source, filePath) {
     extracted,
     modified: extracted.length > 0,
   };
-}
+}

package/src/parsers/vue.js

@@ -1,10 +1,7 @@
 import * as compiler from '@vue/compiler-dom';
 import MagicString from 'magic-string';
-import { hashKey, isTranslatable, parseInterpolation } from '../utils.js';
+import { contextKey, isTranslatable } from '../utils.js';
 
-/**
- * Non-translatable attribute names.
- */
 const ATTR_BLACKLIST = new Set([
   'id', 'class', 'style', 'src', 'href', 'ref', 'key', 'is',
   'v-model', 'v-bind', 'v-on', 'v-if', 'v-else', 'v-else-if',
@@ -17,149 +14,149 @@ const ATTR_BLACKLIST = new Set([
   'xmlns:xlink', 'xlink:href', 'data-testid', 'data-cy',
 ]);
 
-/**
- * Translatable attribute names.
- */
 const ATTR_WHITELIST = new Set([
   'title', 'placeholder', 'label', 'alt', 'aria-label',
   'aria-placeholder', 'aria-description', 'aria-roledescription',
 ]);
 
+/**
+ * Detect which t-function call to emit in templates.
+ *
+ * Rules:
+ *  - If <script setup> and file already destructures `t` from a composable
+ *    → use  t('key')          (matches user's existing pattern)
+ *  - If <script setup> but no `t` yet
+ *    → use  t('key')   AND inject `const { t } = useI18n()` into script
+ *  - Options API (no setup)
+ *    → use  $t('key')         (global plugin property)
+ */
+function detectTStyle(source) {
+  const isSetup = /<script\b[^>]*\bsetup\b/i.test(source);
+
+  // Already has:  const { t } = ...   or   const { t, ... } = ...
+  const hasT = /const\s*\{[^}]*\bt\b[^}]*\}\s*=/.test(source);
+
+  return { isSetup, hasT };
+}
+
 /**
  * Parse a .vue file and extract translatable strings.
- * Returns the modified source and the list of extracted strings.
  */
 export function parseVue(source, filePath) {
-  const extracted = []; // {key, text, context}
+  const extracted = [];
   const s = new MagicString(source);
-  let modified = false;
 
-  // Parse template section
+  const { isSetup, hasT } = detectTStyle(source);
+
+  // In templates: use t() for Composition API, $t() for Options API
+  const tpl = (key) => (isSetup || hasT) ? `t('${key}')` : `$t('${key}')`;
+  // In scripts: use t() for setup, this.$t() for options
+  const scr = (key) => isSetup ? `t('${key}')` : `this.$t('${key}')`;
+
+  // ── Template ────────────────────────────────────────────────────────────────
   const templateMatch = source.match(/<template\b[^>]*>([\s\S]*?)<\/template>/);
   if (templateMatch) {
-    const templateStart = source.indexOf(templateMatch[0]);
     const templateContent = templateMatch[1];
-    const templateOffset = templateStart + templateMatch[0].indexOf(templateContent);
+    const templateOffset =
+      source.indexOf(templateMatch[0]) + templateMatch[0].indexOf(templateContent);
 
     try {
-      const ast = compiler.parse(templateContent, {
-        comments: true,
-        getTextMode: () => 0,
-      });
-
-      walkTemplate(ast.children, s, templateOffset, extracted);
-      modified = extracted.length > 0;
-    } catch (err) {
-      // If Vue parser fails, fall back to regex-based extraction for template
-      extractTemplateRegex(source, s, extracted);
-      modified = extracted.length > 0;
+      const ast = compiler.parse(templateContent, { comments: true, getTextMode: () => 0 });
+      walkTemplate(ast.children, s, templateOffset, extracted, filePath, tpl);
+    } catch {
+      extractTemplateRegex(source, s, extracted, filePath, tpl);
     }
   }
 
-  // Parse script section for string literals
+  // ── Script ──────────────────────────────────────────────────────────────────
   const scriptMatch = source.match(/<script\b[^>]*>([\s\S]*?)<\/script>/);
   if (scriptMatch) {
-    const scriptStart = source.indexOf(scriptMatch[0]);
     const scriptContent = scriptMatch[1];
-    const scriptOffset = scriptStart + scriptMatch[0].indexOf(scriptContent);
-    const isSetup = /<script\b[^>]*setup[^>]*>/.test(source);
+    const scriptOffset =
+      source.indexOf(scriptMatch[0]) + scriptMatch[0].indexOf(scriptContent);
+    extractScriptStrings(scriptContent, s, scriptOffset, extracted, filePath, scr);
+  }
 
-    extractScriptStrings(scriptContent, s, scriptOffset, extracted, isSetup);
+  // ── Inject `const { t } = useI18n()` if setup but t not yet declared ────────
+  if (extracted.length > 0 && isSetup && !hasT) {
+    const scriptSetupMatch = source.match(/(<script\b[^>]*\bsetup\b[^>]*>)([\s\S]*?)<\/script>/i);
+    if (scriptSetupMatch) {
+      const insertAt =
+        source.indexOf(scriptSetupMatch[0]) + scriptSetupMatch[1].length;
+      const needsImport = !source.includes('useI18n');
+      const importLine = needsImport ? `import { useI18n } from 'vue-i18n';\n` : '';
+      s.appendRight(insertAt, `\n${importLine}const { t } = useI18n();\n`);
+    }
   }
 
   return {
-    source: modified || extracted.length > 0 ? s.toString() : source,
+    source: extracted.length > 0 ? s.toString() : source,
     extracted,
-    modified: modified || extracted.length > 0,
+    modified: extracted.length > 0,
   };
 }
 
-function walkTemplate(nodes, s, baseOffset, extracted) {
+// ── Template walker ───────────────────────────────────────────────────────────
+
+function walkTemplate(nodes, s, baseOffset, extracted, filePath, tpl) {
   for (const node of nodes) {
-    // Type 2 = Text
+    // Text node (type 2)
     if (node.type === 2) {
       const text = node.content.trim();
       if (isTranslatable(text)) {
-        const key = hashKey(text);
         const start = baseOffset + node.loc.start.offset;
-        const end = baseOffset + node.loc.end.offset;
+        const end   = baseOffset + node.loc.end.offset;
 
-        // Check if already wrapped in $t()
         if (!isAlreadyWrapped(s.original, start, end)) {
-          // Preserve leading/trailing whitespace
-          const originalText = node.content;
-          const leadingWs = originalText.match(/^(\s*)/)[1];
-          const trailingWs = originalText.match(/(\s*)$/)[1];
-
-          s.overwrite(start, end, `${leadingWs}{{ $t('${key}') }}${trailingWs}`);
+          const key = contextKey(text, filePath);
+          const orig = node.content;
+          const lws  = orig.match(/^(\s*)/)[1];
+          const tws  = orig.match(/(\s*)$/)[1];
+          s.overwrite(start, end, `${lws}{{ ${tpl(key)} }}${tws}`);
           extracted.push({ key, text, context: 'template-text' });
         }
       }
     }
 
-    // Type 1 = Element
+    // Element (type 1) — check translatable attributes, then recurse
     if (node.type === 1) {
-      // Check translatable attributes
-      if (node.props) {
-        for (const prop of node.props) {
-          // Type 6 = Attribute (static)
-          if (prop.type === 6 && prop.value) {
-            const attrName = prop.name.toLowerCase();
-
-            if (ATTR_WHITELIST.has(attrName) && isTranslatable(prop.value.content)) {
-              const text = prop.value.content;
-              const key = hashKey(text);
+      for (const prop of node.props ?? []) {
+        if (prop.type === 6 && prop.value) {
+          const attrName = prop.name.toLowerCase();
+          if (ATTR_WHITELIST.has(attrName) && isTranslatable(prop.value.content)) {
+            const text = prop.value.content;
+            if (!ATTR_BLACKLIST.has(attrName)) {
+              const key      = contextKey(text, filePath);
               const attrStart = baseOffset + prop.loc.start.offset;
-              const attrEnd = baseOffset + prop.loc.end.offset;
-
-              // Convert static attribute to v-bind with $t()
-              s.overwrite(attrStart, attrEnd, `:${attrName}="$t('${key}')"`);
+              const attrEnd   = baseOffset + prop.loc.end.offset;
+              s.overwrite(attrStart, attrEnd, `:${attrName}="${tpl(key)}"`);
               extracted.push({ key, text, context: `template-attr-${attrName}` });
             }
           }
         }
       }
-
-      // Recurse into children
-      if (node.children) {
-        walkTemplate(node.children, s, baseOffset, extracted);
-      }
-    }
-
-    // Type 5 = Interpolation ({{ expr }})
-    if (node.type === 5 && node.content) {
-      // Check for compound expressions that contain string literals
-      // e.g., {{ isError ? 'Failed' : 'Success' }}
-      // We only extract simple string content, not expressions
+      if (node.children) walkTemplate(node.children, s, baseOffset, extracted, filePath, tpl);
     }
 
-    // Type 8 = CompoundExpression — skip
-    // Type 11 = ForNode — recurse into children
+    // ForNode (type 11)
     if (node.type === 11 && node.children) {
-      walkTemplate(node.children, s, baseOffset, extracted);
+      walkTemplate(node.children, s, baseOffset, extracted, filePath, tpl);
     }
-    // Type 9 = IfNode — recurse into branches
+
+    // IfNode (type 9) — walk branches
     if (node.type === 9 && node.branches) {
       for (const branch of node.branches) {
-        if (branch.children) {
-          walkTemplate(branch.children, s, baseOffset, extracted);
-        }
+        if (branch.children) walkTemplate(branch.children, s, baseOffset, extracted, filePath, tpl);
       }
     }
   }
 }
 
-function extractScriptStrings(scriptContent, s, baseOffset, extracted, isSetup) {
-  // Match string literals that look like translatable text in common patterns:
-  // - alert('text'), confirm('text')
-  // - title: 'text', label: 'text', placeholder: 'text', message: 'text'
-  // - toast('text'), notify('text')
-  // - error/success/warning message strings
+// ── Script string extractor ───────────────────────────────────────────────────
 
+function extractScriptStrings(scriptContent, s, baseOffset, extracted, filePath, scr) {
   const patterns = [
-    // Function calls: alert('...'), confirm('...'), toast('...'), notify('...')
     /\b(alert|confirm|toast|notify|message\.(?:success|error|warning|info))\s*\(\s*(['"`])((?:(?!\2).)+)\2\s*\)/g,
-    // Object properties: title: '...', label: '...', message: '...'
     /\b(title|label|placeholder|message|text|description|tooltip|hint|caption|header|subtitle|errorMessage|successMessage)\s*:\s*(['"`])((?:(?!\2).)+)\2/g,
   ];
 
@@ -168,44 +165,41 @@ function extractScriptStrings(scriptContent, s, baseOffset, extracted, isSetup)
     while ((match = pattern.exec(scriptContent)) !== null) {
       const text = match[3];
       if (isTranslatable(text) && text.length > 1) {
-        const key = hashKey(text);
-        const fullMatchStart = baseOffset + match.index;
+        const key       = contextKey(text, filePath);
         const quoteChar = match[2];
         const textStart = baseOffset + match.index + match[0].indexOf(quoteChar + text);
-        const textEnd = textStart + text.length + 2; // +2 for quotes
-
-        const tCall = isSetup ? `t('${key}')` : `this.$t('${key}')`;
-
-        s.overwrite(textStart, textEnd, tCall);
+        const textEnd   = textStart + text.length + 2;
+        s.overwrite(textStart, textEnd, scr(key));
         extracted.push({ key, text, context: 'script' });
       }
     }
   }
 }
 
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
 function isAlreadyWrapped(source, start, end) {
-  // Check if the text is already inside a $t() call or {{ $t(...) }}
-  const before = source.slice(Math.max(0, start - 20), start);
-  return /\$t\s*\(\s*['"]/.test(before) || /t\s*\(\s*['"]/.test(before);
+  // Look back 25 chars for an open t( or $t( call — node is inside an interpolation
+  const before = source.slice(Math.max(0, start - 25), start);
+  return /\$?t\s*\(\s*['"]/.test(before);
 }
 
-function extractTemplateRegex(source, s, extracted) {
-  // Fallback regex extraction for when the Vue parser fails
-  const textPattern = />([^<]+)</g;
+function extractTemplateRegex(source, s, extracted, filePath, tpl) {
+  const pattern = />([^<]+)</g;
   let match;
-  while ((match = textPattern.exec(source)) !== null) {
+  while ((match = pattern.exec(source)) !== null) {
     const text = match[1].trim();
     if (isTranslatable(text)) {
-      const key = hashKey(text);
       const textStart = match.index + 1;
-      const textEnd = textStart + match[1].length;
+      const textEnd   = textStart + match[1].length;
       if (!isAlreadyWrapped(source, textStart, textEnd)) {
-        const original = match[1];
-        const leadingWs = original.match(/^(\s*)/)[1];
-        const trailingWs = original.match(/(\s*)$/)[1];
-        s.overwrite(textStart, textEnd, `${leadingWs}{{ $t('${key}') }}${trailingWs}`);
+        const key  = contextKey(text, filePath);
+        const orig = match[1];
+        const lws  = orig.match(/^(\s*)/)[1];
+        const tws  = orig.match(/(\s*)$/)[1];
+        s.overwrite(textStart, textEnd, `${lws}{{ ${tpl(key)} }}${tws}`);
         extracted.push({ key, text, context: 'template-text' });
       }
     }
   }
-}
+}