@npm-questionpro/wick-ui-i18n 0.10.0 → 0.14.0

package/README.md

@@ -1,78 +1,104 @@
-# Wick UI Auto I18n
+# wick-ui-i18n
 
-**Build-time extractor that wraps static strings in `<WuTranslate>` and generates a JSON dictionary.**
+Vite plugin — wraps JSX text in Wu components with `<WuTranslate>`, rewrites
+translatable props to `{wt("...")}`, and emits `wick-ui-i18n.json`.
 
 ---
 
-### Quick Start
-
-```javascript
-import wickuiI18nPlugin from "@npm-questionpro/wick-ui-i18n";
-export default {
-  plugins: [wickuiI18nPlugin({ debug: true })],
-};
-```
-
----
-
-### 🛠 Attributes
-
-- **`data-i18n-wrapper`**: Forces extraction on non-Wu components (e.g., `<div data-i18n-wrapper>Text</div>`).
-- **`data-i18n-key="custom.key"`**: Overrides the default "text-as-key" behavior.
-- **`data-i18n-skip`**: Prevents the plugin from touching the element or its children.
-
----
-
-### 📖 Rules & Logic
-
-- **Auto-Detection**: Targets all `Wu*` prefixed components by default.
-- **Supported**: Static `JSXText`, `{"Strings"}`, and non-dynamic `{`Template Literals`}`.
-- **Ignored**: Any expression containing variables (e.g., `{`Hello ${name}`}`).
-- **Output**: Generates `dist/wick_extracted_strings.json` during bundle phase.
+## JSX text
+
+| Input | Output |
+|---|---|
+| `<WuButton>Hello</WuButton>` | ✅ `<WuTranslate __i18nKey="Hello" />` |
+| `<WuIcon>star</WuIcon>` | ❌ |
+| `<div>Hello</div>` | ❌ |
+| `<WuButton data-skip>Hello</WuButton>` | ❌ |
+| `<span data-i18n-wrapper>Hello</span>` | ✅ `<WuTranslate __i18nKey="Hello" />` |
+| `<WuButton data-i18n-key="k">Hello</WuButton>` | ✅ `<WuTranslate __i18nKey="k" />` |
+| `<WuButton>&amp;</WuButton>` | ❌ |
+| `<WuButton>Hello &amp; World</WuButton>` | ✅ `<WuTranslate __i18nKey="Hello" /> &amp; <WuTranslate __i18nKey="World" />` |
+
+## JSX string expressions
+
+| Input | Output |
+|---|---|
+| `<WuButton>{"Hello"}</WuButton>` | ✅ `<WuTranslate __i18nKey="Hello" />` |
+| `` <WuButton>{`Hello`}</WuButton> `` | ✅ `<WuTranslate __i18nKey="Hello" />` |
+| `<WuButton>{variable}</WuButton>` | ❌ |
+
+## JSX ternaries
+
+| Input | Output |
+|---|---|
+| `<WuButton>{flag ? "Yes" : "No"}</WuButton>` | ✅ `{flag ? <WuTranslate __i18nKey="Yes" /> : <WuTranslate __i18nKey="No" />}` |
+| `<WuButton>{flag ? "Yes" : variable}</WuButton>` | ✅ `{flag ? <WuTranslate __i18nKey="Yes" /> : variable}` |
+| `<WuButton>{flag ? variable : variable}</WuButton>` | ❌ |
+| `<WuButton>{a ? "A" : b ? "B" : "C"}</WuButton>` | ✅ `{a ? <WuTranslate __i18nKey="A" /> : b ? <WuTranslate __i18nKey="B" /> : <WuTranslate __i18nKey="C" />}` |
+
+## JSX template literals with expressions
+
+| Input | Output |
+|---|---|
+| `` <WuButton>{`Hello ${name}`}</WuButton> `` | ✅ `<><WuTranslate __i18nKey="Hello" /> {name}</>` |
+| `` <WuButton>{`${name} world`}</WuButton> `` | ✅ `<>{name} <WuTranslate __i18nKey="world" /></>` |
+| `` <WuButton>{`Hello ${a} and ${b}`}</WuButton> `` | ✅ `<><WuTranslate __i18nKey="Hello" /> {a} <WuTranslate __i18nKey="and" /> {b}</>` |
+| `` <WuButton>{`${a}${b}`}</WuButton> `` | ❌ |
+
+## JSX mixed children
+
+| Input | Output |
+|---|---|
+| `<WuButton>Hello {name}</WuButton>` | ✅ `<WuTranslate __i18nKey="Hello" /> {name}` |
+| `<WuButton>{a} and {b}</WuButton>` | ✅ `{a} <WuTranslate __i18nKey="and" /> {b}` |
+| `<WuButton>{a}   {b}</WuButton>` | ❌ |
+
+## JSX props
+
+Defaults: `Label`, `placeholder`, `title`, `aria-label`, `aria-placeholder`.
+
+| Input | Output |
+|---|---|
+| `<WuField Label="First name" />` | ✅ `Label={wt("First name")}` |
+| `<WuInput placeholder="Enter name" />` | ✅ `placeholder={wt("Enter name")}` |
+| `<WuDialog title="Confirm?" />` | ✅ `title={wt("Confirm?")}` |
+| `<WuField Label={variable} />` | ❌ |
+| `<WuField Label="" />` | ❌ |
+| `<WuIcon Label="x" />` | ❌ |
+| `<input placeholder="x" />` | ❌ |
+| `<WuField data-skip Label="x" />` | ❌ |
+
+## `wt()` calls
+
+Plugin records static args into `wick-ui-i18n.json`. No code rewrite unless template literal with expressions.
+
+| Input | Dictionary | Code output |
+|---|---|---|
+| `wt("Hello")` | ✅ `"Hello"` | `wt("Hello")` |
+| `` wt(`Hello`) `` | ✅ `"Hello"` | `` wt(`Hello`) `` |
+| `` wt(`Hello ${name}`) `` | ✅ `"Hello"` | `` `${wt("Hello")} ${name}` `` |
+| `` wt(`Hello ${a} and ${b}`) `` | ✅ `"Hello"`, `"and"` | `` `${wt("Hello")} ${a} ${wt("and")} ${b}` `` |
+| `wt(variable)` | ❌ | — |
+| `` wt(`${a}${b}`) `` | ❌ | — |
+
+## Data files (`extractFromKeys` option)
+
+No code rewrite — keys only recorded in `wick-ui-i18n.json`.
+
+| Input | Dictionary |
+|---|---|
+| `{ label: 'Analytics' }` + `extractFromKeys: ['label']` | ✅ `"Analytics"` |
+| `{ label: variable }` | ❌ |
+| `{ label: '' }` | ❌ |
 
 ---
 
