@upstart.gg/vite-plugins 0.0.139

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

@@ -0,0 +1,81 @@
+import { describe, expect, test } from "vitest";
+import { upstartEditor } from "../vite-plugin-upstart-editor/plugin";
+import type { UpstartEditorPluginOptions } from "../vite-plugin-upstart-editor/runtime/types";
+
+const MAIN_ID = "/project/src/main.tsx";
+const OTHER_ID = "/project/src/other.tsx";
+
+type EditorPlugin = {
+  name?: string;
+  transform?: ((code: string, id: string) => unknown) | { handler: (code: string, id: string) => unknown };
+};
+
+function getPlugin(options: UpstartEditorPluginOptions): EditorPlugin {
+  const plugin = upstartEditor.vite(options) as unknown;
+  return (Array.isArray(plugin) ? plugin[0] : plugin) as EditorPlugin;
+}
+
+function runTransform(plugin: EditorPlugin, code: string, id: string): { code: string } | null {
+  const transform = plugin.transform;
+  if (!transform) {
+    throw new Error("Expected transform hook to be defined");
+  }
+
+  const handler = typeof transform === "function" ? transform : transform.handler;
+  const result = handler(code, id);
+
+  if (typeof result === "string") {
+    return { code: result };
+  }
+
+  if (result && typeof result === "object" && "code" in result) {
+    return { code: String((result as { code?: unknown }).code ?? "") };
+  }
+
+  return null;
+}
+
+describe("upstart-editor plugin", () => {
+  test("returns disabled plugin when not enabled", () => {
+    const plugin = getPlugin({ enabled: false });
+    expect(plugin.name).toBe("upstart-editor-disabled");
+  });
+
+  test("injects runtime init into entry file", () => {
+    const plugin = getPlugin({ enabled: true, autoInject: true });
+
+    const result = runTransform(plugin, "console.log('app');", MAIN_ID);
+
+    expect(result).not.toBeNull();
+    expect(result?.code).toContain("initUpstartEditor");
+    expect(result?.code).toContain("DOMContentLoaded");
+  });
+
+  test("does not inject into non-entry files", () => {
+    const plugin = getPlugin({ enabled: true, autoInject: true });
+
+    const result = runTransform(plugin, "console.log('app');", OTHER_ID);
+
+    expect(result).toBeNull();
+  });
+
+  test("does not inject when initUpstartEditor is already present", () => {
+    const plugin = getPlugin({ enabled: true, autoInject: true });
+
+    const result = runTransform(
+      plugin,
+      "import { initUpstartEditor } from 'x'; initUpstartEditor();",
+      MAIN_ID,
+    );
+
+    expect(result).toBeNull();
+  });
+
+  test("does not inject when autoInject is false", () => {
+    const plugin = getPlugin({ enabled: true, autoInject: false });
+
+    const result = runTransform(plugin, "console.log('app');", MAIN_ID);
+
+    expect(result).toBeNull();
+  });
+});

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

