@upstart.gg/vite-plugins 0.0.39 → 0.0.41

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

@@ -42,7 +42,6 @@ interface LoopContext {
   arrayExpr: string;
 }
 
-
 interface I18nKeyInfo {
   /** The resolved key with namespace, e.g. "dashboard:features.title" */
   fullKey: string;
@@ -50,6 +49,10 @@ interface I18nKeyInfo {
   key: string;
   /** The namespace, e.g. "dashboard" */
   namespace: string;
+  /** Source expression for i18nKey when dynamic (e.g. "stat.labelKey"), null when static */
+  keyExpr: string | null;
+  /** Source expression for namespace when dynamic, null when static */
+  nsExpr: string | null;
 }
 
 // Registry entry for editable elements (text and className)
@@ -87,6 +90,10 @@ interface TransformState {
   code: string;
   s: MagicString;
   loopStack: LoopContext[];
+  /** Tracks const varName = "literal" declarations for resolving dynamic i18nKey expressions */
+  constants: Map<string, string>;
+  /** Maps t-function variable names to their default namespace, e.g. { "t": "dashboard" } */
+  tFunctions: Map<string, string>;
 }
 
 export const upstartEditor = createUnplugin<Options>((options) => {
@@ -173,6 +180,8 @@ export function transformWithOxc(code: string, filePath: string) {
     code,
     s,
     loopStack: [],
+    constants: new Map(),
+    tFunctions: new Map(),
   };
 
   let modified = false;
@@ -180,9 +189,21 @@ export function transformWithOxc(code: string, filePath: string) {
   // Use zimmerframe to walk and transform the AST
   walk(ast.program as Program, state, {
     _(node: Node, { state, next }: { state: TransformState; next: () => void }) {
-      // ENFORCE: Throw error if useTranslation is used for translations (destructuring `t`)
+      // Track useTranslation() calls to resolve t() function namespaces
       if (node.type === "VariableDeclaration") {
-        checkForbiddenUseTranslation(node, state.filePath);
+        trackUseTranslation(node, state);
+
+        // Track const varName = "literal" for resolving dynamic i18nKey expressions
+        for (const decl of (node as any).declarations) {
+          if (
+            decl.type === "VariableDeclarator" &&
+            decl.id?.type === "Identifier" &&
+            decl.init?.type === "Literal" &&
+            typeof decl.init.value === "string"
+          ) {
+            state.constants.set(decl.id.name, decl.init.value);
+          }
+        }
       }
 
       // Handle .map() calls to track loops (must be before JSXElement)
@@ -207,6 +228,15 @@ export function transformWithOxc(code: string, filePath: string) {
         const jsxNode = node as JSXElement;
         const opening = jsxNode.openingElement;
         const tagName = getJSXElementName(opening);
+
+        // Skip ALL attribute injection for <Trans> elements.
+        // <Trans> renders to a text node at runtime, so DOM attributes are lost.
+        // The i18n attributes are promoted to the parent element instead.
+        if (tagName === "Trans") {
+          next();
+          return;
+        }
+
         const insertPos = getAttributeInsertPosition(opening, state.code);
 
         // Track attributes to inject
@@ -217,13 +247,52 @@ export function transformWithOxc(code: string, filePath: string) {
         if (hasRange(jsxNode)) {
           const elementSource = state.code.slice(jsxNode.start, jsxNode.end);
           const hash = hashContent(elementSource);
-          attributes.push(`data-upstart-hash="${hash}"`);
+
+          // Collect index variables from all enclosing loops so elements
+          // inside .map() get a unique hash per iteration at runtime.
+          const loopIndices = state.loopStack.map((l) => l.indexName).filter((n): n is string => n !== null);
+
+          if (loopIndices.length > 0) {
+            const suffix = loopIndices.map((n) => `\${${n}}`).join("-");
+            attributes.push(`data-upstart-hash={\`${hash}-${suffix}\`}`);
+          } else {
+            attributes.push(`data-upstart-hash="${hash}"`);
+          }
         }
 
-        // Check for text leaf elements (any element with only static text)
-        if (isTextLeafElement(jsxNode)) {
+        // --- Editable text detection ---
+        // Priority: i18n (true) > non-i18n text (false) > no text (no attribute)
+
+        // Step 1: Check for Trans children AND t() calls (editable via i18n, gets "true")
+        const transChildren = findTransInChildren(jsxNode, state.code, state.constants);
+        const tCallChildren = findTCallsInChildren(jsxNode, state.code, state);
+        const allI18nKeys = [...transChildren, ...tCallChildren];
+        const hasI18n = allI18nKeys.length > 0;
+
+        if (hasI18n) {
           attributes.push('data-upstart-editable-text="true"');
 
+          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}"`);
+          }
+        }
+
+        // Step 2: Text leaf elements — registry tracking + non-editable flag
+        if (isTextLeafElement(jsxNode)) {
+          if (!hasI18n) {
+            attributes.push('data-upstart-editable-text="false"');
+          }
+
           // Find the actual JSXText node to track its location
           const textChild = jsxNode.children.find((c) => c.type === "JSXText" && (c as any).value?.trim());
 
@@ -247,12 +316,9 @@ export function transformWithOxc(code: string, filePath: string) {
             attributes.push(`data-upstart-id="${id}"`);
           }
         }
-
-        // Check if this element IS a <Trans> component - add i18n tracking attributes
-        const transInfo = detectTransComponent(jsxNode, state.code);
-        if (transInfo) {
-          attributes.push('data-upstart-editable-text="true"');
-          attributes.push(`data-i18n-key="${escapeProp(transInfo.fullKey)}"`);
+        // Step 3: Non-leaf elements with visible text content (expressions, mixed content)
+        else if (!hasI18n && hasVisibleTextContent(jsxNode)) {
+          attributes.push('data-upstart-editable-text="false"');
         }
 
         // Track className attribute if it's a string literal
@@ -542,15 +608,15 @@ function extractRecordId(expr: MemberExpression): string | undefined {
   const obj = expr.object;
 
   if (obj.type === "Identifier") {
-    // Assume the ID field is `${object}.id`
-    return `${obj.name}.id`;
+    // Assume the ID field is `${object}.$id`
+    return `${obj.name}.$id`;
   }
 
   if (obj.type === "MemberExpression") {
     // For nested objects like user.profile.id
     const datasource = extractDatasource(obj);
     if (datasource) {
-      return `${datasource}.id`;
+      return `${datasource}.$id`;
     }
   }
 
@@ -611,9 +677,8 @@ function escapeProp(value: string): string {
     .replace(/>/g, "&gt;");
 }
 
-// Helper: ENFORCE forbidden useTranslation usage - throw error if `t` is destructured
-// Only `{ i18n }` is allowed (for language switching), not `{ t }` (use <Trans> instead)
-function checkForbiddenUseTranslation(node: Node, filePath: string): void {
+// Helper: Track useTranslation() calls to map t-function variable names to their namespace
+function trackUseTranslation(node: Node, state: TransformState): void {
   if (node.type !== "VariableDeclaration") return;
 
   const decl = node as any;
@@ -631,56 +696,295 @@ function checkForbiddenUseTranslation(node: Node, filePath: string): void {
       continue;
     }
 
-    // Check if `t` is being destructured (forbidden)
+    const namespace = extractUseTranslationNamespace(callExpr);
+
     for (const prop of declarator.id.properties) {
       if (prop.type !== "Property") continue;
+      if (prop.key?.type !== "Identifier" || prop.key.name !== "t") continue;
 
-      if (prop.key?.type === "Identifier" && prop.key.name === "t") {
-        throw new Error(
-          `[${filePath}] useTranslation hook is forbidden for translations. ` +
-            `Use <Trans i18nKey="..." /> component instead. ` +
-            `Only { i18n } destructuring is allowed (for language switching).`,
-        );
-      }
+      // Handle aliased destructuring: { t: translate } → maps "translate" to namespace
+      const localName = prop.value?.type === "Identifier" ? prop.value.name : "t";
+      state.tFunctions.set(localName, namespace);
+    }
+  }
+}
+
+// Helper: Extract namespace from useTranslation() call arguments
+function extractUseTranslationNamespace(callExpr: any): string {
+  const firstArg = callExpr.arguments?.[0];
+  if (!firstArg) return "translation";
+
+  // String literal: useTranslation("dashboard")
+  if (firstArg.type === "Literal" && typeof firstArg.value === "string") {
+    return firstArg.value;
+  }
+
+  // Array expression: useTranslation(["dashboard", "common"])
+  if (firstArg.type === "ArrayExpression" && firstArg.elements?.length > 0) {
+    const first = firstArg.elements[0];
+    if (first?.type === "Literal" && typeof first.value === "string") {
+      return first.value;
+    }
+  }
+
+  return "translation";
+}
+
+// Helper: Resolve a JSX attribute value to a string.
+// Handles string literals directly, and JSXExpressionContainer by resolving
+// Identifier references via the constants map, or returning the expression source for dynamic values.
+function resolveJSXAttrValue(
+  value: any,
+  code: string,
+  constants: Map<string, string>,
+): { value: string; expr: string | null } | null {
+  if (!value) return null;
+
+  if (value.type === "Literal" && typeof value.value === "string") {
+    return { value: value.value, expr: null };
+  }
+
+  if (value.type === "JSXExpressionContainer") {
+    const expression = value.expression;
+    if (!expression) return null;
+
+    // Resolve simple identifiers via constants map (e.g. i18nKey={labelKey} where const labelKey = "...")
+    if (expression.type === "Identifier" && constants.has(expression.name)) {
+      return { value: constants.get(expression.name)!, expr: null };
+    }
+
+    // Dynamic expression — return source text so caller can emit a runtime JSX expression
+    if (hasRange(expression)) {
+      const src = code.slice(expression.start, expression.end);
+      return { value: src, expr: src };
     }
   }
+
+  return null;
 }
 
 // Helper: Detect <Trans i18nKey="..." /> component and extract i18n key info
-function detectTransComponent(jsxElement: JSXElement, code: string): I18nKeyInfo | null {
+function detectTransComponent(
+  jsxElement: JSXElement,
+  code: string,
+  constants: Map<string, string>,
+): I18nKeyInfo | null {
   const opening = jsxElement.openingElement;
   const tagName = getJSXElementName(opening);
 
   if (tagName !== "Trans") return null;
 
-  let i18nKey: string | null = null;
-  let namespace = "translation";
+  let keyResult: { value: string; expr: string | null } | null = null;
+  let nsResult: { value: string; expr: string | null } | null = null;
 
   for (const attr of opening.attributes) {
     if (attr.type !== "JSXAttribute" || attr.name.type !== "JSXIdentifier") continue;
 
     const attrName = attr.name.name;
 
-    // Extract i18nKey prop value
-    if (attrName === "i18nKey" && attr.value?.type === "Literal") {
-      i18nKey = (attr.value as any).value as string;
+    if (attrName === "i18nKey") {
+      keyResult = resolveJSXAttrValue(attr.value, code, constants);
     }
 
-    // Extract ns prop value (optional namespace override)
-    if (attrName === "ns" && attr.value?.type === "Literal") {
-      namespace = (attr.value as any).value as string;
+    if (attrName === "ns") {
+      nsResult = resolveJSXAttrValue(attr.value, code, constants);
     }
   }
 
-  if (!i18nKey) return null;
+  if (!keyResult) {
+    return null;
+  }
+
+  const key = keyResult.value;
+  const namespace = nsResult?.value ?? "translation";
+  const keyExpr = keyResult.expr;
+  const nsExpr = nsResult?.expr ?? null;
 
   return {
-    fullKey: `${namespace}:${i18nKey}`,
-    key: i18nKey,
+    fullKey: `${namespace}:${key}`,
+    key,
     namespace,
+    keyExpr,
+    nsExpr,
   };
 }
 
+// Helper: Scan an element's direct children for <Trans> components and extract i18n key info.
+// Handles direct <Trans> children and <Trans> inside JSXExpressionContainer (e.g. {show && <Trans>}).
+function findTransInChildren(
+  jsxElement: JSXElement,
+  code: string,
+  constants: Map<string, string>,
+): I18nKeyInfo[] {
+  const results: I18nKeyInfo[] = [];
+
+  for (const child of jsxElement.children) {
+    if (child.type === "JSXElement") {
+      const info = detectTransComponent(child as JSXElement, code, constants);
+      if (info) results.push(info);
+    }
+
+    if (child.type === "JSXExpressionContainer") {
+      const expr = (child as any).expression;
+      if (expr && expr.type !== "JSXEmptyExpression") {
+        findTransInExpression(expr, code, results, constants);
+      }
+    }
+  }
+
+  return results;
+}
+
+// Helper: Recursively search an expression tree for <Trans> JSXElements.
+// Handles LogicalExpression (&&, ||), ConditionalExpression (?:), CallExpression (.map()),
+// ArrowFunctionExpression/FunctionExpression (callbacks), BlockStatement, and direct JSXElement.
+function findTransInExpression(
+  expr: any,
+  code: string,
+  results: I18nKeyInfo[],
+  constants: Map<string, string>,
+): void {
+  if (!expr || !expr.type) return;
+
+  if (expr.type === "JSXElement") {
+    const info = detectTransComponent(expr as JSXElement, code, constants);
+    if (info) results.push(info);
+    return;
+  }
+
+  if (expr.type === "LogicalExpression") {
+    findTransInExpression(expr.left, code, results, constants);
+    findTransInExpression(expr.right, code, results, constants);
+    return;
+  }
+
+  if (expr.type === "ConditionalExpression") {
+    findTransInExpression(expr.consequent, code, results, constants);
+    findTransInExpression(expr.alternate, code, results, constants);
+    return;
+  }
+
+  // Handle .map() and other call expressions — recurse into arguments
+  if (expr.type === "CallExpression") {
+    for (const arg of expr.arguments) {
+      findTransInExpression(arg, code, results, constants);
+    }
+    return;
+  }
+
+  // Handle arrow/function expressions — recurse into body
+  if (expr.type === "ArrowFunctionExpression" || expr.type === "FunctionExpression") {
+    findTransInExpression(expr.body, code, results, constants);
+    return;
+  }
+
+  // Handle block bodies (arrow functions with braces)
+  if (expr.type === "BlockStatement") {
+    for (const stmt of expr.body) {
+      if (stmt.type === "ReturnStatement" && stmt.argument) {
+        findTransInExpression(stmt.argument, code, results, constants);
+      }
+    }
+    return;
+  }
+}
+
+// Helper: Scan an element's direct children for t() function calls and extract i18n key info.
+function findTCallsInChildren(jsxElement: JSXElement, code: string, state: TransformState): I18nKeyInfo[] {
+  if (state.tFunctions.size === 0) return [];
+
+  const results: I18nKeyInfo[] = [];
+
+  for (const child of jsxElement.children) {
+    if (child.type === "JSXExpressionContainer") {
+      const expr = (child as any).expression;
+      if (expr && expr.type !== "JSXEmptyExpression") {
+        findTCallInExpression(expr, code, results, state);
+      }
+    }
+  }
+
+  return results;
+}
+
+// Helper: Recursively search an expression tree for t() calls.
+// Handles LogicalExpression (&&, ||), ConditionalExpression (?:), CallExpression (.map()),
+// ArrowFunctionExpression/FunctionExpression (callbacks), BlockStatement, and direct CallExpression.
+function findTCallInExpression(expr: any, code: string, results: I18nKeyInfo[], state: TransformState): void {
+  if (!expr || !expr.type) return;
+
+  if (expr.type === "CallExpression") {
+    const info = detectTCall(expr, code, state);
+    if (info) {
+      results.push(info);
+      return;
+    }
+    // Not a t() call — recurse into arguments (for .map() callbacks etc.)
+    for (const arg of expr.arguments) {
+      findTCallInExpression(arg, code, results, state);
+    }
+    return;
+  }
+
+  if (expr.type === "LogicalExpression") {
+    findTCallInExpression(expr.left, code, results, state);
+    findTCallInExpression(expr.right, code, results, state);
+    return;
+  }
+
+  if (expr.type === "ConditionalExpression") {
+    findTCallInExpression(expr.consequent, code, results, state);
+    findTCallInExpression(expr.alternate, code, results, state);
+    return;
+  }
+
+  if (expr.type === "ArrowFunctionExpression" || expr.type === "FunctionExpression") {
+    findTCallInExpression(expr.body, code, results, state);
+    return;
+  }
+
+  if (expr.type === "BlockStatement") {
+    for (const stmt of expr.body) {
+      if (stmt.type === "ReturnStatement" && stmt.argument) {
+        findTCallInExpression(stmt.argument, code, results, state);
+      }
+    }
+    return;
+  }
+}
+
+// Helper: Detect a t("key") call and extract i18n key info.
+function detectTCall(callExpr: any, code: string, state: TransformState): I18nKeyInfo | null {
+  if (callExpr.callee?.type !== "Identifier") return null;
+
+  const calleeName = callExpr.callee.name;
+  const namespace = state.tFunctions.get(calleeName);
+  if (namespace === undefined) return null;
+
+  const firstArg = callExpr.arguments?.[0];
+  if (!firstArg) return null;
+
+  // Static string key: t("features.title")
+  if (firstArg.type === "Literal" && typeof firstArg.value === "string") {
+    const key = firstArg.value;
+    return { fullKey: `${namespace}:${key}`, key, namespace, keyExpr: null, nsExpr: null };
+  }
+
+  // Dynamic key — try constant resolution first, then fall back to expression
+  if (hasRange(firstArg)) {
+    const exprSrc = code.slice(firstArg.start, firstArg.end);
+
+    if (firstArg.type === "Identifier" && state.constants.has(firstArg.name)) {
+      const key = state.constants.get(firstArg.name)!;
+      return { fullKey: `${namespace}:${key}`, key, namespace, keyExpr: null, nsExpr: null };
+    }
+
+    return { fullKey: `${namespace}:${exprSrc}`, key: exprSrc, namespace, keyExpr: exprSrc, nsExpr: null };
+  }
+
+  return null;
+}
+
 // Helper: Check if element is a "leaf" with only static text (no nested elements or expressions)
 function isTextLeafElement(jsxElement: JSXElement): boolean {
   let hasText = false;
@@ -705,4 +1009,38 @@ function isTextLeafElement(jsxElement: JSXElement): boolean {
   return hasText;
 }
 
+// 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
+// text-producing expressions (Identifier, MemberExpression, Literal, TemplateLiteral).
+// Skips CallExpression, ConditionalExpression, LogicalExpression (these typically produce elements).
+function hasVisibleTextContent(jsxElement: JSXElement): boolean {
+  for (const child of jsxElement.children) {
+    if (child.type === "JSXText") {
+      const textValue = (child as any).value;
+      if (textValue?.trim()) {
+        return true;
+      }
+      continue;
+    }
+
+    if (child.type === "JSXExpressionContainer") {
+      const expr = (child as any).expression;
+      if (!expr || expr.type === "JSXEmptyExpression") {
+        continue;
+      }
+      if (
+        expr.type === "Identifier" ||
+        expr.type === "MemberExpression" ||
+        expr.type === "Literal" ||
+        expr.type === "TemplateLiteral"
+      ) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+}
+
 export default upstartEditor.vite;

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

@@ -0,0 +1,59 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { createUnplugin } from "unplugin";
+import type { UpstartBrandingPluginOptions } from "./types.js";
+
+const DEFAULT_OPTIONS: Required<UpstartBrandingPluginOptions> = {
+  enabled: false,
+};
+
+/**
+ * Upstart Branding Vite plugin (build-time)
+ *
+ * Injects a "Made with Upstart" badge into the app entry during build.
+ * The badge appears at the bottom of the page, then fades out after a
+ * few seconds or when the user scrolls.
+ */
+export const upstartBranding = createUnplugin<UpstartBrandingPluginOptions>((options = {}) => {
+  const { enabled } = { ...DEFAULT_OPTIONS, ...options };
+
+  if (!enabled) {
+    return { name: "upstart-branding-disabled" };
+  }
+
+  const runtimePath = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "./runtime");
+
+  return {
+    name: "upstart-branding",
+    enforce: "pre",
+
+    transform(code, id) {
+      const [cleanId] = id.split("?");
+      if (!cleanId || cleanId.includes("node_modules")) {
+        return null;
+      }
+
+      if (!/\.(t|j)sx?$/.test(cleanId)) {
+        return null;
+      }
+
+      if (!cleanId.includes("entry.client.tsx")) {
+        return null;
+      }
+
+      if (code.includes("initUpstartBranding")) {
+        return null;
+      }
+
+      const imports = `import { initUpstartBranding } from ${JSON.stringify(runtimePath)};`;
+      const injection = "requestIdleCallback(initUpstartBranding);";
+
+      return {
+        code: `${imports}${code}${injection}`,
+        map: null,
+      };
+    },
+  };
+});
+
+export default upstartBranding.vite;