-### 🔄 Logic Map (Pseudo-code)
-
-```text
-FOR each File in the Project:
-    IF File matches IncludeFilter AND contains "Wu":
-        PARSE File into an AST (Abstract Syntax Tree)
-        INITIALIZE MagicString (for non-destructive editing)
-
-        TRAVERSE the AST:
-
-            // 1. IMPORT CHECK
-            IF Node is an Import from '@wick-ui-lib':
-                MARK 'WuTranslate' as already imported if found
-
-            // 2. STRING DISCOVERY
-            IF Node is JSXText OR (JSXExpressionContainer WITH StaticString):
-                SET CandidateText = Node.Value
-
-                // 3. HIERARCHY EVALUATION (The "shouldTranslate" logic)
-                WALK UP from Node to Parents:
-                    IF Parent has [data-skip] attribute:
-                        ABORT (Don't translate this node)
-
-                    IF Parent has [data-i18n-wrapper] attribute:
-                        MARK as "Valid Target" and STOP walking up
-
-                    IF Parent.Name starts with "Wu" OR is in CustomList:
-                        IF Parent.Name is NOT in IgnoreList:
-                            MARK as "Valid Target" and STOP walking up
-
-                // 4. TRANSFORMATION
-                IF "Valid Target" was found:
-                    GET ExplicitKey from [data-i18n-key] OR USE CandidateText
-                    STORE { Key, CandidateText } in GlobalDictionary
-                    OVERWRITE original code with:
-                        `<WuTranslate __i18nKey="Key">OriginalText</WuTranslate>`
-                    SET NeedsImport = True
-
-        // 5. FINAL ASSEMBLY
-        IF NeedsImport AND NOT 'WuTranslate' Imported:
-            PREPEND import statement to top of file
+## Options
 
-        RETURN Modified Code + Source Maps
-```
+| Option | Default | Description |
+|---|---|---|
+| `components` | `[]` | Extra components treated like Wu* |
+| `ignoreComponents` | `[]` | Extra components never translated |
+| `translatableProps` | `['Label','placeholder','title','aria-label','aria-placeholder']` | Props rewritten to `wt()` |
+| `extractFromKeys` | `[]` | Object keys extracted into dictionary |
+| `excludeFiles` | — | Files skipped entirely |
+| `debug` | `false` | Log transforms to console |

package/index.d.ts

