@upstart.gg/vite-plugins 0.1.60 → 0.1.62

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", () => {