@upstart.gg/vite-plugins 0.0.39 → 0.0.41

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

@@ -66,21 +66,21 @@ describe("upstart-editor-vite-plugin", () => {
     test("should track record IDs for datasource bindings", () => {
       const code = `
         export default function App() {
-          const user = { id: 1, name: "Alice" };
+          const user = { $id: 1, name: "Alice" };
           return <MyComponent name={user.name} />;
         }
       `;
 
       const result = transform(code);
 
-      expect(result).toContain("data-upstart-record-id-name={user.id}");
+      expect(result).toContain("data-upstart-record-id-name={user.$id}");
     });
 
     test("should handle conditional prop expressions", () => {
       const code = `
         export default function App() {
           const isActive = true;
-          const user = { name: "Alice" };
+          const user = { $id: 1, name: "Alice" };
           return <MyComponent name={isActive ? user.name : "Guest"} />;
         }
       `;
@@ -93,7 +93,7 @@ describe("upstart-editor-vite-plugin", () => {
     test("should handle logical prop expressions", () => {
       const code = `
         export default function App() {
-          const user = { name: "Alice" };
+          const user = { $id: 1, name: "Alice" };
           return <MyComponent name={user && user.name} />;
         }
       `;
@@ -105,7 +105,7 @@ describe("upstart-editor-vite-plugin", () => {
   });
 
   describe("Static Text Detection", () => {
-    test("should mark leaf elements with static text as editable", () => {
+    test("should mark leaf elements with static text as non-editable", () => {
       const code = `
         export default function App() {
           return <div>Hello World</div>;
@@ -114,10 +114,10 @@ describe("upstart-editor-vite-plugin", () => {
 
       const result = transform(code);
 
-      expect(result).toContain('data-upstart-editable-text="true"');
+      expect(result).toContain('data-upstart-editable-text="false"');
     });
 
-    test("should mark span with static text as editable", () => {
+    test("should mark span with static text as non-editable", () => {
       const code = `
         export default function App() {
           return <span>Click here</span>;
@@ -126,10 +126,10 @@ describe("upstart-editor-vite-plugin", () => {
 
       const result = transform(code);
 
-      expect(result).toContain('data-upstart-editable-text="true"');
+      expect(result).toContain('data-upstart-editable-text="false"');
     });
 
-    test("should mark PascalCase component with static text as editable AND track component", () => {
+    test("should mark PascalCase component with static text as non-editable AND track component", () => {
       const code = `
         export default function App() {
           return <Button>Submit</Button>;
@@ -138,12 +138,12 @@ describe("upstart-editor-vite-plugin", () => {
 
       const result = transform(code);
 
-      // Should have both editable text AND component tracking
-      expect(result).toContain('data-upstart-editable-text="true"');
+      // Should have non-editable text AND component tracking
+      expect(result).toContain('data-upstart-editable-text="false"');
       expect(result).toContain('data-upstart-component="Button"');
     });
 
-    test("should NOT mark elements with nested elements", () => {
+    test("should NOT mark elements with nested elements (but mark the nested leaf)", () => {
       const code = `
         export default function App() {
           return <div><span>nested</span></div>;
@@ -152,15 +152,13 @@ describe("upstart-editor-vite-plugin", () => {
 
       const result = transform(code);
 
-      // The outer div should NOT be marked (has nested element)
-      // But the inner span SHOULD be marked (it's a leaf with text)
-      expect(result).toContain('data-upstart-editable-text="true"');
-      // Count occurrences - should only be 1 (for the span)
-      const matches = result?.match(/data-upstart-editable-text="true"/g);
+      // 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);
     });
 
-    test("should NOT mark elements with dynamic expressions", () => {
+    test("should mark elements with dynamic text expressions as non-editable", () => {
       const code = `
         export default function App() {
           const name = "World";
@@ -170,13 +168,12 @@ describe("upstart-editor-vite-plugin", () => {
 
       const result = transform(code);
 
-      // Should NOT have editable-text (has dynamic expression)
-      // But SHOULD have hash (all elements get hashes)
-      expect(result).not.toContain('data-upstart-editable-text');
-      expect(result).toContain('data-upstart-hash');
+      // Should have non-editable text (Identifier expression = text-producing)
+      expect(result).toContain('data-upstart-editable-text="false"');
+      expect(result).toContain("data-upstart-hash");
     });
 
-    test("should NOT mark elements with mixed content", () => {
+    test("should mark elements with mixed content as non-editable", () => {
       const code = `
         export default function App() {
           return <div>Text <b>bold</b></div>;
@@ -185,10 +182,9 @@ describe("upstart-editor-vite-plugin", () => {
 
       const result = transform(code);
 
-      // The outer div should NOT be marked (has nested element)
-      // But the inner b SHOULD be marked
-      const matches = result?.match(/data-upstart-editable-text="true"/g);
-      expect(matches?.length).toBe(1);
+      // 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);
     });
 
     test("should NOT mark empty elements as editable", () => {
@@ -202,8 +198,8 @@ describe("upstart-editor-vite-plugin", () => {
 
       // Should NOT have editable-text (empty)
       // But SHOULD have hash
-      expect(result).not.toContain('data-upstart-editable-text');
-      expect(result).toContain('data-upstart-hash');
+      expect(result).not.toContain("data-upstart-editable-text");
+      expect(result).toContain("data-upstart-hash");
     });
 
     test("should NOT mark whitespace-only elements as editable", () => {
@@ -217,8 +213,8 @@ describe("upstart-editor-vite-plugin", () => {
 
       // Should NOT have editable-text (whitespace only)
       // But SHOULD have hash
-      expect(result).not.toContain('data-upstart-editable-text');
-      expect(result).toContain('data-upstart-hash');
+      expect(result).not.toContain("data-upstart-editable-text");
+      expect(result).toContain("data-upstart-hash");
     });
 
     test("should handle multiple text leaf elements", () => {
@@ -235,12 +231,99 @@ describe("upstart-editor-vite-plugin", () => {
 
       const result = transform(code);
 
-      // Both h1 and p should be marked
-      const matches = result?.match(/data-upstart-editable-text="true"/g);
+      // 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);
     });
   });
 
+  describe("Non-Editable Text Detection (expressions and edge cases)", () => {
+    test("should mark element with MemberExpression as non-editable", () => {
+      const code = `
+        export default function App() {
+          return <span>{user.name}</span>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain('data-upstart-editable-text="false"');
+    });
+
+    test("should mark element with template literal as non-editable", () => {
+      const code = `
+        export default function App() {
+          const name = "World";
+          return <div>{\`Hello \${name}\`}</div>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain('data-upstart-editable-text="false"');
+    });
+
+    test("should mark element with string literal expression as non-editable", () => {
+      const code = `
+        export default function App() {
+          return <div>{"Hello World"}</div>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain('data-upstart-editable-text="false"');
+    });
+
+    test("should NOT mark element containing only a function call expression", () => {
+      const code = `
+        export default function App() {
+          return <div>{formatDate(date)}</div>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).not.toContain("data-upstart-editable-text");
+    });
+
+    test("should NOT mark element containing only conditional JSX", () => {
+      const code = `
+        export default function App() {
+          return <div>{show ? <A /> : <B />}</div>;
+        }
+      `;
+      const result = transform(code);
+      // Outer div should not get editable-text (ConditionalExpression is not text-producing)
+      expect(result).not.toContain('data-upstart-editable-text="false"');
+    });
+
+    test("should NOT mark element containing only logical expression with JSX", () => {
+      const code = `
+        export default function App() {
+          return <div>{show && <Child />}</div>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).not.toContain('data-upstart-editable-text="false"');
+    });
+
+    test("should NOT mark self-closing elements", () => {
+      const code = `
+        export default function App() {
+          return <img src="photo.jpg" />;
+        }
+      `;
+      const result = transform(code);
+      expect(result).not.toContain("data-upstart-editable-text");
+    });
+
+    test("Trans should take priority over non-editable text", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          return <div>{prefix}<Trans i18nKey="greeting" /></div>;
+        }
+      `;
+      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"');
+    });
+  });
+
   describe("Content Hash", () => {
     test("should add data-upstart-hash to elements", () => {
       const code = `
@@ -428,6 +511,27 @@ describe("upstart-editor-vite-plugin", () => {
       expect(result).toContain('data-upstart-loop-array="items"');
     });
 
+    test("should produce unique hashes for elements inside .map() with index", () => {
+      const code = `
+        export default function App() {
+          const items = ["a", "b"];
+          return (
+            <div>
+              {items.map((item, index) => (
+                <div key={index}>
+                  <span>{item}</span>
+                </div>
+              ))}
+            </div>
+          );
+        }
+      `;
+      const result = transform(code);
+      // Elements inside the loop should have a dynamic hash with the index
+      expect(result).toContain("data-upstart-hash={`");
+      expect(result).toContain("${index}`}");
+    });
+
     test("should handle complex array expressions", () => {
       const code = `
         export default function App() {
@@ -484,7 +588,7 @@ describe("upstart-editor-vite-plugin", () => {
       const result = transform(code);
 
       // All elements should have hashes
-      expect(result).toContain('data-upstart-hash');
+      expect(result).toContain("data-upstart-hash");
       // Self-closing elements should not have editable-text (no text content)
       const matches = result?.match(/data-upstart-editable-text/g);
       expect(matches).toBeNull();
@@ -556,8 +660,8 @@ describe("upstart-editor-vite-plugin", () => {
       const result = transform(code);
 
       // Should have hash but no editable-text (comment is not editable text)
-      expect(result).toContain('data-upstart-hash');
-      expect(result).not.toContain('data-upstart-editable-text');
+      expect(result).toContain("data-upstart-hash");
+      expect(result).not.toContain("data-upstart-editable-text");
     });
 
     test("should handle logical expression containing JSX elements", () => {
@@ -649,7 +753,6 @@ describe("upstart-editor-vite-plugin", () => {
       expect(result).toContain('data-upstart-component="ComponentA"');
       expect(result).toContain('data-upstart-component="ComponentB"');
     });
-
   });
 
   describe("Element ID Tracking", () => {
@@ -657,7 +760,7 @@ describe("upstart-editor-vite-plugin", () => {
       clearRegistry();
     });
 
-    test("should add data-upstart-id to text-editable elements", () => {
+    test("should add data-upstart-id to text leaf elements", () => {
       const code = `
         export default function App() {
           return <div>Hello World</div>;
@@ -665,8 +768,8 @@ describe("upstart-editor-vite-plugin", () => {
       `;
       const result = transform(code);
 
-      // Should have both editable-text AND an ID
-      expect(result).toContain('data-upstart-editable-text="true"');
+      // Should have non-editable text AND an ID
+      expect(result).toContain('data-upstart-editable-text="false"');
       expect(result).toMatch(/data-upstart-id="test\.tsx:\d+"/);
     });
 
@@ -716,7 +819,7 @@ describe("upstart-editor-vite-plugin", () => {
       const result = transform(code);
 
       // Empty element should NOT have an ID
-      expect(result).not.toContain('data-upstart-id');
+      expect(result).not.toContain("data-upstart-id");
     });
   });
 
@@ -745,7 +848,7 @@ describe("upstart-editor-vite-plugin", () => {
       `;
       const result = transform(code);
 
-      expect(result).not.toContain('data-upstart-classname-id');
+      expect(result).not.toContain("data-upstart-classname-id");
     });
 
     test("should NOT add classname-id for template literal className", () => {
@@ -756,7 +859,7 @@ describe("upstart-editor-vite-plugin", () => {
       `;
       const result = transform(code);
 
-      expect(result).not.toContain('data-upstart-classname-id');
+      expect(result).not.toContain("data-upstart-classname-id");
     });
 
     test("should add both text-id and classname-id to same element", () => {
@@ -805,7 +908,7 @@ describe("upstart-editor-vite-plugin", () => {
       const registry = getRegistry();
 
       const entries = Object.values(registry);
-      const textEntry = entries.find(e => e.type === "text");
+      const textEntry = entries.find((e) => e.type === "text");
 
       expect(textEntry).toBeDefined();
       expect(textEntry?.originalContent).toBe("Hello World");
@@ -823,7 +926,7 @@ describe("upstart-editor-vite-plugin", () => {
       const registry = getRegistry();
 
       const entries = Object.values(registry);
-      const classEntry = entries.find(e => e.type === "className");
+      const classEntry = entries.find((e) => e.type === "className");
 
       expect(classEntry).toBeDefined();
       expect(classEntry?.originalContent).toBe("px-4 py-2");
@@ -835,7 +938,7 @@ describe("upstart-editor-vite-plugin", () => {
       transform(code);
       const registry = getRegistry();
 
-      const entry = Object.values(registry).find(e => e.type === "text");
+      const entry = Object.values(registry).find((e) => e.type === "text");
       const extractedText = code.slice(entry!.startOffset, entry!.endOffset);
 
       expect(extractedText).toBe("Hello");
@@ -847,7 +950,7 @@ describe("upstart-editor-vite-plugin", () => {
       transform(code);
       const registry = getRegistry();
 
-      const entry = Object.values(registry).find(e => e.type === "className");
+      const entry = Object.values(registry).find((e) => e.type === "className");
       const extractedClass = code.slice(entry!.startOffset, entry!.endOffset);
 
       expect(extractedClass).toBe("my-class");
@@ -859,7 +962,7 @@ describe("upstart-editor-vite-plugin", () => {
       transform(code);
       const registry = getRegistry();
 
-      const entry = Object.values(registry).find(e => e.type === "text");
+      const entry = Object.values(registry).find((e) => e.type === "text");
       expect(entry?.context.parentTag).toBe("span");
     });
 
@@ -894,8 +997,8 @@ describe("upstart-editor-vite-plugin", () => {
       // Should have 2 text entries + 2 className entries = 4 total
       expect(entries.length).toBe(4);
 
-      const textEntries = entries.filter(e => e.type === "text");
-      const classEntries = entries.filter(e => e.type === "className");
+      const textEntries = entries.filter((e) => e.type === "text");
+      const classEntries = entries.filter((e) => e.type === "className");
 
       expect(textEntries.length).toBe(2);
       expect(classEntries.length).toBe(2);
@@ -956,7 +1059,7 @@ describe("upstart-editor-vite-plugin", () => {
   });
 
   describe("i18n <Trans> Component Detection", () => {
-    test("should detect <Trans> component with default namespace", () => {
+    test("should promote <Trans> i18n attributes to parent element with default namespace", () => {
       const code = `
         import { Trans } from "react-i18next";
         export default function App() {
@@ -964,11 +1067,12 @@ describe("upstart-editor-vite-plugin", () => {
         }
       `;
       const result = transform(code);
-      expect(result).toContain('data-i18n-key="translation:features.title"');
+      // i18n attributes should be on the parent <h3>, not on <Trans>
+      expect(result).toContain('data-upstart-i18n="translation:features.title"');
       expect(result).toContain('data-upstart-editable-text="true"');
     });
 
-    test("should detect <Trans> component with custom namespace", () => {
+    test("should promote <Trans> with custom namespace to parent", () => {
       const code = `
         import { Trans } from "react-i18next";
         export default function App() {
@@ -976,11 +1080,11 @@ describe("upstart-editor-vite-plugin", () => {
         }
       `;
       const result = transform(code);
-      expect(result).toContain('data-i18n-key="dashboard:welcome.message"');
+      expect(result).toContain('data-upstart-i18n="dashboard:welcome.message"');
       expect(result).toContain('data-upstart-editable-text="true"');
     });
 
-    test("should detect standalone <Trans> component", () => {
+    test("should NOT add i18n attributes to standalone <Trans> (no parent element)", () => {
       const code = `
         import { Trans } from "react-i18next";
         export default function App() {
@@ -988,11 +1092,13 @@ describe("upstart-editor-vite-plugin", () => {
         }
       `;
       const result = transform(code);
-      expect(result).toContain('data-i18n-key="translation:standalone.key"');
-      expect(result).toContain('data-upstart-editable-text="true"');
+      // No parent element to promote to, so no modifications
+      // transform returns null when nothing was modified
+      expect(result === null || !result.includes("data-upstart-i18n")).toBe(true);
+      expect(result === null || !result.includes("data-upstart-editable-text")).toBe(true);
     });
 
-    test("should detect multiple <Trans> components in one file", () => {
+    test("should promote multiple <Trans> components to their respective parents", () => {
       const code = `
         import { Trans } from "react-i18next";
         export default function App() {
@@ -1005,13 +1111,13 @@ describe("upstart-editor-vite-plugin", () => {
         }
       `;
       const result = transform(code);
-      expect(result).toContain('data-i18n-key="translation:title"');
-      expect(result).toContain('data-i18n-key="translation:description"');
+      expect(result).toContain('data-upstart-i18n="translation:title"');
+      expect(result).toContain('data-upstart-i18n="translation:description"');
       const editableMatches = result?.match(/data-upstart-editable-text="true"/g);
       expect(editableMatches?.length).toBe(2);
     });
 
-    test("should detect <Trans> with values prop", () => {
+    test("should promote <Trans> with values prop to parent", () => {
       const code = `
         import { Trans } from "react-i18next";
         export default function App() {
@@ -1020,10 +1126,10 @@ describe("upstart-editor-vite-plugin", () => {
         }
       `;
       const result = transform(code);
-      expect(result).toContain('data-i18n-key="translation:greeting"');
+      expect(result).toContain('data-upstart-i18n="translation:greeting"');
     });
 
-    test("should detect <Trans> with components prop", () => {
+    test("should promote <Trans> with components prop to parent", () => {
       const code = `
         import { Trans } from "react-i18next";
         export default function App() {
@@ -1038,21 +1144,21 @@ describe("upstart-editor-vite-plugin", () => {
         }
       `;
       const result = transform(code);
-      expect(result).toContain('data-i18n-key="translation:terms"');
+      expect(result).toContain('data-upstart-i18n="translation:terms"');
     });
 
     test("should NOT detect <Trans> without i18nKey prop", () => {
       const code = `
         import { Trans } from "react-i18next";
         export default function App() {
-          return <Trans>Static text</Trans>;
+          return <p><Trans>Static text</Trans></p>;
         }
       `;
       const result = transform(code);
-      expect(result).not.toContain('data-i18n-key');
+      expect(result).not.toContain("data-upstart-i18n");
     });
 
-    test("should still add hash to <Trans> elements", () => {
+    test("should NOT add hash or any attributes to <Trans> elements", () => {
       const code = `
         import { Trans } from "react-i18next";
         export default function App() {
@@ -1060,11 +1166,15 @@ describe("upstart-editor-vite-plugin", () => {
         }
       `;
       const result = transform(code);
-      expect(result).toMatch(/data-upstart-hash="[a-f0-9]+"/);
-      expect(result).toContain('data-i18n-key="translation:title"');
+      // Only 1 hash (for h1), <Trans> should have no injected attributes
+      const hashMatches = result?.match(/data-upstart-hash="[a-f0-9]+"/g);
+      expect(hashMatches?.length).toBe(1);
+      expect(result).toContain('data-upstart-i18n="translation:title"');
+      // No component tracking for Trans
+      expect(result).not.toContain('data-upstart-component="Trans"');
     });
 
-    test("should handle PascalCase component with <Trans> child", () => {
+    test("should promote i18n attrs to PascalCase component parent", () => {
       const code = `
         import { Trans } from "react-i18next";
         export default function App() {
@@ -1072,7 +1182,7 @@ describe("upstart-editor-vite-plugin", () => {
         }
       `;
       const result = transform(code);
-      expect(result).toContain('data-i18n-key="ui:submit"');
+      expect(result).toContain('data-upstart-i18n="ui:submit"');
       expect(result).toContain('data-upstart-editable-text="true"');
       expect(result).toContain('data-upstart-component="Button"');
     });
@@ -1094,11 +1204,60 @@ describe("upstart-editor-vite-plugin", () => {
         }
       `;
       const result = transform(code);
-      expect(result).toContain('data-i18n-key="translation:item.label"');
+      // i18n attrs promoted to <span>, loop context on <Card>
+      expect(result).toContain('data-upstart-i18n="translation:item.label"');
       expect(result).toContain('data-upstart-loop-item="item"');
     });
 
-    test("should NOT detect parent element with mixed content (<Trans> + text)", () => {
+    test("should detect <Trans> with dynamic expression i18nKey", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          const labelKey = "features.title";
+          return <h3><Trans i18nKey={labelKey} /></h3>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain('data-upstart-i18n="translation:features.title"');
+      expect(result).toContain('data-upstart-editable-text="true"');
+    });
+
+    test("should detect <Trans> with dynamic expression i18nKey inside .map() loop", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          const stats = [{ labelKey: "stat.users" }];
+          return (
+            <div>
+              {stats.map((stat) => (
+                <Card key={stat.labelKey}>
+                  <span><Trans i18nKey={stat.labelKey} /></span>
+                </Card>
+              ))}
+            </div>
+          );
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain("data-upstart-i18n={`translation:${stat.labelKey}`}");
+      expect(result).toContain('data-upstart-editable-text="true"');
+      expect(result).toContain('data-upstart-loop-item="stat"');
+    });
+
+    test("should detect <Trans> with dynamic ns prop", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          const ns = "dashboard";
+          return <p><Trans i18nKey="welcome" ns={ns} /></p>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain('data-upstart-i18n="dashboard:welcome"');
+      expect(result).toContain('data-upstart-editable-text="true"');
+    });
+
+    test("should promote i18n attrs to parent even with mixed content", () => {
       const code = `
         import { Trans } from "react-i18next";
         export default function App() {
@@ -1106,84 +1265,228 @@ describe("upstart-editor-vite-plugin", () => {
         }
       `;
       const result = transform(code);
-      // The div should not have data-i18n-key (mixed content)
-      // But the Trans itself should have it
-      const matches = result?.match(/data-i18n-key="translation:key"/g);
-      expect(matches?.length).toBe(1); // Only on Trans, not on parent div
+      // 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"');
+    });
+
+    test("should promote <Trans> from inside && expression to parent", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          return <p>{showWelcome && <Trans i18nKey="welcome" />}</p>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain('data-upstart-i18n="translation:welcome"');
+      expect(result).toContain('data-upstart-editable-text="true"');
+    });
+
+    test("should promote <Trans> from inside ternary expression to parent", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          return <div>{isLoggedIn ? <Trans i18nKey="welcome" ns="app" /> : <Trans i18nKey="login" ns="app" />}</div>;
+        }
+      `;
+      const result = transform(code);
+      // Both keys should be comma-separated on the parent
+      expect(result).toContain('data-upstart-i18n="app:welcome,app:login"');
+      expect(result).toContain('data-upstart-editable-text="true"');
+    });
+
+    test("should preserve parent hash unchanged when promoting Trans attrs", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          return <h1><Trans i18nKey="title" /></h1>;
+        }
+      `;
+      const result1 = transform(code);
+      const result2 = transform(code);
+      const hash1 = result1?.match(/data-upstart-hash="([a-f0-9]+)"/)?.[1];
+      const hash2 = result2?.match(/data-upstart-hash="([a-f0-9]+)"/)?.[1];
+      expect(hash1).toBe(hash2);
+      expect(hash1).toBeTruthy();
+    });
+
+    test("should skip <Trans> without i18nKey even in child scan", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          return <p><Trans>Static text</Trans></p>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).not.toContain("data-upstart-i18n");
+    });
+
+    test("should handle <Trans> inside nested logical expressions", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          return <p>{a && b && <Trans i18nKey="nested" />}</p>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain('data-upstart-i18n="translation:nested"');
     });
   });
 
-  describe("Forbidden useTranslation Enforcement", () => {
-    test("should throw error when destructuring t from useTranslation", () => {
+  describe("useTranslation t() Function Detection", () => {
+    test("should detect t() with default namespace", () => {
       const code = `
         import { useTranslation } from "react-i18next";
         export default function App() {
           const { t } = useTranslation();
-          return <div>Hello</div>;
+          return <h3>{t("features.title")}</h3>;
         }
       `;
-      expect(() => transform(code)).toThrow(/useTranslation hook is forbidden/);
+      const result = transform(code);
+      expect(result).toContain('data-upstart-i18n="translation:features.title"');
+      expect(result).toContain('data-upstart-editable-text="true"');
     });
 
-    test("should throw error when destructuring t with alias", () => {
+    test("should detect t() with custom namespace", () => {
       const code = `
         import { useTranslation } from "react-i18next";
         export default function App() {
-          const { t: translate } = useTranslation();
-          return <div>Hello</div>;
+          const { t } = useTranslation("dashboard");
+          return <p>{t("welcome.message")}</p>;
         }
       `;
-      expect(() => transform(code)).toThrow(/useTranslation hook is forbidden/);
+      const result = transform(code);
+      expect(result).toContain('data-upstart-i18n="dashboard:welcome.message"');
     });
 
-    test("should throw error when destructuring both t and i18n", () => {
+    test("should detect t() with array namespace (uses first)", () => {
       const code = `
         import { useTranslation } from "react-i18next";
         export default function App() {
-          const { t, i18n } = useTranslation();
-          return <div>Hello</div>;
+          const { t } = useTranslation(["dashboard", "common"]);
+          return <p>{t("welcome")}</p>;
         }
       `;
-      expect(() => transform(code)).toThrow(/useTranslation hook is forbidden/);
+      const result = transform(code);
+      expect(result).toContain('data-upstart-i18n="dashboard:welcome"');
     });
 
-    test("should NOT throw when only destructuring i18n (allowed for language switching)", () => {
+    test("should detect aliased t function", () => {
       const code = `
         import { useTranslation } from "react-i18next";
         export default function App() {
-          const { i18n } = useTranslation();
-          return (
-            <button onClick={() => i18n.changeLanguage("fr")}>
-              Switch to French
-            </button>
-          );
+          const { t: translate } = useTranslation("ui");
+          return <button>{translate("submit")}</button>;
         }
       `;
-      expect(() => transform(code)).not.toThrow();
+      const result = transform(code);
+      expect(result).toContain('data-upstart-i18n="ui:submit"');
+    });
+
+    test("should detect t() in conditional expression", () => {
+      const code = `
+        import { useTranslation } from "react-i18next";
+        export default function App({ isActive }) {
+          const { t } = useTranslation();
+          return <span>{isActive ? t("active") : t("inactive")}</span>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain('data-upstart-i18n="translation:active,translation:inactive"');
+    });
+
+    test("should detect t() in logical expression", () => {
+      const code = `
+        import { useTranslation } from "react-i18next";
+        export default function App({ showWelcome }) {
+          const { t } = useTranslation();
+          return <p>{showWelcome && t("welcome")}</p>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain('data-upstart-i18n="translation:welcome"');
     });
 
-    test("should include file path in error message", () => {
+    test("should handle dynamic key with template expression", () => {
+      const code = `
+        import { useTranslation } from "react-i18next";
+        export default function App({ stat }) {
+          const { t } = useTranslation();
+          return <span>{t(stat.labelKey)}</span>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain("data-upstart-i18n={`translation:${stat.labelKey}`}");
+    });
+
+    test("should resolve constant variable as static key", () => {
       const code = `
         import { useTranslation } from "react-i18next";
         export default function App() {
           const { t } = useTranslation();
-          return <div>Hello</div>;
+          const labelKey = "features.title";
+          return <span>{t(labelKey)}</span>;
         }
       `;
-      expect(() => transform(code, "components/MyComponent.tsx")).toThrow(
-        /\[components\/MyComponent\.tsx\]/
-      );
+      const result = transform(code);
+      expect(result).toContain('data-upstart-i18n="translation:features.title"');
     });
 
-    test("should suggest using <Trans> in error message", () => {
+    test("should combine Trans and t() keys in same parent", () => {
       const code = `
         import { useTranslation } from "react-i18next";
+        import { Trans } from "react-i18next";
         export default function App() {
+          const { t } = useTranslation("app");
+          return <div>{t("prefix")}<Trans i18nKey="suffix" ns="app" /></div>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain('data-upstart-i18n="app:suffix,app:prefix"');
+      expect(result).toContain('data-upstart-editable-text="true"');
+    });
+
+    test("should detect t() inside .map() callback on child element", () => {
+      const code = `
+        import { useTranslation } from "react-i18next";
+        export default function App({ items }) {
           const { t } = useTranslation();
-          return <div>Hello</div>;
+          return (
+            <ul>
+              {items.map((item) => (
+                <li key={item}>{t("item.label")}</li>
+              ))}
+            </ul>
+          );
         }
       `;
-      expect(() => transform(code)).toThrow(/<Trans i18nKey="\.\.\."/);
+      const result = transform(code);
+      expect(result).toContain('data-upstart-i18n="translation:item.label"');
+    });
+
+    test("should not add i18n attributes when only i18n is destructured", () => {
+      const code = `
+        import { useTranslation } from "react-i18next";
+        export default function App() {
+          const { i18n } = useTranslation();
+          return <button onClick={() => i18n.changeLanguage("fr")}>Switch</button>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).not.toContain("data-upstart-i18n");
+    });
+
+    test("should track t when both t and i18n are destructured", () => {
+      const code = `
+        import { useTranslation } from "react-i18next";
+        export default function App() {
+          const { t, i18n } = useTranslation("app");
+          return <div>{t("greeting")}</div>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain('data-upstart-i18n="app:greeting"');
     });
   });
 });