bctranslate 1.0.0-beta.1

package/src/parsers/html.js

@@ -0,0 +1,161 @@
+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([
+  'title',
+  'placeholder',
+  'label',
+  'alt',
+  'aria-label',
+  'aria-placeholder',
+  'aria-description',
+]);
+
+const CONTENT_TAGS = new Set([
+  'title',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'p',
+  'a',
+  'button',
+  'label',
+  'option',
+  'li',
+  'th',
+  'td',
+]);
+
+const SKIP_TAGS = new Set(['style', 'noscript']);
+
+function stripTags(html) {
+  return html.replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim();
+}
+
+function maybeWrapInlineScriptForI18nReady(script) {
+  if (!/\bi18n\.t\s*\(/.test(script)) return script;
+  if (/\bi18n\.ready\b/.test(script)) return script;
+  if (!/\bcreateApp\b|\bapp\.mount\b|document\./.test(script)) return script;
+
+  const trimmed = script.trim();
+  const indent = (script.match(/^\s*/) || [''])[0];
+  const body = trimmed
+    .split('\n')
+    .map((l) => (l.length ? indent + '  ' + l : l))
+    .join('\n');
+
+  return (
+    `${indent}(async () => {\n` +
+    `${indent}  if (i18n.ready) await i18n.ready;\n` +
+    `${body}\n` +
+    `${indent}})();`
+  );
+}
+
+/**
+ * Parse an HTML file and extract translatable strings.
+ * For vanilla HTML, we use data-i18n attributes instead of $t() calls.
+ */
+export function parseHtml(source, filePath, project) {
+  const extracted = [];
+  const s = new MagicString(source);
+
+  const ast = parse(source, { comments: false });
+
+  function visit(node) {
+    if (!node) return;
+    if (Array.isArray(node)) {
+      for (const child of node) visit(child);
+      return;
+    }
+
+    if (node.type === NodeTypes.ROOT) {
+      visit(node.children);
+      return;
+    }
+
+    if (node.type !== NodeTypes.ELEMENT) return;
+
+    const tag = (node.tag || '').toLowerCase();
+    if (SKIP_TAGS.has(tag)) return;
+
+    const openTagEnd = source.indexOf('>', node.loc.start.offset);
+    if (openTagEnd < 0 || openTagEnd > node.loc.end.offset) {
+      visit(node.children);
+      return;
+    }
+
+    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) {
+          const wrapped = maybeWrapInlineScriptForI18nReady(jsResult.source);
+          s.overwrite(openTagEnd + 1, closeTagStart, wrapped);
+          extracted.push(...jsResult.extracted);
+        }
+      }
+
+      return;
+    }
+
+    // 1) Extract translatable attributes
+    for (const prop of node.props || []) {
+      if (prop.type !== NodeTypes.ATTRIBUTE) continue;
+      const name = prop.name;
+      if (!ATTR_WHITELIST.has(name)) continue;
+      const value = prop.value?.content;
+      if (!value || !isTranslatable(value)) continue;
+
+      const marker = `data-i18n-${name}`;
+      if (openTagText.includes(marker)) continue;
+
+      const key = contextKey(value, filePath);
+      s.appendRight(prop.loc.end.offset, ` ${marker}="${key}"`);
+      extracted.push({ key, text: value, context: `html-attr-${name}` });
+    }
+
+    // 2) Extract element inner HTML for common content tags
+    if (CONTENT_TAGS.has(tag) && !node.isSelfClosing) {
+      const closeRel = node.loc.source.lastIndexOf('</');
+      if (closeRel > -1) {
+        const closeTagStart = node.loc.start.offset + closeRel;
+        const innerHtml = source.slice(openTagEnd + 1, closeTagStart);
+        const text = innerHtml.trim();
+        const plain = stripTags(text);
+
+        const marker = tag === 'title' ? 'data-i18n-title' : 'data-i18n';
+        if (!openTagText.includes(marker) && isTranslatable(plain)) {
+          const key = contextKey(text, filePath);
+          s.appendLeft(openTagEnd, ` ${marker}="${key}"`);
+          extracted.push({ key, text, context: `html-inner-${tag}` });
+        }
+      }
+    }
+
+    visit(node.children);
+  }
+
+  visit(ast);
+
+  return {
+    source: extracted.length > 0 ? s.toString() : source,
+    extracted,
+    modified: extracted.length > 0,
+  };
+}

