@upstart.gg/vite-plugins 0.1.29 → 0.1.30

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

@@ -78,7 +78,7 @@ describe("upstart-editor-vite-plugin", () => {
   });
 
   describe("Static Text Detection", () => {
-    test("should mark leaf elements with static text as non-editable", () => {
+    test("should mark leaf elements with static text as directly editable (direct mode)", () => {
       const code = `
         export default function App() {
           return <div>Hello World</div>;
@@ -87,10 +87,12 @@ describe("upstart-editor-vite-plugin", () => {
 
       const result = transform(code);
 
-      expect(result).toContain('data-upstart-editable-text="false"');
+      // Text-only leaf elements are editable directly in the TSX source
+      expect(result).toContain('data-upstart-editable-text="true"');
+      expect(result).toContain('data-upstart-editable-text-mode="direct"');
     });
 
-    test("should mark span with static text as non-editable", () => {
+    test("should mark span with static text as directly editable (direct mode)", () => {
       const code = `
         export default function App() {
           return <span>Click here</span>;
@@ -99,10 +101,11 @@ describe("upstart-editor-vite-plugin", () => {
 
       const result = transform(code);
 
-      expect(result).toContain('data-upstart-editable-text="false"');
+      expect(result).toContain('data-upstart-editable-text="true"');
+      expect(result).toContain('data-upstart-editable-text-mode="direct"');
     });
 
-    test("should mark PascalCase component with static text as non-editable AND track component", () => {
+    test("should mark PascalCase component with static text as directly editable AND track component", () => {
       const code = `
         export default function App() {
           return <Button>Submit</Button>;
@@ -111,12 +114,12 @@ describe("upstart-editor-vite-plugin", () => {
 
       const result = transform(code);
 
-      // Should have non-editable text AND component tracking
-      expect(result).toContain('data-upstart-editable-text="false"');
+      expect(result).toContain('data-upstart-editable-text="true"');
+      expect(result).toContain('data-upstart-editable-text-mode="direct"');
       expect(result).toContain('data-upstart-component="Button"');
     });
 
-    test("should NOT mark elements with nested elements (but mark the nested leaf)", () => {
+    test("should mark outer div with inline child as almost-leaf (rich-panel) and inner span as direct", () => {
       const code = `
         export default function App() {
           return <div><span>nested</span></div>;
@@ -125,10 +128,13 @@ describe("upstart-editor-vite-plugin", () => {
 
       const result = transform(code);
 
-      // The outer div should NOT be marked (no direct text content)
-      // The inner span SHOULD be marked as non-editable (text leaf without Trans)
-      const matches = result?.match(/data-upstart-editable-text="false"/g);
-      expect(matches?.length).toBe(1);
+      // <span> is an inline formatting tag → outer div is "almost-leaf" → rich-panel
+      expect(result).not.toContain('data-upstart-editable-text="false"');
+      // Both elements get "true": outer div (rich-panel) + inner span (direct)
+      const trueMatches = result?.match(/data-upstart-editable-text="true"/g);
+      expect(trueMatches?.length).toBe(2);
+      expect(result).toContain('data-upstart-editable-text-mode="rich-panel"');
+      expect(result).toContain('data-upstart-editable-text-mode="direct"');
     });
 
     test("should mark elements with dynamic text expressions as non-editable", () => {
@@ -141,12 +147,12 @@ describe("upstart-editor-vite-plugin", () => {
 
       const result = transform(code);
 
-      // Should have non-editable text (Identifier expression = text-producing)
+      // Identifier expression = text-producing but not statically editable → "false"
       expect(result).toContain('data-upstart-editable-text="false"');
       expect(result).toContain("data-upstart-hash");
     });
 
-    test("should mark elements with mixed content as non-editable", () => {
+    test("should mark mixed-content outer as almost-leaf (rich-panel) and text-only child as direct", () => {
       const code = `
         export default function App() {
           return <div>Text <b>bold</b></div>;
@@ -155,9 +161,13 @@ describe("upstart-editor-vite-plugin", () => {
 
       const result = transform(code);
 
-      // Both the outer div (has JSXText "Text ") and inner b (text leaf) get "false"
-      const matches = result?.match(/data-upstart-editable-text="false"/g);
-      expect(matches?.length).toBe(2);
+      // <div> has JSXText "Text " + <b> (inline tag) → almost-leaf → rich-panel
+      expect(result).not.toContain('data-upstart-editable-text="false"');
+      // Both outer div (rich-panel) + inner <b> (direct) get "true"
+      const trueMatches = result?.match(/data-upstart-editable-text="true"/g);
+      expect(trueMatches?.length).toBe(2);
+      expect(result).toContain('data-upstart-editable-text-mode="rich-panel"');
+      expect(result).toContain('data-upstart-editable-text-mode="direct"');
     });
 
     test("should NOT mark empty elements as editable", () => {
@@ -190,7 +200,7 @@ describe("upstart-editor-vite-plugin", () => {
       expect(result).toContain("data-upstart-hash");
     });
 
-    test("should handle multiple text leaf elements", () => {
+    test("should mark multiple text leaf elements as directly editable", () => {
       const code = `
         export default function App() {
           return (
@@ -204,9 +214,10 @@ describe("upstart-editor-vite-plugin", () => {
 
       const result = transform(code);
 
-      // Both h1 and p should be marked as non-editable
-      const matches = result?.match(/data-upstart-editable-text="false"/g);
-      expect(matches?.length).toBe(2);
+      // Both h1 and p are text leaves → direct mode
+      const trueMatches = result?.match(/data-upstart-editable-text="true"/g);
+      expect(trueMatches?.length).toBe(2);
+      expect(result).not.toContain('data-upstart-editable-text="false"');
     });
   });
 
@@ -283,7 +294,7 @@ describe("upstart-editor-vite-plugin", () => {
       expect(result).not.toContain("data-upstart-editable-text");
     });
 
-    test("Trans should take priority over non-editable text", () => {
+    test("should NOT be editable when Trans is mixed with a non-i18n variable", () => {
       const code = `
         import { Trans } from "react-i18next";
         export default function App() {
@@ -291,9 +302,10 @@ describe("upstart-editor-vite-plugin", () => {
         }
       `;
       const result = transform(code);
-      // Trans wins: should be "true", not "false"
-      expect(result).toContain('data-upstart-editable-text="true"');
-      expect(result).not.toContain('data-upstart-editable-text="false"');
+      // {prefix} is a text-producing Identifier alongside Trans → mixed → NOT editable
+      // Saving would incorrectly include the rendered prefix in the translation value
+      expect(result).not.toContain('data-upstart-editable-text="true"');
+      expect(result).not.toContain("data-upstart-i18n");
     });
   });
 
@@ -774,7 +786,7 @@ describe("upstart-editor-vite-plugin", () => {
       clearRegistry();
     });
 
-    test("should add data-upstart-id to text leaf elements", () => {
+    test("should add data-upstart-id to text leaf elements (direct mode)", () => {
       const code = `
         export default function App() {
           return <div>Hello World</div>;
@@ -782,12 +794,13 @@ describe("upstart-editor-vite-plugin", () => {
       `;
       const result = transform(code);
 
-      // Should have non-editable text AND an ID
-      expect(result).toContain('data-upstart-editable-text="false"');
+      // Text leaf elements are directly editable (direct mode) and get an ID
+      expect(result).toContain('data-upstart-editable-text="true"');
+      expect(result).toContain('data-upstart-editable-text-mode="direct"');
       expect(result).toMatch(/data-upstart-id="test\.tsx:\d+"/);
     });
 
-    test("should generate unique IDs for multiple text elements", () => {
+    test("should generate unique IDs for multiple text leaf elements", () => {
       const code = `
         export default function App() {
           return (
@@ -800,9 +813,10 @@ describe("upstart-editor-vite-plugin", () => {
       `;
       const result = transform(code);
 
-      // Should have two different IDs
+      // Each span is a text leaf → direct mode with a unique ID
+      // Note: the outer div is an "almost-leaf" (span is inline) → rich-panel, gets its own ID too
       const ids = result?.match(/data-upstart-id="test\.tsx:\d+"/g);
-      expect(ids?.length).toBe(2);
+      expect(ids?.length).toBeGreaterThanOrEqual(2);
       expect(ids?.[0]).not.toBe(ids?.[1]);
     });
 
@@ -1008,14 +1022,18 @@ describe("upstart-editor-vite-plugin", () => {
       const registry = getRegistry();
       const entries = Object.values(registry);
 
-      // Should have 2 text entries + 2 className entries = 4 total
+      // 2 text (spans) + 2 className (spans); the outer div is NOT almost-leaf because
+      // its <span> children have attributes (className), which disqualifies them as
+      // simple inline formatting wrappers.
       expect(entries.length).toBe(4);
 
       const textEntries = entries.filter((e) => e.type === "text");
       const classEntries = entries.filter((e) => e.type === "className");
+      const richTextEntries = entries.filter((e) => e.type === "rich-text");
 
       expect(textEntries.length).toBe(2);
       expect(classEntries.length).toBe(2);
+      expect(richTextEntries.length).toBe(0);
     });
   });
 
@@ -1271,7 +1289,7 @@ describe("upstart-editor-vite-plugin", () => {
       expect(result).toContain('data-upstart-editable-text="true"');
     });
 
-    test("should promote i18n attrs to parent even with mixed content", () => {
+    test("should NOT be editable when Trans is mixed with static text", () => {
       const code = `
         import { Trans } from "react-i18next";
         export default function App() {
@@ -1279,10 +1297,10 @@ describe("upstart-editor-vite-plugin", () => {
         }
       `;
       const result = transform(code);
-      // The parent div should have the i18n key (promoted from Trans child)
-      const matches = result?.match(/data-upstart-i18n="translation:key"/g);
-      expect(matches?.length).toBe(1);
-      expect(result).toContain('data-upstart-editable-text="true"');
+      // "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");
     });
 
     test("should promote <Trans> from inside && expression to parent", () => {
@@ -1346,6 +1364,90 @@ describe("upstart-editor-vite-plugin", () => {
       const result = transform(code);
       expect(result).toContain('data-upstart-i18n="translation:nested"');
     });
+
+    describe("Mixed i18n + non-i18n content detection", () => {
+      test("should NOT be editable when JSXText static content precedes Trans", () => {
+        const code = `
+          import { Trans } from "react-i18next";
+          export default function App() {
+            return (
+              <p>
+                © {new Date().getFullYear()} John Doe.{" "}
+                <Trans i18nKey="footer.rights" />
+              </p>
+            );
+          }
+        `;
+        const result = transform(code);
+        // "© ... John Doe." is non-whitespace JSXText alongside Trans
+        expect(result).not.toContain('data-upstart-editable-text="true"');
+        expect(result).not.toContain("data-upstart-i18n");
+      });
+
+      test("should NOT be editable when a text variable is alongside Trans", () => {
+        const code = `
+          import { Trans } from "react-i18next";
+          export default function App() {
+            return <p>{userName}: <Trans i18nKey="greeting" /></p>;
+          }
+        `;
+        const result = transform(code);
+        // {userName} is an Identifier (text-producing) alongside Trans
+        expect(result).not.toContain('data-upstart-editable-text="true"');
+        expect(result).not.toContain("data-upstart-i18n");
+      });
+
+      test("should NOT be editable when a member expression is alongside Trans", () => {
+        const code = `
+          import { Trans } from "react-i18next";
+          export default function App() {
+            return <span>{user.name} — <Trans i18nKey="role" /></span>;
+          }
+        `;
+        const result = transform(code);
+        // {user.name} is a MemberExpression (text-producing) alongside Trans
+        expect(result).not.toContain('data-upstart-editable-text="true"');
+      });
+
+      test("should still be editable when Trans is inside && guard (boolean, not text)", () => {
+        const code = `
+          import { Trans } from "react-i18next";
+          export default function App() {
+            return <p>{showBanner && <Trans i18nKey="banner.text" />}</p>;
+          }
+        `;
+        const result = transform(code);
+        // showBanner is a boolean guard, not text content — still pure i18n
+        expect(result).toContain('data-upstart-editable-text="true"');
+        expect(result).toContain('data-upstart-i18n="translation:banner.text"');
+      });
+
+      test("should still be editable when Trans is in a ternary between two i18n values", () => {
+        const code = `
+          import { Trans } from "react-i18next";
+          export default function App() {
+            return <p>{isAdmin ? <Trans i18nKey="role.admin" /> : <Trans i18nKey="role.user" />}</p>;
+          }
+        `;
+        const result = transform(code);
+        // Both branches are i18n — no non-i18n text produced
+        expect(result).toContain('data-upstart-editable-text="true"');
+        expect(result).toContain('data-upstart-i18n="translation:role.admin,translation:role.user"');
+      });
+
+      test("should still be editable when only whitespace {' '} separates Trans from nothing", () => {
+        const code = `
+          import { Trans } from "react-i18next";
+          export default function App() {
+            return <span>{" "}<Trans i18nKey="label" /></span>;
+          }
+        `;
+        const result = transform(code);
+        // {" "} is whitespace-only — harmless
+        expect(result).toContain('data-upstart-editable-text="true"');
+        expect(result).toContain('data-upstart-i18n="translation:label"');
+      });
+    });
   });
 
   describe("useTranslation t() Function Detection", () => {
@@ -1503,4 +1605,163 @@ describe("upstart-editor-vite-plugin", () => {
       expect(result).toContain('data-upstart-i18n="app:greeting"');
     });
   });
+
+  describe("Trans values prop — template variable detection", () => {
+    test("should emit data-i18n-values for shorthand values prop (single key)", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          const year = 2026;
+          return <p><Trans i18nKey="footer.copyright" values={{ year }} /></p>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain('data-i18n-values="year"');
+      expect(result).toContain('data-upstart-i18n="translation:footer.copyright"');
+      expect(result).toContain('data-upstart-editable-text="true"');
+    });
+
+    test("should emit data-i18n-values for explicit key-value pair", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          return <span><Trans i18nKey="greeting" values={{ name: userName }} /></span>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain('data-i18n-values="name"');
+    });
+
+    test("should emit data-i18n-values for multiple keys (shorthand)", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          const year = 2026;
+          const month = "January";
+          return <p><Trans i18nKey="date.label" values={{ year, month }} /></p>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain('data-i18n-values="year,month"');
+    });
+
+    test("should emit data-i18n-values for multiple explicit key-value pairs", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          return <p><Trans i18nKey="user.info" values={{ firstName: user.first, lastName: user.last }} /></p>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain('data-i18n-values="firstName,lastName"');
+    });
+
+    test("should NOT emit data-i18n-values when values prop is absent", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          return <h3><Trans i18nKey="features.title" /></h3>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).not.toContain("data-i18n-values");
+    });
+
+    test("should NOT emit data-i18n-values when values prop is empty object", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          return <p><Trans i18nKey="simple" values={{}} /></p>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).not.toContain("data-i18n-values");
+    });
+
+    test("should NOT crash and NOT emit data-i18n-values when values uses spread", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          return <p><Trans i18nKey="msg" values={{ ...extraVars }} /></p>;
+        }
+      `;
+      expect(() => transform(code)).not.toThrow();
+      const result = transform(code);
+      expect(result).not.toContain("data-i18n-values");
+    });
+
+    test("should emit data-i18n-values with custom namespace", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          const count = 5;
+          return <span><Trans i18nKey="items.count" ns="dashboard" values={{ count }} /></span>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain('data-i18n-values="count"');
+      expect(result).toContain('data-upstart-i18n="dashboard:items.count"');
+    });
+
+    test("should deduplicate value keys across multiple Trans components in same parent", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          const year = 2026;
+          return (
+            <div>
+              {flag
+                ? <Trans i18nKey="a" values={{ year }} />
+                : <Trans i18nKey="b" values={{ year }} />}
+            </div>
+          );
+        }
+      `;
+      const result = transform(code);
+      // "year" appears in both Trans but should only be emitted once
+      const matches = result?.match(/data-i18n-values="year"/g);
+      expect(matches?.length).toBe(1);
+    });
+
+    test("should merge value keys from multiple Trans with different keys", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          const year = 2026;
+          const name = "Alice";
+          return (
+            <div>
+              {flag
+                ? <Trans i18nKey="a" values={{ year }} />
+                : <Trans i18nKey="b" values={{ name }} />}
+            </div>
+          );
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain("data-i18n-values=");
+      const valuesAttr = result?.match(/data-i18n-values="([^"]+)"/)?.[1];
+      const keys = valuesAttr?.split(",") ?? [];
+      expect(keys).toContain("year");
+      expect(keys).toContain("name");
+    });
+
+    test("data-i18n-values should be on parent element, not on Trans", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          const year = 2026;
+          return <footer><Trans i18nKey="copyright" values={{ year }} /></footer>;
+        }
+      `;
+      const result = transform(code);
+      // data-i18n-values must appear inside the <footer ...> opening tag, not inside <Trans>
+      // Rough check: values attr and i18n attr should be on the same tag
+      expect(result).toContain('data-i18n-values="year"');
+      expect(result).toContain('data-upstart-i18n="translation:copyright"');
+      // Trans should have no injected attrs (no hash)
+      const hashMatches = result?.match(/data-upstart-hash="[a-f0-9]+"/g);
+      expect(hashMatches?.length).toBe(1);
+    });
+  });
 });

package/src/upstart-editor-api.ts

@@ -17,6 +17,14 @@ export const payloadEditText = z.object({
 
 export type PayloadEditText = z.infer<typeof payloadEditText>;
 
+export const payloadEditTextDirect = z.object({
+  action: z.literal("editTextDirect"),
+  id: z.string().min(1),
+  content: z.string(),
+});
+
+export type PayloadEditTextDirect = z.infer<typeof payloadEditTextDirect>;
+
 export const payloadEditClassName = z.object({
   action: z.literal("editClassName"),
   id: z.string().min(1),
@@ -133,6 +141,36 @@ export class UpstartEditorAPI {
     return { success: true, filePath };
   }
 
+  /**
+   * Edit a plain-text or rich-text JSX node directly in the source TSX file.
+   * For rich-text entries, `content` should be the inner JSX/HTML of the element's children.
+   */
+  async editTextDirect(params: PayloadEditTextDirect): Promise<EditResult> {
+    const parsed = payloadEditTextDirect.safeParse(params);
+    if (!parsed.success) {
+      return { success: false, error: `Invalid payload: ${parsed.error.message}` };
+    }
+    const { id, content } = parsed.data;
+    if (!this.registry) {
+      try {
+        await this.loadRegistry();
+      } catch (err) {
+        return { success: false, error: `Failed to load registry: ${err}` };
+      }
+    }
+    const entry = this.registry!.elements[id];
+    if (!entry) {
+      return { success: false, error: `Element ${id} not found in registry` };
+    }
+    if (entry.type !== "text" && entry.type !== "rich-text" && entry.type !== "mixed-text") {
+      return { success: false, error: `Element ${id} is not a text element (type: ${entry.type})` };
+    }
+    if (entry.type === "mixed-text") {
+      return this.applyMixedTextEdit(id, entry, content);
+    }
+    return this.applyEdit(id, entry, content);
+  }
+
   /**
    * Edit the className of an element
    */
@@ -222,6 +260,39 @@ export class UpstartEditorAPI {
     }
   }
 
+  /**
+   * Reconstruct JSX children from a user-edited template and the original expression segments,
+   * then write the result back to the TSX source file.
+   *
+   * `template` uses `{{N}}` placeholders for expressions, e.g.:
+   *   "© {{0}} Alex's Kitchen. All rights reserved."
+   * The server replaces each placeholder with the original expression source from the registry.
+   */
+  private async applyMixedTextEdit(id: string, entry: EditableEntry, template: string): Promise<EditResult> {
+    const exprSegments = (entry.segments ?? []).filter((s) => s.type === "expr");
+
+    // Split template by {{N}} placeholders — odd indices are expression indices
+    const parts = template.split(/\{\{(\d+)\}\}/);
+
+    // Reconstruct inner JSX: text parts interleaved with original expression sources
+    let inner = "";
+    for (let i = 0; i < parts.length; i++) {
+      if (i % 2 === 0) {
+        inner += parts[i];
+      } else {
+        const exprSeg = exprSegments[parseInt(parts[i])];
+        inner += exprSeg ? exprSeg.raw : `{{${parts[i]}}}`;
+      }
+    }
+
+    // Preserve leading/trailing JSX whitespace (indentation) from the original source
+    const leadingWS = entry.originalContent.match(/^(\s*)/)?.[1] ?? "";
+    const trailingWS = entry.originalContent.match(/(\s*)$/)?.[1] ?? "";
+    const newContent = leadingWS + inner + trailingWS;
+
+    return this.applyEdit(id, entry, newContent);
+  }
+
   /**
    * Get element info by ID
    */