ai-localize-codemods 1.0.0

package/src/cdn-replacer.ts

@@ -0,0 +1,102 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+import type { LegacyCdnUrl, CloudFrontAsset } from '@ai-localize/shared';
+
+export interface CdnReplacementResult {
+  filePath: string;
+  replacedCount: number;
+  changed: boolean;
+  originalContent: string;
+  transformedContent: string;
+}
+
+/**
+ * Replaces legacy CDN URLs with CloudFront URLs in source files.
+ * Supports: TS/JS/JSX/TSX/CSS/HTML/Vue
+ */
+export class CdnReplacer {
+  private assetMap: Map<string, CloudFrontAsset>;
+
+  constructor(assets: CloudFrontAsset[]) {
+    this.assetMap = new Map();
+  for (const asset of assets) {
+      this.assetMap.set(asset.localPath, asset);
+      // Also index by asset path without leading slash
+      this.assetMap.set(asset.s3Key, asset);
+    }
+  }
+
+  replaceInFile(
+    filePath: string,
+    legacyUrls: LegacyCdnUrl[],
+    dryRun = false
+  ): CdnReplacementResult {
+    let content: string;
+    try {
+      content = fs.readFileSync(filePath, 'utf-8');
+    } catch {
+      return { filePath, replacedCount: 0, changed: false, originalContent: '', transformedContent: '' };
+    }
+
+    let transformedContent = content;
+    let replacedCount = 0;
+
+    for (const legacyUrl of legacyUrls) {
+      // Find the corresponding CloudFront asset
+      const asset = this.findAsset(legacyUrl.assetPath);
+    if (!asset) continue;
+
+      const escapedUrl = legacyUrl.url.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const re = new RegExp(escapedUrl, 'g');
+      const newCount = (transformedContent.match(re) || []).length;
+      transformedContent = transformedContent.replace(re, asset.cloudfrontUrl);
+      replacedCount += newCount;
+    }
+
+    if (replacedCount > 0 && !dryRun) {
+      fs.writeFileSync(filePath, transformedContent, 'utf-8');
+    }
+
+    return {
+  filePath,
+      replacedCount,
+      changed: replacedCount > 0,
+      originalContent: content,
+      transformedContent,
+    };
+  }
+
+  private findAsset(assetPath: string): CloudFrontAsset | undefined {
+    // Normalize path
+    const normalized = assetPath.replace(/^\//, '');
+    return (
+  this.assetMap.get(assetPath) ||
+      this.assetMap.get(normalized) ||
+      this.assetMap.get('/' + normalized) ||
+      // fuzzy match by filename
+      Array.from(this.assetMap.values()).find((a) =>
+   path.basename(a.localPath) === path.basename(assetPath)
+      )
+ );
+  }
+}
+
+/**
+ * Batch replace CDN URLs across multiple files.
+ */
+export async function batchReplaceCdnUrls(
+  fileUrlMap: Map<string, LegacyCdnUrl[]>,
+  assets: CloudFrontAsset[],
+  dryRun = false
+): Promise<CdnReplacementResult[]> {
+  const replacer = new CdnReplacer(assets);
+  const results: CdnReplacementResult[] = [];
+
+  for (const [filePath, legacyUrls] of fileUrlMap) {
+  const result = replacer.replaceInFile(filePath, legacyUrls, dryRun);
+    results.push(result);
+  }
+
+  return results;
+}

package/src/codemod-runner.ts

@@ -0,0 +1,117 @@
+import * as path from 'path';
+import type { Framework, DetectedText, LocalizationConfig } from '@ai-localize/shared';
+import type { CodemodResult } from './react-codemod.js';
+import { applyReactCodemod } from './react-codemod.js';
+import { applyVueCodemod } from './vue-codemod.js';
+import { applyAngularCodemod } from './angular-codemod.js';
+
+export interface CodemodRunOptions {
+  dryRun?: boolean;
+  onProgress?: (filePath: string, result: CodemodResult) => void;
+}
+
+export interface CodemodRunSummary {
+  totalFiles: number;
+  changedFiles: number;
+  totalReplacements: number;
+  importInjections: number;
+  hookInjections: number;
+  results: CodemodResult[];
+  duration: number;
+}
+
+/**
+ * Orchestrates codemods across all detected files.
+ * Groups detected texts by file and applies the appropriate codemod
+ * based on the project framework.
+ */
+export class CodemodRunner {
+  private config: LocalizationConfig;
+
+  constructor(config: LocalizationConfig) {
+    this.config = config;
+  }
+
+  async run(
+    detectedTexts: DetectedText[],
+    options: CodemodRunOptions = {}
+  ): Promise<CodemodRunSummary> {
+    const startTime = Date.now();
+    const { dryRun = false, onProgress } = options;
+
+    // Group texts by file
+    const fileTextMap = new Map<string, DetectedText[]>();
+    for (const dt of detectedTexts) {
+      const existing = fileTextMap.get(dt.filePath) || [];
+    existing.push(dt);
+      fileTextMap.set(dt.filePath, existing);
+  }
+
+    const results: CodemodResult[] = [];
+    let totalReplacements = 0;
+    let importInjections = 0;
+    let hookInjections = 0;
+
+    for (const [filePath, texts] of fileTextMap) {
+      let result: CodemodResult;
+ const framework = this.config.framework;
+
+      try {
+        result = this.applyCodemod(filePath, texts, framework, dryRun);
+      } catch (err) {
+        result = {
+          filePath,
+    originalContent: '',
+        transformedContent: '',
+          changed: false,
+          injectedImport: false,
+          injectedHook: false,
+          replacedTexts: 0,
+  };
+  }
+
+      results.push(result);
+totalReplacements += result.replacedTexts;
+      if (result.injectedImport) importInjections++;
+   if (result.injectedHook) hookInjections++;
+
+      onProgress?.(filePath, result);
+    }
+
+    return {
+      totalFiles: fileTextMap.size,
+      changedFiles: results.filter((r) => r.changed).length,
+      totalReplacements,
+ importInjections,
+      hookInjections,
+    results,
+      duration: Date.now() - startTime,
+    };
+  }
+
+  private applyCodemod(
+    filePath: string,
+    texts: DetectedText[],
+    framework: Framework,
+    dryRun: boolean
+  ): CodemodResult {
+    const ext = path.extname(filePath).toLowerCase();
+
+    // Vue SFCs
+    if (ext === '.vue') {
+      return applyVueCodemod(filePath, texts, dryRun);
+    }
+
+    // Angular templates or TS
+    if (
+      framework === 'angular' ||
+      framework === 'angular-ngx' ||
+      framework === 'angular-i18n'
+    ) {
+    return applyAngularCodemod(filePath, texts, dryRun);
+    }
+
+    // React (default for .tsx, .ts, .jsx, .js)
+    return applyReactCodemod(filePath, texts, dryRun);
+  }
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from './react-codemod.js';
+export * from './vue-codemod.js';
+export * from './angular-codemod.js';
+export * from './cdn-replacer.js';
+export * from './codemod-runner.js';

package/src/react-codemod.ts

@@ -0,0 +1,270 @@
+import * as fs from 'fs';
+import * as parser from '@babel/parser';
+import traverse from '@babel/traverse';
+import generate from '@babel/generator';
+import * as t from '@babel/types';
+
+import type { DetectedText } from '@ai-localize/shared';
+
+export interface CodemodResult {
+  filePath: string;
+  originalContent: string;
+  transformedContent: string;
+  changed: boolean;
+  injectedImport: boolean;
+  injectedHook: boolean;
+  replacedTexts: number;
+}
+
+const USE_TRANSLATION_IMPORT = 'react-i18next';
+const USE_TRANSLATION_HOOK = 'useTranslation';
+
+/**
+ * React i18n codemod: wraps hardcoded JSX text / string literals with t() calls.
+ * Preserves formatting, comments, and import order.
+ */
+export class ReactCodemod {
+  private filePath: string;
+  private content: string;
+  private texts: DetectedText[];
+
+  constructor(filePath: string, content: string, texts: DetectedText[]) {
+    this.filePath = filePath;
+    this.content = content;
+ this.texts = texts;
+  }
+
+  transform(): CodemodResult {
+    if (this.texts.length === 0) {
+      return {
+        filePath: this.filePath,
+originalContent: this.content,
+        transformedContent: this.content,
+     changed: false,
+        injectedImport: false,
+        injectedHook: false,
+  replacedTexts: 0,
+      };
+    }
+
+    let ast: t.File;
+    try {
+      ast = parser.parse(this.content, {
+        sourceType: 'module',
+        plugins: [
+          'jsx',
+          'typescript',
+          'decorators-legacy',
+       'classProperties',
+   'optionalChaining',
+          'nullishCoalescingOperator',
+      ],
+        errorRecovery: true,
+      });
+    } catch {
+    return {
+ filePath: this.filePath,
+        originalContent: this.content,
+        transformedContent: this.content,
+        changed: false,
+        injectedImport: false,
+    injectedHook: false,
+     replacedTexts: 0,
+ };
+    }
+
+    // Build a map of text -> key for fast lookup
+    const textKeyMap = new Map<string, string>();
+    for (const dt of this.texts) {
+      textKeyMap.set(dt.text, dt.suggestedKey);
+    }
+
+    let replacedTexts = 0;
+    let hasUseTranslationImport = false;
+    let hasUseTranslationHook = false;
+    let injectedImport = false;
+    let injectedHook = false;
+
+    // Check existing imports
+    traverse(ast, {
+      ImportDeclaration(nodePath) {
+        if (nodePath.node.source.value === USE_TRANSLATION_IMPORT) {
+          hasUseTranslationImport = true;
+      }
+      },
+      // Check if useTranslation hook already destructured
+      VariableDeclarator(nodePath) {
+    const id = nodePath.node.id;
+      if (
+ t.isObjectPattern(id) &&
+ id.properties.some(
+            (p) =>
+              t.isObjectProperty(p) &&
+ t.isIdentifier(p.key) &&
+         p.key.name === 't'
+  )
+        ) {
+          hasUseTranslationHook = true;
+ }
+      },
+    });
+
+    // Second pass: replace hardcoded texts
+  traverse(ast, {
+      JSXText(nodePath) {
+        const text = nodePath.node.value.trim();
+        if (!text) return;
+        const key = textKeyMap.get(text);
+        if (!key) return;
+
+        // Replace with {t('key')}
+   const tCall = t.jsxExpressionContainer(
+          t.callExpression(t.identifier('t'), [t.stringLiteral(key)])
+);
+        nodePath.replaceWith(tCall);
+        replacedTexts++;
+      },
+
+      StringLiteral(nodePath) {
+        const text = nodePath.node.value;
+        const key = textKeyMap.get(text);
+        if (!key) return;
+        if (t.isImportDeclaration(nodePath.parent)) return;
+        if (t.isObjectProperty(nodePath.parent) && nodePath.parent.key === nodePath.node) return;
+      if (t.isJSXAttribute(nodePath.parent)) return;
+
+        const tCall = t.callExpression(t.identifier('t'), [t.stringLiteral(key)]);
+        nodePath.replaceWith(tCall);
+        replacedTexts++;
+      },
+
+      JSXAttribute(nodePath) {
+        const valueNode = nodePath.node.value;
+   if (!t.isStringLiteral(valueNode)) return;
+      const text = valueNode.value;
+        const key = textKeyMap.get(text);
+        if (!key) return;
+
+        // Replace string with {t('key')} expression
+ nodePath.node.value = t.jsxExpressionContainer(
+          t.callExpression(t.identifier('t'), [t.stringLiteral(key)])
+   );
+        replacedTexts++;
+      },
+    });
+
+    if (replacedTexts === 0) {
+      return {
+        filePath: this.filePath,
+   originalContent: this.content,
+   transformedContent: this.content,
+      changed: false,
+    injectedImport: false,
+        injectedHook: false,
+        replacedTexts: 0,
+      };
+    }
+
+ // Inject import if needed
+    if (!hasUseTranslationImport) {
+      const importDecl = t.importDeclaration(
+   [t.importSpecifier(t.identifier(USE_TRANSLATION_HOOK), t.identifier(USE_TRANSLATION_HOOK))],
+      t.stringLiteral(USE_TRANSLATION_IMPORT)
+      );
+  ast.program.body.unshift(importDecl);
+injectedImport = true;
+    }
+
+    // Inject hook at the top of function components
+    if (!hasUseTranslationHook) {
+      this.injectUseTranslationHook(ast);
+      injectedHook = true;
+    }
+
+    // Generate output preserving formatting
+ const output = generate(
+      ast,
+      {
+        retainLines: false,
+    comments: true,
+        compact: false,
+      },
+      this.content
+);
+
+    return {
+      filePath: this.filePath,
+      originalContent: this.content,
+      transformedContent: output.code,
+      changed: true,
+injectedImport,
+      injectedHook,
+      replacedTexts,
+    };
+  }
+
+  private injectUseTranslationHook(ast: t.File): void {
+    traverse(ast, {
+      FunctionDeclaration(nodePath) {
+        if (!isReactComponent(nodePath.node.id?.name)) return;
+ injectHookIntoBody(nodePath.node.body);
+        nodePath.stop();
+      },
+ ArrowFunctionExpression(nodePath) {
+        if (!isReactComponentParent(nodePath)) return;
+        const body = nodePath.node.body;
+        if (t.isBlockStatement(body)) {
+    injectHookIntoBody(body);
+      nodePath.stop();
+        }
+      },
+    });
+  }
+}
+
+function isReactComponent(name?: string): boolean {
+  if (!name) return false;
+  return /^[A-Z]/.test(name);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isReactComponentParent(nodePath: any): boolean {
+  const parent = nodePath.parent;
+  if (t.isVariableDeclarator(parent)) {
+    const id = parent.id;
+    if (t.isIdentifier(id) && /^[A-Z]/.test(id.name)) return true;
+  }
+  return false;
+}
+
+function injectHookIntoBody(body: t.BlockStatement): void {
+  // const { t } = useTranslation();
+  const hookDecl = t.variableDeclaration('const', [
+    t.variableDeclarator(
+      t.objectPattern([
+    t.objectProperty(t.identifier('t'), t.identifier('t'), false, true),
+      ]),
+      t.callExpression(t.identifier('useTranslation'), [])
+    ),
+  ]);
+  body.body.unshift(hookDecl);
+}
+
+/**
+ * Applies the React codemod to a file in-place.
+ */
+export function applyReactCodemod(
+  filePath: string,
+  texts: DetectedText[],
+  dryRun = false
+): CodemodResult {
+  const content = fs.readFileSync(filePath, 'utf-8');
+  const codemod = new ReactCodemod(filePath, content, texts);
+  const result = codemod.transform();
+
+  if (result.changed && !dryRun) {
+    fs.writeFileSync(filePath, result.transformedContent, 'utf-8');
+  }
+
+  return result;
+}

package/src/vue-codemod.ts

@@ -0,0 +1,97 @@
+import * as fs from 'fs';
+
+import type { DetectedText } from '@ai-localize/shared';
+import type { CodemodResult } from './react-codemod.js';
+
+/**
+ * Vue i18n codemod: wraps hardcoded text with $t() calls in Vue SFCs.
+ * Handles both Options API and Composition API.
+ */
+export class VueCodemod {
+  private filePath: string;
+  private content: string;
+  private texts: DetectedText[];
+
+  constructor(filePath: string, content: string, texts: DetectedText[]) {
+    this.filePath = filePath;
+    this.content = content;
+    this.texts = texts;
+  }
+
+  transform(): CodemodResult {
+    if (this.texts.length === 0) {
+    return this.unchanged();
+  }
+
+    // Parse <template> and <script> sections separately
+    const templateMatch = this.content.match(/<template[^>]*>([\s\S]*?)<\/template>/);
+    const scriptMatch = this.content.match(/<script[^>]*>([\s\S]*?)<\/script>/);
+
+ if (!templateMatch && !scriptMatch) {
+      return this.unchanged();
+    }
+
+    const textKeyMap = new Map<string, string>();
+    for (const dt of this.texts) {
+      textKeyMap.set(dt.text, dt.suggestedKey);
+    }
+
+    let transformedContent = this.content;
+    let replacedTexts = 0;
+
+    // Replace in template: >text< => >{{ $t('key') }}<
+    if (templateMatch) {
+      let template = templateMatch[1];
+    for (const [text, key] of textKeyMap) {
+        const escaped = text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        const re = new RegExp(`(>\\s*)${escaped}(\\s*<)`, 'g');
+ template = template.replace(re, `$1{{ $t('${key}') }}$2`);
+        // Also replace in attribute values: title="text" => :title="$t('key')"
+  const attrRe = new RegExp(`((?:title|placeholder|alt|label)=)"(${escaped})"`, 'g');
+        template = template.replace(attrRe, `:$1"$t('${key}')"`);
+        replacedTexts++;
+      }
+      transformedContent = transformedContent.replace(templateMatch[1], template);
+    }
+
+    if (replacedTexts === 0) {
+      return this.unchanged();
+    }
+
+    return {
+      filePath: this.filePath,
+      originalContent: this.content,
+      transformedContent,
+      changed: true,
+      injectedImport: false, // vue-i18n is globally injected
+      injectedHook: false,
+      replacedTexts,
+    };
+  }
+
+  private unchanged(): CodemodResult {
+    return {
+    filePath: this.filePath,
+    originalContent: this.content,
+      transformedContent: this.content,
+  changed: false,
+      injectedImport: false,
+      injectedHook: false,
+      replacedTexts: 0,
+    };
+  }
+}
+
+export function applyVueCodemod(
+  filePath: string,
+  texts: DetectedText[],
+  dryRun = false
+): CodemodResult {
+  const content = fs.readFileSync(filePath, 'utf-8');
+  const codemod = new VueCodemod(filePath, content, texts);
+  const result = codemod.transform();
+  if (result.changed && !dryRun) {
+    fs.writeFileSync(filePath, result.transformedContent, 'utf-8');
+  }
+  return result;
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}