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

package/index.js

@@ -46,10 +46,22 @@ export default function wickuiI18nPlugin(options = {}) {
 
   const filter = createFilter([/\.(jsx|tsx)$/], options.excludeFiles);
 
+  let base = "/";
+
   return {
     name: "wick-ui-i18n",
     enforce: "pre",
 
+    /**
+     * Capture the resolved base so the dev-server middleware path matches
+     * what `import.meta.env.BASE_URL` resolves to in the consumer app.
+     *
+     * @param {import('vite').ResolvedConfig} resolvedConfig
+     */
+    configResolved(resolvedConfig) {
+      base = resolvedConfig.base;
+    },
+
     /**
      * Clear state on every build so stale keys don't accumulate across
      * watch-mode rebuilds.
@@ -67,7 +79,7 @@ export default function wickuiI18nPlugin(options = {}) {
      * @param {string} id
      */
     transform(code, id) {
-      if (!filter(id) || !code.includes("Wu")) return null;
+      if (!filter(id) || (!code.includes("Wu") && !/\bwt\(/.test(code))) return null;
       return transformFile(code, id, processor);
     },
 
@@ -77,7 +89,7 @@ export default function wickuiI18nPlugin(options = {}) {
      * @param {import('vite').ViteDevServer} server
      */
     configureServer(server) {
-      server.middlewares.use("/wick-ui-i18n.json", (_req, res) => {
+      server.middlewares.use(`${base}wick-ui-i18n.json`, (_req, res) => {
         res.setHeader("Content-Type", "application/json");
         res.end(
           JSON.stringify(Object.fromEntries(processor.dictionary), null, 2),

package/package.json

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

package/src/transform.js

@@ -7,12 +7,23 @@ import MagicString from "magic-string";
 import { parse } from "@babel/parser";
 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";
 
 const traverse = _traverse.default || _traverse;
 
 /** Babel parser plugins applied to every file. */
 const BABEL_PLUGINS = ["jsx", "typescript"];
 
+/**
+ * Matches any HTML entity: named (&), decimal (©), or hex (©).
+ * Used to skip text segments that contain entities — they must be left as-is.
+ * Note: for JSXText this must be tested against the RAW source, not the Babel
+ * decoded .value (Babel turns & → "&",   → "\u00a0", etc.).
+ */
+const HTML_ENTITY_RE = /&(?:[a-zA-Z][a-zA-Z0-9]*|#[0-9]+|#x[0-9a-fA-F]+);/;
+
 /** @param {import('@babel/types').Node} node @returns {string|null} */
 function getStaticString(node) {
   if (node.type === "StringLiteral") return node.value;
@@ -37,6 +48,9 @@ function getStaticString(node) {
 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 "&" etc.
+  if (HTML_ENTITY_RE.test(cleanText)) return false;
 
   const key = (!skipExplicitKey && processor.getExplicitKey(path)) || cleanText;
   processor.record(key, cleanText, id, getComponentTree(path));
@@ -68,12 +82,24 @@ export function transformFile(code, id, processor) {
   const ms = new MagicString(code);
   let needsImport = false;
   let hasImport = false;
+  let hasWtTransform = 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.
+     * No code transformation; wt() handles runtime lookup.
+     */
+    CallExpression(path) {
+      if (recordWtCall(path, processor, id)) return;
+      if (transformWtTemplateLiteral(path, code, ms, processor, id)) {
+        hasWtTransform = true;
+      }
+    },
+
     ImportDeclaration(path) {
       if (path.node.source.value.includes("wick-ui-lib")) {
         hasImport = path.node.specifiers.some(
@@ -86,6 +112,16 @@ export function transformFile(code, id, processor) {
     JSXText(path) {
       const text = path.node.value;
       const trimmed = text.trim();
+      // Babel decodes entities in JSXText.value (& → "&", © → "©").
+      // Check the raw source slice — if entities found, split around them so
+      // translatable text segments are still wrapped while entities stay put.
+      const rawSource = code.slice(path.node.start, path.node.end);
+      if (HTML_ENTITY_RE.test(rawSource)) {
+        if (transformJSXTextWithEntities(path, rawSource, ms, processor, id)) {
+          needsImport = true;
+        }
+        return;
+      }
       const start = path.node.start + text.indexOf(trimmed);
       if (
         handleCapture(
@@ -117,6 +153,16 @@ export function transformFile(code, id, processor) {
 
       if (expr.type === "StringLiteral") {
         text = expr.value;
+      } else if (
+        expr.type === "TemplateLiteral" &&
+        expr.expressions.length > 0
+      ) {
+        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") {
@@ -168,7 +214,7 @@ export function transformFile(code, id, processor) {
     },
   });
 
-  if (!needsImport) return null;
+  if (!needsImport && !hasWtTransform) return null;
 
   if (!hasImport) {
     ms.prepend(`import { WuTranslate } from '@npm-questionpro/wick-ui-lib';\n`);

package/src/transformJSXTextWithEntities.js

@@ -0,0 +1,127 @@
+/**
+ * @fileoverview transformJSXTextWithEntities — splits a JSXText node that
+ * contains HTML entities into interleaved translated segments and raw entities.
+ *
+ * @example
+ * // Input
+ * <WuButton>Hello &amp; World</WuButton>
+ *
+ * // Output
+ * <WuButton><WuTranslate __i18nKey="Hello" /> &amp; <WuTranslate __i18nKey="World" /></WuButton>
+ *
+ * @example
+ * // Input
+ * <WuButton>&lt;Tag&gt;</WuButton>
+ *
+ * // Output
+ * <WuButton>&lt;<WuTranslate __i18nKey="Tag" />&gt;</WuButton>
+ */
+
+import { getComponentTree } from "./debug.js";
+
+/**
+ * Splits the raw source around HTML entities (capturing group keeps entities
+ * in the resulting array).
+ *
+ * "Hello &amp; World"  →  ["Hello ", "&amp;", " World"]
+ * "&lt;Tag&gt;"        →  ["", "&lt;", "Tag", "&gt;", ""]
+ */
+const HTML_ENTITY_SPLIT_RE =
+  /(&(?:[a-zA-Z][a-zA-Z0-9]*|#[0-9]+|#x[0-9a-fA-F]+);)/g;
+
+/**
+ * Tests whether a single segment (from the split above) is itself an entity.
+ */
+const HTML_ENTITY_SEGMENT_RE =
+  /^&(?:[a-zA-Z][a-zA-Z0-9]*|#[0-9]+|#x[0-9a-fA-F]+);$/;
+
+/**
+ * Given a text segment, extract leading whitespace, the translatable core,
+ * and trailing whitespace so spacing around entities is preserved.
+ *
+ * @param {string} raw
+ * @returns {{ leading: string, text: string, trailing: string }}
+ */
+function splitSegment(raw) {
+  const leading = raw.match(/^\s*/)[0];
+  const trailing = raw.match(/\s*$/)[0];
+  // Normalise internal whitespace to match handleCapture behaviour:
+  // newlines → single space, consecutive spaces → single space.
+  const text = raw
+    .slice(leading.length, raw.length - trailing.length)
+    .replace(/\n/g, " ")
+    .replace(/\s{2,}/g, " ");
+  return { leading, text, trailing };
+}
+
+/**
+ * Transform a JSXText node whose raw source contains at least one HTML entity.
+ *
+ * Each non-entity text segment is independently trimmed and wrapped in a
+ * `<WuTranslate>` element. Entities are emitted verbatim. Leading / trailing
+ * whitespace within each segment is preserved as JSX text so words don't run
+ * together after the replacement.
+ *
+ * If every segment is either empty or a bare entity (no translatable text),
+ * the node is left untouched and the function returns `false`.
+ *
+ * @param {import('@babel/traverse').NodePath} path  - JSXText path.
+ * @param {string}      rawSource  - Raw source slice for this node
+ *                                   (code.slice(node.start, node.end)).
+ * @param {import('magic-string').default} ms
+ * @param {import('./processor.js').TranslationProcessor} processor
+ * @param {string}      id         - Source file path (for collision warnings).
+ * @returns {boolean} `true` when a replacement was written.
+ */
+export function transformJSXTextWithEntities(
+  path,
+  rawSource,
+  ms,
+  processor,
+  id,
+) {
+  if (!processor.shouldTranslate(path)) return false;
+
+  // data-i18n-key cannot span multiple split segments — warn and ignore it.
+  const explicitKey = processor.getExplicitKey(path);
+  if (explicitKey) {
+    console.warn(
+      `[wick-i18n] data-i18n-key="${explicitKey}" is set on a node whose text ` +
+        `contains HTML entities. The key cannot apply across multiple segments ` +
+        `— splitting without it.`,
+    );
+  }
+
+  const segments = rawSource.split(HTML_ENTITY_SPLIT_RE);
+  const componentTree = getComponentTree(path);
+
+  const parts = [];
+  let hasTranslatable = false;
+
+  for (const seg of segments) {
+    if (!seg) continue; // empty strings produced by split at boundaries
+
+    if (HTML_ENTITY_SEGMENT_RE.test(seg)) {
+      // Raw entity — emit as-is, no translation key
+      parts.push(seg);
+    } else {
+      const { leading, text, trailing } = splitSegment(seg);
+
+      if (text) {
+        processor.record(text, text, id, componentTree);
+        parts.push(
+          `${leading}<WuTranslate __i18nKey=${JSON.stringify(text)}></WuTranslate>${trailing}`,
+        );
+        hasTranslatable = true;
+      } else {
+        // Pure whitespace between / around entities — preserve as JSX text
+        parts.push(seg);
+      }
+    }
+  }
+
+  if (!hasTranslatable) return false;
+
+  ms.overwrite(path.node.start, path.node.end, parts.join(""));
+  return true;
+}

package/src/transformTemplateLiteral.js

@@ -0,0 +1,90 @@
+/**
+ * @fileoverview transformTemplateLiteral — handles JSXExpressionContainers
+ * whose expression is a TemplateLiteral with one or more dynamic expressions.
+ *
+ * @example
+ * // Input
+ * <WuButton>{`hello ${name} how are you`}</WuButton>
+ *
+ * // Output
+ * <WuButton><><WuTranslate __i18nKey="hello" /> {name} <WuTranslate __i18nKey="how are you" /></></WuButton>
+ */
+
+import { getComponentTree } from "./debug.js";
+
+/**
+ * Given a quasi's cooked string, extract leading whitespace, trimmed text,
+ * and trailing whitespace as separate pieces so spacing is preserved in the
+ * reconstructed JSX fragment.
+ *
+ * @param {string} raw - The cooked value of a TemplateElement.
+ * @returns {{ leading: string, text: string, trailing: string }}
+ */
+function splitQuasi(raw) {
+  const leading = raw.match(/^\s*/)[0];
+  const trailing = raw.match(/\s*$/)[0];
+  const text = raw.slice(leading.length, raw.length - trailing.length);
+  return { leading, text, trailing };
+}
+
+/**
+ * Transform a JSXExpressionContainer whose expression is a TemplateLiteral
+ * with one or more dynamic expressions into an interleaved React fragment:
+ *
+ *   {`hello ${name} how are you`}
+ *   → <><WuTranslate __i18nKey="hello" /> {name} <WuTranslate __i18nKey="how are you" /></>
+ *
+ * Quasis that are empty or whitespace-only are skipped (no key emitted).
+ * Leading/trailing whitespace within a quasi is preserved as JSX text around
+ * the WuTranslate element so words don't run together after translation.
+ *
+ * @param {import('@babel/traverse').NodePath} path  - JSXExpressionContainer path.
+ * @param {string}      code       - Original source (used to slice expression text).
+ * @param {import('magic-string').default} ms
+ * @param {import('./processor.js').TranslationProcessor} processor
+ * @param {string}      id         - Source file path (for collision warnings).
+ * @returns {boolean} `true` when a replacement was written.
+ */
+export function transformTemplateLiteralExpression(
+  path,
+  code,
+  ms,
+  processor,
+  id,
+) {
+  if (!processor.shouldTranslate(path)) return false;
+
+  const container = path.node;
+  const expr = container.expression; // TemplateLiteral
+  const { quasis, expressions } = expr;
+  const componentTree = getComponentTree(path);
+
+  const parts = [];
+  let hasTranslatable = false;
+
+  for (let i = 0; i < quasis.length; i++) {
+    const cooked = quasis[i].value.cooked ?? quasis[i].value.raw;
+    const { leading, text, trailing } = splitQuasi(cooked);
+
+    if (text) {
+      processor.record(text, text, id, componentTree);
+      parts.push(
+        `${leading}<WuTranslate __i18nKey=${JSON.stringify(text)}></WuTranslate>${trailing}`,
+      );
+      hasTranslatable = true;
+    }
+    // whitespace-only or empty quasi — emit nothing (no key, no node)
+
+    // Interleave: expression follows its preceding quasi (skip after last quasi)
+    if (i < expressions.length) {
+      const exprNode = expressions[i];
+      parts.push(`{${code.slice(exprNode.start, exprNode.end)}}`);
+    }
+  }
+
+  if (!hasTranslatable) return false;
+
+  // Replace the entire {`...`} container with a React fragment
+  ms.overwrite(container.start, container.end, `<>${parts.join("")}</>`);
+  return true;
+}

package/src/transformWtCalls.js

@@ -0,0 +1,136 @@
+/**
+ * @fileoverview transformWtCalls — detects wt("static string") call expressions
+ * and records the argument as a translation key.
+ *
+ * No code transformation is performed. wt() handles runtime lookup via the
+ * dictionary loaded by WuTranslateProvider. The plugin's only job here is to
+ * ensure static arguments appear in wick-ui-i18n.json at build time so they
+ * reach the translation API.
+ *
+ * Supported argument forms:
+ *   wt("hello")         — StringLiteral
+ *   wt(`hello`)         — TemplateLiteral with zero expressions
+ *
+ * Ignored:
+ *   wt(variable)        — dynamic, cannot be statically analysed
+ *   wt(`hello ${name}`) — has expressions, not fully static
+ *   wt()  /  wt(a, b)   — wrong arity
+ */
+
+/**
+ * Extract leading whitespace, normalised text, and trailing whitespace from a
+ * template quasi string. Mirrors the normalisation applied everywhere else in
+ * the plugin (newlines → space, consecutive spaces → one space).
+ *
+ * @param {string} raw
+ * @returns {{ leading: string, text: string, trailing: string }}
+ */
+function splitQuasi(raw) {
+  const leading = raw.match(/^\s*/)[0];
+  const trailing = raw.match(/\s*$/)[0];
+  const text = raw
+    .slice(leading.length, raw.length - trailing.length)
+    .replace(/\n/g, " ")
+    .replace(/\s{2,}/g, " ");
+  return {leading, text, trailing};
+}
+
+/**
+ * If `path` is a `wt(staticString)` call expression, record the key in the
+ * processor dictionary. Returns `true` when a key was recorded.
+ *
+ * @param {import('@babel/traverse').NodePath} path  - CallExpression path.
+ * @param {import('./processor.js').TranslationProcessor} processor
+ * @param {string} id - Source file path (for collision warnings).
+ * @returns {boolean}
+ */
+export function recordWtCall(path, processor, id) {
+  const { callee, arguments: args } = path.node;
+
+  // Only handle bare `wt(...)` identifiers — not obj.wt(...) etc.
+  if (callee.type !== "Identifier" || callee.name !== "wt") return false;
+  if (args.length !== 1) return false;
+
+  const arg = args[0];
+  let text = null;
+
+  if (arg.type === "StringLiteral") {
+    text = arg.value;
+  } else if (arg.type === "TemplateLiteral" && arg.expressions.length === 0) {
+    text = arg.quasis[0].value.cooked ?? arg.quasis[0].value.raw;
+  }
+
+  if (text === null) return false;
+
+  const cleanText = text
+    .trim()
+    .replace(/\n/g, " ")
+    .replace(/\s{2,}/g, " ");
+  if (!cleanText) return false;
+
+  processor.record(cleanText, cleanText, id, "(wt)");
+  return true;
+}
+
+/**
+ * Transform a `wt(\`template ${expr} literal\`)` call whose template has one
+ * or more dynamic expressions.
+ *
+ * Each static quasi is independently extracted and replaced with a nested
+ * `wt("text")` call; dynamic expressions are preserved in place. The whole
+ * `wt(\`...\`)` call is replaced with a plain template literal:
+ *
+ *   wt(`Hello ${name}`)        →  `${wt("Hello")} ${name}`
+ *   wt(`${a} and ${b}`)        →  `${a} ${wt("and")} ${b}`
+ *   wt(`Hello ${a} and ${b}`)  →  `${wt("Hello")} ${a} ${wt("and")} ${b}`
+ *
+ * If no quasi contains translatable text, the call is left untouched and the
+ * function returns `false`.
+ *
+ * @param {import('@babel/traverse').NodePath} path - CallExpression path.
+ * @param {string}      code   - Original source (for slicing expression text).
+ * @param {import('magic-string').default} ms
+ * @param {import('./processor.js').TranslationProcessor} processor
+ * @param {string}      id     - Source file path.
+ * @returns {boolean} `true` when the call was rewritten.
+ */
+export function transformWtTemplateLiteral(path, code, ms, processor, id) {
+  const {callee, arguments: args} = path.node;
+
+  if (callee.type !== "Identifier" || callee.name !== "wt") return false;
+  if (args.length !== 1) return false;
+
+  const arg = args[0];
+  if (arg.type !== "TemplateLiteral" || arg.expressions.length === 0)
+    return false;
+
+  const {quasis, expressions} = arg;
+  const parts = ["`"];
+  let hasTranslatable = false;
+
+  for (let i = 0; i < quasis.length; i++) {
+    const cooked = quasis[i].value.cooked ?? quasis[i].value.raw;
+    const {leading, text, trailing} = splitQuasi(cooked);
+
+    if (text) {
+      processor.record(text, text, id, "(wt)");
+      parts.push(`${leading}\${wt(${JSON.stringify(text)})}${trailing}`);
+      hasTranslatable = true;
+    } else {
+      // empty or whitespace-only quasi — preserve as literal template text
+      parts.push(cooked);
+    }
+
+    if (i < expressions.length) {
+      const exprSrc = code.slice(expressions[i].start, expressions[i].end);
+      parts.push(`\${${exprSrc}}`);
+    }
+  }
+
+  parts.push("`");
+
+  if (!hasTranslatable) return false;
+
+  ms.overwrite(path.node.start, path.node.end, parts.join(""));
+  return true;
+}

package/wickuii18n.test.js

@@ -1,16 +1,30 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 import wickuiI18nPlugin from "./index.js";
 
-// Helper to simulate Vite running the transform hook
 function transform(code, options = {}) {
   const plugin = wickuiI18nPlugin(options);
   const result = plugin.transform(code, "TestFile.jsx");
   return result ? result.code : code;
 }
 
-describe("Wick UI i18n Vite Plugin", () => {
-  // ─── Core translation ──────────────────────────────────────────────────────
+/**
+ * Run the full plugin lifecycle on `code` and return the emitted dictionary.
+ * Needed for wt() tests since those record keys without transforming code.
+ */
+function getDictionary(code, options = {}) {
+  const plugin = wickuiI18nPlugin(options);
+  plugin.buildStart();
+  plugin.transform(code, "TestFile.jsx");
+  let dict = {};
+  plugin.generateBundle.call({
+    emitFile: ({ source }) => {
+      dict = JSON.parse(source);
+    },
+  });
+  return dict;
+}
 
+describe("Wick UI i18n Vite Plugin", () => {
   it("1. Translates basic Wu* components and injects import", () => {
     const code = `<WuButton>Submit</WuButton>`;
     const result = transform(code);
@@ -55,7 +69,9 @@ describe("Wick UI i18n Vite Plugin", () => {
   it("6b. data-i18n-key propagates through nested elements", () => {
     const code = `<WuButton data-i18n-key="btn_login"><span>Log In</span></WuButton>`;
     const result = transform(code);
-    expect(result).toContain(`<WuTranslate __i18nKey="btn_login"></WuTranslate>`);
+    expect(result).toContain(
+      `<WuTranslate __i18nKey="btn_login"></WuTranslate>`,
+    );
     expect(result).not.toContain(`__i18nKey="Log In"`);
   });
 
@@ -100,8 +116,6 @@ describe("Wick UI i18n Vite Plugin", () => {
     expect(miss).toBeNull();
   });
 
-  // ─── Newline stripping ─────────────────────────────────────────────────────
-
   it("11. Strips newline from JSX text node", () => {
     const code = `<WuButton>Hello\nWorld</WuButton>`;
     const result = transform(code);
@@ -118,8 +132,6 @@ describe("Wick UI i18n Vite Plugin", () => {
     );
   });
 
-  // ─── Ternary expressions ───────────────────────────────────────────────────
-
   it("12. Translates both static branches of a ternary", () => {
     const code = `<WuButton>{isActive ? "Deactivate" : "Activate"}</WuButton>`;
     const result = transform(code);
@@ -184,4 +196,400 @@ describe("Wick UI i18n Vite Plugin", () => {
     const result = transform(code);
     expect(result).not.toContain(`WuTranslate`);
   });
+
+  it("13. Translates dynamic string literals", () => {
+    const code = `<WuButton>Submit {name}</WuButton>`;
+    const result = transform(code);
+    expect(result).toContain(`import { WuTranslate }`);
+    expect(result).toContain(`<WuTranslate __i18nKey="Submit"></WuTranslate>`);
+  });
+});
+
+// ─── HTML entities ─────────────────────────────────────────────────────────
+//
+// Any text segment containing an HTML entity must be left completely untouched.
+// Entities are presentational / structural characters (&nbsp;, &amp;, &copy;…)
+// that are not translatable and would confuse translation APIs.
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe("HTML entities", () => {
+  it("E1. standalone named entity is not wrapped", () => {
+    const code = `<WuButton>&amp;</WuButton>`;
+    const result = transform(code);
+    expect(result).not.toContain("WuTranslate");
+    expect(result).toContain("&amp;");
+  });
+
+  it("E2. text mixed with entity — non-entity parts wrapped, entity preserved", () => {
+    const code = `<WuButton>Hello &amp; World</WuButton>`;
+    const result = transform(code);
+    expect(result).toContain(`<WuTranslate __i18nKey="Hello"></WuTranslate>`);
+    expect(result).toContain(`<WuTranslate __i18nKey="World"></WuTranslate>`);
+    expect(result).toContain("&amp;");
+    // must not treat the whole string (decoded or raw) as one key
+    expect(result).not.toContain(`__i18nKey="Hello & World"`);
+    expect(result).not.toContain(`__i18nKey="Hello &amp; World"`);
+  });
+
+  it("E3. non-breaking space entity is not wrapped", () => {
+    const code = `<WuButton>&nbsp;</WuButton>`;
+    const result = transform(code);
+    expect(result).not.toContain("WuTranslate");
+  });
+
+  it("E4. numeric decimal entity is not wrapped", () => {
+    // &#169; = ©
+    const code = `<WuButton>&#169;</WuButton>`;
+    const result = transform(code);
+    expect(result).not.toContain("WuTranslate");
+  });
+
+  it("E5. numeric hex entity is not wrapped", () => {
+    // &#x00A9; = ©
+    const code = `<WuButton>&#x00A9;</WuButton>`;
+    const result = transform(code);
+    expect(result).not.toContain("WuTranslate");
+  });
+
+  it("E6. entity inside static string expression is not wrapped", () => {
+    const code = `<WuButton>{"Hello &amp; World"}</WuButton>`;
+    const result = transform(code);
+    expect(result).not.toContain("WuTranslate");
+  });
+
+  it("E7. entity branch in ternary not wrapped, clean branch still wrapped", () => {
+    const code = `<WuButton>{flag ? "Yes &amp;" : "No"}</WuButton>`;
+    const result = transform(code);
+    expect(result).not.toContain(`__i18nKey="Yes &amp;"`);
+    expect(result).toContain(`<WuTranslate __i18nKey="No"></WuTranslate>`);
+  });
+
+  it("E8. entity JSXText sibling not wrapped, clean siblings still wrapped", () => {
+    // <WuButton>Hello {x}&amp;{y} World</WuButton>
+    // JSXText nodes: "Hello ", "&amp;", " World"
+    // Babel decodes &amp; → "&" in .value, so check both forms are absent
+    const code = `<WuButton>Hello {x}&amp;{y} World</WuButton>`;
+    const result = transform(code);
+    expect(result).toContain(`<WuTranslate __i18nKey="Hello"></WuTranslate>`);
+    expect(result).not.toContain(`__i18nKey="&amp;"`);
+    expect(result).not.toContain(`__i18nKey="&"`);
+    expect(result).toContain(`<WuTranslate __i18nKey="World"></WuTranslate>`);
+  });
+
+  it("E9. multiple entities — text between them wrapped, both entities kept", () => {
+    // &lt;Tag&gt;  →  &lt;<WuTranslate key="Tag" />&gt;
+    const code = `<WuButton>&lt;Tag&gt;</WuButton>`;
+    const result = transform(code);
+    expect(result).toContain(`<WuTranslate __i18nKey="Tag"></WuTranslate>`);
+    expect(result).toContain("&lt;");
+    expect(result).toContain("&gt;");
+  });
+
+  it("E10. entity at boundaries — text in middle still wrapped", () => {
+    // &nbsp;Hello&nbsp;  →  &nbsp;<WuTranslate key="Hello" />&nbsp;
+    const code = `<WuButton>&nbsp;Hello&nbsp;</WuButton>`;
+    const result = transform(code);
+    expect(result).toContain(`<WuTranslate __i18nKey="Hello"></WuTranslate>`);
+    expect(result).toContain("&nbsp;");
+  });
+
+  it("E11. only entities, no text — nothing wrapped", () => {
+    const code = `<WuButton>&lt;&gt;</WuButton>`;
+    const result = transform(code);
+    expect(result).not.toContain("WuTranslate");
+  });
+
+  // fix 1: whitespace normalisation inside entity-split segments
+  it("E12. internal newlines in entity-split segment are normalised", () => {
+    const code = "<WuButton>Hello\nWorld &amp; Goodbye\nFriend</WuButton>";
+    const result = transform(code);
+    expect(result).toContain(`__i18nKey="Hello World"`);
+    expect(result).toContain(`__i18nKey="Goodbye Friend"`);
+    expect(result).not.toContain("Hello\\nWorld");
+  });
+
+  it("E13. multiple spaces in entity-split segment are collapsed", () => {
+    const code = "<WuButton>Hello  World &amp; Foo</WuButton>";
+    const result = transform(code);
+    expect(result).toContain(`__i18nKey="Hello World"`);
+    expect(result).toContain(`__i18nKey="Foo"`);
+    expect(result).not.toContain(`__i18nKey="Hello  World"`);
+  });
+
+  // fix 2: data-i18n-key bypass
+  it("E14. data-i18n-key with entity — warns and splits using text as keys", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const code = `<WuButton data-i18n-key="btn">Hello &amp; World</WuButton>`;
+    const result = transform(code);
+    expect(warnSpy).toHaveBeenCalledWith(
+      expect.stringContaining('data-i18n-key="btn"'),
+    );
+    expect(result).toContain(`__i18nKey="Hello"`);
+    expect(result).toContain(`__i18nKey="World"`);
+    expect(result).not.toContain(`__i18nKey="btn"`);
+    warnSpy.mockRestore();
+  });
+});
+
+describe("Mixed static + dynamic interpolation", () => {
+  describe("A: JSX mixed children", () => {
+    it("A1. text before dynamic  →  wraps leading text, keeps expr", () => {
+      // <WuButton>hello {name}</WuButton>
+      // children: JSXText("hello ") + JSXExpressionContainer(name)
+      const code = `<WuButton>hello {name}</WuButton>`;
+      const result = transform(code);
+      expect(result).toContain(`<WuTranslate __i18nKey="hello"></WuTranslate>`);
+      expect(result).toContain(`{name}`);
+      expect(result).not.toContain(`__i18nKey="name"`);
+    });
+
+    it("A2. dynamic before text  →  keeps expr, wraps trailing text", () => {
+      // <WuButton>{name} how are you</WuButton>
+      const code = `<WuButton>{name} how are you</WuButton>`;
+      const result = transform(code);
+      expect(result).toContain(
+        `<WuTranslate __i18nKey="how are you"></WuTranslate>`,
+      );
+      expect(result).toContain(`{name}`);
+    });
+
+    it("A3. text + dynamic + text  →  wraps both text segments independently", () => {
+      // <WuButton>hello {name} how are you</WuButton>
+      const code = `<WuButton>hello {name} how are you</WuButton>`;
+      const result = transform(code);
+      expect(result).toContain(`<WuTranslate __i18nKey="hello"></WuTranslate>`);
+      expect(result).toContain(
+        `<WuTranslate __i18nKey="how are you"></WuTranslate>`,
+      );
+      expect(result).toContain(`{name}`);
+    });
+
+    it("A4. multiple dynamics with text between  →  wraps middle text", () => {
+      // <WuButton>{a} and {b}</WuButton>
+      const code = `<WuButton>{a} and {b}</WuButton>`;
+      const result = transform(code);
+      expect(result).toContain(`<WuTranslate __i18nKey="and"></WuTranslate>`);
+      expect(result).toContain(`{a}`);
+      expect(result).toContain(`{b}`);
+    });
+
+    it("A5. text + two dynamics + text  →  wraps outer text, keeps both exprs", () => {
+      // <WuButton>hello {a} and {b} end</WuButton>
+      const code = `<WuButton>hello {a} and {b} end</WuButton>`;
+      const result = transform(code);
+      expect(result).toContain(`<WuTranslate __i18nKey="hello"></WuTranslate>`);
+      expect(result).toContain(`<WuTranslate __i18nKey="and"></WuTranslate>`);
+      expect(result).toContain(`<WuTranslate __i18nKey="end"></WuTranslate>`);
+      expect(result).toContain(`{a}`);
+      expect(result).toContain(`{b}`);
+    });
+
+    it("A6. whitespace-only text between two dynamics  →  not wrapped", () => {
+      // <WuButton>{a}   {b}</WuButton>  — JSXText between them is only spaces
+      const code = `<WuButton>{a}   {b}</WuButton>`;
+      const result = transform(code);
+      // whitespace-only JSXText must not produce a key
+      expect(result).not.toContain(`WuTranslate`);
+    });
+  });
+
+  // ── B: Template literal with expressions ──────────────────────────────────
+  // Currently the plugin skips any TemplateLiteral whose .expressions.length > 0.
+  // The expected output reconstructs the container as a React fragment:
+  //   {`hello ${name}`}  →  <><WuTranslate __i18nKey="hello" />{name}</>
+  //
+  // All tests in this group are expected to FAIL until the feature lands.
+
+  describe("B: Template literal with expressions", () => {
+    it("B1. text before dynamic  →  wraps leading quasi, keeps expr", () => {
+      // {`hello ${name}`}  →  <><WuTranslate __i18nKey="hello" />{name}</>
+      const code = "<WuButton>{`hello ${name}`}</WuButton>";
+      const result = transform(code);
+      expect(result).toContain(`<WuTranslate __i18nKey="hello"></WuTranslate>`);
+      expect(result).toContain(`{name}`);
+      expect(result).not.toContain('__i18nKey="name"');
+    });
+
+    it("B2. dynamic before text  →  keeps expr, wraps trailing quasi", () => {
+      // {`${name} how are you`}  →  <>{name}<WuTranslate __i18nKey="how are you" /></>
+      const code = "<WuButton>{`${name} how are you`}</WuButton>";
+      const result = transform(code);
+      expect(result).toContain(
+        `<WuTranslate __i18nKey="how are you"></WuTranslate>`,
+      );
+      expect(result).toContain(`{name}`);
+    });
+
+    it("B3. text + dynamic + text  →  wraps both quasis, keeps expr in between", () => {
+      // {`hello ${name} how are you`}
+      //   → <><WuTranslate __i18nKey="hello" />{name}<WuTranslate __i18nKey="how are you" /></>
+      const code = "<WuButton>{`hello ${name} how are you`}</WuButton>";
+      const result = transform(code);
+      expect(result).toContain(`<WuTranslate __i18nKey="hello"></WuTranslate>`);
+      expect(result).toContain(
+        `<WuTranslate __i18nKey="how are you"></WuTranslate>`,
+      );
+      expect(result).toContain(`{name}`);
+    });
+
+    it("B4. two dynamics with static text between  →  wraps middle quasi only", () => {
+      // {`${a} and ${b}`}  →  <>{a}<WuTranslate __i18nKey="and" />{b}</>
+      const code = "<WuButton>{`${a} and ${b}`}</WuButton>";
+      const result = transform(code);
+      expect(result).toContain(`<WuTranslate __i18nKey="and"></WuTranslate>`);
+      expect(result).toContain(`{a}`);
+      expect(result).toContain(`{b}`);
+    });
+
+    it("B5. text + two dynamics + text  →  wraps outer quasis and middle quasi", () => {
+      // {`hello ${a} and ${b} end`}
+      //   → <><WuTranslate key="hello" />{a}<WuTranslate key="and" />{b}<WuTranslate key="end" /></>
+      const code = "<WuButton>{`hello ${a} and ${b} end`}</WuButton>";
+      const result = transform(code);
+      expect(result).toContain(`<WuTranslate __i18nKey="hello"></WuTranslate>`);
+      expect(result).toContain(`<WuTranslate __i18nKey="and"></WuTranslate>`);
+      expect(result).toContain(`<WuTranslate __i18nKey="end"></WuTranslate>`);
+      expect(result).toContain(`{a}`);
+      expect(result).toContain(`{b}`);
+    });
+
+    it("B6. empty quasis between two dynamics  →  no key emitted for empty segment", () => {
+      // {`${a}${b}`}  →  <>{a}{b}</>
+      // quasis: ["", "", ""] — all empty, nothing to wrap
+      const code = "<WuButton>{`${a}${b}`}</WuButton>";
+      const result = transform(code);
+      // no translation key for empty/whitespace quasis
+      expect(result).not.toContain(`__i18nKey`);
+    });
+
+    it("B7. whitespace-only quasi between dynamics  →  not wrapped", () => {
+      // {`${a}   ${b}`}  →  <>{a}   {b}</>
+      const code = "<WuButton>{`${a}   ${b}`}</WuButton>";
+      const result = transform(code);
+      expect(result).not.toContain(`WuTranslate`);
+    });
+
+    it("B8. ignored component — template literal skipped entirely", () => {
+      const code = "<WuIcon>{`hello ${name}`}</WuIcon>";
+      const result = transform(code);
+      expect(result).not.toContain(`WuTranslate`);
+    });
+
+    it("B9. data-skip — template literal skipped entirely", () => {
+      const code = "<WuButton data-skip>{`hello ${name}`}</WuButton>";
+      const result = transform(code);
+      expect(result).not.toContain(`WuTranslate`);
+    });
+
+    it("B10. output is a React fragment wrapping the interleaved nodes", () => {
+      // the entire {`...`} container is replaced with <> ... </>
+      const code = "<WuButton>{`hello ${name}`}</WuButton>";
+      const result = transform(code);
+      expect(result).toMatch(/<>.*WuTranslate.*<\/>/s);
+    });
+  });
+});
+
+// ─── wt() call expressions ───────────────────────────────────────────────────────
+//
+// wt("static string") is a runtime lookup helper exposed from useTranslate().
+// The plugin’s job is to record static arguments into wick-ui-i18n.json so
+// they reach the translation API. No code transformation is performed.
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe("wt() call expressions", () => {
+  it("W1. string literal arg is recorded in dictionary", () => {
+    const dict = getDictionary(`const text = wt("hello");`);
+    expect(dict).toHaveProperty("hello", "hello");
+  });
+
+  it("W2. static template literal arg is recorded", () => {
+    const dict = getDictionary("const text = wt(`hello`);");
+    expect(dict).toHaveProperty("hello", "hello");
+  });
+
+  it("W3. dynamic variable arg is ignored", () => {
+    const dict = getDictionary(`const text = wt(variable);`);
+    expect(dict).not.toHaveProperty("variable");
+  });
+
+  it("W4. template literal with expressions — static quasis extracted", () => {
+    // wt(`hello ${name}`) → `${wt("hello")} ${name}`
+    const dict = getDictionary("const text = wt(`hello ${name}`);");
+    expect(dict).toHaveProperty("hello", "hello");
+  });
+
+  it("W11. template literal — call is transformed into nested wt() calls", () => {
+    const result = transform("const text = wt(`hello ${name}`);");
+    expect(result).toContain('wt("hello")');
+    expect(result).not.toContain("wt(`hello ${name}`)");
+  });
+
+  it("W12. text before expr  →  leading quasi wrapped, expr kept", () => {
+    const result = transform("const t = wt(`hello ${name}`);");
+    expect(result).toContain('wt("hello")');
+    expect(result).toContain("${name}");
+  });
+
+  it("W13. text after expr  →  trailing quasi wrapped, expr kept", () => {
+    const result = transform("const t = wt(`${name} how are you`);");
+    expect(result).toContain('wt("how are you")');
+    expect(result).toContain("${name}");
+  });
+
+  it("W14. text + expr + text  →  both quasis wrapped, expr in between", () => {
+    const result = transform("const t = wt(`hello ${name} how are you`);");
+    expect(result).toContain('wt("hello")');
+    expect(result).toContain('wt("how are you")');
+    expect(result).toContain("${name}");
+  });
+
+  it("W15. only expressions, no static text  →  no transform", () => {
+    const result = transform("const t = wt(`${a}${b}`);");
+    expect(result).not.toContain("wt(\"");
+    // original call preserved as-is
+    expect(result).toContain("wt(`${a}${b}`)");
+  });
+
+  it("W16. whitespace-only quasi between exprs  →  no transform", () => {
+    const result = transform("const t = wt(`${a}   ${b}`);");
+    expect(result).not.toContain("wt(\"");
+  });
+
+  it("W5. multiple wt() calls in same file all recorded", () => {
+    const dict = getDictionary(`const a = wt("hello"); const b = wt("world");`);
+    expect(dict).toHaveProperty("hello", "hello");
+    expect(dict).toHaveProperty("world", "world");
+  });
+
+  it("W6. whitespace in arg is normalised", () => {
+    const dict = getDictionary(`const text = wt("hello  world");`);
+    expect(dict).toHaveProperty("hello world", "hello world");
+  });
+
+  it("W7. wt() call inside JSX expression is recorded", () => {
+    const dict = getDictionary(`<WuButton>{wt("hello")}</WuButton>`);
+    expect(dict).toHaveProperty("hello", "hello");
+  });
+
+  it("W8. code is not transformed — wt() call left as-is", () => {
+    const result = transform(`const text = wt("hello");`);
+    expect(result).not.toContain("WuTranslate");
+    expect(result).toContain(`wt("hello")`);
+  });
+
+  it("W9. wt() and JSX translations coexist in same file", () => {
+    const code = `<WuButton>{wt("save")}</WuButton>`;
+    const dict = getDictionary(code);
+    // wt() arg recorded
+    expect(dict).toHaveProperty("save", "save");
+    // code still not transformed (no WuTranslate wrapping the wt call)
+    const result = transform(code);
+    expect(result).toContain(`wt("save")`);
+  });
+
+  it("W10. empty string arg is ignored", () => {
+    const dict = getDictionary(`const text = wt("");`);
+    expect(Object.keys(dict)).toHaveLength(0);
+  });
 });