@upstart.gg/vite-plugins 0.0.37

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/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;
+  }
+}