i18n-lens-language-server 0.11.0 → 0.12.0

package/README.md

@@ -8,6 +8,7 @@ Zed extension plus Language Server for Vue, TypeScript, TSX, JavaScript and JSX.
 - Detect `$t`/`t`/`tc`/`$tc`/`i18n.t` calls, `v-t="'key'"`, `v-t="{ path: 'key' }"`, `<i18n-t keypath="key">` (Vue I18n), `<Trans i18nKey="key">` (react-i18next), and `formatMessage({ id: "key" })` (react-intl)
 - Hover: show all locale values for a key
 - Diagnostics: report missing keys, missing locale entries, mismatched interpolation params, and (on locale files) keys whose params differ across languages
+- Optional raw-text diagnostics: flag likely untranslated Vue/HTML template text and selected user-facing attributes
 - Quick fixes: add missing / remove unused interpolation params on supported i18n calls, and create a missing key in every locale file that lacks it
 - Completion: suggest existing i18n keys with default locale text
 - Definition: jump from a source key to its locale definition; when several locales define the key, pick which language file to open
@@ -82,6 +83,30 @@ For example, if `order.pay_now` exists in `zh-CN` but is missing from `en-US`, t
 Missing i18n key "order.pay_now" in locales: en-US
 ```
 
+### Optional untranslated template text detection
+
+Set `"rawTextDiagnostics": true` in `.zed/i18nlensrc.json` or under `lsp.i18n-lens.settings` to enable warnings with diagnostic code `raw-text`. It is **off by default**, works even without loaded locale files, and can be overridden per monorepo package.
+
+```json
+{
+  "rawTextDiagnostics": true
+}
+```
+
+This first version uses `htmlparser2` to inspect HTML documents and the top-level HTML `<template>` of Vue single-file components:
+
+- Literal text such as `<button>Save changes</button>`.
+- Static `title`, `alt`, `placeholder`, `label`, and `aria-label` attributes.
+- Whole, unescaped quoted literals on those bound attributes, such as `:placeholder="'Enter name'"` or `v-bind:title="'Helpful title'"`. Variables, translation calls, concatenations, template literals and other expressions are not evaluated.
+
+The natural-language heuristics are inspired by i18n Ally's raw-string detection, but this is **not full Ally parity**. They recognize multi-word phrases, title-cased labels and non-Latin text, while ignoring numbers, punctuation, URLs, paths and obvious identifier-like tokens. Lowercase single words, acronyms, text split across elements and ambiguous labels may be missed; names or technical phrases can still produce false positives. Warnings are suggestions, not proof that text must be translated.
+
+Comments, `script`/`style`, Vue custom blocks, interpolations (`{{ ... }}`), translation-component subtrees (`i18n-t`/`I18nT`, legacy `i18n`, `Trans`) and `v-t` elements are excluded. `code`/`pre`, `v-pre`, `v-html`, `v-text` and `translate="no"` subtrees are also skipped; use `translate="no"` to mark intentionally untranslated content. Vue templates using `src` or a non-HTML `lang` (such as Pug) are not inspected.
+
+There is no Babel/JavaScript/TypeScript/JSX string analysis, workspace-wide scan, automatic extraction or raw-text quick fix. Only open Vue/HTML buffers receive these warnings. The parser is tolerant of incomplete markup, not a full Vue compiler; complex or malformed templates can be missed. Existing key/parameter diagnostics and quick fixes are unchanged.
+
+For local development, HTML registration in `extension.toml` requires reinstalling the dev extension in Zed, then running `scripts/deploy-local.ps1` again and restarting the language server. Updating only the server does not register HTML buffers.
+
 ## Project configuration
 
 I18n Lens supports two configuration sources:
@@ -155,7 +180,8 @@ Supported options:
 | `localeDirs` | string[] | `src/locales`, `src/i18n`, `locales`, `i18n` | Workspace-relative directories to scan for locale files. In package configs, paths are relative to that package root. |
 | `inlayHints.enabled` | boolean | `true` | Enables or disables inline translation hints from this language server. Hover, completion, definition, diagnostics, and quick fixes can still work when inline hints are disabled. |
 | `inlayHints.maxLength` | number | `24` | Maximum inline hint label length before truncation. Hover still shows the full text. |
-| `packages` | array | `[]` | Optional monorepo package contexts. Each item needs a workspace-relative `root` and can override `defaultLocale`, `localeDirs`, and `inlayHints`. The language server picks the longest package root matching the currently edited file. |
+| `rawTextDiagnostics` | boolean | `false` | Opt-in warnings for likely untranslated Vue/HTML template text and selected attributes. No automatic extraction. |
+| `packages` | array | `[]` | Optional monorepo package contexts. Each item needs a workspace-relative `root` and can override `defaultLocale`, `localeDirs`, `inlayHints`, and `rawTextDiagnostics`. The language server picks the longest package root matching the currently edited file. |
 
 Invalid or missing config values fall back to defaults. If `.zed/i18nlensrc.json` contains invalid JSON, the language server logs a warning and continues with the Zed settings or default config.
 
@@ -202,7 +228,7 @@ For pnpm/turborepo and other monorepos, put `.zed/i18nlensrc.json` under the wor
 }
 ```
 
