@upstart.gg/vite-plugins 0.1.41 → 0.1.42

package/src/upstart-editor-api.ts

@@ -1,9 +1,84 @@
 import MagicString from "magic-string";
+import { parseSync } from "oxc-parser";
 import fs from "fs/promises";
 import path from "path";
 import z from "zod";
 import type { EditableEntry } from "./vite-plugin-upstart-attrs";
 
+/**
+ * Escape user-typed text so it can be safely written as the BODY of a JS string
+ * literal delimited by `quote` (" ' or `). Escapes the delimiter, backslashes,
+ * line terminators, and — for template literals — `${` interpolation starts.
+ * The surrounding quotes themselves are NOT included.
+ */
+export function escapeStringLiteralBody(value: string, quote: string): string {
+  let out = value.replace(/\\/g, "\\\\");
+  if (quote === "`") {
+    out = out.replace(/`/g, "\\`").replace(/\$\{/g, "\\${");
+  } else {
+    out = out.split(quote).join("\\" + quote);
+  }
+  return out.replace(/\n/g, "\\n").replace(/\r/g, "\\r");
+}
+
+interface AstNode {
+  type: string;
+  start: number;
+  end: number;
+  [key: string]: unknown;
+}
+
+/**
+ * Locate the inline ArrayExpression that starts at `offset` by re-parsing the file.
+ * Returns its bounds and element nodes (elisions become null), or null if not found.
+ */
+function findArrayExpressionAt(
+  code: string,
+  filePath: string,
+  offset: number,
+): { start: number; end: number; elements: (AstNode | null)[] } | null {
+  const ast = parseSync(filePath, code, { sourceType: "module" });
+  if (!ast.program) return null;
+
+  let found: AstNode | null = null;
+  const visit = (node: unknown): void => {
+    if (found || !node || typeof node !== "object") return;
+    if (Array.isArray(node)) {
+      for (const child of node) visit(child);
+      return;
+    }
+    const n = node as AstNode;
+    if (n.type === "ArrayExpression" && n.start === offset) {
+      found = n;
+      return;
+    }
+    for (const key in n) {
+      if (key === "type" || key === "start" || key === "end") continue;
+      const value = n[key];
+      if (value && typeof value === "object") visit(value);
+    }
+  };
+  visit(ast.program);
+
+  if (!found) return null;
+  return {
+    start: (found as AstNode).start,
+    end: (found as AstNode).end,
+    elements: ((found as AstNode).elements as (AstNode | null)[]) ?? [],
+  };
+}
+
+/** Infer the quote char used by the array's string literals (defaults to "). */
+function inferArrayQuote(code: string, elements: AstNode[]): string {
+  for (const el of elements) {
+    if (el.type === "Literal" && typeof el.value === "string") {
+      const q = code[el.start];
+      if (q === '"' || q === "'" || q === "`") return q;
+    }
+  }
+  return '"';
+}
+
 export const payloadEditText = z.object({
   action: z.literal("editText"),
   language: z
@@ -33,6 +108,44 @@ export const payloadEditClassName = z.object({
 
 export type PayloadEditClassName = z.infer<typeof payloadEditClassName>;
 
+export const payloadEditImage = z.object({
+  action: z.literal("editImage"),
+  id: z.string().min(1),
+  // New src value to write into the <img> source, e.g. "/images/fashion-10.webp"
+  src: z.string().min(1),
+});
+
+export type PayloadEditImage = z.infer<typeof payloadEditImage>;
+
+// arrayId is "<relativeFile>:<arrayStartOffset>" — identifies the inline array literal.
+export const payloadArrayItemAdd = z.object({
+  action: z.literal("arrayItemAdd"),
+  arrayId: z.string().min(1),
+  // Default content for the inserted element (the editor sends "New item").
+  content: z.string().default("New item"),
+});
+
+export type PayloadArrayItemAdd = z.infer<typeof payloadArrayItemAdd>;
+
+export const payloadArrayItemDelete = z.object({
+  action: z.literal("arrayItemDelete"),
+  arrayId: z.string().min(1),
+  index: z.number().int().min(0),
+});
+
+export type PayloadArrayItemDelete = z.infer<typeof payloadArrayItemDelete>;
+
+// Replace the entire contents of an inline array literal in one edit — used by the
+// editor's batched "apply" (✓) control so a whole add/delete session is a single
+// source change + rebuild instead of one per item.
+export const payloadArraySet = z.object({
+  action: z.literal("arraySet"),
+  arrayId: z.string().min(1),
+  items: z.array(z.string()).min(1),
+});
+
+export type PayloadArraySet = z.infer<typeof payloadArraySet>;
+
 export interface EditableRegistry {
   version: number;
   generatedAt: string;
@@ -168,7 +281,10 @@ export class UpstartEditorAPI {
     if (entry.type === "mixed-text") {
       return this.applyMixedTextEdit(id, entry, content);
     }
-    return this.applyEdit(id, entry, content);
+    // Text entries that map to a JS string literal (e.g. inline array items) must be
+    // escaped for the literal's quote style before being written between the quotes.
+    const finalContent = entry.quote ? escapeStringLiteralBody(content, entry.quote) : content;
+    return this.applyEdit(id, entry, finalContent);
   }
 
   /**
@@ -200,6 +316,192 @@ export class UpstartEditorAPI {
     return this.applyEdit(id, entry, newClassName);
   }
 
+  /**
+   * Edit the `src` of an <img> element directly in the source TSX file.
+   * The byte range points at the string literal between the quotes, so we only
+   * rewrite the path itself. Copying the asset into the project is handled by
+   * the caller (the sandbox server, which has bucket access).
+   */
+  async editImage(params: PayloadEditImage): Promise<EditResult> {
+    const parsed = payloadEditImage.safeParse(params);
+    if (!parsed.success) {
+      return { success: false, error: `Invalid payload: ${parsed.error.message}` };
+    }
+    const { id, src } = parsed.data;
+    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 !== "image") {
+      return { success: false, error: `Element ${id} is not an image element (type: ${entry.type})` };
+    }
+
+    return this.applyEdit(id, entry, src);
+  }
+
+  /**
+   * Add a new element to an inline array literal (e.g. `["a", "b"]`), used by the
+   * editor's "+" control on editable .map() lists. The inserted element matches
+   * the quote style of the existing string elements and reuses their separator so
+   * multi-line indentation is preserved.
+   */
+  async arrayItemAdd(params: PayloadArrayItemAdd): Promise<EditResult> {
+    const parsed = payloadArrayItemAdd.safeParse(params);
+    if (!parsed.success) {
+      return { success: false, error: `Invalid payload: ${parsed.error.message}` };
+    }
+    const { arrayId, content } = parsed.data;
+    const loc = this.resolveArrayId(arrayId);
+    if (!loc) return { success: false, error: `Invalid arrayId: ${arrayId}` };
+
+    try {
+      const code = await fs.readFile(loc.filePath, "utf-8");
+      const arr = findArrayExpressionAt(code, loc.relativeFile, loc.offset);
+      if (!arr) {
+        return { success: false, error: `Array not found at ${arrayId}. The file may have been modified.` };
+      }
+      const els = arr.elements.filter((e): e is AstNode => e !== null);
+      const quote = inferArrayQuote(code, els);
+      const literal = `${quote}${escapeStringLiteralBody(content, quote)}${quote}`;
+
+      const s = new MagicString(code);
+      if (els.length === 0) {
+        s.appendLeft(arr.start + 1, literal);
+      } else {
+        const last = els[els.length - 1];
+        // Reuse the separator between the last two elements (keeps multi-line
+        // indentation); fall back to ", " for a single-element array.
+        const sep = els.length >= 2 ? code.slice(els[els.length - 2].end, last.start) : ", ";
+        s.appendLeft(last.end, `${sep}${literal}`);
+      }
+
+      await fs.writeFile(loc.filePath, s.toString());
+      // Element count changed — drop the cached registry so it reloads after the
+      // dev pipeline re-transforms the file.
+      this.registry = null;
+      return { success: true, filePath: loc.filePath };
+    } catch (err) {
+      return { success: false, error: String(err) };
+    }
+  }
+
+  /**
+   * Delete the element at `index` from an inline array literal. Refuses to remove
+   * the last remaining element (which would leave an empty, un-addressable array).
+   */
+  async arrayItemDelete(params: PayloadArrayItemDelete): Promise<EditResult> {
+    const parsed = payloadArrayItemDelete.safeParse(params);
+    if (!parsed.success) {
+      return { success: false, error: `Invalid payload: ${parsed.error.message}` };
+    }
+    const { arrayId, index } = parsed.data;
+    const loc = this.resolveArrayId(arrayId);
+    if (!loc) return { success: false, error: `Invalid arrayId: ${arrayId}` };
+
+    try {
+      const code = await fs.readFile(loc.filePath, "utf-8");
+      const arr = findArrayExpressionAt(code, loc.relativeFile, loc.offset);
+      if (!arr) {
+        return { success: false, error: `Array not found at ${arrayId}. The file may have been modified.` };
+      }
+      const els = arr.elements.filter((e): e is AstNode => e !== null);
+      if (index >= els.length) {
+        return { success: false, error: `Index ${index} out of range for array at ${arrayId}` };
+      }
+      if (els.length <= 1) {
+        return { success: false, error: "Cannot delete the last remaining array item" };
+      }
+
+      const s = new MagicString(code);
+      const el = els[index];
+      if (index > 0) {
+        // Remove the separator before the element + the element itself.
+        s.remove(els[index - 1].end, el.end);
+      } else {
+        // First element: remove it + the separator after it.
+        s.remove(el.start, els[1].start);
+      }
+
+      await fs.writeFile(loc.filePath, s.toString());
+      this.registry = null;
+      return { success: true, filePath: loc.filePath };
+    } catch (err) {
+      return { success: false, error: String(err) };
+    }
+  }
+
+  /**
+   * Replace the entire contents of an inline array literal with `items`, preserving
+   * the source's quote style and multi-line indentation. Used by the editor's
+   * batched ✓ apply so a whole add/delete session is a single edit + rebuild.
+   */
+  async arraySet(params: PayloadArraySet): Promise<EditResult> {
+    const parsed = payloadArraySet.safeParse(params);
+    if (!parsed.success) {
+      return { success: false, error: `Invalid payload: ${parsed.error.message}` };
+    }
+    const { arrayId, items } = parsed.data;
+    const loc = this.resolveArrayId(arrayId);
+    if (!loc) return { success: false, error: `Invalid arrayId: ${arrayId}` };
+
+    try {
+      const code = await fs.readFile(loc.filePath, "utf-8");
+      const arr = findArrayExpressionAt(code, loc.relativeFile, loc.offset);
+      if (!arr) {
+        return { success: false, error: `Array not found at ${arrayId}. The file may have been modified.` };
+      }
+      const els = arr.elements.filter((e): e is AstNode => e !== null);
+      const quote = inferArrayQuote(code, els);
+      const literal = (v: string) => `${quote}${escapeStringLiteralBody(v, quote)}${quote}`;
+
+      const innerStart = arr.start + 1;
+      const innerEnd = arr.end - 1;
+      const innerSrc = code.slice(innerStart, innerEnd);
+
+      let inner: string;
+      if (innerSrc.includes("\n")) {
+        // Multi-line: reuse the item indentation and the closing-bracket indent,
+        // and keep a trailing comma (matches the common prettier/biome style).
+        const itemIndent = innerSrc.match(/\n([ \t]*)\S/)?.[1] ?? "  ";
+        const outerIndent = innerSrc.match(/\n([ \t]*)$/)?.[1] ?? "";
+        inner = `\n${items.map((it) => itemIndent + literal(it)).join(",\n")},\n${outerIndent}`;
+      } else {
+        inner = items.map(literal).join(", ");
+      }
+
+      const s = new MagicString(code);
+      if (innerStart === innerEnd) {
+        s.appendLeft(innerStart, inner);
+      } else {
+        s.overwrite(innerStart, innerEnd, inner);
+      }
+      await fs.writeFile(loc.filePath, s.toString());
+      this.registry = null;
+      return { success: true, filePath: loc.filePath };
+    } catch (err) {
+      return { success: false, error: String(err) };
+    }
+  }
+
+  /** Parse "<relativeFile>:<offset>" into an absolute path + numeric offset. */
+  private resolveArrayId(arrayId: string): { filePath: string; relativeFile: string; offset: number } | null {
+    const sep = arrayId.lastIndexOf(":");
+    if (sep < 0) return null;
+    const relativeFile = arrayId.slice(0, sep);
+    const offset = Number(arrayId.slice(sep + 1));
+    if (!relativeFile || !Number.isInteger(offset) || offset < 0) return null;
+    return { filePath: path.join(this.projectRoot, relativeFile), relativeFile, offset };
+  }
+
   /**
    * Apply an edit to a source file
    */
@@ -216,8 +518,10 @@ export class UpstartEditorAPI {
       let actualEnd = entry.endOffset;
 
       if (currentContent !== entry.originalContent) {
-        // Content has shifted - try to find it by searching
-        const searchIndex = code.indexOf(entry.originalContent);
+        // Content has shifted - try to find it by searching. An empty original
+        // can't be located by search (indexOf("") === 0 would be a false match),
+        // so treat it as not found rather than inserting at offset 0.
+        const searchIndex = entry.originalContent !== "" ? code.indexOf(entry.originalContent) : -1;
         if (searchIndex === -1) {
           return {
             success: false,
@@ -228,9 +532,14 @@ export class UpstartEditorAPI {
         actualEnd = searchIndex + entry.originalContent.length;
       }
 
-      // Apply the edit using MagicString
+      // Apply the edit using MagicString. A zero-length range (e.g. an empty
+      // string literal "") cannot be overwritten — insert the content instead.
       const s = new MagicString(code);
-      s.overwrite(actualStart, actualEnd, newContent);
+      if (actualStart === actualEnd) {
+        s.appendLeft(actualStart, newContent);
+      } else {
+        s.overwrite(actualStart, actualEnd, newContent);
+      }
 
       // Write the modified file
       await fs.writeFile(filePath, s.toString());

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

@@ -40,6 +40,8 @@ interface LoopContext {
   itemName: string;
   indexName: string | null;
   arrayExpr: string;
+  /** The `.map()` callee object AST node — used to edit inline array-literal items in place. */
+  arrayNode: Node | null;
 }
 
 interface I18nKeyInfo {
@@ -68,12 +70,16 @@ export interface EditableSegment {
 // Registry entry for editable elements (text, rich-text, className, mixed-text)
 export interface EditableEntry {
   file: string;
-  type: "text" | "rich-text" | "className" | "mixed-text";
+  type: "text" | "rich-text" | "className" | "mixed-text" | "image";
   startOffset: number;
   endOffset: number;
   originalContent: string;
   // Only present for mixed-text entries
   segments?: EditableSegment[];
+  // For text entries that map to a JS string literal (e.g. an inline array item),
+  // the source quote character (" ' or `). When set, the server escapes the new
+  // content for that quote style before writing it back between the quotes.
+  quote?: string;
   context: { parentTag: string };
 }
 
@@ -435,9 +441,43 @@ export function transformWithOxc(code: string, filePath: string) {
             attributes.push(`data-upstart-mixed-template="${escapeProp(templateStr.trim())}"`);
           }
         }
-        // Step 3: Non-leaf elements with visible text content (expressions, mixed content)
-        else if (!hasI18n && hasVisibleTextContent(jsxNode)) {
-          attributes.push('data-upstart-editable-text="false"');
+        // Step 2d: Inline array-literal map item — <span>{item}</span> where `item` is the
+        // param of a .map() over an inline array of literals. Each instance edits the
+        // matching source string literal directly, addressed via the loop index.
+        else if (!hasI18n) {
+          const arrayItem = detectArrayLiteralItem(jsxNode, state);
+          if (arrayItem) {
+            attributes.push('data-upstart-editable-text="true"');
+            // "plain" mode + a data-upstart-id routes saves through editTextDirect while
+            // keeping the editor plain-text (no rich HTML written into the string literal).
+            attributes.push('data-upstart-editable-text-mode="plain"');
+
+            for (const el of arrayItem.elements) {
+              editableRegistry.set(el.id, {
+                file: state.filePath,
+                type: "text",
+                startOffset: el.startOffset,
+                endOffset: el.endOffset,
+                originalContent: el.originalContent,
+                quote: el.quote,
+                context: { parentTag: tagName || "unknown" },
+              });
+            }
+
+            // Each rendered instance resolves its own id via the loop index, so the
+            // edit targets the correct array element in source.
+            const idsArray = `[${arrayItem.elements.map((e) => JSON.stringify(e.id)).join(",")}]`;
+            attributes.push(`data-upstart-id={${idsArray}[${arrayItem.indexName}]}`);
+
+            // Array identity + per-instance index drive the editor's add/delete (×/+)
+            // controls, which add or remove elements of the inline array literal.
+            const arrayId = `${state.filePath}:${arrayItem.arrayStart}`;
+            attributes.push(`data-upstart-array-id="${arrayId}"`);
+            attributes.push(`data-upstart-array-index={${arrayItem.indexName}}`);
+          } else if (hasVisibleTextContent(jsxNode)) {
+            // Step 3: Non-leaf / dynamic text we cannot edit in place.
+            attributes.push('data-upstart-editable-text="false"');
+          }
         }
 
         // Track className attribute if it's a string literal
@@ -467,6 +507,36 @@ export function transformWithOxc(code: string, filePath: string) {
           attributes.push(`data-upstart-classname-id="${id}"`);
         }
 
+        // Track <img src="..."> when src is a string literal → makes the image
+        // swappable from the editor (mirrors the className tracking above).
+        if (tagName === "img") {
+          const srcAttr = opening.attributes.find(
+            (attr): attr is JSXAttribute =>
+              attr.type === "JSXAttribute" &&
+              attr.name.type === "JSXIdentifier" &&
+              attr.name.name === "src" &&
+              attr.value?.type === "Literal" &&
+              typeof (attr.value as any).value === "string",
+          );
+
+          if (srcAttr && srcAttr.value && hasRange(srcAttr.value)) {
+            const id = generateId(state.filePath, srcAttr.value);
+            const srcValue = (srcAttr.value as any).value as string;
+
+            // +1 / -1 to exclude the surrounding quotes, like className above
+            editableRegistry.set(id, {
+              file: state.filePath,
+              type: "image",
+              startOffset: srcAttr.value.start + 1,
+              endOffset: srcAttr.value.end - 1,
+              originalContent: srcValue,
+              context: { parentTag: tagName || "unknown" },
+            });
+
+            attributes.push(`data-upstart-image-id="${id}"`);
+          }
+        }
+
         // Process PascalCase components for additional tracking
         if (tagName && /^[A-Z]/.test(tagName)) {
           // File and component tracking
@@ -740,6 +810,7 @@ function detectAndPatchMapCall(node: CallExpression, state: TransformState): Loo
         itemName,
         indexName,
         arrayExpr: exprToString(node.callee.object as Expression, state.code),
+        arrayNode: node.callee.object as Node,
       };
     }
 
@@ -763,6 +834,7 @@ function detectAndPatchMapCall(node: CallExpression, state: TransformState): Loo
     itemName,
     indexName,
     arrayExpr,
+    arrayNode: node.callee.object as Node,
   };
 }
 
@@ -1313,4 +1385,82 @@ function hasVisibleTextContent(jsxElement: JSXElement): boolean {
   return false;
 }
 
+// Per-element data needed to make an inline array-literal map item editable.
+interface ArrayLiteralItemInfo {
+  /** Loop index variable name used to pick the matching id at runtime, e.g. "__i". */
+  indexName: string;
+  /** Source start offset of the `[` — identifies the array for add/delete operations. */
+  arrayStart: number;
+  elements: {
+    id: string;
+    startOffset: number;
+    endOffset: number;
+    originalContent: string;
+    /** Source quote char for string literals (" ' or `); undefined for numbers. */
+    quote?: string;
+  }[];
+}
+
+// Detect `<span>{item}</span>` where `item` is the item param of an enclosing
+// `.map()` over an INLINE array literal of string/number literals, e.g.:
+//   {["TypeScript", "React"].map((item) => <span>{item}</span>)}
+// In that case each rendered instance maps 1:1 (via the loop index) to a source
+// string literal we can edit directly. Returns null for anything not statically
+// resolvable (array from props/variable, transformed item, non-literal elements).
+function detectArrayLiteralItem(jsxElement: JSXElement, state: TransformState): ArrayLiteralItemInfo | null {
+  // The element's only meaningful child must be a single {identifier} expression.
+  let identName: string | null = null;
+  for (const child of jsxElement.children) {
+    if (child.type === "JSXText") {
+      if (normalizeJSXText((child as any).value as string).length > 0) return null;
+      continue;
+    }
+    if (child.type === "JSXExpressionContainer") {
+      const expr = (child as any).expression;
+      if (!expr || expr.type === "JSXEmptyExpression") continue;
+      if (expr.type !== "Identifier") return null;
+      if (identName !== null) return null; // more than one expression — not a plain item render
+      identName = expr.name as string;
+      continue;
+    }
+    // Any nested element/fragment/spread disqualifies.
+    return null;
+  }
+  if (!identName) return null;
+
+  // Find the enclosing loop whose item param matches the identifier (innermost first).
+  for (let i = state.loopStack.length - 1; i >= 0; i--) {
+    const loop = state.loopStack[i];
+    if (loop.itemName !== identName) continue;
+    // Need a stable per-instance index and an inline array of literals.
+    if (!loop.indexName) return null;
+    const arr = loop.arrayNode as any;
+    if (!arr || arr.type !== "ArrayExpression") return null;
+
+    const elements: ArrayLiteralItemInfo["elements"] = [];
+    for (const el of arr.elements) {
+      // Only plain string/number literals can be rewritten in place.
+      if (!el || el.type !== "Literal" || !hasRange(el)) return null;
+      const value = (el as any).value;
+      if (typeof value !== "string" && typeof value !== "number") return null;
+      // For strings, the inner range excludes the surrounding quotes so we only
+      // overwrite the content (mirrors how <img src> edits work).
+      const isString = typeof value === "string";
+      const startOffset = isString ? el.start + 1 : el.start;
+      const endOffset = isString ? el.end - 1 : el.end;
+      elements.push({
+        id: `${state.filePath}:${el.start}`,
+        startOffset,
+        endOffset,
+        originalContent: state.code.slice(startOffset, endOffset),
+        // The opening quote sits at el.start for string literals.
+        quote: isString ? state.code[el.start] : undefined,
+      });
+    }
+    if (elements.length === 0) return null;
+    return { indexName: loop.indexName, arrayStart: arr.start, elements };
+  }
+  return null;
+}
+
 export default upstartEditor.vite;