bctranslate 1.0.4 → 1.0.7

package/bin/bctranslate.js

@@ -92,9 +92,9 @@ async function resolveFiles(pathArg, cwd, project) {
 }
 
 // ── Translation runner — uses global batching (Python spawned once) ───────────
-async function runTranslation({ pathArg, from, to, localesDir, dryRun, outdir, verbose, jsonMode, setup, cwd }) {
-  const project = detectProject(cwd);
-  console.log(chalk.green(`  ✓ Project type: ${chalk.bold(project.type)}`));
+async function runTranslation({ pathArg, from, to, localesDir, dryRun, outdir, verbose, jsonMode, setup, autoImport, cwd }) {
+  const project = detectProject(cwd);
+  console.log(chalk.green(`  ✓ Project type: ${chalk.bold(project.type)}`));
 
   const files = await resolveFiles(pathArg, cwd, project);
   if (files.length === 0) {
@@ -104,10 +104,10 @@ async function runTranslation({ pathArg, from, to, localesDir, dryRun, outdir, v
 
   console.log(chalk.cyan(`  → ${files.length} file(s) [${from} → ${to}]...\n`));
 
-  if (setup !== false) {
-    const resolvedLocalesDir = localesDir ? resolve(cwd, localesDir) : undefined;
-    await ensureI18nSetup(cwd, project, from, to, resolvedLocalesDir);
-  }
+  if (setup !== false) {
+    const resolvedLocalesDir = localesDir ? resolve(cwd, localesDir) : undefined;
+    await ensureI18nSetup(cwd, project, from, to, resolvedLocalesDir, { autoImport });
+  }
 
   // Global batch: all files parsed first, ONE Python call, then all writes
   const results = await translateAllFiles(files, {
@@ -277,17 +277,19 @@ program
   .argument('[lang]', 'Target language code (e.g. fr)')
   .option('-t, --to <lang>', 'Target language(s), comma-separated (e.g. fr or fr,es)')
   .option('-d, --dry-run', 'Preview changes without writing files', false)
-  .option('-o, --outdir <dir>', 'Output directory for translated files')
-  .option('--no-setup', 'Skip i18n setup file generation')
-  .option('--json-mode <mode>', 'JSON translation mode: values or full', 'values')
-  .option('-v, --verbose', 'Show per-file diffs and skipped files', false)
+  .option('-o, --outdir <dir>', 'Output directory for translated files')
+  .option('--no-setup', 'Skip i18n setup file generation')
+  .option('--no-import', 'Do not auto-inject i18n imports/script tags')
+  .option('--json-mode <mode>', 'JSON translation mode: values or full', 'values')
+  .option('-v, --verbose', 'Show per-file diffs and skipped files', false)
   .action(async (pathArg, fromArg, keyword, langArg, opts) => {
     console.log(chalk.cyan.bold('\n  ⚡ bctranslate\n'));
 
-    const invokedCwd = process.cwd();
-    const config     = loadConfig(invokedCwd);
-
-    let cwd = invokedCwd;
+    const invokedCwd = process.cwd();
+    const config     = loadConfig(invokedCwd);
+    const autoImport = opts.import !== false && (config?.autoImport !== false);
+
+    let cwd = invokedCwd;
     if (!config && pathArg) {
       const resolvedTarget = resolve(invokedCwd, pathArg);
       if (existsSync(resolvedTarget)) {
@@ -338,18 +340,19 @@ program
     for (const to of targets) {
       if (targets.length > 1) console.log(chalk.cyan.bold(`\n  ── Translating to ${to} ──`));
 
-      const { totalStrings, totalFiles } = await runTranslation({
-        pathArg,
-        from,
-        to,
-        localesDir: config?.localesDir,
-        dryRun:     opts.dryRun,
-        outdir:     opts.outdir,
-        verbose:    opts.verbose,
-        jsonMode:   opts.jsonMode,
-        setup:      opts.setup,
-        cwd,
-      });
+      const { totalStrings, totalFiles } = await runTranslation({
+        pathArg,
+        from,
+        to,
+        localesDir: config?.localesDir,
+        dryRun:     opts.dryRun,
+        outdir:     opts.outdir,
+        verbose:    opts.verbose,
+        jsonMode:   opts.jsonMode,
+        setup:      opts.setup,
+        autoImport,
+        cwd,
+      });
 
       grandTotal += totalStrings;
       grandFiles += totalFiles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bctranslate",
-  "version": "1.0.4",
+  "version": "1.0.7",
   "description": "CLI to transform source files into i18n-ready code with automatic translation via argostranslate",
   "type": "module",
   "bin": {

package/src/generators/setup.js

@@ -1,4 +1,4 @@
-import { existsSync, writeFileSync, mkdirSync } from 'fs';
+import { existsSync, writeFileSync, mkdirSync, readFileSync } from 'fs';
 import { join } from 'path';
 import chalk from 'chalk';
 import { getLocaleDir } from './locales.js';
@@ -13,9 +13,10 @@ import { getLocaleDir } from './locales.js';
  * @param {string} to - Target language code
  * @param {string} [customLocaleDir] - Optional override for locale directory
  */
-export async function ensureI18nSetup(cwd, project, from, to, customLocaleDir) {
-  const localeDir = customLocaleDir || getLocaleDir(cwd, project);
-  mkdirSync(localeDir, { recursive: true });
+export async function ensureI18nSetup(cwd, project, from, to, customLocaleDir, options = {}) {
+  const { autoImport = true } = options;
+  const localeDir = customLocaleDir || getLocaleDir(cwd, project);
+  mkdirSync(localeDir, { recursive: true });
 
   // Ensure locale JSON files exist
   for (const lang of [from, to]) {
@@ -24,18 +25,18 @@ export async function ensureI18nSetup(cwd, project, from, to, customLocaleDir) {
       writeFileSync(localePath, '{}\n', 'utf-8');
       console.log(chalk.green(`  ✓ Created ${localePath}`));
     }
-  }
+  }
+
+  if (project.type === 'vue') {
+    await ensureVueI18n(cwd, project, from, to, localeDir, { autoImport });
+  } else if (project.type === 'react') {
+    await ensureReactI18n(cwd, project, from, to, localeDir, { autoImport });
+  } else {
+    await ensureVanillaI18n(cwd, from, to, localeDir, { autoImport });
+  }
+}
 
-  if (project.type === 'vue') {
-    await ensureVueI18n(cwd, project, from, to, localeDir);
-  } else if (project.type === 'react') {
-    await ensureReactI18n(cwd, project, from, to, localeDir);
-  } else {
-    await ensureVanillaI18n(cwd, from, to, localeDir);
-  }
-}
-
-async function ensureVueI18n(cwd, project, from, to, localeDir) {
+async function ensureVueI18n(cwd, project, from, to, localeDir, { autoImport }) {
   const i18nFile = join(cwd, 'src', 'i18n.js');
 
   if (existsSync(i18nFile)) {
@@ -48,51 +49,105 @@ async function ensureVueI18n(cwd, project, from, to, localeDir) {
 
   let content;
   if (isVue3) {
-    content = `import { createI18n } from 'vue-i18n';
-import ${from} from '${relLocale}/${from}.json';
-import ${to} from '${relLocale}/${to}.json';
-
-const i18n = createI18n({
-  legacy: false,
-  locale: '${from}',
-  fallbackLocale: '${from}',
-  messages: {
-    ${from},
-    ${to},
-  },
-});
+    content = `import { createI18n } from 'vue-i18n';
+import ${from} from '${relLocale}/${from}.json';
+import ${to} from '${relLocale}/${to}.json';
+
+function nestMessages(input) {
+  if (!input || typeof input !== 'object') return {};
+  const out = Array.isArray(input) ? [] : {};
+  for (const [rawKey, value] of Object.entries(input)) {
+    if (!rawKey.includes('.')) {
+      out[rawKey] = value;
+      continue;
+    }
+    const parts = rawKey.split('.').filter(Boolean);
+    let cur = out;
+    for (let i = 0; i < parts.length; i++) {
+      const p = parts[i];
+      if (i === parts.length - 1) {
+        cur[p] = value;
+      } else {
+        if (!cur[p] || typeof cur[p] !== 'object') cur[p] = {};
+        cur = cur[p];
+      }
+    }
+  }
+  return out;
+}
+
+const i18n = createI18n({
+  legacy: false,
+  locale: '${from}',
+  fallbackLocale: '${from}',
+  messages: {
+    ${from}: nestMessages(${from}),
+    ${to}: nestMessages(${to}),
+  },
+});
 
 export default i18n;
 `;
   } else {
-    content = `import Vue from 'vue';
-import VueI18n from 'vue-i18n';
-import ${from} from '${relLocale}/${from}.json';
-import ${to} from '${relLocale}/${to}.json';
-
-Vue.use(VueI18n);
-
-const i18n = new VueI18n({
-  locale: '${from}',
-  fallbackLocale: '${from}',
-  messages: {
-    ${from},
-    ${to},
-  },
-});
+    content = `import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+import ${from} from '${relLocale}/${from}.json';
+import ${to} from '${relLocale}/${to}.json';
+
+Vue.use(VueI18n);
+
+function nestMessages(input) {
+  if (!input || typeof input !== 'object') return {};
+  const out = Array.isArray(input) ? [] : {};
+  for (const [rawKey, value] of Object.entries(input)) {
+    if (!rawKey.includes('.')) {
+      out[rawKey] = value;
+      continue;
+    }
+    const parts = rawKey.split('.').filter(Boolean);
+    let cur = out;
+    for (let i = 0; i < parts.length; i++) {
+      const p = parts[i];
+      if (i === parts.length - 1) {
+        cur[p] = value;
+      } else {
+        if (!cur[p] || typeof cur[p] !== 'object') cur[p] = {};
+        cur = cur[p];
+      }
+    }
+  }
+  return out;
+}
+
+const i18n = new VueI18n({
+  locale: '${from}',
+  fallbackLocale: '${from}',
+  messages: {
+    ${from}: nestMessages(${from}),
+    ${to}: nestMessages(${to}),
+  },
+});
 
 export default i18n;
 `;
   }
 
-  mkdirSync(join(cwd, 'src'), { recursive: true });
-  writeFileSync(i18nFile, content, 'utf-8');
-  console.log(chalk.green(`  ✓ Created ${i18nFile}`));
-  console.log(chalk.yellow(`  ⚠ Don't forget to install vue-i18n: npm install vue-i18n`));
-  console.log(chalk.yellow(`  ⚠ Import and use i18n in your main.js/main.ts`));
-}
+  mkdirSync(join(cwd, 'src'), { recursive: true });
+  writeFileSync(i18nFile, content, 'utf-8');
+  console.log(chalk.green(`  ✓ Created ${i18nFile}`));
+  console.log(chalk.yellow(`  ⚠ Don't forget to install vue-i18n: npm install vue-i18n`));
+
+  if (autoImport) {
+    const injected = injectVueEntrypoint(cwd, isVue3);
+    if (!injected) {
+      console.log(chalk.yellow(`  ⚠ Import and use i18n in your main.js/main.ts`));
+    }
+  } else {
+    console.log(chalk.yellow(`  ⚠ Import and use i18n in your main.js/main.ts`));
+  }
+}
 
-async function ensureReactI18n(cwd, project, from, to, localeDir) {
+async function ensureReactI18n(cwd, project, from, to, localeDir, { autoImport }) {
   const i18nFile = join(cwd, 'src', 'i18n.js');
 
   if (existsSync(i18nFile)) {
@@ -102,16 +157,39 @@ async function ensureReactI18n(cwd, project, from, to, localeDir) {
 
   const relLocale = localeDir.replace(cwd, '.').replace(/\\/g, '/');
 
-  const content = `import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
-import ${from} from '${relLocale}/${from}.json';
-import ${to} from '${relLocale}/${to}.json';
-
-i18n.use(initReactI18next).init({
-  resources: {
-    ${from}: { translation: ${from} },
-    ${to}: { translation: ${to} },
-  },
+  const content = `import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import ${from} from '${relLocale}/${from}.json';
+import ${to} from '${relLocale}/${to}.json';
+
+function nestMessages(input) {
+  if (!input || typeof input !== 'object') return {};
+  const out = Array.isArray(input) ? [] : {};
+  for (const [rawKey, value] of Object.entries(input)) {
+    if (!rawKey.includes('.')) {
+      out[rawKey] = value;
+      continue;
+    }
+    const parts = rawKey.split('.').filter(Boolean);
+    let cur = out;
+    for (let i = 0; i < parts.length; i++) {
+      const p = parts[i];
+      if (i === parts.length - 1) {
+        cur[p] = value;
+      } else {
+        if (!cur[p] || typeof cur[p] !== 'object') cur[p] = {};
+        cur = cur[p];
+      }
+    }
+  }
+  return out;
+}
+
+i18n.use(initReactI18next).init({
+  resources: {
+    ${from}: { translation: nestMessages(${from}) },
+    ${to}: { translation: nestMessages(${to}) },
+  },
   lng: '${from}',
   fallbackLng: '${from}',
   interpolation: {
@@ -122,14 +200,22 @@ i18n.use(initReactI18next).init({
 export default i18n;
 `;
 
-  mkdirSync(join(cwd, 'src'), { recursive: true });
-  writeFileSync(i18nFile, content, 'utf-8');
-  console.log(chalk.green(`  ✓ Created ${i18nFile}`));
-  console.log(chalk.yellow(`  ⚠ Don't forget to install: npm install i18next react-i18next`));
-  console.log(chalk.yellow(`  ⚠ Import './i18n' in your index.js/App.js`));
-}
+  mkdirSync(join(cwd, 'src'), { recursive: true });
+  writeFileSync(i18nFile, content, 'utf-8');
+  console.log(chalk.green(`  ✓ Created ${i18nFile}`));
+  console.log(chalk.yellow(`  ⚠ Don't forget to install: npm install i18next react-i18next`));
+
+  if (autoImport) {
+    const injected = injectReactEntrypoint(cwd);
+    if (!injected) {
+      console.log(chalk.yellow(`  ⚠ Import './i18n' in your index.js/App.js`));
+    }
+  } else {
+    console.log(chalk.yellow(`  ⚠ Import './i18n' in your index.js/App.js`));
+  }
+}
 
-async function ensureVanillaI18n(cwd, from, to, localeDir) {
+async function ensureVanillaI18n(cwd, from, to, localeDir, { autoImport }) {
   const i18nFile = join(cwd, 'i18n.js');
 
   if (existsSync(i18nFile)) {
@@ -150,39 +236,204 @@ async function ensureVanillaI18n(cwd, from, to, localeDir) {
     locales[lang] = await resp.json();
   }
 
-  function t(key, params) {
-    const msg = (locales[currentLocale] && locales[currentLocale][key]) || key;
-    if (!params) return msg;
-    return msg.replace(/\\{(\\w+)\\}/g, function (_, k) {
-      return params[k] !== undefined ? params[k] : '{' + k + '}';
-    });
-  }
+  function t(key, params) {
+    // Support both flat keys ("home.submit") and nested objects ({ home: { submit: ... } })
+    const dict = locales[currentLocale] || {};
+    const direct = Object.prototype.hasOwnProperty.call(dict, key) ? dict[key] : null;
+    const msg =
+      direct !== null && direct !== undefined
+        ? direct
+        : key.split('.').reduce((obj, i) => (obj ? obj[i] : null), dict) || key;
+
+    if (!params) return msg;
+    return String(msg).replace(/\\{(\\w+)\\}/g, (match, k) =>
+      params[k] !== undefined ? params[k] : match
+    );
+  }
 
   async function setLocale(lang) {
     await loadLocale(lang);
     currentLocale = lang;
     // Re-translate all elements with data-i18n attribute
-    document.querySelectorAll('[data-i18n]').forEach(function (el) {
-      const key = el.getAttribute('data-i18n');
-      el.textContent = t(key);
-    });
+    document.querySelectorAll('[data-i18n]').forEach(function (el) {
+      const key = el.getAttribute('data-i18n');
+      const translated = t(key);
+      // Preserve markup translations (e.g. "Hello <strong>world</strong>")
+      if (el.children.length > 0 || /<[^>]+>/.test(String(translated))) {
+        el.innerHTML = translated;
+      } else {
+        el.textContent = translated;
+      }
+    });
     document.querySelectorAll('[data-i18n-placeholder]').forEach(function (el) {
       el.placeholder = t(el.getAttribute('data-i18n-placeholder'));
     });
-    document.querySelectorAll('[data-i18n-title]').forEach(function (el) {
-      el.title = t(el.getAttribute('data-i18n-title'));
-    });
-  }
+    document.querySelectorAll('[data-i18n-title]').forEach(function (el) {
+      const translated = t(el.getAttribute('data-i18n-title'));
+      if (el.tagName === 'TITLE') {
+        document.title = translated;
+      } else {
+        el.title = translated;
+      }
+    });
+  }
 
-  // Auto-init
-  loadLocale('${from}');
-  loadLocale('${to}');
-
-  window.i18n = { t: t, setLocale: setLocale, loadLocale: loadLocale };
-})();
-`;
+  // Auto-init
+  loadLocale('${from}');
+
+  const api = { t: t, setLocale: setLocale, loadLocale: loadLocale, ready: null };
+  window.i18n = api;
+  api.ready = setLocale('${to}');
+})();
+`;
 
-  writeFileSync(i18nFile, content, 'utf-8');
-  console.log(chalk.green(`  ✓ Created ${i18nFile}`));
-  console.log(chalk.yellow(`  ⚠ Add <script src="i18n.js"></script> to your HTML`));
-}
+  writeFileSync(i18nFile, content, 'utf-8');
+  console.log(chalk.green(`  ✓ Created ${i18nFile}`));
+
+  if (autoImport) {
+    const injected = injectVanillaI18nEntrypoint(cwd);
+    if (!injected) {
+      console.log(chalk.yellow(`  ⚠ Add <script src="i18n.js"></script> to your HTML`));
+    }
+  } else {
+    console.log(chalk.yellow(`  ⚠ Add <script src="i18n.js"></script> to your HTML`));
+  }
+}
+
+function injectVueEntrypoint(cwd, isVue3) {
+  const candidates = [
+    join(cwd, 'src', 'main.ts'),
+    join(cwd, 'src', 'main.js'),
+    join(cwd, 'src', 'main.tsx'),
+    join(cwd, 'src', 'main.jsx'),
+  ];
+
+  const mainFile = candidates.find((p) => existsSync(p));
+  if (!mainFile) return false;
+
+  let code = readFileSync(mainFile, 'utf-8');
+
+  const hasI18nImport =
+    code.includes("from './i18n'") ||
+    code.includes('from "./i18n"') ||
+    code.includes("from './i18n.js'") ||
+    code.includes('from "./i18n.js"') ||
+    code.includes("import './i18n'") ||
+    code.includes('import "./i18n"');
+
+  if (!hasI18nImport) {
+    const importRe = /^import\s.+?;\s*$/gm;
+    let lastImportEnd = 0;
+    let m;
+    while ((m = importRe.exec(code)) !== null) lastImportEnd = m.index + m[0].length;
+    code =
+      code.slice(0, lastImportEnd) +
+      `\nimport i18n from './i18n';\n` +
+      code.slice(lastImportEnd);
+  }
+
+  if (isVue3) {
+    if (!code.includes('.use(i18n)') && !code.includes('use(i18n)')) {
+      const chained = /createApp\(([^)]*)\)\s*\.mount\(/;
+      if (chained.test(code)) {
+        code = code.replace(chained, 'createApp($1).use(i18n).mount(');
+      } else {
+        const hasAppVar =
+          /\bconst\s+app\s*=\s*createApp\(/.test(code) ||
+          /\blet\s+app\s*=\s*createApp\(/.test(code);
+        const mountIdx = code.indexOf('app.mount(');
+        if (hasAppVar && mountIdx !== -1 && !code.includes('app.use(i18n')) {
+          code = code.slice(0, mountIdx) + `app.use(i18n);\n` + code.slice(mountIdx);
+        } else {
+          return false;
+        }
+      }
+    }
+  } else {
+    if (!/\bi18n\s*[:,]/.test(code)) {
+      const newVue = /new\s+Vue\s*\(\s*\{/;
+      if (newVue.test(code)) {
+        code = code.replace(newVue, (m) => m + '\n  i18n,');
+      } else {
+        return false;
+      }
+    }
+  }
+
+  writeFileSync(mainFile, code, 'utf-8');
+  console.log(chalk.green(`  ✓ Updated ${mainFile} (wired i18n)`));
+  return true;
+}
+
+function injectReactEntrypoint(cwd) {
+  const candidates = [
+    join(cwd, 'src', 'index.tsx'),
+    join(cwd, 'src', 'index.js'),
+    join(cwd, 'src', 'main.tsx'),
+    join(cwd, 'src', 'main.jsx'),
+  ];
+
+  const entryFile = candidates.find((p) => existsSync(p));
+  if (!entryFile) return false;
+
+  let code = readFileSync(entryFile, 'utf-8');
+  if (
+    code.includes("from './i18n'") ||
+    code.includes('from "./i18n"') ||
+    code.includes("import './i18n'") ||
+    code.includes('import "./i18n"')
+  ) {
+    return true;
+  }
+
+  const importRe = /^import\s.+?;\s*$/gm;
+  let lastImportEnd = 0;
+  let m;
+  while ((m = importRe.exec(code)) !== null) lastImportEnd = m.index + m[0].length;
+  code = code.slice(0, lastImportEnd) + `\nimport './i18n';\n` + code.slice(lastImportEnd);
+
+  writeFileSync(entryFile, code, 'utf-8');
+  console.log(chalk.green(`  ✓ Updated ${entryFile} (imported i18n)`));
+  return true;
+}
+
+function injectVanillaI18nEntrypoint(cwd) {
+  // Prefer HTML entrypoint if present
+  const htmlPath = join(cwd, 'index.html');
+  if (existsSync(htmlPath)) {
+    const html = readFileSync(htmlPath, 'utf-8');
+    if (!/\bi18n\.js\b/.test(html)) {
+      const scriptTag = `  <script src="./i18n.js"></script>\n`;
+      let updated = html;
+
+      const firstScript = updated.match(/<script\b/i);
+      if (firstScript) {
+        updated = updated.replace(firstScript[0], scriptTag + firstScript[0]);
+      } else if (updated.includes('</body>')) {
+        updated = updated.replace('</body>', scriptTag + '</body>');
+      } else if (updated.includes('</head>')) {
+        updated = updated.replace('</head>', scriptTag + '</head>');
+      } else {
+        updated += '\n' + scriptTag;
+      }
+
+      writeFileSync(htmlPath, updated, 'utf-8');
+      console.log(chalk.green(`  ✓ Updated ${htmlPath} (added i18n.js script)`));
+    }
+    return true;
+  }
+
+  // Fallback: ESM entrypoint
+  const jsPath = join(cwd, 'index.js');
+  if (existsSync(jsPath)) {
+    const js = readFileSync(jsPath, 'utf-8');
+    const alreadyImports = js.includes("./i18n.js") || js.includes("'./i18n.js'") || js.includes("\"./i18n.js\"");
+    if (!alreadyImports && /\b(import|export)\b/.test(js)) {
+      writeFileSync(jsPath, `import './i18n.js';\n` + js, 'utf-8');
+      console.log(chalk.green(`  ✓ Updated ${jsPath} (imported i18n.js)`));
+      return true;
+    }
+  }
+
+  return false;
+}

package/src/parsers/html.js

@@ -1,5 +1,6 @@
 import MagicString from 'magic-string';
 import { parse, NodeTypes } from '@vue/compiler-dom';
+import { parseJs } from './js.js';
 import { contextKey, isTranslatable } from '../utils.js';
 
 const ATTR_WHITELIST = new Set([
@@ -30,7 +31,7 @@ const CONTENT_TAGS = new Set([
   'td',
 ]);
 
-const SKIP_TAGS = new Set(['script', 'style', 'noscript']);
+const SKIP_TAGS = new Set(['style', 'noscript']);
 
 function stripTags(html) {
   return html.replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim();
@@ -71,6 +72,27 @@ export function parseHtml(source, filePath, project) {
 
     const openTagText = source.slice(node.loc.start.offset, openTagEnd);
 
+    // Special case: inline <script> blocks inside HTML
+    if (tag === 'script' && !node.isSelfClosing) {
+      const hasSrc = (node.props || []).some(
+        (p) => p.type === NodeTypes.ATTRIBUTE && p.name === 'src'
+      );
+      if (hasSrc) return;
+
+      const closeRel = node.loc.source.lastIndexOf('</');
+      if (closeRel > -1) {
+        const closeTagStart = node.loc.start.offset + closeRel;
+        const scriptJs = source.slice(openTagEnd + 1, closeTagStart);
+        const jsResult = parseJs(scriptJs, filePath, project);
+        if (jsResult.modified) {
+          s.overwrite(openTagEnd + 1, closeTagStart, jsResult.source);
+          extracted.push(...jsResult.extracted);
+        }
+      }
+
+      return;
+    }
+
     // 1) Extract translatable attributes
     for (const prop of node.props || []) {
       if (prop.type !== NodeTypes.ATTRIBUTE) continue;

package/src/parsers/js.js

@@ -1,8 +1,8 @@
-import * as babelParser from '@babel/parser';
-import _traverse from '@babel/traverse';
-import * as t from '@babel/types';
-import MagicString from 'magic-string';
-import { contextKey, isTranslatable } from '../utils.js';
+import * as babelParser from '@babel/parser';
+import _traverse from '@babel/traverse';
+import * as t from '@babel/types';
+import MagicString from 'magic-string';
+import { contextKey, isTranslatable } from '../utils.js';
 
 const traverse = _traverse.default || _traverse;
 
@@ -10,14 +10,37 @@ const traverse = _traverse.default || _traverse;
  * Parse a .js/.ts file and extract translatable strings.
  * These are strings in common UI patterns: alert(), confirm(), DOM manipulation, etc.
  */
-export function parseJs(source, filePath, project) {
-  const extracted = [];
-  const isTS = filePath.endsWith('.ts');
-
-  let ast;
-  try {
-    ast = babelParser.parse(source, {
-      sourceType: 'module',
+export function parseJs(source, filePath, project) {
+  const extracted = [];
+  const isTS = filePath.endsWith('.ts');
+
+  const tFuncFor = (key) => {
+    if (project.type === 'vanilla') return `i18n.t('${key}')`;
+    if (project.type === 'vue') return `this.$t('${key}')`;
+    return `t('${key}')`;
+  };
+
+  const translatableVarNames = new Set([
+    'title', 'pageTitle', 'heading', 'subheading', 'header', 'subtitle',
+    'label', 'placeholder', 'message', 'text', 'description', 'tooltip', 'hint', 'caption',
+    'error', 'errorMessage', 'success', 'successMessage',
+    'buttonText', 'linkText',
+  ]);
+
+  const translatableAttrNames = new Set([
+    'title',
+    'placeholder',
+    'label',
+    'alt',
+    'aria-label',
+    'aria-placeholder',
+    'aria-description',
+  ]);
+
+  let ast;
+  try {
+    ast = babelParser.parse(source, {
+      sourceType: 'module',
       plugins: [
         isTS ? 'typescript' : null,
         'classProperties',
@@ -33,12 +56,32 @@ export function parseJs(source, filePath, project) {
 
   const s = new MagicString(source);
 
-  // Track which string literals to translate
-  traverse(ast, {
-    // Object property values with translatable keys
-    ObjectProperty(path) {
-      const keyNode = path.node.key;
-      const valueNode = path.node.value;
+  // Track which string literals to translate
+  traverse(ast, {
+    VariableDeclarator(path) {
+      const { id, init } = path.node;
+      if (!init) return;
+      if (id.type !== 'Identifier') return;
+      if (!translatableVarNames.has(id.name)) return;
+
+      let value = null;
+      if (init.type === 'StringLiteral') value = init.value;
+      else if (init.type === 'TemplateLiteral' && init.expressions.length === 0) {
+        value = init.quasis[0]?.value?.cooked ?? '';
+      }
+
+      if (typeof value !== 'string' || !isTranslatable(value)) return;
+
+      const key = contextKey(value, filePath);
+      const tFunc = tFuncFor(key);
+      s.overwrite(init.start, init.end, tFunc);
+      extracted.push({ key, text: value, context: `js-var-${id.name}` });
+    },
+
+    // Object property values with translatable keys
+    ObjectProperty(path) {
+      const keyNode = path.node.key;
+      const valueNode = path.node.value;
 
       if (valueNode.type !== 'StringLiteral') return;
       if (!isTranslatable(valueNode.value)) return;
@@ -53,19 +96,19 @@ export function parseJs(source, filePath, project) {
         'name', 'displayName',
       ]);
 
-      if (!translatableKeys.has(keyName)) return;
+      if (!translatableKeys.has(keyName)) return;
+
+      const key = contextKey(valueNode.value, filePath);
+      const tFunc = tFuncFor(key);
+
+      s.overwrite(valueNode.start, valueNode.end, tFunc);
+      extracted.push({ key, text: valueNode.value, context: `js-prop-${keyName}` });
+    },
 
-      const key = contextKey(valueNode.value, filePath);
-      const tFunc = project.type === 'vue' ? `this.$t('${key}')` : `t('${key}')`;
-
-      s.overwrite(valueNode.start, valueNode.end, tFunc);
-      extracted.push({ key, text: valueNode.value, context: `js-prop-${keyName}` });
-    },
-
-    // Function calls: alert('text'), console messages excluded
-    CallExpression(path) {
-      const callee = path.node.callee;
-      let calleeName = '';
+    // Function calls: alert('text'), console messages excluded
+    CallExpression(path) {
+      const callee = path.node.callee;
+      let calleeName = '';
 
       if (callee.type === 'Identifier') {
         calleeName = callee.name;
@@ -76,19 +119,35 @@ export function parseJs(source, filePath, project) {
       // Skip console.*, require(), import()
       if (calleeName.startsWith('console.') || calleeName === 'require') return;
 
-      // Translate alert/confirm/prompt first arg
-      if (['alert', 'confirm', 'prompt'].includes(calleeName)) {
-        const arg = path.node.arguments[0];
-        if (arg && arg.type === 'StringLiteral' && isTranslatable(arg.value)) {
-          const key = contextKey(arg.value, filePath);
-          const tFunc = project.type === 'vue' ? `this.$t('${key}')` : `t('${key}')`;
-          s.overwrite(arg.start, arg.end, tFunc);
-          extracted.push({ key, text: arg.value, context: 'js-call' });
-        }
-      }
-
-      // .textContent = 'text', .innerText = 'text', .title = 'text'
-    },
+      // Translate alert/confirm/prompt first arg
+      if (['alert', 'confirm', 'prompt'].includes(calleeName)) {
+        const arg = path.node.arguments[0];
+        if (arg && arg.type === 'StringLiteral' && isTranslatable(arg.value)) {
+          const key = contextKey(arg.value, filePath);
+          const tFunc = tFuncFor(key);
+          s.overwrite(arg.start, arg.end, tFunc);
+          extracted.push({ key, text: arg.value, context: 'js-call' });
+        }
+      }
+
+      // element.setAttribute('title', '...')
+      if (callee.type === 'MemberExpression' && callee.property?.name === 'setAttribute') {
+        const [nameArg, valueArg] = path.node.arguments;
+        if (
+          nameArg?.type === 'StringLiteral' &&
+          valueArg?.type === 'StringLiteral' &&
+          translatableAttrNames.has(nameArg.value) &&
+          isTranslatable(valueArg.value)
+        ) {
+          const key = contextKey(valueArg.value, filePath);
+          const tFunc = tFuncFor(key);
+          s.overwrite(valueArg.start, valueArg.end, tFunc);
+          extracted.push({ key, text: valueArg.value, context: `js-attr-${nameArg.value}` });
+        }
+      }
+
+      // .textContent = 'text', .innerText = 'text', .title = 'text'
+    },
 
     // Assignment: element.textContent = 'text'
     AssignmentExpression(path) {
@@ -105,18 +164,14 @@ export function parseJs(source, filePath, project) {
           'alt', 'innerHTML',
         ]);
 
-        if (domProps.has(propName)) {
-          const key = contextKey(right.value, filePath);
-          const tFunc = project.type === 'vanilla'
-            ? `i18n.t('${key}')`
-            : project.type === 'vue'
-              ? `this.$t('${key}')`
-              : `t('${key}')`;
-
-          s.overwrite(right.start, right.end, tFunc);
-          extracted.push({ key, text: right.value, context: `js-dom-${propName}` });
-        }
-      }
+        if (domProps.has(propName)) {
+          const key = contextKey(right.value, filePath);
+          const tFunc = tFuncFor(key);
+
+          s.overwrite(right.start, right.end, tFunc);
+          extracted.push({ key, text: right.value, context: `js-dom-${propName}` });
+        }
+      }
     },
   });
 
@@ -125,4 +180,4 @@ export function parseJs(source, filePath, project) {
     extracted,
     modified: extracted.length > 0,
   };
-}
+}