-When a document is opened, I18n Lens selects the package whose `root` is the longest path prefix of that document. `localeDirs` inside a package are resolved relative to that package root, so `apps/web/src/locales` and `packages/admin/src/i18n` are indexed independently. Package entries inherit root-level `defaultLocale`, `localeDirs`, and `inlayHints` unless they override them.
+When a document is opened, I18n Lens selects the package whose `root` is the longest path prefix of that document. `localeDirs` inside a package are resolved relative to that package root, so `apps/web/src/locales` and `packages/admin/src/i18n` are indexed independently. Package entries inherit root-level `defaultLocale`, `localeDirs`, `inlayHints`, and `rawTextDiagnostics` unless they override them.
 
 ## Local development
 
@@ -252,8 +278,8 @@ The published npm version can lag behind your working tree. To test local `serve
 ./scripts/deploy-local.ps1
 ```
 
-It runs `npm pack`, installs the tarball into `%LOCALAPPDATA%\Zed\extensions\work\i18n-lens\node_modules\i18n-lens-language-server` (the same layout Zed produces), then prompts you to run **restart language server** from the Zed command palette.
+It runs `npm pack`, installs the tarball into `%LOCALAPPDATA%\Zed\extensions\work\i18n-lens-language-server\node_modules\i18n-lens-language-server` (the same layout Zed produces), then prompts you to run **restart language server** from the Zed command palette.
 
-> To exercise the real install path instead, delete `%LOCALAPPDATA%\Zed\extensions\work\i18n-lens\node_modules` and restart the server — Zed will reinstall the published npm package.
+> To exercise the real install path instead, delete `%LOCALAPPDATA%\Zed\extensions\work\i18n-lens-language-server\node_modules` and restart the server — Zed will reinstall the published npm package.
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "i18n-lens-language-server",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "type": "module",
   "description": "Language server for configurable i18n inlay hints, hover, completion, diagnostics, definition, and references in Vue/TS/TSX/JS.",
   "license": "MIT",
@@ -20,6 +20,7 @@
     "start": "node server/index.js"
   },
   "dependencies": {
+    "htmlparser2": "^10.1.0",
     "vscode-languageserver": "^9.0.1",
     "vscode-languageserver-textdocument": "^1.0.12"
   }

package/server/core.js

@@ -1,12 +1,183 @@
+import { parseDocument, DomUtils } from 'htmlparser2';
+
 export const DEFAULT_CONFIG = Object.freeze({
   defaultLocale: 'zh-CN',
   localeDirs: Object.freeze(['src/locales', 'src/i18n', 'locales', 'i18n']),
   inlayHints: Object.freeze({ enabled: true, maxLength: 24 }),
+  rawTextDiagnostics: false,
   packages: Object.freeze([]),
 });
 
 export const CONFIG_RELATIVE_PATH = '.zed/i18nlensrc.json';
 
