@upstart.gg/vite-plugins 0.1.29 → 0.1.31

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

@@ -3,6 +3,7 @@ import { parseSync } from "oxc-parser";
 import { walk } from "zimmerframe";
 import MagicString from "magic-string";
 import path from "path";
+import fs from "node:fs";
 import type {
   Program,
   Node,
@@ -52,15 +53,27 @@ interface I18nKeyInfo {
   keyExpr: string | null;
   /** Source expression for namespace when dynamic, null when static */
   nsExpr: string | null;
+  /** Variable names from the `values` prop (e.g. ["year"] from values={{ year }}) */
+  valueKeys?: string[];
 }
 
-// Registry entry for editable elements (text and className)
+// A segment of a mixed-text element: either static text or a JSX expression
+export interface EditableSegment {
+  type: "text" | "expr";
+  // For "text": the raw JSX text value (with whitespace/newlines as in source)
+  // For "expr": the full expression source including braces, e.g. "{new Date().getFullYear()}"
+  raw: string;
+}
+
+// Registry entry for editable elements (text, rich-text, className, mixed-text)
 export interface EditableEntry {
   file: string;
-  type: "text" | "className";
+  type: "text" | "rich-text" | "className" | "mixed-text";
   startOffset: number;
   endOffset: number;
   originalContent: string;
+  // Only present for mixed-text entries
+  segments?: EditableSegment[];
   context: { parentTag: string };
 }
 
@@ -102,6 +115,27 @@ export const upstartEditor = createUnplugin<Options>((options) => {
 
   const emitRegistry = options.emitRegistry ?? true;
   let root = process.cwd();
+  let isDevMode = false;
+  let devWriteTimer: ReturnType<typeof setTimeout> | null = null;
+
+  const flushDevRegistry = () => {
+    if (!isDevMode || editableRegistry.size === 0) return;
+    const registryDir = path.join(root, "build", "server");
+    const registryPath = path.join(registryDir, "upstart-registry.json");
+    const registry = {
+      version: 1,
+      generatedAt: new Date().toISOString(),
+      elements: Object.fromEntries(editableRegistry),
+    };
+    fs.mkdirSync(registryDir, { recursive: true });
+    fs.writeFileSync(registryPath, JSON.stringify(registry, null, 2));
+  };
+
+  const scheduleDevRegistryWrite = () => {
+    if (!isDevMode) return;
+    if (devWriteTimer) clearTimeout(devWriteTimer);
+    devWriteTimer = setTimeout(flushDevRegistry, 150);
+  };
 
   return {
     name: "upstart-editor",
@@ -110,6 +144,10 @@ export const upstartEditor = createUnplugin<Options>((options) => {
     vite: {
       configResolved(config) {
         root = config.root;
+        isDevMode = config.command === "serve";
+      },
+      configureServer(_server) {
+        isDevMode = true;
       },
       generateBundle() {
         if (!emitRegistry || editableRegistry.size === 0) {
@@ -151,6 +189,7 @@ export const upstartEditor = createUnplugin<Options>((options) => {
           return null;
         }
 
+        scheduleDevRegistryWrite();
         return {
           code: result.code,
           map: result.map,
@@ -270,7 +309,7 @@ export function transformWithOxc(code: string, filePath: string) {
         const allI18nKeys = [...transChildren, ...tCallChildren];
         const hasI18n = allI18nKeys.length > 0;
 
-        if (hasI18n) {
+        if (hasI18n && !hasMixedNonI18nContent(jsxNode, state.code, state, state.constants)) {
           attributes.push('data-upstart-editable-text="true"');
           attributes.push('data-upstart-editable-text-mode="plain"');
 
@@ -287,12 +326,18 @@ export function transformWithOxc(code: string, filePath: string) {
             const keys = allI18nKeys.map((t: I18nKeyInfo) => escapeProp(t.fullKey)).join(",");
             attributes.push(`data-upstart-i18n="${keys}"`);
           }
+
+          const allValueKeys = [...new Set(allI18nKeys.flatMap((t) => t.valueKeys ?? []))];
+          if (allValueKeys.length > 0) {
+            attributes.push(`data-i18n-values="${allValueKeys.join(",")}"`);
+          }
         }
 
-        // Step 2: Text leaf elements — registry tracking + non-editable flag
+        // Step 2a: Text leaf elements — plain text, editable directly in the TSX source
         if (isTextLeafElement(jsxNode)) {
           if (!hasI18n) {
-            attributes.push('data-upstart-editable-text="false"');
+            attributes.push('data-upstart-editable-text="true"');
+            attributes.push('data-upstart-editable-text-mode="direct"');
           }
 
           // Find the actual JSXText node to track its location
@@ -318,6 +363,78 @@ export function transformWithOxc(code: string, filePath: string) {
             attributes.push(`data-upstart-id="${id}"`);
           }
         }
+        // Step 2b: Almost-leaf elements — inline formatting tags only, editable via InspectorPanel
+        else if (!hasI18n && isAlmostLeafElement(jsxNode)) {
+          attributes.push('data-upstart-editable-text="true"');
+          attributes.push('data-upstart-editable-text-mode="rich-panel"');
+
+          // Track the full children range so the server can overwrite them in the TSX source
+          const children = jsxNode.children.filter((c) => hasRange(c));
+          const firstChild = children[0];
+          const lastChild = children[children.length - 1];
+
+          if (firstChild && lastChild && hasRange(firstChild) && hasRange(lastChild)) {
+            const id = generateId(state.filePath, firstChild);
+            const originalContent = state.code.slice(firstChild.start, lastChild.end);
+
+            editableRegistry.set(id, {
+              file: state.filePath,
+              type: "rich-text",
+              startOffset: firstChild.start,
+              endOffset: lastChild.end,
+              originalContent,
+              context: { parentTag: tagName || "unknown" },
+            });
+
+            attributes.push(`data-upstart-id="${id}"`);
+          }
+        }
+        // Step 2c: Mixed-text leaf — JSXText + JSXExpressionContainer children only.
+        // Expressions become non-editable chips; surrounding text is editable.
+        else if (!hasI18n && isMixedTextLeafElement(jsxNode)) {
+          attributes.push('data-upstart-editable-text="true"');
+          attributes.push('data-upstart-editable-text-mode="plain"');
+
+          const rangedChildren = jsxNode.children.filter((c) => hasRange(c));
+          const firstChild = rangedChildren[0];
+          const lastChild = rangedChildren[rangedChildren.length - 1];
+
+          if (firstChild && lastChild && hasRange(firstChild) && hasRange(lastChild)) {
+            const segments: EditableSegment[] = [];
+            let exprIndex = 0;
+            let templateStr = "";
+
+            for (const child of jsxNode.children) {
+              if (child.type === "JSXText") {
+                const normalized = normalizeJSXText((child as any).value as string);
+                segments.push({ type: "text", raw: (child as any).value as string });
+                templateStr += normalized;
+              } else if (child.type === "JSXExpressionContainer") {
+                const expr = (child as any).expression;
+                if (!expr || expr.type === "JSXEmptyExpression") continue;
+                const raw = hasRange(child) ? state.code.slice(child.start, child.end) : "";
+                segments.push({ type: "expr", raw });
+                templateStr += `{{${exprIndex++}}}`;
+              }
+            }
+
+            const id = generateId(state.filePath, firstChild);
+            const originalContent = state.code.slice(firstChild.start, lastChild.end);
+
+            editableRegistry.set(id, {
+              file: state.filePath,
+              type: "mixed-text",
+              startOffset: firstChild.start,
+              endOffset: lastChild.end,
+              originalContent,
+              segments,
+              context: { parentTag: tagName || "unknown" },
+            });
+
+            attributes.push(`data-upstart-id="${id}"`);
+            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"');
@@ -758,6 +875,7 @@ function detectTransComponent(
 
   let keyResult: { value: string; expr: string | null } | null = null;
   let nsResult: { value: string; expr: string | null } | null = null;
+  let valueKeys: string[] | undefined;
 
   for (const attr of opening.attributes) {
     if (attr.type !== "JSXAttribute" || attr.name.type !== "JSXIdentifier") continue;
@@ -771,6 +889,25 @@ function detectTransComponent(
     if (attrName === "ns") {
       nsResult = resolveJSXAttrValue(attr.value, code, constants);
     }
+
+    if (attrName === "values") {
+      const container = attr.value as any;
+      if (container?.type === "JSXExpressionContainer") {
+        const expr = container.expression;
+        if (expr?.type === "ObjectExpression") {
+          const keys: string[] = [];
+          for (const prop of expr.properties) {
+            // oxc-parser uses estree "Property"; Babel uses "ObjectProperty"
+            if ((prop.type === "Property" || prop.type === "ObjectProperty") && prop.key) {
+              if (prop.key.type === "Identifier") keys.push(prop.key.name);
+              else if (prop.key.type === "Literal" || prop.key.type === "StringLiteral")
+                keys.push(prop.key.value);
+            }
+          }
+          if (keys.length > 0) valueKeys = keys;
+        }
+      }
+    }
   }
 
   if (!keyResult) {
@@ -788,6 +925,7 @@ function detectTransComponent(
     namespace,
     keyExpr,
     nsExpr,
+    valueKeys,
   };
 }
 
@@ -889,6 +1027,54 @@ function findTCallsInChildren(jsxElement: JSXElement, code: string, state: Trans
   return results;
 }
 
+// Returns true if the element mixes i18n content with non-i18n text/expressions.
+// In that case, inline editing would incorrectly overwrite the translation with
+// the full rendered text (including static parts like "© 2026 Company.").
+//
+// Safe patterns (NOT mixed):
+//   {showWelcome && <Trans>}  — boolean guard around Trans
+//   {cond ? <Trans a> : <Trans b>}  — ternary between two Trans
+//   {" "}  — whitespace-only literal
+//
+// Mixed patterns (flagged):
+//   "© John Doe." + <Trans>  — non-whitespace JSXText alongside i18n
+//   {year} + <Trans>          — text-producing Identifier/MemberExpression alongside i18n
+function hasMixedNonI18nContent(
+  jsxNode: JSXElement,
+  code: string,
+  state: TransformState,
+  constants: Map<string, string>,
+): boolean {
+  for (const child of jsxNode.children) {
+    if (child.type === "JSXText") {
+      if (((child as any).value as string).trim().length > 0) return true;
+    } else if (child.type === "JSXExpressionContainer") {
+      const expr = (child as any).expression;
+      if (!expr || expr.type === "JSXEmptyExpression") continue;
+      // Whitespace-only string literal (e.g. {" "}) is harmless
+      if (expr.type === "Literal" && typeof expr.value === "string" && expr.value.trim() === "") continue;
+      // If expression contains i18n content (t() or Trans), it is not non-i18n text
+      const tResults: I18nKeyInfo[] = [];
+      findTCallInExpression(expr, code, tResults, state);
+      if (tResults.length > 0) continue;
+      const transResults: I18nKeyInfo[] = [];
+      findTransInExpression(expr, code, transResults, constants);
+      if (transResults.length > 0) continue;
+      // Flag only expressions that produce visible text (same heuristic as hasVisibleTextContent)
+      const type = expr.type;
+      if (
+        type === "Identifier" ||
+        type === "MemberExpression" ||
+        type === "Literal" ||
+        type === "TemplateLiteral"
+      ) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
 // Helper: Recursively search an expression tree for t() calls.
 // Handles LogicalExpression (&&, ||), ConditionalExpression (?:), CallExpression (.map()),
 // ArrowFunctionExpression/FunctionExpression (callbacks), BlockStatement, and direct CallExpression.
@@ -991,6 +1177,108 @@ function isTextLeafElement(jsxElement: JSXElement): boolean {
   return hasText;
 }
 
+// Inline HTML tags that purely style text without introducing block structure.
+// An element whose children are only JSXText + these tags is an "almost-leaf"
+// that can be edited as rich text via the InspectorPanel.
+const INLINE_FORMATTING_TAGS = new Set([
+  "b",
+  "i",
+  "em",
+  "strong",
+  "u",
+  "s",
+  "del",
+  "ins",
+  "mark",
+  "small",
+  "sub",
+  "sup",
+  "code",
+  "kbd",
+  "abbr",
+  "cite",
+  "time",
+  "span",
+  "a",
+]);
+
+// Returns true if the element's children are exclusively JSXText nodes and
+// known inline formatting tags (no expressions, no block elements, no fragments).
+// Must have at least one inline tag (otherwise it would be a plain text leaf).
+// The inline child tags must themselves be "simple" — only JSXText children,
+// no expressions, no attributes — so that <span className="...">{expr}</span>
+// siblings are not mistaken for plain inline formatting wrappers.
+function isAlmostLeafElement(jsxElement: JSXElement): boolean {
+  let hasInlineElement = false;
+
+  for (const child of jsxElement.children) {
+    if (child.type === "JSXText") {
+      continue;
+    }
+    if (child.type === "JSXElement") {
+      const childEl = child as JSXElement;
+      const tagName = getJSXElementName(childEl.openingElement);
+      if (!tagName || !INLINE_FORMATTING_TAGS.has(tagName.toLowerCase())) return false;
+      // The inline child must be truly simple: no attributes and only JSXText children.
+      // A <span className="..."> or <span>{expr}</span> is not a simple inline wrapper.
+      if (childEl.openingElement.attributes.length > 0) return false;
+      for (const grandchild of childEl.children) {
+        if (grandchild.type !== "JSXText") return false;
+      }
+      hasInlineElement = true;
+    } else {
+      return false;
+    }
+  }
+
+  return hasInlineElement;
+}
+
+// Normalise a raw JSX text node value the same way React/Babel does at compile time:
+// - Split by newlines
+// - For non-first lines, strip leading whitespace; for non-last lines, strip trailing whitespace
+// - Remove lines that are entirely whitespace
+// - Join surviving lines, appending a space after each non-last non-empty line
+function normalizeJSXText(raw: string): string {
+  const lines = raw.split(/\r\n|\n|\r/);
+  const lastNonEmptyIdx = lines.reduce((acc, line, i) => (/[^ \t]/.test(line) ? i : acc), -1);
+  let result = "";
+  for (let i = 0; i < lines.length; i++) {
+    let line = lines[i].replace(/\t/g, " ");
+    if (i > 0) line = line.replace(/^[ ]+/, "");
+    if (i < lines.length - 1) line = line.replace(/[ ]+$/, "");
+    if (!line) continue;
+    if (i !== lastNonEmptyIdx) line += " ";
+    result += line;
+  }
+  return result;
+}
+
+// Returns true if the element's children are exclusively JSXText + JSXExpressionContainer nodes
+// (no nested elements), AND it has at least one of each — making the static text parts editable
+// while expressions are rendered as non-editable chips.
+function isMixedTextLeafElement(jsxElement: JSXElement): boolean {
+  let hasText = false;
+  let hasExpr = false;
+
+  for (const child of jsxElement.children) {
+    if (child.type === "JSXText") {
+      if (normalizeJSXText((child as any).value as string).length > 0) hasText = true;
+      continue;
+    }
+    if (child.type === "JSXExpressionContainer") {
+      const expr = (child as any).expression;
+      if (!expr || expr.type === "JSXEmptyExpression") continue;
+      hasExpr = true;
+      continue;
+    }
+    // JSXElement, JSXFragment, JSXSpreadChild → not a pure mixed-text leaf
+    return false;
+  }
+
+  return hasText && hasExpr;
+}
+
 // Helper: Check if element has any visible text content (static or dynamic).
 // Broader than isTextLeafElement — returns true even if the element has other child types.
 // Detects JSXText with non-whitespace content and expression containers with

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

@@ -47,8 +47,18 @@ export const upstartEditor = createUnplugin<UpstartEditorPluginOptions>((options
       const imports = `import { initUpstartEditor, waitForHydration } from ${JSON.stringify(runtimePath)};`;
       const injection = "waitForHydration(initUpstartEditor);";
 
+      // If this entry file imports i18next, monkey-patch its init() so the
+      // resolved instance is exposed on window.__i18next for the editor runtime.
+      const i18nextImportMatch = code.match(/import\s+(\w+)\s+from\s+["']i18next["']/);
+      const i18nextVarName = i18nextImportMatch?.[1];
+      const i18nextPatch = i18nextVarName
+        ? `;(function(){var _i=` +
+          i18nextVarName +
+          `,_o=_i.init.bind(_i);_i.init=function(){return Promise.resolve(_o.apply(_i,arguments)).then(function(r){if(typeof window!=="undefined")window.__i18next=_i;return r;});};})();`
+        : "";
+
       return {
-        code: `${imports}${code}${injection}`,
+        code: `${imports}${i18nextPatch}${code}${injection}`,
         map: null,
       };
     },

package/src/vite-plugin-upstart-editor/runtime/click-handler.ts

@@ -81,10 +81,15 @@ function handleClick(event: MouseEvent): void {
   if (target.closest("[contenteditable='true']")) {
     const editableEl = target.closest<HTMLElement>("[data-upstart-editable-text='true']");
     if (editableEl) {
-      const classNameId =
-        editableEl.dataset.upstartClassnameId ||
-        editableEl.closest<HTMLElement>("[data-upstart-classname-id]")?.dataset.upstartClassnameId ||
-        "";
+      let classNameId = editableEl.dataset.upstartClassnameId ?? "";
+      let currentClassName = editableEl.className;
+      if (!classNameId) {
+        const parentWithClassname = editableEl.closest<HTMLElement>("[data-upstart-classname-id]");
+        if (parentWithClassname) {
+          classNameId = parentWithClassname.dataset.upstartClassnameId ?? "";
+          currentClassName = parentWithClassname.className;
+        }
+      }
       if (classNameId) {
         const computedStyle = getComputedStyle(document.documentElement);
         const themeColors: Record<string, string> = {};
@@ -98,7 +103,7 @@ function handleClick(event: MouseEvent): void {
           componentName: editableEl.dataset.upstartComponent,
           filePath: editableEl.dataset.upstartFile ?? "",
           classNameId,
-          currentClassName: editableEl.className,
+          currentClassName,
           themeColors,
           bounds: { top: 0, left: 0, width: 0, height: 0, right: 0, bottom: 0 },
         });
@@ -109,12 +114,19 @@ function handleClick(event: MouseEvent): void {
   }
 
   // Find the closest element with data-upstart-hash
-  const element = target.closest<HTMLElement>("[data-upstart-hash]");
-  if (!element) {
+  const rawElement = target.closest<HTMLElement>("[data-upstart-hash]");
+  if (!rawElement) {
     console.info("[Upstart Editor] Click ignored: no ancestral element with data-upstart-hash found");
     return;
   }
 
+  // If the clicked element is nested inside a rich-panel editable ancestor, bubble up to it
+  // so that clicking any inline child (e.g. <strong>, <em>) edits the whole rich-panel region.
+  const richPanelAncestor = rawElement.parentElement?.closest<HTMLElement>(
+    '[data-upstart-editable-text-mode="rich-panel"]',
+  );
+  const element = richPanelAncestor ?? rawElement;
+
   event.stopPropagation();
 
   console.log("Element clicked dataset:", element.dataset);
@@ -123,7 +135,7 @@ function handleClick(event: MouseEvent): void {
   const componentName = element.dataset.upstartComponent;
   const filePath = element.dataset.upstartFile ?? "";
 
-  // If this element has editable-text="true", let TipTap handle text editing
+  // If this element has editable-text, focus the TipTap editor (all modes now use inline TipTap)
   if (element.dataset.upstartEditableText === "true") {
     const proseMirror = element.querySelector<HTMLElement>(".ProseMirror");
     if (proseMirror) {
@@ -142,11 +154,6 @@ function handleClick(event: MouseEvent): void {
     }
   }
 
-  // Check if this element (or a nearby ancestor) is a datasource record
-  const datasourceEl = target.closest<HTMLElement>("[data-upstart-datasource][data-upstart-record-id]");
-  const datasourceId = datasourceEl?.dataset.upstartDatasource;
-  const recordId = datasourceEl?.dataset.upstartRecordId;
-
   // Read DaisyUI CSS custom property values from the iframe's document
   const computedStyle = getComputedStyle(document.documentElement);
   const themeColors: Record<string, string> = {};
@@ -156,6 +163,19 @@ function handleClick(event: MouseEvent): void {
   }
 
   const rect = element.getBoundingClientRect();
+  const bounds = {
+    top: rect.top,
+    left: rect.left,
+    width: rect.width,
+    height: rect.height,
+    right: rect.right,
+    bottom: rect.bottom,
+  };
+
+  // Check if this element (or a nearby ancestor) is a datasource record
+  const datasourceEl = target.closest<HTMLElement>("[data-upstart-datasource][data-upstart-record-id]");
+  const datasourceId = datasourceEl?.dataset.upstartDatasource;
+  const recordId = datasourceEl?.dataset.upstartRecordId;
 
   sendToParent({
     type: "element-clicked",
@@ -167,14 +187,8 @@ function handleClick(event: MouseEvent): void {
     datasourceId,
     recordId,
     themeColors,
-    bounds: {
-      top: rect.top,
-      left: rect.left,
-      width: rect.width,
-      height: rect.height,
-      right: rect.right,
-      bottom: rect.bottom,
-    },
+    bounds,
+    viewportWidth: window.innerWidth,
   });
 
   console.log("[Upstart Editor] Element clicked:", componentName, hash);

package/src/vite-plugin-upstart-editor/runtime/index.ts

@@ -86,7 +86,15 @@ export function initUpstartEditor(): void {
       sendToParent({ type: "editor-navigated" });
     };
 
-    initTextEditor();
+    // i18next integration: if the app exposes it on window.__i18next (set before hydration),
+    // wire it up so template variables (e.g. {{year}}) render as non-editable atoms.
+    const i18next = (globalThis as any).__i18next;
+    const getRawI18nTemplate = i18next
+      ? (namespace: string, key: string) =>
+          i18next.getResource(i18next.language, namespace, key) as string | undefined
+      : undefined;
+
+    initTextEditor(getRawI18nTemplate ? { getRawI18nTemplate } : {});
     initClickHandler();
     initHoverOverlay();
     initErrorHandler();
@@ -132,6 +140,18 @@ function handleParentMessage(event: MessageEvent): void {
     if (el) {
       el.className = message.className;
     }
+    const STYLE_ID = "upstart-preview-style";
+    let styleEl = document.getElementById(STYLE_ID) as HTMLStyleElement | null;
+    if (message.previewCSS) {
+      if (!styleEl) {
+        styleEl = document.createElement("style");
+        styleEl.id = STYLE_ID;
+        document.head.appendChild(styleEl);
+      }
+      styleEl.textContent = message.previewCSS;
+    } else if (styleEl) {
+      styleEl.textContent = "";
+    }
   } else if (message.type === "request-scroll-position") {
     sendToParent({ type: "scroll-position", x: window.scrollX, y: window.scrollY });
   } else if (message.type === "restore-scroll-position") {