@fragments-sdk/cli 0.2.2

package/src/service/__tests__/ast-utils.test.ts

@@ -0,0 +1,426 @@
+import { describe, it, expect } from "vitest";
+import {
+  extractStyleLocations,
+  applyPatch,
+  applyPatches,
+  findStyleOccurrences,
+  type StyleLocation,
+} from "../ast-utils.js";
+
+describe("ast-utils", () => {
+  describe("extractStyleLocations", () => {
+    it("extracts inline style locations from JSX", () => {
+      const source = `
+        function Button() {
+          return <button style={{ backgroundColor: "#ff0000", padding: "16px" }}>Click</button>;
+        }
+      `;
+
+      const locations = extractStyleLocations(source, "Button.tsx");
+
+      expect(locations).toHaveLength(2);
+      expect(locations.find(l => l.property === "backgroundColor")).toMatchObject({
+        type: "inline",
+        value: "#ff0000",
+        file: "Button.tsx",
+      });
+      expect(locations.find(l => l.property === "padding")).toMatchObject({
+        type: "inline",
+        value: "16px",
+        file: "Button.tsx",
+      });
+    });
+
+    it("extracts emotion css prop locations", () => {
+      const source = `
+        function Button() {
+          return <button css={{ color: "blue", margin: "8px" }}>Click</button>;
+        }
+      `;
+
+      const locations = extractStyleLocations(source, "Button.tsx");
+
+      expect(locations).toHaveLength(2);
+      expect(locations[0].type).toBe("emotion");
+    });
+
+    it("extracts styled-components template literal styles", () => {
+      const source = `
+        const Button = styled.button\`
+          background-color: #ff0000;
+          padding: 16px;
+          margin: 8px;
+        \`;
+      `;
+
+      const locations = extractStyleLocations(source, "Button.tsx");
+
+      expect(locations.length).toBeGreaterThanOrEqual(2);
+      expect(locations[0].type).toBe("styled-components");
+    });
+
+    it("extracts css`` template literal styles", () => {
+      const source = `
+        const buttonStyles = css\`
+          color: red;
+          font-size: 14px;
+        \`;
+      `;
+
+      const locations = extractStyleLocations(source, "styles.ts");
+
+      expect(locations.length).toBeGreaterThanOrEqual(1);
+      expect(locations[0].type).toBe("styled-components");
+    });
+
+    it("handles numeric values", () => {
+      const source = `
+        function Box() {
+          return <div style={{ width: 100, height: 200 }}>Box</div>;
+        }
+      `;
+
+      const locations = extractStyleLocations(source, "Box.tsx");
+
+      expect(locations).toHaveLength(2);
+      expect(locations.find(l => l.property === "width")?.value).toBe("100");
+      expect(locations.find(l => l.property === "height")?.value).toBe("200");
+    });
+
+    it("handles template literal values in style objects", () => {
+      const source = `
+        function Box() {
+          return <div style={{ padding: \`16px\` }}>Box</div>;
+        }
+      `;
+
+      const locations = extractStyleLocations(source, "Box.tsx");
+
+      expect(locations).toHaveLength(1);
+      expect(locations[0].property).toBe("padding");
+      expect(locations[0].value).toBe("16px");
+    });
+
+    it("handles string literal property keys", () => {
+      const source = `
+        function Box() {
+          return <div style={{ "background-color": "#fff" }}>Box</div>;
+        }
+      `;
+
+      const locations = extractStyleLocations(source, "Box.tsx");
+
+      expect(locations).toHaveLength(1);
+      expect(locations[0].property).toBe("background-color");
+    });
+
+    it("returns empty array for source without styles", () => {
+      const source = `
+        function Button({ children }) {
+          return <button className="btn">{children}</button>;
+        }
+      `;
+
+      const locations = extractStyleLocations(source, "Button.tsx");
+
+      expect(locations).toHaveLength(0);
+    });
+
+    it("handles parse errors gracefully", () => {
+      const source = `this is not valid {{{`;
+
+      const locations = extractStyleLocations(source, "Invalid.tsx");
+
+      expect(locations).toHaveLength(0);
+    });
+
+    it("includes line and column information", () => {
+      const source = `function Button() {
+  return <button style={{ color: "red" }}>Click</button>;
+}`;
+
+      const locations = extractStyleLocations(source, "Button.tsx");
+
+      expect(locations).toHaveLength(1);
+      expect(locations[0].line).toBeGreaterThan(0);
+      expect(typeof locations[0].column).toBe("number");
+    });
+  });
+
+  describe("applyPatch", () => {
+    it("replaces inline style value", () => {
+      const source = `function Button() {
+  return <button style={{ backgroundColor: "#ff0000" }}>Click</button>;
+}`;
+
+      const location: StyleLocation = {
+        file: "Button.tsx",
+        line: 2,
+        column: 27,
+        type: "inline",
+        property: "backgroundColor",
+        value: "#ff0000",
+      };
+
+      const result = applyPatch(source, location, "#ff0000", "var(--color-primary)");
+
+      expect(result.success).toBe(true);
+      expect(result.code).toContain("var(--color-primary)");
+      expect(result.code).not.toContain("#ff0000");
+      expect(result.diff).toBeDefined();
+    });
+
+    it("returns error when old value not found", () => {
+      const source = `function Button() {
+  return <button style={{ backgroundColor: "#0000ff" }}>Click</button>;
+}`;
+
+      const location: StyleLocation = {
+        file: "Button.tsx",
+        line: 2,
+        column: 27,
+        type: "inline",
+        property: "backgroundColor",
+        value: "#ff0000",
+      };
+
+      const result = applyPatch(source, location, "#ff0000", "var(--color-primary)");
+
+      expect(result.success).toBe(false);
+      expect(result.error).toBeDefined();
+    });
+
+    it("generates unified diff", () => {
+      const source = `function Button() {
+  return <button style={{ color: "red" }}>Click</button>;
+}`;
+
+      const location: StyleLocation = {
+        file: "Button.tsx",
+        line: 2,
+        column: 27,
+        type: "inline",
+        property: "color",
+        value: "red",
+      };
+
+      const result = applyPatch(source, location, "red", "var(--color-error)");
+
+      expect(result.success).toBe(true);
+      expect(result.diff).toContain("--- a/Button.tsx");
+      expect(result.diff).toContain("+++ b/Button.tsx");
+      expect(result.diff).toContain("-");
+      expect(result.diff).toContain("+");
+    });
+
+    it("handles parse errors gracefully", () => {
+      const source = `this is not valid {{{`;
+
+      const location: StyleLocation = {
+        file: "Invalid.tsx",
+        line: 1,
+        column: 0,
+        type: "inline",
+        property: "color",
+        value: "red",
+      };
+
+      const result = applyPatch(source, location, "red", "blue");
+
+      expect(result.success).toBe(false);
+      expect(result.error).toContain("parse");
+    });
+  });
+
+  describe("applyPatches", () => {
+    it("applies multiple patches in correct order", () => {
+      const source = `function Component() {
+  return (
+    <div style={{ backgroundColor: "#ff0000" }}>
+      <span style={{ color: "#0000ff" }}>Text</span>
+    </div>
+  );
+}`;
+
+      const patches = [
+        {
+          location: {
+            file: "Component.tsx",
+            line: 3,
+            column: 18,
+            type: "inline" as const,
+            property: "backgroundColor",
+            value: "#ff0000",
+          },
+          oldValue: "#ff0000",
+          newValue: "var(--bg-primary)",
+        },
+        {
+          location: {
+            file: "Component.tsx",
+            line: 4,
+            column: 20,
+            type: "inline" as const,
+            property: "color",
+            value: "#0000ff",
+          },
+          oldValue: "#0000ff",
+          newValue: "var(--text-primary)",
+        },
+      ];
+
+      const result = applyPatches(source, patches);
+
+      expect(result.success).toBe(true);
+      expect(result.code).toContain("var(--bg-primary)");
+      expect(result.code).toContain("var(--text-primary)");
+    });
+
+    it("returns error if any patch fails", () => {
+      const source = `function Component() {
+  return <div style={{ color: "red" }}>Text</div>;
+}`;
+
+      const patches = [
+        {
+          location: {
+            file: "Component.tsx",
+            line: 2,
+            column: 24,
+            type: "inline" as const,
+            property: "color",
+            value: "red",
+          },
+          oldValue: "red",
+          newValue: "var(--color)",
+        },
+        {
+          location: {
+            file: "Component.tsx",
+            line: 2,
+            column: 24,
+            type: "inline" as const,
+            property: "backgroundColor",
+            value: "blue", // This value doesn't exist
+          },
+          oldValue: "blue",
+          newValue: "var(--bg)",
+        },
+      ];
+
+      const result = applyPatches(source, patches);
+
+      expect(result.success).toBe(false);
+      expect(result.error).toBeDefined();
+    });
+
+    it("combines diffs from all patches", () => {
+      const source = `function Box() {
+  return <div style={{ margin: "8px", padding: "16px" }}>Box</div>;
+}`;
+
+      // Need actual locations from the source
+      const locations = extractStyleLocations(source, "Box.tsx");
+      const marginLoc = locations.find(l => l.property === "margin");
+      const paddingLoc = locations.find(l => l.property === "padding");
+
+      if (!marginLoc || !paddingLoc) {
+        throw new Error("Could not find style locations");
+      }
+
+      const patches = [
+        {
+          location: marginLoc,
+          oldValue: "8px",
+          newValue: "var(--spacing-sm)",
+        },
+        {
+          location: paddingLoc,
+          oldValue: "16px",
+          newValue: "var(--spacing-md)",
+        },
+      ];
+
+      const result = applyPatches(source, patches);
+
+      expect(result.success).toBe(true);
+      expect(result.diff).toBeDefined();
+    });
+  });
+
+  describe("findStyleOccurrences", () => {
+    it("finds styles matching property and value patterns", () => {
+      const source = `
+        function Component() {
+          return (
+            <div style={{ backgroundColor: "#ff0000", color: "#ff0000" }}>
+              <span style={{ backgroundColor: "#0000ff" }}>Text</span>
+            </div>
+          );
+        }
+      `;
+
+      const occurrences = findStyleOccurrences(
+        source,
+        "Component.tsx",
+        "backgroundColor",
+        "#ff0000"
+      );
+
+      expect(occurrences).toHaveLength(1);
+      expect(occurrences[0].property).toBe("backgroundColor");
+      expect(occurrences[0].value).toBe("#ff0000");
+    });
+
+    it("supports regex patterns for property matching", () => {
+      const source = `
+        function Component() {
+          return <div style={{ backgroundColor: "red", borderColor: "red" }}>Box</div>;
+        }
+      `;
+
+      const occurrences = findStyleOccurrences(
+        source,
+        "Component.tsx",
+        /.*Color$/,
+        "red"
+      );
+
+      expect(occurrences).toHaveLength(2);
+    });
+
+    it("supports regex patterns for value matching", () => {
+      const source = `
+        function Component() {
+          return <div style={{ padding: "16px", margin: "16rem" }}>Box</div>;
+        }
+      `;
+
+      const occurrences = findStyleOccurrences(
+        source,
+        "Component.tsx",
+        /.*/,
+        /16.*/
+      );
+
+      expect(occurrences).toHaveLength(2);
+    });
+
+    it("returns empty array when no matches", () => {
+      const source = `
+        function Component() {
+          return <div style={{ color: "blue" }}>Box</div>;
+        }
+      `;
+
+      const occurrences = findStyleOccurrences(
+        source,
+        "Component.tsx",
+        "backgroundColor",
+        "red"
+      );
+
+      expect(occurrences).toHaveLength(0);
+    });
+  });
+});