@@ -1,28 +1,37 @@
-export interface AutoTranslateOptions {
+import type {Plugin} from 'vite'
+
+export interface WickI18nOptions {
+  /** Extra component names to translate (in addition to Wu* components). */
+  components?: string[]
+
+  /** Component names to exclude from translation. */
+  ignoreComponents?: string[]
+
   /**
-   * List of components to extract text from.
-   * If empty, matches all Wu* components automatically.
+   * JSX prop names rewritten to `{wt("...")}` on Wu* components.
+   * @default ['Label', 'placeholder', 'title', 'aria-label', 'aria-placeholder']
    */
-  components?: string[];
+  translatableProps?: string[]
 
   /**
-   * List of components to ignore text from.
+   * Object property names whose string values are extracted into
+   * `wick-ui-i18n.json` without rewriting code. Use for data files
+   * (nav items, option lists, etc.) paired with `wt(item.label)` at render time.
    */
-  ignoreComponents?: string[];
+  extractFromKeys?: string[]
 
-  // /**
-  //  * Files to include in the transformation.
-  //  * Can be string, RegExp, or array of string/RegExp.
-  //  */
-  // include?: any;
+  /** Files to skip entirely. Passed to Vite's `createFilter` as `exclude`. */
+  excludeFiles?: string | RegExp | Array<string | RegExp>
 
-  /**
-   * Enable debug logging for extraction process.
-   */
-  debug?: boolean;
+  /** Log every transform to the console. */
+  debug?: boolean
 }
 
 /**
- * Vite plugin that extracts text from Wick UI components and wraps them in WuTranslate.
+ * Vite plugin that automatically translates Wick UI components.
+ *
+ * - JSX text content inside Wu* → `<WuTranslate __i18nKey="..." />`
+ * - Translatable props (placeholder, title, Label, …) → `{wt("...")}`
+ * - Emits `wick-ui-i18n.json` with all extracted keys
  */
-export default function autoTranslate(options?: AutoTranslateOptions): any;
+export default function wickuiI18nPlugin(options?: WickI18nOptions): Plugin

package/index.js

@@ -27,6 +27,8 @@ import { printReport } from "./src/debug.js";
  * @typedef {object} WickI18nOptions
  * @property {string[]}  [components]        - Extra component names that trigger translation.
  * @property {string[]}  [ignoreComponents]  - Component names to exclude from translation.
+ * @property {string[]}  [translatableProps] - JSX prop names rewritten to `{wt("...")}`. Defaults to `['Label','placeholder','title','aria-label','aria-placeholder']`.
+ * @property {string[]}  [extractFromKeys]   - Object property names whose string values are extracted as translation keys (e.g. ['label']).
  * @property {string|string[]|RegExp} [excludeFiles] - Files to skip (passed as `exclude` to Vite's createFilter).
  * @property {boolean}   [debug]             - Log transform activity to the console.
  */
@@ -41,10 +43,12 @@ export default function wickuiI18nPlugin(options = {}) {
   const processor = new TranslationProcessor({
     components: options.components || [],
     ignoreComponents: options.ignoreComponents,
+    translatableProps: options.translatableProps,
+    extractFromKeys: options.extractFromKeys,
     debug: options.debug,
   });
 
-  const filter = createFilter([/\.(jsx|tsx)$/], options.excludeFiles);
+  const filter = createFilter([/\.(jsx|tsx|ts)$/], options.excludeFiles);
 
   let base = "/";
 
@@ -79,7 +83,14 @@ export default function wickuiI18nPlugin(options = {}) {
      * @param {string} id
      */
     transform(code, id) {
-      if (!filter(id) || (!code.includes("Wu") && !/\bwt\(/.test(code))) return null;
+      const hasAnyTarget =
+        code.includes("Wu") ||
+        /\bwt\(/.test(code) ||
+        (processor.components.size > 0 &&
+          [...processor.components].some(c => code.includes(c))) ||
+        (processor.extractFromKeys.size > 0 &&
+          [...processor.extractFromKeys].some(k => code.includes(k)));
+      if (!filter(id) || !hasAnyTarget) return null;
       return transformFile(code, id, processor);
     },
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@npm-questionpro/wick-ui-i18n",
-  "version": "0.10.0",
+  "version": "0.14.0",
   "license": "ISC",
   "description": "Auto-translation AST wrapper for Wick UI",
   "type": "module",

package/src/processor.js

@@ -3,6 +3,9 @@
  * decides which JSX nodes should be wrapped with WuTranslate.
  */
 
+/** Prop names translated by default on Wu* components. Pass `translatableProps` to override. */
+const DEFAULT_TRANSLATABLE_PROPS = ['Label', 'placeholder', 'title', 'aria-label', 'aria-placeholder']
+
 /** Components always excluded from translation regardless of user config. */
 const DEFAULT_IGNORE = [
   "WuIcon",
@@ -21,16 +24,24 @@ const DEFAULT_IGNORE = [
 
 export class TranslationProcessor {
   /**
-   * @param {object} options
-   * @param {string[]} options.components       - Component names that trigger translation.
-   * @param {string[]} [options.ignoreComponents] - Extra components to exclude.
-   * @param {boolean}  [options.debug]           - Enable verbose logging.
+   * @param {object}   options
+   * @param {string[]} options.components          - Component names that trigger translation.
+   * @param {string[]} [options.ignoreComponents]  - Extra components to exclude.
+   * @param {string[]} [options.translatableProps] - JSX prop names to rewrite to wt(). Overrides defaults.
+   * @param {string[]} [options.extractFromKeys]   - Object property names whose string values are recorded.
+   * @param {boolean}  [options.debug]             - Enable verbose logging.
    */
   constructor(options) {
     this.components = new Set(options.components);
     this.ignoreComponents = new Set(
       DEFAULT_IGNORE.concat(options.ignoreComponents || []),
     );
+    /** @type {Set<string>} JSX prop names that should be translated. */
+    this.translatableProps = new Set(
+      options.translatableProps ?? DEFAULT_TRANSLATABLE_PROPS,
+    );
+    /** @type {Set<string>} Object property key names whose string values are extracted (e.g. 'label'). */
+    this.extractFromKeys = new Set(options.extractFromKeys || []);
     /** @type {Map<string, string>} key → original text */
     this.dictionary = new Map();
     /** @type {import('./debug.js').DebugEntry[]} */
@@ -120,6 +131,27 @@ export class TranslationProcessor {
     return targetFound && !isIgnored;
   }
 
+  /**
+   * Return `true` when `propName` is in the translatable-props set and the
+   * immediate parent JSX element is a Wu* component or in `components`, and
+   * is not in `ignoreComponents`. Matched props are rewritten to `{wt("...")}`. *
+   * @param {string} propName
+   * @param {import('@babel/traverse').NodePath} path - JSXAttribute path.
+   * @returns {boolean}
+   */
+  shouldTranslateProp(propName, path) {
+    if (!this.translatableProps.has(propName)) return false;
+    // path.parent is the JSXOpeningElement node
+    const openingEl = path.parent;
+    const name = openingEl.name?.name || openingEl.name?.property?.name;
+    if (!name) return false;
+    if (this.ignoreComponents.has(name)) return false;
+    // Respect data-skip / data-i18n-skip on the same element
+    const attrs = openingEl.attributes || [];
+    if (attrs.some(a => ['data-skip', 'data-i18n-skip'].includes(a.name?.name))) return false;
+    return name.startsWith('Wu') || this.components.has(name);
+  }
+
   /**
    * Return the explicit i18n key from the nearest ancestor JSX element's
    * `data-i18n-key` attribute, or `null` if absent.

package/src/transform.js

@@ -1,6 +1,8 @@
 /**
- * @fileoverview AST transform — parses a JSX/TSX file, rewrites translatable
- * text nodes to `<WuTranslate>`, and prepends the import if needed.
+ * @fileoverview AST transform — parses a JSX/TSX/TS file and:
+ *   - Rewrites JSX text content inside Wu* components to `<WuTranslate>`
+ *   - Rewrites translatable props (placeholder, title, …) to `{wt("…")}`
+ *   - Prepends the necessary imports when added.
  */
 
 import MagicString from "magic-string";
@@ -9,7 +11,10 @@ import _traverse from "@babel/traverse";
 import { getComponentTree } from "./debug.js";
 import { transformTemplateLiteralExpression } from "./transformTemplateLiteral.js";
 import { transformJSXTextWithEntities } from "./transformJSXTextWithEntities.js";
-import { recordWtCall, transformWtTemplateLiteral } from "./transformWtCalls.js";
+import {
+  recordWtCall,
+  transformWtTemplateLiteral,
+} from "./transformWtCalls.js";
 
 const traverse = _traverse.default || _traverse;
 
@@ -32,6 +37,34 @@ function getStaticString(node) {
   return null;
 }
 
+/**
+ * Recursively handle a ConditionalExpression, wrapping every static string
+ * branch (at any nesting depth) with WuTranslate.
+ *
+ * @param {import('@babel/types').ConditionalExpression} expr
+ * @param {import('@babel/traverse').NodePath} path
+ * @param {MagicString} ms
+ * @param {import('./processor.js').TranslationProcessor} processor
+ * @param {string} id
+ * @returns {boolean} true when at least one branch was captured
+ */
+function handleConditional(expr, path, ms, processor, id) {
+  let changed = false;
+
+  for (const branch of [expr.consequent, expr.alternate]) {
+    const text = getStaticString(branch);
+    if (text !== null) {
+      changed =
+        handleCapture(path, text, branch.start, branch.end, ms, processor, id, true) ||
+        changed;
+    } else if (branch.type === "ConditionalExpression") {
+      changed = handleConditional(branch, path, ms, processor, id) || changed;
+    }
+  }
+
+  return changed;
+}
+
 /**
  * Replace a translatable text node with a `<WuTranslate>` element and record
  * the key in the processor's dictionary.
@@ -45,8 +78,20 @@ function getStaticString(node) {
  * @param {string}       id         - File path (for collision warnings).
  * @returns {boolean} `true` when replacement was made.
  */
-function handleCapture(path, text, start, end, ms, processor, id, skipExplicitKey = false) {
-  const cleanText = text.trim().replace(/\n/g, " ").replace(/\s{2,}/g, " ");
+function handleCapture(
+  path,
+  text,
+  start,
+  end,
+  ms,
+  processor,
+  id,
+  skipExplicitKey = false,
+) {
+  const cleanText = text
+    .trim()
+    .replace(/\n/g, " ")
+    .replace(/\s{2,}/g, " ");
   if (!cleanText || !processor.shouldTranslate(path)) return false;
   // For StringLiteral / TemplateLiteral quasis / ternary branches: entities are
   // not decoded by the JS parser, so cleanText still contains "&amp;" etc.
@@ -55,11 +100,7 @@ function handleCapture(path, text, start, end, ms, processor, id, skipExplicitKe
   const key = (!skipExplicitKey && processor.getExplicitKey(path)) || cleanText;
   processor.record(key, cleanText, id, getComponentTree(path));
 
-  ms.overwrite(
-    start,
-    end,
-    `<WuTranslate __i18nKey=${JSON.stringify(key)}></WuTranslate>`,
-  );
+  ms.overwrite(start, end, `<WuTranslate __i18nKey=${JSON.stringify(key)}></WuTranslate>`);
   return true;
 }
 
@@ -83,14 +124,11 @@ export function transformFile(code, id, processor) {
   let needsImport = false;
   let hasImport = false;
   let hasWtTransform = false;
+  let needsWtImport = false;
+  let hasWtImport = false;
 
   traverse(ast, {
-    /**
-     * Track whether `WuTranslate` is already imported from wick-ui-lib so we
-     * don't duplicate the import statement.
-     */
-    /**
-     * wt("static string") call — record the key in the dictionary.
+    /** wt("static string") call — record the key in the dictionary.
      * No code transformation; wt() handles runtime lookup.
      */
     CallExpression(path) {
@@ -100,14 +138,63 @@ export function transformFile(code, id, processor) {
       }
     },
 
+    /** Track whether WuTranslate / wt are already imported so we don't duplicate them. */
     ImportDeclaration(path) {
       if (path.node.source.value.includes("wick-ui-lib")) {
-        hasImport = path.node.specifiers.some(
-          (s) => s.imported?.name === "WuTranslate",
-        );
+        for (const s of path.node.specifiers) {
+          if (s.imported?.name === "WuTranslate") hasImport = true;
+          if (s.imported?.name === "wt") hasWtImport = true;
+        }
       }
     },
 
+    /**
+     * Data-file key extraction: records string values of configured object
+     * property names (e.g. `label: 'Analytics'`) without rewriting code.
+     * Enabled via `extractFromKeys` option.
+     */
+    ObjectProperty(path) {
+      if (!processor.extractFromKeys.size) return;
+      const keyNode = path.node.key;
+      const keyName = keyNode.name ?? keyNode.value;
+      if (!keyName || !processor.extractFromKeys.has(keyName)) return;
+      const value = path.node.value;
+      if (value.type !== "StringLiteral") return;
+      const text = value.value
+        .trim()
+        .replace(/\n/g, " ")
+        .replace(/\s{2,}/g, " ");
+      if (!text) return;
+      if (HTML_ENTITY_RE.test(text)) return;
+      processor.record(text, text, id, "(data)");
+    },
+
+    /**
+     * Translatable props (Label, placeholder, title, aria-label, ...)
+     * rewritten to `{wt("foo")}` on Wu* components.
+     */
+    JSXAttribute(path) {
+      const propName = path.node.name.name;
+      if (typeof propName !== "string") return;
+      const value = path.node.value;
+      if (!value || value.type !== "StringLiteral") return;
+
+      const rawValue = code.slice(value.start, value.end);
+      if (HTML_ENTITY_RE.test(rawValue)) return;
+
+      const text = value.value
+        .trim()
+        .replace(/\n/g, " ")
+        .replace(/\s{2,}/g, " ");
+      if (!text) return;
+
+      if (!processor.shouldTranslateProp(propName, path)) return;
+
+      processor.record(text, text, id, getComponentTree(path));
+      ms.overwrite(value.start, value.end, `{wt(${JSON.stringify(text)})}`);
+      needsWtImport = true;
+    },
+
     /** Plain JSX text: `<Foo>Hello world</Foo>` */
     JSXText(path) {
       const text = path.node.value;
@@ -157,43 +244,14 @@ export function transformFile(code, id, processor) {
         expr.type === "TemplateLiteral" &&
         expr.expressions.length > 0
       ) {
-        if (
-          transformTemplateLiteralExpression(path, code, ms, processor, id)
-        ) {
+        if (transformTemplateLiteralExpression(path, code, ms, processor, id)) {
           needsImport = true;
         }
         return;
       } else if (expr.type === "TemplateLiteral" && !expr.expressions.length) {
         text = expr.quasis[0].value.cooked;
       } else if (expr.type === "ConditionalExpression") {
-        const consText = getStaticString(expr.consequent);
-        const altText = getStaticString(expr.alternate);
-        let changed = false;
-        if (consText !== null)
-          changed =
-            handleCapture(
-              path,
-              consText,
-              expr.consequent.start,
-              expr.consequent.end,
-              ms,
-              processor,
-              id,
-              true,
-            ) || changed;
-        if (altText !== null)
-          changed =
-            handleCapture(
-              path,
-              altText,
-              expr.alternate.start,
-              expr.alternate.end,
-              ms,
-              processor,
-              id,
-              true,
-            ) || changed;
-        if (changed) needsImport = true;
+        if (handleConditional(expr, path, ms, processor, id)) needsImport = true;
         return;
       }
 
@@ -214,9 +272,13 @@ export function transformFile(code, id, processor) {
     },
   });
 
-  if (!needsImport && !hasWtTransform) return null;
+  if (!needsImport && !hasWtTransform && !needsWtImport) return null;
+
+  if (needsWtImport && !hasWtImport) {
+    ms.prepend(`import { wt } from '@npm-questionpro/wick-ui-lib';\n`);
+  }
 
-  if (!hasImport) {
+  if (needsImport && !hasImport) {
     ms.prepend(`import { WuTranslate } from '@npm-questionpro/wick-ui-lib';\n`);
   }
 

package/wickuii18n.test.js

@@ -7,6 +7,12 @@ function transform(code, options = {}) {
   return result ? result.code : code;
 }
 
+function transformTs(code, options = {}) {
+  const plugin = wickuiI18nPlugin(options);
+  const result = plugin.transform(code, "TestFile.ts");
+  return result ? result.code : code;
+}
+
 /**
  * Run the full plugin lifecycle on `code` and return the emitted dictionary.
  * Needed for wt() tests since those record keys without transforming code.
@@ -182,13 +188,30 @@ describe("Wick UI i18n Vite Plugin", () => {
     expect(result).not.toContain(`WuTranslate`);
   });
 
-  it("12g. Nested ternary: translates first branch, skips inner ternary", () => {
-    // {a ? "A" : b ? "B" : "C"} — alternate is ConditionalExpression, not a static string
+  it("12g. Nested ternary: all static branches translated recursively", () => {
     const code = `<WuButton>{a ? "A" : b ? "B" : "C"}</WuButton>`;
     const result = transform(code);
     expect(result).toContain(`<WuTranslate __i18nKey="A"></WuTranslate>`);
-    // inner ternary branches are not translated (known v1 limitation)
-    expect(result).toContain(`b ? "B" : "C"`);
+    expect(result).toContain(`<WuTranslate __i18nKey="B"></WuTranslate>`);
+    expect(result).toContain(`<WuTranslate __i18nKey="C"></WuTranslate>`);
+  });
+
+  it("12g2. Deeply nested ternary: all levels translated", () => {
+    const code = `<WuButton>{a ? "A" : b ? "B" : c ? "C" : "D"}</WuButton>`;
+    const result = transform(code);
+    expect(result).toContain(`<WuTranslate __i18nKey="A"></WuTranslate>`);
+    expect(result).toContain(`<WuTranslate __i18nKey="B"></WuTranslate>`);
+    expect(result).toContain(`<WuTranslate __i18nKey="C"></WuTranslate>`);
+    expect(result).toContain(`<WuTranslate __i18nKey="D"></WuTranslate>`);
+  });
+
+  it("12g3. Nested ternary with dynamic branch: dynamic skipped, statics translated", () => {
+    const code = `<WuButton>{a ? "A" : b ? variable : "C"}</WuButton>`;
+    const result = transform(code);
+    expect(result).toContain(`<WuTranslate __i18nKey="A"></WuTranslate>`);
+    expect(result).toContain(`variable`);
+    expect(result).not.toContain(`__i18nKey="variable"`);
+    expect(result).toContain(`<WuTranslate __i18nKey="C"></WuTranslate>`);
   });
 
   it("12h. Ternary outside any Wu/wrapper component is not translated", () => {
@@ -593,3 +616,258 @@ describe("wt() call expressions", () => {
     expect(Object.keys(dict)).toHaveLength(0);
   });
 });
+
+// ─── translatableProps ────────────────────────────────────────────────────────
+//
+// The `Label` prop on Wu* components is rewritten to
+// `{<WuTranslate __i18nKey="..." />}` and recorded in the dictionary.
+// Custom props can be passed via `translatableProps` option to override the
+// default. Dynamic props, ignored components, and data-skip are untouched.
+// ─────────────────────────────────────────────────────────────────────────────
+
+
+describe("translatableProps", () => {
+  it("P1. prop on Wu* component rewritten to wt() and import injected", () => {
+    const code = `<WuField Label="First name" />`;
+    const result = transform(code);
+    expect(result).toContain(`import { wt }`);
+    expect(result).toContain(`Label={wt("First name")}`);
+  });
+
+  it("P2. placeholder and title translated by default", () => {
+    const r1 = transform(`<WuInput placeholder="Enter name" />`);
+    expect(r1).toContain(`placeholder={wt("Enter name")}`);
+    const r2 = transform(`<WuDialog title="Confirm?" />`);
+    expect(r2).toContain(`title={wt("Confirm?")}`);
+  });
+
+  it("P3. prop not in translatableProps is left untouched", () => {
+    const code = `<WuInput variant="secondary" Label="First name" />`;
+    const result = transform(code);
+    expect(result).toContain(`variant="secondary"`);
+    expect(result).not.toContain(`wt("secondary")`);
+  });
+
+  it("P4. prop on non-Wu component is not transformed", () => {
+    const code = `<input placeholder="Enter name" />`;
+    const result = transform(code);
+    expect(result).toBe(code);
+  });
+
+  it("P5. dynamic (expression) prop value is not transformed", () => {
+    const code = `<WuField Label={someProp} />`;
+    const result = transform(code);
+    expect(result).toBe(code);
+  });
+
+  it("P6. empty string prop is skipped", () => {
+    const code = `<WuField Label="" />`;
+    const result = transform(code);
+    expect(result).toBe(code);
+  });
+
+  it("P7. whitespace-only prop is skipped", () => {
+    const code = `<WuField Label="   " />`;
+    const result = transform(code);
+    expect(result).toBe(code);
+  });
+
+  it("P8. prop on ignored component (WuIcon) is not transformed", () => {
+    const code = `<WuIcon title="star icon" />`;
+    const result = transform(code);
+    expect(result).toBe(code);
+  });
+
+  it("P9. data-skip on element suppresses prop translation", () => {
+    const code = `<WuField data-skip Label="First name" />`;
+    const result = transform(code);
+    expect(result).not.toContain('wt(');
+  });
+
+  it("P10. data-i18n-skip on element suppresses prop translation", () => {
+    const code = `<WuField data-i18n-skip Label="First name" />`;
+    const result = transform(code);
+    expect(result).not.toContain('wt(');
+  });
+
+  it("P11. prop wt() and JSX text WuTranslate coexist — both imports injected", () => {
+    const code = `<WuField Label="First name">Submit</WuField>`;
+    const result = transform(code);
+    expect(result).toContain(`import { wt }`);
+    expect(result).toContain(`import { WuTranslate }`);
+    expect(result).toContain(`Label={wt("First name")}`);
+    expect(result).toContain(`<WuTranslate __i18nKey="Submit">`);
+  });
+
+  it("P12. wt already imported — no duplicate import injected", () => {
+    const code = [
+      `import { wt } from '@npm-questionpro/wick-ui-lib';`,
+      `<WuField Label="First name" />`,
+    ].join('\n');
+    const result = transform(code);
+    const matches = (result.match(/import \{ wt \}/g) || []).length;
+    expect(matches).toBe(1);
+  });
+
+  it("P13. multiple translatable props on same element are all transformed", () => {
+    const code = `<WuInput placeholder="Enter name" title="Name field" />`;
+    const result = transform(code);
+    expect(result).toContain(`placeholder={wt("Enter name")}`);
+    expect(result).toContain(`title={wt("Name field")}`);
+  });
+
+  it("P14. passing translatableProps overrides defaults entirely", () => {
+    const code = `<WuField Label="First name" title="Name" />`;
+    const result = transform(code, {translatableProps: ['title']});
+    expect(result).toContain(`title={wt("Name")}`);
+    expect(result).toContain(`Label="First name"`);
+  });
+
+  it("P15. HTML entity in prop value is skipped", () => {
+    const code = `<WuField Label="Hello &amp; World" />`;
+    const result = transform(code);
+    expect(result).not.toContain('wt(');
+    expect(result).toContain('&amp;');
+  });
+
+  it("P16. multi-word prop value preserved as-is in the key", () => {
+    const code = `<WuField Label="Enter your full name" />`;
+    const result = transform(code);
+    expect(result).toContain(`wt("Enter your full name")`);
+  });
+
+  it("P17. newlines and extra spaces in prop value are normalised", () => {
+    const code = `<WuField Label="Enter\nyour  name" />`;
+    const result = transform(code);
+    expect(result).toContain(`wt("Enter your name")`);
+  });
+
+  it("P18. prop on user-configured custom component is transformed", () => {
+    const code = `<MyWidget Label="Enter name" />`;
+    const result = transform(code, {components: ['MyWidget']});
+    expect(result).toContain(`Label={wt("Enter name")}`);
+  });
+
+  it("P19. prop values are recorded in the translation dictionary", () => {
+    const code = `<WuField Label="First name" />`;
+    const dict = getDictionary(code);
+    expect(dict).toHaveProperty('First name', 'First name');
+  });
+});
+
+// ─── .ts data-file key extraction ───────────────────────────────────────────────────
+//
+// Standalone wt() in .ts data files (e.g. nav config arrays) lets the plugin
+// extract string literals into wick-ui-i18n.json without any JSX transform.
+// The code is returned unchanged (null); wt() handles the lookup at render time.
+// ─────────────────────────────────────────────────────────────────────────────
+
+// ─── extractFromKeys ────────────────────────────────────────────────────────
+//
+// Object property names configured via `extractFromKeys` have their string
+// values recorded automatically — no wt() wrapping required in data files.
+// Code is never rewritten; wt() handles the lookup at render time.
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('extractFromKeys', () => {
+  it('EK1. string values of a configured key are recorded without code rewrite', () => {
+    const code = [
+      `export const ITEMS = [`,
+      `  { label: 'Analytics', icon: 'wm-analytics' },`,
+      `  { label: 'Engagement', icon: 'wm-trending-up' },`,
+      `]`,
+    ].join('\n');
+    const dict = getDictionary(code, {extractFromKeys: ['label']});
+    expect(dict).toHaveProperty('Analytics', 'Analytics');
+    expect(dict).toHaveProperty('Engagement', 'Engagement');
+    // non-listed keys are ignored
+    expect(dict).not.toHaveProperty('wm-analytics');
+  });
+
+  it('EK2. transform returns null — data file code is never rewritten', () => {
+    const code = `export const ITEMS = [{ label: 'Analytics' }]`;
+    const plugin = wickuiI18nPlugin({extractFromKeys: ['label']});
+    const result = plugin.transform(code, 'navItems.ts');
+    expect(result).toBeNull();
+  });
+
+  it('EK3. works on .ts, .tsx, and .jsx files', () => {
+    const code = `export const x = { label: 'Hello' }`;
+    const opts = {extractFromKeys: ['label']};
+    for (const ext of ['ts', 'tsx', 'jsx']) {
+      const plugin = wickuiI18nPlugin(opts);
+      plugin.buildStart();
+      plugin.transform(code, `file.${ext}`);
+      let dict = {};
+      plugin.generateBundle.call({emitFile: ({source}) => { dict = JSON.parse(source); }});
+      expect(dict).toHaveProperty('Hello', 'Hello');
+    }
+  });
+
+  it('EK4. multiple configured keys all extracted', () => {
+    const code = `const x = { label: 'Save', title: 'Confirm', key: 'btn-save' }`;
+    const dict = getDictionary(code, {extractFromKeys: ['label', 'title']});
+    expect(dict).toHaveProperty('Save', 'Save');
+    expect(dict).toHaveProperty('Confirm', 'Confirm');
+    expect(dict).not.toHaveProperty('btn-save');
+  });
+
+  it('EK5. dynamic (non-literal) values are ignored', () => {
+    const code = `const x = { label: someVar }`;
+    const dict = getDictionary(code, {extractFromKeys: ['label']});
+    expect(Object.keys(dict)).toHaveLength(0);
+  });
+
+  it('EK6. empty string values are ignored', () => {
+    const code = `const x = { label: '' }`;
+    const dict = getDictionary(code, {extractFromKeys: ['label']});
+    expect(Object.keys(dict)).toHaveLength(0);
+  });
+
+  it('EK7. HTML entity in value is ignored', () => {
+    const code = `const x = { label: 'Hello &amp; World' }`;
+    const dict = getDictionary(code, {extractFromKeys: ['label']});
+    expect(Object.keys(dict)).toHaveLength(0);
+  });
+
+  it('EK8. no extractFromKeys configured — object properties are not touched', () => {
+    const code = `const x = { label: 'Analytics' }`;
+    const dict = getDictionary(code, {});
+    expect(Object.keys(dict)).toHaveLength(0);
+  });
+
+  it('EK9. coexists with JSX text-child translation in the same build', () => {
+    const plugin = wickuiI18nPlugin({extractFromKeys: ['label']});
+    plugin.buildStart();
+    plugin.transform(`export const ITEMS = [{ label: 'Analytics' }]`, 'navItems.ts');
+    plugin.transform(`<WuButton>Submit</WuButton>`, 'Form.tsx');
+    let dict = {};
+    plugin.generateBundle.call({emitFile: ({source}) => { dict = JSON.parse(source); }});
+    expect(dict).toHaveProperty('Analytics', 'Analytics');
+    expect(dict).toHaveProperty('Submit', 'Submit');
+  });
+
+  it('EK10. full SECONDARY_NAVBAR_ITEMS shape — all 8 labels extracted', () => {
+    const code = `
+export const SECONDARY_NAVBAR_ITEMS = [
+  { key: 'account-operations', label: 'Analytics', icon: 'wm-analytics' },
+  { key: 'engagement', label: 'Engagement', icon: 'wm-trending-up' },
+  { key: 'system-notifications', label: 'System Notifications', icon: 'wm-notifications' },
+  { key: 'search', label: 'Search', icon: 'wm-search' },
+  { key: 'templates', label: 'Templates', icon: 'wc-static-content' },
+  { key: 'translations', label: 'Translations', icon: 'wm-translate' },
+  { key: 'ai', label: 'AI', icon: 'wc-ai' },
+  { key: 'cpq-pricing', label: 'CPQ Pricing', icon: 'wc-pricing-analysis' },
+]`;
+    const dict = getDictionary(code, {extractFromKeys: ['label']});
+    expect(Object.keys(dict)).toHaveLength(8);
+    expect(dict).toHaveProperty('Analytics');
+    expect(dict).toHaveProperty('System Notifications');
+    expect(dict).toHaveProperty('CPQ Pricing');
+    // non-label keys not extracted
+    expect(dict).not.toHaveProperty('account-operations');
+    expect(dict).not.toHaveProperty('wm-analytics');
+  });
+});
+
+