+const TRANSLATABLE_ATTRIBUTES = new Set(['title', 'alt', 'placeholder', 'label', 'aria-label']);
+const RAW_TEXT_SKIPPED_TAGS = new Set(['script', 'style', 'code', 'pre', 'i18n', 'i18n-t', 'i18nt', 'trans']);
+
+function isExcludedTemplateNode(node) {
+  const attrs = node.attribs || {};
+  return node.type === 'comment' || RAW_TEXT_SKIPPED_TAGS.has(node.name)
+    || attrs.translate?.toLowerCase() === 'no'
+    || Object.keys(attrs).some((name) => /^(?:v-t(?:\.|$)|v-pre$|v-html$|v-text$)/.test(name));
+}
+
+function isVueHtmlTemplate(node) {
+  return node.name === 'template' && !Object.hasOwn(node.attribs || {}, 'src')
+    && (!node.attribs?.lang || /^html$/i.test(node.attribs.lang));
+}
+
+function templateInterpolations(text, excludedRanges) {
+  const ranges = [];
+  let cursor = 0;
+  while ((cursor = text.indexOf('{{', cursor)) !== -1) {
+    const excluded = excludedRanges.find(({ start, end }) => cursor >= start && cursor < end);
+    if (excluded) {
+      cursor = excluded.end;
+      continue;
+    }
+    const start = cursor;
+    cursor += 2;
+    let quote;
+    let depth = 0;
+    for (; cursor < text.length; cursor++) {
+      const char = text[cursor];
+      if (quote) {
+        if (char === '\\') cursor++;
+        else if (char === quote) quote = undefined;
+      } else if (char === '"' || char === "'" || char === '`') {
+        quote = char;
+      } else if (text.startsWith('/*', cursor)) {
+        const end = text.indexOf('*/', cursor + 2);
+        cursor = end === -1 ? text.length : end + 1;
+      } else if (text.startsWith('//', cursor)) {
+        const end = text.indexOf('\n', cursor + 2);
+        cursor = end === -1 ? text.length : end;
+      } else if (char === '{') {
+        depth++;
+      } else if (char === '}' && depth > 0) {
+        depth--;
+      } else if (text.startsWith('}}', cursor)) {
+        cursor += 2;
+        break;
+      }
+    }
+    ranges.push({ start, end: Math.min(cursor, text.length) });
+  }
+  return ranges;
+}
+
+// Intentionally conservative: natural-language candidates, not arbitrary strings
+// or a dictionary. Single title-cased labels and non-Latin text are useful too.
+export function isLikelyUserFacingText(value) {
+  const text = value.trim();
+  if (!/\p{L}/u.test(text)) return false;
+  if (/^(?:https?:|mailto:|www\.|[/#])|\S+@\S+\.\S+/i.test(text)) return false;
+  if (/^[\w.-]+(?:[/\\][\w.-]+)+$|^[\w-]+(?:\.[\w-]+)+$/.test(text)) return false;
+  if (/^[A-Z\d_-]+$|^[a-z\d]+(?:[_-][a-z\d]+)+$|^[a-z]+(?:[A-Z][a-z\d]*)+$/.test(text)) return false;
+  if (/[^\p{Script=Latin}\p{N}\p{P}\p{S}\p{Z}\p{M}\s]/u.test(text)) return true;
+  return (/\s/.test(text) && (text.match(/\p{L}[\p{L}\p{M}]*/gu) || []).length >= 2)
+    || /^\p{Lu}\p{Ll}{2,}[.!?…]?$/u.test(text);
+}
+
+/**
+ * Detect only template text/attributes. Parser indices and JS string offsets are
+ * UTF-16, matching LSP positions. Mask Vue expressions before HTML parsing so
+ * comparisons and string literals inside {{ ... }} cannot become markup.
+ */
+export function getRawTextDiagnostics(text, language, enabled = false) {
+  if (!enabled || !['vue', 'html'].includes(language)) return [];
+  const parserOptions = { withStartIndices: true, withEndIndices: true, recognizeSelfClosing: true };
+  // An unmatched "{{" in a comment, script, style or custom SFC block must
+  // never mask the template that follows it. Let the HTML parser locate these.
+  const excludedRanges = [];
+  function excludeNonTemplate(node, topLevel = false) {
+    if (isExcludedTemplateNode(node)
+      || (language === 'vue' && topLevel && node.name && !isVueHtmlTemplate(node))) {
+      excludedRanges.push({ start: node.startIndex, end: node.endIndex + 1 });
+      return;
+    }
+    for (const child of node.children || []) excludeNonTemplate(child);
+  }
+  for (const node of parseDocument(text, parserOptions).children) excludeNonTemplate(node, true);
+  const interpolations = templateInterpolations(text, excludedRanges);
+  let previous = 0;
+  const masked = interpolations.map(({ start, end }) => {
+    const part = text.slice(previous, start) + text.slice(start, end).replace(/[^\r\n]/g, ' ');
+    previous = end;
+    return part;
+  }).join('') + text.slice(previous);
+  const document = parseDocument(masked, parserOptions);
+  const diagnostics = [];
+  function report(raw, start, value = raw) {
+    const leading = raw.length - raw.trimStart().length;
+    const trailing = raw.trimEnd().length;
+    if (!isLikelyUserFacingText(value)) return;
+    diagnostics.push({
+      range: makeRange(text, start + leading, start + trailing),
+      severity: 2,
+      code: 'raw-text',
+      source: 'i18n-lens',
+      message: 'Potential untranslated text: ' + JSON.stringify(value.trim()),
+    });
+  }
+  function visit(node) {
+    if (node.type === 'text') {
+      const raw = text.slice(node.startIndex, node.endIndex + 1);
+      // Report each literal part separately, never an interpolation expression.
+      let cursor = 0;
+      for (const { start, end } of interpolations) {
+        if (end <= node.startIndex || start > node.endIndex) continue;
+        const part = raw.slice(cursor, Math.max(0, start - node.startIndex));
+        report(part, node.startIndex + cursor, DomUtils.textContent(parseDocument(part)));
+        cursor = Math.min(raw.length, end - node.startIndex);
+      }
+      const part = raw.slice(cursor);
+      report(part, node.startIndex + cursor, DomUtils.textContent(parseDocument(part)));
+      return;
+    }
+    if (!node.name) return;
+    const attrs = node.attribs || {};
+    if (isExcludedTemplateNode(node)) return;
+    // HTML parser determines element boundaries; this small lexer only recovers
+    // exact source spans for attributes (including quoted > characters).
+    const opening = /^<[^\s/>]+((?:"[^"]*"|'[^']*'|[^'">])*)>/.exec(text.slice(node.startIndex));
+    if (opening) {
+      const prefixLength = opening[0].length - opening[1].length - 1;
+      for (const match of opening[1].matchAll(/([^\s=/>]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g)) {
+        const name = match[1].toLowerCase();
+        const bound = name.startsWith(':') || name.startsWith('v-bind:');
+        const target = bound ? name.replace(/^(?::|v-bind:)/, '') : name;
+        if (!TRANSLATABLE_ATTRIBUTES.has(target) || !match[0].includes('=')) continue;
+        let raw = match[2] ?? match[3] ?? match[4] ?? '';
+        if (raw.includes('{{')) continue;
+        const valuePrefix = /^[^=]+=\s*["']?/.exec(match[0])[0].length;
+        let start = node.startIndex + prefixLength + match.index + valuePrefix;
+        let value = attrs[name] ?? raw;
+        if (bound) {
+          // No JS parsing: only a whole, unescaped quoted string is safe.
+          const literal = /^\s*(['"])([^\\\r\n]*?)\1\s*$/.exec(raw);
+          const decodedLiteral = /^\s*(['"])([^\\\r\n]*?)\1\s*$/.exec(value);
+          if (!literal || literal[2].includes(literal[1])
+            || !decodedLiteral || decodedLiteral[2].includes(decodedLiteral[1])) continue;
+          start += raw.indexOf(literal[1]) + 1;
+          raw = literal[2];
+          value = decodedLiteral[2];
+        }
+        report(raw, start, value);
+      }
+    }
+    for (const child of node.children || []) visit(child);
+  }
+  if (language === 'vue') {
+    for (const node of document.children) {
+      if (!isVueHtmlTemplate(node) || isExcludedTemplateNode(node)) continue;
+      for (const child of node.children || []) visit(child);
+    }
+  } else {
+    for (const node of document.children) visit(node);
+  }
+  return diagnostics;
+}
+
 export function resolveConfigPath(workspaceRoot) {
   return joinFsPath(normalizeFsPath(workspaceRoot), CONFIG_RELATIVE_PATH);
 }
@@ -54,6 +225,7 @@ function normalizeProjectConfig(raw = {}, defaults = DEFAULT_CONFIG) {
     defaultLocale,
     localeDirs: localeDirs.length > 0 ? localeDirs : [...defaults.localeDirs],
     inlayHints: { enabled, maxLength },
+    rawTextDiagnostics: typeof raw.rawTextDiagnostics === 'boolean' ? raw.rawTextDiagnostics : defaults.rawTextDiagnostics,
   };
 }
 

package/server/index.js

@@ -8,6 +8,7 @@ import {
   flattenLocale,
   buildHoverMarkdown,
   getDiagnostics,
+  getRawTextDiagnostics,
   getLocaleParamDiagnostics,
   getParamCodeActions,
   insertNestedJsonKey,
@@ -301,8 +302,15 @@ function normalizeIncomingSettings(value) {
 function validate(document) {
   const context = getProjectContext(document.uri);
   const { locales } = loadLocalesForContext(context);
-  if (isSourceFile(document.uri)) {
-    connection.sendDiagnostics({ uri: document.uri, diagnostics: getDiagnostics(document.getText(), locales) });
+  const templateLanguage = /\.vue$/i.test(document.uri) ? 'vue'
+    : /\.html?$/i.test(document.uri) || document.languageId === 'html' ? 'html' : undefined;
+  if (isSourceFile(document.uri) || templateLanguage) {
+    const text = document.getText();
+    const diagnostics = [
+      ...getDiagnostics(text, locales),
+      ...getRawTextDiagnostics(text, templateLanguage, context.config.rawTextDiagnostics),
+    ];
+    connection.sendDiagnostics({ uri: document.uri, diagnostics });
     return;
   }
   const locale = findLocaleForFile(locales, fileURLToPath(document.uri));