bctranslate 1.0.4 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bctranslate",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "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';
@@ -150,39 +150,102 @@ 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'));
-    });
-  }
-
-  // Auto-init
-  loadLocale('${from}');
-  loadLocale('${to}');
+    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}');
+  setLocale('${to}');
 
   window.i18n = { t: t, setLocale: setLocale, loadLocale: loadLocale };
 })();
 `;
 
-  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}`));
+
+  const injected = injectVanillaI18nEntrypoint(cwd);
+  if (!injected) {
+    console.log(chalk.yellow(`  ⚠ Add <script src="i18n.js"></script> to your HTML`));
+  }
+}
+
+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,
   };
-}
+}