@@ -0,0 +1,220 @@
+import { describe, it, expect } from "vitest";
+import { join } from "node:path";
+import { readFileSync } from "node:fs";
+
+interface PageAttributes {
+  path?: string;
+  layout?: string;
+  [key: string]: unknown;
+}
+
+interface PageInfo {
+  filename: string;
+  path: string;
+  layout: string;
+  attributes: PageAttributes;
+}
+
+/**
+ * Extract the attributes export from source code using regex
+ * (Same as in the plugin)
+ */
+function extractAttributesFromSource(code: string): Partial<PageAttributes> {
+  const match = code.match(
+    /export\s+const\s+attributes\s*=\s*definePageAttributes\s*\(\s*(\{[\s\S]*?\})\s*\)\s*;?/,
+  );
+
+  if (!match) {
+    throw new Error("attributes export not found in source code");
+  }
+
+  const objectStr = match[1];
+
+  try {
+    // eslint-disable-next-line no-new-func
+    const obj = new Function(`return ${objectStr}`)() as Partial<PageAttributes>;
+    return obj;
+  } catch (error) {
+    throw new Error(
+      `Failed to parse attributes object: ${error instanceof Error ? error.message : String(error)}`,
+    );
+  }
+}
+
+/**
+ * Extract page attributes from a TypeScript file
+ * (Same as in the plugin, with optional ssrLoadModule)
+ */
+async function extractPageAttributes(filePath: string): Promise<PageInfo> {
+  // For testing, we don't have ssrLoadModule, so it falls back to source parsing
+  const ssrLoadModule = undefined;
+
+  // Fallback: extract from source code
+  try {
+    const code = readFileSync(filePath, "utf-8");
+    const attributes = extractAttributesFromSource(code);
+
+    if (!attributes || typeof attributes !== "object" || !("path" in attributes)) {
+      throw new Error("attributes export not found");
+    }
+
+    const path = attributes.path as string;
+    const layout = (attributes.layout as string) ?? "default";
+
+    return {
+      filename: filePath,
+      path,
+      layout,
+      attributes: attributes as PageAttributes,
+    };
+  } catch (error) {
+    const fullError = error instanceof Error ? error.message : String(error);
+    console.error(`[upstart-routes] Import error for ${filePath}:\n${fullError}`);
+
+    throw new Error(
+      "Page attributes not found or invalid. " +
+        "Make sure to use `export const attributes = definePageAttributes(...)`",
+    );
+  }
+}
+
+describe("vite-plugin-upstart-routes", () => {
+  const fixturesDir = join(__dirname, "fixtures/routes");
+
+  describe("extractPageAttributes", () => {
+    describe("Valid Pages", () => {
+      it("should extract minimal attributes", async () => {
+        const result = await extractPageAttributes(join(fixturesDir, "valid-minimal.tsx"));
+
+        expect(result.path).toBe("/about");
+        expect(result.layout).toBe("default");
+        expect(result.attributes.label).toBe("About Page");
+        expect(result.attributes.title).toBe("About Us");
+      });
+
+      it("should extract full attributes with all fields", async () => {
+        const result = await extractPageAttributes(join(fixturesDir, "valid-full.tsx"));
+
+        expect(result.path).toBe("/contact");
+        expect(result.layout).toBe("sidebar");
+        expect(result.attributes.label).toBe("Contact Us");
+        expect(result.attributes.title).toBe("Contact Our Team");
+        expect(result.attributes.description).toBe("Get in touch with our team");
+        expect(result.attributes.keywords).toBe("contact, email, support");
+        expect(result.attributes.tags).toEqual(["navbar", "important"]);
+        expect(result.attributes.robotsIndexing).toBe(true);
+        expect(result.attributes.language).toBe("en");
+      });
+
+      it("should handle pages with default layout when omitted", async () => {
+        const result = await extractPageAttributes(join(fixturesDir, "default-layout.tsx"));
+
+        expect(result.path).toBe("/home");
+        expect(result.layout).toBe("default");
+        expect(result.attributes.label).toBe("Home");
+        expect(result.attributes.title).toBe("Home Page");
+      });
+
+      it("should handle dynamic routes with params", async () => {
+        const result = await extractPageAttributes(join(fixturesDir, "dynamic-route.tsx"));
+
+        expect(result.path).toBe("/posts/:id");
+        expect(result.layout).toBe("default");
+        expect(result.attributes.label).toBe("Post Detail");
+        expect(result.attributes.title).toBe(null);
+      });
+
+      it("should handle nested objects in attributes", async () => {
+        const result = await extractPageAttributes(join(fixturesDir, "with-nested-objects.tsx"));
+
+        expect(result.path).toBe("/advanced");
+        expect(result.attributes.label).toBe("Advanced Page");
+        expect(result.attributes.title).toBe("Advanced Features");
+        expect(result.attributes.tags).toEqual(["admin", "advanced"]);
+        expect(result.attributes.additionalTags).toEqual({
+          headTags: "<meta name='custom' content='value' />",
+          bodyTags: "<script>console.log('test')</script>",
+        });
+      });
+
+      it("should handle comments in attributes", async () => {
+        const result = await extractPageAttributes(join(fixturesDir, "with-comments.tsx"));
+
+        expect(result.path).toBe("/services");
+        expect(result.attributes.label).toBe("Services");
+        expect(result.attributes.title).toBe("Our Services");
+        expect(result.attributes.description).toBe("Check out our services");
+        expect(result.attributes.tags).toEqual(["navbar", "featured"]);
+      });
+    });
+
+    describe("Error Cases - Fail Fast", () => {
+      it("should throw error when path is missing", async () => {
+        await expect(extractPageAttributes(join(fixturesDir, "missing-path.tsx"))).rejects.toThrow(
+          /Page attributes not found or invalid/,
+        );
+      });
+
+      it("should throw error when attributes export is missing", async () => {
+        await expect(extractPageAttributes(join(fixturesDir, "missing-attributes.tsx"))).rejects.toThrow(
+          /Page attributes not found or invalid/,
+        );
+      });
+    });
+
+    describe("Array Handling", () => {
+      it("should extract array values correctly", async () => {
+        const result = await extractPageAttributes(join(fixturesDir, "valid-full.tsx"));
+
+        expect(Array.isArray(result.attributes.tags)).toBe(true);
+        expect(result.attributes.tags).toHaveLength(2);
+        expect(result.attributes.tags).toContain("navbar");
+        expect(result.attributes.tags).toContain("important");
+      });
+    });
+
+    describe("Layout Assignment", () => {
+      it("should use explicit layout when specified", async () => {
+        const result = await extractPageAttributes(join(fixturesDir, "valid-full.tsx"));
+        expect(result.layout).toBe("sidebar");
+      });
+
+      it("should default to 'default' layout when not specified", async () => {
+        const result = await extractPageAttributes(join(fixturesDir, "valid-minimal.tsx"));
+        expect(result.layout).toBe("default");
+      });
+    });
+
+    describe("Path Formats", () => {
+      it("should handle root path", async () => {
+        const result = await extractPageAttributes(join(fixturesDir, "valid-minimal.tsx"));
+        expect(result.path).toMatch(/^\//);
+      });
+
+      it("should handle nested paths", async () => {
+        const result = await extractPageAttributes(join(fixturesDir, "valid-full.tsx"));
+        expect(result.path).toBe("/contact");
+      });
+
+      it("should handle dynamic parameters", async () => {
+        const result = await extractPageAttributes(join(fixturesDir, "dynamic-route.tsx"));
+        expect(result.path).toContain(":id");
+        expect(result.path).toBe("/posts/:id");
+      });
+    });
+
+    describe("Edge Cases", () => {
+      it("should preserve string values exactly", async () => {
+        const result = await extractPageAttributes(join(fixturesDir, "valid-full.tsx"));
+        expect(typeof result.attributes.description).toBe("string");
+        expect(result.attributes.description).toBe("Get in touch with our team");
+      });
+
+      it("should preserve boolean values", async () => {
+        const result = await extractPageAttributes(join(fixturesDir, "valid-full.tsx"));
+        expect(typeof result.attributes.robotsIndexing).toBe("boolean");
+        expect(result.attributes.robotsIndexing).toBe(true);
+      });
+    });
+  });
+});

package/src/upstart-editor-api.ts

@@ -0,0 +1,204 @@
+import MagicString from "magic-string";
+import fs from "fs/promises";
+import path from "path";
+import type { EditableEntry } from "./vite-plugin-upstart-attrs";
+
+export interface EditableRegistry {
+  version: number;
+  generatedAt: string;
+  elements: Record<string, EditableEntry>;
+}
+
+export interface EditResult {
+  success: boolean;
+  error?: string;
+}
+
+export class UpstartEditorAPI {
+  private registry: EditableRegistry | null = null;
+  private projectRoot: string;
+  private registryPath: string;
+
+  constructor(projectRoot: string, registryPath: string) {
+    this.projectRoot = projectRoot;
+    this.registryPath = registryPath;
+  }
+
+  /**
+   * Load the registry from disk
+   */
+  async loadRegistry(): Promise<void> {
+    const content = await fs.readFile(this.registryPath, "utf-8");
+    this.registry = JSON.parse(content);
+  }
+
+  /**
+   * Get the current registry (for testing/debugging)
+   */
+  getRegistry(): EditableRegistry | null {
+    return this.registry;
+  }
+
+  /**
+   * Set the registry directly (for testing)
+   */
+  setRegistry(registry: EditableRegistry): void {
+    this.registry = registry;
+  }
+
+  /**
+   * Edit the text content of an element
+   */
+  async editText(id: string, newContent: string): Promise<EditResult> {
+    if (!this.registry) {
+      try {
+        await this.loadRegistry();
+      } catch (err) {
+        return { success: false, error: `Failed to load registry: ${err}` };
+      }
+    }
+
+    const entry = this.registry!.elements[id];
+    if (!entry) {
+      return { success: false, error: `Element ${id} not found in registry` };
+    }
+
+    if (entry.type !== "text") {
+      return { success: false, error: `Element ${id} is not a text element (type: ${entry.type})` };
+    }
+
+    return this.applyEdit(id, entry, newContent);
+  }
+
+  /**
+   * Edit the className of an element
+   */
+  async editClassName(id: string, newClassName: string): Promise<EditResult> {
+    if (!this.registry) {
+      try {
+        await this.loadRegistry();
+      } catch (err) {
+        return { success: false, error: `Failed to load registry: ${err}` };
+      }
+    }
+
+    const entry = this.registry!.elements[id];
+    if (!entry) {
+      return { success: false, error: `Element ${id} not found in registry` };
+    }
+
+    if (entry.type !== "className") {
+      return { success: false, error: `Element ${id} is not a className element (type: ${entry.type})` };
+    }
+
+    return this.applyEdit(id, entry, newClassName);
+  }
+
+  /**
+   * Apply an edit to a source file
+   */
+  private async applyEdit(
+    id: string,
+    entry: EditableEntry,
+    newContent: string
+  ): Promise<EditResult> {
+    const filePath = path.join(this.projectRoot, entry.file);
+
+    try {
+      const code = await fs.readFile(filePath, "utf-8");
+
+      // Verify content at expected location
+      const currentContent = code.slice(entry.startOffset, entry.endOffset);
+
+      let actualStart = entry.startOffset;
+      let actualEnd = entry.endOffset;
+
+      if (currentContent !== entry.originalContent) {
+        // Content has shifted - try to find it by searching
+        const searchIndex = code.indexOf(entry.originalContent);
+        if (searchIndex === -1) {
+          return {
+            success: false,
+            error: `Original content "${entry.originalContent}" not found in file ${entry.file}. The file may have been modified.`,
+          };
+        }
+        actualStart = searchIndex;
+        actualEnd = searchIndex + entry.originalContent.length;
+      }
+
+      // Apply the edit using MagicString
+      const s = new MagicString(code);
+      s.overwrite(actualStart, actualEnd, newContent);
+
+      // Write the modified file
+      await fs.writeFile(filePath, s.toString());
+
+      // Calculate the length difference for offset adjustments
+      const lengthDiff = newContent.length - entry.originalContent.length;
+
+      // Update the registry entry
+      entry.startOffset = actualStart;
+      entry.endOffset = actualStart + newContent.length;
+      entry.originalContent = newContent;
+
+      // Shift all subsequent entries in the same file
+      for (const [otherId, otherEntry] of Object.entries(this.registry!.elements)) {
+        if (otherId !== id && otherEntry.file === entry.file && otherEntry.startOffset > actualStart) {
+          otherEntry.startOffset += lengthDiff;
+          otherEntry.endOffset += lengthDiff;
+        }
+      }
+
+      // Save the updated registry
+      await fs.writeFile(
+        this.registryPath,
+        JSON.stringify(this.registry, null, 2)
+      );
+
+      return { success: true };
+    } catch (err) {
+      return { success: false, error: String(err) };
+    }
+  }
+
+  /**
+   * Get element info by ID
+   */
+  getElement(id: string): EditableEntry | undefined {
+    return this.registry?.elements[id];
+  }
+
+  /**
+   * Get all elements of a specific type
+   */
+  getElementsByType(type: "text" | "className"): Record<string, EditableEntry> {
+    if (!this.registry) {
+      return {};
+    }
+
+    const result: Record<string, EditableEntry> = {};
+    for (const [id, entry] of Object.entries(this.registry.elements)) {
+      if (entry.type === type) {
+        result[id] = entry;
+      }
+    }
+    return result;
+  }
+
+  /**
+   * Get all elements in a specific file
+   */
+  getElementsByFile(file: string): Record<string, EditableEntry> {
+    if (!this.registry) {
+      return {};
+    }
+
+    const result: Record<string, EditableEntry> = {};
+    for (const [id, entry] of Object.entries(this.registry.elements)) {
+      if (entry.file === file) {
+        result[id] = entry;
+      }
+    }
+    return result;
+  }
+}