@upstart.gg/vite-plugins 0.1.41 → 0.1.43

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

@@ -1,5 +1,9 @@
 import { describe, test, expect, beforeEach } from "vitest";
+import fs from "fs/promises";
+import path from "path";
+import os from "os";
 import { transformWithOxc, getRegistry, clearRegistry } from "../vite-plugin-upstart-attrs";
+import { UpstartEditorAPI, type EditableRegistry } from "../upstart-editor-api";
 
 // Helper to run transformation
 function transform(code: string, filePath = "test.tsx"): string | null {
@@ -7,6 +11,29 @@ function transform(code: string, filePath = "test.tsx"): string | null {
   return result ? result.code : null;
 }
 
+// Write the current registry + source to a temp project and return a ready API.
+// Call transform(source, file) first so the registry is populated.
+async function setupEditorApi(source: string, file = "app/routes/about.tsx") {
+  const registry = getRegistry();
+  const tempDir = await fs.mkdtemp(path.join(os.tmpdir(), "upstart-api-"));
+  const filePath = path.join(tempDir, file);
+  await fs.mkdir(path.dirname(filePath), { recursive: true });
+  await fs.writeFile(filePath, source);
+  const registryPath = path.join(tempDir, "registry.json");
+  const editorRegistry: EditableRegistry = { version: 1, generatedAt: "test", elements: registry };
+  await fs.writeFile(registryPath, JSON.stringify(editorRegistry));
+  const api = new UpstartEditorAPI(tempDir, registryPath);
+  api.setRegistry(editorRegistry);
+  return { api, filePath, tempDir, registry };
+}
+
+// Extract the data-upstart-array-id value emitted for a mapped item.
+function arrayIdOf(transformed: string): string {
+  const m = transformed.match(/data-upstart-array-id="([^"]+)"/);
+  if (!m) throw new Error("no data-upstart-array-id in output");
+  return m[1];
+}
+
 describe("upstart-editor-vite-plugin", () => {
   describe("JSX Element Attribute Injection", () => {
     test("should inject data attributes into PascalCase components", () => {
@@ -309,6 +336,391 @@ describe("upstart-editor-vite-plugin", () => {
     });
   });
 
+  describe("Inline array-literal map items", () => {
+    beforeEach(() => clearRegistry());
+
+    test("makes <span>{item}</span> over an inline string-literal array editable", () => {
+      const code = `
+        export default function App() {
+          return (
+            <div>
+              {["TypeScript", "React", "Node.js"].map((tech) => (
+                <span key={tech}>{tech}</span>
+              ))}
+            </div>
+          );
+        }
+      `;
+      const result = transform(code, "about.tsx")!;
+
+      expect(result).toContain('data-upstart-editable-text="true"');
+      expect(result).toContain('data-upstart-editable-text-mode="plain"');
+      // Auto-injected loop index used to address the right element at runtime
+      expect(result).toContain("(tech, __i)");
+      // Indexed id expression: one id per array element, picked by the loop index
+      expect(result).toMatch(
+        /data-upstart-id=\{\["about\.tsx:\d+","about\.tsx:\d+","about\.tsx:\d+"\]\[__i\]\}/,
+      );
+    });
+
+    test("registers one text entry per array element, pointing at the literal content", () => {
+      const code = `export default () => <div>{["TypeScript", "React"].map((t) => <span>{t}</span>)}</div>;`;
+      transform(code, "about.tsx");
+
+      const entries = Object.values(getRegistry()).filter((e) => e.type === "text");
+      expect(entries).toHaveLength(2);
+      expect(entries.map((e) => e.originalContent).sort()).toEqual(["React", "TypeScript"]);
+      // Offsets point at the inner content (quotes excluded)
+      for (const e of entries) {
+        expect(code.slice(e.startOffset, e.endOffset)).toBe(e.originalContent);
+      }
+    });
+
+    test("supports number literals in the array", () => {
+      const code = `export default () => <div>{[2020, 2021].map((y) => <span>{y}</span>)}</div>;`;
+      transform(code, "about.tsx");
+      const entries = Object.values(getRegistry()).filter((e) => e.type === "text");
+      expect(entries.map((e) => e.originalContent).sort()).toEqual(["2020", "2021"]);
+    });
+
+    test("does NOT make items editable when the array is a variable (not inline)", () => {
+      const code = `
+        export default function App({ items }) {
+          return <div>{items.map((tech) => <span>{tech}</span>)}</div>;
+        }
+      `;
+      const result = transform(code, "about.tsx")!;
+      expect(result).toContain('data-upstart-editable-text="false"');
+      expect(result).not.toContain('data-upstart-editable-text="true"');
+    });
+
+    test("does NOT make items editable when the item is transformed", () => {
+      const code = `export default () => <div>{["a", "b"].map((t) => <span>{t.toUpperCase()}</span>)}</div>;`;
+      const result = transform(code, "about.tsx")!;
+      // {t.toUpperCase()} is a CallExpression → no in-place source to edit
+      expect(result).not.toContain('data-upstart-editable-text="true"');
+    });
+
+    test("round-trip: editing one rendered item rewrites the matching source literal", async () => {
+      const source = `export default () => <div>{["TypeScript", "React", "Node.js"].map((tech) => <span>{tech}</span>)}</div>;\n`;
+      transform(source, "app/routes/about.tsx");
+
+      // The middle element ("React") — locate its registry id.
+      const registry = getRegistry();
+      const reactId = Object.entries(registry).find(([, e]) => e.originalContent === "React")![0];
+
+      const tempDir = await fs.mkdtemp(path.join(os.tmpdir(), "upstart-arr-"));
+      try {
+        const filePath = path.join(tempDir, "app", "routes", "about.tsx");
+        await fs.mkdir(path.dirname(filePath), { recursive: true });
+        await fs.writeFile(filePath, source);
+
+        const registryPath = path.join(tempDir, "registry.json");
+        const editorRegistry: EditableRegistry = {
+          version: 1,
+          generatedAt: "test",
+          elements: registry,
+        };
+        await fs.writeFile(registryPath, JSON.stringify(editorRegistry));
+
+        const api = new UpstartEditorAPI(tempDir, registryPath);
+        api.setRegistry(editorRegistry);
+
+        const res = await api.editTextDirect({ action: "editTextDirect", id: reactId, content: "Vue" });
+        expect(res.success).toBe(true);
+
+        const updated = await fs.readFile(filePath, "utf-8");
+        // Only the middle literal changed; siblings untouched.
+        expect(updated).toContain(`["TypeScript", "Vue", "Node.js"]`);
+      } finally {
+        await fs.rm(tempDir, { recursive: true, force: true });
+      }
+    });
+
+    test("captures the source quote char in the registry entry", () => {
+      transform(`export default () => <div>{["A"].map((t) => <span>{t}</span>)}</div>;`, "about.tsx");
+      const entry = Object.values(getRegistry()).find((e) => e.type === "text")!;
+      expect(entry.quote).toBe('"');
+    });
+
+    test("round-trip: escapes quotes and backslashes typed into a string-literal item", async () => {
+      const source = `export default () => <div>{["React", "Vue"].map((t) => <span>{t}</span>)}</div>;\n`;
+      transform(source, "app/routes/about.tsx");
+      const registry = getRegistry();
+      const reactId = Object.entries(registry).find(([, e]) => e.originalContent === "React")![0];
+
+      const tempDir = await fs.mkdtemp(path.join(os.tmpdir(), "upstart-esc-"));
+      try {
+        const filePath = path.join(tempDir, "app", "routes", "about.tsx");
+        await fs.mkdir(path.dirname(filePath), { recursive: true });
+        await fs.writeFile(filePath, source);
+
+        const registryPath = path.join(tempDir, "registry.json");
+        const editorRegistry: EditableRegistry = { version: 1, generatedAt: "test", elements: registry };
+        await fs.writeFile(registryPath, JSON.stringify(editorRegistry));
+
+        const api = new UpstartEditorAPI(tempDir, registryPath);
+        api.setRegistry(editorRegistry);
+
+        const res = await api.editTextDirect({
+          action: "editTextDirect",
+          id: reactId,
+          content: 'a "quote" and a \\ back',
+        });
+        expect(res.success).toBe(true);
+
+        const updated = await fs.readFile(filePath, "utf-8");
+        // The written literal must be a valid double-quoted string.
+        expect(updated).toContain('["a \\"quote\\" and a \\\\ back", "Vue"]');
+      } finally {
+        await fs.rm(tempDir, { recursive: true, force: true });
+      }
+    });
+
+    test("escapes for the actual quote style (single quotes)", async () => {
+      const source = `export default () => <div>{['Alex'].map((t) => <span>{t}</span>)}</div>;\n`;
+      transform(source, "app/routes/about.tsx");
+      const registry = getRegistry();
+      const id = Object.entries(registry).find(([, e]) => e.originalContent === "Alex")![0];
+
+      const tempDir = await fs.mkdtemp(path.join(os.tmpdir(), "upstart-esc2-"));
+      try {
+        const filePath = path.join(tempDir, "app", "routes", "about.tsx");
+        await fs.mkdir(path.dirname(filePath), { recursive: true });
+        await fs.writeFile(filePath, source);
+        const registryPath = path.join(tempDir, "registry.json");
+        const editorRegistry: EditableRegistry = { version: 1, generatedAt: "test", elements: registry };
+        await fs.writeFile(registryPath, JSON.stringify(editorRegistry));
+        const api = new UpstartEditorAPI(tempDir, registryPath);
+        api.setRegistry(editorRegistry);
+
+        await api.editTextDirect({ action: "editTextDirect", id, content: "O'Brien" });
+        const updated = await fs.readFile(filePath, "utf-8");
+        expect(updated).toContain("['O\\'Brien']");
+      } finally {
+        await fs.rm(tempDir, { recursive: true, force: true });
+      }
+    });
+
+    test("round-trip: gives a value to an empty-string item (zero-length range)", async () => {
+      const source = `export default () => <div>{["", "React"].map((t) => <span>{t}</span>)}</div>;\n`;
+      transform(source, "app/routes/about.tsx");
+      const registry = getRegistry();
+      const emptyId = Object.entries(registry).find(
+        ([, e]) => e.type === "text" && e.originalContent === "",
+      )![0];
+
+      const tempDir = await fs.mkdtemp(path.join(os.tmpdir(), "upstart-empty-"));
+      try {
+        const filePath = path.join(tempDir, "app", "routes", "about.tsx");
+        await fs.mkdir(path.dirname(filePath), { recursive: true });
+        await fs.writeFile(filePath, source);
+        const registryPath = path.join(tempDir, "registry.json");
+        const editorRegistry: EditableRegistry = { version: 1, generatedAt: "test", elements: registry };
+        await fs.writeFile(registryPath, JSON.stringify(editorRegistry));
+        const api = new UpstartEditorAPI(tempDir, registryPath);
+        api.setRegistry(editorRegistry);
+
+        const res = await api.editTextDirect({ action: "editTextDirect", id: emptyId, content: "Vue" });
+        expect(res.success).toBe(true);
+        const updated = await fs.readFile(filePath, "utf-8");
+        expect(updated).toContain(`["Vue", "React"]`);
+      } finally {
+        await fs.rm(tempDir, { recursive: true, force: true });
+      }
+    });
+
+    test("round-trip: clearing an item to an empty string, then re-filling it", async () => {
+      const source = `export default () => <div>{["React", "Vue"].map((t) => <span>{t}</span>)}</div>;\n`;
+      transform(source, "app/routes/about.tsx");
+      const registry = getRegistry();
+      const id = Object.entries(registry).find(([, e]) => e.originalContent === "React")![0];
+
+      const tempDir = await fs.mkdtemp(path.join(os.tmpdir(), "upstart-clear-"));
+      try {
+        const filePath = path.join(tempDir, "app", "routes", "about.tsx");
+        await fs.mkdir(path.dirname(filePath), { recursive: true });
+        await fs.writeFile(filePath, source);
+        const registryPath = path.join(tempDir, "registry.json");
+        const editorRegistry: EditableRegistry = { version: 1, generatedAt: "test", elements: registry };
+        await fs.writeFile(registryPath, JSON.stringify(editorRegistry));
+        const api = new UpstartEditorAPI(tempDir, registryPath);
+        api.setRegistry(editorRegistry);
+
+        // Clear to empty (overwrite → zero-length), then re-fill (zero-length → insert).
+        expect((await api.editTextDirect({ action: "editTextDirect", id, content: "" })).success).toBe(true);
+        expect(await fs.readFile(filePath, "utf-8")).toContain(`["", "Vue"]`);
+
+        expect((await api.editTextDirect({ action: "editTextDirect", id, content: "Svelte" })).success).toBe(
+          true,
+        );
+        expect(await fs.readFile(filePath, "utf-8")).toContain(`["Svelte", "Vue"]`);
+      } finally {
+        await fs.rm(tempDir, { recursive: true, force: true });
+      }
+    });
+  });
+
+  describe("Inline array-literal add/delete (×/+ controls)", () => {
+    beforeEach(() => clearRegistry());
+
+    test("emits array-id and array-index on each mapped item", () => {
+      const result = transform(
+        `export default () => <div>{["A", "B"].map((t) => <span>{t}</span>)}</div>;`,
+        "about.tsx",
+      )!;
+      expect(result).toMatch(/data-upstart-array-id="about\.tsx:\d+"/);
+      expect(result).toContain("data-upstart-array-index={__i}");
+    });
+
+    test("add: appends a new element preserving the multi-line separator", async () => {
+      const source = `export default () => (\n  <div>\n    {[\n      "TypeScript",\n      "React",\n    ].map((t) => (\n      <span>{t}</span>\n    ))}\n  </div>\n);\n`;
+      const arrayId = arrayIdOf(transform(source, "app/routes/about.tsx")!);
+      const { api, filePath, tempDir } = await setupEditorApi(source);
+      try {
+        const res = await api.arrayItemAdd({ action: "arrayItemAdd", arrayId, content: "New item" });
+        expect(res.success).toBe(true);
+        const updated = await fs.readFile(filePath, "utf-8");
+        expect(updated).toContain(`"React",\n      "New item",`);
+      } finally {
+        await fs.rm(tempDir, { recursive: true, force: true });
+      }
+    });
+
+    test("add: single-element array falls back to a ', ' separator", async () => {
+      const source = `export default () => <div>{["Only"].map((t) => <span>{t}</span>)}</div>;\n`;
+      const arrayId = arrayIdOf(transform(source, "app/routes/about.tsx")!);
+      const { api, filePath, tempDir } = await setupEditorApi(source);
+      try {
+        await api.arrayItemAdd({ action: "arrayItemAdd", arrayId, content: "Second" });
+        expect(await fs.readFile(filePath, "utf-8")).toContain(`["Only", "Second"]`);
+      } finally {
+        await fs.rm(tempDir, { recursive: true, force: true });
+      }
+    });
+
+    test("add: matches the existing quote style and escapes content", async () => {
+      const source = `export default () => <div>{['Alex'].map((t) => <span>{t}</span>)}</div>;\n`;
+      const arrayId = arrayIdOf(transform(source, "app/routes/about.tsx")!);
+      const { api, filePath, tempDir } = await setupEditorApi(source);
+      try {
+        await api.arrayItemAdd({ action: "arrayItemAdd", arrayId, content: "O'Brien" });
+        expect(await fs.readFile(filePath, "utf-8")).toContain("['Alex', 'O\\'Brien']");
+      } finally {
+        await fs.rm(tempDir, { recursive: true, force: true });
+      }
+    });
+
+    test("delete: removes a middle element cleanly", async () => {
+      const source = `export default () => <div>{["A", "B", "C"].map((t) => <span>{t}</span>)}</div>;\n`;
+      const arrayId = arrayIdOf(transform(source, "app/routes/about.tsx")!);
+      const { api, filePath, tempDir } = await setupEditorApi(source);
+      try {
+        const res = await api.arrayItemDelete({ action: "arrayItemDelete", arrayId, index: 1 });
+        expect(res.success).toBe(true);
+        expect(await fs.readFile(filePath, "utf-8")).toContain(`["A", "C"]`);
+      } finally {
+        await fs.rm(tempDir, { recursive: true, force: true });
+      }
+    });
+
+    test("delete: removes the first element cleanly", async () => {
+      const source = `export default () => <div>{["A", "B", "C"].map((t) => <span>{t}</span>)}</div>;\n`;
+      const arrayId = arrayIdOf(transform(source, "app/routes/about.tsx")!);
+      const { api, filePath, tempDir } = await setupEditorApi(source);
+      try {
+        await api.arrayItemDelete({ action: "arrayItemDelete", arrayId, index: 0 });
+        expect(await fs.readFile(filePath, "utf-8")).toContain(`["B", "C"]`);
+      } finally {
+        await fs.rm(tempDir, { recursive: true, force: true });
+      }
+    });
+
+    test("delete: refuses to remove the last remaining item", async () => {
+      const source = `export default () => <div>{["Only"].map((t) => <span>{t}</span>)}</div>;\n`;
+      const arrayId = arrayIdOf(transform(source, "app/routes/about.tsx")!);
+      const { api, filePath, tempDir } = await setupEditorApi(source);
+      try {
+        const res = await api.arrayItemDelete({ action: "arrayItemDelete", arrayId, index: 0 });
+        expect(res.success).toBe(false);
+        expect(await fs.readFile(filePath, "utf-8")).toContain(`["Only"]`);
+      } finally {
+        await fs.rm(tempDir, { recursive: true, force: true });
+      }
+    });
+
+    test("delete: out-of-range index returns an error", async () => {
+      const source = `export default () => <div>{["A", "B"].map((t) => <span>{t}</span>)}</div>;\n`;
+      const arrayId = arrayIdOf(transform(source, "app/routes/about.tsx")!);
+      const { api, tempDir } = await setupEditorApi(source);
+      try {
+        const res = await api.arrayItemDelete({ action: "arrayItemDelete", arrayId, index: 5 });
+        expect(res.success).toBe(false);
+      } finally {
+        await fs.rm(tempDir, { recursive: true, force: true });
+      }
+    });
+  });
+
+  describe("Inline array-literal arraySet (batched apply)", () => {
+    beforeEach(() => clearRegistry());
+
+    test("replaces the whole single-line array, preserving quote + escaping", async () => {
+      const source = `export default () => <div>{["A", "B", "C"].map((t) => <span>{t}</span>)}</div>;\n`;
+      const arrayId = arrayIdOf(transform(source, "app/routes/about.tsx")!);
+      const { api, filePath, tempDir } = await setupEditorApi(source);
+      try {
+        // Net effect of a session: delete "B", keep "A"/"C", add two new items.
+        const res = await api.arraySet({
+          action: "arraySet",
+          arrayId,
+          items: ["A", "C", "New item", 'has "quote"'],
+        });
+        expect(res.success).toBe(true);
+        expect(await fs.readFile(filePath, "utf-8")).toContain(`["A", "C", "New item", "has \\"quote\\""]`);
+      } finally {
+        await fs.rm(tempDir, { recursive: true, force: true });
+      }
+    });
+
+    test("preserves multi-line indentation and trailing comma", async () => {
+      const source = `export default () => (\n  <div>\n    {[\n      "TypeScript",\n      "React",\n    ].map((t) => (\n      <span>{t}</span>\n    ))}\n  </div>\n);\n`;
+      const arrayId = arrayIdOf(transform(source, "app/routes/about.tsx")!);
+      const { api, filePath, tempDir } = await setupEditorApi(source);
+      try {
+        await api.arraySet({ action: "arraySet", arrayId, items: ["TypeScript", "Go", "Rust"] });
+        const updated = await fs.readFile(filePath, "utf-8");
+        expect(updated).toContain(`[\n      "TypeScript",\n      "Go",\n      "Rust",\n    ].map`);
+      } finally {
+        await fs.rm(tempDir, { recursive: true, force: true });
+      }
+    });
+
+    test("matches single-quote style", async () => {
+      const source = `export default () => <div>{['A'].map((t) => <span>{t}</span>)}</div>;\n`;
+      const arrayId = arrayIdOf(transform(source, "app/routes/about.tsx")!);
+      const { api, filePath, tempDir } = await setupEditorApi(source);
+      try {
+        await api.arraySet({ action: "arraySet", arrayId, items: ["A", "B"] });
+        expect(await fs.readFile(filePath, "utf-8")).toContain(`['A', 'B']`);
+      } finally {
+        await fs.rm(tempDir, { recursive: true, force: true });
+      }
+    });
+
+    test("rejects an empty item list", async () => {
+      const source = `export default () => <div>{["A"].map((t) => <span>{t}</span>)}</div>;\n`;
+      const arrayId = arrayIdOf(transform(source, "app/routes/about.tsx")!);
+      const { api, tempDir } = await setupEditorApi(source);
+      try {
+        const res = await api.arraySet({ action: "arraySet", arrayId, items: [] });
+        expect(res.success).toBe(false);
+      } finally {
+        await fs.rm(tempDir, { recursive: true, force: true });
+      }
+    });
+  });
+
   describe("Content Hash", () => {
     test("should add data-upstart-hash to elements", () => {
       const code = `