anylang-dev 0.1.3 → 0.2.0

package/README.md

@@ -1,13 +1,13 @@
 # anylang-dev
 
-`anylang-dev` is a small bring-your-own-key website translation CLI. It scans your source code for explicit translation calls and writes JSON locale files.
+`anylang-dev` is a bring-your-own-key website translation CLI and Vite plugin. It scans your source code, writes JSON locale files, and can automatically translate static JSX text.
 
-```js
-const title = $tr("home.title", "This would get translated");
-const untouched = "This stays as it is";
+```tsx
+<h1>Translate your website with anylang</h1>
+<p tr="false">This text stays as it is</p>
 ```
 
-It works in JSX and TSX when the text is wrapped in a JavaScript expression:
+For dynamic text, use the generated `useTr` hook:
 
 ```tsx
 export function Hero() {
@@ -15,11 +15,9 @@ export function Hero() {
 
   return (
     <section>
-      <h1>{$tr("home.title", "Welcome back")}</h1>
-      <button aria-label={$tr("actions.saveChanges", "Save changes")}>
-        {$tr("actions.save", "Save")}
-      </button>
-      <p>This plain JSX text stays as it is.</p>
+      <h1>Welcome back</h1>
+      <button>{$tr("actions.save", "Save")}</button>
+      <p tr="false">BrandName</p>
     </section>
   );
 }
@@ -62,6 +60,18 @@ anylang init
 anylang scan
 ```
 
+Add the Vite plugin:
+
+```ts
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import anylang from "anylang-dev/vite";
+
+export default defineConfig({
+  plugins: [anylang(), react()],
+});
+```
+
 `anylang scan` creates locale files without calling a translation provider. To translate for real with Gemini, add your own API key to `.env` in the project where you run `anylang`:
 
 ```env
@@ -90,6 +100,10 @@ anylang translate
     "importFrom": "anylang-dev/runtime"
   },
   "functionName": "$tr",
+  "autoTranslate": {
+    "jsx": true,
+    "keyPrefix": "auto"
+  },
   "provider": {
     "name": "gemini",
     "model": "gemini-2.5-flash"
@@ -159,12 +173,15 @@ The lock file stores SHA-256 fingerprints so unchanged strings are skipped on la
 
 ## Workflow
 
-1. Wrap source text in your app:
+1. Write normal static JSX text:
 
 ```tsx
-<h1>{$tr("hero.title", "Translate your website with anylang")}</h1>
+<h1>Translate your website with anylang</h1>
+<p tr="false">Do not translate this text</p>
 ```
 
+Use `$tr("key", "source text")` only for dynamic or special cases.
+
 2. Scan the project:
 
 ```bash
@@ -190,7 +207,7 @@ Source locale output:
 
 ```json
 {
-  "hero.title": {
+  "auto.src_app.translate_your_website_with_anylang_a1b2c3d4": {
     "text": "Translate your website with anylang",
     "variables": []
   }
@@ -201,7 +218,7 @@ Target locale output:
 
 ```json
 {
-  "hero.title": {
+  "auto.src_app.translate_your_website_with_anylang_a1b2c3d4": {
     "source": "Translate your website with anylang",
     "text": "anylang से अपनी वेबसाइट का अनुवाद करें",
     "variables": []
@@ -240,8 +257,16 @@ Then use translations in any component:
 
 ```tsx
 function Hero() {
+  return <h1>Translate your website with anylang</h1>;
+}
+```
+
+For dynamic text:
+
+```tsx
+function SaveButton() {
   const $tr = useTr();
-  return <h1>{$tr("hero.title", "Translate your website with anylang")}</h1>;
+  return <button>{$tr("actions.save", "Save")}</button>;
 }
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anylang-dev",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Bring-your-own-key website translation JSON generator.",
   "type": "module",
   "files": [
@@ -17,7 +17,8 @@
     "./runtime": {
       "types": "./src/runtime.d.ts",
       "default": "./src/runtime.js"
-    }
+    },
+    "./vite": "./src/vite.js"
   },
   "scripts": {
     "test": "node --test"
@@ -37,5 +38,11 @@
     "type": "git",
     "url": "git+ssh://git@github.com/akshaywritescode/anylang-dev.git"
   },
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {
+    "@babel/generator": "^7.29.7",
+    "@babel/parser": "^7.29.7",
+    "@babel/traverse": "^7.29.7",
+    "@babel/types": "^7.29.7"
+  }
 }

package/src/config.js

@@ -12,6 +12,10 @@ export const DEFAULT_CONFIG = {
     importFrom: "anylang-dev/runtime"
   },
   functionName: "$tr",
+  autoTranslate: {
+    jsx: true,
+    keyPrefix: "auto"
+  },
   provider: {
     name: "gemini",
     baseUrl: "https://generativelanguage.googleapis.com/v1beta",

package/src/extract.js

@@ -1,5 +1,6 @@
 import { readdir, readFile } from "node:fs/promises";
 import path from "node:path";
+import { extractAutoJsxStrings } from "./jsx.js";
 
 const DEFAULT_EXTENSIONS = new Set([".js", ".jsx", ".ts", ".tsx", ".vue", ".html", ".svelte", ".astro"]);
 
@@ -20,11 +21,27 @@ export async function extractProjectStrings(config) {
         ...lineColumnForIndex(source, match.index)
       });
     }