package/src/parsers/js.js

@@ -0,0 +1,156 @@
+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;
+
+/**
+ * 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');
+
+  const tFuncFor = (key) => {
+    if (project.type === 'vanilla') return `i18n.t('${key}')`;
+    if (project.type === 'vue') return `this.$t('${key}')`;
+    return `t('${key}')`;
+  };
+
+  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',
+        'optionalChaining',
+        'nullishCoalescingOperator',
+        'decorators-legacy',
+        'dynamicImport',
+      ].filter(Boolean),
+    });
+  } catch {
+    return { source, extracted: [], modified: false };
+  }
+
+  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;
+
+      if (valueNode.type !== 'StringLiteral') return;
+      if (!isTranslatable(valueNode.value)) return;
+
+      // Check if the key name suggests translatable content
+      const keyName = keyNode.name || keyNode.value || '';
+      const translatableKeys = new Set([
+        'title', 'label', 'placeholder', 'message', 'text',
+        'description', 'tooltip', 'hint', 'caption', 'header',
+        'subtitle', 'errorMessage', 'successMessage', 'content',
+        'heading', 'subheading', 'buttonText', 'linkText',
+        'name', 'displayName',
+      ]);
+
+      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}` });
+    },
+
+    // Function calls: alert('text'), console messages excluded
+    CallExpression(path) {
+      const callee = path.node.callee;
+      let calleeName = '';
+
+      if (callee.type === 'Identifier') {
+        calleeName = callee.name;
+      } else if (callee.type === 'MemberExpression' && callee.property) {
+        calleeName = `${callee.object?.name || ''}.${callee.property.name}`;
+      }
+
+      // 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 = 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) {
+      const left = path.node.left;
+      const right = path.node.right;
+
+      if (right.type !== 'StringLiteral') return;
+      if (!isTranslatable(right.value)) return;
+
+      if (left.type === 'MemberExpression' && left.property) {
+        const propName = left.property.name || left.property.value;
+        const domProps = new Set([
+          'textContent', 'innerText', 'title', 'placeholder',
+          'alt', 'innerHTML',
+        ]);
+
+        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}` });
+        }
+      }
+    },
+  });
+
+  return {
+    source: extracted.length > 0 ? s.toString() : source,
+    extracted,
+    modified: extracted.length > 0,
+  };
+}

package/src/parsers/json.js

@@ -0,0 +1,93 @@
+import { isTranslatable } from '../utils.js';
+
+/**
+ * Parse a JSON file and extract translatable string values.
+ * Handles nested objects. Does NOT translate:
+ * - Keys (object property names)
+ * - Array items that look like identifiers/codes
+ * - Non-string values
+ * - Strings that look like code, URLs, paths, etc.
+ */
+export function parseJson(source, filePath, options = {}) {
+  const { jsonMode = 'values' } = options;
+  let data;
+
+  try {
+    data = JSON.parse(source);
+  } catch {
+    return { source, extracted: [], modified: false, jsonData: null };
+  }
+
+  const extracted = [];
+
+  // Walk the JSON and collect translatable strings
+  walkJson(data, [], extracted, jsonMode);
+
+  return {
+    source,
+    extracted,
+    modified: extracted.length > 0,
+    jsonData: data,
+  };
+}
+
+function walkJson(obj, path, extracted, mode) {
+  if (obj === null || obj === undefined) return;
+
+  if (typeof obj === 'string') {
+    if (isTranslatable(obj) && obj.length > 1) {
+      const key = path.join('.');
+      extracted.push({ key, text: obj, context: 'json-value', jsonPath: path });
+    }
+    return;
+  }
+
+  if (Array.isArray(obj)) {
+    // For arrays, only translate string items that look like real text
+    for (let i = 0; i < obj.length; i++) {
+      const item = obj[i];
+      if (typeof item === 'string' && isTranslatable(item) && item.includes(' ')) {
+        // Only translate multi-word strings in arrays (skip identifiers)
+        const key = [...path, i].join('.');
+        extracted.push({ key, text: item, context: 'json-array', jsonPath: [...path, i] });
+      } else if (typeof item === 'object') {
+        walkJson(item, [...path, i], extracted, mode);
+      }
+    }
+    return;
+  }
+
+  if (typeof obj === 'object') {
+    for (const [k, v] of Object.entries(obj)) {
+      walkJson(v, [...path, k], extracted, mode);
+    }
+  }
+}
+
+/**
+ * Apply translations to a JSON object by path.
+ */
+export function applyJsonTranslations(data, translations) {
+  const result = JSON.parse(JSON.stringify(data)); // deep clone
+
+  for (const [dotPath, translatedText] of Object.entries(translations)) {
+    const parts = dotPath.split('.');
+    let target = result;
+
+    for (let i = 0; i < parts.length - 1; i++) {
+      const key = isNaN(parts[i]) ? parts[i] : parseInt(parts[i]);
+      if (target[key] === undefined) break;
+      target = target[key];
+    }
+
+    const lastKey = isNaN(parts[parts.length - 1])
+      ? parts[parts.length - 1]
+      : parseInt(parts[parts.length - 1]);
+
+    if (target && target[lastKey] !== undefined) {
+      target[lastKey] = translatedText;
+    }
+  }
+
+  return result;
+}