package/src/service/__tests__/enhance-scanner.test.ts

@@ -0,0 +1,200 @@
+/**
+ * Tests for the enhancement scanner module
+ */
+
+import { describe, it, expect, beforeAll, afterAll } from "vitest";
+import { mkdtemp, writeFile, rm } from "node:fs/promises";
+import { join } from "node:path";
+import { tmpdir } from "node:os";
+import {
+  scanFileForImports,
+  scanFile,
+} from "../enhance/scanner.js";
+
+let tempDir: string;
+
+beforeAll(async () => {
+  tempDir = await mkdtemp(join(tmpdir(), "enhance-scanner-test-"));
+});
+
+afterAll(async () => {
+  await rm(tempDir, { recursive: true, force: true });
+});
+
+async function writeTestFile(name: string, content: string): Promise<string> {
+  const filePath = join(tempDir, name);
+  await writeFile(filePath, content, "utf-8");
+  return filePath;
+}
+
+describe("scanFileForImports", () => {
+  it("should extract named imports", async () => {
+    const filePath = await writeTestFile(
+      "named-imports.tsx",
+      `import { Button, Card } from '@acme/ui';`
+    );
+    const imports = await scanFileForImports(filePath);
+
+    expect(imports).toHaveLength(2);
+    expect(imports[0].componentName).toBe("Button");
+    expect(imports[0].source).toBe("@acme/ui");
+    expect(imports[0].isDefault).toBe(false);
+    expect(imports[1].componentName).toBe("Card");
+  });
+
+  it("should extract default imports", async () => {
+    const filePath = await writeTestFile(
+      "default-import.tsx",
+      `import Button from './Button';`
+    );
+    const imports = await scanFileForImports(filePath);
+
+    expect(imports).toHaveLength(1);
+    expect(imports[0].componentName).toBe("Button");
+    expect(imports[0].isDefault).toBe(true);
+  });
+
+  it("should handle aliased imports", async () => {
+    const filePath = await writeTestFile(
+      "aliased-import.tsx",
+      `import { Button as Btn } from '@acme/ui';`
+    );
+    const imports = await scanFileForImports(filePath);
+
+    expect(imports).toHaveLength(1);
+    expect(imports[0].componentName).toBe("Button");
+    expect(imports[0].localName).toBe("Btn");
+  });
+
+  it("should skip non-component imports (lowercase)", async () => {
+    const filePath = await writeTestFile(
+      "mixed-imports.tsx",
+      `import { useState, useEffect } from 'react';
+import { Button } from '@acme/ui';`
+    );
+    const imports = await scanFileForImports(filePath);
+
+    expect(imports).toHaveLength(1);
+    expect(imports[0].componentName).toBe("Button");
+  });
+});
+
+describe("scanFile", () => {
+  it("should extract basic JSX usage", async () => {
+    const filePath = await writeTestFile(
+      "basic-usage.tsx",
+      `import { Button } from '@acme/ui';
+
+export function App() {
+  return <Button variant="primary">Click me</Button>;
+}`
+    );
+    const { imports, usages } = await scanFile(filePath);
+
+    expect(imports).toHaveLength(1);
+    expect(usages).toHaveLength(1);
+    expect(usages[0].componentName).toBe("Button");
+    expect(usages[0].props.static).toEqual({ variant: "primary" });
+  });
+
+  it("should extract multiple prop types", async () => {
+    const filePath = await writeTestFile(
+      "multiple-props.tsx",
+      `import { Button } from '@acme/ui';
+
+export function App() {
+  return (
+    <Button
+      variant="primary"
+      disabled={true}
+      size={3}
+      onClick={handleClick}
+    />
+  );
+}`
+    );
+    const { usages } = await scanFile(filePath);
+
+    expect(usages).toHaveLength(1);
+    expect(usages[0].props.static).toEqual({
+      variant: "primary",
+      disabled: true,
+      size: 3,
+    });
+    expect(usages[0].props.dynamic).toContain("onClick");
+  });
+
+  it("should track spread props", async () => {
+    const filePath = await writeTestFile(
+      "spread-props.tsx",
+      `import { Button } from '@acme/ui';
+
+export function App() {
+  const buttonProps = { onClick: () => {} };
+  return <Button {...buttonProps} variant="primary" />;
+}`
+    );
+    const { usages } = await scanFile(filePath);
+
+    expect(usages).toHaveLength(1);
+    expect(usages[0].hasSpreadProps).toBe(true);
+    expect(usages[0].props.spreads).toContain("buttonProps");
+  });
+
+  it("should detect conditional rendering", async () => {
+    const filePath = await writeTestFile(
+      "conditional.tsx",
+      `import { Button } from '@acme/ui';
+
+export function App() {
+  const isVisible = true;
+  return <div>{isVisible && <Button />}</div>;
+}`
+    );
+    const { usages } = await scanFile(filePath);
+
+    expect(usages).toHaveLength(1);
+    expect(usages[0].isConditional).toBe(true);
+  });
+
+  it("should extract parent element", async () => {
+    const filePath = await writeTestFile(
+      "nested.tsx",
+      `import { Button, Card } from '@acme/ui';
+
+export function App() {
+  return (
+    <Card>
+      <Button />
+    </Card>
+  );
+}`
+    );
+    const { usages } = await scanFile(filePath);
+    const buttonUsage = usages.find((u) => u.componentName === "Button");
+
+    expect(buttonUsage?.parentElement).toBe("Card");
+  });
+
+  it("should track specific components when provided", async () => {
+    const filePath = await writeTestFile(
+      "specific-components.tsx",
+      `import { Button, Card, Input } from '@acme/ui';
+
+export function App() {
+  return (
+    <div>
+      <Button variant="primary" />
+      <Card title="Hello" />
+      <Input type="text" />
+    </div>
+  );
+}`
+    );
+    const tracked = new Set(["Button", "Card"]);
+    const { usages } = await scanFile(filePath, tracked);
+
+    expect(usages).toHaveLength(2);
+    expect(usages.map((u) => u.componentName).sort()).toEqual(["Button", "Card"]);
+  });
+});