@upstart.gg/vite-plugins 0.1.59 → 0.1.61

package/src/tests/vite-plugin-upstart-attrs.test.ts

@@ -1701,7 +1701,7 @@ describe("upstart-editor-vite-plugin", () => {
       expect(result).toContain('data-upstart-editable-text="true"');
     });
 
-    test("should NOT be editable when Trans is mixed with static text", () => {
+    test("should be editable with a prefix when Trans is mixed with static text", () => {
       const code = `
         import { Trans } from "react-i18next";
         export default function App() {
@@ -1709,10 +1709,11 @@ describe("upstart-editor-vite-plugin", () => {
         }
       `;
       const result = transform(code);
-      // "Prefix: " is non-whitespace JSXText alongside Trans → mixed → NOT editable
-      // Saving would incorrectly include "Prefix: " in the translation value
-      expect(result).not.toContain('data-upstart-editable-text="true"');
-      expect(result).not.toContain("data-upstart-i18n");
+      // "Prefix: " only surrounds a single i18n node → exported as a static affix so
+      // the runtime editor keeps it out of the saved translation value
+      expect(result).toContain('data-upstart-editable-text="true"');
+      expect(result).toContain('data-upstart-i18n="translation:key"');
+      expect(result).toContain('data-upstart-i18n-prefix="Prefix: "');
     });
 
     test("should promote <Trans> from inside && expression to parent", () => {
@@ -1735,8 +1736,8 @@ describe("upstart-editor-vite-plugin", () => {
         }
       `;
       const result = transform(code);
-      // Both keys should be comma-separated on the parent
-      expect(result).toContain('data-upstart-i18n="app:welcome,app:login"');
+      // Only one branch renders, so the key is resolved at runtime from the condition
+      expect(result).toContain('data-upstart-i18n={isLoggedIn ? "app:welcome" : "app:login"}');
       expect(result).toContain('data-upstart-editable-text="true"');
     });
 
@@ -1842,9 +1843,11 @@ describe("upstart-editor-vite-plugin", () => {
           }
         `;
         const result = transform(code);
-        // Both branches are i18n — no non-i18n text produced
+        // Both branches are i18n — no non-i18n text produced, key resolved at runtime
         expect(result).toContain('data-upstart-editable-text="true"');
-        expect(result).toContain('data-upstart-i18n="translation:role.admin,translation:role.user"');
+        expect(result).toContain(
+          'data-upstart-i18n={isAdmin ? "translation:role.admin" : "translation:role.user"}',
+        );
       });
 
       test("should still be editable when only whitespace {' '} separates Trans from nothing", () => {
@@ -1860,6 +1863,211 @@ describe("upstart-editor-vite-plugin", () => {
         expect(result).toContain('data-upstart-i18n="translation:label"');
       });
     });
+
+    describe("i18n with static text affixes", () => {
+      test("should be editable with a suffix when a bare asterisk follows Trans", () => {
+        const code = `
+          import { Trans } from "react-i18next";
+          export default function App() {
+            return (
+              <label className="label">
+                <Trans i18nKey="contact.form.phone" /> *
+              </label>
+            );
+          }
+        `;
+        const result = transform(code);
+        expect(result).toContain('data-upstart-editable-text="true"');
+        expect(result).toContain('data-upstart-editable-text-mode="plain"');
+        expect(result).toContain('data-upstart-i18n="translation:contact.form.phone"');
+        expect(result).toContain('data-upstart-i18n-suffix=" *"');
+        expect(result).not.toContain("data-upstart-i18n-prefix");
+      });
+
+      test("should be editable with a suffix when the asterisk is wrapped in a static span", () => {
+        const code = `
+          import { Trans } from "react-i18next";
+          export default function App() {
+            return (
+              <label className="label">
+                <Trans i18nKey="contact.form.name" /> <span aria-hidden="true">*</span>
+              </label>
+            );
+          }
+        `;
+        const result = transform(code);
+        expect(result).toContain('data-upstart-editable-text="true"');
+        expect(result).toContain('data-upstart-i18n="translation:contact.form.name"');
+        expect(result).toContain('data-upstart-i18n-suffix=" *"');
+      });
+
+      test("should capture a static prefix before Trans", () => {
+        const code = `
+          import { Trans } from "react-i18next";
+          export default function App() {
+            return <label>* <Trans i18nKey="form.city" /></label>;
+          }
+        `;
+        const result = transform(code);
+        expect(result).toContain('data-upstart-editable-text="true"');
+        expect(result).toContain('data-upstart-i18n-prefix="* "');
+        expect(result).not.toContain("data-upstart-i18n-suffix");
+      });
+
+      test("should escape quotes in affixes", () => {
+        const code = `
+          import { Trans } from "react-i18next";
+          export default function App() {
+            return <label><Trans i18nKey="form.size" /> (")</label>;
+          }
+        `;
+        const result = transform(code);
+        expect(result).toContain('data-upstart-i18n-suffix=" (&quot;)"');
+      });
+
+      test("should NOT emit affixes when there are two i18n sources around static text", () => {
+        const code = `
+          import { Trans } from "react-i18next";
+          export default function App() {
+            return <p><Trans i18nKey="a" /> / <Trans i18nKey="b" /></p>;
+          }
+        `;
+        const result = transform(code);
+        expect(result).not.toContain('data-upstart-editable-text="true"');
+        expect(result).not.toContain("data-upstart-i18n-suffix");
+      });
+
+      test("should NOT emit affixes when a dynamic expression sits next to Trans", () => {
+        const code = `
+          import { Trans } from "react-i18next";
+          export default function App() {
+            return <label><Trans i18nKey="form.count" /> ({count})</label>;
+          }
+        `;
+        const result = transform(code);
+        expect(result).not.toContain('data-upstart-editable-text="true"');
+        expect(result).not.toContain("data-upstart-i18n-suffix");
+      });
+
+      test("should NOT emit affixes when a sibling element is not purely static", () => {
+        const code = `
+          import { Trans } from "react-i18next";
+          export default function App() {
+            return <label><Trans i18nKey="form.city" /> <span>{hint}</span></label>;
+          }
+        `;
+        const result = transform(code);
+        expect(result).not.toContain('data-upstart-editable-text="true"');
+      });
+
+      test("should NOT emit affixes when the element has no resolvable single key", () => {
+        const code = `
+          import { Trans } from "react-i18next";
+          export default function App() {
+            return <p><Trans i18nKey="a" /><Trans i18nKey="b" /></p>;
+          }
+        `;
+        const result = transform(code);
+        // Two translations render at once → no key can be resolved
+        expect(result).not.toContain("data-upstart-i18n");
+        expect(result).not.toContain('data-upstart-editable-text="true"');
+      });
+
+      test("should emit affixes around a t() call too", () => {
+        const code = `
+          import { useTranslation } from "react-i18next";
+          export default function App() {
+            const { t } = useTranslation();
+            return <label>{t("form.email")} *</label>;
+          }
+        `;
+        const result = transform(code);
+        expect(result).toContain('data-upstart-editable-text="true"');
+        expect(result).toContain('data-upstart-i18n="translation:form.email"');
+        expect(result).toContain('data-upstart-i18n-suffix=" *"');
+      });
+    });
+  });
+
+  describe("Runtime-resolved i18n key (single key per element)", () => {
+    test("should resolve the key from the condition for a submit button", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App({ isSubmitting }) {
+          return (
+            <button type="submit" disabled={isSubmitting}>
+              {isSubmitting ? <Trans i18nKey="form.submitting" /> : <Trans i18nKey="form.submit" />}
+            </button>
+          );
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain('data-upstart-editable-text="true"');
+      expect(result).toContain(
+        'data-upstart-i18n={isSubmitting ? "translation:form.submitting" : "translation:form.submit"}',
+      );
+      // Never a comma-separated list — the runtime cannot parse those
+      expect(result).not.toMatch(/data-upstart-i18n="[^"]*,/);
+    });
+
+    test("should keep a member-expression condition intact", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App({ nav }) {
+          return <span>{nav.state === "idle" ? <Trans i18nKey="a" /> : <Trans i18nKey="b" />}</span>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain(
+        'data-upstart-i18n={nav.state === "idle" ? "translation:a" : "translation:b"}',
+      );
+    });
+
+    test("should mix a runtime-resolved key with a static suffix", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App({ isSubmitting }) {
+          return <label>{isSubmitting ? <Trans i18nKey="a" /> : <Trans i18nKey="b" />} *</label>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain('data-upstart-i18n-suffix=" *"');
+      expect(result).toContain('data-upstart-i18n={isSubmitting ? "translation:a" : "translation:b"}');
+    });
+
+    test("should NOT be editable when a Trans sits next to an i18n ternary", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App({ flag }) {
+          return <p><Trans i18nKey="lead" />{flag ? <Trans i18nKey="a" /> : <Trans i18nKey="b" />}</p>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).not.toContain("data-upstart-i18n");
+      expect(result).not.toContain('data-upstart-editable-text="true"');
+    });
+
+    test("should NOT be editable when a ternary branch holds two translations", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App({ flag }) {
+          return <p>{flag ? <><Trans i18nKey="a" /><Trans i18nKey="b" /></> : <Trans i18nKey="c" />}</p>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).not.toContain("data-upstart-i18n=");
+    });
+
+    test("should still emit a plain static key for a single translation", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          return <h1><Trans i18nKey="site.title" /></h1>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain('data-upstart-i18n="translation:site.title"');
+    });
   });
 
   describe("useTranslation t() Function Detection", () => {
@@ -1921,7 +2129,9 @@ describe("upstart-editor-vite-plugin", () => {
         }
       `;
       const result = transform(code);
-      expect(result).toContain('data-upstart-i18n="translation:active,translation:inactive"');
+      expect(result).toContain(
+        'data-upstart-i18n={isActive ? "translation:active" : "translation:inactive"}',
+      );
     });
 
     test("should detect t() in logical expression", () => {
@@ -1961,7 +2171,7 @@ describe("upstart-editor-vite-plugin", () => {
       expect(result).toContain('data-upstart-i18n="translation:features.title"');
     });
 
-    test("should combine Trans and t() keys in same parent", () => {
+    test("should NOT be editable when a t() call and a Trans render side by side", () => {
       const code = `
         import { useTranslation } from "react-i18next";
         import { Trans } from "react-i18next";
@@ -1971,8 +2181,9 @@ describe("upstart-editor-vite-plugin", () => {
         }
       `;
       const result = transform(code);
-      expect(result).toContain('data-upstart-i18n="app:suffix,app:prefix"');
-      expect(result).toContain('data-upstart-editable-text="true"');
+      // Both translations render at once: an inline edit could not be routed to a key
+      expect(result).not.toContain("data-upstart-i18n");
+      expect(result).not.toContain('data-upstart-editable-text="true"');
     });
 
     test("should detect t() inside .map() callback on child element", () => {

package/src/vite-plugin-upstart-attrs.ts

@@ -314,24 +314,34 @@ export function transformWithOxc(code: string, filePath: string) {
         const tCallChildren = findTCallsInChildren(jsxNode, state.code, state);
         const allI18nKeys = [...transChildren, ...tCallChildren];
         const hasI18n = allI18nKeys.length > 0;
-
-        if (hasI18n && !hasMixedNonI18nContent(jsxNode, state.code, state, state.constants)) {
+        const isMixed = hasI18n && hasMixedNonI18nContent(jsxNode, state.code, state, state.constants);
+
+        // Mixed content is normally disqualifying, but the very common
+        // `<label><Trans i18nKey="…" /> *</label>` shape is recoverable: the static
+        // text around the single i18n node is exported as prefix/suffix so the editor
+        // can keep it out of the saved translation.
+        const i18nAffixes = isMixed
+          ? detectI18nStaticAffixes(jsxNode, state.code, state, state.constants)
+          : null;
+
+        // The element must resolve to exactly ONE translation key at runtime, otherwise
+        // an inline edit could not be routed to the right key.
+        const i18nAttrValue = hasI18n
+          ? buildI18nAttributeValue(jsxNode, allI18nKeys, state.code, state, state.constants)
+          : null;
+
+        if (hasI18n && i18nAttrValue && (!isMixed || i18nAffixes)) {
           attributes.push('data-upstart-editable-text="true"');
           attributes.push('data-upstart-editable-text-mode="plain"');
 
-          const hasDynamic = allI18nKeys.some((t) => t.keyExpr || t.nsExpr);
-          if (hasDynamic) {
-            // Build a runtime JSX template expression for dynamic i18n keys
-            const parts = allI18nKeys.map((t) => {
-              const nsPart = t.nsExpr ? `\${${t.nsExpr}}` : t.namespace;
-              const keyPart = t.keyExpr ? `\${${t.keyExpr}}` : t.key;
-              return `${nsPart}:${keyPart}`;
-            });
-            attributes.push(`data-upstart-i18n={\`${parts.join(",")}\`}`);
-          } else {
-            const keys = allI18nKeys.map((t: I18nKeyInfo) => escapeProp(t.fullKey)).join(",");
-            attributes.push(`data-upstart-i18n="${keys}"`);
+          if (i18nAffixes?.prefix) {
+            attributes.push(`data-upstart-i18n-prefix="${escapeProp(i18nAffixes.prefix)}"`);
           }
+          if (i18nAffixes?.suffix) {
+            attributes.push(`data-upstart-i18n-suffix="${escapeProp(i18nAffixes.suffix)}"`);
+          }
+
+          attributes.push(`data-upstart-i18n=${i18nAttrValue}`);
 
           const allValueKeys = [...new Set(allI18nKeys.flatMap((t) => t.valueKeys ?? []))];
           if (allValueKeys.length > 0) {
@@ -1044,6 +1054,22 @@ function findTransInExpression(
     return;
   }
 
+  // A fragment renders all of its children at once — collect every key it holds
+  if (expr.type === "JSXFragment") {
+    for (const child of expr.children) {
+      if (child.type === "JSXElement") {
+        const info = detectTransComponent(child as JSXElement, code, constants);
+        if (info) results.push(info);
+      } else if (child.type === "JSXExpressionContainer") {
+        const inner = (child as any).expression;
+        if (inner && inner.type !== "JSXEmptyExpression") {
+          findTransInExpression(inner, code, results, constants);
+        }
+      }
+    }
+    return;
+  }
+
   if (expr.type === "LogicalExpression") {
     findTransInExpression(expr.left, code, results, constants);
     findTransInExpression(expr.right, code, results, constants);
@@ -1099,6 +1125,197 @@ function findTCallsInChildren(jsxElement: JSXElement, code: string, state: Trans
   return results;
 }
 
+// Source of a JS expression resolving to "namespace:key" for one i18n reference.
+function i18nKeyExpressionSource(info: I18nKeyInfo): string {
+  if (info.keyExpr || info.nsExpr) {
+    const nsPart = info.nsExpr ? `\${${info.nsExpr}}` : info.namespace;
+    const keyPart = info.keyExpr ? `\${${info.keyExpr}}` : info.key;
+    return `\`${nsPart}:${keyPart}\``;
+  }
+  return JSON.stringify(info.fullKey);
+}
+
+interface I18nTernary {
+  /** Source of the ternary condition, e.g. "isSubmitting" */
+  test: string;
+  consequent: I18nKeyInfo;
+  alternate: I18nKeyInfo;
+}
+
+// Detects an element whose only i18n content is a ternary between two translations,
+// e.g. `<button>{isSubmitting ? <Trans i18nKey="a" /> : <Trans i18nKey="b" />}</button>`.
+// Only one branch is ever rendered, so the key can be resolved at runtime instead of
+// being ambiguous. Returns null as soon as anything else produces i18n content.
+function detectI18nTernary(
+  jsxNode: JSXElement,
+  code: string,
+  state: TransformState,
+  constants: Map<string, string>,
+): I18nTernary | null {
+  const keysOf = (expr: unknown): I18nKeyInfo[] => {
+    const found: I18nKeyInfo[] = [];
+    findTransInExpression(expr, code, found, constants);
+    findTCallInExpression(expr, code, found, state);
+    return found;
+  };
+
+  let ternary: I18nTernary | null = null;
+
+  for (const child of jsxNode.children) {
+    if (child.type === "JSXElement") {
+      // A <Trans> sibling renders at the same time as the ternary → ambiguous
+      if (detectTransComponent(child as JSXElement, code, constants)) return null;
+      continue;
+    }
+
+    if (child.type !== "JSXExpressionContainer") continue;
+
+    const expr = (child as any).expression;
+    if (!expr || expr.type === "JSXEmptyExpression") continue;
+    if (keysOf(expr).length === 0) continue;
+
+    // A second i18n-producing child renders alongside the first → ambiguous
+    if (ternary) return null;
+    if (expr.type !== "ConditionalExpression" || !hasRange(expr.test)) return null;
+
+    const consequentKeys = keysOf(expr.consequent);
+    const alternateKeys = keysOf(expr.alternate);
+    if (consequentKeys.length !== 1 || alternateKeys.length !== 1) return null;
+
+    ternary = {
+      test: code.slice(expr.test.start, expr.test.end),
+      consequent: consequentKeys[0],
+      alternate: alternateKeys[0],
+    };
+  }
+
+  return ternary;
+}
+
+// Builds the source of the `data-upstart-i18n` attribute, which must resolve to a
+// single "namespace:key" at runtime so an inline edit can be routed to the right
+// translation:
+//   "translation:home.title"                            — single static key
+//   {`${ns}:${keyVar}`}                                  — dynamic key and/or namespace
+//   {isSubmitting ? "translation:a" : "translation:b"}   — ternary between two translations
+// Returns null when the element renders several translations at once — the element
+// then stays non-editable rather than saving edits to a bogus key.
+function buildI18nAttributeValue(
+  jsxNode: JSXElement,
+  keys: I18nKeyInfo[],
+  code: string,
+  state: TransformState,
+  constants: Map<string, string>,
+): string | null {
+  if (keys.length === 1) {
+    const [info] = keys;
+    if (info.keyExpr || info.nsExpr) {
+      return `{${i18nKeyExpressionSource(info)}}`;
+    }
+    return `"${escapeProp(info.fullKey)}"`;
+  }
+
+  const ternary = detectI18nTernary(jsxNode, code, state, constants);
+  if (!ternary) return null;
+
+  const consequent = i18nKeyExpressionSource(ternary.consequent);
+  const alternate = i18nKeyExpressionSource(ternary.alternate);
+  return `{${ternary.test} ? ${consequent} : ${alternate}}`;
+}
+
+// Returns the visible text of an element whose children are exclusively JSXText
+// (e.g. the "*" of `<span aria-hidden="true">*</span>`), or null when the element
+// contains anything dynamic. Such an element renders static text, so next to an
+// i18n node it must be treated as a static affix, never as editable content.
+function getStaticElementText(jsxElement: JSXElement): string | null {
+  let text = "";
+  for (const child of jsxElement.children) {
+    if (child.type !== "JSXText") return null;
+    text += normalizeJSXText((child as any).value as string);
+  }
+  return text.trim().length > 0 ? text : null;
+}
+
+interface I18nStaticAffixes {
+  /** Static text rendered before the i18n node, e.g. "" */
+  prefix: string;
+  /** Static text rendered after the i18n node, e.g. " *" */
+  suffix: string;
+}
+
+// Detects the "single i18n source surrounded by static text" shape, e.g.
+//   <label><Trans i18nKey="contact.form.phone" /> *</label>
+// Returns the static text rendered before/after the i18n node (normalised the same
+// way React normalises JSXText), or null when the element does not match: several
+// i18n sources, non-i18n elements, or dynamic expressions among the children.
+// The affixes let the runtime editor strip the static parts from the editable
+// content so they never leak into the saved translation.
+function detectI18nStaticAffixes(
+  jsxNode: JSXElement,
+  code: string,
+  state: TransformState,
+  constants: Map<string, string>,
+): I18nStaticAffixes | null {
+  let prefix = "";
+  let suffix = "";
+  let seenI18n = false;
+
+  const append = (text: string): void => {
+    if (seenI18n) suffix += text;
+    else prefix += text;
+  };
+
+  for (const child of jsxNode.children) {
+    if (child.type === "JSXText") {
+      // React only trims JSXText around newlines; a single-line text (e.g. the " "
+      // or " *" between two elements) is rendered verbatim.
+      const raw = (child as any).value as string;
+      const text = /[\r\n]/.test(raw) ? normalizeJSXText(raw) : raw;
+      if (text) append(text);
+      continue;
+    }
+
+    if (child.type === "JSXElement") {
+      if (detectTransComponent(child as JSXElement, code, constants)) {
+        if (seenI18n) return null;
+        seenI18n = true;
+        continue;
+      }
+      // A purely static element (e.g. <span aria-hidden="true">*</span>) is an affix
+      const staticText = getStaticElementText(child as JSXElement);
+      if (staticText === null) return null;
+      append(staticText);
+      continue;
+    }
+
+    if (child.type === "JSXExpressionContainer") {
+      const expr = (child as any).expression;
+      if (!expr || expr.type === "JSXEmptyExpression") continue;
+
+      // Whitespace-only literal (e.g. {" "}) renders as static text
+      if (expr.type === "Literal" && typeof expr.value === "string" && expr.value.trim() === "") {
+        append(expr.value);
+        continue;
+      }
+
+      const results: I18nKeyInfo[] = [];
+      findTCallInExpression(expr, code, results, state);
+      findTransInExpression(expr, code, results, constants);
+      if (results.length === 0) return null;
+      if (seenI18n) return null;
+      seenI18n = true;
+      continue;
+    }
+
+    // Fragments, spread children… — too complex to reason about
+    return null;
+  }
+
+  if (!seenI18n || (!prefix && !suffix)) return null;
+
+  return { prefix, suffix };
+}
+
 // Returns true if the element mixes i18n content with non-i18n text/expressions.
 // In that case, inline editing would incorrectly overwrite the translation with
 // the full rendered text (including static parts like "© 2026 Company.").
@@ -1111,6 +1328,10 @@ function findTCallsInChildren(jsxElement: JSXElement, code: string, state: Trans
 // Mixed patterns (flagged):
 //   "© John Doe." + <Trans>  — non-whitespace JSXText alongside i18n
 //   {year} + <Trans>          — text-producing Identifier/MemberExpression alongside i18n
+//   <span>*</span> + <Trans>  — static sibling element rendering its own text
+//
+// Flagged elements can still be recovered by detectI18nStaticAffixes() when the
+// static parts merely surround a single i18n node.
 function hasMixedNonI18nContent(
   jsxNode: JSXElement,
   code: string,
@@ -1120,6 +1341,11 @@ function hasMixedNonI18nContent(
   for (const child of jsxNode.children) {
     if (child.type === "JSXText") {
       if (((child as any).value as string).trim().length > 0) return true;
+    } else if (child.type === "JSXElement") {
+      // A sibling element that renders its own text (e.g. <span aria-hidden="true">*</span>)
+      // is not part of the translation — same hazard as raw JSXText.
+      if (detectTransComponent(child as JSXElement, code, constants)) continue;
+      if (hasVisibleTextContent(child as JSXElement)) return true;
     } else if (child.type === "JSXExpressionContainer") {
       const expr = (child as any).expression;
       if (!expr || expr.type === "JSXEmptyExpression") continue;
@@ -1153,6 +1379,19 @@ function hasMixedNonI18nContent(
 function findTCallInExpression(expr: any, code: string, results: I18nKeyInfo[], state: TransformState): void {
   if (!expr || !expr.type) return;
 
+  // A fragment renders all of its children at once — collect every key it holds
+  if (expr.type === "JSXFragment") {
+    for (const child of expr.children) {
+      if (child.type === "JSXExpressionContainer") {
+        const inner = (child as any).expression;
+        if (inner && inner.type !== "JSXEmptyExpression") {
+          findTCallInExpression(inner, code, results, state);
+        }
+      }
+    }
+    return;
+  }
+
   if (expr.type === "CallExpression") {
     const info = detectTCall(expr, code, state);
     if (info) {