@upstart.gg/vite-plugins 0.1.60 → 0.1.62

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

@@ -314,24 +314,34 @@ export function transformWithOxc(code: string, filePath: string) {
         const tCallChildren = findTCallsInChildren(jsxNode, state.code, state);
         const allI18nKeys = [...transChildren, ...tCallChildren];
         const hasI18n = allI18nKeys.length > 0;
-
-        if (hasI18n && !hasMixedNonI18nContent(jsxNode, state.code, state, state.constants)) {
+        const isMixed = hasI18n && hasMixedNonI18nContent(jsxNode, state.code, state, state.constants);
+
+        // Mixed content is normally disqualifying, but the very common
+        // `<label><Trans i18nKey="…" /> *</label>` shape is recoverable: the static
+        // text around the single i18n node is exported as prefix/suffix so the editor
+        // can keep it out of the saved translation.
+        const i18nAffixes = isMixed
+          ? detectI18nStaticAffixes(jsxNode, state.code, state, state.constants)
+          : null;
+
+        // The element must resolve to exactly ONE translation key at runtime, otherwise
+        // an inline edit could not be routed to the right key.
+        const i18nAttrValue = hasI18n
+          ? buildI18nAttributeValue(jsxNode, allI18nKeys, state.code, state, state.constants)
+          : null;
+
+        if (hasI18n && i18nAttrValue && (!isMixed || i18nAffixes)) {
           attributes.push('data-upstart-editable-text="true"');
           attributes.push('data-upstart-editable-text-mode="plain"');
 
-          const hasDynamic = allI18nKeys.some((t) => t.keyExpr || t.nsExpr);
-          if (hasDynamic) {
-            // Build a runtime JSX template expression for dynamic i18n keys
-            const parts = allI18nKeys.map((t) => {
-              const nsPart = t.nsExpr ? `\${${t.nsExpr}}` : t.namespace;
-              const keyPart = t.keyExpr ? `\${${t.keyExpr}}` : t.key;
-              return `${nsPart}:${keyPart}`;
-            });
-            attributes.push(`data-upstart-i18n={\`${parts.join(",")}\`}`);
-          } else {
-            const keys = allI18nKeys.map((t: I18nKeyInfo) => escapeProp(t.fullKey)).join(",");
-            attributes.push(`data-upstart-i18n="${keys}"`);
+          if (i18nAffixes?.prefix) {
+            attributes.push(`data-upstart-i18n-prefix="${escapeProp(i18nAffixes.prefix)}"`);
           }
+          if (i18nAffixes?.suffix) {
+            attributes.push(`data-upstart-i18n-suffix="${escapeProp(i18nAffixes.suffix)}"`);
+          }
+
+          attributes.push(`data-upstart-i18n=${i18nAttrValue}`);
 
           const allValueKeys = [...new Set(allI18nKeys.flatMap((t) => t.valueKeys ?? []))];
           if (allValueKeys.length > 0) {
@@ -1044,6 +1054,22 @@ function findTransInExpression(
     return;
   }
 
+  // A fragment renders all of its children at once — collect every key it holds
+  if (expr.type === "JSXFragment") {
+    for (const child of expr.children) {
+      if (child.type === "JSXElement") {
+        const info = detectTransComponent(child as JSXElement, code, constants);
+        if (info) results.push(info);
+      } else if (child.type === "JSXExpressionContainer") {
+        const inner = (child as any).expression;
+        if (inner && inner.type !== "JSXEmptyExpression") {
+          findTransInExpression(inner, code, results, constants);
+        }
+      }
+    }
+    return;
+  }
+
   if (expr.type === "LogicalExpression") {
     findTransInExpression(expr.left, code, results, constants);
     findTransInExpression(expr.right, code, results, constants);
@@ -1099,6 +1125,197 @@ function findTCallsInChildren(jsxElement: JSXElement, code: string, state: Trans
   return results;
 }
 
+// Source of a JS expression resolving to "namespace:key" for one i18n reference.
+function i18nKeyExpressionSource(info: I18nKeyInfo): string {
+  if (info.keyExpr || info.nsExpr) {
+    const nsPart = info.nsExpr ? `\${${info.nsExpr}}` : info.namespace;
+    const keyPart = info.keyExpr ? `\${${info.keyExpr}}` : info.key;
+    return `\`${nsPart}:${keyPart}\``;
+  }
+  return JSON.stringify(info.fullKey);
+}
+
+interface I18nTernary {
+  /** Source of the ternary condition, e.g. "isSubmitting" */
+  test: string;
+  consequent: I18nKeyInfo;
+  alternate: I18nKeyInfo;
+}
+
+// Detects an element whose only i18n content is a ternary between two translations,
+// e.g. `<button>{isSubmitting ? <Trans i18nKey="a" /> : <Trans i18nKey="b" />}</button>`.
+// Only one branch is ever rendered, so the key can be resolved at runtime instead of
+// being ambiguous. Returns null as soon as anything else produces i18n content.
+function detectI18nTernary(
+  jsxNode: JSXElement,
+  code: string,
+  state: TransformState,
+  constants: Map<string, string>,
+): I18nTernary | null {
+  const keysOf = (expr: unknown): I18nKeyInfo[] => {
+    const found: I18nKeyInfo[] = [];
+    findTransInExpression(expr, code, found, constants);
+    findTCallInExpression(expr, code, found, state);
+    return found;
+  };
+
+  let ternary: I18nTernary | null = null;
+
+  for (const child of jsxNode.children) {
+    if (child.type === "JSXElement") {
+      // A <Trans> sibling renders at the same time as the ternary → ambiguous
+      if (detectTransComponent(child as JSXElement, code, constants)) return null;
+      continue;
+    }
+
+    if (child.type !== "JSXExpressionContainer") continue;
+
+    const expr = (child as any).expression;
+    if (!expr || expr.type === "JSXEmptyExpression") continue;
+    if (keysOf(expr).length === 0) continue;
+
+    // A second i18n-producing child renders alongside the first → ambiguous
+    if (ternary) return null;
+    if (expr.type !== "ConditionalExpression" || !hasRange(expr.test)) return null;
+
+    const consequentKeys = keysOf(expr.consequent);
+    const alternateKeys = keysOf(expr.alternate);
+    if (consequentKeys.length !== 1 || alternateKeys.length !== 1) return null;
+
+    ternary = {
+      test: code.slice(expr.test.start, expr.test.end),
+      consequent: consequentKeys[0],
+      alternate: alternateKeys[0],
+    };
+  }
+
+  return ternary;
+}
+
+// Builds the source of the `data-upstart-i18n` attribute, which must resolve to a
+// single "namespace:key" at runtime so an inline edit can be routed to the right
+// translation:
+//   "translation:home.title"                            — single static key
+//   {`${ns}:${keyVar}`}                                  — dynamic key and/or namespace
+//   {isSubmitting ? "translation:a" : "translation:b"}   — ternary between two translations
+// Returns null when the element renders several translations at once — the element
+// then stays non-editable rather than saving edits to a bogus key.
+function buildI18nAttributeValue(
+  jsxNode: JSXElement,
+  keys: I18nKeyInfo[],
+  code: string,
+  state: TransformState,
+  constants: Map<string, string>,
+): string | null {
+  if (keys.length === 1) {
+    const [info] = keys;
+    if (info.keyExpr || info.nsExpr) {
+      return `{${i18nKeyExpressionSource(info)}}`;
+    }
+    return `"${escapeProp(info.fullKey)}"`;
+  }
+
+  const ternary = detectI18nTernary(jsxNode, code, state, constants);
+  if (!ternary) return null;
+
+  const consequent = i18nKeyExpressionSource(ternary.consequent);
+  const alternate = i18nKeyExpressionSource(ternary.alternate);
+  return `{${ternary.test} ? ${consequent} : ${alternate}}`;
+}
+
+// Returns the visible text of an element whose children are exclusively JSXText
+// (e.g. the "*" of `<span aria-hidden="true">*</span>`), or null when the element
+// contains anything dynamic. Such an element renders static text, so next to an
+// i18n node it must be treated as a static affix, never as editable content.
+function getStaticElementText(jsxElement: JSXElement): string | null {
+  let text = "";
+  for (const child of jsxElement.children) {
+    if (child.type !== "JSXText") return null;
+    text += normalizeJSXText((child as any).value as string);
+  }
+  return text.trim().length > 0 ? text : null;
+}
+
+interface I18nStaticAffixes {
+  /** Static text rendered before the i18n node, e.g. "" */
+  prefix: string;
+  /** Static text rendered after the i18n node, e.g. " *" */
+  suffix: string;
+}
+
+// Detects the "single i18n source surrounded by static text" shape, e.g.
+//   <label><Trans i18nKey="contact.form.phone" /> *</label>
+// Returns the static text rendered before/after the i18n node (normalised the same
+// way React normalises JSXText), or null when the element does not match: several
+// i18n sources, non-i18n elements, or dynamic expressions among the children.
+// The affixes let the runtime editor strip the static parts from the editable
+// content so they never leak into the saved translation.
+function detectI18nStaticAffixes(
+  jsxNode: JSXElement,
+  code: string,
+  state: TransformState,
+  constants: Map<string, string>,
+): I18nStaticAffixes | null {
+  let prefix = "";
+  let suffix = "";
+  let seenI18n = false;
+
+  const append = (text: string): void => {
+    if (seenI18n) suffix += text;
+    else prefix += text;
+  };
+
+  for (const child of jsxNode.children) {
+    if (child.type === "JSXText") {
+      // React only trims JSXText around newlines; a single-line text (e.g. the " "
+      // or " *" between two elements) is rendered verbatim.
+      const raw = (child as any).value as string;
+      const text = /[\r\n]/.test(raw) ? normalizeJSXText(raw) : raw;
+      if (text) append(text);
+      continue;
+    }
+
+    if (child.type === "JSXElement") {
+      if (detectTransComponent(child as JSXElement, code, constants)) {
+        if (seenI18n) return null;
+        seenI18n = true;
+        continue;
+      }
+      // A purely static element (e.g. <span aria-hidden="true">*</span>) is an affix
+      const staticText = getStaticElementText(child as JSXElement);
+      if (staticText === null) return null;
+      append(staticText);
+      continue;
+    }
+
+    if (child.type === "JSXExpressionContainer") {
+      const expr = (child as any).expression;
+      if (!expr || expr.type === "JSXEmptyExpression") continue;
+
+      // Whitespace-only literal (e.g. {" "}) renders as static text
+      if (expr.type === "Literal" && typeof expr.value === "string" && expr.value.trim() === "") {
+        append(expr.value);
+        continue;
+      }
+
+      const results: I18nKeyInfo[] = [];
+      findTCallInExpression(expr, code, results, state);
+      findTransInExpression(expr, code, results, constants);
+      if (results.length === 0) return null;
+      if (seenI18n) return null;
+      seenI18n = true;
+      continue;
+    }
+
+    // Fragments, spread children… — too complex to reason about
+    return null;
+  }
+
+  if (!seenI18n || (!prefix && !suffix)) return null;
+
+  return { prefix, suffix };
+}
+
 // 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.").
@@ -1111,6 +1328,10 @@ function findTCallsInChildren(jsxElement: JSXElement, code: string, state: Trans
 // Mixed patterns (flagged):
 //   "© John Doe." + <Trans>  — non-whitespace JSXText alongside i18n
 //   {year} + <Trans>          — text-producing Identifier/MemberExpression alongside i18n
+//   <span>*</span> + <Trans>  — static sibling element rendering its own text
+//
+// Flagged elements can still be recovered by detectI18nStaticAffixes() when the
+// static parts merely surround a single i18n node.
 function hasMixedNonI18nContent(
   jsxNode: JSXElement,
   code: string,
@@ -1120,6 +1341,11 @@ function hasMixedNonI18nContent(
   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 === "JSXElement") {
+      // A sibling element that renders its own text (e.g. <span aria-hidden="true">*</span>)
+      // is not part of the translation — same hazard as raw JSXText.
+      if (detectTransComponent(child as JSXElement, code, constants)) continue;
+      if (hasVisibleTextContent(child as JSXElement)) return true;
     } else if (child.type === "JSXExpressionContainer") {
       const expr = (child as any).expression;
       if (!expr || expr.type === "JSXEmptyExpression") continue;
@@ -1153,6 +1379,19 @@ function hasMixedNonI18nContent(
 function findTCallInExpression(expr: any, code: string, results: I18nKeyInfo[], state: TransformState): void {
   if (!expr || !expr.type) return;
 
+  // A fragment renders all of its children at once — collect every key it holds
+  if (expr.type === "JSXFragment") {
+    for (const child of expr.children) {
+      if (child.type === "JSXExpressionContainer") {
+        const inner = (child as any).expression;
+        if (inner && inner.type !== "JSXEmptyExpression") {
+          findTCallInExpression(inner, code, results, state);
+        }
+      }
+    }
+    return;
+  }
+
   if (expr.type === "CallExpression") {
     const info = detectTCall(expr, code, state);
     if (info) {

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

@@ -62,6 +62,43 @@ export function waitForHydration(callback: () => void): void {
   }
 }
 
+/**
+ * Report the react-router id of the rendered route to the parent editor, so it can edit
+ * that route's `meta` export (page title, description…).
+ *
+ * The id is read from react-router's own data router rather than from `history.pushState`:
+ * the router pushes the new URL BEFORE it commits the new matches, so a route id read at
+ * pushState time would still be the previous page's. Subscribing gives us the id once the
+ * navigation is complete. The router global only appears during hydration, hence the retry.
+ */
+function initRouteReporter(): void {
+  let lastReported: string | undefined;
+
+  const report = () => {
+    // biome-ignore lint/suspicious/noExplicitAny: react-router does not type its window globals
+    const matches = (window as any).__reactRouterDataRouter?.state?.matches;
+    const routeId = Array.isArray(matches) ? matches[matches.length - 1]?.route?.id : undefined;
+    if (typeof routeId !== "string" || routeId === lastReported) return;
+    lastReported = routeId;
+    sendToParent({ type: "editor-route", routeId });
+  };
+
+  const attach = (): boolean => {
+    // biome-ignore lint/suspicious/noExplicitAny: react-router does not type its window globals
+    const router = (window as any).__reactRouterDataRouter;
+    if (typeof router?.subscribe !== "function") return false;
+    router.subscribe(() => report());
+    report();
+    return true;
+  };
+
+  if (attach()) return;
+  let attempts = 0;
+  const timer = setInterval(() => {
+    if (attach() || ++attempts > 25) clearInterval(timer);
+  }, 200);
+}
+
 /**
  * Initialize the Upstart editor runtime.
  */
@@ -115,6 +152,7 @@ export function initUpstartEditor(): void {
     initArrayControls();
     initFormGuard();
     initErrorHandler();
+    initRouteReporter();
 
     sendToParent({ type: "editor-ready", path: currentPath() });
   } catch (error) {

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

@@ -57,6 +57,46 @@ const TemplateVariable = Node.create({
   },
 });
 
+/**
+ * An atomic inline node holding static text that surrounds an i18n node in the
+ * source (e.g. the " *" in `<label><Trans i18nKey="…" /> *</label>`).
+ * It stays visible and non-editable, and renderText() returns "" so getText()
+ * yields only the translation — the static part never leaks into the saved value.
+ */
+const StaticAffix = Node.create({
+  name: "staticAffix",
+  group: "inline",
+  inline: true,
+  atom: true,
+  selectable: false,
+
+  addAttributes() {
+    return {
+      text: { default: "" },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: "span[data-static-affix]" }];
+  },
+
+  renderHTML({ node }) {
+    return [
+      "span",
+      {
+        "data-static-affix": "",
+        contenteditable: "false",
+        style: "cursor:default;user-select:none;white-space:pre;",
+      },
+      node.attrs.text,
+    ];
+  },
+
+  renderText() {
+    return "";
+  },
+});
+
 /**
  * Remaps Enter to insert a <br> (hard break) instead of creating a new paragraph.
  * Used in inline-rich mode where block nodes are not allowed.
@@ -80,6 +120,74 @@ const DEFAULT_OPTIONS: Required<UpstartEditorOptions> = {
   getRawI18nTemplate: () => undefined,
 };
 
+/**
+ * Parse a `data-upstart-i18n` value into its namespace and key.
+ *
+ * The build-time plugin guarantees a single "namespace:key" per element (a ternary
+ * between two translations is emitted as a runtime-resolved expression), but a stale
+ * build may still carry a comma-separated list of keys. Such a value is unresolvable —
+ * we cannot tell which translation the edited text belongs to — so it is rejected
+ * instead of being saved to a mangled key.
+ */
+function parseI18nAttr(value: string | undefined): { namespace: string; key: string } | null {
+  if (!value) return null;
+  if (value.includes(",")) {
+    console.warn("[Upstart Editor] Ambiguous i18n key, refusing to save:", value);
+    return null;
+  }
+  const colonIdx = value.indexOf(":");
+  return colonIdx >= 0
+    ? { namespace: value.slice(0, colonIdx), key: value.slice(colonIdx + 1) }
+    : { namespace: "translation", key: value };
+}
+
+/**
+ * Static text emitted by the build-time plugin around a single i18n node
+ * (`data-upstart-i18n-prefix` / `data-upstart-i18n-suffix`).
+ */
+function getAffixes(element: HTMLElement): { prefix: string; suffix: string } {
+  return {
+    prefix: element.dataset.upstartI18nPrefix ?? "",
+    suffix: element.dataset.upstartI18nSuffix ?? "",
+  };
+}
+
+/** Remove the static affixes from a rendered text to get the translation alone. */
+function stripAffixes(element: HTMLElement, text: string): string {
+  const { prefix, suffix } = getAffixes(element);
+  let out = text;
+  if (prefix && out.startsWith(prefix)) out = out.slice(prefix.length);
+  if (suffix && out.endsWith(suffix)) out = out.slice(0, out.length - suffix.length);
+  return out;
+}
+
+/** Re-attach the static affixes to a translation for display purposes. */
+function applyAffixes(element: HTMLElement, text: string): string {
+  const { prefix, suffix } = getAffixes(element);
+  return `${prefix}${text}${suffix}`;
+}
+
+/**
+ * Wrap the editable inline nodes with non-editable StaticAffix nodes so the static
+ * parts stay visible while remaining outside of the edited (and saved) content.
+ */
+function buildAffixDocument(element: HTMLElement, inlineNodes: object[]): object {
+  const { prefix, suffix } = getAffixes(element);
+  const content: object[] = [...inlineNodes];
+  if (prefix) content.unshift({ type: "staticAffix", attrs: { text: prefix } });
+  if (suffix) content.push({ type: "staticAffix", attrs: { text: suffix } });
+  return { type: "doc", content: [{ type: "paragraph", content }] };
+}
+
+/** Extract the inline nodes of a single-paragraph document produced above. */
+function getInlineNodes(content: string | object): object[] {
+  if (typeof content === "string") {
+    return content ? [{ type: "text", text: content }] : [];
+  }
+  const paragraph = (content as { content?: { content?: object[] }[] }).content?.[0];
+  return paragraph?.content ?? [];
+}
+
 /**
  * Parse a raw i18n template (e.g. "Copyright {{year}}") together with the
  * already-rendered text (e.g. "Copyright 2026") and produce a TipTap JSON
@@ -268,7 +376,9 @@ function activateEditor(element: HTMLElement, hash: string, options: Required<Up
 }
 
 function createPlainTextEditor(element: HTMLElement, options: Required<UpstartEditorOptions>): Editor {
-  const renderedText = element.textContent ?? "";
+  // A label like `<Trans i18nKey="…" /> *` renders the static " *" alongside the
+  // translation: strip it so only the translation becomes editable.
+  const renderedText = stripAffixes(element, element.textContent ?? "");
 
   let content: string | object = renderedText;
   const extraExtensions: ReturnType<typeof Node.create>[] = [];
@@ -282,12 +392,9 @@ function createPlainTextEditor(element: HTMLElement, options: Required<UpstartEd
     // Check for i18n template variables (e.g. data-i18n-values="year,month")
     const i18nValueKeys = element.dataset.i18nValues?.split(",").filter(Boolean) ?? [];
     if (i18nValueKeys.length > 0) {
-      const i18nAttr = element.dataset.upstartI18n;
-      if (i18nAttr) {
-        const colonIdx = i18nAttr.indexOf(":");
-        const namespace = colonIdx >= 0 ? i18nAttr.slice(0, colonIdx) : "translation";
-        const key = colonIdx >= 0 ? i18nAttr.slice(colonIdx + 1) : i18nAttr;
-        const rawTemplate = options.getRawI18nTemplate(namespace, key);
+      const parsed = parseI18nAttr(element.dataset.upstartI18n);
+      if (parsed) {
+        const rawTemplate = options.getRawI18nTemplate(parsed.namespace, parsed.key);
         if (rawTemplate) {
           content = buildI18nContent(rawTemplate, renderedText);
           extraExtensions.push(TemplateVariable);
@@ -296,6 +403,12 @@ function createPlainTextEditor(element: HTMLElement, options: Required<UpstartEd
     }
   }
 
+  const { prefix, suffix } = getAffixes(element);
+  if (prefix || suffix) {
+    extraExtensions.push(StaticAffix);
+    content = buildAffixDocument(element, getInlineNodes(content));
+  }
+
   element.textContent = "";
   let hasChanged = false;
 
@@ -587,15 +700,25 @@ function syncI18nSiblings(sourceElement: HTMLElement): void {
 
       const siblingInstance = activeEditors.get(sibling);
 
+      const { prefix, suffix } = getAffixes(sibling);
+      const hasAffixes = Boolean(prefix || suffix);
+
       if (siblingInstance) {
         console.log(
           `[Upstart Editor] Updating sibling editor (hash: ${siblingInstance.hash}) with new content`,
           siblingInstance,
         );
-        sibling.innerText = plainContent;
-        siblingInstance.editor.chain().selectAll().insertContent(plainContent).run();
+        if (hasAffixes) {
+          // setContent rebuilds the StaticAffix nodes, which insertContent would drop
+          siblingInstance.editor.commands.setContent(
+            buildAffixDocument(sibling, plainContent ? [{ type: "text", text: plainContent }] : []),
+          );
+        } else {
+          sibling.innerText = plainContent;
+          siblingInstance.editor.chain().selectAll().insertContent(plainContent).run();
+        }
       } else {
-        sibling.textContent = plainContent;
+        sibling.textContent = applyAffixes(sibling, plainContent);
       }
     }
   } finally {
@@ -616,14 +739,18 @@ function saveText(element: HTMLElement, newText: string): void {
         payload: { action: "editTextDirect", id: dataset.upstartId!, content: newText },
       });
     } else {
-      const [namespace, key] = dataset.upstartI18n?.split(":") ?? [];
+      const parsed = parseI18nAttr(dataset.upstartI18n);
+      if (!parsed) {
+        console.warn("[Upstart Editor] No resolvable i18n key on element, edit not saved:", element);
+        return;
+      }
       sendToParent({
         type: "text-edit",
         payload: {
           action: "editText",
           content: newText,
-          namespace,
-          key,
+          namespace: parsed.namespace,
+          key: parsed.key,
           language: document.documentElement.lang,
         },
       });
@@ -659,7 +786,7 @@ function destroyEditor(element: HTMLElement): void {
 
   // Update element content with the final edited text
   if (isPlainMode) {
-    instance.element.textContent = finalContent;
+    instance.element.textContent = applyAffixes(instance.element, finalContent);
   } else {
     instance.element.innerHTML = finalContent;
   }

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

@@ -92,6 +92,8 @@ export type EditorMessage =
     }
   | { type: "editor-ready"; path?: string }
   | { type: "editor-navigated"; path?: string }
+  /** React-router id of the route currently rendered (e.g. "routes/_layout._index"). */
+  | { type: "editor-route"; routeId: string }
   | { type: "scroll-position"; x: number; y: number }
   | { type: "editor-error"; error: string }
   | { type: "selection-changed"; selection: SelectionRef[] }