package/src/parsers/react.js

@@ -0,0 +1,148 @@
+import * as babelParser from '@babel/parser';
+import _traverse from '@babel/traverse';
+import MagicString from 'magic-string';
+import { contextKey, isTranslatable } from '../utils.js';
+
+// Handle ESM default export quirks
+const traverse = _traverse.default || _traverse;
+
+/**
+ * Non-translatable JSX attribute names.
+ */
+const ATTR_BLACKLIST = new Set([
+  'className', 'id', 'style', 'key', 'ref', 'src', 'href',
+  'type', 'name', 'value', 'htmlFor', 'tabIndex', 'role',
+  'data-testid', 'data-cy', 'onClick', 'onChange', 'onSubmit',
+  'onFocus', 'onBlur', 'onKeyDown', 'onKeyUp', 'onMouseEnter',
+  'onMouseLeave', 'target', 'rel', 'method', 'action',
+]);
+
+const ATTR_WHITELIST = new Set([
+  'title', 'placeholder', 'label', 'alt', 'aria-label',
+  '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 = [];
+  const isTS = filePath.endsWith('.tsx') || filePath.endsWith('.ts');
+
+  let ast;
+  try {
+    ast = babelParser.parse(source, {
+      sourceType: 'module',
+      plugins: [
+        'jsx',
+        isTS ? 'typescript' : null,
+        'classProperties',
+        'optionalChaining',
+        'nullishCoalescingOperator',
+        'decorators-legacy',
+      ].filter(Boolean),
+    });
+  } catch {
+    return { source, extracted: [], modified: false };
+  }
+
+  const s = new MagicString(source);
+  let hookInsertPos = -1;
+
+  traverse(ast, {
+    // JSX text children: <div>Hello World</div>
+    JSXText(path) {
+      const text = path.node.value.trim();
+      if (!isTranslatable(text)) return;
+
+      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' });
+
+      if (hookInsertPos === -1) hookInsertPos = findComponentBodyStart(path);
+    },
+
+    // JSX string attributes: <input placeholder="Enter name" />
+    JSXAttribute(path) {
+      const name = path.node.name?.name;
+      if (!name || ATTR_BLACKLIST.has(name)) return;
+
+      const value = path.node.value;
+      if (!value || value.type !== 'StringLiteral') return;
+
+      const text = value.value;
+      if (!isTranslatable(text)) return;
+      if (!ATTR_WHITELIST.has(name) && text.length < 3) return;
+
+      const key = contextKey(text, filePath);
+      s.overwrite(path.node.start, path.node.end, `${name}={t('${key}')}`);
+      extracted.push({ key, text, context: `jsx-attr-${name}` });
+
+      if (hookInsertPos === -1) hookInsertPos = findComponentBodyStart(path);
+    },
+
+    // alert('...'), confirm('...')
+    CallExpression(path) {
+      const callee = path.node.callee;
+      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' });
+      }
+    },
+  });
+
+  // ── 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(lastImportEnd, `\nimport { useTranslation } from 'react-i18next';`);
+    }
+
+    if (!source.includes('useTranslation()') && hookInsertPos > 0) {
+      s.appendRight(hookInsertPos, `\n  const { t } = useTranslation();\n`);
+    }
+  }
+
+  return {
+    source: extracted.length > 0 ? s.toString() : source,
+    extracted,
+    modified: extracted.length > 0,
+  };
+}