+    if (config.autoTranslate?.jsx !== false && isJsxFile(file)) {
+      for (const match of extractAutoJsxStrings(source, file, config.autoTranslate || {})) {
+        const key = `${match.key}\0${file}\0${match.index}`;
+        if (seen.has(key)) continue;
+        seen.add(key);
+        items.push({
+          ...match,
+          file,
+          ...lineColumnForIndex(source, match.index)
+        });
+      }
+    }
   }
 
   return { files, items };
 }
 
+function isJsxFile(file) {
+  return /\.(jsx|tsx)$/.test(file);
+}
+
 export function extractFromSource(source, functionName = "$tr") {
   const matches = [];
   let index = 0;

package/src/jsx.js

@@ -0,0 +1,179 @@
+import { createHash } from "node:crypto";
+import path from "node:path";
+import { parse } from "@babel/parser";
+import generate from "@babel/generator";
+import traverseModule from "@babel/traverse";
+import * as t from "@babel/types";
+
+const traverse = traverseModule.default || traverseModule;
+export function extractAutoJsxStrings(source, filePath, options = {}) {
+  const ast = parseJsx(source, filePath);
+  const items = [];
+
+  traverse(ast, {
+    JSXElement(pathRef) {
+      if (isTranslationDisabled(pathRef.node.openingElement)) {
+        pathRef.skip();
+      }
+    },
+    JSXText(pathRef) {
+      if (hasDisabledAncestor(pathRef)) return;
+      const text = normalizeJsxText(pathRef.node.value);
+      if (!isTranslatableText(text)) return;
+
+      items.push(autoItem({
+        text,
+        filePath,
+        index: pathRef.node.start || 0,
+        prefix: options.keyPrefix
+      }));
+    }
+  });
+
+  return items;
+}
+
+export function transformAutoJsx(source, filePath, options = {}) {
+  const ast = parseJsx(source, filePath);
+  let changed = false;
+
+  traverse(ast, {
+    JSXElement(pathRef) {
+      if (isTranslationDisabled(pathRef.node.openingElement)) {
+        removeTrFalseAttribute(pathRef.node.openingElement);
+        pathRef.skip();
+      }
+    },
+    JSXText(pathRef) {
+      if (hasDisabledAncestor(pathRef)) return;
+      const text = normalizeJsxText(pathRef.node.value);
+      if (!isTranslatableText(text)) return;
+
+      pathRef.replaceWith(t.jsxExpressionContainer(anyLangTextElement({
+        key: autoKey(text, filePath, options.keyPrefix),
+        text
+      })));
+      changed = true;
+    }
+  });
+
+  if (!changed) return { code: source, changed: false };
+  ensureAnyLangTextImport(ast, options.runtimeImport || "/src/anylang.ts");
+
+  return {
+    code: generate.default(ast, { retainLines: true }, source).code,
+    changed: true
+  };
+}
+
+function parseJsx(source, filePath) {
+  return parse(source, {
+    sourceType: "module",
+    sourceFilename: filePath,
+    plugins: ["jsx", "typescript"]
+  });
+}
+
+function autoItem({ text, filePath, index, prefix }) {
+  return {
+    key: autoKey(text, filePath, prefix),
+    value: text,
+    variables: [],
+    index,
+    raw: text,
+    auto: true
+  };
+}
+
+function autoKey(text, filePath, prefix = "auto") {
+  const relative = path.relative(process.cwd(), filePath).split(path.sep).join("/");
+  const fileSlug = slug(relative.replace(/\.[^.]+$/, ""));
+  const textSlug = slug(text).slice(0, 36) || "text";
+  const hash = createHash("sha1").update(`${relative}\0${text}`).digest("hex").slice(0, 8);
+  return `${prefix}.${fileSlug}.${textSlug}_${hash}`;
+}
+
+function slug(value) {
+  return value
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "_")
+    .replace(/^_+|_+$/g, "");
+}
+
+function normalizeJsxText(value) {
+  return value
+    .split(/\r?\n/)
+    .map((line) => line.replace(/\s+/g, " ").trim())
+    .filter(Boolean)
+    .join(" ");
+}
+
+function isTranslatableText(text) {
+  if (!text) return false;
+  if (!/[A-Za-z0-9]/.test(text)) return false;
+  return true;
+}
+
+function isTranslationDisabled(openingElement) {
+  return openingElement.attributes.some((attribute) => {
+    if (!t.isJSXAttribute(attribute) || !t.isJSXIdentifier(attribute.name) || attribute.name.name !== "tr") {
+      return false;
+    }
+    if (!attribute.value) return true;
+    if (t.isStringLiteral(attribute.value)) return attribute.value.value === "false";
+    return (
+      t.isJSXExpressionContainer(attribute.value) &&
+      t.isBooleanLiteral(attribute.value.expression) &&
+      attribute.value.expression.value === false
+    );
+  });
+}
+
+function removeTrFalseAttribute(openingElement) {
+  openingElement.attributes = openingElement.attributes.filter((attribute) => {
+    return !(t.isJSXAttribute(attribute) && t.isJSXIdentifier(attribute.name) && attribute.name.name === "tr");
+  });
+}
+
+function hasDisabledAncestor(pathRef) {
+  return Boolean(pathRef.findParent((parent) => {
+    return parent.isJSXElement() && isTranslationDisabled(parent.node.openingElement);
+  }));
+}
+
+function anyLangTextElement({ key, text }) {
+  return t.jsxElement(
+    t.jsxOpeningElement(t.jsxIdentifier("AnyLangText"), [
+      t.jsxAttribute(t.jsxIdentifier("k"), t.stringLiteral(key)),
+      t.jsxAttribute(t.jsxIdentifier("source"), t.stringLiteral(text))
+    ], true),
+    null,
+    [],
+    true
+  );
+}
+
+function ensureAnyLangTextImport(ast, runtimeImport) {
+  const body = ast.program.body;
+  const existing = body.find((node) => {
+    return t.isImportDeclaration(node) && node.source.value === runtimeImport;
+  });
+
+  if (existing) {
+    ensureSpecifier(existing, "AnyLangText");
+    return;
+  }
+
+  body.unshift(t.importDeclaration([
+    t.importSpecifier(t.identifier("AnyLangText"), t.identifier("AnyLangText"))
+  ], t.stringLiteral(runtimeImport)));
+}
+
+function ensureSpecifier(importDeclaration, name) {
+  const hasSpecifier = importDeclaration.specifiers.some((specifier) => {
+    return t.isImportSpecifier(specifier) && specifier.imported.name === name;
+  });
+  if (!hasSpecifier) {
+    importDeclaration.specifiers.push(t.importSpecifier(t.identifier(name), t.identifier(name)));
+  }
+}

package/src/pipeline.js

@@ -233,6 +233,11 @@ export function useTr() {
   if (!context) throw new Error('useTr must be used inside AnyLangProvider')
   return context.$tr
 }
+
+export function AnyLangText({ k, source }: { k: string; source: string }) {
+  const $tr = useTr()
+  return $tr(k, source)
+}
 `;
 }
 

package/src/vite.js

@@ -0,0 +1,25 @@
+import { transformAutoJsx } from "./jsx.js";
+
+const JSX_EXTENSIONS = /\.(jsx|tsx)$/;
+
+export default function anylang(options = {}) {
+  return {
+    name: "anylang-dev",
+    enforce: "pre",
+    transform(code, id) {
+      if (!JSX_EXTENSIONS.test(id)) return null;
+      if (id.includes("node_modules")) return null;
+
+      const result = transformAutoJsx(code, id, {
+        keyPrefix: options.keyPrefix,
+        runtimeImport: options.runtimeImport || "/src/anylang.ts"
+      });
+
+      if (!result.changed) return null;
+      return {
+        code: result.code,
+        map: null
+      };
+    }
+  };
+}