@upstart.gg/vite-plugins 0.0.37

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

@@ -0,0 +1,1189 @@
+import { describe, test, expect, beforeEach } from "vitest";
+import { transformWithOxc, getRegistry, clearRegistry } from "../vite-plugin-upstart-attrs";
+
+// Helper to run transformation
+function transform(code: string, filePath = "test.tsx"): string | null {
+  const result = transformWithOxc(code, filePath);
+  return result ? result.code : null;
+}
+
+describe("upstart-editor-vite-plugin", () => {
+  describe("JSX Element Attribute Injection", () => {
+    test("should inject data attributes into PascalCase components", () => {
+      const code = `
+        export default function App() {
+          return <MyComponent foo="bar" />;
+        }
+      `;
+
+      const result = transform(code);
+
+      expect(result).toContain('data-upstart-file="test.tsx"');
+      expect(result).toContain('data-upstart-component="MyComponent"');
+    });
+
+    test("should not inject attributes into lowercase HTML elements", () => {
+      const code = `
+        export default function App() {
+          return <div><MyComponent /></div>;
+        }
+      `;
+
+      const result = transform(code);
+
+      // div should not have data-upstart-component, only MyComponent should
+      expect(result).not.toContain('data-upstart-component="div"');
+      expect(result).toContain('data-upstart-component="MyComponent"');
+    });
+
+    test("should track prop bindings with member expressions", () => {
+      const code = `
+        export default function App() {
+          const user = { name: "Alice" };
+          return <MyComponent name={user.name} />;
+        }
+      `;
+
+      const result = transform(code);
+
+      expect(result).toContain('data-upstart-prop-name="user.name"');
+      expect(result).toContain('data-upstart-datasource-name="user"');
+    });
+
+    test("should track prop bindings with identifiers", () => {
+      const code = `
+        export default function App() {
+          const userName = "Alice";
+          return <MyComponent name={userName} />;
+        }
+      `;
+
+      const result = transform(code);
+
+      expect(result).toContain('data-upstart-prop-name="userName"');
+    });
+
+    test("should track record IDs for datasource bindings", () => {
+      const code = `
+        export default function App() {
+          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}");
+    });
+
+    test("should handle conditional prop expressions", () => {
+      const code = `
+        export default function App() {
+          const isActive = true;
+          const user = { name: "Alice" };
+          return <MyComponent name={isActive ? user.name : "Guest"} />;
+        }
+      `;
+
+      const result = transform(code);
+
+      expect(result).toContain('data-upstart-conditional-name="true"');
+    });
+
+    test("should handle logical prop expressions", () => {
+      const code = `
+        export default function App() {
+          const user = { name: "Alice" };
+          return <MyComponent name={user && user.name} />;
+        }
+      `;
+
+      const result = transform(code);
+
+      expect(result).toContain('data-upstart-conditional-name="true"');
+    });
+  });
+
+  describe("Static Text Detection", () => {
+    test("should mark leaf elements with static text as editable", () => {
+      const code = `
+        export default function App() {
+          return <div>Hello World</div>;
+        }
+      `;
+
+      const result = transform(code);
+
+      expect(result).toContain('data-upstart-editable-text="true"');
+    });
+
+    test("should mark span with static text as editable", () => {
+      const code = `
+        export default function App() {
+          return <span>Click here</span>;
+        }
+      `;
+
+      const result = transform(code);
+
+      expect(result).toContain('data-upstart-editable-text="true"');
+    });
+
+    test("should mark PascalCase component with static text as editable AND track component", () => {
+      const code = `
+        export default function App() {
+          return <Button>Submit</Button>;
+        }
+      `;
+
+      const result = transform(code);
+
+      // Should have both editable text AND component tracking
+      expect(result).toContain('data-upstart-editable-text="true"');
+      expect(result).toContain('data-upstart-component="Button"');
+    });
+
+    test("should NOT mark elements with nested elements", () => {
+      const code = `
+        export default function App() {
+          return <div><span>nested</span></div>;
+        }
+      `;
+
+      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);
+      expect(matches?.length).toBe(1);
+    });
+
+    test("should NOT mark elements with dynamic expressions", () => {
+      const code = `
+        export default function App() {
+          const name = "World";
+          return <div>{name}</div>;
+        }
+      `;
+
+      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');
+    });
+
+    test("should NOT mark elements with mixed content", () => {
+      const code = `
+        export default function App() {
+          return <div>Text <b>bold</b></div>;
+        }
+      `;
+
+      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);
+    });
+
+    test("should NOT mark empty elements as editable", () => {
+      const code = `
+        export default function App() {
+          return <div></div>;
+        }
+      `;
+
+      const result = transform(code);
+
+      // Should NOT have editable-text (empty)
+      // But SHOULD have hash
+      expect(result).not.toContain('data-upstart-editable-text');
+      expect(result).toContain('data-upstart-hash');
+    });
+
+    test("should NOT mark whitespace-only elements as editable", () => {
+      const code = `
+        export default function App() {
+          return <div>   </div>;
+        }
+      `;
+
+      const result = transform(code);
+
+      // 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');
+    });
+
+    test("should handle multiple text leaf elements", () => {
+      const code = `
+        export default function App() {
+          return (
+            <div>
+              <h1>Title</h1>
+              <p>Description</p>
+            </div>
+          );
+        }
+      `;
+
+      const result = transform(code);
+
+      // Both h1 and p should be marked
+      const matches = result?.match(/data-upstart-editable-text="true"/g);
+      expect(matches?.length).toBe(2);
+    });
+  });
+
+  describe("Content Hash", () => {
+    test("should add data-upstart-hash to elements", () => {
+      const code = `
+        export default function App() {
+          return <div>Hello World</div>;
+        }
+      `;
+
+      const result = transform(code);
+
+      expect(result).toMatch(/data-upstart-hash="[a-f0-9]+"/);
+    });
+
+    test("should produce stable hash for same content", () => {
+      const code = `
+        export default function App() {
+          return <div>Hello World</div>;
+        }
+      `;
+
+      const result1 = transform(code);
+      const result2 = transform(code);
+
+      // Extract the hash values
+      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);
+    });
+
+    test("should produce different hash for different content", () => {
+      const code1 = `
+        export default function App() {
+          return <div>Hello</div>;
+        }
+      `;
+
+      const code2 = `
+        export default function App() {
+          return <div>World</div>;
+        }
+      `;
+
+      const result1 = transform(code1);
+      const result2 = transform(code2);
+
+      const hash1 = result1?.match(/data-upstart-hash="([a-f0-9]+)"/)?.[1];
+      const hash2 = result2?.match(/data-upstart-hash="([a-f0-9]+)"/)?.[1];
+
+      expect(hash1).not.toBe(hash2);
+    });
+
+    test("should change hash when children change", () => {
+      const code1 = `
+        export default function App() {
+          return <div><span>Original</span></div>;
+        }
+      `;
+
+      const code2 = `
+        export default function App() {
+          return <div><span>Modified</span></div>;
+        }
+      `;
+
+      const result1 = transform(code1);
+      const result2 = transform(code2);
+
+      // Get the outer div's hash (first match)
+      const divHash1 = result1?.match(/data-upstart-hash="([a-f0-9]+)"/)?.[1];
+      const divHash2 = result2?.match(/data-upstart-hash="([a-f0-9]+)"/)?.[1];
+
+      // Parent hash should change because child content changed
+      expect(divHash1).not.toBe(divHash2);
+    });
+
+    test("should have unique hashes for different elements", () => {
+      const code = `
+        export default function App() {
+          return (
+            <div>
+              <span>First</span>
+              <span>Second</span>
+            </div>
+          );
+        }
+      `;
+
+      const result = transform(code);
+
+      // Find all hashes
+      const hashes = result?.match(/data-upstart-hash="([a-f0-9]+)"/g);
+      const uniqueHashes = new Set(hashes);
+
+      // Should have 3 unique hashes (div + 2 spans)
+      expect(uniqueHashes.size).toBe(3);
+    });
+  });
+
+  describe("Loop Context Tracking", () => {
+    test("should track .map() call context", () => {
+      const code = `
+        export default function App() {
+          const items = ["a", "b", "c"];
+          return (
+            <div>
+              {items.map((item, index) => (
+                <Item key={index} name={item} />
+              ))}
+            </div>
+          );
+        }
+      `;
+
+      const result = transform(code);
+
+      expect(result).toContain('data-upstart-loop-item="item"');
+      expect(result).toContain("data-upstart-loop-index={index}");
+      expect(result).toContain('data-upstart-loop-array="items"');
+    });
+
+    test("should handle nested loops", () => {
+      const code = `
+        export default function App() {
+          const groups = [[1, 2], [3, 4]];
+          return (
+            <div>
+              {groups.map((group, i) => (
+                <div key={i}>
+                  {group.map((item, j) => (
+                    <Item key={j} value={item} />
+                  ))}
+                </div>
+              ))}
+            </div>
+          );
+        }
+      `;
+
+      const result = transform(code);
+
+      // Should track the innermost loop
+      expect(result).toContain('data-upstart-loop-item="item"');
+      expect(result).toContain("data-upstart-loop-index={j}");
+    });
+
+    test("should extract parameter names correctly", () => {
+      const code = `
+        export default function App() {
+          const users = [];
+          return (
+            <div>
+              {users.map((user, idx) => (
+                <User key={idx} data={user} />
+              ))}
+            </div>
+          );
+        }
+      `;
+
+      const result = transform(code);
+
+      expect(result).toContain('data-upstart-loop-item="user"');
+      expect(result).toContain("data-upstart-loop-index={idx}");
+      expect(result).toContain('data-upstart-loop-array="users"');
+    });
+
+    test("should handle .map() with only item parameter", () => {
+      const code = `
+        export default function App() {
+          const items = ["a", "b"];
+          return (
+            <div>
+              {items.map((item) => (
+                <Item key={item} name={item} />
+              ))}
+            </div>
+          );
+        }
+      `;
+
+      const result = transform(code);
+
+      expect(result).toContain('data-upstart-loop-item="item"');
+      expect(result).toContain('data-upstart-loop-array="items"');
+    });
+
+    test("should handle complex array expressions", () => {
+      const code = `
+        export default function App() {
+          const data = { users: [] };
+          return (
+            <div>
+              {data.users.map((user) => (
+                <User key={user.id} data={user} />
+              ))}
+            </div>
+          );
+        }
+      `;
+
+      const result = transform(code);
+
+      expect(result).toContain('data-upstart-loop-item="user"');
+      expect(result).toContain('data-upstart-loop-array="data.users"');
+    });
+  });
+
+  describe("Edge Cases", () => {
+    test("should return null for files without JSX", () => {
+      const code = `const x = 1;`;
+      const result = transform(code);
+      expect(result).toBeNull();
+    });
+
+    test("should handle syntax errors gracefully", () => {
+      const code = `export default function App() { return <div>`;
+      // Should not throw, but may return null or error
+      expect(() => transform(code)).not.toThrow();
+    });
+
+    test("should handle empty JSX elements", () => {
+      const code = `
+        export default function App() {
+          return <MyComponent />;
+        }
+      `;
+
+      const result = transform(code);
+
+      expect(result).toContain('data-upstart-component="MyComponent"');
+    });
+
+    test("should handle self-closing HTML elements", () => {
+      const code = `
+        export default function App() {
+          return <div><br /><hr /></div>;
+        }
+      `;
+
+      const result = transform(code);
+
+      // All elements should have hashes
+      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();
+    });
+
+    test("should handle JSX fragments", () => {
+      const code = `
+        export default function App() {
+          return (
+            <>
+              <MyComponent />
+              <AnotherComponent />
+            </>
+          );
+        }
+      `;
+
+      const result = transform(code);
+
+      // Should process components inside fragments
+      expect(result).toContain('data-upstart-component="MyComponent"');
+      expect(result).toContain('data-upstart-component="AnotherComponent"');
+    });
+
+    test("should handle deeply nested structures", () => {
+      const code = `
+        export default function App() {
+          return (
+            <Outer>
+              <Middle>
+                <Inner>
+                  <Leaf />
+                </Inner>
+              </Middle>
+            </Outer>
+          );
+        }
+      `;
+
+      const result = transform(code);
+
+      // All components should be tracked
+      expect(result).toContain('data-upstart-component="Outer"');
+      expect(result).toContain('data-upstart-component="Middle"');
+      expect(result).toContain('data-upstart-component="Inner"');
+      expect(result).toContain('data-upstart-component="Leaf"');
+    });
+
+    test("should handle JSXMemberExpression components", () => {
+      const code = `
+        export default function App() {
+          return <Foo.Bar.Baz />;
+        }
+      `;
+
+      const result = transform(code);
+
+      // Should track the rightmost part
+      expect(result).toContain('data-upstart-component="Baz"');
+    });
+
+    test("should handle empty expressions", () => {
+      const code = `
+        export default function App() {
+          return <div>{/* comment */}</div>;
+        }
+      `;
+
+      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');
+    });
+
+    test("should handle logical expression containing JSX elements", () => {
+      // This was causing "Cannot split a chunk that has already been edited" error
+      const code = `
+        export default function App() {
+          const stack = "error stack";
+          return (
+            <div>
+              {stack && (
+                <Pre className="w-full p-4 overflow-x-auto">
+                  <Code>{stack}</Code>
+                </Pre>
+              )}
+            </div>
+          );
+        }
+      `;
+
+      // Should not throw
+      expect(() => transform(code)).not.toThrow();
+      const result = transform(code);
+
+      // Components inside the conditional should be processed
+      expect(result).toContain('data-upstart-component="Pre"');
+      expect(result).toContain('data-upstart-component="Code"');
+    });
+
+    test("should handle conditional expression containing JSX elements", () => {
+      const code = `
+        export default function App() {
+          const isError = true;
+          const message = "Error occurred";
+          return (
+            <div>
+              {isError ? (
+                <ErrorMessage text={message} />
+              ) : (
+                <SuccessMessage />
+              )}
+            </div>
+          );
+        }
+      `;
+
+      // Should not throw
+      expect(() => transform(code)).not.toThrow();
+      const result = transform(code);
+
+      // Components inside the conditional should be processed
+      expect(result).toContain('data-upstart-component="ErrorMessage"');
+      expect(result).toContain('data-upstart-component="SuccessMessage"');
+    });
+
+    test("should handle nested logical expressions with JSX", () => {
+      const code = `
+        export default function App() {
+          const a = true;
+          const b = true;
+          return (
+            <div>
+              {a && b && <Nested />}
+            </div>
+          );
+        }
+      `;
+
+      expect(() => transform(code)).not.toThrow();
+      const result = transform(code);
+
+      expect(result).toContain('data-upstart-component="Nested"');
+    });
+
+    test("should handle conditional with JSX in both branches", () => {
+      const code = `
+        export default function App() {
+          const showA = true;
+          return (
+            <div>
+              {showA ? <ComponentA /> : <ComponentB />}
+            </div>
+          );
+        }
+      `;
+
+      expect(() => transform(code)).not.toThrow();
+      const result = transform(code);
+
+      expect(result).toContain('data-upstart-component="ComponentA"');
+      expect(result).toContain('data-upstart-component="ComponentB"');
+    });
+
+  });
+
+  describe("Element ID Tracking", () => {
+    beforeEach(() => {
+      clearRegistry();
+    });
+
+    test("should add data-upstart-id to text-editable elements", () => {
+      const code = `
+        export default function App() {
+          return <div>Hello World</div>;
+        }
+      `;
+      const result = transform(code);
+
+      // Should have both editable-text AND an ID
+      expect(result).toContain('data-upstart-editable-text="true"');
+      expect(result).toMatch(/data-upstart-id="test\.tsx:\d+"/);
+    });
+
+    test("should generate unique IDs for multiple text elements", () => {
+      const code = `
+        export default function App() {
+          return (
+            <div>
+              <span>First</span>
+              <span>Second</span>
+            </div>
+          );
+        }
+      `;
+      const result = transform(code);
+
+      // Should have two different IDs
+      const ids = result?.match(/data-upstart-id="test\.tsx:\d+"/g);
+      expect(ids?.length).toBe(2);
+      expect(ids?.[0]).not.toBe(ids?.[1]);
+    });
+
+    test("should generate stable IDs across transforms", () => {
+      const code = `
+        export default function App() {
+          return <div>Hello</div>;
+        }
+      `;
+
+      clearRegistry();
+      const result1 = transform(code);
+      clearRegistry();
+      const result2 = transform(code);
+
+      const id1 = result1?.match(/data-upstart-id="([^"]+)"/)?.[1];
+      const id2 = result2?.match(/data-upstart-id="([^"]+)"/)?.[1];
+
+      expect(id1).toBe(id2);
+    });
+
+    test("should not add ID to non-text elements", () => {
+      const code = `
+        export default function App() {
+          return <div></div>;
+        }
+      `;
+      const result = transform(code);
+
+      // Empty element should NOT have an ID
+      expect(result).not.toContain('data-upstart-id');
+    });
+  });
+
+  describe("ClassName ID Tracking", () => {
+    beforeEach(() => {
+      clearRegistry();
+    });
+
+    test("should add data-upstart-classname-id for string literal className", () => {
+      const code = `
+        export default function App() {
+          return <div className="px-4 py-2">Hello</div>;
+        }
+      `;
+      const result = transform(code);
+
+      expect(result).toMatch(/data-upstart-classname-id="test\.tsx:\d+"/);
+    });
+
+    test("should NOT add classname-id for dynamic className", () => {
+      const code = `
+        export default function App() {
+          const classes = "px-4";
+          return <div className={classes}>Hello</div>;
+        }
+      `;
+      const result = transform(code);
+
+      expect(result).not.toContain('data-upstart-classname-id');
+    });
+
+    test("should NOT add classname-id for template literal className", () => {
+      const code = `
+        export default function App() {
+          return <div className={\`px-4 py-2\`}>Hello</div>;
+        }
+      `;
+      const result = transform(code);
+
+      expect(result).not.toContain('data-upstart-classname-id');
+    });
+
+    test("should add both text-id and classname-id to same element", () => {
+      const code = `
+        export default function App() {
+          return <span className="text-lg font-bold">Hello</span>;
+        }
+      `;
+      const result = transform(code);
+
+      expect(result).toMatch(/data-upstart-id="test\.tsx:\d+"/);
+      expect(result).toMatch(/data-upstart-classname-id="test\.tsx:\d+"/);
+
+      // IDs should be different
+      const textId = result?.match(/data-upstart-id="([^"]+)"/)?.[1];
+      const classId = result?.match(/data-upstart-classname-id="([^"]+)"/)?.[1];
+      expect(textId).not.toBe(classId);
+    });
+
+    test("should add classname-id to elements without text", () => {
+      const code = `
+        export default function App() {
+          return <div className="container"><span>child</span></div>;
+        }
+      `;
+      const result = transform(code);
+
+      // The div has className but no direct text, should still get classname-id
+      expect(result).toMatch(/data-upstart-classname-id="test\.tsx:\d+"/);
+    });
+  });
+
+  describe("Registry Generation", () => {
+    beforeEach(() => {
+      clearRegistry();
+    });
+
+    test("should collect text entries in registry", () => {
+      const code = `
+        export default function App() {
+          return <div>Hello World</div>;
+        }
+      `;
+
+      transform(code);
+      const registry = getRegistry();
+
+      const entries = Object.values(registry);
+      const textEntry = entries.find(e => e.type === "text");
+
+      expect(textEntry).toBeDefined();
+      expect(textEntry?.originalContent).toBe("Hello World");
+      expect(textEntry?.file).toBe("test.tsx");
+    });
+
+    test("should collect className entries in registry", () => {
+      const code = `
+        export default function App() {
+          return <div className="px-4 py-2">Hello</div>;
+        }
+      `;
+
+      transform(code);
+      const registry = getRegistry();
+
+      const entries = Object.values(registry);
+      const classEntry = entries.find(e => e.type === "className");
+
+      expect(classEntry).toBeDefined();
+      expect(classEntry?.originalContent).toBe("px-4 py-2");
+    });
+
+    test("should track correct byte offsets for text", () => {
+      const code = `<div>Hello</div>`;
+
+      transform(code);
+      const registry = getRegistry();
+
+      const entry = Object.values(registry).find(e => e.type === "text");
+      const extractedText = code.slice(entry!.startOffset, entry!.endOffset);
+
+      expect(extractedText).toBe("Hello");
+    });
+
+    test("should track correct byte offsets for className (excluding quotes)", () => {
+      const code = `<div className="my-class">Hi</div>`;
+
+      transform(code);
+      const registry = getRegistry();
+
+      const entry = Object.values(registry).find(e => e.type === "className");
+      const extractedClass = code.slice(entry!.startOffset, entry!.endOffset);
+
+      expect(extractedClass).toBe("my-class");
+    });
+
+    test("should track parent tag in context", () => {
+      const code = `<span>Some text</span>`;
+
+      transform(code);
+      const registry = getRegistry();
+
+      const entry = Object.values(registry).find(e => e.type === "text");
+      expect(entry?.context.parentTag).toBe("span");
+    });
+
+    test("should clear registry between builds", () => {
+      const code = `<div>First</div>`;
+      transform(code);
+
+      let registry = getRegistry();
+      expect(Object.keys(registry).length).toBeGreaterThan(0);
+
+      clearRegistry();
+      registry = getRegistry();
+      expect(Object.keys(registry).length).toBe(0);
+    });
+
+    test("should track multiple elements in same file", () => {
+      const code = `
+        export default function App() {
+          return (
+            <div>
+              <span className="a">One</span>
+              <span className="b">Two</span>
+            </div>
+          );
+        }
+      `;
+
+      transform(code);
+      const registry = getRegistry();
+      const entries = Object.values(registry);
+
+      // 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");
+
+      expect(textEntries.length).toBe(2);
+      expect(classEntries.length).toBe(2);
+    });
+  });
+
+  describe("Integration Tests", () => {
+    test("should transform real-world component correctly", () => {
+      const code = `
+        export default function UserProfile() {
+          const user = { id: 123, name: "Alice", role: "Admin" };
+          const isActive = true;
+
+          return (
+            <ProfileCard>
+              <Avatar src={user.avatar} />
+              <div>
+                <h2>{user.name}</h2>
+                <p>{isActive ? user.role : "Inactive"}</p>
+                {user.posts.map((post, index) => (
+                  <Post key={post.id} title={post.title} index={index} />
+                ))}
+              </div>
+            </ProfileCard>
+          );
+        }
+      `;
+
+      const result = transform(code);
+
+      // Check component tracking
+      expect(result).toContain('data-upstart-component="ProfileCard"');
+      expect(result).toContain('data-upstart-component="Avatar"');
+      expect(result).toContain('data-upstart-component="Post"');
+
+      // Check prop tracking
+      expect(result).toContain('data-upstart-prop-src="user.avatar"');
+      expect(result).toContain('data-upstart-prop-title="post.title"');
+
+      // Check loop tracking
+      expect(result).toContain('data-upstart-loop-item="post"');
+      expect(result).toContain('data-upstart-loop-array="user.posts"');
+    });
+
+    test("should preserve source maps", () => {
+      const code = `
+        export default function App() {
+          return <MyComponent>Hello</MyComponent>;
+        }
+      `;
+
+      const result = transformWithOxc(code, "test.tsx");
+
+      expect(result).not.toBeNull();
+      expect(result?.map).toBeTruthy();
+      expect(result?.map.toString()).toContain('"sources"');
+    });
+  });
+
+  describe("i18n <Trans> Component Detection", () => {
+    test("should detect <Trans> component with default namespace", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          return <h3><Trans i18nKey="features.title" /></h3>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain('data-i18n-key="translation:features.title"');
+      expect(result).toContain('data-upstart-editable-text="true"');
+    });
+
+    test("should detect <Trans> component with custom namespace", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          return <p><Trans i18nKey="welcome.message" ns="dashboard" /></p>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain('data-i18n-key="dashboard:welcome.message"');
+      expect(result).toContain('data-upstart-editable-text="true"');
+    });
+
+    test("should detect standalone <Trans> component", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          return <Trans i18nKey="standalone.key" />;
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain('data-i18n-key="translation:standalone.key"');
+      expect(result).toContain('data-upstart-editable-text="true"');
+    });
+
+    test("should detect multiple <Trans> components in one file", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          return (
+            <div>
+              <h1><Trans i18nKey="title" /></h1>
+              <p><Trans i18nKey="description" /></p>
+            </div>
+          );
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain('data-i18n-key="translation:title"');
+      expect(result).toContain('data-i18n-key="translation:description"');
+      const editableMatches = result?.match(/data-upstart-editable-text="true"/g);
+      expect(editableMatches?.length).toBe(2);
+    });
+
+    test("should detect <Trans> with values prop", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          const name = "Alice";
+          return <span><Trans i18nKey="greeting" values={{ name }} /></span>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain('data-i18n-key="translation:greeting"');
+    });
+
+    test("should detect <Trans> with components prop", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          return (
+            <p>
+              <Trans
+                i18nKey="terms"
+                components={{ link: <a href="/terms" /> }}
+              />
+            </p>
+          );
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain('data-i18n-key="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>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).not.toContain('data-i18n-key');
+    });
+
+    test("should still add hash to <Trans> elements", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          return <h1><Trans i18nKey="title" /></h1>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).toMatch(/data-upstart-hash="[a-f0-9]+"/);
+      expect(result).toContain('data-i18n-key="translation:title"');
+    });
+
+    test("should handle PascalCase component with <Trans> child", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          return <Button><Trans i18nKey="submit" ns="ui" /></Button>;
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain('data-i18n-key="ui:submit"');
+      expect(result).toContain('data-upstart-editable-text="true"');
+      expect(result).toContain('data-upstart-component="Button"');
+    });
+
+    test("should handle <Trans> inside a .map() loop", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          const items = ["a", "b"];
+          return (
+            <div>
+              {items.map((item) => (
+                <Card key={item}>
+                  <span><Trans i18nKey="item.label" /></span>
+                </Card>
+              ))}
+            </div>
+          );
+        }
+      `;
+      const result = transform(code);
+      expect(result).toContain('data-i18n-key="translation:item.label"');
+      expect(result).toContain('data-upstart-loop-item="item"');
+    });
+
+    test("should NOT detect parent element with mixed content (<Trans> + text)", () => {
+      const code = `
+        import { Trans } from "react-i18next";
+        export default function App() {
+          return <div>Prefix: <Trans i18nKey="key" /></div>;
+        }
+      `;
+      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
+    });
+  });
+
+  describe("Forbidden useTranslation Enforcement", () => {
+    test("should throw error when destructuring t from useTranslation", () => {
+      const code = `
+        import { useTranslation } from "react-i18next";
+        export default function App() {
+          const { t } = useTranslation();
+          return <div>Hello</div>;
+        }
+      `;
+      expect(() => transform(code)).toThrow(/useTranslation hook is forbidden/);
+    });
+
+    test("should throw error when destructuring t with alias", () => {
+      const code = `
+        import { useTranslation } from "react-i18next";
+        export default function App() {
+          const { t: translate } = useTranslation();
+          return <div>Hello</div>;
+        }
+      `;
+      expect(() => transform(code)).toThrow(/useTranslation hook is forbidden/);
+    });
+
+    test("should throw error when destructuring both t and i18n", () => {
+      const code = `
+        import { useTranslation } from "react-i18next";
+        export default function App() {
+          const { t, i18n } = useTranslation();
+          return <div>Hello</div>;
+        }
+      `;
+      expect(() => transform(code)).toThrow(/useTranslation hook is forbidden/);
+    });
+
+    test("should NOT throw when only destructuring i18n (allowed for language switching)", () => {
+      const code = `
+        import { useTranslation } from "react-i18next";
+        export default function App() {
+          const { i18n } = useTranslation();
+          return (
+            <button onClick={() => i18n.changeLanguage("fr")}>
+              Switch to French
+            </button>
+          );
+        }
+      `;
+      expect(() => transform(code)).not.toThrow();
+    });
+
+    test("should include file path in error message", () => {
+      const code = `
+        import { useTranslation } from "react-i18next";
+        export default function App() {
+          const { t } = useTranslation();
+          return <div>Hello</div>;
+        }
+      `;
+      expect(() => transform(code, "components/MyComponent.tsx")).toThrow(
+        /\[components\/MyComponent\.tsx\]/
+      );
+    });
+
+    test("should suggest using <Trans> in error message", () => {
+      const code = `
+        import { useTranslation } from "react-i18next";
+        export default function App() {
+          const { t } = useTranslation();
+          return <div>Hello</div>;
+        }
+      `;
+      expect(() => transform(code)).toThrow(/<Trans i18nKey="\.\.\."/);
+    });
+  });
+});